@bwp-web/canvas 0.4.2 → 0.5.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/dist/Canvas/Canvas.d.ts +11 -1
- package/dist/Canvas/Canvas.d.ts.map +1 -1
- package/dist/background.d.ts +21 -8
- package/dist/background.d.ts.map +1 -1
- package/dist/constants.d.ts +2 -2
- package/dist/constants.d.ts.map +1 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/shared.d.ts +3 -2
- package/dist/hooks/shared.d.ts.map +1 -1
- package/dist/hooks/useEditCanvas.d.ts +4 -2
- package/dist/hooks/useEditCanvas.d.ts.map +1 -1
- package/dist/hooks/useObjectOverlay.d.ts +49 -0
- package/dist/hooks/useObjectOverlay.d.ts.map +1 -0
- package/dist/hooks/useViewCanvas.d.ts +3 -1
- package/dist/hooks/useViewCanvas.d.ts.map +1 -1
- package/dist/index.cjs +253 -40
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +246 -33
- package/dist/index.js.map +1 -1
- package/dist/interactions/dragToCreate.d.ts +2 -0
- package/dist/interactions/dragToCreate.d.ts.map +1 -1
- package/dist/interactions/drawToCreate.d.ts +7 -1
- package/dist/interactions/drawToCreate.d.ts.map +1 -1
- package/dist/serialization.d.ts +1 -1
- package/dist/serialization.d.ts.map +1 -1
- package/dist/viewport.d.ts +18 -7
- package/dist/viewport.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/Canvas/Canvas.d.ts
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
import { Canvas as FabricCanvas } from 'fabric';
|
|
2
|
-
import { CSSProperties } from 'react';
|
|
2
|
+
import { type CSSProperties } from 'react';
|
|
3
3
|
export interface CanvasProps {
|
|
4
|
+
/**
|
|
5
|
+
* Canvas width in pixels. When both `width` and `height` are provided,
|
|
6
|
+
* the canvas uses fixed dimensions. When omitted, the canvas auto-fills
|
|
7
|
+
* its parent container and resizes with it.
|
|
8
|
+
*/
|
|
4
9
|
width?: number;
|
|
10
|
+
/**
|
|
11
|
+
* Canvas height in pixels. When both `width` and `height` are provided,
|
|
12
|
+
* the canvas uses fixed dimensions. When omitted, the canvas auto-fills
|
|
13
|
+
* its parent container and resizes with it.
|
|
14
|
+
*/
|
|
5
15
|
height?: number;
|
|
6
16
|
className?: string;
|
|
7
17
|
style?: CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../src/Canvas/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../src/Canvas/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,WAAW,2CAqEb"}
|
package/dist/background.d.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { Canvas as FabricCanvas, FabricImage } from 'fabric';
|
|
2
|
+
/**
|
|
3
|
+
* Get the source URL of the canvas background image, or `null` if no
|
|
4
|
+
* background image is set.
|
|
5
|
+
*/
|
|
6
|
+
export declare function getBackgroundSrc(canvas: FabricCanvas): string | null;
|
|
2
7
|
export interface FitViewportOptions {
|
|
3
8
|
/**
|
|
4
9
|
* Fraction of the canvas to leave as empty margin around the image.
|
|
@@ -14,15 +19,23 @@ export interface FitViewportOptions {
|
|
|
14
19
|
*/
|
|
15
20
|
export declare function fitViewportToBackground(canvas: FabricCanvas, options?: FitViewportOptions): void;
|
|
16
21
|
/**
|
|
17
|
-
* Set the
|
|
18
|
-
*
|
|
22
|
+
* Set the contrast of the canvas background image.
|
|
23
|
+
*
|
|
24
|
+
* Value is expressed as a 0–2 scale:
|
|
25
|
+
* - **0**: minimum contrast (flat grey).
|
|
26
|
+
* - **1**: normal / unmodified (no filter applied).
|
|
27
|
+
* - **2**: maximum contrast (darks are truly dark, lights truly light).
|
|
28
|
+
*
|
|
29
|
+
* Clamped to the 0–2 range.
|
|
19
30
|
*/
|
|
20
|
-
export declare function
|
|
31
|
+
export declare function setBackgroundContrast(canvas: FabricCanvas, value: number): void;
|
|
21
32
|
/**
|
|
22
|
-
* Get the current
|
|
33
|
+
* Get the current contrast of the canvas background image.
|
|
34
|
+
*
|
|
35
|
+
* Returns a value in the 0–2 range where 1 is normal (no filter).
|
|
23
36
|
* Returns 1 if no background image is set.
|
|
24
37
|
*/
|
|
25
|
-
export declare function
|
|
38
|
+
export declare function getBackgroundContrast(canvas: FabricCanvas): number;
|
|
26
39
|
/**
|
|
27
40
|
* Add or remove the Invert filter from the canvas background image.
|
|
28
41
|
*/
|
|
@@ -70,14 +83,14 @@ export interface ResizeImageOptions {
|
|
|
70
83
|
*/
|
|
71
84
|
export declare function resizeImageUrl(url: string, options?: ResizeImageOptions): Promise<ResizeResult>;
|
|
72
85
|
export interface SetBackgroundImageOptions extends ResizeImageOptions {
|
|
73
|
-
/** Preserve the current background
|
|
74
|
-
|
|
86
|
+
/** Preserve the current background contrast when replacing the image. */
|
|
87
|
+
preserveContrast?: boolean;
|
|
75
88
|
}
|
|
76
89
|
/**
|
|
77
90
|
* Set an image URL as the canvas background image.
|
|
78
91
|
*
|
|
79
92
|
* Pass options to control auto-resize (`maxSize`, `minSize`) and/or
|
|
80
|
-
* preserve the current background
|
|
93
|
+
* preserve the current background contrast when replacing the image.
|
|
81
94
|
* Omit to load the URL as-is without resizing.
|
|
82
95
|
*
|
|
83
96
|
* Returns the created FabricImage for further manipulation.
|
package/dist/background.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../src/background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,WAAW,EAAW,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../src/background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,WAAW,EAAW,MAAM,QAAQ,CAAC;AAWtE;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,CAIpE;AAID,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,IAAI,CAiCN;AAID;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,MAAM,GACZ,IAAI,CA6BN;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAUlE;AAID;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,OAAO,GAChB,IAAI,CAgBN;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,OAAO,CAInE;AAID,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,YAAY,CAAC,CAkDvB;AAID,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,yBAAyB,GAClC,OAAO,CAAC,WAAW,CAAC,CAmBtB"}
|
package/dist/constants.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ export declare const DEFAULT_MIN_ZOOM = 0.2;
|
|
|
4
4
|
export declare const DEFAULT_MAX_ZOOM = 10;
|
|
5
5
|
/** Zoom sensitivity multiplier (applied per wheel tick). */
|
|
6
6
|
export declare const DEFAULT_ZOOM_FACTOR = 1.03;
|
|
7
|
-
/** Default
|
|
8
|
-
export declare const DEFAULT_ZOOM_STEP =
|
|
7
|
+
/** Default multiplier for programmatic zoomIn/zoomOut (1.2 = 20% per click). */
|
|
8
|
+
export declare const DEFAULT_ZOOM_STEP = 1.2;
|
|
9
9
|
/** Default viewport padding fraction (5% on each side). */
|
|
10
10
|
export declare const DEFAULT_VIEWPORT_PADDING = 0.05;
|
|
11
11
|
/** Reference canvas dimension for scaling snap margins proportionally. */
|
package/dist/constants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAI7C,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,8CAA8C;AAC9C,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAI9C;;;GAGG;AACH,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAI1C,oDAAoD;AACpD,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAI1C,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAC9C,eAAO,MAAM,0BAA0B,YAAY,CAAC;AACpD,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,kCAAkC,IAAI,CAAC"}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -8,4 +8,6 @@ export { useCanvasTooltip } from './useCanvasTooltip';
|
|
|
8
8
|
export type { UseCanvasTooltipOptions, CanvasTooltipState, } from './useCanvasTooltip';
|
|
9
9
|
export { useCanvasClick } from './useCanvasClick';
|
|
10
10
|
export type { UseCanvasClickOptions } from './useCanvasClick';
|
|
11
|
+
export { useObjectOverlay } from './useObjectOverlay';
|
|
12
|
+
export type { UseObjectOverlayOptions } from './useObjectOverlay';
|
|
11
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC"}
|
package/dist/hooks/shared.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type RefObject } from 'react';
|
|
2
|
-
import { Canvas as FabricCanvas } from 'fabric';
|
|
3
|
-
import { type ViewportController } from '../viewport';
|
|
2
|
+
import { Canvas as FabricCanvas, type FabricObject } from 'fabric';
|
|
3
|
+
import { type PanToObjectOptions, type ViewportController } from '../viewport';
|
|
4
4
|
/** Sync React zoom state with the canvas zoom level. */
|
|
5
5
|
export declare function syncZoom(canvasRef: RefObject<FabricCanvas | null>, setZoom: (z: number) => void): void;
|
|
6
6
|
/**
|
|
@@ -11,6 +11,7 @@ export declare function createViewportActions(canvasRef: RefObject<FabricCanvas
|
|
|
11
11
|
resetViewport: () => void;
|
|
12
12
|
zoomIn: (step?: number) => void;
|
|
13
13
|
zoomOut: (step?: number) => void;
|
|
14
|
+
panToObject: (object: FabricObject, panOpts?: PanToObjectOptions) => void;
|
|
14
15
|
};
|
|
15
16
|
/**
|
|
16
17
|
* Resolve whether alignment should be enabled based on the master toggle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/hooks/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/hooks/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,aAAa,CAAC;AAGrB,wDAAwD;AACxD,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,GAC3B,IAAI,CAGN;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,WAAW,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,EACjD,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;;oBAaL,MAAM;qBAKL,MAAM;0BAKD,YAAY,YAAY,kBAAkB;EAKxE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,eAAe,EAAE,OAAO,GAAG,SAAS,EACpC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAC1C,OAAO,CAGT"}
|
|
@@ -103,6 +103,8 @@ export declare function useEditCanvas(options?: UseEditCanvasOptions): {
|
|
|
103
103
|
zoomIn: (step?: number) => void;
|
|
104
104
|
/** Zoom out from the canvas center. Default step: 0.2. */
|
|
105
105
|
zoomOut: (step?: number) => void;
|
|
106
|
+
/** Pan the viewport to center on a specific object. */
|
|
107
|
+
panToObject: (object: FabricObject, panOpts?: import("../viewport").PanToObjectOptions) => void;
|
|
106
108
|
};
|
|
107
109
|
/** Whether vertex edit mode is currently active (reactive). */
|
|
108
110
|
isEditingVertices: boolean;
|
|
@@ -127,11 +129,11 @@ export declare function useEditCanvas(options?: UseEditCanvasOptions): {
|
|
|
127
129
|
* exceeds the configured limits (opt out via `backgroundResize: false`),
|
|
128
130
|
* and fits the viewport after setting if `autoFitToBackground` is enabled.
|
|
129
131
|
*
|
|
130
|
-
* Pass `{
|
|
132
|
+
* Pass `{ preserveContrast: true }` to keep the current background contrast
|
|
131
133
|
* when replacing the image.
|
|
132
134
|
*/
|
|
133
135
|
setBackground: (url: string, bgOpts?: {
|
|
134
|
-
|
|
136
|
+
preserveContrast?: boolean;
|
|
135
137
|
}) => Promise<import("fabric").FabricImage<Partial<import("fabric").ImageProps>, import("fabric").SerializedImageProps, import("fabric").ObjectEvents>>;
|
|
136
138
|
/** Whether the canvas has been modified since the last `resetDirty()` call. Requires `trackChanges: true`. */
|
|
137
139
|
isDirty: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAuOxD,8CAA8C;sBA9KrC,YAAY;IAgLrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,6CAA6C;;IAE7C,yBAAyB;;QAEvB,wCAAwC;;QAExC,wDAAwD;wBAnDjB,YAAY;QAqDnD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;;
|
|
1
|
+
{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAuOxD,8CAA8C;sBA9KrC,YAAY;IAgLrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,6CAA6C;;IAE7C,yBAAyB;;QAEvB,wCAAwC;;QAExC,wDAAwD;wBAnDjB,YAAY;QAqDnD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;;IAGzD,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBArP+B,SAAS,GAAG,IAAI;IAuPlD;;;;;;;OAOG;yBA3ES,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IA6E3D,8GAA8G;;IAE9G,4DAA4D;;EAG/D"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
import type { Canvas as FabricCanvas, FabricObject } from 'fabric';
|
|
3
|
+
export interface UseObjectOverlayOptions {
|
|
4
|
+
/**
|
|
5
|
+
* Automatically scale the overlay content so it fits within the object
|
|
6
|
+
* bounds at the current zoom level.
|
|
7
|
+
* Default: false.
|
|
8
|
+
*/
|
|
9
|
+
autoScaleContent?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* CSS selector for a text element inside the overlay. When
|
|
12
|
+
* `autoScaleContent` is enabled and the computed scale drops below a
|
|
13
|
+
* threshold, elements matching this selector are hidden (via
|
|
14
|
+
* `display: none`) so only icons remain visible.
|
|
15
|
+
* Default: undefined (no text hiding).
|
|
16
|
+
*/
|
|
17
|
+
textSelector?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Minimum content scale at which `textSelector` elements remain visible.
|
|
20
|
+
* Below this threshold, matched elements are hidden.
|
|
21
|
+
* Default: 0.5.
|
|
22
|
+
*/
|
|
23
|
+
textMinScale?: number;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Position a DOM element over a Fabric canvas object, kept in sync with
|
|
27
|
+
* pan, zoom, move, scale, and rotate transforms.
|
|
28
|
+
*
|
|
29
|
+
* Returns a ref to attach to the overlay container element. The element
|
|
30
|
+
* must be positioned absolutely within a relative-positioned parent that
|
|
31
|
+
* wraps the `<Canvas>` component.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* const overlayRef = useObjectOverlay(canvasRef, object, {
|
|
36
|
+
* autoScaleContent: true,
|
|
37
|
+
* textSelector: '.desk-text',
|
|
38
|
+
* });
|
|
39
|
+
*
|
|
40
|
+
* return (
|
|
41
|
+
* <div ref={overlayRef} style={{ position: 'absolute', pointerEvents: 'none' }}>
|
|
42
|
+
* <CanvasDeskIcon />
|
|
43
|
+
* <span className="desk-text">{name}</span>
|
|
44
|
+
* </div>
|
|
45
|
+
* );
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare function useObjectOverlay(canvasRef: RefObject<FabricCanvas | null>, object: FabricObject | null | undefined, options?: UseObjectOverlayOptions): RefObject<HTMLDivElement | null>;
|
|
49
|
+
//# sourceMappingURL=useObjectOverlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useObjectOverlay.d.ts","sourceRoot":"","sources":["../../src/hooks/useObjectOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGnE,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACvC,OAAO,CAAC,EAAE,uBAAuB,GAChC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAuElC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Canvas as FabricCanvas } from 'fabric';
|
|
1
|
+
import { Canvas as FabricCanvas, type FabricObject } from 'fabric';
|
|
2
2
|
import { type PanAndZoomOptions } from '../viewport';
|
|
3
3
|
/** Visual properties that can be updated on view-canvas objects. */
|
|
4
4
|
export interface ViewObjectStyle {
|
|
@@ -55,6 +55,8 @@ export declare function useViewCanvas(options?: UseViewCanvasOptions): {
|
|
|
55
55
|
zoomIn: (step?: number) => void;
|
|
56
56
|
/** Zoom out from the canvas center. Default step: 0.2. */
|
|
57
57
|
zoomOut: (step?: number) => void;
|
|
58
|
+
/** Pan the viewport to center on a specific object. */
|
|
59
|
+
panToObject: (object: FabricObject, panOpts?: import("../viewport").PanToObjectOptions) => void;
|
|
58
60
|
};
|
|
59
61
|
/** Update a single object's visual style by its `data.id`. */
|
|
60
62
|
setObjectStyle: (id: string, style: ViewObjectStyle) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useViewCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,
|
|
1
|
+
{"version":3,"file":"useViewCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAQ,MAAM,QAAQ,CAAC;AACzE,OAAO,EAEL,KAAK,iBAAiB,EAEvB,MAAM,aAAa,CAAC;AAKrB,oEAAoE;AACpE,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAuBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAgHxD,8CAA8C;sBAzGrC,YAAY;IA2GrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,yBAAyB;;QAEvB,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;;IAGzD,8DAA8D;yBAjExB,MAAM,SAAS,eAAe;IAmEpE,sFAAsF;8BA1D7E,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IA4DxC,qEAAqE;iCArC9D,MAAM,SAAS,eAAe;EAwCxC"}
|