@bwp-web/canvas 0.4.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 -0
- package/dist/Canvas/Canvas.d.ts.map +1 -0
- package/dist/Canvas/index.d.ts +3 -0
- package/dist/Canvas/index.d.ts.map +1 -0
- package/dist/alignment/cursorSnapping.d.ts +55 -0
- package/dist/alignment/cursorSnapping.d.ts.map +1 -0
- package/dist/alignment/index.d.ts +9 -0
- package/dist/alignment/index.d.ts.map +1 -0
- package/dist/alignment/objectAlignment.d.ts +27 -0
- package/dist/alignment/objectAlignment.d.ts.map +1 -0
- package/dist/alignment/objectAlignmentMath.d.ts +35 -0
- package/dist/alignment/objectAlignmentMath.d.ts.map +1 -0
- package/dist/alignment/objectAlignmentRendering.d.ts +21 -0
- package/dist/alignment/objectAlignmentRendering.d.ts.map +1 -0
- package/dist/alignment/objectAlignmentUtils.d.ts +44 -0
- package/dist/alignment/objectAlignmentUtils.d.ts.map +1 -0
- package/dist/alignment/rotationSnap.d.ts +16 -0
- package/dist/alignment/rotationSnap.d.ts.map +1 -0
- package/dist/alignment/snapPoints.d.ts +18 -0
- package/dist/alignment/snapPoints.d.ts.map +1 -0
- package/dist/background.d.ts +79 -0
- package/dist/background.d.ts.map +1 -0
- package/dist/constants.d.ts +34 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/fabricAugmentation.d.ts +15 -0
- package/dist/fabricAugmentation.d.ts.map +1 -0
- package/dist/hooks/index.d.ts +5 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/shared.d.ts +20 -0
- package/dist/hooks/shared.d.ts.map +1 -0
- package/dist/hooks/useEditCanvas.d.ts +126 -0
- package/dist/hooks/useEditCanvas.d.ts.map +1 -0
- package/dist/hooks/useViewCanvas.d.ts +66 -0
- package/dist/hooks/useViewCanvas.d.ts.map +1 -0
- package/dist/index.cjs +2424 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +38 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2365 -0
- package/dist/index.js.map +1 -0
- package/dist/interactions/clickToCreate.d.ts +10 -0
- package/dist/interactions/clickToCreate.d.ts.map +1 -0
- package/dist/interactions/dragToCreate.d.ts +20 -0
- package/dist/interactions/dragToCreate.d.ts.map +1 -0
- package/dist/interactions/drawToCreate.d.ts +28 -0
- package/dist/interactions/drawToCreate.d.ts.map +1 -0
- package/dist/interactions/index.d.ts +9 -0
- package/dist/interactions/index.d.ts.map +1 -0
- package/dist/interactions/interactionSnapping.d.ts +34 -0
- package/dist/interactions/interactionSnapping.d.ts.map +1 -0
- package/dist/interactions/shared.d.ts +13 -0
- package/dist/interactions/shared.d.ts.map +1 -0
- package/dist/interactions/vertexEdit.d.ts +18 -0
- package/dist/interactions/vertexEdit.d.ts.map +1 -0
- package/dist/keyboard.d.ts +13 -0
- package/dist/keyboard.d.ts.map +1 -0
- package/dist/serialization.d.ts +52 -0
- package/dist/serialization.d.ts.map +1 -0
- package/dist/shapes/circle.d.ts +36 -0
- package/dist/shapes/circle.d.ts.map +1 -0
- package/dist/shapes/index.d.ts +4 -0
- package/dist/shapes/index.d.ts.map +1 -0
- package/dist/shapes/polygon.d.ts +37 -0
- package/dist/shapes/polygon.d.ts.map +1 -0
- package/dist/shapes/rectangle.d.ts +31 -0
- package/dist/shapes/rectangle.d.ts.map +1 -0
- package/dist/styles.d.ts +46 -0
- package/dist/styles.d.ts.map +1 -0
- package/dist/types.d.ts +48 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/viewport.d.ts +51 -0
- package/dist/viewport.d.ts.map +1 -0
- package/package.json +51 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Canvas as FabricCanvas } from 'fabric';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
3
|
+
export interface CanvasProps {
|
|
4
|
+
width?: number;
|
|
5
|
+
height?: number;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: CSSProperties;
|
|
8
|
+
onReady?: (canvas: FabricCanvas) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare function Canvas({ width, height, className, style, onReady, }: CanvasProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=Canvas.d.ts.map
|
|
@@ -0,0 +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;AAGzD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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,KAAW,EACX,MAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,WAAW,2CA2Bb"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Canvas as FabricCanvas, type FabricObject, Point } from 'fabric';
|
|
2
|
+
export interface CursorSnapResult {
|
|
3
|
+
/** The snapped point (or original if no snap occurred). */
|
|
4
|
+
point: Point;
|
|
5
|
+
/** Whether a snap occurred on either axis. */
|
|
6
|
+
snapped: boolean;
|
|
7
|
+
/** Whether the X coordinate was snapped. */
|
|
8
|
+
snapX: boolean;
|
|
9
|
+
/** Whether the Y coordinate was snapped. */
|
|
10
|
+
snapY: boolean;
|
|
11
|
+
/** All target points that triggered the X-axis snap (for drawing guidelines). */
|
|
12
|
+
alignTargetsX?: Point[];
|
|
13
|
+
/** All target points that triggered the Y-axis snap (for drawing guidelines). */
|
|
14
|
+
alignTargetsY?: Point[];
|
|
15
|
+
}
|
|
16
|
+
export interface CursorSnapOptions {
|
|
17
|
+
/**
|
|
18
|
+
* Base snap margin in screen-pixel-equivalent units. Default: 6.
|
|
19
|
+
* The effective scene-space margin is `margin * sizeScale / zoom`, where
|
|
20
|
+
* `sizeScale` grows proportionally with canvas size so that snapping feels
|
|
21
|
+
* consistent regardless of how large the canvas coordinate space is.
|
|
22
|
+
*/
|
|
23
|
+
margin?: number;
|
|
24
|
+
/** Objects to exclude from snap targets (e.g., preview elements). */
|
|
25
|
+
exclude?: Set<FabricObject>;
|
|
26
|
+
/** Pre-computed target points. If provided, skips object iteration. */
|
|
27
|
+
targetPoints?: Point[];
|
|
28
|
+
/**
|
|
29
|
+
* Scale the snap margin proportionally with canvas size.
|
|
30
|
+
* Uses `max(width, height) / 1000` as a multiplier so large canvases
|
|
31
|
+
* (e.g. floor plans) get proportionally larger snap zones.
|
|
32
|
+
* Default: `true`. Pass `false` to use a fixed margin regardless of size.
|
|
33
|
+
*/
|
|
34
|
+
scaleWithCanvasSize?: boolean;
|
|
35
|
+
}
|
|
36
|
+
export interface GuidelineStyle {
|
|
37
|
+
color?: string;
|
|
38
|
+
width?: number;
|
|
39
|
+
xSize?: number;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Compute a snapped cursor position given a raw scene-space point.
|
|
43
|
+
* Finds the closest X and closest Y alignment independently,
|
|
44
|
+
* snapping each axis if within margin.
|
|
45
|
+
*/
|
|
46
|
+
export declare function snapCursorPoint(canvas: FabricCanvas, rawPoint: Point, options?: CursorSnapOptions): CursorSnapResult;
|
|
47
|
+
/**
|
|
48
|
+
* Draw alignment guidelines on the canvas top context based on a snap result.
|
|
49
|
+
* Renders lines from the snapped point to the alignment target points,
|
|
50
|
+
* with X markers at both endpoints.
|
|
51
|
+
*/
|
|
52
|
+
export declare function drawCursorGuidelines(canvas: FabricCanvas, snapResult: CursorSnapResult, style?: GuidelineStyle): void;
|
|
53
|
+
/** Clear the canvas top context to remove previous guidelines. */
|
|
54
|
+
export declare function clearCursorGuidelines(canvas: FabricCanvas): void;
|
|
55
|
+
//# sourceMappingURL=cursorSnapping.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cursorSnapping.d.ts","sourceRoot":"","sources":["../../src/alignment/cursorSnapping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAI1E,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,KAAK,EAAE,KAAK,CAAC;IACb,8CAA8C;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,KAAK,EAAE,OAAO,CAAC;IACf,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,OAAO,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC5B,uEAAuE;IACvE,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;IACvB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,KAAK,EACf,OAAO,CAAC,EAAE,iBAAiB,GAC1B,gBAAgB,CA2DlB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,YAAY,EACpB,UAAU,EAAE,gBAAgB,EAC5B,KAAK,CAAC,EAAE,cAAc,GACrB,IAAI,CAwCN;AAeD,kEAAkE;AAClE,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAEhE"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { getSnapPoints, registerSnapPointExtractor } from './snapPoints';
|
|
2
|
+
export type { SnapPointExtractor } from './snapPoints';
|
|
3
|
+
export { enableObjectAlignment } from './objectAlignment';
|
|
4
|
+
export type { ObjectAlignmentOptions } from './objectAlignment';
|
|
5
|
+
export { enableRotationSnap } from './rotationSnap';
|
|
6
|
+
export type { RotationSnapOptions } from './rotationSnap';
|
|
7
|
+
export { snapCursorPoint, drawCursorGuidelines, clearCursorGuidelines, } from './cursorSnapping';
|
|
8
|
+
export type { CursorSnapResult, CursorSnapOptions, GuidelineStyle, } from './cursorSnapping';
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alignment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACf,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type Canvas } from 'fabric';
|
|
2
|
+
export interface ObjectAlignmentOptions {
|
|
3
|
+
/** At what distance from the shape does alignment begin? Default: 6. */
|
|
4
|
+
margin?: number;
|
|
5
|
+
/** Aligning line width. Default: 1. */
|
|
6
|
+
width?: number;
|
|
7
|
+
/** Aligning line color. Default: 'rgba(255,0,0,0.9)'. */
|
|
8
|
+
color?: string;
|
|
9
|
+
/** Endpoint marker size. Default: 2.4. */
|
|
10
|
+
xSize?: number;
|
|
11
|
+
/** Dashed line style. */
|
|
12
|
+
lineDash?: number[];
|
|
13
|
+
/**
|
|
14
|
+
* Scale the snap margin proportionally with canvas size.
|
|
15
|
+
* Uses `max(width, height) / 1000` as a multiplier so large canvases
|
|
16
|
+
* (e.g. floor plans) get proportionally larger snap zones.
|
|
17
|
+
* Default: `true`. Pass `false` to use a fixed margin regardless of size.
|
|
18
|
+
*/
|
|
19
|
+
scaleWithCanvasSize?: boolean;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Enable object alignment guidelines on a canvas.
|
|
23
|
+
* Draws visual guidelines and snaps objects during movement and scaling.
|
|
24
|
+
* Returns a dispose function for cleanup.
|
|
25
|
+
*/
|
|
26
|
+
export declare function enableObjectAlignment(canvas: Canvas, options?: ObjectAlignmentOptions): () => void;
|
|
27
|
+
//# sourceMappingURL=objectAlignment.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"objectAlignment.d.ts","sourceRoot":"","sources":["../../src/alignment/objectAlignment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAkC,MAAM,QAAQ,CAAC;AAsBrE,MAAM,WAAW,sBAAsB;IACrC,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAkOD;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM,IAAI,CAGZ"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { type FabricObject, Point } from 'fabric';
|
|
2
|
+
import { type AlignmentLine, type OriginMap } from './objectAlignmentUtils';
|
|
3
|
+
/** Maps each corner/midpoint to the opposite origin for anchoring during scale. */
|
|
4
|
+
export declare const OPPOSITE_ORIGIN_MAP: OriginMap;
|
|
5
|
+
/**
|
|
6
|
+
* Collect alignment lines when an object is being moved.
|
|
7
|
+
* Checks the target's corners + center against all snap points.
|
|
8
|
+
*/
|
|
9
|
+
export declare function collectMovingAlignmentLines(target: FabricObject, points: Point[], margin: number): {
|
|
10
|
+
verticalLines: AlignmentLine[];
|
|
11
|
+
horizontalLines: AlignmentLine[];
|
|
12
|
+
};
|
|
13
|
+
interface ScalingAlignmentProps {
|
|
14
|
+
target: FabricObject;
|
|
15
|
+
point: Point;
|
|
16
|
+
diagonalPoint: Point;
|
|
17
|
+
list: Point[];
|
|
18
|
+
isScale: boolean;
|
|
19
|
+
isUniform: boolean;
|
|
20
|
+
isCenter: boolean;
|
|
21
|
+
corner: string;
|
|
22
|
+
margin: number;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Collect vertical (X-axis) snap offset during scaling/resizing.
|
|
26
|
+
* Adjusts the target's scaleX (or width) to align with the nearest snap point.
|
|
27
|
+
*/
|
|
28
|
+
export declare function collectVerticalSnapOffset(props: ScalingAlignmentProps): AlignmentLine[];
|
|
29
|
+
/**
|
|
30
|
+
* Collect horizontal (Y-axis) snap offset during scaling/resizing.
|
|
31
|
+
* Adjusts the target's scaleY (or height) to align with the nearest snap point.
|
|
32
|
+
*/
|
|
33
|
+
export declare function collectHorizontalSnapOffset(props: ScalingAlignmentProps): AlignmentLine[];
|
|
34
|
+
export {};
|
|
35
|
+
//# sourceMappingURL=objectAlignmentMath.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"objectAlignmentMath.d.ts","sourceRoot":"","sources":["../../src/alignment/objectAlignmentMath.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAGf,MAAM,wBAAwB,CAAC;AAEhC,mFAAmF;AACnF,eAAO,MAAM,mBAAmB,EAAE,SASjC,CAAC;AAIF;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,KAAK,EAAE,EACf,MAAM,EAAE,MAAM,GACb;IAAE,aAAa,EAAE,aAAa,EAAE,CAAC;IAAC,eAAe,EAAE,aAAa,EAAE,CAAA;CAAE,CAOtE;AAoDD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,KAAK,CAAC;IACrB,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,qBAAqB,GAC3B,aAAa,EAAE,CAwCjB;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,qBAAqB,GAC3B,aAAa,EAAE,CAwCjB"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Canvas, Point } from 'fabric';
|
|
2
|
+
import type { AlignmentLine } from './objectAlignmentUtils';
|
|
3
|
+
/** Style configuration for alignment guideline rendering. */
|
|
4
|
+
export interface AlignmentRenderConfig {
|
|
5
|
+
canvas: Canvas;
|
|
6
|
+
width: number;
|
|
7
|
+
color: string;
|
|
8
|
+
xSize: number;
|
|
9
|
+
lineDash?: number[];
|
|
10
|
+
}
|
|
11
|
+
/** Draw a single alignment line between two points, with X markers at each end. */
|
|
12
|
+
export declare function drawAlignmentLine(config: AlignmentRenderConfig, origin: Point, target: Point): void;
|
|
13
|
+
/** Draw an X marker at a point. */
|
|
14
|
+
export declare function drawXMarker(ctx: CanvasRenderingContext2D, point: Point, size: number): void;
|
|
15
|
+
/** Draw X markers only (no lines) for a list of alignment lines. */
|
|
16
|
+
export declare function drawMarkerList(config: AlignmentRenderConfig, lines: AlignmentLine[]): void;
|
|
17
|
+
/** Draw vertical alignment lines (lines connecting points at the same X coordinate). */
|
|
18
|
+
export declare function drawVerticalAlignmentLines(config: AlignmentRenderConfig, lines: Set<string>): void;
|
|
19
|
+
/** Draw horizontal alignment lines (lines connecting points at the same Y coordinate). */
|
|
20
|
+
export declare function drawHorizontalAlignmentLines(config: AlignmentRenderConfig, lines: Set<string>): void;
|
|
21
|
+
//# sourceMappingURL=objectAlignmentRendering.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"objectAlignmentRendering.d.ts","sourceRoot":"","sources":["../../src/alignment/objectAlignmentRendering.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,6DAA6D;AAC7D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,mFAAmF;AACnF,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,qBAAqB,EAC7B,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,KAAK,GACZ,IAAI,CAiBN;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CACzB,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,MAAM,GACX,IAAI,CAUN;AAED,oEAAoE;AACpE,wBAAgB,cAAc,CAC5B,MAAM,EAAE,qBAAqB,EAC7B,KAAK,EAAE,aAAa,EAAE,GACrB,IAAI,CAWN;AAED,wFAAwF;AACxF,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,qBAAqB,EAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,GACjB,IAAI,CAMN;AAED,0FAA0F;AAC1F,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,qBAAqB,EAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,GACjB,IAAI,CAMN"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { type BasicTransformEvent, type FabricObject, Point, type TOriginX, type TOriginY, type TPointerEvent } from 'fabric';
|
|
2
|
+
/** A line segment between two alignment points, used for guideline drawing. */
|
|
3
|
+
export interface AlignmentLine {
|
|
4
|
+
origin: Point;
|
|
5
|
+
target: Point;
|
|
6
|
+
}
|
|
7
|
+
export type TransformEvent = BasicTransformEvent<TPointerEvent> & {
|
|
8
|
+
target: FabricObject;
|
|
9
|
+
};
|
|
10
|
+
export type OriginMap = Record<string, [TOriginX, TOriginY]>;
|
|
11
|
+
/**
|
|
12
|
+
* Get the four bounding-box corners of a FabricObject in scene space using
|
|
13
|
+
* only geometric dimensions (width × height through the transform matrix),
|
|
14
|
+
* without stroke-width contribution. This ensures snap/alignment targets
|
|
15
|
+
* are stable regardless of stroke scaling.
|
|
16
|
+
*/
|
|
17
|
+
export declare function getStrokeFreeCoords(obj: FabricObject): [Point, Point, Point, Point];
|
|
18
|
+
/** Return the absolute distance between two values. */
|
|
19
|
+
export declare function getAbsoluteDistance(a: number, b: number): number;
|
|
20
|
+
/**
|
|
21
|
+
* Find the closest value on a given axis from a list of points.
|
|
22
|
+
* Returns the minimum distance and all points at that distance.
|
|
23
|
+
*/
|
|
24
|
+
export declare function findNearestOnAxis(point: Point, list: Point[], axis: 'x' | 'y'): {
|
|
25
|
+
distance: number;
|
|
26
|
+
matches: Point[];
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Get a map of bounding-box key points for an object:
|
|
30
|
+
* corners (tl, tr, br, bl) and edge midpoints (mt, mr, mb, ml).
|
|
31
|
+
*/
|
|
32
|
+
export declare function getBoundingPointMap(target: FabricObject): Record<string, Point>;
|
|
33
|
+
/**
|
|
34
|
+
* Get a map of the opposite (diagonal) corners for each control point.
|
|
35
|
+
* Used during scaling to anchor the opposite side.
|
|
36
|
+
*/
|
|
37
|
+
export declare function getOppositeCornerMap(target: FabricObject): Record<string, Point>;
|
|
38
|
+
/**
|
|
39
|
+
* Collect all canvas objects that should be considered as alignment targets
|
|
40
|
+
* for a given moving/scaling object. Excludes the target itself and its children
|
|
41
|
+
* (for groups/active selections). Flattens groups into leaf objects.
|
|
42
|
+
*/
|
|
43
|
+
export declare function getAlignmentTargets(target: FabricObject): Set<FabricObject>;
|
|
44
|
+
//# sourceMappingURL=objectAlignmentUtils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"objectAlignmentUtils.d.ts","sourceRoot":"","sources":["../../src/alignment/objectAlignmentUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,aAAa,EACnB,MAAM,QAAQ,CAAC;AAEhB,+EAA+E;AAC/E,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,MAAM,cAAc,GAAG,mBAAmB,CAAC,aAAa,CAAC,GAAG;IAChE,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AAE7D;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,YAAY,GAChB,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAU9B;AAED,uDAAuD;AACvD,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,EAAE,EACb,IAAI,EAAE,GAAG,GAAG,GAAG,GACd;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,EAAE,CAAA;CAAE,CAcxC;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,YAAY,GACnB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAYvB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,YAAY,GACnB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAYvB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,YAAY,GAAG,GAAG,CAAC,YAAY,CAAC,CA0B3E"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Canvas } from 'fabric';
|
|
2
|
+
export interface RotationSnapOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Snap angle to multiples of this interval (degrees) when Shift is held.
|
|
5
|
+
* Default: 15.
|
|
6
|
+
*/
|
|
7
|
+
interval?: number;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Enable rotation snapping on a Fabric canvas.
|
|
11
|
+
* When Shift is held while rotating an object via its rotation handle,
|
|
12
|
+
* the angle snaps to the nearest multiple of `interval` degrees (default: 15°).
|
|
13
|
+
* Returns a cleanup function.
|
|
14
|
+
*/
|
|
15
|
+
export declare function enableRotationSnap(canvas: Canvas, options?: RotationSnapOptions): () => void;
|
|
16
|
+
//# sourceMappingURL=rotationSnap.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rotationSnap.d.ts","sourceRoot":"","sources":["../../src/alignment/rotationSnap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIrC,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAMD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,IAAI,CAUZ"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type FabricObject, Point } from 'fabric';
|
|
2
|
+
/**
|
|
3
|
+
* Extracts alignment-relevant snap points from a FabricObject.
|
|
4
|
+
* All returned points must be in scene (world) coordinates.
|
|
5
|
+
*/
|
|
6
|
+
export type SnapPointExtractor = (object: FabricObject) => Point[];
|
|
7
|
+
/**
|
|
8
|
+
* Register a snap point extractor for a shape type.
|
|
9
|
+
* Matchers are checked in LIFO order (last registered wins),
|
|
10
|
+
* allowing consumers to override built-in extractors.
|
|
11
|
+
*/
|
|
12
|
+
export declare function registerSnapPointExtractor(matcher: (object: FabricObject) => boolean, extractor: SnapPointExtractor): void;
|
|
13
|
+
/**
|
|
14
|
+
* Get snap target points for a FabricObject by finding the first matching
|
|
15
|
+
* registered extractor. Falls back to bounding box corners + center.
|
|
16
|
+
*/
|
|
17
|
+
export declare function getSnapPoints(object: FabricObject): Point[];
|
|
18
|
+
//# sourceMappingURL=snapPoints.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"snapPoints.d.ts","sourceRoot":"","sources":["../../src/alignment/snapPoints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,EAAuB,MAAM,QAAQ,CAAC;AAGvE;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,KAAK,EAAE,CAAC;AASnE;;;;GAIG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,EAC1C,SAAS,EAAE,kBAAkB,GAC5B,IAAI,CAEN;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,KAAK,EAAE,CAO3D"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { Canvas as FabricCanvas, FabricImage } from 'fabric';
|
|
2
|
+
export interface FitViewportOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Fraction of the canvas to leave as empty margin around the image.
|
|
5
|
+
* Default: 0.05 (5% on each side).
|
|
6
|
+
*/
|
|
7
|
+
padding?: number;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Adjust the canvas viewport transform so the background image fills the
|
|
11
|
+
* canvas with an optional padding margin.
|
|
12
|
+
*
|
|
13
|
+
* Does nothing if no background image is set.
|
|
14
|
+
*/
|
|
15
|
+
export declare function fitViewportToBackground(canvas: FabricCanvas, options?: FitViewportOptions): void;
|
|
16
|
+
/**
|
|
17
|
+
* Set the opacity of the canvas background image.
|
|
18
|
+
* Value is clamped to the 0–1 range.
|
|
19
|
+
*/
|
|
20
|
+
export declare function setBackgroundOpacity(canvas: FabricCanvas, opacity: number): void;
|
|
21
|
+
/**
|
|
22
|
+
* Get the current opacity of the canvas background image.
|
|
23
|
+
* Returns 1 if no background image is set.
|
|
24
|
+
*/
|
|
25
|
+
export declare function getBackgroundOpacity(canvas: FabricCanvas): number;
|
|
26
|
+
/**
|
|
27
|
+
* Add or remove the Invert filter from the canvas background image.
|
|
28
|
+
*/
|
|
29
|
+
export declare function setBackgroundInverted(canvas: FabricCanvas, inverted: boolean): void;
|
|
30
|
+
/**
|
|
31
|
+
* Returns whether the canvas background image currently has an Invert filter.
|
|
32
|
+
*/
|
|
33
|
+
export declare function getBackgroundInverted(canvas: FabricCanvas): boolean;
|
|
34
|
+
export interface ResizeResult {
|
|
35
|
+
/** The (possibly new) image URL. Same as input URL if no resize was needed. */
|
|
36
|
+
url: string;
|
|
37
|
+
/** Final image width in pixels. */
|
|
38
|
+
width: number;
|
|
39
|
+
/** Final image height in pixels. */
|
|
40
|
+
height: number;
|
|
41
|
+
/** Whether the image was actually downscaled. */
|
|
42
|
+
wasResized: boolean;
|
|
43
|
+
}
|
|
44
|
+
export interface ResizeImageOptions {
|
|
45
|
+
/**
|
|
46
|
+
* Maximum dimension (width or height) in pixels.
|
|
47
|
+
* Images larger than this are downscaled while maintaining aspect ratio.
|
|
48
|
+
* Default: 4096.
|
|
49
|
+
*/
|
|
50
|
+
maxSize?: number;
|
|
51
|
+
/**
|
|
52
|
+
* Minimum dimension (width or height) in pixels.
|
|
53
|
+
* Images smaller than this are rejected with an error.
|
|
54
|
+
* Default: 480.
|
|
55
|
+
*/
|
|
56
|
+
minSize?: number;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Load an image from a URL and downscale it if either dimension exceeds
|
|
60
|
+
* `maxSize`. The resulting image is returned as a new blob URL (PNG).
|
|
61
|
+
*
|
|
62
|
+
* Rejects if the image fails to load, or if both dimensions are smaller
|
|
63
|
+
* than `minSize`.
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```ts
|
|
67
|
+
* const result = await resizeImageUrl(uploadedUrl, { maxSize: 4096 });
|
|
68
|
+
* await canvas.setBackgroundImage(new FabricImage(result.url), canvas.renderAll.bind(canvas));
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
71
|
+
export declare function resizeImageUrl(url: string, options?: ResizeImageOptions): Promise<ResizeResult>;
|
|
72
|
+
/**
|
|
73
|
+
* Set an image URL as the canvas background image.
|
|
74
|
+
* Pass `resize` options to downscale oversized images before loading;
|
|
75
|
+
* omit to load the URL as-is.
|
|
76
|
+
* Returns the created FabricImage for further manipulation.
|
|
77
|
+
*/
|
|
78
|
+
export declare function setBackgroundImage(canvas: FabricCanvas, url: string, resize?: ResizeImageOptions): Promise<FabricImage>;
|
|
79
|
+
//# sourceMappingURL=background.d.ts.map
|
|
@@ -0,0 +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;AAatE,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;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,MAAM,GACd,IAAI,CAKN;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAGjE;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;;;;;GAKG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,kBAAkB,GAC1B,OAAO,CAAC,WAAW,CAAC,CAUtB"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/** Minimum zoom level. */
|
|
2
|
+
export declare const DEFAULT_MIN_ZOOM = 0.2;
|
|
3
|
+
/** Maximum zoom level. */
|
|
4
|
+
export declare const DEFAULT_MAX_ZOOM = 10;
|
|
5
|
+
/** Zoom sensitivity multiplier (applied per wheel tick). */
|
|
6
|
+
export declare const DEFAULT_ZOOM_FACTOR = 1.03;
|
|
7
|
+
/** Default step for programmatic zoomIn/zoomOut. */
|
|
8
|
+
export declare const DEFAULT_ZOOM_STEP = 0.2;
|
|
9
|
+
/** Default viewport padding fraction (5% on each side). */
|
|
10
|
+
export declare const DEFAULT_VIEWPORT_PADDING = 0.05;
|
|
11
|
+
/** Reference canvas dimension for scaling snap margins proportionally. */
|
|
12
|
+
export declare const BASE_CANVAS_SIZE = 1000;
|
|
13
|
+
/** Default snap margin in screen-pixel-equivalent units (shared by all snap systems). */
|
|
14
|
+
export declare const DEFAULT_SNAP_MARGIN = 6;
|
|
15
|
+
/** Default angle snap interval in degrees. */
|
|
16
|
+
export declare const DEFAULT_ANGLE_SNAP_INTERVAL = 15;
|
|
17
|
+
/**
|
|
18
|
+
* Minimum drag distance (in scene units) before a drag is treated as intentional.
|
|
19
|
+
* Prevents accidental micro-drags from creating objects.
|
|
20
|
+
*/
|
|
21
|
+
export declare const MIN_DRAG_SIZE = 3;
|
|
22
|
+
/**
|
|
23
|
+
* Distance (in scene units) from the first vertex at which a click closes the polygon.
|
|
24
|
+
*/
|
|
25
|
+
export declare const POLYGON_CLOSE_THRESHOLD = 10;
|
|
26
|
+
/** Default max image dimension before downscale. */
|
|
27
|
+
export declare const DEFAULT_IMAGE_MAX_SIZE = 4096;
|
|
28
|
+
/** Default min image dimension (images smaller on both axes are rejected). */
|
|
29
|
+
export declare const DEFAULT_IMAGE_MIN_SIZE = 480;
|
|
30
|
+
export declare const DEFAULT_VERTEX_HANDLE_RADIUS = 6;
|
|
31
|
+
export declare const DEFAULT_VERTEX_HANDLE_FILL = "#ffffff";
|
|
32
|
+
export declare const DEFAULT_VERTEX_HANDLE_STROKE = "#2196f3";
|
|
33
|
+
export declare const DEFAULT_VERTEX_HANDLE_STROKE_WIDTH = 2;
|
|
34
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +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,oDAAoD;AACpD,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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import 'fabric';
|
|
2
|
+
export type ShapeType = 'circle';
|
|
3
|
+
declare module 'fabric' {
|
|
4
|
+
interface FabricObject {
|
|
5
|
+
shapeType?: ShapeType;
|
|
6
|
+
data?: {
|
|
7
|
+
type: 'PLACE' | 'DEVICE' | 'DESK' | 'PARKING_SPACE' | 'FACILITY';
|
|
8
|
+
id: string;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
interface Canvas {
|
|
12
|
+
lockLightMode?: boolean;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=fabricAugmentation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fabricAugmentation.d.ts","sourceRoot":"","sources":["../src/fabricAugmentation.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAC;AAEhB,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,YAAY;QACpB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE;YACL,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,eAAe,GAAG,UAAU,CAAC;YACjE,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;KACH;IACD,UAAU,MAAM;QACd,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB;CACF"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { useEditCanvas } from './useEditCanvas';
|
|
2
|
+
export type { UseEditCanvasOptions } from './useEditCanvas';
|
|
3
|
+
export { useViewCanvas } from './useViewCanvas';
|
|
4
|
+
export type { UseViewCanvasOptions, ViewObjectStyle } from './useViewCanvas';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
import { Canvas as FabricCanvas } from 'fabric';
|
|
3
|
+
import { type ViewportController } from '../viewport';
|
|
4
|
+
/** Sync React zoom state with the canvas zoom level. */
|
|
5
|
+
export declare function syncZoom(canvasRef: RefObject<FabricCanvas | null>, setZoom: (z: number) => void): void;
|
|
6
|
+
/**
|
|
7
|
+
* Create resetViewport, zoomIn, and zoomOut actions shared between
|
|
8
|
+
* useEditCanvas and useViewCanvas.
|
|
9
|
+
*/
|
|
10
|
+
export declare function createViewportActions(canvasRef: RefObject<FabricCanvas | null>, viewportRef: RefObject<ViewportController | null>, setZoom: (z: number) => void): {
|
|
11
|
+
resetViewport: () => void;
|
|
12
|
+
zoomIn: (step?: number) => void;
|
|
13
|
+
zoomOut: (step?: number) => void;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Resolve whether alignment should be enabled based on the master toggle
|
|
17
|
+
* and the per-feature alignment prop.
|
|
18
|
+
*/
|
|
19
|
+
export declare function resolveAlignmentEnabled(enableAlignment: boolean | undefined, alignmentProp: boolean | object | undefined): boolean;
|
|
20
|
+
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -0,0 +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;AAChD,OAAO,EAEL,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;EAM/B;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,eAAe,EAAE,OAAO,GAAG,SAAS,EACpC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAC1C,OAAO,CAGT"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { Canvas as FabricCanvas, type FabricObject } from 'fabric';
|
|
2
|
+
import { type PanAndZoomOptions, type ViewportMode } from '../viewport';
|
|
3
|
+
import { type ObjectAlignmentOptions, type RotationSnapOptions } from '../alignment';
|
|
4
|
+
import { type VertexEditOptions } from '../interactions';
|
|
5
|
+
import { type ResizeImageOptions } from '../background';
|
|
6
|
+
import type { ModeSetup } from '../types';
|
|
7
|
+
export interface UseEditCanvasOptions {
|
|
8
|
+
/** Configure pan and zoom. Pass `false` to disable, or options to customize. Default: enabled. */
|
|
9
|
+
panAndZoom?: boolean | PanAndZoomOptions;
|
|
10
|
+
/** Enable alignment guidelines for object movement/scaling. Pass `false` to disable, or options to customize. Default: enabled. */
|
|
11
|
+
alignment?: boolean | ObjectAlignmentOptions;
|
|
12
|
+
/**
|
|
13
|
+
* Snap rotation to angle intervals when Shift is held. Pass `false` to
|
|
14
|
+
* disable, or `{ interval }` to change the snap interval. Default: enabled at 15° intervals.
|
|
15
|
+
*/
|
|
16
|
+
rotationSnap?: boolean | RotationSnapOptions;
|
|
17
|
+
/**
|
|
18
|
+
* Master toggle for all alignment and snapping functionality.
|
|
19
|
+
* - `undefined`: each feature uses its own prop (default).
|
|
20
|
+
* - `true`: all alignment/snapping is force-enabled.
|
|
21
|
+
* - `false`: all alignment/snapping is force-disabled.
|
|
22
|
+
*/
|
|
23
|
+
enableAlignment?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Enable double-click-to-vertex-edit on polygons.
|
|
26
|
+
* Pass `false` to disable, or a `VertexEditOptions` object to customize handle appearance.
|
|
27
|
+
* Default: enabled.
|
|
28
|
+
*/
|
|
29
|
+
vertexEdit?: boolean | VertexEditOptions;
|
|
30
|
+
/**
|
|
31
|
+
* Keep stroke widths visually constant as the user zooms in/out.
|
|
32
|
+
* Pass `false` to disable. Default: enabled.
|
|
33
|
+
*/
|
|
34
|
+
scaledStrokes?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Enable keyboard shortcuts (Delete/Backspace to delete selected objects).
|
|
37
|
+
* Pass `false` to disable. Default: enabled.
|
|
38
|
+
*/
|
|
39
|
+
keyboardShortcuts?: boolean;
|
|
40
|
+
/** Called after the canvas is initialized and viewport is set up. */
|
|
41
|
+
onReady?: (canvas: FabricCanvas) => void | Promise<void>;
|
|
42
|
+
/**
|
|
43
|
+
* Automatically fit the viewport to the background image after `onReady`
|
|
44
|
+
* completes, if a background image is present. Also applies when
|
|
45
|
+
* `viewport.reset` is called while a background image is set.
|
|
46
|
+
* Pass `false` to disable. Default: enabled.
|
|
47
|
+
*/
|
|
48
|
+
autoFitToBackground?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Automatically resize background images when set via `setBackground`.
|
|
51
|
+
* Images exceeding `maxSize` are downscaled to fit; images smaller than
|
|
52
|
+
* `minSize` on both dimensions are rejected with an error.
|
|
53
|
+
* Pass `false` to disable. Default: enabled (maxSize: 4096, minSize: 480).
|
|
54
|
+
*/
|
|
55
|
+
backgroundResize?: boolean | ResizeImageOptions;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Hook that provides a batteries-included canvas experience with full
|
|
59
|
+
* editing capabilities (create, edit, delete, select, pan, zoom).
|
|
60
|
+
*
|
|
61
|
+
* Handles canvas ref management, viewport setup (pan/zoom), reactive state
|
|
62
|
+
* (zoom level, selected objects), and interaction mode lifecycle.
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* ```tsx
|
|
66
|
+
* const canvas = useEditCanvas();
|
|
67
|
+
*
|
|
68
|
+
* // Activate a creation mode:
|
|
69
|
+
* canvas.setMode((c, viewport) =>
|
|
70
|
+
* enableClickToCreate(c, factory, { viewport, onCreated: () => canvas.setMode(null) })
|
|
71
|
+
* );
|
|
72
|
+
*
|
|
73
|
+
* // Return to select mode:
|
|
74
|
+
* canvas.setMode(null);
|
|
75
|
+
*
|
|
76
|
+
* return <Canvas onReady={canvas.onReady} width={800} height={600} />;
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
export declare function useEditCanvas(options?: UseEditCanvasOptions): {
|
|
80
|
+
/** Pass this to `<Canvas onReady={...} />` */
|
|
81
|
+
onReady: (canvas: FabricCanvas) => void;
|
|
82
|
+
/** Ref to the underlying Fabric canvas instance. */
|
|
83
|
+
canvasRef: import("react").RefObject<FabricCanvas | null>;
|
|
84
|
+
/** Current zoom level (reactive). */
|
|
85
|
+
zoom: number;
|
|
86
|
+
/** Currently selected objects (reactive). */
|
|
87
|
+
selected: FabricObject<Partial<import("fabric").FabricObjectProps>, import("fabric").SerializedObjectProps, import("fabric").ObjectEvents>[];
|
|
88
|
+
/** Viewport controls. */
|
|
89
|
+
viewport: {
|
|
90
|
+
/** Current viewport mode (reactive). */
|
|
91
|
+
mode: ViewportMode;
|
|
92
|
+
/** Switch between 'select' and 'pan' viewport modes. */
|
|
93
|
+
setMode: (mode: ViewportMode) => void;
|
|
94
|
+
/** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
|
|
95
|
+
reset: () => void;
|
|
96
|
+
/** Zoom in toward the canvas center. Default step: 0.2. */
|
|
97
|
+
zoomIn: (step?: number) => void;
|
|
98
|
+
/** Zoom out from the canvas center. Default step: 0.2. */
|
|
99
|
+
zoomOut: (step?: number) => void;
|
|
100
|
+
};
|
|
101
|
+
/** Whether vertex edit mode is currently active (reactive). */
|
|
102
|
+
isEditingVertices: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Activate an interaction mode or return to select mode.
|
|
105
|
+
*
|
|
106
|
+
* Pass a setup function to activate a creation mode:
|
|
107
|
+
* ```ts
|
|
108
|
+
* canvas.setMode((c, viewport) =>
|
|
109
|
+
* enableClickToCreate(c, factory, { viewport })
|
|
110
|
+
* );
|
|
111
|
+
* ```
|
|
112
|
+
*
|
|
113
|
+
* Pass `null` to deactivate and return to select mode:
|
|
114
|
+
* ```ts
|
|
115
|
+
* canvas.setMode(null);
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
setMode: (setup: ModeSetup | null) => void;
|
|
119
|
+
/**
|
|
120
|
+
* Set a background image from a URL. Automatically resizes if the image
|
|
121
|
+
* exceeds the configured limits (opt out via `backgroundResize: false`),
|
|
122
|
+
* and fits the viewport after setting if `autoFitToBackground` is enabled.
|
|
123
|
+
*/
|
|
124
|
+
setBackground: (url: string) => Promise<import("fabric").FabricImage<Partial<import("fabric").ImageProps>, import("fabric").SerializedImageProps, import("fabric").ObjectEvents>>;
|
|
125
|
+
};
|
|
126
|
+
//# sourceMappingURL=useEditCanvas.d.ts.map
|
|
@@ -0,0 +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,EACxB,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;CACjD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IA0NxD,8CAA8C;sBAlKrC,YAAY;IAoKrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,6CAA6C;;IAE7C,yBAAyB;;QAEvB,wCAAwC;;QAExC,wDAAwD;wBA9CjB,YAAY;QAgDnD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;;IAG5D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBAvO+B,SAAS,GAAG,IAAI;IAyOlD;;;;OAIG;yBAlEyC,MAAM;EAqErD"}
|