Migration to EE6 of web2d and mindplot

packages/mindplot/src/components/ActionIcon.js

@@ -17,48 +17,49 @@
  */
 import Icon from './Icon';
 
-const ActionIcon = new Class({
+class ActionIcon extends Icon {
-  Extends: Icon,
+
-  initialize(topic, url) {
+  constructor(topic, url) {
-    this.parent(url);
+    super(url);
     this._node = topic;
-  },
+  }
+
   getNode() {
     return this._node;
-  },
+  }
 
   setPosition(x, y) {
     const size = this.getSize();
     this.getImage().setPosition(x - size.width / 2, y - size.height / 2);
-  },
+  }
 
   addEvent(event, fn) {
     this.getImage().addEvent(event, fn);
-  },
+  }
 
   addToGroup(group) {
     group.append(this.getImage());
-  },
+  }
 
   setVisibility(visible) {
     this.getImage().setVisibility(visible);
-  },
+  }
 
   isVisible() {
     return this.getImage().isVisible();
-  },
+  }
 
   setCursor(cursor) {
     return this.getImage().setCursor(cursor);
-  },
+  }
 
   moveToBack(cursor) {
     return this.getImage().moveToBack(cursor);
-  },
+  }
 
   moveToFront(cursor) {
     return this.getImage().moveToFront(cursor);
-  },
+  }
-});
+}
 
 export default ActionIcon;

packages/mindplot/src/components/CentralTopic.js

@@ -15,67 +15,57 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 import Topic from './Topic';
 import Shape from './util/Shape';
 
-const CentralTopic = new Class(
+class CentralTopic extends Topic {
-  /** @lends CentralTopic */ {
+  constructor(model, options) {
-    Extends: Topic,
+    super(model, options);
-    /**
+  }
-         * @extends mindplot.Topic
-         * @constructs
-         * @param model
-         * @param options
-         */
-    initialize(model, options) {
-      this.parent(model, options);
-    },
 
-    _registerEvents() {
+  _registerEvents() {
-      this.parent();
+    super._registerEvents();
 
-      // This disable the drag of the central topic.
+    // This disable the drag of the central topic.
-      // But solves the problem of deselecting the nodes when the screen is clicked.
+    // But solves the problem of deselecting the nodes when the screen is clicked.
-      this.addEvent('mousedown', (event) => {
+    this.addEvent('mousedown', (event) => {
-        event.stopPropagation();
+      event.stopPropagation();
-      });
+    });
-    },
+  }
 
-    /** */
+  /** */
-    workoutIncomingConnectionPoint() {
+  workoutIncomingConnectionPoint() {
-      return this.getPosition();
+    return this.getPosition();
-    },
+  }
 
-    /** */
+  /** */
-    setCursor(type) {
+  setCursor(type) {
-      type = type == 'move' ? 'default' : type;
+    super.setCursor(type === 'move' ? 'default' : type);
-      this.parent(type);
+  }
-    },
 
-    /** */
+  /** */
-    updateTopicShape() {},
+  updateTopicShape() {}
 
-    _updatePositionOnChangeSize() {
+  _updatePositionOnChangeSize() {
-      // Center main topic ...
+    // Center main topic ...
-      const zeroPoint = new web2d.Point(0, 0);
+    const zeroPoint = new web2d.Point(0, 0);
-      this.setPosition(zeroPoint);
+    this.setPosition(zeroPoint);
-    },
+  }
 
-    /** */
+  /** */
-    getShrinkConnector() {
+  getShrinkConnector() {
-      return null;
+    return null;
-    },
+  }
 
-    /** */
+  /** */
-    workoutOutgoingConnectionPoint(targetPosition) {
+  workoutOutgoingConnectionPoint(targetPosition) {
-      $assert(targetPosition, 'targetPoint can not be null');
+    $assert(targetPosition, 'targetPoint can not be null');
-      const pos = this.getPosition();
+    const pos = this.getPosition();
-      const isAtRight = Shape.isAtRight(targetPosition, pos);
+    const isAtRight = Shape.isAtRight(targetPosition, pos);
-      const size = this.getSize();
+    const size = this.getSize();
-      return Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
+    return Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
-    },
+  }
-  },
+}
-);
 
 export default CentralTopic;

packages/mindplot/src/components/Command.js

@@ -17,21 +17,21 @@
 */
 import { $defined } from '@wisemapping/core-js';
 
-const Command = new Class(/** @lends mindplot.Command */{
+class Command {
   /**
      * @classdesc The command base class for handling do/undo mindmap operations
      * @constructs
      */
-  initialize() {
+  constructor() {
     this._id = Command._nextUUID();
-  },
+  }
 
   /**
      * @abstract
      */
   execute(commandContext) {
     throw 'execute must be implemented.';
-  },
+  }
 
   /**
      * Triggered by the undo button - reverses the executed command
@@ -39,7 +39,7 @@ const Command = new Class(/** @lends mindplot.Command */{
      */
   undoExecute(commandContext) {
     throw 'undo must be implemented.';
-  },
+  }
 
   /**
      * Returns the unique id of this command
@@ -47,13 +47,13 @@ const Command = new Class(/** @lends mindplot.Command */{
      */
   getId() {
     return this._id;
-  },
+  }
-});
+}
 
 Command._nextUUID = function () {
   if (!$defined(Command._uuid)) {
     Command._uuid = 1;
-  }
+}
 
   Command._uuid += 1;
   return Command._uuid;

packages/mindplot/src/components/ConnectionLine.js

@@ -16,13 +16,13 @@
  *   limitations under the License.
  */
 import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 import INodeModel, { TopicShape } from './model/INodeModel';
 import TopicConfig from './TopicConfig';
 
-const ConnectionLine = new Class({
+class ConnectionLine {
-  initialize(sourceNode, targetNode, lineType) {
+  constructor(sourceNode, targetNode, lineType) {
     $assert(targetNode, 'parentNode node can not be null');
     $assert(sourceNode, 'childNode node can not be null');
     $assert(sourceNode !== targetNode, 'Circular connection');
@@ -47,14 +47,14 @@ const ConnectionLine = new Class({
     line.setFill(strokeColor, 1);
 
     this._line2d = line;
-  },
+  }
 
   _getCtrlPoints(sourceNode, targetNode) {
     const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
     const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
     const deltaX = (srcPos.x - destPos.x) / 3;
     return [new web2d.Point(deltaX, 0), new web2d.Point(-deltaX, 0)];
-  },
+  }
 
   _createLine(lineType, defaultStyle) {
     if (!$defined(lineType)) {
@@ -79,19 +79,19 @@ const ConnectionLine = new Class({
         break;
     }
     return line;
-  },
+  }
 
   setVisibility(value) {
     this._line2d.setVisibility(value);
-  },
+  }
 
   isVisible() {
     return this._line2d.isVisible();
-  },
+  }
 
   setOpacity(opacity) {
     this._line2d.setOpacity(opacity);
-  },
+  }
 
   redraw() {
     const line2d = this._line2d;
@@ -117,7 +117,7 @@ const ConnectionLine = new Class({
 
     // Add connector ...
     this._positionateConnector(targetTopic);
-  },
+  }
 
   _positionateConnector(targetTopic) {
     const targetPosition = targetTopic.getPosition();
@@ -142,61 +142,61 @@ const ConnectionLine = new Class({
       }
       connector.setPosition(x, y);
     }
-  },
+  }
 
   setStroke(color, style, opacity) {
     this._line2d.setStroke(null, null, color, opacity);
-  },
+  }
 
   addToWorkspace(workspace) {
     workspace.append(this._line2d);
     this._line2d.moveToBack();
-  },
+  }
 
   removeFromWorkspace(workspace) {
     workspace.removeChild(this._line2d);
-  },
+  }
 
   getTargetTopic() {
     return this._targetTopic;
-  },
+  }
 
   getSourceTopic() {
     return this._sourceTopic;
-  },
+  }
 
   getLineType() {
     return this._lineType;
-  },
+  }
 
   getLine() {
     return this._line2d;
-  },
+  }
 
   getModel() {
     return this._model;
-  },
+  }
 
   setModel(model) {
     this._model = model;
-  },
+  }
 
   getType() {
     return 'ConnectionLine';
-  },
+  }
 
   getId() {
     return this._model.getId();
-  },
+  }
 
   moveToBack() {
     this._line2d.moveToBack();
-  },
+  }
 
   moveToFront() {
     this._line2d.moveToFront();
-  },
+  }
-});
+}
 
 ConnectionLine.getStrokeColor = () => '#495879';
 

packages/mindplot/src/components/ControlPoint.js

@@ -15,14 +15,14 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 import { $defined } from '@wisemapping/core-js';
 
 import Shape from './util/Shape';
 import ActionDispatcher from './ActionDispatcher';
 
