@pixerate/editor 0.150.0 → 0.150.1

package/dist/{chunk-ZQUANEK4.js → chunk-Y64YPIFT.js}

@@ -2901,11 +2901,34 @@ function combineCoverage(a, b, op, n) {
 
 // src/image-editor/layers/ops.ts
 var LayerOperationError = class extends Error {
-  constructor(message) {
+  userMessage;
+  constructor(message, userMessage) {
     super(message);
     this.name = "LayerOperationError";
+    if (userMessage) this.userMessage = userMessage;
   }
 };
+function userErrorMessage(err) {
+  if (err instanceof LayerOperationError && err.userMessage) return err.userMessage;
+  return err instanceof Error ? err.message : String(err);
+}
+function isPaintableLayer(layer) {
+  return layer.type === "pixel" && layer.visible && !isLayerLocked(layer, "pixels");
+}
+function defaultActiveLayerId(layers) {
+  const pixels = flattenLayers(layers).filter((l) => l.type === "pixel");
+  for (let i = pixels.length - 1; i >= 0; i--) if (isPaintableLayer(pixels[i])) return pixels[i].id;
+  return pixels[pixels.length - 1]?.id ?? null;
+}
+function activeLayerAfterRemoval(prev, next, removedId) {
+  const before = flattenLayers(prev);
+  const at = before.findIndex((l) => l.id === removedId);
+  for (let i = at - 1; i >= 0; i--) {
+    const loc = findLayer(next, before[i].id);
+    if (loc && isPaintableLayer(loc.layer)) return loc.layer.id;
+  }
+  return defaultActiveLayerId(next);
+}
 var fail = (message) => {
   throw new LayerOperationError(message);
 };
@@ -11612,6 +11635,10 @@ export {
   flattenPath,
   rasterizeCoverage,
   LayerOperationError,
+  userErrorMessage,
+  isPaintableLayer,
+  defaultActiveLayerId,
+  activeLayerAfterRemoval,
   requireLayer,
   requireUnlocked,
   placeLayer,

package/dist/image-editor/canvas-viewport.d.cts

@@ -0,0 +1,52 @@
+/**
+ * Sizing an on-screen editor canvas: its layout size in CSS pixels (what the projection, overlays
+ * and pointer mapping use) and how many backing-store pixels each CSS pixel needs to look sharp.
+ */
+/** What `measureCanvasViewport` reads from the element that holds the canvas. */
+export interface MeasurableElement {
+    readonly clientWidth: number;
+    readonly clientHeight: number;
+    /** Layout size including borders, compared with the on-screen box to find the CSS transform scale. */
+    readonly offsetWidth?: number;
+    readonly offsetHeight?: number;
+    getBoundingClientRect(): {
+        width: number;
+        height: number;
+    };
+}
+export interface CanvasViewport {
+    /** Layout width in CSS pixels (pass as `RenderOptions.viewportWidth`). */
+    width: number;
+    /** Layout height in CSS pixels (pass as `RenderOptions.viewportHeight`). */
+    height: number;
+    /** Backing-store pixels per CSS pixel (pass as `RenderOptions.pixelRatio`). */
+    pixelRatio: number;
+}
+/** The size `measureCanvasViewport` gives an element without layout (e.g. before it is shown, or in jsdom). */
+export declare const DEFAULT_CANVAS_VIEWPORT: Readonly<{
+    width: number;
+    height: number;
+}>;
+/** The longest side a viewport backing store may reach; the pixel ratio is lowered to fit. */
+export declare const MAX_CANVAS_BACKING_SIDE = 8192;
+/**
+ * Measures the element a viewport canvas fills. `clientWidth` / `clientHeight` give the layout size
+ * (they ignore CSS transforms); `getBoundingClientRect()` gives the size on screen. Their ratio is
+ * the scale of any transform on the element or its ancestors, so the pixel ratio is
+ * `devicePixelRatio × that scale`: a 220px node scaled to 500px on a 2× screen gets ~4.5 backing
+ * pixels per CSS pixel instead of being stretched. `fallback` is the size of an element without
+ * layout (default `DEFAULT_CANVAS_VIEWPORT`).
+ */
+export declare function measureCanvasViewport(el: MeasurableElement, devicePixelRatio?: number, fallback?: {
+    width: number;
+    height: number;
+}): CanvasViewport;
+/** Whether two measurements need different backing stores. */
+export declare function sameCanvasViewport(a: CanvasViewport, b: CanvasViewport): boolean;
+/**
+ * Calls `onChange` when the element's viewport measurement changes: on resize (a
+ * `ResizeObserver`), on window resize (browser zoom, moving to another screen) and after any CSS
+ * transition or animation ends (a host scaling the element with a transform, which resizes nothing).
+ * Returns a function that stops watching.
+ */
+export declare function watchCanvasViewport(el: MeasurableElement & Partial<Element>, onChange: (viewport: CanvasViewport) => void): () => void;

package/dist/image-editor/canvas-viewport.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Sizing an on-screen editor canvas: its layout size in CSS pixels (what the projection, overlays
+ * and pointer mapping use) and how many backing-store pixels each CSS pixel needs to look sharp.
+ */
+/** What `measureCanvasViewport` reads from the element that holds the canvas. */
+export interface MeasurableElement {
+    readonly clientWidth: number;
+    readonly clientHeight: number;
+    /** Layout size including borders, compared with the on-screen box to find the CSS transform scale. */
+    readonly offsetWidth?: number;
+    readonly offsetHeight?: number;
+    getBoundingClientRect(): {
+        width: number;
+        height: number;
+    };
+}
+export interface CanvasViewport {
+    /** Layout width in CSS pixels (pass as `RenderOptions.viewportWidth`). */
+    width: number;
+    /** Layout height in CSS pixels (pass as `RenderOptions.viewportHeight`). */
+    height: number;
+    /** Backing-store pixels per CSS pixel (pass as `RenderOptions.pixelRatio`). */
+    pixelRatio: number;
+}
+/** The size `measureCanvasViewport` gives an element without layout (e.g. before it is shown, or in jsdom). */
+export declare const DEFAULT_CANVAS_VIEWPORT: Readonly<{
+    width: number;
+    height: number;
+}>;
+/** The longest side a viewport backing store may reach; the pixel ratio is lowered to fit. */
+export declare const MAX_CANVAS_BACKING_SIDE = 8192;
+/**
+ * Measures the element a viewport canvas fills. `clientWidth` / `clientHeight` give the layout size
+ * (they ignore CSS transforms); `getBoundingClientRect()` gives the size on screen. Their ratio is
+ * the scale of any transform on the element or its ancestors, so the pixel ratio is
+ * `devicePixelRatio × that scale`: a 220px node scaled to 500px on a 2× screen gets ~4.5 backing
+ * pixels per CSS pixel instead of being stretched. `fallback` is the size of an element without
+ * layout (default `DEFAULT_CANVAS_VIEWPORT`).
+ */
+export declare function measureCanvasViewport(el: MeasurableElement, devicePixelRatio?: number, fallback?: {
+    width: number;
+    height: number;
+}): CanvasViewport;
+/** Whether two measurements need different backing stores. */
+export declare function sameCanvasViewport(a: CanvasViewport, b: CanvasViewport): boolean;
+/**
+ * Calls `onChange` when the element's viewport measurement changes: on resize (a
+ * `ResizeObserver`), on window resize (browser zoom, moving to another screen) and after any CSS
+ * transition or animation ends (a host scaling the element with a transform, which resizes nothing).
+ * Returns a function that stops watching.
+ */
+export declare function watchCanvasViewport(el: MeasurableElement & Partial<Element>, onChange: (viewport: CanvasViewport) => void): () => void;