Revert "Move lint"

This reverts commit cc8dc0c9bdbfe73bd66fed325aa7ba13efd1d3e1.

.eslintcache

@@ -0,0 +1 @@
+[{"/Users/pveiga/repos/wisemapping-react/src/Footer.js":"1","/Users/pveiga/repos/wisemapping-react/src/Header.js":"2","/Users/pveiga/repos/wisemapping-react/src/index.js":"3","/Users/pveiga/repos/wisemapping-react/src/LoginPage.js":"4","/Users/pveiga/repos/wisemapping-react/src/RegistrationPage.js":"5"},{"size":1609,"mtime":1607011308675,"results":"6","hashOfConfig":"7"},{"size":1924,"mtime":1607015196109,"results":"8","hashOfConfig":"7"},{"size":1385,"mtime":1607144319143,"results":"9","hashOfConfig":"7"},{"size":3345,"mtime":1607147386381,"results":"10","hashOfConfig":"7"},{"size":4573,"mtime":1607143971378,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",[],"/Users/pveiga/repos/wisemapping-react/src/RegistrationPage.js",[]]

.eslintrc.json

@@ -1,15 +1,29 @@
 {
     "env": {
         "browser": true,
-        "commonjs": true,
         "es2021": true
     },
     "extends": [
-        "airbnb-base"
+        "eslint:recommended",
+        "prettier",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
     ],
+    "parser": "@typescript-eslint/parser",
     "parserOptions": {
-        "ecmaVersion": 12
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
     },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
     "rules": {
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/explicit-module-boundary-types": "error",
+      "@typescript-eslint/no-unused-vars": "error"
     }
 }

package.json

@@ -40,5 +40,15 @@
     },
     "homepage": "http://localhost:8080/react",
     "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL",
-
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged",
+            "pre-push": "yarn lint && yarn test"
+        }
+    },
+    "lint-staged": {
+        "**/*.{ts,tsx}": [
+            "prettier --write"
+        ]
+    }
 }

packages/web2d/.eslintrc.json

@@ -1,22 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es2021": true
-    },
-    "extends": [
-        "airbnb-base"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 12
-    },
-    "rules": {
-        "max-len": [0, 200],
-        "no-underscore-dangle": "off",
-        "no-restricted-syntax": "off",
-        "guard-for-in": "off",
-        "no-plusplus": "off"
-    },
-    "plugins": ["only-warn"]
-
-}

packages/web2d/lib/components/Arrow.js

@@ -20,44 +20,44 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit').default;
 
 const Arrow = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.createArrow();
-    const defaultAttributes = {
-      strokeColor: 'black',
-      strokeWidth: 1,
-      strokeStyle: 'solid',
-      strokeOpacity: 1,
-    };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
-    }
-    this.parent(peer, defaultAttributes);
-  },
+    Extends: Element,
+    initialize: function (attributes) {
+        var peer = Toolkit.createArrow();
+        var defaultAttributes = {
+            strokeColor: 'black',
+            strokeWidth: 1,
+            strokeStyle: 'solid',
+            strokeOpacity: 1,
+        };
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+    },
 
-  getType() {
-    return 'Arrow';
-  },
+    getType: function () {
+        return 'Arrow';
+    },
 
-  setFrom(x, y) {
-    this._peer.setFrom(x, y);
-  },
+    setFrom: function (x, y) {
+        this._peer.setFrom(x, y);
+    },
 
-  setControlPoint(point) {
-    this._peer.setControlPoint(point);
-  },
+    setControlPoint: function (point) {
+        this._peer.setControlPoint(point);
+    },
 
-  setStrokeColor(color) {
-    this._peer.setStrokeColor(color);
-  },
+    setStrokeColor: function (color) {
+        this._peer.setStrokeColor(color);
+    },
 
-  setStrokeWidth(width) {
-    this._peer.setStrokeWidth(width);
-  },
+    setStrokeWidth: function (width) {
+        this._peer.setStrokeWidth(width);
+    },
 
-  setDashed(isDashed, length, spacing) {
-    this._peer.setDashed(isDashed, length, spacing);
-  },
+    setDashed: function (isDashed, length, spacing) {
+        this._peer.setDashed(isDashed, length, spacing);
+    },
 });
 
-export default Arrow;
+export default Arrow

packages/web2d/lib/components/CurvedLine.js

@@ -19,103 +19,102 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit').default;
 
 const CurvedLine = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.createCurvedLine();
-    const defaultAttributes = {
-      strokeColor: 'blue', strokeWidth: 1, strokeStyle: 'solid', strokeOpacity: 1,
-    };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
+    Extends: Element,
+    initialize: function(attributes) {
+        var peer = Toolkit.createCurvedLine();
+        var defaultAttributes = {strokeColor:'blue',strokeWidth:1,strokeStyle:'solid',strokeOpacity:1};
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+    },
+
+    getType : function() {
+        return "CurvedLine";
+    },
+
+    setFrom : function(x, y) {
+        $assert(!isNaN(x), "x must be defined");
+        $assert(!isNaN(y), "y must be defined");
+
+        this._peer.setFrom(x, y);
+    },
+
+    setTo : function(x, y) {
+        $assert(!isNaN(x), "x must be defined");
+        $assert(!isNaN(y), "y must be defined");
+
+        this._peer.setTo(x, y);
+    },
+
+    getFrom : function() {
+        return this._peer.getFrom();
+    },
+
+    getTo : function() {
+        return this._peer.getTo();
+    },
+
+    setShowEndArrow : function(visible) {
+        this._peer.setShowEndArrow(visible);
+    },
+
+    isShowEndArrow : function() {
+        return this._peer.isShowEndArrow();
+    },
+
+    setShowStartArrow : function(visible) {
+        this._peer.setShowStartArrow(visible);
+    },
+
+    isShowStartArrow : function() {
+        return this._peer.isShowStartArrow();
+    },
+
+    setSrcControlPoint : function(control) {
+        this._peer.setSrcControlPoint(control);
+    },
+
+    setDestControlPoint : function(control) {
+        this._peer.setDestControlPoint(control);
+    },
+
+    getControlPoints : function() {
+        return this._peer.getControlPoints();
+    },
+
+    isSrcControlPointCustom : function() {
+        return this._peer.isSrcControlPointCustom();
+    },
+
+    isDestControlPointCustom : function() {
+        return this._peer.isDestControlPointCustom();
+    },
+
+    setIsSrcControlPointCustom : function(isCustom) {
+        this._peer.setIsSrcControlPointCustom(isCustom);
+    },
+
+    setIsDestControlPointCustom : function(isCustom) {
+        this._peer.setIsDestControlPointCustom(isCustom);
+    },
+
+    updateLine : function(avoidControlPointFix) {
+        return this._peer.updateLine(avoidControlPointFix);
+    },
+
+    setStyle : function(style) {
+        this._peer.setLineStyle(style);
+
+    },
+
+    getStyle : function() {
+        return this._peer.getLineStyle();
+    },
+
+    setDashed : function(length, spacing) {
+        this._peer.setDashed(length, spacing);
     }
-    this.parent(peer, defaultAttributes);
-  },
-
-  getType() {
-    return 'CurvedLine';
-  },
-
-  setFrom(x, y) {
-    $assert(!isNaN(x), 'x must be defined');
-    $assert(!isNaN(y), 'y must be defined');
-
-    this._peer.setFrom(x, y);
-  },
-
-  setTo(x, y) {
-    $assert(!isNaN(x), 'x must be defined');
-    $assert(!isNaN(y), 'y must be defined');
-
-    this._peer.setTo(x, y);
-  },
-
-  getFrom() {
-    return this._peer.getFrom();
-  },
-
-  getTo() {
-    return this._peer.getTo();
-  },
-
-  setShowEndArrow(visible) {
-    this._peer.setShowEndArrow(visible);
-  },
-
-  isShowEndArrow() {
-    return this._peer.isShowEndArrow();
-  },
-
-  setShowStartArrow(visible) {
-    this._peer.setShowStartArrow(visible);
-  },
-
-  isShowStartArrow() {
-    return this._peer.isShowStartArrow();
-  },
-
-  setSrcControlPoint(control) {
-    this._peer.setSrcControlPoint(control);
-  },
-
-  setDestControlPoint(control) {
-    this._peer.setDestControlPoint(control);
-  },
-
-  getControlPoints() {
-    return this._peer.getControlPoints();
-  },
-
-  isSrcControlPointCustom() {
-    return this._peer.isSrcControlPointCustom();
-  },
-
-  isDestControlPointCustom() {
-    return this._peer.isDestControlPointCustom();
-  },
-
-  setIsSrcControlPointCustom(isCustom) {
-    this._peer.setIsSrcControlPointCustom(isCustom);
-  },
-
-  setIsDestControlPointCustom(isCustom) {
-    this._peer.setIsDestControlPointCustom(isCustom);
-  },
-
-  updateLine(avoidControlPointFix) {
-    return this._peer.updateLine(avoidControlPointFix);
-  },
-
-  setStyle(style) {
-    this._peer.setLineStyle(style);
-  },
-
-  getStyle() {
-    return this._peer.getLineStyle();
-  },
-
-  setDashed(length, spacing) {
-    this._peer.setDashed(length, spacing);
-  },
 });
 
 CurvedLine.SIMPLE_LINE = false;

packages/web2d/lib/components/Element.js

@@ -16,58 +16,58 @@
  *   limitations under the License.
  */
 
-const Element = new Class({ // eslint-disable-line no-undef
-  initialize(peer, attributes) {
-    this._peer = peer;
-    if (peer == null) {
-      throw new Error('Element peer can not be null');
-    }
+const Element = new Class({ //eslint-disable-line no-undef
+    initialize: function (peer, attributes) {
+        this._peer = peer;
+        if (peer == null) {
+            throw new Error('Element peer can not be null');
+        }
 
-    if ($defined(attributes)) { // eslint-disable-line no-undef
-      this._initialize(attributes);
-    }
-  },
+        if ($defined(attributes)) { //eslint-disable-line no-undef
+            this._initialize(attributes);
+        }
+    },
 
-  _initialize(attributes) {
-    const batchExecute = {};
+    _initialize: function (attributes) {
+        var batchExecute = {};
 
-    // Collect arguments ...
-    for (var key in attributes) {
-      const funcName = this._attributeNameToFuncName(key, 'set');
-      let funcArgs = batchExecute[funcName];
-      if (!$defined(funcArgs)) { // eslint-disable-line no-undef
-        funcArgs = [];
-      }
+        // Collect arguments ...
+        for (var key in attributes) {
+            var funcName = this._attributeNameToFuncName(key, 'set');
+            var funcArgs = batchExecute[funcName];
+            if (!$defined(funcArgs)) { //eslint-disable-line no-undef
+                funcArgs = [];
+            }
 
-      const signature = Element._propertyNameToSignature[key];
-      const argPositions = signature[1];
-      if (argPositions != Element._SIGNATURE_MULTIPLE_ARGUMENTS) {
-        funcArgs[argPositions] = attributes[key];
-      } else {
-        funcArgs = attributes[key].split(' ');
-      }
-      batchExecute[funcName] = funcArgs;
-    }
+            var signature = Element._propertyNameToSignature[key];
+            var argPositions = signature[1];
+            if (argPositions != Element._SIGNATURE_MULTIPLE_ARGUMENTS) {
+                funcArgs[argPositions] = attributes[key];
+            } else {
+                funcArgs = attributes[key].split(' ');
+            }
+            batchExecute[funcName] = funcArgs;
+        }
 
-    // Call functions ...
-    for (var key in batchExecute) { // eslint-disable-line no-redeclare
-      const func = this[key];
-      if (!$defined(func)) { // eslint-disable-line no-undef
-        throw new Error(`Could not find function: ${key}`);
-      }
-      func.apply(this, batchExecute[key]);
-    }
-  },
+        // Call functions ...
+        for (var key in batchExecute) { //eslint-disable-line no-redeclare
+            var func = this[key];
+            if (!$defined(func)) { //eslint-disable-line no-undef
+                throw new Error('Could not find function: ' + key);
+            }
+            func.apply(this, batchExecute[key]);
+        }
+    },
 
-  setSize(width, height) {
-    this._peer.setSize(width, height);
-  },
+    setSize: function (width, height) {
+        this._peer.setSize(width, height);
+    },
 
-  setPosition(cx, cy) {
-    this._peer.setPosition(cx, cy);
-  },
+    setPosition: function (cx, cy) {
+        this._peer.setPosition(cx, cy);
+    },
 
-  /**
+    /**
      * Allows the registration of event listeners on the event target.
      * type
      *     A string representing the event type to listen for.
@@ -77,18 +77,18 @@ const Element = new Class({ // eslint-disable-line no-undef
      * The following events types are supported:
      *
      */
-  addEvent(type, listener) {
-    this._peer.addEvent(type, listener);
-  },
+    addEvent: function (type, listener) {
+        this._peer.addEvent(type, listener);
+    },
 
-  trigger(type, event) {
-    this._peer.trigger(type, event);
-  },
+    trigger: function (type, event) {
+        this._peer.trigger(type, event);
+    },
 
-  cloneEvents(from) {
-    this._peer.cloneEvents(from);
-  },
-  /**
+    cloneEvents: function (from) {
+        this._peer.cloneEvents(from);
+    },
+    /**
      *
      * Allows the removal of event listeners from the event target.
      *
@@ -99,221 +99,221 @@ const Element = new Class({ // eslint-disable-line no-undef
      *     The listener parameter takes an interface implemented by the user which contains the methods to be called when the event occurs.
      *     This interace will be invoked passing an event as argument and the 'this' referece in the function will be the element.
      */
-  removeEvent(type, listener) {
-    this._peer.removeEvent(type, listener);
-  },
+    removeEvent: function (type, listener) {
+        this._peer.removeEvent(type, listener);
+    },
 
-  /**
+    /**
      * /*
      * Returns element type name.
      */
-  getType() {
-    throw new Error(
-      'Not implemeneted yet. This method must be implemented by all the inherited objects.',
-    );
-  },
+    getType: function () {
+        throw new Error(
+            'Not implemeneted yet. This method must be implemented by all the inherited objects.'
+        );
+    },
 
-  /**
+    /**
      * Todo: Doc
      */
-  getFill() {
-    return this._peer.getFill();
-  },
+    getFill: function () {
+        return this._peer.getFill();
+    },
 
-  /**
+    /**
      * Used to define the fill element color and element opacity.
      * color: Fill color
      * opacity: Opacity of the fill. It must be less than 1.
      */
-  setFill(color, opacity) {
-    this._peer.setFill(color, opacity);
-  },
+    setFill: function (color, opacity) {
+        this._peer.setFill(color, opacity);
+    },
 
-  getPosition() {
-    return this._peer.getPosition();
-  },
+    getPosition: function () {
+        return this._peer.getPosition();
+    },
 
-  getNativePosition() {
-    return this._peer.getNativePosition();
-  },
+    getNativePosition: function () {
+        return this._peer.getNativePosition();
+    },
 
-  /*
+    /*
      *  Defines the element stroke properties.
      *  width: stroke width
      *  style: "solid|dot|dash|dashdot|longdash".
      *  color: stroke color
      *  opacity: stroke visibility
      */
-  setStroke(width, style, color, opacity) {
-    if (
-      style != null
-            && style != undefined
-            && style != 'dash'
-            && style != 'dot'
-            && style != 'solid'
-            && style != 'longdash'
-            && style != 'dashdot'
-    ) {
-      throw new Error(`Unsupported stroke style: '${style}'`);
-    }
-    this._peer.setStroke(width, style, color, opacity);
-  },
+    setStroke: function (width, style, color, opacity) {
+        if (
+            style != null &&
+            style != undefined &&
+            style != 'dash' &&
+            style != 'dot' &&
+            style != 'solid' &&
+            style != 'longdash' &&
+            style != 'dashdot'
+        ) {
+            throw new Error("Unsupported stroke style: '" + style + "'");
+        }
+        this._peer.setStroke(width, style, color, opacity);
+    },
 
-  _attributeNameToFuncName(attributeKey, prefix) {
-    const signature = Element._propertyNameToSignature[attributeKey];
-    if (!$defined(signature)) { // eslint-disable-line no-undef
-      throw `Unsupported attribute: ${attributeKey}`;
-    }
+    _attributeNameToFuncName: function (attributeKey, prefix) {
+        var signature = Element._propertyNameToSignature[attributeKey];
+        if (!$defined(signature)) { //eslint-disable-line no-undef
+            throw 'Unsupported attribute: ' + attributeKey;
+        }
 
-    const firstLetter = signature[0].charAt(0);
-    return prefix + firstLetter.toUpperCase() + signature[0].substring(1);
-  },
+        var firstLetter = signature[0].charAt(0);
+        return prefix + firstLetter.toUpperCase() + signature[0].substring(1);
+    },
 
-  /**
+    /**
      * All element properties can be setted using either a method invocation or attribute invocation.
      *  key: size, width, height, position, x, y, stroke, strokeWidth, strokeStyle, strokeColor, strokeOpacity,
      *       fill, fillColor, fillOpacity, coordSize, coordSizeWidth, coordSizeHeight, coordOrigin, coordOriginX, coordOrigiY
      */
-  setAttribute(key, value) {
-    const funcName = this._attributeNameToFuncName(key, 'set');
+    setAttribute: function (key, value) {
+        var funcName = this._attributeNameToFuncName(key, 'set');
 
-    const signature = Element._propertyNameToSignature[key];
-    if (signature == null) {
-      throw `Could not find the signature for:${key}`;
-    }
+        var signature = Element._propertyNameToSignature[key];
+        if (signature == null) {
+            throw 'Could not find the signature for:' + key;
+        }
 
-    // Parse arguments ..
-    const argPositions = signature[1];
-    let args = [];
-    if (argPositions !== this._SIGNATURE_MULTIPLE_ARGUMENTS) {
-      args[argPositions] = value;
-    } else if (typeof value === 'array') { // eslint-disable-line valid-typeof
-      args = value;
-    } else {
-      const strValue = String(value);
-      args = strValue.split(' ');
-    }
+        // Parse arguments ..
+        var argPositions = signature[1];
+        var args = [];
+        if (argPositions !== this._SIGNATURE_MULTIPLE_ARGUMENTS) {
+            args[argPositions] = value;
+        } else if (typeof value == 'array') { //eslint-disable-line valid-typeof
+            args = value;
+        } else {
+            var strValue = String(value);
+            args = strValue.split(' ');
+        }
 
-    // Look up method ...
-    const setter = this[funcName];
-    if (setter == null) {
-      throw `Could not find the function name:${funcName}`;
-    }
-    setter.apply(this, args);
-  },
+        // Look up method ...
+        var setter = this[funcName];
+        if (setter == null) {
+            throw 'Could not find the function name:' + funcName;
+        }
+        setter.apply(this, args);
+    },
 
-  getAttribute(key) {
-    const funcName = this._attributeNameToFuncName(key, 'get');
+    getAttribute: function (key) {
+        var funcName = this._attributeNameToFuncName(key, 'get');
 
-    const signature = Element._propertyNameToSignature[key];
-    if (signature == null) {
-      throw `Could not find the signature for:${key}`;
-    }
+        var signature = Element._propertyNameToSignature[key];
+        if (signature == null) {
+            throw 'Could not find the signature for:' + key;
+        }
 
-    const getter = this[funcName];
-    if (getter == null) {
-      throw `Could not find the function name:${funcName}`;
-    }
+        var getter = this[funcName];
+        if (getter == null) {
+            throw 'Could not find the function name:' + funcName;
+        }
 
-    const getterResult = getter.apply(this, []);
-    const attibuteName = signature[2];
-    if (!$defined(attibuteName)) { // eslint-disable-line no-undef
-      throw `Could not find attribute mapping for:${key}`;
-    }
+        var getterResult = getter.apply(this, []);
+        var attibuteName = signature[2];
+        if (!$defined(attibuteName)) { //eslint-disable-line no-undef
+            throw 'Could not find attribute mapping for:' + key;
+        }
 
-    const result = getterResult[attibuteName];
-    if (!$defined(result)) { // eslint-disable-line no-undef
-      throw `Could not find attribute with name:${attibuteName}`;
-    }
+        var result = getterResult[attibuteName];
+        if (!$defined(result)) { //eslint-disable-line no-undef
+            throw 'Could not find attribute with name:' + attibuteName;
+        }
 
-    return result;
-  },
+        return result;
+    },
 
-  /**
+    /**
      * Defines the element opacity.
      * Parameters:
      *   opacity: A value between 0 and 1.
      */
-  setOpacity(opacity) {
-    this._peer.setStroke(null, null, null, opacity);
-    this._peer.setFill(null, opacity);
-  },
+    setOpacity: function (opacity) {
+        this._peer.setStroke(null, null, null, opacity);
+        this._peer.setFill(null, opacity);
+    },
 
-  setVisibility(isVisible) {
-    this._peer.setVisibility(isVisible);
-  },
+    setVisibility: function (isVisible) {
+        this._peer.setVisibility(isVisible);
+    },
 
-  isVisible() {
-    return this._peer.isVisible();
-  },
+    isVisible: function () {
+        return this._peer.isVisible();
+    },
 
-  /**
+    /**
      * Move the element to the front
      */
-  moveToFront() {
-    this._peer.moveToFront();
-  },
+    moveToFront: function () {
+        this._peer.moveToFront();
+    },
 
-  /**
+    /**
      * Move the element to the back
      */
-  moveToBack() {
-    this._peer.moveToBack();
-  },
+    moveToBack: function () {
+        this._peer.moveToBack();
+    },
 
-  getStroke() {
-    return this._peer.getStroke();
-  },
+    getStroke: function () {
+        return this._peer.getStroke();
+    },
 
-  setCursor(type) {
-    this._peer.setCursor(type);
-  },
+    setCursor: function (type) {
+        this._peer.setCursor(type);
+    },
 
-  getParent() {
-    return this._peer.getParent();
-  },
+    getParent: function () {
+        return this._peer.getParent();
+    }, 
 });
 
 Element._SIGNATURE_MULTIPLE_ARGUMENTS = -1;
 Element._supportedEvents = [
-  'click',
-  'dblclick',
-  'mousemove',
-  'mouseout',
-  'mouseover',
-  'mousedown',
-  'mouseup',
+    'click',
+    'dblclick',
+    'mousemove',
+    'mouseout',
+    'mouseover',
+    'mousedown',
+    'mouseup',
 ];
 Element._propertyNameToSignature = {
-  // Format: [attribute name, argument position on setter, attribute name on getter]
-  size: ['size', -1],
-  width: ['size', 0, 'width'],
-  height: ['size', 1, 'height'],
+    // Format: [attribute name, argument position on setter, attribute name on getter]
+    size: ['size', -1],
+    width: ['size', 0, 'width'],
+    height: ['size', 1, 'height'],
 
-  position: ['position', -1],
-  x: ['position', 0, 'x'],
-  y: ['position', 1, 'y'],
+    position: ['position', -1],
+    x: ['position', 0, 'x'],
+    y: ['position', 1, 'y'],
 
-  stroke: ['stroke', -1],
-  strokeWidth: ['stroke', 0, 'width'],
-  strokeStyle: ['stroke', 1, 'style'],
-  strokeColor: ['stroke', 2, 'color'],
-  strokeOpacity: ['stroke', 3, 'opacity'],
+    stroke: ['stroke', -1],
+    strokeWidth: ['stroke', 0, 'width'],
+    strokeStyle: ['stroke', 1, 'style'],
+    strokeColor: ['stroke', 2, 'color'],
+    strokeOpacity: ['stroke', 3, 'opacity'],
 
-  fill: ['fill', -1],
-  fillColor: ['fill', 0, 'color'],
-  fillOpacity: ['fill', 1, 'opacity'],
+    fill: ['fill', -1],
+    fillColor: ['fill', 0, 'color'],
+    fillOpacity: ['fill', 1, 'opacity'],
 
-  coordSize: ['coordSize', -1],
-  coordSizeWidth: ['coordSize', 0, 'width'],
-  coordSizeHeight: ['coordSize', 1, 'height'],
+    coordSize: ['coordSize', -1],
+    coordSizeWidth: ['coordSize', 0, 'width'],
+    coordSizeHeight: ['coordSize', 1, 'height'],
 
-  coordOrigin: ['coordOrigin', -1],
-  coordOriginX: ['coordOrigin', 0, 'x'],
-  coordOriginY: ['coordOrigin', 1, 'y'],
+    coordOrigin: ['coordOrigin', -1],
+    coordOriginX: ['coordOrigin', 0, 'x'],
+    coordOriginY: ['coordOrigin', 1, 'y'],
 
-  visibility: ['visibility', 0],
-  opacity: ['opacity', 0],
+    visibility: ['visibility', 0],
+    opacity: ['opacity', 0],
 };
 
 export default Element;

packages/web2d/lib/components/Elipse.js

@@ -1,43 +1,41 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Element = require('./Element').default;
-const Toolkit = require('./Toolkit').default;
-
-const Elipse = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.createElipse();
-    const defaultAttributes = {
-      width: 40, height: 40, x: 5, y: 5, stroke: '1 solid black', fillColor: 'blue',
-    };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
-    }
-    this.parent(peer, defaultAttributes);
-  },
-
-  getType() {
-    return 'Elipse';
-  },
-
-  getSize() {
-    return this._peer.getSize();
-  },
-});
-
-export default Elipse;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Element = require('./Element').default;
+const Toolkit = require('./Toolkit').default;
+
+const Elipse = new Class({
+    Extends: Element,
+    initialize: function(attributes) {
+        var peer = Toolkit.createElipse();
+        var defaultAttributes = {width:40, height:40, x:5, y:5,stroke:'1 solid black',fillColor:'blue'};
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+    },
+
+    getType : function() {
+        return "Elipse";
+    },
+
+    getSize : function() {
+        return this._peer.getSize();
+    }
+});
+
+export default Elipse;

