@pixerate/editor 0.18.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +91 -2
- package/dist/agent/index.cjs +625 -2
- package/dist/agent/index.cjs.map +1 -1
- package/dist/agent/index.d.cts +286 -2
- package/dist/agent/index.d.ts +286 -2
- package/dist/agent/index.js +624 -1
- package/dist/agent/index.js.map +1 -1
- package/dist/canvas/index.cjs +1240 -22
- package/dist/canvas/index.cjs.map +1 -1
- package/dist/canvas/index.d.cts +515 -3
- package/dist/canvas/index.d.ts +515 -3
- package/dist/canvas/index.js +1219 -1
- package/dist/canvas/index.js.map +1 -1
- package/dist/chunk-3TYMNULT.js +1367 -0
- package/dist/chunk-3TYMNULT.js.map +1 -0
- package/dist/chunk-4QPLEUL2.cjs +4480 -0
- package/dist/chunk-4QPLEUL2.cjs.map +1 -0
- package/dist/chunk-4SUNJZWB.cjs +553 -0
- package/dist/chunk-4SUNJZWB.cjs.map +1 -0
- package/dist/chunk-A7DKIA72.js +2657 -0
- package/dist/chunk-A7DKIA72.js.map +1 -0
- package/dist/chunk-AXV2ZW34.cjs +118 -0
- package/dist/chunk-AXV2ZW34.cjs.map +1 -0
- package/dist/chunk-B2ZRLN4S.js +118 -0
- package/dist/chunk-B2ZRLN4S.js.map +1 -0
- package/dist/chunk-CYFJCKC4.js +4480 -0
- package/dist/chunk-CYFJCKC4.js.map +1 -0
- package/dist/chunk-GVW4P7BG.js +2706 -0
- package/dist/chunk-GVW4P7BG.js.map +1 -0
- package/dist/chunk-JACER6TE.cjs +1 -0
- package/dist/chunk-JACER6TE.cjs.map +1 -0
- package/dist/chunk-JYRIOFEN.cjs +2657 -0
- package/dist/chunk-JYRIOFEN.cjs.map +1 -0
- package/dist/chunk-KYRZDWM4.js +299 -0
- package/dist/chunk-KYRZDWM4.js.map +1 -0
- package/dist/chunk-LA7PEGU3.cjs +299 -0
- package/dist/chunk-LA7PEGU3.cjs.map +1 -0
- package/dist/chunk-N7FG6CBO.js +1 -0
- package/dist/chunk-N7FG6CBO.js.map +1 -0
- package/dist/chunk-OYXSKQFR.js +553 -0
- package/dist/chunk-OYXSKQFR.js.map +1 -0
- package/dist/chunk-TVRC4KVT.cjs +1367 -0
- package/dist/chunk-TVRC4KVT.cjs.map +1 -0
- package/dist/chunk-U6NDQFOK.cjs +2706 -0
- package/dist/chunk-U6NDQFOK.cjs.map +1 -0
- package/dist/controller-OUdxPY-X.d.cts +754 -0
- package/dist/controller-OUdxPY-X.d.ts +754 -0
- package/dist/extensions/index.cjs +144 -3
- package/dist/extensions/index.cjs.map +1 -1
- package/dist/extensions/index.d.cts +9 -144
- package/dist/extensions/index.d.ts +9 -144
- package/dist/extensions/index.js +145 -4
- package/dist/grammar/index.cjs +31 -3
- package/dist/grammar/index.cjs.map +1 -1
- package/dist/grammar/index.d.cts +239 -19
- package/dist/grammar/index.d.ts +239 -19
- package/dist/grammar/index.js +31 -3
- package/dist/history/index.d.cts +2 -41
- package/dist/history/index.d.ts +2 -41
- package/dist/image-editor/index.cjs +732 -497
- package/dist/image-editor/index.cjs.map +1 -1
- package/dist/image-editor/index.d.cts +105 -9
- package/dist/image-editor/index.d.ts +105 -9
- package/dist/image-editor/index.js +721 -486
- package/dist/image-editor/index.js.map +1 -1
- package/dist/index-Ng1pG7JE.d.ts +899 -0
- package/dist/index-k3mFbPx_.d.cts +899 -0
- package/dist/index.cjs +457 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +99 -12
- package/dist/index.d.ts +99 -12
- package/dist/index.js +457 -20
- package/dist/index.js.map +1 -1
- package/dist/registry-iAHbqkYt.d.cts +128 -0
- package/dist/registry-iAHbqkYt.d.ts +128 -0
- package/dist/serializers/index.cjs +26 -3
- package/dist/serializers/index.cjs.map +1 -1
- package/dist/serializers/index.d.cts +119 -6
- package/dist/serializers/index.d.ts +119 -6
- package/dist/serializers/index.js +24 -1
- package/dist/spreadsheet/index.cjs +122 -2
- package/dist/spreadsheet/index.cjs.map +1 -1
- package/dist/spreadsheet/index.d.cts +371 -313
- package/dist/spreadsheet/index.d.ts +371 -313
- package/dist/spreadsheet/index.js +127 -7
- package/dist/tokens-CyLZmIei.d.cts +76 -0
- package/dist/tokens-CyLZmIei.d.ts +76 -0
- package/dist/track-changes-G8JcWB8b.d.cts +306 -0
- package/dist/track-changes-G8JcWB8b.d.ts +306 -0
- package/dist/types-BZgcDsC5.d.cts +42 -0
- package/dist/types-BZgcDsC5.d.ts +42 -0
- package/dist/{types-JV3S8VeR.d.cts → types-DMe0vFB1.d.cts} +1 -1
- package/dist/{types-JV3S8VeR.d.ts → types-DMe0vFB1.d.ts} +1 -1
- package/package.json +1 -1
- package/dist/chunk-7FWEWE6T.js +0 -1888
- package/dist/chunk-7FWEWE6T.js.map +0 -1
- package/dist/chunk-AIZUKWTL.js +0 -1715
- package/dist/chunk-AIZUKWTL.js.map +0 -1
- package/dist/chunk-GLSIZKOX.js +0 -17
- package/dist/chunk-GLSIZKOX.js.map +0 -1
- package/dist/chunk-LDES3EOS.cjs +0 -1888
- package/dist/chunk-LDES3EOS.cjs.map +0 -1
- package/dist/chunk-LLUAKTLW.cjs +0 -532
- package/dist/chunk-LLUAKTLW.cjs.map +0 -1
- package/dist/chunk-MPPXH7U5.cjs +0 -336
- package/dist/chunk-MPPXH7U5.cjs.map +0 -1
- package/dist/chunk-O7LOPQMH.js +0 -336
- package/dist/chunk-O7LOPQMH.js.map +0 -1
- package/dist/chunk-QGVMBCT5.js +0 -532
- package/dist/chunk-QGVMBCT5.js.map +0 -1
- package/dist/chunk-SEDR75VH.cjs +0 -17
- package/dist/chunk-SEDR75VH.cjs.map +0 -1
- package/dist/chunk-YQCI4CCN.cjs +0 -1715
- package/dist/chunk-YQCI4CCN.cjs.map +0 -1
- package/dist/mention-Dcevh3ff.d.cts +0 -32
- package/dist/mention-Dcevh3ff.d.ts +0 -32
- package/dist/tokens-7kRTEtPb.d.cts +0 -39
- package/dist/tokens-7kRTEtPb.d.ts +0 -39
|
@@ -192,6 +192,8 @@ declare class ImageEditorRenderer {
|
|
|
192
192
|
imageCache: ImageCache;
|
|
193
193
|
private cachedBaseCanvas;
|
|
194
194
|
private cachedBaseKey;
|
|
195
|
+
private sourceIds;
|
|
196
|
+
private nextSourceId;
|
|
195
197
|
/**
|
|
196
198
|
* Helper to create a canvas element safely in browser/JSDOM.
|
|
197
199
|
*/
|
|
@@ -200,6 +202,12 @@ declare class ImageEditorRenderer {
|
|
|
200
202
|
* Renders the editor state onto a canvas (viewport or preview).
|
|
201
203
|
*/
|
|
202
204
|
renderToCanvas(targetCanvas: HTMLCanvasElement, imageSource: CanvasImageSource | string, state: ImageEditorState, options?: RenderOptions): Promise<void>;
|
|
205
|
+
/**
|
|
206
|
+
* Draws `region` of the source image with rotation/flip applied, then pixel adjustments
|
|
207
|
+
* and the depth mask (which receives the identical transform so it stays aligned).
|
|
208
|
+
*/
|
|
209
|
+
private renderBaseImage;
|
|
210
|
+
private getSourceId;
|
|
203
211
|
/**
|
|
204
212
|
* Draws an individual annotation onto the canvas.
|
|
205
213
|
*/
|
|
@@ -208,6 +216,7 @@ declare class ImageEditorRenderer {
|
|
|
208
216
|
* Draws selection box around active annotation.
|
|
209
217
|
*/
|
|
210
218
|
private drawAnnotationSelection;
|
|
219
|
+
/** @deprecated Use the standalone `getAnnotationBounds` from the geometry module. */
|
|
211
220
|
getAnnotationBounds(ann: Annotation): {
|
|
212
221
|
x: number;
|
|
213
222
|
y: number;
|
|
@@ -215,7 +224,8 @@ declare class ImageEditorRenderer {
|
|
|
215
224
|
height: number;
|
|
216
225
|
};
|
|
217
226
|
/**
|
|
218
|
-
* Draws a rule-of-thirds crop grid overlay.
|
|
227
|
+
* Draws a rule-of-thirds crop grid overlay. All rectangles come from
|
|
228
|
+
* `getViewportMetrics`, i.e. the crop box projected through rotation/flip.
|
|
219
229
|
*/
|
|
220
230
|
private drawCropOverlay;
|
|
221
231
|
private drawFittedImage;
|
|
@@ -224,13 +234,15 @@ declare class ImageEditorRenderer {
|
|
|
224
234
|
*/
|
|
225
235
|
renderExport(imageSource: CanvasImageSource | string, state: ImageEditorState, options?: ExportOptions): Promise<HTMLCanvasElement>;
|
|
226
236
|
/**
|
|
227
|
-
* Generates a binary mask canvas (white
|
|
228
|
-
*
|
|
237
|
+
* Generates a strictly binary mask canvas (white = area to regenerate, black = keep) in
|
|
238
|
+
* natural image pixel space of the current source image — the same space the crop box
|
|
239
|
+
* and annotations are stored in. Pair it with `toSourceDataURL()` for AI inpainting.
|
|
229
240
|
*/
|
|
230
241
|
renderMask(state: ImageEditorState, options?: {
|
|
231
242
|
useAnnotations?: boolean;
|
|
232
243
|
useCrop?: boolean;
|
|
233
244
|
}): Promise<HTMLCanvasElement>;
|
|
245
|
+
private drawAnnotationMask;
|
|
234
246
|
}
|
|
235
247
|
|
|
236
248
|
declare const DEFAULT_ADJUSTMENTS: ImageAdjustments;
|
|
@@ -252,11 +264,19 @@ declare class ImageEditorController {
|
|
|
252
264
|
private isApplyingHistory;
|
|
253
265
|
private initialSnapshot;
|
|
254
266
|
constructor(options?: ImageEditorOptions);
|
|
267
|
+
/**
|
|
268
|
+
* Loads a new source image and makes it the baseline that `reset()` returns to.
|
|
269
|
+
* Does not record history; use `applyInpaintedImage` / `applyBackgroundRemovedImage`
|
|
270
|
+
* for undoable source replacement.
|
|
271
|
+
*/
|
|
255
272
|
loadImage(src: string | HTMLImageElement): Promise<void>;
|
|
273
|
+
private resolveSource;
|
|
256
274
|
getImageElement(): CanvasImageSource | null;
|
|
257
275
|
getState(): ImageEditorState;
|
|
258
276
|
subscribe(listener: (state: ImageEditorState) => void): () => void;
|
|
259
277
|
private notify;
|
|
278
|
+
private captureHistoryEntry;
|
|
279
|
+
private restoreHistoryEntry;
|
|
260
280
|
private recordHistory;
|
|
261
281
|
get canUndo(): boolean;
|
|
262
282
|
get canRedo(): boolean;
|
|
@@ -298,8 +318,24 @@ declare class ImageEditorController {
|
|
|
298
318
|
useAnnotations?: boolean;
|
|
299
319
|
useCrop?: boolean;
|
|
300
320
|
}): Promise<string>;
|
|
321
|
+
/**
|
|
322
|
+
* Renders the current source image at natural size with no crop, rotation, flip,
|
|
323
|
+
* adjustments or annotations. This is the image that `toMaskDataURL()` is aligned with
|
|
324
|
+
* and the space that `applyInpaintedImage` / `applyBackgroundRemovedImage` expect back.
|
|
325
|
+
*/
|
|
326
|
+
renderSource(): Promise<HTMLCanvasElement>;
|
|
327
|
+
toSourceDataURL(options?: Pick<ExportOptions, 'format' | 'quality'>): Promise<string>;
|
|
328
|
+
/**
|
|
329
|
+
* Replaces the source image with an inpainted result (natural image space, see
|
|
330
|
+
* `toSourceDataURL`) and clears the mask annotations, as ONE undoable step.
|
|
331
|
+
*/
|
|
301
332
|
applyInpaintedImage(newDataUrl: string): Promise<void>;
|
|
333
|
+
/**
|
|
334
|
+
* Replaces the source image with a background-removed result as ONE undoable step.
|
|
335
|
+
* Crop and annotations are kept (rescaled if the new image has different dimensions).
|
|
336
|
+
*/
|
|
302
337
|
applyBackgroundRemovedImage(newDataUrl: string): Promise<void>;
|
|
338
|
+
private replaceSource;
|
|
303
339
|
toJSON(): SerializedImageEditorState;
|
|
304
340
|
loadJSON(data: SerializedImageEditorState): void;
|
|
305
341
|
private serializeState;
|
|
@@ -331,30 +367,90 @@ interface ViewportMetrics {
|
|
|
331
367
|
height: number;
|
|
332
368
|
} | null;
|
|
333
369
|
}
|
|
370
|
+
/**
|
|
371
|
+
* A complete description of the natural-image -> target mapping (see module comment).
|
|
372
|
+
*/
|
|
373
|
+
interface ImageProjection {
|
|
374
|
+
/** Visible region in natural image pixels (crop box or full image). */
|
|
375
|
+
region: CropBox;
|
|
376
|
+
/** Rotation in degrees, normalised to [0, 360). */
|
|
377
|
+
angle: number;
|
|
378
|
+
flipH: boolean;
|
|
379
|
+
flipV: boolean;
|
|
380
|
+
/** Uniform scale from image pixels to target pixels. */
|
|
381
|
+
scale: number;
|
|
382
|
+
/** Target-space point that the centre of `region` maps to. */
|
|
383
|
+
originX: number;
|
|
384
|
+
originY: number;
|
|
385
|
+
}
|
|
386
|
+
/** Normalises any rotation in degrees to [0, 360). */
|
|
387
|
+
declare function normalizeAngle(degrees: number): number;
|
|
388
|
+
/** Whether the rotation swaps the displayed width and height. */
|
|
389
|
+
declare function isQuarterTurnSwapped(transform: Pick<ImageTransform, 'rotate'>): boolean;
|
|
390
|
+
/** Size of a region once rotated (bounding box for arbitrary angles). */
|
|
391
|
+
declare function getRotatedSize(width: number, height: number, transform: Pick<ImageTransform, 'rotate'>): {
|
|
392
|
+
width: number;
|
|
393
|
+
height: number;
|
|
394
|
+
};
|
|
395
|
+
/** Maps a natural-image point to target space. */
|
|
396
|
+
declare function projectImagePoint(pt: ImagePoint, p: ImageProjection): ImagePoint;
|
|
397
|
+
/** Exact inverse of {@link projectImagePoint}. */
|
|
398
|
+
declare function unprojectCanvasPoint(pt: ImagePoint, p: ImageProjection): ImagePoint;
|
|
399
|
+
/**
|
|
400
|
+
* Applies the projection to a 2D context so that subsequent drawing in natural image
|
|
401
|
+
* pixels lands exactly where {@link projectImagePoint} says it does.
|
|
402
|
+
*/
|
|
403
|
+
declare function applyImageProjectionToContext(ctx: Pick<CanvasRenderingContext2D, 'translate' | 'scale' | 'rotate'>, p: ImageProjection): void;
|
|
404
|
+
/** Projects an image-space rectangle and returns its target-space bounding box. */
|
|
405
|
+
declare function projectImageRect(rect: CropBox, p: ImageProjection): {
|
|
406
|
+
x: number;
|
|
407
|
+
y: number;
|
|
408
|
+
width: number;
|
|
409
|
+
height: number;
|
|
410
|
+
};
|
|
411
|
+
/** Clamps a crop box to the image bounds. */
|
|
412
|
+
declare function clampCropToImage(crop: CropBox, width: number, height: number): CropBox;
|
|
413
|
+
/**
|
|
414
|
+
* Returns the natural-image -> canvas projection used by the interactive viewport.
|
|
415
|
+
*/
|
|
416
|
+
declare function getViewportProjection(state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean, cropOverride?: CropBox | null): ImageProjection;
|
|
334
417
|
/**
|
|
335
418
|
* Calculates current viewport projection metrics for canvas <-> image coordinate mapping.
|
|
419
|
+
* `cropRect` is the on-screen (rotated/flipped) rectangle of the crop box.
|
|
336
420
|
*/
|
|
337
421
|
declare function getViewportMetrics(state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean, cropOverride?: CropBox | null): ViewportMetrics;
|
|
338
422
|
/**
|
|
339
|
-
* Converts a point on the canvas (in internal canvas pixel space) to image
|
|
423
|
+
* Converts a point on the canvas (in internal canvas pixel space) to natural image pixel
|
|
424
|
+
* space, accounting for zoom, pan, fit scale, crop offset, rotation and flips.
|
|
340
425
|
*/
|
|
341
426
|
declare function canvasToImagePoint(canvasPt: ImagePoint, state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean): ImagePoint;
|
|
342
427
|
/**
|
|
343
|
-
* Converts a point in image
|
|
428
|
+
* Converts a point in natural image pixel space to internal canvas pixel space.
|
|
429
|
+
* Exact inverse of {@link canvasToImagePoint}.
|
|
344
430
|
*/
|
|
345
431
|
declare function imageToCanvasPoint(imgPt: ImagePoint, state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean): ImagePoint;
|
|
432
|
+
/**
|
|
433
|
+
* Converts a crop handle in screen orientation to the equivalent edge/corner of the crop
|
|
434
|
+
* box in natural image space, or the reverse with `toScreen = true`.
|
|
435
|
+
*/
|
|
436
|
+
declare function mapCropHandle(handle: CropHandle, transform: ImageTransform, toScreen?: boolean): CropHandle;
|
|
346
437
|
/**
|
|
347
438
|
* Hit-tests the crop box and its corner/edge handles given a canvas point.
|
|
439
|
+
* The returned handle names the edge/corner of the crop box in natural image space
|
|
440
|
+
* (what {@link calculateCropDrag} expects); use `getCropCursor(handle, state.transform)`
|
|
441
|
+
* to obtain the matching on-screen cursor.
|
|
348
442
|
*/
|
|
349
443
|
declare function hitTestCrop(canvasPt: ImagePoint, state: ImageEditorState, vpWidth: number, vpHeight: number, handleThreshold?: number, cropOverride?: CropBox | null): CropHandle;
|
|
350
444
|
/**
|
|
351
|
-
* Returns CSS cursor style corresponding to a crop handle.
|
|
445
|
+
* Returns CSS cursor style corresponding to a crop handle. Pass the current transform when
|
|
446
|
+
* the handle comes from {@link hitTestCrop} (image space) so the cursor matches the
|
|
447
|
+
* on-screen orientation under rotation/flip.
|
|
352
448
|
*/
|
|
353
|
-
declare function getCropCursor(handle: CropHandle): string;
|
|
449
|
+
declare function getCropCursor(handle: CropHandle, transform?: ImageTransform): string;
|
|
354
450
|
/**
|
|
355
451
|
* Calculates updated crop rectangle given a drag interaction.
|
|
356
452
|
*/
|
|
357
|
-
declare function calculateCropDrag(startCrop: CropBox, handle: CropHandle, startImgPt: ImagePoint, currentImgPt: ImagePoint, imgWidth: number, imgHeight: number, aspectRatio?: number | null): CropBox;
|
|
453
|
+
declare function calculateCropDrag(startCrop: CropBox, handle: CropHandle, startImgPt: ImagePoint, currentImgPt: ImagePoint, imgWidth: number, imgHeight: number, aspectRatio?: number | null, transform?: ImageTransform): CropBox;
|
|
358
454
|
/**
|
|
359
455
|
* Calculates bounding box of an annotation.
|
|
360
456
|
*/
|
|
@@ -369,4 +465,4 @@ declare function getAnnotationBounds(ann: Annotation): {
|
|
|
369
465
|
*/
|
|
370
466
|
declare function hitTestAnnotation(imgPt: ImagePoint, ann: Annotation, padding?: number): boolean;
|
|
371
467
|
|
|
372
|
-
export { type Annotation, type AnnotationType, type ArrowAnnotation, type AspectRatio, type BaseAnnotation, type CircleAnnotation, type CreateAnnotationPayload, type CropBox, type CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, type DepthMaskOptions, type ExportOptions, type ImageAdjustments, type ImageAnnotation, type ImageDimensions, type ImageEditorAIHooks, ImageEditorController, type ImageEditorOptions, ImageEditorRenderer, type ImageEditorState, type ImageEditorTool, type ImagePoint, type ImageTransform, type InpaintHook, type InpaintOptions, type LineAnnotation, type PenAnnotation, type RectAnnotation, type RemoveBackgroundHook, type RemoveBackgroundOptions, type RenderOptions, type SerializedImageEditorState, type TextAnnotation, type ViewportMetrics, applyAdjustments, applyDepthMask, calculateCropDrag, canvasToImagePoint, getAnnotationBounds, getCropCursor, getViewportMetrics, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, removeAlpha };
|
|
468
|
+
export { type Annotation, type AnnotationType, type ArrowAnnotation, type AspectRatio, type BaseAnnotation, type CircleAnnotation, type CreateAnnotationPayload, type CropBox, type CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, type DepthMaskOptions, type ExportOptions, type ImageAdjustments, type ImageAnnotation, type ImageDimensions, type ImageEditorAIHooks, ImageEditorController, type ImageEditorOptions, ImageEditorRenderer, type ImageEditorState, type ImageEditorTool, type ImagePoint, type ImageProjection, type ImageTransform, type InpaintHook, type InpaintOptions, type LineAnnotation, type PenAnnotation, type RectAnnotation, type RemoveBackgroundHook, type RemoveBackgroundOptions, type RenderOptions, type SerializedImageEditorState, type TextAnnotation, type ViewportMetrics, applyAdjustments, applyDepthMask, applyImageProjectionToContext, calculateCropDrag, canvasToImagePoint, clampCropToImage, getAnnotationBounds, getCropCursor, getRotatedSize, getViewportMetrics, getViewportProjection, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, isQuarterTurnSwapped, mapCropHandle, normalizeAngle, projectImagePoint, projectImageRect, removeAlpha, unprojectCanvasPoint };
|
|
@@ -192,6 +192,8 @@ declare class ImageEditorRenderer {
|
|
|
192
192
|
imageCache: ImageCache;
|
|
193
193
|
private cachedBaseCanvas;
|
|
194
194
|
private cachedBaseKey;
|
|
195
|
+
private sourceIds;
|
|
196
|
+
private nextSourceId;
|
|
195
197
|
/**
|
|
196
198
|
* Helper to create a canvas element safely in browser/JSDOM.
|
|
197
199
|
*/
|
|
@@ -200,6 +202,12 @@ declare class ImageEditorRenderer {
|
|
|
200
202
|
* Renders the editor state onto a canvas (viewport or preview).
|
|
201
203
|
*/
|
|
202
204
|
renderToCanvas(targetCanvas: HTMLCanvasElement, imageSource: CanvasImageSource | string, state: ImageEditorState, options?: RenderOptions): Promise<void>;
|
|
205
|
+
/**
|
|
206
|
+
* Draws `region` of the source image with rotation/flip applied, then pixel adjustments
|
|
207
|
+
* and the depth mask (which receives the identical transform so it stays aligned).
|
|
208
|
+
*/
|
|
209
|
+
private renderBaseImage;
|
|
210
|
+
private getSourceId;
|
|
203
211
|
/**
|
|
204
212
|
* Draws an individual annotation onto the canvas.
|
|
205
213
|
*/
|
|
@@ -208,6 +216,7 @@ declare class ImageEditorRenderer {
|
|
|
208
216
|
* Draws selection box around active annotation.
|
|
209
217
|
*/
|
|
210
218
|
private drawAnnotationSelection;
|
|
219
|
+
/** @deprecated Use the standalone `getAnnotationBounds` from the geometry module. */
|
|
211
220
|
getAnnotationBounds(ann: Annotation): {
|
|
212
221
|
x: number;
|
|
213
222
|
y: number;
|
|
@@ -215,7 +224,8 @@ declare class ImageEditorRenderer {
|
|
|
215
224
|
height: number;
|
|
216
225
|
};
|
|
217
226
|
/**
|
|
218
|
-
* Draws a rule-of-thirds crop grid overlay.
|
|
227
|
+
* Draws a rule-of-thirds crop grid overlay. All rectangles come from
|
|
228
|
+
* `getViewportMetrics`, i.e. the crop box projected through rotation/flip.
|
|
219
229
|
*/
|
|
220
230
|
private drawCropOverlay;
|
|
221
231
|
private drawFittedImage;
|
|
@@ -224,13 +234,15 @@ declare class ImageEditorRenderer {
|
|
|
224
234
|
*/
|
|
225
235
|
renderExport(imageSource: CanvasImageSource | string, state: ImageEditorState, options?: ExportOptions): Promise<HTMLCanvasElement>;
|
|
226
236
|
/**
|
|
227
|
-
* Generates a binary mask canvas (white
|
|
228
|
-
*
|
|
237
|
+
* Generates a strictly binary mask canvas (white = area to regenerate, black = keep) in
|
|
238
|
+
* natural image pixel space of the current source image — the same space the crop box
|
|
239
|
+
* and annotations are stored in. Pair it with `toSourceDataURL()` for AI inpainting.
|
|
229
240
|
*/
|
|
230
241
|
renderMask(state: ImageEditorState, options?: {
|
|
231
242
|
useAnnotations?: boolean;
|
|
232
243
|
useCrop?: boolean;
|
|
233
244
|
}): Promise<HTMLCanvasElement>;
|
|
245
|
+
private drawAnnotationMask;
|
|
234
246
|
}
|
|
235
247
|
|
|
236
248
|
declare const DEFAULT_ADJUSTMENTS: ImageAdjustments;
|
|
@@ -252,11 +264,19 @@ declare class ImageEditorController {
|
|
|
252
264
|
private isApplyingHistory;
|
|
253
265
|
private initialSnapshot;
|
|
254
266
|
constructor(options?: ImageEditorOptions);
|
|
267
|
+
/**
|
|
268
|
+
* Loads a new source image and makes it the baseline that `reset()` returns to.
|
|
269
|
+
* Does not record history; use `applyInpaintedImage` / `applyBackgroundRemovedImage`
|
|
270
|
+
* for undoable source replacement.
|
|
271
|
+
*/
|
|
255
272
|
loadImage(src: string | HTMLImageElement): Promise<void>;
|
|
273
|
+
private resolveSource;
|
|
256
274
|
getImageElement(): CanvasImageSource | null;
|
|
257
275
|
getState(): ImageEditorState;
|
|
258
276
|
subscribe(listener: (state: ImageEditorState) => void): () => void;
|
|
259
277
|
private notify;
|
|
278
|
+
private captureHistoryEntry;
|
|
279
|
+
private restoreHistoryEntry;
|
|
260
280
|
private recordHistory;
|
|
261
281
|
get canUndo(): boolean;
|
|
262
282
|
get canRedo(): boolean;
|
|
@@ -298,8 +318,24 @@ declare class ImageEditorController {
|
|
|
298
318
|
useAnnotations?: boolean;
|
|
299
319
|
useCrop?: boolean;
|
|
300
320
|
}): Promise<string>;
|
|
321
|
+
/**
|
|
322
|
+
* Renders the current source image at natural size with no crop, rotation, flip,
|
|
323
|
+
* adjustments or annotations. This is the image that `toMaskDataURL()` is aligned with
|
|
324
|
+
* and the space that `applyInpaintedImage` / `applyBackgroundRemovedImage` expect back.
|
|
325
|
+
*/
|
|
326
|
+
renderSource(): Promise<HTMLCanvasElement>;
|
|
327
|
+
toSourceDataURL(options?: Pick<ExportOptions, 'format' | 'quality'>): Promise<string>;
|
|
328
|
+
/**
|
|
329
|
+
* Replaces the source image with an inpainted result (natural image space, see
|
|
330
|
+
* `toSourceDataURL`) and clears the mask annotations, as ONE undoable step.
|
|
331
|
+
*/
|
|
301
332
|
applyInpaintedImage(newDataUrl: string): Promise<void>;
|
|
333
|
+
/**
|
|
334
|
+
* Replaces the source image with a background-removed result as ONE undoable step.
|
|
335
|
+
* Crop and annotations are kept (rescaled if the new image has different dimensions).
|
|
336
|
+
*/
|
|
302
337
|
applyBackgroundRemovedImage(newDataUrl: string): Promise<void>;
|
|
338
|
+
private replaceSource;
|
|
303
339
|
toJSON(): SerializedImageEditorState;
|
|
304
340
|
loadJSON(data: SerializedImageEditorState): void;
|
|
305
341
|
private serializeState;
|
|
@@ -331,30 +367,90 @@ interface ViewportMetrics {
|
|
|
331
367
|
height: number;
|
|
332
368
|
} | null;
|
|
333
369
|
}
|
|
370
|
+
/**
|
|
371
|
+
* A complete description of the natural-image -> target mapping (see module comment).
|
|
372
|
+
*/
|
|
373
|
+
interface ImageProjection {
|
|
374
|
+
/** Visible region in natural image pixels (crop box or full image). */
|
|
375
|
+
region: CropBox;
|
|
376
|
+
/** Rotation in degrees, normalised to [0, 360). */
|
|
377
|
+
angle: number;
|
|
378
|
+
flipH: boolean;
|
|
379
|
+
flipV: boolean;
|
|
380
|
+
/** Uniform scale from image pixels to target pixels. */
|
|
381
|
+
scale: number;
|
|
382
|
+
/** Target-space point that the centre of `region` maps to. */
|
|
383
|
+
originX: number;
|
|
384
|
+
originY: number;
|
|
385
|
+
}
|
|
386
|
+
/** Normalises any rotation in degrees to [0, 360). */
|
|
387
|
+
declare function normalizeAngle(degrees: number): number;
|
|
388
|
+
/** Whether the rotation swaps the displayed width and height. */
|
|
389
|
+
declare function isQuarterTurnSwapped(transform: Pick<ImageTransform, 'rotate'>): boolean;
|
|
390
|
+
/** Size of a region once rotated (bounding box for arbitrary angles). */
|
|
391
|
+
declare function getRotatedSize(width: number, height: number, transform: Pick<ImageTransform, 'rotate'>): {
|
|
392
|
+
width: number;
|
|
393
|
+
height: number;
|
|
394
|
+
};
|
|
395
|
+
/** Maps a natural-image point to target space. */
|
|
396
|
+
declare function projectImagePoint(pt: ImagePoint, p: ImageProjection): ImagePoint;
|
|
397
|
+
/** Exact inverse of {@link projectImagePoint}. */
|
|
398
|
+
declare function unprojectCanvasPoint(pt: ImagePoint, p: ImageProjection): ImagePoint;
|
|
399
|
+
/**
|
|
400
|
+
* Applies the projection to a 2D context so that subsequent drawing in natural image
|
|
401
|
+
* pixels lands exactly where {@link projectImagePoint} says it does.
|
|
402
|
+
*/
|
|
403
|
+
declare function applyImageProjectionToContext(ctx: Pick<CanvasRenderingContext2D, 'translate' | 'scale' | 'rotate'>, p: ImageProjection): void;
|
|
404
|
+
/** Projects an image-space rectangle and returns its target-space bounding box. */
|
|
405
|
+
declare function projectImageRect(rect: CropBox, p: ImageProjection): {
|
|
406
|
+
x: number;
|
|
407
|
+
y: number;
|
|
408
|
+
width: number;
|
|
409
|
+
height: number;
|
|
410
|
+
};
|
|
411
|
+
/** Clamps a crop box to the image bounds. */
|
|
412
|
+
declare function clampCropToImage(crop: CropBox, width: number, height: number): CropBox;
|
|
413
|
+
/**
|
|
414
|
+
* Returns the natural-image -> canvas projection used by the interactive viewport.
|
|
415
|
+
*/
|
|
416
|
+
declare function getViewportProjection(state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean, cropOverride?: CropBox | null): ImageProjection;
|
|
334
417
|
/**
|
|
335
418
|
* Calculates current viewport projection metrics for canvas <-> image coordinate mapping.
|
|
419
|
+
* `cropRect` is the on-screen (rotated/flipped) rectangle of the crop box.
|
|
336
420
|
*/
|
|
337
421
|
declare function getViewportMetrics(state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean, cropOverride?: CropBox | null): ViewportMetrics;
|
|
338
422
|
/**
|
|
339
|
-
* Converts a point on the canvas (in internal canvas pixel space) to image
|
|
423
|
+
* Converts a point on the canvas (in internal canvas pixel space) to natural image pixel
|
|
424
|
+
* space, accounting for zoom, pan, fit scale, crop offset, rotation and flips.
|
|
340
425
|
*/
|
|
341
426
|
declare function canvasToImagePoint(canvasPt: ImagePoint, state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean): ImagePoint;
|
|
342
427
|
/**
|
|
343
|
-
* Converts a point in image
|
|
428
|
+
* Converts a point in natural image pixel space to internal canvas pixel space.
|
|
429
|
+
* Exact inverse of {@link canvasToImagePoint}.
|
|
344
430
|
*/
|
|
345
431
|
declare function imageToCanvasPoint(imgPt: ImagePoint, state: ImageEditorState, vpWidth: number, vpHeight: number, isActivelyCropping?: boolean): ImagePoint;
|
|
432
|
+
/**
|
|
433
|
+
* Converts a crop handle in screen orientation to the equivalent edge/corner of the crop
|
|
434
|
+
* box in natural image space, or the reverse with `toScreen = true`.
|
|
435
|
+
*/
|
|
436
|
+
declare function mapCropHandle(handle: CropHandle, transform: ImageTransform, toScreen?: boolean): CropHandle;
|
|
346
437
|
/**
|
|
347
438
|
* Hit-tests the crop box and its corner/edge handles given a canvas point.
|
|
439
|
+
* The returned handle names the edge/corner of the crop box in natural image space
|
|
440
|
+
* (what {@link calculateCropDrag} expects); use `getCropCursor(handle, state.transform)`
|
|
441
|
+
* to obtain the matching on-screen cursor.
|
|
348
442
|
*/
|
|
349
443
|
declare function hitTestCrop(canvasPt: ImagePoint, state: ImageEditorState, vpWidth: number, vpHeight: number, handleThreshold?: number, cropOverride?: CropBox | null): CropHandle;
|
|
350
444
|
/**
|
|
351
|
-
* Returns CSS cursor style corresponding to a crop handle.
|
|
445
|
+
* Returns CSS cursor style corresponding to a crop handle. Pass the current transform when
|
|
446
|
+
* the handle comes from {@link hitTestCrop} (image space) so the cursor matches the
|
|
447
|
+
* on-screen orientation under rotation/flip.
|
|
352
448
|
*/
|
|
353
|
-
declare function getCropCursor(handle: CropHandle): string;
|
|
449
|
+
declare function getCropCursor(handle: CropHandle, transform?: ImageTransform): string;
|
|
354
450
|
/**
|
|
355
451
|
* Calculates updated crop rectangle given a drag interaction.
|
|
356
452
|
*/
|
|
357
|
-
declare function calculateCropDrag(startCrop: CropBox, handle: CropHandle, startImgPt: ImagePoint, currentImgPt: ImagePoint, imgWidth: number, imgHeight: number, aspectRatio?: number | null): CropBox;
|
|
453
|
+
declare function calculateCropDrag(startCrop: CropBox, handle: CropHandle, startImgPt: ImagePoint, currentImgPt: ImagePoint, imgWidth: number, imgHeight: number, aspectRatio?: number | null, transform?: ImageTransform): CropBox;
|
|
358
454
|
/**
|
|
359
455
|
* Calculates bounding box of an annotation.
|
|
360
456
|
*/
|
|
@@ -369,4 +465,4 @@ declare function getAnnotationBounds(ann: Annotation): {
|
|
|
369
465
|
*/
|
|
370
466
|
declare function hitTestAnnotation(imgPt: ImagePoint, ann: Annotation, padding?: number): boolean;
|
|
371
467
|
|
|
372
|
-
export { type Annotation, type AnnotationType, type ArrowAnnotation, type AspectRatio, type BaseAnnotation, type CircleAnnotation, type CreateAnnotationPayload, type CropBox, type CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, type DepthMaskOptions, type ExportOptions, type ImageAdjustments, type ImageAnnotation, type ImageDimensions, type ImageEditorAIHooks, ImageEditorController, type ImageEditorOptions, ImageEditorRenderer, type ImageEditorState, type ImageEditorTool, type ImagePoint, type ImageTransform, type InpaintHook, type InpaintOptions, type LineAnnotation, type PenAnnotation, type RectAnnotation, type RemoveBackgroundHook, type RemoveBackgroundOptions, type RenderOptions, type SerializedImageEditorState, type TextAnnotation, type ViewportMetrics, applyAdjustments, applyDepthMask, calculateCropDrag, canvasToImagePoint, getAnnotationBounds, getCropCursor, getViewportMetrics, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, removeAlpha };
|
|
468
|
+
export { type Annotation, type AnnotationType, type ArrowAnnotation, type AspectRatio, type BaseAnnotation, type CircleAnnotation, type CreateAnnotationPayload, type CropBox, type CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, type DepthMaskOptions, type ExportOptions, type ImageAdjustments, type ImageAnnotation, type ImageDimensions, type ImageEditorAIHooks, ImageEditorController, type ImageEditorOptions, ImageEditorRenderer, type ImageEditorState, type ImageEditorTool, type ImagePoint, type ImageProjection, type ImageTransform, type InpaintHook, type InpaintOptions, type LineAnnotation, type PenAnnotation, type RectAnnotation, type RemoveBackgroundHook, type RemoveBackgroundOptions, type RenderOptions, type SerializedImageEditorState, type TextAnnotation, type ViewportMetrics, applyAdjustments, applyDepthMask, applyImageProjectionToContext, calculateCropDrag, canvasToImagePoint, clampCropToImage, getAnnotationBounds, getCropCursor, getRotatedSize, getViewportMetrics, getViewportProjection, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, isQuarterTurnSwapped, mapCropHandle, normalizeAngle, projectImagePoint, projectImageRect, removeAlpha, unprojectCanvasPoint };
|