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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.46-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

@@ -53,7 +53,9 @@ export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTrans
 
     // Callbacks
     const handleWheel = useCallback((e) => {
-        (e.deltaY < 0)?canvasRef.current.zoomIn():canvasRef.current.zoomOut();
+        if (canvasRef.current) {
+            (e.deltaY < 0)?canvasRef.current.zoomIn():canvasRef.current.zoomOut();
+        }
     }, [canvasRef]);
 
     const nodeClick = useCallback((e, node) => {

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>
   );
 }