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