Add more tests on mindplot/playground and fix.

packages/mindplot/.eslintrc.json

@@ -10,8 +10,6 @@
     "globals":{
         "Class": "readonly",
         "$": "readonly",
-        "$assert": "readonly",
-        "$defined": "readonly",
         "$msg": "readonly",
         "_": "readonly"
     },
@@ -19,6 +17,7 @@
     "rules": {
         "no-underscore-dangle": "off",
         "no-plusplus": "off",
+        "class-methods-use-this": "off",
         "import/no-extraneous-dependencies": ["error", {"devDependencies": ["!cypress/**/*.js"]}]
     },
     "settings": {

packages/mindplot/package.json

@@ -33,7 +33,8 @@
         "@wisemapping/core-js": "^0.0.1",
         "@wisemapping/web2d": "^0.0.1",
         "jquery": "^3.6.0",
-        "mootools": "1.4.5"
+        "mootools": "1.4.5",
+        "underscore": "^1.13.1"
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",
@@ -53,6 +54,8 @@
         "eslint-plugin-import": "^2.24.2",
         "eslint-plugin-only-warn": "^1.0.3",
         "html-webpack-plugin": "^5.3.2",
+        "less": "^4.1.2",
+        "less-loader": "^10.2.0",
         "nodemon": "^2.0.12",
         "start-server-and-test": "^1.14.0",
         "webpack": "^5.44.0",

packages/mindplot/src/components/IconGroup.js

@@ -17,11 +17,12 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 import * as web2d from '@wisemapping/web2d';
+import IconGroupRemoveTip from './IconGroupRemoveTip';
 
 import Icon from './Icon';
 
-const IconGroup = new Class(
+class IconGroup {
-  /** @lends IconGroup */ {
+  /** @lends IconGroup */
   /**
          * @constructs
          * @param topicId
@@ -29,7 +30,7 @@ const IconGroup = new Class(
          * @throws will throw an error if topicId is null or undefined
          * @throws will throw an error if iconSize is null or undefined
          */
-    initialize(topicId, iconSize) {
+  constructor(topicId, iconSize) {
     $assert($defined(topicId), 'topicId can not be null');
     $assert($defined(iconSize), 'iconSize can not be null');
 
@@ -46,33 +47,33 @@ const IconGroup = new Class(
     this.seIconSize(iconSize, iconSize);
 
     this._registerListeners();
-    },
+  }
 
   /** */
   setPosition(x, y) {
     this._group.setPosition(x, y);
-    },
+  }
 
   /** */
   getPosition() {
     return this._group.getPosition();
-    },
+  }
 
   /** */
   getNativeElement() {
     return this._group;
-    },
+  }
 
   /** */
   getSize() {
     return this._group.getSize();
-    },
+  }
 
   /** */
   seIconSize(width, height) {
     this._iconSize = { width, height };
     this._resize(this._icons.length);
-    },
+  }
 
   /**
          * @param icon the icon to be added to the icon group
@@ -96,7 +97,7 @@ const IconGroup = new Class(
     if (remove) {
       this._removeTip.decorate(this._topicId, icon);
     }
-    },
+  }
 
   _findIconFromModel(iconModel) {
     let result = null;
@@ -114,7 +115,7 @@ const IconGroup = new Class(
     }
 
     return result;
-    },
+  }
 
   /** */
   removeIconByModel(featureModel) {
@@ -122,7 +123,7 @@ const IconGroup = new Class(
 
     const icon = this._findIconFromModel(featureModel);
     this._removeIcon(icon);
-    },
+  }
 
   _removeIcon(icon) {
     $assert(icon, 'icon can not be null');
@@ -138,12 +139,12 @@ const IconGroup = new Class(
     this._icons.forEach((elem, i) => {
       me._positionIcon(elem, i);
     });
-    },
+  }
 
   /** */
   moveToFront() {
     this._group.moveToFront();
-    },
+  }
 
   _registerListeners() {
     this._group.addEvent('click', (event) => {
@@ -154,24 +155,24 @@ const IconGroup = new Class(
     this._group.addEvent('dblclick', (event) => {
       event.stopPropagation();
     });
-    },
+  }
 
   _resize(iconsLength) {
     this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
 
     const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
     this._group.setCoordSize(iconsLength * iconSize, iconSize);
-    },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   _positionIcon(icon, order) {
     const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
     icon.getImage().setPosition(
       iconSize * order + IconGroup.ICON_PADDING,
       IconGroup.ICON_PADDING,
     );
-    },
+  }
-  },
+}
-);
 
 /**
  * @constant
@@ -180,167 +181,6 @@ const IconGroup = new Class(
  */
 IconGroup.ICON_PADDING = 5;
 
-IconGroup.RemoveTip = new Class(
+IconGroup.RemoveTip = IconGroupRemoveTip;
-  /** @lends IconGroup.RemoveTip */ {
-    /**
-         * @classdesc inner class of IconGroup
-         * @constructs
-         * @param container
-         */
-    initialize(container) {
-      $assert(container, 'group can not be null');
-      this._fadeElem = container;
-    },
-
-    /**
-         * @param topicId
-         * @param icon
-         * @throws will throw an error if icon is null or undefined
-         */
-    show(topicId, icon) {
-      $assert(icon, 'icon can not be null');
-
-      // Nothing to do ...
-      if (this._activeIcon != icon) {
-        // If there is an active icon, close it first ...
-        if (this._activeIcon) {
-          this.close(0);
-        }
-
-        // Now, let move the position the icon...
-        const pos = icon.getPosition();
-
-        // Register events ...
-        const widget = this._buildWeb2d();
-        widget.addEvent('click', () => {
-          icon.remove();
-        });
-
-        const me = this;
-
-        widget.addEvent('mouseover', () => {
-          me.show(topicId, icon);
-        });
-
-        widget.addEvent('mouseout', () => {
-          me.hide();
-        });
-
-        widget.setPosition(pos.x + 80, pos.y - 50);
-        this._fadeElem.append(widget);
-
-        // Setup current element ...
-        this._activeIcon = icon;
-        this._widget = widget;
-      } else {
-        clearTimeout(this._closeTimeoutId);
-      }
-    },
-
-    /** */
-    hide() {
-      this.close(200);
-    },
-
-    /**
-         * @param delay
-         */
-    close(delay) {
-      // This is not ok, trying to close the same dialog twice ?
-      if (this._closeTimeoutId) {
-        clearTimeout(this._closeTimeoutId);
-      }
-
-      const me = this;
-      if (this._activeIcon) {
-        const widget = this._widget;
-        const close = function () {
-          me._activeIcon = null;
-          me._fadeElem.removeChild(widget);
-          me._widget = null;
-          me._closeTimeoutId = null;
-        };
-
-        if (!$defined(delay) || delay == 0) {
-          close();
-        } else {
-          this._closeTimeoutId = close.delay(delay);
-        }
-      }
-    },
-
-    _buildWeb2d() {
-      const result = new web2d.Group({
-        width: 10,
-        height: 10,
-        x: 0,
-        y: 0,
-        coordSizeWidth: 10,
-        coordSizeHeight: 10,
-      });
-
-      const outerRect = new web2d.Rect(0, {
-        x: 0,
-        y: 0,
-        width: 10,
-        height: 10,
-        stroke: '0',
-        fillColor: 'black',
-      });
-      result.append(outerRect);
-      outerRect.setCursor('pointer');
-
-      const innerRect = new web2d.Rect(0, {
-        x: 1,
-        y: 1,
-        width: 8,
-        height: 8,
-        stroke: '1 solid white',
-        fillColor: 'gray',
-      });
-      result.append(innerRect);
-
-      const line = new web2d.Line({ stroke: '1 solid white' });
-      line.setFrom(1, 1);
-      line.setTo(9, 9);
-      result.append(line);
-
-      const line2 = new web2d.Line({ stroke: '1 solid white' });
-      line2.setFrom(1, 9);
-      line2.setTo(9, 1);
-      result.append(line2);
-
-      // Some events ...
-      result.addEvent('mouseover', () => {
-        innerRect.setFill('#CC0033');
-      });
-      result.addEvent('mouseout', () => {
-        innerRect.setFill('gray');
-      });
-
-      result.setSize(50, 50);
-      return result;
-    },
-
-    /**
-         * @param topicId
-         * @param icon
-         */
-    decorate(topicId, icon) {
-      const me = this;
-
-      if (!icon.__remove) {
-        icon.addEvent('mouseover', () => {
-          me.show(topicId, icon);
-        });
-
-        icon.addEvent('mouseout', () => {
-          me.hide();
-        });
-        icon.__remove = true;
-      }
-    },
-  },
-);
 
 export default IconGroup;

packages/mindplot/src/components/IconGroupRemoveTip.js

