Add support for new theme

packages/editor/src/components/action-widget/pane/theme-editor/index.tsx

@@ -40,6 +40,7 @@ const ThemeEditor = (props: {
         <FormControlLabel value="classic" control={<Radio />} label="Classic" />
         <FormControlLabel value="prism" control={<Radio />} label="Summer" />
         <FormControlLabel value="dark-prism" control={<Radio />} label="Dark" />
+        <FormControlLabel value="robot" control={<Radio />} label="Robot" />
       </RadioGroup>
     </Box>
   );

packages/mindplot/src/components/ActionDispatcher.ts

@@ -26,9 +26,9 @@ import NodeModel from './model/NodeModel';
 import RelationshipModel from './model/RelationshipModel';
 import Topic from './Topic';
 import PositionType from './PositionType';
-import EventBusType from './EventBusType';
+import LayoutEventBusType from './LayoutEventBusType';
 
-abstract class ActionDispatcher extends EventDispispatcher<EventBusType> {
+abstract class ActionDispatcher extends EventDispispatcher<LayoutEventBusType> {
   private static _instance: ActionDispatcher;
 
   private _commandContext: CommandContext;

packages/mindplot/src/components/CommandContext.ts

@@ -17,7 +17,7 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 import { Designer } from '..';
-import EventBus from './layout/EventBus';
+import LayoutEventBus from './layout/LayoutEventBus';
 import NodeModel from './model/NodeModel';
 import RelationshipModel from './model/RelationshipModel';
 import PositionType from './PositionType';
@@ -105,7 +105,7 @@ class CommandContext {
   moveTopic(topic: Topic, position: PositionType): void {
     $assert(topic, 'topic cannot be null');
     $assert(position, 'position cannot be null');
-    EventBus.instance.fireEvent('topicMoved', {
+    LayoutEventBus.fireEvent('topicMoved', {
       node: topic.getModel(),
       position,
     });

packages/mindplot/src/components/Designer.ts

@@ -40,7 +40,7 @@ import Relationship from './Relationship';
 import TopicEventDispatcher from './TopicEventDispatcher';
 import TopicFactory from './TopicFactory';
 
-import EventBus from './layout/EventBus';
+import LayoutEventBus from './layout/LayoutEventBus';
 import EventBusDispatcher from './layout/EventBusDispatcher';
 
 import LayoutManager from './layout/LayoutManager';
@@ -654,7 +654,7 @@ class Designer extends EventDispispatcher<DesignerEventType> {
       this._canvas.registerEvents();
 
       // Finally, sort the map ...
-      EventBus.instance.fireEvent('forceLayout');
+      LayoutEventBus.fireEvent('forceLayout');
       this.fireEvent('loadSuccess');
     });
   }

packages/mindplot/src/components/DesignerActionRunner.ts

@@ -20,7 +20,7 @@ import ActionDispatcher from './ActionDispatcher';
 import Command from './Command';
 import CommandContext from './CommandContext';
 import DesignerUndoManager from './DesignerUndoManager';
-import EventBus from './layout/EventBus';
+import LayoutEventBus from './layout/LayoutEventBus';
 
 class DesignerActionRunner {
   private _undoManager: DesignerUndoManager;
@@ -42,19 +42,19 @@ class DesignerActionRunner {
     command.execute(this._context);
     this._undoManager.enqueue(command);
     this.fireChangeEvent();
-    EventBus.instance.fireEvent('forceLayout');
+    LayoutEventBus.fireEvent('forceLayout');
   }
 
   undo(): void {
     this._undoManager.execUndo(this._context);
     this.fireChangeEvent();
-    EventBus.instance.fireEvent('forceLayout');
+    LayoutEventBus.fireEvent('forceLayout');
   }
 
   redo(): void {
     this._undoManager.execRedo(this._context);
     this.fireChangeEvent();
-    EventBus.instance.fireEvent('forceLayout');
+    LayoutEventBus.fireEvent('forceLayout');
   }
 
   fireChangeEvent(): void {

packages/mindplot/src/components/LayoutEventBusType.ts

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 
-export type EventBusType =
+export type LayoutEventBusType =
   | 'topicResize'
   | 'topicMoved'
   | 'forceLayout'
@@ -27,4 +27,4 @@ export type EventBusType =
   | 'topicDisconect'
   | 'modelUpdate';
 
-export default EventBusType;
+export default LayoutEventBusType;

packages/mindplot/src/components/MultilineTextEditor.ts

@@ -21,7 +21,7 @@ import $ from 'jquery';
 
 import ActionDispatcher from './ActionDispatcher';
 import EventDispatcher from './EventDispatcher';
-import EventBus from './layout/EventBus';
+import LayoutEventBus from './layout/LayoutEventBus';
 import Topic from './Topic';
 
 type EditorEventType = 'input';
@@ -126,7 +126,7 @@ class EditorComponent extends EventDispatcher<EditorEventType> {
 
   private resize(text?: string): void {
     // Force relayout ...
-    EventBus.instance.fireEvent('forceLayout');
+    LayoutEventBus.fireEvent('forceLayout');
 
     // Adjust position ...
     const textShape = this._topic.getOrBuildTextShape();

packages/mindplot/src/components/StandaloneActionDispatcher.ts

@@ -27,7 +27,7 @@ import DragTopicCommand from './commands/DragTopicCommand';
 import GenericFunctionCommand from './commands/GenericFunctionCommand';
 import MoveControlPointCommand from './commands/MoveControlPointCommand';
 import ChangeFeatureToTopicCommand from './commands/ChangeFeatureToTopicCommand';
-import EventBus from './layout/EventBus';
+import LayoutEventBus from './layout/LayoutEventBus';
 import CommandContext from './CommandContext';
 import NodeModel from './model/NodeModel';
 import RelationshipModel from './model/RelationshipModel';
@@ -84,7 +84,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
 
     const commandFunc = (topic: Topic, pos: PositionType) => {
       const result = topic.getPosition();
-      EventBus.instance.fireEvent('topicMoved', {
+      LayoutEventBus.fireEvent('topicMoved', {
         node: topic.getModel(),
         position: pos,
       });

packages/mindplot/src/components/Topic.ts

@@ -23,7 +23,7 @@ import NodeGraph, { NodeOption } from './NodeGraph';
 import TopicFeatureFactory from './TopicFeature';
 import ConnectionLine, { LineType } from './ConnectionLine';
 import IconGroup from './IconGroup';
-import EventBus from './layout/EventBus';
+import LayoutEventBus from './layout/LayoutEventBus';
 import ShirinkConnector from './ShrinkConnector';
 import ActionDispatcher from './ActionDispatcher';
 
@@ -589,7 +589,7 @@ abstract class Topic extends NodeGraph {
       elem.setVisibility(!value, 250);
     });
 
-    EventBus.instance.fireEvent('childShrinked', model);
+    LayoutEventBus.fireEvent('childShrinked', model);
   }
 
   getShrinkConnector(): ShirinkConnector | null {
@@ -618,10 +618,11 @@ abstract class Topic extends NodeGraph {
     this._getTopicEventDispatcher().show(this, text);
   }
 
-  getNoteValue(): string {
+  getNoteValue(): string | null {
     const model = this.getModel();
     const notes = model.findFeatureByType('note');
-    let result;
+
+    let result: string | null = null;
     if (notes.length > 0) {
       result = (notes[0] as NoteModel).getText();
     }
@@ -694,10 +695,6 @@ abstract class Topic extends NodeGraph {
    */
   setPosition(point: PositionType): void {
     // allowed param reassign to avoid risks of existing code relying in this side-effect
-    point.x = Math.ceil(point.x);
-    point.y = Math.ceil(point.y);
-
-    // Update model's position ...
     const model = this.getModel();
     model.setPosition(point.x, point.y);
 
@@ -900,7 +897,7 @@ abstract class Topic extends NodeGraph {
       this.updatePositionOnChangeSize(oldSize, size);
 
       if (hasSizeChanged) {
-        EventBus.instance.fireEvent('topicResize', {
+        LayoutEventBus.fireEvent('topicResize', {
           node: this.getModel(),
           size,
         });
@@ -936,7 +933,7 @@ abstract class Topic extends NodeGraph {
       }
 
       // Remove from workspace.
-      EventBus.instance.fireEvent('topicDisconect', this.getModel());
+      LayoutEventBus.fireEvent('topicDisconect', this.getModel());
 
       this.redraw(true);
     }
@@ -983,7 +980,7 @@ abstract class Topic extends NodeGraph {
 
     // Fire connection event ...
     if (this._isInWorkspace) {
-      EventBus.instance.fireEvent('topicConnected', {
+      LayoutEventBus.fireEvent('topicConnected', {
         parentNode: targetTopic.getModel(),
         childNode: this.getModel(),
       });
@@ -1024,7 +1021,7 @@ abstract class Topic extends NodeGraph {
       workspace.removeChild(line);
     }
     this._isInWorkspace = false;
-    EventBus.instance.fireEvent('topicRemoved', this.getModel());
+    LayoutEventBus.fireEvent('topicRemoved', this.getModel());
   }
 
   addToWorkspace(workspace: Canvas): void {
@@ -1032,12 +1029,12 @@ abstract class Topic extends NodeGraph {
     workspace.append(elem);
     if (!this._isInWorkspace) {
       if (!this.isCentralTopic()) {
-        EventBus.instance.fireEvent('topicAdded', this.getModel());
+        LayoutEventBus.fireEvent('topicAdded', this.getModel());
       }
 
       const outgoingTopic = this.getOutgoingConnectedTopic();
       if (this.getModel().isConnected() && outgoingTopic) {
-        EventBus.instance.fireEvent('topicConnected', {
+        LayoutEventBus.fireEvent('topicConnected', {
           parentNode: outgoingTopic.getModel(),
           childNode: this.getModel(),
         });

packages/mindplot/src/components/layout/EventBusDispatcher.ts

@@ -18,7 +18,7 @@
 import PositionType from '../PositionType';
 import SizeType from '../SizeType';
 import Topic from '../Topic';
-import EventBus from './EventBus';
+import LayoutEventBus from './LayoutEventBus';
 import LayoutManager from './LayoutManager';
 
 class EventBusDispatcher {
@@ -34,14 +34,14 @@ class EventBusDispatcher {
   }
 
   registerBusEvents() {
-    EventBus.instance.addEvent('topicAdded', this._topicAdded.bind(this));
+    LayoutEventBus.addEvent('topicAdded', this._topicAdded.bind(this));
-    EventBus.instance.addEvent('topicRemoved', this._topicRemoved.bind(this));
+    LayoutEventBus.addEvent('topicRemoved', this._topicRemoved.bind(this));
-    EventBus.instance.addEvent('topicResize', this._topicResizeEvent.bind(this));
+    LayoutEventBus.addEvent('topicResize', this._topicResizeEvent.bind(this));
-    EventBus.instance.addEvent('topicMoved', this._topicMoved.bind(this));
+    LayoutEventBus.addEvent('topicMoved', this._topicMoved.bind(this));
-    EventBus.instance.addEvent('topicDisconect', this._topicDisconect.bind(this));
+    LayoutEventBus.addEvent('topicDisconect', this._topicDisconect.bind(this));
-    EventBus.instance.addEvent('topicConnected', this._topicConnected.bind(this));
+    LayoutEventBus.addEvent('topicConnected', this._topicConnected.bind(this));
-    EventBus.instance.addEvent('childShrinked', this._childShrinked.bind(this));
+    LayoutEventBus.addEvent('childShrinked', this._childShrinked.bind(this));
-    EventBus.instance.addEvent('forceLayout', this._forceLayout.bind(this));
+    LayoutEventBus.addEvent('forceLayout', this._forceLayout.bind(this));
   }
 
   private _topicResizeEvent(args: { node: Topic; size: SizeType }) {
@@ -62,6 +62,9 @@ class EventBusDispatcher {
       args.childNode.getId(),
       args.childNode.getOrder()!, // @todo: This can be a issue ...
     );
+
+    // Review this for of relayout, new node is not positioned properly with small gap. The problem seems to be related to some min
+    // this.getLayoutManager().layout(true);
   }
 
   getLayoutManager(): LayoutManager {

packages/mindplot/src/components/layout/LayoutEventBus.ts

@@ -16,24 +16,20 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import EventDispispatcher from '../EventDispatcher';
+import EventDispatcher from '../EventDispatcher';
-import { EventBusType } from '../EventBusType';
+import { LayoutEventBusType } from '../LayoutEventBusType';
 
-class EventBus extends EventDispispatcher<EventBusType> {
+class LayoutEventBus {
-  // eslint-disable-next-line no-use-before-define
+  private static _instance: EventDispatcher<LayoutEventBusType> =
-  static _instance: EventBus = new EventBus();
+    new EventDispatcher<LayoutEventBusType>();
 
-  static get instance(): EventBus {
+  static fireEvent(type: LayoutEventBusType, arg?: any): void {
-    return this._instance;
+    return LayoutEventBus._instance.fireEvent(type, arg);
   }
 
-  fireEvent(type: EventBusType, arg?: any): void {
+  static addEvent(type: LayoutEventBusType, fn: (arg?: any) => void, internal?: boolean): void {
-    return super.fireEvent(type, arg);
+    return LayoutEventBus._instance.addEvent(type, fn, internal);
-  }
-
-  addEvent(type: EventBusType, fn: (arg?: any) => void, internal?: boolean): void {
-    return super.addEvent(type, fn, internal);
   }
 }
 
-export default EventBus;
+export default LayoutEventBus;

packages/mindplot/src/components/layout/LayoutEventType.ts

@@ -15,6 +15,6 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-type LayoutEventType = 'change' | 'forceLayout';
+type LayoutEventType = 'change';
 
 export default LayoutEventType;

packages/mindplot/src/components/layout/LayoutManager.ts

@@ -83,10 +83,6 @@ class LayoutManager extends EventDispispatcher<LayoutEventType> {
   }
 
   connectNode(parentId: number, childId: number, order: number) {
-    $assert($defined(parentId), 'parentId cannot be null');
-    $assert($defined(childId), 'childId cannot be null');
-    $assert($defined(order), 'order cannot be null');
-
     this._layout.connectNode(parentId, childId, order);
 
     return this;

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

@@ -15,6 +15,6 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-type ThemeType = 'classic' | 'prism' | 'dark-prism';
+type ThemeType = 'classic' | 'prism' | 'dark-prism' | 'robot';
 
 export default ThemeType;

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

@@ -95,7 +95,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
       parentTopic.setAttribute('central', 'true');
     } else {
       const pos = topic.getPosition();
-      parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
+      parentTopic.setAttribute('position', `${Math.ceil(pos.x)},${Math.ceil(pos.y)}`);
 
       const order = topic.getOrder();
       if (typeof order === 'number' && Number.isFinite(order)) {

packages/mindplot/src/components/theme/RobotTheme.ts

@@ -0,0 +1,164 @@
+/*
+ *    Copyright [2011] [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 { LineType } from '../ConnectionLine';
+import { FontStyleType } from '../FontStyleType';
+import { FontWeightType } from '../FontWeightType';
+import { TopicShapeType } from '../model/INodeModel';
+import Topic from '../Topic';
+import DefaultTheme, { TopicStyleType } from './DefaultTheme';
+import { TopicType } from './Theme';
+
+const defaultStyles = new Map<TopicType, TopicStyleType>([
+  [
+    'CentralTopic',
+    {
+      msgKey: 'CENTRAL_TOPIC',
+      borderColor: '#363C56',
+      backgroundColor: '#363C56',
+      fontFamily: 'Brush Script MT',
+      fontSize: 10,
+      fontStyle: 'normal' as FontStyleType,
+      fontWeight: 'bold' as FontWeightType,
+      fontColor: '#ffffff',
+      connectionStyle: LineType.POLYLINE_MIDDLE,
+      connectionColor: '#345780',
+      shapeType: 'rectangle' as TopicShapeType,
+      outerBackgroundColor: '#F4B82D',
+      outerBorderColor: '#F4B82D',
+    },
+  ],
+  [
+    'MainTopic',
+    {
+      msgKey: 'MAIN_TOPIC',
+      borderColor: ['#698396'],
+      backgroundColor: ['#698396'],
+      connectionColor: ['#698396'],
+      fontFamily: 'Brush Script MT',
+      fontSize: 9,
+      fontStyle: 'normal' as FontStyleType,
+      fontWeight: 'normal' as FontWeightType,
+      fontColor: '#FFFFFF',
+      connectionStyle: LineType.POLYLINE_MIDDLE,
+      shapeType: 'rectangle' as TopicShapeType,
+      outerBackgroundColor: '#F4B82D',
+      outerBorderColor: '#F4B82D',
+    },
+  ],
+  [
+    'SubTopic',
+    {
+      msgKey: 'SUB_TOPIC',
+      borderColor: '#698396',
+      backgroundColor: '#698396',
+      fontFamily: 'Brush Script MT',
+      fontSize: 8,
+      fontStyle: 'normal' as FontStyleType,
+      fontWeight: 'normal' as FontWeightType,
+      fontColor: '#FFFFFF',
+      connectionStyle: LineType.POLYLINE_MIDDLE,
+      connectionColor: '#345780',
+      shapeType: 'rectangle' as TopicShapeType,
+      outerBackgroundColor: '#F4B82D',
+      outerBorderColor: '#F4B82D',
+    },
+  ],
+  [
+    'IsolatedTopic',
+    {
+      msgKey: 'ISOLATED_TOPIC',
+      borderColor: '#023BB9',
+      backgroundColor: '#96e3ff',
+      fontFamily: 'Brush Script MT',
+      fontSize: 8,
+      fontStyle: 'normal' as FontStyleType,
+      fontWeight: 'normal' as FontWeightType,
+      fontColor: '#000000',
+      connectionStyle: LineType.POLYLINE_MIDDLE,
+      connectionColor: '#345780',
+      shapeType: 'line' as TopicShapeType,
+      outerBackgroundColor: '#F4B82D',
+      outerBorderColor: '#F4B82D',
+    },
+  ],
+]);
+
+class DarkPrismTheme extends DefaultTheme {
+  constructor() {
+    super(defaultStyles);
+  }
+
+  getCanvasCssStyle(): string {
+    return `position: relative;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      overflow: hidden;
+      opacity: 1;
+      background-color: #FFFFFF;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;`;
+  }
+
+  getConnectionColor(topic: Topic): string {
+    let result: string | null = null;
+
+    // Color of the node is the connection is the color of the parent ...
+    const parent = topic.getParent();
+    if (parent && !parent.isCentralTopic()) {
+      result = this.resolve('connectionColor', parent, false) as string;
+    }
+
+    if (!result) {
+      let colors: string[] = [];
+      colors = colors.concat(this.resolve('connectionColor', topic) as string[] | string);
+
+      // if the element is an array, use topic order to decide color ..
+      let order = topic.getOrder();
+      order = order || 0;
+
+      const index = order % colors.length;
+      result = colors[index];
+    }
+    return result!;
+  }
+
+  getBorderColor(topic: Topic): string {
+    const model = topic.getModel();
+    let result = model.getBorderColor();
+
+    // If border color has not been defined, use the connection color for the border ...
+    if (!result) {
+      let colors: string[] = [];
+      colors = colors.concat(this.resolve('borderColor', topic) as string[] | string);
+
+      // if the element is an array, use topic order to decide color ..
+      let order = topic.getOrder();
+      order = order || 0;
+
+      const index = order % colors.length;
+      result = colors[index];
+    }
+    return result;
+  }
+}
+
+export default DarkPrismTheme;

packages/mindplot/src/components/theme/ThemeFactory.ts

@@ -3,6 +3,7 @@ import ThemeType from '../model/ThemeType';
 import ClassicTheme from './ClassicTheme';
 import DarkPrismTheme from './DarkPrismTheme';
 import PrismTheme from './PrismTheme';
+import RobotTheme from './RobotTheme';
 import Theme from './Theme';
 
 class ThemeFactory {
@@ -12,6 +13,8 @@ class ThemeFactory {
 
   private static classicTheme = new ClassicTheme();
 
+  private static robotTheme = new RobotTheme();
+
   static createById(id: ThemeType): Theme {
     let result: Theme;
     switch (id) {
@@ -24,6 +27,9 @@ class ThemeFactory {
       case 'prism':
         result = ThemeFactory.prismTheme;
         break;
+      case 'robot':
+        result = ThemeFactory.robotTheme;
+        break;
       default: {
         const exhaustiveCheck: never = id;
         throw new Error(exhaustiveCheck);

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

@@ -28,3 +28,8 @@ export const DarkPrism = Template.bind({});
 DarkPrism.args = {
   theme: 'dark-prism',
 };
+
+export const robot = Template.bind({});
+DarkPrism.args = {
+  theme: 'robot',
+};

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

@@ -11,7 +11,8 @@ import MainTopic from '../../../src/components/MainTopic';
 import EventBusDispatcher from '../../../src/components/layout/EventBusDispatcher';
 import LayoutManager from '../../../src/components/layout/LayoutManager';
 import ChangeEvent from '../../../src/components/layout/ChangeEvent';
-import EventBus from '../../../src/components/layout/EventBus';
+import LayoutEventBus from '../../../src/components/layout/LayoutEventBus';
+import { $assert } from '@wisemapping/core-js';
 
 const registerRefreshHook = (topics: Topic[]) => {
   // Trigger a redraw after the node is added ...
@@ -22,7 +23,7 @@ const registerRefreshHook = (topics: Topic[]) => {
   globalThis.observer = new MutationObserver(() => {
     // Relayout...
     topics.forEach((t) => t.redraw());
-    EventBus.instance.fireEvent('forceLayout');
+    LayoutEventBus.fireEvent('forceLayout');
   });
   globalThis.observer.observe(document.getElementById('root')!, { childList: true });
 };
@@ -56,20 +57,23 @@ const createConnection = ({ theme = undefined, readOnly = true }: TopicArgs) =>
   // Add Children ...
   const child1 = new NodeModel('MainTopic', mindmap);
   child1.setOrder(0);
-  child1.setText('This is child one !\nwith other line');
+  child1.setText('Child1: This is child one !\nwith other line');
   child1.setPosition(100, 100);
 
   const child2 = new NodeModel('MainTopic', mindmap);
   child2.setOrder(1);
   child2.setPosition(100, -100);
+  child2.setText('Child2');
 
   const child3 = new NodeModel('MainTopic', mindmap);
-  child3.setOrder(0);
+  child3.setOrder(2);
   child3.setPosition(-100, 100);
+  child3.setText('Child3');
 
   const child4 = new NodeModel('MainTopic', mindmap);
-  child4.setOrder(1);
+  child4.setOrder(3);
   child4.setPosition(-100, -100);
+  child3.setText('Child4');
 
   const subchild1 = new NodeModel('MainTopic', mindmap);
   subchild1.setOrder(0);
@@ -93,6 +97,7 @@ const createConnection = ({ theme = undefined, readOnly = true }: TopicArgs) =>
   const child4Topic = new MainTopic(child4, { readOnly });
   const subchild1Topic = new MainTopic(subchild1, { readOnly });
   const subchild2Topic = new MainTopic(subchild2, { readOnly });
+
   const topics = [
     child1Topic,
     child2Topic,
@@ -108,24 +113,37 @@ const createConnection = ({ theme = undefined, readOnly = true }: TopicArgs) =>
   const size = { width: 25, height: 25 };
   const layoutManager = new LayoutManager(mindmap.getCentralTopic().getId(), size);
   dispatcher.setLayoutManager(layoutManager);
+
   layoutManager.addEvent('change', (event: ChangeEvent) => {
     const id = event.getId();
-    const topic = topics.filter((t) => t.getModel().getId() === id)[0];
+    const ids = topics.filter((t) => t.getModel().getId() === id);
+    $assert(ids.length === 1, `Unexpeted number of elements ${String(ids)} - ${id}`);
+    const topic = ids[0];
 
     topic.setPosition(event.getPosition());
     topic.setOrder(event.getOrder());
   });
 
-  // Add to canvas ...
-  topics.forEach((t) => canvas.append(t));
-
   // Connect nodes ...
+  canvas.append(centralTopic);
+
   child1Topic.connectTo(centralTopic, canvas);
+  canvas.append(child1Topic);
+
   child2Topic.connectTo(centralTopic, canvas);
+  canvas.append(child2Topic);
+
   child3Topic.connectTo(centralTopic, canvas);
+  canvas.append(child3Topic);
+
   child4Topic.connectTo(centralTopic, canvas);
+  canvas.append(child4Topic);
+
   subchild1Topic.connectTo(child1Topic, canvas);
+  canvas.append(subchild1Topic);
+
   subchild2Topic.connectTo(child1Topic, canvas);
+  canvas.append(subchild2Topic);
 
   // Register refresh hook ..
   registerRefreshHook(topics);