From d08e277a1d0c85fea9802eef7f918a6d41b06c76 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 17 Dec 2022 22:19:37 -0800 Subject: [PATCH] Add type for shape type. --- .../mindplot/src/components/ConnectionLine.ts | 7 ++--- packages/mindplot/src/components/Designer.ts | 7 ++--- packages/mindplot/src/components/MainTopic.ts | 7 ++--- .../components/StandaloneActionDispatcher.ts | 3 +- packages/mindplot/src/components/Topic.ts | 30 +++++++++---------- .../src/components/TopicEventDispatcher.ts | 7 +---- .../mindplot/src/components/TopicStyle.ts | 14 ++++----- .../src/components/export/FreemindExporter.ts | 12 ++++---- .../src/components/import/FreemindImporter.ts | 19 +++++++----- .../src/components/model/INodeModel.ts | 21 ++++--------- .../persistence/XMLSerializerTango.ts | 5 ++-- .../mindplot/src/components/util/Shape.ts | 3 +- 12 files changed, 59 insertions(+), 76 deletions(-) diff --git a/packages/mindplot/src/components/ConnectionLine.ts b/packages/mindplot/src/components/ConnectionLine.ts index efcc481c..6a747d87 100644 --- a/packages/mindplot/src/components/ConnectionLine.ts +++ b/packages/mindplot/src/components/ConnectionLine.ts @@ -18,7 +18,6 @@ import { $assert } from '@wisemapping/core-js'; import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d'; -import { TopicShape } from './model/INodeModel'; import RelationshipModel from './model/RelationshipModel'; import Topic from './Topic'; import TopicConfig from './TopicConfig'; @@ -133,9 +132,9 @@ class ConnectionLine { const targetPosition = targetTopic.getPosition(); const offset = TopicConfig.CONNECTOR_WIDTH / 2; const targetTopicSize = targetTopic.getSize(); - let y; - let x; - if (targetTopic.getShapeType() === TopicShape.LINE) { + let y: number; + let x: number; + if (targetTopic.getShapeType() === 'line') { y = targetTopicSize.height; } else { y = targetTopicSize.height / 2; diff --git a/packages/mindplot/src/components/Designer.ts b/packages/mindplot/src/components/Designer.ts index e4ac853f..6366da33 100644 --- a/packages/mindplot/src/components/Designer.ts +++ b/packages/mindplot/src/components/Designer.ts @@ -46,7 +46,6 @@ import EventBusDispatcher from './layout/EventBusDispatcher'; import LayoutManager from './layout/LayoutManager'; -import { TopicShape } from './model/INodeModel'; import { $notify } from './widget/ToolbarNotifier'; import RelationshipModel from './model/RelationshipModel'; import Mindmap from './model/Mindmap'; @@ -836,7 +835,7 @@ class Designer extends Events { /** */ changeBackgroundColor(color: string) { - const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE; + const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line'; const validateError = 'Color can not be set to line topics.'; const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); @@ -846,7 +845,7 @@ class Designer extends Events { } changeBorderColor(color: string) { - const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE; + const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line'; const validateError = 'Color can not be set to line topics.'; const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); if (topicsIds.length > 0) { @@ -863,7 +862,7 @@ class Designer extends Events { changeTopicShape(shape: string) { const validateFunc = (topic: Topic) => - !(topic.getType() === 'CentralTopic' && shape === TopicShape.LINE); + !(topic.getType() === 'CentralTopic' && shape === 'line'); const validateError = 'Central Topic shape can not be changed to line figure.'; const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); diff --git a/packages/mindplot/src/components/MainTopic.ts b/packages/mindplot/src/components/MainTopic.ts index 28c1ccd0..bc92b19f 100644 --- a/packages/mindplot/src/components/MainTopic.ts +++ b/packages/mindplot/src/components/MainTopic.ts @@ -19,7 +19,6 @@ import { $assert, $defined } from '@wisemapping/core-js'; 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'; @@ -59,7 +58,7 @@ class MainTopic extends Topic { group.append(innerShape); // Add Text ... - if (this.getShapeType() !== TopicShape.IMAGE) { + if (this.getShapeType() !== 'image') { const textShape = this._buildTextShape(true); const text = this.getText(); textShape.setText(text); @@ -94,7 +93,7 @@ class MainTopic extends Topic { if (!$defined(shapeType)) { // Change figure ... shapeType = this.getShapeType(); - this._setShapeType(TopicShape.ROUNDED_RECT, false); + this._setShapeType('rounded rectangle', false); } const innerShape = this.getInnerShape(); innerShape.setVisibility(true); @@ -124,7 +123,7 @@ class MainTopic extends Topic { const size = this.getSize(); let result: Point = { x: 0, y: 0 }; - if (this.getShapeType() === TopicShape.LINE) { + if (this.getShapeType() === 'line') { const groupPosition = this.get2DElement().getPosition(); const innerShareSize = this.getInnerShape().getSize(); diff --git a/packages/mindplot/src/components/StandaloneActionDispatcher.ts b/packages/mindplot/src/components/StandaloneActionDispatcher.ts index c302010e..9bbf67cc 100644 --- a/packages/mindplot/src/components/StandaloneActionDispatcher.ts +++ b/packages/mindplot/src/components/StandaloneActionDispatcher.ts @@ -37,6 +37,7 @@ import Command from './Command'; import FeatureType from './model/FeatureType'; import PositionType from './PositionType'; import { PivotType } from './RelationshipControlPoints'; +import { TopicShapeType } from './model/INodeModel'; class StandaloneActionDispatcher extends ActionDispatcher { private _actionRunner: DesignerActionRunner; @@ -215,7 +216,7 @@ class StandaloneActionDispatcher extends ActionDispatcher { const commandFunc = (topic: Topic, commandShapeType: string) => { const result = topic.getShapeType(); - topic.setShapeType(commandShapeType); + topic.setShapeType(commandShapeType as TopicShapeType); return result; }; diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index 13d25de6..f43af6b6 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/packages/mindplot/src/components/Topic.ts @@ -30,7 +30,7 @@ import ShirinkConnector from './ShrinkConnector'; import ActionDispatcher from './ActionDispatcher'; import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher'; -import { TopicShape } from './model/INodeModel'; +import { TopicShapeType } from './model/INodeModel'; import NodeModel from './model/NodeModel'; import Relationship from './Relationship'; import Workspace from './Workspace'; @@ -100,7 +100,7 @@ abstract class Topic extends NodeGraph { }); } - setShapeType(type: string): void { + setShapeType(type: TopicShapeType): void { this._setShapeType(type, true); } @@ -108,14 +108,14 @@ abstract class Topic extends NodeGraph { return this._parent; } - protected _setShapeType(type: string, updateModel: boolean) { + protected _setShapeType(type: TopicShapeType, updateModel: boolean) { // Remove inner shape figure ... const model = this.getModel(); if ($defined(updateModel) && updateModel) { model.setShapeType(type); } // If shape is line, reset background color to default. - if (type === TopicShape.LINE) { + if (type === 'line') { const color = TopicStyle.defaultBackgroundColor(this); this.setBackgroundColor(color); } @@ -152,10 +152,10 @@ abstract class Topic extends NodeGraph { } } - getShapeType(): string { + getShapeType(): TopicShapeType { const model = this.getModel(); let result = model.getShapeType(); - if (!$defined(result)) { + if (!result) { result = TopicStyle.defaultShapeType(this); } return result; @@ -192,14 +192,14 @@ abstract class Topic extends NodeGraph { return this._innerShape; } - _buildShape(attributes, shapeType: string) { + _buildShape(attributes, shapeType: TopicShapeType): ElementClass { $assert(attributes, 'attributes can not be null'); $assert(shapeType, 'shapeType can not be null'); let result; - if (shapeType === TopicShape.RECTANGLE) { + if (shapeType === 'rectangle') { result = new Rect(0, attributes); - } else if (shapeType === TopicShape.IMAGE) { + } else if (shapeType === 'image') { const model = this.getModel(); const url = model.getImageUrl(); const size = model.getImageSize(); @@ -215,11 +215,11 @@ abstract class Topic extends NodeGraph { result.setPosition = function setPosition() { // Ignore ... }; - } else if (shapeType === TopicShape.ELLIPSE) { + } else if (shapeType === 'elipse') { result = new Rect(0.9, attributes); - } else if (shapeType === TopicShape.ROUNDED_RECT) { + } else if (shapeType === 'rounded rectangle') { result = new Rect(0.3, attributes); - } else if (shapeType === TopicShape.LINE) { + } else if (shapeType === 'line') { result = new Line({ strokeColor: '#495879', strokeWidth: 1, @@ -273,7 +273,7 @@ abstract class Topic extends NodeGraph { getOuterShape(): ElementClass { if (!$defined(this._outerShape)) { - const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, TopicShape.ROUNDED_RECT); + const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, 'rounded rectangle'); rect.setPosition(-2, -3); rect.setOpacity(0); this._outerShape = rect; @@ -957,7 +957,7 @@ abstract class Topic extends NodeGraph { // Hide text shape ... const textShape = this.getTextShape(); - textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false, fade); + textShape.setVisibility(this.getShapeType() !== 'image' ? value : false, fade); } /** */ @@ -1223,7 +1223,7 @@ abstract class Topic extends NodeGraph { adjustShapes(): void { if (this._isInWorkspace) { const textShape = this.getTextShape(); - if (this.getShapeType() !== TopicShape.IMAGE) { + if (this.getShapeType() !== 'image') { // Calculate topic size and adjust elements ... const textWidth = textShape.getWidth(); const textHeight = textShape.getHeight(); diff --git a/packages/mindplot/src/components/TopicEventDispatcher.ts b/packages/mindplot/src/components/TopicEventDispatcher.ts index 4266a7d4..aa28afc1 100644 --- a/packages/mindplot/src/components/TopicEventDispatcher.ts +++ b/packages/mindplot/src/components/TopicEventDispatcher.ts @@ -17,7 +17,6 @@ */ import { $assert } from '@wisemapping/core-js'; import Events from './Events'; -import { TopicShape } from './model/INodeModel'; import Topic from './Topic'; import MultitTextEditor from './MultilineTextEditor'; @@ -59,11 +58,7 @@ class TopicEventDispatcher extends Events { // Open the new editor ... const model = topic.getModel(); - if ( - model.getShapeType() !== TopicShape.IMAGE && - !this._readOnly && - eventType === TopicEvent.EDIT - ) { + if (model.getShapeType() !== 'image' && !this._readOnly && eventType === TopicEvent.EDIT) { editor.show(topic, options ? options.text : ''); } else { this.fireEvent(eventType, { model, readOnly: this._readOnly }); diff --git a/packages/mindplot/src/components/TopicStyle.ts b/packages/mindplot/src/components/TopicStyle.ts index 5f4e07bd..5a938258 100644 --- a/packages/mindplot/src/components/TopicStyle.ts +++ b/packages/mindplot/src/components/TopicStyle.ts @@ -17,7 +17,7 @@ */ import { $assert } from '@wisemapping/core-js'; import { $msg } from './Messages'; -import { TopicShape } from './model/INodeModel'; +import { TopicShapeType } from './model/INodeModel'; import Topic from './Topic'; type TopicStyleType = { @@ -31,7 +31,7 @@ type TopicStyleType = { color: string; }; msgKey: string; - shapeType: string; + shapeType: TopicShapeType; }; const TopicDefaultStyles = { @@ -46,7 +46,7 @@ const TopicDefaultStyles = { color: '#ffffff', }, msgKey: 'CENTRAL_TOPIC', - shapeType: TopicShape.ROUNDED_RECT, + shapeType: 'rounded rectangle' as TopicShapeType, }, MAIN_TOPIC: { borderColor: 'rgb(2,59,185)', @@ -59,7 +59,7 @@ const TopicDefaultStyles = { color: 'rgb(82,92,97)', }, msgKey: 'MAIN_TOPIC', - shapeType: TopicShape.LINE, + shapeType: 'line' as TopicShapeType, }, SUB_TOPIC: { borderColor: 'rgb(2,59,185)', @@ -72,7 +72,7 @@ const TopicDefaultStyles = { color: 'rgb(82,92,97)', }, msgKey: 'SUB_TOPIC', - shapeType: TopicShape.LINE, + shapeType: 'line' as TopicShapeType, }, ISOLATED_TOPIC: { @@ -86,7 +86,7 @@ const TopicDefaultStyles = { color: 'rgb(82,92,97)', }, msgKey: 'ISOLATED_TOPIC', - shapeType: TopicShape.LINE, + shapeType: 'line' as TopicShapeType, }, }; @@ -133,7 +133,7 @@ class TopicStyle { return Math.round(topic.getTextShape().getFontHeight() * 0.5); } - static defaultShapeType(topic) { + static defaultShapeType(topic: Topic) { return this._getStyles(topic).shapeType; } } diff --git a/packages/mindplot/src/components/export/FreemindExporter.ts b/packages/mindplot/src/components/export/FreemindExporter.ts index e7a31b5d..3ffc33c6 100644 --- a/packages/mindplot/src/components/export/FreemindExporter.ts +++ b/packages/mindplot/src/components/export/FreemindExporter.ts @@ -1,6 +1,6 @@ import xmlFormatter from 'xml-formatter'; import { Mindmap } from '../..'; -import INodeModel, { TopicShape } from '../model/INodeModel'; +import INodeModel, { TopicShapeType } from '../model/INodeModel'; import RelationshipModel from '../model/RelationshipModel'; import SvgIconModel from '../model/SvgIconModel'; import FeatureModel from '../model/FeatureModel'; @@ -143,18 +143,18 @@ class FreemindExporter extends Exporter { } } - const wiseShape: string = mindmapTopic.getShapeType(); - if (wiseShape && TopicShape.LINE !== wiseShape) { + const wiseShape: TopicShapeType = mindmapTopic.getShapeType(); + if (wiseShape && wiseShape !== 'line') { freemindNode.setBackgorundColor(this.rgbToHex(mindmapTopic.getBackgroundColor())); } if (wiseShape) { - const isRootRoundedRectangle = isRoot && TopicShape.ROUNDED_RECT !== wiseShape; - const notIsRootLine = !isRoot && TopicShape.LINE !== wiseShape; + const isRootRoundedRectangle = isRoot && wiseShape !== 'rounded rectangle'; + const notIsRootLine = !isRoot && wiseShape !== 'line'; if (isRootRoundedRectangle || notIsRootLine) { let style: string = wiseShape; - if (TopicShape.ROUNDED_RECT === style || TopicShape.ELLIPSE === style) { + if (style === 'rounded rectangle' || style === 'elipse') { style = 'bubble'; } freemindNode.setStyle(style); diff --git a/packages/mindplot/src/components/import/FreemindImporter.ts b/packages/mindplot/src/components/import/FreemindImporter.ts index cecd74d3..4797bc7f 100644 --- a/packages/mindplot/src/components/import/FreemindImporter.ts +++ b/packages/mindplot/src/components/import/FreemindImporter.ts @@ -3,7 +3,6 @@ import Importer from './Importer'; import Mindmap from '../model/Mindmap'; import RelationshipModel from '../model/RelationshipModel'; import NodeModel from '../model/NodeModel'; -import { TopicShape } from '../model/INodeModel'; import FreemindConstant from '../export/freemind/FreemindConstant'; import FreemindMap from '../export/freemind/Map'; import FreemindNode, { Choise } from '../export/freemind/Node'; @@ -19,6 +18,7 @@ import NoteModel from '../model/NoteModel'; import FeatureModelFactory from '../model/FeatureModelFactory'; import FeatureModel from '../model/FeatureModel'; import XMLSerializerFactory from '../persistence/XMLSerializerFactory'; +import { TopicShapeType } from '../model/INodeModel'; export default class FreemindImporter extends Importer { private mindmap: Mindmap; @@ -172,7 +172,9 @@ export default class FreemindImporter extends Importer { if (centralTopic === false) { const shape = this.getShapeFromFreeNode(freeNode); - if (shape && shape !== 'fork') wiseTopic.setShapeType(shape); + if (shape) { + wiseTopic.setShapeType(shape); + } } // Check for style... @@ -390,15 +392,16 @@ export default class FreemindImporter extends Importer { return result; } - private getShapeFromFreeNode(node: FreemindNode): string { - let result: string = node.getStyle(); + private getShapeFromFreeNode(node: FreemindNode): TopicShapeType { + const shape = node.getStyle(); - if (result === 'bubble') { - result = TopicShape.ROUNDED_RECT; + let result: TopicShapeType; + if (shape === 'bubble') { + result = 'rounded rectangle'; } else if (node.getBackgorundColor()) { - result = TopicShape.RECTANGLE; + result = 'rectangle'; } else { - result = TopicShape.LINE; + result = 'line'; } return result; } diff --git a/packages/mindplot/src/components/model/INodeModel.ts b/packages/mindplot/src/components/model/INodeModel.ts index d84b349f..05311b93 100644 --- a/packages/mindplot/src/components/model/INodeModel.ts +++ b/packages/mindplot/src/components/model/INodeModel.ts @@ -23,6 +23,8 @@ import Mindmap from './Mindmap'; export type NodeModelType = 'CentralTopic' | 'MainTopic'; +export type TopicShapeType = 'rectangle' | 'rounded rectangle' | 'elipse' | 'line' | 'image'; + // regex taken from https://stackoverflow.com/a/34763398/58128 const parseJsObject = (str: string) => JSON.parse(str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": ')); @@ -131,8 +133,8 @@ abstract class INodeModel { } /** */ - getShapeType(): string { - return this.getProperty('shapeType') as string; + getShapeType(): TopicShapeType { + return this.getProperty('shapeType') as TopicShapeType; } /** */ @@ -357,24 +359,11 @@ abstract class INodeModel { return result; } - abstract removeChild(child: INodeModel); + abstract removeChild(child: INodeModel): void; static _nextUUID(): number { INodeModel._nextUuid += 1; return INodeModel._nextUuid; } } - -const TopicShape = { - RECTANGLE: 'rectangle', - ROUNDED_RECT: 'rounded rectangle', - ELLIPSE: 'elipse', - LINE: 'line', - IMAGE: 'image', -}; - -/** - * @todo: This method must be implemented. (unascribed) - */ -export { TopicShape }; export default INodeModel; diff --git a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts index c3037ba1..388ba1db 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts +++ b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts @@ -18,7 +18,6 @@ import { $assert, $defined, createDocument } from '@wisemapping/core-js'; import { Point } from '@wisemapping/web2d'; import Mindmap from '../model/Mindmap'; -import { TopicShape } from '../model/INodeModel'; import { LineType } from '../ConnectionLine'; import FeatureModelFactory from '../model/FeatureModelFactory'; import NodeModel from '../model/NodeModel'; @@ -98,7 +97,7 @@ class XMLSerializerTango implements XMLMindmapSerializer { if ($defined(shape)) { parentTopic.setAttribute('shape', shape); - if (shape === TopicShape.IMAGE) { + if (shape === 'image') { const size = topic.getImageSize(); parentTopic.setAttribute('image', `${size.width},${size.height}:${topic.getImageUrl()}`); } @@ -331,7 +330,7 @@ class XMLSerializerTango implements XMLMindmapSerializer { // Is an image ? const image = domElem.getAttribute('image'); - if (image && shape === TopicShape.IMAGE) { + if (image && shape === 'image') { const size = image.substring(0, image.indexOf(':')); const url = image.substring(image.indexOf(':') + 1, image.length); topic.setImageUrl(url); diff --git a/packages/mindplot/src/components/util/Shape.ts b/packages/mindplot/src/components/util/Shape.ts index 974fd66b..059888e6 100644 --- a/packages/mindplot/src/components/util/Shape.ts +++ b/packages/mindplot/src/components/util/Shape.ts @@ -17,7 +17,6 @@ */ import { Point } from '@wisemapping/web2d'; import { $assert, $defined } from '@wisemapping/core-js'; -import { TopicShape } from '../model/INodeModel'; import TopicConfig from '../TopicConfig'; import PositionType from '../PositionType'; import SizeType from '../SizeType'; @@ -127,7 +126,7 @@ class Shape { const isAtRight = Shape.isAtRight(sourcePosition, pos); const result = Shape.calculateRectConnectionPoint(pos, size, isAtRight); - if (targetNode.getShapeType() === TopicShape.LINE) { + if (targetNode.getShapeType() === 'line') { result.y += targetNode.getSize().height / 2; }