packages/web2d/lib/components/Font.js

@@ -1,84 +1,84 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Toolkit = require('./Toolkit');
-const TransformUtil = require('./peer/utils/TransformUtils').default;
-
-const Font = new Class({
-  initialize(fontFamily, textPeer) {
-    const font = `Toolkit.default.create${fontFamily}Font();`;
-    this._peer = eval(font);
-    this._textPeer = textPeer;
-  },
-
-  getHtmlSize() {
-    const scale = TransformUtil.workoutScale(this._textPeer);
-    return this._peer.getHtmlSize(scale);
-  },
-
-  getGraphSize() {
-    const scale = TransformUtil.workoutScale(this._textPeer);
-    return this._peer.getGraphSize(scale);
-  },
-
-  getFontScale() {
-    return TransformUtil.workoutScale(this._textPeer).height;
-  },
-
-  getSize() {
-    return this._peer.getSize();
-  },
-
-  getStyle() {
-    return this._peer.getStyle();
-  },
-
-  getWeight() {
-    return this._peer.getWeight();
-  },
-
-  getFontFamily() {
-    return this._peer.getFontFamily();
-  },
-
-  setSize(size) {
-    return this._peer.setSize(size);
-  },
-
-  setStyle(style) {
-    return this._peer.setStyle(style);
-  },
-
-  setWeight(weight) {
-    return this._peer.setWeight(weight);
-  },
-
-  getFont() {
-    return this._peer.getFont();
-  },
-
-  getWidthMargin() {
-    return this._peer.getWidthMargin();
-  },
-});
-
-Font.ARIAL = 'Arial';
-Font.TIMES = 'Times';
-Font.TAHOMA = 'Tahoma';
-Font.VERDANA = 'Verdana';
-
-export default Font;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Toolkit = require('./Toolkit');
+const TransformUtil = require('./peer/utils/TransformUtils').default;
+
+const Font = new Class({
+    initialize: function (fontFamily, textPeer) { 
+        var font = 'Toolkit.default.create' + fontFamily + 'Font();';
+        this._peer = eval(font);
+        this._textPeer = textPeer;
+    },
+
+    getHtmlSize: function () {
+        var scale = TransformUtil.workoutScale(this._textPeer);
+        return this._peer.getHtmlSize(scale);
+    },
+
+    getGraphSize: function () {
+        var scale = TransformUtil.workoutScale(this._textPeer);
+        return this._peer.getGraphSize(scale);
+    },
+
+    getFontScale: function () {
+        return TransformUtil.workoutScale(this._textPeer).height;
+    },
+
+    getSize: function () {
+        return this._peer.getSize();
+    },
+
+    getStyle: function () {
+        return this._peer.getStyle();
+    },
+
+    getWeight: function () {
+        return this._peer.getWeight();
+    },
+
+    getFontFamily: function () {
+        return this._peer.getFontFamily();
+    },
+
+    setSize: function (size) {
+        return this._peer.setSize(size);
+    },
+
+    setStyle: function (style) {
+        return this._peer.setStyle(style);
+    },
+
+    setWeight: function (weight) {
+        return this._peer.setWeight(weight);
+    },
+
+    getFont: function () {
+        return this._peer.getFont();
+    },
+
+    getWidthMargin: function () {
+        return this._peer.getWidthMargin();
+    },
+});
+
+Font.ARIAL = 'Arial';
+Font.TIMES = 'Times';
+Font.TAHOMA = 'Tahoma';
+Font.VERDANA = 'Verdana';
+
+export default Font;

packages/web2d/lib/components/Group.js

@@ -1,137 +1,136 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Element = require('./Element').default;
-const Toolkit = require('./Toolkit').default;
-
-/**
- * A group object can be used to collect shapes.
- */
-const Group = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.createGroup();
-    const defaultAttributes = {
-      width: 50, height: 50, x: 50, y: 50, coordOrigin: '0 0', coordSize: '50 50',
-    };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
-    }
-    this.parent(peer, defaultAttributes);
-  },
-
-  /**
-     * Remove an element as a child to the object.
-     */
-  removeChild(element) {
-    if (!$defined(element)) {
-      throw 'Child element can not be null';
-    }
-
-    if (element == this) {
-      throw "It's not possible to add the group as a child of itself";
-    }
-
-    const elementType = element.getType();
-    if (elementType == null) {
-      throw `It seems not to be an element ->${element}`;
-    }
-
-    this._peer.removeChild(element._peer);
-  },
-
-  /**
-     * Appends an element as a child to the object.
-     */
-  append(element) {
-    if (!$defined(element)) {
-      throw 'Child element can not be null';
-    }
-
-    if (element == this) {
-      throw "It's not posible to add the group as a child of itself";
-    }
-
-    const elementType = element.getType();
-    if (elementType == null) {
-      throw `It seems not to be an element ->${element}`;
-    }
-
-    if (elementType == 'Workspace') {
-      throw 'A group can not have a workspace as a child';
-    }
-
-    this._peer.append(element._peer);
-  },
-
-  getType() {
-    return 'Group';
-  },
-
-  /**
-     * The group element is a containing blocks for this content - they define a CSS2 "block level box".
-     * Inside the containing block a local coordinate system is defined for any sub-elements using the coordsize and coordorigin attributes.
-     * All CSS2 positioning information is expressed in terms of this local coordinate space.
-     * Consequently CSS2 position attributes (left, top, width, height and so on) have no unit specifier -
-     * they are simple numbers, not CSS length quantities.
-     */
-  setCoordSize(width, height) {
-    this._peer.setCoordSize(width, height);
-  },
-
-  setCoordOrigin(x, y) {
-    this._peer.setCoordOrigin(x, y);
-  },
-
-  getCoordOrigin() {
-    return this._peer.getCoordOrigin();
-  },
-  getSize() {
-    return this._peer.getSize();
-  },
-
-  setFill(color, opacity) {
-    throw 'Unsupported operation. Fill can not be set to a group';
-  },
-
-  setStroke(width, style, color, opacity) {
-    throw 'Unsupported operation. Stroke can not be set to a group';
-  },
-
-  getCoordSize() {
-    return this._peer.getCoordSize();
-  },
-
-  appendDomChild(DomElement) {
-    if (!$defined(DomElement)) {
-      throw 'Child element can not be null';
-    }
-
-    if (DomElement == this) {
-      throw "It's not possible to add the group as a child of itself";
-    }
-
-    this._peer._native.append(DomElement);
-  },
-
-  setOpacity(value) {
-    this._peer.setOpacity(value);
-  },
-
-});
-
-export default Group;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Element = require('./Element').default;
+const Toolkit = require('./Toolkit').default;
+
+/**
+ * A group object can be used to collect shapes.
+ */
+const Group = new Class({
+    Extends: Element,
+    initialize: function (attributes) {
+        var peer = Toolkit.createGroup();
+        var defaultAttributes = {width: 50, height: 50, x: 50, y: 50, coordOrigin: '0 0', coordSize: '50 50'};
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+    },
+
+    /**
+     * Remove an element as a child to the object.
+     */
+    removeChild: function (element) {
+        if (!$defined(element)) {
+            throw "Child element can not be null";
+        }
+
+        if (element == this) {
+            throw "It's not possible to add the group as a child of itself";
+        }
+
+        var elementType = element.getType();
+        if (elementType == null) {
+            throw "It seems not to be an element ->" + element;
+        }
+
+        this._peer.removeChild(element._peer);
+    },
+
+    /**
+     * Appends an element as a child to the object.
+     */
+    append: function (element) {
+        if (!$defined(element)) {
+            throw "Child element can not be null";
+        }
+
+        if (element == this) {
+            throw "It's not posible to add the group as a child of itself";
+        }
+
+        var elementType = element.getType();
+        if (elementType == null) {
+            throw "It seems not to be an element ->" + element;
+        }
+
+        if (elementType == "Workspace") {
+            throw "A group can not have a workspace as a child";
+        }
+
+        this._peer.append(element._peer);
+    },
+
+
+    getType: function () {
+        return "Group";
+    },
+
+    /**
+     * The group element is a containing blocks for this content - they define a CSS2 "block level box".
+     * Inside the containing block a local coordinate system is defined for any sub-elements using the coordsize and coordorigin attributes.
+     * All CSS2 positioning information is expressed in terms of this local coordinate space.
+     * Consequently CSS2 position attributes (left, top, width, height and so on) have no unit specifier -
+     * they are simple numbers, not CSS length quantities.
+     */
+    setCoordSize: function (width, height) {
+        this._peer.setCoordSize(width, height);
+    },
+
+    setCoordOrigin: function (x, y) {
+        this._peer.setCoordOrigin(x, y);
+    },
+
+    getCoordOrigin: function () {
+        return this._peer.getCoordOrigin();
+    },
+    getSize: function () {
+        return this._peer.getSize();
+    },
+
+    setFill: function (color, opacity) {
+        throw "Unsupported operation. Fill can not be set to a group";
+    },
+
+    setStroke: function (width, style, color, opacity) {
+        throw "Unsupported operation. Stroke can not be set to a group";
+    },
+
+    getCoordSize: function () {
+        return this._peer.getCoordSize();
+    },
+
+    appendDomChild: function (DomElement) {
+        if (!$defined(DomElement)) {
+            throw "Child element can not be null";
+        }
+
+        if (DomElement == this) {
+            throw "It's not possible to add the group as a child of itself";
+        }
+
+        this._peer._native.append(DomElement);
+    },
+
+    setOpacity: function (value) {
+        this._peer.setOpacity(value);
+    }
+
+});
+
+export default Group;

packages/web2d/lib/components/Image.js

@@ -19,27 +19,27 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit').default;
 
 const Image = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.createImage();
-    this.parent(peer, attributes);
-  },
+    Extends: Element,
+    initialize : function(attributes) {
+        var peer = Toolkit.createImage();
+        this.parent(peer, attributes);
+    },
 
-  getType() {
-    return 'Image';
-  },
+    getType : function() {
+        return "Image";
+    },
 
-  setHref(href) {
-    this._peer.setHref(href);
-  },
+    setHref : function(href) {
+        this._peer.setHref(href);
+    },
 
-  getHref() {
-    return this._peer.getHref();
-  },
+    getHref : function() {
+        return this._peer.getHref();
+    },
 
-  getSize() {
-    return this._peer.getSize();
-  },
+    getSize : function() {
+        return this._peer.getSize();
+    }
 });
 
 export default Image;

packages/web2d/lib/components/Line.js

@@ -1,73 +1,73 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Element = require('./Element').default;
-const Toolkit = require('./Toolkit').default;
-
-const Line = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.createLine();
-    const defaultAttributes = { strokeColor: '#495879', strokeWidth: 1, strokeOpacity: 1 };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
-    }
-    this.parent(peer, defaultAttributes);
-  },
-
-  getType() {
-    return 'Line';
-  },
-
-  setFrom(x, y) {
-    this._peer.setFrom(x, y);
-  },
-
-  setTo(x, y) {
-    this._peer.setTo(x, y);
-  },
-
-  getFrom() {
-    return this._peer.getFrom();
-  },
-
-  getTo() {
-    return this._peer.getTo();
-  },
-
-  /**
-     * Defines the start and the end line arrow style.
-     * Can have values "none | block | classic | diamond | oval | open | chevron | doublechevron"
-     * */
-  setArrowStyle(startStyle, endStyle) {
-    this._peer.setArrowStyle(startStyle, endStyle);
-  },
-
-  setPosition(cx, cy) {
-    throw 'Unsupported operation';
-  },
-
-  setSize(width, height) {
-    throw 'Unsupported operation';
-  },
-
-  setFill(color, opacity) {
-    throw 'Unsupported operation';
-  },
-});
-
-export default Line;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Element = require('./Element').default;
+const Toolkit = require('./Toolkit').default;
+
+const Line = new Class({
+    Extends: Element,
+    initialize: function(attributes) {
+        var peer = Toolkit.createLine();
+        var defaultAttributes = {strokeColor:'#495879',strokeWidth:1, strokeOpacity:1};
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+    },
+
+    getType : function() {
+        return "Line";
+    },
+
+    setFrom : function(x, y) {
+        this._peer.setFrom(x, y);
+    },
+
+    setTo : function(x, y) {
+        this._peer.setTo(x, y);
+    },
+
+    getFrom : function() {
+        return this._peer.getFrom();
+    },
+
+    getTo : function() {
+        return this._peer.getTo();
+    },
+
+    /**
+     * Defines the start and the end line arrow style.
+     * Can have values "none | block | classic | diamond | oval | open | chevron | doublechevron"
+     **/
+    setArrowStyle : function(startStyle, endStyle) {
+        this._peer.setArrowStyle(startStyle, endStyle);
+    },
+
+    setPosition : function(cx, cy) {
+        throw "Unsupported operation";
+    },
+
+    setSize : function(width, height) {
+        throw "Unsupported operation";
+    },
+
+    setFill : function(color, opacity) {
+        throw "Unsupported operation";
+    }
+});
+
+export default Line;

