Add background outer image shade.

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) {
+  abstract setOnFocus(focus: boolean): void;
-    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 closeEditors(): void;
 

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');
+      const rect = this._buildShape({}, 'rounded rectangle');
-      rect.setPosition(-2, -3);
+
+      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();
+      const borderColor = this.getBorderColor();
-      result = ColorUtil.lightenColor(bolderColor, 140);
+      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();

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

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

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)',
+    borderColor: '#3971B1',
-    backgroundColor: 'rgb(80,157,192)',
+    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)',
+    borderColor: '#023BB9',
-    backgroundColor: 'rgb(224,229,239)',
+    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)',
+    borderColor: '#96e3ff',
-    backgroundColor: 'rgb(224,229,239)',
+    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)',
+    borderColor: '#023BB9',
-    backgroundColor: 'rgb(224,229,239)',
+    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;
   }

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<TopicArgs> = (args: TopicArgs) => createTopic(args);
+
+export const MultilineEditor = Template.bind({});
+MultilineEditor.args = {
+  text: 'Border Style',
+  borderColor: '#52E661',
+  readOnly: false,
+};

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: Story<TopicArgs> = (args: TopicArgs) => createTopic(args);
-const Template = ({ ...args }) => 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',
+  text: 'Back Color Style',
-  backgroundColor: 'red',
+  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',
+};

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 ..