From 62024393e92f93ed2865a6debc3f4913a3ebfbef Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 5 Feb 2022 21:28:35 -0800 Subject: [PATCH] Migrate topic to TS --- .../{CentralTopic.js => CentralTopic.ts} | 16 +- .../mindplot/src/components/CursorType.ts | 21 ++ .../src/components/DesignerKeyboard.ts | 2 +- .../components/{MainTopic.js => MainTopic.ts} | 31 +-- packages/mindplot/src/components/NodeGraph.ts | 6 +- ...{ShrinkConnector.js => ShrinkConnector.ts} | 31 +-- .../components/StandaloneActionDispatcher.ts | 4 +- .../src/components/{Topic.js => Topic.ts} | 206 +++++++++--------- 8 files changed, 172 insertions(+), 145 deletions(-) rename packages/mindplot/src/components/{CentralTopic.js => CentralTopic.ts} (90%) create mode 100644 packages/mindplot/src/components/CursorType.ts rename packages/mindplot/src/components/{MainTopic.js => MainTopic.ts} (86%) rename packages/mindplot/src/components/{ShrinkConnector.js => ShrinkConnector.ts} (81%) rename packages/mindplot/src/components/{Topic.js => Topic.ts} (90%) diff --git a/packages/mindplot/src/components/CentralTopic.js b/packages/mindplot/src/components/CentralTopic.ts similarity index 90% rename from packages/mindplot/src/components/CentralTopic.js rename to packages/mindplot/src/components/CentralTopic.ts index f10be143..5164b6fa 100644 --- a/packages/mindplot/src/components/CentralTopic.js +++ b/packages/mindplot/src/components/CentralTopic.ts @@ -21,7 +21,11 @@ import Topic from './Topic'; import Shape from './util/Shape'; class CentralTopic extends Topic { - _registerEvents() { + _buildDragShape() { + // Ignore .. + } + + _registerEvents(): void { super._registerEvents(); // This disable the drag of the central topic. @@ -31,17 +35,15 @@ class CentralTopic extends Topic { }); } - /** */ - workoutIncomingConnectionPoint() { + + workoutIncomingConnectionPoint(): Point { return this.getPosition(); } - /** */ - setCursor(type) { + setCursor(type: string) { super.setCursor(type === 'move' ? 'default' : type); } - /** */ updateTopicShape() { // Overwite behaviour ... } @@ -58,7 +60,7 @@ class CentralTopic extends Topic { } /** */ - workoutOutgoingConnectionPoint(targetPosition) { + workoutOutgoingConnectionPoint(targetPosition: Point) { $assert(targetPosition, 'targetPoint can not be null'); const pos = this.getPosition(); const isAtRight = Shape.isAtRight(targetPosition, pos); diff --git a/packages/mindplot/src/components/CursorType.ts b/packages/mindplot/src/components/CursorType.ts new file mode 100644 index 00000000..fefa59be --- /dev/null +++ b/packages/mindplot/src/components/CursorType.ts @@ -0,0 +1,21 @@ +/* + * 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. + */ + +type CursorType = 'default' | 'move'; + +export default CursorType; diff --git a/packages/mindplot/src/components/DesignerKeyboard.ts b/packages/mindplot/src/components/DesignerKeyboard.ts index 23fd17ce..45bdd562 100644 --- a/packages/mindplot/src/components/DesignerKeyboard.ts +++ b/packages/mindplot/src/components/DesignerKeyboard.ts @@ -53,7 +53,7 @@ class DesignerKeyboard extends Keyboard { event.preventDefault(); const node = model.selectedTopic(); if (node) { - node.showTextEditor(); + node.showTextEditor(node.getText()); } }, ); diff --git a/packages/mindplot/src/components/MainTopic.js b/packages/mindplot/src/components/MainTopic.ts similarity index 86% rename from packages/mindplot/src/components/MainTopic.js rename to packages/mindplot/src/components/MainTopic.ts index 05e4fb16..ad0a6b43 100644 --- a/packages/mindplot/src/components/MainTopic.js +++ b/packages/mindplot/src/components/MainTopic.ts @@ -16,25 +16,29 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; -import { Point, Group } from '@wisemapping/web2d'; +import { Point, Group, ElementClass } from '@wisemapping/web2d'; import Topic from './Topic'; import { TopicShape } from './model/INodeModel'; import Shape from './util/Shape'; +import NodeModel from './model/NodeModel'; +import Workspace from './Workspace'; +import SizeType from './SizeType'; class MainTopic extends Topic { + private INNER_RECT_ATTRIBUTES: { stroke: string; }; /** * @extends mindplot.Topic * @constructs * @param model * @param options */ - constructor(model, options) { + constructor(model: NodeModel, options) { super(model, options); this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' }; } - _buildDragShape() { + _buildDragShape(): ElementClass { const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType()); const size = this.getSize(); innerShape.setSize(size.width, size.height); @@ -70,9 +74,8 @@ class MainTopic extends Topic { return group; } - /** */ - // eslint-disable-next-line no-unused-vars - updateTopicShape(targetTopic, workspace) { + + updateTopicShape(targetTopic: Topic) { // Change figure based on the connected topic ... const model = this.getModel(); let shapeType = model.getShapeType(); @@ -86,7 +89,7 @@ class MainTopic extends Topic { } /** */ - disconnect(workspace) { + disconnect(workspace: Workspace) { super.disconnect(workspace); const model = this.getModel(); let shapeType = model.getShapeType(); @@ -99,7 +102,7 @@ class MainTopic extends Topic { innerShape.setVisibility(true); } - _updatePositionOnChangeSize(oldSize, newSize) { + _updatePositionOnChangeSize(oldSize: SizeType, newSize: SizeType) { const xOffset = Math.round((newSize.width - oldSize.width) / 2); const pos = this.getPosition(); if ($defined(pos)) { @@ -112,22 +115,20 @@ class MainTopic extends Topic { } } - /** */ - workoutIncomingConnectionPoint(sourcePosition) { + workoutIncomingConnectionPoint(sourcePosition: Point) { return Shape.workoutIncomingConnectionPoint(this, sourcePosition); } - /** */ - workoutOutgoingConnectionPoint(targetPosition) { + workoutOutgoingConnectionPoint(targetPosition: Point) { $assert(targetPosition, 'targetPoint can not be null'); const pos = this.getPosition(); const isAtRight = Shape.isAtRight(targetPosition, pos); const size = this.getSize(); - let result; + let result: Point; if (this.getShapeType() === TopicShape.LINE) { result = new Point(); - const groupPosition = this._elem2d.getPosition(); + const groupPosition = this.get2DElement().getPosition(); const innerShareSize = this.getInnerShape().getSize(); if (innerShareSize) { @@ -149,7 +150,7 @@ class MainTopic extends Topic { result.y = pos.y + size.height / 2; } } else { - result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true); + result = Shape.calculateRectConnectionPoint(pos, size, isAtRight); } return result; } diff --git a/packages/mindplot/src/components/NodeGraph.ts b/packages/mindplot/src/components/NodeGraph.ts index 9233455c..75b29cd5 100644 --- a/packages/mindplot/src/components/NodeGraph.ts +++ b/packages/mindplot/src/components/NodeGraph.ts @@ -105,9 +105,9 @@ abstract class NodeGraph { return this._size; } - setSize(size) { - this._size.width = parseInt(size.width, 10); - this._size.height = parseInt(size.height, 10); + setSize(size: SizeType, force?: boolean) { + this._size.width = size.width; + this._size.height = size.height; } getModel(): NodeModel { diff --git a/packages/mindplot/src/components/ShrinkConnector.js b/packages/mindplot/src/components/ShrinkConnector.ts similarity index 81% rename from packages/mindplot/src/components/ShrinkConnector.js rename to packages/mindplot/src/components/ShrinkConnector.ts index 62574d7b..bb8aea96 100644 --- a/packages/mindplot/src/components/ShrinkConnector.js +++ b/packages/mindplot/src/components/ShrinkConnector.ts @@ -19,12 +19,17 @@ import { Elipse } from '@wisemapping/web2d'; import TopicConfig from './TopicConfig'; import ActionDispatcher from './ActionDispatcher'; +import Topic from './Topic'; +import IconGroup from './IconGroup'; class ShirinkConnector { - constructor(topic) { + private _isShrink: boolean; + private _ellipse: any; + constructor(topic: Topic) { this._isShrink = false; const ellipse = new Elipse(TopicConfig.INNER_RECT_ATTRIBUTES); this._ellipse = ellipse; + ellipse.setFill('rgb(62,118,179)'); ellipse.setSize(TopicConfig.CONNECTOR_WIDTH, TopicConfig.CONNECTOR_WIDTH); @@ -39,12 +44,12 @@ class ShirinkConnector { event.stopPropagation(); }); - ellipse.addEvent('mousedown', (event) => { + ellipse.addEvent('mousedown', (event: Event) => { // Avoid node creation ... event.stopPropagation(); }); - ellipse.addEvent('dblclick', (event) => { + ellipse.addEvent('dblclick', (event: Event) => { // Avoid node creation ... event.stopPropagation(); }); @@ -58,12 +63,11 @@ class ShirinkConnector { }); ellipse.setCursor('default'); - this._fillColor = '#f7f7f7'; const model = topic.getModel(); this.changeRender(model.areChildrenShrunken()); } - changeRender(isShrink) { + changeRender(isShrink: boolean) { const elipse = this._ellipse; if (isShrink) { elipse.setStroke('2', 'solid'); @@ -73,36 +77,35 @@ class ShirinkConnector { this._isShrink = isShrink; } - setVisibility(value) { + setVisibility(value: boolean): void { this._ellipse.setVisibility(value); } - setOpacity(opacity) { + setOpacity(opacity: number): void { this._ellipse.setOpacity(opacity); } - setFill(color) { - this._fillColor = color; + setFill(color: string): void { this._ellipse.setFill(color); } - setAttribute(name, value) { + setAttribute(name: string, value) { this._ellipse.setAttribute(name, value); } - addToWorkspace(group) { + addToWorkspace(group): void { group.append(this._ellipse); } - setPosition(x, y) { + setPosition(x: number, y: number): void { this._ellipse.setPosition(x, y); } - moveToBack() { + moveToBack(): void { this._ellipse.moveToBack(); } - moveToFront() { + moveToFront(): void { this._ellipse.moveToFront(); } } diff --git a/packages/mindplot/src/components/StandaloneActionDispatcher.ts b/packages/mindplot/src/components/StandaloneActionDispatcher.ts index f394afec..c74b4623 100644 --- a/packages/mindplot/src/components/StandaloneActionDispatcher.ts +++ b/packages/mindplot/src/components/StandaloneActionDispatcher.ts @@ -134,7 +134,7 @@ class StandaloneActionDispatcher extends ActionDispatcher { const result = topic.getFontFamily(); topic.setFontFamily(commandFontFamily, true); - topic._adjustShapes(); + topic.adjustShapes(); return result; }; @@ -147,7 +147,7 @@ class StandaloneActionDispatcher extends ActionDispatcher { $assert(topicsIds, 'topicIds can not be null'); $assert(color, 'color can not be null'); - const commandFunc = (topic, commandColor) => { + const commandFunc = (topic: Topic, commandColor: string) => { const result = topic.getFontColor(); topic.setFontColor(commandColor, true); return result; diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.ts similarity index 90% rename from packages/mindplot/src/components/Topic.js rename to packages/mindplot/src/components/Topic.ts index 3a1abe7e..a4249b84 100644 --- a/packages/mindplot/src/components/Topic.js +++ b/packages/mindplot/src/components/Topic.ts @@ -17,8 +17,9 @@ */ import $ from 'jquery'; import { $assert, $defined } from '@wisemapping/core-js'; + import { - Rect, Image, Line, Text, Group, + Rect, Image, Line, Text, Group, ElementClass, Point } from '@wisemapping/web2d'; import NodeGraph from './NodeGraph'; @@ -34,19 +35,32 @@ import NoteEditor from './widget/NoteEditor'; import ActionDispatcher from './ActionDispatcher'; import LinkEditor from './widget/LinkEditor'; + import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher'; import { TopicShape } from './model/INodeModel'; +import NodeModel from './model/NodeModel'; +import Relationship from './Relationship'; +import Workspace from './Workspace'; +import LayoutManager from './layout/LayoutManager'; +import NoteModel from './model/NoteModel'; +import LinkModel from './model/LinkModel'; +import SizeType from './SizeType'; const ICON_SCALING_FACTOR = 1.3; -class Topic extends NodeGraph { - /** - * @extends mindplot.NodeGraph - * @constructs - * @param model - * @param options - */ - constructor(model, options) { +abstract class Topic extends NodeGraph { + private _innerShape: ElementClass; + private _relationships: Relationship[]; + private _isInWorkspace: boolean; + private _children: Topic[]; + private _parent: Topic | null; + private _outerShape: ElementClass; + private _text: Text | null; + private _iconsGroup: IconGroup; + private _connector: any; + private _outgoingLine: Line; + + constructor(model: NodeModel, options) { super(model, options); this._children = []; this._parent = null; @@ -66,15 +80,15 @@ class Topic extends NodeGraph { } } - _registerEvents() { + protected _registerEvents(): void { this.setMouseEventsEnabled(true); // Prevent click on the topics being propagated ... - this.addEvent('click', (event) => { + this.addEvent('click', (event: Event) => { event.stopPropagation(); }); const me = this; - this.addEvent('dblclick', (event) => { + this.addEvent('dblclick', (event: Event) => { me._getTopicEventDispatcher().show(me); event.stopPropagation(); }); @@ -89,11 +103,11 @@ class Topic extends NodeGraph { } /** @return {mindplot.Topic} parent topic */ - getParent() { + getParent(): Topic | null { return this._parent; } - _setShapeType(type, updateModel) { + protected _setShapeType(type: string, updateModel: boolean) { // Remove inner shape figure ... const model = this.getModel(); if ($defined(updateModel) && updateModel) { @@ -147,7 +161,7 @@ class Topic extends NodeGraph { return result; } - _removeInnerShape() { + private _removeInnerShape() { const group = this.get2DElement(); const innerShape = this.getInnerShape(); group.removeChild(innerShape); @@ -155,7 +169,7 @@ class Topic extends NodeGraph { return innerShape; } - getInnerShape() { + getInnerShape(): ElementClass { if (!$defined(this._innerShape)) { // Create inner box. this._innerShape = this._buildShape( @@ -181,7 +195,7 @@ class Topic extends NodeGraph { return this._innerShape; } - _buildShape(attributes, shapeType) { + _buildShape(attributes, shapeType: string) { $assert(attributes, 'attributes can not be null'); $assert(shapeType, 'shapeType can not be null'); @@ -213,7 +227,8 @@ class Topic extends NodeGraph { strokeColor: '#495879', strokeWidth: 1, }); - result.setSize = function setSize(width, height) { + + result.setSize = function setSize(width: number, height: number) { this.size = { width, height, @@ -226,7 +241,7 @@ class Topic extends NodeGraph { result.setStroke(1, 'solid', stokeColor); }; - result.getSize = () => this.size; + result.getSize = function getSize() { this.size }; result.setPosition = () => { // Overwrite behaviour ... @@ -246,8 +261,7 @@ class Topic extends NodeGraph { return result; } - /** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */ - setCursor(type) { + setCursor(type: string) { const innerShape = this.getInnerShape(); innerShape.setCursor(type); @@ -258,8 +272,7 @@ class Topic extends NodeGraph { textShape.setCursor(type); } - /** @return outer shape */ - getOuterShape() { + getOuterShape(): ElementClass { if (!$defined(this._outerShape)) { const rect = this._buildShape( TopicConfig.OUTER_SHAPE_ATTRIBUTES, @@ -273,7 +286,7 @@ class Topic extends NodeGraph { return this._outerShape; } - getTextShape() { + getTextShape(): Text { if (!$defined(this._text)) { this._text = this._buildTextShape(false); @@ -285,7 +298,6 @@ class Topic extends NodeGraph { return this._text; } - /** @return icon group */ getOrBuildIconGroup() { if (!$defined(this._iconsGroup)) { this._iconsGroup = this._buildIconGroup(); @@ -297,11 +309,11 @@ class Topic extends NodeGraph { } /** */ - getIconGroup() { + getIconGroup(): IconGroup { return this._iconsGroup; } - _buildIconGroup() { + private _buildIconGroup(): Group { const textHeight = this.getTextShape().getFontHeight(); const iconSize = textHeight * ICON_SCALING_FACTOR; const result = new IconGroup(this.getId(), iconSize); @@ -338,7 +350,7 @@ class Topic extends NodeGraph { featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(), ); - this._adjustShapes(); + this.adjustShapes(); return result; } @@ -361,7 +373,7 @@ class Topic extends NodeGraph { if ($defined(iconGroup)) { iconGroup.removeIconByModel(featureModel); } - this._adjustShapes(); + this.adjustShapes(); } /** */ @@ -379,7 +391,7 @@ class Topic extends NodeGraph { return this._relationships; } - _buildTextShape(readOnly) { + _buildTextShape(readOnly): Text { const result = new Text(); const family = this.getFontFamily(); const size = this.getFontSize(); @@ -410,7 +422,7 @@ class Topic extends NodeGraph { const model = this.getModel(); model.setFontFamily(value); } - this._adjustShapes(updateModel); + this.adjustShapes(); } /** */ @@ -422,7 +434,7 @@ class Topic extends NodeGraph { const model = this.getModel(); model.setFontSize(value); } - this._adjustShapes(updateModel); + this.adjustShapes(); } /** */ @@ -433,7 +445,7 @@ class Topic extends NodeGraph { const model = this.getModel(); model.setFontStyle(value); } - this._adjustShapes(updateModel); + this.adjustShapes(); } /** */ @@ -444,7 +456,7 @@ class Topic extends NodeGraph { const model = this.getModel(); model.setFontWeight(value); } - this._adjustShapes(); + this.adjustShapes(); } /** */ @@ -531,7 +543,7 @@ class Topic extends NodeGraph { this._setText(text, true); } - this._adjustShapes(); + this.adjustShapes(); } /** */ @@ -731,7 +743,7 @@ class Topic extends NodeGraph { } /** */ - getShrinkConnector() { + getShrinkConnector(): ShirinkConnector { let result = this._connector; if (this._connector == null) { this._connector = new ShirinkConnector(this); @@ -741,41 +753,39 @@ class Topic extends NodeGraph { return result; } - /** */ - handleMouseOver() { + handleMouseOver(): void { const outerShape = this.getOuterShape(); outerShape.setOpacity(1); } - /** */ - handleMouseOut() { + handleMouseOut(): void { const outerShape = this.getOuterShape(); if (!this.isOnFocus()) { outerShape.setOpacity(0); } } - /** */ - showTextEditor(text) { + showTextEditor(text: string) { this._getTopicEventDispatcher().show(this, { text, }); } - /** */ - showNoteEditor() { + showNoteEditor(): void { const topicId = this.getId(); const model = this.getModel(); const editorModel = { - getValue() { + getValue(): string { const notes = model.findFeatureByType(TopicFeatureFactory.Note.id); let result; - if (notes.length > 0) result = notes[0].getText(); + if (notes.length > 0) { + result = (notes[0] as NoteModel).getText(); + } return result; }, - setValue(value) { + setValue(value: string) { const dispatcher = ActionDispatcher.getInstance(); const notes = model.findFeatureByType(TopicFeatureFactory.Note.id); if (!$defined(value)) { @@ -802,16 +812,18 @@ class Topic extends NodeGraph { const topicId = this.getId(); const model = this.getModel(); const editorModel = { - getValue() { + getValue(): string { // @param {mindplot.model.LinkModel[]} links const links = model.findFeatureByType(TopicFeatureFactory.Link.id); let result; - if (links.length > 0) result = links[0].getUrl(); + if (links.length > 0) { + result = (links[0] as LinkModel).getUrl(); + } return result; }, - setValue(value) { + setValue(value: string) { const dispatcher = ActionDispatcher.getInstance(); const links = model.findFeatureByType(TopicFeatureFactory.Link.id); if (!$defined(value)) { @@ -834,19 +846,18 @@ class Topic extends NodeGraph { editor.show(); } - /** */ closeEditors() { this._getTopicEventDispatcher().close(true); } - _getTopicEventDispatcher() { + private _getTopicEventDispatcher() { return TopicEventDispatcher.getInstance(); } /** * Point: references the center of the rect shape.!!! */ - setPosition(point) { + setPosition(point: Point) { $assert(point, 'position can not be null'); // allowed param reassign to avoid risks of existing code relying in this side-effect // eslint-disable-next-line no-param-reassign @@ -866,7 +877,7 @@ class Topic extends NodeGraph { const cy = point.y - size.height / 2; // Update visual position. - this._elem2d.setPosition(cx, cy); + this.get2DElement().setPosition(cx, cy); // Update connection lines ... this._updateConnectionLines(); @@ -876,7 +887,7 @@ class Topic extends NodeGraph { } /** */ - getOutgoingLine() { + getOutgoingLine(): Line { return this._outgoingLine; } @@ -887,8 +898,7 @@ class Topic extends NodeGraph { .map((node) => node.getOutgoingLine()); } - /** */ - getOutgoingConnectedTopic() { + getOutgoingConnectedTopic(): Topic { let result = null; const line = this.getOutgoingLine(); if ($defined(line)) { @@ -897,7 +907,7 @@ class Topic extends NodeGraph { return result; } - _updateConnectionLines() { + private _updateConnectionLines(): void { // Update this to parent line ... const outgoingLine = this.getOutgoingLine(); if ($defined(outgoingLine)) { @@ -913,9 +923,9 @@ class Topic extends NodeGraph { } /** */ - setBranchVisibility(value) { - let current = this; - let parent = this; + setBranchVisibility(value: boolean): void { + let current: Topic = this; + let parent: Topic = this; while (parent != null && !parent.isCentralTopic()) { current = parent; parent = current.getParent(); @@ -924,7 +934,7 @@ class Topic extends NodeGraph { } /** */ - setVisibility(value) { + setVisibility(value: boolean): void { this._setTopicVisibility(value); // Hide all children... @@ -941,7 +951,7 @@ class Topic extends NodeGraph { } /** */ - moveToBack() { + moveToBack(): void { // Update relationship lines this._relationships.forEach((r) => r.moveToBack()); @@ -954,7 +964,7 @@ class Topic extends NodeGraph { } /** */ - moveToFront() { + moveToFront(): void { this.get2DElement().moveToFront(); const connector = this.getShrinkConnector(); if ($defined(connector)) { @@ -965,12 +975,12 @@ class Topic extends NodeGraph { } /** */ - isVisible() { + isVisible(): boolean { const elem = this.get2DElement(); return elem.isVisible(); } - _setRelationshipLinesVisibility(value) { + private _setRelationshipLinesVisibility(value: boolean): void { this._relationships.forEach((relationship) => { const sourceTopic = relationship.getSourceTopic(); const targetTopic = relationship.getTargetTopic(); @@ -979,13 +989,13 @@ class Topic extends NodeGraph { const sourceParent = sourceTopic.getModel().getParent(); relationship.setVisibility( value - && (targetParent == null || !targetParent.areChildrenShrunken()) - && (sourceParent == null || !sourceParent.areChildrenShrunken()), + && (targetParent == null || !targetParent.areChildrenShrunken()) + && (sourceParent == null || !sourceParent.areChildrenShrunken()), ); }); } - _setTopicVisibility(value) { + private _setTopicVisibility(value: boolean) { const elem = this.get2DElement(); elem.setVisibility(value); @@ -1001,7 +1011,7 @@ class Topic extends NodeGraph { } /** */ - setOpacity(opacity) { + setOpacity(opacity: number): void { const elem = this.get2DElement(); elem.setOpacity(opacity); @@ -1013,7 +1023,7 @@ class Topic extends NodeGraph { textShape.setOpacity(opacity); } - _setChildrenVisibility(isVisible) { + private _setChildrenVisibility(isVisible: boolean) { // Hide all children. const children = this.getChildren(); const model = this.getModel(); @@ -1038,8 +1048,7 @@ class Topic extends NodeGraph { } } - /** */ - setSize(size, force) { + setSize(size: SizeType, force: boolean): void { $assert(size, 'size can not be null'); $assert($defined(size.width), 'size seem not to be a valid element'); const roundedSize = { @@ -1070,12 +1079,9 @@ class Topic extends NodeGraph { } } - _updatePositionOnChangeSize() { - $assert(false, 'this method must be overwrited.'); - } + protected abstract _updatePositionOnChangeSize(oldSize: SizeType, roundedSize: SizeType): void; - /** */ - disconnect(workspace) { + disconnect(workspace: Workspace): void { const outgoingLine = this.getOutgoingLine(); if ($defined(outgoingLine)) { $assert(workspace, 'workspace can not be null'); @@ -1119,20 +1125,19 @@ class Topic extends NodeGraph { } } - /** */ - getOrder() { + getOrder(): number { const model = this.getModel(); return model.getOrder(); } /** */ - setOrder(value) { + setOrder(value: number) { const model = this.getModel(); model.setOrder(value); } /** */ - connectTo(targetTopic, workspace) { + connectTo(targetTopic: Topic, workspace: 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'); @@ -1187,20 +1192,21 @@ class Topic extends NodeGraph { } } - /** */ - append(child) { + abstract updateTopicShape(targetTopic: Topic); + + append(child: Topic) { const children = this.getChildren(); children.push(child); } /** */ - removeChild(child) { + removeChild(child: Topic) { const children = this.getChildren(); this._children = children.filter((c) => c !== child); } /** */ - getChildren() { + getChildren(): Topic[] { let result = this._children; if (!$defined(result)) { this._children = []; @@ -1209,8 +1215,7 @@ class Topic extends NodeGraph { return result; } - /** */ - removeFromWorkspace(workspace) { + removeFromWorkspace(workspace: Workspace) { const elem2d = this.get2DElement(); workspace.removeChild(elem2d); const line = this.getOutgoingLine(); @@ -1221,8 +1226,7 @@ class Topic extends NodeGraph { EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel()); } - /** */ - addToWorkspace(workspace) { + addToWorkspace(workspace: Workspace) { const elem = this.get2DElement(); workspace.append(elem); if (!this.isInWorkspace()) { @@ -1238,16 +1242,16 @@ class Topic extends NodeGraph { } } this._isInWorkspace = true; - this._adjustShapes(); + this.adjustShapes(); } /** */ - isInWorkspace() { + isInWorkspace(): boolean { return this._isInWorkspace; } /** */ - createDragNode(layoutManager) { + createDragNode(layoutManager: LayoutManager) { const result = super.createDragNode(layoutManager); // Is the node already connected ? @@ -1263,7 +1267,7 @@ class Topic extends NodeGraph { return result; } - _adjustShapes() { + adjustShapes(): void { if (this._isInWorkspace) { const textShape = this.getTextShape(); if (this.getShapeType() !== TopicShape.IMAGE) { @@ -1287,7 +1291,7 @@ class Topic extends NodeGraph { this.setSize({ width: topicWith, height: topicHeight, - }); + }, false); // Adjust all topic elements positions ... const yPosition = Math.round((topicHeight - textHeight) / 2); @@ -1296,12 +1300,12 @@ class Topic extends NodeGraph { } else { // In case of images, the size is fixed ... const size = this.getModel().getImageSize(); - this.setSize(size); + this.setSize(size, false); } } } - _flatten2DElements(topic) { + private _flatten2DElements(topic: Topic) { let result = []; const children = topic.getChildren(); @@ -1320,11 +1324,8 @@ class Topic extends NodeGraph { return result; } - /** - * @param childTopic - * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself - */ - isChildTopic(childTopic) { + + isChildTopic(childTopic: Topic): boolean { let result = this.getId() === childTopic.getId(); if (!result) { const children = this.getChildren(); @@ -1339,7 +1340,6 @@ class Topic extends NodeGraph { return result; } - /** @return {Boolean} true if the topic is the central topic of the map */ isCentralTopic() { return this.getModel().getType() === 'CentralTopic'; }