@node-edit-utils/core 1.2.2

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

@@ -0,0 +1,67 @@
+import { disableCanvasKeyboard } from "../../canvas/disableCanvasKeyboard";
+import { enableCanvasKeyboard } from "../../canvas/enableCanvasKeyboard";
+import { setupNodeListeners } from "./events/setupNodeListeners";
+import { hasTextContent } from "./helpers/hasTextContent";
+import { makeNodeEditable } from "./helpers/makeNodeEditable";
+import { makeNodeNonEditable } from "./helpers/makeNodeNonEditable";
+import type { NodeText } from "./types";
+
+export const nodeText = (): NodeText => {
+  let editableNode: HTMLElement | null = null;
+  let blurInProgress: boolean = false;
+  let cleanup: (() => void) | null = null;
+
+  const enableEditMode = (node: HTMLElement, nodeProvider: HTMLElement | null) => {
+    if (editableNode === node) {
+      return;
+    }
+
+    if (editableNode && editableNode !== node) {
+      blurEditMode();
+    }
+
+    const editable = hasTextContent(node);
+
+    if (editable) {
+      editableNode = node;
+
+      makeNodeEditable(node);
+      disableCanvasKeyboard();
+
+      cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
+    }
+  };
+
+  const getEditableNode = () => {
+    return editableNode;
+  };
+
+  const isEditing = () => {
+    return editableNode !== null;
+  };
+
+  const blurEditMode = () => {
+    if (blurInProgress || !editableNode) {
+      return;
+    }
+
+    blurInProgress = true;
+
+    const nodeToCleanup = editableNode;
+
+    makeNodeNonEditable(nodeToCleanup);
+    enableCanvasKeyboard();
+
+    cleanup?.();
+
+    editableNode = null;
+    blurInProgress = false;
+  };
+
+  return {
+    enableEditMode,
+    blurEditMode,
+    getEditableNode,
+    isEditing,
+  };
+};

package/src/lib/node-tools/text/types.d.ts

@@ -0,0 +1,6 @@
+export interface NodeText {
+  enableEditMode: (node: HTMLElement, nodeProvider: HTMLElement | null) => void;
+  blurEditMode: () => void;
+  getEditableNode: () => HTMLElement | null;
+  isEditing: () => boolean;
+}

package/src/lib/node-tools/types.d.ts

@@ -0,0 +1,12 @@
+export interface NodeTools {
+  selectNode(node: HTMLElement | null): void;
+  getSelectedNode(): HTMLElement | null;
+  getEditableNode(): HTMLElement | null;
+  refreshHighlightFrame(): void;
+  clearSelectedNode(): void;
+  cleanup(): void;
+}
+
+export interface NodeToolsRef extends HTMLDivElement {
+  nodeTools?: NodeTools;
+}

package/src/lib/post-message/handlePostMessage.ts

