@vef-framework/components 1.0.100 → 1.0.101

package/es/vef-approval-flow-editor/components/selector-content.js

@@ -1,20 +1,29 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as o,jsxs as r}from"@emotion/react/jsx-runtime";import{css as e}from"@emotion/react";import{themeVariables as i}from"@vef-framework/shared";import{useReactFlow as n}from"@xyflow/react";import{useMemo as t,useCallback as d}from"react";import a from"../../vef-icon/index.js";import{nodesMetadata as c}from"../constants.js";const s=e`
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { themeVariables } from '@vef-framework/shared';
+import { useReactFlow } from '@xyflow/react';
+import { useMemo, useCallback } from 'react';
+import VefIcon from '../../vef-icon/index.js';
+import { nodesMetadata } from '../constants.js';
+
+const selectorContentStyle = css`
   min-width: 160px;
   display: flex;
   flex-direction: column;
-  gap: ${i.margin};
-`,m=e`
+  gap: ${themeVariables.margin};
+`;
+const selectorItemStyle = css`
   display: flex;
   align-items: center;
-  gap: ${i.marginSm};
-  padding: ${i.paddingXs} ${i.paddingSm};
-  border-radius: ${i.borderRadius};
+  gap: ${themeVariables.marginSm};
+  padding: ${themeVariables.paddingXs} ${themeVariables.paddingSm};
+  border-radius: ${themeVariables.borderRadius};
   cursor: pointer;
