diff --git a/backend/sirius-web-spring-collaborative-diagrams/src/main/resources/schema/diagram.graphqls b/backend/sirius-web-spring-collaborative-diagrams/src/main/resources/schema/diagram.graphqls index 5eb7d8a5cf..8db056e157 100644 --- a/backend/sirius-web-spring-collaborative-diagrams/src/main/resources/schema/diagram.graphqls +++ b/backend/sirius-web-spring-collaborative-diagrams/src/main/resources/schema/diagram.graphqls @@ -187,11 +187,28 @@ type DiagramDescription implements RepresentationDescription { id: ID! label: String! autoLayout: Boolean! + nodeDescriptions: [NodeDescription!]! + edgeDescriptions: [EdgeDescription!]! toolSections: [ToolSection!]! } type NodeDescription { id: ID! + synchronizationPolicy: SynchronizationPolicy! + borderNodeDescriptions: [NodeDescription!]! + childNodeDescriptions: [NodeDescription!]! +} + +type EdgeDescription { + id: ID! + synchronizationPolicy: SynchronizationPolicy! + sourceNodeDescriptions: [NodeDescription!]! + targetNodeDescriptions: [NodeDescription!]! +} + +enum SynchronizationPolicy { + SYNCHRONIZED + UNSYNCHRONIZED } extend type Mutation { diff --git a/frontend/src/diagram/DiagramWebSocketContainer.tsx b/frontend/src/diagram/DiagramWebSocketContainer.tsx index 96b8d5837e..4235c544fb 100644 --- a/frontend/src/diagram/DiagramWebSocketContainer.tsx +++ b/frontend/src/diagram/DiagramWebSocketContainer.tsx @@ -54,7 +54,7 @@ import { SetContextualMenuEvent, SetContextualPaletteEvent, SetDefaultToolEvent, - SetToolSectionsEvent, + SetDiagramDescriptionEvent, ShowSelectionDialogEvent, ShowToastEvent, SubscribersUpdatedEvent, @@ -707,10 +707,11 @@ export const DiagramWebSocketContainer = ({ if (!toolSectionLoading && diagramWebSocketContainer === 'ready' && toolSectionData) { const representationDescription = toolSectionData.viewer.editingContext.representation.description; if (isDiagramDescription(representationDescription)) { - const { toolSections } = representationDescription; - - const setToolSectionsEvent: SetToolSectionsEvent = { type: 'SET_TOOL_SECTIONS', toolSections: toolSections }; - dispatch(setToolSectionsEvent); + const setDiagramDescriptionEvent: SetDiagramDescriptionEvent = { + type: 'SET_DIAGRAM_DESCRIPTION', + diagramDescription: representationDescription, + }; + dispatch(setDiagramDescriptionEvent); } } }, [toolSectionLoading, toolSectionData, diagramWebSocketContainer, dispatch]); diff --git a/frontend/src/diagram/DiagramWebSocketContainer.types.ts b/frontend/src/diagram/DiagramWebSocketContainer.types.ts index 35c30094de..49dca0e360 100644 --- a/frontend/src/diagram/DiagramWebSocketContainer.types.ts +++ b/frontend/src/diagram/DiagramWebSocketContainer.types.ts @@ -130,6 +130,27 @@ export interface GQLRepresentationDescription { export interface GQLDiagramDescription extends GQLRepresentationDescription { toolSections: GQLToolSection[]; + nodeDescriptions: GQLNodeDescription[]; + edgdDescriptions: GQLEdgeDescription[]; +} + +export interface GQLNodeDescription { + id: string; + synchronizationPolicy: GQLSynchronizationPolicy; + childNodeDescriptions: GQLNodeDescription[] | undefined; + borderNodeDescriptions: GQLNodeDescription[] | undefined; +} + +export interface GQLEdgeDescription { + id: string; + synchronizationPolicy: GQLSynchronizationPolicy; + sourceNodeDescriptions: GQLNodeDescription[]; + targetNodeDescriptions: GQLNodeDescription[]; +} + +export enum GQLSynchronizationPolicy { + SYNCHRONIZED = 'SYNCHRONIZED', + UNSYNCHRONIZED = 'UNSYNCHRONIZED', } export interface GQLRepresentation { diff --git a/frontend/src/diagram/DiagramWebSocketContainerMachine.ts b/frontend/src/diagram/DiagramWebSocketContainerMachine.ts index 3fe71dd216..f9bea32016 100644 --- a/frontend/src/diagram/DiagramWebSocketContainerMachine.ts +++ b/frontend/src/diagram/DiagramWebSocketContainerMachine.ts @@ -12,7 +12,7 @@ *******************************************************************************/ import { CreateEdgeTool, - GQLToolSection, + GQLDiagramDescription, Menu, Palette, Position, @@ -65,6 +65,7 @@ export interface DiagramWebSocketContainerContext { displayedRepresentationId: string | null; diagramServer: DiagramServer; diagram: GQLDiagram; + diagramDescription: GQLDiagramDescription | null; toolSections: ToolSection[]; activeTool: Tool | null; activeConnectorTools: CreateEdgeTool[]; @@ -88,7 +89,7 @@ export type HandleSelectedObjectInSelectionDialogEvent = { }; export type ResetSelectedObjectInSelectionDialogEvent = { type: 'RESET_SELECTED_OBJECT_IN_SELECTION_DIALOG' }; export type SwithRepresentationEvent = { type: 'SWITCH_REPRESENTATION'; representationId: string }; -export type SetToolSectionsEvent = { type: 'SET_TOOL_SECTIONS'; toolSections: GQLToolSection[] }; +export type SetDiagramDescriptionEvent = { type: 'SET_DIAGRAM_DESCRIPTION'; diagramDescription: GQLDiagramDescription }; export type SetDefaultToolEvent = { type: 'SET_DEFAULT_TOOL'; defaultTool: Tool }; export type DiagramRefreshedEvent = { type: 'HANDLE_DIAGRAM_REFRESHED'; diagram: GQLDiagram }; export type SubscribersUpdatedEvent = { type: 'HANDLE_SUBSCRIBERS_UPDATED'; subscribers: Subscriber[] }; @@ -128,7 +129,7 @@ export type DiagramWebSocketContainerEvent = | ResetSelectedObjectInSelectionDialogEvent | SwithRepresentationEvent | InitializeRepresentationEvent - | SetToolSectionsEvent + | SetDiagramDescriptionEvent | SetDefaultToolEvent | DiagramRefreshedEvent | SubscribersUpdatedEvent @@ -161,6 +162,7 @@ export const diagramWebSocketContainerMachine = Machine< displayedRepresentationId: null, diagramServer: null, diagram: null, + diagramDescription: null, toolSections: [], activeTool: null, activeConnectorTools: [], @@ -232,9 +234,9 @@ export const diagramWebSocketContainerMachine = Machine< actions: 'switchRepresentation', }, ], - SET_TOOL_SECTIONS: [ + SET_DIAGRAM_DESCRIPTION: [ { - actions: 'setToolSections', + actions: 'setDiagramDescription', }, ], SET_DEFAULT_TOOL: [ @@ -416,21 +418,19 @@ export const diagramWebSocketContainerMachine = Machine< }; }), - setToolSections: assign((_, event) => { - const { toolSections } = event as SetToolSectionsEvent; + setDiagramDescription: assign((_, event) => { + const { diagramDescription } = event as SetDiagramDescriptionEvent; let toolSectionsWithDefaults = []; - if (toolSections) { - toolSectionsWithDefaults = toolSections.map((toolSection) => { - if (toolSection.tools && toolSection.tools.length > 0) { - return { ...toolSection, defaultTool: toolSection.tools[0] }; - } else { - return { ...toolSection, defaultTool: null }; - } - }); - } + toolSectionsWithDefaults = diagramDescription.toolSections.map((toolSection) => { + if (toolSection.tools && toolSection.tools.length > 0) { + return { ...toolSection, defaultTool: toolSection.tools[0] }; + } else { + return { ...toolSection, defaultTool: null }; + } + }); - return { toolSections: toolSectionsWithDefaults }; + return { diagramDescription, toolSections: toolSectionsWithDefaults }; }), setDefaultTool: assign((context, event) => { diff --git a/frontend/src/diagram/operations.ts b/frontend/src/diagram/operations.ts index 88f008e1eb..13d8836029 100644 --- a/frontend/src/diagram/operations.ts +++ b/frontend/src/diagram/operations.ts @@ -359,6 +359,60 @@ export const getToolSectionsQuery = gql` } } } + + nodeDescriptions { + id + synchronizationPolicy + borderNodeDescriptions { + id + synchronizationPolicy + } + childNodeDescriptions { + id + synchronizationPolicy + borderNodeDescriptions { + id + synchronizationPolicy + } + childNodeDescriptions { + id + synchronizationPolicy + borderNodeDescriptions { + id + synchronizationPolicy + } + childNodeDescriptions { + id + synchronizationPolicy + borderNodeDescriptions { + id + synchronizationPolicy + } + childNodeDescriptions { + id + synchronizationPolicy + borderNodeDescriptions { + id + synchronizationPolicy + } + } + } + } + } + } + + edgeDescriptions { + id + synchronizationPolicy + sourceNodeDescriptions { + id + synchronizationPolicy + } + targetNodeDescriptions { + id + synchronizationPolicy + } + } } } }