From 413f33c9b3b2d5d1ef418b65149b83617ddde14d Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 26 Feb 2022 16:43:25 -0800 Subject: [PATCH] Migration to TS --- .../mindplot/src/components/ActionIcon.js | 64 ------------------- packages/mindplot/src/components/Designer.ts | 6 +- ...ctionRunner.js => DesignerActionRunner.ts} | 23 +++++-- packages/mindplot/src/components/DragPivot.ts | 5 +- .../src/components/DragTopicConfig.js | 5 -- ...ditorProperties.js => EditorProperties.ts} | 9 +-- packages/mindplot/src/components/Icon.ts | 4 +- .../mindplot/src/components/NodeGraphUtils.js | 37 ----------- packages/mindplot/src/components/Topic.ts | 57 ++++++----------- .../mindplot/src/components/TopicFactory.ts | 27 ++++++++ .../mindplot/src/components/TopicFeature.js | 4 +- .../src/components/model/INodeModel.ts | 2 +- .../mindplot/src/components/util/index.js | 7 -- 13 files changed, 80 insertions(+), 170 deletions(-) delete mode 100644 packages/mindplot/src/components/ActionIcon.js rename packages/mindplot/src/components/{DesignerActionRunner.js => DesignerActionRunner.ts} (75%) delete mode 100644 packages/mindplot/src/components/DragTopicConfig.js rename packages/mindplot/src/components/{EditorProperties.js => EditorProperties.ts} (90%) delete mode 100644 packages/mindplot/src/components/NodeGraphUtils.js create mode 100644 packages/mindplot/src/components/TopicFactory.ts delete mode 100644 packages/mindplot/src/components/util/index.js diff --git a/packages/mindplot/src/components/ActionIcon.js b/packages/mindplot/src/components/ActionIcon.js deleted file mode 100644 index 6f303f3d..00000000 --- a/packages/mindplot/src/components/ActionIcon.js +++ /dev/null @@ -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; diff --git a/packages/mindplot/src/components/Designer.ts b/packages/mindplot/src/components/Designer.ts index 4c47beec..fef23da9 100644 --- a/packages/mindplot/src/components/Designer.ts +++ b/packages/mindplot/src/components/Designer.ts @@ -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'; @@ -225,9 +225,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 ... diff --git a/packages/mindplot/src/components/DesignerActionRunner.js b/packages/mindplot/src/components/DesignerActionRunner.ts similarity index 75% rename from packages/mindplot/src/components/DesignerActionRunner.js rename to packages/mindplot/src/components/DesignerActionRunner.ts index d679146f..cd578c30 100644 --- a/packages/mindplot/src/components/DesignerActionRunner.js +++ b/packages/mindplot/src/components/DesignerActionRunner.ts @@ -16,19 +16,28 @@ * 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); @@ -36,21 +45,21 @@ class DesignerActionRunner { EventBus.instance.fireEvent(EventBus.events.DoLayout); } - undo() { + undo(): void { this._undoManager.execUndo(this._context); this.fireChangeEvent(); EventBus.instance.fireEvent(EventBus.events.DoLayout); } - redo() { + redo(): void { this._undoManager.execRedo(this._context); this.fireChangeEvent(); EventBus.instance.fireEvent(EventBus.events.DoLayout); } - fireChangeEvent() { + fireChangeEvent(): void { const event = this._undoManager.buildEvent(); - this._notifier.fireEvent('modelUpdate', event); + this._actionDisplatcher.fireEvent('modelUpdate', event); } } diff --git a/packages/mindplot/src/components/DragPivot.ts b/packages/mindplot/src/components/DragPivot.ts index 15191854..deabd39f 100644 --- a/packages/mindplot/src/components/DragPivot.ts +++ b/packages/mindplot/src/components/DragPivot.ts @@ -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; diff --git a/packages/mindplot/src/components/DragTopicConfig.js b/packages/mindplot/src/components/DragTopicConfig.js deleted file mode 100644 index 6f2d6a03..00000000 --- a/packages/mindplot/src/components/DragTopicConfig.js +++ /dev/null @@ -1,5 +0,0 @@ -const PIVOT_SIZE = { width: 50, height: 6 }; - -export default { - PIVOT_SIZE, -}; diff --git a/packages/mindplot/src/components/EditorProperties.js b/packages/mindplot/src/components/EditorProperties.ts similarity index 90% rename from packages/mindplot/src/components/EditorProperties.js rename to packages/mindplot/src/components/EditorProperties.ts index 35a77fc0..31a47626 100644 --- a/packages/mindplot/src/components/EditorProperties.js +++ b/packages/mindplot/src/components/EditorProperties.ts @@ -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`; } } diff --git a/packages/mindplot/src/components/Icon.ts b/packages/mindplot/src/components/Icon.ts index b1b5a65d..7365a9cb 100644 --- a/packages/mindplot/src/components/Icon.ts +++ b/packages/mindplot/src/components/Icon.ts @@ -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) { diff --git a/packages/mindplot/src/components/NodeGraphUtils.js b/packages/mindplot/src/components/NodeGraphUtils.js deleted file mode 100644 index 9cb034d8..00000000 --- a/packages/mindplot/src/components/NodeGraphUtils.js +++ /dev/null @@ -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, -}; diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index e9cb8c5d..c31fd1bc 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/packages/mindplot/src/components/Topic.ts @@ -431,7 +431,6 @@ abstract class Topic extends NodeGraph { this.adjustShapes(); } - /** */ setFontSize(value: number, updateModel?: boolean) { const textShape = this.getTextShape(); textShape.setSize(value); @@ -443,8 +442,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 +452,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 +462,6 @@ abstract class Topic extends NodeGraph { this.adjustShapes(); } - /** */ getFontWeight() { const model = this.getModel(); let result = model.getFontWeight(); @@ -476,8 +472,7 @@ abstract class Topic extends NodeGraph { return result; } - /** */ - getFontFamily() { + getFontFamily(): string { const model = this.getModel(); let result = model.getFontFamily(); if (!$defined(result)) { @@ -487,8 +482,7 @@ abstract class Topic extends NodeGraph { return result; } - /** */ - getFontColor() { + getFontColor(): string { const model = this.getModel(); let result = model.getFontColor(); if (!$defined(result)) { @@ -498,8 +492,7 @@ abstract class Topic extends NodeGraph { return result; } - /** */ - getFontStyle() { + getFontStyle(): string { const model = this.getModel(); let result = model.getFontStyle(); if (!$defined(result)) { @@ -509,8 +502,7 @@ abstract class Topic extends NodeGraph { return result; } - /** */ - getFontSize() { + getFontSize(): number { const model = this.getModel(); let result = model.getFontSize(); if (!$defined(result)) { @@ -520,8 +512,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 +521,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 +531,6 @@ abstract class Topic extends NodeGraph { } } - /** */ setText(text: string) { // Avoid empty nodes ... if (!text || $.trim(text).length === 0) { @@ -552,7 +542,6 @@ abstract class Topic extends NodeGraph { this.adjustShapes(); } - /** */ getText(): string { const model = this.getModel(); let result = model.getText(); @@ -562,12 +551,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 +581,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 +600,7 @@ abstract class Topic extends NodeGraph { } } - /** */ - getBorderColor() { + getBorderColor(): string { const model = this.getModel(); let result = model.getBorderColor(); if (!$defined(result)) { @@ -622,7 +609,7 @@ abstract class Topic extends NodeGraph { return result; } - _buildTopicShape() { + _buildTopicShape(): ElementClass { const groupAttributes = { width: 100, height: 100, @@ -660,17 +647,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 +684,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,8 +700,7 @@ abstract class Topic extends NodeGraph { return result; } - /** */ - setChildrenShrunken(value) { + setChildrenShrunken(value: boolean) { // Update Model ... const model = this.getModel(); model.setChildrenShrunken(value); diff --git a/packages/mindplot/src/components/TopicFactory.ts b/packages/mindplot/src/components/TopicFactory.ts new file mode 100644 index 00000000..03a7199c --- /dev/null +++ b/packages/mindplot/src/components/TopicFactory.ts @@ -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; diff --git a/packages/mindplot/src/components/TopicFeature.js b/packages/mindplot/src/components/TopicFeature.js index 59161426..cf63f48b 100644 --- a/packages/mindplot/src/components/TopicFeature.js +++ b/packages/mindplot/src/components/TopicFeature.js @@ -45,8 +45,8 @@ const TopicFeatureFactory = { * @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 + * @throws will throw v an error if model is null or undefined + * @return {mindplot.n,nmn mn4 r be5qnwwddwsz5on} a new instance of the icon subclass matching the topic feature */ createIcon(topic, model, readOnly) { $assert(topic, 'topic can not be null'); diff --git a/packages/mindplot/src/components/model/INodeModel.ts b/packages/mindplot/src/components/model/INodeModel.ts index df7c2e0d..9cc60bab 100644 --- a/packages/mindplot/src/components/model/INodeModel.ts +++ b/packages/mindplot/src/components/model/INodeModel.ts @@ -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; diff --git a/packages/mindplot/src/components/util/index.js b/packages/mindplot/src/components/util/index.js deleted file mode 100644 index 0dedb597..00000000 --- a/packages/mindplot/src/components/util/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import fadeEffect from './FadeEffect'; -import shape from './Shape'; - -export default { - FadeEffect: fadeEffect, - Shape: shape, -};