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 bc207983..1429d011 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 b12a6545..3396d83b 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 fefe0de7..f009fc02 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 42c12b81..cf3eba65 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 7245a3de..35e9cf2b 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 cf047290..4ec8722d 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-connection-style.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png index e25cfcb5..b5e17fc1 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 9ff2c58a..8aa6ef00 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 c2bba0bf..0d41642e 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 8e67880a..5b2545fa 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 9609e478..6d1a3cee 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 019d4490..bdb739d5 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 8f949afa..ffbdfdce 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-img-support.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-img-support.snap.png index 49daae87..58ee15e3 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-order.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png index 9bb16e01..043524e3 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 7cc56d9b..b3fc8ab8 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 8eeb45ce..67f8e385 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 6480e0d2..925d65e0 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 57ee108e..aa76cecf 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 752858eb..ab2c14ba 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 238924fe..ba6f237a 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 fb3ed98a..e6673657 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 fca3ff1e..e498be38 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/topicDragAndDrop.cy.ts/moveDefaultPosition.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveDefaultPosition.snap.png index 65895025..e88237be 100644 Binary files a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveDefaultPosition.snap.png and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveDefaultPosition.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/movedownNode.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/movedownNode.snap.png index 58527ba3..cff28419 100644 Binary files a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/movedownNode.snap.png and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/movedownNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveleftNode.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveleftNode.snap.png index e6f78abd..7a523b9e 100644 Binary files a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveleftNode.snap.png and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveleftNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveupNode.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveupNode.snap.png index fbfb3e5c..f7ad3802 100644 Binary files a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveupNode.snap.png and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveupNode.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 14b6b9a5..443defdf 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 221e6827..99b25176 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 29c610c4..af77abaa 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 32527ec4..138a11d4 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 7bef3500..6f88b7ce 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 f1778c65..ffd016a5 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 2fa9a893..3e9f1cb7 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 9caca3b7..befaab25 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/topicFontChange.cy.ts/fontShapePanel.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png index 5f523362..31a09701 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicIcon.cy.ts/add-new-icon.snap.png b/packages/editor/cypress/snapshots/topicIcon.cy.ts/add-new-icon.snap.png index b9e83ef3..c8e76c80 100644 Binary files a/packages/editor/cypress/snapshots/topicIcon.cy.ts/add-new-icon.snap.png and b/packages/editor/cypress/snapshots/topicIcon.cy.ts/add-new-icon.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicIcon.cy.ts/icons-pannel.snap.png b/packages/editor/cypress/snapshots/topicIcon.cy.ts/icons-pannel.snap.png index 436ffdd8..b0836179 100644 Binary files a/packages/editor/cypress/snapshots/topicIcon.cy.ts/icons-pannel.snap.png and b/packages/editor/cypress/snapshots/topicIcon.cy.ts/icons-pannel.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 f15afd3b..2ec2a7e0 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 b1de30c7..59065976 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 c1fdf2c2..82d9d406 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 b1fdc22a..82d9d406 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 0f79e67e..9175e724 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 29173dd4..d11fcfa3 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/topicShape.cy.ts/changeToEllipseShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png index d186824c..12e7cbe9 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 bcf527f8..881b7ecd 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 4a21d2ad..6b870a65 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 08f53b35..786c6bc1 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/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png index 27532612..12bde40a 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png differ diff --git a/packages/mindplot/src/components/NodeGraph.ts b/packages/mindplot/src/components/NodeGraph.ts index 15bdb493..beb95ac8 100644 --- a/packages/mindplot/src/components/NodeGraph.ts +++ b/packages/mindplot/src/components/NodeGraph.ts @@ -17,7 +17,6 @@ */ import { $assert } from '@wisemapping/core-js'; import { ElementClass, Point } from '@wisemapping/web2d'; -import TopicConfig from './TopicConfig'; import NodeModel from './model/NodeModel'; import Workspace from './Workspace'; import DragTopic from './DragTopic'; @@ -33,7 +32,7 @@ abstract class NodeGraph { private _options: NodeOption; - private _onFocus: boolean; + protected _onFocus: boolean; private _size: SizeType; @@ -126,26 +125,7 @@ abstract class NodeGraph { return this._model.getId(); } - setOnFocus(focus: boolean) { - if (this._onFocus !== focus) { - this._onFocus = focus; - const outerShape = this.getOuterShape(); - if (focus) { - outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor); - outerShape.setOpacity(1); - } else { - outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor); - outerShape.setOpacity(0); - } - this.setCursor('move'); - - // In any case, always try to hide the editor ... - this.closeEditors(); - - // Fire event ... - this.fireEvent(focus ? 'ontfocus' : 'ontblur', this); - } - } + abstract setOnFocus(focus: boolean): void; abstract closeEditors(): void; diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index 247fe892..1d707ae6 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/packages/mindplot/src/components/Topic.ts @@ -262,8 +262,9 @@ abstract class Topic extends NodeGraph { getOuterShape(): ElementClass { if (!this._outerShape) { - const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, 'rounded rectangle'); - rect.setPosition(-2, -3); + const rect = this._buildShape({}, 'rounded rectangle'); + + rect.setPosition(-3, -3); rect.setOpacity(0); this._outerShape = rect; } @@ -520,8 +521,8 @@ abstract class Topic extends NodeGraph { let result = model.getBackgroundColor(); if (!result && !this.isCentralTopic()) { - const bolderColor = this.getBorderColor(); - result = ColorUtil.lightenColor(bolderColor, 140); + const borderColor = this.getBorderColor(); + result = ColorUtil.lightenColor(borderColor, 40); } if (!result) { @@ -634,6 +635,28 @@ abstract class Topic extends NodeGraph { }); } + setOnFocus(focus: boolean) { + if (this.isOnFocus() !== focus) { + this._onFocus = focus; + const outerShape = this.getOuterShape(); + + const fillColor = TopicStyle.defaultOuterBackgroundColor(this, focus); + const borderColor = TopicStyle.defaultOuterBorderColor(this); + + outerShape.setFill(fillColor); + outerShape.setStroke(1, 'solid', borderColor); + outerShape.setOpacity(focus ? 1 : 0); + + this.setCursor('move'); + + // In any case, always try to hide the editor ... + this.closeEditors(); + + // Fire event ... + this.fireEvent(focus ? 'ontfocus' : 'ontblur', this); + } + } + areChildrenShrunken(): boolean { const model = this.getModel(); return model.areChildrenShrunken() && !this.isCentralTopic(); @@ -975,7 +998,7 @@ abstract class Topic extends NodeGraph { const outerShape = this.getOuterShape(); const innerShape = this.getInnerShape(); - outerShape.setSize(roundedSize.width + 4, roundedSize.height + 6); + outerShape.setSize(roundedSize.width + 6, roundedSize.height + 6); innerShape.setSize(roundedSize.width, roundedSize.height); // Update the figure position(ej: central topic must be centered) and children position. @@ -1208,6 +1231,14 @@ abstract class Topic extends NodeGraph { const text = this.getText(); textShape.setText(text.trim()); + // Update other shape style ... + const outerShape = this.getOuterShape(); + const outerFillColor = TopicStyle.defaultOuterBackgroundColor(this, this.isOnFocus()); + const outerBorderColor = TopicStyle.defaultOuterBorderColor(this); + + outerShape.setFill(outerFillColor); + outerShape.setStroke(1, 'solid', outerBorderColor); + // Calculate topic size and adjust elements ... const textWidth = textShape.getWidth(); const textHeight = textShape.getHeight(); diff --git a/packages/mindplot/src/components/TopicConfig.ts b/packages/mindplot/src/components/TopicConfig.ts index d50dc3ad..4a477e87 100644 --- a/packages/mindplot/src/components/TopicConfig.ts +++ b/packages/mindplot/src/components/TopicConfig.ts @@ -17,21 +17,9 @@ */ const CONNECTOR_WIDTH = 6; - -const OUTER_SHAPE_ATTRIBUTES = { - fillColor: 'rgb(252,235,192)', - stroke: '1 solid rgb(241,163,39)', - x: 0, - y: 0, -}; - -const OUTER_SHAPE_ATTRIBUTES_FOCUS = { fillColor: 'rgb(244,184,45)', x: 0, y: 0 }; - const INNER_RECT_ATTRIBUTES = { stroke: '2 solid' }; export default { CONNECTOR_WIDTH, - OUTER_SHAPE_ATTRIBUTES, - OUTER_SHAPE_ATTRIBUTES_FOCUS, INNER_RECT_ATTRIBUTES, }; diff --git a/packages/mindplot/src/components/TopicEventDispatcher.ts b/packages/mindplot/src/components/TopicEventDispatcher.ts index dd9d5b12..e22743f7 100644 --- a/packages/mindplot/src/components/TopicEventDispatcher.ts +++ b/packages/mindplot/src/components/TopicEventDispatcher.ts @@ -55,7 +55,7 @@ class TopicEventDispatcher extends Events { // Open the new editor ... const model = topic.getModel(); - if (model.getShapeType() !== 'image' && !this._readOnly && eventType === TopicEvent.EDIT) { + if (!this._readOnly && eventType === TopicEvent.EDIT) { editor.show(topic, textOverwrite); } else { this.fireEvent(eventType, { model, readOnly: this._readOnly }); @@ -71,6 +71,9 @@ class TopicEventDispatcher extends Events { } static getInstance(): TopicEventDispatcher { + if (!this._instance) { + throw new Error('Event dispatched has not been initialized'); + } return this._instance; } } diff --git a/packages/mindplot/src/components/TopicStyle.ts b/packages/mindplot/src/components/TopicStyle.ts index 653048b8..00104e08 100644 --- a/packages/mindplot/src/components/TopicStyle.ts +++ b/packages/mindplot/src/components/TopicStyle.ts @@ -21,6 +21,7 @@ import { FontStyleType } from './FontStyleType'; import { FontWeightType } from './FontWeightType'; import { $msg } from './Messages'; import { TopicShapeType } from './model/INodeModel'; +import ColorUtil from './render/ColorUtil'; import Topic from './Topic'; type FontStyle = { @@ -43,8 +44,8 @@ type TopicStyleType = { const TopicDefaultStyles = { CENTRAL_TOPIC: { - borderColor: 'rgb(57,113,177)', - backgroundColor: 'rgb(80,157,192)', + borderColor: '#3971B1', + backgroundColor: '#509DC0', fontStyle: { font: 'Verdana', size: 10, @@ -58,14 +59,14 @@ const TopicDefaultStyles = { shapeType: 'rounded rectangle' as TopicShapeType, }, MAIN_TOPIC: { - borderColor: 'rgb(2,59,185)', - backgroundColor: 'rgb(224,229,239)', + borderColor: '#023BB9', + backgroundColor: '#E0E5EF', fontStyle: { font: 'Arial', size: 8, style: 'normal' as FontStyleType, weight: 'normal' as FontWeightType, - color: 'rgb(82,92,97)', + color: '#525C61', }, connectionStyle: LineType.THICK_CURVED, connectionColor: '#495879', @@ -73,14 +74,14 @@ const TopicDefaultStyles = { shapeType: 'line' as TopicShapeType, }, SUB_TOPIC: { - borderColor: 'rgb(2,59,185)', - backgroundColor: 'rgb(224,229,239)', + borderColor: '#96e3ff', + backgroundColor: '#96e3ff', fontStyle: { font: 'Arial', size: 6, style: 'normal' as FontStyleType, weight: 'normal' as FontWeightType, - color: 'rgb(82,92,97)', + color: '#525C61', }, connectionStyle: LineType.THICK_CURVED, connectionColor: '#495879', @@ -89,14 +90,14 @@ const TopicDefaultStyles = { }, ISOLATED_TOPIC: { - borderColor: 'rgb(2,59,185)', - backgroundColor: 'rgb(224,229,239)', + borderColor: '#023BB9', + backgroundColor: '#96e3ff', fontStyle: { font: 'Verdana', size: 8, style: 'normal' as FontStyleType, weight: 'normal' as FontWeightType, - color: 'rgb(82,92,97)', + color: '#525C61', }, msgKey: 'ISOLATED_TOPIC', connectionStyle: LineType.THIN_CURVED, @@ -136,6 +137,28 @@ class TopicStyle { return this._getStyles(topic).fontStyle; } + static defaultOuterBorderColor(topic: Topic): string { + let result: string; + if (topic.getShapeType() === 'line') { + result = '#F4B82D'; + } else { + const innerBorderColor = topic.getBorderColor(); + result = ColorUtil.lightenColor(innerBorderColor, 70); + } + return result; + } + + static defaultOuterBackgroundColor(topic: Topic, onFocus: boolean): string { + let result: string; + if (topic.getShapeType() === 'line') { + result = onFocus ? '#F4B82D' : '#FCEBC0'; + } else { + const innerBgColor = topic.getBackgroundColor(); + result = ColorUtil.lightenColor(innerBgColor, 70); + } + return result; + } + static defaultBackgroundColor(topic: Topic): string { return this._getStyles(topic).backgroundColor; } diff --git a/packages/mindplot/storybook/src/stories/TextEditor.stories.ts b/packages/mindplot/storybook/src/stories/TextEditor.stories.ts new file mode 100644 index 00000000..429af983 --- /dev/null +++ b/packages/mindplot/storybook/src/stories/TextEditor.stories.ts @@ -0,0 +1,34 @@ +import { Story, Meta } from '@storybook/html'; +import createTopic, { TopicArgs } from './Topic'; + +export default { + title: 'Mindplot/TextEditor', + // More on argTypes: https://storybook.js.org/docs/html/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + borderColor: { control: 'color' }, + fontFamily: { + options: ['Arial', 'Verdana'], + control: { type: 'select' }, + }, + fontSize: { control: { type: 'number', min: 0, max: 20, step: 2 } }, + fontColor: { control: 'color' }, + shapeType: { + options: ['rectangle', 'rounded rectangle', 'elipse', 'line'], + control: { type: 'select' }, + }, + text: { control: 'text' }, + noteText: { control: 'text' }, + linkText: { control: 'text' }, + eicon: { control: 'multi-select', options: ['❤️', '🌈', '🖇️'] }, + }, +} as Meta; + +const Template: Story = (args: TopicArgs) => createTopic(args); + +export const MultilineEditor = Template.bind({}); +MultilineEditor.args = { + text: 'Border Style', + borderColor: '#52E661', + readOnly: false, +}; diff --git a/packages/mindplot/storybook/src/stories/Topic.stories.ts b/packages/mindplot/storybook/src/stories/Topic.stories.ts index a32d8401..a9a447fa 100644 --- a/packages/mindplot/storybook/src/stories/Topic.stories.ts +++ b/packages/mindplot/storybook/src/stories/Topic.stories.ts @@ -1,6 +1,6 @@ -import createTopic from './Topic'; +import { Story, Meta } from '@storybook/html'; +import createTopic, { TopicArgs } from './Topic'; -// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export export default { title: 'Mindplot/Topic', // More on argTypes: https://storybook.js.org/docs/html/api/argtypes @@ -22,22 +22,17 @@ export default { linkText: { control: 'text' }, eicon: { control: 'multi-select', options: ['❤️', '🌈', '🖇️'] }, }, -}; +} as Meta; -// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args -const Template = ({ ...args }) => createTopic({ ...args }); +const Template: Story = (args: TopicArgs) => createTopic(args); export const BoderderStyle = Template.bind({}); -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore BoderderStyle.args = { text: 'Border Style', - borderColor: 'red', + borderColor: '#52E661', }; export const FontStyle = Template.bind({}); -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore FontStyle.args = { text: 'Font Style', fontColor: 'red', @@ -46,33 +41,39 @@ FontStyle.args = { }; export const BackgroundColor = Template.bind({}); -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore BackgroundColor.args = { - text: 'Background Color Style', - backgroundColor: 'red', + text: 'Back Color Style', + backgroundColor: '#52E661', }; export const NoteFeature = Template.bind({}); -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore NoteFeature.args = { text: 'Note Feature', noteText: 'This is great note\nwith two lines', }; export const LinkFeature = Template.bind({}); -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore LinkFeature.args = { text: 'Link Feature', linkText: 'https://www.google.com/', }; export const IconFeature = Template.bind({}); -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore IconFeature.args = { text: 'EIcon Feature\n with multi-line', eicon: ['❤️', '🌈', '🖇️'], }; + +export const ShapeLine = Template.bind({}); +ShapeLine.args = { + text: 'Shape Line', + shapeType: 'line', + eicon: ['🖇️'], +}; + +export const ShapeEllipse = Template.bind({}); +ShapeEllipse.args = { + text: 'Shape Ellipse', + eicon: ['🌈'], + shapeType: 'elipse', +}; diff --git a/packages/mindplot/storybook/src/stories/Topic.ts b/packages/mindplot/storybook/src/stories/Topic.ts index fe14e189..581fb9f8 100644 --- a/packages/mindplot/storybook/src/stories/Topic.ts +++ b/packages/mindplot/storybook/src/stories/Topic.ts @@ -6,6 +6,7 @@ import CentralTopic from '../../../src/components/CentralTopic'; import Workspace from '../../../src/components/Workspace'; import ScreenManager from '../../../src/components/ScreenManager'; import EmojiIconModel from '../../../src/components/model/EmojiIconModel'; +import TopicEventDispatcher from '../../../src/components/TopicEventDispatcher'; const registerRefreshHook = (topic: Topic) => { // Trigger a redraw after the node is added ... @@ -20,6 +21,20 @@ const registerRefreshHook = (topic: Topic) => { globalThis.observer.observe(document.getElementById('root')!, { childList: true }); }; +export type TopicArgs = { + readOnly?: boolean; + backgroundColor?: string; + fontFamily?: string; + borderColor?: string; + fontSize?: number; + fontColor?: string; + shapeType?: 'rectangle' | 'rounded rectangle' | 'elipse' | 'line'; + text?: string; + noteText?: string; + linkText?: string; + eicon?: string[]; +}; + const createTopic = ({ backgroundColor = undefined, text = undefined, @@ -31,7 +46,8 @@ const createTopic = ({ noteText = undefined, linkText = undefined, eicon = undefined, -}) => { + readOnly = true, +}: TopicArgs) => { // Build basic container ... const divElem = document.createElement('div'); const jqueryDiv = $(divElem); @@ -43,7 +59,8 @@ const createTopic = ({ // Initialize designer helpers ... const screenManager = new ScreenManager(divElem); - const workspace = new Workspace(screenManager, 0.3, true); + const workspace = new Workspace(screenManager, 0.3, readOnly); + TopicEventDispatcher.configure(readOnly); // Update model ... const mindmap = new Mindmap(); @@ -55,6 +72,7 @@ const createTopic = ({ model.setFontColor(fontColor); model.setFontFamily(fontFamily); model.setFontSize(fontSize); + model.setShapeType(shapeType); if (noteText) { const note = new NoteModel({ text: noteText }); @@ -75,7 +93,7 @@ const createTopic = ({ // Create topic UI element ... mindmap.addBranch(model); - const centralTopic = new CentralTopic(model, { readOnly: true }); + const centralTopic = new CentralTopic(model, { readOnly }); workspace.append(centralTopic); // Register refresh hook .. 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 bc4e31b3..f9670bb3 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 diff --git a/packages/webapp/cypress/snapshots/login.cy.ts/login-page.snap.png b/packages/webapp/cypress/snapshots/login.cy.ts/login-page.snap.png index 80574879..10ff623e 100644 Binary files a/packages/webapp/cypress/snapshots/login.cy.ts/login-page.snap.png and b/packages/webapp/cypress/snapshots/login.cy.ts/login-page.snap.png differ