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

package/package.json

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

@@ -0,0 +1,159 @@
+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";
+
+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,
+    },
+];
+
+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);
+
+    // Callbacks to apply node changes
+    const onNodesChange = useCallback((changes) => {
+        setNodes((nds) => applyNodeChanges(changes, nds));
+    }, []);
+    const onEdgesChange = useCallback((changes) => {
+        setEdges((eds) => applyEdgeChanges(changes, eds));
+    }, []);
+
+    // Console messages for debugging
+    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,
+        });
+
+        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);
+    }, []);
+
+    // 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]);
+
+    // 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));
+        }
+    }, [activeTool]);
+
+    // 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,
+        };
+        setEdges((eds) => [...eds, edge]);
+    }, [activeTool]);
+
+    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>
+    );
+};
+
+export const BehavioralGraphBuilder = ({ activeTool }) => {
+    return (
+        <ReactFlowProvider>
+            <Flow activeTool={activeTool} />
+        </ReactFlowProvider>
+    );
+};

package/src/components/BehavioralGraphBuilder/index.js

@@ -0,0 +1 @@
+export * from "./BehavioralGraphBuilder.jsx"

package/src/index.js

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

package/src/stories/BehavioralGraphBuilder.stories.js

@@ -0,0 +1,42 @@
+import { useCallback, useState, useEffect } from "react";
+import { BehavioralGraphBuilder } from "../components/BehavioralGraphBuilder";
+import "./BehavioralGraphBuilderStories.scss"
+import { ToolBar } from "./components/ToolBar/ToolBar";
+import { useArgs } from "@storybook/preview-api";
+
+export default {
+    title: 'BehavioralGraphBuilder', 
+    component: BehavioralGraphBuilder,
+    argTypes: {
+    }
+};
+
+const Template = (args) => {
+    const [, updateArgs] = useArgs();
+
+    const [activeTool, setActiveTool] = useState("select");
+
+    const selectTool = useCallback((tool) => {
+        updateArgs({activeTool : tool});
+    }, [activeTool, setActiveTool]);
+    
+    useEffect(() => {
+        updateArgs({activeTool : activeTool});
+    }, []);
+
+    return (
+        <div className="graphBuilderRootContainer">
+            <div className="toolbar">
+                <ToolBar onSelectTool={selectTool}/>
+            </div>
+            <div className="flow">
+                <BehavioralGraphBuilder {...args}/> 
+            </div>
+        </div>
+    )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+}

package/src/stories/BehavioralGraphBuilderStories.scss

@@ -0,0 +1,17 @@
+.graphBuilderRootContainer {
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    display:flex;
+    flex-direction: row;
+}
+
+.toolbar {
+    width:40px;
+}
+
+.flow {
+    flex-grow: 1;
+}

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+import {
+  Cursor,
+  Square,
+  NodePlus,
+  Trash
+} from "react-bootstrap-icons";
+
+import "./ToolBar.scss";
+
+ToolBar.propTypes = {};
+
+/**
+ * Toolbar Component
+ * @return {JSX.Element}
+ */
+export function ToolBar({ onSelectTool }) {
+  const [selectedTool, setSelectedTool] = useState("select");
+
+  const selectTool = (tool) => {
+    setSelectedTool(tool);
+    onSelectTool(tool);
+  };
+
+  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"}}
+          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>
+    </div>
+  );
+}

package/src/stories/components/ToolBar/ToolBar.scss

@@ -0,0 +1,29 @@
+.toolbarWrapper {
+    display:flex;
+    flex-direction: column;
+    justify-content:space-around;
+    height: 100%;
+    background-color: #333333;
+}
+
+.toolbarContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width:100%;
+    align-items: center;
+    padding: 10px 0;
+}
+
+.toolbarWrapper > .bottom {
+  margin-top: auto;
+}
+
+.toolbarContainer > .icon {
+    color:grey;
+}
+
+.toolbarContainer > .icon:hover {
+    color:white;
+    cursor:pointer;
+}