Add noe shape support.

packages/editor/cypress/e2e/topicShape.cy.ts

@@ -48,7 +48,7 @@ describe('Topic Shape Suite', () => {
       .invoke('attr', 'rx')
       .then(parseInt)
       .should('be.a', 'number')
-      .should('be.eq', 8);
+      .should('be.eq', 9);
 
     cy.focusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeToRoundedRectangle');

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

@@ -107,6 +107,15 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
         onClick: () => modelBuilder.getTopicShapeModel().setValue('elipse'),
         selected: () => modelBuilder.getTopicShapeModel().getValue() === 'elipse',
       },
+      {
+        icon: <NotInterestedOutlined />,
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-share-none',
+          defaultMessage: 'None shape',
+        }),
+        onClick: () => modelBuilder.getTopicShapeModel().setValue('none'),
+        selected: () => modelBuilder.getTopicShapeModel().getValue() === 'none',
+      },
       null,
       {
         icon: () => <SquareOutlined htmlColor={modelBuilder.getColorBorderModel().getValue()} />,

packages/mindplot/src/components/Designer.ts

@@ -884,7 +884,7 @@ class Designer extends Events {
 
   changeTopicShape(shape: TopicShapeType): void {
     const validateFunc = (topic: Topic) =>
-      !(topic.getType() === 'CentralTopic' && shape === 'line');
+      !(topic.getType() === 'CentralTopic' && (shape === 'line' || shape === 'none'));
 
     const validateError = $msg('CENTRAL_TOPIC_STYLE_CAN_NOT_BE_CHANGED');
     const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);

packages/mindplot/src/components/Topic.ts

@@ -44,11 +44,12 @@ import { FontStyleType } from './FontStyleType';
 import { FontWeightType } from './FontWeightType';
 import DragTopic from './DragTopic';
 import ThemeFactory from './theme/ThemeFactory';
+import NoneTopicShape from './widget/NoneTopicShape';
 
 const ICON_SCALING_FACTOR = 1.3;
 
 abstract class Topic extends NodeGraph {
-  private _innerShape: LineTopicShape | Rect | LineTopicShape | null;
+  private _innerShape: LineTopicShape | Rect | LineTopicShape | NoneTopicShape | null;
 
   private _innerShapeType: TopicShapeType | undefined;
 
@@ -175,7 +176,7 @@ abstract class Topic extends NodeGraph {
     return innerShape;
   }
 
-  getInnerShape(): LineTopicShape | Rect | LineTopicShape {
+  getInnerShape(): LineTopicShape | Rect | LineTopicShape | NoneTopicShape {
     if (!this._innerShape) {
       // Create inner box.
       this._innerShape = this._buildShape(this.getShapeType());
@@ -190,8 +191,10 @@ abstract class Topic extends NodeGraph {
     return this._innerShape;
   }
 
-  protected _buildShape(shapeType: TopicShapeType): LineTopicShape | Rect | LineTopicShape {
+  protected _buildShape(
-    let result: LineTopicShape | Rect | LineTopicShape;
+    shapeType: TopicShapeType,
+  ): LineTopicShape | Rect | LineTopicShape | NoneTopicShape {
+    let result: LineTopicShape | Rect | LineTopicShape | NoneTopicShape;
     switch (shapeType) {
       case 'rectangle':
         result = new Rect(0, { strokeWidth: 2 });
@@ -205,6 +208,9 @@ abstract class Topic extends NodeGraph {
       case 'line':
         result = new LineTopicShape(this, { strokeWidth: 2 });
         break;
+      case 'none':
+        result = new NoneTopicShape();
+        break;
       case 'image':
         result = new LineTopicShape(this);
         break;

packages/mindplot/src/components/model/INodeModel.ts

@@ -27,7 +27,13 @@ import SizeType from '../SizeType';
 
 export type NodeModelType = 'CentralTopic' | 'MainTopic';
 
-export type TopicShapeType = 'rectangle' | 'rounded rectangle' | 'elipse' | 'line' | 'image';
+export type TopicShapeType =
+  | 'rectangle'
+  | 'rounded rectangle'
+  | 'elipse'
+  | 'line'
+  | 'none'
+  | 'image';
 
 // regex taken from https://stackoverflow.com/a/34763398/58128
 const parseJsObject = (str: string) =>

packages/mindplot/src/components/theme/PrismTheme.ts

@@ -106,7 +106,7 @@ const defaultStyles = new Map<TopicType, TopicStyleType>([
       fontColor: '#000000',
       connectionStyle: LineType.THICK_CURVED,
       connectionColor: '#345780',
-      shapeType: 'line' as TopicShapeType,
+      shapeType: 'none' as TopicShapeType,
       outerBackgroundColor: '#F4B82D',
       outerBorderColor: '#F4B82D',
     },
@@ -180,19 +180,15 @@ class PrismTheme extends DefaultTheme {
 
     // If border color has not been defined, use the connection color for the border ...
     if (!result) {
-      if (topic.getShapeType() === 'line') {
+      let colors: string[] = [];
-        result = 'none';
+      colors = colors.concat(this.resolve('borderColor', topic) as string[] | string);
-      } else {
-        let colors: string[] = [];
-        colors = colors.concat(this.resolve('borderColor', topic) as string[] | string);
 
-        // if the element is an array, use topic order to decide color ..
+      // if the element is an array, use topic order to decide color ..
-        let order = topic.getOrder();
+      let order = topic.getOrder();
-        order = order || 0;
+      order = order || 0;
 
-        const index = order % colors.length;
+      const index = order % colors.length;
-        result = colors[index];
+      result = colors[index];
-      }
     }
     return result;
   }

packages/mindplot/src/components/widget/NoneTopicShape.ts

@@ -0,0 +1,48 @@
+/*
+ *    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.
+ */
+import { StraightLine } from '@wisemapping/web2d';
+import SizeType from '../SizeType';
+
+class NoneTopicShape extends StraightLine {
+  private _size: SizeType | null;
+
+  constructor() {
+    super({});
+    this._size = null;
+    this.setVisibility(false);
+  }
+
+  setSize(): void {
+    super.setFrom(0, 0);
+    super.setTo(0, 0);
+  }
+
+  getSize(): SizeType | null {
+    return this._size;
+  }
+
+  setPosition() {
+    // Overwrite behaviour ...
+  }
+
+  setFill() {
+    // Overwrite behaviour ...
+  }
+}
+
+export default NoneTopicShape;