diff --git a/packages/editor/cypress/e2e/topicShape.cy.ts b/packages/editor/cypress/e2e/topicShape.cy.ts
index dbd4abd9..0ee796a5 100644
--- a/packages/editor/cypress/e2e/topicShape.cy.ts
+++ b/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');
diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome-prism.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome-prism.snap.png
index 27b6c23e..be4ea0d5 100644
Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome-prism.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome-prism.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 bf15847d..654944ea 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 f132121a..b490f5fb 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/topicShape.cy.ts/changeToRoundedRectangle.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png
index 89438808..9b31de66 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/topicShapePanel.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png
index 8fad2b8f..f659ee48 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/editor/src/components/editor-toolbar/configBuilder.tsx b/packages/editor/src/components/editor-toolbar/configBuilder.tsx
index 4febfaef..8253be30 100644
--- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx
+++ b/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: ,
+ 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: () => ,
diff --git a/packages/mindplot/src/components/Designer.ts b/packages/mindplot/src/components/Designer.ts
index dc80af23..222042c3 100644
--- a/packages/mindplot/src/components/Designer.ts
+++ b/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);
diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts
index aa8ed502..f06c3786 100644
--- a/packages/mindplot/src/components/Topic.ts
+++ b/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 {
- let result: LineTopicShape | Rect | LineTopicShape;
+ protected _buildShape(
+ 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;
diff --git a/packages/mindplot/src/components/model/INodeModel.ts b/packages/mindplot/src/components/model/INodeModel.ts
index b4cfe854..67c7ed37 100644
--- a/packages/mindplot/src/components/model/INodeModel.ts
+++ b/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) =>
diff --git a/packages/mindplot/src/components/theme/PrismTheme.ts b/packages/mindplot/src/components/theme/PrismTheme.ts
index 7d6164dd..10583d28 100644
--- a/packages/mindplot/src/components/theme/PrismTheme.ts
+++ b/packages/mindplot/src/components/theme/PrismTheme.ts
@@ -106,7 +106,7 @@ const defaultStyles = new Map([
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') {
- result = 'none';
- } else {
- let colors: string[] = [];
- colors = colors.concat(this.resolve('borderColor', topic) as string[] | string);
+ 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 ..
- let order = topic.getOrder();
- order = order || 0;
+ // if the element is an array, use topic order to decide color ..
+ let order = topic.getOrder();
+ order = order || 0;
- const index = order % colors.length;
- result = colors[index];
- }
+ const index = order % colors.length;
+ result = colors[index];
}
return result;
}
diff --git a/packages/mindplot/src/components/widget/NoneTopicShape.ts b/packages/mindplot/src/components/widget/NoneTopicShape.ts
new file mode 100644
index 00000000..a875afee
--- /dev/null
+++ b/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;
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 a4a06552..b1b5486b 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