@yh-ui/flow 1.0.1 → 1.0.4

package/dist/__tests__/viewport-types.test.mjs

@@ -0,0 +1,207 @@
+import { describe, it, expect } from "vitest";
+import {
+  getViewportForBounds,
+  project,
+  unproject,
+  isNodeVisible
+} from "../types/viewport.mjs";
+describe("flow/types/viewport", () => {
+  describe("ViewportTransform", () => {
+    it("should define viewport with x, y, zoom", () => {
+      const transform = { x: 100, y: 50, zoom: 1.5 };
+      expect(transform.x).toBe(100);
+      expect(transform.y).toBe(50);
+      expect(transform.zoom).toBe(1.5);
+    });
+    it("should allow negative coordinates", () => {
+      const transform = { x: -100, y: -50, zoom: 0.5 };
+      expect(transform.x).toBe(-100);
+      expect(transform.y).toBe(-50);
+    });
+    it("should allow zoom less than 1", () => {
+      const transform = { x: 0, y: 0, zoom: 0.1 };
+      expect(transform.zoom).toBe(0.1);
+    });
+    it("should allow zoom greater than 1", () => {
+      const transform = { x: 0, y: 0, zoom: 5 };
+      expect(transform.zoom).toBe(5);
+    });
+  });
+  describe("ViewportOptions", () => {
+    it("should define full viewport options", () => {
+      const options = {
+        minZoom: 0.1,
+        maxZoom: 5,
+        translateExtent: [[0, 0], [1e3, 1e3]],
+        zoomStep: 0.1,
+        panZoomSpeed: 1,
+        zoomInMultiplier: 1.2,
+        zoomOutMultiplier: 0.8,
+        panning: true,
+        zooming: true,
+        zoomOnScroll: true,
+        zoomOnPinch: true,
+        panOnScroll: true,
+        panOnDrag: true,
+        fitViewOnInit: true,
+        fitViewOnInitOptions: { padding: 0.2 }
+      };
+      expect(options.minZoom).toBe(0.1);
+      expect(options.maxZoom).toBe(5);
+      expect(options.fitViewOnInit).toBe(true);
+    });
+    it("should allow partial options", () => {
+      const options = {
+        minZoom: 0.2,
+        maxZoom: 3
+      };
+      expect(options.minZoom).toBe(0.2);
+      expect(options.maxZoom).toBe(3);
+    });
+  });
+  describe("FitViewOptions", () => {
+    it("should define fit view options", () => {
+      const options = {
+        padding: 0.3,
+        includeHiddenNodes: false,
+        minZoom: 0.5,
+        maxZoom: 2
+      };
+      expect(options.padding).toBe(0.3);
+      expect(options.includeHiddenNodes).toBe(false);
+    });
+  });
+  describe("ScreenToFlowPositionOptions", () => {
+    it("should define screen to flow position options", () => {
+      const options = {
+        offset: { x: 10, y: 20 },
+        snapToGrid: true,
+        gridSize: 15
+      };
+      expect(options.offset?.x).toBe(10);
+      expect(options.snapToGrid).toBe(true);
+      expect(options.gridSize).toBe(15);
+    });
+  });
+  describe("getViewportForBounds", () => {
+    it("should calculate viewport to fit bounds within container", () => {
+      const bounds = { x: 0, y: 0, width: 200, height: 200 };
+      const viewport = getViewportForBounds(bounds, 800, 600, 0.1, 5, 0.2);
+      expect(viewport).toHaveProperty("x");
+      expect(viewport).toHaveProperty("y");
+      expect(viewport).toHaveProperty("zoom");
+      expect(viewport.zoom).toBeGreaterThanOrEqual(0.1);
+      expect(viewport.zoom).toBeLessThanOrEqual(5);
+    });
+    it("should use default padding of 0.2", () => {
+      const bounds = { x: 100, y: 100, width: 100, height: 100 };
+      const viewport1 = getViewportForBounds(bounds, 400, 300, 0.1, 5);
+      const viewport2 = getViewportForBounds(bounds, 400, 300, 0.1, 5, 0.2);
+      expect(viewport1.zoom).toBe(viewport2.zoom);
+    });
+    it("should handle bounds at origin", () => {
+      const bounds = { x: 0, y: 0, width: 100, height: 50 };
+      const viewport = getViewportForBounds(bounds, 800, 400, 0.1, 5, 0.1);
+      expect(viewport.zoom).toBeGreaterThan(0);
+    });
+    it("should respect minZoom constraint", () => {
+      const bounds = { x: 0, y: 0, width: 1e4, height: 1e4 };
+      const viewport = getViewportForBounds(bounds, 800, 600, 0.5, 5, 0.2);
+      expect(viewport.zoom).toBeGreaterThanOrEqual(0.5);
+    });
+    it("should respect maxZoom constraint", () => {
+      const bounds = { x: 0, y: 0, width: 10, height: 10 };
+      const viewport = getViewportForBounds(bounds, 800, 600, 0.1, 2, 0.2);
+      expect(viewport.zoom).toBeLessThanOrEqual(2);
+    });
+  });
+  describe("project", () => {
+    it("should project screen coordinates to canvas coordinates", () => {
+      const transform = { x: 100, y: 50, zoom: 2 };
+      const screenPos = { x: 300, y: 250 };
+      const canvasPos = project(screenPos, transform);
+      expect(canvasPos).toEqual({ x: 100, y: 100 });
+    });
+    it("should handle zoom of 1", () => {
+      const transform = { x: 0, y: 0, zoom: 1 };
+      const screenPos = { x: 100, y: 200 };
+      const canvasPos = project(screenPos, transform);
+      expect(canvasPos).toEqual({ x: 100, y: 200 });
+    });
+    it("should handle negative viewport offset", () => {
+      const transform = { x: -100, y: -50, zoom: 1 };
+      const screenPos = { x: 0, y: 0 };
+      const canvasPos = project(screenPos, transform);
+      expect(canvasPos.x).toBe(100);
+      expect(canvasPos.y).toBe(50);
+    });
+    it("should handle fractional zoom", () => {
+      const transform = { x: 0, y: 0, zoom: 0.5 };
+      const screenPos = { x: 100, y: 100 };
+      const canvasPos = project(screenPos, transform);
+      expect(canvasPos.x).toBe(200);
+      expect(canvasPos.y).toBe(200);
+    });
+  });
+  describe("unproject", () => {
+    it("should unproject canvas coordinates to screen coordinates", () => {
+      const transform = { x: 100, y: 50, zoom: 2 };
+      const canvasPos = { x: 100, y: 100 };
+      const screenPos = unproject(canvasPos, transform);
+      expect(screenPos).toEqual({ x: 300, y: 250 });
+    });
+    it("should be inverse of project", () => {
+      const transform = { x: 100, y: 50, zoom: 2 };
+      const originalScreen = { x: 500, y: 300 };
+      const canvas = project(originalScreen, transform);
+      const restored = unproject(canvas, transform);
+      expect(restored).toEqual(originalScreen);
+    });
+  });
+  describe("isNodeVisible", () => {
+    const transform = { x: 0, y: 0, zoom: 1 };
+    const viewportWidth = 800;
+    const viewportHeight = 600;
+    it("should return true for node within viewport", () => {
+      const node = {
+        position: { x: 100, y: 100 },
+        width: 100,
+        height: 100
+      };
+      expect(isNodeVisible(node, transform, viewportWidth, viewportHeight)).toBe(true);
+    });
+    it("should return true for node at viewport edge", () => {
+      const node = {
+        position: { x: 0, y: 0 },
+        width: 100,
+        height: 100
+      };
+      expect(isNodeVisible(node, transform, viewportWidth, viewportHeight)).toBe(true);
+    });
+    it("should return false for node completely outside viewport", () => {
+      const node = {
+        position: { x: 2e3, y: 2e3 },
+        width: 100,
+        height: 100
+      };
+      expect(isNodeVisible(node, transform, viewportWidth, viewportHeight)).toBe(false);
+    });
+    it("should return true for node with zero dimensions", () => {
+      const node = {
+        position: { x: 100, y: 100 },
+        width: 0,
+        height: 0
+      };
+      expect(isNodeVisible(node, transform, viewportWidth, viewportHeight)).toBe(true);
+    });
+    it("should handle zoomed viewport", () => {
+      const zoomedTransform = { x: 0, y: 0, zoom: 2 };
+      const node = {
+        position: { x: 100, y: 100 },
+        width: 100,
+        height: 100
+      };
+      expect(isNodeVisible(node, zoomedTransform, viewportWidth, viewportHeight)).toBe(true);
+    });
+  });
+});

package/dist/utils/bpmn.cjs

@@ -10,6 +10,23 @@ 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";
+function firstByLocalNS(doc, ns, localName) {
+  const all = allByLocalNS(doc, ns, localName);
+  return all.length > 0 ? all[0] : null;
+}
+function allByLocalNS(root, ns, localName) {
+  const fromNs = root.getElementsByTagNameNS(ns, localName);
+  if (fromNs.length > 0) return Array.from(fromNs);
+  const out = [];
+  const all = root.getElementsByTagName("*");
+  for (let i = 0; i < all.length; i++) {
+    const el = all[i];
+    if (el.localName === localName && el.namespaceURI === ns) {
+      out.push(el);
+    }
+  }
+  return out;
+}
 const NODE_TYPE_TO_BPMN = {
   "bpmn-start": "startEvent",
   "bpmn-end": "endEvent",
@@ -169,14 +186,14 @@ function bpmnXmlToFlow(xml, options = {}) {
   if (parseError) {
     throw new Error(`BPMN XML \u89E3\u6790\u5931\u8D25: ${parseError.textContent}`);
   }
-  const process = doc.querySelector("bpmn\\:process, process");
+  const process = firstByLocalNS(doc, BPMN_NS, "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"));
+  const bpmnShapes = allByLocalNS(doc, BPMN_DI_NS, "BPMNShape");
   for (const shape of bpmnShapes) {
     const bpmnElement = shape.getAttribute("bpmnElement");
-    const bounds = shape.querySelector("dc\\:Bounds, Bounds");
+    const bounds = firstByLocalNS(shape, BPMN_DC_NS, "Bounds");
     if (bpmnElement && bounds) {
       diShapes.set(bpmnElement, {
         x: parseFloat(bounds.getAttribute("x") || "0"),
@@ -189,15 +206,9 @@ function bpmnXmlToFlow(xml, options = {}) {
   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);
-    });
+    for (const tag of tags) {
+      elements.push(...allByLocalNS(root, BPMN_NS, tag));
+    }
     return elements;
   };
   const bpmnElements = findBpmnElements(doc);
@@ -249,13 +260,13 @@ function bpmnXmlToFlow(xml, options = {}) {
     });
     maxY += nodeSpacing;
   }
