mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-15 11:37:57 +01:00
Merged feature/remove_actions into master
* Migration to TS * Change to typescript * Fix css style issue due to bootstrap. * Fix eslit errors * Remove print button on try
This commit is contained in:
Paulo Veiga
parent
165142a0f5
commit
2c4d937ffa
20
packages/editor/src/bootstrap-fixes.css
vendored
Normal file
20
packages/editor/src/bootstrap-fixes.css
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
/*
|
||||
These are patches or hacks to avoid boostrap interfering with Mui styles
|
||||
This file is meant to be removed when removing bootstrap
|
||||
*/
|
||||
/*
|
||||
/* bootstrap modal */
|
||||
|
||||
.wise-editor .modal {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
10
packages/editor/src/bootstrap-prefix.min.css
vendored
Normal file
10
packages/editor/src/bootstrap-prefix.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
packages/editor/src/bootstrap.min.css
vendored
7
packages/editor/src/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -43,12 +43,12 @@ export default function Toolbar({
|
||||
}: ToolbarPropsType): React.ReactElement {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<HeaderContainer>
|
||||
<HeaderContainer className="wise-editor">
|
||||
<div id="toolbar">
|
||||
<div id="backToList">
|
||||
<img src={BackIconSvg} />
|
||||
</div>
|
||||
{editorMode === 'edition' && (
|
||||
{(editorMode === 'edition-editor' || editorMode === 'edition-owner') && (
|
||||
<div id="persist" className="buttonContainer">
|
||||
<ToolbarButton id="save" className="buttonOn">
|
||||
<img src={SaveSvg} />
|
||||
@ -112,29 +112,15 @@ export default function Toolbar({
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
<div id="separator" className="buttonContainer"></div>
|
||||
{editorMode === 'edition' && (
|
||||
<ToolbarRightContainer>
|
||||
<ToolbarButton
|
||||
id="export"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('export')}
|
||||
>
|
||||
<img src={ExportSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="publishIt"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('publish')}
|
||||
>
|
||||
<img src={PublicSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="history"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('history')}
|
||||
>
|
||||
<img src={HistorySvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarRightContainer>
|
||||
<ToolbarButton
|
||||
id="export"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('export')}
|
||||
>
|
||||
<img src={ExportSvg} />
|
||||
</ToolbarButton>
|
||||
{(editorMode === 'edition-owner' || editorMode === 'edition-editor' || editorMode === 'edition-viewer') && (
|
||||
<ToolbarButton
|
||||
id="print"
|
||||
className="buttonOn"
|
||||
@ -142,14 +128,37 @@ export default function Toolbar({
|
||||
>
|
||||
<img src={PrintSvg} />
|
||||
</ToolbarButton>
|
||||
)}
|
||||
{editorMode === 'edition-owner' && (
|
||||
<>
|
||||
<ToolbarButton
|
||||
id="history"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('history')}
|
||||
>
|
||||
<img src={HistorySvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="publishIt"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('publish')}
|
||||
>
|
||||
<img src={PublicSvg} />
|
||||
</ToolbarButton>
|
||||
</>
|
||||
)}
|
||||
{(editorMode === 'edition-owner' || editorMode === 'edition-editor') && (
|
||||
<ToolbarButton id="account">
|
||||
<img src={AccountSvg} />
|
||||
</ToolbarButton>
|
||||
)}
|
||||
{editorMode === 'edition-owner' && (
|
||||
<ActionButton onClick={() => onAction('share')}>
|
||||
{intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
|
||||
</ActionButton>
|
||||
</ToolbarRightContainer>
|
||||
)}
|
||||
|
||||
)}
|
||||
</ToolbarRightContainer>
|
||||
</div>
|
||||
</HeaderContainer>
|
||||
);
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
/********************************************************************************/
|
||||
/* Header & Toolbar Styles */
|
||||
/********************************************************************************/
|
||||
@import "bootstrap.min.css";
|
||||
@import "bootstrap-prefix.min.css";
|
||||
@import "bootstrap-fixes.css";
|
||||
|
||||
html {
|
||||
/* avoid bootstrap overriding font-size and breaking Mui */
|
||||
@ -129,7 +130,7 @@ div.shareModalDialog {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.popover {
|
||||
.wise-editor .popover {
|
||||
font-size: 13px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@ -13,7 +13,6 @@ import {
|
||||
} from '@wisemapping/mindplot';
|
||||
import './global-styled.css';
|
||||
import I18nMsg from './classes/i18n-msg';
|
||||
import Messages from '@wisemapping/mindplot/src/components/Messages';
|
||||
|
||||
declare global {
|
||||
// used in mindplot
|
||||
@ -100,7 +99,8 @@ const Editor = ({
|
||||
onAction={onAction}
|
||||
/>
|
||||
}
|
||||
<div id="mindplot" style={mindplotStyle}></div>
|
||||
<div id="mindplot" style={mindplotStyle} className="wise-editor"></div>
|
||||
<div id="mindplot-tooltips" className="wise-editor"></div>
|
||||
<Footer editorMode={options.mode} />
|
||||
</IntlProvider >
|
||||
);
|
||||
|
||||
@ -36,7 +36,7 @@ const options: EditorOptions = {
|
||||
zoom: 0.8,
|
||||
locked: false,
|
||||
mapTitle: "Develop Mindnap",
|
||||
mode: 'edition',
|
||||
mode: 'edition-owner',
|
||||
locale: 'en',
|
||||
enableKeyboardEvents: true
|
||||
};
|
||||
|
||||
4
packages/mindplot/src/@types/custom.d.ts
vendored
4
packages/mindplot/src/@types/custom.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
declare module "*.svg" {
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
/*
|
||||
* Copyright [2021] [wisemapping]
|
||||
*
|
||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
||||
* It is basically the Apache License, Version 2.0 (the "License") plus the
|
||||
* "powered by wisemapping" text requirement on every single page;
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the license at
|
||||
*
|
||||
* http://www.wisemapping.org/license
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import Icon from './Icon';
|
||||
|
||||
class ActionIcon extends Icon {
|
||||
constructor(topic, url) {
|
||||
super(url);
|
||||
this._node = topic;
|
||||
}
|
||||
|
||||
getNode() {
|
||||
return this._node;
|
||||
}
|
||||
|
||||
setPosition(x, y) {
|
||||
const size = this.getSize();
|
||||
this.getImage().setPosition(x - size.width / 2, y - size.height / 2);
|
||||
}
|
||||
|
||||
addEvent(event, fn) {
|
||||
this.getImage().addEvent(event, fn);
|
||||
}
|
||||
|
||||
addToGroup(group) {
|
||||
group.append(this.getImage());
|
||||
}
|
||||
|
||||
setVisibility(visible) {
|
||||
this.getImage().setVisibility(visible);
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
return this.getImage().isVisible();
|
||||
}
|
||||
|
||||
setCursor(cursor) {
|
||||
return this.getImage().setCursor(cursor);
|
||||
}
|
||||
|
||||
moveToBack(cursor) {
|
||||
return this.getImage().moveToBack(cursor);
|
||||
}
|
||||
|
||||
moveToFront(cursor) {
|
||||
return this.getImage().moveToFront(cursor);
|
||||
}
|
||||
}
|
||||
|
||||
export default ActionIcon;
|
||||
@ -41,20 +41,15 @@ class CommandContext {
|
||||
}
|
||||
|
||||
findTopics(topicIds: number[]): Topic[] {
|
||||
$assert($defined(topicIds), 'topicsIds can not be null');
|
||||
const topicsIds = Array.isArray(topicIds) ? topicIds : [topicIds];
|
||||
const designerTopics = this._designer.getModel().getTopics();
|
||||
const result = designerTopics.filter((topic) => topicsIds.includes(topic.getId()));
|
||||
|
||||
if (result.length !== topicsIds.length) {
|
||||
const ids = designerTopics.map((topic) => topic.getId());
|
||||
$assert(
|
||||
result.length === topicsIds.length,
|
||||
`Could not find topic. Result:${result
|
||||
} Filter Criteria:${topicsIds
|
||||
} Current Topics: [${ids
|
||||
}]`,
|
||||
);
|
||||
throw new Error(`Could not find topic. Result:${result
|
||||
} Filter Criteria:${topicsIds
|
||||
} Current Topics: [${ids}])`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@ -116,7 +111,7 @@ class CommandContext {
|
||||
moveTopic(topic: Topic, position: Point) {
|
||||
$assert(topic, 'topic cannot be null');
|
||||
$assert(position, 'position cannot be null');
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
|
||||
EventBus.instance.fireEvent('topicMoved', {
|
||||
node: topic.getModel(),
|
||||
position,
|
||||
});
|
||||
|
||||
@ -93,8 +93,8 @@ class ConnectionLine {
|
||||
return line;
|
||||
}
|
||||
|
||||
setVisibility(value: boolean): void {
|
||||
this._line2d.setVisibility(value);
|
||||
setVisibility(value: boolean, fade = 0): void {
|
||||
this._line2d.setVisibility(value, fade);
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
|
||||
@ -39,7 +39,7 @@ import Relationship from './Relationship';
|
||||
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
|
||||
import TopicFeatureFactory from './TopicFeature';
|
||||
|
||||
import { create } from './NodeGraphUtils';
|
||||
import TopicFactory from './TopicFactory';
|
||||
|
||||
import EventBus from './layout/EventBus';
|
||||
import EventBusDispatcher from './layout/EventBusDispatcher';
|
||||
@ -53,7 +53,6 @@ import Mindmap from './model/Mindmap';
|
||||
import NodeModel from './model/NodeModel';
|
||||
import Topic from './Topic';
|
||||
import { DesignerOptions } from './DesignerOptionsBuilder';
|
||||
import MainTopic from './MainTopic';
|
||||
import DragTopic from './DragTopic';
|
||||
import CentralTopic from './CentralTopic';
|
||||
import FeatureType from './model/FeatureType';
|
||||
@ -225,9 +224,9 @@ class Designer extends Events {
|
||||
return dragManager;
|
||||
}
|
||||
|
||||
private _buildNodeGraph(model: NodeModel, readOnly: boolean): MainTopic {
|
||||
private _buildNodeGraph(model: NodeModel, readOnly: boolean): Topic {
|
||||
// Create node graph ...
|
||||
const topic = create(model, { readOnly });
|
||||
const topic = TopicFactory.create(model, { readOnly });
|
||||
this.getModel().addTopic(topic);
|
||||
const me = this;
|
||||
// Add Topic events ...
|
||||
@ -606,7 +605,7 @@ class Designer extends Events {
|
||||
this.goToNode(centralTopic);
|
||||
|
||||
// Finally, sort the map ...
|
||||
EventBus.instance.fireEvent(EventBus.events.DoLayout);
|
||||
EventBus.instance.fireEvent('forceLayout');
|
||||
|
||||
this.fireEvent('loadSuccess');
|
||||
}
|
||||
@ -695,12 +694,6 @@ class Designer extends Events {
|
||||
mindmap.deleteRelationship(rel.getModel());
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {mindplot.model.RelationshipModel} model
|
||||
* @return {mindplot.Relationship} the new relationship with events registered
|
||||
* @throws will throw an error if the target topic cannot be found
|
||||
*/
|
||||
private _buildRelationshipShape(model: RelationshipModel): Relationship {
|
||||
const dmodel = this.getModel();
|
||||
|
||||
@ -744,13 +737,9 @@ class Designer extends Events {
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {mindplot.Topic} node the topic to remove
|
||||
* removes the given topic and its children from Workspace, DesignerModel and NodeModel
|
||||
*/
|
||||
removeTopic(node) {
|
||||
removeTopic(node: Topic): void {
|
||||
if (!node.isCentralTopic()) {
|
||||
const parent = node._parent;
|
||||
const parent = node.getParent();
|
||||
node.disconnect(this._workspace);
|
||||
|
||||
// remove children
|
||||
@ -771,17 +760,13 @@ class Designer extends Events {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_resetEdition() {
|
||||
private _resetEdition() {
|
||||
const screenManager = this._workspace.getScreenManager();
|
||||
screenManager.fireEvent('update');
|
||||
screenManager.fireEvent('mouseup');
|
||||
this._relPivot.dispose();
|
||||
}
|
||||
|
||||
/** */
|
||||
deleteSelectedEntities() {
|
||||
// Is there some action in progress ?.
|
||||
this._resetEdition();
|
||||
@ -840,7 +825,7 @@ class Designer extends Events {
|
||||
|
||||
/** */
|
||||
changeBackgroundColor(color: string) {
|
||||
const validateFunc = (topic) => topic.getShapeType() !== TopicShape.LINE;
|
||||
const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE;
|
||||
const validateError = 'Color can not be set to line topics.';
|
||||
|
||||
const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
|
||||
@ -849,9 +834,8 @@ class Designer extends Events {
|
||||
}
|
||||
}
|
||||
|
||||
/** */
|
||||
changeBorderColor(color: string) {
|
||||
const validateFunc = (topic) => topic.getShapeType() !== TopicShape.LINE;
|
||||
const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE;
|
||||
const validateError = 'Color can not be set to line topics.';
|
||||
const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
|
||||
if (topicsIds.length > 0) {
|
||||
@ -859,7 +843,6 @@ class Designer extends Events {
|
||||
}
|
||||
}
|
||||
|
||||
/** */
|
||||
changeFontSize(size: number) {
|
||||
const topicsIds = this.getModel().filterTopicsIds();
|
||||
if (topicsIds.length > 0) {
|
||||
@ -895,11 +878,7 @@ class Designer extends Events {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* lets the selected topic open the link editor where the user can define or modify an
|
||||
* existing link
|
||||
*/
|
||||
addLink() {
|
||||
addLink(): void {
|
||||
const model = this.getModel();
|
||||
const topic = model.selectedTopic();
|
||||
if (topic) {
|
||||
@ -908,8 +887,7 @@ class Designer extends Events {
|
||||
}
|
||||
}
|
||||
|
||||
/** */
|
||||
addNote() {
|
||||
addNote(): void {
|
||||
const model = this.getModel();
|
||||
const topic = model.selectedTopic();
|
||||
if (topic) {
|
||||
|
||||
@ -16,41 +16,50 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
import ActionDispatcher from './ActionDispatcher';
|
||||
import Command from './Command';
|
||||
import CommandContext from './CommandContext';
|
||||
import DesignerUndoManager from './DesignerUndoManager';
|
||||
import EventBus from './layout/EventBus';
|
||||
|
||||
class DesignerActionRunner {
|
||||
constructor(commandContext, notifier) {
|
||||
private _undoManager: DesignerUndoManager;
|
||||
|
||||
private _context: CommandContext;
|
||||
|
||||
private _actionDisplatcher: ActionDispatcher;
|
||||
|
||||
constructor(commandContext: CommandContext, notifier: ActionDispatcher) {
|
||||
$assert(commandContext, 'commandContext can not be null');
|
||||
|
||||
this._undoManager = new DesignerUndoManager();
|
||||
this._context = commandContext;
|
||||
this._notifier = notifier;
|
||||
this._actionDisplatcher = notifier;
|
||||
}
|
||||
|
||||
execute(command) {
|
||||
execute(command: Command): void {
|
||||
$assert(command, 'command can not be null');
|
||||
command.execute(this._context);
|
||||
this._undoManager.enqueue(command);
|
||||
this.fireChangeEvent();
|
||||
EventBus.instance.fireEvent(EventBus.events.DoLayout);
|
||||
EventBus.instance.fireEvent('forceLayout');
|
||||
}
|
||||
|
||||
undo() {
|
||||
undo(): void {
|
||||
this._undoManager.execUndo(this._context);
|
||||
this.fireChangeEvent();
|
||||
EventBus.instance.fireEvent(EventBus.events.DoLayout);
|
||||
EventBus.instance.fireEvent('forceLayout');
|
||||
}
|
||||
|
||||
redo() {
|
||||
redo(): void {
|
||||
this._undoManager.execRedo(this._context);
|
||||
this.fireChangeEvent();
|
||||
EventBus.instance.fireEvent(EventBus.events.DoLayout);
|
||||
EventBus.instance.fireEvent('forceLayout');
|
||||
}
|
||||
|
||||
fireChangeEvent() {
|
||||
fireChangeEvent(): void {
|
||||
const event = this._undoManager.buildEvent();
|
||||
this._notifier.fireEvent('modelUpdate', event);
|
||||
this._actionDisplatcher.fireEvent('modelUpdate', event);
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@ export function buildDesigner(options: DesignerOptions): Designer {
|
||||
PersistenceManager.init(persistence);
|
||||
|
||||
// Register toolbar event ...
|
||||
if (options.mode === 'edition' || options.mode === 'showcase') {
|
||||
if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'showcase') {
|
||||
const menu = new Menu(designer, 'toolbar');
|
||||
|
||||
// If a node has focus, focus can be move to another node using the keys.
|
||||
|
||||
@ -46,7 +46,7 @@ class OptionsBuilder {
|
||||
}
|
||||
|
||||
const defaultOptions: DesignerOptions = {
|
||||
mode: 'edition',
|
||||
mode: 'edition-owner',
|
||||
zoom: 0.85,
|
||||
saveOnLoad: true,
|
||||
containerSize,
|
||||
|
||||
@ -24,8 +24,6 @@ import Workspace from './Workspace';
|
||||
class DragManager {
|
||||
private _workspace: Workspace;
|
||||
|
||||
private _designerModel: Workspace;
|
||||
|
||||
private _isDragInProcess: boolean;
|
||||
|
||||
private _eventDispatcher: EventBusDispatcher;
|
||||
@ -38,7 +36,6 @@ class DragManager {
|
||||
|
||||
constructor(workspace: Workspace, eventDispatcher: EventBusDispatcher) {
|
||||
this._workspace = workspace;
|
||||
this._designerModel = workspace;
|
||||
this._listeners = {};
|
||||
this._isDragInProcess = false;
|
||||
this._eventDispatcher = eventDispatcher;
|
||||
@ -68,7 +65,7 @@ class DragManager {
|
||||
|
||||
// Register mouse up listeners ...
|
||||
const mouseUpListener = dragManager._buildMouseUpListener(
|
||||
workspace, topic, dragNode, dragManager,
|
||||
workspace, dragNode, dragManager,
|
||||
);
|
||||
screen.addEvent('mouseup', mouseUpListener);
|
||||
|
||||
@ -115,7 +112,7 @@ class DragManager {
|
||||
return result;
|
||||
}
|
||||
|
||||
protected _buildMouseUpListener(workspace: Workspace, topic: Topic, dragNode, dragManager: DragManager) {
|
||||
protected _buildMouseUpListener(workspace: Workspace, dragNode, dragManager: DragManager) {
|
||||
const screen = workspace.getScreenManager();
|
||||
const me = this;
|
||||
const result = (event: Event) => {
|
||||
@ -149,13 +146,7 @@ class DragManager {
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* type:
|
||||
* - startdragging.
|
||||
* - dragging
|
||||
* - enddragging
|
||||
*/
|
||||
addEvent(type: string, listener) {
|
||||
addEvent(type: 'startdragging' | 'dragging' | 'enddragging', listener) {
|
||||
this._listeners[type] = listener;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { Point, CurvedLine, Rect } from '@wisemapping/web2d';
|
||||
|
||||
import DragTopicConfig from './DragTopicConfig';
|
||||
import SizeType from './SizeType';
|
||||
import Topic from './Topic';
|
||||
import Shape from './util/Shape';
|
||||
@ -43,7 +42,7 @@ class DragPivot {
|
||||
|
||||
constructor() {
|
||||
this._position = new Point();
|
||||
this._size = DragTopicConfig.PIVOT_SIZE;
|
||||
this._size = DragPivot.DEFAULT_PIVOT_SIZE;
|
||||
|
||||
this._straightLine = this._buildStraightLine();
|
||||
this._curvedLine = this._buildCurvedLine();
|
||||
@ -251,6 +250,8 @@ class DragPivot {
|
||||
this.setVisibility(false);
|
||||
this._targetTopic = null;
|
||||
}
|
||||
|
||||
static DEFAULT_PIVOT_SIZE = { width: 50, height: 6 };
|
||||
}
|
||||
|
||||
export default DragPivot;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
import { Point, ElementClass } from '@wisemapping/web2d';
|
||||
|
||||
import ActionDispatcher from './ActionDispatcher';
|
||||
@ -27,12 +27,19 @@ import Workspace from './Workspace';
|
||||
|
||||
class DragTopic {
|
||||
private _elem2d: ElementClass;
|
||||
|
||||
private _order: number | null;
|
||||
|
||||
private _draggedNode: NodeGraph;
|
||||
|
||||
private _layoutManager: LayoutManager;
|
||||
private _position: any;
|
||||
|
||||
private _position: Point;
|
||||
|
||||
private _isInWorkspace: boolean;
|
||||
static _dragPivot: any;
|
||||
|
||||
static _dragPivot: DragPivot = new DragPivot();
|
||||
|
||||
constructor(dragShape: ElementClass, draggedNode: NodeGraph, layoutManger: LayoutManager) {
|
||||
$assert(dragShape, 'Rect can not be null.');
|
||||
$assert(draggedNode, 'draggedNode can not be null.');
|
||||
@ -46,13 +53,13 @@ class DragTopic {
|
||||
this._isInWorkspace = false;
|
||||
}
|
||||
|
||||
setOrder(order: number) {
|
||||
setOrder(order: number): void {
|
||||
this._order = order;
|
||||
}
|
||||
|
||||
setPosition(x: number, y: number) {
|
||||
setPosition(x: number, y: number): void {
|
||||
// Update drag shadow position ....
|
||||
let position = { x, y };
|
||||
const position = { x, y };
|
||||
this._position.setValue(position.x, position.y);
|
||||
|
||||
// Elements are positioned in the center.
|
||||
@ -104,11 +111,7 @@ class DragTopic {
|
||||
$assert(parent, 'Parent connection node can not be null.');
|
||||
|
||||
// Where it should be connected ?
|
||||
|
||||
// @todo: This is a hack for the access of the editor.
|
||||
// It's required to review why this is needed forcing the declaration of a global variable.
|
||||
|
||||
const predict = global.designer._eventBussDispatcher._layoutManager.predict(
|
||||
const predict = this._layoutManager.predict(
|
||||
parent.getId(),
|
||||
this._draggedNode.getId(),
|
||||
this.getPosition(),
|
||||
@ -154,8 +157,8 @@ class DragTopic {
|
||||
}
|
||||
}
|
||||
|
||||
_getDragPivot(): DragPivot {
|
||||
return DragTopic.__getDragPivot();
|
||||
private _getDragPivot(): DragPivot {
|
||||
return DragTopic._dragPivot;
|
||||
}
|
||||
|
||||
getPosition(): Point {
|
||||
@ -206,18 +209,9 @@ class DragTopic {
|
||||
|
||||
static init(workspace: Workspace) {
|
||||
$assert(workspace, 'workspace can not be null');
|
||||
const pivot = DragTopic.__getDragPivot();
|
||||
const pivot = DragTopic._dragPivot;
|
||||
workspace.append(pivot);
|
||||
};
|
||||
|
||||
static __getDragPivot() {
|
||||
let result = DragTopic._dragPivot;
|
||||
if (!$defined(result)) {
|
||||
result = new DragPivot();
|
||||
DragTopic._dragPivot = result;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default DragTopic;
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
const PIVOT_SIZE = { width: 50, height: 6 };
|
||||
|
||||
export default {
|
||||
PIVOT_SIZE,
|
||||
};
|
||||
@ -17,20 +17,21 @@
|
||||
*/
|
||||
|
||||
class EditorProperties {
|
||||
private _zoom: number;
|
||||
|
||||
constructor() {
|
||||
this._zoom = 0;
|
||||
this._position = 0;
|
||||
}
|
||||
|
||||
setZoom(zoom) {
|
||||
setZoom(zoom: number) {
|
||||
this._zoom = zoom;
|
||||
}
|
||||
|
||||
getZoom() {
|
||||
getZoom(): number {
|
||||
return this._zoom;
|
||||
}
|
||||
|
||||
asProperties() {
|
||||
asProperties(): string {
|
||||
return `zoom=${this._zoom}\n`;
|
||||
}
|
||||
}
|
||||
@ -1,2 +1,2 @@
|
||||
type EditorRenderMode = 'viewonly' | 'edition' | 'showcase';
|
||||
type EditorRenderMode = 'viewonly' | 'edition-owner' | 'edition-editor' | 'edition-viewer' | 'showcase';
|
||||
export default EditorRenderMode;
|
||||
|
||||
@ -17,24 +17,24 @@
|
||||
*/
|
||||
|
||||
class Events {
|
||||
private $events;
|
||||
private _handlerByType;
|
||||
|
||||
constructor() {
|
||||
this.$events = {};
|
||||
this._handlerByType = {};
|
||||
}
|
||||
|
||||
static _removeOn(string: string) {
|
||||
return string.replace(/^on([A-Z])/, (full, first) => first.toLowerCase());
|
||||
static _normalizeEventName(string: string) {
|
||||
return string.replace(/^on([A-Z])/, (_full, first) => first.toLowerCase());
|
||||
}
|
||||
|
||||
addEvent(typeName: string, fn?, internal?: boolean): Events {
|
||||
const type = Events._removeOn(typeName);
|
||||
const type = Events._normalizeEventName(typeName);
|
||||
|
||||
// Add function had not been added yet
|
||||
const funByType = this.$events[type] ? this.$events[type] : [];
|
||||
const funByType = this._handlerByType[type] ? this._handlerByType[type] : [];
|
||||
if (!funByType.includes(fn)) {
|
||||
funByType.push(fn);
|
||||
this.$events[type] = funByType;
|
||||
this._handlerByType[type] = funByType;
|
||||
}
|
||||
|
||||
// Mark reference ...
|
||||
@ -42,25 +42,21 @@ class Events {
|
||||
return this;
|
||||
}
|
||||
|
||||
fireEvent(typeName: string, eventArgs?, delay?: boolean): Events {
|
||||
const type = Events._removeOn(typeName);
|
||||
const events = this.$events[type];
|
||||
fireEvent(typeName: string, eventArgs?): Events {
|
||||
const type = Events._normalizeEventName(typeName);
|
||||
const events = this._handlerByType[type];
|
||||
if (!events) return this;
|
||||
|
||||
const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
|
||||
events.forEach(((fn) => {
|
||||
if (delay) {
|
||||
fn.delay(delay, this, args);
|
||||
} else {
|
||||
fn.apply(this, args);
|
||||
}
|
||||
fn.apply(this, args);
|
||||
}));
|
||||
return this;
|
||||
}
|
||||
|
||||
removeEvent(typeName: string, fn?): Events {
|
||||
const type = Events._removeOn(typeName);
|
||||
const events = this.$events[type];
|
||||
const type = Events._normalizeEventName(typeName);
|
||||
const events = this._handlerByType[type];
|
||||
if (events && !fn.internal) {
|
||||
const index = events.indexOf(fn);
|
||||
if (index !== -1) events.splice(index, 1);
|
||||
|
||||
@ -16,14 +16,14 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
import { Image } from '@wisemapping/web2d';
|
||||
import { Image, Point } from '@wisemapping/web2d';
|
||||
import IconGroup from './IconGroup';
|
||||
import { Point } from '@wisemapping/web2d';
|
||||
import SizeType from './SizeType';
|
||||
import FeatureModel from './model/FeatureModel';
|
||||
|
||||
abstract class Icon {
|
||||
protected _image: Image;
|
||||
|
||||
protected _group: IconGroup;
|
||||
|
||||
constructor(url: string) {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
// eslint-disable-next-line max-classes-per-file
|
||||
|
||||
import {
|
||||
$assert,
|
||||
$defined,
|
||||
@ -23,12 +23,11 @@ import {
|
||||
import {
|
||||
Group,
|
||||
ElementClass,
|
||||
Point,
|
||||
} from '@wisemapping/web2d';
|
||||
import IconGroupRemoveTip from './IconGroupRemoveTip';
|
||||
import { Point } from '@wisemapping/web2d';
|
||||
import Icon from './Icon';
|
||||
import SizeType from './SizeType';
|
||||
import IconModel from './model/IconModel';
|
||||
import FeatureModel from './model/FeatureModel';
|
||||
|
||||
const ORDER_BY_TYPE = new Map<string, number>();
|
||||
@ -38,10 +37,15 @@ ORDER_BY_TYPE.set('link', 2);
|
||||
|
||||
class IconGroup {
|
||||
private _icons: Icon[];
|
||||
|
||||
private _group: any;
|
||||
|
||||
private _removeTip: IconGroupRemoveTip;
|
||||
|
||||
private _iconSize: SizeType;
|
||||
|
||||
private _topicId: number;
|
||||
|
||||
constructor(topicId: number, iconSize: number) {
|
||||
$assert($defined(topicId), 'topicId can not be null');
|
||||
$assert($defined(iconSize), 'iconSize can not be null');
|
||||
@ -59,7 +63,6 @@ class IconGroup {
|
||||
this._removeTip = new IconGroupRemoveTip(this._group);
|
||||
this.seIconSize(iconSize, iconSize);
|
||||
this._registerListeners();
|
||||
|
||||
}
|
||||
|
||||
setPosition(x: number, y: number): void {
|
||||
@ -189,7 +192,6 @@ class IconGroup {
|
||||
}
|
||||
|
||||
static ICON_PADDING = 5;
|
||||
|
||||
}
|
||||
|
||||
export default IconGroup;
|
||||
|
||||
@ -26,8 +26,11 @@ import FeatureModel from './model/FeatureModel';
|
||||
|
||||
class LinkIcon extends Icon {
|
||||
private _linksModel: FeatureModel;
|
||||
|
||||
private _topic: Topic;
|
||||
|
||||
private _readOnly: boolean;
|
||||
|
||||
private _tip: LinkIconTooltip;
|
||||
|
||||
constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
|
||||
@ -73,8 +76,8 @@ class LinkIcon extends Icon {
|
||||
getModel(): FeatureModel {
|
||||
return this._linksModel;
|
||||
}
|
||||
static IMAGE_URL = LinksImage;
|
||||
|
||||
static IMAGE_URL = LinksImage;
|
||||
}
|
||||
|
||||
export default LinkIcon;
|
||||
|
||||
@ -161,7 +161,7 @@ abstract class NodeGraph {
|
||||
|
||||
createDragNode(layoutManager: LayoutManager) {
|
||||
const dragShape = this._buildDragShape();
|
||||
|
||||
|
||||
return new DragTopic(dragShape, this, layoutManager);
|
||||
}
|
||||
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
|
||||
import CentralTopic from './CentralTopic';
|
||||
import MainTopic from './MainTopic';
|
||||
|
||||
/**
|
||||
* creates a new topic from the given node model
|
||||
* @memberof mindplot.Nodegraph
|
||||
* @param {mindplot.model.NodeModel} nodeModel
|
||||
* @param {Object} options
|
||||
* @throws will throw an error if nodeModel is null or undefined
|
||||
* @throws will throw an error if the nodeModel's type is null or undefined
|
||||
* @throws will throw an error if the node type cannot be recognized as either central or main
|
||||
* topic type
|
||||
* @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
|
||||
*/
|
||||
export const create = (nodeModel, options) => {
|
||||
$assert(nodeModel, 'Model can not be null');
|
||||
|
||||
const type = nodeModel.getType();
|
||||
$assert(type, 'Node model type can not be null');
|
||||
|
||||
let result;
|
||||
if (type === 'CentralTopic') {
|
||||
result = new CentralTopic(nodeModel, options);
|
||||
} else if (type === 'MainTopic') {
|
||||
result = new MainTopic(nodeModel, options);
|
||||
} else {
|
||||
$assert(false, `unsupported node type:${type}`);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export default {
|
||||
create,
|
||||
};
|
||||
@ -27,8 +27,11 @@ import FeatureModel from './model/FeatureModel';
|
||||
|
||||
class NoteIcon extends Icon {
|
||||
private _linksModel: NoteModel;
|
||||
|
||||
private _topic: Topic;
|
||||
|
||||
private _readOnly: boolean;
|
||||
|
||||
private _tip: FloatingTip;
|
||||
|
||||
constructor(topic: Topic, noteModel: NoteModel, readOnly: boolean) {
|
||||
@ -55,7 +58,6 @@ class NoteIcon extends Icon {
|
||||
}
|
||||
this._tip = new FloatingTip($(me.getImage().peer._native), {
|
||||
title: $msg('NOTE'),
|
||||
container: 'body',
|
||||
// Content can also be a function of the target element!
|
||||
content() {
|
||||
return me._buildTooltipContent();
|
||||
@ -88,7 +90,6 @@ class NoteIcon extends Icon {
|
||||
}
|
||||
|
||||
static IMAGE_URL = NotesImage;
|
||||
|
||||
}
|
||||
|
||||
export default NoteIcon;
|
||||
|
||||
@ -277,10 +277,10 @@ class Relationship extends ConnectionLine {
|
||||
return this._isInWorkspace;
|
||||
}
|
||||
|
||||
setVisibility(value: boolean) {
|
||||
super.setVisibility(value);
|
||||
setVisibility(value: boolean, fade = 0) {
|
||||
super.setVisibility(value, fade);
|
||||
if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
|
||||
this._startArrow.setVisibility(this._showStartArrow && value);
|
||||
this._startArrow.setVisibility(this._showStartArrow && value, fade);
|
||||
}
|
||||
|
||||
setOpacity(opacity: number) {
|
||||
|
||||
@ -78,8 +78,8 @@ class ShirinkConnector {
|
||||
this._isShrink = isShrink;
|
||||
}
|
||||
|
||||
setVisibility(value: boolean): void {
|
||||
this._ellipse.setVisibility(value);
|
||||
setVisibility(value: boolean, fade = 0): void {
|
||||
this._ellipse.setVisibility(value, fade);
|
||||
}
|
||||
|
||||
setOpacity(opacity: number): void {
|
||||
|
||||
@ -81,7 +81,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
|
||||
const commandFunc = (topic: Topic, pos: Point) => {
|
||||
const result = topic.getPosition();
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
|
||||
EventBus.instance.fireEvent('topicMoved', {
|
||||
node: topic.getModel(),
|
||||
position: pos,
|
||||
});
|
||||
@ -110,8 +110,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
this.execute(command);
|
||||
}
|
||||
|
||||
/** */
|
||||
changeTextToTopic(topicsIds: number[], text: string) {
|
||||
changeTextToTopic(topicsIds: number[], text: string): void {
|
||||
$assert($defined(topicsIds), 'topicsIds can not be null');
|
||||
|
||||
const commandFunc = (topic: Topic, value: string) => {
|
||||
@ -252,7 +251,6 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
this.execute(command);
|
||||
}
|
||||
|
||||
/** */
|
||||
addFeatureToTopic(topicId: number, featureType: FeatureType, attributes) {
|
||||
const command = new AddFeatureToTopicCommand(topicId, featureType, attributes);
|
||||
this.execute(command);
|
||||
|
||||
@ -28,7 +28,6 @@ import TopicStyle from './TopicStyle';
|
||||
import TopicFeatureFactory from './TopicFeature';
|
||||
import ConnectionLine from './ConnectionLine';
|
||||
import IconGroup from './IconGroup';
|
||||
import FadeEffect from './util/FadeEffect';
|
||||
import EventBus from './layout/EventBus';
|
||||
import ShirinkConnector from './ShrinkConnector';
|
||||
import NoteEditor from './widget/NoteEditor';
|
||||
@ -337,11 +336,6 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* assigns the new feature model to the topic's node model and adds the respective icon
|
||||
* @param {mindplot.model.FeatureModel} featureModel
|
||||
* @return {mindplot.Icon} the icon corresponding to the feature model
|
||||
*/
|
||||
addFeature(featureModel: FeatureModel): Icon {
|
||||
const iconGroup = this.getOrBuildIconGroup();
|
||||
this.closeEditors();
|
||||
@ -350,7 +344,7 @@ abstract class Topic extends NodeGraph {
|
||||
const model = this.getModel();
|
||||
model.addFeature(featureModel);
|
||||
|
||||
const result = TopicFeatureFactory.createIcon(this, featureModel, this.isReadOnly());
|
||||
const result: Icon = TopicFeatureFactory.createIcon(this, featureModel, this.isReadOnly());
|
||||
iconGroup.addIcon(
|
||||
result,
|
||||
featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(),
|
||||
@ -360,7 +354,6 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
findFeatureById(id: number) {
|
||||
const model = this.getModel();
|
||||
return model.findFeatureById(id);
|
||||
@ -431,7 +424,6 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
setFontSize(value: number, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setSize(value);
|
||||
@ -443,8 +435,7 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
setFontStyle(value, updateModel) {
|
||||
setFontStyle(value: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setStyle(value);
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
@ -454,8 +445,7 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
setFontWeight(value, updateModel) {
|
||||
setFontWeight(value: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setWeight(value);
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
@ -465,7 +455,6 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontWeight() {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontWeight();
|
||||
@ -476,8 +465,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontFamily() {
|
||||
getFontFamily(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontFamily();
|
||||
if (!$defined(result)) {
|
||||
@ -487,8 +475,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontColor() {
|
||||
getFontColor(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontColor();
|
||||
if (!$defined(result)) {
|
||||
@ -498,8 +485,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontStyle() {
|
||||
getFontStyle(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontStyle();
|
||||
if (!$defined(result)) {
|
||||
@ -509,8 +495,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontSize() {
|
||||
getFontSize(): number {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontSize();
|
||||
if (!$defined(result)) {
|
||||
@ -520,8 +505,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
setFontColor(value, updateModel) {
|
||||
setFontColor(value: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setColor(value);
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
@ -530,7 +514,7 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
}
|
||||
|
||||
_setText(text: string, updateModel: boolean) {
|
||||
private _setText(text: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setText(text == null ? TopicStyle.defaultText(this) : text);
|
||||
|
||||
@ -540,7 +524,6 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
}
|
||||
|
||||
/** */
|
||||
setText(text: string) {
|
||||
// Avoid empty nodes ...
|
||||
if (!text || $.trim(text).length === 0) {
|
||||
@ -552,7 +535,6 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
getText(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getText();
|
||||
@ -562,12 +544,11 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
setBackgroundColor(color: string) {
|
||||
this._setBackgroundColor(color, true);
|
||||
}
|
||||
|
||||
_setBackgroundColor(color: string, updateModel: boolean) {
|
||||
private _setBackgroundColor(color: string, updateModel: boolean) {
|
||||
const innerShape = this.getInnerShape();
|
||||
innerShape.setFill(color);
|
||||
|
||||
@ -593,11 +574,11 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
|
||||
/** */
|
||||
setBorderColor(color: string) {
|
||||
setBorderColor(color: string): void {
|
||||
this._setBorderColor(color, true);
|
||||
}
|
||||
|
||||
_setBorderColor(color: string, updateModel: boolean) {
|
||||
private _setBorderColor(color: string, updateModel: boolean): void {
|
||||
const innerShape = this.getInnerShape();
|
||||
innerShape.setAttribute('strokeColor', color);
|
||||
|
||||
@ -612,8 +593,7 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
}
|
||||
|
||||
/** */
|
||||
getBorderColor() {
|
||||
getBorderColor(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getBorderColor();
|
||||
if (!$defined(result)) {
|
||||
@ -622,7 +602,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
_buildTopicShape() {
|
||||
_buildTopicShape(): ElementClass {
|
||||
const groupAttributes = {
|
||||
width: 100,
|
||||
height: 100,
|
||||
@ -660,17 +640,17 @@ abstract class Topic extends NodeGraph {
|
||||
group.setTestId(model.getId());
|
||||
}
|
||||
|
||||
_registerDefaultListenersToElement(elem, topic) {
|
||||
const mouseOver = function mouseOver(event) {
|
||||
_registerDefaultListenersToElement(elem: ElementClass, topic: Topic) {
|
||||
const mouseOver = function mouseOver() {
|
||||
if (topic.isMouseEventsEnabled()) {
|
||||
topic.handleMouseOver(event);
|
||||
topic.handleMouseOver();
|
||||
}
|
||||
};
|
||||
elem.addEvent('mouseover', mouseOver);
|
||||
|
||||
const outout = function outout(event) {
|
||||
const outout = function outout() {
|
||||
if (topic.isMouseEventsEnabled()) {
|
||||
topic.handleMouseOut(event);
|
||||
topic.handleMouseOut();
|
||||
}
|
||||
};
|
||||
elem.addEvent('mouseout', outout);
|
||||
@ -697,13 +677,12 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
|
||||
/** */
|
||||
areChildrenShrunken() {
|
||||
areChildrenShrunken(): boolean {
|
||||
const model = this.getModel();
|
||||
return model.areChildrenShrunken() && !this.isCentralTopic();
|
||||
}
|
||||
|
||||
/** */
|
||||
isCollapsed() {
|
||||
isCollapsed(): boolean {
|
||||
let result = false;
|
||||
|
||||
let current = this.getParent();
|
||||
@ -714,42 +693,27 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
setChildrenShrunken(value) {
|
||||
setChildrenShrunken(value: boolean) {
|
||||
// Update Model ...
|
||||
const model = this.getModel();
|
||||
model.setChildrenShrunken(value);
|
||||
|
||||
// Change render base on the state.
|
||||
const shrinkConnector = this.getShrinkConnector();
|
||||
if ($defined(shrinkConnector)) {
|
||||
if (shrinkConnector) {
|
||||
shrinkConnector.changeRender(value);
|
||||
}
|
||||
|
||||
// Do some fancy animation ....
|
||||
const elements = this._flatten2DElements(this);
|
||||
const fade = new FadeEffect(elements, !value);
|
||||
const me = this;
|
||||
fade.addEvent('complete', () => {
|
||||
// Set focus on the parent node ...
|
||||
if (value) {
|
||||
me.setOnFocus(true);
|
||||
}
|
||||
|
||||
// Set focus in false for all the children ...
|
||||
elements.forEach((elem) => {
|
||||
if (elem.setOnFocus) {
|
||||
elem.setOnFocus(false);
|
||||
}
|
||||
});
|
||||
elements.forEach((elem) => {
|
||||
elem.setVisibility(!value, 250);
|
||||
});
|
||||
fade.start();
|
||||
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model);
|
||||
EventBus.instance.fireEvent('childShrinked', model);
|
||||
}
|
||||
|
||||
/** */
|
||||
getShrinkConnector(): ShirinkConnector {
|
||||
getShrinkConnector(): ShirinkConnector | undefined {
|
||||
let result = this._connector;
|
||||
if (this._connector == null) {
|
||||
this._connector = new ShirinkConnector(this);
|
||||
@ -928,7 +892,6 @@ abstract class Topic extends NodeGraph {
|
||||
this._relationships.forEach((r) => r.redraw());
|
||||
}
|
||||
|
||||
/** */
|
||||
setBranchVisibility(value: boolean): void {
|
||||
let current: Topic = this;
|
||||
let parent: Topic = this;
|
||||
@ -939,20 +902,19 @@ abstract class Topic extends NodeGraph {
|
||||
current.setVisibility(value);
|
||||
}
|
||||
|
||||
/** */
|
||||
setVisibility(value: boolean): void {
|
||||
this._setTopicVisibility(value);
|
||||
setVisibility(value: boolean, fade = 0): void {
|
||||
this._setTopicVisibility(value, fade);
|
||||
|
||||
// Hide all children...
|
||||
this._setChildrenVisibility(value);
|
||||
this._setChildrenVisibility(value, fade);
|
||||
|
||||
// If there there are connection to the node, topic must be hidden.
|
||||
this._setRelationshipLinesVisibility(value);
|
||||
this._setRelationshipLinesVisibility(value, fade);
|
||||
|
||||
// If it's connected, the connection must be rendered.
|
||||
const outgoingLine = this.getOutgoingLine();
|
||||
if (outgoingLine) {
|
||||
outgoingLine.setVisibility(value);
|
||||
outgoingLine.setVisibility(value, fade);
|
||||
}
|
||||
}
|
||||
|
||||
@ -986,7 +948,7 @@ abstract class Topic extends NodeGraph {
|
||||
return elem.isVisible();
|
||||
}
|
||||
|
||||
private _setRelationshipLinesVisibility(value: boolean): void {
|
||||
private _setRelationshipLinesVisibility(value: boolean, fade = 0): void {
|
||||
this._relationships.forEach((relationship) => {
|
||||
const sourceTopic = relationship.getSourceTopic();
|
||||
const targetTopic = relationship.getTargetTopic();
|
||||
@ -997,27 +959,28 @@ abstract class Topic extends NodeGraph {
|
||||
value
|
||||
&& (targetParent == null || !targetParent.areChildrenShrunken())
|
||||
&& (sourceParent == null || !sourceParent.areChildrenShrunken()),
|
||||
fade,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
private _setTopicVisibility(value: boolean) {
|
||||
private _setTopicVisibility(value: boolean, fade = 0) {
|
||||
const elem = this.get2DElement();
|
||||
elem.setVisibility(value);
|
||||
elem.setVisibility(value, fade);
|
||||
|
||||
if (this.getIncomingLines().length > 0) {
|
||||
const connector = this.getShrinkConnector();
|
||||
if ($defined(connector)) {
|
||||
connector.setVisibility(value);
|
||||
connector.setVisibility(value, fade);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide inner shape ...
|
||||
this.getInnerShape().setVisibility(value);
|
||||
this.getInnerShape().setVisibility(value, fade);
|
||||
|
||||
// Hide text shape ...
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false);
|
||||
textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false, fade);
|
||||
}
|
||||
|
||||
/** */
|
||||
@ -1033,14 +996,14 @@ abstract class Topic extends NodeGraph {
|
||||
textShape.setOpacity(opacity);
|
||||
}
|
||||
|
||||
private _setChildrenVisibility(isVisible: boolean) {
|
||||
private _setChildrenVisibility(value: boolean, fade = 0) {
|
||||
// Hide all children.
|
||||
const children = this.getChildren();
|
||||
const model = this.getModel();
|
||||
|
||||
const visibility = isVisible ? !model.areChildrenShrunken() : isVisible;
|
||||
const visibility = value ? !model.areChildrenShrunken() : value;
|
||||
children.forEach((child) => {
|
||||
child.setVisibility(visibility);
|
||||
child.setVisibility(visibility, fade);
|
||||
const outgoingLine = child.getOutgoingLine();
|
||||
outgoingLine.setVisibility(visibility);
|
||||
});
|
||||
@ -1081,7 +1044,7 @@ abstract class Topic extends NodeGraph {
|
||||
this._updatePositionOnChangeSize(oldSize, roundedSize);
|
||||
|
||||
if (hasSizeChanged) {
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeResizeEvent, {
|
||||
EventBus.instance.fireEvent('topicResize', {
|
||||
node: this.getModel(),
|
||||
size: roundedSize,
|
||||
});
|
||||
@ -1112,7 +1075,7 @@ abstract class Topic extends NodeGraph {
|
||||
outgoingLine.removeFromWorkspace(workspace);
|
||||
|
||||
// Remove from workspace.
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeDisconnectEvent, this.getModel());
|
||||
EventBus.instance.fireEvent('topicDisconect', this.getModel());
|
||||
|
||||
// Change text based on the current connection ...
|
||||
const model = this.getModel();
|
||||
@ -1195,7 +1158,7 @@ abstract class Topic extends NodeGraph {
|
||||
|
||||
// Fire connection event ...
|
||||
if (this.isInWorkspace()) {
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, {
|
||||
EventBus.instance.fireEvent('topicConnected', {
|
||||
parentNode: targetTopic.getModel(),
|
||||
childNode: this.getModel(),
|
||||
});
|
||||
@ -1233,7 +1196,7 @@ abstract class Topic extends NodeGraph {
|
||||
workspace.removeChild(line);
|
||||
}
|
||||
this._isInWorkspace = false;
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel());
|
||||
EventBus.instance.fireEvent('topicRemoved', this.getModel());
|
||||
}
|
||||
|
||||
addToWorkspace(workspace: Workspace) {
|
||||
@ -1241,11 +1204,11 @@ abstract class Topic extends NodeGraph {
|
||||
workspace.append(elem);
|
||||
if (!this.isInWorkspace()) {
|
||||
if (!this.isCentralTopic()) {
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeAdded, this.getModel());
|
||||
EventBus.instance.fireEvent('topicAdded', this.getModel());
|
||||
}
|
||||
|
||||
if (this.getModel().isConnected()) {
|
||||
EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, {
|
||||
EventBus.instance.fireEvent('topicConnected', {
|
||||
parentNode: this.getOutgoingConnectedTopic().getModel(),
|
||||
childNode: this.getModel(),
|
||||
});
|
||||
@ -1315,7 +1278,7 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
}
|
||||
|
||||
private _flatten2DElements(topic: Topic) {
|
||||
private _flatten2DElements(topic: Topic): (Topic | Relationship)[] {
|
||||
let result = [];
|
||||
|
||||
const children = topic.getChildren();
|
||||
|
||||
27
packages/mindplot/src/components/TopicFactory.ts
Normal file
27
packages/mindplot/src/components/TopicFactory.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
|
||||
import CentralTopic from './CentralTopic';
|
||||
import MainTopic from './MainTopic';
|
||||
import NodeModel from './model/NodeModel';
|
||||
import Topic from './Topic';
|
||||
|
||||
class TopicFactory {
|
||||
static create(nodeModel: NodeModel, options: object): Topic {
|
||||
$assert(nodeModel, 'Model can not be null');
|
||||
|
||||
const type = nodeModel.getType();
|
||||
$assert(type, 'Node model type can not be null');
|
||||
|
||||
let result: Topic;
|
||||
if (type === 'CentralTopic') {
|
||||
result = new CentralTopic(nodeModel, options);
|
||||
} else if (type === 'MainTopic') {
|
||||
result = new MainTopic(nodeModel, options);
|
||||
} else {
|
||||
$assert(false, `unsupported node type:${type}`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export default TopicFactory;
|
||||
@ -40,14 +40,6 @@ const TopicFeatureFactory = {
|
||||
icon: NoteIcon,
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {mindplot.Topic} topic
|
||||
* @param {mindplot.model.FeatureModel} model
|
||||
* @param {Boolean} readOnly true if the editor is running in read-only mode
|
||||
* @throws will throw an error if topic is null or undefined
|
||||
* @throws will throw an error if model is null or undefined
|
||||
* @return {mindplot.Icon} a new instance of the icon subclass matching the topic feature
|
||||
*/
|
||||
createIcon(topic, model, readOnly) {
|
||||
$assert(topic, 'topic can not be null');
|
||||
$assert(model, 'model can not be null');
|
||||
|
||||
@ -52,9 +52,6 @@ class AddFeatureToTopicCommand extends Command {
|
||||
this._featureModel = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
execute(commandContext: CommandContext) {
|
||||
const topic = commandContext.findTopics([this._topicId])[0];
|
||||
|
||||
@ -66,10 +63,6 @@ class AddFeatureToTopicCommand extends Command {
|
||||
topic.addFeature(this._featureModel);
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
* @see {@link mindplot.Command.undoExecute}
|
||||
*/
|
||||
undoExecute(commandContext: CommandContext) {
|
||||
const topic = commandContext.findTopics([this._topicId])[0];
|
||||
topic.removeFeature(this._featureModel);
|
||||
|
||||
@ -25,7 +25,7 @@ type CommandTypes = string | object | boolean | number;
|
||||
class GenericFunctionCommand extends Command {
|
||||
private _value: CommandTypes;
|
||||
|
||||
private _topicsId: number[];
|
||||
private _topicsIds: number[];
|
||||
|
||||
private _commandFunc: (topic: Topic, value: CommandTypes) => CommandTypes;
|
||||
|
||||
@ -39,7 +39,7 @@ class GenericFunctionCommand extends Command {
|
||||
|
||||
super();
|
||||
this._value = value;
|
||||
this._topicsId = topicsIds;
|
||||
this._topicsIds = topicsIds;
|
||||
this._commandFunc = commandFunc;
|
||||
this._oldValues = [];
|
||||
}
|
||||
@ -49,7 +49,7 @@ class GenericFunctionCommand extends Command {
|
||||
*/
|
||||
execute(commandContext: CommandContext) {
|
||||
if (!this._applied) {
|
||||
const topics = commandContext.findTopics(this._topicsId);
|
||||
const topics = commandContext.findTopics(this._topicsIds);
|
||||
|
||||
if (topics != null) {
|
||||
const me = this;
|
||||
@ -66,7 +66,7 @@ class GenericFunctionCommand extends Command {
|
||||
|
||||
undoExecute(commandContext: CommandContext): void {
|
||||
if (this._applied) {
|
||||
const topics = commandContext.findTopics(this._topicsId);
|
||||
const topics = commandContext.findTopics(this._topicsIds);
|
||||
|
||||
topics.forEach(((topic: Topic, index: number) => {
|
||||
this._commandFunc(topic, this._oldValues[index]);
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable class-methods-use-this */
|
||||
/*
|
||||
/**
|
||||
* Copyright [2021] [wisemapping]
|
||||
*
|
||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
||||
@ -17,22 +15,26 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import RootedTreeSet from './RootedTreeSet';
|
||||
import Node from './Node';
|
||||
import PositionType from '../PositionType';
|
||||
|
||||
abstract class ChildrenSorterStrategy {
|
||||
abstract computeChildrenIdByHeights(treeSet, node);
|
||||
abstract computeChildrenIdByHeights(treeSet: RootedTreeSet, node: Node);
|
||||
|
||||
abstract computeOffsets(treeSet, node);
|
||||
abstract computeOffsets(treeSet: RootedTreeSet, node: Node);
|
||||
|
||||
abstract insert(treeSet, parent, child, order);
|
||||
abstract insert(treeSet: RootedTreeSet, parent: Node, child: Node, order: number);
|
||||
|
||||
abstract detach(treeSet, node);
|
||||
abstract detach(treeSet: RootedTreeSet, node: Node);
|
||||
|
||||
abstract predict(treeSet, parent, node, position, free);
|
||||
abstract predict(treeSet: RootedTreeSet, parent, node: Node, position: PositionType);
|
||||
|
||||
abstract verify(treeSet, node);
|
||||
abstract verify(treeSet: RootedTreeSet, node: Node);
|
||||
|
||||
abstract getChildDirection(treeSet, node);
|
||||
abstract getChildDirection(treeSet: RootedTreeSet, node: Node);
|
||||
|
||||
abstract toString();
|
||||
abstract toString(): string;
|
||||
}
|
||||
|
||||
export default ChildrenSorterStrategy;
|
||||
|
||||
@ -17,25 +17,22 @@
|
||||
*/
|
||||
import Events from '../Events';
|
||||
|
||||
export type EventType = 'topicResize' | 'topicMoved' | 'childShrinked' | 'topicConnected' | 'topicAdded' | 'topicRemoved' | 'forceLayout' | 'topicDisconect';
|
||||
class EventBus extends Events {
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
static _instance: EventBus = new EventBus();
|
||||
|
||||
static get instance(): EventBus {
|
||||
return this._instance;
|
||||
}
|
||||
|
||||
fireEvent(type: EventType, eventArgs?: unknown[] | unknown): Events {
|
||||
return super.fireEvent(type, eventArgs);
|
||||
}
|
||||
|
||||
addEvent(type: EventType, fn?, internal?: boolean): Events {
|
||||
return super.addEvent(type, fn, internal);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enum for events
|
||||
* @enum {String}
|
||||
*/
|
||||
EventBus.events = {
|
||||
NodeResizeEvent: 'NodeResizeEvent',
|
||||
NodeMoveEvent: 'NodeMoveEvent',
|
||||
NodeShrinkEvent: 'NodeShrinkEvent',
|
||||
NodeConnectEvent: 'NodeConnectEvent',
|
||||
NodeDisconnectEvent: 'NodeDisconnectEvent',
|
||||
NodeAdded: 'NodeAdded',
|
||||
NodeRemoved: 'NodeRemoved',
|
||||
DoLayout: 'DoLayout',
|
||||
};
|
||||
|
||||
/** instance */
|
||||
EventBus.instance = new EventBus();
|
||||
|
||||
export default EventBus;
|
||||
@ -15,59 +15,57 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import PositionType from '../PositionType';
|
||||
import SizeType from '../SizeType';
|
||||
import Topic from '../Topic';
|
||||
import EventBus from './EventBus';
|
||||
import LayoutManager from './LayoutManager';
|
||||
|
||||
class EventBusDispatcher {
|
||||
private _layoutManager: LayoutManager;
|
||||
|
||||
constructor() {
|
||||
this.registerBusEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {mindplot.layout.LayoutManager} layoutManager
|
||||
*/
|
||||
setLayoutManager(layoutManager) {
|
||||
setLayoutManager(layoutManager: LayoutManager) {
|
||||
this._layoutManager = layoutManager;
|
||||
}
|
||||
|
||||
/**
|
||||
* register bus events
|
||||
*/
|
||||
registerBusEvents() {
|
||||
EventBus.instance.addEvent(EventBus.events.NodeAdded, this._nodeAdded.bind(this));
|
||||
EventBus.instance.addEvent(EventBus.events.NodeRemoved, this._nodeRemoved.bind(this));
|
||||
EventBus.instance.addEvent(EventBus.events.NodeResizeEvent, this._nodeResizeEvent.bind(this));
|
||||
EventBus.instance.addEvent(EventBus.events.NodeMoveEvent, this._nodeMoveEvent.bind(this));
|
||||
EventBus.instance.addEvent(
|
||||
EventBus.events.NodeDisconnectEvent, this._nodeDisconnectEvent.bind(this),
|
||||
);
|
||||
EventBus.instance.addEvent(EventBus.events.NodeConnectEvent, this._nodeConnectEvent.bind(this));
|
||||
EventBus.instance.addEvent(EventBus.events.NodeShrinkEvent, this._nodeShrinkEvent.bind(this));
|
||||
EventBus.instance.addEvent(EventBus.events.DoLayout, this._doLayout.bind(this));
|
||||
EventBus.instance.addEvent('topicAdded', this._topicAdded.bind(this));
|
||||
EventBus.instance.addEvent('topicRemoved', this._topicRemoved.bind(this));
|
||||
EventBus.instance.addEvent('topicResize', this._topicResizeEvent.bind(this));
|
||||
EventBus.instance.addEvent('topicMoved', this._topicMoved.bind(this));
|
||||
EventBus.instance.addEvent('topicDisconect', this._topicDisconect.bind(this));
|
||||
EventBus.instance.addEvent('topicConnected', this._topicConnected.bind(this));
|
||||
EventBus.instance.addEvent('childShrinked', this._childShrinked.bind(this));
|
||||
EventBus.instance.addEvent('forceLayout', this._forceLayout.bind(this));
|
||||
}
|
||||
|
||||
_nodeResizeEvent(args) {
|
||||
private _topicResizeEvent(args: { node: Topic, size: SizeType }) {
|
||||
this._layoutManager.updateNodeSize(args.node.getId(), args.size);
|
||||
}
|
||||
|
||||
_nodeMoveEvent(args) {
|
||||
private _topicMoved(args: { node: Topic, position: PositionType }) {
|
||||
this._layoutManager.moveNode(args.node.getId(), args.position);
|
||||
}
|
||||
|
||||
_nodeDisconnectEvent(node) {
|
||||
private _topicDisconect(node: Topic) {
|
||||
this._layoutManager.disconnectNode(node.getId());
|
||||
}
|
||||
|
||||
_nodeConnectEvent(args) {
|
||||
private _topicConnected(args: { parentNode: Topic, childNode: Topic }) {
|
||||
this._layoutManager.connectNode(
|
||||
args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder(),
|
||||
);
|
||||
}
|
||||
|
||||
_nodeShrinkEvent(node) {
|
||||
private _childShrinked(node: Topic) {
|
||||
this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
|
||||
}
|
||||
|
||||
_nodeAdded(node) {
|
||||
private _topicAdded(node: Topic) {
|
||||
// Central topic must not be added twice ...
|
||||
if (node.getId() !== 0) {
|
||||
this._layoutManager.addNode(node.getId(), { width: 10, height: 10 }, node.getPosition());
|
||||
@ -75,21 +73,14 @@ class EventBusDispatcher {
|
||||
}
|
||||
}
|
||||
|
||||
_nodeRemoved(node) {
|
||||
private _topicRemoved(node: Topic) {
|
||||
this._layoutManager.removeNode(node.getId());
|
||||
}
|
||||
|
||||
_doLayout() {
|
||||
// (function() {
|
||||
private _forceLayout() {
|
||||
this._layoutManager.layout(true);
|
||||
// console.log("---------");
|
||||
// this._layoutManager.dump();
|
||||
// console.log("---------");
|
||||
// console.log("---------");
|
||||
// }).delay(0, this);
|
||||
}
|
||||
|
||||
/** @return layout manager */
|
||||
getLayoutManager() {
|
||||
return this._layoutManager;
|
||||
}
|
||||
@ -15,15 +15,23 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import $ from 'jquery';
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import Events from '../Events';
|
||||
import RootedTreeSet from './RootedTreeSet';
|
||||
import OriginalLayout from './OriginalLayout';
|
||||
import ChangeEvent from './ChangeEvent';
|
||||
import SizeType from '../SizeType';
|
||||
import Node from './Node';
|
||||
import PositionType from '../PositionType';
|
||||
|
||||
class LayoutManager extends Events {
|
||||
constructor(rootNodeId, rootSize) {
|
||||
private _treeSet: RootedTreeSet;
|
||||
|
||||
private _layout: OriginalLayout;
|
||||
|
||||
private _events: ChangeEvent[];
|
||||
|
||||
constructor(rootNodeId: number, rootSize: SizeType) {
|
||||
super();
|
||||
$assert($defined(rootNodeId), 'rootNodeId can not be null');
|
||||
$assert(rootSize, 'rootSize can not be null');
|
||||
@ -36,40 +44,22 @@ class LayoutManager extends Events {
|
||||
this._events = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id
|
||||
* @param size
|
||||
* @throws will throw an error if id is null or undefined
|
||||
*/
|
||||
updateNodeSize(id, size) {
|
||||
updateNodeSize(id: number, size: SizeType): void {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
|
||||
const node = this._treeSet.find(id);
|
||||
node.setSize(size);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id
|
||||
* @param value
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @throws will throw an error if value is null or undefined
|
||||
* @return this
|
||||
*/
|
||||
updateShrinkState(id, value) {
|
||||
updateShrinkState(id: number, value: boolean): void {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
$assert($defined(value), 'value can not be null');
|
||||
|
||||
const node = this._treeSet.find(id);
|
||||
node.setShrunken(value);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id
|
||||
* @return {@link RootedTreeSet}.find(id)
|
||||
*/
|
||||
find(id) {
|
||||
find(id: number): Node {
|
||||
return this._treeSet.find(id);
|
||||
}
|
||||
|
||||
@ -81,31 +71,17 @@ class LayoutManager extends Events {
|
||||
* @throws will throw an error if the position's x property is null or undefined
|
||||
* @throws will throw an error if the position's y property is null or undefined
|
||||
*/
|
||||
moveNode(id, position) {
|
||||
moveNode(id: number, position: PositionType) {
|
||||
$assert($defined(id), 'id cannot be null');
|
||||
$assert($defined(position), 'position cannot be null');
|
||||
$assert($defined(position.x), 'x can not be null');
|
||||
$assert($defined(position.y), 'y can not be null');
|
||||
|
||||
const node = this._treeSet.find(id);
|
||||
// @Todo: this should not be here. This is broking the isolated node support...
|
||||
// node.setFree(true);
|
||||
// node.setFreeDisplacement(
|
||||
// {x:position.x - node.getPosition().x, y:position.y - node.getPosition().y}
|
||||
// );
|
||||
node.setPosition(position);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param parentId
|
||||
* @param childId
|
||||
* @param order
|
||||
* @throws will throw an error if parentId is null or undefined
|
||||
* @throws will throw an error if childId is null or undefined
|
||||
* @throws will throw an error if order is null or undefined
|
||||
* @return this
|
||||
*/
|
||||
connectNode(parentId, childId, order) {
|
||||
connectNode(parentId: number, childId: number, order: number) {
|
||||
$assert($defined(parentId), 'parentId cannot be null');
|
||||
$assert($defined(childId), 'childId cannot be null');
|
||||
$assert($defined(order), 'order cannot be null');
|
||||
@ -115,16 +91,9 @@ class LayoutManager extends Events {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @return this
|
||||
*/
|
||||
disconnectNode(id) {
|
||||
disconnectNode(id: number): void {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
this._layout.disconnectNode(id);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -134,7 +103,7 @@ class LayoutManager extends Events {
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @return this
|
||||
*/
|
||||
addNode(id, size, position) {
|
||||
addNode(id: number, size: SizeType, position: PositionType) {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
const result = this._layout.createNode(id, size, position, 'topic');
|
||||
this._treeSet.add(result);
|
||||
@ -142,13 +111,7 @@ class LayoutManager extends Events {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* removes a node and its connection to parent if existing
|
||||
* @param id
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @return this
|
||||
*/
|
||||
removeNode(id) {
|
||||
removeNode(id: number) {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
const node = this._treeSet.find(id);
|
||||
|
||||
@ -163,47 +126,31 @@ class LayoutManager extends Events {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Number} parentId
|
||||
* @param {Number=} nodeId
|
||||
* @param {String=} position the position to use as mindplot.layout.Node.properties position
|
||||
* property as '(x,y)'
|
||||
* @param {Boolean=} free true specifies free node positioning
|
||||
* @throws will throw an error if parentId is null or undefined
|
||||
*/
|
||||
predict(parentId, nodeId, position, free) {
|
||||
predict(parentId: number, nodeId: number, position: PositionType): { order: number, position: PositionType } {
|
||||
$assert($defined(parentId), 'parentId can not be null');
|
||||
|
||||
const parent = this._treeSet.find(parentId);
|
||||
const node = nodeId ? this._treeSet.find(nodeId) : null;
|
||||
const sorter = parent.getSorter();
|
||||
|
||||
const result = sorter.predict(this._treeSet, parent, node, position, free);
|
||||
const result = sorter.predict(this._treeSet, parent, node, position);
|
||||
return { order: result[0], position: result[1] };
|
||||
}
|
||||
|
||||
/**
|
||||
* logs dump to console
|
||||
*/
|
||||
dump() {
|
||||
console.log(this._treeSet.dump());
|
||||
}
|
||||
|
||||
/**
|
||||
* @param containerId
|
||||
* @param {width:Number, height:Number} size
|
||||
* @throws will throw an error if containerId is null or undefined
|
||||
* @return canvas
|
||||
*/
|
||||
plot(containerId, size = { width: 200, height: 200 }) {
|
||||
plot(containerId: string, size = { width: 200, height: 200 }) {
|
||||
// this method is only used from tests that include Raphael
|
||||
if (!global.Raphael) {
|
||||
|
||||
if (!globalThis.Raphael) {
|
||||
console.warn('Raphael.js not found, exiting plot()');
|
||||
return null;
|
||||
}
|
||||
$assert(containerId, 'containerId cannot be null');
|
||||
const squaresize = 10;
|
||||
const canvas = global.Raphael(containerId, size.width, size.height);
|
||||
const canvas = globalThis.Raphael(containerId, size.width, size.height);
|
||||
canvas.drawGrid(
|
||||
0,
|
||||
0,
|
||||
@ -217,40 +164,33 @@ class LayoutManager extends Events {
|
||||
return canvas;
|
||||
}
|
||||
|
||||
/**
|
||||
* initializes the layout to be updated
|
||||
* @param fireEvents
|
||||
* @return this
|
||||
*/
|
||||
layout(fireEvents) {
|
||||
layout(flush: boolean): LayoutManager {
|
||||
// File repositioning ...
|
||||
this._layout.layout();
|
||||
|
||||
// Collect changes ...
|
||||
this._collectChanges();
|
||||
this._collectChanges(this._treeSet.getTreeRoots());
|
||||
|
||||
if ($(fireEvents).length > 0 || fireEvents) {
|
||||
if (flush) {
|
||||
this._flushEvents();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
_flushEvents() {
|
||||
private _flushEvents() {
|
||||
this._events.forEach(((event) => {
|
||||
this.fireEvent('change', event);
|
||||
}));
|
||||
this._events = [];
|
||||
}
|
||||
|
||||
_collectChanges(nodes) {
|
||||
const nodesToCollect = nodes || this._treeSet.getTreeRoots();
|
||||
|
||||
nodesToCollect.forEach(((node) => {
|
||||
private _collectChanges(nodes: Node[]) {
|
||||
nodes.forEach(((node) => {
|
||||
if (node.hasOrderChanged() || node.hasPositionChanged()) {
|
||||
// Find or create a event ...
|
||||
const id = node.getId();
|
||||
let event = this._events.some((e) => e.id === id);
|
||||
let event: ChangeEvent = this._events.find((e) => e.getId() === id);
|
||||
if (!event) {
|
||||
event = new ChangeEvent(id);
|
||||
}
|
||||
@ -28,31 +28,20 @@ class RootedTreeSet {
|
||||
this._rootNodes = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param root
|
||||
* @throws will throw an error if root is null or undefined
|
||||
*/
|
||||
setRoot(root: Node) {
|
||||
$assert(root, 'root can not be null');
|
||||
this._rootNodes.push(this._decodate(root));
|
||||
}
|
||||
|
||||
/** getter */
|
||||
getTreeRoots() {
|
||||
getTreeRoots(): Node[] {
|
||||
return this._rootNodes;
|
||||
}
|
||||
|
||||
_decodate(node: Node) {
|
||||
_decodate(node: Node): Node {
|
||||
node._children = [];
|
||||
return node;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {mindplot.model.NodeModel} node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @throws will throw an error if node with id already exists
|
||||
* @throws will throw an error if node has been added already
|
||||
*/
|
||||
add(node: Node) {
|
||||
$assert(node, 'node can not be null');
|
||||
if (this.find(node.getId(), false)) {
|
||||
|
||||
@ -59,6 +59,8 @@ class BootstrapDialog extends Options {
|
||||
$(this).remove();
|
||||
});
|
||||
this._native.on('shown.bs.modal', this.onDialogShown);
|
||||
|
||||
this._native.appendTo('#mindplot-tooltips');
|
||||
}
|
||||
|
||||
_buildFooter() {
|
||||
|
||||
@ -19,7 +19,7 @@ import { $assert } from '@wisemapping/core-js';
|
||||
import FeatureType from './FeatureType';
|
||||
|
||||
class FeatureModel {
|
||||
static _next_id = 0;
|
||||
static _nextId = 0;
|
||||
|
||||
private _id: number;
|
||||
|
||||
@ -85,8 +85,8 @@ class FeatureModel {
|
||||
}
|
||||
|
||||
static _nextUUID(): number {
|
||||
const result = FeatureModel._next_id + 1;
|
||||
FeatureModel._next_id = result;
|
||||
const result = FeatureModel._nextId + 1;
|
||||
FeatureModel._nextId = result;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ const parseJsObject = (str: string) => JSON.parse(str.replace(/(['"])?([a-z0-9A-
|
||||
abstract class INodeModel {
|
||||
static MAIN_TOPIC_TO_MAIN_TOPIC_DISTANCE = 220;
|
||||
|
||||
private static _next_uuid = 0;
|
||||
private static _nextUuid = 0;
|
||||
|
||||
protected _mindmap: Mindmap;
|
||||
|
||||
@ -49,9 +49,9 @@ abstract class INodeModel {
|
||||
const newId = INodeModel._nextUUID();
|
||||
this.putProperty('id', newId);
|
||||
} else {
|
||||
if (id > INodeModel._next_uuid) {
|
||||
if (id > INodeModel._nextUuid) {
|
||||
$assert(Number.isFinite(id));
|
||||
INodeModel._next_uuid = id;
|
||||
INodeModel._nextUuid = id;
|
||||
}
|
||||
this.putProperty('id', id);
|
||||
}
|
||||
@ -287,7 +287,7 @@ abstract class INodeModel {
|
||||
|
||||
abstract getPropertiesKeys(): string[];
|
||||
|
||||
abstract getProperty(key: string): number | string | boolean;
|
||||
abstract getProperty(key: string): number | string | boolean | undefined;
|
||||
|
||||
abstract putProperty(key: string, value: number | string | boolean): void;
|
||||
|
||||
@ -358,8 +358,8 @@ abstract class INodeModel {
|
||||
abstract removeChild(child: INodeModel);
|
||||
|
||||
static _nextUUID(): number {
|
||||
INodeModel._next_uuid += 1;
|
||||
return INodeModel._next_uuid;
|
||||
INodeModel._nextUuid += 1;
|
||||
return INodeModel._nextUuid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ import Point from '@wisemapping/web2d';
|
||||
import ConnectionLine from '../ConnectionLine';
|
||||
|
||||
class RelationshipModel {
|
||||
static _next_uuid = 0;
|
||||
static _nextUuid = 0;
|
||||
|
||||
private _id: number;
|
||||
|
||||
@ -133,8 +133,8 @@ class RelationshipModel {
|
||||
}
|
||||
|
||||
static _nextUUID() {
|
||||
RelationshipModel._next_uuid += 1;
|
||||
return RelationshipModel._next_uuid;
|
||||
RelationshipModel._nextUuid += 1;
|
||||
return RelationshipModel._nextUuid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import fadeEffect from './FadeEffect';
|
||||
import shape from './Shape';
|
||||
|
||||
export default {
|
||||
FadeEffect: fadeEffect,
|
||||
Shape: shape,
|
||||
};
|
||||
@ -27,7 +27,7 @@ const defaultOptions = {
|
||||
title: '',
|
||||
content: '',
|
||||
delay: 0,
|
||||
container: false,
|
||||
container: '#mindplot-tooltips',
|
||||
destroyOnExit: false,
|
||||
};
|
||||
|
||||
|
||||
@ -31,7 +31,6 @@ class LinkIconTooltip extends FloatingTip {
|
||||
},
|
||||
html: true,
|
||||
placement: 'bottom',
|
||||
container: 'body',
|
||||
title: $msg('LINK'),
|
||||
trigger: 'manual',
|
||||
template: '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
|
||||
|
||||
@ -39,170 +39,145 @@ class Menu extends IMenu {
|
||||
|
||||
// Create panels ...
|
||||
const designerModel = designer.getModel();
|
||||
|
||||
const fontFamilyBtn = $('#fontFamily');
|
||||
if (fontFamilyBtn) {
|
||||
const fontFamilyModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const fontFamily = nodes[i].getFontFamily();
|
||||
if (result != null && result !== fontFamily) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
result = fontFamily;
|
||||
const fontFamilyModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const fontFamily = nodes[i].getFontFamily();
|
||||
if (result != null && result !== fontFamily) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
result = fontFamily;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
setValue(value: string) {
|
||||
designer.changeFontFamily(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel));
|
||||
Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY'));
|
||||
}
|
||||
setValue(value: string) {
|
||||
designer.changeFontFamily(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel));
|
||||
Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY'));
|
||||
|
||||
const fontSizeBtn = $('#fontSize');
|
||||
if (fontSizeBtn) {
|
||||
const fontSizeModel = {
|
||||
getValue(): number {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
const fontSizeModel = {
|
||||
getValue(): number {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const fontSize = nodes[i].getFontSize();
|
||||
if (result != null && result !== fontSize) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
result = fontSize;
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const fontSize = nodes[i].getFontSize();
|
||||
if (result != null && result !== fontSize) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: number) {
|
||||
designer.changeFontSize(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
|
||||
Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
|
||||
}
|
||||
result = fontSize;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: number) {
|
||||
designer.changeFontSize(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
|
||||
Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
|
||||
|
||||
const topicShapeBtn = $('#topicShape');
|
||||
if (topicShapeBtn) {
|
||||
const topicShapeModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const shapeType = nodes[i].getShapeType();
|
||||
if (result != null && result !== shapeType) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
result = shapeType;
|
||||
const topicShapeModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const shapeType = nodes[i].getShapeType();
|
||||
if (result != null && result !== shapeType) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: string) {
|
||||
designer.changeTopicShape(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
|
||||
Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
|
||||
}
|
||||
result = shapeType;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: string) {
|
||||
designer.changeTopicShape(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
|
||||
Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
|
||||
|
||||
const topicIconBtn = $('#topicIcon');
|
||||
if (topicIconBtn) {
|
||||
// Create icon panel dialog ...
|
||||
const topicIconModel = {
|
||||
getValue() {
|
||||
return null;
|
||||
},
|
||||
setValue(value: string) {
|
||||
designer.addIconType(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel));
|
||||
Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON'));
|
||||
}
|
||||
// Create icon panel dialog ...
|
||||
const topicIconModel = {
|
||||
getValue() {
|
||||
return null;
|
||||
},
|
||||
setValue(value: string) {
|
||||
designer.addIconType(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel));
|
||||
Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON'));
|
||||
|
||||
// Topic color item ...
|
||||
const topicColorBtn = $('#topicColor');
|
||||
if (topicColorBtn) {
|
||||
const topicColorModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const color = nodes[i].getBackgroundColor();
|
||||
if (result != null && result !== color) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
result = color;
|
||||
const topicColorModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const color = nodes[i].getBackgroundColor();
|
||||
if (result != null && result !== color) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex: string) {
|
||||
designer.changeBackgroundColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
|
||||
Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
|
||||
}
|
||||
result = color;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex: string) {
|
||||
designer.changeBackgroundColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
|
||||
Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
|
||||
|
||||
// Border color item ...
|
||||
const topicBorderBtn = $('#topicBorder');
|
||||
if (topicBorderBtn) {
|
||||
const borderColorModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const color = nodes[i].getBorderColor();
|
||||
if (result != null && result !== color) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
result = color;
|
||||
const borderColorModel = {
|
||||
getValue() {
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const color = nodes[i].getBorderColor();
|
||||
if (result != null && result !== color) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex: string) {
|
||||
designer.changeBorderColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
|
||||
Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
|
||||
}
|
||||
result = color;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex: string) {
|
||||
designer.changeBorderColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
|
||||
Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
|
||||
|
||||
// Font color item ...
|
||||
const fontColorBtn = $('#fontColor');
|
||||
if (fontColorBtn) {
|
||||
const fontColorModel = {
|
||||
getValue() {
|
||||
let result = null;
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const color = nodes[i].getFontColor();
|
||||
if (result != null && result !== color) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
result = color;
|
||||
const fontColorModel = {
|
||||
getValue() {
|
||||
let result = null;
|
||||
const nodes = designerModel.filterSelectedTopics();
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const color = nodes[i].getFontColor();
|
||||
if (result != null && result !== color) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex) {
|
||||
designer.changeFontColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('fontColor', fontColorModel, baseUrl));
|
||||
Menu._registerTooltip('fontColor', $msg('FONT_COLOR'));
|
||||
}
|
||||
result = color;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex) {
|
||||
designer.changeFontColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('fontColor', fontColorModel, baseUrl));
|
||||
Menu._registerTooltip('fontColor', $msg('FONT_COLOR'));
|
||||
|
||||
Menu._registerTooltip('export', $msg('EXPORT'));
|
||||
|
||||
@ -315,14 +290,6 @@ class Menu extends IMenu {
|
||||
}
|
||||
}
|
||||
|
||||
const discardElem = $('#discard');
|
||||
if (discardElem.length !== 0) {
|
||||
this._addButton('discard', false, false, () => {
|
||||
this.discardChanges(designer);
|
||||
});
|
||||
Menu._registerTooltip('discard', $msg('DISCARD_CHANGES'));
|
||||
}
|
||||
|
||||
const shareElem = $('#shareIt');
|
||||
if (shareElem.length !== 0) {
|
||||
Menu._registerTooltip('shareIt', $msg('COLLABORATE'));
|
||||
@ -350,14 +317,12 @@ class Menu extends IMenu {
|
||||
}
|
||||
|
||||
const backTolist = $('#backToList');
|
||||
if (backTolist.length !== 0) {
|
||||
backTolist.bind('click', (event) => {
|
||||
event.stopPropagation();
|
||||
window.location.href = '/c/maps/';
|
||||
return false;
|
||||
});
|
||||
Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
|
||||
}
|
||||
backTolist.bind('click', (event) => {
|
||||
event.stopPropagation();
|
||||
window.location.href = '/c/maps/';
|
||||
return false;
|
||||
});
|
||||
Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
|
||||
|
||||
// Account dialog ...
|
||||
const accountSettings = $('#account');
|
||||
@ -367,9 +332,9 @@ class Menu extends IMenu {
|
||||
});
|
||||
this._toolbarElems.push(new AccountSettingsPanel('account'));
|
||||
Menu._registerTooltip('account', `${global.accountEmail}`);
|
||||
}
|
||||
|
||||
this._registerEvents(designer);
|
||||
this._registerEvents(designer);
|
||||
}
|
||||
}
|
||||
|
||||
private _registerEvents(designer: Designer) {
|
||||
|
||||
@ -161,12 +161,12 @@ class ElementClass {
|
||||
setStroke(width, style, color, opacity) {
|
||||
if (
|
||||
style != null
|
||||
&& style !== undefined
|
||||
&& style !== 'dash'
|
||||
&& style !== 'dot'
|
||||
&& style !== 'solid'
|
||||
&& style !== 'longdash'
|
||||
&& style !== 'dashdot'
|
||||
&& style !== undefined
|
||||
&& style !== 'dash'
|
||||
&& style !== 'dot'
|
||||
&& style !== 'solid'
|
||||
&& style !== 'longdash'
|
||||
&& style !== 'dashdot'
|
||||
) {
|
||||
throw new Error(`Unsupported stroke style: '${style}'`);
|
||||
}
|
||||
@ -255,8 +255,8 @@ class ElementClass {
|
||||
this.peer.setFill(null, opacity);
|
||||
}
|
||||
|
||||
setVisibility(isVisible) {
|
||||
this.peer.setVisibility(isVisible);
|
||||
setVisibility(value, fade) {
|
||||
this.peer.setVisibility(value, fade);
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
|
||||
@ -181,11 +181,14 @@ class ElementPeer {
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* style='visibility: visible'
|
||||
*/
|
||||
setVisibility(isVisible) {
|
||||
this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden');
|
||||
setVisibility(value, fade) {
|
||||
this._native.setAttribute('visibility', value ? 'visible' : 'hidden');
|
||||
this._native.style.opacity = value ? 1 : 0;
|
||||
if (fade) {
|
||||
this._native.style.transition = `visibility ${fade}ms, opacity ${fade}ms`;
|
||||
} else {
|
||||
this._native.style.transition = null;
|
||||
}
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Visibility.
|
||||
Visibility with CSS Transition
|
||||
</td>
|
||||
<td>
|
||||
<div id="visibility"></div>
|
||||
|
||||
@ -225,15 +225,14 @@ const visibilityTest = () => {
|
||||
rect.setPosition(120, 20);
|
||||
workspace.append(rect);
|
||||
rect.addEvent('mouseover', () => {
|
||||
alert('Mouse Over');
|
||||
rect.setVisibility(false, 500);
|
||||
});
|
||||
|
||||
let isVisible = true;
|
||||
const executer = function () {
|
||||
isVisible = !isVisible;
|
||||
rect.setVisibility(isVisible);
|
||||
};
|
||||
// executer.periodical(100);
|
||||
rect.addEvent('mouseout', () => {
|
||||
rect.setVisibility(true, 500);
|
||||
});
|
||||
|
||||
// executer.periodical(100);
|
||||
workspace.addItAsChildTo($('#visibility'));
|
||||
};
|
||||
visibilityTest();
|
||||
|
||||
@ -81,7 +81,7 @@ const App = (): ReactElement => {
|
||||
component={withSessionExpirationHandling(MapsPage)}
|
||||
/>
|
||||
<Route exact path="/c/maps/:id/edit">
|
||||
<EnhacedEditorPage isTryMode={false} />
|
||||
<EnhacedEditorPage isTryMode={false}/>
|
||||
</Route>
|
||||
<Route exact path="/c/maps/:id/try">
|
||||
<EnhacedEditorPage isTryMode={true} />
|
||||
|
||||
@ -611,12 +611,12 @@ export default class RestClient implements Client {
|
||||
}
|
||||
}
|
||||
|
||||
buildPersistenceManager(editorMode: EditorRenderMode ): PersistenceManager {
|
||||
buildPersistenceManager(editorMode: EditorRenderMode): PersistenceManager {
|
||||
if (this.persistenceManager) {
|
||||
return this.persistenceManager;
|
||||
}
|
||||
let persistence: PersistenceManager;
|
||||
if (editorMode === 'edition') {
|
||||
if (editorMode === 'edition-owner' || editorMode === 'edition-editor') {
|
||||
persistence = new RESTPersistenceManager({
|
||||
documentUrl: '/c/restful/maps/{id}/document',
|
||||
revertUrl: '/c/restful/maps/{id}/history/latest',
|
||||
@ -645,13 +645,15 @@ export default class RestClient implements Client {
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private parseResponseOnError = (response: any): ErrorInfo => {
|
||||
console.error("Backend error=>");
|
||||
console.error(response.data);
|
||||
console.error(`Performing backend action error: ${JSON.stringify(response)}`);
|
||||
|
||||
let result: ErrorInfo | undefined;
|
||||
if (response) {
|
||||
const status: number = response.status;
|
||||
const data = response.data;
|
||||
console.error(`Status Code: ${status}`);
|
||||
console.error(`Status Data: ${response.data}`);
|
||||
console.error(`Status Message: ${response.message}`);
|
||||
|
||||
switch (status) {
|
||||
case 401:
|
||||
|
||||
@ -1,25 +1,16 @@
|
||||
import { EditorOptions } from '@wisemapping/editor';
|
||||
import { EditorRenderMode } from '@wisemapping/mindplot';
|
||||
import AppConfig from '../../classes/app-config';
|
||||
|
||||
export default class EditorOptionsBulder {
|
||||
static build(locale: string, hotkeys: boolean, isTryMode: boolean): { options: EditorOptions, mapId: number } {
|
||||
static build(locale: string, mode: EditorRenderMode, hotkeys: boolean): EditorOptions {
|
||||
|
||||
let options: EditorOptions = {
|
||||
enableKeyboardEvents: hotkeys,
|
||||
locale: locale,
|
||||
mode: mode,
|
||||
};
|
||||
|
||||
if (isTryMode) {
|
||||
// Sent to try mode ...
|
||||
options.mode = 'showcase';
|
||||
} else if (global.mindmapLocked) {
|
||||
// Map locked, open for view mode ...
|
||||
options.mode = 'viewonly';
|
||||
} else {
|
||||
options.mode = 'edition';
|
||||
}
|
||||
|
||||
let mapId: number;
|
||||
if (!AppConfig.isDevelopEnv()) {
|
||||
options = {
|
||||
zoom: (global.userOptions?.zoom != undefined
|
||||
@ -30,7 +21,6 @@ export default class EditorOptionsBulder {
|
||||
mapTitle: global.mapTitle,
|
||||
...options
|
||||
}
|
||||
mapId = global.mapId;
|
||||
} else {
|
||||
// Running in a development mode.
|
||||
console.log('Running editor in development mode');
|
||||
@ -40,8 +30,11 @@ export default class EditorOptionsBulder {
|
||||
mapTitle: "Develop Mindnap",
|
||||
...options
|
||||
}
|
||||
mapId = 666;
|
||||
}
|
||||
return { options, mapId };
|
||||
return options;
|
||||
}
|
||||
|
||||
static loadMapId(): number {
|
||||
return !AppConfig.isDevelopEnv() ? global.mapId : 555;
|
||||
}
|
||||
}
|
||||
@ -2,13 +2,14 @@ import React, { useEffect } from 'react';
|
||||
import ActionDispatcher from '../maps-page/action-dispatcher';
|
||||
import { ActionType } from '../maps-page/action-chooser';
|
||||
import Editor from '@wisemapping/editor';
|
||||
import { EditorRenderMode, PersistenceManager } from '@wisemapping/mindplot';
|
||||
|
||||
import AppI18n from '../../classes/app-i18n';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { hotkeysEnabled } from '../../redux/editorSlice';
|
||||
import ReactGA from 'react-ga';
|
||||
import Client from '../../classes/client';
|
||||
import { activeInstance, fetchAccount } from '../../redux/clientSlice';
|
||||
import { PersistenceManager } from '@wisemapping/mindplot';
|
||||
import { activeInstance, fetchAccount, fetchMapById } from '../../redux/clientSlice';
|
||||
import EditorOptionsBulder from './EditorOptionsBuider';
|
||||
|
||||
export type EditorPropsType = {
|
||||
@ -20,16 +21,43 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
|
||||
const hotkey = useSelector(hotkeysEnabled);
|
||||
const userLocale = AppI18n.getUserLocale();
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const { mapId, options } = EditorOptionsBulder.build(userLocale.code, hotkey, isTryMode);
|
||||
|
||||
useEffect(() => {
|
||||
ReactGA.pageview(window.location.pathname + window.location.search);
|
||||
}, []);
|
||||
|
||||
const findEditorMode = (isTryMode: boolean, mapId: number): EditorRenderMode | null => {
|
||||
let result: EditorRenderMode = null;
|
||||
if (isTryMode) {
|
||||
result = 'showcase';
|
||||
} else if (global.mindmapLocked) {
|
||||
result = 'viewonly';
|
||||
} else {
|
||||
const fetchResult = fetchMapById(mapId);
|
||||
if (!fetchResult.isLoading) {
|
||||
if (fetchResult.error) {
|
||||
throw new Error(`User coild not be loaded: ${JSON.stringify(fetchResult.error)}`);
|
||||
}
|
||||
result = fetchResult.map.role === 'owner' ? 'edition-owner' : 'edition-editor';
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// What is the role ?
|
||||
const mapId = EditorOptionsBulder.loadMapId();
|
||||
const mode = findEditorMode(isTryMode, mapId);
|
||||
|
||||
// Account settings can be null and editor cannot be initilized multiple times. This creates problems
|
||||
// at the i18n resource loading.
|
||||
const persistence = client.buildPersistenceManager(options.mode);
|
||||
const loadCompleted = persistence && (options.mode === 'showcase' || fetchAccount());
|
||||
const isAccountLoaded = mode === 'showcase' || fetchAccount;
|
||||
const loadCompleted = mode && isAccountLoaded;
|
||||
|
||||
let options, persistence: PersistenceManager;
|
||||
if (loadCompleted) {
|
||||
options = EditorOptionsBulder.build(userLocale.code, mode, hotkey);
|
||||
persistence = client.buildPersistenceManager(mode);
|
||||
}
|
||||
|
||||
return loadCompleted ? (
|
||||
<>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user