packages/web2d/lib/components/Point.js

@@ -1,52 +1,53 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-
-core.Point = new Class({
-  /**
-     * @constructs
-     * @param {Number} x coordinate
-     * @param {Number} y coordinate
-     */
-  initialize(x, y) {
-    this.x = x;
-    this.y = y;
-  },
-
-  /**
-     * @param {Number} x coordinate
-     * @param {Number} y coordinate
-     */
-  setValue(x, y) {
-    this.x = x;
-    this.y = y;
-  },
-
-  inspect() {
-    return `{x:${this.x},y:${this.y}}`;
-  },
-
-  clone() {
-    return new core.Point(this.x, this.y);
-  },
-
-});
-
-core.Point.fromString = function (point) {
-  const values = point.split(',');
-  return new core.Point(values[0], values[1]);
-};
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+core.Point = new Class({
+    /**
+     * @constructs
+     * @param {Number} x coordinate
+     * @param {Number} y coordinate
+     */
+    initialize: function (x, y) {
+        this.x = x;
+        this.y = y;
+    },
+
+    /**
+     * @param {Number} x coordinate
+     * @param {Number} y coordinate
+     */
+    setValue: function (x, y) {
+        this.x = x;
+        this.y = y;
+    },
+
+    inspect: function () {
+        return "{x:" + this.x + ",y:" + this.y + "}";
+    },
+
+    clone: function () {
+        return new core.Point(this.x, this.y);
+    }
+
+});
+
+core.Point.fromString = function (point) {
+    var values = point.split(',');
+    return new core.Point(values[0], values[1]);
+
+};

packages/web2d/lib/components/PolyLine.js

@@ -1,81 +1,79 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Element = require('./Element').default;
-const Toolkit = require('./Toolkit');
-
-const PolyLine = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.default.createPolyLine();
-    const defaultAttributes = {
-      strokeColor: 'blue', strokeWidth: 1, strokeStyle: 'solid', strokeOpacity: 1,
-    };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
-    }
-    this.parent(peer, defaultAttributes);
-  },
-
-  getType() {
-    return 'PolyLine';
-  },
-
-  setFrom(x, y) {
-    this._peer.setFrom(x, y);
-  },
-
-  setTo(x, y) {
-    this._peer.setTo(x, y);
-  },
-
-  setStyle(style) {
-    this._peer.setStyle(style);
-  },
-
-  getStyle() {
-    return this._peer.getStyle();
-  },
-
-  buildCurvedPath(dist, x1, y1, x2, y2) {
-    let signx = 1;
-    let signy = 1;
-    if (x2 < x1) {
-      signx = -1;
-    }
-    if (y2 < y1) {
-      signy = -1;
-    }
-
-    let path;
-    if (Math.abs(y1 - y2) > 2) {
-      const middlex = x1 + ((x2 - x1 > 0) ? dist : -dist);
-      path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${middlex.toFixed(1)}, ${y1.toFixed(1)} ${middlex.toFixed(1)}, ${(y2 - 5 * signy).toFixed(1)} ${(middlex + 5 * signx).toFixed(1)}, ${y2.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
-    } else {
-      path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
-    }
-
-    return path;
-  },
-
-  buildStraightPath(dist, x1, y1, x2, y2) {
-    const middlex = x1 + ((x2 - x1 > 0) ? dist : -dist);
-    return `${x1}, ${y1} ${middlex}, ${y1} ${middlex}, ${y2} ${x2}, ${y2}`;
-  },
-});
-
-export default PolyLine;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Element = require('./Element').default;
+const Toolkit = require('./Toolkit');
+
+const PolyLine = new Class({
+    Extends: Element,
+    initialize:function(attributes) {
+        var peer = Toolkit.default.createPolyLine();
+        var defaultAttributes = {strokeColor:'blue',strokeWidth:1,strokeStyle:'solid',strokeOpacity:1};
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+    },
+
+    getType : function() {
+        return "PolyLine";
+    },
+
+    setFrom : function(x, y) {
+        this._peer.setFrom(x, y);
+    },
+
+    setTo : function(x, y) {
+        this._peer.setTo(x, y);
+    },
+
+    setStyle : function(style) {
+        this._peer.setStyle(style);
+    },
+
+    getStyle : function() {
+        return this._peer.getStyle();
+    },
+
+    buildCurvedPath : function(dist, x1, y1, x2, y2) {
+        var signx = 1;
+        var signy = 1;
+        if (x2 < x1) {
+            signx = -1;
+        }
+        if (y2 < y1) {
+            signy = -1;
+        }
+
+        var path;
+        if (Math.abs(y1 - y2) > 2) {
+            var middlex = x1 + ((x2 - x1 > 0) ? dist : -dist);
+            path = x1.toFixed(1) + ", " + y1.toFixed(1) + " " + middlex.toFixed(1) + ", " + y1.toFixed(1) + " " + middlex.toFixed(1) + ", " + (y2 - 5 * signy).toFixed(1) + " " + (middlex + 5 * signx).toFixed(1) + ", " + y2.toFixed(1) + " " + x2.toFixed(1) + ", " + y2.toFixed(1);
+        } else {
+            path = x1.toFixed(1) + ", " + y1.toFixed(1) + " " + x2.toFixed(1) + ", " + y2.toFixed(1);
+        }
+
+        return path;
+    },
+
+    buildStraightPath : function(dist, x1, y1, x2, y2) {
+        var middlex = x1 + ((x2 - x1 > 0) ? dist : -dist);
+        return  x1 + ", " + y1 + " " + middlex + ", " + y1 + " " + middlex + ", " + y2 + " " + x2 + ", " + y2;
+    }
+});
+
+export default PolyLine;

packages/web2d/lib/components/Rect.js

@@ -1,57 +1,55 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Element = require('./Element').default;
-const Toolkit = require('./Toolkit').default;
-
-/**
- * Create a rectangle and variations of a rectangle shape.
- * arc must be specified to create rounded rectangles.
- * arc = "<length>"
- *     For rounded rectangles, radius of the ellipse used to round off the corners of the rectangle.
- */
-const Rect = new Class({
-  Extends: Element,
-  initialize(arc, attributes) {
-    if (arc && arc > 1) {
-      throw 'Arc must be 0<=arc<=1';
-    }
-    if (arguments.length <= 0) {
-      const rx = 0;
-      const ry = 0;
-    }
-
-    const peer = Toolkit.createRect(arc);
-    const defaultAttributes = {
-      width: 40, height: 40, x: 5, y: 5, stroke: '1 solid black', fillColor: 'green',
-    };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
-    }
-    this.parent(peer, defaultAttributes);
-  },
-
-  getType() {
-    return 'Rect';
-  },
-
-  getSize() {
-    return this._peer.getSize();
-  },
-});
-
-export default Rect;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Element = require('./Element').default;
+const Toolkit = require('./Toolkit').default;
+
+/**
+ * Create a rectangle and variations of a rectangle shape.
+ * arc must be specified to create rounded rectangles.
+ * arc = "<length>"
+ *     For rounded rectangles, radius of the ellipse used to round off the corners of the rectangle.
+ */
+const Rect = new Class({
+    Extends: Element,
+    initialize : function(arc, attributes) {
+        if (arc && arc > 1) {
+            throw "Arc must be 0<=arc<=1";
+        }
+        if (arguments.length <= 0) {
+            var rx = 0;
+            var ry = 0;
+        }
+
+        var peer = Toolkit.createRect(arc);
+        var defaultAttributes = {width:40, height:40, x:5, y:5,stroke:'1 solid black',fillColor:'green'};
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+    },
+
+    getType : function() {
+        return "Rect";
+    },
+
+    getSize : function() {
+        return this._peer.getSize();
+    }
+});
+
+export default Rect;

packages/web2d/lib/components/Text.js

@@ -1,99 +1,99 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Element = require('./Element').default;
-const Toolkit = require('./Toolkit');
-
-const Text = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    const peer = Toolkit.default.createText();
-    this.parent(peer, attributes);
-  },
-
-  getType() {
-    return 'Text';
-  },
-
-  setText(text) {
-    this._peer.setText(text);
-  },
-
-  setTextAlignment(align) {
-    $assert(align, 'align can not be null');
-    this._peer.setTextAlignment(align);
-  },
-
-  setTextSize(width, height) {
-    this._peer.setContentSize(width, height);
-  },
-
-  getText() {
-    return this._peer.getText();
-  },
-
-  setFont(font, size, style, weight) {
-    this._peer.setFont(font, size, style, weight);
-  },
-
-  setColor(color) {
-    this._peer.setColor(color);
-  },
-
-  getColor() {
-    return this._peer.getColor();
-  },
-
-  setStyle(style) {
-    this._peer.setStyle(style);
-  },
-
-  setWeight(weight) {
-    this._peer.setWeight(weight);
-  },
-
-  setFontFamily(family) {
-    this._peer.setFontFamily(family);
-  },
-
-  getFont() {
-    return this._peer.getFont();
-  },
-
-  setSize(size) {
-    this._peer.setSize(size);
-  },
-
-  getHtmlFontSize() {
-    return this._peer.getHtmlFontSize();
-  },
-
-  getWidth() {
-    return this._peer.getWidth();
-  },
-
-  getHeight() {
-    return parseInt(this._peer.getHeight());
-  },
-
-  getFontHeight() {
-    const lines = this._peer.getText().split('\n').length;
-    return Math.round(this.getHeight() / lines);
-  },
-});
-
-export default Text;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Element = require('./Element').default;
+const Toolkit = require('./Toolkit');
+
+const Text = new Class({
+    Extends: Element,
+    initialize:function(attributes) {
+        var peer = Toolkit.default.createText();
+        this.parent(peer, attributes);
+    },
+
+    getType  : function() {
+        return "Text";
+    },
+
+    setText  : function(text) {
+        this._peer.setText(text);
+    },
+
+    setTextAlignment : function(align) {
+        $assert(align, "align can not be null");
+        this._peer.setTextAlignment(align);
+    },
+
+    setTextSize  : function(width, height) {
+        this._peer.setContentSize(width, height);
+    },
+
+    getText  : function() {
+        return this._peer.getText();
+    },
+
+    setFont  : function(font, size, style, weight) {
+        this._peer.setFont(font, size, style, weight);
+    },
+
+    setColor  : function(color) {
+        this._peer.setColor(color);
+    },
+
+    getColor  : function() {
+        return this._peer.getColor();
+    },
+
+    setStyle  : function(style) {
+        this._peer.setStyle(style);
+    },
+
+    setWeight  : function(weight) {
+        this._peer.setWeight(weight);
+    },
+
+    setFontFamily  : function(family) {
+        this._peer.setFontFamily(family);
+    },
+
+    getFont  : function() {
+        return this._peer.getFont();
+    },
+
+    setSize  : function(size) {
+        this._peer.setSize(size);
+    },
+
+    getHtmlFontSize  : function() {
+        return this._peer.getHtmlFontSize();
+    },
+
+    getWidth  : function() {
+        return this._peer.getWidth();
+    },
+
+    getHeight  : function() {
+        return parseInt(this._peer.getHeight());
+    },
+
+    getFontHeight : function() {
+        var lines = this._peer.getText().split('\n').length;
+        return Math.round(this.getHeight() / lines);
+    }
+});
+
+export default Text;

packages/web2d/lib/components/Toolkit.js

@@ -1,81 +1,97 @@
-/*
-*    Copyright [2015] [wisemapping]
-*
-*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
-*   It is basically the Apache License, Version 2.0 (the "License") plus the
-*   "powered by wisemapping" text requirement on every single page;
-*   you may not use this file except in compliance with the License.
-*   You may obtain a copy of the license at
-*
-*       http://www.wisemapping.org/license
-*
-*   Unless required by applicable law or agreed to in writing, software
-*   distributed under the License is distributed on an "AS IS" BASIS,
-*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-*   See the License for the specific language governing permissions and
-*   limitations under the License.
- */
-const WorkspacePeer = require('./peer/svg/WorkspacePeer').default;
-const GroupPeer = require('./peer/svg/GroupPeer').default;
-const ElipsePeer = require('./peer/svg/ElipsePeer').default;
-const LinePeer = require('./peer/svg/LinePeer').default;
-const PolyLinePeer = require('./peer/svg/PolyLinePeer').default;
-const CurvedLinePeer = require('./peer/svg/CurvedLinePeer').default;
-const ArrowPeer = require('./peer/svg/ArrowPeer').default;
-const TextPeer = require('./peer/svg/TextPeer').default;
-const ImagePeer = require('./peer/svg/ImagePeer').default;
-const RectPeer = require('./peer/svg/RectPeer').default;
-const ArialFont = require('./peer/svg/ArialFont').default;
-const TimesFont = require('./peer/svg/TimesFont').default;
-const VerdanaFont = require('./peer/svg/VerdanaFont').default;
-const TahomaFont = require('./peer/svg/TahomaFont').default;
-
-const ToolkitSVG = {
-  init() {
-  },
-  createWorkspace(element) {
-    return new WorkspacePeer(element);
-  },
-  createGroup(element) {
-    return new GroupPeer();
-  },
-  createElipse() {
-    return new ElipsePeer();
-  },
-  createLine() {
-    return new LinePeer();
-  },
-  createPolyLine() {
-    return new PolyLinePeer();
-  },
-  createCurvedLine() {
-    return new CurvedLinePeer();
-  },
-  createArrow() {
-    return new ArrowPeer();
-  },
-  createText() {
-    return new TextPeer();
-  },
-  createImage() {
-    return new ImagePeer();
-  },
-  createRect(arc) {
-    return new RectPeer(arc);
-  },
-  createArialFont() {
-    return new ArialFont();
-  },
-  createTimesFont() {
-    return new TimesFont();
-  },
-  createVerdanaFont() {
-    return new VerdanaFont();
-  },
-  createTahomaFont() {
-    return new TahomaFont();
-  },
-};
-
-const Toolkit = ToolkitSVG;
-export default Toolkit;
+/*
+*    Copyright [2015] [wisemapping]
+*
+*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+*   It is basically the Apache License, Version 2.0 (the "License") plus the
+*   "powered by wisemapping" text requirement on every single page;
+*   you may not use this file except in compliance with the License.
+*   You may obtain a copy of the license at
+*
+*       http://www.wisemapping.org/license
+*
+*   Unless required by applicable law or agreed to in writing, software
+*   distributed under the License is distributed on an "AS IS" BASIS,
+*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*   See the License for the specific language governing permissions and
+*   limitations under the License.
+ */
+const WorkspacePeer = require('./peer/svg/WorkspacePeer').default
+const GroupPeer = require('./peer/svg/GroupPeer').default
+const ElipsePeer = require('./peer/svg/ElipsePeer').default
+const LinePeer = require('./peer/svg/LinePeer').default
+const PolyLinePeer = require('./peer/svg/PolyLinePeer').default
+const CurvedLinePeer = require('./peer/svg/CurvedLinePeer').default
+const ArrowPeer = require('./peer/svg/ArrowPeer').default
+const TextPeer = require('./peer/svg/TextPeer').default
+const ImagePeer = require('./peer/svg/ImagePeer').default
+const RectPeer = require('./peer/svg/RectPeer').default
+const ArialFont = require('./peer/svg/ArialFont').default
+const TimesFont = require('./peer/svg/TimesFont').default
+const VerdanaFont = require('./peer/svg/VerdanaFont').default
+const TahomaFont = require('./peer/svg/TahomaFont').default
+
+const ToolkitSVG =
+{
+    init: function()
+    {
+    },
+    createWorkspace: function(element)
+    {
+        return new WorkspacePeer(element);
+    },
+    createGroup: function(element)
+    {
+        return new GroupPeer();
+    },
+    createElipse: function()
+    {
+        return new ElipsePeer();
+    },
+    createLine: function()
+    {
+        return new LinePeer();
+    },
+    createPolyLine: function()
+    {
+        return new PolyLinePeer();
+    },
+    createCurvedLine: function()
+    {
+        return new CurvedLinePeer();
+    },
+    createArrow: function()
+    {
+        return new ArrowPeer();
+    },
+    createText: function ()
+    {
+        return new TextPeer();
+    },
+    createImage: function ()
+    {
+        return new ImagePeer();
+    },
+    createRect: function(arc)
+    {
+        return new RectPeer(arc);
+    },
+    createArialFont: function()
+    {
+        return new ArialFont();
+    },
+    createTimesFont: function()
+    {
+        return new TimesFont();
+    },
+    createVerdanaFont: function()
+    {
+        return new VerdanaFont();
+    },
+    createTahomaFont: function()
+    {
+        return new TahomaFont();
+    }
+};
+
+const Toolkit = ToolkitSVG;
+export default Toolkit;

packages/web2d/lib/components/Workspace.js