-  const sequenceFlows = [...Array.from(doc.getElementsByTagNameNS(BPMN_NS, "sequenceFlow")), ...Array.from(doc.getElementsByTagName("sequenceFlow")).filter(el => !el.prefix)];
+  const sequenceFlows = allByLocalNS(doc, BPMN_NS, "sequenceFlow");
   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 conditionExpr = firstByLocalNS(flow, BPMN_NS, "conditionExpression");
     const conditionText = conditionExpr?.textContent?.trim();
     const sourceNode = nodeMap.get(sourceRef);
     if (sourceNode) {
@@ -361,14 +372,14 @@ function validateBpmnXml(xml) {
         error: "XML \u683C\u5F0F\u9519\u8BEF"
       };
     }
-    const definitions = doc.querySelector("bpmn\\:definitions, definitions");
+    const definitions = firstByLocalNS(doc, BPMN_NS, "definitions");
     if (!definitions) {
       return {
         valid: false,
         error: "\u7F3A\u5C11 BPMN definitions \u6839\u5143\u7D20"
       };
     }
-    const process = doc.querySelector("bpmn\\:process, process");
+    const process = firstByLocalNS(doc, BPMN_NS, "process");
     if (!process) {
       return {
         valid: false,

package/dist/utils/bpmn.mjs

@@ -1,6 +1,23 @@
 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";
+function firstByLocalNS(doc, ns, localName) {
+  const all = allByLocalNS(doc, ns, localName);
+  return all.length > 0 ? all[0] : null;
+}
+function allByLocalNS(root, ns, localName) {
+  const fromNs = root.getElementsByTagNameNS(ns, localName);
+  if (fromNs.length > 0) return Array.from(fromNs);
+  const out = [];
+  const all = root.getElementsByTagName("*");
+  for (let i = 0; i < all.length; i++) {
+    const el = all[i];
+    if (el.localName === localName && el.namespaceURI === ns) {
+      out.push(el);
+    }
+  }
+  return out;
+}
 const NODE_TYPE_TO_BPMN = {
   "bpmn-start": "startEvent",
   "bpmn-end": "endEvent",
@@ -150,14 +167,14 @@ export function bpmnXmlToFlow(xml, options = {}) {
   if (parseError) {
     throw new Error(`BPMN XML \u89E3\u6790\u5931\u8D25: ${parseError.textContent}`);
   }
-  const process = doc.querySelector("bpmn\\:process, process");
+  const process = firstByLocalNS(doc, BPMN_NS, "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"));
+  const bpmnShapes = allByLocalNS(doc, BPMN_DI_NS, "BPMNShape");
   for (const shape of bpmnShapes) {
     const bpmnElement = shape.getAttribute("bpmnElement");
-    const bounds = shape.querySelector("dc\\:Bounds, Bounds");
+    const bounds = firstByLocalNS(shape, BPMN_DC_NS, "Bounds");
     if (bpmnElement && bounds) {
       diShapes.set(bpmnElement, {
         x: parseFloat(bounds.getAttribute("x") || "0"),
@@ -179,15 +196,9 @@ export function bpmnXmlToFlow(xml, options = {}) {
       "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);
-    });
+    for (const tag of tags) {
+      elements.push(...allByLocalNS(root, BPMN_NS, tag));
+    }
     return elements;
   };
   const bpmnElements = findBpmnElements(doc);
@@ -231,16 +242,13 @@ export function bpmnXmlToFlow(xml, options = {}) {
     });
     maxY += nodeSpacing;
   }
-  const sequenceFlows = [
-    ...Array.from(doc.getElementsByTagNameNS(BPMN_NS, "sequenceFlow")),
-    ...Array.from(doc.getElementsByTagName("sequenceFlow")).filter((el) => !el.prefix)
-  ];
+  const sequenceFlows = allByLocalNS(doc, BPMN_NS, "sequenceFlow");
   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 conditionExpr = firstByLocalNS(flow, BPMN_NS, "conditionExpression");
     const conditionText = conditionExpr?.textContent?.trim();
     const sourceNode = nodeMap.get(sourceRef);
     if (sourceNode) {
@@ -333,11 +341,11 @@ export function validateBpmnXml(xml) {
     if (parseError) {
       return { valid: false, error: "XML \u683C\u5F0F\u9519\u8BEF" };
     }
-    const definitions = doc.querySelector("bpmn\\:definitions, definitions");
+    const definitions = firstByLocalNS(doc, BPMN_NS, "definitions");
     if (!definitions) {
       return { valid: false, error: "\u7F3A\u5C11 BPMN definitions \u6839\u5143\u7D20" };
     }
-    const process = doc.querySelector("bpmn\\:process, process");
+    const process = firstByLocalNS(doc, BPMN_NS, "process");
     if (!process) {
       return { valid: false, error: "\u7F3A\u5C11 BPMN process \u5143\u7D20" };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/flow",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "YH-UI High-performance Flow Chart Component",
   "type": "module",
   "sideEffects": false,
@@ -23,8 +23,8 @@
     "dist"
   ],
   "dependencies": {
-    "@yh-ui/utils": "^1.0.1",
-    "@yh-ui/hooks": "^1.0.1"
+    "@yh-ui/utils": "^1.0.4",
+    "@yh-ui/hooks": "^1.0.4"
   },
   "devDependencies": {
     "vue": "^3.5.27",