Enable eslit for mindplot

packages/mindplot/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+    "env": {
+        "browser": true,
+        "commonjs": true
+    },
+    "extends": [
+        "airbnb-base"
+    ],
+    "plugins": ["only-warn"],
+    "rules": {}
+}

packages/mindplot/lib/components/ActionDispatcher.js

@@ -17,96 +17,96 @@
  */
 const Events = require('./Events').default;
 
-//noinspection JSUnusedLocalSymbols
+// noinspection JSUnusedLocalSymbols
 const ActionDispatcher = new Class({
-    Implements:[Events],
+  Implements: [Events],
-    initialize: function(commandContext) {
+  initialize(commandContext) {
-        $assert(commandContext, "commandContext can not be null");
+    $assert(commandContext, 'commandContext can not be null');
-    },
+  },
 
-    addRelationship: function(model, mindmap) {
+  addRelationship(model, mindmap) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    addTopics: function(models, parentTopicId) {
+  addTopics(models, parentTopicId) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    deleteEntities: function(topicsIds, relIds) {
+  deleteEntities(topicsIds, relIds) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    dragTopic: function(topicId, position, order, parentTopic) {
+  dragTopic(topicId, position, order, parentTopic) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    moveTopic: function(topicId, position) {
+  moveTopic(topicId, position) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    moveControlPoint: function(ctrlPoint, point) {
+  moveControlPoint(ctrlPoint, point) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeFontFamilyToTopic: function(topicIds, fontFamily) {
+  changeFontFamilyToTopic(topicIds, fontFamily) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeFontStyleToTopic: function(topicsIds) {
+  changeFontStyleToTopic(topicsIds) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeFontColorToTopic: function(topicsIds, color) {
+  changeFontColorToTopic(topicsIds, color) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeFontSizeToTopic : function(topicsIds, size) {
+  changeFontSizeToTopic(topicsIds, size) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeBackgroundColorToTopic: function(topicsIds, color) {
+  changeBackgroundColorToTopic(topicsIds, color) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeBorderColorToTopic: function(topicsIds, color) {
+  changeBorderColorToTopic(topicsIds, color) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeShapeTypeToTopic : function(topicsIds, shapeType) {
+  changeShapeTypeToTopic(topicsIds, shapeType) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeFontWeightToTopic : function(topicsIds) {
+  changeFontWeightToTopic(topicsIds) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeTextToTopic : function(topicsIds, text) {
+  changeTextToTopic(topicsIds, text) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    shrinkBranch : function(topicsIds, collapse) {
+  shrinkBranch(topicsIds, collapse) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    addFeatureToTopic : function(topicId, type, attributes) {
+  addFeatureToTopic(topicId, type, attributes) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    changeFeatureToTopic : function(topicId, featureId, attributes) {
+  changeFeatureToTopic(topicId, featureId, attributes) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    },
+  },
 
-    removeFeatureFromTopic : function(topicId, featureId) {
+  removeFeatureFromTopic(topicId, featureId) {
-        throw "method must be implemented.";
+    throw 'method must be implemented.';
-    }
+  },
 });
 
-ActionDispatcher.setInstance = function(dispatcher) {
+ActionDispatcher.setInstance = function (dispatcher) {
-    ActionDispatcher._instance = dispatcher;
+  ActionDispatcher._instance = dispatcher;
 };
 
-ActionDispatcher.getInstance = function() {
+ActionDispatcher.getInstance = function () {
-    return ActionDispatcher._instance;
+  return ActionDispatcher._instance;
 };
 
 export default ActionDispatcher;

packages/mindplot/lib/components/ActionIcon.js

@@ -18,47 +18,47 @@
 const Icon = require('./Icon').default;
 
 const ActionIcon = new Class({
-    Extends:Icon,
+  Extends: Icon,
-    initialize: function(topic, url) {
+  initialize(topic, url) {
-        this.parent(url);
+    this.parent(url);
-        this._node = topic;
+    this._node = topic;
-    },
+  },
-    getNode:function() {
+  getNode() {
-        return this._node;
+    return this._node;
-    },
+  },
 
-    setPosition:function(x, y) {
+  setPosition(x, y) {
-        var size = this.getSize();
+    const size = this.getSize();
-        this.getImage().setPosition(x - size.width / 2, y - size.height / 2);
+    this.getImage().setPosition(x - size.width / 2, y - size.height / 2);
-    },
+  },
 
-    addEvent:function(event, fn) {
+  addEvent(event, fn) {
-        this.getImage().addEvent(event, fn);
+    this.getImage().addEvent(event, fn);
-    },
+  },
 
-    addToGroup:function(group) {
+  addToGroup(group) {
-        group.append(this.getImage());
+    group.append(this.getImage());
-    },
+  },
 
-    setVisibility:function(visible) {
+  setVisibility(visible) {
-        this.getImage().setVisibility(visible);
+    this.getImage().setVisibility(visible);
-    },
+  },
 
-    isVisible:function() {
+  isVisible() {
-        return this.getImage().isVisible();
+    return this.getImage().isVisible();
-    },
+  },
 
-    setCursor:function(cursor) {
+  setCursor(cursor) {
-        return this.getImage().setCursor(cursor);
+    return this.getImage().setCursor(cursor);
-    },
+  },
 
-    moveToBack:function(cursor) {
+  moveToBack(cursor) {
-        return this.getImage().moveToBack(cursor);
+    return this.getImage().moveToBack(cursor);
-    },
+  },
 
-    moveToFront:function(cursor) {
+  moveToFront(cursor) {
-        return this.getImage().moveToFront(cursor);
+    return this.getImage().moveToFront(cursor);
-    }
+  },
 });
 
 export default ActionIcon;

packages/mindplot/lib/components/CentralTopic.js

@@ -16,66 +16,67 @@
  *   limitations under the License.
  */
 const Core = require('@wismapping/core-js');
+
 const core = Core();
 const Topic = require('./Topic').default;
 const Shape = require('./util/Shape').default;
 
 const CentralTopic = new Class(
-    /** @lends CentralTopic*/ {
+  /** @lends CentralTopic */ {
-        Extends: Topic,
+    Extends: Topic,
-        /**
+    /**
          * @extends mindplot.Topic
          * @constructs
          * @param model
          * @param options
          */
-        initialize: function (model, options) {
+    initialize(model, options) {
-            this.parent(model, options);
+      this.parent(model, options);
-        },
+    },
 
-        _registerEvents: function () {
+    _registerEvents() {
-            this.parent();
+      this.parent();
 
-            // This disable the drag of the central topic. But solves the problem of deselecting the nodes when the screen is clicked.
+      // This disable the drag of the central topic. But solves the problem of deselecting the nodes when the screen is clicked.
-            this.addEvent('mousedown', function (event) {
+      this.addEvent('mousedown', (event) => {
-                event.stopPropagation();
+        event.stopPropagation();
-            });
+      });
-        },
+    },
 
-        /** */
+    /** */
-        workoutIncomingConnectionPoint: function () {
+    workoutIncomingConnectionPoint() {
-            return this.getPosition();
+      return this.getPosition();
-        },
+    },
 
-        /** */
+    /** */
-        setCursor: function (type) {
+    setCursor(type) {
-            type = type == 'move' ? 'default' : type;
+      type = type == 'move' ? 'default' : type;
-            this.parent(type);
+      this.parent(type);
-        },
+    },
 
-        /** */
+    /** */
-        updateTopicShape: function () {},
+    updateTopicShape() {},
 
-        _updatePositionOnChangeSize: function () {
+    _updatePositionOnChangeSize() {
-            // Center main topic ...
+      // Center main topic ...
-            var zeroPoint = new core.Point(0, 0);
+      const zeroPoint = new core.Point(0, 0);
-            this.setPosition(zeroPoint);
+      this.setPosition(zeroPoint);
-        },
+    },
 
-        /** */
+    /** */
-        getShrinkConnector: function () {
+    getShrinkConnector() {
-            return null;
+      return null;
-        },
+    },
 
-        /** */
+    /** */
-        workoutOutgoingConnectionPoint: function (targetPosition) {
+    workoutOutgoingConnectionPoint(targetPosition) {
-            $assert(targetPosition, 'targetPoint can not be null');
+      $assert(targetPosition, 'targetPoint can not be null');
-            var pos = this.getPosition();
+      const pos = this.getPosition();
-            var isAtRight = Shape.isAtRight(targetPosition, pos);
+      const isAtRight = Shape.isAtRight(targetPosition, pos);
-            var size = this.getSize();
+      const size = this.getSize();
-            return Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
+      return Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
-        },
+    },
-    }
+  },
 );
 
 export default CentralTopic;

packages/mindplot/lib/components/Command.js

@@ -17,51 +17,45 @@
 */
 
 const Command = new Class(/** @lends mindplot.Command */{
-    /**
+  /**
      * @classdesc The command base class for handling do/undo mindmap operations
      * @constructs
      */
-    initialize: function()
+  initialize() {
-    {
+    this._id = Command._nextUUID();
-        this._id = Command._nextUUID();
+  },
-    },
 
-    /** 
+  /**
      * @abstract
      */
-    execute: function(commandContext)
+  execute(commandContext) {
-    {
+    throw 'execute must be implemented.';
-        throw "execute must be implemented.";
+  },
-    },
 
-    /** 
+  /**
-     * Triggered by the undo button - reverses the executed command 
+     * Triggered by the undo button - reverses the executed command
      * @abstract
      */
-    undoExecute: function(commandContext)
+  undoExecute(commandContext) {
-    {
+    throw 'undo must be implemented.';
-        throw "undo must be implemented.";
+  },
-    },
 
-    /** 
+  /**
      * Returns the unique id of this command
      * @returns {Number} command id
      */
-    getId:function()
+  getId() {
-    {
+    return this._id;
-        return this._id;
+  },
-    }
 });
 
-Command._nextUUID = function()
+Command._nextUUID = function () {
-{
+  if (!$defined(Command._uuid)) {
-    if (!$defined(Command._uuid))
+    Command._uuid = 1;
-    {
+  }
-        Command._uuid = 1;
-    }
 
-    Command._uuid = Command._uuid + 1;
+  Command._uuid += 1;
-    return Command._uuid;
+  return Command._uuid;
 };
 
 export default Command;

packages/mindplot/lib/components/ConnectionLine.js

@@ -16,8 +16,10 @@
  *   limitations under the License.
  */
 const Core = require('@wismapping/core-js');
+
 const core = Core();
 const web2D = require('@wismapping/web2d');
+
 const web2d = web2D();
 
 const INodeModel = require('./model/INodeModel').default;
@@ -25,182 +27,184 @@ const { TopicShape } = require('./model/INodeModel');
 const Topic = require('./Topic').default;
 
 const ConnectionLine = new Class({
-    initialize: function (sourceNode, targetNode, lineType) {
+  initialize(sourceNode, targetNode, lineType) {
-        $assert(targetNode, 'parentNode node can not be null');
+    $assert(targetNode, 'parentNode node can not be null');
-        $assert(sourceNode, 'childNode node can not be null');
+    $assert(sourceNode, 'childNode node can not be null');
-        $assert(sourceNode != targetNode, 'Circular connection');
+    $assert(sourceNode != targetNode, 'Circular connection');
 
-        this._targetTopic = targetNode;
+    this._targetTopic = targetNode;
-        this._sourceTopic = sourceNode;
+    this._sourceTopic = sourceNode;
 
-        var line;
+    let line;
-        var ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
+    const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
-        if (targetNode.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
+    if (targetNode.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
-            line = this._createLine(lineType, ConnectionLine.CURVED);
+      line = this._createLine(lineType, ConnectionLine.CURVED);
-            line.setSrcControlPoint(ctrlPoints[0]);
+      line.setSrcControlPoint(ctrlPoints[0]);
-            line.setDestControlPoint(ctrlPoints[1]);
+      line.setDestControlPoint(ctrlPoints[1]);
-        } else {
+    } else {
-            line = this._createLine(lineType, ConnectionLine.SIMPLE_CURVED);
+      line = this._createLine(lineType, ConnectionLine.SIMPLE_CURVED);
-            line.setSrcControlPoint(ctrlPoints[0]);
+      line.setSrcControlPoint(ctrlPoints[0]);
-            line.setDestControlPoint(ctrlPoints[1]);
+      line.setDestControlPoint(ctrlPoints[1]);
-        }
+    }
-        // Set line styles ...
+    // Set line styles ...
-        var strokeColor = ConnectionLine.getStrokeColor();
+    const strokeColor = ConnectionLine.getStrokeColor();
-        line.setStroke(1, 'solid', strokeColor, 1);
+    line.setStroke(1, 'solid', strokeColor, 1);
-        line.setFill(strokeColor, 1);
+    line.setFill(strokeColor, 1);
 
-        this._line2d = line;
+    this._line2d = line;
-    },
+  },
 
-    _getCtrlPoints: function (sourceNode, targetNode) {
+  _getCtrlPoints(sourceNode, targetNode) {
-        var srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
+    const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
-        var destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
+    const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
-        var deltaX = (srcPos.x - destPos.x) / 3;
+    const deltaX = (srcPos.x - destPos.x) / 3;
-        return [new core.Point(deltaX, 0), new core.Point(-deltaX, 0)];
+    return [new core.Point(deltaX, 0), new core.Point(-deltaX, 0)];
-    },
+  },
 
-    _createLine: function (lineType, defaultStyle) {
+  _createLine(lineType, defaultStyle) {
-        if (!$defined(lineType)) {
+    if (!$defined(lineType)) {
-            lineType = defaultStyle;
+      lineType = defaultStyle;
-        }
+    }
-        lineType = parseInt(lineType);
+    lineType = parseInt(lineType);
-        this._lineType = lineType;
+    this._lineType = lineType;
-        var line = null;
+    let line = null;
-        switch (lineType) {
+    switch (lineType) {
-            case ConnectionLine.POLYLINE:
+      case ConnectionLine.POLYLINE:
-                line = new web2d.PolyLine();
+        line = new web2d.PolyLine();
-                break;
+        break;
-            case ConnectionLine.CURVED:
+      case ConnectionLine.CURVED:
-                line = new web2d.CurvedLine();
+        line = new web2d.CurvedLine();
-                break;
+        break;
-            case ConnectionLine.SIMPLE_CURVED:
+      case ConnectionLine.SIMPLE_CURVED:
-                line = new web2d.CurvedLine();
+        line = new web2d.CurvedLine();
-                line.setStyle(web2d.CurvedLine.SIMPLE_LINE);
+        line.setStyle(web2d.CurvedLine.SIMPLE_LINE);
-                break;
+        break;
-            default:
+      default:
-                line = new web2d.Line();
+        line = new web2d.Line();
-                break;
+        break;
-        }
+    }
-        return line;
+    return line;
-    },
+  },
 
-    setVisibility: function (value) {
+  setVisibility(value) {
-        this._line2d.setVisibility(value);
+    this._line2d.setVisibility(value);
-    },
+  },
 
-    isVisible: function () {
+  isVisible() {
-        return this._line2d.isVisible();
+    return this._line2d.isVisible();
-    },
+  },
 
-    setOpacity: function (opacity) {
+  setOpacity(opacity) {
-        this._line2d.setOpacity(opacity);
+    this._line2d.setOpacity(opacity);
-    },
+  },
 
-    redraw: function () {
+  redraw() {
-        var line2d = this._line2d;
+    const line2d = this._line2d;
-        var sourceTopic = this._sourceTopic;
+    const sourceTopic = this._sourceTopic;
-        var sourcePosition = sourceTopic.getPosition();
+    const sourcePosition = sourceTopic.getPosition();
 
-        var targetTopic = this._targetTopic;
+    const targetTopic = this._targetTopic;
-        var targetPosition = targetTopic.getPosition();
+    const targetPosition = targetTopic.getPosition();
 
-        var sPos, tPos;
+    let sPos; let
-        sPos = sourceTopic.workoutOutgoingConnectionPoint(targetPosition);
+      tPos;
-        tPos = targetTopic.workoutIncomingConnectionPoint(sourcePosition);
+    sPos = sourceTopic.workoutOutgoingConnectionPoint(targetPosition);
+    tPos = targetTopic.workoutIncomingConnectionPoint(sourcePosition);
 
-        line2d.setFrom(tPos.x, tPos.y);
+    line2d.setFrom(tPos.x, tPos.y);
-        line2d.setTo(sPos.x, sPos.y);
+    line2d.setTo(sPos.x, sPos.y);
 
-        if (line2d.getType() == 'CurvedLine') {
+    if (line2d.getType() == 'CurvedLine') {
-            var ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic);
+      const ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic);
-            line2d.setSrcControlPoint(ctrlPoints[0]);
+      line2d.setSrcControlPoint(ctrlPoints[0]);
-            line2d.setDestControlPoint(ctrlPoints[1]);
+      line2d.setDestControlPoint(ctrlPoints[1]);
-        }
+    }
 
-        // Add connector ...
+    // Add connector ...
-        this._positionateConnector(targetTopic);
+    this._positionateConnector(targetTopic);
-    },
+  },
 
-    _positionateConnector: function (targetTopic) {
+  _positionateConnector(targetTopic) {
-        var targetPosition = targetTopic.getPosition();
+    const targetPosition = targetTopic.getPosition();
-        var offset = Topic.CONNECTOR_WIDTH / 2;
+    const offset = Topic.CONNECTOR_WIDTH / 2;
-        var targetTopicSize = targetTopic.getSize();
+    const targetTopicSize = targetTopic.getSize();
-        var y, x;
+    let y; let
-        if (targetTopic.getShapeType() == TopicShape.LINE) {
+      x;
-            y = targetTopicSize.height;
+    if (targetTopic.getShapeType() == TopicShape.LINE) {
-        } else {
+      y = targetTopicSize.height;
-            y = targetTopicSize.height / 2;
+    } else {
-        }
+      y = targetTopicSize.height / 2;
-        y = y - offset;
+    }
+    y -= offset;
 
-        var connector = targetTopic.getShrinkConnector();
+    const connector = targetTopic.getShrinkConnector();
-        if ($defined(connector)) {
+    if ($defined(connector)) {
-            if (Math.sign(targetPosition.x) > 0) {
+      if (Math.sign(targetPosition.x) > 0) {
-                x = targetTopicSize.width;
+        x = targetTopicSize.width;
-                connector.setPosition(x, y);
+        connector.setPosition(x, y);
-            } else {
+      } else {
-                x = -Topic.CONNECTOR_WIDTH;
+        x = -Topic.CONNECTOR_WIDTH;
-            }
+      }
-            connector.setPosition(x, y);
+      connector.setPosition(x, y);
-        }
+    }
-    },
+  },
 
-    setStroke: function (color, style, opacity) {
+  setStroke(color, style, opacity) {
-        this._line2d.setStroke(null, null, color, opacity);
+    this._line2d.setStroke(null, null, color, opacity);
-    },
+  },
 
-    addToWorkspace: function (workspace) {
+  addToWorkspace(workspace) {
-        workspace.append(this._line2d);
+    workspace.append(this._line2d);
-        this._line2d.moveToBack();
+    this._line2d.moveToBack();
-    },
+  },
 
-    removeFromWorkspace: function (workspace) {
+  removeFromWorkspace(workspace) {
-        workspace.removeChild(this._line2d);
+    workspace.removeChild(this._line2d);
-    },
+  },
 
-    getTargetTopic: function () {
+  getTargetTopic() {
-        return this._targetTopic;
+    return this._targetTopic;
-    },
+  },
 
-    getSourceTopic: function () {
+  getSourceTopic() {
-        return this._sourceTopic;
+    return this._sourceTopic;
-    },
+  },
 
-    getLineType: function () {
+  getLineType() {
-        return this._lineType;
+    return this._lineType;
-    },
+  },
 
-    getLine: function () {
+  getLine() {
-        return this._line2d;
+    return this._line2d;
-    },
+  },
 
-    getModel: function () {
+  getModel() {
-        return this._model;
+    return this._model;
-    },
+  },
 
-    setModel: function (model) {
+  setModel(model) {
-        this._model = model;
+    this._model = model;
-    },
+  },
 
-    getType: function () {
+  getType() {
-        return 'ConnectionLine';
+    return 'ConnectionLine';
-    },
+  },
 
-    getId: function () {
+  getId() {
-        return this._model.getId();
+    return this._model.getId();
-    },
+  },
 
-    moveToBack: function () {
+  moveToBack() {
-        this._line2d.moveToBack();
+    this._line2d.moveToBack();
-    },
+  },
 
-    moveToFront: function () {
+  moveToFront() {
-        this._line2d.moveToFront();
+    this._line2d.moveToFront();
-    },
+  },
 });
 
 ConnectionLine.getStrokeColor = function () {
-    return '#495879';
+  return '#495879';
 };
 
 ConnectionLine.SIMPLE = 0;

packages/mindplot/lib/components/ControlPoint.js

@@ -15,194 +15,193 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js')
+const Core = require('@wismapping/core-js');
+
 const core = Core();
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
+
 const web2d = web2D();
 
-const Shape = require('./util/Shape').default
+const Shape = require('./util/Shape').default;
 const ActionDispatcher = require('./ActionDispatcher').default;
 
 const ControlPoint = new Class({
-    initialize: function () {
+  initialize() {
-        var control1 = new web2d.Elipse({
+    const control1 = new web2d.Elipse({
-            width: 6,
+      width: 6,
-            height: 6,
+      height: 6,
-            stroke: '1 solid #6589de',
+      stroke: '1 solid #6589de',
-            fillColor: 'gray',
+      fillColor: 'gray',
-            visibility: false
+      visibility: false,
-        });
+    });
-        control1.setCursor('pointer');
+    control1.setCursor('pointer');
 
-        var control2 = new web2d.Elipse({
+    const control2 = new web2d.Elipse({
-            width: 6,
+      width: 6,
-            height: 6,
+      height: 6,
-            stroke: '1 solid #6589de',
+      stroke: '1 solid #6589de',
-            fillColor: 'gray',
+      fillColor: 'gray',
-            visibility: false
+      visibility: false,
-        });
+    });
-        control2.setCursor('pointer');
+    control2.setCursor('pointer');
 
-        this._controlPointsController = [control1, control2];
+    this._controlPointsController = [control1, control2];
-        this._controlLines = [new web2d.Line({strokeColor: "#6589de", strokeWidth: 1, opacity: 0.3}),
+    this._controlLines = [new web2d.Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
-            new web2d.Line({strokeColor: "#6589de", strokeWidth: 1, opacity: 0.3})];
+      new web2d.Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 })];
 
-        this._isBinded = false;
+    this._isBinded = false;
-        var me = this;
+    const me = this;
-        this._controlPointsController[0].addEvent('mousedown', function (event) {
+    this._controlPointsController[0].addEvent('mousedown', (event) => {
-            (me._mouseDown)(event, ControlPoint.FROM, me);
+      (me._mouseDown)(event, ControlPoint.FROM, me);
-        });
+    });
-        this._controlPointsController[0].addEvent('click', function (event) {
+    this._controlPointsController[0].addEvent('click', (event) => {
-            (me._mouseClick)(event);
+      (me._mouseClick)(event);
-        });
+    });
-        this._controlPointsController[0].addEvent('dblclick', function (event) {
+    this._controlPointsController[0].addEvent('dblclick', (event) => {
-            (me._mouseClick)(event);
+      (me._mouseClick)(event);
-        });
+    });
 
-        this._controlPointsController[1].addEvent('mousedown', function (event) {
+    this._controlPointsController[1].addEvent('mousedown', (event) => {
-            (me._mouseDown)(event, ControlPoint.TO, me);
+      (me._mouseDown)(event, ControlPoint.TO, me);
-        });
+    });
-        this._controlPointsController[1].addEvent('click', function (event) {
+    this._controlPointsController[1].addEvent('click', (event) => {
-            (me._mouseClick)(event);
+      (me._mouseClick)(event);
-        });
+    });
-        this._controlPointsController[1].addEvent('dblclick', function (event) {
+    this._controlPointsController[1].addEvent('dblclick', (event) => {
-            (me._mouseClick)(event);
+      (me._mouseClick)(event);
-        });
+    });
-    },
+  },
 
-    setLine: function (line) {
+  setLine(line) {
-        if ($defined(this._line)) {
+    if ($defined(this._line)) {
-            this._removeLine();
+      this._removeLine();
-        }
-        this._line = line;
-        this._createControlPoint();
-        this._endPoint = [];
-        this._orignalCtrlPoint = [];
-        this._orignalCtrlPoint[0] = this._controls[0].clone();
-        this._orignalCtrlPoint[1] = this._controls[1].clone();
-        this._endPoint[0] = this._line.getLine().getFrom().clone();
-        this._endPoint[1] = this._line.getLine().getTo().clone();
-    },
-
-    redraw: function () {
-        if ($defined(this._line))
-            this._createControlPoint();
-    },
-
-    _createControlPoint: function () {
-        this._controls = this._line.getLine().getControlPoints();
-        var pos = this._line.getLine().getFrom();
-        this._controlPointsController[0].setPosition(this._controls[ControlPoint.FROM].x + pos.x, this._controls[ControlPoint.FROM].y + pos.y - 3);
-        this._controlLines[0].setFrom(pos.x, pos.y);
-        this._controlLines[0].setTo(this._controls[ControlPoint.FROM].x + pos.x + 3, this._controls[ControlPoint.FROM].y + pos.y);
-        pos = this._line.getLine().getTo();
-        this._controlLines[1].setFrom(pos.x, pos.y);
-        this._controlLines[1].setTo(this._controls[ControlPoint.TO].x + pos.x + 3, this._controls[ControlPoint.TO].y + pos.y);
-        this._controlPointsController[1].setPosition(this._controls[ControlPoint.TO].x + pos.x, this._controls[ControlPoint.TO].y + pos.y - 3);
-
-    },
-
-    _removeLine: function () {
-
-    },
-
-    _mouseDown: function (event, point, me) {
-        if (!this._isBinded) {
-            this._isBinded = true;
-            this._mouseMoveFunction = function (event) {
-                (me._mouseMoveEvent)(event, point, me);
-            };
-
-            this._workspace.getScreenManager().addEvent('mousemove', this._mouseMoveFunction);
-            this._mouseUpFunction = function (event) {
-                (me._mouseUp)(event, point, me);
-            };
-            this._workspace.getScreenManager().addEvent('mouseup', this._mouseUpFunction);
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-    },
-
-    _mouseMoveEvent: function (event, point) {
-        var screen = this._workspace.getScreenManager();
-        var pos = screen.getWorkspaceMousePosition(event);
-
-        var cords;
-        if (point == 0) {
-            cords = Shape.calculateRelationShipPointCoordinates(this._line.getSourceTopic(), pos);
-            this._line.setFrom(cords.x, cords.y);
-            this._line.setSrcControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
-        } else {
-            cords = Shape.calculateRelationShipPointCoordinates(this._line.getTargetTopic(), pos);
-            this._line.setTo(cords.x, cords.y);
-            this._line.setDestControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
-        }
-
-        this._controls[point].x = (pos.x - cords.x);
-        this._controls[point].y = (pos.y - cords.y);
-        this._controlPointsController[point].setPosition(pos.x - 5, pos.y - 3);
-        this._controlLines[point].setFrom(cords.x, cords.y);
-        this._controlLines[point].setTo(pos.x - 2, pos.y);
-        this._line.getLine().updateLine(point);
-
-    },
-
-    _mouseUp: function (event, point) {
-        this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction);
-        this._workspace.getScreenManager().removeEvent('mouseup', this._mouseUpFunction);
-
-        var actionDispatcher = ActionDispatcher.getInstance();
-        actionDispatcher.moveControlPoint(this, point);
-        this._isBinded = false;
-    },
-
-    _mouseClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-    },
-
-    setVisibility: function (visible) {
-        if (visible) {
-            this._controlLines[0].moveToFront();
-            this._controlLines[1].moveToFront();
-            this._controlPointsController[0].moveToFront();
-            this._controlPointsController[1].moveToFront();
-        }
-        this._controlPointsController[0].setVisibility(visible);
-        this._controlPointsController[1].setVisibility(visible);
-        this._controlLines[0].setVisibility(visible);
-        this._controlLines[1].setVisibility(visible);
-    },
-
-    addToWorkspace: function (workspace) {
-        this._workspace = workspace;
-        workspace.append(this._controlPointsController[0]);
-        workspace.append(this._controlPointsController[1]);
-        workspace.append(this._controlLines[0]);
-        workspace.append(this._controlLines[1]);
-    },
-
-    removeFromWorkspace: function (workspace) {
-        this._workspace = null;
-        workspace.removeChild(this._controlPointsController[0]);
-        workspace.removeChild(this._controlPointsController[1]);
-        workspace.removeChild(this._controlLines[0]);
-        workspace.removeChild(this._controlLines[1]);
-    },
-
-    getControlPoint: function (index) {
-        return this._controls[index];
-    },
-
-    getOriginalEndPoint: function (index) {
-        return this._endPoint[index];
-    },
-
-    getOriginalCtrlPoint: function (index) {
-        return this._orignalCtrlPoint[index];
     }
+    this._line = line;
+    this._createControlPoint();
+    this._endPoint = [];
+    this._orignalCtrlPoint = [];
+    this._orignalCtrlPoint[0] = this._controls[0].clone();
+    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();
+    let pos = this._line.getLine().getFrom();
+    this._controlPointsController[0].setPosition(this._controls[ControlPoint.FROM].x + pos.x, this._controls[ControlPoint.FROM].y + pos.y - 3);
+    this._controlLines[0].setFrom(pos.x, pos.y);
+    this._controlLines[0].setTo(this._controls[ControlPoint.FROM].x + pos.x + 3, this._controls[ControlPoint.FROM].y + pos.y);
+    pos = this._line.getLine().getTo();
+    this._controlLines[1].setFrom(pos.x, pos.y);
+    this._controlLines[1].setTo(this._controls[ControlPoint.TO].x + pos.x + 3, this._controls[ControlPoint.TO].y + pos.y);
+    this._controlPointsController[1].setPosition(this._controls[ControlPoint.TO].x + pos.x, this._controls[ControlPoint.TO].y + pos.y - 3);
+  },
+
+  _removeLine() {
+
+  },
+
+  _mouseDown(event, point, me) {
+    if (!this._isBinded) {
+      this._isBinded = true;
+      this._mouseMoveFunction = function (event) {
+        (me._mouseMoveEvent)(event, point, me);
+      };
+
+      this._workspace.getScreenManager().addEvent('mousemove', this._mouseMoveFunction);
+      this._mouseUpFunction = function (event) {
+        (me._mouseUp)(event, point, me);
+      };
+      this._workspace.getScreenManager().addEvent('mouseup', this._mouseUpFunction);
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+  },
+
+  _mouseMoveEvent(event, point) {
+    const screen = this._workspace.getScreenManager();
+    const pos = screen.getWorkspaceMousePosition(event);
+
+    let cords;
+    if (point == 0) {
+      cords = Shape.calculateRelationShipPointCoordinates(this._line.getSourceTopic(), pos);
+      this._line.setFrom(cords.x, cords.y);
+      this._line.setSrcControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
+    } else {
+      cords = Shape.calculateRelationShipPointCoordinates(this._line.getTargetTopic(), pos);
+      this._line.setTo(cords.x, cords.y);
+      this._line.setDestControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
+    }
+
+    this._controls[point].x = (pos.x - cords.x);
+    this._controls[point].y = (pos.y - cords.y);
+    this._controlPointsController[point].setPosition(pos.x - 5, pos.y - 3);
+    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);
+    this._workspace.getScreenManager().removeEvent('mouseup', this._mouseUpFunction);
+
+    const actionDispatcher = ActionDispatcher.getInstance();
+    actionDispatcher.moveControlPoint(this, point);
+    this._isBinded = false;
+  },
+
+  _mouseClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+  },
+
+  setVisibility(visible) {
+    if (visible) {
+      this._controlLines[0].moveToFront();
+      this._controlLines[1].moveToFront();
+      this._controlPointsController[0].moveToFront();
+      this._controlPointsController[1].moveToFront();
+    }
+    this._controlPointsController[0].setVisibility(visible);
+    this._controlPointsController[1].setVisibility(visible);
+    this._controlLines[0].setVisibility(visible);
+    this._controlLines[1].setVisibility(visible);
+  },
+
+  addToWorkspace(workspace) {
+    this._workspace = workspace;
+    workspace.append(this._controlPointsController[0]);
+    workspace.append(this._controlPointsController[1]);
+    workspace.append(this._controlLines[0]);
+    workspace.append(this._controlLines[1]);
+  },
+
+  removeFromWorkspace(workspace) {
+    this._workspace = null;
+    workspace.removeChild(this._controlPointsController[0]);
+    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;

packages/mindplot/lib/components/DesignerActionRunner.js

@@ -19,40 +19,38 @@ const DesignerUndoManager = require('./DesignerUndoManager').default;
 const EventBus = require('./layout/EventBus').default;
 
 const DesignerActionRunner = new Class({
-    initialize: function (commandContext, notifier) {
+  initialize(commandContext, notifier) {
-        $assert(commandContext, "commandContext can not be null");
+    $assert(commandContext, 'commandContext can not be null');
 
-        this._undoManager = new DesignerUndoManager();
+    this._undoManager = new DesignerUndoManager();
-        this._context = commandContext;
+    this._context = commandContext;
-        this._notifier = notifier;
+    this._notifier = notifier;
-    },
+  },
 
-    execute: function (command) {
+  execute(command) {
-        $assert(command, "command can not be null");
+    $assert(command, 'command can not be null');
-        command.execute(this._context);
+    command.execute(this._context);
-        this._undoManager.enqueue(command);
+    this._undoManager.enqueue(command);
-        this.fireChangeEvent();
+    this.fireChangeEvent();
-        EventBus.instance.fireEvent(EventBus.events.DoLayout);
+    EventBus.instance.fireEvent(EventBus.events.DoLayout);
+  },
 
-    },
+  undo() {
+    this._undoManager.execUndo(this._context);
+    this.fireChangeEvent();
+    EventBus.instance.fireEvent(EventBus.events.DoLayout);
+  },
 
-    undo: function () {
+  redo() {
-        this._undoManager.execUndo(this._context);
+    this._undoManager.execRedo(this._context);
-        this.fireChangeEvent();
+    this.fireChangeEvent();
-        EventBus.instance.fireEvent(EventBus.events.DoLayout);
+    EventBus.instance.fireEvent(EventBus.events.DoLayout);
-    },
+  },
 
-    redo: function () {
+  fireChangeEvent() {
-        this._undoManager.execRedo(this._context);
+    const event = this._undoManager.buildEvent();
-        this.fireChangeEvent();
+    this._notifier.fireEvent('modelUpdate', event);
-        EventBus.instance.fireEvent(EventBus.events.DoLayout);
+  },
-
-    },
-
-    fireChangeEvent: function () {
-        var event = this._undoManager.buildEvent();
-        this._notifier.fireEvent("modelUpdate", event);
-    }
 });
 
 export default DesignerActionRunner;

packages/mindplot/lib/components/DesignerKeyboard.js

@@ -18,383 +18,416 @@
 const Keyboard = require('./Keyboard').default;
 
 const DesignerKeyboard = new Class({
-    Extends: Keyboard,
+  Extends: Keyboard,
-    Static:{
+  Static: {
-        register:function (designer) {
+    register(designer) {
-            this._instance = new DesignerKeyboard(designer);
+      this._instance = new DesignerKeyboard(designer);
-        },
+    },
 
-        getInstance:function () {
+    getInstance() {
-            return this._instance;
+      return this._instance;
+    },
+  },
+
+  initialize(designer) {
+    $assert(designer, 'designer can not be null');
+    this._registerEvents(designer);
+  },
+
+  _registerEvents(designer) {
+    // Try with the keyboard ..
+    const model = designer.getModel();
+    this.addShortcut(
+      ['backspace'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        designer.deleteSelectedEntities();
+      },
+    );
+    this.addShortcut(
+      ['space'], () => {
+        designer.shrinkSelectedBranch();
+      },
+    );
+    this.addShortcut(
+      ['f2'], (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const node = model.selectedTopic();
+        if (node) {
+          node.showTextEditor();
         }
-    },
+      },
+    );
+    this.addShortcut(
+      ['del'], (event) => {
+        designer.deleteSelectedEntities();
+        event.preventDefault();
+        event.stopPropagation();
+      },
+    );
+    this.addShortcut(
+      ['enter'], () => {
+        designer.createSiblingForSelectedNode();
+      },
+    );
+    this.addShortcut(
+      ['insert'], (event) => {
+        designer.createChildForSelectedNode();
+        event.preventDefault();
+        event.stopPropagation();
+      },
+    );
+    this.addShortcut(
+      ['tab'], (event) => {
+        designer.createChildForSelectedNode();
+        event.preventDefault();
+        event.stopPropagation();
+      },
+    );
+    this.addShortcut(
+      ['meta+enter'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        designer.createChildForSelectedNode();
+      },
+    );
+    this.addShortcut(
+      ['ctrl+z', 'meta+z'], (event) => {
+        event.preventDefault(event);
+        event.stopPropagation();
+        designer.undo();
+      },
+    );
+    this.addShortcut(
+      ['ctrl+c', 'meta+c'], (event) => {
+        event.preventDefault(event);
+        event.stopPropagation();
+        designer.copyToClipboard();
+      },
+    );
+    this.addShortcut(
+      ['ctrl+v', 'meta+v'], (event) => {
+        event.preventDefault(event);
+        event.stopPropagation();
+        designer.pasteClipboard();
+      },
+    );
+    this.addShortcut(
+      ['ctrl+shift+z', 'meta+shift+z', 'ctrl+y', 'meta+y'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        designer.redo();
+      },
+    );
+    this.addShortcut(
+      ['ctrl+a', 'meta+a'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        designer.selectAll();
+      },
+    );
+    this.addShortcut(
+      ['ctrl+b', 'meta+b'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
 
-    initialize:function (designer) {
+        designer.changeFontWeight();
-        $assert(designer, "designer can not be null");
+      },
-        this._registerEvents(designer);
+    );
-    },
+    this.addShortcut(
+      ['ctrl+s', 'meta+s'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        $(document).find('#save').trigger('click');
+      },
+    );
+    this.addShortcut(
+      ['ctrl+i', 'meta+i'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
 
-    _registerEvents:function (designer) {
+        designer.changeFontStyle();
+      },
+    );
+    this.addShortcut(
+      ['ctrl+shift+a', 'meta+shift+a'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
 
-        // Try with the keyboard ..
-        var model = designer.getModel();
-        this.addShortcut(
-            ['backspace'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-                designer.deleteSelectedEntities();
-            }
-        );
-        this.addShortcut(
-            ['space'], function() {
-                designer.shrinkSelectedBranch();
-            }
-        );
-        this.addShortcut(
-            ['f2'],function(event) {
-                event.stopPropagation();
-                event.preventDefault();
-                var node = model.selectedTopic();
-                if (node) {
-                    node.showTextEditor();
-                }
-            }
-        );
-        this.addShortcut(
-            ['del'], function(event) {
-                designer.deleteSelectedEntities();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        );
-        this.addShortcut(
-            ['enter'], function() {
-                designer.createSiblingForSelectedNode();
-            }
-        );
-        this.addShortcut(
-            ['insert'], function(event) {
-                designer.createChildForSelectedNode();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        );
-        this.addShortcut(
-            ['tab'], function(event) {
-                designer.createChildForSelectedNode();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        );
-        this.addShortcut(
-            ['meta+enter'], function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-                designer.createChildForSelectedNode();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+z', 'meta+z'], function(event) {
-                event.preventDefault(event);
-                event.stopPropagation();
-                designer.undo();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+c', 'meta+c'], function (event) {
-                event.preventDefault(event);
-                event.stopPropagation();
-                designer.copyToClipboard();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+v', 'meta+v'], function (event) {
-                event.preventDefault(event);
-                event.stopPropagation();
-                designer.pasteClipboard();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+shift+z', 'meta+shift+z', 'ctrl+y', 'meta+y'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-                designer.redo();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+a', 'meta+a'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-                designer.selectAll();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+b', 'meta+b'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.changeFontWeight();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+s', 'meta+s'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-                $(document).find('#save').trigger('click');
-            }
-        );
-        this.addShortcut(
-            ['ctrl+i', 'meta+i'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.changeFontStyle();
-            }
-        );
-        this.addShortcut(
-            ['ctrl+shift+a', 'meta+shift+a'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.deselectAll();
-            }
-        );
-        this.addShortcut(
-            ['meta+=', 'ctrl+='], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.zoomIn();
-            }
-        );
-        this.addShortcut(
-            ['meta+-', 'ctrl+-'], function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.zoomOut();
-            }
-        );
-        var me = this;
-        this.addShortcut(
-            'right', function (event) {
-                var node = model.selectedTopic();
-                if (node) {
-                    if (node.isCentralTopic()) {
-                        me._goToSideChild(designer, node, 'RIGHT');
-                    }
-                    else {
-                        if (node.getPosition().x < 0) {
-                            me._goToParent(designer, node);
-                        }
-                        else if (!node.areChildrenShrunken()) {
-                            me._goToChild(designer, node);
-                        }
-                    }
-                } else {
-                    var centralTopic = model.getCentralTopic();
-                    me._goToNode(designer, centralTopic);
-                }
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        );
-        this.addShortcut(
-            'left', function (event) {
-                var node = model.selectedTopic();
-                if (node) {
-                    if (node.isCentralTopic()) {
-                        me._goToSideChild(designer, node, 'LEFT');
-                    }
-                    else {
-                        if (node.getPosition().x > 0) {
-                            me._goToParent(designer, node);
-                        }
-                        else if (!node.areChildrenShrunken()) {
-                            me._goToChild(designer, node);
-                        }
-                    }
-                } else {
-                    var centralTopic = model.getCentralTopic();
-                    me._goToNode(designer, centralTopic);
-                }
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        );
-        this.addShortcut(
-            'up', function (event) {
-                var node = model.selectedTopic();
-                if (node) {
-                    if (!node.isCentralTopic()) {
-                        me._goToBrother(designer, node, 'UP');
-                    }
-                } else {
-                    var centralTopic = model.getCentralTopic();
-                    me._goToNode(designer, centralTopic);
-                }
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        );
-        this.addShortcut(
-            'down', function (event) {
-                var node = model.selectedTopic();
-                if (node) {
-                    if (!node.isCentralTopic()) {
-                        me._goToBrother(designer, node, 'DOWN');
-                    }
-                } else {
-                    var centralTopic = model.getCentralTopic();
-                    me._goToNode(designer, centralTopic);
-                }
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        );
-        var excludes = ['esc', 'escape', 'f1', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12'];
-        
-        $(document).on('keypress', function (event) {
-            var keyCode;
-            // Firefox doesn't skip special keys for keypress event...
-            if (event.key && excludes.contains(event.key.toLowerCase())) {
-                return;
-            }
-            // Sometimes Firefox doesn't contain keyCode value
-            if (event.key && event.keyCode == 0) {
-                keyCode = event.charCode;
-            } else {
-                keyCode = event.keyCode;
-            }
-
-            var specialKey = jQuery.hotkeys.specialKeys[keyCode];
-            if (["enter", "capslock"].indexOf(specialKey) == -1 && !jQuery.hotkeys.shiftNums[keyCode]) {
-                var nodes = designer.getModel().filterSelectedTopics();
-                if (nodes.length > 0) {
-
-                    // If a modifier is press, the key selected must be ignored.
-                    var pressKey = String.fromCharCode(keyCode);
-                    if (event.ctrlKey || event.altKey || event.metaKey) {
-                        return;
-                    }
-                    nodes[0].showTextEditor(pressKey);
-                    event.stopPropagation();
-                }
-            }
-            
-        });
-
-    },
-
-    _goToBrother:function (designer, node, direction) {
-        var parent = node.getParent();
-        if (parent) {
-            var brothers = parent.getChildren();
-
-            var target = node;
-            var y = node.getPosition().y;
-            var x = node.getPosition().x;
-            var dist = null;
-            for (var i = 0; i < brothers.length; i++) {
-                var sameSide = (x * brothers[i].getPosition().x) >= 0;
-                if (brothers[i] != node && sameSide) {
-                    var brother = brothers[i];
-                    var brotherY = brother.getPosition().y;
-                    if (direction == "DOWN" && brotherY > y) {
-                        var distancia = y - brotherY;
-                        if (distancia < 0) {
-                            distancia = distancia * (-1);
-                        }
-                        if (dist == null || dist > distancia) {
-                            dist = distancia;
-                            target = brothers[i];
-                        }
-                    }
-                    else if (direction == "UP" && brotherY < y) {
-                        var distance = y - brotherY;
-                        if (distance < 0) {
-                            distance = distance * (-1);
-                        }
-                        if (dist == null || dist > distance) {
-                            dist = distance;
-                            target = brothers[i];
-                        }
-                    }
-                }
-            }
-            this._goToNode(designer, target);
-        }
-    },
-
-
-    _goToSideChild:function (designer, node, side) {
-        var children = node.getChildren();
-        if (children.length > 0) {
-            var target = children[0];
-            var top = null;
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
-                var childY = child.getPosition().y;
-                if (side == 'LEFT' && child.getPosition().x < 0) {
-                    if (top == null || childY < top) {
-                        target = child;
-                        top = childY;
-                    }
-                }
-                if (side == 'RIGHT' && child.getPosition().x > 0) {
-                    if (top == null || childY < top) {
-                        target = child;
-                        top = childY;
-                    }
-                }
-            }
-
-            this._goToNode(designer, target);
-        }
-    },
-
-    _goToParent:function (designer, node) {
-        var parent = node.getParent();
-        if (parent) {
-            this._goToNode(designer, parent);
-        }
-    },
-
-    _goToChild:function (designer, node) {
-        var children = node.getChildren();
-        if (children.length > 0) {
-            var target = children[0];
-            var top = target.getPosition().y;
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
-                if (child.getPosition().y < top) {
-                    top = child.getPosition().y;
-                    target = child;
-                }
-            }
-            this._goToNode(designer, target);
-        }
-    },
-
-    _goToNode:function (designer, node) {
-        // First deselect all the nodes ...
         designer.deselectAll();
+      },
+    );
+    this.addShortcut(
+      ['meta+=', 'ctrl+='], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
 
-        // Give focus to the selected node....
+        designer.zoomIn();
-        node.setOnFocus(true);
+      },
+    );
+    this.addShortcut(
+      ['meta+-', 'ctrl+-'], (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        designer.zoomOut();
+      },
+    );
+    const me = this;
+    this.addShortcut(
+      'right', (event) => {
+        const node = model.selectedTopic();
+        if (node) {
+          if (node.isCentralTopic()) {
+            me._goToSideChild(designer, node, 'RIGHT');
+          } else if (node.getPosition().x < 0) {
+            me._goToParent(designer, node);
+          } else if (!node.areChildrenShrunken()) {
+            me._goToChild(designer, node);
+          }
+        } else {
+          const centralTopic = model.getCentralTopic();
+          me._goToNode(designer, centralTopic);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      },
+    );
+    this.addShortcut(
+      'left', (event) => {
+        const node = model.selectedTopic();
+        if (node) {
+          if (node.isCentralTopic()) {
+            me._goToSideChild(designer, node, 'LEFT');
+          } else if (node.getPosition().x > 0) {
+            me._goToParent(designer, node);
+          } else if (!node.areChildrenShrunken()) {
+            me._goToChild(designer, node);
+          }
+        } else {
+          const centralTopic = model.getCentralTopic();
+          me._goToNode(designer, centralTopic);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      },
+    );
+    this.addShortcut(
+      'up', (event) => {
+        const node = model.selectedTopic();
+        if (node) {
+          if (!node.isCentralTopic()) {
+            me._goToBrother(designer, node, 'UP');
+          }
+        } else {
+          const centralTopic = model.getCentralTopic();
+          me._goToNode(designer, centralTopic);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      },
+    );
+    this.addShortcut(
+      'down', (event) => {
+        const node = model.selectedTopic();
+        if (node) {
+          if (!node.isCentralTopic()) {
+            me._goToBrother(designer, node, 'DOWN');
+          }
+        } else {
+          const centralTopic = model.getCentralTopic();
+          me._goToNode(designer, centralTopic);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      },
+    );
+    const excludes = ['esc', 'escape', 'f1', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12'];
+
+    $(document).on('keypress', (event) => {
+      let keyCode;
+      // Firefox doesn't skip special keys for keypress event...
+      if (event.key && excludes.contains(event.key.toLowerCase())) {
+        return;
+      }
+      // Sometimes Firefox doesn't contain keyCode value
+      if (event.key && event.keyCode == 0) {
+        keyCode = event.charCode;
+      } else {
+        keyCode = event.keyCode;
+      }
+
+      const specialKey = jQuery.hotkeys.specialKeys[keyCode];
+      if (['enter', 'capslock'].indexOf(specialKey) == -1 && !jQuery.hotkeys.shiftNums[keyCode]) {
+        const nodes = designer.getModel().filterSelectedTopics();
+        if (nodes.length > 0) {
+          // If a modifier is press, the key selected must be ignored.
+          const pressKey = String.fromCharCode(keyCode);
+          if (event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+          }
+          nodes[0].showTextEditor(pressKey);
+          event.stopPropagation();
+        }
+      }
+    });
+  },
+
+  _goToBrother(designer, node, direction) {
+    const parent = node.getParent();
+    if (parent) {
+      const brothers = parent.getChildren();
+
+      let target = node;
+      const { y } = node.getPosition();
+      const { x } = node.getPosition();
+      let dist = null;
+      for (let i = 0; i < brothers.length; i++) {
+        const sameSide = (x * brothers[i].getPosition().x) >= 0;
+        if (brothers[i] != node && sameSide) {
+          const brother = brothers[i];
+          const brotherY = brother.getPosition().y;
+          if (direction == 'DOWN' && brotherY > y) {
+            let distancia = y - brotherY;
+            if (distancia < 0) {
+              distancia *= (-1);
+            }
+            if (dist == null || dist > distancia) {
+              dist = distancia;
+              target = brothers[i];
+            }
+          } else if (direction == 'UP' && brotherY < y) {
+            let distance = y - brotherY;
+            if (distance < 0) {
+              distance *= (-1);
+            }
+            if (dist == null || dist > distance) {
+              dist = distance;
+              target = brothers[i];
+            }
+          }
+        }
+      }
+      this._goToNode(designer, target);
     }
+  },
+
+  _goToSideChild(designer, node, side) {
+    const children = node.getChildren();
+    if (children.length > 0) {
+      let target = children[0];
+      let top = null;
+      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 (top == null || childY < top) {
+            target = child;
+            top = childY;
+          }
+        }
+        if (side == 'RIGHT' && child.getPosition().x > 0) {
+          if (top == null || childY < top) {
+            target = child;
+            top = childY;
+          }
+        }
+      }
+
+      this._goToNode(designer, target);
+    }
+  },
+
+  _goToParent(designer, node) {
+    const parent = node.getParent();
+    if (parent) {
+      this._goToNode(designer, parent);
+    }
+  },
+
+  _goToChild(designer, node) {
+    const children = node.getChildren();
+    if (children.length > 0) {
+      let target = children[0];
+      let top = target.getPosition().y;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (child.getPosition().y < top) {
+          top = child.getPosition().y;
+          target = child;
+        }
+      }
+      this._goToNode(designer, target);
+    }
+  },
+
+  _goToNode(designer, node) {
+    // First deselect all the nodes ...
+    designer.deselectAll();
+
+    // Give focus to the selected node....
+    node.setOnFocus(true);
+  },
 
 });
 
 DesignerKeyboard.specialKeys = {
-    8: "backspace", 9: "tab", 10: "return", 13: "enter", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
+  8: 'backspace',
-    20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
+  9: 'tab',
-    37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
+  10: 'return',
-    96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
+  13: 'enter',
-    104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
+  16: 'shift',
-    112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
+  17: 'ctrl',
-    120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/",
+  18: 'alt',
-    220: "\\", 222: "'", 224: "meta"
+  19: 'pause',
+  20: 'capslock',
+  27: 'esc',
+  32: 'space',
+  33: 'pageup',
+  34: 'pagedown',
+  35: 'end',
+  36: 'home',
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  45: 'insert',
+  46: 'del',
+  96: '0',
+  97: '1',
+  98: '2',
+  99: '3',
+  100: '4',
+  101: '5',
+  102: '6',
+  103: '7',
+  104: '8',
+  105: '9',
+  106: '*',
+  107: '+',
+  109: '-',
+  110: '.',
+  111: '/',
+  112: 'f1',
+  113: 'f2',
+  114: 'f3',
+  115: 'f4',
+  116: 'f5',
+  117: 'f6',
+  118: 'f7',
+  119: 'f8',
+  120: 'f9',
+  121: 'f10',
+  122: 'f11',
+  123: 'f12',
+  144: 'numlock',
+  145: 'scroll',
+  186: ';',
+  191: '/',
+  220: '\\',
+  222: "'",
+  224: 'meta',
 };
 
 export default DesignerKeyboard;

packages/mindplot/lib/components/DesignerModel.js

@@ -18,174 +18,172 @@
 const Events = require('./Events').default;
 
 const DesignerModel = new Class(/** @lends DesignerModel */{
-    Implements:[Events],
+  Implements: [Events],
-    /**
+  /**
      * @implements {mindplot.Events}
      * @constructs
-     * @param {{readOnly: Boolean, zoom: Number, saveOnLoad: Boolean, size: {width: Number, 
+     * @param {{readOnly: Boolean, zoom: Number, saveOnLoad: Boolean, size: {width: Number,
-     * height: Number}, viewPort: {width: Number, height: Number}, container: String, 
+     * height: Number}, viewPort: {width: Number, height: Number}, container: String,
      * persistenceManager: String, mapId: String, locale: String}} options
-     * options loaded from json config 
+     * options loaded from json config
      * @see {@link ConfigParameters.md}
      * @see {@link editor.html}
      */
-    initialize:function (options) {
+  initialize(options) {
-        this._zoom = options.zoom;
+    this._zoom = options.zoom;
-        this._topics = [];
+    this._topics = [];
-        this._relationships = [];
+    this._relationships = [];
-    },
+  },
 
-    /** @return {Number} zoom between 0.3 (largest text) and 1.9 */
+  /** @return {Number} zoom between 0.3 (largest text) and 1.9 */
-    getZoom:function () {
+  getZoom() {
-        return this._zoom;
+    return this._zoom;
-    },
+  },
 
-    /** @param {Number} zoom number between 0.3 and 1.9 to set the zoom to */
+  /** @param {Number} zoom number between 0.3 and 1.9 to set the zoom to */
-    setZoom:function (zoom) {
+  setZoom(zoom) {
-        this._zoom = zoom;
+    this._zoom = zoom;
-    },
+  },
 
-    /** @return {@link mindplot.Topic[]} all topics */
+  /** @return {@link mindplot.Topic[]} all topics */
-    getTopics:function () {
+  getTopics() {
-        return this._topics;
+    return this._topics;
-    },
+  },
 
-    /** @return {mindplot.Relationship[]} all relationships */
+  /** @return {mindplot.Relationship[]} all relationships */
-    getRelationships:function () {
+  getRelationships() {
-        return this._relationships;
+    return this._relationships;
-    },
+  },
 
-    /** @return {mindplot.CentralTopic} the central topic */
+  /** @return {mindplot.CentralTopic} the central topic */
-    getCentralTopic:function () {
+  getCentralTopic() {
-        var topics = this.getTopics();
+    const topics = this.getTopics();
-        return topics[0];
+    return topics[0];
-    },
+  },
 
-    /** @return {mindplot.Topic[]} selected topics */
+  /** @return {mindplot.Topic[]} selected topics */
-    filterSelectedTopics:function () {
+  filterSelectedTopics() {
-        var result = [];
+    const result = [];
-        for (var i = 0; i < this._topics.length; i++) {
+    for (let i = 0; i < this._topics.length; i++) {
-            if (this._topics[i].isOnFocus()) {
+      if (this._topics[i].isOnFocus()) {
-                result.push(this._topics[i]);
+        result.push(this._topics[i]);
-            }
+      }
-        }
+    }
-        return result;
+    return result;
-    },
+  },
 
-    /**
+  /**
      * @return {mindplot.Relationship[]} selected relationships
      */
-    filterSelectedRelationships:function () {
+  filterSelectedRelationships() {
-        var result = [];
+    const result = [];
-        for (var i = 0; i < this._relationships.length; i++) {
+    for (let i = 0; i < this._relationships.length; i++) {
-            if (this._relationships[i].isOnFocus()) {
+      if (this._relationships[i].isOnFocus()) {
-                result.push(this._relationships[i]);
+        result.push(this._relationships[i]);
-            }
+      }
-        }
+    }
-        return result;
+    return result;
-    },
+  },
 
-    /**
+  /**
      * @return {Array.<mindplot.Relationship, mindplot.Topic>} all topics and relationships
      */
-    getEntities:function () {
+  getEntities() {
-        var result = [].append(this._topics);
+    const result = [].append(this._topics);
-        result.append(this._relationships);
+    result.append(this._relationships);
-        return result;
+    return result;
-    },
+  },
 
-    /**
+  /**
      * removes occurrences of the given topic from the topic array
      * @param {mindplot.Topic} topic the topic to remove
      */
-    removeTopic:function (topic) {
+  removeTopic(topic) {
-        $assert(topic, "topic can not be null");
+    $assert(topic, 'topic can not be null');
-        this._topics.erase(topic);
+    this._topics.erase(topic);
-    },
+  },
 
-    /**
+  /**
      * removes occurrences of the given relationship from the relationship array
      * @param {mindplot.Relationship} rel the relationship to remove
      */
-    removeRelationship:function (rel) {
+  removeRelationship(rel) {
-        $assert(rel, "rel can not be null");
+    $assert(rel, 'rel can not be null');
-        this._relationships.erase(rel);
+    this._relationships.erase(rel);
-    },
+  },
 
-    /**
+  /**
      * adds the given topic to the topic array
      * @param {mindplot.Topic} topic the topic to add
      * @throws will throw an error if topic is null or undefined
      * @throws will throw an error if the topic's id is not a number
      */
-    addTopic:function (topic) {
+  addTopic(topic) {
-        $assert(topic, "topic can not be null");
+    $assert(topic, 'topic can not be null');
-        $assert(typeof  topic.getId() == "number", "id is not a number:" + topic.getId());
+    $assert(typeof topic.getId() === 'number', `id is not a number:${topic.getId()}`);
-        this._topics.push(topic);
+    this._topics.push(topic);
-    },
+  },
 
-    /**
+  /**
      * adds the given relationship to the relationship array
      * @param {mindplot.Relationship} rel the relationship to add
      * @throws will throw an error if rel is null or undefined
      */
-    addRelationship:function (rel) {
+  addRelationship(rel) {
-        $assert(rel, "rel can not be null");
+    $assert(rel, 'rel can not be null');
-        this._relationships.push(rel);
+    this._relationships.push(rel);
-    },
+  },
 
-    /**
+  /**
      * @param {Function=} validate a function to validate nodes
      * @param {String=} errorMsg an error message to display if the validation fails
      * @return {String} returns an array of the selected (and, if applicable, valid) topics' ids
      */
-    filterTopicsIds:function (validate, errorMsg) {
+  filterTopicsIds(validate, errorMsg) {
-        var result = [];
+    const result = [];
-        var topics = this.filterSelectedTopics();
+    const topics = this.filterSelectedTopics();
 
+    let isValid = true;
+    for (let i = 0; i < topics.length; i++) {
+      const selectedNode = topics[i];
+      if ($defined(validate)) {
+        isValid = validate(selectedNode);
+      }
 
-        var isValid = true;
+      // Add node only if it's valid.
-        for (var i = 0; i < topics.length; i++) {
+      if (isValid) {
-            var selectedNode = topics[i];
+        result.push(selectedNode.getId());
-            if ($defined(validate)) {
+      } else {
-                isValid = validate(selectedNode);
+        $notify(errorMsg);
-            }
+      }
+    }
+    return result;
+  },
 
-            // Add node only if it's valid.
+  /**
-            if (isValid) {
+     * @return {mindplot.Topic} the first selected topic if one or more are found by the
-                result.push(selectedNode.getId());
-            } else {
-                $notify(errorMsg);
-            }
-        }
-        return result;
-    },
-
-    /**
-     * @return {mindplot.Topic} the first selected topic if one or more are found by the 
      * filterSelectedTopics function, null otherwise
      */
-    selectedTopic:function () {
+  selectedTopic() {
-        var topics = this.filterSelectedTopics();
+    const topics = this.filterSelectedTopics();
-        return (topics.length > 0) ? topics[0] : null;
+    return (topics.length > 0) ? topics[0] : null;
-    },
+  },
 
-    /**
+  /**
      * @param {String} id the id of the topic to be retrieved
      * @return {mindplot.Topic} the topic with the respective id
      */
-    findTopicById:function (id) {
+  findTopicById(id) {
-        var result = null;
+    let result = null;
-        for (var i = 0; i < this._topics.length; i++) {
+    for (let i = 0; i < this._topics.length; i++) {
-            var topic = this._topics[i];
+      const topic = this._topics[i];
-            if (topic.getId() == id) {
+      if (topic.getId() == id) {
-                result = topic;
+        result = topic;
-                break;
+        break;
-            }
+      }
-        }
-        return result;
-
     }
+    return result;
+  },
 });
 
 export default DesignerModel;

packages/mindplot/lib/components/DesignerUndoManager.js

@@ -17,69 +17,69 @@
  */
 
 const DesignerUndoManager = new Class({
-    initialize: function(fireChange) {
+  initialize(fireChange) {
-        this._undoQueue = [];
+    this._undoQueue = [];
-        this._redoQueue = [];
+    this._redoQueue = [];
-        this._baseId = 0;
+    this._baseId = 0;
-    },
+  },
 
-    enqueue:function(command) {
+  enqueue(command) {
-        $assert(command, "Command can  not be null");
+    $assert(command, 'Command can  not be null');
-        var length = this._undoQueue.length;
+    const { length } = this._undoQueue;
-        if (command.discardDuplicated && length > 0) {
+    if (command.discardDuplicated && length > 0) {
-            // Skip duplicated events ...
+      // Skip duplicated events ...
-            var lastItem = this._undoQueue[length - 1];
+      const lastItem = this._undoQueue[length - 1];
-            if (lastItem.discardDuplicated != command.discardDuplicated) {
+      if (lastItem.discardDuplicated != command.discardDuplicated) {
-                this._undoQueue.push(command);
+        this._undoQueue.push(command);
-            }
+      }
-        } else {
+    } else {
-            this._undoQueue.push(command);
+      this._undoQueue.push(command);
-        }
-        this._redoQueue = [];
-    },
-
-    execUndo: function(commandContext) {
-        if (this._undoQueue.length > 0) {
-            var command = this._undoQueue.pop();
-            this._redoQueue.push(command);
-
-            command.undoExecute(commandContext);
-        }
-    },
-
-    execRedo: function(commandContext) {
-        if (this._redoQueue.length > 0) {
-            var command = this._redoQueue.pop();
-            this._undoQueue.push(command);
-            command.execute(commandContext);
-        }
-    },
-
-    buildEvent: function() {
-        return {undoSteps: this._undoQueue.length, redoSteps:this._redoQueue.length};
-    },
-
-    markAsChangeBase: function() {
-        var undoLength = this._undoQueue.length;
-        if (undoLength > 0) {
-            var command = this._undoQueue[undoLength - 1];
-            this._baseId = command.getId();
-        } else {
-            this._baseId = 0;
-        }
-    },
-
-    hasBeenChanged: function() {
-        var result = true;
-        var undoLength= this._undoQueue.length;
-        if (undoLength == 0 && this._baseId == 0) {
-            result = false;
-        } else if (undoLength > 0) {
-            var command = this._undoQueue[undoLength - 1];
-            result = (this._baseId != command.getId());
-        }
-        return result;
     }
+    this._redoQueue = [];
+  },
+
+  execUndo(commandContext) {
+    if (this._undoQueue.length > 0) {
+      const command = this._undoQueue.pop();
+      this._redoQueue.push(command);
+
+      command.undoExecute(commandContext);
+    }
+  },
+
+  execRedo(commandContext) {
+    if (this._redoQueue.length > 0) {
+      const command = this._redoQueue.pop();
+      this._undoQueue.push(command);
+      command.execute(commandContext);
+    }
+  },
+
+  buildEvent() {
+    return { undoSteps: this._undoQueue.length, redoSteps: this._redoQueue.length };
+  },
+
+  markAsChangeBase() {
+    const undoLength = this._undoQueue.length;
+    if (undoLength > 0) {
+      const command = this._undoQueue[undoLength - 1];
+      this._baseId = command.getId();
+    } else {
+      this._baseId = 0;
+    }
+  },
+
+  hasBeenChanged() {
+    let result = true;
+    const undoLength = this._undoQueue.length;
+    if (undoLength == 0 && this._baseId == 0) {
+      result = false;
+    } else if (undoLength > 0) {
+      const command = this._undoQueue[undoLength - 1];
+      result = (this._baseId != command.getId());
+    }
+    return result;
+  },
 });
 
 export default DesignerUndoManager;

packages/mindplot/lib/components/DragConnector.js

@@ -17,99 +17,94 @@
  */
 
 const DragConnector = new Class({
-    initialize:function (designerModel, workspace) {
+  initialize(designerModel, workspace) {
-        $assert(designerModel, 'designerModel can not be null');
+    $assert(designerModel, 'designerModel can not be null');
-        $assert(workspace, 'workspace can not be null');
+    $assert(workspace, 'workspace can not be null');
 
-        // this._layoutManager = layoutManager;
+    // this._layoutManager = layoutManager;
-        this._designerModel = designerModel;
+    this._designerModel = designerModel;
-        this._workspace = workspace;
+    this._workspace = workspace;
-    },
+  },
 
-    checkConnection:function (dragTopic) {
+  checkConnection(dragTopic) {
-        var topics = this._designerModel.getTopics();
+    const topics = this._designerModel.getTopics();
 
-        // Must be disconnected from their current connection ?.
+    // Must be disconnected from their current connection ?.
-        var candidates = this._searchConnectionCandidates(dragTopic);
+    const candidates = this._searchConnectionCandidates(dragTopic);
-        var currentConnection = dragTopic.getConnectedToTopic();
+    const currentConnection = dragTopic.getConnectedToTopic();
-
-
-        if (currentConnection && (candidates.length == 0 || candidates[0] != currentConnection)) {
-            dragTopic.disconnect(this._workspace);
-        }
-
-        // Finally, connect nodes ...
-        if (!dragTopic.isConnected() && candidates.length > 0) {
-            dragTopic.connectTo(candidates[0]);
-        }
-    },
-
-    _searchConnectionCandidates:function (dragTopic) {
-        var topics = this._designerModel.getTopics();
-        var draggedNode = dragTopic.getDraggedTopic();
-
-        // Drag node connects to the border ...
-        var dragTopicWidth = dragTopic.getSize ? dragTopic.getSize().width : 0; // Hack...
-        var xMouseGap = dragTopic.getPosition().x > 0 ? 0 : dragTopicWidth;
-        var sPos = {x:dragTopic.getPosition().x - xMouseGap, y:dragTopic.getPosition().y};
-
-        // Perform a initial filter to discard topics:
-        //  - Exclude dragged topic
-        //  - Exclude dragTopic pivot
-        //  - Nodes that are collapsed
-        //  - It's not part of the branch dragged itself
-        topics = topics.filter(function (topic) {
-            var result = draggedNode != topic;
-            result = result && topic != draggedNode;
-            result = result && !topic.areChildrenShrunken() && !topic.isCollapsed();
-            result = result && !draggedNode.isChildTopic(topic);
-            return result;
-        });
-
-        // Filter all the nodes that are outside the vertical boundary:
-        //  * The node is to out of the x scope
-        //  * The x distance greater the vertical tolerated distance
-        topics = topics.filter(function (topic) {
-            var tpos = topic.getPosition();
-            // Center topic has different alignment than the rest of the nodes. That's why i need to divide it by two...
-            var txborder = tpos.x + (topic.getSize().width / 2) * Math.sign(sPos.x);
-            var distance = (sPos.x - txborder) * Math.sign(sPos.x);
-            return  distance > 0 && (distance < DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE);
-
-        });
-
-        // Assign a priority based on the distance:
-        // - Alignment with the targetNode
-        // - Vertical distance
-        // - Horizontal proximity
-        // - It's already connected.
-        var currentConnection = dragTopic.getConnectedToTopic();
-        var me = this;
-        topics = topics.sort(function (a, b) {
-            var aPos = a.getPosition();
-            var bPos = b.getPosition();
-
-            var av = me._isVerticallyAligned(a.getSize(), aPos, sPos);
-            var bv = me._isVerticallyAligned(b.getSize(), bPos, sPos);
-            return  me._proximityWeight(av, a, sPos, currentConnection) - me._proximityWeight(bv, b, sPos, currentConnection);
-
-        });
-        return topics;
-    },
-
-    _proximityWeight:function (isAligned, target, sPos, currentConnection) {
-        var tPos = target.getPosition();
-        return  (isAligned ? 0 : 200    ) + Math.abs(tPos.x - sPos.x) + Math.abs(tPos.y - sPos.y) + (currentConnection == target ? 0 : 100);
-    },
-
-    _isVerticallyAligned:function (targetSize, targetPosition, sourcePosition) {
-
-        return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2;
 
+    if (currentConnection && (candidates.length == 0 || candidates[0] != currentConnection)) {
+      dragTopic.disconnect(this._workspace);
     }
 
+    // Finally, connect nodes ...
+    if (!dragTopic.isConnected() && candidates.length > 0) {
+      dragTopic.connectTo(candidates[0]);
+    }
+  },
+
+  _searchConnectionCandidates(dragTopic) {
+    let topics = this._designerModel.getTopics();
+    const draggedNode = dragTopic.getDraggedTopic();
+
+    // Drag node connects to the border ...
+    const dragTopicWidth = dragTopic.getSize ? dragTopic.getSize().width : 0; // Hack...
+    const xMouseGap = dragTopic.getPosition().x > 0 ? 0 : dragTopicWidth;
+    const sPos = { x: dragTopic.getPosition().x - xMouseGap, y: dragTopic.getPosition().y };
+
+    // Perform a initial filter to discard topics:
+    //  - Exclude dragged topic
+    //  - Exclude dragTopic pivot
+    //  - Nodes that are collapsed
+    //  - It's not part of the branch dragged itself
+    topics = topics.filter((topic) => {
+      let result = draggedNode != topic;
+      result = result && topic != draggedNode;
+      result = result && !topic.areChildrenShrunken() && !topic.isCollapsed();
+      result = result && !draggedNode.isChildTopic(topic);
+      return result;
+    });
+
+    // Filter all the nodes that are outside the vertical boundary:
+    //  * The node is to out of the x scope
+    //  * The x distance greater the vertical tolerated distance
+    topics = topics.filter((topic) => {
+      const tpos = topic.getPosition();
+      // Center topic has different alignment than the rest of the nodes. That's why i need to divide it by two...
+      const txborder = tpos.x + (topic.getSize().width / 2) * Math.sign(sPos.x);
+      const distance = (sPos.x - txborder) * Math.sign(sPos.x);
+      return distance > 0 && (distance < DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE);
+    });
+
+    // Assign a priority based on the distance:
+    // - Alignment with the targetNode
+    // - Vertical distance
+    // - Horizontal proximity
+    // - It's already connected.
+    const currentConnection = dragTopic.getConnectedToTopic();
+    const me = this;
+    topics = topics.sort((a, b) => {
+      const aPos = a.getPosition();
+      const bPos = b.getPosition();
+
+      const av = me._isVerticallyAligned(a.getSize(), aPos, sPos);
+      const bv = me._isVerticallyAligned(b.getSize(), bPos, sPos);
+      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;
 
-export default DragConnector
+export default DragConnector;

packages/mindplot/lib/components/DragManager.js

@@ -1,151 +1,146 @@
-/*
+/*
- *    Copyright [2015] [wisemapping]
+ *    Copyright [2015] [wisemapping]
- *
+ *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
- *
+ *
- *       http://www.wisemapping.org/license
+ *       http://www.wisemapping.org/license
- *
+ *
- *   Unless required by applicable law or agreed to in writing, software
+ *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
+ *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *   limitations under the License.
- */
+ */
-const DragTopic = require('./DragTopic').default;
+const DragTopic = require('./DragTopic').default;
-
+
-const DragManager = new Class({
+const DragManager = new Class({
-    initialize:function(workspace, eventDispatcher) {
+  initialize(workspace, eventDispatcher) {
-        this._workspace = workspace;
+    this._workspace = workspace;
-        this._designerModel = workspace;
+    this._designerModel = workspace;
-        this._listeners = {};
+    this._listeners = {};
-        this._isDragInProcess = false;
+    this._isDragInProcess = false;
-        this._eventDispatcher = eventDispatcher;
+    this._eventDispatcher = eventDispatcher;
-        DragTopic.init(this._workspace);
+    DragTopic.init(this._workspace);
-    },
+  },
-
+
-    add : function(node) {
+  add(node) {
-        // Add behaviour ...
+    // Add behaviour ...
-        var workspace = this._workspace;
+    const workspace = this._workspace;
-        var screen = workspace.getScreenManager();
+    const screen = workspace.getScreenManager();
-        var dragManager = this;
+    const dragManager = this;
-        var me = this;
+    const me = this;
-        var mouseDownListener = function(event) {
+    const mouseDownListener = function (event) {
-            if (workspace.isWorkspaceEventsEnabled()) {
+      if (workspace.isWorkspaceEventsEnabled()) {
-                // Disable double drag...
+        // Disable double drag...
-                workspace.enableWorkspaceEvents(false);
+        workspace.enableWorkspaceEvents(false);
-
+
-                // Set initial position.
+        // Set initial position.
-                var layoutManager = me._eventDispatcher.getLayoutManager();
+        const layoutManager = me._eventDispatcher.getLayoutManager();
-                var dragNode = node.createDragNode(layoutManager);
+        const dragNode = node.createDragNode(layoutManager);
-
+
-                // Register mouse move listener ...
+        // Register mouse move listener ...
-                var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager);
+        const mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager);
-                screen.addEvent('mousemove', mouseMoveListener);
+        screen.addEvent('mousemove', mouseMoveListener);
-
+
-                // Register mouse up listeners ...
+        // Register mouse up listeners ...
-                var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager);
+        const mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager);
-                screen.addEvent('mouseup', mouseUpListener);
+        screen.addEvent('mouseup', mouseUpListener);
-
+
-                // Change cursor.
+        // Change cursor.
-                window.document.body.style.cursor = 'move';
+        window.document.body.style.cursor = 'move';
-            }
+      }
-        };
+    };
-        node.addEvent('mousedown', mouseDownListener);
+    node.addEvent('mousedown', mouseDownListener);
-    },
+  },
-
+
-    remove : function(node) {
+  remove(node) {
-        var nodes = this._topics;
+    const nodes = this._topics;
-        var contained = false;
+    let contained = false;
-        var index = -1;
+    let index = -1;
-        for (var i = 0; i < nodes.length; i++) {
+    for (let i = 0; i < nodes.length; i++) {
-            if (nodes[i] == node) {
+      if (nodes[i] == node) {
-                contained = true;
+        contained = true;
-                index = i;
+        index = i;
-            }
+      }
-        }
+    }
-    },
+  },
-
+
-    _buildMouseMoveListener : function(workspace, dragNode, dragManager) {
+  _buildMouseMoveListener(workspace, dragNode, dragManager) {
-        var screen = workspace.getScreenManager();
+    const screen = workspace.getScreenManager();
-        var me = this;
+    const me = this;
-        var result = function(event) {
+    const result = function (event) {
-
+      if (!me._isDragInProcess) {
-            if (!me._isDragInProcess) {
+        // Execute Listeners ..
-                // Execute Listeners ..
+        const startDragListener = dragManager._listeners.startdragging;
-                var startDragListener = dragManager._listeners['startdragging'];
+        startDragListener(event, dragNode);
-                startDragListener(event, dragNode);
+
-
+        // Add shadow node to the workspace.
-                // Add shadow node to the workspace.
+        workspace.append(dragNode);
-                workspace.append(dragNode);
+
-
+        me._isDragInProcess = true;
-                me._isDragInProcess = true;
+      }
-            }
+
-
+      const pos = screen.getWorkspaceMousePosition(event);
-            var pos = screen.getWorkspaceMousePosition(event);
+      dragNode.setPosition(pos.x, pos.y);
-            dragNode.setPosition(pos.x, pos.y);
+
-
+      // Call mouse move listeners ...
-            // Call mouse move listeners ...
+      const dragListener = dragManager._listeners.dragging;
-            var dragListener = dragManager._listeners['dragging'];
+      if ($defined(dragListener)) {
-            if ($defined(dragListener)) {
+        dragListener(event, dragNode);
-                dragListener(event, dragNode);
+      }
-            }
+
-
+      event.preventDefault();
-            event.preventDefault();
+    };
-
+    dragManager._mouseMoveListener = result;
-        };
+    return result;
-        dragManager._mouseMoveListener = result;
+  },
-        return result;
+
-    },
+  _buildMouseUpListener(workspace, node, dragNode, dragManager) {
-
+    const screen = workspace.getScreenManager();
-    _buildMouseUpListener : function(workspace, node, dragNode, dragManager) {
+    const me = this;
-        var screen = workspace.getScreenManager();
+    const result = function (event) {
-        var me = this;
+      $assert(dragNode.isDragTopic, 'dragNode must be an DragTopic');
-        var result = function(event) {
+
-            $assert(dragNode.isDragTopic, 'dragNode must be an DragTopic');
+      // Remove all the events.
-
+      screen.removeEvent('mousemove', dragManager._mouseMoveListener);
-            // Remove all the events.
+      screen.removeEvent('mouseup', dragManager._mouseUpListener);
-            screen.removeEvent('mousemove', dragManager._mouseMoveListener);
+
-            screen.removeEvent('mouseup', dragManager._mouseUpListener);
+      // Help GC
-
+      dragManager._mouseMoveListener = null;
-            // Help GC
+      dragManager._mouseUpListener = null;
-            dragManager._mouseMoveListener = null;
+
-            dragManager._mouseUpListener = null;
+      workspace.enableWorkspaceEvents(true);
-
+      // Change the cursor to the default.
-            workspace.enableWorkspaceEvents(true);
+      window.document.body.style.cursor = 'default';
-            // Change the cursor to the default.
+
-            window.document.body.style.cursor = 'default';
+      if (me._isDragInProcess) {
-
+        // Execute Listeners only if the node has been moved.
-            if (me._isDragInProcess) {
+        const endDragListener = dragManager._listeners.enddragging;
-
+        endDragListener(event, dragNode);
-                // Execute Listeners only if the node has been moved.
+
-                var endDragListener = dragManager._listeners['enddragging'];
+        // Remove drag node from the workspace.
-                endDragListener(event, dragNode);
+        dragNode.removeFromWorkspace(workspace);
-
+
-                // Remove drag node from the workspace.
+        me._isDragInProcess = false;
-                dragNode.removeFromWorkspace(workspace);
+      }
-
+    };
-                me._isDragInProcess = false;
+    dragManager._mouseUpListener = result;
-            }
+    return result;
-
+  },
-
+
-        };
+  /**
-        dragManager._mouseUpListener = result;
+     * type:
-        return result;
+     *  - startdragging.
-    },
+     *  - dragging
-
+     *  - enddragging
-    /**
+     */
-     * type:
+  addEvent(type, listener) {
-     *  - startdragging.
+    this._listeners[type] = listener;
-     *  - dragging
+  },
-     *  - enddragging
+});
-     */
+
-    addEvent : function(type, listener) {
+export default DragManager;
-        this._listeners[type] = listener;
-    }
-});
-
-export default DragManager;

packages/mindplot/lib/components/DragPivot.js

@@ -1,238 +1,240 @@
-/*
+/*
- *    Copyright [2015] [wisemapping]
+ *    Copyright [2015] [wisemapping]
- *
+ *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
- *
+ *
- *       http://www.wisemapping.org/license
+ *       http://www.wisemapping.org/license
- *
+ *
- *   Unless required by applicable law or agreed to in writing, software
+ *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
+ *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *   limitations under the License.
- */
+ */
-const Core = require('@wismapping/core-js')
+const Core = require('@wismapping/core-js');
-const core = Core();
+
-const web2D = require('@wismapping/web2d')
+const core = Core();
-const web2d = web2D();
+const web2D = require('@wismapping/web2d');
-
+
-const DragTopic = require('./DragTopic').default;
+const web2d = web2D();
-const Shape = require('./util/Shape').default;
+
-const INodeModel = require('./model/INodeModel').default;
+const DragTopic = require('./DragTopic').default;
-
+const Shape = require('./util/Shape').default;
-const DragPivot = new Class({
+const INodeModel = require('./model/INodeModel').default;
-    initialize:function() {
+
-        this._position = new core.Point();
+const DragPivot = new Class({
-        this._size = DragTopic.PIVOT_SIZE;
+  initialize() {
-
+    this._position = new core.Point();
-        this._straightLine = this._buildStraightLine();
+    this._size = DragTopic.PIVOT_SIZE;
-        this._curvedLine = this._buildCurvedLine();
+
-        this._dragPivot = this._buildRect();
+    this._straightLine = this._buildStraightLine();
-        this._connectRect = this._buildRect();
+    this._curvedLine = this._buildCurvedLine();
-        this._targetTopic = null;
+    this._dragPivot = this._buildRect();
-        this._isVisible = false;
+    this._connectRect = this._buildRect();
-    },
+    this._targetTopic = null;
-
+    this._isVisible = false;
-    isVisible:function() {
+  },
-        return this._isVisible;
+
-    },
+  isVisible() {
-
+    return this._isVisible;
-    getTargetTopic : function() {
+  },
-        return this._targetTopic;
+
-    },
+  getTargetTopic() {
-
+    return this._targetTopic;
-    _buildStraightLine : function() {
+  },
-        var line = new web2d.CurvedLine();
+
-        line.setStyle(web2d.CurvedLine.SIMPLE_LINE);
+  _buildStraightLine() {
-        line.setStroke(1, 'solid', '#CC0033');
+    const line = new web2d.CurvedLine();
-        line.setOpacity(0.4);
+    line.setStyle(web2d.CurvedLine.SIMPLE_LINE);
-        line.setVisibility(false);
+    line.setStroke(1, 'solid', '#CC0033');
-        return line;
+    line.setOpacity(0.4);
-    },
+    line.setVisibility(false);
-
+    return line;
-    _buildCurvedLine : function() {
+  },
-        var line = new web2d.CurvedLine();
+
-        line.setStyle(web2d.CurvedLine.SIMPLE_LINE);
+  _buildCurvedLine() {
-        line.setStroke(1, 'solid', '#CC0033');
+    const line = new web2d.CurvedLine();
-        line.setOpacity(0.4);
+    line.setStyle(web2d.CurvedLine.SIMPLE_LINE);
-        line.setVisibility(false);
+    line.setStroke(1, 'solid', '#CC0033');
-        return line;
+    line.setOpacity(0.4);
-    },
+    line.setVisibility(false);
-
+    return line;
-
+  },
-    _redrawLine : function() {
+
-        // Update line position.
+  _redrawLine() {
-        $assert(this.getTargetTopic(), 'Illegal invocation. Target node can not be null');
+    // Update line position.
-
+    $assert(this.getTargetTopic(), 'Illegal invocation. Target node can not be null');
-        var pivotRect = this._getPivotRect();
+
-
+    const pivotRect = this._getPivotRect();
-        // Pivot position has not changed. In this case, position change is not required.
+
-        var targetTopic = this.getTargetTopic();
+    // Pivot position has not changed. In this case, position change is not required.
-        var position = this._position;
+    const targetTopic = this.getTargetTopic();
-
+    const position = this._position;
-        // Calculate pivot connection point ...
+
-        var size = this._size;
+    // Calculate pivot connection point ...
-        var targetPosition = targetTopic.getPosition();
+    const size = this._size;
-        var line = this._getConnectionLine();
+    const targetPosition = targetTopic.getPosition();
-
+    const line = this._getConnectionLine();
-        // Update Line position.
+
-        var isAtRight = Shape.isAtRight(targetPosition, position);
+    // Update Line position.
-        var pivotPoint = Shape.calculateRectConnectionPoint(position, size, isAtRight);
+    const isAtRight = Shape.isAtRight(targetPosition, position);
-        line.setFrom(pivotPoint.x, pivotPoint.y);
+    const pivotPoint = Shape.calculateRectConnectionPoint(position, size, isAtRight);
-
+    line.setFrom(pivotPoint.x, pivotPoint.y);
-        // Update rect position
+
-        var cx = position.x - (parseInt(size.width) / 2);
+    // Update rect position
-        var cy = position.y - (parseInt(size.height) / 2);
+    const cx = position.x - (parseInt(size.width) / 2);
-        pivotRect.setPosition(cx, cy);
+    const cy = position.y - (parseInt(size.height) / 2);
-
+    pivotRect.setPosition(cx, cy);
-        // Make line visible only when the position has been already changed.
+
-        // This solve several strange effects ;)
+    // Make line visible only when the position has been already changed.
-        var targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint);
+    // This solve several strange effects ;)
-        line.setTo(targetPoint.x, targetPoint.y);
+    const targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint);
-    },
+    line.setTo(targetPoint.x, targetPoint.y);
-
+  },
-    setPosition : function(point) {
+
-        this._position = point;
+  setPosition(point) {
-        this._redrawLine();
+    this._position = point;
-    },
+    this._redrawLine();
-
+  },
-    getPosition : function() {
+
-        return this._position;
+  getPosition() {
-    },
+    return this._position;
-
+  },
-    _buildRect : function() {
+
-        var size = this._size;
+  _buildRect() {
-        var rectAttributes = {fillColor:'#CC0033',opacity:0.4,width:size.width,height:size.height,strokeColor:'#FF9933'};
+    const size = this._size;
-        var rect = new web2d.Rect(0, rectAttributes);
+    const rectAttributes = {
-        rect.setVisibility(false);
+      fillColor: '#CC0033', opacity: 0.4, width: size.width, height: size.height, strokeColor: '#FF9933',
-        return rect;
+    };
-    },
+    const rect = new web2d.Rect(0, rectAttributes);
-
+    rect.setVisibility(false);
-    _getPivotRect : function() {
+    return rect;
-        return this._dragPivot;
+  },
-    },
+
-
+  _getPivotRect() {
-    getSize : function() {
+    return this._dragPivot;
-        var elem2d = this._getPivotRect();
+  },
-        return elem2d.getSize();
+
-    },
+  getSize() {
-
+    const elem2d = this._getPivotRect();
-    setVisibility : function(value) {
+    return elem2d.getSize();
-        if (this.isVisible() != value) {
+  },
-
+
-            var pivotRect = this._getPivotRect();
+  setVisibility(value) {
-            pivotRect.setVisibility(value);
+    if (this.isVisible() != value) {
-
+      const pivotRect = this._getPivotRect();
-            var connectRect = this._connectRect;
+      pivotRect.setVisibility(value);
-            connectRect.setVisibility(value);
+
-
+      const connectRect = this._connectRect;
-            var line = this._getConnectionLine();
+      connectRect.setVisibility(value);
-            if (line) {
+
-                line.setVisibility(value);
+      const line = this._getConnectionLine();
-            }
+      if (line) {
-            this._isVisible = value;
+        line.setVisibility(value);
-        }
+      }
-    },
+      this._isVisible = value;
-
+    }
-    // If the node is connected, validate that there is a line connecting both...
+  },
-    _getConnectionLine : function() {
+
-        var result = null;
+  // If the node is connected, validate that there is a line connecting both...
-        var parentTopic = this._targetTopic;
+  _getConnectionLine() {
-        if (parentTopic) {
+    let result = null;
-            if (parentTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
+    const parentTopic = this._targetTopic;
-                result = this._straightLine;
+    if (parentTopic) {
-            } else {
+      if (parentTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
-                result = this._curvedLine;
+        result = this._straightLine;
-            }
+      } else {
-        }
+        result = this._curvedLine;
-        return result;
+      }
-    },
+    }
-
+    return result;
-    addToWorkspace : function(workspace) {
+  },
-        var pivotRect = this._getPivotRect();
+
-        workspace.append(pivotRect);
+  addToWorkspace(workspace) {
-
+    const pivotRect = this._getPivotRect();
-        var connectToRect = this._connectRect;
+    workspace.append(pivotRect);
-        workspace.append(connectToRect);
+
-
+    const connectToRect = this._connectRect;
-        // Add a hidden straight line ...
+    workspace.append(connectToRect);
-        var straighLine = this._straightLine;
+
-        straighLine.setVisibility(false);
+    // Add a hidden straight line ...
-        workspace.append(straighLine);
+    const straighLine = this._straightLine;
-        straighLine.moveToBack();
+    straighLine.setVisibility(false);
-
+    workspace.append(straighLine);
-        // Add a hidden curved line ...
+    straighLine.moveToBack();
-        var curvedLine = this._curvedLine;
+
-        curvedLine.setVisibility(false);
+    // Add a hidden curved line ...
-        workspace.append(curvedLine);
+    const curvedLine = this._curvedLine;
-        curvedLine.moveToBack();
+    curvedLine.setVisibility(false);
-
+    workspace.append(curvedLine);
-        // Add a connect rect ...
+    curvedLine.moveToBack();
-        var connectRect = this._connectRect;
+
-        connectRect.setVisibility(false);
+    // Add a connect rect ...
-        workspace.append(connectRect);
+    const connectRect = this._connectRect;
-        connectRect.moveToBack();
+    connectRect.setVisibility(false);
-    },
+    workspace.append(connectRect);
-
+    connectRect.moveToBack();
-    removeFromWorkspace : function(workspace) {
+  },
-        var shape = this._getPivotRect();
+
-        workspace.removeChild(shape);
+  removeFromWorkspace(workspace) {
-
+    const shape = this._getPivotRect();
-        var connectToRect = this._connectRect;
+    workspace.removeChild(shape);
-        workspace.removeChild(connectToRect);
+
-
+    const connectToRect = this._connectRect;
-        if ($defined(this._straightLine)) {
+    workspace.removeChild(connectToRect);
-            workspace.removeChild(this._straightLine);
+
-        }
+    if ($defined(this._straightLine)) {
-
+      workspace.removeChild(this._straightLine);
-        if ($defined(this._curvedLine)) {
+    }
-            workspace.removeChild(this._curvedLine);
+
-        }
+    if ($defined(this._curvedLine)) {
-    },
+      workspace.removeChild(this._curvedLine);
-
+    }
-    connectTo : function(targetTopic, position) {
+  },
-        $assert(!this._outgoingLine, 'Could not connect an already connected node');
+
-        $assert(targetTopic != this, 'Circular connection are not allowed');
+  connectTo(targetTopic, position) {
-        $assert(position, 'position can not be null');
+    $assert(!this._outgoingLine, 'Could not connect an already connected node');
-        $assert(targetTopic, 'parent can not be null');
+    $assert(targetTopic != this, 'Circular connection are not allowed');
-
+    $assert(position, 'position can not be null');
-        this._position = position;
+    $assert(targetTopic, 'parent can not be null');
-        this._targetTopic = targetTopic;
+
-
+    this._position = position;
-        // Connected to Rect ...
+    this._targetTopic = targetTopic;
-        var connectRect = this._connectRect;
+
-        var targetSize = targetTopic.getSize();
+    // Connected to Rect ...
-
+    const connectRect = this._connectRect;
-        // Add 4 pixel in order to keep create a rect bigger than the topic.
+    const targetSize = targetTopic.getSize();
-        var width = targetSize.width + 4;
+
-        var height = targetSize.height + 4;
+    // Add 4 pixel in order to keep create a rect bigger than the topic.
-
+    const width = targetSize.width + 4;
-        connectRect.setSize(width, height);
+    const height = targetSize.height + 4;
-
+
-        var targetPosition = targetTopic.getPosition();
+    connectRect.setSize(width, height);
-        var cx = Math.ceil(targetPosition.x - (width / 2));
+
-        var cy = Math.ceil(targetPosition.y - (height / 2));
+    const targetPosition = targetTopic.getPosition();
-        connectRect.setPosition(cx, cy);
+    const cx = Math.ceil(targetPosition.x - (width / 2));
-
+    const cy = Math.ceil(targetPosition.y - (height / 2));
-        // Change elements position ...
+    connectRect.setPosition(cx, cy);
-        var pivotRect = this._getPivotRect();
+
-        pivotRect.moveToFront();
+    // Change elements position ...
-        pivotRect.setPosition(position.x, position.y);
+    const pivotRect = this._getPivotRect();
-
+    pivotRect.moveToFront();
-        this._redrawLine();
+    pivotRect.setPosition(position.x, position.y);
-    },
+
-
+    this._redrawLine();
-    disconnect : function(workspace) {
+  },
-        $assert(workspace, 'workspace can not be null.');
+
-        $assert(this._targetTopic, 'There are not connected topic.');
+  disconnect(workspace) {
-
+    $assert(workspace, 'workspace can not be null.');
-        this.setVisibility(false);
+    $assert(this._targetTopic, 'There are not connected topic.');
-        this._targetTopic = null;
+
-    }
+    this.setVisibility(false);
-});
+    this._targetTopic = null;
-
+  },
-export default DragPivot;
+});
+
+export default DragPivot;

packages/mindplot/lib/components/DragTopic.js

@@ -15,207 +15,206 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js')
+const Core = require('@wismapping/core-js');
+
 const core = Core();
 
-const ActionDispatcher = require('./ActionDispatcher').default
+const ActionDispatcher = require('./ActionDispatcher').default;
 const DragPivot = require('./DragPivot').default;
 
 const DragTopic = new Class({
-    initialize:function (dragShape, draggedNode, layoutManger) {
+  initialize(dragShape, draggedNode, layoutManger) {
-        $assert(dragShape, 'Rect can not be null.');
+    $assert(dragShape, 'Rect can not be null.');
-        $assert(draggedNode, 'draggedNode can not be null.');
+    $assert(draggedNode, 'draggedNode can not be null.');
-        $assert(layoutManger, 'layoutManger can not be null.');
+    $assert(layoutManger, 'layoutManger can not be null.');
 
-        this._elem2d = dragShape;
+    this._elem2d = dragShape;
-        this._order = null;
+    this._order = null;
-        this._draggedNode = draggedNode;
+    this._draggedNode = draggedNode;
-        this._layoutManager = layoutManger;
+    this._layoutManager = layoutManger;
-        this._position = new core.Point();
+    this._position = new core.Point();
-        this._isInWorkspace = false;
+    this._isInWorkspace = false;
-        this._isFreeLayoutEnabled = false;
+    this._isFreeLayoutEnabled = false;
-    },
+  },
 
-    setOrder:function (order) {
+  setOrder(order) {
-        this._order = order;
+    this._order = order;
-    },
+  },
 
-    setPosition:function (x, y) {
+  setPosition(x, y) {
-        // Update drag shadow position ....
+    // Update drag shadow position ....
-        var position = {x:x, y:y};
+    let position = { x, y };
-        if (this.isFreeLayoutOn() && this.isConnected()) {
+    if (this.isFreeLayoutOn() && this.isConnected()) {
-            var _layoutManager = this._layoutManager;
+      const { _layoutManager } = this;
-            var par = this.getConnectedToTopic();
+      const par = this.getConnectedToTopic();
-            position = _layoutManager.predict(par.getId(), this._draggedNode.getId(), position, true).position;
+      position = _layoutManager.predict(par.getId(), this._draggedNode.getId(), position, true).position;
-        }
-        this._position.setValue(position.x, position.y);
-
-        // Elements are positioned in the center.
-        // All topic element must be positioned based on the innerShape.
-        var draggedNode = this._draggedNode;
-        var size = draggedNode.getSize();
-        var cx = position.x - (position.x > 0 ? 0 : size.width);
-        var cy = Math.ceil(position.y - (size.height / 2));
-        this._elem2d.setPosition(cx, cy);
-
-        // In case is not free, pivot must be draw ...
-        if (this.isConnected() && !this.isFreeLayoutOn()) {
-            var parent = this.getConnectedToTopic();
-            var predict = this._layoutManager.predict(parent.getId(), this._draggedNode.getId(), this.getPosition());
-            if (this._order != predict.order) {
-                var dragPivot = this._getDragPivot();
-                var pivotPosition = predict.position;
-                dragPivot.connectTo(parent, pivotPosition);
-                this.setOrder(predict.order);
-            }
-        }
-    },
-
-    updateFreeLayout:function (event) {
-        var isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac);
-        if (this.isFreeLayoutOn() != isFreeEnabled) {
-            var dragPivot = this._getDragPivot();
-            dragPivot.setVisibility(!isFreeEnabled);
-            this._isFreeLayoutEnabled = isFreeEnabled;
-        }
-    },
-
-    setVisibility:function (value) {
-        var dragPivot = this._getDragPivot();
-        dragPivot.setVisibility(value);
-    },
-
-    isVisible:function () {
-        var dragPivot = this._getDragPivot();
-        return dragPivot.isVisible();
-    },
-
-    getInnerShape:function () {
-        return this._elem2d;
-    },
-
-    disconnect:function (workspace) {
-        // Clear connection line ...
-        var dragPivot = this._getDragPivot();
-        dragPivot.disconnect(workspace);
-    },
-
-    connectTo:function (parent) {
-        $assert(parent, 'Parent connection node can not be null.');
-
-        // Where it should be connected ?
-        var predict = designer._eventBussDispatcher._layoutManager.predict(parent.getId(), this._draggedNode.getId(), this.getPosition());
-
-        // Connect pivot ...
-        var dragPivot = this._getDragPivot();
-        var position = predict.position;
-        dragPivot.connectTo(parent, position);
-        dragPivot.setVisibility(true);
-
-        this.setOrder(predict.order);
-    },
-
-    getDraggedTopic:function () {
-        return  this._draggedNode;
-    },
-
-    removeFromWorkspace:function (workspace) {
-        if (this._isInWorkspace) {
-            // Remove drag shadow.
-            workspace.removeChild(this._elem2d);
-
-            // Remove pivot shape. To improve performance it will not be removed. Only the visibility will be changed.
-            var dragPivot = this._getDragPivot();
-            dragPivot.setVisibility(false);
-
-            this._isInWorkspace = false;
-        }
-    },
-
-    isInWorkspace:function () {
-        return this._isInWorkspace;
-    },
-
-    addToWorkspace:function (workspace) {
-        if (!this._isInWorkspace) {
-            workspace.append(this._elem2d);
-            var dragPivot = this._getDragPivot();
-            dragPivot.addToWorkspace(workspace);
-            this._isInWorkspace = true;
-        }
-    },
-
-    _getDragPivot:function () {
-        return DragTopic.__getDragPivot();
-    },
-
-    getPosition:function () {
-        return this._position;
-    },
-
-    isDragTopic:function () {
-        return true;
-    },
-
-    applyChanges:function (workspace) {
-        $assert(workspace, 'workspace can not be null');
-
-
-        var actionDispatcher = ActionDispatcher.getInstance();
-        var draggedTopic = this.getDraggedTopic();
-        var topicId = draggedTopic.getId();
-        var position = this.getPosition();
-
-        if (!this.isFreeLayoutOn()) {
-            var order = null;
-            var parent = null;
-            var isDragConnected = this.isConnected();
-            if (isDragConnected) {
-                var targetTopic = this.getConnectedToTopic();
-                order = this._order;
-                parent = targetTopic;
-            }
-
-            // If the node is not connected, position based on the original drag topic position.
-            actionDispatcher.dragTopic(topicId, position, order, parent);
-        } else {
-            actionDispatcher.moveTopic(topicId, position);
-        }
-    },
-
-    getConnectedToTopic:function () {
-        var dragPivot = this._getDragPivot();
-        return dragPivot.getTargetTopic();
-    },
-
-    isConnected:function () {
-        return this.getConnectedToTopic() != null;
-    },
-
-    isFreeLayoutOn:function () {
-//        return  this._isFreeLayoutEnabled;
-        // Disable free layout ...
-        return false;
     }
+    this._position.setValue(position.x, position.y);
+
+    // Elements are positioned in the center.
+    // All topic element must be positioned based on the innerShape.
+    const draggedNode = this._draggedNode;
+    const size = draggedNode.getSize();
+    const cx = position.x - (position.x > 0 ? 0 : size.width);
+    const cy = Math.ceil(position.y - (size.height / 2));
+    this._elem2d.setPosition(cx, cy);
+
+    // In case is not free, pivot must be draw ...
+    if (this.isConnected() && !this.isFreeLayoutOn()) {
+      const parent = this.getConnectedToTopic();
+      const predict = this._layoutManager.predict(parent.getId(), this._draggedNode.getId(), this.getPosition());
+      if (this._order != predict.order) {
+        const dragPivot = this._getDragPivot();
+        const pivotPosition = predict.position;
+        dragPivot.connectTo(parent, pivotPosition);
+        this.setOrder(predict.order);
+      }
+    }
+  },
+
+  updateFreeLayout(event) {
+    const isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac);
+    if (this.isFreeLayoutOn() != isFreeEnabled) {
+      const dragPivot = this._getDragPivot();
+      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.');
+
+    // Where it should be connected ?
+    const predict = designer._eventBussDispatcher._layoutManager.predict(parent.getId(), this._draggedNode.getId(), this.getPosition());
+
+    // Connect pivot ...
+    const dragPivot = this._getDragPivot();
+    const { position } = predict;
+    dragPivot.connectTo(parent, position);
+    dragPivot.setVisibility(true);
+
+    this.setOrder(predict.order);
+  },
+
+  getDraggedTopic() {
+    return this._draggedNode;
+  },
+
+  removeFromWorkspace(workspace) {
+    if (this._isInWorkspace) {
+      // Remove drag shadow.
+      workspace.removeChild(this._elem2d);
+
+      // Remove pivot shape. To improve performance it will not be removed. Only the visibility will be changed.
+      const dragPivot = this._getDragPivot();
+      dragPivot.setVisibility(false);
+
+      this._isInWorkspace = false;
+    }
+  },
+
+  isInWorkspace() {
+    return this._isInWorkspace;
+  },
+
+  addToWorkspace(workspace) {
+    if (!this._isInWorkspace) {
+      workspace.append(this._elem2d);
+      const dragPivot = this._getDragPivot();
+      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');
+
+    const actionDispatcher = ActionDispatcher.getInstance();
+    const draggedTopic = this.getDraggedTopic();
+    const topicId = draggedTopic.getId();
+    const position = this.getPosition();
+
+    if (!this.isFreeLayoutOn()) {
+      let order = null;
+      let parent = null;
+      const isDragConnected = this.isConnected();
+      if (isDragConnected) {
+        const targetTopic = this.getConnectedToTopic();
+        order = this._order;
+        parent = targetTopic;
+      }
+
+      // If the node is not connected, position based on the original drag topic position.
+      actionDispatcher.dragTopic(topicId, position, order, parent);
+    } 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.PIVOT_SIZE = {width:50, height:6};
+DragTopic.PIVOT_SIZE = { width: 50, height: 6 };
 
 DragTopic.init = function (workspace) {
-
+  $assert(workspace, 'workspace can not be null');
-    $assert(workspace, "workspace can not be null");
+  const pivot = DragTopic.__getDragPivot();
-    var pivot = DragTopic.__getDragPivot();
+  workspace.append(pivot);
-    workspace.append(pivot);
 };
 
 DragTopic.__getDragPivot = function () {
-    var result = DragTopic._dragPivot;
+  let result = DragTopic._dragPivot;
-    if (!$defined(result)) {
+  if (!$defined(result)) {
-        result = new DragPivot();
+    result = new DragPivot();
-        DragTopic._dragPivot = result;
+    DragTopic._dragPivot = result;
-    }
+  }
-    return result;
+  return result;
 };
 
 export default DragTopic;

packages/mindplot/lib/components/EditorOptions.js

@@ -16,11 +16,10 @@
  *   limitations under the License.
  */
 
-const EditorOptions =
+const EditorOptions = {
-{
+  LayoutManager: 'OriginalLayout',
-    LayoutManager:"OriginalLayout",
+  //    LayoutManager:"FreeMindLayout",
-//    LayoutManager:"FreeMindLayout",
+  textEditor: 'TextEditor',
-    textEditor:"TextEditor"
 //    textEditor:"RichTextEditor"
 };
 

packages/mindplot/lib/components/EditorProperties.js

@@ -1,38 +1,38 @@
-/*
+/*
- *    Copyright [2015] [wisemapping]
+ *    Copyright [2015] [wisemapping]
- *
+ *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
- *
+ *
- *       http://www.wisemapping.org/license
+ *       http://www.wisemapping.org/license
- *
+ *
- *   Unless required by applicable law or agreed to in writing, software
+ *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
+ *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *   limitations under the License.
- */
+ */
-
+
-const EditorProperties = new Class({
+const EditorProperties = new Class({
-    initialize: function () {
+  initialize() {
-        this._zoom = 0;
+    this._zoom = 0;
-        this._position = 0;
+    this._position = 0;
-    },
+  },
-
+
-    setZoom: function (zoom) {
+  setZoom(zoom) {
-        this._zoom = zoom;
+    this._zoom = zoom;
-    },
+  },
-
+
-    getZoom: function () {
+  getZoom() {
-        return this._zoom;
+    return this._zoom;
-    },
+  },
-
+
-    asProperties: function () {
+  asProperties() {
-        return "zoom=" + this._zoom + "\n";
+    return `zoom=${this._zoom}\n`;
-    }
+  },
-});
+});
-
+
-export default EditorProperties;
+export default EditorProperties;

packages/mindplot/lib/components/Events.js

@@ -1,45 +1,43 @@
 const Events = new Class({
-    $events: {},
+  $events: {},
 
-    _removeOn: function (string) {
+  _removeOn(string) {
-        return string.replace(/^on([A-Z])/, function (full, first) {
+    return string.replace(/^on([A-Z])/, (full, first) => first.toLowerCase());
-            return first.toLowerCase();
+  },
-        });
-    },
 
-    addEvent: function (type, fn, internal) {
+  addEvent(type, fn, internal) {
-        type = this._removeOn(type);
+    type = this._removeOn(type);
 
-        this.$events[type] = (this.$events[type] || []).include(fn);
+    this.$events[type] = (this.$events[type] || []).include(fn);
-        if (internal) fn.internal = true;
+    if (internal) fn.internal = true;
-        return this;
+    return this;
-    },
+  },
 
-    fireEvent: function (type, args, delay) {
+  fireEvent(type, args, delay) {
-        type = this._removeOn(type);
+    type = this._removeOn(type);
-        var events = this.$events[type];
+    const events = this.$events[type];
-        if (!events) return this;
+    if (!events) return this;
-        args = Array.isArray(args) ? args : [args];
+    args = Array.isArray(args) ? args : [args];
-        _.each(
+    _.each(
-            events,
+      events,
-            function (fn) {
+      function (fn) {
-                if (delay) fn.delay(delay, this, args);
+        if (delay) fn.delay(delay, this, args);
-                else fn.apply(this, args);
+        else fn.apply(this, args);
-            },
+      },
-            this
+      this,
-        );
+    );
-        return this;
+    return this;
-    },
+  },
 
-    removeEvent: function (type, fn) {
+  removeEvent(type, fn) {
-        type = this._removeOn(type);
+    type = this._removeOn(type);
-        var events = this.$events[type];
+    const events = this.$events[type];
-        if (events && !fn.internal) {
+    if (events && !fn.internal) {
-            var index = events.indexOf(fn);
+      const index = events.indexOf(fn);
-            if (index != -1) events.splice(index, 1);
+      if (index != -1) events.splice(index, 1);
-        }
+    }
-        return this;
+    return this;
-    },
+  },
 });
 
 export default Events;

packages/mindplot/lib/components/Icon.js

@@ -15,44 +15,45 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
-const web2d = web2D()
+
+const web2d = web2D();
 
 const Icon = new Class({
-    initialize: function (url) {
+  initialize(url) {
-        $assert(url, 'topic can not be null');
+    $assert(url, 'topic can not be null');
-        this._image = new web2d.Image();
+    this._image = new web2d.Image();
-        this._image.setHref(url);
+    this._image.setHref(url);
-        this._image.setSize(Icon.SIZE, Icon.SIZE);
+    this._image.setSize(Icon.SIZE, Icon.SIZE);
-    },
+  },
 
-    getImage: function () {
+  getImage() {
-        return this._image;
+    return this._image;
-    },
+  },
 
-    setGroup: function (group) {
+  setGroup(group) {
-        this._group = group;
+    this._group = group;
-    },
+  },
 
-    getGroup: function () {
+  getGroup() {
-        return this._group;
+    return this._group;
-    },
+  },
 
-    getSize: function () {
+  getSize() {
-        return this._image.getSize();
+    return this._image.getSize();
-    },
+  },
 
-    getPosition: function () {
+  getPosition() {
-        return this._image.getPosition();
+    return this._image.getPosition();
-    },
+  },
 
-    addEvent: function (type, fnc) {
+  addEvent(type, fnc) {
-        this._image.addEvent(type, fnc);
+    this._image.addEvent(type, fnc);
-    },
+  },
 
-    remove: function () {
+  remove() {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    }
+  },
 });
 
 Icon.SIZE = 90;

packages/mindplot/lib/components/IconGroup.js

@@ -15,157 +15,154 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
+
 const web2d = web2D();
 const Icon = require('./Icon');
 
-const IconGroup = new Class(/**@lends IconGroup */{
+const IconGroup = new Class(/** @lends IconGroup */{
-    /**
+  /**
      * @constructs
      * @param topicId
      * @param iconSize
      * @throws will throw an error if topicId is null or undefined
      * @throws will throw an error if iconSize is null or undefined
      */
-    initialize: function (topicId, iconSize) {
+  initialize(topicId, iconSize) {
-        $assert($defined(topicId), "topicId can not be null");
+    $assert($defined(topicId), 'topicId can not be null');
-        $assert($defined(iconSize), "iconSize can not be null");
+    $assert($defined(iconSize), 'iconSize can not be null');
 
-        this._icons = [];
+    this._icons = [];
-        this._group = new web2d.Group({
+    this._group = new web2d.Group({
-            width: 0,
+      width: 0,
-            height: iconSize,
+      height: iconSize,
-            x: 0,
+      x: 0,
-            y: 0,
+      y: 0,
-            coordSizeWidth: 0,
+      coordSizeWidth: 0,
-            coordSizeHeight: 100
+      coordSizeHeight: 100,
-        });
+    });
-        this._removeTip = new IconGroup.RemoveTip(this._group, topicId);
+    this._removeTip = new IconGroup.RemoveTip(this._group, topicId);
-        this.seIconSize(iconSize, iconSize);
+    this.seIconSize(iconSize, iconSize);
 
-        this._registerListeners();
+    this._registerListeners();
+  },
 
-    },
+  /** */
+  setPosition(x, y) {
+    this._group.setPosition(x, y);
+  },
 
-    /** */
+  /** */
-    setPosition: function (x, y) {
+  getPosition() {
-        this._group.setPosition(x, y);
+    return this._group.getPosition();
-    },
+  },
 
-    /** */
+  /** */
-    getPosition: function () {
+  getNativeElement() {
-        return this._group.getPosition();
+    return this._group;
-    },
+  },
 
-    /** */
+  /** */
-    getNativeElement: function () {
+  getSize() {
-        return this._group;
+    return this._group.getSize();
-    },
+  },
 
-    /** */
+  /** */
-    getSize: function () {
+  seIconSize(width, height) {
-        return this._group.getSize();
+    this._iconSize = { width, height };
-    },
+    this._resize(this._icons.length);
+  },
 
-    /** */
+  /**
-    seIconSize: function (width, height) {
-        this._iconSize = {width: width, height: height};
-        this._resize(this._icons.length);
-    },
-
-    /**
      * @param icon the icon to be added to the icon group
      * @param {Boolean} remove
      * @throws will throw an error if icon is not defined
      */
-    addIcon: function (icon, remove) {
+  addIcon(icon, remove) {
-        $defined(icon, "icon is not defined");
+    $defined(icon, 'icon is not defined');
 
-        icon.setGroup(this);
+    icon.setGroup(this);
-        this._icons.push(icon);
+    this._icons.push(icon);
 
-        // Adjust group and position ...
+    // Adjust group and position ...
-        this._resize(this._icons.length);
+    this._resize(this._icons.length);
-        this._positionIcon(icon, this._icons.length - 1);
+    this._positionIcon(icon, this._icons.length - 1);
 
-        var imageShape = icon.getImage();
+    const imageShape = icon.getImage();
-        this._group.append(imageShape);
+    this._group.append(imageShape);
 
-        // Register event for the group ..
+    // Register event for the group ..
-        if (remove) {
+    if (remove) {
-            this._removeTip.decorate(this._topicId, icon);
+      this._removeTip.decorate(this._topicId, icon);
-        }
-    },
-
-    _findIconFromModel: function (iconModel) {
-        var result = null;
-        _.each(this._icons, function (icon) {
-            var elModel = icon.getModel();
-            if (elModel.getId() == iconModel.getId()) {
-                result = icon;
-            }
-        }, this);
-
-        if (result == null) {
-            throw new Error("Icon can no be found:" + iconModel.getId() + ", Icons:" + this._icons);
-        }
-
-        return result;
-    },
-
-    /** */
-    removeIconByModel: function (featureModel) {
-        $assert(featureModel, "featureModel can not be null");
-
-        var icon = this._findIconFromModel(featureModel);
-        this._removeIcon(icon);
-    },
-
-    _removeIcon: function (icon) {
-        $assert(icon, "icon can not be null");
-
-        this._removeTip.close(0);
-        this._group.removeChild(icon.getImage());
-
-        this._icons.erase(icon);
-        this._resize(this._icons.length);
-        var me = this;
-        // Add all again ...
-        _.each(this._icons, function (elem, i) {
-            me._positionIcon(elem, i);
-        });
-    },
-
-    /** */
-    moveToFront: function () {
-        this._group.moveToFront();
-    },
-
-    _registerListeners: function () {
-        this._group.addEvent('click', function (event) {
-            // Avoid node creation ...
-            event.stopPropagation();
-
-        });
-
-        this._group.addEvent('dblclick', function (event) {
-            event.stopPropagation();
-
-        });
-    },
-
-    _resize: function (iconsLength) {
-        this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
-
-        var iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
-        this._group.setCoordSize(iconsLength * iconSize, iconSize);
-    },
-
-    _positionIcon: function (icon, order) {
-
-        var iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
-        icon.getImage().setPosition(iconSize * order + IconGroup.ICON_PADDING, IconGroup.ICON_PADDING);
     }
+  },
+
+  _findIconFromModel(iconModel) {
+    let result = null;
+    _.each(this._icons, (icon) => {
+      const elModel = icon.getModel();
+      if (elModel.getId() == iconModel.getId()) {
+        result = icon;
+      }
+    }, this);
+
+    if (result == null) {
+      throw new Error(`Icon can no be found:${iconModel.getId()}, Icons:${this._icons}`);
+    }
+
+    return result;
+  },
+
+  /** */
+  removeIconByModel(featureModel) {
+    $assert(featureModel, 'featureModel can not be null');
+
+    const icon = this._findIconFromModel(featureModel);
+    this._removeIcon(icon);
+  },
+
+  _removeIcon(icon) {
+    $assert(icon, 'icon can not be null');
+
+    this._removeTip.close(0);
+    this._group.removeChild(icon.getImage());
+
+    this._icons.erase(icon);
+    this._resize(this._icons.length);
+    const me = this;
+    // Add all again ...
+    _.each(this._icons, (elem, i) => {
+      me._positionIcon(elem, i);
+    });
+  },
+
+  /** */
+  moveToFront() {
+    this._group.moveToFront();
+  },
+
+  _registerListeners() {
+    this._group.addEvent('click', (event) => {
+      // Avoid node creation ...
+      event.stopPropagation();
+    });
+
+    this._group.addEvent('dblclick', (event) => {
+      event.stopPropagation();
+    });
+  },
+
+  _resize(iconsLength) {
+    this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
+
+    const iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
+    this._group.setCoordSize(iconsLength * iconSize, iconSize);
+  },
+
+  _positionIcon(icon, order) {
+    const iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
+    icon.getImage().setPosition(iconSize * order + IconGroup.ICON_PADDING, IconGroup.ICON_PADDING);
+  },
 });
 
 /**
@@ -176,169 +173,164 @@ const IconGroup = new Class(/**@lends IconGroup */{
 IconGroup.ICON_PADDING = 5;
 
 IconGroup.RemoveTip = new Class(/** @lends IconGroup.RemoveTip */{
-    /**
+  /**
      * @classdesc inner class of IconGroup
      * @constructs
      * @param container
      */
-    initialize: function (container) {
+  initialize(container) {
-        $assert(container, "group can not be null");
+    $assert(container, 'group can not be null');
-        this._fadeElem = container;
+    this._fadeElem = container;
-    },
+  },
 
-
+  /**
-    /**
      * @param topicId
      * @param icon
      * @throws will throw an error if icon is null or undefined
      */
-    show: function (topicId, icon) {
+  show(topicId, icon) {
-        $assert(icon, 'icon can not be null');
+    $assert(icon, 'icon can not be null');
 
-        // Nothing to do ...
+    // Nothing to do ...
-        if (this._activeIcon != icon) {
+    if (this._activeIcon != icon) {
-            // If there is an active icon, close it first ...
+      // If there is an active icon, close it first ...
-            if (this._activeIcon) {
+      if (this._activeIcon) {
-                this.close(0);
+        this.close(0);
-            }
+      }
 
-            // Now, let move the position the icon...
+      // Now, let move the position the icon...
-            var pos = icon.getPosition();
+      const pos = icon.getPosition();
 
-            // Register events ...
+      // Register events ...
-            var widget = this._buildWeb2d();
+      const widget = this._buildWeb2d();
-            widget.addEvent('click', function () {
+      widget.addEvent('click', () => {
-                icon.remove();
+        icon.remove();
-            });
+      });
 
-            var me = this;
+      const me = this;
 
-            widget.addEvent('mouseover', function () {
+      widget.addEvent('mouseover', () => {
-                me.show(topicId, icon);
+        me.show(topicId, icon);
-            });
+      });
 
-            widget.addEvent('mouseout', function () {
+      widget.addEvent('mouseout', () => {
-                me.hide();
+        me.hide();
-            });
+      });
 
-            widget.setPosition(pos.x + 80, pos.y - 50);
+      widget.setPosition(pos.x + 80, pos.y - 50);
-            this._fadeElem.append(widget);
+      this._fadeElem.append(widget);
 
-            // Setup current element ...
+      // Setup current element ...
-            this._activeIcon = icon;
+      this._activeIcon = icon;
-            this._widget = widget;
+      this._widget = widget;
+    } else {
+      clearTimeout(this._closeTimeoutId);
+    }
+  },
 
-        } else {
+  /** */
-            clearTimeout(this._closeTimeoutId);
+  hide() {
-        }
+    this.close(200);
-    },
+  },
 
-    /** */
+  /**
-    hide: function () {
-        this.close(200);
-    },
-
-    /**
      * @param delay
      */
-    close: function (delay) {
+  close(delay) {
+    // This is not ok, trying to close the same dialog twice ?
+    if (this._closeTimeoutId) {
+      clearTimeout(this._closeTimeoutId);
+    }
 
-        // This is not ok, trying to close the same dialog twice ?
+    const me = this;
-        if (this._closeTimeoutId) {
+    if (this._activeIcon) {
-            clearTimeout(this._closeTimeoutId)
+      const widget = this._widget;
-        }
+      const close = function () {
+        me._activeIcon = null;
+        me._fadeElem.removeChild(widget);
+        me._widget = null;
+        me._closeTimeoutId = null;
+      };
 
-        var me = this;
+      if (!$defined(delay) || delay == 0) {
-        if (this._activeIcon) {
+        close();
-            var widget = this._widget;
+      } else {
-            var close = function () {
+        this._closeTimeoutId = close.delay(delay);
-                me._activeIcon = null;
+      }
-                me._fadeElem.removeChild(widget);
+    }
-                me._widget = null;
+  },
-                me._closeTimeoutId = null;
-            };
 
-            if (!$defined(delay) || delay == 0) {
+  _buildWeb2d() {
-                close();
+    const result = new web2d.Group({
-            }
+      width: 10,
-            else {
+      height: 10,
-                this._closeTimeoutId = close.delay(delay);
+      x: 0,
-            }
+      y: 0,
-        }
+      coordSizeWidth: 10,
-    },
+      coordSizeHeight: 10,
+    });
 
-    _buildWeb2d: function () {
+    const outerRect = new web2d.Rect(0, {
-        var result = new web2d.Group({
+      x: 0,
-            width: 10,
+      y: 0,
-            height: 10,
+      width: 10,
-            x: 0,
+      height: 10,
-            y: 0,
+      stroke: '0',
-            coordSizeWidth: 10,
+      fillColor: 'black',
-            coordSizeHeight: 10
+    });
-        });
+    result.append(outerRect);
+    outerRect.setCursor('pointer');
 
-        var outerRect = new web2d.Rect(0, {
+    const innerRect = new web2d.Rect(0, {
-            x: 0,
+      x: 1,
-            y: 0,
+      y: 1,
-            width: 10,
+      width: 8,
-            height: 10,
+      height: 8,
-            stroke: '0',
+      stroke: '1 solid white',
-            fillColor: 'black'
+      fillColor: 'gray',
-        });
+    });
-        result.append(outerRect);
+    result.append(innerRect);
-        outerRect.setCursor('pointer');
 
-        var innerRect = new web2d.Rect(0, {
+    const line = new web2d.Line({ stroke: '1 solid white' });
-            x: 1,
+    line.setFrom(1, 1);
-            y: 1,
+    line.setTo(9, 9);
-            width: 8,
+    result.append(line);
-            height: 8,
-            stroke: '1 solid white',
-            fillColor: 'gray'
-        });
-        result.append(innerRect);
 
-        var line = new web2d.Line({stroke: '1 solid white'});
+    const line2 = new web2d.Line({ stroke: '1 solid white' });
-        line.setFrom(1, 1);
+    line2.setFrom(1, 9);
-        line.setTo(9, 9);
+    line2.setTo(9, 1);
-        result.append(line);
+    result.append(line2);
 
-        var line2 = new web2d.Line({stroke: '1 solid white'});
+    // Some events ...
-        line2.setFrom(1, 9);
+    result.addEvent('mouseover', () => {
-        line2.setTo(9, 1);
+      innerRect.setFill('#CC0033');
-        result.append(line2);
+    });
+    result.addEvent('mouseout', () => {
+      innerRect.setFill('gray');
+    });
 
-        // Some events ...
+    result.setSize(50, 50);
-        result.addEvent('mouseover', function () {
+    return result;
-            innerRect.setFill('#CC0033');
+  },
-        });
-        result.addEvent('mouseout', function () {
-            innerRect.setFill('gray');
-        });
 
-        result.setSize(50, 50);
+  /**
-        return result;
-    },
-
-    /**
      * @param topicId
      * @param icon
      */
-    decorate: function (topicId, icon) {
+  decorate(topicId, icon) {
+    const me = this;
 
-        var me = this;
+    if (!icon.__remove) {
+      icon.addEvent('mouseover', () => {
+        me.show(topicId, icon);
+      });
 
-        if (!icon.__remove) {
+      icon.addEvent('mouseout', () => {
-            icon.addEvent('mouseover', function () {
+        me.hide();
-                me.show(topicId, icon);
+      });
-            });
+      icon.__remove = true;
-
-            icon.addEvent('mouseout', function () {
-                me.hide();
-            });
-            icon.__remove = true;
-        }
     }
+  },
 
 });
 

packages/mindplot/lib/components/ImageIcon.js

@@ -19,148 +19,144 @@ const Icon = require('./Icon').default;
 const ActionDispatcher = require('./ActionDispatcher').default;
 
 const ImageIcon = new Class({
-    Extends: Icon,
+  Extends: Icon,
-    initialize: function (topic, iconModel, readOnly) {
+  initialize(topic, iconModel, readOnly) {
-        $assert(iconModel, 'iconModel can not be null');
+    $assert(iconModel, 'iconModel can not be null');
-        $assert(topic, 'topic can not be null');
+    $assert(topic, 'topic can not be null');
 
-        this._topicId = topic.getId();
+    this._topicId = topic.getId();
-        this._featureModel = iconModel;
+    this._featureModel = iconModel;
 
-        // Build graph image representation ...
+    // Build graph image representation ...
-        var iconType = iconModel.getIconType();
+    const iconType = iconModel.getIconType();
-        var imgUrl = this._getImageUrl(iconType);
+    const imgUrl = this._getImageUrl(iconType);
-        this.parent(imgUrl);
+    this.parent(imgUrl);
 
-        if (!readOnly) {
+    if (!readOnly) {
+      // Icon
+      const image = this.getImage();
+      const me = this;
+      image.addEvent('click', () => {
+        const iconType = iconModel.getIconType();
+        const newIconType = me._getNextFamilyIconId(iconType);
+        iconModel.setIconType(newIconType);
 
-            //Icon
+        const imgUrl = me._getImageUrl(newIconType);
-            var image = this.getImage();
+        me._image.setHref(imgUrl);
-            var me = this;
+      });
-            image.addEvent('click', function () {
+      this._image.setCursor('pointer');
-
-                var iconType = iconModel.getIconType();
-                var newIconType = me._getNextFamilyIconId(iconType);
-                iconModel.setIconType(newIconType);
-
-                var imgUrl = me._getImageUrl(newIconType);
-                me._image.setHref(imgUrl);
-
-            });
-            this._image.setCursor('pointer');
-        }
-    },
-
-    _getImageUrl: function (iconId) {
-        return "icons/" + iconId + ".png";
-    },
-
-    getModel: function () {
-        return this._featureModel;
-    },
-
-    _getNextFamilyIconId: function (iconId) {
-
-        var familyIcons = this._getFamilyIcons(iconId);
-        $assert(familyIcons != null, "Family Icon not found!");
-
-        var result = null;
-        for (var i = 0; i < familyIcons.length && result == null; i++) {
-            if (familyIcons[i] == iconId) {
-                //Is last one?
-                if (i == (familyIcons.length - 1)) {
-                    result = familyIcons[0];
-                } else {
-                    result = familyIcons[i + 1];
-                }
-                break;
-            }
-        }
-
-        return result;
-    },
-
-    _getFamilyIcons: function (iconId) {
-        $assert(iconId != null, "id must not be null");
-        $assert(iconId.indexOf("_") != -1, "Invalid icon id (it must contain '_')");
-
-        var result = null;
-        for (var i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i++) {
-            var family = ImageIcon.prototype.ICON_FAMILIES[i];
-            var iconFamilyId = iconId.substr(0, iconId.indexOf("_"));
-
-            if (family.id == iconFamilyId) {
-                result = family.icons;
-                break;
-            }
-        }
-        return result;
-    },
-
-    remove: function () {
-        var actionDispatcher = ActionDispatcher.getInstance();
-        var featureId = this._featureModel.getId();
-        var topicId = this._topicId;
-        actionDispatcher.removeFeatureFromTopic(topicId, featureId);
     }
+  },
+
+  _getImageUrl(iconId) {
+    return `icons/${iconId}.png`;
+  },
+
+  getModel() {
+    return this._featureModel;
+  },
+
+  _getNextFamilyIconId(iconId) {
+    const familyIcons = this._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) {
+        // Is last one?
+        if (i == (familyIcons.length - 1)) {
+          result = familyIcons[0];
+        } else {
+          result = familyIcons[i + 1];
+        }
+        break;
+      }
+    }
+
+    return result;
+  },
+
+  _getFamilyIcons(iconId) {
+    $assert(iconId != null, 'id must not be null');
+    $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) {
+        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"]},
+  { id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] },
-    {"id": "funy", "icons": ["funy_angel", "funy_devilish", "funy_glasses", "funy_grin", "funy_kiss", "funy_monkey"]},
+  { id: 'funy', icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'] },
-    {"id": "conn", "icons": ["conn_connect", "conn_disconnect"]},
+  { id: 'conn', icons: ['conn_connect', 'conn_disconnect'] },
-    {
+  {
-        "id": "sport",
+    id: 'sport',
-        "icons": ["sport_basketball", "sport_football", "sport_golf", "sport_raquet", "sport_shuttlecock", "sport_soccer", "sport_tennis"]
+    icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'],
-    },
+  },
-    {"id": "bulb", "icons": ["bulb_light_on", "bulb_light_off"]},
+  { id: 'bulb', icons: ['bulb_light_on', 'bulb_light_off'] },
-    {"id": "thumb", "icons": ["thumb_thumb_up", "thumb_thumb_down"]},
+  { id: 'thumb', icons: ['thumb_thumb_up', 'thumb_thumb_down'] },
-    {"id": "tick", "icons": ["tick_tick", "tick_cross"]},
+  { id: 'tick', icons: ['tick_tick', 'tick_cross'] },
-    {
+  {
-        "id": "onoff",
+    id: 'onoff',
-        "icons": ["onoff_clock", "onoff_clock_red", "onoff_add", "onoff_delete", "onoff_status_offline", "onoff_status_online"]
+    icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'],
-    },
+  },
-    {
+  {
-        "id": "money",
+    id: 'money',
-        "icons": ["money_money", "money_dollar", "money_euro", "money_pound", "money_yen", "money_coins", "money_ruby"]
+    icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'],
-    },
+  },
-    {"id": "time", "icons": ["time_calendar", "time_clock", "time_hourglass"]},
+  { id: 'time', icons: ['time_calendar', 'time_clock', 'time_hourglass'] },
-    {
+  {
-        "id": "number",
+    id: 'number',
-        "icons": ["number_1", "number_2", "number_3", "number_4", "number_5", "number_6", "number_7", "number_8", "number_9"]
+    icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'],
-    },
+  },
-    {"id": "chart", "icons": ["chart_bar", "chart_line", "chart_curve", "chart_pie", "chart_organisation"]},
+  { id: 'chart', icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'] },
-    {"id": "sign", "icons": ["sign_warning", "sign_info", "sign_stop", "sign_help", "sign_cancel"]},
+  { id: 'sign', icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'] },
-    {
+  {
-        "id": "hard",
+    id: 'hard',
-        "icons": ["hard_cd", "hard_computer", "hard_controller", "hard_driver_disk", "hard_ipod", "hard_keyboard", "hard_mouse", "hard_printer"]
+    icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer'],
-    },
+  },
-    {
+  {
-        "id": "soft",
+    id: 'soft',
-        "icons": ["soft_bug", "soft_cursor", "soft_database_table", "soft_database", "soft_feed", "soft_folder_explore", "soft_rss", "soft_penguin"]
+    icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'],
-    },
+  },
-    {"id": "arrow", "icons": ["arrow_up", "arrow_down", "arrow_left", "arrow_right"]},
+  { id: 'arrow', icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'] },
-    {
+  {
-        "id": "arrowc",
+    id: 'arrowc',
-        "icons": ["arrowc_rotate_anticlockwise", "arrowc_rotate_clockwise", "arrowc_turn_left", "arrowc_turn_right"]
+    icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'],
-    },
+  },
-    {"id": "people", "icons": ["people_group", "people_male1", "people_male2", "people_female1", "people_female2"]},
+  { id: 'people', icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'] },
-    {"id": "mail", "icons": ["mail_envelop", "mail_mailbox", "mail_edit", "mail_list"]},
+  { id: 'mail', icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'] },
-    {"id": "flag", "icons": ["flag_blue", "flag_green", "flag_orange", "flag_pink", "flag_purple", "flag_yellow"]},
+  { id: 'flag', icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'] },
-    {
+  {
-        "id": "bullet",
+    id: 'bullet',
-        "icons": ["bullet_black", "bullet_blue", "bullet_green", "bullet_orange", "bullet_red", "bullet_pink", "bullet_purple"]
+    icons: ['bullet_black', 'bullet_blue', 'bullet_green', 'bullet_orange', 'bullet_red', 'bullet_pink', 'bullet_purple'],
-    },
+  },
-    {"id": "tag", "icons": ["tag_blue", "tag_green", "tag_orange", "tag_red", "tag_pink", "tag_yellow"]},
+  { id: 'tag', icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'] },
-    {
+  {
-        "id": "object",
+    id: 'object',
-        "icons": ["object_bell", "object_clanbomber", "object_key", "object_pencil", "object_phone", "object_magnifier", "object_clip", "object_music", "object_star", "object_wizard", "object_house", "object_cake", "object_camera", "object_palette", "object_rainbow"]
+    icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip', 'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow'],
-    },
+  },
-    {
+  {
-        "id": "weather",
+    id: 'weather',
-        "icons": ["weather_clear-night", "weather_clear", "weather_few-clouds-night", "weather_few-clouds", "weather_overcast", "weather_severe-alert", "weather_showers-scattered", "weather_showers", "weather_snow", "weather_storm"]
+    icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'],
-    },
+  },
-    {"id": "task", "icons": ["task_0", "task_25", "task_50", "task_75", "task_100"]}
+  { id: 'task', icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'] },
 ];
 
 export default ImageIcon;

packages/mindplot/lib/components/Keyboard.js

@@ -18,17 +18,17 @@
 
 const Keyboard = new Class({
 
-    initialize: function () {
+  initialize() {
-    },
+  },
 
-    addShortcut: function (shortcuts, callback) {
+  addShortcut(shortcuts, callback) {
-        if (!$.isArray(shortcuts)) {
+    if (!$.isArray(shortcuts)) {
-            shortcuts = [shortcuts];
+      shortcuts = [shortcuts];
-        }
-        _.each(shortcuts, function (shortcut) {
-            $(document).bind('keydown', shortcut, callback);
-        });
     }
+    _.each(shortcuts, (shortcut) => {
+      $(document).bind('keydown', shortcut, callback);
+    });
+  },
 
 });
 

packages/mindplot/lib/components/LinkIcon.js

@@ -20,53 +20,51 @@ const LinkIconTooltip = require('./widget/LinkIconTooltip').default;
 
 const LinkIcon = new Class({
 
-    Extends: Icon,
+  Extends: Icon,
-    initialize: function (topic, linkModel, readOnly) {
+  initialize(topic, linkModel, readOnly) {
-        $assert(topic, 'topic can not be null');
+    $assert(topic, 'topic can not be null');
-        $assert(linkModel, 'linkModel can not be null');
+    $assert(linkModel, 'linkModel can not be null');
 
-        this.parent(LinkIcon.IMAGE_URL);
+    this.parent(LinkIcon.IMAGE_URL);
-        this._linksModel = linkModel;
+    this._linksModel = linkModel;
-        this._topic = topic;
+    this._topic = topic;
-        this._readOnly = readOnly;
+    this._readOnly = readOnly;
 
-        this._registerEvents();
+    this._registerEvents();
-    },
+  },
 
-    _registerEvents: function () {
+  _registerEvents() {
-        this._image.setCursor('pointer');
+    this._image.setCursor('pointer');
-        this._tip = new LinkIconTooltip(this);
+    this._tip = new LinkIconTooltip(this);
 
-        var me = this;
+    const me = this;
-        if (!this._readOnly) {
+    if (!this._readOnly) {
-            // Add on click event to open the editor ...
+      // Add on click event to open the editor ...
-            this.addEvent('click', function (event) {
+      this.addEvent('click', (event) => {
-                me._tip.hide();
+        me._tip.hide();
-                me._topic.showLinkEditor();
+        me._topic.showLinkEditor();
-                event.stopPropagation();
+        event.stopPropagation();
-            });
+      });
-            //FIXME: we shouldn't have timeout of that..
+      // FIXME: we shouldn't have timeout of that..
-            this.addEvent("mouseleave", function (event) {
+      this.addEvent('mouseleave', (event) => {
-                window.setTimeout(function () {
+        window.setTimeout(() => {
-                    if (!$("#linkPopover:hover").length) {
+          if (!$('#linkPopover:hover').length) {
-                        me._tip.hide();
+            me._tip.hide();
-                    }
+          }
-                    event.stopPropagation();
+          event.stopPropagation();
-                }, 100)
+        }, 100);
-            });
+      });
-        }
-
-        $(this.getImage()._peer._native).mouseenter(function () {
-            me._tip.show();
-        })
-    },
-
-    getModel: function () {
-        return this._linksModel;
     }
+
+    $(this.getImage()._peer._native).mouseenter(() => {
+      me._tip.show();
+    });
+  },
+
+  getModel() {
+    return this._linksModel;
+  },
 });
-LinkIcon.IMAGE_URL = "images/links.png";
+LinkIcon.IMAGE_URL = 'images/links.png';
 
 export default LinkIcon;
-
- 

packages/mindplot/lib/components/LocalStorageManager.js

@@ -18,47 +18,46 @@
 const PersistenceManager = require('./PersistenceManager').default;
 
 const LocalStorageManager = new Class({
-        Extends: PersistenceManager,
+  Extends: PersistenceManager,
-        initialize: function (documentUrl, forceLoad) {
+  initialize(documentUrl, forceLoad) {
-            this.parent();
+    this.parent();
-            this.documentUrl = documentUrl;
+    this.documentUrl = documentUrl;
-            this.forceLoad = forceLoad;
+    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`);
+    if (xml == null || this.forceLoad) {
+      $.ajax({
+        url: this.documentUrl.replace('{id}', mapId),
+        headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' },
+        type: 'get',
+        dataType: 'text',
+        async: false,
+        success(response) {
+          xml = response;
         },
-
+      });
-        saveMapXml: function (mapId, mapXml, pref, saveHistory, events) {
+      // If I could not load it from a file, hard code one.
-            localStorage.setItem(mapId + "-xml", mapXml);
+      if (xml == null) {
-        },
+        throw new Error('Map could not be loaded');
-
+      }
-        discardChanges: function (mapId) {
-            localStorage.removeItem(mapId + "-xml");
-        },
-
-        loadMapDom: function (mapId) {
-            var xml = localStorage.getItem(mapId + "-xml");
-            if (xml == null || this.forceLoad) {
-                $.ajax({
-                    url: this.documentUrl.replace("{id}", mapId),
-                    headers: {"Content-Type": "text/plain", "Accept": "application/xml"},
-                    type: 'get',
-                    dataType: "text",
-                    async: false,
-                    success: function (response) {
-                        xml = response;
-                    }
-                });
-                // If I could not load it from a file, hard code one.
-                if (xml == null) {
-                    throw new Error("Map could not be loaded");
-                }
-            }
-
-            return jQuery.parseXML(xml);
-        },
-
-        unlockMap: function (mindmap) {
-            // Ignore, no implementation required ...
-        }
     }
-);
+
+    return jQuery.parseXML(xml);
+  },
+
+  unlockMap(mindmap) {
+    // Ignore, no implementation required ...
+  },
+});
 
 export default LocalStorageManager;

packages/mindplot/lib/components/MainTopic.js

@@ -1,169 +1,170 @@
-/*
+/*
- *    Copyright [2015] [wisemapping]
+ *    Copyright [2015] [wisemapping]
- *
+ *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
- *
+ *
- *       http://www.wisemapping.org/license
+ *       http://www.wisemapping.org/license
- *
+ *
- *   Unless required by applicable law or agreed to in writing, software
+ *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
+ *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *   limitations under the License.
- */
+ */
-const Core = require('@wismapping/core-js')
+const Core = require('@wismapping/core-js');
-const core = Core();
+
-const web2D = require('@wismapping/web2d');
+const core = Core();
-const web2d = web2D();
+const web2D = require('@wismapping/web2d');
-
+
-const Topic = require('./Topic').default;
+const web2d = web2D();
-const { TopicShape } = require('./model/INodeModel');
+
-const Shape = require('./util/Shape').default;
+const Topic = require('./Topic').default;
-
+const { TopicShape } = require('./model/INodeModel');
-const MainTopic = new Class(/** @lends MainTopic */ {
+const Shape = require('./util/Shape').default;
-        Extends: Topic,
+
-        /**
+const MainTopic = new Class(/** @lends MainTopic */ {
-         * @extends mindplot.Topic
+  Extends: Topic,
-         * @constructs
+  /**
-         * @param model
+         * @extends mindplot.Topic
-         * @param options
+         * @constructs
-         */
+         * @param model
-        initialize: function (model, options) {
+         * @param options
-            this.parent(model, options);
+         */
-        },
+  initialize(model, options) {
-
+    this.parent(model, options);
-        INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
+  },
-
+
-        _buildDragShape: function () {
+  INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
-            var innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
+
-            var size = this.getSize();
+  _buildDragShape() {
-            innerShape.setSize(size.width, size.height);
+    const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
-            innerShape.setPosition(0, 0);
+    const size = this.getSize();
-            innerShape.setOpacity(0.5);
+    innerShape.setSize(size.width, size.height);
-            innerShape.setCursor('default');
+    innerShape.setPosition(0, 0);
-            innerShape.setVisibility(true);
+    innerShape.setOpacity(0.5);
-
+    innerShape.setCursor('default');
-            var brColor = this.getBorderColor();
+    innerShape.setVisibility(true);
-            innerShape.setAttribute('strokeColor', brColor);
+
-
+    const brColor = this.getBorderColor();
-            var bgColor = this.getBackgroundColor();
+    innerShape.setAttribute('strokeColor', brColor);
-            innerShape.setAttribute('fillColor', bgColor);
+
-
+    const bgColor = this.getBackgroundColor();
-            //  Create group ...
+    innerShape.setAttribute('fillColor', bgColor);
-            var groupAttributes = {
+
-                width: 100,
+    //  Create group ...
-                height: 100,
+    const groupAttributes = {
-                coordSizeWidth: 100,
+      width: 100,
-                coordSizeHeight: 100,
+      height: 100,
-            };
+      coordSizeWidth: 100,
-            var group = new web2d.Group(groupAttributes);
+      coordSizeHeight: 100,
-            group.append(innerShape);
+    };
-
+    const group = new web2d.Group(groupAttributes);
-            // Add Text ...
+    group.append(innerShape);
-            if (this.getShapeType() != TopicShape.IMAGE) {
+
-                var textShape = this._buildTextShape(true);
+    // Add Text ...
-                var text = this.getText();
+    if (this.getShapeType() != TopicShape.IMAGE) {
-                textShape.setText(text);
+      const textShape = this._buildTextShape(true);
-                textShape.setOpacity(0.5);
+      const text = this.getText();
-                group.append(textShape);
+      textShape.setText(text);
-            }
+      textShape.setOpacity(0.5);
-            return group;
+      group.append(textShape);
-        },
+    }
-
+    return group;
-        /** */
+  },
-        updateTopicShape: function (targetTopic, workspace) {
+
-            // Change figure based on the connected topic ...
+  /** */
-            var model = this.getModel();
+  updateTopicShape(targetTopic, workspace) {
-            var shapeType = model.getShapeType();
+    // Change figure based on the connected topic ...
-            if (!targetTopic.isCentralTopic()) {
+    const model = this.getModel();
-                if (!$defined(shapeType)) {
+    let shapeType = model.getShapeType();
-                    // Get the real shape type ...
+    if (!targetTopic.isCentralTopic()) {
-                    shapeType = this.getShapeType();
+      if (!$defined(shapeType)) {
-                    this._setShapeType(shapeType, false);
+        // Get the real shape type ...
-                }
+        shapeType = this.getShapeType();
-            }
+        this._setShapeType(shapeType, false);
-        },
+      }
-
+    }
-        /** */
+  },
-        disconnect: function (workspace) {
+
-            this.parent(workspace);
+  /** */
-            var size = this.getSize();
+  disconnect(workspace) {
-
+    this.parent(workspace);
-            var model = this.getModel();
+    const size = this.getSize();
-            var shapeType = model.getShapeType();
+
-            if (!$defined(shapeType)) {
+    const model = this.getModel();
-                // Change figure ...
+    let shapeType = model.getShapeType();
-                shapeType = this.getShapeType();
+    if (!$defined(shapeType)) {
-                this._setShapeType(TopicShape.ROUNDED_RECT, false);
+      // Change figure ...
-            }
+      shapeType = this.getShapeType();
-            var innerShape = this.getInnerShape();
+      this._setShapeType(TopicShape.ROUNDED_RECT, false);
-            innerShape.setVisibility(true);
+    }
-        },
+    const innerShape = this.getInnerShape();
-
+    innerShape.setVisibility(true);
-        _updatePositionOnChangeSize: function (oldSize, newSize) {
+  },
-            var xOffset = Math.round((newSize.width - oldSize.width) / 2);
+
-            var pos = this.getPosition();
+  _updatePositionOnChangeSize(oldSize, newSize) {
-            if ($defined(pos)) {
+    const xOffset = Math.round((newSize.width - oldSize.width) / 2);
-                if (pos.x > 0) {
+    const pos = this.getPosition();
-                    pos.x = pos.x + xOffset;
+    if ($defined(pos)) {
-                } else {
+      if (pos.x > 0) {
-                    pos.x = pos.x - xOffset;
+        pos.x += xOffset;
-                }
+      } else {
-                this.setPosition(pos);
+        pos.x -= xOffset;
-            }
+      }
-        },
+      this.setPosition(pos);
-
+    }
-        /** */
+  },
-        workoutIncomingConnectionPoint: function (sourcePosition) {
+
-            return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
+  /** */
-        },
+  workoutIncomingConnectionPoint(sourcePosition) {
-
+    return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
-        /** */
+  },
-        workoutOutgoingConnectionPoint: function (targetPosition) {
+
-            $assert(targetPosition, 'targetPoint can not be null');
+  /** */
-            var pos = this.getPosition();
+  workoutOutgoingConnectionPoint(targetPosition) {
-            var isAtRight = Shape.isAtRight(targetPosition, pos);
+    $assert(targetPosition, 'targetPoint can not be null');
-            var size = this.getSize();
+    const pos = this.getPosition();
-
+    const isAtRight = Shape.isAtRight(targetPosition, pos);
-            var result;
+    const size = this.getSize();
-            if (this.getShapeType() == TopicShape.LINE) {
+
-                result = new core.Point();
+    let result;
-                var groupPosition = this._elem2d.getPosition();
+    if (this.getShapeType() == TopicShape.LINE) {
-                var innerShareSize = this.getInnerShape().getSize();
+      result = new core.Point();
-
+      const groupPosition = this._elem2d.getPosition();
-                if (innerShareSize) {
+      const innerShareSize = this.getInnerShape().getSize();
-                    var magicCorrectionNumber = 0.3;
+
-                    if (!isAtRight) {
+      if (innerShareSize) {
-                        result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
+        const magicCorrectionNumber = 0.3;
-                    } else {
+        if (!isAtRight) {
-                        result.x = groupPosition.x + magicCorrectionNumber;
+          result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
-                    }
+        } else {
-                    result.y = groupPosition.y + innerShareSize.height;
+          result.x = groupPosition.x + magicCorrectionNumber;
-                } else {
+        }
-                    // Hack: When the size has not being defined. This is because the node has not being added.
+        result.y = groupPosition.y + innerShareSize.height;
-                    // Try to do our best ...
+      } else {
-                    if (!isAtRight) {
+        // Hack: When the size has not being defined. This is because the node has not being added.
-                        result.x = pos.x + size.width / 2;
+        // Try to do our best ...
-                    } else {
+        if (!isAtRight) {
-                        result.x = pos.x - size.width / 2;
+          result.x = pos.x + size.width / 2;
-                    }
+        } else {
-                    result.y = pos.y + size.height / 2;
+          result.x = pos.x - size.width / 2;
-                }
+        }
-            } else {
+        result.y = pos.y + size.height / 2;
-                result = Shape.calculateRectConnectionPoint(
+      }
-                    pos,
+    } else {
-                    size,
+      result = Shape.calculateRectConnectionPoint(
-                    isAtRight,
+        pos,
-                    true
+        size,
-                );
+        isAtRight,
-            }
+        true,
-            return result;
+      );
-        },
+    }
-    }
+    return result;
-);
+  },
-
+});
-export default MainTopic;
+
+export default MainTopic;

packages/mindplot/lib/components/Messages.js

@@ -17,27 +17,27 @@
  */
 
 const Messages = new Class({
-    Static: {
+  Static: {
-        init: function (locale) {
+    init(locale) {
-            locale = $defined(locale) ? locale : 'en';
+      locale = $defined(locale) ? locale : 'en';
-            var bundle = Messages.BUNDLES[locale];
+      let bundle = Messages.BUNDLES[locale];
-            if (bundle == null && locale.indexOf('_') != -1) {
+      if (bundle == null && locale.indexOf('_') != -1) {
-                // Try to locate without the specialization ...
+        // Try to locate without the specialization ...
-                locale = locale.substring(0, locale.indexOf('_'));
+        locale = locale.substring(0, locale.indexOf('_'));
-                bundle = Messages.BUNDLES[locale];
+        bundle = Messages.BUNDLES[locale];
-            }
+      }
-            Messages.__bundle = bundle;
+      Messages.__bundle = bundle;
-        },
     },
+  },
 });
 
 global.$msg = function (key) {
-    if (!Messages.__bundle) {
+  if (!Messages.__bundle) {
-        Messages.init('en');
+    Messages.init('en');
-    }
+  }
 
-    var msg = Messages.__bundle[key];
+  const msg = Messages.__bundle[key];
-    return msg ? msg : key;
+  return msg || key;
 };
 
 Messages.BUNDLES = {};

packages/mindplot/lib/components/MultilineTextEditor.js

@@ -19,298 +19,285 @@ const Events = require('./Events').default;
 const ActionDispatcher = require('./ActionDispatcher').default;
 
 const MultilineTextEditor = new Class({
-    Extends: Events,
+  Extends: Events,
-    initialize: function () {
+  initialize() {
-        this._topic = null;
+    this._topic = null;
-        this._timeoutId = -1;
+    this._timeoutId = -1;
-    },
+  },
 
-    _buildEditor: function () {
+  _buildEditor() {
+    const result = $('<div></div>')
+      .attr('id', 'textContainer')
+      .css({
+        display: 'none',
+        zIndex: '8',
+        overflow: 'hidden',
+        border: '0 none',
+      });
 
-        var result = $('<div></div>')
+    const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
-            .attr('id', 'textContainer')
+      .css({
-            .css({
+        border: '1px gray dashed',
-                display: "none",
+        background: 'rgba(98, 135, 167, .3)',
-                zIndex: "8",
+        outline: '0 none',
-                overflow: "hidden",
+        resize: 'none',
-                border: "0 none"
+        overflow: 'hidden',
-            });
+      });
 
+    result.append(textareaElem);
+    return result;
+  },
 
-        var textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
+  _registerEvents(containerElem) {
-            .css({
+    const textareaElem = this._getTextareaElem();
-                border: "1px gray dashed",
+    const me = this;
-                background: "rgba(98, 135, 167, .3)",
+    textareaElem.on('keydown', function (event) {
-                outline: '0 none',
+      switch (jQuery.hotkeys.specialKeys[event.keyCode]) {
-                resize: 'none',
+        case 'esc':
-                overflow: "hidden"
+          me.close(false);
-            });
+          break;
-
+        case 'enter':
-        result.append(textareaElem);
+          if (event.metaKey || event.ctrlKey) {
-        return result;
+            // Add return ...
-    },
+            const text = textareaElem.val();
-
+            let cursorPosition = text.length;
-    _registerEvents: function (containerElem) {
+            if (textareaElem.selectionStart) {
-        var textareaElem = this._getTextareaElem();
+              cursorPosition = textareaElem.selectionStart;
-        var me = this;
-        textareaElem.on('keydown', function (event) {
-            switch (jQuery.hotkeys.specialKeys[event.keyCode]) {
-                case 'esc':
-                    me.close(false);
-                    break;
-                case 'enter':
-                    if (event.metaKey || event.ctrlKey) {
-
-                        // Add return ...
-                        var text = textareaElem.val();
-                        var cursorPosition = text.length;
-                        if (textareaElem.selectionStart) {
-                            cursorPosition = textareaElem.selectionStart;
-                        }
-
-                        var head = text.substring(0, cursorPosition);
-                        var tail = "";
-                        if (cursorPosition < text.length) {
-                            tail = text.substring(cursorPosition, text.length);
-                        }
-                        textareaElem.val(head + "\n" + tail);
-
-                        // Position cursor ...
-                        if (textareaElem[0].setSelectionRange) {
-                            textareaElem.focus();
-                            textareaElem[0].setSelectionRange(cursorPosition + 1, cursorPosition + 1);
-                        } else if (textareaElem.createTextRange) {
-                            var range = textareaElem.createTextRange();
-                            range.moveStart('character', cursorPosition + 1);
-                            range.select();
-                        }
-
-                    }
-                    else {
-                        me.close(true);
-                    }
-                    break;
-                case 'tab':
-                    event.preventDefault();
-                    var start = $(this).get(0).selectionStart;
-                    var end = $(this).get(0).selectionEnd;
-
-                    // set textarea value to: text before caret + tab + text after caret
-                    $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));
-
-                    // put caret at right position again
-                    $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
-                    break;
-            }
-            event.stopPropagation();
-        });
-
-        textareaElem.on('keypress', function (event) {
-            event.stopPropagation();
-        });
-
-        textareaElem.on('keyup', function (event) {
-            var text = me._getTextareaElem().val();
-            me.fireEvent('input', [event, text]);
-            me._adjustEditorSize();
-        });
-
-        // If the user clicks on the input, all event must be ignored ...
-        containerElem.on('click', function (event) {
-            event.stopPropagation();
-        });
-        containerElem.on('dblclick', function (event) {
-            event.stopPropagation();
-        });
-        containerElem.on('mousedown', function (event) {
-            event.stopPropagation();
-        });
-    },
-
-    _adjustEditorSize: function () {
-
-        if (this.isVisible()) {
-            var textElem = this._getTextareaElem();
-
-            var lines = textElem.val().split('\n');
-            var maxLineLength = 1;
-            _.each(lines, function (line) {
-                if (maxLineLength < line.length)
-                    maxLineLength = line.length;
-            });
-
-            textElem.attr('cols', maxLineLength);
-            textElem.attr('rows', lines.length);
-
-            this._containerElem.css({
-                width: (maxLineLength + 3) + 'em',
-                height: textElem.height()
-            });
-        }
-    },
-
-    isVisible: function () {
-        return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
-    },
-
-    _updateModel: function () {
-
-        if (this._topic.getText() != this._getText()) {
-            var text = this._getText();
-            var topicId = this._topic.getId();
-
-            var actionDispatcher = ActionDispatcher.getInstance();
-            actionDispatcher.changeTextToTopic([topicId], text);
-        }
-    },
-
-    show: function (topic, text) {
-        // Close a previous node editor if it's opened ...
-        if (this._topic) {
-            this.close(false);
-        }
-
-        this._topic = topic;
-        if (!this.isVisible()) {
-            //Create editor ui
-            var containerElem = this._buildEditor();
-            $('body').append(containerElem);
-
-            this._containerElem = containerElem;
-            this._registerEvents(containerElem);
-            this._showEditor(text);
-        }
-    },
-
-    _showEditor: function (defaultText) {
-
-        var topic = this._topic;
-
-        // Hide topic text ...
-        topic.getTextShape().setVisibility(false);
-
-        // Set Editor Style
-        var nodeText = topic.getTextShape();
-        var font = nodeText.getFont();
-        font.size = nodeText.getHtmlFontSize();
-        font.color = nodeText.getColor();
-        this._setStyle(font);
-        var me = this;
-        // Set editor's initial size
-        var displayFunc = function () {
-            // Position the editor and set the size...
-            var textShape = topic.getTextShape();
-
-            me._containerElem.css('display', 'block');
-
-            //FIXME: Im not sure if this is best way...
-            var shapePosition = textShape.getNativePosition();
-            me._containerElem.offset(shapePosition);
-
-            // Set editor's initial text ...
-            var text = $defined(defaultText) ? defaultText : topic.getText();
-            me._setText(text);
-
-            // Set the element focus and select the current text ...
-            var inputElem = me._getTextareaElem();
-            me._positionCursor(inputElem, !$defined(defaultText));
-
-        };
-
-        this._timeoutId = displayFunc.delay(10);
-    },
-
-    _setStyle: function (fontStyle) {
-        var inputField = this._getTextareaElem();
-        if (!$defined(fontStyle.font)) {
-            fontStyle.font = "Arial";
-        }
-        if (!$defined(fontStyle.style)) {
-            fontStyle.style = "normal";
-        }
-        if (!$defined(fontStyle.weight)) {
-            fontStyle.weight = "normal";
-        }
-        if (!$defined(fontStyle.size)) {
-            fontStyle.size = 12;
-        }
-        var style = {
-            fontSize: fontStyle.size + "px",
-            fontFamily: fontStyle.font,
-            fontStyle: fontStyle.style,
-            fontWeight: fontStyle.weight,
-            color: fontStyle.color
-        };
-        inputField.css(style);
-        this._containerElem.css(style);
-    },
-
-    _setText: function (text) {
-        var textareaElem = this._getTextareaElem();
-        textareaElem.val(text);
-        this._adjustEditorSize();
-    },
-
-    _getText: function () {
-        return this._getTextareaElem().val();
-    },
-
-    _getTextareaElem: function () {
-        return this._containerElem.find('textarea');
-    },
-
-    _positionCursor: function (textareaElem, selectText) {
-        textareaElem.focus();
-        var lengh = textareaElem.val().length;
-        if (selectText) {
-            // Mark text as selected ...
-            if (textareaElem.createTextRange) {
-                var rang = textareaElem.createTextRange();
-                rang.select();
-                rang.move("character", lengh);
-            }
-            else {
-                textareaElem[0].setSelectionRange(0, lengh);
             }
 
-        } else {
+            const head = text.substring(0, cursorPosition);
-            // Move the cursor to the last character ..
+            let tail = '';
-            if (textareaElem.createTextRange) {
+            if (cursorPosition < text.length) {
-                var range = textareaElem.createTextRange();
+              tail = text.substring(cursorPosition, text.length);
-                range.move("character", lengh);
-            } else {
-                if (Browser.ie11) {
-                    textareaElem[0].selectionStart = lengh;
-                    textareaElem[0].selectionEnd = lengh;
-                } else {
-                    textareaElem.selectionStart = lengh;
-                    textareaElem.selectionEnd = lengh;
-                }
-                textareaElem.focus();
             }
-        }
+            textareaElem.val(`${head}\n${tail}`);
 
-    },
+            // Position cursor ...
-
+            if (textareaElem[0].setSelectionRange) {
-    close: function (update) {
+              textareaElem.focus();
-        if (this.isVisible() && this._topic) {
+              textareaElem[0].setSelectionRange(cursorPosition + 1, cursorPosition + 1);
-            // Update changes ...
+            } else if (textareaElem.createTextRange) {
-            clearTimeout(this._timeoutId);
+              const range = textareaElem.createTextRange();
-
+              range.moveStart('character', cursorPosition + 1);
-            if (!$defined(update) || update) {
+              range.select();
-                this._updateModel();
             }
+          } else {
+            me.close(true);
+          }
+          break;
+        case 'tab':
+          event.preventDefault();
+          var start = $(this).get(0).selectionStart;
+          var end = $(this).get(0).selectionEnd;
 
-            // Let make the visible text in the node visible again ...
+          // set textarea value to: text before caret + tab + text after caret
-            this._topic.getTextShape().setVisibility(true);
+          $(this).val(`${$(this).val().substring(0, start)}\t${$(this).val().substring(end)}`);
 
-            // Remove it form the screen ...
+          // put caret at right position again
-            this._containerElem.remove();
+          $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
-            this._containerElem = null;
+          break;
-            this._timeoutId = -1;
+      }
-        }
+      event.stopPropagation();
-        this._topic = null;
+    });
+
+    textareaElem.on('keypress', (event) => {
+      event.stopPropagation();
+    });
+
+    textareaElem.on('keyup', (event) => {
+      const text = me._getTextareaElem().val();
+      me.fireEvent('input', [event, text]);
+      me._adjustEditorSize();
+    });
+
+    // If the user clicks on the input, all event must be ignored ...
+    containerElem.on('click', (event) => {
+      event.stopPropagation();
+    });
+    containerElem.on('dblclick', (event) => {
+      event.stopPropagation();
+    });
+    containerElem.on('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  },
+
+  _adjustEditorSize() {
+    if (this.isVisible()) {
+      const textElem = this._getTextareaElem();
+
+      const lines = textElem.val().split('\n');
+      let maxLineLength = 1;
+      _.each(lines, (line) => {
+        if (maxLineLength < line.length) maxLineLength = line.length;
+      });
+
+      textElem.attr('cols', maxLineLength);
+      textElem.attr('rows', lines.length);
+
+      this._containerElem.css({
+        width: `${maxLineLength + 3}em`,
+        height: textElem.height(),
+      });
     }
+  },
+
+  isVisible() {
+    return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
+  },
+
+  _updateModel() {
+    if (this._topic.getText() != this._getText()) {
+      const text = this._getText();
+      const topicId = this._topic.getId();
+
+      const actionDispatcher = ActionDispatcher.getInstance();
+      actionDispatcher.changeTextToTopic([topicId], text);
+    }
+  },
+
+  show(topic, text) {
+    // Close a previous node editor if it's opened ...
+    if (this._topic) {
+      this.close(false);
+    }
+
+    this._topic = topic;
+    if (!this.isVisible()) {
+      // Create editor ui
+      const containerElem = this._buildEditor();
+      $('body').append(containerElem);
+
+      this._containerElem = containerElem;
+      this._registerEvents(containerElem);
+      this._showEditor(text);
+    }
+  },
+
+  _showEditor(defaultText) {
+    const topic = this._topic;
+
+    // Hide topic text ...
+    topic.getTextShape().setVisibility(false);
+
+    // Set Editor Style
+    const nodeText = topic.getTextShape();
+    const font = nodeText.getFont();
+    font.size = nodeText.getHtmlFontSize();
+    font.color = nodeText.getColor();
+    this._setStyle(font);
+    const me = this;
+    // Set editor's initial size
+    const displayFunc = function () {
+      // Position the editor and set the size...
+      const textShape = topic.getTextShape();
+
+      me._containerElem.css('display', 'block');
+
+      // FIXME: Im not sure if this is best way...
+      const shapePosition = textShape.getNativePosition();
+      me._containerElem.offset(shapePosition);
+
+      // Set editor's initial text ...
+      const text = $defined(defaultText) ? defaultText : topic.getText();
+      me._setText(text);
+
+      // Set the element focus and select the current text ...
+      const inputElem = me._getTextareaElem();
+      me._positionCursor(inputElem, !$defined(defaultText));
+    };
+
+    this._timeoutId = displayFunc.delay(10);
+  },
+
+  _setStyle(fontStyle) {
+    const inputField = this._getTextareaElem();
+    if (!$defined(fontStyle.font)) {
+      fontStyle.font = 'Arial';
+    }
+    if (!$defined(fontStyle.style)) {
+      fontStyle.style = 'normal';
+    }
+    if (!$defined(fontStyle.weight)) {
+      fontStyle.weight = 'normal';
+    }
+    if (!$defined(fontStyle.size)) {
+      fontStyle.size = 12;
+    }
+    const style = {
+      fontSize: `${fontStyle.size}px`,
+      fontFamily: fontStyle.font,
+      fontStyle: fontStyle.style,
+      fontWeight: fontStyle.weight,
+      color: fontStyle.color,
+    };
+    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();
+    const lengh = textareaElem.val().length;
+    if (selectText) {
+      // Mark text as selected ...
+      if (textareaElem.createTextRange) {
+        const rang = textareaElem.createTextRange();
+        rang.select();
+        rang.move('character', lengh);
+      } else {
+        textareaElem[0].setSelectionRange(0, lengh);
+      }
+    } else {
+      // Move the cursor to the last character ..
+      if (textareaElem.createTextRange) {
+        const range = textareaElem.createTextRange();
+        range.move('character', lengh);
+      } else {
+        if (Browser.ie11) {
+          textareaElem[0].selectionStart = lengh;
+          textareaElem[0].selectionEnd = lengh;
+        } else {
+          textareaElem.selectionStart = lengh;
+          textareaElem.selectionEnd = lengh;
+        }
+        textareaElem.focus();
+      }
+    }
+  },
+
+  close(update) {
+    if (this.isVisible() && this._topic) {
+      // Update changes ...
+      clearTimeout(this._timeoutId);
+
+      if (!$defined(update) || update) {
+        this._updateModel();
+      }
+
+      // Let make the visible text in the node visible again ...
+      this._topic.getTextShape().setVisibility(true);
+
+      // Remove it form the screen ...
+      this._containerElem.remove();
+      this._containerElem = null;
+      this._timeoutId = -1;
+    }
+    this._topic = null;
+  },
 });
 
 export default MultilineTextEditor;

packages/mindplot/lib/components/NodeGraph.js

@@ -20,171 +20,171 @@ const DragTopic = require('./DragTopic').default;
 const INodeModel = require('./model/INodeModel').default;
 
 const NodeGraph = new Class(
-    /** @lends NodeGraph */ {
+  /** @lends NodeGraph */ {
-        /**
+    /**
          * @constructs
          * @param {mindplot.model.NodeModel} nodeModel
          * @param {Object<Number, String, Boolean>} options
          * @throws will throw an error if nodeModel is null or undefined
          */
-        initialize: function (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: function () {
+    isReadOnly() {
-            return this._options.readOnly;
+      return this._options.readOnly;
-        },
+    },
 
-        /** @return model type */
+    /** @return model type */
-        getType: function () {
+    getType() {
-            var 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: function (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: function (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: function () {
+    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: function (point, fireEvent) {
+    setPosition(point, fireEvent) {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /** */
+    /** */
-        addEvent: function (type, listener) {
+    addEvent(type, listener) {
-            var elem = this.get2DElement();
+      const elem = this.get2DElement();
-            elem.addEvent(type, listener);
+      elem.addEvent(type, listener);
-        },
+    },
 
-        /** */
+    /** */
-        removeEvent: function (type, listener) {
+    removeEvent(type, listener) {
-            var elem = this.get2DElement();
+      const elem = this.get2DElement();
-            elem.removeEvent(type, listener);
+      elem.removeEvent(type, listener);
-        },
+    },
 
-        /** */
+    /** */
-        fireEvent: function (type, event) {
+    fireEvent(type, event) {
-            var elem = this.get2DElement();
+      const elem = this.get2DElement();
-            elem.trigger(type, event);
+      elem.trigger(type, event);
-        },
+    },
 
-        /** */
+    /** */
-        setMouseEventsEnabled: function (isEnabled) {
+    setMouseEventsEnabled(isEnabled) {
-            this._mouseEvents = isEnabled;
+      this._mouseEvents = isEnabled;
-        },
+    },
 
-        /** */
+    /** */
-        isMouseEventsEnabled: function () {
+    isMouseEventsEnabled() {
-            return this._mouseEvents;
+      return this._mouseEvents;
-        },
+    },
 
-        /** @return {Object<Number>} size*/
+    /** @return {Object<Number>} size */
-        getSize: function () {
+    getSize() {
-            return this._size;
+      return this._size;
-        },
+    },
 
-        /** @param {Object<Number>} size*/
+    /** @param {Object<Number>} size */
-        setSize: function (size) {
+    setSize(size) {
-            this._size.width = parseInt(size.width);
+      this._size.width = parseInt(size.width);
-            this._size.height = parseInt(size.height);
+      this._size.height = parseInt(size.height);
-        },
+    },
 
-        /**
+    /**
          * @return {mindplot.model.NodeModel} the node model
          */
-        getModel: function () {
+    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: function (model) {
+    setModel(model) {
-            $assert(model, 'Model can not be null');
+      $assert(model, 'Model can not be null');
-            this._model = model;
+      this._model = model;
-        },
+    },
 
-        /** */
+    /** */
-        getId: function () {
+    getId() {
-            return this._model.getId();
+      return this._model.getId();
-        },
+    },
 
-        /** */
+    /** */
-        setOnFocus: function (focus) {
+    setOnFocus(focus) {
-            if (this._onFocus != focus) {
+      if (this._onFocus != focus) {
-                this._onFocus = focus;
+        this._onFocus = focus;
-                var outerShape = this.getOuterShape();
+        const outerShape = this.getOuterShape();
-                if (focus) {
+        if (focus) {
-                    outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
+          outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
-                    outerShape.setOpacity(1);
+          outerShape.setOpacity(1);
-                } else {
+        } else {
-                    outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
+          outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
-                    outerShape.setOpacity(0);
+          outerShape.setOpacity(0);
-                }
+        }
-                this.setCursor('move');
+        this.setCursor('move');
 
-                // In any case, always try to hide the editor ...
+        // In any case, always try to hide the editor ...
-                this.closeEditors();
+        this.closeEditors();
 
-                // Fire event ...
+        // Fire event ...
-                this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
+        this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
-            }
+      }
-        },
+    },
 
-        /** @return {Boolean} true if the node graph is on focus */
+    /** @return {Boolean} true if the node graph is on focus */
-        isOnFocus: function () {
+    isOnFocus() {
-            return this._onFocus;
+      return this._onFocus;
-        },
+    },
 
-        /** */
+    /** */
-        dispose: function (workspace) {
+    dispose(workspace) {
-            this.setOnFocus(false);
+      this.setOnFocus(false);
-            workspace.removeChild(this);
+      workspace.removeChild(this);
-        },
+    },
 
-        /** */
+    /** */
-        createDragNode: function (layoutManager) {
+    createDragNode(layoutManager) {
-            var dragShape = this._buildDragShape();
+      const dragShape = this._buildDragShape();
-            return new DragTopic(dragShape, this, layoutManager);
+      return new DragTopic(dragShape, this, layoutManager);
-        },
+    },
 
-        _buildDragShape: function () {
+    _buildDragShape() {
-            $assert(false, '_buildDragShape must be implemented by all nodes.');
+      $assert(false, '_buildDragShape must be implemented by all nodes.');
-        },
+    },
 
-        /** */
+    /** */
-        getPosition: function () {
+    getPosition() {
-            var model = this.getModel();
+      const model = this.getModel();
-            return model.getPosition();
+      return model.getPosition();
-        },
+    },
-    }
+  },
 );
 
 /**
@@ -199,24 +199,24 @@ const NodeGraph = new Class(
  * @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
  */
 NodeGraph.create = function (nodeModel, options) {
-    const CentralTopic = require('./CentralTopic').default;
+  const CentralTopic = require('./CentralTopic').default;
-    const MainTopic = require('./MainTopic').default;
+  const MainTopic = require('./MainTopic').default;
 
-    $assert(nodeModel, 'Model can not be null');
+  $assert(nodeModel, 'Model can not be null');
 
-    var type = nodeModel.getType();
+  const type = nodeModel.getType();
-    $assert(type, 'Node model type can not be null');
+  $assert(type, 'Node model type can not be null');
 
-    var result;
+  let result;
-    if (type == INodeModel.CENTRAL_TOPIC_TYPE) {
+  if (type == INodeModel.CENTRAL_TOPIC_TYPE) {
-        result = new CentralTopic(nodeModel, options);
+    result = new CentralTopic(nodeModel, options);
-    } else if (type == INodeModel.MAIN_TOPIC_TYPE) {
+  } else if (type == INodeModel.MAIN_TOPIC_TYPE) {
-        result = new MainTopic(nodeModel, options);
+    result = new MainTopic(nodeModel, options);
-    } else {
+  } else {
-        $assert(false, 'unsupported node type:' + type);
+    $assert(false, `unsupported node type:${type}`);
-    }
+  }
 
-    return result;
+  return result;
 };
 
 export default NodeGraph;

packages/mindplot/lib/components/NoteIcon.js

@@ -19,66 +19,64 @@ const Icon = require('./Icon').default;
 const FloatingTip = require('./widget/FloatingTip').default;
 
 const NoteIcon = new Class({
-    Extends: Icon,
+  Extends: Icon,
-    initialize: function (topic, noteModel, readOnly) {
+  initialize(topic, noteModel, readOnly) {
-        $assert(topic, 'topic can not be null');
+    $assert(topic, 'topic can not be null');
 
-        this.parent(NoteIcon.IMAGE_URL);
+    this.parent(NoteIcon.IMAGE_URL);
-        this._linksModel = noteModel;
+    this._linksModel = noteModel;
-        this._topic = topic;
+    this._topic = topic;
-        this._readOnly = readOnly;
+    this._readOnly = readOnly;
 
-        this._registerEvents();
+    this._registerEvents();
-    },
+  },
 
-    _registerEvents: function () {
+  _registerEvents() {
-        this._image.setCursor('pointer');
+    this._image.setCursor('pointer');
-        var me = this;
+    const me = this;
 
-        if (!this._readOnly) {
+    if (!this._readOnly) {
-            // Add on click event to open the editor ...
+      // Add on click event to open the editor ...
-            this.addEvent('click', function (event) {
+      this.addEvent('click', (event) => {
-                me._topic.showNoteEditor();
+        me._topic.showNoteEditor();
-                event.stopPropagation();
+        event.stopPropagation();
-            });
+      });
-        }
-        this._tip = new FloatingTip($(me.getImage()._peer._native), {
-            title: $msg('NOTE'),
-            container: 'body',
-            // Content can also be a function of the target element!
-            content: function () {
-                return me._buildTooltipContent();
-            },
-            html: true,
-            placement: 'bottom',
-            destroyOnExit: true
-        });
-
-    },
-
-    _buildTooltipContent: function () {
-        if ($("body").find("#textPopoverNote").length == 1) {
-            var text = $("body").find("#textPopoverNote");
-            text.text(this._linksModel.getText());
-        } else {
-            var result = $('<div id="textPopoverNote"></div>').css({padding: '5px'});
-
-            var text = $('<div></div>').text(this._linksModel.getText())
-                .css({
-                    'white-space': 'pre-wrap',
-                    'word-wrap': 'break-word'
-                }
-            );
-            result.append(text);
-            return result;
-        }
-    },
-
-    getModel: function () {
-        return this._linksModel;
     }
+    this._tip = new FloatingTip($(me.getImage()._peer._native), {
+      title: $msg('NOTE'),
+      container: 'body',
+      // Content can also be a function of the target element!
+      content() {
+        return me._buildTooltipContent();
+      },
+      html: true,
+      placement: 'bottom',
+      destroyOnExit: true,
+    });
+  },
+
+  _buildTooltipContent() {
+    if ($('body').find('#textPopoverNote').length == 1) {
+      var text = $('body').find('#textPopoverNote');
+      text.text(this._linksModel.getText());
+    } else {
+      const result = $('<div id="textPopoverNote"></div>').css({ padding: '5px' });
+
+      var text = $('<div></div>').text(this._linksModel.getText())
+        .css({
+          'white-space': 'pre-wrap',
+          'word-wrap': 'break-word',
+        });
+      result.append(text);
+      return result;
+    }
+  },
+
+  getModel() {
+    return this._linksModel;
+  },
 });
 
-NoteIcon.IMAGE_URL = "images/notes.png";
+NoteIcon.IMAGE_URL = 'images/notes.png';
 
-export default NoteIcon
+export default NoteIcon;

packages/mindplot/lib/components/Options.js

@@ -1,14 +1,16 @@
 const Options = new Class({
 
-    setOptions: function () {
+  setOptions() {
-        var options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments));
+    const options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments));
-        if (this.addEvent) for (var option in options) {
+    if (this.addEvent) {
-            if (typeOf(options[option]) != 'function' || !(/^on[A-Z]/).test(option)) continue;
+      for (const option in options) {
-            this.addEvent(option, options[option]);
+        if (typeOf(options[option]) != 'function' || !(/^on[A-Z]/).test(option)) continue;
-            delete options[option];
+        this.addEvent(option, options[option]);
-        }
+        delete options[option];
-        return this;
+      }
     }
+    return this;
+  },
 
 });
 

packages/mindplot/lib/components/PersistenceManager.js

@@ -16,71 +16,72 @@
  *   limitations under the License.
  */
 const Core = require('@wismapping/core-js');
+
 const core = Core();
 const XMLSerializerFactory = require('./persistence/XMLSerializerFactory');
 
 const PersistenceManager = new Class({
-    Static: {
+  Static: {
-        loadFromDom: function (mapId, mapDom) {
+    loadFromDom(mapId, mapDom) {
-            $assert(mapId, 'mapId can not be null');
+      $assert(mapId, 'mapId can not be null');
-            $assert(mapDom, 'mapDom can not be null');
+      $assert(mapDom, 'mapDom can not be null');
 
-            var serializer = XMLSerializerFactory.getSerializerFromDocument(mapDom);
+      const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDom);
-            return serializer.loadFromDom(mapDom, mapId);
+      return serializer.loadFromDom(mapDom, mapId);
-        },
     },
+  },
 
-    initialize: function () {},
+  initialize() {},
 
-    save: function (mindmap, editorProperties, saveHistory, events, sync) {
+  save(mindmap, editorProperties, saveHistory, events, sync) {
-        $assert(mindmap, 'mindmap can not be null');
+    $assert(mindmap, 'mindmap can not be null');
-        $assert(editorProperties, 'editorProperties can not be null');
+    $assert(editorProperties, 'editorProperties can not be null');
 
-        var mapId = mindmap.getId();
+    const mapId = mindmap.getId();
-        $assert(mapId, 'mapId can not be null');
+    $assert(mapId, 'mapId can not be null');
 
-        var serializer = XMLSerializerFactory.getSerializerFromMindmap(mindmap);
+    const serializer = XMLSerializerFactory.getSerializerFromMindmap(mindmap);
-        var domMap = serializer.toXML(mindmap);
+    const domMap = serializer.toXML(mindmap);
-        var mapXml = core.Utils.innerXML(domMap);
+    const mapXml = core.Utils.innerXML(domMap);
 
-        var pref = JSON.stringify(editorProperties);
+    const pref = JSON.stringify(editorProperties);
-        try {
+    try {
-            this.saveMapXml(mapId, mapXml, pref, saveHistory, events, sync);
+      this.saveMapXml(mapId, mapXml, pref, saveHistory, events, sync);
-        } catch (e) {
+    } catch (e) {
-            console.log(e);
+      console.log(e);
-            events.onError(this._buildError());
+      events.onError(this._buildError());
-        }
+    }
-    },
+  },
 
-    load: function (mapId) {
+  load(mapId) {
-        $assert(mapId, 'mapId can not be null');
+    $assert(mapId, 'mapId can not be null');
-        var domDocument = this.loadMapDom(mapId);
+    const domDocument = this.loadMapDom(mapId);
-        return PersistenceManager.loadFromDom(mapId, domDocument);
+    return PersistenceManager.loadFromDom(mapId, domDocument);
-    },
+  },
 
-    discardChanges: function (mapId) {
+  discardChanges(mapId) {
-        throw new Error('Method must be implemented');
+    throw new Error('Method must be implemented');
-    },
+  },
 
-    loadMapDom: function (mapId) {
+  loadMapDom(mapId) {
-        throw new Error('Method must be implemented');
+    throw new Error('Method must be implemented');
-    },
+  },
 
-    saveMapXml: function (mapId, mapXml, pref, saveHistory, events, sync) {
+  saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
-        throw new Error('Method must be implemented');
+    throw new Error('Method must be implemented');
-    },
+  },
 
-    unlockMap: function (mindmap) {
+  unlockMap(mindmap) {
-        throw new Error('Method must be implemented');
+    throw new Error('Method must be implemented');
-    },
+  },
 });
 
 PersistenceManager.init = function (instance) {
-    PersistenceManager._instance = instance;
+  PersistenceManager._instance = instance;
 };
 
 PersistenceManager.getInstance = function () {
-    return PersistenceManager._instance;
+  return PersistenceManager._instance;
 };
 
 export default PersistenceManager;

packages/mindplot/lib/components/Relationship.js

@@ -15,10 +15,12 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js')
+const Core = require('@wismapping/core-js');
+
 const core = Core();
 
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
+
 const web2d = web2D();
 
 const ConnectionLine = require('./ConnectionLine').default;
@@ -26,320 +28,310 @@ const ControlPoint = require('./ControlPoint').default;
 
 const INodeModel = require('./model/INodeModel').default;
 
-const Shape = require('./util/Shape').default
+const Shape = require('./util/Shape').default;
 
 const Relationship = new Class({
-    Extends: ConnectionLine,
+  Extends: ConnectionLine,
-    Static: {
+  Static: {
-        getStrokeColor: function () {
+    getStrokeColor() {
-            return '#9b74e6';
+      return '#9b74e6';
-        },
-        type: "Relationship"
     },
-    initialize: function (sourceNode, targetNode, model) {
+    type: 'Relationship',
-        $assert(sourceNode, "sourceNode can not be null");
+  },
-        $assert(targetNode, "targetNode can not be null");
+  initialize(sourceNode, targetNode, model) {
+    $assert(sourceNode, 'sourceNode can not be null');
+    $assert(targetNode, 'targetNode can not be null');
 
-        this.parent(sourceNode, targetNode, model.getLineType());
+    this.parent(sourceNode, targetNode, model.getLineType());
-        this.setModel(model);
+    this.setModel(model);
 
-        var strokeColor = Relationship.getStrokeColor();
+    const strokeColor = Relationship.getStrokeColor();
 
-        this._line2d.setIsSrcControlPointCustom(false);
+    this._line2d.setIsSrcControlPointCustom(false);
-        this._line2d.setIsDestControlPointCustom(false);
+    this._line2d.setIsDestControlPointCustom(false);
-        this._line2d.setCursor('pointer');
+    this._line2d.setCursor('pointer');
-        this._line2d.setStroke(1, 'solid', strokeColor);
+    this._line2d.setStroke(1, 'solid', strokeColor);
-        this._line2d.setDashed(4, 2);
+    this._line2d.setDashed(4, 2);
-        this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED);
+    this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED);
-        this._focusShape.setStroke(2, "solid", "#3f96ff");
+    this._focusShape.setStroke(2, 'solid', '#3f96ff');
 
-        var ctrlPoints = this._line2d.getControlPoints();
+    const ctrlPoints = this._line2d.getControlPoints();
-        this._focusShape.setSrcControlPoint(ctrlPoints[0]);
+    this._focusShape.setSrcControlPoint(ctrlPoints[0]);
-        this._focusShape.setDestControlPoint(ctrlPoints[1]);
+    this._focusShape.setDestControlPoint(ctrlPoints[1]);
-        this._focusShape.setVisibility(false);
+    this._focusShape.setVisibility(false);
-        this._onFocus = false;
+    this._onFocus = false;
-        this._isInWorkspace = false;
+    this._isInWorkspace = false;
-        this._controlPointsController = new ControlPoint();
+    this._controlPointsController = new ControlPoint();
 
-        this._startArrow = new web2d.Arrow();
+    this._startArrow = new web2d.Arrow();
-        this._startArrow.setStrokeColor(strokeColor);
+    this._startArrow.setStrokeColor(strokeColor);
-        this._startArrow.setStrokeWidth(2);
+    this._startArrow.setStrokeWidth(2);
-        this.setShowStartArrow(true);
+    this.setShowStartArrow(true);
 
-        // Share style is disable ...
+    // Share style is disable ...
-        if (this._showEndArrow) {
+    if (this._showEndArrow) {
-            this._endArrow = new web2d.Arrow();
+      this._endArrow = new web2d.Arrow();
-            this._endArrow.setStrokeColor(strokeColor);
+      this._endArrow.setStrokeColor(strokeColor);
-            this._endArrow.setStrokeWidth(2);
+      this._endArrow.setStrokeWidth(2);
-        }
-
-        // Position the line ...
-        if ($defined(model.getSrcCtrlPoint())) {
-            var srcPoint = model.getSrcCtrlPoint().clone();
-            this.setSrcControlPoint(srcPoint);
-        }
-        if ($defined(model.getDestCtrlPoint())) {
-            var destPoint = model.getDestCtrlPoint().clone();
-            this.setDestControlPoint(destPoint);
-        }
-    },
-
-    setStroke: function (color, style, opacity) {
-        this.parent(color, style, opacity);
-        this._startArrow.setStrokeColor(color);
-    },
-
-    redraw: function () {
-        var line2d = this._line2d;
-        var sourceTopic = this._sourceTopic;
-        var sourcePosition = sourceTopic.getPosition();
-
-        var targetTopic = this._targetTopic;
-        var targetPosition = targetTopic.getPosition();
-        if (targetTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
-            targetPosition = Shape.workoutIncomingConnectionPoint(targetTopic, sourcePosition);
-        }
-
-        var sPos, tPos;
-        this._line2d.setStroke(2);
-        var ctrlPoints = this._line2d.getControlPoints();
-        if (!this._line2d.isDestControlPointCustom() && !this._line2d.isSrcControlPointCustom()) {
-
-            var defaultPoints = Shape.calculateDefaultControlPoints(sourcePosition, targetPosition);
-            ctrlPoints[0].x = defaultPoints[0].x;
-            ctrlPoints[0].y = defaultPoints[0].y;
-
-            ctrlPoints[1].x = defaultPoints[1].x;
-            ctrlPoints[1].y = defaultPoints[1].y;
-        }
-        var spoint = new core.Point();
-        spoint.x = parseInt(ctrlPoints[0].x) + parseInt(sourcePosition.x);
-        spoint.y = parseInt(ctrlPoints[0].y) + parseInt(sourcePosition.y);
-
-        var tpoint = new core.Point();
-        tpoint.x = parseInt(ctrlPoints[1].x) + parseInt(targetPosition.x);
-        tpoint.y = parseInt(ctrlPoints[1].y) + parseInt(targetPosition.y);
-
-        sPos = Shape.calculateRelationShipPointCoordinates(sourceTopic, spoint);
-        tPos = Shape.calculateRelationShipPointCoordinates(targetTopic, tpoint);
-
-        line2d.setFrom(sPos.x, sPos.y);
-        line2d.setTo(tPos.x, tPos.y);
-
-        line2d.moveToFront();
-
-        //Positionate Arrows
-        this._positionArrows();
-
-        // Add connector ...
-        this._positionateConnector(targetTopic);
-
-        if (this.isOnFocus()) {
-            this._refreshShape();
-        }
-        this._focusShape.moveToBack();
-        this._controlPointsController.redraw();
-    },
-
-    _positionArrows: function () {
-        var tpos = this._line2d.getTo();
-        var spos = this._line2d.getFrom();
-
-        this._startArrow.setFrom(spos.x, spos.y);
-        this._startArrow.moveToBack();
-
-        if (this._endArrow) {
-            this._endArrow.setFrom(tpos.x, tpos.y);
-            this._endArrow.moveToBack();
-        }
-
-        if (this._line2d.getType() == "CurvedLine") {
-            var controlPoints = this._line2d.getControlPoints();
-            this._startArrow.setControlPoint(controlPoints[0]);
-            if (this._endArrow) {
-                this._endArrow.setControlPoint(controlPoints[1]);
-            }
-        } else {
-            this._startArrow.setControlPoint(this._line2d.getTo());
-            if (this._endArrow) {
-                this._endArrow.setControlPoint(this._line2d.getFrom());
-            }
-        }
-
-        if (this._showEndArrow) {
-            this._endArrow.setVisibility(this.isVisible());
-        }
-        this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
-    },
-
-    addToWorkspace: function (workspace) {
-        workspace.append(this._focusShape);
-        workspace.append(this._controlPointsController);
-
-        this._controlPointControllerListener = this._initializeControlPointController.bind(this);
-        this._line2d.addEvent('click', this._controlPointControllerListener);
-        this._isInWorkspace = true;
-
-        workspace.append(this._startArrow);
-        if (this._endArrow)
-            workspace.append(this._endArrow);
-
-        this.parent(workspace);
-        this._positionArrows();
-        this.redraw();
-
-    },
-
-    _initializeControlPointController: function () {
-        this.setOnFocus(true);
-    },
-
-    removeFromWorkspace: function (workspace) {
-        workspace.removeChild(this._focusShape);
-        workspace.removeChild(this._controlPointsController);
-        this._line2d.removeEvent('click', this._controlPointControllerListener);
-        this._isInWorkspace = false;
-        workspace.removeChild(this._startArrow);
-        if (this._endArrow)
-            workspace.removeChild(this._endArrow);
-
-        this.parent(workspace);
-    },
-
-    getType: function () {
-        return Relationship.type;
-    },
-
-    setOnFocus: function (focus) {
-        // Change focus shape
-        if (this.isOnFocus() != focus) {
-            if (focus) {
-                this._refreshShape();
-                this._controlPointsController.setLine(this);
-            }
-            this._focusShape.setVisibility(focus);
-
-            this._controlPointsController.setVisibility(focus);
-            this._onFocus = focus;
-            this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
-        }
-    },
-
-    _refreshShape: function () {
-        var sPos = this._line2d.getFrom();
-        var tPos = this._line2d.getTo();
-        var ctrlPoints = this._line2d.getControlPoints();
-        this._focusShape.setFrom(sPos.x, sPos.y);
-        this._focusShape.setTo(tPos.x, tPos.y);
-        var shapeCtrlPoints = this._focusShape.getControlPoints();
-        shapeCtrlPoints[0].x = ctrlPoints[0].x;
-        shapeCtrlPoints[0].y = ctrlPoints[0].y;
-        shapeCtrlPoints[1].x = ctrlPoints[1].x;
-        shapeCtrlPoints[1].y = ctrlPoints[1].y;
-        this._focusShape.updateLine();
-    },
-
-    addEvent: function (type, listener) {
-        // Translate to web 2d events ...
-        if (type == 'onfocus') {
-            type = 'mousedown';
-        }
-
-        var line = this._line2d;
-        line.addEvent(type, listener);
-    },
-
-    isOnFocus: function () {
-        return this._onFocus;
-    },
-
-    isInWorkspace: function () {
-        return this._isInWorkspace;
-    },
-
-    setVisibility: function (value) {
-        this.parent(value);
-        if (this._showEndArrow)
-            this._endArrow.setVisibility(this._showEndArrow);
-        this._startArrow.setVisibility(this._showStartArrow && value);
-    },
-
-    setOpacity: function (opacity) {
-        this.parent(opacity);
-        if (this._showEndArrow)
-            this._endArrow.setOpacity(opacity);
-        if (this._showStartArrow)
-            this._startArrow.setOpacity(opacity);
-    },
-
-    setShowEndArrow: function (visible) {
-        this._showEndArrow = visible;
-        if (this._isInWorkspace)
-            this.redraw();
-    },
-
-    setShowStartArrow: function (visible) {
-        this._showStartArrow = visible;
-        if (this._isInWorkspace)
-            this.redraw();
-    },
-
-    setFrom: function (x, y) {
-        $assert($defined(x), "x must be defined");
-        $assert($defined(y), "y must be defined");
-
-        this._line2d.setFrom(x, y);
-        this._startArrow.setFrom(x, y);
-    },
-
-    setTo: function (x, y) {
-        $assert($defined(x), "x must be defined");
-        $assert($defined(y), "y must be defined");
-
-        this._line2d.setTo(x, y);
-        if (this._endArrow)
-            this._endArrow.setFrom(x, y);
-    },
-
-    setSrcControlPoint: function (control) {
-        this._line2d.setSrcControlPoint(control);
-        this._startArrow.setControlPoint(control);
-    },
-
-    setDestControlPoint: function (control) {
-        this._line2d.setDestControlPoint(control);
-        if (this._showEndArrow)
-            this._endArrow.setControlPoint(control);
-    },
-
-    getControlPoints: function () {
-        return this._line2d.getControlPoints();
-    },
-
-    isSrcControlPointCustom: function () {
-        return this._line2d.isSrcControlPointCustom();
-    },
-
-    isDestControlPointCustom: function () {
-        return this._line2d.isDestControlPointCustom();
-    },
-
-    setIsSrcControlPointCustom: function (isCustom) {
-        this._line2d.setIsSrcControlPointCustom(isCustom);
-    },
-
-    setIsDestControlPointCustom: function (isCustom) {
-        this._line2d.setIsDestControlPointCustom(isCustom);
-    },
-
-    getId: function () {
-        return this._model.getId();
-    },
-
-    fireEvent: function (type, event) {
-        var elem = this._line2d;
-        elem.trigger(type, event);
     }
+
+    // Position the line ...
+    if ($defined(model.getSrcCtrlPoint())) {
+      const srcPoint = model.getSrcCtrlPoint().clone();
+      this.setSrcControlPoint(srcPoint);
+    }
+    if ($defined(model.getDestCtrlPoint())) {
+      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;
+    const sourceTopic = this._sourceTopic;
+    const sourcePosition = sourceTopic.getPosition();
+
+    const targetTopic = this._targetTopic;
+    let targetPosition = targetTopic.getPosition();
+    if (targetTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
+      targetPosition = Shape.workoutIncomingConnectionPoint(targetTopic, sourcePosition);
+    }
+
+    let sPos; let
+      tPos;
+    this._line2d.setStroke(2);
+    const ctrlPoints = this._line2d.getControlPoints();
+    if (!this._line2d.isDestControlPointCustom() && !this._line2d.isSrcControlPointCustom()) {
+      const defaultPoints = Shape.calculateDefaultControlPoints(sourcePosition, targetPosition);
+      ctrlPoints[0].x = defaultPoints[0].x;
+      ctrlPoints[0].y = defaultPoints[0].y;
+
+      ctrlPoints[1].x = defaultPoints[1].x;
+      ctrlPoints[1].y = defaultPoints[1].y;
+    }
+    const spoint = new core.Point();
+    spoint.x = parseInt(ctrlPoints[0].x) + parseInt(sourcePosition.x);
+    spoint.y = parseInt(ctrlPoints[0].y) + parseInt(sourcePosition.y);
+
+    const tpoint = new core.Point();
+    tpoint.x = parseInt(ctrlPoints[1].x) + parseInt(targetPosition.x);
+    tpoint.y = parseInt(ctrlPoints[1].y) + parseInt(targetPosition.y);
+
+    sPos = Shape.calculateRelationShipPointCoordinates(sourceTopic, spoint);
+    tPos = Shape.calculateRelationShipPointCoordinates(targetTopic, tpoint);
+
+    line2d.setFrom(sPos.x, sPos.y);
+    line2d.setTo(tPos.x, tPos.y);
+
+    line2d.moveToFront();
+
+    // Positionate Arrows
+    this._positionArrows();
+
+    // Add connector ...
+    this._positionateConnector(targetTopic);
+
+    if (this.isOnFocus()) {
+      this._refreshShape();
+    }
+    this._focusShape.moveToBack();
+    this._controlPointsController.redraw();
+  },
+
+  _positionArrows() {
+    const tpos = this._line2d.getTo();
+    const spos = this._line2d.getFrom();
+
+    this._startArrow.setFrom(spos.x, spos.y);
+    this._startArrow.moveToBack();
+
+    if (this._endArrow) {
+      this._endArrow.setFrom(tpos.x, tpos.y);
+      this._endArrow.moveToBack();
+    }
+
+    if (this._line2d.getType() == 'CurvedLine') {
+      const controlPoints = this._line2d.getControlPoints();
+      this._startArrow.setControlPoint(controlPoints[0]);
+      if (this._endArrow) {
+        this._endArrow.setControlPoint(controlPoints[1]);
+      }
+    } else {
+      this._startArrow.setControlPoint(this._line2d.getTo());
+      if (this._endArrow) {
+        this._endArrow.setControlPoint(this._line2d.getFrom());
+      }
+    }
+
+    if (this._showEndArrow) {
+      this._endArrow.setVisibility(this.isVisible());
+    }
+    this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
+  },
+
+  addToWorkspace(workspace) {
+    workspace.append(this._focusShape);
+    workspace.append(this._controlPointsController);
+
+    this._controlPointControllerListener = this._initializeControlPointController.bind(this);
+    this._line2d.addEvent('click', this._controlPointControllerListener);
+    this._isInWorkspace = true;
+
+    workspace.append(this._startArrow);
+    if (this._endArrow) workspace.append(this._endArrow);
+
+    this.parent(workspace);
+    this._positionArrows();
+    this.redraw();
+  },
+
+  _initializeControlPointController() {
+    this.setOnFocus(true);
+  },
+
+  removeFromWorkspace(workspace) {
+    workspace.removeChild(this._focusShape);
+    workspace.removeChild(this._controlPointsController);
+    this._line2d.removeEvent('click', this._controlPointControllerListener);
+    this._isInWorkspace = false;
+    workspace.removeChild(this._startArrow);
+    if (this._endArrow) workspace.removeChild(this._endArrow);
+
+    this.parent(workspace);
+  },
+
+  getType() {
+    return Relationship.type;
+  },
+
+  setOnFocus(focus) {
+    // Change focus shape
+    if (this.isOnFocus() != focus) {
+      if (focus) {
+        this._refreshShape();
+        this._controlPointsController.setLine(this);
+      }
+      this._focusShape.setVisibility(focus);
+
+      this._controlPointsController.setVisibility(focus);
+      this._onFocus = focus;
+      this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
+    }
+  },
+
+  _refreshShape() {
+    const sPos = this._line2d.getFrom();
+    const tPos = this._line2d.getTo();
+    const ctrlPoints = this._line2d.getControlPoints();
+    this._focusShape.setFrom(sPos.x, sPos.y);
+    this._focusShape.setTo(tPos.x, tPos.y);
+    const shapeCtrlPoints = this._focusShape.getControlPoints();
+    shapeCtrlPoints[0].x = ctrlPoints[0].x;
+    shapeCtrlPoints[0].y = ctrlPoints[0].y;
+    shapeCtrlPoints[1].x = ctrlPoints[1].x;
+    shapeCtrlPoints[1].y = ctrlPoints[1].y;
+    this._focusShape.updateLine();
+  },
+
+  addEvent(type, listener) {
+    // Translate to web 2d events ...
+    if (type == 'onfocus') {
+      type = 'mousedown';
+    }
+
+    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');
+    $assert($defined(y), 'y must be defined');
+
+    this._line2d.setFrom(x, y);
+    this._startArrow.setFrom(x, y);
+  },
+
+  setTo(x, y) {
+    $assert($defined(x), 'x must be defined');
+    $assert($defined(y), 'y must be defined');
+
+    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);
+  },
 });
 
 export default Relationship;

packages/mindplot/lib/components/RelationshipPivot.js

@@ -15,153 +15,151 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js')
+const Core = require('@wismapping/core-js');
+
 const core = Core();
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
+
 const web2d = web2D();
-const INodeModel = require('./model/INodeModel').default
+const INodeModel = require('./model/INodeModel').default;
 const Shape = require('./util/Shape').default;
 
 const RelationshipPivot = new Class({
-    initialize: function (workspace, designer) {
+  initialize(workspace, designer) {
-        $assert(workspace, "workspace can not be null");
+    $assert(workspace, 'workspace can not be null');
-        $assert(designer, "designer can not be null");
+    $assert(designer, 'designer can not be null');
-        this._workspace = workspace;
+    this._workspace = workspace;
-        this._designer = designer;
+    this._designer = designer;
 
-        //FIXME: the aim of the migration is remove .bind mootools method, please remove these!
+    // FIXME: the aim of the migration is remove .bind mootools method, please remove these!
-        this._mouseMoveEvent = this._mouseMove.bind(this);
+    this._mouseMoveEvent = this._mouseMove.bind(this);
-        this._onClickEvent = this._cleanOnMouseClick.bind(this);
+    this._onClickEvent = this._cleanOnMouseClick.bind(this);
-        this._onTopicClick = this._connectOnFocus.bind(this);
+    this._onTopicClick = this._connectOnFocus.bind(this);
+  },
 
-    },
+  start(sourceTopic, targetPos) {
+    $assert(sourceTopic, 'sourceTopic can not be null');
+    $assert(targetPos, 'targetPos can not be null');
 
-    start: function (sourceTopic, targetPos) {
+    this.dispose();
-        $assert(sourceTopic, "sourceTopic can not be null");
+    this._sourceTopic = sourceTopic;
-        $assert(targetPos, "targetPos can not be null");
+    if (sourceTopic != null) {
+      this._workspace.enableWorkspaceEvents(false);
 
-        this.dispose();
+      const sourcePos = sourceTopic.getPosition();
-        this._sourceTopic = sourceTopic;
+      const strokeColor = Relationship.getStrokeColor();
-        if (sourceTopic != null) {
-            this._workspace.enableWorkspaceEvents(false);
 
-            var sourcePos = sourceTopic.getPosition();
+      this._pivot = new web2d.CurvedLine();
-            var strokeColor = Relationship.getStrokeColor();
+      this._pivot.setStyle(web2d.CurvedLine.SIMPLE_LINE);
 
-            this._pivot = new web2d.CurvedLine();
+      const fromPos = this._calculateFromPosition(sourcePos);
-            this._pivot.setStyle(web2d.CurvedLine.SIMPLE_LINE);
+      this._pivot.setFrom(fromPos.x, fromPos.y);
 
-            var fromPos = this._calculateFromPosition(sourcePos);
+      this._pivot.setTo(targetPos.x, targetPos.y);
-            this._pivot.setFrom(fromPos.x, fromPos.y);
+      this._pivot.setStroke(2, 'solid', strokeColor);
+      this._pivot.setDashed(4, 2);
 
-            this._pivot.setTo(targetPos.x, targetPos.y);
+      this._startArrow = new web2d.Arrow();
-            this._pivot.setStroke(2, 'solid', strokeColor);
+      this._startArrow.setStrokeColor(strokeColor);
-            this._pivot.setDashed(4, 2);
+      this._startArrow.setStrokeWidth(2);
+      this._startArrow.setFrom(sourcePos.x, sourcePos.y);
 
-            this._startArrow = new web2d.Arrow();
+      this._workspace.append(this._pivot);
-            this._startArrow.setStrokeColor(strokeColor);
+      this._workspace.append(this._startArrow);
-            this._startArrow.setStrokeWidth(2);
-            this._startArrow.setFrom(sourcePos.x, sourcePos.y);
 
-            this._workspace.append(this._pivot);
+      this._workspace.addEvent('mousemove', this._mouseMoveEvent);
-            this._workspace.append(this._startArrow);
+      this._workspace.addEvent('click', this._onClickEvent);
 
-            this._workspace.addEvent('mousemove', this._mouseMoveEvent);
+      // Register focus events on all topics ...
-            this._workspace.addEvent('click', this._onClickEvent);
+      const model = this._designer.getModel();
-
+      const topics = model.getTopics();
-            // Register focus events on all topics ...
+      _.each(topics, (topic) => {
-            var model = this._designer.getModel();
+        topic.addEvent('ontfocus', this._onTopicClick);
-            var topics = model.getTopics();
+      });
-            _.each(topics, function (topic) {
-                topic.addEvent('ontfocus', this._onTopicClick);
-            }.bind(this));
-        }
-
-    },
-
-    dispose: function () {
-        var workspace = this._workspace;
-
-        if (this._isActive()) {
-            workspace.removeEvent('mousemove', this._mouseMoveEvent);
-            workspace.removeEvent('click', this._onClickEvent);
-
-            var model = this._designer.getModel();
-            var topics = model.getTopics();
-            var me = this;
-            _.each(topics, function (topic) {
-                topic.removeEvent('ontfocus', me._onTopicClick);
-            });
-
-            workspace.removeChild(this._pivot);
-            workspace.removeChild(this._startArrow);
-            workspace.enableWorkspaceEvents(true);
-
-            this._sourceTopic = null;
-            this._pivot = null;
-            this._startArrow = null;
-        }
-    },
-
-    _mouseMove: function (event) {
-        var screen = this._workspace.getScreenManager();
-        var pos = screen.getWorkspaceMousePosition(event);
-
-        // Leave the arrow a couple of pixels away from the cursor.
-        var sourcePosition = this._sourceTopic.getPosition();
-        var gapDistance = Math.sign(pos.x - sourcePosition.x) * 5;
-
-        var sPos = this._calculateFromPosition(pos);
-        this._pivot.setFrom(sPos.x, sPos.y);
-
-        // Update target position ...
-        this._pivot.setTo(pos.x - gapDistance, pos.y);
-
-        var controlPoints = this._pivot.getControlPoints();
-        this._startArrow.setFrom(pos.x - gapDistance, pos.y);
-        this._startArrow.setControlPoint(controlPoints[1]);
-
-        event.stopPropagation();
-        return false;
-    },
-
-    _cleanOnMouseClick: function (event) {
-
-        // The user clicks on a desktop on in other element that is not a node.
-        this.dispose();
-        event.stopPropagation();
-    },
-
-    _calculateFromPosition: function (toPosition) {
-
-        // Calculate origin position ...
-        var sourcePosition = this._sourceTopic.getPosition();
-        if (this._sourceTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
-            sourcePosition = Shape.workoutIncomingConnectionPoint(this._sourceTopic, toPosition);
-        }
-        var controlPoint = Shape.calculateDefaultControlPoints(sourcePosition, toPosition);
-
-        var spoint = new core.Point();
-        spoint.x = parseInt(controlPoint[0].x) + parseInt(sourcePosition.x);
-        spoint.y = parseInt(controlPoint[0].y) + parseInt(sourcePosition.y);
-        return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
-    },
-
-    _connectOnFocus: function (event, targetTopic) {
-        var sourceTopic = this._sourceTopic;
-        var mindmap = this._designer.getMindmap();
-
-        // Avoid circular connections ...
-        if (targetTopic.getId() != sourceTopic.getId()) {
-            var relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId());
-            this._designer._actionDispatcher.addRelationship(relModel);
-        }
-        this.dispose();
-    },
-
-    _isActive: function () {
-        return this._pivot != null;
     }
+  },
+
+  dispose() {
+    const workspace = this._workspace;
+
+    if (this._isActive()) {
+      workspace.removeEvent('mousemove', this._mouseMoveEvent);
+      workspace.removeEvent('click', this._onClickEvent);
+
+      const model = this._designer.getModel();
+      const topics = model.getTopics();
+      const me = this;
+      _.each(topics, (topic) => {
+        topic.removeEvent('ontfocus', me._onTopicClick);
+      });
+
+      workspace.removeChild(this._pivot);
+      workspace.removeChild(this._startArrow);
+      workspace.enableWorkspaceEvents(true);
+
+      this._sourceTopic = null;
+      this._pivot = null;
+      this._startArrow = null;
+    }
+  },
+
+  _mouseMove(event) {
+    const screen = this._workspace.getScreenManager();
+    const pos = screen.getWorkspaceMousePosition(event);
+
+    // Leave the arrow a couple of pixels away from the cursor.
+    const sourcePosition = this._sourceTopic.getPosition();
+    const gapDistance = Math.sign(pos.x - sourcePosition.x) * 5;
+
+    const sPos = this._calculateFromPosition(pos);
+    this._pivot.setFrom(sPos.x, sPos.y);
+
+    // Update target position ...
+    this._pivot.setTo(pos.x - gapDistance, pos.y);
+
+    const controlPoints = this._pivot.getControlPoints();
+    this._startArrow.setFrom(pos.x - gapDistance, pos.y);
+    this._startArrow.setControlPoint(controlPoints[1]);
+
+    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 ...
+    let sourcePosition = this._sourceTopic.getPosition();
+    if (this._sourceTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
+      sourcePosition = Shape.workoutIncomingConnectionPoint(this._sourceTopic, toPosition);
+    }
+    const controlPoint = Shape.calculateDefaultControlPoints(sourcePosition, toPosition);
+
+    const spoint = new core.Point();
+    spoint.x = parseInt(controlPoint[0].x) + parseInt(sourcePosition.x);
+    spoint.y = parseInt(controlPoint[0].y) + parseInt(sourcePosition.y);
+    return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
+  },
+
+  _connectOnFocus(event, targetTopic) {
+    const sourceTopic = this._sourceTopic;
+    const mindmap = this._designer.getMindmap();
+
+    // Avoid circular connections ...
+    if (targetTopic.getId() != sourceTopic.getId()) {
+      const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId());
+      this._designer._actionDispatcher.addRelationship(relModel);
+    }
+    this.dispose();
+  },
+
+  _isActive() {
+    return this._pivot != null;
+  },
 });
 
 export default RelationshipPivot;

packages/mindplot/lib/components/RestPersistenceManager.js

@@ -18,149 +18,142 @@
 const PersistenceManager = require('./PersistenceManager').default;
 
 const RESTPersistenceManager = new Class({
-        Extends: PersistenceManager,
+  Extends: PersistenceManager,
-        initialize: function (options) {
+  initialize(options) {
-            this.parent();
+    this.parent();
-            $assert(options.documentUrl, "documentUrl can not be null");
+    $assert(options.documentUrl, 'documentUrl can not be null');
-            $assert(options.revertUrl, "revertUrl can not be null");
+    $assert(options.revertUrl, 'revertUrl can not be null');
-            $assert(options.lockUrl, "lockUrl can not be null");
+    $assert(options.lockUrl, 'lockUrl can not be null');
-            $assert(options.session, "session can not be null");
+    $assert(options.session, 'session can not be null');
-            $assert(options.timestamp, "timestamp can not be null");
+    $assert(options.timestamp, 'timestamp can not be null');
 
-            this.documentUrl = options.documentUrl;
+    this.documentUrl = options.documentUrl;
-            this.revertUrl = options.revertUrl;
+    this.revertUrl = options.revertUrl;
-            this.lockUrl = options.lockUrl;
+    this.lockUrl = options.lockUrl;
-            this.timestamp = options.timestamp;
+    this.timestamp = options.timestamp;
-            this.session = options.session;
+    this.session = options.session;
+  },
+
+  saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
+    const data = {
+      id: mapId,
+      xml: mapXml,
+      properties: pref,
+    };
+
+    const persistence = this;
+    let query = `minor=${!saveHistory}`;
+    query = `${query}&timestamp=${this.timestamp}`;
+    query = `${query}&session=${this.session}`;
+
+    if (!persistence.onSave) {
+      // Mark save in process and fire a event unlocking the save ...
+      persistence.onSave = true;
+      persistence.clearTimeout = setTimeout(() => {
+        persistence.clearTimeout = null;
+        persistence.onSave = false;
+      }, 10000);
+
+      $.ajax({
+        url: `${this.documentUrl.replace('{id}', mapId)}?${query}`,
+        type: 'put',
+        dataType: 'json',
+        data: JSON.stringify(data),
+        contentType: 'application/json; charset=utf-8',
+        async: !sync,
+
+        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') };
 
-        saveMapXml: function (mapId, mapXml, pref, saveHistory, events, sync) {
+          const contentType = xhr.getResponseHeader('Content-Type');
-
+          if (contentType != null && contentType.indexOf('application/json') != -1) {
-            var data = {
+            let serverMsg = null;
-                id: mapId,
+            try {
-                xml: mapXml,
+              serverMsg = $.parseJSON(responseText);
-                properties: pref
+              serverMsg = serverMsg.globalSeverity ? serverMsg : null;
-            };
+            } catch (e) {
-
+              // Message could not be decoded ...
-            var persistence = this;
-            var query = "minor=" + !saveHistory;
-            query = query + "&timestamp=" + this.timestamp;
-            query = query + "&session=" + this.session;
-
-            if (!persistence.onSave) {
-
-                // Mark save in process and fire a event unlocking the save ...
-                persistence.onSave = true;
-                persistence.clearTimeout = setTimeout(function () {
-                    persistence.clearTimeout = null;
-                    persistence.onSave = false;
-                }, 10000);
-
-                $.ajax({
-                    url: this.documentUrl.replace("{id}", mapId) + "?" + query,
-                    type: 'put',
-                    dataType: "json",
-                    data: JSON.stringify(data),
-                    contentType: "application/json; charset=utf-8",
-                    async: !sync,
-
-                    success: function (data, textStatus, jqXHRresponseText) {
-                        persistence.timestamp = data;
-                        events.onSuccess();
-                    },
-                    error: function (jqXHR, textStatus, errorThrown) {
-                        events.onError(persistence._buildError());
-                    },
-                    complete: function () {
-                        // Clear event timeout ...
-                        if (persistence.clearTimeout) {
-                            clearTimeout(persistence.clearTimeout);
-                        }
-                        persistence.onSave = false;
-                    },
-                    fail: function (xhr, textStatus) {
-
-                        var responseText = xhr.responseText;
-                        var userMsg = {severity: "SEVERE", message: $msg('SAVE_COULD_NOT_BE_COMPLETED')};
-
-                        var contentType = xhr.getResponseHeader("Content-Type");
-                        if (contentType != null && contentType.indexOf("application/json") != -1) {
-                            var serverMsg = null;
-                            try {
-                                serverMsg = $.parseJSON(responseText);
-                                serverMsg = serverMsg.globalSeverity ? serverMsg : null;
-                            } catch (e) {
-                                // Message could not be decoded ...
-                            }
-                            userMsg = persistence._buildError(serverMsg);
-
-                        } else {
-                            if (this.status == 405) {
-                                userMsg = {severity: "SEVERE", message: $msg('SESSION_EXPIRED')};
-                            }
-                        }
-                        events.onError(userMsg);
-                        persistence.onSave = false;
-                    }
-                });
             }
+            userMsg = persistence._buildError(serverMsg);
+          } else if (this.status == 405) {
+            userMsg = { severity: 'SEVERE', message: $msg('SESSION_EXPIRED') };
+          }
+          events.onError(userMsg);
+          persistence.onSave = false;
         },
-
+      });
-        discardChanges: function (mapId) {
-            $.ajax({
-                url: this.revertUrl.replace("{id}", mapId),
-                async: false,
-                method: 'post',
-                headers: {"Content-Type": "application/json; charset=utf-8", "Accept": "application/json"}
-            });
-        },
-
-        unlockMap: function (mindmap) {
-            var mapId = mindmap.getId();
-            $.ajax({
-                url: this.lockUrl.replace("{id}", mapId),
-                async: false,
-                method: 'put',
-                headers: {"Content-Type": "text/plain"},
-                data: "false"
-            });
-        },
-
-        _buildError: function (jsonSeverResponse) {
-            var message = jsonSeverResponse ? jsonSeverResponse.globalErrors[0] : null;
-            var severity = jsonSeverResponse ? jsonSeverResponse.globalSeverity : null;
-
-            if (!message) {
-                message = $msg('SAVE_COULD_NOT_BE_COMPLETED');
-            }
-
-            if (!severity) {
-                severity = "INFO";
-            }
-            return {severity: severity, message: message};
-        },
-
-        loadMapDom: function (mapId) {
-            // Let's try to open one from the local directory ...
-            var xml;
-            $.ajax({
-                url: this.documentUrl.replace("{id}", mapId) + "/xml",
-                method: 'get',
-                async: false,
-                headers: {"Content-Type": "text/plain", "Accept": "application/xml"},
-                success: function (responseText) {
-                    xml = responseText;
-                }
-            });
-
-            // If I could not load it from a file, hard code one.
-            if (xml == null) {
-                throw new Error("Map could not be loaded");
-            }
-
-            return xml;
-        }
     }
-);
+  },
+
+  discardChanges(mapId) {
+    $.ajax({
+      url: this.revertUrl.replace('{id}', mapId),
+      async: false,
+      method: 'post',
+      headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json' },
+    });
+  },
+
+  unlockMap(mindmap) {
+    const mapId = mindmap.getId();
+    $.ajax({
+      url: this.lockUrl.replace('{id}', mapId),
+      async: false,
+      method: 'put',
+      headers: { 'Content-Type': 'text/plain' },
+      data: 'false',
+    });
+  },
+
+  _buildError(jsonSeverResponse) {
+    let message = jsonSeverResponse ? jsonSeverResponse.globalErrors[0] : null;
+    let severity = jsonSeverResponse ? jsonSeverResponse.globalSeverity : null;
+
+    if (!message) {
+      message = $msg('SAVE_COULD_NOT_BE_COMPLETED');
+    }
+
+    if (!severity) {
+      severity = 'INFO';
+    }
+    return { severity, message };
+  },
+
+  loadMapDom(mapId) {
+    // Let's try to open one from the local directory ...
+    let xml;
+    $.ajax({
+      url: `${this.documentUrl.replace('{id}', mapId)}/xml`,
+      method: 'get',
+      async: false,
+      headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' },
+      success(responseText) {
+        xml = responseText;
+      },
+    });
+
+    // If I could not load it from a file, hard code one.
+    if (xml == null) {
+      throw new Error('Map could not be loaded');
+    }
+
+    return xml;
+  },
+});
 
 export default RESTPersistenceManager;

packages/mindplot/lib/components/ScreenManager.js

@@ -16,138 +16,135 @@
  *   limitations under the License.
  */
 const Core = require('@wismapping/core-js');
+
 const core = Core();
 
 const ScreenManager = new Class({
-    initialize: function (divElement) {
+  initialize(divElement) {
-        $assert(divElement, "can not be null");
+    $assert(divElement, 'can not be null');
-        this._divContainer = divElement;
+    this._divContainer = divElement;
-        this._padding = {x: 0, y: 0};
+    this._padding = { x: 0, y: 0 };
 
-        // Ignore default click event propagation. Prevent 'click' event on drag.
+    // Ignore default click event propagation. Prevent 'click' event on drag.
-        this._clickEvents = [];
+    this._clickEvents = [];
-        this._divContainer.bind('click', function (event) {
+    this._divContainer.bind('click', (event) => {
-            event.stopPropagation()
+      event.stopPropagation();
-        });
+    });
 
-        this._divContainer.bind('dblclick', function (event) {
+    this._divContainer.bind('dblclick', (event) => {
-            event.stopPropagation();
+      event.stopPropagation();
-            event.preventDefault();
+      event.preventDefault();
-        });
+    });
-    },
+  },
 
-    setScale: function (scale) {
+  setScale(scale) {
-        $assert(scale, 'Screen scale can not be null');
+    $assert(scale, 'Screen scale can not be null');
-        this._scale = scale;
+    this._scale = scale;
-    },
+  },
 
-    addEvent: function (event, listener) {
+  addEvent(event, listener) {
-        if (event == 'click')
+    if (event == 'click') this._clickEvents.push(listener);
-            this._clickEvents.push(listener);
+    else this._divContainer.bind(event, listener);
-        else
+  },
-            this._divContainer.bind(event, listener);
-    },
 
-    removeEvent: function (event, listener) {
+  removeEvent(event, listener) {
-        if (event == 'click') {
+    if (event == 'click') {
-            this._clickEvents.remove(listener);
+      this._clickEvents.remove(listener);
-        }
+    } else {
-        else {
+      this._divContainer.unbind(event, listener);
-            this._divContainer.unbind(event, listener);
-        }
-    },
-
-    fireEvent: function (type, event) {
-        if (type == 'click') {
-            _.each(this._clickEvents, function (listener) {
-                listener(type, event);
-            });
-        }
-        else {
-            this._divContainer.trigger(type, event);
-        }
-    },
-
-    _getElementPosition: function (elem) {
-        // Retrieve current element position.
-        var elementPosition = elem.getPosition();
-        var x = elementPosition.x;
-        var y = elementPosition.y;
-
-        // Add workspace offset.
-        x = x - this._padding.x;
-        y = y - this._padding.y;
-
-        // Scale coordinate in order to be relative to the workspace. That's coord/size;
-        x = x / this._scale;
-        y = y / this._scale;
-
-        // Remove decimal part..
-        return {x: x, y: y};
-    },
-
-    getWorkspaceIconPosition: function (e) {
-        // Retrieve current icon position.
-        var image = e.getImage();
-        var elementPosition = image.getPosition();
-        var imageSize = e.getSize();
-
-        //Add group offset
-        var iconGroup = e.getGroup();
-        var group = iconGroup.getNativeElement();
-        var coordOrigin = group.getCoordOrigin();
-        var groupSize = group.getSize();
-        var coordSize = group.getCoordSize();
-
-        var scale = {x: coordSize.width / parseInt(groupSize.width), y: coordSize.height / parseInt(groupSize.height)};
-
-        var x = (elementPosition.x - coordOrigin.x - (parseInt(imageSize.width) / 2)) / scale.x;
-        var y = (elementPosition.y - coordOrigin.y - (parseInt(imageSize.height) / 2)) / scale.y;
-
-        //Retrieve iconGroup Position
-        var groupPosition = iconGroup.getPosition();
-        x = x + groupPosition.x;
-        y = y + groupPosition.y;
-
-        //Retrieve topic Position
-        var topic = iconGroup.getTopic();
-        var topicPosition = this._getElementPosition(topic);
-        topicPosition.x = topicPosition.x - (parseInt(topic.getSize().width) / 2);
-
-        // Remove decimal part..
-        return {x: x + topicPosition.x, y: y + topicPosition.y};
-    },
-
-    getWorkspaceMousePosition: function (event) {
-        // Retrieve current mouse position.
-        var x = event.clientX;
-        var y = event.clientY;
-
-        //FIXME: paulo: why? Subtract div position.
-        /*var containerPosition = this.getContainer().position();
-         x = x - containerPosition.x;
-         y = y - containerPosition.y;*/
-
-        // Scale coordinate in order to be relative to the workspace. That's coordSize/size;
-        x = x * this._scale;
-        y = y * this._scale;
-
-        // Add workspace offset.
-        x = x + this._padding.x;
-        y = y + this._padding.y;
-
-        // Remove decimal part..
-        return new core.Point(x, y);
-    },
-
-    getContainer: function () {
-        return this._divContainer;
-    },
-
-    setOffset: function (x, y) {
-        this._padding.x = x;
-        this._padding.y = y;
     }
+  },
+
+  fireEvent(type, event) {
+    if (type == 'click') {
+      _.each(this._clickEvents, (listener) => {
+        listener(type, event);
+      });
+    } else {
+      this._divContainer.trigger(type, event);
+    }
+  },
+
+  _getElementPosition(elem) {
+    // Retrieve current element position.
+    const elementPosition = elem.getPosition();
+    let { x } = elementPosition;
+    let { y } = elementPosition;
+
+    // Add workspace offset.
+    x -= this._padding.x;
+    y -= this._padding.y;
+
+    // Scale coordinate in order to be relative to the workspace. That's coord/size;
+    x /= this._scale;
+    y /= this._scale;
+
+    // Remove decimal part..
+    return { x, y };
+  },
+
+  getWorkspaceIconPosition(e) {
+    // Retrieve current icon position.
+    const image = e.getImage();
+    const elementPosition = image.getPosition();
+    const imageSize = e.getSize();
+
+    // Add group offset
+    const iconGroup = e.getGroup();
+    const group = iconGroup.getNativeElement();
+    const coordOrigin = group.getCoordOrigin();
+    const groupSize = group.getSize();
+    const coordSize = group.getCoordSize();
+
+    const scale = { x: coordSize.width / parseInt(groupSize.width), y: coordSize.height / parseInt(groupSize.height) };
+
+    let x = (elementPosition.x - coordOrigin.x - (parseInt(imageSize.width) / 2)) / scale.x;
+    let y = (elementPosition.y - coordOrigin.y - (parseInt(imageSize.height) / 2)) / scale.y;
+
+    // Retrieve iconGroup Position
+    const groupPosition = iconGroup.getPosition();
+    x += groupPosition.x;
+    y += groupPosition.y;
+
+    // Retrieve topic Position
+    const topic = iconGroup.getTopic();
+    const topicPosition = this._getElementPosition(topic);
+    topicPosition.x -= (parseInt(topic.getSize().width) / 2);
+
+    // Remove decimal part..
+    return { x: x + topicPosition.x, y: y + topicPosition.y };
+  },
+
+  getWorkspaceMousePosition(event) {
+    // Retrieve current mouse position.
+    let x = event.clientX;
+    let y = event.clientY;
+
+    // FIXME: paulo: why? Subtract div position.
+    /* var containerPosition = this.getContainer().position();
+         x = x - containerPosition.x;
+         y = y - containerPosition.y; */
+
+    // Scale coordinate in order to be relative to the workspace. That's coordSize/size;
+    x *= this._scale;
+    y *= this._scale;
+
+    // Add workspace offset.
+    x += this._padding.x;
+    y += this._padding.y;
+
+    // Remove decimal part..
+    return new core.Point(x, y);
+  },
+
+  getContainer() {
+    return this._divContainer;
+  },
+
+  setOffset(x, y) {
+    this._padding.x = x;
+    this._padding.y = y;
+  },
 });
 
 export default ScreenManager;

packages/mindplot/lib/components/ShrinkConnector.js

@@ -15,100 +15,97 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
+
 const web2d = web2D();
 
-const Topic = require('./Topic').default
+const Topic = require('./Topic').default;
 const ActionDispatcher = require('./ActionDispatcher').default;
 
 const ShirinkConnector = new Class({
-    initialize: function (topic) {
+  initialize(topic) {
+    const ellipse = new web2D.Elipse(Topic.prototype.INNER_RECT_ATTRIBUTES);
+    this._ellipse = ellipse;
+    ellipse.setFill('rgb(62,118,179)');
 
-        var ellipse = new web2D.Elipse(Topic.prototype.INNER_RECT_ATTRIBUTES);
+    ellipse.setSize(Topic.CONNECTOR_WIDTH, Topic.CONNECTOR_WIDTH);
-        this._ellipse = ellipse;
+    ellipse.addEvent('click', (event) => {
-        ellipse.setFill('rgb(62,118,179)');
+      const model = topic.getModel();
+      const collapse = !model.areChildrenShrunken();
 
-        ellipse.setSize(Topic.CONNECTOR_WIDTH, Topic.CONNECTOR_WIDTH);
+      const topicId = topic.getId();
-        ellipse.addEvent('click', function (event) {
+      const actionDispatcher = ActionDispatcher.getInstance();
-            var model = topic.getModel();
+      actionDispatcher.shrinkBranch([topicId], collapse);
-            var collapse = !model.areChildrenShrunken();
 
-            var topicId = topic.getId();
+      event.stopPropagation();
-            var actionDispatcher = ActionDispatcher.getInstance();
+    });
-            actionDispatcher.shrinkBranch([topicId], collapse);
 
-            event.stopPropagation();
+    ellipse.addEvent('mousedown', (event) => {
+      // Avoid node creation ...
+      event.stopPropagation();
+    });
 
-        });
+    ellipse.addEvent('dblclick', (event) => {
+      // Avoid node creation ...
+      event.stopPropagation();
+    });
 
-        ellipse.addEvent('mousedown', function (event) {
+    ellipse.addEvent('mouseover', (event) => {
-            // Avoid node creation ...
+      ellipse.setFill('rgb(153, 0, 255)');
-            event.stopPropagation();
+    });
-        });
+    const me = this;
+    ellipse.addEvent('mouseout', (event) => {
+      const color = topic.getBackgroundColor();
+      me.setFill(color);
+    });
 
-        ellipse.addEvent('dblclick', function (event) {
+    ellipse.setCursor('default');
-            // Avoid node creation ...
+    this._fillColor = '#f7f7f7';
-            event.stopPropagation();
+    const model = topic.getModel();
-        });
+    this.changeRender(model.areChildrenShrunken());
+  },
 
-        ellipse.addEvent('mouseover', function (event) {
+  changeRender(isShrink) {
-
+    const elipse = this._ellipse;
-            ellipse.setFill('rgb(153, 0, 255)');
+    if (isShrink) {
-        });
+      elipse.setStroke('2', 'solid');
-        var me = this;
+    } else {
-        ellipse.addEvent('mouseout', function (event) {
+      elipse.setStroke('1', 'solid');
-            var color = topic.getBackgroundColor();
-            me.setFill(color);
-        });
-
-        ellipse.setCursor('default');
-        this._fillColor = '#f7f7f7';
-        var model = topic.getModel();
-        this.changeRender(model.areChildrenShrunken());
-
-    },
-
-    changeRender: function (isShrink) {
-        var elipse = this._ellipse;
-        if (isShrink) {
-            elipse.setStroke('2', 'solid');
-        } else {
-            elipse.setStroke('1', 'solid');
-        }
-    },
-
-    setVisibility: function (value) {
-        this._ellipse.setVisibility(value);
-    },
-
-    setOpacity: function (opacity) {
-        this._ellipse.setOpacity(opacity);
-    },
-
-    setFill: function (color) {
-        this._fillColor = color;
-        this._ellipse.setFill(color);
-    },
-
-    setAttribute: function (name, value) {
-        this._ellipse.setAttribute(name, value);
-    },
-
-    addToWorkspace: function (group) {
-        group.append(this._ellipse);
-    },
-
-    setPosition: function (x, y) {
-        this._ellipse.setPosition(x, y);
-    },
-
-    moveToBack: function () {
-        this._ellipse.moveToBack();
-    },
-
-    moveToFront: function () {
-        this._ellipse.moveToFront();
     }
+  },
+
+  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/lib/components/StandaloneActionDispatcher.js

@@ -29,353 +29,347 @@ const ChangeFeatureToTopicCommand = require('./commands/ChangeFeatureToTopicComm
 const NodeModel = require('./model/NodeModel').default;
 
 const StandaloneActionDispatcher = new Class(
-    /** @lends StandaloneActionDispatcher */ {
+  /** @lends StandaloneActionDispatcher */ {
-        Extends: ActionDispatcher,
+    Extends: ActionDispatcher,
-        /**
+    /**
          * @extends mindplot.ActionDispatcher
          * @constructs
          * @param {mindplot.CommandContext} commandContext
          */
-        initialize: function (commandContext) {
+    initialize(commandContext) {
-            this.parent(commandContext);
+      this.parent(commandContext);
-            this._actionRunner = new DesignerActionRunner(commandContext, this);
+      this._actionRunner = new DesignerActionRunner(commandContext, this);
-        },
+    },
 
-        /** */
+    /** */
-        addTopics: function (models, parentTopicsId) {
+    addTopics(models, parentTopicsId) {
-            var command = new AddTopicCommand(models, parentTopicsId);
+      const command = new AddTopicCommand(models, parentTopicsId);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        addRelationship: function (model) {
+    addRelationship(model) {
-            var command = new AddRelationshipCommand(model);
+      const command = new AddRelationshipCommand(model);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        deleteEntities: function (topicsIds, relIds) {
+    deleteEntities(topicsIds, relIds) {
-            var command = new DeleteCommand(topicsIds, relIds);
+      const command = new DeleteCommand(topicsIds, relIds);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        dragTopic: function (topicId, position, order, parentTopic) {
+    dragTopic(topicId, position, order, parentTopic) {
-            var command = new DragTopicCommand(topicId, position, order, parentTopic);
+      const command = new DragTopicCommand(topicId, position, order, parentTopic);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        moveTopic: function (topicId, position) {
+    moveTopic(topicId, position) {
-            $assert($defined(topicId), 'topicsId can not be null');
+      $assert($defined(topicId), 'topicsId can not be null');
-            $assert($defined(position), 'position can not be null');
+      $assert($defined(position), 'position can not be null');
 
-            var commandFunc = function (topic, value) {
+      const commandFunc = function (topic, value) {
-                var result = topic.getPosition();
+        const result = topic.getPosition();
-                EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
+        EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
-                    node: topic.getModel(),
+          node: topic.getModel(),
-                    position: value,
+          position: value,
-                });
+        });
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicId, position);
+      const command = new GenericFunctionCommand(commandFunc, topicId, position);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        moveControlPoint: function (ctrlPoint, point) {
+    moveControlPoint(ctrlPoint, point) {
-            var command = new MoveControlPointCommand(ctrlPoint, point);
+      const command = new MoveControlPointCommand(ctrlPoint, point);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeFontStyleToTopic: function (topicsIds) {
+    changeFontStyleToTopic(topicsIds) {
-            var commandFunc = function (topic) {
+      const commandFunc = function (topic) {
-                var result = topic.getFontStyle();
+        const result = topic.getFontStyle();
-                var style = result == 'italic' ? 'normal' : 'italic';
+        const style = result == 'italic' ? 'normal' : 'italic';
-                topic.setFontStyle(style, true);
+        topic.setFontStyle(style, true);
-                return result;
+        return result;
-            };
+      };
-            var command = new GenericFunctionCommand(commandFunc, topicsIds);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeTextToTopic: function (topicsIds, text) {
+    changeTextToTopic(topicsIds, text) {
-            $assert($defined(topicsIds), 'topicsIds can not be null');
+      $assert($defined(topicsIds), 'topicsIds can not be null');
 
-            var commandFunc = function (topic, value) {
+      const commandFunc = function (topic, value) {
-                var result = topic.getText();
+        const result = topic.getText();
-                topic.setText(value);
+        topic.setText(value);
-                return result;
+        return result;
-            };
+      };
-            commandFunc.commandType = 'changeTextToTopic';
+      commandFunc.commandType = 'changeTextToTopic';
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds, text);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds, text);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeFontFamilyToTopic: function (topicIds, fontFamily) {
+    changeFontFamilyToTopic(topicIds, fontFamily) {
-            $assert(topicIds, 'topicIds can not be null');
+      $assert(topicIds, 'topicIds can not be null');
-            $assert(fontFamily, 'fontFamily can not be null');
+      $assert(fontFamily, 'fontFamily can not be null');
 
-            var commandFunc = function (topic, fontFamily) {
+      const commandFunc = function (topic, fontFamily) {
-                var result = topic.getFontFamily();
+        const result = topic.getFontFamily();
-                topic.setFontFamily(fontFamily, true);
+        topic.setFontFamily(fontFamily, true);
 
-                topic._adjustShapes();
+        topic._adjustShapes();
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicIds, fontFamily);
+      const command = new GenericFunctionCommand(commandFunc, topicIds, fontFamily);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeFontColorToTopic: function (topicsIds, color) {
+    changeFontColorToTopic(topicsIds, color) {
-            $assert(topicsIds, 'topicIds can not be null');
+      $assert(topicsIds, 'topicIds can not be null');
-            $assert(color, 'color can not be null');
+      $assert(color, 'color can not be null');
 
-            var commandFunc = function (topic, color) {
+      const commandFunc = function (topic, color) {
-                var result = topic.getFontColor();
+        const result = topic.getFontColor();
-                topic.setFontColor(color, true);
+        topic.setFontColor(color, true);
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds, color);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds, color);
-            command.discardDuplicated = 'fontColorCommandId';
+      command.discardDuplicated = 'fontColorCommandId';
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeBackgroundColorToTopic: function (topicsIds, color) {
+    changeBackgroundColorToTopic(topicsIds, color) {
-            $assert(topicsIds, 'topicIds can not be null');
+      $assert(topicsIds, 'topicIds can not be null');
-            $assert(color, 'color can not be null');
+      $assert(color, 'color can not be null');
 
-            var commandFunc = function (topic, color) {
+      const commandFunc = function (topic, color) {
-                var result = topic.getBackgroundColor();
+        const result = topic.getBackgroundColor();
-                topic.setBackgroundColor(color);
+        topic.setBackgroundColor(color);
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds, color);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds, color);
-            command.discardDuplicated = 'backColor';
+      command.discardDuplicated = 'backColor';
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeBorderColorToTopic: function (topicsIds, color) {
+    changeBorderColorToTopic(topicsIds, color) {
-            $assert(topicsIds, 'topicIds can not be null');
+      $assert(topicsIds, 'topicIds can not be null');
-            $assert(color, 'topicIds can not be null');
+      $assert(color, 'topicIds can not be null');
 
-            var commandFunc = function (topic, color) {
+      const commandFunc = function (topic, color) {
-                var result = topic.getBorderColor();
+        const result = topic.getBorderColor();
-                topic.setBorderColor(color);
+        topic.setBorderColor(color);
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds, color);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds, color);
-            command.discardDuplicated = 'borderColorCommandId';
+      command.discardDuplicated = 'borderColorCommandId';
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeFontSizeToTopic: function (topicsIds, size) {
+    changeFontSizeToTopic(topicsIds, size) {
-            $assert(topicsIds, 'topicIds can not be null');
+      $assert(topicsIds, 'topicIds can not be null');
-            $assert(size, 'size can not be null');
+      $assert(size, 'size can not be null');
 
-            var commandFunc = function (topic, size) {
+      const commandFunc = function (topic, size) {
-                var result = topic.getFontSize();
+        const result = topic.getFontSize();
-                topic.setFontSize(size, true);
+        topic.setFontSize(size, true);
 
-                topic._adjustShapes();
+        topic._adjustShapes();
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds, size);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds, size);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeShapeTypeToTopic: function (topicsIds, shapeType) {
+    changeShapeTypeToTopic(topicsIds, shapeType) {
-            $assert(topicsIds, 'topicsIds can not be null');
+      $assert(topicsIds, 'topicsIds can not be null');
-            $assert(shapeType, 'shapeType can not be null');
+      $assert(shapeType, 'shapeType can not be null');
 
-            var commandFunc = function (topic, shapeType) {
+      const commandFunc = function (topic, shapeType) {
-                var result = topic.getShapeType();
+        const result = topic.getShapeType();
-                topic.setShapeType(shapeType, true);
+        topic.setShapeType(shapeType, true);
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds, shapeType);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds, shapeType);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeFontWeightToTopic: function (topicsIds) {
+    changeFontWeightToTopic(topicsIds) {
-            $assert(topicsIds, 'topicsIds can not be null');
+      $assert(topicsIds, 'topicsIds can not be null');
 
-            var commandFunc = function (topic) {
+      const commandFunc = function (topic) {
-                var result = topic.getFontWeight();
+        const result = topic.getFontWeight();
-                var weight = result == 'bold' ? 'normal' : 'bold';
+        const weight = result == 'bold' ? 'normal' : 'bold';
-                topic.setFontWeight(weight, true);
+        topic.setFontWeight(weight, true);
 
-                topic._adjustShapes();
+        topic._adjustShapes();
-                return result;
+        return result;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        shrinkBranch: function (topicsIds, collapse) {
+    shrinkBranch(topicsIds, collapse) {
-            $assert(topicsIds, 'topicsIds can not be null');
+      $assert(topicsIds, 'topicsIds can not be null');
 
-            var commandFunc = function (topic, isShrink) {
+      const commandFunc = function (topic, isShrink) {
-                topic.setChildrenShrunken(isShrink);
+        topic.setChildrenShrunken(isShrink);
-                return !isShrink;
+        return !isShrink;
-            };
+      };
 
-            var command = new GenericFunctionCommand(commandFunc, topicsIds, collapse);
+      const command = new GenericFunctionCommand(commandFunc, topicsIds, collapse);
-            this.execute(command, false);
+      this.execute(command, false);
-        },
+    },
 
-        /** */
+    /** */
-        addFeatureToTopic: function (topicId, featureType, attributes) {
+    addFeatureToTopic(topicId, featureType, attributes) {
-            var command = new AddFeatureToTopicCommand(topicId, featureType, attributes);
+      const command = new AddFeatureToTopicCommand(topicId, featureType, attributes);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        changeFeatureToTopic: function (topicId, featureId, attributes) {
+    changeFeatureToTopic(topicId, featureId, attributes) {
-            var command = new ChangeFeatureToTopicCommand(topicId, featureId, attributes);
+      const command = new ChangeFeatureToTopicCommand(topicId, featureId, attributes);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        removeFeatureFromTopic: function (topicId, featureId) {
+    removeFeatureFromTopic(topicId, featureId) {
-            var command = new RemoveFeatureFromTopicCommand(topicId, featureId);
+      const command = new RemoveFeatureFromTopicCommand(topicId, featureId);
-            this.execute(command);
+      this.execute(command);
-        },
+    },
 
-        /** */
+    /** */
-        execute: function (command) {
+    execute(command) {
-            this._actionRunner.execute(command);
+      this._actionRunner.execute(command);
-        },
+    },
-    }
+  },
 );
 
 const CommandContext = new Class(
-    /** @lends CommandContext */ {
+  /** @lends CommandContext */ {
-        /**
+    /**
          * @constructs
          * @param {mindplot.Designer} designer
          */
-        initialize: function (designer) {
+    initialize(designer) {
-            $assert(designer, 'designer can not be null');
+      $assert(designer, 'designer can not be null');
-            this._designer = designer;
+      this._designer = designer;
-        },
+    },
 
-        /** */
+    /** */
-        findTopics: function (topicsIds) {
+    findTopics(topicsIds) {
-            $assert($defined(topicsIds), 'topicsIds can not be null');
+      $assert($defined(topicsIds), 'topicsIds can not be null');
-            if (!(topicsIds instanceof Array)) {
+      if (!(topicsIds instanceof Array)) {
-                topicsIds = [topicsIds];
+        topicsIds = [topicsIds];
-            }
+      }
 
-            var designerTopics = this._designer.getModel().getTopics();
+      const designerTopics = this._designer.getModel().getTopics();
-            var result = designerTopics.filter(function (topic) {
+      const result = designerTopics.filter((topic) => topicsIds.contains(topic.getId()));
-                return topicsIds.contains(topic.getId());
-            });
 
-            if (result.length != topicsIds.length) {
+      if (result.length != topicsIds.length) {
-                var ids = designerTopics.map(function (topic) {
+        const ids = designerTopics.map((topic) => topic.getId());
-                    return topic.getId();
+        $assert(
-                });
+          result.length == topicsIds.length,
-                $assert(
+          `Could not find topic. Result:${
-                    result.length == topicsIds.length,
+            result
-                    'Could not find topic. Result:' +
+          }, Filter Criteria:${
-                        result +
+            topicsIds
-                        ', Filter Criteria:' +
+          }, Current Topics: [${
-                        topicsIds +
+            ids
-                        ', Current Topics: [' +
+          }]`,
-                        ids +
+        );
-                        ']'
+      }
-                );
+      return result;
-            }
+    },
-            return result;
-        },
 
-        /** */
+    /** */
-        deleteTopic: function (topic) {
+    deleteTopic(topic) {
-            this._designer.removeTopic(topic);
+      this._designer.removeTopic(topic);
-        },
+    },
 
-        /** */
+    /** */
-        createTopic: function (model) {
+    createTopic(model) {
-            $assert(model, 'model can not be null');
+      $assert(model, 'model can not be null');
-            return this._designer.nodeModelToNodeGraph(model);
+      return this._designer.nodeModelToNodeGraph(model);
-        },
+    },
 
-        /** */
+    /** */
-        createModel: function () {
+    createModel() {
-            var mindmap = this._designer.getMindmap();
+      const mindmap = this._designer.getMindmap();
-            return mindmap.createNode(NodeModel.MAIN_TOPIC_TYPE);
+      return mindmap.createNode(NodeModel.MAIN_TOPIC_TYPE);
-        },
+    },
 
-        /** */
+    /** */
-        addTopic: function (topic) {
+    addTopic(topic) {
-            var mindmap = this._designer.getMindmap();
+      const mindmap = this._designer.getMindmap();
-            return mindmap.addBranch(topic.getModel());
+      return mindmap.addBranch(topic.getModel());
-        },
+    },
 
-        /** */
+    /** */
-        connect: function (childTopic, parentTopic) {
+    connect(childTopic, parentTopic) {
-            childTopic.connectTo(parentTopic, this._designer._workspace);
+      childTopic.connectTo(parentTopic, this._designer._workspace);
-        },
+    },
 
-        /** */
+    /** */
-        disconnect: function (topic) {
+    disconnect(topic) {
-            topic.disconnect(this._designer._workspace);
+      topic.disconnect(this._designer._workspace);
-        },
+    },
 
-        /** */
+    /** */
-        addRelationship: function (model) {
+    addRelationship(model) {
-            $assert(model, 'model cannot be null');
+      $assert(model, 'model cannot be null');
-            return this._designer.addRelationship(model);
+      return this._designer.addRelationship(model);
-        },
+    },
 
-        /** */
+    /** */
-        deleteRelationship: function (relationship) {
+    deleteRelationship(relationship) {
-            this._designer.deleteRelationship(relationship);
+      this._designer.deleteRelationship(relationship);
-        },
+    },
 
-        /** */
+    /** */
-        findRelationships: function (relIds) {
+    findRelationships(relIds) {
-            $assert($defined(relIds), 'relId can not be null');
+      $assert($defined(relIds), 'relId can not be null');
-            if (!(relIds instanceof Array)) {
+      if (!(relIds instanceof Array)) {
-                relIds = [relIds];
+        relIds = [relIds];
-            }
+      }
 
-            var designerRel = this._designer.getModel().getRelationships();
+      const designerRel = this._designer.getModel().getRelationships();
-            return designerRel.filter(function (rel) {
+      return designerRel.filter((rel) => relIds.contains(rel.getId()));
-                return relIds.contains(rel.getId());
+    },
-            });
-        },
 
-        /** */
+    /** */
-        moveTopic: function (topic, position) {
+    moveTopic(topic, position) {
-            $assert(topic, 'topic cannot be null');
+      $assert(topic, 'topic cannot be null');
-            $assert(position, 'position cannot be null');
+      $assert(position, 'position cannot be null');
-            EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
+      EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
-                node: topic.getModel(),
+        node: topic.getModel(),
-                position: position,
+        position,
-            });
+      });
-        },
+    },
-    }
+  },
 );
 
 export { StandaloneActionDispatcher, CommandContext };

packages/mindplot/lib/components/TextEditor.js

@@ -1,270 +1,260 @@
-/*
+/*
- *    Copyright [2015] [wisemapping]
+ *    Copyright [2015] [wisemapping]
- *
+ *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
- *
+ *
- *       http://www.wisemapping.org/license
+ *       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.
+ * 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
+ *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *   limitations under the License.
- */
+ */
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
-const web2d = web2D()
+
-
+const web2d = web2D();
-const ActionDispatcher = require('./ActionDispatcher').default 
+
-
+const ActionDispatcher = require('./ActionDispatcher').default;
-//FIXME: Not used!
+
-const TextEditor = new Class({
+// FIXME: Not used!
-    initialize: function (topic) {
+const TextEditor = new Class({
-        this._topic = topic;
+  initialize(topic) {
-    },
+    this._topic = topic;
-
+  },
-    _buildEditor: function () {
+
-
+  _buildEditor() {
-        this._size = {width: 500, height: 100};
+    this._size = { width: 500, height: 100 };
-        var result = new Element('div');
+    const result = new Element('div');
-        result.setStyles({
+    result.setStyles({
-                position: "absolute",
+      position: 'absolute',
-                display: "none",
+      display: 'none',
-                zIndex: "8",
+      zIndex: '8',
-                width: "500px",
+      width: '500px',
-                height: "100px"
+      height: '100px',
-            }
+    });
-        );
+
-
+    const inputContainer = new Element('div');
-
+    inputContainer.setStyles({
-        var inputContainer = new Element('div');
+      border: 'none',
-        inputContainer.setStyles({
+      overflow: 'auto',
-            border: "none",
+    });
-            overflow: "auto"
+    inputContainer.inject(result);
-        });
+
-        inputContainer.inject(result);
+    const inputText = new Element('input',
-
+      {
-        var inputText = new Element('input',
+        type: 'text',
-            {
+        tabindex: '-1',
-                type: "text",
+        value: '',
-                tabindex: '-1',
+      });
-                value: ""
+    inputText.setStyles({
-            }
+      border: 'none',
-        );
+      background: 'transparent',
-        inputText.setStyles({
+    });
-            border: "none",
+    inputText.inject(inputContainer);
-            background: "transparent"
+
-        });
+    const spanContainer = new Element('div');
-        inputText.inject(inputContainer);
+    spanContainer.setStyle('visibility', 'hidden');
-
+    spanContainer.inject(result);
-        var spanContainer = new Element('div');
+
-        spanContainer.setStyle('visibility', "hidden");
+    const spanElem = new Element('span', { tabindex: '-1' });
-        spanContainer.inject(result);
+    spanElem.setStyle('white-space', 'nowrap');
-
+    spanElem.setStyle('nowrap', 'nowrap');
-        var spanElem = new Element('span', {tabindex: "-1"});
+    spanElem.inject(spanContainer);
-        spanElem.setStyle('white-space', "nowrap");
+
-        spanElem.setStyle('nowrap', 'nowrap');
+    return result;
-        spanElem.inject(spanContainer);
+  },
-
+
-
+  _registerEvents(divElem) {
-        return result;
+    const inputElem = this._getTextareaElem();
-    },
+    const spanElem = this._getSpanElem();
-
+    const me = this;
-    _registerEvents: function (divElem) {
+
-        var inputElem = this._getTextareaElem();
+    divElem.addEvent('keydown', (event) => {
-        var spanElem = this._getSpanElem();
+      switch (event.key) {
-        var me = this;
+        case 'esc':
-
+          me.close(false);
-        divElem.addEvent('keydown', function (event) {
+          break;
-            switch (event.key) {
+        case 'enter':
-                case 'esc':
+          me.close(true);
-                    me.close(false);
+          break;
-                    break;
+        default:
-                case 'enter':
+          spanElem.innerHTML = inputElem.value;
-                    me.close(true);
+          var size = inputElem.value.length + 1;
-                    break;
+          inputElem.size = size;
-                default:
+          if (spanElem.offsetWidth > (parseInt(divElem.style.width) - 100)) {
-                    spanElem.innerHTML = inputElem.value;
+            divElem.style.width = `${spanElem.offsetWidth + 100}px`;
-                    var size = inputElem.value.length + 1;
+          }
-                    inputElem.size = size;
+          break;
-                    if (spanElem.offsetWidth > (parseInt(divElem.style.width) - 100)) {
+      }
-                        divElem.style.width = (spanElem.offsetWidth + 100) + "px";
+      event.stopPropagation();
-                    }
+    });
-                    break;
+
-            }
+    // If the user clicks on the input, all event must be ignored ...
-            event.stopPropagation();
+    divElem.addEvent('click', (event) => {
-        });
+      event.stopPropagation();
-
+    });
-        // If the user clicks on the input, all event must be ignored ...
+    divElem.addEvent('dblclick', (event) => {
-        divElem.addEvent('click', function (event) {
+      event.stopPropagation();
-            event.stopPropagation();
+    });
-        });
+    divElem.addEvent('mousedown', (event) => {
-        divElem.addEvent('dblclick', function (event) {
+      event.stopPropagation();
-            event.stopPropagation();
+    });
-        });
+  },
-        divElem.addEvent('mousedown', function (event) {
+
-            event.stopPropagation();
+  isVisible() {
-        });
+    return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
-    },
+  },
-
+
-    isVisible: function () {
+  _updateModel() {
-        return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
+    if (this._topic.getText() != this._getText()) {
-    },
+      const text = this._getText();
-
+      const topicId = this._topic.getId();
-    _updateModel: function () {
+
-
+      const actionDispatcher = ActionDispatcher.getInstance();
-        if (this._topic.getText() != this._getText()) {
+      actionDispatcher.changeTextToTopic([topicId], text);
-            var text = this._getText();
+    }
-            var topicId = this._topic.getId();
+  },
-
+
-            var actionDispatcher = ActionDispatcher.getInstance();
+  show(text) {
-            actionDispatcher.changeTextToTopic([topicId], text);
+    if (!this.isVisible()) {
-        }
+      // Create editor ui
-    },
+      const editorElem = this._buildEditor();
-
+      editorElem.inject($(document.body)[0]);
-    show: function (text) {
+
-
+      this._containerElem = editorElem;
-        if (!this.isVisible()) {
+      this._registerEvents(editorElem);
-            //Create editor ui
+      this._showEditor(text);
-            var editorElem = this._buildEditor();
+    }
-            editorElem.inject($(document.body)[0]);
+  },
-
+
-            this._containerElem = editorElem;
+  _showEditor(defaultText) {
-            this._registerEvents(editorElem);
+    const topic = this._topic;
-            this._showEditor(text);
+
-        }
+    // Hide topic text ...
-    },
+    topic.getTextShape().setVisibility(false);
-
+
-    _showEditor: function (defaultText) {
+    // Set Editor Style
-
+    const nodeText = topic.getTextShape();
-        var topic = this._topic;
+    const font = nodeText.getFont();
-
+    font.size = nodeText.getHtmlFontSize();
-        // Hide topic text ...
+    font.color = nodeText.getColor();
-        topic.getTextShape().setVisibility(false);
+    this._setStyle(font);
-
+
-        // Set Editor Style
+    // Set editor's initial text
-        var nodeText = topic.getTextShape();
+    const text = $defined(defaultText) ? defaultText : topic.getText();
-        var font = nodeText.getFont();
+    this._setText(text);
-        font.size = nodeText.getHtmlFontSize();
+
-        font.color = nodeText.getColor();
+    const me = this;
-        this._setStyle(font);
+    // Set editor's initial size
-
+    const displayFunc = function () {
-        // Set editor's initial text
+      // Position the editor and set the size...
-        var text = $defined(defaultText) ? defaultText : topic.getText();
+      const textShape = me._topic.getTextShape();
-        this._setText(text);
+
-
+      me._containerElem.css('display', 'block');
-        var me = this;
+
-        // Set editor's initial size
+      me._containerElem.offset(textShape.getNativePosition());
-        var displayFunc = function () {
+      // Set size ...
-            // Position the editor and set the size...
+      const elemSize = topic.getSize();
-            var textShape = me._topic.getTextShape();
+      me._setEditorSize(elemSize.width, elemSize.height);
-
+
-            me._containerElem.css('display', 'block');
+      const textareaElem = me._getTextareaElem();
-
+      textareaElem.focus();
-            me._containerElem.offset(textShape.getNativePosition());
+      me._positionCursor(textareaElem, !$defined(defaultText));
-            // Set size ...
+    };
-            var elemSize = topic.getSize();
+
-            me._setEditorSize(elemSize.width, elemSize.height);
+    displayFunc.delay(10);
-
+  },
-            var textareaElem = me._getTextareaElem();
+
-            textareaElem.focus();
+  _setStyle(fontStyle) {
-            me._positionCursor(textareaElem, !$defined(defaultText));
+    const inputField = this._getTextareaElem();
-
+    const spanField = this._getSpanElem();
-        };
+    if (!$defined(fontStyle.font)) {
-
+      fontStyle.font = 'Arial';
-        displayFunc.delay(10);
+    }
-    },
+    if (!$defined(fontStyle.style)) {
-
+      fontStyle.style = 'normal';
-    _setStyle: function (fontStyle) {
+    }
-        var inputField = this._getTextareaElem();
+    if (!$defined(fontStyle.weight)) {
-        var spanField = this._getSpanElem();
+      fontStyle.weight = 'normal';
-        if (!$defined(fontStyle.font)) {
+    }
-            fontStyle.font = "Arial";
+    if (!$defined(fontStyle.size)) {
-        }
+      fontStyle.size = 12;
-        if (!$defined(fontStyle.style)) {
+    }
-            fontStyle.style = "normal";
+    inputField.style.fontSize = `${fontStyle.size}px`;
-        }
+    inputField.style.fontFamily = fontStyle.font;
-        if (!$defined(fontStyle.weight)) {
+    inputField.style.fontStyle = fontStyle.style;
-            fontStyle.weight = "normal";
+    inputField.style.fontWeight = fontStyle.weight;
-        }
+    inputField.style.color = fontStyle.color;
-        if (!$defined(fontStyle.size)) {
+    spanField.style.fontFamily = fontStyle.font;
-            fontStyle.size = 12;
+    spanField.style.fontStyle = fontStyle.style;
-        }
+    spanField.style.fontWeight = fontStyle.weight;
-        inputField.style.fontSize = fontStyle.size + "px";
+    spanField.style.fontSize = `${fontStyle.size}px`;
-        inputField.style.fontFamily = fontStyle.font;
+  },
-        inputField.style.fontStyle = fontStyle.style;
+
-        inputField.style.fontWeight = fontStyle.weight;
+  _setText(text) {
-        inputField.style.color = fontStyle.color;
+    const inputField = this._getTextareaElem();
-        spanField.style.fontFamily = fontStyle.font;
+    inputField.size = text.length + 1;
-        spanField.style.fontStyle = fontStyle.style;
+    this._containerElem.style.width = `${inputField.size * parseInt(inputField.style.fontSize) + 100}px`;
-        spanField.style.fontWeight = fontStyle.weight;
+    const spanField = this._getSpanElem();
-        spanField.style.fontSize = fontStyle.size + "px";
+    spanField.innerHTML = text;
-    },
+    inputField.value = text;
-
+  },
-    _setText: function (text) {
+
-        var inputField = this._getTextareaElem();
+  _getText() {
-        inputField.size = text.length + 1;
+    return this._getTextareaElem().value;
-        this._containerElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
+  },
-        var spanField = this._getSpanElem();
+
-        spanField.innerHTML = text;
+  _getTextareaElem() {
-        inputField.value = text;
+    return this._containerElem.getElement('input');
-    },
+  },
-
+
-    _getText: function () {
+  _getSpanElem() {
-        return this._getTextareaElem().value;
+    return this._containerElem.getElement('span');
-    },
+  },
-
+
-    _getTextareaElem: function () {
+  _setEditorSize(width, height) {
-        return this._containerElem.getElement('input');
+    const textShape = this._topic.getTextShape();
-    },
+    const scale = web2d.utils.TransformUtil.workoutScale(textShape._peer);
-
+    this._size = { width: width * scale.width, height: height * scale.height };
-    _getSpanElem: function () {
+    this._containerElem.style.width = `${this._size.width * 2}px`;
-        return this._containerElem.getElement('span');
+    this._containerElem.style.height = `${this._size.height}px`;
-    },
+  },
-
+
-    _setEditorSize: function (width, height) {
+  _positionCursor(inputElem, selectText) {
-        var textShape = this._topic.getTextShape();
+    // Select text if it's required ...
-        var scale = web2d.utils.TransformUtil.workoutScale(textShape._peer);
+    if (inputElem.createTextRange) // ie
-        this._size = {width: width * scale.width, height: height * scale.height};
+    {
-        this._containerElem.style.width = this._size.width * 2 + "px";
+      const range = inputElem.createTextRange();
-        this._containerElem.style.height = this._size.height + "px";
+      const pos = inputElem.value.length;
-    },
+      if (!selectText) {
-
+        range.select();
-    _positionCursor: function (inputElem, selectText) {
+        range.move('character', pos);
-        // Select text if it's required ...
+      } else {
-        if (inputElem.createTextRange) //ie
+        range.move('character', pos);
-        {
+        range.select();
-            var range = inputElem.createTextRange();
+      }
-            var pos = inputElem.value.length;
+    } else if (!selectText) {
-            if (!selectText) {
+      inputElem.setSelectionRange(0, inputElem.value.length);
-                range.select();
+    }
-                range.move("character", pos);
+  },
-            }
+
-            else {
+  close(update) {
-                range.move("character", pos);
+    if (this.isVisible()) {
-                range.select();
+      // Update changes ...
-            }
+      if (!$defined(update) || update) {
-        }
+        this._updateModel();
-        else if (!selectText) {
+      }
-            inputElem.setSelectionRange(0, inputElem.value.length);
+
-        }
+      // Let make the visible text in the node visible again ...
-    },
+      this._topic.getTextShape().setVisibility(true);
-
+
-    close: function (update) {
+      // Remove it form the screen ...
-        if (this.isVisible()) {
+      this._containerElem.dispose();
-            // Update changes ...
+      this._containerElem = null;
-            if (!$defined(update) || update) {
+    }
-                this._updateModel();
+  },
-            }
+});
-
+
-            // Let make the visible text in the node visible again ...
+export default TextEditor;
-            this._topic.getTextShape().setVisibility(true);
-
-            // Remove it form the screen ...
-            this._containerElem.dispose();
-            this._containerElem = null;
-        }
-    }
-});
-
-export default TextEditor;

packages/mindplot/lib/components/TextEditorFactory.js

@@ -20,11 +20,11 @@ const TextEditor = require('./TextEditor').default;
 const TextEditorFactory = {};
 
 TextEditorFactory.getTextEditorFromName = function (name) {
-    var editorClass = null;
+  let editorClass = null;
-    if (name == 'RichTextEditor') {
+  if (name == 'RichTextEditor') {
-        editorClass = RichTextEditor;
+    editorClass = RichTextEditor;
-    } else {
+  } else {
-        editorClass = TextEditor;
+    editorClass = TextEditor;
-    }
+  }
-    return editorClass;
+  return editorClass;
 };

packages/mindplot/lib/components/TopicEventDispatcher.js

@@ -20,66 +20,66 @@ const MultilineTextEditor = require('./MultilineTextEditor').default;
 const { TopicShape } = require('./model/INodeModel');
 
 const TopicEventDispatcher = new Class({
-    Extends: Events,
+  Extends: Events,
-    Static: {
+  Static: {
-        _instance: null,
+    _instance: null,
 
-        configure: function (readOnly) {
+    configure(readOnly) {
-            this._instance = new TopicEventDispatcher(readOnly);
+      this._instance = new TopicEventDispatcher(readOnly);
-        },
-
-        getInstance: function () {
-            return this._instance;
-        },
     },
 
-    initialize: function (readOnly) {
+    getInstance() {
-        this._readOnly = readOnly;
+      return this._instance;
-        this._activeEditor = null;
-        this._multilineEditor = new MultilineTextEditor();
     },
+  },
 
-    close: function (update) {
+  initialize(readOnly) {
-        if (this.isVisible()) {
+    this._readOnly = readOnly;
-            this._activeEditor.close(update);
+    this._activeEditor = null;
-            this._activeEditor = null;
+    this._multilineEditor = new MultilineTextEditor();
-        }
+  },
-    },
 
-    show: function (topic, options) {
+  close(update) {
-        this.process(TopicEvent.EDIT, topic, options);
+    if (this.isVisible()) {
-    },
+      this._activeEditor.close(update);
+      this._activeEditor = null;
+    }
+  },
 
-    process: function (eventType, topic, options) {
+  show(topic, options) {
-        $assert(eventType, 'eventType can not be null');
+    this.process(TopicEvent.EDIT, topic, options);
+  },
 
-        // Close all previous open editor ....
+  process(eventType, topic, options) {
-        if (this.isVisible()) {
+    $assert(eventType, 'eventType can not be null');
-            this.close();
-        }
 
-        // Open the new editor ...
+    // Close all previous open editor ....
-        var model = topic.getModel();
+    if (this.isVisible()) {
-        if (
+      this.close();
-            model.getShapeType() != TopicShape.IMAGE &&
+    }
-            !this._readOnly &&
-            eventType == TopicEvent.EDIT
-        ) {
-            this._multilineEditor.show(topic, options ? options.text : null);
-            this._activeEditor = this._multilineEditor;
-        } else {
-            this.fireEvent(eventType, { model: model, readOnly: this._readOnly });
-        }
-    },
 
-    isVisible: function () {
+    // Open the new editor ...
-        return this._activeEditor != null && this._activeEditor.isVisible();
+    const model = topic.getModel();
-    },
+    if (
+      model.getShapeType() != TopicShape.IMAGE
+            && !this._readOnly
+            && 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();
+  },
 });
 
 const TopicEvent = {
-    EDIT: 'editnode',
+  EDIT: 'editnode',
-    CLICK: 'clicknode',
+  CLICK: 'clicknode',
 };
 
 export { TopicEvent };

packages/mindplot/lib/components/TopicFeature.js

@@ -25,38 +25,36 @@ const NoteModel = require('./model/NoteModel').default;
 const NoteIcon = require('./NoteIcon').default;
 
 const TopicFeature = {
-    /** the icon object */
+  /** the icon object */
-    Icon: {
+  Icon: {
-        id: IconModel.FEATURE_TYPE,
+    id: IconModel.FEATURE_TYPE,
-        model: IconModel,
+    model: IconModel,
-        icon: ImageIcon
+    icon: ImageIcon,
-    },
+  },
 
-    /** the link object */
+  /** the link object */
-    Link: {
+  Link: {
-        id: LinkModel.FEATURE_TYPE,
+    id: LinkModel.FEATURE_TYPE,
-        model: LinkModel,
+    model: LinkModel,
-        icon: LinkIcon
+    icon: LinkIcon,
-    },
+  },
 
-    /** the note object */
+  /** the note object */
-    Note: {
+  Note: {
-        id: NoteModel.FEATURE_TYPE,
+    id: NoteModel.FEATURE_TYPE,
-        model: NoteModel,
+    model: NoteModel,
-        icon: NoteIcon
+    icon: NoteIcon,
-    },
+  },
 
-    /**
+  /**
      * @param id the feature metadata id
      * @return {Boolean} returns true if the given id is contained in the metadata array
      */
-    isSupported: function (id) {
+  isSupported(id) {
-        return TopicFeature._featuresMetadataById.some(function (elem) {
+    return TopicFeature._featuresMetadataById.some((elem) => elem.id == id);
-            return elem.id == id;
+  },
-        });
-    },
 
-    /**
+  /**
      * @param type
      * @param attributes
      * @throws will throw an error if type is null or undefined
@@ -64,17 +62,15 @@ const TopicFeature = {
      * @return {mindplot.model.FeatureModel} a new instance of the feature model subclass matching
      * the topic feature
      */
-    createModel: function (type, attributes) {
+  createModel(type, attributes) {
-        $assert(type, 'type can not be null');
+    $assert(type, 'type can not be null');
-        $assert(attributes, 'attributes can not be null');
+    $assert(attributes, 'attributes can not be null');
 
-        var model = TopicFeature._featuresMetadataById.filter(function (elem) {
+    const { model } = TopicFeature._featuresMetadataById.filter((elem) => elem.id == type)[0];
-            return elem.id == type;
+    return new model(attributes);
-        })[0].model;
+  },
-        return new model(attributes);
-    },
 
-    /**
+  /**
      * @param {mindplot.Topic} topic
      * @param {mindplot.model.FeatureModel} model
      * @param {Boolean} readOnly true if the editor is running in read-only mode
@@ -82,15 +78,13 @@ const TopicFeature = {
      * @throws will throw an error if model is null or undefined
      * @return {mindplot.Icon} a new instance of the icon subclass matching the topic feature
      */
-    createIcon: function (topic, model, readOnly) {
+  createIcon(topic, model, readOnly) {
-        $assert(topic, 'topic can not be null');
+    $assert(topic, 'topic can not be null');
-        $assert(model, 'model can not be null');
+    $assert(model, 'model can not be null');
 
-        var icon = TopicFeature._featuresMetadataById.filter(function (elem) {
+    const { icon } = TopicFeature._featuresMetadataById.filter((elem) => elem.id == model.getType())[0];
-            return elem.id == model.getType();
+    return new icon(topic, model, readOnly);
-        })[0].icon;
+  },
-        return new icon(topic, model, readOnly);
-    }
 };
 
 TopicFeature._featuresMetadataById = [TopicFeature.Icon, TopicFeature.Link, TopicFeature.Note];

packages/mindplot/lib/components/TopicStyle.js

@@ -18,115 +18,115 @@
 const { TopicShape } = require('./model/INodeModel');
 
 const TopicStyle = new Class({
-    Static: {
+  Static: {
-        _getStyles: function (topic) {
+    _getStyles(topic) {
-            $assert(topic, 'topic can not be null');
+      $assert(topic, 'topic can not be null');
 
-            var result;
+      let result;
-            if (topic.isCentralTopic()) {
+      if (topic.isCentralTopic()) {
-                result = TopicStyle.STYLES.CENTRAL_TOPIC;
+        result = TopicStyle.STYLES.CENTRAL_TOPIC;
-            } else {
+      } else {
-                var targetTopic = topic.getOutgoingConnectedTopic();
+        const targetTopic = topic.getOutgoingConnectedTopic();
-                if ($defined(targetTopic)) {
+        if ($defined(targetTopic)) {
-                    if (targetTopic.isCentralTopic()) {
+          if (targetTopic.isCentralTopic()) {
-                        result = TopicStyle.STYLES.MAIN_TOPIC;
+            result = TopicStyle.STYLES.MAIN_TOPIC;
-                    } else {
+          } else {
-                        result = TopicStyle.STYLES.SUB_TOPIC;
+            result = TopicStyle.STYLES.SUB_TOPIC;
-                    }
+          }
-                } else {
+        } else {
-                    result = TopicStyle.STYLES.ISOLATED_TOPIC;
+          result = TopicStyle.STYLES.ISOLATED_TOPIC;
-                }
+        }
-            }
+      }
-            return result;
+      return result;
-        },
-
-        defaultText: function (topic) {
-            var msgKey = this._getStyles(topic).msgKey;
-            return $msg(msgKey);
-        },
-
-        defaultFontStyle: function (topic) {
-            return this._getStyles(topic).fontStyle;
-        },
-
-        defaultBackgroundColor: function (topic) {
-            return this._getStyles(topic).backgroundColor;
-        },
-
-        defaultBorderColor: function (topic) {
-            return this._getStyles(topic).borderColor;
-        },
-
-        getInnerPadding: function (topic) {
-            return this._getStyles(topic).innerPadding;
-        },
-
-        defaultShapeType: function (topic) {
-            return this._getStyles(topic).shapeType;
-        },
     },
+
+    defaultText(topic) {
+      const { msgKey } = this._getStyles(topic);
+      return $msg(msgKey);
+    },
+
+    defaultFontStyle(topic) {
+      return this._getStyles(topic).fontStyle;
+    },
+
+    defaultBackgroundColor(topic) {
+      return this._getStyles(topic).backgroundColor;
+    },
+
+    defaultBorderColor(topic) {
+      return this._getStyles(topic).borderColor;
+    },
+
+    getInnerPadding(topic) {
+      return this._getStyles(topic).innerPadding;
+    },
+
+    defaultShapeType(topic) {
+      return this._getStyles(topic).shapeType;
+    },
+  },
 });
 
 TopicStyle.STYLES = {
-    CENTRAL_TOPIC: {
+  CENTRAL_TOPIC: {
-        borderColor: 'rgb(57,113,177)',
+    borderColor: 'rgb(57,113,177)',
-        backgroundColor: 'rgb(80,157,192)',
+    backgroundColor: 'rgb(80,157,192)',
-        fontStyle: {
+    fontStyle: {
-            font: 'Verdana',
+      font: 'Verdana',
-            size: 10,
+      size: 10,
-            style: 'normal',
+      style: 'normal',
-            weight: 'bold',
+      weight: 'bold',
-            color: '#ffffff',
+      color: '#ffffff',
-        },
-        msgKey: 'CENTRAL_TOPIC',
-        innerPadding: 11,
-        shapeType: TopicShape.ROUNDED_RECT,
     },
+    msgKey: 'CENTRAL_TOPIC',
+    innerPadding: 11,
+    shapeType: TopicShape.ROUNDED_RECT,
+  },
 
-    MAIN_TOPIC: {
+  MAIN_TOPIC: {
-        borderColor: 'rgb(2,59,185)',
+    borderColor: 'rgb(2,59,185)',
-        backgroundColor: 'rgb(224,229,239)',
+    backgroundColor: 'rgb(224,229,239)',
-        fontStyle: {
+    fontStyle: {
-            font: 'Arial',
+      font: 'Arial',
-            size: 8,
+      size: 8,
-            style: 'normal',
+      style: 'normal',
-            weight: 'normal',
+      weight: 'normal',
-            color: 'rgb(82,92,97)',
+      color: 'rgb(82,92,97)',
-        },
-        msgKey: 'MAIN_TOPIC',
-        innerPadding: 3,
-        shapeType: TopicShape.LINE,
     },
+    msgKey: 'MAIN_TOPIC',
+    innerPadding: 3,
+    shapeType: TopicShape.LINE,
+  },
 
-    SUB_TOPIC: {
+  SUB_TOPIC: {
-        borderColor: 'rgb(2,59,185)',
+    borderColor: 'rgb(2,59,185)',
-        backgroundColor: 'rgb(224,229,239)',
+    backgroundColor: 'rgb(224,229,239)',
-        fontStyle: {
+    fontStyle: {
-            font: 'Arial',
+      font: 'Arial',
-            size: 6,
+      size: 6,
-            style: 'normal',
+      style: 'normal',
-            weight: 'normal',
+      weight: 'normal',
-            color: 'rgb(82,92,97)',
+      color: 'rgb(82,92,97)',
-        },
-        msgKey: 'SUB_TOPIC',
-        innerPadding: 3,
-        shapeType: TopicShape.LINE,
     },
+    msgKey: 'SUB_TOPIC',
+    innerPadding: 3,
+    shapeType: TopicShape.LINE,
+  },
 
-    ISOLATED_TOPIC: {
+  ISOLATED_TOPIC: {
-        borderColor: 'rgb(2,59,185)',
+    borderColor: 'rgb(2,59,185)',
-        backgroundColor: 'rgb(224,229,239)',
+    backgroundColor: 'rgb(224,229,239)',
-        fontStyle: {
+    fontStyle: {
-            font: 'Verdana',
+      font: 'Verdana',
-            size: 8,
+      size: 8,
-            style: 'normal',
+      style: 'normal',
-            weight: 'normal',
+      weight: 'normal',
-            color: 'rgb(82,92,97)',
+      color: 'rgb(82,92,97)',
-        },
-        msgKey: 'ISOLATED_TOPIC',
-        innerPadding: 4,
-        shapeType: TopicShape.LINE,
     },
+    msgKey: 'ISOLATED_TOPIC',
+    innerPadding: 4,
+    shapeType: TopicShape.LINE,
+  },
 };
 
 export default TopicStyle;

packages/mindplot/lib/components/Workspace.js

@@ -1,229 +1,226 @@
-/*
+/*
- *    Copyright [2015] [wisemapping]
+ *    Copyright [2015] [wisemapping]
- *
+ *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
- *
+ *
- *       http://www.wisemapping.org/license
+ *       http://www.wisemapping.org/license
- *
+ *
- *   Unless required by applicable law or agreed to in writing, software
+ *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
+ *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *   limitations under the License.
- */
+ */
-const web2D = require('@wismapping/web2d')
+const web2D = require('@wismapping/web2d');
-const web2d = web2D();
+
-
+const web2d = web2D();
-const Workspace = new Class({
+
-    initialize: function (screenManager, zoom) {
+const Workspace = new Class({
-        // Create a suitable container ...
+  initialize(screenManager, zoom) {
-        $assert(screenManager, 'Div container can not be null');
+    // Create a suitable container ...
-        $assert(zoom, 'zoom container can not be null');
+    $assert(screenManager, 'Div container can not be null');
-
+    $assert(zoom, 'zoom container can not be null');
-        this._zoom = zoom;
+
-        this._screenManager = screenManager;
+    this._zoom = zoom;
-
+    this._screenManager = screenManager;
-        var divContainer = screenManager.getContainer();
+
-        this._screenWidth = parseInt(divContainer.css('width'));
+    const divContainer = screenManager.getContainer();
-        this._screenHeight = parseInt(divContainer.css('height'));
+    this._screenWidth = parseInt(divContainer.css('width'));
-
+    this._screenHeight = parseInt(divContainer.css('height'));
-        // Initialize web2d workspace.
+
-        var workspace = this._createWorkspace();
+    // Initialize web2d workspace.
-        this._workspace = workspace;
+    const workspace = this._createWorkspace();
-
+    this._workspace = workspace;
-        // Append to the workspace...
+
-        workspace.addItAsChildTo(divContainer);
+    // Append to the workspace...
-        this.setZoom(zoom, true);
+    workspace.addItAsChildTo(divContainer);
-
+    this.setZoom(zoom, true);
-        // Register drag events ...
+
-        this._registerDragEvents();
+    // Register drag events ...
-        this._eventsEnabled = true;
+    this._registerDragEvents();
-    },
+    this._eventsEnabled = true;
-
+  },
-    _createWorkspace: function () {
+
-        // Initialize workspace ...
+  _createWorkspace() {
-        var coordOriginX = -(this._screenWidth / 2);
+    // Initialize workspace ...
-        var coordOriginY = -(this._screenHeight / 2);
+    const coordOriginX = -(this._screenWidth / 2);
-
+    const coordOriginY = -(this._screenHeight / 2);
-        var workspaceProfile = {
+
-            width: this._screenWidth + "px",
+    const workspaceProfile = {
-            height: this._screenHeight + "px",
+      width: `${this._screenWidth}px`,
-            coordSizeWidth: this._screenWidth,
+      height: `${this._screenHeight}px`,
-            coordSizeHeight: this._screenHeight,
+      coordSizeWidth: this._screenWidth,
-            coordOriginX: coordOriginX,
+      coordSizeHeight: this._screenHeight,
-            coordOriginY: coordOriginY,
+      coordOriginX,
-            fillColor: 'transparent',
+      coordOriginY,
-            strokeWidth: 0
+      fillColor: 'transparent',
-        };
+      strokeWidth: 0,
-        web2d.Toolkit.init();
+    };
-        return new web2d.Workspace(workspaceProfile);
+    web2d.Toolkit.init();
-    },
+    return new web2d.Workspace(workspaceProfile);
-
+  },
-    append: function (shape) {
+
-        if ($defined(shape.addToWorkspace)) {
+  append(shape) {
-            shape.addToWorkspace(this);
+    if ($defined(shape.addToWorkspace)) {
-        } else {
+      shape.addToWorkspace(this);
-            this._workspace.append(shape);
+    } else {
-        }
+      this._workspace.append(shape);
-    },
+    }
-
+  },
-    removeChild: function (shape) {
+
-        // Element is a node, not a web2d element?
+  removeChild(shape) {
-        if ($defined(shape.removeFromWorkspace)) {
+    // Element is a node, not a web2d element?
-            shape.removeFromWorkspace(this);
+    if ($defined(shape.removeFromWorkspace)) {
-        } else {
+      shape.removeFromWorkspace(this);
-            this._workspace.removeChild(shape);
+    } else {
-        }
+      this._workspace.removeChild(shape);
-    },
+    }
-
+  },
-    addEvent: function (type, listener) {
+
-        this._workspace.addEvent(type, listener);
+  addEvent(type, listener) {
-    },
+    this._workspace.addEvent(type, listener);
-
+  },
-    removeEvent: function (type, listener) {
+
-        $assert(type, 'type can not be null');
+  removeEvent(type, listener) {
-        $assert(listener, 'listener can not be null');
+    $assert(type, 'type can not be null');
-        this._workspace.removeEvent(type, listener);
+    $assert(listener, 'listener can not be null');
-    },
+    this._workspace.removeEvent(type, listener);
-
+  },
-    getSize: function () {
+
-        return this._workspace.getCoordSize();
+  getSize() {
-    },
+    return this._workspace.getCoordSize();
-
+  },
-    setZoom: function (zoom, center) {
+
-        this._zoom = zoom;
+  setZoom(zoom, center) {
-        var workspace = this._workspace;
+    this._zoom = zoom;
-
+    const workspace = this._workspace;
-        // Update coord scale...
+
-        var coordWidth = zoom * this._screenWidth;
+    // Update coord scale...
-        var coordHeight = zoom * this._screenHeight;
+    const coordWidth = zoom * this._screenWidth;
-        workspace.setCoordSize(coordWidth, coordHeight);
+    const coordHeight = zoom * this._screenHeight;
-
+    workspace.setCoordSize(coordWidth, coordHeight);
-        // View port coords ...
+
-        if (this._viewPort) {
+    // View port coords ...
-            this._viewPort.width = this._viewPort.width * zoom;
+    if (this._viewPort) {
-            this._viewPort.height = this._viewPort.height * zoom;
+      this._viewPort.width = this._viewPort.width * zoom;
-        }
+      this._viewPort.height = this._viewPort.height * zoom;
-
+    }
-        // Center topic....
+
-        var coordOriginX;
+    // Center topic....
-        var coordOriginY;
+    let coordOriginX;
-
+    let coordOriginY;
-        if (center) {
+
-            if (this._viewPort) {
+    if (center) {
-                coordOriginX = -(this._viewPort.width / 2);
+      if (this._viewPort) {
-                coordOriginY = -(this._viewPort.height / 2);
+        coordOriginX = -(this._viewPort.width / 2);
-            } else {
+        coordOriginY = -(this._viewPort.height / 2);
-                coordOriginX = -(coordWidth / 2);
+      } else {
-                coordOriginY = -(coordHeight / 2);
+        coordOriginX = -(coordWidth / 2);
-            }
+        coordOriginY = -(coordHeight / 2);
-        } else {
+      }
-            var coordOrigin = workspace.getCoordOrigin();
+    } else {
-            coordOriginX = coordOrigin.x;
+      const coordOrigin = workspace.getCoordOrigin();
-            coordOriginY = coordOrigin.y;
+      coordOriginX = coordOrigin.x;
-        }
+      coordOriginY = coordOrigin.y;
-
+    }
-        workspace.setCoordOrigin(coordOriginX, coordOriginY);
+
-
+    workspace.setCoordOrigin(coordOriginX, coordOriginY);
-        // Update screen.
+
-        this._screenManager.setOffset(coordOriginX, coordOriginY);
+    // Update screen.
-        this._screenManager.setScale(zoom);
+    this._screenManager.setOffset(coordOriginX, coordOriginY);
-
+    this._screenManager.setScale(zoom);
-        // Some changes in the screen. Let's fire an update event...
+
-        this._screenManager.fireEvent('update');
+    // Some changes in the screen. Let's fire an update event...
-    },
+    this._screenManager.fireEvent('update');
-
+  },
-    getScreenManager: function () {
+
-        return this._screenManager;
+  getScreenManager() {
-    },
+    return this._screenManager;
-
+  },
-    enableWorkspaceEvents: function (value) {
+
-        this._eventsEnabled = value;
+  enableWorkspaceEvents(value) {
-    },
+    this._eventsEnabled = value;
-
+  },
-    isWorkspaceEventsEnabled: function () {
+
-        return this._eventsEnabled;
+  isWorkspaceEventsEnabled() {
-    },
+    return this._eventsEnabled;
-
+  },
-    dumpNativeChart: function () {
+
-        return this._workspace.dumpNativeChart();
+  dumpNativeChart() {
-    },
+    return this._workspace.dumpNativeChart();
-
+  },
-    _registerDragEvents: function () {
+
-        var workspace = this._workspace;
+  _registerDragEvents() {
-        var screenManager = this._screenManager;
+    const workspace = this._workspace;
-        var mWorkspace = this;
+    const screenManager = this._screenManager;
-        var mouseDownListener = function (event) {
+    const mWorkspace = this;
-            if (!$defined(workspace._mouseMoveListener)) {
+    const mouseDownListener = function (event) {
-                if (mWorkspace.isWorkspaceEventsEnabled()) {
+      if (!$defined(workspace._mouseMoveListener)) {
-                    mWorkspace.enableWorkspaceEvents(false);
+        if (mWorkspace.isWorkspaceEventsEnabled()) {
-
+          mWorkspace.enableWorkspaceEvents(false);
-                    var mouseDownPosition = screenManager.getWorkspaceMousePosition(event);
+
-                    var originalCoordOrigin = workspace.getCoordOrigin();
+          const mouseDownPosition = screenManager.getWorkspaceMousePosition(event);
-
+          const originalCoordOrigin = workspace.getCoordOrigin();
-                    var wasDragged = false;
+
-                    workspace._mouseMoveListener = function (event) {
+          let wasDragged = false;
-
+          workspace._mouseMoveListener = function (event) {
-                        var currentMousePosition = screenManager.getWorkspaceMousePosition(event);
+            const currentMousePosition = screenManager.getWorkspaceMousePosition(event);
-
+
-                        var offsetX = currentMousePosition.x - mouseDownPosition.x;
+            const offsetX = currentMousePosition.x - mouseDownPosition.x;
-                        var coordOriginX = -offsetX + originalCoordOrigin.x;
+            const coordOriginX = -offsetX + originalCoordOrigin.x;
-
+
-                        var offsetY = currentMousePosition.y - mouseDownPosition.y;
+            const offsetY = currentMousePosition.y - mouseDownPosition.y;
-                        var coordOriginY = -offsetY + originalCoordOrigin.y;
+            const coordOriginY = -offsetY + originalCoordOrigin.y;
-
+
-                        workspace.setCoordOrigin(coordOriginX, coordOriginY);
+            workspace.setCoordOrigin(coordOriginX, coordOriginY);
-
+
-                        // Change cursor.
+            // Change cursor.
-                        if (Browser.firefox) {
+            if (Browser.firefox) {
-                            window.document.body.style.cursor = "-moz-grabbing";
+              window.document.body.style.cursor = '-moz-grabbing';
-                        } else {
+            } else {
-                            window.document.body.style.cursor = "move";
+              window.document.body.style.cursor = 'move';
-                        }
+            }
-                        event.preventDefault();
+            event.preventDefault();
-
+
-                        // Fire drag event ...
+            // Fire drag event ...
-                        screenManager.fireEvent('update');
+            screenManager.fireEvent('update');
-                        wasDragged = true;
+            wasDragged = true;
-
+          };
-
+          screenManager.addEvent('mousemove', workspace._mouseMoveListener);
-                    };
+
-                    screenManager.addEvent('mousemove', workspace._mouseMoveListener);
+          // Register mouse up listeners ...
-
+          workspace._mouseUpListener = function (event) {
-                    // Register mouse up listeners ...
+            screenManager.removeEvent('mousemove', workspace._mouseMoveListener);
-                    workspace._mouseUpListener = function (event) {
+            screenManager.removeEvent('mouseup', workspace._mouseUpListener);
-
+            workspace._mouseUpListener = null;
-                        screenManager.removeEvent('mousemove', workspace._mouseMoveListener);
+            workspace._mouseMoveListener = null;
-                        screenManager.removeEvent('mouseup', workspace._mouseUpListener);
+            window.document.body.style.cursor = 'default';
-                        workspace._mouseUpListener = null;
+
-                        workspace._mouseMoveListener = null;
+            // Update screen manager offset.
-                        window.document.body.style.cursor = 'default';
+            const coordOrigin = workspace.getCoordOrigin();
-
+            screenManager.setOffset(coordOrigin.x, coordOrigin.y);
-                        // Update screen manager offset.
+            mWorkspace.enableWorkspaceEvents(true);
-                        var coordOrigin = workspace.getCoordOrigin();
+
-                        screenManager.setOffset(coordOrigin.x, coordOrigin.y);
+            if (!wasDragged) {
-                        mWorkspace.enableWorkspaceEvents(true);
+              screenManager.fireEvent('click');
-
+            }
-                        if (!wasDragged) {
+          };
-                            screenManager.fireEvent('click');
+          screenManager.addEvent('mouseup', workspace._mouseUpListener);
-                        }
+        }
-                    };
+      } else {
-                    screenManager.addEvent('mouseup', workspace._mouseUpListener);
+        workspace._mouseUpListener();
-                }
+      }
-            } else {
+    };
-                workspace._mouseUpListener();
+    screenManager.addEvent('mousedown', mouseDownListener);
-            }
+  },
-        };
+
-        screenManager.addEvent('mousedown', mouseDownListener);
+  setViewPort(size) {
-    },
+    this._viewPort = size;
-
+  },
-    setViewPort: function (size) {
+});
-        this._viewPort = size;
+
-    }
+export default Workspace;
-});
-
-export default Workspace;

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

@@ -18,8 +18,8 @@
 const Command = require('../Command').default;
 
 const AddFeatureToTopicCommand = new Class(/** @lends AddFeatureToTopicCommand */{
-    Extends: Command,
+  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
@@ -29,41 +29,40 @@ const AddFeatureToTopicCommand = new Class(/** @lends AddFeatureToTopicCommand *
      * @extends mindplot.Command
      * @see mindplot.model.FeatureModel and subclasses
      */
-    initialize:function (topicId, featureType, attributes) {
+  initialize(topicId, featureType, attributes) {
+    $assert($defined(topicId), 'topicId can not be null');
+    $assert(featureType, 'featureType can not be null');
+    $assert(attributes, 'attributes can not be null');
 
-        $assert($defined(topicId), 'topicId can not be null');
+    this.parent();
-        $assert(featureType, 'featureType can not be null');
+    this._topicId = topicId;
-        $assert(attributes, 'attributes can not be null');
+    this._featureType = featureType;
+    this._attributes = attributes;
+    this._featureModel = null;
+  },
 
-        this.parent();
+  /**
-        this._topicId = topicId;
-        this._featureType = featureType;
-        this._attributes = attributes;
-        this._featureModel = null;
-    },
-
-    /** 
-     * Overrides abstract parent method 
-     */
-    execute:function (commandContext) {
-        var topic = commandContext.findTopics(this._topicId)[0];
-
-        // Feature must be created only one time.
-        if (!this._featureModel) {
-            var model = topic.getModel();
-            this._featureModel = model.createFeature(this._featureType, this._attributes);
-        }
-        topic.addFeature(this._featureModel);
-    },
-
-    /** 
      * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute} 
      */
-    undoExecute:function (commandContext) {
+  execute(commandContext) {
-        var topic = commandContext.findTopics(this._topicId)[0];
+    const topic = commandContext.findTopics(this._topicId)[0];
-        topic.removeFeature(this._featureModel);
+
+    // Feature must be created only one time.
+    if (!this._featureModel) {
+      const model = topic.getModel();
+      this._featureModel = model.createFeature(this._featureType, this._attributes);
     }
+    topic.addFeature(this._featureModel);
+  },
+
+  /**
+     * Overrides abstract parent method
+     * @see {@link mindplot.Command.undoExecute}
+     */
+  undoExecute(commandContext) {
+    const topic = commandContext.findTopics(this._topicId)[0];
+    topic.removeFeature(this._featureModel);
+  },
 });
 
-export default AddFeatureToTopicCommand
+export default AddFeatureToTopicCommand;

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

@@ -15,39 +15,39 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default
+const Command = require('../Command').default;
 
 const AddRelationshipCommand = new Class(/** @lends 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:function (model) {
+  initialize(model) {
-        $assert(model, 'Relationship model can not be null');
+    $assert(model, 'Relationship model can not be null');
 
-        this.parent();
+    this.parent();
-        this._model = model;
+    this._model = model;
-    },
+  },
-    
-    /** 
-     * Overrides abstract parent method 
-     */
-    execute:function (commandContext) {
-        var relationship = commandContext.addRelationship(this._model);
-        relationship.setOnFocus(true);
-    },
 
-    /** 
+  /**
      * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute} 
      */
-    undoExecute:function (commandContext) {
+  execute(commandContext) {
-        var rel = commandContext.findRelationships(this._model.getId());
+    const relationship = commandContext.addRelationship(this._model);
-        commandContext.deleteRelationship(rel[0]);
+    relationship.setOnFocus(true);
-    }
+  },
+
+  /**
+     * Overrides abstract parent method
+     * @see {@link mindplot.Command.undoExecute}
+     */
+  undoExecute(commandContext) {
+    const rel = commandContext.findRelationships(this._model.getId());
+    commandContext.deleteRelationship(rel[0]);
+  },
 });
 
 export default AddRelationshipCommand;

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

@@ -18,9 +18,9 @@
 const Command = require('../Command').default;
 
 const AddTopicCommand = new Class(
-    /** @lends AddTopicCommand */ {
+  /** @lends AddTopicCommand */ {
-        Extends: Command,
+    Extends: Command,
-        /**
+    /**
          * @classdesc This command class handles do/undo of adding one or multiple topics to
          * the mindmap.
          * @constructs
@@ -29,69 +29,69 @@ const AddTopicCommand = new Class(
          * when attaching a dragged node or a node/branch from clipboard
          * @extends mindplot.Command
          */
-        initialize: function (models, parentTopicsId) {
+    initialize(models, parentTopicsId) {
-            $assert(models, 'models can not be null');
+      $assert(models, 'models can not be null');
-            $assert(
+      $assert(
-                parentTopicsId == null || parentTopicsId.length == models.length,
+        parentTopicsId == null || parentTopicsId.length == models.length,
-                'parents and models must have the same size'
+        'parents and models must have the same size',
-            );
+      );
 
-            this.parent();
+      this.parent();
-            this._models = models;
+      this._models = models;
-            this._parentsIds = parentTopicsId;
+      this._parentsIds = parentTopicsId;
-        },
+    },
 
-        /**
+    /**
          * Overrides abstract parent method
          */
-        execute: function (commandContext) {
+    execute(commandContext) {
-            var me = this;
+      const me = this;
-            _.each(this._models, function (model, index) {
+      _.each(this._models, (model, index) => {
-                // Add a new topic ...
+        // Add a new topic ...
-                var topic = commandContext.createTopic(model);
+        const topic = commandContext.createTopic(model);
 
-                // Connect to topic ...
+        // Connect to topic ...
-                if (me._parentsIds) {
+        if (me._parentsIds) {
-                    var parentId = me._parentsIds[index];
+          const parentId = me._parentsIds[index];
-                    if ($defined(parentId)) {
+          if ($defined(parentId)) {
-                        var parentTopic = commandContext.findTopics(parentId)[0];
+            const parentTopic = commandContext.findTopics(parentId)[0];
-                        commandContext.connect(topic, parentTopic);
+            commandContext.connect(topic, parentTopic);
-                    }
+          }
-                } else {
+        } else {
-                    commandContext.addTopic(topic);
+          commandContext.addTopic(topic);
-                }
+        }
 
-                // Select just created node ...
+        // Select just created node ...
-                var 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
          * @see {@link mindplot.Command.undoExecute}
          */
-        undoExecute: function (commandContext) {
+    undoExecute(commandContext) {
-            // Delete disconnected the nodes. Create a copy of the topics ...
+      // Delete disconnected the nodes. Create a copy of the topics ...
-            var clonedModel = [];
+      const clonedModel = [];
-            _.each(this._models, function (model) {
+      _.each(this._models, (model) => {
-                clonedModel.push(model.clone());
+        clonedModel.push(model.clone());
-            });
+      });
 
-            // Finally, remove the nodes ...
+      // Finally, remove the nodes ...
-            _.each(this._models, function (model) {
+      _.each(this._models, (model) => {
-                var topicId = model.getId();
+        const topicId = model.getId();
-                var 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/lib/components/commands/ChangeFeatureToTopicCommand.js

@@ -15,11 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default
+const Command = require('../Command').default;
 
 const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCommand */{
-    Extends:Command,
+  Extends: Command,
-    /**
+  /**
      * @extends mindplot.Command
      * @constructs
      * @param topicId
@@ -29,36 +29,36 @@ 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: function(topicId, featureId, attributes) {
+  initialize(topicId, featureId, attributes) {
-        $assert($defined(topicId), 'topicId can not be null');
+    $assert($defined(topicId), 'topicId can not be null');
-        $assert($defined(featureId), 'featureId can not be null');
+    $assert($defined(featureId), 'featureId can not be null');
-        $assert($defined(attributes), 'attributes can not be null');
+    $assert($defined(attributes), 'attributes can not be null');
 
-        this.parent();
+    this.parent();
-        this._topicId = topicId;
+    this._topicId = topicId;
-        this._featureId = featureId;
+    this._featureId = featureId;
-        this._attributes = attributes;
+    this._attributes = attributes;
-    },
+  },
 
-    /** 
+  /**
      * Overrides abstract parent method
      */
-    execute: function(commandContext) {
+  execute(commandContext) {
-        var topic = commandContext.findTopics(this._topicId)[0];
+    const topic = commandContext.findTopics(this._topicId)[0];
-        var feature = topic.findFeatureById(this._featureId);
+    const feature = topic.findFeatureById(this._featureId);
 
-        var oldAttributes = feature.getAttributes();
+    const oldAttributes = feature.getAttributes();
-        feature.setAttributes(this._attributes);
+    feature.setAttributes(this._attributes);
-        this._attributes = oldAttributes;
+    this._attributes = oldAttributes;
-    },
+  },
 
-    /** 
+  /**
      * Overrides abstract parent method
      * @see {@link mindplot.Command.undoExecute}
      */
-    undoExecute: function(commandContext) {
+  undoExecute(commandContext) {
-        this.execute(commandContext);
+    this.execute(commandContext);
-    }
+  },
 });
 
 export default ChangeFeatureToTopicCommand;

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

@@ -18,169 +18,162 @@
 const Command = require('../Command').default;
 
 const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
-    Extends:Command,
+  Extends: Command,
-    /** 
+  /**
      * @classdesc This command class handles do/undo of deleting a topic.
      * @constructs
      * @param {Array<String>} topicIds ids of the topics to delete
      * @param {Array<String>} relIds ids of the relationships connected to the topics
      * @extends mindplot.Command
      */
-    initialize:function (topicIds, relIds) {
+  initialize(topicIds, relIds) {
-        $assert($defined(relIds), 'topicIds can not be null');
+    $assert($defined(relIds), 'topicIds can not be null');
 
-        this.parent();
+    this.parent();
-        this._relIds = relIds;
+    this._relIds = relIds;
-        this._topicIds = topicIds;
+    this._topicIds = topicIds;
-        this._deletedTopicModels = [];
+    this._deletedTopicModels = [];
-        this._deletedRelModel = [];
+    this._deletedRelModel = [];
-        this._parentTopicIds = [];
+    this._parentTopicIds = [];
-    },
+  },
 
-    /** 
+  /**
-     * Overrides abstract parent method 
-     */
-    execute:function (commandContext) {
-
-        // If a parent has been selected for deletion, the children must be excluded from the delete ...
-        var topics = this._filterChildren(this._topicIds, commandContext);
-
-        if (topics.length > 0) {
-            _.each(topics, function (topic) {
-                // In case that it's editing text node, force close without update ...
-                topic.closeEditors();
-
-                var model = topic.getModel();
-
-                // Delete relationships
-                var relationships = this._collectInDepthRelationships(topic);
-                this._deletedRelModel.append(relationships.map(function (rel) {
-                    return rel.getModel().clone();
-                }));
-
-                _.each(relationships, function (relationship) {
-                    commandContext.deleteRelationship(relationship);
-                });
-
-                // Store information for undo ...
-                var clonedModel = model.clone();
-                this._deletedTopicModels.push(clonedModel);
-                var outTopic = topic.getOutgoingConnectedTopic();
-                var outTopicId = null;
-                if (outTopic != null) {
-                    outTopicId = outTopic.getId();
-                }
-                this._parentTopicIds.push(outTopicId);
-
-                // Finally, delete the topic from the workspace...
-                commandContext.deleteTopic(topic);
-
-            }, this);
-        }
-
-        var rels = commandContext.findRelationships(this._relIds);
-        if (rels.length > 0) {
-            _.each(rels, function (rel) {
-                this._deletedRelModel.push(rel.getModel().clone());
-                commandContext.deleteRelationship(rel);
-            }, this);
-        }
-    },
-
-    /** 
      * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute} 
      */
-    undoExecute:function (commandContext) {
+  execute(commandContext) {
+    // If a parent has been selected for deletion, the children must be excluded from the delete ...
+    const topics = this._filterChildren(this._topicIds, commandContext);
 
-        // Add all the topics ...
+    if (topics.length > 0) {
-        _.each(this._deletedTopicModels, function (model) {
+      _.each(topics, function (topic) {
-            commandContext.createTopic(model);
+        // In case that it's editing text node, force close without update ...
-        }, this);
+        topic.closeEditors();
 
-        // Do they need to be connected ?
+        const model = topic.getModel();
-        _.each(this._deletedTopicModels, function (topicModel, index) {
-            var topics = commandContext.findTopics(topicModel.getId());
 
-            var parentId = this._parentTopicIds[index];
+        // Delete relationships
-            if (parentId) {
+        const relationships = this._collectInDepthRelationships(topic);
-                var parentTopics = commandContext.findTopics(parentId);
+        this._deletedRelModel.append(relationships.map((rel) => rel.getModel().clone()));
-                commandContext.connect(topics[0], parentTopics[0]);
-            }
-        }, this);
 
-        // Add rebuild relationships ...
+        _.each(relationships, (relationship) => {
-        _.each(this._deletedRelModel, function (model) {
+          commandContext.deleteRelationship(relationship);
-            commandContext.addRelationship(model);
         });
 
-        // Finally display the topics ...
+        // Store information for undo ...
-        _.each(this._deletedTopicModels, function (topicModel) {
+        const clonedModel = model.clone();
-            var topics = commandContext.findTopics(topicModel.getId());
+        this._deletedTopicModels.push(clonedModel);
-            topics[0].setBranchVisibility(true);
+        const outTopic = topic.getOutgoingConnectedTopic();
-        }, this);
+        let outTopicId = null;
-
+        if (outTopic != null) {
-        // Focus on last recovered topic ..
+          outTopicId = outTopic.getId();
-        if (this._deletedTopicModels.length > 0) {
-            var firstTopic = this._deletedTopicModels[0];
-            var topic = commandContext.findTopics(firstTopic.getId())[0];
-            topic.setOnFocus(true);
         }
+        this._parentTopicIds.push(outTopicId);
 
-        this._deletedTopicModels = [];
+        // Finally, delete the topic from the workspace...
-        this._parentTopicIds = [];
+        commandContext.deleteTopic(topic);
-        this._deletedRelModel = [];
+      }, this);
-    },
-
-    _filterChildren:function (topicIds, commandContext) {
-        var topics = commandContext.findTopics(topicIds);
-
-        var result = [];
-        _.each(topics, function (topic) {
-            var parent = topic.getParent();
-            var found = false;
-            while (parent != null && !found) {
-                found = topicIds.contains(parent.getId());
-                if (found) {
-                    break;
-                }
-                parent = parent.getParent();
-            }
-
-            if (!found) {
-                result.push(topic);
-            }
-        });
-
-        return result;
-    },
-
-    _collectInDepthRelationships:function (topic) {
-        var result = [];
-        result.append(topic.getRelationships());
-
-        var children = topic.getChildren();
-        var rels = children.map(function (topic) {
-            return this._collectInDepthRelationships(topic);
-        }, this);
-        result.append(rels.flatten());
-
-        if (result.length > 0) {
-            // Filter for unique ...
-            result = result.sort(function (a, b) {
-                return a.getModel().getId() - b.getModel().getId();
-            });
-            var ret = [result[0]];
-            for (var i = 1; i < result.length; i++) { // start loop at 1 as element 0 can never be a duplicate
-                if (result[i - 1] !== result[i]) {
-                    ret.push(result[i]);
-                }
-            }
-            result = ret;
-        }
-        return result;
     }
 
+    const rels = commandContext.findRelationships(this._relIds);
+    if (rels.length > 0) {
+      _.each(rels, function (rel) {
+        this._deletedRelModel.push(rel.getModel().clone());
+        commandContext.deleteRelationship(rel);
+      }, this);
+    }
+  },
+
+  /**
+     * Overrides abstract parent method
+     * @see {@link mindplot.Command.undoExecute}
+     */
+  undoExecute(commandContext) {
+    // Add all the topics ...
+    _.each(this._deletedTopicModels, (model) => {
+      commandContext.createTopic(model);
+    }, this);
+
+    // Do they need to be connected ?
+    _.each(this._deletedTopicModels, function (topicModel, index) {
+      const topics = commandContext.findTopics(topicModel.getId());
+
+      const parentId = this._parentTopicIds[index];
+      if (parentId) {
+        const parentTopics = commandContext.findTopics(parentId);
+        commandContext.connect(topics[0], parentTopics[0]);
+      }
+    }, this);
+
+    // Add rebuild relationships ...
+    _.each(this._deletedRelModel, (model) => {
+      commandContext.addRelationship(model);
+    });
+
+    // Finally display the topics ...
+    _.each(this._deletedTopicModels, (topicModel) => {
+      const topics = commandContext.findTopics(topicModel.getId());
+      topics[0].setBranchVisibility(true);
+    }, this);
+
+    // Focus on last recovered topic ..
+    if (this._deletedTopicModels.length > 0) {
+      const firstTopic = this._deletedTopicModels[0];
+      const topic = commandContext.findTopics(firstTopic.getId())[0];
+      topic.setOnFocus(true);
+    }
+
+    this._deletedTopicModels = [];
+    this._parentTopicIds = [];
+    this._deletedRelModel = [];
+  },
+
+  _filterChildren(topicIds, commandContext) {
+    const topics = commandContext.findTopics(topicIds);
+
+    const result = [];
+    _.each(topics, (topic) => {
+      let parent = topic.getParent();
+      let found = false;
+      while (parent != null && !found) {
+        found = topicIds.contains(parent.getId());
+        if (found) {
+          break;
+        }
+        parent = parent.getParent();
+      }
+
+      if (!found) {
+        result.push(topic);
+      }
+    });
+
+    return result;
+  },
+
+  _collectInDepthRelationships(topic) {
+    let result = [];
+    result.append(topic.getRelationships());
+
+    const children = topic.getChildren();
+    const rels = children.map(function (topic) {
+      return this._collectInDepthRelationships(topic);
+    }, this);
+    result.append(rels.flatten());
+
+    if (result.length > 0) {
+      // Filter for unique ...
+      result = result.sort((a, b) => a.getModel().getId() - b.getModel().getId());
+      const ret = [result[0]];
+      for (let i = 1; i < result.length; i++) { // start loop at 1 as element 0 can never be a duplicate
+        if (result[i - 1] !== result[i]) {
+          ret.push(result[i]);
+        }
+      }
+      result = ret;
+    }
+    return result;
+  },
+
 });
 
 export default DeleteCommand;

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

@@ -15,11 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default
+const Command = require('../Command').default;
 
 const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
-    Extends:Command,
+  Extends: Command,
-    /** 
+  /**
      * @classdesc This command class handles do/undo of dragging a topic to a new position.
      * @constructs
      * @param {String} topicId id of the topic to drag
@@ -28,76 +28,72 @@ 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:function (topicId, position, order, parentTopic) {
+  initialize(topicId, position, order, parentTopic) {
-        $assert(topicId, "topicId must be defined");
+    $assert(topicId, 'topicId must be defined');
 
-        this._topicsId = topicId;
+    this._topicsId = topicId;
-        if ($defined(parentTopic))
+    if ($defined(parentTopic)) this._parentId = parentTopic.getId();
-            this._parentId = parentTopic.getId();
 
-        this.parent();
+    this.parent();
-        this._position = position;
+    this._position = position;
-        this._order = order;
+    this._order = order;
-    },
+  },
 
-    /** 
+  /**
-     * Overrides abstract parent method 
-     */
-    execute:function (commandContext) {
-
-        var topic = commandContext.findTopics(this._topicsId)[0];
-        topic.setVisibility(false);
-
-        // Save old position ...
-        var origParentTopic = topic.getOutgoingConnectedTopic();
-
-        // In this case, topics are positioned using order ...
-        var origOrder = topic.getOrder();
-        var origPosition = topic.getPosition();
-
-        // Disconnect topic ..
-        if ($defined(origParentTopic) && origParentTopic != this._parentId) {
-            commandContext.disconnect(topic);
-        }
-
-        // Set topic order ...
-        if (this._order != null) {
-            topic.setOrder(this._order);
-        } else if (this._position != null) {
-            commandContext.moveTopic(topic, this._position);
-        } else {
-            $assert("Illegal command state exception.");
-        }
-
-        // Finally, connect topic ...
-        if (origParentTopic != this._parentId) {
-
-            if ($defined(this._parentId)) {
-                var parentTopic = commandContext.findTopics(this._parentId)[0];
-                commandContext.connect(topic, parentTopic);
-            }
-
-            // Backup old parent id ...
-            this._parentId = null;
-            if ($defined(origParentTopic)) {
-                this._parentId = origParentTopic.getId();
-            }
-        }
-        topic.setVisibility(true);
-
-        // Store for undo ...
-        this._order = origOrder;
-        this._position = origPosition;
-
-    },
-
-    /** 
      * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute} 
      */
-    undoExecute:function (commandContext) {
+  execute(commandContext) {
-        this.execute(commandContext);
+    const topic = commandContext.findTopics(this._topicsId)[0];
+    topic.setVisibility(false);
+
+    // Save old position ...
+    const origParentTopic = topic.getOutgoingConnectedTopic();
+
+    // In this case, topics are positioned using order ...
+    const origOrder = topic.getOrder();
+    const origPosition = topic.getPosition();
+
+    // Disconnect topic ..
+    if ($defined(origParentTopic) && origParentTopic != this._parentId) {
+      commandContext.disconnect(topic);
     }
+
+    // Set topic order ...
+    if (this._order != null) {
+      topic.setOrder(this._order);
+    } else if (this._position != null) {
+      commandContext.moveTopic(topic, this._position);
+    } else {
+      $assert('Illegal command state exception.');
+    }
+
+    // Finally, connect topic ...
+    if (origParentTopic != this._parentId) {
+      if ($defined(this._parentId)) {
+        const parentTopic = commandContext.findTopics(this._parentId)[0];
+        commandContext.connect(topic, parentTopic);
+      }
+
+      // Backup old parent id ...
+      this._parentId = null;
+      if ($defined(origParentTopic)) {
+        this._parentId = origParentTopic.getId();
+      }
+    }
+    topic.setVisibility(true);
+
+    // Store for undo ...
+    this._order = origOrder;
+    this._position = origPosition;
+  },
+
+  /**
+     * Overrides abstract parent method
+     * @see {@link mindplot.Command.undoExecute}
+     */
+  undoExecute(commandContext) {
+    this.execute(commandContext);
+  },
 });
 
 export default DragTopicCommand;

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

@@ -15,13 +15,13 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default
+const Command = require('../Command').default;
 
 const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
-    Extends:Command,
+  Extends: Command,
-    /**
+  /**
-     * @classdesc This command handles do/undo of different actions, e.g. moving topics to 
+     * @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 
+     * a different position, changing text or font,... (for full reference check the
      * StandaloneActionDispatcher i.e. the ActionDispatcher subclass in use)
      * @constructs
      * @param {Function} commandFunc the function the command shall execute
@@ -30,70 +30,66 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
      * e.g. color, font family or text
      * @extends mindplot.Command
      */
-    initialize:function (commandFunc, topicsIds, value) {
+  initialize(commandFunc, topicsIds, value) {
-        $assert(commandFunc, "commandFunc must be defined");
+    $assert(commandFunc, 'commandFunc must be defined');
-        $assert($defined(topicsIds), "topicsIds must be defined");
+    $assert($defined(topicsIds), 'topicsIds must be defined');
 
-        this.parent();
+    this.parent();
-        this._value = value;
+    this._value = value;
-        this._topicsId = topicsIds;
+    this._topicsId = topicsIds;
-        this._commandFunc = commandFunc;
+    this._commandFunc = commandFunc;
-        this._oldValues = [];
+    this._oldValues = [];
-    },
+  },
 
-    /** 
+  /**
-     * Overrides abstract parent method 
-     */
-    execute:function (commandContext) {
-        if (!this.applied) {
-
-            var topics = null;
-            try {
-                topics = commandContext.findTopics(this._topicsId);
-            } catch (e) {
-                if (this._commandFunc.commandType != "changeTextToTopic") {
-                    // Workaround: For some reason, there is a combination of events that involves
-                    // making some modification and firing out of focus event. This is causing
-                    // that a remove node try to be removed.  In some other life, I will come with the solution.
-                    // Almost aways occurs with IE9. I could be related with some change of order in sets o something similar.
-                    throw  e;
-                }
-            }
-
-            if (topics != null) {
-                var me = this;
-                _.each(topics, function (topic) {
-                    var oldValue = me._commandFunc(topic, me._value);
-                    me._oldValues.push(oldValue);
-                });
-            }
-            this.applied = true;
-
-        } else {
-            throw "Command can not be applied two times in a row.";
-        }
-
-    },
-
-    /** 
      * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute} 
      */
-    undoExecute:function (commandContext) {
+  execute(commandContext) {
-        if (this.applied) {
+    if (!this.applied) {
-            var topics = commandContext.findTopics(this._topicsId);
+      let topics = null;
-            var me = this;
+      try {
-            _.each(topics, function (topic, index) {
+        topics = commandContext.findTopics(this._topicsId);
-                me._commandFunc(topic, me._oldValues[index]);
+      } catch (e) {
-
+        if (this._commandFunc.commandType != 'changeTextToTopic') {
-            });
+          // Workaround: For some reason, there is a combination of events that involves
-
+          // making some modification and firing out of focus event. This is causing
-            this.applied = false;
+          // that a remove node try to be removed.  In some other life, I will come with the solution.
-            this._oldValues = [];
+          // Almost aways occurs with IE9. I could be related with some change of order in sets o something similar.
-        } else {
+          throw e;
-            throw "undo can not be applied.";
         }
+      }
+
+      if (topics != null) {
+        const me = this;
+        _.each(topics, (topic) => {
+          const oldValue = me._commandFunc(topic, me._value);
+          me._oldValues.push(oldValue);
+        });
+      }
+      this.applied = true;
+    } else {
+      throw 'Command can not be applied two times in a row.';
     }
+  },
+
+  /**
+     * Overrides abstract parent method
+     * @see {@link mindplot.Command.undoExecute}
+     */
+  undoExecute(commandContext) {
+    if (this.applied) {
+      const topics = commandContext.findTopics(this._topicsId);
+      const me = this;
+      _.each(topics, (topic, index) => {
+        me._commandFunc(topic, me._oldValues[index]);
+      });
+
+      this.applied = false;
+      this._oldValues = [];
+    } else {
+      throw 'undo can not be applied.';
+    }
+  },
 });
 
-export default GenericFunctionCommand
+export default GenericFunctionCommand;

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

@@ -18,9 +18,9 @@
 const Command = require('../Command').default;
 
 const MoveControlPointCommand = new Class(
-    /** @lends MoveControlPointCommand */ {
+  /** @lends MoveControlPointCommand */ {
-        Extends: Command,
+    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,89 +31,88 @@ const MoveControlPointCommand = new Class(
          * @param ctrlPointController {ControlPoint}
          * @param point {Number} 0 for the destination control point, 1 for the source control point
          */
-        initialize: function (ctrlPointController, point) {
+    initialize(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();
+      this.parent();
-            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;
-            }
+      }
-            this._point = point;
+      this._point = point;
-        },
+    },
 
-        /**
+    /**
          * Overrides abstract parent method
          */
-        execute: function (commandContext) {
+    execute(commandContext) {
-            var 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;
-            }
+      }
-            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: function (commandContext) {
+    undoExecute(commandContext) {
-            var line = this._line;
+      const line = this._line;
-            var 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;
-            }
+      }
-            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/lib/components/commands/RemoveFeatureFromTopicCommand.js

@@ -17,45 +17,45 @@
  */
 const Command = require('../Command').default;
 
-const RemoveFeatureFromTopicCommand = new Class(/**@lends RemoveFeatureFromTopicCommand */{
+const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopicCommand */{
-    Extends:Command,
+  Extends: Command,
-    /**
+  /**
-     * @classdesc This command handles do/undo of removing a feature from a topic, e.g. an icon or 
+     * @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}.
      * @constructs
      * @param {String} topicId id of the topic to remove the feature from
      * @param {String} featureId id of the feature to remove
      * @extends mindplot.Command
      */
-    initialize:function (topicId, featureId) {
+  initialize(topicId, featureId) {
-        $assert($defined(topicId), 'topicId can not be null');
+    $assert($defined(topicId), 'topicId can not be null');
-        $assert(featureId, 'iconModel can not be null');
+    $assert(featureId, 'iconModel can not be null');
 
-        this.parent();
+    this.parent();
-        this._topicId = topicId;
+    this._topicId = topicId;
-        this._featureId = featureId;
+    this._featureId = featureId;
-        this._oldFeature = null;
+    this._oldFeature = null;
-    },
+  },
 
-    /** 
+  /**
-     * Overrides abstract parent method 
-     */
-    execute:function (commandContext) {
-        var topic = commandContext.findTopics(this._topicId)[0];
-        var feature = topic.findFeatureById(this._featureId);
-        topic.removeFeature(feature);
-        this._oldFeature = feature;
-    },
-
-    /** 
      * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute} 
      */
-    undoExecute:function (commandContext) {
+  execute(commandContext) {
-        var topic = commandContext.findTopics(this._topicId)[0];
+    const topic = commandContext.findTopics(this._topicId)[0];
-        topic.addFeature(this._oldFeature);
+    const feature = topic.findFeatureById(this._featureId);
-        this._oldFeature = null;
+    topic.removeFeature(feature);
-    }
+    this._oldFeature = feature;
+  },
+
+  /**
+     * Overrides abstract parent method
+     * @see {@link mindplot.Command.undoExecute}
+     */
+  undoExecute(commandContext) {
+    const topic = commandContext.findTopics(this._topicId)[0];
+    topic.addFeature(this._oldFeature);
+    this._oldFeature = null;
+  },
 });
 
 export default RemoveFeatureFromTopicCommand;

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

@@ -9,13 +9,13 @@ const moveControlPointCommand = require('./MoveControlPointCommand').default;
 const removeFeatureFromTopicCommand = require('./RemoveFeatureFromTopicCommand').default;
 
 export const Commands = {
-    AddFeatureToTopicCommand: addFeatureToTopicCommand,
+  AddFeatureToTopicCommand: addFeatureToTopicCommand,
-    AddRelationshipCommand: addRelationshipCommand,
+  AddRelationshipCommand: addRelationshipCommand,
-    AddTopicCommand: addTopicCommand,
+  AddTopicCommand: addTopicCommand,
-    ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
+  ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
-    DeleteCommand: deleteCommand,
+  DeleteCommand: deleteCommand,
-    DragTopicCommand: dragTopicCommand,
+  DragTopicCommand: dragTopicCommand,
-    GenericFunctionCommand: genericFunctionCommand,
+  GenericFunctionCommand: genericFunctionCommand,
-    MoveControlPointCommand: moveControlPointCommand,
+  MoveControlPointCommand: moveControlPointCommand,
-    RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
+  RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
 };

packages/mindplot/lib/components/footer.js

@@ -1,5 +1,5 @@
 try {
-    $(document).trigger('loadcomplete', 'mind');
+  $(document).trigger('loadcomplete', 'mind');
 } catch (e) {
-    console.error(e.stack);
+  console.error(e.stack);
 }

packages/mindplot/lib/components/header.js

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 
-var mindplot = {};
+const mindplot = {};
 mindplot.util = {};
 mindplot.commands = {};
 mindplot.layout = {};
@@ -31,5 +31,5 @@ mindplot.persistence = {};
 mindplot.layout = {};
 
 Class.Mutators.Static = function (items) {
-    this.extend(items);
+  this.extend(items);
 };

packages/mindplot/lib/components/index.js

@@ -50,59 +50,59 @@ const topicStyle = require('./TopicStyle').default;
 const workspace = require('./Workspace').default;
 
 export const Components = {
-    ActionDispatcher: actionDispatcher,
+  ActionDispatcher: actionDispatcher,
 
-    ActionIcon: actionIcon,
+  ActionIcon: actionIcon,
-    CentralTopic: centralTopic,
+  CentralTopic: centralTopic,
-    Command: command,
+  Command: command,
-    ConnectionLine: connectionLine,
+  ConnectionLine: connectionLine,
-    ControlPoint: controlPoint,
+  ControlPoint: controlPoint,
-    Designer: designer,
+  Designer: designer,
 
-    DesignerActionRunner: designerActionRunner,
+  DesignerActionRunner: designerActionRunner,
-    DesignerKeyboard: designerKeyboard,
+  DesignerKeyboard: designerKeyboard,
-    DesignerModel: designerModal,
+  DesignerModel: designerModal,
-    DesignerUndoManager: designerUndoManager,
+  DesignerUndoManager: designerUndoManager,
 
-    DragConnector: dragConnector,
+  DragConnector: dragConnector,
-    DragManager: dragManager,
+  DragManager: dragManager,
-    DragPivot: dragPivot,
+  DragPivot: dragPivot,
-    DragTopic: dragTopic,
+  DragTopic: dragTopic,
-    EditorOptions: editorOptions,
+  EditorOptions: editorOptions,
-    EditorProperties: editorProperties,
+  EditorProperties: editorProperties,
-    Events: events,
+  Events: events,
 
-    footer: footer,
+  footer,
-    header: header,
+  header,
 
-    Icon: icon,
+  Icon: icon,
-    IconGroup: iconGroup,
+  IconGroup: iconGroup,
-    ImageIcon: imageIcon,
+  ImageIcon: imageIcon,
-    Keyboard: keyboard,
+  Keyboard: keyboard,
-    LinkIcon: linkIcon,
+  LinkIcon: linkIcon,
 
-    localSorageManager: localSorageManager,
+  localSorageManager,
-    MainTopic: mainTopic,
+  MainTopic: mainTopic,
 
-    Messages: messages,
+  Messages: messages,
-    MultilineTextEditor: multilineTextEditor,
+  MultilineTextEditor: multilineTextEditor,
-    NodeGraph: nodeGraph,
+  NodeGraph: nodeGraph,
-    NoteIcon: noteIcon,
+  NoteIcon: noteIcon,
-    Options: options,
+  Options: options,
 
-    PersistenceManager: persistenceManager,
+  PersistenceManager: persistenceManager,
-    Relationship: relationship,
+  Relationship: relationship,
-    RelationshipPivot: relationshipPivot,
+  RelationshipPivot: relationshipPivot,
-    RestPersistenceManager: resetPersistenceManager,
+  RestPersistenceManager: resetPersistenceManager,
-    ScreenManager: screenManager,
+  ScreenManager: screenManager,
-    ShrinkConnector: shrinkConnector,
+  ShrinkConnector: shrinkConnector,
-    StandaloneActionDispatcher: standaloneActionDispatcher,
+  StandaloneActionDispatcher: standaloneActionDispatcher,
-    TextEditor: textEditor,
+  TextEditor: textEditor,
-    TextEditorFactory: textEditorFactory,
+  TextEditorFactory: textEditorFactory,
 
-    Topic: topic,
+  Topic: topic,
-    TopicEventDispatcher: topicEventDispatcher,
+  TopicEventDispatcher: topicEventDispatcher,
-    TopicFeature: topicFeature,
+  TopicFeature: topicFeature,
-    TopicStyle: topicStyle,
+  TopicStyle: topicStyle,
-    Workspace: workspace,
+  Workspace: workspace,
 };

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

@@ -22,64 +22,62 @@ const ChildrenSorterStrategy = require('./ChildrenSorterStrategy').default;
  * @extends mindplot.layout.ChildrenSorterStrategy
  */
 const AbstractBasicSorter = new Class(
-    /** @lends AbstractBasicSorter */ {
+  /** @lends AbstractBasicSorter */ {
-        Extends: ChildrenSorterStrategy,
+    Extends: ChildrenSorterStrategy,
 
-        /**
+    /**
          * @param {} treeSet
          * @param {} node
          * @return the height of a node and its children if existing and not shrunken
          */
-        computeChildrenIdByHeights: function (treeSet, node) {
+    computeChildrenIdByHeights(treeSet, node) {
-            var result = {};
+      const result = {};
-            this._computeChildrenHeight(treeSet, node, result);
+      this._computeChildrenHeight(treeSet, node, result);
-            return result;
+      return result;
-        },
+    },
 
-        _getVerticalPadding: function () {
+    _getVerticalPadding() {
-            return AbstractBasicSorter.INTERNODE_VERTICAL_PADDING;
+      return AbstractBasicSorter.INTERNODE_VERTICAL_PADDING;
-        },
+    },
 
-        _computeChildrenHeight: function (treeSet, node, heightCache) {
+    _computeChildrenHeight(treeSet, node, heightCache) {
-            var height = node.getSize().height + this._getVerticalPadding() * 2; // 2* Top and down padding;
+      const height = node.getSize().height + this._getVerticalPadding() * 2; // 2* Top and down padding;
 
-            var result;
+      let result;
-            var children = treeSet.getChildren(node);
+      const children = treeSet.getChildren(node);
-            if (children.length == 0 || node.areChildrenShrunken()) {
+      if (children.length == 0 || node.areChildrenShrunken()) {
-                result = height;
+        result = height;
-            } else {
+      } else {
-                var childrenHeight = 0;
+        let childrenHeight = 0;
-                _.each(
+        _.each(
-                    children,
+          children,
-                    function (child) {
+          function (child) {
-                        childrenHeight += this._computeChildrenHeight(treeSet, child, heightCache);
+            childrenHeight += this._computeChildrenHeight(treeSet, child, heightCache);
-                    },
+          },
-                    this
+          this,
-                );
+        );
 
-                result = Math.max(height, childrenHeight);
+        result = Math.max(height, childrenHeight);
-            }
+      }
 
-            if (heightCache) {
+      if (heightCache) {
-                heightCache[node.getId()] = result;
+        heightCache[node.getId()] = result;
-            }
+      }
 
-            return result;
+      return result;
-        },
+    },
 
-        _getSortedChildren: function (treeSet, node) {
+    _getSortedChildren(treeSet, node) {
-            var result = treeSet.getChildren(node);
+      const result = treeSet.getChildren(node);
-            result.sort(function (a, b) {
+      result.sort((a, b) => a.getOrder() - b.getOrder());
-                return a.getOrder() - b.getOrder();
+      return result;
-            });
+    },
-            return result;
-        },
 
-        _getRelativeDirection: function (reference, position) {
+    _getRelativeDirection(reference, position) {
-            var offset = position.x - reference.x;
+      const offset = position.x - reference.x;
-            return offset >= 0 ? 1 : -1;
+      return offset >= 0 ? 1 : -1;
-        },
+    },
-    }
+  },
 );
 
 /**

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

@@ -18,15 +18,15 @@
 const AbstractBasicSorter = require('./AbstractBasicSorter').default;
 
 const BalancedSorter = new Class(
-    /** @lends BalancedSorter */ {
+  /** @lends BalancedSorter */ {
-        Extends: AbstractBasicSorter,
+    Extends: AbstractBasicSorter,
-        /**
+    /**
          * @constructs
          * @extends mindplot.layout.AbstractBasicSorter
          */
-        initialize: function () {},
+    initialize() {},
 
-        /**
+    /**
          * @param {} graph
          * @param {} parent
          * @param {} node
@@ -34,294 +34,286 @@ const BalancedSorter = new Class(
          * @param {Boolean} free
          * @return an array with order and position
          */
-        predict: function (graph, parent, node, position, free) {
+    predict(graph, parent, node, position, free) {
-            // If its a free node...
+      // If its a free node...
-            if (free) {
+      if (free) {
-                $assert(
+        $assert(
-                    $defined(position),
+          $defined(position),
-                    'position cannot be null for predict in free positioning'
+          'position cannot be null for predict in free positioning',
-                );
+        );
-                $assert($defined(node), 'node cannot be null for predict in free positioning');
+        $assert($defined(node), 'node cannot be null for predict in free positioning');
 
-                var rootNode = graph.getRootNode(parent);
+        var rootNode = graph.getRootNode(parent);
-                var direction = this._getRelativeDirection(
+        var direction = this._getRelativeDirection(
-                    rootNode.getPosition(),
+          rootNode.getPosition(),
-                    node.getPosition()
+          node.getPosition(),
-                );
+        );
 
-                var limitXPos =
+        const limitXPos = parent.getPosition().x
-                    parent.getPosition().x +
+                    + direction
-                    direction *
+                        * (parent.getSize().width / 2
-                        (parent.getSize().width / 2 +
+                            + node.getSize().width / 2
-                            node.getSize().width / 2 +
+                            + BalancedSorter.INTERNODE_HORIZONTAL_PADDING);
-                            BalancedSorter.INTERNODE_HORIZONTAL_PADDING);
 
-                var xPos =
+        const xPos = direction > 0
-                    direction > 0
+          ? position.x >= limitXPos
-                        ? position.x >= limitXPos
+            ? position.x
-                            ? position.x
+            : limitXPos
-                            : limitXPos
+          : position.x <= limitXPos
-                        : position.x <= limitXPos
+            ? position.x
-                        ? position.x
+            : limitXPos;
-                        : limitXPos;
 
-                return [0, { x: xPos, y: position.y }];
+        return [0, { x: xPos, y: position.y }];
-            }
+      }
 
-            var rootNode = graph.getRootNode(parent);
+      var rootNode = graph.getRootNode(parent);
 
-            // If it is a dragged node...
+      // If it is a dragged node...
-            if (node) {
+      if (node) {
-                $assert($defined(position), 'position cannot be null for predict in dragging');
+        $assert($defined(position), 'position cannot be null for predict in dragging');
-                var nodeDirection = this._getRelativeDirection(
+        const nodeDirection = this._getRelativeDirection(
-                    rootNode.getPosition(),
+          rootNode.getPosition(),
-                    node.getPosition()
+          node.getPosition(),
-                );
+        );
-                var positionDirection = this._getRelativeDirection(
+        const positionDirection = this._getRelativeDirection(
-                    rootNode.getPosition(),
+          rootNode.getPosition(),
-                    position
+          position,
-                );
+        );
-                var siblings = graph.getSiblings(node);
+        const siblings = graph.getSiblings(node);
 
-                var sameParent = parent == graph.getParent(node);
+        const sameParent = parent == graph.getParent(node);
-                if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) {
+        if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) {
-                    return [node.getOrder(), node.getPosition()];
+          return [node.getOrder(), node.getPosition()];
-                }
+        }
-            }
+      }
 
-            if (!position) {
+      if (!position) {
-                var right = this._getChildrenForOrder(parent, graph, 0);
+        var right = this._getChildrenForOrder(parent, graph, 0);
-                var left = this._getChildrenForOrder(parent, graph, 1);
+        var left = this._getChildrenForOrder(parent, graph, 1);
-            }
+      }
-            // Filter nodes on one side..
+      // Filter nodes on one side..
-            var order = position
+      const order = position
-                ? position.x > rootNode.getPosition().x
+        ? position.x > rootNode.getPosition().x
-                    ? 0
+          ? 0
-                    : 1
+          : 1
-                : right.length - left.length > 0
+        : right.length - left.length > 0
-                ? 1
+          ? 1
-                : 0;
+          : 0;
-            var direction = order % 2 == 0 ? 1 : -1;
+      var direction = order % 2 == 0 ? 1 : -1;
 
-            // Exclude the dragged node (if set)
+      // Exclude the dragged node (if set)
-            var children = this._getChildrenForOrder(parent, graph, order).filter(function (child) {
+      const children = this._getChildrenForOrder(parent, graph, order).filter((child) => child != node);
-                return child != node;
-            });
 
-            // No children?
+      // No children?
-            if (children.length == 0) {
+      if (children.length == 0) {
-                return [
+        return [
-                    order,
+          order,
-                    {
+          {
-                        x:
+            x:
-                            parent.getPosition().x +
+                            parent.getPosition().x
-                            direction *
+                            + direction
-                                (parent.getSize().width / 2 +
+                                * (parent.getSize().width / 2
-                                    BalancedSorter.INTERNODE_HORIZONTAL_PADDING * 2),
+                                    + BalancedSorter.INTERNODE_HORIZONTAL_PADDING * 2),
-                        y: parent.getPosition().y,
+            y: parent.getPosition().y,
-                    },
+          },
-                ];
+        ];
-            }
+      }
 
-            // Try to fit within ...
+      // Try to fit within ...
-            var result = null;
+      let result = null;
-            var last = children.getLast();
+      const last = children.getLast();
-            position = position || { x: last.getPosition().x, y: last.getPosition().y + 1 };
+      position = position || { x: last.getPosition().x, y: last.getPosition().y + 1 };
-            _.each(children, function (child, index) {
+      _.each(children, (child, index) => {
-                var cpos = child.getPosition();
+        const cpos = child.getPosition();
-                if (position.y > cpos.y) {
+        if (position.y > cpos.y) {
-                    let yOffset =
+          const yOffset = child == last
-                        child == last
+            ? child.getSize().height + BalancedSorter.INTERNODE_VERTICAL_PADDING * 2
-                            ? child.getSize().height + BalancedSorter.INTERNODE_VERTICAL_PADDING * 2
+            : (children[index + 1].getPosition().y - child.getPosition().y) / 2;
-                            : (children[index + 1].getPosition().y - child.getPosition().y) / 2;
+          result = [child.getOrder() + 2, { x: cpos.x, y: cpos.y + yOffset }];
-                    result = [child.getOrder() + 2, { x: cpos.x, y: cpos.y + yOffset }];
+        }
-                }
+      });
-            });
 
-            // Position wasn't below any node, so it must be inserted above
+      // Position wasn't below any node, so it must be inserted above
-            if (!result) {
+      if (!result) {
-                var first = children[0];
+        const first = children[0];
-                result = [
+        result = [
-                    position.x > 0 ? 0 : 1,
+          position.x > 0 ? 0 : 1,
-                    {
+          {
-                        x: first.getPosition().x,
+            x: first.getPosition().x,
-                        y:
+            y:
-                            first.getPosition().y -
+                            first.getPosition().y
-                            first.getSize().height -
+                            - first.getSize().height
-                            BalancedSorter.INTERNODE_VERTICAL_PADDING * 2,
+                            - BalancedSorter.INTERNODE_VERTICAL_PADDING * 2,
-                    },
+          },
-                ];
+        ];
-            }
+      }
 
-            return result;
+      return result;
-        },
+    },
 
-        /**
+    /**
          * @param {} treeSet
          * @param {} parent
          * @param {} child
          * @param {} order
          */
-        insert: function (treeSet, parent, child, order) {
+    insert(treeSet, parent, child, order) {
-            var children = this._getChildrenForOrder(parent, treeSet, order);
+      const children = this._getChildrenForOrder(parent, treeSet, order);
 
-            // If no children, return 0 or 1 depending on the side
+      // If no children, return 0 or 1 depending on the side
-            if (children.length == 0) {
+      if (children.length == 0) {
-                child.setOrder(order % 2);
+        child.setOrder(order % 2);
-                return;
+        return;
-            }
+      }
 
-            // Shift all the elements by two, so side is the same.
+      // Shift all the elements by two, so side is the same.
-            // In case of balanced sorter, order don't need to be continuous...
+      // In case of balanced sorter, order don't need to be continuous...
-            var max = 0;
+      let max = 0;
-            for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
-                var node = children[i];
+        const node = children[i];
-                max = Math.max(max, node.getOrder());
+        max = Math.max(max, node.getOrder());
-                if (node.getOrder() >= order) {
+        if (node.getOrder() >= order) {
-                    max = Math.max(max, node.getOrder() + 2);
+          max = Math.max(max, node.getOrder() + 2);
-                    node.setOrder(node.getOrder() + 2);
+          node.setOrder(node.getOrder() + 2);
-                }
+        }
-            }
+      }
 
-            var newOrder = order > max + 1 ? max + 2 : order;
+      const newOrder = order > max + 1 ? max + 2 : order;
-            child.setOrder(newOrder);
+      child.setOrder(newOrder);
-        },
+    },
 
-        /**
+    /**
          * @param {} treeSet
          * @param {} node
          */
-        detach: function (treeSet, node) {
+    detach(treeSet, node) {
-            var parent = treeSet.getParent(node);
+      const parent = treeSet.getParent(node);
-            // Filter nodes on one side..
+      // Filter nodes on one side..
-            var children = this._getChildrenForOrder(parent, treeSet, node.getOrder());
+      const children = this._getChildrenForOrder(parent, treeSet, node.getOrder());
 
-            _.each(children, function (child, index) {
+      _.each(children, (child, index) => {
-                if (child.getOrder() > node.getOrder()) {
+        if (child.getOrder() > node.getOrder()) {
-                    child.setOrder(child.getOrder() - 2);
+          child.setOrder(child.getOrder() - 2);
-                }
+        }
-            });
+      });
-            node.setOrder(node.getOrder() % 2 == 0 ? 0 : 1);
+      node.setOrder(node.getOrder() % 2 == 0 ? 0 : 1);
-        },
+    },
 
-        /**
+    /**
          * @param {} treeSet
          * @param {} node
          * @return offsets
          */
-        computeOffsets: function (treeSet, node) {
+    computeOffsets(treeSet, node) {
-            $assert(treeSet, 'treeSet can no be null.');
+      $assert(treeSet, 'treeSet can no be null.');
-            $assert(node, 'node can no be null.');
+      $assert(node, 'node can no be null.');
 
-            var children = this._getSortedChildren(treeSet, node);
+      const children = this._getSortedChildren(treeSet, node);
 
-            // Compute heights ...
+      // Compute heights ...
-            var heights = children
+      const heights = children
-                .map(function (child) {
+        .map(function (child) {
-                    return {
+          return {
-                        id: child.getId(),
+            id: child.getId(),
-                        order: child.getOrder(),
+            order: child.getOrder(),
-                        width: child.getSize().width,
+            width: child.getSize().width,
-                        height: this._computeChildrenHeight(treeSet, child),
+            height: this._computeChildrenHeight(treeSet, child),
-                    };
+          };
-                }, this)
+        }, this)
-                .reverse();
+        .reverse();
 
-            // Compute the center of the branch ...
+      // Compute the center of the branch ...
-            var totalPHeight = 0;
+      let totalPHeight = 0;
-            var totalNHeight = 0;
+      let totalNHeight = 0;
 
-            _.each(heights, function (elem) {
+      _.each(heights, (elem) => {
-                if (elem.order % 2 == 0) {
+        if (elem.order % 2 == 0) {
-                    totalPHeight += elem.height;
+          totalPHeight += elem.height;
-                } else {
+        } else {
-                    totalNHeight += elem.height;
+          totalNHeight += elem.height;
-                }
+        }
-            });
+      });
-            var psum = totalPHeight / 2;
+      let psum = totalPHeight / 2;
-            var nsum = totalNHeight / 2;
+      let nsum = totalNHeight / 2;
-            var ysum = 0;
+      let ysum = 0;
 
-            // Calculate the offsets ...
+      // Calculate the offsets ...
-            var result = {};
+      const result = {};
-            for (var i = 0; i < heights.length; i++) {
+      for (let i = 0; i < heights.length; i++) {
-                var direction = heights[i].order % 2 ? -1 : 1;
+        const direction = heights[i].order % 2 ? -1 : 1;
 
-                if (direction > 0) {
+        if (direction > 0) {
-                    psum = psum - heights[i].height;
+          psum -= heights[i].height;
-                    ysum = psum;
+          ysum = psum;
-                } else {
+        } else {
-                    nsum = nsum - heights[i].height;
+          nsum -= heights[i].height;
-                    ysum = nsum;
+          ysum = nsum;
-                }
+        }
 
-                var yOffset = ysum + heights[i].height / 2;
+        const yOffset = ysum + heights[i].height / 2;
-                var xOffset =
+        const xOffset = direction
-                    direction *
+                    * (node.getSize().width / 2
-                    (node.getSize().width / 2 +
+                        + heights[i].width / 2
-                        heights[i].width / 2 +
+                        + +BalancedSorter.INTERNODE_HORIZONTAL_PADDING);
-                        +BalancedSorter.INTERNODE_HORIZONTAL_PADDING);
 
-                $assert(!isNaN(xOffset), 'xOffset can not be null');
+        $assert(!isNaN(xOffset), 'xOffset can not be null');
-                $assert(!isNaN(yOffset), 'yOffset can not be null');
+        $assert(!isNaN(yOffset), 'yOffset can not be null');
 
-                result[heights[i].id] = { x: xOffset, y: yOffset };
+        result[heights[i].id] = { x: xOffset, y: yOffset };
-            }
+      }
-            return result;
+      return result;
-        },
+    },
 
-        /**
+    /**
          * @param {} treeSet
          * @param {} node
          * @throw will throw an error if order elements are missing
          */
-        verify: function (treeSet, node) {
+    verify(treeSet, node) {
-            // Check that all is consistent ...
+      // Check that all is consistent ...
-            var children = this._getChildrenForOrder(node, treeSet, node.getOrder());
+      const children = this._getChildrenForOrder(node, treeSet, node.getOrder());
 
-            // All odd ordered nodes should be "continuous" by themselves
+      // All odd ordered nodes should be "continuous" by themselves
-            // All even numbered nodes should be "continuous" by themselves
+      // All even numbered nodes should be "continuous" by themselves
-            var factor = node.getOrder() % 2 == 0 ? 2 : 1;
+      const factor = node.getOrder() % 2 == 0 ? 2 : 1;
-            for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
-                var order = i == 0 && factor == 1 ? 1 : factor * i;
+        const order = i == 0 && factor == 1 ? 1 : factor * i;
-                $assert(
+        $assert(
-                    children[i].getOrder() == order,
+          children[i].getOrder() == order,
-                    'Missing order elements. Missing order: ' +
+          `Missing order elements. Missing order: ${
-                        i * factor +
+            i * factor
-                        '. Parent:' +
+          }. Parent:${
-                        node.getId() +
+            node.getId()
-                        ',Node:' +
+          },Node:${
-                        children[i].getId()
+            children[i].getId()}`,
-                );
+        );
-            }
+      }
-        },
+    },
 
-        /**
+    /**
          * @param {} treeSet
          * @param {} child
          * @return the direction of the child within the treeSet
          */
-        getChildDirection: function (treeSet, child) {
+    getChildDirection(treeSet, child) {
-            return child.getOrder() % 2 == 0 ? 1 : -1;
+      return child.getOrder() % 2 == 0 ? 1 : -1;
-        },
+    },
 
-        /**
+    /**
          * @return {String} the print name of this class
          */
-        toString: function () {
+    toString() {
-            return 'Balanced Sorter';
+      return 'Balanced Sorter';
-        },
+    },
 
-        _getChildrenForOrder: function (parent, graph, order) {
+    _getChildrenForOrder(parent, graph, order) {
-            return this._getSortedChildren(graph, parent).filter(function (child) {
+      return this._getSortedChildren(graph, parent).filter((child) => child.getOrder() % 2 == order % 2);
-                return child.getOrder() % 2 == order % 2;
+    },
-            });
-        },
 
-        _getVerticalPadding: function () {
+    _getVerticalPadding() {
-            return BalancedSorter.INTERNODE_VERTICAL_PADDING;
+      return BalancedSorter.INTERNODE_VERTICAL_PADDING;
-        },
+    },
-    }
+  },
 );
 
 /**

packages/mindplot/lib/components/layout/ChangeEvent.js

@@ -17,54 +17,54 @@
  */
 
 const ChangeEvent = new Class(/** @lends ChangeEvent */{
-    /** 
+  /**
      * @constructs
      * @param {} id
      * @throws will throw an error if the given id is not/cannot be converted to a numerical value
      */
-    initialize:function(id) {
+  initialize(id) {
-        $assert(!isNaN(id), "id can not be null");
+    $assert(!isNaN(id), 'id can not be null');
-        this._id = id;
+    this._id = id;
-        this._position = null;
+    this._position = null;
-        this._order = null;
+    this._order = null;
-    },
+  },
 
-    /** @return id */
+  /** @return id */
-    getId:function() {
+  getId() {
-        return this._id;
+    return this._id;
-    },
+  },
 
-    /** @return order */
+  /** @return order */
-    getOrder: function() {
+  getOrder() {
-        return this._order;
+    return this._order;
-    },
+  },
 
-    /** @return position */
+  /** @return position */
-    getPosition: function() {
+  getPosition() {
-        return this._position;
+    return this._position;
-    },
+  },
 
-    /** 
+  /**
-     * @param {} value the order to set 
+     * @param {} value the order to set
      * @throws will throw an error if the given parameter is not/cannot be converted to a numerical
      * value
      */
-    setOrder: function(value) {
+  setOrder(value) {
-        $assert(!isNaN(value), "value can not be null");
+    $assert(!isNaN(value), 'value can not be null');
-        this._order = value;
+    this._order = value;
-    },
+  },
 
-    /** @param {} value
+  /** @param {} value
-     *  @throws will throw an error if the value is null or undefined*/
+     *  @throws will throw an error if the value is null or undefined */
-    setPosition: function(value) {
+  setPosition(value) {
-        $assert(value, "value can not be null");
+    $assert(value, 'value can not be null');
-        this._position = value;
+    this._position = value;
-    },
+  },
 
-    /** @return {String} order and position */
+  /** @return {String} order and position */
-    toString: function() {
+  toString() {
-        return "[order:" + this.getOrder() + ", position: {" + this.getPosition().x + "," + this.getPosition().y + "}]";
+    return `[order:${this.getOrder()}, position: {${this.getPosition().x},${this.getPosition().y}}]`;
-    }
+  },
 });
 
 export default ChangeEvent;

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

@@ -17,53 +17,53 @@
  */
 
 const ChildrenSorterStrategy = new Class(/** @lends ChildrenSorterStrategy */{
-    /** 
+  /**
      * @constructs
      */
-    initialize:function() {
+  initialize() {
 
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    computeChildrenIdByHeights: function(treeSet, node) {
+  computeChildrenIdByHeights(treeSet, node) {
-        throw "Method must be implemented";
+    throw 'Method must be implemented';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    computeOffsets:function(treeSet, node) {
+  computeOffsets(treeSet, node) {
-        throw "Method must be implemented";
+    throw 'Method must be implemented';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    insert: function(treeSet, parent, child, order) {
+  insert(treeSet, parent, child, order) {
-        throw "Method must be implemented";
+    throw 'Method must be implemented';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    detach:function(treeSet, node) {
+  detach(treeSet, node) {
-        throw "Method must be implemented";
+    throw 'Method must be implemented';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    predict:function(treeSet, parent, node, position, free) {
+  predict(treeSet, parent, node, position, free) {
-        throw "Method must be implemented";
+    throw 'Method must be implemented';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    verify:function(treeSet, node) {
+  verify(treeSet, node) {
-        throw "Method must be implemented";
+    throw 'Method must be implemented';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    getChildDirection: function(treeSet, node) {
+  getChildDirection(treeSet, node) {
-        throw "Method must be implemented";
+    throw 'Method must be implemented';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    toString:function() {
+  toString() {
-        throw "Method must be implemented: print name";
+    throw 'Method must be implemented: print name';
-    }
+  },
 
 });
 
-export default ChildrenSorterStrategy
+export default ChildrenSorterStrategy;

packages/mindplot/lib/components/layout/EventBus.js

@@ -18,13 +18,13 @@
 const Events = require('../Events').default;
 
 const EventBus = new Class(/** @lends EventBus */{
-    Implements: Events,
+  Implements: Events,
-    /**
+  /**
      * @constructs
      * @implements mindplot.Events
      */
-    initialize: function() {
+  initialize() {
-    }
+  },
 });
 
 /**
@@ -32,14 +32,14 @@ const EventBus = new Class(/** @lends EventBus */{
  * @enum {String}
  */
 EventBus.events = {
-    NodeResizeEvent:'NodeResizeEvent',
+  NodeResizeEvent: 'NodeResizeEvent',
-    NodeMoveEvent:'NodeMoveEvent',
+  NodeMoveEvent: 'NodeMoveEvent',
-    NodeShrinkEvent:'NodeShrinkEvent',
+  NodeShrinkEvent: 'NodeShrinkEvent',
-    NodeConnectEvent:'NodeConnectEvent',
+  NodeConnectEvent: 'NodeConnectEvent',
-    NodeDisconnectEvent:'NodeDisconnectEvent',
+  NodeDisconnectEvent: 'NodeDisconnectEvent',
-    NodeAdded:'NodeAdded',
+  NodeAdded: 'NodeAdded',
-    NodeRemoved:'NodeRemoved',
+  NodeRemoved: 'NodeRemoved',
-    DoLayout:'DoLayout'
+  DoLayout: 'DoLayout',
 };
 
 /** instance */

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

@@ -15,85 +15,84 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const EventBus = require('./EventBus').default
+const EventBus = require('./EventBus').default;
 
 const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{
-    /**
+  /**
      * @constructs
      */
-    initialize:function() {
+  initialize() {
-        this.registerBusEvents();
+    this.registerBusEvents();
-    },
+  },
 
-    /**
+  /**
      * @param {mindplot.layout.LayoutManager} layoutManager
      */
-    setLayoutManager : function(layoutManager) {
+  setLayoutManager(layoutManager) {
-        this._layoutManager = layoutManager;
+    this._layoutManager = layoutManager;
-    },
+  },
 
-    /**
+  /**
      * register bus events
      */
-    registerBusEvents:function () {
+  registerBusEvents() {
-        EventBus.instance.addEvent(EventBus.events.NodeAdded, this._nodeAdded.bind(this));
+    EventBus.instance.addEvent(EventBus.events.NodeAdded, this._nodeAdded.bind(this));
-        EventBus.instance.addEvent(EventBus.events.NodeRemoved, this._nodeRemoved.bind(this));
+    EventBus.instance.addEvent(EventBus.events.NodeRemoved, this._nodeRemoved.bind(this));
-        EventBus.instance.addEvent(EventBus.events.NodeResizeEvent, this._nodeResizeEvent.bind(this));
+    EventBus.instance.addEvent(EventBus.events.NodeResizeEvent, this._nodeResizeEvent.bind(this));
-        EventBus.instance.addEvent(EventBus.events.NodeMoveEvent, this._nodeMoveEvent.bind(this));
+    EventBus.instance.addEvent(EventBus.events.NodeMoveEvent, this._nodeMoveEvent.bind(this));
-        EventBus.instance.addEvent(EventBus.events.NodeDisconnectEvent, this._nodeDisconnectEvent.bind(this));
+    EventBus.instance.addEvent(EventBus.events.NodeDisconnectEvent, this._nodeDisconnectEvent.bind(this));
-        EventBus.instance.addEvent(EventBus.events.NodeConnectEvent, this._nodeConnectEvent.bind(this));
+    EventBus.instance.addEvent(EventBus.events.NodeConnectEvent, this._nodeConnectEvent.bind(this));
-        EventBus.instance.addEvent(EventBus.events.NodeShrinkEvent, this._nodeShrinkEvent.bind(this));
+    EventBus.instance.addEvent(EventBus.events.NodeShrinkEvent, this._nodeShrinkEvent.bind(this));
-        EventBus.instance.addEvent(EventBus.events.DoLayout, this._doLayout.bind(this));
+    EventBus.instance.addEvent(EventBus.events.DoLayout, this._doLayout.bind(this));
-    },
+  },
 
-    _nodeResizeEvent: function(args) {
+  _nodeResizeEvent(args) {
-        this._layoutManager.updateNodeSize(args.node.getId(), args.size);
+    this._layoutManager.updateNodeSize(args.node.getId(), args.size);
-    },
+  },
 
-    _nodeMoveEvent: function(args) {
+  _nodeMoveEvent(args) {
-        this._layoutManager.moveNode(args.node.getId(), args.position);
+    this._layoutManager.moveNode(args.node.getId(), args.position);
-    },
+  },
 
-    _nodeDisconnectEvent: function(node) {
+  _nodeDisconnectEvent(node) {
-        this._layoutManager.disconnectNode(node.getId());
+    this._layoutManager.disconnectNode(node.getId());
-    },
+  },
 
-    _nodeConnectEvent: function(args) {
+  _nodeConnectEvent(args) {
-        this._layoutManager.connectNode(args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder());
+    this._layoutManager.connectNode(args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder());
+  },
 
-    },
+  _nodeShrinkEvent(node) {
+    this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
+  },
 
-    _nodeShrinkEvent: function(node) {
+  _nodeAdded(node) {
-        this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
+    // Central topic must not be added twice ...
-    },
+    if (node.getId() != 0) {
-
+      this._layoutManager.addNode(node.getId(), { width: 10, height: 10 }, node.getPosition());
-    _nodeAdded: function(node) {
+      this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
-        // Central topic must not be added twice ...
-        if (node.getId() != 0) {
-            this._layoutManager.addNode(node.getId(), {width:10,height:10}, node.getPosition());
-            this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
-        }
-    },
-
-    _nodeRemoved: function(node) {
-        this._layoutManager.removeNode(node.getId());
-    },
-
-    _doLayout: function() {
-//        (function() {
-        this._layoutManager.layout(true);
-//        console.log("---------");
-//        this._layoutManager.dump();
-//        console.log("---------");
-//        console.log("---------");
-//        }).delay(0, this);
-    },
-
-    /** @return layout manager */
-    getLayoutManager: function() {
-        return this._layoutManager;
     }
+  },
+
+  _nodeRemoved(node) {
+    this._layoutManager.removeNode(node.getId());
+  },
+
+  _doLayout() {
+    //        (function() {
+    this._layoutManager.layout(true);
+    //        console.log("---------");
+    //        this._layoutManager.dump();
+    //        console.log("---------");
+    //        console.log("---------");
+    //        }).delay(0, this);
+  },
+
+  /** @return layout manager */
+  getLayoutManager() {
+    return this._layoutManager;
+  },
 
 });
 
-export default EventBusDispatcher
+export default EventBusDispatcher;

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

@@ -15,66 +15,63 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const AbstractBasicSorter = require('./AbstractBasicSorter').default
+const AbstractBasicSorter = require('./AbstractBasicSorter').default;
 
 /**
  * @class
  * @extends mindplot.layout.AbstractBasicSorter
  */
 const GridSorter = new Class(/** @lends GridSorter */{
-    Extends: AbstractBasicSorter,
+  Extends: AbstractBasicSorter,
 
-    /**
+  /**
      * @param {} treeSet
      * @param {} node
      * @return offsets
      */
-    computeOffsets: function(treeSet, node) {
+  computeOffsets(treeSet, node) {
-        $assert(treeSet, "treeSet can no be null.");
+    $assert(treeSet, 'treeSet can no be null.');
-        $assert(node, "node can no be null.");
+    $assert(node, 'node can no be null.');
-        $assert("order can no be null.");
+    $assert('order can no be null.');
 
-        var children = this._getSortedChildren(treeSet, node);
+    const children = this._getSortedChildren(treeSet, node);
 
-        // Compute heights ...
+    // Compute heights ...
-        var me = this;
+    const me = this;
-        var heights = children.map(function(child) {
+    const heights = children.map((child) => ({
-            return {
+      id: child.getId(),
-                id: child.getId(),
+      height: me._computeChildrenHeight(treeSet, child),
-                height: me._computeChildrenHeight(treeSet, child)
+    }));
-            };
-        });
 
-        // Calculate the offsets ...
+    // Calculate the offsets ...
-        var result = {};
+    const result = {};
-        for (var i = 0; i < heights.length; i++) {
+    for (let i = 0; i < heights.length; i++) {
-            var even = i%2 == 0 ? 1 : -1;
+      const even = i % 2 == 0 ? 1 : -1;
 
-            var zeroHeight = i == 0 ? 0 : heights[0].height/2 * even;
+      const zeroHeight = i == 0 ? 0 : heights[0].height / 2 * even;
-            var middleHeight = 0;
+      let middleHeight = 0;
-            for (var j=i-2; j>0; j=j-2) {
+      for (let j = i - 2; j > 0; j -= 2) {
-                middleHeight += heights[j].height * even;
+        middleHeight += heights[j].height * even;
-            }
+      }
-            var finalHeight = i == 0 ? 0 : heights[i].height/2 * even;
+      const finalHeight = i == 0 ? 0 : heights[i].height / 2 * even;
 
-            var yOffset = zeroHeight + middleHeight +finalHeight;
+      const yOffset = zeroHeight + middleHeight + finalHeight;
-            var xOffset = node.getSize().width + GridSorter.GRID_HORIZONTAR_SIZE;
+      const xOffset = node.getSize().width + GridSorter.GRID_HORIZONTAR_SIZE;
 
-            $assert(!isNaN(xOffset), "xOffset can not be null");
+      $assert(!isNaN(xOffset), 'xOffset can not be null');
-            $assert(!isNaN(yOffset), "yOffset can not be null");
+      $assert(!isNaN(yOffset), 'yOffset can not be null');
 
-            result[heights[i].id] = {x:xOffset,y:yOffset};
+      result[heights[i].id] = { x: xOffset, y: yOffset };
+    }
+    return result;
+  },
 
-        }
+  /**
-        return result;
-    },
-
-    /**
      * @return {String} the print name of this class
      */
-    toString:function() {
+  toString() {
-        return "Grid Sorter";
+    return 'Grid Sorter';
-    }
+  },
 
 });
 

packages/mindplot/lib/components/layout/LayoutManager.js

@@ -21,9 +21,9 @@ const OriginalLayout = require('./OriginalLayout').default;
 const ChangeEvent = require('./ChangeEvent').default;
 
 const LayoutManager = new Class(
-    /** @lends LayoutManager */ {
+  /** @lends LayoutManager */ {
-        Extends: Events,
+    Extends: Events,
-        /**
+    /**
          * @constructs
          * @extends mindplot.Events
          * @param {} rootNodeId
@@ -31,57 +31,57 @@ const LayoutManager = new Class(
          * @throws will throw an error if the root node id is null or undefined
          * @throws will throw an error if the root size is null
          */
-        initialize: function (rootNodeId, rootSize) {
+    initialize(rootNodeId, rootSize) {
-            $assert($defined(rootNodeId), 'rootNodeId can not be null');
+      $assert($defined(rootNodeId), 'rootNodeId can not be null');
-            $assert(rootSize, 'rootSize can not be null');
+      $assert(rootSize, 'rootSize can not be null');
-            var position = position || { x: 0, y: 0 };
+      var position = position || { x: 0, y: 0 };
 
-            this._treeSet = new RootedTreeSet();
+      this._treeSet = new RootedTreeSet();
-            this._layout = new OriginalLayout(this._treeSet);
+      this._layout = new OriginalLayout(this._treeSet);
 
-            var rootNode = this._layout.createNode(rootNodeId, rootSize, position, 'root');
+      const rootNode = this._layout.createNode(rootNodeId, rootSize, position, 'root');
-            this._treeSet.setRoot(rootNode);
+      this._treeSet.setRoot(rootNode);
-            this._events = [];
+      this._events = [];
-        },
+    },
 
-        /**
+    /**
          * @param id
          * @param size
          * @throws will throw an error if id is null or undefined
          */
-        updateNodeSize: function (id, size) {
+    updateNodeSize(id, size) {
-            $assert($defined(id), 'id can not be null');
+      $assert($defined(id), 'id can not be null');
 
-            var node = this._treeSet.find(id);
+      const node = this._treeSet.find(id);
-            node.setSize(size);
+      node.setSize(size);
-        },
+    },
 
-        /**
+    /**
          * @param id
          * @param value
          * @throws will throw an error if id is null or undefined
          * @throws will throw an error if value is null or undefined
          * @return this
          */
-        updateShrinkState: function (id, value) {
+    updateShrinkState(id, value) {
-            $assert($defined(id), 'id can not be null');
+      $assert($defined(id), 'id can not be null');
-            $assert($defined(value), 'value can not be null');
+      $assert($defined(value), 'value can not be null');
 
-            var node = this._treeSet.find(id);
+      const node = this._treeSet.find(id);
-            node.setShrunken(value);
+      node.setShrunken(value);
 
-            return this;
+      return this;
-        },
+    },
 
-        /**
+    /**
          * @param id
          * @return {@link RootedTreeSet}.find(id)
          */
-        find: function (id) {
+    find(id) {
-            return this._treeSet.find(id);
+      return this._treeSet.find(id);
-        },
+    },
 
-        /**
+    /**
          * @param id
          * @param position
          * @throws will throw an error if id is null or undefined
@@ -89,20 +89,20 @@ const LayoutManager = new Class(
          * @throws will throw an error if the position's x property is null or undefined
          * @throws will throw an error if the position's y property is null or undefined
          */
-        moveNode: function (id, position) {
+    moveNode(id, position) {
-            $assert($defined(id), 'id cannot be null');
+      $assert($defined(id), 'id cannot be null');
-            $assert($defined(position), 'position cannot be null');
+      $assert($defined(position), 'position cannot be null');
-            $assert($defined(position.x), 'x can not be null');
+      $assert($defined(position.x), 'x can not be null');
-            $assert($defined(position.y), 'y can not be null');
+      $assert($defined(position.y), 'y can not be null');
 
-            var node = this._treeSet.find(id);
+      const node = this._treeSet.find(id);
-            // @Todo: this should not be here. This is broking the isolated node support...
+      // @Todo: this should not be here. This is broking the isolated node support...
-            //        node.setFree(true);
+      //        node.setFree(true);
-            //        node.setFreeDisplacement({x:position.x - node.getPosition().x, y:position.y - node.getPosition().y});
+      //        node.setFreeDisplacement({x:position.x - node.getPosition().x, y:position.y - node.getPosition().y});
-            node.setPosition(position);
+      node.setPosition(position);
-        },
+    },
 
-        /**
+    /**
          * @param parentId
          * @param childId
          * @param order
@@ -111,65 +111,65 @@ const LayoutManager = new Class(
          * @throws will throw an error if order is null or undefined
          * @return this
          */
-        connectNode: function (parentId, childId, order) {
+    connectNode(parentId, childId, order) {
-            $assert($defined(parentId), 'parentId cannot be null');
+      $assert($defined(parentId), 'parentId cannot be null');
-            $assert($defined(childId), 'childId cannot be null');
+      $assert($defined(childId), 'childId cannot be null');
-            $assert($defined(order), 'order cannot be null');
+      $assert($defined(order), 'order cannot be null');
 
-            this._layout.connectNode(parentId, childId, order);
+      this._layout.connectNode(parentId, childId, order);
 
-            return this;
+      return this;
-        },
+    },
 
-        /**
+    /**
          * @param id
          * @throws will throw an error if id is null or undefined
          * @return this
          */
-        disconnectNode: function (id) {
+    disconnectNode(id) {
-            $assert($defined(id), 'id can not be null');
+      $assert($defined(id), 'id can not be null');
-            this._layout.disconnectNode(id);
+      this._layout.disconnectNode(id);
 
-            return this;
+      return this;
-        },
+    },
 
-        /**
+    /**
          * @param id
          * @param size
          * @param position
          * @throws will throw an error if id is null or undefined
          * @return this
          */
-        addNode: function (id, size, position) {
+    addNode(id, size, position) {
-            $assert($defined(id), 'id can not be null');
+      $assert($defined(id), 'id can not be null');
-            var result = this._layout.createNode(id, size, position, 'topic');
+      const result = this._layout.createNode(id, size, position, 'topic');
-            this._treeSet.add(result);
+      this._treeSet.add(result);
 
-            return this;
+      return this;
-        },
+    },
 
-        /**
+    /**
          * removes a node and its connection to parent if existing
          * @param id
          * @throws will throw an error if id is null or undefined
          * @return this
          */
-        removeNode: function (id) {
+    removeNode(id) {
-            $assert($defined(id), 'id can not be null');
+      $assert($defined(id), 'id can not be null');
-            var node = this._treeSet.find(id);
+      const node = this._treeSet.find(id);
 
-            // Is It connected ?
+      // Is It connected ?
-            if (this._treeSet.getParent(node)) {
+      if (this._treeSet.getParent(node)) {
-                this.disconnectNode(id);
+        this.disconnectNode(id);
-            }
+      }
 
-            // Remove the all the branch ...
+      // Remove the all the branch ...
-            this._treeSet.remove(id);
+      this._treeSet.remove(id);
 
-            return this;
+      return this;
-        },
+    },
 
-        /**
+    /**
          * @param {Number} parentId
          * @param {Number=} nodeId
          * @param {String=} position the position to use as mindplot.layout.Node.properties position
@@ -177,109 +177,107 @@ const LayoutManager = new Class(
          * @param {Boolean=} free true specifies free node positioning
          * @throws will throw an error if parentId is null or undefined
          */
-        predict: function (parentId, nodeId, position, free) {
+    predict(parentId, nodeId, position, free) {
-            $assert($defined(parentId), 'parentId can not be null');
+      $assert($defined(parentId), 'parentId can not be null');
 
-            var parent = this._treeSet.find(parentId);
+      const parent = this._treeSet.find(parentId);
-            var node = nodeId ? this._treeSet.find(nodeId) : null;
+      const node = nodeId ? this._treeSet.find(nodeId) : null;
-            var sorter = parent.getSorter();
+      const sorter = parent.getSorter();
 
-            var result = sorter.predict(this._treeSet, parent, node, position, free);
+      const result = sorter.predict(this._treeSet, parent, node, position, free);
-            return { order: result[0], position: result[1] };
+      return { order: result[0], position: result[1] };
-        },
+    },
 
-        /**
+    /**
          * logs dump to console
          */
-        dump: function () {
+    dump() {
-            console.log(this._treeSet.dump());
+      console.log(this._treeSet.dump());
-        },
+    },
 
-        /**
+    /**
          * @param containerId
          * @param {width:Number, height:Number} size
          * @throws will throw an error if containerId is null or undefined
          * @return canvas
          */
-        plot: function (containerId, size) {
+    plot(containerId, size) {
-            $assert(containerId, 'containerId cannot be null');
+      $assert(containerId, 'containerId cannot be null');
-            size = size || { width: 200, height: 200 };
+      size = size || { width: 200, height: 200 };
-            var squaresize = 10;
+      const squaresize = 10;
-            var canvas = Raphael(containerId, size.width, size.height);
+      const canvas = Raphael(containerId, size.width, size.height);
-            canvas.drawGrid(
+      canvas.drawGrid(
-                0,
+        0,
-                0,
+        0,
-                size.width,
+        size.width,
-                size.height,
+        size.height,
-                size.width / squaresize,
+        size.width / squaresize,
-                size.height / squaresize
+        size.height / squaresize,
-            );
+      );
-            this._treeSet.plot(canvas);
+      this._treeSet.plot(canvas);
 
-            return canvas;
+      return canvas;
-        },
+    },
 
-        /**
+    /**
          * initializes the layout to be updated
          * @param fireEvents
          * @return this
          */
-        layout: function (fireEvents) {
+    layout(fireEvents) {
-            // File repositioning ...
+      // File repositioning ...
-            this._layout.layout();
+      this._layout.layout();
 
-            // Collect changes ...
+      // Collect changes ...
-            this._collectChanges();
+      this._collectChanges();
 
-            if ($(fireEvents).length > 0 || fireEvents) {
+      if ($(fireEvents).length > 0 || fireEvents) {
-                this._flushEvents();
+        this._flushEvents();
+      }
+
+      return this;
+    },
+
+    _flushEvents() {
+      _.each(
+        this._events,
+        function (event) {
+          this.fireEvent('change', event);
+        },
+        this,
+      );
+      this._events = [];
+    },
+
+    _collectChanges(nodes) {
+      if (!nodes) nodes = this._treeSet.getTreeRoots();
+
+      _.each(
+        nodes,
+        function (node) {
+          if (node.hasOrderChanged() || node.hasPositionChanged()) {
+            // Find or create a event ...
+            const id = node.getId();
+            let event = this._events.some((event) => event.id == id);
+            if (!event) {
+              event = new ChangeEvent(id);
             }
 
-            return this;
+            // Update nodes ...
+            event.setOrder(node.getOrder());
+            event.setPosition(node.getPosition());
+
+            node.resetPositionState();
+            node.resetOrderState();
+            node.resetFreeState();
+            this._events.push(event);
+          }
+          this._collectChanges(this._treeSet.getChildren(node));
         },
-
+        this,
-        _flushEvents: function () {
+      );
-            _.each(
+    },
-                this._events,
+  },
-                function (event) {
-                    this.fireEvent('change', event);
-                },
-                this
-            );
-            this._events = [];
-        },
-
-        _collectChanges: function (nodes) {
-            if (!nodes) nodes = this._treeSet.getTreeRoots();
-
-            _.each(
-                nodes,
-                function (node) {
-                    if (node.hasOrderChanged() || node.hasPositionChanged()) {
-                        // Find or create a event ...
-                        var id = node.getId();
-                        var event = this._events.some(function (event) {
-                            return event.id == id;
-                        });
-                        if (!event) {
-                            event = new ChangeEvent(id);
-                        }
-
-                        // Update nodes ...
-                        event.setOrder(node.getOrder());
-                        event.setPosition(node.getPosition());
-
-                        node.resetPositionState();
-                        node.resetOrderState();
-                        node.resetFreeState();
-                        this._events.push(event);
-                    }
-                    this._collectChanges(this._treeSet.getChildren(node));
-                },
-                this
-            );
-        },
-    }
 );
 
 export default LayoutManager;

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

@@ -17,8 +17,8 @@
  */
 
 const Node = new Class(
-    /** @lends Node */ {
+  /** @lends Node */ {
-        /**
+    /**
          * @constructs
          * @param id
          * @param size
@@ -29,221 +29,220 @@ const Node = new Class(
          * @throws will throw an error if position is null or undefined
          * @throws will throw an error if sorter is null or undefined
          */
-        initialize: function (id, size, position, sorter) {
+    initialize(id, size, position, sorter) {
-            $assert(typeof id === 'number' && isFinite(id), 'id can not be null');
+      $assert(typeof id === 'number' && isFinite(id), 'id can not be null');
-            $assert(size, 'size can not be null');
+      $assert(size, 'size can not be null');
-            $assert(position, 'position can not be null');
+      $assert(position, 'position can not be null');
-            $assert(sorter, 'sorter can not be null');
+      $assert(sorter, 'sorter can not be null');
 
-            this._id = id;
+      this._id = id;
-            this._sorter = sorter;
+      this._sorter = sorter;
-            this._properties = {};
+      this._properties = {};
 
-            this.setSize(size);
+      this.setSize(size);
-            this.setPosition(position);
+      this.setPosition(position);
-            this.setShrunken(false);
+      this.setShrunken(false);
-        },
+    },
 
-        /** */
+    /** */
-        getId: function () {
+    getId() {
-            return this._id;
+      return this._id;
-        },
+    },
 
-        /** */
+    /** */
-        setFree: function (value) {
+    setFree(value) {
-            this._setProperty('free', value);
+      this._setProperty('free', value);
-        },
+    },
 
-        /** */
+    /** */
-        isFree: function () {
+    isFree() {
-            return this._getProperty('free');
+      return this._getProperty('free');
-        },
+    },
 
-        /** */
+    /** */
-        hasFreeChanged: function () {
+    hasFreeChanged() {
-            return this._isPropertyChanged('free');
+      return this._isPropertyChanged('free');
-        },
+    },
 
-        /** */
+    /** */
-        hasFreeDisplacementChanged: function () {
+    hasFreeDisplacementChanged() {
-            return this._isPropertyChanged('freeDisplacement');
+      return this._isPropertyChanged('freeDisplacement');
-        },
+    },
 
-        /** */
+    /** */
-        setShrunken: function (value) {
+    setShrunken(value) {
-            this._setProperty('shrink', value);
+      this._setProperty('shrink', value);
-        },
+    },
 
-        /** */
+    /** */
-        areChildrenShrunken: function () {
+    areChildrenShrunken() {
-            return this._getProperty('shrink');
+      return this._getProperty('shrink');
-        },
+    },
 
-        /** */
+    /** */
-        setOrder: function (order) {
+    setOrder(order) {
-            $assert(
+      $assert(
-                typeof order === 'number' && isFinite(order),
+        typeof order === 'number' && isFinite(order),
-                'Order can not be null. Value:' + order
+        `Order can not be null. Value:${order}`,
-            );
+      );
-            this._setProperty('order', order);
+      this._setProperty('order', order);
-        },
+    },
 
-        /** */
+    /** */
-        resetPositionState: function () {
+    resetPositionState() {
-            var prop = this._properties['position'];
+      const prop = this._properties.position;
-            if (prop) {
+      if (prop) {
-                prop.hasChanged = false;
+        prop.hasChanged = false;
-            }
+      }
-        },
+    },
 
-        /** */
+    /** */
-        resetOrderState: function () {
+    resetOrderState() {
-            var prop = this._properties['order'];
+      const prop = this._properties.order;
-            if (prop) {
+      if (prop) {
-                prop.hasChanged = false;
+        prop.hasChanged = false;
-            }
+      }
-        },
+    },
 
-        /** */
+    /** */
-        resetFreeState: function () {
+    resetFreeState() {
-            var prop = this._properties['freeDisplacement'];
+      const prop = this._properties.freeDisplacement;
-            if (prop) {
+      if (prop) {
-                prop.hasChanged = false;
+        prop.hasChanged = false;
-            }
+      }
-        },
+    },
 
-        /** */
+    /** */
-        getOrder: function () {
+    getOrder() {
-            return this._getProperty('order');
+      return this._getProperty('order');
-        },
+    },
 
-        /** */
+    /** */
-        hasOrderChanged: function () {
+    hasOrderChanged() {
-            return this._isPropertyChanged('order');
+      return this._isPropertyChanged('order');
-        },
+    },
 
-        /** */
+    /** */
-        hasPositionChanged: function () {
+    hasPositionChanged() {
-            return this._isPropertyChanged('position');
+      return this._isPropertyChanged('position');
-        },
+    },
 
-        /** */
+    /** */
-        hasSizeChanged: function () {
+    hasSizeChanged() {
-            return this._isPropertyChanged('size');
+      return this._isPropertyChanged('size');
-        },
+    },
 
-        /** */
+    /** */
-        getPosition: function () {
+    getPosition() {
-            return this._getProperty('position');
+      return this._getProperty('position');
-        },
+    },
 
-        /** */
+    /** */
-        setSize: function (size) {
+    setSize(size) {
-            $assert($defined(size), 'Size can not be null');
+      $assert($defined(size), 'Size can not be null');
-            this._setProperty('size', Object.clone(size));
+      this._setProperty('size', Object.clone(size));
-        },
+    },
 
-        /** */
+    /** */
-        getSize: function () {
+    getSize() {
-            return this._getProperty('size');
+      return this._getProperty('size');
-        },
+    },
 
-        /** */
+    /** */
-        setFreeDisplacement: function (displacement) {
+    setFreeDisplacement(displacement) {
-            $assert($defined(displacement), 'Position can not be null');
+      $assert($defined(displacement), 'Position can not be null');
-            $assert($defined(displacement.x), 'x can not be null');
+      $assert($defined(displacement.x), 'x can not be null');
-            $assert($defined(displacement.y), 'y can not be null');
+      $assert($defined(displacement.y), 'y can not be null');
-            var oldDisplacement = this.getFreeDisplacement();
+      const oldDisplacement = this.getFreeDisplacement();
-            var newDisplacement = {
+      const newDisplacement = {
-                x: oldDisplacement.x + displacement.x,
+        x: oldDisplacement.x + displacement.x,
-                y: oldDisplacement.y + displacement.y,
+        y: oldDisplacement.y + displacement.y,
-            };
+      };
 
-            this._setProperty('freeDisplacement', Object.clone(newDisplacement));
+      this._setProperty('freeDisplacement', Object.clone(newDisplacement));
-        },
+    },
 
-        /** */
+    /** */
-        resetFreeDisplacement: function () {
+    resetFreeDisplacement() {
-            this._setProperty('freeDisplacement', { x: 0, y: 0 });
+      this._setProperty('freeDisplacement', { x: 0, y: 0 });
-        },
+    },
 
-        /** */
+    /** */
-        getFreeDisplacement: function () {
+    getFreeDisplacement() {
-            var freeDisplacement = this._getProperty('freeDisplacement');
+      const freeDisplacement = this._getProperty('freeDisplacement');
-            return freeDisplacement || { x: 0, y: 0 };
+      return freeDisplacement || { x: 0, y: 0 };
-        },
+    },
 
-        /** */
+    /** */
-        setPosition: function (position) {
+    setPosition(position) {
-            $assert($defined(position), 'Position can not be null');
+      $assert($defined(position), 'Position can not be null');
-            $assert($defined(position.x), 'x can not be null');
+      $assert($defined(position.x), 'x can not be null');
-            $assert($defined(position.y), 'y can not be null');
+      $assert($defined(position.y), 'y can not be null');
 
-            // This is a performance improvement to avoid movements that really could be avoided.
+      // This is a performance improvement to avoid movements that really could be avoided.
-            var currentPos = this.getPosition();
+      const currentPos = this.getPosition();
-            if (
+      if (
-                currentPos == null ||
+        currentPos == null
-                Math.abs(currentPos.x - position.x) > 2 ||
+                || Math.abs(currentPos.x - position.x) > 2
-                Math.abs(currentPos.y - position.y) > 2
+                || Math.abs(currentPos.y - position.y) > 2
-            )
+      ) this._setProperty('position', position);
-                this._setProperty('position', position);
+    },
-        },
 
-        _setProperty: function (key, value) {
+    _setProperty(key, value) {
-            var prop = this._properties[key];
+      let prop = this._properties[key];
-            if (!prop) {
+      if (!prop) {
-                prop = {
+        prop = {
-                    hasChanged: false,
+          hasChanged: false,
-                    value: null,
+          value: null,
-                    oldValue: null,
+          oldValue: null,
-                };
+        };
-            }
+      }
 
-            // Only update if the property has changed ...
+      // Only update if the property has changed ...
-            if (JSON.stringify(prop.value) != JSON.stringify(value)) {
+      if (JSON.stringify(prop.value) != JSON.stringify(value)) {
-                prop.oldValue = prop.value;
+        prop.oldValue = prop.value;
-                prop.value = value;
+        prop.value = value;
-                prop.hasChanged = true;
+        prop.hasChanged = true;
-            }
+      }
-            this._properties[key] = prop;
+      this._properties[key] = prop;
-        },
+    },
 
-        _getProperty: function (key) {
+    _getProperty(key) {
-            var prop = this._properties[key];
+      const prop = this._properties[key];
-            return $defined(prop) ? prop.value : null;
+      return $defined(prop) ? prop.value : null;
-        },
+    },
 
-        _isPropertyChanged: function (key) {
+    _isPropertyChanged(key) {
-            var prop = this._properties[key];
+      const prop = this._properties[key];
-            return prop ? prop.hasChanged : false;
+      return prop ? prop.hasChanged : false;
-        },
+    },
 
-        /** */
+    /** */
-        getSorter: function () {
+    getSorter() {
-            return this._sorter;
+      return this._sorter;
-        },
+    },
 
-        /** @return {String} returns id, order, position, size and shrink information*/
+    /** @return {String} returns id, order, position, size and shrink information */
-        toString: function () {
+    toString() {
-            return (
+      return (
-                '[id:' +
+        `[id:${
-                this.getId() +
+          this.getId()
-                ', order:' +
+        }, order:${
-                this.getOrder() +
+          this.getOrder()
-                ', position: {' +
+        }, position: {${
-                this.getPosition().x +
+          this.getPosition().x
-                ',' +
+        },${
-                this.getPosition().y +
+          this.getPosition().y
-                '}, size: {' +
+        }}, size: {${
-                this.getSize().width +
+          this.getSize().width
-                ',' +
+        },${
-                this.getSize().height +
+          this.getSize().height
-                '}, shrink:' +
+        }}, shrink:${
-                this.areChildrenShrunken() +
+          this.areChildrenShrunken()
-                ']'
+        }]`
-            );
+      );
-        },
+    },
-    }
+  },
 );
 
 export default Node;

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

@@ -21,267 +21,259 @@ const SymmetricSorter = require('./SymmetricSorter').default;
 const BalancedSorter = require('./BalancedSorter').default;
 
 const OriginalLayout = new Class(
-    /** @lends OriginalLayout */ {
+  /** @lends OriginalLayout */ {
-        /**
+    /**
          * @constructs
          * @param treeSet
          */
-        initialize: function (treeSet) {
+    initialize(treeSet) {
-            this._treeSet = treeSet;
+      this._treeSet = treeSet;
+    },
+
+    /** */
+    createNode(id, size, position, type) {
+      $assert($defined(id), 'id can not be null');
+      $assert(size, 'size can not be null');
+      $assert(position, 'position can not be null');
+      $assert(type, 'type can not be null');
+
+      const strategy = type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER;
+      return new Node(id, size, position, strategy);
+    },
+
+    /** */
+    connectNode(parentId, childId, order) {
+      const parent = this._treeSet.find(parentId);
+      const child = this._treeSet.find(childId);
+
+      // Insert the new node ...
+      const sorter = parent.getSorter();
+      sorter.insert(this._treeSet, parent, child, order);
+
+      // Connect the new node ...
+      this._treeSet.connect(parentId, childId);
+
+      // Fire a basic validation ...
+      sorter.verify(this._treeSet, parent);
+    },
+
+    /** */
+    disconnectNode(nodeId) {
+      const node = this._treeSet.find(nodeId);
+      const parent = this._treeSet.getParent(node);
+      $assert(parent, 'Node already disconnected');
+
+      // Make it fixed
+      node.setFree(false);
+      node.resetFreeDisplacement();
+
+      // Remove from children list.
+      const sorter = parent.getSorter();
+      sorter.detach(this._treeSet, node);
+
+      // Disconnect the new node ...
+      this._treeSet.disconnect(nodeId);
+
+      // Fire a basic validation ...
+      parent.getSorter().verify(this._treeSet, parent);
+    },
+
+    /** */
+    layout() {
+      const roots = this._treeSet.getTreeRoots();
+      _.each(
+        roots,
+        function (node) {
+          // Calculate all node heights ...
+          const sorter = node.getSorter();
+
+          const heightById = sorter.computeChildrenIdByHeights(this._treeSet, node);
+
+          this._layoutChildren(node, heightById);
+
+          this._fixOverlapping(node, heightById);
         },
+        this,
+      );
+    },
 
-        /** */
+    _layoutChildren(node, heightById) {
-        createNode: function (id, size, position, type) {
+      const nodeId = node.getId();
-            $assert($defined(id), 'id can not be null');
+      const children = this._treeSet.getChildren(node);
-            $assert(size, 'size can not be null');
+      const parent = this._treeSet.getParent(node);
-            $assert(position, 'position can not be null');
+      const childrenOrderMoved = children.some((child) => child.hasOrderChanged());
-            $assert(type, 'type can not be null');
+      const childrenSizeChanged = children.some((child) => child.hasSizeChanged());
 
-            var strategy =
+      // If ether any of the nodes has been changed of position or the height of the children is not
-                type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER;
+      // the same, children nodes must be repositioned ....
-            return new Node(id, size, position, strategy);
+      const newBranchHeight = heightById[nodeId];
-        },
 
-        /** */
+      const parentHeightChanged = $defined(parent) ? parent._heightChanged : false;
-        connectNode: function (parentId, childId, order) {
+      const heightChanged = node._branchHeight != newBranchHeight;
-            var parent = this._treeSet.find(parentId);
+      node._heightChanged = heightChanged || parentHeightChanged;
-            var child = this._treeSet.find(childId);
 
-            // Insert the new node ...
+      if (childrenOrderMoved || childrenSizeChanged || heightChanged || parentHeightChanged) {
-            var sorter = parent.getSorter();
+        const sorter = node.getSorter();
-            sorter.insert(this._treeSet, parent, child, order);
+        const offsetById = sorter.computeOffsets(this._treeSet, node);
+        const parentPosition = node.getPosition();
+        const me = this;
+        _.each(children, (child) => {
+          const offset = offsetById[child.getId()];
 
-            // Connect the new node ...
+          const childFreeDisplacement = child.getFreeDisplacement();
-            this._treeSet.connect(parentId, childId);
+          const direction = node.getSorter().getChildDirection(me._treeSet, child);
 
-            // Fire a basic validation ...
+          if (
-            sorter.verify(this._treeSet, parent);
+            (direction > 0 && childFreeDisplacement.x < 0)
-        },
+                        || (direction < 0 && childFreeDisplacement.x > 0)
-
+          ) {
-        /** */
+            child.resetFreeDisplacement();
-        disconnectNode: function (nodeId) {
+            child.setFreeDisplacement({
-            var node = this._treeSet.find(nodeId);
+              x: -childFreeDisplacement.x,
-            var parent = this._treeSet.getParent(node);
+              y: childFreeDisplacement.y,
-            $assert(parent, 'Node already disconnected');
-
-            // Make it fixed
-            node.setFree(false);
-            node.resetFreeDisplacement();
-
-            // Remove from children list.
-            var sorter = parent.getSorter();
-            sorter.detach(this._treeSet, node);
-
-            // Disconnect the new node ...
-            this._treeSet.disconnect(nodeId);
-
-            // Fire a basic validation ...
-            parent.getSorter().verify(this._treeSet, parent);
-        },
-
-        /** */
-        layout: function () {
-            var roots = this._treeSet.getTreeRoots();
-            _.each(
-                roots,
-                function (node) {
-                    // Calculate all node heights ...
-                    var sorter = node.getSorter();
-
-                    var heightById = sorter.computeChildrenIdByHeights(this._treeSet, node);
-
-                    this._layoutChildren(node, heightById);
-
-                    this._fixOverlapping(node, heightById);
-                },
-                this
-            );
-        },
-
-        _layoutChildren: function (node, heightById) {
-            var nodeId = node.getId();
-            var children = this._treeSet.getChildren(node);
-            var parent = this._treeSet.getParent(node);
-            var childrenOrderMoved = children.some(function (child) {
-                return child.hasOrderChanged();
-            });
-            var childrenSizeChanged = children.some(function (child) {
-                return child.hasSizeChanged();
             });
+          }
 
-            // If ether any of the nodes has been changed of position or the height of the children is not
+          offset.x += child.getFreeDisplacement().x;
-            // the same, children nodes must be repositioned ....
+          offset.y += child.getFreeDisplacement().y;
-            var newBranchHeight = heightById[nodeId];
 
-            var parentHeightChanged = $defined(parent) ? parent._heightChanged : false;
+          const parentX = parentPosition.x;
-            var heightChanged = node._branchHeight != newBranchHeight;
+          const parentY = parentPosition.y;
-            node._heightChanged = heightChanged || parentHeightChanged;
 
-            if (childrenOrderMoved || childrenSizeChanged || heightChanged || parentHeightChanged) {
+          const newPos = {
-                var sorter = node.getSorter();
+            x: parentX + offset.x,
-                var offsetById = sorter.computeOffsets(this._treeSet, node);
+            y: parentY + offset.y + me._calculateAlignOffset(node, child, heightById),
-                var parentPosition = node.getPosition();
+          };
-                var me = this;
+          me._treeSet.updateBranchPosition(child, newPos);
-                _.each(children, function (child) {
+        });
-                    var offset = offsetById[child.getId()];
 
-                    var childFreeDisplacement = child.getFreeDisplacement();
+        node._branchHeight = newBranchHeight;
-                    var direction = node.getSorter().getChildDirection(me._treeSet, child);
+      }
 
-                    if (
+      // Continue reordering the children nodes ...
-                        (direction > 0 && childFreeDisplacement.x < 0) ||
+      _.each(
-                        (direction < 0 && childFreeDisplacement.x > 0)
+        children,
-                    ) {
+        function (child) {
-                        child.resetFreeDisplacement();
+          this._layoutChildren(child, heightById);
-                        child.setFreeDisplacement({
-                            x: -childFreeDisplacement.x,
-                            y: childFreeDisplacement.y,
-                        });
-                    }
-
-                    offset.x += child.getFreeDisplacement().x;
-                    offset.y += child.getFreeDisplacement().y;
-
-                    var parentX = parentPosition.x;
-                    var parentY = parentPosition.y;
-
-                    var newPos = {
-                        x: parentX + offset.x,
-                        y: parentY + offset.y + me._calculateAlignOffset(node, child, heightById),
-                    };
-                    me._treeSet.updateBranchPosition(child, newPos);
-                });
-
-                node._branchHeight = newBranchHeight;
-            }
-
-            // Continue reordering the children nodes ...
-            _.each(
-                children,
-                function (child) {
-                    this._layoutChildren(child, heightById);
-                },
-                this
-            );
         },
+        this,
+      );
+    },
 
-        _calculateAlignOffset: function (node, child, heightById) {
+    _calculateAlignOffset(node, child, heightById) {
-            if (child.isFree()) {
+      if (child.isFree()) {
-                return 0;
+        return 0;
-            }
+      }
 
-            var offset = 0;
+      let offset = 0;
 
-            var nodeHeight = node.getSize().height;
+      const nodeHeight = node.getSize().height;
-            var childHeight = child.getSize().height;
+      const childHeight = child.getSize().height;
 
-            if (
+      if (
-                this._treeSet.isStartOfSubBranch(child) &&
+        this._treeSet.isStartOfSubBranch(child)
-                this._branchIsTaller(child, heightById)
+                && this._branchIsTaller(child, heightById)
-            ) {
+      ) {
-                if (this._treeSet.hasSinglePathToSingleLeaf(child)) {
+        if (this._treeSet.hasSinglePathToSingleLeaf(child)) {
-                    offset =
+          offset = heightById[child.getId()] / 2
-                        heightById[child.getId()] / 2 -
+                        - (childHeight + child.getSorter()._getVerticalPadding() * 2) / 2;
-                        (childHeight + child.getSorter()._getVerticalPadding() * 2) / 2;
+        } else {
-                } else {
+          offset = this._treeSet.isLeaf(child) ? 0 : -(childHeight - nodeHeight) / 2;
-                    offset = this._treeSet.isLeaf(child) ? 0 : -(childHeight - nodeHeight) / 2;
+        }
-                }
+      } else if (nodeHeight > childHeight) {
-            } else if (nodeHeight > childHeight) {
+        if (this._treeSet.getSiblings(child).length > 0) {
-                if (this._treeSet.getSiblings(child).length > 0) {
+          offset = 0;
-                    offset = 0;
+        } else {
-                } else {
+          offset = nodeHeight / 2 - childHeight / 2;
-                    offset = nodeHeight / 2 - childHeight / 2;
+        }
-                }
+      } else if (childHeight > nodeHeight) {
-            } else if (childHeight > nodeHeight) {
+        if (this._treeSet.getSiblings(child).length > 0) {
-                if (this._treeSet.getSiblings(child).length > 0) {
+          offset = 0;
-                    offset = 0;
+        } else {
-                } else {
+          offset = -(childHeight / 2 - nodeHeight / 2);
-                    offset = -(childHeight / 2 - nodeHeight / 2);
+        }
-                }
+      }
-            }
 
-            return offset;
+      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);
+
+      if (node.isFree()) {
+        this._shiftBranches(node, heightById);
+      }
+
+      _.each(
+        children,
+        function (child) {
+          this._fixOverlapping(child, heightById);
         },
+        this,
+      );
+    },
 
-        _branchIsTaller: function (node, heightById) {
+    _shiftBranches(node, heightById) {
-            return (
+      const shiftedBranches = [node];
-                heightById[node.getId()] >
+
-                node.getSize().height + node.getSorter()._getVerticalPadding() * 2
+      const siblingsToShift = this._treeSet.getSiblingsInVerticalDirection(
-            );
+        node,
+        node.getFreeDisplacement().y,
+      );
+      let last = node;
+      _.each(
+        siblingsToShift,
+        function (sibling) {
+          const overlappingOccurs = shiftedBranches.some(function (shiftedBranch) {
+            return this._branchesOverlap(shiftedBranch, sibling, heightById);
+          }, this);
+
+          if (!sibling.isFree() || overlappingOccurs) {
+            const sAmount = node.getFreeDisplacement().y;
+            this._treeSet.shiftBranchPosition(sibling, 0, sAmount);
+            shiftedBranches.push(sibling);
+          }
         },
+        this,
+      );
 
-        _fixOverlapping: function (node, heightById) {
+      const branchesToShift = this._treeSet
-            var children = this._treeSet.getChildren(node);
+        .getBranchesInVerticalDirection(node, node.getFreeDisplacement().y)
+        .filter((branch) => !shiftedBranches.contains(branch));
 
-            if (node.isFree()) {
+      _.each(
-                this._shiftBranches(node, heightById);
+        branchesToShift,
-            }
+        function (branch) {
-
+          const bAmount = node.getFreeDisplacement().y;
-            _.each(
+          this._treeSet.shiftBranchPosition(branch, 0, bAmount);
-                children,
+          shiftedBranches.push(branch);
-                function (child) {
+          last = branch;
-                    this._fixOverlapping(child, heightById);
-                },
-                this
-            );
         },
+        this,
+      );
+    },
 
-        _shiftBranches: function (node, heightById) {
+    _branchesOverlap(branchA, branchB, heightById) {
-            var shiftedBranches = [node];
+      // a branch doesn't really overlap with itself
+      if (branchA == branchB) {
+        return false;
+      }
 
-            var siblingsToShift = this._treeSet.getSiblingsInVerticalDirection(
+      const topA = branchA.getPosition().y - heightById[branchA.getId()] / 2;
-                node,
+      const bottomA = branchA.getPosition().y + heightById[branchA.getId()] / 2;
-                node.getFreeDisplacement().y
+      const topB = branchB.getPosition().y - heightById[branchB.getId()] / 2;
-            );
+      const bottomB = branchB.getPosition().y + heightById[branchB.getId()] / 2;
-            var last = node;
-            _.each(
-                siblingsToShift,
-                function (sibling) {
-                    var overlappingOccurs = shiftedBranches.some(function (shiftedBranch) {
-                        return this._branchesOverlap(shiftedBranch, sibling, heightById);
-                    }, this);
 
-                    if (!sibling.isFree() || overlappingOccurs) {
+      return !(topA >= bottomB || bottomA <= topB);
-                        var sAmount = node.getFreeDisplacement().y;
+    },
-                        this._treeSet.shiftBranchPosition(sibling, 0, sAmount);
+  },
-                        shiftedBranches.push(sibling);
-                    }
-                },
-                this
-            );
-
-            var branchesToShift = this._treeSet
-                .getBranchesInVerticalDirection(node, node.getFreeDisplacement().y)
-                .filter(function (branch) {
-                    return !shiftedBranches.contains(branch);
-                });
-
-            _.each(
-                branchesToShift,
-                function (branch) {
-                    var bAmount = node.getFreeDisplacement().y;
-                    this._treeSet.shiftBranchPosition(branch, 0, bAmount);
-                    shiftedBranches.push(branch);
-                    last = branch;
-                },
-                this
-            );
-        },
-
-        _branchesOverlap: function (branchA, branchB, heightById) {
-            // a branch doesn't really overlap with itself
-            if (branchA == branchB) {
-                return false;
-            }
-
-            var topA = branchA.getPosition().y - heightById[branchA.getId()] / 2;
-            var bottomA = branchA.getPosition().y + heightById[branchA.getId()] / 2;
-            var topB = branchB.getPosition().y - heightById[branchB.getId()] / 2;
-            var bottomB = branchB.getPosition().y + heightById[branchB.getId()] / 2;
-
-            return !(topA >= bottomB || bottomA <= topB);
-        },
-    }
 );
 
 /**

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

@@ -17,443 +17,437 @@
  */
 
 const RootedTreeSet = new Class(
-    /** @lends RootedTreeSet */ {
+  /** @lends RootedTreeSet */ {
-        /** @constructs */
+    /** @constructs */
-        initialize: function () {
+    initialize() {
-            this._rootNodes = [];
+      this._rootNodes = [];
-        },
+    },
 
-        /**
+    /**
          * @param root
          * @throws will throw an error if root is null or undefined
          */
-        setRoot: function (root) {
+    setRoot(root) {
-            $assert(root, 'root can not be null');
+      $assert(root, 'root can not be null');
-            this._rootNodes.push(this._decodate(root));
+      this._rootNodes.push(this._decodate(root));
-        },
+    },
 
-        /** getter */
+    /** getter */
-        getTreeRoots: function () {
+    getTreeRoots() {
-            return this._rootNodes;
+      return this._rootNodes;
-        },
+    },
 
-        _decodate: function (node) {
+    _decodate(node) {
-            node._children = [];
+      node._children = [];
-            return node;
+      return node;
-        },
+    },
 
-        /**
+    /**
          * @param {mindplot.model.NodeModel} node
          * @throws will throw an error if node is null or undefined
          * @throws will throw an error if node with id already exists
          * @throws will throw an error if node has been added already
          */
-        add: function (node) {
+    add(node) {
-            $assert(node, 'node can not be null');
+      $assert(node, 'node can not be null');
-            $assert(
+      $assert(
-                !this.find(node.getId(), false),
+        !this.find(node.getId(), false),
-                'node already exits with this id. Id:' + node.getId()
+        `node already exits with this id. Id:${node.getId()}`,
-            );
+      );
-            $assert(!node._children, 'node already added');
+      $assert(!node._children, 'node already added');
-            this._rootNodes.push(this._decodate(node));
+      this._rootNodes.push(this._decodate(node));
-        },
+    },
 
-        /**
+    /**
          * @param nodeId
          * @throws will throw an error if nodeId is null or undefined
          */
-        remove: function (nodeId) {
+    remove(nodeId) {
-            $assert($defined(nodeId), 'nodeId can not be null');
+      $assert($defined(nodeId), 'nodeId can not be null');
-            var node = this.find(nodeId);
+      const node = this.find(nodeId);
-            this._rootNodes.erase(node);
+      this._rootNodes.erase(node);
-        },
+    },
 
-        /**
+    /**
          * @param parentId
          * @param childId
          * @throws will throw an error if parentId is null or undefined
          * @throws will throw an error if childId is null or undefined
          * @throws will throw an error if node with id childId is already a child of parent
          */
-        connect: function (parentId, childId) {
+    connect(parentId, childId) {
-            $assert($defined(parentId), 'parent can not be null');
+      $assert($defined(parentId), 'parent can not be null');
-            $assert($defined(childId), 'child can not be null');
+      $assert($defined(childId), 'child can not be null');
 
-            var parent = this.find(parentId);
+      const parent = this.find(parentId);
-            var child = this.find(childId, true);
+      const child = this.find(childId, true);
-            $assert(
+      $assert(
-                !child._parent,
+        !child._parent,
-                'node already connected. Id:' + child.getId() + ',previous:' + child._parent
+        `node already connected. Id:${child.getId()},previous:${child._parent}`,
-            );
+      );
 
-            parent._children.push(child);
+      parent._children.push(child);
-            child._parent = parent;
+      child._parent = parent;
-            this._rootNodes.erase(child);
+      this._rootNodes.erase(child);
-        },
+    },
 
-        /**
+    /**
          * @param nodeId
          * @throws will throw an error if nodeId is null or undefined
          * @throws will throw an error if node is not connected
          */
-        disconnect: function (nodeId) {
+    disconnect(nodeId) {
-            $assert($defined(nodeId), 'nodeId can not be null');
+      $assert($defined(nodeId), 'nodeId can not be null');
-            var node = this.find(nodeId);
+      const node = this.find(nodeId);
-            $assert(node._parent, 'Node is not connected');
+      $assert(node._parent, 'Node is not connected');
 
-            node._parent._children.erase(node);
+      node._parent._children.erase(node);
-            this._rootNodes.push(node);
+      this._rootNodes.push(node);
-            node._parent = null;
+      node._parent = null;
-        },
+    },
 
-        /**
+    /**
          * @param id
          * @param validate
          * @throws will throw an error if id is null or undefined
          * @throws will throw an error if node cannot be found
          * @return node
          */
-        find: function (id, validate) {
+    find(id, validate) {
-            $assert($defined(id), 'id can not be null');
+      $assert($defined(id), 'id can not be null');
 
-            var graphs = this._rootNodes;
+      const graphs = this._rootNodes;
-            var result = null;
+      let result = null;
-            for (var i = 0; i < graphs.length; i++) {
+      for (let i = 0; i < graphs.length; i++) {
-                var node = graphs[i];
+        const node = graphs[i];
-                result = this._find(id, node);
+        result = this._find(id, node);
-                if (result) {
+        if (result) {
-                    break;
+          break;
-                }
+        }
-            }
+      }
-            validate = !$defined(validate) ? true : validate;
+      validate = !$defined(validate) ? true : validate;
-            $assert(
+      $assert(
-                validate ? result : true,
+        validate ? result : true,
-                'node could not be found id:' + id + '\n,RootedTreeSet' + this.dump()
+        `node could not be found id:${id}\n,RootedTreeSet${this.dump()}`,
-            );
+      );
-            return result;
+      return result;
-        },
+    },
 
-        _find: function (id, parent) {
+    _find(id, parent) {
-            if (parent.getId() == id) {
+      if (parent.getId() == id) {
-                return parent;
+        return parent;
-            }
+      }
 
-            var result = null;
+      let result = null;
-            var children = parent._children;
+      const children = parent._children;
-            for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
-                var child = children[i];
+        const child = children[i];
-                result = this._find(id, child);
+        result = this._find(id, child);
-                if (result) break;
+        if (result) break;
-            }
+      }
 
-            return result;
+      return result;
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @throws will throw an error if nodeId is null or undefined
          * @return children
          */
-        getChildren: function (node) {
+    getChildren(node) {
-            $assert(node, 'node cannot be null');
+      $assert(node, 'node cannot be null');
-            return node._children;
+      return node._children;
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @throws will throw an error if node is null or undefined
          * @return root node or the provided node, if it has no parent
          */
-        getRootNode: function (node) {
+    getRootNode(node) {
-            $assert(node, 'node cannot be null');
+      $assert(node, 'node cannot be null');
-            var parent = this.getParent(node);
+      const parent = this.getParent(node);
-            if ($defined(parent)) {
+      if ($defined(parent)) {
-                return this.getRootNode(parent);
+        return this.getRootNode(parent);
-            }
+      }
 
-            return node;
+      return node;
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @throws will throw an error if node is null or undefined
-         * @return {Array} ancestors*/
+         * @return {Array} ancestors */
-        getAncestors: function (node) {
+    getAncestors(node) {
-            $assert(node, 'node cannot be null');
+      $assert(node, 'node cannot be null');
-            return this._getAncestors(this.getParent(node), []);
+      return this._getAncestors(this.getParent(node), []);
-        },
+    },
 
-        _getAncestors: function (node, ancestors) {
+    _getAncestors(node, ancestors) {
-            var result = ancestors;
+      const result = ancestors;
-            if (node) {
+      if (node) {
-                result.push(node);
+        result.push(node);
-                this._getAncestors(this.getParent(node), result);
+        this._getAncestors(this.getParent(node), result);
-            }
+      }
-            return result;
+      return result;
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @throws will throw an error if node is null or undefined
          * @return {Array} siblings
          */
-        getSiblings: function (node) {
+    getSiblings(node) {
-            $assert(node, 'node cannot be null');
+      $assert(node, 'node cannot be null');
-            if (!$defined(node._parent)) {
+      if (!$defined(node._parent)) {
-                return [];
+        return [];
-            }
+      }
-            var siblings = node._parent._children.filter(function (child) {
+      const siblings = node._parent._children.filter((child) => child != node);
-                return child != node;
+      return siblings;
-            });
+    },
-            return siblings;
-        },
 
-        /**
+    /**
          * @param node
          * @throws will throw an error if node is null or undefined
          * @return {Boolean} whether the node has a single path to a single leaf (no branching)
          */
-        hasSinglePathToSingleLeaf: function (node) {
+    hasSinglePathToSingleLeaf(node) {
-            $assert(node, 'node cannot be null');
+      $assert(node, 'node cannot be null');
-            return this._hasSinglePathToSingleLeaf(node);
+      return this._hasSinglePathToSingleLeaf(node);
-        },
+    },
 
-        _hasSinglePathToSingleLeaf: function (node) {
+    _hasSinglePathToSingleLeaf(node) {
-            var children = this.getChildren(node);
+      const children = this.getChildren(node);
 
-            if (children.length == 1) {
+      if (children.length == 1) {
-                return this._hasSinglePathToSingleLeaf(children[0]);
+        return this._hasSinglePathToSingleLeaf(children[0]);
-            }
+      }
 
-            return children.length == 0;
+      return children.length == 0;
-        },
+    },
 
-        /**
+    /**
          * @param node
-         * @return {Boolean} whether the node is the start of a subbranch*/
+         * @return {Boolean} whether the node is the start of a subbranch */
-        isStartOfSubBranch: function (node) {
+    isStartOfSubBranch(node) {
-            return this.getSiblings(node).length > 0 && this.getChildren(node).length == 1;
+      return this.getSiblings(node).length > 0 && this.getChildren(node).length == 1;
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @throws will throw an error if node is null or undefined
          * @return {Boolean} whether the node is a leaf
          */
-        isLeaf: function (node) {
+    isLeaf(node) {
-            $assert(node, 'node cannot be null');
+      $assert(node, 'node cannot be null');
-            return this.getChildren(node).length == 0;
+      return this.getChildren(node).length == 0;
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @throws will throw an error if node is null or undefined
          * @return parent
          */
-        getParent: function (node) {
+    getParent(node) {
-            $assert(node, 'node cannot be null');
+      $assert(node, 'node cannot be null');
-            return node._parent;
+      return node._parent;
-        },
+    },
 
-        /**
+    /**
          * @return result
          */
-        dump: function () {
+    dump() {
-            var branches = this._rootNodes;
+      const branches = this._rootNodes;
-            var result = '';
+      let result = '';
-            for (var i = 0; i < branches.length; i++) {
+      for (let i = 0; i < branches.length; i++) {
-                var branch = branches[i];
+        const branch = branches[i];
-                result += this._dump(branch, '');
+        result += this._dump(branch, '');
-            }
+      }
-            return result;
+      return result;
-        },
+    },
 
-        _dump: function (node, indent) {
+    _dump(node, indent) {
-            var result = indent + node + '\n';
+      let result = `${indent + node}\n`;
-            var children = this.getChildren(node);
+      const children = this.getChildren(node);
-            for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
-                var child = children[i];
+        const child = children[i];
-                result += this._dump(child, indent + '   ');
+        result += this._dump(child, `${indent}   `);
-            }
+      }
 
-            return result;
+      return result;
-        },
+    },
 
-        /**
+    /**
          * @param canvas
          */
-        plot: function (canvas) {
+    plot(canvas) {
-            var branches = this._rootNodes;
+      const branches = this._rootNodes;
-            for (var i = 0; i < branches.length; i++) {
+      for (let i = 0; i < branches.length; i++) {
-                var branch = branches[i];
+        const branch = branches[i];
-                this._plot(canvas, branch);
+        this._plot(canvas, branch);
-            }
+      }
-        },
+    },
 
-        _plot: function (canvas, node, root) {
+    _plot(canvas, node, root) {
-            var children = this.getChildren(node);
+      const children = this.getChildren(node);
-            var cx = node.getPosition().x + canvas.width / 2 - node.getSize().width / 2;
+      const cx = node.getPosition().x + canvas.width / 2 - node.getSize().width / 2;
-            var cy = node.getPosition().y + canvas.height / 2 - node.getSize().height / 2;
+      const cy = node.getPosition().y + canvas.height / 2 - node.getSize().height / 2;
-            var rect = canvas.rect(cx, cy, node.getSize().width, node.getSize().height);
+      const rect = canvas.rect(cx, cy, node.getSize().width, node.getSize().height);
-            var order = node.getOrder() == null ? 'r' : node.getOrder();
+      const order = node.getOrder() == null ? 'r' : node.getOrder();
-            var text = canvas.text(
+      const text = canvas.text(
-                node.getPosition().x + canvas.width / 2,
+        node.getPosition().x + canvas.width / 2,
-                node.getPosition().y + canvas.height / 2,
+        node.getPosition().y + canvas.height / 2,
-                node.getId() + '[' + order + ']'
+        `${node.getId()}[${order}]`,
-            );
+      );
-            text.attr('fill', '#FFF');
+      text.attr('fill', '#FFF');
-            var fillColor = this._rootNodes.contains(node)
+      const fillColor = this._rootNodes.contains(node)
-                ? '#000'
+        ? '#000'
-                : node.isFree()
+        : node.isFree()
-                ? '#abc'
+          ? '#abc'
-                : '#c00';
+          : '#c00';
-            rect.attr('fill', fillColor);
+      rect.attr('fill', fillColor);
 
-            var rectPosition = {
+      const rectPosition = {
-                x: rect.attr('x') - canvas.width / 2 + rect.attr('width') / 2,
+        x: rect.attr('x') - canvas.width / 2 + rect.attr('width') / 2,
-                y: rect.attr('y') - canvas.height / 2 + rect.attr('height') / 2,
+        y: rect.attr('y') - canvas.height / 2 + rect.attr('height') / 2,
-            };
+      };
-            var rectSize = { width: rect.attr('width'), height: rect.attr('height') };
+      const rectSize = { width: rect.attr('width'), height: rect.attr('height') };
-            rect.click(function () {
+      rect.click(() => {
-                console.log(
+        console.log(
-                    '[id:' +
+          `[id:${
-                        node.getId() +
+            node.getId()
-                        ', order:' +
+          }, order:${
-                        node.getOrder() +
+            node.getOrder()
-                        ', position:(' +
+          }, position:(${
-                        rectPosition.x +
+            rectPosition.x
-                        ',' +
+          },${
-                        rectPosition.y +
+            rectPosition.y
-                        '), size:' +
+          }), size:${
-                        rectSize.width +
+            rectSize.width
-                        'x' +
+          }x${
-                        rectSize.height +
+            rectSize.height
-                        ', freeDisplacement:(' +
+          }, freeDisplacement:(${
-                        node.getFreeDisplacement().x +
+            node.getFreeDisplacement().x
-                        ',' +
+          },${
-                        node.getFreeDisplacement().y +
+            node.getFreeDisplacement().y
-                        ')]'
+          })]`,
-                );
+        );
-            });
+      });
-            text.click(function () {
+      text.click(() => {
-                console.log(
+        console.log(
-                    '[id:' +
+          `[id:${
-                        node.getId() +
+            node.getId()
-                        ', order:' +
+          }, order:${
-                        node.getOrder() +
+            node.getOrder()
-                        ', position:(' +
+          }, position:(${
-                        rectPosition.x +
+            rectPosition.x
-                        ',' +
+          },${
-                        rectPosition.y +
+            rectPosition.y
-                        '), size:' +
+          }), size:${
-                        rectSize.width +
+            rectSize.width
-                        'x' +
+          }x${
-                        rectSize.height +
+            rectSize.height
-                        ', freeDisplacement:(' +
+          }, freeDisplacement:(${
-                        node.getFreeDisplacement().x +
+            node.getFreeDisplacement().x
-                        ',' +
+          },${
-                        node.getFreeDisplacement().y +
+            node.getFreeDisplacement().y
-                        ')]'
+          })]`,
-                );
+        );
-            });
+      });
 
-            for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
-                var child = children[i];
+        const child = children[i];
-                this._plot(canvas, child);
+        this._plot(canvas, child);
-            }
+      }
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @param position
          */
-        updateBranchPosition: function (node, position) {
+    updateBranchPosition(node, position) {
-            var oldPos = node.getPosition();
+      const oldPos = node.getPosition();
-            node.setPosition(position);
+      node.setPosition(position);
 
-            var xOffset = oldPos.x - position.x;
+      const xOffset = oldPos.x - position.x;
-            var yOffset = oldPos.y - position.y;
+      const yOffset = oldPos.y - position.y;
 
-            var children = this.getChildren(node);
+      const children = this.getChildren(node);
-            var me = this;
+      const me = this;
-            _.each(children, function (child) {
+      _.each(children, (child) => {
-                me.shiftBranchPosition(child, xOffset, yOffset);
+        me.shiftBranchPosition(child, xOffset, yOffset);
-            });
+      });
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @param xOffset
          * @param yOffset
          */
-        shiftBranchPosition: function (node, xOffset, yOffset) {
+    shiftBranchPosition(node, xOffset, yOffset) {
-            var position = node.getPosition();
+      const position = node.getPosition();
-            node.setPosition({ x: position.x + xOffset, y: position.y + yOffset });
+      node.setPosition({ x: position.x + xOffset, y: position.y + yOffset });
 
-            var children = this.getChildren(node);
+      const children = this.getChildren(node);
-            var me = this;
+      const me = this;
-            _.each(children, function (child) {
+      _.each(children, (child) => {
-                me.shiftBranchPosition(child, xOffset, yOffset);
+        me.shiftBranchPosition(child, xOffset, yOffset);
-            });
+      });
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @param yOffset
          * @return siblings in the offset (vertical) direction, i.e. with lower or higher order, respectively
          */
-        getSiblingsInVerticalDirection: function (node, yOffset) {
+    getSiblingsInVerticalDirection(node, yOffset) {
-            // siblings with lower or higher order, depending on the direction of the offset and on the same side as their parent
+      // siblings with lower or higher order, depending on the direction of the offset and on the same side as their parent
-            var parent = this.getParent(node);
+      const parent = this.getParent(node);
-            var siblings = this.getSiblings(node).filter(function (sibling) {
+      const siblings = this.getSiblings(node).filter((sibling) => {
-                var sameSide =
+        const sameSide = node.getPosition().x > parent.getPosition().x
-                    node.getPosition().x > parent.getPosition().x
+          ? sibling.getPosition().x > parent.getPosition().x
-                        ? sibling.getPosition().x > parent.getPosition().x
+          : sibling.getPosition().x < parent.getPosition().x;
-                        : sibling.getPosition().x < parent.getPosition().x;
+        const orderOK = yOffset < 0
-                var orderOK =
+          ? sibling.getOrder() < node.getOrder()
-                    yOffset < 0
+          : sibling.getOrder() > node.getOrder();
-                        ? sibling.getOrder() < node.getOrder()
+        return orderOK && sameSide;
-                        : sibling.getOrder() > node.getOrder();
+      });
-                return orderOK && sameSide;
-            });
 
-            if (yOffset < 0) {
+      if (yOffset < 0) {
-                siblings.reverse();
+        siblings.reverse();
-            }
+      }
 
-            return siblings;
+      return siblings;
-        },
+    },
 
-        /**
+    /**
          * @param node
          * @param yOffset
          * @return branches of the root node on the same side as the given node's, in the given
          * vertical direction
          */
-        getBranchesInVerticalDirection: function (node, yOffset) {
+    getBranchesInVerticalDirection(node, yOffset) {
-            // direct descendants of the root that do not contain the node and are on the same side
+      // direct descendants of the root that do not contain the node and are on the same side
-            // and on the direction of the offset
+      // and on the direction of the offset
-            var rootNode = this.getRootNode(node);
+      const rootNode = this.getRootNode(node);
-            var branches = this.getChildren(rootNode).filter(function (child) {
+      const branches = this.getChildren(rootNode).filter(function (child) {
-                return this._find(node.getId(), child);
+        return this._find(node.getId(), child);
-            }, this);
+      }, this);
 
-            var branch = branches[0];
+      const branch = branches[0];
-            var rootDescendants = this.getSiblings(branch).filter(function (sibling) {
+      const rootDescendants = this.getSiblings(branch).filter((sibling) => {
-                var sameSide =
+        const sameSide = node.getPosition().x > rootNode.getPosition().x
-                    node.getPosition().x > rootNode.getPosition().x
+          ? sibling.getPosition().x > rootNode.getPosition().x
-                        ? sibling.getPosition().x > rootNode.getPosition().x
+          : sibling.getPosition().x < rootNode.getPosition().x;
-                        : sibling.getPosition().x < rootNode.getPosition().x;
+        const sameDirection = yOffset < 0
-                var sameDirection =
+          ? sibling.getOrder() < branch.getOrder()
-                    yOffset < 0
+          : sibling.getOrder() > branch.getOrder();
-                        ? sibling.getOrder() < branch.getOrder()
+        return sameSide && sameDirection;
-                        : sibling.getOrder() > branch.getOrder();
+      }, this);
-                return sameSide && sameDirection;
-            }, this);
 
-            return rootDescendants;
+      return rootDescendants;
-        },
+    },
-    }
+  },
 );
 
 export default RootedTreeSet;

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

@@ -18,15 +18,15 @@
 const AbstractBasicSorter = require('./AbstractBasicSorter').default;
 
 const SymmetricSorter = new Class(
-    /** @lends SymmetricSorter */ {
+  /** @lends SymmetricSorter */ {
-        Extends: AbstractBasicSorter,
+    Extends: AbstractBasicSorter,
-        /**
+    /**
          * @constructs
          * @extends mindplot.layout.AbstractBasicSorter
          */
-        initialize: function () {},
+    initialize() {},
 
-        /**
+    /**
          * Predict the order and position of a dragged node.
          *
          * @param graph The tree set
@@ -36,190 +36,184 @@ const SymmetricSorter = new Class(
          * @param free Free drag or not
          * @return {*}
          */
-        predict: function (graph, parent, node, position, free) {
+    predict(graph, parent, node, position, free) {
-            var self = this;
+      const self = this;
-            var rootNode = graph.getRootNode(parent);
+      const rootNode = graph.getRootNode(parent);
 
-            // If its a free node...
+      // If its a free node...
-            if (free) {
+      if (free) {
-                $assert(
+        $assert(
-                    $defined(position),
+          $defined(position),
-                    'position cannot be null for predict in free positioning'
+          'position cannot be null for predict in free positioning',
-                );
+        );
-                $assert($defined(node), 'node cannot be null for predict in free positioning');
+        $assert($defined(node), 'node cannot be null for predict in free positioning');
 
-                var direction = this._getRelativeDirection(
+        const direction = this._getRelativeDirection(
-                    rootNode.getPosition(),
+          rootNode.getPosition(),
-                    parent.getPosition()
+          parent.getPosition(),
-                );
+        );
-                var limitXPos =
+        const limitXPos = parent.getPosition().x
-                    parent.getPosition().x +
+                    + direction
-                    direction *
+                        * (parent.getSize().width / 2
-                        (parent.getSize().width / 2 +
+                            + node.getSize().width / 2
-                            node.getSize().width / 2 +
+                            + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
-                            SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
 
-                var xPos =
+        const xPos = direction > 0
-                    direction > 0
+          ? position.x >= limitXPos
-                        ? position.x >= limitXPos
+            ? position.x
-                            ? position.x
+            : limitXPos
-                            : limitXPos
+          : position.x <= limitXPos
-                        : position.x <= limitXPos
+            ? position.x
-                        ? position.x
+            : limitXPos;
-                        : limitXPos;
 
-                return [0, { x: xPos, y: position.y }];
+        return [0, { x: xPos, y: position.y }];
-            }
+      }
 
-            // Its not a dragged node (it is being added)
+      // Its not a dragged node (it is being added)
-            if (!node) {
+      if (!node) {
-                var parentDirection = self._getRelativeDirection(
+        const parentDirection = self._getRelativeDirection(
-                    rootNode.getPosition(),
+          rootNode.getPosition(),
-                    parent.getPosition()
+          parent.getPosition(),
-                );
+        );
 
-                var position = {
+        var position = {
-                    x:
+          x:
-                        parent.getPosition().x +
+                        parent.getPosition().x
-                        parentDirection *
+                        + parentDirection
-                            (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
+                            * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
-                    y: parent.getPosition().y,
+          y: parent.getPosition().y,
-                };
+        };
-                return [graph.getChildren(parent).length, position];
+        return [graph.getChildren(parent).length, position];
-            }
+      }
 
-            // If it is a dragged node...
+      // If it is a dragged node...
-            $assert($defined(position), 'position cannot be null for predict in dragging');
+      $assert($defined(position), 'position cannot be null for predict in dragging');
-            var nodeDirection = this._getRelativeDirection(
+      const nodeDirection = this._getRelativeDirection(
-                rootNode.getPosition(),
+        rootNode.getPosition(),
-                node.getPosition()
+        node.getPosition(),
-            );
+      );
-            var positionDirection = this._getRelativeDirection(rootNode.getPosition(), position);
+      const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position);
-            var siblings = graph.getSiblings(node);
+      const siblings = graph.getSiblings(node);
 
-            // node has no siblings and its trying to reconnect to its own parent
+      // node has no siblings and its trying to reconnect to its own parent
-            var sameParent = parent == graph.getParent(node);
+      const sameParent = parent == graph.getParent(node);
-            if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) {
+      if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) {
-                return [node.getOrder(), node.getPosition()];
+        return [node.getOrder(), node.getPosition()];
-            }
+      }
 
-            var parentChildren = graph.getChildren(parent);
+      const parentChildren = graph.getChildren(parent);
 
-            if (parentChildren.length == 0) {
+      if (parentChildren.length == 0) {
-                // Fit as a child of the parent node...
+        // Fit as a child of the parent node...
-                var position = {
+        var position = {
-                    x:
+          x:
-                        parent.getPosition().x +
+                        parent.getPosition().x
-                        positionDirection *
+                        + positionDirection
-                            (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
+                            * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
-                    y: parent.getPosition().y,
+          y: parent.getPosition().y,
-                };
+        };
-                return [0, position];
+        return [0, position];
-            } else {
+      }
-                // Try to fit within ...
+      // Try to fit within ...
-                var result = null;
+      const result = null;
-                var last = parentChildren.getLast();
+      const last = parentChildren.getLast();
-                for (var i = 0; i < parentChildren.length; i++) {
+      for (let i = 0; i < parentChildren.length; i++) {
-                    var parentChild = parentChildren[i];
+        const parentChild = parentChildren[i];
-                    var nodeAfter = i + 1 == parentChild.length ? null : parentChildren[i + 1];
+        const nodeAfter = i + 1 == parentChild.length ? null : parentChildren[i + 1];
 
-                    // Fit at the bottom
+        // Fit at the bottom
-                    if (!nodeAfter && position.y > parentChild.getPosition().y) {
+        if (!nodeAfter && position.y > parentChild.getPosition().y) {
-                        var order =
+          var order = graph.getParent(node) && graph.getParent(node).getId() == parent.getId()
-                            graph.getParent(node) && graph.getParent(node).getId() == parent.getId()
+            ? last.getOrder()
-                                ? last.getOrder()
+            : last.getOrder() + 1;
-                                : last.getOrder() + 1;
+          var position = {
-                        var position = {
+            x: parentChild.getPosition().x,
-                            x: parentChild.getPosition().x,
+            y:
-                            y:
+                                parentChild.getPosition().y
-                                parentChild.getPosition().y +
+                                + parentChild.getSize().height
-                                parentChild.getSize().height +
+                                + SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
-                                SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
+          };
-                        };
+          return [order, position];
-                        return [order, position];
+        }
-                    }
 
-                    // Fit after this node
+        // Fit after this node
-                    if (
+        if (
-                        nodeAfter &&
+          nodeAfter
-                        position.y > parentChild.getPosition().y &&
+                        && position.y > parentChild.getPosition().y
-                        position.y < nodeAfter.getPosition().y
+                        && position.y < nodeAfter.getPosition().y
-                    ) {
+        ) {
-                        if (
+          if (
-                            nodeAfter.getId() == node.getId() ||
+            nodeAfter.getId() == node.getId()
-                            parentChild.getId() == node.getId()
+                            || parentChild.getId() == node.getId()
-                        ) {
+          ) {
-                            return [node.getOrder(), node.getPosition()];
+            return [node.getOrder(), node.getPosition()];
-                        } else {
+          }
-                            var order =
+          var order = position.y > node.getPosition().y
-                                position.y > node.getPosition().y
+            ? nodeAfter.getOrder() - 1
-                                    ? nodeAfter.getOrder() - 1
+            : parentChild.getOrder() + 1;
-                                    : parentChild.getOrder() + 1;
+          var position = {
-                            var position = {
+            x: parentChild.getPosition().x,
-                                x: parentChild.getPosition().x,
+            y:
-                                y:
+                                    parentChild.getPosition().y
-                                    parentChild.getPosition().y +
+                                    + (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2,
-                                    (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2,
+          };
-                            };
+          return [order, position];
-                            return [order, position];
+        }
-                        }
+      }
-                    }
-                }
-            }
 
-            // Position wasn't below any node, so it must be fitted above the first
+      // Position wasn't below any node, so it must be fitted above the first
-            var first = parentChildren[0];
+      const first = parentChildren[0];
-            var position = {
+      var position = {
-                x: first.getPosition().x,
+        x: first.getPosition().x,
-                y:
+        y:
-                    first.getPosition().y -
+                    first.getPosition().y
-                    first.getSize().height -
+                    - first.getSize().height
-                    SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
+                    - SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
-            };
+      };
-            return [0, position];
+      return [0, position];
-        },
+    },
 
-        /**
+    /**
          * @param treeSet
          * @param parent
          * @param child
          * @param order
          * @throws will throw an error if the order is not strictly continuous
          */
-        insert: function (treeSet, parent, child, order) {
+    insert(treeSet, parent, child, order) {
-            var children = this._getSortedChildren(treeSet, parent);
+      const children = this._getSortedChildren(treeSet, parent);
-            $assert(
+      $assert(
-                order <= children.length,
+        order <= children.length,
-                'Order must be continues and can not have holes. Order:' + order
+        `Order must be continues and can not have holes. Order:${order}`,
-            );
+      );
 
-            // Shift all the elements in one .
+      // Shift all the elements in one .
-            for (var i = order; i < children.length; i++) {
+      for (let i = order; i < children.length; i++) {
-                var node = children[i];
+        const node = children[i];
-                node.setOrder(i + 1);
+        node.setOrder(i + 1);
-            }
+      }
-            child.setOrder(order);
+      child.setOrder(order);
-        },
+    },
 
-        /**
+    /**
          * @param treeSet
          * @param node
-         * @throws will throw an error if the node is in the wrong position*/
+         * @throws will throw an error if the node is in the wrong position */
-        detach: function (treeSet, node) {
+    detach(treeSet, node) {
-            var parent = treeSet.getParent(node);
+      const parent = treeSet.getParent(node);
-            var children = this._getSortedChildren(treeSet, parent);
+      const children = this._getSortedChildren(treeSet, parent);
-            var order = node.getOrder();
+      const order = node.getOrder();
-            $assert(children[order] === node, 'Node seems not to be in the right position');
+      $assert(children[order] === node, 'Node seems not to be in the right position');
 
-            // Shift all the nodes ...
+      // Shift all the nodes ...
-            for (var i = node.getOrder() + 1; i < children.length; i++) {
+      for (let i = node.getOrder() + 1; i < children.length; i++) {
-                var child = children[i];
+        const child = children[i];
-                child.setOrder(child.getOrder() - 1);
+        child.setOrder(child.getOrder() - 1);
-            }
+      }
-            node.setOrder(0);
+      node.setOrder(0);
-        },
+    },
 
-        /**
+    /**
          * @param treeSet
          * @param node
          * @throws will throw an error if treeSet is null or undefined
@@ -230,100 +224,99 @@ const SymmetricSorter = new Class(
          * value, is null or undefined
          * @return offsets
          */
-        computeOffsets: function (treeSet, node) {
+    computeOffsets(treeSet, node) {
-            $assert(treeSet, 'treeSet can no be null.');
+      $assert(treeSet, 'treeSet can no be null.');
-            $assert(node, 'node can no be null.');
+      $assert(node, 'node can no be null.');
 
-            var children = this._getSortedChildren(treeSet, node);
+      const children = this._getSortedChildren(treeSet, node);
 
-            // Compute heights ...
+      // Compute heights ...
-            var heights = children
+      const heights = children
-                .map(function (child) {
+        .map(function (child) {
-                    return {
+          return {
-                        id: child.getId(),
+            id: child.getId(),
-                        order: child.getOrder(),
+            order: child.getOrder(),
-                        position: child.getPosition(),
+            position: child.getPosition(),
-                        width: child.getSize().width,
+            width: child.getSize().width,
-                        height: this._computeChildrenHeight(treeSet, child),
+            height: this._computeChildrenHeight(treeSet, child),
-                    };
+          };
-                }, this)
+        }, this)
-                .reverse();
+        .reverse();
 
-            // Compute the center of the branch ...
+      // Compute the center of the branch ...
-            var totalHeight = 0;
+      let totalHeight = 0;
-            _.each(heights, function (elem) {
+      _.each(heights, (elem) => {
-                totalHeight += elem.height;
+        totalHeight += elem.height;
-            });
+      });
-            var ysum = totalHeight / 2;
+      let ysum = totalHeight / 2;
 
-            // Calculate the offsets ...
+      // Calculate the offsets ...
-            var result = {};
+      const result = {};
-            for (var i = 0; i < heights.length; i++) {
+      for (let i = 0; i < heights.length; i++) {
-                ysum = ysum - heights[i].height;
+        ysum -= heights[i].height;
-                var childNode = treeSet.find(heights[i].id);
+        const childNode = treeSet.find(heights[i].id);
-                var direction = this.getChildDirection(treeSet, childNode);
+        const direction = this.getChildDirection(treeSet, childNode);
 
-                var yOffset = ysum + heights[i].height / 2;
+        const yOffset = ysum + heights[i].height / 2;
-                var xOffset =
+        const xOffset = direction
-                    direction *
+                    * (heights[i].width / 2
-                    (heights[i].width / 2 +
+                        + node.getSize().width / 2
-                        node.getSize().width / 2 +
+                        + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
-                        SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
 
-                $assert(!isNaN(xOffset), 'xOffset can not be null');
+        $assert(!isNaN(xOffset), 'xOffset can not be null');
-                $assert(!isNaN(yOffset), 'yOffset can not be null');
+        $assert(!isNaN(yOffset), 'yOffset can not be null');
 
-                result[heights[i].id] = { x: xOffset, y: yOffset };
+        result[heights[i].id] = { x: xOffset, y: yOffset };
-            }
+      }
-            return result;
+      return result;
-        },
+    },
 
-        /**
+    /**
          * @param treeSet
          * @param node
          * @throws will throw an error if order elements are missing
          */
-        verify: function (treeSet, node) {
+    verify(treeSet, node) {
-            // Check that all is consistent ...
+      // Check that all is consistent ...
-            var children = this._getSortedChildren(treeSet, node);
+      const children = this._getSortedChildren(treeSet, node);
 
-            for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
-                $assert(children[i].getOrder() == i, 'missing order elements');
+        $assert(children[i].getOrder() == i, 'missing order elements');
-            }
+      }
-        },
+    },
 
-        /**
+    /**
          * @param treeSet
          * @param child
-         * @return direction of the given child from its parent or from the root node, if isolated*/
+         * @return direction of the given child from its parent or from the root node, if isolated */
-        getChildDirection: function (treeSet, child) {
+    getChildDirection(treeSet, child) {
-            $assert(treeSet, 'treeSet can no be null.');
+      $assert(treeSet, 'treeSet can no be null.');
-            $assert(treeSet.getParent(child), 'This should not happen');
+      $assert(treeSet.getParent(child), 'This should not happen');
 
-            var result;
+      let result;
-            var rootNode = treeSet.getRootNode(child);
+      const rootNode = treeSet.getRootNode(child);
-            if (treeSet.getParent(child) == rootNode) {
+      if (treeSet.getParent(child) == rootNode) {
-                // This is the case of a isolated child ... In this case, the directions is based on the root.
+        // This is the case of a isolated child ... In this case, the directions is based on the root.
-                result = Math.sign(rootNode.getPosition().x);
+        result = Math.sign(rootNode.getPosition().x);
-            } else {
+      } else {
-                // if this is not the case, honor the direction of the parent ...
+        // if this is not the case, honor the direction of the parent ...
-                var parent = treeSet.getParent(child);
+        const parent = treeSet.getParent(child);
-                var grandParent = treeSet.getParent(parent);
+        const grandParent = treeSet.getParent(parent);
-                var sorter = grandParent.getSorter();
+        const sorter = grandParent.getSorter();
-                result = sorter.getChildDirection(treeSet, parent);
+        result = sorter.getChildDirection(treeSet, parent);
-            }
+      }
-            return result;
+      return result;
-        },
+    },
 
-        /** @return {String} the print name of this class */
+    /** @return {String} the print name of this class */
-        toString: function () {
+    toString() {
-            return 'Symmetric Sorter';
+      return 'Symmetric Sorter';
-        },
+    },
 
-        _getVerticalPadding: function () {
+    _getVerticalPadding() {
-            return SymmetricSorter.INTERNODE_VERTICAL_PADDING;
+      return SymmetricSorter.INTERNODE_VERTICAL_PADDING;
-        },
+    },
-    }
+  },
 );
 
 /**

packages/mindplot/lib/components/layout/index.js

@@ -12,16 +12,16 @@ const rootedTreeSet = require('./RootedTreeSet').default;
 const symmetricSorter = require('./SymmetricSorter').default;
 
 export const Layout = {
-    AbstractBasicSorter: abstractBasicSorter,
+  AbstractBasicSorter: abstractBasicSorter,
-    BalancedSorter: balancedSorter,
+  BalancedSorter: balancedSorter,
-    ChangeEvent: changeEvent,
+  ChangeEvent: changeEvent,
-    ChildrenSorterStrategy: childrenSorterStrategy,
+  ChildrenSorterStrategy: childrenSorterStrategy,
-    EventBus: eventBus,
+  EventBus: eventBus,
-    EventBusDispatcher: eventBusDispatcher,
+  EventBusDispatcher: eventBusDispatcher,
-    GridSorter: gridSorter,
+  GridSorter: gridSorter,
-    LayoutManager: layoutManager,
+  LayoutManager: layoutManager,
-    Node: node,
+  Node: node,
-    OriginalLayout: originalLayout,
+  OriginalLayout: originalLayout,
-    RootedTreeSet: rootedTreeSet,
+  RootedTreeSet: rootedTreeSet,
-    SymmetricSorter: symmetricSorter,
+  SymmetricSorter: symmetricSorter,
 };

packages/mindplot/lib/components/libraries/bootstrap/BootstrapDialog.Request.js

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

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

@@ -1,115 +1,115 @@
 const Options = require('../../Options').default;
 
 const BootstrapDialog = new Class({
-    Implements: Options,
+  Implements: Options,
 
-    options: {
+  options: {
-        cancelButton: false,
+    cancelButton: false,
-        closeButton: false,
+    closeButton: false,
-        acceptButton: true,
+    acceptButton: true,
-        removeButton:false,
+    removeButton: false,
-        errorMessage: false,
+    errorMessage: false,
-        onEventData:{}
+    onEventData: {},
-    },
+  },
 
-    initialize: function (title, options) {
+  initialize(title, options) {
-        this.setOptions(options);
+    this.setOptions(options);
-        this.options.onEventData.dialog = this;
+    this.options.onEventData.dialog = this;
-        this._native = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>');
+    this._native = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>');
-        var content = $('<div class="modal-content"></div>');
+    const content = $('<div class="modal-content"></div>');
-        var header = this._buildHeader(title);
+    const header = this._buildHeader(title);
-        if (header) {
+    if (header) {
-            content.append(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();
     }
+    const body = $('<div class="modal-body"></div>');
+    if (this.options.errorMessage) {
+      const error = $('<div class="alert alert-danger"></div>');
+      error.hide();
+      body.append(error);
+    }
+    content.append(body);
+    const 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() {
+    let 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(title) {
+    let 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(event) {
+    throw 'Unsupported operation';
+  },
+
+  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/lib/components/libraries/hotkeys/jquery.hotkeys.js

@@ -15,96 +15,158 @@
  * Might be useful, when you want to pass some other data to your handler
  */
 
-(function(jQuery){
+(function (jQuery) {
-	
+  jQuery.hotkeys = {
-	jQuery.hotkeys = {
+    version: '0.8',
-		version: "0.8",
 
-		specialKeys: {
+    specialKeys: {
-			8: "backspace", 9: "tab", 10: "return", 13: "enter", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
+      8: 'backspace',
-			20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
+      9: 'tab',
-			37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del", 
+      10: 'return',
-			96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
+      13: 'enter',
-			104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/", 
+      16: 'shift',
-			112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8", 
+      17: 'ctrl',
-			120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/",
+      18: 'alt',
-			220: "\\", 222: "'", 224: "meta"
+      19: 'pause',
-		},
+      20: 'capslock',
-	
+      27: 'esc',
-		shiftNums: {
+      32: 'space',
-			"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&", 
+      33: 'pageup',
-			"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<", 
+      34: 'pagedown',
-			".": ">",  "/": "?",  "\\": "|"
+      35: 'end',
-		}
+      36: 'home',
-	};
+      37: 'left',
+      38: 'up',
+      39: 'right',
+      40: 'down',
+      45: 'insert',
+      46: 'del',
+      96: '0',
+      97: '1',
+      98: '2',
+      99: '3',
+      100: '4',
+      101: '5',
+      102: '6',
+      103: '7',
+      104: '8',
+      105: '9',
+      106: '*',
+      107: '+',
+      109: '-',
+      110: '.',
+      111: '/',
+      112: 'f1',
+      113: 'f2',
+      114: 'f3',
+      115: 'f4',
+      116: 'f5',
+      117: 'f6',
+      118: 'f7',
+      119: 'f8',
+      120: 'f9',
+      121: 'f10',
+      122: 'f11',
+      123: 'f12',
+      144: 'numlock',
+      145: 'scroll',
+      186: ';',
+      191: '/',
+      220: '\\',
+      222: "'",
+      224: 'meta',
+    },
 
-	function keyHandler( handleObj ) {
+    shiftNums: {
-		if ( typeof handleObj.data === "string" ) {
+      '`': '~',
-			handleObj.data = { keys: handleObj.data };
+      1: '!',
-		}
+      2: '@',
+      3: '#',
+      4: '$',
+      5: '%',
+      6: '^',
+      7: '&',
+      8: '*',
+      9: '(',
+      0: ')',
+      '-': '_',
+      '=': '+',
+      ';': ': ',
+      "'": '"',
+      ',': '<',
+      '.': '>',
+      '/': '?',
+      '\\': '|',
+    },
+  };
 
-		// Only care when a possible input has been specified
+  function keyHandler(handleObj) {
-		if ( !handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string" ) {
+    if (typeof handleObj.data === 'string') {
-			return;
+      handleObj.data = { keys: handleObj.data };
-		}
+    }
 
-		var origHandler = handleObj.handler,
+    // Only care when a possible input has been specified
-			keys = handleObj.data.keys.toLowerCase().split(" "),
+    if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== 'string') {
-			textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color", "tel"];
+      return;
-	
+    }
-		handleObj.handler = function( event ) {
-			// Don't fire in text-accepting inputs that we didn't directly bind to
-			if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
-				jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) {
-				return;
-			}
 
-			var special = jQuery.hotkeys.specialKeys[ event.keyCode ],
+    const origHandler = handleObj.handler;
-				character = String.fromCharCode( event.which ).toLowerCase(),
+    const keys = handleObj.data.keys.toLowerCase().split(' ');
-				modif = "", possible = {};
+    const textAcceptingInputTypes = ['text', 'password', 'number', 'email', 'url', 'range', 'date', 'month', 'week', 'time', 'datetime', 'datetime-local', 'search', 'color', 'tel'];
 
-			// check combinations (alt|ctrl|shift+anything)
+    handleObj.handler = function (event) {
-			if ( event.altKey && special !== "alt" ) {
+      // Don't fire in text-accepting inputs that we didn't directly bind to
-				modif += "alt+";
+      if (this !== event.target && (/textarea|select/i.test(event.target.nodeName)
-			}
+				|| jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1)) {
+        return;
+      }
 
-			if ( event.ctrlKey && special !== "ctrl" ) {
+      const special = jQuery.hotkeys.specialKeys[event.keyCode];
-				modif += "ctrl+";
+      const character = String.fromCharCode(event.which).toLowerCase();
-			}
+      let modif = ''; const
-			
+        possible = {};
-			// TODO: Need to make sure this works consistently across platforms
-			if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
-				modif += "meta+";
-			}
 
-			if ( event.shiftKey && special !== "shift" ) {
+      // check combinations (alt|ctrl|shift+anything)
-				modif += "shift+";
+      if (event.altKey && special !== 'alt') {
-			}
+        modif += 'alt+';
+      }
 
-			if ( special ) {
+      if (event.ctrlKey && special !== 'ctrl') {
-				possible[ modif + special ] = true;
+        modif += 'ctrl+';
-			}
+      }
 
-			if ( character ) {
+      // TODO: Need to make sure this works consistently across platforms
-				possible[ modif + character ] = true;
+      if (event.metaKey && !event.ctrlKey && special !== 'meta') {
-				possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;
+        modif += 'meta+';
+      }
 
-				// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
+      if (event.shiftKey && special !== 'shift') {
-				if ( modif === "shift+" ) {
+        modif += 'shift+';
-					possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
+      }
-				}
-			}
 
-			for ( var i = 0, l = keys.length; i < l; i++ ) {
+      if (special) {
-				if ( possible[ keys[i] ] ) {
+        possible[modif + special] = true;
-					return origHandler.apply( this, arguments );
+      }
-				}
-			}
-		};
-	}
 
-	jQuery.each([ "keydown", "keyup", "keypress" ], function() {
+      if (character) {
-		jQuery.event.special[ this ] = { add: keyHandler };
+        possible[modif + character] = true;
-	});
+        possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
 
-})( this.jQuery );
+        // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
+        if (modif === 'shift+') {
+          possible[jQuery.hotkeys.shiftNums[character]] = true;
+        }
+      }
+
+      for (let i = 0, l = keys.length; i < l; i++) {
+        if (possible[keys[i]]) {
+          return origHandler.apply(this, arguments);
+        }
+      }
+    };
+  }
+
+  jQuery.each(['keydown', 'keyup', 'keypress'], function () {
+    jQuery.event.special[this] = { add: keyHandler };
+  });
+}(this.jQuery));

packages/mindplot/lib/components/libraries/jquery/jquery.mousewheel.min.js

@@ -5,4 +5,8 @@
  *
  * Requires: jQuery 1.2.2+
  */
-!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.11",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b)["offsetParent"in a.fn?"offsetParent":"parent"]();return c.length||(c=a("body")),parseInt(c.css("fontSize"),10)},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
+!(function (a) { typeof define === 'function' && define.amd ? define(['jquery'], a) : typeof exports === 'object' ? module.exports = a : a(jQuery); }((a) => {
+  function b(b) { const g = b || window.event; const h = i.call(arguments, 1); let j = 0; let l = 0; let m = 0; let n = 0; let o = 0; let p = 0; if (b = a.event.fix(g), b.type = 'mousewheel', 'detail' in g && (m = -1 * g.detail), 'wheelDelta' in g && (m = g.wheelDelta), 'wheelDeltaY' in g && (m = g.wheelDeltaY), 'wheelDeltaX' in g && (l = -1 * g.wheelDeltaX), 'axis' in g && g.axis === g.HORIZONTAL_AXIS && (l = -1 * m, m = 0), j = m === 0 ? l : m, 'deltaY' in g && (m = -1 * g.deltaY, j = m), 'deltaX' in g && (l = g.deltaX, m === 0 && (j = -1 * l)), m !== 0 || l !== 0) { if (g.deltaMode === 1) { const q = a.data(this, 'mousewheel-line-height'); j *= q, m *= q, l *= q; } else if (g.deltaMode === 2) { const r = a.data(this, 'mousewheel-page-height'); j *= r, m *= r, l *= r; } if (n = Math.max(Math.abs(m), Math.abs(l)), (!f || f > n) && (f = n, d(g, n) && (f /= 40)), d(g, n) && (j /= 40, l /= 40, m /= 40), j = Math[j >= 1 ? 'floor' : 'ceil'](j / f), l = Math[l >= 1 ? 'floor' : 'ceil'](l / f), m = Math[m >= 1 ? 'floor' : 'ceil'](m / f), k.settings.normalizeOffset && this.getBoundingClientRect) { const s = this.getBoundingClientRect(); o = b.clientX - s.left, p = b.clientY - s.top; } return b.deltaX = l, b.deltaY = m, b.deltaFactor = f, b.offsetX = o, b.offsetY = p, b.deltaMode = 0, h.unshift(b, j, l, m), e && clearTimeout(e), e = setTimeout(c, 200), (a.event.dispatch || a.event.handle).apply(this, h); } } function c() { f = null; } function d(a, b) { return k.settings.adjustOldDeltas && a.type === 'mousewheel' && b % 120 === 0; } let e; let f; const g = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll']; const h = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll']; var i = Array.prototype.slice; if (a.event.fixHooks) for (let j = g.length; j;)a.event.fixHooks[g[--j]] = a.event.mouseHooks; var k = a.event.special.mousewheel = {
+    version: '3.1.11', setup() { if (this.addEventListener) for (let c = h.length; c;) this.addEventListener(h[--c], b, !1); else this.onmousewheel = b; a.data(this, 'mousewheel-line-height', k.getLineHeight(this)), a.data(this, 'mousewheel-page-height', k.getPageHeight(this)); }, teardown() { if (this.removeEventListener) for (let c = h.length; c;) this.removeEventListener(h[--c], b, !1); else this.onmousewheel = null; a.removeData(this, 'mousewheel-line-height'), a.removeData(this, 'mousewheel-page-height'); }, getLineHeight(b) { let c = a(b)['offsetParent' in a.fn ? 'offsetParent' : 'parent'](); return c.length || (c = a('body')), parseInt(c.css('fontSize'), 10); }, getPageHeight(b) { return a(b).height(); }, settings: { adjustOldDeltas: !0, normalizeOffset: !0 },
+  }; a.fn.extend({ mousewheel(a) { return a ? this.bind('mousewheel', a) : this.trigger('mousewheel'); }, unmousewheel(a) { return this.unbind('mousewheel', a); } });
+}));

packages/mindplot/lib/components/libraries/mootools/mootools-core-1.4.5.js

@@ -16,61 +16,256 @@
  ...
  */
 
-(function(){this.MooTools={version:"1.4.5",build:"ab8ea8824dc3b24b6666867a2c4ed58ebb762cf0"};var o=this.typeOf=function(i){if(i==null){return"null";}if(i.$family!=null){return i.$family();
+(function () {
-}if(i.nodeName){if(i.nodeType==1){return"element";}if(i.nodeType==3){return(/\S/).test(i.nodeValue)?"textnode":"whitespace";}}else{if(typeof i.length=="number"){if(i.callee){return"arguments";
+  this.MooTools = { version: '1.4.5', build: 'ab8ea8824dc3b24b6666867a2c4ed58ebb762cf0' }; const o = this.typeOf = function (i) {
-}if("item" in i){return"collection";}}}return typeof i;};var j=this.instanceOf=function(t,i){if(t==null){return false;}var s=t.$constructor||t.constructor;
+    if (i == null) { return 'null'; } if (i.$family != null) {
-    while(s){if(s===i){return true;}s=s.parent;}if(!t.hasOwnProperty){return false;}return t instanceof i;};var f=this.Function;var p=true;for(var k in {toString:1}){p=null;
+      return i.$family();
-}if(p){p=["hasOwnProperty","valueOf","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","constructor"];}f.prototype.overloadSetter=function(s){var i=this;
+    } if (i.nodeName) { if (i.nodeType == 1) { return 'element'; } if (i.nodeType == 3) { return (/\S/).test(i.nodeValue) ? 'textnode' : 'whitespace'; } } else if (typeof i.length === 'number') {
-    return function(u,t){if(u==null){return this;}if(s||typeof u!="string"){for(var v in u){i.call(this,v,u[v]);}if(p){for(var w=p.length;w--;){v=p[w];if(u.hasOwnProperty(v)){i.call(this,v,u[v]);
+      if (i.callee) {
-    }}}}else{i.call(this,u,t);}return this;};};f.prototype.overloadGetter=function(s){var i=this;return function(u){var v,t;if(typeof u!="string"){v=u;}else{if(arguments.length>1){v=arguments;
+        return 'arguments';
-}else{if(s){v=[u];}}}if(v){t={};for(var w=0;w<v.length;w++){t[v[w]]=i.call(this,v[w]);}}else{t=i.call(this,u);}return t;};};f.prototype.extend=function(i,s){this[i]=s;
+      } if ('item' in i) { return 'collection'; }
-}.overloadSetter();f.prototype.implement=function(i,s){this.prototype[i]=s;}.overloadSetter();var n=Array.prototype.slice;f.from=function(i){return(o(i)=="function")?i:function(){return i;
+    } return typeof i;
-};};Array.from=function(i){if(i==null){return[];}return(a.isEnumerable(i)&&typeof i!="string")?(o(i)=="array")?i:n.call(i):[i];};Number.from=function(s){var i=parseFloat(s);
+  }; const j = this.instanceOf = function (t, i) {
-    return isFinite(i)?i:null;};String.from=function(i){return i+"";};f.implement({hide:function(){this.$hidden=true;return this;},protect:function(){this.$protected=true;
+    if (t == null) { return false; } let s = t.$constructor || t.constructor;
-    return this;}});var a=this.Type=function(u,t){if(u){var s=u.toLowerCase();var i=function(v){return(o(v)==s);};a["is"+u]=i;if(t!=null){t.prototype.$family=(function(){return s;
+    while (s) { if (s === i) { return true; }s = s.parent; } if (!t.hasOwnProperty) { return false; } return t instanceof i;
-}).hide();}}if(t==null){return null;}t.extend(this);t.$constructor=a;t.prototype.$constructor=t;return t;};var e=Object.prototype.toString;a.isEnumerable=function(i){return(i!=null&&typeof i.length=="number"&&e.call(i)!="[object Function]");
+  }; const f = this.Function; let p = true; for (const k in { toString: 1 }) {
-};var q={};var r=function(i){var s=o(i.prototype);return q[s]||(q[s]=[]);};var b=function(t,x){if(x&&x.$hidden){return;}var s=r(this);for(var u=0;u<s.length;
+    p = null;
-                                                                                                                                          u++){var w=s[u];if(o(w)=="type"){b.call(w,t,x);}else{w.call(this,t,x);}}var v=this.prototype[t];if(v==null||!v.$protected){this.prototype[t]=x;}if(this[t]==null&&o(x)=="function"){m.call(this,t,function(i){return x.apply(i,n.call(arguments,1));
+  } if (p) { p = ['hasOwnProperty', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable', 'toLocaleString', 'toString', 'constructor']; }f.prototype.overloadSetter = function (s) {
-});}};var m=function(i,t){if(t&&t.$hidden){return;}var s=this[i];if(s==null||!s.$protected){this[i]=t;}};a.implement({implement:b.overloadSetter(),extend:m.overloadSetter(),alias:function(i,s){b.call(this,i,this.prototype[s]);
+    const i = this;
-}.overloadSetter(),mirror:function(i){r(this).push(i);return this;}});new a("Type",a);var d=function(s,x,v){var u=(x!=Object),B=x.prototype;if(u){x=new a(s,x);
+    return function (u, t) {
-}for(var y=0,w=v.length;y<w;y++){var C=v[y],A=x[C],z=B[C];if(A){A.protect();}if(u&&z){x.implement(C,z.protect());}}if(u){var t=B.propertyIsEnumerable(v[0]);
+      if (u == null) { return this; } if (s || typeof u !== 'string') {
-    x.forEachMethod=function(G){if(!t){for(var F=0,D=v.length;F<D;F++){G.call(B,B[v[F]],v[F]);}}for(var E in B){G.call(B,B[E],E);}};}return d;};d("String",String,["charAt","charCodeAt","concat","indexOf","lastIndexOf","match","quote","replace","search","slice","split","substr","substring","trim","toLowerCase","toUpperCase"])("Array",Array,["pop","push","reverse","shift","sort","splice","unshift","concat","join","slice","indexOf","lastIndexOf","filter","forEach","every","map","some","reduce","reduceRight"])("Number",Number,["toExponential","toFixed","toLocaleString","toPrecision"])("Function",f,["apply","call","bind"])("RegExp",RegExp,["exec","test"])("Object",Object,["create","defineProperty","defineProperties","keys","getPrototypeOf","getOwnPropertyDescriptor","getOwnPropertyNames","preventExtensions","isExtensible","seal","isSealed","freeze","isFrozen"])("Date",Date,["now"]);
+        for (var v in u) { i.call(this, v, u[v]); } if (p) {
-    Object.extend=m.overloadSetter();Date.extend("now",function(){return +(new Date);});new a("Boolean",Boolean);Number.prototype.$family=function(){return isFinite(this)?"number":"null";
+          for (let w = p.length; w--;) {
-    }.hide();Number.extend("random",function(s,i){return Math.floor(Math.random()*(i-s+1)+s);});var g=Object.prototype.hasOwnProperty;Object.extend("forEach",function(i,t,u){for(var s in i){if(g.call(i,s)){t.call(u,i[s],s,i);
+            v = p[w]; if (u.hasOwnProperty(v)) {
-    }}});Object.each=Object.forEach;Array.implement({forEach:function(u,v){for(var t=0,s=this.length;t<s;t++){if(t in this){u.call(v,this[t],t,this);}}},each:function(i,s){Array.forEach(this,i,s);
+              i.call(this, v, u[v]);
-        return this;}});var l=function(i){switch(o(i)){case"array":return i.clone();case"object":return Object.clone(i);default:return i;}};Array.implement("clone",function(){var s=this.length,t=new Array(s);
+            }
-        while(s--){t[s]=l(this[s]);}return t;});var h=function(s,i,t){switch(o(t)){case"object":if(o(s[i])=="object"){Object.merge(s[i],t);}else{s[i]=Object.clone(t);
+          }
-    }break;case"array":s[i]=t.clone();break;default:s[i]=t;}return s;};Object.extend({merge:function(z,u,t){if(o(u)=="string"){return h(z,u,t);}for(var y=1,s=arguments.length;
+        }
-                                                                                                                                                    y<s;y++){var w=arguments[y];for(var x in w){h(z,x,w[x]);}}return z;},clone:function(i){var t={};for(var s in i){t[s]=l(i[s]);}return t;},append:function(w){for(var v=1,t=arguments.length;
+      } else { i.call(this, u, t); } return this;
-                                                                                                                                                                                                                                                                                                                    v<t;v++){var s=arguments[v]||{};for(var u in s){w[u]=s[u];}}return w;}});["Object","WhiteSpace","TextNode","Collection","Arguments"].each(function(i){new a(i);
+    };
-    });var c=Date.now();String.extend("uniqueID",function(){return(c++).toString(36);});})();Array.implement({every:function(c,d){for(var b=0,a=this.length>>>0;
+  }; f.prototype.overloadGetter = function (s) {
-                                                                                                                                      b<a;b++){if((b in this)&&!c.call(d,this[b],b,this)){return false;}}return true;},filter:function(d,f){var c=[];for(var e,b=0,a=this.length>>>0;b<a;b++){if(b in this){e=this[b];
+    const i = this; return function (u) {
-    if(d.call(f,e,b,this)){c.push(e);}}}return c;},indexOf:function(c,d){var b=this.length>>>0;for(var a=(d<0)?Math.max(0,b+d):d||0;a<b;a++){if(this[a]===c){return a;
+      let v; let t; if (typeof u !== 'string') { v = u; } else if (arguments.length > 1) {
-}}return -1;},map:function(c,e){var d=this.length>>>0,b=Array(d);for(var a=0;a<d;a++){if(a in this){b[a]=c.call(e,this[a],a,this);}}return b;},some:function(c,d){for(var b=0,a=this.length>>>0;
+        v = arguments;
-                                                                                                                                                                      b<a;b++){if((b in this)&&c.call(d,this[b],b,this)){return true;}}return false;},clean:function(){return this.filter(function(a){return a!=null;});},invoke:function(a){var b=Array.slice(arguments,1);
+      } else if (s) { v = [u]; } if (v) { t = {}; for (let w = 0; w < v.length; w++) { t[v[w]] = i.call(this, v[w]); } } else { t = i.call(this, u); } return t;
-    return this.map(function(c){return c[a].apply(c,b);});},associate:function(c){var d={},b=Math.min(this.length,c.length);for(var a=0;a<b;a++){d[c[a]]=this[a];
+    };
-}return d;},link:function(c){var a={};for(var e=0,b=this.length;e<b;e++){for(var d in c){if(c[d](this[e])){a[d]=this[e];delete c[d];break;}}}return a;},contains:function(a,b){return this.indexOf(a,b)!=-1;
+  }; f.prototype.extend = function (i, s) {
-},append:function(a){this.push.apply(this,a);return this;},getLast:function(){return(this.length)?this[this.length-1]:null;},getRandom:function(){return(this.length)?this[Number.random(0,this.length-1)]:null;
+    this[i] = s;
-},include:function(a){if(!this.contains(a)){this.push(a);}return this;},combine:function(c){for(var b=0,a=c.length;b<a;b++){this.include(c[b]);}return this;
+  }.overloadSetter(); f.prototype.implement = function (i, s) { this.prototype[i] = s; }.overloadSetter(); const n = Array.prototype.slice; f.from = function (i) {
-},erase:function(b){for(var a=this.length;a--;){if(this[a]===b){this.splice(a,1);}}return this;},empty:function(){this.length=0;return this;},flatten:function(){var d=[];
+    return (o(i) == 'function') ? i : function () {
-    for(var b=0,a=this.length;b<a;b++){var c=typeOf(this[b]);if(c=="null"){continue;}d=d.concat((c=="array"||c=="collection"||c=="arguments"||instanceOf(this[b],Array))?Array.flatten(this[b]):this[b]);
+      return i;
-    }return d;},pick:function(){for(var b=0,a=this.length;b<a;b++){if(this[b]!=null){return this[b];}}return null;},rgbToHex:function(d){if(this.length<3){return null;}if(this.length==4&&this[3]==0&&!d){return"transparent";
+    };
-}var b=[];for(var a=0;a<3;a++){var c=(this[a]-0).toString(16);b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});String.implement({test:function(a,b){return((typeOf(a)=="regexp")?a:new RegExp(""+a,b)).test(this);
+  }; Array.from = function (i) { if (i == null) { return []; } return (a.isEnumerable(i) && typeof i !== 'string') ? (o(i) == 'array') ? i : n.call(i) : [i]; }; Number.from = function (s) {
-},contains:function(a,b){return(b)?(b+this+b).indexOf(b+a+b)>-1:String(this).indexOf(a)>-1;},trim:function(){return String(this).replace(/^\s+|\s+$/g,"");
+    const i = parseFloat(s);
-},clean:function(){return String(this).replace(/\s+/g," ").trim();},camelCase:function(){return String(this).replace(/-\D/g,function(a){return a.charAt(1).toUpperCase();
+    return isFinite(i) ? i : null;
-});},hyphenate:function(){return String(this).replace(/[A-Z]/g,function(a){return("-"+a.charAt(0).toLowerCase());});},capitalize:function(){return String(this).replace(/\b[a-z]/g,function(a){return a.toUpperCase();
+  }; String.from = function (i) { return `${i}`; }; f.implement({
-});},escapeRegExp:function(){return String(this).replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1");},rgbToHex:function(b){var a=String(this).match(/\d{1,3}/g);
+    hide() { this.$hidden = true; return this; },
-    return(a)?a.rgbToHex(b):null;},substitute:function(a,b){return String(this).replace(b||(/\\?\{([^{}]+)\}/g),function(d,c){if(d.charAt(0)=="\\"){return d.slice(1);
+    protect() {
-}return(a[c]!=null)?a[c]:"";});}});
+      this.$protected = true;
-Function.implement({bind:function(e){var a=this,b=arguments.length>1?Array.slice(arguments,1):null,d=function(){};var c=function(){var g=e,h=arguments.length;if(this instanceof c){d.prototype=a.prototype;g=new d;}var f=(!b&&!h)?a.call(g):a.apply(g,b&&h?b.concat(Array.slice(arguments)):b||arguments);return g==e?f:g;};return c;},pass:function(b,c){var a=this;if(b!=null){b=Array.from(b);}return function(){return a.apply(c,b||arguments);};},delay:function(b,c,a){return setTimeout(this.pass((a==null?[]:a),c),b);},});
+      return this;
-Number.alias("each","times");(function(b){var a={};b.each(function(c){if(!Number[c]){a[c]=function(){return Math[c].apply(null,[this].concat(Array.from(arguments)));
+    },
-};}});Number.implement(a);})(["abs","acos","asin","atan","atan2","ceil","cos","exp","floor","log","max","min","pow","sin","sqrt","tan"]);(function(){var a=this.Class=new Type("Class",function(h){if(instanceOf(h,Function)){h={initialize:h};
+  }); var a = this.Type = function (u, t) {
-}var g=function(){e(this);if(g.$prototyping){return this;}this.$caller=null;var i=(this.initialize)?this.initialize.apply(this,arguments):this;this.$caller=this.caller=null;
+    if (u) {
-    return i;}.extend(this).implement(h);g.$constructor=a;g.prototype.$constructor=g;g.prototype.parent=c;return g;});var c=function(){if(!this.$caller){throw new Error('The method "parent" cannot be called.');
+      const s = u.toLowerCase(); const i = function (v) { return (o(v) == s); }; a[`is${u}`] = i; if (t != null) {
-}var g=this.$caller.$name,h=this.$caller.$owner.parent,i=(h)?h.prototype[g]:null;if(!i){throw new Error('The method "'+g+'" has no parent.');}return i.apply(this,arguments);
+        t.prototype.$family = (function () {
-};var e=function(g){for(var h in g){var j=g[h];switch(typeOf(j)){case"object":var i=function(){};i.prototype=j;g[h]=e(new i);break;case"array":g[h]=j.clone();
+          return s;
-    break;}}return g;};var b=function(g,h,j){if(j.$origin){j=j.$origin;}var i=function(){if(j.$protected&&this.$caller==null){throw new Error('The method "'+h+'" cannot be called.');
+        }).hide();
-}var l=this.caller,m=this.$caller;this.caller=m;this.$caller=i;var k=j.apply(this,arguments);this.$caller=m;this.caller=l;return k;}.extend({$owner:g,$origin:j,$name:h});
+      }
-    return i;};var f=function(h,i,g){if(a.Mutators.hasOwnProperty(h)){i=a.Mutators[h].call(this,i);if(i==null){return this;}}if(typeOf(i)=="function"){if(i.$hidden){return this;
+    } if (t == null) { return null; }t.extend(this); t.$constructor = a; t.prototype.$constructor = t; return t;
-}this.prototype[h]=(g)?i:b(this,h,i);}else{Object.merge(this.prototype,h,i);}return this;};var d=function(g){g.$prototyping=true;var h=new g;delete g.$prototyping;
+  }; const e = Object.prototype.toString; a.isEnumerable = function (i) {
-    return h;};a.implement("implement",f.overloadSetter());a.Mutators={Extends:function(g){this.parent=g;this.prototype=d(g);},Implements:function(g){Array.from(g).each(function(j){var h=new j;for(var i in h){f.call(this,i,h[i],true);}},this);}};})();
+    return (i != null && typeof i.length === 'number' && e.call(i) != '[object Function]');
+  }; const q = {}; const r = function (i) { const s = o(i.prototype); return q[s] || (q[s] = []); }; var b = function (t, x) {
+    if (x && x.$hidden) { return; } const s = r(this); for (let u = 0; u < s.length;
+      u++) { const w = s[u]; if (o(w) == 'type') { b.call(w, t, x); } else { w.call(this, t, x); } } const v = this.prototype[t]; if (v == null || !v.$protected) { this.prototype[t] = x; } if (this[t] == null && o(x) == 'function') {
+      m.call(this, t, function (i) {
+        return x.apply(i, n.call(arguments, 1));
+      });
+    }
+  }; var m = function (i, t) { if (t && t.$hidden) { return; } const s = this[i]; if (s == null || !s.$protected) { this[i] = t; } }; a.implement({
+    implement: b.overloadSetter(),
+    extend: m.overloadSetter(),
+    alias: function (i, s) {
+      b.call(this, i, this.prototype[s]);
+    }.overloadSetter(),
+    mirror(i) { r(this).push(i); return this; },
+  }); new a('Type', a); var d = function (s, x, v) {
+    const u = (x != Object); const B = x.prototype; if (u) {
+      x = new a(s, x);
+    } for (let y = 0, w = v.length; y < w; y++) { const C = v[y]; const A = x[C]; const z = B[C]; if (A) { A.protect(); } if (u && z) { x.implement(C, z.protect()); } } if (u) {
+      const t = B.propertyIsEnumerable(v[0]);
+      x.forEachMethod = function (G) { if (!t) { for (let F = 0, D = v.length; F < D; F++) { G.call(B, B[v[F]], v[F]); } } for (const E in B) { G.call(B, B[E], E); } };
+    } return d;
+  }; d('String', String, ['charAt', 'charCodeAt', 'concat', 'indexOf', 'lastIndexOf', 'match', 'quote', 'replace', 'search', 'slice', 'split', 'substr', 'substring', 'trim', 'toLowerCase', 'toUpperCase'])('Array', Array, ['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift', 'concat', 'join', 'slice', 'indexOf', 'lastIndexOf', 'filter', 'forEach', 'every', 'map', 'some', 'reduce', 'reduceRight'])('Number', Number, ['toExponential', 'toFixed', 'toLocaleString', 'toPrecision'])('Function', f, ['apply', 'call', 'bind'])('RegExp', RegExp, ['exec', 'test'])('Object', Object, ['create', 'defineProperty', 'defineProperties', 'keys', 'getPrototypeOf', 'getOwnPropertyDescriptor', 'getOwnPropertyNames', 'preventExtensions', 'isExtensible', 'seal', 'isSealed', 'freeze', 'isFrozen'])('Date', Date, ['now']);
+  Object.extend = m.overloadSetter(); Date.extend('now', () => +(new Date())); new a('Boolean', Boolean); Number.prototype.$family = function () {
+    return isFinite(this) ? 'number' : 'null';
+  }.hide(); Number.extend('random', (s, i) => Math.floor(Math.random() * (i - s + 1) + s)); const g = Object.prototype.hasOwnProperty; Object.extend('forEach', (i, t, u) => {
+    for (const s in i) {
+      if (g.call(i, s)) {
+        t.call(u, i[s], s, i);
+      }
+    }
+  }); Object.each = Object.forEach; Array.implement({
+    forEach(u, v) { for (let t = 0, s = this.length; t < s; t++) { if (t in this) { u.call(v, this[t], t, this); } } },
+    each(i, s) {
+      Array.forEach(this, i, s);
+      return this;
+    },
+  }); const l = function (i) { switch (o(i)) { case 'array': return i.clone(); case 'object': return Object.clone(i); default: return i; } }; Array.implement('clone', function () {
+    let s = this.length; const t = new Array(s);
+    while (s--) { t[s] = l(this[s]); } return t;
+  }); const h = function (s, i, t) {
+    switch (o(t)) {
+      case 'object': if (o(s[i]) == 'object') { Object.merge(s[i], t); } else {
+        s[i] = Object.clone(t);
+      } break; case 'array': s[i] = t.clone(); break; default: s[i] = t;
+    } return s;
+  }; Object.extend({
+    merge(z, u, t) {
+      if (o(u) == 'string') { return h(z, u, t); } for (let y = 1, s = arguments.length;
+        y < s; y++) { const w = arguments[y]; for (const x in w) { h(z, x, w[x]); } } return z;
+    },
+    clone(i) { const t = {}; for (const s in i) { t[s] = l(i[s]); } return t; },
+    append(w) {
+      for (let v = 1, t = arguments.length;
+        v < t; v++) { const s = arguments[v] || {}; for (const u in s) { w[u] = s[u]; } } return w;
+    },
+  }); ['Object', 'WhiteSpace', 'TextNode', 'Collection', 'Arguments'].each((i) => {
+    new a(i);
+  }); let c = Date.now(); String.extend('uniqueID', () => (c++).toString(36));
+}()); Array.implement({
+  every(c, d) {
+    for (let b = 0, a = this.length >>> 0;
+      b < a; b++) { if ((b in this) && !c.call(d, this[b], b, this)) { return false; } } return true;
+  },
+  filter(d, f) {
+    const c = []; for (var e, b = 0, a = this.length >>> 0; b < a; b++) {
+      if (b in this) {
+        e = this[b];
+        if (d.call(f, e, b, this)) { c.push(e); }
+      }
+    } return c;
+  },
+  indexOf(c, d) {
+    const b = this.length >>> 0; for (let a = (d < 0) ? Math.max(0, b + d) : d || 0; a < b; a++) {
+      if (this[a] === c) {
+        return a;
+      }
+    } return -1;
+  },
+  map(c, e) { const d = this.length >>> 0; const b = Array(d); for (let a = 0; a < d; a++) { if (a in this) { b[a] = c.call(e, this[a], a, this); } } return b; },
+  some(c, d) {
+    for (let b = 0, a = this.length >>> 0;
+      b < a; b++) { if ((b in this) && c.call(d, this[b], b, this)) { return true; } } return false;
+  },
+  clean() { return this.filter((a) => a != null); },
+  invoke(a) {
+    const b = Array.slice(arguments, 1);
+    return this.map((c) => c[a].apply(c, b));
+  },
+  associate(c) {
+    const d = {}; const b = Math.min(this.length, c.length); for (let a = 0; a < b; a++) {
+      d[c[a]] = this[a];
+    } return d;
+  },
+  link(c) { const a = {}; for (let e = 0, b = this.length; e < b; e++) { for (const d in c) { if (c[d](this[e])) { a[d] = this[e]; delete c[d]; break; } } } return a; },
+  contains(a, b) {
+    return this.indexOf(a, b) != -1;
+  },
+  append(a) { this.push.apply(this, a); return this; },
+  getLast() { return (this.length) ? this[this.length - 1] : null; },
+  getRandom() {
+    return (this.length) ? this[Number.random(0, this.length - 1)] : null;
+  },
+  include(a) { if (!this.contains(a)) { this.push(a); } return this; },
+  combine(c) {
+    for (let b = 0, a = c.length; b < a; b++) { this.include(c[b]); } return this;
+  },
+  erase(b) { for (let a = this.length; a--;) { if (this[a] === b) { this.splice(a, 1); } } return this; },
+  empty() { this.length = 0; return this; },
+  flatten() {
+    let d = [];
+    for (let b = 0, a = this.length; b < a; b++) {
+      const c = typeOf(this[b]); if (c == 'null') { continue; }d = d.concat((c == 'array' || c == 'collection' || c == 'arguments' || instanceOf(this[b], Array)) ? Array.flatten(this[b]) : this[b]);
+    } return d;
+  },
+  pick() { for (let b = 0, a = this.length; b < a; b++) { if (this[b] != null) { return this[b]; } } return null; },
+  rgbToHex(d) {
+    if (this.length < 3) { return null; } if (this.length == 4 && this[3] == 0 && !d) {
+      return 'transparent';
+    } const b = []; for (let a = 0; a < 3; a++) { const c = (this[a] - 0).toString(16); b.push((c.length == 1) ? `0${c}` : c); } return (d) ? b : `#${b.join('')}`;
+  },
+}); String.implement({
+  test(a, b) {
+    return ((typeOf(a) == 'regexp') ? a : new RegExp(`${a}`, b)).test(this);
+  },
+  contains(a, b) { return (b) ? (b + this + b).indexOf(b + a + b) > -1 : String(this).indexOf(a) > -1; },
+  trim() {
+    return String(this).replace(/^\s+|\s+$/g, '');
+  },
+  clean() { return String(this).replace(/\s+/g, ' ').trim(); },
+  camelCase() {
+    return String(this).replace(/-\D/g, (a) => a.charAt(1).toUpperCase());
+  },
+  hyphenate() { return String(this).replace(/[A-Z]/g, (a) => (`-${a.charAt(0).toLowerCase()}`)); },
+  capitalize() {
+    return String(this).replace(/\b[a-z]/g, (a) => a.toUpperCase());
+  },
+  escapeRegExp() { return String(this).replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1'); },
+  rgbToHex(b) {
+    const a = String(this).match(/\d{1,3}/g);
+    return (a) ? a.rgbToHex(b) : null;
+  },
+  substitute(a, b) {
+    return String(this).replace(b || (/\\?\{([^{}]+)\}/g), (d, c) => {
+      if (d.charAt(0) == '\\') {
+        return d.slice(1);
+      } return (a[c] != null) ? a[c] : '';
+    });
+  },
+});
+Function.implement({ bind(e) { const a = this; const b = arguments.length > 1 ? Array.slice(arguments, 1) : null; const d = function () {}; var c = function () { let g = e; const h = arguments.length; if (this instanceof c) { d.prototype = a.prototype; g = new d(); } const f = (!b && !h) ? a.call(g) : a.apply(g, b && h ? b.concat(Array.slice(arguments)) : b || arguments); return g == e ? f : g; }; return c; }, pass(b, c) { const a = this; if (b != null) { b = Array.from(b); } return function () { return a.apply(c, b || arguments); }; }, delay(b, c, a) { return setTimeout(this.pass((a == null ? [] : a), c), b); } });
+Number.alias('each', 'times'); (function (b) {
+  const a = {}; b.each((c) => {
+    if (!Number[c]) {
+      a[c] = function () {
+        return Math[c].apply(null, [this].concat(Array.from(arguments)));
+      };
+    }
+  }); Number.implement(a);
+}(['abs', 'acos', 'asin', 'atan', 'atan2', 'ceil', 'cos', 'exp', 'floor', 'log', 'max', 'min', 'pow', 'sin', 'sqrt', 'tan'])); (function () {
+  var a = this.Class = new Type('Class', function (h) {
+    if (instanceOf(h, Function)) {
+      h = { initialize: h };
+    } var g = function () {
+      e(this); if (g.$prototyping) { return this; } this.$caller = null; const i = (this.initialize) ? this.initialize.apply(this, arguments) : this; this.$caller = this.caller = null;
+      return i;
+    }.extend(this).implement(h); g.$constructor = a; g.prototype.$constructor = g; g.prototype.parent = c; return g;
+  }); var c = function () {
+    if (!this.$caller) {
+      throw new Error('The method "parent" cannot be called.');
+    } const g = this.$caller.$name; const h = this.$caller.$owner.parent; const i = (h) ? h.prototype[g] : null; if (!i) { throw new Error(`The method "${g}" has no parent.`); } return i.apply(this, arguments);
+  }; var e = function (g) {
+    for (const h in g) {
+      const j = g[h]; switch (typeOf(j)) {
+        case 'object': var i = function () {}; i.prototype = j; g[h] = e(new i()); break; case 'array': g[h] = j.clone();
+          break;
+      }
+    } return g;
+  }; const b = function (g, h, j) {
+    if (j.$origin) { j = j.$origin; } var i = function () {
+      if (j.$protected && this.$caller == null) {
+        throw new Error(`The method "${h}" cannot be called.`);
+      } const l = this.caller; const m = this.$caller; this.caller = m; this.$caller = i; const k = j.apply(this, arguments); this.$caller = m; this.caller = l; return k;
+    }.extend({ $owner: g, $origin: j, $name: h });
+    return i;
+  }; const f = function (h, i, g) {
+    if (a.Mutators.hasOwnProperty(h)) { i = a.Mutators[h].call(this, i); if (i == null) { return this; } } if (typeOf(i) == 'function') {
+      if (i.$hidden) {
+        return this;
+      } this.prototype[h] = (g) ? i : b(this, h, i);
+    } else { Object.merge(this.prototype, h, i); } return this;
+  }; const d = function (g) {
+    g.$prototyping = true; const h = new g(); delete g.$prototyping;
+    return h;
+  }; a.implement('implement', f.overloadSetter()); a.Mutators = { Extends(g) { this.parent = g; this.prototype = d(g); }, Implements(g) { Array.from(g).each(function (j) { const h = new j(); for (const i in h) { f.call(this, i, h[i], true); } }, this); } };
+}());

packages/mindplot/lib/components/model/FeatureModel.js

@@ -17,75 +17,75 @@
  */
 
 const FeatureModel = new Class(/** @lends FeatureModel */{
-    Static:{
+  Static: {
-        _nextUUID:function () {
+    _nextUUID() {
-            if (!$defined(FeatureModel._uuid)) {
+      if (!$defined(FeatureModel._uuid)) {
-                FeatureModel._uuid = 0;
+        FeatureModel._uuid = 0;
-            }
+      }
 
-            FeatureModel._uuid = FeatureModel._uuid + 1;
+      FeatureModel._uuid += 1;
-            return FeatureModel._uuid;
+      return FeatureModel._uuid;
-        }
     },
+  },
 
-    /**
+  /**
      * @constructs
      * @param type
      * @throws will throw an exception if type is null or undefined
      * assigns a unique id and the given type to the new model
      */
-    initialize:function (type) {
+  initialize(type) {
-        $assert(type, 'type can not be null');
+    $assert(type, 'type can not be null');
-        this._id = FeatureModel._nextUUID();
+    this._id = FeatureModel._nextUUID();
 
-        this._type = type;
+    this._type = type;
-        this._attributes = {};
+    this._attributes = {};
 
-        // Create type method ...
+    // Create type method ...
-        this['is' + $.camelCase(type) + 'Model'] = function () {
+    this[`is${$.camelCase(type)}Model`] = function () {
-            return true;
+      return true;
-        };
+    };
-    },
+  },
 
-    /** */
+  /** */
-    getAttributes:function () {
+  getAttributes() {
-        return Object.clone(this._attributes);
+    return Object.clone(this._attributes);
-    },
+  },
 
-    /** */
+  /** */
-    setAttributes:function (attributes) {
+  setAttributes(attributes) {
-        for (key in attributes) {
+    for (key in attributes) {
-            this["set" + key.capitalize()](attributes[key]);
+      this[`set${key.capitalize()}`](attributes[key]);
-        }
-    },
-
-    /** */
-    setAttribute:function (key, value) {
-        $assert(key, 'key id can not be null');
-        this._attributes[key] = value;
-    },
-
-    /** */
-    getAttribute:function (key) {
-        $assert(key, 'key id can not be null');
-
-        return this._attributes[key];
-    },
-
-    /** */
-    getId:function () {
-        return this._id;
-    },
-
-    /** */
-    setId:function (id) {
-        this._id = id;
-    },
-
-    /** */
-    getType:function () {
-        return this._type;
     }
+  },
+
+  /** */
+  setAttribute(key, value) {
+    $assert(key, 'key id can not be null');
+    this._attributes[key] = value;
+  },
+
+  /** */
+  getAttribute(key) {
+    $assert(key, 'key id can not be null');
+
+    return this._attributes[key];
+  },
+
+  /** */
+  getId() {
+    return this._id;
+  },
+
+  /** */
+  setId(id) {
+    this._id = id;
+  },
+
+  /** */
+  getType() {
+    return this._type;
+  },
 });
 
 export default FeatureModel;

packages/mindplot/lib/components/model/IMindmap.js

@@ -17,165 +17,165 @@
  */
 
 const IMindmap = new Class(/** @lends IMindmap */{
-    /**
+  /**
      * @constructs
      * @abstract
      */
-    initialize : function() {
+  initialize() {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** */
+  /** */
-    getCentralTopic : function() {
+  getCentralTopic() {
-        return this.getBranches()[0];
+    return this.getBranches()[0];
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    getDescription : function() {
+  getDescription() {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    setDescription : function(value) {
+  setDescription(value) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    getId : function() {
+  getId() {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    setId : function(id) {
+  setId(id) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    getVersion : function() {
+  getVersion() {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    setVersion : function(version) {
+  setVersion(version) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    addBranch : function(nodeModel) {
+  addBranch(nodeModel) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    getBranches : function() {
+  getBranches() {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    removeBranch : function(node) {
+  removeBranch(node) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    getRelationships : function() {
+  getRelationships() {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /**
+  /**
      * @param parent
      * @param child
      * @throws will throw an error if child already has a connection to a parent node
      */
-    connect : function(parent, child) {
+  connect(parent, child) {
-        // Child already has a parent ?
+    // Child already has a parent ?
-        $assert(!child.getParent(), 'Child model seems to be already connected');
+    $assert(!child.getParent(), 'Child model seems to be already connected');
 
-        //  Connect node...
+    //  Connect node...
-        parent.append(child);
+    parent.append(child);
 
-        // Remove from the branch ...
+    // Remove from the branch ...
-        this.removeBranch(child);
+    this.removeBranch(child);
-    },
+  },
 
-    /**
+  /**
      * @param child
      * @throws will throw an error if child is null or undefined
      * @throws will throw an error if child's parent cannot be found
      */
-    disconnect : function(child) {
+  disconnect(child) {
-        var parent = child.getParent();
+    const parent = child.getParent();
-        $assert(child, 'Child can not be null.');
+    $assert(child, 'Child can not be null.');
-        $assert(parent, 'Child model seems to be already connected');
+    $assert(parent, 'Child model seems to be already connected');
 
-        parent.removeChild(child);
+    parent.removeChild(child);
-        this.addBranch(child);
+    this.addBranch(child);
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    hasAlreadyAdded : function(node) {
+  hasAlreadyAdded(node) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    createNode : function(type, id) {
+  createNode(type, id) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    createRelationship : function(fromNode, toNode) {
+  createRelationship(fromNode, toNode) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    addRelationship : function(rel) {
+  addRelationship(rel) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** @abstract */
+  /** @abstract */
-    deleteRelationship : function(relationship) {
+  deleteRelationship(relationship) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    /** */
+  /** */
-    inspect : function() {
+  inspect() {
-        var result = '';
+    let result = '';
-        result = '{ ';
+    result = '{ ';
 
-        var branches = this.getBranches();
+    const branches = this.getBranches();
-        result = result + "version:" + this.getVersion();
+    result = `${result}version:${this.getVersion()}`;
-        result = result + " , [";
+    result = `${result} , [`;
 
-        for (var i = 0; i < branches.length; i++) {
+    for (let i = 0; i < branches.length; i++) {
-            var node = branches[i];
+      const node = branches[i];
-            if (i != 0) {
+      if (i != 0) {
-                result = result + ',\n ';
+        result = `${result},\n `;
-            }
+      }
-            result = result + "(" + i + ") =>" + node.inspect();
+      result = `${result}(${i}) =>${node.inspect()}`;
-        }
+    }
-        result = result + "]";
+    result = `${result}]`;
 
-        result = result + ' } ';
+    result = `${result} } `;
-        return result;
+    return result;
-    },
+  },
 
-    /**
+  /**
      * @param target
      */
-    copyTo : function(target) {
+  copyTo(target) {
-        var source = this;
+    const source = this;
-        var version = source.getVersion();
+    const version = source.getVersion();
-        target.setVersion(version);
+    target.setVersion(version);
 
-        var desc = this.getDescription();
+    const desc = this.getDescription();
-        target.setDescription(desc);
+    target.setDescription(desc);
 
-        // Then the rest of the branches ...
+    // Then the rest of the branches ...
-        var sbranchs = source.getBranches();
+    const sbranchs = source.getBranches();
-        _.each(sbranchs, function(snode) {
+    _.each(sbranchs, (snode) => {
-            var tnode = target.createNode(snode.getType(), snode.getId());
+      const tnode = target.createNode(snode.getType(), snode.getId());
-            snode.copyTo(tnode);
+      snode.copyTo(tnode);
-            target.addBranch(tnode);
+      target.addBranch(tnode);
-        });
+    });
-    }
+  },
 });
 
-export default IMindmap
+export default IMindmap;

packages/mindplot/lib/components/model/INodeModel.js

@@ -17,375 +17,374 @@
  */
 
 const INodeModel = new Class(
-    /** @lends INodeModel */ {
+  /** @lends INodeModel */ {
-        /**
+    /**
          * @constructs
          * @param mindmap
          */
-        initialize: function (mindmap) {
+    initialize(mindmap) {
-            $assert(mindmap && mindmap.getBranches, 'mindmap can not be null');
+      $assert(mindmap && mindmap.getBranches, 'mindmap can not be null');
-            this._mindmap = mindmap;
+      this._mindmap = mindmap;
-        },
+    },
 
-        /** */
+    /** */
-        getId: function () {
+    getId() {
-            return this.getProperty('id');
+      return this.getProperty('id');
-        },
+    },
 
-        /** */
+    /** */
-        setId: function (id) {
+    setId(id) {
-            if ($defined(id) && id > INodeModel._uuid) {
+      if ($defined(id) && id > INodeModel._uuid) {
-                INodeModel._uuid = id;
+        INodeModel._uuid = id;
-            }
+      }
-            if (!$defined(id)) {
+      if (!$defined(id)) {
-                id = INodeModel._nextUUID();
+        id = INodeModel._nextUUID();
-            }
+      }
 
-            this.putProperty('id', id);
+      this.putProperty('id', id);
-        },
+    },
 
-        /** */
+    /** */
-        getType: function () {
+    getType() {
-            return this.getProperty('type');
+      return this.getProperty('type');
-        },
+    },
 
-        /** */
+    /** */
-        setType: function (type) {
+    setType(type) {
-            this.putProperty('type', type);
+      this.putProperty('type', type);
-        },
+    },
 
-        /** */
+    /** */
-        setText: function (text) {
+    setText(text) {
-            this.putProperty('text', text);
+      this.putProperty('text', text);
-        },
+    },
 
-        /** */
+    /** */
-        getText: function () {
+    getText() {
-            return this.getProperty('text');
+      return this.getProperty('text');
-        },
+    },
 
-        /** */
+    /** */
-        setPosition: function (x, y) {
+    setPosition(x, y) {
-            $assert(!isNaN(parseInt(x)), 'x position is not valid:' + x);
+      $assert(!isNaN(parseInt(x)), `x position is not valid:${x}`);
-            $assert(!isNaN(parseInt(y)), 'y position is not valid:' + y);
+      $assert(!isNaN(parseInt(y)), `y position is not valid:${y}`);
-            this.putProperty('position', '{x:' + parseInt(x) + ',y:' + parseInt(y) + '}');
+      this.putProperty('position', `{x:${parseInt(x)},y:${parseInt(y)}}`);
-        },
+    },
 
-        /** */
+    /** */
-        getPosition: function () {
+    getPosition() {
-            var value = this.getProperty('position');
+      const value = this.getProperty('position');
-            var result = null;
+      let result = null;
-            if (value != null) {
+      if (value != null) {
-                result = eval('(' + value + ')');
+        result = eval(`(${value})`);
-            }
+      }
-            return result;
+      return result;
-        },
+    },
 
-        /** */
+    /** */
-        setImageSize: function (width, height) {
+    setImageSize(width, height) {
-            this.putProperty('imageSize', '{width:' + width + ',height:' + height + '}');
+      this.putProperty('imageSize', `{width:${width},height:${height}}`);
-        },
+    },
 
-        /** */
+    /** */
-        getImageSize: function () {
+    getImageSize() {
-            var value = this.getProperty('imageSize');
+      const value = this.getProperty('imageSize');
-            var result = null;
+      let result = null;
-            if (value != null) {
+      if (value != null) {
-                result = eval('(' + value + ')');
+        result = eval(`(${value})`);
-            }
+      }
-            return result;
+      return result;
-        },
+    },
 
-        /** */
+    /** */
-        setImageUrl: function (url) {
+    setImageUrl(url) {
-            this.putProperty('imageUrl', url);
+      this.putProperty('imageUrl', url);
-        },
+    },
 
-        /** */
+    /** */
-        getMetadata: function () {
+    getMetadata() {
-            return this.getProperty('metadata');
+      return this.getProperty('metadata');
-        },
+    },
 
-        /** */
+    /** */
-        setMetadata: function (json) {
+    setMetadata(json) {
-            this.putProperty('metadata', json);
+      this.putProperty('metadata', json);
-        },
+    },
 
-        /** */
+    /** */
-        getImageUrl: function () {
+    getImageUrl() {
-            return this.getProperty('imageUrl');
+      return this.getProperty('imageUrl');
-        },
+    },
 
-        /** */
+    /** */
-        getMindmap: function () {
+    getMindmap() {
-            return this._mindmap;
+      return this._mindmap;
-        },
+    },
 
-        /**
+    /**
          * lets the mindmap handle the disconnect node operation
          * @see mindplot.model.IMindmap.disconnect
          */
-        disconnect: function () {
+    disconnect() {
-            var mindmap = this.getMindmap();
+      const mindmap = this.getMindmap();
-            mindmap.disconnect(this);
+      mindmap.disconnect(this);
-        },
+    },
 
-        /** */
+    /** */
-        getShapeType: function () {
+    getShapeType() {
-            return this.getProperty('shapeType');
+      return this.getProperty('shapeType');
-        },
+    },
 
-        /** */
+    /** */
-        setShapeType: function (type) {
+    setShapeType(type) {
-            this.putProperty('shapeType', type);
+      this.putProperty('shapeType', type);
-        },
+    },
 
-        /** */
+    /** */
-        setOrder: function (value) {
+    setOrder(value) {
-            $assert(
+      $assert(
-                (typeof value === 'number' && isFinite(value)) || value == null,
+        (typeof value === 'number' && isFinite(value)) || value == null,
-                'Order must be null or a number'
+        'Order must be null or a number',
-            );
+      );
-            this.putProperty('order', value);
+      this.putProperty('order', value);
-        },
+    },
 
-        /** */
+    /** */
-        getOrder: function () {
+    getOrder() {
-            return this.getProperty('order');
+      return this.getProperty('order');
-        },
+    },
 
-        /** */
+    /** */
-        setFontFamily: function (fontFamily) {
+    setFontFamily(fontFamily) {
-            this.putProperty('fontFamily', fontFamily);
+      this.putProperty('fontFamily', fontFamily);
-        },
+    },
 
-        /** */
+    /** */
-        getFontFamily: function () {
+    getFontFamily() {
-            return this.getProperty('fontFamily');
+      return this.getProperty('fontFamily');
-        },
+    },
 
-        /** */
+    /** */
-        setFontStyle: function (fontStyle) {
+    setFontStyle(fontStyle) {
-            this.putProperty('fontStyle', fontStyle);
+      this.putProperty('fontStyle', fontStyle);
-        },
+    },
 
-        /** */
+    /** */
-        getFontStyle: function () {
+    getFontStyle() {
-            return this.getProperty('fontStyle');
+      return this.getProperty('fontStyle');
-        },
+    },
 
-        /** */
+    /** */
-        setFontWeight: function (weight) {
+    setFontWeight(weight) {
-            this.putProperty('fontWeight', weight);
+      this.putProperty('fontWeight', weight);
-        },
+    },
 
-        /** */
+    /** */
-        getFontWeight: function () {
+    getFontWeight() {
-            return this.getProperty('fontWeight');
+      return this.getProperty('fontWeight');
-        },
+    },
 
-        /** */
+    /** */
-        setFontColor: function (color) {
+    setFontColor(color) {
-            this.putProperty('fontColor', color);
+      this.putProperty('fontColor', color);
-        },
+    },
 
-        /** */
+    /** */
-        getFontColor: function () {
+    getFontColor() {
-            return this.getProperty('fontColor');
+      return this.getProperty('fontColor');
-        },
+    },
 
-        /** */
+    /** */
-        setFontSize: function (size) {
+    setFontSize(size) {
-            this.putProperty('fontSize', size);
+      this.putProperty('fontSize', size);
-        },
+    },
 
-        /** */
+    /** */
-        getFontSize: function () {
+    getFontSize() {
-            return this.getProperty('fontSize');
+      return this.getProperty('fontSize');
-        },
+    },
 
-        /** */
+    /** */
-        getBorderColor: function () {
+    getBorderColor() {
-            return this.getProperty('borderColor');
+      return this.getProperty('borderColor');
-        },
+    },
 
-        /** */
+    /** */
-        setBorderColor: function (color) {
+    setBorderColor(color) {
-            this.putProperty('borderColor', color);
+      this.putProperty('borderColor', color);
-        },
+    },
 
-        /** */
+    /** */
-        getBackgroundColor: function () {
+    getBackgroundColor() {
-            return this.getProperty('backgroundColor');
+      return this.getProperty('backgroundColor');
-        },
+    },
 
-        /** */
+    /** */
-        setBackgroundColor: function (color) {
+    setBackgroundColor(color) {
-            this.putProperty('backgroundColor', color);
+      this.putProperty('backgroundColor', color);
-        },
+    },
 
-        /** */
+    /** */
-        areChildrenShrunken: function () {
+    areChildrenShrunken() {
-            var result = this.getProperty('shrunken');
+      const result = this.getProperty('shrunken');
-            return $defined(result) ? result : false;
+      return $defined(result) ? result : false;
-        },
+    },
 
-        /**
+    /**
          * @return {Boolean} true if the children nodes are hidden by the shrink option
          */
-        setChildrenShrunken: function (value) {
+    setChildrenShrunken(value) {
-            this.putProperty('shrunken', value);
+      this.putProperty('shrunken', value);
-        },
+    },
 
-        /**
+    /**
          * @return {Boolean} true
          */
-        isNodeModel: function () {
+    isNodeModel() {
-            return true;
+      return true;
-        },
+    },
 
-        /**
+    /**
          * @return {Boolean} true if the node model has a parent assigned to it
          */
-        isConnected: function () {
+    isConnected() {
-            return this.getParent() != null;
+      return this.getParent() != null;
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        append: function (node) {
+    append(node) {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /**
+    /**
          * lets the mindmap handle the connect node operation
          * @throws will throw an error if parent is null or undefined
          * @see mindplot.model.IMindmap.connect
          */
-        connectTo: function (parent) {
+    connectTo(parent) {
-            $assert(parent, 'parent can not be null');
+      $assert(parent, 'parent can not be null');
-            var mindmap = this.getMindmap();
+      const mindmap = this.getMindmap();
-            mindmap.connect(parent, this);
+      mindmap.connect(parent, this);
-        },
+    },
 
-        /**
+    /**
          * @param target
          * @return target
          */
-        copyTo: function (target) {
+    copyTo(target) {
-            var source = this;
+      const source = this;
-            // Copy properties ...
+      // Copy properties ...
-            var keys = source.getPropertiesKeys();
+      const keys = source.getPropertiesKeys();
-            _.each(keys, function (key) {
+      _.each(keys, (key) => {
-                var value = source.getProperty(key);
+        const value = source.getProperty(key);
-                target.putProperty(key, value);
+        target.putProperty(key, value);
-            });
+      });
 
-            // Copy children ...
+      // Copy children ...
-            var children = this.getChildren();
+      const children = this.getChildren();
-            var tmindmap = target.getMindmap();
+      const tmindmap = target.getMindmap();
 
-            _.each(function (children, snode) {
+      _.each((children, snode) => {
-                var tnode = tmindmap.createNode(snode.getType(), snode.getId());
+        const tnode = tmindmap.createNode(snode.getType(), snode.getId());
-                snode.copyTo(tnode);
+        snode.copyTo(tnode);
-                target.append(tnode);
+        target.append(tnode);
-            });
+      });
 
-            return target;
+      return target;
-        },
+    },
 
-        /**
+    /**
          * lets parent handle the delete node operation, or, if none defined, calls the mindmap to
          * remove the respective branch
          */
-        deleteNode: function () {
+    deleteNode() {
-            var mindmap = this.getMindmap();
+      const mindmap = this.getMindmap();
 
-            //        console.log("Before:" + mindmap.inspect());
+      //        console.log("Before:" + mindmap.inspect());
-            var parent = this.getParent();
+      const parent = this.getParent();
-            if ($defined(parent)) {
+      if ($defined(parent)) {
-                parent.removeChild(this);
+        parent.removeChild(this);
-            } else {
+      } else {
-                // If it has not parent, it must be an isolate topic ...
+        // If it has not parent, it must be an isolate topic ...
-                mindmap.removeBranch(this);
+        mindmap.removeBranch(this);
-            }
+      }
-            // It's an isolated node. It must be a hole branch ...
+      // It's an isolated node. It must be a hole branch ...
-            //        console.log("After:" + mindmap.inspect());
+      //        console.log("After:" + mindmap.inspect());
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        getPropertiesKeys: function () {
+    getPropertiesKeys() {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        putProperty: function (key, value) {
+    putProperty(key, value) {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        setParent: function (parent) {
+    setParent(parent) {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        getChildren: function () {
+    getChildren() {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        getParent: function () {
+    getParent() {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        clone: function () {
+    clone() {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
 
-        /** */
+    /** */
-        inspect: function () {
+    inspect() {
-            var result =
+      let result = `{ type: ${
-                '{ type: ' +
+        this.getType()
-                this.getType() +
+      } , id: ${
-                ' , id: ' +
+        this.getId()
-                this.getId() +
+      } , text: ${
-                ' , text: ' +
+        this.getText()}`;
-                this.getText();
 
-            var children = this.getChildren();
+      const children = this.getChildren();
-            if (children.length > 0) {
+      if (children.length > 0) {
-                result = result + ', children: {(size:' + children.length;
+        result = `${result}, children: {(size:${children.length}`;
-                _.each(children, function (node) {
+        _.each(children, (node) => {
-                    result = result + '=> (';
+          result = `${result}=> (`;
-                    var keys = node.getPropertiesKeys();
+          const keys = node.getPropertiesKeys();
-                    _.each(keys, function (key) {
+          _.each(keys, (key) => {
-                        var value = node.getProperty(key);
+            const value = node.getProperty(key);
-                        result = result + key + ':' + value + ',';
+            result = `${result + key}:${value},`;
-                    });
+          });
-                    result = result + '}';
+          result = `${result}}`;
-                });
+        });
-            }
+      }
 
-            result = result + ' }';
+      result = `${result} }`;
-            return result;
+      return result;
-        },
+    },
 
-        /** @abstract */
+    /** @abstract */
-        removeChild: function (child) {
+    removeChild(child) {
-            throw 'Unsupported operation';
+      throw 'Unsupported operation';
-        },
+    },
-    }
+  },
 );
 
 /**
  * @enum {String}
  */
 const TopicShape = {
-    RECTANGLE: 'rectagle',
+  RECTANGLE: 'rectagle',
-    ROUNDED_RECT: 'rounded rectagle',
+  ROUNDED_RECT: 'rounded rectagle',
-    ELLIPSE: 'elipse',
+  ELLIPSE: 'elipse',
-    LINE: 'line',
+  LINE: 'line',
-    IMAGE: 'image',
+  IMAGE: 'image',
 };
 
 /**
@@ -412,12 +411,12 @@ INodeModel.MAIN_TOPIC_TO_MAIN_TOPIC_DISTANCE = 220;
  * @todo: This method must be implemented. (unascribed)
  */
 INodeModel._nextUUID = function () {
-    if (!$defined(INodeModel._uuid)) {
+  if (!$defined(INodeModel._uuid)) {
-        INodeModel._uuid = 0;
+    INodeModel._uuid = 0;
-    }
+  }
 
-    INodeModel._uuid = INodeModel._uuid + 1;
+  INodeModel._uuid += 1;
-    return INodeModel._uuid;
+  return INodeModel._uuid;
 };
 INodeModel._uuid = 0;
 

packages/mindplot/lib/components/model/IconModel.js

@@ -15,30 +15,30 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const FeatureModel = require('./FeatureModel').default
+const FeatureModel = require('./FeatureModel').default;
 
 const IconModel = new Class(/** @lends IconModel */{
-    Extends: FeatureModel,
+  Extends: FeatureModel,
-    /**
+  /**
      * @constructs
      * @param attributes
      * @extends mindplot.model.FeatureModel
      */
-    initialize:function (attributes) {
+  initialize(attributes) {
-        this.parent(IconModel.FEATURE_TYPE);
+    this.parent(IconModel.FEATURE_TYPE);
-        this.setIconType(attributes.id);
+    this.setIconType(attributes.id);
-    },
+  },
 
-    /** @return the icon type id */
+  /** @return the icon type id */
-    getIconType:function () {
+  getIconType() {
-        return this.getAttribute('id');
+    return this.getAttribute('id');
-    },
+  },
 
-    /** @param {String} iconType the icon type id*/
+  /** @param {String} iconType the icon type id */
-    setIconType:function (iconType) {
+  setIconType(iconType) {
-        $assert(iconType, 'iconType id can not be null');
+    $assert(iconType, 'iconType id can not be null');
-        this.setAttribute('id', iconType);
+    this.setAttribute('id', iconType);
-    }
+  },
 });
 
 /**
@@ -46,6 +46,6 @@ const IconModel = new Class(/** @lends IconModel */{
  * @type {String}
  * @default
  */
-IconModel.FEATURE_TYPE = "icon";
+IconModel.FEATURE_TYPE = 'icon';
 
 export default IconModel;

packages/mindplot/lib/components/model/LinkModel.js

@@ -18,54 +18,53 @@
 const FeatureModel = require('./FeatureModel').default;
 
 const LinkModel = new Class(/** @lends LinkModel */{
-    Extends:FeatureModel,
+  Extends: FeatureModel,
-    /**
+  /**
      * @constructs
      * @param attributes
      * @extends mindplot.model.FeatureModel
      */
-    initialize:function (attributes) {
+  initialize(attributes) {
-        this.parent(LinkModel.FEATURE_TYPE);
+    this.parent(LinkModel.FEATURE_TYPE);
-        this.setUrl(attributes.url);
+    this.setUrl(attributes.url);
-    },
+  },
 
-    /** @return {String} the url attribute value */
+  /** @return {String} the url attribute value */
-    getUrl:function () {
+  getUrl() {
-        return this.getAttribute('url');
+    return this.getAttribute('url');
-    },
+  },
 
-    /** 
+  /**
      * @param {String} url a URL provided by the user to set the link to
      * @throws will throw an error if url is null or undefined
      */
-    setUrl:function (url) {
+  setUrl(url) {
-        $assert(url, 'url can not be null');
+    $assert(url, 'url can not be null');
 
-        var fixedUrl = this._fixUrl(url);
+    const fixedUrl = this._fixUrl(url);
-        this.setAttribute('url', fixedUrl);
+    this.setAttribute('url', fixedUrl);
 
-        var type = fixedUrl.contains('mailto:') ? 'mail' : 'url';
+    const type = fixedUrl.contains('mailto:') ? 'mail' : 'url';
-        this.setAttribute('urlType', type);
+    this.setAttribute('urlType', type);
+  },
 
-    },
+  // url format is already checked in LinkEditor.checkUrl
-
+  _fixUrl(url) {
-    //url format is already checked in LinkEditor.checkUrl
+    let result = url;
-    _fixUrl:function (url) {
+    if (!result.contains('http://') && !result.contains('https://') && !result.contains('mailto://')) {
-        var result = url;
+      result = `http://${result}`;
-        if (!result.contains('http://') && !result.contains('https://') && !result.contains('mailto://')) {
-            result = "http://" + result;
-        }
-        return result;
-    },
-
-    /**
-     * @param {String} urlType the url type, either 'mail' or 'url'
-     * @throws will throw an error if urlType is null or undefined 
-     */
-    setUrlType:function (urlType) {
-        $assert(urlType, 'urlType can not be null');
-        this.setAttribute('urlType', urlType);
     }
+    return result;
+  },
+
+  /**
+     * @param {String} urlType the url type, either 'mail' or 'url'
+     * @throws will throw an error if urlType is null or undefined
+     */
+  setUrlType(urlType) {
+    $assert(urlType, 'urlType can not be null');
+    this.setAttribute('urlType', urlType);
+  },
 });
 
 /**

packages/mindplot/lib/components/model/Mindmap.js

@@ -19,173 +19,172 @@ const IMindmap = require('./IMindmap').default;
 const INodeModel = require('./INodeModel').default;
 const NodeModel = require('./NodeModel').default;
 const RelationshipModel = require('./RelationshipModel').default;
-const ModelCodeName = require('../persistence/ModelCodeName').default
+const ModelCodeName = require('../persistence/ModelCodeName').default;
 
 const Mindmap = new Class(/** @lends Mindmap */{
-        Extends:IMindmap,
+  Extends: IMindmap,
-        /**
+  /**
          * @constructs
          * @param id
          * @param version
          * @extends mindplot.model.IMindmap
          */
-        initialize:function (id, version) {
+  initialize(id, version) {
-            $assert(id, "Id can not be null");
+    $assert(id, 'Id can not be null');
-            this._branches = [];
+    this._branches = [];
-            this._description = null;
+    this._description = null;
-            this._relationships = [];
+    this._relationships = [];
-            this._version = $defined(version) ? version : ModelCodeName.TANGO;
+    this._version = $defined(version) ? version : ModelCodeName.TANGO;
-            this._id = id;
+    this._id = id;
-        },
+  },
 
-        /** */
+  /** */
-        getDescription:function () {
+  getDescription() {
-            return this._description;
+    return this._description;
-        },
+  },
 
-        /** */
+  /** */
-        setDescription:function (value) {
+  setDescription(value) {
-            this._description = value;
+    this._description = value;
-        },
+  },
 
-        /** */
+  /** */
-        getId:function () {
+  getId() {
-            return this._id;
+    return this._id;
-        },
+  },
 
-        /** */
+  /** */
-        setId:function (id) {
+  setId(id) {
-            this._id = id;
+    this._id = id;
-        },
+  },
 
-        /** */
+  /** */
-        getVersion:function () {
+  getVersion() {
-            return this._version;
+    return this._version;
-        },
+  },
 
-        /** */
+  /** */
-        setVersion:function (version) {
+  setVersion(version) {
-            this._version = version;
+    this._version = version;
-        },
+  },
 
-        /**
+  /**
          * @param {mindplot.model.NodeModel} nodeModel
          * @throws will throw an error if nodeModel is null, undefined or not a node model object
-         * @throws will throw an error if 
+         * @throws will throw an error if
          */
-        addBranch:function (nodeModel) {
+  addBranch(nodeModel) {
-            $assert(nodeModel && nodeModel.isNodeModel(), 'Add node must be invoked with model objects');
+    $assert(nodeModel && nodeModel.isNodeModel(), 'Add node must be invoked with model objects');
-            var branches = this.getBranches();
+    const branches = this.getBranches();
-            if (branches.length == 0) {
+    if (branches.length == 0) {
-                $assert(nodeModel.getType() == INodeModel.CENTRAL_TOPIC_TYPE, "First element must be the central topic");
+      $assert(nodeModel.getType() == INodeModel.CENTRAL_TOPIC_TYPE, 'First element must be the central topic');
-                nodeModel.setPosition(0, 0);
+      nodeModel.setPosition(0, 0);
-            } else {
+    } else {
-                $assert(nodeModel.getType() != INodeModel.CENTRAL_TOPIC_TYPE, "Mindmaps only have one cental topic");
+      $assert(nodeModel.getType() != INodeModel.CENTRAL_TOPIC_TYPE, 'Mindmaps only have one cental topic');
-            }
+    }
 
-            this._branches.push(nodeModel);
+    this._branches.push(nodeModel);
-        },
+  },
 
-        /**
+  /**
          * @param nodeModel
          */
-        removeBranch:function (nodeModel) {
+  removeBranch(nodeModel) {
-            $assert(nodeModel && nodeModel.isNodeModel(), 'Remove node must be invoked with model objects');
+    $assert(nodeModel && nodeModel.isNodeModel(), 'Remove node must be invoked with model objects');
-            return this._branches.erase(nodeModel);
+    return this._branches.erase(nodeModel);
-        },
+  },
 
-        /** */
+  /** */
-        getBranches:function () {
+  getBranches() {
-            return this._branches;
+    return this._branches;
-        },
+  },
 
-        /** */
+  /** */
-        getRelationships:function () {
+  getRelationships() {
-            return this._relationships;
+    return this._relationships;
-        },
+  },
 
-        /**
+  /**
          * @param node
          * @return {Boolean} true if node already exists
          */
-        hasAlreadyAdded:function (node) {
+  hasAlreadyAdded(node) {
-            var result = false;
+    let result = false;
 
-            // Check in not connected nodes.
+    // Check in not connected nodes.
-            var branches = this._branches;
+    const branches = this._branches;
-            for (var i = 0; i < branches.length; i++) {
+    for (let i = 0; i < branches.length; i++) {
-                result = branches[i]._isChildNode(node);
+      result = branches[i]._isChildNode(node);
-                if (result) {
+      if (result) {
-                    break;
+        break;
-                }
+      }
-            }
+    }
-        },
+  },
 
-        /**
+  /**
          * @param type
          * @param id
          * @return the node model created
          */
-        createNode:function (type, id) {
+  createNode(type, id) {
-            type = !$defined(type) ? INodeModel.MAIN_TOPIC_TYPE : type;
+    type = !$defined(type) ? INodeModel.MAIN_TOPIC_TYPE : type;
-            return new NodeModel(type, this, id);
+    return new NodeModel(type, this, id);
-        },
+  },
 
-        /**
+  /**
          * @param sourceNodeId
          * @param targetNodeId
          * @throws will throw an error if source node is null or undefined
          * @throws will throw an error if target node is null or undefined
          * @return the relationship model created
          */
-        createRelationship:function (sourceNodeId, targetNodeId) {
+  createRelationship(sourceNodeId, targetNodeId) {
-            $assert($defined(sourceNodeId), 'from node cannot be null');
+    $assert($defined(sourceNodeId), 'from node cannot be null');
-            $assert($defined(targetNodeId), 'to node cannot be null');
+    $assert($defined(targetNodeId), 'to node cannot be null');
 
-            return new RelationshipModel(sourceNodeId, targetNodeId);
+    return new RelationshipModel(sourceNodeId, targetNodeId);
-        },
+  },
 
-        /**
+  /**
          * @param relationship
          */
-        addRelationship:function (relationship) {
+  addRelationship(relationship) {
-            this._relationships.push(relationship);
+    this._relationships.push(relationship);
-        },
+  },
 
-        /**
+  /**
          * @param relationship
          */
-        deleteRelationship:function (relationship) {
+  deleteRelationship(relationship) {
-            this._relationships.erase(relationship);
+    this._relationships.erase(relationship);
-        },
+  },
 
-        /**
+  /**
          * @param id
          * @return the node with the respective id or null if not in the mindmap
          */
-        findNodeById:function (id) {
+  findNodeById(id) {
-            var result = null;
+    let result = null;
-            for (var i = 0; i < this._branches.length; i++) {
+    for (let i = 0; i < this._branches.length; i++) {
-                var branch = this._branches[i];
+      const branch = this._branches[i];
-                result = branch.findNodeById(id);
+      result = branch.findNodeById(id);
-                if (result) {
+      if (result) {
-                    break;
+        break;
-                }
+      }
-            }
-            return result;
-        }
     }
-);
+    return result;
+  },
+});
 
 /**
  * @param mapId
  * @return an empty mindmap with central topic only
  */
 Mindmap.buildEmpty = function (mapId) {
-    var result = new Mindmap(mapId);
+  const result = new Mindmap(mapId);
-    var node = result.createNode(INodeModel.CENTRAL_TOPIC_TYPE, 0);
+  const node = result.createNode(INodeModel.CENTRAL_TOPIC_TYPE, 0);
-    result.addBranch(node);
+  result.addBranch(node);
-    return result;
+  return result;
 };
 
 export default Mindmap;

packages/mindplot/lib/components/model/NodeModel.js

@@ -15,231 +15,224 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const INodeModel = require('./INodeModel').default
+const INodeModel = require('./INodeModel').default;
-const TopicFeature = require('../TopicFeature').default
+const TopicFeature = require('../TopicFeature').default;
 
 const NodeModel = new Class(/** @lends NodeModel */{
-    Extends:INodeModel,
+  Extends: INodeModel,
-    /**
+  /**
      * @constructs
      * @param {String} type node type
      * @param mindmap
      * @param id
      */
-    initialize:function (type, mindmap, id) {
+  initialize(type, mindmap, id) {
-        $assert(type, 'Node type can not be null');
+    $assert(type, 'Node type can not be null');
-        $assert(mindmap, 'mindmap can not be null');
+    $assert(mindmap, 'mindmap can not be null');
-        this._properties = {};
+    this._properties = {};
 
-        this.parent(mindmap);
+    this.parent(mindmap);
-        this.setId(id);
+    this.setId(id);
-        this.setType(type);
+    this.setType(type);
-        this.areChildrenShrunken(false);
+    this.areChildrenShrunken(false);
 
-        this._children = [];
+    this._children = [];
-        this._feature = [];
+    this._feature = [];
-    },
+  },
 
-    /** 
+  /**
      * @param type
      * @param attributes
      * @return {mindplot.model.FeatureModel} the created feature model
      */
-    createFeature:function (type, attributes) {
+  createFeature(type, attributes) {
-        return TopicFeature.createModel(type, attributes);
+    return TopicFeature.createModel(type, attributes);
-    },
+  },
 
-    /** 
+  /**
      * @param feature
      * @throws will throw an error if feature is null or undefined
      */
-    addFeature:function (feature) {
+  addFeature(feature) {
-        $assert(feature, 'feature can not be null');
+    $assert(feature, 'feature can not be null');
-        this._feature.push(feature);
+    this._feature.push(feature);
-    },
+  },
 
-    /** */
+  /** */
-    getFeatures:function () {
+  getFeatures() {
-        return this._feature;
+    return this._feature;
-    },
+  },
 
-    /** 
+  /**
      * @param feature
      * @throws will throw an error if feature is null or undefined
      * @throws will throw an error if the feature could not be removed
      */
-    removeFeature:function (feature) {
+  removeFeature(feature) {
-        $assert(feature, 'feature can not be null');
+    $assert(feature, 'feature can not be null');
-        var size = this._feature.length;
+    const size = this._feature.length;
-        this._feature = this._feature.filter(function (f) {
+    this._feature = this._feature.filter((f) => feature.getId() != f.getId());
-            return feature.getId() != f.getId();
+    $assert(size - 1 == this._feature.length, 'Could not be removed ...');
-        });
+  },
-        $assert(size - 1 == this._feature.length, 'Could not be removed ...');
 
-    },
+  /**
-
-    /** 
      * @param {String} type the feature type, e.g. icon or link
      * @throws will throw an error if type is null or undefined
      */
-    findFeatureByType:function (type) {
+  findFeatureByType(type) {
-        $assert(type, 'type can not be null');
+    $assert(type, 'type can not be null');
-        return this._feature.filter(function (feature) {
+    return this._feature.filter((feature) => feature.getType() == type);
-            return feature.getType() == type;
+  },
-        });
-    },
 
-    /** 
+  /**
      * @param {String} id
      * @throws will throw an error if id is null or undefined
      * @throws will throw an error if feature could not be found
      * @return the feature with the given id
      */
-    findFeatureById:function (id) {
+  findFeatureById(id) {
-        $assert($defined(id), 'id can not be null');
+    $assert($defined(id), 'id can not be null');
-        var result = this._feature.filter(function (feature) {
+    const result = this._feature.filter((feature) => feature.getId() == id);
-            return feature.getId() == id;
+    $assert(result.length == 1, `Feature could not be found:${id}`);
-        });
+    return result[0];
-        $assert(result.length == 1, "Feature could not be found:" + id);
+  },
-        return result[0];
-    },
 
-    /** */
+  /** */
-    getPropertiesKeys:function () {
+  getPropertiesKeys() {
-        return Object.keys(this._properties);
+    return Object.keys(this._properties);
-    },
+  },
 
-    /** 
+  /**
      * @param key
      * @param value
      * @throws will throw an error if key is null or undefined
      */
-    putProperty:function (key, value) {
+  putProperty(key, value) {
-        $defined(key, 'key can not be null');
+    $defined(key, 'key can not be null');
-        this._properties[key] = value;
+    this._properties[key] = value;
-    },
+  },
 
-    /** */
+  /** */
-    getProperties:function () {
+  getProperties() {
-        return this._properties;
+    return this._properties;
-    },
+  },
 
-    /** */
+  /** */
-    getProperty:function (key) {
+  getProperty(key) {
-        $defined(key, 'key can not be null');
+    $defined(key, 'key can not be null');
-        var result = this._properties[key];
+    const result = this._properties[key];
-        return !$defined(result) ? null : result;
+    return !$defined(result) ? null : result;
-    },
+  },
 
-    /** 
+  /**
      * @return {mindplot.model.NodeModel} an identical clone of the NodeModel
      */
-    clone:function () {
+  clone() {
-        var result = new NodeModel(this.getType(), this._mindmap);
+    const result = new NodeModel(this.getType(), this._mindmap);
-        result._children = this._children.map(function (node) {
+    result._children = this._children.map((node) => {
-            var cnode = node.clone();
+      const cnode = node.clone();
-            cnode._parent = result;
+      cnode._parent = result;
-            return cnode;
+      return cnode;
-        });
+    });
 
-        result._properties = Object.clone(this._properties);
+    result._properties = Object.clone(this._properties);
-        result._feature = this._feature.clone();
+    result._feature = this._feature.clone();
-        return result;
+    return result;
-    },
+  },
 
-    /**
+  /**
      * Similar to clone, assign new id to the elements ...
      * @return {mindplot.model.NodeModel}
      */
-    deepCopy:function () {
+  deepCopy() {
-        var result = new NodeModel(this.getType(), this._mindmap);
+    const result = new NodeModel(this.getType(), this._mindmap);
-        result._children = this._children.map(function (node) {
+    result._children = this._children.map((node) => {
-            var cnode = node.deepCopy();
+      const cnode = node.deepCopy();
-            cnode._parent = result;
+      cnode._parent = result;
-            return cnode;
+      return cnode;
-        });
+    });
 
-        var id = result.getId();
+    const id = result.getId();
-        result._properties = Object.clone(this._properties);
+    result._properties = Object.clone(this._properties);
-        result.setId(id);
+    result.setId(id);
 
-        result._feature = this._feature.clone();
+    result._feature = this._feature.clone();
-        return result;
+    return result;
-    },
+  },
 
-    /** 
+  /**
-     * @param {mindplot.model.NodeModel} child 
-     * @throws will throw an error if child is null, undefined or not a NodeModel object
-     */
-    append:function (child) {
-        $assert(child && child.isNodeModel(), 'Only NodeModel can be appended to Mindmap object');
-        this._children.push(child);
-        child._parent = this;
-    },
-
-    /** 
      * @param {mindplot.model.NodeModel} child
      * @throws will throw an error if child is null, undefined or not a NodeModel object
      */
-    removeChild:function (child) {
+  append(child) {
-        $assert(child && child.isNodeModel(), 'Only NodeModel can be appended to Mindmap object.');
+    $assert(child && child.isNodeModel(), 'Only NodeModel can be appended to Mindmap object');
-        this._children.erase(child);
+    this._children.push(child);
-        child._parent = null;
+    child._parent = this;
-    },
+  },
 
-    /** */
+  /**
-    getChildren:function () {
+     * @param {mindplot.model.NodeModel} child
-        return this._children;
+     * @throws will throw an error if child is null, undefined or not a NodeModel object
-    },
+     */
+  removeChild(child) {
+    $assert(child && child.isNodeModel(), 'Only NodeModel can be appended to Mindmap object.');
+    this._children.erase(child);
+    child._parent = null;
+  },
 
-    /** */
+  /** */
-    getParent:function () {
+  getChildren() {
-        return this._parent;
+    return this._children;
-    },
+  },
 
-    /** */
+  /** */
-    setParent:function (parent) {
+  getParent() {
-        $assert(parent != this, 'The same node can not be parent and child if itself.');
+    return this._parent;
-        this._parent = parent;
+  },
-    },
 
-    _isChildNode:function (node) {
+  /** */
-        var result = false;
+  setParent(parent) {
-        if (node == this) {
+    $assert(parent != this, 'The same node can not be parent and child if itself.');
-            result = true;
+    this._parent = parent;
-        } else {
+  },
-            var children = this.getChildren();
+
-            for (var i = 0; i < children.length; i++) {
+  _isChildNode(node) {
-                var child = children[i];
+    let result = false;
-                result = child._isChildNode(node);
+    if (node == this) {
-                if (result) {
+      result = true;
-                    break;
+    } else {
-                }
+      const children = this.getChildren();
-            }
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        result = child._isChildNode(node);
+        if (result) {
+          break;
         }
-        return result;
+      }
-    },
+    }
+    return result;
+  },
 
-    /** 
+  /**
      * @id
      * @return {mindplot.model.NodeModel} the node with the respective id
      */
-    findNodeById:function (id) {
+  findNodeById(id) {
-        var result = null;
+    let result = null;
-        if (this.getId() == id) {
+    if (this.getId() == id) {
-            result = this;
+      result = this;
-        } else {
+    } else {
-            var children = this.getChildren();
+      const children = this.getChildren();
-            for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
-                var child = children[i];
+        const child = children[i];
-                result = child.findNodeById(id);
+        result = child.findNodeById(id);
-                if (result) {
+        if (result) {
-                    break;
+          break;
-                }
-            }
         }
-        return result;
+      }
     }
+    return result;
+  },
 });
 
-export default NodeModel
+export default NodeModel;

packages/mindplot/lib/components/model/NoteModel.js

@@ -15,31 +15,31 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const FeatureModel = require('./FeatureModel').default
+const FeatureModel = require('./FeatureModel').default;
 
 const NoteModel = new Class(/** @lends NoteModel */{
-    Extends:FeatureModel,
+  Extends: FeatureModel,
-    /**
+  /**
      * @constructs
      * @param attributes
      * @extends mindplot.model.FeatureModel
      */
-    initialize:function (attributes) {
+  initialize(attributes) {
-        this.parent(NoteModel.FEATURE_TYPE);
+    this.parent(NoteModel.FEATURE_TYPE);
-        var noteText = attributes.text ? attributes.text : " ";
+    const noteText = attributes.text ? attributes.text : ' ';
-        this.setText(noteText);
+    this.setText(noteText);
-    },
+  },
 
-    /** */
+  /** */
-    getText:function () {
+  getText() {
-        return this.getAttribute('text');
+    return this.getAttribute('text');
-    },
+  },
 
-    /** */
+  /** */
-    setText:function (text) {
+  setText(text) {
-        $assert(text, 'text can not be null');
+    $assert(text, 'text can not be null');
-        this.setAttribute('text', text);
+    this.setAttribute('text', text);
-    }
+  },
 });
 
 /**
@@ -47,6 +47,6 @@ const NoteModel = new Class(/** @lends NoteModel */{
  * @type {String}
  * @default
  */
-NoteModel.FEATURE_TYPE = "note";
+NoteModel.FEATURE_TYPE = 'note';
 
 export default NoteModel;

packages/mindplot/lib/components/model/RelationshipModel.js

@@ -18,131 +18,131 @@
 const ConnectionLine = require('../ConnectionLine').default;
 
 const RelationshipModel = new Class(
-    /** @lends RelationshipModel */ {
+  /** @lends RelationshipModel */ {
-        Static: {
+    Static: {
-            _nextUUID: function () {
+      _nextUUID() {
-                if (!$defined(RelationshipModel._uuid)) {
+        if (!$defined(RelationshipModel._uuid)) {
-                    RelationshipModel._uuid = 0;
+          RelationshipModel._uuid = 0;
-                }
+        }
-                RelationshipModel._uuid = RelationshipModel._uuid + 1;
+        RelationshipModel._uuid += 1;
-                return RelationshipModel._uuid;
+        return RelationshipModel._uuid;
-            },
+      },
-        },
+    },
 
-        /**
+    /**
          * @constructs
          * @param sourceTopicId
          * @param targetTopicId
          * @throws will throw an error if sourceTopicId is null or undefined
          * @throws will throw an error if targetTopicId is null or undefined
          */
-        initialize: function (sourceTopicId, targetTopicId) {
+    initialize(sourceTopicId, targetTopicId) {
-            $assert($defined(sourceTopicId), 'from node type can not be null');
+      $assert($defined(sourceTopicId), 'from node type can not be null');
-            $assert($defined(targetTopicId), 'to node type can not be null');
+      $assert($defined(targetTopicId), 'to node type can not be null');
 
-            this._id = RelationshipModel._nextUUID();
+      this._id = RelationshipModel._nextUUID();
-            this._sourceTargetId = sourceTopicId;
+      this._sourceTargetId = sourceTopicId;
-            this._targetTopicId = targetTopicId;
+      this._targetTopicId = targetTopicId;
-            this._lineType = ConnectionLine.SIMPLE_CURVED;
+      this._lineType = ConnectionLine.SIMPLE_CURVED;
-            this._srcCtrlPoint = null;
+      this._srcCtrlPoint = null;
-            this._destCtrlPoint = null;
+      this._destCtrlPoint = null;
-            this._endArrow = true;
+      this._endArrow = true;
-            this._startArrow = false;
+      this._startArrow = false;
-        },
+    },
 
-        /** */
+    /** */
-        getFromNode: function () {
+    getFromNode() {
-            return this._sourceTargetId;
+      return this._sourceTargetId;
-        },
+    },
 
-        /** */
+    /** */
-        getToNode: function () {
+    getToNode() {
-            return this._targetTopicId;
+      return this._targetTopicId;
-        },
+    },
 
-        /** */
+    /** */
-        getId: function () {
+    getId() {
-            $assert(this._id, 'id is null');
+      $assert(this._id, 'id is null');
-            return this._id;
+      return this._id;
-        },
+    },
 
-        /** */
+    /** */
-        getLineType: function () {
+    getLineType() {
-            return this._lineType;
+      return this._lineType;
-        },
+    },
 
-        /** */
+    /** */
-        setLineType: function (lineType) {
+    setLineType(lineType) {
-            this._lineType = lineType;
+      this._lineType = lineType;
-        },
+    },
 
-        /** */
+    /** */
-        getSrcCtrlPoint: function () {
+    getSrcCtrlPoint() {
-            return this._srcCtrlPoint;
+      return this._srcCtrlPoint;
-        },
+    },
 
-        /** */
+    /** */
-        setSrcCtrlPoint: function (srcCtrlPoint) {
+    setSrcCtrlPoint(srcCtrlPoint) {
-            this._srcCtrlPoint = srcCtrlPoint;
+      this._srcCtrlPoint = srcCtrlPoint;
-        },
+    },
 
-        /** */
+    /** */
-        getDestCtrlPoint: function () {
+    getDestCtrlPoint() {
-            return this._destCtrlPoint;
+      return this._destCtrlPoint;
-        },
+    },
 
-        /** */
+    /** */
-        setDestCtrlPoint: function (destCtrlPoint) {
+    setDestCtrlPoint(destCtrlPoint) {
-            this._destCtrlPoint = destCtrlPoint;
+      this._destCtrlPoint = destCtrlPoint;
-        },
+    },
 
-        /** */
+    /** */
-        getEndArrow: function () {
+    getEndArrow() {
-            return this._endArrow;
+      return this._endArrow;
-        },
+    },
 
-        /** */
+    /** */
-        setEndArrow: function (endArrow) {
+    setEndArrow(endArrow) {
-            this._endArrow = endArrow;
+      this._endArrow = endArrow;
-        },
+    },
 
-        /** */
+    /** */
-        getStartArrow: function () {
+    getStartArrow() {
-            return this._startArrow;
+      return this._startArrow;
-        },
+    },
 
-        /** */
+    /** */
-        setStartArrow: function (startArrow) {
+    setStartArrow(startArrow) {
-            this._startArrow = startArrow;
+      this._startArrow = startArrow;
-        },
+    },
 
-        /**
+    /**
          * @return a clone of the relationship model
          */
-        clone: function () {
+    clone() {
-            var result = new RelationshipModel(this._sourceTargetId, this._targetTopicId);
+      const result = new RelationshipModel(this._sourceTargetId, this._targetTopicId);
-            result._id = this._id;
+      result._id = this._id;
-            result._lineType = this._lineType;
+      result._lineType = this._lineType;
-            result._srcCtrlPoint = this._srcCtrlPoint;
+      result._srcCtrlPoint = this._srcCtrlPoint;
-            result._destCtrlPoint = this._destCtrlPoint;
+      result._destCtrlPoint = this._destCtrlPoint;
-            result._endArrow = this._endArrow;
+      result._endArrow = this._endArrow;
-            result._startArrow = this._startArrow;
+      result._startArrow = this._startArrow;
-            return result;
+      return result;
-        },
+    },
 
-        /**
+    /**
          * @return {String} textual information about the relationship's source and target node
          */
-        inspect: function () {
+    inspect() {
-            return (
+      return (
-                '(fromNode:' +
+        `(fromNode:${
-                this.getFromNode().getId() +
+          this.getFromNode().getId()
-                ' , toNode: ' +
+        } , toNode: ${
-                this.getToNode().getId() +
+          this.getToNode().getId()
-                ')'
+        })`
-            );
+      );
-        },
+    },
-    }
+  },
 );
 
 export default RelationshipModel;

packages/mindplot/lib/components/model/index.js

@@ -9,13 +9,13 @@ const nodeModel = require('./NodeModel').default;
 const relationshipModel = require('./RelationshipModel').default;
 
 export const Model = {
-    FeatureModel: featureModel,
+  FeatureModel: featureModel,
-    IconModel: iconModel,
+  IconModel: iconModel,
-    IMindmap: iMindmap,
+  IMindmap: iMindmap,
-    INodeModel: iNodeModel,
+  INodeModel: iNodeModel,
-    LinkModel: linkModel,
+  LinkModel: linkModel,
-    NoteModel: noteModel,
+  NoteModel: noteModel,
-    Mindmap: mindmap,
+  Mindmap: mindmap,
-    NodeModel: nodeModel,
+  NodeModel: nodeModel,
-    RelationshipModel: relationshipModel,
+  RelationshipModel: relationshipModel,
 };

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

@@ -15,45 +15,45 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const ModelCodeName = require('./ModelCodeName').default
+const ModelCodeName = require('./ModelCodeName').default;
 const XMLSerializer_Pela = require('./XMLSerializer_Pela').default;
 
 const Beta2PelaMigrator = new Class({
-    initialize:function (betaSerializer) {
+  initialize(betaSerializer) {
-        this._betaSerializer = betaSerializer;
+    this._betaSerializer = betaSerializer;
-        this._pelaSerializer = new XMLSerializer_Pela();
+    this._pelaSerializer = new XMLSerializer_Pela();
-    },
+  },
 
-    toXML:function (mindmap) {
+  toXML(mindmap) {
-        return this._pelaSerializer.toXML(mindmap);
+    return this._pelaSerializer.toXML(mindmap);
-    },
+  },
 
-    loadFromDom:function (dom, mapId) {
+  loadFromDom(dom, mapId) {
-        $assert($defined(mapId), "mapId can not be null");
+    $assert($defined(mapId), 'mapId can not be null');
-        var mindmap = this._betaSerializer.loadFromDom(dom, mapId);
+    const mindmap = this._betaSerializer.loadFromDom(dom, mapId);
-        mindmap.setVersion(ModelCodeName.PELA);
+    mindmap.setVersion(ModelCodeName.PELA);
 
-        // Beta does not set position on second level nodes ...
+    // Beta does not set position on second level nodes ...
-        var branches = mindmap.getBranches();
+    const branches = mindmap.getBranches();
-        var me = this;
+    const me = this;
-        _.each(branches, function (model) {
+    _.each(branches, (model) => {
-            me._fixPosition(model);
+      me._fixPosition(model);
-        });
+    });
 
-        return mindmap;
+    return mindmap;
-    },
+  },
 
-    _fixPosition:function (parentModel) {
+  _fixPosition(parentModel) {
-        var parentPos = parentModel.getPosition();
+    const parentPos = parentModel.getPosition();
-        var isRight = parentPos.x > 0;
+    const isRight = parentPos.x > 0;
-        var me = this;
+    const me = this;
-        _.each(parentModel.getChildren(), function (child) {
+    _.each(parentModel.getChildren(), (child) => {
-            if (!child.getPosition()) {
+      if (!child.getPosition()) {
-                child.setPosition(parentPos.x + (50 * isRight ? 1 : -1), parentPos.y);
+        child.setPosition(parentPos.x + (50 * isRight ? 1 : -1), parentPos.y);
-            }
+      }
-            me._fixPosition(child);
+      me._fixPosition(child);
-        });
+    });
-    }
+  },
 });
 
 export default Beta2PelaMigrator;

packages/mindplot/lib/components/persistence/ModelCodeName.js

@@ -21,9 +21,9 @@
  * @enum {String}
  */
 const ModelCodeName = {
-    BETA : "beta",
+  BETA: 'beta',
-    PELA : "pela",
+  PELA: 'pela',
-    TANGO : "tango"
+  TANGO: 'tango',
 };
 
-export default ModelCodeName
+export default ModelCodeName;

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

@@ -15,85 +15,78 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const XMLSerializer_Tango = require('./XMLSerializer_Tango').default
+const XMLSerializer_Tango = require('./XMLSerializer_Tango').default;
 const ModelCodeName = require('./ModelCodeName').default;
 
 const Pela2TangoMigrator = new Class({
-    initialize : function(pelaSerializer) {
+  initialize(pelaSerializer) {
-        this._pelaSerializer = pelaSerializer;
+    this._pelaSerializer = pelaSerializer;
-        this._tangoSerializer = new XMLSerializer_Tango();
+    this._tangoSerializer = new XMLSerializer_Tango();
-    },
+  },
 
-    toXML : function(mindmap) {
+  toXML(mindmap) {
-        return this._tangoSerializer.toXML(mindmap);
+    return this._tangoSerializer.toXML(mindmap);
-    },
+  },
 
-    loadFromDom : function(dom, mapId) {
+  loadFromDom(dom, mapId) {
-        $assert($defined(mapId), "mapId can not be null");
+    $assert($defined(mapId), 'mapId can not be null');
-        var mindmap = this._pelaSerializer.loadFromDom(dom, mapId);
+    const mindmap = this._pelaSerializer.loadFromDom(dom, mapId);
-        mindmap.setVersion(ModelCodeName.TANGO);
+    mindmap.setVersion(ModelCodeName.TANGO);
-        this._fixOrder(mindmap);
+    this._fixOrder(mindmap);
-        this._fixPosition(mindmap);
+    this._fixPosition(mindmap);
-        return mindmap;
+    return mindmap;
-    },
+  },
-
-    _fixOrder : function(mindmap) {
-        // First level node policies has been changed.
-        var centralNode = mindmap.getBranches()[0];
-        var children = centralNode.getChildren();
-        var leftNodes = [];
-        var rightNodes = [];
-        for (var i = 0; i < children.length; i++) {
-            var child = children[i];
-            var position = child.getPosition();
-            if (position.x < 0) {
-                leftNodes.push(child);
-            } else {
-                rightNodes.push(child);
-            }
-        }
-        rightNodes.sort(function(a, b) {
-            return a.getOrder() > b.getOrder()
-        });
-        leftNodes.sort(function(a, b) {
-            return a.getOrder() > b.getOrder();
-        });
-
-        for (i = 0; i < rightNodes.length; i++) {
-            rightNodes[i].setOrder(i * 2);
-        }
-
-        for (i = 0; i < leftNodes.length; i++) {
-            leftNodes[i].setOrder(i * 2 + 1);
-        }
-    },
-
-    _fixPosition : function(mindmap) {
-        // Position was not required in previous versions. Try to synthesize one .
-        var centralNode = mindmap.getBranches()[0];
-        var children = centralNode.getChildren();
-        for (var i = 0; i < children.length; i++) {
-            var child = children[i];
-            var position = child.getPosition();
-            this._fixNodePosition(child, position)
-
-        }
-    },
-    _fixNodePosition : function(node, parentPosition) {
-        // Position was not required in previous versions. Try to synthesize one .
-        var position = node.getPosition();
-        if (!position) {
-            position = {x:parentPosition.x + 30,y:parentPosition.y};
-            node.setPosition(position.x, position.y);
-        }
-        var children = node.getChildren();
-        for (var i = 0; i < children.length; i++) {
-            var child = children[i];
-            this._fixNodePosition(child, position);
-
-        }
 
+  _fixOrder(mindmap) {
+    // First level node policies has been changed.
+    const centralNode = mindmap.getBranches()[0];
+    const children = centralNode.getChildren();
+    const leftNodes = [];
+    const rightNodes = [];
+    for (var i = 0; i < children.length; i++) {
+      const child = children[i];
+      const position = child.getPosition();
+      if (position.x < 0) {
+        leftNodes.push(child);
+      } else {
+        rightNodes.push(child);
+      }
     }
+    rightNodes.sort((a, b) => a.getOrder() > b.getOrder());
+    leftNodes.sort((a, b) => a.getOrder() > b.getOrder());
+
+    for (i = 0; i < rightNodes.length; i++) {
+      rightNodes[i].setOrder(i * 2);
+    }
+
+    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 .
+    const centralNode = mindmap.getBranches()[0];
+    const children = centralNode.getChildren();
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      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();
+    if (!position) {
+      position = { x: parentPosition.x + 30, y: parentPosition.y };
+      node.setPosition(position.x, position.y);
+    }
+    const children = node.getChildren();
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      this._fixNodePosition(child, position);
+    }
+  },
 });
 
 export default Pela2TangoMigrator;