Feature/PSYNEU-86

src/components/CanvasWidget.tsx

@@ -1,14 +1,12 @@
 import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/system';
-import {
-  CanvasEngine,
-  CanvasWidget as Canvas,
-} from '@projectstorm/react-canvas-core';
+import { CanvasWidget as Canvas } from '@projectstorm/react-canvas-core';
 import React, { useCallback } from 'react';
 import { DropTargetMonitor, useDrop } from 'react-dnd';
 import { CanvasDropTypes } from '../constants';
 import vars from './assets/styles/variables';
 import { INode, ISidebarNodeProps } from '../types/sidebar';
+import { DiagramEngine } from '@projectstorm/react-diagrams';
 
 const useStyles = makeStyles(_ => ({
   container: {
@@ -25,7 +23,7 @@
 const { canvasBg } = vars;
 
 interface ICanvasWidgetProps {
-  engine: CanvasEngine;
+  engine: DiagramEngine;
   className?: string;
 }
 
@@ -42,11 +40,11 @@
 
       if (!!node.onNodeDrop) node?.onNodeDrop(monitor, node, engine);
     },
     []
   );
 
   // can drop custom hook
   const [{}, dropRef] = useDrop({
     accept: CanvasDropTypes.CANVAS_NODE,
     // canDrop: () => true,
     drop: onDrop,

src/components/sidebar/Sidebar.tsx

@@ -10,7 +10,9 @@
 import { CreateLinkState } from './states/CreateLinkState';
 
 const Sidebar = ({ engine, sidebarNodes, updateSelection }: ISidebarProps) => {
-  const [currentState, setCurrentState] = useState<string | null>(null);
+  const [currentState, setCurrentState] = useState<string | null>(
+    () => DefaultSidebarNodeTypes.CREATE_LINK
+  );
 
   const reactDiagramsState = engine
     .getStateMachine()
@@ -35,7 +37,7 @@
 
   useEffect(() => {
     handleSelection(DefaultSidebarNodeTypes.PANNING);
   }, []);
 
   return (
     <>

src/components/sidebar/states/CreateLinkState.ts

@@ -2,11 +2,14 @@ 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;
     }
@@ -16,6 +19,8 @@ export class CreateLinkState extends State {
   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;
     }

src/components/sidebar/states/PanningState.ts

@@ -2,10 +2,14 @@ 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) {
+    if (
+      this.state instanceof DefaultState ||
+      this.state instanceof DefaultDiagramState
+    ) {
       this.state.dragCanvas.config.allowDrag = false;
     } else {
       this.state.config.allowDrag = false;
@@ -14,7 +18,10 @@ export class PanningState extends State {
   }
 
   onEnter() {
-    if (this.state instanceof DefaultState) {
+    if (
+      this.state instanceof DefaultState ||
+      this.state instanceof DefaultDiagramState
+    ) {
       this.state.dragCanvas.config.allowDrag = true;
     } else {
       this.state.config.allowDrag = true;

src/components/sidebar/states/State.ts

@@ -1,10 +1,13 @@
+import { DefaultDiagramState } from '@projectstorm/react-diagrams';
 import { CreateLinkState } from '../../../react-diagrams/state/CreateLinkState';
 import { DefaultState } from '../../../react-diagrams/state/DefaultState';
 
 export class State {
-  protected state: DefaultState | CreateLinkState;
+  protected state: DefaultState | CreateLinkState | DefaultDiagramState;
 
-  constructor(reactDiagramsState: DefaultState | CreateLinkState) {
+  constructor(
+    reactDiagramsState: DefaultState | CreateLinkState | DefaultDiagramState
+  ) {
     this.state = reactDiagramsState;
   }
 

src/index.tsx

@@ -71,12 +71,13 @@
     const linkRef = React.useRef<any>();
 
     // initialize custom diagram state
-    const state = new DefaultState(globalProps?.createLink);
+    let state = new DefaultState(globalProps?.createLink);
+    state.isSelection = false;
 
     // 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) => {
@@ -144,9 +145,10 @@
       const sourcePort = link.getSourcePort();
       const targetPort = link.getTargetPort();
       if (sourcePort && !targetPort) {
-        model.removeLink(link);
+        engine.getModel().removeLink(link);
       }
       linkRef.current = null;
+      engine.getStateMachine().popState();
     };
 
     let registerNodeListeners = (node: any) => {
@@ -181,18 +183,26 @@
         .toLowerCase()
         .startsWith(DefaultSidebarNodeTypes.SELECT);
 
+      if (startsWithSelect && Boolean(state.isSelection)) {
+        return;
+      }
+
       if (id !== DefaultSidebarNodeTypes.CREATE_LINK && !!linkRef.current) {
         removeNotValidLink();
       }
 
       if (startsWithSelect && !Boolean(state.isSelection)) {
         state.isSelection = true;
-      } else if (startsWithSelect && Boolean(state.isSelection)) {
-        return;
-      } else if (state.isSelection) {
+      } else if (
+        state.isSelection ||
+        (!startsWithSelect && Boolean(state.isSelection))
+      ) {
         clearSelection();
         state.isSelection = false;
       }
+      if (engine) {
+        repaintCanvas();
+      }
     };
 
     // load model into engine
@@ -218,7 +228,7 @@
 
     useEffect(() => {
       if (onMount === undefined) {
         onMount = (engine: any) => {
           console.log(engine);
         };
       }

src/react-diagrams/state/DefaultState.ts

@@ -66,8 +66,12 @@ export class DefaultState extends State<DiagramEngine> {
             .getActionEventBus()
             .getModelForEvent(event);
 
-          if (element instanceof PortModel || element instanceof MetaNodeModel)
+          if (
+            element instanceof PortModel ||
+            element instanceof MetaNodeModel
+          ) {
             this.transitionWithEvent(this.createLink, event);
+          }
         },
       })
     );