@@ -0,0 +1,165 @@
+import * as web2d from '@wisemapping/web2d';
+import { $assert, $defined } from '@wisemapping/core-js';
+
+export default class RemoveTip {
+  /** @lends IconGroup.RemoveTip */
+  /**
+     * @classdesc inner class of IconGroup
+     * @constructs
+     * @param container
+     */
+  constructor(container) {
+    $assert(container, 'group can not be null');
+    this._fadeElem = container;
+  }
+
+  /**
+     * @param topicId
+     * @param icon
+     * @throws will throw an error if icon is null or undefined
+     */
+  show(topicId, icon) {
+    $assert(icon, 'icon can not be null');
+
+    // Nothing to do ...
+    if (this._activeIcon != icon) {
+      // If there is an active icon, close it first ...
+      if (this._activeIcon) {
+        this.close(0);
+      }
+
+      // Now, let move the position the icon...
+      const pos = icon.getPosition();
+
+      // Register events ...
+      const widget = this._buildWeb2d();
+      widget.addEvent('click', () => {
+        icon.remove();
+      });
+
+      const me = this;
+
+      widget.addEvent('mouseover', () => {
+        me.show(topicId, icon);
+      });
+
+      widget.addEvent('mouseout', () => {
+        me.hide();
+      });
+
+      widget.setPosition(pos.x + 80, pos.y - 50);
+      this._fadeElem.append(widget);
+
+      // Setup current element ...
+      this._activeIcon = icon;
+      this._widget = widget;
+    } else {
+      clearTimeout(this._closeTimeoutId);
+    }
+  }
+
+  /** */
+  hide() {
+    this.close(200);
+  }
+
+  /**
+     * @param delay
+     */
+  close(delay) {
+    // This is not ok, trying to close the same dialog twice ?
+    if (this._closeTimeoutId) {
+      clearTimeout(this._closeTimeoutId);
+    }
+
+    const me = this;
+    if (this._activeIcon) {
+      const widget = this._widget;
+      const close = function close() {
+        me._activeIcon = null;
+        me._fadeElem.removeChild(widget);
+        me._widget = null;
+        me._closeTimeoutId = null;
+      };
+
+      if (!$defined(delay) || delay == 0) {
+        close();
+      } else {
+        this._closeTimeoutId = close.delay(delay);
+      }
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _buildWeb2d() {
+    const result = new web2d.Group({
+      width: 10,
+      height: 10,
+      x: 0,
+      y: 0,
+      coordSizeWidth: 10,
+      coordSizeHeight: 10,
+    });
+
+    const outerRect = new web2d.Rect(0, {
+      x: 0,
+      y: 0,
+      width: 10,
+      height: 10,
+      stroke: '0',
+      fillColor: 'black',
+    });
+    result.append(outerRect);
+    outerRect.setCursor('pointer');
+
+    const innerRect = new web2d.Rect(0, {
+      x: 1,
+      y: 1,
+      width: 8,
+      height: 8,
+      stroke: '1 solid white',
+      fillColor: 'gray',
+    });
+    result.append(innerRect);
+
+    const line = new web2d.Line({ stroke: '1 solid white' });
+    line.setFrom(1, 1);
+    line.setTo(9, 9);
+    result.append(line);
+
+    const line2 = new web2d.Line({ stroke: '1 solid white' });
+    line2.setFrom(1, 9);
+    line2.setTo(9, 1);
+    result.append(line2);
+
+    // Some events ...
+    result.addEvent('mouseover', () => {
+      innerRect.setFill('#CC0033');
+    });
+    result.addEvent('mouseout', () => {
+      innerRect.setFill('gray');
+    });
+
+    result.setSize(50, 50);
+    return result;
+  }
+
+  /**
+     * @param topicId
+     * @param icon
+     */
+  decorate(topicId, icon) {
+    const me = this;
+
+    if (!icon.__remove) {
+      icon.addEvent('mouseover', () => {
+        me.show(topicId, icon);
+      });
+
+      icon.addEvent('mouseout', () => {
+        me.hide();
+      });
+      icon.__remove = true;
+    }
+  }
+}

packages/mindplot/src/components/MultilineTextEditor.js

@@ -16,10 +16,10 @@
  *   limitations under the License.
  */
 import { $defined } from '@wisemapping/core-js';
-import Events from './Events';
-import ActionDispatcher from './ActionDispatcher';
 import $ from 'jquery';
 import initHotKeyPluggin from '@libraries/jquery.hotkeys';
+import Events from './Events';
+import ActionDispatcher from './ActionDispatcher';
 
 initHotKeyPluggin($);
 
@@ -56,7 +56,7 @@ class MultilineTextEditor extends Events {
   _registerEvents(containerElem) {
     const textareaElem = this._getTextareaElem();
     const me = this;
-    textareaElem.on('keydown', function keydown (event) {
+    textareaElem.on('keydown', function keydown(event) {
       switch (jQuery.hotkeys.specialKeys[event.keyCode]) {
         case 'esc':
           me.close(false);

packages/mindplot/src/components/layout/AbstractBasicSorter.js

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 /*
  *    Copyright [2015] [wisemapping]
  *
@@ -21,9 +22,8 @@ import ChildrenSorterStrategy from './ChildrenSorterStrategy';
  * @class
  * @extends mindplot.layout.ChildrenSorterStrategy
  */
-const AbstractBasicSorter = new Class(
+class AbstractBasicSorter extends ChildrenSorterStrategy {
-  /** @lends AbstractBasicSorter */ {
+  /** @lends AbstractBasicSorter */
-    Extends: ChildrenSorterStrategy,
 
   /**
          * @param {} treeSet
@@ -34,11 +34,11 @@ const AbstractBasicSorter = new Class(
     const result = {};
     this._computeChildrenHeight(treeSet, node, result);
     return result;
-    },
+  }
 
   _getVerticalPadding() {
     return AbstractBasicSorter.INTERNODE_VERTICAL_PADDING;
-    },
+  }
 
   _computeChildrenHeight(treeSet, node, heightCache) {
     const height = node.getSize().height + this._getVerticalPadding() * 2; // 2* Top and down padding;
@@ -62,20 +62,19 @@ const AbstractBasicSorter = new Class(
     }
 
     return result;
-    },
+  }
 
   _getSortedChildren(treeSet, node) {
     const result = treeSet.getChildren(node);
     result.sort((a, b) => a.getOrder() - b.getOrder());
     return result;
-    },
+  }
 
   _getRelativeDirection(reference, position) {
     const offset = position.x - reference.x;
     return offset >= 0 ? 1 : -1;
-    },
+  }
-  },
+}
-);
 
 /**
  * @constant

packages/mindplot/src/components/layout/BalancedSorter.js

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 /*
  *    Copyright [2015] [wisemapping]
  *
@@ -18,15 +19,12 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import AbstractBasicSorter from './AbstractBasicSorter';
 
-const BalancedSorter = new Class(
+class BalancedSorter extends AbstractBasicSorter {
-  /** @lends BalancedSorter */ {
+  /** @lends BalancedSorter */
-    Extends: AbstractBasicSorter,
   /**
          * @constructs
          * @extends mindplot.layout.AbstractBasicSorter
          */
-    initialize() { },
-
   /**
          * @param {} graph
          * @param {} parent
@@ -150,7 +148,7 @@ const BalancedSorter = new Class(
     }
 
     return result;
-    },
+  }
 
   /**
          * @param {} treeSet
@@ -181,7 +179,7 @@ const BalancedSorter = new Class(
 
     const newOrder = order > max + 1 ? max + 2 : order;
     child.setOrder(newOrder);
-    },
+  }
 
   /**
          * @param {} treeSet
@@ -198,7 +196,7 @@ const BalancedSorter = new Class(
       }
     });
     node.setOrder(node.getOrder() % 2 == 0 ? 0 : 1);
-    },
+  }
 
   /**
          * @param {} treeSet
@@ -263,7 +261,7 @@ const BalancedSorter = new Class(
       result[heights[i].id] = { x: xOffset, y: yOffset };
     }
     return result;
-    },
+  }
 
   /**
          * @param {} treeSet
@@ -286,7 +284,7 @@ const BalancedSorter = new Class(
         },Node:${children[i].getId()}`,
       );
     }
-    },
+  }
 
   /**
          * @param {} treeSet
@@ -295,24 +293,23 @@ const BalancedSorter = new Class(
          */
   getChildDirection(treeSet, child) {
     return child.getOrder() % 2 == 0 ? 1 : -1;
-    },
+  }
 
   /**
          * @return {String} the print name of this class
          */
   toString() {
     return 'Balanced Sorter';
-    },
+  }
 
   _getChildrenForOrder(parent, graph, order) {
     return this._getSortedChildren(graph, parent).filter((child) => child.getOrder() % 2 == order % 2);
-    },
+  }
 
   _getVerticalPadding() {
     return BalancedSorter.INTERNODE_VERTICAL_PADDING;
-    },
+  }
-  },
+}
-);
 
 /**
  * @constant

packages/mindplot/src/components/layout/ChildrenSorterStrategy.js

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 /*
  *    Copyright [2015] [wisemapping]
  *
@@ -16,54 +17,49 @@
  *   limitations under the License.
  */
 
-const ChildrenSorterStrategy = new Class(/** @lends ChildrenSorterStrategy */{
+class ChildrenSorterStrategy {/** @lends ChildrenSorterStrategy */
   /**
      * @constructs
      */
-  initialize() {
-
-  },
-
   /** @abstract */
   computeChildrenIdByHeights(treeSet, node) {
-    throw 'Method must be implemented';
+    throw new Error('Method must be implemented');
-  },
+  }
 
   /** @abstract */
   computeOffsets(treeSet, node) {
-    throw 'Method must be implemented';
+    throw new Error('Method must be implemented');
-  },
+  }
 
   /** @abstract */
   insert(treeSet, parent, child, order) {
-    throw 'Method must be implemented';
+    throw new Error('Method must be implemented');
-  },
+  }
 
   /** @abstract */
   detach(treeSet, node) {
-    throw 'Method must be implemented';
+    throw new Error('Method must be implemented');
-  },
+  }
 
   /** @abstract */
   predict(treeSet, parent, node, position, free) {
-    throw 'Method must be implemented';
+    throw new Error('Method must be implemented');
-  },
+  }
 
   /** @abstract */
   verify(treeSet, node) {
-    throw 'Method must be implemented';
+    throw new Error('Method must be implemented');
-  },
+  }
 
   /** @abstract */
   getChildDirection(treeSet, node) {
-    throw 'Method must be implemented';
+    throw new Error('Method must be implemented');
-  },
+  }
 
   /** @abstract */
   toString() {
-    throw 'Method must be implemented: print name';
+    throw new Error('Method must be implemented: print name');
-  },
+  }
-
+}
-});
 
 export default ChildrenSorterStrategy;

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

