diff --git a/packages/editor/cypress/fixtures/example.json b/packages/editor/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/packages/editor/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} 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 45e2ac5e..8d0fb359 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 7d2536d7..0ad29c64 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 f9296df3..23badb97 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 0d50c360..7a9af8bf 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 7f9f6f92..cbdc2974 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/renderAll.cy.ts/map-connection-style.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png index a67789a2..71eb74e6 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emoji.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emoji.snap.png index c53bb7c7..9ff2c58a 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emoji.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emoji.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emptyNodes.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emptyNodes.snap.png index f8ee0f78..a4ea02b2 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emptyNodes.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emptyNodes.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png index aa2ecc57..15a37bb6 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png index cba946b6..f3ce93fe 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png index f1611b7a..b94b1f9b 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png index 98595764..55f72fc7 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png index 6e8a174a..5f9c1178 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png index bc14980a..c82c4f82 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample2.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample2.snap.png index c3355e84..8b5a7255 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample2.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample2.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png index 3ae6e0ca..2089e835 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png index 3874493c..61af0327 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png index ce172eab..eb535057 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample6.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample6.snap.png index 4f72a861..48168caf 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample6.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample6.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample8.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample8.snap.png index f926fe3f..ad66b552 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample8.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample8.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome.snap.png index c65f584c..93a3fb5d 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome.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 bad018ab..0bdbdf43 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 888f193d..6c066723 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 55e9570e..2b317d0f 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 984efdbd..3869b869 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 04f8677d..fc307766 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 89ed33c2..b3593699 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 55fbae06..444f7c78 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 0e3aa30b..19dbf7d2 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 296e79ea..37f8ee03 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 a828c127..68bfbcad 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 bc5b82be..6c7fee59 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 48165b2f..68bfbcad 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 193d1b1e..0a348267 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 20870618..21b5e888 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 eadd06ec..9192b43e 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 1fd8b38e..6172b2cc 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 dca8d0c0..69b3c338 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 8e2a501c..0df659ec 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 b14f5869..aa3417b7 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 717b70dd..46d7dfd6 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 4ef69031..ef1b4cd0 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 955dbbef..878fc4cc 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 e708bdfe..10f559d1 100644 --- a/packages/editor/src/classes/model/node-property-builder/index.ts +++ b/packages/editor/src/classes/model/node-property-builder/index.ts @@ -82,7 +82,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic color */ - getSelectedTopicColorModel(): NodeProperty { + getSelectedTopicColorModel(): NodeProperty { if (!this.selectedTopicColorModel) this.selectedTopicColorModel = { getValue: () => this.designer.getModel().selectedTopic()?.getBackgroundColor(), @@ -116,7 +116,7 @@ class NodePropertyBuilder { * * @returns model to get and set topic border color */ - getColorBorderModel(): NodeProperty { + getColorBorderModel(): NodeProperty { if (!this.borderColorModel) this.borderColorModel = { getValue: () => this.uniqueOrNull((node) => node.getBorderColor()), @@ -201,11 +201,11 @@ class NodePropertyBuilder { return this.connetionStyleModel; } - getConnectionColorModel(): NodeProperty { + getConnectionColorModel(): NodeProperty { if (!this.connectionColoreModel) this.connectionColoreModel = { getValue: () => this.selectedTopic()?.getConnectionColor(), - setValue: (value: string) => this.designer.changeConnectionColor(value), + setValue: (value: string | undefined) => this.designer.changeConnectionColor(value), }; return this.connectionColoreModel; } diff --git a/packages/editor/src/components/editor-toolbar/configBuilder.tsx b/packages/editor/src/components/editor-toolbar/configBuilder.tsx index 116df37d..05374fb8 100644 --- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx +++ b/packages/editor/src/components/editor-toolbar/configBuilder.tsx @@ -37,6 +37,7 @@ import GestureOutlined from '@mui/icons-material/GestureOutlined'; import TimelineOutined from '@mui/icons-material/TimelineOutlined'; import ShareOutlined from '@mui/icons-material/ShareOutlined'; import SwapCallsOutlined from '@mui/icons-material/SwapCallsOutlined'; +import ClearOutlined from '@mui/icons-material/ClearOutlined'; import Palette from '@mui/icons-material/Square'; import SquareOutlined from '@mui/icons-material/SquareOutlined'; @@ -58,7 +59,7 @@ const keyTooltip = (msg: string, key: string): string => { }; export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionConfig[] { - const valueBulder = new NodePropertyValueModelBuilder(model.getDesigner()); + const modelBuilder = new NodePropertyValueModelBuilder(model.getDesigner()); // eslint-disable-next-line react-hooks/rules-of-hooks const colorAndShapeToolbarConfiguration: ActionConfig = { icon: , @@ -73,8 +74,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-rectangle', defaultMessage: 'Rectangle shape', }), - onClick: () => valueBulder.getTopicShapeModel().setValue('rectangle'), - selected: () => valueBulder.getTopicShapeModel().getValue() === 'rectangle', + onClick: () => modelBuilder.getTopicShapeModel().setValue('rectangle'), + selected: () => modelBuilder.getTopicShapeModel().getValue() === 'rectangle', }, { icon: , @@ -82,8 +83,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-rounded', defaultMessage: 'Rounded shape', }), - onClick: () => valueBulder.getTopicShapeModel().setValue('rounded rectangle'), - selected: () => valueBulder.getTopicShapeModel().getValue() === 'rounded rectangle', + onClick: () => modelBuilder.getTopicShapeModel().setValue('rounded rectangle'), + selected: () => modelBuilder.getTopicShapeModel().getValue() === 'rounded rectangle', }, { icon: , @@ -91,8 +92,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-line', defaultMessage: 'Line shape', }), - onClick: () => valueBulder.getTopicShapeModel().setValue('line'), - selected: () => valueBulder.getTopicShapeModel().getValue() === 'line', + onClick: () => modelBuilder.getTopicShapeModel().setValue('line'), + selected: () => modelBuilder.getTopicShapeModel().getValue() === 'line', }, { icon: , @@ -100,12 +101,12 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-share-ellipse', defaultMessage: 'Ellipse shape', }), - onClick: () => valueBulder.getTopicShapeModel().setValue('elipse'), - selected: () => valueBulder.getTopicShapeModel().getValue() === 'elipse', + onClick: () => modelBuilder.getTopicShapeModel().setValue('elipse'), + selected: () => modelBuilder.getTopicShapeModel().getValue() === 'elipse', }, null, { - icon: () => , + icon: () => , tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-topic-fill-color', defaultMessage: 'Fill color', @@ -116,7 +117,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo return ( ); }, @@ -124,7 +125,17 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo ], }, { - icon: () => , + icon: , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-topic-fill-color-default', + defaultMessage: 'Default fill color', + }), + onClick: () => modelBuilder.getSelectedTopicColorModel().setValue(undefined), + selected: () => modelBuilder.getSelectedTopicColorModel().getValue() === undefined, + }, + null, + { + icon: () => , tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-topic-border-color', defaultMessage: 'Border color', @@ -135,13 +146,22 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo return ( ); }, }, ], }, + { + icon: , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-topic-border-color-default', + defaultMessage: 'Default border color', + }), + onClick: () => modelBuilder.getColorBorderModel().setValue(undefined), + selected: () => modelBuilder.getColorBorderModel().getValue() === undefined, + }, ], disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0, }; @@ -159,8 +179,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-connection-style-curved-thick', defaultMessage: 'Thick Curved', }), - onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THICK_CURVED), - selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED, + onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.THICK_CURVED), + selected: () => modelBuilder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED, }, { icon: , @@ -168,8 +188,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-connection-style-curved-thin', defaultMessage: 'Thin Curved', }), - onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THIN_CURVED), - selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THIN_CURVED, + onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.THIN_CURVED), + selected: () => modelBuilder.getConnectionStyleModel().getValue() === LineType.THIN_CURVED, }, { icon: , @@ -177,9 +197,9 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-connection-style-polyline', defaultMessage: 'Simple Polyline', }), - onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE), + onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE), selected: () => - valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE, + modelBuilder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE, }, { icon: , @@ -187,13 +207,13 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-connection-style-polyline-curved', defaultMessage: 'Curved Polyline', }), - onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED), + onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED), selected: () => - valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED, + modelBuilder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED, }, null, { - icon: () => , + icon: () => , tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-connection-color', defaultMessage: 'Color', @@ -204,13 +224,22 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo return ( ); }, }, ], }, + { + icon: , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-connection-color-default', + defaultMessage: 'Default color', + }), + onClick: () => modelBuilder.getConnectionColorModel().setValue(undefined), + selected: () => modelBuilder.getConnectionColorModel().getValue() === undefined, + }, ], disabled: () => { const selected = model.getDesignerModel().filterSelectedTopics(); @@ -229,7 +258,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo }), options: [ { - render: () => , + render: () => , }, null, { @@ -238,7 +267,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-font-bigger', defaultMessage: 'Bigger', }), - onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.up), + onClick: () => modelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up), }, { icon: , @@ -246,7 +275,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo id: 'editor-panel.tooltip-topic-font-smaller', defaultMessage: 'Smaller', }), - onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.down), + onClick: () => modelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.down), }, null, { @@ -258,8 +287,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo }), 'B', ), - onClick: valueBulder.fontWeigthModel().switchValue, - selected: () => valueBulder.fontWeigthModel().getValue() === 'bold', + onClick: modelBuilder.fontWeigthModel().switchValue, + selected: () => modelBuilder.fontWeigthModel().getValue() === 'bold', }, { icon: , @@ -270,12 +299,12 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo }), 'I', ), - onClick: valueBulder.getFontStyleModel().switchValue, - selected: () => valueBulder.getFontStyleModel().getValue() === 'italic', + onClick: modelBuilder.getFontStyleModel().switchValue, + selected: () => modelBuilder.getFontStyleModel().getValue() === 'italic', }, null, { - icon: () => , + icon: () => , tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-topic-font-color', defaultMessage: 'Color', @@ -284,7 +313,10 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo { render: (closeModal) => { return ( - + ); }, }, @@ -322,7 +354,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo options: [ { render: (closeModal) => ( - + ), }, ], @@ -343,7 +375,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo { tooltip: 'Node note', render: (closeModal) => ( - + ), }, ], @@ -367,7 +399,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo defaultMessage: 'Add Icon', }), render: (closeModal) => ( - + ), }, ], diff --git a/packages/mindplot/src/components/Designer.ts b/packages/mindplot/src/components/Designer.ts index a6070e4b..75a56fc6 100644 --- a/packages/mindplot/src/components/Designer.ts +++ b/packages/mindplot/src/components/Designer.ts @@ -786,7 +786,7 @@ class Designer extends Events { } /** */ - changeBackgroundColor(color: string) { + changeBackgroundColor(color: string | undefined) { const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line'; const validateError = 'Color can not be set to line topics.'; @@ -796,7 +796,7 @@ class Designer extends Events { } } - changeBorderColor(color: string) { + changeBorderColor(color: string | undefined) { const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line'; const validateError = 'Color can not be set to line topics.'; const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); @@ -833,7 +833,7 @@ class Designer extends Events { } } - changeConnectionColor(value: string): void { + changeConnectionColor(value: string | undefined): void { const topicsIds = this.getModel() .filterSelectedTopics() .map((t) => t.getId()); diff --git a/packages/mindplot/src/components/StandaloneActionDispatcher.ts b/packages/mindplot/src/components/StandaloneActionDispatcher.ts index cf974a21..c8e43570 100644 --- a/packages/mindplot/src/components/StandaloneActionDispatcher.ts +++ b/packages/mindplot/src/components/StandaloneActionDispatcher.ts @@ -162,13 +162,10 @@ class StandaloneActionDispatcher extends ActionDispatcher { } /** */ - changeBackgroundColorToTopic(topicsIds: number[], color: string) { - $assert(topicsIds, 'topicIds can not be null'); - $assert(color, 'color can not be null'); - - const commandFunc = (topic: Topic, commandColor: string) => { + changeBackgroundColorToTopic(topicsIds: number[], color: string | undefined) { + const commandFunc = (topic: Topic, value: string | undefined) => { const result = topic.getBackgroundColor(); - topic.setBackgroundColor(commandColor); + topic.setBackgroundColor(value); return result; }; @@ -178,11 +175,8 @@ class StandaloneActionDispatcher extends ActionDispatcher { } /** */ - changeBorderColorToTopic(topicsIds: number[], color: string): void { - $assert(topicsIds, 'topicIds can not be null'); - $assert(color, 'topicIds can not be null'); - - const commandFunc = (topic: Topic, commandColor: string) => { + changeBorderColorToTopic(topicsIds: number[], color: string | undefined): void { + const commandFunc = (topic: Topic, commandColor: string | undefined) => { const result = topic.getBorderColor(); topic.setBorderColor(commandColor); return result; @@ -235,8 +229,8 @@ class StandaloneActionDispatcher extends ActionDispatcher { this.execute(command); } - changeConnectionColorToTopic(topicsIds: number[], value: string) { - const commandFunc = (topic: Topic, color: string) => { + changeConnectionColorToTopic(topicsIds: number[], value: string | undefined) { + const commandFunc = (topic: Topic, color: string | undefined) => { const result: string = topic.getConnectionColor(); topic.setConnectionColor(color); return result; diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index f62e9b61..d61b146a 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/packages/mindplot/src/components/Topic.ts @@ -114,7 +114,7 @@ abstract class Topic extends NodeGraph { protected _setShapeType(type: TopicShapeType, updateModel: boolean) { // Remove inner shape figure ... const model = this.getModel(); - if ($defined(updateModel) && updateModel) { + if (updateModel) { model.setShapeType(type); } @@ -405,7 +405,7 @@ abstract class Topic extends NodeGraph { setFontFamily(value: string, updateModel?: boolean) { const textShape = this.getTextShape(); textShape.setFontName(value); - if ($defined(updateModel) && updateModel) { + if (updateModel) { const model = this.getModel(); model.setFontFamily(value); } @@ -416,7 +416,7 @@ abstract class Topic extends NodeGraph { const textShape = this.getTextShape(); textShape.setSize(value); - if ($defined(updateModel) && updateModel) { + if (updateModel) { const model = this.getModel(); model.setFontSize(value); } @@ -426,7 +426,7 @@ abstract class Topic extends NodeGraph { setFontStyle(value: string, updateModel?: boolean) { const textShape = this.getTextShape(); textShape.setStyle(value); - if ($defined(updateModel) && updateModel) { + if (updateModel) { const model = this.getModel(); model.setFontStyle(value); } @@ -436,7 +436,7 @@ abstract class Topic extends NodeGraph { setFontWeight(value: string, updateModel?: boolean) { const textShape = this.getTextShape(); textShape.setWeight(value); - if ($defined(updateModel) && updateModel) { + if (updateModel) { const model = this.getModel(); model.setFontWeight(value); } @@ -496,7 +496,7 @@ abstract class Topic extends NodeGraph { setFontColor(value: string, updateModel?: boolean) { const textShape = this.getTextShape(); textShape.setColor(value); - if ($defined(updateModel) && updateModel) { + if (updateModel) { const model = this.getModel(); model.setFontColor(value); } @@ -506,7 +506,7 @@ abstract class Topic extends NodeGraph { const textShape = this.getTextShape(); textShape.setText(text == null ? TopicStyle.defaultText(this) : text); - if ($defined(updateModel) && updateModel) { + if (updateModel) { const model = this.getModel(); model.setText(text || undefined); } @@ -529,7 +529,7 @@ abstract class Topic extends NodeGraph { return text || TopicStyle.defaultText(this); } - setBackgroundColor(color: string): void { + setBackgroundColor(color: string | undefined): void { this._setBackgroundColor(color, true); } @@ -539,16 +539,9 @@ abstract class Topic extends NodeGraph { // Needs to change change all the lines types. Outgoing are part of the children. this.getChildren().forEach((topic: Topic) => topic.redraw()); - - // If connection of the childen matches, just reset the style in the model. - this.getChildren().forEach((topic: Topic) => { - if (topic.getModel().getConnectionStyle() === type) { - topic.getModel().setConnectionStyle(undefined); - } - }); } - setConnectionColor(value: string): void { + setConnectionColor(value: string | undefined): void { const model = this.getModel(); model.setConnectionColor(value); @@ -557,20 +550,13 @@ abstract class Topic extends NodeGraph { // Needs to change change all the lines color. Outgoing are part of the children. this.getChildren().forEach((topic: Topic) => topic.redraw()); - - // If connection of the childen matches, just reset the style in the model. - this.getChildren().forEach((topic: Topic) => { - if (topic.getModel().getConnectionColor() === value) { - topic.getModel().setConnectionColor(undefined); - } - }); } - private _setBackgroundColor(color: string, updateModel: boolean) { + private _setBackgroundColor(color: string | undefined, updateModel: boolean) { const innerShape = this.getInnerShape(); innerShape.setFill(color); - if ($defined(updateModel) && updateModel) { + if (updateModel) { const model = this.getModel(); model.setBackgroundColor(color); } @@ -585,26 +571,27 @@ abstract class Topic extends NodeGraph { return result; } - setBorderColor(color: string): void { + setBorderColor(color: string | undefined): void { this._setBorderColor(color, true); // @todo: review this ... this.getChildren().forEach((t) => t.redraw()); } - private _setBorderColor(color: string, updateModel: boolean): void { - const innerShape = this.getInnerShape(); - innerShape.setAttribute('strokeColor', color); - - const connector = this.getShrinkConnector(); - if (connector) { - connector.setAttribute('strokeColor', color); - } - - if ($defined(updateModel) && updateModel) { + private _setBorderColor(color: string | undefined, updateModel: boolean): void { + if (updateModel) { const model = this.getModel(); model.setBorderColor(color); } + + const bgColor = this.getBackgroundColor(); + const connector = this.getShrinkConnector(); + if (connector) { + connector.setColor(bgColor); + } + + const innerShape = this.getInnerShape(); + innerShape.setAttribute('strokeColor', color); } getBorderColor(): string { @@ -1324,7 +1311,7 @@ abstract class Topic extends NodeGraph { iconGroup.setPosition(padding, yPosition); textShape.setPosition(padding + iconGroupWith + textIconSpacing, yPosition); - // Has color changed ? + // Update topic color ... const borderColor = this.getBorderColor(); this.getInnerShape().setStroke(1, 'solid', borderColor); diff --git a/packages/mindplot/src/components/model/INodeModel.ts b/packages/mindplot/src/components/model/INodeModel.ts index 814ee832..fc404e0f 100644 --- a/packages/mindplot/src/components/model/INodeModel.ts +++ b/packages/mindplot/src/components/model/INodeModel.ts @@ -197,7 +197,7 @@ abstract class INodeModel { return this.getProperty('borderColor') as string; } - setBorderColor(color: string): void { + setBorderColor(color: string | undefined): void { this.putProperty('borderColor', color); } @@ -205,7 +205,7 @@ abstract class INodeModel { return this.getProperty('backgroundColor') as string; } - setBackgroundColor(color: string): void { + setBackgroundColor(color: string | undefined): void { this.putProperty('backgroundColor', color); } 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 264c17aa..d47505f5 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