@@ -1,200 +1,200 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const Element = require('./Element').default;
-const Toolkit = require('./Toolkit').default;
-
-const Workspace = new Class({
-  Extends: Element,
-  initialize(attributes) {
-    this._htmlContainer = this._createDivContainer();
-
-    const peer = Toolkit.createWorkspace(this._htmlContainer);
-    const defaultAttributes = {
-      width: '200px',
-      height: '200px',
-      stroke: '1px solid #edf1be',
-      fillColor: 'white',
-      coordOrigin: '0 0',
-      coordSize: '200 200',
-    };
-    for (const key in attributes) {
-      defaultAttributes[key] = attributes[key];
-    }
-    this.parent(peer, defaultAttributes);
-    this._htmlContainer.append(this._peer._native);
-  },
-
-  getType() {
-    return 'Workspace';
-  },
-
-  /**
-     * Appends an element as a child to the object.
-     */
-  append(element) {
-    if (!$defined(element)) {
-      throw 'Child element can not be null';
-    }
-    const elementType = element.getType();
-    if (elementType == null) {
-      throw `It seems not to be an element ->${element}`;
-    }
-
-    if (elementType == 'Workspace') {
-      throw 'A workspace can not have a workspace as a child';
-    }
-
-    this._peer.append(element._peer);
-  },
-
-  addItAsChildTo(element) {
-    if (!$defined(element)) {
-      throw 'Workspace div container can not be null';
-    }
-    element.append(this._htmlContainer);
-  },
-
-  /**
-     * Create a new div element that will be responsible for containing the workspace elements.
-     */
-  _createDivContainer() {
-    const container = window.document.createElement('div');
-    container.id = 'workspaceContainer';
-    //        container.style.overflow = "hidden";
-    container.style.position = 'relative';
-    container.style.top = '0px';
-    container.style.left = '0px';
-    container.style.height = '688px';
-    container.style.border = '1px solid red';
-
-    return $(container);
-  },
-
-  /**
-     *  Set the workspace area size. It can be defined using different units:
-     * in (inches; 1in=2.54cm)
-     * cm (centimeters; 1cm=10mm)
-     * mm (millimeters)
-     * pt (points; 1pt=1/72in)
-     * pc (picas; 1pc=12pt)
-     */
-  setSize(width, height) {
-    // HTML container must have the size of the group element.
-    if ($defined(width)) {
-      this._htmlContainer.css('width', width);
-    }
-
-    if ($defined(height)) {
-      this._htmlContainer.css('height', height);
-    }
-    this._peer.setSize(width, height);
-  },
-
-  /**
-     * The workspace element is a containing blocks for this content - they define a CSS2 "block level box".
-     * Inside the containing block a local coordinate system is defined for any sub-elements using the coordsize and coordorigin attributes.
-     * All CSS2 positioning information is expressed in terms of this local coordinate space.
-     * Consequently CSS2 position attributes (left, top, width, height and so on) have no unit specifier -
-     * they are simple numbers, not CSS length quantities.
-     */
-  setCoordSize(width, height) {
-    this._peer.setCoordSize(width, height);
-  },
-
-  /**
-     * @Todo: Complete Doc
-     */
-  setCoordOrigin(x, y) {
-    this._peer.setCoordOrigin(x, y);
-  },
-
-  /**
-     * @Todo: Complete Doc
-     */
-  getCoordOrigin() {
-    return this._peer.getCoordOrigin();
-  },
-
-  // Private method declaration area
-  /**
-     * All the SVG elements will be children of this HTML element.
-     */
-  _getHtmlContainer() {
-    return this._htmlContainer;
-  },
-
-  setFill(color, opacity) {
-    this._htmlContainer.css('background-color', color);
-    if (opacity || opacity === 0) {
-      throw 'Unsupported operation. Opacity not supported.';
-    }
-  },
-
-  getFill() {
-    const color = this._htmlContainer.css('background-color');
-    return { color };
-  },
-
-  getSize() {
-    const width = this._htmlContainer.css('width');
-    const height = this._htmlContainer.css('height');
-    return { width, height };
-  },
-
-  setStroke(width, style, color, opacity) {
-    if (style != 'solid') {
-      throw `Not supported style stroke style:${style}`;
-    }
-    this._htmlContainer.css('border', `${width} ${style} ${color}`);
-
-    if (opacity || opacity === 0) {
-      throw 'Unsupported operation. Opacity not supported.';
-    }
-  },
-
-  getCoordSize() {
-    return this._peer.getCoordSize();
-  },
-
-  /**
-     * Remove an element as a child to the object.
-     */
-  removeChild(element) {
-    if (!$defined(element)) {
-      throw 'Child element can not be null';
-    }
-
-    if (element == this) {
-      throw "It's not possible to add the group as a child of itself";
-    }
-
-    const elementType = element.getType();
-    if (elementType == null) {
-      throw `It seems not to be an element ->${element}`;
-    }
-
-    this._peer.removeChild(element._peer);
-  },
-
-  dumpNativeChart() {
-    const elem = this._htmlContainer;
-    return elem.innerHTML;
-  },
-});
-
-export default Workspace;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const Element = require('./Element').default;
+const Toolkit = require('./Toolkit').default;
+
+const Workspace = new Class({
+    Extends: Element,
+    initialize: function (attributes) {
+        this._htmlContainer = this._createDivContainer();
+
+        var peer = Toolkit.createWorkspace(this._htmlContainer);
+        var defaultAttributes = {
+            width: '200px',
+            height: '200px',
+            stroke: '1px solid #edf1be',
+            fillColor: 'white',
+            coordOrigin: '0 0',
+            coordSize: '200 200',
+        };
+        for (var key in attributes) {
+            defaultAttributes[key] = attributes[key];
+        }
+        this.parent(peer, defaultAttributes);
+        this._htmlContainer.append(this._peer._native);
+    },
+
+    getType: function () {
+        return 'Workspace';
+    },
+
+    /**
+     * Appends an element as a child to the object.
+     */
+    append: function (element) {
+        if (!$defined(element)) {
+            throw 'Child element can not be null';
+        }
+        var elementType = element.getType();
+        if (elementType == null) {
+            throw 'It seems not to be an element ->' + element;
+        }
+
+        if (elementType == 'Workspace') {
+            throw 'A workspace can not have a workspace as a child';
+        }
+
+        this._peer.append(element._peer);
+    },
+
+    addItAsChildTo: function (element) {
+        if (!$defined(element)) {
+            throw 'Workspace div container can not be null';
+        }
+        element.append(this._htmlContainer);
+    },
+
+    /**
+     * Create a new div element that will be responsible for containing the workspace elements.
+     */
+    _createDivContainer: function () {
+        var container = window.document.createElement('div');
+        container.id = 'workspaceContainer';
+        //        container.style.overflow = "hidden";
+        container.style.position = 'relative';
+        container.style.top = '0px';
+        container.style.left = '0px';
+        container.style.height = '688px';
+        container.style.border = '1px solid red';
+
+        return $(container);
+    },
+
+    /**
+     *  Set the workspace area size. It can be defined using different units:
+     * in (inches; 1in=2.54cm)
+     * cm (centimeters; 1cm=10mm)
+     * mm (millimeters)
+     * pt (points; 1pt=1/72in)
+     * pc (picas; 1pc=12pt)
+     */
+    setSize: function (width, height) {
+        // HTML container must have the size of the group element.
+        if ($defined(width)) {
+            this._htmlContainer.css('width', width);
+        }
+
+        if ($defined(height)) {
+            this._htmlContainer.css('height', height);
+        }
+        this._peer.setSize(width, height);
+    },
+
+    /**
+     * The workspace element is a containing blocks for this content - they define a CSS2 "block level box".
+     * Inside the containing block a local coordinate system is defined for any sub-elements using the coordsize and coordorigin attributes.
+     * All CSS2 positioning information is expressed in terms of this local coordinate space.
+     * Consequently CSS2 position attributes (left, top, width, height and so on) have no unit specifier -
+     * they are simple numbers, not CSS length quantities.
+     */
+    setCoordSize: function (width, height) {
+        this._peer.setCoordSize(width, height);
+    },
+
+    /**
+     * @Todo: Complete Doc
+     */
+    setCoordOrigin: function (x, y) {
+        this._peer.setCoordOrigin(x, y);
+    },
+
+    /**
+     * @Todo: Complete Doc
+     */
+    getCoordOrigin: function () {
+        return this._peer.getCoordOrigin();
+    },
+
+    // Private method declaration area
+    /**
+     * All the SVG elements will be children of this HTML element.
+     */
+    _getHtmlContainer: function () {
+        return this._htmlContainer;
+    },
+
+    setFill: function (color, opacity) {
+        this._htmlContainer.css('background-color', color);
+        if (opacity || opacity === 0) {
+            throw 'Unsupported operation. Opacity not supported.';
+        }
+    },
+
+    getFill: function () {
+        var color = this._htmlContainer.css('background-color');
+        return { color: color };
+    },
+
+    getSize: function () {
+        var width = this._htmlContainer.css('width');
+        var height = this._htmlContainer.css('height');
+        return { width: width, height: height };
+    },
+
+    setStroke: function (width, style, color, opacity) {
+        if (style != 'solid') {
+            throw 'Not supported style stroke style:' + style;
+        }
+        this._htmlContainer.css('border', width + ' ' + style + ' ' + color);
+
+        if (opacity || opacity === 0) {
+            throw 'Unsupported operation. Opacity not supported.';
+        }
+    },
+
+    getCoordSize: function () {
+        return this._peer.getCoordSize();
+    },
+
+    /**
+     * Remove an element as a child to the object.
+     */
+    removeChild: function (element) {
+        if (!$defined(element)) {
+            throw 'Child element can not be null';
+        }
+
+        if (element == this) {
+            throw "It's not possible to add the group as a child of itself";
+        }
+
+        var elementType = element.getType();
+        if (elementType == null) {
+            throw 'It seems not to be an element ->' + element;
+        }
+
+        this._peer.removeChild(element._peer);
+    },
+
+    dumpNativeChart: function () {
+        var elem = this._htmlContainer;
+        return elem.innerHTML;
+    },
+});
+
+export default Workspace;

packages/web2d/lib/components/header.js

@@ -0,0 +1,24 @@
+/*
+*    Copyright [2015] [wisemapping]
+*
+*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+*   It is basically the Apache License, Version 2.0 (the "License") plus the
+*   "powered by wisemapping" text requirement on every single page;
+*   you may not use this file except in compliance with the License.
+*   You may obtain a copy of the license at
+*
+*       http://www.wisemapping.org/license
+*
+*   Unless required by applicable law or agreed to in writing, software
+*   distributed under the License is distributed on an "AS IS" BASIS,
+*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*   See the License for the specific language governing permissions and
+*   limitations under the License.
+*/
+
+var web2d = {};
+web2d.peer =
+{
+svg: {}
+};
+web2d.peer.utils = {};

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

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

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

@@ -16,83 +16,85 @@
  *   limitations under the License.
  */
 
-const ElementPeer = require('./ElementPeer').default;
+const ElementPeer = require('./ElementPeer').default
 
 const ArrowPeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
-    this.parent(svgElement);
-    this._style = {};
-    this._controlPoint = new core.Point();
-    this._fromPoint = new core.Point();
-  },
+    Extends: ElementPeer,
+    initialize : function() {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'path');
+        this.parent(svgElement);
+        this._style = {};
+        this._controlPoint = new core.Point();
+        this._fromPoint = new core.Point();
+    },
 
-  setFrom(x, y) {
-    this._fromPoint.x = x;
-    this._fromPoint.y = y;
-    this._redraw();
-  },
+    setFrom : function(x, y) {
+        this._fromPoint.x = x;
+        this._fromPoint.y = y;
+        this._redraw();
+    },
 
-  setControlPoint(point) {
-    this._controlPoint = point;
-    this._redraw();
-  },
+    setControlPoint : function (point) {
+        this._controlPoint = point;
+        this._redraw();
+    },
 
-  setStrokeColor(color) {
-    this.setStroke(null, null, color, null);
-  },
+    setStrokeColor : function (color) {
+        this.setStroke(null, null, color, null);
+    },
 
-  setStrokeWidth(width) {
-    this.setStroke(width);
-  },
+    setStrokeWidth : function(width) {
+        this.setStroke(width);
+    },
 
-  setDashed(isDashed, length, spacing) {
-    if ($defined(isDashed) && isDashed && $defined(length) && $defined(spacing)) {
-      this._native.setAttribute('stroke-dasharray', `${length},${spacing}`);
-    } else {
-      this._native.setAttribute('stroke-dasharray', '');
+    setDashed : function(isDashed, length, spacing) {
+        if ($defined(isDashed) && isDashed && $defined(length) && $defined(spacing)) {
+            this._native.setAttribute("stroke-dasharray", length + "," + spacing);
+        } else {
+            this._native.setAttribute("stroke-dasharray", "");
+        }
+    },
+
+    _updateStyle : function() {
+        var style = "";
+        for (var key in this._style) {
+            style += key + ":" + this._style[key] + " ";
+        }
+        this._native.setAttribute("style", style);
+    },
+
+    _redraw : function() {
+        var x,y, xp, yp;
+        if ($defined(this._fromPoint.x) && $defined(this._fromPoint.y) && $defined(this._controlPoint.x) && $defined(this._controlPoint.y)) {
+
+            if (this._controlPoint.y == 0)
+                this._controlPoint.y = 1;
+
+            var y0 = this._controlPoint.y;
+            var x0 = this._controlPoint.x;
+            var x2 = x0 + y0;
+            var y2 = y0 - x0;
+            var x3 = x0 - y0;
+            var y3 = y0 + x0;
+            var m = y2 / x2;
+            var mp = y3 / x3;
+            var l = 6;
+            var pow = Math.pow;
+            x = (x2 == 0 ? 0 : Math.sqrt(pow(l, 2) / (1 + pow(m, 2))));
+            x *= Math.sign(x2);
+            y = (x2 == 0 ? l * Math.sign(y2) : m * x);
+            xp = (x3 == 0 ? 0 : Math.sqrt(pow(l, 2) / (1 + pow(mp, 2))));
+            xp *= Math.sign(x3);
+            yp = (x3 == 0 ? l * Math.sign(y3) : mp * xp);
+
+            var path = "M" + this._fromPoint.x + "," + this._fromPoint.y + " "
+                + "L" + (x + this._fromPoint.x) + "," + (y + this._fromPoint.y)
+                + "M" + this._fromPoint.x + "," + this._fromPoint.y + " "
+                + "L" + (xp + this._fromPoint.x) + "," + (yp + this._fromPoint.y)
+                ;
+            this._native.setAttribute("d", path);
+        }
     }
-  },
-
-  _updateStyle() {
-    let style = '';
-    for (const key in this._style) {
-      style += `${key}:${this._style[key]} `;
-    }
-    this._native.setAttribute('style', style);
-  },
-
-  _redraw() {
-    let x; let y; let xp; let
-      yp;
-    if ($defined(this._fromPoint.x) && $defined(this._fromPoint.y) && $defined(this._controlPoint.x) && $defined(this._controlPoint.y)) {
-      if (this._controlPoint.y == 0) this._controlPoint.y = 1;
-
-      const y0 = this._controlPoint.y;
-      const x0 = this._controlPoint.x;
-      const x2 = x0 + y0;
-      const y2 = y0 - x0;
-      const x3 = x0 - y0;
-      const y3 = y0 + x0;
-      const m = y2 / x2;
-      const mp = y3 / x3;
-      const l = 6;
-      const { pow } = Math;
-      x = (x2 == 0 ? 0 : Math.sqrt(pow(l, 2) / (1 + pow(m, 2))));
-      x *= Math.sign(x2);
-      y = (x2 == 0 ? l * Math.sign(y2) : m * x);
-      xp = (x3 == 0 ? 0 : Math.sqrt(pow(l, 2) / (1 + pow(mp, 2))));
-      xp *= Math.sign(x3);
-      yp = (x3 == 0 ? l * Math.sign(y3) : mp * xp);
-
-      const path = `M${this._fromPoint.x},${this._fromPoint.y} `
-                + `L${x + this._fromPoint.x},${y + this._fromPoint.y
-                }M${this._fromPoint.x},${this._fromPoint.y} `
-                + `L${xp + this._fromPoint.x},${yp + this._fromPoint.y}`;
-      this._native.setAttribute('d', path);
-    }
-  },
 });
 
 export default ArrowPeer;

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

@@ -19,176 +19,186 @@ const Shape = require('@wisemapping/mindplot/lib/components/util/Shape').default
 const ElementPeer = require('./ElementPeer').default;
 
 const CurvedLinePeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