@@ -17,20 +17,20 @@
  */
 import EventBus from './EventBus';
 
-const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{
+class EventBusDispatcher {/** @lends EventBusDispatcher */
   /**
      * @constructs
      */
-  initialize() {
+  constructor() {
     this.registerBusEvents();
-  },
+  }
 
   /**
      * @param {mindplot.layout.LayoutManager} layoutManager
      */
   setLayoutManager(layoutManager) {
     this._layoutManager = layoutManager;
-  },
+  }
 
   /**
      * register bus events
@@ -44,27 +44,27 @@ const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{
     EventBus.instance.addEvent(EventBus.events.NodeConnectEvent, this._nodeConnectEvent.bind(this));
     EventBus.instance.addEvent(EventBus.events.NodeShrinkEvent, this._nodeShrinkEvent.bind(this));
     EventBus.instance.addEvent(EventBus.events.DoLayout, this._doLayout.bind(this));
-  },
+  }
 
   _nodeResizeEvent(args) {
     this._layoutManager.updateNodeSize(args.node.getId(), args.size);
-  },
+  }
 
   _nodeMoveEvent(args) {
     this._layoutManager.moveNode(args.node.getId(), args.position);
-  },
+  }
 
   _nodeDisconnectEvent(node) {
     this._layoutManager.disconnectNode(node.getId());
-  },
+  }
 
   _nodeConnectEvent(args) {
     this._layoutManager.connectNode(args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder());
-  },
+  }
 
   _nodeShrinkEvent(node) {
     this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
-  },
+  }
 
   _nodeAdded(node) {
     // Central topic must not be added twice ...
@@ -72,11 +72,11 @@ const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{
       this._layoutManager.addNode(node.getId(), { width: 10, height: 10 }, node.getPosition());
       this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
     }
-  },
+  }
 
   _nodeRemoved(node) {
     this._layoutManager.removeNode(node.getId());
-  },
+  }
 
   _doLayout() {
     //        (function() {
@@ -86,13 +86,12 @@ const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{
     //        console.log("---------");
     //        console.log("---------");
     //        }).delay(0, this);
-  },
+  }
 
   /** @return layout manager */
   getLayoutManager() {
     return this._layoutManager;
-  },
+  }
-
+}
-});
 
 export default EventBusDispatcher;

packages/mindplot/src/components/layout/GridSorter.js

@@ -22,9 +22,7 @@ import AbstractBasicSorter from './AbstractBasicSorter';
  * @class
  * @extends mindplot.layout.AbstractBasicSorter
  */
