Change background color base on border color.

packages/editor/src/components/editor-toolbar/configBuilder.tsx

@@ -105,35 +105,6 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
         selected: () => modelBuilder.getTopicShapeModel().getValue() === 'elipse',
       },
       null,
-      {
-        icon: () => <Palette htmlColor={modelBuilder.getSelectedTopicColorModel().getValue()} />,
-        tooltip: intl.formatMessage({
-          id: 'editor-panel.tooltip-topic-fill-color',
-          defaultMessage: 'Fill color',
-        }),
-        options: [
-          {
-            render: (closeModal) => {
-              return (
-                <ColorPicker
-                  closeModal={closeModal}
-                  colorModel={modelBuilder.getSelectedTopicColorModel()}
-                />
-              );
-            },
-          },
-        ],
-      },
-      {
-        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({
@@ -162,6 +133,35 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
         onClick: () => modelBuilder.getColorBorderModel().setValue(undefined),
         selected: () => modelBuilder.getColorBorderModel().getValue() === undefined,
       },
+      null,
+      {
+        icon: () => <Palette htmlColor={modelBuilder.getSelectedTopicColorModel().getValue()} />,
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-fill-color',
+          defaultMessage: 'Fill color',
+        }),
+        options: [
+          {
+            render: (closeModal) => {
+              return (
+                <ColorPicker
+                  closeModal={closeModal}
+                  colorModel={modelBuilder.getSelectedTopicColorModel()}
+                />
+              );
+            },
+          },
+        ],
+      },
+      {
+        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,
+      },
     ],
     disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0,
   };
@@ -429,9 +429,9 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
   return [
     addNodeToolbarConfiguration,
     deleteNodeToolbarConfiguration,
-    colorAndShapeToolbarConfiguration,
-    fontFormatToolbarConfiguration,
     connectionStyleConfiguration,
+    fontFormatToolbarConfiguration,
+    colorAndShapeToolbarConfiguration,
     editIconConfiguration,
     editNoteConfiguration,
     editLinkUrlConfiguration,

packages/mindplot/src/components/ShrinkConnector.ts

@@ -21,6 +21,7 @@ import { Elipse, Group } from '@wisemapping/web2d';
 import TopicConfig from './TopicConfig';
 import ActionDispatcher from './ActionDispatcher';
 import Topic from './Topic';
+import ColorUtil from './render/ColorUtil';
 
 class ShirinkConnector {
   private _isShrink: boolean;
@@ -79,34 +80,7 @@ class ShirinkConnector {
 
   setColor(color: string) {
     this._ellipse.setStroke('1', 'solid', color);
-    this._ellipse.setFill(this.lightenColor(color, 100));
-  }
-
-  private lightenColor(col: string, amt: number): string {
-    let usePound = false;
-
-    if (col[0] === '#') {
-      col = col.slice(1);
-      usePound = true;
-    }
-
-    const num = parseInt(col, 16);
-    let r = (num >> 16) + amt;
-
-    if (r > 255) r = 255;
-    else if (r < 0) r = 0;
-
-    let b = ((num >> 8) & 0x00ff) + amt;
-
-    if (b > 255) b = 255;
-    else if (b < 0) b = 0;
-
-    let g = (num & 0x0000ff) + amt;
-
-    if (g > 255) g = 255;
-    else if (g < 0) g = 0;
-
-    return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
+    this._ellipse.setFill(ColorUtil.lightenColor(color, 100));
   }
 
   setVisibility(value: boolean, fade = 0): void {

packages/mindplot/src/components/Topic.ts

@@ -43,6 +43,7 @@ import ImageIcon from './ImageIcon';
 import PositionType from './PositionType';
 import LineTopicShape from './widget/LineTopicShape';
 import ImageTopicShape from './widget/ImageTopicShape';
+import ColorUtil from './render/ColorUtil';
 
 const ICON_SCALING_FACTOR = 1.3;
 
@@ -531,25 +532,19 @@ abstract class Topic extends NodeGraph {
 
   setBackgroundColor(color: string | undefined): void {
     this._setBackgroundColor(color, true);
+    this.redraw();
   }
 
   setConnectionStyle(type: LineType): void {
     const model = this.getModel();
     model.setConnectionStyle(type);
-
-    // Needs to change change all the lines types. Outgoing are part of the children.
-    this.getChildren().forEach((topic: Topic) => topic.redraw());
+    this.redraw(true);
   }
 
   setConnectionColor(value: string | undefined): void {
     const model = this.getModel();
     model.setConnectionColor(value);
-
-    // Force redraw for changing line color ...
-    this.redraw();
-
-    // Needs to change change all the lines color. Outgoing are part of the children.
-    this.getChildren().forEach((topic: Topic) => topic.redraw());
+    this.redraw(true);
   }
 
   private _setBackgroundColor(color: string | undefined, updateModel: boolean) {
@@ -565,6 +560,12 @@ abstract class Topic extends NodeGraph {
   getBackgroundColor(): string {
     const model = this.getModel();
     let result = model.getBackgroundColor();
+
+    if (!result && !this.isCentralTopic()) {
+      const bolderColor = this.getBorderColor();
+      result = ColorUtil.lightenColor(bolderColor, 140);
+    }
+
     if (!result) {
       result = TopicStyle.defaultBackgroundColor(this);
     }
@@ -573,9 +574,7 @@ abstract class Topic extends NodeGraph {
 
   setBorderColor(color: string | undefined): void {
     this._setBorderColor(color, true);
-
-    // @todo: review this ...
-    this.getChildren().forEach((t) => t.redraw());
+    this.redraw(true);
   }
 
   private _setBorderColor(color: string | undefined, updateModel: boolean): void {
@@ -1281,7 +1280,7 @@ abstract class Topic extends NodeGraph {
     return result;
   }
 
-  redraw(): void {
+  redraw(redrawChildren = false): void {
     if (this._isInWorkspace) {
       const textShape = this.getTextShape();
       if (this.getShapeType() !== 'image') {
@@ -1315,6 +1314,9 @@ abstract class Topic extends NodeGraph {
         const borderColor = this.getBorderColor();
         this.getInnerShape().setStroke(1, 'solid', borderColor);
 
+        const bgColor = this.getBackgroundColor();
+        this.getInnerShape().setFill(bgColor);
+
         // Force the repaint in case that the main topic color has changed.
         if (this.getParent()) {
           this._connector.setColor(borderColor);
@@ -1328,6 +1330,10 @@ abstract class Topic extends NodeGraph {
         const size = this.getModel().getImageSize();
         this.setSize(size, false);
       }
+
+      if (redrawChildren) {
+        this.getChildren().forEach((t) => t.redraw(redrawChildren));
+      }
     }
   }
 

packages/mindplot/src/components/render/ColorUtil.ts

@@ -0,0 +1,49 @@
+/* eslint-disable no-bitwise */
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+class ColorUtil {
+  static lightenColor(col: string, amt: number): string {
+    let usePound = false;
+
+    if (col[0] === '#') {
+      col = col.slice(1);
+      usePound = true;
+    }
+
+    const num = parseInt(col, 16);
+    let r = (num >> 16) + amt;
+
+    if (r > 255) r = 255;
+    else if (r < 0) r = 0;
+
+    let b = ((num >> 8) & 0x00ff) + amt;
+
+    if (b > 255) b = 255;
+    else if (b < 0) b = 0;
+
+    let g = (num & 0x0000ff) + amt;
+
+    if (g > 255) g = 255;
+    else if (g < 0) g = 0;
+
+    return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
+  }
+}
+
+export default ColorUtil;