sample-ui-component-library 0.0.39-dev → 0.0.41-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.39-dev",
+  "version": "0.0.41-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",
@@ -68,6 +68,8 @@
     "@dagrejs/dagre": "^1.1.4",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.6.0",
-    "react-bootstrap-icons": "^1.11.5"
+    "dal-engine-core-js-lib-dev": "^0.0.4",
+    "react-bootstrap-icons": "^1.11.5",
+    "reaflow": "^5.4.1"
   }
 }

package/src/components/BehavioralGraphBuilder/BehavioralGraphBuilder.jsx

@@ -1,159 +1,107 @@
-import { useCallback, useEffect, useState } from "react";
-import {
-    ReactFlow,
-    ReactFlowProvider,
-    useNodesState,
-    useEdgesState,
-    Background,
-    Controls,
-    useReactFlow,
-    addEdge,
-    applyNodeChanges,
-    applyEdgeChanges 
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
+import { useEffect, useState, useRef, useImperativeHandle, forwardRef, useMemo, useCallback } from "react";
+import { Canvas, Node, Edge, removeAndUpsertNodes  } from 'reaflow';
+import PropTypes from 'prop-types';
 
-const initialNodes = [
-    {
-        id: "1",
-        position: { x: 250, y: 150 },
-        data: { label: "Behavior 1" },
-        draggable: true,
-        selectable: true,
-    },
-    {
-        id: "2",
-        position: { x: 250, y: 250 },
-        data: { label: "Behavior 2" },
-        draggable: true,
-        selectable: true,
-    },
-];
+import { designToNodes } from "./helper";
 
-const NODE_WIDTH = 150;
-const NODE_HEIGHT = 40;
-const Flow = ({ activeTool }) => {
-    const { screenToFlowPosition } = useReactFlow();
-    const [nodes, setNodes] = useState(initialNodes);
-    const [edges, setEdges] = useState([]);
-    const [ghostNode, setGhostNode] = useState(null);
+import "./BehavioralGraphBuilder.scss";
 
-    // Callbacks to apply node changes
-    const onNodesChange = useCallback((changes) => {
-        setNodes((nds) => applyNodeChanges(changes, nds));
-    }, []);
-    const onEdgesChange = useCallback((changes) => {
-        setEdges((eds) => applyEdgeChanges(changes, eds));
-    }, []);
+/**
+ * Renders a behavioral graph editor component using reaflow.
+ * 
+ * @return {JSX}
+ */
+export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTransition, deleteBehavior}, ref) => {
+    const canvasRef = useRef();
 
-    // Console messages for debugging
+    // Resizer to set canvas size to match container
+    // TODO: Issues with zooming and resizing, need to explore.
+    const containerRef = useRef();
+    const [size, setSize] = useState({ width: 0, height: 0 });    
     useEffect(() => {
-        console.log("Active Tool:", activeTool);
-    }, [activeTool]);
-
-    // Callback for mouse pane move
-    const onPaneMouseMove = useCallback( (event) => {
-        const pos = screenToFlowPosition({
-            x: event.clientX,
-            y: event.clientY,
+        const observer = new ResizeObserver(([entry]) => {
+        const { width, height } = entry.contentRect;
+            setSize({ width, height });
         });
 
-        if (activeTool === "drop") {
-            setGhostNode({
-                id: "ghost",
-                position: {
-                    x: pos.x - NODE_WIDTH / 2,
-                    y: pos.y - NODE_HEIGHT / 2,
-                },
-                data: { label: "Behavior" },
-                draggable: false,
-                selectable: false,
-                style: {
-                    opacity: 0.5,
-                    pointerEvents: "none",
-                    width: NODE_WIDTH,
-                    height: NODE_HEIGHT,
-                },
-            });
-        } 
-    }, [activeTool]);
-
-    // Callback for when mouse leaves pane
-    const onPaneMouseLeave = useCallback(() => {
-        setGhostNode(null);
+        if (containerRef.current) observer.observe(containerRef.current);
+        return () => observer.disconnect();
     }, []);
 
-    // Callback for pane click
-    const onPaneClick = useCallback((event, node) => {
-        if (activeTool === "drop") {
-            if (!ghostNode) return;
-            setNodes((nds) => [
-                ...nds,
-                {
-                    ...ghostNode,
-                    draggable: true,
-                    selectable: true,
-                    id: crypto.randomUUID(),
-                    style: {},
-                },
-            ]);
-        }  
-    }, [ghostNode, activeTool]);
 
-    // Callback for node click to delete it (if tool is active)
-    const onNodeClick = useCallback((event, node) => {
-        if (activeTool === "delete") {
-            setNodes((nds) => nds.filter((n) => n.id !== node.id));
-            setEdges((eds) =>
-                eds.filter((e) => e.source !== node.id && e.target !== node.id)
-            );
-        }
-    }, [activeTool]);
+    const [edges, setEdges] = useState([]);
+    const [nodes, setNodes] = useState([]);
+    const [selections, setSelections] = useState([]);
+'1'
+    const onNodeLink =(_event, from, to) => {
+        connectBehaviors(from, to);
+    }
 
-    // Callback for edge click to delete it (if tool is active)
-    const onEdgeClick = useCallback((event, edge) => {
-        if (activeTool === "delete") {
-            setEdges((eds) => eds.filter((e) => e.id !== edge.id));
+    const updateEngine = useCallback((engine) => {
+        if (engine) {
+            const { nodes, edges } = designToNodes(engine);
+            setNodes(nodes);
+            setEdges(edges);
         }
-    }, [activeTool]);
+    }, [setNodes, setEdges]);
 
-    // Callback for when edge is connected, nodesConnectable={activeTool === "connect"}
-    // is used to determine connectability
-    const onConnect = useCallback((connection) => {
-        const edge = {
-            ...connection,
-            id: crypto.randomUUID(),
-            type: "smoothstep",
-            animated: true,
+    const api = useMemo(() => {
+        return {
+            updateEngine
         };
-        setEdges((eds) => [...eds, edge]);
-    }, [activeTool]);
+    }, [updateEngine]);
+    
+    useImperativeHandle(ref, () => api, [api]);
 
-    return (
-        <ReactFlow
-            nodes={ghostNode ? [...nodes, ghostNode] : nodes}
-            edges={edges}
-            onPaneMouseMove={onPaneMouseMove}
-            onPaneMouseLeave={onPaneMouseLeave}
-            onPaneClick={onPaneClick}
-            onConnect={onConnect}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onNodeClick={onNodeClick}
-            onEdgeClick={onEdgeClick}
-            colorMode={"dark"}
-            fitView
-        >
-            <Background />
-            <Controls />
-        </ReactFlow>
-    );
-};
+    const handleWheel = useCallback((e) => {
+        if (e.deltaY < 0) {
+            canvasRef.current.zoomIn()
+        } else {
+            canvasRef.current.zoomOut();
+        }
+    }, [canvasRef]);
 
-export const BehavioralGraphBuilder = ({ activeTool }) => {
     return (
-        <ReactFlowProvider>
-            <Flow activeTool={activeTool} />
-        </ReactFlowProvider>
-    );
-};
+        <div onWheel={handleWheel} ref={containerRef}  className="canvas-wrapper">
+            <Canvas 
+                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
+            />
+        </div>
+    )
+});
+
+BehavioralGraphBuilder.propTypes = {
+    connectBehaviors: PropTypes.func.isRequired,
+    deleteBehavior: PropTypes.func.isRequired
+}

package/src/components/BehavioralGraphBuilder/BehavioralGraphBuilder.scss

@@ -0,0 +1,12 @@
+
+.canvas-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #1b1c1d;
+    overflow:hidden;
+}
+
+canvas {
+    overflow: hidden;
+}

package/src/components/BehavioralGraphBuilder/helper.js

@@ -0,0 +1,39 @@
+
+/**
+ * Converts a DAL design specification object into React Flow elements (nodes and edges).
+ * @param {Object} design 
+ * @returns {Object} An object containing nodes and edges for React Flow
+ */
+export const designToNodes = (engine) => {
+
+    let edges = [];
+    let nodes = [];
+
+    for (let i = 0; i < engine.graph.nodes.length; i++) {
+        const node = engine.graph.nodes[i];
+        nodes.push({
+            id: node.getBehavior().name,
+            text: node.getBehavior().name,
+        });
+    }
+    
+    for (let i = 0; i < engine.graph.nodes.length; i++) {
+        const node = engine.graph.nodes[i];
+        if (!node?.getGoToBehaviors()) {
+            continue;
+        }
+
+        node.getGoToBehaviors().forEach((goTo) => {
+            edges.push({
+                id: `${node.getBehavior().name}->${goTo}`,
+                from: node.getBehavior().name,
+                to: goTo,
+            });
+        });
+    }
+
+    return {
+        nodes: nodes,
+        edges: edges
+    };
+}

package/src/index.js

@@ -1,5 +1,4 @@
 export * from "./components/StackList";
 export * from "./components/FlowDiagram";
 export * from "./components/FileBrowser";