-const GridSorter = new Class(/** @lends GridSorter */{
+class GridSorter extends AbstractBasicSorter {/** @lends GridSorter */
-  Extends: AbstractBasicSorter,
-
   /**
      * @param {} treeSet
      * @param {} node
@@ -59,22 +57,21 @@ const GridSorter = new Class(/** @lends GridSorter */{
       const yOffset = zeroHeight + middleHeight + finalHeight;
       const xOffset = node.getSize().width + GridSorter.GRID_HORIZONTAR_SIZE;
 
-      $assert(!isNaN(xOffset), 'xOffset can not be null');
+      $assert(!Number.isNaN(xOffset), 'xOffset can not be null');
-      $assert(!isNaN(yOffset), 'yOffset can not be null');
+      $assert(!Number.isNaN(yOffset), 'yOffset can not be null');
 
       result[heights[i].id] = { x: xOffset, y: yOffset };
     }
     return result;
-  },
+  }
 
   /**
      * @return {String} the print name of this class
      */
   toString() {
     return 'Grid Sorter';
-  },
+  }
-
+}
-});
 
 /**
  * @constant

packages/mindplot/src/components/layout/Node.js

@@ -17,8 +17,8 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 
-const Node = new Class(
+class Node {
-  /** @lends Node */ {
+  /** @lends Node */
   /**
          * @constructs
          * @param id
@@ -30,7 +30,7 @@ const Node = new Class(
          * @throws will throw an error if position is null or undefined
          * @throws will throw an error if sorter is null or undefined
          */
-    initialize(id, size, position, sorter) {
+  constructor(id, size, position, sorter) {
     $assert(typeof id === 'number' && Number.isFinite(id), 'id can not be null');
     $assert(size, 'size can not be null');
     $assert(position, 'position can not be null');
@@ -43,42 +43,42 @@ const Node = new Class(
     this.setSize(size);
     this.setPosition(position);
     this.setShrunken(false);
-    },
+  }
 
   /** */
   getId() {
     return this._id;
-    },
+  }
 
   /** */
   setFree(value) {
     this._setProperty('free', value);
-    },
+  }
 
   /** */
   isFree() {
     return this._getProperty('free');
-    },
+  }
 
   /** */
   hasFreeChanged() {
     return this._isPropertyChanged('free');
-    },
+  }
 
   /** */
   hasFreeDisplacementChanged() {
     return this._isPropertyChanged('freeDisplacement');
-    },
+  }
 
   /** */
   setShrunken(value) {
     this._setProperty('shrink', value);
-    },
+  }
 
   /** */
   areChildrenShrunken() {
     return this._getProperty('shrink');
-    },
+  }
 
   /** */
   setOrder(order) {
@@ -87,7 +87,7 @@ const Node = new Class(
       `Order can not be null. Value:${order}`,
     );
     this._setProperty('order', order);
-    },
+  }
 
   /** */
   resetPositionState() {
@@ -95,7 +95,7 @@ const Node = new Class(
     if (prop) {
       prop.hasChanged = false;
     }
-    },
+  }
 
   /** */
   resetOrderState() {
@@ -103,7 +103,7 @@ const Node = new Class(
     if (prop) {
       prop.hasChanged = false;
     }
-    },
+  }
 
   /** */
   resetFreeState() {
@@ -111,43 +111,43 @@ const Node = new Class(
     if (prop) {
       prop.hasChanged = false;
     }
-    },
+  }
 
   /** */
   getOrder() {
     return this._getProperty('order');
-    },
+  }
 
   /** */
   hasOrderChanged() {
     return this._isPropertyChanged('order');
-    },
+  }
 
   /** */
   hasPositionChanged() {
     return this._isPropertyChanged('position');
-    },
+  }
 
   /** */
   hasSizeChanged() {
     return this._isPropertyChanged('size');
-    },
+  }
 
   /** */
   getPosition() {
     return this._getProperty('position');
-    },
+  }
 
   /** */
   setSize(size) {
     $assert($defined(size), 'Size can not be null');
     this._setProperty('size', Object.clone(size));
-    },
+  }
 
   /** */
   getSize() {
     return this._getProperty('size');
-    },
+  }
 
   /** */
   setFreeDisplacement(displacement) {
@@ -161,18 +161,18 @@ const Node = new Class(
     };
 
     this._setProperty('freeDisplacement', Object.clone(newDisplacement));
-    },
+  }
 
   /** */
   resetFreeDisplacement() {
     this._setProperty('freeDisplacement', { x: 0, y: 0 });
-    },
+  }
 
   /** */
   getFreeDisplacement() {
     const freeDisplacement = this._getProperty('freeDisplacement');
     return freeDisplacement || { x: 0, y: 0 };
-    },
+  }
 
   /** */
   setPosition(position) {
@@ -187,7 +187,7 @@ const Node = new Class(
                 || Math.abs(currentPos.x - position.x) > 2
                 || Math.abs(currentPos.y - position.y) > 2
     ) this._setProperty('position', position);
-    },
+  }
 
   _setProperty(key, value) {
     let prop = this._properties[key];
@@ -206,22 +206,22 @@ const Node = new Class(
       prop.hasChanged = true;
     }
     this._properties[key] = prop;
-    },
+  }
 
   _getProperty(key) {
     const prop = this._properties[key];
     return $defined(prop) ? prop.value : null;
-    },
+  }
 
   _isPropertyChanged(key) {
     const prop = this._properties[key];
     return prop ? prop.hasChanged : false;
-    },
+  }
 
   /** */
   getSorter() {
     return this._sorter;
-    },
+  }
 
   /** @return {String} returns id, order, position, size and shrink information */
   toString() {
@@ -242,8 +242,8 @@ const Node = new Class(
         this.areChildrenShrunken()
       }]`
     );
-    },
+  }
-  },
+}
-);
+
 
 export default Node;

packages/mindplot/src/components/layout/RootedTreeSet.js

@@ -17,12 +17,12 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 
-const RootedTreeSet = new Class(
+class RootedTreeSet {
-  /** @lends RootedTreeSet */ {
+  /** @lends RootedTreeSet */
   /** @constructs */
-    initialize() {
+  constructor() {
     this._rootNodes = [];
-    },
+  }
 
   /**
          * @param root
@@ -31,17 +31,17 @@ const RootedTreeSet = new Class(
   setRoot(root) {
     $assert(root, 'root can not be null');
     this._rootNodes.push(this._decodate(root));
-    },
+  }
 
   /** getter */
   getTreeRoots() {
     return this._rootNodes;
-    },
+  }
 
   _decodate(node) {
     node._children = [];
     return node;
-    },
+  }
 
   /**
          * @param {mindplot.model.NodeModel} node
@@ -57,7 +57,7 @@ const RootedTreeSet = new Class(
     );
     $assert(!node._children, 'node already added');
     this._rootNodes.push(this._decodate(node));
-    },
+  }
 
   /**
          * @param nodeId
@@ -67,7 +67,7 @@ const RootedTreeSet = new Class(
     $assert($defined(nodeId), 'nodeId can not be null');
     const node = this.find(nodeId);
     this._rootNodes.erase(node);
-    },
+  }
 
   /**
          * @param parentId
@@ -90,7 +90,7 @@ const RootedTreeSet = new Class(
     parent._children.push(child);
     child._parent = parent;
     this._rootNodes.erase(child);
-    },
+  }
 
   /**
          * @param nodeId
@@ -105,7 +105,7 @@ const RootedTreeSet = new Class(
     node._parent._children.erase(node);
     this._rootNodes.push(node);
     node._parent = null;
-    },
+  }
 
   /**
          * @param id
@@ -132,7 +132,7 @@ const RootedTreeSet = new Class(
       `node could not be found id:${id}\n,RootedTreeSet${this.dump()}`,
     );
     return result;
-    },
+  }
 
   _find(id, parent) {
     if (parent.getId() === id) {
@@ -148,7 +148,7 @@ const RootedTreeSet = new Class(
     }
 
     return result;
-    },
+  }
 
   /**
          * @param node
@@ -158,7 +158,7 @@ const RootedTreeSet = new Class(
   getChildren(node) {
     $assert(node, 'node cannot be null');
     return node._children;
-    },
+  }
 
   /**
          * @param node
@@ -173,7 +173,7 @@ const RootedTreeSet = new Class(
     }
 
     return node;
-    },
+  }
 
   /**
          * @param node
@@ -182,7 +182,7 @@ const RootedTreeSet = new Class(
   getAncestors(node) {
     $assert(node, 'node cannot be null');
     return this._getAncestors(this.getParent(node), []);
-    },
+  }
 
   _getAncestors(node, ancestors) {
     const result = ancestors;
@@ -191,7 +191,7 @@ const RootedTreeSet = new Class(
       this._getAncestors(this.getParent(node), result);
     }
     return result;
-    },
+  }
 
   /**
          * @param node
@@ -205,7 +205,7 @@ const RootedTreeSet = new Class(
     }
     const siblings = node._parent._children.filter((child) => child !== node);
     return siblings;
-    },
+  }
 
   /**
          * @param node
@@ -215,7 +215,7 @@ const RootedTreeSet = new Class(
   hasSinglePathToSingleLeaf(node) {
     $assert(node, 'node cannot be null');
     return this._hasSinglePathToSingleLeaf(node);
-    },
+  }
 
   _hasSinglePathToSingleLeaf(node) {
     const children = this.getChildren(node);
@@ -225,14 +225,14 @@ const RootedTreeSet = new Class(
     }
 
     return children.length === 0;
-    },
+  }
 
   /**
          * @param node
          * @return {Boolean} whether the node is the start of a subbranch */
   isStartOfSubBranch(node) {
     return this.getSiblings(node).length > 0 && this.getChildren(node).length === 1;
-    },
+  }
 
   /**
          * @param node
@@ -242,7 +242,7 @@ const RootedTreeSet = new Class(
   isLeaf(node) {
     $assert(node, 'node cannot be null');
     return this.getChildren(node).length === 0;
-    },
+  }
 
   /**
          * @param node
@@ -252,7 +252,7 @@ const RootedTreeSet = new Class(
   getParent(node) {
     $assert(node, 'node cannot be null');
     return node._parent;
-    },
+  }
 
   /**
          * @return result
@@ -265,7 +265,7 @@ const RootedTreeSet = new Class(
       result += this._dump(branch, '');
     }
     return result;
-    },
+  }
 
   _dump(node, indent) {
     let result = `${indent + node}\n`;
@@ -276,7 +276,7 @@ const RootedTreeSet = new Class(
     }
 
     return result;
-    },
+  }
 
   /**
          * @param canvas
@@ -287,7 +287,7 @@ const RootedTreeSet = new Class(
       const branch = branches[i];
       this._plot(canvas, branch);
     }
-    },
+  }
 
   _plot(canvas, node, root) {
     const children = this.getChildren(node);
@@ -360,7 +360,7 @@ const RootedTreeSet = new Class(
       const child = children[i];
       this._plot(canvas, child);
     }
-    },
+  }
 
   /**
          * @param node
@@ -378,7 +378,7 @@ const RootedTreeSet = new Class(
     children.forEach((child) => {
       me.shiftBranchPosition(child, xOffset, yOffset);
     });
-    },
+  }
 
   /**
          * @param node
@@ -394,7 +394,7 @@ const RootedTreeSet = new Class(
     children.forEach((child) => {
       me.shiftBranchPosition(child, xOffset, yOffset);
     });
-    },
+  }
 
   /**
      * @param node
@@ -419,7 +419,7 @@ const RootedTreeSet = new Class(
     }
 
     return siblings;
-    },
+  }
 
   /**
          * @param node
@@ -447,8 +447,7 @@ const RootedTreeSet = new Class(
     }, this);
 
     return rootDescendants;
-    },
+  }
-  },
+}
-);
 
 export default RootedTreeSet;

packages/mindplot/src/components/layout/SymmetricSorter.js

@@ -18,15 +18,8 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import AbstractBasicSorter from './AbstractBasicSorter';
 
-
+class SymmetricSorter extends AbstractBasicSorter {
-const SymmetricSorter = new Class(
+  /** @lends SymmetricSorter */
-  /** @lends SymmetricSorter */ {
-    Extends: AbstractBasicSorter,
-    /**
-         * @constructs
-         * @extends mindplot.layout.AbstractBasicSorter
-         */
-    initialize() {},
 
   /**
          * Predict the order and position of a dragged node.
@@ -173,7 +166,7 @@ const SymmetricSorter = new Class(
                     - SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
     };
     return [0, position];
-    },
+  }
 
   /**
          * @param treeSet
@@ -195,7 +188,7 @@ const SymmetricSorter = new Class(
       node.setOrder(i + 1);
     }
     child.setOrder(order);
-    },
+  }
 
   /**
          * @param treeSet
@@ -213,7 +206,7 @@ const SymmetricSorter = new Class(
       child.setOrder(child.getOrder() - 1);
     }
     node.setOrder(0);
-    },
+  }
 
   /**
          * @param treeSet
@@ -265,13 +258,13 @@ const SymmetricSorter = new Class(
                         + node.getSize().width / 2
                         + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
 
-        $assert(!isNaN(xOffset), 'xOffset can not be null');
+      $assert(!Number.isNaN(xOffset), 'xOffset can not be null');
-        $assert(!isNaN(yOffset), 'yOffset can not be null');
+      $assert(!Number.isNaN(yOffset), 'yOffset can not be null');
 
       result[heights[i].id] = { x: xOffset, y: yOffset };
     }
     return result;
-    },
+  }
 
   /**
          * @param treeSet
@@ -285,7 +278,7 @@ const SymmetricSorter = new Class(
     for (let i = 0; i < children.length; i++) {
       $assert(children[i].getOrder() == i, 'missing order elements');
     }
-    },
+  }
 
   /**
          * @param treeSet
@@ -308,18 +301,17 @@ const SymmetricSorter = new Class(
       result = sorter.getChildDirection(treeSet, parent);
     }
     return result;
-    },
+  }
 
   /** @return {String} the print name of this class */
   toString() {
     return 'Symmetric Sorter';
-    },
+  }
 
   _getVerticalPadding() {
     return SymmetricSorter.INTERNODE_VERTICAL_PADDING;
-    },
+  }
-  },
+}
-);
 
 /**
  * @constant

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

@@ -19,8 +19,7 @@
 // FIXME: this Class should be reimplemented
 import Events from '../Events';
 
-const FadeEffect = new Class(/** @lends FadeEffect */{
+class FadeEffect extends Events {/** @lends FadeEffect */
-  Extends: Events,
   /**
      * @extends mindplot.Events
      * @constructs
@@ -30,7 +29,7 @@ const FadeEffect = new Class(/** @lends FadeEffect */{
   initialize(elements, isVisible) {
     this._isVisible = isVisible;
     this._element = elements;
-  },
+  }
 
   /** */
   start() {
@@ -42,7 +41,7 @@ const FadeEffect = new Class(/** @lends FadeEffect */{
     });
     this._isVisible = !visible;
     this.fireEvent('complete');
-  },
+  }
-});
+}
 
 export default FadeEffect;

packages/mindplot/src/components/widget/ColorPalettePanel.js

@@ -65,7 +65,7 @@ class ColorPalettePanel extends ToolbarPaneItem {
     const colorCells = content.find('div[class=palette-colorswatch]');
     const model = this.getModel();
     const me = this;
-    colorCells.each((elem) => {
+    colorCells.each((index, elem) => {
       $(elem).on('click', () => {
         const color = $(elem).css('background-color');
         model.setValue(color);

packages/mindplot/src/components/widget/LinkEditor.js

@@ -17,30 +17,28 @@
  */
 import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
 
-const LinkEditor = new Class(/** @lends LinkEditor */{
+class LinkEditor extends BootstrapDialog {/** @lends LinkEditor */
-  Extends: BootstrapDialog,
-
   /**
      * @constructs
      * @param model
      * @throws will throw an error if model is null or undefined
      * @extends BootstrapDialog
      */
-  initialize(model) {
+  constructor(model) {
     $assert(model, 'model can not be null');
-    this._model = model;
+    super($msg('LINK'), {
-    this.parent($msg('LINK'), {
       cancelButton: true,
       closeButton: true,
       acceptButton: true,
       removeButton: typeof model.getValue() !== 'undefined',
       errorMessage: true,
-      onEventData: { model: this._model },
+      onEventData: { model },
     });
+    this._model = model;
     this.css({ margin: '150px auto' });
     const panel = this._buildPanel(model);
     this.setContent(panel);
-  },
+  }
 
   _buildPanel(model) {
     const result = $('<div></div>').css('padding-top', '5px');
@@ -109,7 +107,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{
 
     result.append(this.form);
     return result;
-  },
+  }
 
   /**
      * checks whether the input is a valid url
@@ -118,7 +116,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{
   checkURL(url) {
     const regex = /^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;
     return (regex.test(url));
-  },
+  }
 
   /**
      * overrides abstract parent method
@@ -131,7 +129,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{
     if (!this.formSubmitted) {
       event.stopPropagation();
     }
-  },
+  }
 
   /**
      * overrides parent method
@@ -139,7 +137,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{
      */
   onDialogShown() {
     $(this).find('#inputUrl').focus();
-  },
+  }
 
   /**
      * overrides abstract parent method
@@ -148,8 +146,8 @@ const LinkEditor = new Class(/** @lends LinkEditor */{
   onRemoveClick(event) {
     event.data.model.setValue(null);
     event.data.dialog.close();
-  },
+  }
 
-});
+}
 
 export default LinkEditor;

packages/mindplot/test/playground/layout/BalancedTestSuite.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /*
  *    Copyright [2015] [wisemapping]
  *
@@ -15,19 +16,18 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
+import $ from 'jquery';
+import { $assert } from '@wisemapping/core-js';
 import TestSuite from './TestSuite';
 import LayoutManager from '../../../src/components/layout/LayoutManager';
-
+class BalancedTestSuite extends TestSuite {
-const BalancedTestSuite = new Class({
+  constructor() {
-  Extends: TestSuite,
-
-  initialize() {
     $('#balancedTest').css('display', 'block');
-
+    super();
     this.testBalanced();
     this.testBalancedPredict();
     this.testBalancedNodeDragPredict();
-  },
+  }
 
   testBalanced() {
     console.log('testBalanced:');
@@ -176,7 +176,7 @@ const BalancedTestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
 
   testBalancedPredict() {
     console.log('testBalancedPredict:');
@@ -335,7 +335,7 @@ const BalancedTestSuite = new Class({
     $assert(prediction5a.order == prediction5b.order, 'Both predictions should be the same');
 
     console.log('OK!\n\n');
-  },
+  }
 
   testBalancedNodeDragPredict() {
     console.log('testBalancedNodeDragPredict:');
@@ -493,7 +493,7 @@ const BalancedTestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
-});
+}
 
 export default BalancedTestSuite;

packages/mindplot/test/playground/layout/FreeTestSuite.js

@@ -15,6 +15,8 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
+import $ from 'jquery';
+import { $assert } from '@wisemapping/core-js';
 import TestSuite from './TestSuite';
 import LayoutManager from '../../../src/components/layout/LayoutManager';
 import OriginalLayout from '../../../src/components/layout/OriginalLayout';

packages/mindplot/test/playground/layout/SymmetricTestSuite.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /*
  *    Copyright [2015] [wisemapping]
  *
@@ -15,19 +16,20 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
+import $ from 'jquery';
+import { $assert } from '@wisemapping/core-js';
 import TestSuite from './TestSuite';
 import LayoutManager from '../../../src/components/layout/LayoutManager';
 
-const SymmetricTestSuite = new Class({
+class SymmetricTestSuite extends TestSuite {
-  Extends: TestSuite,
+  constructor() {
-
-  initialize() {
     $('#symmetricTest').css('display', 'block');
+    super();
 
     this.testSymmetry();
     this.testSymmetricPredict();
     this.testSymmetricDragPredict();
-  },
+  }
 
   testSymmetry() {
     console.log('testSymmetry:');
@@ -92,7 +94,7 @@ const SymmetricTestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
 
   testSymmetricPredict() {
     console.log('testSymmetricPredict:');
@@ -276,7 +278,7 @@ const SymmetricTestSuite = new Class({
     $assert(prediction5d.order == 0, 'Prediction order should be 0');
 
     console.log('OK!\n\n');
-  },
+  }
 
   testSymmetricDragPredict() {
     console.log('testSymmetricDragPredict:');
@@ -345,7 +347,7 @@ const SymmetricTestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
-});
+}
 
 export default SymmetricTestSuite;

packages/mindplot/test/playground/layout/TestSuite.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /*
  *    Copyright [2015] [wisemapping]
  *
@@ -15,12 +16,13 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
+import $ from 'jquery';
+import { $assert } from '@wisemapping/core-js';
 import LayoutManager from '../../../src/components/layout/LayoutManager';
-
+import ChildrenSorterStrategy from '../../../src/components/layout/ChildrenSorterStrategy';
-const TestSuite = new Class({
+class TestSuite extends ChildrenSorterStrategy {
-  Extends: ChildrenSorterStrategy,
+  constructor() {
-
+    super();
-  initialize() {
     $('#basicTest').css('display', 'block');
     //        this.testAligned();
     this.testBaselineAligned1();
@@ -32,7 +34,7 @@ const TestSuite = new Class({
     this.testRemoveNode();
     this.testSize();
     this.testReconnectSingleNode();
-  },
+  }
 
   testAligned() {
     console.log('testAligned:');
@@ -79,7 +81,7 @@ const TestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
 
   testBaselineAligned1() {
     console.log('testBaselineAligned1:');
@@ -125,7 +127,7 @@ const TestSuite = new Class({
     //        manager.plot("testBaselineAligned1", {width:1600,height:800});
 
     console.log('OK!\n\n');
-  },
+  }
 
   testBaselineAligned2() {
     console.log('testBaselineAligned2:');
@@ -143,7 +145,7 @@ const TestSuite = new Class({
     manager.plot('testBaselineAligned2', { width: 1600, height: 800 });
 
     console.log('OK!\n\n');
-  },
+  }
 
   testEvents() {
     console.log('testEvents:');
@@ -181,7 +183,7 @@ const TestSuite = new Class({
     $assert(events.length == 0, 'Unnecessary tree updated.');
 
     console.log('OK!\n\n');
-  },
+  }
 
   testEventsComplex() {
     console.log('testEventsComplex:');
@@ -229,7 +231,7 @@ const TestSuite = new Class({
     $assert(events.length == 4, 'Only 4 nodes should be repositioned.');
 
     console.log('OK!\n\n');
-  },
+  }
 
   testDisconnect() {
     console.log('testDisconnect:');
@@ -290,7 +292,7 @@ const TestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
 
   testReconnect() {
     console.log('testReconnect:');
@@ -352,7 +354,7 @@ const TestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
 
   testRemoveNode() {
     console.log('testRemoveNode:');
@@ -422,7 +424,7 @@ const TestSuite = new Class({
     $assert(manager.find(9).getOrder() == 3, 'Node 9 should have order 3');
 
     console.log('OK!\n\n');
-  },
+  }
 
   testSize() {
     console.log('testSize:');
@@ -519,7 +521,7 @@ const TestSuite = new Class({
     );
 
     console.log('OK!\n\n');
-  },
+  }
 
   testReconnectSingleNode() {
     console.log('testReconnectSingleNode:');
@@ -552,7 +554,7 @@ const TestSuite = new Class({
       'Node 1 should now be to the left of the root node',
     );
     $assert(manager.find(1).getOrder() == 1, 'Node 1 should now have order 0');
-  },
+  }
 
   _plotPrediction(canvas, prediction) {
     if (!canvas) {
@@ -570,10 +572,10 @@ const TestSuite = new Class({
     const cx = position.x + canvas.width / 2 - TestSuite.NODE_SIZE.width / 2;
     const cy = position.y + canvas.height / 2 - TestSuite.NODE_SIZE.height / 2;
     canvas.rect(cx, cy, TestSuite.NODE_SIZE.width, TestSuite.NODE_SIZE.height);
-  },
+  }
-});
+}
 
-(TestSuite.NODE_SIZE = { width: 80, height: 30 }),
+TestSuite.NODE_SIZE = { width: 80, height: 30 };
-  (TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 });
+TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 };
 
 export default TestSuite;

packages/mindplot/test/playground/layout/context-loader.js

@@ -4,6 +4,7 @@ import SymmetricTestSuite from './SymmetricTestSuite';
 import FreeTestSuite from './FreeTestSuite';
 import Raphael from './lib/raphael-min';
 import { drawGrid } from './lib/raphael-plugins';
+import '../../../src'; // TODO: remove this when removing mootools (hack used to load it as a side effect)
 
 global.Raphael = Raphael;
 global.Raphael.fn.drawGrid = drawGrid;

packages/mindplot/test/playground/map-render/html/container.json

@@ -12,5 +12,6 @@
     },
     "persistenceManager": "mindplot.LocalStorageManager",
     "mapId": "welcome",
-    "container":"mindplot"
+    "container":"mindplot",
+    "locale": "en"
 }

packages/mindplot/test/playground/map-render/html/editor.html

@@ -1,33 +1,25 @@
 <!DOCTYPE HTML>
 
 <html>
+
 <head>
     <title>WiseMapping - Editor </title>
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
-
-    <!--[if lt IE 9]>
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <![endif]-->
-    <link rel="stylesheet/less" type="text/css" href="css/editor.less"/>
-
-    <script type='text/javascript' src='js/jquery.js'></script>
-    <script type="text/javascript" language="javascript" src="bootstrap/js/bootstrap.js"></script>
-    <script src="js/less.js" type="text/javascript"></script>
-
     <link rel="icon" href="favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 </head>
+
 <body>
 
-<div id='load' class="modal fade">
+    <div id='load' class="modal fade">
         <div class="modal-dialog">
             <div style="height: 120px; text-align: center; border: 2px solid orange" class="modal-content">
                 <img style='margin-top:25px; text-align: center' src="images/ajax-loader.gif">
             </div>
         </div>
-</div>
+    </div>
 
-<div id="header">
+    <div id="header">
 
         <div id="headerInfo">
             <div id="headerActions"></div>
@@ -38,75 +30,75 @@
             <div id="editTab" class="tabContent">
                 <div id="persist" class="buttonContainer">
                     <div id="save" class="buttonOn">
-                    <img src="images/save.png"/>
+                        <img src="images/save.png" />
                     </div>
                     <div id="discard" class="buttonOn">
-                    <img src="images/discard.png"/>
+                        <img src="images/discard.png" />
                     </div>
                     <div id="export" class="buttonOn">
-                    <img src="images/export.png"/>
+                        <img src="images/export.png" />
                     </div>
                 </div>
                 <div id="edit" class="buttonContainer">
                     <div id="undoEdition" class="buttonOn">
-                    <img src="images/undo.png"/>
+                        <img src="images/undo.png" />
                     </div>
                     <div id="redoEdition" class="buttonOn">
-                    <img src="images/redo.png"/>
+                        <img src="images/redo.png" />
                     </div>
                 </div>
                 <div id="zoom" class="buttonContainer">
                     <div id="zoomOut" class="buttonOn">
-                    <img src="images/zoom-out.png"/>
+                        <img src="images/zoom-out.png" />
                     </div>
                     <div id="zoomIn" class="buttonOn">
-                    <img src="images/zoom-in.png"/>
+                        <img src="images/zoom-in.png" />
                     </div>
                 </div>
                 <div id="node" class="buttonContainer">
                     <div id="topicShape" class="buttonExtOn">
-                    <img src="images/topic-shape.png"/>
+                        <img src="images/topic-shape.png" />
                     </div>
                     <div id="addTopic" class="buttonOn">
-                    <img src="images/topic-add.png"/>
+                        <img src="images/topic-add.png" />
                     </div>
                     <div id="deleteTopic" class="buttonOn">
-                    <img src="images/topic-delete.png"/>
+                        <img src="images/topic-delete.png" />
                     </div>
                     <div id="topicBorder" class="buttonExtOn">
-                    <img src="images/topic-border.png"/>
+                        <img src="images/topic-border.png" />
                     </div>
                     <div id="topicColor" class="buttonExtOn">
-                    <img src="images/topic-color.png"/>
+                        <img src="images/topic-color.png" />
                     </div>
                     <div id="topicIcon" class="buttonExtOn">
-                    <img src="images/topic-icon.png"/>
+                        <img src="images/topic-icon.png" />
                     </div>
                     <div id="topicNote" class="buttonOn">
-                    <img src="images/topic-note.png"/>
+                        <img src="images/topic-note.png" />
                     </div>
                     <div id="topicLink" class="buttonOn">
-                    <img src="images/topic-link.png"/>
+                        <img src="images/topic-link.png" />
                     </div>
                     <div id="topicRelation" class="buttonOn">
-                    <img src="images/topic-relation.png"/>
+                        <img src="images/topic-relation.png" />
                     </div>
                 </div>
                 <div id="font" class="buttonContainer">
                     <div id="fontFamily" class="buttonExtOn">
-                    <img src="images/font-type.png"/>
+                        <img src="images/font-type.png" />
                     </div>
                     <div id="fontSize" class="buttonExtOn">
-                    <img src="images/font-size.png"/>
+                        <img src="images/font-size.png" />
                     </div>
                     <div id="fontBold" class="buttonOn">
-                    <img src="images/font-bold.png"/>
+                        <img src="images/font-bold.png" />
                     </div>
                     <div id="fontItalic" class="buttonOn">
-                    <img src="images/font-italic.png"/>
+                        <img src="images/font-italic.png" />
                     </div>
                     <div id="fontColor" class="buttonExtOn" style="padding-top:4px">
-                    <img src="images/font-color.png"/>
+                        <img src="images/font-color.png" />
                     </div>
                 </div>
             </div>
@@ -115,8 +107,9 @@
         <div id="footer">
             <div id="footerLogo"></div>
         </div>
-</div>
+    </div>
 
-<div id="mindplot" onselectstart="return false;"></div>
+    <div id="mindplot" onselectstart="return false;"></div>
 </body>
+
 </html>

packages/mindplot/test/playground/map-render/html/embedded.html

@@ -1,51 +1,16 @@
 <!DOCTYPE HTML>
 
 <html>
+
 <head>
     <title>WiseMapping - Editor </title>
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
-    <!--[if lt IE 9]>
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <![endif]-->
-    <link rel="stylesheet/less" type="text/css" href="css/embedded.less"/>
-
-    <script type='text/javascript' src='js/jquery.js'></script>
-    <script type='text/javascript' src='js/bootstrap.js'></script>
-    <script type='text/javascript' src='js/mootools-core.js'></script>
-    <script type='text/javascript' src='js/core.js'></script>
-    <script type='text/javascript' src='js/less.js'></script>
-
     <link rel="icon" href="images/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
-
-    <script type="text/javascript">
-
-        var mapId = 'welcome';
-        $(document).on('loadcomplete', function(resource) {
-
-            // Options has been defined in by a external ile ?
-            var queryString = window.location.search;
-            var confUrl = queryString.replace("?confUrl=", "");
-            var options = loadDesignerOptions(confUrl);
-            var designer = buildDesigner(options);
-
-            // Load map from XML file persisted on disk...
-            var persistence = mindplot.PersistenceManager.getInstance();
-            var mindmap;
-            try {
-                mindmap = persistence.load(mapId);
-            } catch(e) {
-                // If the map could not be loaded, create a new empty map...
-                mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
-            }
-            designer.loadMap(mindmap);
-        });
-
-    </script>
 </head>
-<body>
 
-<div id="header">
+<body>
+    <div id="header">
 
         <div id="headerInfo">
             <div id="headerActions"></div>
@@ -56,80 +21,81 @@
             <div id="editTab" class="tabContent">
                 <div id="persist" class="buttonContainer">
                     <div id="save" class="buttonOn">
-                    <img src="images/save.png"/>
+                        <img src="images/save.png" />
                     </div>
                     <div id="discard" class="buttonOn">
-                    <img src="images/discard.png"/>
+                        <img src="images/discard.png" />
                     </div>
                 </div>
                 <div id="edit" class="buttonContainer">
                     <div id="undoEdition" class="buttonOn">
-                    <img src="images/undo.png"/>
+                        <img src="images/undo.png" />
                     </div>
                     <div id="redoEdition" class="buttonOn">
-                    <img src="images/redo.png"/>
+                        <img src="images/redo.png" />
                     </div>
                 </div>
                 <div id="zoom" class="buttonContainer">
                     <div id="zoomIn" class="buttonOn">
-                    <img src="images/zoom-in.png"/>
+                        <img src="images/zoom-in.png" />
                     </div>
                     <div id="zoomOut" class="buttonOn">
-                    <img src="images/zoom-out.png"/>
+                        <img src="images/zoom-out.png" />
                     </div>
                 </div>
                 <div id="node" class="buttonContainer">
                     <div id="topicShape" class="buttonExtOn">
-                    <img src="images/topic-shape.png"/>
+                        <img src="images/topic-shape.png" />
                     </div>
                     <div id="addTopic" class="buttonOn">
-                    <img src="images/topic-add.png"/>
+                        <img src="images/topic-add.png" />
                     </div>
                     <div id="deleteTopic" class="buttonOn">
-                    <img src="images/topic-delete.png"/>
+                        <img src="images/topic-delete.png" />
                     </div>
                     <div id="topicBorder" class="buttonOn">
-                    <img src="images/topic-border.png"/>
+                        <img src="images/topic-border.png" />
                     </div>
                     <div id="topicColor" class="buttonExtOn">
-                    <img src="images/topic-color.png"/>
+                        <img src="images/topic-color.png" />
                     </div>
                     <div id="topicIcon" class="buttonExtOn">
-                    <img src="images/topic-icon.png"/>
+                        <img src="images/topic-icon.png" />
                     </div>
                     <div id="topicNote" class="buttonOn">
-                    <img src="images/topic-note.png"/>
+                        <img src="images/topic-note.png" />
                     </div>
                     <div id="topicLink" class="buttonOn">
-                    <img src="images/topic-link.png"/>
+                        <img src="images/topic-link.png" />
                     </div>
                     <div id="topicRelation" class="buttonOn">
-                    <img src="images/topic-relation.png"/>
+                        <img src="images/topic-relation.png" />
                     </div>
                 </div>
                 <div id="font" class="buttonContainer">
                     <div id="fontFamily" class="buttonOn">
-                    <img src="images/font-type.png"/>
+                        <img src="images/font-type.png" />
                     </div>
                     <div id="fontSize" class="buttonExtOn">
-                    <img src="images/font-size.png"/>
+                        <img src="images/font-size.png" />
                     </div>
                     <div id="fontBold" class="buttonOn">
-                    <img src="images/font-bold.png"/>
+                        <img src="images/font-bold.png" />
                     </div>
                     <div id="fontItalic" class="buttonOn">
-                    <img src="images/font-italic.png"/>
+                        <img src="images/font-italic.png" />
                     </div>
                     <div id="fontColor" class="buttonExtOn" style="padding-top:4px">
-                    <img src="images/font-color.png"/>
+                        <img src="images/font-color.png" />
 
                     </div>
                 </div>
             </div>
         </div>
         <div id="headerNotifier"></div>
-</div>
+    </div>
 
-<div id="mindplot" onselectstart="return false;"></div>
+    <div id="mindplot" onselectstart="return false;"></div>
 </body>
+
 </html>

packages/mindplot/test/playground/map-render/js/editor.js

@@ -1,187 +1,16 @@
-/*
+import '../css/editor.less';
- *    Copyright [2015] [wisemapping]
+import { buildDesigner, loadDesignerOptions, loadExample } from './loader';
- *
+import { PersistenceManager } from '../../../../src';
- *   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 { $assert } from '@wisemapping/core-js';
-import { Mindmap, PersistenceManager, Designer, LocalStorageManager, Menu } from '../../../../src/';
 
-import $ from 'jquery';
+const example = async () => {
-global.jQuery = $;
+  const mapId = 'welcome';
-
+  const options = await loadDesignerOptions();
-let designer = null;
+  const designer = buildDesigner(options);
-
-/*
- * Disclaimer: this global variable is a temporary workaround to Mootools' Browser class
- * We need to avoid browser detection and replace it with feature detection,
- * jquery recommends: http://www.modernizr.com/
- */
-
-global.Browser = {
-  firefox: window.globalStorage,
-  ie: document.all && !window.opera,
-  ie6: !window.XMLHttpRequest,
-  ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera,
-  ie8: document.documentMode == 8,
-  ie11: document.documentMode == 11,
-  opera: Boolean(window.opera),
-  chrome: Boolean(window.chrome),
-  safari: window.getComputedStyle && !window.globalStorage && !window.opera,
-  Platform: {
-    mac: navigator.platform.indexOf('Mac') != -1,
-  },
-};
-
-function buildDesigner(options) {
-  const container = $(`#${options.container}`);
-  $assert(container, 'container could not be null');
-
-  // Register load events ...
-  designer = new Designer(options, container);
-  designer.addEvent('loadSuccess', () => {
-    window.mindmapLoadReady = true;
-    console.log("Map loadded successfully");
-  });
-
-  const onerrorFn = function onerror(message, url, lineNo) {
-    // Ignore errors ...
-    if (message === 'Script error.' && lineNo == 0) {
-      // http://stackoverflow.com/questions/5913978/cryptic-script-error-reported-in-javascript-in-chrome-and-firefox
-      return;
-    }
-
-    // Transform error ...
-    let errorMsg = message;
-    if (typeof (message) === 'object' && message.srcElement && message.target) {
-      if (message.srcElement == '[object HTMLScriptElement]' && message.target == '[object HTMLScriptElement]') {
-        errorMsg = 'Error loading script';
-      } else {
-        errorMsg = `Event Error - target:${message.target} srcElement:${message.srcElement}`;
-      }
-    }
-    errorMsg = errorMsg.toString();
-
-    $.ajax({
-      method: 'post',
-      url: '/c/restful/logger/editor',
-      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
-      data: JSON.stringify({
-        jsErrorMsg: `Message: '${errorMsg}', line:'${lineNo}', url: :${url}`,
-        jsStack: window.event.error.stack || window.errorStack,
-        userAgent: navigator.userAgent,
-        mapId: options.mapId,
-      }),
-    });
-
-    // Close loading dialog ...
-    if (window.waitDialog) {
-      window.waitDialog.close();
-      window.waitDialog = null;
-    }
-
-    // Open error dialog only in case of mindmap loading errors. The rest of the error are reported but not display the dialog.
-    // Remove this in the near future.
-    if (!window.mindmapLoadReady) {
-      $notifyModal($msg('UNEXPECTED_ERROR_LOADING'));
-    }
-  };
-
-  window.onerror = onerrorFn;
-
-  // Configure default persistence manager ...
-  let persistence;
-  if (options.persistenceManager) {
-    if (typeof options.persistenceManager === 'string') {
-      const managerClass = /^mindplot\.(\w+)/.exec(options.persistenceManager);
-      if (managerClass){
-        persistence = new mindplot[managerClass[1]]('samples/{id}.xml');
-      } else {
-        persistence = eval(`new ${options.persistenceManager}()`);
-      }
-    } else {
-      persistence = options.persistenceManager;
-    }
-  } else {
-    persistence = new LocalStorageManager('samples/{id}.xml');
-  }
-  PersistenceManager.init(persistence);
-
-  // Register toolbar event ...
-  if ($('#toolbar')) {
-    const menu = new Menu(designer, 'toolbar', options.mapId, '');
-
-    //  If a node has focus, focus can be move to another node using the keys.
-    designer._cleanScreen = function () {
-      menu.clear();
-    };
-  }
-  
-  return designer;
-}
-
-function loadDesignerOptions(jsonConf) {
-  // Load map options ...
-  let result;
-  if (jsonConf) {
-    $.ajax({
-      url: jsonConf,
-      dataType: 'json',
-      async: false,
-      method: 'get',
-      success(options) {
-        result = options;
-      },
-    });
-  } else {
-    // Set workspace screen size as default. In this way, resize issues are solved.
-    const containerSize = {
-      height: parseInt(screen.height),
-      width: parseInt(screen.width),
-    };
-
-    const viewPort = {
-      height: parseInt(window.innerHeight - 70), // Footer and Header
-      width: parseInt(window.innerWidth),
-    };
-    result = {
-      readOnly: false,
-      zoom: 0.85,
-      saveOnLoad: true,
-      size: containerSize,
-      viewPort,
-      container: 'mindplot',
-      locale: 'en',
-    };
-  }
-  return result;
-}
-
-// Show loading dialog ...
-$(() => {
-  import('../../../../../../libraries/bootstrap').then(() => {
-    // from viewmode.html ---------
-    var mapId = 'welcome';
-    // Set readonly option ...
-    var options = loadDesignerOptions();
-    // options.readOnly = true;
-    var designer = buildDesigner(options);
 
   // Load map from XML file persisted on disk...
   const persistence = PersistenceManager.getInstance();
-    var mindmap = persistence.load(mapId);
+  const mindmap = persistence.load(mapId);
   designer.loadMap(mindmap);
-    // from viewmode.html ---------
+};
-  });
+
-});
+loadExample(example);

