@node-edit-utils/core 2.3.2 → 2.3.4

package/src/lib/node-tools/text/nodeText.test.ts

@@ -0,0 +1,233 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as disableCanvasTextModeModule from "../../canvas/disableCanvasTextMode";
+import * as enableCanvasTextModeModule from "../../canvas/enableCanvasTextMode";
+import * as setupNodeListenersModule from "./events/setupNodeListeners";
+import * as handleTextChangeModule from "./helpers/handleTextChange";
+import * as hasTextContentModule from "./helpers/hasTextContent";
+import * as makeNodeEditableModule from "./helpers/makeNodeEditable";
+import * as makeNodeNonEditableModule from "./helpers/makeNodeNonEditable";
+import { nodeText } from "./nodeText";
+
+vi.mock("../../canvas/disableCanvasTextMode");
+vi.mock("../../canvas/enableCanvasTextMode");
+vi.mock("./events/setupNodeListeners");
+vi.mock("./helpers/handleTextChange");
+vi.mock("./helpers/hasTextContent");
+vi.mock("./helpers/makeNodeEditable");
+vi.mock("./helpers/makeNodeNonEditable");
+
+describe("nodeText", () => {
+  let node: HTMLElement;
+  let nodeProvider: HTMLElement;
+  let cleanup: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node");
+    node.textContent = "Test content";
+    document.body.appendChild(node);
+
+    nodeProvider = document.createElement("div");
+    document.body.appendChild(nodeProvider);
+
+    cleanup = vi.fn();
+
+    vi.mocked(hasTextContentModule.hasTextContent).mockReturnValue(true);
+    vi.mocked(setupNodeListenersModule.setupNodeListeners).mockReturnValue(cleanup);
+    vi.mocked(makeNodeEditableModule.makeNodeEditable).mockImplementation(() => {});
+    vi.mocked(makeNodeNonEditableModule.makeNodeNonEditable).mockImplementation(() => {});
+    vi.mocked(enableCanvasTextModeModule.enableCanvasTextMode).mockImplementation(() => {});
+    vi.mocked(disableCanvasTextModeModule.disableCanvasTextMode).mockImplementation(() => {});
+    vi.mocked(handleTextChangeModule.handleTextChange).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return NodeText interface", () => {
+    const text = nodeText();
+
+    expect(text).toHaveProperty("enableEditMode");
+    expect(text).toHaveProperty("blurEditMode");
+    expect(text).toHaveProperty("getEditableNode");
+    expect(text).toHaveProperty("isEditing");
+  });
+
+  describe("enableEditMode", () => {
+    it("should enable edit mode for node with text content", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+
+      expect(hasTextContentModule.hasTextContent).toHaveBeenCalledWith(node);
+      expect(makeNodeEditableModule.makeNodeEditable).toHaveBeenCalledWith(node);
+      expect(enableCanvasTextModeModule.enableCanvasTextMode).toHaveBeenCalledWith("canvas");
+      expect(setupNodeListenersModule.setupNodeListeners).toHaveBeenCalledWith(node, nodeProvider, expect.any(Function), "canvas");
+    });
+
+    it("should not enable edit mode for node without text content", () => {
+      vi.mocked(hasTextContentModule.hasTextContent).mockReturnValue(false);
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+
+      expect(makeNodeEditableModule.makeNodeEditable).not.toHaveBeenCalled();
+      expect(enableCanvasTextModeModule.enableCanvasTextMode).not.toHaveBeenCalled();
+    });
+
+    it("should not enable edit mode if same node is already editable", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+      vi.clearAllMocks();
+
+      text.enableEditMode(node, nodeProvider);
+
+      expect(makeNodeEditableModule.makeNodeEditable).not.toHaveBeenCalled();
+      expect(enableCanvasTextModeModule.enableCanvasTextMode).not.toHaveBeenCalled();
+    });
+
+    it("should blur previous node when enabling different node", () => {
+      const text = nodeText();
+      const node2 = document.createElement("div");
+      node2.setAttribute("data-node-id", "test-node-2");
+      node2.textContent = "Node 2 content";
+      document.body.appendChild(node2);
+
+      text.enableEditMode(node, nodeProvider);
+      vi.clearAllMocks();
+
+      text.enableEditMode(node2, nodeProvider);
+
+      expect(makeNodeNonEditableModule.makeNodeNonEditable).toHaveBeenCalledWith(node);
+      expect(disableCanvasTextModeModule.disableCanvasTextMode).toHaveBeenCalledWith("canvas");
+      expect(cleanup).toHaveBeenCalled();
+
+      document.body.removeChild(node2);
+    });
+
+    it("should use custom canvas name", () => {
+      const text = nodeText("custom-canvas");
+      text.enableEditMode(node, nodeProvider);
+
+      expect(enableCanvasTextModeModule.enableCanvasTextMode).toHaveBeenCalledWith("custom-canvas");
+    });
+
+    it("should handle null nodeProvider", () => {
+      const text = nodeText();
+      text.enableEditMode(node, null);
+
+      expect(setupNodeListenersModule.setupNodeListeners).toHaveBeenCalledWith(node, null, expect.any(Function), "canvas");
+    });
+  });
+
+  describe("blurEditMode", () => {
+    it("should blur edit mode", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+      vi.clearAllMocks();
+
+      text.blurEditMode();
+
+      expect(handleTextChangeModule.handleTextChange).toHaveBeenCalledWith(node, [], true);
+      expect(makeNodeNonEditableModule.makeNodeNonEditable).toHaveBeenCalledWith(node);
+      expect(disableCanvasTextModeModule.disableCanvasTextMode).toHaveBeenCalledWith("canvas");
+      expect(cleanup).toHaveBeenCalled();
+    });
+
+    it("should not blur if no node is editable", () => {
+      const text = nodeText();
+
+      text.blurEditMode();
+
+      expect(handleTextChangeModule.handleTextChange).not.toHaveBeenCalled();
+      expect(makeNodeNonEditableModule.makeNodeNonEditable).not.toHaveBeenCalled();
+    });
+
+    it("should not blur if blur is already in progress", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+      vi.clearAllMocks();
+
+      // Start blur
+      text.blurEditMode();
+      vi.clearAllMocks();
+
+      // Try to blur again while in progress
+      text.blurEditMode();
+
+      expect(handleTextChangeModule.handleTextChange).not.toHaveBeenCalled();
+    });
+
+    it("should use custom canvas name", () => {
+      const text = nodeText("custom-canvas");
+      text.enableEditMode(node, nodeProvider);
+      vi.clearAllMocks();
+
+      text.blurEditMode();
+
+      expect(disableCanvasTextModeModule.disableCanvasTextMode).toHaveBeenCalledWith("custom-canvas");
+    });
+
+    it("should handle cleanup being null", () => {
+      vi.mocked(setupNodeListenersModule.setupNodeListeners).mockReturnValue(null as unknown as () => void);
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+      vi.clearAllMocks();
+
+      expect(() => {
+        text.blurEditMode();
+      }).not.toThrow();
+    });
+  });
+
+  describe("getEditableNode", () => {
+    it("should return null when no node is editable", () => {
+      const text = nodeText();
+
+      expect(text.getEditableNode()).toBeNull();
+    });
+
+    it("should return editable node", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+
+      expect(text.getEditableNode()).toBe(node);
+    });
+
+    it("should return null after blur", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+      text.blurEditMode();
+
+      expect(text.getEditableNode()).toBeNull();
+    });
+  });
+
+  describe("isEditing", () => {
+    it("should return false when no node is editable", () => {
+      const text = nodeText();
+
+      expect(text.isEditing()).toBe(false);
+    });
+
+    it("should return true when node is editable", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+
+      expect(text.isEditing()).toBe(true);
+    });
+
+    it("should return false after blur", () => {
+      const text = nodeText();
+      text.enableEditMode(node, nodeProvider);
+      text.blurEditMode();
+
+      expect(text.isEditing()).toBe(false);
+    });
+  });
+});

