@yh-ui/flow 1.0.1 → 1.0.5

package/dist/__tests__/plugins.test.mjs

@@ -0,0 +1,402 @@
+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

@@ -0,0 +1,183 @@
+"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

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