packages/mindplot/test/playground/map-render/js/embedded.js

@@ -0,0 +1,25 @@
+import '../css/embedded.less';
+import { buildDesigner, loadDesignerOptions, loadExample } from './loader';
+import { Mindmap, PersistenceManager } from '../../../../src';
+
+const example = async () => {
+  const mapId = 'welcome';
+  // Options has been defined in by a external ile ?
+  const queryString = window.location.search;
+  const confUrl = queryString.replace('?confUrl=', '');
+  const options = await loadDesignerOptions(confUrl);
+  const designer = buildDesigner(options);
+
+  // Load map from XML file persisted on disk...
+  const persistence = PersistenceManager.getInstance();
+  let mindmap;
+  try {
+    mindmap = persistence.load(mapId);
+  } catch (e) {
+    console.error('The map could not be loaded, loading an empty map instead.', e);
+    mindmap = Mindmap.buildEmpty(mapId);
+  }
+  designer.loadMap(mindmap);
+};
+
+loadExample(example);

packages/mindplot/test/playground/map-render/js/loader.js

@@ -0,0 +1,167 @@
+/*
+ *    Copyright [2015] [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 { $assert } from '@wisemapping/core-js';
+import { PersistenceManager, Designer, LocalStorageManager, Menu } from '../../../../src/';
+import * as mindplot from '../../../../src/';
+
+import $ from 'jquery';
+global.jQuery = $;
+global.$ = $;
+
+let designer = null;
+
+/*
+ * Disclaimer: this global variable is a temporary workaround to Mootools' Browser class
+ * We need to avoid browser detection and replace it with feature detection,
+ * jquery recommends: http://www.modernizr.com/
+ */
+
+global.Browser = {
+    firefox: window.globalStorage,
+    ie: document.all && !window.opera,
+    ie6: !window.XMLHttpRequest,
+    ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera,
+    ie8: document.documentMode == 8,
+    ie11: document.documentMode == 11,
+    opera: Boolean(window.opera),
+    chrome: Boolean(window.chrome),
+    safari: window.getComputedStyle && !window.globalStorage && !window.opera,
+    Platform: {
+        mac: navigator.platform.indexOf('Mac') != -1,
+    },
+};
+
+export function buildDesigner(options) {
+    const container = $(`#${options.container}`);
+    $assert(container, 'container could not be null');
+
+    // Register load events ...
+    designer = new Designer(options, container);
+    designer.addEvent('loadSuccess', () => {
+        window.mindmapLoadReady = true;
+        console.log('Map loadded successfully');
+    });
+
+    const onerrorFn = function onerror(message, url, lineNo) {
+        // Ignore errors ...
+        if (message === 'Script error.' && lineNo == 0) {
+            // http://stackoverflow.com/questions/5913978/cryptic-script-error-reported-in-javascript-in-chrome-and-firefox
+            return;
+        }
+
+        // Transform error ...
+        let errorMsg = message;
+        if (typeof message === 'object' && message.srcElement && message.target) {
+            if (
+                message.srcElement == '[object HTMLScriptElement]' &&
+                message.target == '[object HTMLScriptElement]'
+            ) {
+                errorMsg = 'Error loading script';
+            } else {
+                errorMsg = `Event Error - target:${message.target} srcElement:${message.srcElement}`;
+            }
+        }
+        errorMsg = errorMsg.toString();
+
+        // Close loading dialog ...
+        if (window.waitDialog) {
+            window.waitDialog.close();
+            window.waitDialog = null;
+        }
+
+        // Open error dialog only in case of mindmap loading errors. The rest of the error are reported but not display the dialog.
+        // Remove this in the near future.
+        if (!window.mindmapLoadReady) {
+            $notifyModal($msg('UNEXPECTED_ERROR_LOADING'));
+        }
+
+        console.error(errorMsg, 'line:', lineNo, 'url:', url);
+    };
+
+    window.onerror = onerrorFn;
+
+    // Configure default persistence manager ...
+    let persistence;
+    if (options.persistenceManager) {
+        if (typeof options.persistenceManager === 'string') {
+            const managerClass = /^mindplot\.(\w+)/.exec(options.persistenceManager);
+            if (managerClass) {
+                persistence = new mindplot[managerClass[1]]('samples/{id}.xml');
+            } else {
+                persistence = eval(`new ${options.persistenceManager}()`);
+            }
+        } else {
+            persistence = options.persistenceManager;
+        }
+    } else {
+        persistence = new LocalStorageManager('samples/{id}.xml');
+    }
+    PersistenceManager.init(persistence);
+
+    // Register toolbar event ...
+    if ($('#toolbar').length) {
+        const menu = new Menu(designer, 'toolbar', options.mapId, '');
+
+        //  If a node has focus, focus can be move to another node using the keys.
+        designer._cleanScreen = function () {
+            menu.clear();
+        };
+    }
+
+    return designer;
+}
+
+export async function loadDesignerOptions(jsonConf) {
+    // Load map options ...
+    let result;
+    if (jsonConf) {
+        result = await $.ajax({
+            url: jsonConf,
+            dataType: 'json',
+            method: 'get',
+        });
+    } else {
+        // Set workspace screen size as default. In this way, resize issues are solved.
+        const containerSize = {
+            height: parseInt(screen.height),
+            width: parseInt(screen.width),
+        };
+
+        const viewPort = {
+            height: parseInt(window.innerHeight - 70), // Footer and Header
+            width: parseInt(window.innerWidth),
+        };
+        result = {
+            readOnly: false,
+            zoom: 0.85,
+            saveOnLoad: true,
+            size: containerSize,
+            viewPort,
+            container: 'mindplot',
+            locale: 'en',
+        };
+    }
+    return result;
+}
+
+export function loadExample(exampleFn) {
+    $(() => {
+        // Hack: load bootstrap first
+        import('@libraries/bootstrap').then(exampleFn);
+    });
+}

