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 006654ac..45e2ac5e 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 91e98c78..7d2536d7 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 9f77c974..f9296df3 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 c3491cbc..0d50c360 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 28807ec0..7f9f6f92 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-complex.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png index 30747264..032560ea 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.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 ccca37ed..769ec2a4 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-huge.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png index d2cb5b1f..84f2c8f4 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 24926fea..f1611b7a 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-img-support.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-img-support.snap.png index 4c24bac2..fd9e1faf 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-img-support.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-img-support.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 6dd958c8..bc14980a 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 625947e4..c3355e84 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-sample5.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png index 7acdc846..ce172eab 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 483ea100..4f72a861 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 42848ee9..f926fe3f 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 e30d9dfc..c65f584c 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 d6176cfe..bce4c558 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 04cd3390..36cacff7 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 531fc037..569489f5 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 49c12983..0d850075 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 bf0a8b8b..1f8bdf77 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 344ab8fb..5451b272 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 c103b005..2b9b761e 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 5fe1072a..0e3aa30b 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 105abb4f..296e79ea 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 f586ce50..a828c127 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 a2d80512..bc5b82be 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 ca598752..a828c127 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 18ecbb0b..193d1b1e 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 6bd5d6fe..20870618 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 30715971..eadd06ec 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 da1565a0..1fd8b38e 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 97952607..dca8d0c0 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 d5109138..8e2a501c 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 81e8eaad..c681e341 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 f2e946c5..f91fb621 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 dfae6412..4d59422b 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 bbf697ca..955dbbef 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/lang/de.json b/packages/editor/lang/de.json index 2343b1c5..c67fa4b8 100644 --- a/packages/editor/lang/de.json +++ b/packages/editor/lang/de.json @@ -224,8 +224,11 @@ "editor-panel.tooltip-connection-style": { "defaultMessage": "Verbindungsstil" }, - "editor-panel.tooltip-connection-style-curved": { - "defaultMessage": "Kurve" + "editor-panel.tooltip-connection-style-curved-thin": { + "defaultMessage": "Dünne Kurve" + }, + "editor-panel.tooltip-connection-style-curved-thick": { + "defaultMessage": "Dicke Kurve" }, "editor-panel.tooltip-connection-style-polyline": { "defaultMessage": "Polylinie" diff --git a/packages/editor/lang/en.json b/packages/editor/lang/en.json index 304c992d..3b45d93f 100644 --- a/packages/editor/lang/en.json +++ b/packages/editor/lang/en.json @@ -65,11 +65,14 @@ "editor-panel.tooltip-connection-style": { "defaultMessage": "Connection Style" }, - "editor-panel.tooltip-connection-style-curved": { - "defaultMessage": "Curved" + "editor-panel.tooltip-connection-style-curved-thin": { + "defaultMessage": "Thin Curve" + }, + "editor-panel.tooltip-connection-style-curved-thick": { + "defaultMessage": "Think Curve" }, "editor-panel.tooltip-connection-style-polyline": { - "defaultMessage": "Polyline" + "defaultMessage": "Simple Polyline" }, "editor-panel.tooltip-connection-style-polyline-curved": { "defaultMessage": "Curved Polyline" diff --git a/packages/editor/lang/es.json b/packages/editor/lang/es.json index 1bd4083b..d1af87b5 100644 --- a/packages/editor/lang/es.json +++ b/packages/editor/lang/es.json @@ -218,8 +218,11 @@ "editor-panel.tooltip-connection-style": { "defaultMessage": "Estilo de Connexión" }, - "editor-panel.tooltip-connection-style-curved": { - "defaultMessage": "Curva" + "editor-panel.tooltip-connection-style-curved-thin": { + "defaultMessage": "Curva fina" + }, + "editor-panel.tooltip-connection-style-curved-thick": { + "defaultMessage": "Curva guesa" }, "editor-panel.tooltip-connection-style-polyline": { "defaultMessage": "Polilinea" diff --git a/packages/editor/lang/fr.json b/packages/editor/lang/fr.json index db4f1f60..0ebf7713 100644 --- a/packages/editor/lang/fr.json +++ b/packages/editor/lang/fr.json @@ -218,8 +218,11 @@ "editor-panel.tooltip-connection-style": { "defaultMessage": "Style de connexion" }, - "editor-panel.tooltip-connection-style-curved": { - "defaultMessage": "Courbe" + "editor-panel.tooltip-connection-style-curved-thin": { + "defaultMessage": "Mince courbe" + }, + "editor-panel.tooltip-connection-style-curved-thick": { + "defaultMessage": "épaisse courbé" }, "editor-panel.tooltip-connection-style-polyline": { "defaultMessage": "Polyligne" diff --git a/packages/editor/src/compiled-lang/de.json b/packages/editor/src/compiled-lang/de.json index a8716650..0e44521a 100644 --- a/packages/editor/src/compiled-lang/de.json +++ b/packages/editor/src/compiled-lang/de.json @@ -137,10 +137,16 @@ "value": "Verbindungsstil" } ], - "editor-panel.tooltip-connection-style-curved": [ + "editor-panel.tooltip-connection-style-curved-thick": [ { "type": 0, - "value": "Kurve" + "value": "Dicke Kurve" + } + ], + "editor-panel.tooltip-connection-style-curved-thin": [ + { + "type": 0, + "value": "Dünne Kurve" } ], "editor-panel.tooltip-connection-style-polyline": [ diff --git a/packages/editor/src/compiled-lang/en.json b/packages/editor/src/compiled-lang/en.json index 5b471e42..4b3e3f7b 100644 --- a/packages/editor/src/compiled-lang/en.json +++ b/packages/editor/src/compiled-lang/en.json @@ -131,16 +131,22 @@ "value": "Connection Style" } ], - "editor-panel.tooltip-connection-style-curved": [ + "editor-panel.tooltip-connection-style-curved-thick": [ { "type": 0, - "value": "Curved" + "value": "Think Curve" + } + ], + "editor-panel.tooltip-connection-style-curved-thin": [ + { + "type": 0, + "value": "Thin Curve" } ], "editor-panel.tooltip-connection-style-polyline": [ { "type": 0, - "value": "Polyline" + "value": "Simple Polyline" } ], "editor-panel.tooltip-connection-style-polyline-curved": [ diff --git a/packages/editor/src/compiled-lang/es.json b/packages/editor/src/compiled-lang/es.json index 119949a0..40ab985f 100644 --- a/packages/editor/src/compiled-lang/es.json +++ b/packages/editor/src/compiled-lang/es.json @@ -131,10 +131,16 @@ "value": "Estilo de Connexión" } ], - "editor-panel.tooltip-connection-style-curved": [ + "editor-panel.tooltip-connection-style-curved-thick": [ { "type": 0, - "value": "Curva" + "value": "Curva guesa" + } + ], + "editor-panel.tooltip-connection-style-curved-thin": [ + { + "type": 0, + "value": "Curva fina" } ], "editor-panel.tooltip-connection-style-polyline": [ diff --git a/packages/editor/src/compiled-lang/fr.json b/packages/editor/src/compiled-lang/fr.json index 7ca9c527..f1003760 100644 --- a/packages/editor/src/compiled-lang/fr.json +++ b/packages/editor/src/compiled-lang/fr.json @@ -131,10 +131,16 @@ "value": "Style de connexion" } ], - "editor-panel.tooltip-connection-style-curved": [ + "editor-panel.tooltip-connection-style-curved-thick": [ { "type": 0, - "value": "Courbe" + "value": "épaisse courbé" + } + ], + "editor-panel.tooltip-connection-style-curved-thin": [ + { + "type": 0, + "value": "Mince courbe" } ], "editor-panel.tooltip-connection-style-polyline": [ diff --git a/packages/editor/src/components/editor-toolbar/configBuilder.tsx b/packages/editor/src/components/editor-toolbar/configBuilder.tsx index 968041cb..d3728d38 100644 --- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx +++ b/packages/editor/src/components/editor-toolbar/configBuilder.tsx @@ -161,26 +161,26 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo { icon: , tooltip: intl.formatMessage({ - id: 'editor-panel.tooltip-connection-style-curved', - defaultMessage: 'Curved', + id: 'editor-panel.tooltip-connection-style-curved-thin', + defaultMessage: 'Thin Curved', }), - onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED), - selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_CURVED, + onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THICK_CURVED), + selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED, + }, + { + icon: , + tooltip: intl.formatMessage({ + 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, }, - // { - // icon: , - // tooltip: intl.formatMessage({ - // id: 'editor-panel.tooltip-connection-style-curved-nice', - // defaultMessage: 'Curved', - // }), - // onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.NICE_CURVED), - // selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.NICE_CURVED, - // }, { icon: , tooltip: intl.formatMessage({ id: 'editor-panel.tooltip-connection-style-polyline', - defaultMessage: 'Polyline', + defaultMessage: 'Simple Polyline', }), onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE), selected: () => @@ -196,6 +196,26 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED, }, + // null, + // { + // icon: () => , + // tooltip: intl.formatMessage({ + // id: 'editor-panel.tooltip-connection-style-color', + // defaultMessage: 'Color', + // }), + // options: [ + // { + // render: (closeModal) => { + // return ( + // + // ); + // }, + // }, + // ], + // }, ], disabled: () => { const selected = model.getDesignerModel().filterSelectedTopics(); @@ -268,10 +288,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo { render: (closeModal) => { return ( - + ); }, }, diff --git a/packages/mindplot/src/components/ConnectionLine.ts b/packages/mindplot/src/components/ConnectionLine.ts index 39bcbb6b..ff599501 100644 --- a/packages/mindplot/src/components/ConnectionLine.ts +++ b/packages/mindplot/src/components/ConnectionLine.ts @@ -24,10 +24,10 @@ import Workspace from './Workspace'; // eslint-disable-next-line no-shadow export enum LineType { - SIMPLE_CURVED, + THIN_CURVED, POLYLINE_MIDDLE, POLYLINE_CURVED, - NICE_CURVED, + THICK_CURVED, } class ConnectionLine { @@ -41,7 +41,7 @@ class ConnectionLine { private _type: LineType; - constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) { + constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.THIN_CURVED) { $assert(targetNode, 'parentNode node can not be null'); $assert(sourceNode, 'childNode node can not be null'); $assert(sourceNode !== targetNode, 'Circular connection'); @@ -81,17 +81,16 @@ class ConnectionLine { (line as PolyLine).setStyle('Curved'); (line as PolyLine).setStroke(1, 'solid', strokeColor, 1); break; - case LineType.SIMPLE_CURVED: + case LineType.THIN_CURVED: line = new CurvedLine(); - (line as CurvedLine).setStyle(CurvedLine.SIMPLE_LINE); (line as CurvedLine).setStroke(1, 'solid', strokeColor, 1); (line as CurvedLine).setFill(strokeColor, 1); break; - case LineType.NICE_CURVED: + case LineType.THICK_CURVED: line = new CurvedLine(); - (line as CurvedLine).setStyle(CurvedLine.NICE_LINE); (line as CurvedLine).setStroke(1, 'solid', strokeColor, 1); (line as CurvedLine).setFill(strokeColor, 1); + (line as CurvedLine).setWidth(this._targetTopic.isCentralTopic() ? 15 : 3); break; default: throw new Error(`Unexpected line type. ${lineType}`); @@ -126,7 +125,7 @@ class ConnectionLine { line2d.setFrom(tPos.x, tPos.y); line2d.setTo(sPos.x, sPos.y); - if (this._type === LineType.NICE_CURVED || this._type === LineType.SIMPLE_CURVED) { + if (this._type === LineType.THICK_CURVED || this._type === LineType.THIN_CURVED) { const ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic); line2d.setSrcControlPoint(ctrlPoints[0]); line2d.setDestControlPoint(ctrlPoints[1]); diff --git a/packages/mindplot/src/components/DragPivot.ts b/packages/mindplot/src/components/DragPivot.ts index 2d751281..991227b5 100644 --- a/packages/mindplot/src/components/DragPivot.ts +++ b/packages/mindplot/src/components/DragPivot.ts @@ -63,7 +63,6 @@ class DragPivot { private _buildStraightLine(): CurvedLine { const line = new CurvedLine(); - line.setStyle(CurvedLine.SIMPLE_LINE); line.setStroke(1, 'solid', '#CC0033'); line.setOpacity(0.4); line.setVisibility(false); @@ -72,7 +71,6 @@ class DragPivot { private _buildCurvedLine(): CurvedLine { const line = new CurvedLine(); - line.setStyle(CurvedLine.SIMPLE_LINE); line.setStroke(1, 'solid', '#CC0033'); line.setOpacity(0.4); line.setVisibility(false); diff --git a/packages/mindplot/src/components/Relationship.ts b/packages/mindplot/src/components/Relationship.ts index 91305f44..ea290880 100644 --- a/packages/mindplot/src/components/Relationship.ts +++ b/packages/mindplot/src/components/Relationship.ts @@ -64,7 +64,7 @@ class Relationship extends ConnectionLine { this._line2d.setTestId(`${model.getFromNode()}-${model.getToNode()}-relationship`); // Build focus shape ... - this._focusShape = this._createLine(LineType.SIMPLE_CURVED); + this._focusShape = this._createLine(LineType.THIN_CURVED); this._focusShape.setStroke(8, 'solid', '#3f96ff'); this._focusShape.setIsSrcControlPointCustom(false); this._focusShape.setIsDestControlPointCustom(false); diff --git a/packages/mindplot/src/components/RelationshipPivot.ts b/packages/mindplot/src/components/RelationshipPivot.ts index 24fad98a..3304a74c 100644 --- a/packages/mindplot/src/components/RelationshipPivot.ts +++ b/packages/mindplot/src/components/RelationshipPivot.ts @@ -63,8 +63,6 @@ class RelationshipPivot { const strokeColor = Relationship.getStrokeColor(); this._pivot = new CurvedLine(); - this._pivot.setStyle(CurvedLine.SIMPLE_LINE); - const fromPos = this._calculateFromPosition(sourcePos); this._pivot.setFrom(fromPos.x, fromPos.y); diff --git a/packages/mindplot/src/components/TopicStyle.ts b/packages/mindplot/src/components/TopicStyle.ts index 458c0143..6c3f571c 100644 --- a/packages/mindplot/src/components/TopicStyle.ts +++ b/packages/mindplot/src/components/TopicStyle.ts @@ -48,7 +48,7 @@ const TopicDefaultStyles = { weight: 'bold', color: '#ffffff', }, - connectionStyle: LineType.NICE_CURVED, + connectionStyle: LineType.THICK_CURVED, msgKey: 'CENTRAL_TOPIC', shapeType: 'rounded rectangle' as TopicShapeType, }, @@ -62,7 +62,7 @@ const TopicDefaultStyles = { weight: 'normal', color: 'rgb(82,92,97)', }, - connectionStyle: LineType.SIMPLE_CURVED, + connectionStyle: LineType.THICK_CURVED, msgKey: 'MAIN_TOPIC', shapeType: 'line' as TopicShapeType, }, @@ -76,7 +76,7 @@ const TopicDefaultStyles = { weight: 'normal', color: 'rgb(82,92,97)', }, - connectionStyle: LineType.SIMPLE_CURVED, + connectionStyle: LineType.THIN_CURVED, msgKey: 'SUB_TOPIC', shapeType: 'line' as TopicShapeType, }, @@ -92,7 +92,7 @@ const TopicDefaultStyles = { color: 'rgb(82,92,97)', }, msgKey: 'ISOLATED_TOPIC', - connectionStyle: LineType.SIMPLE_CURVED, + connectionStyle: LineType.THIN_CURVED, shapeType: 'line' as TopicShapeType, }, }; diff --git a/packages/mindplot/src/components/model/RelationshipModel.ts b/packages/mindplot/src/components/model/RelationshipModel.ts index c4876c23..261f01e8 100644 --- a/packages/mindplot/src/components/model/RelationshipModel.ts +++ b/packages/mindplot/src/components/model/RelationshipModel.ts @@ -47,7 +47,7 @@ class RelationshipModel { this._id = RelationshipModel._nextUUID(); this._sourceTargetId = sourceTopicId; this._targetTopicId = targetTopicId; - this._lineType = LineType.SIMPLE_CURVED; + this._lineType = LineType.THIN_CURVED; this._srcCtrlPoint = null; this._destCtrlPoint = null; this._endArrow = true; diff --git a/packages/web2d/cypress/snapshots/playground.cy.js/Curved Line.snap.png b/packages/web2d/cypress/snapshots/playground.cy.js/Curved Line.snap.png index b44d5e97..20fcd071 100644 Binary files a/packages/web2d/cypress/snapshots/playground.cy.js/Curved Line.snap.png and b/packages/web2d/cypress/snapshots/playground.cy.js/Curved Line.snap.png differ diff --git a/packages/web2d/src/components/CurvedLine.js b/packages/web2d/src/components/CurvedLine.js index 96482f85..cf617896 100644 --- a/packages/web2d/src/components/CurvedLine.js +++ b/packages/web2d/src/components/CurvedLine.js @@ -112,20 +112,17 @@ class CurvedLine extends ElementClass { return this.peer.updateLine(avoidControlPointFix); } - setStyle(style) { - this.peer.setLineStyle(style); - } - - getStyle() { - return this.peer.getLineStyle(); - } - setDashed(length, spacing) { this.peer.setDashed(length, spacing); } + + getWidth() { + return this.peer.getWidth(); + } + + setWidth(value) { + this.peer.setWidth(value); + } } -CurvedLine.SIMPLE_LINE = false; -CurvedLine.NICE_LINE = true; - export default CurvedLine; diff --git a/packages/web2d/src/components/peer/svg/CurvedLinePeer.js b/packages/web2d/src/components/peer/svg/CurvedLinePeer.js index fd9ab141..0d5b7dfb 100644 --- a/packages/web2d/src/components/peer/svg/CurvedLinePeer.js +++ b/packages/web2d/src/components/peer/svg/CurvedLinePeer.js @@ -29,7 +29,7 @@ class CurvedLinePeer extends ElementPeer { this._customControlPoint_2 = false; this._control1 = new Point(0, 0); this._control2 = new Point(0, 0); - this._lineStyle = true; + this._width = 1; } setSrcControlPoint(control) { @@ -75,16 +75,16 @@ class CurvedLinePeer extends ElementPeer { } setFrom(x1, y1) { - const change = this._x1 !== Number.parseFloat(x1, 10) || this._y1 !== Number.parseFloat(y1, 10); - this._x1 = Number.parseFloat(x1, 10); - this._y1 = Number.parseFloat(y1, 10); + const change = this._x1 !== x1 || this._y1 !== y1; + this._x1 = x1; + this._y1 = y1; if (change) { this._updatePath(); } } setTo(x2, y2) { - const change = this._x2 !== Number.parseFloat(x2, 10) || this._y2 !== parseFloat(y2, 10); - this._x2 = Number.parseFloat(x2, 10); - this._y2 = Number.parseFloat(y2, 10); + const change = this._x2 !== x2 || this._y2 !== y2; + this._x2 = x2; + this._y2 = y2; if (change) this._updatePath(); } @@ -111,22 +111,6 @@ class CurvedLinePeer extends ElementPeer { this._updatePath(avoidControlPointFix); } - setLineStyle(style) { - this._lineStyle = style; - if (this._lineStyle) { - this._style.fill = this._fill; - } else { - this._fill = this._style.fill; - this._style.fill = 'none'; - } - this._updateStyle(); - this.updateLine(); - } - - getLineStyle() { - return this._lineStyle; - } - setShowEndArrow(visible) { this._showEndArrow = visible; this.updateLine(); @@ -145,25 +129,42 @@ class CurvedLinePeer extends ElementPeer { return this._showStartArrow; } + getWidth() { + return this._width; + } + + setWidth(value) { + this._width = value; + if (this._width >= 1) { + this._style.fill = this._fill; + } else { + this._fill = this._style.fill; + this._style.fill = 'none'; + } + this._updateStyle(); + this.updateLine(); + } + _updatePath(avoidControlPointFix) { if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) { this._calculateAutoControlPoints(avoidControlPointFix); - const moveTo = CurvedLinePeer._pointToStr(this._x1, this._y1); + const moveTo = CurvedLinePeer._pointToStr(this._x1, this._y1 - this.getWidth() / 2); const curveP1 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1); const curveP2 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2); const curveP3 = CurvedLinePeer._pointToStr(this._x2, this._y2); - const curveP4 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2 + 3); - const curveP5 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1 + 5); - const curveP6 = CurvedLinePeer._pointToStr(this._x1, this._y1 + 7); - const path = `M${moveTo} C${curveP1} ${curveP2} ${curveP3} ${this._lineStyle ? ` ${curveP4} ${curveP5} ${curveP6} Z` : ''}`; + const curveP4 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2 + this.getWidth() * 0.4); + const curveP5 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1 + this.getWidth() * 0.7); + const curveP6 = CurvedLinePeer._pointToStr(this._x1, this._y1 + this.getWidth() / 2); + + const path = `M${moveTo} C${curveP1} ${curveP2} ${curveP3} ${this.getWidth() >= 1 ? ` ${curveP4} ${curveP5} ${curveP6} Z` : ''}`; this._native.setAttribute('d', path); } } static _pointToStr(x, y) { - return `${(x).toFixed(3)},${(y).toFixed(3)} `; + return `${(x).toFixed()},${(y).toFixed(1)} `; } _updateStyle() { diff --git a/packages/web2d/test/playground/curvedLine.html b/packages/web2d/test/playground/curvedLine.html index ce753152..5d516952 100644 --- a/packages/web2d/test/playground/curvedLine.html +++ b/packages/web2d/test/playground/curvedLine.html @@ -28,6 +28,17 @@
+ + + Curved Line Nice - Size + + +
+
+
+
+ + diff --git a/packages/web2d/test/playground/curvedLine.js b/packages/web2d/test/playground/curvedLine.js index 22fec585..11043284 100644 --- a/packages/web2d/test/playground/curvedLine.js +++ b/packages/web2d/test/playground/curvedLine.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import { Workspace, CurvedLine, Point, Elipse } from '../../src'; -const drawLine = (type) => { +const drawLine = (size) => { const workspace = new Workspace(); workspace.setSize('300px', '300px'); workspace.setCoordSize(300, 300); @@ -9,42 +9,46 @@ const drawLine = (type) => { // Line 1 ... const line1 = new CurvedLine(); - line1.setStyle(type); line1.setFrom(0, 0); line1.setTo(100, 100); line1.setSrcControlPoint(new Point(100 / 2, 0)); line1.setDestControlPoint(new Point(-100 / 2, 0)); - line1.setStroke(4, 'solid', 'blue', 1); + line1.setStroke(1, 'solid', 'blue', 1); + line1.setWidth(size); workspace.append(line1); const line2 = new CurvedLine(); - line2.setStyle(type); line2.setFrom(0, 0); line2.setTo(-100, -100); line2.setSrcControlPoint(new Point(-100 / 2, 0)); line2.setDestControlPoint(new Point(100 / 2, 0)); + line2.setStroke(1, 'solid', 'blue', 1); + line2.setWidth(size); workspace.append(line2); const line3 = new CurvedLine(); - line3.setStyle(type); line3.setFrom(0, 0); line3.setTo(100, -100); line3.setSrcControlPoint(new Point(100 / 2, 0)); line3.setDestControlPoint(new Point(-100 / 2, 0)); + line3.setStroke(1, 'solid', 'blue', 1); + line3.setWidth(size); workspace.append(line3); const line4 = new CurvedLine(); - line4.setStyle(type); line4.setFrom(0, 0); line4.setTo(-100, 100); line4.setSrcControlPoint(new Point(-100 / 2, 0)); line4.setDestControlPoint(new Point(100 / 2, 0)); + line4.setStroke(1, 'solid', 'blue', 1); + line4.setWidth(size); workspace.append(line4); // Add referene point ... const e1 = new Elipse(); - e1.setSize(30, 30); + e1.setSize(5, 5); e1.setPosition(0, 0); + e1.setFill('red'); workspace.append(e1); const e2 = new Elipse(); @@ -70,8 +74,20 @@ const drawLine = (type) => { return workspace; }; -const w1 = drawLine(CurvedLine.SIMPLE_LINE); +const w1 = drawLine(1); w1.addItAsChildTo($('#curvedSimpleExample').first()); -const w2 = drawLine(CurvedLine.NICE_LINE); +const w2 = drawLine(28); w2.addItAsChildTo($('#curvedNiceExample').first()); + +const w3 = drawLine(1); +w3.addItAsChildTo($('#curvedSize1NiceExample').first()); + +const w4 = drawLine(7); +w4.addItAsChildTo($('#curvedSize7NiceExample').first()); + +const w5 = drawLine(14); +w5.addItAsChildTo($('#curvedSize14NiceExample').first()); + +const w6 = drawLine(30); +w6.addItAsChildTo($('#curvedSize30NiceExample').first()); 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 1c546d03..02a94781 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