Prove remove color.

This commit is contained in:
Paulo Gustavo Veiga 2023-01-02 00:19:14 -08:00
parent bd2f404934
commit 2f798082cb
51 changed files with 107 additions and 99 deletions

View File

@ -1,5 +0,0 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 149 KiB

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 97 KiB

View File

@ -82,7 +82,7 @@ class NodePropertyBuilder {
* *
* @returns model to get and set topic color * @returns model to get and set topic color
*/ */
getSelectedTopicColorModel(): NodeProperty<string> { getSelectedTopicColorModel(): NodeProperty<string | undefined> {
if (!this.selectedTopicColorModel) if (!this.selectedTopicColorModel)
this.selectedTopicColorModel = { this.selectedTopicColorModel = {
getValue: () => this.designer.getModel().selectedTopic()?.getBackgroundColor(), getValue: () => this.designer.getModel().selectedTopic()?.getBackgroundColor(),
@ -116,7 +116,7 @@ class NodePropertyBuilder {
* *
* @returns model to get and set topic border color * @returns model to get and set topic border color
*/ */
getColorBorderModel(): NodeProperty<string> { getColorBorderModel(): NodeProperty<string | undefined> {
if (!this.borderColorModel) if (!this.borderColorModel)
this.borderColorModel = { this.borderColorModel = {
getValue: () => this.uniqueOrNull((node) => node.getBorderColor()), getValue: () => this.uniqueOrNull((node) => node.getBorderColor()),
@ -201,11 +201,11 @@ class NodePropertyBuilder {
return this.connetionStyleModel; return this.connetionStyleModel;
} }
getConnectionColorModel(): NodeProperty<string> { getConnectionColorModel(): NodeProperty<string | undefined> {
if (!this.connectionColoreModel) if (!this.connectionColoreModel)
this.connectionColoreModel = { this.connectionColoreModel = {
getValue: () => this.selectedTopic()?.getConnectionColor(), getValue: () => this.selectedTopic()?.getConnectionColor(),
setValue: (value: string) => this.designer.changeConnectionColor(value), setValue: (value: string | undefined) => this.designer.changeConnectionColor(value),
}; };
return this.connectionColoreModel; return this.connectionColoreModel;
} }

View File

@ -37,6 +37,7 @@ import GestureOutlined from '@mui/icons-material/GestureOutlined';
import TimelineOutined from '@mui/icons-material/TimelineOutlined'; import TimelineOutined from '@mui/icons-material/TimelineOutlined';
import ShareOutlined from '@mui/icons-material/ShareOutlined'; import ShareOutlined from '@mui/icons-material/ShareOutlined';
import SwapCallsOutlined from '@mui/icons-material/SwapCallsOutlined'; import SwapCallsOutlined from '@mui/icons-material/SwapCallsOutlined';
import ClearOutlined from '@mui/icons-material/ClearOutlined';
import Palette from '@mui/icons-material/Square'; import Palette from '@mui/icons-material/Square';
import SquareOutlined from '@mui/icons-material/SquareOutlined'; import SquareOutlined from '@mui/icons-material/SquareOutlined';
@ -58,7 +59,7 @@ const keyTooltip = (msg: string, key: string): string => {
}; };
export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionConfig[] { export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionConfig[] {
const valueBulder = new NodePropertyValueModelBuilder(model.getDesigner()); const modelBuilder = new NodePropertyValueModelBuilder(model.getDesigner());
// eslint-disable-next-line react-hooks/rules-of-hooks // eslint-disable-next-line react-hooks/rules-of-hooks
const colorAndShapeToolbarConfiguration: ActionConfig = { const colorAndShapeToolbarConfiguration: ActionConfig = {
icon: <BrushOutlinedIcon />, icon: <BrushOutlinedIcon />,
@ -73,8 +74,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-topic-share-rectangle', id: 'editor-panel.tooltip-topic-share-rectangle',
defaultMessage: 'Rectangle shape', defaultMessage: 'Rectangle shape',
}), }),
onClick: () => valueBulder.getTopicShapeModel().setValue('rectangle'), onClick: () => modelBuilder.getTopicShapeModel().setValue('rectangle'),
selected: () => valueBulder.getTopicShapeModel().getValue() === 'rectangle', selected: () => modelBuilder.getTopicShapeModel().getValue() === 'rectangle',
}, },
{ {
icon: <CheckBoxOutlineBlankOutlinedIcon />, icon: <CheckBoxOutlineBlankOutlinedIcon />,
@ -82,8 +83,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-topic-share-rounded', id: 'editor-panel.tooltip-topic-share-rounded',
defaultMessage: 'Rounded shape', defaultMessage: 'Rounded shape',
}), }),
onClick: () => valueBulder.getTopicShapeModel().setValue('rounded rectangle'), onClick: () => modelBuilder.getTopicShapeModel().setValue('rounded rectangle'),
selected: () => valueBulder.getTopicShapeModel().getValue() === 'rounded rectangle', selected: () => modelBuilder.getTopicShapeModel().getValue() === 'rounded rectangle',
}, },
{ {
icon: <HorizontalRuleOutlinedIcon />, icon: <HorizontalRuleOutlinedIcon />,
@ -91,8 +92,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-topic-share-line', id: 'editor-panel.tooltip-topic-share-line',
defaultMessage: 'Line shape', defaultMessage: 'Line shape',
}), }),
onClick: () => valueBulder.getTopicShapeModel().setValue('line'), onClick: () => modelBuilder.getTopicShapeModel().setValue('line'),
selected: () => valueBulder.getTopicShapeModel().getValue() === 'line', selected: () => modelBuilder.getTopicShapeModel().getValue() === 'line',
}, },
{ {
icon: <CircleOutlinedIcon />, icon: <CircleOutlinedIcon />,
@ -100,12 +101,12 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-topic-share-ellipse', id: 'editor-panel.tooltip-topic-share-ellipse',
defaultMessage: 'Ellipse shape', defaultMessage: 'Ellipse shape',
}), }),
onClick: () => valueBulder.getTopicShapeModel().setValue('elipse'), onClick: () => modelBuilder.getTopicShapeModel().setValue('elipse'),
selected: () => valueBulder.getTopicShapeModel().getValue() === 'elipse', selected: () => modelBuilder.getTopicShapeModel().getValue() === 'elipse',
}, },
null, null,
{ {
icon: () => <Palette htmlColor={valueBulder.getSelectedTopicColorModel().getValue()} />, icon: () => <Palette htmlColor={modelBuilder.getSelectedTopicColorModel().getValue()} />,
tooltip: intl.formatMessage({ tooltip: intl.formatMessage({
id: 'editor-panel.tooltip-topic-fill-color', id: 'editor-panel.tooltip-topic-fill-color',
defaultMessage: 'Fill color', defaultMessage: 'Fill color',
@ -116,7 +117,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
return ( return (
<ColorPicker <ColorPicker
closeModal={closeModal} closeModal={closeModal}
colorModel={valueBulder.getSelectedTopicColorModel()} colorModel={modelBuilder.getSelectedTopicColorModel()}
/> />
); );
}, },
@ -124,7 +125,17 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
], ],
}, },
{ {
icon: () => <SquareOutlined htmlColor={valueBulder.getColorBorderModel().getValue()} />, icon: <ClearOutlined />,
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: () => <SquareOutlined htmlColor={modelBuilder.getColorBorderModel().getValue()} />,
tooltip: intl.formatMessage({ tooltip: intl.formatMessage({
id: 'editor-panel.tooltip-topic-border-color', id: 'editor-panel.tooltip-topic-border-color',
defaultMessage: 'Border color', defaultMessage: 'Border color',
@ -135,13 +146,22 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
return ( return (
<ColorPicker <ColorPicker
closeModal={closeModal} closeModal={closeModal}
colorModel={valueBulder.getColorBorderModel()} colorModel={modelBuilder.getColorBorderModel()}
/> />
); );
}, },
}, },
], ],
}, },
{
icon: <ClearOutlined />,
tooltip: intl.formatMessage({
id: 'editor-panel.tooltip-topic-border-color-default',
defaultMessage: 'Default border color',
}),
onClick: () => modelBuilder.getColorBorderModel().setValue(undefined),
selected: () => modelBuilder.getColorBorderModel().getValue() === undefined,
},
], ],
disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0, disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0,
}; };
@ -159,8 +179,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-connection-style-curved-thick', id: 'editor-panel.tooltip-connection-style-curved-thick',
defaultMessage: 'Thick Curved', defaultMessage: 'Thick Curved',
}), }),
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THICK_CURVED), onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.THICK_CURVED),
selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED, selected: () => modelBuilder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED,
}, },
{ {
icon: <SwapCallsOutlined />, icon: <SwapCallsOutlined />,
@ -168,8 +188,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-connection-style-curved-thin', id: 'editor-panel.tooltip-connection-style-curved-thin',
defaultMessage: 'Thin Curved', defaultMessage: 'Thin Curved',
}), }),
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THIN_CURVED), onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.THIN_CURVED),
selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THIN_CURVED, selected: () => modelBuilder.getConnectionStyleModel().getValue() === LineType.THIN_CURVED,
}, },
{ {
icon: <PolylineOutlined />, icon: <PolylineOutlined />,
@ -177,9 +197,9 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-connection-style-polyline', id: 'editor-panel.tooltip-connection-style-polyline',
defaultMessage: 'Simple Polyline', defaultMessage: 'Simple Polyline',
}), }),
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE), onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE),
selected: () => selected: () =>
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE, modelBuilder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE,
}, },
{ {
icon: <TimelineOutined />, icon: <TimelineOutined />,
@ -187,13 +207,13 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-connection-style-polyline-curved', id: 'editor-panel.tooltip-connection-style-polyline-curved',
defaultMessage: 'Curved Polyline', defaultMessage: 'Curved Polyline',
}), }),
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED), onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED),
selected: () => selected: () =>
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED, modelBuilder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
}, },
null, null,
{ {
icon: () => <Palette htmlColor={valueBulder.getConnectionColorModel().getValue()} />, icon: () => <Palette htmlColor={modelBuilder.getConnectionColorModel().getValue()} />,
tooltip: intl.formatMessage({ tooltip: intl.formatMessage({
id: 'editor-panel.tooltip-connection-color', id: 'editor-panel.tooltip-connection-color',
defaultMessage: 'Color', defaultMessage: 'Color',
@ -204,13 +224,22 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
return ( return (
<ColorPicker <ColorPicker
closeModal={closeModal} closeModal={closeModal}
colorModel={valueBulder.getConnectionColorModel()} colorModel={modelBuilder.getConnectionColorModel()}
/> />
); );
}, },
}, },
], ],
}, },
{
icon: <ClearOutlined />,
tooltip: intl.formatMessage({
id: 'editor-panel.tooltip-connection-color-default',
defaultMessage: 'Default color',
}),
onClick: () => modelBuilder.getConnectionColorModel().setValue(undefined),
selected: () => modelBuilder.getConnectionColorModel().getValue() === undefined,
},
], ],
disabled: () => { disabled: () => {
const selected = model.getDesignerModel().filterSelectedTopics(); const selected = model.getDesignerModel().filterSelectedTopics();
@ -229,7 +258,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
}), }),
options: [ options: [
{ {
render: () => <FontFamilySelector fontFamilyModel={valueBulder.getFontFamilyModel()} />, render: () => <FontFamilySelector fontFamilyModel={modelBuilder.getFontFamilyModel()} />,
}, },
null, null,
{ {
@ -238,7 +267,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-topic-font-bigger', id: 'editor-panel.tooltip-topic-font-bigger',
defaultMessage: 'Bigger', defaultMessage: 'Bigger',
}), }),
onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.up), onClick: () => modelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up),
}, },
{ {
icon: <TextDecreaseOutlinedIcon></TextDecreaseOutlinedIcon>, icon: <TextDecreaseOutlinedIcon></TextDecreaseOutlinedIcon>,
@ -246,7 +275,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
id: 'editor-panel.tooltip-topic-font-smaller', id: 'editor-panel.tooltip-topic-font-smaller',
defaultMessage: 'Smaller', defaultMessage: 'Smaller',
}), }),
onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.down), onClick: () => modelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.down),
}, },
null, null,
{ {
@ -258,8 +287,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
}), }),
'B', 'B',
), ),
onClick: valueBulder.fontWeigthModel().switchValue, onClick: modelBuilder.fontWeigthModel().switchValue,
selected: () => valueBulder.fontWeigthModel().getValue() === 'bold', selected: () => modelBuilder.fontWeigthModel().getValue() === 'bold',
}, },
{ {
icon: <FormatItalicIcon />, icon: <FormatItalicIcon />,
@ -270,12 +299,12 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
}), }),
'I', 'I',
), ),
onClick: valueBulder.getFontStyleModel().switchValue, onClick: modelBuilder.getFontStyleModel().switchValue,
selected: () => valueBulder.getFontStyleModel().getValue() === 'italic', selected: () => modelBuilder.getFontStyleModel().getValue() === 'italic',
}, },
null, null,
{ {
icon: () => <Palette htmlColor={valueBulder.getFontColorModel().getValue() as string} />, icon: () => <Palette htmlColor={modelBuilder.getFontColorModel().getValue() as string} />,
tooltip: intl.formatMessage({ tooltip: intl.formatMessage({
id: 'editor-panel.tooltip-topic-font-color', id: 'editor-panel.tooltip-topic-font-color',
defaultMessage: 'Color', defaultMessage: 'Color',
@ -284,7 +313,10 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
{ {
render: (closeModal) => { render: (closeModal) => {
return ( return (
<ColorPicker closeModal={closeModal} colorModel={valueBulder.getFontColorModel()} /> <ColorPicker
closeModal={closeModal}
colorModel={modelBuilder.getFontColorModel()}
/>
); );
}, },
}, },
@ -322,7 +354,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
options: [ options: [
{ {
render: (closeModal) => ( render: (closeModal) => (
<TopicLink closeModal={closeModal} urlModel={valueBulder.getLinkModel()}></TopicLink> <TopicLink closeModal={closeModal} urlModel={modelBuilder.getLinkModel()}></TopicLink>
), ),
}, },
], ],
@ -343,7 +375,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
{ {
tooltip: 'Node note', tooltip: 'Node note',
render: (closeModal) => ( render: (closeModal) => (
<TopicNote closeModal={closeModal} noteModel={valueBulder.getNoteModel()} /> <TopicNote closeModal={closeModal} noteModel={modelBuilder.getNoteModel()} />
), ),
}, },
], ],
@ -367,7 +399,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
defaultMessage: 'Add Icon', defaultMessage: 'Add Icon',
}), }),
render: (closeModal) => ( render: (closeModal) => (
<IconPicker triggerClose={closeModal} iconModel={valueBulder.getTopicIconModel()} /> <IconPicker triggerClose={closeModal} iconModel={modelBuilder.getTopicIconModel()} />
), ),
}, },
], ],