-const ControlPoint = new Class({
+class ControlPoint {
-  initialize() {
+  constructor() {
     const control1 = new web2d.Elipse({
       width: 6,
       height: 6,
@@ -68,7 +68,7 @@ const ControlPoint = new Class({
     this._controlPointsController[1].addEvent('dblclick', (event) => {
       me._mouseClick(event);
     });
-  },
+  }
 
   setLine(line) {
     if ($defined(this._line)) {
@@ -82,11 +82,11 @@ const ControlPoint = new Class({
     this._orignalCtrlPoint[1] = this._controls[1].clone();
     this._endPoint[0] = this._line.getLine().getFrom().clone();
     this._endPoint[1] = this._line.getLine().getTo().clone();
-  },
+  }
 
   redraw() {
     if ($defined(this._line)) this._createControlPoint();
-  },
+  }
 
   _createControlPoint() {
     this._controls = this._line.getLine().getControlPoints();
@@ -110,9 +110,9 @@ const ControlPoint = new Class({
       this._controls[ControlPoint.TO].x + pos.x,
       this._controls[ControlPoint.TO].y + pos.y - 3,
     );
-  },
+  }
 
-  _removeLine() {},
+  _removeLine() {}
 
   _mouseDown(event, point, me) {
     if (!this._isBinded) {
@@ -130,7 +130,7 @@ const ControlPoint = new Class({
     event.preventDefault();
     event.stopPropagation();
     return false;
-  },
+  }
 
   _mouseMoveEvent(event, point) {
     const screen = this._workspace.getScreenManager();
@@ -153,7 +153,7 @@ const ControlPoint = new Class({
     this._controlLines[point].setFrom(cords.x, cords.y);
     this._controlLines[point].setTo(pos.x - 2, pos.y);
     this._line.getLine().updateLine(point);
-  },
+  }
 
   _mouseUp(event, point) {
     this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction);
@@ -162,13 +162,13 @@ const ControlPoint = new Class({
     const actionDispatcher = ActionDispatcher.getInstance();
     actionDispatcher.moveControlPoint(this, point);
     this._isBinded = false;
-  },
+  }
 
   _mouseClick(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
-  },
+  }
 
   setVisibility(visible) {
     if (visible) {
@@ -181,7 +181,7 @@ const ControlPoint = new Class({
     this._controlPointsController[1].setVisibility(visible);
     this._controlLines[0].setVisibility(visible);
     this._controlLines[1].setVisibility(visible);
-  },
+  }
 
   addToWorkspace(workspace) {
     this._workspace = workspace;
@@ -189,7 +189,7 @@ const ControlPoint = new Class({
     workspace.append(this._controlPointsController[1]);
     workspace.append(this._controlLines[0]);
     workspace.append(this._controlLines[1]);
-  },
+  }
 
   removeFromWorkspace(workspace) {
     this._workspace = null;
@@ -197,20 +197,20 @@ const ControlPoint = new Class({
     workspace.removeChild(this._controlPointsController[1]);
     workspace.removeChild(this._controlLines[0]);
     workspace.removeChild(this._controlLines[1]);
-  },
+  }
 
   getControlPoint(index) {
     return this._controls[index];
-  },
+  }
 
   getOriginalEndPoint(index) {
     return this._endPoint[index];
-  },
+  }
 
   getOriginalCtrlPoint(index) {
     return this._orignalCtrlPoint[index];
-  },
+  }
-});
+}
 
 ControlPoint.FROM = 0;
 ControlPoint.TO = 1;

packages/mindplot/src/components/DesignerKeyboard.js

@@ -18,13 +18,12 @@
 import { $assert } from '@wisemapping/core-js';
 import Keyboard from './Keyboard';
 
-const DesignerKeyboard = new Class({
+class DesignerKeyboard extends Keyboard {
-  Extends: Keyboard,
+  constructor(designer) {
-
+    super(designer);
-  initialize(designer) {
     $assert(designer, 'designer can not be null');
     this._registerEvents(designer);
-  },
+  }
 
   _registerEvents(designer) {
     // Try with the keyboard ..
@@ -264,7 +263,7 @@ const DesignerKeyboard = new Class({
         }
       }
     });
-  },
+  }
 
   _goToBrother(designer, node, direction) {
     const parent = node.getParent();
@@ -277,10 +276,10 @@ const DesignerKeyboard = new Class({
       let dist = null;
       for (let i = 0; i < brothers.length; i++) {
         const sameSide = (x * brothers[i].getPosition().x) >= 0;
-        if (brothers[i] != node && sameSide) {
+        if (brothers[i] !== node && sameSide) {
           const brother = brothers[i];
           const brotherY = brother.getPosition().y;
-          if (direction == 'DOWN' && brotherY > y) {
+          if (direction === 'DOWN' && brotherY > y) {
             let distancia = y - brotherY;
             if (distancia < 0) {
               distancia *= (-1);
@@ -289,7 +288,7 @@ const DesignerKeyboard = new Class({
               dist = distancia;
               target = brothers[i];
             }
-          } else if (direction == 'UP' && brotherY < y) {
+          } else if (direction === 'UP' && brotherY < y) {
             let distance = y - brotherY;
             if (distance < 0) {
               distance *= (-1);
@@ -303,7 +302,7 @@ const DesignerKeyboard = new Class({
       }
       this._goToNode(designer, target);
     }
-  },
+  }
 
   _goToSideChild(designer, node, side) {
     const children = node.getChildren();
@@ -313,13 +312,13 @@ const DesignerKeyboard = new Class({
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
         const childY = child.getPosition().y;
-        if (side == 'LEFT' && child.getPosition().x < 0) {
+        if (side === 'LEFT' && child.getPosition().x < 0) {
           if (top == null || childY < top) {
             target = child;
             top = childY;
           }
         }
-        if (side == 'RIGHT' && child.getPosition().x > 0) {
+        if (side === 'RIGHT' && child.getPosition().x > 0) {
           if (top == null || childY < top) {
             target = child;
             top = childY;
@@ -329,14 +328,14 @@ const DesignerKeyboard = new Class({
 
       this._goToNode(designer, target);
     }
-  },
+  }
 
   _goToParent(designer, node) {
     const parent = node.getParent();
     if (parent) {
       this._goToNode(designer, parent);
     }
-  },
+  }
 
   _goToChild(designer, node) {
     const children = node.getChildren();
@@ -352,7 +351,7 @@ const DesignerKeyboard = new Class({
       }
       this._goToNode(designer, target);
     }
-  },
+  }
 
   _goToNode(designer, node) {
     // First deselect all the nodes ...
@@ -360,9 +359,8 @@ const DesignerKeyboard = new Class({
 
     // Give focus to the selected node....
     node.setOnFocus(true);
-  },
+  }
-
+}
-});
 
 DesignerKeyboard.specialKeys = {
   8: 'backspace',

packages/mindplot/src/components/DesignerUndoManager.js

@@ -17,12 +17,12 @@
  */
 import { $assert } from '@wisemapping/core-js';
 
-const DesignerUndoManager = new Class({
+class DesignerUndoManager {
-  initialize(fireChange) {
+  constructor() {
     this._undoQueue = [];
     this._redoQueue = [];
     this._baseId = 0;
-  },
+  }
 
   enqueue(command) {
     $assert(command, 'Command can  not be null');
@@ -37,7 +37,7 @@ const DesignerUndoManager = new Class({
       this._undoQueue.push(command);
     }
     this._redoQueue = [];
-  },
+  }
 
   execUndo(commandContext) {
     if (this._undoQueue.length > 0) {
@@ -46,7 +46,7 @@ const DesignerUndoManager = new Class({
 
       command.undoExecute(commandContext);
     }
-  },
+  }
 
   execRedo(commandContext) {
     if (this._redoQueue.length > 0) {
@@ -54,11 +54,11 @@ const DesignerUndoManager = new Class({
       this._undoQueue.push(command);
       command.execute(commandContext);
     }
-  },
+  }
 
   buildEvent() {
     return { undoSteps: this._undoQueue.length, redoSteps: this._redoQueue.length };
-  },
+  }
 
   markAsChangeBase() {
     const undoLength = this._undoQueue.length;
@@ -68,7 +68,7 @@ const DesignerUndoManager = new Class({
     } else {
       this._baseId = 0;
     }
-  },
+  }
 
   hasBeenChanged() {
     let result = true;
@@ -80,7 +80,7 @@ const DesignerUndoManager = new Class({
       result = (this._baseId != command.getId());
     }
     return result;
-  },
+  }
-});
+}
 
 export default DesignerUndoManager;

packages/mindplot/src/components/DragConnector.js

@@ -16,15 +16,16 @@
  *   limitations under the License.
  */
 import { $assert } from '@wisemapping/core-js';
-const DragConnector = new Class({
+
-  initialize(designerModel, workspace) {
+class DragConnector {
+  constructor(designerModel, workspace) {
     $assert(designerModel, 'designerModel can not be null');
     $assert(workspace, 'workspace can not be null');
 
     // this._layoutManager = layoutManager;
     this._designerModel = designerModel;
     this._workspace = workspace;
-  },
+  }
 
   checkConnection(dragTopic) {
     const topics = this._designerModel.getTopics();
@@ -41,7 +42,7 @@ const DragConnector = new Class({
     if (!dragTopic.isConnected() && candidates.length > 0) {
       dragTopic.connectTo(candidates[0]);
     }
-  },
+  }
 
   _searchConnectionCandidates(dragTopic) {
     let topics = this._designerModel.getTopics();
@@ -92,18 +93,18 @@ const DragConnector = new Class({
       return me._proximityWeight(av, a, sPos, currentConnection) - me._proximityWeight(bv, b, sPos, currentConnection);
     });
     return topics;
-  },
+  }
 
   _proximityWeight(isAligned, target, sPos, currentConnection) {
     const tPos = target.getPosition();
     return (isAligned ? 0 : 200) + Math.abs(tPos.x - sPos.x) + Math.abs(tPos.y - sPos.y) + (currentConnection == target ? 0 : 100);
-  },
+  }
 
   _isVerticallyAligned(targetSize, targetPosition, sourcePosition) {
     return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2;
-  },
+  }
 
-});
+}
 
 DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE = 80;
 

packages/mindplot/src/components/DragManager.js

@@ -18,15 +18,15 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import DragTopic from './DragTopic';
 
-const DragManager = new Class({
+class DragManager {
-  initialize(workspace, eventDispatcher) {
+  constructor(workspace, eventDispatcher) {
     this._workspace = workspace;
     this._designerModel = workspace;
     this._listeners = {};
     this._isDragInProcess = false;
     this._eventDispatcher = eventDispatcher;
     DragTopic.init(this._workspace);
-  },
+  }
 
   add(node) {
     // Add behaviour ...
@@ -34,7 +34,7 @@ const DragManager = new Class({
     const screen = workspace.getScreenManager();
     const dragManager = this;
     const me = this;
-    const mouseDownListener = function (event) {
+    const mouseDownListener = function mouseDownListener(event) {
       if (workspace.isWorkspaceEventsEnabled()) {
         // Disable double drag...
         workspace.enableWorkspaceEvents(false);
@@ -56,7 +56,7 @@ const DragManager = new Class({
       }
     };
     node.addEvent('mousedown', mouseDownListener);
-  },
+  }
 
   remove(node) {
     const nodes = this._topics;
@@ -68,7 +68,7 @@ const DragManager = new Class({
         index = i;
       }
     }
-  },
+  }
 
   _buildMouseMoveListener(workspace, dragNode, dragManager) {
     const screen = workspace.getScreenManager();
@@ -98,7 +98,7 @@ const DragManager = new Class({
     };
     dragManager._mouseMoveListener = result;
     return result;
-  },
+  }
 
   _buildMouseUpListener(workspace, node, dragNode, dragManager) {
     const screen = workspace.getScreenManager();
@@ -131,7 +131,7 @@ const DragManager = new Class({
     };
     dragManager._mouseUpListener = result;
     return result;
-  },
+  }
 
   /**
      * type:
@@ -141,7 +141,7 @@ const DragManager = new Class({
      */
   addEvent(type, listener) {
     this._listeners[type] = listener;
-  },
+  }
-});
+}
 
 export default DragManager;

packages/mindplot/src/components/DragPivot.js

@@ -16,14 +16,14 @@
  *   limitations under the License.
  */
 import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 import DragTopicConfig from './DragTopicConfig';
 import Shape from './util/Shape';
 import INodeModel from './model/INodeModel';
 
-const DragPivot = new Class({
+class DragPivot {
-  initialize() {
+  constructor() {
     this._position = new web2d.Point();
     this._size = DragTopicConfig.PIVOT_SIZE;
 
@@ -33,15 +33,15 @@ const DragPivot = new Class({
     this._connectRect = this._buildRect();
     this._targetTopic = null;
     this._isVisible = false;
-  },
+  }
 
   isVisible() {
     return this._isVisible;
-  },
+  }
 
   getTargetTopic() {
     return this._targetTopic;
-  },
+  }
 
   _buildStraightLine() {
     const line = new web2d.CurvedLine();
@@ -50,7 +50,7 @@ const DragPivot = new Class({
     line.setOpacity(0.4);
     line.setVisibility(false);
     return line;
-  },
+  }
 
   _buildCurvedLine() {
     const line = new web2d.CurvedLine();
@@ -59,7 +59,7 @@ const DragPivot = new Class({
     line.setOpacity(0.4);
     line.setVisibility(false);
     return line;
-  },
+  }
 
   _redrawLine() {
     // Update line position.
@@ -90,16 +90,16 @@ const DragPivot = new Class({
     // This solve several strange effects ;)
     const targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint);
     line.setTo(targetPoint.x, targetPoint.y);
-  },
+  }
 
   setPosition(point) {
     this._position = point;
     this._redrawLine();
-  },
+  }
 
   getPosition() {
     return this._position;
-  },
+  }
 
   _buildRect() {
     const size = this._size;
@@ -113,16 +113,16 @@ const DragPivot = new Class({
     const rect = new web2d.Rect(0, rectAttributes);
     rect.setVisibility(false);
     return rect;
-  },
+  }
 
   _getPivotRect() {
     return this._dragPivot;
-  },
+  }
 
   getSize() {
     const elem2d = this._getPivotRect();
     return elem2d.getSize();
-  },
+  }
 
   setVisibility(value) {
     if (this.isVisible() != value) {
@@ -138,7 +138,7 @@ const DragPivot = new Class({
       }
       this._isVisible = value;
     }
-  },
+  }
 
   // If the node is connected, validate that there is a line connecting both...
   _getConnectionLine() {
@@ -152,7 +152,7 @@ const DragPivot = new Class({
       }
     }
     return result;
-  },
+  }
 
   addToWorkspace(workspace) {
     const pivotRect = this._getPivotRect();
@@ -178,7 +178,7 @@ const DragPivot = new Class({
     connectRect.setVisibility(false);
     workspace.append(connectRect);
     connectRect.moveToBack();
-  },
+  }
 
   removeFromWorkspace(workspace) {
     const shape = this._getPivotRect();
@@ -194,7 +194,7 @@ const DragPivot = new Class({
     if ($defined(this._curvedLine)) {
       workspace.removeChild(this._curvedLine);
     }
-  },
+  }
 
   connectTo(targetTopic, position) {
     $assert(!this._outgoingLine, 'Could not connect an already connected node');
@@ -226,7 +226,7 @@ const DragPivot = new Class({
     pivotRect.setPosition(position.x, position.y);
 
     this._redrawLine();
-  },
+  }
 
   disconnect(workspace) {
     $assert(workspace, 'workspace can not be null.');
@@ -234,7 +234,7 @@ const DragPivot = new Class({
 
     this.setVisibility(false);
     this._targetTopic = null;
-  },
+  }
-});
+}
 
 export default DragPivot;

packages/mindplot/src/components/DragTopic.js

@@ -16,13 +16,13 @@
  *   limitations under the License.
  */
 import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 import ActionDispatcher from './ActionDispatcher';
 import DragPivot from './DragPivot';
 
-const DragTopic = new Class({
+class DragTopic {
-  initialize(dragShape, draggedNode, layoutManger) {
+  constructor(dragShape, draggedNode, layoutManger) {
     $assert(dragShape, 'Rect can not be null.');
     $assert(draggedNode, 'draggedNode can not be null.');
     $assert(layoutManger, 'layoutManger can not be null.');
@@ -34,11 +34,11 @@ const DragTopic = new Class({
     this._position = new web2d.Point();
     this._isInWorkspace = false;
     this._isFreeLayoutEnabled = false;
-  },
+  }
 
   setOrder(order) {
     this._order = order;
-  },
+  }
 
   setPosition(x, y) {
     // Update drag shadow position ....
@@ -78,7 +78,7 @@ const DragTopic = new Class({
         this.setOrder(predict.order);
       }
     }
-  },
+  }
 
   updateFreeLayout(event) {
     const isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac);
@@ -87,27 +87,27 @@ const DragTopic = new Class({
       dragPivot.setVisibility(!isFreeEnabled);
       this._isFreeLayoutEnabled = isFreeEnabled;
     }
-  },
+  }
 
   setVisibility(value) {
     const dragPivot = this._getDragPivot();
     dragPivot.setVisibility(value);
-  },
+  }
 
   isVisible() {
     const dragPivot = this._getDragPivot();
     return dragPivot.isVisible();
-  },
+  }
 
   getInnerShape() {
     return this._elem2d;
-  },
+  }
 
   disconnect(workspace) {
     // Clear connection line ...
     const dragPivot = this._getDragPivot();
     dragPivot.disconnect(workspace);
-  },
+  }
 
   connectTo(parent) {
     $assert(parent, 'Parent connection node can not be null.');
@@ -126,11 +126,11 @@ const DragTopic = new Class({
     dragPivot.setVisibility(true);
 
     this.setOrder(predict.order);
-  },
+  }
 
   getDraggedTopic() {
     return this._draggedNode;
-  },
+  }
 
   removeFromWorkspace(workspace) {
     if (this._isInWorkspace) {
@@ -143,11 +143,11 @@ const DragTopic = new Class({
 
       this._isInWorkspace = false;
     }
-  },
+  }
 
   isInWorkspace() {
     return this._isInWorkspace;
-  },
+  }
 
   addToWorkspace(workspace) {
     if (!this._isInWorkspace) {
@@ -156,19 +156,19 @@ const DragTopic = new Class({
       dragPivot.addToWorkspace(workspace);
       this._isInWorkspace = true;
     }
-  },
+  }
 
   _getDragPivot() {
     return DragTopic.__getDragPivot();
-  },
+  }
 
   getPosition() {
     return this._position;
-  },
+  }
 
   isDragTopic() {
     return true;
-  },
+  }
 
   applyChanges(workspace) {
     $assert(workspace, 'workspace can not be null');
@@ -193,23 +193,23 @@ const DragTopic = new Class({
     } else {
       actionDispatcher.moveTopic(topicId, position);
     }
-  },
+  }
 
   getConnectedToTopic() {
     const dragPivot = this._getDragPivot();
     return dragPivot.getTargetTopic();
-  },
+  }
 
   isConnected() {
     return this.getConnectedToTopic() != null;
-  },
+  }
 
   isFreeLayoutOn() {
     //        return  this._isFreeLayoutEnabled;
     // Disable free layout ...
     return false;
-  },
+  }
-});
+}
 
 DragTopic.init = function (workspace) {
   $assert(workspace, 'workspace can not be null');

packages/mindplot/src/components/EditorProperties.js

@@ -16,23 +16,23 @@
  *   limitations under the License.
  */
 
-const EditorProperties = new Class({
+class EditorProperties {
-  initialize() {
+  constructor() {
     this._zoom = 0;
     this._position = 0;
-  },
+  }
 
   setZoom(zoom) {
     this._zoom = zoom;
-  },
+  }
 
   getZoom() {
     return this._zoom;
-  },
+  }
 
   asProperties() {
     return `zoom=${this._zoom}\n`;
-  },
+  }
-});
+}
 
 export default EditorProperties;

packages/mindplot/src/components/Icon.js

@@ -16,44 +16,45 @@
  *   limitations under the License.
  */
 import { $assert } from "@wisemapping/core-js";
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
-const Icon = new Class({
+class Icon {
-  initialize(url) {
+  constructor(url) {
     $assert(url, 'topic can not be null');
     this._image = new web2d.Image();
     this._image.setHref(url);
     this._image.setSize(Icon.SIZE, Icon.SIZE);
-  },
+  }
 
   getImage() {
     return this._image;
-  },
+  }
 
   setGroup(group) {
     this._group = group;
-  },
+  }
 
   getGroup() {
     return this._group;
-  },
+  }
 
   getSize() {
     return this._image.getSize();
-  },
+  }
 
   getPosition() {
     return this._image.getPosition();
-  },
+  }
 
   addEvent(type, fnc) {
     this._image.addEvent(type, fnc);
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   remove() {
     throw new Error('Unsupported operation');
-  },
+  }
-});
+}
 
 Icon.SIZE = 90;
 

packages/mindplot/src/components/IconGroup.js

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 import Icon from './Icon';
 

packages/mindplot/src/components/ImageIcon.js

@@ -15,23 +15,22 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { $assert } from "@wisemapping/core-js";
+import { $assert } from '@wisemapping/core-js';
 import Icon from './Icon';
 import ActionDispatcher from './ActionDispatcher';
 
-const ImageIcon = new Class({
+class ImageIcon extends Icon {
-  Extends: Icon,
+  constructor(topic, iconModel, readOnly) {
-  initialize(topic, iconModel, readOnly) {
     $assert(iconModel, 'iconModel can not be null');
     $assert(topic, 'topic can not be null');
 
-    this._topicId = topic.getId();
-    this._featureModel = iconModel;
-
     // Build graph image representation ...
     const iconType = iconModel.getIconType();
-    const imgUrl = this._getImageUrl(iconType);
+    const imgUrl = ImageIcon._getImageUrl(iconType);
-    this.parent(imgUrl);
+    super(imgUrl);
+
+    this._topicId = topic.getId();
+    this._featureModel = iconModel;
     
     if (!readOnly) {
       // Icon
@@ -39,33 +38,33 @@ const ImageIcon = new Class({
       const me = this;
       image.addEvent('click', () => {
         const iconType = iconModel.getIconType();
-        const newIconType = me._getNextFamilyIconId(iconType);
+        const newIconType = ImageIcon._getNextFamilyIconId(iconType);
         iconModel.setIconType(newIconType);
 
-        const imgUrl = me._getImageUrl(newIconType);
+        const imgUrl = ImageIcon._getImageUrl(newIconType);
         me._image.setHref(imgUrl);
       });
       this._image.setCursor('pointer');
     }
-  },
+  }
 
-  _getImageUrl(iconId) {
+  static _getImageUrl(iconId) {
     return `icons/${iconId}.png`;
-  },
+  }
 
   getModel() {
     return this._featureModel;
-  },
+  }
 
-  _getNextFamilyIconId(iconId) {
+  static _getNextFamilyIconId(iconId) {
-    const familyIcons = this._getFamilyIcons(iconId);
+    const familyIcons = ImageIcon._getFamilyIcons(iconId);
     $assert(familyIcons != null, 'Family Icon not found!');
 
     let result = null;
     for (let i = 0; i < familyIcons.length && result == null; i++) {
-      if (familyIcons[i] == iconId) {
+      if (familyIcons[i] === iconId) {
         // Is last one?
-        if (i == (familyIcons.length - 1)) {
+        if (i === (familyIcons.length - 1)) {
           result = familyIcons[0];
         } else {
           result = familyIcons[i + 1];
@@ -75,32 +74,32 @@ const ImageIcon = new Class({
     }
 
     return result;
-  },
+  }
 
-  _getFamilyIcons(iconId) {
+  static _getFamilyIcons(iconId) {
     $assert(iconId != null, 'id must not be null');
-    $assert(iconId.indexOf('_') != -1, "Invalid icon id (it must contain '_')");
+    $assert(iconId.indexOf('_') !== -1, "Invalid icon id (it must contain '_')");
 
     let result = null;
     for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i++) {
       const family = ImageIcon.prototype.ICON_FAMILIES[i];
       const iconFamilyId = iconId.substr(0, iconId.indexOf('_'));
 
-      if (family.id == iconFamilyId) {
+      if (family.id === iconFamilyId) {
         result = family.icons;
         break;
       }
     }
     return result;
-  },
+  }
 
   remove() {
     const actionDispatcher = ActionDispatcher.getInstance();
     const featureId = this._featureModel.getId();
     const topicId = this._topicId;
     actionDispatcher.removeFeatureFromTopic(topicId, featureId);
-  },
+  }
-});
+}
 
 ImageIcon.prototype.ICON_FAMILIES = [
   { id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] },

packages/mindplot/src/components/LinkIcon.js

@@ -20,20 +20,18 @@ import $ from '@libraries/jquery-2.1.0';
 import Icon from './Icon';
 import LinkIconTooltip from './widget/LinkIconTooltip';
 
-const LinkIcon = new Class({
+class LinkIcon extends Icon {
-
+  constructor(topic, linkModel, readOnly) {
-  Extends: Icon,
-  initialize(topic, linkModel, readOnly) {
     $assert(topic, 'topic can not be null');
     $assert(linkModel, 'linkModel can not be null');
 
-    this.parent(LinkIcon.IMAGE_URL);
+    super(LinkIcon.IMAGE_URL);
     this._linksModel = linkModel;
     this._topic = topic;
     this._readOnly = readOnly;
 
     this._registerEvents();
-  },
+  }
 
   _registerEvents() {
     this._image.setCursor('pointer');
@@ -61,12 +59,12 @@ const LinkIcon = new Class({
     $(this.getImage().peer._native).mouseenter(() => {
       me._tip.show();
     });
-  },
+  }
 
   getModel() {
     return this._linksModel;
-  },
+  }
-});
+}
 LinkIcon.IMAGE_URL = 'images/links.png';
 
 export default LinkIcon;

packages/mindplot/src/components/LocalStorageManager.js

@@ -18,21 +18,20 @@
 import $ from '@libraries/jquery-2.1.0';
 import PersistenceManager from './PersistenceManager';
 
-const LocalStorageManager = new Class({
+class LocalStorageManager extends PersistenceManager {
-  Extends: PersistenceManager,
+  constructor(documentUrl, forceLoad) {
-  initialize(documentUrl, forceLoad) {
+    super();
-    this.parent();
     this.documentUrl = documentUrl;
     this.forceLoad = forceLoad;
-  },
+  }
 
   saveMapXml(mapId, mapXml, pref, saveHistory, events) {
     localStorage.setItem(`${mapId}-xml`, mapXml);
-  },
+  }
 
   discardChanges(mapId) {
     localStorage.removeItem(`${mapId}-xml`);
-  },
+  }
 
   loadMapDom(mapId) {
     let xml = localStorage.getItem(`${mapId}-xml`);
@@ -54,11 +53,11 @@ const LocalStorageManager = new Class({
     }
 
     return jQuery.parseXML(xml);
-  },
+  }
 
   unlockMap(mindmap) {
     // Ignore, no implementation required ...
-  },
+  }
-});
+}
 
 export default LocalStorageManager;

packages/mindplot/src/components/MainTopic.js

@@ -16,148 +16,144 @@
  *   limitations under the License.
  */
 import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 import Topic from './Topic';
 import { TopicShape } from './model/INodeModel';
 import Shape from './util/Shape';
 
-const MainTopic = new Class(
+class MainTopic extends Topic {
-  /** @lends MainTopic */ {
+  /**
-    Extends: Topic,
-    /**
          * @extends mindplot.Topic
          * @constructs
          * @param model
          * @param options
          */
-    initialize(model, options) {
+  constructor(model, options) {
-      this.parent(model, options);
+    super(model, options);
-    },
+    this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
+  }
 
-    INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
+  _buildDragShape() {
+    const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
+    const size = this.getSize();
+    innerShape.setSize(size.width, size.height);
+    innerShape.setPosition(0, 0);
+    innerShape.setOpacity(0.5);
+    innerShape.setCursor('default');
+    innerShape.setVisibility(true);
 
-    _buildDragShape() {
+    const brColor = this.getBorderColor();
-      const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
+    innerShape.setAttribute('strokeColor', brColor);
-      const size = this.getSize();
-      innerShape.setSize(size.width, size.height);
-      innerShape.setPosition(0, 0);
-      innerShape.setOpacity(0.5);
-      innerShape.setCursor('default');
-      innerShape.setVisibility(true);
 
-      const brColor = this.getBorderColor();
+    const bgColor = this.getBackgroundColor();
-      innerShape.setAttribute('strokeColor', brColor);
+    innerShape.setAttribute('fillColor', bgColor);
 
-      const bgColor = this.getBackgroundColor();
+    //  Create group ...
-      innerShape.setAttribute('fillColor', bgColor);
+    const groupAttributes = {
+      width: 100,
+      height: 100,
+      coordSizeWidth: 100,
+      coordSizeHeight: 100,
+    };
+    const group = new web2d.Group(groupAttributes);
+    group.append(innerShape);
 
-      //  Create group ...
+    // Add Text ...
-      const groupAttributes = {
+    if (this.getShapeType() !== TopicShape.IMAGE) {
-        width: 100,
+      const textShape = this._buildTextShape(true);
-        height: 100,
+      const text = this.getText();
-        coordSizeWidth: 100,
+      textShape.setText(text);
-        coordSizeHeight: 100,
+      textShape.setOpacity(0.5);
-      };
+      group.append(textShape);
-      const group = new web2d.Group(groupAttributes);
+    }
-      group.append(innerShape);
+    return group;
+  }
 
-      // Add Text ...
+  /** */
-      if (this.getShapeType() !== TopicShape.IMAGE) {
+  updateTopicShape(targetTopic, workspace) {
-        const textShape = this._buildTextShape(true);
+    // Change figure based on the connected topic ...
-        const text = this.getText();
+    const model = this.getModel();
-        textShape.setText(text);
+    let shapeType = model.getShapeType();
-        textShape.setOpacity(0.5);
+    if (!targetTopic.isCentralTopic()) {
-        group.append(textShape);
-      }
-      return group;
-    },
-
-    /** */
-    updateTopicShape(targetTopic, workspace) {
-      // Change figure based on the connected topic ...
-      const model = this.getModel();
-      let shapeType = model.getShapeType();
-      if (!targetTopic.isCentralTopic()) {
-        if (!$defined(shapeType)) {
-          // Get the real shape type ...
-          shapeType = this.getShapeType();
-          this._setShapeType(shapeType, false);
-        }
-      }
-    },
-
-    /** */
-    disconnect(workspace) {
-      this.parent(workspace);
-      const size = this.getSize();
-
-      const model = this.getModel();
-      let shapeType = model.getShapeType();
       if (!$defined(shapeType)) {
-        // Change figure ...
+        // Get the real shape type ...
         shapeType = this.getShapeType();
-        this._setShapeType(TopicShape.ROUNDED_RECT, false);
+        this._setShapeType(shapeType, false);
       }
-      const innerShape = this.getInnerShape();
+    }
-      innerShape.setVisibility(true);
+  }
-    },
 
-    _updatePositionOnChangeSize(oldSize, newSize) {
+  /** */
-      const xOffset = Math.round((newSize.width - oldSize.width) / 2);
+  disconnect(workspace) {
-      const pos = this.getPosition();
+    this.parent(workspace);
-      if ($defined(pos)) {
+    const size = this.getSize();
-        if (pos.x > 0) {
-          pos.x += xOffset;
-        } else {
-          pos.x -= xOffset;
-        }
-        this.setPosition(pos);
-      }
-    },
 
-    /** */
+    const model = this.getModel();
-    workoutIncomingConnectionPoint(sourcePosition) {
+    let shapeType = model.getShapeType();
-      return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
+    if (!$defined(shapeType)) {
-    },
+      // Change figure ...
+      shapeType = this.getShapeType();
+      this._setShapeType(TopicShape.ROUNDED_RECT, false);
+    }
+    const innerShape = this.getInnerShape();
+    innerShape.setVisibility(true);
+  }
 
-    /** */
+  _updatePositionOnChangeSize(oldSize, newSize) {
-    workoutOutgoingConnectionPoint(targetPosition) {
+    const xOffset = Math.round((newSize.width - oldSize.width) / 2);
-      $assert(targetPosition, 'targetPoint can not be null');
+    const pos = this.getPosition();
-      const pos = this.getPosition();
+    if ($defined(pos)) {
-      const isAtRight = Shape.isAtRight(targetPosition, pos);
+      if (pos.x > 0) {
-      const size = this.getSize();
+        pos.x += xOffset;
-
-      let result;
-      if (this.getShapeType() === TopicShape.LINE) {
-        result = new web2d.Point();
-        const groupPosition = this._elem2d.getPosition();
-        const innerShareSize = this.getInnerShape().getSize();
-
-        if (innerShareSize) {
-          const magicCorrectionNumber = 0.3;
-          if (!isAtRight) {
-            result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
-          } else {
-            result.x = groupPosition.x + magicCorrectionNumber;
-          }
-          result.y = groupPosition.y + innerShareSize.height;
-        } else {
-          // Hack: When the size has not being defined. This is because the node has not being added.
-          // Try to do our best ...
-          if (!isAtRight) {
-            result.x = pos.x + size.width / 2;
-          } else {
-            result.x = pos.x - size.width / 2;
-          }
-          result.y = pos.y + size.height / 2;
-        }
       } else {
-        result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
+        pos.x -= xOffset;
       }
-      return result;
+      this.setPosition(pos);
-    },
+    }
-  },
+  }
-);
+
+  /** */
+  workoutIncomingConnectionPoint(sourcePosition) {
+    return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
+  }
+
+  /** */
+  workoutOutgoingConnectionPoint(targetPosition) {
+    $assert(targetPosition, 'targetPoint can not be null');
+    const pos = this.getPosition();
+    const isAtRight = Shape.isAtRight(targetPosition, pos);
+    const size = this.getSize();
+
+    let result;
+    if (this.getShapeType() === TopicShape.LINE) {
+      result = new web2d.Point();
+      const groupPosition = this._elem2d.getPosition();
+      const innerShareSize = this.getInnerShape().getSize();
+
+      if (innerShareSize) {
+        const magicCorrectionNumber = 0.3;
+        if (!isAtRight) {
+          result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
+        } else {
+          result.x = groupPosition.x + magicCorrectionNumber;
+        }
+        result.y = groupPosition.y + innerShareSize.height;
+      } else {
+        // Hack: When the size has not being defined. This is because the node has not being added.
+        // Try to do our best ...
+        if (!isAtRight) {
+          result.x = pos.x + size.width / 2;
+        } else {
+          result.x = pos.x - size.width / 2;
+        }
+        result.y = pos.y + size.height / 2;
+      }
+    } else {
+      result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
+    }
+    return result;
+  }
+}
 
 export default MainTopic;

packages/mindplot/src/components/MultilineTextEditor.js

@@ -18,12 +18,12 @@
 import Events from './Events';
 import ActionDispatcher from './ActionDispatcher';
 
-const MultilineTextEditor = new Class({
+class MultilineTextEditor extends Events {
-  Extends: Events,
+  constructor() {
-  initialize() {
+    super();
     this._topic = null;
     this._timeoutId = -1;
-  },
+  }
 
   _buildEditor() {
     const result = $('<div></div>')
@@ -46,7 +46,7 @@ const MultilineTextEditor = new Class({
 
     result.append(textareaElem);
     return result;
-  },
+  }
 
   _registerEvents(containerElem) {
     const textareaElem = this._getTextareaElem();
@@ -120,7 +120,7 @@ const MultilineTextEditor = new Class({
     containerElem.on('mousedown', (event) => {
       event.stopPropagation();
     });
-  },
+  }
 
   _adjustEditorSize() {
     if (this.isVisible()) {
@@ -140,11 +140,11 @@ const MultilineTextEditor = new Class({
         height: textElem.height(),
       });
     }
-  },
+  }
 
   isVisible() {
     return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
-  },
+  }
 
   _updateModel() {
     if (this._topic.getText() != this._getText()) {
@@ -154,7 +154,7 @@ const MultilineTextEditor = new Class({
       const actionDispatcher = ActionDispatcher.getInstance();
       actionDispatcher.changeTextToTopic([topicId], text);
     }
-  },
+  }
 
   show(topic, text) {
     // Close a previous node editor if it's opened ...
@@ -172,7 +172,7 @@ const MultilineTextEditor = new Class({
       this._registerEvents(containerElem);
       this._showEditor(text);
     }
-  },
+  }
 
   _showEditor(defaultText) {
     const topic = this._topic;
@@ -208,7 +208,7 @@ const MultilineTextEditor = new Class({
     };
 
     this._timeoutId = displayFunc.delay(10);
-  },
+  }
 
   _setStyle(fontStyle) {
     const inputField = this._getTextareaElem();
@@ -233,21 +233,21 @@ const MultilineTextEditor = new Class({
     };
     inputField.css(style);
     this._containerElem.css(style);
-  },
+  }
 
   _setText(text) {
     const textareaElem = this._getTextareaElem();
     textareaElem.val(text);
     this._adjustEditorSize();
-  },
+  }
 
   _getText() {
     return this._getTextareaElem().val();
-  },
+  }
 
   _getTextareaElem() {
     return this._containerElem.find('textarea');
-  },
+  }
 
   _positionCursor(textareaElem, selectText) {
     textareaElem.focus();
@@ -277,7 +277,7 @@ const MultilineTextEditor = new Class({
         textareaElem.focus();
       }
     }
-  },
+  }
 
   close(update) {
     if (this.isVisible() && this._topic) {
@@ -297,7 +297,7 @@ const MultilineTextEditor = new Class({
       this._timeoutId = -1;
     }
     this._topic = null;
-  },
+  }
-});
+}
 
 export default MultilineTextEditor;

packages/mindplot/src/components/NodeGraph.js

@@ -19,172 +19,170 @@ import { $assert } from '@wisemapping/core-js';
 import TopicConfig from './TopicConfig';
 import DragTopic from './DragTopic';
 
-const NodeGraph = new Class(
+class NodeGraph {
-  /** @lends NodeGraph */ {
+  /**
-    /**
+     * @constructs
-         * @constructs
+     * @param {mindplot.model.NodeModel} nodeModel
-         * @param {mindplot.model.NodeModel} nodeModel
+     * @param {Object<Number, String, Boolean>} options
-         * @param {Object<Number, String, Boolean>} options
+     * @throws will throw an error if nodeModel is null or undefined
-         * @throws will throw an error if nodeModel is null or undefined
+     */
-         */
+  constructor(nodeModel, options) {
-    initialize(nodeModel, options) {
+    $assert(nodeModel, 'model can not be null');
-      $assert(nodeModel, 'model can not be null');
 
-      this._options = options;
+    this._options = options;
-      this._mouseEvents = true;
+    this._mouseEvents = true;
-      this.setModel(nodeModel);
+    this.setModel(nodeModel);
-      this._onFocus = false;
+    this._onFocus = false;
-      this._size = { width: 50, height: 20 };
+    this._size = { width: 50, height: 20 };
-    },
+  }
 
-    /** @return true if option is set to read-only */
+  /** @return true if option is set to read-only */
-    isReadOnly() {
+  isReadOnly() {
-      return this._options.readOnly;
+    return this._options.readOnly;
-    },
+  }
 
-    /** @return model type */
+  /** @return model type */
-    getType() {
+  getType() {
-      const model = this.getModel();
+    const model = this.getModel();
-      return model.getType();
+    return model.getType();
-    },
+  }
 
-    /**
+  /**
          * @param {String} id
          * @throws will throw an error if the topic id is not a number
          */
-    setId(id) {
+  setId(id) {
-      $assert(typeof topic.getId() === 'number', `id is not a number:${id}`);
+    $assert(typeof topic.getId() === 'number', `id is not a number:${id}`);
-      this.getModel().setId(id);
+    this.getModel().setId(id);
-    },
+  }
 
-    _set2DElement(elem2d) {
+  _set2DElement(elem2d) {
-      this._elem2d = elem2d;
+    this._elem2d = elem2d;
-    },
+  }
 
-    /**
+  /**
          * @return 2D element
          * @throws will throw an error if the element is null or undefined within node graph
          */
-    get2DElement() {
+  get2DElement() {
-      $assert(this._elem2d, 'NodeGraph has not been initialized properly');
+    $assert(this._elem2d, 'NodeGraph has not been initialized properly');
-      return this._elem2d;
+    return this._elem2d;
-    },
+  }
 
-    /** @abstract */
+  /** @abstract */
-    setPosition(point, fireEvent) {
+  setPosition(point, fireEvent) {
-      throw new Error('Unsupported operation');
+    throw new Error('Unsupported operation');
-    },
+  }
 
-    /** */
+  /** */
-    addEvent(type, listener) {
+  addEvent(type, listener) {
-      const elem = this.get2DElement();
+    const elem = this.get2DElement();
-      elem.addEvent(type, listener);
+    elem.addEvent(type, listener);
-    },
+  }
 
-    /** */
+  /** */
-    removeEvent(type, listener) {
+  removeEvent(type, listener) {
-      const elem = this.get2DElement();
+    const elem = this.get2DElement();
-      elem.removeEvent(type, listener);
+    elem.removeEvent(type, listener);
-    },
+  }
 
-    /** */
+  /** */
-    fireEvent(type, event) {
+  fireEvent(type, event) {
-      const elem = this.get2DElement();
+    const elem = this.get2DElement();
-      elem.trigger(type, event);
+    elem.trigger(type, event);
-    },
+  }
 
-    /** */
+  /** */
-    setMouseEventsEnabled(isEnabled) {
+  setMouseEventsEnabled(isEnabled) {
-      this._mouseEvents = isEnabled;
+    this._mouseEvents = isEnabled;
-    },
+  }
 
-    /** */
+  /** */
-    isMouseEventsEnabled() {
+  isMouseEventsEnabled() {
-      return this._mouseEvents;
+    return this._mouseEvents;
-    },
+  }
 
-    /** @return {Object<Number>} size */
+  /** @return {Object<Number>} size */
-    getSize() {
+  getSize() {
-      return this._size;
+    return this._size;
-    },
+  }
 
-    /** @param {Object<Number>} size */
+  /** @param {Object<Number>} size */
-    setSize(size) {
+  setSize(size) {
-      this._size.width = parseInt(size.width, 10);
+    this._size.width = parseInt(size.width, 10);
-      this._size.height = parseInt(size.height, 10);
+    this._size.height = parseInt(size.height, 10);
-    },
+  }
 
-    /**
+  /**
          * @return {mindplot.model.NodeModel} the node model
          */
-    getModel() {
+  getModel() {
-      $assert(this._model, 'Model has not been initialized yet');
+    $assert(this._model, 'Model has not been initialized yet');
-      return this._model;
+    return this._model;
-    },
+  }
 
-    /**
+  /**
          * @param {mindplot.NodeModel} model the node model
          * @throws will throw an error if model is null or undefined
          */
-    setModel(model) {
+  setModel(model) {
-      $assert(model, 'Model can not be null');
+    $assert(model, 'Model can not be null');
-      this._model = model;
+    this._model = model;
-    },
+  }
 
-    /** */
+  /** */
-    getId() {
+  getId() {
-      return this._model.getId();
+    return this._model.getId();
-    },
+  }
 
-    /** */
+  /** */
-    setOnFocus(focus) {
+  setOnFocus(focus) {
-      if (this._onFocus !== focus) {
+    if (this._onFocus !== focus) {
-        this._onFocus = focus;
+      this._onFocus = focus;
-        const outerShape = this.getOuterShape();
+      const outerShape = this.getOuterShape();
-        if (focus) {
+      if (focus) {
-          outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
+        outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
-          outerShape.setOpacity(1);
+        outerShape.setOpacity(1);
-        } else {
+      } else {
-          outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
+        outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
-          outerShape.setOpacity(0);
+        outerShape.setOpacity(0);
-        }
-        this.setCursor('move');
-
-        // In any case, always try to hide the editor ...
-        this.closeEditors();
-
-        // Fire event ...
-        this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
       }
-    },
+      this.setCursor('move');
 
-    /** @return {Boolean} true if the node graph is on focus */
+      // In any case, always try to hide the editor ...
-    isOnFocus() {
+      this.closeEditors();
-      return this._onFocus;
-    },
 
-    /** */
+      // Fire event ...
-    dispose(workspace) {
+      this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
-      this.setOnFocus(false);
+    }
-      workspace.removeChild(this);
+  }
-    },
 
-    /** */
+  /** @return {Boolean} true if the node graph is on focus */
-    createDragNode(layoutManager) {
+  isOnFocus() {
-      const dragShape = this._buildDragShape();
+    return this._onFocus;
-      return new DragTopic(dragShape, this, layoutManager);
+  }
-    },
 
-    _buildDragShape() {
+  /** */
-      $assert(false, '_buildDragShape must be implemented by all nodes.');
+  dispose(workspace) {
-    },
+    this.setOnFocus(false);
+    workspace.removeChild(this);
+  }
 
-    /** */
+  /** */
-    getPosition() {
+  createDragNode(layoutManager) {
-      const model = this.getModel();
+    const dragShape = this._buildDragShape();
-      return model.getPosition();
+    return new DragTopic(dragShape, this, layoutManager);
-    },
+  }
-  },
+
-);
+  _buildDragShape() {
+    $assert(false, '_buildDragShape must be implemented by all nodes.');
+  }
+
+  /** */
+  getPosition() {
+    const model = this.getModel();
+    return model.getPosition();
+  }
+}
 
 export default NodeGraph;

packages/mindplot/src/components/NoteIcon.js

@@ -20,18 +20,17 @@ import $ from '@libraries/jquery-2.1.0';
 import Icon from './Icon';
 import FloatingTip from './widget/FloatingTip';
 
-const NoteIcon = new Class({
+class NoteIcon extends Icon {
-  Extends: Icon,
+  constructor(topic, noteModel, readOnly) {
-  initialize(topic, noteModel, readOnly) {
     $assert(topic, 'topic can not be null');
 
-    this.parent(NoteIcon.IMAGE_URL);
+    super(NoteIcon.IMAGE_URL);
     this._linksModel = noteModel;
     this._topic = topic;
     this._readOnly = readOnly;
 
     this._registerEvents();
-  },
+  }
 
   _registerEvents() {
     this._image.setCursor('pointer');
@@ -55,7 +54,7 @@ const NoteIcon = new Class({
       placement: 'bottom',
       destroyOnExit: true,
     });
-  },
+  }
 
   _buildTooltipContent() {
     if ($('body').find('#textPopoverNote').length === 1) {
@@ -72,12 +71,12 @@ const NoteIcon = new Class({
       result.append(text);
       return result;
     }
-  },
+  }
 
   getModel() {
     return this._linksModel;
-  },
+  }
-});
+}
 
 NoteIcon.IMAGE_URL = 'images/notes.png';
 

packages/mindplot/src/components/Options.js

@@ -1,4 +1,4 @@
-const Options = new Class({
+class Options {
 
   setOptions() {
     const options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments));
@@ -10,8 +10,8 @@ const Options = new Class({
       }
     }
     return this;
-  },
+  }
 
-});
+}
 
 export default Options;

packages/mindplot/src/components/PersistenceManager.js

@@ -18,8 +18,7 @@
 import { $assert, innerXML } from '@wisemapping/core-js';
 import XMLSerializerFactory from './persistence/XMLSerializerFactory';
 
-const PersistenceManager = new Class({
+class PersistenceManager {
-  initialize() { },
 
   save(mindmap, editorProperties, saveHistory, events, sync) {
     $assert(mindmap, 'mindmap can not be null');
@@ -39,30 +38,30 @@ const PersistenceManager = new Class({
       console.log(e);
       events.onError(this._buildError());
     }
-  },
+ }
 
   load(mapId) {
     $assert(mapId, 'mapId can not be null');
     const domDocument = this.loadMapDom(mapId);
     return PersistenceManager.loadFromDom(mapId, domDocument);
-  },
+ }
 
   discardChanges(mapId) {
     throw new Error('Method must be implemented');
-  },
+ }
 
   loadMapDom(mapId) {
     throw new Error('Method must be implemented');
-  },
+ }
 
   saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
     throw new Error('Method must be implemented');
-  },
+ }
 
   unlockMap(mindmap) {
     throw new Error('Method must be implemented');
-  },
+ }
-});
+}
 
 PersistenceManager.init = function (instance) {
   PersistenceManager._instance = instance;

packages/mindplot/src/components/Relationship.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 import { $assert, $defined } from '@wisemapping/core-js';
 
 import ConnectionLine from './ConnectionLine';
@@ -25,14 +25,12 @@ import INodeModel from './model/INodeModel';
 
 import Shape from './util/Shape';
 
-const Relationship = new Class({
+class Relationship extends ConnectionLine {
-  Extends: ConnectionLine,
+  constructor(sourceNode, targetNode, model) {
-
-  initialize(sourceNode, targetNode, model) {
     $assert(sourceNode, 'sourceNode can not be null');
     $assert(targetNode, 'targetNode can not be null');
 
-    this.parent(sourceNode, targetNode, model.getLineType());
+    super(sourceNode, targetNode, model.getLineType());
     this.setModel(model);
 
     const strokeColor = Relationship.getStrokeColor();
@@ -74,12 +72,12 @@ const Relationship = new Class({
       const destPoint = model.getDestCtrlPoint().clone();
       this.setDestControlPoint(destPoint);
     }
-  },
+  }
 
   setStroke(color, style, opacity) {
     this.parent(color, style, opacity);
     this._startArrow.setStrokeColor(color);
-  },
+  }
 
   redraw() {
     const line2d = this._line2d;
@@ -134,7 +132,7 @@ const Relationship = new Class({
     }
     this._focusShape.moveToBack();
     this._controlPointsController.redraw();
-  },
+  }
 
   _positionArrows() {
     const tpos = this._line2d.getTo();
@@ -165,7 +163,7 @@ const Relationship = new Class({
       this._endArrow.setVisibility(this.isVisible());
     }
     this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
-  },
+  }
 
   addToWorkspace(workspace) {
     workspace.append(this._focusShape);
@@ -181,11 +179,11 @@ const Relationship = new Class({
     this.parent(workspace);
     this._positionArrows();
     this.redraw();
-  },
+  }
 
   _initializeControlPointController() {
     this.setOnFocus(true);
-  },
+  }
 
   removeFromWorkspace(workspace) {
     workspace.removeChild(this._focusShape);
@@ -196,11 +194,11 @@ const Relationship = new Class({
     if (this._endArrow) workspace.removeChild(this._endArrow);
 
     this.parent(workspace);
-  },
+  }
 
   getType() {
     return Relationship.type;
-  },
+  }
 
   setOnFocus(focus) {
     // Change focus shape
@@ -215,7 +213,7 @@ const Relationship = new Class({
       this._onFocus = focus;
       this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
     }
-  },
+  }
 
   _refreshShape() {
     const sPos = this._line2d.getFrom();
@@ -229,7 +227,7 @@ const Relationship = new Class({
     shapeCtrlPoints[1].x = ctrlPoints[1].x;
     shapeCtrlPoints[1].y = ctrlPoints[1].y;
     this._focusShape.updateLine();
-  },
+  }
 
   addEvent(type, listener) {
     // Translate to web 2d events ...
@@ -239,37 +237,37 @@ const Relationship = new Class({
 
     const line = this._line2d;
     line.addEvent(type, listener);
-  },
+  }
 
   isOnFocus() {
     return this._onFocus;
-  },
+  }
 
   isInWorkspace() {
     return this._isInWorkspace;
-  },
+  }
 
   setVisibility(value) {
     this.parent(value);
     if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
     this._startArrow.setVisibility(this._showStartArrow && value);
-  },
+  }
 
   setOpacity(opacity) {
     this.parent(opacity);
     if (this._showEndArrow) this._endArrow.setOpacity(opacity);
     if (this._showStartArrow) this._startArrow.setOpacity(opacity);
-  },
+  }
 
   setShowEndArrow(visible) {
     this._showEndArrow = visible;
     if (this._isInWorkspace) this.redraw();
-  },
+  }
 
   setShowStartArrow(visible) {
     this._showStartArrow = visible;
     if (this._isInWorkspace) this.redraw();
-  },
+  }
 
   setFrom(x, y) {
     $assert($defined(x), 'x must be defined');
@@ -277,7 +275,7 @@ const Relationship = new Class({
 
     this._line2d.setFrom(x, y);
     this._startArrow.setFrom(x, y);
-  },
+  }
 
   setTo(x, y) {
     $assert($defined(x), 'x must be defined');
@@ -285,47 +283,47 @@ const Relationship = new Class({
 
     this._line2d.setTo(x, y);
     if (this._endArrow) this._endArrow.setFrom(x, y);
-  },
+  }
 
   setSrcControlPoint(control) {
     this._line2d.setSrcControlPoint(control);
     this._startArrow.setControlPoint(control);
-  },
+  }
 
   setDestControlPoint(control) {
     this._line2d.setDestControlPoint(control);
     if (this._showEndArrow) this._endArrow.setControlPoint(control);
-  },
+  }
 
   getControlPoints() {
     return this._line2d.getControlPoints();
-  },
+  }
 
   isSrcControlPointCustom() {
     return this._line2d.isSrcControlPointCustom();
-  },
+  }
 
   isDestControlPointCustom() {
     return this._line2d.isDestControlPointCustom();
-  },
+  }
 
   setIsSrcControlPointCustom(isCustom) {
     this._line2d.setIsSrcControlPointCustom(isCustom);
-  },
+  }
 
   setIsDestControlPointCustom(isCustom) {
     this._line2d.setIsDestControlPointCustom(isCustom);
-  },
+  }
 
   getId() {
     return this._model.getId();
-  },
+  }
 
   fireEvent(type, event) {
     const elem = this._line2d;
     elem.trigger(type, event);
-  },
+  }
-});
+}
 
 Relationship.getStrokeColor = function getStrokeColor() {
   return '#9b74e6';

packages/mindplot/src/components/RelationshipPivot.js

@@ -15,14 +15,14 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 import { $assert } from '@wisemapping/core-js';
 import Relationship from './Relationship';
 import INodeModel from './model/INodeModel';
 import Shape from './util/Shape';
 
-const RelationshipPivot = new Class({
+class RelationshipPivot {
-  initialize(workspace, designer) {
+  constructor(workspace, designer) {
     $assert(workspace, 'workspace can not be null');
     $assert(designer, 'designer can not be null');
     this._workspace = workspace;
@@ -32,7 +32,7 @@ const RelationshipPivot = new Class({
     this._mouseMoveEvent = this._mouseMove.bind(this);
     this._onClickEvent = this._cleanOnMouseClick.bind(this);
     this._onTopicClick = this._connectOnFocus.bind(this);
-  },
+  }
 
   start(sourceTopic, targetPos) {
     $assert(sourceTopic, 'sourceTopic can not be null');
@@ -74,7 +74,7 @@ const RelationshipPivot = new Class({
         topic.addEvent('ontfocus', this._onTopicClick);
       });
     }
-  },
+  }
 
   dispose() {
     const workspace = this._workspace;
@@ -98,7 +98,7 @@ const RelationshipPivot = new Class({
       this._pivot = null;
       this._startArrow = null;
     }
-  },
+  }
 
   _mouseMove(event) {
     const screen = this._workspace.getScreenManager();
@@ -120,13 +120,13 @@ const RelationshipPivot = new Class({
 
     event.stopPropagation();
     return false;
-  },
+  }
 
   _cleanOnMouseClick(event) {
     // The user clicks on a desktop on in other element that is not a node.
     this.dispose();
     event.stopPropagation();
-  },
+  }
 
   _calculateFromPosition(toPosition) {
     // Calculate origin position ...
@@ -140,7 +140,7 @@ const RelationshipPivot = new Class({
     spoint.x = parseInt(controlPoint[0].x, 10) + parseInt(sourcePosition.x, 10);
     spoint.y = parseInt(controlPoint[0].y, 10) + parseInt(sourcePosition.y, 10);
     return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
-  },
+  }
 
   _connectOnFocus(event, targetTopic) {
     const sourceTopic = this._sourceTopic;
@@ -152,11 +152,11 @@ const RelationshipPivot = new Class({
       this._designer._actionDispatcher.addRelationship(relModel);
     }
     this.dispose();
-  },
+  }
 
   _isActive() {
     return this._pivot != null;
-  },
+  }
-});
+}
 
 export default RelationshipPivot;

packages/mindplot/src/components/RestPersistenceManager.js

@@ -18,9 +18,8 @@
 import { $assert } from '@wisemapping/core-js';
 import PersistenceManager from './PersistenceManager';
 
-const RESTPersistenceManager = new Class({
+class RESTPersistenceManager extends PersistenceManager{
-  Extends: PersistenceManager,
+  constructor(options) {
-  initialize(options) {
     this.parent();
     $assert(options.documentUrl, 'documentUrl can not be null');
     $assert(options.revertUrl, 'revertUrl can not be null');
@@ -33,7 +32,7 @@ const RESTPersistenceManager = new Class({
     this.lockUrl = options.lockUrl;
     this.timestamp = options.timestamp;
     this.session = options.session;
-  },
+  }
 
   saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
     const data = {
@@ -53,7 +52,7 @@ const RESTPersistenceManager = new Class({
       persistence.clearTimeout = setTimeout(() => {
         persistence.clearTimeout = null;
         persistence.onSave = false;
-      }, 10000);
+      } 10000);
 
       $.ajax({
         url: `${this.documentUrl.replace('{id}', mapId)}?${query}`,
@@ -66,17 +65,17 @@ const RESTPersistenceManager = new Class({
         success(data, textStatus, jqXHRresponseText) {
           persistence.timestamp = data;
           events.onSuccess();
-        },
+        }
         error(jqXHR, textStatus, errorThrown) {
           events.onError(persistence._buildError());
-        },
+        }
         complete() {
           // Clear event timeout ...
           if (persistence.clearTimeout) {
             clearTimeout(persistence.clearTimeout);
           }
           persistence.onSave = false;
-        },
+        }
         fail(xhr, textStatus) {
           const { responseText } = xhr;
           let userMsg = { severity: 'SEVERE', message: $msg('SAVE_COULD_NOT_BE_COMPLETED') };
@@ -96,19 +95,19 @@ const RESTPersistenceManager = new Class({
           }
           events.onError(userMsg);
           persistence.onSave = false;
-        },
+        }
       });
     }
-  },
+  }
 
   discardChanges(mapId) {
     $.ajax({
       url: this.revertUrl.replace('{id}', mapId),
       async: false,
       method: 'post',
-      headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json' },
+      headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json' }
     });
-  },
+  }
 
   unlockMap(mindmap) {
     const mapId = mindmap.getId();
@@ -116,10 +115,10 @@ const RESTPersistenceManager = new Class({
       url: this.lockUrl.replace('{id}', mapId),
       async: false,
       method: 'put',
-      headers: { 'Content-Type': 'text/plain' },
+      headers: { 'Content-Type': 'text/plain' }
       data: 'false',
     });
-  },
+  }
 
   _buildError(jsonSeverResponse) {
     let message = jsonSeverResponse ? jsonSeverResponse.globalErrors[0] : null;
@@ -133,7 +132,7 @@ const RESTPersistenceManager = new Class({
       severity = 'INFO';
     }
     return { severity, message };
-  },
+  }
 
   loadMapDom(mapId) {
     // Let's try to open one from the local directory ...
@@ -142,10 +141,10 @@ const RESTPersistenceManager = new Class({
       url: `${this.documentUrl.replace('{id}', mapId)}/xml`,
       method: 'get',
       async: false,
-      headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' },
+      headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' }
       success(responseText) {
         xml = responseText;
-      },
+      }
     });
 
     // If I could not load it from a file, hard code one.
@@ -154,7 +153,7 @@ const RESTPersistenceManager = new Class({
     }
 
     return xml;
-  },
+  }
-});
+}
 
 export default RESTPersistenceManager;

