@node-edit-utils/core 1.2.2

package/src/index.ts

@@ -0,0 +1,9 @@
+import "@/lib/styles/styles.css";
+
+export { createCanvasObserver } from "@/lib/canvas/createCanvasObserver";
+
+export { createNodeTools } from "@/lib/node-tools/createNodeTools";
+export type { NodeTools, NodeToolsRef } from "@/lib/node-tools/types";
+
+export { createViewport } from "@/lib/viewport/createViewport";
+export type { Viewport, ViewportRef } from "@/lib/viewport/types";

package/src/lib/canvas/createCanvasObserver.ts

@@ -0,0 +1,37 @@
+import { withRAFThrottle } from "../helpers/withRAF";
+import { applyCanvasState } from "./helpers/applyCanvasState";
+import type { CanvasObserver } from "./types";
+
+export function createCanvasObserver(): CanvasObserver {
+  const transformLayer = document.querySelector(".transform-layer");
+
+  if (!transformLayer) {
+    return {
+      disconnect: () => {},
+    };
+  }
+
+  const throttledUpdate = withRAFThrottle(() => {
+    applyCanvasState();
+  });
+
+  const observer = new MutationObserver(() => {
+    throttledUpdate();
+  });
+
+  observer.observe(transformLayer, {
+    attributes: true,
+    attributeOldValue: true,
+    subtree: true,
+    childList: true,
+  });
+
+  function disconnect(): void {
+    throttledUpdate.cleanup();
+    observer.disconnect();
+  }
+
+  return {
+    disconnect,
+  };
+}

package/src/lib/canvas/disableCanvasKeyboard.ts

@@ -0,0 +1,7 @@
+import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+
+export const disableCanvasKeyboard = () => {
+  const disable = getCanvasWindowValue(["keyboard", "disable"]);
+
+  disable?.();
+};

package/src/lib/canvas/enableCanvasKeyboard.ts

@@ -0,0 +1,7 @@
+import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+
+export const enableCanvasKeyboard = () => {
+  const enable = getCanvasWindowValue(["keyboard", "enable"]);
+
+  enable?.();
+};

package/src/lib/canvas/helpers/applyCanvasState.ts

@@ -0,0 +1,11 @@
+import { getCanvasWindowValue } from "./getCanvasWindowValue";
+
+export const applyCanvasState = () => {
+  const zoom: number = getCanvasWindowValue(["zoom", "current"]);
+
+  document.body.style.setProperty("--zoom", zoom.toFixed(5));
+  document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
+
+  document.body.dataset.zoom = zoom.toFixed(5);
+  document.body.dataset.strokeWidth = (2 / zoom).toFixed(3);
+};

package/src/lib/canvas/helpers/getCanvasContainer.ts

@@ -0,0 +1,3 @@
+export const getCanvasContainer = (): HTMLElement | null => {
+  return document.querySelector(".canvas-container");
+};

package/src/lib/canvas/helpers/getCanvasWindowValue.ts

@@ -0,0 +1,5 @@
+export const getCanvasWindowValue = (path: string[]) => {
+  // biome-ignore lint/suspicious/noExplicitAny: global window extension
+  const canvas = (window as any).canvas;
+  return path.reduce((obj, prop) => obj?.[prop], canvas);
+};

package/src/lib/canvas/types.d.ts

@@ -0,0 +1,3 @@
+export interface CanvasObserver {
+  disconnect: () => void;
+}

package/src/lib/helpers/index.ts

@@ -0,0 +1 @@
+export { withRAF, withRAFThrottle } from "./withRAF";

package/src/lib/helpers/observer/connectMutationObserver.ts

@@ -0,0 +1,12 @@
+export const connectMutationObserver = (element: HTMLElement, handler: (mutations: MutationRecord[]) => void): MutationObserver => {
+  const mutationObserver = new MutationObserver((mutations) => {
+    handler(mutations);
+  });
+  mutationObserver.observe(element, {
+    subtree: true,
+    childList: true,
+    characterData: true,
+  });
+
+  return mutationObserver;
+};

package/src/lib/helpers/observer/connectResizeObserver.ts

@@ -0,0 +1,8 @@
+export const connectResizeObserver = (element: HTMLElement, handler: (entries: ResizeObserverEntry[]) => void): ResizeObserver => {
+  const resizeObserver = new ResizeObserver((entries) => {
+    handler(entries);
+  });
+  resizeObserver.observe(element);
+
+  return resizeObserver;
+};

