@vef-framework/components 1.0.122 → 1.0.123

package/cjs/vef-approval-flow-editor/components/source-handle.cjs

@@ -0,0 +1,45 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@xyflow/react');
+var react$1 = require('react');
+var helper = require('../helper.cjs');
+var nodeSelector = require('./node-selector.cjs');
+
+"use strict";
+function VefSourceHandle() {
+  const { node } = react.useNodesData(react.useNodeId()).data;
+  const connections = react.useNodeConnections({
+    handleType: "source"
+  });
+  const handleAddNode = react$1.useCallback((type) => {
+    const newNode = helper.createNode(type);
+    return [
+      newNode,
+      [helper.createEdge(node.getId(), newNode.id)],
+      []
+    ];
+  }, [node]);
+  const hasAvailableNextNodes = node.getAvailableNextNodeTypes().length > 0;
+  const isConnected = connections.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Handle,
+    {
+      position: react.Position.Bottom,
+      type: "source",
+      children: !isConnected && hasAvailableNextNodes && /* @__PURE__ */ jsxRuntime.jsx(
+        nodeSelector.default,
+        {
+          items: node.getAvailableNextNodeTypes(),
+          selectorContentPosition: "bottom",
+          onAddNode: handleAddNode
+        }
+      )
+    }
+  );
+}
+
+exports.default = VefSourceHandle;

package/cjs/vef-approval-flow-editor/components/target-handle.cjs

@@ -0,0 +1,14 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@xyflow/react');
+
+"use strict";
+function VefTargetHandle() {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { position: react.Position.Top, type: "target" });
+}
+
+exports.default = VefTargetHandle;

package/cjs/vef-approval-flow-editor/constants.cjs

