diff --git a/packages/web2d/package.json b/packages/web2d/package.json index 4c8240e8..d590786e 100644 --- a/packages/web2d/package.json +++ b/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", - "jquery": "3.6.0" + "@wisemapping/core-js": "^0.4.0" } } \ No newline at end of file diff --git a/packages/web2d/src/components/Workspace.js b/packages/web2d/src/components/Workspace.js index 77dacd81..e5c281c4 100644 --- a/packages/web2d/src/components/Workspace.js +++ b/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 height = this._htmlContainer.css('height'); + const { width, height } = this._htmlContainer.style; 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.'); diff --git a/packages/web2d/src/components/peer/svg/ElementPeer.js b/packages/web2d/src/components/peer/svg/ElementPeer.js index 1af0eaa8..12904971 100644 --- a/packages/web2d/src/components/peer/svg/ElementPeer.js +++ b/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) { - this._native.cloneEvents(from); + // eslint-disable-next-line class-methods-use-this + cloneEvents(/* from */) { + throw new Error('cloneEvents not implemented'); } removeEvent(type, listener) { - $(this._native).unbind(type, listener); + this._native.removeEventListener(type, listener); } setSize(width, height) { diff --git a/packages/web2d/src/components/peer/svg/TextPeer.js b/packages/web2d/src/components/peer/svg/TextPeer.js index 0fa29b22..fe5ee45f 100644 --- a/packages/web2d/src/components/peer/svg/TextPeer.js +++ b/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) {