Add type for shape type.

packages/mindplot/src/components/ConnectionLine.ts

@@ -18,7 +18,6 @@
 
 import { $assert } from '@wisemapping/core-js';
 import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
-import { TopicShape } from './model/INodeModel';
 import RelationshipModel from './model/RelationshipModel';
 import Topic from './Topic';
 import TopicConfig from './TopicConfig';
@@ -133,9 +132,9 @@ class ConnectionLine {
     const targetPosition = targetTopic.getPosition();
     const offset = TopicConfig.CONNECTOR_WIDTH / 2;
     const targetTopicSize = targetTopic.getSize();
-    let y;
+    let y: number;
-    let x;
+    let x: number;
-    if (targetTopic.getShapeType() === TopicShape.LINE) {
+    if (targetTopic.getShapeType() === 'line') {
       y = targetTopicSize.height;
     } else {
       y = targetTopicSize.height / 2;

packages/mindplot/src/components/Designer.ts

@@ -46,7 +46,6 @@ import EventBusDispatcher from './layout/EventBusDispatcher';
 
 import LayoutManager from './layout/LayoutManager';
 
-import { TopicShape } from './model/INodeModel';
 import { $notify } from './widget/ToolbarNotifier';
 import RelationshipModel from './model/RelationshipModel';
 import Mindmap from './model/Mindmap';
@@ -836,7 +835,7 @@ class Designer extends Events {
 
   /** */
   changeBackgroundColor(color: string) {
-    const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE;
+    const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line';
     const validateError = 'Color can not be set to line topics.';
 
     const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
@@ -846,7 +845,7 @@ class Designer extends Events {
   }
 
   changeBorderColor(color: string) {
-    const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE;
+    const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line';
     const validateError = 'Color can not be set to line topics.';
     const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
     if (topicsIds.length > 0) {
@@ -863,7 +862,7 @@ class Designer extends Events {
 
   changeTopicShape(shape: string) {
     const validateFunc = (topic: Topic) =>
-      !(topic.getType() === 'CentralTopic' && shape === TopicShape.LINE);
+      !(topic.getType() === 'CentralTopic' && shape === 'line');
 
     const validateError = 'Central Topic shape can not be changed to line figure.';
     const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);

packages/mindplot/src/components/MainTopic.ts

@@ -19,7 +19,6 @@ import { $assert, $defined } from '@wisemapping/core-js';
 import { Point, Group, ElementClass } from '@wisemapping/web2d';
 
 import Topic from './Topic';
-import { TopicShape } from './model/INodeModel';
 import Shape from './util/Shape';
 import NodeModel from './model/NodeModel';
 import Workspace from './Workspace';
@@ -59,7 +58,7 @@ class MainTopic extends Topic {
     group.append(innerShape);
 
     // Add Text ...
-    if (this.getShapeType() !== TopicShape.IMAGE) {
+    if (this.getShapeType() !== 'image') {
       const textShape = this._buildTextShape(true);
       const text = this.getText();
       textShape.setText(text);
@@ -94,7 +93,7 @@ class MainTopic extends Topic {
     if (!$defined(shapeType)) {
       // Change figure ...
       shapeType = this.getShapeType();
-      this._setShapeType(TopicShape.ROUNDED_RECT, false);
+      this._setShapeType('rounded rectangle', false);
     }
     const innerShape = this.getInnerShape();
     innerShape.setVisibility(true);
@@ -124,7 +123,7 @@ class MainTopic extends Topic {
     const size = this.getSize();
 
     let result: Point = { x: 0, y: 0 };
-    if (this.getShapeType() === TopicShape.LINE) {
+    if (this.getShapeType() === 'line') {
       const groupPosition = this.get2DElement().getPosition();
       const innerShareSize = this.getInnerShape().getSize();
 

packages/mindplot/src/components/StandaloneActionDispatcher.ts

@@ -37,6 +37,7 @@ import Command from './Command';
 import FeatureType from './model/FeatureType';
 import PositionType from './PositionType';
 import { PivotType } from './RelationshipControlPoints';
+import { TopicShapeType } from './model/INodeModel';
 
 class StandaloneActionDispatcher extends ActionDispatcher {
   private _actionRunner: DesignerActionRunner;
@@ -215,7 +216,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
 
     const commandFunc = (topic: Topic, commandShapeType: string) => {
       const result = topic.getShapeType();
-      topic.setShapeType(commandShapeType);
+      topic.setShapeType(commandShapeType as TopicShapeType);
       return result;
     };
 

packages/mindplot/src/components/Topic.ts

@@ -30,7 +30,7 @@ import ShirinkConnector from './ShrinkConnector';
 import ActionDispatcher from './ActionDispatcher';
 
 import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
-import { TopicShape } from './model/INodeModel';
+import { TopicShapeType } from './model/INodeModel';
 import NodeModel from './model/NodeModel';
 import Relationship from './Relationship';
 import Workspace from './Workspace';
@@ -100,7 +100,7 @@ abstract class Topic extends NodeGraph {
     });
   }
 
-  setShapeType(type: string): void {
+  setShapeType(type: TopicShapeType): void {
     this._setShapeType(type, true);
   }
 
@@ -108,14 +108,14 @@ abstract class Topic extends NodeGraph {
     return this._parent;
   }
 
-  protected _setShapeType(type: string, updateModel: boolean) {
+  protected _setShapeType(type: TopicShapeType, updateModel: boolean) {
     // Remove inner shape figure ...
     const model = this.getModel();
     if ($defined(updateModel) && updateModel) {
       model.setShapeType(type);
     }
     // If shape is line, reset background color to default.
-    if (type === TopicShape.LINE) {
+    if (type === 'line') {
       const color = TopicStyle.defaultBackgroundColor(this);
       this.setBackgroundColor(color);
     }
@@ -152,10 +152,10 @@ abstract class Topic extends NodeGraph {
     }
   }
 
-  getShapeType(): string {
+  getShapeType(): TopicShapeType {
     const model = this.getModel();
     let result = model.getShapeType();
-    if (!$defined(result)) {
+    if (!result) {
       result = TopicStyle.defaultShapeType(this);
     }
     return result;
@@ -192,14 +192,14 @@ abstract class Topic extends NodeGraph {
     return this._innerShape;
   }
 
-  _buildShape(attributes, shapeType: string) {
+  _buildShape(attributes, shapeType: TopicShapeType): ElementClass {
     $assert(attributes, 'attributes can not be null');
     $assert(shapeType, 'shapeType can not be null');
 
     let result;
-    if (shapeType === TopicShape.RECTANGLE) {
+    if (shapeType === 'rectangle') {
       result = new Rect(0, attributes);
-    } else if (shapeType === TopicShape.IMAGE) {
+    } else if (shapeType === 'image') {
       const model = this.getModel();
       const url = model.getImageUrl();
       const size = model.getImageSize();
@@ -215,11 +215,11 @@ abstract class Topic extends NodeGraph {
       result.setPosition = function setPosition() {
         // Ignore ...
       };
-    } else if (shapeType === TopicShape.ELLIPSE) {
+    } else if (shapeType === 'elipse') {
       result = new Rect(0.9, attributes);
-    } else if (shapeType === TopicShape.ROUNDED_RECT) {
+    } else if (shapeType === 'rounded rectangle') {
       result = new Rect(0.3, attributes);
-    } else if (shapeType === TopicShape.LINE) {
+    } else if (shapeType === 'line') {
       result = new Line({
         strokeColor: '#495879',
         strokeWidth: 1,
@@ -273,7 +273,7 @@ abstract class Topic extends NodeGraph {
 
   getOuterShape(): ElementClass {
     if (!$defined(this._outerShape)) {
-      const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, TopicShape.ROUNDED_RECT);
+      const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, 'rounded rectangle');
       rect.setPosition(-2, -3);
       rect.setOpacity(0);
       this._outerShape = rect;
@@ -957,7 +957,7 @@ abstract class Topic extends NodeGraph {
 
     // Hide text shape ...
     const textShape = this.getTextShape();
-    textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false, fade);
+    textShape.setVisibility(this.getShapeType() !== 'image' ? value : false, fade);
   }
 
   /** */
@@ -1223,7 +1223,7 @@ abstract class Topic extends NodeGraph {
   adjustShapes(): void {
     if (this._isInWorkspace) {
       const textShape = this.getTextShape();
-      if (this.getShapeType() !== TopicShape.IMAGE) {
+      if (this.getShapeType() !== 'image') {
         // Calculate topic size and adjust elements ...
         const textWidth = textShape.getWidth();
         const textHeight = textShape.getHeight();

packages/mindplot/src/components/TopicEventDispatcher.ts

@@ -17,7 +17,6 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import Events from './Events';
-import { TopicShape } from './model/INodeModel';
 import Topic from './Topic';
 import MultitTextEditor from './MultilineTextEditor';
 
@@ -59,11 +58,7 @@ class TopicEventDispatcher extends Events {
 
     // Open the new editor ...
     const model = topic.getModel();
-    if (
+    if (model.getShapeType() !== 'image' && !this._readOnly && eventType === TopicEvent.EDIT) {
-      model.getShapeType() !== TopicShape.IMAGE &&
-      !this._readOnly &&
-      eventType === TopicEvent.EDIT
-    ) {
       editor.show(topic, options ? options.text : '');
     } else {
       this.fireEvent(eventType, { model, readOnly: this._readOnly });

packages/mindplot/src/components/TopicStyle.ts

@@ -17,7 +17,7 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import { $msg } from './Messages';
-import { TopicShape } from './model/INodeModel';
+import { TopicShapeType } from './model/INodeModel';
 import Topic from './Topic';
 
 type TopicStyleType = {
@@ -31,7 +31,7 @@ type TopicStyleType = {
     color: string;
   };
   msgKey: string;
-  shapeType: string;
+  shapeType: TopicShapeType;
 };
 
 const TopicDefaultStyles = {
@@ -46,7 +46,7 @@ const TopicDefaultStyles = {
       color: '#ffffff',
     },
     msgKey: 'CENTRAL_TOPIC',
-    shapeType: TopicShape.ROUNDED_RECT,
+    shapeType: 'rounded rectangle' as TopicShapeType,
   },
   MAIN_TOPIC: {
     borderColor: 'rgb(2,59,185)',
@@ -59,7 +59,7 @@ const TopicDefaultStyles = {
       color: 'rgb(82,92,97)',
     },
     msgKey: 'MAIN_TOPIC',
-    shapeType: TopicShape.LINE,
+    shapeType: 'line' as TopicShapeType,
   },
   SUB_TOPIC: {
     borderColor: 'rgb(2,59,185)',
@@ -72,7 +72,7 @@ const TopicDefaultStyles = {
       color: 'rgb(82,92,97)',
     },
     msgKey: 'SUB_TOPIC',
-    shapeType: TopicShape.LINE,
+    shapeType: 'line' as TopicShapeType,
   },
 
   ISOLATED_TOPIC: {
@@ -86,7 +86,7 @@ const TopicDefaultStyles = {
       color: 'rgb(82,92,97)',
     },
     msgKey: 'ISOLATED_TOPIC',
-    shapeType: TopicShape.LINE,
+    shapeType: 'line' as TopicShapeType,
   },
 };
 
@@ -133,7 +133,7 @@ class TopicStyle {
     return Math.round(topic.getTextShape().getFontHeight() * 0.5);
   }
 
-  static defaultShapeType(topic) {
+  static defaultShapeType(topic: Topic) {
     return this._getStyles(topic).shapeType;
   }
 }

packages/mindplot/src/components/export/FreemindExporter.ts

@@ -1,6 +1,6 @@
 import xmlFormatter from 'xml-formatter';
 import { Mindmap } from '../..';
-import INodeModel, { TopicShape } from '../model/INodeModel';
+import INodeModel, { TopicShapeType } from '../model/INodeModel';
 import RelationshipModel from '../model/RelationshipModel';
 import SvgIconModel from '../model/SvgIconModel';
 import FeatureModel from '../model/FeatureModel';
@@ -143,18 +143,18 @@ class FreemindExporter extends Exporter {
       }
     }
 
-    const wiseShape: string = mindmapTopic.getShapeType();
+    const wiseShape: TopicShapeType = mindmapTopic.getShapeType();
-    if (wiseShape && TopicShape.LINE !== wiseShape) {
+    if (wiseShape && wiseShape !== 'line') {
       freemindNode.setBackgorundColor(this.rgbToHex(mindmapTopic.getBackgroundColor()));
     }
 
     if (wiseShape) {
-      const isRootRoundedRectangle = isRoot && TopicShape.ROUNDED_RECT !== wiseShape;
+      const isRootRoundedRectangle = isRoot && wiseShape !== 'rounded rectangle';
-      const notIsRootLine = !isRoot && TopicShape.LINE !== wiseShape;
+      const notIsRootLine = !isRoot && wiseShape !== 'line';
 
       if (isRootRoundedRectangle || notIsRootLine) {
         let style: string = wiseShape;
-        if (TopicShape.ROUNDED_RECT === style || TopicShape.ELLIPSE === style) {
+        if (style === 'rounded rectangle' || style === 'elipse') {
           style = 'bubble';
         }
         freemindNode.setStyle(style);

packages/mindplot/src/components/import/FreemindImporter.ts

@@ -3,7 +3,6 @@ import Importer from './Importer';
 import Mindmap from '../model/Mindmap';
 import RelationshipModel from '../model/RelationshipModel';
 import NodeModel from '../model/NodeModel';
-import { TopicShape } from '../model/INodeModel';
 import FreemindConstant from '../export/freemind/FreemindConstant';
 import FreemindMap from '../export/freemind/Map';
 import FreemindNode, { Choise } from '../export/freemind/Node';
@@ -19,6 +18,7 @@ import NoteModel from '../model/NoteModel';
 import FeatureModelFactory from '../model/FeatureModelFactory';
 import FeatureModel from '../model/FeatureModel';
 import XMLSerializerFactory from '../persistence/XMLSerializerFactory';
+import { TopicShapeType } from '../model/INodeModel';
 
 export default class FreemindImporter extends Importer {
   private mindmap: Mindmap;
@@ -172,7 +172,9 @@ export default class FreemindImporter extends Importer {
 
     if (centralTopic === false) {
       const shape = this.getShapeFromFreeNode(freeNode);
-      if (shape && shape !== 'fork') wiseTopic.setShapeType(shape);
+      if (shape) {
+        wiseTopic.setShapeType(shape);
+      }
     }
 
     // Check for style...
@@ -390,15 +392,16 @@ export default class FreemindImporter extends Importer {
     return result;
   }
 
-  private getShapeFromFreeNode(node: FreemindNode): string {
+  private getShapeFromFreeNode(node: FreemindNode): TopicShapeType {
-    let result: string = node.getStyle();
+    const shape = node.getStyle();
 
-    if (result === 'bubble') {
+    let result: TopicShapeType;
-      result = TopicShape.ROUNDED_RECT;
+    if (shape === 'bubble') {
+      result = 'rounded rectangle';
     } else if (node.getBackgorundColor()) {
-      result = TopicShape.RECTANGLE;
+      result = 'rectangle';
     } else {
-      result = TopicShape.LINE;
+      result = 'line';
     }
     return result;
   }

packages/mindplot/src/components/model/INodeModel.ts

@@ -23,6 +23,8 @@ import Mindmap from './Mindmap';
 
 export type NodeModelType = 'CentralTopic' | 'MainTopic';
 
+export type TopicShapeType = 'rectangle' | 'rounded rectangle' | 'elipse' | 'line' | 'image';
+
 // regex taken from https://stackoverflow.com/a/34763398/58128
 const parseJsObject = (str: string) =>
   JSON.parse(str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '));
@@ -131,8 +133,8 @@ abstract class INodeModel {
   }
 
   /** */
-  getShapeType(): string {
+  getShapeType(): TopicShapeType {
-    return this.getProperty('shapeType') as string;
+    return this.getProperty('shapeType') as TopicShapeType;
   }
 
   /** */
@@ -357,24 +359,11 @@ abstract class INodeModel {
     return result;
   }
 
-  abstract removeChild(child: INodeModel);
+  abstract removeChild(child: INodeModel): void;
 
   static _nextUUID(): number {
     INodeModel._nextUuid += 1;
     return INodeModel._nextUuid;
   }
 }
-
-const TopicShape = {
-  RECTANGLE: 'rectangle',
-  ROUNDED_RECT: 'rounded rectangle',
-  ELLIPSE: 'elipse',
-  LINE: 'line',
-  IMAGE: 'image',
-};
-
-/**
- * @todo: This method must be implemented. (unascribed)
- */
-export { TopicShape };
 export default INodeModel;

packages/mindplot/src/components/persistence/XMLSerializerTango.ts

@@ -18,7 +18,6 @@
 import { $assert, $defined, createDocument } from '@wisemapping/core-js';
 import { Point } from '@wisemapping/web2d';
 import Mindmap from '../model/Mindmap';
-import { TopicShape } from '../model/INodeModel';
 import { LineType } from '../ConnectionLine';
 import FeatureModelFactory from '../model/FeatureModelFactory';
 import NodeModel from '../model/NodeModel';
@@ -98,7 +97,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
     if ($defined(shape)) {
       parentTopic.setAttribute('shape', shape);
 
-      if (shape === TopicShape.IMAGE) {
+      if (shape === 'image') {
         const size = topic.getImageSize();
         parentTopic.setAttribute('image', `${size.width},${size.height}:${topic.getImageUrl()}`);
       }
@@ -331,7 +330,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
 
       // Is an image ?
       const image = domElem.getAttribute('image');
-      if (image && shape === TopicShape.IMAGE) {
+      if (image && shape === 'image') {
         const size = image.substring(0, image.indexOf(':'));
         const url = image.substring(image.indexOf(':') + 1, image.length);
         topic.setImageUrl(url);

packages/mindplot/src/components/util/Shape.ts

@@ -17,7 +17,6 @@
  */
 import { Point } from '@wisemapping/web2d';
 import { $assert, $defined } from '@wisemapping/core-js';
-import { TopicShape } from '../model/INodeModel';
 import TopicConfig from '../TopicConfig';
 import PositionType from '../PositionType';
 import SizeType from '../SizeType';
@@ -127,7 +126,7 @@ class Shape {
 
     const isAtRight = Shape.isAtRight(sourcePosition, pos);
     const result = Shape.calculateRectConnectionPoint(pos, size, isAtRight);
-    if (targetNode.getShapeType() === TopicShape.LINE) {
+    if (targetNode.getShapeType() === 'line') {
       result.y += targetNode.getSize().height / 2;
     }