@@ -0,0 +1,226 @@
+"use strict";
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@xyflow/react');
+var lucideReact = require('lucide-react');
+var edge = require('./components/edge.cjs');
+var edgeNode = require('./models/edge-node.cjs');
+var flowNode = require('./models/flow-node.cjs');
+var types = require('./types.cjs');
+
+"use strict";
+const initialNodes = [
+  {
+    id: "submit",
+    data: {
+      node: new flowNode.VefSubmitFlowNode("submit", "提交")
+    },
+    type: types.NodeType.Submit,
+    deletable: false,
+    position: {
+      x: 0,
+      y: 0
+    }
+  },
+  {
+    id: "approval",
+    data: {
+      node: new flowNode.VefApprovalFlowNode("approval", "审批")
+    },
+    type: types.NodeType.Approval,
+    position: {
+      x: 0,
+      y: 100
+    }
+  },
+  {
+    id: "condition-1",
+    data: {
+      node: new flowNode.VefConditionFlowNode("condition-1", "条件1")
+    },
+    type: types.NodeType.Condition,
+    position: {
+      x: 0,
+      y: 200
+    }
+  },
+  {
+    id: "approval-1",
+    data: {
+      node: new flowNode.VefApprovalFlowNode("approval-1", "审批1")
+    },
+    type: types.NodeType.Approval,
+    position: {
+      x: 0,
+      y: 300
+    }
+  },
+  {
+    id: "condition-2",
+    data: {
+      node: new flowNode.VefConditionFlowNode("condition-2", "条件2")
+    },
+    type: types.NodeType.Condition,
+    position: {
+      x: 100,
+      y: 200
+    }
+  },
+  {
+    id: "approval-2",
+    data: {
+      node: new flowNode.VefApprovalFlowNode("approval-2", "审批2")
+    },
+    type: types.NodeType.Approval,
+    position: {
+      x: 100,
+      y: 300
+    }
+  },
+  {
+    id: "handle",
+    data: {
+      node: new flowNode.VefHandleFlowNode("handle", "办理")
+    },
+    type: types.NodeType.Handle,
+    position: {
+      x: 100,
+      y: 400
+    }
+  },
+  {
+    id: "end",
+    data: {
+      node: new flowNode.VefEndFlowNode("end", "结束")
+    },
+    type: types.NodeType.End,
+    deletable: false,
+    position: {
+      x: 0,
+      y: 400
+    }
+  }
+];
+const initialEdges = [
+  {
+    id: "submit-approval",
+    source: "submit",
+    target: "approval",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-condition-1",
+    source: "approval",
+    target: "condition-1",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  },
+  {
+    id: "condition-1-approval-1",
+    source: "condition-1",
+    target: "approval-1",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-condition-2",
+    source: "approval",
+    target: "condition-2",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  },
+  {
+    id: "condition-2-approval-2",
+    source: "condition-2",
+    target: "approval-2",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-2-handle",
+    source: "approval-2",
+    target: "handle",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  },
+  {
+    id: "handle-end",
+    source: "handle",
+    target: "end",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  },
+  {
+    id: "approval-1-end",
+    source: "approval-1",
+    target: "end",
+    data: {
+      edge: new edgeNode.VefFlowEdge()
+    }
+  }
+];
+const fitViewOptions = {
+  minZoom: 1
+};
+const edgeTypes = {
+  vef: edge.default
+};
+const defaultEdgeOptions = {
+  type: "vef",
+  deletable: false,
+  interactionWidth: 40,
+  markerEnd: {
+    type: react.MarkerType.ArrowClosed,
+    strokeWidth: 1,
+    height: 16,
+    width: 16
+  }
+};
+const nodesMetadata = {
+  [types.NodeType.Submit]: {
+    type: types.NodeType.Submit,
+    label: "提交",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendIcon, {}),
+    color: "primary"
+  },
+  [types.NodeType.Approval]: {
+    type: types.NodeType.Approval,
+    label: "审批",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StampIcon, {}),
+    color: "geekblue"
+  },
+  [types.NodeType.Handle]: {
+    type: types.NodeType.Handle,
+    label: "办理",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePenIcon, {}),
+    color: "success"
+  },
+  [types.NodeType.Condition]: {
+    type: types.NodeType.Condition,
+    label: "条件",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitCommitVerticalIcon, {}),
+    color: "warning"
+  },
+  [types.NodeType.End]: {
+    type: types.NodeType.End,
+    label: "结束",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleIcon, {}),
+    color: "cyan"
+  }
+};
+
+exports.defaultEdgeOptions = defaultEdgeOptions;
+exports.edgeTypes = edgeTypes;
+exports.fitViewOptions = fitViewOptions;
+exports.initialEdges = initialEdges;
+exports.initialNodes = initialNodes;
+exports.nodesMetadata = nodesMetadata;

package/cjs/vef-approval-flow-editor/helper.cjs

@@ -0,0 +1,89 @@
+"use strict";
+'use strict';
+
+var dagre = require('@dagrejs/dagre');
+var shared = require('@vef-framework/shared');
+var constants = require('./constants.cjs');
+var edgeNode = require('./models/edge-node.cjs');
+var flowNode = require('./models/flow-node.cjs');
+var types = require('./types.cjs');
+
+"use strict";
+function layoutFlowElements(nodes, edges) {
+  const g = new dagre.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);
+  }
+  dagre.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 types.NodeType.Submit:
+      return new flowNode.VefSubmitFlowNode(id, constants.nodesMetadata.submit.label);
+    case types.NodeType.Approval:
+      return new flowNode.VefApprovalFlowNode(id, constants.nodesMetadata.approval.label);
+    case types.NodeType.Handle:
+      return new flowNode.VefHandleFlowNode(id, constants.nodesMetadata.handle.label);
+    case types.NodeType.Condition:
+      return new flowNode.VefConditionFlowNode(id, constants.nodesMetadata.condition.label);
+    case types.NodeType.End:
+      return new flowNode.VefEndFlowNode(id, constants.nodesMetadata.end.label);
+  }
+}
+function createNode(type) {
+  const id = `${type}-${shared.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 edgeNode.VefFlowEdge()
+    }
+  };
+}
+
+exports.createEdge = createEdge;
+exports.createFlowNode = createFlowNode;
+exports.createNode = createNode;
+exports.layoutFlowElements = layoutFlowElements;

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

@@ -0,0 +1,28 @@
+"use strict";
+'use strict';
+
+var react = require('@xyflow/react');
+var react$1 = require('react');
+
+"use strict";
+function useEdgesInteraction() {
+  const { updateEdgeData } = react.useReactFlow();
+  const handleEdgeMouseEnter = react$1.useCallback((_, edge) => {
+    edge.data?.edge.setHovering(true);
+    updateEdgeData(edge.id, edge.data, {
+      replace: true
+    });
+  }, [updateEdgeData]);
+  const handleEdgeMouseLeave = react$1.useCallback((_, edge) => {
+    edge.data?.edge.setHovering(false);
+    updateEdgeData(edge.id, edge.data, {
+      replace: true
+    });
+  }, [updateEdgeData]);
+  return {
+    handleEdgeMouseEnter,
+    handleEdgeMouseLeave
+  };
+}
+
+exports.useEdgesInteraction = useEdgesInteraction;

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

@@ -0,0 +1,27 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var store = require('../store.cjs');
+
+"use strict";
+function useElementSelection() {
+  const approvalFlowEditorStore = store.useApprovalFlowEditorStoreApi();
+  const handleSelectionChange = react.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
+  };
+}
+
+exports.useElementSelection = useElementSelection;

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

@@ -0,0 +1,54 @@
+"use strict";
+'use strict';
+
+var react = require('@xyflow/react');
+var react$1 = require('react');
+var helper = require('../helper.cjs');
+var types = require('../types.cjs');
+
+"use strict";
+function useNodesInteraction() {
+  const {
+    addEdges,
+    getNode,
+    getEdges
+  } = react.useReactFlow();
+  const handleBeforeDelete = react$1.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 = react.getConnectedEdges(
+          [{
+            id: sourceNodeId,
+            position: {
+              x: 0,
+              y: 0
+            },
+            data: {}
+          }],
+          allEdges
+        ).filter((edge) => edge.source === sourceNodeId);
+        for (const targetNodeId of targetNodeIds) {
+          if (getNode(targetNodeId)?.type === types.NodeType.End && nextConnectedEdges.length > 1) {
+            continue;
+          }
+          edgesToAdd.push(helper.createEdge(sourceNodeId, targetNodeId));
+        }
+      }
+      addEdges(edgesToAdd);
+    }
+    return true;
+  }, [addEdges, getEdges, getNode]);
+  return {
+    handleBeforeDelete
+  };
+}
+
+exports.useNodesInteraction = useNodesInteraction;

package/cjs/vef-approval-flow-editor/index.cjs

@@ -0,0 +1,80 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@xyflow/react');
+var react$1 = require('react');
+var index$1 = require('./components/nodes/index.cjs');
+var constants = require('./constants.cjs');
+var helper = require('./helper.cjs');
+var useEdgesInteraction = require('./hooks/use-edges-interaction.cjs');
+var useElementSelection = require('./hooks/use-element-selection.cjs');
+var useNodesInteraction = require('./hooks/use-nodes-interaction.cjs');
+var store = require('./store.cjs');
+var styles = require('./styles.cjs');
+
+"use strict";
+function VefApprovalFlowEditorBase() {
+  const [edges, _, onEdgesChange] = react.useEdgesState(constants.initialEdges);
+  const [nodes, setNodes, onNodesChange] = react.useNodesState(constants.initialNodes);
+  const { handleEdgeMouseEnter, handleEdgeMouseLeave } = useEdgesInteraction.useEdgesInteraction();
+  const { handleSelectionChange } = useElementSelection.useElementSelection();
+  const { handleBeforeDelete } = useNodesInteraction.useNodesInteraction();
+  const currentEdgeIdentifiersRef = react$1.useRef();
+  react$1.useLayoutEffect(() => {
+    if (currentEdgeIdentifiersRef.current) {
+      const isSame = edges.every((edge) => currentEdgeIdentifiersRef.current.has(`${edge.id}__${edge.source}__${edge.target}`));
+      if (isSame) {
+        return;
+      }
+    }
+    const layoutedNodes = helper.layoutFlowElements(nodes, edges);
+    setNodes(layoutedNodes);
+    currentEdgeIdentifiersRef.current = new Set(edges.map((edge) => `${edge.id}__${edge.source}__${edge.target}`));
+  }, [edges]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.ReactFlow,
+    {
+      disableKeyboardA11y: true,
+      fitView: true,
+      css: styles.flowEditorStyle,
+      defaultEdgeOptions: constants.defaultEdgeOptions,
+      edges,
+      edgesFocusable: false,
+      edgesReconnectable: false,
+      edgeTypes: constants.edgeTypes,
+      fitViewOptions: constants.fitViewOptions,
+      maxZoom: 2,
+      minZoom: 0.5,
+      multiSelectionKeyCode: null,
+      nodes,
+      nodesConnectable: false,
+      nodesDraggable: false,
+      nodesFocusable: false,
+      nodeTypes: index$1.nodeTypes,
+      panActivationKeyCode: null,
+      selectionKeyCode: null,
+      selectionMode: react.SelectionMode.Partial,
+      zoomActivationKeyCode: null,
+      onBeforeDelete: handleBeforeDelete,
+      onEdgeMouseEnter: handleEdgeMouseEnter,
+      onEdgeMouseLeave: handleEdgeMouseLeave,
+      onEdgesChange,
+      onNodesChange,
+      onSelectionChange: handleSelectionChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.MiniMap, { pannable: true, position: "bottom-left" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Controls, { orientation: "horizontal", position: "bottom-left" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Background, { gap: 12, variant: react.BackgroundVariant.Dots })
+      ]
+    }
+  );
+}
+function VefApprovalFlowEditor(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.flowEditorContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(store.ApprovalFlowEditorStoreProvider, { initialState: null, children: /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VefApprovalFlowEditorBase, { ...props }) }) }) });
+}
+var index = react$1.memo(VefApprovalFlowEditor);
+
+exports.default = index;

package/cjs/vef-approval-flow-editor/models/edge-node.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+"use strict";
+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 {
+}
+
+exports.AbstractFlowEdge = AbstractFlowEdge;
+exports.VefFlowEdge = VefFlowEdge;

package/cjs/vef-approval-flow-editor/models/flow-node.cjs

@@ -0,0 +1,113 @@
+"use strict";
+'use strict';
+
+var types = require('../types.cjs');
+
+"use strict";
+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 AbstractFlowNode {
+  constructor(id, type, label) {
+    __publicField(this, "id");
+    __publicField(this, "type");
+    __publicField(this, "label");
+    this.id = id;
+    this.type = type;
+    this.label = label;
+  }
+  getId() {
+    return this.id;
+  }
+  getType() {
+    return this.type;
+  }
+  getLabel() {
+    return this.label;
+  }
+  setLabel(label) {
+    this.label = label;
+  }
+}
+class VefSubmitFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, types.NodeType.Submit, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [];
+    this._availableNextNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefApprovalFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, types.NodeType.Approval, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+    this._availableNextNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefHandleFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, types.NodeType.Handle, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+    this._availableNextNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefConditionFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, types.NodeType.Condition, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+    this._availableNextNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefEndFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, types.NodeType.End, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [types.NodeType.Approval, types.NodeType.Handle, types.NodeType.Condition];
+    this._availableNextNodeTypes = [];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+
+exports.AbstractFlowNode = AbstractFlowNode;
+exports.VefApprovalFlowNode = VefApprovalFlowNode;
+exports.VefConditionFlowNode = VefConditionFlowNode;
+exports.VefEndFlowNode = VefEndFlowNode;
+exports.VefHandleFlowNode = VefHandleFlowNode;
+exports.VefSubmitFlowNode = VefSubmitFlowNode;