From 17b22ca211499f1efbb355991f17e73272f41390 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 4 Dec 2021 15:39:20 -0800 Subject: [PATCH] Migration to EE6 of web2d and mindplot --- .../mindplot/src/components/ActionIcon.js | 31 +- .../mindplot/src/components/CentralTopic.js | 92 +- packages/mindplot/src/components/Command.js | 16 +- .../mindplot/src/components/ConnectionLine.js | 50 +- .../mindplot/src/components/ControlPoint.js | 38 +- .../src/components/DesignerKeyboard.js | 34 +- .../src/components/DesignerUndoManager.js | 20 +- .../mindplot/src/components/DragConnector.js | 17 +- .../mindplot/src/components/DragManager.js | 20 +- packages/mindplot/src/components/DragPivot.js | 42 +- packages/mindplot/src/components/DragTopic.js | 48 +- .../src/components/EditorProperties.js | 14 +- packages/mindplot/src/components/Icon.js | 25 +- packages/mindplot/src/components/IconGroup.js | 2 +- packages/mindplot/src/components/ImageIcon.js | 51 +- packages/mindplot/src/components/LinkIcon.js | 16 +- .../src/components/LocalStorageManager.js | 19 +- packages/mindplot/src/components/MainTopic.js | 234 +- .../src/components/MultilineTextEditor.js | 36 +- packages/mindplot/src/components/NodeGraph.js | 262 +- packages/mindplot/src/components/NoteIcon.js | 17 +- packages/mindplot/src/components/Options.js | 6 +- .../src/components/PersistenceManager.js | 17 +- .../mindplot/src/components/Relationship.js | 68 +- .../src/components/RelationshipPivot.js | 24 +- .../src/components/RestPersistenceManager.js | 37 +- .../mindplot/src/components/ScreenManager.js | 2 +- .../src/components/ShrinkConnector.js | 28 +- .../mindplot/src/components/TextEditor.js | 38 +- packages/mindplot/src/components/Topic.js | 2435 ++++++++--------- .../src/components/TopicEventDispatcher.js | 24 +- .../mindplot/src/components/TopicStyle.js | 74 +- packages/mindplot/src/components/Workspace.js | 2 +- .../commands/AddFeatureToTopicCommand.js | 59 +- .../commands/AddRelationshipCommand.js | 15 +- .../components/commands/AddTopicCommand.js | 128 +- .../commands/ChangeFeatureToTopicCommand.js | 15 +- .../src/components/commands/DeleteCommand.js | 19 +- .../components/commands/DragTopicCommand.js | 13 +- .../commands/GenericFunctionCommand.js | 15 +- .../commands/MoveControlPointCommand.js | 167 +- .../commands/RemoveFeatureFromTopicCommand.js | 15 +- .../mindplot/src/components/commands/index.js | 21 - .../src/components/layout/OriginalLayout.js | 29 +- .../libraries/bootstrap/BootstrapDialog.js | 53 +- ...g.Request.js => BootstrapDialogRequest.js} | 16 +- .../persistence/Beta2PelaMigrator.js | 14 +- .../persistence/Pela2TangoMigrator.js | 18 +- .../persistence/XMLSerializer_Beta.js | 30 +- .../persistence/XMLSerializer_Pela.js | 881 +++--- .../persistence/XMLSerializer_Tango.js | 5 +- .../mindplot/src/components/util/Shape.js | 2 +- .../mindplot/src/components/widget/IMenu.js | 23 +- .../src/components/widget/IconPanel.js | 2 +- .../mindplot/src/components/widget/Menu.js | 12 +- .../components/widget/ModalDialogNotifier.js | 4 +- .../src/components/widget/NoteEditor.js | 24 +- .../bootstrap/BootstrapDialog.Request.js | 47 - .../map-render/bootstrap/BootstrapDialog.js | 111 - .../mindplot/test/unit/EventsTestSuite.js | 10 +- packages/mindplot/test/unit/TestSuite.js | 4 +- packages/mindplot/webpack.playground.js | 9 +- packages/web2d/jsconfig.json | 5 +- packages/web2d/src/components/ElementClass.js | 9 +- packages/web2d/src/components/Workspace.js | 13 +- .../src/components/peer/svg/ArialFont.js | 18 +- .../src/components/peer/svg/ArrowPeer.js | 29 +- .../src/components/peer/svg/CurvedLinePeer.js | 67 +- .../src/components/peer/svg/ElementPeer.js | 81 +- .../src/components/peer/svg/ElipsePeer.js | 21 +- .../web2d/src/components/peer/svg/Font.js | 28 +- .../src/components/peer/svg/GroupPeer.js | 37 +- .../src/components/peer/svg/ImagePeer.js | 23 +- .../web2d/src/components/peer/svg/LinePeer.js | 24 +- .../src/components/peer/svg/PolyLinePeer.js | 33 +- .../web2d/src/components/peer/svg/RectPeer.js | 22 +- .../src/components/peer/svg/TahomaFont.js | 16 +- .../web2d/src/components/peer/svg/TextPeer.js | 58 +- .../src/components/peer/svg/TimesFont.js | 16 +- .../src/components/peer/svg/VerdanaFont.js | 16 +- .../src/components/peer/svg/WorkspacePeer.js | 30 +- .../components/peer/utils/PolyLineUtils.js | 17 + packages/web2d/src/index.js | 47 + packages/web2d/src/web2d.js | 41 - packages/web2d/test/playground/Grid.js | 63 + packages/web2d/test/playground/arrow.html | 47 +- packages/web2d/test/playground/arrow.js | 22 + .../web2d/test/playground/context-loader.js | 8 - .../web2d/test/playground/curvedLine.html | 49 +- packages/web2d/test/playground/curvedLine.js | 26 + packages/web2d/test/playground/events.html | 127 +- packages/web2d/test/playground/events.js | 107 + packages/web2d/test/playground/font.html | 73 +- packages/web2d/test/playground/font.js | 57 + packages/web2d/test/playground/group.html | 331 +-- packages/web2d/test/playground/group.js | 304 ++ packages/web2d/test/playground/index.html | 5 +- packages/web2d/test/playground/line.html | 77 +- packages/web2d/test/playground/line.js | 67 + packages/web2d/test/playground/polyLine.html | 152 +- packages/web2d/test/playground/polyLine.js | 67 + packages/web2d/test/playground/prototype.html | 145 +- packages/web2d/test/playground/prototype.js | 129 + packages/web2d/test/playground/rect.html | 62 +- packages/web2d/test/playground/rect.js | 49 + packages/web2d/test/playground/shapes.html | 234 +- packages/web2d/test/playground/shapes.js | 241 ++ packages/web2d/test/playground/utils.js | 60 - packages/web2d/test/playground/workspace.html | 198 +- packages/web2d/test/playground/workspace.js | 181 ++ packages/web2d/webpack.common.js | 5 - packages/web2d/webpack.playground.js | 126 +- yarn.lock | 75 +- 113 files changed, 4509 insertions(+), 4829 deletions(-) delete mode 100644 packages/mindplot/src/components/commands/index.js rename packages/mindplot/src/components/libraries/bootstrap/{BootstrapDialog.Request.js => BootstrapDialogRequest.js} (87%) delete mode 100644 packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js delete mode 100644 packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js create mode 100644 packages/web2d/src/index.js delete mode 100644 packages/web2d/src/web2d.js create mode 100755 packages/web2d/test/playground/Grid.js create mode 100644 packages/web2d/test/playground/arrow.js delete mode 100644 packages/web2d/test/playground/context-loader.js create mode 100644 packages/web2d/test/playground/curvedLine.js create mode 100644 packages/web2d/test/playground/events.js create mode 100644 packages/web2d/test/playground/font.js create mode 100644 packages/web2d/test/playground/group.js create mode 100644 packages/web2d/test/playground/line.js create mode 100644 packages/web2d/test/playground/polyLine.js create mode 100644 packages/web2d/test/playground/prototype.js create mode 100644 packages/web2d/test/playground/rect.js create mode 100644 packages/web2d/test/playground/shapes.js delete mode 100755 packages/web2d/test/playground/utils.js create mode 100644 packages/web2d/test/playground/workspace.js diff --git a/packages/mindplot/src/components/ActionIcon.js b/packages/mindplot/src/components/ActionIcon.js index 73bf33a9..98afbf42 100644 --- a/packages/mindplot/src/components/ActionIcon.js +++ b/packages/mindplot/src/components/ActionIcon.js @@ -17,48 +17,49 @@ */ import Icon from './Icon'; -const ActionIcon = new Class({ - Extends: Icon, - initialize(topic, url) { - this.parent(url); +class ActionIcon extends Icon { + + constructor(topic, url) { + super(url); this._node = topic; - }, + } + getNode() { return this._node; - }, + } setPosition(x, y) { const size = this.getSize(); this.getImage().setPosition(x - size.width / 2, y - size.height / 2); - }, + } addEvent(event, fn) { this.getImage().addEvent(event, fn); - }, + } addToGroup(group) { group.append(this.getImage()); - }, + } setVisibility(visible) { this.getImage().setVisibility(visible); - }, + } isVisible() { return this.getImage().isVisible(); - }, + } setCursor(cursor) { return this.getImage().setCursor(cursor); - }, + } moveToBack(cursor) { return this.getImage().moveToBack(cursor); - }, + } moveToFront(cursor) { return this.getImage().moveToFront(cursor); - }, -}); + } +} export default ActionIcon; diff --git a/packages/mindplot/src/components/CentralTopic.js b/packages/mindplot/src/components/CentralTopic.js index 644b1a78..9916bdb5 100644 --- a/packages/mindplot/src/components/CentralTopic.js +++ b/packages/mindplot/src/components/CentralTopic.js @@ -15,67 +15,57 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import Topic from './Topic'; import Shape from './util/Shape'; -const CentralTopic = new Class( - /** @lends CentralTopic */ { - Extends: Topic, - /** - * @extends mindplot.Topic - * @constructs - * @param model - * @param options - */ - initialize(model, options) { - this.parent(model, options); - }, +class CentralTopic extends Topic { + constructor(model, options) { + super(model, options); + } - _registerEvents() { - this.parent(); + _registerEvents() { + super._registerEvents(); - // This disable the drag of the central topic. - // But solves the problem of deselecting the nodes when the screen is clicked. - this.addEvent('mousedown', (event) => { - event.stopPropagation(); - }); - }, + // This disable the drag of the central topic. + // But solves the problem of deselecting the nodes when the screen is clicked. + this.addEvent('mousedown', (event) => { + event.stopPropagation(); + }); + } - /** */ - workoutIncomingConnectionPoint() { - return this.getPosition(); - }, + /** */ + workoutIncomingConnectionPoint() { + return this.getPosition(); + } - /** */ - setCursor(type) { - type = type == 'move' ? 'default' : type; - this.parent(type); - }, + /** */ + setCursor(type) { + super.setCursor(type === 'move' ? 'default' : type); + } - /** */ - updateTopicShape() {}, + /** */ + updateTopicShape() {} - _updatePositionOnChangeSize() { - // Center main topic ... - const zeroPoint = new web2d.Point(0, 0); - this.setPosition(zeroPoint); - }, + _updatePositionOnChangeSize() { + // Center main topic ... + const zeroPoint = new web2d.Point(0, 0); + this.setPosition(zeroPoint); + } - /** */ - getShrinkConnector() { - return null; - }, + /** */ + getShrinkConnector() { + return null; + } - /** */ - workoutOutgoingConnectionPoint(targetPosition) { - $assert(targetPosition, 'targetPoint can not be null'); - const pos = this.getPosition(); - const isAtRight = Shape.isAtRight(targetPosition, pos); - const size = this.getSize(); - return Shape.calculateRectConnectionPoint(pos, size, !isAtRight); - }, - }, -); + /** */ + workoutOutgoingConnectionPoint(targetPosition) { + $assert(targetPosition, 'targetPoint can not be null'); + const pos = this.getPosition(); + const isAtRight = Shape.isAtRight(targetPosition, pos); + const size = this.getSize(); + return Shape.calculateRectConnectionPoint(pos, size, !isAtRight); + } +} export default CentralTopic; diff --git a/packages/mindplot/src/components/Command.js b/packages/mindplot/src/components/Command.js index 6496551a..8fa423e6 100644 --- a/packages/mindplot/src/components/Command.js +++ b/packages/mindplot/src/components/Command.js @@ -17,21 +17,21 @@ */ import { $defined } from '@wisemapping/core-js'; -const Command = new Class(/** @lends mindplot.Command */{ +class Command { /** * @classdesc The command base class for handling do/undo mindmap operations * @constructs */ - initialize() { + constructor() { this._id = Command._nextUUID(); - }, + } /** * @abstract */ execute(commandContext) { throw 'execute must be implemented.'; - }, + } /** * Triggered by the undo button - reverses the executed command @@ -39,7 +39,7 @@ const Command = new Class(/** @lends mindplot.Command */{ */ undoExecute(commandContext) { throw 'undo must be implemented.'; - }, + } /** * Returns the unique id of this command @@ -47,13 +47,13 @@ const Command = new Class(/** @lends mindplot.Command */{ */ getId() { return this._id; - }, -}); + } +} Command._nextUUID = function () { if (!$defined(Command._uuid)) { Command._uuid = 1; - } +} Command._uuid += 1; return Command._uuid; diff --git a/packages/mindplot/src/components/ConnectionLine.js b/packages/mindplot/src/components/ConnectionLine.js index 40722cb6..f1deb86d 100644 --- a/packages/mindplot/src/components/ConnectionLine.js +++ b/packages/mindplot/src/components/ConnectionLine.js @@ -16,13 +16,13 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import INodeModel, { TopicShape } from './model/INodeModel'; import TopicConfig from './TopicConfig'; -const ConnectionLine = new Class({ - initialize(sourceNode, targetNode, lineType) { +class ConnectionLine { + constructor(sourceNode, targetNode, lineType) { $assert(targetNode, 'parentNode node can not be null'); $assert(sourceNode, 'childNode node can not be null'); $assert(sourceNode !== targetNode, 'Circular connection'); @@ -47,14 +47,14 @@ const ConnectionLine = new Class({ line.setFill(strokeColor, 1); this._line2d = line; - }, + } _getCtrlPoints(sourceNode, targetNode) { const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition()); const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition()); const deltaX = (srcPos.x - destPos.x) / 3; return [new web2d.Point(deltaX, 0), new web2d.Point(-deltaX, 0)]; - }, + } _createLine(lineType, defaultStyle) { if (!$defined(lineType)) { @@ -79,19 +79,19 @@ const ConnectionLine = new Class({ break; } return line; - }, + } setVisibility(value) { this._line2d.setVisibility(value); - }, + } isVisible() { return this._line2d.isVisible(); - }, + } setOpacity(opacity) { this._line2d.setOpacity(opacity); - }, + } redraw() { const line2d = this._line2d; @@ -117,7 +117,7 @@ const ConnectionLine = new Class({ // Add connector ... this._positionateConnector(targetTopic); - }, + } _positionateConnector(targetTopic) { const targetPosition = targetTopic.getPosition(); @@ -142,61 +142,61 @@ const ConnectionLine = new Class({ } connector.setPosition(x, y); } - }, + } setStroke(color, style, opacity) { this._line2d.setStroke(null, null, color, opacity); - }, + } addToWorkspace(workspace) { workspace.append(this._line2d); this._line2d.moveToBack(); - }, + } removeFromWorkspace(workspace) { workspace.removeChild(this._line2d); - }, + } getTargetTopic() { return this._targetTopic; - }, + } getSourceTopic() { return this._sourceTopic; - }, + } getLineType() { return this._lineType; - }, + } getLine() { return this._line2d; - }, + } getModel() { return this._model; - }, + } setModel(model) { this._model = model; - }, + } getType() { return 'ConnectionLine'; - }, + } getId() { return this._model.getId(); - }, + } moveToBack() { this._line2d.moveToBack(); - }, + } moveToFront() { this._line2d.moveToFront(); - }, -}); + } +} ConnectionLine.getStrokeColor = () => '#495879'; diff --git a/packages/mindplot/src/components/ControlPoint.js b/packages/mindplot/src/components/ControlPoint.js index 34277ee4..c2839d0c 100644 --- a/packages/mindplot/src/components/ControlPoint.js +++ b/packages/mindplot/src/components/ControlPoint.js @@ -15,14 +15,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import { $defined } from '@wisemapping/core-js'; import Shape from './util/Shape'; import ActionDispatcher from './ActionDispatcher'; -const ControlPoint = new Class({ - initialize() { +class ControlPoint { + constructor() { const control1 = new web2d.Elipse({ width: 6, height: 6, @@ -68,7 +68,7 @@ const ControlPoint = new Class({ this._controlPointsController[1].addEvent('dblclick', (event) => { me._mouseClick(event); }); - }, + } setLine(line) { if ($defined(this._line)) { @@ -82,11 +82,11 @@ const ControlPoint = new Class({ this._orignalCtrlPoint[1] = this._controls[1].clone(); this._endPoint[0] = this._line.getLine().getFrom().clone(); this._endPoint[1] = this._line.getLine().getTo().clone(); - }, + } redraw() { if ($defined(this._line)) this._createControlPoint(); - }, + } _createControlPoint() { this._controls = this._line.getLine().getControlPoints(); @@ -110,9 +110,9 @@ const ControlPoint = new Class({ this._controls[ControlPoint.TO].x + pos.x, this._controls[ControlPoint.TO].y + pos.y - 3, ); - }, + } - _removeLine() {}, + _removeLine() {} _mouseDown(event, point, me) { if (!this._isBinded) { @@ -130,7 +130,7 @@ const ControlPoint = new Class({ event.preventDefault(); event.stopPropagation(); return false; - }, + } _mouseMoveEvent(event, point) { const screen = this._workspace.getScreenManager(); @@ -153,7 +153,7 @@ const ControlPoint = new Class({ this._controlLines[point].setFrom(cords.x, cords.y); this._controlLines[point].setTo(pos.x - 2, pos.y); this._line.getLine().updateLine(point); - }, + } _mouseUp(event, point) { this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction); @@ -162,13 +162,13 @@ const ControlPoint = new Class({ const actionDispatcher = ActionDispatcher.getInstance(); actionDispatcher.moveControlPoint(this, point); this._isBinded = false; - }, + } _mouseClick(event) { event.preventDefault(); event.stopPropagation(); return false; - }, + } setVisibility(visible) { if (visible) { @@ -181,7 +181,7 @@ const ControlPoint = new Class({ this._controlPointsController[1].setVisibility(visible); this._controlLines[0].setVisibility(visible); this._controlLines[1].setVisibility(visible); - }, + } addToWorkspace(workspace) { this._workspace = workspace; @@ -189,7 +189,7 @@ const ControlPoint = new Class({ workspace.append(this._controlPointsController[1]); workspace.append(this._controlLines[0]); workspace.append(this._controlLines[1]); - }, + } removeFromWorkspace(workspace) { this._workspace = null; @@ -197,20 +197,20 @@ const ControlPoint = new Class({ workspace.removeChild(this._controlPointsController[1]); workspace.removeChild(this._controlLines[0]); workspace.removeChild(this._controlLines[1]); - }, + } getControlPoint(index) { return this._controls[index]; - }, + } getOriginalEndPoint(index) { return this._endPoint[index]; - }, + } getOriginalCtrlPoint(index) { return this._orignalCtrlPoint[index]; - }, -}); + } +} ControlPoint.FROM = 0; ControlPoint.TO = 1; diff --git a/packages/mindplot/src/components/DesignerKeyboard.js b/packages/mindplot/src/components/DesignerKeyboard.js index 4089bdc3..14433686 100644 --- a/packages/mindplot/src/components/DesignerKeyboard.js +++ b/packages/mindplot/src/components/DesignerKeyboard.js @@ -18,13 +18,12 @@ import { $assert } from '@wisemapping/core-js'; import Keyboard from './Keyboard'; -const DesignerKeyboard = new Class({ - Extends: Keyboard, - - initialize(designer) { +class DesignerKeyboard extends Keyboard { + constructor(designer) { + super(designer); $assert(designer, 'designer can not be null'); this._registerEvents(designer); - }, + } _registerEvents(designer) { // Try with the keyboard .. @@ -264,7 +263,7 @@ const DesignerKeyboard = new Class({ } } }); - }, + } _goToBrother(designer, node, direction) { const parent = node.getParent(); @@ -277,10 +276,10 @@ const DesignerKeyboard = new Class({ let dist = null; for (let i = 0; i < brothers.length; i++) { const sameSide = (x * brothers[i].getPosition().x) >= 0; - if (brothers[i] != node && sameSide) { + if (brothers[i] !== node && sameSide) { const brother = brothers[i]; const brotherY = brother.getPosition().y; - if (direction == 'DOWN' && brotherY > y) { + if (direction === 'DOWN' && brotherY > y) { let distancia = y - brotherY; if (distancia < 0) { distancia *= (-1); @@ -289,7 +288,7 @@ const DesignerKeyboard = new Class({ dist = distancia; target = brothers[i]; } - } else if (direction == 'UP' && brotherY < y) { + } else if (direction === 'UP' && brotherY < y) { let distance = y - brotherY; if (distance < 0) { distance *= (-1); @@ -303,7 +302,7 @@ const DesignerKeyboard = new Class({ } this._goToNode(designer, target); } - }, + } _goToSideChild(designer, node, side) { const children = node.getChildren(); @@ -313,13 +312,13 @@ const DesignerKeyboard = new Class({ for (let i = 0; i < children.length; i++) { const child = children[i]; const childY = child.getPosition().y; - if (side == 'LEFT' && child.getPosition().x < 0) { + if (side === 'LEFT' && child.getPosition().x < 0) { if (top == null || childY < top) { target = child; top = childY; } } - if (side == 'RIGHT' && child.getPosition().x > 0) { + if (side === 'RIGHT' && child.getPosition().x > 0) { if (top == null || childY < top) { target = child; top = childY; @@ -329,14 +328,14 @@ const DesignerKeyboard = new Class({ this._goToNode(designer, target); } - }, + } _goToParent(designer, node) { const parent = node.getParent(); if (parent) { this._goToNode(designer, parent); } - }, + } _goToChild(designer, node) { const children = node.getChildren(); @@ -352,7 +351,7 @@ const DesignerKeyboard = new Class({ } this._goToNode(designer, target); } - }, + } _goToNode(designer, node) { // First deselect all the nodes ... @@ -360,9 +359,8 @@ const DesignerKeyboard = new Class({ // Give focus to the selected node.... node.setOnFocus(true); - }, - -}); + } +} DesignerKeyboard.specialKeys = { 8: 'backspace', diff --git a/packages/mindplot/src/components/DesignerUndoManager.js b/packages/mindplot/src/components/DesignerUndoManager.js index d6b425ff..fdc7388d 100644 --- a/packages/mindplot/src/components/DesignerUndoManager.js +++ b/packages/mindplot/src/components/DesignerUndoManager.js @@ -17,12 +17,12 @@ */ import { $assert } from '@wisemapping/core-js'; -const DesignerUndoManager = new Class({ - initialize(fireChange) { +class DesignerUndoManager { + constructor() { this._undoQueue = []; this._redoQueue = []; this._baseId = 0; - }, + } enqueue(command) { $assert(command, 'Command can not be null'); @@ -37,7 +37,7 @@ const DesignerUndoManager = new Class({ this._undoQueue.push(command); } this._redoQueue = []; - }, + } execUndo(commandContext) { if (this._undoQueue.length > 0) { @@ -46,7 +46,7 @@ const DesignerUndoManager = new Class({ command.undoExecute(commandContext); } - }, + } execRedo(commandContext) { if (this._redoQueue.length > 0) { @@ -54,11 +54,11 @@ const DesignerUndoManager = new Class({ this._undoQueue.push(command); command.execute(commandContext); } - }, + } buildEvent() { return { undoSteps: this._undoQueue.length, redoSteps: this._redoQueue.length }; - }, + } markAsChangeBase() { const undoLength = this._undoQueue.length; @@ -68,7 +68,7 @@ const DesignerUndoManager = new Class({ } else { this._baseId = 0; } - }, + } hasBeenChanged() { let result = true; @@ -80,7 +80,7 @@ const DesignerUndoManager = new Class({ result = (this._baseId != command.getId()); } return result; - }, -}); + } +} export default DesignerUndoManager; diff --git a/packages/mindplot/src/components/DragConnector.js b/packages/mindplot/src/components/DragConnector.js index e65402ab..d6ff028e 100644 --- a/packages/mindplot/src/components/DragConnector.js +++ b/packages/mindplot/src/components/DragConnector.js @@ -16,15 +16,16 @@ * limitations under the License. */ import { $assert } from '@wisemapping/core-js'; -const DragConnector = new Class({ - initialize(designerModel, workspace) { + +class DragConnector { + constructor(designerModel, workspace) { $assert(designerModel, 'designerModel can not be null'); $assert(workspace, 'workspace can not be null'); // this._layoutManager = layoutManager; this._designerModel = designerModel; this._workspace = workspace; - }, + } checkConnection(dragTopic) { const topics = this._designerModel.getTopics(); @@ -41,7 +42,7 @@ const DragConnector = new Class({ if (!dragTopic.isConnected() && candidates.length > 0) { dragTopic.connectTo(candidates[0]); } - }, + } _searchConnectionCandidates(dragTopic) { let topics = this._designerModel.getTopics(); @@ -92,18 +93,18 @@ const DragConnector = new Class({ return me._proximityWeight(av, a, sPos, currentConnection) - me._proximityWeight(bv, b, sPos, currentConnection); }); return topics; - }, + } _proximityWeight(isAligned, target, sPos, currentConnection) { const tPos = target.getPosition(); return (isAligned ? 0 : 200) + Math.abs(tPos.x - sPos.x) + Math.abs(tPos.y - sPos.y) + (currentConnection == target ? 0 : 100); - }, + } _isVerticallyAligned(targetSize, targetPosition, sourcePosition) { return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2; - }, + } -}); +} DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE = 80; diff --git a/packages/mindplot/src/components/DragManager.js b/packages/mindplot/src/components/DragManager.js index b4a587ae..c5942cda 100644 --- a/packages/mindplot/src/components/DragManager.js +++ b/packages/mindplot/src/components/DragManager.js @@ -18,15 +18,15 @@ import { $assert, $defined } from '@wisemapping/core-js'; import DragTopic from './DragTopic'; -const DragManager = new Class({ - initialize(workspace, eventDispatcher) { +class DragManager { + constructor(workspace, eventDispatcher) { this._workspace = workspace; this._designerModel = workspace; this._listeners = {}; this._isDragInProcess = false; this._eventDispatcher = eventDispatcher; DragTopic.init(this._workspace); - }, + } add(node) { // Add behaviour ... @@ -34,7 +34,7 @@ const DragManager = new Class({ const screen = workspace.getScreenManager(); const dragManager = this; const me = this; - const mouseDownListener = function (event) { + const mouseDownListener = function mouseDownListener(event) { if (workspace.isWorkspaceEventsEnabled()) { // Disable double drag... workspace.enableWorkspaceEvents(false); @@ -56,7 +56,7 @@ const DragManager = new Class({ } }; node.addEvent('mousedown', mouseDownListener); - }, + } remove(node) { const nodes = this._topics; @@ -68,7 +68,7 @@ const DragManager = new Class({ index = i; } } - }, + } _buildMouseMoveListener(workspace, dragNode, dragManager) { const screen = workspace.getScreenManager(); @@ -98,7 +98,7 @@ const DragManager = new Class({ }; dragManager._mouseMoveListener = result; return result; - }, + } _buildMouseUpListener(workspace, node, dragNode, dragManager) { const screen = workspace.getScreenManager(); @@ -131,7 +131,7 @@ const DragManager = new Class({ }; dragManager._mouseUpListener = result; return result; - }, + } /** * type: @@ -141,7 +141,7 @@ const DragManager = new Class({ */ addEvent(type, listener) { this._listeners[type] = listener; - }, -}); + } +} export default DragManager; diff --git a/packages/mindplot/src/components/DragPivot.js b/packages/mindplot/src/components/DragPivot.js index 215e5fae..24952b40 100644 --- a/packages/mindplot/src/components/DragPivot.js +++ b/packages/mindplot/src/components/DragPivot.js @@ -16,14 +16,14 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import DragTopicConfig from './DragTopicConfig'; import Shape from './util/Shape'; import INodeModel from './model/INodeModel'; -const DragPivot = new Class({ - initialize() { +class DragPivot { + constructor() { this._position = new web2d.Point(); this._size = DragTopicConfig.PIVOT_SIZE; @@ -33,15 +33,15 @@ const DragPivot = new Class({ this._connectRect = this._buildRect(); this._targetTopic = null; this._isVisible = false; - }, + } isVisible() { return this._isVisible; - }, + } getTargetTopic() { return this._targetTopic; - }, + } _buildStraightLine() { const line = new web2d.CurvedLine(); @@ -50,7 +50,7 @@ const DragPivot = new Class({ line.setOpacity(0.4); line.setVisibility(false); return line; - }, + } _buildCurvedLine() { const line = new web2d.CurvedLine(); @@ -59,7 +59,7 @@ const DragPivot = new Class({ line.setOpacity(0.4); line.setVisibility(false); return line; - }, + } _redrawLine() { // Update line position. @@ -90,16 +90,16 @@ const DragPivot = new Class({ // This solve several strange effects ;) const targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint); line.setTo(targetPoint.x, targetPoint.y); - }, + } setPosition(point) { this._position = point; this._redrawLine(); - }, + } getPosition() { return this._position; - }, + } _buildRect() { const size = this._size; @@ -113,16 +113,16 @@ const DragPivot = new Class({ const rect = new web2d.Rect(0, rectAttributes); rect.setVisibility(false); return rect; - }, + } _getPivotRect() { return this._dragPivot; - }, + } getSize() { const elem2d = this._getPivotRect(); return elem2d.getSize(); - }, + } setVisibility(value) { if (this.isVisible() != value) { @@ -138,7 +138,7 @@ const DragPivot = new Class({ } this._isVisible = value; } - }, + } // If the node is connected, validate that there is a line connecting both... _getConnectionLine() { @@ -152,7 +152,7 @@ const DragPivot = new Class({ } } return result; - }, + } addToWorkspace(workspace) { const pivotRect = this._getPivotRect(); @@ -178,7 +178,7 @@ const DragPivot = new Class({ connectRect.setVisibility(false); workspace.append(connectRect); connectRect.moveToBack(); - }, + } removeFromWorkspace(workspace) { const shape = this._getPivotRect(); @@ -194,7 +194,7 @@ const DragPivot = new Class({ if ($defined(this._curvedLine)) { workspace.removeChild(this._curvedLine); } - }, + } connectTo(targetTopic, position) { $assert(!this._outgoingLine, 'Could not connect an already connected node'); @@ -226,7 +226,7 @@ const DragPivot = new Class({ pivotRect.setPosition(position.x, position.y); this._redrawLine(); - }, + } disconnect(workspace) { $assert(workspace, 'workspace can not be null.'); @@ -234,7 +234,7 @@ const DragPivot = new Class({ this.setVisibility(false); this._targetTopic = null; - }, -}); + } +} export default DragPivot; diff --git a/packages/mindplot/src/components/DragTopic.js b/packages/mindplot/src/components/DragTopic.js index dc59a3aa..cca0d36d 100644 --- a/packages/mindplot/src/components/DragTopic.js +++ b/packages/mindplot/src/components/DragTopic.js @@ -16,13 +16,13 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import ActionDispatcher from './ActionDispatcher'; import DragPivot from './DragPivot'; -const DragTopic = new Class({ - initialize(dragShape, draggedNode, layoutManger) { +class DragTopic { + constructor(dragShape, draggedNode, layoutManger) { $assert(dragShape, 'Rect can not be null.'); $assert(draggedNode, 'draggedNode can not be null.'); $assert(layoutManger, 'layoutManger can not be null.'); @@ -34,11 +34,11 @@ const DragTopic = new Class({ this._position = new web2d.Point(); this._isInWorkspace = false; this._isFreeLayoutEnabled = false; - }, + } setOrder(order) { this._order = order; - }, + } setPosition(x, y) { // Update drag shadow position .... @@ -78,7 +78,7 @@ const DragTopic = new Class({ this.setOrder(predict.order); } } - }, + } updateFreeLayout(event) { const isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac); @@ -87,27 +87,27 @@ const DragTopic = new Class({ dragPivot.setVisibility(!isFreeEnabled); this._isFreeLayoutEnabled = isFreeEnabled; } - }, + } setVisibility(value) { const dragPivot = this._getDragPivot(); dragPivot.setVisibility(value); - }, + } isVisible() { const dragPivot = this._getDragPivot(); return dragPivot.isVisible(); - }, + } getInnerShape() { return this._elem2d; - }, + } disconnect(workspace) { // Clear connection line ... const dragPivot = this._getDragPivot(); dragPivot.disconnect(workspace); - }, + } connectTo(parent) { $assert(parent, 'Parent connection node can not be null.'); @@ -126,11 +126,11 @@ const DragTopic = new Class({ dragPivot.setVisibility(true); this.setOrder(predict.order); - }, + } getDraggedTopic() { return this._draggedNode; - }, + } removeFromWorkspace(workspace) { if (this._isInWorkspace) { @@ -143,11 +143,11 @@ const DragTopic = new Class({ this._isInWorkspace = false; } - }, + } isInWorkspace() { return this._isInWorkspace; - }, + } addToWorkspace(workspace) { if (!this._isInWorkspace) { @@ -156,19 +156,19 @@ const DragTopic = new Class({ dragPivot.addToWorkspace(workspace); this._isInWorkspace = true; } - }, + } _getDragPivot() { return DragTopic.__getDragPivot(); - }, + } getPosition() { return this._position; - }, + } isDragTopic() { return true; - }, + } applyChanges(workspace) { $assert(workspace, 'workspace can not be null'); @@ -193,23 +193,23 @@ const DragTopic = new Class({ } else { actionDispatcher.moveTopic(topicId, position); } - }, + } getConnectedToTopic() { const dragPivot = this._getDragPivot(); return dragPivot.getTargetTopic(); - }, + } isConnected() { return this.getConnectedToTopic() != null; - }, + } isFreeLayoutOn() { // return this._isFreeLayoutEnabled; // Disable free layout ... return false; - }, -}); + } +} DragTopic.init = function (workspace) { $assert(workspace, 'workspace can not be null'); diff --git a/packages/mindplot/src/components/EditorProperties.js b/packages/mindplot/src/components/EditorProperties.js index 281710a2..a18749e5 100644 --- a/packages/mindplot/src/components/EditorProperties.js +++ b/packages/mindplot/src/components/EditorProperties.js @@ -16,23 +16,23 @@ * limitations under the License. */ -const EditorProperties = new Class({ - initialize() { +class EditorProperties { + constructor() { this._zoom = 0; this._position = 0; - }, + } setZoom(zoom) { this._zoom = zoom; - }, + } getZoom() { return this._zoom; - }, + } asProperties() { return `zoom=${this._zoom}\n`; - }, -}); + } +} export default EditorProperties; diff --git a/packages/mindplot/src/components/Icon.js b/packages/mindplot/src/components/Icon.js index 820ff042..15ccf7a1 100644 --- a/packages/mindplot/src/components/Icon.js +++ b/packages/mindplot/src/components/Icon.js @@ -16,44 +16,45 @@ * limitations under the License. */ import { $assert } from "@wisemapping/core-js"; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; -const Icon = new Class({ - initialize(url) { +class Icon { + constructor(url) { $assert(url, 'topic can not be null'); this._image = new web2d.Image(); this._image.setHref(url); this._image.setSize(Icon.SIZE, Icon.SIZE); - }, + } getImage() { return this._image; - }, + } setGroup(group) { this._group = group; - }, + } getGroup() { return this._group; - }, + } getSize() { return this._image.getSize(); - }, + } getPosition() { return this._image.getPosition(); - }, + } addEvent(type, fnc) { this._image.addEvent(type, fnc); - }, + } + // eslint-disable-next-line class-methods-use-this remove() { throw new Error('Unsupported operation'); - }, -}); + } +} Icon.SIZE = 90; diff --git a/packages/mindplot/src/components/IconGroup.js b/packages/mindplot/src/components/IconGroup.js index 6c819dda..fef8037b 100644 --- a/packages/mindplot/src/components/IconGroup.js +++ b/packages/mindplot/src/components/IconGroup.js @@ -16,7 +16,7 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import Icon from './Icon'; diff --git a/packages/mindplot/src/components/ImageIcon.js b/packages/mindplot/src/components/ImageIcon.js index 9604122f..e2379220 100644 --- a/packages/mindplot/src/components/ImageIcon.js +++ b/packages/mindplot/src/components/ImageIcon.js @@ -15,57 +15,56 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { $assert } from "@wisemapping/core-js"; +import { $assert } from '@wisemapping/core-js'; import Icon from './Icon'; import ActionDispatcher from './ActionDispatcher'; -const ImageIcon = new Class({ - Extends: Icon, - initialize(topic, iconModel, readOnly) { +class ImageIcon extends Icon { + constructor(topic, iconModel, readOnly) { $assert(iconModel, 'iconModel can not be null'); $assert(topic, 'topic can not be null'); - this._topicId = topic.getId(); - this._featureModel = iconModel; - // Build graph image representation ... const iconType = iconModel.getIconType(); - const imgUrl = this._getImageUrl(iconType); - this.parent(imgUrl); + const imgUrl = ImageIcon._getImageUrl(iconType); + super(imgUrl); + this._topicId = topic.getId(); + this._featureModel = iconModel; + if (!readOnly) { // Icon const image = this.getImage(); const me = this; image.addEvent('click', () => { const iconType = iconModel.getIconType(); - const newIconType = me._getNextFamilyIconId(iconType); + const newIconType = ImageIcon._getNextFamilyIconId(iconType); iconModel.setIconType(newIconType); - const imgUrl = me._getImageUrl(newIconType); + const imgUrl = ImageIcon._getImageUrl(newIconType); me._image.setHref(imgUrl); }); this._image.setCursor('pointer'); } - }, + } - _getImageUrl(iconId) { + static _getImageUrl(iconId) { return `icons/${iconId}.png`; - }, + } getModel() { return this._featureModel; - }, + } - _getNextFamilyIconId(iconId) { - const familyIcons = this._getFamilyIcons(iconId); + static _getNextFamilyIconId(iconId) { + const familyIcons = ImageIcon._getFamilyIcons(iconId); $assert(familyIcons != null, 'Family Icon not found!'); let result = null; for (let i = 0; i < familyIcons.length && result == null; i++) { - if (familyIcons[i] == iconId) { + if (familyIcons[i] === iconId) { // Is last one? - if (i == (familyIcons.length - 1)) { + if (i === (familyIcons.length - 1)) { result = familyIcons[0]; } else { result = familyIcons[i + 1]; @@ -75,32 +74,32 @@ const ImageIcon = new Class({ } return result; - }, + } - _getFamilyIcons(iconId) { + static _getFamilyIcons(iconId) { $assert(iconId != null, 'id must not be null'); - $assert(iconId.indexOf('_') != -1, "Invalid icon id (it must contain '_')"); + $assert(iconId.indexOf('_') !== -1, "Invalid icon id (it must contain '_')"); let result = null; for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i++) { const family = ImageIcon.prototype.ICON_FAMILIES[i]; const iconFamilyId = iconId.substr(0, iconId.indexOf('_')); - if (family.id == iconFamilyId) { + if (family.id === iconFamilyId) { result = family.icons; break; } } return result; - }, + } remove() { const actionDispatcher = ActionDispatcher.getInstance(); const featureId = this._featureModel.getId(); const topicId = this._topicId; actionDispatcher.removeFeatureFromTopic(topicId, featureId); - }, -}); + } +} ImageIcon.prototype.ICON_FAMILIES = [ { id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] }, diff --git a/packages/mindplot/src/components/LinkIcon.js b/packages/mindplot/src/components/LinkIcon.js index 1e98b9c6..8c4d7780 100644 --- a/packages/mindplot/src/components/LinkIcon.js +++ b/packages/mindplot/src/components/LinkIcon.js @@ -20,20 +20,18 @@ import $ from '@libraries/jquery-2.1.0'; import Icon from './Icon'; import LinkIconTooltip from './widget/LinkIconTooltip'; -const LinkIcon = new Class({ - - Extends: Icon, - initialize(topic, linkModel, readOnly) { +class LinkIcon extends Icon { + constructor(topic, linkModel, readOnly) { $assert(topic, 'topic can not be null'); $assert(linkModel, 'linkModel can not be null'); - this.parent(LinkIcon.IMAGE_URL); + super(LinkIcon.IMAGE_URL); this._linksModel = linkModel; this._topic = topic; this._readOnly = readOnly; this._registerEvents(); - }, + } _registerEvents() { this._image.setCursor('pointer'); @@ -61,12 +59,12 @@ const LinkIcon = new Class({ $(this.getImage().peer._native).mouseenter(() => { me._tip.show(); }); - }, + } getModel() { return this._linksModel; - }, -}); + } +} LinkIcon.IMAGE_URL = 'images/links.png'; export default LinkIcon; diff --git a/packages/mindplot/src/components/LocalStorageManager.js b/packages/mindplot/src/components/LocalStorageManager.js index 8b7f12a2..a1f4ef23 100644 --- a/packages/mindplot/src/components/LocalStorageManager.js +++ b/packages/mindplot/src/components/LocalStorageManager.js @@ -18,21 +18,20 @@ import $ from '@libraries/jquery-2.1.0'; import PersistenceManager from './PersistenceManager'; -const LocalStorageManager = new Class({ - Extends: PersistenceManager, - initialize(documentUrl, forceLoad) { - this.parent(); +class LocalStorageManager extends PersistenceManager { + constructor(documentUrl, forceLoad) { + super(); this.documentUrl = documentUrl; this.forceLoad = forceLoad; - }, + } saveMapXml(mapId, mapXml, pref, saveHistory, events) { localStorage.setItem(`${mapId}-xml`, mapXml); - }, + } discardChanges(mapId) { localStorage.removeItem(`${mapId}-xml`); - }, + } loadMapDom(mapId) { let xml = localStorage.getItem(`${mapId}-xml`); @@ -54,11 +53,11 @@ const LocalStorageManager = new Class({ } return jQuery.parseXML(xml); - }, + } unlockMap(mindmap) { // Ignore, no implementation required ... - }, -}); + } +} export default LocalStorageManager; diff --git a/packages/mindplot/src/components/MainTopic.js b/packages/mindplot/src/components/MainTopic.js index 74a40c62..19e49215 100644 --- a/packages/mindplot/src/components/MainTopic.js +++ b/packages/mindplot/src/components/MainTopic.js @@ -16,148 +16,144 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import Topic from './Topic'; import { TopicShape } from './model/INodeModel'; import Shape from './util/Shape'; -const MainTopic = new Class( - /** @lends MainTopic */ { - Extends: Topic, - /** +class MainTopic extends Topic { + /** * @extends mindplot.Topic * @constructs * @param model * @param options */ - initialize(model, options) { - this.parent(model, options); - }, + constructor(model, options) { + super(model, options); + this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' }; + } - INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' }, + _buildDragShape() { + const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType()); + const size = this.getSize(); + innerShape.setSize(size.width, size.height); + innerShape.setPosition(0, 0); + innerShape.setOpacity(0.5); + innerShape.setCursor('default'); + innerShape.setVisibility(true); - _buildDragShape() { - const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType()); - const size = this.getSize(); - innerShape.setSize(size.width, size.height); - innerShape.setPosition(0, 0); - innerShape.setOpacity(0.5); - innerShape.setCursor('default'); - innerShape.setVisibility(true); + const brColor = this.getBorderColor(); + innerShape.setAttribute('strokeColor', brColor); - const brColor = this.getBorderColor(); - innerShape.setAttribute('strokeColor', brColor); + const bgColor = this.getBackgroundColor(); + innerShape.setAttribute('fillColor', bgColor); - const bgColor = this.getBackgroundColor(); - innerShape.setAttribute('fillColor', bgColor); + // Create group ... + const groupAttributes = { + width: 100, + height: 100, + coordSizeWidth: 100, + coordSizeHeight: 100, + }; + const group = new web2d.Group(groupAttributes); + group.append(innerShape); - // Create group ... - const groupAttributes = { - width: 100, - height: 100, - coordSizeWidth: 100, - coordSizeHeight: 100, - }; - const group = new web2d.Group(groupAttributes); - group.append(innerShape); + // Add Text ... + if (this.getShapeType() !== TopicShape.IMAGE) { + const textShape = this._buildTextShape(true); + const text = this.getText(); + textShape.setText(text); + textShape.setOpacity(0.5); + group.append(textShape); + } + return group; + } - // Add Text ... - if (this.getShapeType() !== TopicShape.IMAGE) { - const textShape = this._buildTextShape(true); - const text = this.getText(); - textShape.setText(text); - textShape.setOpacity(0.5); - group.append(textShape); - } - return group; - }, - - /** */ - updateTopicShape(targetTopic, workspace) { - // Change figure based on the connected topic ... - const model = this.getModel(); - let shapeType = model.getShapeType(); - if (!targetTopic.isCentralTopic()) { - if (!$defined(shapeType)) { - // Get the real shape type ... - shapeType = this.getShapeType(); - this._setShapeType(shapeType, false); - } - } - }, - - /** */ - disconnect(workspace) { - this.parent(workspace); - const size = this.getSize(); - - const model = this.getModel(); - let shapeType = model.getShapeType(); + /** */ + updateTopicShape(targetTopic, workspace) { + // Change figure based on the connected topic ... + const model = this.getModel(); + let shapeType = model.getShapeType(); + if (!targetTopic.isCentralTopic()) { if (!$defined(shapeType)) { - // Change figure ... + // Get the real shape type ... shapeType = this.getShapeType(); - this._setShapeType(TopicShape.ROUNDED_RECT, false); + this._setShapeType(shapeType, false); } - const innerShape = this.getInnerShape(); - innerShape.setVisibility(true); - }, + } + } - _updatePositionOnChangeSize(oldSize, newSize) { - const xOffset = Math.round((newSize.width - oldSize.width) / 2); - const pos = this.getPosition(); - if ($defined(pos)) { - if (pos.x > 0) { - pos.x += xOffset; - } else { - pos.x -= xOffset; - } - this.setPosition(pos); - } - }, + /** */ + disconnect(workspace) { + this.parent(workspace); + const size = this.getSize(); - /** */ - workoutIncomingConnectionPoint(sourcePosition) { - return Shape.workoutIncomingConnectionPoint(this, sourcePosition); - }, + const model = this.getModel(); + let shapeType = model.getShapeType(); + if (!$defined(shapeType)) { + // Change figure ... + shapeType = this.getShapeType(); + this._setShapeType(TopicShape.ROUNDED_RECT, false); + } + const innerShape = this.getInnerShape(); + innerShape.setVisibility(true); + } - /** */ - workoutOutgoingConnectionPoint(targetPosition) { - $assert(targetPosition, 'targetPoint can not be null'); - const pos = this.getPosition(); - const isAtRight = Shape.isAtRight(targetPosition, pos); - const size = this.getSize(); - - let result; - if (this.getShapeType() === TopicShape.LINE) { - result = new web2d.Point(); - const groupPosition = this._elem2d.getPosition(); - const innerShareSize = this.getInnerShape().getSize(); - - if (innerShareSize) { - const magicCorrectionNumber = 0.3; - if (!isAtRight) { - result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber; - } else { - result.x = groupPosition.x + magicCorrectionNumber; - } - result.y = groupPosition.y + innerShareSize.height; - } else { - // Hack: When the size has not being defined. This is because the node has not being added. - // Try to do our best ... - if (!isAtRight) { - result.x = pos.x + size.width / 2; - } else { - result.x = pos.x - size.width / 2; - } - result.y = pos.y + size.height / 2; - } + _updatePositionOnChangeSize(oldSize, newSize) { + const xOffset = Math.round((newSize.width - oldSize.width) / 2); + const pos = this.getPosition(); + if ($defined(pos)) { + if (pos.x > 0) { + pos.x += xOffset; } else { - result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true); + pos.x -= xOffset; } - return result; - }, - }, -); + this.setPosition(pos); + } + } + + /** */ + workoutIncomingConnectionPoint(sourcePosition) { + return Shape.workoutIncomingConnectionPoint(this, sourcePosition); + } + + /** */ + workoutOutgoingConnectionPoint(targetPosition) { + $assert(targetPosition, 'targetPoint can not be null'); + const pos = this.getPosition(); + const isAtRight = Shape.isAtRight(targetPosition, pos); + const size = this.getSize(); + + let result; + if (this.getShapeType() === TopicShape.LINE) { + result = new web2d.Point(); + const groupPosition = this._elem2d.getPosition(); + const innerShareSize = this.getInnerShape().getSize(); + + if (innerShareSize) { + const magicCorrectionNumber = 0.3; + if (!isAtRight) { + result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber; + } else { + result.x = groupPosition.x + magicCorrectionNumber; + } + result.y = groupPosition.y + innerShareSize.height; + } else { + // Hack: When the size has not being defined. This is because the node has not being added. + // Try to do our best ... + if (!isAtRight) { + result.x = pos.x + size.width / 2; + } else { + result.x = pos.x - size.width / 2; + } + result.y = pos.y + size.height / 2; + } + } else { + result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true); + } + return result; + } +} export default MainTopic; diff --git a/packages/mindplot/src/components/MultilineTextEditor.js b/packages/mindplot/src/components/MultilineTextEditor.js index 080a597c..e748292f 100644 --- a/packages/mindplot/src/components/MultilineTextEditor.js +++ b/packages/mindplot/src/components/MultilineTextEditor.js @@ -18,12 +18,12 @@ import Events from './Events'; import ActionDispatcher from './ActionDispatcher'; -const MultilineTextEditor = new Class({ - Extends: Events, - initialize() { +class MultilineTextEditor extends Events { + constructor() { + super(); this._topic = null; this._timeoutId = -1; - }, + } _buildEditor() { const result = $('
') @@ -46,7 +46,7 @@ const MultilineTextEditor = new Class({ result.append(textareaElem); return result; - }, + } _registerEvents(containerElem) { const textareaElem = this._getTextareaElem(); @@ -120,7 +120,7 @@ const MultilineTextEditor = new Class({ containerElem.on('mousedown', (event) => { event.stopPropagation(); }); - }, + } _adjustEditorSize() { if (this.isVisible()) { @@ -140,11 +140,11 @@ const MultilineTextEditor = new Class({ height: textElem.height(), }); } - }, + } isVisible() { return $defined(this._containerElem) && this._containerElem.css('display') == 'block'; - }, + } _updateModel() { if (this._topic.getText() != this._getText()) { @@ -154,7 +154,7 @@ const MultilineTextEditor = new Class({ const actionDispatcher = ActionDispatcher.getInstance(); actionDispatcher.changeTextToTopic([topicId], text); } - }, + } show(topic, text) { // Close a previous node editor if it's opened ... @@ -172,7 +172,7 @@ const MultilineTextEditor = new Class({ this._registerEvents(containerElem); this._showEditor(text); } - }, + } _showEditor(defaultText) { const topic = this._topic; @@ -208,7 +208,7 @@ const MultilineTextEditor = new Class({ }; this._timeoutId = displayFunc.delay(10); - }, + } _setStyle(fontStyle) { const inputField = this._getTextareaElem(); @@ -233,21 +233,21 @@ const MultilineTextEditor = new Class({ }; inputField.css(style); this._containerElem.css(style); - }, + } _setText(text) { const textareaElem = this._getTextareaElem(); textareaElem.val(text); this._adjustEditorSize(); - }, + } _getText() { return this._getTextareaElem().val(); - }, + } _getTextareaElem() { return this._containerElem.find('textarea'); - }, + } _positionCursor(textareaElem, selectText) { textareaElem.focus(); @@ -277,7 +277,7 @@ const MultilineTextEditor = new Class({ textareaElem.focus(); } } - }, + } close(update) { if (this.isVisible() && this._topic) { @@ -297,7 +297,7 @@ const MultilineTextEditor = new Class({ this._timeoutId = -1; } this._topic = null; - }, -}); + } +} export default MultilineTextEditor; diff --git a/packages/mindplot/src/components/NodeGraph.js b/packages/mindplot/src/components/NodeGraph.js index f38aa96a..abbbf9f1 100644 --- a/packages/mindplot/src/components/NodeGraph.js +++ b/packages/mindplot/src/components/NodeGraph.js @@ -19,172 +19,170 @@ import { $assert } from '@wisemapping/core-js'; import TopicConfig from './TopicConfig'; import DragTopic from './DragTopic'; -const NodeGraph = new Class( - /** @lends NodeGraph */ { - /** - * @constructs - * @param {mindplot.model.NodeModel} nodeModel - * @param {Object} options - * @throws will throw an error if nodeModel is null or undefined - */ - initialize(nodeModel, options) { - $assert(nodeModel, 'model can not be null'); +class NodeGraph { + /** + * @constructs + * @param {mindplot.model.NodeModel} nodeModel + * @param {Object} options + * @throws will throw an error if nodeModel is null or undefined + */ + constructor(nodeModel, options) { + $assert(nodeModel, 'model can not be null'); - this._options = options; - this._mouseEvents = true; - this.setModel(nodeModel); - this._onFocus = false; - this._size = { width: 50, height: 20 }; - }, + this._options = options; + this._mouseEvents = true; + this.setModel(nodeModel); + this._onFocus = false; + this._size = { width: 50, height: 20 }; + } - /** @return true if option is set to read-only */ - isReadOnly() { - return this._options.readOnly; - }, + /** @return true if option is set to read-only */ + isReadOnly() { + return this._options.readOnly; + } - /** @return model type */ - getType() { - const model = this.getModel(); - return model.getType(); - }, + /** @return model type */ + getType() { + const model = this.getModel(); + return model.getType(); + } - /** + /** * @param {String} id * @throws will throw an error if the topic id is not a number */ - setId(id) { - $assert(typeof topic.getId() === 'number', `id is not a number:${id}`); - this.getModel().setId(id); - }, + setId(id) { + $assert(typeof topic.getId() === 'number', `id is not a number:${id}`); + this.getModel().setId(id); + } - _set2DElement(elem2d) { - this._elem2d = elem2d; - }, + _set2DElement(elem2d) { + this._elem2d = elem2d; + } - /** + /** * @return 2D element * @throws will throw an error if the element is null or undefined within node graph */ - get2DElement() { - $assert(this._elem2d, 'NodeGraph has not been initialized properly'); - return this._elem2d; - }, + get2DElement() { + $assert(this._elem2d, 'NodeGraph has not been initialized properly'); + return this._elem2d; + } - /** @abstract */ - setPosition(point, fireEvent) { - throw new Error('Unsupported operation'); - }, + /** @abstract */ + setPosition(point, fireEvent) { + throw new Error('Unsupported operation'); + } - /** */ - addEvent(type, listener) { - const elem = this.get2DElement(); - elem.addEvent(type, listener); - }, + /** */ + addEvent(type, listener) { + const elem = this.get2DElement(); + elem.addEvent(type, listener); + } - /** */ - removeEvent(type, listener) { - const elem = this.get2DElement(); - elem.removeEvent(type, listener); - }, + /** */ + removeEvent(type, listener) { + const elem = this.get2DElement(); + elem.removeEvent(type, listener); + } - /** */ - fireEvent(type, event) { - const elem = this.get2DElement(); - elem.trigger(type, event); - }, + /** */ + fireEvent(type, event) { + const elem = this.get2DElement(); + elem.trigger(type, event); + } - /** */ - setMouseEventsEnabled(isEnabled) { - this._mouseEvents = isEnabled; - }, + /** */ + setMouseEventsEnabled(isEnabled) { + this._mouseEvents = isEnabled; + } - /** */ - isMouseEventsEnabled() { - return this._mouseEvents; - }, + /** */ + isMouseEventsEnabled() { + return this._mouseEvents; + } - /** @return {Object} size */ - getSize() { - return this._size; - }, + /** @return {Object} size */ + getSize() { + return this._size; + } - /** @param {Object} size */ - setSize(size) { - this._size.width = parseInt(size.width, 10); - this._size.height = parseInt(size.height, 10); - }, + /** @param {Object} size */ + setSize(size) { + this._size.width = parseInt(size.width, 10); + this._size.height = parseInt(size.height, 10); + } - /** + /** * @return {mindplot.model.NodeModel} the node model */ - getModel() { - $assert(this._model, 'Model has not been initialized yet'); - return this._model; - }, + getModel() { + $assert(this._model, 'Model has not been initialized yet'); + return this._model; + } - /** + /** * @param {mindplot.NodeModel} model the node model * @throws will throw an error if model is null or undefined */ - setModel(model) { - $assert(model, 'Model can not be null'); - this._model = model; - }, + setModel(model) { + $assert(model, 'Model can not be null'); + this._model = model; + } - /** */ - getId() { - return this._model.getId(); - }, + /** */ + getId() { + return this._model.getId(); + } - /** */ - setOnFocus(focus) { - if (this._onFocus !== focus) { - this._onFocus = focus; - const outerShape = this.getOuterShape(); - if (focus) { - outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor); - outerShape.setOpacity(1); - } else { - outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor); - outerShape.setOpacity(0); - } - this.setCursor('move'); - - // In any case, always try to hide the editor ... - this.closeEditors(); - - // Fire event ... - this.fireEvent(focus ? 'ontfocus' : 'ontblur', this); + /** */ + setOnFocus(focus) { + if (this._onFocus !== focus) { + this._onFocus = focus; + const outerShape = this.getOuterShape(); + if (focus) { + outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor); + outerShape.setOpacity(1); + } else { + outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor); + outerShape.setOpacity(0); } - }, + this.setCursor('move'); - /** @return {Boolean} true if the node graph is on focus */ - isOnFocus() { - return this._onFocus; - }, + // In any case, always try to hide the editor ... + this.closeEditors(); - /** */ - dispose(workspace) { - this.setOnFocus(false); - workspace.removeChild(this); - }, + // Fire event ... + this.fireEvent(focus ? 'ontfocus' : 'ontblur', this); + } + } - /** */ - createDragNode(layoutManager) { - const dragShape = this._buildDragShape(); - return new DragTopic(dragShape, this, layoutManager); - }, + /** @return {Boolean} true if the node graph is on focus */ + isOnFocus() { + return this._onFocus; + } - _buildDragShape() { - $assert(false, '_buildDragShape must be implemented by all nodes.'); - }, + /** */ + dispose(workspace) { + this.setOnFocus(false); + workspace.removeChild(this); + } - /** */ - getPosition() { - const model = this.getModel(); - return model.getPosition(); - }, - }, -); + /** */ + createDragNode(layoutManager) { + const dragShape = this._buildDragShape(); + return new DragTopic(dragShape, this, layoutManager); + } + + _buildDragShape() { + $assert(false, '_buildDragShape must be implemented by all nodes.'); + } + + /** */ + getPosition() { + const model = this.getModel(); + return model.getPosition(); + } +} export default NodeGraph; diff --git a/packages/mindplot/src/components/NoteIcon.js b/packages/mindplot/src/components/NoteIcon.js index 9723dae5..12059d96 100644 --- a/packages/mindplot/src/components/NoteIcon.js +++ b/packages/mindplot/src/components/NoteIcon.js @@ -20,18 +20,17 @@ import $ from '@libraries/jquery-2.1.0'; import Icon from './Icon'; import FloatingTip from './widget/FloatingTip'; -const NoteIcon = new Class({ - Extends: Icon, - initialize(topic, noteModel, readOnly) { +class NoteIcon extends Icon { + constructor(topic, noteModel, readOnly) { $assert(topic, 'topic can not be null'); - this.parent(NoteIcon.IMAGE_URL); + super(NoteIcon.IMAGE_URL); this._linksModel = noteModel; this._topic = topic; this._readOnly = readOnly; this._registerEvents(); - }, + } _registerEvents() { this._image.setCursor('pointer'); @@ -55,7 +54,7 @@ const NoteIcon = new Class({ placement: 'bottom', destroyOnExit: true, }); - }, + } _buildTooltipContent() { if ($('body').find('#textPopoverNote').length === 1) { @@ -72,12 +71,12 @@ const NoteIcon = new Class({ result.append(text); return result; } - }, + } getModel() { return this._linksModel; - }, -}); + } +} NoteIcon.IMAGE_URL = 'images/notes.png'; diff --git a/packages/mindplot/src/components/Options.js b/packages/mindplot/src/components/Options.js index 1f41926d..923f49b9 100644 --- a/packages/mindplot/src/components/Options.js +++ b/packages/mindplot/src/components/Options.js @@ -1,4 +1,4 @@ -const Options = new Class({ +class Options { setOptions() { const options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments)); @@ -10,8 +10,8 @@ const Options = new Class({ } } return this; - }, + } -}); +} export default Options; diff --git a/packages/mindplot/src/components/PersistenceManager.js b/packages/mindplot/src/components/PersistenceManager.js index f61064bb..e4fddbdc 100644 --- a/packages/mindplot/src/components/PersistenceManager.js +++ b/packages/mindplot/src/components/PersistenceManager.js @@ -18,8 +18,7 @@ import { $assert, innerXML } from '@wisemapping/core-js'; import XMLSerializerFactory from './persistence/XMLSerializerFactory'; -const PersistenceManager = new Class({ - initialize() { }, +class PersistenceManager { save(mindmap, editorProperties, saveHistory, events, sync) { $assert(mindmap, 'mindmap can not be null'); @@ -39,30 +38,30 @@ const PersistenceManager = new Class({ console.log(e); events.onError(this._buildError()); } - }, + } load(mapId) { $assert(mapId, 'mapId can not be null'); const domDocument = this.loadMapDom(mapId); return PersistenceManager.loadFromDom(mapId, domDocument); - }, + } discardChanges(mapId) { throw new Error('Method must be implemented'); - }, + } loadMapDom(mapId) { throw new Error('Method must be implemented'); - }, + } saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) { throw new Error('Method must be implemented'); - }, + } unlockMap(mindmap) { throw new Error('Method must be implemented'); - }, -}); + } +} PersistenceManager.init = function (instance) { PersistenceManager._instance = instance; diff --git a/packages/mindplot/src/components/Relationship.js b/packages/mindplot/src/components/Relationship.js index abb0ddd3..ced9c7cf 100644 --- a/packages/mindplot/src/components/Relationship.js +++ b/packages/mindplot/src/components/Relationship.js @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import { $assert, $defined } from '@wisemapping/core-js'; import ConnectionLine from './ConnectionLine'; @@ -25,14 +25,12 @@ import INodeModel from './model/INodeModel'; import Shape from './util/Shape'; -const Relationship = new Class({ - Extends: ConnectionLine, - - initialize(sourceNode, targetNode, model) { +class Relationship extends ConnectionLine { + constructor(sourceNode, targetNode, model) { $assert(sourceNode, 'sourceNode can not be null'); $assert(targetNode, 'targetNode can not be null'); - this.parent(sourceNode, targetNode, model.getLineType()); + super(sourceNode, targetNode, model.getLineType()); this.setModel(model); const strokeColor = Relationship.getStrokeColor(); @@ -74,12 +72,12 @@ const Relationship = new Class({ const destPoint = model.getDestCtrlPoint().clone(); this.setDestControlPoint(destPoint); } - }, + } setStroke(color, style, opacity) { this.parent(color, style, opacity); this._startArrow.setStrokeColor(color); - }, + } redraw() { const line2d = this._line2d; @@ -134,7 +132,7 @@ const Relationship = new Class({ } this._focusShape.moveToBack(); this._controlPointsController.redraw(); - }, + } _positionArrows() { const tpos = this._line2d.getTo(); @@ -165,7 +163,7 @@ const Relationship = new Class({ this._endArrow.setVisibility(this.isVisible()); } this._startArrow.setVisibility(this.isVisible() && this._showStartArrow); - }, + } addToWorkspace(workspace) { workspace.append(this._focusShape); @@ -181,11 +179,11 @@ const Relationship = new Class({ this.parent(workspace); this._positionArrows(); this.redraw(); - }, + } _initializeControlPointController() { this.setOnFocus(true); - }, + } removeFromWorkspace(workspace) { workspace.removeChild(this._focusShape); @@ -196,11 +194,11 @@ const Relationship = new Class({ if (this._endArrow) workspace.removeChild(this._endArrow); this.parent(workspace); - }, + } getType() { return Relationship.type; - }, + } setOnFocus(focus) { // Change focus shape @@ -215,7 +213,7 @@ const Relationship = new Class({ this._onFocus = focus; this.fireEvent(focus ? 'ontfocus' : 'ontblur', this); } - }, + } _refreshShape() { const sPos = this._line2d.getFrom(); @@ -229,7 +227,7 @@ const Relationship = new Class({ shapeCtrlPoints[1].x = ctrlPoints[1].x; shapeCtrlPoints[1].y = ctrlPoints[1].y; this._focusShape.updateLine(); - }, + } addEvent(type, listener) { // Translate to web 2d events ... @@ -239,37 +237,37 @@ const Relationship = new Class({ const line = this._line2d; line.addEvent(type, listener); - }, + } isOnFocus() { return this._onFocus; - }, + } isInWorkspace() { return this._isInWorkspace; - }, + } setVisibility(value) { this.parent(value); if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow); this._startArrow.setVisibility(this._showStartArrow && value); - }, + } setOpacity(opacity) { this.parent(opacity); if (this._showEndArrow) this._endArrow.setOpacity(opacity); if (this._showStartArrow) this._startArrow.setOpacity(opacity); - }, + } setShowEndArrow(visible) { this._showEndArrow = visible; if (this._isInWorkspace) this.redraw(); - }, + } setShowStartArrow(visible) { this._showStartArrow = visible; if (this._isInWorkspace) this.redraw(); - }, + } setFrom(x, y) { $assert($defined(x), 'x must be defined'); @@ -277,7 +275,7 @@ const Relationship = new Class({ this._line2d.setFrom(x, y); this._startArrow.setFrom(x, y); - }, + } setTo(x, y) { $assert($defined(x), 'x must be defined'); @@ -285,47 +283,47 @@ const Relationship = new Class({ this._line2d.setTo(x, y); if (this._endArrow) this._endArrow.setFrom(x, y); - }, + } setSrcControlPoint(control) { this._line2d.setSrcControlPoint(control); this._startArrow.setControlPoint(control); - }, + } setDestControlPoint(control) { this._line2d.setDestControlPoint(control); if (this._showEndArrow) this._endArrow.setControlPoint(control); - }, + } getControlPoints() { return this._line2d.getControlPoints(); - }, + } isSrcControlPointCustom() { return this._line2d.isSrcControlPointCustom(); - }, + } isDestControlPointCustom() { return this._line2d.isDestControlPointCustom(); - }, + } setIsSrcControlPointCustom(isCustom) { this._line2d.setIsSrcControlPointCustom(isCustom); - }, + } setIsDestControlPointCustom(isCustom) { this._line2d.setIsDestControlPointCustom(isCustom); - }, + } getId() { return this._model.getId(); - }, + } fireEvent(type, event) { const elem = this._line2d; elem.trigger(type, event); - }, -}); + } +} Relationship.getStrokeColor = function getStrokeColor() { return '#9b74e6'; diff --git a/packages/mindplot/src/components/RelationshipPivot.js b/packages/mindplot/src/components/RelationshipPivot.js index c32f0bc4..261a286c 100644 --- a/packages/mindplot/src/components/RelationshipPivot.js +++ b/packages/mindplot/src/components/RelationshipPivot.js @@ -15,14 +15,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import { $assert } from '@wisemapping/core-js'; import Relationship from './Relationship'; import INodeModel from './model/INodeModel'; import Shape from './util/Shape'; -const RelationshipPivot = new Class({ - initialize(workspace, designer) { +class RelationshipPivot { + constructor(workspace, designer) { $assert(workspace, 'workspace can not be null'); $assert(designer, 'designer can not be null'); this._workspace = workspace; @@ -32,7 +32,7 @@ const RelationshipPivot = new Class({ this._mouseMoveEvent = this._mouseMove.bind(this); this._onClickEvent = this._cleanOnMouseClick.bind(this); this._onTopicClick = this._connectOnFocus.bind(this); - }, + } start(sourceTopic, targetPos) { $assert(sourceTopic, 'sourceTopic can not be null'); @@ -74,7 +74,7 @@ const RelationshipPivot = new Class({ topic.addEvent('ontfocus', this._onTopicClick); }); } - }, + } dispose() { const workspace = this._workspace; @@ -98,7 +98,7 @@ const RelationshipPivot = new Class({ this._pivot = null; this._startArrow = null; } - }, + } _mouseMove(event) { const screen = this._workspace.getScreenManager(); @@ -120,13 +120,13 @@ const RelationshipPivot = new Class({ event.stopPropagation(); return false; - }, + } _cleanOnMouseClick(event) { // The user clicks on a desktop on in other element that is not a node. this.dispose(); event.stopPropagation(); - }, + } _calculateFromPosition(toPosition) { // Calculate origin position ... @@ -140,7 +140,7 @@ const RelationshipPivot = new Class({ spoint.x = parseInt(controlPoint[0].x, 10) + parseInt(sourcePosition.x, 10); spoint.y = parseInt(controlPoint[0].y, 10) + parseInt(sourcePosition.y, 10); return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint); - }, + } _connectOnFocus(event, targetTopic) { const sourceTopic = this._sourceTopic; @@ -152,11 +152,11 @@ const RelationshipPivot = new Class({ this._designer._actionDispatcher.addRelationship(relModel); } this.dispose(); - }, + } _isActive() { return this._pivot != null; - }, -}); + } +} export default RelationshipPivot; diff --git a/packages/mindplot/src/components/RestPersistenceManager.js b/packages/mindplot/src/components/RestPersistenceManager.js index e2ffc9f9..af91b70b 100644 --- a/packages/mindplot/src/components/RestPersistenceManager.js +++ b/packages/mindplot/src/components/RestPersistenceManager.js @@ -18,9 +18,8 @@ import { $assert } from '@wisemapping/core-js'; import PersistenceManager from './PersistenceManager'; -const RESTPersistenceManager = new Class({ - Extends: PersistenceManager, - initialize(options) { +class RESTPersistenceManager extends PersistenceManager{ + constructor(options) { this.parent(); $assert(options.documentUrl, 'documentUrl can not be null'); $assert(options.revertUrl, 'revertUrl can not be null'); @@ -33,7 +32,7 @@ const RESTPersistenceManager = new Class({ this.lockUrl = options.lockUrl; this.timestamp = options.timestamp; this.session = options.session; - }, + } saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) { const data = { @@ -53,7 +52,7 @@ const RESTPersistenceManager = new Class({ persistence.clearTimeout = setTimeout(() => { persistence.clearTimeout = null; persistence.onSave = false; - }, 10000); + } 10000); $.ajax({ url: `${this.documentUrl.replace('{id}', mapId)}?${query}`, @@ -66,17 +65,17 @@ const RESTPersistenceManager = new Class({ success(data, textStatus, jqXHRresponseText) { persistence.timestamp = data; events.onSuccess(); - }, + } error(jqXHR, textStatus, errorThrown) { events.onError(persistence._buildError()); - }, + } complete() { // Clear event timeout ... if (persistence.clearTimeout) { clearTimeout(persistence.clearTimeout); } persistence.onSave = false; - }, + } fail(xhr, textStatus) { const { responseText } = xhr; let userMsg = { severity: 'SEVERE', message: $msg('SAVE_COULD_NOT_BE_COMPLETED') }; @@ -96,19 +95,19 @@ const RESTPersistenceManager = new Class({ } events.onError(userMsg); persistence.onSave = false; - }, + } }); } - }, + } discardChanges(mapId) { $.ajax({ url: this.revertUrl.replace('{id}', mapId), async: false, method: 'post', - headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json' }, + headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json' } }); - }, + } unlockMap(mindmap) { const mapId = mindmap.getId(); @@ -116,10 +115,10 @@ const RESTPersistenceManager = new Class({ url: this.lockUrl.replace('{id}', mapId), async: false, method: 'put', - headers: { 'Content-Type': 'text/plain' }, + headers: { 'Content-Type': 'text/plain' } data: 'false', }); - }, + } _buildError(jsonSeverResponse) { let message = jsonSeverResponse ? jsonSeverResponse.globalErrors[0] : null; @@ -133,7 +132,7 @@ const RESTPersistenceManager = new Class({ severity = 'INFO'; } return { severity, message }; - }, + } loadMapDom(mapId) { // Let's try to open one from the local directory ... @@ -142,10 +141,10 @@ const RESTPersistenceManager = new Class({ url: `${this.documentUrl.replace('{id}', mapId)}/xml`, method: 'get', async: false, - headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' }, + headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' } success(responseText) { xml = responseText; - }, + } }); // If I could not load it from a file, hard code one. @@ -154,7 +153,7 @@ const RESTPersistenceManager = new Class({ } return xml; - }, -}); + } +} export default RESTPersistenceManager; diff --git a/packages/mindplot/src/components/ScreenManager.js b/packages/mindplot/src/components/ScreenManager.js index 78414018..3d5dfcd1 100644 --- a/packages/mindplot/src/components/ScreenManager.js +++ b/packages/mindplot/src/components/ScreenManager.js @@ -16,7 +16,7 @@ * limitations under the License. */ import { $assert } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; class ScreenManager { constructor(divElement) { diff --git a/packages/mindplot/src/components/ShrinkConnector.js b/packages/mindplot/src/components/ShrinkConnector.js index b93f5ef4..3edf8301 100644 --- a/packages/mindplot/src/components/ShrinkConnector.js +++ b/packages/mindplot/src/components/ShrinkConnector.js @@ -15,13 +15,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import TopicConfig from './TopicConfig'; import ActionDispatcher from './ActionDispatcher'; -const ShirinkConnector = new Class({ - initialize(topic) { +class ShirinkConnector { + constructor(topic) { const ellipse = new web2d.Elipse(TopicConfig.INNER_RECT_ATTRIBUTES); this._ellipse = ellipse; ellipse.setFill('rgb(62,118,179)'); @@ -61,7 +61,7 @@ const ShirinkConnector = new Class({ this._fillColor = '#f7f7f7'; const model = topic.getModel(); this.changeRender(model.areChildrenShrunken()); - }, + } changeRender(isShrink) { const elipse = this._ellipse; @@ -70,40 +70,40 @@ const ShirinkConnector = new Class({ } else { elipse.setStroke('1', 'solid'); } - }, + } setVisibility(value) { this._ellipse.setVisibility(value); - }, + } setOpacity(opacity) { this._ellipse.setOpacity(opacity); - }, + } setFill(color) { this._fillColor = color; this._ellipse.setFill(color); - }, + } setAttribute(name, value) { this._ellipse.setAttribute(name, value); - }, + } addToWorkspace(group) { group.append(this._ellipse); - }, + } setPosition(x, y) { this._ellipse.setPosition(x, y); - }, + } moveToBack() { this._ellipse.moveToBack(); - }, + } moveToFront() { this._ellipse.moveToFront(); - }, -}); + } +} export default ShirinkConnector; diff --git a/packages/mindplot/src/components/TextEditor.js b/packages/mindplot/src/components/TextEditor.js index 6b792554..07f7a2fb 100644 --- a/packages/mindplot/src/components/TextEditor.js +++ b/packages/mindplot/src/components/TextEditor.js @@ -13,14 +13,14 @@ * limitations under the License. */ import { $defined } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import ActionDispatcher from './ActionDispatcher'; // FIXME: Not used! -const TextEditor = new Class({ - initialize(topic) { +class TextEditor { + constructor(topic) { this._topic = topic; - }, + } _buildEditor() { this._size = { width: 500, height: 100 }; @@ -61,7 +61,7 @@ const TextEditor = new Class({ spanElem.inject(spanContainer); return result; - }, + } _registerEvents(divElem) { const inputElem = this._getTextareaElem(); @@ -99,11 +99,11 @@ const TextEditor = new Class({ divElem.addEvent('mousedown', (event) => { event.stopPropagation(); }); - }, + } isVisible() { return $defined(this._containerElem) && this._containerElem.getStyle('display') === 'block'; - }, + } _updateModel() { if (this._topic.getText() !== this._getText()) { @@ -113,7 +113,7 @@ const TextEditor = new Class({ const actionDispatcher = ActionDispatcher.getInstance(); actionDispatcher.changeTextToTopic([topicId], text); } - }, + } show(text) { if (!this.isVisible()) { @@ -125,7 +125,7 @@ const TextEditor = new Class({ this._registerEvents(editorElem); this._showEditor(text); } - }, + } _showEditor(defaultText) { const topic = this._topic; @@ -163,7 +163,7 @@ const TextEditor = new Class({ }; displayFunc.delay(10); - }, + } _setStyle(fontStyle) { const inputField = this._getTextareaElem(); @@ -189,7 +189,7 @@ const TextEditor = new Class({ spanField.style.fontStyle = fontStyle.style; spanField.style.fontWeight = fontStyle.weight; spanField.style.fontSize = `${fontStyle.size}px`; - }, + } _setText(text) { const inputField = this._getTextareaElem(); @@ -200,19 +200,19 @@ const TextEditor = new Class({ const spanField = this._getSpanElem(); spanField.innerHTML = text; inputField.value = text; - }, + } _getText() { return this._getTextareaElem().value; - }, + } _getTextareaElem() { return this._containerElem.getElement('input'); - }, + } _getSpanElem() { return this._containerElem.getElement('span'); - }, + } _setEditorSize(width, height) { const textShape = this._topic.getTextShape(); @@ -220,7 +220,7 @@ const TextEditor = new Class({ this._size = { width: width * scale.width, height: height * scale.height }; this._containerElem.style.width = `${this._size.width * 2}px`; this._containerElem.style.height = `${this._size.height}px`; - }, + } _positionCursor(inputElem, selectText) { // Select text if it's required ... @@ -238,7 +238,7 @@ const TextEditor = new Class({ } else if (!selectText) { inputElem.setSelectionRange(0, inputElem.value.length); } - }, + } close(update) { if (this.isVisible()) { @@ -254,7 +254,7 @@ const TextEditor = new Class({ this._containerElem.dispose(); this._containerElem = null; } - }, -}); + } +} export default TextEditor; diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.js index 5c7b6074..9c55dbb3 100644 --- a/packages/mindplot/src/components/Topic.js +++ b/packages/mindplot/src/components/Topic.js @@ -17,7 +17,7 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; import { _ } from '@libraries/underscore-min'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import NodeGraph from './NodeGraph'; import TopicConfig from './TopicConfig'; @@ -34,1119 +34,1058 @@ import LinkEditor from './widget/LinkEditor'; import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher'; import INodeModel, { TopicShape } from './model/INodeModel'; -const Topic = new Class( - /** @lends Topic */ { - Extends: NodeGraph, - /** - * @extends mindplot.NodeGraph - * @constructs - * @param model - * @param options - */ - initialize(model, options) { - this.parent(model, options); - this._children = []; - this._parent = null; - this._relationships = []; - this._isInWorkspace = false; - this._buildTopicShape(); +class Topic extends NodeGraph { + /** + * @extends mindplot.NodeGraph + * @constructs + * @param model + * @param options + */ + constructor(model, options) { + super(model, options); + this._children = []; + this._parent = null; + this._relationships = []; + this._isInWorkspace = false; + this._buildTopicShape(); - // Position a topic .... - const pos = model.getPosition(); - if (pos != null && this.isCentralTopic()) { - this.setPosition(pos); - } + // Position a topic .... + const pos = model.getPosition(); + if (pos != null && this.isCentralTopic()) { + this.setPosition(pos); + } - // Register events for the topic ... - if (!this.isReadOnly()) { - this._registerEvents(); - } - }, + // Register events for the topic ... + if (!this.isReadOnly()) { + this._registerEvents(); + } + } - _registerEvents() { - this.setMouseEventsEnabled(true); + _registerEvents() { + this.setMouseEventsEnabled(true); - // Prevent click on the topics being propagated ... - this.addEvent('click', (event) => { - event.stopPropagation(); - }); - const me = this; - this.addEvent('dblclick', (event) => { - me._getTopicEventDispatcher().show(me); - event.stopPropagation(); - }); - }, + // Prevent click on the topics being propagated ... + this.addEvent('click', (event) => { + event.stopPropagation(); + }); + const me = this; + this.addEvent('dblclick', (event) => { + me._getTopicEventDispatcher().show(me); + event.stopPropagation(); + }); + } - /** - * @param {String} type the topic shape type - * @see {@link mindplot.model.INodeModel} - */ - setShapeType(type) { - this._setShapeType(type, true); - }, + /** + * @param {String} type the topic shape type + * @see {@link mindplot.model.INodeModel} + */ + setShapeType(type) { + this._setShapeType(type, true); + } - /** @return {mindplot.Topic} parent topic */ - getParent() { - return this._parent; - }, + /** @return {mindplot.Topic} parent topic */ + getParent() { + return this._parent; + } - _setShapeType(type, updateModel) { - // Remove inner shape figure ... - const model = this.getModel(); - if ($defined(updateModel) && updateModel) { - model.setShapeType(type); - } + _setShapeType(type, updateModel) { + // Remove inner shape figure ... + const model = this.getModel(); + if ($defined(updateModel) && updateModel) { + model.setShapeType(type); + } - const oldInnerShape = this.getInnerShape(); - if (oldInnerShape != null) { - this._removeInnerShape(); + const oldInnerShape = this.getInnerShape(); + if (oldInnerShape != null) { + this._removeInnerShape(); - // Create a new one ... - const innerShape = this.getInnerShape(); - - // Update figure size ... - const size = this.getSize(); - this.setSize(size, true); - - const group = this.get2DElement(); - group.append(innerShape); - - // Move text to the front ... - const text = this.getTextShape(); - text.moveToFront(); - - // Move iconGroup to front ... - const iconGroup = this.getIconGroup(); - if ($defined(iconGroup)) { - iconGroup.moveToFront(); - } - - // Move connector to front - const connector = this.getShrinkConnector(); - if ($defined(connector)) { - connector.moveToFront(); - } - } - }, - - /** @return {String} topic shape type */ - getShapeType() { - const model = this.getModel(); - let result = model.getShapeType(); - if (!$defined(result)) { - result = TopicStyle.defaultShapeType(this); - } - return result; - }, - - _removeInnerShape() { - const group = this.get2DElement(); + // Create a new one ... const innerShape = this.getInnerShape(); - group.removeChild(innerShape); - this._innerShape = null; - return innerShape; - }, - - /** @return {web2d.Line|web2d.Rect|web2d.Image} inner shape of the topic */ - getInnerShape() { - if (!$defined(this._innerShape)) { - // Create inner box. - this._innerShape = this._buildShape( - TopicConfig.INNER_RECT_ATTRIBUTES, - this.getShapeType(), - ); - - // Update bgcolor ... - const bgColor = this.getBackgroundColor(); - this._setBackgroundColor(bgColor, false); - - // Update border color ... - const brColor = this.getBorderColor(); - this._setBorderColor(brColor, false); - - // Define the pointer ... - if (!this.isCentralTopic() && !this.isReadOnly()) { - this._innerShape.setCursor('move'); - } else { - this._innerShape.setCursor('default'); - } - } - return this._innerShape; - }, - - _buildShape(attributes, shapeType) { - $assert(attributes, 'attributes can not be null'); - $assert(shapeType, 'shapeType can not be null'); - - let result; - if (shapeType === TopicShape.RECTANGLE) { - result = new web2d.Rect(0, attributes); - } else if (shapeType === TopicShape.IMAGE) { - const model = this.getModel(); - const url = model.getImageUrl(); - const size = model.getImageSize(); - - result = new web2d.Image(); - result.setHref(url); - result.setSize(size.width, size.height); - - result.getSize = function () { - return model.getImageSize(); - }; - - result.setPosition = function () { }; - } else if (shapeType === TopicShape.ELLIPSE) { - result = new web2d.Rect(0.9, attributes); - } else if (shapeType === TopicShape.ROUNDED_RECT) { - result = new web2d.Rect(0.3, attributes); - } else if (shapeType === TopicShape.LINE) { - result = new web2d.Line({ strokeColor: '#495879', strokeWidth: 1 }); - result.setSize = function (width, height) { - this.size = { width, height }; - result.setFrom(0, height); - result.setTo(width, height); - - // Lines will have the same color of the default connection lines... - const stokeColor = ConnectionLine.getStrokeColor(); - result.setStroke(1, 'solid', stokeColor); - }; - - result.getSize = function () { - return this.size; - }; - - result.setPosition = function () { }; - - result.setFill = function () { }; - - result.setStroke = function () { }; - } else { - $assert(false, `Unsupported figure shapeType:${shapeType}`); - } - result.setPosition(0, 0); - return result; - }, - - /** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */ - setCursor(type) { - const innerShape = this.getInnerShape(); - innerShape.setCursor(type); - - const outerShape = this.getOuterShape(); - outerShape.setCursor(type); - - const textShape = this.getTextShape(); - textShape.setCursor(type); - }, - - /** @return outer shape */ - getOuterShape() { - if (!$defined(this._outerShape)) { - const rect = this._buildShape( - TopicConfig.OUTER_SHAPE_ATTRIBUTES, - TopicShape.ROUNDED_RECT, - ); - rect.setPosition(-2, -3); - rect.setOpacity(0); - this._outerShape = rect; - } - - return this._outerShape; - }, - - /** @return text shape */ - getTextShape() { - if (!$defined(this._text)) { - this._text = this._buildTextShape(false); - - // Set Text ... - const text = this.getText(); - this._setText(text, false); - } - - return this._text; - }, - - /** @return icon group */ - getOrBuildIconGroup() { - if (!$defined(this._iconsGroup)) { - this._iconsGroup = this._buildIconGroup(); - const group = this.get2DElement(); - group.append(this._iconsGroup.getNativeElement()); - this._iconsGroup.moveToFront(); - } - return this._iconsGroup; - }, - - /** */ - getIconGroup() { - return this._iconsGroup; - }, - - _buildIconGroup() { - const textHeight = this.getTextShape().getFontHeight(); - const result = new IconGroup(this.getId(), textHeight); - const padding = TopicStyle.getInnerPadding(this); - result.setPosition(padding, padding); - - // Load topic features ... - const model = this.getModel(); - const featuresModel = model.getFeatures(); - for (let i = 0; i < featuresModel.length; i++) { - const featureModel = featuresModel[i]; - const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly()); - result.addIcon( - icon, - featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(), - ); - } - - return result; - }, - - /** - * assigns the new feature model to the topic's node model and adds the respective icon - * @param {mindplot.model.FeatureModel} featureModel - * @return {mindplot.Icon} the icon corresponding to the feature model - */ - addFeature(featureModel) { - const iconGroup = this.getOrBuildIconGroup(); - this.closeEditors(); - - // Update model ... - const model = this.getModel(); - model.addFeature(featureModel); - - const result = TopicFeature.createIcon(this, featureModel, this.isReadOnly()); - iconGroup.addIcon( - result, - featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(), - ); - - this._adjustShapes(); - return result; - }, - - /** */ - findFeatureById(id) { - const model = this.getModel(); - return model.findFeatureById(id); - }, - - /** */ - removeFeature(featureModel) { - $assert(featureModel, 'featureModel could not be null'); - - // Removing the icon from MODEL - const model = this.getModel(); - model.removeFeature(featureModel); - - // Removing the icon from UI - const iconGroup = this.getIconGroup(); - if ($defined(iconGroup)) { - iconGroup.removeIconByModel(featureModel); - } - this._adjustShapes(); - }, - - /** */ - addRelationship(relationship) { - this._relationships.push(relationship); - }, - - /** */ - deleteRelationship(relationship) { - this._relationships.erase(relationship); - }, - - /** */ - getRelationships() { - return this._relationships; - }, - - _buildTextShape(readOnly) { - const result = new web2d.Text(); - const family = this.getFontFamily(); - const size = this.getFontSize(); - const weight = this.getFontWeight(); - const style = this.getFontStyle(); - result.setFont(family, size, style, weight); - - const color = this.getFontColor(); - result.setColor(color); - - if (!readOnly) { - // Propagate mouse events ... - if (!this.isCentralTopic()) { - result.setCursor('move'); - } else { - result.setCursor('default'); - } - } - - return result; - }, - - /** */ - setFontFamily(value, updateModel) { - const textShape = this.getTextShape(); - textShape.setFontFamily(value); - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setFontFamily(value); - } - this._adjustShapes(updateModel); - }, - - /** */ - setFontSize(value, updateModel) { - const textShape = this.getTextShape(); - textShape.setSize(value); - - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setFontSize(value); - } - this._adjustShapes(updateModel); - }, - - /** */ - setFontStyle(value, updateModel) { - const textShape = this.getTextShape(); - textShape.setStyle(value); - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setFontStyle(value); - } - this._adjustShapes(updateModel); - }, - - /** */ - setFontWeight(value, updateModel) { - const textShape = this.getTextShape(); - textShape.setWeight(value); - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setFontWeight(value); - } - this._adjustShapes(); - }, - - /** */ - getFontWeight() { - const model = this.getModel(); - let result = model.getFontWeight(); - if (!$defined(result)) { - const font = TopicStyle.defaultFontStyle(this); - result = font.weight; - } - return result; - }, - - /** */ - getFontFamily() { - const model = this.getModel(); - let result = model.getFontFamily(); - if (!$defined(result)) { - const font = TopicStyle.defaultFontStyle(this); - result = font.font; - } - return result; - }, - - /** */ - getFontColor() { - const model = this.getModel(); - let result = model.getFontColor(); - if (!$defined(result)) { - const font = TopicStyle.defaultFontStyle(this); - result = font.color; - } - return result; - }, - - /** */ - getFontStyle() { - const model = this.getModel(); - let result = model.getFontStyle(); - if (!$defined(result)) { - const font = TopicStyle.defaultFontStyle(this); - result = font.style; - } - return result; - }, - - /** */ - getFontSize() { - const model = this.getModel(); - let result = model.getFontSize(); - if (!$defined(result)) { - const font = TopicStyle.defaultFontStyle(this); - result = font.size; - } - return result; - }, - - /** */ - setFontColor(value, updateModel) { - const textShape = this.getTextShape(); - textShape.setColor(value); - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setFontColor(value); - } - }, - - _setText(text, updateModel) { - const textShape = this.getTextShape(); - textShape.setText(text == null ? TopicStyle.defaultText(this) : text); - - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setText(text); - } - }, - - /** */ - setText(text) { - // Avoid empty nodes ... - if (!text || $.trim(text).length === 0) { - text = null; - } - - this._setText(text, true); - this._adjustShapes(); - }, - - /** */ - getText() { - const model = this.getModel(); - let result = model.getText(); - if (!$defined(result)) { - result = TopicStyle.defaultText(this); - } - return result; - }, - - /** */ - setBackgroundColor(color) { - this._setBackgroundColor(color, true); - }, - - _setBackgroundColor(color, updateModel) { - const innerShape = this.getInnerShape(); - innerShape.setFill(color); - - const connector = this.getShrinkConnector(); - if (connector) { - connector.setFill(color); - } - - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setBackgroundColor(color); - } - }, - - /** */ - getBackgroundColor() { - const model = this.getModel(); - let result = model.getBackgroundColor(); - if (!$defined(result)) { - result = TopicStyle.defaultBackgroundColor(this); - } - return result; - }, - - /** */ - setBorderColor(color) { - this._setBorderColor(color, true); - }, - - _setBorderColor(color, updateModel) { - const innerShape = this.getInnerShape(); - innerShape.setAttribute('strokeColor', color); - - const connector = this.getShrinkConnector(); - if (connector) { - connector.setAttribute('strokeColor', color); - } - - if ($defined(updateModel) && updateModel) { - const model = this.getModel(); - model.setBorderColor(color); - } - }, - - /** */ - getBorderColor() { - const model = this.getModel(); - let result = model.getBorderColor(); - if (!$defined(result)) { - result = TopicStyle.defaultBorderColor(this); - } - return result; - }, - - _buildTopicShape() { - const groupAttributes = { - width: 100, - height: 100, - coordSizeWidth: 100, - coordSizeHeight: 100, - }; - const group = new web2d.Group(groupAttributes); - this._set2DElement(group); - - // Shape must be build based on the model width ... - const outerShape = this.getOuterShape(); - const innerShape = this.getInnerShape(); - const textShape = this.getTextShape(); - - // Add to the group ... - group.append(outerShape); - group.append(innerShape); - group.append(textShape); // Update figure size ... - const model = this.getModel(); - if (model.getFeatures().length !== 0) { - this.getOrBuildIconGroup(); - } - - const shrinkConnector = this.getShrinkConnector(); - if ($defined(shrinkConnector)) { - shrinkConnector.addToWorkspace(group); - } - - // Register listeners ... - this._registerDefaultListenersToElement(group, this); - }, - - _registerDefaultListenersToElement(elem, topic) { - const mouseOver = function (event) { - if (topic.isMouseEventsEnabled()) { - topic.handleMouseOver(event); - } - }; - elem.addEvent('mouseover', mouseOver); - - const outout = function (event) { - if (topic.isMouseEventsEnabled()) { - topic.handleMouseOut(event); - } - }; - elem.addEvent('mouseout', outout); - - const me = this; - // Focus events ... - elem.addEvent('mousedown', (event) => { - if (!me.isReadOnly()) { - // Disable topic selection of readOnly mode ... - let value = true; - if ( - (event.metaKey && Browser.Platform.mac) - || (event.ctrlKey && !Browser.Platform.mac) - ) { - value = !me.isOnFocus(); - event.stopPropagation(); - event.preventDefault(); - } - topic.setOnFocus(value); - } - - const eventDispatcher = me._getTopicEventDispatcher(); - eventDispatcher.process(TopicEvent.CLICK, me); - event.stopPropagation(); - }); - }, - - /** */ - areChildrenShrunken() { - const model = this.getModel(); - return model.areChildrenShrunken() && !this.isCentralTopic(); - }, - - /** */ - isCollapsed() { - let result = false; - - let current = this.getParent(); - while (current && !result) { - result = current.areChildrenShrunken(); - current = current.getParent(); - } - return result; - }, - - /** */ - setChildrenShrunken(value) { - // Update Model ... - const model = this.getModel(); - model.setChildrenShrunken(value); - - // Change render base on the state. - const shrinkConnector = this.getShrinkConnector(); - if ($defined(shrinkConnector)) { - shrinkConnector.changeRender(value); - } - - // Do some fancy animation .... - const elements = this._flatten2DElements(this); - const fade = new FadeEffect(elements, !value); - const me = this; - fade.addEvent('complete', () => { - // Set focus on the parent node ... - if (value) { - me.setOnFocus(true); - } - - // Set focus in false for all the children ... - elements.forEach((elem) => { - if (elem.setOnFocus) { - elem.setOnFocus(false); - } - }); - }); - fade.start(); - - EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model); - }, - - /** */ - getShrinkConnector() { - let result = this._connector; - if (this._connector == null) { - this._connector = new ShirinkConnector(this); - this._connector.setVisibility(false); - result = this._connector; - } - return result; - }, - - /** */ - handleMouseOver() { - const outerShape = this.getOuterShape(); - outerShape.setOpacity(1); - }, - - /** */ - handleMouseOut() { - const outerShape = this.getOuterShape(); - if (!this.isOnFocus()) { - outerShape.setOpacity(0); - } - }, - - /** */ - showTextEditor(text) { - this._getTopicEventDispatcher().show(this, { text }); - }, - - /** */ - showNoteEditor() { - const topicId = this.getId(); - const model = this.getModel(); - const editorModel = { - getValue() { - const notes = model.findFeatureByType(TopicFeature.Note.id); - let result; - if (notes.length > 0) result = notes[0].getText(); - - return result; - }, - - setValue(value) { - const dispatcher = ActionDispatcher.getInstance(); - const notes = model.findFeatureByType(TopicFeature.Note.id); - if (!$defined(value)) { - const featureId = notes[0].getId(); - dispatcher.removeFeatureFromTopic(topicId, featureId); - } else if (notes.length > 0) { - dispatcher.changeFeatureToTopic(topicId, notes[0].getId(), { - text: value, - }); - } else { - dispatcher.addFeatureToTopic(topicId, TopicFeature.Note.id, { - text: value, - }); - } - }, - }; - const editor = new NoteEditor(editorModel); - this.closeEditors(); - editor.show(); - }, - - /** opens a dialog where the user can enter or edit an existing link associated with this topic */ - showLinkEditor() { - const topicId = this.getId(); - const model = this.getModel(); - const editorModel = { - getValue() { - // @param {mindplot.model.LinkModel[]} links - const links = model.findFeatureByType(TopicFeature.Link.id); - let result; - if (links.length > 0) result = links[0].getUrl(); - - return result; - }, - - setValue(value) { - const dispatcher = ActionDispatcher.getInstance(); - const links = model.findFeatureByType(TopicFeature.Link.id); - if (!$defined(value)) { - const featureId = links[0].getId(); - dispatcher.removeFeatureFromTopic(topicId, featureId); - } else if (links.length > 0) { - dispatcher.changeFeatureToTopic(topicId, links[0].getId(), { - url: value, - }); - } else { - dispatcher.addFeatureToTopic(topicId, TopicFeature.Link.id, { - url: value, - }); - } - }, - }; - - this.closeEditors(); - const editor = new LinkEditor(editorModel); - editor.show(); - }, - - /** */ - closeEditors() { - this._getTopicEventDispatcher().close(true); - }, - - _getTopicEventDispatcher() { - return TopicEventDispatcher.getInstance(); - }, - - /** - * Point: references the center of the rect shape.!!! - */ - setPosition(point) { - $assert(point, 'position can not be null'); - point.x = Math.ceil(point.x); - point.y = Math.ceil(point.y); - - // Update model's position ... - const model = this.getModel(); - model.setPosition(point.x, point.y); - - // Elements are positioned in the center. - // All topic element must be positioned based on the innerShape. const size = this.getSize(); + this.setSize(size, true); - const cx = point.x - size.width / 2; - const cy = point.y - size.height / 2; + const group = this.get2DElement(); + group.append(innerShape); - // Update visual position. - this._elem2d.setPosition(cx, cy); + // Move text to the front ... + const text = this.getTextShape(); + text.moveToFront(); - // Update connection lines ... - this._updateConnectionLines(); - - // Check object state. - this.invariant(); - }, - - /** */ - getOutgoingLine() { - return this._outgoingLine; - }, - - /** */ - getIncomingLines() { - const result = []; - const children = this.getChildren(); - for (let i = 0; i < children.length; i++) { - const node = children[i]; - const line = node.getOutgoingLine(); - if ($defined(line)) { - result.push(line); - } - } - return result; - }, - - /** */ - getOutgoingConnectedTopic() { - let result = null; - const line = this.getOutgoingLine(); - if ($defined(line)) { - result = line.getTargetTopic(); - } - return result; - }, - - _updateConnectionLines() { - // Update this to parent line ... - const outgoingLine = this.getOutgoingLine(); - if ($defined(outgoingLine)) { - outgoingLine.redraw(); + // Move iconGroup to front ... + const iconGroup = this.getIconGroup(); + if ($defined(iconGroup)) { + iconGroup.moveToFront(); } - // Update all the incoming lines ... - const incomingLines = this.getIncomingLines(); - for (let i = 0; i < incomingLines.length; i++) { - incomingLines[i].redraw(); - } - - // Update relationship lines - for (let j = 0; j < this._relationships.length; j++) { - this._relationships[j].redraw(); - } - }, - - /** */ - setBranchVisibility(value) { - let current = this; - let parent = this; - while (parent != null && !parent.isCentralTopic()) { - current = parent; - parent = current.getParent(); - } - current.setVisibility(value); - }, - - /** */ - setVisibility(value) { - this._setTopicVisibility(value); - - // Hide all children... - this._setChildrenVisibility(value); - - // If there there are connection to the node, topic must be hidden. - this._setRelationshipLinesVisibility(value); - - // If it's connected, the connection must be rendered. - const outgoingLine = this.getOutgoingLine(); - if (outgoingLine) { - outgoingLine.setVisibility(value); - } - }, - - /** */ - moveToBack() { - // Update relationship lines - for (let j = 0; j < this._relationships.length; j++) { - this._relationships[j].moveToBack(); - } - const connector = this.getShrinkConnector(); - if ($defined(connector)) { - connector.moveToBack(); - } - - this.get2DElement().moveToBack(); - }, - - /** */ - moveToFront() { - this.get2DElement().moveToFront(); + // Move connector to front const connector = this.getShrinkConnector(); if ($defined(connector)) { connector.moveToFront(); } - // Update relationship lines - for (let j = 0; j < this._relationships.length; j++) { - this._relationships[j].moveToFront(); + } + } + + /** @return {String} topic shape type */ + getShapeType() { + const model = this.getModel(); + let result = model.getShapeType(); + if (!$defined(result)) { + result = TopicStyle.defaultShapeType(this); + } + return result; + } + + _removeInnerShape() { + const group = this.get2DElement(); + const innerShape = this.getInnerShape(); + group.removeChild(innerShape); + this._innerShape = null; + return innerShape; + } + + /** @return {web2d.Line|web2d.Rect|web2d.Image} inner shape of the topic */ + getInnerShape() { + if (!$defined(this._innerShape)) { + // Create inner box. + this._innerShape = this._buildShape( + TopicConfig.INNER_RECT_ATTRIBUTES, + this.getShapeType(), + ); + + // Update bgcolor ... + const bgColor = this.getBackgroundColor(); + this._setBackgroundColor(bgColor, false); + + // Update border color ... + const brColor = this.getBorderColor(); + this._setBorderColor(brColor, false); + + // Define the pointer ... + if (!this.isCentralTopic() && !this.isReadOnly()) { + this._innerShape.setCursor('move'); + } else { + this._innerShape.setCursor('default'); } - }, + } + return this._innerShape; + } - /** */ - isVisible() { - const elem = this.get2DElement(); - return elem.isVisible(); - }, + _buildShape(attributes, shapeType) { + $assert(attributes, 'attributes can not be null'); + $assert(shapeType, 'shapeType can not be null'); - _setRelationshipLinesVisibility(value) { - _.each(this._relationships, (relationship) => { - const sourceTopic = relationship.getSourceTopic(); - const targetTopic = relationship.getTargetTopic(); + let result; + if (shapeType === TopicShape.RECTANGLE) { + result = new web2d.Rect(0, attributes); + } else if (shapeType === TopicShape.IMAGE) { + const model = this.getModel(); + const url = model.getImageUrl(); + const size = model.getImageSize(); - const targetParent = targetTopic.getModel().getParent(); - const sourceParent = sourceTopic.getModel().getParent(); - relationship.setVisibility( - value - && (targetParent == null || !targetParent.areChildrenShrunken()) - && (sourceParent == null || !sourceParent.areChildrenShrunken()), - ); - }); - }, + result = new web2d.Image(); + result.setHref(url); + result.setSize(size.width, size.height); - _setTopicVisibility(value) { - const elem = this.get2DElement(); - elem.setVisibility(value); + result.getSize = function () { + return model.getImageSize(); + }; - if (this.getIncomingLines().length > 0) { - const connector = this.getShrinkConnector(); - if ($defined(connector)) { - connector.setVisibility(value); + result.setPosition = function () { }; + } else if (shapeType === TopicShape.ELLIPSE) { + result = new web2d.Rect(0.9, attributes); + } else if (shapeType === TopicShape.ROUNDED_RECT) { + result = new web2d.Rect(0.3, attributes); + } else if (shapeType === TopicShape.LINE) { + result = new web2d.Line({ strokeColor: '#495879', strokeWidth: 1 }); + result.setSize = function (width, height) { + this.size = { width, height }; + result.setFrom(0, height); + result.setTo(width, height); + + // Lines will have the same color of the default connection lines... + const stokeColor = ConnectionLine.getStrokeColor(); + result.setStroke(1, 'solid', stokeColor); + }; + + result.getSize = function () { + return this.size; + }; + + result.setPosition = function () { }; + + result.setFill = function () { }; + + result.setStroke = function () { }; + } else { + $assert(false, `Unsupported figure shapeType:${shapeType}`); + } + result.setPosition(0, 0); + return result; + } + + /** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */ + setCursor(type) { + const innerShape = this.getInnerShape(); + innerShape.setCursor(type); + + const outerShape = this.getOuterShape(); + outerShape.setCursor(type); + + const textShape = this.getTextShape(); + textShape.setCursor(type); + } + + /** @return outer shape */ + getOuterShape() { + if (!$defined(this._outerShape)) { + const rect = this._buildShape( + TopicConfig.OUTER_SHAPE_ATTRIBUTES, + TopicShape.ROUNDED_RECT, + ); + rect.setPosition(-2, -3); + rect.setOpacity(0); + this._outerShape = rect; + } + + return this._outerShape; + } + + /** @return text shape */ + getTextShape() { + if (!$defined(this._text)) { + this._text = this._buildTextShape(false); + + // Set Text ... + const text = this.getText(); + this._setText(text, false); + } + + return this._text; + } + + /** @return icon group */ + getOrBuildIconGroup() { + if (!$defined(this._iconsGroup)) { + this._iconsGroup = this._buildIconGroup(); + const group = this.get2DElement(); + group.append(this._iconsGroup.getNativeElement()); + this._iconsGroup.moveToFront(); + } + return this._iconsGroup; + } + + /** */ + getIconGroup() { + return this._iconsGroup; + } + + _buildIconGroup() { + const textHeight = this.getTextShape().getFontHeight(); + const result = new IconGroup(this.getId(), textHeight); + const padding = TopicStyle.getInnerPadding(this); + result.setPosition(padding, padding); + + // Load topic features ... + const model = this.getModel(); + const featuresModel = model.getFeatures(); + for (let i = 0; i < featuresModel.length; i++) { + const featureModel = featuresModel[i]; + const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly()); + result.addIcon( + icon, + featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(), + ); + } + + return result; + } + + /** + * assigns the new feature model to the topic's node model and adds the respective icon + * @param {mindplot.model.FeatureModel} featureModel + * @return {mindplot.Icon} the icon corresponding to the feature model + */ + addFeature(featureModel) { + const iconGroup = this.getOrBuildIconGroup(); + this.closeEditors(); + + // Update model ... + const model = this.getModel(); + model.addFeature(featureModel); + + const result = TopicFeature.createIcon(this, featureModel, this.isReadOnly()); + iconGroup.addIcon( + result, + featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(), + ); + + this._adjustShapes(); + return result; + } + + /** */ + findFeatureById(id) { + const model = this.getModel(); + return model.findFeatureById(id); + } + + /** */ + removeFeature(featureModel) { + $assert(featureModel, 'featureModel could not be null'); + + // Removing the icon from MODEL + const model = this.getModel(); + model.removeFeature(featureModel); + + // Removing the icon from UI + const iconGroup = this.getIconGroup(); + if ($defined(iconGroup)) { + iconGroup.removeIconByModel(featureModel); + } + this._adjustShapes(); + } + + /** */ + addRelationship(relationship) { + this._relationships.push(relationship); + } + + /** */ + deleteRelationship(relationship) { + this._relationships.erase(relationship); + } + + /** */ + getRelationships() { + return this._relationships; + } + + _buildTextShape(readOnly) { + const result = new web2d.Text(); + const family = this.getFontFamily(); + const size = this.getFontSize(); + const weight = this.getFontWeight(); + const style = this.getFontStyle(); + result.setFont(family, size, style, weight); + + const color = this.getFontColor(); + result.setColor(color); + + if (!readOnly) { + // Propagate mouse events ... + if (!this.isCentralTopic()) { + result.setCursor('move'); + } else { + result.setCursor('default'); + } + } + + return result; + } + + /** */ + setFontFamily(value, updateModel) { + const textShape = this.getTextShape(); + textShape.setFontFamily(value); + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setFontFamily(value); + } + this._adjustShapes(updateModel); + } + + /** */ + setFontSize(value, updateModel) { + const textShape = this.getTextShape(); + textShape.setSize(value); + + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setFontSize(value); + } + this._adjustShapes(updateModel); + } + + /** */ + setFontStyle(value, updateModel) { + const textShape = this.getTextShape(); + textShape.setStyle(value); + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setFontStyle(value); + } + this._adjustShapes(updateModel); + } + + /** */ + setFontWeight(value, updateModel) { + const textShape = this.getTextShape(); + textShape.setWeight(value); + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setFontWeight(value); + } + this._adjustShapes(); + } + + /** */ + getFontWeight() { + const model = this.getModel(); + let result = model.getFontWeight(); + if (!$defined(result)) { + const font = TopicStyle.defaultFontStyle(this); + result = font.weight; + } + return result; + } + + /** */ + getFontFamily() { + const model = this.getModel(); + let result = model.getFontFamily(); + if (!$defined(result)) { + const font = TopicStyle.defaultFontStyle(this); + result = font.font; + } + return result; + } + + /** */ + getFontColor() { + const model = this.getModel(); + let result = model.getFontColor(); + if (!$defined(result)) { + const font = TopicStyle.defaultFontStyle(this); + result = font.color; + } + return result; + } + + /** */ + getFontStyle() { + const model = this.getModel(); + let result = model.getFontStyle(); + if (!$defined(result)) { + const font = TopicStyle.defaultFontStyle(this); + result = font.style; + } + return result; + } + + /** */ + getFontSize() { + const model = this.getModel(); + let result = model.getFontSize(); + if (!$defined(result)) { + const font = TopicStyle.defaultFontStyle(this); + result = font.size; + } + return result; + } + + /** */ + setFontColor(value, updateModel) { + const textShape = this.getTextShape(); + textShape.setColor(value); + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setFontColor(value); + } + } + + _setText(text, updateModel) { + const textShape = this.getTextShape(); + textShape.setText(text == null ? TopicStyle.defaultText(this) : text); + + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setText(text); + } + } + + /** */ + setText(text) { + // Avoid empty nodes ... + if (!text || $.trim(text).length === 0) { + text = null; + } + + this._setText(text, true); + this._adjustShapes(); + } + + /** */ + getText() { + const model = this.getModel(); + let result = model.getText(); + if (!$defined(result)) { + result = TopicStyle.defaultText(this); + } + return result; + } + + /** */ + setBackgroundColor(color) { + this._setBackgroundColor(color, true); + } + + _setBackgroundColor(color, updateModel) { + const innerShape = this.getInnerShape(); + innerShape.setFill(color); + + const connector = this.getShrinkConnector(); + if (connector) { + connector.setFill(color); + } + + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setBackgroundColor(color); + } + } + + /** */ + getBackgroundColor() { + const model = this.getModel(); + let result = model.getBackgroundColor(); + if (!$defined(result)) { + result = TopicStyle.defaultBackgroundColor(this); + } + return result; + } + + /** */ + setBorderColor(color) { + this._setBorderColor(color, true); + } + + _setBorderColor(color, updateModel) { + const innerShape = this.getInnerShape(); + innerShape.setAttribute('strokeColor', color); + + const connector = this.getShrinkConnector(); + if (connector) { + connector.setAttribute('strokeColor', color); + } + + if ($defined(updateModel) && updateModel) { + const model = this.getModel(); + model.setBorderColor(color); + } + } + + /** */ + getBorderColor() { + const model = this.getModel(); + let result = model.getBorderColor(); + if (!$defined(result)) { + result = TopicStyle.defaultBorderColor(this); + } + return result; + } + + _buildTopicShape() { + const groupAttributes = { + width: 100, + height: 100, + coordSizeWidth: 100, + coordSizeHeight: 100, + }; + const group = new web2d.Group(groupAttributes); + this._set2DElement(group); + + // Shape must be build based on the model width ... + const outerShape = this.getOuterShape(); + const innerShape = this.getInnerShape(); + const textShape = this.getTextShape(); + + // Add to the group ... + group.append(outerShape); + group.append(innerShape); + group.append(textShape); + + // Update figure size ... + const model = this.getModel(); + if (model.getFeatures().length !== 0) { + this.getOrBuildIconGroup(); + } + + const shrinkConnector = this.getShrinkConnector(); + if ($defined(shrinkConnector)) { + shrinkConnector.addToWorkspace(group); + } + + // Register listeners ... + this._registerDefaultListenersToElement(group, this); + } + + _registerDefaultListenersToElement(elem, topic) { + const mouseOver = function (event) { + if (topic.isMouseEventsEnabled()) { + topic.handleMouseOver(event); + } + }; + elem.addEvent('mouseover', mouseOver); + + const outout = function (event) { + if (topic.isMouseEventsEnabled()) { + topic.handleMouseOut(event); + } + }; + elem.addEvent('mouseout', outout); + + const me = this; + // Focus events ... + elem.addEvent('mousedown', (event) => { + if (!me.isReadOnly()) { + // Disable topic selection of readOnly mode ... + let value = true; + if ( + (event.metaKey && Browser.Platform.mac) + || (event.ctrlKey && !Browser.Platform.mac) + ) { + value = !me.isOnFocus(); + event.stopPropagation(); + event.preventDefault(); } + topic.setOnFocus(value); } - const textShape = this.getTextShape(); - textShape.setVisibility(this.getShapeType() != TopicShape.IMAGE ? value : false); - }, + const eventDispatcher = me._getTopicEventDispatcher(); + eventDispatcher.process(TopicEvent.CLICK, me); + event.stopPropagation(); + }); + } - /** */ - setOpacity(opacity) { - const elem = this.get2DElement(); - elem.setOpacity(opacity); + /** */ + areChildrenShrunken() { + const model = this.getModel(); + return model.areChildrenShrunken() && !this.isCentralTopic(); + } - const connector = this.getShrinkConnector(); - if ($defined(connector)) { - connector.setOpacity(opacity); + /** */ + isCollapsed() { + let result = false; + + let current = this.getParent(); + while (current && !result) { + result = current.areChildrenShrunken(); + current = current.getParent(); + } + return result; + } + + /** */ + setChildrenShrunken(value) { + // Update Model ... + const model = this.getModel(); + model.setChildrenShrunken(value); + + // Change render base on the state. + const shrinkConnector = this.getShrinkConnector(); + if ($defined(shrinkConnector)) { + shrinkConnector.changeRender(value); + } + + // Do some fancy animation .... + const elements = this._flatten2DElements(this); + const fade = new FadeEffect(elements, !value); + const me = this; + fade.addEvent('complete', () => { + // Set focus on the parent node ... + if (value) { + me.setOnFocus(true); } - const textShape = this.getTextShape(); - textShape.setOpacity(opacity); - }, - _setChildrenVisibility(isVisible) { - // Hide all children. - const children = this.getChildren(); - const model = this.getModel(); + // Set focus in false for all the children ... + elements.forEach((elem) => { + if (elem.setOnFocus) { + elem.setOnFocus(false); + } + }); + }); + fade.start(); - isVisible = isVisible ? !model.areChildrenShrunken() : isVisible; - for (let i = 0; i < children.length; i++) { - const child = children[i]; - child.setVisibility(isVisible); + EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model); + } - const outgoingLine = child.getOutgoingLine(); - outgoingLine.setVisibility(isVisible); - } - }, + /** */ + getShrinkConnector() { + let result = this._connector; + if (this._connector == null) { + this._connector = new ShirinkConnector(this); + this._connector.setVisibility(false); + result = this._connector; + } + return result; + } - /** */ - invariant() { - const line = this._outgoingLine; - const model = this.getModel(); - const isConnected = model.isConnected(); + /** */ + handleMouseOver() { + const outerShape = this.getOuterShape(); + outerShape.setOpacity(1); + } - // Check consistency... - if ((isConnected && !line) || (!isConnected && line)) { - // $assert(false,'Illegal state exception.'); - } - }, + /** */ + handleMouseOut() { + const outerShape = this.getOuterShape(); + if (!this.isOnFocus()) { + outerShape.setOpacity(0); + } + } - /** */ - setSize(size, force) { - $assert(size, 'size can not be null'); - $assert($defined(size.width), 'size seem not to be a valid element'); - size = { width: Math.ceil(size.width), height: Math.ceil(size.height) }; + /** */ + showTextEditor(text) { + this._getTopicEventDispatcher().show(this, { text }); + } - const oldSize = this.getSize(); - const hasSizeChanged = oldSize.width != size.width || oldSize.height != size.height; - if (hasSizeChanged || force) { - NodeGraph.prototype.setSize.call(this, size); + /** */ + showNoteEditor() { + const topicId = this.getId(); + const model = this.getModel(); + const editorModel = { + getValue() { + const notes = model.findFeatureByType(TopicFeature.Note.id); + let result; + if (notes.length > 0) result = notes[0].getText(); - const outerShape = this.getOuterShape(); - const innerShape = this.getInnerShape(); + return result; + }, - outerShape.setSize(size.width + 4, size.height + 6); - innerShape.setSize(size.width, size.height); - - // Update the figure position(ej: central topic must be centered) and children position. - this._updatePositionOnChangeSize(oldSize, size); - - if (hasSizeChanged) { - EventBus.instance.fireEvent(EventBus.events.NodeResizeEvent, { - node: this.getModel(), - size, + setValue(value) { + const dispatcher = ActionDispatcher.getInstance(); + const notes = model.findFeatureByType(TopicFeature.Note.id); + if (!$defined(value)) { + const featureId = notes[0].getId(); + dispatcher.removeFeatureFromTopic(topicId, featureId); + } else if (notes.length > 0) { + dispatcher.changeFeatureToTopic(topicId, notes[0].getId(), { + text: value, + }); + } else { + dispatcher.addFeatureToTopic(topicId, TopicFeature.Note.id, { + text: value, }); } } - }, + }; + const editor = new NoteEditor(editorModel); + this.closeEditors(); + editor.show(); + } - _updatePositionOnChangeSize() { - $assert(false, 'this method must be overwrited.'); - }, + /** opens a dialog where the user can enter or edit an existing link associated with this topic */ + showLinkEditor() { + const topicId = this.getId(); + const model = this.getModel(); + const editorModel = { + getValue() { + // @param {mindplot.model.LinkModel[]} links + const links = model.findFeatureByType(TopicFeature.Link.id); + let result; + if (links.length > 0) result = links[0].getUrl(); - /** */ - disconnect(workspace) { - const outgoingLine = this.getOutgoingLine(); - if ($defined(outgoingLine)) { - $assert(workspace, 'workspace can not be null'); + return result; + }, - this._outgoingLine = null; - - // Disconnect nodes ... - const targetTopic = outgoingLine.getTargetTopic(); - targetTopic.removeChild(this); - - // Update model ... - const childModel = this.getModel(); - childModel.disconnect(); - - this._parent = null; - - // Remove graphical element from the workspace... - outgoingLine.removeFromWorkspace(workspace); - - // Remove from workspace. - EventBus.instance.fireEvent(EventBus.events.NodeDisconnectEvent, this.getModel()); - - // Change text based on the current connection ... - const model = this.getModel(); - if (!model.getText()) { - const text = this.getText(); - this._setText(text, false); - } - if (!model.getFontSize()) { - const size = this.getFontSize(); - this.setFontSize(size, false); - } - - // Hide connection line?. - if (targetTopic.getChildren().length == 0) { - const connector = targetTopic.getShrinkConnector(); - if ($defined(connector)) { - connector.setVisibility(false); - } + setValue(value) { + const dispatcher = ActionDispatcher.getInstance(); + const links = model.findFeatureByType(TopicFeature.Link.id); + if (!$defined(value)) { + const featureId = links[0].getId(); + dispatcher.removeFeatureFromTopic(topicId, featureId); + } else if (links.length > 0) { + dispatcher.changeFeatureToTopic(topicId, links[0].getId(), { + url: value, + }); + } else { + dispatcher.addFeatureToTopic(topicId, TopicFeature.Link.id, { + url: value, + }); } } - }, + }; - /** */ - getOrder() { - const model = this.getModel(); - return model.getOrder(); - }, + this.closeEditors(); + const editor = new LinkEditor(editorModel); + editor.show(); + } - /** */ - setOrder(value) { - const model = this.getModel(); - model.setOrder(value); - }, + /** */ + closeEditors() { + this._getTopicEventDispatcher().close(true); + } - /** */ - connectTo(targetTopic, workspace) { - $assert(!this._outgoingLine, 'Could not connect an already connected node'); - $assert(targetTopic != this, 'Circular connection are not allowed'); - $assert(targetTopic, 'Parent Graph can not be null'); - $assert(workspace, 'Workspace can not be null'); + _getTopicEventDispatcher() { + return TopicEventDispatcher.getInstance(); + } - // Connect Graphical Nodes ... - targetTopic.append(this); - this._parent = targetTopic; + /** + * Point: references the center of the rect shape.!!! + */ + setPosition(point) { + $assert(point, 'position can not be null'); + point.x = Math.ceil(point.x); + point.y = Math.ceil(point.y); + + // Update model's position ... + const model = this.getModel(); + model.setPosition(point.x, point.y); + + // Elements are positioned in the center. + // All topic element must be positioned based on the innerShape. + const size = this.getSize(); + + const cx = point.x - size.width / 2; + const cy = point.y - size.height / 2; + + // Update visual position. + this._elem2d.setPosition(cx, cy); + + // Update connection lines ... + this._updateConnectionLines(); + + // Check object state. + this.invariant(); + } + + /** */ + getOutgoingLine() { + return this._outgoingLine; + } + + /** */ + getIncomingLines() { + const result = []; + const children = this.getChildren(); + for (let i = 0; i < children.length; i++) { + const node = children[i]; + const line = node.getOutgoingLine(); + if ($defined(line)) { + result.push(line); + } + } + return result; + } + + /** */ + getOutgoingConnectedTopic() { + let result = null; + const line = this.getOutgoingLine(); + if ($defined(line)) { + result = line.getTargetTopic(); + } + return result; + } + + _updateConnectionLines() { + // Update this to parent line ... + const outgoingLine = this.getOutgoingLine(); + if ($defined(outgoingLine)) { + outgoingLine.redraw(); + } + + // Update all the incoming lines ... + const incomingLines = this.getIncomingLines(); + for (let i = 0; i < incomingLines.length; i++) { + incomingLines[i].redraw(); + } + + // Update relationship lines + for (let j = 0; j < this._relationships.length; j++) { + this._relationships[j].redraw(); + } + } + + /** */ + setBranchVisibility(value) { + let current = this; + let parent = this; + while (parent != null && !parent.isCentralTopic()) { + current = parent; + parent = current.getParent(); + } + current.setVisibility(value); + } + + /** */ + setVisibility(value) { + this._setTopicVisibility(value); + + // Hide all children... + this._setChildrenVisibility(value); + + // If there there are connection to the node, topic must be hidden. + this._setRelationshipLinesVisibility(value); + + // If it's connected, the connection must be rendered. + const outgoingLine = this.getOutgoingLine(); + if (outgoingLine) { + outgoingLine.setVisibility(value); + } + } + + /** */ + moveToBack() { + // Update relationship lines + for (let j = 0; j < this._relationships.length; j++) { + this._relationships[j].moveToBack(); + } + const connector = this.getShrinkConnector(); + if ($defined(connector)) { + connector.moveToBack(); + } + + this.get2DElement().moveToBack(); + } + + /** */ + moveToFront() { + this.get2DElement().moveToFront(); + const connector = this.getShrinkConnector(); + if ($defined(connector)) { + connector.moveToFront(); + } + // Update relationship lines + for (let j = 0; j < this._relationships.length; j++) { + this._relationships[j].moveToFront(); + } + } + + /** */ + isVisible() { + const elem = this.get2DElement(); + return elem.isVisible(); + } + + _setRelationshipLinesVisibility(value) { + _.each(this._relationships, (relationship) => { + const sourceTopic = relationship.getSourceTopic(); + const targetTopic = relationship.getTargetTopic(); + + const targetParent = targetTopic.getModel().getParent(); + const sourceParent = sourceTopic.getModel().getParent(); + relationship.setVisibility( + value + && (targetParent == null || !targetParent.areChildrenShrunken()) + && (sourceParent == null || !sourceParent.areChildrenShrunken()), + ); + }); + } + + _setTopicVisibility(value) { + const elem = this.get2DElement(); + elem.setVisibility(value); + + if (this.getIncomingLines().length > 0) { + const connector = this.getShrinkConnector(); + if ($defined(connector)) { + connector.setVisibility(value); + } + } + + const textShape = this.getTextShape(); + textShape.setVisibility(this.getShapeType() != TopicShape.IMAGE ? value : false); + } + + /** */ + setOpacity(opacity) { + const elem = this.get2DElement(); + elem.setOpacity(opacity); + + const connector = this.getShrinkConnector(); + if ($defined(connector)) { + connector.setOpacity(opacity); + } + const textShape = this.getTextShape(); + textShape.setOpacity(opacity); + } + + _setChildrenVisibility(isVisible) { + // Hide all children. + const children = this.getChildren(); + const model = this.getModel(); + + isVisible = isVisible ? !model.areChildrenShrunken() : isVisible; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + child.setVisibility(isVisible); + + const outgoingLine = child.getOutgoingLine(); + outgoingLine.setVisibility(isVisible); + } + } + + /** */ + invariant() { + const line = this._outgoingLine; + const model = this.getModel(); + const isConnected = model.isConnected(); + + // Check consistency... + if ((isConnected && !line) || (!isConnected && line)) { + // $assert(false,'Illegal state exception.'); + } + } + + /** */ + setSize(size, force) { + $assert(size, 'size can not be null'); + $assert($defined(size.width), 'size seem not to be a valid element'); + size = { width: Math.ceil(size.width), height: Math.ceil(size.height) }; + + const oldSize = this.getSize(); + const hasSizeChanged = oldSize.width != size.width || oldSize.height != size.height; + if (hasSizeChanged || force) { + NodeGraph.prototype.setSize.call(this, size); + + const outerShape = this.getOuterShape(); + const innerShape = this.getInnerShape(); + + outerShape.setSize(size.width + 4, size.height + 6); + innerShape.setSize(size.width, size.height); + + // Update the figure position(ej: central topic must be centered) and children position. + this._updatePositionOnChangeSize(oldSize, size); + + if (hasSizeChanged) { + EventBus.instance.fireEvent(EventBus.events.NodeResizeEvent, { + node: this.getModel(), + size, + }); + } + } + } + + _updatePositionOnChangeSize() { + $assert(false, 'this method must be overwrited.'); + } + + /** */ + disconnect(workspace) { + const outgoingLine = this.getOutgoingLine(); + if ($defined(outgoingLine)) { + $assert(workspace, 'workspace can not be null'); + + this._outgoingLine = null; + + // Disconnect nodes ... + const targetTopic = outgoingLine.getTargetTopic(); + targetTopic.removeChild(this); // Update model ... - const targetModel = targetTopic.getModel(); const childModel = this.getModel(); - childModel.connectTo(targetModel); + childModel.disconnect(); - // Create a connection line ... - const outgoingLine = new ConnectionLine(this, targetTopic); - outgoingLine.setVisibility(false); + this._parent = null; - this._outgoingLine = outgoingLine; - workspace.append(outgoingLine); + // Remove graphical element from the workspace... + outgoingLine.removeFromWorkspace(workspace); - // Update figure is necessary. - this.updateTopicShape(targetTopic); + // Remove from workspace. + EventBus.instance.fireEvent(EventBus.events.NodeDisconnectEvent, this.getModel()); // Change text based on the current connection ... const model = this.getModel(); @@ -1158,184 +1097,242 @@ const Topic = new Class( const size = this.getFontSize(); this.setFontSize(size, false); } - this.getTextShape(); - // Display connection node... - const connector = targetTopic.getShrinkConnector(); - if ($defined(connector)) { - connector.setVisibility(true); + // Hide connection line?. + if (targetTopic.getChildren().length == 0) { + const connector = targetTopic.getShrinkConnector(); + if ($defined(connector)) { + connector.setVisibility(false); + } + } + } + } + + /** */ + getOrder() { + const model = this.getModel(); + return model.getOrder(); + } + + /** */ + setOrder(value) { + const model = this.getModel(); + model.setOrder(value); + } + + /** */ + connectTo(targetTopic, workspace) { + $assert(!this._outgoingLine, 'Could not connect an already connected node'); + $assert(targetTopic != this, 'Circular connection are not allowed'); + $assert(targetTopic, 'Parent Graph can not be null'); + $assert(workspace, 'Workspace can not be null'); + + // Connect Graphical Nodes ... + targetTopic.append(this); + this._parent = targetTopic; + + // Update model ... + const targetModel = targetTopic.getModel(); + const childModel = this.getModel(); + childModel.connectTo(targetModel); + + // Create a connection line ... + const outgoingLine = new ConnectionLine(this, targetTopic); + outgoingLine.setVisibility(false); + + this._outgoingLine = outgoingLine; + workspace.append(outgoingLine); + + // Update figure is necessary. + this.updateTopicShape(targetTopic); + + // Change text based on the current connection ... + const model = this.getModel(); + if (!model.getText()) { + const text = this.getText(); + this._setText(text, false); + } + if (!model.getFontSize()) { + const size = this.getFontSize(); + this.setFontSize(size, false); + } + this.getTextShape(); + + // Display connection node... + const connector = targetTopic.getShrinkConnector(); + if ($defined(connector)) { + connector.setVisibility(true); + } + + // Redraw line ... + outgoingLine.redraw(); + + // Fire connection event ... + if (this.isInWorkspace()) { + EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, { + parentNode: targetTopic.getModel(), + childNode: this.getModel(), + }); + } + } + + /** */ + append(child) { + const children = this.getChildren(); + children.push(child); + } + + /** */ + removeChild(child) { + const children = this.getChildren(); + children.erase(child); + } + + /** */ + getChildren() { + let result = this._children; + if (!$defined(result)) { + this._children = []; + result = this._children; + } + return result; + } + + /** */ + removeFromWorkspace(workspace) { + const elem2d = this.get2DElement(); + workspace.removeChild(elem2d); + const line = this.getOutgoingLine(); + if ($defined(line)) { + workspace.removeChild(line); + } + this._isInWorkspace = false; + EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel()); + } + + /** */ + addToWorkspace(workspace) { + const elem = this.get2DElement(); + workspace.append(elem); + if (!this.isInWorkspace()) { + if (!this.isCentralTopic()) { + EventBus.instance.fireEvent(EventBus.events.NodeAdded, this.getModel()); } - // Redraw line ... - outgoingLine.redraw(); - - // Fire connection event ... - if (this.isInWorkspace()) { + if (this.getModel().isConnected()) { EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, { - parentNode: targetTopic.getModel(), + parentNode: this.getOutgoingConnectedTopic().getModel(), childNode: this.getModel(), }); } - }, + } + this._isInWorkspace = true; + this._adjustShapes(); + } - /** */ - append(child) { + /** */ + isInWorkspace() { + return this._isInWorkspace; + } + + /** */ + createDragNode(layoutManager) { + const result = this.parent(layoutManager); + + // Is the node already connected ? + const targetTopic = this.getOutgoingConnectedTopic(); + if ($defined(targetTopic)) { + result.connectTo(targetTopic); + result.setVisibility(false); + } + + // If a drag node is create for it, let's hide the editor. + this._getTopicEventDispatcher().close(); + + return result; + } + + _adjustShapes() { + if (this._isInWorkspace) { + const textShape = this.getTextShape(); + if (this.getShapeType() != TopicShape.IMAGE) { + const textWidth = textShape.getWidth(); + + let textHeight = textShape.getHeight(); + textHeight = textHeight != 0 ? textHeight : 20; + + const topicPadding = TopicStyle.getInnerPadding(this); + + // Adjust the icon size to the size of the text ... + const iconGroup = this.getOrBuildIconGroup(); + const fontHeight = this.getTextShape().getFontHeight(); + iconGroup.setPosition(topicPadding, topicPadding); + iconGroup.seIconSize(fontHeight, fontHeight); + + // Add a extra padding between the text and the icons + let iconsWidth = iconGroup.getSize().width; + if (iconsWidth != 0) { + iconsWidth += textHeight / 4; + } + + const height = textHeight + topicPadding * 2; + const width = textWidth + iconsWidth + topicPadding * 2; + + this.setSize({ width, height }); + + // Position node ... + textShape.setPosition(topicPadding + iconsWidth, topicPadding); + } else { + // In case of images, the size if fixed ... + const size = this.getModel().getImageSize(); + this.setSize(size); + } + } + } + + _flatten2DElements(topic) { + let result = []; + + const children = topic.getChildren(); + for (let i = 0; i < children.length; i++) { + const child = children[i]; + result.push(child); + result.push(child.getOutgoingLine()); + + const relationships = child.getRelationships(); + result = result.concat(relationships); + + if (!child.areChildrenShrunken()) { + const innerChilds = this._flatten2DElements(child); + result = result.concat(innerChilds); + } + } + return result; + } + + /** + * @param childTopic + * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself + */ + isChildTopic(childTopic) { + let result = this.getId() == childTopic.getId(); + if (!result) { const children = this.getChildren(); - children.push(child); - }, - - /** */ - removeChild(child) { - const children = this.getChildren(); - children.erase(child); - }, - - /** */ - getChildren() { - let result = this._children; - if (!$defined(result)) { - this._children = []; - result = this._children; - } - return result; - }, - - /** */ - removeFromWorkspace(workspace) { - const elem2d = this.get2DElement(); - workspace.removeChild(elem2d); - const line = this.getOutgoingLine(); - if ($defined(line)) { - workspace.removeChild(line); - } - this._isInWorkspace = false; - EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel()); - }, - - /** */ - addToWorkspace(workspace) { - const elem = this.get2DElement(); - workspace.append(elem); - if (!this.isInWorkspace()) { - if (!this.isCentralTopic()) { - EventBus.instance.fireEvent(EventBus.events.NodeAdded, this.getModel()); - } - - if (this.getModel().isConnected()) { - EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, { - parentNode: this.getOutgoingConnectedTopic().getModel(), - childNode: this.getModel(), - }); - } - } - this._isInWorkspace = true; - this._adjustShapes(); - }, - - /** */ - isInWorkspace() { - return this._isInWorkspace; - }, - - /** */ - createDragNode(layoutManager) { - const result = this.parent(layoutManager); - - // Is the node already connected ? - const targetTopic = this.getOutgoingConnectedTopic(); - if ($defined(targetTopic)) { - result.connectTo(targetTopic); - result.setVisibility(false); - } - - // If a drag node is create for it, let's hide the editor. - this._getTopicEventDispatcher().close(); - - return result; - }, - - _adjustShapes() { - if (this._isInWorkspace) { - const textShape = this.getTextShape(); - if (this.getShapeType() != TopicShape.IMAGE) { - const textWidth = textShape.getWidth(); - - let textHeight = textShape.getHeight(); - textHeight = textHeight != 0 ? textHeight : 20; - - const topicPadding = TopicStyle.getInnerPadding(this); - - // Adjust the icon size to the size of the text ... - const iconGroup = this.getOrBuildIconGroup(); - const fontHeight = this.getTextShape().getFontHeight(); - iconGroup.setPosition(topicPadding, topicPadding); - iconGroup.seIconSize(fontHeight, fontHeight); - - // Add a extra padding between the text and the icons - let iconsWidth = iconGroup.getSize().width; - if (iconsWidth != 0) { - iconsWidth += textHeight / 4; - } - - const height = textHeight + topicPadding * 2; - const width = textWidth + iconsWidth + topicPadding * 2; - - this.setSize({ width, height }); - - // Position node ... - textShape.setPosition(topicPadding + iconsWidth, topicPadding); - } else { - // In case of images, the size if fixed ... - const size = this.getModel().getImageSize(); - this.setSize(size); - } - } - }, - - _flatten2DElements(topic) { - let result = []; - - const children = topic.getChildren(); for (let i = 0; i < children.length; i++) { - const child = children[i]; - result.push(child); - result.push(child.getOutgoingLine()); - - const relationships = child.getRelationships(); - result = result.concat(relationships); - - if (!child.areChildrenShrunken()) { - const innerChilds = this._flatten2DElements(child); - result = result.concat(innerChilds); + const parent = children[i]; + result = parent.isChildTopic(childTopic); + if (result) { + break; } } - return result; - }, + } + return result; + } - /** - * @param childTopic - * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself - */ - isChildTopic(childTopic) { - let result = this.getId() == childTopic.getId(); - if (!result) { - const children = this.getChildren(); - for (let i = 0; i < children.length; i++) { - const parent = children[i]; - result = parent.isChildTopic(childTopic); - if (result) { - break; - } - } - } - return result; - }, - - /** @return {Boolean} true if the topic is the central topic of the map */ - isCentralTopic() { - return this.getModel().getType() == INodeModel.CENTRAL_TOPIC_TYPE; - }, - }, -); + /** @return {Boolean} true if the topic is the central topic of the map */ + isCentralTopic() { + return this.getModel().getType() == INodeModel.CENTRAL_TOPIC_TYPE; + } +} export default Topic; diff --git a/packages/mindplot/src/components/TopicEventDispatcher.js b/packages/mindplot/src/components/TopicEventDispatcher.js index 1e0a1e72..05aea983 100644 --- a/packages/mindplot/src/components/TopicEventDispatcher.js +++ b/packages/mindplot/src/components/TopicEventDispatcher.js @@ -25,25 +25,25 @@ const TopicEvent = { CLICK: 'clicknode', }; -const TopicEventDispatcher = new Class({ - Extends: Events, - - initialize(readOnly) { +class TopicEventDispatcher extends Events { + constructor(readOnly) + { + super(); this._readOnly = readOnly; this._activeEditor = null; this._multilineEditor = new MultilineTextEditor(); - }, + } close(update) { if (this.isVisible()) { this._activeEditor.close(update); this._activeEditor = null; } - }, + } show(topic, options) { this.process(TopicEvent.EDIT, topic, options); - }, + } process(eventType, topic, options) { $assert(eventType, 'eventType can not be null'); @@ -57,20 +57,20 @@ const TopicEventDispatcher = new Class({ const model = topic.getModel(); if ( model.getShapeType() !== TopicShape.IMAGE - && !this._readOnly - && eventType === TopicEvent.EDIT + && !this._readOnly + && eventType === TopicEvent.EDIT ) { this._multilineEditor.show(topic, options ? options.text : null); this._activeEditor = this._multilineEditor; } else { this.fireEvent(eventType, { model, readOnly: this._readOnly }); } - }, + } isVisible() { return this._activeEditor != null && this._activeEditor.isVisible(); - }, -}); + } +} TopicEventDispatcher._instance = null; diff --git a/packages/mindplot/src/components/TopicStyle.js b/packages/mindplot/src/components/TopicStyle.js index 6a87b41b..05049773 100644 --- a/packages/mindplot/src/components/TopicStyle.js +++ b/packages/mindplot/src/components/TopicStyle.js @@ -18,53 +18,53 @@ import { $assert, $defined } from '@wisemapping/core-js'; import { TopicShape } from './model/INodeModel'; -const TopicStyle = new Class({}); +class TopicStyle { + static _getStyles(topic) { + $assert(topic, 'topic can not be null'); -TopicStyle._getStyles = function _getStyles(topic) { - $assert(topic, 'topic can not be null'); - - let result; - if (topic.isCentralTopic()) { - result = TopicStyle.STYLES.CENTRAL_TOPIC; - } else { - const targetTopic = topic.getOutgoingConnectedTopic(); - if ($defined(targetTopic)) { - if (targetTopic.isCentralTopic()) { - result = TopicStyle.STYLES.MAIN_TOPIC; - } else { - result = TopicStyle.STYLES.SUB_TOPIC; - } + let result; + if (topic.isCentralTopic()) { + result = TopicStyle.STYLES.CENTRAL_TOPIC; } else { - result = TopicStyle.STYLES.ISOLATED_TOPIC; + const targetTopic = topic.getOutgoingConnectedTopic(); + if ($defined(targetTopic)) { + if (targetTopic.isCentralTopic()) { + result = TopicStyle.STYLES.MAIN_TOPIC; + } else { + result = TopicStyle.STYLES.SUB_TOPIC; + } + } else { + result = TopicStyle.STYLES.ISOLATED_TOPIC; + } } + return result; } - return result; -}; -TopicStyle.defaultText = function defaultText(topic) { - const { msgKey } = this._getStyles(topic); - return $msg(msgKey); -}; + static defaultText(topic) { + const { msgKey } = this._getStyles(topic); + return $msg(msgKey); + } -TopicStyle.defaultFontStyle = function defaultFontStyle(topic) { - return this._getStyles(topic).fontStyle; -}; + static defaultFontStyle(topic) { + return this._getStyles(topic).fontStyle; + } -TopicStyle.defaultBackgroundColor = function defaultBackgroundColor(topic) { - return this._getStyles(topic).backgroundColor; -}; + static defaultBackgroundColor(topic) { + return this._getStyles(topic).backgroundColor; + } -TopicStyle.defaultBorderColor = function defaultBorderColor(topic) { - return this._getStyles(topic).borderColor; -}; + static defaultBorderColor(topic) { + return this._getStyles(topic).borderColor; + } -TopicStyle.getInnerPadding = function getInnerPadding(topic) { - return this._getStyles(topic).innerPadding; -}; + static getInnerPadding(topic) { + return this._getStyles(topic).innerPadding; + } -TopicStyle.defaultShapeType = function defaultShapeType(topic) { - return this._getStyles(topic).shapeType; -}; + static defaultShapeType(topic) { + return this._getStyles(topic).shapeType; + } +} TopicStyle.STYLES = { CENTRAL_TOPIC: { diff --git a/packages/mindplot/src/components/Workspace.js b/packages/mindplot/src/components/Workspace.js index f73ea34d..bbc93303 100644 --- a/packages/mindplot/src/components/Workspace.js +++ b/packages/mindplot/src/components/Workspace.js @@ -16,7 +16,7 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; class Workspace { constructor(screenManager, zoom) { diff --git a/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js b/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js index b013ffe9..9bdb2997 100644 --- a/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js +++ b/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js @@ -17,10 +17,8 @@ */ import Command from '../Command'; -const AddFeatureToTopicCommand = new Class( - /** @lends AddFeatureToTopicCommand */ { - Extends: Command, - /* +class AddFeatureToTopicCommand extends Command { + /* * @classdesc This command class handles do/undo of adding features to topics, e.g. an * icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature} * @constructs @@ -30,41 +28,40 @@ const AddFeatureToTopicCommand = new Class( * @extends mindplot.Command * @see mindplot.model.FeatureModel and subclasses */ - initialize(topicId, featureType, attributes) { - $assert($defined(topicId), 'topicId can not be null'); - $assert(featureType, 'featureType can not be null'); - $assert(attributes, 'attributes can not be null'); + constructor(topicId, featureType, attributes) { + $assert($defined(topicId), 'topicId can not be null'); + $assert(featureType, 'featureType can not be null'); + $assert(attributes, 'attributes can not be null'); - this.parent(); - this._topicId = topicId; - this._featureType = featureType; - this._attributes = attributes; - this._featureModel = null; - }, + super(); + this._topicId = topicId; + this._featureType = featureType; + this._attributes = attributes; + this._featureModel = null; + } - /** + /** * Overrides abstract parent method */ - execute(commandContext) { - const topic = commandContext.findTopics(this._topicId)[0]; + execute(commandContext) { + const topic = commandContext.findTopics(this._topicId)[0]; - // Feature must be created only one time. - if (!this._featureModel) { - const model = topic.getModel(); - this._featureModel = model.createFeature(this._featureType, this._attributes); - } - topic.addFeature(this._featureModel); - }, + // Feature must be created only one time. + if (!this._featureModel) { + const model = topic.getModel(); + this._featureModel = model.createFeature(this._featureType, this._attributes); + } + topic.addFeature(this._featureModel); + } - /** + /** * Overrides abstract parent method * @see {@link mindplot.Command.undoExecute} */ - undoExecute(commandContext) { - const topic = commandContext.findTopics(this._topicId)[0]; - topic.removeFeature(this._featureModel); - }, - }, -); + undoExecute(commandContext) { + const topic = commandContext.findTopics(this._topicId)[0]; + topic.removeFeature(this._featureModel); + } +} export default AddFeatureToTopicCommand; diff --git a/packages/mindplot/src/components/commands/AddRelationshipCommand.js b/packages/mindplot/src/components/commands/AddRelationshipCommand.js index cbad2d3e..d02a6819 100644 --- a/packages/mindplot/src/components/commands/AddRelationshipCommand.js +++ b/packages/mindplot/src/components/commands/AddRelationshipCommand.js @@ -17,20 +17,19 @@ */ import Command from '../Command'; -const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{ - Extends: Command, +class AddRelationshipCommand extends Command { /** * @classdesc This command class handles do/undo of adding a relationship to a topic. * @constructs * @param {XMLDOM} model * @extends mindplot.Command */ - initialize(model) { + constructor(model) { $assert(model, 'Relationship model can not be null'); - this.parent(); + super(); this._model = model; - }, + } /** * Overrides abstract parent method @@ -38,7 +37,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{ execute(commandContext) { const relationship = commandContext.addRelationship(this._model); relationship.setOnFocus(true); - }, + } /** * Overrides abstract parent method @@ -47,7 +46,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{ undoExecute(commandContext) { const rel = commandContext.findRelationships(this._model.getId()); commandContext.deleteRelationship(rel[0]); - }, -}); + } +} export default AddRelationshipCommand; diff --git a/packages/mindplot/src/components/commands/AddTopicCommand.js b/packages/mindplot/src/components/commands/AddTopicCommand.js index 471d60aa..45d090cd 100644 --- a/packages/mindplot/src/components/commands/AddTopicCommand.js +++ b/packages/mindplot/src/components/commands/AddTopicCommand.js @@ -17,81 +17,75 @@ */ import Command from '../Command'; -const AddTopicCommand = new Class( - /** @lends AddTopicCommand */ { - Extends: Command, - /** - * @classdesc This command class handles do/undo of adding one or multiple topics to - * the mindmap. - * @constructs - * @param {Array} models one or multiple models - * @param {Array} parentTopicsId ids of the parent topics to add the children to, or null - * when attaching a dragged node or a node/branch from clipboard - * @extends mindplot.Command - */ - initialize(models, parentTopicsId) { - $assert(models, 'models can not be null'); - $assert( - parentTopicsId == null || parentTopicsId.length == models.length, - 'parents and models must have the same size', - ); +class AddTopicCommand extends Command { + /** + * @classdesc This command class handles do/undo of adding one or multiple topics to + * the mindmap. + * @constructs + * @param {Array} models one or multiple models + * @param {Array} parentTopicsId ids of the parent topics to add the children to, or null + * when attaching a dragged node or a node/branch from clipboard + * @extends mindplot.Command + */ + constructor(models, parentTopicsId) { + $assert(models, 'models can not be null'); + $assert(parentTopicsId == null || parentTopicsId.length == models.length, 'parents and models must have the same size'); - this.parent(); - this._models = models; - this._parentsIds = parentTopicsId; - }, + super(); + this._models = models; + this._parentsIds = parentTopicsId; + } - /** - * Overrides abstract parent method - */ - execute(commandContext) { - const me = this; - _.each(this._models, (model, index) => { - // Add a new topic ... - const topic = commandContext.createTopic(model); + /** + * Overrides abstract parent method + */ + execute(commandContext) { + const me = this; + _.each(this._models, (model, index) => { + // Add a new topic ... + const topic = commandContext.createTopic(model); - // Connect to topic ... - if (me._parentsIds) { - const parentId = me._parentsIds[index]; - if ($defined(parentId)) { - const parentTopic = commandContext.findTopics(parentId)[0]; - commandContext.connect(topic, parentTopic); - } - } else { - commandContext.addTopic(topic); + // Connect to topic ... + if (me._parentsIds) { + const parentId = me._parentsIds[index]; + if ($defined(parentId)) { + const parentTopic = commandContext.findTopics(parentId)[0]; + commandContext.connect(topic, parentTopic); } + } else { + commandContext.addTopic(topic); + } - // Select just created node ... - const designer = commandContext._designer; - designer.onObjectFocusEvent(topic); - topic.setOnFocus(true); + // Select just created node ... + const designer = commandContext._designer; + designer.onObjectFocusEvent(topic); + topic.setOnFocus(true); - // Render node ... - topic.setVisibility(true); - }); - }, + // Render node ... + topic.setVisibility(true); + }); + } - /** - * Overrides abstract parent method - * @see {@link mindplot.Command.undoExecute} - */ - undoExecute(commandContext) { - // Delete disconnected the nodes. Create a copy of the topics ... - const clonedModel = []; - _.each(this._models, (model) => { - clonedModel.push(model.clone()); - }); + /** + * Overrides abstract parent method + * @see {@link mindplot.Command.undoExecute} + */ + undoExecute(commandContext) { + // Delete disconnected the nodes. Create a copy of the topics ... + const clonedModel = []; + _.each(this._models, (model) => { + clonedModel.push(model.clone()); + }); - // Finally, remove the nodes ... - _.each(this._models, (model) => { - const topicId = model.getId(); - const topic = commandContext.findTopics(topicId)[0]; - commandContext.deleteTopic(topic); - }); + // Finally, remove the nodes ... + _.each(this._models, (model) => { + const topicId = model.getId(); + const topic = commandContext.findTopics(topicId)[0]; + commandContext.deleteTopic(topic); + }); - this._models = clonedModel; - }, - }, -); + this._models = clonedModel; + } +} export default AddTopicCommand; diff --git a/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js b/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js index 3babdd1a..d8cfa8cd 100644 --- a/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js +++ b/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js @@ -17,8 +17,7 @@ */ import Command from '../Command'; -const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCommand */{ - Extends: Command, +class ChangeFeatureToTopicCommand extends Command { /** * @extends mindplot.Command * @constructs @@ -29,16 +28,16 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom * @throws will throw an error if featureId is null or undefined * @throws will throw an error if attributes is null or undefined */ - initialize(topicId, featureId, attributes) { + constructor(topicId, featureId, attributes) { $assert($defined(topicId), 'topicId can not be null'); $assert($defined(featureId), 'featureId can not be null'); $assert($defined(attributes), 'attributes can not be null'); - this.parent(); + super(); this._topicId = topicId; this._featureId = featureId; this._attributes = attributes; - }, + } /** * Overrides abstract parent method @@ -50,7 +49,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom const oldAttributes = feature.getAttributes(); feature.setAttributes(this._attributes); this._attributes = oldAttributes; - }, + } /** * Overrides abstract parent method @@ -58,7 +57,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom */ undoExecute(commandContext) { this.execute(commandContext); - }, -}); + } +} export default ChangeFeatureToTopicCommand; diff --git a/packages/mindplot/src/components/commands/DeleteCommand.js b/packages/mindplot/src/components/commands/DeleteCommand.js index 39ab3c10..b84d069f 100644 --- a/packages/mindplot/src/components/commands/DeleteCommand.js +++ b/packages/mindplot/src/components/commands/DeleteCommand.js @@ -17,8 +17,7 @@ */ import Command from '../Command'; -const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{ - Extends: Command, +class DeleteCommand extends Command { /** * @classdesc This command class handles do/undo of deleting a topic. * @constructs @@ -26,16 +25,16 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{ * @param {Array} relIds ids of the relationships connected to the topics * @extends mindplot.Command */ - initialize(topicIds, relIds) { + constructor(topicIds, relIds) { $assert($defined(relIds), 'topicIds can not be null'); - this.parent(); + super(); this._relIds = relIds; this._topicIds = topicIds; this._deletedTopicModels = []; this._deletedRelModel = []; this._parentTopicIds = []; - }, + } /** * Overrides abstract parent method @@ -81,7 +80,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{ commandContext.deleteRelationship(rel); }, this); } - }, + } /** * Overrides abstract parent method @@ -125,7 +124,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{ this._deletedTopicModels = []; this._parentTopicIds = []; this._deletedRelModel = []; - }, + } _filterChildren(topicIds, commandContext) { const topics = commandContext.findTopics(topicIds); @@ -148,7 +147,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{ }); return result; - }, + } _collectInDepthRelationships(topic) { let result = []; @@ -172,8 +171,8 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{ result = ret; } return result; - }, + } -}); +} export default DeleteCommand; diff --git a/packages/mindplot/src/components/commands/DragTopicCommand.js b/packages/mindplot/src/components/commands/DragTopicCommand.js index 1536109b..6cc39a4e 100644 --- a/packages/mindplot/src/components/commands/DragTopicCommand.js +++ b/packages/mindplot/src/components/commands/DragTopicCommand.js @@ -17,8 +17,7 @@ */ import Command from '../Command'; -const DragTopicCommand = new Class(/** @lends DragTopicCommand */{ - Extends: Command, +class DragTopicCommand extends Command { /** * @classdesc This command class handles do/undo of dragging a topic to a new position. * @constructs @@ -28,7 +27,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{ * @param {mindplot.Topic} parentTopic the topic to be made the dragged topic's new parent * @extends mindplot.Command */ - initialize(topicId, position, order, parentTopic) { + constructor(topicId, position, order, parentTopic) { $assert(topicId, 'topicId must be defined'); this._topicsId = topicId; @@ -37,7 +36,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{ this.parent(); this._position = position; this._order = order; - }, + } /** * Overrides abstract parent method @@ -85,7 +84,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{ // Store for undo ... this._order = origOrder; this._position = origPosition; - }, + } /** * Overrides abstract parent method @@ -93,7 +92,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{ */ undoExecute(commandContext) { this.execute(commandContext); - }, -}); + } +} export default DragTopicCommand; diff --git a/packages/mindplot/src/components/commands/GenericFunctionCommand.js b/packages/mindplot/src/components/commands/GenericFunctionCommand.js index ac81ddcc..bffe605d 100644 --- a/packages/mindplot/src/components/commands/GenericFunctionCommand.js +++ b/packages/mindplot/src/components/commands/GenericFunctionCommand.js @@ -19,8 +19,7 @@ import { $defined, $assert } from '@wisemapping/core-js'; import _ from '@libraries/underscore-min'; import Command from '../Command'; -const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{ - Extends: Command, +class GenericFunctionCommand extends Command { /** * @classdesc This command handles do/undo of different actions, e.g. moving topics to * a different position, changing text or font,... (for full reference check the @@ -32,16 +31,16 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{ * e.g. color, font family or text * @extends mindplot.Command */ - initialize(commandFunc, topicsIds, value) { + constructor(commandFunc, topicsIds, value) { $assert(commandFunc, 'commandFunc must be defined'); $assert($defined(topicsIds), 'topicsIds must be defined'); - this.parent(); + super(); this._value = value; this._topicsId = topicsIds; this._commandFunc = commandFunc; this._oldValues = []; - }, + } /** * Overrides abstract parent method @@ -72,7 +71,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{ } else { throw 'Command can not be applied two times in a row.'; } - }, + } /** * Overrides abstract parent method @@ -91,7 +90,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{ } else { throw new Error('undo can not be applied.'); } - }, -}); + } +} export default GenericFunctionCommand; diff --git a/packages/mindplot/src/components/commands/MoveControlPointCommand.js b/packages/mindplot/src/components/commands/MoveControlPointCommand.js index c6fc7232..1bd086c2 100644 --- a/packages/mindplot/src/components/commands/MoveControlPointCommand.js +++ b/packages/mindplot/src/components/commands/MoveControlPointCommand.js @@ -17,10 +17,8 @@ */ import Command from '../Command'; -const MoveControlPointCommand = new Class( - /** @lends MoveControlPointCommand */ { - Extends: Command, - /** +class MoveControlPointCommand extends Command { + /** * @classdesc This command handles do/undo of changing the control points of a relationship * arrow. These are the two points that appear when the relationship is on focus. They * influence how the arrow is drawn (not the source or the destination topic nor the arrow @@ -31,94 +29,93 @@ const MoveControlPointCommand = new Class( * @param ctrlPointController {ControlPoint} * @param point {Number} 0 for the destination control point, 1 for the source control point */ - initialize(ctrlPointController, point) { - $assert(ctrlPointController, 'line can not be null'); - $assert($defined(point), 'point can not be null'); + constructor(ctrlPointController, point) { + $assert(ctrlPointController, 'line can not be null'); + $assert($defined(point), 'point can not be null'); - this.parent(); - this._ctrlPointControler = ctrlPointController; - this._line = ctrlPointController._line; - this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone(); - this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone(); - this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone(); - switch (point) { - case 0: - this._wasCustom = this._line.getLine().isSrcControlPointCustom(); - this._endPoint = this._line.getLine().getFrom().clone(); - break; - case 1: - this._wasCustom = this._line.getLine().isDestControlPointCustom(); - this._endPoint = this._line.getLine().getTo().clone(); - break; - default: - break; - } - this._point = point; - }, + super(); + this._ctrlPointControler = ctrlPointController; + this._line = ctrlPointController._line; + this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone(); + this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone(); + this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone(); + switch (point) { + case 0: + this._wasCustom = this._line.getLine().isSrcControlPointCustom(); + this._endPoint = this._line.getLine().getFrom().clone(); + break; + case 1: + this._wasCustom = this._line.getLine().isDestControlPointCustom(); + this._endPoint = this._line.getLine().getTo().clone(); + break; + default: + break; + } + this._point = point; + } - /** + /** * Overrides abstract parent method */ - execute() { - const model = this._line.getModel(); - switch (this._point) { - case 0: - model.setSrcCtrlPoint(this._controlPoint.clone()); - this._line.setFrom(this._endPoint.x, this._endPoint.y); - this._line.setIsSrcControlPointCustom(true); - this._line.setSrcControlPoint(this._controlPoint.clone()); - break; - case 1: - model.setDestCtrlPoint(this._controlPoint.clone()); - this._wasCustom = this._line.getLine().isDestControlPointCustom(); - this._line.setTo(this._endPoint.x, this._endPoint.y); - this._line.setIsDestControlPointCustom(true); - this._line.setDestControlPoint(this._controlPoint.clone()); - break; - default: - break; - } - if (this._line.isOnFocus()) { - this._line._refreshShape(); - this._ctrlPointControler.setLine(this._line); - } - this._line.getLine().updateLine(this._point); - }, + execute() { + const model = this._line.getModel(); + switch (this._point) { + case 0: + model.setSrcCtrlPoint(this._controlPoint.clone()); + this._line.setFrom(this._endPoint.x, this._endPoint.y); + this._line.setIsSrcControlPointCustom(true); + this._line.setSrcControlPoint(this._controlPoint.clone()); + break; + case 1: + model.setDestCtrlPoint(this._controlPoint.clone()); + this._wasCustom = this._line.getLine().isDestControlPointCustom(); + this._line.setTo(this._endPoint.x, this._endPoint.y); + this._line.setIsDestControlPointCustom(true); + this._line.setDestControlPoint(this._controlPoint.clone()); + break; + default: + break; + } + if (this._line.isOnFocus()) { + this._line._refreshShape(); + this._ctrlPointControler.setLine(this._line); + } + this._line.getLine().updateLine(this._point); + } - /** + /** * Overrides abstract parent method * @see {@link mindplot.Command.undoExecute} */ - undoExecute() { - const line = this._line; - const model = line.getModel(); - switch (this._point) { - case 0: - if ($defined(this._oldControlPoint)) { - line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y); - model.setSrcCtrlPoint(this._oldControlPoint.clone()); - line.setSrcControlPoint(this._oldControlPoint.clone()); - line.setIsSrcControlPointCustom(this._wasCustom); - } - break; - case 1: - if ($defined(this._oldControlPoint)) { - line.setTo(this._originalEndPoint.x, this._originalEndPoint.y); - model.setDestCtrlPoint(this._oldControlPoint.clone()); - line.setDestControlPoint(this._oldControlPoint.clone()); - line.setIsDestControlPointCustom(this._wasCustom); - } - break; - default: - break; - } - this._line.getLine().updateLine(this._point); - if (this._line.isOnFocus()) { - this._ctrlPointControler.setLine(line); - line._refreshShape(); - } - }, - }, -); + undoExecute() { + const line = this._line; + const model = line.getModel(); + switch (this._point) { + case 0: + if ($defined(this._oldControlPoint)) { + line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y); + model.setSrcCtrlPoint(this._oldControlPoint.clone()); + line.setSrcControlPoint(this._oldControlPoint.clone()); + line.setIsSrcControlPointCustom(this._wasCustom); + } + break; + case 1: + if ($defined(this._oldControlPoint)) { + line.setTo(this._originalEndPoint.x, this._originalEndPoint.y); + model.setDestCtrlPoint(this._oldControlPoint.clone()); + line.setDestControlPoint(this._oldControlPoint.clone()); + line.setIsDestControlPointCustom(this._wasCustom); + } + break; + default: + break; + } + this._line.getLine().updateLine(this._point); + if (this._line.isOnFocus()) { + this._ctrlPointControler.setLine(line); + line._refreshShape(); + } + } +} export default MoveControlPointCommand; diff --git a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js index 7e0aa2f7..721b750a 100644 --- a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js +++ b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js @@ -17,8 +17,7 @@ */ import Command from '../Command'; -const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopicCommand */{ - Extends: Command, +class RemoveFeatureFromTopicCommand extends Command { /** * @classdesc This command handles do/undo of removing a feature from a topic, e.g. an icon or * a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}. @@ -27,15 +26,15 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi * @param {String} featureId id of the feature to remove * @extends mindplot.Command */ - initialize(topicId, featureId) { + constructor(topicId, featureId) { $assert($defined(topicId), 'topicId can not be null'); $assert(featureId, 'iconModel can not be null'); - this.parent(); + super(); this._topicId = topicId; this._featureId = featureId; this._oldFeature = null; - }, + } /** * Overrides abstract parent method @@ -45,7 +44,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi const feature = topic.findFeatureById(this._featureId); topic.removeFeature(feature); this._oldFeature = feature; - }, + } /** * Overrides abstract parent method @@ -55,7 +54,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi const topic = commandContext.findTopics(this._topicId)[0]; topic.addFeature(this._oldFeature); this._oldFeature = null; - }, -}); + } +} export default RemoveFeatureFromTopicCommand; diff --git a/packages/mindplot/src/components/commands/index.js b/packages/mindplot/src/components/commands/index.js deleted file mode 100644 index 20c113d5..00000000 --- a/packages/mindplot/src/components/commands/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import addFeatureToTopicCommand from './AddFeatureToTopicCommand'; -import addRelationshipCommand from './AddRelationshipCommand'; -import addTopicCommand from './AddTopicCommand'; -import changeFeatureToTopicCommand from './ChangeFeatureToTopicCommand'; -import deleteCommand from './DeleteCommand'; -import dragTopicCommand from './DragTopicCommand'; -import genericFunctionCommand from './GenericFunctionCommand'; -import moveControlPointCommand from './MoveControlPointCommand'; -import removeFeatureFromTopicCommand from './RemoveFeatureFromTopicCommand'; - -export default { - AddFeatureToTopicCommand: addFeatureToTopicCommand, - AddRelationshipCommand: addRelationshipCommand, - AddTopicCommand: addTopicCommand, - ChangeFeatureToTopicCommand: changeFeatureToTopicCommand, - DeleteCommand: deleteCommand, - DragTopicCommand: dragTopicCommand, - GenericFunctionCommand: genericFunctionCommand, - MoveControlPointCommand: moveControlPointCommand, - RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand, -}; diff --git a/packages/mindplot/src/components/layout/OriginalLayout.js b/packages/mindplot/src/components/layout/OriginalLayout.js index 2bdb1e17..451aed0a 100644 --- a/packages/mindplot/src/components/layout/OriginalLayout.js +++ b/packages/mindplot/src/components/layout/OriginalLayout.js @@ -21,10 +21,10 @@ import Node from './Node'; import SymmetricSorter from './SymmetricSorter'; import BalancedSorter from './BalancedSorter'; -const OriginalLayout = new Class({ - initialize(treeSet) { +class OriginalLayout { + constructor(treeSet) { this._treeSet = treeSet; - }, + } /** */ createNode(id, size, position, type) { @@ -35,7 +35,7 @@ const OriginalLayout = new Class({ const strategy = type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER; return new Node(id, size, position, strategy); - }, + } /** */ connectNode(parentId, childId, order) { @@ -51,7 +51,7 @@ const OriginalLayout = new Class({ // Fire a basic validation ... sorter.verify(this._treeSet, parent); - }, + } /** */ disconnectNode(nodeId) { @@ -72,7 +72,7 @@ const OriginalLayout = new Class({ // Fire a basic validation ... parent.getSorter().verify(this._treeSet, parent); - }, + } /** */ layout() { @@ -91,7 +91,7 @@ const OriginalLayout = new Class({ }, this, ); - }, + } _layoutChildren(node, heightById) { const nodeId = node.getId(); @@ -154,7 +154,7 @@ const OriginalLayout = new Class({ }, this, ); - }, + } _calculateAlignOffset(node, child, heightById) { if (child.isFree()) { @@ -191,14 +191,14 @@ const OriginalLayout = new Class({ } return offset; - }, + } _branchIsTaller(node, heightById) { return ( heightById[node.getId()] > node.getSize().height + node.getSorter()._getVerticalPadding() * 2 ); - }, + } _fixOverlapping(node, heightById) { const children = this._treeSet.getChildren(node); @@ -214,7 +214,7 @@ const OriginalLayout = new Class({ }, this, ); - }, + } _shiftBranches(node, heightById) { const shiftedBranches = [node]; @@ -254,7 +254,7 @@ const OriginalLayout = new Class({ }, this, ); - }, + } _branchesOverlap(branchA, branchB, heightById) { // a branch doesn't really overlap with itself @@ -268,9 +268,8 @@ const OriginalLayout = new Class({ const bottomB = branchB.getPosition().y + heightById[branchB.getId()] / 2; return !(topA >= bottomB || bottomA <= topB); - }, -}, -); + } +} /** * @type {mindplot.layout.SymmetricSorter} diff --git a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js index 9098942c..54bbb429 100644 --- a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js +++ b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js @@ -1,23 +1,26 @@ import Options from '../../Options'; -const BootstrapDialog = new Class({ - Implements: Options, +import $ from '@libraries/jquery-2.1.0'; - options: { - cancelButton: false, - closeButton: false, - acceptButton: true, - removeButton: false, - errorMessage: false, - onEventData: {}, - }, - - initialize(title, options) { +class BootstrapDialog extends Options { + + constructor(title, options) { + super(); + this.options = { + cancelButton: false, + closeButton: false, + acceptButton: true, + removeButton: false, + errorMessage: false, + onEventData: {}, + }; + this.setOptions(options); this.options.onEventData.dialog = this; this._native = $('
').append('
'); const content = $('
'); const header = this._buildHeader(title); + if (header) { content.append(header); } @@ -37,7 +40,7 @@ const BootstrapDialog = new Class({ $(this).remove(); }); this._native.on('shown.bs.modal', this.onDialogShown); - }, + } _buildFooter() { let footer = null; @@ -58,7 +61,7 @@ const BootstrapDialog = new Class({ footer.append(``); } return footer; - }, + } _buildHeader(title) { let header = null; @@ -74,42 +77,42 @@ const BootstrapDialog = new Class({ header.append(`

${title}

`); } return header; - }, + } onAcceptClick(event) { throw 'Unsupported operation'; - }, + } - onDialogShown() {}, + onDialogShown() {} onRemoveClick(event) { throw 'Unsupported operation'; - }, + } show() { this._native.modal(); - }, + } setContent(content) { const modalBody = this._native.find('.modal-body'); modalBody.append(content); - }, + } css(options) { this._native.find('.modal-dialog').css(options); - }, + } close() { this._native.modal('hide'); - }, + } alertError(message) { this._native.find('.alert-danger').text(message); this._native.find('.alert-danger').show(); - }, + } cleanError() { this._native.find('.alert-danger').hide(); - }, -}); + } +} export default BootstrapDialog; diff --git a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.Request.js b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js similarity index 87% rename from packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.Request.js rename to packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js index 2f92cf29..bfd9d2a6 100644 --- a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.Request.js +++ b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js @@ -1,11 +1,8 @@ import BootstrapDialog from './BootstrapDialog'; -BootstrapDialog.Request = new Class({ - - Extends: BootstrapDialog, - - initialize(url, title, options) { - this.parent(title, options); +class BootstrapDialogRequest extends BootstrapDialog { + constructor(url, title, options) { + super(title, options); this.requestOptions = {}; this.requestOptions.cache = false; const me = this; @@ -39,12 +36,13 @@ BootstrapDialog.Request = new Class({ }); me.show(); }); - }, + } onDialogShown() { if (typeof (onDialogShown) === 'function') { onDialogShown(); } - }, + } +} -}); +export default BootstrapDialogRequest; diff --git a/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js b/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js index db6fe335..c35f1bff 100644 --- a/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js +++ b/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js @@ -18,15 +18,15 @@ import ModelCodeName from './ModelCodeName'; import XMLSerializer_Pela from './XMLSerializer_Pela'; -const Beta2PelaMigrator = new Class({ - initialize(betaSerializer) { +class Beta2PelaMigrator { + constructor(betaSerializer) { this._betaSerializer = betaSerializer; this._pelaSerializer = new XMLSerializer_Pela(); - }, + } toXML(mindmap) { return this._pelaSerializer.toXML(mindmap); - }, + } loadFromDom(dom, mapId) { $assert($defined(mapId), 'mapId can not be null'); @@ -41,7 +41,7 @@ const Beta2PelaMigrator = new Class({ }); return mindmap; - }, + } _fixPosition(parentModel) { const parentPos = parentModel.getPosition(); @@ -53,7 +53,7 @@ const Beta2PelaMigrator = new Class({ } me._fixPosition(child); }); - }, -}); + } +} export default Beta2PelaMigrator; diff --git a/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js b/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js index 0240c7f1..8d8afe8b 100644 --- a/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js +++ b/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js @@ -18,15 +18,15 @@ import XMLSerializer_Tango from './XMLSerializer_Tango'; import ModelCodeName from './ModelCodeName'; -const Pela2TangoMigrator = new Class({ - initialize(pelaSerializer) { +class Pela2TangoMigrator { + constructor(pelaSerializer) { this._pelaSerializer = pelaSerializer; this._tangoSerializer = new XMLSerializer_Tango(); - }, + } toXML(mindmap) { return this._tangoSerializer.toXML(mindmap); - }, + } loadFromDom(dom, mapId) { $assert($defined(mapId), 'mapId can not be null'); @@ -35,7 +35,7 @@ const Pela2TangoMigrator = new Class({ this._fixOrder(mindmap); this._fixPosition(mindmap); return mindmap; - }, + } _fixOrder(mindmap) { // First level node policies has been changed. @@ -62,7 +62,7 @@ const Pela2TangoMigrator = new Class({ for (i = 0; i < leftNodes.length; i++) { leftNodes[i].setOrder(i * 2 + 1); } - }, + } _fixPosition(mindmap) { // Position was not required in previous versions. Try to synthesize one . @@ -73,7 +73,7 @@ const Pela2TangoMigrator = new Class({ const position = child.getPosition(); this._fixNodePosition(child, position); } - }, + } _fixNodePosition(node, parentPosition) { // Position was not required in previous versions. Try to synthesize one . let position = node.getPosition(); @@ -86,7 +86,7 @@ const Pela2TangoMigrator = new Class({ const child = children[i]; this._fixNodePosition(child, position); } - }, -}); + } +} export default Pela2TangoMigrator; diff --git a/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js b/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js index a4cf467e..9cb27293 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js +++ b/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js @@ -20,7 +20,7 @@ import Mindmap from '../model/Mindmap'; import INodeModel from '../model/INodeModel'; import TopicFeature from '../TopicFeature'; -const XMLSerializer_Beta = new Class({ +class XMLSerializer_Beta { toXML(mindmap) { $assert(mindmap, 'Can not save a null mindmap'); @@ -43,7 +43,7 @@ const XMLSerializer_Beta = new Class({ } return document; - }, + } _topicToXML(document, topic) { const parentTopic = document.createElement('topic'); @@ -55,7 +55,7 @@ const XMLSerializer_Beta = new Class({ const parent = topic.getParent(); if (parent == null || parent.getType() === INodeModel.CENTRAL_TOPIC_TYPE) { const pos = topic.getPosition(); - parentTopic.setAttribute('position', `${pos.x},${pos.y}`); + parentTopic.setAttribute('position', `${pos.x}${pos.y}`); } else { const order = topic.getOrder(); parentTopic.setAttribute('order', order); @@ -147,25 +147,25 @@ const XMLSerializer_Beta = new Class({ } return parentTopic; - }, + } _iconToXML(document, icon) { const iconDom = document.createElement('icon'); iconDom.setAttribute('id', icon.getIconType()); return iconDom; - }, + } _linkToXML(document, link) { const linkDom = document.createElement('link'); linkDom.setAttribute('url', link.getUrl()); return linkDom; - }, + } _noteToXML(document, note) { const noteDom = document.createElement('note'); noteDom.setAttribute('text', note.getText()); return noteDom; - }, + } loadFromDom(dom, mapId) { $assert(dom, 'Dom can not be null'); @@ -181,8 +181,8 @@ const XMLSerializer_Beta = new Class({ // Is a wisemap?. $assert( documentElement.tagName === XMLSerializer_Beta.MAP_ROOT_NODE, - `This seem not to be a map document. Root Tag: '${documentElement.tagName},',HTML:${dom.innerHTML - },XML:${innerXML(dom)}`, + `This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${dom.innerHTML + }XML:${innerXML(dom)}`, ); // Start the loading process ... @@ -200,7 +200,7 @@ const XMLSerializer_Beta = new Class({ } mindmap.setId(mapId); return mindmap; - }, + } _deserializeNode(domElem, mindmap) { const type = domElem.getAttribute('central') != null @@ -299,23 +299,23 @@ const XMLSerializer_Beta = new Class({ } return topic; - }, + } _deserializeIcon(domElem) { let icon = domElem.getAttribute('id'); icon = icon.replace('images/', 'icons/legacy/'); return TopicFeature.createModel(TopicFeature.Icon.id, { id: icon }); - }, + } _deserializeLink(domElem) { return TopicFeature.createModel(TopicFeature.Link.id, { url: domElem.getAttribute('url') }); - }, + } _deserializeNote(domElem) { const text = domElem.getAttribute('text'); return TopicFeature.createModel(TopicFeature.Note.id, { text: text == null ? ' ' : text }); - }, -}); + } +} XMLSerializer_Beta.MAP_ROOT_NODE = 'map'; diff --git a/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js b/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js index aa3fd177..1b115467 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js +++ b/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js @@ -16,7 +16,7 @@ * limitations under the License. */ import { $assert, $defined, createDocument } from '@wisemapping/core-js'; -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import Mindmap from '../model/Mindmap'; import INodeModel, { TopicShape } from '../model/INodeModel'; import TopicFeature from '../TopicFeature'; @@ -26,492 +26,485 @@ import ConnectionLine from '../ConnectionLine'; * @class */ // eslint-disable-next-line camelcase -const XMLSerializer_Pela = new Class( - /** @lends XMLSerializer_Pela */ { - /** - * @param mindmap - * @throws will throw an error if mindmap is null or undefined - * @return the created XML document (using the cross-browser implementation in core) - */ - toXML(mindmap) { - $assert(mindmap, 'Can not save a null mindmap'); +class XMLSerializer_Pela { + toXML(mindmap) { + $assert(mindmap, 'Can not save a null mindmap'); - const document = createDocument(); + const document = createDocument(); - // Store map attributes ... - const mapElem = document.createElement('map'); - const name = mindmap.getId(); - if ($defined(name)) { - mapElem.setAttribute('name', this.rmXmlInv(name)); + // Store map attributes ... + const mapElem = document.createElement('map'); + const name = mindmap.getId(); + if ($defined(name)) { + mapElem.setAttribute('name', this.rmXmlInv(name)); + } + const version = mindmap.getVersion(); + if ($defined(version)) { + mapElem.setAttribute('version', version); + } + + document.appendChild(mapElem); + + // Create branches ... + const topics = mindmap.getBranches(); + for (let i = 0; i < topics.length; i++) { + const topic = topics[i]; + const topicDom = this._topicToXML(document, topic); + mapElem.appendChild(topicDom); + } + + // Create Relationships + const relationships = mindmap.getRelationships(); + if (relationships.length > 0) { + for (let j = 0; j < relationships.length; j++) { + const relationship = relationships[j]; + if ( + mindmap.findNodeById(relationship.getFromNode()) !== null + && mindmap.findNodeById(relationship.getToNode()) !== null + ) { + // Isolated relationships are not persisted .... + const relationDom = this._relationshipToXML(document, relationship); + mapElem.appendChild(relationDom); + } } - const version = mindmap.getVersion(); - if ($defined(version)) { - mapElem.setAttribute('version', version); + } + + return document; + } + + _topicToXML(document, topic) { + const parentTopic = document.createElement('topic'); + + // Set topic attributes... + if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) { + parentTopic.setAttribute('central', 'true'); + } else { + const pos = topic.getPosition(); + parentTopic.setAttribute('position', `${pos.x}${pos.y}`); + + const order = topic.getOrder(); + if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); } + } + + const text = topic.getText(); + if ($defined(text)) { + this._noteTextToXML(document, parentTopic, text); + } + + const shape = topic.getShapeType(); + if ($defined(shape)) { + parentTopic.setAttribute('shape', shape); + + if (shape === TopicShape.IMAGE) { + parentTopic.setAttribute( + 'image', + `${topic.getImageSize().width}${topic.getImageSize().height + }:${topic.getImageUrl()}`, + ); } + } - document.appendChild(mapElem); + if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) { + parentTopic.setAttribute('shrink', 'true'); + } - // Create branches ... - const topics = mindmap.getBranches(); - for (let i = 0; i < topics.length; i++) { - const topic = topics[i]; - const topicDom = this._topicToXML(document, topic); - mapElem.appendChild(topicDom); + // Font properties ... + const id = topic.getId(); + parentTopic.setAttribute('id', id); + + let font = ''; + + const fontFamily = topic.getFontFamily(); + font += `${fontFamily || ''};`; + + const fontSize = topic.getFontSize(); + font += `${fontSize || ''};`; + + const fontColor = topic.getFontColor(); + font += `${fontColor || ''};`; + + const fontWeight = topic.getFontWeight(); + font += `${fontWeight || ''};`; + + const fontStyle = topic.getFontStyle(); + font += `${fontStyle || ''};`; + + if ( + $defined(fontFamily) + || $defined(fontSize) + || $defined(fontColor) + || $defined(fontWeight) + || $defined(fontStyle) + ) { + parentTopic.setAttribute('fontStyle', font); + } + + const bgColor = topic.getBackgroundColor(); + if ($defined(bgColor)) { + parentTopic.setAttribute('bgColor', bgColor); + } + + const brColor = topic.getBorderColor(); + if ($defined(brColor)) { + parentTopic.setAttribute('brColor', brColor); + } + + const metadata = topic.getMetadata(); + if ($defined(metadata)) { + parentTopic.setAttribute('metadata', metadata); + } + + // Serialize features ... + const features = topic.getFeatures(); + for (let i = 0; i < features.length; i++) { + const feature = features[i]; + + const featureType = feature.getType(); + const featureDom = document.createElement(featureType); + const attributes = feature.getAttributes(); + + for (const key in attributes) { + const value = attributes[key]; + if (key === 'text') { + const cdata = document.createCDATASection(this.rmXmlInv(value)); + featureDom.appendChild(cdata); + } else { + featureDom.setAttribute(key, this.rmXmlInv(value)); + } } + parentTopic.appendChild(featureDom); + } - // Create Relationships - const relationships = mindmap.getRelationships(); - if (relationships.length > 0) { - for (let j = 0; j < relationships.length; j++) { - const relationship = relationships[j]; - if ( - mindmap.findNodeById(relationship.getFromNode()) !== null - && mindmap.findNodeById(relationship.getToNode()) !== null - ) { - // Isolated relationships are not persisted .... - const relationDom = this._relationshipToXML(document, relationship); - mapElem.appendChild(relationDom); + // CHILDREN TOPICS + const childTopics = topic.getChildren(); + for (let j = 0; j < childTopics.length; j++) { + const childTopic = childTopics[j]; + const childDom = this._topicToXML(document, childTopic); + parentTopic.appendChild(childDom); + } + return parentTopic; + } + + _noteTextToXML(document, elem, text) { + if (text.indexOf('\n') === -1) { + elem.setAttribute('text', this.rmXmlInv(text)); + } else { + const textDom = document.createElement('text'); + const cdata = document.createCDATASection(this.rmXmlInv(text)); + textDom.appendChild(cdata); + elem.appendChild(textDom); + } + } + + _relationshipToXML(document, relationship) { + const result = document.createElement('relationship'); + result.setAttribute('srcTopicId', relationship.getFromNode()); + result.setAttribute('destTopicId', relationship.getToNode()); + + const lineType = relationship.getLineType(); + result.setAttribute('lineType', lineType); + if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) { + if ($defined(relationship.getSrcCtrlPoint())) { + const srcPoint = relationship.getSrcCtrlPoint(); + result.setAttribute( + 'srcCtrlPoint', + `${Math.round(srcPoint.x)}${Math.round(srcPoint.y)}`, + ); + } + if ($defined(relationship.getDestCtrlPoint())) { + const destPoint = relationship.getDestCtrlPoint(); + result.setAttribute( + 'destCtrlPoint', + `${Math.round(destPoint.x)}${Math.round(destPoint.y)}`, + ); + } + } + result.setAttribute('endArrow', relationship.getEndArrow()); + result.setAttribute('startArrow', relationship.getStartArrow()); + return result; + } + + /** + * @param dom + * @param mapId + * @throws will throw an error if dom is null or undefined + * @throws will throw an error if mapId is null or undefined + * @throws will throw an error if the document element is not consistent with a wisemap's root + * element + */ + loadFromDom(dom, mapId) { + $assert(dom, 'dom can not be null'); + $assert(mapId, 'mapId can not be null'); + + const rootElem = dom.documentElement; + + // Is a wisemap?. + $assert( + rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE, + 'This seem not to be a map document.', + ); + + this._idsMap = {}; + // Start the loading process ... + const version = rootElem.getAttribute('version'); + + const mindmap = new Mindmap(mapId, version); + const children = rootElem.childNodes; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (child.nodeType === 1) { + switch (child.tagName) { + case 'topic': { + const topic = this._deserializeNode(child, mindmap); + mindmap.addBranch(topic); + break; } - } - } - - return document; - }, - - _topicToXML(document, topic) { - const parentTopic = document.createElement('topic'); - - // Set topic attributes... - if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) { - parentTopic.setAttribute('central', 'true'); - } else { - const pos = topic.getPosition(); - parentTopic.setAttribute('position', `${pos.x},${pos.y}`); - - const order = topic.getOrder(); - if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); } - } - - const text = topic.getText(); - if ($defined(text)) { - this._noteTextToXML(document, parentTopic, text); - } - - const shape = topic.getShapeType(); - if ($defined(shape)) { - parentTopic.setAttribute('shape', shape); - - if (shape === TopicShape.IMAGE) { - parentTopic.setAttribute( - 'image', - `${topic.getImageSize().width},${topic.getImageSize().height - }:${topic.getImageUrl()}`, - ); - } - } - - if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) { - parentTopic.setAttribute('shrink', 'true'); - } - - // Font properties ... - const id = topic.getId(); - parentTopic.setAttribute('id', id); - - let font = ''; - - const fontFamily = topic.getFontFamily(); - font += `${fontFamily || ''};`; - - const fontSize = topic.getFontSize(); - font += `${fontSize || ''};`; - - const fontColor = topic.getFontColor(); - font += `${fontColor || ''};`; - - const fontWeight = topic.getFontWeight(); - font += `${fontWeight || ''};`; - - const fontStyle = topic.getFontStyle(); - font += `${fontStyle || ''};`; - - if ( - $defined(fontFamily) - || $defined(fontSize) - || $defined(fontColor) - || $defined(fontWeight) - || $defined(fontStyle) - ) { - parentTopic.setAttribute('fontStyle', font); - } - - const bgColor = topic.getBackgroundColor(); - if ($defined(bgColor)) { - parentTopic.setAttribute('bgColor', bgColor); - } - - const brColor = topic.getBorderColor(); - if ($defined(brColor)) { - parentTopic.setAttribute('brColor', brColor); - } - - const metadata = topic.getMetadata(); - if ($defined(metadata)) { - parentTopic.setAttribute('metadata', metadata); - } - - // Serialize features ... - const features = topic.getFeatures(); - for (let i = 0; i < features.length; i++) { - const feature = features[i]; - - const featureType = feature.getType(); - const featureDom = document.createElement(featureType); - const attributes = feature.getAttributes(); - - for (const key in attributes) { - const value = attributes[key]; - if (key === 'text') { - const cdata = document.createCDATASection(this.rmXmlInv(value)); - featureDom.appendChild(cdata); - } else { - featureDom.setAttribute(key, this.rmXmlInv(value)); - } - } - parentTopic.appendChild(featureDom); - } - - // CHILDREN TOPICS - const childTopics = topic.getChildren(); - for (let j = 0; j < childTopics.length; j++) { - const childTopic = childTopics[j]; - const childDom = this._topicToXML(document, childTopic); - parentTopic.appendChild(childDom); - } - return parentTopic; - }, - - _noteTextToXML(document, elem, text) { - if (text.indexOf('\n') === -1) { - elem.setAttribute('text', this.rmXmlInv(text)); - } else { - const textDom = document.createElement('text'); - const cdata = document.createCDATASection(this.rmXmlInv(text)); - textDom.appendChild(cdata); - elem.appendChild(textDom); - } - }, - - _relationshipToXML(document, relationship) { - const result = document.createElement('relationship'); - result.setAttribute('srcTopicId', relationship.getFromNode()); - result.setAttribute('destTopicId', relationship.getToNode()); - - const lineType = relationship.getLineType(); - result.setAttribute('lineType', lineType); - if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) { - if ($defined(relationship.getSrcCtrlPoint())) { - const srcPoint = relationship.getSrcCtrlPoint(); - result.setAttribute( - 'srcCtrlPoint', - `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`, - ); - } - if ($defined(relationship.getDestCtrlPoint())) { - const destPoint = relationship.getDestCtrlPoint(); - result.setAttribute( - 'destCtrlPoint', - `${Math.round(destPoint.x)},${Math.round(destPoint.y)}`, - ); - } - } - result.setAttribute('endArrow', relationship.getEndArrow()); - result.setAttribute('startArrow', relationship.getStartArrow()); - return result; - }, - - /** - * @param dom - * @param mapId - * @throws will throw an error if dom is null or undefined - * @throws will throw an error if mapId is null or undefined - * @throws will throw an error if the document element is not consistent with a wisemap's root - * element - */ - loadFromDom(dom, mapId) { - $assert(dom, 'dom can not be null'); - $assert(mapId, 'mapId can not be null'); - - const rootElem = dom.documentElement; - - // Is a wisemap?. - $assert( - rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE, - 'This seem not to be a map document.', - ); - - this._idsMap = {}; - // Start the loading process ... - const version = rootElem.getAttribute('version'); - - const mindmap = new Mindmap(mapId, version); - const children = rootElem.childNodes; - for (let i = 0; i < children.length; i++) { - const child = children[i]; - if (child.nodeType === 1) { - switch (child.tagName) { - case 'topic': { - const topic = this._deserializeNode(child, mindmap); - mindmap.addBranch(topic); - break; + case 'relationship': { + const relationship = this._deserializeRelationship(child, mindmap); + if (relationship != null) { + mindmap.addRelationship(relationship); } - case 'relationship': { - const relationship = this._deserializeRelationship(child, mindmap); - if (relationship != null) { - mindmap.addRelationship(relationship); - } - break; - } - default: - break; + break; } + default: + break; } } - this._idsMap = null; - mindmap.setId(mapId); - return mindmap; - }, + } + this._idsMap = null; + mindmap.setId(mapId); + return mindmap; + } - _deserializeNode(domElem, mindmap) { - const type = domElem.getAttribute('central') != null - ? INodeModel.CENTRAL_TOPIC_TYPE - : INodeModel.MAIN_TOPIC_TYPE; + _deserializeNode(domElem, mindmap) { + const type = domElem.getAttribute('central') != null + ? INodeModel.CENTRAL_TOPIC_TYPE + : INodeModel.MAIN_TOPIC_TYPE; - // Load attributes... - let id = domElem.getAttribute('id'); - if ($defined(id)) { - id = parseInt(id, 10); + // Load attributes... + let id = domElem.getAttribute('id'); + if ($defined(id)) { + id = parseInt(id, 10); + } + + if (this._idsMap[id]) { + id = null; + } else { + this._idsMap[id] = domElem; + } + + const topic = mindmap.createNode(type, id); + + // Set text property is it;s defined... + const text = domElem.getAttribute('text'); + if ($defined(text) && text) { + topic.setText(text); + } + + const fontStyle = domElem.getAttribute('fontStyle'); + if ($defined(fontStyle) && fontStyle) { + const font = fontStyle.split(';'); + + if (font[0]) { + topic.setFontFamily(font[0]); } - if (this._idsMap[id]) { - id = null; - } else { - this._idsMap[id] = domElem; + if (font[1]) { + topic.setFontSize(font[1]); } - const topic = mindmap.createNode(type, id); - - // Set text property is it;s defined... - const text = domElem.getAttribute('text'); - if ($defined(text) && text) { - topic.setText(text); + if (font[2]) { + topic.setFontColor(font[2]); } - const fontStyle = domElem.getAttribute('fontStyle'); - if ($defined(fontStyle) && fontStyle) { - const font = fontStyle.split(';'); + if (font[3]) { + topic.setFontWeight(font[3]); + } - if (font[0]) { - topic.setFontFamily(font[0]); - } + if (font[4]) { + topic.setFontStyle(font[4]); + } + } - if (font[1]) { - topic.setFontSize(font[1]); - } + const shape = domElem.getAttribute('shape'); + if ($defined(shape)) { + topic.setShapeType(shape); - if (font[2]) { - topic.setFontColor(font[2]); - } + if (shape === TopicShape.IMAGE) { + const image = domElem.getAttribute('image'); + const size = image.substring(0, image.indexOf(':')); + const url = image.substring(image.indexOf(':') + 1, image.length); + topic.setImageUrl(url); - if (font[3]) { - topic.setFontWeight(font[3]); - } + const split = size.split(','); + topic.setImageSize(split[0], split[1]); + } + } - if (font[4]) { - topic.setFontStyle(font[4]); + const bgColor = domElem.getAttribute('bgColor'); + if ($defined(bgColor)) { + topic.setBackgroundColor(bgColor); + } + + const borderColor = domElem.getAttribute('brColor'); + if ($defined(borderColor)) { + topic.setBorderColor(borderColor); + } + + const order = domElem.getAttribute('order'); + if ($defined(order) && order !== 'NaN') { + // Hack for broken maps ... + topic.setOrder(parseInt(order, 10)); + } + + const isShrink = domElem.getAttribute('shrink'); + // Hack: Some production maps has been stored with the central topic collapsed. This is a bug. + if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) { + topic.setChildrenShrunken(isShrink); + } + + const position = domElem.getAttribute('position'); + if ($defined(position)) { + const pos = position.split(','); + topic.setPosition(pos[0], pos[1]); + } + + const metadata = domElem.getAttribute('metadata'); + if ($defined(metadata)) { + topic.setMetadata(metadata); + } + + // Creating icons and children nodes + const children = domElem.childNodes; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (child.nodeType === Node.ELEMENT_NODE) { + if (child.tagName === 'topic') { + const childTopic = this._deserializeNode(child, mindmap); + childTopic.connectTo(topic); + } else if (TopicFeature.isSupported(child.tagName)) { + // Load attributes ... + const namedNodeMap = child.attributes; + const attributes = {}; + for (let j = 0; j < namedNodeMap.length; j++) { + const attribute = namedNodeMap.item(j); + attributes[attribute.name] = attribute.value; + } + + // Has text node ?. + const textAttr = this._deserializeTextAttr(child); + if (textAttr) { + attributes.text = textAttr; + } + + // Create a new element .... + const featureType = child.tagName; + const feature = TopicFeature.createModel(featureType, attributes); + topic.addFeature(feature); + } else if (child.tagName === 'text') { + const nodeText = this._deserializeNodeText(child); + topic.setText(nodeText); } } + } + return topic; + } - const shape = domElem.getAttribute('shape'); - if ($defined(shape)) { - topic.setShapeType(shape); - - if (shape === TopicShape.IMAGE) { - const image = domElem.getAttribute('image'); - const size = image.substring(0, image.indexOf(':')); - const url = image.substring(image.indexOf(':') + 1, image.length); - topic.setImageUrl(url); - - const split = size.split(','); - topic.setImageSize(split[0], split[1]); - } - } - - const bgColor = domElem.getAttribute('bgColor'); - if ($defined(bgColor)) { - topic.setBackgroundColor(bgColor); - } - - const borderColor = domElem.getAttribute('brColor'); - if ($defined(borderColor)) { - topic.setBorderColor(borderColor); - } - - const order = domElem.getAttribute('order'); - if ($defined(order) && order !== 'NaN') { - // Hack for broken maps ... - topic.setOrder(parseInt(order, 10)); - } - - const isShrink = domElem.getAttribute('shrink'); - // Hack: Some production maps has been stored with the central topic collapsed. This is a bug. - if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) { - topic.setChildrenShrunken(isShrink); - } - - const position = domElem.getAttribute('position'); - if ($defined(position)) { - const pos = position.split(','); - topic.setPosition(pos[0], pos[1]); - } - - const metadata = domElem.getAttribute('metadata'); - if ($defined(metadata)) { - topic.setMetadata(metadata); - } - - // Creating icons and children nodes + _deserializeTextAttr(domElem) { + let value = domElem.getAttribute('text'); + if (!$defined(value)) { const children = domElem.childNodes; - for (let i = 0; i < children.length; i++) { - const child = children[i]; - if (child.nodeType === Node.ELEMENT_NODE) { - if (child.tagName === 'topic') { - const childTopic = this._deserializeNode(child, mindmap); - childTopic.connectTo(topic); - } else if (TopicFeature.isSupported(child.tagName)) { - // Load attributes ... - const namedNodeMap = child.attributes; - const attributes = {}; - for (let j = 0; j < namedNodeMap.length; j++) { - const attribute = namedNodeMap.item(j); - attributes[attribute.name] = attribute.value; - } - - // Has text node ?. - const textAttr = this._deserializeTextAttr(child); - if (textAttr) { - attributes.text = textAttr; - } - - // Create a new element .... - const featureType = child.tagName; - const feature = TopicFeature.createModel(featureType, attributes); - topic.addFeature(feature); - } else if (child.tagName === 'text') { - const nodeText = this._deserializeNodeText(child); - topic.setText(nodeText); - } - } - } - return topic; - }, - - _deserializeTextAttr(domElem) { - let value = domElem.getAttribute('text'); - if (!$defined(value)) { - const children = domElem.childNodes; - for (let i = 0; i < children.length; i++) { - const child = children[i]; - if (child.nodeType === Node.CDATA_SECTION_NODE) { - value = child.nodeValue; - } - } - } else { - // Notes must be decoded ... - value = unescape(value); - - // Hack for empty nodes ... - if (value === '') { - value = ' '; - } - } - - return value; - }, - - _deserializeNodeText(domElem) { - const children = domElem.childNodes; - let value = null; for (let i = 0; i < children.length; i++) { const child = children[i]; if (child.nodeType === Node.CDATA_SECTION_NODE) { value = child.nodeValue; } } - return value; - }, + } else { + // Notes must be decoded ... + value = unescape(value); - _deserializeRelationship(domElement, mindmap) { - const srcId = domElement.getAttribute('srcTopicId'); - const destId = domElement.getAttribute('destTopicId'); - const lineType = domElement.getAttribute('lineType'); - const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint'); - const destCtrlPoint = domElement.getAttribute('destCtrlPoint'); + // Hack for empty nodes ... + if (value === '') { + value = ' '; + } + } - // If for some reason a relationship lines has source and dest nodes the same, don't import it. - if (srcId === destId) { - return null; - } - // Is the connections points valid ?. If it's not, do not load the relationship ... - if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) { - return null; - } + return value; + } - const model = mindmap.createRelationship(srcId, destId); - model.setLineType(lineType); - if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') { - model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint)); + _deserializeNodeText(domElem) { + const children = domElem.childNodes; + let value = null; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + if (child.nodeType === Node.CDATA_SECTION_NODE) { + value = child.nodeValue; } - if ($defined(destCtrlPoint) && destCtrlPoint !== '') { - model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint)); - } - model.setEndArrow('false'); - model.setStartArrow('true'); - return model; - }, + } + return value; + } - /** - * This method ensures that the output String has only - * valid XML unicode characters as specified by the - * XML 1.0 standard. For reference, please see - * the - * standard. This method will return an empty - * String if the input is null or empty. - * - * @param in The String whose non-valid characters we want to remove. - * @return The in String, stripped of non-valid characters. - */ - rmXmlInv(str) { - if (str == null || str === undefined) return null; + _deserializeRelationship(domElement, mindmap) { + const srcId = domElement.getAttribute('srcTopicId'); + const destId = domElement.getAttribute('destTopicId'); + const lineType = domElement.getAttribute('lineType'); + const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint'); + const destCtrlPoint = domElement.getAttribute('destCtrlPoint'); - let result = ''; - for (let i = 0; i < str.length; i++) { - const c = str.charCodeAt(i); - if ( - c === 0x9 - || c === 0xa - || c === 0xd - || (c >= 0x20 && c <= 0xd7ff) - || (c >= 0xe000 && c <= 0xfffd) - || (c >= 0x10000 && c <= 0x10ffff) - ) { - result += str.charAt(i); - } + // If for some reason a relationship lines has source and dest nodes the same, don't import it. + if (srcId === destId) { + return null; + } + // Is the connections points valid ?. If it's not, do not load the relationship ... + if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) { + return null; + } + + const model = mindmap.createRelationship(srcId, destId); + model.setLineType(lineType); + if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') { + model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint)); + } + if ($defined(destCtrlPoint) && destCtrlPoint !== '') { + model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint)); + } + model.setEndArrow('false'); + model.setStartArrow('true'); + return model; + } + + /** + * This method ensures that the output String has only + * valid XML unicode characters as specified by the + * XML 1.0 standard. For reference, please see + * the + * standard. This method will return an empty + * String if the input is null or empty. + * + * @param in The String whose non-valid characters we want to remove. + * @return The in String, stripped of non-valid characters. + */ + rmXmlInv(str) { + if (str == null || str === undefined) return null; + + let result = ''; + for (let i = 0; i < str.length; i++) { + const c = str.charCodeAt(i); + if ( + c === 0x9 + || c === 0xa + || c === 0xd + || (c >= 0x20 && c <= 0xd7ff) + || (c >= 0xe000 && c <= 0xfffd) + || (c >= 0x10000 && c <= 0x10ffff) + ) { + result += str.charAt(i); } - return result; - }, - }, -); + } + return result; + } +} /** * a wisemap's root element tag name diff --git a/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js b/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js index 543b9cf6..957f3744 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js +++ b/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js @@ -23,8 +23,7 @@ import XMLSerializer_Pela from './XMLSerializer_Pela'; * @class * @extends mindplot.persistence.XMLSerializer_Pela */ -const XMLSerializer_Tango = new Class({ - Extends: XMLSerializer_Pela, -}); +class XMLSerializer_Tango extends XMLSerializer_Pela{ +}; export default XMLSerializer_Tango; diff --git a/packages/mindplot/src/components/util/Shape.js b/packages/mindplot/src/components/util/Shape.js index 1949d5ce..2eb15a23 100644 --- a/packages/mindplot/src/components/util/Shape.js +++ b/packages/mindplot/src/components/util/Shape.js @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import web2d from '@wisemapping/web2d'; +import * as web2d from '@wisemapping/web2d'; import { $assert, $defined } from '@wisemapping/core-js'; import { TopicShape } from '../model/INodeModel'; import TopicConfig from '../TopicConfig'; diff --git a/packages/mindplot/src/components/widget/IMenu.js b/packages/mindplot/src/components/widget/IMenu.js index 4d30d595..7a58db40 100644 --- a/packages/mindplot/src/components/widget/IMenu.js +++ b/packages/mindplot/src/components/widget/IMenu.js @@ -18,9 +18,9 @@ import { $assert } from "@wisemapping/core-js"; import PersistenceManager from '../PersistenceManager'; -const IMenu = new Class({ +class IMenu { - initialize(designer, containerId, mapId) { + constructor(designer, containerId, mapId) { $assert(designer, 'designer can not be null'); $assert(containerId, 'containerId can not be null'); @@ -34,13 +34,13 @@ const IMenu = new Class({ this._designer.addEvent('modelUpdate', () => { me.setRequireChange(true); }); - }, + } clear() { _.each(this._toolbarElems, (item) => { item.hide(); }); - }, + } discardChanges(designer) { // Avoid autosave before leaving the page .... @@ -56,13 +56,13 @@ const IMenu = new Class({ // Reload the page ... window.location.reload(); - }, + } unlockMap(designer) { const mindmap = designer.getMindmap(); const persistenceManager = PersistenceManager.getInstance(); persistenceManager.unlockMap(mindmap); - }, + } save(saveElem, designer, saveHistory, sync) { // Load map content ... @@ -86,7 +86,6 @@ const IMenu = new Class({ } menu.setRequireChange(false); }, - onError(error) { if (saveHistory) { saveElem.css('cursor', 'pointer'); @@ -97,17 +96,17 @@ const IMenu = new Class({ $notifyModal(error.message); } } - }, + } }, sync); - }, + } isSaveRequired() { return this._mindmapUpdated; - }, + } setRequireChange(value) { this._mindmapUpdated = value; - }, -}); + } +} export default IMenu; diff --git a/packages/mindplot/src/components/widget/IconPanel.js b/packages/mindplot/src/components/widget/IconPanel.js index 6e72f5c0..3878644e 100644 --- a/packages/mindplot/src/components/widget/IconPanel.js +++ b/packages/mindplot/src/components/widget/IconPanel.js @@ -44,7 +44,7 @@ class IconPanel extends ToolbarPaneItem { const iconId = familyIcons[j]; const img = $('') .attr('id', iconId) - .attr('src', ImageIcon.prototype._getImageUrl(iconId)) + .attr('src', ImageIcon._getImageUrl(iconId)) .attr('class', 'panelIcon'); familyContent.append(img); diff --git a/packages/mindplot/src/components/widget/Menu.js b/packages/mindplot/src/components/widget/Menu.js index 587da226..c452b69f 100644 --- a/packages/mindplot/src/components/widget/Menu.js +++ b/packages/mindplot/src/components/widget/Menu.js @@ -19,7 +19,7 @@ import $ from '@libraries/jquery-2.1.0'; import _ from '@libraries/underscore-min'; import { $defined } from '@wisemapping/core-js'; -import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog'; +import BootstrapDialogRequest from "../libraries/bootstrap/BootstrapDialogRequest"; import IMenu from './IMenu'; import FontFamilyPanel from './FontFamilyPanel'; import FontSizePanel from './FontSizePanel'; @@ -215,7 +215,7 @@ class Menu extends IMenu { } this._addButton('export', false, false, () => { - BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/exportf`, $msg('EXPORT'), { + BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/exportf`, $msg('EXPORT'), { cancelButton: true, closeButton: true, }); @@ -347,7 +347,7 @@ class Menu extends IMenu { const shareElem = $('#shareIt'); if (shareElem) { this._addButton('shareIt', false, false, () => { - BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), { + BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), { closeButton: true, cancelButton: true, }); @@ -359,7 +359,7 @@ class Menu extends IMenu { const publishElem = $('#publishIt'); if (publishElem) { this._addButton('publishIt', false, false, () => { - BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), { + BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), { closeButton: true, cancelButton: true, }); @@ -371,7 +371,7 @@ class Menu extends IMenu { const historyElem = $('#history'); if (historyElem) { this._addButton('history', false, false, () => { - BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/historyf`, $msg('HISTORY'), { + BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/historyf`, $msg('HISTORY'), { closeButton: true, cancelButton: true, }); @@ -386,7 +386,7 @@ class Menu extends IMenu { const keyboardShortcut = $('#keyboardShortcuts'); if (keyboardShortcut) { keyboardShortcut.bind('click', (event) => { - BootstrapDialog.Request.active = new BootstrapDialog.Request('c/keyboard', $msg('SHORTCUTS'), { + BootstrapDialogRequest.active = new BootstrapDialogRequest('c/keyboard', $msg('SHORTCUTS'), { closeButton: true, cancelButton: true, }); diff --git a/packages/mindplot/src/components/widget/ModalDialogNotifier.js b/packages/mindplot/src/components/widget/ModalDialogNotifier.js index 1824411c..008ffddf 100644 --- a/packages/mindplot/src/components/widget/ModalDialogNotifier.js +++ b/packages/mindplot/src/components/widget/ModalDialogNotifier.js @@ -15,9 +15,7 @@ * limitations under the License. */ -const ModalDialogNotifier = new Class({ - initialize() {}, - +class ModalDialogNotifier { // FIXME: replace by alert() show(message, title) { $assert(message, 'message can not be null'); diff --git a/packages/mindplot/src/components/widget/NoteEditor.js b/packages/mindplot/src/components/widget/NoteEditor.js index 3376ed52..daf8628a 100644 --- a/packages/mindplot/src/components/widget/NoteEditor.js +++ b/packages/mindplot/src/components/widget/NoteEditor.js @@ -18,23 +18,21 @@ import jQuery from '@libraries/jquery-2.1.0'; import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog'; -const NoteEditor = new Class({ - Extends: BootstrapDialog, - - initialize(model) { +class NoteEditor extends BootstrapDialog{ + constructor(model) { $assert(model, 'model can not be null'); this._model = model; - this.parent($msg('Note'), { + super($msg('Note'), { cancelButton: true, closeButton: true, acceptButton: true, removeButton: typeof model.getValue() !== 'undefined', - onEventData: { model: this._model }, + onEventData: { model: this._model } }); this.css({ margin: '150px auto' }); const panel = this._buildPanel(model); this.setContent(panel); - }, + } _buildPanel(model) { const result = $('
').css('padding-top', '5px'); @@ -66,11 +64,11 @@ const NoteEditor = new Class({ result.append(form); return result; - }, + } onAcceptClick(event) { event.data.dialog._submitForm(event.data.model); - }, + } _submitForm(model) { const textarea = this._native.find('textarea'); @@ -78,16 +76,16 @@ const NoteEditor = new Class({ model.setValue(textarea.val()); } this.close(); - }, + } onDialogShown() { $(this).find('textarea').focus(); - }, + } onRemoveClick(event) { event.data.model.setValue(null); event.data.dialog.close(); - }, -}); + } +} export default NoteEditor; diff --git a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js b/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js deleted file mode 100644 index 2de28a17..00000000 --- a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js +++ /dev/null @@ -1,47 +0,0 @@ -BootstrapDialog.Request = new Class({ - Extends: BootstrapDialog, - initialize: function (url, title, options) { - this.parent(title, options); - this.requestOptions = {}; - this.requestOptions.cache = false; - var me = this; - this.requestOptions.fail = function (xhr) { - // Intercept form requests ... - console.log("Failure:"); - console.log(xhr); - }; - - this.requestOptions.success = function () { - // Intercept form requests ... - var forms = me._native.find('form'); - _.each(forms, function (form) { - $(form).on('submit', function (event) { - // Intercept form ... - me.requestOptions.url = form.action; - me.requestOptions.method = form.method ? form.method : 'post'; - $.ajax(me.requestOptions); - event.stopPropagation(); - return false; - }); - }); - }; - - this._native.find('.modal-body').load(url, function () { - me.acceptButton.unbind('click').click(function () { - submitDialogForm(); - }); - me._native.on('hidden.bs.modal', function () { - $(this).remove(); - }); - me.show(); - }); - }, - - onDialogShown: function () { - if (typeof (onDialogShown) == "function") { - onDialogShown(); - } - } - - -}); diff --git a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js b/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js deleted file mode 100644 index 83f37aef..00000000 --- a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js +++ /dev/null @@ -1,111 +0,0 @@ -var BootstrapDialog = new Class({ - Implements: Options, - - options: { - cancelButton: false, - closeButton: false, - acceptButton: true, - removeButton:false, - errorMessage: false, - onEventData:{} - }, - - initialize: function (title, options) { - this.setOptions(options); - this.options.onEventData.dialog = this; - this._native = $('
').append('
'); - var content = $('
'); - var header = this._buildHeader(title); - if (header) { - content.append(header); - } - var body = $('
'); - if(this.options.errorMessage){ - var error = $('
'); - error.hide(); - body.append(error); - } - content.append(body); - var footer = this._buildFooter(); - if (footer) { - content.append(footer); - } - this._native.find(".modal-dialog").append(content); - this._native.on('hidden.bs.modal', function() { - $(this).remove(); - }); - this._native.on('shown.bs.modal', this.onDialogShown); - }, - - _buildFooter: function() { - var footer = null; - if (this.options.acceptButton || this.options.removeButton || this.options.cancelButton) { - footer = $('
'); - } - if (this.options.acceptButton) { - this.acceptButton = $(''); - footer.append(this.acceptButton); - this.acceptButton.unbind('click').on("click",this.options.onEventData, this.onAcceptClick) - } - if (this.options.removeButton) { - this.removeButton = $(''); - footer.append(this.removeButton); - this.removeButton.on('click', this.options.onEventData, this.onRemoveClick); - } - if (this.options.cancelButton) { - footer.append(''); - } - return footer; - }, - - _buildHeader: function(title) { - var header = null; - if (this.options.closeButton || title) { - header = $('
'); - } - if (this.options.closeButton) { - header.append( - '' - ); - } - if (title) { - header.append('

' + title + '

'); - } - return header; - }, - - onAcceptClick: function(event) { - throw "Unsupported operation"; - }, - - onDialogShown: function() {}, - onRemoveClick: function(event) { - throw "Unsupported operation"; - }, - - show: function () { - this._native.modal(); - }, - - setContent: function(content) { - var modalBody = this._native.find('.modal-body'); - modalBody.append(content); - }, - - css: function(options){ - this._native.find('.modal-dialog').css(options); - }, - - close: function() { - this._native.modal('hide'); - }, - - alertError: function(message){ - this._native.find('.alert-danger').text(message); - this._native.find('.alert-danger').show(); - }, - - cleanError: function(){ - this._native.find('.alert-danger').hide(); - } -}); diff --git a/packages/mindplot/test/unit/EventsTestSuite.js b/packages/mindplot/test/unit/EventsTestSuite.js index 3e993c02..fae254c2 100644 --- a/packages/mindplot/test/unit/EventsTestSuite.js +++ b/packages/mindplot/test/unit/EventsTestSuite.js @@ -1,14 +1,12 @@ -const TestClass = new Class({ - Extends: mindplot.Events, - +class TestClass extends Events{ getEvents() { return this.$events; - }, + } removeEvents() { this.$events = {}; - }, -}); + } +} // Test class and variables const expectedChangeFn1 = function () { return 'change1'; }; diff --git a/packages/mindplot/test/unit/TestSuite.js b/packages/mindplot/test/unit/TestSuite.js index 07a48bbf..e883f2f4 100644 --- a/packages/mindplot/test/unit/TestSuite.js +++ b/packages/mindplot/test/unit/TestSuite.js @@ -1,6 +1,6 @@ -TestSuite = new Class({ +class TestSuite { -}); +} TestSuite.NODE_SIZE = { width: 80, height: 30 }; TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 }; diff --git a/packages/mindplot/webpack.playground.js b/packages/mindplot/webpack.playground.js index 83b99c8f..90968443 100644 --- a/packages/mindplot/webpack.playground.js +++ b/packages/mindplot/webpack.playground.js @@ -43,14 +43,7 @@ module.exports = { resolve: { alias: { '@libraries': path.resolve(__dirname, '../../libraries/'), - '@commands': path.resolve(__dirname, './src/components/commands/'), - '@layout': path.resolve(__dirname, './src/components/layout/'), - '@libs': path.resolve(__dirname, './src/components/libraries/'), - '@model': path.resolve(__dirname, './src/components/model'), - '@persistence': path.resolve(__dirname, './src/components/persistence/'), - '@util': path.resolve(__dirname, './src/components/util/'), - '@widget': path.resolve(__dirname, './src/components/widget/'), - '@components': path.resolve(__dirname, './src/components/'), + }, extensions: ['.js', '.json'], }, diff --git a/packages/web2d/jsconfig.json b/packages/web2d/jsconfig.json index 5c72f5ae..d7ce2a30 100644 --- a/packages/web2d/jsconfig.json +++ b/packages/web2d/jsconfig.json @@ -3,10 +3,7 @@ "baseUrl": ".", "module": "commonjs", "paths": { - "@libraries/*": ["../../libraries/*"], - "@svg/*": ["./src/components/peer/svg/*"], - "@utils/*": ["./src/components/peer/utils/*"], - "@components/*": ["./src/components/*"] + "@libraries/*": ["../../libraries/*"] } }, "exclude": ["node_modules"] diff --git a/packages/web2d/src/components/ElementClass.js b/packages/web2d/src/components/ElementClass.js index 48418f24..23c5e94f 100644 --- a/packages/web2d/src/components/ElementClass.js +++ b/packages/web2d/src/components/ElementClass.js @@ -19,15 +19,16 @@ import { $defined } from '@wisemapping/core-js'; class ElementClass { - constructor(peer, attributes, htmlContainer) { - this._htmlContainer = htmlContainer; + constructor(peer, attributes, delayInit) { this.peer = peer; if (peer == null) { throw new Error('Element peer can not be null'); } - if ($defined(attributes)) { - this._initialize(attributes); + if (!delayInit) { + if ($defined(attributes)) { + this._initialize(attributes); + } } } diff --git a/packages/web2d/src/components/Workspace.js b/packages/web2d/src/components/Workspace.js index de1cdfa2..f8ea2639 100644 --- a/packages/web2d/src/components/Workspace.js +++ b/packages/web2d/src/components/Workspace.js @@ -16,14 +16,13 @@ * limitations under the License. */ import $ from '@libraries/jquery-2.1.0'; -import { $defined, $assert } from '@wisemapping/core-js'; -import ElementClass from '@components/ElementClass'; +import { $defined } from '@wisemapping/core-js'; +import ElementClass from './ElementClass'; import Toolkit from './Toolkit'; class Workspace extends ElementClass { constructor(attributes) { const htmlContainer = Workspace._createDivContainer(); - const peer = Toolkit.createWorkspace(htmlContainer); const defaultAttributes = { width: '200px', @@ -38,7 +37,9 @@ class Workspace extends ElementClass { defaultAttributes[key] = attributes[key]; } } - super(peer, defaultAttributes, htmlContainer); + super(peer, defaultAttributes, true); + this._htmlContainer = htmlContainer; + this._initialize(defaultAttributes); htmlContainer.append(this.peer._native); } @@ -78,8 +79,8 @@ class Workspace extends ElementClass { */ static _createDivContainer() { const container = window.document.createElement('div'); - container.id = 'workspaceContainer'; - // container.style.overflow = "hidden"; + // container.id = 'workspaceContainer'; + // container.style.overflow = 'hidden'; container.style.position = 'relative'; container.style.top = '0px'; container.style.left = '0px'; diff --git a/packages/web2d/src/components/peer/svg/ArialFont.js b/packages/web2d/src/components/peer/svg/ArialFont.js index cac5b13b..8d663c33 100644 --- a/packages/web2d/src/components/peer/svg/ArialFont.js +++ b/packages/web2d/src/components/peer/svg/ArialFont.js @@ -17,20 +17,20 @@ */ import Font from './Font'; -const ArialFont = new Class({ - Extends: Font, - initialize() { - this.parent(); - this._fontFamily = 'Arial'; - }, +class ArialFont extends Font { + constructor() { + super(); + this._fontFamily = 'arial'; + } getFontFamily() { return this._fontFamily; - }, + } + // eslint-disable-next-line class-methods-use-this getFont() { return Font.ARIAL; - }, -}); + } +} export default ArialFont; diff --git a/packages/web2d/src/components/peer/svg/ArrowPeer.js b/packages/web2d/src/components/peer/svg/ArrowPeer.js index e4b3a16a..e3d15a9d 100644 --- a/packages/web2d/src/components/peer/svg/ArrowPeer.js +++ b/packages/web2d/src/components/peer/svg/ArrowPeer.js @@ -20,34 +20,33 @@ import { $defined } from '@wisemapping/core-js'; import ElementPeer from './ElementPeer'; import Point from '../../Point'; -const ArrowPeer = new Class({ - Extends: ElementPeer, - initialize() { - const svgElement = window.document.createElementNS(this.svgNamespace, 'path'); - this.parent(svgElement); +class ArrowPeer extends ElementPeer { + constructor() { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'path'); + super(svgElement); this._style = {}; this._controlPoint = new Point(); this._fromPoint = new Point(); - }, + } setFrom(x, y) { this._fromPoint.x = x; this._fromPoint.y = y; this._redraw(); - }, + } setControlPoint(point) { this._controlPoint = point; this._redraw(); - }, + } setStrokeColor(color) { this.setStroke(null, null, color, null); - }, + } setStrokeWidth(width) { this.setStroke(width); - }, + } setDashed(isDashed, length, spacing) { if ( @@ -56,11 +55,11 @@ const ArrowPeer = new Class({ && $defined(length) && $defined(spacing) ) { - this._native.setAttribute('stroke-dasharray', `${length},${spacing}`); + this._native.setAttribute('stroke-dasharray', `${length}${spacing}`); } else { this._native.setAttribute('stroke-dasharray', ''); } - }, + } _updateStyle() { let style = ''; @@ -70,7 +69,7 @@ const ArrowPeer = new Class({ } } this._native.setAttribute('style', style); - }, + } _redraw() { let x; @@ -110,7 +109,7 @@ const ArrowPeer = new Class({ + `L${xp + this._fromPoint.x},${yp + this._fromPoint.y}`; this._native.setAttribute('d', path); } - }, -}); + } +} export default ArrowPeer; diff --git a/packages/web2d/src/components/peer/svg/CurvedLinePeer.js b/packages/web2d/src/components/peer/svg/CurvedLinePeer.js index c4b5bcf1..80486e27 100644 --- a/packages/web2d/src/components/peer/svg/CurvedLinePeer.js +++ b/packages/web2d/src/components/peer/svg/CurvedLinePeer.js @@ -19,11 +19,10 @@ import { $defined } from '@wisemapping/core-js'; import ElementPeer from './ElementPeer'; import Point from '../../Point'; -const CurvedLinePeer = new Class({ - Extends: ElementPeer, - initialize() { - const svgElement = window.document.createElementNS(this.svgNamespace, 'path'); - this.parent(svgElement); +class CurvedLinePeer extends ElementPeer { + constructor() { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'path'); + super(svgElement); this._style = { fill: '#495879' }; this._updateStyle(); this._customControlPoint_1 = false; @@ -31,7 +30,7 @@ const CurvedLinePeer = new Class({ this._control1 = new Point(); this._control2 = new Point(); this._lineStyle = true; - }, + } setSrcControlPoint(control) { this._customControlPoint_1 = true; @@ -42,7 +41,7 @@ const CurvedLinePeer = new Class({ this._control1.y = parseInt(this._control1.y, 10); } if (change) this._updatePath(); - }, + } setDestControlPoint(control) { this._customControlPoint_2 = true; @@ -53,64 +52,64 @@ const CurvedLinePeer = new Class({ this._control2.y = parseInt(this._control2.y, 10); } if (change) this._updatePath(); - }, + } isSrcControlPointCustom() { return this._customControlPoint_1; - }, + } isDestControlPointCustom() { return this._customControlPoint_2; - }, + } setIsSrcControlPointCustom(isCustom) { this._customControlPoint_1 = isCustom; - }, + } setIsDestControlPointCustom(isCustom) { this._customControlPoint_2 = isCustom; - }, + } getControlPoints() { return [this._control1, this._control2]; - }, + } setFrom(x1, y1) { const change = this._x1 !== parseInt(x1, 10) || this._y1 !== parseInt(y1, 10); this._x1 = parseInt(x1, 10); this._y1 = parseInt(y1, 10); if (change) this._updatePath(); - }, + } setTo(x2, y2) { const change = this._x2 !== parseInt(x2, 10) || this._y2 !== parseInt(y2, 10); this._x2 = parseInt(x2, 10); this._y2 = parseInt(y2, 10); if (change) this._updatePath(); - }, + } getFrom() { return new Point(this._x1, this._y1); - }, + } getTo() { return new Point(this._x2, this._y2); - }, + } setStrokeWidth(width) { this._style['stroke-width'] = width; this._updateStyle(); - }, + } setColor(color) { this._style.stroke = color; this._style.fill = color; this._updateStyle(); - }, + } updateLine(avoidControlPointFix) { this._updatePath(avoidControlPointFix); - }, + } setLineStyle(style) { this._lineStyle = style; @@ -122,29 +121,29 @@ const CurvedLinePeer = new Class({ } this._updateStyle(); this.updateLine(); - }, + } getLineStyle() { return this._lineStyle; - }, + } setShowEndArrow(visible) { this._showEndArrow = visible; this.updateLine(); - }, + } isShowEndArrow() { return this._showEndArrow; - }, + } setShowStartArrow(visible) { this._showStartArrow = visible; this.updateLine(); - }, + } isShowStartArrow() { return this._showStartArrow; - }, + } _updatePath(avoidControlPointFix) { if ( @@ -163,7 +162,7 @@ const CurvedLinePeer = new Class({ }`; this._native.setAttribute('d', path); } - }, + } _updateStyle() { let style = ''; @@ -173,10 +172,10 @@ const CurvedLinePeer = new Class({ } } this._native.setAttribute('style', style); - }, + } // TODO: deduplicate this method, extracted from mindplot/src/components/util/Shape.js to avoid circular ref - _calculateDefaultControlPoints(srcPos, tarPos) { + static _calculateDefaultControlPoints(srcPos, tarPos) { const y = srcPos.y - tarPos.y; const x = srcPos.x - tarPos.x; const div = Math.abs(x) > 0.1 ? x : 0.1; // Prevent division by 0. @@ -197,11 +196,11 @@ const CurvedLinePeer = new Class({ new Point(-srcPos.x + x1, -srcPos.y + y1), new Point(-tarPos.x + x2, -tarPos.y + y2), ]; - }, + } _calculateAutoControlPoints(avoidControlPointFix) { // Both points available, calculate real points - const defaultpoints = this._calculateDefaultControlPoints( + const defaultpoints = CurvedLinePeer._calculateDefaultControlPoints( new Point(this._x1, this._y1), new Point(this._x2, this._y2), ); @@ -219,7 +218,7 @@ const CurvedLinePeer = new Class({ this._control2.x = defaultpoints[1].x; this._control2.y = defaultpoints[1].y; } - }, + } setDashed(length, spacing) { if ($defined(length) && $defined(spacing)) { @@ -227,7 +226,7 @@ const CurvedLinePeer = new Class({ } else { this._native.setAttribute('stroke-dasharray', ''); } - }, -}); + } +} export default CurvedLinePeer; diff --git a/packages/web2d/src/components/peer/svg/ElementPeer.js b/packages/web2d/src/components/peer/svg/ElementPeer.js index 120bb165..341b6ae4 100644 --- a/packages/web2d/src/components/peer/svg/ElementPeer.js +++ b/packages/web2d/src/components/peer/svg/ElementPeer.js @@ -20,8 +20,8 @@ import { $assert, $defined } from '@wisemapping/core-js'; import EventUtils from '../utils/EventUtils'; import TransformUtil from '../utils/TransformUtils'; -const ElementPeer = new Class({ - initialize(svgElement) { +class ElementPeer { + constructor(svgElement) { this._native = svgElement; if (!this._native.addEvent) { // Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811 @@ -35,11 +35,11 @@ const ElementPeer = new Class({ this._size = { width: 1, height: 1 }; this._changeListeners = {}; // http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm - }, + } setChildren(children) { this._children = children; - }, + } getChildren() { let result = this._children; @@ -48,28 +48,28 @@ const ElementPeer = new Class({ this._children = result; } return result; - }, + } getParent() { return this._parent; - }, + } setParent(parent) { this._parent = parent; - }, + } append(elementPeer) { // Store parent and child relationship. elementPeer.setParent(this); const children = this.getChildren(); - children.include(elementPeer); + children.push(elementPeer); // Append element as a child. this._native.appendChild(elementPeer._native); // Broadcast events ... EventUtils.broadcastChangeEvent(this, 'strokeStyle'); - }, + } removeChild(elementPeer) { // Store parent and child relationship. @@ -87,7 +87,7 @@ const ElementPeer = new Class({ // Append element as a child. this._native.removeChild(elementPeer._native); - }, + } /** * http://www.w3.org/TR/DOM-Level-3-Events/events.html @@ -95,19 +95,19 @@ const ElementPeer = new Class({ */ addEvent(type, listener) { $(this._native).bind(type, listener); - }, + } trigger(type, event) { $(this._native).trigger(type, event); - }, + } cloneEvents(from) { this._native.cloneEvents(from); - }, + } removeEvent(type, listener) { $(this._native).unbind(type, listener); - }, + } setSize(width, height) { if ($defined(width) && this._size.width !== parseInt(width, 10)) { @@ -121,11 +121,11 @@ const ElementPeer = new Class({ } EventUtils.broadcastChangeEvent(this, 'strokeStyle'); - }, + } getSize() { return { width: this._size.width, height: this._size.height }; - }, + } setFill(color, opacity) { if ($defined(color)) { @@ -134,13 +134,13 @@ const ElementPeer = new Class({ if ($defined(opacity)) { this._native.setAttribute('fill-opacity', opacity); } - }, + } getFill() { const color = this._native.getAttribute('fill'); const opacity = this._native.getAttribute('fill-opacity'); return { color, opacity: Number(opacity) }; - }, + } getStroke() { const vmlStroke = this._native; @@ -154,7 +154,7 @@ const ElementPeer = new Class({ opacity, width, }; - }, + } setStroke(width, style, color, opacity) { if ($defined(width)) { @@ -165,7 +165,7 @@ const ElementPeer = new Class({ } if ($defined(style)) { // Scale the dash array in order to be equal to VML. In VML, stroke style doesn't scale. - const dashArrayPoints = this.__stokeStyleToStrokDasharray[style]; + const dashArrayPoints = ElementPeer.stokeStyleToStrokDasharray()[style]; const scale = 1 / TransformUtil.workoutScale(this).width; let strokeWidth = this._native.getAttribute('stroke-width'); @@ -187,19 +187,19 @@ const ElementPeer = new Class({ if ($defined(opacity)) { this._native.setAttribute('stroke-opacity', opacity); } - }, + } /* * style='visibility: visible' */ setVisibility(isVisible) { this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden'); - }, + } isVisible() { const visibility = this._native.getAttribute('visibility'); return !(visibility === 'hidden'); - }, + } updateStrokeStyle() { const strokeStyle = this._stokeStyle; @@ -208,7 +208,7 @@ const ElementPeer = new Class({ this.setStroke(null, strokeStyle); } } - }, + } attachChangeEventListener(type, listener) { const listeners = this.getChangeEventListeners(type); @@ -216,7 +216,7 @@ const ElementPeer = new Class({ throw new Error('Listener can not be null'); } listeners.push(listener); - }, + } getChangeEventListeners(type) { let listeners = this._changeListeners[type]; @@ -225,35 +225,38 @@ const ElementPeer = new Class({ this._changeListeners[type] = listeners; } return listeners; - }, + } /** * Move element to the front */ moveToFront() { this._native.parentNode.appendChild(this._native); - }, + } /** * Move element to the back */ moveToBack() { this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild); - }, + } setCursor(type) { this._native.style.cursor = type; - }, -}); + } -ElementPeer.prototype.svgNamespace = 'http://www.w3.org/2000/svg'; -ElementPeer.prototype.linkNamespace = 'http://www.w3.org/1999/xlink'; -ElementPeer.prototype.__stokeStyleToStrokDasharray = { - solid: [], - dot: [1, 3], - dash: [4, 3], - longdash: [10, 2], - dashdot: [5, 3, 1, 3], -}; + static stokeStyleToStrokDasharray() { + return { + solid: [], + dot: [1, 3], + dash: [4, 3], + longdash: [10, 2], + dashdot: [5, 3, 1, 3], + }; + } +} + +ElementPeer.svgNamespace = 'http://www.w3.org/2000/svg'; +ElementPeer.linkNamespace = 'http://www.w3.org/1999/xlink'; export default ElementPeer; diff --git a/packages/web2d/src/components/peer/svg/ElipsePeer.js b/packages/web2d/src/components/peer/svg/ElipsePeer.js index 39a6c72d..03a5821e 100644 --- a/packages/web2d/src/components/peer/svg/ElipsePeer.js +++ b/packages/web2d/src/components/peer/svg/ElipsePeer.js @@ -18,17 +18,16 @@ import { $defined } from '@wisemapping/core-js'; import ElementPeer from './ElementPeer'; -const ElipsePeer = new Class({ - Extends: ElementPeer, - initialize() { - const svgElement = window.document.createElementNS(this.svgNamespace, 'ellipse'); - this.parent(svgElement); +class ElipsePeer extends ElementPeer { + constructor() { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'ellipse'); + super(svgElement); this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle); this._position = { x: 0, y: 0 }; - }, + } setSize(width, height) { - this.parent(width, height); + super.setSize(width, height); if ($defined(width)) { this._native.setAttribute('rx', width / 2); } @@ -39,7 +38,7 @@ const ElipsePeer = new Class({ const pos = this.getPosition(); this.setPosition(pos.x, pos.y); - }, + } setPosition(pcx, pcy) { const size = this.getSize(); @@ -54,11 +53,11 @@ const ElipsePeer = new Class({ if ($defined(cy)) { this._native.setAttribute('cy', cy); } - }, + } getPosition() { return this._position; - }, -}); + } +} export default ElipsePeer; diff --git a/packages/web2d/src/components/peer/svg/Font.js b/packages/web2d/src/components/peer/svg/Font.js index 0be3ee2c..a9ee7ca2 100644 --- a/packages/web2d/src/components/peer/svg/Font.js +++ b/packages/web2d/src/components/peer/svg/Font.js @@ -17,12 +17,12 @@ */ import { $defined } from '@wisemapping/core-js'; -const Font = new Class({ - initialize() { +class Font { + constructor() { this._size = 10; this._style = 'normal'; this._weight = 'normal'; - }, + } init(args) { if ($defined(args.size)) { @@ -34,7 +34,7 @@ const Font = new Class({ if ($defined(args.weight)) { this._weight = args.weight; } - }, + } getHtmlSize(scale) { let result = 0; @@ -50,35 +50,35 @@ const Font = new Class({ } return result; - }, + } getGraphSize() { return (this._size * 43) / 32; - }, + } getSize() { return parseInt(this._size, 10); - }, + } getStyle() { return this._style; - }, + } getWeight() { return this._weight; - }, + } setSize(size) { this._size = size; - }, + } setStyle(style) { this._style = style; - }, + } setWeight(weight) { this._weight = weight; - }, + } getWidthMargin() { let result = 0; @@ -86,7 +86,7 @@ const Font = new Class({ result = 4; } return result; - }, -}); + } +} export default Font; diff --git a/packages/web2d/src/components/peer/svg/GroupPeer.js b/packages/web2d/src/components/peer/svg/GroupPeer.js index 4d7ff075..005b6039 100644 --- a/packages/web2d/src/components/peer/svg/GroupPeer.js +++ b/packages/web2d/src/components/peer/svg/GroupPeer.js @@ -19,17 +19,16 @@ import { $defined } from '@wisemapping/core-js'; import ElementPeer from './ElementPeer'; import EventUtils from '../utils/EventUtils'; -const GroupPeer = new Class({ - Extends: ElementPeer, - initialize() { - const svgElement = window.document.createElementNS(this.svgNamespace, 'g'); - this.parent(svgElement); +class GroupPeer extends ElementPeer { + constructor() { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'g'); + super(svgElement); this._native.setAttribute('preserveAspectRatio', 'none'); this._coordSize = { width: 1, height: 1 }; this._native.setAttribute('focusable', 'true'); this._position = { x: 0, y: 0 }; this._coordOrigin = { x: 0, y: 0 }; - }, + } setCoordSize(width, height) { const change = this._coordSize.width !== width || this._coordSize.height !== height; @@ -40,11 +39,11 @@ const GroupPeer = new Class({ this.updateTransform(); } EventUtils.broadcastChangeEvent(this, 'strokeStyle'); - }, + } getCoordSize() { return { width: this._coordSize.width, height: this._coordSize.height }; - }, + } /** * http://www.w3.org/TR/SVG/coords.html#TransformAttribute @@ -93,11 +92,11 @@ const GroupPeer = new Class({ sy = Number.isNaN(sy) ? 0 : sy; this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`); - }, + } setOpacity(value) { this._native.setAttribute('opacity', value); - }, + } setCoordOrigin(x, y) { const change = x !== this._coordOrigin.x || y !== this._coordOrigin.y; @@ -111,15 +110,15 @@ const GroupPeer = new Class({ if (change) { this.updateTransform(); } - }, + } setSize(width, height) { const change = width !== this._size.width || height !== this._size.height; - this.parent(width, height); + super.setSize(width, height); if (change) { this.updateTransform(); } - }, + } setPosition(x, y) { const change = x !== this._position.x || y !== this._position.y; @@ -133,20 +132,20 @@ const GroupPeer = new Class({ if (change) { this.updateTransform(); } - }, + } getPosition() { return { x: this._position.x, y: this._position.y }; - }, + } append(child) { - this.parent(child); + super.append(child); EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize'); - }, + } getCoordOrigin() { return { x: this._coordOrigin.x, y: this._coordOrigin.y }; - }, -}); + } +} export default GroupPeer; diff --git a/packages/web2d/src/components/peer/svg/ImagePeer.js b/packages/web2d/src/components/peer/svg/ImagePeer.js index 6b44fda8..f32ed928 100644 --- a/packages/web2d/src/components/peer/svg/ImagePeer.js +++ b/packages/web2d/src/components/peer/svg/ImagePeer.js @@ -17,34 +17,33 @@ */ import ElementPeer from './ElementPeer'; -const ImagePeer = new Class({ - Extends: ElementPeer, - initialize() { - const svgElement = window.document.createElementNS(this.svgNamespace, 'image'); - this.parent(svgElement); +class ImagePeer extends ElementPeer { + constructor() { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'image'); + super(svgElement); this._position = { x: 0, y: 0 }; this._href = ''; this._native.setAttribute('preserveAspectRatio', 'none'); - }, + } setPosition(x, y) { this._position = { x, y }; this._native.setAttribute('y', y); this._native.setAttribute('x', x); - }, + } getPosition() { return this._position; - }, + } setHref(url) { - this._native.setAttributeNS(this.linkNamespace, 'href', url); + this._native.setAttributeNS(ElementPeer.linkNamespace, 'href', url); this._href = url; - }, + } getHref() { return this._href; - }, -}); + } +} export default ImagePeer; diff --git a/packages/web2d/src/components/peer/svg/LinePeer.js b/packages/web2d/src/components/peer/svg/LinePeer.js index 17074dba..3ea0a1e1 100644 --- a/packages/web2d/src/components/peer/svg/LinePeer.js +++ b/packages/web2d/src/components/peer/svg/LinePeer.js @@ -19,39 +19,39 @@ import { $defined } from '@wisemapping/core-js'; import ElementPeer from './ElementPeer'; import Point from '../../Point'; -const LinePeer = new Class({ - Extends: ElementPeer, - initialize() { - const svgElement = window.document.createElementNS(this.svgNamespace, 'line'); - this.parent(svgElement); +class LinePeer extends ElementPeer { + constructor() { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'line'); + super(svgElement); this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle); - }, + } setFrom(x1, y1) { this._x1 = x1; this._y1 = y1; this._native.setAttribute('x1', x1); this._native.setAttribute('y1', y1); - }, + } setTo(x2, y2) { this._x2 = x2; this._y2 = y2; this._native.setAttribute('x2', x2); this._native.setAttribute('y2', y2); - }, + } getFrom() { return new Point(this._x1, this._y1); - }, + } getTo() { return new Point(this._x2, this._y2); - }, + } /* * http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end */ + // eslint-disable-next-line class-methods-use-this setArrowStyle(startStyle, endStyle) { if ($defined(startStyle)) { // Todo: This must be implemented ... @@ -60,7 +60,7 @@ const LinePeer = new Class({ if ($defined(endStyle)) { // Todo: This must be implemented ... } - }, -}); + } +} export default LinePeer; diff --git a/packages/web2d/src/components/peer/svg/PolyLinePeer.js b/packages/web2d/src/components/peer/svg/PolyLinePeer.js index 2c55eb81..36852b86 100644 --- a/packages/web2d/src/components/peer/svg/PolyLinePeer.js +++ b/packages/web2d/src/components/peer/svg/PolyLinePeer.js @@ -19,43 +19,42 @@ import { $defined } from '@wisemapping/core-js'; import * as PolyLineUtils from '../utils/PolyLineUtils'; import ElementPeer from './ElementPeer'; -const PolyLinePeer = new Class({ - Extends: ElementPeer, - initialize() { - const svgElement = window.document.createElementNS(this.svgNamespace, 'polyline'); - this.parent(svgElement); +class PolyLinePeer extends ElementPeer { + constructor() { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'polyline'); + super(svgElement); this.setFill('none'); this.breakDistance = 10; - }, + } setFrom(x1, y1) { this._x1 = x1; this._y1 = y1; this._updatePath(); - }, + } setTo(x2, y2) { this._x2 = x2; this._y2 = y2; this._updatePath(); - }, + } setStrokeWidth(width) { this._native.setAttribute('stroke-width', width); - }, + } setColor(color) { this._native.setAttribute('stroke', color); - }, + } setStyle(style) { this._style = style; this._updatePath(); - }, + } getStyle() { return this._style; - }, + } _updatePath() { if (this._style === 'Curved') { @@ -65,7 +64,7 @@ const PolyLinePeer = new Class({ } else { this._updateCurvePath(); } - }, + } _updateStraightPath() { if ( @@ -84,7 +83,7 @@ const PolyLinePeer = new Class({ ); this._native.setAttribute('points', path); } - }, + } _updateMiddleCurvePath() { const x1 = this._x1; @@ -112,7 +111,7 @@ const PolyLinePeer = new Class({ } ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`; this._native.setAttribute('points', path); } - }, + } _updateCurvePath() { if ( @@ -131,7 +130,7 @@ const PolyLinePeer = new Class({ ); this._native.setAttribute('points', path); } - }, -}); + } +} export default PolyLinePeer; diff --git a/packages/web2d/src/components/peer/svg/RectPeer.js b/packages/web2d/src/components/peer/svg/RectPeer.js index 6e53bffe..71e224af 100644 --- a/packages/web2d/src/components/peer/svg/RectPeer.js +++ b/packages/web2d/src/components/peer/svg/RectPeer.js @@ -21,14 +21,13 @@ import ElementPeer from './ElementPeer'; /** * http://www.w3.org/TR/SVG/shapes.html#RectElement */ -const RectPeer = new Class({ - Extends: ElementPeer, - initialize(arc) { - const svgElement = window.document.createElementNS(this.svgNamespace, 'rect'); - this.parent(svgElement); +class RectPeer extends ElementPeer { + constructor(arc) { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'rect'); + super(svgElement); this._arc = arc; this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle); - }, + } setPosition(x, y) { if ($defined(x)) { @@ -37,17 +36,16 @@ const RectPeer = new Class({ if ($defined(y)) { this._native.setAttribute('y', parseInt(y, 10)); } - }, + } getPosition() { const x = this._native.getAttribute('x'); const y = this._native.getAttribute('y'); return { x: parseInt(x, 10), y: parseInt(y, 10) }; - }, + } setSize(width, height) { - this.parent(width, height); - + super.setSize(width, height); const min = width < height ? width : height; if ($defined(this._arc)) { // Transform percentages to SVG format. @@ -55,7 +53,7 @@ const RectPeer = new Class({ this._native.setAttribute('rx', arc); this._native.setAttribute('ry', arc); } - }, -}); + } +} export default RectPeer; diff --git a/packages/web2d/src/components/peer/svg/TahomaFont.js b/packages/web2d/src/components/peer/svg/TahomaFont.js index b9f76135..a998b906 100644 --- a/packages/web2d/src/components/peer/svg/TahomaFont.js +++ b/packages/web2d/src/components/peer/svg/TahomaFont.js @@ -17,20 +17,20 @@ */ import Font from './Font'; -const TahomaFont = new Class({ - Extends: Font, - initialize() { - this.parent(); +class TahomaFont extends Font { + constructor() { + super(); this._fontFamily = 'tahoma'; - }, + } getFontFamily() { return this._fontFamily; - }, + } + // eslint-disable-next-line class-methods-use-this getFont() { return Font.TAHOMA; - }, -}); + } +} export default TahomaFont; diff --git a/packages/web2d/src/components/peer/svg/TextPeer.js b/packages/web2d/src/components/peer/svg/TextPeer.js index 298c8f11..4bb62bd8 100644 --- a/packages/web2d/src/components/peer/svg/TextPeer.js +++ b/packages/web2d/src/components/peer/svg/TextPeer.js @@ -19,27 +19,26 @@ import { $defined } from '@wisemapping/core-js'; import $ from '@libraries/jquery-2.1.0'; import ElementPeer from './ElementPeer'; -const TextPeer = new Class({ - Extends: ElementPeer, - initialize(Font) { +class TextPeer extends ElementPeer { + constructor(Font) { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'text'); + super(svgElement); this.Font = Font; - const svgElement = window.document.createElementNS(this.svgNamespace, 'text'); - this.parent(svgElement); this._position = { x: 0, y: 0 }; this._font = new Font('Arial', this); - }, + } append(element) { this._native.appendChild(element._native); - }, + } setTextAlignment(align) { this._textAlign = align; - }, + } getTextAlignment() { return $defined(this._textAlign) ? this._textAlign : 'left'; - }, + } setText(text) { // Remove all previous nodes ... @@ -61,11 +60,11 @@ const TextPeer = new Class({ me._native.appendChild(tspan); }); } - }, + } getText() { return this._text; - }, + } setPosition(x, y) { this._position = { x, y }; @@ -74,15 +73,15 @@ const TextPeer = new Class({ // tspan must be positioned manually. $(this._native).children('tspan').attr('x', x); - }, + } getPosition() { return this._position; - }, + } getNativePosition() { return $(this._native).position(); - }, + } setFont(font, size, style, weight) { if ($defined(font)) { @@ -98,41 +97,41 @@ const TextPeer = new Class({ this._font.setSize(size); } this._updateFontStyle(); - }, + } _updateFontStyle() { this._native.setAttribute('font-family', this._font.getFontFamily()); this._native.setAttribute('font-size', this._font.getGraphSize()); this._native.setAttribute('font-style', this._font.getStyle()); this._native.setAttribute('font-weight', this._font.getWeight()); - }, + } setColor(color) { this._native.setAttribute('fill', color); - }, + } getColor() { return this._native.getAttribute('fill'); - }, + } setTextSize(size) { this._font.setSize(size); this._updateFontStyle(); - }, + } setContentSize(width, height) { this._native.xTextSize = `${width.toFixed(1)},${height.toFixed(1)}`; - }, + } setStyle(style) { this._font.setStyle(style); this._updateFontStyle(); - }, + } setWeight(weight) { this._font.setWeight(weight); this._updateFontStyle(); - }, + } setFontFamily(family) { const oldFont = this._font; @@ -141,7 +140,7 @@ const TextPeer = new Class({ this._font.setStyle(oldFont.getStyle()); this._font.setWeight(oldFont.getWeight()); this._updateFontStyle(); - }, + } getFont() { return { @@ -150,12 +149,12 @@ const TextPeer = new Class({ style: this._font.getStyle(), weight: this._font.getWeight(), }; - }, + } setSize(size) { this._font.setSize(size); this._updateFontStyle(); - }, + } getWidth() { let computedWidth; @@ -170,13 +169,14 @@ const TextPeer = new Class({ computedWidth = bbox.width; } } catch (e) { + console.error(e); computedWidth = 10; } let width = parseInt(computedWidth, 10); width += this._font.getWidthMargin(); return width; - }, + } getHeight() { // Firefox hack for this @@ -188,11 +188,11 @@ const TextPeer = new Class({ computedHeight = 10; } return parseInt(computedHeight, 10); - }, + } getHtmlFontSize() { return this._font.getHtmlSize(); - }, -}); + } +} export default TextPeer; diff --git a/packages/web2d/src/components/peer/svg/TimesFont.js b/packages/web2d/src/components/peer/svg/TimesFont.js index 5daffcc0..d0c31acb 100644 --- a/packages/web2d/src/components/peer/svg/TimesFont.js +++ b/packages/web2d/src/components/peer/svg/TimesFont.js @@ -17,20 +17,20 @@ */ import Font from './Font'; -const TimesFont = new Class({ - Extends: Font, - initialize() { - this.parent(); +class TimesFont extends Font { + constructor() { + super(); this._fontFamily = 'times'; - }, + } getFontFamily() { return this._fontFamily; - }, + } + // eslint-disable-next-line class-methods-use-this getFont() { return Font.TIMES; - }, -}); + } +} export default TimesFont; diff --git a/packages/web2d/src/components/peer/svg/VerdanaFont.js b/packages/web2d/src/components/peer/svg/VerdanaFont.js index 866be5f5..d14d97a7 100644 --- a/packages/web2d/src/components/peer/svg/VerdanaFont.js +++ b/packages/web2d/src/components/peer/svg/VerdanaFont.js @@ -17,20 +17,20 @@ */ import Font from './Font'; -const VerdanaFont = new Class({ - Extends: Font, - initialize() { - this.parent(); +class VerdanaFont extends Font { + constructor() { + super(); this._fontFamily = 'verdana'; - }, + } getFontFamily() { return this._fontFamily; - }, + } + // eslint-disable-next-line class-methods-use-this getFont() { return Font.VERDANA; - }, -}); + } +} export default VerdanaFont; diff --git a/packages/web2d/src/components/peer/svg/WorkspacePeer.js b/packages/web2d/src/components/peer/svg/WorkspacePeer.js index 5958bb0a..21201dcc 100644 --- a/packages/web2d/src/components/peer/svg/WorkspacePeer.js +++ b/packages/web2d/src/components/peer/svg/WorkspacePeer.js @@ -19,16 +19,15 @@ import { $defined } from '@wisemapping/core-js'; import ElementPeer from './ElementPeer'; import EventUtils from '../utils/EventUtils'; -const WorkspacePeer = new Class({ - Extends: ElementPeer, - initialize(element) { +class WorkspacePeer extends ElementPeer { + constructor(element) { + const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'svg'); + super(svgElement); this._element = element; - const svgElement = window.document.createElementNS(this.svgNamespace, 'svg'); - this.parent(svgElement); this._native.setAttribute('focusable', 'true'); - this._native.setAttribute('id', 'workspace'); + // this._native.setAttribute('id', 'workspace'); this._native.setAttribute('preserveAspectRatio', 'none'); - }, + } /** * http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox attribute @@ -67,7 +66,7 @@ const WorkspacePeer = new Class({ this._native.setAttribute('viewBox', coords.join(' ')); this._native.setAttribute('preserveAspectRatio', 'none'); EventUtils.broadcastChangeEvent(this, 'strokeStyle'); - }, + } getCoordSize() { const viewBox = this._native.getAttribute('viewBox'); @@ -76,7 +75,7 @@ const WorkspacePeer = new Class({ coords = viewBox.split(/ /); } return { width: coords[2], height: coords[3] }; - }, + } setCoordOrigin(x, y) { const viewBox = this._native.getAttribute('viewBox'); @@ -96,12 +95,12 @@ const WorkspacePeer = new Class({ } this._native.setAttribute('viewBox', coords.join(' ')); - }, + } append(child) { - this.parent(child); + super.append(child); EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize'); - }, + } getCoordOrigin() { const viewBox = this._native.getAttribute('viewBox'); @@ -112,11 +111,12 @@ const WorkspacePeer = new Class({ const x = parseFloat(coords[0]); const y = parseFloat(coords[1]); return { x, y }; - }, + } + // eslint-disable-next-line class-methods-use-this getPosition() { return { x: 0, y: 0 }; - }, -}); + } +} export default WorkspacePeer; diff --git a/packages/web2d/src/components/peer/utils/PolyLineUtils.js b/packages/web2d/src/components/peer/utils/PolyLineUtils.js index 9594cf0f..f709ba39 100644 --- a/packages/web2d/src/components/peer/utils/PolyLineUtils.js +++ b/packages/web2d/src/components/peer/utils/PolyLineUtils.js @@ -1,3 +1,20 @@ +/* + * 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. + */ export const buildCurvedPath = (dist, x1, y1, x2, y2) => { let signx = 1; let signy = 1; diff --git a/packages/web2d/src/index.js b/packages/web2d/src/index.js new file mode 100644 index 00000000..a0bf3975 --- /dev/null +++ b/packages/web2d/src/index.js @@ -0,0 +1,47 @@ +/* + * 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 Workspace from './components/Workspace'; +import Toolkit from './components/Toolkit'; +import Elipse from './components/Elipse'; +import Line from './components/Line'; +import PolyLine from './components/PolyLine'; +import CurvedLine from './components/CurvedLine'; +import Arrow from './components/Arrow'; +import Group from './components/Group'; +import Rect from './components/Rect'; +import Text from './components/Text'; +import Font from './components/Font'; +import Point from './components/Point'; +import Image from './components/Image'; + +export { + Arrow, + CurvedLine, + Elipse, + Font, + Group, + Image, + Line, + Point, + PolyLine, + Rect, + Text, + Toolkit, + Workspace, +}; diff --git a/packages/web2d/src/web2d.js b/packages/web2d/src/web2d.js deleted file mode 100644 index dbc3d970..00000000 --- a/packages/web2d/src/web2d.js +++ /dev/null @@ -1,41 +0,0 @@ -import '@libraries/mootools-core-1.4.5'; - -// Utils -import eventUtils from '@utils/EventUtils'; -import transformUtils from '@utils/TransformUtils'; - -// Import Components -import workspace from '@components/Workspace'; -import toolkit from '@components/Toolkit'; -import elipse from '@components/Elipse'; -import line from '@components/Line'; -import polyLine from '@components/PolyLine'; -import curvedLine from '@components/CurvedLine'; -import arrow from '@components/Arrow'; -import group from '@components/Group'; -import rect from '@components/Rect'; -import text from '@components/Text'; -import font from '@components/Font'; -import point from '@components/Point'; -import image from '@components/Image'; - -export default { - // Utils - EventUtils: eventUtils, - TransformUtils: transformUtils, - - // Components - Arrow: arrow, - CurvedLine: curvedLine, - Elipse: elipse, - Font: font, - Group: group, - Image: image, - Line: line, - Point: point, - PolyLine: polyLine, - Rect: rect, - Text: text, - Toolkit: toolkit, - Workspace: workspace, -}; diff --git a/packages/web2d/test/playground/Grid.js b/packages/web2d/test/playground/Grid.js new file mode 100755 index 00000000..b4091eaa --- /dev/null +++ b/packages/web2d/test/playground/Grid.js @@ -0,0 +1,63 @@ +/* + * 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 $ from '@libraries/jquery-2.1.0'; + +class Grid { + constructor(parent, colums, rows) { + const cellSize = '10px'; + this._parent = parent; + this._container = Grid._createContainer(); + const tbody = $(this._container.firstChild.firstChild); + for (let i = 0; i < rows; i++) { + const trElement = $(''); + for (let j = 0; j < colums; j++) { + const tdElement = $(''); + tdElement.css({ + width: cellSize, + height: cellSize, + borderWidth: '1px', + borderStyle: 'dashed', + borderColor: 'lightsteelblue', + }); + trElement.append(tdElement); + } + tbody.append(trElement); + } + } + + setPosition(x, y) { + this._container.style.left = x; + this._container.style.top = y; + } + + render() { + $(this._parent).append(this._container); + } + + static _createContainer() { + const result = window.document.createElement('div'); + result.style.tableLayout = 'fixed'; + result.style.borderCollapse = 'collapse'; + result.style.emptyCells = 'show'; + result.style.position = 'absolute'; + result.innerHTML = '
'; + return result; + } +} + +export default Grid ; diff --git a/packages/web2d/test/playground/arrow.html b/packages/web2d/test/playground/arrow.html index 2e71fa06..2c5c41ab 100644 --- a/packages/web2d/test/playground/arrow.html +++ b/packages/web2d/test/playground/arrow.html @@ -9,46 +9,10 @@ border: 1px solid black; } - - - - - +

PolyLines Render Tests

- @@ -63,15 +27,6 @@ - - - - -
- This is how multiple childs will look in each style line - -
-
diff --git a/packages/web2d/test/playground/arrow.js b/packages/web2d/test/playground/arrow.js new file mode 100644 index 00000000..7f3ac3fa --- /dev/null +++ b/packages/web2d/test/playground/arrow.js @@ -0,0 +1,22 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Arrow, Point, +} from '../../src'; + +Toolkit.init(); + +const overflowWorkspace = new Workspace({ fillColor: 'green' }); +overflowWorkspace.setSize('200px', '200px'); +const arrow = new Arrow(); +arrow.setFrom(50, 50); +arrow.setControlPoint(new Point(-50, 0)); + +overflowWorkspace.append(arrow); + +const arrow2 = new Arrow(); +arrow2.setFrom(100, 50); +arrow2.setControlPoint(new Point(50, 50)); + +overflowWorkspace.append(arrow2); + +overflowWorkspace.addItAsChildTo($('#overflowExample').first()); diff --git a/packages/web2d/test/playground/context-loader.js b/packages/web2d/test/playground/context-loader.js deleted file mode 100644 index f80a203e..00000000 --- a/packages/web2d/test/playground/context-loader.js +++ /dev/null @@ -1,8 +0,0 @@ -import Grid from './utils'; -import web2d from '../../src/web2d'; -import $ from '@libraries/jquery-2.1.0'; - -global.Grid = Grid; -global.web2d = web2d; -global.$ = $; - diff --git a/packages/web2d/test/playground/curvedLine.html b/packages/web2d/test/playground/curvedLine.html index c78f37d0..e4f42df6 100644 --- a/packages/web2d/test/playground/curvedLine.html +++ b/packages/web2d/test/playground/curvedLine.html @@ -9,47 +9,9 @@ border: 1px solid black; } - - - +

PolyLines Render Tests

@@ -67,15 +29,6 @@ - - - This is how multiple childs will look in each style line - - -
- - - diff --git a/packages/web2d/test/playground/curvedLine.js b/packages/web2d/test/playground/curvedLine.js new file mode 100644 index 00000000..68efc807 --- /dev/null +++ b/packages/web2d/test/playground/curvedLine.js @@ -0,0 +1,26 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, CurvedLine, Point, +} from '../../src'; + +Toolkit.init(); + +const overflowWorkspace = new Workspace({ fillColor: 'green' }); +overflowWorkspace.setSize('400px', '400px'); +const line1 = new CurvedLine(); +line1.setStyle(CurvedLine.SIMPLE_LINE); +line1.setFrom(200, 200); +line1.setTo(100, 100); +line1.setSrcControlPoint(new Point(-100, 0)); +line1.setDestControlPoint(new Point(100, 0)); +overflowWorkspace.append(line1); + +const line2 = new CurvedLine(); +line2.setStyle(CurvedLine.NICE_LINE); +line2.setFrom(0, 0); +line2.setTo(150, 90); +line2.setSrcControlPoint(new Point(100, 0)); +line2.setDestControlPoint(new Point(-100, 0)); +overflowWorkspace.append(line2); + +overflowWorkspace.addItAsChildTo($('#overflowExample').first()); \ No newline at end of file diff --git a/packages/web2d/test/playground/events.html b/packages/web2d/test/playground/events.html index 7f23d389..0f2a5839 100755 --- a/packages/web2d/test/playground/events.html +++ b/packages/web2d/test/playground/events.html @@ -1,5 +1,4 @@ - @@ -8,136 +7,14 @@ td { border: 1px solid black; } - - - - - - - +

Elements Event Handling

@@ -273,4 +150,4 @@
- + \ No newline at end of file diff --git a/packages/web2d/test/playground/events.js b/packages/web2d/test/playground/events.js new file mode 100644 index 00000000..1094ece8 --- /dev/null +++ b/packages/web2d/test/playground/events.js @@ -0,0 +1,107 @@ +/* eslint-disable no-alert */ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Elipse, +} from '../../src'; + +global.$ = $; + +function EventLogger(type, element) { + this._enable = false; + this._element = element; + this._type = type; + this._listener = function logger() { + const oldColor = element.getAttribute('fillColor'); + element.setFill('yellow'); + + alert(`Event on:${element.getType()}, Type:${type}`); + element.setFill(oldColor); + }; +} + +EventLogger.prototype.changeState = function changeState() { + this._enable = !this._enable; + if (this._enable) { + this._element.addEvent(this._type, this._listener); + } else { + this._element.removeEvent(this._type, this._listener); + } + return this._enable; +}; + +function MultipleEventHandler(type, element) { + this._listeners = []; + this._type = type; + this._element = element; +} + +MultipleEventHandler.prototype.registerOneListener = function registerOneListener() { + const count = this._listeners.length; + const listener = () => { + alert(`Listener #:${count}`); + }; + this._listeners.push(listener); + this._element.addEvent(this._type, listener); +}; + +MultipleEventHandler.prototype.listenerCount = function listenerCount() { + return this._listeners.length; +}; + +MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneListener() { + if (this._listeners.length > 0) { + const listener = this._listeners.pop(); + this._element.removeEvent(this._type, listener); + } +}; + +Toolkit.init(); + +// Workspace with CoordOrigin(100,100); +const workspace = new Workspace(); +workspace.setSize('150px', '150px'); +workspace.setCoordSize(150, 150); + +const bigElipse = new Elipse(); +bigElipse.setSize(100, 100); +bigElipse.setPosition(75, 75); +workspace.append(bigElipse); + +const smallElipse = new Elipse(); +smallElipse.setSize(50, 50); +smallElipse.setPosition(75, 75); +smallElipse.setFill('red'); +workspace.append(smallElipse); + +global.wClickEventLogger = new EventLogger('click', workspace); +global.wMouseoverEventLogger = new EventLogger('mouseover', workspace); +global.wMouseoutEventLogger = new EventLogger('mouseout', workspace); +global.wMousemoveEventLogger = new EventLogger('mousemove', workspace); +global.wDblCickEventLogger = new EventLogger('dblclick', workspace); + +global.esClickEventLogger = new EventLogger('click', smallElipse); +global.esMouseoverEventLogger = new EventLogger('mouseover', smallElipse); +global.esMouseoutEventLogger = new EventLogger('mouseout', smallElipse); +global.esMousemoveEventLogger = new EventLogger('mousemove', smallElipse); +global.esDblCickEventLogger = new EventLogger('dblclick', smallElipse); + +global.ebClickEventLogger = new EventLogger('click', bigElipse); +global.ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse); +global.ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse); +global.ebousemoveEventLogger = new EventLogger('mousemove', bigElipse); +global.ebblCickEventLogger = new EventLogger('dblclick', bigElipse); + +workspace.addItAsChildTo($('#workspaceContainer').first()); + +const mEventWorkspace = new Workspace(); +mEventWorkspace.setSize('150px', '150px'); +mEventWorkspace.setCoordSize(150, 150); + +const elipse = new Elipse(); +elipse.setSize(100, 100); +elipse.setPosition(75, 75); +elipse.setFill('blue'); +mEventWorkspace.append(elipse); + +mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first()); +global.multipleHandler = new MultipleEventHandler('click', elipse); diff --git a/packages/web2d/test/playground/font.html b/packages/web2d/test/playground/font.html index 2ae8762f..e28bded7 100644 --- a/packages/web2d/test/playground/font.html +++ b/packages/web2d/test/playground/font.html @@ -1,7 +1,5 @@ - - - - - - - - +

Web2d Fonts Tests

- diff --git a/packages/web2d/test/playground/font.js b/packages/web2d/test/playground/font.js new file mode 100644 index 00000000..3234210b --- /dev/null +++ b/packages/web2d/test/playground/font.js @@ -0,0 +1,57 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Text, +} from '../../src'; + +global.$ = $; + +function multiline(text, family, elemId) { + const workspace = new Workspace(); + workspace.setSize('200px', '240px'); + workspace.setCoordSize('200', '240'); + workspace.setCoordOrigin(0, 0); + + [6, 8, 10, 15].forEach((size, i) => { + const wText = new Text(); + workspace.append(wText); + + wText.setText(text); + wText.setFont(family, size, 'bold'); + wText.setPosition(30, 50 * i); + wText.setColor('blue'); + }); + + workspace.addItAsChildTo($(`#${elemId}`)); +} + +function alignments(text, family, elemId) { + const overflowWorkspace = new Workspace(); + overflowWorkspace.setSize('260px', '240px'); + overflowWorkspace.setCoordSize('260', '240'); + overflowWorkspace.setCoordOrigin(0, 0); + + ['center', 'left', 'right'].forEach((align, i) => { + const wText = new Text(); + overflowWorkspace.append(wText); + + wText.setText(text); + wText.setFont(family, 8, 'bold'); + wText.setPosition(30, 80 * i); + wText.setColor('green'); + wText.setTextAlignment(align); + }); + + overflowWorkspace.addItAsChildTo($(`#${elemId}`)); +} + +Toolkit.init(); + +// Multine tests ... +['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => { + multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`); +}); + +// Multine tests and alingments .. ... +['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => { + alignments('This multine text.\nThis is the long line just because :)\nShort line', family, `amulti${i}`); +}); diff --git a/packages/web2d/test/playground/group.html b/packages/web2d/test/playground/group.html index 6ee85e13..93a12cbb 100755 --- a/packages/web2d/test/playground/group.html +++ b/packages/web2d/test/playground/group.html @@ -9,338 +9,11 @@ border: 1px solid black; } - - - - - -

Group Render Tests.

+ +

Group Render Tests

diff --git a/packages/web2d/test/playground/group.js b/packages/web2d/test/playground/group.js new file mode 100644 index 00000000..04399a57 --- /dev/null +++ b/packages/web2d/test/playground/group.js @@ -0,0 +1,304 @@ +/* eslint-disable no-alert */ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Line, Group, Elipse, +} from '../../src'; + +global.$ = $; + +Toolkit.init(); + +const basicTest = () => { + const workspace = new Workspace(); + workspace.setSize('150px', '150px'); + workspace.setCoordSize(100, 100); + + const group = new Group(); + group.setSize(50, 50); + group.setPosition(25, 50); + group.setCoordSize(200, 200); + group.setCoordOrigin(0, 0); + workspace.append(group); + + const elipse = new Elipse(); + elipse.setSize(200, 200); + elipse.setPosition(100, 100); + group.append(elipse); + + let line = new Line(); + line.setFrom(0, 0); + line.setTo(200, 200); + line.setStroke('blue'); + group.append(line); + + line = new Line(); + line.setFrom(200, 0); + line.setTo(0, 200); + line.setStroke('blue'); + group.append(line); + + workspace.addItAsChildTo($('#groupBasicContainer')); + + let xDir = 1; + let yDir = 1; + const executer = function () { + const y = group.getPosition().y + yDir; + const x = group.getPosition().x + xDir; + + if (x < 0) { + xDir = 1; + } else if (x > 50) { + xDir = -1; + } + + if (y < 0) { + yDir = 1; + } else if (y > 50) { + yDir = -1; + } + + // Logger.logMsg("Moving group x,y:"+ x + "," + y); + group.setPosition(x, y); + }; + // executer.periodical(100); +}; +basicTest(); + +const eventTest = () => { + const workspace = new Workspace(); + workspace.setSize('150px', '150px'); + workspace.setCoordSize(100, 100); + + const groupAttributes = { + width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0', + }; + const group = new Group(groupAttributes); + workspace.append(group); + + const elipseLeft = new Elipse(); + elipseLeft.setSize(200, 200); + elipseLeft.setPosition(200, 0); + group.append(elipseLeft); + + const elipseRight = new Elipse(); + elipseRight.setSize(200, 200); + elipseRight.setPosition(0, 0); + group.append(elipseRight); + + const listener = function listener() { + alert(`Click event on:${this.getType()}`); + }; + + group.addEvent('click', listener); + elipseLeft.addEvent('click', listener); + elipseRight.addEvent('click', listener); + + workspace.addItAsChildTo($('#groupEventsContainer')); +}; +eventTest(); + +const eventTest2 = () => { + const workspace = new Workspace(); + workspace.setSize('150px', '150px'); + workspace.setCoordSize(200, 200); + + const groupOuter = new Group(); + groupOuter.setSize(50, 50); + groupOuter.setPosition(25, 25); + groupOuter.setCoordSize(100, 100); + groupOuter.setCoordOrigin(0, 0); + workspace.append(groupOuter); + + const elipseOuter = new Elipse(); + elipseOuter.setSize(200, 200); + elipseOuter.setPosition(100, 100); + elipseOuter.setFill('red'); + groupOuter.append(elipseOuter); + + let line = new Line(); + line.setFrom(0, 0); + line.setTo(200, 200); + line.setStroke('red'); + groupOuter.append(line); + + line = new Line(); + line.setFrom(200, 0); + line.setTo(0, 200); + line.setStroke('red'); + groupOuter.append(line); + + const groupInner = new Group(); + groupInner.setSize(50, 50); + groupInner.setPosition(25, 25); + groupInner.setCoordSize(100, 100); + groupInner.setCoordOrigin(0, 0); + groupOuter.append(groupInner); + + const elipse = new Elipse(); + elipse.setSize(200, 200); + elipse.setPosition(100, 100); + groupInner.append(elipse); + + line = new Line(); + line.setFrom(0, 0); + line.setTo(200, 200); + line.setStroke('blue'); + groupInner.append(line); + + line = new Line(); + line.setFrom(200, 0); + line.setTo(0, 200); + line.setStroke('blue'); + groupInner.append(line); + + workspace.addItAsChildTo($('#groupNestedContainer')); +}; +eventTest2(); + +const workspaceCoordSizeSample = () => { + function groupSampleBuilder(width, height) { + // Group with CoordSize(50,50); + const workspace = new Workspace(); + workspace.setSize('100px', '100px'); + workspace.setCoordSize(100, 100); + + const elipseOuter = new Elipse(); + elipseOuter.setPosition(50, 50); + elipseOuter.setSize(50, 50); + workspace.append(elipseOuter); + + const group = new Group(); + group.setSize(50, 50); + group.setCoordSize(width, height); + group.setPosition(25, 25); + workspace.append(group); + + const elipseInner = new Elipse(); + elipseInner.setPosition(50, 50); + elipseInner.setSize(50, 50); + elipseInner.setFill('red'); + group.append(elipseInner); + + return workspace; + } + + const sample100x100 = groupSampleBuilder(100, 100); + sample100x100.addItAsChildTo($('#coordsizeExample100x100')); + + const sample100x200 = groupSampleBuilder(100, 200); + sample100x200.addItAsChildTo($('#coordsizeExample100x200')); + + const sample200x100 = groupSampleBuilder(200, 100); + sample200x100.addItAsChildTo($('#coordsizeExample200x100')); +}; +workspaceCoordSizeSample(); + +const workspaceCoordOriginSample = () => { + function groupSampleBuilder(x, y) { + const workspace = new Workspace(); + workspace.setSize('100px', '100px'); + workspace.setCoordSize(100, 100); + + const elipseOuter = new Elipse(); + elipseOuter.setPosition(50, 50); + elipseOuter.setSize(50, 50); + workspace.append(elipseOuter); + + const group = new Group(); + group.setSize(50, 50); + group.setCoordSize(100, 100); + group.setCoordOrigin(x, y); + group.setPosition(25, 25); + workspace.append(group); + + const elipseInner = new Elipse(); + elipseInner.setPosition(50, 50); + elipseInner.setSize(50, 50); + elipseInner.setFill('red'); + group.append(elipseInner); + + return workspace; + } + + const sample0x0 = groupSampleBuilder(0, 0); + sample0x0.addItAsChildTo($('#coordOriginExample0x0')); + + const sample100x200 = groupSampleBuilder(0, 50); + sample100x200.addItAsChildTo($('#coordOriginExample0x50')); + + const sample200x100 = groupSampleBuilder(50, 0); + sample200x100.addItAsChildTo($('#coordOriginExample50x0')); +}; +workspaceCoordOriginSample(); + +const groupVisibilitySample = () => { + const workspace = new Workspace(); + workspace.setSize('100px', '100px'); + workspace.setCoordSize(100, 100); + + const group = new Group(); + group.setSize(100, 100); + group.setPosition(0, 0); + group.setCoordSize(100, 100); + group.addEvent('mouseover', () => { + alert('Mouse Over Group'); + }); + workspace.append(group); + + const elipseOuter = new Elipse(); + elipseOuter.setPosition(50, 50); + elipseOuter.setSize(50, 50); + group.addEvent('mouseover', () => { + alert('Mouse Over elipseOuter'); + }); + group.append(elipseOuter); + + const elipseInner = new Elipse(); + elipseInner.setPosition(50, 50); + elipseInner.setSize(25, 25); + elipseInner.setFill('red'); + group.append(elipseInner); + + let isVisible = true; + const executer = function () { + isVisible = !isVisible; + group.setVisibility(isVisible); + }; + // executer.periodical(100); + workspace.addItAsChildTo($('#visibilityExample')); +}; +groupVisibilitySample(); + +const groupVisibilitySample2 = () => { + const workspace = new Workspace(); + workspace.setSize('100px', '100px'); + workspace.setCoordSize(100, 100); + + const group = new Group(); + group.setSize(100, 100); + group.setPosition(0, 0); + group.setCoordSize(100, 100); + workspace.append(group); + + const elipseOuter = new Elipse(); + elipseOuter.setPosition(50, 50); + elipseOuter.setSize(50, 50); + group.append(elipseOuter); + + const elipseInner = new Elipse(); + elipseInner.setPosition(50, 50); + elipseInner.setSize(25, 25); + elipseInner.setFill('red'); + group.append(elipseInner); + + let width = 10; + let height = 10; + const executer = function () { + width = (width + 10) % 100; + height = (height + 10) % 100; + group.setCoordSize(width, height); + }; + // executer.periodical(100); + workspace.addItAsChildTo($('#scaleStrokeExample')); +}; +groupVisibilitySample2(); diff --git a/packages/web2d/test/playground/index.html b/packages/web2d/test/playground/index.html index f8486595..161e95c8 100644 --- a/packages/web2d/test/playground/index.html +++ b/packages/web2d/test/playground/index.html @@ -4,12 +4,13 @@ - Testing + WiseMapping Web2D Playground
-

Testing

+

WiseMapping Web2D Playground

+

This is a list of the different Web2D components supported:

  • Arrow
  • Curved Line
    • diff --git a/packages/web2d/test/playground/line.html b/packages/web2d/test/playground/line.html index 310ff860..ad13c099 100755 --- a/packages/web2d/test/playground/line.html +++ b/packages/web2d/test/playground/line.html @@ -9,84 +9,9 @@ border: 1px solid black; } - - - - +

    Lines Render Tests

    diff --git a/packages/web2d/test/playground/line.js b/packages/web2d/test/playground/line.js new file mode 100644 index 00000000..fb5a5a33 --- /dev/null +++ b/packages/web2d/test/playground/line.js @@ -0,0 +1,67 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Line, Rect, +} from '../../src'; + +global.$ = $; + +Toolkit.init(); +const workspaceAttributes = { + width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc', +}; +const strokeWidthWorkspace = new Workspace(workspaceAttributes); + +const rect = new Rect(); +rect.setSize(10, 10); +rect.setStroke(0); +rect.setPosition(250, 5); +strokeWidthWorkspace.append(rect); + +for (let i = 0; i <= 10; i++) { + const line = new Line(); + line.setFrom(5 + (i * 25), 5); + line.setTo(5 + (i * 25), 45); + line.setAttribute('strokeWidth', i + 1); + strokeWidthWorkspace.append(line); +} +strokeWidthWorkspace.append(rect); + +strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample')); + +const strokeOpacityWorkspace = new Workspace(workspaceAttributes); +for (let i = 0; i < 10; i++) { + const line = new Line(); + line.setFrom(15 + (i * 25), 5); + line.setTo(3 + (i * 25), 45); + line.setAttribute('strokeWidth', 2); + line.setAttribute('strokeOpacity', 1 / (i + 1)); + line.setAttribute('strokeColor', 'red'); + strokeOpacityWorkspace.append(line); +} +strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample')); + +const strokeStyleWorkspace = new Workspace(workspaceAttributes); +const styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash']; +for (let i = 0; i < styles.length; i++) { + const line = new Line(); + line.setFrom(25 + (i * 30), 5); + line.setTo(13 + (i * 30), 45); + line.setAttribute('strokeWidth', 2); + line.setAttribute('strokeColor', 'red'); + line.setAttribute('strokeStyle', styles[i]); + strokeStyleWorkspace.append(line); +} +strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample')); + +const strokeArrowWorkspace = new Workspace(workspaceAttributes); +const styles2 = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron']; +for (let i = 0; i < styles.length; i++) { + const line = new Line(); + line.setFrom(25 + (i * 30), 5); + line.setTo(13 + (i * 30), 45); + line.setAttribute('strokeWidth', 2); + line.setAttribute('strokeColor', 'red'); + line.setArrowStyle(styles2[i]); + strokeArrowWorkspace.append(line); +} +strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample')); diff --git a/packages/web2d/test/playground/polyLine.html b/packages/web2d/test/playground/polyLine.html index c3868209..ac167dcd 100755 --- a/packages/web2d/test/playground/polyLine.html +++ b/packages/web2d/test/playground/polyLine.html @@ -9,159 +9,9 @@ border: 1px solid black; } - - - - - - +

    PolyLines Render Tests

diff --git a/packages/web2d/test/playground/polyLine.js b/packages/web2d/test/playground/polyLine.js new file mode 100644 index 00000000..a8999cde --- /dev/null +++ b/packages/web2d/test/playground/polyLine.js @@ -0,0 +1,67 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, PolyLine, +} from '../../src'; + +global.$ = $; +Toolkit.init(); + +let overflowWorkspace = new Workspace({ fillColor: 'green' }); +overflowWorkspace.setSize('100px', '100px'); + +const line = new PolyLine(); +line.setTo(165, 165); +line.setFrom(95, 95); +line.setStyle('Straight'); +line.setStroke('10'); +overflowWorkspace.append(line); + +overflowWorkspace.addItAsChildTo($('#overflowExample')); + +overflowWorkspace = new Workspace(); +overflowWorkspace.setSize('100px', '100px'); +let line1 = new PolyLine(); +line1.setFrom(95, 95); +line1.setTo(165, 165); +line1.setStyle('Curved'); +overflowWorkspace.append(line1); + +line1 = new PolyLine(); +line1.setFrom(95, 95); +line1.setTo(165, 135); +line1.setStyle('Curved'); +overflowWorkspace.append(line1); + +line1 = new PolyLine(); +line1.setFrom(95, 90); +line1.setTo(160, 20); +line1.setStyle('Straight'); +overflowWorkspace.append(line1); + +line1 = new PolyLine(); +line1.setFrom(95, 90); +line1.setTo(160, 50); +line1.setStyle('Straight'); +overflowWorkspace.append(line1); + +line1 = new PolyLine(); +line1.setFrom(90, 90); +line1.setTo(20, 20); +overflowWorkspace.append(line1); + +line1 = new PolyLine(); +line1.setFrom(90, 90); +line1.setTo(20, 50); +overflowWorkspace.append(line1); + +line1 = new PolyLine(); +line1.setFrom(90, 95); +line1.setTo(20, 165); +overflowWorkspace.append(line1); + +line1 = new PolyLine(); +line1.setFrom(90, 95); +line1.setTo(20, 135); +overflowWorkspace.append(line1); + +overflowWorkspace.addItAsChildTo($('#multipleLineExample')); diff --git a/packages/web2d/test/playground/prototype.html b/packages/web2d/test/playground/prototype.html index c091d9be..8fdf3bdc 100755 --- a/packages/web2d/test/playground/prototype.html +++ b/packages/web2d/test/playground/prototype.html @@ -8,152 +8,9 @@ border: 1px solid black; } - - - - +

Chart prototype Tests

diff --git a/packages/web2d/test/playground/prototype.js b/packages/web2d/test/playground/prototype.js new file mode 100644 index 00000000..a8f2b42a --- /dev/null +++ b/packages/web2d/test/playground/prototype.js @@ -0,0 +1,129 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Rect, Group, +} from '../../src'; + +global.$ = $; + +let xScale = 1000; +let yScale = 600; +let shapeOrigX = 0; + +Toolkit.init(); + +const workspace = new Workspace(); +workspace.setSize(`${xScale}px`, `${yScale}px`); +workspace.setCoordSize(xScale, yScale); +workspace.setCoordOrigin(0, 0); +workspace.setFill('#f0f0f0'); + +// Center Topic Rect ... +const centralRect = new Rect(0.3); +centralRect.setSize(200, 60); +centralRect.setPosition(300, 300); +centralRect.setFill('#99ccff'); +centralRect.setStroke(1, 'solid', '#878b8f'); +workspace.append(centralRect); + +workspace.addItAsChildTo($('#divWorkspace')); + +global.zoomIn = function zoomIn() { + xScale /= 2; + yScale /= 2; + workspace.setSize(`${xScale}px`, `${yScale}px`); +}; + +global.zoomOut = function zoomOut() { + xScale *= 2; + yScale *= 2; + workspace.setSize(`${xScale}px`, `${yScale}px`); +}; + +global.createShape = function createShape() { + // Secondary Idea... + const nodeGroup = new Group(); + nodeGroup.setSize(200, 60); + nodeGroup.setCoordSize(200, 60); + nodeGroup.setPosition(700, shapeOrigX); + shapeOrigX += 50; + + const outerRect = new Rect(); + outerRect.setSize(200, 100); + outerRect.setVisibility(false); + outerRect.setPosition(0, 0); + outerRect.setFill('#3e9eff'); + outerRect.setStroke(1, 'solid', '#878b8f'); + nodeGroup.append(outerRect); + + const inerRect = new Rect(0.3); + inerRect.setSize(190, 85); + inerRect.setPosition(5, 10); + inerRect.setFill('white'); + inerRect.setStroke(1, 'dash', '#878b8f'); + nodeGroup.append(inerRect); + nodeGroup._drag = false; + + workspace.append(nodeGroup); + + // Add behaviour ... + inerRect.addEvent('mouseover', () => { + outerRect.setVisibility(true); + }); + inerRect.addEvent('mouseout', () => { + if (!nodeGroup._drag) { + outerRect.setVisibility(false); + } + }); + + nodeGroup.addEvent('mousedown', function addEvent(e) { + const shadowGroup = new Group(); + shadowGroup.setSize(200, 60); + shadowGroup.setCoordSize(200, 60); + + const position = nodeGroup.getPosition(); + shadowGroup.setPosition(position.x, position.y); + + const shadowRect = new Rect(0.3); + shadowRect.setSize(190, 85); + shadowRect.setPosition(5, 10); + shadowRect.setFill('white', 0.3); + shadowRect.setStroke(1, 'dash', '#878b8f'); + shadowGroup.append(shadowRect); + + workspace.append(shadowGroup); + + this._shadowGroup = shadowGroup; + if (!this._moveFunction) { + nodeGroup._drag = true; + workspace._moveFunction = (event) => { + // Esto mas o menos funciona por que el size del workspace es 1 a uno con + // el del la pantalla. + let posx = 0; + let posy = 0; + if (event.pageX || event.pageY) { + posx = e.pageX; + posy = e.pageY; + } else if (event.clientX || event.clientY) { + posx = event.clientX + document.body.scrollLeft + + document.documentElement.scrollLeft; + posy = event.clientY + document.body.scrollTop + + document.documentElement.scrollTop; + } + + shadowGroup.setPosition(posx - 50, posy - 150); + }; + } + workspace.addEvent('mousemove', workspace._moveFunction); + const mouseUp = () => { + workspace.removeChild(shadowGroup); + + const pos = shadowGroup.getPosition(); + nodeGroup.setPosition(pos.x, pos.y); + nodeGroup._drag = false; + outerRect.setVisibility(true); + workspace.removeEvent('mousemove', workspace._moveFunction); + workspace.removeEvent('mouseup', mouseUp); + }; + workspace.addEvent('mouseup', mouseUp); + }); +}; diff --git a/packages/web2d/test/playground/rect.html b/packages/web2d/test/playground/rect.html index f7c311e8..27ff5547 100755 --- a/packages/web2d/test/playground/rect.html +++ b/packages/web2d/test/playground/rect.html @@ -9,69 +9,9 @@ border: 1px solid black; } - - - - +

Rect Render Tests

diff --git a/packages/web2d/test/playground/rect.js b/packages/web2d/test/playground/rect.js new file mode 100644 index 00000000..4da78da7 --- /dev/null +++ b/packages/web2d/test/playground/rect.js @@ -0,0 +1,49 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Rect, +} from '../../src'; + +global.$ = $; + +Toolkit.init(); + +const rectExampleTest = () => { + const workspace = new Workspace(); + workspace.setSize('100px', '100px'); + workspace.setCoordSize(100, 100); + workspace.setCoordOrigin(0, 0); + + const rect = new Rect(); + rect.setPosition(20, 20); + + workspace.append(rect); + workspace.addItAsChildTo($('#rectExample')); +}; +rectExampleTest(); + +const roundrectExampleTest = () => { + function builder(container, x, width, height) { + for (let i = 1; i <= 10; i++) { + const rect = new Rect(i / 10); + rect.setPosition(x, ((i - 1) * (50 + 5))); + rect.setSize(width, height); + container.append(rect); + } + } + + // 50 x 50 + const workspace = new Workspace(); + workspace.setSize('500px', '550px'); + workspace.setCoordOrigin(0, -4); + workspace.setCoordSize(500, 550); + workspace.addItAsChildTo($('#roundRect')); + + builder(workspace, 10, 50, 50); + + // 100 x 50 + builder(workspace, 70, 100, 50); + + // 200 x 50 + builder(workspace, 180, 200, 50); +}; +roundrectExampleTest(); diff --git a/packages/web2d/test/playground/shapes.html b/packages/web2d/test/playground/shapes.html index 3b70fcbe..87c3b5b5 100755 --- a/packages/web2d/test/playground/shapes.html +++ b/packages/web2d/test/playground/shapes.html @@ -9,241 +9,9 @@ border: 1px solid black; } - - - - - +

Element properties Tests

diff --git a/packages/web2d/test/playground/shapes.js b/packages/web2d/test/playground/shapes.js new file mode 100644 index 00000000..ee173814 --- /dev/null +++ b/packages/web2d/test/playground/shapes.js @@ -0,0 +1,241 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Rect, +} from '../../src'; + +global.$ = $; + +Toolkit.init(); + +const strokeStyleTest = () => { + function builder(parent, scale, strokeWidth) { + const rectSize = scale * 80; + const yPosition = 10 * scale; + + let xPosition = 10 * scale; + let rect = new Rect(); + rect.setSize(rectSize, rectSize); + rect.setPosition(xPosition, yPosition); + rect.setFill('yellow'); + rect.setStroke(1, 'solid', 'black'); + parent.append(rect); + + xPosition += 90 * scale; + rect = new Rect(); + rect.setSize(rectSize, rectSize); + rect.setPosition(xPosition, yPosition); + rect.setFill('yellow'); + rect.setStroke(strokeWidth, 'dot', 'black'); + parent.append(rect); + + xPosition += 90 * scale; + rect = new Rect(); + rect.setSize(rectSize, rectSize); + rect.setPosition(xPosition, yPosition); + rect.setFill('yellow'); + rect.setStroke(strokeWidth, 'dash', 'black'); + parent.append(rect); + + xPosition += 90 * scale; + rect = new Rect(); + rect.setSize(rectSize, rectSize); + rect.setPosition(xPosition, yPosition); + rect.setFill('yellow'); + rect.setStroke(strokeWidth, 'longdash', 'black'); + parent.append(rect); + + xPosition += 90 * scale; + rect = new Rect(); + rect.setSize(rectSize, rectSize); + rect.setPosition(xPosition, yPosition); + rect.setFill('yellow'); + rect.setStroke(strokeWidth, 'dashdot', 'black'); + parent.append(rect); + } + + // Workspace with default scale ... + let workspace = new Workspace(); + workspace.setSize('500px', '100px'); + workspace.setCoordSize(500, 100); + workspace.setCoordOrigin(0, 0); + builder(workspace, 1, 1); + workspace.addItAsChildTo($('#strokeStyle')); + + // Workspace with modified scale ... + workspace = new Workspace(); + workspace.setSize('500px', '100px'); + workspace.setCoordSize(5000, 1000); + workspace.setCoordOrigin(0, 0); + builder(workspace, 10, 1); + workspace.addItAsChildTo($('#strokeStyleGroup')); + + // Workspace with default scale ... + workspace = new Workspace(); + workspace.setSize('500px', '100px'); + workspace.setCoordSize(500, 100); + workspace.setCoordOrigin(0, 0); + builder(workspace, 1, 5); + workspace.addItAsChildTo($('#strokeStyleWidth')); +}; +strokeStyleTest(); + +const strokeOpacityTest = () => { + const workspace = new Workspace(); + workspace.setSize('500px', '100px'); + workspace.setCoordSize(500, 100); + workspace.setCoordOrigin(0, 0); + + let rect = new Rect(0, { + x: 5, + y: 5, + width: 390, + height: 90, + fillColor: 'green', + strokeColor: 'black', + strokeStyle: 'solid', + strokeWidth: 1, + }); + workspace.append(rect); + + const rectAttributes = { + width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, + }; + rect = new Rect(0, rectAttributes); + rect.setPosition(20, 20); + rect.setAttribute('strokeOpacity', 1); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(120, 20); + rect.setAttribute('strokeOpacity', 0.5); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(220, 20); + rect.setAttribute('strokeOpacity', 0.3); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(320, 20); + rect.setAttribute('strokeOpacity', 0); + workspace.append(rect); + + workspace.addItAsChildTo($('#strokeOpacity')); +}; +strokeOpacityTest(); + +const fillOpacityTest = () => { + const workspace = new Workspace(); + workspace.setSize('500px', '100px'); + workspace.setCoordSize(500, 100); + workspace.setCoordOrigin(0, 0); + + let rect = new Rect(0, { + x: 5, + y: 5, + width: 390, + height: 90, + fillColor: 'green', + strokeColor: 'black', + strokeStyle: 'solid', + strokeWidth: 4, + }); + workspace.append(rect); + + const rectAttributes = { + width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, + }; + rect = new Rect(0, rectAttributes); + rect.setPosition(20, 20); + rect.setAttribute('fillOpacity', 1); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(120, 20); + rect.setAttribute('fillOpacity', 0.5); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(220, 20); + rect.setAttribute('fillOpacity', 0.3); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(320, 20); + rect.setAttribute('fillOpacity', 0); + workspace.append(rect); + + workspace.addItAsChildTo($('#fillOpacity')); +}; +fillOpacityTest(); + +const opacityTest = () => { + const workspace = new Workspace(); + workspace.setSize('500px', '100px'); + workspace.setCoordSize(500, 100); + workspace.setCoordOrigin(0, 0); + + let rect = new Rect(0, { + x: 5, + y: 5, + width: 390, + height: 90, + fillColor: 'green', + strokeColor: 'black', + strokeStyle: 'solid', + strokeWidth: 4, + }); + workspace.append(rect); + + const rectAttributes = { + width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, + }; + rect = new Rect(0, rectAttributes); + rect.setPosition(20, 20); + rect.setOpacity(0.8); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(120, 20); + rect.setOpacity(0.5); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(220, 20); + rect.setOpacity(0.3); + workspace.append(rect); + + rect = new Rect(0, rectAttributes); + rect.setPosition(320, 20); + rect.setOpacity(0); + workspace.append(rect); + + workspace.addItAsChildTo($('#opacity')); +}; +opacityTest(); + +const visibilityTest = () => { + const workspace = new Workspace({ fillColor: 'yellow', strokeWidth: '2px' }); + workspace.setSize('500px', '100px'); + workspace.setCoordSize(500, 100); + workspace.setCoordOrigin(0, 0); + + const rectAttributes = { + width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, + }; + const rect = new Rect(0, rectAttributes); + rect.setPosition(120, 20); + workspace.append(rect); + rect.addEvent('mouseover', () => { + alert('Mouse Over'); + }); + + let isVisible = true; + const executer = function () { + isVisible = !isVisible; + rect.setVisibility(isVisible); + }; + // executer.periodical(100); + workspace.addItAsChildTo($('#visibility')); +}; +visibilityTest(); diff --git a/packages/web2d/test/playground/utils.js b/packages/web2d/test/playground/utils.js deleted file mode 100755 index 076654f8..00000000 --- a/packages/web2d/test/playground/utils.js +++ /dev/null @@ -1,60 +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. - */ - -const Grid = function (parent, colums, rows) { - const cellSize = '10px'; - this._parent = parent; - this._container = this._createContainer(); - const tbody = $(this._container.firstChild.firstChild); - for (let i = 0; i < rows; i++) { - const trElement = $(''); - for (let j = 0; j < colums; j++) { - const tdElement = $(''); - tdElement.css({ - width: cellSize, - height: cellSize, - borderWidth: '1px', - borderStyle: 'dashed', - borderColor: 'lightsteelblue', - }); - trElement.append(tdElement); - } - tbody.append(trElement); - } -}; - -Grid.prototype.setPosition = function (x, y) { - this._container.style.left = x; - this._container.style.top = y; -}; - -Grid.prototype.render = function () { - $(this._parent).append(this._container); -}; - -Grid.prototype._createContainer = function () { - const result = window.document.createElement('div'); - result.style.tableLayout = 'fixed'; - result.style.borderCollapse = 'collapse'; - result.style.emptyCells = 'show'; - result.style.position = 'absolute'; - result.innerHTML = '
'; - return result; -}; - -export default Grid; diff --git a/packages/web2d/test/playground/workspace.html b/packages/web2d/test/playground/workspace.html index 81e07b8b..45f2a74e 100755 --- a/packages/web2d/test/playground/workspace.html +++ b/packages/web2d/test/playground/workspace.html @@ -9,205 +9,9 @@ border: 1px solid black; } - - - - - +

Workspace Render Tests

diff --git a/packages/web2d/test/playground/workspace.js b/packages/web2d/test/playground/workspace.js new file mode 100644 index 00000000..a905b5e3 --- /dev/null +++ b/packages/web2d/test/playground/workspace.js @@ -0,0 +1,181 @@ +import $ from '@libraries/jquery-2.1.0'; +import { + Toolkit, Workspace, Elipse, +} from '../../src'; +import Grid from './Grid'; + +global.$ = $; + +Toolkit.init(); + +const overflowWorkspace = new Workspace(); +overflowWorkspace.setSize('100px', '100px'); +const elipse1 = new Elipse(); +elipse1.setSize(200, 200); +elipse1.setPosition(0, 0); +overflowWorkspace.append(elipse1); +overflowWorkspace.addItAsChildTo($('#overflowExample')); + +const workspacePosition = () => { + const elipseAttr = { + width: 100, height: 100, x: 100, y: 100, + }; + + const divElem = $('#positionExample'); + const workPosition = new Workspace(); + workPosition.setSize('100px', '100px'); + const elipse = new Elipse(elipseAttr); + workPosition.append(elipse); + workPosition.addItAsChildTo(divElem); + + let x = 100; + const executer = () => { + x = (x + 10) % 100; + divElem.css('left', `${x}px`); + }; + // executer.periodical(100); +}; +workspacePosition(); + +// Draw a reference grid. + +// Enable when JS is loading ... +const container = document.getElementById('sizeExampleContainer'); +const grid = new Grid(container, 35, 12); +grid.setPosition('0px', '0px'); +grid.render(); + +// Define a workspace using pixels and inchs. +const workspacePixel = new Workspace(); +workspacePixel.setSize('100px', '100px'); +let elipse = new Elipse(); +elipse.setSize(100, 100); +elipse.setPosition(100, 100); + +workspacePixel.append(elipse); +workspacePixel.addItAsChildTo($('#sizeExamplePixels')); + +const workspaceInchs = new Workspace(); +workspaceInchs.setSize('1in', '1in'); +elipse = new Elipse(); +elipse.setSize(100, 100); +elipse.setPosition(100, 100); + +workspaceInchs.append(elipse); +workspaceInchs.addItAsChildTo($('#sizeExampleInch')); + +const workspaceCoordSizeSample = () => { + // Workspace with CoordSize(100,100); + const coordSizeSampleBuilder = (width, height) => { + const workspace = new Workspace(); + workspace.setSize('100px', '100px'); + workspace.setCoordSize(width, height); + + elipse = new Elipse(); + elipse.setPosition(50, 50); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(0, 0); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(0, 100); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(100, 0); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(100, 100); + workspace.append(elipse); + return workspace; + }; + + const workspace100x100 = coordSizeSampleBuilder(100, 100); + workspace100x100.addItAsChildTo($('#coordsizeExample100x100')); + + const workspace100x200 = coordSizeSampleBuilder(100, 200); + workspace100x200.addItAsChildTo($('#coordsizeExample100x200')); + + const workspace200x100 = coordSizeSampleBuilder(200, 100); + workspace200x100.addItAsChildTo($('#coordsizeExample200x100')); + + const dynamicWorkspace = coordSizeSampleBuilder(100, 100); + dynamicWorkspace.addItAsChildTo($('#coordsizeExampleDynamic')); + + let size = 100; + const executer = () => { + size = (size + 1) % 100; + if (size < 30) { + size = 30; + } + + dynamicWorkspace.setCoordSize(size, size); + }; + // executer.periodical(100); + dynamicWorkspace.setCoordSize(size, size); +}; + +workspaceCoordSizeSample(); + +const workspaceCoordOriginSample = () => { + const coordOriginSampleBuilder = (x, y) => { + // Workspace with CoordOrigin(100,100); + const workspace = new Workspace(); + workspace.setSize('100px', '100px'); + workspace.setCoordSize(100, 100); + workspace.setCoordOrigin(x, y); + + elipse = new Elipse(); + elipse.setPosition(0, 0); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(0, 100); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(100, 0); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(100, 100); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(50, 50); + workspace.append(elipse); + + elipse = new Elipse(); + elipse.setPosition(100, 100); + workspace.append(elipse); + + return workspace; + }; + + const workspace0x0 = coordOriginSampleBuilder(0, 0); + workspace0x0.addItAsChildTo($('#coordorigin0x0')); + + const workspace0x50 = coordOriginSampleBuilder(0, 50); + workspace0x50.addItAsChildTo($('#coordorigin0x50')); + + const workspace50x0 = coordOriginSampleBuilder(50, 0); + workspace50x0.addItAsChildTo($('#coordorigin50x0')); + + // Workspace animation changing the coordsize from (30,30) to (100,100) + const dynamicWorkspace = coordOriginSampleBuilder(100, 100); + dynamicWorkspace.addItAsChildTo($('#coordoriginExampleDynamic')); + + let x = 50; + let y = 50; + const executer = () => { + x = (x + 1) % 50; + y = (y + 1) % 50; + + dynamicWorkspace.setCoordOrigin(x, y); + }; + // executer.periodical(100); +}; +workspaceCoordOriginSample(); diff --git a/packages/web2d/webpack.common.js b/packages/web2d/webpack.common.js index a7cbd4bb..8ec228da 100644 --- a/packages/web2d/webpack.common.js +++ b/packages/web2d/webpack.common.js @@ -3,7 +3,6 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin'); /** @type {import('webpack').Configuration} */ module.exports = { - entry: './src/web2d.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', @@ -19,7 +18,6 @@ module.exports = { test: /.(js)$/, exclude: [ /node_modules/, - path.resolve(__dirname, '../../libraries/mootools-core-1.4.5'), path.resolve(__dirname, '../../libraries/underscore-min'), ], }, @@ -29,9 +27,6 @@ module.exports = { resolve: { alias: { '@libraries': path.resolve(__dirname, '../../libraries/'), - '@svg': path.resolve(__dirname, 'src/components/peer/svg/'), - '@utils': path.resolve(__dirname, 'src/components/peer/utils/'), - '@components': path.resolve(__dirname, 'src/components/'), }, extensions: ['.js', '.json'], }, diff --git a/packages/web2d/webpack.playground.js b/packages/web2d/webpack.playground.js index ea1d0d16..3760adc7 100644 --- a/packages/web2d/webpack.playground.js +++ b/packages/web2d/webpack.playground.js @@ -2,33 +2,19 @@ const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const namesHTML = [ - 'arrow', - 'curvedLine', - 'events', - 'font', - 'group', - 'line', - 'polyLine', - 'prototype', - 'rect', - 'shapes', - 'text', - 'workspace', -]; - -const multiHtmlPlugin = namesHTML.map( - (name) => new HtmlWebpackPlugin({ - chunks: ['testing'], - filename: `${name}.html`, - template: `test/playground/${name}.html`, - }), -); - module.exports = { entry: { - testing: './test/playground/context-loader.js', - jquery: '../../libraries/jquery-2.1.0', + arrow: './test/playground/arrow.js', + curvedLine: './test/playground/curvedLine.js', + events: './test/playground/events.js', + font: './test/playground/font.js', + rect: './test/playground/rect.js', + line: './test/playground/line.js', + workspace: './test/playground/workspace.js', + polyLine: './test/playground/polyLine.js', + shapes: './test/playground/shapes.js', + group: './test/playground/group.js', + prototype: './test/playground/prototype.js', }, output: { path: path.resolve(__dirname, 'dist', 'tests'), @@ -49,7 +35,6 @@ module.exports = { test: /.js$/, exclude: [ /node_modules/, - path.resolve(__dirname, '../../libraries/mootools-core-1.4.5'), path.resolve(__dirname, '../../libraries/underscore-min'), ], }, @@ -58,14 +43,93 @@ module.exports = { resolve: { alias: { '@libraries': path.resolve(__dirname, '../../libraries/'), - '@svg': path.resolve(__dirname, './src/components/peer/svg/'), - '@utils': path.resolve(__dirname, './src/components/peer/utils/'), - '@components': path.resolve(__dirname, './src/components/'), }, extensions: ['.js', '.json'], }, plugins: [ new CleanWebpackPlugin(), - new HtmlWebpackPlugin({ template: 'test/playground/index.html' }), - ].concat(multiHtmlPlugin), + new HtmlWebpackPlugin( + { + filename: 'index.html', + template: 'test/playground/index.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['arrow'], + filename: 'arrow.html', + template: 'test/playground/arrow.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['curvedLine'], + filename: 'curvedLine.html', + template: 'test/playground/curvedLine.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['events'], + filename: 'events.html', + template: 'test/playground/events.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['font'], + filename: 'font.html', + template: 'test/playground/font.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['rect'], + filename: 'rect.html', + template: 'test/playground/rect.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['line'], + filename: 'line.html', + template: 'test/playground/line.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['workspace'], + filename: 'workspace.html', + template: 'test/playground/workspace.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['polyLine'], + filename: 'polyLine.html', + template: 'test/playground/polyLine.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['shapes'], + filename: 'shapes.html', + template: 'test/playground/shapes.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['group'], + filename: 'group.html', + template: 'test/playground/group.html', + }, + ), + new HtmlWebpackPlugin( + { + chunks: ['prototype'], + filename: 'prototype.html', + template: 'test/playground/prototype.html', + }, + ), + ], }; diff --git a/yarn.lock b/yarn.lock index b5eb65aa..7d2f58e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2508,6 +2508,7 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.8.0: amdefine@>=0.0.4: version "1.0.1" resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" + integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU= ansi-align@^3.0.0: version "3.0.1" @@ -2769,6 +2770,7 @@ async@^3.2.0: async@~0.2.6: version "0.2.10" resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1" + integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E= asynckit@^0.4.0: version "0.4.0" @@ -2872,10 +2874,12 @@ base@^0.11.1: basic-auth-connect@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz#fdb0b43962ca7b40456a7c2bb48fe173da2d2122" + integrity sha1-/bC0OWLKe0BFanwrtI/hc9otISI= batch@0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.0.tgz#fd2e05a7a5d696b4db9314013e285d8ff3557ec3" + integrity sha1-/S4Fp6XWlrTbkxQBPihdj/NVfsM= batch@0.6.1: version "0.6.1" @@ -3046,6 +3050,7 @@ btoa-lite@^1.0.0: buffer-crc32@0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.1.tgz#be3e5382fc02b6d6324956ac1af98aa98b08534c" + integrity sha1-vj5TgvwCttYySVasGvmKqYsIU0w= buffer-crc32@~0.2.3: version "0.2.13" @@ -3081,10 +3086,12 @@ byte-size@^5.0.1: bytes@0.2.1, bytes@~0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/bytes/-/bytes-0.2.1.tgz#555b08abcb063f8975905302523e4cd4ffdfdf31" + integrity sha1-VVsIq8sGP4l1kFMCUj5M1P/f3zE= bytes@0.3.0, bytes@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/bytes/-/bytes-0.3.0.tgz#78e2e0e28c7f9c7b988ea8aee0db4d5fa9941935" + integrity sha1-eOLg4ox/nHuYjqiu4NtNX6mUGTU= bytes@3.0.0: version "3.0.0" @@ -3375,6 +3382,7 @@ cli-boxes@^2.2.1: cli-color@~0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-0.2.3.tgz#0a25ceae5a6a1602be7f77d28563c36700274e88" + integrity sha1-CiXOrlpqFgK+f3fShWPDZwAnTog= dependencies: es5-ext "~0.9.2" memoizee "~0.2.5" @@ -3509,6 +3517,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6: commander@1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/commander/-/commander-1.3.2.tgz#8a8f30ec670a6fdd64af52f1914b907d79ead5b5" + integrity sha1-io8w7GcKb91kr1LxkUuQfXnq1bU= dependencies: keypress "0.1.x" @@ -3558,6 +3567,7 @@ component-emitter@^1.2.1: compressible@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/compressible/-/compressible-1.0.0.tgz#f83e49c1cb61421753545125a8011d68b492427d" + integrity sha1-+D5JwcthQhdTVFElqAEdaLSSQn0= compressible@~2.0.16: version "2.0.18" @@ -3575,6 +3585,7 @@ compression-webpack-plugin@^7.1.2: compression@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/compression/-/compression-1.0.0.tgz#8aeb85d48db5145d38bc8b181b6352d8eab26020" + integrity sha1-iuuF1I21FF04vIsYG2NS2OqyYCA= dependencies: bytes "0.2.1" compressible "1.0.0" @@ -3643,12 +3654,14 @@ connect-history-api-fallback@^1.6.0: connect-timeout@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/connect-timeout/-/connect-timeout-1.0.0.tgz#12054799f90bb9566f8b274efe7842d6465d10bb" + integrity sha1-EgVHmfkLuVZviydO/nhC1kZdELs= dependencies: debug "*" connect@2.14.5: version "2.14.5" resolved "https://registry.yarnpkg.com/connect/-/connect-2.14.5.tgz#73217513152c152ebe049c499fa09211b8c476f4" + integrity sha1-cyF1ExUsFS6+BJxJn6CSEbjEdvQ= dependencies: basic-auth-connect "1.0.0" bytes "0.3.0" @@ -3772,6 +3785,7 @@ convert-source-map@^1.7.0: cookie-parser@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.0.1.tgz#17bd622c9717cd0858a912a9fef4c0362360a7b0" + integrity sha1-F71iLJcXzQhYqRKp/vTANiNgp7A= dependencies: cookie "0.1.0" cookie-signature "1.0.3" @@ -3779,6 +3793,7 @@ cookie-parser@1.0.1: cookie-signature@1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.3.tgz#91cd997cc51fb641595738c69cda020328f50ff9" + integrity sha1-kc2ZfMUftkFZVzjGnNoCAyj1D/k= cookie-signature@1.0.6: version "1.0.6" @@ -3787,10 +3802,12 @@ cookie-signature@1.0.6: cookie@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.1.0.tgz#90eb469ddce905c866de687efc43131d8801f9d0" + integrity sha1-kOtGndzpBchm3mh+/EMTHYgB+dA= cookie@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.1.2.tgz#72fec3d24e48a3432073d90c12642005061004b1" + integrity sha1-cv7D0k5Io0Mgc9kMEmQgBQYQBLE= cookie@0.4.0: version "0.4.0" @@ -3973,6 +3990,7 @@ csstype@^3.0.2: csurf@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/csurf/-/csurf-1.1.0.tgz#5dd459df40df43b9eb828284d6d03132f42cb8b2" + integrity sha1-XdRZ30DfQ7nrgoKE1tAxMvQsuLI= dependencies: scmp "~0.0.3" uid2 "~0.0.2" @@ -4169,10 +4187,12 @@ debug@*, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.1, d debug@0.7.4: version "0.7.4" resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39" + integrity sha1-BuHqgILCyxTjmAbiLi9vdX+Srzk= debug@0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/debug/-/debug-0.8.0.tgz#0541ea91f0e503fdf0c5eed418a32550234967f0" + integrity sha1-BUHqkfDlA/3wxe7UGKMlUCNJZ/A= debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9: version "2.6.9" @@ -4195,6 +4215,7 @@ debug@4.3.2: "debug@>= 0.7.3 < 1": version "0.8.1" resolved "https://registry.yarnpkg.com/debug/-/debug-0.8.1.tgz#20ff4d26f5e422cb68a1bacbbb61039ad8c1c130" + integrity sha1-IP9NJvXkIstoobrLu2EDmtjBwTA= debug@^3.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7: version "3.2.7" @@ -4580,6 +4601,7 @@ error-ex@^1.2.0, error-ex@^1.3.1: errorhandler@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/errorhandler/-/errorhandler-1.0.0.tgz#d74b37e8dc38c99afb3f5a79edcebaea022d042a" + integrity sha1-10s36Nw4yZr7P1p57c666gItBCo= es-abstract@^1.19.0, es-abstract@^1.19.1: version "1.19.1" @@ -4621,6 +4643,7 @@ es-to-primitive@^1.2.1: es5-ext@~0.9.2: version "0.9.2" resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.9.2.tgz#d2e309d1f223b0718648835acf5b8823a8061f8a" + integrity sha1-0uMJ0fIjsHGGSINaz1uII6gGH4o= es6-promise@^4.0.3: version "4.2.8" @@ -4941,6 +4964,7 @@ etag@~1.8.1: event-emitter@~0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.2.2.tgz#c81e3724eb55407c5a0d5ee3299411f700f54291" + integrity sha1-yB43JOtVQHxaDV7jKZQR9wD1QpE= dependencies: es5-ext "~0.9.2" @@ -5047,6 +5071,7 @@ expand-template@^2.0.3: express-session@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/express-session/-/express-session-1.0.2.tgz#004478c742561774411ceb79733155a56b6d49eb" + integrity sha1-AER4x0JWF3RBHOt5czFVpWttSes= dependencies: buffer-crc32 "0.2.1" cookie "0.1.0" @@ -5093,6 +5118,7 @@ express@^4.17.1: express@~3.5.0: version "3.5.3" resolved "https://registry.yarnpkg.com/express/-/express-3.5.3.tgz#af440e1ddad078934ec78241420b40bbc56dc2ad" + integrity sha1-r0QOHdrQeJNOx4JBQgtAu8Vtwq0= dependencies: buffer-crc32 "0.2.1" commander "1.3.2" @@ -5418,6 +5444,7 @@ fragment-cache@^0.2.1: fresh@0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.2.2.tgz#9731dcf5678c7faeb44fb903c4f72df55187fa77" + integrity sha1-lzHc9WeMf660T7kDxPct9VGH+nc= fresh@0.5.2: version "0.5.2" @@ -5426,6 +5453,7 @@ fresh@0.5.2: fresh@~0.2.1: version "0.2.4" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.2.4.tgz#3582499206c9723714190edd74b4604feb4a614c" + integrity sha1-NYJJkgbJcjcUGQ7ddLRgT+tKYUw= from2@^2.1.0: version "2.3.0" @@ -5805,6 +5833,7 @@ handlebars@^4.7.6: handlebars@~2.0.0-alpha.2: version "2.0.0" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-2.0.0.tgz#6e9d7f8514a3467fa5e9f82cc158ecfc1d5ac76f" + integrity sha1-bp1/hRSjRn+l6fgswVjs/B1ax28= dependencies: optimist "~0.3" optionalDependencies: @@ -6925,6 +6954,7 @@ jss@10.8.2, jss@^10.5.1: keypress@0.1.x: version "0.1.0" resolved "https://registry.yarnpkg.com/keypress/-/keypress-0.1.0.tgz#4a3188d4291b66b4f65edb99f806aa9ae293592a" + integrity sha1-SjGI1CkbZrT2XtuZ+AaqmuKTWSo= keyv@^3.0.0: version "3.1.0" @@ -7223,6 +7253,7 @@ lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17 lodash@~2.4.1: version "2.4.2" resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e" + integrity sha1-+t2DS5aDBz2hebPq5tnA0VBT9z4= log-symbols@^1.0.2: version "1.0.2" @@ -7397,6 +7428,7 @@ media-typer@0.3.0: memoizee@~0.2.5: version "0.2.6" resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.2.6.tgz#bb45a7ad02530082f1612671dab35219cd2e0741" + integrity sha1-u0WnrQJTAILxYSZx2rNSGc0uB0E= dependencies: es5-ext "~0.9.2" event-emitter "~0.2.2" @@ -7468,6 +7500,7 @@ meow@^8.0.0: merge-descriptors@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-0.0.2.tgz#c36a52a781437513c57275f39dd9d317514ac8c7" + integrity sha1-w2pSp4FDdRPFcnXzndnTF1FKyMc= merge-descriptors@1.0.1: version "1.0.1" @@ -7484,6 +7517,7 @@ merge2@^1.2.3, merge2@^1.3.0, merge2@^1.4.1: method-override@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/method-override/-/method-override-1.0.0.tgz#9e5bfbd80f3b9e043801dd3fe60bbab0f15b5f61" + integrity sha1-nlv72A87ngQ4Ad0/5gu6sPFbX2E= dependencies: methods "*" @@ -7494,6 +7528,7 @@ methods@*, methods@~1.1.2: methods@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/methods/-/methods-0.1.0.tgz#335d429eefd21b7bacf2e9c922a8d2bd14a30e4f" + integrity sha1-M11Cnu/SG3us8unJIqjSvRSjDk8= micromatch@^3.1.10, micromatch@^3.1.4: version "3.1.10" @@ -7537,6 +7572,7 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime@1.2.11: version "1.2.11" resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10" + integrity sha1-WCA+7Ybjpe8XrtK32evUfwpg3RA= mime@1.6.0: version "1.6.0" @@ -7654,6 +7690,7 @@ mkdirp@*: mkdirp@0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.4.0.tgz#291ac2a2d43a19c478662577b5be846fe83b5923" + integrity sha1-KRrCotQ6GcR4ZiV3tb6Eb+g7WSM= mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@^0.5.5: version "0.5.5" @@ -7676,6 +7713,7 @@ mootools@1.4.5: morgan@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.0.0.tgz#83cf74b9f2d841901f1a9a6b8fa7a468d2e47a8d" + integrity sha1-g890ufLYQZAfGpprj6ekaNLkeo0= dependencies: bytes "~0.2.0" @@ -7729,6 +7767,7 @@ multimatch@^3.0.0: multiparty@2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/multiparty/-/multiparty-2.2.0.tgz#a567c2af000ad22dc8f2a653d91978ae1f5316f4" + integrity sha1-pWfCrwAK0i3I8qZT2Rl4rh9TFvQ= dependencies: readable-stream "~1.1.9" stream-counter "~0.2.0" @@ -7790,10 +7829,12 @@ natural-compare@^1.4.0: negotiator@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.3.0.tgz#706d692efeddf574d57ea9fb1ab89a4fa7ee8f60" + integrity sha1-cG1pLv7d9XTVfqn7GriaT6fuj2A= negotiator@0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.4.2.tgz#8c43ea7e4c40ddfe40c3c0234c4ef77500b8fd37" + integrity sha1-jEPqfkxA3f5Aw8AjTE73dQC4/Tc= negotiator@0.6.2: version "0.6.2" @@ -7806,6 +7847,7 @@ neo-async@^2.6.0, neo-async@^2.6.2: next-tick@0.1.x: version "0.1.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-0.1.0.tgz#1912cce8eb9b697d640fbba94f8f00dec3b94259" + integrity sha1-GRLM6OubaX1kD7upT48A3sO5Qlk= nice-try@^1.0.4: version "1.0.5" @@ -8165,6 +8207,7 @@ opn@^5.5.0: optimist@~0.3, optimist@~0.3.5: version "0.3.7" resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9" + integrity sha1-yQlBrVnkJzMokjB00s8ufLxuwNk= dependencies: wordwrap "~0.0.2" @@ -8409,6 +8452,7 @@ parse5@^6.0.1: parseurl@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.0.1.tgz#2e57dce6efdd37c3518701030944c22bf388b7b4" + integrity sha1-Llfc5u/dN8NRhwEDCUTCK/OIt7Q= parseurl@~1.3.2, parseurl@~1.3.3: version "1.3.3" @@ -8500,6 +8544,7 @@ pause-stream@0.0.11: pause@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/pause/-/pause-0.0.1.tgz#1d408b3fdb76923b9543d96fb4c9dfd535d9cb5d" + integrity sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10= pend@~1.2.0: version "1.2.0" @@ -8681,10 +8726,15 @@ prepend-http@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" -prettier@^2.2.1, prettier@^2.3.2: +prettier@^2.2.1: version "2.5.0" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893" +prettier@^2.3.2: + version "2.5.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" + integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg== + pretty-bytes@^5.4.1, pretty-bytes@^5.6.0: version "5.6.0" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" @@ -8824,6 +8874,7 @@ q@^1.5.1: qs@0.6.6: version "0.6.6" resolved "https://registry.yarnpkg.com/qs/-/qs-0.6.6.tgz#6e015098ff51968b8a3c819001d5f2c89bc4b107" + integrity sha1-bgFQmP9RlouKPIGQAdXyyJvEsQc= qs@6.7.0: version "6.7.0" @@ -8885,6 +8936,7 @@ randombytes@^2.1.0: range-parser@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.0.0.tgz#a4b264cfe0be5ce36abe3765ac9c2a248746dbc0" + integrity sha1-pLJkz+C+XONqvjdlrJwqJIdG28A= range-parser@^1.2.1, range-parser@~1.2.1: version "1.2.1" @@ -8893,10 +8945,12 @@ range-parser@^1.2.1, range-parser@~1.2.1: range-parser@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.0.3.tgz#6872823535c692e2c2a0103826afd82c2e0ff175" + integrity sha1-aHKCNTXGkuLCoBA4Jq/YLC4P8XU= raw-body@1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-1.1.4.tgz#f0b5624388d031f63da07f870c86cb9ccadcb67d" + integrity sha1-8LViQ4jQMfY9oH+HDIbLnMrctn0= dependencies: bytes "~0.3.0" @@ -9130,6 +9184,7 @@ read@1, read@~1.0.1: readable-stream@~1.1.8, readable-stream@~1.1.9: version "1.1.14" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9" + integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk= dependencies: core-util-is "~1.0.0" inherits "~2.0.1" @@ -9407,6 +9462,7 @@ resolve@^2.0.0-next.3: response-time@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/response-time/-/response-time-1.0.0.tgz#c2bc8d08f3c359f97eae1d6da86eead175fabdc9" + integrity sha1-wryNCPPDWfl+rh1tqG7q0XX6vck= responselike@^1.0.2: version "1.0.2" @@ -9573,6 +9629,7 @@ schema-utils@^4.0.0: scmp@~0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/scmp/-/scmp-0.0.3.tgz#3648df2d7294641e7f78673ffc29681d9bad9073" + integrity sha1-NkjfLXKUZB5/eGc//CloHZutkHM= select-hose@^2.0.0: version "2.0.0" @@ -9637,6 +9694,7 @@ send@0.17.1: send@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/send/-/send-0.3.0.tgz#9718324634806fc75bc4f8f5e51f57d9d66606e7" + integrity sha1-lxgyRjSAb8dbxPj15R9X2dZmBuc= dependencies: buffer-crc32 "0.2.1" debug "0.8.0" @@ -9659,6 +9717,7 @@ serialize-javascript@^6.0.0: serve-index@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.0.1.tgz#2782ee8ede6cccaae54957962c4715e8ce1921a6" + integrity sha1-J4Lujt5szKrlSVeWLEcV6M4ZIaY= dependencies: batch "0.5.0" negotiator "0.4.2" @@ -9678,6 +9737,7 @@ serve-index@^1.9.1: serve-static@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.1.0.tgz#454dfa05bb3ddd4e701a8915b83a278aa91c5643" + integrity sha1-RU36Bbs93U5wGokVuDoniqkcVkM= dependencies: parseurl "1.0.1" send "0.3.0" @@ -9707,6 +9767,7 @@ set-value@^2.0.0, set-value@^2.0.1: setimmediate@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.1.tgz#a9ca56ccbd6a4c3334855f060abcdece5c42ebb7" + integrity sha1-qcpWzL1qTDM0hV8GCrzezlxC67c= setprototypeof@1.1.0: version "1.1.0" @@ -9941,6 +10002,7 @@ source-map@^0.7.3, source-map@~0.7.2: source-map@~0.1.7: version "0.1.43" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346" + integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y= dependencies: amdefine ">=0.0.4" @@ -10075,6 +10137,7 @@ static-extend@^0.1.1: static-favicon@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/static-favicon/-/static-favicon-1.0.2.tgz#7c15920dda2bf33f414b0e60aebbd65cdd2a1d2f" + integrity sha1-fBWSDdor8z9BSw5grrvWXN0qHS8= "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0: version "1.5.0" @@ -10089,6 +10152,7 @@ stream-combiner@~0.0.4: stream-counter@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/stream-counter/-/stream-counter-0.2.0.tgz#ded266556319c8b0e222812b9cf3b26fa7d947de" + integrity sha1-3tJmVWMZyLDiIoErnPOyb6fZR94= dependencies: readable-stream "~1.1.8" @@ -10178,6 +10242,7 @@ string_decoder@^1.1.1: string_decoder@~0.10.x: version "0.10.31" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" + integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ= string_decoder@~1.1.1: version "1.1.1" @@ -10587,6 +10652,7 @@ ts-loader@^8.0.11: ts-loader@^9.2.5: version "9.2.6" resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.2.6.tgz#9937c4dd0a1e3dbbb5e433f8102a6601c6615d74" + integrity sha512-QMTC4UFzHmu9wU2VHZEmWWE9cUajjfcdcws+Gh7FhiO+Dy0RnR1bNz0YCHqhI0yRowCE9arVnNxYHqELOy9Hjw== dependencies: chalk "^4.1.0" enhanced-resolve "^5.0.0" @@ -10705,6 +10771,7 @@ uglify-js@^3.1.4: uglify-js@~2.3: version "2.3.6" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.3.6.tgz#fa0984770b428b7a9b2a8058f46355d14fef211a" + integrity sha1-+gmEdwtCi3qbKoBY9GNV0U/vIRo= dependencies: async "~0.2.6" optimist "~0.3.5" @@ -10717,10 +10784,12 @@ uid-number@0.0.6: uid2@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.3.tgz#483126e11774df2f71b8b639dcd799c376162b82" + integrity sha1-SDEm4Rd03y9xuLY53NeZw3YWK4I= uid2@~0.0.2: version "0.0.4" resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.4.tgz#033f3b1d5d32505f5ce5f888b9f3b667123c0a44" + integrity sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA== umask@^1.1.0: version "1.1.0" @@ -10911,6 +10980,7 @@ utila@~0.4: utils-merge@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8" + integrity sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg= utils-merge@1.0.1: version "1.0.1" @@ -10960,6 +11030,7 @@ verror@1.10.0: vhost@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/vhost/-/vhost-1.0.0.tgz#654513f289a4f898aab745bbd633e40180c9c4c0" + integrity sha1-ZUUT8omk+Jiqt0W71jPkAYDJxMA= wait-on@6.0.0: version "6.0.0" @@ -11094,6 +11165,7 @@ webpack-merge@^5.7.3, webpack-merge@^5.8.0: webpack-server@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/webpack-server/-/webpack-server-0.1.2.tgz#549c051bc4e6361a6666b3f9005e5f5f77a85911" + integrity sha1-VJwFG8TmNhpmZrP5AF5fX3eoWRE= dependencies: cli-color "~0.2.3" express "~3.5.0" @@ -11230,6 +11302,7 @@ wordwrap@^1.0.0: wordwrap@~0.0.2: version "0.0.3" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" + integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc= wrap-ansi@^3.0.1: version "3.0.1"