[817] Improve typing of the diagram server

Bug: #817
Signed-off-by: Stéphane Bégaudeau <[email protected]>

frontend/src/diagram/DiagramWebSocketContainer.tsx

@@ -66,18 +66,14 @@ import {
   updateNodePositionOp,
 } from 'diagram/operations';
 import { ContextualPalette } from 'diagram/palette/ContextualPalette';
-import { edgeCreationFeedback } from 'diagram/sprotty/edgeCreationFeedback';
 import {
-  ACTIVE_TOOL_ACTION,
   HIDE_CONTEXTUAL_TOOLBAR_ACTION,
-  SIRIUS_SELECT_ACTION,
-  SIRIUS_UPDATE_MODEL_ACTION,
   SOURCE_ELEMENT_ACTION,
   SPROTTY_SELECT_ACTION,
   ZOOM_IN_ACTION,
   ZOOM_OUT_ACTION,
-  ZOOM_TO_ACTION,
-} from 'diagram/sprotty/WebSocketDiagramServer';
+} from 'diagram/sprotty/DiagramServer';
+import { edgeCreationFeedback } from 'diagram/sprotty/edgeCreationFeedback';
 import { Toolbar } from 'diagram/Toolbar';
 import { canInvokeTool } from 'diagram/toolServices';
 import { GQLDiagramEventPayload } from 'index';
@@ -86,6 +82,13 @@ import { SelectionDialogWebSocketContainer } from 'selection/SelectionDialogWebS
 import { EditLabelAction, FitToScreenAction, SEdge, SNode } from 'sprotty';
 import { v4 as uuid } from 'uuid';
 import { RepresentationComponentProps } from 'workbench/Workbench.types';
