@yh-ui/flow 0.1.21

package/dist/utils/bpmn.cjs

@@ -0,0 +1,492 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bpmnXmlToFlow = bpmnXmlToFlow;
+exports.flowToBpmnXml = flowToBpmnXml;
+exports.generateSampleBpmnXml = generateSampleBpmnXml;
+exports.validateBpmnXml = validateBpmnXml;
+const BPMN_NS = "http://www.omg.org/spec/BPMN/20100524/MODEL";
+const BPMN_DI_NS = "http://www.omg.org/spec/BPMN/20100524/DI";
+const BPMN_DC_NS = "http://www.omg.org/spec/BPMN/20100524/DC";
+const NODE_TYPE_TO_BPMN = {
+  "bpmn-start": "startEvent",
+  "bpmn-end": "endEvent",
+  "bpmn-task": "task",
+  "bpmn-service-task": "serviceTask",
+  "bpmn-user-task": "userTask",
+  "bpmn-exclusive-gateway": "exclusiveGateway",
+  "bpmn-parallel-gateway": "parallelGateway",
+  "bpmn-inclusive-gateway": "inclusiveGateway"
+};
+const BPMN_TO_NODE_TYPE = {
+  startEvent: "bpmn-start",
+  endEvent: "bpmn-end",
+  task: "bpmn-task",
+  serviceTask: "bpmn-service-task",
+  userTask: "bpmn-user-task",
+  exclusiveGateway: "bpmn-exclusive-gateway",
+  parallelGateway: "bpmn-parallel-gateway",
+  inclusiveGateway: "bpmn-inclusive-gateway"
+};
+const GATEWAY_DIRECTION = {
+  "bpmn-exclusive-gateway": "diverging",
+  "bpmn-parallel-gateway": "diverging",
+  "bpmn-inclusive-gateway": "diverging"
+};
+function flowToBpmnXml(nodes, edges, options = {}) {
+  const {
+    processId = "Process_" + Date.now(),
+    processName = "Flow Process",
+    includeDi = true,
+    defaultNodeWidth = 100,
+    defaultNodeHeight = 80
+  } = options;
+  const diBounds = [];
+  const diEdges = [];
+  const bpmnElements = [];
+  for (const node of nodes) {
+    const bpmnType = NODE_TYPE_TO_BPMN[node.type];
+    if (!bpmnType) continue;
+    const nodeWidth = node.width || defaultNodeWidth;
+    const nodeHeight = node.height || defaultNodeHeight;
+    let attributes = `id="${node.id}"`;
+    const label = node.data?.name || node.data?.label || node.id;
+    if (label) {
+      attributes += ` name="${label}"`;
+    }
+    if (bpmnType.includes("Gateway")) {
+      const direction = GATEWAY_DIRECTION[node.type] || "diverging";
+      attributes += ` gatewayDirection="${direction}"`;
+    }
+    if (bpmnType === "serviceTask") {
+      attributes += ` implementation="delegateExpression"`;
+      if (node.data?.implementation) {
+        attributes += ` delegateExpression="${node.data.implementation}"`;
+      }
+    }
+    if (bpmnType === "userTask") {
+      if (node.data?.assignee) {
+        attributes += ` assignee="${node.data.assignee}"`;
+      }
+      if (node.data?.candidateUsers) {
+        attributes += ` candidateUsers="${node.data.candidateUsers}"`;
+      }
+    }
+    bpmnElements.push(`    <bpmn:${bpmnType} ${attributes}/>`);
+    if (includeDi) {
+      diBounds.push({
+        id: `${node.id}_gui`,
+        x: node.position.x,
+        y: node.position.y,
+        width: nodeWidth,
+        height: nodeHeight
+      });
+    }
+  }
+  for (const edge of edges) {
+    let attributes = `id="${edge.id}"`;
+    if (edge.source && edge.target) {
+      attributes += ` sourceRef="${edge.source}" targetRef="${edge.target}"`;
+    }
+    if (edge.type && edge.type !== "default") {
+      const edgeType = edge.type.replace("Edge", "").toLowerCase();
+      if (["smooth", "step", "bezier"].includes(edgeType)) {
+        attributes += ` messageVisibleKind="signal"`;
+      }
+    }
+    if (edge.data?.conditionExpression) {
+      bpmnElements.push(`    <bpmn:sequenceFlow id="${edge.id}" sourceRef="${edge.source}" targetRef="${edge.target}">
+      <bpmn:conditionExpression xsi:type="tFormalExpression" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">${edge.data.conditionExpression}</bpmn:conditionExpression>
+    </bpmn:sequenceFlow>`);
+    } else {
+      bpmnElements.push(`    <bpmn:sequenceFlow ${attributes}/>`);
+    }
+    if (includeDi) {
+      diEdges.push({
+        id: `${edge.id}_di`,
+        sourceRef: edge.source || "",
+        targetRef: edge.target || ""
+      });
+    }
+  }
+  let xml = `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="${BPMN_NS}" xmlns:bpmndi="${BPMN_DI_NS}" xmlns:dc="${BPMN_DC_NS}" xmlns:di="${BPMN_DI_NS}" id="definitions_${processId}" targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn:process id="${processId}" name="${processName}" isExecutable="false">
+${bpmnElements.join("\n")}
+  </bpmn:process>`;
+  if (includeDi) {
+    xml += `
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${processId}">`;
+    for (const bound of diBounds) {
+      xml += `
+      <bpmndi:BPMNShape id="${bound.id}" bpmnElement="${bound.id.replace("_gui", "")}">
+        <dc:Bounds x="${bound.x}" y="${bound.y}" width="${bound.width}" height="${bound.height}"/>
+      </bpmndi:BPMNShape>`;
+    }
+    for (const edge of diEdges) {
+      xml += `
+      <bpmndi:BPMNEdge id="${edge.id}_di" bpmnElement="${edge.id}"/>`;
+    }
+    xml += `
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>`;
+  }
+  xml += `
+</bpmn:definitions>`;
+  return {
+    xml,
+    processId
+  };
+}
+function bpmnXmlToFlow(xml, options = {}) {
+  const {
+    defaultPosition = {
+      x: 100,
+      y: 100
+    },
+    nodeSpacing = 150
+  } = options;
+  const nodes = [];
+  const edges = [];
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xml, "text/xml");
+  const parseError = doc.querySelector("parsererror");
+  if (parseError) {
+    throw new Error(`BPMN XML \u89E3\u6790\u5931\u8D25: ${parseError.textContent}`);
+  }
+  const process = doc.querySelector("bpmn\\:process, process");
+  const processId = process?.getAttribute("id") || "";
+  const processName = process?.getAttribute("name") || "";
+  const diShapes = /* @__PURE__ */new Map();
+  const bpmnShapes = Array.from(doc.querySelectorAll("bpmndi\\:BPMNShape, BPMNShape"));
+  for (const shape of bpmnShapes) {
+    const bpmnElement = shape.getAttribute("bpmnElement");
+    const bounds = shape.querySelector("dc\\:Bounds, Bounds");
+    if (bpmnElement && bounds) {
+      diShapes.set(bpmnElement, {
+        x: parseFloat(bounds.getAttribute("x") || "0"),
+        y: parseFloat(bounds.getAttribute("y") || "0"),
+        width: parseFloat(bounds.getAttribute("width") || "100"),
+        height: parseFloat(bounds.getAttribute("height") || "80")
+      });
+    }
+  }
+  const findBpmnElements = root => {
+    const tags = ["startEvent", "endEvent", "task", "serviceTask", "userTask", "exclusiveGateway", "parallelGateway", "inclusiveGateway"];
+    const elements = [];
+    tags.forEach(tag => {
+      const perTagElements = [];
+      perTagElements.push(...Array.from(root.getElementsByTagNameNS(BPMN_NS, tag)));
+      perTagElements.push(...Array.from(root.getElementsByTagName(tag)).filter(el => !el.prefix));
+      if (perTagElements.length === 0) {
+        perTagElements.push(...Array.from(root.querySelectorAll(`[localName="${tag}"]`)));
+      }
+      elements.push(...perTagElements);
+    });
+    return elements;
+  };
+  const bpmnElements = findBpmnElements(doc);
+  const nodeMap = /* @__PURE__ */new Map();
+  let maxY = defaultPosition.y;
+  for (const element of bpmnElements) {
+    const id = element.getAttribute("id");
+    const name = element.getAttribute("name") || "";
+    const localName = element.localName;
+    const nodeType = BPMN_TO_NODE_TYPE[localName];
+    if (!nodeType || !id) continue;
+    const di = diShapes.get(id);
+    const position = di ? {
+      x: di.x,
+      y: di.y
+    } : {
+      x: defaultPosition.x,
+      y: defaultPosition.y + maxY
+    };
+    const width = di?.width || 100;
+    const height = di?.height || 80;
+    const data = {
+      label: name || id
+    };
+    if (localName === "userTask") {
+      data.assignee = element.getAttribute("assignee") || "";
+      data.candidateUsers = element.getAttribute("candidateUsers") || "";
+    }
+    if (localName === "serviceTask") {
+      data.implementation = element.getAttribute("delegateExpression") || "";
+    }
+    const node = {
+      id,
+      type: nodeType,
+      position,
+      data,
+      width,
+      height,
+      selected: false,
+      dragging: false
+    };
+    nodes.push(node);
+    nodeMap.set(id, {
+      x: position.x,
+      y: position.y,
+      width,
+      height,
+      outgoing: []
+    });
+    maxY += nodeSpacing;
+  }
+  const sequenceFlows = [...Array.from(doc.getElementsByTagNameNS(BPMN_NS, "sequenceFlow")), ...Array.from(doc.getElementsByTagName("sequenceFlow")).filter(el => !el.prefix)];
+  for (const flow of sequenceFlows) {
+    const id = flow.getAttribute("id");
+    const sourceRef = flow.getAttribute("sourceRef");
+    const targetRef = flow.getAttribute("targetRef");
+    if (!id || !sourceRef || !targetRef) continue;
+    const conditionExpr = flow.querySelector("bpmn\\:conditionExpression, conditionExpression");
+    const conditionText = conditionExpr?.textContent?.trim();
+    const sourceNode = nodeMap.get(sourceRef);
+    if (sourceNode) {
+      sourceNode.outgoing.push(id);
+    }
+    const edge = {
+      id,
+      source: sourceRef,
+      target: targetRef,
+      type: "smoothstep",
+      animated: false,
+      selected: false,
+      data: conditionText ? {
+        conditionExpression: conditionText
+      } : {}
+    };
+    edges.push(edge);
+  }
+  if (diShapes.size === 0) {
+    applySimpleLayout(nodes, edges, nodeSpacing);
+  }
+  return {
+    nodes,
+    edges,
+    processId,
+    processName
+  };
+}
+function applySimpleLayout(nodes, edges, spacing) {
+  const inDegree = /* @__PURE__ */new Map();
+  const adjacency = /* @__PURE__ */new Map();
+  for (const node of nodes) {
+    inDegree.set(node.id, 0);
+    adjacency.set(node.id, []);
+  }
+  for (const edge of edges) {
+    if (edge.source && edge.target) {
+      const current = inDegree.get(edge.target) || 0;
+      inDegree.set(edge.target, current + 1);
+      const outgoing = adjacency.get(edge.source) || [];
+      outgoing.push(edge.target);
+      adjacency.set(edge.source, outgoing);
+    }
+  }
+  const queue = [];
+  for (const [nodeId, degree] of inDegree) {
+    if (degree === 0) queue.push(nodeId);
+  }
+  const levels = /* @__PURE__ */new Map();
+  const visited = /* @__PURE__ */new Set();
+  let level = 0;
+  while (queue.length > 0) {
+    const levelSize = queue.length;
+    for (let i = 0; i < levelSize; i++) {
+      const nodeId = queue.shift();
+      if (visited.has(nodeId)) continue;
+      visited.add(nodeId);
+      levels.set(nodeId, level);
+      const outgoing = adjacency.get(nodeId) || [];
+      for (const targetId of outgoing) {
+        if (!visited.has(targetId)) {
+          queue.push(targetId);
+        }
+      }
+    }
+    level++;
+  }
+  for (const node of nodes) {
+    if (!levels.has(node.id)) {
+      levels.set(node.id, level);
+    }
+  }
+  const levelNodes = /* @__PURE__ */new Map();
+  for (const node of nodes) {
+    const l = levels.get(node.id) || 0;
+    const nodesAtLevel = levelNodes.get(l) || [];
+    nodesAtLevel.push(node);
+    levelNodes.set(l, nodesAtLevel);
+  }
+  for (const [l, nodesAtLevel] of levelNodes) {
+    nodesAtLevel.forEach((node, index) => {
+      node.position = {
+        x: 100 + l * 250,
+        y: 100 + index * spacing
+      };
+    });
+  }
+}
+function validateBpmnXml(xml) {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xml, "text/xml");
+    const parseError = doc.querySelector("parsererror");
+    if (parseError) {
+      return {
+        valid: false,
+        error: "XML \u683C\u5F0F\u9519\u8BEF"
+      };
+    }
+    const definitions = doc.querySelector("bpmn\\:definitions, definitions");
+    if (!definitions) {
+      return {
+        valid: false,
+        error: "\u7F3A\u5C11 BPMN definitions \u6839\u5143\u7D20"
+      };
+    }
+    const process = doc.querySelector("bpmn\\:process, process");
+    if (!process) {
+      return {
+        valid: false,
+        error: "\u7F3A\u5C11 BPMN process \u5143\u7D20"
+      };
+    }
+    return {
+      valid: true
+    };
+  } catch (e) {
+    return {
+      valid: false,
+      error: e instanceof Error ? e.message : "\u672A\u77E5\u9519\u8BEF"
+    };
+  }
+}
+function generateSampleBpmnXml() {
+  const sampleNodes = [{
+    id: "start",
+    type: "bpmn-start",
+    position: {
+      x: 100,
+      y: 200
+    },
+    data: {
+      label: "\u5F00\u59CB",
+      name: "\u5F00\u59CB"
+    },
+    width: 40,
+    height: 40,
+    selected: false,
+    dragging: false
+  }, {
+    id: "task1",
+    type: "bpmn-user-task",
+    position: {
+      x: 250,
+      y: 180
+    },
+    data: {
+      label: "\u5BA1\u6279\u4EFB\u52A1",
+      name: "\u5BA1\u6279\u4EFB\u52A1",
+      assignee: "admin"
+    },
+    width: 120,
+    height: 80,
+    selected: false,
+    dragging: false
+  }, {
+    id: "gateway",
+    type: "bpmn-exclusive-gateway",
+    position: {
+      x: 450,
+      y: 200
+    },
+    data: {
+      label: "\u662F\u5426\u901A\u8FC7",
+      name: "\u662F\u5426\u901A\u8FC7"
+    },
+    width: 50,
+    height: 50,
+    selected: false,
+    dragging: false
+  }, {
+    id: "task2",
+    type: "bpmn-service-task",
+    position: {
+      x: 600,
+      y: 100
+    },
+    data: {
+      label: "\u5904\u7406\u4E1A\u52A1",
+      name: "\u5904\u7406\u4E1A\u52A1",
+      implementation: "${myService}"
+    },
+    width: 120,
+    height: 80,
+    selected: false,
+    dragging: false
+  }, {
+    id: "end",
+    type: "bpmn-end",
+    position: {
+      x: 800,
+      y: 200
+    },
+    data: {
+      label: "\u7ED3\u675F",
+      name: "\u7ED3\u675F"
+    },
+    width: 40,
+    height: 40,
+    selected: false,
+    dragging: false
+  }];
+  const sampleEdges = [{
+    id: "e1",
+    source: "start",
+    target: "task1",
+    type: "smoothstep",
+    selected: false,
+    animated: false
+  }, {
+    id: "e2",
+    source: "task1",
+    target: "gateway",
+    type: "smoothstep",
+    selected: false,
+    animated: false
+  }, {
+    id: "e3",
+    source: "gateway",
+    target: "task2",
+    type: "smoothstep",
+    selected: false,
+    animated: false,
+    data: {
+      conditionExpression: "${approved == true}"
+    }
+  }, {
+    id: "e4",
+    source: "gateway",
+    target: "end",
+    type: "smoothstep",
+    selected: false,
+    animated: false
+  }, {
+    id: "e5",
+    source: "task2",
+    target: "end",
+    type: "smooth",
+    selected: false,
+    animated: false
+  }];
+  return flowToBpmnXml(sampleNodes, sampleEdges, {
+    processId: "SampleProcess",
+    processName: "\u793A\u4F8B\u6D41\u7A0B"
+  }).xml;
+}

package/dist/utils/bpmn.d.ts

@@ -0,0 +1,53 @@
+/**
+ * ============================================
+ * BPMN XML Import/Export Utility
+ * 支持 BPMN 2.0 标准的 XML 导入导出
+ * ============================================
+ */
+import type { Node, Edge } from '../types';
+export interface BpmnXmlOptions {
+    /** BPMN 流程 ID */
+    processId?: string;
+    /** BPMN 流程名称 */
+    processName?: string;
+    /** 是否包含 DI (图形信息) */
+    includeDi?: boolean;
+    /** 默认节点宽度 */
+    defaultNodeWidth?: number;
+    /** 默认节点高度 */
+    defaultNodeHeight?: number;
+}
+export interface BpmnExportResult {
+    xml: string;
+    processId: string;
+}
+/**
+ * 将 Flow 数据转换为 BPMN XML
+ */
+export declare function flowToBpmnXml(nodes: Node[], edges: Edge[], options?: BpmnXmlOptions): BpmnExportResult;
+/**
+ * 将 BPMN XML 解析为 Flow 数据
+ */
+export declare function bpmnXmlToFlow(xml: string, options?: {
+    defaultPosition?: {
+        x: number;
+        y: number;
+    };
+    nodeSpacing?: number;
+}): {
+    nodes: Node[];
+    edges: Edge[];
+    processId?: string;
+    processName?: string;
+};
+/**
+ * 验证 BPMN XML 格式
+ */
+export declare function validateBpmnXml(xml: string): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * 从 Flow 数据生成示例 BPMN XML
+ */
+export declare function generateSampleBpmnXml(): string;