package/src/lib/helpers/withRAF.ts

@@ -0,0 +1,39 @@
+export function withRAF(operation: () => void): () => void {
+  const rafId = requestAnimationFrame(() => {
+    operation();
+  });
+
+  return () => {
+    cancelAnimationFrame(rafId);
+  };
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+export function withRAFThrottle<T extends (...args: any[]) => void>(func: T): T & { cleanup: () => void } {
+  let rafId: number | null = null;
+  let lastArgs: Parameters<T> | null = null;
+
+  const throttled = (...args: Parameters<T>) => {
+    lastArgs = args;
+
+    if (rafId === null) {
+      rafId = requestAnimationFrame(() => {
+        if (lastArgs) {
+          func(...lastArgs);
+        }
+        rafId = null;
+        lastArgs = null;
+      });
+    }
+  };
+
+  throttled.cleanup = () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+      lastArgs = null;
+    }
+  };
+
+  return throttled as T & { cleanup: () => void };
+}

package/src/lib/node-tools/createNodeTools.ts

@@ -0,0 +1,88 @@
+import { withRAFThrottle } from "../helpers";
+import { connectResizeObserver } from "../helpers/observer/connectResizeObserver";
+import { sendPostMessage } from "../post-message/sendPostMessage";
+import { bindToWindow } from "../window/bindToWindow";
+import { setupEventListener } from "./events/setupEventListener";
+import { clearHighlightFrame } from "./highlight/clearHighlightFrame";
+import { highlightNode } from "./highlight/highlightNode";
+import { refreshHighlightFrame } from "./highlight/refreshHighlightFrame";
+import { nodeText } from "./text/nodeText";
+import type { NodeTools } from "./types";
+
+export const createNodeTools = (element: HTMLElement | null): NodeTools => {
+  const nodeProvider = element;
+
+  let resizeObserver: ResizeObserver | null = null;
+  let selectedNode: HTMLElement | null = null;
+
+  const text = nodeText();
+  const throttledFrameRefresh = withRAFThrottle(refreshHighlightFrame);
+
+  const handleEscape = (): void => {
+    if (text.isEditing()) {
+      text.blurEditMode();
+    }
+
+    if (selectedNode) {
+      if (nodeProvider) {
+        clearHighlightFrame(nodeProvider);
+        selectedNode = null;
+
+        resizeObserver?.disconnect();
+      }
+    }
+  };
+
+  const selectNode = (node: HTMLElement | null): void => {
+    if (text.isEditing()) {
+      const currentEditable = text.getEditableNode();
+      if (currentEditable && currentEditable !== node) {
+        text.blurEditMode();
+      }
+    }
+
+    resizeObserver?.disconnect();
+
+    if (node && nodeProvider) {
+      text.enableEditMode(node, nodeProvider);
+
+      resizeObserver = connectResizeObserver(nodeProvider, () => {
+        throttledFrameRefresh(node, nodeProvider);
+      });
+    }
+
+    selectedNode = node;
+    sendPostMessage("selectedNodeChanged", node?.getAttribute("data-layer-id") ?? null);
+    highlightNode(node, nodeProvider as HTMLElement) ?? null;
+  };
+
+  // Setup event listener
+  const removeListeners = setupEventListener(nodeProvider, selectNode, handleEscape, text.getEditableNode);
+
+  const cleanup = (): void => {
+    removeListeners();
+    resizeObserver?.disconnect();
+
+    text.blurEditMode();
+    throttledFrameRefresh.cleanup();
+  };
+
+  const nodeTools: NodeTools = {
+    selectNode,
+    getSelectedNode: () => selectedNode,
+    refreshHighlightFrame: () => {
+      throttledFrameRefresh(selectedNode as HTMLElement, nodeProvider as HTMLElement);
+    },
+    clearSelectedNode: () => {
+      clearHighlightFrame(nodeProvider);
+      selectedNode = null;
+      resizeObserver?.disconnect();
+    },
+    getEditableNode: () => text.getEditableNode(),
+    cleanup,
+  };
+
+  bindToWindow("nodeTools", nodeTools);
+
+  return nodeTools;
+};

package/src/lib/node-tools/events/click/handleNodeClick.ts

