orio-ui 1.23.2 → 1.23.3

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.23.2",
+  "version": "1.23.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/canvas.d.ts

@@ -18,4 +18,4 @@ export { rotateTool, type RotateToolOptions, } from "./components/Canvas/tools/r
 export { resizeTool, type ResizeToolOptions, } from "./components/Canvas/tools/resizeTool.js";
 export { transformTool, type TransformToolOptions, } from "./components/Canvas/tools/transformTool.js";
 export { imageTool, type ImageToolOptions, type ImageNodeData, } from "./components/Canvas/tools/imageTool.js";
-export { exportTool, type ExportToolOptions, type ExportFormat, } from "./components/Canvas/tools/exportTool.js";
+export { exportTool, performExport, renderCanvasSnapshot, DEFAULT_EXPORT_OPTIONS, type ExportToolOptions, type ExportOptions, type ExportResult, type ExportFormat, type CanvasSnapshot, } from "./components/Canvas/tools/exportTool.js";

package/dist/runtime/canvas.js

@@ -45,5 +45,8 @@ export {
   imageTool
 } from "./components/Canvas/tools/imageTool.js";
 export {
-  exportTool
+  exportTool,
+  performExport,
+  renderCanvasSnapshot,
+  DEFAULT_EXPORT_OPTIONS
 } from "./components/Canvas/tools/exportTool.js";

package/dist/runtime/components/Canvas/context.d.ts

@@ -1,5 +1,6 @@
 import { type ComputedRef, type InjectionKey, type Ref } from "vue";
 import type { CanvasNode, CanvasTool, CanvasToolApi } from "./types.js";
