Fix indentation and formating problems

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es2021": true
+    },
+    "extends": [
+        "airbnb-base"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 12
+    },
+    "rules": {
+    }
+}

packages/web2d/.eslintrc.json

@@ -1,16 +1,15 @@
 {
-    "root": true,
     "env": {
         "browser": true,
+        "commonjs": true,
         "es2021": true
     },
     "extends": [
-        "eslint:recommended",
+        "airbnb-base"
-        "prettier"
     ],
-    "parser": "babel-eslint",
     "parserOptions": {
-        "ecmaVersion": 12,
+        "ecmaVersion": 12
-        "sourceType": "module"
+    },
+    "rules": {
     }
 }

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

packages/web2d/lib/components/CurvedLine.js

@@ -19,102 +19,103 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit').default;
 
 const CurvedLine = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize: function(attributes) {
+  initialize(attributes) {
-        var peer = Toolkit.createCurvedLine();
+    const peer = Toolkit.createCurvedLine();
-        var defaultAttributes = {strokeColor:'blue',strokeWidth:1,strokeStyle:'solid',strokeOpacity:1};
+    const defaultAttributes = {
-        for (var key in attributes) {
+      strokeColor: 'blue', strokeWidth: 1, strokeStyle: 'solid', strokeOpacity: 1,
-            defaultAttributes[key] = attributes[key];
+    };
-        }
+    for (const key in attributes) {
-        this.parent(peer, defaultAttributes);
+      defaultAttributes[key] = attributes[key];
-    },
-
-    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
+const Element = new Class({ // eslint-disable-line no-undef
-    initialize: function (peer, attributes) {
+  initialize(peer, attributes) {
-        this._peer = peer;
+    this._peer = peer;
-        if (peer == null) {
+    if (peer == null) {
-            throw new Error('Element peer can not be null');
+      throw new Error('Element peer can not be null');
-        }
+    }
 
-        if ($defined(attributes)) { //eslint-disable-line no-undef
+    if ($defined(attributes)) { // eslint-disable-line no-undef
-            this._initialize(attributes);
+      this._initialize(attributes);
-        }
+    }
-    },
+  },
 
-    _initialize: function (attributes) {
+  _initialize(attributes) {
-        var batchExecute = {};
+    const batchExecute = {};
 
-        // Collect arguments ...
+    // Collect arguments ...
-        for (var key in attributes) {
+    for (var key in attributes) {
-            var funcName = this._attributeNameToFuncName(key, 'set');
+      const funcName = this._attributeNameToFuncName(key, 'set');
-            var funcArgs = batchExecute[funcName];
+      let funcArgs = batchExecute[funcName];
-            if (!$defined(funcArgs)) { //eslint-disable-line no-undef
+      if (!$defined(funcArgs)) { // eslint-disable-line no-undef
-                funcArgs = [];
+        funcArgs = [];
-            }
+      }
 
-            var signature = Element._propertyNameToSignature[key];
+      const signature = Element._propertyNameToSignature[key];
-            var argPositions = signature[1];
+      const argPositions = signature[1];
-            if (argPositions != Element._SIGNATURE_MULTIPLE_ARGUMENTS) {
+      if (argPositions != Element._SIGNATURE_MULTIPLE_ARGUMENTS) {
-                funcArgs[argPositions] = attributes[key];
+        funcArgs[argPositions] = attributes[key];
-            } else {
+      } else {
-                funcArgs = attributes[key].split(' ');
+        funcArgs = attributes[key].split(' ');
-            }
+      }
-            batchExecute[funcName] = funcArgs;
+      batchExecute[funcName] = funcArgs;
-        }
+    }
 
-        // Call functions ...
+    // Call functions ...
-        for (var key in batchExecute) { //eslint-disable-line no-redeclare
+    for (var key in batchExecute) { // eslint-disable-line no-redeclare
-            var func = this[key];
+      const func = this[key];
-            if (!$defined(func)) { //eslint-disable-line no-undef
+      if (!$defined(func)) { // eslint-disable-line no-undef
-                throw new Error('Could not find function: ' + key);
+        throw new Error(`Could not find function: ${key}`);
-            }
+      }
-            func.apply(this, batchExecute[key]);
+      func.apply(this, batchExecute[key]);
-        }
+    }
-    },
+  },
 
-    setSize: function (width, height) {
+  setSize(width, height) {
-        this._peer.setSize(width, height);
+    this._peer.setSize(width, height);
-    },
+  },
 
-    setPosition: function (cx, cy) {
+  setPosition(cx, cy) {
-        this._peer.setPosition(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: function (type, listener) {
+  addEvent(type, listener) {
-        this._peer.addEvent(type, listener);
+    this._peer.addEvent(type, listener);
-    },
+  },
 
-    trigger: function (type, event) {
+  trigger(type, event) {
-        this._peer.trigger(type, event);
+    this._peer.trigger(type, event);
-    },
+  },
 
-    cloneEvents: function (from) {
+  cloneEvents(from) {
-        this._peer.cloneEvents(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: function (type, listener) {
+  removeEvent(type, listener) {
-        this._peer.removeEvent(type, listener);
+    this._peer.removeEvent(type, listener);
-    },
+  },
 
-    /**
+  /**
      * /*
      * Returns element type name.
      */
-    getType: function () {
+  getType() {
-        throw new Error(
+    throw new Error(
-            'Not implemeneted yet. This method must be implemented by all the inherited objects.'
+      'Not implemeneted yet. This method must be implemented by all the inherited objects.',
-        );
+    );
-    },
+  },
 
-    /**
+  /**
      * Todo: Doc
      */
-    getFill: function () {
+  getFill() {
-        return this._peer.getFill();
+    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: function (color, opacity) {
+  setFill(color, opacity) {
-        this._peer.setFill(color, opacity);
+    this._peer.setFill(color, opacity);
-    },
+  },
 
-    getPosition: function () {
+  getPosition() {
-        return this._peer.getPosition();
+    return this._peer.getPosition();
-    },
+  },
 
-    getNativePosition: function () {
+  getNativePosition() {
-        return this._peer.getNativePosition();
+    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: function (width, style, color, opacity) {
+  setStroke(width, style, color, opacity) {
-        if (
+    if (
-            style != null &&
+      style != null
-            style != undefined &&
+            && style != undefined
-            style != 'dash' &&
+            && style != 'dash'
-            style != 'dot' &&
+            && style != 'dot'
-            style != 'solid' &&
+            && style != 'solid'
-            style != 'longdash' &&
+            && style != 'longdash'
-            style != 'dashdot'
+            && style != 'dashdot'
-        ) {
+    ) {
-            throw new Error("Unsupported stroke style: '" + style + "'");
+      throw new Error(`Unsupported stroke style: '${style}'`);
-        }
+    }
-        this._peer.setStroke(width, style, color, opacity);
+    this._peer.setStroke(width, style, color, opacity);
-    },
+  },
 
-    _attributeNameToFuncName: function (attributeKey, prefix) {
+  _attributeNameToFuncName(attributeKey, prefix) {
-        var signature = Element._propertyNameToSignature[attributeKey];
+    const signature = Element._propertyNameToSignature[attributeKey];
-        if (!$defined(signature)) { //eslint-disable-line no-undef
+    if (!$defined(signature)) { // eslint-disable-line no-undef
-            throw 'Unsupported attribute: ' + attributeKey;
+      throw `Unsupported attribute: ${attributeKey}`;
-        }
+    }
 
-        var firstLetter = signature[0].charAt(0);
+    const firstLetter = signature[0].charAt(0);
-        return prefix + firstLetter.toUpperCase() + signature[0].substring(1);
+    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: function (key, value) {
+  setAttribute(key, value) {
-        var funcName = this._attributeNameToFuncName(key, 'set');
+    const funcName = this._attributeNameToFuncName(key, 'set');
 
-        var signature = Element._propertyNameToSignature[key];
+    const signature = Element._propertyNameToSignature[key];
-        if (signature == null) {
+    if (signature == null) {
-            throw 'Could not find the signature for:' + key;
+      throw `Could not find the signature for:${key}`;
-        }
+    }
 
-        // Parse arguments ..
+    // Parse arguments ..
-        var argPositions = signature[1];
+    const argPositions = signature[1];
-        var args = [];
+    let args = [];
-        if (argPositions !== this._SIGNATURE_MULTIPLE_ARGUMENTS) {
+    if (argPositions !== this._SIGNATURE_MULTIPLE_ARGUMENTS) {
-            args[argPositions] = value;
+      args[argPositions] = value;
-        } else if (typeof value == 'array') { //eslint-disable-line valid-typeof
+    } else if (typeof value === 'array') { // eslint-disable-line valid-typeof
-            args = value;
+      args = value;
-        } else {
+    } else {
-            var strValue = String(value);
+      const strValue = String(value);
-            args = strValue.split(' ');
+      args = strValue.split(' ');
-        }
+    }
 
-        // Look up method ...
+    // Look up method ...
-        var setter = this[funcName];
+    const setter = this[funcName];
-        if (setter == null) {
+    if (setter == null) {
-            throw 'Could not find the function name:' + funcName;
+      throw `Could not find the function name:${funcName}`;
-        }
+    }
-        setter.apply(this, args);
+    setter.apply(this, args);
-    },
+  },
 
-    getAttribute: function (key) {
+  getAttribute(key) {
-        var funcName = this._attributeNameToFuncName(key, 'get');
+    const funcName = this._attributeNameToFuncName(key, 'get');
 
-        var signature = Element._propertyNameToSignature[key];
+    const signature = Element._propertyNameToSignature[key];
-        if (signature == null) {
+    if (signature == null) {
-            throw 'Could not find the signature for:' + key;
+      throw `Could not find the signature for:${key}`;
-        }
+    }
 
-        var getter = this[funcName];
+    const getter = this[funcName];
-        if (getter == null) {
+    if (getter == null) {
-            throw 'Could not find the function name:' + funcName;
+      throw `Could not find the function name:${funcName}`;
-        }
+    }
 
-        var getterResult = getter.apply(this, []);
+    const getterResult = getter.apply(this, []);
-        var attibuteName = signature[2];
+    const attibuteName = signature[2];
-        if (!$defined(attibuteName)) { //eslint-disable-line no-undef
+    if (!$defined(attibuteName)) { // eslint-disable-line no-undef
-            throw 'Could not find attribute mapping for:' + key;
+      throw `Could not find attribute mapping for:${key}`;
-        }
+    }
 
-        var result = getterResult[attibuteName];
+    const result = getterResult[attibuteName];
-        if (!$defined(result)) { //eslint-disable-line no-undef
+    if (!$defined(result)) { // eslint-disable-line no-undef
-            throw 'Could not find attribute with name:' + attibuteName;
+      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: function (opacity) {
+  setOpacity(opacity) {
-        this._peer.setStroke(null, null, null, opacity);
+    this._peer.setStroke(null, null, null, opacity);
-        this._peer.setFill(null, opacity);
+    this._peer.setFill(null, opacity);
-    },
+  },
 
-    setVisibility: function (isVisible) {
+  setVisibility(isVisible) {
-        this._peer.setVisibility(isVisible);
+    this._peer.setVisibility(isVisible);
-    },
+  },
 
-    isVisible: function () {
+  isVisible() {
-        return this._peer.isVisible();
+    return this._peer.isVisible();
-    },
+  },
 
-    /**
+  /**
      * Move the element to the front
      */
-    moveToFront: function () {
+  moveToFront() {
-        this._peer.moveToFront();
+    this._peer.moveToFront();
-    },
+  },
 
-    /**
+  /**
      * Move the element to the back
      */
-    moveToBack: function () {
+  moveToBack() {
-        this._peer.moveToBack();
+    this._peer.moveToBack();
-    },
+  },
 
-    getStroke: function () {
+  getStroke() {
-        return this._peer.getStroke();
+    return this._peer.getStroke();
-    },
+  },
 
-    setCursor: function (type) {
+  setCursor(type) {
-        this._peer.setCursor(type);
+    this._peer.setCursor(type);
-    },
+  },
 
-    getParent: function () {
+  getParent() {
-        return this._peer.getParent();
+    return this._peer.getParent();
-    }, 
+  },
 });
 
 Element._SIGNATURE_MULTIPLE_ARGUMENTS = -1;
 Element._supportedEvents = [
-    'click',
+  'click',
-    'dblclick',
+  'dblclick',
-    'mousemove',
+  'mousemove',
-    'mouseout',
+  'mouseout',
-    'mouseover',
+  'mouseover',
-    'mousedown',
+  'mousedown',
-    'mouseup',
+  'mouseup',
 ];
 Element._propertyNameToSignature = {
-    // Format: [attribute name, argument position on setter, attribute name on getter]
+  // Format: [attribute name, argument position on setter, attribute name on getter]
-    size: ['size', -1],
+  size: ['size', -1],
-    width: ['size', 0, 'width'],
+  width: ['size', 0, 'width'],
-    height: ['size', 1, 'height'],
+  height: ['size', 1, 'height'],
 
-    position: ['position', -1],
+  position: ['position', -1],
-    x: ['position', 0, 'x'],
+  x: ['position', 0, 'x'],
-    y: ['position', 1, 'y'],
+  y: ['position', 1, 'y'],
 
-    stroke: ['stroke', -1],
+  stroke: ['stroke', -1],
-    strokeWidth: ['stroke', 0, 'width'],
+  strokeWidth: ['stroke', 0, 'width'],
-    strokeStyle: ['stroke', 1, 'style'],
+  strokeStyle: ['stroke', 1, 'style'],
-    strokeColor: ['stroke', 2, 'color'],
+  strokeColor: ['stroke', 2, 'color'],
-    strokeOpacity: ['stroke', 3, 'opacity'],
+  strokeOpacity: ['stroke', 3, 'opacity'],
 
-    fill: ['fill', -1],
+  fill: ['fill', -1],
-    fillColor: ['fill', 0, 'color'],
+  fillColor: ['fill', 0, 'color'],
-    fillOpacity: ['fill', 1, 'opacity'],
+  fillOpacity: ['fill', 1, 'opacity'],
 
-    coordSize: ['coordSize', -1],
+  coordSize: ['coordSize', -1],
-    coordSizeWidth: ['coordSize', 0, 'width'],
+  coordSizeWidth: ['coordSize', 0, 'width'],
-    coordSizeHeight: ['coordSize', 1, 'height'],
+  coordSizeHeight: ['coordSize', 1, 'height'],
 
-    coordOrigin: ['coordOrigin', -1],
+  coordOrigin: ['coordOrigin', -1],
-    coordOriginX: ['coordOrigin', 0, 'x'],
+  coordOriginX: ['coordOrigin', 0, 'x'],
-    coordOriginY: ['coordOrigin', 1, 'y'],
+  coordOriginY: ['coordOrigin', 1, 'y'],
 
-    visibility: ['visibility', 0],
+  visibility: ['visibility', 0],
-    opacity: ['opacity', 0],
+  opacity: ['opacity', 0],
 };
 
 export default Element;

packages/web2d/lib/components/Elipse.js

@@ -1,25 +1,26 @@
-
 const Element = require('./Element').default;
 const Toolkit = require('./Toolkit').default;
 
 const Elipse = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize: function(attributes) {
+  initialize(attributes) {
-        var peer = Toolkit.createElipse();
+    const peer = Toolkit.createElipse();
-        var defaultAttributes = {width:40, height:40, x:5, y:5,stroke:'1 solid black',fillColor:'blue'};
+    const defaultAttributes = {
-        for (var key in attributes) {
+      width: 40, height: 40, x: 5, y: 5, stroke: '1 solid black', fillColor: 'blue',
-            defaultAttributes[key] = attributes[key];
+    };
-        }
+    for (const key in attributes) {
-        this.parent(peer, defaultAttributes);
+      defaultAttributes[key] = attributes[key];
-    },
-
-    getType : function() {
-        return "Elipse";
-    },
-
-    getSize : function() {
-        return this._peer.getSize();
     }
+    this.parent(peer, defaultAttributes);
+  },
+
+  getType() {
+    return 'Elipse';
+  },
+
+  getSize() {
+    return this._peer.getSize();
+  },
 });
 
 export default Elipse;

packages/web2d/lib/components/Font.js

@@ -19,61 +19,61 @@ const Toolkit = require('./Toolkit');
 const TransformUtil = require('./peer/utils/TransformUtils').default;
 
 const Font = new Class({
-    initialize: function (fontFamily, textPeer) { 
+  initialize(fontFamily, textPeer) {
-        var font = 'Toolkit.default.create' + fontFamily + 'Font();';
+    const font = `Toolkit.default.create${fontFamily}Font();`;
-        this._peer = eval(font);
+    this._peer = eval(font);
-        this._textPeer = textPeer;
+    this._textPeer = textPeer;
-    },
+  },
 
-    getHtmlSize: function () {
+  getHtmlSize() {
-        var scale = TransformUtil.workoutScale(this._textPeer);
+    const scale = TransformUtil.workoutScale(this._textPeer);
-        return this._peer.getHtmlSize(scale);
+    return this._peer.getHtmlSize(scale);
-    },
+  },
 
-    getGraphSize: function () {
+  getGraphSize() {
-        var scale = TransformUtil.workoutScale(this._textPeer);
+    const scale = TransformUtil.workoutScale(this._textPeer);
-        return this._peer.getGraphSize(scale);
+    return this._peer.getGraphSize(scale);
-    },
+  },
 
-    getFontScale: function () {
+  getFontScale() {
-        return TransformUtil.workoutScale(this._textPeer).height;
+    return TransformUtil.workoutScale(this._textPeer).height;
-    },
+  },
 
-    getSize: function () {
+  getSize() {
-        return this._peer.getSize();
+    return this._peer.getSize();
-    },
+  },
 
-    getStyle: function () {
+  getStyle() {
-        return this._peer.getStyle();
+    return this._peer.getStyle();
-    },
+  },
 
-    getWeight: function () {
+  getWeight() {
-        return this._peer.getWeight();
+    return this._peer.getWeight();
-    },
+  },
 
-    getFontFamily: function () {
+  getFontFamily() {
-        return this._peer.getFontFamily();
+    return this._peer.getFontFamily();
-    },
+  },
 
-    setSize: function (size) {
+  setSize(size) {
-        return this._peer.setSize(size);
+    return this._peer.setSize(size);
-    },
+  },
 
-    setStyle: function (style) {
+  setStyle(style) {
-        return this._peer.setStyle(style);
+    return this._peer.setStyle(style);
-    },
+  },
 
-    setWeight: function (weight) {
+  setWeight(weight) {
-        return this._peer.setWeight(weight);
+    return this._peer.setWeight(weight);
-    },
+  },
 
-    getFont: function () {
+  getFont() {
-        return this._peer.getFont();
+    return this._peer.getFont();
-    },
+  },
 
-    getWidthMargin: function () {
+  getWidthMargin() {
-        return this._peer.getWidthMargin();
+    return this._peer.getWidthMargin();
-    },
+  },
 });
 
 Font.ARIAL = 'Arial';

packages/web2d/lib/components/Group.js

@@ -22,115 +22,116 @@ const Toolkit = require('./Toolkit').default;
  * A group object can be used to collect shapes.
  */
 const Group = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize: function (attributes) {
+  initialize(attributes) {
-        var peer = Toolkit.createGroup();
+    const peer = Toolkit.createGroup();
-        var defaultAttributes = {width: 50, height: 50, x: 50, y: 50, coordOrigin: '0 0', coordSize: '50 50'};
+    const defaultAttributes = {
-        for (var key in attributes) {
+      width: 50, height: 50, x: 50, y: 50, coordOrigin: '0 0', coordSize: '50 50',
-            defaultAttributes[key] = attributes[key];
+    };
-        }
+    for (const key in attributes) {
-        this.parent(peer, defaultAttributes);
+      defaultAttributes[key] = attributes[key];
-    },
+    }
+    this.parent(peer, defaultAttributes);
+  },
 
-    /**
+  /**
      * Remove an element as a child to the object.
      */
-    removeChild: function (element) {
+  removeChild(element) {
-        if (!$defined(element)) {
+    if (!$defined(element)) {
-            throw "Child element can not be null";
+      throw 'Child element can not be null';
-        }
+    }
 
-        if (element == this) {
+    if (element == this) {
-            throw "It's not possible to add the group as a child of itself";
+      throw "It's not possible to add the group as a child of itself";
-        }
+    }
 
-        var elementType = element.getType();
+    const elementType = element.getType();
-        if (elementType == null) {
+    if (elementType == null) {
-            throw "It seems not to be an element ->" + element;
+      throw `It seems not to be an element ->${element}`;
-        }
+    }
 
-        this._peer.removeChild(element._peer);
+    this._peer.removeChild(element._peer);
-    },
+  },
 
-    /**
+  /**
      * Appends an element as a child to the object.
      */
-    append: function (element) {
+  append(element) {
-        if (!$defined(element)) {
+    if (!$defined(element)) {
-            throw "Child element can not be null";
+      throw 'Child element can not be null';
-        }
+    }
 
-        if (element == this) {
+    if (element == this) {
-            throw "It's not posible to add the group as a child of itself";
+      throw "It's not posible to add the group as a child of itself";
-        }
+    }
 
-        var elementType = element.getType();
+    const elementType = element.getType();
-        if (elementType == null) {
+    if (elementType == null) {
-            throw "It seems not to be an element ->" + element;
+      throw `It seems not to be an element ->${element}`;
-        }
+    }
 
-        if (elementType == "Workspace") {
+    if (elementType == 'Workspace') {
-            throw "A group can not have a workspace as a child";
+      throw 'A group can not have a workspace as a child';
-        }
+    }
 
-        this._peer.append(element._peer);
+    this._peer.append(element._peer);
-    },
+  },
 
+  getType() {
+    return 'Group';
+  },
 
-    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) {
+  setCoordSize(width, height) {
-        this._peer.setCoordSize(width, height);
+    this._peer.setCoordSize(width, height);
-    },
+  },
 
-    setCoordOrigin: function (x, y) {
+  setCoordOrigin(x, y) {
-        this._peer.setCoordOrigin(x, y);
+    this._peer.setCoordOrigin(x, y);
-    },
+  },
 
-    getCoordOrigin: function () {
+  getCoordOrigin() {
-        return this._peer.getCoordOrigin();
+    return this._peer.getCoordOrigin();
-    },
+  },
-    getSize: function () {
+  getSize() {
-        return this._peer.getSize();
+    return this._peer.getSize();
-    },
+  },
 
-    setFill: function (color, opacity) {
+  setFill(color, opacity) {
-        throw "Unsupported operation. Fill can not be set to a group";
+    throw 'Unsupported operation. Fill can not be set to a group';
-    },
+  },
 
-    setStroke: function (width, style, color, opacity) {
+  setStroke(width, style, color, opacity) {
-        throw "Unsupported operation. Stroke can not be set to a group";
+    throw 'Unsupported operation. Stroke can not be set to a group';
-    },
+  },
 
-    getCoordSize: function () {
+  getCoordSize() {
-        return this._peer.getCoordSize();
+    return this._peer.getCoordSize();
-    },
+  },
 
-    appendDomChild: function (DomElement) {
+  appendDomChild(DomElement) {
-        if (!$defined(DomElement)) {
+    if (!$defined(DomElement)) {
-            throw "Child element can not be null";
+      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);
     }
 
+    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;

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,
+  Extends: Element,
-    initialize : function(attributes) {
+  initialize(attributes) {
-        var peer = Toolkit.createImage();
+    const peer = Toolkit.createImage();
-        this.parent(peer, attributes);
+    this.parent(peer, attributes);
-    },
+  },
 
-    getType : function() {
+  getType() {
-        return "Image";
+    return 'Image';
-    },
+  },
 
-    setHref : function(href) {
+  setHref(href) {
-        this._peer.setHref(href);
+    this._peer.setHref(href);
-    },
+  },
 
-    getHref : function() {
+  getHref() {
-        return this._peer.getHref();
+    return this._peer.getHref();
-    },
+  },
 
-    getSize : function() {
+  getSize() {
-        return this._peer.getSize();
+    return this._peer.getSize();
-    }
+  },
 });
 
 export default Image;

packages/web2d/lib/components/Line.js

@@ -19,55 +19,55 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit').default;
 
 const Line = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize: function(attributes) {
+  initialize(attributes) {
-        var peer = Toolkit.createLine();
+    const peer = Toolkit.createLine();
-        var defaultAttributes = {strokeColor:'#495879',strokeWidth:1, strokeOpacity:1};
+    const defaultAttributes = { strokeColor: '#495879', strokeWidth: 1, strokeOpacity: 1 };
-        for (var key in attributes) {
+    for (const key in attributes) {
-            defaultAttributes[key] = attributes[key];
+      defaultAttributes[key] = attributes[key];
-        }
+    }
-        this.parent(peer, defaultAttributes);
+    this.parent(peer, defaultAttributes);
-    },
+  },
 
-    getType : function() {
+  getType() {
-        return "Line";
+    return 'Line';
-    },
+  },
 
-    setFrom : function(x, y) {
+  setFrom(x, y) {
-        this._peer.setFrom(x, y);
+    this._peer.setFrom(x, y);
-    },
+  },
 
-    setTo : function(x, y) {
+  setTo(x, y) {
-        this._peer.setTo(x, y);
+    this._peer.setTo(x, y);
-    },
+  },
 
-    getFrom : function() {
+  getFrom() {
-        return this._peer.getFrom();
+    return this._peer.getFrom();
-    },
+  },
 
-    getTo : function() {
+  getTo() {
-        return this._peer.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 : function(startStyle, endStyle) {
+  setArrowStyle(startStyle, endStyle) {
-        this._peer.setArrowStyle(startStyle, endStyle);
+    this._peer.setArrowStyle(startStyle, endStyle);
-    },
+  },
 
-    setPosition : function(cx, cy) {
+  setPosition(cx, cy) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    setSize : function(width, height) {
+  setSize(width, height) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    },
+  },
 
-    setFill : function(color, opacity) {
+  setFill(color, opacity) {
-        throw "Unsupported operation";
+    throw 'Unsupported operation';
-    }
+  },
 });
 
 export default Line;

packages/web2d/lib/components/Point.js

@@ -17,37 +17,36 @@
  */
 
 core.Point = new Class({
-    /**
+  /**
      * @constructs
      * @param {Number} x coordinate
      * @param {Number} y coordinate
      */
-    initialize: function (x, y) {
+  initialize(x, y) {
-        this.x = x;
+    this.x = x;
-        this.y = y;
+    this.y = y;
-    },
+  },
 
-    /**
+  /**
      * @param {Number} x coordinate
      * @param {Number} y coordinate
      */
-    setValue: function (x, y) {
+  setValue(x, y) {
-        this.x = x;
+    this.x = x;
-        this.y = y;
+    this.y = y;
-    },
+  },
 
-    inspect: function () {
+  inspect() {
-        return "{x:" + this.x + ",y:" + this.y + "}";
+    return `{x:${this.x},y:${this.y}}`;
-    },
+  },
 
-    clone: function () {
+  clone() {
-        return new core.Point(this.x, this.y);
+    return new core.Point(this.x, this.y);
-    }
+  },
 
 });
 
 core.Point.fromString = function (point) {
-    var values = point.split(',');
+  const values = point.split(',');
-    return new core.Point(values[0], values[1]);
+  return new core.Point(values[0], values[1]);
-
 };

packages/web2d/lib/components/PolyLine.js

@@ -19,61 +19,63 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit');
 
 const PolyLine = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize:function(attributes) {
+  initialize(attributes) {
-        var peer = Toolkit.default.createPolyLine();
+    const peer = Toolkit.default.createPolyLine();
-        var defaultAttributes = {strokeColor:'blue',strokeWidth:1,strokeStyle:'solid',strokeOpacity:1};
+    const defaultAttributes = {
-        for (var key in attributes) {
+      strokeColor: 'blue', strokeWidth: 1, strokeStyle: 'solid', strokeOpacity: 1,
-            defaultAttributes[key] = attributes[key];
+    };
-        }
+    for (const key in attributes) {
-        this.parent(peer, defaultAttributes);
+      defaultAttributes[key] = attributes[key];
-    },
-
-    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;
     }
+    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;

packages/web2d/lib/components/Rect.js

@@ -25,31 +25,33 @@ const Toolkit = require('./Toolkit').default;
  *     For rounded rectangles, radius of the ellipse used to round off the corners of the rectangle.
  */
 const Rect = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize : function(arc, attributes) {
+  initialize(arc, attributes) {
-        if (arc && arc > 1) {
+    if (arc && arc > 1) {
-            throw "Arc must be 0<=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();
     }
+    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;

packages/web2d/lib/components/Text.js

@@ -19,81 +19,81 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit');
 
 const Text = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize:function(attributes) {
+  initialize(attributes) {
-        var peer = Toolkit.default.createText();
+    const peer = Toolkit.default.createText();
-        this.parent(peer, attributes);
+    this.parent(peer, attributes);
-    },
+  },
 
-    getType  : function() {
+  getType() {
-        return "Text";
+    return 'Text';
-    },
+  },
 
-    setText  : function(text) {
+  setText(text) {
-        this._peer.setText(text);
+    this._peer.setText(text);
-    },
+  },
 
-    setTextAlignment : function(align) {
+  setTextAlignment(align) {
-        $assert(align, "align can not be null");
+    $assert(align, 'align can not be null');
-        this._peer.setTextAlignment(align);
+    this._peer.setTextAlignment(align);
-    },
+  },
 
-    setTextSize  : function(width, height) {
+  setTextSize(width, height) {
-        this._peer.setContentSize(width, height);
+    this._peer.setContentSize(width, height);
-    },
+  },
 
-    getText  : function() {
+  getText() {
-        return this._peer.getText();
+    return this._peer.getText();
-    },
+  },
 
-    setFont  : function(font, size, style, weight) {
+  setFont(font, size, style, weight) {
-        this._peer.setFont(font, size, style, weight);
+    this._peer.setFont(font, size, style, weight);
-    },
+  },
 
-    setColor  : function(color) {
+  setColor(color) {
-        this._peer.setColor(color);
+    this._peer.setColor(color);
-    },
+  },
 
-    getColor  : function() {
+  getColor() {
-        return this._peer.getColor();
+    return this._peer.getColor();
-    },
+  },
 
-    setStyle  : function(style) {
+  setStyle(style) {
-        this._peer.setStyle(style);
+    this._peer.setStyle(style);
-    },
+  },
 
-    setWeight  : function(weight) {
+  setWeight(weight) {
-        this._peer.setWeight(weight);
+    this._peer.setWeight(weight);
-    },
+  },
 
-    setFontFamily  : function(family) {
+  setFontFamily(family) {
-        this._peer.setFontFamily(family);
+    this._peer.setFontFamily(family);
-    },
+  },
 
-    getFont  : function() {
+  getFont() {
-        return this._peer.getFont();
+    return this._peer.getFont();
-    },
+  },
 
-    setSize  : function(size) {
+  setSize(size) {
-        this._peer.setSize(size);
+    this._peer.setSize(size);
-    },
+  },
 
-    getHtmlFontSize  : function() {
+  getHtmlFontSize() {
-        return this._peer.getHtmlFontSize();
+    return this._peer.getHtmlFontSize();
-    },
+  },
 
-    getWidth  : function() {
+  getWidth() {
-        return this._peer.getWidth();
+    return this._peer.getWidth();
-    },
+  },
 
-    getHeight  : function() {
+  getHeight() {
-        return parseInt(this._peer.getHeight());
+    return parseInt(this._peer.getHeight());
-    },
+  },
 
-    getFontHeight : function() {
+  getFontHeight() {
-        var lines = this._peer.getText().split('\n').length;
+    const lines = this._peer.getText().split('\n').length;
-        return Math.round(this.getHeight() / lines);
+    return Math.round(this.getHeight() / lines);
-    }
+  },
 });
 
 export default Text;

packages/web2d/lib/components/Toolkit.js

@@ -15,82 +15,66 @@
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
  */
-const WorkspacePeer = require('./peer/svg/WorkspacePeer').default
+const WorkspacePeer = require('./peer/svg/WorkspacePeer').default;
-const GroupPeer = require('./peer/svg/GroupPeer').default
+const GroupPeer = require('./peer/svg/GroupPeer').default;
-const ElipsePeer = require('./peer/svg/ElipsePeer').default
+const ElipsePeer = require('./peer/svg/ElipsePeer').default;
-const LinePeer = require('./peer/svg/LinePeer').default
+const LinePeer = require('./peer/svg/LinePeer').default;
-const PolyLinePeer = require('./peer/svg/PolyLinePeer').default
+const PolyLinePeer = require('./peer/svg/PolyLinePeer').default;
-const CurvedLinePeer = require('./peer/svg/CurvedLinePeer').default
+const CurvedLinePeer = require('./peer/svg/CurvedLinePeer').default;
-const ArrowPeer = require('./peer/svg/ArrowPeer').default
+const ArrowPeer = require('./peer/svg/ArrowPeer').default;
-const TextPeer = require('./peer/svg/TextPeer').default
+const TextPeer = require('./peer/svg/TextPeer').default;
-const ImagePeer = require('./peer/svg/ImagePeer').default
+const ImagePeer = require('./peer/svg/ImagePeer').default;
-const RectPeer = require('./peer/svg/RectPeer').default
+const RectPeer = require('./peer/svg/RectPeer').default;
-const ArialFont = require('./peer/svg/ArialFont').default
+const ArialFont = require('./peer/svg/ArialFont').default;
-const TimesFont = require('./peer/svg/TimesFont').default
+const TimesFont = require('./peer/svg/TimesFont').default;
-const VerdanaFont = require('./peer/svg/VerdanaFont').default
+const VerdanaFont = require('./peer/svg/VerdanaFont').default;
-const TahomaFont = require('./peer/svg/TahomaFont').default
+const TahomaFont = require('./peer/svg/TahomaFont').default;
 
-const ToolkitSVG =
+const ToolkitSVG = {
-{
+  init() {
-    init: function()
+  },
-    {
+  createWorkspace(element) {
-    },
+    return new WorkspacePeer(element);
-    createWorkspace: function(element)
+  },
-    {
+  createGroup(element) {
-        return new WorkspacePeer(element);
+    return new GroupPeer();
-    },
+  },
-    createGroup: function(element)
+  createElipse() {
-    {
+    return new ElipsePeer();
-        return new GroupPeer();
+  },
-    },
+  createLine() {
-    createElipse: function()
+    return new LinePeer();
-    {
+  },
-        return new ElipsePeer();
+  createPolyLine() {
-    },
+    return new PolyLinePeer();
-    createLine: function()
+  },
-    {
+  createCurvedLine() {
-        return new LinePeer();
+    return new CurvedLinePeer();
-    },
+  },
-    createPolyLine: function()
+  createArrow() {
-    {
+    return new ArrowPeer();
-        return new PolyLinePeer();
+  },
-    },
+  createText() {
-    createCurvedLine: function()
+    return new TextPeer();
-    {
+  },
-        return new CurvedLinePeer();
+  createImage() {
-    },
+    return new ImagePeer();
-    createArrow: function()
+  },
-    {
+  createRect(arc) {
-        return new ArrowPeer();
+    return new RectPeer(arc);
-    },
+  },
-    createText: function ()
+  createArialFont() {
-    {
+    return new ArialFont();
-        return new TextPeer();
+  },
-    },
+  createTimesFont() {
-    createImage: function ()
+    return new TimesFont();
-    {
+  },
-        return new ImagePeer();
+  createVerdanaFont() {
-    },
+    return new VerdanaFont();
-    createRect: function(arc)
+  },
-    {
+  createTahomaFont() {
-        return new RectPeer(arc);
+    return new TahomaFont();
-    },
+  },
-    createArialFont: function()
-    {
-        return new ArialFont();
-    },
-    createTimesFont: function()
-    {
-        return new TimesFont();
-    },
-    createVerdanaFont: function()
-    {
-        return new VerdanaFont();
-    },
-    createTahomaFont: function()
-    {
-        return new TahomaFont();
-    }
 };
 
 const Toolkit = ToolkitSVG;

packages/web2d/lib/components/Workspace.js

@@ -19,73 +19,73 @@ const Element = require('./Element').default;
 const Toolkit = require('./Toolkit').default;
 
 const Workspace = new Class({
-    Extends: Element,
+  Extends: Element,
-    initialize: function (attributes) {
+  initialize(attributes) {
-        this._htmlContainer = this._createDivContainer();
+    this._htmlContainer = this._createDivContainer();
 
-        var peer = Toolkit.createWorkspace(this._htmlContainer);
+    const peer = Toolkit.createWorkspace(this._htmlContainer);
-        var defaultAttributes = {
+    const defaultAttributes = {
-            width: '200px',
+      width: '200px',
-            height: '200px',
+      height: '200px',
-            stroke: '1px solid #edf1be',
+      stroke: '1px solid #edf1be',
-            fillColor: 'white',
+      fillColor: 'white',
-            coordOrigin: '0 0',
+      coordOrigin: '0 0',
-            coordSize: '200 200',
+      coordSize: '200 200',
-        };
+    };
-        for (var key in attributes) {
+    for (const key in attributes) {
-            defaultAttributes[key] = attributes[key];
+      defaultAttributes[key] = attributes[key];
-        }
+    }
-        this.parent(peer, defaultAttributes);
+    this.parent(peer, defaultAttributes);
-        this._htmlContainer.append(this._peer._native);
+    this._htmlContainer.append(this._peer._native);
-    },
+  },
 
-    getType: function () {
+  getType() {
-        return 'Workspace';
+    return 'Workspace';
-    },
+  },
 
-    /**
+  /**
      * Appends an element as a child to the object.
      */
-    append: function (element) {
+  append(element) {
-        if (!$defined(element)) {
+    if (!$defined(element)) {
-            throw 'Child element can not be null';
+      throw 'Child element can not be null';
-        }
+    }
-        var elementType = element.getType();
+    const elementType = element.getType();
-        if (elementType == null) {
+    if (elementType == null) {
-            throw 'It seems not to be an element ->' + element;
+      throw `It seems not to be an element ->${element}`;
-        }
+    }
 
-        if (elementType == 'Workspace') {
+    if (elementType == 'Workspace') {
-            throw 'A workspace can not have a workspace as a child';
+      throw 'A workspace can not have a workspace as a child';
-        }
+    }
 
-        this._peer.append(element._peer);
+    this._peer.append(element._peer);
-    },
+  },
 
-    addItAsChildTo: function (element) {
+  addItAsChildTo(element) {
-        if (!$defined(element)) {
+    if (!$defined(element)) {
-            throw 'Workspace div container can not be null';
+      throw 'Workspace div container can not be null';
-        }
+    }
-        element.append(this._htmlContainer);
+    element.append(this._htmlContainer);
-    },
+  },
 
-    /**
+  /**
      * Create a new div element that will be responsible for containing the workspace elements.
      */
-    _createDivContainer: function () {
+  _createDivContainer() {
-        var container = window.document.createElement('div');
+    const container = window.document.createElement('div');
-        container.id = 'workspaceContainer';
+    container.id = 'workspaceContainer';
-        //        container.style.overflow = "hidden";
+    //        container.style.overflow = "hidden";
-        container.style.position = 'relative';
+    container.style.position = 'relative';
-        container.style.top = '0px';
+    container.style.top = '0px';
-        container.style.left = '0px';
+    container.style.left = '0px';
-        container.style.height = '688px';
+    container.style.height = '688px';
-        container.style.border = '1px solid red';
+    container.style.border = '1px solid red';
 
-        return $(container);
+    return $(container);
-    },
+  },
 
-    /**
+  /**
      *  Set the workspace area size. It can be defined using different units:
      * in (inches; 1in=2.54cm)
      * cm (centimeters; 1cm=10mm)
@@ -93,108 +93,108 @@ const Workspace = new Class({
      * pt (points; 1pt=1/72in)
      * pc (picas; 1pc=12pt)
      */
-    setSize: function (width, height) {
+  setSize(width, height) {
-        // HTML container must have the size of the group element.
+    // HTML container must have the size of the group element.
-        if ($defined(width)) {
+    if ($defined(width)) {
-            this._htmlContainer.css('width', width);
+      this._htmlContainer.css('width', width);
-        }
+    }
 
-        if ($defined(height)) {
+    if ($defined(height)) {
-            this._htmlContainer.css('height', height);
+      this._htmlContainer.css('height', height);
-        }
+    }
-        this._peer.setSize(width, 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) {
+  setCoordSize(width, height) {
-        this._peer.setCoordSize(width, height);
+    this._peer.setCoordSize(width, height);
-    },
+  },
 
-    /**
+  /**
      * @Todo: Complete Doc
      */
-    setCoordOrigin: function (x, y) {
+  setCoordOrigin(x, y) {
-        this._peer.setCoordOrigin(x, y);
+    this._peer.setCoordOrigin(x, y);
-    },
+  },
 
-    /**
+  /**
      * @Todo: Complete Doc
      */
-    getCoordOrigin: function () {
+  getCoordOrigin() {
-        return this._peer.getCoordOrigin();
+    return this._peer.getCoordOrigin();
-    },
+  },
 
-    // Private method declaration area
+  // Private method declaration area
-    /**
+  /**
      * All the SVG elements will be children of this HTML element.
      */
-    _getHtmlContainer: function () {
+  _getHtmlContainer() {
-        return this._htmlContainer;
+    return this._htmlContainer;
-    },
+  },
 
-    setFill: function (color, opacity) {
+  setFill(color, opacity) {
-        this._htmlContainer.css('background-color', color);
+    this._htmlContainer.css('background-color', color);
-        if (opacity || opacity === 0) {
+    if (opacity || opacity === 0) {
-            throw 'Unsupported operation. Opacity not supported.';
+      throw 'Unsupported operation. Opacity not supported.';
-        }
+    }
-    },
+  },
 
-    getFill: function () {
+  getFill() {
-        var color = this._htmlContainer.css('background-color');
+    const color = this._htmlContainer.css('background-color');
-        return { color: color };
+    return { color };
-    },
+  },
 
-    getSize: function () {
+  getSize() {
-        var width = this._htmlContainer.css('width');
+    const width = this._htmlContainer.css('width');
-        var height = this._htmlContainer.css('height');
+    const height = this._htmlContainer.css('height');
-        return { width: width, height: height };
+    return { width, height };
-    },
+  },
 
-    setStroke: function (width, style, color, opacity) {
+  setStroke(width, style, color, opacity) {
-        if (style != 'solid') {
+    if (style != 'solid') {
-            throw 'Not supported style stroke style:' + style;
+      throw `Not supported style stroke style:${style}`;
-        }
+    }
-        this._htmlContainer.css('border', width + ' ' + style + ' ' + color);
+    this._htmlContainer.css('border', `${width} ${style} ${color}`);
 
-        if (opacity || opacity === 0) {
+    if (opacity || opacity === 0) {
-            throw 'Unsupported operation. Opacity not supported.';
+      throw 'Unsupported operation. Opacity not supported.';
-        }
+    }
-    },
+  },
 
-    getCoordSize: function () {
+  getCoordSize() {
-        return this._peer.getCoordSize();
+    return this._peer.getCoordSize();
-    },
+  },
 
-    /**
+  /**
      * Remove an element as a child to the object.
      */
-    removeChild: function (element) {
+  removeChild(element) {
-        if (!$defined(element)) {
+    if (!$defined(element)) {
-            throw 'Child element can not be null';
+      throw 'Child element can not be null';
-        }
+    }
 
-        if (element == this) {
+    if (element == this) {
-            throw "It's not possible to add the group as a child of itself";
+      throw "It's not possible to add the group as a child of itself";
-        }
+    }
 
-        var elementType = element.getType();
+    const elementType = element.getType();
-        if (elementType == null) {
+    if (elementType == null) {
-            throw 'It seems not to be an element ->' + element;
+      throw `It seems not to be an element ->${element}`;
-        }
+    }
 
-        this._peer.removeChild(element._peer);
+    this._peer.removeChild(element._peer);
-    },
+  },
 
-    dumpNativeChart: function () {
+  dumpNativeChart() {
-        var elem = this._htmlContainer;
+    const elem = this._htmlContainer;
-        return elem.innerHTML;
+    return elem.innerHTML;
-    },
+  },
 });
 
 export default Workspace;

packages/web2d/lib/components/header.js

@@ -16,9 +16,8 @@
 *   limitations under the License.
 */
 
-var web2d = {};
+const web2d = {};
-web2d.peer =
+web2d.peer = {
-{
+  svg: {},
-svg: {}
 };
 web2d.peer.utils = {};

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

@@ -15,22 +15,22 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Font = require('./Font').default
+const Font = require('./Font').default;
 
 const ArialFont = new Class({
-    Extends: Font,
+  Extends: Font,
-    initialize :function() {
+  initialize() {
-        this.parent();
+    this.parent();
-        this._fontFamily = "Arial";
+    this._fontFamily = 'Arial';
-    },
+  },
 
-    getFontFamily : function () {
+  getFontFamily() {
-        return this._fontFamily;
+    return this._fontFamily;
-    },
+  },
 
-    getFont : function () {
+  getFont() {
-        return Font.ARIAL;
+    return Font.ARIAL;
-    }
+  },
 });
 
-export default ArialFont
+export default ArialFont;

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

@@ -16,85 +16,83 @@
  *   limitations under the License.
  */
 
-const ElementPeer = require('./ElementPeer').default
+const ElementPeer = require('./ElementPeer').default;
 
 const ArrowPeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize : function() {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'path');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this._style = {};
+    this._style = {};
-        this._controlPoint = new core.Point();
+    this._controlPoint = new core.Point();
-        this._fromPoint = new core.Point();
+    this._fromPoint = new core.Point();
-    },
+  },
 
-    setFrom : function(x, y) {
+  setFrom(x, y) {
-        this._fromPoint.x = x;
+    this._fromPoint.x = x;
-        this._fromPoint.y = y;
+    this._fromPoint.y = y;
-        this._redraw();
+    this._redraw();
-    },
+  },
 
-    setControlPoint : function (point) {
+  setControlPoint(point) {
-        this._controlPoint = point;
+    this._controlPoint = point;
-        this._redraw();
+    this._redraw();
-    },
+  },
 
-    setStrokeColor : function (color) {
+  setStrokeColor(color) {
-        this.setStroke(null, null, color, null);
+    this.setStroke(null, null, color, null);
-    },
+  },
 
-    setStrokeWidth : function(width) {
+  setStrokeWidth(width) {
-        this.setStroke(width);
+    this.setStroke(width);
-    },
+  },
 
-    setDashed : function(isDashed, length, spacing) {
+  setDashed(isDashed, length, spacing) {
-        if ($defined(isDashed) && isDashed && $defined(length) && $defined(spacing)) {
+    if ($defined(isDashed) && isDashed && $defined(length) && $defined(spacing)) {
-            this._native.setAttribute("stroke-dasharray", length + "," + spacing);
+      this._native.setAttribute('stroke-dasharray', `${length},${spacing}`);
-        } else {
+    } else {
-            this._native.setAttribute("stroke-dasharray", "");
+      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,186 +19,176 @@ const Shape = require('@wisemapping/mindplot/lib/components/util/Shape').default
 const ElementPeer = require('./ElementPeer').default;
 
 const CurvedLinePeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize :function() {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'path');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this._style = {fill:'#495879'};
+    this._style = { fill: '#495879' };
-        this._updateStyle();
+    this._updateStyle();
-        this._customControlPoint_1 = false;
+    this._customControlPoint_1 = false;
-        this._customControlPoint_2 = false;
+    this._customControlPoint_2 = false;
-        this._control1 = new core.Point();
+    this._control1 = new core.Point();
-        this._control2 = new core.Point();
+    this._control2 = new core.Point();
-        this._lineStyle = true;
+    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

@@ -20,229 +20,231 @@ const TransformUtil = require('../utils/TransformUtils').default; //eslint-disab
 const Element = require('../../Element').default; //eslint-disable-line
 
 const ElementPeer = new Class({ //eslint-disable-line
-    initialize: function (svgElement) {
+  initialize(svgElement) {
-        this._native = svgElement;
+    this._native = svgElement;
-        if (!this._native.addEvent) {
+    if (!this._native.addEvent) {
-            // Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811
+      // Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811
-            for (var key in Element) {
+      for (const key in Element) {
-                this._native[key] = Element.prototype[key];
+        this._native[key] = Element.prototype[key];
-            }
+      }
-        }
+    }
 
-        this._size = { width: 1, height: 1 };
+    this._size = { width: 1, height: 1 };
-        this._changeListeners = {};
+    this._changeListeners = {};
-        // http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm
+    // http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm
-    },
+  },
 
-    setChildren: function (children) {
+  setChildren(children) {
-        this._children = children;
+    this._children = children;
-    },
+  },
 
-    getChildren: function () {
+  getChildren() {
-        var result = this._children;
+    let result = this._children;
         if (!$defined(result)) { //eslint-disable-line
-            result = [];
+      result = [];
-            this._children = result;
+      this._children = result;
-        }
+    }
-        return result;
+    return result;
-    },
+  },
 
-    getParent: function () {
+  getParent() {
-        return this._parent;
+    return this._parent;
-    },
+  },
 
-    setParent: function (parent) {
+  setParent(parent) {
-        this._parent = parent;
+    this._parent = parent;
-    },
+  },
 
-    append: function (elementPeer) {
+  append(elementPeer) {
-        // Store parent and child relationship.
+    // Store parent and child relationship.
-        elementPeer.setParent(this);
+    elementPeer.setParent(this);
-        var children = this.getChildren();
+    const children = this.getChildren();
-        children.include(elementPeer);
+    children.include(elementPeer);
 
-        // Append element as a child.
+    // Append element as a child.
-        this._native.appendChild(elementPeer._native);
+    this._native.appendChild(elementPeer._native);
 
-        // Broadcast events ...
+    // Broadcast events ...
-        EventUtils.broadcastChangeEvent(this, 'strokeStyle');
+    EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-    },
+  },
 
-    removeChild: function (elementPeer) {
+  removeChild(elementPeer) {
-        // Store parent and child relationship.
+    // Store parent and child relationship.
-        elementPeer.setParent(null);
+    elementPeer.setParent(null);
-        var children = this.getChildren();
+    const children = this.getChildren();
 
-        // Remove from children array ...
+    // Remove from children array ...
-        var oldLength = children.length;
+    const oldLength = children.length;
 
-        children.erase(elementPeer);
+    children.erase(elementPeer);
         $assert(children.length < oldLength, 'element could not be removed:' + elementPeer); //eslint-disable-line
 
-        // Append element as a child.
+    // Append element as a child.
-        this._native.removeChild(elementPeer._native);
+    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) {
+  addEvent(type, listener) {
         $(this._native).bind(type, listener); //eslint-disable-line
-    },
+  },
 
-    trigger: function (type, event) {
+  trigger(type, event) {
         $(this._native).trigger(type, event); //eslint-disable-line
-    },
+  },
 
-    cloneEvents: function (from) {
+  cloneEvents(from) {
-        this._native.cloneEvents(from);
+    this._native.cloneEvents(from);
-    },
+  },
 
-    removeEvent: function (type, listener) {
+  removeEvent(type, listener) {
         $(this._native).unbind(type, listener); //eslint-disable-line
-    },
+  },
 
-    setSize: function (width, height) {
+  setSize(width, height) {
         if ($defined(width) && this._size.width != parseInt(width)) { //eslint-disable-line
-            this._size.width = parseInt(width);
+      this._size.width = parseInt(width);
-            this._native.setAttribute('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._size.height = parseInt(height);
-            this._native.setAttribute('height', parseInt(height));
+      this._native.setAttribute('height', parseInt(height));
-        }
+    }
 
-        EventUtils.broadcastChangeEvent(this, 'strokeStyle');
+    EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-    },
+  },
 
-    getSize: function () {
+  getSize() {
-        return { width: this._size.width, height: this._size.height };
+    return { width: this._size.width, height: this._size.height };
-    },
+  },
 
-    setFill: function (color, opacity) {
+  setFill(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);
+      this._native.setAttribute('fill-opacity', opacity);
-        }
+    }
-    },
+  },
 
-    getFill: function () {
+  getFill() {
-        var color = this._native.getAttribute('fill');
+    const color = this._native.getAttribute('fill');
-        var opacity = this._native.getAttribute('fill-opacity');
+    const opacity = this._native.getAttribute('fill-opacity');
-        return { color: color, opacity: Number(opacity) };
+    return { color, opacity: Number(opacity) };
-    },
+  },
 
-    getStroke: function () {
+  getStroke() {
-        var vmlStroke = this._native;
+    const vmlStroke = this._native;
-        var color = vmlStroke.getAttribute('stroke');
+    const color = vmlStroke.getAttribute('stroke');
-        var dashstyle = this._stokeStyle;
+    const dashstyle = this._stokeStyle;
-        var opacity = vmlStroke.getAttribute('stroke-opacity');
+    const opacity = vmlStroke.getAttribute('stroke-opacity');
-        var width = vmlStroke.getAttribute('stroke-width');
+    const width = vmlStroke.getAttribute('stroke-width');
-        return { color: color, style: dashstyle, opacity: opacity, width: width };
+    return {
-    },
+      color, style: dashstyle, opacity, width,
+    };
+  },
 
-    setStroke: function (width, style, color, opacity) {
+  setStroke(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.
+      // Scale the dash array in order to be equal to VML. In VML, stroke style doesn't scale.
-            var dashArrayPoints = this.__stokeStyleToStrokDasharray[style];
+      const dashArrayPoints = this.__stokeStyleToStrokDasharray[style];
-            var scale = 1 / TransformUtil.workoutScale(this).width;
+      const scale = 1 / TransformUtil.workoutScale(this).width;
 
-            var strokeWidth = this._native.getAttribute('stroke-width');
+      let strokeWidth = this._native.getAttribute('stroke-width');
-            strokeWidth = parseFloat(strokeWidth);
+      strokeWidth = parseFloat(strokeWidth);
 
-            var scaledPoints = [];
+      const scaledPoints = [];
-            for (var i = 0; i < dashArrayPoints.length; i++) {
+      for (let i = 0; i < dashArrayPoints.length; i++) {
-                // VML scale the stroke based on the stroke width.
+        // VML scale the stroke based on the stroke width.
-                scaledPoints[i] = dashArrayPoints[i] * strokeWidth;
+        scaledPoints[i] = dashArrayPoints[i] * strokeWidth;
 
-                // Scale the points based on the scale.
+        // Scale the points based on the scale.
-                scaledPoints[i] = scaledPoints[i] * scale + 'px';
+        scaledPoints[i] = `${scaledPoints[i] * scale}px`;
-            }
+      }
 
-            //        this._native.setAttribute('stroke-dasharray', scaledPoints);
+      //        this._native.setAttribute('stroke-dasharray', scaledPoints);
-            this._stokeStyle = style;
+      this._stokeStyle = style;
-        }
+    }
 
         if ($defined(opacity)) { //eslint-disable-line
-            this._native.setAttribute('stroke-opacity', opacity);
+      this._native.setAttribute('stroke-opacity', opacity);
-        }
+    }
-    },
+  },
 
-    /*
+  /*
      * style='visibility: visible'
      */
-    setVisibility: function (isVisible) {
+  setVisibility(isVisible) {
-        this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden');
+    this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden');
-    },
+  },
 
-    isVisible: function () {
+  isVisible() {
-        var visibility = this._native.getAttribute('visibility');
+    const visibility = this._native.getAttribute('visibility');
-        return !(visibility == 'hidden');
+    return !(visibility == 'hidden');
-    },
+  },
 
-    updateStrokeStyle: function () {
+  updateStrokeStyle() {
-        var strokeStyle = this._stokeStyle;
+    const strokeStyle = this._stokeStyle;
-        if (this.getParent()) {
+    if (this.getParent()) {
-            if (strokeStyle && strokeStyle != 'solid') {
+      if (strokeStyle && strokeStyle != 'solid') {
-                this.setStroke(null, strokeStyle);
+        this.setStroke(null, strokeStyle);
-            }
+      }
-        }
+    }
-    },
+  },
 
-    attachChangeEventListener: function (type, listener) {
+  attachChangeEventListener(type, listener) {
-        var listeners = this.getChangeEventListeners(type);
+    const listeners = this.getChangeEventListeners(type);
         if (!$defined(listener)) { //eslint-disable-line
-            throw 'Listener can not be null';
+      throw 'Listener can not be null';
-        }
+    }
-        listeners.push(listener);
+    listeners.push(listener);
-    },
+  },
 
-    getChangeEventListeners: function (type) {
+  getChangeEventListeners(type) {
-        var listeners = this._changeListeners[type];
+    let listeners = this._changeListeners[type];
         if (!$defined(listeners)) { //eslint-disable-line
-            listeners = [];
+      listeners = [];
-            this._changeListeners[type] = listeners;
+      this._changeListeners[type] = listeners;
-        }
+    }
-        return listeners;
+    return listeners;
-    },
+  },
 
-    /**
+  /**
      * Move element to the front
      */
-    moveToFront: function () {
+  moveToFront() {
-        this._native.parentNode.appendChild(this._native);
+    this._native.parentNode.appendChild(this._native);
-    },
+  },
 
-    /**
+  /**
      * Move element to the back
      */
-    moveToBack: function () {
+  moveToBack() {
-        this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
+    this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
-    },
+  },
 
-    setCursor: function (type) {
+  setCursor(type) {
-        this._native.style.cursor = 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: [],
+  solid: [],
-    dot: [1, 3],
+  dot: [1, 3],
-    dash: [4, 3],
+  dash: [4, 3],
-    longdash: [10, 2],
+  longdash: [10, 2],
-    dashdot: [5, 3, 1, 3],
+  dashdot: [5, 3, 1, 3],
 };
 
 export default ElementPeer; //eslint-disable-line

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

@@ -15,47 +15,47 @@
  *   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 ElipsePeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize : function() {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'ellipse');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'ellipse');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this.attachChangeEventListener("strokeStyle", ElementPeer.prototype.updateStrokeStyle);
+    this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-        this._position = {x:0, y:0};
+    this._position = { x: 0, y: 0 };
-    },
+  },
 
-     setSize : function(width, height) {
+  setSize(width, height) {
-        this.parent(width, height);
+    this.parent(width, height);
-        if ($defined(width)) {
+    if ($defined(width)) {
-            this._native.setAttribute('rx', width / 2);
+      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;
     }
+
+    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;

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

@@ -17,77 +17,75 @@
  */
 
 const Font = new Class({
-    initialize : function() {
+  initialize() {
-        this._size = 10;
+    this._size = 10;
-        this._style = "normal";
+    this._style = 'normal';
-        this._weight = "normal";
+    this._weight = 'normal';
-    },
+  },
 
-    init : function(args) {
+  init(args) {
-        if ($defined(args.size)) {
+    if ($defined(args.size)) {
-            this._size = parseInt(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;
     }
+    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;

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

@@ -19,32 +19,31 @@ const ElementPeer = require('./ElementPeer').default;
 const EventUtils = require('../utils/EventUtils').default;
 
 const GroupPeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize: function () {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'g');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'g');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this._native.setAttribute("preserveAspectRatio", "none");
+    this._native.setAttribute('preserveAspectRatio', 'none');
-        this._coordSize = {width: 1, height: 1};
+    this._coordSize = { width: 1, height: 1 };
-        this._native.setAttribute("focusable", "true");
+    this._native.setAttribute('focusable', 'true');
-        this._position = {x: 0, y: 0};
+    this._position = { x: 0, y: 0 };
-        this._coordOrigin = {x: 0, y: 0};
+    this._coordOrigin = { x: 0, y: 0 };
-    },
+  },
 
-    setCoordSize: function (width, height) {
+  setCoordSize(width, height) {
-        var change = this._coordSize.width != width || this._coordSize.height != height;
+    const change = this._coordSize.width != width || this._coordSize.height != height;
-        this._coordSize.width = width;
+    this._coordSize.width = width;
-        this._coordSize.height = height;
+    this._coordSize.height = height;
 
-        if (change)
+    if (change) { this.updateTransform(); }
-            this.updateTransform();
+    EventUtils.broadcastChangeEvent(this, 'strokeStyle');
-        EventUtils.broadcastChangeEvent(this, "strokeStyle");
+  },
-    },
 
-    getCoordSize: function () {
+  getCoordSize() {
-        return {width: this._coordSize.width, height: this._coordSize.height};
+    return { width: this._coordSize.width, height: this._coordSize.height };
-    },
+  },
 
-    /**
+  /**
      * http://www.w3.org/TR/SVG/coords.html#TransformAttribute
      * 7.6 The transform  attribute
      *
@@ -63,73 +62,70 @@ const GroupPeer = new Class({
      *    * 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 () {
+  updateTransform() {
-        var sx = this._size.width / this._coordSize.width;
+    let sx = this._size.width / this._coordSize.width;
-        var sy = this._size.height / this._coordSize.height;
+    let sy = this._size.height / this._coordSize.height;
 
-        var cx = this._position.x - this._coordOrigin.x * sx;
+    let cx = this._position.x - this._coordOrigin.x * sx;
-        var cy = this._position.y - this._coordOrigin.y * sy;
+    let cy = this._position.y - this._coordOrigin.y * sy;
 
-        //FIXME: are we sure of this values?
+    // FIXME: are we sure of this values?
-        cx = isNaN(cx) ? 0 : cx;
+    cx = isNaN(cx) ? 0 : cx;
-        cy = isNaN(cy) ? 0 : cy;
+    cy = isNaN(cy) ? 0 : cy;
-        sx = isNaN(sx) ? 0 : sx;
+    sx = isNaN(sx) ? 0 : sx;
-        sy = isNaN(sy) ? 0 : sy;
+    sy = isNaN(sy) ? 0 : sy;
 
-        this._native.setAttribute("transform", "translate(" + cx + "," + cy + ") scale(" + sx + "," + sy + ")");
+    this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
-    },
+  },
 
-    setOpacity: function (value) {
+  setOpacity(value) {
-        this._native.setAttribute("opacity", value);
+    this._native.setAttribute('opacity', value);
-    },
+  },
 
-    setCoordOrigin: function (x, y) {
+  setCoordOrigin(x, y) {
-        var change = x != this._coordOrigin.x || y != this._coordOrigin.y;
+    const change = x != this._coordOrigin.x || y != this._coordOrigin.y;
-        if ($defined(x)) {
+    if ($defined(x)) {
-            this._coordOrigin.x = 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};
     }
+
+    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;

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,
+  Extends: ElementPeer,
-    initialize : function() {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'image');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'image');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this._position = {x:0,y:0};
+    this._position = { x: 0, y: 0 };
-        this._href = "";
+    this._href = '';
-        this._native.setAttribute("preserveAspectRatio", "none");
+    this._native.setAttribute('preserveAspectRatio', 'none');
-    },
+  },
 
-    setPosition : function(x, y) {
+  setPosition(x, y) {
-        this._position = {x:x, y:y};
+    this._position = { x, y };
-        this._native.setAttribute('y', y);
+    this._native.setAttribute('y', y);
-        this._native.setAttribute('x', x);
+    this._native.setAttribute('x', x);
-    },
+  },
 
-    getPosition : function() {
+  getPosition() {
-        return this._position;
+    return this._position;
-    },
+  },
 
-    setHref : function(url) {
+  setHref(url) {
-        this._native.setAttributeNS(this.linkNamespace, "href", url);
+    this._native.setAttributeNS(this.linkNamespace, 'href', url);
-        this._href = url;
+    this._href = url;
-    },
+  },
 
-    getHref : function() {
+  getHref() {
-        return this._href;
+    return this._href;
-    }
+  },
 });
 
 export default ImagePeer;

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

@@ -15,50 +15,50 @@
  *   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 LinePeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize : function() {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'line');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'line');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this.attachChangeEventListener("strokeStyle", ElementPeer.prototype.updateStrokeStyle);
+    this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-    },
+  },
 
-    setFrom : function(x1, y1) {
+  setFrom(x1, y1) {
-        this._x1 = x1;
+    this._x1 = x1;
-        this._y1 = y1;
+    this._y1 = y1;
-        this._native.setAttribute('x1', x1);
+    this._native.setAttribute('x1', x1);
-        this._native.setAttribute('y1', y1);
+    this._native.setAttribute('y1', y1);
-    },
+  },
 
-    setTo : function(x2, y2) {
+  setTo(x2, y2) {
-        this._x2 = x2;
+    this._x2 = x2;
-        this._y2 = y2;
+    this._y2 = y2;
-        this._native.setAttribute('x2', x2);
+    this._native.setAttribute('x2', x2);
-        this._native.setAttribute('y2', y2);
+    this._native.setAttribute('y2', y2);
-    },
+  },
 
-    getFrom : function() {
+  getFrom() {
-        return new core.Point(this._x1, this._y1);
+    return new core.Point(this._x1, this._y1);
-    },
+  },
 
-    getTo : function() {
+  getTo() {
-        return new core.Point(this._x2, this._y2);
+    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) {
+  setArrowStyle(startStyle, endStyle) {
-        if ($defined(startStyle)) {
+    if ($defined(startStyle)) {
-            // Todo: This must be implemented ...
+      // Todo: This must be implemented ...
-        }
-
-        if ($defined(endStyle)) {
-            // Todo: This must be implemented ...
-        }
     }
+
+    if ($defined(endStyle)) {
+      // Todo: This must be implemented ...
+    }
+  },
 });
 
 export default LinePeer;

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

@@ -19,89 +19,87 @@ const ElementPeer = require('./ElementPeer').default;
 const PolyLine = require('../../PolyLine');
 
 const PolyLinePeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize : function() {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'polyline');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'polyline');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this.setFill("none");
+    this.setFill('none');
-        this.breakDistance = 10;
+    this.breakDistance = 10;
-    },
+  },
 
-    setFrom : function(x1, y1) {
+  setFrom(x1, y1) {
-        this._x1 = x1;
+    this._x1 = x1;
-        this._y1 = y1;
+    this._y1 = y1;
-        this._updatePath();
+    this._updatePath();
-    },
+  },
 
-    setTo : function(x2, y2) {
+  setTo(x2, y2) {
-        this._x2 = x2;
+    this._x2 = x2;
-        this._y2 = y2;
+    this._y2 = y2;
-        this._updatePath();
+    this._updatePath();
-    },
+  },
 
-    setStrokeWidth : function(width) {
+  setStrokeWidth(width) {
-        this._native.setAttribute('stroke-width', width);
+    this._native.setAttribute('stroke-width', width);
-    },
+  },
 
-    setColor : function(color) {
+  setColor(color) {
-        this._native.setAttribute('stroke', color);
+    this._native.setAttribute('stroke', color);
-    },
+  },
 
-    setStyle : function(style) {
+  setStyle(style) {
-        this._style = style;
+    this._style = style;
-        this._updatePath();
+    this._updatePath();
-    },
+  },
 
-    getStyle : function() {
+  getStyle() {
-        return this._style;
+    return this._style;
-    },
+  },
 
-    _updatePath : function() {
+  _updatePath() {
-        if (this._style == "Curved") {
+    if (this._style == 'Curved') {
-            this._updateMiddleCurvePath();
+      this._updateMiddleCurvePath();
-        }
+    } else if (this._style == 'Straight') {
-        else if (this._style == "Straight") {
+      this._updateStraightPath();
-            this._updateStraightPath();
+    } else {
-        }
+      this._updateCurvePath();
-        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);
-        }
     }
+  },
+
+  _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;

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

@@ -15,46 +15,46 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const ElementPeer = require('./ElementPeer').default
+const ElementPeer = require('./ElementPeer').default;
 
 /**
  * http://www.w3.org/TR/SVG/shapes.html#RectElement
  */
 const RectPeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize : function(arc) {
+  initialize(arc) {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'rect');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'rect');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this._arc = arc;
+    this._arc = arc;
-        this.attachChangeEventListener("strokeStyle", ElementPeer.prototype.updateStrokeStyle);
+    this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
-    },
+  },
 
-    setPosition :function(x, y) {
+  setPosition(x, y) {
-        if ($defined(x)) {
+    if ($defined(x)) {
-            this._native.setAttribute('x', parseInt(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);
-        }
     }
+    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;

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

@@ -15,22 +15,22 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Font = require('./Font').default
+const Font = require('./Font').default;
 
 const TahomaFont = new Class({
-    Extends: Font,
+  Extends: Font,
-    initialize : function() {
+  initialize() {
-        this.parent();
+    this.parent();
-        this._fontFamily = "tahoma";
+    this._fontFamily = 'tahoma';
-    },
+  },
 
-    getFontFamily : function () {
+  getFontFamily() {
-        return this._fontFamily;
+    return this._fontFamily;
-    },
+  },
 
-    getFont : function () {
+  getFont() {
-        return Font.TAHOMA;
+    return Font.TAHOMA;
-    }
+  },
 });
 
 export default TahomaFont;

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

@@ -15,183 +15,179 @@
  *   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 Font = require('../../Font').default
+const Font = require('../../Font').default;
 
 const TextPeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize: function () {
+  initialize() {
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'text');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'text');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this._position = {x: 0, y: 0};
+    this._position = { x: 0, y: 0 };
-        this._font = new Font("Arial", this);
+    this._font = new Font('Arial', this);
-    },
+  },
 
-    append: function (element) {
+  append(element) {
-        this._native.appendChild(element._native);
+    this._native.appendChild(element._native);
-    },
+  },
 
-    setTextAlignment: function (align) {
+  setTextAlignment(align) {
-        this._textAlign = align;
+    this._textAlign = align;
-    },
+  },
 
+  getTextAlignment() {
+    return $defined(this._textAlign) ? this._textAlign : 'left';
+  },
 
-    getTextAlignment: function () {
+  setText(text) {
-        return $defined(this._textAlign) ? this._textAlign : 'left';
+    // Remove all previous nodes ...
-    },
+    while (this._native.firstChild) {
-
+      this._native.removeChild(this._native.firstChild);
-    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();
     }
+
+    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;

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

@@ -15,22 +15,22 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Font = require('./Font').default
+const Font = require('./Font').default;
 
 const TimesFont = new Class({
-    Extends: Font,
+  Extends: Font,
-    initialize : function() {
+  initialize() {
-        this.parent();
+    this.parent();
-        this._fontFamily = "times";
+    this._fontFamily = 'times';
-    },
+  },
 
-    getFontFamily :function () {
+  getFontFamily() {
-        return this._fontFamily;
+    return this._fontFamily;
-    },
+  },
 
-    getFont : function () {
+  getFont() {
-        return TIMES;
+    return TIMES;
-    }
+  },
 });
 
 export default TimesFont;

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

@@ -15,22 +15,22 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Font = require('./Font').default
+const Font = require('./Font').default;
 
 const VerdanaFont = new Class({
-    Extends: Font,
+  Extends: Font,
-    initialize : function() {
+  initialize() {
-        this.parent();
+    this.parent();
-        this._fontFamily = "verdana";
+    this._fontFamily = 'verdana';
-    },
+  },
 
-    getFontFamily : function () {
+  getFontFamily() {
-        return this._fontFamily;
+    return this._fontFamily;
-    },
+  },
 
-    getFont : function () {
+  getFont() {
-        return Font.VERDANA;
+    return Font.VERDANA;
-    }
+  },
 });
 
 export default VerdanaFont;

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

@@ -15,22 +15,21 @@
  *   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 EventUtils = require('../utils/EventUtils').default;
 
 const WorkspacePeer = new Class({
-    Extends: ElementPeer,
+  Extends: ElementPeer,
-    initialize: function (element) {
+  initialize(element) {
-        this._element = element;
+    this._element = element;
-        var svgElement = window.document.createElementNS(this.svgNamespace, 'svg');
+    const svgElement = window.document.createElementNS(this.svgNamespace, 'svg');
-        this.parent(svgElement);
+    this.parent(svgElement);
-        this._native.setAttribute("focusable", "true");
+    this._native.setAttribute('focusable', 'true');
-        this._native.setAttribute("id", "workspace");
+    this._native.setAttribute('id', 'workspace');
-        this._native.setAttribute("preserveAspectRatio", "none");
+    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.
      *
@@ -40,73 +39,73 @@ const WorkspacePeer = new Class({
      *
      */
 
-    setCoordSize: function (width, height) {
+  setCoordSize(width, height) {
-        var viewBox = this._native.getAttribute('viewBox');
+    const viewBox = this._native.getAttribute('viewBox');
-        var coords = [0, 0, 0, 0];
+    let coords = [0, 0, 0, 0];
-        if (viewBox != null) {
+    if (viewBox != null) {
-            coords = viewBox.split(/ /);
+      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};
     }
+    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;

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

@@ -18,20 +18,20 @@
 
 const EventUtils = {
     broadcastChangeEvent: function (elementPeer, type) { //eslint-disable-line
-        var listeners = elementPeer.getChangeEventListeners(type);
+    const listeners = elementPeer.getChangeEventListeners(type);
         if ($defined(listeners)) { //eslint-disable-line
-            for (var i = 0; i < listeners.length; i++) {
+      for (let i = 0; i < listeners.length; i++) {
-                var listener = listeners[i];
+        const listener = listeners[i];
-                listener.call(elementPeer, null);
+        listener.call(elementPeer, null);
-            }
+      }
-        }
+    }
 
-        var children = elementPeer.getChildren();
+    const children = elementPeer.getChildren();
-        for (var j = 0; j < children.length; j++) {
+    for (let j = 0; j < children.length; j++) {
-            var child = children[j];
+      const child = children[j];
-            EventUtils.broadcastChangeEvent(child, type);
+      EventUtils.broadcastChangeEvent(child, type);
-        }
+    }
-    },
+  },
 };
 
 export default EventUtils;

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

@@ -19,21 +19,20 @@
 const TransformUtil = {
 
     workoutScale: function(elementPeer) //eslint-disable-line
-    {
+  {
-        var current = elementPeer.getParent();
+    let current = elementPeer.getParent();
-        var width = 1;
+    let width = 1;
-        var height = 1;
+    let height = 1;
-        while (current)
+    while (current) {
-        {
+      const coordSize = current.getCoordSize();
-            var coordSize = current.getCoordSize();
+      const size = current.getSize();
-            var size = current.getSize();
 
-            width = width * (parseInt(size.width) / coordSize.width);
+      width *= (parseInt(size.width) / coordSize.width);
-            height = height * (parseInt(size.height) / coordSize.height);
+      height *= (parseInt(size.height) / coordSize.height);
-            current = current.getParent();
+      current = current.getParent();
-        }
-        return {width:width,height:height};
     }
+    return { width, height };
+  },
 };
 
 export default TransformUtil;

packages/web2d/lib/web2d.js

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

packages/web2d/package.json

@@ -29,10 +29,19 @@
         "@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-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",

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.15.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.7.0":
   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.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.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":
   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.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
   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.15.4", "@babel/types@^7.15.6", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
   dependencies:
@@ -1989,6 +1989,10 @@
   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"
@@ -2136,7 +2140,7 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^4.31.0", "@typescript-eslint/eslint-plugin@^4.8.1":
+"@typescript-eslint/eslint-plugin@^4.31.0", "@typescript-eslint/eslint-plugin@^4.32.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:
@@ -2160,7 +2164,7 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/parser@^4.31.0", "@typescript-eslint/parser@^4.8.1":
+"@typescript-eslint/parser@^4.31.0", "@typescript-eslint/parser@^4.32.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:
@@ -2630,7 +2634,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.3:
+array-includes@^3.1.1, array-includes@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
   dependencies:
@@ -2658,6 +2662,14 @@ 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"
@@ -2688,6 +2700,10 @@ 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"
@@ -2738,12 +2754,31 @@ 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"
@@ -3576,6 +3611,10 @@ 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"
@@ -4001,6 +4040,10 @@ 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"
@@ -4055,7 +4098,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.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   dependencies:
@@ -4359,6 +4402,10 @@ 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"
@@ -4457,6 +4504,31 @@ 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"
@@ -4503,10 +4575,33 @@ 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"
@@ -4517,11 +4612,54 @@ eslint-loader@^4.0.2:
     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-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.21.5, eslint-plugin-react@^7.26.1:
   version "7.26.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.26.1.tgz#41bcfe3e39e6a5ac040971c1af94437c80daa40e"
   dependencies:
@@ -4559,7 +4697,7 @@ eslint-utils@^3.0.0:
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+eslint-visitor-keys@^1.0.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"
 
@@ -4567,7 +4705,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.14.0, eslint@^7.32.0:
   version "7.32.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
   dependencies:
@@ -5035,7 +5173,7 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.0.0:
+find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
   dependencies:
@@ -6053,7 +6191,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.2.0, is-core-module@^2.5.0, is-core-module@^2.6.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.7.0.tgz#3c0ef7d31b4acfc574f80c58409d568a836848e3"
   dependencies:
@@ -6534,7 +6672,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@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
   dependencies:
@@ -6579,6 +6717,16 @@ 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"
@@ -7670,6 +7818,14 @@ 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"
@@ -8136,6 +8292,12 @@ 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"
@@ -8154,6 +8316,12 @@ 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"
@@ -8958,7 +9126,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.14.2, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   dependencies:
@@ -10125,6 +10293,15 @@ 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"