@@ -0,0 +1,21 @@
+import { clearHighlightFrame } from "../../highlight/clearHighlightFrame";
+import { selectNode } from "../../select/selectNode";
+
+export const handleNodeClick = (
+  event: MouseEvent,
+  nodeProvider: HTMLElement | null,
+  editableNode: HTMLElement | null,
+  onNodeSelected: (node: HTMLElement | null) => void
+): void => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (nodeProvider && !nodeProvider.contains(event.target as Node)) {
+    clearHighlightFrame(nodeProvider);
+    onNodeSelected(null);
+    return;
+  }
+
+  const selectedNode = selectNode(event, editableNode);
+  onNodeSelected(selectedNode);
+};

package/src/lib/node-tools/events/setupEventListener.ts

@@ -0,0 +1,35 @@
+import { handlePostMessage } from "../../post-message/handlePostMessage";
+import { handleNodeClick } from "./click/handleNodeClick";
+
+export const setupEventListener = (
+  nodeProvider: HTMLElement | null,
+  onNodeSelected: (node: HTMLElement | null) => void,
+  onEscapePressed: () => void,
+  getEditableNode: () => HTMLElement | null
+): (() => void) => {
+  const messageHandler = (event: MessageEvent) => {
+    handlePostMessage(event);
+  };
+
+  const documentClickHandler = (event: MouseEvent) => {
+    handleNodeClick(event, nodeProvider, getEditableNode(), onNodeSelected);
+  };
+
+  const documentKeydownHandler = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      onEscapePressed?.();
+    }
+  };
+
+  window.addEventListener("message", messageHandler);
+  document.addEventListener("click", documentClickHandler);
+  document.addEventListener("keydown", documentKeydownHandler);
+
+  return () => {
+    window.removeEventListener("message", messageHandler);
+    document.removeEventListener("click", documentClickHandler);
+    document.removeEventListener("keydown", documentKeydownHandler);
+  };
+};

package/src/lib/node-tools/highlight/clearHighlightFrame.ts

@@ -0,0 +1,12 @@
+import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
+
+export const clearHighlightFrame = (nodeProvider: HTMLElement | null): void => {
+  if (!nodeProvider) {
+    return;
+  }
+
+  const highlightFrame = getHighlightFrameElement(nodeProvider);
+  if (highlightFrame) {
+    highlightFrame.remove();
+  }
+};

package/src/lib/node-tools/highlight/createHighlightFrame.ts

@@ -0,0 +1,37 @@
+import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+import { getElementBounds } from "./helpers/getElementBounds";
+
+export const createHighlightFrame = (node: HTMLElement, nodeProvider: HTMLElement): HTMLElement => {
+  const { top, left, width, height } = getElementBounds(node, nodeProvider);
+
+  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+
+  document.body.style.setProperty("--zoom", zoom.toString());
+  document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
+
+  const frame = document.createElement("div");
+  frame.classList.add("highlight-frame");
+
+  frame.style.setProperty("--frame-top", `${top}px`);
+  frame.style.setProperty("--frame-left", `${left}px`);
+  frame.style.setProperty("--frame-width", `${width}px`);
+  frame.style.setProperty("--frame-height", `${height}px`);
+
+  // Create SVG overlay for outline
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.classList.add("highlight-frame-svg");
+
+  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  rect.setAttribute("x", "0");
+  rect.setAttribute("y", "0");
+  rect.setAttribute("width", "100%");
+  rect.setAttribute("height", "100%");
+  rect.classList.add("highlight-frame-rect");
+
+  svg.appendChild(rect);
+  frame.appendChild(svg);
+
+  const highlightFrame = frame;
+
+  return highlightFrame;
+};

package/src/lib/node-tools/highlight/createTagLabel.ts

@@ -0,0 +1,7 @@
+export const createTagLabel = (node: HTMLElement, nodeTools: HTMLElement): void => {
+  const tagLabel = document.createElement("div");
+  tagLabel.className = "tag-label";
+  tagLabel.textContent = node.tagName.toLowerCase();
+
+  nodeTools.appendChild(tagLabel);
+};

package/src/lib/node-tools/highlight/createToolsContainer.ts

@@ -0,0 +1,10 @@
+import { createTagLabel } from "./createTagLabel";
+
+export const createToolsContainer = (node: HTMLElement, highlightFrame: HTMLElement): void => {
+  const nodeTools = document.createElement("div");
+
+  nodeTools.className = "node-tools";
+  highlightFrame.appendChild(nodeTools);
+
+  createTagLabel(node, nodeTools);
+};