-export * from "./components/Editor";
-export * from "./components/BehavioralGraphBuilder";
+export * from "./components/Editor";

package/src/stories/{BehavioralGraphBuilderStories.scss → BehavioralGraphBuilder.scss}

@@ -13,5 +13,8 @@
 }
 
 .flow {
+    display: flex;
     flex-grow: 1;
-}
+    flex-direction: column;
+    overflow:hidden;
+}

package/src/stories/BehavioralGraphBuilder.stories.js

@@ -1,42 +1,115 @@
-import { useCallback, useState, useEffect } from "react";
-import { BehavioralGraphBuilder } from "../components/BehavioralGraphBuilder";
-import "./BehavioralGraphBuilderStories.scss"
-import { ToolBar } from "./components/ToolBar/ToolBar";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { useArgs } from "@storybook/preview-api";
+import { action } from "@storybook/addon-actions";
+
+import { BehavioralGraphBuilder } from "../components/BehavioralGraphBuilder/BehavioralGraphBuilder";
+import { ToolBar } from "./components/ToolBar/ToolBar";
+
+import { DALEngine } from "dal-engine-core-js-lib-dev";
+
+import design from "./data/Designs/simple_designs_temp.json";
+
+import "./BehavioralGraphBuilder.scss";
 
 export default {
-    title: 'BehavioralGraphBuilder', 
+    title: "BehavioralGraphBuilder",
     component: BehavioralGraphBuilder,
-    argTypes: {
-    }
+    argTypes: {},
 };
 
