Migrate topic to TS

packages/mindplot/src/components/CentralTopic.ts

@@ -21,7 +21,11 @@ import Topic from './Topic';
 import Shape from './util/Shape';
 
 class CentralTopic extends Topic {
-  _registerEvents() {
+  _buildDragShape() {
+    // Ignore ..
+  }
+
+  _registerEvents(): void {
     super._registerEvents();
 
     // This disable the drag of the central topic.
@@ -31,17 +35,15 @@ class CentralTopic extends Topic {
     });
   }
 
-  /** */
-  workoutIncomingConnectionPoint() {
+
+  workoutIncomingConnectionPoint(): Point {
     return this.getPosition();
   }
 
-  /** */
-  setCursor(type) {
+  setCursor(type: string) {
     super.setCursor(type === 'move' ? 'default' : type);
   }
 
-  /** */
   updateTopicShape() {
     // Overwite behaviour ...
   }
@@ -58,7 +60,7 @@ class CentralTopic extends Topic {
   }
 
   /** */
-  workoutOutgoingConnectionPoint(targetPosition) {
+  workoutOutgoingConnectionPoint(targetPosition: Point) {
     $assert(targetPosition, 'targetPoint can not be null');
     const pos = this.getPosition();
     const isAtRight = Shape.isAtRight(targetPosition, pos);

packages/mindplot/src/components/CursorType.ts

@@ -0,0 +1,21 @@
+/*
+ *    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.
+ */
+
+type CursorType = 'default' | 'move';
+
+export default CursorType;

packages/mindplot/src/components/DesignerKeyboard.ts

@@ -53,7 +53,7 @@ class DesignerKeyboard extends Keyboard {
         event.preventDefault();
         const node = model.selectedTopic();
         if (node) {
-          node.showTextEditor();
+          node.showTextEditor(node.getText());
         }
       },
     );

packages/mindplot/src/components/MainTopic.ts

@@ -16,25 +16,29 @@
  *   limitations under the License.
  */
 import { $assert, $defined } from '@wisemapping/core-js';
-import { Point, Group } from '@wisemapping/web2d';
+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';
+import SizeType from './SizeType';
 
 class MainTopic extends Topic {
+  private INNER_RECT_ATTRIBUTES: { stroke: string; };
   /**
          * @extends mindplot.Topic
          * @constructs
          * @param model
          * @param options
          */
-  constructor(model, options) {
+  constructor(model: NodeModel, options) {
     super(model, options);
     this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
   }
 
-  _buildDragShape() {
+  _buildDragShape(): ElementClass {
     const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
     const size = this.getSize();
     innerShape.setSize(size.width, size.height);
@@ -70,9 +74,8 @@ class MainTopic extends Topic {
     return group;
   }
 
-  /** */
-  // eslint-disable-next-line no-unused-vars
-  updateTopicShape(targetTopic, workspace) {
+
+  updateTopicShape(targetTopic: Topic) {
     // Change figure based on the connected topic ...
     const model = this.getModel();
     let shapeType = model.getShapeType();
@@ -86,7 +89,7 @@ class MainTopic extends Topic {
   }
 
   /** */
-  disconnect(workspace) {
+  disconnect(workspace: Workspace) {
     super.disconnect(workspace);
     const model = this.getModel();
     let shapeType = model.getShapeType();
@@ -99,7 +102,7 @@ class MainTopic extends Topic {
     innerShape.setVisibility(true);
   }
 
-  _updatePositionOnChangeSize(oldSize, newSize) {
+  _updatePositionOnChangeSize(oldSize: SizeType, newSize: SizeType) {
     const xOffset = Math.round((newSize.width - oldSize.width) / 2);
     const pos = this.getPosition();
     if ($defined(pos)) {
@@ -112,22 +115,20 @@ class MainTopic extends Topic {
     }
   }
 
-  /** */
-  workoutIncomingConnectionPoint(sourcePosition) {
+  workoutIncomingConnectionPoint(sourcePosition: Point) {
     return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
   }
 
-  /** */
-  workoutOutgoingConnectionPoint(targetPosition) {
+  workoutOutgoingConnectionPoint(targetPosition: Point) {
     $assert(targetPosition, 'targetPoint can not be null');
     const pos = this.getPosition();
     const isAtRight = Shape.isAtRight(targetPosition, pos);
     const size = this.getSize();
 
-    let result;
+    let result: Point;
     if (this.getShapeType() === TopicShape.LINE) {
       result = new Point();
-      const groupPosition = this._elem2d.getPosition();
+      const groupPosition = this.get2DElement().getPosition();
       const innerShareSize = this.getInnerShape().getSize();
 
       if (innerShareSize) {
@@ -149,7 +150,7 @@ class MainTopic extends Topic {
         result.y = pos.y + size.height / 2;
       }
     } else {
-      result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
+      result = Shape.calculateRectConnectionPoint(pos, size, isAtRight);
     }
     return result;
   }

packages/mindplot/src/components/NodeGraph.ts

@@ -105,9 +105,9 @@ abstract class NodeGraph {
     return this._size;
   }
 
-  setSize(size) {
-    this._size.width = parseInt(size.width, 10);
-    this._size.height = parseInt(size.height, 10);
+  setSize(size: SizeType, force?: boolean) {
+    this._size.width = size.width;
+    this._size.height = size.height;
   }
 
   getModel(): NodeModel {

packages/mindplot/src/components/ShrinkConnector.ts

@@ -19,12 +19,17 @@ import { Elipse } from '@wisemapping/web2d';
 
 import TopicConfig from './TopicConfig';
 import ActionDispatcher from './ActionDispatcher';
+import Topic from './Topic';
+import IconGroup from './IconGroup';
 
 class ShirinkConnector {
-  constructor(topic) {
+  private _isShrink: boolean;
+  private _ellipse: any;
+  constructor(topic: Topic) {
     this._isShrink = false;
     const ellipse = new Elipse(TopicConfig.INNER_RECT_ATTRIBUTES);
     this._ellipse = ellipse;
+
     ellipse.setFill('rgb(62,118,179)');
 
     ellipse.setSize(TopicConfig.CONNECTOR_WIDTH, TopicConfig.CONNECTOR_WIDTH);
@@ -39,12 +44,12 @@ class ShirinkConnector {
       event.stopPropagation();
     });
 
-    ellipse.addEvent('mousedown', (event) => {
+    ellipse.addEvent('mousedown', (event: Event) => {
       // Avoid node creation ...
       event.stopPropagation();
     });
 
-    ellipse.addEvent('dblclick', (event) => {
+    ellipse.addEvent('dblclick', (event: Event) => {
       // Avoid node creation ...
       event.stopPropagation();
     });
@@ -58,12 +63,11 @@ class ShirinkConnector {
     });
 
     ellipse.setCursor('default');
-    this._fillColor = '#f7f7f7';
     const model = topic.getModel();
     this.changeRender(model.areChildrenShrunken());
   }
 
-  changeRender(isShrink) {
+  changeRender(isShrink: boolean) {
     const elipse = this._ellipse;
     if (isShrink) {
       elipse.setStroke('2', 'solid');
@@ -73,36 +77,35 @@ class ShirinkConnector {
     this._isShrink = isShrink;
   }
 
-  setVisibility(value) {
+  setVisibility(value: boolean): void {
     this._ellipse.setVisibility(value);
   }
 
-  setOpacity(opacity) {
+  setOpacity(opacity: number): void {
     this._ellipse.setOpacity(opacity);
   }
 
-  setFill(color) {
-    this._fillColor = color;
+  setFill(color: string): void {
     this._ellipse.setFill(color);
   }
 
-  setAttribute(name, value) {
+  setAttribute(name: string, value) {
     this._ellipse.setAttribute(name, value);
   }
 
-  addToWorkspace(group) {
+  addToWorkspace(group): void {
     group.append(this._ellipse);
   }
 
-  setPosition(x, y) {
+  setPosition(x: number, y: number): void {
     this._ellipse.setPosition(x, y);
   }
 
-  moveToBack() {
+  moveToBack(): void {
     this._ellipse.moveToBack();
   }
 
-  moveToFront() {
+  moveToFront(): void {
     this._ellipse.moveToFront();
   }
 }

packages/mindplot/src/components/StandaloneActionDispatcher.ts

@@ -134,7 +134,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
       const result = topic.getFontFamily();
       topic.setFontFamily(commandFontFamily, true);
 
-      topic._adjustShapes();
+      topic.adjustShapes();
       return result;
     };
 
@@ -147,7 +147,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
     $assert(topicsIds, 'topicIds can not be null');
     $assert(color, 'color can not be null');
 
-    const commandFunc = (topic, commandColor) => {
+    const commandFunc = (topic: Topic, commandColor: string) => {
       const result = topic.getFontColor();
       topic.setFontColor(commandColor, true);
       return result;

packages/mindplot/src/components/Topic.ts

@@ -17,8 +17,9 @@
  */
 import $ from 'jquery';
 import { $assert, $defined } from '@wisemapping/core-js';
+
 import {
-  Rect, Image, Line, Text, Group,
+  Rect, Image, Line, Text, Group, ElementClass, Point
 } from '@wisemapping/web2d';
 
 import NodeGraph from './NodeGraph';
@@ -34,19 +35,32 @@ import NoteEditor from './widget/NoteEditor';
 import ActionDispatcher from './ActionDispatcher';
 import LinkEditor from './widget/LinkEditor';
 
+
 import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
 import { TopicShape } from './model/INodeModel';
+import NodeModel from './model/NodeModel';
+import Relationship from './Relationship';
+import Workspace from './Workspace';
+import LayoutManager from './layout/LayoutManager';
+import NoteModel from './model/NoteModel';
+import LinkModel from './model/LinkModel';
+import SizeType from './SizeType';
 
 const ICON_SCALING_FACTOR = 1.3;
 
-class Topic extends NodeGraph {
-  /**
-     * @extends mindplot.NodeGraph
-     * @constructs
-     * @param model
-     * @param options
-     */
-  constructor(model, options) {
+abstract class Topic extends NodeGraph {
+  private _innerShape: ElementClass;
+  private _relationships: Relationship[];
+  private _isInWorkspace: boolean;
+  private _children: Topic[];
+  private _parent: Topic | null;
+  private _outerShape: ElementClass;
+  private _text: Text | null;
+  private _iconsGroup: IconGroup;
+  private _connector: any;
+  private _outgoingLine: Line;
+
+  constructor(model: NodeModel, options) {
     super(model, options);
     this._children = [];
     this._parent = null;
@@ -66,15 +80,15 @@ class Topic extends NodeGraph {
     }
   }
 
-  _registerEvents() {
+  protected _registerEvents(): void {
     this.setMouseEventsEnabled(true);
 
     // Prevent click on the topics being propagated ...
-    this.addEvent('click', (event) => {
+    this.addEvent('click', (event: Event) => {
       event.stopPropagation();
     });
     const me = this;
-    this.addEvent('dblclick', (event) => {
+    this.addEvent('dblclick', (event: Event) => {
       me._getTopicEventDispatcher().show(me);
       event.stopPropagation();
     });
@@ -89,11 +103,11 @@ class Topic extends NodeGraph {
   }
 
   /** @return {mindplot.Topic} parent topic */
-  getParent() {
+  getParent(): Topic | null {
     return this._parent;
   }
 
-  _setShapeType(type, updateModel) {
+  protected _setShapeType(type: string, updateModel: boolean) {
     // Remove inner shape figure ...
     const model = this.getModel();
     if ($defined(updateModel) && updateModel) {
@@ -147,7 +161,7 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  _removeInnerShape() {
+  private _removeInnerShape() {
     const group = this.get2DElement();
     const innerShape = this.getInnerShape();
     group.removeChild(innerShape);
@@ -155,7 +169,7 @@ class Topic extends NodeGraph {
     return innerShape;
   }
 
-  getInnerShape() {
+  getInnerShape(): ElementClass {
     if (!$defined(this._innerShape)) {
       // Create inner box.
       this._innerShape = this._buildShape(
@@ -181,7 +195,7 @@ class Topic extends NodeGraph {
     return this._innerShape;
   }
 
-  _buildShape(attributes, shapeType) {
+  _buildShape(attributes, shapeType: string) {
     $assert(attributes, 'attributes can not be null');
     $assert(shapeType, 'shapeType can not be null');
 
@@ -213,7 +227,8 @@ class Topic extends NodeGraph {
         strokeColor: '#495879',
         strokeWidth: 1,
       });
-      result.setSize = function setSize(width, height) {
+
+      result.setSize = function setSize(width: number, height: number) {
         this.size = {
           width,
           height,
@@ -226,7 +241,7 @@ class Topic extends NodeGraph {
         result.setStroke(1, 'solid', stokeColor);
       };
 
-      result.getSize = () => this.size;
+      result.getSize = function getSize() { this.size };
 
       result.setPosition = () => {
         // Overwrite behaviour ...
@@ -246,8 +261,7 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  /** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */
-  setCursor(type) {
+  setCursor(type: string) {
     const innerShape = this.getInnerShape();
     innerShape.setCursor(type);
 
@@ -258,8 +272,7 @@ class Topic extends NodeGraph {
     textShape.setCursor(type);
   }
 
-  /** @return outer shape */
-  getOuterShape() {
+  getOuterShape(): ElementClass {
     if (!$defined(this._outerShape)) {
       const rect = this._buildShape(
         TopicConfig.OUTER_SHAPE_ATTRIBUTES,
@@ -273,7 +286,7 @@ class Topic extends NodeGraph {
     return this._outerShape;
   }
 
-  getTextShape() {
+  getTextShape(): Text {
     if (!$defined(this._text)) {
       this._text = this._buildTextShape(false);
 
@@ -285,7 +298,6 @@ class Topic extends NodeGraph {
     return this._text;
   }
 
-  /** @return icon group */
   getOrBuildIconGroup() {
     if (!$defined(this._iconsGroup)) {
       this._iconsGroup = this._buildIconGroup();
@@ -297,11 +309,11 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  getIconGroup() {
+  getIconGroup(): IconGroup {
     return this._iconsGroup;
   }
 
-  _buildIconGroup() {
+  private _buildIconGroup(): Group {
     const textHeight = this.getTextShape().getFontHeight();
     const iconSize = textHeight * ICON_SCALING_FACTOR;
     const result = new IconGroup(this.getId(), iconSize);
@@ -338,7 +350,7 @@ class Topic extends NodeGraph {
       featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(),
     );
 
-    this._adjustShapes();
+    this.adjustShapes();
     return result;
   }
 
@@ -361,7 +373,7 @@ class Topic extends NodeGraph {
     if ($defined(iconGroup)) {
       iconGroup.removeIconByModel(featureModel);
     }
-    this._adjustShapes();
+    this.adjustShapes();
   }
 
   /** */
@@ -379,7 +391,7 @@ class Topic extends NodeGraph {
     return this._relationships;
   }
 
-  _buildTextShape(readOnly) {
+  _buildTextShape(readOnly): Text {
     const result = new Text();
     const family = this.getFontFamily();
     const size = this.getFontSize();
@@ -410,7 +422,7 @@ class Topic extends NodeGraph {
       const model = this.getModel();
       model.setFontFamily(value);
     }
-    this._adjustShapes(updateModel);
+    this.adjustShapes();
   }
 
   /** */
@@ -422,7 +434,7 @@ class Topic extends NodeGraph {
       const model = this.getModel();
       model.setFontSize(value);
     }
-    this._adjustShapes(updateModel);
+    this.adjustShapes();
   }
 
   /** */
@@ -433,7 +445,7 @@ class Topic extends NodeGraph {
       const model = this.getModel();
       model.setFontStyle(value);
     }
-    this._adjustShapes(updateModel);
+    this.adjustShapes();
   }
 
   /** */
@@ -444,7 +456,7 @@ class Topic extends NodeGraph {
       const model = this.getModel();
       model.setFontWeight(value);
     }
-    this._adjustShapes();
+    this.adjustShapes();
   }
 
   /** */
@@ -531,7 +543,7 @@ class Topic extends NodeGraph {
       this._setText(text, true);
     }
 
-    this._adjustShapes();
+    this.adjustShapes();
   }
 
   /** */
@@ -731,7 +743,7 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  getShrinkConnector() {
+  getShrinkConnector(): ShirinkConnector {
     let result = this._connector;
     if (this._connector == null) {
       this._connector = new ShirinkConnector(this);
@@ -741,41 +753,39 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  /** */
-  handleMouseOver() {
+  handleMouseOver(): void {
     const outerShape = this.getOuterShape();
     outerShape.setOpacity(1);
   }
 
-  /** */
-  handleMouseOut() {
+  handleMouseOut(): void {
     const outerShape = this.getOuterShape();
     if (!this.isOnFocus()) {
       outerShape.setOpacity(0);
     }
   }
 
-  /** */
-  showTextEditor(text) {
+  showTextEditor(text: string) {
     this._getTopicEventDispatcher().show(this, {
       text,
     });
   }
 
-  /** */
-  showNoteEditor() {
+  showNoteEditor(): void {
     const topicId = this.getId();
     const model = this.getModel();
     const editorModel = {
-      getValue() {
+      getValue(): string {
         const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
         let result;
-        if (notes.length > 0) result = notes[0].getText();
+        if (notes.length > 0) {
+          result = (notes[0] as NoteModel).getText();
+        }
 
         return result;
       },
 
-      setValue(value) {
+      setValue(value: string) {
         const dispatcher = ActionDispatcher.getInstance();
         const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
         if (!$defined(value)) {
@@ -802,16 +812,18 @@ class Topic extends NodeGraph {
     const topicId = this.getId();
     const model = this.getModel();
     const editorModel = {
-      getValue() {
+      getValue(): string {
         // @param {mindplot.model.LinkModel[]} links
         const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
         let result;
-        if (links.length > 0) result = links[0].getUrl();
+        if (links.length > 0) {
+          result = (links[0] as LinkModel).getUrl();
+        }
 
         return result;
       },
 
-      setValue(value) {
+      setValue(value: string) {
         const dispatcher = ActionDispatcher.getInstance();
         const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
         if (!$defined(value)) {
@@ -834,19 +846,18 @@ class Topic extends NodeGraph {
     editor.show();
   }
 
-  /** */
   closeEditors() {
     this._getTopicEventDispatcher().close(true);
   }
 
-  _getTopicEventDispatcher() {
+  private _getTopicEventDispatcher() {
     return TopicEventDispatcher.getInstance();
   }
 
   /**
      * Point: references the center of the rect shape.!!!
      */
-  setPosition(point) {
+  setPosition(point: Point) {
     $assert(point, 'position can not be null');
     // allowed param reassign to avoid risks of existing code relying in this side-effect
     // eslint-disable-next-line no-param-reassign
@@ -866,7 +877,7 @@ class Topic extends NodeGraph {
     const cy = point.y - size.height / 2;
 
     // Update visual position.
-    this._elem2d.setPosition(cx, cy);
+    this.get2DElement().setPosition(cx, cy);
 
     // Update connection lines ...
     this._updateConnectionLines();
@@ -876,7 +887,7 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  getOutgoingLine() {
+  getOutgoingLine(): Line {
     return this._outgoingLine;
   }
 
@@ -887,8 +898,7 @@ class Topic extends NodeGraph {
       .map((node) => node.getOutgoingLine());
   }
 
-  /** */
-  getOutgoingConnectedTopic() {
+  getOutgoingConnectedTopic(): Topic {
     let result = null;
     const line = this.getOutgoingLine();
     if ($defined(line)) {
@@ -897,7 +907,7 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  _updateConnectionLines() {
+  private _updateConnectionLines(): void {
     // Update this to parent line ...
     const outgoingLine = this.getOutgoingLine();
     if ($defined(outgoingLine)) {
@@ -913,9 +923,9 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  setBranchVisibility(value) {
-    let current = this;
-    let parent = this;
+  setBranchVisibility(value: boolean): void {
+    let current: Topic = this;
+    let parent: Topic = this;
     while (parent != null && !parent.isCentralTopic()) {
       current = parent;
       parent = current.getParent();
@@ -924,7 +934,7 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  setVisibility(value) {
+  setVisibility(value: boolean): void {
     this._setTopicVisibility(value);
 
     // Hide all children...
@@ -941,7 +951,7 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  moveToBack() {
+  moveToBack(): void {
     // Update relationship lines
     this._relationships.forEach((r) => r.moveToBack());
 
@@ -954,7 +964,7 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  moveToFront() {
+  moveToFront(): void {
     this.get2DElement().moveToFront();
     const connector = this.getShrinkConnector();
     if ($defined(connector)) {
@@ -965,12 +975,12 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  isVisible() {
+  isVisible(): boolean {
     const elem = this.get2DElement();
     return elem.isVisible();
   }
 
-  _setRelationshipLinesVisibility(value) {
+  private _setRelationshipLinesVisibility(value: boolean): void {
     this._relationships.forEach((relationship) => {
       const sourceTopic = relationship.getSourceTopic();
       const targetTopic = relationship.getTargetTopic();
@@ -979,13 +989,13 @@ class Topic extends NodeGraph {
       const sourceParent = sourceTopic.getModel().getParent();
       relationship.setVisibility(
         value
-                    && (targetParent == null || !targetParent.areChildrenShrunken())
-                    && (sourceParent == null || !sourceParent.areChildrenShrunken()),
+        && (targetParent == null || !targetParent.areChildrenShrunken())
+        && (sourceParent == null || !sourceParent.areChildrenShrunken()),
       );
     });
   }
 
-  _setTopicVisibility(value) {
+  private _setTopicVisibility(value: boolean) {
     const elem = this.get2DElement();
     elem.setVisibility(value);
 
@@ -1001,7 +1011,7 @@ class Topic extends NodeGraph {
   }
 
   /** */
-  setOpacity(opacity) {
+  setOpacity(opacity: number): void {
     const elem = this.get2DElement();
     elem.setOpacity(opacity);
 
@@ -1013,7 +1023,7 @@ class Topic extends NodeGraph {
     textShape.setOpacity(opacity);
   }
 
-  _setChildrenVisibility(isVisible) {
+  private _setChildrenVisibility(isVisible: boolean) {
     // Hide all children.
     const children = this.getChildren();
     const model = this.getModel();
@@ -1038,8 +1048,7 @@ class Topic extends NodeGraph {
     }
   }
 
-  /** */
-  setSize(size, force) {
+  setSize(size: SizeType, force: boolean): void {
     $assert(size, 'size can not be null');
     $assert($defined(size.width), 'size seem not to be a valid element');
     const roundedSize = {
@@ -1070,12 +1079,9 @@ class Topic extends NodeGraph {
     }
   }
 
-  _updatePositionOnChangeSize() {
-    $assert(false, 'this method must be overwrited.');
-  }
+  protected abstract _updatePositionOnChangeSize(oldSize: SizeType, roundedSize: SizeType): void;
 
-  /** */
-  disconnect(workspace) {
+  disconnect(workspace: Workspace): void {
     const outgoingLine = this.getOutgoingLine();
     if ($defined(outgoingLine)) {
       $assert(workspace, 'workspace can not be null');
@@ -1119,20 +1125,19 @@ class Topic extends NodeGraph {
     }
   }
 
-  /** */
-  getOrder() {
+  getOrder(): number {
     const model = this.getModel();
     return model.getOrder();
   }
 
   /** */
-  setOrder(value) {
+  setOrder(value: number) {
     const model = this.getModel();
     model.setOrder(value);
   }
 
   /** */
-  connectTo(targetTopic, workspace) {
+  connectTo(targetTopic: Topic, workspace: Workspace) {
     $assert(!this._outgoingLine, 'Could not connect an already connected node');
     $assert(targetTopic !== this, 'Circular connection are not allowed');
     $assert(targetTopic, 'Parent Graph can not be null');
@@ -1187,20 +1192,21 @@ class Topic extends NodeGraph {
     }
   }
 
-  /** */
-  append(child) {
+  abstract updateTopicShape(targetTopic: Topic);
+
+  append(child: Topic) {
     const children = this.getChildren();
     children.push(child);
   }
 
   /** */
-  removeChild(child) {
+  removeChild(child: Topic) {
     const children = this.getChildren();
     this._children = children.filter((c) => c !== child);
   }
 
   /** */
-  getChildren() {
+  getChildren(): Topic[] {
     let result = this._children;
     if (!$defined(result)) {
       this._children = [];
@@ -1209,8 +1215,7 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  /** */
-  removeFromWorkspace(workspace) {
+  removeFromWorkspace(workspace: Workspace) {
     const elem2d = this.get2DElement();
     workspace.removeChild(elem2d);
     const line = this.getOutgoingLine();
@@ -1221,8 +1226,7 @@ class Topic extends NodeGraph {
     EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel());
   }
 
-  /** */
-  addToWorkspace(workspace) {
+  addToWorkspace(workspace: Workspace) {
     const elem = this.get2DElement();
     workspace.append(elem);
     if (!this.isInWorkspace()) {
@@ -1238,16 +1242,16 @@ class Topic extends NodeGraph {
       }
     }
     this._isInWorkspace = true;
-    this._adjustShapes();
+    this.adjustShapes();
   }
 
   /** */
-  isInWorkspace() {
+  isInWorkspace(): boolean {
     return this._isInWorkspace;
   }
 
   /** */
-  createDragNode(layoutManager) {
+  createDragNode(layoutManager: LayoutManager) {
     const result = super.createDragNode(layoutManager);
 
     // Is the node already connected ?
@@ -1263,7 +1267,7 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  _adjustShapes() {
+  adjustShapes(): void {
     if (this._isInWorkspace) {
       const textShape = this.getTextShape();
       if (this.getShapeType() !== TopicShape.IMAGE) {
@@ -1287,7 +1291,7 @@ class Topic extends NodeGraph {
         this.setSize({
           width: topicWith,
           height: topicHeight,
-        });
+        }, false);
 
         // Adjust all topic elements positions ...
         const yPosition = Math.round((topicHeight - textHeight) / 2);
@@ -1296,12 +1300,12 @@ class Topic extends NodeGraph {
       } else {
         // In case of images, the size is fixed ...
         const size = this.getModel().getImageSize();
-        this.setSize(size);
+        this.setSize(size, false);
       }
     }
   }
 
-  _flatten2DElements(topic) {
+  private _flatten2DElements(topic: Topic) {
     let result = [];
 
     const children = topic.getChildren();
@@ -1320,11 +1324,8 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  /**
-     * @param childTopic
-     * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
-     */
-  isChildTopic(childTopic) {
+
+  isChildTopic(childTopic: Topic): boolean {
     let result = this.getId() === childTopic.getId();
     if (!result) {
       const children = this.getChildren();
@@ -1339,7 +1340,6 @@ class Topic extends NodeGraph {
     return result;
   }
 
-  /** @return {Boolean} true if the topic is the central topic of the map */
   isCentralTopic() {
     return this.getModel().getType() === 'CentralTopic';
   }