@@ -0,0 +1,8 @@
+export const handlePostMessage = (event: MessageEvent) => {
+  if (event.data.source === "markup-canvas" && event.data.canvasName === "canvas") {
+    if (event.data.action === "zoom") {
+      const zoom = event.data.data;
+      console.log("zoom", zoom);
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+export function sendPostMessage(action: string, data: unknown): void {
+  window.parent.postMessage(
+    {
+      source: "node-edit-utils",
+      action,
+      data,
+      timestamp: Date.now(),
+    },
+    "*"
+  );
+}

package/src/lib/styles/styles.css

@@ -0,0 +1,133 @@
+.node-provider {
+  ::selection {
+    background: transparent;
+  }
+
+  ::-moz-selection {
+    background: transparent;
+  }
+
+  ::-webkit-selection {
+    background: transparent;
+  }
+}
+
+.node-tools {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  gap: 0.25rem;
+  z-index: 10000;
+  transform: scale(calc(1 / var(--zoom))) translate3d(0, 100%, 0);
+  transform-origin: bottom left;
+  transition:
+    transform 0.025s ease,
+    opacity 0.1s ease;
+  opacity: var(--tool-opacity);
+  padding-top: 0.25rem;
+  display: flex;
+  justify-content: center;
+}
+
+.highlight-frame {
+  position: absolute;
+  top: var(--frame-top);
+  left: var(--frame-left);
+  width: var(--frame-width);
+  height: var(--frame-height);
+  z-index: 1000;
+  pointer-events: none;
+  /* outline: calc(0.125em / var(--zoom)) solid oklch(62.7% 0.265 303.9); */
+}
+
+.highlight-frame-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.highlight-frame-rect {
+  fill: none;
+  stroke: oklch(62.7% 0.265 303.9);
+  stroke-width: var(--stroke-width);
+}
+
+.tag-label {
+  background-color: oklch(62.7% 0.265 303.9);
+  color: white;
+  font-size: 0.575rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  line-height: 1;
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.viewport {
+  position: relative;
+  width: var(--container-width);
+}
+
+.resize-handle {
+  position: absolute;
+  top: 1.25rem;
+  right: -12px;
+  width: 12px;
+  height: 40px;
+  cursor: ew-resize;
+  z-index: 10000;
+  display: flex;
+  opacity: 0;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  transform: scale(calc(1 / var(--zoom)));
+  transform-origin: top left;
+  transition:
+    transform 0.025s ease,
+    opacity 0.2s ease-in-out;
+}
+
+.viewport:hover .resize-handle {
+  opacity: 1;
+}
+
+.resize-handle::before {
+  content: "";
+  position: relative;
+  top: 0;
+  right: 0;
+  width: 3px;
+  height: 32px;
+  background: oklch(55.2% 0.016 285.938);
+  border-radius: 4px;
+  transition: transform 0.2s ease-in-out;
+}
+
+.resize-handle:hover::before {
+  transform: scaleY(1.3);
+}
+
+.is-editable {
+  outline: none;
+  user-select: text;
+
+  &::selection {
+    background: oklch(62.7% 0.265 303.9 / 0.3);
+  }
+
+  &::-moz-selection {
+    background: oklch(62.7% 0.265 303.9 / 0.3);
+  }
+
+  &::-webkit-selection {
+    background: oklch(62.7% 0.265 303.9 / 0.3);
+  }
+}

package/src/lib/viewport/constants.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_WIDTH = 400;
+
+export const RESIZE_CONFIG = {
+  minWidth: 320,
+  maxWidth: 1680,
+} as const;

package/src/lib/viewport/createViewport.ts

@@ -0,0 +1,70 @@
+import { getCanvasContainer } from "../canvas/helpers/getCanvasContainer";
+import { withRAFThrottle } from "../helpers";
+import { DEFAULT_WIDTH } from "./constants";
+import { setupEventListener } from "./events/setupEventListener";
+import { createResizeHandle } from "./resize/createResizeHandle";
+import type { Viewport } from "./types";
+import { calcWidth } from "./width/calcWidth";
+import { updateWidth } from "./width/updateWidth";
+
+export const createViewport = (container: HTMLElement): Viewport => {
+  const canvas: HTMLElement | null = getCanvasContainer();
+  const resizeHandle = createResizeHandle(container);
+  container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
+
+  let isDragging: boolean = false;
+  let startX: number = 0;
+  let startWidth: number = 0;
+
+  const startResize = (event: MouseEvent): void => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    isDragging = true;
+    startX = event.clientX;
+    startWidth = container.offsetWidth;
+  };
+
+  const handleResize = (event: MouseEvent): void => {
+    if (!isDragging) return;
+
+    if (canvas) {
+      canvas.style.cursor = "ew-resize";
+    }
+
+    const width = calcWidth(event, startX, startWidth);
+    updateWidth(container, width);
+  };
+
+  const throttledHandleResize = withRAFThrottle(handleResize);
+
+  const stopResize = (event: MouseEvent): void => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (canvas) {
+      canvas.style.cursor = "default";
+    }
+
+    isDragging = false;
+  };
+
+  const blurResize = (): void => {
+    isDragging = false;
+  };
+
+  const removeListeners = setupEventListener(resizeHandle, startResize, throttledHandleResize, stopResize, blurResize);
+
+  const cleanup = (): void => {
+    isDragging = false;
+    throttledHandleResize?.cleanup();
+    removeListeners();
+  };
+
+  return {
+    setWidth: (width: number): void => {
+      updateWidth(container, width);
+    },
+    cleanup,
+  };
+};

package/src/lib/viewport/events/setupEventListener.ts

@@ -0,0 +1,20 @@
+export const setupEventListener = (
+  resizeHandle: HTMLElement,
+  startResize: (event: MouseEvent) => void,
+  handleResize: (event: MouseEvent) => void,
+  stopResize: (event: MouseEvent) => void,
+  blurResize: () => void
+): (() => void) => {
+  resizeHandle.addEventListener("mousedown", startResize);
+  document.addEventListener("mousemove", handleResize);
+  document.addEventListener("mouseup", stopResize);
+
+  window.addEventListener("blur", blurResize);
+
+  return () => {
+    resizeHandle.removeEventListener("mousedown", startResize);
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", stopResize);
+    window.removeEventListener("blur", blurResize);
+  };
+};

package/src/lib/viewport/resize/createResizeHandle.ts

@@ -0,0 +1,9 @@
+export const createResizeHandle = (container: HTMLElement): HTMLElement => {
+  const handle = document.createElement("div");
+
+  handle.className = "component-resize-handle resize-handle";
+
+  container.appendChild(handle);
+
+  return handle;
+};

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

@@ -0,0 +1,8 @@
+export interface Viewport {
+  setWidth: (width: number) => void;
+  cleanup: () => void;
+}
+
+export interface ViewportRef extends HTMLDivElement {
+  viewport?: Viewport;
+}

package/src/lib/viewport/width/calcConstrainedWidth.ts

@@ -0,0 +1,6 @@
+import { RESIZE_CONFIG } from "../constants";
+
+export const calcConstrainedWidth = (startWidth: number, deltaX: number): number => {
+  const newWidth = startWidth + Math.round(deltaX);
+  return Math.max(RESIZE_CONFIG.minWidth, Math.min(RESIZE_CONFIG.maxWidth, newWidth));
+};

package/src/lib/viewport/width/calcWidth.ts

@@ -0,0 +1,9 @@
+import { calcConstrainedWidth } from "./calcConstrainedWidth";
+
+export const calcWidth = (event: MouseEvent, startX: number, startWidth: number): number => {
+  const zoom = parseFloat(document.body.dataset.zoom || "1");
+  const deltaX = (event.clientX - startX) / zoom;
+  const width = calcConstrainedWidth(startWidth, deltaX);
+
+  return width;
+};

package/src/lib/viewport/width/updateWidth.ts

@@ -0,0 +1,3 @@
+export const updateWidth = (container: HTMLElement, width: number): void => {
+  container.style.setProperty("--container-width", `${width}px`);
+};

package/src/lib/window/bindToWindow.ts

@@ -0,0 +1,6 @@
+export const bindToWindow = <T>(key: string, value: T): void => {
+  if (typeof window !== "undefined") {
+    // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
+    (window as any)[key] = value;
+  }
+};

package/src/umd.ts

@@ -0,0 +1 @@
+export * from "./index";