@pixerate/editor 0.150.0 → 0.151.0

package/dist/extensions/index.js

@@ -95,7 +95,7 @@ import {
   updateImageSrc,
   validateFindPattern,
   writeRichClipboard
-} from "../chunk-2AQL4JHM.js";
+} from "../chunk-R6HNWN7B.js";
 import {
   DEFAULT_STYLES,
   NORMAL_STYLE_ID,
@@ -171,8 +171,8 @@ import {
   tableNestingPluginKey,
   typeAgentText,
   unnestTables
-} from "../chunk-O5ML2I6O.js";
-import "../chunk-OET45HIR.js";
+} from "../chunk-SVINJIGK.js";
+import "../chunk-4RF2H3N3.js";
 import "../chunk-DSZCDNTM.js";
 import "../chunk-SUVZJ2CP.js";
 import "../chunk-ZLZKGHSZ.js";
@@ -208,11 +208,11 @@ import {
   trackChangesPluginKey,
   trackedChangeLabel
 } from "../chunk-6IN474P4.js";
-import "../chunk-HF5QZS7Z.js";
 import "../chunk-II2WIF5Z.js";
 import "../chunk-WJSD3MAZ.js";
 import "../chunk-CIQIM2IP.js";
 import "../chunk-VDGBHYC7.js";
+import "../chunk-HF5QZS7Z.js";
 import "../chunk-RNSANXPT.js";
 import "../chunk-AA34BA7G.js";
 import "../chunk-6ONMQ6WF.js";

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;