@yh-ui/flow 1.0.25 → 1.0.30

package/dist/__tests__/plugins.test.mjs

@@ -1,402 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { ref } from "vue";
-import { createControlsPlugin } from "../plugins/plugins/controls.mjs";
-import { createGridPlugin } from "../plugins/plugins/grid.mjs";
-import { createKeyboardPlugin } from "../plugins/plugins/keyboard.mjs";
-import { createMiniMapPlugin } from "../plugins/plugins/minimap.mjs";
-import { createSnapPlugin } from "../plugins/plugins/snap.mjs";
-function createMockFlowInstance() {
-  const nodes = ref([]);
-  const edges = ref([]);
-  const viewport = ref({ x: 0, y: 0, zoom: 1 });
-  const draggingNodeId = ref(null);
-  return {
-    nodes,
-    edges,
-    viewport,
-    draggingNodeId,
-    addNode: vi.fn(),
-    removeNode: vi.fn(),
-    updateNode: vi.fn(),
-    getNode: vi.fn(),
-    addEdge: vi.fn(),
-    removeEdge: vi.fn(),
-    updateEdge: vi.fn(),
-    getEdge: vi.fn(),
-    setViewport: vi.fn(),
-    fitView: vi.fn(),
-    zoomIn: vi.fn(),
-    zoomOut: vi.fn(),
-    centerView: vi.fn(),
-    selectNode: vi.fn(),
-    selectEdge: vi.fn(),
-    clearSelection: vi.fn(),
-    getNodes: vi.fn(() => nodes.value),
-    getEdges: vi.fn(() => edges.value),
-    getViewport: vi.fn(() => viewport.value),
-    screenToCanvas: vi.fn(),
-    canvasToScreen: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-    emit: vi.fn(),
-    isValidConnection: vi.fn(() => true),
-    $el: void 0,
-    usePlugin: vi.fn(),
-    removePlugin: vi.fn()
-  };
-}
-describe("flow/plugins/plugins/controls", () => {
-  let consoleLogSpy;
-  beforeEach(() => {
-    consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {
-    });
-  });
-  afterEach(() => {
-    consoleLogSpy.mockRestore();
-  });
-  describe("createControlsPlugin", () => {
-    it("should create plugin with correct id and name", () => {
-      const plugin = createControlsPlugin();
-      expect(plugin.id).toBe("controls");
-      expect(plugin.name).toBe("Controls");
-      expect(plugin.version).toBe("1.0.0");
-      expect(plugin.description).toBe("Displays a set of controls for zooming and fitting the view");
-    });
-    it("should have a component", () => {
-      const plugin = createControlsPlugin();
-      expect(plugin.component).toBeDefined();
-    });
-    it("should install with default options", () => {
-      const flow = createMockFlowInstance();
-      const plugin = createControlsPlugin();
-      plugin.install(flow);
-      expect(consoleLogSpy).toHaveBeenCalledWith("[Controls Plugin] Installed");
-    });
-    it("should merge custom options", () => {
-      const plugin = createControlsPlugin({
-        enabled: true,
-        position: "top-right",
-        showZoom: true,
-        showFitView: false,
-        showInteractive: false
-      });
-      expect(plugin.componentProps).toEqual({
-        position: "top-right",
-        showZoom: true,
-        showFitView: false,
-        showInteractive: false
-      });
-    });
-    it("should use default position when not provided", () => {
-      const plugin = createControlsPlugin();
-      expect(plugin.componentProps?.position).toBe("bottom-left");
-    });
-    it("should use default show options", () => {
-      const plugin = createControlsPlugin();
-      expect(plugin.componentProps?.showZoom).toBe(true);
-      expect(plugin.componentProps?.showFitView).toBe(true);
-      expect(plugin.componentProps?.showInteractive).toBe(true);
-    });
-    it("should support all position options", () => {
-      const positions = [
-        "top-left",
-        "top-right",
-        "bottom-left",
-        "bottom-right"
-      ];
-      for (const pos of positions) {
-        const plugin = createControlsPlugin({ position: pos });
-        expect(plugin.componentProps?.position).toBe(pos);
-      }
-    });
-  });
-});
-describe("flow/plugins/plugins/grid", () => {
-  let consoleLogSpy;
-  beforeEach(() => {
-    consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {
-    });
-  });
-  afterEach(() => {
-    consoleLogSpy.mockRestore();
-  });
-  describe("createGridPlugin", () => {
-    it("should create plugin with correct id and name", () => {
-      const plugin = createGridPlugin();
-      expect(plugin.id).toBe("grid");
-      expect(plugin.name).toBe("Grid");
-      expect(plugin.version).toBe("1.0.0");
-      expect(plugin.description).toBe("Displays a grid or dots background");
-    });
-    it("should have a component", () => {
-      const plugin = createGridPlugin();
-      expect(plugin.component).toBeDefined();
-    });
-    it("should install with default options", () => {
-      const flow = createMockFlowInstance();
-      const plugin = createGridPlugin();
-      plugin.install(flow);
-      expect(consoleLogSpy).toHaveBeenCalledWith("[Grid Plugin] Installed");
-    });
-    it("should merge custom options", () => {
-      const plugin = createGridPlugin({
-        enabled: true,
-        type: "grid",
-        color: "#ff0000",
-        gap: 30
-      });
-      expect(plugin.componentProps).toEqual({
-        type: "grid",
-        color: "#ff0000",
-        gap: 30
-      });
-    });
-    it("should use default type dots", () => {
-      const plugin = createGridPlugin();
-      expect(plugin.componentProps?.type).toBe("dots");
-    });
-    it("should use default gap", () => {
-      const plugin = createGridPlugin();
-      expect(plugin.componentProps?.gap).toBe(20);
-    });
-    it("should use default color", () => {
-      const plugin = createGridPlugin();
-      expect(plugin.componentProps?.color).toBe("#e5e5e5");
-    });
-    it("should support grid type", () => {
-      const plugin = createGridPlugin({ type: "grid" });
-      expect(plugin.componentProps?.type).toBe("grid");
-    });
-  });
-});
-describe("flow/plugins/plugins/keyboard", () => {
-  let consoleLogSpy;
-  beforeEach(() => {
-    consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {
-    });
-  });
-  afterEach(() => {
-    consoleLogSpy.mockRestore();
-  });
-  describe("createKeyboardPlugin", () => {
-    it("should create plugin with correct id and name", () => {
-      const plugin = createKeyboardPlugin();
-      expect(plugin.id).toBe("keyboard");
-      expect(plugin.name).toBe("Keyboard");
-    });
-    it("should install with default options", () => {
-      const flow = createMockFlowInstance();
-      const plugin = createKeyboardPlugin();
-      plugin.install(flow);
-      expect(consoleLogSpy).toHaveBeenCalledWith("Keyboard plugin installed", {
-        enabled: true,
-        delete: true,
-        backspace: true,
-        ctrlZ: true,
-        ctrlY: true,
-        escape: true
-      });
-    });
-    it("should merge custom options", () => {
-      const plugin = createKeyboardPlugin({
-        enabled: false,
-        delete: false,
-        backspace: false,
-        ctrlZ: false,
-        ctrlY: false,
-        escape: false
-      });
-      plugin.install(createMockFlowInstance());
-      expect(consoleLogSpy).toHaveBeenCalledWith("Keyboard plugin installed", {
-        enabled: false,
-        delete: false,
-        backspace: false,
-        ctrlZ: false,
-        ctrlY: false,
-        escape: false
-      });
-    });
-    it("should accept partial options", () => {
-      const plugin = createKeyboardPlugin({ delete: false });
-      expect(plugin.id).toBe("keyboard");
-    });
-    it("should override individual options", () => {
-      const plugin = createKeyboardPlugin({
-        ctrlZ: false,
-        ctrlY: false
-      });
-      plugin.install(createMockFlowInstance());
-      expect(consoleLogSpy).toHaveBeenCalledWith("Keyboard plugin installed", {
-        enabled: true,
-        delete: true,
-        backspace: true,
-        ctrlZ: false,
-        ctrlY: false,
-        escape: true
-      });
-    });
-  });
-});
-describe("flow/plugins/plugins/minimap", () => {
-  let consoleLogSpy;
-  beforeEach(() => {
-    consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {
-    });
-  });
-  afterEach(() => {
-    consoleLogSpy.mockRestore();
-  });
-  describe("createMiniMapPlugin", () => {
-    it("should create plugin with correct id and name", () => {
-      const plugin = createMiniMapPlugin();
-      expect(plugin.id).toBe("minimap");
-      expect(plugin.name).toBe("Minimap");
-      expect(plugin.version).toBe("1.0.0");
-      expect(plugin.description).toBe("Displays a minimap for navigation");
-    });
-    it("should have a component", () => {
-      const plugin = createMiniMapPlugin();
-      expect(plugin.component).toBeDefined();
-    });
-    it("should install with default options", () => {
-      const flow = createMockFlowInstance();
-      const plugin = createMiniMapPlugin();
-      plugin.install(flow);
-      expect(consoleLogSpy).toHaveBeenCalled();
-    });
-    it("should use default position bottom-right", () => {
-      const plugin = createMiniMapPlugin();
-      expect(plugin.componentProps?.position).toBe("bottom-right");
-    });
-    it("should use default dimensions", () => {
-      const plugin = createMiniMapPlugin();
-      expect(plugin.componentProps?.width).toBe(200);
-      expect(plugin.componentProps?.height).toBe(150);
-    });
-    it("should use default mask colors", () => {
-      const plugin = createMiniMapPlugin();
-      expect(plugin.componentProps?.maskColor).toBe("rgba(240, 240, 240, 0.6)");
-      expect(plugin.componentProps?.maskStrokeColor).toBe("#ddd");
-      expect(plugin.componentProps?.maskStrokeWidth).toBe(1);
-    });
-    it("should use default pannable and zoomable", () => {
-      const plugin = createMiniMapPlugin();
-      expect(plugin.componentProps?.pannable).toBe(true);
-      expect(plugin.componentProps?.zoomable).toBe(true);
-    });
-    it("should support custom position", () => {
-      const positions = [
-        "top-left",
-        "top-right",
-        "bottom-left",
-        "bottom-right"
-      ];
-      for (const pos of positions) {
-        const plugin = createMiniMapPlugin({ position: pos });
-        expect(plugin.componentProps?.position).toBe(pos);
-      }
-    });
-    it("should support custom dimensions", () => {
-      const plugin = createMiniMapPlugin({ width: 300, height: 200 });
-      expect(plugin.componentProps?.width).toBe(300);
-      expect(plugin.componentProps?.height).toBe(200);
-    });
-    it("should support custom node color functions", () => {
-      const customNodeColor = (node) => "#ff0000";
-      const customNodeStrokeColor = (node) => "#00ff00";
-      const plugin = createMiniMapPlugin({
-        nodeColor: customNodeColor,
-        nodeStrokeColor: customNodeStrokeColor
-      });
-      expect(plugin.componentProps?.nodeColor).toBe(customNodeColor);
-      expect(plugin.componentProps?.nodeStrokeColor).toBe(customNodeStrokeColor);
-    });
-    it("should support interactive option", () => {
-      const pluginEnabled = createMiniMapPlugin({ interactive: true });
-      const pluginDisabled = createMiniMapPlugin({ interactive: false });
-      expect(pluginEnabled.componentProps?.interactive).toBe(true);
-      expect(pluginDisabled.componentProps?.interactive).toBe(false);
-    });
-    it("should support layout controls options", () => {
-      const plugin = createMiniMapPlugin({
-        showLayoutControls: true,
-        layoutType: "dagre",
-        layoutDirection: "LR"
-      });
-      expect(plugin.componentProps?.showLayoutControls).toBe(true);
-      expect(plugin.componentProps?.layoutType).toBe("dagre");
-      expect(plugin.componentProps?.layoutDirection).toBe("LR");
-    });
-    it("should support all layout directions", () => {
-      const directions = ["TB", "BT", "LR", "RL"];
-      for (const dir of directions) {
-        const plugin = createMiniMapPlugin({ layoutDirection: dir });
-        expect(plugin.componentProps?.layoutDirection).toBe(dir);
-      }
-    });
-    it("should support all layout types", () => {
-      const types = [
-        "dagre",
-        "elk",
-        "force",
-        "grid",
-        "none"
-      ];
-      for (const type of types) {
-        const plugin = createMiniMapPlugin({ layoutType: type });
-        expect(plugin.componentProps?.layoutType).toBe(type);
-      }
-    });
-  });
-});
-describe("flow/plugins/plugins/snap", () => {
-  let consoleLogSpy;
-  beforeEach(() => {
-    consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {
-    });
-  });
-  afterEach(() => {
-    consoleLogSpy.mockRestore();
-  });
-  describe("createSnapPlugin", () => {
-    it("should create plugin with correct id and name", () => {
-      const plugin = createSnapPlugin();
-      expect(plugin.id).toBe("snap");
-      expect(plugin.name).toBe("Snap");
-      expect(plugin.version).toBe("1.0.0");
-      expect(plugin.description).toBe("Enables grid snapping and alignment lines");
-    });
-    it("should have a component when showAlignmentLines is true", () => {
-      const plugin = createSnapPlugin({ showAlignmentLines: true });
-      expect(plugin.component).toBeDefined();
-    });
-    it("should not have a component when showAlignmentLines is false", () => {
-      const plugin = createSnapPlugin({ showAlignmentLines: false });
-      expect(plugin.component).toBeUndefined();
-    });
-    it("should install with default options", () => {
-      const flow = createMockFlowInstance();
-      const plugin = createSnapPlugin();
-      plugin.install(flow);
-      expect(consoleLogSpy).toHaveBeenCalled();
-    });
-    it("should not install when enabled is false", () => {
-      const flow = createMockFlowInstance();
-      const plugin = createSnapPlugin({ enabled: false });
-      plugin.install(flow);
-      expect(consoleLogSpy).not.toHaveBeenCalled();
-    });
-    it("should use default snap options", () => {
-      const plugin = createSnapPlugin();
-      expect(plugin.componentProps?.snapThreshold).toBe(10);
-    });
-    it("should support custom snap options", () => {
-      const plugin = createSnapPlugin({
-        snapToGrid: true,
-        gridSize: 20,
-        snapThreshold: 15
-      });
-      expect(plugin.componentProps?.snapThreshold).toBe(15);
-    });
-  });
-});

