sample-ui-component-library 0.0.44-dev → 0.0.46-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.44-dev",
+  "version": "0.0.46-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/BehavioralGraphBuilder/BehavioralGraphBuilder.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef, useImperativeHandle, forwardRef, useMemo, useCallback } from "react";
-import { Canvas, Node, Edge, removeAndUpsertNodes  } from 'reaflow';
+import { Canvas, Node, Edge } from 'reaflow';
 import PropTypes from 'prop-types';
 
 import { designToNodes } from "./helper";
@@ -11,7 +11,7 @@ import "./BehavioralGraphBuilder.scss";
  * 
  * @return {JSX}
  */
-export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTransition, deleteBehavior}, ref) => {
+export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTransition, deleteBehavior, selectBehavior}, ref) => {
     const canvasRef = useRef();
 
     // Resizer to set canvas size to match container
@@ -28,15 +28,12 @@ export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTrans
         return () => observer.disconnect();
     }, []);
 
-
+    // States
     const [edges, setEdges] = useState([]);
     const [nodes, setNodes] = useState([]);
     const [selections, setSelections] = useState([]);
-'1'
-    const onNodeLink =(_event, from, to) => {
-        connectBehaviors(from, to);
-    }
 
+    // API Methods and Imperative Handle
     const updateEngine = useCallback((engine) => {
         if (engine) {
             const { nodes, edges } = designToNodes(engine);
@@ -53,49 +50,57 @@ export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTrans
     
     useImperativeHandle(ref, () => api, [api]);
 
+
+    // Callbacks
     const handleWheel = useCallback((e) => {
-        if (e.deltaY < 0) {
-            canvasRef.current.zoomIn()
-        } else {
-            canvasRef.current.zoomOut();
-        }
+        (e.deltaY < 0)?canvasRef.current.zoomIn():canvasRef.current.zoomOut();
     }, [canvasRef]);
 
+    const nodeClick = useCallback((e, node) => {
+        setSelections([node.id]);
+        selectBehavior(node.id);
+    }, [selectBehavior]);
+    
+    const nodeRemove = useCallback((e, node) => {
+        deleteBehavior(node);
+        setSelections([]);
+    }, [deleteBehavior]);
+
+    const edgeClick = useCallback((e, edge) => {
+        setSelections([edge.id]);
+    }, []);
+
+    const edgeRemove = useCallback((e, edge) => {
+        deleteTransition(edge);
+        setSelections([]);
+    }, [deleteTransition]);
+
+    const canvasClick = useCallback((e) => {
+        selectBehavior(null);
+        setSelections([]);
+    }, [selectBehavior]);
+
+    const nodeLink = useCallback((e, from, to) => {
+        if (!to) return;
+        connectBehaviors(from, to);
+    }, [connectBehaviors]);
+
     return (
         <div onWheel={handleWheel} ref={containerRef}  className="canvas-wrapper">
             <Canvas 
+                panType="drag"
+                fit
+                center
                 ref={canvasRef}
                 nodes={nodes}
                 edges={edges}
                 width={size.width}
                 height={size.height}
-                onNodeLink={onNodeLink}
-                panType="drag"
-                selections={selections}node={
-                <Node
-                    onClick={(event, node) => {
-                        setSelections([node.id]);
-                    }}
-                    onRemove={(event, node) => {
-                        deleteBehavior(node);
-                        setSelections([]);
-                    }}
-                />
-                }
-                edge={
-                <Edge
-                    onClick={(event, edge) => {
-                        setSelections([edge.id]);
-                    }}
-                    onRemove={(event, edge) => {
-                        deleteTransition(edge);
-                        setSelections([]);
-                    }}
-                />
-                }
-                onCanvasClick={(event) => {setSelections([]);}}
-                fit
-                center
+                selections={selections}
+                onNodeLink={nodeLink}
+                node={ <Node onClick={nodeClick} onRemove={nodeRemove} /> }
+                edge={ <Edge onClick={edgeClick} onRemove={edgeRemove}/> }
+                onCanvasClick={canvasClick}
             />
         </div>
     )
@@ -103,5 +108,7 @@ export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTrans
 
 BehavioralGraphBuilder.propTypes = {
     connectBehaviors: PropTypes.func.isRequired,
-    deleteBehavior: PropTypes.func.isRequired
+    deleteTransition: PropTypes.func.isRequired,
+    deleteBehavior: PropTypes.func.isRequired,
+    selectBehavior: PropTypes.func.isRequired,
 }

package/src/stories/BehavioralGraphBuilder.stories.js

@@ -90,6 +90,14 @@ const Template = (args) => {
         },
         [engine, editorRef],
     );
+
+    const selectBehavior = useCallback(
+        (nodeId) => {
+            action("Select Behavior")(nodeId);
+        },
+        [],
+    );
+
     return (
         <div className="graphBuilderRootContainer">
             <div className="toolbar">
@@ -102,6 +110,7 @@ const Template = (args) => {
                     connectBehaviors={connectBehaviors}
                     deleteTransition={deleteTransition}
                     deleteBehavior={deleteBehavior}
+                    selectBehavior={selectBehavior}
                 />
             </div>
         </div>