vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 06:37:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Migrate topic to TS

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-05 21:28:35 -08:00
parent 56c045ea92
commit 62024393e9
8 changed files with 172 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/mindplot/src/components/CentralTopic.js → packages/mindplot/src/components/CentralTopic.ts
View File

@ -21,7 +21,11 @@ import Topic from './Topic';
import Shape from './util/Shape'; import Shape from './util/Shape';
class CentralTopic extends Topic { class CentralTopic extends Topic {
_registerEvents() { _buildDragShape() {
// Ignore ..
}
_registerEvents(): void {
super._registerEvents(); super._registerEvents();
// This disable the drag of the central topic. // This disable the drag of the central topic.
@ -31,17 +35,15 @@ class CentralTopic extends Topic {
}); });
} }
/** */
workoutIncomingConnectionPoint() { workoutIncomingConnectionPoint(): Point {
return this.getPosition(); return this.getPosition();
} }
/** */ setCursor(type: string) {
setCursor(type) {
super.setCursor(type === 'move' ? 'default' : type); super.setCursor(type === 'move' ? 'default' : type);
} }
/** */
updateTopicShape() { updateTopicShape() {
// Overwite behaviour ... // Overwite behaviour ...
} }
@ -58,7 +60,7 @@ class CentralTopic extends Topic {
} }
/** */ /** */
workoutOutgoingConnectionPoint(targetPosition) { workoutOutgoingConnectionPoint(targetPosition: Point) {
$assert(targetPosition, 'targetPoint can not be null'); $assert(targetPosition, 'targetPoint can not be null');
const pos = this.getPosition(); const pos = this.getPosition();
const isAtRight = Shape.isAtRight(targetPosition, pos); const isAtRight = Shape.isAtRight(targetPosition, pos);

21
packages/mindplot/src/components/CursorType.ts Normal file
View File

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

2
packages/mindplot/src/components/DesignerKeyboard.ts
View File

@ -53,7 +53,7 @@ class DesignerKeyboard extends Keyboard {
event.preventDefault(); event.preventDefault();
const node = model.selectedTopic(); const node = model.selectedTopic();
if (node) { if (node) {
node.showTextEditor(); node.showTextEditor(node.getText());
} }
}, },
); );

31
packages/mindplot/src/components/MainTopic.js → packages/mindplot/src/components/MainTopic.ts
View File

@ -16,25 +16,29 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; 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 Topic from './Topic';
import { TopicShape } from './model/INodeModel'; import { TopicShape } from './model/INodeModel';
import Shape from './util/Shape'; import Shape from './util/Shape';
import NodeModel from './model/NodeModel';
import Workspace from './Workspace';
import SizeType from './SizeType';
class MainTopic extends Topic { class MainTopic extends Topic {
private INNER_RECT_ATTRIBUTES: { stroke: string; };
/** /**
* @extends mindplot.Topic * @extends mindplot.Topic
* @constructs * @constructs
* @param model * @param model
* @param options * @param options
*/ */
constructor(model, options) { constructor(model: NodeModel, options) {
super(model, options); super(model, options);
this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' }; this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
} }
_buildDragShape() { _buildDragShape(): ElementClass {
const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType()); const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
const size = this.getSize(); const size = this.getSize();
innerShape.setSize(size.width, size.height); innerShape.setSize(size.width, size.height);
@ -70,9 +74,8 @@ class MainTopic extends Topic {
return group; return group;
} }
/** */
// eslint-disable-next-line no-unused-vars updateTopicShape(targetTopic: Topic) {
updateTopicShape(targetTopic, workspace) {
// Change figure based on the connected topic ... // Change figure based on the connected topic ...
const model = this.getModel(); const model = this.getModel();
let shapeType = model.getShapeType(); let shapeType = model.getShapeType();
@ -86,7 +89,7 @@ class MainTopic extends Topic {
} }
/** */ /** */
disconnect(workspace) { disconnect(workspace: Workspace) {
super.disconnect(workspace); super.disconnect(workspace);
const model = this.getModel(); const model = this.getModel();
let shapeType = model.getShapeType(); let shapeType = model.getShapeType();
@ -99,7 +102,7 @@ class MainTopic extends Topic {
innerShape.setVisibility(true); innerShape.setVisibility(true);
} }
_updatePositionOnChangeSize(oldSize, newSize) { _updatePositionOnChangeSize(oldSize: SizeType, newSize: SizeType) {
const xOffset = Math.round((newSize.width - oldSize.width) / 2); const xOffset = Math.round((newSize.width - oldSize.width) / 2);
const pos = this.getPosition(); const pos = this.getPosition();
if ($defined(pos)) { if ($defined(pos)) {
@ -112,22 +115,20 @@ class MainTopic extends Topic {
} }
} }
/** */ workoutIncomingConnectionPoint(sourcePosition: Point) {
workoutIncomingConnectionPoint(sourcePosition) {
return Shape.workoutIncomingConnectionPoint(this, sourcePosition); return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
} }
/** */ workoutOutgoingConnectionPoint(targetPosition: Point) {
workoutOutgoingConnectionPoint(targetPosition) {
$assert(targetPosition, 'targetPoint can not be null'); $assert(targetPosition, 'targetPoint can not be null');
const pos = this.getPosition(); const pos = this.getPosition();
const isAtRight = Shape.isAtRight(targetPosition, pos); const isAtRight = Shape.isAtRight(targetPosition, pos);
const size = this.getSize(); const size = this.getSize();
let result; let result: Point;
if (this.getShapeType() === TopicShape.LINE) { if (this.getShapeType() === TopicShape.LINE) {
result = new Point(); result = new Point();
const groupPosition = this._elem2d.getPosition(); const groupPosition = this.get2DElement().getPosition();
const innerShareSize = this.getInnerShape().getSize(); const innerShareSize = this.getInnerShape().getSize();
if (innerShareSize) { if (innerShareSize) {
@ -149,7 +150,7 @@ class MainTopic extends Topic {
result.y = pos.y + size.height / 2; result.y = pos.y + size.height / 2;
} }
} else { } else {
result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true); result = Shape.calculateRectConnectionPoint(pos, size, isAtRight);
} }
return result; return result;
} }

6
packages/mindplot/src/components/NodeGraph.ts
View File

@ -105,9 +105,9 @@ abstract class NodeGraph {
return this._size; return this._size;
} }
setSize(size) { setSize(size: SizeType, force?: boolean) {
this._size.width = parseInt(size.width, 10); this._size.width = size.width;
this._size.height = parseInt(size.height, 10); this._size.height = size.height;
} }
getModel(): NodeModel { getModel(): NodeModel {

31
packages/mindplot/src/components/ShrinkConnector.js → packages/mindplot/src/components/ShrinkConnector.ts
View File

@ -19,12 +19,17 @@ import { Elipse } from '@wisemapping/web2d';
import TopicConfig from './TopicConfig'; import TopicConfig from './TopicConfig';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
import Topic from './Topic';
import IconGroup from './IconGroup';
class ShirinkConnector { class ShirinkConnector {
constructor(topic) { private _isShrink: boolean;
private _ellipse: any;
constructor(topic: Topic) {
this._isShrink = false; this._isShrink = false;
const ellipse = new Elipse(TopicConfig.INNER_RECT_ATTRIBUTES); const ellipse = new Elipse(TopicConfig.INNER_RECT_ATTRIBUTES);
this._ellipse = ellipse; this._ellipse = ellipse;
ellipse.setFill('rgb(62,118,179)'); ellipse.setFill('rgb(62,118,179)');
ellipse.setSize(TopicConfig.CONNECTOR_WIDTH, TopicConfig.CONNECTOR_WIDTH); ellipse.setSize(TopicConfig.CONNECTOR_WIDTH, TopicConfig.CONNECTOR_WIDTH);
@ -39,12 +44,12 @@ class ShirinkConnector {
event.stopPropagation(); event.stopPropagation();
}); });
ellipse.addEvent('mousedown', (event) => { ellipse.addEvent('mousedown', (event: Event) => {
// Avoid node creation ... // Avoid node creation ...
event.stopPropagation(); event.stopPropagation();
}); });
ellipse.addEvent('dblclick', (event) => { ellipse.addEvent('dblclick', (event: Event) => {
// Avoid node creation ... // Avoid node creation ...
event.stopPropagation(); event.stopPropagation();
}); });
@ -58,12 +63,11 @@ class ShirinkConnector {
}); });
ellipse.setCursor('default'); ellipse.setCursor('default');
this._fillColor = '#f7f7f7';
const model = topic.getModel(); const model = topic.getModel();
this.changeRender(model.areChildrenShrunken()); this.changeRender(model.areChildrenShrunken());
} }
changeRender(isShrink) { changeRender(isShrink: boolean) {
const elipse = this._ellipse; const elipse = this._ellipse;
if (isShrink) { if (isShrink) {
elipse.setStroke('2', 'solid'); elipse.setStroke('2', 'solid');
@ -73,36 +77,35 @@ class ShirinkConnector {
this._isShrink = isShrink; this._isShrink = isShrink;
} }
setVisibility(value) { setVisibility(value: boolean): void {
this._ellipse.setVisibility(value); this._ellipse.setVisibility(value);
} }
setOpacity(opacity) { setOpacity(opacity: number): void {
this._ellipse.setOpacity(opacity); this._ellipse.setOpacity(opacity);
} }
setFill(color) { setFill(color: string): void {
this._fillColor = color;
this._ellipse.setFill(color); this._ellipse.setFill(color);
} }
setAttribute(name, value) { setAttribute(name: string, value) {
this._ellipse.setAttribute(name, value); this._ellipse.setAttribute(name, value);
} }
addToWorkspace(group) { addToWorkspace(group): void {
group.append(this._ellipse); group.append(this._ellipse);
} }
setPosition(x, y) { setPosition(x: number, y: number): void {
this._ellipse.setPosition(x, y); this._ellipse.setPosition(x, y);
} }
moveToBack() { moveToBack(): void {
this._ellipse.moveToBack(); this._ellipse.moveToBack();
} }
moveToFront() { moveToFront(): void {
this._ellipse.moveToFront(); this._ellipse.moveToFront();
} }
} }

4
packages/mindplot/src/components/StandaloneActionDispatcher.ts
View File

@ -134,7 +134,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
const result = topic.getFontFamily(); const result = topic.getFontFamily();
topic.setFontFamily(commandFontFamily, true); topic.setFontFamily(commandFontFamily, true);
topic._adjustShapes(); topic.adjustShapes();
return result; return result;
}; };
@ -147,7 +147,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
$assert(topicsIds, 'topicIds can not be null'); $assert(topicsIds, 'topicIds can not be null');
$assert(color, 'color 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(); const result = topic.getFontColor();
topic.setFontColor(commandColor, true); topic.setFontColor(commandColor, true);
return result; return result;

206
packages/mindplot/src/components/Topic.js → packages/mindplot/src/components/Topic.ts
View File

@ -17,8 +17,9 @@
*/ */
import $ from 'jquery'; import $ from 'jquery';
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import { import {
Rect, Image, Line, Text, Group, Rect, Image, Line, Text, Group, ElementClass, Point
} from '@wisemapping/web2d'; } from '@wisemapping/web2d';
import NodeGraph from './NodeGraph'; import NodeGraph from './NodeGraph';
@ -34,19 +35,32 @@ import NoteEditor from './widget/NoteEditor';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
import LinkEditor from './widget/LinkEditor'; import LinkEditor from './widget/LinkEditor';
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher'; import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
import { TopicShape } from './model/INodeModel'; 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; const ICON_SCALING_FACTOR = 1.3;
class Topic extends NodeGraph { abstract class Topic extends NodeGraph {
/** private _innerShape: ElementClass;
* @extends mindplot.NodeGraph private _relationships: Relationship[];
* @constructs private _isInWorkspace: boolean;
* @param model private _children: Topic[];
* @param options private _parent: Topic | null;
*/ private _outerShape: ElementClass;
constructor(model, options) { private _text: Text | null;
private _iconsGroup: IconGroup;
private _connector: any;
private _outgoingLine: Line;
constructor(model: NodeModel, options) {
super(model, options); super(model, options);
this._children = []; this._children = [];
this._parent = null; this._parent = null;
@ -66,15 +80,15 @@ class Topic extends NodeGraph {
} }
} }
_registerEvents() { protected _registerEvents(): void {
this.setMouseEventsEnabled(true); this.setMouseEventsEnabled(true);
// Prevent click on the topics being propagated ... // Prevent click on the topics being propagated ...
this.addEvent('click', (event) => { this.addEvent('click', (event: Event) => {
event.stopPropagation(); event.stopPropagation();
}); });
const me = this; const me = this;
this.addEvent('dblclick', (event) => { this.addEvent('dblclick', (event: Event) => {
me._getTopicEventDispatcher().show(me); me._getTopicEventDispatcher().show(me);
event.stopPropagation(); event.stopPropagation();
}); });
@ -89,11 +103,11 @@ class Topic extends NodeGraph {
} }
/** @return {mindplot.Topic} parent topic */ /** @return {mindplot.Topic} parent topic */
getParent() { getParent(): Topic | null {
return this._parent; return this._parent;
} }
_setShapeType(type, updateModel) { protected _setShapeType(type: string, updateModel: boolean) {
// Remove inner shape figure ... // Remove inner shape figure ...
const model = this.getModel(); const model = this.getModel();
if ($defined(updateModel) && updateModel) { if ($defined(updateModel) && updateModel) {
@ -147,7 +161,7 @@ class Topic extends NodeGraph {
return result; return result;
} }
_removeInnerShape() { private _removeInnerShape() {
const group = this.get2DElement(); const group = this.get2DElement();
const innerShape = this.getInnerShape(); const innerShape = this.getInnerShape();
group.removeChild(innerShape); group.removeChild(innerShape);
@ -155,7 +169,7 @@ class Topic extends NodeGraph {
return innerShape; return innerShape;
} }
getInnerShape() { getInnerShape(): ElementClass {
if (!$defined(this._innerShape)) { if (!$defined(this._innerShape)) {
// Create inner box. // Create inner box.
this._innerShape = this._buildShape( this._innerShape = this._buildShape(
@ -181,7 +195,7 @@ class Topic extends NodeGraph {
return this._innerShape; return this._innerShape;
} }
_buildShape(attributes, shapeType) { _buildShape(attributes, shapeType: string) {
$assert(attributes, 'attributes can not be null'); $assert(attributes, 'attributes can not be null');
$assert(shapeType, 'shapeType can not be null'); $assert(shapeType, 'shapeType can not be null');
@ -213,7 +227,8 @@ class Topic extends NodeGraph {
strokeColor: '#495879', strokeColor: '#495879',
strokeWidth: 1, strokeWidth: 1,
}); });
result.setSize = function setSize(width, height) {
result.setSize = function setSize(width: number, height: number) {
this.size = { this.size = {
width, width,
height, height,
@ -226,7 +241,7 @@ class Topic extends NodeGraph {
result.setStroke(1, 'solid', stokeColor); result.setStroke(1, 'solid', stokeColor);
}; };
result.getSize = () => this.size; result.getSize = function getSize() { this.size };
result.setPosition = () => { result.setPosition = () => {
// Overwrite behaviour ... // Overwrite behaviour ...
@ -246,8 +261,7 @@ class Topic extends NodeGraph {
return result; return result;
} }
/** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */ setCursor(type: string) {
setCursor(type) {
const innerShape = this.getInnerShape(); const innerShape = this.getInnerShape();
innerShape.setCursor(type); innerShape.setCursor(type);
@ -258,8 +272,7 @@ class Topic extends NodeGraph {
textShape.setCursor(type); textShape.setCursor(type);
} }
/** @return outer shape */ getOuterShape(): ElementClass {
getOuterShape() {
if (!$defined(this._outerShape)) { if (!$defined(this._outerShape)) {
const rect = this._buildShape( const rect = this._buildShape(
TopicConfig.OUTER_SHAPE_ATTRIBUTES, TopicConfig.OUTER_SHAPE_ATTRIBUTES,
@ -273,7 +286,7 @@ class Topic extends NodeGraph {
return this._outerShape; return this._outerShape;
} }
getTextShape() { getTextShape(): Text {
if (!$defined(this._text)) { if (!$defined(this._text)) {
this._text = this._buildTextShape(false); this._text = this._buildTextShape(false);
@ -285,7 +298,6 @@ class Topic extends NodeGraph {
return this._text; return this._text;
} }
/** @return icon group */
getOrBuildIconGroup() { getOrBuildIconGroup() {
if (!$defined(this._iconsGroup)) { if (!$defined(this._iconsGroup)) {
this._iconsGroup = this._buildIconGroup(); this._iconsGroup = this._buildIconGroup();
@ -297,11 +309,11 @@ class Topic extends NodeGraph {
} }
/** */ /** */
getIconGroup() { getIconGroup(): IconGroup {
return this._iconsGroup; return this._iconsGroup;
} }
_buildIconGroup() { private _buildIconGroup(): Group {
const textHeight = this.getTextShape().getFontHeight(); const textHeight = this.getTextShape().getFontHeight();
const iconSize = textHeight * ICON_SCALING_FACTOR; const iconSize = textHeight * ICON_SCALING_FACTOR;
const result = new IconGroup(this.getId(), iconSize); const result = new IconGroup(this.getId(), iconSize);
@ -338,7 +350,7 @@ class Topic extends NodeGraph {
featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(), featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(),
); );
this._adjustShapes(); this.adjustShapes();
return result; return result;
} }
@ -361,7 +373,7 @@ class Topic extends NodeGraph {
if ($defined(iconGroup)) { if ($defined(iconGroup)) {
iconGroup.removeIconByModel(featureModel); iconGroup.removeIconByModel(featureModel);
} }
this._adjustShapes(); this.adjustShapes();
} }
/** */ /** */
@ -379,7 +391,7 @@ class Topic extends NodeGraph {
return this._relationships; return this._relationships;
} }
_buildTextShape(readOnly) { _buildTextShape(readOnly): Text {
const result = new Text(); const result = new Text();
const family = this.getFontFamily(); const family = this.getFontFamily();
const size = this.getFontSize(); const size = this.getFontSize();
@ -410,7 +422,7 @@ class Topic extends NodeGraph {
const model = this.getModel(); const model = this.getModel();
model.setFontFamily(value); model.setFontFamily(value);
} }
this._adjustShapes(updateModel); this.adjustShapes();
} }
/** */ /** */
@ -422,7 +434,7 @@ class Topic extends NodeGraph {
const model = this.getModel(); const model = this.getModel();
model.setFontSize(value); model.setFontSize(value);
} }
this._adjustShapes(updateModel); this.adjustShapes();
} }
/** */ /** */
@ -433,7 +445,7 @@ class Topic extends NodeGraph {
const model = this.getModel(); const model = this.getModel();
model.setFontStyle(value); model.setFontStyle(value);
} }
this._adjustShapes(updateModel); this.adjustShapes();
} }
/** */ /** */
@ -444,7 +456,7 @@ class Topic extends NodeGraph {
const model = this.getModel(); const model = this.getModel();
model.setFontWeight(value); model.setFontWeight(value);
} }
this._adjustShapes(); this.adjustShapes();
} }
/** */ /** */
@ -531,7 +543,7 @@ class Topic extends NodeGraph {
this._setText(text, true); this._setText(text, true);
} }
this._adjustShapes(); this.adjustShapes();
} }
/** */ /** */
@ -731,7 +743,7 @@ class Topic extends NodeGraph {
} }
/** */ /** */
getShrinkConnector() { getShrinkConnector(): ShirinkConnector {
let result = this._connector; let result = this._connector;
if (this._connector == null) { if (this._connector == null) {
this._connector = new ShirinkConnector(this); this._connector = new ShirinkConnector(this);
@ -741,41 +753,39 @@ class Topic extends NodeGraph {
return result; return result;
} }
/** */ handleMouseOver(): void {
handleMouseOver() {
const outerShape = this.getOuterShape(); const outerShape = this.getOuterShape();
outerShape.setOpacity(1); outerShape.setOpacity(1);
} }
/** */ handleMouseOut(): void {
handleMouseOut() {
const outerShape = this.getOuterShape(); const outerShape = this.getOuterShape();
if (!this.isOnFocus()) { if (!this.isOnFocus()) {
outerShape.setOpacity(0); outerShape.setOpacity(0);
} }
} }
/** */ showTextEditor(text: string) {
showTextEditor(text) {
this._getTopicEventDispatcher().show(this, { this._getTopicEventDispatcher().show(this, {
text, text,
}); });
} }
/** */ showNoteEditor(): void {
showNoteEditor() {
const topicId = this.getId(); const topicId = this.getId();
const model = this.getModel(); const model = this.getModel();
const editorModel = { const editorModel = {
getValue() { getValue(): string {
const notes = model.findFeatureByType(TopicFeatureFactory.Note.id); const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
let result; let result;
if (notes.length > 0) result = notes[0].getText(); if (notes.length > 0) {
result = (notes[0] as NoteModel).getText();
}
return result; return result;
}, },
setValue(value) { setValue(value: string) {
const dispatcher = ActionDispatcher.getInstance(); const dispatcher = ActionDispatcher.getInstance();
const notes = model.findFeatureByType(TopicFeatureFactory.Note.id); const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
if (!$defined(value)) { if (!$defined(value)) {
@ -802,16 +812,18 @@ class Topic extends NodeGraph {
const topicId = this.getId(); const topicId = this.getId();
const model = this.getModel(); const model = this.getModel();
const editorModel = { const editorModel = {
getValue() { getValue(): string {
// @param {mindplot.model.LinkModel[]} links // @param {mindplot.model.LinkModel[]} links
const links = model.findFeatureByType(TopicFeatureFactory.Link.id); const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
let result; let result;
if (links.length > 0) result = links[0].getUrl(); if (links.length > 0) {
result = (links[0] as LinkModel).getUrl();
}
return result; return result;
}, },
setValue(value) { setValue(value: string) {
const dispatcher = ActionDispatcher.getInstance(); const dispatcher = ActionDispatcher.getInstance();
const links = model.findFeatureByType(TopicFeatureFactory.Link.id); const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
if (!$defined(value)) { if (!$defined(value)) {
@ -834,19 +846,18 @@ class Topic extends NodeGraph {
editor.show(); editor.show();
} }
/** */
closeEditors() { closeEditors() {
this._getTopicEventDispatcher().close(true); this._getTopicEventDispatcher().close(true);
} }
_getTopicEventDispatcher() { private _getTopicEventDispatcher() {
return TopicEventDispatcher.getInstance(); return TopicEventDispatcher.getInstance();
} }
/** /**
* Point: references the center of the rect shape.!!! * Point: references the center of the rect shape.!!!
*/ */
setPosition(point) { setPosition(point: Point) {
$assert(point, 'position can not be null'); $assert(point, 'position can not be null');
// allowed param reassign to avoid risks of existing code relying in this side-effect // allowed param reassign to avoid risks of existing code relying in this side-effect
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
@ -866,7 +877,7 @@ class Topic extends NodeGraph {
const cy = point.y - size.height / 2; const cy = point.y - size.height / 2;
// Update visual position. // Update visual position.
this._elem2d.setPosition(cx, cy); this.get2DElement().setPosition(cx, cy);
// Update connection lines ... // Update connection lines ...
this._updateConnectionLines(); this._updateConnectionLines();
@ -876,7 +887,7 @@ class Topic extends NodeGraph {
} }
/** */ /** */
getOutgoingLine() { getOutgoingLine(): Line {
return this._outgoingLine; return this._outgoingLine;
} }
@ -887,8 +898,7 @@ class Topic extends NodeGraph {
.map((node) => node.getOutgoingLine()); .map((node) => node.getOutgoingLine());
} }
/** */ getOutgoingConnectedTopic(): Topic {
getOutgoingConnectedTopic() {
let result = null; let result = null;
const line = this.getOutgoingLine(); const line = this.getOutgoingLine();
if ($defined(line)) { if ($defined(line)) {
@ -897,7 +907,7 @@ class Topic extends NodeGraph {
return result; return result;
} }
_updateConnectionLines() { private _updateConnectionLines(): void {
// Update this to parent line ... // Update this to parent line ...
const outgoingLine = this.getOutgoingLine(); const outgoingLine = this.getOutgoingLine();
if ($defined(outgoingLine)) { if ($defined(outgoingLine)) {
@ -913,9 +923,9 @@ class Topic extends NodeGraph {
} }
/** */ /** */
setBranchVisibility(value) { setBranchVisibility(value: boolean): void {
let current = this; let current: Topic = this;
let parent = this; let parent: Topic = this;
while (parent != null && !parent.isCentralTopic()) { while (parent != null && !parent.isCentralTopic()) {
current = parent; current = parent;
parent = current.getParent(); parent = current.getParent();
@ -924,7 +934,7 @@ class Topic extends NodeGraph {
} }
/** */ /** */
setVisibility(value) { setVisibility(value: boolean): void {
this._setTopicVisibility(value); this._setTopicVisibility(value);
// Hide all children... // Hide all children...
@ -941,7 +951,7 @@ class Topic extends NodeGraph {
} }
/** */ /** */
moveToBack() { moveToBack(): void {
// Update relationship lines // Update relationship lines
this._relationships.forEach((r) => r.moveToBack()); this._relationships.forEach((r) => r.moveToBack());
@ -954,7 +964,7 @@ class Topic extends NodeGraph {
} }
/** */ /** */
moveToFront() { moveToFront(): void {
this.get2DElement().moveToFront(); this.get2DElement().moveToFront();
const connector = this.getShrinkConnector(); const connector = this.getShrinkConnector();
if ($defined(connector)) { if ($defined(connector)) {
@ -965,12 +975,12 @@ class Topic extends NodeGraph {
} }
/** */ /** */
isVisible() { isVisible(): boolean {
const elem = this.get2DElement(); const elem = this.get2DElement();
return elem.isVisible(); return elem.isVisible();
} }
_setRelationshipLinesVisibility(value) { private _setRelationshipLinesVisibility(value: boolean): void {
this._relationships.forEach((relationship) => { this._relationships.forEach((relationship) => {
const sourceTopic = relationship.getSourceTopic(); const sourceTopic = relationship.getSourceTopic();
const targetTopic = relationship.getTargetTopic(); const targetTopic = relationship.getTargetTopic();
@ -979,13 +989,13 @@ class Topic extends NodeGraph {
const sourceParent = sourceTopic.getModel().getParent(); const sourceParent = sourceTopic.getModel().getParent();
relationship.setVisibility( relationship.setVisibility(
value value
&& (targetParent == null || !targetParent.areChildrenShrunken()) && (targetParent == null || !targetParent.areChildrenShrunken())
&& (sourceParent == null || !sourceParent.areChildrenShrunken()), && (sourceParent == null || !sourceParent.areChildrenShrunken()),
); );
}); });
} }
_setTopicVisibility(value) { private _setTopicVisibility(value: boolean) {
const elem = this.get2DElement(); const elem = this.get2DElement();
elem.setVisibility(value); elem.setVisibility(value);
@ -1001,7 +1011,7 @@ class Topic extends NodeGraph {
} }
/** */ /** */
setOpacity(opacity) { setOpacity(opacity: number): void {
const elem = this.get2DElement(); const elem = this.get2DElement();
elem.setOpacity(opacity); elem.setOpacity(opacity);
@ -1013,7 +1023,7 @@ class Topic extends NodeGraph {
textShape.setOpacity(opacity); textShape.setOpacity(opacity);
} }
_setChildrenVisibility(isVisible) { private _setChildrenVisibility(isVisible: boolean) {
// Hide all children. // Hide all children.
const children = this.getChildren(); const children = this.getChildren();
const model = this.getModel(); const model = this.getModel();
@ -1038,8 +1048,7 @@ class Topic extends NodeGraph {
} }
} }
/** */ setSize(size: SizeType, force: boolean): void {
setSize(size, force) {
$assert(size, 'size can not be null'); $assert(size, 'size can not be null');
$assert($defined(size.width), 'size seem not to be a valid element'); $assert($defined(size.width), 'size seem not to be a valid element');
const roundedSize = { const roundedSize = {
@ -1070,12 +1079,9 @@ class Topic extends NodeGraph {
} }
} }
_updatePositionOnChangeSize() { protected abstract _updatePositionOnChangeSize(oldSize: SizeType, roundedSize: SizeType): void;
$assert(false, 'this method must be overwrited.');
}
/** */ disconnect(workspace: Workspace): void {
disconnect(workspace) {
const outgoingLine = this.getOutgoingLine(); const outgoingLine = this.getOutgoingLine();
if ($defined(outgoingLine)) { if ($defined(outgoingLine)) {
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');
@ -1119,20 +1125,19 @@ class Topic extends NodeGraph {
} }
} }
/** */ getOrder(): number {
getOrder() {
const model = this.getModel(); const model = this.getModel();
return model.getOrder(); return model.getOrder();
} }
/** */ /** */
setOrder(value) { setOrder(value: number) {
const model = this.getModel(); const model = this.getModel();
model.setOrder(value); model.setOrder(value);
} }
/** */ /** */
connectTo(targetTopic, workspace) { connectTo(targetTopic: Topic, workspace: Workspace) {
$assert(!this._outgoingLine, 'Could not connect an already connected node'); $assert(!this._outgoingLine, 'Could not connect an already connected node');
$assert(targetTopic !== this, 'Circular connection are not allowed'); $assert(targetTopic !== this, 'Circular connection are not allowed');
$assert(targetTopic, 'Parent Graph can not be null'); $assert(targetTopic, 'Parent Graph can not be null');
@ -1187,20 +1192,21 @@ class Topic extends NodeGraph {
} }
} }
/** */ abstract updateTopicShape(targetTopic: Topic);
append(child) {
append(child: Topic) {
const children = this.getChildren(); const children = this.getChildren();
children.push(child); children.push(child);
} }
/** */ /** */
removeChild(child) { removeChild(child: Topic) {
const children = this.getChildren(); const children = this.getChildren();
this._children = children.filter((c) => c !== child); this._children = children.filter((c) => c !== child);
} }
/** */ /** */
getChildren() { getChildren(): Topic[] {
let result = this._children; let result = this._children;
if (!$defined(result)) { if (!$defined(result)) {
this._children = []; this._children = [];
@ -1209,8 +1215,7 @@ class Topic extends NodeGraph {
return result; return result;
} }
/** */ removeFromWorkspace(workspace: Workspace) {
removeFromWorkspace(workspace) {
const elem2d = this.get2DElement(); const elem2d = this.get2DElement();
workspace.removeChild(elem2d); workspace.removeChild(elem2d);
const line = this.getOutgoingLine(); const line = this.getOutgoingLine();
@ -1221,8 +1226,7 @@ class Topic extends NodeGraph {
EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel()); EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel());
} }
/** */ addToWorkspace(workspace: Workspace) {
addToWorkspace(workspace) {
const elem = this.get2DElement(); const elem = this.get2DElement();
workspace.append(elem); workspace.append(elem);
if (!this.isInWorkspace()) { if (!this.isInWorkspace()) {
@ -1238,16 +1242,16 @@ class Topic extends NodeGraph {
} }
} }
this._isInWorkspace = true; this._isInWorkspace = true;
this._adjustShapes(); this.adjustShapes();
} }
/** */ /** */
isInWorkspace() { isInWorkspace(): boolean {
return this._isInWorkspace; return this._isInWorkspace;
} }
/** */ /** */
createDragNode(layoutManager) { createDragNode(layoutManager: LayoutManager) {
const result = super.createDragNode(layoutManager); const result = super.createDragNode(layoutManager);
// Is the node already connected ? // Is the node already connected ?
@ -1263,7 +1267,7 @@ class Topic extends NodeGraph {
return result; return result;
} }
_adjustShapes() { adjustShapes(): void {
if (this._isInWorkspace) { if (this._isInWorkspace) {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
if (this.getShapeType() !== TopicShape.IMAGE) { if (this.getShapeType() !== TopicShape.IMAGE) {
@ -1287,7 +1291,7 @@ class Topic extends NodeGraph {
this.setSize({ this.setSize({
width: topicWith, width: topicWith,
height: topicHeight, height: topicHeight,
}); }, false);
// Adjust all topic elements positions ... // Adjust all topic elements positions ...
const yPosition = Math.round((topicHeight - textHeight) / 2); const yPosition = Math.round((topicHeight - textHeight) / 2);
@ -1296,12 +1300,12 @@ class Topic extends NodeGraph {
} else { } else {
// In case of images, the size is fixed ... // In case of images, the size is fixed ...
const size = this.getModel().getImageSize(); const size = this.getModel().getImageSize();
this.setSize(size); this.setSize(size, false);
} }
} }
} }
_flatten2DElements(topic) { private _flatten2DElements(topic: Topic) {
let result = []; let result = [];
const children = topic.getChildren(); const children = topic.getChildren();
@ -1320,11 +1324,8 @@ class Topic extends NodeGraph {
return result; return result;
} }
/**
* @param childTopic isChildTopic(childTopic: Topic): boolean {
* @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
*/
isChildTopic(childTopic) {
let result = this.getId() === childTopic.getId(); let result = this.getId() === childTopic.getId();
if (!result) { if (!result) {
const children = this.getChildren(); const children = this.getChildren();
@ -1339,7 +1340,6 @@ class Topic extends NodeGraph {
return result; return result;
} }
/** @return {Boolean} true if the topic is the central topic of the map */
isCentralTopic() { isCentralTopic() {
return this.getModel().getType() === 'CentralTopic'; return this.getModel().getType() === 'CentralTopic';
} }