sample-ui-component-library 0.0.1-beta → 0.0.2-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.1-beta",
+  "version": "0.0.2-beta",
   "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/FlowDiagram/FlowDiagram.jsx

@@ -15,11 +15,11 @@ import { getLayoutInfoFromTree } from "./helper.js"
 const Flow = ({tree}) => {
   const { fitView } = useReactFlow();
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);  
 
   useEffect(() => {
     if (tree) {
-        const flowInfo = getLayoutInfoFromTree(tree.data);
+        const flowInfo = getLayoutInfoFromTree(tree.data, tree.animated ?? false);
         
         //direction: TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.
         const layouted = getLayoutedElements(

package/src/components/FlowDiagram/helper.js

@@ -14,10 +14,11 @@ const arrowStyle = {
 
 /**
  * Returns react flow nodes and edges from the given tree.
- * @param {Object} tree 
- * @returns {Array} An array co
+ * @param {Object} tree Layout tree object.
+ * @param {boolean} animated Indicates if the edges should be animated.
+ * @returns {Array} An object containing nodes and edges arrays.
  */
-export const getLayoutInfoFromTree = (tree) => {
+export const getLayoutInfoFromTree = (tree, animated) => {
     const edges = [];
     const nodes = [];
     Object.keys(tree).forEach((branchName, index1) => {
@@ -41,7 +42,7 @@ export const getLayoutInfoFromTree = (tree) => {
                     id: prevNode.flowId + "-" + branchName + "-" + index + "-" + flowNode.flowId,
                     source: prevNode.flowId,
                     target: flowNode.flowId,
-                    animated: true,
+                    animated: animated,
                     markerEnd: marker,
                     style: arrowStyle
                 }