[817] Improve the typing of the DiagramEventPayload

Bug: #817 Signed-off-by: Stéphane Bégaudeau <[email protected]>
eclipse-sirius · Nov 26, 2021 · 29129eb · 29129eb
1 parent 4db9131
commit 29129eb
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 6 deletions.
diff --git a/frontend/src/diagram/DiagramWebSocketContainer.tsx b/frontend/src/diagram/DiagramWebSocketContainer.tsx
@@ -21,8 +21,12 @@ import { ServerContext } from 'common/ServerContext';
 import {
   CreateNodeTool,
   GQLDiagram,
+  GQLDiagramEventSubscription,
+  GQLDiagramRefreshedEventPayload,
+  GQLErrorPayload,
   GQLGetToolSectionsData,
   GQLGetToolSectionsVariables,
+  GQLSubscribersUpdatedEventPayload,
   Palette,
   Tool,
 } from 'diagram/DiagramWebSocketContainer.types';
@@ -76,6 +80,7 @@ import {
 } from 'diagram/sprotty/WebSocketDiagramServer';
 import { Toolbar } from 'diagram/Toolbar';
 import { canInvokeTool } from 'diagram/toolServices';
+import { GQLDiagramEventPayload } from 'index';
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { SelectionDialogWebSocketContainer } from 'selection/SelectionDialogWebSocketContainer';
 import { EditLabelAction, FitToScreenAction, SEdge, SNode } from 'sprotty';
@@ -115,6 +120,13 @@ const useDiagramWebSocketContainerStyle = makeStyles((theme) => ({
 }));
 
 const isDiagram = (representation): representation is GQLDiagram => representation.__typename === 'Diagram';
