diff --git a/packages/editor/cypress/e2e/topicManager.cy.ts b/packages/editor/cypress/e2e/topicManager.cy.ts index f2ec5699..80c0fb7c 100644 --- a/packages/editor/cypress/e2e/topicManager.cy.ts +++ b/packages/editor/cypress/e2e/topicManager.cy.ts @@ -1,6 +1,9 @@ context('Node manager', () => { before(() => { cy.visit('/editor.html'); + + // Wait for load complate ... + cy.get('[aria-label="vortex-loading"]').should('not.exist'); }); it('shortcut add sibling node', () => { diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/addRelationship.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/addRelationship.snap.png index 0bb8d1e8..918b6d28 100644 Binary files a/packages/editor/cypress/snapshots/relationship.cy.ts/addRelationship.snap.png and b/packages/editor/cypress/snapshots/relationship.cy.ts/addRelationship.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png index b914fd6b..20425129 100644 Binary files a/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png and b/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png index bce4750c..542eaa90 100644 Binary files a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png and b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png index c46f51b2..f3e6c456 100644 Binary files a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png and b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png index 826ea0a8..4eed6291 100644 Binary files a/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png and b/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png index 42221da9..4947fd45 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png index 6532827e..9326ca16 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png index c927b4ed..28b10292 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeHuge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeHuge.snap.png index c47930ed..823ce7b8 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeHuge.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeHuge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeLarge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeLarge.snap.png index b1eb590f..28013c51 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeLarge.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeLarge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeNormal.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeNormal.snap.png index 44993ee5..fc071439 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeNormal.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeNormal.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png index cd97e4f9..237ab182 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png index 0f4f1af5..ab475b98 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png index 55962a05..a7df41b0 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/deleteTopicShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/deleteTopicShortcut.snap.png index 64332294..9e46d4dc 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/deleteTopicShortcut.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/deleteTopicShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/editor-shortcut-edit.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/editor-shortcut-edit.snap.png index 6ce4727d..4f6c73fb 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/editor-shortcut-edit.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/editor-shortcut-edit.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png index 64332294..9e46d4dc 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/saveChagesShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/saveChagesShortcut.snap.png index ae8689ef..28d23719 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/saveChagesShortcut.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/saveChagesShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png index cc23c2d4..f0783dd4 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveDefaultPosition.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveDefaultPosition.snap.png index 21dfe4c2..4f317fb4 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveDefaultPosition.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveDefaultPosition.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/movedownNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/movedownNode.snap.png index 6f029533..858b4efc 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.ts/movedownNode.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/movedownNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveleftNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveleftNode.snap.png index 0d5ac4c6..8747e660 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveleftNode.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveleftNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveupNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveupNode.snap.png index 9c26dc5d..0067ff63 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveupNode.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveupNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png index 6256e8bb..96565efb 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png index 5396a53c..edb2b297 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png index ffedfa19..94ae2744 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png index c8b25c5a..9e2ddd11 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png differ diff --git a/packages/editor/src/classes/model/node-property-builder/index.ts b/packages/editor/src/classes/model/node-property-builder/index.ts index d1599517..8329c901 100644 --- a/packages/editor/src/classes/model/node-property-builder/index.ts +++ b/packages/editor/src/classes/model/node-property-builder/index.ts @@ -7,20 +7,23 @@ import { fontSizes, getNextValue, } from '../../../components/toolbar/ToolbarValueModelBuilder'; +import { LineType } from '@wisemapping/mindplot/src/components/ConnectionLine'; +import { TopicShapeType } from '@wisemapping/mindplot/src/components/model/INodeModel'; class NodePropertyBuilder { designer: Designer; - fontSizeModel: NodeProperty; - selectedTopicColorModel: NodeProperty; - fontFamilyModel: NodeProperty; - fontStyleModel: NodeProperty; - borderColorModel: NodeProperty; - fontColorModel: NodeProperty; - topicShapeModel: NodeProperty; - topicIconModel: NodeProperty; - noteModel: NodeProperty; - linkModel: NodeProperty; + private fontSizeModel: NodeProperty; + private selectedTopicColorModel: NodeProperty; + private fontFamilyModel: NodeProperty; + private fontStyleModel: NodeProperty; + private borderColorModel: NodeProperty; + private fontColorModel: NodeProperty; + private topicShapeModel: NodeProperty; + private topicIconModel: NodeProperty; + private connetionStyleModel: NodeProperty; + private noteModel: NodeProperty; + private linkModel: NodeProperty; constructor(designer: Designer) { this.designer = designer; @@ -34,7 +37,9 @@ class NodePropertyBuilder { return this.designer.getModel().selectedTopic()?.getFontSize(); } - private uniqueOrNull(propertyGetter: (Topic: Topic) => string | number | null) { + private uniqueOrNull( + propertyGetter: (Topic: Topic) => string | number | null | LineType, + ): string { const nodes = this.designer.getModel().filterSelectedTopics(); return getTheUniqueValueOrNull(nodes, propertyGetter); } @@ -190,15 +195,20 @@ class NodePropertyBuilder { return this.fontStyleModel; } - /** - * - * @returns model to get and set topic shape - */ - getTopicShapeModel(): NodeProperty { + getConnectionStyleModel(): NodeProperty { + if (!this.connetionStyleModel) + this.connetionStyleModel = { + getValue: () => this.selectedTopic()?.getConnectionStyle(), + setValue: (value: LineType) => this.designer.changeConnectionStyle(value), + }; + return this.connetionStyleModel; + } + + getTopicShapeModel(): NodeProperty { if (!this.topicShapeModel) this.topicShapeModel = { - getValue: () => this.uniqueOrNull((node) => node.getShapeType()), - setValue: (value: string) => this.designer.changeTopicShape(value), + getValue: () => this.uniqueOrNull((node) => node.getShapeType()) as TopicShapeType, + setValue: (value: TopicShapeType) => this.designer.changeTopicShape(value), }; return this.topicShapeModel; } diff --git a/packages/editor/src/components/editor-toolbar/configBuilder.tsx b/packages/editor/src/components/editor-toolbar/configBuilder.tsx index e7ebf755..6d8ea697 100644 --- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx +++ b/packages/editor/src/components/editor-toolbar/configBuilder.tsx @@ -32,6 +32,10 @@ import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlin import HorizontalRuleOutlinedIcon from '@mui/icons-material/HorizontalRuleOutlined'; import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined'; +import ShapeLineOutlined from '@mui/icons-material/ShapeLineOutlined'; +import PolylineOutlined from '@mui/icons-material/PolylineOutlined'; +import GestureOutlined from '@mui/icons-material/GestureOutlined'; +import TimelineOutined from '@mui/icons-material/TimelineOutlined'; import Palette from '@mui/icons-material/Square'; import SquareOutlined from '@mui/icons-material/SquareOutlined'; @@ -45,6 +49,7 @@ import IconPicker from '../action-widget/pane/icon-picker'; import FontFamilySelector from '../action-widget/button/font-family-selector'; import Editor from '../../classes/model/editor'; import { IntlShape } from 'react-intl'; +import { LineType } from '@wisemapping/mindplot/src/components/ConnectionLine'; const keyTooltip = (msg: string, key: string): string => { const isMac = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0; @@ -52,7 +57,7 @@ const keyTooltip = (msg: string, key: string): string => { }; export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionConfig[] { - const toolbarValueModelBuilder = new NodePropertyValueModelBuilder(model.getDesigner()); + const valueBulder = new NodePropertyValueModelBuilder(model.getDesigner()); // eslint-disable-next-line react-hooks/rules-of-hooks const colorAndShapeToolbarConfiguration: ActionConfig = { icon: , @@ -67,8 +72,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-rectangle', defaultMessage: 'Rectangle shape', }), - onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('rectangle'), - selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'rectangle', + onClick: () => valueBulder.getTopicShapeModel().setValue('rectangle'), + selected: () => valueBulder.getTopicShapeModel().getValue() === 'rectangle', }, { icon: , @@ -76,9 +81,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-rounded', defaultMessage: 'Rounded shape', }), - onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('rounded rectangle'), - selected: () => - toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'rounded rectangle', + onClick: () => valueBulder.getTopicShapeModel().setValue('rounded rectangle'), + selected: () => valueBulder.getTopicShapeModel().getValue() === 'rounded rectangle', }, { icon: , @@ -86,8 +90,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-line', defaultMessage: 'Line shape', }), - onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('line'), - selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'line', + onClick: () => valueBulder.getTopicShapeModel().setValue('line'), + selected: () => valueBulder.getTopicShapeModel().getValue() === 'line', }, { icon: , @@ -95,14 +99,14 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-ellipse', defaultMessage: 'Ellipse shape', }), - onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('elipse'), - selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'elipse', + onClick: () => valueBulder.getTopicShapeModel().setValue('elipse'), + selected: () => valueBulder.getTopicShapeModel().getValue() === 'elipse', }, null, { icon: () => ( ), tooltip: intl.formatMessage({ @@ -115,7 +119,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo return ( ); }, @@ -124,9 +128,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo }, { icon: () => ( - + ), tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-topic-border-color', @@ -138,7 +140,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo return ( ); }, @@ -149,6 +151,46 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0, }; + const connectionStyleConfiguration: ActionConfig = { + icon: , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-connection-style', + defaultMessage: 'Connection Style', + }), + options: [ + { + icon: , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-connection-style-polyline', + defaultMessage: 'Polyline', + }), + onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE), + selected: () => + valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE, + }, + { + icon: , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-connection-style-polyline-curved', + defaultMessage: 'Polyline Curved', + }), + onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED), + selected: () => + valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED, + }, + { + icon: , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-connection-style-curved', + defaultMessage: 'Curved', + }), + onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED), + selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_CURVED, + }, + ], + disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0, + }; + /** * submenu to manipulate node font */ @@ -160,9 +202,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo }), options: [ { - render: () => ( - - ), + render: () => , }, null, { @@ -171,8 +211,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-font-bigger', defaultMessage: 'Bigger', }), - onClick: () => - toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up), + onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.up), }, { icon: , @@ -180,8 +219,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-font-smaller', defaultMessage: 'Smaller', }), - onClick: () => - toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.down), + onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.down), }, null, { @@ -193,8 +231,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo }), 'B', ), - onClick: toolbarValueModelBuilder.fontWeigthModel().switchValue, - selected: () => toolbarValueModelBuilder.fontWeigthModel().getValue() === 'bold', + onClick: valueBulder.fontWeigthModel().switchValue, + selected: () => valueBulder.fontWeigthModel().getValue() === 'bold', }, { icon: , @@ -205,13 +243,11 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo }), 'I', ), - onClick: toolbarValueModelBuilder.getFontStyleModel().switchValue, - selected: () => toolbarValueModelBuilder.getFontStyleModel().getValue() === 'italic', + onClick: valueBulder.getFontStyleModel().switchValue, + selected: () => valueBulder.getFontStyleModel().getValue() === 'italic', }, { - icon: () => ( - - ), + icon: () => , tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-topic-font-color', defaultMessage: 'Color', @@ -222,7 +258,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo return ( ); }, @@ -261,10 +297,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo options: [ { render: (closeModal) => ( - + ), }, ], @@ -285,10 +318,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo { tooltip: 'Node note', render: (closeModal) => ( - + ), }, ], @@ -312,10 +342,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo defaultMessage: 'Add Icon', }), render: (closeModal) => ( - + ), }, ], @@ -350,6 +377,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo editIconConfiguration, editNoteConfiguration, editLinkUrlConfiguration, + connectionStyleConfiguration, addRelationConfiguration, ]; } diff --git a/packages/mindplot/src/components/ConnectionLine.ts b/packages/mindplot/src/components/ConnectionLine.ts index 62caeeb5..82eddca0 100644 --- a/packages/mindplot/src/components/ConnectionLine.ts +++ b/packages/mindplot/src/components/ConnectionLine.ts @@ -25,10 +25,9 @@ import Workspace from './Workspace'; // eslint-disable-next-line no-shadow export enum LineType { - SIMPLE, - POLYLINE, - CURVED, SIMPLE_CURVED, + POLYLINE_MIDDLE, + POLYLINE_CURVED, } class ConnectionLine { @@ -52,11 +51,18 @@ class ConnectionLine { const line = this._createLine(type); const strokeColor = ConnectionLine.getStrokeColor(); - if (type === LineType.SIMPLE_CURVED) { - line.setStroke(1, 'solid', strokeColor, 1); - line.setFill(strokeColor, 1); - } else { - line.setStroke(2, 'solid', strokeColor, 1); + + switch (type) { + case LineType.POLYLINE_MIDDLE: + case LineType.POLYLINE_CURVED: + line.setStroke(1, 'solid', strokeColor, 1); + break; + case LineType.SIMPLE_CURVED: + line.setStroke(1, 'solid', strokeColor, 1); + line.setFill(strokeColor, 2); + break; + default: + line.setStroke(2, 'solid', strokeColor, 1); } // Set line styles ... @@ -77,19 +83,18 @@ class ConnectionLine { this._lineType = lineType; let line: ConnectionLine; switch (lineType) { - case LineType.POLYLINE: + case LineType.POLYLINE_MIDDLE: line = new PolyLine(); + (line as PolyLine).setStyle('MiddleStraight'); break; - case LineType.CURVED: - line = new CurvedLine(); + case LineType.POLYLINE_CURVED: + line = new PolyLine(); + (line as PolyLine).setStyle('Curved'); break; case LineType.SIMPLE_CURVED: line = new CurvedLine(); (line as CurvedLine).setStyle(CurvedLine.SIMPLE_LINE); break; - case LineType.SIMPLE: - line = new Line(); - break; default: throw new Error(`Unexpected line type. ${lineType}`); } diff --git a/packages/mindplot/src/components/Designer.ts b/packages/mindplot/src/components/Designer.ts index 6366da33..b1d32a97 100644 --- a/packages/mindplot/src/components/Designer.ts +++ b/packages/mindplot/src/components/Designer.ts @@ -56,6 +56,8 @@ import DragTopic from './DragTopic'; import CentralTopic from './CentralTopic'; import FeatureType from './model/FeatureType'; import WidgetManager from './WidgetManager'; +import { TopicShapeType } from './model/INodeModel'; +import { LineType } from './ConnectionLine'; class Designer extends Events { private _mindmap: Mindmap; @@ -480,6 +482,11 @@ class Designer extends Events { if (backgroundColor) { targetModel.setBackgroundColor(backgroundColor); } + + const connectType = sourceModel.getConnectionStyle(); + if ($defined(connectType)) { + targetModel.setConnectionStyle(connectType!); + } } private _createChildModel(topic: Topic, mousePos: Point = null): NodeModel { @@ -860,7 +867,7 @@ class Designer extends Events { } } - changeTopicShape(shape: string) { + changeTopicShape(shape: TopicShapeType): void { const validateFunc = (topic: Topic) => !(topic.getType() === 'CentralTopic' && shape === 'line'); @@ -871,6 +878,16 @@ class Designer extends Events { } } + changeConnectionStyle(type: LineType): void { + const validateFunc = (topic: Topic) => !topic.isCentralTopic(); + + const validateError = 'Central Topic can not be changed to line figure.'; + const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); + if (topicsIds.length > 0) { + this._actionDispatcher.changeConnectionStyleToTopic(topicsIds, type); + } + } + changeFontWeight(): void { const topicsIds = this.getModel().filterTopicsIds(); if (topicsIds.length > 0) { diff --git a/packages/mindplot/src/components/StandaloneActionDispatcher.ts b/packages/mindplot/src/components/StandaloneActionDispatcher.ts index 9bbf67cc..dad30a6b 100644 --- a/packages/mindplot/src/components/StandaloneActionDispatcher.ts +++ b/packages/mindplot/src/components/StandaloneActionDispatcher.ts @@ -38,6 +38,7 @@ import FeatureType from './model/FeatureType'; import PositionType from './PositionType'; import { PivotType } from './RelationshipControlPoints'; import { TopicShapeType } from './model/INodeModel'; +import { LineType } from './ConnectionLine'; class StandaloneActionDispatcher extends ActionDispatcher { private _actionRunner: DesignerActionRunner; @@ -136,7 +137,7 @@ class StandaloneActionDispatcher extends ActionDispatcher { const result = topic.getFontFamily(); topic.setFontFamily(commandFontFamily, true); - topic.adjustShapes(); + topic.redraw(); return result; }; @@ -201,7 +202,7 @@ class StandaloneActionDispatcher extends ActionDispatcher { const result = topic.getFontSize(); topic.setFontSize(commandSize, true); - topic.adjustShapes(); + topic.redraw(); return result; }; @@ -209,14 +210,13 @@ class StandaloneActionDispatcher extends ActionDispatcher { this.execute(command); } - /** */ - changeShapeTypeToTopic(topicsIds: number[], shapeType: string) { + changeShapeTypeToTopic(topicsIds: number[], shapeType: TopicShapeType) { $assert(topicsIds, 'topicsIds can not be null'); $assert(shapeType, 'shapeType can not be null'); - const commandFunc = (topic: Topic, commandShapeType: string) => { + const commandFunc = (topic: Topic, commandShapeType: TopicShapeType) => { const result = topic.getShapeType(); - topic.setShapeType(commandShapeType as TopicShapeType); + topic.setShapeType(commandShapeType); return result; }; @@ -224,7 +224,17 @@ class StandaloneActionDispatcher extends ActionDispatcher { this.execute(command); } - /** */ + changeConnectionStyleToTopic(topicsIds: number[], lineType: LineType) { + const commandFunc = (topic: Topic, commandShapeType: LineType) => { + const result = topic.getConnectionStyle(); + topic.setConnectionStyle(commandShapeType); + return result; + }; + + const command = new GenericFunctionCommand(commandFunc, topicsIds, lineType); + this.execute(command); + } + changeFontWeightToTopic(topicsIds: number[]) { $assert(topicsIds, 'topicsIds can not be null'); @@ -232,8 +242,7 @@ class StandaloneActionDispatcher extends ActionDispatcher { const result = topic.getFontWeight(); const weight = result === 'bold' ? 'normal' : 'bold'; topic.setFontWeight(weight, true); - - topic.adjustShapes(); + topic.redraw(); return result; }; diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index fb2b350e..00fb616b 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/packages/mindplot/src/components/Topic.ts @@ -23,7 +23,7 @@ import NodeGraph from './NodeGraph'; import TopicConfig from './TopicConfig'; import TopicStyle from './TopicStyle'; import TopicFeatureFactory from './TopicFeature'; -import ConnectionLine from './ConnectionLine'; +import ConnectionLine, { LineType } from './ConnectionLine'; import IconGroup from './IconGroup'; import EventBus from './layout/EventBus'; import ShirinkConnector from './ShrinkConnector'; @@ -64,7 +64,7 @@ abstract class Topic extends NodeGraph { private _connector: ShirinkConnector; - private _outgoingLine: Line; + private _outgoingLine: ConnectionLine | null; constructor(model: NodeModel, options) { super(model, options); @@ -140,7 +140,7 @@ abstract class Topic extends NodeGraph { // Move iconGroup to front ... const iconGroup = this.getIconGroup(); - if ($defined(iconGroup)) { + if (iconGroup) { iconGroup.moveToFront(); } @@ -161,6 +161,15 @@ abstract class Topic extends NodeGraph { return result; } + getConnectionStyle(): LineType { + const model = this.getModel(); + let result = model.getConnectionStyle(); + if (!result) { + result = TopicStyle.defaultConnectionType(this); + } + return result; + } + private _removeInnerShape(): ElementClass { const group = this.get2DElement(); const innerShape = this.getInnerShape(); @@ -192,7 +201,7 @@ abstract class Topic extends NodeGraph { return this._innerShape; } - _buildShape(attributes, shapeType: TopicShapeType): ElementClass { + protected _buildShape(attributes, shapeType: TopicShapeType): ElementClass { $assert(attributes, 'attributes can not be null'); $assert(shapeType, 'shapeType can not be null'); @@ -346,7 +355,7 @@ abstract class Topic extends NodeGraph { featureModel.getType() === TopicFeatureFactory.EmojiIcon.id; iconGroup.addIcon(result, isIcon && !this.isReadOnly()); - this.adjustShapes(); + this.redraw(); return result; } @@ -368,7 +377,7 @@ abstract class Topic extends NodeGraph { if ($defined(iconGroup)) { iconGroup.removeIconByModel(featureModel); } - this.adjustShapes(); + this.redraw(); } addRelationship(relationship: Relationship) { @@ -414,7 +423,7 @@ abstract class Topic extends NodeGraph { const model = this.getModel(); model.setFontFamily(value); } - this.adjustShapes(); + this.redraw(); } setFontSize(value: number, updateModel?: boolean) { @@ -425,7 +434,7 @@ abstract class Topic extends NodeGraph { const model = this.getModel(); model.setFontSize(value); } - this.adjustShapes(); + this.redraw(); } setFontStyle(value: string, updateModel?: boolean) { @@ -435,7 +444,7 @@ abstract class Topic extends NodeGraph { const model = this.getModel(); model.setFontStyle(value); } - this.adjustShapes(); + this.redraw(); } setFontWeight(value: string, updateModel?: boolean) { @@ -445,7 +454,7 @@ abstract class Topic extends NodeGraph { const model = this.getModel(); model.setFontWeight(value); } - this.adjustShapes(); + this.redraw(); } getFontWeight() { @@ -525,7 +534,7 @@ abstract class Topic extends NodeGraph { this._setText(text, true); } - this.adjustShapes(); + this.redraw(); } getText(): string { @@ -538,6 +547,13 @@ abstract class Topic extends NodeGraph { this._setBackgroundColor(color, true); } + setConnectionStyle(type: LineType): void { + this.getModel().setConnectionStyle(type); + + // Needs to change change all the lines types. Outgoing are part of the children. + this.getChildren().map((topic: Topic) => topic.redraw()); + } + private _setBackgroundColor(color: string, updateModel: boolean) { const innerShape = this.getInnerShape(); innerShape.setFill(color); @@ -857,7 +873,7 @@ abstract class Topic extends NodeGraph { private _updateConnectionLines(): void { // Update this to parent line ... const outgoingLine = this.getOutgoingLine(); - if ($defined(outgoingLine)) { + if (outgoingLine) { outgoingLine.redraw(); } @@ -880,13 +896,13 @@ abstract class Topic extends NodeGraph { } setVisibility(value: boolean, fade = 0): void { - this._setTopicVisibility(value, fade); + this.setTopicVisibility(value, fade); // Hide all children... this._setChildrenVisibility(value, fade); // If there there are connection to the node, topic must be hidden. - this._setRelationshipLinesVisibility(value, fade); + this.setRelationshipLinesVisibility(value, fade); // If it's connected, the connection must be rendered. const outgoingLine = this.getOutgoingLine(); @@ -895,8 +911,7 @@ abstract class Topic extends NodeGraph { } } - /** */ - moveToBack(): void { + protected moveToBack(): void { // Update relationship lines this._relationships.forEach((r) => r.moveToBack()); @@ -908,8 +923,7 @@ abstract class Topic extends NodeGraph { this.get2DElement().moveToBack(); } - /** */ - moveToFront(): void { + protected moveToFront(): void { this.get2DElement().moveToFront(); const connector = this.getShrinkConnector(); if (connector) { @@ -919,13 +933,12 @@ abstract class Topic extends NodeGraph { this._relationships.forEach((r) => r.moveToFront()); } - /** */ isVisible(): boolean { const elem = this.get2DElement(); return elem.isVisible(); } - private _setRelationshipLinesVisibility(value: boolean, fade = 0): void { + private setRelationshipLinesVisibility(value: boolean, fade = 0): void { this._relationships.forEach((relationship) => { const sourceTopic = relationship.getSourceTopic(); const targetTopic = relationship.getTargetTopic(); @@ -941,7 +954,7 @@ abstract class Topic extends NodeGraph { }); } - private _setTopicVisibility(value: boolean, fade = 0) { + private setTopicVisibility(value: boolean, fade = 0) { const elem = this.get2DElement(); elem.setVisibility(value, fade); @@ -960,7 +973,6 @@ abstract class Topic extends NodeGraph { textShape.setVisibility(this.getShapeType() !== 'image' ? value : false, fade); } - /** */ setOpacity(opacity: number): void { const elem = this.get2DElement(); elem.setOpacity(opacity); @@ -1088,7 +1100,6 @@ abstract class Topic extends NodeGraph { model.setOrder(value); } - /** */ connectTo(targetTopic: Topic, workspace: Workspace) { $assert(!this._outgoingLine, 'Could not connect an already connected node'); $assert(targetTopic !== this, 'Circular connection are not allowed'); @@ -1105,7 +1116,7 @@ abstract class Topic extends NodeGraph { childModel.connectTo(targetModel); // Create a connection line ... - const outgoingLine = new ConnectionLine(this, targetTopic); + const outgoingLine = this.createConnectionLine(targetTopic); outgoingLine.setVisibility(false); this._outgoingLine = outgoingLine; @@ -1144,7 +1155,13 @@ abstract class Topic extends NodeGraph { } } - abstract updateTopicShape(targetTopic: Topic); + private createConnectionLine(targetTopic: Topic): ConnectionLine { + const type: LineType = targetTopic.getConnectionStyle(); + console.log(`redraw ...: ${type}`); + return new ConnectionLine(this, targetTopic, type); + } + + abstract updateTopicShape(targetTopic: Topic): void; append(child: Topic): void { const children = this.getChildren(); @@ -1195,7 +1212,7 @@ abstract class Topic extends NodeGraph { } } this._isInWorkspace = true; - this.adjustShapes(); + this.redraw(); } /** */ @@ -1220,7 +1237,29 @@ abstract class Topic extends NodeGraph { return result; } - adjustShapes(): void { + private redrawConnection(): boolean { + let result = false; + if (this._isInWorkspace) { + // Adjust connection line if there is a change in the parent... + const connStyleChanged = + this._outgoingLine?.getLineType() !== this.getParent()?.getConnectionStyle(); + if (this._outgoingLine && connStyleChanged) { + // Todo: Review static reference ... + const workspace = designer.getWorkSpace(); + this._outgoingLine.removeFromWorkspace(workspace); + + const targetTopic = this.getOutgoingConnectedTopic()!; + this._outgoingLine = this.createConnectionLine(targetTopic); + this._outgoingLine.setVisibility(this.isVisible()); + workspace.append(this._outgoingLine); + + result = true; + } + } + return result; + } + + redraw(): void { if (this._isInWorkspace) { const textShape = this.getTextShape(); if (this.getShapeType() !== 'image') { @@ -1241,13 +1280,9 @@ abstract class Topic extends NodeGraph { const iconGroupWith = iconGroup.getSize().width; const topicWith = iconGroupWith + 2 * textIconSpacing + textWidth + padding * 2; - this.setSize( - { - width: topicWith, - height: topicHeight, - }, - false, - ); + // Update connections ... + const changed = this.redrawConnection(); + this.setSize({ width: topicWith, height: topicHeight }, changed); // Adjust all topic elements positions ... const yPosition = Math.round((topicHeight - textHeight) / 2); diff --git a/packages/mindplot/src/components/TopicStyle.ts b/packages/mindplot/src/components/TopicStyle.ts index 5a938258..2a2f8a71 100644 --- a/packages/mindplot/src/components/TopicStyle.ts +++ b/packages/mindplot/src/components/TopicStyle.ts @@ -16,20 +16,23 @@ * limitations under the License. */ import { $assert } from '@wisemapping/core-js'; +import { LineType } from './ConnectionLine'; import { $msg } from './Messages'; import { TopicShapeType } from './model/INodeModel'; import Topic from './Topic'; +type FontStlye = { + font: string; + size: number; + style: string; + weight: string; + color: string; +}; type TopicStyleType = { borderColor: string; backgroundColor: string; - fontStyle: { - font: string; - size: number; - style: string; - weight: string; - color: string; - }; + connectionStyle: LineType; + fontStyle: FontStlye; msgKey: string; shapeType: TopicShapeType; }; @@ -45,6 +48,7 @@ const TopicDefaultStyles = { weight: 'bold', color: '#ffffff', }, + connectionStyle: LineType.SIMPLE_CURVED, msgKey: 'CENTRAL_TOPIC', shapeType: 'rounded rectangle' as TopicShapeType, }, @@ -58,6 +62,7 @@ const TopicDefaultStyles = { weight: 'normal', color: 'rgb(82,92,97)', }, + connectionStyle: LineType.SIMPLE_CURVED, msgKey: 'MAIN_TOPIC', shapeType: 'line' as TopicShapeType, }, @@ -71,6 +76,7 @@ const TopicDefaultStyles = { weight: 'normal', color: 'rgb(82,92,97)', }, + connectionStyle: LineType.SIMPLE_CURVED, msgKey: 'SUB_TOPIC', shapeType: 'line' as TopicShapeType, }, @@ -86,6 +92,7 @@ const TopicDefaultStyles = { color: 'rgb(82,92,97)', }, msgKey: 'ISOLATED_TOPIC', + connectionStyle: LineType.SIMPLE_CURVED, shapeType: 'line' as TopicShapeType, }, }; @@ -112,30 +119,34 @@ class TopicStyle { return result; } - static defaultText(topic: Topic) { + static defaultText(topic: Topic): string { const { msgKey } = this._getStyles(topic); return $msg(msgKey); } - static defaultFontStyle(topic: Topic) { + static defaultFontStyle(topic: Topic): FontStlye { return this._getStyles(topic).fontStyle; } - static defaultBackgroundColor(topic: Topic) { + static defaultBackgroundColor(topic: Topic): string { return this._getStyles(topic).backgroundColor; } - static defaultBorderColor(topic: Topic) { + static defaultBorderColor(topic: Topic): string { return this._getStyles(topic).borderColor; } - static getInnerPadding(topic: Topic) { + static getInnerPadding(topic: Topic): number { return Math.round(topic.getTextShape().getFontHeight() * 0.5); } - static defaultShapeType(topic: Topic) { + static defaultShapeType(topic: Topic): TopicShapeType { return this._getStyles(topic).shapeType; } + + static defaultConnectionType(topic: Topic): LineType { + return this._getStyles(topic).connectionStyle; + } } export default TopicStyle; diff --git a/packages/mindplot/src/components/model/INodeModel.ts b/packages/mindplot/src/components/model/INodeModel.ts index 05311b93..b1af01c2 100644 --- a/packages/mindplot/src/components/model/INodeModel.ts +++ b/packages/mindplot/src/components/model/INodeModel.ts @@ -17,6 +17,7 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; +import { LineType } from '../ConnectionLine'; import PositionType from '../PositionType'; import FeatureModel from './FeatureModel'; import Mindmap from './Mindmap'; @@ -132,12 +133,10 @@ abstract class INodeModel { mindmap.disconnect(this); } - /** */ getShapeType(): TopicShapeType { return this.getProperty('shapeType') as TopicShapeType; } - /** */ setShapeType(type: string) { this.putProperty('shapeType', type); } @@ -162,7 +161,6 @@ abstract class INodeModel { return this.getProperty('fontFamily') as string; } - /** */ setFontStyle(fontStyle: string) { this.putProperty('fontStyle', fontStyle); } @@ -179,7 +177,7 @@ abstract class INodeModel { return this.getProperty('fontWeight'); } - setFontColor(color: string) { + setFontColor(color: string): void { this.putProperty('fontColor', color); } @@ -187,7 +185,7 @@ abstract class INodeModel { return this.getProperty('fontColor') as string; } - setFontSize(size: number) { + setFontSize(size: number): void { this.putProperty('fontSize', size); } @@ -219,10 +217,18 @@ abstract class INodeModel { /** * @return {Boolean} true if the children nodes are hidden by the shrink option */ - setChildrenShrunken(value: boolean) { + setChildrenShrunken(value: boolean): void { this.putProperty('shrunken', value); } + setConnectionStyle(type: LineType): void { + this.putProperty('connectionStyle', type); + } + + getConnectionStyle(): LineType | null { + return this.getProperty('connectionStyle') as LineType; + } + isNodeModel(): boolean { return true; } @@ -234,7 +240,7 @@ abstract class INodeModel { return this.getParent() != null; } - abstract append(node): void; + abstract append(node: INodeModel): void; /** * lets the mindmap handle the connect node operation diff --git a/packages/mindplot/src/components/model/RelationshipModel.ts b/packages/mindplot/src/components/model/RelationshipModel.ts index 95238fe3..c4876c23 100644 --- a/packages/mindplot/src/components/model/RelationshipModel.ts +++ b/packages/mindplot/src/components/model/RelationshipModel.ts @@ -28,7 +28,7 @@ class RelationshipModel { private _targetTopicId: number; - private _lineType: number; + private _lineType: LineType; private _srcCtrlPoint: Point; @@ -67,11 +67,11 @@ class RelationshipModel { return this._id; } - getLineType(): number { + getLineType(): LineType { return this._lineType; } - setLineType(lineType: number) { + setLineType(lineType: LineType) { this._lineType = lineType; } diff --git a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts index 388ba1db..6d31a643 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts +++ b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts @@ -18,13 +18,13 @@ import { $assert, $defined, createDocument } from '@wisemapping/core-js'; import { Point } from '@wisemapping/web2d'; import Mindmap from '../model/Mindmap'; -import { LineType } from '../ConnectionLine'; import FeatureModelFactory from '../model/FeatureModelFactory'; import NodeModel from '../model/NodeModel'; import RelationshipModel from '../model/RelationshipModel'; import XMLMindmapSerializer from './XMLMindmapSerializer'; import FeatureType from '../model/FeatureType'; import emojiToIconMap from './iconToEmoji.json'; +import { LineType } from '../ConnectionLine'; class XMLSerializerTango implements XMLMindmapSerializer { private static MAP_ROOT_NODE = 'map'; @@ -152,6 +152,11 @@ class XMLSerializerTango implements XMLMindmapSerializer { parentTopic.setAttribute('brColor', brColor); } + const connectionStyle = topic.getConnectionStyle(); + if ($defined(connectionStyle)) { + parentTopic.setAttribute('connStyle', `${connectionStyle}`); + } + const metadata = topic.getMetadata(); if ($defined(metadata)) { parentTopic.setAttribute('metadata', metadata); @@ -206,18 +211,13 @@ class XMLSerializerTango implements XMLMindmapSerializer { const lineType = relationship.getLineType(); result.setAttribute('lineType', lineType.toString()); - if (lineType === LineType.CURVED || lineType === LineType.SIMPLE_CURVED) { - if ($defined(relationship.getSrcCtrlPoint())) { - const srcPoint = relationship.getSrcCtrlPoint(); - result.setAttribute('srcCtrlPoint', `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`); - } - if ($defined(relationship.getDestCtrlPoint())) { - const destPoint = relationship.getDestCtrlPoint(); - result.setAttribute( - 'destCtrlPoint', - `${Math.round(destPoint.x)},${Math.round(destPoint.y)}`, - ); - } + if ($defined(relationship.getSrcCtrlPoint())) { + const srcPoint = relationship.getSrcCtrlPoint(); + result.setAttribute('srcCtrlPoint', `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`); + } + if ($defined(relationship.getDestCtrlPoint())) { + const destPoint = relationship.getDestCtrlPoint(); + result.setAttribute('destCtrlPoint', `${Math.round(destPoint.x)},${Math.round(destPoint.y)}`); } result.setAttribute('endArrow', String(relationship.getEndArrow())); result.setAttribute('startArrow', String(relationship.getStartArrow())); @@ -345,6 +345,12 @@ class XMLSerializerTango implements XMLMindmapSerializer { topic.setBackgroundColor(bgColor); } + const connStyle = domElem.getAttribute('connStyle'); + if ($defined(connStyle) && connStyle) { + const lineType = Number.parseInt(connStyle, 10) as LineType; + topic.setConnectionStyle(lineType); + } + const borderColor = domElem.getAttribute('brColor'); if (borderColor) { topic.setBorderColor(borderColor); diff --git a/packages/web2d/src/components/peer/svg/PolyLinePeer.js b/packages/web2d/src/components/peer/svg/PolyLinePeer.js index dacbb21e..ecdf2745 100644 --- a/packages/web2d/src/components/peer/svg/PolyLinePeer.js +++ b/packages/web2d/src/components/peer/svg/PolyLinePeer.js @@ -99,7 +99,7 @@ class PolyLinePeer extends ElementPeer { if (y2 < y1) { signy = -1; } - const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${y1 + 10 * signy + const path = `${x1}, ${y1} ${(middlex - 10 * signx).toFixed(0)}, ${y1} ${(middlex).toFixed(0)}, ${y1 + 10 * signy } ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`; this._native.setAttribute('points', path); } @@ -112,7 +112,7 @@ class PolyLinePeer extends ElementPeer { const y2 = this._y2; if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) { const diff = x2 - x1; - const middlex = diff / 2 + x1; + const middlex = (diff * 0.75 + x1).toFixed(0); const path = `${x1}, ${y1} ${middlex}, ${y1} ${middlex}, ${y1} ${middlex}, ${y2} ${middlex}, ${y2} ${x2}, ${y2}`; this._native.setAttribute('points', path); } diff --git a/packages/webapp/cypress/e2e/editor.cy.ts b/packages/webapp/cypress/e2e/editor.cy.ts index 7b183271..d3281877 100644 --- a/packages/webapp/cypress/e2e/editor.cy.ts +++ b/packages/webapp/cypress/e2e/editor.cy.ts @@ -4,6 +4,9 @@ context('Editor Page', () => { }); it('page loaded', () => { + // Wait for load complate ... + cy.get('[aria-label="vortex-loading"]').should('not.exist'); + cy.matchImageSnapshot('editor-page'); }); }); diff --git a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png index fca88eb7..1d1f1f54 100644 Binary files a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png and b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png differ