packages/mindplot/src/components/ScreenManager.js

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import { $assert } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 class ScreenManager {
   constructor(divElement) {

packages/mindplot/src/components/ShrinkConnector.js

@@ -15,13 +15,13 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 import TopicConfig from './TopicConfig';
 import ActionDispatcher from './ActionDispatcher';
 
-const ShirinkConnector = new Class({
+class ShirinkConnector {
-  initialize(topic) {
+  constructor(topic) {
     const ellipse = new web2d.Elipse(TopicConfig.INNER_RECT_ATTRIBUTES);
     this._ellipse = ellipse;
     ellipse.setFill('rgb(62,118,179)');
@@ -61,7 +61,7 @@ const ShirinkConnector = new Class({
     this._fillColor = '#f7f7f7';
     const model = topic.getModel();
     this.changeRender(model.areChildrenShrunken());
-  },
+  }
 
   changeRender(isShrink) {
     const elipse = this._ellipse;
@@ -70,40 +70,40 @@ const ShirinkConnector = new Class({
     } else {
       elipse.setStroke('1', 'solid');
     }
-  },
+  }
 
   setVisibility(value) {
     this._ellipse.setVisibility(value);
-  },
+  }
 
   setOpacity(opacity) {
     this._ellipse.setOpacity(opacity);
-  },
+  }
 
   setFill(color) {
     this._fillColor = color;
     this._ellipse.setFill(color);
-  },
+  }
 
   setAttribute(name, value) {
     this._ellipse.setAttribute(name, value);
-  },
+  }
 
   addToWorkspace(group) {
     group.append(this._ellipse);
-  },
+  }
 
   setPosition(x, y) {
     this._ellipse.setPosition(x, y);
-  },
+  }
 
   moveToBack() {
     this._ellipse.moveToBack();
-  },
+  }
 
   moveToFront() {
     this._ellipse.moveToFront();
-  },
+  }
-});
+}
 
 export default ShirinkConnector;

packages/mindplot/src/components/TextEditor.js

@@ -13,14 +13,14 @@
  *   limitations under the License.
  */
 import { $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 import ActionDispatcher from './ActionDispatcher';
 
 // FIXME: Not used!
-const TextEditor = new Class({
+class TextEditor {
-  initialize(topic) {
+  constructor(topic) {
     this._topic = topic;
-  },
+  }
 
   _buildEditor() {
     this._size = { width: 500, height: 100 };
@@ -61,7 +61,7 @@ const TextEditor = new Class({
     spanElem.inject(spanContainer);
 
     return result;
-  },
+  }
 
   _registerEvents(divElem) {
     const inputElem = this._getTextareaElem();
@@ -99,11 +99,11 @@ const TextEditor = new Class({
     divElem.addEvent('mousedown', (event) => {
       event.stopPropagation();
     });
-  },
+  }
 
   isVisible() {
     return $defined(this._containerElem) && this._containerElem.getStyle('display') === 'block';
-  },
+  }
 
   _updateModel() {
     if (this._topic.getText() !== this._getText()) {
@@ -113,7 +113,7 @@ const TextEditor = new Class({
       const actionDispatcher = ActionDispatcher.getInstance();
       actionDispatcher.changeTextToTopic([topicId], text);
     }
-  },
+  }
 
   show(text) {
     if (!this.isVisible()) {
@@ -125,7 +125,7 @@ const TextEditor = new Class({
       this._registerEvents(editorElem);
       this._showEditor(text);
     }
-  },
+  }
 
   _showEditor(defaultText) {
     const topic = this._topic;
@@ -163,7 +163,7 @@ const TextEditor = new Class({
     };
 
     displayFunc.delay(10);
-  },
+  }
 
   _setStyle(fontStyle) {
     const inputField = this._getTextareaElem();
@@ -189,7 +189,7 @@ const TextEditor = new Class({
     spanField.style.fontStyle = fontStyle.style;
     spanField.style.fontWeight = fontStyle.weight;
     spanField.style.fontSize = `${fontStyle.size}px`;
-  },
+  }
 
   _setText(text) {
     const inputField = this._getTextareaElem();
@@ -200,19 +200,19 @@ const TextEditor = new Class({
     const spanField = this._getSpanElem();
     spanField.innerHTML = text;
     inputField.value = text;
-  },
+  }
 
   _getText() {
     return this._getTextareaElem().value;
-  },
+  }
 
   _getTextareaElem() {
     return this._containerElem.getElement('input');
-  },
+  }
 
   _getSpanElem() {
     return this._containerElem.getElement('span');
-  },
+  }
 
   _setEditorSize(width, height) {
     const textShape = this._topic.getTextShape();
@@ -220,7 +220,7 @@ const TextEditor = new Class({
     this._size = { width: width * scale.width, height: height * scale.height };
     this._containerElem.style.width = `${this._size.width * 2}px`;
     this._containerElem.style.height = `${this._size.height}px`;
-  },
+  }
 
   _positionCursor(inputElem, selectText) {
     // Select text if it's required ...
@@ -238,7 +238,7 @@ const TextEditor = new Class({
     } else if (!selectText) {
       inputElem.setSelectionRange(0, inputElem.value.length);
     }
-  },
+  }
 
   close(update) {
     if (this.isVisible()) {
@@ -254,7 +254,7 @@ const TextEditor = new Class({
       this._containerElem.dispose();
       this._containerElem = null;
     }
-  },
+  }
-});
+}
 
 export default TextEditor;

packages/mindplot/src/components/TopicEventDispatcher.js

@@ -25,25 +25,25 @@ const TopicEvent = {
   CLICK: 'clicknode',
 };
 
-const TopicEventDispatcher = new Class({
+class TopicEventDispatcher extends Events {
-  Extends: Events,
+  constructor(readOnly) 
-
+  {
-  initialize(readOnly) {
+    super();
     this._readOnly = readOnly;
     this._activeEditor = null;
     this._multilineEditor = new MultilineTextEditor();
-  },
+  }
 
   close(update) {
     if (this.isVisible()) {
       this._activeEditor.close(update);
       this._activeEditor = null;
     }
-  },
+  }
 
   show(topic, options) {
     this.process(TopicEvent.EDIT, topic, options);
-  },
+  }
 
   process(eventType, topic, options) {
     $assert(eventType, 'eventType can not be null');
@@ -57,20 +57,20 @@ const TopicEventDispatcher = new Class({
     const model = topic.getModel();
     if (
       model.getShapeType() !== TopicShape.IMAGE
-            && !this._readOnly
+      && !this._readOnly
-            && eventType === TopicEvent.EDIT
+      && eventType === TopicEvent.EDIT
     ) {
       this._multilineEditor.show(topic, options ? options.text : null);
       this._activeEditor = this._multilineEditor;
     } else {
       this.fireEvent(eventType, { model, readOnly: this._readOnly });
     }
-  },
+  }
 
   isVisible() {
     return this._activeEditor != null && this._activeEditor.isVisible();
-  },
+  }
-});
+}
 
 TopicEventDispatcher._instance = null;
 

packages/mindplot/src/components/TopicStyle.js

@@ -18,53 +18,53 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import { TopicShape } from './model/INodeModel';
 
-const TopicStyle = new Class({});
+class TopicStyle {
+  static _getStyles(topic) {
+    $assert(topic, 'topic can not be null');
 
-TopicStyle._getStyles = function _getStyles(topic) {
+    let result;
-  $assert(topic, 'topic can not be null');
+    if (topic.isCentralTopic()) {
-
+      result = TopicStyle.STYLES.CENTRAL_TOPIC;
-  let result;
-  if (topic.isCentralTopic()) {
-    result = TopicStyle.STYLES.CENTRAL_TOPIC;
-  } else {
-    const targetTopic = topic.getOutgoingConnectedTopic();
-    if ($defined(targetTopic)) {
-      if (targetTopic.isCentralTopic()) {
-        result = TopicStyle.STYLES.MAIN_TOPIC;
-      } else {
-        result = TopicStyle.STYLES.SUB_TOPIC;
-      }
     } else {
-      result = TopicStyle.STYLES.ISOLATED_TOPIC;
+      const targetTopic = topic.getOutgoingConnectedTopic();
+      if ($defined(targetTopic)) {
+        if (targetTopic.isCentralTopic()) {
+          result = TopicStyle.STYLES.MAIN_TOPIC;
+        } else {
+          result = TopicStyle.STYLES.SUB_TOPIC;
+        }
+      } else {
+        result = TopicStyle.STYLES.ISOLATED_TOPIC;
+      }
     }
+    return result;
   }
-  return result;
-};
 
-TopicStyle.defaultText = function defaultText(topic) {
+  static defaultText(topic) {
-  const { msgKey } = this._getStyles(topic);
+    const { msgKey } = this._getStyles(topic);
-  return $msg(msgKey);
+    return $msg(msgKey);
-};
+  }
 
-TopicStyle.defaultFontStyle = function defaultFontStyle(topic) {
+  static defaultFontStyle(topic) {
-  return this._getStyles(topic).fontStyle;
+    return this._getStyles(topic).fontStyle;
-};
+  }
 
-TopicStyle.defaultBackgroundColor = function defaultBackgroundColor(topic) {
+  static defaultBackgroundColor(topic) {
-  return this._getStyles(topic).backgroundColor;
+    return this._getStyles(topic).backgroundColor;
-};
+  }
 
-TopicStyle.defaultBorderColor = function defaultBorderColor(topic) {
+  static defaultBorderColor(topic) {
-  return this._getStyles(topic).borderColor;
+    return this._getStyles(topic).borderColor;
-};
+  }
 
-TopicStyle.getInnerPadding = function getInnerPadding(topic) {
+  static getInnerPadding(topic) {
-  return this._getStyles(topic).innerPadding;
+    return this._getStyles(topic).innerPadding;
-};
+  }
 
-TopicStyle.defaultShapeType = function defaultShapeType(topic) {
+  static defaultShapeType(topic) {
-  return this._getStyles(topic).shapeType;
+    return this._getStyles(topic).shapeType;
-};
+  }
+}
 
 TopicStyle.STYLES = {
   CENTRAL_TOPIC: {

packages/mindplot/src/components/Workspace.js

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 
 class Workspace {
   constructor(screenManager, zoom) {

packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js

@@ -17,10 +17,8 @@
  */
 import Command from '../Command';
 
-const AddFeatureToTopicCommand = new Class(
+class AddFeatureToTopicCommand extends Command {
-  /** @lends AddFeatureToTopicCommand */ {
+  /*
-    Extends: Command,
-    /*
     * @classdesc This command class handles do/undo of adding features to topics, e.g. an
     * icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}
     * @constructs
@@ -30,41 +28,40 @@ const AddFeatureToTopicCommand = new Class(
     * @extends mindplot.Command
     * @see mindplot.model.FeatureModel and subclasses
     */
-    initialize(topicId, featureType, attributes) {
+  constructor(topicId, featureType, attributes) {
-      $assert($defined(topicId), 'topicId can not be null');
+    $assert($defined(topicId), 'topicId can not be null');
-      $assert(featureType, 'featureType can not be null');
+    $assert(featureType, 'featureType can not be null');
-      $assert(attributes, 'attributes can not be null');
+    $assert(attributes, 'attributes can not be null');
 
-      this.parent();
+    super();
-      this._topicId = topicId;
+    this._topicId = topicId;
-      this._featureType = featureType;
+    this._featureType = featureType;
-      this._attributes = attributes;
+    this._attributes = attributes;
-      this._featureModel = null;
+    this._featureModel = null;
-    },
+  }
 
-    /**
+  /**
          * Overrides abstract parent method
          */
-    execute(commandContext) {
+  execute(commandContext) {
-      const topic = commandContext.findTopics(this._topicId)[0];
+    const topic = commandContext.findTopics(this._topicId)[0];
 
-      // Feature must be created only one time.
+    // Feature must be created only one time.
-      if (!this._featureModel) {
+    if (!this._featureModel) {
-        const model = topic.getModel();
+      const model = topic.getModel();
-        this._featureModel = model.createFeature(this._featureType, this._attributes);
+      this._featureModel = model.createFeature(this._featureType, this._attributes);
-      }
+    }
-      topic.addFeature(this._featureModel);
+    topic.addFeature(this._featureModel);
-    },
+  }
 
-    /**
+  /**
          * Overrides abstract parent method
          * @see {@link mindplot.Command.undoExecute}
          */
-    undoExecute(commandContext) {
+  undoExecute(commandContext) {
-      const topic = commandContext.findTopics(this._topicId)[0];
+    const topic = commandContext.findTopics(this._topicId)[0];
-      topic.removeFeature(this._featureModel);
+    topic.removeFeature(this._featureModel);
-    },
+  }
-  },
+}
-);
 
 export default AddFeatureToTopicCommand;

packages/mindplot/src/components/commands/AddRelationshipCommand.js

@@ -17,20 +17,19 @@
  */
 import Command from '../Command';
 
-const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
+class AddRelationshipCommand extends Command {
-  Extends: Command,
   /**
      * @classdesc This command class handles do/undo of adding a relationship to a topic.
      * @constructs
      * @param {XMLDOM} model
      * @extends mindplot.Command
      */
-  initialize(model) {
+  constructor(model) {
     $assert(model, 'Relationship model can not be null');
 
-    this.parent();
+    super();
     this._model = model;
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -38,7 +37,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
   execute(commandContext) {
     const relationship = commandContext.addRelationship(this._model);
     relationship.setOnFocus(true);
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -47,7 +46,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
   undoExecute(commandContext) {
     const rel = commandContext.findRelationships(this._model.getId());
     commandContext.deleteRelationship(rel[0]);
-  },
+  }
-});
+}
 
 export default AddRelationshipCommand;

packages/mindplot/src/components/commands/AddTopicCommand.js

@@ -17,81 +17,75 @@
  */
 import Command from '../Command';
 
-const AddTopicCommand = new Class(
+class AddTopicCommand extends Command {
-  /** @lends AddTopicCommand */ {
+  /**
-    Extends: Command,
+   * @classdesc This command class handles do/undo of adding one or multiple topics to
-    /**
+   * the mindmap.
-     * @classdesc This command class handles do/undo of adding one or multiple topics to
+   * @constructs
-     * the mindmap.
+   * @param {Array<mindplot.model.NodeModel>} models one or multiple models
-     * @constructs
+   * @param {Array<String>} parentTopicsId ids of the parent topics to add the children to, or null
-     * @param {Array<mindplot.model.NodeModel>} models one or multiple models
+   * when attaching a dragged node or a node/branch from clipboard
-     * @param {Array<String>} parentTopicsId ids of the parent topics to add the children to, or null
+   * @extends mindplot.Command
-     * when attaching a dragged node or a node/branch from clipboard
+   */
-     * @extends mindplot.Command
+  constructor(models, parentTopicsId) {
-     */
+    $assert(models, 'models can not be null');
-    initialize(models, parentTopicsId) {
+    $assert(parentTopicsId == null || parentTopicsId.length == models.length, 'parents and models must have the same size');
-      $assert(models, 'models can not be null');
-      $assert(
-        parentTopicsId == null || parentTopicsId.length == models.length,
-        'parents and models must have the same size',
-      );
 
-      this.parent();
+    super();
-      this._models = models;
+    this._models = models;
-      this._parentsIds = parentTopicsId;
+    this._parentsIds = parentTopicsId;
-    },
+  }
 
-    /**
+  /**
-         * Overrides abstract parent method
+       * Overrides abstract parent method
-         */
+       */
-    execute(commandContext) {
+  execute(commandContext) {
-      const me = this;
+    const me = this;
-      _.each(this._models, (model, index) => {
+    _.each(this._models, (model, index) => {
-        // Add a new topic ...
+      // Add a new topic ...
-        const topic = commandContext.createTopic(model);
+      const topic = commandContext.createTopic(model);
 
-        // Connect to topic ...
+      // Connect to topic ...
-        if (me._parentsIds) {
+      if (me._parentsIds) {
-          const parentId = me._parentsIds[index];
+        const parentId = me._parentsIds[index];
-          if ($defined(parentId)) {
+        if ($defined(parentId)) {
-            const parentTopic = commandContext.findTopics(parentId)[0];
+          const parentTopic = commandContext.findTopics(parentId)[0];
-            commandContext.connect(topic, parentTopic);
+          commandContext.connect(topic, parentTopic);
-          }
-        } else {
-          commandContext.addTopic(topic);
         }
+      } else {
+        commandContext.addTopic(topic);
+      }
 
-        // Select just created node ...
+      // Select just created node ...
-        const designer = commandContext._designer;
+      const designer = commandContext._designer;
-        designer.onObjectFocusEvent(topic);
+      designer.onObjectFocusEvent(topic);
-        topic.setOnFocus(true);
+      topic.setOnFocus(true);
 
-        // Render node ...
+      // Render node ...
-        topic.setVisibility(true);
+      topic.setVisibility(true);
-      });
+    });
-    },
+  }
 
-    /**
+  /**
-         * Overrides abstract parent method
+       * Overrides abstract parent method
-         * @see {@link mindplot.Command.undoExecute}
+       * @see {@link mindplot.Command.undoExecute}
-         */
+       */
-    undoExecute(commandContext) {
+  undoExecute(commandContext) {
-      // Delete disconnected the nodes. Create a copy of the topics ...
+    // Delete disconnected the nodes. Create a copy of the topics ...
-      const clonedModel = [];
+    const clonedModel = [];
-      _.each(this._models, (model) => {
+    _.each(this._models, (model) => {
-        clonedModel.push(model.clone());
+      clonedModel.push(model.clone());
-      });
+    });
 
-      // Finally, remove the nodes ...
+    // Finally, remove the nodes ...
-      _.each(this._models, (model) => {
+    _.each(this._models, (model) => {
-        const topicId = model.getId();
+      const topicId = model.getId();
-        const topic = commandContext.findTopics(topicId)[0];
+      const topic = commandContext.findTopics(topicId)[0];
-        commandContext.deleteTopic(topic);
+      commandContext.deleteTopic(topic);
-      });
+    });
 
-      this._models = clonedModel;
+    this._models = clonedModel;
-    },
+  }
-  },
+}
-);
 
 export default AddTopicCommand;

packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js

@@ -17,8 +17,7 @@
  */
 import Command from '../Command';
 
-const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCommand */{
+class ChangeFeatureToTopicCommand extends Command {
-  Extends: Command,
   /**
      * @extends mindplot.Command
      * @constructs
@@ -29,16 +28,16 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
      * @throws will throw an error if featureId is null or undefined
      * @throws will throw an error if attributes is null or undefined
      */
-  initialize(topicId, featureId, attributes) {
+  constructor(topicId, featureId, attributes) {
     $assert($defined(topicId), 'topicId can not be null');
     $assert($defined(featureId), 'featureId can not be null');
     $assert($defined(attributes), 'attributes can not be null');
 
-    this.parent();
+    super();
     this._topicId = topicId;
     this._featureId = featureId;
     this._attributes = attributes;
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -50,7 +49,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
     const oldAttributes = feature.getAttributes();
     feature.setAttributes(this._attributes);
     this._attributes = oldAttributes;
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -58,7 +57,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
      */
   undoExecute(commandContext) {
     this.execute(commandContext);
-  },
+  }
-});
+}
 
 export default ChangeFeatureToTopicCommand;

packages/mindplot/src/components/commands/DeleteCommand.js

@@ -17,8 +17,7 @@
  */
 import Command from '../Command';
 
-const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
+class DeleteCommand extends Command {
-  Extends: Command,
   /**
      * @classdesc This command class handles do/undo of deleting a topic.
      * @constructs
@@ -26,16 +25,16 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
      * @param {Array<String>} relIds ids of the relationships connected to the topics
      * @extends mindplot.Command
      */
-  initialize(topicIds, relIds) {
+  constructor(topicIds, relIds) {
     $assert($defined(relIds), 'topicIds can not be null');
 
-    this.parent();
+    super();
     this._relIds = relIds;
     this._topicIds = topicIds;
     this._deletedTopicModels = [];
     this._deletedRelModel = [];
     this._parentTopicIds = [];
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -81,7 +80,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
         commandContext.deleteRelationship(rel);
       }, this);
     }
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -125,7 +124,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
     this._deletedTopicModels = [];
     this._parentTopicIds = [];
     this._deletedRelModel = [];
-  },
+  }
 
   _filterChildren(topicIds, commandContext) {
     const topics = commandContext.findTopics(topicIds);
@@ -148,7 +147,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
     });
 
     return result;
-  },
+  }
 
   _collectInDepthRelationships(topic) {
     let result = [];
@@ -172,8 +171,8 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
       result = ret;
     }
     return result;
-  },
+  }
 
-});
+}
 
 export default DeleteCommand;