View File

@ -786,7 +786,7 @@ class Designer extends Events {
} }
/** */ /** */
changeBackgroundColor(color: string) { changeBackgroundColor(color: string | undefined) {
const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line'; const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line';
const validateError = 'Color can not be set to line topics.'; const validateError = 'Color can not be set to line topics.';
@ -796,7 +796,7 @@ class Designer extends Events {
} }
} }
changeBorderColor(color: string) { changeBorderColor(color: string | undefined) {
const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line'; const validateFunc = (topic: Topic) => topic.getShapeType() !== 'line';
const validateError = 'Color can not be set to line topics.'; const validateError = 'Color can not be set to line topics.';
const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
@ -833,7 +833,7 @@ class Designer extends Events {
} }
} }
changeConnectionColor(value: string): void { changeConnectionColor(value: string | undefined): void {
const topicsIds = this.getModel() const topicsIds = this.getModel()
.filterSelectedTopics() .filterSelectedTopics()
.map((t) => t.getId()); .map((t) => t.getId());

View File

@ -162,13 +162,10 @@ class StandaloneActionDispatcher extends ActionDispatcher {
} }
/** */ /** */
changeBackgroundColorToTopic(topicsIds: number[], color: string) { changeBackgroundColorToTopic(topicsIds: number[], color: string | undefined) {
$assert(topicsIds, 'topicIds can not be null'); const commandFunc = (topic: Topic, value: string | undefined) => {
$assert(color, 'color can not be null');
const commandFunc = (topic: Topic, commandColor: string) => {
const result = topic.getBackgroundColor(); const result = topic.getBackgroundColor();
topic.setBackgroundColor(commandColor); topic.setBackgroundColor(value);
return result; return result;
}; };
@ -178,11 +175,8 @@ class StandaloneActionDispatcher extends ActionDispatcher {
} }
/** */ /** */
changeBorderColorToTopic(topicsIds: number[], color: string): void { changeBorderColorToTopic(topicsIds: number[], color: string | undefined): void {
$assert(topicsIds, 'topicIds can not be null'); const commandFunc = (topic: Topic, commandColor: string | undefined) => {
$assert(color, 'topicIds can not be null');
const commandFunc = (topic: Topic, commandColor: string) => {
const result = topic.getBorderColor(); const result = topic.getBorderColor();
topic.setBorderColor(commandColor); topic.setBorderColor(commandColor);
return result; return result;
@ -235,8 +229,8 @@ class StandaloneActionDispatcher extends ActionDispatcher {
this.execute(command); this.execute(command);
} }
changeConnectionColorToTopic(topicsIds: number[], value: string) { changeConnectionColorToTopic(topicsIds: number[], value: string | undefined) {
const commandFunc = (topic: Topic, color: string) => { const commandFunc = (topic: Topic, color: string | undefined) => {
const result: string = topic.getConnectionColor(); const result: string = topic.getConnectionColor();
topic.setConnectionColor(color); topic.setConnectionColor(color);
return result; return result;

View File

@ -114,7 +114,7 @@ abstract class Topic extends NodeGraph {
protected _setShapeType(type: TopicShapeType, updateModel: boolean) { protected _setShapeType(type: TopicShapeType, updateModel: boolean) {
// Remove inner shape figure ... // Remove inner shape figure ...
const model = this.getModel(); const model = this.getModel();
if ($defined(updateModel) && updateModel) { if (updateModel) {
model.setShapeType(type); model.setShapeType(type);
} }
@ -405,7 +405,7 @@ abstract class Topic extends NodeGraph {
setFontFamily(value: string, updateModel?: boolean) { setFontFamily(value: string, updateModel?: boolean) {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setFontName(value); textShape.setFontName(value);
if ($defined(updateModel) && updateModel) { if (updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setFontFamily(value); model.setFontFamily(value);
} }
@ -416,7 +416,7 @@ abstract class Topic extends NodeGraph {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setSize(value); textShape.setSize(value);
if ($defined(updateModel) && updateModel) { if (updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setFontSize(value); model.setFontSize(value);
} }
@ -426,7 +426,7 @@ abstract class Topic extends NodeGraph {
setFontStyle(value: string, updateModel?: boolean) { setFontStyle(value: string, updateModel?: boolean) {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setStyle(value); textShape.setStyle(value);
if ($defined(updateModel) && updateModel) { if (updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setFontStyle(value); model.setFontStyle(value);
} }
@ -436,7 +436,7 @@ abstract class Topic extends NodeGraph {
setFontWeight(value: string, updateModel?: boolean) { setFontWeight(value: string, updateModel?: boolean) {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setWeight(value); textShape.setWeight(value);
if ($defined(updateModel) && updateModel) { if (updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setFontWeight(value); model.setFontWeight(value);
} }
@ -496,7 +496,7 @@ abstract class Topic extends NodeGraph {
setFontColor(value: string, updateModel?: boolean) { setFontColor(value: string, updateModel?: boolean) {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setColor(value); textShape.setColor(value);
if ($defined(updateModel) && updateModel) { if (updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setFontColor(value); model.setFontColor(value);
} }
@ -506,7 +506,7 @@ abstract class Topic extends NodeGraph {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setText(text == null ? TopicStyle.defaultText(this) : text); textShape.setText(text == null ? TopicStyle.defaultText(this) : text);
if ($defined(updateModel) && updateModel) { if (updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setText(text || undefined); model.setText(text || undefined);
} }
@ -529,7 +529,7 @@ abstract class Topic extends NodeGraph {
return text || TopicStyle.defaultText(this); return text || TopicStyle.defaultText(this);
} }
setBackgroundColor(color: string): void { setBackgroundColor(color: string | undefined): void {
this._setBackgroundColor(color, true); this._setBackgroundColor(color, true);
} }
@ -539,16 +539,9 @@ abstract class Topic extends NodeGraph {
// Needs to change change all the lines types. Outgoing are part of the children. // Needs to change change all the lines types. Outgoing are part of the children.
this.getChildren().forEach((topic: Topic) => topic.redraw()); this.getChildren().forEach((topic: Topic) => topic.redraw());
// If connection of the childen matches, just reset the style in the model.
this.getChildren().forEach((topic: Topic) => {
if (topic.getModel().getConnectionStyle() === type) {
topic.getModel().setConnectionStyle(undefined);
}
});
} }
setConnectionColor(value: string): void { setConnectionColor(value: string | undefined): void {
const model = this.getModel(); const model = this.getModel();
model.setConnectionColor(value); model.setConnectionColor(value);
@ -557,20 +550,13 @@ abstract class Topic extends NodeGraph {
// Needs to change change all the lines color. Outgoing are part of the children. // Needs to change change all the lines color. Outgoing are part of the children.
this.getChildren().forEach((topic: Topic) => topic.redraw()); this.getChildren().forEach((topic: Topic) => topic.redraw());
// If connection of the childen matches, just reset the style in the model.
this.getChildren().forEach((topic: Topic) => {
if (topic.getModel().getConnectionColor() === value) {
topic.getModel().setConnectionColor(undefined);
}
});
} }
private _setBackgroundColor(color: string, updateModel: boolean) { private _setBackgroundColor(color: string | undefined, updateModel: boolean) {
const innerShape = this.getInnerShape(); const innerShape = this.getInnerShape();
innerShape.setFill(color); innerShape.setFill(color);
if ($defined(updateModel) && updateModel) { if (updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setBackgroundColor(color); model.setBackgroundColor(color);
} }
@ -585,26 +571,27 @@ abstract class Topic extends NodeGraph {
return result; return result;
} }
setBorderColor(color: string): void { setBorderColor(color: string | undefined): void {
this._setBorderColor(color, true); this._setBorderColor(color, true);
// @todo: review this ... // @todo: review this ...
this.getChildren().forEach((t) => t.redraw()); this.getChildren().forEach((t) => t.redraw());
} }
private _setBorderColor(color: string, updateModel: boolean): void { private _setBorderColor(color: string | undefined, updateModel: boolean): void {
const innerShape = this.getInnerShape(); if (updateModel) {
innerShape.setAttribute('strokeColor', color);
const connector = this.getShrinkConnector();
if (connector) {
connector.setAttribute('strokeColor', color);
}
if ($defined(updateModel) && updateModel) {
const model = this.getModel(); const model = this.getModel();
model.setBorderColor(color); model.setBorderColor(color);
} }
const bgColor = this.getBackgroundColor();
const connector = this.getShrinkConnector();
if (connector) {
connector.setColor(bgColor);
}
const innerShape = this.getInnerShape();
innerShape.setAttribute('strokeColor', color);
} }
getBorderColor(): string { getBorderColor(): string {
@ -1324,7 +1311,7 @@ abstract class Topic extends NodeGraph {
iconGroup.setPosition(padding, yPosition); iconGroup.setPosition(padding, yPosition);
textShape.setPosition(padding + iconGroupWith + textIconSpacing, yPosition); textShape.setPosition(padding + iconGroupWith + textIconSpacing, yPosition);
// Has color changed ? // Update topic color ...
const borderColor = this.getBorderColor(); const borderColor = this.getBorderColor();
this.getInnerShape().setStroke(1, 'solid', borderColor); this.getInnerShape().setStroke(1, 'solid', borderColor);

View File

@ -197,7 +197,7 @@ abstract class INodeModel {
return this.getProperty('borderColor') as string; return this.getProperty('borderColor') as string;
} }
setBorderColor(color: string): void { setBorderColor(color: string | undefined): void {
this.putProperty('borderColor', color); this.putProperty('borderColor', color);
} }
@ -205,7 +205,7 @@ abstract class INodeModel {
return this.getProperty('backgroundColor') as string; return this.getProperty('backgroundColor') as string;
} }
setBackgroundColor(color: string): void { setBackgroundColor(color: string | undefined): void {
this.putProperty('backgroundColor', color); this.putProperty('backgroundColor', color);
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB