Comple migration to ES6 of element

packages/web2d/src/components/Arrow.js

@@ -16,12 +16,11 @@
  *   limitations under the License.
  *
  */
-import Element from './Element';
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
-const Arrow = new Class({
+class Arrow extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
     const peer = Toolkit.createArrow();
     const defaultAttributes = {
       strokeColor: 'black',
@@ -36,32 +35,33 @@ const Arrow = new Class({
       }
     }
 
-    this.parent(peer, defaultAttributes);
+    super(peer, defaultAttributes);
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getType() {
     return 'Arrow';
-  },
+  }
 
   setFrom(x, y) {
     this.peer.setFrom(x, y);
-  },
+  }
 
   setControlPoint(point) {
     this.peer.setControlPoint(point);
-  },
+  }
 
   setStrokeColor(color) {
     this.peer.setStrokeColor(color);
-  },
+  }
 
   setStrokeWidth(width) {
     this.peer.setStrokeWidth(width);
-  },
+  }
 
   setDashed(isDashed, length, spacing) {
     this.peer.setDashed(isDashed, length, spacing);
-  },
+  }
-});
+}
 
 export default Arrow;

packages/web2d/src/components/CurvedLine.js

@@ -16,12 +16,11 @@
  *   limitations under the License.
  */
 import { $assert } from '@wisemapping/core-js';
-import Element from './Element';
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
-const CurvedLine = new Class({
+class CurvedLine extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
     const peer = Toolkit.createCurvedLine();
     const defaultAttributes = {
       strokeColor: 'blue',
@@ -35,95 +34,96 @@ const CurvedLine = new Class({
         defaultAttributes[key] = attributes[key];
       }
     }
-    this.parent(peer, defaultAttributes);
+    super(peer, defaultAttributes);
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getType() {
     return 'CurvedLine';
-  },
+  }
 
   setFrom(x, y) {
     $assert(!Number.isNaN(x), 'x must be defined');
     $assert(!Number.isNaN(y), 'y must be defined');
 
     this.peer.setFrom(x, y);
-  },
+  }
 
   setTo(x, y) {
     $assert(!Number.isNaN(x), 'x must be defined');
     $assert(!Number.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;
 CurvedLine.NICE_LINE = true;

packages/web2d/src/components/Element.js

@@ -1,330 +0,0 @@
-/*
- *    Copyright [2021] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-
-import { $defined } from '@wisemapping/core-js';
-
-const Element = new Class({
-  initialize(peer, attributes) {
-    this.peer = peer;
-    if (peer == null) {
-      throw new Error('Element peer can not be null');
-    }
-
-    if ($defined(attributes)) {
-      this._initialize(attributes);
-    }
-  },
-
-  _initialize(attributes) {
-    const batchExecute = {};
-
-    // Collect arguments ...
-    for (const key in attributes) {
-      if (Object.prototype.hasOwnProperty.call(attributes, key)) {
-        const funcName = this._attributeNameToFuncName(key, 'set');
-        let funcArgs = batchExecute[funcName];
-        if (!$defined(funcArgs)) {
-          funcArgs = [];
-        }
-
-        const signature = Element._propertyNameToSignature[key];
-        const argPositions = signature[1];
-
-        if (argPositions !== Element._SIGNATURE_MULTIPLE_ARGUMENTS) {
-          funcArgs[argPositions] = attributes[key];
-        } else {
-          funcArgs = attributes[key].split(' ');
-        }
-        batchExecute[funcName] = funcArgs;
-      }
-    }
-
-    // Call functions ...
-    // eslint-disable-next-line guard-for-in
-    for (const key in batchExecute) {
-      const func = this[key];
-      if (!$defined(func)) {
-        throw new Error(`Could not find function: ${key}`);
-      }
-      func.apply(this, batchExecute[key]);
-    }
-  },
-
-  setSize(width, height) {
-    this.peer.setSize(width, height);
-  },
-
-  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.
-     * listener
-     *     The object that receives a notification when an event of the
-     * specified type occurs. This must be an object implementing the
-     * EventListener interface, or simply a function in JavaScript.
-     *
-     * The following events types are supported:
-     *
-     */
-  addEvent(type, listener) {
-    this.peer.addEvent(type, listener);
-  },
-
-  trigger(type, event) {
-    this.peer.trigger(type, event);
-  },
-
-  cloneEvents(from) {
-    this.peer.cloneEvents(from);
-  },
-  /**
-     *
-     * Allows the removal of event listeners from the event target.
-     *
-     * Parameters:
-     * type
-     *    A string representing the event type being registered.
-     * listener
-     *     The listener parameter takes an interface implemented by
-     * the user which contains the methods to be called when the event occurs.
-     *     This interace will be invoked passing an event as argument and
-     * the 'this' referece in the function will be the element.
-     */
-  removeEvent(type, listener) {
-    this.peer.removeEvent(type, listener);
-  },
-
-  /**
-     * /*
-     * Returns element type name.
-     */
-  getType() {
-    throw new Error(
-      'Not implemeneted yet. This method must be implemented by all the inherited objects.',
-    );
-  },
-
-  /**
-     * Todo: Doc
-     */
-  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(color, opacity) {
-    this.peer.setFill(color, opacity);
-  },
-
-  getPosition() {
-    return this.peer.getPosition();
-  },
-
-  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(width, style, color, opacity) {
-    if (
-      style != null
-      && style !== undefined
-      && style !== 'dash'
-      && style !== 'dot'
-      && style !== 'solid'
-      && style !== 'longdash'
-      && style !== 'dashdot'
-    ) {
-      throw new Error(`Unsupported stroke style: '${style}'`);
-    }
-    this.peer.setStroke(width, style, color, opacity);
-  },
-
-  _attributeNameToFuncName(attributeKey, prefix) {
-    const signature = Element._propertyNameToSignature[attributeKey];
-    if (!$defined(signature)) {
-      throw new Error(`Unsupported attribute: ${attributeKey}`);
-    }
-
-    const firstLetter = signature[0].charAt(0);
-    return prefix + firstLetter.toUpperCase() + signature[0].substring(1);
-  },
-
-  /**
-     * All element properties can be setted using either a method
-     *  invocation or attribute invocation.
-     *  key: size, width, height, position, x, y, stroke, strokeWidth, strokeStyle,
-     * strokeColor, strokeOpacity,
-     *       fill, fillColor, fillOpacity, coordSize, coordSizeWidth, coordSizeHeight,
-     * coordOrigin, coordOriginX, coordOrigiY
-     */
-  setAttribute(key, value) {
-    const funcName = this._attributeNameToFuncName(key, 'set');
-
-    const signature = Element._propertyNameToSignature[key];
-    if (signature == null) {
-      throw new Error(`Could not find the signature for:${key}`);
-    }
-
-    // Parse arguments ..
-    const argPositions = signature[1];
-    let args = [];
-    if (argPositions !== this._SIGNATURE_MULTIPLE_ARGUMENTS) {
-      args[argPositions] = value;
-    } else {
-      const strValue = String(value);
-      args = strValue.split(' ');
-    }
-
-    // Look up method ...
-    const setter = this[funcName];
-    if (setter == null) {
-      throw new Error(`Could not find the function name:${funcName}`);
-    }
-    setter.apply(this, args);
-  },
-
-  getAttribute(key) {
-    const funcName = this._attributeNameToFuncName(key, 'get');
-
-    const signature = Element._propertyNameToSignature[key];
-    if (signature == null) {
-      throw new Error(`Could not find the signature for:${key}`);
-    }
-
-    const getter = this[funcName];
-    if (getter == null) {
-      throw new Error(`Could not find the function name:${funcName}`);
-    }
-
-    const getterResult = getter.apply(this, []);
-    const attibuteName = signature[2];
-    if (!$defined(attibuteName)) {
-      throw new Error(`Could not find attribute mapping for:${key}`);
-    }
-
-    const result = getterResult[attibuteName];
-    if (!$defined(result)) {
-      throw new Error(`Could not find attribute with name:${attibuteName}`);
-    }
-
-    return result;
-  },
-
-  /**
-     * Defines the element opacity.
-     * Parameters:
-     *   opacity: A value between 0 and 1.
-     */
-  setOpacity(opacity) {
-    this.peer.setStroke(null, null, null, opacity);
-    this.peer.setFill(null, opacity);
-  },
-
-  setVisibility(isVisible) {
-    this.peer.setVisibility(isVisible);
-  },
-
-  isVisible() {
-    return this.peer.isVisible();
-  },
-
-  /**
-     * Move the element to the front
-     */
-  moveToFront() {
-    this.peer.moveToFront();
-  },
-
-  /**
-     * Move the element to the back
-     */
-  moveToBack() {
-    this.peer.moveToBack();
-  },
-
-  getStroke() {
-    return this.peer.getStroke();
-  },
-
-  setCursor(type) {
-    this.peer.setCursor(type);
-  },
-
-  getParent() {
-    return this.peer.getParent();
-  },
-});
-
-Element._SIGNATURE_MULTIPLE_ARGUMENTS = -1;
-Element._supportedEvents = [
-  'click',
-  'dblclick',
-  'mousemove',
-  'mouseout',
-  'mouseover',
-  'mousedown',
-  'mouseup',
-];
-Element._propertyNameToSignature = {
-  // Format: [attribute name, argument position on setter, attribute name on getter]
-  size: ['size', -1],
-  width: ['size', 0, 'width'],
-  height: ['size', 1, 'height'],
-
-  position: ['position', -1],
-  x: ['position', 0, 'x'],
-  y: ['position', 1, 'y'],
-
-  stroke: ['stroke', -1],
-  strokeWidth: ['stroke', 0, 'width'],
-  strokeStyle: ['stroke', 1, 'style'],
-  strokeColor: ['stroke', 2, 'color'],
-  strokeOpacity: ['stroke', 3, 'opacity'],
-
-  fill: ['fill', -1],
-  fillColor: ['fill', 0, 'color'],
-  fillOpacity: ['fill', 1, 'opacity'],
-
-  coordSize: ['coordSize', -1],
-  coordSizeWidth: ['coordSize', 0, 'width'],
-  coordSizeHeight: ['coordSize', 1, 'height'],
-
-  coordOrigin: ['coordOrigin', -1],
-  coordOriginX: ['coordOrigin', 0, 'x'],
-  coordOriginY: ['coordOrigin', 1, 'y'],
-
-  visibility: ['visibility', 0],
-  opacity: ['opacity', 0],
-};
-
-export default Element;

packages/web2d/src/components/ElementClass.js

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

packages/web2d/src/components/Elipse.js

@@ -15,12 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Element from './Element';
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
-const Elipse = new Class({
+class Elipse extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
     const peer = Toolkit.createElipse();
     const defaultAttributes = {
       width: 40,
@@ -35,16 +34,17 @@ const Elipse = new Class({
         defaultAttributes[key] = attributes[key];
       }
     }
-    this.parent(peer, defaultAttributes);
+    super(peer, defaultAttributes);
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getType() {
     return 'Elipse';
-  },
+  }
 
   getSize() {
     return this.peer.getSize();
-  },
+  }
-});
+}
 
 export default Elipse;

packages/web2d/src/components/Group.js

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 /*
  *    Copyright [2021] [wisemapping]
  *
@@ -17,15 +18,14 @@
  */
 
 import { $defined } from '@wisemapping/core-js';
-import Element from './Element';
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
 /**
  * A group object can be used to collect shapes.
  */
-const Group = new Class({
+class Group extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
     const peer = Toolkit.createGroup();
     const defaultAttributes = {
       width: 50,
@@ -40,8 +40,8 @@ const Group = new Class({
         defaultAttributes[key] = attributes[key];
       }
     }
-    this.parent(peer, defaultAttributes);
+    super(peer, defaultAttributes);
-  },
+  }
 
   /**
      * Remove an element as a child to the object.
@@ -61,7 +61,7 @@ const Group = new Class({
     }
 
     this.peer.removeChild(element.peer);
-  },
+  }
 
   /**
      * Appends an element as a child to the object.
@@ -85,11 +85,11 @@ const Group = new Class({
     }
 
     this.peer.append(element.peer);
-  },
+  }
 
   getType() {
     return 'Group';
-  },
+  }
 
   /**
      * The group element is a containing blocks for this content
@@ -103,30 +103,31 @@ const Group = new Class({
      */
   setCoordSize(width, height) {
     this.peer.setCoordSize(width, height);
-  },
+  }
 
   setCoordOrigin(x, y) {
     this.peer.setCoordOrigin(x, y);
-  },
+  }
 
   getCoordOrigin() {
     return this.peer.getCoordOrigin();
-  },
+  }
+
   getSize() {
     return this.peer.getSize();
-  },
+  }
 
   setFill() {
     throw new Error('Unsupported operation. Fill can not be set to a group');
-  },
+  }
 
   setStroke() {
     throw new Error('Unsupported operation. Stroke can not be set to a group');
-  },
+  }
 
   getCoordSize() {
     return this.peer.getCoordSize();
-  },
+  }
 
   appendDomChild(DomElement) {
     if (!$defined(DomElement)) {
@@ -138,11 +139,11 @@ const Group = new Class({
     }
 
     this.peer._native.append(DomElement);
-  },
+  }
 
   setOpacity(value) {
     this.peer.setOpacity(value);
-  },
+  }
-});
+}
 
 export default Group;