+const isDiagramRefreshedEventPayload = (payload: GQLDiagramEventPayload): payload is GQLDiagramRefreshedEventPayload =>
+  payload.__typename === 'DiagramRefreshedEventPayload';
+const isSubscribersUpdatedEventPayload = (
+  payload: GQLDiagramEventPayload
+): payload is GQLSubscribersUpdatedEventPayload => payload.__typename === 'SubscribersUpdatedEventPayload';
+const isErrorPayload = (payload: GQLDiagramEventPayload): payload is GQLErrorPayload =>
+  payload.__typename === 'ErrorPayload';
 
 /**
  * Here be dragons!
@@ -622,7 +634,7 @@ export const DiagramWebSocketContainer = ({
     }
   }, [activeTool, diagramServer, invokeTool, dispatch, selectedObjectId, contextualPalette]);
 
-  const { error } = useSubscription(diagramEventSubscription, {
+  const { error } = useSubscription<GQLDiagramEventSubscription>(diagramEventSubscription, {
     variables: {
       input: {
         id,
@@ -635,19 +647,19 @@ export const DiagramWebSocketContainer = ({
     onSubscriptionData: ({ subscriptionData }) => {
       if (subscriptionData?.data) {
         const { diagramEvent } = subscriptionData.data;
-        if (diagramEvent.__typename === 'DiagramRefreshedEventPayload') {
+        if (isDiagramRefreshedEventPayload(diagramEvent)) {
           const diagramRefreshedEvent: DiagramRefreshedEvent = {
             type: 'HANDLE_DIAGRAM_REFRESHED',
             diagram: diagramEvent.diagram,
           };
           dispatch(diagramRefreshedEvent);
-        } else if (diagramEvent.__typename === 'SubscribersUpdatedEventPayload') {
+        } else if (isSubscribersUpdatedEventPayload(diagramEvent)) {
           const subscribersUpdatedEvent: SubscribersUpdatedEvent = {
             type: 'HANDLE_SUBSCRIBERS_UPDATED',
             subscribers: diagramEvent.subscribers,
           };
           dispatch(subscribersUpdatedEvent);
-        } else if (diagramEvent.__typename === 'ErrorPayload') {
+        } else if (isErrorPayload(diagramEvent)) {
           const showToastEvent: ShowToastEvent = { type: 'SHOW_TOAST', message: diagramEvent.message };
           dispatch(showToastEvent);
         }

diff --git a/frontend/src/diagram/DiagramWebSocketContainer.types.ts b/frontend/src/diagram/DiagramWebSocketContainer.types.ts
@@ -10,6 +10,32 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+export interface GQLDiagramEventSubscription {
+  diagramEvent: GQLDiagramEventPayload;
+}
+
+export interface GQLDiagramEventPayload {
+  __typename: string;
+}
+
+export interface GQLErrorPayload extends GQLDiagramEventPayload {
+  message: string;
+}
+
+export interface GQLSubscribersUpdatedEventPayload extends GQLDiagramEventPayload {
+  id: string;
+  subscribers: GQLSubscriber[];
+}
+
+export interface GQLSubscriber {
+  username: string;
+}
+
+export interface GQLDiagramRefreshedEventPayload extends GQLDiagramEventPayload {
+  id: string;
+  diagram: GQLDiagram;
+}
+
 export interface Subscriber {
   username: string;
 }
@@ -87,9 +113,135 @@ export interface GQLRepresentation {
   __typename: string;
 }
 export interface GQLDiagram extends GQLRepresentation {
+  id: string;
+  label: string;
+  kind: string;
+  descriptionId: string;
+  targetObjectId: string;
+  autoLayout: boolean;
+  size: GQLSize;
+  position: GQLPosition;
+  nodes: GQLNode[];
+  edges: GQLEdge[];
   toolSections: GQLToolSection[];
 }
 
+export interface GQLSize {
+  height: number;
+  width: number;
+}
+
+export interface GQLPosition {
+  x: number;
+  y: number;
+}
+
+export interface GQLNode {
+  id: string;
+  label: GQLLabel;
+  descriptionId: string;
+  type: string;
+  targetObjectId: string;
+  targetObjectKind: string;
+  targetObjectLabel: string;
+  size: GQLSize;
+  position: GQLPosition;
+  style: GQLINodeStyle;
+  borderNodes: GQLNode[];
+  childNodes: GQLNode[];
+}
+
+export interface GQLLabel {
+  id: string;
+  text: string;
+  type: string;
+  style: GQLLabelStyle;
+  alignment: GQLPosition;
+  position: GQLPosition;
+  size: GQLSize;
+}
+
+export interface GQLLabelStyle {
+  bold: boolean;
+  color: string;
+  fontSize: number;
+  iconURL: string;
+  italic: boolean;
+  strikeThrough: boolean;
+  underline: boolean;
+}
+
+export type GQLINodeStyle = GQLImageNodeStyle | GQLListItemNodeStyle | GQLListNodeStyle | GQLRectangularNodeStyle;
+
+export interface GQLImageNodeStyle {
+  imageURL: string;
+}
+
+export interface GQLListNodeStyle {
+  borderColor: string;
+  borderRadius: number;
+  borderSize: number;
+  borderStyle: GQLLineStyle;
+  color: string;
+}
+
+export interface GQLListItemNodeStyle {
+  backgroundColor: string;
+}
+
+export interface GQLRectangularNodeStyle {
+  borderColor: string;
+  borderRadius: number;
+  borderSize: number;
+  borderStyle: GQLLineStyle;
+  color: string;
+}
+
+export enum GQLLineStyle {
+  Dash,
+  Dash_Dot,
+  Dot,
+  Solid,
+}
+
+export interface GQLEdge {
+  id: string;
+  descriptionId: string;
+  type: string;
+  beginLabel: GQLLabel;
+  centerLabel: GQLLabel;
+  endLabel: GQLLabel;
+  sourceId: string;
+  targetId: string;
+  targetObjectId: string;
+  targetObjectKind: string;
+  targetObjectLabel: string;
+  style: GQLEdgeStyle;
+  routingPoints: GQLPosition[];
+}
+
+export interface GQLEdgeStyle {
+  color: string;
+  lineStyle: GQLLineStyle;
+  size: number;
+  sourceArrow: GQLArrowStyle;
+  targetArrow: GQLArrowStyle;
+}
+
+enum GQLArrowStyle {
+  Diamond,
+  FillDiamond,
+  InputArrow,
+  InputArrowWithDiamond,
+  InputArrowWithFillDiamond,
+  InputClosedArrow,
+  InputFillClosedArrow,
+  None,
+  OutputArrow,
+  OutputClosedArrow,
+  OutputFillClosedArrow,
+}
+
 export interface GQLToolSection {
   id: string;
   label: string;

diff --git a/frontend/src/diagram/DiagramWebSocketContainerMachine.ts b/frontend/src/diagram/DiagramWebSocketContainerMachine.ts
@@ -13,6 +13,7 @@
 import { GQLToolSection, Palette, Subscriber, Tool, ToolSection } from 'diagram/DiagramWebSocketContainer.types';
 import { createDependencyInjectionContainer } from 'diagram/sprotty/DependencyInjection';
 import { SiriusWebWebSocketDiagramServer } from 'diagram/sprotty/WebSocketDiagramServer';
+import { GQLDiagram } from 'index';
 import { MutableRefObject } from 'react';
 import { MousePositionTracker, TYPES } from 'sprotty';
 import { v4 as uuid } from 'uuid';
@@ -54,7 +55,7 @@ export interface DiagramWebSocketContainerContext {
   id: string;
   displayedRepresentationId: string | null;
   diagramServer: any;
-  diagram: any;
+  diagram: GQLDiagram;
   toolSections: ToolSection[];
   activeTool: Tool | null;
   contextualPalette: Palette | null;
@@ -78,7 +79,7 @@ export type ResetSelectedObjectInSelectionDialogEvent = { type: 'RESET_SELECTED_
 export type SwithRepresentationEvent = { type: 'SWITCH_REPRESENTATION'; representationId: string };
 export type SetToolSectionsEvent = { type: 'SET_TOOL_SECTIONS'; toolSections: GQLToolSection[] };
 export type SetDefaultToolEvent = { type: 'SET_DEFAULT_TOOL'; defaultTool: Tool };
-export type DiagramRefreshedEvent = { type: 'HANDLE_DIAGRAM_REFRESHED'; diagram: any };
+export type DiagramRefreshedEvent = { type: 'HANDLE_DIAGRAM_REFRESHED'; diagram: GQLDiagram };
 export type SubscribersUpdatedEvent = { type: 'HANDLE_SUBSCRIBERS_UPDATED'; subscribers: Subscriber[] };
 export type SetActiveToolEvent = { type: 'SET_ACTIVE_TOOL'; activeTool: Tool | null };
 export type SetContextualPaletteEvent = { type: 'SET_CONTEXTUAL_PALETTE'; contextualPalette: Palette | null };