Merged in feature/web2d-remove-jquery (pull request #13)

Remove jQuery from web2d (left only for playground)

* Remove jQuery from web2d (left only for playground)


Approved-by: Paulo Veiga

packages/web2d/package.json

@@ -39,6 +39,7 @@
         "eslint-import-resolver-webpack": "^0.13.2",
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-import": "^2.25.3",
+        "jquery": "3.6.0",
         "nodemon": "^2.0.12",
         "start-server-and-test": "^1.14.0",
         "webpack": "^5.44.0",
@@ -49,7 +50,6 @@
         "webpack-merge": "^5.8.0"
     },
     "dependencies": {
-        "@wisemapping/core-js": "^0.4.0",
+        "@wisemapping/core-js": "^0.4.0"
-        "jquery": "3.6.0"
     }
 }

packages/web2d/src/components/Workspace.js

@@ -15,7 +15,6 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import $ from 'jquery';
 import { $defined } from '@wisemapping/core-js';
 import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
@@ -87,7 +86,7 @@ class Workspace extends ElementClass {
     container.style.height = '688px';
     container.style.border = '1px solid red';
 
-    return $(container);
+    return container;
   }
 
   /**
@@ -101,11 +100,11 @@ class Workspace extends ElementClass {
   setSize(width, height) {
     // HTML container must have the size of the group element.
     if ($defined(width)) {
-      this._htmlContainer.css('width', width);
+      this._htmlContainer.style.width = width;
     }
 
     if ($defined(height)) {
-      this._htmlContainer.css('height', height);
+      this._htmlContainer.style.height = height;
     }
     this.peer.setSize(width, height);
   }
@@ -147,20 +146,19 @@ class Workspace extends ElementClass {
   }
 
   setFill(color, opacity) {
-    this._htmlContainer.css('background-color', color);
+    this._htmlContainer.style.backgroundColor = color;
     if (opacity || opacity === 0) {
       throw new Error('Unsupported operation. Opacity not supported.');
     }
   }
 
   getFill() {
-    const color = this._htmlContainer.css('background-color');
+    const color = this._htmlContainer.style.backgroundColor;
     return { color };
   }
 
   getSize() {
-    const width = this._htmlContainer.css('width');
+    const { width, height } = this._htmlContainer.style;
-    const height = this._htmlContainer.css('height');
     return { width, height };
   }
 
@@ -168,7 +166,7 @@ class Workspace extends ElementClass {
     if (style !== 'solid') {
       throw new Error(`Not supported style stroke style:${style}`);
     }
-    this._htmlContainer.css('border', `${width} ${style} ${color}`);
+    this._htmlContainer.style.border = `${width} ${style} ${color}`;
 
     if (opacity || opacity === 0) {
       throw new Error('Unsupported operation. Opacity not supported.');

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

@@ -15,7 +15,6 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import $ from 'jquery';
 import { $assert, $defined } from '@wisemapping/core-js';
 import EventUtils from '../utils/EventUtils';
 import TransformUtil from '../utils/TransformUtils';
@@ -96,19 +95,21 @@ class ElementPeer {
      * http://developer.mozilla.org/en/docs/addEvent
      */
   addEvent(type, listener) {
-    $(this._native).bind(type, listener);
+    this._native.addEventListener(type, listener);
   }
 
   trigger(type, event) {
-    $(this._native).trigger(type, event);
+    // TODO: check this for correctness and for real jQuery.trigger replacement
+    this._native.dispatchEvent(new CustomEvent(type, event));
   }
 
-  cloneEvents(from) {
+  // eslint-disable-next-line class-methods-use-this
-    this._native.cloneEvents(from);
+  cloneEvents(/* from */) {
+    throw new Error('cloneEvents not implemented');
   }
 
   removeEvent(type, listener) {
-    $(this._native).unbind(type, listener);
+    this._native.removeEventListener(type, listener);
   }
 
   setSize(width, height) {

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

@@ -16,7 +16,6 @@
  *   limitations under the License.
  */
 import { $defined } from '@wisemapping/core-js';
-import $ from 'jquery';
 import ElementPeer from './ElementPeer';
 
 class TextPeer extends ElementPeer {
@@ -71,7 +70,9 @@ class TextPeer extends ElementPeer {
     this._native.setAttribute('x', x);
 
     // tspan must be positioned manually.
-    $(this._native).children('tspan').attr('x', x);
+    Array.from(this._native.querySelectorAll('tspan')).forEach((element) => {
+      element.setAttribute('x', x);
+    });
   }
 
   getPosition() {
@@ -79,7 +80,13 @@ class TextPeer extends ElementPeer {
   }
 
   getNativePosition() {
-    return $(this._native).position();
+    const computedStyles = window.getComputedStyle(this._native);
+    const marginTop = computedStyles.getPropertyValue('margin-top') || 0;
+    const marginLeft = computedStyles.getPropertyValue('margin-left') || 0;
+    return {
+      top: this._native.offsetTop - parseFloat(marginTop),
+      left: this._native.offsetLeft - parseFloat(marginLeft),
+    };
   }
 
   setFont(font, size, style, weight) {