Migration to TS

packages/mindplot/src/components/ActionIcon.js

@@ -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;

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 ...

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);
   }
 }
 

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;

packages/mindplot/src/components/DragTopicConfig.js

@@ -1,5 +0,0 @@
-const PIVOT_SIZE = { width: 50, height: 6 };
-
-export default {
-  PIVOT_SIZE,
-};

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`;
   }
 }

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) {

packages/mindplot/src/components/NodeGraphUtils.js

@@ -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,
-};

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);

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;

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');

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;
 

packages/mindplot/src/components/util/index.js

@@ -1,7 +0,0 @@
-import fadeEffect from './FadeEffect';
-import shape from './Shape';
-
-export default {
-  FadeEffect: fadeEffect,
-  Shape: shape,
-};