-  transition: background-color ${i.motionDurationMid} ${i.motionEaseInOutCirc};
+  transition: background-color ${themeVariables.motionDurationMid} ${themeVariables.motionEaseInOutCirc};
   
   &:hover {
-    background-color: ${i.colorFillSecondary};
+    background-color: ${themeVariables.colorFillSecondary};
   }
 
   > span:first-of-type {
@@ -22,5 +31,34 @@ import{jsx as o,jsxs as r}from"@emotion/react/jsx-runtime";import{css as e}from"
 
   > span:last-of-type {
   }
-`;function VefSelectorContent({items:e,onAddNode:i}){const l=t((()=>e.map((o=>c[o]))),[e]),{setEdges:p,addNodes:f}=n(),u=d((o=>{const[r,e,n]=i(o);p((o=>[...o.filter((o=>!n.includes(o.id))),...e])),f(r)}),[i,p,f]);return o("div",{css:s,children:l.map((({type:e,label:i,icon:n,color:t})=>r("div",{css:m,onClick:()=>u(e),children:[o(a,{color:t,size:"huge",children:n}),o("span",{children:i})]},i)))})}export{VefSelectorContent as default};
+`;
+function VefSelectorContent({ items, onAddNode }) {
+  const nodes = useMemo(
+    () => items.map((item) => nodesMetadata[item]),
+    [items]
+  );
+  const {
+    setEdges,
+    addNodes
+  } = useReactFlow();
+  const handleAddNode = useCallback((nodeType) => {
+    const [node, edgesToAdd, edgesToRemove] = onAddNode(nodeType);
+    setEdges((edges) => [
+      ...edges.filter((edge) => !edgesToRemove.includes(edge.id)),
+      ...edgesToAdd
+    ]);
+    addNodes(node);
+  }, [onAddNode, setEdges, addNodes]);
+  return /* @__PURE__ */ jsx("div", { css: selectorContentStyle, children: nodes.map(({
+    type,
+    label,
+    icon,
+    color
+  }) => /* @__PURE__ */ jsxs("div", { css: selectorItemStyle, onClick: () => handleAddNode(type), children: [
+    /* @__PURE__ */ jsx(VefIcon, { color, size: "huge", children: icon }),
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] }, label)) });
+}
+
+export { VefSelectorContent as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/components/source-handle.js

@@ -1,3 +1,41 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{useNodesData as o,useNodeId as t,useNodeConnections as r,Handle as n,Position as i}from"@xyflow/react";import{useCallback as d}from"react";import{createNode as l,createEdge as m}from"../helper.js";import s from"./node-selector.js";function VefSourceHandle(){const{node:a}=o(t()).data,c=r({handleType:"source"}),p=d((e=>{const o=l(e);return[o,[m(a.getId(),o.id)],[]]}),[a]),f=a.getAvailableNextNodeTypes().length>0,u=c.length>0;return e(n,{position:i.Bottom,type:"source",children:!u&&f&&e(s,{items:a.getAvailableNextNodeTypes(),selectorContentPosition:"bottom",onAddNode:p})})}export{VefSourceHandle as default};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useNodesData, useNodeId, useNodeConnections, Handle, Position } from '@xyflow/react';
+import { useCallback } from 'react';
+import { createNode, createEdge } from '../helper.js';
+import VefNodeSelector from './node-selector.js';
+
+function VefSourceHandle() {
+  const { node } = useNodesData(useNodeId()).data;
+  const connections = useNodeConnections({
+    handleType: "source"
+  });
+  const handleAddNode = useCallback((type) => {
+    const newNode = createNode(type);
+    return [
+      newNode,
+      [createEdge(node.getId(), newNode.id)],
+      []
+    ];
+  }, [node]);
+  const hasAvailableNextNodes = node.getAvailableNextNodeTypes().length > 0;
+  const isConnected = connections.length > 0;
+  return /* @__PURE__ */ jsx(
+    Handle,
+    {
+      position: Position.Bottom,
+      type: "source",
+      children: !isConnected && hasAvailableNextNodes && /* @__PURE__ */ jsx(
+        VefNodeSelector,
+        {
+          items: node.getAvailableNextNodeTypes(),
+          selectorContentPosition: "bottom",
+          onAddNode: handleAddNode
+        }
+      )
+    }
+  );
+}
+
+export { VefSourceHandle as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/components/target-handle.js

@@ -1,3 +1,10 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as t}from"@emotion/react/jsx-runtime";import{Handle as e,Position as r}from"@xyflow/react";function VefTargetHandle(){return t(e,{position:r.Top,type:"target"})}export{VefTargetHandle as default};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Handle, Position } from '@xyflow/react';
+
+function VefTargetHandle() {
+  return /* @__PURE__ */ jsx(Handle, { position: Position.Top, type: "target" });
+}
+
+export { VefTargetHandle as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/constants.js

@@ -1,3 +1,219 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as o}from"@emotion/react/jsx-runtime";import{MarkerType as e}from"@xyflow/react";import{CircleIcon as a,GitCommitVerticalIcon as t,SquarePenIcon as n,StampIcon as d,SendIcon as i}from"lucide-react";import p from"./components/edge.js";import{VefFlowEdge as r}from"./models/edge-node.js";import{VefSubmitFlowNode as l,VefApprovalFlowNode as c,VefConditionFlowNode as s,VefHandleFlowNode as m,VefEndFlowNode as v}from"./models/flow-node.js";import{NodeType as y}from"./types.js";const g=[{id:"submit",data:{node:new l("submit","提交")},type:y.Submit,deletable:!1,position:{x:0,y:0}},{id:"approval",data:{node:new c("approval","审批")},type:y.Approval,position:{x:0,y:100}},{id:"condition-1",data:{node:new s("condition-1","条件1")},type:y.Condition,position:{x:0,y:200}},{id:"approval-1",data:{node:new c("approval-1","审批1")},type:y.Approval,position:{x:0,y:300}},{id:"condition-2",data:{node:new s("condition-2","条件2")},type:y.Condition,position:{x:100,y:200}},{id:"approval-2",data:{node:new c("approval-2","审批2")},type:y.Approval,position:{x:100,y:300}},{id:"handle",data:{node:new m("handle","办理")},type:y.Handle,position:{x:100,y:400}},{id:"end",data:{node:new v("end","结束")},type:y.End,deletable:!1,position:{x:0,y:400}}],w=[{id:"submit-approval",source:"submit",target:"approval",data:{edge:new r}},{id:"approval-condition-1",source:"approval",target:"condition-1",data:{edge:new r}},{id:"condition-1-approval-1",source:"condition-1",target:"approval-1",data:{edge:new r}},{id:"approval-condition-2",source:"approval",target:"condition-2",data:{edge:new r}},{id:"condition-2-approval-2",source:"condition-2",target:"approval-2",data:{edge:new r}},{id:"approval-2-handle",source:"approval-2",target:"handle",data:{edge:new r}},{id:"handle-end",source:"handle",target:"end",data:{edge:new r}},{id:"approval-1-end",source:"approval-1",target:"end",data:{edge:new r}}],u={minZoom:1},b={vef:p},f={type:"vef",deletable:!1,interactionWidth:40,markerEnd:{type:e.ArrowClosed,strokeWidth:1,height:16,width:16}},h={[y.Submit]:{type:y.Submit,label:"提交",icon:o(i,{}),color:"primary"},[y.Approval]:{type:y.Approval,label:"审批",icon:o(d,{}),color:"geekblue"},[y.Handle]:{type:y.Handle,label:"办理",icon:o(n,{}),color:"success"},[y.Condition]:{type:y.Condition,label:"条件",icon:o(t,{}),color:"warning"},[y.End]:{type:y.End,label:"结束",icon:o(a,{}),color:"cyan"}};export{f as defaultEdgeOptions,b as edgeTypes,u as fitViewOptions,w as initialEdges,g as initialNodes,h as nodesMetadata};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { MarkerType } from '@xyflow/react';
+import { CircleIcon, GitCommitVerticalIcon, SquarePenIcon, StampIcon, SendIcon } from 'lucide-react';
+import VefEdge from './components/edge.js';
+import { VefFlowEdge } from './models/edge-node.js';
+import { VefSubmitFlowNode, VefApprovalFlowNode, VefConditionFlowNode, VefHandleFlowNode, VefEndFlowNode } from './models/flow-node.js';
+import { NodeType } from './types.js';
+
+const initialNodes = [
+  {
+    id: "submit",
+    data: {
+      node: new VefSubmitFlowNode("submit", "提交")
+    },
+    type: NodeType.Submit,
+    deletable: false,
+    position: {
+      x: 0,
+      y: 0
+    }
+  },
+  {
+    id: "approval",
+    data: {
+      node: new VefApprovalFlowNode("approval", "审批")
+    },
+    type: NodeType.Approval,
+    position: {
+      x: 0,
+      y: 100
+    }
+  },
+  {
+    id: "condition-1",
+    data: {
+      node: new VefConditionFlowNode("condition-1", "条件1")
+    },
+    type: NodeType.Condition,
+    position: {
+      x: 0,
+      y: 200
+    }
+  },
+  {
+    id: "approval-1",
+    data: {
+      node: new VefApprovalFlowNode("approval-1", "审批1")
+    },
+    type: NodeType.Approval,
+    position: {
+      x: 0,
+      y: 300
+    }
+  },
+  {
+    id: "condition-2",
+    data: {
+      node: new VefConditionFlowNode("condition-2", "条件2")
+    },
+    type: NodeType.Condition,
+    position: {
+      x: 100,
+      y: 200
+    }
+  },
+  {
+    id: "approval-2",
+    data: {
+      node: new VefApprovalFlowNode("approval-2", "审批2")
+    },
+    type: NodeType.Approval,
+    position: {
+      x: 100,
+      y: 300
+    }
+  },
+  {
+    id: "handle",
+    data: {
+      node: new VefHandleFlowNode("handle", "办理")
+    },
+    type: NodeType.Handle,
+    position: {
+      x: 100,
+      y: 400
+    }
+  },
+  {
+    id: "end",
+    data: {
+      node: new VefEndFlowNode("end", "结束")
+    },
+    type: NodeType.End,
+    deletable: false,
+    position: {
+      x: 0,
+      y: 400
+    }
+  }
+];
+const initialEdges = [
+  {
+    id: "submit-approval",
+    source: "submit",
+    target: "approval",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-condition-1",
+    source: "approval",
+    target: "condition-1",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  },
+  {
+    id: "condition-1-approval-1",
+    source: "condition-1",
+    target: "approval-1",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-condition-2",
+    source: "approval",
+    target: "condition-2",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  },
+  {
+    id: "condition-2-approval-2",
+    source: "condition-2",
+    target: "approval-2",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-2-handle",
+    source: "approval-2",
+    target: "handle",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  },
+  {
+    id: "handle-end",
+    source: "handle",
+    target: "end",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-1-end",
+    source: "approval-1",
+    target: "end",
+    data: {
+      edge: new VefFlowEdge()
+    }
+  }
+];
+const fitViewOptions = {
+  minZoom: 1
+};
+const edgeTypes = {
+  vef: VefEdge
+};
+const defaultEdgeOptions = {
+  type: "vef",
+  deletable: false,
+  interactionWidth: 40,
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    strokeWidth: 1,
+    height: 16,
+    width: 16
+  }
+};
+const nodesMetadata = {
+  [NodeType.Submit]: {
+    type: NodeType.Submit,
+    label: "提交",
+    icon: /* @__PURE__ */ jsx(SendIcon, {}),
+    color: "primary"
+  },
+  [NodeType.Approval]: {
+    type: NodeType.Approval,
+    label: "审批",
+    icon: /* @__PURE__ */ jsx(StampIcon, {}),
+    color: "geekblue"
+  },
+  [NodeType.Handle]: {
+    type: NodeType.Handle,
+    label: "办理",
+    icon: /* @__PURE__ */ jsx(SquarePenIcon, {}),
+    color: "success"
+  },
+  [NodeType.Condition]: {
+    type: NodeType.Condition,
+    label: "条件",
+    icon: /* @__PURE__ */ jsx(GitCommitVerticalIcon, {}),
+    color: "warning"
+  },
+  [NodeType.End]: {
+    type: NodeType.End,
+    label: "结束",
+    icon: /* @__PURE__ */ jsx(CircleIcon, {}),
+    color: "cyan"
+  }
+};
+
+export { defaultEdgeOptions, edgeTypes, fitViewOptions, initialEdges, initialNodes, nodesMetadata };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/helper.js

