@overtone-art/canvas-editor-core 0.3.0 → 0.3.2

package/dist/index.d.mts

@@ -47,6 +47,18 @@ declare class LayerManager {
     setLocked(id: string, locked: boolean): void;
     setOpacity(id: string, opacity: number): void;
     setName(id: string, name: string): void;
+    /**
+     * Patch a layer's host metadata. A key whose value is `undefined` is removed.
+     *
+     * `meta` is part of `LayerData` and is serialized, so a host that assigns
+     * `layer.meta.x` directly gets neither of the two things every other setter
+     * here provides: `layers:changed` (so `useLayers()` keeps returning the old
+     * meta) and the history checkpoint (so an undo silently reverts the write —
+     * the state IS versioned, it was just never committed at the moment it
+     * changed). Going through this method is what makes metadata behave like
+     * every other layer property.
+     */
+    setMeta(id: string, patch: LayerMeta): void;
     clear(): void;
     count(): number;
     private emitChanged;
@@ -347,6 +359,47 @@ declare function renderTextureMask(id: TextureMaskId): HTMLCanvasElement;
 /** Drop memoized textures — used by tests and by long-lived editors on dispose. */
 declare function clearTextureMaskCache(): void;
 
+/**
+ * Look of the selection frame and its resize handles.
+ *
+ * Every measurement is in **screen** pixels. Zoom is a display transform (the
+ * view layer CSS-scales the canvas element), so a handle drawn at its nominal
+ * size would grow and shrink with the zoom level; `applySelectionStyle`
+ * counter-scales by 1/zoom so the frame stays the same size on screen whatever
+ * the zoom.
+ */
+interface SelectionStyle {
+    /** Colour of the frame around the selection. */
+    borderColor: string;
+    /** Fill of the resize handles. */
+    cornerColor: string;
+    /** Outline drawn around each handle. */
+    cornerStrokeColor: string;
+    /** Handle diameter, in screen pixels. */
+    cornerSize: number;
+    /** Round handles (as in the design tools) or square ones. */
+    cornerStyle: 'circle' | 'rect';
+    /** Frame line width, in screen pixels. */
+    borderWidth: number;
+    /** Dash pattern for the frame, in screen pixels. Null = solid. */
+    borderDashArray: number[] | null;
+    /** Gap between the object bounds and the frame, in screen pixels. */
+    padding: number;
+    /** Fill of the drag-to-select marquee. */
+    marqueeFill: string;
+}
+declare const DEFAULT_SELECTION_STYLE: SelectionStyle;
+/** Applies the style to ONE object at the given display zoom. */
+declare function applyObjectSelectionStyle(object: FabricObject, style: SelectionStyle, zoom: number): void;
+/**
+ * Applies the style to every object on the canvas plus the active selection.
+ *
+ * The active selection is a transient group that `getObjects()` does not list,
+ * so it is styled separately — otherwise a multi-object selection would keep
+ * fabric's default blue squares.
+ */
+declare function applySelectionStyle(canvas: Canvas, style: SelectionStyle, zoom: number): void;
+
 declare class UnitConverter {
     private unit;
     private dpi;
@@ -508,6 +561,7 @@ declare class CanvasEditor {
     private fileAdapter?;
     private imageProvider?;
     private zoomLevel;
+    private selectionStyle;
     private mockup;
     private designBackground;
     private designBackgroundImage;
@@ -630,6 +684,14 @@ declare class CanvasEditor {
     clearMockup(): void;
     getMockup(): MockupConfig | null;
     dispose(): void;
+    /** Current look of the selection frame and its handles. */
+    getSelectionStyle(): SelectionStyle;
+    /**
+     * Restyles the selection frame and resize handles. Sizes are in screen
+     * pixels and stay constant across zoom levels (see `SelectionStyle`).
+     */
+    setSelectionStyle(style: Partial<SelectionStyle>): void;
+    private refreshSelectionStyle;
     private setupCanvasEvents;
 }
 
@@ -758,4 +820,4 @@ declare class AnnotationOverlay {
  */
 declare function displaceRgba(source: Uint8ClampedArray, map: Uint8ClampedArray, width: number, height: number, options: Omit<MockupDisplacement, 'image'>): Uint8ClampedArray;
 
-export { AnnotationOverlay, type AnnotationPrimitive, BackgroundImageOptions, CANVAS_SIZE_PRESETS, CanvasEditor, CanvasSizePreset, type CoverPlacement, CropController, DEFAULT_LAYER_SHADOW, DEFAULT_TEXT_CURVE, DpiIssue, EditorConfig, EditorEvents, EditorState, EventEmitter, FileAdapter, FontDefinition, FontRegistry, HistoryManager, ImageAdjustments, ImageProvider, ImageProviderResult, ImageSearchOptions, ImageSearchResult, Layer, LayerData, LayerManager, LayerMeta, LayerShadowConfig, LayerType, LicenseConfig, LicenseManager, LicenseStatus, MaskBrushOptions, MaskController, type MaskPerformanceSample, MaskPoint, MaskPresetId, MaskPresetManager, MaskRefinementError, type MaskRefinementErrorCode, MaskRefinementPrompt, MaskRefinementProvider, MaskRefinementResult, MockupConfig, MockupDisplacement, MockupPrintArea, NormalizedLayerPosition, PatternConfig, PatternLocks, PatternManager, PatternSourceResolver, type PngExportOptions, PositioningAdapter, PrintifyPositioning, ProjectManager, ProjectState, ResizeOptions, SHAPE_MASK_BOX, SHAPE_MASK_IDS, SemanticExportOptions, SerializedBackgroundImageOptions, SerializedLayer, ShapeMaskPresetId, ShapePlugin, SnapManager, SvgExportOptions, TEXTURE_MASK_IDS, TEXTURE_MASK_SIZE, TemplateDefinition, TextCurveConfig, TextCurveManager, TextureMaskPresetId, type TilePlacement, Unit, UnitConverter, type ViewportTransform, applyAspectLock, applyLayerShadow, applyPatternLocks, buildCurvePathData, buildPatternDataURL, captureLocks, clamp, clearPatternImageCache, clearTextureMaskCache, computeCoverPlacement, computePrintAreaClip, computeTilePositions, deserializeEditor, displaceRgba, drawTiles, escapeXml, exportDataURL, exportMockup, exportPNG, exportPrintArea, exportSVG, generateId, isCssColor, isMaskPresetId, isShapeMaskId, isTextureMaskId, loadPatternImage, readLayerShadow, renderTextureMask, resetTransform, restoreLocks, round2, sanitizeSvg, serializeEditor, shapeMaskPathData };
+export { AnnotationOverlay, type AnnotationPrimitive, BackgroundImageOptions, CANVAS_SIZE_PRESETS, CanvasEditor, CanvasSizePreset, type CoverPlacement, CropController, DEFAULT_LAYER_SHADOW, DEFAULT_SELECTION_STYLE, DEFAULT_TEXT_CURVE, DpiIssue, EditorConfig, EditorEvents, EditorState, EventEmitter, FileAdapter, FontDefinition, FontRegistry, HistoryManager, ImageAdjustments, ImageProvider, ImageProviderResult, ImageSearchOptions, ImageSearchResult, Layer, LayerData, LayerManager, LayerMeta, LayerShadowConfig, LayerType, LicenseConfig, LicenseManager, LicenseStatus, MaskBrushOptions, MaskController, type MaskPerformanceSample, MaskPoint, MaskPresetId, MaskPresetManager, MaskRefinementError, type MaskRefinementErrorCode, MaskRefinementPrompt, MaskRefinementProvider, MaskRefinementResult, MockupConfig, MockupDisplacement, MockupPrintArea, NormalizedLayerPosition, PatternConfig, PatternLocks, PatternManager, PatternSourceResolver, type PngExportOptions, PositioningAdapter, PrintifyPositioning, ProjectManager, ProjectState, ResizeOptions, SHAPE_MASK_BOX, SHAPE_MASK_IDS, type SelectionStyle, SemanticExportOptions, SerializedBackgroundImageOptions, SerializedLayer, ShapeMaskPresetId, ShapePlugin, SnapManager, SvgExportOptions, TEXTURE_MASK_IDS, TEXTURE_MASK_SIZE, TemplateDefinition, TextCurveConfig, TextCurveManager, TextureMaskPresetId, type TilePlacement, Unit, UnitConverter, type ViewportTransform, applyAspectLock, applyLayerShadow, applyObjectSelectionStyle, applyPatternLocks, applySelectionStyle, buildCurvePathData, buildPatternDataURL, captureLocks, clamp, clearPatternImageCache, clearTextureMaskCache, computeCoverPlacement, computePrintAreaClip, computeTilePositions, deserializeEditor, displaceRgba, drawTiles, escapeXml, exportDataURL, exportMockup, exportPNG, exportPrintArea, exportSVG, generateId, isCssColor, isMaskPresetId, isShapeMaskId, isTextureMaskId, loadPatternImage, readLayerShadow, renderTextureMask, resetTransform, restoreLocks, round2, sanitizeSvg, serializeEditor, shapeMaskPathData };

package/dist/index.d.ts

@@ -47,6 +47,18 @@ declare class LayerManager {
     setLocked(id: string, locked: boolean): void;
     setOpacity(id: string, opacity: number): void;
     setName(id: string, name: string): void;
+    /**
+     * Patch a layer's host metadata. A key whose value is `undefined` is removed.
+     *
+     * `meta` is part of `LayerData` and is serialized, so a host that assigns
+     * `layer.meta.x` directly gets neither of the two things every other setter
+     * here provides: `layers:changed` (so `useLayers()` keeps returning the old
+     * meta) and the history checkpoint (so an undo silently reverts the write —
+     * the state IS versioned, it was just never committed at the moment it
+     * changed). Going through this method is what makes metadata behave like
+     * every other layer property.
+     */
+    setMeta(id: string, patch: LayerMeta): void;
     clear(): void;
     count(): number;
     private emitChanged;
@@ -347,6 +359,47 @@ declare function renderTextureMask(id: TextureMaskId): HTMLCanvasElement;
 /** Drop memoized textures — used by tests and by long-lived editors on dispose. */
 declare function clearTextureMaskCache(): void;
 
+/**
+ * Look of the selection frame and its resize handles.
+ *
+ * Every measurement is in **screen** pixels. Zoom is a display transform (the
+ * view layer CSS-scales the canvas element), so a handle drawn at its nominal
+ * size would grow and shrink with the zoom level; `applySelectionStyle`
+ * counter-scales by 1/zoom so the frame stays the same size on screen whatever
+ * the zoom.
+ */
+interface SelectionStyle {
+    /** Colour of the frame around the selection. */
+    borderColor: string;
+    /** Fill of the resize handles. */
+    cornerColor: string;
+    /** Outline drawn around each handle. */
+    cornerStrokeColor: string;
+    /** Handle diameter, in screen pixels. */
+    cornerSize: number;
+    /** Round handles (as in the design tools) or square ones. */
+    cornerStyle: 'circle' | 'rect';
+    /** Frame line width, in screen pixels. */
+    borderWidth: number;
+    /** Dash pattern for the frame, in screen pixels. Null = solid. */
+    borderDashArray: number[] | null;
+    /** Gap between the object bounds and the frame, in screen pixels. */
+    padding: number;
+    /** Fill of the drag-to-select marquee. */
+    marqueeFill: string;
+}
+declare const DEFAULT_SELECTION_STYLE: SelectionStyle;
+/** Applies the style to ONE object at the given display zoom. */
+declare function applyObjectSelectionStyle(object: FabricObject, style: SelectionStyle, zoom: number): void;
+/**
+ * Applies the style to every object on the canvas plus the active selection.
+ *
+ * The active selection is a transient group that `getObjects()` does not list,
+ * so it is styled separately — otherwise a multi-object selection would keep
+ * fabric's default blue squares.
+ */
+declare function applySelectionStyle(canvas: Canvas, style: SelectionStyle, zoom: number): void;
+
 declare class UnitConverter {
     private unit;
     private dpi;
@@ -508,6 +561,7 @@ declare class CanvasEditor {
     private fileAdapter?;
     private imageProvider?;
     private zoomLevel;
+    private selectionStyle;
     private mockup;
     private designBackground;
     private designBackgroundImage;
@@ -630,6 +684,14 @@ declare class CanvasEditor {
     clearMockup(): void;
     getMockup(): MockupConfig | null;
     dispose(): void;
+    /** Current look of the selection frame and its handles. */
+    getSelectionStyle(): SelectionStyle;
+    /**
+     * Restyles the selection frame and resize handles. Sizes are in screen
+     * pixels and stay constant across zoom levels (see `SelectionStyle`).
+     */
+    setSelectionStyle(style: Partial<SelectionStyle>): void;
+    private refreshSelectionStyle;
     private setupCanvasEvents;
 }
 
@@ -758,4 +820,4 @@ declare class AnnotationOverlay {
  */
 declare function displaceRgba(source: Uint8ClampedArray, map: Uint8ClampedArray, width: number, height: number, options: Omit<MockupDisplacement, 'image'>): Uint8ClampedArray;
 
-export { AnnotationOverlay, type AnnotationPrimitive, BackgroundImageOptions, CANVAS_SIZE_PRESETS, CanvasEditor, CanvasSizePreset, type CoverPlacement, CropController, DEFAULT_LAYER_SHADOW, DEFAULT_TEXT_CURVE, DpiIssue, EditorConfig, EditorEvents, EditorState, EventEmitter, FileAdapter, FontDefinition, FontRegistry, HistoryManager, ImageAdjustments, ImageProvider, ImageProviderResult, ImageSearchOptions, ImageSearchResult, Layer, LayerData, LayerManager, LayerMeta, LayerShadowConfig, LayerType, LicenseConfig, LicenseManager, LicenseStatus, MaskBrushOptions, MaskController, type MaskPerformanceSample, MaskPoint, MaskPresetId, MaskPresetManager, MaskRefinementError, type MaskRefinementErrorCode, MaskRefinementPrompt, MaskRefinementProvider, MaskRefinementResult, MockupConfig, MockupDisplacement, MockupPrintArea, NormalizedLayerPosition, PatternConfig, PatternLocks, PatternManager, PatternSourceResolver, type PngExportOptions, PositioningAdapter, PrintifyPositioning, ProjectManager, ProjectState, ResizeOptions, SHAPE_MASK_BOX, SHAPE_MASK_IDS, SemanticExportOptions, SerializedBackgroundImageOptions, SerializedLayer, ShapeMaskPresetId, ShapePlugin, SnapManager, SvgExportOptions, TEXTURE_MASK_IDS, TEXTURE_MASK_SIZE, TemplateDefinition, TextCurveConfig, TextCurveManager, TextureMaskPresetId, type TilePlacement, Unit, UnitConverter, type ViewportTransform, applyAspectLock, applyLayerShadow, applyPatternLocks, buildCurvePathData, buildPatternDataURL, captureLocks, clamp, clearPatternImageCache, clearTextureMaskCache, computeCoverPlacement, computePrintAreaClip, computeTilePositions, deserializeEditor, displaceRgba, drawTiles, escapeXml, exportDataURL, exportMockup, exportPNG, exportPrintArea, exportSVG, generateId, isCssColor, isMaskPresetId, isShapeMaskId, isTextureMaskId, loadPatternImage, readLayerShadow, renderTextureMask, resetTransform, restoreLocks, round2, sanitizeSvg, serializeEditor, shapeMaskPathData };
+export { AnnotationOverlay, type AnnotationPrimitive, BackgroundImageOptions, CANVAS_SIZE_PRESETS, CanvasEditor, CanvasSizePreset, type CoverPlacement, CropController, DEFAULT_LAYER_SHADOW, DEFAULT_SELECTION_STYLE, DEFAULT_TEXT_CURVE, DpiIssue, EditorConfig, EditorEvents, EditorState, EventEmitter, FileAdapter, FontDefinition, FontRegistry, HistoryManager, ImageAdjustments, ImageProvider, ImageProviderResult, ImageSearchOptions, ImageSearchResult, Layer, LayerData, LayerManager, LayerMeta, LayerShadowConfig, LayerType, LicenseConfig, LicenseManager, LicenseStatus, MaskBrushOptions, MaskController, type MaskPerformanceSample, MaskPoint, MaskPresetId, MaskPresetManager, MaskRefinementError, type MaskRefinementErrorCode, MaskRefinementPrompt, MaskRefinementProvider, MaskRefinementResult, MockupConfig, MockupDisplacement, MockupPrintArea, NormalizedLayerPosition, PatternConfig, PatternLocks, PatternManager, PatternSourceResolver, type PngExportOptions, PositioningAdapter, PrintifyPositioning, ProjectManager, ProjectState, ResizeOptions, SHAPE_MASK_BOX, SHAPE_MASK_IDS, type SelectionStyle, SemanticExportOptions, SerializedBackgroundImageOptions, SerializedLayer, ShapeMaskPresetId, ShapePlugin, SnapManager, SvgExportOptions, TEXTURE_MASK_IDS, TEXTURE_MASK_SIZE, TemplateDefinition, TextCurveConfig, TextCurveManager, TextureMaskPresetId, type TilePlacement, Unit, UnitConverter, type ViewportTransform, applyAspectLock, applyLayerShadow, applyObjectSelectionStyle, applyPatternLocks, applySelectionStyle, buildCurvePathData, buildPatternDataURL, captureLocks, clamp, clearPatternImageCache, clearTextureMaskCache, computeCoverPlacement, computePrintAreaClip, computeTilePositions, deserializeEditor, displaceRgba, drawTiles, escapeXml, exportDataURL, exportMockup, exportPNG, exportPrintArea, exportSVG, generateId, isCssColor, isMaskPresetId, isShapeMaskId, isTextureMaskId, loadPatternImage, readLayerShadow, renderTextureMask, resetTransform, restoreLocks, round2, sanitizeSvg, serializeEditor, shapeMaskPathData };