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
|
||||
*/
|
||||
getSelectedTopicColorModel(): NodeProperty<string> {
|
||||
getSelectedTopicColorModel(): NodeProperty<string | undefined> {
|
||||
if (!this.selectedTopicColorModel)
|
||||
this.selectedTopicColorModel = {
|
||||
getValue: () => this.designer.getModel().selectedTopic()?.getBackgroundColor(),
|
||||
@ -116,7 +116,7 @@ class NodePropertyBuilder {
|
||||
*
|
||||
* @returns model to get and set topic border color
|
||||
*/
|
||||
getColorBorderModel(): NodeProperty<string> {
|
||||
getColorBorderModel(): NodeProperty<string | undefined> {
|
||||
if (!this.borderColorModel)
|
||||
this.borderColorModel = {
|
||||
getValue: () => this.uniqueOrNull((node) => node.getBorderColor()),
|
||||
@ -201,11 +201,11 @@ class NodePropertyBuilder {
|
||||
return this.connetionStyleModel;
|
||||
}
|
||||
|
||||
getConnectionColorModel(): NodeProperty<string> {
|
||||
getConnectionColorModel(): NodeProperty<string | undefined> {
|
||||
if (!this.connectionColoreModel)
|
||||
this.connectionColoreModel = {
|
||||
getValue: () => this.selectedTopic()?.getConnectionColor(),
|
||||
setValue: (value: string) => this.designer.changeConnectionColor(value),
|
||||
setValue: (value: string | undefined) => this.designer.changeConnectionColor(value),
|
||||
};
|
||||
return this.connectionColoreModel;
|
||||
}
|
||||
|
@ -37,6 +37,7 @@ import GestureOutlined from '@mui/icons-material/GestureOutlined';
|
||||
import TimelineOutined from '@mui/icons-material/TimelineOutlined';
|
||||
import ShareOutlined from '@mui/icons-material/ShareOutlined';
|
||||
import SwapCallsOutlined from '@mui/icons-material/SwapCallsOutlined';
|
||||
import ClearOutlined from '@mui/icons-material/ClearOutlined';
|
||||
|
||||
import Palette from '@mui/icons-material/Square';
|
||||
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[] {
|
||||
const valueBulder = new NodePropertyValueModelBuilder(model.getDesigner());
|
||||
const modelBuilder = new NodePropertyValueModelBuilder(model.getDesigner());
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const colorAndShapeToolbarConfiguration: ActionConfig = {
|
||||
icon: <BrushOutlinedIcon />,
|
||||
@ -73,8 +74,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-rectangle',
|
||||
defaultMessage: 'Rectangle shape',
|
||||
}),
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('rectangle'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'rectangle',
|
||||
onClick: () => modelBuilder.getTopicShapeModel().setValue('rectangle'),
|
||||
selected: () => modelBuilder.getTopicShapeModel().getValue() === 'rectangle',
|
||||
},
|
||||
{
|
||||
icon: <CheckBoxOutlineBlankOutlinedIcon />,
|
||||
@ -82,8 +83,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-rounded',
|
||||
defaultMessage: 'Rounded shape',
|
||||
}),
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('rounded rectangle'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'rounded rectangle',
|
||||
onClick: () => modelBuilder.getTopicShapeModel().setValue('rounded rectangle'),
|
||||
selected: () => modelBuilder.getTopicShapeModel().getValue() === 'rounded rectangle',
|
||||
},
|
||||
{
|
||||
icon: <HorizontalRuleOutlinedIcon />,
|
||||
@ -91,8 +92,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-line',
|
||||
defaultMessage: 'Line shape',
|
||||
}),
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('line'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'line',
|
||||
onClick: () => modelBuilder.getTopicShapeModel().setValue('line'),
|
||||
selected: () => modelBuilder.getTopicShapeModel().getValue() === 'line',
|
||||
},
|
||||
{
|
||||
icon: <CircleOutlinedIcon />,
|
||||
@ -100,12 +101,12 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-ellipse',
|
||||
defaultMessage: 'Ellipse shape',
|
||||
}),
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('elipse'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'elipse',
|
||||
onClick: () => modelBuilder.getTopicShapeModel().setValue('elipse'),
|
||||
selected: () => modelBuilder.getTopicShapeModel().getValue() === 'elipse',
|
||||
},
|
||||
null,
|
||||
{
|
||||
icon: () => <Palette htmlColor={valueBulder.getSelectedTopicColorModel().getValue()} />,
|
||||
icon: () => <Palette htmlColor={modelBuilder.getSelectedTopicColorModel().getValue()} />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-topic-fill-color',
|
||||
defaultMessage: 'Fill color',
|
||||
@ -116,7 +117,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
return (
|
||||
<ColorPicker
|
||||
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({
|
||||
id: 'editor-panel.tooltip-topic-border-color',
|
||||
defaultMessage: 'Border color',
|
||||
@ -135,13 +146,22 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
return (
|
||||
<ColorPicker
|
||||
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,
|
||||
};
|
||||
@ -159,8 +179,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-connection-style-curved-thick',
|
||||
defaultMessage: 'Thick Curved',
|
||||
}),
|
||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THICK_CURVED),
|
||||
selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED,
|
||||
onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.THICK_CURVED),
|
||||
selected: () => modelBuilder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED,
|
||||
},
|
||||
{
|
||||
icon: <SwapCallsOutlined />,
|
||||
@ -168,8 +188,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-connection-style-curved-thin',
|
||||
defaultMessage: 'Thin Curved',
|
||||
}),
|
||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THIN_CURVED),
|
||||
selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THIN_CURVED,
|
||||
onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.THIN_CURVED),
|
||||
selected: () => modelBuilder.getConnectionStyleModel().getValue() === LineType.THIN_CURVED,
|
||||
},
|
||||
{
|
||||
icon: <PolylineOutlined />,
|
||||
@ -177,9 +197,9 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-connection-style-polyline',
|
||||
defaultMessage: 'Simple Polyline',
|
||||
}),
|
||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE),
|
||||
onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE),
|
||||
selected: () =>
|
||||
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE,
|
||||
modelBuilder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE,
|
||||
},
|
||||
{
|
||||
icon: <TimelineOutined />,
|
||||
@ -187,13 +207,13 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-connection-style-polyline-curved',
|
||||
defaultMessage: 'Curved Polyline',
|
||||
}),
|
||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED),
|
||||
onClick: () => modelBuilder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED),
|
||||
selected: () =>
|
||||
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
|
||||
modelBuilder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
|
||||
},
|
||||
null,
|
||||
{
|
||||
icon: () => <Palette htmlColor={valueBulder.getConnectionColorModel().getValue()} />,
|
||||
icon: () => <Palette htmlColor={modelBuilder.getConnectionColorModel().getValue()} />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-connection-color',
|
||||
defaultMessage: 'Color',
|
||||
@ -204,13 +224,22 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
return (
|
||||
<ColorPicker
|
||||
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: () => {
|
||||
const selected = model.getDesignerModel().filterSelectedTopics();
|
||||
@ -229,7 +258,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
}),
|
||||
options: [
|
||||
{
|
||||
render: () => <FontFamilySelector fontFamilyModel={valueBulder.getFontFamilyModel()} />,
|
||||
render: () => <FontFamilySelector fontFamilyModel={modelBuilder.getFontFamilyModel()} />,
|
||||
},
|
||||
null,
|
||||
{
|
||||
@ -238,7 +267,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-font-bigger',
|
||||
defaultMessage: 'Bigger',
|
||||
}),
|
||||
onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.up),
|
||||
onClick: () => modelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up),
|
||||
},
|
||||
{
|
||||
icon: <TextDecreaseOutlinedIcon></TextDecreaseOutlinedIcon>,
|
||||
@ -246,7 +275,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-font-smaller',
|
||||
defaultMessage: 'Smaller',
|
||||
}),
|
||||
onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.down),
|
||||
onClick: () => modelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.down),
|
||||
},
|
||||
null,
|
||||
{
|
||||
@ -258,8 +287,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
}),
|
||||
'B',
|
||||
),
|
||||
onClick: valueBulder.fontWeigthModel().switchValue,
|
||||
selected: () => valueBulder.fontWeigthModel().getValue() === 'bold',
|
||||
onClick: modelBuilder.fontWeigthModel().switchValue,
|
||||
selected: () => modelBuilder.fontWeigthModel().getValue() === 'bold',
|
||||
},
|
||||
{
|
||||
icon: <FormatItalicIcon />,
|
||||
@ -270,12 +299,12 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
}),
|
||||
'I',
|
||||
),
|
||||
onClick: valueBulder.getFontStyleModel().switchValue,
|
||||
selected: () => valueBulder.getFontStyleModel().getValue() === 'italic',
|
||||
onClick: modelBuilder.getFontStyleModel().switchValue,
|
||||
selected: () => modelBuilder.getFontStyleModel().getValue() === 'italic',
|
||||
},
|
||||
null,
|
||||
{
|
||||
icon: () => <Palette htmlColor={valueBulder.getFontColorModel().getValue() as string} />,
|
||||
icon: () => <Palette htmlColor={modelBuilder.getFontColorModel().getValue() as string} />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-topic-font-color',
|
||||
defaultMessage: 'Color',
|
||||
@ -284,7 +313,10 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
{
|
||||
render: (closeModal) => {
|
||||
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: [
|
||||
{
|
||||
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',
|
||||
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',
|
||||
}),
|
||||
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 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 validateError = 'Color can not be set to line topics.';
|
||||
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()
|
||||
.filterSelectedTopics()
|
||||
.map((t) => t.getId());
|
||||
|
@ -162,13 +162,10 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
}
|
||||
|
||||
/** */
|
||||
changeBackgroundColorToTopic(topicsIds: number[], color: string) {
|
||||
$assert(topicsIds, 'topicIds can not be null');
|
||||
$assert(color, 'color can not be null');
|
||||
|
||||
const commandFunc = (topic: Topic, commandColor: string) => {
|
||||
changeBackgroundColorToTopic(topicsIds: number[], color: string | undefined) {
|
||||
const commandFunc = (topic: Topic, value: string | undefined) => {
|
||||
const result = topic.getBackgroundColor();
|
||||
topic.setBackgroundColor(commandColor);
|
||||
topic.setBackgroundColor(value);
|
||||
return result;
|
||||
};
|
||||
|
||||
@ -178,11 +175,8 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
}
|
||||
|
||||
/** */
|
||||
changeBorderColorToTopic(topicsIds: number[], color: string): void {
|
||||
$assert(topicsIds, 'topicIds can not be null');
|
||||
$assert(color, 'topicIds can not be null');
|
||||
|
||||
const commandFunc = (topic: Topic, commandColor: string) => {
|
||||
changeBorderColorToTopic(topicsIds: number[], color: string | undefined): void {
|
||||
const commandFunc = (topic: Topic, commandColor: string | undefined) => {
|
||||
const result = topic.getBorderColor();
|
||||
topic.setBorderColor(commandColor);
|
||||
return result;
|
||||
@ -235,8 +229,8 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
this.execute(command);
|
||||
}
|
||||
|
||||
changeConnectionColorToTopic(topicsIds: number[], value: string) {
|
||||
const commandFunc = (topic: Topic, color: string) => {
|
||||
changeConnectionColorToTopic(topicsIds: number[], value: string | undefined) {
|
||||
const commandFunc = (topic: Topic, color: string | undefined) => {
|
||||
const result: string = topic.getConnectionColor();
|
||||
topic.setConnectionColor(color);
|
||||
return result;
|
||||
|
@ -114,7 +114,7 @@ abstract class Topic extends NodeGraph {
|
||||
protected _setShapeType(type: TopicShapeType, updateModel: boolean) {
|
||||
// Remove inner shape figure ...
|
||||
const model = this.getModel();
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
model.setShapeType(type);
|
||||
}
|
||||
|
||||
@ -405,7 +405,7 @@ abstract class Topic extends NodeGraph {
|
||||
setFontFamily(value: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setFontName(value);
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
model.setFontFamily(value);
|
||||
}
|
||||
@ -416,7 +416,7 @@ abstract class Topic extends NodeGraph {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setSize(value);
|
||||
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
model.setFontSize(value);
|
||||
}
|
||||
@ -426,7 +426,7 @@ abstract class Topic extends NodeGraph {
|
||||
setFontStyle(value: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setStyle(value);
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
model.setFontStyle(value);
|
||||
}
|
||||
@ -436,7 +436,7 @@ abstract class Topic extends NodeGraph {
|
||||
setFontWeight(value: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setWeight(value);
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
model.setFontWeight(value);
|
||||
}
|
||||
@ -496,7 +496,7 @@ abstract class Topic extends NodeGraph {
|
||||
setFontColor(value: string, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setColor(value);
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
model.setFontColor(value);
|
||||
}
|
||||
@ -506,7 +506,7 @@ abstract class Topic extends NodeGraph {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setText(text == null ? TopicStyle.defaultText(this) : text);
|
||||
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
model.setText(text || undefined);
|
||||
}
|
||||
@ -529,7 +529,7 @@ abstract class Topic extends NodeGraph {
|
||||
return text || TopicStyle.defaultText(this);
|
||||
}
|
||||
|
||||
setBackgroundColor(color: string): void {
|
||||
setBackgroundColor(color: string | undefined): void {
|
||||
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.
|
||||
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();
|
||||
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.
|
||||
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();
|
||||
innerShape.setFill(color);
|
||||
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
model.setBackgroundColor(color);
|
||||
}
|
||||
@ -585,26 +571,27 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
setBorderColor(color: string): void {
|
||||
setBorderColor(color: string | undefined): void {
|
||||
this._setBorderColor(color, true);
|
||||
|
||||
// @todo: review this ...
|
||||
this.getChildren().forEach((t) => t.redraw());
|
||||
}
|
||||
|
||||
private _setBorderColor(color: string, updateModel: boolean): void {
|
||||
const innerShape = this.getInnerShape();
|
||||
innerShape.setAttribute('strokeColor', color);
|
||||
|
||||
const connector = this.getShrinkConnector();
|
||||
if (connector) {
|
||||
connector.setAttribute('strokeColor', color);
|
||||
}
|
||||
|
||||
if ($defined(updateModel) && updateModel) {
|
||||
private _setBorderColor(color: string | undefined, updateModel: boolean): void {
|
||||
if (updateModel) {
|
||||
const model = this.getModel();
|
||||
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 {
|
||||
@ -1324,7 +1311,7 @@ abstract class Topic extends NodeGraph {
|
||||
iconGroup.setPosition(padding, yPosition);
|
||||
textShape.setPosition(padding + iconGroupWith + textIconSpacing, yPosition);
|
||||
|
||||
// Has color changed ?
|
||||
// Update topic color ...
|
||||
const borderColor = this.getBorderColor();
|
||||
this.getInnerShape().setStroke(1, 'solid', borderColor);
|
||||
|
||||
|
@ -197,7 +197,7 @@ abstract class INodeModel {
|
||||
return this.getProperty('borderColor') as string;
|
||||
}
|
||||
|
||||
setBorderColor(color: string): void {
|
||||
setBorderColor(color: string | undefined): void {
|
||||
this.putProperty('borderColor', color);
|
||||
}
|
||||
|
||||
@ -205,7 +205,7 @@ abstract class INodeModel {
|
||||
return this.getProperty('backgroundColor') as string;
|
||||
}
|
||||
|
||||
setBackgroundColor(color: string): void {
|
||||
setBackgroundColor(color: string | undefined): void {
|
||||
this.putProperty('backgroundColor', color);
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |