vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-09-21 03:30:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Comple migration to ES6 of element

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-12-02 22:13:01 -08:00
parent b57dcd6fd1
commit dc7000ac18
13 changed files with 147 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/web2d/src/components/Arrow.js
View File

@ -16,12 +16,11 @@
* limitations under the License.
*
*/
import Element from './Element';
import ElementClass from './ElementClass';
import Toolkit from './Toolkit';
const Arrow = new Class({
Extends: Element,
initialize(attributes) {
class Arrow extends ElementClass {
constructor(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;

54
packages/web2d/src/components/CurvedLine.js
View File

@ -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({
Extends: Element,
initialize(attributes) {
class CurvedLine extends ElementClass {
constructor(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;

330
packages/web2d/src/components/Element.js
View File

@ -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;

3
packages/web2d/src/components/ElementClass.js
View File

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

18
packages/web2d/src/components/Elipse.js
View File

@ -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({
Extends: Element,
initialize(attributes) {
class Elipse extends ElementClass {
constructor(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;

39
packages/web2d/src/components/Group.js
View File

@ -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({
Extends: Element,
initialize(attributes) {
class Group extends ElementClass {
constructor(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;

22
packages/web2d/src/components/Image.js
View File

@ -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({
Extends: Element,
initialize(attributes) {
class Image extends ElementClass {
constructor(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;

33
packages/web2d/src/components/Line.js
View File

@ -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({
Extends: Element,
initialize(attributes) {
class Line extends ElementClass {
constructor(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;

14
packages/web2d/src/components/Point.js
View File

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

28
packages/web2d/src/components/PolyLine.js
View File

@ -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({
Extends: Element,
initialize(attributes) {
class PolyLine extends ElementClass {
constructor(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;

54
packages/web2d/src/components/Workspace.js
View File

@ -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({
Extends: Element,
initialize(attributes) {
this._htmlContainer = this._createDivContainer();
class Workspace extends ElementClass {
constructor(attributes) {
const htmlContainer = Workspace._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);
this._htmlContainer.append(this.peer._native);
},
super(peer, defaultAttributes, htmlContainer);
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;

1
packages/web2d/src/components/peer/svg/ElementPeer.js
View File

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

2
packages/web2d/src/web2d.js
View File

@ -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,