mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2025-06-11 18:43:22 +02:00
Add connection stype support
This commit is contained in:
Paulo Veiga
@ -7,20 +7,23 @@ import {
|
||||
fontSizes,
|
||||
getNextValue,
|
||||
} from '../../../components/toolbar/ToolbarValueModelBuilder';
|
||||
import { LineType } from '@wisemapping/mindplot/src/components/ConnectionLine';
|
||||
import { TopicShapeType } from '@wisemapping/mindplot/src/components/model/INodeModel';
|
||||
|
||||
class NodePropertyBuilder {
|
||||
designer: Designer;
|
||||
|
||||
fontSizeModel: NodeProperty<number>;
|
||||
selectedTopicColorModel: NodeProperty<string>;
|
||||
fontFamilyModel: NodeProperty<string>;
|
||||
fontStyleModel: NodeProperty<string>;
|
||||
borderColorModel: NodeProperty<string>;
|
||||
fontColorModel: NodeProperty<string>;
|
||||
topicShapeModel: NodeProperty<string>;
|
||||
topicIconModel: NodeProperty<string>;
|
||||
noteModel: NodeProperty<string>;
|
||||
linkModel: NodeProperty<string>;
|
||||
private fontSizeModel: NodeProperty<number>;
|
||||
private selectedTopicColorModel: NodeProperty<string>;
|
||||
private fontFamilyModel: NodeProperty<string>;
|
||||
private fontStyleModel: NodeProperty<string>;
|
||||
private borderColorModel: NodeProperty<string>;
|
||||
private fontColorModel: NodeProperty<string>;
|
||||
private topicShapeModel: NodeProperty<TopicShapeType>;
|
||||
private topicIconModel: NodeProperty<string>;
|
||||
private connetionStyleModel: NodeProperty<LineType>;
|
||||
private noteModel: NodeProperty<string>;
|
||||
private linkModel: NodeProperty<string>;
|
||||
|
||||
constructor(designer: Designer) {
|
||||
this.designer = designer;
|
||||
@ -34,7 +37,9 @@ class NodePropertyBuilder {
|
||||
return this.designer.getModel().selectedTopic()?.getFontSize();
|
||||
}
|
||||
|
||||
private uniqueOrNull(propertyGetter: (Topic: Topic) => string | number | null) {
|
||||
private uniqueOrNull(
|
||||
propertyGetter: (Topic: Topic) => string | number | null | LineType,
|
||||
): string {
|
||||
const nodes = this.designer.getModel().filterSelectedTopics();
|
||||
return getTheUniqueValueOrNull(nodes, propertyGetter);
|
||||
}
|
||||
@ -190,15 +195,20 @@ class NodePropertyBuilder {
|
||||
return this.fontStyleModel;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns model to get and set topic shape
|
||||
*/
|
||||
getTopicShapeModel(): NodeProperty<string> {
|
||||
getConnectionStyleModel(): NodeProperty<LineType> {
|
||||
if (!this.connetionStyleModel)
|
||||
this.connetionStyleModel = {
|
||||
getValue: () => this.selectedTopic()?.getConnectionStyle(),
|
||||
setValue: (value: LineType) => this.designer.changeConnectionStyle(value),
|
||||
};
|
||||
return this.connetionStyleModel;
|
||||
}
|
||||
|
||||
getTopicShapeModel(): NodeProperty<TopicShapeType> {
|
||||
if (!this.topicShapeModel)
|
||||
this.topicShapeModel = {
|
||||
getValue: () => this.uniqueOrNull((node) => node.getShapeType()),
|
||||
setValue: (value: string) => this.designer.changeTopicShape(value),
|
||||
getValue: () => this.uniqueOrNull((node) => node.getShapeType()) as TopicShapeType,
|
||||
setValue: (value: TopicShapeType) => this.designer.changeTopicShape(value),
|
||||
};
|
||||
return this.topicShapeModel;
|
||||
}
|
||||
|
||||
@ -32,6 +32,10 @@ import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlin
|
||||
import HorizontalRuleOutlinedIcon from '@mui/icons-material/HorizontalRuleOutlined';
|
||||
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
|
||||
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
|
||||
import ShapeLineOutlined from '@mui/icons-material/ShapeLineOutlined';
|
||||
import PolylineOutlined from '@mui/icons-material/PolylineOutlined';
|
||||
import GestureOutlined from '@mui/icons-material/GestureOutlined';
|
||||
import TimelineOutined from '@mui/icons-material/TimelineOutlined';
|
||||
|
||||
import Palette from '@mui/icons-material/Square';
|
||||
import SquareOutlined from '@mui/icons-material/SquareOutlined';
|
||||
@ -45,6 +49,7 @@ import IconPicker from '../action-widget/pane/icon-picker';
|
||||
import FontFamilySelector from '../action-widget/button/font-family-selector';
|
||||
import Editor from '../../classes/model/editor';
|
||||
import { IntlShape } from 'react-intl';
|
||||
import { LineType } from '@wisemapping/mindplot/src/components/ConnectionLine';
|
||||
|
||||
const keyTooltip = (msg: string, key: string): string => {
|
||||
const isMac = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
@ -52,7 +57,7 @@ const keyTooltip = (msg: string, key: string): string => {
|
||||
};
|
||||
|
||||
export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionConfig[] {
|
||||
const toolbarValueModelBuilder = new NodePropertyValueModelBuilder(model.getDesigner());
|
||||
const valueBulder = new NodePropertyValueModelBuilder(model.getDesigner());
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const colorAndShapeToolbarConfiguration: ActionConfig = {
|
||||
icon: <BrushOutlinedIcon />,
|
||||
@ -67,8 +72,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-rectangle',
|
||||
defaultMessage: 'Rectangle shape',
|
||||
}),
|
||||
onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('rectangle'),
|
||||
selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'rectangle',
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('rectangle'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'rectangle',
|
||||
},
|
||||
{
|
||||
icon: <CheckBoxOutlineBlankOutlinedIcon />,
|
||||
@ -76,9 +81,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-rounded',
|
||||
defaultMessage: 'Rounded shape',
|
||||
}),
|
||||
onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('rounded rectangle'),
|
||||
selected: () =>
|
||||
toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'rounded rectangle',
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('rounded rectangle'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'rounded rectangle',
|
||||
},
|
||||
{
|
||||
icon: <HorizontalRuleOutlinedIcon />,
|
||||
@ -86,8 +90,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-line',
|
||||
defaultMessage: 'Line shape',
|
||||
}),
|
||||
onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('line'),
|
||||
selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'line',
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('line'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'line',
|
||||
},
|
||||
{
|
||||
icon: <CircleOutlinedIcon />,
|
||||
@ -95,14 +99,14 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-share-ellipse',
|
||||
defaultMessage: 'Ellipse shape',
|
||||
}),
|
||||
onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('elipse'),
|
||||
selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'elipse',
|
||||
onClick: () => valueBulder.getTopicShapeModel().setValue('elipse'),
|
||||
selected: () => valueBulder.getTopicShapeModel().getValue() === 'elipse',
|
||||
},
|
||||
null,
|
||||
{
|
||||
icon: () => (
|
||||
<Palette
|
||||
htmlColor={toolbarValueModelBuilder.getSelectedTopicColorModel().getValue() as string}
|
||||
htmlColor={valueBulder.getSelectedTopicColorModel().getValue() as string}
|
||||
></Palette>
|
||||
),
|
||||
tooltip: intl.formatMessage({
|
||||
@ -115,7 +119,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
return (
|
||||
<ColorPicker
|
||||
closeModal={closeModal}
|
||||
colorModel={toolbarValueModelBuilder.getSelectedTopicColorModel()}
|
||||
colorModel={valueBulder.getSelectedTopicColorModel()}
|
||||
></ColorPicker>
|
||||
);
|
||||
},
|
||||
@ -124,9 +128,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
},
|
||||
{
|
||||
icon: () => (
|
||||
<SquareOutlined
|
||||
htmlColor={toolbarValueModelBuilder.getColorBorderModel().getValue() as string}
|
||||
></SquareOutlined>
|
||||
<SquareOutlined htmlColor={valueBulder.getColorBorderModel().getValue() as string} />
|
||||
),
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-topic-border-color',
|
||||
@ -138,7 +140,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
return (
|
||||
<ColorPicker
|
||||
closeModal={closeModal}
|
||||
colorModel={toolbarValueModelBuilder.getColorBorderModel()}
|
||||
colorModel={valueBulder.getColorBorderModel()}
|
||||
></ColorPicker>
|
||||
);
|
||||
},
|
||||
@ -149,6 +151,46 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0,
|
||||
};
|
||||
|
||||
const connectionStyleConfiguration: ActionConfig = {
|
||||
icon: <ShapeLineOutlined />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-connection-style',
|
||||
defaultMessage: 'Connection Style',
|
||||
}),
|
||||
options: [
|
||||
{
|
||||
icon: <PolylineOutlined />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-connection-style-polyline',
|
||||
defaultMessage: 'Polyline',
|
||||
}),
|
||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE),
|
||||
selected: () =>
|
||||
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_MIDDLE,
|
||||
},
|
||||
{
|
||||
icon: <TimelineOutined />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-connection-style-polyline-curved',
|
||||
defaultMessage: 'Polyline Curved',
|
||||
}),
|
||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_CURVED),
|
||||
selected: () =>
|
||||
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
|
||||
},
|
||||
{
|
||||
icon: <GestureOutlined />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-connection-style-curved',
|
||||
defaultMessage: 'Curved',
|
||||
}),
|
||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED),
|
||||
selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_CURVED,
|
||||
},
|
||||
],
|
||||
disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0,
|
||||
};
|
||||
|
||||
/**
|
||||
* submenu to manipulate node font
|
||||
*/
|
||||
@ -160,9 +202,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
}),
|
||||
options: [
|
||||
{
|
||||
render: () => (
|
||||
<FontFamilySelector fontFamilyModel={toolbarValueModelBuilder.getFontFamilyModel()} />
|
||||
),
|
||||
render: () => <FontFamilySelector fontFamilyModel={valueBulder.getFontFamilyModel()} />,
|
||||
},
|
||||
null,
|
||||
{
|
||||
@ -171,8 +211,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-font-bigger',
|
||||
defaultMessage: 'Bigger',
|
||||
}),
|
||||
onClick: () =>
|
||||
toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up),
|
||||
onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.up),
|
||||
},
|
||||
{
|
||||
icon: <TextDecreaseOutlinedIcon></TextDecreaseOutlinedIcon>,
|
||||
@ -180,8 +219,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
id: 'editor-panel.tooltip-topic-font-smaller',
|
||||
defaultMessage: 'Smaller',
|
||||
}),
|
||||
onClick: () =>
|
||||
toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.down),
|
||||
onClick: () => valueBulder.getFontSizeModel().switchValue(SwitchValueDirection.down),
|
||||
},
|
||||
null,
|
||||
{
|
||||
@ -193,8 +231,8 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
}),
|
||||
'B',
|
||||
),
|
||||
onClick: toolbarValueModelBuilder.fontWeigthModel().switchValue,
|
||||
selected: () => toolbarValueModelBuilder.fontWeigthModel().getValue() === 'bold',
|
||||
onClick: valueBulder.fontWeigthModel().switchValue,
|
||||
selected: () => valueBulder.fontWeigthModel().getValue() === 'bold',
|
||||
},
|
||||
{
|
||||
icon: <FormatItalicIcon />,
|
||||
@ -205,13 +243,11 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
}),
|
||||
'I',
|
||||
),
|
||||
onClick: toolbarValueModelBuilder.getFontStyleModel().switchValue,
|
||||
selected: () => toolbarValueModelBuilder.getFontStyleModel().getValue() === 'italic',
|
||||
onClick: valueBulder.getFontStyleModel().switchValue,
|
||||
selected: () => valueBulder.getFontStyleModel().getValue() === 'italic',
|
||||
},
|
||||
{
|
||||
icon: () => (
|
||||
<Palette htmlColor={toolbarValueModelBuilder.getFontColorModel().getValue() as string} />
|
||||
),
|
||||
icon: () => <Palette htmlColor={valueBulder.getFontColorModel().getValue() as string} />,
|
||||
tooltip: intl.formatMessage({
|
||||
id: 'editor-panel.tooltip-topic-font-color',
|
||||
defaultMessage: 'Color',
|
||||
@ -222,7 +258,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
return (
|
||||
<ColorPicker
|
||||
closeModal={closeModal}
|
||||
colorModel={toolbarValueModelBuilder.getFontColorModel()}
|
||||
colorModel={valueBulder.getFontColorModel()}
|
||||
></ColorPicker>
|
||||
);
|
||||
},
|
||||
@ -261,10 +297,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
options: [
|
||||
{
|
||||
render: (closeModal) => (
|
||||
<TopicLink
|
||||
closeModal={closeModal}
|
||||
urlModel={toolbarValueModelBuilder.getLinkModel()}
|
||||
></TopicLink>
|
||||
<TopicLink closeModal={closeModal} urlModel={valueBulder.getLinkModel()}></TopicLink>
|
||||
),
|
||||
},
|
||||
],
|
||||
@ -285,10 +318,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
{
|
||||
tooltip: 'Node note',
|
||||
render: (closeModal) => (
|
||||
<TopicNote
|
||||
closeModal={closeModal}
|
||||
noteModel={toolbarValueModelBuilder.getNoteModel()}
|
||||
></TopicNote>
|
||||
<TopicNote closeModal={closeModal} noteModel={valueBulder.getNoteModel()}></TopicNote>
|
||||
),
|
||||
},
|
||||
],
|
||||
@ -312,10 +342,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
defaultMessage: 'Add Icon',
|
||||
}),
|
||||
render: (closeModal) => (
|
||||
<IconPicker
|
||||
triggerClose={closeModal}
|
||||
iconModel={toolbarValueModelBuilder.getTopicIconModel()}
|
||||
/>
|
||||
<IconPicker triggerClose={closeModal} iconModel={valueBulder.getTopicIconModel()} />
|
||||
),
|
||||
},
|
||||
],
|
||||
@ -350,6 +377,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
||||
editIconConfiguration,
|
||||
editNoteConfiguration,
|
||||
editLinkUrlConfiguration,
|
||||
connectionStyleConfiguration,
|
||||
addRelationConfiguration,
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user