-    this.parent(svgElement);
-    this._style = { fill: '#495879' };
-    this._updateStyle();
-    this._customControlPoint_1 = false;
-    this._customControlPoint_2 = false;
-    this._control1 = new core.Point();
-    this._control2 = new core.Point();
-    this._lineStyle = true;
-  },
+    Extends: ElementPeer,
+    initialize :function() {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'path');
+        this.parent(svgElement);
+        this._style = {fill:'#495879'};
+        this._updateStyle();
+        this._customControlPoint_1 = false;
+        this._customControlPoint_2 = false;
+        this._control1 = new core.Point();
+        this._control2 = new core.Point();
+        this._lineStyle = true;
+    },
+
+
+    setSrcControlPoint : function(control) {
+        this._customControlPoint_1 = true;
+        var change = this._control1.x != control.x || this._control1.y != control.y;
+        if ($defined(control.x)) {
+            this._control1 = control;
+            this._control1.x = parseInt(this._control1.x);
+            this._control1.y = parseInt(this._control1.y)
+        }
+        if (change)
+            this._updatePath();
+    },
+
+    setDestControlPoint : function(control) {
+        this._customControlPoint_2 = true;
+        var change = this._control2.x != control.x || this._control2.y != control.y;
+        if ($defined(control.x)) {
+            this._control2 = control;
+            this._control2.x = parseInt(this._control2.x);
+            this._control2.y = parseInt(this._control2.y)
+        }
+        if (change)
+            this._updatePath();
+    },
+
+    isSrcControlPointCustom : function() {
+        return this._customControlPoint_1;
+    },
+
+    isDestControlPointCustom : function() {
+        return this._customControlPoint_2;
+    },
+
+    setIsSrcControlPointCustom : function(isCustom) {
+        this._customControlPoint_1 = isCustom;
+    },
+
+    setIsDestControlPointCustom : function(isCustom) {
+        this._customControlPoint_2 = isCustom;
+    },
+
+
+    getControlPoints : function() {
+        return [this._control1, this._control2];
+    },
+
+    setFrom : function(x1, y1) {
+        var change = this._x1 != parseInt(x1) || this._y1 != parseInt(y1);
+        this._x1 = parseInt(x1);
+        this._y1 = parseInt(y1);
+        if (change)
+            this._updatePath();
+    },
+
+    setTo : function(x2, y2) {
+        var change = this._x2 != parseInt(x2) || this._y2 != parseInt(y2);
+        this._x2 = parseInt(x2);
+        this._y2 = parseInt(y2);
+        if (change)
+            this._updatePath();
+    },
+
+    getFrom : function() {
+        return new core.Point(this._x1, this._y1);
+    },
+
+    getTo : function() {
+        return new core.Point(this._x2, this._y2);
+    },
+
+    setStrokeWidth : function(width) {
+        this._style['stroke-width'] = width;
+        this._updateStyle();
+    },
+
+    setColor : function(color) {
+        this._style['stroke'] = color;
+        this._style['fill'] = color;
+        this._updateStyle();
+    },
+
+    updateLine : function(avoidControlPointFix) {
+        this._updatePath(avoidControlPointFix);
+    },
+
+    setLineStyle : function (style) {
+        this._lineStyle = style;
+        if (this._lineStyle) {
+            this._style['fill'] = this._fill;
+        } else {
+            this._fill = this._style['fill'];
+            this._style['fill'] = 'none';
+        }
+        this._updateStyle();
+        this.updateLine();
+    },
+
+    getLineStyle : function () {
+        return this._lineStyle;
+    },
+
+
+    setShowEndArrow : function(visible) {
+        this._showEndArrow = visible;
+        this.updateLine();
+    },
+
+    isShowEndArrow : function() {
+        return this._showEndArrow;
+    },
+
+    setShowStartArrow : function(visible) {
+        this._showStartArrow = visible;
+        this.updateLine();
+    },
+
+    isShowStartArrow : function() {
+        return this._showStartArrow;
+    },
+
+
+    _updatePath : function(avoidControlPointFix) {
+        if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) {
+            this._calculateAutoControlPoints(avoidControlPointFix);
+            var path = "M" + this._x1 + "," + this._y1
+                + " C" + (this._control1.x + this._x1) + "," + (this._control1.y + this._y1) + " "
+                + (this._control2.x + this._x2) + "," + (this._control2.y + this._y2) + " "
+                + this._x2 + "," + this._y2 +
+                (this._lineStyle ? " "
+                    + (this._control2.x + this._x2) + "," + (this._control2.y + this._y2 + 3) + " "
+                    + (this._control1.x + this._x1) + "," + (this._control1.y + this._y1 + 5) + " "
+                    + this._x1 + "," + (this._y1 + 7) + " Z"
+                    : ""
+                    );
+            this._native.setAttribute("d", path);
+        }
+    },
+
+    _updateStyle : function() {
+        var style = "";
+        for (var key in this._style) {
+            style += key + ":" + this._style[key] + " ";
+        }
+        this._native.setAttribute("style", style);
+    },
+
+    _calculateAutoControlPoints : function(avoidControlPointFix) {
+        //Both points available, calculate real points
+        var defaultpoints = Shape.calculateDefaultControlPoints(new core.Point(this._x1, this._y1), new core.Point(this._x2, this._y2));
+        if (!this._customControlPoint_1 && !($defined(avoidControlPointFix) && avoidControlPointFix == 0)) {
+            this._control1.x = defaultpoints[0].x;
+            this._control1.y = defaultpoints[0].y;
+        }
+        if (!this._customControlPoint_2 && !($defined(avoidControlPointFix) && avoidControlPointFix == 1)) {
+            this._control2.x = defaultpoints[1].x;
+            this._control2.y = defaultpoints[1].y;
+        }
+    },
+
+    setDashed : function(length, spacing) {
+        if ($defined(length) && $defined(spacing)) {
+            this._native.setAttribute("stroke-dasharray", length + "," + spacing);
+        } else {
+            this._native.setAttribute("stroke-dasharray", "");
+        }
 
-  setSrcControlPoint(control) {
-    this._customControlPoint_1 = true;
-    const change = this._control1.x != control.x || this._control1.y != control.y;
-    if ($defined(control.x)) {
-      this._control1 = control;
-      this._control1.x = parseInt(this._control1.x);
-      this._control1.y = parseInt(this._control1.y);
     }
-    if (change) this._updatePath();
-  },
-
-  setDestControlPoint(control) {
-    this._customControlPoint_2 = true;
-    const change = this._control2.x != control.x || this._control2.y != control.y;
-    if ($defined(control.x)) {
-      this._control2 = control;
-      this._control2.x = parseInt(this._control2.x);
-      this._control2.y = parseInt(this._control2.y);
-    }
-    if (change) this._updatePath();
-  },
-
-  isSrcControlPointCustom() {
-    return this._customControlPoint_1;
-  },
-
-  isDestControlPointCustom() {
-    return this._customControlPoint_2;
-  },
-
-  setIsSrcControlPointCustom(isCustom) {
-    this._customControlPoint_1 = isCustom;
-  },
-
-  setIsDestControlPointCustom(isCustom) {
-    this._customControlPoint_2 = isCustom;
-  },
-
-  getControlPoints() {
-    return [this._control1, this._control2];
-  },
-
-  setFrom(x1, y1) {
-    const change = this._x1 != parseInt(x1) || this._y1 != parseInt(y1);
-    this._x1 = parseInt(x1);
-    this._y1 = parseInt(y1);
-    if (change) this._updatePath();
-  },
-
-  setTo(x2, y2) {
-    const change = this._x2 != parseInt(x2) || this._y2 != parseInt(y2);
-    this._x2 = parseInt(x2);
-    this._y2 = parseInt(y2);
-    if (change) this._updatePath();
-  },
-
-  getFrom() {
-    return new core.Point(this._x1, this._y1);
-  },
-
-  getTo() {
-    return new core.Point(this._x2, this._y2);
-  },
-
-  setStrokeWidth(width) {
-    this._style['stroke-width'] = width;
-    this._updateStyle();
-  },
-
-  setColor(color) {
-    this._style.stroke = color;
-    this._style.fill = color;
-    this._updateStyle();
-  },
-
-  updateLine(avoidControlPointFix) {
-    this._updatePath(avoidControlPointFix);
-  },
-
-  setLineStyle(style) {
-    this._lineStyle = style;
-    if (this._lineStyle) {
-      this._style.fill = this._fill;
-    } else {
-      this._fill = this._style.fill;
-      this._style.fill = 'none';
-    }
-    this._updateStyle();
-    this.updateLine();
-  },
-
-  getLineStyle() {
-    return this._lineStyle;
-  },
-
-  setShowEndArrow(visible) {
-    this._showEndArrow = visible;
-    this.updateLine();
-  },
-
-  isShowEndArrow() {
-    return this._showEndArrow;
-  },
-
-  setShowStartArrow(visible) {
-    this._showStartArrow = visible;
-    this.updateLine();
-  },
-
-  isShowStartArrow() {
-    return this._showStartArrow;
-  },
-
-  _updatePath(avoidControlPointFix) {
-    if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) {
-      this._calculateAutoControlPoints(avoidControlPointFix);
-      const path = `M${this._x1},${this._y1
-      } C${this._control1.x + this._x1},${this._control1.y + this._y1} ${
-        this._control2.x + this._x2},${this._control2.y + this._y2} ${
-        this._x2},${this._y2
-      }${this._lineStyle ? ` ${
-        this._control2.x + this._x2},${this._control2.y + this._y2 + 3} ${
-        this._control1.x + this._x1},${this._control1.y + this._y1 + 5} ${
-        this._x1},${this._y1 + 7} Z`
-        : ''}`;
-      this._native.setAttribute('d', path);
-    }
-  },
-
-  _updateStyle() {
-    let style = '';
-    for (const key in this._style) {
-      style += `${key}:${this._style[key]} `;
-    }
-    this._native.setAttribute('style', style);
-  },
-
-  _calculateAutoControlPoints(avoidControlPointFix) {
-    // Both points available, calculate real points
-    const defaultpoints = Shape.calculateDefaultControlPoints(new core.Point(this._x1, this._y1), new core.Point(this._x2, this._y2));
-    if (!this._customControlPoint_1 && !($defined(avoidControlPointFix) && avoidControlPointFix == 0)) {
-      this._control1.x = defaultpoints[0].x;
-      this._control1.y = defaultpoints[0].y;
-    }
-    if (!this._customControlPoint_2 && !($defined(avoidControlPointFix) && avoidControlPointFix == 1)) {
-      this._control2.x = defaultpoints[1].x;
-      this._control2.y = defaultpoints[1].y;
-    }
-  },
-
-  setDashed(length, spacing) {
-    if ($defined(length) && $defined(spacing)) {
-      this._native.setAttribute('stroke-dasharray', `${length},${spacing}`);
-    } else {
-      this._native.setAttribute('stroke-dasharray', '');
-    }
-  },
 });
 
 export default CurvedLinePeer;

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

@@ -1,250 +1,248 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
 const EventUtils = require('../utils/EventUtils').default; //eslint-disable-line
 const TransformUtil = require('../utils/TransformUtils').default; //eslint-disable-line
 const Element = require('../../Element').default; //eslint-disable-line
-
+
 const ElementPeer = new Class({ //eslint-disable-line
-  initialize(svgElement) {
-    this._native = svgElement;
-    if (!this._native.addEvent) {
-      // Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811
-      for (const key in Element) {
-        this._native[key] = Element.prototype[key];
-      }
-    }
-
-    this._size = { width: 1, height: 1 };
-    this._changeListeners = {};
-    // http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm
-  },
-
-  setChildren(children) {
-    this._children = children;
-  },
-
-  getChildren() {
-    let result = this._children;
+    initialize: function (svgElement) {
+        this._native = svgElement;
+        if (!this._native.addEvent) {
+            // Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811
+            for (var key in Element) {
+                this._native[key] = Element.prototype[key];
+            }
+        }
+
+        this._size = { width: 1, height: 1 };
+        this._changeListeners = {};
+        // http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm
+    },
+
+    setChildren: function (children) {
+        this._children = children;
+    },
+
+    getChildren: function () {
+        var result = this._children;
         if (!$defined(result)) { //eslint-disable-line
-      result = [];
-      this._children = result;
-    }
-    return result;
-  },
-
-  getParent() {
-    return this._parent;
-  },
-
-  setParent(parent) {
-    this._parent = parent;
-  },
-
-  append(elementPeer) {
-    // Store parent and child relationship.
-    elementPeer.setParent(this);
-    const children = this.getChildren();
-    children.include(elementPeer);
-
-    // Append element as a child.
-    this._native.appendChild(elementPeer._native);
-
-    // Broadcast events ...
-    EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
-
-  removeChild(elementPeer) {
-    // Store parent and child relationship.
-    elementPeer.setParent(null);
-    const children = this.getChildren();
-
-    // Remove from children array ...
-    const oldLength = children.length;
-
-    children.erase(elementPeer);
+            result = [];
+            this._children = result;
+        }
+        return result;
+    },
+
+    getParent: function () {
+        return this._parent;
+    },
+
+    setParent: function (parent) {
+        this._parent = parent;
+    },
+
+    append: function (elementPeer) {
+        // Store parent and child relationship.
+        elementPeer.setParent(this);
+        var children = this.getChildren();
+        children.include(elementPeer);
+
+        // Append element as a child.
+        this._native.appendChild(elementPeer._native);
+
+        // Broadcast events ...
+        EventUtils.broadcastChangeEvent(this, 'strokeStyle');
+    },
+
+    removeChild: function (elementPeer) {
+        // Store parent and child relationship.
+        elementPeer.setParent(null);
+        var children = this.getChildren();
+
+        // Remove from children array ...
+        var oldLength = children.length;
+
+        children.erase(elementPeer);
         $assert(children.length < oldLength, 'element could not be removed:' + elementPeer); //eslint-disable-line
-
-    // Append element as a child.
-    this._native.removeChild(elementPeer._native);
-  },
-
-  /**
-     * http://www.w3.org/TR/DOM-Level-3-Events/events.html
-     * http://developer.mozilla.org/en/docs/addEvent
-     */
-  addEvent(type, listener) {
+
+        // Append element as a child.
+        this._native.removeChild(elementPeer._native);
+    },
+
+    /**
+     * http://www.w3.org/TR/DOM-Level-3-Events/events.html
+     * http://developer.mozilla.org/en/docs/addEvent
+     */
+    addEvent: function (type, listener) {
         $(this._native).bind(type, listener); //eslint-disable-line
-  },
-
-  trigger(type, event) {
+    },
+
+    trigger: function (type, event) {
         $(this._native).trigger(type, event); //eslint-disable-line
-  },
-
-  cloneEvents(from) {
-    this._native.cloneEvents(from);
-  },
-
-  removeEvent(type, listener) {
+    },
+
+    cloneEvents: function (from) {
+        this._native.cloneEvents(from);
+    },
+
+    removeEvent: function (type, listener) {
         $(this._native).unbind(type, listener); //eslint-disable-line
-  },
-
-  setSize(width, height) {
+    },
+
+    setSize: function (width, height) {
         if ($defined(width) && this._size.width != parseInt(width)) { //eslint-disable-line
-      this._size.width = parseInt(width);
-      this._native.setAttribute('width', parseInt(width));
-    }
-
+            this._size.width = parseInt(width);
+            this._native.setAttribute('width', parseInt(width));
+        }
+
         if ($defined(height) && this._size.height != parseInt(height)) { //eslint-disable-line
-      this._size.height = parseInt(height);
-      this._native.setAttribute('height', parseInt(height));
-    }
-
-    EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
-
-  getSize() {
-    return { width: this._size.width, height: this._size.height };
-  },
-
-  setFill(color, opacity) {
+            this._size.height = parseInt(height);
+            this._native.setAttribute('height', parseInt(height));
+        }
+
+        EventUtils.broadcastChangeEvent(this, 'strokeStyle');
+    },
+
+    getSize: function () {
+        return { width: this._size.width, height: this._size.height };
+    },
+
+    setFill: function (color, opacity) {
         if ($defined(color)) { //eslint-disable-line
-      this._native.setAttribute('fill', color);
-    }
+            this._native.setAttribute('fill', color);
+        }
         if ($defined(opacity)) { //eslint-disable-line
-      this._native.setAttribute('fill-opacity', opacity);
-    }
-  },
-
-  getFill() {
-    const color = this._native.getAttribute('fill');
-    const opacity = this._native.getAttribute('fill-opacity');
-    return { color, opacity: Number(opacity) };
-  },
-
-  getStroke() {
-    const vmlStroke = this._native;
-    const color = vmlStroke.getAttribute('stroke');
-    const dashstyle = this._stokeStyle;
-    const opacity = vmlStroke.getAttribute('stroke-opacity');
-    const width = vmlStroke.getAttribute('stroke-width');
-    return {
-      color, style: dashstyle, opacity, width,
-    };
-  },
-
-  setStroke(width, style, color, opacity) {
+            this._native.setAttribute('fill-opacity', opacity);
+        }
+    },
+
+    getFill: function () {
+        var color = this._native.getAttribute('fill');
+        var opacity = this._native.getAttribute('fill-opacity');
+        return { color: color, opacity: Number(opacity) };
+    },
+
+    getStroke: function () {
+        var vmlStroke = this._native;
+        var color = vmlStroke.getAttribute('stroke');
+        var dashstyle = this._stokeStyle;
+        var opacity = vmlStroke.getAttribute('stroke-opacity');
+        var width = vmlStroke.getAttribute('stroke-width');
+        return { color: color, style: dashstyle, opacity: opacity, width: width };
+    },
+
+    setStroke: function (width, style, color, opacity) {
         if ($defined(width)) { //eslint-disable-line
-      this._native.setAttribute('stroke-width', `${width}px`);
-    }
+            this._native.setAttribute('stroke-width', width + 'px');
+        }
         if ($defined(color)) { //eslint-disable-line
-      this._native.setAttribute('stroke', color);
-    }
+            this._native.setAttribute('stroke', color);
+        }
         if ($defined(style)) { //eslint-disable-line
-      // Scale the dash array in order to be equal to VML. In VML, stroke style doesn't scale.
-      const dashArrayPoints = this.__stokeStyleToStrokDasharray[style];
-      const scale = 1 / TransformUtil.workoutScale(this).width;
-
-      let strokeWidth = this._native.getAttribute('stroke-width');
-      strokeWidth = parseFloat(strokeWidth);
-
-      const scaledPoints = [];
-      for (let i = 0; i < dashArrayPoints.length; i++) {
-        // VML scale the stroke based on the stroke width.
-        scaledPoints[i] = dashArrayPoints[i] * strokeWidth;
-
-        // Scale the points based on the scale.
-        scaledPoints[i] = `${scaledPoints[i] * scale}px`;
-      }
-
-      //        this._native.setAttribute('stroke-dasharray', scaledPoints);
-      this._stokeStyle = style;
-    }
-
+            // Scale the dash array in order to be equal to VML. In VML, stroke style doesn't scale.
+            var dashArrayPoints = this.__stokeStyleToStrokDasharray[style];
+            var scale = 1 / TransformUtil.workoutScale(this).width;
+
+            var strokeWidth = this._native.getAttribute('stroke-width');
+            strokeWidth = parseFloat(strokeWidth);
+
+            var scaledPoints = [];
+            for (var i = 0; i < dashArrayPoints.length; i++) {
+                // VML scale the stroke based on the stroke width.
+                scaledPoints[i] = dashArrayPoints[i] * strokeWidth;
+
+                // Scale the points based on the scale.
+                scaledPoints[i] = scaledPoints[i] * scale + 'px';
+            }
+
+            //        this._native.setAttribute('stroke-dasharray', scaledPoints);
+            this._stokeStyle = style;
+        }
+
         if ($defined(opacity)) { //eslint-disable-line
-      this._native.setAttribute('stroke-opacity', opacity);
-    }
-  },
-
-  /*
-     * style='visibility: visible'
-     */
-  setVisibility(isVisible) {
-    this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden');
-  },
-
-  isVisible() {
-    const visibility = this._native.getAttribute('visibility');
-    return !(visibility == 'hidden');
-  },
-
-  updateStrokeStyle() {
-    const strokeStyle = this._stokeStyle;
-    if (this.getParent()) {
-      if (strokeStyle && strokeStyle != 'solid') {
-        this.setStroke(null, strokeStyle);
-      }
-    }
-  },
-
-  attachChangeEventListener(type, listener) {
-    const listeners = this.getChangeEventListeners(type);
+            this._native.setAttribute('stroke-opacity', opacity);
+        }
+    },
+
+    /*
+     * style='visibility: visible'
+     */
+    setVisibility: function (isVisible) {
+        this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden');
+    },
+
+    isVisible: function () {
+        var visibility = this._native.getAttribute('visibility');
+        return !(visibility == 'hidden');
+    },
+
+    updateStrokeStyle: function () {
+        var strokeStyle = this._stokeStyle;
+        if (this.getParent()) {
+            if (strokeStyle && strokeStyle != 'solid') {
+                this.setStroke(null, strokeStyle);
+            }
+        }
+    },
+
+    attachChangeEventListener: function (type, listener) {
+        var listeners = this.getChangeEventListeners(type);
         if (!$defined(listener)) { //eslint-disable-line
-      throw 'Listener can not be null';
-    }
-    listeners.push(listener);
-  },
-
-  getChangeEventListeners(type) {
-    let listeners = this._changeListeners[type];
+            throw 'Listener can not be null';
+        }
+        listeners.push(listener);
+    },
+
+    getChangeEventListeners: function (type) {
+        var listeners = this._changeListeners[type];
         if (!$defined(listeners)) { //eslint-disable-line
-      listeners = [];
-      this._changeListeners[type] = listeners;
-    }
-    return listeners;
-  },
-
-  /**
-     * Move element to the front
-     */
-  moveToFront() {
-    this._native.parentNode.appendChild(this._native);
-  },
-
-  /**
-     * Move element to the back
-     */
-  moveToBack() {
-    this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
-  },
-
-  setCursor(type) {
-    this._native.style.cursor = type;
-  },
-});
-
-ElementPeer.prototype.svgNamespace = 'http://www.w3.org/2000/svg';
-ElementPeer.prototype.linkNamespace = 'http://www.w3.org/1999/xlink';
-ElementPeer.prototype.__stokeStyleToStrokDasharray = {
-  solid: [],
-  dot: [1, 3],
-  dash: [4, 3],
-  longdash: [10, 2],
-  dashdot: [5, 3, 1, 3],
-};
-
+            listeners = [];
+            this._changeListeners[type] = listeners;
+        }
+        return listeners;
+    },
+
+    /**
+     * Move element to the front
+     */
+    moveToFront: function () {
+        this._native.parentNode.appendChild(this._native);
+    },
+
+    /**
+     * Move element to the back
+     */
+    moveToBack: function () {
+        this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
+    },
+
+    setCursor: function (type) {
+        this._native.style.cursor = type;
+    },
+});
+
+ElementPeer.prototype.svgNamespace = 'http://www.w3.org/2000/svg';
+ElementPeer.prototype.linkNamespace = 'http://www.w3.org/1999/xlink';
+ElementPeer.prototype.__stokeStyleToStrokDasharray = {
+    solid: [],
+    dot: [1, 3],
+    dash: [4, 3],
+    longdash: [10, 2],
+    dashdot: [5, 3, 1, 3],
+};
+
 export default ElementPeer; //eslint-disable-line

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

@@ -1,61 +1,61 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const ElementPeer = require('./ElementPeer').default;
-
-const ElipsePeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'ellipse');
-    this.parent(svgElement);
-    this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-    this._position = { x: 0, y: 0 };
-  },
-
-  setSize(width, height) {
-    this.parent(width, height);
-    if ($defined(width)) {
-      this._native.setAttribute('rx', width / 2);
-    }
-
-    if ($defined(height)) {
-      this._native.setAttribute('ry', height / 2);
-    }
-
-    const pos = this.getPosition();
-    this.setPosition(pos.x, pos.y);
-  },
-
-  setPosition(cx, cy) {
-    const size = this.getSize();
-    cx += size.width / 2;
-    cy += size.height / 2;
-    if ($defined(cx)) {
-      this._native.setAttribute('cx', cx);
-    }
-
-    if ($defined(cy)) {
-      this._native.setAttribute('cy', cy);
-    }
-  },
-
-  getPosition() {
-    return this._position;
-  },
-});
-
-export default ElipsePeer;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const ElementPeer = require('./ElementPeer').default
+
+const ElipsePeer = new Class({
+    Extends: ElementPeer,
+    initialize : function() {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'ellipse');
+        this.parent(svgElement);
+        this.attachChangeEventListener("strokeStyle", ElementPeer.prototype.updateStrokeStyle);
+        this._position = {x:0, y:0};
+    },
+
+     setSize : function(width, height) {
+        this.parent(width, height);
+        if ($defined(width)) {
+            this._native.setAttribute('rx', width / 2);
+        }
+
+        if ($defined(height)) {
+            this._native.setAttribute('ry', height / 2);
+        }
+
+        var pos = this.getPosition();
+        this.setPosition(pos.x, pos.y);
+    },
+
+    setPosition : function(cx, cy) {
+        var size = this.getSize();
+        cx = cx + size.width / 2;
+        cy = cy + size.height / 2;
+        if ($defined(cx)) {
+            this._native.setAttribute('cx', cx);
+        }
+
+        if ($defined(cy)) {
+            this._native.setAttribute('cy', cy);
+        }
+    },
+
+    getPosition : function() {
+        return this._position;
+    }
+});
+
+export default ElipsePeer;

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

@@ -1,91 +1,93 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-
-const Font = new Class({
-  initialize() {
-    this._size = 10;
-    this._style = 'normal';
-    this._weight = 'normal';
-  },
-
-  init(args) {
-    if ($defined(args.size)) {
-      this._size = parseInt(args.size);
-    }
-    if ($defined(args.style)) {
-      this._style = args.style;
-    }
-    if ($defined(args.weight)) {
-      this._weight = args.weight;
-    }
-  },
-
-  getHtmlSize(scale) {
-    let result = 0;
-    if (this._size == 6) {
-      result = this._size * scale.height * 43 / 32;
-    }
-    if (this._size == 8) {
-      result = this._size * scale.height * 42 / 32;
-    } else if (this._size == 10) {
-      result = this._size * scale.height * 42 / 32;
-    } else if (this._size == 15) {
-      result = this._size * scale.height * 42 / 32;
-    }
-
-    return result;
-  },
-
-  getGraphSize() {
-    return this._size * 43 / 32;
-  },
-
-  getSize() {
-    return parseInt(this._size);
-  },
-
-  getStyle() {
-    return this._style;
-  },
-
-  getWeight() {
-    return this._weight;
-  },
-
-  setSize(size) {
-    this._size = size;
-  },
-
-  setStyle(style) {
-    this._style = style;
-  },
-
-  setWeight(weight) {
-    this._weight = weight;
-  },
-
-  getWidthMargin() {
-    let result = 0;
-    if (this._size == 10 || this._size == 6) {
-      result = 4;
-    }
-    return result;
-  },
-});
-
-export default Font;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+const Font = new Class({
+    initialize : function() {
+        this._size = 10;
+        this._style = "normal";
+        this._weight = "normal";
+    },
+
+    init : function(args) {
+        if ($defined(args.size)) {
+            this._size = parseInt(args.size);
+        }
+        if ($defined(args.style)) {
+            this._style = args.style;
+        }
+        if ($defined(args.weight)) {
+            this._weight = args.weight;
+        }
+    },
+
+    getHtmlSize : function (scale) {
+        var result = 0;
+        if (this._size == 6) {
+            result = this._size * scale.height * 43 / 32;
+        }
+        if (this._size == 8) {
+            result = this._size * scale.height * 42 / 32;
+        }
+        else if (this._size == 10) {
+            result = this._size * scale.height * 42 / 32;
+        }
+        else if (this._size == 15) {
+            result = this._size * scale.height * 42 / 32;
+        }
+
+        return result;
+    },
+
+    getGraphSize : function () {
+        return this._size * 43 / 32;
+    },
+
+    getSize : function () {
+        return parseInt(this._size);
+    },
+
+    getStyle : function () {
+        return this._style;
+    },
+
+    getWeight : function () {
+        return this._weight;
+    },
+
+    setSize : function (size) {
+        this._size = size;
+    },
+
+    setStyle : function (style) {
+        this._style = style;
+    },
+
+    setWeight : function (weight) {
+        this._weight = weight;
+    },
+
+    getWidthMargin : function () {
+        var result = 0;
+        if (this._size == 10 || this._size == 6) {
+            result = 4;
+        }
+        return result;
+    }
+});
+
+export default Font;

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

@@ -1,131 +1,135 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const ElementPeer = require('./ElementPeer').default;
-const EventUtils = require('../utils/EventUtils').default;
-
-const GroupPeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'g');
-    this.parent(svgElement);
-    this._native.setAttribute('preserveAspectRatio', 'none');
-    this._coordSize = { width: 1, height: 1 };
-    this._native.setAttribute('focusable', 'true');
-    this._position = { x: 0, y: 0 };
-    this._coordOrigin = { x: 0, y: 0 };
-  },
-
-  setCoordSize(width, height) {
-    const change = this._coordSize.width != width || this._coordSize.height != height;
-    this._coordSize.width = width;
-    this._coordSize.height = height;
-
-    if (change) { this.updateTransform(); }
-    EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
-
-  getCoordSize() {
-    return { width: this._coordSize.width, height: this._coordSize.height };
-  },
-
-  /**
-     * http://www.w3.org/TR/SVG/coords.html#TransformAttribute
-     * 7.6 The transform  attribute
-     *
-     * The value of the transform attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided. The individual transform definitions are separated by whitespace and/or a comma. The available types of transform definitions include:
-     *
-     *    * matrix(<a> <b> <c> <d> <e> <f>), which specifies a transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].
-     *
-     *    * translate(<tx> [<ty>]), which specifies a translation by tx and ty. If <ty> is not provided, it is assumed to be zero.
-     *
-     *    * scale(<sx> [<sy>]), which specifies a scale operation by sx and sy. If <sy> is not provided, it is assumed to be equal to <sx>.
-     *
-     *    * rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation by <rotate-angle> degrees about a given point.
-     *      If optional parameters <cx> and <cy> are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
-     *      If optional parameters <cx> and <cy> are supplied, the rotate is about the point (<cx>, <cy>). The operation represents the equivalent of the following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).
-     *
-     *    * skewX(<skew-angle>), which specifies a skew transformation along the x-axis.
-     *
-     *    * skewY(<skew-angle>), which specifies a skew transformation along the y-axis.
-     * */
-
-  updateTransform() {
-    let sx = this._size.width / this._coordSize.width;
-    let sy = this._size.height / this._coordSize.height;
-
-    let cx = this._position.x - this._coordOrigin.x * sx;
-    let cy = this._position.y - this._coordOrigin.y * sy;
-
-    // FIXME: are we sure of this values?
-    cx = isNaN(cx) ? 0 : cx;
-    cy = isNaN(cy) ? 0 : cy;
-    sx = isNaN(sx) ? 0 : sx;
-    sy = isNaN(sy) ? 0 : sy;
-
-    this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
-  },
-
-  setOpacity(value) {
-    this._native.setAttribute('opacity', value);
-  },
-
-  setCoordOrigin(x, y) {
-    const change = x != this._coordOrigin.x || y != this._coordOrigin.y;
-    if ($defined(x)) {
-      this._coordOrigin.x = x;
-    }
-
-    if ($defined(y)) {
-      this._coordOrigin.y = y;
-    }
-    if (change) { this.updateTransform(); }
-  },
-
-  setSize(width, height) {
-    const change = width != this._size.width || height != this._size.height;
-    this.parent(width, height);
-    if (change) { this.updateTransform(); }
-  },
-
-  setPosition(x, y) {
-    const change = x != this._position.x || y != this._position.y;
-    if ($defined(x)) {
-      this._position.x = parseInt(x);
-    }
-
-    if ($defined(y)) {
-      this._position.y = parseInt(y);
-    }
-    if (change) { this.updateTransform(); }
-  },
-
-  getPosition() {
-    return { x: this._position.x, y: this._position.y };
-  },
-
-  append(child) {
-    this.parent(child);
-    EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize');
-  },
-
-  getCoordOrigin() {
-    return { x: this._coordOrigin.x, y: this._coordOrigin.y };
-  },
-});
-
-export default GroupPeer;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const ElementPeer = require('./ElementPeer').default;
+const EventUtils = require('../utils/EventUtils').default;
+
+const GroupPeer = new Class({
+    Extends: ElementPeer,
+    initialize: function () {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'g');
+        this.parent(svgElement);
+        this._native.setAttribute("preserveAspectRatio", "none");
+        this._coordSize = {width: 1, height: 1};
+        this._native.setAttribute("focusable", "true");
+        this._position = {x: 0, y: 0};
+        this._coordOrigin = {x: 0, y: 0};
+    },
+
+    setCoordSize: function (width, height) {
+        var change = this._coordSize.width != width || this._coordSize.height != height;
+        this._coordSize.width = width;
+        this._coordSize.height = height;
+
+        if (change)
+            this.updateTransform();
+        EventUtils.broadcastChangeEvent(this, "strokeStyle");
+    },
+
+    getCoordSize: function () {
+        return {width: this._coordSize.width, height: this._coordSize.height};
+    },
+
+    /**
+     * http://www.w3.org/TR/SVG/coords.html#TransformAttribute
+     * 7.6 The transform  attribute
+     *
+     * The value of the transform attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided. The individual transform definitions are separated by whitespace and/or a comma. The available types of transform definitions include:
+     *
+     *    * matrix(<a> <b> <c> <d> <e> <f>), which specifies a transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].
+     *
+     *    * translate(<tx> [<ty>]), which specifies a translation by tx and ty. If <ty> is not provided, it is assumed to be zero.
+     *
+     *    * scale(<sx> [<sy>]), which specifies a scale operation by sx and sy. If <sy> is not provided, it is assumed to be equal to <sx>.
+     *
+     *    * rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation by <rotate-angle> degrees about a given point.
+     *      If optional parameters <cx> and <cy> are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
+     *      If optional parameters <cx> and <cy> are supplied, the rotate is about the point (<cx>, <cy>). The operation represents the equivalent of the following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).
+     *
+     *    * skewX(<skew-angle>), which specifies a skew transformation along the x-axis.
+     *
+     *    * skewY(<skew-angle>), which specifies a skew transformation along the y-axis.
+     **/
+
+    updateTransform: function () {
+        var sx = this._size.width / this._coordSize.width;
+        var sy = this._size.height / this._coordSize.height;
+
+        var cx = this._position.x - this._coordOrigin.x * sx;
+        var cy = this._position.y - this._coordOrigin.y * sy;
+
+        //FIXME: are we sure of this values?
+        cx = isNaN(cx) ? 0 : cx;
+        cy = isNaN(cy) ? 0 : cy;
+        sx = isNaN(sx) ? 0 : sx;
+        sy = isNaN(sy) ? 0 : sy;
+
+        this._native.setAttribute("transform", "translate(" + cx + "," + cy + ") scale(" + sx + "," + sy + ")");
+    },
+
+    setOpacity: function (value) {
+        this._native.setAttribute("opacity", value);
+    },
+
+    setCoordOrigin: function (x, y) {
+        var change = x != this._coordOrigin.x || y != this._coordOrigin.y;
+        if ($defined(x)) {
+            this._coordOrigin.x = x;
+        }
+
+        if ($defined(y)) {
+            this._coordOrigin.y = y;
+        }
+        if (change)
+            this.updateTransform();
+    },
+
+    setSize: function (width, height) {
+        var change = width != this._size.width || height != this._size.height;
+        this.parent(width, height);
+        if (change)
+            this.updateTransform();
+    },
+
+    setPosition: function (x, y) {
+        var change = x != this._position.x || y != this._position.y;
+        if ($defined(x)) {
+            this._position.x = parseInt(x);
+        }
+
+        if ($defined(y)) {
+            this._position.y = parseInt(y);
+        }
+        if (change)
+            this.updateTransform();
+    },
+
+    getPosition: function () {
+        return {x: this._position.x, y: this._position.y};
+    },
+
+    append: function (child) {
+        this.parent(child);
+        EventUtils.broadcastChangeEvent(child, "onChangeCoordSize");
+    },
+
+    getCoordOrigin: function () {
+        return {x: this._coordOrigin.x, y: this._coordOrigin.y};
+    }
+});
+
+export default GroupPeer;

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

@@ -15,36 +15,36 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const ElementPeer = require('./ElementPeer').default;
+const ElementPeer = require('./ElementPeer').default
 
 const ImagePeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'image');
-    this.parent(svgElement);
-    this._position = { x: 0, y: 0 };
-    this._href = '';
-    this._native.setAttribute('preserveAspectRatio', 'none');
-  },
+    Extends: ElementPeer,
+    initialize : function() {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'image');
+        this.parent(svgElement);
+        this._position = {x:0,y:0};
+        this._href = "";
+        this._native.setAttribute("preserveAspectRatio", "none");
+    },
 
-  setPosition(x, y) {
-    this._position = { x, y };
-    this._native.setAttribute('y', y);
-    this._native.setAttribute('x', x);
-  },
+    setPosition : function(x, y) {
+        this._position = {x:x, y:y};
+        this._native.setAttribute('y', y);
+        this._native.setAttribute('x', x);
+    },
 
-  getPosition() {
-    return this._position;
-  },
+    getPosition : function() {
+        return this._position;
+    },
 
-  setHref(url) {
-    this._native.setAttributeNS(this.linkNamespace, 'href', url);
-    this._href = url;
-  },
+    setHref : function(url) {
+        this._native.setAttributeNS(this.linkNamespace, "href", url);
+        this._href = url;
+    },
 
-  getHref() {
-    return this._href;
-  },
+    getHref : function() {
+        return this._href;
+    }
 });
 
 export default ImagePeer;

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

@@ -1,64 +1,64 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const ElementPeer = require('./ElementPeer').default;
-
-const LinePeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'line');
-    this.parent(svgElement);
-    this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-  },
-
-  setFrom(x1, y1) {
-    this._x1 = x1;
-    this._y1 = y1;
-    this._native.setAttribute('x1', x1);
-    this._native.setAttribute('y1', y1);
-  },
-
-  setTo(x2, y2) {
-    this._x2 = x2;
-    this._y2 = y2;
-    this._native.setAttribute('x2', x2);
-    this._native.setAttribute('y2', y2);
-  },
-
-  getFrom() {
-    return new core.Point(this._x1, this._y1);
-  },
-
-  getTo() {
-    return new core.Point(this._x2, this._y2);
-  },
-
-  /*
-     * http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end
-     */
-  setArrowStyle(startStyle, endStyle) {
-    if ($defined(startStyle)) {
-      // Todo: This must be implemented ...
-    }
-
-    if ($defined(endStyle)) {
-      // Todo: This must be implemented ...
-    }
-  },
-});
-
-export default LinePeer;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const ElementPeer = require('./ElementPeer').default
+
+const LinePeer = new Class({
+    Extends: ElementPeer,
+    initialize : function() {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'line');
+        this.parent(svgElement);
+        this.attachChangeEventListener("strokeStyle", ElementPeer.prototype.updateStrokeStyle);
+    },
+
+    setFrom : function(x1, y1) {
+        this._x1 = x1;
+        this._y1 = y1;
+        this._native.setAttribute('x1', x1);
+        this._native.setAttribute('y1', y1);
+    },
+
+    setTo : function(x2, y2) {
+        this._x2 = x2;
+        this._y2 = y2;
+        this._native.setAttribute('x2', x2);
+        this._native.setAttribute('y2', y2);
+    },
+
+    getFrom : function() {
+        return new core.Point(this._x1, this._y1);
+    },
+
+    getTo : function() {
+        return new core.Point(this._x2, this._y2);
+    },
+
+    /*
+     * http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end
+     */
+    setArrowStyle : function(startStyle, endStyle) {
+        if ($defined(startStyle)) {
+            // Todo: This must be implemented ...
+        }
+
+        if ($defined(endStyle)) {
+            // Todo: This must be implemented ...
+        }
+    }
+});
+
+export default LinePeer;

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

@@ -1,105 +1,107 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const ElementPeer = require('./ElementPeer').default;
-const PolyLine = require('../../PolyLine');
-
-const PolyLinePeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'polyline');
-    this.parent(svgElement);
-    this.setFill('none');
-    this.breakDistance = 10;
-  },
-
-  setFrom(x1, y1) {
-    this._x1 = x1;
-    this._y1 = y1;
-    this._updatePath();
-  },
-
-  setTo(x2, y2) {
-    this._x2 = x2;
-    this._y2 = y2;
-    this._updatePath();
-  },
-
-  setStrokeWidth(width) {
-    this._native.setAttribute('stroke-width', width);
-  },
-
-  setColor(color) {
-    this._native.setAttribute('stroke', color);
-  },
-
-  setStyle(style) {
-    this._style = style;
-    this._updatePath();
-  },
-
-  getStyle() {
-    return this._style;
-  },
-
-  _updatePath() {
-    if (this._style == 'Curved') {
-      this._updateMiddleCurvePath();
-    } else if (this._style == 'Straight') {
-      this._updateStraightPath();
-    } else {
-      this._updateCurvePath();
-    }
-  },
-
-  _updateStraightPath() {
-    if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
-      const path = PolyLine.default.prototype.buildStraightPath(this.breakDistance, this._x1, this._y1, this._x2, this._y2);
-      this._native.setAttribute('points', path);
-    }
-  },
-
-  _updateMiddleCurvePath() {
-    const x1 = this._x1;
-    const y1 = this._y1;
-    const x2 = this._x2;
-    const y2 = this._y2;
-    if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
-      const diff = x2 - x1;
-      const middlex = (diff / 2) + x1;
-      let signx = 1;
-      let signy = 1;
-      if (diff < 0) {
-        signx = -1;
-      }
-      if (y2 < y1) {
-        signy = -1;
-      }
-      const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${y1 + 10 * signy} ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`;
-      this._native.setAttribute('points', path);
-    }
-  },
-
-  _updateCurvePath() {
-    if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
-      const path = PolyLine.default.prototype.buildCurvedPath(this.breakDistance, this._x1, this._y1, this._x2, this._y2);
-      this._native.setAttribute('points', path);
-    }
-  },
-});
-
-export default PolyLinePeer;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const ElementPeer = require('./ElementPeer').default;
+const PolyLine = require('../../PolyLine');
+
+const PolyLinePeer = new Class({
+    Extends: ElementPeer,
+    initialize : function() {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'polyline');
+        this.parent(svgElement);
+        this.setFill("none");
+        this.breakDistance = 10;
+    },
+
+    setFrom : function(x1, y1) {
+        this._x1 = x1;
+        this._y1 = y1;
+        this._updatePath();
+    },
+
+    setTo : function(x2, y2) {
+        this._x2 = x2;
+        this._y2 = y2;
+        this._updatePath();
+    },
+
+    setStrokeWidth : function(width) {
+        this._native.setAttribute('stroke-width', width);
+    },
+
+    setColor : function(color) {
+        this._native.setAttribute('stroke', color);
+    },
+
+    setStyle : function(style) {
+        this._style = style;
+        this._updatePath();
+    },
+
+    getStyle : function() {
+        return this._style;
+    },
+
+    _updatePath : function() {
+        if (this._style == "Curved") {
+            this._updateMiddleCurvePath();
+        }
+        else if (this._style == "Straight") {
+            this._updateStraightPath();
+        }
+        else {
+            this._updateCurvePath();
+        }
+    },
+
+    _updateStraightPath : function() {
+        if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
+            var path = PolyLine.default.prototype.buildStraightPath(this.breakDistance, this._x1, this._y1, this._x2, this._y2);
+            this._native.setAttribute('points', path);
+        }
+    },
+
+    _updateMiddleCurvePath : function() {
+        var x1 = this._x1;
+        var y1 = this._y1;
+        var x2 = this._x2;
+        var y2 = this._y2;
+        if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
+            var diff = x2 - x1;
+            var middlex = (diff / 2) + x1;
+            var signx = 1;
+            var signy = 1;
+            if (diff < 0) {
+                signx = -1;
+            }
+            if (y2 < y1) {
+                signy = -1;
+            }
+            var path = x1 + ", " + y1 + " " + (middlex - 10 * signx) + ", " + y1 + " " + middlex + ", " + (y1 + 10 * signy) + " " + middlex + ", " + (y2 - 10 * signy) + " " + (middlex + 10 * signx) + ", " + y2 + " " + x2 + ", " + y2;
+            this._native.setAttribute('points', path);
+        }
+    },
+
+    _updateCurvePath : function() {
+        if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) { 
+            var path = PolyLine.default.prototype.buildCurvedPath(this.breakDistance, this._x1, this._y1, this._x2, this._y2);
+            this._native.setAttribute('points', path);
+        }
+    }
+});
+
+export default PolyLinePeer;

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

@@ -1,60 +1,60 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const ElementPeer = require('./ElementPeer').default;
-
-/**
- * http://www.w3.org/TR/SVG/shapes.html#RectElement
- */
-const RectPeer = new Class({
-  Extends: ElementPeer,
-  initialize(arc) {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'rect');
-    this.parent(svgElement);
-    this._arc = arc;
-    this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-  },
-
-  setPosition(x, y) {
-    if ($defined(x)) {
-      this._native.setAttribute('x', parseInt(x));
-    }
-    if ($defined(y)) {
-      this._native.setAttribute('y', parseInt(y));
-    }
-  },
-
-  getPosition() {
-    const x = this._native.getAttribute('x');
-    const y = this._native.getAttribute('y');
-    return { x: parseInt(x), y: parseInt(y) };
-  },
-
-  setSize(width, height) {
-    this.parent(width, height);
-
-    const min = width < height ? width : height;
-    if ($defined(this._arc)) {
-      // Transform percentages to SVG format.
-      const arc = (min / 2) * this._arc;
-      this._native.setAttribute('rx', arc);
-      this._native.setAttribute('ry', arc);
-    }
-  },
-});
-
-export default RectPeer;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const ElementPeer = require('./ElementPeer').default
+
+/**
+ * http://www.w3.org/TR/SVG/shapes.html#RectElement
+ */
+const RectPeer = new Class({
+    Extends: ElementPeer,
+    initialize : function(arc) {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'rect');
+        this.parent(svgElement);
+        this._arc = arc;
+        this.attachChangeEventListener("strokeStyle", ElementPeer.prototype.updateStrokeStyle);
+    },
+
+    setPosition :function(x, y) {
+        if ($defined(x)) {
+            this._native.setAttribute('x', parseInt(x));
+        }
+        if ($defined(y)) {
+            this._native.setAttribute('y', parseInt(y));
+        }
+    },
+
+    getPosition :function() {
+        var x = this._native.getAttribute('x');
+        var y = this._native.getAttribute('y');
+        return {x:parseInt(x),y:parseInt(y)};
+    },
+
+    setSize :function(width, height) {
+        this.parent(width, height);
+
+        var min = width < height ? width : height;
+        if ($defined(this._arc)) {
+            // Transform percentages to SVG format.
+            var arc = (min / 2) * this._arc;
+            this._native.setAttribute('rx', arc);
+            this._native.setAttribute('ry', arc);
+        }
+    }
+});
+
+export default RectPeer;

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

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

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

@@ -1,193 +1,197 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const ElementPeer = require('./ElementPeer').default;
-const Font = require('../../Font').default;
-
-const TextPeer = new Class({
-  Extends: ElementPeer,
-  initialize() {
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'text');
-    this.parent(svgElement);
-    this._position = { x: 0, y: 0 };
-    this._font = new Font('Arial', this);
-  },
-
-  append(element) {
-    this._native.appendChild(element._native);
-  },
-
-  setTextAlignment(align) {
-    this._textAlign = align;
-  },
-
-  getTextAlignment() {
-    return $defined(this._textAlign) ? this._textAlign : 'left';
-  },
-
-  setText(text) {
-    // Remove all previous nodes ...
-    while (this._native.firstChild) {
-      this._native.removeChild(this._native.firstChild);
-    }
-
-    this._text = text;
-    if (text) {
-      const lines = text.split('\n');
-      const me = this;
-      // FIXME: we could use underscorejs here
-      lines.forEach((line) => {
-        const tspan = window.document.createElementNS(me.svgNamespace, 'tspan');
-        tspan.setAttribute('dy', '1em');
-        tspan.setAttribute('x', me.getPosition().x);
-
-        tspan.textContent = line.length == 0 ? ' ' : line;
-        me._native.appendChild(tspan);
-      });
-    }
-  },
-
-  getText() {
-    return this._text;
-  },
-
-  setPosition(x, y) {
-    this._position = { x, y };
-    this._native.setAttribute('y', y);
-    this._native.setAttribute('x', x);
-
-    // tspan must be positioned manually.
-    $(this._native).children('tspan').attr('x', x);
-  },
-
-  getPosition() {
-    return this._position;
-  },
-
-  getNativePosition() {
-    return $(this._native).position();
-  },
-
-  setFont(font, size, style, weight) {
-    if ($defined(font)) {
-      this._font = new Font(font, this);
-    }
-    if ($defined(style)) {
-      this._font.setStyle(style);
-    }
-    if ($defined(weight)) {
-      this._font.setWeight(weight);
-    }
-    if ($defined(size)) {
-      this._font.setSize(size);
-    }
-    this._updateFontStyle();
-  },
-
-  _updateFontStyle() {
-    this._native.setAttribute('font-family', this._font.getFontFamily());
-    this._native.setAttribute('font-size', this._font.getGraphSize());
-    this._native.setAttribute('font-style', this._font.getStyle());
-    this._native.setAttribute('font-weight', this._font.getWeight());
-  },
-
-  setColor(color) {
-    this._native.setAttribute('fill', color);
-  },
-
-  getColor() {
-    return this._native.getAttribute('fill');
-  },
-
-  setTextSize(size) {
-    this._font.setSize(size);
-    this._updateFontStyle();
-  },
-
-  setContentSize(width, height) {
-    this._native.xTextSize = `${width.toFixed(1)},${height.toFixed(1)}`;
-  },
-
-  setStyle(style) {
-    this._font.setStyle(style);
-    this._updateFontStyle();
-  },
-
-  setWeight(weight) {
-    this._font.setWeight(weight);
-    this._updateFontStyle();
-  },
-
-  setFontFamily(family) {
-    const oldFont = this._font;
-    this._font = new Font(family, this);
-    this._font.setSize(oldFont.getSize());
-    this._font.setStyle(oldFont.getStyle());
-    this._font.setWeight(oldFont.getWeight());
-    this._updateFontStyle();
-  },
-
-  getFont() {
-    return {
-      font: this._font.getFont(),
-      size: parseInt(this._font.getSize()),
-      style: this._font.getStyle(),
-      weight: this._font.getWeight(),
-    };
-  },
-
-  setSize(size) {
-    this._font.setSize(size);
-    this._updateFontStyle();
-  },
-
-  getWidth() {
-    let computedWidth;
-    // Firefox hack for this issue:http://stackoverflow.com/questions/6390065/doing-ajax-updates-in-svg-breaks-getbbox-is-there-a-workaround
-    try {
-      computedWidth = this._native.getBBox().width;
-      // Chrome bug is producing this error, oly during page loading. Remove the hack if it works. The issue seems to be
-      // caused when the element is hidden. I don't know why, but it works ...
-      if (computedWidth == 0) {
-        const bbox = this._native.getBBox();
-        computedWidth = bbox.width;
-      }
-    } catch (e) {
-      computedWidth = 10;
-    }
-
-    let width = parseInt(computedWidth);
-    width += this._font.getWidthMargin();
-    return width;
-  },
-
-  getHeight() {
-    // Firefox hack for this issue:http://stackoverflow.com/questions/6390065/doing-ajax-updates-in-svg-breaks-getbbox-is-there-a-workaround
-    try {
-      var computedHeight = this._native.getBBox().height;
-    } catch (e) {
-      computedHeight = 10;
-    }
-    return parseInt(computedHeight);
-  },
-
-  getHtmlFontSize() {
-    return this._font.getHtmlSize();
-  },
-});
-
-export default TextPeer;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const ElementPeer = require('./ElementPeer').default
+const Font = require('../../Font').default
+
+const TextPeer = new Class({
+    Extends: ElementPeer,
+    initialize: function () {
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'text');
+        this.parent(svgElement);
+        this._position = {x: 0, y: 0};
+        this._font = new Font("Arial", this);
+    },
+
+    append: function (element) {
+        this._native.appendChild(element._native);
+    },
+
+    setTextAlignment: function (align) {
+        this._textAlign = align;
+    },
+
+
+    getTextAlignment: function () {
+        return $defined(this._textAlign) ? this._textAlign : 'left';
+    },
+
+    setText: function (text) {
+        // Remove all previous nodes ...
+        while (this._native.firstChild) {
+            this._native.removeChild(this._native.firstChild);
+        }
+
+        this._text = text;
+        if (text) {
+            var lines = text.split('\n');
+            var me = this;
+            //FIXME: we could use underscorejs here
+            lines.forEach(function (line) {
+                var tspan = window.document.createElementNS(me.svgNamespace, 'tspan');
+                tspan.setAttribute('dy', '1em');
+                tspan.setAttribute('x', me.getPosition().x);
+
+                tspan.textContent = line.length == 0 ? " " : line;
+                me._native.appendChild(tspan);
+            });
+        }
+    },
+
+    getText: function () {
+        return this._text;
+    },
+
+    setPosition: function (x, y) {
+        this._position = {x: x, y: y};
+        this._native.setAttribute('y', y);
+        this._native.setAttribute('x', x);
+
+        // tspan must be positioned manually.
+        $(this._native).children('tspan').attr('x', x);
+    },
+
+    getPosition: function () {
+        return this._position;
+    },
+
+    getNativePosition: function() {
+        return $(this._native).position();
+    },
+
+    setFont: function (font, size, style, weight) {
+        if ($defined(font)) {
+            this._font = new Font(font, this);
+        }
+        if ($defined(style)) {
+            this._font.setStyle(style);
+        }
+        if ($defined(weight)) {
+            this._font.setWeight(weight);
+        }
+        if ($defined(size)) {
+            this._font.setSize(size);
+        }
+        this._updateFontStyle();
+    },
+
+    _updateFontStyle: function () {
+        this._native.setAttribute('font-family', this._font.getFontFamily());
+        this._native.setAttribute('font-size', this._font.getGraphSize());
+        this._native.setAttribute('font-style', this._font.getStyle());
+        this._native.setAttribute('font-weight', this._font.getWeight());
+    },
+
+    setColor: function (color) {
+        this._native.setAttribute('fill', color);
+    },
+
+    getColor: function () {
+        return this._native.getAttribute('fill');
+    },
+
+    setTextSize: function (size) {
+        this._font.setSize(size);
+        this._updateFontStyle();
+    },
+
+    setContentSize: function (width, height) {
+        this._native.xTextSize = width.toFixed(1) + "," + height.toFixed(1);
+    },
+
+    setStyle: function (style) {
+        this._font.setStyle(style);
+        this._updateFontStyle();
+    },
+
+    setWeight: function (weight) {
+        this._font.setWeight(weight);
+        this._updateFontStyle();
+    },
+
+    setFontFamily: function (family) {
+        var oldFont = this._font;
+        this._font = new Font(family, this);
+        this._font.setSize(oldFont.getSize());
+        this._font.setStyle(oldFont.getStyle());
+        this._font.setWeight(oldFont.getWeight());
+        this._updateFontStyle();
+    },
+
+    getFont: function () {
+        return {
+            font: this._font.getFont(),
+            size: parseInt(this._font.getSize()),
+            style: this._font.getStyle(),
+            weight: this._font.getWeight()
+        };
+    },
+
+    setSize: function (size) {
+        this._font.setSize(size);
+        this._updateFontStyle();
+    },
+
+    getWidth: function () {
+        var computedWidth;
+        // Firefox hack for this issue:http://stackoverflow.com/questions/6390065/doing-ajax-updates-in-svg-breaks-getbbox-is-there-a-workaround
+        try {
+
+            computedWidth = this._native.getBBox().width;
+            // Chrome bug is producing this error, oly during page loading. Remove the hack if it works. The issue seems to be
+            // caused when the element is hidden. I don't know why, but it works ...
+            if (computedWidth == 0) {
+                var bbox = this._native.getBBox();
+                computedWidth = bbox.width;
+            }
+
+        } catch (e) {
+            computedWidth = 10;
+
+        }
+
+        var width = parseInt(computedWidth);
+        width = width + this._font.getWidthMargin();
+        return width;
+    },
+
+    getHeight: function () {
+        // Firefox hack for this issue:http://stackoverflow.com/questions/6390065/doing-ajax-updates-in-svg-breaks-getbbox-is-there-a-workaround
+        try {
+            var computedHeight = this._native.getBBox().height;
+        } catch (e) {
+            computedHeight = 10;
+        }
+        return parseInt(computedHeight);
+    },
+
+    getHtmlFontSize: function () {
+        return this._font.getHtmlSize();
+    }
+});
+
+export default TextPeer;

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

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

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

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

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

@@ -1,111 +1,112 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-const ElementPeer = require('./ElementPeer').default;
-const EventUtils = require('../utils/EventUtils').default;
-
-const WorkspacePeer = new Class({
-  Extends: ElementPeer,
-  initialize(element) {
-    this._element = element;
-    const svgElement = window.document.createElementNS(this.svgNamespace, 'svg');
-    this.parent(svgElement);
-    this._native.setAttribute('focusable', 'true');
-    this._native.setAttribute('id', 'workspace');
-    this._native.setAttribute('preserveAspectRatio', 'none');
-  },
-
-  /**
-     * http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox  attribute
-     * It is often desirable to specify that a given set of graphics stretch to fit a particular container element. The viewBox attribute provides this capability.
-     *
-     * All elements that establish a new viewport (see elements that establish viewports), plus the 'marker', 'pattern' and 'view' elements have attribute viewBox. The value of the viewBox attribute is a list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute preserveAspectRatio. If specified, an additional transformation is applied to all descendants of the given element to achieve the specified effect.
-     *
-     * A negative value for <width> or <height> is an error (see Error processing). A value of zero disables rendering of the element.
-     *
-     */
-
-  setCoordSize(width, height) {
-    const viewBox = this._native.getAttribute('viewBox');
-    let coords = [0, 0, 0, 0];
-    if (viewBox != null) {
-      coords = viewBox.split(/ /);
-    }
-    if ($defined(width)) {
-      coords[2] = width;
-    }
-
-    if ($defined(height)) {
-      coords[3] = height;
-    }
-
-    this._native.setAttribute('viewBox', coords.join(' '));
-    this._native.setAttribute('preserveAspectRatio', 'none');
-    EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-  },
-
-  getCoordSize() {
-    const viewBox = this._native.getAttribute('viewBox');
-    let coords = [1, 1, 1, 1];
-    if (viewBox != null) {
-      coords = viewBox.split(/ /);
-    }
-    return { width: coords[2], height: coords[3] };
-  },
-
-  setCoordOrigin(x, y) {
-    const viewBox = this._native.getAttribute('viewBox');
-
-    // ViewBox min-x ,min-y by default initializated with 0 and 0.
-    let coords = [0, 0, 0, 0];
-    if (viewBox != null) {
-      coords = viewBox.split(/ /);
-    }
-
-    if ($defined(x)) {
-      coords[0] = x;
-    }
-
-    if ($defined(y)) {
-      coords[1] = y;
-    }
-
-    this._native.setAttribute('viewBox', coords.join(' '));
-  },
-
-  append(child) {
-    this.parent(child);
-    EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize');
-  },
-
-  getCoordOrigin(child) {
-    const viewBox = this._native.getAttribute('viewBox');
-    let coords = [1, 1, 1, 1];
-    if (viewBox != null) {
-      coords = viewBox.split(/ /);
-    }
-    const x = parseFloat(coords[0]);
-    const y = parseFloat(coords[1]);
-    return { x, y };
-  },
-
-  getPosition() {
-    return { x: 0, y: 0 };
-  },
-});
-
-export default WorkspacePeer;
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const ElementPeer = require('./ElementPeer').default
+const EventUtils = require('../utils/EventUtils').default;
+
+const WorkspacePeer = new Class({
+    Extends: ElementPeer,
+    initialize: function (element) {
+        this._element = element;
+        var svgElement = window.document.createElementNS(this.svgNamespace, 'svg');
+        this.parent(svgElement);
+        this._native.setAttribute("focusable", "true");
+        this._native.setAttribute("id", "workspace");
+        this._native.setAttribute("preserveAspectRatio", "none");
+
+    },
+
+    /**
+     * http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox  attribute
+     * It is often desirable to specify that a given set of graphics stretch to fit a particular container element. The viewBox attribute provides this capability.
+     *
+     * All elements that establish a new viewport (see elements that establish viewports), plus the 'marker', 'pattern' and 'view' elements have attribute viewBox. The value of the viewBox attribute is a list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute preserveAspectRatio. If specified, an additional transformation is applied to all descendants of the given element to achieve the specified effect.
+     *
+     * A negative value for <width> or <height> is an error (see Error processing). A value of zero disables rendering of the element.
+     *
+     */
+
+    setCoordSize: function (width, height) {
+        var viewBox = this._native.getAttribute('viewBox');
+        var coords = [0, 0, 0, 0];
+        if (viewBox != null) {
+            coords = viewBox.split(/ /);
+        }
+        if ($defined(width)) {
+            coords[2] = width;
+        }
+
+        if ($defined(height)) {
+            coords[3] = height;
+        }
+
+        this._native.setAttribute('viewBox', coords.join(" "));
+        this._native.setAttribute("preserveAspectRatio", "none");
+        EventUtils.broadcastChangeEvent(this, "strokeStyle");
+    },
+
+    getCoordSize: function () {
+        var viewBox = this._native.getAttribute('viewBox');
+        var coords = [1, 1, 1, 1];
+        if (viewBox != null) {
+            coords = viewBox.split(/ /);
+        }
+        return {width: coords[2], height: coords[3]};
+    },
+
+    setCoordOrigin: function (x, y) {
+        var viewBox = this._native.getAttribute('viewBox');
+
+        // ViewBox min-x ,min-y by default initializated with 0 and 0.
+        var coords = [0, 0, 0, 0];
+        if (viewBox != null) {
+            coords = viewBox.split(/ /);
+        }
+
+        if ($defined(x)) {
+            coords[0] = x;
+        }
+
+        if ($defined(y)) {
+            coords[1] = y;
+        }
+
+        this._native.setAttribute('viewBox', coords.join(" "));
+    },
+
+    append: function (child) {
+        this.parent(child);
+        EventUtils.broadcastChangeEvent(child, "onChangeCoordSize");
+    },
+
+    getCoordOrigin: function (child) {
+        var viewBox = this._native.getAttribute('viewBox');
+        var coords = [1, 1, 1, 1];
+        if (viewBox != null) {
+            coords = viewBox.split(/ /);
+        }
+        var x = parseFloat(coords[0]);
+        var y = parseFloat(coords[1]);
+        return {x: x, y: y};
+    },
+
+    getPosition: function () {
+        return {x: 0, y: 0};
+    }
+});
+
+export default WorkspacePeer;

packages/web2d/lib/components/peer/utils/EventUtils.js

@@ -1,37 +1,37 @@
-/*
- *    Copyright [2015] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-
-const EventUtils = {
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+const EventUtils = {
     broadcastChangeEvent: function (elementPeer, type) { //eslint-disable-line
-    const listeners = elementPeer.getChangeEventListeners(type);
+        var listeners = elementPeer.getChangeEventListeners(type);
         if ($defined(listeners)) { //eslint-disable-line
-      for (let i = 0; i < listeners.length; i++) {
-        const listener = listeners[i];
-        listener.call(elementPeer, null);
-      }
-    }
-
-    const children = elementPeer.getChildren();
-    for (let j = 0; j < children.length; j++) {
-      const child = children[j];
-      EventUtils.broadcastChangeEvent(child, type);
-    }
-  },
-};
-
-export default EventUtils;
+            for (var i = 0; i < listeners.length; i++) {
+                var listener = listeners[i];
+                listener.call(elementPeer, null);
+            }
+        }
+
+        var children = elementPeer.getChildren();
+        for (var j = 0; j < children.length; j++) {
+            var child = children[j];
+            EventUtils.broadcastChangeEvent(child, type);
+        }
+    },
+};
+
+export default EventUtils;

packages/web2d/lib/components/peer/utils/TransformUtils.js

@@ -1,38 +1,39 @@
-/*
-*    Copyright [2015] [wisemapping]
-*
-*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
-*   It is basically the Apache License, Version 2.0 (the "License") plus the
-*   "powered by wisemapping" text requirement on every single page;
-*   you may not use this file except in compliance with the License.
-*   You may obtain a copy of the license at
-*
-*       http://www.wisemapping.org/license
-*
-*   Unless required by applicable law or agreed to in writing, software
-*   distributed under the License is distributed on an "AS IS" BASIS,
-*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-*   See the License for the specific language governing permissions and
-*   limitations under the License.
-*/
-
-const TransformUtil = {
-
+/*
+*    Copyright [2015] [wisemapping]
+*
+*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+*   It is basically the Apache License, Version 2.0 (the "License") plus the
+*   "powered by wisemapping" text requirement on every single page;
+*   you may not use this file except in compliance with the License.
+*   You may obtain a copy of the license at
+*
+*       http://www.wisemapping.org/license
+*
+*   Unless required by applicable law or agreed to in writing, software
+*   distributed under the License is distributed on an "AS IS" BASIS,
+*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*   See the License for the specific language governing permissions and
+*   limitations under the License.
+*/
+
+const TransformUtil = {
+
     workoutScale: function(elementPeer) //eslint-disable-line
-  {
-    let current = elementPeer.getParent();
-    let width = 1;
-    let height = 1;
-    while (current) {
-      const coordSize = current.getCoordSize();
-      const size = current.getSize();
-
-      width *= (parseInt(size.width) / coordSize.width);
-      height *= (parseInt(size.height) / coordSize.height);
-      current = current.getParent();
-    }
-    return { width, height };
-  },
-};
-
-export default TransformUtil;
+    {
+        var current = elementPeer.getParent();
+        var width = 1;
+        var height = 1;
+        while (current)
+        {
+            var coordSize = current.getCoordSize();
+            var size = current.getSize();
+
+            width = width * (parseInt(size.width) / coordSize.width);
+            height = height * (parseInt(size.height) / coordSize.height);
+            current = current.getParent();
+        }
+        return {width:width,height:height};
+    }
+};
+
+export default TransformUtil;

packages/web2d/lib/web2d.js

@@ -1,6 +1,8 @@
+'use strict';
+
 function web2D() {
-  global.$ = require('jquery');
-  require('mootools');
+    global.$ = require('jquery');
+    require('mootools');
     const coreJs = require('@wismapping/core-js'); //eslint-disable-line
     global.core = coreJs(); //eslint-disable-line
 
@@ -35,38 +37,38 @@ function web2D() {
     const verdanaFont = require('./components/peer/svg/VerdanaFont').default; //eslint-disable-line
     const point = require('./components/Point').default; //eslint-disable-line
 
-  const web2d = {
-    ElementPeer: elementPeer,
-    Element: element,
-    Workspace: workspace,
-    WorkspacePeer: workspacePeer,
-    Toolkit: toolkit,
-    Elipse: elipse,
-    ElipsePeer: elipsePeer,
-    LinePeer: linePeer,
-    Line: line,
-    PolyLine: polyLine,
-    CurvedLine: curvedLine,
-    Arrow: arrow,
-    PolyLinePeer: polyLinePeer,
-    CurvedLinePeer: curvedLinePeer,
-    ArrowPeer: arrowPeer,
-    GroupPeer: groupPeer,
-    Group: group,
-    Rect: rect,
-    RectPeer: rectPeer,
-    Text: text,
-    TextPeer: textPeer,
-    TransformUtils: transformUtils,
-    EventUtils: eventUtils,
-    Font: font,
-    FontPeer: fontPeer,
-    TahomaFont: tahomaFont,
-    TimesFont: timesFont,
-    ArialFont: arialFont,
-    VerdanaFont: verdanaFont,
-    Point: point,
-  };
+    const web2d = {
+        ElementPeer: elementPeer,
+        Element: element,
+        Workspace: workspace,
+        WorkspacePeer: workspacePeer,
+        Toolkit: toolkit,
+        Elipse: elipse,
+        ElipsePeer: elipsePeer,
+        LinePeer: linePeer,
+        Line: line,
+        PolyLine: polyLine,
+        CurvedLine: curvedLine,
+        Arrow: arrow,
+        PolyLinePeer: polyLinePeer,
+        CurvedLinePeer: curvedLinePeer,
+        ArrowPeer: arrowPeer,
+        GroupPeer: groupPeer,
+        Group: group,
+        Rect: rect,
+        RectPeer: rectPeer,
+        Text: text,
+        TextPeer: textPeer,
+        TransformUtils: transformUtils,
+        EventUtils: eventUtils,
+        Font: font,
+        FontPeer: fontPeer,
+        TahomaFont: tahomaFont,
+        TimesFont: timesFont,
+        ArialFont: arialFont,
+        VerdanaFont: verdanaFont,
+        Point: point,
+    };
 
     return web2d; //eslint-disable-line
 }

packages/web2d/package.json

@@ -12,7 +12,6 @@
     "files": [
         "lib"
     ],
-    "type": "commonjs",
     "publishConfig": {
         "registry": "https://registry.yarnpkg.com"
     },
@@ -29,20 +28,9 @@
         "@babel/core": "^7.14.6",
         "@babel/plugin-transform-modules-commonjs": "^7.14.5",
         "@babel/preset-env": "^7.14.7",
-        "@typescript-eslint/eslint-plugin": "^4.32.0",
-        "@typescript-eslint/parser": "^4.32.0",
         "babel-loader": "^8.2.2",
         "clean-webpack-plugin": "^4.0.0-alpha.0",
         "core-js": "^3.15.2",
-        "eslint": "^7.32.0",
-        "eslint-config-airbnb": "^18.2.1",
-        "eslint-config-airbnb-base": "^14.2.1",
-        "eslint-loader": "^4.0.2",
-        "eslint-plugin-import": "^2.24.2",
-        "eslint-plugin-jsx-a11y": "^6.4.1",
-        "eslint-plugin-only-warn": "^1.0.3",
-        "eslint-plugin-react": "^7.26.1",
-        "eslint-plugin-react-hooks": "^4.2.0",
         "html-webpack-plugin": "^5.3.2",
         "nodemon": "^2.0.12",
         "webpack": "^5.44.0",
@@ -53,7 +41,6 @@
     "dependencies": {
         "@wisemapping/mindplot": "^0.0.1",
         "@wismapping/core-js": "^0.0.1",
-        "babel-eslint": "^10.1.0",
         "jquery": "2.1.0",
         "mootools": "1.4.5"
     }

packages/web2d/webpack.common.js

@@ -12,15 +12,19 @@ module.exports = {
     module: {
         rules: [
             {
-                use: ["babel-loader", "eslint-loader"],
-                test: /.js$/,
+                use: 'babel-loader',
+                test: /.(js|jsx)$/,
                 exclude: /node_modules/,
-            }
+            },
+            {
+                type: 'asset',
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+            },
         ],
     },
     target: 'web',
     resolve: {
-        extensions: ['.js', '.json'],
+        extensions: ['.js', '.jsx', '.json'],
     },
     plugins: [new CleanWebpackPlugin()],
 };

yarn.lock

@@ -228,7 +228,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.15.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.7.0":
+"@babel/parser@^7.15.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
 
@@ -748,7 +748,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   dependencies:
@@ -762,7 +762,7 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.5":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
   dependencies:
@@ -776,7 +776,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.15.4", "@babel/types@^7.15.6", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.15.4", "@babel/types@^7.15.6", "@babel/types@^7.4.4":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
   dependencies:
@@ -1989,10 +1989,6 @@
   version "1.0.33"
   resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.33.tgz#099b0712d824d15e2660c20e1c16e6a8381f308c"
 
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-
 "@types/lodash@^4.14.150":
   version "4.14.175"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"
@@ -2140,7 +2136,7 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^4.31.0", "@typescript-eslint/eslint-plugin@^4.32.0", "@typescript-eslint/eslint-plugin@^4.8.1":
+"@typescript-eslint/eslint-plugin@^4.31.0", "@typescript-eslint/eslint-plugin@^4.8.1":
   version "4.32.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.32.0.tgz#46d2370ae9311092f2a6f7246d28357daf2d4e89"
   dependencies:
@@ -2164,7 +2160,7 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/parser@^4.31.0", "@typescript-eslint/parser@^4.32.0", "@typescript-eslint/parser@^4.8.1":
+"@typescript-eslint/parser@^4.31.0", "@typescript-eslint/parser@^4.8.1":
   version "4.32.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.32.0.tgz#751ecca0e2fecd3d44484a9b3049ffc1871616e5"
   dependencies:
@@ -2634,7 +2630,7 @@ array-ify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
 
-array-includes@^3.1.1, array-includes@^3.1.3:
+array-includes@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
   dependencies:
@@ -2662,14 +2658,6 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
-array.prototype.flat@^1.2.4:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz#07e0975d84bbc7c48cd1879d609e682598d33e13"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.0"
-
 array.prototype.flatmap@^1.2.4:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz#908dc82d8a406930fdf38598d51e7411d18d4446"
@@ -2700,10 +2688,6 @@ assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
 
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -2754,31 +2738,12 @@ aws4@^1.8.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
 
-axe-core@^4.0.2:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325"
-
 axios@^0.21.0, axios@^0.21.1:
   version "0.21.4"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
   dependencies:
     follow-redirects "^1.14.0"
 
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
-
-babel-eslint@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    eslint-visitor-keys "^1.0.0"
-    resolve "^1.12.0"
-
 babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@@ -3611,10 +3576,6 @@ configstore@^5.0.1:
     write-file-atomic "^3.0.0"
     xdg-basedir "^4.0.0"
 
-confusing-browser-globals@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz#30d1e7f3d1b882b25ec4933d1d1adac353d20a59"
-
 connect-history-api-fallback@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
@@ -4040,10 +4001,6 @@ cypress@^6.5.0:
     url "^0.11.0"
     yauzl "^2.10.0"
 
-damerau-levenshtein@^1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
-
 dargs@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
@@ -4098,7 +4055,7 @@ debug@3.1.0:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-0.8.1.tgz#20ff4d26f5e422cb68a1bacbbb61039ad8c1c130"
 
-debug@^3.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
+debug@^3.1.0, debug@^3.1.1, debug@^3.2.6:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   dependencies:
@@ -4402,10 +4359,6 @@ emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
 
-emoji-regex@^9.0.0:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
-
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
@@ -4504,31 +4457,6 @@ es-abstract@^1.18.0-next.2, es-abstract@^1.18.1, es-abstract@^1.18.2, es-abstrac
     string.prototype.trimstart "^1.0.4"
     unbox-primitive "^1.0.1"
 
-es-abstract@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
-  dependencies:
-    call-bind "^1.0.2"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    get-intrinsic "^1.1.1"
-    get-symbol-description "^1.0.0"
-    has "^1.0.3"
-    has-symbols "^1.0.2"
-    internal-slot "^1.0.3"
-    is-callable "^1.2.4"
-    is-negative-zero "^2.0.1"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.1"
-    is-string "^1.0.7"
-    is-weakref "^1.0.1"
-    object-inspect "^1.11.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    string.prototype.trimend "^1.0.4"
-    string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.1"
-
 es-module-lexer@^0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.2.tgz#d0a8c72c5d904014111fac7fab4c92b9ac545564"
@@ -4575,95 +4503,15 @@ escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
 
-eslint-config-airbnb-base@^14.2.1:
-  version "14.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz#8a2eb38455dc5a312550193b319cdaeef042cd1e"
-  dependencies:
-    confusing-browser-globals "^1.0.10"
-    object.assign "^4.1.2"
-    object.entries "^1.1.2"
-
-eslint-config-airbnb@^18.2.1:
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9"
-  dependencies:
-    eslint-config-airbnb-base "^14.2.1"
-    object.assign "^4.1.2"
-    object.entries "^1.1.2"
-
 eslint-config-prettier@^8.0.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
 
-eslint-import-resolver-node@^0.3.6:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
-  dependencies:
-    debug "^3.2.7"
-    resolve "^1.20.0"
-
-eslint-loader@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-4.0.2.tgz#386a1e21bcb613b3cf2d252a3b708023ccfb41ec"
-  dependencies:
-    find-cache-dir "^3.3.1"
-    fs-extra "^8.1.0"
-    loader-utils "^2.0.0"
-    object-hash "^2.0.3"
-    schema-utils "^2.6.5"
-
-eslint-module-utils@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.2.tgz#94e5540dd15fe1522e8ffa3ec8db3b7fa7e7a534"
-  dependencies:
-    debug "^3.2.7"
-    pkg-dir "^2.0.0"
-
-eslint-plugin-import@^2.24.2:
-  version "2.24.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.24.2.tgz#2c8cd2e341f3885918ee27d18479910ade7bb4da"
-  dependencies:
-    array-includes "^3.1.3"
-    array.prototype.flat "^1.2.4"
-    debug "^2.6.9"
-    doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.6.2"
-    find-up "^2.0.0"
-    has "^1.0.3"
-    is-core-module "^2.6.0"
-    minimatch "^3.0.4"
-    object.values "^1.1.4"
-    pkg-up "^2.0.0"
-    read-pkg-up "^3.0.0"
-    resolve "^1.20.0"
-    tsconfig-paths "^3.11.0"
-
-eslint-plugin-jsx-a11y@^6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    aria-query "^4.2.2"
-    array-includes "^3.1.1"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.0.2"
-    axobject-query "^2.2.0"
-    damerau-levenshtein "^1.0.6"
-    emoji-regex "^9.0.0"
-    has "^1.0.3"
-    jsx-ast-utils "^3.1.0"
-    language-tags "^1.0.5"
-
-eslint-plugin-only-warn@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.0.3.tgz#a75f3a9ded7f03e9808e75ec27f22b644084506e"
-
 eslint-plugin-react-hooks@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
 
-eslint-plugin-react@^7.21.5, eslint-plugin-react@^7.26.1:
+eslint-plugin-react@^7.21.5:
   version "7.26.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.26.1.tgz#41bcfe3e39e6a5ac040971c1af94437c80daa40e"
   dependencies:
@@ -4701,7 +4549,7 @@ eslint-utils@^3.0.0:
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
 
@@ -4709,7 +4557,7 @@ eslint-visitor-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
 
-eslint@^7.14.0, eslint@^7.32.0:
+eslint@^7.14.0:
   version "7.32.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
   dependencies:
@@ -5177,7 +5025,7 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.0.0, find-up@^2.1.0:
+find-up@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
   dependencies:
@@ -6195,7 +6043,7 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.1.1"
 
-is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.6.0:
+is-core-module@^2.2.0, is-core-module@^2.5.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.7.0.tgz#3c0ef7d31b4acfc574f80c58409d568a836848e3"
   dependencies:
@@ -6676,7 +6524,7 @@ jss@10.8.0, jss@^10.5.1:
     is-in-browser "^1.1.3"
     tiny-warning "^1.0.2"
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
   dependencies:
@@ -6721,16 +6569,6 @@ klona@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
 
-language-subtag-registry@~0.3.2:
-  version "0.3.21"
-  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
-
-language-tags@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  dependencies:
-    language-subtag-registry "~0.3.2"
-
 latest-version@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
@@ -7788,10 +7626,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-hash@^2.0.3:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
-
 object-inspect@^1.11.0, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
@@ -7822,14 +7656,6 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
 object.entries@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.4.tgz#43ccf9a50bc5fd5b649d45ab1a579f24e088cafd"
@@ -8296,12 +8122,6 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
-  dependencies:
-    find-up "^2.1.0"
-
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -8320,12 +8140,6 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  dependencies:
-    find-up "^2.1.0"
-
 please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
@@ -9130,7 +8944,7 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.14.2, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   dependencies:
@@ -10297,15 +10111,6 @@ ts-node@^9.0.0:
     source-map-support "^0.5.17"
     yn "3.1.1"
 
-tsconfig-paths@^3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz#954c1fe973da6339c78e06b03ce2e48810b65f36"
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
-    minimist "^1.2.0"
-    strip-bom "^3.0.0"
-
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"