packages/mindplot/src/components/commands/DragTopicCommand.js

@@ -17,8 +17,7 @@
  */
 import Command from '../Command';
 
-const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
+class DragTopicCommand extends Command {
-  Extends: Command,
   /**
      * @classdesc This command class handles do/undo of dragging a topic to a new position.
      * @constructs
@@ -28,7 +27,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
      * @param {mindplot.Topic} parentTopic the topic to be made the dragged topic's new parent
      * @extends mindplot.Command
      */
-  initialize(topicId, position, order, parentTopic) {
+  constructor(topicId, position, order, parentTopic) {
     $assert(topicId, 'topicId must be defined');
 
     this._topicsId = topicId;
@@ -37,7 +36,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
     this.parent();
     this._position = position;
     this._order = order;
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -85,7 +84,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
     // Store for undo ...
     this._order = origOrder;
     this._position = origPosition;
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -93,7 +92,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
      */
   undoExecute(commandContext) {
     this.execute(commandContext);
-  },
+  }
-});
+}
 
 export default DragTopicCommand;

packages/mindplot/src/components/commands/GenericFunctionCommand.js

@@ -19,8 +19,7 @@ import { $defined, $assert } from '@wisemapping/core-js';
 import _ from '@libraries/underscore-min';
 import Command from '../Command';
 
-const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
+class GenericFunctionCommand extends Command {
-  Extends: Command,
   /**
      * @classdesc This command handles do/undo of different actions, e.g. moving topics to
      * a different position, changing text or font,... (for full reference check the
@@ -32,16 +31,16 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
      * e.g. color, font family or text
      * @extends mindplot.Command
      */
-  initialize(commandFunc, topicsIds, value) {
+  constructor(commandFunc, topicsIds, value) {
     $assert(commandFunc, 'commandFunc must be defined');
     $assert($defined(topicsIds), 'topicsIds must be defined');
 
-    this.parent();
+    super();
     this._value = value;
     this._topicsId = topicsIds;
     this._commandFunc = commandFunc;
     this._oldValues = [];
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -72,7 +71,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
     } else {
       throw 'Command can not be applied two times in a row.';
     }
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -91,7 +90,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
     } else {
       throw new Error('undo can not be applied.');
     }
-  },
+  }
-});
+}
 
 export default GenericFunctionCommand;

packages/mindplot/src/components/commands/MoveControlPointCommand.js

@@ -17,10 +17,8 @@
  */
 import Command from '../Command';
 
-const MoveControlPointCommand = new Class(
+class MoveControlPointCommand extends Command {
-  /** @lends MoveControlPointCommand */ {
+  /**
-    Extends: Command,
-    /**
          * @classdesc This command handles do/undo of changing the control points of a relationship
          * arrow. These are the two points that appear when the relationship is on focus. They
          * influence how the arrow is drawn (not the source or the destination topic nor the arrow
@@ -31,94 +29,93 @@ const MoveControlPointCommand = new Class(
          * @param ctrlPointController {ControlPoint}
          * @param point {Number} 0 for the destination control point, 1 for the source control point
          */
-    initialize(ctrlPointController, point) {
+  constructor(ctrlPointController, point) {
-      $assert(ctrlPointController, 'line can not be null');
+    $assert(ctrlPointController, 'line can not be null');
-      $assert($defined(point), 'point can not be null');
+    $assert($defined(point), 'point can not be null');
 
-      this.parent();
+    super();
-      this._ctrlPointControler = ctrlPointController;
+    this._ctrlPointControler = ctrlPointController;
-      this._line = ctrlPointController._line;
+    this._line = ctrlPointController._line;
-      this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone();
+    this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone();
-      this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone();
+    this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone();
-      this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone();
+    this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone();
-      switch (point) {
+    switch (point) {
-        case 0:
+      case 0:
-          this._wasCustom = this._line.getLine().isSrcControlPointCustom();
+        this._wasCustom = this._line.getLine().isSrcControlPointCustom();
-          this._endPoint = this._line.getLine().getFrom().clone();
+        this._endPoint = this._line.getLine().getFrom().clone();
-          break;
+        break;
-        case 1:
+      case 1:
-          this._wasCustom = this._line.getLine().isDestControlPointCustom();
+        this._wasCustom = this._line.getLine().isDestControlPointCustom();
-          this._endPoint = this._line.getLine().getTo().clone();
+        this._endPoint = this._line.getLine().getTo().clone();
-          break;
+        break;
-        default:
+      default:
-          break;
+        break;
-      }
+    }
-      this._point = point;
+    this._point = point;
-    },
+  }
 
-    /**
+  /**
          * Overrides abstract parent method
          */
-    execute() {
+  execute() {
-      const model = this._line.getModel();
+    const model = this._line.getModel();
-      switch (this._point) {
+    switch (this._point) {
-        case 0:
+      case 0:
-          model.setSrcCtrlPoint(this._controlPoint.clone());
+        model.setSrcCtrlPoint(this._controlPoint.clone());
-          this._line.setFrom(this._endPoint.x, this._endPoint.y);
+        this._line.setFrom(this._endPoint.x, this._endPoint.y);
-          this._line.setIsSrcControlPointCustom(true);
+        this._line.setIsSrcControlPointCustom(true);
-          this._line.setSrcControlPoint(this._controlPoint.clone());
+        this._line.setSrcControlPoint(this._controlPoint.clone());
-          break;
+        break;
-        case 1:
+      case 1:
-          model.setDestCtrlPoint(this._controlPoint.clone());
+        model.setDestCtrlPoint(this._controlPoint.clone());
-          this._wasCustom = this._line.getLine().isDestControlPointCustom();
+        this._wasCustom = this._line.getLine().isDestControlPointCustom();
-          this._line.setTo(this._endPoint.x, this._endPoint.y);
+        this._line.setTo(this._endPoint.x, this._endPoint.y);
-          this._line.setIsDestControlPointCustom(true);
+        this._line.setIsDestControlPointCustom(true);
-          this._line.setDestControlPoint(this._controlPoint.clone());
+        this._line.setDestControlPoint(this._controlPoint.clone());
-          break;
+        break;
-        default:
+      default:
-          break;
+        break;
-      }
+    }
-      if (this._line.isOnFocus()) {
+    if (this._line.isOnFocus()) {
-        this._line._refreshShape();
+      this._line._refreshShape();
-        this._ctrlPointControler.setLine(this._line);
+      this._ctrlPointControler.setLine(this._line);
-      }
+    }
-      this._line.getLine().updateLine(this._point);
+    this._line.getLine().updateLine(this._point);
-    },
+  }
 
-    /**
+  /**
          * Overrides abstract parent method
          * @see {@link mindplot.Command.undoExecute}
          */
-    undoExecute() {
+  undoExecute() {
-      const line = this._line;
+    const line = this._line;
-      const model = line.getModel();
+    const model = line.getModel();
-      switch (this._point) {
+    switch (this._point) {
-        case 0:
+      case 0:
-          if ($defined(this._oldControlPoint)) {
+        if ($defined(this._oldControlPoint)) {
-            line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y);
+          line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y);
-            model.setSrcCtrlPoint(this._oldControlPoint.clone());
+          model.setSrcCtrlPoint(this._oldControlPoint.clone());
-            line.setSrcControlPoint(this._oldControlPoint.clone());
+          line.setSrcControlPoint(this._oldControlPoint.clone());
-            line.setIsSrcControlPointCustom(this._wasCustom);
+          line.setIsSrcControlPointCustom(this._wasCustom);
-          }
+        }
-          break;
+        break;
-        case 1:
+      case 1:
-          if ($defined(this._oldControlPoint)) {
+        if ($defined(this._oldControlPoint)) {
-            line.setTo(this._originalEndPoint.x, this._originalEndPoint.y);
+          line.setTo(this._originalEndPoint.x, this._originalEndPoint.y);
-            model.setDestCtrlPoint(this._oldControlPoint.clone());
+          model.setDestCtrlPoint(this._oldControlPoint.clone());
-            line.setDestControlPoint(this._oldControlPoint.clone());
+          line.setDestControlPoint(this._oldControlPoint.clone());
-            line.setIsDestControlPointCustom(this._wasCustom);
+          line.setIsDestControlPointCustom(this._wasCustom);
-          }
+        }
-          break;
+        break;
-        default:
+      default:
-          break;
+        break;
-      }
+    }
-      this._line.getLine().updateLine(this._point);
+    this._line.getLine().updateLine(this._point);
-      if (this._line.isOnFocus()) {
+    if (this._line.isOnFocus()) {
-        this._ctrlPointControler.setLine(line);
+      this._ctrlPointControler.setLine(line);
-        line._refreshShape();
+      line._refreshShape();
-      }
+    }
-    },
+  }
-  },
+}
-);
 
 export default MoveControlPointCommand;

packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js

@@ -17,8 +17,7 @@
  */
 import Command from '../Command';
 
-const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopicCommand */{
+class RemoveFeatureFromTopicCommand extends Command {
-  Extends: Command,
   /**
      * @classdesc This command handles do/undo of removing a feature from a topic, e.g. an icon or
      * a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}.
@@ -27,15 +26,15 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
      * @param {String} featureId id of the feature to remove
      * @extends mindplot.Command
      */
-  initialize(topicId, featureId) {
+  constructor(topicId, featureId) {
     $assert($defined(topicId), 'topicId can not be null');
     $assert(featureId, 'iconModel can not be null');
 
-    this.parent();
+    super();
     this._topicId = topicId;
     this._featureId = featureId;
     this._oldFeature = null;
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -45,7 +44,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
     const feature = topic.findFeatureById(this._featureId);
     topic.removeFeature(feature);
     this._oldFeature = feature;
-  },
+  }
 
   /**
      * Overrides abstract parent method
@@ -55,7 +54,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
     const topic = commandContext.findTopics(this._topicId)[0];
     topic.addFeature(this._oldFeature);
     this._oldFeature = null;
-  },
+  }
-});
+}
 
 export default RemoveFeatureFromTopicCommand;

packages/mindplot/src/components/commands/index.js

@@ -1,21 +0,0 @@
-import addFeatureToTopicCommand from './AddFeatureToTopicCommand';
-import addRelationshipCommand from './AddRelationshipCommand';
-import addTopicCommand from './AddTopicCommand';
-import changeFeatureToTopicCommand from './ChangeFeatureToTopicCommand';
-import deleteCommand from './DeleteCommand';
-import dragTopicCommand from './DragTopicCommand';
-import genericFunctionCommand from './GenericFunctionCommand';
-import moveControlPointCommand from './MoveControlPointCommand';
-import removeFeatureFromTopicCommand from './RemoveFeatureFromTopicCommand';
-
-export default {
-  AddFeatureToTopicCommand: addFeatureToTopicCommand,
-  AddRelationshipCommand: addRelationshipCommand,
-  AddTopicCommand: addTopicCommand,
-  ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
-  DeleteCommand: deleteCommand,
-  DragTopicCommand: dragTopicCommand,
-  GenericFunctionCommand: genericFunctionCommand,
-  MoveControlPointCommand: moveControlPointCommand,
-  RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
-};

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

@@ -21,10 +21,10 @@ import Node from './Node';
 import SymmetricSorter from './SymmetricSorter';
 import BalancedSorter from './BalancedSorter';
 
-const OriginalLayout = new Class({
+class OriginalLayout {
-  initialize(treeSet) {
+  constructor(treeSet) {
     this._treeSet = treeSet;
-  },
+  }
 
   /** */
   createNode(id, size, position, type) {
@@ -35,7 +35,7 @@ const OriginalLayout = new Class({
 
     const strategy = type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER;
     return new Node(id, size, position, strategy);
-  },
+  }
 
   /** */
   connectNode(parentId, childId, order) {
@@ -51,7 +51,7 @@ const OriginalLayout = new Class({
 
     // Fire a basic validation ...
     sorter.verify(this._treeSet, parent);
-  },
+  }
 
   /** */
   disconnectNode(nodeId) {
@@ -72,7 +72,7 @@ const OriginalLayout = new Class({
 
     // Fire a basic validation ...
     parent.getSorter().verify(this._treeSet, parent);
-  },
+  }
 
   /** */
   layout() {
@@ -91,7 +91,7 @@ const OriginalLayout = new Class({
       },
       this,
     );
-  },
+  }
 
   _layoutChildren(node, heightById) {
     const nodeId = node.getId();
@@ -154,7 +154,7 @@ const OriginalLayout = new Class({
       },
       this,
     );
-  },
+  }
 
   _calculateAlignOffset(node, child, heightById) {
     if (child.isFree()) {
@@ -191,14 +191,14 @@ const OriginalLayout = new Class({
     }
 
     return offset;
-  },
+  }
 
   _branchIsTaller(node, heightById) {
     return (
       heightById[node.getId()]
       > node.getSize().height + node.getSorter()._getVerticalPadding() * 2
     );
-  },
+  }
 
   _fixOverlapping(node, heightById) {
     const children = this._treeSet.getChildren(node);
@@ -214,7 +214,7 @@ const OriginalLayout = new Class({
       },
       this,
     );
-  },
+  }
 
   _shiftBranches(node, heightById) {
     const shiftedBranches = [node];
@@ -254,7 +254,7 @@ const OriginalLayout = new Class({
       },
       this,
     );
-  },
+  }
 
   _branchesOverlap(branchA, branchB, heightById) {
     // a branch doesn't really overlap with itself
@@ -268,9 +268,8 @@ const OriginalLayout = new Class({
     const bottomB = branchB.getPosition().y + heightById[branchB.getId()] / 2;
 
     return !(topA >= bottomB || bottomA <= topB);
-  },
+  }
-},
+}
-);
 
 /**
  * @type {mindplot.layout.SymmetricSorter}

packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js

@@ -1,23 +1,26 @@
 import Options from '../../Options';
 
-const BootstrapDialog = new Class({
+import $ from '@libraries/jquery-2.1.0';
-  Implements: Options,
 
-  options: {
+class BootstrapDialog extends Options {
-    cancelButton: false,
+  
-    closeButton: false,
+  constructor(title, options) {
-    acceptButton: true,
+    super();
-    removeButton: false,
+    this.options = {
-    errorMessage: false,
+      cancelButton: false,
-    onEventData: {},
+      closeButton: false,
-  },
+      acceptButton: true,
+      removeButton: false,
+      errorMessage: false,
+      onEventData: {},
+    };
   
-  initialize(title, options) {
     this.setOptions(options);
     this.options.onEventData.dialog = this;
     this._native = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>');
     const content = $('<div class="modal-content"></div>');
     const header = this._buildHeader(title);
+
     if (header) {
       content.append(header);
     }
@@ -37,7 +40,7 @@ const BootstrapDialog = new Class({
       $(this).remove();
     });
     this._native.on('shown.bs.modal', this.onDialogShown);
-  },
+  }
 
   _buildFooter() {
     let footer = null;
@@ -58,7 +61,7 @@ const BootstrapDialog = new Class({
       footer.append(`<button type="button" class="btn btn-secondary" data-dismiss="modal">${$msg('CANCEL')}</button>`);
     }
     return footer;
-  },
+  }
 
   _buildHeader(title) {
     let header = null;
@@ -74,42 +77,42 @@ const BootstrapDialog = new Class({
       header.append(`<h2 class="modal-title">${title}</h2>`);
     }
     return header;
-  },
+  }
 
   onAcceptClick(event) {
     throw 'Unsupported operation';
-  },
+  }
 
-  onDialogShown() {},
+  onDialogShown() {}
   onRemoveClick(event) {
     throw 'Unsupported operation';
-  },
+  }
 
   show() {
     this._native.modal();
-  },
+  }
 
   setContent(content) {
     const modalBody = this._native.find('.modal-body');
     modalBody.append(content);
-  },
+  }
 
   css(options) {
     this._native.find('.modal-dialog').css(options);
-  },
+  }
 
   close() {
     this._native.modal('hide');
-  },
+  }
 
   alertError(message) {
     this._native.find('.alert-danger').text(message);
     this._native.find('.alert-danger').show();
-  },
+  }
 
   cleanError() {
     this._native.find('.alert-danger').hide();
-  },
+  }
-});
+}
 
 export default BootstrapDialog;

packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js

@@ -1,11 +1,8 @@
 import BootstrapDialog from './BootstrapDialog';
 
-BootstrapDialog.Request = new Class({
+class BootstrapDialogRequest extends BootstrapDialog {
-
+  constructor(url, title, options) {
-  Extends: BootstrapDialog,
+    super(title, options);
-
-  initialize(url, title, options) {
-    this.parent(title, options);
     this.requestOptions = {};
     this.requestOptions.cache = false;
     const me = this;
@@ -39,12 +36,13 @@ BootstrapDialog.Request = new Class({
       });
       me.show();
     });
-  },
+  }
 
   onDialogShown() {
     if (typeof (onDialogShown) === 'function') {
       onDialogShown();
     }
-  },
+  }
+}
 
-});
+export default BootstrapDialogRequest;

packages/mindplot/src/components/persistence/Beta2PelaMigrator.js

@@ -18,15 +18,15 @@
 import ModelCodeName from './ModelCodeName';
 import XMLSerializer_Pela from './XMLSerializer_Pela';
 
-const Beta2PelaMigrator = new Class({
+class Beta2PelaMigrator {
-  initialize(betaSerializer) {
+  constructor(betaSerializer) {
     this._betaSerializer = betaSerializer;
     this._pelaSerializer = new XMLSerializer_Pela();
-  },
+  }
 
   toXML(mindmap) {
     return this._pelaSerializer.toXML(mindmap);
-  },
+  }
 
   loadFromDom(dom, mapId) {
     $assert($defined(mapId), 'mapId can not be null');
@@ -41,7 +41,7 @@ const Beta2PelaMigrator = new Class({
     });
 
     return mindmap;
-  },
+  }
 
   _fixPosition(parentModel) {
     const parentPos = parentModel.getPosition();
@@ -53,7 +53,7 @@ const Beta2PelaMigrator = new Class({
       }
       me._fixPosition(child);
     });
-  },
+  }
-});
+}
 
 export default Beta2PelaMigrator;

packages/mindplot/src/components/persistence/Pela2TangoMigrator.js

@@ -18,15 +18,15 @@
 import XMLSerializer_Tango from './XMLSerializer_Tango';
 import ModelCodeName from './ModelCodeName';
 
-const Pela2TangoMigrator = new Class({
+class Pela2TangoMigrator {
-  initialize(pelaSerializer) {
+  constructor(pelaSerializer) {
     this._pelaSerializer = pelaSerializer;
     this._tangoSerializer = new XMLSerializer_Tango();
-  },
+  }
 
   toXML(mindmap) {
     return this._tangoSerializer.toXML(mindmap);
-  },
+  }
 
   loadFromDom(dom, mapId) {
     $assert($defined(mapId), 'mapId can not be null');
@@ -35,7 +35,7 @@ const Pela2TangoMigrator = new Class({
     this._fixOrder(mindmap);
     this._fixPosition(mindmap);
     return mindmap;
-  },
+  }
 
   _fixOrder(mindmap) {
     // First level node policies has been changed.
@@ -62,7 +62,7 @@ const Pela2TangoMigrator = new Class({
     for (i = 0; i < leftNodes.length; i++) {
       leftNodes[i].setOrder(i * 2 + 1);
     }
-  },
+  }
 
   _fixPosition(mindmap) {
     // Position was not required in previous versions. Try to synthesize one .
@@ -73,7 +73,7 @@ const Pela2TangoMigrator = new Class({
       const position = child.getPosition();
       this._fixNodePosition(child, position);
     }
-  },
+  }
   _fixNodePosition(node, parentPosition) {
     // Position was not required in previous versions. Try to synthesize one .
     let position = node.getPosition();
@@ -86,7 +86,7 @@ const Pela2TangoMigrator = new Class({
       const child = children[i];
       this._fixNodePosition(child, position);
     }
-  },
+  }
-});
+}
 
 export default Pela2TangoMigrator;

packages/mindplot/src/components/persistence/XMLSerializer_Beta.js

@@ -20,7 +20,7 @@ import Mindmap from '../model/Mindmap';
 import INodeModel from '../model/INodeModel';
 import TopicFeature from '../TopicFeature';
 
-const XMLSerializer_Beta = new Class({
+class XMLSerializer_Beta {
   toXML(mindmap) {
     $assert(mindmap, 'Can not save a null mindmap');
 
@@ -43,7 +43,7 @@ const XMLSerializer_Beta = new Class({
     }
 
     return document;
-  },
+  }
 
   _topicToXML(document, topic) {
     const parentTopic = document.createElement('topic');
@@ -55,7 +55,7 @@ const XMLSerializer_Beta = new Class({
       const parent = topic.getParent();
       if (parent == null || parent.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
         const pos = topic.getPosition();
-        parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
+        parentTopic.setAttribute('position', `${pos.x}${pos.y}`);
       } else {
         const order = topic.getOrder();
         parentTopic.setAttribute('order', order);
@@ -147,25 +147,25 @@ const XMLSerializer_Beta = new Class({
     }
 
     return parentTopic;
-  },
+  }
 
   _iconToXML(document, icon) {
     const iconDom = document.createElement('icon');
     iconDom.setAttribute('id', icon.getIconType());
     return iconDom;
-  },
+  }
 
   _linkToXML(document, link) {
     const linkDom = document.createElement('link');
     linkDom.setAttribute('url', link.getUrl());
     return linkDom;
-  },
+  }
 
   _noteToXML(document, note) {
     const noteDom = document.createElement('note');
     noteDom.setAttribute('text', note.getText());
     return noteDom;
-  },
+  }
 
   loadFromDom(dom, mapId) {
     $assert(dom, 'Dom can not be null');
@@ -181,8 +181,8 @@ const XMLSerializer_Beta = new Class({
     // Is a wisemap?.
     $assert(
       documentElement.tagName === XMLSerializer_Beta.MAP_ROOT_NODE,
-      `This seem not to be a map document. Root Tag: '${documentElement.tagName},',HTML:${dom.innerHTML
+      `This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${dom.innerHTML
-      },XML:${innerXML(dom)}`,
+      }XML:${innerXML(dom)}`,
     );
 
     // Start the loading process ...
@@ -200,7 +200,7 @@ const XMLSerializer_Beta = new Class({
     }
     mindmap.setId(mapId);
     return mindmap;
-  },
+  }
 
   _deserializeNode(domElem, mindmap) {
     const type = domElem.getAttribute('central') != null
@@ -299,23 +299,23 @@ const XMLSerializer_Beta = new Class({
     }
 
     return topic;
-  },
+  }
 
   _deserializeIcon(domElem) {
     let icon = domElem.getAttribute('id');
     icon = icon.replace('images/', 'icons/legacy/');
     return TopicFeature.createModel(TopicFeature.Icon.id, { id: icon });
-  },
+  }
 
   _deserializeLink(domElem) {
     return TopicFeature.createModel(TopicFeature.Link.id, { url: domElem.getAttribute('url') });
-  },
+  }
 
   _deserializeNote(domElem) {
     const text = domElem.getAttribute('text');
     return TopicFeature.createModel(TopicFeature.Note.id, { text: text == null ? ' ' : text });
-  },
+  }
-});
+}
 
 XMLSerializer_Beta.MAP_ROOT_NODE = 'map';
 

packages/mindplot/src/components/persistence/XMLSerializer_Pela.js

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import { $assert, $defined, createDocument } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 import Mindmap from '../model/Mindmap';
 import INodeModel, { TopicShape } from '../model/INodeModel';
 import TopicFeature from '../TopicFeature';
@@ -26,492 +26,485 @@ import ConnectionLine from '../ConnectionLine';
  * @class
  */
 // eslint-disable-next-line camelcase