+import type { ExportOptions, ExportResult } from "./tools/exportTool.js";
 export interface CanvasContext {
     tools: Ref<CanvasTool[]>;
     activeToolId: Ref<string | null>;
@@ -33,6 +34,14 @@ export interface CanvasContext {
     endAction: () => void;
     /** Keyboard handler for undo/redo shortcuts. Attach to the stage element. */
     onKeyDown: (e: KeyboardEvent) => void;
+    /**
+     * Export the current canvas as an image. Overrides merge over the registered
+     * `exportTool` options (if any) and the built-in defaults. Without
+     * `onExport`/`download` overrides the call triggers a browser download for
+     * backwards compatibility; pass `{ download: false }` or supply `onExport`
+     * to consume the result instead (e.g. push to a cart, upload to a backend).
+     */
+    exportCanvas: (overrides?: ExportOptions) => Promise<ExportResult>;
 }
 export declare const CANVAS_CONTEXT: InjectionKey<CanvasContext>;
 export declare function useCanvasContext(): CanvasContext;

package/dist/runtime/components/Canvas/index.d.vue.ts

@@ -1,4 +1,5 @@
 import type { CanvasNode, CanvasTool, CanvasToolApi } from "./types.js";
+import { type ExportOptions, type ExportResult } from "./tools/exportTool.js";
 export interface CanvasProps {
     /**
      * Unique name for this canvas instance. Required so detached toolbars and
@@ -31,6 +32,7 @@ export interface CanvasProps {
 type __VLS_Props = CanvasProps;
 declare function getToolOptions<T extends Record<string, unknown>>(id: string): T;
 declare function setActiveTool(id: string | null): void;
+declare function exportCanvas(overrides?: ExportOptions): Promise<ExportResult>;
 type __VLS_ModelProps = {
     "nodes"?: CanvasNode[];
 };
@@ -54,6 +56,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
+    exportCanvas: typeof exportCanvas;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:nodes": (value: CanvasNode<unknown>[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/dist/runtime/components/Canvas/index.vue

@@ -15,6 +15,9 @@ import { useCanvasNodes } from "./composables/useCanvasNodes";
 import { useCanvasSetup } from "./composables/useCanvasSetup";
 import Stage from "./components/Stage.vue";
 import Toolbar from "./components/Toolbar.vue";
+import {
+  performExport
+} from "./tools/exportTool";
 const props = defineProps({
   name: { type: String, required: true },
   tools: { type: Array, required: false, default: () => [] },
@@ -122,6 +125,18 @@ function handleKeyDown(e) {
   }
   onKeyDown(e);
 }
+function exportCanvas(overrides = {}) {
+  const toolOpts = getToolOptions("export");
+  return performExport(
+    {
+      nodes: nodes.value,
+      tools: props.tools,
+      width: props.width,
+      height: props.height
+    },
+    { ...toolOpts, ...overrides }
+  );
+}
 const context = {
   tools: toolsRef,
   activeToolId,
@@ -146,7 +161,8 @@ const context = {
   endAction,
   onKeyDown: handleKeyDown,
   cursorOverride,
-  setCursor
+  setCursor,
+  exportCanvas
 };
 provide(CANVAS_CONTEXT, context);
 let registeredName = null;
@@ -190,7 +206,8 @@ defineExpose({
   undo,
   redo,
   canUndo,
-  canRedo
+  canRedo,
+  exportCanvas
 });
 </script>
 

package/dist/runtime/components/Canvas/index.vue.d.ts

@@ -1,4 +1,5 @@
 import type { CanvasNode, CanvasTool, CanvasToolApi } from "./types.js";
+import { type ExportOptions, type ExportResult } from "./tools/exportTool.js";
 export interface CanvasProps {
     /**
      * Unique name for this canvas instance. Required so detached toolbars and
@@ -31,6 +32,7 @@ export interface CanvasProps {
 type __VLS_Props = CanvasProps;
 declare function getToolOptions<T extends Record<string, unknown>>(id: string): T;
 declare function setActiveTool(id: string | null): void;
+declare function exportCanvas(overrides?: ExportOptions): Promise<ExportResult>;
 type __VLS_ModelProps = {
     "nodes"?: CanvasNode[];
 };
@@ -54,6 +56,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
+    exportCanvas: typeof exportCanvas;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:nodes": (value: CanvasNode<unknown>[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

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

@@ -1,18 +1,65 @@
-import type { CanvasTool } from "../types.js";
+import type { CanvasNode, 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. */
+export interface ExportResult {
+    blob: Blob;
+    dataURL: string;
+    /** Same bytes as `blob`, wrapped as a `File` with the configured filename. */
+    file: File;
     format: ExportFormat;
+    /** Output pixel width (already multiplied by `scale`). */
+    width: number;
+    /** Output pixel height (already multiplied by `scale`). */
+    height: number;
+    filename: string;
+}
+export interface ExportOptions {
+    /** Output format. Defaults to PNG. */
+    format?: ExportFormat;
     /** Quality for lossy formats (jpeg, webp), 0–1. Ignored for PNG. */
-    quality: number;
+    quality?: number;
     /** File name without extension. */
-    filename: string;
+    filename?: string;
     /** Pixel scale relative to the visible canvas (1 = same size). */
-    scale: number;
+    scale?: number;
+    /**
+     * If provided, receives the export result instead of (or alongside) the
+     * download. Use to push the image into application state (e.g. a cart) or
+     * upload to a backend. Async — the canvas awaits the returned Promise.
+     */
+    onExport?: (result: ExportResult) => void | Promise<void>;
+    /**
+     * Trigger a browser download. Defaults to `true` when `onExport` is not
+     * provided, `false` when it is.
+     */
+    download?: boolean;
+}
+export interface ExportToolOptions extends Required<Pick<ExportOptions, "format" | "quality" | "filename" | "scale">>, Pick<ExportOptions, "onExport" | "download">, Record<string, unknown> {
 }
+export declare const DEFAULT_EXPORT_OPTIONS: ExportToolOptions;
+export interface CanvasSnapshot {
+    nodes: CanvasNode[];
+    tools: CanvasTool[];
+    width: number;
+    height: number;
+}
+/**
+ * Render the snapshot to an offscreen canvas and produce a Blob/dataURL/File.
+ * Pure: does not download or invoke callbacks.
+ *
+ * The offscreen canvas is sized exactly to `snapshot.width × snapshot.height`
+ * (× `scale`), so any node geometry outside the canvas is naturally clipped —
+ * the result captures only what would be visible on the live canvas.
+ */
+export declare function renderCanvasSnapshot(snapshot: CanvasSnapshot, options?: ExportOptions): Promise<ExportResult>;
+/**
+ * Render the snapshot, then optionally hand the result to `onExport` and/or
+ * trigger a browser download. Resolves with the result so callers can chain
+ * additional work (uploads, state updates).
+ */
+export declare function performExport(snapshot: CanvasSnapshot, options?: ExportOptions): Promise<ExportResult>;
 export declare function exportTool(options?: Partial<ExportToolOptions>): CanvasTool<never, ExportToolOptions>;

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

@@ -6,11 +6,15 @@ const MIME_TYPES = {
   jpeg: "image/jpeg",
   webp: "image/webp"
 };
+export const DEFAULT_EXPORT_OPTIONS = {
+  format: "png",
+  quality: 0.92,
+  filename: "canvas",
+  scale: 1
+};
 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)
-  );
+  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;
@@ -39,6 +43,67 @@ function downloadBlob(blob, filename) {
   a.remove();
   setTimeout(() => URL.revokeObjectURL(url), 1e3);
 }