packages/web2d/src/components/Image.js

@@ -15,31 +15,31 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Element from './Element';
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
-const Image = new Class({
+class Image extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
     const peer = Toolkit.createImage();
-    this.parent(peer, attributes);
+    super(peer, attributes);
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getType() {
     return 'Image';
-  },
+  }
 
   setHref(href) {
     this.peer.setHref(href);
-  },
+  }
 
   getHref() {
     return this.peer.getHref();
-  },
+  }
 
   getSize() {
     return this.peer.getSize();
-  },
+  }
-});
+}
 
 export default Image;

packages/web2d/src/components/Line.js

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 /*
  *    Copyright [2021] [wisemapping]
  *
@@ -15,12 +16,12 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Element from './Element';
+
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
-const Line = new Class({
+class Line extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
     const peer = Toolkit.createLine();
     const defaultAttributes = { strokeColor: '#495879', strokeWidth: 1, strokeOpacity: 1 };
     for (const key in attributes) {
@@ -28,28 +29,28 @@ const Line = new Class({
         defaultAttributes[key] = attributes[key];
       }
     }
-    this.parent(peer, defaultAttributes);
+    super(peer, defaultAttributes);
-  },
+  }
 
   getType() {
     return 'Line';
-  },
+  }
 
   setFrom(x, y) {
     this.peer.setFrom(x, y);
-  },
+  }
 
   setTo(x, y) {
     this.peer.setTo(x, y);
-  },
+  }
 
   getFrom() {
     return this.peer.getFrom();
-  },
+  }
 
   getTo() {
     return this.peer.getTo();
-  },
+  }
 
   /**
      * Defines the start and the end line arrow style.
@@ -57,19 +58,19 @@ const Line = new Class({
      * */
   setArrowStyle(startStyle, endStyle) {
     this.peer.setArrowStyle(startStyle, endStyle);
-  },
+  }
 
   setPosition() {
     throw new Error('Unsupported operation');
-  },
+  }
 
   setSize() {
     throw new Error('Unsupported operation');
-  },
+  }
 
   setFill() {
     throw new Error('Unsupported operation');
-  },
+  }
-});
+}
 
 export default Line;

packages/web2d/src/components/Point.js

@@ -16,16 +16,16 @@
  *   limitations under the License.
  */
 