+import {
+  SetActiveToolAction,
+  SiriusSelectAction,
+  SiriusUpdateModelAction,
+  SourceElementaction,
+  ZoomToAction,
+} from './sprotty/DiagramServer.types';
 
 const useDiagramWebSocketContainerStyle = makeStyles((theme) => ({
   container: {
@@ -351,7 +354,8 @@ export const DiagramWebSocketContainer = ({
    */
   useEffect(() => {
     if (diagramServer) {
-      diagramServer.actionDispatcher.dispatch({ kind: SIRIUS_UPDATE_MODEL_ACTION, diagram, readOnly });
+      const action: SiriusUpdateModelAction = { kind: 'siriusUpdateModel', diagram, readOnly };
+      diagramServer.actionDispatcher.dispatch(action);
     }
   }, [diagram, diagramServer, readOnly]);
 
@@ -360,7 +364,8 @@ export const DiagramWebSocketContainer = ({
    */
   useEffect(() => {
     if (diagramServer) {
-      diagramServer.actionDispatcher.dispatch({ kind: ACTIVE_TOOL_ACTION, tool: activeTool });
+      const action: SetActiveToolAction = { kind: 'activeTool', tool: activeTool };
+      diagramServer.actionDispatcher.dispatch(action);
     }
   }, [activeTool, diagramServer, dispatch]);
 
@@ -379,7 +384,8 @@ export const DiagramWebSocketContainer = ({
    */
   useEffect(() => {
     if (diagramServer && newSelection) {
-      diagramServer.actionDispatcher.dispatch({ kind: SIRIUS_SELECT_ACTION, selection: newSelection });
+      const action: SiriusSelectAction = { kind: 'siriusSelectElement', selection: newSelection };
+      diagramServer.actionDispatcher.dispatch(action);
     }
   }, [newSelection, diagramServer, dispatch]);
 
@@ -514,7 +520,7 @@ export const DiagramWebSocketContainer = ({
    * initialization will be done each time we are in the loading state.
    */
   useEffect(() => {
-    const onSelectElement = (newSelectedElement, diagServer) => {
+    const onSelectElement = (newSelectedElement, diagramServer) => {
       let newSelection;
       if (newSelectedElement.root.id === newSelectedElement.id) {
         const { id, label, kind } = newSelectedElement;
@@ -532,16 +538,16 @@ export const DiagramWebSocketContainer = ({
       dispatch(selectedElementEvent);
       /**
        * Dispatch the selected element to the diagramServer if our state indicate that selected element has changed.
-       * We can't use useEffet hook here, because SPROTTY_SELECT_ACTION must be send to SiriusWebWebSocketDiagramServer even
+       * We can't use useEffet hook here, because SPROTTY_SELECT_ACTION must be send to the diagramServer even
        * if the same element is selected several times (useEffect hook only reacts if the selected element is not the same).
        * We can also not use diagramServer from the reducer state here, because it is undefined when onSelectElement() is called.
        */
-      diagServer.actionDispatcher.dispatch({ kind: SPROTTY_SELECT_ACTION, element: newSelectedElement });
+      diagramServer.actionDispatcher.dispatch({ kind: SPROTTY_SELECT_ACTION, element: newSelectedElement });
     };
-    const getCursorOn = (element, diagServer) => {
+    const getCursorOn = (element, diagramServer) => {
       let cursor = 'pointer';
-      if (diagServer.activeTool && diagServer.diagramSourceElement) {
-        const cursorAllowed = canInvokeTool(diagServer.activeTool, diagServer.diagramSourceElement, element);
+      if (diagramServer.activeTool && diagramServer.diagramSourceElement) {
+        const cursorAllowed = canInvokeTool(diagramServer.activeTool, diagramServer.diagramSourceElement, element);
         if (cursorAllowed) {
           cursor = 'copy';
         } else {
@@ -550,7 +556,7 @@ export const DiagramWebSocketContainer = ({
       }
       return cursor;
     };
-    const setActiveTool = (tool: Tool) => {
+    const setActiveTool = (tool: Tool | null) => {
       const setActiveToolEvent: SetActiveToolEvent = { type: 'SET_ACTIVE_TOOL', activeTool: tool };
       dispatch(setActiveToolEvent);
     };
@@ -708,7 +714,8 @@ export const DiagramWebSocketContainer = ({
 
   const setZoomLevel = (level) => {
     if (diagramServer) {
-      diagramServer.actionDispatcher.dispatch({ kind: ZOOM_TO_ACTION, level: level });
+      const action: ZoomToAction = { kind: 'zoomTo', level };
+      diagramServer.actionDispatcher.dispatch(action);
       const selectZoomLevelEvent: SelectZoomLevelEvent = { type: 'SELECT_ZOOM_LEVEL', level };
       dispatch(selectZoomLevelEvent);
     }
@@ -841,7 +848,9 @@ export const DiagramWebSocketContainer = ({
         };
         dispatch(setContextualPaletteEvent);
         edgeCreationFeedback.init(x, y);
-        diagramServer.actionDispatcher.dispatch({ kind: SOURCE_ELEMENT_ACTION, sourceElement: element });
+
+        const action: SourceElementaction = { kind: 'sourceElement', element };
+        diagramServer.actionDispatcher.dispatch(action);
       } else if (tool.__typename === 'CreateNodeTool') {
         if (tool.selectionDescriptionId) {
           const showSelectionDialogEvent: ShowSelectionDialogEvent = {

frontend/src/diagram/DiagramWebSocketContainerMachine.ts

@@ -12,7 +12,7 @@
  *******************************************************************************/
 import { GQLToolSection, Palette, Subscriber, Tool, ToolSection } from 'diagram/DiagramWebSocketContainer.types';
 import { createDependencyInjectionContainer } from 'diagram/sprotty/DependencyInjection';
-import { SiriusWebWebSocketDiagramServer } from 'diagram/sprotty/WebSocketDiagramServer';
+import { DiagramServer } from 'diagram/sprotty/DiagramServer';
 import { GQLDiagram } from 'index';
 import { MutableRefObject } from 'react';
 import { MousePositionTracker, TYPES } from 'sprotty';
@@ -54,7 +54,7 @@ export type SchemaValue = {
 export interface DiagramWebSocketContainerContext {
   id: string;
   displayedRepresentationId: string | null;
-  diagramServer: any;
+  diagramServer: DiagramServer;
   diagram: GQLDiagram;
   toolSections: ToolSection[];
   activeTool: Tool | null;
@@ -346,7 +346,7 @@ export const diagramWebSocketContainerMachine = Machine<
           getCursorOn,
           setActiveTool
         );
-        const diagramServer = <SiriusWebWebSocketDiagramServer>container.get(TYPES.ModelSource);
+        const diagramServer = <DiagramServer>container.get(TYPES.ModelSource);
         /**
          * workaround to inject objects in diagramServer from the injector.
          * We cannot use inversify annotation for now. (and perhaps never)

frontend/src/diagram/sprotty/DependencyInjection.ts

@@ -10,23 +10,23 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { Tool } from 'diagram/DiagramWebSocketContainer.types';
+import {
+  ACTIVE_TOOL_ACTION,
+  DiagramServer,
+  HIDE_CONTEXTUAL_TOOLBAR_ACTION,
+  SPROTTY_DELETE_ACTION,
+} from 'diagram/sprotty/DiagramServer';
 import { edgeCreationFeedback } from 'diagram/sprotty/edgeCreationFeedback';
 import { GraphFactory } from 'diagram/sprotty/GraphFactory';
 import siriusDragAndDropModule from 'diagram/sprotty/siriusDragAndDropModule';
-// import siriusResizeModule from 'diagram/sprotty/siriusResizeModule';
 import { DiagramView } from 'diagram/sprotty/views/DiagramView';
 import { EdgeView } from 'diagram/sprotty/views/EdgeView';
 import { ImageView } from 'diagram/sprotty/views/ImageView';
 import { LabelView } from 'diagram/sprotty/views/LabelView';
 import { ListItemView } from 'diagram/sprotty/views/ListItemView';
 import { ListView } from 'diagram/sprotty/views/ListView';
 import { RectangleView } from 'diagram/sprotty/views/RectangleView';
-import {
-  ACTIVE_TOOL_ACTION,
-  HIDE_CONTEXTUAL_TOOLBAR_ACTION,
-  SiriusWebWebSocketDiagramServer,
-  SPROTTY_DELETE_ACTION,
-} from 'diagram/sprotty/WebSocketDiagramServer';
 import { Container, ContainerModule, decorate, inject } from 'inversify';
 import {
   boundsModule,
@@ -105,7 +105,7 @@ const siriusWebContainerModule = new ContainerModule((bind, unbind, isBound, reb
   rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
   rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn);
   rebind(TYPES.IModelFactory).to(GraphFactory).inSingletonScope();
-  bind(TYPES.ModelSource).to(SiriusWebWebSocketDiagramServer).inSingletonScope();
+  bind(TYPES.ModelSource).to(DiagramServer).inSingletonScope();
 
   const context = { bind, unbind, isBound, rebind };
   configureViewerOptions(context, {
@@ -150,7 +150,12 @@ const siriusWebContainerModule = new ContainerModule((bind, unbind, isBound, reb
  * @param containerId The identifier of the container
  * @param onSelectElement The selection call back
  */
-export const createDependencyInjectionContainer = (containerId, onSelectElement, getCursorOn, setActiveTool) => {
+export const createDependencyInjectionContainer = (
+  containerId: string,
+  onSelectElement,
+  getCursorOn,
+  setActiveTool: (tool: Tool | null) => void
+) => {
   const container = new Container();
   container.load(
     defaultModule,
@@ -213,7 +218,7 @@ export const createDependencyInjectionContainer = (containerId, onSelectElement,
         }
       } else if (event.button === 2) {
         edgeCreationFeedback.reset();
-        setActiveTool();
+        setActiveTool(null);
         return [{ kind: ACTIVE_TOOL_ACTION, tool: undefined }];
       }
       return [];

frontend/src/diagram/sprotty/WebSocketDiagramServer.tsx → frontend/src/diagram/sprotty/DiagramServer.tsx

@@ -75,12 +75,7 @@ interface Root {
   index?: any;
 }
 
-/**
- * The WebSocket diagram server used to communicate with the remote server.
- *
- * @gcoutable
- */
-export class SiriusWebWebSocketDiagramServer extends ModelSource {
+export class DiagramServer extends ModelSource {
   logger;
   mousePositionTracker;
   modelFactory;
@@ -309,8 +304,8 @@ export class SiriusWebWebSocketDiagramServer extends ModelSource {
   }
 
   handleSourceElementAction(action) {
-    const { sourceElement } = action;
-    this.diagramSourceElement = sourceElement;
+    const { element } = action;
+    this.diagramSourceElement = element;
   }
 
   handleShowContextualToolbarAction(action) {

frontend/src/diagram/sprotty/DiagramServer.types.ts

@@ -0,0 +1,41 @@
+/*******************************************************************************
+ * Copyright (c) 2021 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { GQLDiagram, Tool } from 'diagram/DiagramWebSocketContainer.types';
+import { Action } from 'sprotty';
+import { Selection } from 'workbench/Workbench.types';
+
+export interface SiriusUpdateModelAction extends Action {
+  kind: 'siriusUpdateModel';
+  diagram: GQLDiagram;
+  readOnly: boolean;
+}
+
+export interface SetActiveToolAction extends Action {
+  kind: 'activeTool';
+  tool: Tool;
+}
+
+export interface SiriusSelectAction extends Action {
+  kind: 'siriusSelectElement';
+  selection: Selection;
+}
+
+export interface ZoomToAction extends Action {
+  kind: 'zoomTo';
+  level: string;
+}
+
+export interface SourceElementaction extends Action {
+  kind: 'sourceElement';
+  element: any;
+}