package/src/lib/node-tools/highlight/helpers/getElementBounds.ts

@@ -0,0 +1,31 @@
+import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+
+export function getElementBounds(
+  element: Element,
+  nodeProvider: HTMLElement
+): {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+} {
+  const elementRect = element.getBoundingClientRect();
+  const componentRootRect = nodeProvider.getBoundingClientRect();
+
+  const relativeTop = elementRect.top - componentRootRect.top;
+  const relativeLeft = elementRect.left - componentRootRect.left;
+
+  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+
+  const top = parseFloat((relativeTop / zoom).toFixed(5));
+  const left = parseFloat((relativeLeft / zoom).toFixed(5));
+  const width = Math.max(4, parseFloat((elementRect.width / zoom).toFixed(5)));
+  const height = parseFloat((elementRect.height / zoom).toFixed(5));
+
+  return {
+    top,
+    left,
+    width,
+    height,
+  };
+}

package/src/lib/node-tools/highlight/helpers/getHighlightFrameElement.ts

@@ -0,0 +1,5 @@
+export function getHighlightFrameElement(
+  nodeProvider: HTMLElement
+): HTMLElement | null {
+  return nodeProvider.querySelector(".highlight-frame");
+}

package/src/lib/node-tools/highlight/highlightNode.ts

@@ -0,0 +1,23 @@
+import { createHighlightFrame } from "./createHighlightFrame";
+import { createToolsContainer } from "./createToolsContainer";
+import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
+
+export const highlightNode = (node: HTMLElement | null, nodeProvider: HTMLElement): void => {
+  if (!node) return;
+
+  const existingHighlightFrame = getHighlightFrameElement(nodeProvider);
+
+  if (existingHighlightFrame) {
+    existingHighlightFrame.remove();
+  }
+
+  const highlightFrame = createHighlightFrame(node, nodeProvider);
+
+  if (node.contentEditable === "true") {
+    highlightFrame.classList.add("is-editable");
+  }
+
+  createToolsContainer(node, highlightFrame);
+
+  nodeProvider.appendChild(highlightFrame);
+};

package/src/lib/node-tools/highlight/refreshHighlightFrame.ts

@@ -0,0 +1,23 @@
+import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+import { getElementBounds } from "./helpers/getElementBounds";
+import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
+
+export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLElement) => {
+  const frame = getHighlightFrameElement(nodeProvider);
+  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+
+  if (!frame) return;
+
+  if (zoom >= 0.3) {
+    nodeProvider.style.setProperty("--tool-opacity", `1`);
+  } else {
+    nodeProvider.style.setProperty("--tool-opacity", `0`);
+  }
+
+  const { top, left, width, height } = getElementBounds(node, nodeProvider);
+
+  frame.style.setProperty("--frame-top", `${top}px`);
+  frame.style.setProperty("--frame-left", `${left}px`);
+  frame.style.setProperty("--frame-width", `${width}px`);
+  frame.style.setProperty("--frame-height", `${height}px`);
+};

package/src/lib/node-tools/select/constants.ts

@@ -0,0 +1 @@
+export const IGNORED_DOM_ELEMENTS = ["path", "rect", "circle", "ellipse", "polygon", "line", "polyline", "text", "text-noci"];

package/src/lib/node-tools/select/helpers/getElementsFromPoint.ts

@@ -0,0 +1,16 @@
+export const getElementsFromPoint = (clickX: number, clickY: number): Element[] => {
+  const elements = document.elementsFromPoint(clickX, clickY);
+
+  return Array.from(elements).reduce(
+    (acc: { elements: Element[]; found: boolean }, el) => {
+      if (acc.found) return acc;
+      if (el.getAttribute("data-role") === "node-provider") {
+        acc.found = true;
+        return acc;
+      }
+      acc.elements.push(el);
+      return acc;
+    },
+    { elements: [], found: false }
+  ).elements;
+};

package/src/lib/node-tools/select/helpers/targetSameCandidates.ts

@@ -0,0 +1,2 @@
+export const targetSameCandidates = (cache: Element[], current: Element[]): boolean =>
+  cache.length === current.length && cache.every((el, i) => el === current[i]);

package/src/lib/node-tools/select/selectNode.ts

