sample-ui-component-library 0.0.45-dev → 0.0.47-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.45-dev",
+  "version": "0.0.47-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",
@@ -46,11 +46,13 @@
     "@storybook/test": "^8.6.11",
     "@storybook/theming": "^8.6.11",
     "css-loader": "^7.1.2",
+    "dal-engine-core-js-lib-dev": "^0.0.4",
     "gh-pages": "^6.3.0",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "reaflow": "^5.4.1",
     "rollup": "^4.37.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -69,7 +71,6 @@
     "@dagrejs/dagre": "^1.1.4",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.6.0",
-    "dal-engine-core-js-lib-dev": "^0.0.4",
     "react-bootstrap-icons": "^1.11.5"
   }
 }

package/rollup.config.mjs

@@ -1,13 +1,19 @@
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import terser from '@rollup/plugin-terser';
-import external from 'rollup-plugin-peer-deps-external';
+import peerDepsExternal  from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import json from '@rollup/plugin-json';
 import { babel } from '@rollup/plugin-babel';
 
 export default {
     input: 'src/index.js',
+    external: [
+        'react',
+        'react-dom',
+        '@dnd-kit/core',
+        "reaflow"
+    ],
     output: [
         {
             file: 'dist/cjs/index.js',
@@ -21,7 +27,7 @@ export default {
         },
     ],
     plugins: [
-        external(['react', 'react-dom', '@dnd-kit/core',"reaflow"]),
+        peerDepsExternal(),
         resolve({
             extensions: ['.js', '.jsx'],
         }),

package/src/components/BehavioralGraphBuilder/BehavioralGraphBuilder.jsx

@@ -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,50 +50,59 @@ 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();
+        if (canvasRef.current) {
+            (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]);
-                        selectBehavior(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>
     )
@@ -104,5 +110,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/components/BehavioralGraphBuilder/BehavioralGraphBuilder.scss

@@ -7,6 +7,6 @@
     overflow:hidden;
 }
 
-canvas {
+.canvas-wrapper > canvas {
     overflow: hidden;
 }

package/src/components/BehavioralGraphBuilder/helper.js

@@ -1,11 +1,10 @@
 
 /**
- * Converts a DAL design specification object into React Flow elements (nodes and edges).
- * @param {Object} design 
+ * Converts a DAL design specification object into nodes and edges for reaflow.
+ * @param {Object} engine - The engine instance containing the design specification.
  * @returns {Object} An object containing nodes and edges for React Flow
  */
 export const designToNodes = (engine) => {
-
     let edges = [];
     let nodes = [];
 

package/src/stories/BehavioralGraphBuilder.stories.js

@@ -46,19 +46,19 @@ const Template = (args) => {
             activeTool: activeTool,
             design: design,
         });
-    }, []);
+    }, [activeTool, design]);
 
     useEffect(() => {
         if (editorRef.current) {
             const engine = new DALEngine({ name: "testEngine" });
-            // engine.deserialize(JSON.stringify(design));
             setEngine(engine);
             editorRef.current.updateEngine(engine);
-            setTimeout(() => {
+            const timerId = setTimeout(() => {
                 engine.addNode("testBehavior", []);
                 engine.addNode("testBehavior2", []);
                 editorRef.current.updateEngine(engine);
             }, 4000);
+            return () => clearTimeout(timerId);
         }
     }, [design, editorRef]);
 

package/src/stories/components/ToolBar/ToolBar.js

@@ -30,12 +30,13 @@ export function ToolBar({ onSelectTool }) {
           className="icon"
         />
       </div>
-      <div className="toolbarContainer bottom"></div>
+      <div className="toolbarContainer bottom">
         <Floppy
           onClick={(e) => selectTool("save")}
           title="Save Design"
           className="icon"
         />
+      </div>
     </div>
   );
 }