Featue/psyneu 91

src/components/CanvasWidget.tsx

@@ -1,12 +1,14 @@
 import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/system';
-import { CanvasWidget as Canvas } from '@projectstorm/react-canvas-core';
+import {
+  CanvasWidget as Canvas,
+  CanvasEngine,
+} 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: {
@@ -23,7 +25,7 @@ const useStyles = makeStyles(_ => ({
 const { canvasBg } = vars;
 
 interface ICanvasWidgetProps {
-  engine: DiagramEngine;
+  engine: CanvasEngine;
   className?: string;
 }
 
@@ -40,11 +42,11 @@ export const CanvasWidget = ({
 
       if (!!node.onNodeDrop) node?.onNodeDrop(monitor, node, engine);
     },
-    []
+    [engine]
   );
 
   // can drop custom hook
-  const [{}, dropRef] = useDrop({
+  const [, dropRef] = useDrop({
     accept: CanvasDropTypes.CANVAS_NODE,
     // canDrop: () => true,
     drop: onDrop,

src/components/sidebar/SidebarItem.tsx

@@ -29,7 +29,7 @@ export const SidebarItem = ({
   selected,
   handleSelection,
 }: SidebarItemProps) => {
-  const [{}, dragRef, dragPreview] = useDrag(
+  const [, dragRef, dragPreview] = useDrag(
     () => ({
       type: CanvasDropTypes.CANVAS_NODE,
       item: node,

src/components/sidebar/SubSidebarItem.tsx

@@ -13,7 +13,7 @@ export const SubSidebarItem = ({
   selected,
   handleSelection,
 }: ISubSidebarItemProps) => {
-  const [{}, dragRef, dragPreview] = useDrag(
+  const [, dragRef, dragPreview] = useDrag(
     () => ({
       type: CanvasDropTypes.CANVAS_NODE,
       item: node,

src/components/sidebar/SubSiderBar.tsx

@@ -11,7 +11,7 @@ export const SubSiderBar = ({ nodes, show = false }: ISubSidebar) => {
     return (
       <>
         <Box className="sub-sidebar">
-          <Collapse orientation="horizontal" in={show}>
+          <Collapse orientation="horizontal" in={show} className="wrapper">
             <List disablePadding component="nav">
               {nodes.map(node => (
                 <Fragment key={node.id}>

src/index.tsx

@@ -6,7 +6,7 @@
 import CssBaseline from '@mui/material/CssBaseline';
 import { ComponentsMap } from './models/ComponentsMap';
 import { LinkModel, PortWidget } from '@projectstorm/react-diagrams';
-import { MetaNodeModel } from './react-diagrams/MetaNodeModel';
+import { MetaNodeModel, MetaPortModel } from './react-diagrams/MetaNodeModel';
 import { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';
 import { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';
 import createEngine, { DiagramModel } from '@projectstorm/react-diagrams';
@@ -69,15 +69,17 @@
   ) => {
     const classes = useStyles();
     const linkRef = React.useRef<any>();
+    const onMountRef = React.useRef<Function | undefined>(onMount);
 
     // initialize custom diagram state
     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) => {
@@ -94,7 +96,18 @@
     engine
       .getLinkFactories()
       // @ts-ignore
-      .registerFactory(new MetaLinkFactory(componentsMap.links));
+      .registerFactory(
+        !!globalProps.CustomLinkFactory
+          ? new globalProps.CustomLinkFactory(componentsMap.links)
+          : new MetaLinkFactory(componentsMap.links)
+      );
+
+    if (!!globalProps.CustomPortFactory) {
+      engine
+        .getPortFactories()
+        // @ts-ignore
+        .registerFactory(new globalProps.CustomPortFactory());
+    }
 
     // set up the diagram model
     const model = new DiagramModel();
@@ -193,10 +206,7 @@
 
       if (startsWithSelect && !Boolean(state.isSelection)) {
         state.isSelection = true;
-      } else if (
-        state.isSelection ||
-        (!startsWithSelect && Boolean(state.isSelection))
-      ) {
+      } else if (Boolean(state.isSelection) || !startsWithSelect) {
         clearSelection();
         state.isSelection = false;
       }
@@ -227,13 +237,13 @@
     }
 
     useEffect(() => {
-      if (onMount === undefined) {
-        onMount = (engine: any) => {
+      if (onMountRef.current === undefined) {
+        onMountRef.current = (engine: any) => {
           console.log(engine);
         };
       }
-      onMount(engine);
-    }, []);
+      onMountRef.current(engine);
+    }, [engine]);
 
     // expose api
     const addNode = (node: any) => {
@@ -283,9 +293,21 @@
 );
 
 export default MetaDiagram;
-export { MetaNode, MetaLink, MetaPort, MetaNodeModel, ComponentsMap };
+export {
+  MetaNode,
+  MetaLink,
+  MetaPort,
+  MetaNodeModel,
+  ComponentsMap,
+  MetaPortModel,
+};
 export { PortWidget };
 export { MetaLinkModel } from './react-diagrams/MetaLinkModel';
+export { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';
 export { PortTypes } from './constants';
 export { CallbackTypes } from './constants';
-export { EventTypes, DefaultSidebarNodeTypes } from './constants';
+export {
+  EventTypes,
+  DefaultSidebarNodeTypes,
+  ReactDiagramMetaTypes,
+} from './constants';

src/react-diagrams/MetaLinkFactory.tsx

@@ -5,9 +5,9 @@ import React from 'react';
 import { DefaultLinkFactory } from '@projectstorm/react-diagrams';
 
 export class MetaLinkFactory extends DefaultLinkFactory {
-  componentsMap: Map<string, JSX.Element>;
+  componentsMap: Map<string, React.ComponentType>;
 
-  constructor(componentsMap: Map<string, JSX.Element>) {
+  constructor(componentsMap: Map<string, React.ComponentType>) {
     super(ReactDiagramMetaTypes.META_LINK);
     this.componentsMap = componentsMap;
   }

src/react-diagrams/MetaNodeModel.ts

@@ -3,6 +3,13 @@ import { PortTypes, ReactDiagramMetaTypes, CallbackTypes } from '../constants';
 import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';
 import { Point } from '@projectstorm/geometry';
 import { subPoints } from '../utils';
+import { MetaLinkModel } from './MetaLinkModel';
+
+export class MetaPortModel extends DefaultPortModel {
+  createLinkModel(): MetaLinkModel {
+    return new MetaLinkModel();
+  }
+}
 
 export class MetaNodeModel extends NodeModel {
   constructor(options = {}) {
@@ -21,15 +28,15 @@ export class MetaNodeModel extends NodeModel {
       switch (port.getType()) {
         case PortTypes.INPUT_PORT:
           this.addPort(
-            new DefaultPortModel({
+            new MetaPortModel({
               in: true,
               name: port.getName(),
             })
           );
           break;
         case PortTypes.OUTPUT_PORT:
           this.addPort(
-            new DefaultPortModel({
+            new MetaPortModel({
               in: false,
               name: port.getName(),
             })

src/react-diagrams/state/CreateLinkState.ts

@@ -64,7 +64,7 @@ export class CreateLinkState extends State<DiagramEngine> {
           } else if (
             element instanceof PortModel &&
             this.sourcePort &&
-            element != this.sourcePort
+            element !== this.sourcePort
           ) {
             if (this.sourcePort.canLinkToPort(element)) {
               if (!this.link) return;

src/react-diagrams/state/DefaultState.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, TouchEvent } from 'react';
 import {
   SelectingState,
   State,
@@ -27,7 +27,7 @@ export class DefaultState extends State<DiagramEngine> {
     this.dragCanvas = new DragCanvasState();
     this.dragItems = new DragDiagramItemsState();
     this.createLink = customCreateLink ?? new CreateLinkState();
-    this.isSelection = true;
+    this.isSelection = false;
 
     // determine what was clicked on
     this.registerAction(
@@ -68,12 +68,29 @@ export class DefaultState extends State<DiagramEngine> {
 
           if (
             element instanceof PortModel ||
-            element instanceof MetaNodeModel
+            (element instanceof MetaNodeModel && !this.isSelection)
           ) {
             this.transitionWithEvent(this.createLink, event);
           }
         },
       })
     );
+
+    // touch drags the canvas
+    this.registerAction(
+      new Action({
+        type: InputType.TOUCH_START,
+        fire: (event: ActionEvent<TouchEvent | any>) => {
+          const element = this.engine
+            .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);
+          }
+          // this.transitionWithEvent(this.dragCanvas, event);
+        },
+      })
+    );
   }
 }