packages/mindplot/test/playground/map-render/js/viewmode.js

@@ -0,0 +1,24 @@
+import '../css/embedded.less';
+import { buildDesigner, loadDesignerOptions, loadExample } from './loader';
+import { Mindmap, PersistenceManager } from '../../../../src';
+
+const example = async () => {
+  const mapId = 'welcome';
+  // Set readonly option ...
+  const options = await loadDesignerOptions();
+  options.readOnly = true;
+  const designer = buildDesigner(options);
+
+  // Load map from XML file persisted on disk...
+  const persistence = PersistenceManager.getInstance();
+  let mindmap;
+  try {
+    mindmap = persistence.load(mapId);
+  } catch (e) {
+    console.error('The map could not be loaded, loading an empty map instead.', e);
+    mindmap = Mindmap.buildEmpty(mapId);
+  }
+  designer.loadMap(mindmap);
+};
+
+loadExample(example);

packages/mindplot/webpack.playground.js

@@ -7,6 +7,8 @@ const CopyPlugin = require('copy-webpack-plugin');
 module.exports = {
   entry: {
     layout: path.resolve(__dirname, './test/playground/layout/context-loader'),
+    viewmode: path.resolve(__dirname, './test/playground/map-render/js/viewmode'),
+    embedded: path.resolve(__dirname, './test/playground/map-render/js/embedded'),
     editor: path.resolve(__dirname, './test/playground/map-render/js/editor'),
   },
   output: {
@@ -35,9 +37,19 @@ module.exports = {
         exclude: [
           /node_modules/,
           path.resolve(__dirname, '../../libraries/mootools-core-1.4.5'),
+          path.resolve(__dirname, '../../libraries/underscore-min'),
           /lib\/raphael/ig,
         ],
       },
+      {
+        test: /\.less$/i,
+        use: [
+          // compiles Less to CSS
+          'style-loader',
+          'css-loader?url=false',
+          'less-loader',
+        ],
+      },
     ],
   },
   resolve: {
@@ -54,13 +66,13 @@ module.exports = {
         { from: 'test/playground/map-render/images/favicon.ico', to: 'favicon.ico' },
         { from: 'test/playground/map-render/images', to: 'images' },
         { from: 'test/playground/map-render/icons', to: 'icons' },
-        { from: 'test/playground/map-render/css', to: 'css' },
         { from: 'test/playground/map-render/js', to: 'js' },
         { from: 'test/playground/map-render/samples', to: 'samples' },
         { from: 'test/playground/map-render/bootstrap', to: 'bootstrap' },
         { from: 'test/playground/index.html', to: 'index.html' },
         { from: 'test/playground/map-render/html/container.json', to: 'html/container.json' },
         { from: 'test/playground/map-render/html/container.html', to: 'container.html' },
+        { from: 'test/playground/map-render/css/widget', to: 'css/widget' },
       ],
     }),
     new HtmlWebpackPlugin({
@@ -69,12 +81,12 @@ module.exports = {
       template: 'test/playground/layout/index.html',
     }),
     new HtmlWebpackPlugin({
-      chunks: ['editor'],
+      chunks: ['viewmode'],
       filename: 'viewmode.html',
       template: 'test/playground/map-render/html/viewmode.html',
     }),
     new HtmlWebpackPlugin({
-      chunks: ['editor'],
+      chunks: ['embedded'],
       filename: 'embedded.html',
       template: 'test/playground/map-render/html/embedded.html',
     }),

yarn.lock

@@ -4199,6 +4199,13 @@ cookie@0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
+copy-anything@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.3.tgz#842407ba02466b0df844819bbe3baebbe5d45d87"
+  integrity sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==
+  dependencies:
+    is-what "^3.12.0"
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -5055,7 +5062,7 @@ err-code@^1.0.0:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
   integrity sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=
 
-errno@^0.1.3:
+errno@^0.1.1, errno@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
   integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
@@ -6740,7 +6747,7 @@ hyphenate-style-name@^1.0.3:
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
   integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -6802,6 +6809,11 @@ iltorb@^2.0.1:
     prebuild-install "^5.3.3"
     which-pm-runs "^1.0.0"
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
+
 immer@^9.0.7:
   version "9.0.7"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.7.tgz#b6156bd7db55db7abc73fd2fdadf4e579a701075"
@@ -7387,6 +7399,11 @@ is-weakref@^1.0.1:
   dependencies:
     call-bind "^1.0.2"
 
+is-what@^3.12.0:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 is-windows@^1.0.0, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -7782,6 +7799,30 @@ lerna@^3.16.4:
     import-local "^2.0.0"
     npmlog "^4.1.2"
 
+less-loader@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-10.2.0.tgz#97286d8797dc3dc05b1d16b0ecec5f968bdd4e32"
+  integrity sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==
+  dependencies:
+    klona "^2.0.4"
+
+less@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.1.2.tgz#6099ee584999750c2624b65f80145f8674e4b4b0"
+  integrity sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^2.5.2"
+    source-map "~0.6.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -8374,7 +8415,7 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19,
   dependencies:
     mime-db "1.51.0"
 
-mime@1.6.0:
+mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -8652,6 +8693,15 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+needle@^2.5.2:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.9.1.tgz#22d1dffbe3490c2b83e301f7709b6736cd8f2684"
+  integrity sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -9318,6 +9368,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 parse-path@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.3.tgz#82d81ec3e071dcc4ab49aa9f2c9c0b8966bb22bf"
@@ -10617,6 +10672,11 @@ sass-loader@^10.1.0:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
+sax@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
 scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
@@ -11805,7 +11865,7 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.1, tslib@^2.0.3, tslib@^2.2.0:
+tslib@^2.0.1, tslib@^2.0.3, tslib@^2.2.0, tslib@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
@@ -11933,6 +11993,11 @@ undefsafe@^2.0.5:
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
   integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
 
+underscore@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.1.tgz#0c1c6bd2df54b6b69f2314066d65b6cde6fcf9d1"
+  integrity sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"