diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png index 71eb74e6..e9000aff 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-connection-style.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png index 15a37bb6..880219bb 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png index b94b1f9b..32061d08 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png index 55f72fc7..9bc260ea 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png index c82c4f82..32520775 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png index 2089e835..8e39ea7f 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png index 61af0327..bea50aae 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png index eb535057..e972bfee 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png index 0bdbdf43..92398880 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.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 6c066723..528d57b4 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 2b317d0f..037a0dc7 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/topicFontChange.cy.ts/changeFontSizeSmall.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png index 444f7c78..fba63953 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png index aa3417b7..1743efe9 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png index 46d7dfd6..6b0450f9 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.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 ef1b4cd0..558c7ff2 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/changeToSquareShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png index 878fc4cc..2646fbdc 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png differ diff --git a/packages/editor/src/components/editor-toolbar/configBuilder.tsx b/packages/editor/src/components/editor-toolbar/configBuilder.tsx index 05374fb8..eae26563 100644 --- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx +++ b/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: () => , - tooltip: intl.formatMessage({ - id: 'editor-panel.tooltip-topic-fill-color', - defaultMessage: 'Fill color', - }), - options: [ - { - render: (closeModal) => { - return ( - - ); - }, - }, - ], - }, - { - icon: , - 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: () => , 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: () => , + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-topic-fill-color', + defaultMessage: 'Fill color', + }), + options: [ + { + render: (closeModal) => { + return ( + + ); + }, + }, + ], + }, + { + icon: , + 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, diff --git a/packages/mindplot/src/components/ShrinkConnector.ts b/packages/mindplot/src/components/ShrinkConnector.ts index 21c4fa16..aad05a6d 100644 --- a/packages/mindplot/src/components/ShrinkConnector.ts +++ b/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 { diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index d61b146a..91f3cae1 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/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)); + } } } diff --git a/packages/mindplot/src/components/render/ColorUtil.ts b/packages/mindplot/src/components/render/ColorUtil.ts new file mode 100644 index 00000000..594b1156 --- /dev/null +++ b/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; 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 d47505f5..3a98cd37 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