Feature/PSYNEU-90

src/components/sidebar/Sidebar.tsx

@@ -8,6 +8,7 @@
 import { DefaultSidebarNodeTypes } from '../../constants';
 import { PanningState } from './states/PanningState';
 import { CreateLinkState } from './states/CreateLinkState';
+import { SelectionState } from './states/SelectionState';
 
 const Sidebar = ({ engine, sidebarNodes, updateSelection }: ISidebarProps) => {
   const [currentState, setCurrentState] = useState<string | null>(
@@ -19,6 +20,7 @@
     .getCurrentState() as DefaultState;
 
   const stateMap: StateMap = {
+    [DefaultSidebarNodeTypes.SELECT]: new SelectionState(reactDiagramsState),
     [DefaultSidebarNodeTypes.PANNING]: new PanningState(reactDiagramsState),
     [DefaultSidebarNodeTypes.CREATE_LINK]: new CreateLinkState(
       reactDiagramsState
@@ -37,7 +39,7 @@
 
   useEffect(() => {
     handleSelection(DefaultSidebarNodeTypes.PANNING);
   }, []);
 
   return (
     <>

src/components/sidebar/states/CreateLinkState.ts

@@ -2,27 +2,24 @@ import { State } from './State';
 import { updateCanvasMouseCursor } from '../../../utils';
 import { CursorTypes } from '../../../constants';
 import { DefaultState } from '../../../react-diagrams/state/DefaultState';
-import { DefaultDiagramState } from '@projectstorm/react-diagrams';
 
 export class CreateLinkState extends State {
   onExit() {
     if (this.state instanceof DefaultState) {
-      this.state.createLink.config.allowCreate = false;
-    } else if (this.state instanceof DefaultDiagramState) {
-      this.state.dragNewLink.config.allowLinksFromLockedPorts = false;
-    } else {
-      this.state.config.allowCreate = false;
+      if (this.state.createLink) {
+        this.state.createLink.config.allowCreate = false;
+      }
+      this.state.unsetCreateLinkState();
     }
     updateCanvasMouseCursor(CursorTypes.DEFAULT);
   }
 
   onEnter() {
     if (this.state instanceof DefaultState) {
-      this.state.createLink.config.allowCreate = true;
-    } else if (this.state instanceof DefaultDiagramState) {
-      this.state.dragNewLink.config.allowLinksFromLockedPorts = true;
-    } else {
-      this.state.config.allowCreate = true;
+      this.state.setCreateLinkState();
+      if (this.state.createLink) {
+        this.state.createLink.config.allowCreate = true;
+      }
     }
     updateCanvasMouseCursor(CursorTypes.CROSSHAIR);
   }

src/components/sidebar/states/PanningState.ts

@@ -2,29 +2,24 @@ import { State } from './State';
 import { updateCanvasMouseCursor } from '../../../utils';
 import { CursorTypes } from '../../../constants';
 import { DefaultState } from '../../../react-diagrams/state/DefaultState';
-import { DefaultDiagramState } from '@projectstorm/react-diagrams';
 
 export class PanningState extends State {
   onExit() {
-    if (
-      this.state instanceof DefaultState ||
-      this.state instanceof DefaultDiagramState
-    ) {
-      this.state.dragCanvas.config.allowDrag = false;
-    } else {
-      this.state.config.allowDrag = false;
+    if (this.state instanceof DefaultState) {
+      if (this.state.dragCanvas) {
+        this.state.dragCanvas.config.allowDrag = false;
+      }
+      this.state.unsetDragState();
     }
     updateCanvasMouseCursor(CursorTypes.DEFAULT);
   }
 
   onEnter() {
-    if (
-      this.state instanceof DefaultState ||
-      this.state instanceof DefaultDiagramState
-    ) {
-      this.state.dragCanvas.config.allowDrag = true;
-    } else {
-      this.state.config.allowDrag = true;
+    if (this.state instanceof DefaultState) {
+      this.state.setDragState();
+      if (this.state.dragCanvas) {
+        this.state.dragCanvas.config.allowDrag = true;
+      }
     }
     updateCanvasMouseCursor(CursorTypes.MOVE);
   }

src/components/sidebar/states/SelectionState.ts

@@ -0,0 +1,20 @@
+import { State } from './State';
+import { updateCanvasMouseCursor } from '../../../utils';
+import { CursorTypes } from '../../../constants';
+import { DefaultState } from '../../../react-diagrams/state/DefaultState';
+
+export class SelectionState extends State {
+  onExit() {
+    if (this.state instanceof DefaultState) {
+      this.state.unsetSelectionState();
+    }
+    updateCanvasMouseCursor(CursorTypes.DEFAULT);
+  }
+
+  onEnter() {
+    if (this.state instanceof DefaultState) {
+      this.state.setSelectionState();
+    }
+    updateCanvasMouseCursor(CursorTypes.DEFAULT);
+  }
+}

src/index.tsx

@@ -79,7 +79,7 @@
     // Sets up the diagram engine
     // By using useMemo, we ensure that the createEngine() function is only called when the component mounts,
     // and the same engine instance is reused on subsequent re-renders.
     const engine = useMemo(() => createEngine(), [metaNodes, metaLinks]);
 
     if (metaCallback === undefined) {
       metaCallback = (node: any) => {
@@ -161,7 +161,6 @@
         engine.getModel().removeLink(link);
       }
       linkRef.current = null;
-      engine.getStateMachine().popState();
     };
 
     let registerNodeListeners = (node: any) => {
@@ -192,23 +191,17 @@
 
     // update state selection state
     const updateSelection = (id: string) => {
-      const startsWithSelect = id
-        .toLowerCase()
-        .startsWith(DefaultSidebarNodeTypes.SELECT);
+      const isSelect = id === DefaultSidebarNodeTypes.SELECT;
 
-      if (startsWithSelect && Boolean(state.isSelection)) {
+      if (isSelect && Boolean(state.isSelection)) {
         return;
       }
 
       if (id !== DefaultSidebarNodeTypes.CREATE_LINK && !!linkRef.current) {
         removeNotValidLink();
       }
-
-      if (startsWithSelect && !Boolean(state.isSelection)) {
-        state.isSelection = true;
-      } else if (Boolean(state.isSelection) || !startsWithSelect) {
+      if (Boolean(state.isSelection) || !isSelect) {
         clearSelection();
-        state.isSelection = false;
       }
       if (engine) {
         repaintCanvas();

src/models/MetaLink.ts

@@ -30,7 +30,7 @@ export class MetaLink implements ILink {
     this.options.set('id', id);
     this.options.set('name', name);
     this.options.set('shape', shape);
-    this.options.set('varian', variant);
+    this.options.set('variant', variant);
   }
 
   getSourceId(): string {

src/models/MetaPort.ts

@@ -37,9 +37,9 @@ export class MetaPort {
 
   serialise(): any {
     return {
-      'id': this.getId(),
-      'name': this.getName(),
-      'type': this.getType(),
+      id: this.getId(),
+      name: this.getName(),
+      type: this.getType(),
     };
   }
 }

src/react-diagrams/MetaNodeModel.ts

@@ -71,7 +71,11 @@ export class MetaNodeModel extends NodeModel {
     return this.getOptions()[label];
   }
 
-  setLoggable(loggable: string, value: any, triggerUpdate?: boolean | undefined) {
+  setLoggable(
+    loggable: string,
+    value: any,
+    triggerUpdate?: boolean | undefined
+  ) {
     // TODO: we need to move this away from meta-diagram but I don't really have time to think about this atm
     // @ts-ignore
     this.options['Loggables'][loggable] = value;
@@ -116,11 +120,11 @@ export class MetaNodeModel extends NodeModel {
     });
     return {
       ...super.serialize(),
-      'name': this.getOption('name'),
-      'graphPath': this.getOption('graphPath'),
-      'class_inputs': {
+      name: this.getOption('name'),
+      graphPath: this.getOption('graphPath'),
+      class_inputs: {
         ...additionalParams,
-      }
+      },
     };
   }
 }

src/react-diagrams/state/DefaultState.ts

@@ -16,17 +16,19 @@ import { CreateLinkState } from './CreateLinkState';
 import { MetaNodeModel } from '../MetaNodeModel';
 
 export class DefaultState extends State<DiagramEngine> {
-  dragCanvas: DragCanvasState;
+  dragCanvas: DragCanvasState | null;
   dragItems: DragDiagramItemsState;
-  createLink: CreateLinkState;
+  createLink: CreateLinkState | null;
+  customCreateLink?: CreateLinkState;
   isSelection: boolean;
 
   constructor(customCreateLink?: CreateLinkState) {
     super({ name: 'starting-state' });
-    this.childStates = [new SelectingState()];
-    this.dragCanvas = new DragCanvasState();
+    this.childStates = [];
+    this.dragCanvas = null;
     this.dragItems = new DragDiagramItemsState();
-    this.createLink = customCreateLink ?? new CreateLinkState();
+    this.createLink = null;
+    this.customCreateLink = customCreateLink;
     this.isSelection = false;
 
     // determine what was clicked on
@@ -39,7 +41,10 @@ export class DefaultState extends State<DiagramEngine> {
             .getModelForEvent(event);
 
           // the canvas was clicked on, transition to the dragging canvas state
-          if (!element) {
+          if (
+            this.dragCanvas &&
+            (!element || !!this.dragCanvas.config.allowDrag)
+          ) {
             this.transitionWithEvent(this.dragCanvas, event);
           }
           // initiate dragging a new link
@@ -51,7 +56,8 @@ export class DefaultState extends State<DiagramEngine> {
             return;
           }
           // move the items (and potentially link points)
-          else {
+          // else if (!this.dragCanvas.config.allowDrag) {
+          else if (this.childStates.length > 0) {
             this.transitionWithEvent(this.dragItems, event);
           }
         },
@@ -67,8 +73,10 @@ export class DefaultState extends State<DiagramEngine> {
             .getModelForEvent(event);
 
           if (
-            element instanceof PortModel ||
-            (element instanceof MetaNodeModel && !this.isSelection)
+            (this.createLink && element instanceof PortModel) ||
+            (element instanceof MetaNodeModel &&
+              this.createLink &&
+              !this.isSelection)
           ) {
             this.transitionWithEvent(this.createLink, event);
           }
@@ -85,12 +93,42 @@ export class DefaultState extends State<DiagramEngine> {
             .getActionEventBus()
             .getModelForEvent(event);
           // the canvas was clicked on, transition to the dragging canvas state
-          if (!!this.dragCanvas.config.allowDrag && !element) {
-            this.transitionWithEvent(this.dragCanvas, event);
+          if (
+            (!!this.dragCanvas && !!this.dragCanvas.config.allowDrag) ||
+            !element
+          ) {
+            this.transitionWithEvent(this.dragCanvas!, event);
           }
-          // this.transitionWithEvent(this.dragCanvas, event);
         },
       })
     );
   }
+
+  // Select state methods
+  public setSelectionState() {
+    this.childStates = [new SelectingState()];
+    this.isSelection = true;
+  }
+
+  public unsetSelectionState() {
+    this.isSelection = false;
+    this.childStates = [];
+  }
+
+  // drag state methods
+  public setDragState() {
+    this.dragCanvas = new DragCanvasState();
+  }
+
+  public unsetDragState() {
+    this.dragCanvas = null;
+  }
+  // create link state methods
+  public setCreateLinkState() {
+    this.createLink = this.customCreateLink ?? new CreateLinkState();
+  }
+
+  public unsetCreateLinkState() {
+    this.createLink = null;
+  }
 }