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

View File

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

View File

@ -15,7 +15,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import $ from 'jquery';
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import EventUtils from '../utils/EventUtils'; import EventUtils from '../utils/EventUtils';
import TransformUtil from '../utils/TransformUtils'; import TransformUtil from '../utils/TransformUtils';
@ -96,19 +95,21 @@ class ElementPeer {
* http://developer.mozilla.org/en/docs/addEvent * http://developer.mozilla.org/en/docs/addEvent
*/ */
addEvent(type, listener) { addEvent(type, listener) {
$(this._native).bind(type, listener); this._native.addEventListener(type, listener);
} }
trigger(type, event) { 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) { removeEvent(type, listener) {
$(this._native).unbind(type, listener); this._native.removeEventListener(type, listener);
} }
setSize(width, height) { setSize(width, height) {

View File

@ -16,7 +16,6 @@
* limitations under the License. * limitations under the License.
*/ */
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
import $ from 'jquery';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
class TextPeer extends ElementPeer { class TextPeer extends ElementPeer {
@ -71,7 +70,9 @@ class TextPeer extends ElementPeer {
this._native.setAttribute('x', x); this._native.setAttribute('x', x);
// tspan must be positioned manually. // 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() { getPosition() {
@ -79,7 +80,13 @@ class TextPeer extends ElementPeer {
} }
getNativePosition() { 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) { setFont(font, size, style, weight) {