-const XMLSerializer_Pela = new Class(
+class XMLSerializer_Pela {
-  /** @lends XMLSerializer_Pela */ {
+  toXML(mindmap) {
-    /**
+    $assert(mindmap, 'Can not save a null mindmap');
-         * @param mindmap
-         * @throws will throw an error if mindmap is null or undefined
-         * @return the created XML document (using the cross-browser implementation in core)
-         */
-    toXML(mindmap) {
-      $assert(mindmap, 'Can not save a null mindmap');
 
-      const document = createDocument();
+    const document = createDocument();
 
-      // Store map attributes ...
+    // Store map attributes ...
-      const mapElem = document.createElement('map');
+    const mapElem = document.createElement('map');
-      const name = mindmap.getId();
+    const name = mindmap.getId();
-      if ($defined(name)) {
+    if ($defined(name)) {
-        mapElem.setAttribute('name', this.rmXmlInv(name));
+      mapElem.setAttribute('name', this.rmXmlInv(name));
+    }
+    const version = mindmap.getVersion();
+    if ($defined(version)) {
+      mapElem.setAttribute('version', version);
+    }
+
+    document.appendChild(mapElem);
+
+    // Create branches ...
+    const topics = mindmap.getBranches();
+    for (let i = 0; i < topics.length; i++) {
+      const topic = topics[i];
+      const topicDom = this._topicToXML(document, topic);
+      mapElem.appendChild(topicDom);
+    }
+
+    // Create Relationships
+    const relationships = mindmap.getRelationships();
+    if (relationships.length > 0) {
+      for (let j = 0; j < relationships.length; j++) {
+        const relationship = relationships[j];
+        if (
+          mindmap.findNodeById(relationship.getFromNode()) !== null
+          && mindmap.findNodeById(relationship.getToNode()) !== null
+        ) {
+          // Isolated relationships are not persisted ....
+          const relationDom = this._relationshipToXML(document, relationship);
+          mapElem.appendChild(relationDom);
+        }
       }
-      const version = mindmap.getVersion();
+    }
-      if ($defined(version)) {
+
-        mapElem.setAttribute('version', version);
+    return document;
+  }
+
+  _topicToXML(document, topic) {
+    const parentTopic = document.createElement('topic');
+
+    // Set topic attributes...
+    if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
+      parentTopic.setAttribute('central', 'true');
+    } else {
+      const pos = topic.getPosition();
+      parentTopic.setAttribute('position', `${pos.x}${pos.y}`);
+
+      const order = topic.getOrder();
+      if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); }
+    }
+
+    const text = topic.getText();
+    if ($defined(text)) {
+      this._noteTextToXML(document, parentTopic, text);
+    }
+
+    const shape = topic.getShapeType();
+    if ($defined(shape)) {
+      parentTopic.setAttribute('shape', shape);
+
+      if (shape === TopicShape.IMAGE) {
+        parentTopic.setAttribute(
+          'image',
+          `${topic.getImageSize().width}${topic.getImageSize().height
+          }:${topic.getImageUrl()}`,
+        );
       }
+    }
 
-      document.appendChild(mapElem);
+    if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) {
+      parentTopic.setAttribute('shrink', 'true');
+    }
 
-      // Create branches ...
+    // Font properties ...
-      const topics = mindmap.getBranches();
+    const id = topic.getId();
-      for (let i = 0; i < topics.length; i++) {
+    parentTopic.setAttribute('id', id);
-        const topic = topics[i];
+
-        const topicDom = this._topicToXML(document, topic);
+    let font = '';
-        mapElem.appendChild(topicDom);
+
+    const fontFamily = topic.getFontFamily();
+    font += `${fontFamily || ''};`;
+
+    const fontSize = topic.getFontSize();
+    font += `${fontSize || ''};`;
+
+    const fontColor = topic.getFontColor();
+    font += `${fontColor || ''};`;
+
+    const fontWeight = topic.getFontWeight();
+    font += `${fontWeight || ''};`;
+
+    const fontStyle = topic.getFontStyle();
+    font += `${fontStyle || ''};`;
+
+    if (
+      $defined(fontFamily)
+      || $defined(fontSize)
+      || $defined(fontColor)
+      || $defined(fontWeight)
+      || $defined(fontStyle)
+    ) {
+      parentTopic.setAttribute('fontStyle', font);
+    }
+
+    const bgColor = topic.getBackgroundColor();
+    if ($defined(bgColor)) {
+      parentTopic.setAttribute('bgColor', bgColor);
+    }
+
+    const brColor = topic.getBorderColor();
+    if ($defined(brColor)) {
+      parentTopic.setAttribute('brColor', brColor);
+    }
+
+    const metadata = topic.getMetadata();
+    if ($defined(metadata)) {
+      parentTopic.setAttribute('metadata', metadata);
+    }
+
+    // Serialize features ...
+    const features = topic.getFeatures();
+    for (let i = 0; i < features.length; i++) {
+      const feature = features[i];
+
+      const featureType = feature.getType();
+      const featureDom = document.createElement(featureType);
+      const attributes = feature.getAttributes();
+
+      for (const key in attributes) {
+        const value = attributes[key];
+        if (key === 'text') {
+          const cdata = document.createCDATASection(this.rmXmlInv(value));
+          featureDom.appendChild(cdata);
+        } else {
+          featureDom.setAttribute(key, this.rmXmlInv(value));
+        }
       }
+      parentTopic.appendChild(featureDom);
+    }
 
-      // Create Relationships
+    // CHILDREN TOPICS
-      const relationships = mindmap.getRelationships();
+    const childTopics = topic.getChildren();
-      if (relationships.length > 0) {
+    for (let j = 0; j < childTopics.length; j++) {
-        for (let j = 0; j < relationships.length; j++) {
+      const childTopic = childTopics[j];
-          const relationship = relationships[j];
+      const childDom = this._topicToXML(document, childTopic);
-          if (
+      parentTopic.appendChild(childDom);
-            mindmap.findNodeById(relationship.getFromNode()) !== null
+    }
-            && mindmap.findNodeById(relationship.getToNode()) !== null
+    return parentTopic;
-          ) {
+  }
-            // Isolated relationships are not persisted ....
+
-            const relationDom = this._relationshipToXML(document, relationship);
+  _noteTextToXML(document, elem, text) {
-            mapElem.appendChild(relationDom);
+    if (text.indexOf('\n') === -1) {
+      elem.setAttribute('text', this.rmXmlInv(text));
+    } else {
+      const textDom = document.createElement('text');
+      const cdata = document.createCDATASection(this.rmXmlInv(text));
+      textDom.appendChild(cdata);
+      elem.appendChild(textDom);
+    }
+  }
+
+  _relationshipToXML(document, relationship) {
+    const result = document.createElement('relationship');
+    result.setAttribute('srcTopicId', relationship.getFromNode());
+    result.setAttribute('destTopicId', relationship.getToNode());
+
+    const lineType = relationship.getLineType();
+    result.setAttribute('lineType', lineType);
+    if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) {
+      if ($defined(relationship.getSrcCtrlPoint())) {
+        const srcPoint = relationship.getSrcCtrlPoint();
+        result.setAttribute(
+          'srcCtrlPoint',
+          `${Math.round(srcPoint.x)}${Math.round(srcPoint.y)}`,
+        );
+      }
+      if ($defined(relationship.getDestCtrlPoint())) {
+        const destPoint = relationship.getDestCtrlPoint();
+        result.setAttribute(
+          'destCtrlPoint',
+          `${Math.round(destPoint.x)}${Math.round(destPoint.y)}`,
+        );
+      }
+    }
+    result.setAttribute('endArrow', relationship.getEndArrow());
+    result.setAttribute('startArrow', relationship.getStartArrow());
+    return result;
+  }
+
+  /**
+   * @param dom
+   * @param mapId
+   * @throws will throw an error if dom is null or undefined
+   * @throws will throw an error if mapId is null or undefined
+   * @throws will throw an error if the document element is not consistent with a wisemap's root
+   * element
+   */
+  loadFromDom(dom, mapId) {
+    $assert(dom, 'dom can not be null');
+    $assert(mapId, 'mapId can not be null');
+
+    const rootElem = dom.documentElement;
+
+    // Is a wisemap?.
+    $assert(
+      rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE,
+      'This seem not to be a map document.',
+    );
+
+    this._idsMap = {};
+    // Start the loading process ...
+    const version = rootElem.getAttribute('version');
+
+    const mindmap = new Mindmap(mapId, version);
+    const children = rootElem.childNodes;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.nodeType === 1) {
+        switch (child.tagName) {
+          case 'topic': {
+            const topic = this._deserializeNode(child, mindmap);
+            mindmap.addBranch(topic);
+            break;
           }
-        }
+          case 'relationship': {
-      }
+            const relationship = this._deserializeRelationship(child, mindmap);
-
+            if (relationship != null) {
-      return document;
+              mindmap.addRelationship(relationship);
-    },
-
-    _topicToXML(document, topic) {
-      const parentTopic = document.createElement('topic');
-
-      // Set topic attributes...
-      if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
-        parentTopic.setAttribute('central', 'true');
-      } else {
-        const pos = topic.getPosition();
-        parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
-
-        const order = topic.getOrder();
-        if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); }
-      }
-
-      const text = topic.getText();
-      if ($defined(text)) {
-        this._noteTextToXML(document, parentTopic, text);
-      }
-
-      const shape = topic.getShapeType();
-      if ($defined(shape)) {
-        parentTopic.setAttribute('shape', shape);
-
-        if (shape === TopicShape.IMAGE) {
-          parentTopic.setAttribute(
-            'image',
-            `${topic.getImageSize().width},${topic.getImageSize().height
-            }:${topic.getImageUrl()}`,
-          );
-        }
-      }
-
-      if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) {
-        parentTopic.setAttribute('shrink', 'true');
-      }
-
-      // Font properties ...
-      const id = topic.getId();
-      parentTopic.setAttribute('id', id);
-
-      let font = '';
-
-      const fontFamily = topic.getFontFamily();
-      font += `${fontFamily || ''};`;
-
-      const fontSize = topic.getFontSize();
-      font += `${fontSize || ''};`;
-
-      const fontColor = topic.getFontColor();
-      font += `${fontColor || ''};`;
-
-      const fontWeight = topic.getFontWeight();
-      font += `${fontWeight || ''};`;
-
-      const fontStyle = topic.getFontStyle();
-      font += `${fontStyle || ''};`;
-
-      if (
-        $defined(fontFamily)
-        || $defined(fontSize)
-        || $defined(fontColor)
-        || $defined(fontWeight)
-        || $defined(fontStyle)
-      ) {
-        parentTopic.setAttribute('fontStyle', font);
-      }
-
-      const bgColor = topic.getBackgroundColor();
-      if ($defined(bgColor)) {
-        parentTopic.setAttribute('bgColor', bgColor);
-      }
-
-      const brColor = topic.getBorderColor();
-      if ($defined(brColor)) {
-        parentTopic.setAttribute('brColor', brColor);
-      }
-
-      const metadata = topic.getMetadata();
-      if ($defined(metadata)) {
-        parentTopic.setAttribute('metadata', metadata);
-      }
-
-      // Serialize features ...
-      const features = topic.getFeatures();
-      for (let i = 0; i < features.length; i++) {
-        const feature = features[i];
-
-        const featureType = feature.getType();
-        const featureDom = document.createElement(featureType);
-        const attributes = feature.getAttributes();
-
-        for (const key in attributes) {
-          const value = attributes[key];
-          if (key === 'text') {
-            const cdata = document.createCDATASection(this.rmXmlInv(value));
-            featureDom.appendChild(cdata);
-          } else {
-            featureDom.setAttribute(key, this.rmXmlInv(value));
-          }
-        }
-        parentTopic.appendChild(featureDom);
-      }
-
-      // CHILDREN TOPICS
-      const childTopics = topic.getChildren();
-      for (let j = 0; j < childTopics.length; j++) {
-        const childTopic = childTopics[j];
-        const childDom = this._topicToXML(document, childTopic);
-        parentTopic.appendChild(childDom);
-      }
-      return parentTopic;
-    },
-
-    _noteTextToXML(document, elem, text) {
-      if (text.indexOf('\n') === -1) {
-        elem.setAttribute('text', this.rmXmlInv(text));
-      } else {
-        const textDom = document.createElement('text');
-        const cdata = document.createCDATASection(this.rmXmlInv(text));
-        textDom.appendChild(cdata);
-        elem.appendChild(textDom);
-      }
-    },
-
-    _relationshipToXML(document, relationship) {
-      const result = document.createElement('relationship');
-      result.setAttribute('srcTopicId', relationship.getFromNode());
-      result.setAttribute('destTopicId', relationship.getToNode());
-
-      const lineType = relationship.getLineType();
-      result.setAttribute('lineType', lineType);
-      if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) {
-        if ($defined(relationship.getSrcCtrlPoint())) {
-          const srcPoint = relationship.getSrcCtrlPoint();
-          result.setAttribute(
-            'srcCtrlPoint',
-            `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`,
-          );
-        }
-        if ($defined(relationship.getDestCtrlPoint())) {
-          const destPoint = relationship.getDestCtrlPoint();
-          result.setAttribute(
-            'destCtrlPoint',
-            `${Math.round(destPoint.x)},${Math.round(destPoint.y)}`,
-          );
-        }
-      }
-      result.setAttribute('endArrow', relationship.getEndArrow());
-      result.setAttribute('startArrow', relationship.getStartArrow());
-      return result;
-    },
-
-    /**
-     * @param dom
-     * @param mapId
-     * @throws will throw an error if dom is null or undefined
-     * @throws will throw an error if mapId is null or undefined
-     * @throws will throw an error if the document element is not consistent with a wisemap's root
-     * element
-     */
-    loadFromDom(dom, mapId) {
-      $assert(dom, 'dom can not be null');
-      $assert(mapId, 'mapId can not be null');
-
-      const rootElem = dom.documentElement;
-
-      // Is a wisemap?.
-      $assert(
-        rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE,
-        'This seem not to be a map document.',
-      );
-
-      this._idsMap = {};
-      // Start the loading process ...
-      const version = rootElem.getAttribute('version');
-
-      const mindmap = new Mindmap(mapId, version);
-      const children = rootElem.childNodes;
-      for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (child.nodeType === 1) {
-          switch (child.tagName) {
-            case 'topic': {
-              const topic = this._deserializeNode(child, mindmap);
-              mindmap.addBranch(topic);
-              break;
             }
-            case 'relationship': {
+            break;
-              const relationship = this._deserializeRelationship(child, mindmap);
-              if (relationship != null) {
-                mindmap.addRelationship(relationship);
-              }
-              break;
-            }
-            default:
-              break;
           }
+          default:
+            break;
         }
       }
-      this._idsMap = null;
+    }
-      mindmap.setId(mapId);
+    this._idsMap = null;
-      return mindmap;
+    mindmap.setId(mapId);
-    },
+    return mindmap;
+  }
 
-    _deserializeNode(domElem, mindmap) {
+  _deserializeNode(domElem, mindmap) {
-      const type = domElem.getAttribute('central') != null
+    const type = domElem.getAttribute('central') != null
-        ? INodeModel.CENTRAL_TOPIC_TYPE
+      ? INodeModel.CENTRAL_TOPIC_TYPE
-        : INodeModel.MAIN_TOPIC_TYPE;
+      : INodeModel.MAIN_TOPIC_TYPE;
 
-      // Load attributes...
+    // Load attributes...
-      let id = domElem.getAttribute('id');
+    let id = domElem.getAttribute('id');
-      if ($defined(id)) {
+    if ($defined(id)) {
-        id = parseInt(id, 10);
+      id = parseInt(id, 10);
+    }
+
+    if (this._idsMap[id]) {
+      id = null;
+    } else {
+      this._idsMap[id] = domElem;
+    }
+
+    const topic = mindmap.createNode(type, id);
+
+    // Set text property is it;s defined...
+    const text = domElem.getAttribute('text');
+    if ($defined(text) && text) {
+      topic.setText(text);
+    }
+
+    const fontStyle = domElem.getAttribute('fontStyle');
+    if ($defined(fontStyle) && fontStyle) {
+      const font = fontStyle.split(';');
+
+      if (font[0]) {
+        topic.setFontFamily(font[0]);
       }
 
-      if (this._idsMap[id]) {
+      if (font[1]) {
-        id = null;
+        topic.setFontSize(font[1]);
-      } else {
-        this._idsMap[id] = domElem;
       }
 
-      const topic = mindmap.createNode(type, id);
+      if (font[2]) {
-
+        topic.setFontColor(font[2]);
-      // Set text property is it;s defined...
-      const text = domElem.getAttribute('text');
-      if ($defined(text) && text) {
-        topic.setText(text);
       }
 
-      const fontStyle = domElem.getAttribute('fontStyle');
+      if (font[3]) {
-      if ($defined(fontStyle) && fontStyle) {
+        topic.setFontWeight(font[3]);
-        const font = fontStyle.split(';');
+      }
 
-        if (font[0]) {
+      if (font[4]) {
-          topic.setFontFamily(font[0]);
+        topic.setFontStyle(font[4]);
-        }
+      }
+    }
 
-        if (font[1]) {
+    const shape = domElem.getAttribute('shape');
-          topic.setFontSize(font[1]);
+    if ($defined(shape)) {
-        }
+      topic.setShapeType(shape);
 
-        if (font[2]) {
+      if (shape === TopicShape.IMAGE) {
-          topic.setFontColor(font[2]);
+        const image = domElem.getAttribute('image');
-        }
+        const size = image.substring(0, image.indexOf(':'));
+        const url = image.substring(image.indexOf(':') + 1, image.length);
+        topic.setImageUrl(url);
 
-        if (font[3]) {
+        const split = size.split(',');
-          topic.setFontWeight(font[3]);
+        topic.setImageSize(split[0], split[1]);
-        }
+      }
+    }
 
-        if (font[4]) {
+    const bgColor = domElem.getAttribute('bgColor');
-          topic.setFontStyle(font[4]);
+    if ($defined(bgColor)) {
+      topic.setBackgroundColor(bgColor);
+    }
+
+    const borderColor = domElem.getAttribute('brColor');
+    if ($defined(borderColor)) {
+      topic.setBorderColor(borderColor);
+    }
+
+    const order = domElem.getAttribute('order');
+    if ($defined(order) && order !== 'NaN') {
+      // Hack for broken maps ...
+      topic.setOrder(parseInt(order, 10));
+    }
+
+    const isShrink = domElem.getAttribute('shrink');
+    // Hack: Some production maps has been stored with the central topic collapsed. This is a bug.
+    if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) {
+      topic.setChildrenShrunken(isShrink);
+    }
+
+    const position = domElem.getAttribute('position');
+    if ($defined(position)) {
+      const pos = position.split(',');
+      topic.setPosition(pos[0], pos[1]);
+    }
+
+    const metadata = domElem.getAttribute('metadata');
+    if ($defined(metadata)) {
+      topic.setMetadata(metadata);
+    }
+
+    // Creating icons and children nodes
+    const children = domElem.childNodes;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        if (child.tagName === 'topic') {
+          const childTopic = this._deserializeNode(child, mindmap);
+          childTopic.connectTo(topic);
+        } else if (TopicFeature.isSupported(child.tagName)) {
+          // Load attributes ...
+          const namedNodeMap = child.attributes;
+          const attributes = {};
+          for (let j = 0; j < namedNodeMap.length; j++) {
+            const attribute = namedNodeMap.item(j);
+            attributes[attribute.name] = attribute.value;
+          }
+
+          // Has text node ?.
+          const textAttr = this._deserializeTextAttr(child);
+          if (textAttr) {
+            attributes.text = textAttr;
+          }
+
+          // Create a new element ....
+          const featureType = child.tagName;
+          const feature = TopicFeature.createModel(featureType, attributes);
+          topic.addFeature(feature);
+        } else if (child.tagName === 'text') {
+          const nodeText = this._deserializeNodeText(child);
+          topic.setText(nodeText);
         }
       }
+    }
+    return topic;
+  }
 
-      const shape = domElem.getAttribute('shape');
+  _deserializeTextAttr(domElem) {
-      if ($defined(shape)) {
+    let value = domElem.getAttribute('text');
-        topic.setShapeType(shape);
+    if (!$defined(value)) {
-
-        if (shape === TopicShape.IMAGE) {
-          const image = domElem.getAttribute('image');
-          const size = image.substring(0, image.indexOf(':'));
-          const url = image.substring(image.indexOf(':') + 1, image.length);
-          topic.setImageUrl(url);
-
-          const split = size.split(',');
-          topic.setImageSize(split[0], split[1]);
-        }
-      }
-
-      const bgColor = domElem.getAttribute('bgColor');
-      if ($defined(bgColor)) {
-        topic.setBackgroundColor(bgColor);
-      }
-
-      const borderColor = domElem.getAttribute('brColor');
-      if ($defined(borderColor)) {
-        topic.setBorderColor(borderColor);
-      }
-
-      const order = domElem.getAttribute('order');
-      if ($defined(order) && order !== 'NaN') {
-        // Hack for broken maps ...
-        topic.setOrder(parseInt(order, 10));
-      }
-
-      const isShrink = domElem.getAttribute('shrink');
-      // Hack: Some production maps has been stored with the central topic collapsed. This is a bug.
-      if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) {
-        topic.setChildrenShrunken(isShrink);
-      }
-
-      const position = domElem.getAttribute('position');
-      if ($defined(position)) {
-        const pos = position.split(',');
-        topic.setPosition(pos[0], pos[1]);
-      }
-
-      const metadata = domElem.getAttribute('metadata');
-      if ($defined(metadata)) {
-        topic.setMetadata(metadata);
-      }
-
-      // Creating icons and children nodes
       const children = domElem.childNodes;
-      for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (child.nodeType === Node.ELEMENT_NODE) {
-          if (child.tagName === 'topic') {
-            const childTopic = this._deserializeNode(child, mindmap);
-            childTopic.connectTo(topic);
-          } else if (TopicFeature.isSupported(child.tagName)) {
-            // Load attributes ...
-            const namedNodeMap = child.attributes;
-            const attributes = {};
-            for (let j = 0; j < namedNodeMap.length; j++) {
-              const attribute = namedNodeMap.item(j);
-              attributes[attribute.name] = attribute.value;
-            }
-
-            // Has text node ?.
-            const textAttr = this._deserializeTextAttr(child);
-            if (textAttr) {
-              attributes.text = textAttr;
-            }
-
-            // Create a new element ....
-            const featureType = child.tagName;
-            const feature = TopicFeature.createModel(featureType, attributes);
-            topic.addFeature(feature);
-          } else if (child.tagName === 'text') {
-            const nodeText = this._deserializeNodeText(child);
-            topic.setText(nodeText);
-          }
-        }
-      }
-      return topic;
-    },
-
-    _deserializeTextAttr(domElem) {
-      let value = domElem.getAttribute('text');
-      if (!$defined(value)) {
-        const children = domElem.childNodes;
-        for (let i = 0; i < children.length; i++) {
-          const child = children[i];
-          if (child.nodeType === Node.CDATA_SECTION_NODE) {
-            value = child.nodeValue;
-          }
-        }
-      } else {
-        // Notes must be decoded ...
-        value = unescape(value);
-
-        // Hack for empty nodes ...
-        if (value === '') {
-          value = ' ';
-        }
-      }
-
-      return value;
-    },
-
-    _deserializeNodeText(domElem) {
-      const children = domElem.childNodes;
-      let value = null;
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
         if (child.nodeType === Node.CDATA_SECTION_NODE) {
           value = child.nodeValue;
         }
       }
-      return value;
+    } else {
-    },
+      // Notes must be decoded ...
+      value = unescape(value);
 
-    _deserializeRelationship(domElement, mindmap) {
+      // Hack for empty nodes ...
-      const srcId = domElement.getAttribute('srcTopicId');
+      if (value === '') {
-      const destId = domElement.getAttribute('destTopicId');
+        value = ' ';
-      const lineType = domElement.getAttribute('lineType');
+      }
-      const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint');
+    }
-      const destCtrlPoint = domElement.getAttribute('destCtrlPoint');
 
-      // If for some reason a relationship lines has source and dest nodes the same, don't import it.
+    return value;
-      if (srcId === destId) {
+  }
-        return null;
-      }
-      // Is the connections points valid ?. If it's not, do not load the relationship ...
-      if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) {
-        return null;
-      }
 
-      const model = mindmap.createRelationship(srcId, destId);
+  _deserializeNodeText(domElem) {
-      model.setLineType(lineType);
+    const children = domElem.childNodes;
-      if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') {
+    let value = null;
-        model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint));
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.nodeType === Node.CDATA_SECTION_NODE) {
+        value = child.nodeValue;
       }
-      if ($defined(destCtrlPoint) && destCtrlPoint !== '') {
+    }
-        model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint));
+    return value;
-      }
+  }
-      model.setEndArrow('false');
-      model.setStartArrow('true');
-      return model;
-    },
 
-    /**
+  _deserializeRelationship(domElement, mindmap) {
-         * This method ensures that the output String has only
+    const srcId = domElement.getAttribute('srcTopicId');
-         * valid XML unicode characters as specified by the
+    const destId = domElement.getAttribute('destTopicId');
-         * XML 1.0 standard. For reference, please see
+    const lineType = domElement.getAttribute('lineType');
-         * <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
+    const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint');
-         * standard</a>. This method will return an empty
+    const destCtrlPoint = domElement.getAttribute('destCtrlPoint');
-         * String if the input is null or empty.
-         *
-         * @param in The String whose non-valid characters we want to remove.
-         * @return The in String, stripped of non-valid characters.
-         */
-    rmXmlInv(str) {
-      if (str == null || str === undefined) return null;
 
-      let result = '';
+    // If for some reason a relationship lines has source and dest nodes the same, don't import it.
-      for (let i = 0; i < str.length; i++) {
+    if (srcId === destId) {
-        const c = str.charCodeAt(i);
+      return null;
-        if (
+    }
-          c === 0x9
+    // Is the connections points valid ?. If it's not, do not load the relationship ...
-          || c === 0xa
+    if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) {
-          || c === 0xd
+      return null;
-          || (c >= 0x20 && c <= 0xd7ff)
+    }
-          || (c >= 0xe000 && c <= 0xfffd)
+
-          || (c >= 0x10000 && c <= 0x10ffff)
+    const model = mindmap.createRelationship(srcId, destId);
-        ) {
+    model.setLineType(lineType);
-          result += str.charAt(i);
+    if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') {
-        }
+      model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint));
+    }
+    if ($defined(destCtrlPoint) && destCtrlPoint !== '') {
+      model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint));
+    }
+    model.setEndArrow('false');
+    model.setStartArrow('true');
+    return model;
+  }
+
+  /**
+       * This method ensures that the output String has only
+       * valid XML unicode characters as specified by the
+       * XML 1.0 standard. For reference, please see
+       * <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
+       * standard</a>. This method will return an empty
+       * String if the input is null or empty.
+       *
+       * @param in The String whose non-valid characters we want to remove.
+       * @return The in String, stripped of non-valid characters.
+       */
+  rmXmlInv(str) {
+    if (str == null || str === undefined) return null;
+
+    let result = '';
+    for (let i = 0; i < str.length; i++) {
+      const c = str.charCodeAt(i);
+      if (
+        c === 0x9
+        || c === 0xa
+        || c === 0xd
+        || (c >= 0x20 && c <= 0xd7ff)
+        || (c >= 0xe000 && c <= 0xfffd)
+        || (c >= 0x10000 && c <= 0x10ffff)
+      ) {
+        result += str.charAt(i);
       }
-      return result;
+    }
-    },
+    return result;
-  },
+  }
-);
+}
 
 /**
  * a wisemap's root element tag name

packages/mindplot/src/components/persistence/XMLSerializer_Tango.js

@@ -23,8 +23,7 @@ import XMLSerializer_Pela from './XMLSerializer_Pela';
  * @class
  * @extends mindplot.persistence.XMLSerializer_Pela
  */
-const XMLSerializer_Tango = new Class({
+class XMLSerializer_Tango extends XMLSerializer_Pela{
-  Extends: XMLSerializer_Pela,
+};
-});
 
 export default XMLSerializer_Tango;

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

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
 import { $assert, $defined } from '@wisemapping/core-js';
 import { TopicShape } from '../model/INodeModel';
 import TopicConfig from '../TopicConfig';

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

@@ -18,9 +18,9 @@
 import { $assert } from "@wisemapping/core-js";
 import PersistenceManager from '../PersistenceManager';
 
-const IMenu = new Class({
+class IMenu {
 
-  initialize(designer, containerId, mapId) {
+  constructor(designer, containerId, mapId) {
     $assert(designer, 'designer can not be null');
     $assert(containerId, 'containerId can not be null');
 
@@ -34,13 +34,13 @@ const IMenu = new Class({
     this._designer.addEvent('modelUpdate', () => {
       me.setRequireChange(true);
     });
-  },
+  }
 
   clear() {
     _.each(this._toolbarElems, (item) => {
       item.hide();
     });
-  },
+  }
 
   discardChanges(designer) {
     // Avoid autosave before leaving the page ....
@@ -56,13 +56,13 @@ const IMenu = new Class({
 
     // Reload the page ...
     window.location.reload();
-  },
+  }
 
   unlockMap(designer) {
     const mindmap = designer.getMindmap();
     const persistenceManager = PersistenceManager.getInstance();
     persistenceManager.unlockMap(mindmap);
-  },
+  }
 
   save(saveElem, designer, saveHistory, sync) {
     // Load map content ...
@@ -86,7 +86,6 @@ const IMenu = new Class({
         }
         menu.setRequireChange(false);
       },
-
       onError(error) {
         if (saveHistory) {
           saveElem.css('cursor', 'pointer');
@@ -97,17 +96,17 @@ const IMenu = new Class({
             $notifyModal(error.message);
           }
         }
-      },
+      }
     }, sync);
-  },
+  }
 
   isSaveRequired() {
     return this._mindmapUpdated;
-  },
+  }
 
   setRequireChange(value) {
     this._mindmapUpdated = value;
-  },
+  }
-});
+}
 
 export default IMenu;

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