+let count = 0;
+
 const Template = (args) => {
     const [, updateArgs] = useArgs();
 
+    const editorRef = useRef();
+
+    const [engine, setEngine] = useState();
+
     const [activeTool, setActiveTool] = useState("select");
 
-    const selectTool = useCallback((tool) => {
-        updateArgs({activeTool : tool});
-    }, [activeTool, setActiveTool]);
-    
+    const selectTool = useCallback(
+        (tool) => {
+            updateArgs({ activeTool: tool });
+            setActiveTool(tool);
+
+            if (tool === "add-node") {
+                engine.addNode("node-" + count++, []);
+                editorRef.current.updateEngine(engine);
+            }
+        },
+        [activeTool, setActiveTool, engine],
+    );
+
     useEffect(() => {
-        updateArgs({activeTool : activeTool});
+        updateArgs({
+            activeTool: activeTool,
+            design: design,
+        });
     }, []);
 
+    useEffect(() => {
+        if (editorRef.current) {
+            const engine = new DALEngine({ name: "testEngine" });
+            // engine.deserialize(JSON.stringify(design));
+            setEngine(engine);
+            editorRef.current.updateEngine(engine);
+            setTimeout(() => {
+                engine.addNode("testBehavior", []);
+                engine.addNode("testBehavior2", []);
+                editorRef.current.updateEngine(engine);
+            }, 4000);
+        }
+    }, [design, editorRef]);
+
+    const connectBehaviors = useCallback(
+        (from, to) => {
+            if (!to) return;
+            action("Connect Behaviors")(from, to);
+            engine.getNode(from.id).addGoToBehavior(to.id);
+            editorRef.current.updateEngine(engine);
+        },
+        [editorRef, engine],
+    );
+
+    const deleteBehavior = useCallback(
+        (node) => {
+            action("Delete Behavior")(node);
+            engine.removeNode(node.id);
+            editorRef.current.updateEngine(engine);
+        },
+        [engine, editorRef],
+    );
+
+    const deleteTransition = useCallback(
+        (edge) => {
+            action("Delete Transition")(edge);
+            const fromNode = engine.getNode(edge.from);
+            fromNode.removeGoToBehavior(edge.to);
+            editorRef.current.updateEngine(engine);
+        },
+        [engine, editorRef],
+    );
     return (
         <div className="graphBuilderRootContainer">
             <div className="toolbar">
-                <ToolBar onSelectTool={selectTool}/>
+                <ToolBar onSelectTool={selectTool} />
             </div>
             <div className="flow">
-                <BehavioralGraphBuilder {...args}/> 
+                <BehavioralGraphBuilder
+                    ref={editorRef}
+                    {...args}
+                    connectBehaviors={connectBehaviors}
+                    deleteTransition={deleteTransition}
+                    deleteBehavior={deleteBehavior}
+                />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export const Default = Template.bind({})
+export const Default = Template.bind({});
 
 Default.args = {
-}
+    design: design,
+};

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

@@ -1,10 +1,8 @@
 import React, { useState } from "react";
 
 import {
-  Cursor,
-  Square,
-  NodePlus,
-  Trash
+  PlusSquare,
+  Floppy
 } from "react-bootstrap-icons";
 
 import "./ToolBar.scss";
@@ -26,32 +24,18 @@ export function ToolBar({ onSelectTool }) {
   return (
     <div className="toolbarWrapper">
       <div className="toolbarContainer">
-        <Cursor
-          onClick={(e) => selectTool("select")}
-          style={{color: selectedTool === "select" ? "white": "grey"}}
-          title="Select"
-          className="icon"
-        />
-        <Square
-          onClick={(e) => selectTool("drop")}
-          style={{color: selectedTool === "drop" ? "white": "grey"}}
+        <PlusSquare
+          onClick={(e) => selectTool("add-node")}
           title="Add Node"
           className="icon"
         />
-        <NodePlus
-          onClick={(e) => selectTool("connect")}
-          style={{color: selectedTool === "connect" ? "white": "grey"}}
-          title="Connect Node"
-          className="icon"
-        />
-        <Trash
-          onClick={(e) => selectTool("delete")}
-          style={{color: selectedTool === "delete" ? "white": "grey"}}
-          title="Delete Node"
-          className="icon"
-        />
       </div>
       <div className="toolbarContainer bottom"></div>
+        <Floppy
+          onClick={(e) => selectTool("save")}
+          title="Save Design"
+          className="icon"
+        />
     </div>
   );
 }

package/src/stories/data/Designs/simple_designs_temp.json

@@ -0,0 +1 @@
+{"uid":"3b9b65ab-5e3e-48a7-871c-c76de3e20187","type":5,"nodes":[{"uid":"2038c653-587d-4c33-9103-43b59d85c5be","type":6,"_behavior":{"uid":"19ffb9d9-772b-4aca-89b5-6278e0cbee89","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToAddBookToBasket"},"_goToBehaviorIds":["AcceptBookFromUser"]},{"uid":"98d6a9b8-3867-49c8-a93a-f0e11f70af3b","type":6,"_behavior":{"uid":"d1157a53-5938-42ca-92ad-d2d34d99c704","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptBookFromUser"},"_goToBehaviorIds":["AddBookToBasket"]},{"uid":"2aeb336f-37cc-4f28-8301-f3464c387603","type":6,"_behavior":{"uid":"0dc90e9c-6342-4c3d-90f7-5e5e89b48b76","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToBasket"},"_goToBehaviorIds":[]},{"uid":"763e440b-8c09-4893-8e21-b7af11722d93","type":6,"_behavior":{"uid":"555f261d-00b8-4f2d-ad1d-7d18fb68a035","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToAuditLibrary"},"_goToBehaviorIds":["GenerateAuditReport"]},{"uid":"92ba2c22-3beb-442c-a198-562779d7936c","type":6,"_behavior":{"uid":"d44d5d9c-f0f5-4542-9b7d-21793ea1995c","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GenerateAuditReport"},"_goToBehaviorIds":["HandAuditToUser"]},{"uid":"f2e7e018-2596-4aeb-abeb-55948a17157c","type":6,"_behavior":{"uid":"17ac5068-a521-4fbd-9dcb-783d365e01fd","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"HandAuditToUser"},"_goToBehaviorIds":[]},{"uid":"e89cefaa-cdda-450e-808e-ffee9250db01","type":6,"_behavior":{"uid":"4db0dab8-3d4c-4668-88de-e73f38d8c28e","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AcceptChoiceToPlaceBooksOnShelf"},"_goToBehaviorIds":[]},{"uid":"4d1de6bd-cd98-48de-81ed-9754b40c3a36","type":6,"_behavior":{"uid":"0ddc2e33-2b01-411b-a3ae-9f0198fafaf8","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"GetFirstLetterOfBookName"},"_goToBehaviorIds":["CreateSlotOnBookShelf","AddBookToShelf"]},{"uid":"e8e5ffe7-ba16-4c3e-a87f-2083c2502812","type":6,"_behavior":{"uid":"eefbf993-c76b-4c80-bb8d-e3093aaa17cb","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"CreateSlotOnBookShelf"},"_goToBehaviorIds":["AddBookToShelf"]},{"uid":"2fb19dc7-7647-44c1-afd1-4a157ab3d833","type":6,"_behavior":{"uid":"e4092d6e-49bb-4c54-9573-0379466c4ae6","type":1,"participants":[],"abstractionIds":[],"invalidWorldState":false,"name":"AddBookToShelf"},"_goToBehaviorIds":[]}]}