-const Point = new Class({
+class Point {
   /**
      * @constructs
      * @param {Number} x coordinate
      * @param {Number} y coordinate
      */
-  initialize(x, y) {
+  constructor(x, y) {
     this.x = x;
     this.y = y;
-  },
+  }
 
   /**
      * @param {Number} x coordinate
@@ -34,16 +34,16 @@ const Point = new Class({
   setValue(x, y) {
     this.x = x;
     this.y = y;
-  },
+  }
 
   inspect() {
     return `{x:${this.x},y:${this.y}}`;
-  },
+  }
 
   clone() {
     return new Point(this.x, this.y);
-  },
+  }
-});
+}
 
 Point.fromString = function pointFromString(point) {
   const values = point.split(',');

packages/web2d/src/components/PolyLine.js

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 /*
  *    Copyright [2021] [wisemapping]
  *
@@ -15,13 +16,12 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Element from './Element';
+import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 import * as PolyLineUtils from './peer/utils/PolyLineUtils';
 
-const PolyLine = new Class({
+class PolyLine extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
     const peer = Toolkit.createPolyLine();
     const defaultAttributes = {
       strokeColor: 'blue',
@@ -34,36 +34,36 @@ const PolyLine = new Class({
         defaultAttributes[key] = attributes[key];
       }
     }
-    this.parent(peer, defaultAttributes);
+    super(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) {
     return PolyLineUtils.buildCurvedPath(dist, x1, y1, x2, y2);
-  },
+  }
 
   buildStraightPath(dist, x1, y1, x2, y2) {
     return PolyLineUtils.buildStraightPath(dist, x1, y1, x2, y2);
-  },
+  }
-});
+}
 
 export default PolyLine;

packages/web2d/src/components/Workspace.js

@@ -16,15 +16,14 @@
  *   limitations under the License.
  */
 import { $defined } from '@wisemapping/core-js';
-import Element from './Element';
+import ElementClass from '@components/ElementClass';
 import Toolkit from './Toolkit';
 
-const Workspace = new Class({
+class Workspace extends ElementClass {
-  Extends: Element,
+  constructor(attributes) {
-  initialize(attributes) {
+    const htmlContainer = Workspace._createDivContainer();
-    this._htmlContainer = this._createDivContainer();
 
-    const peer = Toolkit.createWorkspace(this._htmlContainer);
+    const peer = Toolkit.createWorkspace(htmlContainer);
     const defaultAttributes = {
       width: '200px',
       height: '200px',
@@ -38,13 +37,14 @@ const Workspace = new Class({
         defaultAttributes[key] = attributes[key];
       }
     }
-    this.parent(peer, defaultAttributes);
+    super(peer, defaultAttributes, htmlContainer);
-    this._htmlContainer.append(this.peer._native);
+    htmlContainer.append(this.peer._native);
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   getType() {
     return 'Workspace';
-  },
+  }
 
   /**
      * Appends an element as a child to the object.
@@ -63,19 +63,19 @@ const Workspace = new Class({
     }
 
     this.peer.append(element.peer);
-  },
+  }
 
   addItAsChildTo(element) {
     if (!$defined(element)) {
       throw new Error('Workspace div container can not be null');
     }
     element.append(this._htmlContainer);
-  },
+  }
 
   /**
      * Create a new div element that will be responsible for containing the workspace elements.
      */
-  _createDivContainer() {
+  static _createDivContainer() {
     const container = window.document.createElement('div');
     container.id = 'workspaceContainer';
     //        container.style.overflow = "hidden";
@@ -86,7 +86,7 @@ const Workspace = new Class({
     container.style.border = '1px solid red';
 
     return $(container);
-  },
+  }
 
   /**
      *  Set the workspace area size. It can be defined using different units:
@@ -106,7 +106,7 @@ const Workspace = new Class({
       this._htmlContainer.css('height', height);
     }
     this.peer.setSize(width, height);
-  },
+  }
 
   /**
      * The workspace element is a containing blocks for this content
@@ -120,21 +120,21 @@ const Workspace = new Class({
      */
   setCoordSize(width, height) {
     this.peer.setCoordSize(width, height);
-  },
+  }
 
   /**
      * @Todo: Complete Doc
      */
   setCoordOrigin(x, y) {
     this.peer.setCoordOrigin(x, y);
-  },
+  }
 
   /**
      * @Todo: Complete Doc
      */
   getCoordOrigin() {
     return this.peer.getCoordOrigin();
-  },
+  }
 
   // Private method declaration area
   /**
@@ -142,25 +142,25 @@ const Workspace = new Class({
      */
   _getHtmlContainer() {
     return this._htmlContainer;
-  },
+  }
 
   setFill(color, opacity) {
     this._htmlContainer.css('background-color', color);
     if (opacity || opacity === 0) {
       throw new Error('Unsupported operation. Opacity not supported.');
     }
-  },
+  }
 
   getFill() {
     const color = this._htmlContainer.css('background-color');
     return { color };
-  },
+  }
 
   getSize() {
     const width = this._htmlContainer.css('width');
     const height = this._htmlContainer.css('height');
     return { width, height };
-  },
+  }
 
   setStroke(width, style, color, opacity) {
     if (style !== 'solid') {
@@ -171,11 +171,11 @@ const Workspace = new Class({
     if (opacity || opacity === 0) {
       throw new Error('Unsupported operation. Opacity not supported.');
     }
-  },
+  }
 
   getCoordSize() {
     return this.peer.getCoordSize();
-  },
+  }
 
   /**
      * Remove an element as a child to the object.
@@ -195,12 +195,12 @@ const Workspace = new Class({
     }
 
     this.peer.removeChild(element.peer);
-  },
+  }
 
   dumpNativeChart() {
     const elem = this._htmlContainer;
     return elem.innerHTML;
-  },
+  }
-});
+}
 
 export default Workspace;

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

@@ -19,7 +19,6 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import EventUtils from '../utils/EventUtils';
 import TransformUtil from '../utils/TransformUtils';
-import Element from '../../Element';
 
 const ElementPeer = new Class({
   initialize(svgElement) {

packages/web2d/src/web2d.js

@@ -23,7 +23,6 @@ import eventUtils from '@utils/EventUtils';
 import transformUtils from '@utils/TransformUtils';
 
 // Import Components
-import element from '@components/Element';
 import workspace from '@components/Workspace';
 import toolkit from '@components/Toolkit';
 import elipse from '@components/Elipse';
@@ -65,7 +64,6 @@ export default {
   // Components
   Arrow: arrow,
   CurvedLine: curvedLine,
-  Element: element,
   Elipse: elipse,
   Font: font,
   Group: group,