Introduce shape type.

packages/mindplot/src/components/CentralTopic.ts

@@ -47,7 +47,7 @@ class CentralTopic extends Topic {
     // Overwite behaviour ...
   }
 
-  _updatePositionOnChangeSize(): void {
+  updatePositionOnChangeSize(): void {
     // Center main topic ...
     const zeroPoint = { x: 0, y: 0 };
     this.setPosition(zeroPoint);

packages/mindplot/src/components/ConnectionLine.ts

@@ -22,7 +22,7 @@ import PositionType from './PositionType';
 import Topic from './Topic';
 import TopicConfig from './TopicConfig';
 import Canvas from './Canvas';
-import ArcLine from './widget/ArcLine';
+import ArcLine from './model/ArcLine';
 
 // eslint-disable-next-line no-shadow
 export enum LineType {

packages/mindplot/src/components/Designer.ts

@@ -45,7 +45,7 @@ import EventBusDispatcher from './layout/EventBusDispatcher';
 
 import LayoutManager from './layout/LayoutManager';
 
-import { $notify } from './widget/ToolbarNotifier';
+import { $notify } from './model/ToolbarNotifier';
 import RelationshipModel from './model/RelationshipModel';
 import Mindmap from './model/Mindmap';
 import NodeModel from './model/NodeModel';

packages/mindplot/src/components/DesignerModel.ts

@@ -21,7 +21,7 @@ import { DesignerOptions } from './DesignerOptionsBuilder';
 import Events from './Events';
 import Relationship from './Relationship';
 import Topic from './Topic';
-import { $notify } from './widget/ToolbarNotifier';
+import { $notify } from './model/ToolbarNotifier';
 
 class DesignerModel extends Events {
   private _zoom: number;

packages/mindplot/src/components/MainTopic.ts

@@ -23,11 +23,12 @@ import Shape from './util/Shape';
 import Canvas from './Canvas';
 import SizeType from './SizeType';
 import PositionType from './PositionType';
+import TopicShapeFactory from './shape/TopicShapeFactory';
 
 class MainTopic extends Topic {
   buildDragShape(): ElementClass<ElementPeer> {
     const shapeType = this.getShapeType();
-    const innerShape = this._buildShape(shapeType);
+    const innerShape = TopicShapeFactory.create(shapeType, this);
     const size = this.getSize();
     innerShape.setSize(size.width, size.height);
     innerShape.setPosition(0, 0);
@@ -36,10 +37,10 @@ class MainTopic extends Topic {
     innerShape.setVisibility(true);
 
     const brColor = this.getBorderColor();
-    innerShape.setAttribute('strokeColor', brColor);
+    innerShape.setStroke(null, null, brColor);
 
     const bgColor = this.getBackgroundColor();
-    innerShape.setAttribute('fillColor', bgColor);
+    innerShape.setFill(bgColor);
 
     //  Create group ...
     const groupAttributes = {
@@ -49,9 +50,9 @@ class MainTopic extends Topic {
       coordSizeHeight: 100,
     };
     const group = new Group(groupAttributes);
-    group.append(innerShape);
+    innerShape.appendTo(group);
 
-    const textShape = this._buildTextShape(true);
+    const textShape = this.buildTextShape(true);
     const text = this.getText();
     textShape.setText(text);
     textShape.setOpacity(0.5);
@@ -75,7 +76,7 @@ class MainTopic extends Topic {
     innerShape.setVisibility(true);
   }
 
-  _updatePositionOnChangeSize(oldSize: SizeType, newSize: SizeType) {
+  updatePositionOnChangeSize(oldSize: SizeType, newSize: SizeType) {
     const xOffset = Math.round((newSize.width - oldSize.width) / 2);
     const pos = this.getPosition();
     if ($defined(pos)) {

packages/mindplot/src/components/MindplotWebComponent.ts

@@ -23,7 +23,7 @@ import EditorRenderMode from './EditorRenderMode';
 import PersistenceManager from './PersistenceManager';
 import WidgetManager from './WidgetManager';
 import mindplotStyles from './styles/mindplot-styles';
-import { $notify } from './widget/ToolbarNotifier';
+import { $notify } from './model/ToolbarNotifier';
 import { $msg } from './Messages';
 import DesignerKeyboard from './DesignerKeyboard';
 import LocalStorageManager from './LocalStorageManager';

packages/mindplot/src/components/NodeGraph.ts

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { ElementClass, ElementPeer, Group } from '@wisemapping/web2d';
+import { Group, Rect } from '@wisemapping/web2d';
 import { $assert } from '@wisemapping/core-js';
 import NodeModel from './model/NodeModel';
 import Canvas from './Canvas';
@@ -140,7 +140,7 @@ abstract class NodeGraph implements CanvasElement {
 
   abstract setCursor(type: string): void;
 
-  abstract getOuterShape(): ElementClass<ElementPeer>;
+  abstract getOuterShape(): Rect;
 
   isOnFocus(): boolean {
     return this._onFocus;
@@ -163,6 +163,10 @@ abstract class NodeGraph implements CanvasElement {
     const model = this.getModel();
     return model.getPosition();
   }
+
+  isCentralTopic(): boolean {
+    return this.getModel().getType() === 'CentralTopic';
+  }
 }
 
 export default NodeGraph;

packages/mindplot/src/components/Topic.ts

@@ -17,7 +17,7 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 
-import { Rect, Text, Group, ElementClass, ElementPeer } from '@wisemapping/web2d';
+import { Text, Group, ElementClass, ElementPeer, Rect } from '@wisemapping/web2d';
 
 import NodeGraph, { NodeOption } from './NodeGraph';
 import TopicFeatureFactory from './TopicFeature';
@@ -38,20 +38,18 @@ import LinkModel from './model/LinkModel';
 import SizeType from './SizeType';
 import FeatureModel from './model/FeatureModel';
 import PositionType from './PositionType';
-import LineTopicShape from './widget/LineTopicShape';
 import Icon from './Icon';
 import { FontStyleType } from './FontStyleType';
 import { FontWeightType } from './FontWeightType';
 import DragTopic from './DragTopic';
 import ThemeFactory from './theme/ThemeFactory';
-import NoneTopicShape from './widget/NoneTopicShape';
+import TopicShape from './shape/TopicShape';
+import TopicShapeFactory from './shape/TopicShapeFactory';
 
 const ICON_SCALING_FACTOR = 1.3;
 
 abstract class Topic extends NodeGraph {
-  private _innerShape: LineTopicShape | Rect | LineTopicShape | NoneTopicShape | null;
+  private _innerShape: TopicShape | null;
-
-  private _innerShapeType: TopicShapeType | undefined;
 
   private _relationships: Relationship[];
 
@@ -63,7 +61,7 @@ abstract class Topic extends NodeGraph {
   // eslint-disable-next-line no-use-before-define
   private _parent: Topic | null;
 
-  private _outerShape: ElementClass<ElementPeer> | undefined;
+  private _outerShape: Rect | undefined;
 
   private _text: Text | undefined;
 
@@ -80,7 +78,7 @@ abstract class Topic extends NodeGraph {
     this._relationships = [];
     this._isInWorkspace = false;
     this._innerShape = null;
-    this._buildTopicShape();
+    this.buildTopicShape();
 
     // Position a topic ....
     const pos = model.getPosition();
@@ -120,7 +118,7 @@ abstract class Topic extends NodeGraph {
   }
 
   protected redrawShapeType() {
-    this._removeInnerShape();
+    this.removeInnerShape();
 
     // Create a new one ...
     const innerShape = this.getInnerShape();
@@ -130,7 +128,7 @@ abstract class Topic extends NodeGraph {
     this.setSize(size, true);
 
     const group = this.get2DElement();
-    group.append(innerShape);
+    innerShape.appendTo(group);
 
     // Move text to the front ...
     const text = this.getOrBuildTextShape();
@@ -167,19 +165,21 @@ abstract class Topic extends NodeGraph {
     return theme.getConnectionColor(this);
   }
 
-  private _removeInnerShape(): ElementClass<ElementPeer> {
+  private removeInnerShape(): TopicShape {
     const group = this.get2DElement();
     const innerShape = this.getInnerShape();
 
-    group.removeChild(innerShape);
+    innerShape.removeFrom(group);
     this._innerShape = null;
+
     return innerShape;
   }
 
-  getInnerShape(): LineTopicShape | Rect | LineTopicShape | NoneTopicShape {
+  getInnerShape(): TopicShape {
     if (!this._innerShape) {
       // Create inner box.
-      this._innerShape = this._buildShape(this.getShapeType());
+      const shapeType = this.getShapeType();
+      this._innerShape = TopicShapeFactory.create(shapeType, this);
 
       // Define the pointer ...
       if (!this.isCentralTopic() && !this.isReadOnly()) {
@@ -191,39 +191,6 @@ abstract class Topic extends NodeGraph {
     return this._innerShape;
   }
 
-  protected _buildShape(
-    shapeType: TopicShapeType,
-  ): LineTopicShape | Rect | LineTopicShape | NoneTopicShape {
-    let result: LineTopicShape | Rect | LineTopicShape | NoneTopicShape;
-    switch (shapeType) {
-      case 'rectangle':
-        result = new Rect(0, { strokeWidth: 2 });
-        break;
-      case 'elipse':
-        result = new Rect(0.9, { strokeWidth: 2 });
-        break;
-      case 'rounded rectangle':
-        result = new Rect(0.6, { strokeWidth: 2 });
-        break;
-      case 'line':
-        result = new LineTopicShape(this, { strokeWidth: 2 });
-        break;
-      case 'none':
-        result = new NoneTopicShape();
-        break;
-      case 'image':
-        result = new LineTopicShape(this);
-        break;
-      default: {
-        const exhaustiveCheck: never = shapeType;
-        throw new Error(exhaustiveCheck);
-      }
-    }
-    this._innerShapeType = shapeType;
-    result.setPosition(0, 0);
-    return result;
-  }
-
   setCursor(type: string): void {
     const innerShape = this.getInnerShape();
     innerShape.setCursor(type);
@@ -235,9 +202,9 @@ abstract class Topic extends NodeGraph {
     textShape.setCursor(type);
   }
 
-  getOuterShape(): ElementClass<ElementPeer> {
+  getOuterShape(): Rect {
     if (!this._outerShape) {
-      const rect = this._buildShape('rounded rectangle');
+      const rect = new Rect(0.6);
 
       rect.setPosition(-3, -3);
       rect.setOpacity(0);
@@ -249,7 +216,7 @@ abstract class Topic extends NodeGraph {
 
   getOrBuildTextShape(): Text {
     if (!this._text) {
-      this._text = this._buildTextShape(false);
+      this._text = this.buildTextShape(false);
 
       // @todo: Review this. Get should not modify the state ....
       const text = this.getText();
@@ -261,7 +228,7 @@ abstract class Topic extends NodeGraph {
 
   private getOrBuildIconGroup(): IconGroup {
     if (!this._iconsGroup) {
-      const iconGroup = this._buildIconGroup();
+      const iconGroup = this.buildIconGroup();
       const group = this.get2DElement();
 
       iconGroup.appendTo(group);
@@ -274,7 +241,7 @@ abstract class Topic extends NodeGraph {
     return this._iconsGroup;
   }
 
-  private _buildIconGroup(): IconGroup {
+  private buildIconGroup(): IconGroup {
     const model = this.getModel();
     const theme = ThemeFactory.create(model);
 
@@ -319,7 +286,6 @@ abstract class Topic extends NodeGraph {
     return model.findFeatureById(id);
   }
 
-  /** */
   removeFeature(featureModel: FeatureModel): void {
     $assert(featureModel, 'featureModel could not be null');
 
@@ -347,7 +313,7 @@ abstract class Topic extends NodeGraph {
     return this._relationships;
   }
 
-  protected _buildTextShape(readOnly: boolean): Text {
+  protected buildTextShape(readOnly: boolean): Text {
     const result = new Text();
     const family = this.getFontFamily();
     const size = this.getFontSize();
@@ -493,7 +459,7 @@ abstract class Topic extends NodeGraph {
     return theme.getBorderColor(this);
   }
 
-  _buildTopicShape(): void {
+  private buildTopicShape(): void {
     const groupAttributes = {
       width: 100,
       height: 100,
@@ -510,7 +476,7 @@ abstract class Topic extends NodeGraph {
 
     // Add to the group ...
     group.append(outerShape);
-    group.append(innerShape);
+    innerShape.appendTo(group);
     group.append(textShape);
 
     // Update figure size ...
@@ -525,13 +491,13 @@ abstract class Topic extends NodeGraph {
     }
 
     // Register listeners ...
-    this._registerDefaultListenersToElement(group, this);
+    this.registerDefaultListenersToElement(group, this);
 
     // Set test id
     group.setTestId(String(model.getId()));
   }
 
-  private _registerDefaultListenersToElement(elem: ElementClass<ElementPeer>, topic: Topic) {
+  private registerDefaultListenersToElement(elem: ElementClass<ElementPeer>, topic: Topic) {
     const mouseOver = function mouseOver() {
       if (topic.isMouseEventsEnabled()) {
         topic.handleMouseOver();
@@ -618,7 +584,7 @@ abstract class Topic extends NodeGraph {
     }
 
     // Do some fancy animation ....
-    const elements = this._flatten2DElements(this);
+    const elements = this.flatten2DElements(this);
     elements.forEach((elem) => {
       elem.setVisibility(!value, 250);
     });
@@ -935,7 +901,7 @@ abstract class Topic extends NodeGraph {
       innerShape.setSize(size.width, size.height);
 
       // Update the figure position(ej: central topic must be centered) and children position.
-      this._updatePositionOnChangeSize(oldSize, size);
+      this.updatePositionOnChangeSize(oldSize, size);
 
       if (hasSizeChanged) {
         EventBus.instance.fireEvent('topicResize', {
@@ -946,8 +912,6 @@ abstract class Topic extends NodeGraph {
     }
   }
 
-  protected abstract _updatePositionOnChangeSize(oldSize: SizeType, roundedSize: SizeType): void;
-
   disconnect(workspace: Canvas): void {
     const outgoingLine = this.getOutgoingLine();
     if (outgoingLine) {
@@ -1022,7 +986,7 @@ abstract class Topic extends NodeGraph {
     }
 
     // Fire connection event ...
-    if (this.isInWorkspace()) {
+    if (this._isInWorkspace) {
       EventBus.instance.fireEvent('topicConnected', {
         parentNode: targetTopic.getModel(),
         childNode: this.getModel(),
@@ -1070,7 +1034,7 @@ abstract class Topic extends NodeGraph {
   addToWorkspace(workspace: Canvas): void {
     const elem = this.get2DElement();
     workspace.append(elem);
-    if (!this.isInWorkspace()) {
+    if (!this._isInWorkspace) {
       if (!this.isCentralTopic()) {
         EventBus.instance.fireEvent('topicAdded', this.getModel());
       }
@@ -1087,10 +1051,6 @@ abstract class Topic extends NodeGraph {
     this.redraw();
   }
 
-  isInWorkspace(): boolean {
-    return this._isInWorkspace;
-  }
-
   createDragNode(layoutManager: LayoutManager): DragTopic {
     const result = super.createDragNode(layoutManager);
 
@@ -1143,7 +1103,7 @@ abstract class Topic extends NodeGraph {
 
       // Needs to update inner shape ...
       const shapeType = this.getShapeType();
-      if (shapeType !== this._innerShapeType) {
+      if (shapeType !== this._innerShape?.getShapeType()) {
         this.redrawShapeType();
       }
 
@@ -1222,7 +1182,7 @@ abstract class Topic extends NodeGraph {
     }
   }
 
-  private _flatten2DElements(topic: Topic): (Topic | Relationship | ConnectionLine)[] {
+  private flatten2DElements(topic: Topic): (Topic | Relationship | ConnectionLine)[] {
     const result: (Topic | Relationship | ConnectionLine)[] = [];
     const children = topic.getChildren();
     children.forEach((child) => {
@@ -1235,17 +1195,13 @@ abstract class Topic extends NodeGraph {
       result.push(...relationships);
 
       if (!child.areChildrenShrunken()) {
-        const innerChilds = this._flatten2DElements(child);
+        const innerChilds = this.flatten2DElements(child);
         result.push(...innerChilds);
       }
     });
     return result;
   }
 
-  abstract workoutOutgoingConnectionPoint(position: PositionType): PositionType;
-
-  abstract workoutIncomingConnectionPoint(position: PositionType): PositionType;
-
   isChildTopic(childTopic: Topic): boolean {
     let result = this.getId() === childTopic.getId();
     if (!result) {
@@ -1261,9 +1217,11 @@ abstract class Topic extends NodeGraph {
     return result;
   }
 
-  isCentralTopic(): boolean {
+  abstract workoutOutgoingConnectionPoint(position: PositionType): PositionType;
-    return this.getModel().getType() === 'CentralTopic';
+
-  }
+  abstract workoutIncomingConnectionPoint(position: PositionType): PositionType;
+
+  protected abstract updatePositionOnChangeSize(oldSize: SizeType, roundedSize: SizeType): void;
 }
 
 export default Topic;

packages/mindplot/src/components/shape/DefaultShape.ts

@@ -0,0 +1,76 @@
+/*
+ *    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 { ElementClass, ElementPeer, Group } from '@wisemapping/web2d';
+import { TopicShapeType } from '../model/INodeModel';
+import SizeType from '../SizeType';
+import TopicShape from './TopicShape';
+
+abstract class DefaultTopicShape<T extends ElementClass<ElementPeer>> implements TopicShape {
+  private _shape: T;
+
+  private _type: TopicShapeType;
+
+  constructor(shape: T, type: TopicShapeType) {
+    this._shape = shape;
+    this._type = type;
+  }
+
+  getShapeType(): TopicShapeType {
+    return this._type;
+  }
+
+  setStroke(width: number | null, style: string, color: string): void {
+    this._shape.setStroke(width, style, color);
+  }
+
+  setOpacity(value: number): void {
+    this._shape.setOpacity(value);
+  }
+
+  setFill(value: string, opacity?: number): void {
+    this._shape.setFill(value, opacity);
+  }
+
+  setVisibility(value: boolean, fade?: number): void {
+    this._shape.setVisibility(value, fade);
+  }
+
+  protected getShape(): T {
+    return this._shape;
+  }
+
+  setCursor(value: string): void {
+    this._shape.setCursor(value);
+  }
+
+  appendTo(group: Group): void {
+    group.append(this.getShape());
+  }
+
+  removeFrom(group: Group): void {
+    group.removeChild(this.getShape());
+  }
+
+  abstract setSize(width: number, height: number): void;
+
+  abstract getSize(): SizeType | null;
+
+  abstract setPosition(x: number, y: number): void;
+}
+
+export default DefaultTopicShape;

packages/mindplot/src/components/shape/LineTopicShape.ts

@@ -15,23 +15,23 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { StraightLine, StyleAttributes } from '@wisemapping/web2d';
+import { StraightLine } from '@wisemapping/web2d';
 import SizeType from '../SizeType';
-import Topic from '../Topic';
+import DefaultTopicShape from './DefaultShape';
 
-class LineTopicShape extends StraightLine {
+class LineTopicShape extends DefaultTopicShape<StraightLine> {
   private _size: SizeType | null;
 
-  constructor(topic: Topic, attributes?: StyleAttributes) {
+  constructor(borderColor: string) {
-    const stokeColor = topic.getBorderColor();
+    const shape = new StraightLine({ strokeWidth: 2, strokeColor: borderColor });
-    super({ ...attributes, strokeColor: stokeColor });
+    super(shape, 'image');
     this._size = null;
   }
 
   setSize(width: number, height: number): void {
     this._size = { width, height };
-    super.setFrom(0, height);
+    this.getShape().setFrom(0, height);
-    super.setTo(width, height);
+    this.getShape().setTo(width, height);
   }
 
   getSize(): SizeType | null {

packages/mindplot/src/components/shape/NoneTopicShape.ts

@@ -0,0 +1,71 @@
+/*
+ *    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 { TopicShapeType } from '../model/INodeModel';
+import SizeType from '../SizeType';
+import TopicShape from './TopicShape';
+
+class NoneTopicShape implements TopicShape {
+  private _size: SizeType | undefined;
+
+  setSize(width: number, height: number): void {
+    // Ignore ...
+    this._size = { width, height };
+  }
+
+  getSize(): SizeType | null {
+    return this._size || null;
+  }
+
+  setPosition(): void {
+    // Ignore ...
+  }
+
+  setFill(): void {
+    // Ignore ...
+  }
+
+  setVisibility(): void {
+    // Ignore ...
+  }
+
+  setOpacity(): void {
+    // Ignore ...
+  }
+
+  setCursor(): void {
+    // Ignore ...
+  }
+
+  appendTo(): void {
+    // Ignore ...
+  }
+
+  removeFrom(): void {
+    // Ignore ...
+  }
+
+  setStroke(): void {
+    // Ignore ...
+  }
+
+  getShapeType(): TopicShapeType {
+    return 'none';
+  }
+}
+
+export default NoneTopicShape;

packages/mindplot/src/components/shape/RectTopicShape.ts

@@ -15,34 +15,27 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { StraightLine } from '@wisemapping/web2d';
+import { Rect } from '@wisemapping/web2d';
 import SizeType from '../SizeType';
+import DefaultTopicShape from './DefaultShape';
 
-class NoneTopicShape extends StraightLine {
+class RectTopicShape extends DefaultTopicShape<Rect> {
-  private _size: SizeType | null;
+  constructor(arc: number, type: 'rectangle' | 'rounded rectangle' | 'elipse') {
-
+    const shape = new Rect(arc, { strokeWidth: 2 });
-  constructor() {
+    super(shape, type);
-    super({});
-    this._size = null;
-    this.setVisibility(false);
   }
 
-  setSize(): void {
+  setSize(width: number, height: number): void {
-    super.setFrom(0, 0);
+    this.getShape().setSize(width, height);
-    super.setTo(0, 0);
   }
 
   getSize(): SizeType | null {
-    return this._size;
+    return this.getShape().getSize();
   }
 
-  setPosition() {
+  setPosition(x: number, y: number) {
-    // Overwrite behaviour ...
+    this.getShape().setPosition(x, y);
-  }
-
-  setFill() {
-    // Overwrite behaviour ...
   }
 }
 
-export default NoneTopicShape;
+export default RectTopicShape;

packages/mindplot/src/components/shape/TopicShape.ts

@@ -0,0 +1,47 @@
+/*
+ *    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 { Group } from '@wisemapping/web2d';
+import { TopicShapeType } from '../model/INodeModel';
+import SizeType from '../SizeType';
+
+interface TopicShape {
+  setSize(width: number, height: number): void;
+
+  getSize(): SizeType | null;
+
+  setPosition(x: number, y: number): void;
+
+  setFill(value: string, opacity?: number): void;
+
+  setVisibility(value: boolean, fade?: number): void;
+
+  setOpacity(value: number): void;
+
+  setCursor(value: string): void;
+
+  appendTo(group: Group): void;
+
+  removeFrom(group: Group): void;
+
+  setStroke(width: number | null, style: string | null, color: string): void;
+
+  getShapeType(): TopicShapeType;
+}
+
+export default TopicShape;

packages/mindplot/src/components/shape/TopicShapeFactory.ts

@@ -0,0 +1,58 @@
+/*
+ *    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 { TopicShapeType } from '../model/INodeModel';
+import Topic from '../Topic';
+import LineTopicShape from './LineTopicShape';
+import NoneTopicShape from './NoneTopicShape';
+import RectTopicShape from './RectTopicShape';
+import TopicShape from './TopicShape';
+
+class TopicShapeFactory {
+  static create(value: TopicShapeType, topic: Topic): TopicShape {
+    let result: TopicShape;
+    switch (value) {
+      case 'rectangle':
+        result = new RectTopicShape(0, value);
+        break;
+      case 'elipse':
+        result = new RectTopicShape(0.9, value);
+        break;
+      case 'rounded rectangle':
+        result = new RectTopicShape(0.6, value);
+        break;
+      case 'line':
+        result = new LineTopicShape(topic.getBorderColor());
+        break;
+      case 'none':
+        result = new NoneTopicShape();
+        break;
+      case 'image':
+        result = new NoneTopicShape();
+        break;
+      default: {
+        const exhaustiveCheck: never = value;
+        throw new Error(exhaustiveCheck);
+      }
+    }
+    result.setPosition(0, 0);
+    return result;
+  }
+}
+
+export default TopicShapeFactory;

packages/mindplot/src/index.ts

@@ -48,7 +48,7 @@ import WidgetManager from './components/WidgetManager';
 
 import { buildDesigner } from './components/DesignerBuilder';
 
-import { $notify } from './components/widget/ToolbarNotifier';
+import { $notify } from './components/model/ToolbarNotifier';
 import XMLSerializerFactory from './components/persistence/XMLSerializerFactory';
 
 declare global {

packages/mindplot/storybook/src/stories/Topic.stories.ts

@@ -14,7 +14,7 @@ export default {
     fontSize: { control: { type: 'number', min: 0, max: 20, step: 2 } },
     fontColor: { control: 'color' },
     shapeType: {
-      options: ['rectangle', 'rounded rectangle', 'elipse', 'line'],
+      options: ['none', 'rectangle', 'rounded rectangle', 'elipse', 'line'],
       control: { type: 'select' },
     },
     text: { control: 'text' },
@@ -77,3 +77,9 @@ ShapeEllipse.args = {
   eicon: ['🌈'],
   shapeType: 'elipse',
 };
+export const ShapeNone = Template.bind({});
+ShapeNone.args = {
+  text: 'Shape None',
+  eicon: ['🌈'],
+  shapeType: 'none',
+};

packages/mindplot/storybook/src/stories/Topic.ts

@@ -7,6 +7,7 @@ import Canvas from '../../../src/components/Canvas';
 import ScreenManager from '../../../src/components/ScreenManager';
 import EmojiIconModel from '../../../src/components/model/EmojiIconModel';
 import TopicEventDispatcher from '../../../src/components/TopicEventDispatcher';
+import { TopicShapeType } from '../../../src/components/model/INodeModel';
 
 const registerRefreshHook = (topic: Topic) => {
   // Trigger a redraw after the node is added ...
@@ -28,7 +29,7 @@ export type TopicArgs = {
   borderColor?: string;
   fontSize?: number;
   fontColor?: string;
-  shapeType?: 'rectangle' | 'rounded rectangle' | 'elipse' | 'line';
+  shapeType?: TopicShapeType;
   text?: string;
   noteText?: string;
   linkText?: string;