package/dist/__tests__/screenshot-capture.test.cjs

@@ -1,183 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _screenshot = require("../utils/screenshot.cjs");
-(0, _vitest.describe)("flow/utils/screenshot - captureElement", () => {
-  let mockToPng;
-  let mockToJpeg;
-  let mockToWebp;
-  let mockFetch;
-  (0, _vitest.beforeEach)(() => {
-    _vitest.vi.stubGlobal("fetch", mockFetch = _vitest.vi.fn().mockResolvedValue(new Response(new Blob(["test"], {
-      type: "image/png"
-    }))));
-  });
-  (0, _vitest.afterEach)(() => {
-    _vitest.vi.restoreAllMocks();
-  });
-  const createMockHtmlToImage = () => {
-    mockToPng = _vitest.vi.fn().mockResolvedValue("data:image/png;base64,test");
-    mockToJpeg = _vitest.vi.fn().mockResolvedValue("data:image/jpeg;base64,test");
-    mockToWebp = _vitest.vi.fn().mockResolvedValue("data:image/webp;base64,test");
-    return {
-      toPng: mockToPng,
-      toJpeg: mockToJpeg,
-      toWebp: mockToWebp
-    };
-  };
-  const createMockElement = () => {
-    const el = document.createElement("div");
-    Object.defineProperty(el, "offsetWidth", {
-      value: 100,
-      configurable: true
-    });
-    Object.defineProperty(el, "offsetHeight", {
-      value: 200,
-      configurable: true
-    });
-    return el;
-  };
-  const defaultOptions = {
-    imageType: "png",
-    imageQuality: 1,
-    pixelRatio: 2,
-    backgroundColor: "#ffffff"
-  };
-  (0, _vitest.describe)("png capture", () => {
-    (0, _vitest.it)("should capture as png", async () => {
-      _vitest.vi.doMock("html-to-image", () => createMockHtmlToImage(), {
-        virtual: true
-      });
-      const mod = await Promise.resolve().then(() => require("html-to-image"));
-      const htmlToImage = mod.toPng ? mod : mod.default;
-      const el = createMockElement();
-      const result = await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        imageType: "png"
-      });
-      (0, _vitest.expect)(result.extension).toBe("png");
-      (0, _vitest.expect)(result.mimeType).toBe("image/png");
-    });
-  });
-  (0, _vitest.describe)("jpeg capture", () => {
-    (0, _vitest.it)("should capture as jpeg", async () => {
-      const htmlToImage = createMockHtmlToImage();
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      const result = await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        imageType: "jpeg"
-      });
-      (0, _vitest.expect)(result.extension).toBe("jpeg");
-      (0, _vitest.expect)(result.mimeType).toBe("image/jpeg");
-    });
-  });
-  (0, _vitest.describe)("webp capture", () => {
-    (0, _vitest.it)("should capture as webp when supported", async () => {
-      const htmlToImage = createMockHtmlToImage();
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      const result = await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        imageType: "webp"
-      });
-      (0, _vitest.expect)(result.extension).toBe("webp");
-      (0, _vitest.expect)(result.mimeType).toBe("image/webp");
-    });
-    (0, _vitest.it)("should fall back to png when webp not supported", async () => {
-      const htmlToImage = {
-        toPng: _vitest.vi.fn().mockResolvedValue("data:image/png;base64,test"),
-        toJpeg: _vitest.vi.fn().mockResolvedValue("data:image/jpeg;base64,test"),
-        toWebp: void 0
-      };
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      const result = await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        imageType: "webp"
-      });
-      (0, _vitest.expect)(result.extension).toBe("png");
-    });
-  });
-  (0, _vitest.describe)("dimensions", () => {
-    (0, _vitest.it)("should calculate dimensions with pixel ratio", async () => {
-      const htmlToImage = createMockHtmlToImage();
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      const result = await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        pixelRatio: 3
-      });
-      (0, _vitest.expect)(result.width).toBe(300);
-      (0, _vitest.expect)(result.height).toBe(600);
-    });
-  });
-  (0, _vitest.describe)("image quality", () => {
-    (0, _vitest.it)("should pass quality option for jpeg", async () => {
-      const htmlToImage = createMockHtmlToImage();
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        imageType: "jpeg",
-        imageQuality: 0.8
-      });
-      (0, _vitest.expect)(mockToJpeg).toHaveBeenCalledWith(el, _vitest.expect.objectContaining({
-        quality: 0.8
-      }));
-    });
-    (0, _vitest.it)("should pass quality option for webp", async () => {
-      const htmlToImage = createMockHtmlToImage();
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        imageType: "webp",
-        imageQuality: 0.9
-      });
-      (0, _vitest.expect)(mockToWebp).toHaveBeenCalledWith(el, _vitest.expect.objectContaining({
-        quality: 0.9
-      }));
-    });
-  });
-  (0, _vitest.describe)("background color", () => {
-    (0, _vitest.it)("should pass background color option", async () => {
-      const htmlToImage = createMockHtmlToImage();
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      await (0, _screenshot.captureElement)(el, {
-        ...defaultOptions,
-        backgroundColor: "#ff0000"
-      });
-      (0, _vitest.expect)(mockToPng).toHaveBeenCalledWith(el, _vitest.expect.objectContaining({
-        backgroundColor: "#ff0000"
-      }));
-    });
-  });
-  (0, _vitest.describe)("data URL to blob conversion", () => {
-    (0, _vitest.it)("should convert data URL to blob", async () => {
-      const htmlToImage = createMockHtmlToImage();
-      _vitest.vi.doMock("html-to-image", () => htmlToImage, {
-        virtual: true
-      });
-      const el = createMockElement();
-      const result = await (0, _screenshot.captureElement)(el, defaultOptions);
-      (0, _vitest.expect)(result.blob).toBeInstanceOf(Blob);
-      (0, _vitest.expect)(mockFetch).toHaveBeenCalled();
-    });
-  });
-});

package/dist/__tests__/screenshot-capture.test.d.ts

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