+function resolveFormat(format) {
+  return MIME_TYPES[format] ? format : "png";
+}
+function sanitizeFilename(name) {
+  return (name ?? "canvas").replace(/[^A-Za-z0-9._-]/g, "_") || "canvas";
+}
+export async function renderCanvasSnapshot(snapshot, options = {}) {
+  const format = resolveFormat(options.format);
+  const quality = options.quality ?? DEFAULT_EXPORT_OPTIONS.quality;
+  const scale = options.scale ?? DEFAULT_EXPORT_OPTIONS.scale;
+  if (!Number.isFinite(scale) || scale <= 0) {
+    throw new Error(
+      `[orio-canvas] invalid export option: scale must be a finite number > 0 (got ${scale})`
+    );
+  }
+  if (format !== "png" && options.quality !== void 0 && (!Number.isFinite(quality) || quality < 0 || quality > 1)) {
+    throw new Error(
+      `[orio-canvas] invalid export option: quality must be a finite number in [0, 1] (got ${quality})`
+    );
+  }
+  const mime = MIME_TYPES[format];
+  const ext = format === "jpeg" ? "jpg" : format;
+  const filename = `${sanitizeFilename(options.filename)}.${ext}`;
+  const out = document.createElement("canvas");
+  const w = Math.max(1, Math.round(snapshot.width * scale));
+  const h = Math.max(1, Math.round(snapshot.height * scale));
+  out.width = w;
+  out.height = h;
+  const c = out.getContext("2d");
+  if (!c) {
+    throw new Error("[orio-canvas] failed to acquire 2D context for export");
+  }
+  c.scale(scale, scale);
+  if (format === "jpeg") {
+    c.fillStyle = "#ffffff";
+    c.fillRect(0, 0, snapshot.width, snapshot.height);
+  }
+  renderNodesTo(c, snapshot.nodes, snapshot.tools);
+  const encoderQuality = format === "png" ? void 0 : quality;
+  const blob = await new Promise((resolve, reject) => {
+    out.toBlob(
+      (b) => b ? resolve(b) : reject(new Error("[orio-canvas] toBlob returned null")),
+      mime,
+      encoderQuality
+    );
+  });
+  const dataURL = out.toDataURL(mime, encoderQuality);
+  const file = new File([blob], filename, { type: mime });
+  return { blob, dataURL, file, format, width: w, height: h, filename };
+}
+export async function performExport(snapshot, options = {}) {
+  const result = await renderCanvasSnapshot(snapshot, options);
+  if (options.onExport) {
+    await options.onExport(result);
+  }
+  const shouldDownload = options.download ?? !options.onExport;
+  if (shouldDownload) {
+    downloadBlob(result.blob, result.filename);
+  }
+  return result;
+}
 export function exportTool(options = {}) {
   return defineCanvasTool({
     id: "export",
@@ -47,43 +112,25 @@ export function exportTool(options = {}) {
     kind: "action",
     tooltip: ExportTooltip,
     defaultOptions: {
-      format: "png",
-      quality: 0.92,
-      filename: "canvas",
-      scale: 1,
+      ...DEFAULT_EXPORT_OPTIONS,
       ...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}`);
+      performExport(
+        {
+          nodes: api.nodes.value,
+          tools: api.getTools(),
+          width,
+          height
         },
-        mime,
-        knownFormat === "png" ? void 0 : quality
-      );
+        api.options
+      ).catch((err) => {
+        console.error("[orio-canvas] export failed", err);
+      });
     }
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.23.2",
+  "version": "1.23.3",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",