orio-ui 1.20.0 → 1.23.2

package/dist/runtime/components/Canvas/tools/imageTool.js

@@ -0,0 +1,163 @@
+import { defineCanvasTool } from "../types.js";
+import ImageTooltip from "./tooltips/Image.vue";
+const DEFAULT_ACCEPT = "image/png,image/jpeg,image/webp,image/gif,image/svg+xml,image/avif,image/bmp";
+function makeCache() {
+  return /* @__PURE__ */ new Map();
+}
+function fileToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+function decodeImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+    img.src = src;
+  });
+}
+export function imageTool(options = {}) {
+  const cache = makeCache();
+  let latestApi = null;
+  function ensureLoaded(src) {
+    const existing = cache.get(src);
+    if (existing) return existing;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    const entry = { img, failed: false };
+    const triggerRender = () => {
+      if (latestApi) {
+        latestApi.requestRender();
+      } else {
+        const poll = () => {
+          if (latestApi) latestApi.requestRender();
+          else requestAnimationFrame(poll);
+        };
+        requestAnimationFrame(poll);
+      }
+    };
+    img.onload = triggerRender;
+    img.onerror = () => {
+      entry.failed = true;
+      console.warn(`[imageTool] Failed to load image: ${src}`);
+      triggerRender();
+    };
+    img.src = src;
+    cache.set(src, entry);
+    return entry;
+  }
+  function pickFiles(input) {
+    return new Promise((resolve) => {
+      let settled = false;
+      let focusTimer = null;
+      const cleanup = () => {
+        input.onchange = null;
+        input.oncancel = null;
+        window.removeEventListener("focus", onFocus);
+        if (focusTimer !== null) {
+          clearTimeout(focusTimer);
+          focusTimer = null;
+        }
+      };
+      const settle = (value) => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        resolve(value);
+      };
+      const onFocus = () => {
+        focusTimer = setTimeout(() => {
+          if (!settled) {
+            settle(input.files && input.files.length > 0 ? input.files : null);
+          }
+        }, 300);
+      };
+      input.onchange = () => settle(input.files);
+      input.oncancel = () => settle(null);
+      window.addEventListener("focus", onFocus);
+      input.click();
+    });
+  }
+  async function pickAndAdd(api) {
+    latestApi = api;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = api.options.accept;
+    input.multiple = api.options.multiple;
+    const file = await pickFiles(input);
+    if (!file || file.length === 0) return;
+    const { width: cw, height: ch } = api.size();
+    for (const f of Array.from(file)) {
+      try {
+        const src = await fileToDataUrl(f);
+        const img = await decodeImage(src);
+        cache.set(src, { img, failed: false });
+        const max = api.options.maxSize;
+        const scale = Math.min(
+          1,
+          max / Math.max(img.naturalWidth, img.naturalHeight)
+        );
+        const w = img.naturalWidth * scale;
+        const h = img.naturalHeight * scale;
+        api.addNode({
+          type: "image",
+          x: (cw - w) / 2,
+          y: (ch - h) / 2,
+          width: w,
+          height: h,
+          data: {
+            src,
+            naturalWidth: img.naturalWidth,
+            naturalHeight: img.naturalHeight,
+            alt: f.name
+          }
+        });
+      } catch {
+      }
+    }
+  }
+  return defineCanvasTool({
+    id: "image",
+    label: "Image",
+    icon: "image",
+    kind: "action",
+    tooltip: ImageTooltip,
+    defaultOptions: {
+      accept: DEFAULT_ACCEPT,
+      maxSize: 320,
+      multiple: false,
+      ...options
+    },
+    disabled(api) {
+      latestApi = api;
+      return false;
+    },
+    action(api) {
+      latestApi = api;
+      void pickAndAdd(api);
+    },
+    render(ctx, node) {
+      const data = node.data;
+      if (!data?.src) return;
+      const w = node.width ?? data.naturalWidth;
+      const h = node.height ?? data.naturalHeight;
+      const entry = ensureLoaded(data.src);
+      if (!entry.failed && entry.img.complete && entry.img.naturalWidth > 0) {
+        ctx.drawImage(entry.img, node.x, node.y, w, h);
+        return;
+      }
+      ctx.save();
+      ctx.fillStyle = entry.failed ? "rgba(200, 0, 0, 0.08)" : "rgba(0, 0, 0, 0.05)";
+      ctx.fillRect(node.x, node.y, w, h);
+      ctx.strokeStyle = entry.failed ? "rgba(200, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.2)";
+      ctx.lineWidth = 1;
+      ctx.strokeRect(node.x, node.y, w, h);
+      ctx.restore();
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/moveTool.d.ts

@@ -0,0 +1,5 @@
+export interface MoveToolOptions extends Record<string, unknown> {
+    /** Hit-test radius in CSS pixels. */
+    radius: number;
+}
+export declare function moveTool(options?: Partial<MoveToolOptions>): import("../types.js").CanvasTool<never, MoveToolOptions>;

package/dist/runtime/components/Canvas/tools/moveTool.js

@@ -0,0 +1,94 @@
+import { defineCanvasTool } from "../types.js";
+import { findTopNode, renderHighlightRect } from "./hitTest.js";
+import MoveTooltip from "./tooltips/Move.vue";
+export function moveTool(options = {}) {
+  let activeNodeId = null;
+  let hoveredNodeId = null;
+  let lastX = 0;
+  let lastY = 0;
+  return defineCanvasTool({
+    id: "move",
+    label: "Move",
+    icon: "move",
+    cursor: "grab",
+    tooltip: MoveTooltip,
+    defaultOptions: {
+      radius: 10,
+      ...options
+    },
+    onPointerDown(e, api) {
+      const node = findTopNode(e, api, api.options.radius);
+      if (!node) return;
+      activeNodeId = node.id;
+      hoveredNodeId = node.id;
+      lastX = e.x;
+      lastY = e.y;
+    },
+    onPointerMove(e, api) {
+      if (activeNodeId && e.buttons !== 0) {
+        const node2 = api.getNode(activeNodeId);
+        if (!node2) return;
+        const dx = e.x - lastX;
+        const dy = e.y - lastY;
+        lastX = e.x;
+        lastY = e.y;
+        const patch = {
+          x: node2.x + dx,
+          y: node2.y + dy
+        };
+        if (Array.isArray(node2.data?.points)) {
+          const data = node2.data;
+          patch.data = {
+            ...node2.data,
+            points: data.points.map((p) => ({ x: p.x + dx, y: p.y + dy }))
+          };
+        }
+        api.updateNode(activeNodeId, patch);
+        return;
+      }
+      const node = findTopNode(e, api, api.options.radius);
+      const newId = node?.id ?? null;
+      if (newId !== hoveredNodeId) {
+        hoveredNodeId = newId;
+        api.requestRender();
+      }
+    },
+    onPointerUp() {
+      activeNodeId = null;
+    },
+    onDeactivate(api) {
+      if (hoveredNodeId) {
+        hoveredNodeId = null;
+        api.requestRender();
+      }
+    },
+    onKeyDown(e, api) {
+      const targetId = activeNodeId ?? hoveredNodeId;
+      if (!targetId) return;
+      if (e.key !== "[" && e.key !== "]") return;
+      const node = api.getNode(targetId);
+      if (!node) return;
+      const nodes = api.nodes.value;
+      const zIndices = nodes.map((n) => n.zIndex ?? 0);
+      const currentZ = node.zIndex ?? 0;
+      if (e.key === "]") {
+        const maxZ = Math.max(...zIndices);
+        if (currentZ < maxZ) {
+          api.updateNode(targetId, { zIndex: maxZ + 1 });
+        }
+      } else {
+        const minZ = Math.min(...zIndices);
+        if (currentZ > minZ) {
+          api.updateNode(targetId, { zIndex: minZ - 1 });
+        }
+      }
+    },
+    renderOverlay(ctx, api) {
+      const id = activeNodeId ?? hoveredNodeId;
+      if (!id) return;
+      const node = api.getNode(id);
+      if (!node) return;
+      renderHighlightRect(ctx, node);
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/redoTool.d.ts

@@ -0,0 +1 @@
+export declare function redoTool(): import("../types.js").CanvasTool<unknown, Record<string, unknown>>;

package/dist/runtime/components/Canvas/tools/redoTool.js

@@ -0,0 +1,17 @@
+import { defineCanvasTool } from "../types.js";
+import Redo from "./tooltips/Redo.vue";
+export function redoTool() {
+  return defineCanvasTool({
+    id: "redo",
+    label: "Redo",
+    icon: "redo",
+    kind: "action",
+    tooltip: Redo,
+    action(api) {
+      api.redo();
+    },
+    disabled(api) {
+      return !api.canRedo.value;
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/resizeTool.d.ts

@@ -0,0 +1,7 @@
+export interface ResizeToolOptions extends Record<string, unknown> {
+    /** Hit-test radius in CSS pixels for picking a node to select. */
+    radius: number;
+    /** Minimum side length when resizing. */
+    minSize: number;
+}
+export declare function resizeTool(options?: Partial<ResizeToolOptions>): import("../types.js").CanvasTool<never, ResizeToolOptions>;

package/dist/runtime/components/Canvas/tools/resizeTool.js

@@ -0,0 +1,132 @@
+import { defineCanvasTool } from "../types.js";
+import {
+  findTopNode,
+  getNodeBounds,
+  renderHighlightRect,
+  toLocalPoint
+} from "./hitTest.js";
+import {
+  computeResizePatch,
+  cursorForHandle,
+  hitHandle,
+  renderResizeHandles
+} from "./transformHandles.js";
+import ResizeTooltip from "./tooltips/Resize.vue";
+const RESIZE_HANDLES = [
+  "n",
+  "s",
+  "e",
+  "w",
+  "nw",
+  "ne",
+  "sw",
+  "se"
+];
+export function resizeTool(options = {}) {
+  let selectedNodeId = null;
+  let activeHandle = null;
+  let dragCtx = null;
+  let hoveredHandle = null;
+  function clearSelection(api) {
+    if (selectedNodeId) {
+      selectedNodeId = null;
+      hoveredHandle = null;
+      api.setCursor(null);
+      api.requestRender();
+    }
+  }
+  return defineCanvasTool({
+    id: "resize",
+    label: "Resize",
+    icon: "resize",
+    cursor: "default",
+    tooltip: ResizeTooltip,
+    defaultOptions: {
+      radius: 10,
+      minSize: 8,
+      ...options
+    },
+    onPointerDown(e, api) {
+      if (selectedNodeId) {
+        const node2 = api.getNode(selectedNodeId);
+        if (node2) {
+          const handle = hitHandle(node2, e, { handles: RESIZE_HANDLES });
+          if (handle && handle !== "rotate") {
+            activeHandle = handle;
+            dragCtx = {
+              original: {
+                ...node2,
+                data: JSON.parse(JSON.stringify(node2.data))
+              },
+              originalBounds: getNodeBounds(node2),
+              startLocal: toLocalPoint(node2, e)
+            };
+            api.setCursor("none");
+            return;
+          }
+        }
+      }
+      const node = findTopNode(e, api, api.options.radius);
+      selectedNodeId = node ? node.id : null;
+      hoveredHandle = null;
+      api.requestRender();
+    },
+    onPointerMove(e, api) {
+      if (activeHandle && dragCtx && selectedNodeId && e.buttons !== 0) {
+        const node = api.getNode(selectedNodeId);
+        if (!node) return;
+        const local = toLocalPoint(dragCtx.original, e);
+        const patch = computeResizePatch(activeHandle, local, dragCtx, {
+          minSize: api.options.minSize
+        });
+        if (patch) api.updateNode(selectedNodeId, patch);
+        api.setCursor("none");
+        return;
+      }
+      if (selectedNodeId) {
+        const node = api.getNode(selectedNodeId);
+        if (node) {
+          const handle = hitHandle(node, e, { handles: RESIZE_HANDLES });
+          const next = handle && handle !== "rotate" ? handle : null;
+          if (next !== hoveredHandle) {
+            hoveredHandle = next;
+            api.requestRender();
+          }
+          api.setCursor(next ? cursorForHandle(next, node.rotation) : null);
+          return;
+        }
+      }
+      api.setCursor(null);
+    },
+    onPointerUp(_e, api) {
+      activeHandle = null;
+      dragCtx = null;
+      api.setCursor(null);
+    },
+    onDeactivate(api) {
+      activeHandle = null;
+      dragCtx = null;
+      api.setCursor(null);
+      clearSelection(api);
+    },
+    onKeyDown(e, api) {
+      if (e.key === "Escape" && selectedNodeId) {
+        clearSelection(api);
+        e.preventDefault();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!selectedNodeId) return;
+      const node = api.getNode(selectedNodeId);
+      if (!node) {
+        selectedNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node);
+      renderResizeHandles(ctx, node, {
+        handles: RESIZE_HANDLES,
+        hovered: activeHandle ?? hoveredHandle
+      });
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/rotateTool.d.ts

@@ -0,0 +1,5 @@
+export interface RotateToolOptions extends Record<string, unknown> {
+    /** Hit-test radius in CSS pixels for picking a node to select. */
+    radius: number;
+}
+export declare function rotateTool(options?: Partial<RotateToolOptions>): import("../types.js").CanvasTool<never, RotateToolOptions>;

package/dist/runtime/components/Canvas/tools/rotateTool.js

@@ -0,0 +1,109 @@
+import { defineCanvasTool } from "../types.js";
+import { findTopNode, getNodeBounds, renderHighlightRect } from "./hitTest.js";
+import {
+  cursorForHandle,
+  hitHandle,
+  normalizeAngleDelta,
+  renderRotationHandle
+} from "./transformHandles.js";
+import RotateTooltip from "./tooltips/Rotate.vue";
+export function rotateTool(options = {}) {
+  let selectedNodeId = null;
+  let prevAngle = 0;
+  let accumulatedRotation = 0;
+  let dragging = false;
+  function clearSelection(api) {
+    dragging = false;
+    prevAngle = 0;
+    if (selectedNodeId) {
+      selectedNodeId = null;
+      api.setCursor(null);
+      api.requestRender();
+    }
+  }
+  return defineCanvasTool({
+    id: "rotate",
+    label: "Rotate",
+    icon: "rotate",
+    cursor: "default",
+    tooltip: RotateTooltip,
+    defaultOptions: {
+      radius: 10,
+      ...options
+    },
+    onPointerDown(e, api) {
+      if (selectedNodeId) {
+        const node2 = api.getNode(selectedNodeId);
+        if (node2) {
+          const handle = hitHandle(node2, e, { handles: ["rotate"] });
+          if (handle === "rotate") {
+            const b = getNodeBounds(node2);
+            dragging = true;
+            accumulatedRotation = node2.rotation ?? 0;
+            prevAngle = Math.atan2(
+              e.y - (b.y + b.height / 2),
+              e.x - (b.x + b.width / 2)
+            );
+            api.setCursor("none");
+            return;
+          }
+        }
+      }
+      dragging = false;
+      prevAngle = 0;
+      const node = findTopNode(e, api, api.options.radius);
+      selectedNodeId = node ? node.id : null;
+      api.requestRender();
+    },
+    onPointerMove(e, api) {
+      if (dragging && selectedNodeId && e.buttons !== 0) {
+        const node = api.getNode(selectedNodeId);
+        if (!node) return;
+        const b = getNodeBounds(node);
+        const angle = Math.atan2(
+          e.y - (b.y + b.height / 2),
+          e.x - (b.x + b.width / 2)
+        );
+        accumulatedRotation += normalizeAngleDelta(angle - prevAngle);
+        prevAngle = angle;
+        api.updateNode(selectedNodeId, { rotation: accumulatedRotation });
+        api.setCursor("none");
+        return;
+      }
+      if (selectedNodeId) {
+        const node = api.getNode(selectedNodeId);
+        if (node) {
+          const handle = hitHandle(node, e, { handles: ["rotate"] });
+          api.setCursor(handle ? cursorForHandle(handle, node.rotation) : null);
+          return;
+        }
+      }
+      api.setCursor(null);
+    },
+    onPointerUp(_e, api) {
+      dragging = false;
+      api.setCursor(null);
+    },
+    onDeactivate(api) {
+      dragging = false;
+      api.setCursor(null);
+      clearSelection(api);
+    },
+    onKeyDown(e, api) {
+      if (e.key === "Escape" && selectedNodeId) {
+        clearSelection(api);
+        e.preventDefault();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!selectedNodeId) return;
+      const node = api.getNode(selectedNodeId);
+      if (!node) {
+        selectedNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node);
+      renderRotationHandle(ctx, node);
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/textTool.d.ts

@@ -0,0 +1,14 @@
+export interface TextToolOptions extends Record<string, unknown> {
+    fontSize: number;
+    fontFamily: string;
+    color: string;
+    weight: "normal" | "bold" | number;
+}
+export interface TextNodeData {
+    text: string;
+    fontSize: number;
+    fontFamily: string;
+    color: string;
+    weight: TextToolOptions["weight"];
+}
+export declare function textTool(options?: Partial<TextToolOptions>): import("../types.js").CanvasTool<TextNodeData, TextToolOptions>;

package/dist/runtime/components/Canvas/tools/textTool.js

@@ -0,0 +1,99 @@
+import { defineCanvasTool } from "../types.js";
+import TextTooltip from "./tooltips/Text.vue";
+export function textTool(options = {}) {
+  return defineCanvasTool({
+    id: "text",
+    label: "Text",
+    icon: "text",
+    cursor: "text",
+    tooltip: TextTooltip,
+    defaultOptions: {
+      fontSize: 24,
+      fontFamily: "system-ui, sans-serif",
+      color: "#111111",
+      weight: "normal",
+      ...options
+    },
+    onPointerDown(e, api) {
+      const stage = api.stageEl();
+      if (!stage) return;
+      if (e.originalEvent.target?.closest?.(
+        ".canvas-text-editor"
+      )) {
+        return;
+      }
+      const input = document.createElement("input");
+      input.type = "text";
+      input.className = "canvas-text-editor";
+      input.style.position = "absolute";
+      input.style.left = `${e.x}px`;
+      input.style.top = `${e.y}px`;
+      input.style.transform = "translateY(-50%)";
+      input.style.font = `${api.options.weight} ${api.options.fontSize}px ${api.options.fontFamily}`;
+      input.style.color = api.options.color;
+      input.style.background = "transparent";
+      input.style.border = "1px dashed currentColor";
+      input.style.outline = "none";
+      input.style.padding = "0 2px";
+      input.style.minWidth = "1ch";
+      input.style.zIndex = "10";
+      const snapshot = { ...api.options };
+      stage.appendChild(input);
+      requestAnimationFrame(() => input.focus());
+      let committed = false;
+      const commit = () => {
+        if (committed) return;
+        committed = true;
+        const text = input.value;
+        input.remove();
+        if (!text.trim()) return;
+        api.addNode({
+          type: "text",
+          x: e.x,
+          y: e.y,
+          data: {
+            text,
+            fontSize: snapshot.fontSize,
+            fontFamily: snapshot.fontFamily,
+            color: snapshot.color,
+            weight: snapshot.weight
+          }
+        });
+        api.requestRender();
+      };
+      const cancel = () => {
+        if (committed) return;
+        committed = true;
+        input.remove();
+      };
+      input.addEventListener("blur", commit);
+      input.addEventListener("keydown", (ev) => {
+        if (ev.key === "Enter") {
+          ev.preventDefault();
+          input.blur();
+        } else if (ev.key === "Escape") {
+          ev.preventDefault();
+          input.removeEventListener("blur", commit);
+          cancel();
+        }
+      });
+    },
+    hitTest(node, point, radius) {
+      const { text, fontSize } = node.data;
+      if (!text) return false;
+      const estimatedWidth = text.length * fontSize * 0.6;
+      const halfHeight = fontSize / 2;
+      return point.x + radius >= node.x && point.x - radius <= node.x + estimatedWidth && point.y + radius >= node.y - halfHeight && point.y - radius <= node.y + halfHeight;
+    },
+    render(ctx, node) {
+      const { text, fontSize, fontFamily, color, weight } = node.data;
+      if (!text) return;
+      ctx.save();
+      ctx.font = `${weight} ${fontSize}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, node.x, node.y);
+      ctx.restore();
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/tooltips/Clear.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Clear.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Clear</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Remove all nodes from the canvas.
+    </orio-view-text>
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:200px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Clear.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Draw.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;