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
This commit is contained in:
Matias Arriola 2021-12-20 21:19:32 +00:00 committed by Paulo Veiga
parent b5fd708971
commit f8156fcf85
4 changed files with 26 additions and 20 deletions

View File

@ -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"
}
}

View File

@ -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.');

View File

@ -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) {

View File

@ -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) {