@@ -44,7 +44,7 @@ class IconPanel extends ToolbarPaneItem {
         const iconId = familyIcons[j];
         const img = $('<img>')
           .attr('id', iconId)
-          .attr('src', ImageIcon.prototype._getImageUrl(iconId))
+          .attr('src', ImageIcon._getImageUrl(iconId))
           .attr('class', 'panelIcon');
 
         familyContent.append(img);

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

@@ -19,7 +19,7 @@ import $ from '@libraries/jquery-2.1.0';
 import _ from '@libraries/underscore-min';
 
 import { $defined } from '@wisemapping/core-js';
-import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
+import BootstrapDialogRequest from "../libraries/bootstrap/BootstrapDialogRequest";
 import IMenu from './IMenu';
 import FontFamilyPanel from './FontFamilyPanel';
 import FontSizePanel from './FontSizePanel';
@@ -215,7 +215,7 @@ class Menu extends IMenu {
     }
 
     this._addButton('export', false, false, () => {
-      BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/exportf`, $msg('EXPORT'), {
+      BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/exportf`, $msg('EXPORT'), {
         cancelButton: true,
         closeButton: true,
       });
@@ -347,7 +347,7 @@ class Menu extends IMenu {
     const shareElem = $('#shareIt');
     if (shareElem) {
       this._addButton('shareIt', false, false, () => {
-        BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), {
+        BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), {
           closeButton: true,
           cancelButton: true,
         });
@@ -359,7 +359,7 @@ class Menu extends IMenu {
     const publishElem = $('#publishIt');
     if (publishElem) {
       this._addButton('publishIt', false, false, () => {
-        BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), {
+        BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), {
           closeButton: true,
           cancelButton: true,
         });
@@ -371,7 +371,7 @@ class Menu extends IMenu {
     const historyElem = $('#history');
     if (historyElem) {
       this._addButton('history', false, false, () => {
-        BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/historyf`, $msg('HISTORY'), {
+        BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/historyf`, $msg('HISTORY'), {
           closeButton: true,
           cancelButton: true,
         });
@@ -386,7 +386,7 @@ class Menu extends IMenu {
     const keyboardShortcut = $('#keyboardShortcuts');
     if (keyboardShortcut) {
       keyboardShortcut.bind('click', (event) => {
-        BootstrapDialog.Request.active = new BootstrapDialog.Request('c/keyboard', $msg('SHORTCUTS'), {
+        BootstrapDialogRequest.active = new BootstrapDialogRequest('c/keyboard', $msg('SHORTCUTS'), {
           closeButton: true,
           cancelButton: true,
         });

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

@@ -15,9 +15,7 @@
  *   limitations under the License.
  */
 
-const ModalDialogNotifier = new Class({
+class ModalDialogNotifier {
-  initialize() {},
-
   // FIXME: replace by alert()
   show(message, title) {
     $assert(message, 'message can not be null');

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

@@ -18,23 +18,21 @@
 import jQuery from '@libraries/jquery-2.1.0';
 import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
 
-const NoteEditor = new Class({
+class NoteEditor extends BootstrapDialog{
-  Extends: BootstrapDialog,
+  constructor(model) {
-
-  initialize(model) {
     $assert(model, 'model can not be null');
     this._model = model;
-    this.parent($msg('Note'), {
+    super($msg('Note'), {
       cancelButton: true,
       closeButton: true,
       acceptButton: true,
       removeButton: typeof model.getValue() !== 'undefined',
-      onEventData: { model: this._model },
+      onEventData: { model: this._model }
     });
     this.css({ margin: '150px auto' });
     const panel = this._buildPanel(model);
     this.setContent(panel);
-  },
+  }
 
   _buildPanel(model) {
     const result = $('<div></div>').css('padding-top', '5px');
@@ -66,11 +64,11 @@ const NoteEditor = new Class({
 
     result.append(form);
     return result;
-  },
+  }
 
   onAcceptClick(event) {
     event.data.dialog._submitForm(event.data.model);
-  },
+  }
 
   _submitForm(model) {
     const textarea = this._native.find('textarea');
@@ -78,16 +76,16 @@ const NoteEditor = new Class({
       model.setValue(textarea.val());
     }
     this.close();
-  },
+  }
 
   onDialogShown() {
     $(this).find('textarea').focus();
-  },
+  }
 
   onRemoveClick(event) {
     event.data.model.setValue(null);
     event.data.dialog.close();
-  },
+  }
-});
+}
 
 export default NoteEditor;

packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js

@@ -1,47 +0,0 @@
-BootstrapDialog.Request = new Class({
-    Extends: BootstrapDialog,
-    initialize: function (url, title, options) {
-        this.parent(title, options);
-        this.requestOptions = {};
-        this.requestOptions.cache = false;
-        var me = this;
-        this.requestOptions.fail = function (xhr) {
-            // Intercept form requests ...
-            console.log("Failure:");
-            console.log(xhr);
-        };
-
-        this.requestOptions.success = function () {
-            // Intercept form requests ...
-            var forms = me._native.find('form');
-            _.each(forms, function (form) {
-                $(form).on('submit', function (event) {
-                    // Intercept form ...
-                    me.requestOptions.url = form.action;
-                    me.requestOptions.method = form.method ? form.method : 'post';
-                    $.ajax(me.requestOptions);
-                    event.stopPropagation();
-                    return false;
-                });
-            });
-        };
-
-        this._native.find('.modal-body').load(url, function () {
-            me.acceptButton.unbind('click').click(function () {
-                submitDialogForm();
-            });
-            me._native.on('hidden.bs.modal', function () {
-                $(this).remove();
-            });
-            me.show();
-        });
-    },
-
-    onDialogShown: function () {
-        if (typeof (onDialogShown) == "function") {
-            onDialogShown();
-        }
-    }
-
-
-});

packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js

@@ -1,111 +0,0 @@
-var BootstrapDialog = new Class({
-    Implements: Options,
-
-    options: {
-        cancelButton: false,
-        closeButton: false,
-        acceptButton: true,
-        removeButton:false,
-        errorMessage: false,
-        onEventData:{}
-    },
-
-    initialize: function (title, options) {
-        this.setOptions(options);
-        this.options.onEventData.dialog = this;
-        this._native = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>');
-        var content = $('<div class="modal-content"></div>');
-        var header = this._buildHeader(title);
-        if (header) {
-            content.append(header);
-        }
-        var body = $('<div class="modal-body"></div>');
-        if(this.options.errorMessage){
-            var error = $('<div class="alert alert-danger"></div>');
-            error.hide();
-            body.append(error);
-        }
-        content.append(body);
-        var footer = this._buildFooter();
-        if (footer) {
-            content.append(footer);
-        }
-        this._native.find(".modal-dialog").append(content);
-        this._native.on('hidden.bs.modal', function() {
-            $(this).remove();
-        });
-        this._native.on('shown.bs.modal', this.onDialogShown);
-    },
-
-    _buildFooter: function() {
-        var footer = null;
-        if (this.options.acceptButton || this.options.removeButton || this.options.cancelButton) {
-            footer = $('<div class="modal-footer" style="paddingTop:5;textAlign:center">');
-        }
-        if (this.options.acceptButton) {
-            this.acceptButton = $('<button type="button" class="btn btn-primary" id="acceptBtn" data-dismiss="modal">'+ $msg('ACCEPT') + '</button>');
-            footer.append(this.acceptButton);
-            this.acceptButton.unbind('click').on("click",this.options.onEventData, this.onAcceptClick)
-        }
-        if (this.options.removeButton) {
-            this.removeButton = $('<button type="button" class="btn btn-secondary" id="removeBtn" data-dismiss="modal">'+ $msg('REMOVE') +'</button>');
-            footer.append(this.removeButton);
-            this.removeButton.on('click', this.options.onEventData, this.onRemoveClick);
-        }
-        if (this.options.cancelButton) {
-            footer.append('<button type="button" class="btn btn-secondary" data-dismiss="modal">'+ $msg('CANCEL') +'</button>');
-        }
-        return footer;
-    },
-
-    _buildHeader: function(title) {
-        var header = null;
-        if (this.options.closeButton || title) {
-            header = $('<div class="modal-header"></div>');
-        }
-        if (this.options.closeButton) {
-            header.append(
-                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'
-            );
-        }
-        if (title) {
-            header.append('<h2 class="modal-title">' + title + '</h2>');
-        }
-        return header;
-    },
-
-    onAcceptClick: function(event) {
-        throw "Unsupported operation";
-    },
-
-    onDialogShown: function() {},
-    onRemoveClick: function(event) {
-        throw "Unsupported operation";
-    },
-
-    show: function () {
-        this._native.modal();
-    },
-
-    setContent: function(content) {
-        var modalBody = this._native.find('.modal-body');
-        modalBody.append(content);
-    },
-
-    css: function(options){
-        this._native.find('.modal-dialog').css(options);
-    },
-
-    close: function() {
-        this._native.modal('hide');
-    },
-
-    alertError: function(message){
-        this._native.find('.alert-danger').text(message);
-        this._native.find('.alert-danger').show();
-    },
-
-    cleanError: function(){
-        this._native.find('.alert-danger').hide();
-    }
-});

packages/mindplot/test/unit/EventsTestSuite.js

@@ -1,14 +1,12 @@
-const TestClass = new Class({
+class TestClass extends Events{
-  Extends: mindplot.Events,
-
   getEvents() {
     return this.$events;
-  },
+  }
 
   removeEvents() {
     this.$events = {};
-  },
+  }
-});
+}
 
 // Test class and variables
 const expectedChangeFn1 = function () { return 'change1'; };

packages/mindplot/test/unit/TestSuite.js

@@ -1,6 +1,6 @@
-TestSuite = new Class({
+class TestSuite {
 
-});
+}
 
 TestSuite.NODE_SIZE = { width: 80, height: 30 };
 TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 };

packages/mindplot/webpack.playground.js

@@ -43,14 +43,7 @@ module.exports = {
   resolve: {
     alias: {
       '@libraries': path.resolve(__dirname, '../../libraries/'),
-      '@commands': path.resolve(__dirname, './src/components/commands/'),
+
-      '@layout': path.resolve(__dirname, './src/components/layout/'),
-      '@libs': path.resolve(__dirname, './src/components/libraries/'),
-      '@model': path.resolve(__dirname, './src/components/model'),
-      '@persistence': path.resolve(__dirname, './src/components/persistence/'),
-      '@util': path.resolve(__dirname, './src/components/util/'),
-      '@widget': path.resolve(__dirname, './src/components/widget/'),
-      '@components': path.resolve(__dirname, './src/components/'),
     },
     extensions: ['.js', '.json'],
   },

packages/web2d/jsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "commonjs",
     "paths": {
-      "@libraries/*": ["../../libraries/*"],
+      "@libraries/*": ["../../libraries/*"]
-      "@svg/*": ["./src/components/peer/svg/*"],
-      "@utils/*": ["./src/components/peer/utils/*"],
-      "@components/*": ["./src/components/*"]
     }
   },
   "exclude": ["node_modules"]

packages/web2d/src/components/ElementClass.js

@@ -19,15 +19,16 @@
 import { $defined } from '@wisemapping/core-js';
 
 class ElementClass {
-  constructor(peer, attributes, htmlContainer) {
+  constructor(peer, attributes, delayInit) {
-    this._htmlContainer = htmlContainer;
     this.peer = peer;
     if (peer == null) {
       throw new Error('Element peer can not be null');
     }
 
-    if ($defined(attributes)) {
+    if (!delayInit) {
-      this._initialize(attributes);
+      if ($defined(attributes)) {
+        this._initialize(attributes);
+      }
     }
   }
 

packages/web2d/src/components/Workspace.js

@@ -16,14 +16,13 @@
  *   limitations under the License.
  */
 import $ from '@libraries/jquery-2.1.0';
-import { $defined, $assert } from '@wisemapping/core-js';
+import { $defined } from '@wisemapping/core-js';
-import ElementClass from '@components/ElementClass';
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
 class Workspace extends ElementClass {
   constructor(attributes) {
     const htmlContainer = Workspace._createDivContainer();
-
     const peer = Toolkit.createWorkspace(htmlContainer);
     const defaultAttributes = {
       width: '200px',
@@ -38,7 +37,9 @@ class Workspace extends ElementClass {
         defaultAttributes[key] = attributes[key];
       }
     }
-    super(peer, defaultAttributes, htmlContainer);
+    super(peer, defaultAttributes, true);
+    this._htmlContainer = htmlContainer;
+    this._initialize(defaultAttributes);
     htmlContainer.append(this.peer._native);
   }
 
@@ -78,8 +79,8 @@ class Workspace extends ElementClass {
      */
   static _createDivContainer() {
     const container = window.document.createElement('div');
-    container.id = 'workspaceContainer';
+    // container.id = 'workspaceContainer';
-    //        container.style.overflow = "hidden";
+    //    container.style.overflow = 'hidden';
     container.style.position = 'relative';
     container.style.top = '0px';
     container.style.left = '0px';

packages/web2d/src/components/peer/svg/ArialFont.js

@@ -17,20 +17,20 @@
  */
 import Font from './Font';
 
-const ArialFont = new Class({
+class ArialFont extends Font {
-  Extends: Font,
+  constructor() {
-  initialize() {
+    super();
-    this.parent();
+    this._fontFamily = 'arial';
-    this._fontFamily = 'Arial';
+  }
-  },
 
   getFontFamily() {
     return this._fontFamily;
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getFont() {
     return Font.ARIAL;
-  },
+  }
-});
+}
 
 export default ArialFont;

packages/web2d/src/components/peer/svg/ArrowPeer.js

@@ -20,34 +20,33 @@ import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 import Point from '../../Point';
 
-const ArrowPeer = new Class({
+class ArrowPeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor() {
-  initialize() {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'path');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
+    super(svgElement);
-    this.parent(svgElement);
     this._style = {};
     this._controlPoint = new Point();
     this._fromPoint = new Point();
-  },
+  }
 
   setFrom(x, y) {
     this._fromPoint.x = x;
     this._fromPoint.y = y;
     this._redraw();
-  },
+  }
 
   setControlPoint(point) {
     this._controlPoint = point;
     this._redraw();
-  },
+  }
 
   setStrokeColor(color) {
     this.setStroke(null, null, color, null);
-  },
+  }
 
   setStrokeWidth(width) {
     this.setStroke(width);
-  },
+  }
 
   setDashed(isDashed, length, spacing) {
     if (
@@ -56,11 +55,11 @@ const ArrowPeer = new Class({
       && $defined(length)
       && $defined(spacing)
     ) {
-      this._native.setAttribute('stroke-dasharray', `${length},${spacing}`);
+      this._native.setAttribute('stroke-dasharray', `${length}${spacing}`);
     } else {
       this._native.setAttribute('stroke-dasharray', '');
     }
-  },
+  }
 
   _updateStyle() {
     let style = '';
@@ -70,7 +69,7 @@ const ArrowPeer = new Class({
       }
     }
     this._native.setAttribute('style', style);
-  },
+  }
 
   _redraw() {
     let x;
@@ -110,7 +109,7 @@ const ArrowPeer = new Class({
         + `L${xp + this._fromPoint.x},${yp + this._fromPoint.y}`;
       this._native.setAttribute('d', path);
     }
-  },
+  }
-});
+}
 
 export default ArrowPeer;

packages/web2d/src/components/peer/svg/CurvedLinePeer.js

@@ -19,11 +19,10 @@ import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 import Point from '../../Point';
 
-const CurvedLinePeer = new Class({
+class CurvedLinePeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor() {
-  initialize() {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'path');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
+    super(svgElement);
-    this.parent(svgElement);
     this._style = { fill: '#495879' };
     this._updateStyle();
     this._customControlPoint_1 = false;
@@ -31,7 +30,7 @@ const CurvedLinePeer = new Class({
     this._control1 = new Point();
     this._control2 = new Point();
     this._lineStyle = true;
-  },
+  }
 
   setSrcControlPoint(control) {
     this._customControlPoint_1 = true;
@@ -42,7 +41,7 @@ const CurvedLinePeer = new Class({
       this._control1.y = parseInt(this._control1.y, 10);
     }
     if (change) this._updatePath();
-  },
+  }
 
   setDestControlPoint(control) {
     this._customControlPoint_2 = true;
@@ -53,64 +52,64 @@ const CurvedLinePeer = new Class({
       this._control2.y = parseInt(this._control2.y, 10);
     }
     if (change) this._updatePath();
-  },
+  }
 
   isSrcControlPointCustom() {
     return this._customControlPoint_1;
-  },
+  }
 
   isDestControlPointCustom() {
     return this._customControlPoint_2;
-  },
+  }
 
   setIsSrcControlPointCustom(isCustom) {
     this._customControlPoint_1 = isCustom;
-  },
+  }
 
   setIsDestControlPointCustom(isCustom) {
     this._customControlPoint_2 = isCustom;
-  },
+  }
 
   getControlPoints() {
     return [this._control1, this._control2];
-  },
+  }
 
   setFrom(x1, y1) {
     const change = this._x1 !== parseInt(x1, 10) || this._y1 !== parseInt(y1, 10);
     this._x1 = parseInt(x1, 10);
     this._y1 = parseInt(y1, 10);
     if (change) this._updatePath();
-  },
+  }
 
   setTo(x2, y2) {
     const change = this._x2 !== parseInt(x2, 10) || this._y2 !== parseInt(y2, 10);
     this._x2 = parseInt(x2, 10);
     this._y2 = parseInt(y2, 10);
     if (change) this._updatePath();
-  },
+  }
 
   getFrom() {
     return new Point(this._x1, this._y1);
-  },
+  }
 
   getTo() {
     return new Point(this._x2, this._y2);
-  },
+  }
 
   setStrokeWidth(width) {
     this._style['stroke-width'] = width;
     this._updateStyle();
-  },
+  }
 
   setColor(color) {
     this._style.stroke = color;
     this._style.fill = color;
     this._updateStyle();
-  },
+  }
 
   updateLine(avoidControlPointFix) {
     this._updatePath(avoidControlPointFix);
-  },
+  }
 
   setLineStyle(style) {
     this._lineStyle = style;
@@ -122,29 +121,29 @@ const CurvedLinePeer = new Class({
     }
     this._updateStyle();
     this.updateLine();
-  },
+  }
 
   getLineStyle() {
     return this._lineStyle;
-  },
+  }
 
   setShowEndArrow(visible) {
     this._showEndArrow = visible;
     this.updateLine();
-  },
+  }
 
   isShowEndArrow() {
     return this._showEndArrow;
-  },
+  }
 
   setShowStartArrow(visible) {
     this._showStartArrow = visible;
     this.updateLine();
-  },
+  }
 
   isShowStartArrow() {
     return this._showStartArrow;
-  },
+  }
 
   _updatePath(avoidControlPointFix) {
     if (
@@ -163,7 +162,7 @@ const CurvedLinePeer = new Class({
       }`;
       this._native.setAttribute('d', path);
     }
-  },
+  }
 
   _updateStyle() {
     let style = '';
@@ -173,10 +172,10 @@ const CurvedLinePeer = new Class({
       }
     }
     this._native.setAttribute('style', style);
-  },
+  }
 
   // TODO: deduplicate this method, extracted from mindplot/src/components/util/Shape.js to avoid circular ref
-  _calculateDefaultControlPoints(srcPos, tarPos) {
+  static _calculateDefaultControlPoints(srcPos, tarPos) {
     const y = srcPos.y - tarPos.y;
     const x = srcPos.x - tarPos.x;
     const div = Math.abs(x) > 0.1 ? x : 0.1; // Prevent division by 0.
@@ -197,11 +196,11 @@ const CurvedLinePeer = new Class({
       new Point(-srcPos.x + x1, -srcPos.y + y1),
       new Point(-tarPos.x + x2, -tarPos.y + y2),
     ];
-  },
+  }
 
   _calculateAutoControlPoints(avoidControlPointFix) {
     // Both points available, calculate real points
-    const defaultpoints = this._calculateDefaultControlPoints(
+    const defaultpoints = CurvedLinePeer._calculateDefaultControlPoints(
       new Point(this._x1, this._y1),
       new Point(this._x2, this._y2),
     );
@@ -219,7 +218,7 @@ const CurvedLinePeer = new Class({
       this._control2.x = defaultpoints[1].x;
       this._control2.y = defaultpoints[1].y;
     }
-  },
+  }
 
   setDashed(length, spacing) {
     if ($defined(length) && $defined(spacing)) {
@@ -227,7 +226,7 @@ const CurvedLinePeer = new Class({
     } else {
       this._native.setAttribute('stroke-dasharray', '');
     }
-  },
+  }
-});
+}
 
 export default CurvedLinePeer;

packages/web2d/src/components/peer/svg/ElementPeer.js

@@ -20,8 +20,8 @@ import { $assert, $defined } from '@wisemapping/core-js';
 import EventUtils from '../utils/EventUtils';
 import TransformUtil from '../utils/TransformUtils';
 
-const ElementPeer = new Class({
+class ElementPeer {
-  initialize(svgElement) {
+  constructor(svgElement) {
     this._native = svgElement;
     if (!this._native.addEvent) {
       // Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811
@@ -35,11 +35,11 @@ const ElementPeer = new Class({
     this._size = { width: 1, height: 1 };
     this._changeListeners = {};
     // http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm
-  },
+  }
 
   setChildren(children) {
     this._children = children;
-  },
+  }
 
   getChildren() {
     let result = this._children;
@@ -48,28 +48,28 @@ const ElementPeer = new Class({
       this._children = result;
     }
     return result;
-  },
+  }
 
   getParent() {
     return this._parent;
-  },
+  }
 
   setParent(parent) {
     this._parent = parent;
-  },
+  }
 
   append(elementPeer) {
     // Store parent and child relationship.
     elementPeer.setParent(this);
     const children = this.getChildren();
-    children.include(elementPeer);
+    children.push(elementPeer);
 
     // Append element as a child.
     this._native.appendChild(elementPeer._native);
 
     // Broadcast events ...
     EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
+  }
 
   removeChild(elementPeer) {
     // Store parent and child relationship.
@@ -87,7 +87,7 @@ const ElementPeer = new Class({
 
     // Append element as a child.
     this._native.removeChild(elementPeer._native);
-  },
+  }
 
   /**
      * http://www.w3.org/TR/DOM-Level-3-Events/events.html
@@ -95,19 +95,19 @@ const ElementPeer = new Class({
      */
   addEvent(type, listener) {
     $(this._native).bind(type, listener);
-  },
+  }
 
   trigger(type, event) {
     $(this._native).trigger(type, event);
-  },
+  }
 
   cloneEvents(from) {
     this._native.cloneEvents(from);
-  },
+  }
 
   removeEvent(type, listener) {
     $(this._native).unbind(type, listener);
-  },
+  }
 
   setSize(width, height) {
     if ($defined(width) && this._size.width !== parseInt(width, 10)) {
@@ -121,11 +121,11 @@ const ElementPeer = new Class({
     }
 
     EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
+  }
 
   getSize() {
     return { width: this._size.width, height: this._size.height };
-  },
+  }
 
   setFill(color, opacity) {
     if ($defined(color)) {
@@ -134,13 +134,13 @@ const ElementPeer = new Class({
     if ($defined(opacity)) {
       this._native.setAttribute('fill-opacity', opacity);
     }
-  },
+  }
 
   getFill() {
     const color = this._native.getAttribute('fill');
     const opacity = this._native.getAttribute('fill-opacity');
     return { color, opacity: Number(opacity) };
-  },
+  }
 
   getStroke() {
     const vmlStroke = this._native;
@@ -154,7 +154,7 @@ const ElementPeer = new Class({
       opacity,
       width,
     };
-  },
+  }
 
   setStroke(width, style, color, opacity) {
     if ($defined(width)) {
@@ -165,7 +165,7 @@ const ElementPeer = new Class({
     }
     if ($defined(style)) {
       // Scale the dash array in order to be equal to VML. In VML, stroke style doesn't scale.
-      const dashArrayPoints = this.__stokeStyleToStrokDasharray[style];
+      const dashArrayPoints = ElementPeer.stokeStyleToStrokDasharray()[style];
       const scale = 1 / TransformUtil.workoutScale(this).width;
 
       let strokeWidth = this._native.getAttribute('stroke-width');
@@ -187,19 +187,19 @@ const ElementPeer = new Class({
     if ($defined(opacity)) {
       this._native.setAttribute('stroke-opacity', opacity);
     }
-  },
+  }
 
   /*
      * style='visibility: visible'
      */
   setVisibility(isVisible) {
     this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden');
-  },
+  }
 
   isVisible() {
     const visibility = this._native.getAttribute('visibility');
     return !(visibility === 'hidden');
-  },
+  }
 
   updateStrokeStyle() {
     const strokeStyle = this._stokeStyle;
@@ -208,7 +208,7 @@ const ElementPeer = new Class({
         this.setStroke(null, strokeStyle);
       }
     }
-  },
+  }
 
   attachChangeEventListener(type, listener) {
     const listeners = this.getChangeEventListeners(type);
@@ -216,7 +216,7 @@ const ElementPeer = new Class({
       throw new Error('Listener can not be null');
     }
     listeners.push(listener);
-  },
+  }
 
   getChangeEventListeners(type) {
     let listeners = this._changeListeners[type];
@@ -225,35 +225,38 @@ const ElementPeer = new Class({
       this._changeListeners[type] = listeners;
     }
     return listeners;
-  },
+  }
 
   /**
      * Move element to the front
      */
   moveToFront() {
     this._native.parentNode.appendChild(this._native);
-  },
+  }
 
   /**
      * Move element to the back
      */
   moveToBack() {
     this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
-  },
+  }
 
   setCursor(type) {
     this._native.style.cursor = type;
-  },
+  }
-});
 
-ElementPeer.prototype.svgNamespace = 'http://www.w3.org/2000/svg';
+  static stokeStyleToStrokDasharray() {
-ElementPeer.prototype.linkNamespace = 'http://www.w3.org/1999/xlink';
+    return {
-ElementPeer.prototype.__stokeStyleToStrokDasharray = {
+      solid: [],
-  solid: [],
+      dot: [1, 3],
-  dot: [1, 3],
+      dash: [4, 3],
-  dash: [4, 3],
+      longdash: [10, 2],
-  longdash: [10, 2],
+      dashdot: [5, 3, 1, 3],
-  dashdot: [5, 3, 1, 3],
+    };
-};
+  }
+}
+
+ElementPeer.svgNamespace = 'http://www.w3.org/2000/svg';
+ElementPeer.linkNamespace = 'http://www.w3.org/1999/xlink';
 
 export default ElementPeer;

packages/web2d/src/components/peer/svg/ElipsePeer.js

@@ -18,17 +18,16 @@
 import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 
-const ElipsePeer = new Class({
+class ElipsePeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor() {
-  initialize() {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'ellipse');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'ellipse');
+    super(svgElement);
-    this.parent(svgElement);
     this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
     this._position = { x: 0, y: 0 };
-  },
+  }
 
   setSize(width, height) {
-    this.parent(width, height);
+    super.setSize(width, height);
     if ($defined(width)) {
       this._native.setAttribute('rx', width / 2);
     }
@@ -39,7 +38,7 @@ const ElipsePeer = new Class({
 
     const pos = this.getPosition();
     this.setPosition(pos.x, pos.y);
-  },
+  }
 
   setPosition(pcx, pcy) {
     const size = this.getSize();
@@ -54,11 +53,11 @@ const ElipsePeer = new Class({
     if ($defined(cy)) {
       this._native.setAttribute('cy', cy);
     }
-  },
+  }
 
   getPosition() {
     return this._position;
-  },
+  }
-});
+}
 
 export default ElipsePeer;

packages/web2d/src/components/peer/svg/Font.js

@@ -17,12 +17,12 @@
  */
 import { $defined } from '@wisemapping/core-js';
 
-const Font = new Class({
+class Font {
-  initialize() {
+  constructor() {
     this._size = 10;
     this._style = 'normal';
     this._weight = 'normal';
-  },
+  }
 
   init(args) {
     if ($defined(args.size)) {
@@ -34,7 +34,7 @@ const Font = new Class({
     if ($defined(args.weight)) {
       this._weight = args.weight;
     }
-  },
+  }
 
   getHtmlSize(scale) {
     let result = 0;
@@ -50,35 +50,35 @@ const Font = new Class({
     }
 
     return result;
-  },
+  }
 
   getGraphSize() {
     return (this._size * 43) / 32;
-  },
+  }
 
   getSize() {
     return parseInt(this._size, 10);
-  },
+  }
 
   getStyle() {
     return this._style;
-  },
+  }
 
   getWeight() {
     return this._weight;
-  },
+  }
 
   setSize(size) {
     this._size = size;
-  },
+  }
 
   setStyle(style) {
     this._style = style;
-  },
+  }
 
   setWeight(weight) {
     this._weight = weight;
-  },
+  }
 
   getWidthMargin() {
     let result = 0;
@@ -86,7 +86,7 @@ const Font = new Class({
       result = 4;
     }
     return result;
-  },
+  }
-});
+}
 
 export default Font;

packages/web2d/src/components/peer/svg/GroupPeer.js

@@ -19,17 +19,16 @@ import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 import EventUtils from '../utils/EventUtils';
 
-const GroupPeer = new Class({
+class GroupPeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor() {
-  initialize() {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'g');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'g');
+    super(svgElement);
-    this.parent(svgElement);
     this._native.setAttribute('preserveAspectRatio', 'none');
     this._coordSize = { width: 1, height: 1 };
     this._native.setAttribute('focusable', 'true');
     this._position = { x: 0, y: 0 };
     this._coordOrigin = { x: 0, y: 0 };
-  },
+  }
 
   setCoordSize(width, height) {
     const change = this._coordSize.width !== width || this._coordSize.height !== height;
@@ -40,11 +39,11 @@ const GroupPeer = new Class({
       this.updateTransform();
     }
     EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
+  }
 
   getCoordSize() {
     return { width: this._coordSize.width, height: this._coordSize.height };
-  },
+  }
 
   /**
      * http://www.w3.org/TR/SVG/coords.html#TransformAttribute
@@ -93,11 +92,11 @@ const GroupPeer = new Class({
     sy = Number.isNaN(sy) ? 0 : sy;
 
     this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
-  },
+  }
 
   setOpacity(value) {
     this._native.setAttribute('opacity', value);
-  },
+  }
 
   setCoordOrigin(x, y) {
     const change = x !== this._coordOrigin.x || y !== this._coordOrigin.y;
@@ -111,15 +110,15 @@ const GroupPeer = new Class({
     if (change) {
       this.updateTransform();
     }
-  },
+  }
 
   setSize(width, height) {
     const change = width !== this._size.width || height !== this._size.height;
-    this.parent(width, height);
+    super.setSize(width, height);
     if (change) {
       this.updateTransform();
     }
-  },
+  }
 
   setPosition(x, y) {
     const change = x !== this._position.x || y !== this._position.y;
@@ -133,20 +132,20 @@ const GroupPeer = new Class({
     if (change) {
       this.updateTransform();
     }
-  },
+  }
 
   getPosition() {
     return { x: this._position.x, y: this._position.y };
-  },
+  }
 
   append(child) {
-    this.parent(child);
+    super.append(child);
     EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize');
-  },
+  }
 
   getCoordOrigin() {
     return { x: this._coordOrigin.x, y: this._coordOrigin.y };
-  },
+  }
-});
+}
 
 export default GroupPeer;

packages/web2d/src/components/peer/svg/ImagePeer.js

@@ -17,34 +17,33 @@
  */
 import ElementPeer from './ElementPeer';
 
-const ImagePeer = new Class({
+class ImagePeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor() {
-  initialize() {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'image');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'image');
+    super(svgElement);
-    this.parent(svgElement);
     this._position = { x: 0, y: 0 };
     this._href = '';
     this._native.setAttribute('preserveAspectRatio', 'none');
-  },
+  }
 
   setPosition(x, y) {
     this._position = { x, y };
     this._native.setAttribute('y', y);
     this._native.setAttribute('x', x);
-  },
+  }
 
   getPosition() {
     return this._position;
-  },
+  }
 
   setHref(url) {
-    this._native.setAttributeNS(this.linkNamespace, 'href', url);
+    this._native.setAttributeNS(ElementPeer.linkNamespace, 'href', url);
     this._href = url;
-  },
+  }
 
   getHref() {
     return this._href;
-  },
+  }
-});
+}
 
 export default ImagePeer;

packages/web2d/src/components/peer/svg/LinePeer.js

@@ -19,39 +19,39 @@ import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 import Point from '../../Point';
 
-const LinePeer = new Class({
+class LinePeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor() {
-  initialize() {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'line');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'line');
+    super(svgElement);
-    this.parent(svgElement);
     this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-  },
+  }
 
   setFrom(x1, y1) {
     this._x1 = x1;
     this._y1 = y1;
     this._native.setAttribute('x1', x1);
     this._native.setAttribute('y1', y1);
-  },
+  }
 
   setTo(x2, y2) {
     this._x2 = x2;
     this._y2 = y2;
     this._native.setAttribute('x2', x2);
     this._native.setAttribute('y2', y2);
-  },
+  }
 
   getFrom() {
     return new Point(this._x1, this._y1);
-  },
+  }
 
   getTo() {
     return new Point(this._x2, this._y2);
-  },
+  }
 
   /*
      * http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end
      */
+  // eslint-disable-next-line class-methods-use-this
   setArrowStyle(startStyle, endStyle) {
     if ($defined(startStyle)) {
       // Todo: This must be implemented ...
@@ -60,7 +60,7 @@ const LinePeer = new Class({
     if ($defined(endStyle)) {
       // Todo: This must be implemented ...
     }
-  },
+  }
-});
+}
 
 export default LinePeer;

packages/web2d/src/components/peer/svg/PolyLinePeer.js

@@ -19,43 +19,42 @@ import { $defined } from '@wisemapping/core-js';
 import * as PolyLineUtils from '../utils/PolyLineUtils';
 import ElementPeer from './ElementPeer';
 
-const PolyLinePeer = new Class({
+class PolyLinePeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor() {
-  initialize() {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'polyline');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'polyline');
+    super(svgElement);
-    this.parent(svgElement);
     this.setFill('none');
     this.breakDistance = 10;
-  },
+  }
 
   setFrom(x1, y1) {
     this._x1 = x1;
     this._y1 = y1;
     this._updatePath();
-  },
+  }
 
   setTo(x2, y2) {
     this._x2 = x2;
     this._y2 = y2;
     this._updatePath();
-  },
+  }
 
   setStrokeWidth(width) {
     this._native.setAttribute('stroke-width', width);
-  },
+  }
 
   setColor(color) {
     this._native.setAttribute('stroke', color);
-  },
+  }
 
   setStyle(style) {
     this._style = style;
     this._updatePath();
-  },
+  }
 
   getStyle() {
     return this._style;
-  },
+  }
 
   _updatePath() {
     if (this._style === 'Curved') {
@@ -65,7 +64,7 @@ const PolyLinePeer = new Class({
     } else {
       this._updateCurvePath();
     }
-  },
+  }
 
   _updateStraightPath() {
     if (
@@ -84,7 +83,7 @@ const PolyLinePeer = new Class({
       );
       this._native.setAttribute('points', path);
     }
-  },
+  }
 
   _updateMiddleCurvePath() {
     const x1 = this._x1;
@@ -112,7 +111,7 @@ const PolyLinePeer = new Class({
       } ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`;
       this._native.setAttribute('points', path);
     }
-  },
+  }
 
   _updateCurvePath() {
     if (
@@ -131,7 +130,7 @@ const PolyLinePeer = new Class({
       );
       this._native.setAttribute('points', path);
     }
-  },
+  }
-});
+}
 
 export default PolyLinePeer;

