Prove remove color.

packages/editor/cypress/fixtures/example.json

@@ -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"
-}

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<string> {
+  getSelectedTopicColorModel(): NodeProperty<string | undefined> {
     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<string> {
+  getColorBorderModel(): NodeProperty<string | undefined> {
     if (!this.borderColorModel)
       this.borderColorModel = {
         getValue: () => this.uniqueOrNull((node) => node.getBorderColor()),
@@ -201,11 +201,11 @@ class NodePropertyBuilder {
     return this.connetionStyleModel;
   }
 
-  getConnectionColorModel(): NodeProperty<string> {
+  getConnectionColorModel(): NodeProperty<string | undefined> {
     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;
   }

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: <BrushOutlinedIcon />,
@@ -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: <CheckBoxOutlineBlankOutlinedIcon />,
@@ -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: <HorizontalRuleOutlinedIcon />,
@@ -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: <CircleOutlinedIcon />,
@@ -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: () => <Palette htmlColor={valueBulder.getSelectedTopicColorModel().getValue()} />,
+        icon: () => <Palette htmlColor={modelBuilder.getSelectedTopicColorModel().getValue()} />,
         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 (
                 <ColorPicker
                   closeModal={closeModal}
-                  colorModel={valueBulder.getSelectedTopicColorModel()}
+                  colorModel={modelBuilder.getSelectedTopicColorModel()}
                 />
               );
             },
@@ -124,7 +125,17 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
         ],
       },
       {
-        icon: () => <SquareOutlined htmlColor={valueBulder.getColorBorderModel().getValue()} />,
+        icon: <ClearOutlined />,
+        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: () => <SquareOutlined htmlColor={modelBuilder.getColorBorderModel().getValue()} />,
         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 (
                 <ColorPicker
                   closeModal={closeModal}
-                  colorModel={valueBulder.getColorBorderModel()}
+                  colorModel={modelBuilder.getColorBorderModel()}
                 />
               );
             },
           },
         ],
       },
+      {
+        icon: <ClearOutlined />,
+        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: <SwapCallsOutlined />,
@@ -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: <PolylineOutlined />,
@@ -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: <TimelineOutined />,
@@ -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: () => <Palette htmlColor={valueBulder.getConnectionColorModel().getValue()} />,
+        icon: () => <Palette htmlColor={modelBuilder.getConnectionColorModel().getValue()} />,
         tooltip: intl.formatMessage({
           id: 'editor-panel.tooltip-connection-color',
           defaultMessage: 'Color',
@@ -204,13 +224,22 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
               return (
                 <ColorPicker
                   closeModal={closeModal}
-                  colorModel={valueBulder.getConnectionColorModel()}
+                  colorModel={modelBuilder.getConnectionColorModel()}
                 />
               );
             },
           },
         ],
       },
+      {
+        icon: <ClearOutlined />,
+        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: () => <FontFamilySelector fontFamilyModel={valueBulder.getFontFamilyModel()} />,
+        render: () => <FontFamilySelector fontFamilyModel={modelBuilder.getFontFamilyModel()} />,
       },
       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: <TextDecreaseOutlinedIcon></TextDecreaseOutlinedIcon>,
@@ -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: <FormatItalicIcon />,
@@ -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: () => <Palette htmlColor={valueBulder.getFontColorModel().getValue() as string} />,
+        icon: () => <Palette htmlColor={modelBuilder.getFontColorModel().getValue() as string} />,
         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 (
-                <ColorPicker closeModal={closeModal} colorModel={valueBulder.getFontColorModel()} />
+                <ColorPicker
+                  closeModal={closeModal}
+                  colorModel={modelBuilder.getFontColorModel()}
+                />
               );
             },
           },
@@ -322,7 +354,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
     options: [
       {
         render: (closeModal) => (
-          <TopicLink closeModal={closeModal} urlModel={valueBulder.getLinkModel()}></TopicLink>
+          <TopicLink closeModal={closeModal} urlModel={modelBuilder.getLinkModel()}></TopicLink>
         ),
       },
     ],
@@ -343,7 +375,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
       {
         tooltip: 'Node note',
         render: (closeModal) => (
-          <TopicNote closeModal={closeModal} noteModel={valueBulder.getNoteModel()} />
+          <TopicNote closeModal={closeModal} noteModel={modelBuilder.getNoteModel()} />
         ),
       },
     ],
@@ -367,7 +399,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
           defaultMessage: 'Add Icon',
         }),
         render: (closeModal) => (
-          <IconPicker triggerClose={closeModal} iconModel={valueBulder.getTopicIconModel()} />
+          <IconPicker triggerClose={closeModal} iconModel={modelBuilder.getTopicIconModel()} />
         ),
       },
     ],

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());

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;

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);
 

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);
   }