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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.43-dev",
+  "version": "0.0.45-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",
@@ -62,14 +62,14 @@
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "reaflow": "^5.4.1"
   },
   "dependencies": {
     "@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",
-    "reaflow": "^5.4.1"
+    "react-bootstrap-icons": "^1.11.5"
   }
 }

package/rollup.config.mjs

@@ -21,7 +21,7 @@ export default {
         },
     ],
     plugins: [
-        external(['react', 'react-dom', '@dnd-kit/core']),
+        external(['react', 'react-dom', '@dnd-kit/core',"reaflow"]),
         resolve({
             extensions: ['.js', '.jsx'],
         }),

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
@@ -75,6 +75,7 @@ export const BehavioralGraphBuilder = forwardRef(({connectBehaviors, deleteTrans
                 <Node
                     onClick={(event, node) => {
                         setSelections([node.id]);
+                        selectBehavior(node.id);
                     }}
                     onRemove={(event, node) => {
                         deleteBehavior(node);

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>