@@ -0,0 +1,44 @@
+import { IGNORED_DOM_ELEMENTS } from "./constants";
+import { getElementsFromPoint } from "./helpers/getElementsFromPoint";
+import { targetSameCandidates } from "./helpers/targetSameCandidates";
+
+let candidateCache: Element[] = [];
+let attempt = 0;
+
+export const selectNode = (event: MouseEvent, editableNode: HTMLElement | null): HTMLElement | null => {
+  let selectedNode: HTMLElement | null = null;
+
+  const clickX = event.clientX;
+  const clickY = event.clientY;
+
+  const clickThrough = event.metaKey || event.ctrlKey;
+
+  const candidates = getElementsFromPoint(clickX, clickY).filter(
+    (element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase())
+  );
+
+  if (editableNode && candidates.includes(editableNode)) {
+    return editableNode;
+  }
+
+  if (clickThrough) {
+    candidateCache = [];
+
+    selectedNode = candidates[0] as HTMLElement;
+    return selectedNode;
+  }
+
+  if (targetSameCandidates(candidateCache, candidates)) {
+    attempt <= candidates.length && attempt++;
+  } else {
+    attempt = 0;
+  }
+
+  const nodeIndex = candidates.length - 1 - attempt;
+
+  selectedNode = candidates[nodeIndex] as HTMLElement;
+
+  candidateCache = candidates;
+
+  return selectedNode;
+};

package/src/lib/node-tools/text/events/setupKeydownHandler.ts

@@ -0,0 +1,18 @@
+import { insertLineBreak } from "../helpers/insertLineBreak";
+
+export const setupKeydownHandler = (node: HTMLElement): (() => void) => {
+  const keydownHandler = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+
+      insertLineBreak();
+    }
+  };
+
+  node.addEventListener("keydown", keydownHandler);
+
+  return () => {
+    node.removeEventListener("keydown", keydownHandler);
+  };
+};

package/src/lib/node-tools/text/events/setupMutationObserver.ts

@@ -0,0 +1,10 @@
+import { connectMutationObserver } from "../../../helpers/observer/connectMutationObserver";
+import { refreshHighlightFrame } from "../../highlight/refreshHighlightFrame";
+
+export const setupMutationObserver = (node: HTMLElement, nodeProvider: HTMLElement): (() => void) | undefined => {
+  const mutationObserver = connectMutationObserver(node, () => {
+    refreshHighlightFrame(node, nodeProvider);
+  });
+
+  return mutationObserver.disconnect;
+};

package/src/lib/node-tools/text/events/setupNodeListeners.ts

@@ -0,0 +1,20 @@
+import { setupKeydownHandler } from "./setupKeydownHandler";
+import { setupMutationObserver } from "./setupMutationObserver";
+
+export const setupNodeListeners = (node: HTMLElement, nodeProvider: HTMLElement | null, blur: () => void): (() => void) => {
+  if (!nodeProvider) {
+    return () => {};
+  }
+
+  node.addEventListener("blur", blur);
+
+  const keydownCleanup = setupKeydownHandler(node);
+
+  const mutationCleanup = setupMutationObserver(node, nodeProvider);
+
+  return () => {
+    node.removeEventListener("blur", blur);
+    keydownCleanup();
+    mutationCleanup?.();
+  };
+};

package/src/lib/node-tools/text/helpers/hasTextContent.ts

@@ -0,0 +1,3 @@
+export const hasTextContent = (node: HTMLElement): boolean => {
+  return Array.from(node.childNodes).some((child) => child.nodeType === Node.TEXT_NODE && child.textContent?.trim());
+};

package/src/lib/node-tools/text/helpers/insertLineBreak.ts

@@ -0,0 +1,17 @@
+export const insertLineBreak = (): void => {
+  const selection = window.getSelection();
+
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+
+    const br = document.createElement("br");
+    range.insertNode(br);
+
+    // Move cursor after the br
+    range.setStartAfter(br);
+    range.setEndAfter(br);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+};

package/src/lib/node-tools/text/helpers/makeNodeEditable.ts

@@ -0,0 +1,5 @@
+export const makeNodeEditable = (node: HTMLElement) => {
+  node.contentEditable = "true";
+  node.classList.add("is-editable");
+  node.style.outline = "none";
+};

package/src/lib/node-tools/text/helpers/makeNodeNonEditable.ts

@@ -0,0 +1,5 @@
+export const makeNodeNonEditable = (node: HTMLElement) => {
+  node.contentEditable = "false";
+  node.classList.remove("is-editable");
+  node.style.outline = "none";
+};