orio-ui 1.19.0 → 1.23.2

package/dist/runtime/components/Canvas/tools/ColorPickerWidget.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CanvasTool } from "../types.js";
+interface Props {
+    tool: CanvasTool;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/ColorPickerWidget.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { useCanvasContext } from "../context";
+const props = defineProps({
+  tool: { type: Object, required: true }
+});
+const ctx = useCanvasContext();
+const options = ctx.getToolOptions(props.tool.id);
+function onChange(e) {
+  const color = e.target.value;
+  options.color = color;
+  for (const targetId of options.targets ?? []) {
+    const targetOpts = ctx.getToolOptions(targetId);
+    if (targetOpts) targetOpts.color = color;
+  }
+}
+</script>
+
+<template>
+  <orio-control-element>
+    <input
+      type="color"
+      :value="options.color"
+      :title="tool.label ?? 'Color'"
+      class="canvas-color-picker"
+      @input="onChange"
+    />
+  </orio-control-element>
+</template>
+
+<style scoped>
+.canvas-color-picker{background:none;border:1px solid var(--color-border,#ddd);border-radius:4px;cursor:pointer;height:1.75rem;padding:0;width:2rem}
+</style>

package/dist/runtime/components/Canvas/tools/ColorPickerWidget.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasTool } from "../types.js";
+interface Props {
+    tool: CanvasTool;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,16 @@
+import { defineCanvasTool } from "../types.js";
+import ClearTooltip from "./tooltips/Clear.vue";
+export function clearTool() {
+  return defineCanvasTool({
+    id: "clear",
+    label: "Clear",
+    kind: "action",
+    tooltip: ClearTooltip,
+    action(api) {
+      api.clear();
+    },
+    disabled(api) {
+      return api.nodes.value.every((n) => n.frozen);
+    }
+  });
+}

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

@@ -0,0 +1,6 @@
+export interface ColorPickerToolOptions extends Record<string, unknown> {
+    color: string;
+    /** Tool ids whose `color` option should be synced. */
+    targets: string[];
+}
+export declare function colorPickerTool(options?: Partial<ColorPickerToolOptions>): import("../types.js").CanvasTool<never, ColorPickerToolOptions>;

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

@@ -0,0 +1,15 @@
+import { defineCanvasTool } from "../types.js";
+import ColorPickerWidget from "./ColorPickerWidget.vue";
+export function colorPickerTool(options = {}) {
+  return defineCanvasTool({
+    id: "color-picker",
+    label: "Color",
+    kind: "widget",
+    toolbar: ColorPickerWidget,
+    defaultOptions: {
+      color: "#111111",
+      targets: [],
+      ...options
+    }
+  });
+}

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

@@ -0,0 +1,16 @@
+import type { CanvasPoint } from "../types.js";
+export interface DrawToolOptions extends Record<string, unknown> {
+    color: string;
+    size: number;
+    opacity: number;
+    /** Reserved for future brushes (eraser, marker, airbrush...). */
+    brush: "pen" | "marker";
+}
+export interface DrawNodeData {
+    points: CanvasPoint[];
+    color: string;
+    size: number;
+    opacity: number;
+    brush: DrawToolOptions["brush"];
+}
+export declare function drawTool(options?: Partial<DrawToolOptions>): import("../types.js").CanvasTool<DrawNodeData, DrawToolOptions>;

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

@@ -0,0 +1,92 @@
+import { defineCanvasTool } from "../types.js";
+import DrawTooltip from "./tooltips/Draw.vue";
+export function drawTool(options = {}) {
+  let activeStrokeId = null;
+  return defineCanvasTool({
+    id: "draw",
+    label: "Draw",
+    icon: "pencil",
+    cursor: "crosshair",
+    tooltip: DrawTooltip,
+    defaultOptions: {
+      color: "#111111",
+      size: 4,
+      opacity: 1,
+      brush: "pen",
+      ...options
+    },
+    onPointerDown(e, api) {
+      const node = api.addNode({
+        type: "draw",
+        x: 0,
+        y: 0,
+        data: {
+          points: [{ x: e.x, y: e.y }],
+          color: api.options.color,
+          size: api.options.size,
+          opacity: api.options.opacity,
+          brush: api.options.brush
+        }
+      });
+      activeStrokeId = node.id;
+    },
+    onPointerMove(e, api) {
+      if (!activeStrokeId || e.buttons === 0) return;
+      const node = api.getNode(activeStrokeId);
+      if (!node) return;
+      node.data.points.push({ x: e.x, y: e.y });
+      api.requestRender();
+    },
+    onPointerUp(_e, api) {
+      if (!activeStrokeId) return;
+      const node = api.getNode(activeStrokeId);
+      if (node) {
+        api.updateNode(activeStrokeId, {
+          data: { ...node.data }
+        });
+      }
+      activeStrokeId = null;
+    },
+    hitTest(node, point, radius) {
+      const { points, size } = node.data;
+      const r = radius + size / 2;
+      return points.some(
+        (p) => (p.x - point.x) ** 2 + (p.y - point.y) ** 2 <= r * r
+      );
+    },
+    render(ctx, node) {
+      const { points, color, size, opacity, brush } = node.data;
+      if (points.length === 0) return;
+      ctx.save();
+      ctx.globalAlpha = opacity;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = size;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      if (brush === "marker") {
+        ctx.globalCompositeOperation = "multiply";
+      }
+      ctx.beginPath();
+      if (points.length === 1) {
+        const [p] = points;
+        ctx.arc(p.x, p.y, Math.max(size / 2, 0.5), 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+        ctx.restore();
+        return;
+      }
+      ctx.moveTo(points[0].x, points[0].y);
+      for (let i = 1; i < points.length - 1; i++) {
+        const p = points[i];
+        const next = points[i + 1];
+        const mx = (p.x + next.x) / 2;
+        const my = (p.y + next.y) / 2;
+        ctx.quadraticCurveTo(p.x, p.y, mx, my);
+      }
+      const last = points[points.length - 1];
+      ctx.lineTo(last.x, last.y);
+      ctx.stroke();
+      ctx.restore();
+    }
+  });
+}

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

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

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

@@ -0,0 +1,62 @@
+import { defineCanvasTool } from "../types.js";
+import { findTopNode, renderHighlightRect } from "./hitTest.js";
+import EraseTooltip from "./tooltips/Erase.vue";
+export function eraseTool(options = {}) {
+  let erasing = false;
+  let hoveredNodeId = null;
+  function eraseAt(point, api) {
+    const node = findTopNode(point, api, api.options.radius);
+    if (node) {
+      hoveredNodeId = null;
+      api.removeNode(node.id);
+    }
+  }
+  return defineCanvasTool({
+    id: "erase",
+    label: "Eraser",
+    icon: "eraser",
+    cursor: "crosshair",
+    tooltip: EraseTooltip,
+    defaultOptions: {
+      radius: 10,
+      ...options
+    },
+    onPointerDown(e, api) {
+      erasing = true;
+      eraseAt(e, api);
+    },
+    onPointerMove(e, api) {
+      if (erasing && e.buttons !== 0) {
+        eraseAt(e, api);
+        return;
+      }
+      const node = findTopNode(e, api, api.options.radius);
+      const newId = node?.id ?? null;
+      if (newId !== hoveredNodeId) {
+        hoveredNodeId = newId;
+        api.requestRender();
+      }
+    },
+    onPointerUp() {
+      erasing = false;
+    },
+    onDeactivate(api) {
+      if (hoveredNodeId) {
+        hoveredNodeId = null;
+        api.requestRender();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!hoveredNodeId) return;
+      const node = api.getNode(hoveredNodeId);
+      if (!node) {
+        hoveredNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node, {
+        strokeColor: "rgba(220, 53, 69, 0.8)",
+        fillColor: "rgba(220, 53, 69, 0.08)"
+      });
+    }
+  });
+}

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

@@ -0,0 +1,18 @@
+import type { CanvasTool } from "../types.js";
+/**
+ * Image formats Canvas2D's `toBlob`/`toDataURL` natively supports across
+ * modern browsers. Anything else (e.g. AVIF, TIFF) is encoder-dependent and
+ * not guaranteed to round-trip.
+ */
+export type ExportFormat = "png" | "jpeg" | "webp";
+export interface ExportToolOptions extends Record<string, unknown> {
+    /** Output format. Defaults to PNG. */
+    format: ExportFormat;
+    /** Quality for lossy formats (jpeg, webp), 0–1. Ignored for PNG. */
+    quality: number;
+    /** File name without extension. */
+    filename: string;
+    /** Pixel scale relative to the visible canvas (1 = same size). */
+    scale: number;
+}
+export declare function exportTool(options?: Partial<ExportToolOptions>): CanvasTool<never, ExportToolOptions>;

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

@@ -0,0 +1,89 @@
+import { defineCanvasTool } from "../types.js";
+import { getNodeBounds } from "./hitTest.js";
+import ExportTooltip from "./tooltips/Export.vue";
+const MIME_TYPES = {
+  png: "image/png",
+  jpeg: "image/jpeg",
+  webp: "image/webp"
+};
+function renderNodesTo(target, nodes, tools) {
+  const toolMap = new Map(tools.map((t) => [t.id, t]));
+  const ordered = [...nodes].sort(
+    (a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0)
+  );
+  for (const node of ordered) {
+    const renderFn = toolMap.get(node.type)?.render;
+    if (!renderFn) continue;
+    if (node.rotation) {
+      const b = getNodeBounds(node);
+      const cx = b.x + b.width / 2;
+      const cy = b.y + b.height / 2;
+      target.save();
+      target.translate(cx, cy);
+      target.rotate(node.rotation);
+      target.translate(-cx, -cy);
+      renderFn(target, node);
+      target.restore();
+    } else {
+      renderFn(target, node);
+    }
+  }
+}
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+export function exportTool(options = {}) {
+  return defineCanvasTool({
+    id: "export",
+    label: "Export",
+    icon: "export",
+    kind: "action",
+    tooltip: ExportTooltip,
+    defaultOptions: {
+      format: "png",
+      quality: 0.92,
+      filename: "canvas",
+      scale: 1,
+      ...options
+    },
+    disabled(api) {
+      return api.nodes.value.length === 0;
+    },
+    action(api) {
+      const { quality, scale } = api.options;
+      const { width, height } = api.size();
+      const knownFormat = MIME_TYPES[api.options.format] ? api.options.format : "png";
+      const mime = MIME_TYPES[knownFormat];
+      const ext = knownFormat === "jpeg" ? "jpg" : knownFormat;
+      const sanitized = api.options.filename.replace(/[^A-Za-z0-9._-]/g, "_") || "canvas";
+      const out = document.createElement("canvas");
+      const w = Math.max(1, Math.round(width * scale));
+      const h = Math.max(1, Math.round(height * scale));
+      out.width = w;
+      out.height = h;
+      const c = out.getContext("2d");
+      if (!c) return;
+      c.scale(scale, scale);
+      if (knownFormat === "jpeg") {
+        c.fillStyle = "#ffffff";
+        c.fillRect(0, 0, width, height);
+      }
+      renderNodesTo(c, api.nodes.value, api.getTools());
+      out.toBlob(
+        (blob) => {
+          if (!blob) return;
+          downloadBlob(blob, `${sanitized}.${ext}`);
+        },
+        mime,
+        knownFormat === "png" ? void 0 : quality
+      );
+    }
+  });
+}

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

@@ -0,0 +1,11 @@
+export interface HighlightToolOptions extends Record<string, unknown> {
+    /** Hit-test radius in CSS pixels. */
+    radius: number;
+    /** Highlight stroke color. */
+    strokeColor: string;
+    /** Highlight fill color (transparent). */
+    fillColor: string;
+    /** Highlight stroke width. */
+    lineWidth: number;
+}
+export declare function highlightTool(options?: Partial<HighlightToolOptions>): import("../types.js").CanvasTool<never, HighlightToolOptions>;

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

@@ -0,0 +1,51 @@
+import { defineCanvasTool } from "../types.js";
+import { findTopNode, renderHighlightRect } from "./hitTest.js";
+import HighlightTooltip from "./tooltips/Highlight.vue";
+export function highlightTool(options = {}) {
+  let highlightedNodeId = null;
+  return defineCanvasTool({
+    id: "highlight",
+    label: "Highlight",
+    icon: "highlight",
+    cursor: "default",
+    tooltip: HighlightTooltip,
+    defaultOptions: {
+      radius: 10,
+      strokeColor: "rgba(31, 122, 236, 0.8)",
+      fillColor: "rgba(31, 122, 236, 0.08)",
+      lineWidth: 2,
+      ...options
+    },
+    onPointerMove(e, api) {
+      const node = findTopNode(e, api, api.options.radius);
+      const newId = node?.id ?? null;
+      if (newId !== highlightedNodeId) {
+        highlightedNodeId = newId;
+        api.requestRender();
+      }
+    },
+    onPointerDown(e, api) {
+      const node = findTopNode(e, api, api.options.radius);
+      highlightedNodeId = node?.id ?? null;
+    },
+    onDeactivate(api) {
+      if (highlightedNodeId) {
+        highlightedNodeId = null;
+        api.requestRender();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!highlightedNodeId) return;
+      const node = api.getNode(highlightedNodeId);
+      if (!node) {
+        highlightedNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node, {
+        strokeColor: api.options.strokeColor,
+        fillColor: api.options.fillColor,
+        lineWidth: api.options.lineWidth
+      });
+    }
+  });
+}

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

@@ -0,0 +1,20 @@
+import type { CanvasNode, CanvasPoint, CanvasTool, CanvasToolApi } from "../types.js";
+export declare function defaultHitTest(node: CanvasNode, point: CanvasPoint, radius: number): boolean;
+/** Transform a canvas-space point into the node's pre-rotation local space. */
+export declare function toLocalPoint(node: CanvasNode, point: CanvasPoint): CanvasPoint;
+export declare function hitTestNode(node: CanvasNode, point: CanvasPoint, radius: number, toolMap: Map<string, CanvasTool>): boolean;
+export declare function findTopNode(point: CanvasPoint, api: CanvasToolApi, radius: number): CanvasNode | undefined;
+/** Compute an axis-aligned bounding box for a node. */
+export declare function getNodeBounds(node: CanvasNode): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface HighlightStyle {
+    strokeColor: string;
+    fillColor: string;
+    lineWidth: number;
+}
+/** Draw a dashed bounding-rect highlight around a node. */
+export declare function renderHighlightRect(ctx: CanvasRenderingContext2D, node: CanvasNode, style?: Partial<HighlightStyle>): void;

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

@@ -0,0 +1,111 @@
+export function defaultHitTest(node, point, radius) {
+  if (node.width != null && node.height != null) {
+    return point.x + radius >= node.x && point.x - radius <= node.x + node.width && point.y + radius >= node.y && point.y - radius <= node.y + node.height;
+  }
+  const dx = point.x - node.x;
+  const dy = point.y - node.y;
+  return dx * dx + dy * dy <= radius * radius;
+}
+export function toLocalPoint(node, point) {
+  if (!node.rotation) return point;
+  const b = getNodeBounds(node);
+  const cx = b.x + b.width / 2;
+  const cy = b.y + b.height / 2;
+  const cos = Math.cos(-node.rotation);
+  const sin = Math.sin(-node.rotation);
+  const dx = point.x - cx;
+  const dy = point.y - cy;
+  return { x: cx + dx * cos - dy * sin, y: cy + dx * sin + dy * cos };
+}
+export function hitTestNode(node, point, radius, toolMap) {
+  const local = toLocalPoint(node, point);
+  const ownerTool = toolMap.get(node.type);
+  return ownerTool?.hitTest ? ownerTool.hitTest(node, local, radius) : defaultHitTest(node, local, radius);
+}
+export function findTopNode(point, api, radius) {
+  const tools = api.getTools();
+  const toolMap = new Map(tools.map((t) => [t.id, t]));
+  let best;
+  for (const node of api.nodes.value) {
+    if (node.frozen) continue;
+    if (!hitTestNode(node, point, radius, toolMap)) continue;
+    if (!best || (node.zIndex ?? 0) >= (best.zIndex ?? 0)) {
+      best = node;
+    }
+  }
+  return best;
+}
+export function getNodeBounds(node) {
+  if (node.width != null && node.height != null) {
+    return { x: node.x, y: node.y, width: node.width, height: node.height };
+  }
+  const data = node.data;
+  if (Array.isArray(data?.points) && data.points.length > 0) {
+    const points = data.points;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of points) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+    const pad = (data.size ?? 4) / 2;
+    return {
+      x: minX - pad,
+      y: minY - pad,
+      width: maxX - minX + pad * 2,
+      height: maxY - minY + pad * 2
+    };
+  }
+  if (typeof data?.text === "string" && typeof data?.fontSize === "number") {
+    const fontSize = data.fontSize;
+    const text = data.text;
+    const estimatedWidth = text.length * fontSize * 0.6;
+    return {
+      x: node.x,
+      y: node.y - fontSize / 2,
+      width: estimatedWidth,
+      height: fontSize
+    };
+  }
+  return { x: node.x - 10, y: node.y - 10, width: 20, height: 20 };
+}
+const DEFAULT_HIGHLIGHT = {
+  strokeColor: "rgba(31, 122, 236, 0.8)",
+  fillColor: "rgba(31, 122, 236, 0.08)",
+  lineWidth: 2
+};
+export function renderHighlightRect(ctx, node, style = {}) {
+  const { strokeColor, fillColor, lineWidth } = {
+    ...DEFAULT_HIGHLIGHT,
+    ...style
+  };
+  const bounds = getNodeBounds(node);
+  const pad = 6;
+  ctx.save();
+  if (node.rotation) {
+    const cx = bounds.x + bounds.width / 2;
+    const cy = bounds.y + bounds.height / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate(node.rotation);
+    ctx.translate(-cx, -cy);
+  }
+  ctx.strokeStyle = strokeColor;
+  ctx.fillStyle = fillColor;
+  ctx.lineWidth = lineWidth;
+  ctx.setLineDash([6, 3]);
+  ctx.beginPath();
+  ctx.roundRect(
+    bounds.x - pad,
+    bounds.y - pad,
+    bounds.width + pad * 2,
+    bounds.height + pad * 2,
+    4
+  );
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}

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

@@ -0,0 +1,18 @@
+export interface ImageNodeData {
+    /** Object URL or data URL the image was loaded from. */
+    src: string;
+    /** Original natural dimensions — preserved for aspect-ratio resizing. */
+    naturalWidth: number;
+    naturalHeight: number;
+    /** Optional alt text. */
+    alt?: string;
+}
+export interface ImageToolOptions extends Record<string, unknown> {
+    /** `accept` attribute on the file picker. Defaults to all canvas-renderable images. */
+    accept: string;
+    /** Largest side (CSS pixels) when an uploaded image is placed. */
+    maxSize: number;
+    /** Allow multiple files in one upload. */
+    multiple: boolean;
+}
+export declare function imageTool(options?: Partial<ImageToolOptions>): import("../types.js").CanvasTool<ImageNodeData, ImageToolOptions>;