package/src/lib/post-message/processPostMessage.test.ts

@@ -0,0 +1,218 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as isLockedModule from "../node-tools/select/helpers/isLocked";
+import { processPostMessage } from "./processPostMessage";
+
+vi.mock("../node-tools/select/helpers/isLocked");
+
+describe("processPostMessage", () => {
+  let onNodeSelected: ReturnType<typeof vi.fn>;
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    onNodeSelected = vi.fn();
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node-123");
+    document.body.appendChild(node);
+
+    vi.mocked(isLockedModule.isLocked).mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should call onNodeSelected with node when message is from application and action is selectedNodeChanged", () => {
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    expect(onNodeSelected).toHaveBeenCalledTimes(1);
+    expect(onNodeSelected).toHaveBeenCalledWith(node);
+  });
+
+  it("should not call onNodeSelected when source is not 'application'", () => {
+    const event = new MessageEvent("message", {
+      data: {
+        source: "other-source",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    expect(onNodeSelected).not.toHaveBeenCalled();
+  });
+
+  it("should not call onNodeSelected when action is not 'selectedNodeChanged'", () => {
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "otherAction",
+        data: "test-node-123",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    expect(onNodeSelected).not.toHaveBeenCalled();
+  });
+
+  it("should call onNodeSelected with null when node is locked", () => {
+    vi.mocked(isLockedModule.isLocked).mockReturnValue(true);
+
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    expect(onNodeSelected).toHaveBeenCalledTimes(1);
+    expect(onNodeSelected).toHaveBeenCalledWith(null);
+  });
+
+  it("should not call onNodeSelected when node is not found", () => {
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "non-existent-node",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    expect(onNodeSelected).not.toHaveBeenCalled();
+  });
+
+  it("should work without onNodeSelected callback", () => {
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    expect(() => {
+      processPostMessage(event);
+    }).not.toThrow();
+  });
+
+  it("should check if node is locked before calling callback", () => {
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    expect(isLockedModule.isLocked).toHaveBeenCalledWith(node);
+  });
+
+  it("should handle multiple nodes with different IDs", () => {
+    const node2 = document.createElement("div");
+    node2.setAttribute("data-node-id", "test-node-456");
+    document.body.appendChild(node2);
+
+    const event1 = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    const event2 = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-456",
+      },
+    });
+
+    processPostMessage(event1, onNodeSelected);
+    processPostMessage(event2, onNodeSelected);
+
+    expect(onNodeSelected).toHaveBeenCalledTimes(2);
+    expect(onNodeSelected).toHaveBeenNthCalledWith(1, node);
+    expect(onNodeSelected).toHaveBeenNthCalledWith(2, node2);
+
+    document.body.removeChild(node2);
+  });
+
+  it("should return early when node is locked", () => {
+    vi.mocked(isLockedModule.isLocked).mockReturnValue(true);
+
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    // Should only be called once with null, not with the node
+    expect(onNodeSelected).toHaveBeenCalledTimes(1);
+    expect(onNodeSelected).toHaveBeenCalledWith(null);
+  });
+
+  it("should handle event with missing data properties", () => {
+    const event = new MessageEvent("message", {
+      data: {},
+    });
+
+    expect(() => {
+      processPostMessage(event, onNodeSelected);
+    }).not.toThrow();
+
+    expect(onNodeSelected).not.toHaveBeenCalled();
+  });
+
+  it("should throw when event data is null", () => {
+    const event = new MessageEvent("message", {
+      data: null,
+    });
+
+    expect(() => {
+      processPostMessage(event, onNodeSelected);
+    }).toThrow();
+
+    expect(onNodeSelected).not.toHaveBeenCalled();
+  });
+
+  it("should handle node that exists but is locked", () => {
+    vi.mocked(isLockedModule.isLocked).mockReturnValue(true);
+
+    const event = new MessageEvent("message", {
+      data: {
+        source: "application",
+        action: "selectedNodeChanged",
+        data: "test-node-123",
+      },
+    });
+
+    processPostMessage(event, onNodeSelected);
+
+    expect(isLockedModule.isLocked).toHaveBeenCalledWith(node);
+    expect(onNodeSelected).toHaveBeenCalledWith(null);
+  });
+});

package/src/lib/post-message/sendPostMessage.test.ts

@@ -0,0 +1,120 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { sendPostMessage } from "./sendPostMessage";
+
+describe("sendPostMessage", () => {
+  let originalPostMessage: typeof window.parent.postMessage;
+  let mockPostMessage: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    mockPostMessage = vi.fn();
+    originalPostMessage = window.parent.postMessage;
+    window.parent.postMessage = mockPostMessage;
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    window.parent.postMessage = originalPostMessage;
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it("should send postMessage with correct format", () => {
+    const mockDate = new Date("2024-01-01T00:00:00Z");
+    vi.setSystemTime(mockDate);
+
+    sendPostMessage("testAction", "testData");
+
+    expect(mockPostMessage).toHaveBeenCalledTimes(1);
+    expect(mockPostMessage).toHaveBeenCalledWith(
+      {
+        source: "node-edit-utils",
+        action: "testAction",
+        data: "testData",
+        timestamp: mockDate.getTime(),
+      },
+      "*"
+    );
+  });
+
+  it("should include timestamp in message", () => {
+    const mockDate = new Date("2024-01-01T12:00:00Z");
+    vi.setSystemTime(mockDate);
+
+    sendPostMessage("testAction", { test: "data" });
+
+    expect(mockPostMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        timestamp: mockDate.getTime(),
+      }),
+      "*"
+    );
+  });
+
+  it("should send different action types", () => {
+    sendPostMessage("selectedNodeChanged", "node-123");
+    sendPostMessage("textContentChanged", { nodeId: "node-123", textContent: "Hello" });
+
+    expect(mockPostMessage).toHaveBeenCalledTimes(2);
+    expect(mockPostMessage).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        action: "selectedNodeChanged",
+        data: "node-123",
+      }),
+      "*"
+    );
+    expect(mockPostMessage).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        action: "textContentChanged",
+        data: { nodeId: "node-123", textContent: "Hello" },
+      }),
+      "*"
+    );
+  });
+
+  it("should send different data types", () => {
+    sendPostMessage("action1", "string");
+    sendPostMessage("action2", 123);
+    sendPostMessage("action3", { key: "value" });
+    sendPostMessage("action4", null);
+    sendPostMessage("action5", undefined);
+
+    expect(mockPostMessage).toHaveBeenCalledTimes(5);
+    expect(mockPostMessage).toHaveBeenNthCalledWith(1, expect.objectContaining({ data: "string" }), "*");
+    expect(mockPostMessage).toHaveBeenNthCalledWith(2, expect.objectContaining({ data: 123 }), "*");
+    expect(mockPostMessage).toHaveBeenNthCalledWith(3, expect.objectContaining({ data: { key: "value" } }), "*");
+    expect(mockPostMessage).toHaveBeenNthCalledWith(4, expect.objectContaining({ data: null }), "*");
+    expect(mockPostMessage).toHaveBeenNthCalledWith(5, expect.objectContaining({ data: undefined }), "*");
+  });
+
+  it("should always use source 'node-edit-utils'", () => {
+    sendPostMessage("anyAction", "anyData");
+
+    expect(mockPostMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        source: "node-edit-utils",
+      }),
+      "*"
+    );
+  });
+
+  it("should always use '*' as targetOrigin", () => {
+    sendPostMessage("anyAction", "anyData");
+
+    expect(mockPostMessage).toHaveBeenCalledWith(expect.any(Object), "*");
+  });
+
+  it("should include all required fields", () => {
+    const mockDate = new Date("2024-01-01T00:00:00Z");
+    vi.setSystemTime(mockDate);
+
+    sendPostMessage("testAction", "testData");
+
+    const callArgs = mockPostMessage.mock.calls[0][0];
+    expect(callArgs).toHaveProperty("source");
+    expect(callArgs).toHaveProperty("action");
+    expect(callArgs).toHaveProperty("data");
+    expect(callArgs).toHaveProperty("timestamp");
+  });
+});

package/src/lib/styles/styles.css

@@ -98,11 +98,11 @@
 
 @media (prefers-color-scheme: dark) {
   .viewport-label-text {
-    fill: oklch(0.3 0 0);
+    fill: oklch(0.5 0 0);
   }
 
   .viewport-label-text:hover {
-    fill: oklch(0 0 0);
+    fill: oklch(0.7 0 0);
   }
 }
 
@@ -112,7 +112,7 @@
   }
 
   .viewport-label-text:hover {
-    fill: oklch(0.3 0 0);
+    fill: oklch(0.5 0 0);
   }
 }