Prove remove color.
@ -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"
|
|
||||||
}
|
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 122 KiB |
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 194 KiB |
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 150 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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()} />
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -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());
|
||||||
|
@ -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;
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |