@yh-ui/flow 1.0.26 → 1.0.30

package/dist/__tests__/useSelection.test.mjs

@@ -1,76 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { ref } from "vue";
-import { useSelection } from "../core/useSelection.mjs";
-const node = (id, x, y, w = 100, h = 50) => ({
-  id,
-  type: "default",
-  position: { x, y },
-  data: {},
-  width: w,
-  height: h,
-  selected: false
-});
-const edge = (id, source, target) => ({
-  id,
-  source,
-  target,
-  type: "bezier",
-  selected: false
-});
-describe("flow/core/useSelection", () => {
-  it("should start and update selection rect", () => {
-    const nodes = ref([node("1", 0, 0), node("2", 200, 100)]);
-    const edges = ref([]);
-    const s = useSelection({ nodes, edges });
-    s.startSelection(10, 20);
-    expect(s.isSelecting.value).toBe(true);
-    expect(s.selectionRect.value).toEqual({ x: 10, y: 20, width: 0, height: 0 });
-    s.updateSelection(50, 60);
-    expect(s.selectionRect.value).toEqual({ x: 10, y: 20, width: 40, height: 40 });
-  });
-  it("should select nodes inside rect on updateSelection", () => {
-    const nodes = ref([node("1", 20, 20, 50, 50), node("2", 100, 100, 50, 50)]);
-    const edges = ref([]);
-    const s = useSelection({ nodes, edges });
-    s.startSelection(0, 0);
-    s.updateSelection(80, 80);
-    expect(nodes.value.find((n) => n.id === "1")?.selected).toBe(true);
-    expect(nodes.value.find((n) => n.id === "2")?.selected).toBe(false);
-  });
-  it("should end selection and clear rect", () => {
-    const nodes = ref([node("1", 0, 0)]);
-    const edges = ref([]);
-    const s = useSelection({ nodes, edges });
-    s.startSelection(0, 0);
-    s.updateSelection(10, 10);
-    s.endSelection();
-    expect(s.isSelecting.value).toBe(false);
-    expect(s.selectionRect.value).toBeNull();
-  });
-  it("should clearSelection clear nodes and edges selected", () => {
-    const nodes = ref([{ ...node("1", 0, 0), selected: true }]);
-    const edges = ref([{ ...edge("e1", "1", "2"), selected: true }]);
-    const s = useSelection({ nodes, edges });
-    s.clearSelection();
-    expect(nodes.value[0].selected).toBeFalsy();
-    expect(edges.value[0].selected).toBeFalsy();
-  });
-  it("should call onSelectionChange on endSelection", () => {
-    const nodes = ref([node("1", 20, 20, 50, 50)]);
-    const edges = ref([]);
-    let captured = null;
-    const s = useSelection({
-      nodes,
-      edges,
-      onSelectionChange: (selectedNodes, selectedEdges) => {
-        captured = { nodes: selectedNodes, edges: selectedEdges };
-      }
-    });
-    s.startSelection(0, 0);
-    s.updateSelection(80, 80);
-    s.endSelection();
-    expect(captured).not.toBeNull();
-    expect(Array.isArray(captured.nodes)).toBe(true);
-    expect(Array.isArray(captured.edges)).toBe(true);
-  });
-});

package/dist/__tests__/useViewport.test.cjs

@@ -1,171 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _vue = require("vue");
-var _useViewport = require("../core/useViewport.cjs");
-(0, _vitest.describe)("flow/core/useViewport", () => {
-  (0, _vitest.it)("should set viewport and clamp zoom to min/max", () => {
-    const transform = (0, _vue.ref)({
-      x: 0,
-      y: 0,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform, {
-      minZoom: 0.2,
-      maxZoom: 4
-    });
-    v.setViewport(10, 20, 2);
-    (0, _vitest.expect)(transform.value).toEqual({
-      x: 10,
-      y: 20,
-      zoom: 2
-    });
-    v.setViewport(0, 0, 0.1);
-    (0, _vitest.expect)(transform.value.zoom).toBe(0.2);
-    v.setViewport(0, 0, 10);
-    (0, _vitest.expect)(transform.value.zoom).toBe(4);
-  });
-  (0, _vitest.it)("should zoom in and out", () => {
-    const transform = (0, _vue.ref)({
-      x: 0,
-      y: 0,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform, {
-      minZoom: 0.1,
-      maxZoom: 5
-    });
-    v.zoomIn(2);
-    (0, _vitest.expect)(transform.value.zoom).toBe(2);
-    v.zoomOut(2);
-    (0, _vitest.expect)(transform.value.zoom).toBe(1);
-  });
-  (0, _vitest.it)("should pan", () => {
-    const transform = (0, _vue.ref)({
-      x: 0,
-      y: 0,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform);
-    v.pan(50, 30);
-    (0, _vitest.expect)(transform.value.x).toBe(50);
-    (0, _vitest.expect)(transform.value.y).toBe(30);
-  });
-  (0, _vitest.it)("should panTo", () => {
-    const transform = (0, _vue.ref)({
-      x: 0,
-      y: 0,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform);
-    v.panTo(100, 200);
-    (0, _vitest.expect)(transform.value.x).toBe(100);
-    (0, _vitest.expect)(transform.value.y).toBe(200);
-  });
-  (0, _vitest.it)("should fitView to contain nodes", () => {
-    const transform = (0, _vue.ref)({
-      x: 0,
-      y: 0,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform, {
-      minZoom: 0.1,
-      maxZoom: 5
-    });
-    const nodes = [{
-      position: {
-        x: 0,
-        y: 0
-      },
-      width: 100,
-      height: 50
-    }, {
-      position: {
-        x: 200,
-        y: 100
-      },
-      width: 100,
-      height: 50
-    }];
-    v.fitView({
-      width: 400,
-      height: 300
-    }, nodes, {
-      padding: 20
-    });
-    (0, _vitest.expect)(transform.value.zoom).toBeLessThanOrEqual(1);
-    (0, _vitest.expect)(typeof transform.value.x).toBe("number");
-    (0, _vitest.expect)(typeof transform.value.y).toBe("number");
-  });
-  (0, _vitest.it)("should not fitView when nodes empty", () => {
-    const transform = (0, _vue.ref)({
-      x: 50,
-      y: 50,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform);
-    v.fitView({
-      width: 400,
-      height: 300
-    }, [], {
-      padding: 20
-    });
-    (0, _vitest.expect)(transform.value).toEqual({
-      x: 50,
-      y: 50,
-      zoom: 1
-    });
-  });
-  (0, _vitest.it)("screenToCanvas and canvasToScreen should be inverse", () => {
-    const transform = (0, _vue.ref)({
-      x: 100,
-      y: 50,
-      zoom: 2
-    });
-    const v = (0, _useViewport.useViewport)(transform);
-    const screen = {
-      x: 300,
-      y: 250
-    };
-    const canvas = v.screenToCanvas(screen.x, screen.y);
-    const back = v.canvasToScreen(canvas.x, canvas.y);
-    (0, _vitest.expect)(back.x).toBe(screen.x);
-    (0, _vitest.expect)(back.y).toBe(screen.y);
-  });
-  (0, _vitest.it)("isNodeVisible should return true when node in view", () => {
-    const transform = (0, _vue.ref)({
-      x: 0,
-      y: 0,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform);
-    const visible = v.isNodeVisible({
-      x: 50,
-      y: 50,
-      width: 100,
-      height: 50
-    }, {
-      width: 800,
-      height: 600
-    });
-    (0, _vitest.expect)(visible).toBe(true);
-  });
-  (0, _vitest.it)("isNodeVisible should return false when node outside view", () => {
-    const transform = (0, _vue.ref)({
-      x: -2e3,
-      y: 0,
-      zoom: 1
-    });
-    const v = (0, _useViewport.useViewport)(transform);
-    const visible = v.isNodeVisible({
-      x: 50,
-      y: 50,
-      width: 100,
-      height: 50
-    }, {
-      width: 800,
-      height: 600
-    });
-    (0, _vitest.expect)(visible).toBe(false);
-  });
-});

package/dist/__tests__/useViewport.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/__tests__/useViewport.test.mjs

@@ -1,82 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { ref } from "vue";
-import { useViewport } from "../core/useViewport.mjs";
-describe("flow/core/useViewport", () => {
-  it("should set viewport and clamp zoom to min/max", () => {
-    const transform = ref({ x: 0, y: 0, zoom: 1 });
-    const v = useViewport(transform, { minZoom: 0.2, maxZoom: 4 });
-    v.setViewport(10, 20, 2);
-    expect(transform.value).toEqual({ x: 10, y: 20, zoom: 2 });
-    v.setViewport(0, 0, 0.1);
-    expect(transform.value.zoom).toBe(0.2);
-    v.setViewport(0, 0, 10);
-    expect(transform.value.zoom).toBe(4);
-  });
-  it("should zoom in and out", () => {
-    const transform = ref({ x: 0, y: 0, zoom: 1 });
-    const v = useViewport(transform, { minZoom: 0.1, maxZoom: 5 });
-    v.zoomIn(2);
-    expect(transform.value.zoom).toBe(2);
-    v.zoomOut(2);
-    expect(transform.value.zoom).toBe(1);
-  });
-  it("should pan", () => {
-    const transform = ref({ x: 0, y: 0, zoom: 1 });
-    const v = useViewport(transform);
-    v.pan(50, 30);
-    expect(transform.value.x).toBe(50);
-    expect(transform.value.y).toBe(30);
-  });
-  it("should panTo", () => {
-    const transform = ref({ x: 0, y: 0, zoom: 1 });
-    const v = useViewport(transform);
-    v.panTo(100, 200);
-    expect(transform.value.x).toBe(100);
-    expect(transform.value.y).toBe(200);
-  });
-  it("should fitView to contain nodes", () => {
-    const transform = ref({ x: 0, y: 0, zoom: 1 });
-    const v = useViewport(transform, { minZoom: 0.1, maxZoom: 5 });
-    const nodes = [
-      { position: { x: 0, y: 0 }, width: 100, height: 50 },
-      { position: { x: 200, y: 100 }, width: 100, height: 50 }
-    ];
-    v.fitView({ width: 400, height: 300 }, nodes, { padding: 20 });
-    expect(transform.value.zoom).toBeLessThanOrEqual(1);
-    expect(typeof transform.value.x).toBe("number");
-    expect(typeof transform.value.y).toBe("number");
-  });
-  it("should not fitView when nodes empty", () => {
-    const transform = ref({ x: 50, y: 50, zoom: 1 });
-    const v = useViewport(transform);
-    v.fitView({ width: 400, height: 300 }, [], { padding: 20 });
-    expect(transform.value).toEqual({ x: 50, y: 50, zoom: 1 });
-  });
-  it("screenToCanvas and canvasToScreen should be inverse", () => {
-    const transform = ref({ x: 100, y: 50, zoom: 2 });
-    const v = useViewport(transform);
-    const screen = { x: 300, y: 250 };
-    const canvas = v.screenToCanvas(screen.x, screen.y);
-    const back = v.canvasToScreen(canvas.x, canvas.y);
-    expect(back.x).toBe(screen.x);
-    expect(back.y).toBe(screen.y);
-  });
-  it("isNodeVisible should return true when node in view", () => {
-    const transform = ref({ x: 0, y: 0, zoom: 1 });
-    const v = useViewport(transform);
-    const visible = v.isNodeVisible(
-      { x: 50, y: 50, width: 100, height: 50 },
-      { width: 800, height: 600 }
-    );
-    expect(visible).toBe(true);
-  });
-  it("isNodeVisible should return false when node outside view", () => {
-    const transform = ref({ x: -2e3, y: 0, zoom: 1 });
-    const v = useViewport(transform);
-    const visible = v.isNodeVisible(
-      { x: 50, y: 50, width: 100, height: 50 },
-      { width: 800, height: 600 }
-    );
-    expect(visible).toBe(false);
-  });
-});

package/dist/__tests__/utils/ssr.cjs

@@ -1,124 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.expectSSRContains = expectSSRContains;
-exports.expectSSRHasClass = expectSSRHasClass;
-exports.mockSSREnvironment = mockSSREnvironment;
-exports.normalizeHtml = normalizeHtml;
-exports.renderSSR = renderSSR;
-exports.testHydration = testHydration;
-var _vue = require("vue");
-var _serverRenderer = require("vue/server-renderer");
-async function renderSSR(component, props = {}, slots = {}) {
-  const app = (0, _vue.createSSRApp)({
-    render() {
-      return (0, _vue.h)(component, props, slots);
-    }
-  });
-  return await (0, _serverRenderer.renderToString)(app);
-}
-function expectSSRContains(html, text) {
-  if (!html.includes(text)) {
-    throw new Error(`Expected SSR output to contain "${text}", but got:
-${html}`);
-  }
-}
-function expectSSRHasClass(html, className) {
-  const classRegex = new RegExp(`class="[^"]*${className}[^"]*"`);
-  if (!classRegex.test(html)) {
-    throw new Error(`Expected SSR output to have class "${className}", but got:
-${html}`);
-  }
-}
-function mockSSREnvironment() {
-  const originalWindow = global.window;
-  const originalDocument = global.document;
-  delete global.window;
-  delete global.document;
-  return () => {
-    ;
-    global.window = originalWindow;
-    global.document = originalDocument;
-  };
-}
-function normalizeHtml(html) {
-  return html.replace(/<!--[\s\S]*?-->/g, "").replace(/\s+/g, " ").replace(/>\s+</g, "><").replace(/<(\/?)([a-z0-9-]+)([^>]*?)(\/?)>/gi, (match, close, tag, attrs, selfClosing) => {
-    tag = tag.toLowerCase();
-    if (close) {
-      return `</${tag}>`;
-    }
-    const attrRegex = /([^\s>=/]+)(?:="([^"]*)")?/gi;
-    const foundAttrs = [];
-    let m;
-    while ((m = attrRegex.exec(attrs)) !== null) {
-      const name = m[1].toLowerCase();
-      let value = m[2] || "";
-      if (name.startsWith("data-v-")) continue;
-      value = value.replace(/\s+/g, " ").trim();
-      if (value === "" || value === "false") continue;
-      if (name === "style") {
-        value = value.split(";").map(s => s.trim()).filter(Boolean).map(s => {
-          const parts = s.split(":");
-          if (parts.length < 2) return null;
-          const prop = parts[0].trim().toLowerCase();
-          let val = parts.slice(1).join(":").trim();
-          val = val.replace(/^0(?:px|em|rem|%)$/, "0");
-          if (val === "rgba(0,0,0,0)" || val === "rgba(0, 0, 0, 0)") val = "transparent";
-          if (prop.startsWith("-webkit-") || prop.startsWith("-ms-") || prop.startsWith("-moz-") || prop.startsWith("webkit-") || prop.startsWith("ms-") || prop.startsWith("moz-") || prop === "mstransform") {
-            return null;
-          }
-          return `${prop}:${val}`;
-        }).filter(Boolean).sort().join(";");
-      }
-      if (name === "class") {
-        value = value.split(" ").filter(c => !/-(enter|leave)-(from|active|to)$/.test(c)).sort().join(" ");
-        if (!value) continue;
-      }
-      if (tag === "path" && name === "d") {
-        value = value.replace(/([A-Z])/gi, " $1 ").replace(/,/g, " ").replace(/\s+/g, " ").trim();
-      }
-      const isAriaValue = ["aria-valuenow", "aria-valuemin", "aria-valuemax"].includes(name);
-      if (name === "id" || name === "for" || name.startsWith("aria-") && !isAriaValue) {
-        value = "__ID__";
-      }
-      if (name === "xmlns" || name.startsWith("xmlns:")) continue;
-      if (value === "true") {
-        value = "";
-      }
-      foundAttrs.push(`${name}${value ? `="${value}"` : ""}`);
-    }
-    foundAttrs.sort();
-    const sortedAttrs = foundAttrs.join(" ");
-    const voidElements = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"];
-    const isVoid = voidElements.includes(tag);
-    const normalizedTag = `<${tag}${sortedAttrs ? " " + sortedAttrs : ""}>`;
-    return isVoid ? normalizedTag : selfClosing ? `${normalizedTag}</${tag}>` : normalizedTag;
-  }).replace(/<textarea([^>]*)>[\s\S]*?<\/textarea>/gi, "<textarea$1>__TEXTAREA_CONTENT__</textarea>").trim();
-}
-async function testHydration(component, props = {}, slots = {}) {
-  const ssrHtml = await renderSSR(component, props, slots);
-  const {
-    mount
-  } = await Promise.resolve().then(() => require("@vue/test-utils"));
-  const wrapper = mount(component, {
-    props,
-    slots,
-    global: {
-      stubs: {
-        transition: false,
-        "transition-group": false
-      }
-    }
-  });
-  const csrHtml = wrapper.html();
-  const ssrNormalized = normalizeHtml(ssrHtml);
-  const csrNormalized = normalizeHtml(csrHtml);
-  const isMatch = ssrNormalized === csrNormalized;
-  return {
-    ssrHtml: ssrNormalized,
-    csrHtml: csrNormalized,
-    isMatch
-  };
-}

package/dist/__tests__/utils/ssr.d.ts

@@ -1,33 +0,0 @@
-/**
- * Flow Package SSR 测试工具函数
- * @description 用于测试 Flow 组件在 SSR 环境下的行为
- */
-import { type Component } from 'vue';
-/**
- * 渲染组件为 HTML 字符串（服务端）
- */
-export declare function renderSSR(component: Component, props?: Record<string, unknown>, slots?: Record<string, unknown>): Promise<string>;
-/**
- * 检查 SSR 渲染结果中是否包含特定文本
- */
-export declare function expectSSRContains(html: string, text: string): void;
-/**
- * 检查 SSR 渲染结果是否包含特定 class
- */
-export declare function expectSSRHasClass(html: string, className: string): void;
-/**
- * 模拟 SSR 环境
- */
-export declare function mockSSREnvironment(): () => void;
-/**
- * HTML 标准化，用于比较 SSR 和 CSR 结果
- */
-export declare function normalizeHtml(html: string): string;
-/**
- * Hydration 测试辅助函数
- */
-export declare function testHydration(component: Component, props?: Record<string, unknown>, slots?: Record<string, unknown>): Promise<{
-    ssrHtml: string;
-    csrHtml: string;
-    isMatch: boolean;
-}>;

package/dist/__tests__/utils/ssr.mjs

@@ -1,129 +0,0 @@
-import { createSSRApp, h } from "vue";
-import { renderToString } from "vue/server-renderer";
-export async function renderSSR(component, props = {}, slots = {}) {
-  const app = createSSRApp({
-    render() {
-      return h(component, props, slots);
-    }
-  });
-  return await renderToString(app);
-}
-export function expectSSRContains(html, text) {
-  if (!html.includes(text)) {
-    throw new Error(`Expected SSR output to contain "${text}", but got:
-${html}`);
-  }
-}
-export function expectSSRHasClass(html, className) {
-  const classRegex = new RegExp(`class="[^"]*${className}[^"]*"`);
-  if (!classRegex.test(html)) {
-    throw new Error(`Expected SSR output to have class "${className}", but got:
-${html}`);
-  }
-}
-export function mockSSREnvironment() {
-  const originalWindow = global.window;
-  const originalDocument = global.document;
-  delete global.window;
-  delete global.document;
-  return () => {
-    ;
-    global.window = originalWindow;
-    global.document = originalDocument;
-  };
-}
-export function normalizeHtml(html) {
-  return html.replace(/<!--[\s\S]*?-->/g, "").replace(/\s+/g, " ").replace(/>\s+</g, "><").replace(/<(\/?)([a-z0-9-]+)([^>]*?)(\/?)>/gi, (match, close, tag, attrs, selfClosing) => {
-    tag = tag.toLowerCase();
-    if (close) {
-      return `</${tag}>`;
-    }
-    const attrRegex = /([^\s>=/]+)(?:="([^"]*)")?/gi;
-    const foundAttrs = [];
-    let m;
-    while ((m = attrRegex.exec(attrs)) !== null) {
-      const name = m[1].toLowerCase();
-      let value = m[2] || "";
-      if (name.startsWith("data-v-")) continue;
-      value = value.replace(/\s+/g, " ").trim();
-      if (value === "" || value === "false") continue;
-      if (name === "style") {
-        value = value.split(";").map((s) => s.trim()).filter(Boolean).map((s) => {
-          const parts = s.split(":");
-          if (parts.length < 2) return null;
-          const prop = parts[0].trim().toLowerCase();
-          let val = parts.slice(1).join(":").trim();
-          val = val.replace(/^0(?:px|em|rem|%)$/, "0");
-          if (val === "rgba(0,0,0,0)" || val === "rgba(0, 0, 0, 0)") val = "transparent";
-          if (prop.startsWith("-webkit-") || prop.startsWith("-ms-") || prop.startsWith("-moz-") || prop.startsWith("webkit-") || prop.startsWith("ms-") || prop.startsWith("moz-") || prop === "mstransform") {
-            return null;
-          }
-          return `${prop}:${val}`;
-        }).filter(Boolean).sort().join(";");
-      }
-      if (name === "class") {
-        value = value.split(" ").filter((c) => !/-(enter|leave)-(from|active|to)$/.test(c)).sort().join(" ");
-        if (!value) continue;
-      }
-      if (tag === "path" && name === "d") {
-        value = value.replace(/([A-Z])/gi, " $1 ").replace(/,/g, " ").replace(/\s+/g, " ").trim();
-      }
-      const isAriaValue = ["aria-valuenow", "aria-valuemin", "aria-valuemax"].includes(name);
-      if (name === "id" || name === "for" || name.startsWith("aria-") && !isAriaValue) {
-        value = "__ID__";
-      }
-      if (name === "xmlns" || name.startsWith("xmlns:")) continue;
-      if (value === "true") {
-        value = "";
-      }
-      foundAttrs.push(`${name}${value ? `="${value}"` : ""}`);
-    }
-    foundAttrs.sort();
-    const sortedAttrs = foundAttrs.join(" ");
-    const voidElements = [
-      "area",
-      "base",
-      "br",
-      "col",
-      "embed",
-      "hr",
-      "img",
-      "input",
-      "link",
-      "meta",
-      "param",
-      "source",
-      "track",
-      "wbr"
-    ];
-    const isVoid = voidElements.includes(tag);
-    const normalizedTag = `<${tag}${sortedAttrs ? " " + sortedAttrs : ""}>`;
-    return isVoid ? normalizedTag : selfClosing ? `${normalizedTag}</${tag}>` : normalizedTag;
-  }).replace(
-    /<textarea([^>]*)>[\s\S]*?<\/textarea>/gi,
-    "<textarea$1>__TEXTAREA_CONTENT__</textarea>"
-  ).trim();
-}
-export async function testHydration(component, props = {}, slots = {}) {
-  const ssrHtml = await renderSSR(component, props, slots);
-  const { mount } = await import("@vue/test-utils");
-  const wrapper = mount(component, {
-    props,
-    slots,
-    global: {
-      stubs: {
-        transition: false,
-        "transition-group": false
-      }
-    }
-  });
-  const csrHtml = wrapper.html();
-  const ssrNormalized = normalizeHtml(ssrHtml);
-  const csrNormalized = normalizeHtml(csrHtml);
-  const isMatch = ssrNormalized === csrNormalized;
-  return {
-    ssrHtml: ssrNormalized,
-    csrHtml: csrNormalized,
-    isMatch
-  };
-}