packages/web2d/src/components/peer/svg/RectPeer.js

@@ -21,14 +21,13 @@ import ElementPeer from './ElementPeer';
 /**
  * http://www.w3.org/TR/SVG/shapes.html#RectElement
  */
-const RectPeer = new Class({
+class RectPeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor(arc) {
-  initialize(arc) {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'rect');
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'rect');
+    super(svgElement);
-    this.parent(svgElement);
     this._arc = arc;
     this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-  },
+  }
 
   setPosition(x, y) {
     if ($defined(x)) {
@@ -37,17 +36,16 @@ const RectPeer = new Class({
     if ($defined(y)) {
       this._native.setAttribute('y', parseInt(y, 10));
     }
-  },
+  }
 
   getPosition() {
     const x = this._native.getAttribute('x');
     const y = this._native.getAttribute('y');
     return { x: parseInt(x, 10), y: parseInt(y, 10) };
-  },
+  }
 
   setSize(width, height) {
-    this.parent(width, height);
+    super.setSize(width, height);
-
     const min = width < height ? width : height;
     if ($defined(this._arc)) {
       // Transform percentages to SVG format.
@@ -55,7 +53,7 @@ const RectPeer = new Class({
       this._native.setAttribute('rx', arc);
       this._native.setAttribute('ry', arc);
     }
-  },
+  }
-});
+}
 
 export default RectPeer;

packages/web2d/src/components/peer/svg/TahomaFont.js

@@ -17,20 +17,20 @@
  */
 import Font from './Font';
 
-const TahomaFont = new Class({
+class TahomaFont extends Font {
-  Extends: Font,
+  constructor() {
-  initialize() {
+    super();
-    this.parent();
     this._fontFamily = 'tahoma';
-  },
+  }
 
   getFontFamily() {
     return this._fontFamily;
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getFont() {
     return Font.TAHOMA;
-  },
+  }
-});
+}
 
 export default TahomaFont;

packages/web2d/src/components/peer/svg/TextPeer.js

@@ -19,27 +19,26 @@ import { $defined } from '@wisemapping/core-js';
 import $ from '@libraries/jquery-2.1.0';
 import ElementPeer from './ElementPeer';
 
-const TextPeer = new Class({
+class TextPeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor(Font) {
-  initialize(Font) {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'text');
+    super(svgElement);
     this.Font = Font;
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'text');
-    this.parent(svgElement);
     this._position = { x: 0, y: 0 };
     this._font = new Font('Arial', this);
-  },
+  }
 
   append(element) {
     this._native.appendChild(element._native);
-  },
+  }
 
   setTextAlignment(align) {
     this._textAlign = align;
-  },
+  }
 
   getTextAlignment() {
     return $defined(this._textAlign) ? this._textAlign : 'left';
-  },
+  }
 
   setText(text) {
     // Remove all previous nodes ...
@@ -61,11 +60,11 @@ const TextPeer = new Class({
         me._native.appendChild(tspan);
       });
     }
-  },
+  }
 
   getText() {
     return this._text;
-  },
+  }
 
   setPosition(x, y) {
     this._position = { x, y };
@@ -74,15 +73,15 @@ const TextPeer = new Class({
 
     // tspan must be positioned manually.
     $(this._native).children('tspan').attr('x', x);
-  },
+  }
 
   getPosition() {
     return this._position;
-  },
+  }
 
   getNativePosition() {
     return $(this._native).position();
-  },
+  }
 
   setFont(font, size, style, weight) {
     if ($defined(font)) {
@@ -98,41 +97,41 @@ const TextPeer = new Class({
       this._font.setSize(size);
     }
     this._updateFontStyle();
-  },
+  }
 
   _updateFontStyle() {
     this._native.setAttribute('font-family', this._font.getFontFamily());
     this._native.setAttribute('font-size', this._font.getGraphSize());
     this._native.setAttribute('font-style', this._font.getStyle());
     this._native.setAttribute('font-weight', this._font.getWeight());
-  },
+  }
 
   setColor(color) {
     this._native.setAttribute('fill', color);
-  },
+  }
 
   getColor() {
     return this._native.getAttribute('fill');
-  },
+  }
 
   setTextSize(size) {
     this._font.setSize(size);
     this._updateFontStyle();
-  },
+  }
 
   setContentSize(width, height) {
     this._native.xTextSize = `${width.toFixed(1)},${height.toFixed(1)}`;
-  },
+  }
 
   setStyle(style) {
     this._font.setStyle(style);
     this._updateFontStyle();
-  },
+  }
 
   setWeight(weight) {
     this._font.setWeight(weight);
     this._updateFontStyle();
-  },
+  }
 
   setFontFamily(family) {
     const oldFont = this._font;
@@ -141,7 +140,7 @@ const TextPeer = new Class({
     this._font.setStyle(oldFont.getStyle());
     this._font.setWeight(oldFont.getWeight());
     this._updateFontStyle();
-  },
+  }
 
   getFont() {
     return {
@@ -150,12 +149,12 @@ const TextPeer = new Class({
       style: this._font.getStyle(),
       weight: this._font.getWeight(),
     };
-  },
+  }
 
   setSize(size) {
     this._font.setSize(size);
     this._updateFontStyle();
-  },
+  }
 
   getWidth() {
     let computedWidth;
@@ -170,13 +169,14 @@ const TextPeer = new Class({
         computedWidth = bbox.width;
       }
     } catch (e) {
+      console.error(e);
       computedWidth = 10;
     }
 
     let width = parseInt(computedWidth, 10);
     width += this._font.getWidthMargin();
     return width;
-  },
+  }
 
   getHeight() {
     // Firefox hack for this
@@ -188,11 +188,11 @@ const TextPeer = new Class({
       computedHeight = 10;
     }
     return parseInt(computedHeight, 10);
-  },
+  }
 
   getHtmlFontSize() {
     return this._font.getHtmlSize();
-  },
+  }
-});
+}
 
 export default TextPeer;

packages/web2d/src/components/peer/svg/TimesFont.js

@@ -17,20 +17,20 @@
  */
 import Font from './Font';
 
-const TimesFont = new Class({
+class TimesFont extends Font {
-  Extends: Font,
+  constructor() {
-  initialize() {
+    super();
-    this.parent();
     this._fontFamily = 'times';
-  },
+  }
 
   getFontFamily() {
     return this._fontFamily;
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getFont() {
     return Font.TIMES;
-  },
+  }
-});
+}
 
 export default TimesFont;

packages/web2d/src/components/peer/svg/VerdanaFont.js

@@ -17,20 +17,20 @@
  */
 import Font from './Font';
 
-const VerdanaFont = new Class({
+class VerdanaFont extends Font {
-  Extends: Font,
+  constructor() {
-  initialize() {
+    super();
-    this.parent();
     this._fontFamily = 'verdana';
-  },
+  }
 
   getFontFamily() {
     return this._fontFamily;
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getFont() {
     return Font.VERDANA;
-  },
+  }
-});
+}
 
 export default VerdanaFont;

packages/web2d/src/components/peer/svg/WorkspacePeer.js

@@ -19,16 +19,15 @@ import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 import EventUtils from '../utils/EventUtils';
 
-const WorkspacePeer = new Class({
+class WorkspacePeer extends ElementPeer {
-  Extends: ElementPeer,
+  constructor(element) {
-  initialize(element) {
+    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'svg');
+    super(svgElement);
     this._element = element;
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'svg');
-    this.parent(svgElement);
     this._native.setAttribute('focusable', 'true');
-    this._native.setAttribute('id', 'workspace');
+    // this._native.setAttribute('id', 'workspace');
     this._native.setAttribute('preserveAspectRatio', 'none');
-  },
+  }
 
   /**
      * http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox  attribute
@@ -67,7 +66,7 @@ const WorkspacePeer = new Class({
     this._native.setAttribute('viewBox', coords.join(' '));
     this._native.setAttribute('preserveAspectRatio', 'none');
     EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
+  }
 
   getCoordSize() {
     const viewBox = this._native.getAttribute('viewBox');
@@ -76,7 +75,7 @@ const WorkspacePeer = new Class({
       coords = viewBox.split(/ /);
     }
     return { width: coords[2], height: coords[3] };
-  },
+  }
 
   setCoordOrigin(x, y) {
     const viewBox = this._native.getAttribute('viewBox');
@@ -96,12 +95,12 @@ const WorkspacePeer = new Class({
     }
 
     this._native.setAttribute('viewBox', coords.join(' '));
-  },
+  }
 
   append(child) {
-    this.parent(child);
+    super.append(child);
     EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize');
-  },
+  }
 
   getCoordOrigin() {
     const viewBox = this._native.getAttribute('viewBox');
@@ -112,11 +111,12 @@ const WorkspacePeer = new Class({
     const x = parseFloat(coords[0]);
     const y = parseFloat(coords[1]);
     return { x, y };
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getPosition() {
     return { x: 0, y: 0 };
-  },
+  }
-});
+}
 
 export default WorkspacePeer;

packages/web2d/src/components/peer/utils/PolyLineUtils.js

@@ -1,3 +1,20 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
 export const buildCurvedPath = (dist, x1, y1, x2, y2) => {
   let signx = 1;
   let signy = 1;

packages/web2d/src/index.js

@@ -0,0 +1,47 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import Workspace from './components/Workspace';
+import Toolkit from './components/Toolkit';
+import Elipse from './components/Elipse';
+import Line from './components/Line';
+import PolyLine from './components/PolyLine';
+import CurvedLine from './components/CurvedLine';
+import Arrow from './components/Arrow';
+import Group from './components/Group';
+import Rect from './components/Rect';
+import Text from './components/Text';
+import Font from './components/Font';
+import Point from './components/Point';
+import Image from './components/Image';
+
+export {
+  Arrow,
+  CurvedLine,
+  Elipse,
+  Font,
+  Group,
+  Image,
+  Line,
+  Point,
+  PolyLine,
+  Rect,
+  Text,
+  Toolkit,
+  Workspace,
+};

packages/web2d/src/web2d.js

@@ -1,41 +0,0 @@
-import '@libraries/mootools-core-1.4.5';
-
-// Utils
-import eventUtils from '@utils/EventUtils';
-import transformUtils from '@utils/TransformUtils';
-
-// Import Components
-import workspace from '@components/Workspace';
-import toolkit from '@components/Toolkit';
-import elipse from '@components/Elipse';
-import line from '@components/Line';
-import polyLine from '@components/PolyLine';
-import curvedLine from '@components/CurvedLine';
-import arrow from '@components/Arrow';
-import group from '@components/Group';
-import rect from '@components/Rect';
-import text from '@components/Text';
-import font from '@components/Font';
-import point from '@components/Point';
-import image from '@components/Image';
-
-export default {
-  // Utils
-  EventUtils: eventUtils,
-  TransformUtils: transformUtils,
-
-  // Components
-  Arrow: arrow,
-  CurvedLine: curvedLine,
-  Elipse: elipse,
-  Font: font,
-  Group: group,
-  Image: image,
-  Line: line,
-  Point: point,
-  PolyLine: polyLine,
-  Rect: rect,
-  Text: text,
-  Toolkit: toolkit,
-  Workspace: workspace,
-};

packages/web2d/test/playground/Grid.js

@@ -0,0 +1,63 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import $ from '@libraries/jquery-2.1.0';
+
+class Grid {
+  constructor(parent, colums, rows) {
+    const cellSize = '10px';
+    this._parent = parent;
+    this._container = Grid._createContainer();
+    const tbody = $(this._container.firstChild.firstChild);
+    for (let i = 0; i < rows; i++) {
+      const trElement = $('<tr></tr>');
+      for (let j = 0; j < colums; j++) {
+        const tdElement = $('<td></td>');
+        tdElement.css({
+          width: cellSize,
+          height: cellSize,
+          borderWidth: '1px',
+          borderStyle: 'dashed',
+          borderColor: 'lightsteelblue',
+        });
+        trElement.append(tdElement);
+      }
+      tbody.append(trElement);
+    }
+  }
+
+  setPosition(x, y) {
+    this._container.style.left = x;
+    this._container.style.top = y;
+  }
+
+  render() {
+    $(this._parent).append(this._container);
+  }
+
+  static _createContainer() {
+    const result = window.document.createElement('div');
+    result.style.tableLayout = 'fixed';
+    result.style.borderCollapse = 'collapse';
+    result.style.emptyCells = 'show';
+    result.style.position = 'absolute';
+    result.innerHTML = '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
+    return result;
+  }
+}
+
+export default Grid ;

packages/web2d/test/playground/arrow.html

@@ -9,46 +9,10 @@
             border: 1px solid black;
         }
     </style>
-
-    <script type="text/javascript">
-        web2d = {
-            peer: {}
-        };
-
-        web2d.peer =
-        {
-            svg: {}
-        };
-
-        web2d.peer.utils = {};
-    </script>
-    <script type="text/javascript">
-        function initialize() {
-            web2d.Toolkit.init();
-
-            var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
-            overflowWorkspace.setSize("200px", "200px");
-            var arrow = new web2d.Arrow();
-            arrow.setFrom(50, 50);
-            arrow.setControlPoint(new web2d.Point(-50, 0));
-
-            overflowWorkspace.append(arrow);
-
-            var arrow2 = new web2d.Arrow();
-            arrow2.setFrom(100, 50);
-            arrow2.setControlPoint(new web2d.Point(50, 50));
-
-            overflowWorkspace.append(arrow2);
-
-            overflowWorkspace.addItAsChildTo($('#overflowExample').first());
-        }
-    </script>
 </head>
 
-<body onload="initialize();">
+<body>
-
     <h1>PolyLines Render Tests </h1>
-
     <table>
         <colgroup style="width:80%;">
             <col style="width:30%" />
@@ -63,15 +27,6 @@
             </td>
 
         </tr>
-        <tr>
-            <td>
-                This is how multiple childs will look in each style line
-            </td>
-            <td>
-                <div id="multipleLineExample" />
-            </td>
-
-        </tr>
     </table>
 </body>
 

packages/web2d/test/playground/arrow.js

@@ -0,0 +1,22 @@
+import $ from '@libraries/jquery-2.1.0';
+import {
+  Toolkit, Workspace, Arrow, Point,
+} from '../../src';
+
+Toolkit.init();
+
+const overflowWorkspace = new Workspace({ fillColor: 'green' });
+overflowWorkspace.setSize('200px', '200px');
+const arrow = new Arrow();
+arrow.setFrom(50, 50);
+arrow.setControlPoint(new Point(-50, 0));
+
+overflowWorkspace.append(arrow);
+
+const arrow2 = new Arrow();
+arrow2.setFrom(100, 50);
+arrow2.setControlPoint(new Point(50, 50));
+
+overflowWorkspace.append(arrow2);
+
+overflowWorkspace.addItAsChildTo($('#overflowExample').first());

packages/web2d/test/playground/context-loader.js

@@ -1,8 +0,0 @@
-import Grid from './utils';
-import web2d from '../../src/web2d';
-import $ from '@libraries/jquery-2.1.0';
-
-global.Grid = Grid;
-global.web2d = web2d;
-global.$ = $;
-

packages/web2d/test/playground/curvedLine.html

@@ -9,47 +9,9 @@
             border: 1px solid black;
         }
     </style>
-    <script type="text/javascript">
-        web2d = {
-            peer: {}
-        };
-
-        web2d.peer =
-        {
-            svg: {}
-        };
-
-        web2d.peer.utils = {};
-    </script>
-    <script type="text/javascript">
-        function initialize() {
-            web2d.Toolkit.init();
-
-            var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
-            overflowWorkspace.setSize("400px", "400px");
-            var line1 = new web2d.CurvedLine();
-            line1.setStyle(web2d.CurvedLine.SIMPLE_LINE);
-            line1.setFrom(200, 200);
-            line1.setTo(100, 100);
-            line1.setSrcControlPoint(new web2d.Point(-100, 0));
-            line1.setDestControlPoint(new web2d.Point(100, 0));
-            overflowWorkspace.append(line1);
-
-            var line2 = new web2d.CurvedLine();
-            line2.setStyle(web2d.CurvedLine.NICE_LINE);
-            line2.setFrom(0, 0);
-            line2.setTo(150, 90);
-            line2.setSrcControlPoint(new web2d.Point(100, 0));
-            line2.setDestControlPoint(new web2d.Point(-100, 0));
-            overflowWorkspace.append(line2);
-
-            overflowWorkspace.addItAsChildTo($('#overflowExample').first());
-
-        }
-    </script>
 </head>
 
-<body onload="initialize();">
+<body>
 
     <h1>PolyLines Render Tests </h1>
 
@@ -67,15 +29,6 @@
             </td>
 
         </tr>
-        <tr>
-            <td>
-                This is how multiple childs will look in each style line
-            </td>
-            <td>
-                <div id="multipleLineExample" />
-            </td>
-
-        </tr>
     </table>
 </body>
 

packages/web2d/test/playground/curvedLine.js

@@ -0,0 +1,26 @@
+import $ from '@libraries/jquery-2.1.0';
+import {
+  Toolkit, Workspace, CurvedLine, Point,
+} from '../../src';
+
+Toolkit.init();
+
+const overflowWorkspace = new Workspace({ fillColor: 'green' });
+overflowWorkspace.setSize('400px', '400px');
+const line1 = new CurvedLine();
+line1.setStyle(CurvedLine.SIMPLE_LINE);
+line1.setFrom(200, 200);
+line1.setTo(100, 100);
+line1.setSrcControlPoint(new Point(-100, 0));
+line1.setDestControlPoint(new Point(100, 0));
+overflowWorkspace.append(line1);
+
+const line2 = new CurvedLine();
+line2.setStyle(CurvedLine.NICE_LINE);
+line2.setFrom(0, 0);
+line2.setTo(150, 90);
+line2.setSrcControlPoint(new Point(100, 0));
+line2.setDestControlPoint(new Point(-100, 0));
+overflowWorkspace.append(line2);
+
+overflowWorkspace.addItAsChildTo($('#overflowExample').first());

packages/web2d/test/playground/events.html

@@ -1,5 +1,4 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
@@ -8,136 +7,14 @@
         td {
             border: 1px solid black;
         }
-    </style>
-
-    <script type="text/javascript">
-        web2d = {
-            peer: {}
-        };
-
-        web2d.peer =
-        {
-            svg: {}
-        };
-
-        web2d.peer.utils = {};
-    </script>
-    <style type="text/css">
         .eventForm {
             float: left;
             margin: 10px;
         }
     </style>
-
-    <script type="text/javascript">
-
-        function EventLogger(type, element) {
-            this._enable = false;
-            this._element = element;
-            this._type = type;
-            this._listener = function logger(event) {
-                var oldColor = element.getAttribute('fillColor');
-                element.setFill("yellow");
-
-                alert("Event on:" + element.getType() + ", Type:" + type);
-                element.setFill(oldColor);
-            };
-        }
-
-        EventLogger.prototype.changeState = function () {
-            this._enable = !this._enable;
-            if (this._enable) {
-                this._element.addEvent(this._type, this._listener);
-            } else {
-                this._element.removeEvent(this._type, this._listener);
-            }
-            return this._enable;
-        };
-
-        function MultipleEventHandler(type, element) {
-            this._listeners = [];
-            this._type = type;
-            this._element = element;
-        }
-
-        MultipleEventHandler.prototype.registerOneListener = function () {
-            var count = this._listeners.length;
-            var listener = function (event) {
-                alert("Listener #:" + count);
-            };
-            this._listeners.push(listener);
-            this._element.addEvent(this._type, listener);
-
-        }
-
-        MultipleEventHandler.prototype.listenerCount = function () {
-            return this._listeners.length;
-        }
-
-        MultipleEventHandler.prototype.unRegisterOneListener = function () {
-            if (this._listeners.length > 0) {
-                var listener = this._listeners.pop();
-                this._element.removeEvent(this._type, listener);
-            }
-        }
-
-        function initialize() {
-            web2d.Toolkit.init();
-
-            // Workspace with CoordOrigin(100,100);
-            var workspace = new web2d.Workspace();
-            workspace.setSize("150px", "150px");
-            workspace.setCoordSize(150, 150);
-
-            var bigElipse = new web2d.Elipse();
-            bigElipse.setSize(100, 100);
-            bigElipse.setPosition(75, 75);
-            workspace.append(bigElipse);
-
-            var smallElipse = new web2d.Elipse();
-            smallElipse.setSize(50, 50);
-            smallElipse.setPosition(75, 75);
-            smallElipse.setFill('red')
-            workspace.append(smallElipse);
-
-            wClickEventLogger = new EventLogger('click', workspace);
-            wMouseoverEventLogger = new EventLogger('mouseover', workspace);
-            wMouseoutEventLogger = new EventLogger('mouseout', workspace);
-            wMousemoveEventLogger = new EventLogger('mousemove', workspace);
-            wDblCickEventLogger = new EventLogger('dblclick', workspace);
-
-            esClickEventLogger = new EventLogger('click', smallElipse);
-            esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
-            esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
-            esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
-            esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
-
-            ebClickEventLogger = new EventLogger('click', bigElipse);
-            ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
-            ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
-            ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
-            ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
-
-            workspace.addItAsChildTo($('#workspaceContainer').first());
-
-            var mEventWorkspace = new web2d.Workspace();
-            mEventWorkspace.setSize("150px", "150px");
-            mEventWorkspace.setCoordSize(150, 150);
-
-            var elipse = new web2d.Elipse();
-            elipse.setSize(100, 100);
-            elipse.setPosition(75, 75);
-            elipse.setFill('blue')
-            mEventWorkspace.append(elipse);
-
-            mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
-            multipleHandler = new MultipleEventHandler('click', elipse);
-        }
-
-    </script>
 </head>
 
-<body onload="initialize();">
+<body>
     <h1>Elements Event Handling</h1>
 
     <table>

packages/web2d/test/playground/events.js

@@ -0,0 +1,107 @@
+/* eslint-disable no-alert */
+import $ from '@libraries/jquery-2.1.0';
+import {
+  Toolkit, Workspace, Elipse,
+} from '../../src';
+
+global.$ = $;
+
+function EventLogger(type, element) {
+  this._enable = false;
+  this._element = element;
+  this._type = type;
+  this._listener = function logger() {
+    const oldColor = element.getAttribute('fillColor');
+    element.setFill('yellow');
+
+    alert(`Event on:${element.getType()}, Type:${type}`);
+    element.setFill(oldColor);
+  };
+}
+
+EventLogger.prototype.changeState = function changeState() {
+  this._enable = !this._enable;
+  if (this._enable) {
+    this._element.addEvent(this._type, this._listener);
+  } else {
+    this._element.removeEvent(this._type, this._listener);
+  }
+  return this._enable;
+};
+
+function MultipleEventHandler(type, element) {
+  this._listeners = [];
+  this._type = type;
+  this._element = element;
+}
+
+MultipleEventHandler.prototype.registerOneListener = function registerOneListener() {
+  const count = this._listeners.length;
+  const listener = () => {
+    alert(`Listener #:${count}`);
+  };
+  this._listeners.push(listener);
+  this._element.addEvent(this._type, listener);
+};
+
+MultipleEventHandler.prototype.listenerCount = function listenerCount() {
+  return this._listeners.length;
+};
+
+MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneListener() {
+  if (this._listeners.length > 0) {
+    const listener = this._listeners.pop();
+    this._element.removeEvent(this._type, listener);
+  }
+};
+
+Toolkit.init();
+
+// Workspace with CoordOrigin(100,100);
+const workspace = new Workspace();
+workspace.setSize('150px', '150px');
+workspace.setCoordSize(150, 150);
+
+const bigElipse = new Elipse();
+bigElipse.setSize(100, 100);
+bigElipse.setPosition(75, 75);
+workspace.append(bigElipse);
+
+const smallElipse = new Elipse();
+smallElipse.setSize(50, 50);
+smallElipse.setPosition(75, 75);
+smallElipse.setFill('red');
+workspace.append(smallElipse);
+
+global.wClickEventLogger = new EventLogger('click', workspace);
+global.wMouseoverEventLogger = new EventLogger('mouseover', workspace);
+global.wMouseoutEventLogger = new EventLogger('mouseout', workspace);
+global.wMousemoveEventLogger = new EventLogger('mousemove', workspace);
+global.wDblCickEventLogger = new EventLogger('dblclick', workspace);
+
+global.esClickEventLogger = new EventLogger('click', smallElipse);
+global.esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
+global.esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
+global.esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
+global.esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
+
+global.ebClickEventLogger = new EventLogger('click', bigElipse);
+global.ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
+global.ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
+global.ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
+global.ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
+
+workspace.addItAsChildTo($('#workspaceContainer').first());
+
+const mEventWorkspace = new Workspace();
+mEventWorkspace.setSize('150px', '150px');
+mEventWorkspace.setCoordSize(150, 150);
+
+const elipse = new Elipse();
+elipse.setSize(100, 100);
+elipse.setPosition(75, 75);
+elipse.setFill('blue');
+mEventWorkspace.append(elipse);
+
+mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
+global.multipleHandler = new MultipleEventHandler('click', elipse);

packages/web2d/test/playground/font.html

@@ -1,7 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
 <html xmlns="http://www.w3.org/1999/xhtml">
-
 <head>
     <style>
         th,
@@ -9,78 +7,9 @@
             border: 1px solid black;
         }
     </style>
-    <script type="text/javascript">
-        web2d = {
-            peer: {}
-        };
-
-        web2d.peer =
-        {
-            svg: {}
-        };
-
-        web2d.peer.utils = {};
-    </script>
-
-    <script type="text/javascript">
-        function multiline(text, family, elemId) {
-            var overflowWorkspace = new web2d.Workspace();
-            overflowWorkspace.setSize('200px', '240px');
-            overflowWorkspace.setCoordSize('200', '240');
-            overflowWorkspace.setCoordOrigin(0, 0);
-
-            [6, 8, 10, 15].forEach(function (size, i) {
-                var wText = new web2d.Text();
-                overflowWorkspace.append(wText);
-
-                wText.setText(text);
-                wText.setFont(family, size, 'bold');
-                wText.setPosition(30, 50 * i);
-                wText.setColor('red');
-            });
-
-            overflowWorkspace.addItAsChildTo($("#" + elemId));
-        }
-
-        function alignments(text, family, elemId) {
-            var overflowWorkspace = new web2d.Workspace();
-            overflowWorkspace.setSize('260px', '240px');
-            overflowWorkspace.setCoordSize('260', '240');
-            overflowWorkspace.setCoordOrigin(0, 0);
-
-            ['center', 'left', 'right'].forEach(function (align, i) {
-                var wText = new web2d.Text();
-                overflowWorkspace.append(wText);
-
-                wText.setText(text);
-                wText.setFont(family, 8, 'bold');
-                wText.setPosition(30, 80 * i);
-                wText.setColor('red');
-                wText.setTextAlignment(align);
-            });
-
-            overflowWorkspace.addItAsChildTo($("#" + elemId));
-        }
-
-        function initialize() {
-            web2d.Toolkit.init();
-            // Multine tests ...
-            ['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
-                multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
-            });
-
-            // Multine tests and alingments .. ...
-            ['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
-                alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
-            })
-        }
-    </script>
 </head>
-
+<body>
-<body onload="initialize();">
-
     <h1>Web2d Fonts Tests</h1>
-
     <table>
         <colgroup>
             <col style="width:30%" />

packages/web2d/test/playground/font.js

@@ -0,0 +1,57 @@
+import $ from '@libraries/jquery-2.1.0';
+import {
+  Toolkit, Workspace, Text,
+} from '../../src';
+
+global.$ = $;
+
+function multiline(text, family, elemId) {
+  const workspace = new Workspace();
+  workspace.setSize('200px', '240px');
+  workspace.setCoordSize('200', '240');
+  workspace.setCoordOrigin(0, 0);
+
+  [6, 8, 10, 15].forEach((size, i) => {
+    const wText = new Text();
+    workspace.append(wText);
+
+    wText.setText(text);
+    wText.setFont(family, size, 'bold');
+    wText.setPosition(30, 50 * i);
+    wText.setColor('blue');
+  });
+
+  workspace.addItAsChildTo($(`#${elemId}`));
+}
+
+function alignments(text, family, elemId) {
+  const overflowWorkspace = new Workspace();
+  overflowWorkspace.setSize('260px', '240px');
+  overflowWorkspace.setCoordSize('260', '240');
+  overflowWorkspace.setCoordOrigin(0, 0);
+
+  ['center', 'left', 'right'].forEach((align, i) => {
+    const wText = new Text();
+    overflowWorkspace.append(wText);
+
+    wText.setText(text);
+    wText.setFont(family, 8, 'bold');
+    wText.setPosition(30, 80 * i);
+    wText.setColor('green');
+    wText.setTextAlignment(align);
+  });
+
+  overflowWorkspace.addItAsChildTo($(`#${elemId}`));
+}
+
+Toolkit.init();
+
+// Multine tests ...
+['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
+  multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);
+});
+
+// Multine tests and alingments .. ...
+['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
+  alignments('This multine text.\nThis is the long line just because :)\nShort line', family, `amulti${i}`);
+});

packages/web2d/test/playground/group.html

@@ -9,338 +9,11 @@
             border: 1px solid black;
         }
     </style>
-    <script type="text/javascript">
-        web2d = {
-            peer: {}
-        };
 
-        web2d.peer =
-        {
-            svg: {}
-        };
-
-        web2d.peer.utils = {};
-    </script>
-
-    <script type="text/javascript">
-        function initialize() {
-            web2d.Toolkit.init();
-
-            var basicTest = function () {
-                var workspace = new web2d.Workspace();
-                workspace.setSize("150px", "150px");
-                workspace.setCoordSize(100, 100);
-
-                var group = new web2d.Group();
-                group.setSize(50, 50);
-                group.setPosition(25, 50);
-                group.setCoordSize(200, 200);
-                group.setCoordOrigin(0, 0);
-                workspace.append(group);
-
-                var elipse = new web2d.Elipse();
-                elipse.setSize(200, 200);
-                elipse.setPosition(100, 100);
-                group.append(elipse);
-
-                var line = new web2d.Line();
-                line.setFrom(0, 0);
-                line.setTo(200, 200);
-                line.setStroke("blue");
-                group.append(line);
-
-                line = new web2d.Line();
-                line.setFrom(200, 0);
-                line.setTo(0, 200);
-                line.setStroke("blue");
-                group.append(line);
-
-                workspace.addItAsChildTo($('#groupBasicContainer'));
-
-
-                var xDir = 1;
-                var yDir = 1;
-                var executer = function () {
-                    var y = group.getPosition().y + yDir;
-                    var x = group.getPosition().x + xDir;
-
-                    if (x < 0) {
-                        xDir = 1;
-                    } else if (x > 50) {
-                        xDir = -1;
-                    }
-
-                    if (y < 0) {
-                        yDir = 1;
-                    } else if (y > 50) {
-                        yDir = -1;
-                    }
-
-                    //  Logger.logMsg("Moving group x,y:"+ x + "," + y);
-                    group.setPosition(x, y);
-                };
-                //executer.periodical(100);
-            };
-            basicTest();
-
-
-            var eventTest = function () {
-                var workspace = new web2d.Workspace();
-                workspace.setSize("150px", "150px");
-                workspace.setCoordSize(100, 100);
-
-                var groupAttributes = { width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0' };
-                var group = new web2d.Group(groupAttributes);
-                workspace.append(group);
-
-                var elipseLeft = new web2d.Elipse();
-                elipseLeft.setSize(200, 200)
-                elipseLeft.setPosition(200, 0)
-                group.append(elipseLeft);
-
-                var elipseRight = new web2d.Elipse();
-                elipseRight.setSize(200, 200)
-                elipseRight.setPosition(0, 0)
-                group.append(elipseRight);
-
-                var listener = function (e) {
-                    alert("Click event on:" + this.getType())
-                };
-                group.addEvent("click", listener);
-                elipseLeft.addEvent("click", listener);
-                elipseRight.addEvent("click", listener);
-
-                workspace.addItAsChildTo($('#groupEventsContainer'));
-            }
-            eventTest();
-
-
-            var eventTest = function () {
-                var workspace = new web2d.Workspace();
-                workspace.setSize("150px", "150px");
-                workspace.setCoordSize(200, 200);
-
-                var groupOuter = new web2d.Group();
-                groupOuter.setSize(50, 50)
-                groupOuter.setPosition(25, 25);
-                groupOuter.setCoordSize(100, 100);
-                groupOuter.setCoordOrigin(0, 0)
-                workspace.append(groupOuter);
-
-                var elipseOuter = new web2d.Elipse();
-                elipseOuter.setSize(200, 200);
-                elipseOuter.setPosition(100, 100);
-                elipseOuter.setFill("red");
-                groupOuter.append(elipseOuter);
-
-                var line = new web2d.Line();
-                line.setFrom(0, 0);
-                line.setTo(200, 200);
-                line.setStroke("red");
-                groupOuter.append(line);
-
-                var line = new web2d.Line();
-                line.setFrom(200, 0);
-                line.setTo(0, 200);
-                line.setStroke("red");
-                groupOuter.append(line);
-
-                var groupInner = new web2d.Group();
-                groupInner.setSize(50, 50);
-                groupInner.setPosition(25, 25);
-                groupInner.setCoordSize(100, 100);
-                groupInner.setCoordOrigin(0, 0);
-                groupOuter.append(groupInner);
-
-                var elipse = new web2d.Elipse();
-                elipse.setSize(200, 200);
-                elipse.setPosition(100, 100);
-                groupInner.append(elipse);
-
-                var line = new web2d.Line();
-                line.setFrom(0, 0);
-                line.setTo(200, 200);
-                line.setStroke("blue");
-                groupInner.append(line);
-
-                var line = new web2d.Line();
-                line.setFrom(200, 0);
-                line.setTo(0, 200);
-                line.setStroke("blue");
-                groupInner.append(line);
-
-                workspace.addItAsChildTo($('#groupNestedContainer'));
-            };
-            eventTest();
-
-
-            var workspaceCoordSizeSample = function () {
-
-                function groupSampleBuilder(width, height) {
-                    // Group with CoordSize(50,50);
-                    var workspace = new web2d.Workspace();
-                    workspace.setSize("100px", "100px");
-                    workspace.setCoordSize(100, 100);
-
-                    elipseOuter = new web2d.Elipse();
-                    elipseOuter.setPosition(50, 50);
-                    elipseOuter.setSize(50, 50);
-                    workspace.append(elipseOuter);
-
-                    var group = new web2d.Group();
-                    group.setSize(50, 50);
-                    group.setCoordSize(width, height);
-                    group.setPosition(25, 25);
-                    workspace.append(group);
-
-                    elipseInner = new web2d.Elipse();
-                    elipseInner.setPosition(50, 50);
-                    elipseInner.setSize(50, 50);
-                    elipseInner.setFill("red");
-                    group.append(elipseInner);
-
-                    return workspace;
-                }
-
-                var sample100x100 = groupSampleBuilder(100, 100);
-                sample100x100.addItAsChildTo($("#coordsizeExample100x100"));
-
-                var sample100x200 = groupSampleBuilder(100, 200);
-                sample100x200.addItAsChildTo($("#coordsizeExample100x200"));
-
-                var sample200x100 = groupSampleBuilder(200, 100);
-                sample200x100.addItAsChildTo($("#coordsizeExample200x100"));
-            };
-            workspaceCoordSizeSample();
-
-
-            var workspaceCoordOriginSample = function () {
-
-                function groupSampleBuilder(x, y) {
-                    var workspace = new web2d.Workspace();
-                    workspace.setSize("100px", "100px");
-                    workspace.setCoordSize(100, 100);
-
-                    elipseOuter = new web2d.Elipse();
-                    elipseOuter.setPosition(50, 50);
-                    elipseOuter.setSize(50, 50);
-                    workspace.append(elipseOuter);
-
-                    var group = new web2d.Group();
-                    group.setSize(50, 50);
-                    group.setCoordSize(100, 100);
-                    group.setCoordOrigin(x, y);
-                    group.setPosition(25, 25);
-                    workspace.append(group);
-
-                    elipseInner = new web2d.Elipse();
-                    elipseInner.setPosition(50, 50);
-                    elipseInner.setSize(50, 50);
-                    elipseInner.setFill("red");
-                    group.append(elipseInner);
-
-                    return workspace;
-                }
-                ;
-
-                var sample0x0 = groupSampleBuilder(0, 0);
-                sample0x0.addItAsChildTo($("#coordOriginExample0x0"));
-
-                var sample100x200 = groupSampleBuilder(0, 50);
-                sample100x200.addItAsChildTo($("#coordOriginExample0x50"));
-
-                var sample200x100 = groupSampleBuilder(50, 0);
-                sample200x100.addItAsChildTo($("#coordOriginExample50x0"));
-            }
-            workspaceCoordOriginSample();
-
-
-
-            var groupVisibilitySample = function () {
-
-                var workspace = new web2d.Workspace();
-                workspace.setSize("100px", "100px");
-                workspace.setCoordSize(100, 100);
-
-                var group = new web2d.Group();
-                group.setSize(100, 100);
-                group.setPosition(0, 0);
-                group.setCoordSize(100, 100);
-                group.addEvent("mouseover", function () {
-                    alert("Mouse Over Group");
-                });
-                workspace.append(group);
-
-                elipseOuter = new web2d.Elipse();
-                elipseOuter.setPosition(50, 50);
-                elipseOuter.setSize(50, 50);
-                group.addEvent("mouseover", function () {
-                    alert("Mouse Over elipseOuter");
-                });
-                group.append(elipseOuter);
-
-                elipseInner = new web2d.Elipse();
-                elipseInner.setPosition(50, 50);
-                elipseInner.setSize(25, 25);
-                elipseInner.setFill("red");
-                group.append(elipseInner);
-
-                var isVisible = true;
-                var executer = function () {
-                    isVisible = !isVisible;
-                    group.setVisibility(isVisible);
-                };
-                //executer.periodical(100);
-
-                workspace.addItAsChildTo($('#visibilityExample'));
-
-            }
-            groupVisibilitySample();
-
-            var groupVisibilitySample = function () {
-
-                var workspace = new web2d.Workspace();
-                workspace.setSize("100px", "100px");
-                workspace.setCoordSize(100, 100);
-
-                var group = new web2d.Group();
-                group.setSize(100, 100);
-                group.setPosition(0, 0);
-                group.setCoordSize(100, 100);
-                workspace.append(group);
-
-                elipseOuter = new web2d.Elipse();
-                elipseOuter.setPosition(50, 50);
-                elipseOuter.setSize(50, 50);
-                group.append(elipseOuter);
-
-                elipseInner = new web2d.Elipse();
-                elipseInner.setPosition(50, 50);
-                elipseInner.setSize(25, 25);
-                elipseInner.setFill("red");
-                group.append(elipseInner);
-
-                var width = 10;
-                var height = 10;
-                var executer = function () {
-                    width = (width + 10) % 100;
-                    height = (height + 10) % 100;
-                    group.setCoordSize(width, height);
-                };
-                //executer.periodical(100);
-
-                workspace.addItAsChildTo($('#scaleStrokeExample'));
-
-            }
-            groupVisibilitySample();
-
-        }
-    </script>
 </head>
 
-<body onload="initialize();">
+<body>
-
+    <h1>Group Render Tests</h1>
-    <h1>Group Render Tests.</h1>
     <table>
         <colgroup style="width:80%;">
             <col style="width:50%" />

packages/web2d/test/playground/group.js

@@ -0,0 +1,304 @@
+/* eslint-disable no-alert */
+import $ from '@libraries/jquery-2.1.0';
+import {
+  Toolkit, Workspace, Line, Group, Elipse,
+} from '../../src';
+
+global.$ = $;
+
+Toolkit.init();
+
+const basicTest = () => {
+  const workspace = new Workspace();
+  workspace.setSize('150px', '150px');
+  workspace.setCoordSize(100, 100);
+
+  const group = new Group();
+  group.setSize(50, 50);
+  group.setPosition(25, 50);
+  group.setCoordSize(200, 200);
+  group.setCoordOrigin(0, 0);
+  workspace.append(group);
+
+  const elipse = new Elipse();
+  elipse.setSize(200, 200);
+  elipse.setPosition(100, 100);
+  group.append(elipse);
+
+  let line = new Line();
+  line.setFrom(0, 0);
+  line.setTo(200, 200);
+  line.setStroke('blue');
+  group.append(line);
+
+  line = new Line();
+  line.setFrom(200, 0);
+  line.setTo(0, 200);
+  line.setStroke('blue');
+  group.append(line);
+
+  workspace.addItAsChildTo($('#groupBasicContainer'));
+
+  let xDir = 1;
+  let yDir = 1;
+  const executer = function () {
+    const y = group.getPosition().y + yDir;
+    const x = group.getPosition().x + xDir;
+
+    if (x < 0) {
+      xDir = 1;
+    } else if (x > 50) {
+      xDir = -1;
+    }
+
+    if (y < 0) {
+      yDir = 1;
+    } else if (y > 50) {
+      yDir = -1;
+    }
+
+    //  Logger.logMsg("Moving group x,y:"+ x + "," + y);
+    group.setPosition(x, y);
+  };
+    // executer.periodical(100);
+};
+basicTest();
+
+const eventTest = () => {
+  const workspace = new Workspace();
+  workspace.setSize('150px', '150px');
+  workspace.setCoordSize(100, 100);
+
+  const groupAttributes = {
+    width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0',
+  };
+  const group = new Group(groupAttributes);
+  workspace.append(group);
+
+  const elipseLeft = new Elipse();
+  elipseLeft.setSize(200, 200);
+  elipseLeft.setPosition(200, 0);
+  group.append(elipseLeft);
+
+  const elipseRight = new Elipse();
+  elipseRight.setSize(200, 200);
+  elipseRight.setPosition(0, 0);
+  group.append(elipseRight);
+
+  const listener = function listener() {
+    alert(`Click event on:${this.getType()}`);
+  };
+
+  group.addEvent('click', listener);
+  elipseLeft.addEvent('click', listener);
+  elipseRight.addEvent('click', listener);
+
+  workspace.addItAsChildTo($('#groupEventsContainer'));
+};
+eventTest();
+
+const eventTest2 = () => {
+  const workspace = new Workspace();
+  workspace.setSize('150px', '150px');
+  workspace.setCoordSize(200, 200);
+
+  const groupOuter = new Group();
+  groupOuter.setSize(50, 50);
+  groupOuter.setPosition(25, 25);
+  groupOuter.setCoordSize(100, 100);
+  groupOuter.setCoordOrigin(0, 0);
+  workspace.append(groupOuter);
+
+  const elipseOuter = new Elipse();
+  elipseOuter.setSize(200, 200);
+  elipseOuter.setPosition(100, 100);
+  elipseOuter.setFill('red');
+  groupOuter.append(elipseOuter);
+
+  let line = new Line();
+  line.setFrom(0, 0);
+  line.setTo(200, 200);
+  line.setStroke('red');
+  groupOuter.append(line);
+
+  line = new Line();
+  line.setFrom(200, 0);
+  line.setTo(0, 200);
+  line.setStroke('red');
+  groupOuter.append(line);
+
+  const groupInner = new Group();
+  groupInner.setSize(50, 50);
+  groupInner.setPosition(25, 25);
+  groupInner.setCoordSize(100, 100);
+  groupInner.setCoordOrigin(0, 0);
+  groupOuter.append(groupInner);
+
+  const elipse = new Elipse();
+  elipse.setSize(200, 200);
+  elipse.setPosition(100, 100);
+  groupInner.append(elipse);
+
+  line = new Line();
+  line.setFrom(0, 0);
+  line.setTo(200, 200);
+  line.setStroke('blue');
+  groupInner.append(line);
+
+  line = new Line();
+  line.setFrom(200, 0);
+  line.setTo(0, 200);
+  line.setStroke('blue');
+  groupInner.append(line);
+
+  workspace.addItAsChildTo($('#groupNestedContainer'));
+};
+eventTest2();
+
+const workspaceCoordSizeSample = () => {
+  function groupSampleBuilder(width, height) {
+    // Group with CoordSize(50,50);
+    const workspace = new Workspace();
+    workspace.setSize('100px', '100px');
+    workspace.setCoordSize(100, 100);
+
+    const elipseOuter = new Elipse();
+    elipseOuter.setPosition(50, 50);
+    elipseOuter.setSize(50, 50);
+    workspace.append(elipseOuter);
+
+    const group = new Group();
+    group.setSize(50, 50);
+    group.setCoordSize(width, height);
+    group.setPosition(25, 25);
+    workspace.append(group);
+
+    const elipseInner = new Elipse();
+    elipseInner.setPosition(50, 50);
+    elipseInner.setSize(50, 50);
+    elipseInner.setFill('red');
+    group.append(elipseInner);
+
+    return workspace;
+  }
+
+  const sample100x100 = groupSampleBuilder(100, 100);
+  sample100x100.addItAsChildTo($('#coordsizeExample100x100'));
+
+  const sample100x200 = groupSampleBuilder(100, 200);
+  sample100x200.addItAsChildTo($('#coordsizeExample100x200'));
+
+  const sample200x100 = groupSampleBuilder(200, 100);
+  sample200x100.addItAsChildTo($('#coordsizeExample200x100'));
+};
+workspaceCoordSizeSample();
+
+const workspaceCoordOriginSample = () => {
+  function groupSampleBuilder(x, y) {
+    const workspace = new Workspace();
+    workspace.setSize('100px', '100px');
+    workspace.setCoordSize(100, 100);
+
+    const elipseOuter = new Elipse();
+    elipseOuter.setPosition(50, 50);
+    elipseOuter.setSize(50, 50);
+    workspace.append(elipseOuter);
+
+    const group = new Group();
+    group.setSize(50, 50);
+    group.setCoordSize(100, 100);
+    group.setCoordOrigin(x, y);
+    group.setPosition(25, 25);
+    workspace.append(group);
+
+    const elipseInner = new Elipse();
+    elipseInner.setPosition(50, 50);
+    elipseInner.setSize(50, 50);
+    elipseInner.setFill('red');
+    group.append(elipseInner);
+
+    return workspace;
+  }
+
+  const sample0x0 = groupSampleBuilder(0, 0);
+  sample0x0.addItAsChildTo($('#coordOriginExample0x0'));
+
+  const sample100x200 = groupSampleBuilder(0, 50);
+  sample100x200.addItAsChildTo($('#coordOriginExample0x50'));
+
+  const sample200x100 = groupSampleBuilder(50, 0);
+  sample200x100.addItAsChildTo($('#coordOriginExample50x0'));
+};
+workspaceCoordOriginSample();
+
+const groupVisibilitySample = () => {
+  const workspace = new Workspace();
+  workspace.setSize('100px', '100px');
+  workspace.setCoordSize(100, 100);
+
+  const group = new Group();
+  group.setSize(100, 100);
+  group.setPosition(0, 0);
+  group.setCoordSize(100, 100);
+  group.addEvent('mouseover', () => {
+    alert('Mouse Over Group');
+  });
+  workspace.append(group);
+
+  const elipseOuter = new Elipse();
+  elipseOuter.setPosition(50, 50);
+  elipseOuter.setSize(50, 50);
+  group.addEvent('mouseover', () => {
+    alert('Mouse Over elipseOuter');
+  });
+  group.append(elipseOuter);
+
+  const elipseInner = new Elipse();
+  elipseInner.setPosition(50, 50);
+  elipseInner.setSize(25, 25);
+  elipseInner.setFill('red');
+  group.append(elipseInner);
+
+  let isVisible = true;
+  const executer = function () {
+    isVisible = !isVisible;
+    group.setVisibility(isVisible);
+  };
+    // executer.periodical(100);
+  workspace.addItAsChildTo($('#visibilityExample'));
+};
+groupVisibilitySample();
+
+const groupVisibilitySample2 = () => {
+  const workspace = new Workspace();
+  workspace.setSize('100px', '100px');
+  workspace.setCoordSize(100, 100);
+
+  const group = new Group();
+  group.setSize(100, 100);
+  group.setPosition(0, 0);
+  group.setCoordSize(100, 100);
+  workspace.append(group);
+
+  const elipseOuter = new Elipse();
+  elipseOuter.setPosition(50, 50);
+  elipseOuter.setSize(50, 50);
+  group.append(elipseOuter);
+
+  const elipseInner = new Elipse();
+  elipseInner.setPosition(50, 50);
+  elipseInner.setSize(25, 25);
+  elipseInner.setFill('red');
+  group.append(elipseInner);
+
+  let width = 10;
+  let height = 10;
+  const executer = function () {
+    width = (width + 10) % 100;
+    height = (height + 10) % 100;
+    group.setCoordSize(width, height);
+  };
+    // executer.periodical(100);
+  workspace.addItAsChildTo($('#scaleStrokeExample'));
+};
+groupVisibilitySample2();

packages/web2d/test/playground/index.html

@@ -4,12 +4,13 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Testing</title>
+    <title>WiseMapping Web2D Playground</title>
 </head>
 
 <body>
     <div>
-        <h1>Testing</h1>
+        <h1>WiseMapping Web2D Playground</h1>
+        <h2>This is a list of the different Web2D components supported:</h2>
         <ul>
             <li><a href="/arrow.html">Arrow</a></li>
             <li><a href="/curvedLine.html">Curved Line</a></li>

packages/web2d/test/playground/line.html

@@ -9,84 +9,9 @@
             border: 1px solid black;
         }
     </style>
-    <script type="text/javascript">
-        web2d = {
-            peer: {}
-        };
-
-        web2d.peer =
-        {
-            svg: {}
-        };
-
-        web2d.peer.utils = {};
-    </script>
-
-    <script type="text/javascript">
-        function initialize() {
-            web2d.Toolkit.init();
-            var workspaceAttributes = { width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc' };
-            var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
-
-            var rect = new web2d.Rect();
-            rect.setSize(10, 10);
-            rect.setStroke(0);
-            rect.setPosition(250, 5);
-            strokeWidthWorkspace.append(rect);
-
-            for (var i = 0; i <= 10; i++) {
-                var line = new web2d.Line();
-                line.setFrom(5 + (i * 25), 5);
-                line.setTo(5 + (i * 25), 45);
-                line.setAttribute('strokeWidth', i + 1);
-                strokeWidthWorkspace.append(line);
-            }
-            strokeWidthWorkspace.append(rect);
-
-            strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));
-
-            var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
-            for (var i = 0; i < 10; i++) {
-                var line = new web2d.Line();
-                line.setFrom(15 + (i * 25), 5);
-                line.setTo(3 + (i * 25), 45);
-                line.setAttribute('strokeWidth', 2);
-                line.setAttribute('strokeOpacity', 1 / (i + 1));
-                line.setAttribute('strokeColor', 'red');
-                strokeOpacityWorkspace.append(line);
-            }
-            strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));
-
-            var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
-            var styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
-            for (var i = 0; i < styles.length; i++) {
-                var line = new web2d.Line();
-                line.setFrom(25 + (i * 30), 5);
-                line.setTo(13 + (i * 30), 45);
-                line.setAttribute('strokeWidth', 2);
-                line.setAttribute('strokeColor', 'red');
-                line.setAttribute('strokeStyle', styles[i]);
-                strokeStyleWorkspace.append(line);
-            }
-            strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
-
-            var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
-            var styles = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron'];
-            for (var i = 0; i < styles.length; i++) {
-                var line = new web2d.Line();
-                line.setFrom(25 + (i * 30), 5);
-                line.setTo(13 + (i * 30), 45);
-                line.setAttribute('strokeWidth', 2);
-                line.setAttribute('strokeColor', 'red');
-                line.setArrowStyle(styles[i]);
-                strokeArrowWorkspace.append(line);
-            }
-            strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample'));
-        }
-    </script>
 </head>
 
-<body onload="initialize();">
+<body>
 
     <h1>Lines Render Tests </h1>
 

packages/web2d/test/playground/line.js

@@ -0,0 +1,67 @@
+import $ from '@libraries/jquery-2.1.0';
+import {
+  Toolkit, Workspace, Line, Rect,
+} from '../../src';
+
+global.$ = $;
+
+Toolkit.init();
+const workspaceAttributes = {
+  width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc',
+};
+const strokeWidthWorkspace = new Workspace(workspaceAttributes);
+
+const rect = new Rect();
+rect.setSize(10, 10);
+rect.setStroke(0);
+rect.setPosition(250, 5);
+strokeWidthWorkspace.append(rect);
+
+for (let i = 0; i <= 10; i++) {
+  const line = new Line();
+  line.setFrom(5 + (i * 25), 5);
+  line.setTo(5 + (i * 25), 45);
+  line.setAttribute('strokeWidth', i + 1);
+  strokeWidthWorkspace.append(line);
+}
+strokeWidthWorkspace.append(rect);
+
+strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));
+
+const strokeOpacityWorkspace = new Workspace(workspaceAttributes);
+for (let i = 0; i < 10; i++) {
+  const line = new Line();
+  line.setFrom(15 + (i * 25), 5);
+  line.setTo(3 + (i * 25), 45);
+  line.setAttribute('strokeWidth', 2);
+  line.setAttribute('strokeOpacity', 1 / (i + 1));
+  line.setAttribute('strokeColor', 'red');
+  strokeOpacityWorkspace.append(line);
+}
+strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));
+
+const strokeStyleWorkspace = new Workspace(workspaceAttributes);
+const styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
+for (let i = 0; i < styles.length; i++) {
+  const line = new Line();
+  line.setFrom(25 + (i * 30), 5);
+  line.setTo(13 + (i * 30), 45);
+  line.setAttribute('strokeWidth', 2);
+  line.setAttribute('strokeColor', 'red');
+  line.setAttribute('strokeStyle', styles[i]);
+  strokeStyleWorkspace.append(line);
+}
+strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
+
+const strokeArrowWorkspace = new Workspace(workspaceAttributes);
+const styles2 = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron'];
+for (let i = 0; i < styles.length; i++) {
+  const line = new Line();
+  line.setFrom(25 + (i * 30), 5);
+  line.setTo(13 + (i * 30), 45);
+  line.setAttribute('strokeWidth', 2);
+  line.setAttribute('strokeColor', 'red');
+  line.setArrowStyle(styles2[i]);
+  strokeArrowWorkspace.append(line);
+}
+strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample'));

packages/web2d/test/playground/polyLine.html

@@ -9,159 +9,9 @@
             border: 1px solid black;
         }
     </style>
-
-    <script type="text/javascript">
-        web2d = {
-            peer: {}
-        };
-
-        web2d.peer =
-        {
-            svg: {}
-        };
-
-        web2d.peer.utils = {};
-    </script>
-
-    <script type="text/javascript">
-        function initialize() {
-            web2d.Toolkit.init();
-
-            var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
-            overflowWorkspace.setSize("100px", "100px");
-
-            var line = new web2d.PolyLine();
-            line.setTo(165, 165);
-            line.setFrom(95, 95);
-            line.setStyle("Straight");
-            line.setStroke('10');
-            overflowWorkspace.append(line);
-
-
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, -1653.0000000000000000000001);
-            //    line.setFrom(95, 952);
-            //    line.setTo(165, 1651);
-            //
-            //
-            //    var line = new web2d.PolyLine();
-            //    line.setFrom(95, 90);
-            //    line.setTo(160, 20);
-            //    overflowWorkspace.append(line);
-            //
-            //    var line = new web2d.PolyLine();
-            //    line.setStyle("Straight");
-            //    line.setFrom(90, -90);
-            //    line.setTo(20, 20);
-            //    overflowWorkspace.append(line);
-            //
-            //    var line = new web2d.PolyLine();
-            //    line.setFrom(95, 95);
-            //    line.setTo(165, 165);
-            //    line.setStroke(1, 'solid', 'red');
-            //    overflowWorkspace.append(line);
-            //
-            //    // Reference ...
-            //    var refLine = new web2d.Line();
-            //    refLine.setFrom(95, 0);
-            //    refLine.setTo(95, 200);
-            //    refLine.setStroke(1, 'solid', 'red');
-            //    overflowWorkspace.append(refLine);
-            //
-            //    var refLine = new web2d.Line();
-            //    refLine.setFrom(165, 0);
-            //    refLine.setTo(165, 200);
-            //    refLine.setStroke(1, 'solid', 'red');
-            //    overflowWorkspace.append(refLine);
-            //
-
-            overflowWorkspace.addItAsChildTo($('#overflowExample'));
-
-
-            var overflowWorkspace = new web2d.Workspace();
-            overflowWorkspace.setSize("100px", "100px");
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(95, 95);
-            line1.setTo(165, 165);
-            line1.setStyle("Curved");
-            overflowWorkspace.append(line1);
-
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(95, 95);
-            line1.setTo(165, 135);
-            line1.setStyle("Curved");
-            overflowWorkspace.append(line1);
-
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(95, 90);
-            line1.setTo(160, 20);
-            line1.setStyle("Straight");
-            overflowWorkspace.append(line1);
-
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(95, 90);
-            line1.setTo(160, 50);
-            line1.setStyle("Straight");
-            overflowWorkspace.append(line1);
-
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(90, 90);
-            line1.setTo(20, 20);
-            overflowWorkspace.append(line1);
-
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(90, 90);
-            line1.setTo(20, 50);
-            overflowWorkspace.append(line1);
-
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(90, 95);
-            line1.setTo(20, 165);
-            overflowWorkspace.append(line1);
-
-            var line1 = new web2d.PolyLine();
-            line1.setFrom(90, 95);
-            line1.setTo(20, 135);
-            overflowWorkspace.append(line1);
-
-            overflowWorkspace.addItAsChildTo($('#multipleLineExample'));
-        }
-    </script>
 </head>
 
-<body onload="initialize();">
+<body>
-
     <h1>PolyLines Render Tests </h1>
 
     <table>