@@ -1,3 +1,84 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{graphlib as e,layout as t}from"@dagrejs/dagre";import{generateId as o}from"@vef-framework/shared";import{nodesMetadata as r}from"./constants.js";import{VefFlowEdge as n}from"./models/edge-node.js";import{VefEndFlowNode as a,VefConditionFlowNode as d,VefHandleFlowNode as s,VefApprovalFlowNode as i,VefSubmitFlowNode as l}from"./models/flow-node.js";import{NodeType as c}from"./types.js";function layoutFlowElements(o,r){const n=new e.Graph;n.setGraph({rankdir:"TB",ranker:"network-simplex",nodesep:60,edgesep:16,ranksep:80}),n.setDefaultEdgeLabel((()=>({})));for(const e of o)n.setNode(e.id,{...e,width:e.measured?.width??240,height:e.measured?.height??100});for(const e of r)n.setEdge(e.source,e.target);return t(n),o.map((e=>{const{x:t,y:o}=n.node(e.id);return{...e,position:{x:t,y:o}}}))}function createFlowNode(e,t){switch(e){case c.Submit:return new l(t,r.submit.label);case c.Approval:return new i(t,r.approval.label);case c.Handle:return new s(t,r.handle.label);case c.Condition:return new d(t,r.condition.label);case c.End:return new a(t,r.end.label)}}function createNode(e){const t=`${e}-${o()}`;return{id:t,type:e,data:{node:createFlowNode(e,t)},position:{x:0,y:0}}}function createEdge(e,t){return{id:`e-${e}-${t}`,source:e,target:t,data:{edge:new n}}}export{createEdge,createFlowNode,createNode,layoutFlowElements};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { graphlib, layout } from '@dagrejs/dagre';
+import { generateId } from '@vef-framework/shared';
+import { nodesMetadata } from './constants.js';
+import { VefFlowEdge } from './models/edge-node.js';
+import { VefEndFlowNode, VefConditionFlowNode, VefHandleFlowNode, VefApprovalFlowNode, VefSubmitFlowNode } from './models/flow-node.js';
+import { NodeType } from './types.js';
+
+function layoutFlowElements(nodes, edges) {
+  const g = new graphlib.Graph();
+  g.setGraph({
+    rankdir: "TB",
+    ranker: "network-simplex",
+    nodesep: 60,
+    edgesep: 16,
+    ranksep: 80
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const node of nodes) {
+    g.setNode(
+      node.id,
+      {
+        ...node,
+        width: node.measured?.width ?? 240,
+        height: node.measured?.height ?? 100
+      }
+    );
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+  layout(g);
+  return nodes.map((node) => {
+    const { x, y } = g.node(node.id);
+    return {
+      ...node,
+      position: {
+        x,
+        y
+      }
+    };
+  });
+}
+function createFlowNode(type, id) {
+  switch (type) {
+    case NodeType.Submit:
+      return new VefSubmitFlowNode(id, nodesMetadata.submit.label);
+    case NodeType.Approval:
+      return new VefApprovalFlowNode(id, nodesMetadata.approval.label);
+    case NodeType.Handle:
+      return new VefHandleFlowNode(id, nodesMetadata.handle.label);
+    case NodeType.Condition:
+      return new VefConditionFlowNode(id, nodesMetadata.condition.label);
+    case NodeType.End:
+      return new VefEndFlowNode(id, nodesMetadata.end.label);
+  }
+}
+function createNode(type) {
+  const id = `${type}-${generateId()}`;
+  return {
+    id,
+    type,
+    data: {
+      node: createFlowNode(type, id)
+    },
+    position: {
+      x: 0,
+      y: 0
+    }
+  };
+}
+function createEdge(source, target) {
+  return {
+    id: `e-${source}-${target}`,
+    source,
+    target,
+    data: {
+      edge: new VefFlowEdge()
+    }
+  };
+}
+
+export { createEdge, createFlowNode, createNode, layoutFlowElements };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/hooks/use-edges-interaction.js

@@ -1,3 +1,26 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{useReactFlow as e}from"@xyflow/react";import{useCallback as t}from"react";function useEdgesInteraction(){const{updateEdgeData:a}=e();return{handleEdgeMouseEnter:t(((e,t)=>{t.data?.edge.setHovering(!0),a(t.id,t.data,{replace:!0})}),[a]),handleEdgeMouseLeave:t(((e,t)=>{t.data?.edge.setHovering(!1),a(t.id,t.data,{replace:!0})}),[a])}}export{useEdgesInteraction};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { useReactFlow } from '@xyflow/react';
+import { useCallback } from 'react';
+
+function useEdgesInteraction() {
+  const { updateEdgeData } = useReactFlow();
+  const handleEdgeMouseEnter = useCallback((_, edge) => {
+    edge.data?.edge.setHovering(true);
+    updateEdgeData(edge.id, edge.data, {
+      replace: true
+    });
+  }, [updateEdgeData]);
+  const handleEdgeMouseLeave = useCallback((_, edge) => {
+    edge.data?.edge.setHovering(false);
+    updateEdgeData(edge.id, edge.data, {
+      replace: true
+    });
+  }, [updateEdgeData]);
+  return {
+    handleEdgeMouseEnter,
+    handleEdgeMouseLeave
+  };
+}
+
+export { useEdgesInteraction };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/hooks/use-element-selection.js

@@ -1,3 +1,25 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{useCallback as e}from"react";import{useApprovalFlowEditorStoreApi as t}from"../store.js";function useElementSelection(){const n=t();return{handleSelectionChange:e((({nodes:e})=>{const{selectedNode:t,setSelectedNode:o}=n.getState();if(0===e.length)return void o(null);const[d]=e;d.id!==t?.getId()&&o(d.data.node)}),[n])}}export{useElementSelection};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { useCallback } from 'react';
+import { useApprovalFlowEditorStoreApi } from '../store.js';
+
+function useElementSelection() {
+  const approvalFlowEditorStore = useApprovalFlowEditorStoreApi();
+  const handleSelectionChange = useCallback(({ nodes }) => {
+    const { selectedNode, setSelectedNode } = approvalFlowEditorStore.getState();
+    if (nodes.length === 0) {
+      setSelectedNode(null);
+      return;
+    }
+    const [node] = nodes;
+    if (node.id === selectedNode?.getId()) {
+      return;
+    }
+    setSelectedNode(node.data.node);
+  }, [approvalFlowEditorStore]);
+  return {
+    handleSelectionChange
+  };
+}
+
+export { useElementSelection };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/hooks/use-nodes-interaction.js

@@ -1,3 +1,52 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{useReactFlow as e,getConnectedEdges as t}from"@xyflow/react";import{useCallback as o}from"react";import{createEdge as r}from"../helper.js";import{NodeType as n}from"../types.js";function useNodesInteraction(){const{addEdges:s,getNode:i,getEdges:f}=e();return{handleBeforeDelete:o((async({nodes:e,edges:o})=>{if(0===e.length)return!1;const[c]=e,d=o.filter((e=>e.source===c.id)).map((e=>e.target));if(d.length>0){const e=[],a=o.filter((e=>e.target===c.id)).map((e=>e.source)),p=f();for(const o of a){const s=t([{id:o,position:{x:0,y:0},data:{}}],p).filter((e=>e.source===o));for(const t of d)i(t)?.type===n.End&&s.length>1||e.push(r(o,t))}s(e)}return!0}),[s,f,i])}}export{useNodesInteraction};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { useReactFlow, getConnectedEdges } from '@xyflow/react';
+import { useCallback } from 'react';
+import { createEdge } from '../helper.js';
+import { NodeType } from '../types.js';
+
+function useNodesInteraction() {
+  const {
+    addEdges,
+    getNode,
+    getEdges
+  } = useReactFlow();
+  const handleBeforeDelete = useCallback(async ({ nodes, edges }) => {
+    if (nodes.length === 0) {
+      return false;
+    }
+    const [node] = nodes;
+    const targetNodeIds = edges.filter((edge) => edge.source === node.id).map((edge) => edge.target);
+    if (targetNodeIds.length > 0) {
+      const edgesToAdd = [];
+      const sourceNodeIds = edges.filter((edge) => edge.target === node.id).map((edge) => edge.source);
+      const allEdges = getEdges();
+      for (const sourceNodeId of sourceNodeIds) {
+        const nextConnectedEdges = getConnectedEdges(
+          [{
+            id: sourceNodeId,
+            position: {
+              x: 0,
+              y: 0
+            },
+            data: {}
+          }],
+          allEdges
+        ).filter((edge) => edge.source === sourceNodeId);
+        for (const targetNodeId of targetNodeIds) {
+          if (getNode(targetNodeId)?.type === NodeType.End && nextConnectedEdges.length > 1) {
+            continue;
+          }
+          edgesToAdd.push(createEdge(sourceNodeId, targetNodeId));
+        }
+      }
+      addEdges(edgesToAdd);
+    }
+    return true;
+  }, [addEdges, getEdges, getNode]);
+  return {
+    handleBeforeDelete
+  };
+}
+
+export { useNodesInteraction };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/index.js

@@ -1,3 +1,76 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsxs as e,jsx as o}from"@emotion/react/jsx-runtime";import{useEdgesState as t,useNodesState as n,ReactFlow as r,MiniMap as i,Controls as s,Background as a,BackgroundVariant as l,SelectionMode as d,ReactFlowProvider as c}from"@xyflow/react";import{useRef as m,useLayoutEffect as p,memo as u}from"react";import{nodeTypes as f}from"./components/nodes/index.js";import{initialEdges as g,initialNodes as h,fitViewOptions as y,edgeTypes as E,defaultEdgeOptions as b}from"./constants.js";import{layoutFlowElements as v}from"./helper.js";import{useEdgesInteraction as j}from"./hooks/use-edges-interaction.js";import{useElementSelection as C}from"./hooks/use-element-selection.js";import{useNodesInteraction as _}from"./hooks/use-nodes-interaction.js";import{ApprovalFlowEditorStoreProvider as w}from"./store.js";import{flowEditorStyle as A,flowEditorContainerStyle as $}from"./styles.js";function VefApprovalFlowEditorBase(){const[c,u,w]=t(g),[$,x,F]=n(h),{handleEdgeMouseEnter:K,handleEdgeMouseLeave:M}=j(),{handleSelectionChange:S}=C(),{handleBeforeDelete:V}=_(),B=m();return p((()=>{if(B.current){if(c.every((e=>B.current.has(`${e.id}__${e.source}__${e.target}`))))return}const e=v($,c);x(e),B.current=new Set(c.map((e=>`${e.id}__${e.source}__${e.target}`)))}),[c]),e(r,{disableKeyboardA11y:!0,fitView:!0,css:A,defaultEdgeOptions:b,edges:c,edgesFocusable:!1,edgesReconnectable:!1,edgeTypes:E,fitViewOptions:y,maxZoom:2,minZoom:.5,multiSelectionKeyCode:null,nodes:$,nodesConnectable:!1,nodesDraggable:!1,nodesFocusable:!1,nodeTypes:f,panActivationKeyCode:null,selectionKeyCode:null,selectionMode:d.Partial,zoomActivationKeyCode:null,onBeforeDelete:V,onEdgeMouseEnter:K,onEdgeMouseLeave:M,onEdgesChange:w,onNodesChange:F,onSelectionChange:S,children:[o(i,{pannable:!0,position:"bottom-left"}),o(s,{orientation:"horizontal",position:"bottom-left"}),o(a,{gap:12,variant:l.Dots})]})}const x=u((function VefApprovalFlowEditor(e){return o("div",{css:$,children:o(w,{initialState:null,children:o(c,{children:o(VefApprovalFlowEditorBase,{...e})})})})}));export{x as default};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useEdgesState, useNodesState, ReactFlow, MiniMap, Controls, Background, BackgroundVariant, SelectionMode, ReactFlowProvider } from '@xyflow/react';
+import { useRef, useLayoutEffect, memo } from 'react';
+import { nodeTypes } from './components/nodes/index.js';
+import { initialEdges, initialNodes, fitViewOptions, edgeTypes, defaultEdgeOptions } from './constants.js';
+import { layoutFlowElements } from './helper.js';
+import { useEdgesInteraction } from './hooks/use-edges-interaction.js';
+import { useElementSelection } from './hooks/use-element-selection.js';
+import { useNodesInteraction } from './hooks/use-nodes-interaction.js';
+import { ApprovalFlowEditorStoreProvider } from './store.js';
+import { flowEditorStyle, flowEditorContainerStyle } from './styles.js';
+
+function VefApprovalFlowEditorBase() {
+  const [edges, _, onEdgesChange] = useEdgesState(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const { handleEdgeMouseEnter, handleEdgeMouseLeave } = useEdgesInteraction();
+  const { handleSelectionChange } = useElementSelection();
+  const { handleBeforeDelete } = useNodesInteraction();
+  const currentEdgeIdentifiersRef = useRef();
+  useLayoutEffect(() => {
+    if (currentEdgeIdentifiersRef.current) {
+      const isSame = edges.every((edge) => currentEdgeIdentifiersRef.current.has(`${edge.id}__${edge.source}__${edge.target}`));
+      if (isSame) {
+        return;
+      }
+    }
+    const layoutedNodes = layoutFlowElements(nodes, edges);
+    setNodes(layoutedNodes);
+    currentEdgeIdentifiersRef.current = new Set(edges.map((edge) => `${edge.id}__${edge.source}__${edge.target}`));
+  }, [edges]);
+  return /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      disableKeyboardA11y: true,
+      fitView: true,
+      css: flowEditorStyle,
+      defaultEdgeOptions,
+      edges,
+      edgesFocusable: false,
+      edgesReconnectable: false,
+      edgeTypes,
+      fitViewOptions,
+      maxZoom: 2,
+      minZoom: 0.5,
+      multiSelectionKeyCode: null,
+      nodes,
+      nodesConnectable: false,
+      nodesDraggable: false,
+      nodesFocusable: false,
+      nodeTypes,
+      panActivationKeyCode: null,
+      selectionKeyCode: null,
+      selectionMode: SelectionMode.Partial,
+      zoomActivationKeyCode: null,
+      onBeforeDelete: handleBeforeDelete,
+      onEdgeMouseEnter: handleEdgeMouseEnter,
+      onEdgeMouseLeave: handleEdgeMouseLeave,
+      onEdgesChange,
+      onNodesChange,
+      onSelectionChange: handleSelectionChange,
+      children: [
+        /* @__PURE__ */ jsx(MiniMap, { pannable: true, position: "bottom-left" }),
+        /* @__PURE__ */ jsx(Controls, { orientation: "horizontal", position: "bottom-left" }),
+        /* @__PURE__ */ jsx(Background, { gap: 12, variant: BackgroundVariant.Dots })
+      ]
+    }
+  );
+}
+function VefApprovalFlowEditor(props) {
+  return /* @__PURE__ */ jsx("div", { css: flowEditorContainerStyle, children: /* @__PURE__ */ jsx(ApprovalFlowEditorStoreProvider, { initialState: null, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(VefApprovalFlowEditorBase, { ...props }) }) }) });
+}
+const index = memo(VefApprovalFlowEditor);
+
+export { index as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-approval-flow-editor/models/edge-node.js

@@ -1,3 +1,21 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-var e=Object.defineProperty,__publicField=(r,s,t)=>((r,s,t)=>s in r?e(r,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[s]=t)(r,"symbol"!=typeof s?s+"":s,t);class AbstractFlowEdge{constructor(){__publicField(this,"_isHovering"),this._isHovering=!1}isHovering(){return this._isHovering}setHovering(e){this._isHovering=e}}class VefFlowEdge extends AbstractFlowEdge{}export{AbstractFlowEdge,VefFlowEdge};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class AbstractFlowEdge {
+  constructor() {
+    __publicField(this, "_isHovering");
+    this._isHovering = false;
+  }
+  isHovering() {
+    return this._isHovering;
+  }
+  setHovering(isHovering) {
+    this._isHovering = isHovering;
+  }
+}
+class VefFlowEdge extends AbstractFlowEdge {
+}
+
+export { AbstractFlowEdge, VefFlowEdge };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */