@vef-framework/components 1.0.122 → 1.0.123

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

@@ -0,0 +1,219 @@
+"use strict";
+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';
+
+"use strict";
+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 };

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

@@ -0,0 +1,84 @@
+"use strict";
+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';
+
+"use strict";
+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 };

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

@@ -0,0 +1,26 @@
+"use strict";
+import { useReactFlow } from '@xyflow/react';
+import { useCallback } from 'react';
+
+"use strict";
+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 };

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

@@ -0,0 +1,25 @@
+"use strict";
+import { useCallback } from 'react';
+import { useApprovalFlowEditorStoreApi } from '../store.js';
+
+"use strict";
+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 };

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

@@ -0,0 +1,52 @@
+"use strict";
+import { useReactFlow, getConnectedEdges } from '@xyflow/react';
+import { useCallback } from 'react';
+import { createEdge } from '../helper.js';
+import { NodeType } from '../types.js';
+
+"use strict";
+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 };

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

@@ -0,0 +1,76 @@
+"use strict";
+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';
+
+"use strict";
+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 }) }) }) });
+}
+var index = memo(VefApprovalFlowEditor);
+
+export { index as default };

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

@@ -0,0 +1,21 @@
+"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 {
+}
+
+export { AbstractFlowEdge, VefFlowEdge };

package/esm/vef-approval-flow-editor/models/flow-node.js

@@ -0,0 +1,106 @@
+"use strict";
+import { NodeType } from '../types.js';
+
+"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, NodeType.Submit, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [];
+    this._availableNextNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefApprovalFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, NodeType.Approval, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+    this._availableNextNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefHandleFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, NodeType.Handle, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+    this._availableNextNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefConditionFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, NodeType.Condition, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+    this._availableNextNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+class VefEndFlowNode extends AbstractFlowNode {
+  constructor(id, label) {
+    super(id, NodeType.End, label);
+    __publicField(this, "_availablePreviousNodeTypes");
+    __publicField(this, "_availableNextNodeTypes");
+    this._availablePreviousNodeTypes = [NodeType.Approval, NodeType.Handle, NodeType.Condition];
+    this._availableNextNodeTypes = [];
+  }
+  getAvailablePreviousNodeTypes() {
+    return this._availablePreviousNodeTypes;
+  }
+  getAvailableNextNodeTypes() {
+    return this._availableNextNodeTypes;
+  }
+}
+
+export { AbstractFlowNode, VefApprovalFlowNode, VefConditionFlowNode, VefEndFlowNode, VefHandleFlowNode, VefSubmitFlowNode };

package/esm/vef-approval-flow-editor/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-approval-flow-editor/store.js

@@ -0,0 +1,17 @@
+"use strict";
+import { createComponentStore } from '@vef-framework/shared';
+
+"use strict";
+const {
+  StoreProvider: ApprovalFlowEditorStoreProvider,
+  useStore: useApprovalFlowEditorStore,
+  useStoreApi: useApprovalFlowEditorStoreApi
+} = createComponentStore(
+  "ApprovalFlowEditor",
+  () => (set) => ({
+    selectedNode: null,
+    setSelectedNode: (selectedNode) => set({ selectedNode })
+  })
+);
+
+export { ApprovalFlowEditorStoreProvider, useApprovalFlowEditorStore, useApprovalFlowEditorStoreApi };

package/esm/vef-approval-flow-editor/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+import { css } from '@emotion/react';
+import { themeVariables } from '@vef-framework/shared';
+import flowStyle from '../internal/base.css.js';
+
+"use strict";
+const flowEditorContainerStyle = css`
+  height: 80%;
+
+  ${flowStyle}
+`;
+const flowEditorStyle = css`
+  --xy-edge-stroke-width: 2px;
+  --xy-edge-stroke: rgb(177, 177, 183);
+  --xy-edge-stroke-selected: rgb(177, 177, 183);
+
+  .react-flow__attribution {
+    display: none;
+  }
+  .react-flow__nodesselection-rect,
+  .react-flow__selection {
+    background-color: oklch(from ${themeVariables.colorPrimary} l c h / 0.06);
+    border: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorPrimary};
+    border-radius: ${themeVariables.borderRadius};
+  }
+
+  .react-flow__node {
+    width: 240px;
+    border-radius: ${themeVariables.borderRadiusLg};
+    padding: ${themeVariables.paddingSm};
+    background-color: ${themeVariables.colorBgContainer};
+
+    &:hover:not(.selected) {
+      box-shadow: ${themeVariables.boxShadowElevated};
+    }
+
+    &.selected {
+      outline: 2px ${themeVariables.lineType} ${themeVariables.colorPrimary};
+      outline-offset: -2px;
+    }
+  }
+
+  .react-flow__handle {
+    min-width: 12px;
+    min-height: 12px;
+    background-color: transparent;
+  }
+`;
+
+export { flowEditorContainerStyle, flowEditorStyle };

package/esm/vef-approval-flow-editor/types.js

@@ -0,0 +1,16 @@
+"use strict";
+"use strict";
+var NodeType = /* @__PURE__ */ ((NodeType2) => {
+  NodeType2["Submit"] = "submit";
+  NodeType2["Approval"] = "approval";
+  NodeType2["Handle"] = "handle";
+  NodeType2["Condition"] = "condition";
+  NodeType2["End"] = "end";
+  return NodeType2;
+})(NodeType || {});
+var EdgeType = /* @__PURE__ */ ((EdgeType2) => {
+  EdgeType2["Vef"] = "vef";
+  return EdgeType2;
+})(EdgeType || {});
+
+export { EdgeType, NodeType };