From 047195fb2f00645d9ffd2be302c1e19aeb26a291 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Wed, 9 Feb 2022 22:03:03 -0800 Subject: [PATCH] Move classes to typescript --- packages/mindplot/src/components/Command.ts | 17 ++- .../mindplot/src/components/ControlPoint.ts | 4 +- ...rUndoManager.js => DesignerUndoManager.ts} | 12 +- .../commands/GenericFunctionCommand.ts | 11 -- .../components/layout/{Node.js => Node.ts} | 49 ++++---- .../{RootedTreeSet.js => RootedTreeSet.ts} | 108 ++++++++---------- 6 files changed, 103 insertions(+), 98 deletions(-) rename packages/mindplot/src/components/{DesignerUndoManager.js => DesignerUndoManager.ts} (90%) rename packages/mindplot/src/components/layout/{Node.js => Node.ts} (84%) rename packages/mindplot/src/components/layout/{RootedTreeSet.js => RootedTreeSet.ts} (85%) diff --git a/packages/mindplot/src/components/Command.ts b/packages/mindplot/src/components/Command.ts index 8efad0be..c70584ad 100644 --- a/packages/mindplot/src/components/Command.ts +++ b/packages/mindplot/src/components/Command.ts @@ -23,15 +23,18 @@ abstract class Command { static _uuid: number; + private _discardDuplicated: string; + constructor() { this._id = Command._nextUUID(); + this._discardDuplicated = undefined; } - abstract execute(commandContext:CommandContext):void; + abstract execute(commandContext: CommandContext): void; - abstract undoExecute(commandContext:CommandContext):void; + abstract undoExecute(commandContext: CommandContext): void; - getId():number { + getId(): number { return this._id; } @@ -42,6 +45,14 @@ abstract class Command { this._uuid += 1; return this._uuid; } + + get discardDuplicated(): string { + return this._discardDuplicated; + } + + set discardDuplicated(value: string) { + this._discardDuplicated = value; + } } export default Command; diff --git a/packages/mindplot/src/components/ControlPoint.ts b/packages/mindplot/src/components/ControlPoint.ts index f50cdfe8..b9aab58b 100644 --- a/packages/mindplot/src/components/ControlPoint.ts +++ b/packages/mindplot/src/components/ControlPoint.ts @@ -187,7 +187,7 @@ class ControlPoint { this._line.getLine().updateLine(point); } - private _mouseUp(event, point) { + private _mouseUp(event: MouseEvent, point: Point) { this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction); this._workspace.getScreenManager().removeEvent('mouseup', this._mouseUpFunction); @@ -196,7 +196,7 @@ class ControlPoint { this._isBinded = false; } - _mouseClick(event) { + _mouseClick(event: MouseEvent) { event.preventDefault(); event.stopPropagation(); return false; diff --git a/packages/mindplot/src/components/DesignerUndoManager.js b/packages/mindplot/src/components/DesignerUndoManager.ts similarity index 90% rename from packages/mindplot/src/components/DesignerUndoManager.js rename to packages/mindplot/src/components/DesignerUndoManager.ts index 30347b0a..bc26b3f2 100644 --- a/packages/mindplot/src/components/DesignerUndoManager.js +++ b/packages/mindplot/src/components/DesignerUndoManager.ts @@ -16,15 +16,23 @@ * limitations under the License. */ import { $assert } from '@wisemapping/core-js'; +import Command from './Command'; +import CommandContext from './CommandContext'; class DesignerUndoManager { + private _undoQueue: Command[]; + + private _redoQueue: Command[]; + + private _baseId: number; + constructor() { this._undoQueue = []; this._redoQueue = []; this._baseId = 0; } - enqueue(command) { + enqueue(command: Command) { $assert(command, 'Command can not be null'); const { length } = this._undoQueue; if (command.discardDuplicated && length > 0) { @@ -39,7 +47,7 @@ class DesignerUndoManager { this._redoQueue = []; } - execUndo(commandContext) { + execUndo(commandContext: CommandContext) { if (this._undoQueue.length > 0) { const command = this._undoQueue.pop(); this._redoQueue.push(command); diff --git a/packages/mindplot/src/components/commands/GenericFunctionCommand.ts b/packages/mindplot/src/components/commands/GenericFunctionCommand.ts index f68a5158..9054a2ce 100644 --- a/packages/mindplot/src/components/commands/GenericFunctionCommand.ts +++ b/packages/mindplot/src/components/commands/GenericFunctionCommand.ts @@ -21,8 +21,6 @@ import CommandContext from '../CommandContext'; import Topic from '../Topic'; class GenericFunctionCommand extends Command { - private _discardDuplicated: string; - private _value: string | object | boolean | number; private _topicsId: number[]; @@ -42,7 +40,6 @@ class GenericFunctionCommand extends Command { this._topicsId = topicsIds; this._commandFunc = commandFunc; this._oldValues = []; - this.discardDuplicated = undefined; } /** @@ -79,14 +76,6 @@ class GenericFunctionCommand extends Command { throw new Error('undo can not be applied.'); } } - - public get disardDuplicated(): string { - return this._discardDuplicated; - } - - public set discardDuplicated(value: string) { - this._discardDuplicated = value; - } } export default GenericFunctionCommand; diff --git a/packages/mindplot/src/components/layout/Node.js b/packages/mindplot/src/components/layout/Node.ts similarity index 84% rename from packages/mindplot/src/components/layout/Node.js rename to packages/mindplot/src/components/layout/Node.ts index b5de69fe..e6a2d323 100644 --- a/packages/mindplot/src/components/layout/Node.js +++ b/packages/mindplot/src/components/layout/Node.ts @@ -16,9 +16,23 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; +import PositionType from '../PositionType'; +import SizeType from '../SizeType'; class Node { - constructor(id, size, position, sorter) { + private _id: number; + + // eslint-disable-next-line no-use-before-define + _parent: Node; + + private _sorter: any; + + private _properties; + + // eslint-disable-next-line no-use-before-define + _children: Node[]; + + constructor(id: number, size: SizeType, position, sorter) { $assert(typeof id === 'number' && Number.isFinite(id), 'id can not be null'); $assert(size, 'size can not be null'); $assert(position, 'position can not be null'); @@ -69,7 +83,7 @@ class Node { } /** */ - setOrder(order) { + setOrder(order: number) { $assert( typeof order === 'number' && Number.isFinite(order), `Order can not be null. Value:${order}`, @@ -148,7 +162,7 @@ class Node { y: oldDisplacement.y + displacement.y, }; - this._setProperty('freeDisplacement', Object.clone(newDisplacement)); + this._setProperty('freeDisplacement', { ...newDisplacement }); } /** */ @@ -163,7 +177,7 @@ class Node { } /** */ - setPosition(position) { + setPosition(position: PositionType) { $assert($defined(position), 'Position can not be null'); $assert($defined(position.x), 'x can not be null'); $assert($defined(position.y), 'y can not be null'); @@ -172,12 +186,12 @@ class Node { const currentPos = this.getPosition(); if ( currentPos == null - || Math.abs(currentPos.x - position.x) > 2 - || Math.abs(currentPos.y - position.y) > 2 + || Math.abs(currentPos.x - position.x) > 2 + || Math.abs(currentPos.y - position.y) > 2 ) this._setProperty('position', position); } - _setProperty(key, value) { + _setProperty(key: string, value) { let prop = this._properties[key]; if (!prop) { prop = { @@ -214,20 +228,13 @@ class Node { /** @return {String} returns id, order, position, size and shrink information */ toString() { return ( - `[id:${ - this.getId() - }, order:${ - this.getOrder() - }, position: {${ - this.getPosition().x - },${ - this.getPosition().y - }}, size: {${ - this.getSize().width - },${ - this.getSize().height - }}, shrink:${ - this.areChildrenShrunken() + `[id:${this.getId() + }, order:${this.getOrder() + }, position: {${this.getPosition().x + },${this.getPosition().y + }}, size: {${this.getSize().width + },${this.getSize().height + }}, shrink:${this.areChildrenShrunken() }]` ); } diff --git a/packages/mindplot/src/components/layout/RootedTreeSet.js b/packages/mindplot/src/components/layout/RootedTreeSet.ts similarity index 85% rename from packages/mindplot/src/components/layout/RootedTreeSet.js rename to packages/mindplot/src/components/layout/RootedTreeSet.ts index b56799d9..e396e2bb 100644 --- a/packages/mindplot/src/components/layout/RootedTreeSet.js +++ b/packages/mindplot/src/components/layout/RootedTreeSet.ts @@ -16,8 +16,15 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; +import PositionType from '../PositionType'; +import Node from './Node'; class RootedTreeSet { + private _rootNodes: Node[]; + + protected _children: Node[]; + + constructor() { this._rootNodes = []; } @@ -26,7 +33,7 @@ class RootedTreeSet { * @param root * @throws will throw an error if root is null or undefined */ - setRoot(root) { + setRoot(root: Node) { $assert(root, 'root can not be null'); this._rootNodes.push(this._decodate(root)); } @@ -36,8 +43,7 @@ class RootedTreeSet { return this._rootNodes; } - _decodate(node) { - // eslint-disable-next-line no-param-reassign + _decodate(node: Node) { node._children = []; return node; } @@ -48,7 +54,7 @@ class RootedTreeSet { * @throws will throw an error if node with id already exists * @throws will throw an error if node has been added already */ - add(node) { + add(node: Node) { $assert(node, 'node can not be null'); $assert( !this.find(node.getId(), false), @@ -62,7 +68,7 @@ class RootedTreeSet { * @param nodeId * @throws will throw an error if nodeId is null or undefined */ - remove(nodeId) { + remove(nodeId: number) { $assert($defined(nodeId), 'nodeId can not be null'); const node = this.find(nodeId); this._rootNodes = this._rootNodes.filter((n) => n !== node); @@ -75,7 +81,7 @@ class RootedTreeSet { * @throws will throw an error if childId is null or undefined * @throws will throw an error if node with id childId is already a child of parent */ - connect(parentId, childId) { + connect(parentId: number, childId: number) { $assert($defined(parentId), 'parent can not be null'); $assert($defined(childId), 'child can not be null'); @@ -96,7 +102,7 @@ class RootedTreeSet { * @throws will throw an error if nodeId is null or undefined * @throws will throw an error if node is not connected */ - disconnect(nodeId) { + disconnect(nodeId: number) { $assert($defined(nodeId), 'nodeId can not be null'); const node = this.find(nodeId); $assert(node._parent, 'Node is not connected'); @@ -113,7 +119,7 @@ class RootedTreeSet { * @throws will throw an error if node cannot be found * @return node */ - find(id, validate = true) { + find(id: number, validate = true): Node { $assert($defined(id), 'id can not be null'); const graphs = this._rootNodes; @@ -132,7 +138,7 @@ class RootedTreeSet { return result; } - _find(id, parent) { + private _find(id: number, parent: Node): Node { if (parent.getId() === id) { return parent; } @@ -153,7 +159,7 @@ class RootedTreeSet { * @throws will throw an error if nodeId is null or undefined * @return children */ - getChildren(node) { + getChildren(node: Node): Node[] { $assert(node, 'node cannot be null'); return node._children; } @@ -163,7 +169,7 @@ class RootedTreeSet { * @throws will throw an error if node is null or undefined * @return root node or the provided node, if it has no parent */ - getRootNode(node) { + getRootNode(node: Node) { $assert(node, 'node cannot be null'); const parent = this.getParent(node); if ($defined(parent)) { @@ -177,12 +183,12 @@ class RootedTreeSet { * @param node * @throws will throw an error if node is null or undefined * @return {Array} ancestors */ - getAncestors(node) { + getAncestors(node: Node): Node[] { $assert(node, 'node cannot be null'); return this._getAncestors(this.getParent(node), []); } - _getAncestors(node, ancestors) { + _getAncestors(node: Node, ancestors: Node[]) { const result = ancestors; if (node) { result.push(node); @@ -196,7 +202,7 @@ class RootedTreeSet { * @throws will throw an error if node is null or undefined * @return {Array} siblings */ - getSiblings(node) { + getSiblings(node: Node): Node[] { $assert(node, 'node cannot be null'); if (!$defined(node._parent)) { return []; @@ -210,12 +216,12 @@ class RootedTreeSet { * @throws will throw an error if node is null or undefined * @return {Boolean} whether the node has a single path to a single leaf (no branching) */ - hasSinglePathToSingleLeaf(node) { + hasSinglePathToSingleLeaf(node: Node): boolean { $assert(node, 'node cannot be null'); return this._hasSinglePathToSingleLeaf(node); } - _hasSinglePathToSingleLeaf(node) { + private _hasSinglePathToSingleLeaf(node: Node): boolean { const children = this.getChildren(node); if (children.length === 1) { @@ -228,7 +234,7 @@ class RootedTreeSet { /** * @param node * @return {Boolean} whether the node is the start of a subbranch */ - isStartOfSubBranch(node) { + isStartOfSubBranch(node: Node): boolean { return this.getSiblings(node).length > 0 && this.getChildren(node).length === 1; } @@ -237,7 +243,7 @@ class RootedTreeSet { * @throws will throw an error if node is null or undefined * @return {Boolean} whether the node is a leaf */ - isLeaf(node) { + isLeaf(node: Node): boolean { $assert(node, 'node cannot be null'); return this.getChildren(node).length === 0; } @@ -247,7 +253,7 @@ class RootedTreeSet { * @throws will throw an error if node is null or undefined * @return parent */ - getParent(node) { + getParent(node: Node): Node { $assert(node, 'node cannot be null'); return node._parent; } @@ -265,7 +271,7 @@ class RootedTreeSet { return result; } - _dump(node, indent) { + _dump(node: Node, indent: string) { let result = `${indent + node}\n`; const children = this.getChildren(node); for (let i = 0; i < children.length; i++) { @@ -287,7 +293,7 @@ class RootedTreeSet { } } - _plot(canvas, node, root) { + _plot(canvas, node: Node, root?) { const children = this.getChildren(node); const cx = node.getPosition().x + canvas.width / 2 - node.getSize().width / 2; const cy = node.getPosition().y + canvas.height / 2 - node.getSize().height / 2; @@ -316,43 +322,27 @@ class RootedTreeSet { const rectSize = { width: rect.attr('width'), height: rect.attr('height') }; rect.click(() => { console.log( - `[id:${ - node.getId() - }, order:${ - node.getOrder() - }, position:(${ - rectPosition.x - }, ${ - rectPosition.y - }), size:${ - rectSize.width - },${ - rectSize.height - }, freeDisplacement:(${ - node.getFreeDisplacement().x - },${ - node.getFreeDisplacement().y + `[id:${node.getId() + }, order:${node.getOrder() + }, position:(${rectPosition.x + }, ${rectPosition.y + }), size:${rectSize.width + },${rectSize.height + }, freeDisplacement:(${node.getFreeDisplacement().x + },${node.getFreeDisplacement().y })]`, ); }); text.click(() => { console.log( - `[id:${ - node.getId() - }, order:${ - node.getOrder() - }, position:(${ - rectPosition.x - },${ - rectPosition.y - }), size:${ - rectSize.width - }x${ - rectSize.height - }, freeDisplacement:(${ - node.getFreeDisplacement().x - },${ - node.getFreeDisplacement().y + `[id:${node.getId() + }, order:${node.getOrder() + }, position:(${rectPosition.x + },${rectPosition.y + }), size:${rectSize.width + }x${rectSize.height + }, freeDisplacement:(${node.getFreeDisplacement().x + },${node.getFreeDisplacement().y })]`, ); }); @@ -367,7 +357,7 @@ class RootedTreeSet { * @param node * @param position */ - updateBranchPosition(node, position) { + updateBranchPosition(node: Node, position: PositionType): void { const oldPos = node.getPosition(); node.setPosition(position); @@ -386,7 +376,7 @@ class RootedTreeSet { * @param xOffset * @param yOffset */ - shiftBranchPosition(node, xOffset, yOffset) { + shiftBranchPosition(node: Node, xOffset: number, yOffset: number): void { const position = node.getPosition(); node.setPosition({ x: position.x + xOffset, y: position.y + yOffset }); @@ -402,7 +392,7 @@ class RootedTreeSet { * @param yOffset * @return siblings in the offset (vertical) direction, i.e. with lower or higher order */ - getSiblingsInVerticalDirection(node, yOffset) { + getSiblingsInVerticalDirection(node: Node, yOffset: number): Node[] { // siblings with lower or higher order // (depending on the direction of the offset and on the same side as their parent) const parent = this.getParent(node); @@ -429,7 +419,7 @@ class RootedTreeSet { * @return branches of the root node on the same side as the given node's, in the given * vertical direction */ - getBranchesInVerticalDirection(node, yOffset) { + getBranchesInVerticalDirection(node: Node, yOffset: number): Node[] { // direct descendants of the root that do not contain the node and are on the same side // and on the direction of the offset const rootNode = this.getRootNode(node); @@ -437,7 +427,7 @@ class RootedTreeSet { .filter(((child) => this._find(node.getId(), child))); const branch = branches[0]; - const rootDescendants = this.getSiblings(branch).filter((sibling) => { + const result = this.getSiblings(branch).filter((sibling) => { const sameSide = node.getPosition().x > rootNode.getPosition().x ? sibling.getPosition().x > rootNode.getPosition().x : sibling.getPosition().x < rootNode.getPosition().x; @@ -447,7 +437,7 @@ class RootedTreeSet { return sameSide && sameDirection; }, this); - return rootDescendants; + return result; } }