@yorab/react-paint 0.15.1 → 0.16.1
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/constants/shapes.d.ts +2 -0
- package/dist/canvas/hooks/useReactPaint.d.ts +136 -72
- package/dist/canvas/hooks/useShapes.d.ts +102 -54
- package/dist/canvas/utils/file.d.ts +17 -9
- package/dist/canvas/utils/intersect.d.ts +1 -1
- package/dist/canvas/utils/selection/groupSelection.d.ts +3 -2
- package/dist/canvas/utils/selection/rectSelection.d.ts +3 -1
- package/dist/canvas/utils/shapes/brush.d.ts +6 -2
- package/dist/canvas/utils/shapes/circle.d.ts +5 -2
- package/dist/canvas/utils/shapes/curve.d.ts +0 -1
- package/dist/canvas/utils/shapes/ellipse.d.ts +5 -2
- package/dist/canvas/utils/shapes/group.d.ts +33 -0
- package/dist/canvas/utils/shapes/index.d.ts +6 -12
- package/dist/canvas/utils/shapes/line.d.ts +5 -2
- package/dist/canvas/utils/shapes/path.d.ts +2 -2
- package/dist/canvas/utils/shapes/picture.d.ts +5 -2
- package/dist/canvas/utils/shapes/polygon.d.ts +0 -1
- package/dist/canvas/utils/shapes/rectangle.d.ts +7 -44
- package/dist/canvas/utils/shapes/text.d.ts +5 -2
- package/dist/common/types/Shapes.d.ts +7 -9
- package/dist/common/utils/object.d.ts +1 -1
- package/dist/react-paint.js +1302 -1305
- package/dist/react-paint.umd.cjs +1 -1
- package/package.json +13 -13
|
@@ -21,6 +21,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
21
21
|
center: Point;
|
|
22
22
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
23
23
|
};
|
|
24
|
+
path?: Path2D | undefined;
|
|
24
25
|
} & {
|
|
25
26
|
rotation?: number;
|
|
26
27
|
toolId?: string;
|
|
@@ -31,7 +32,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
31
32
|
type: "line";
|
|
32
33
|
} & {
|
|
33
34
|
selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
|
|
34
|
-
path?: Path2D | undefined;
|
|
35
35
|
arrows?: import("./../../common/types/Shapes").TriangleEntity[];
|
|
36
36
|
type: "line";
|
|
37
37
|
}) | ({
|
|
@@ -42,6 +42,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
42
42
|
center: Point;
|
|
43
43
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
44
44
|
};
|
|
45
|
+
path?: Path2D | undefined;
|
|
45
46
|
} & {
|
|
46
47
|
rotation?: number;
|
|
47
48
|
toolId?: string;
|
|
@@ -52,6 +53,9 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
52
53
|
src: string;
|
|
53
54
|
} & {
|
|
54
55
|
img: HTMLImageElement;
|
|
56
|
+
flipX?: boolean;
|
|
57
|
+
flipY?: boolean;
|
|
58
|
+
ratio?: number;
|
|
55
59
|
type: "picture";
|
|
56
60
|
} & {
|
|
57
61
|
img: HTMLImageElement;
|
|
@@ -65,6 +69,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
65
69
|
center: Point;
|
|
66
70
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
67
71
|
};
|
|
72
|
+
path?: Path2D | undefined;
|
|
68
73
|
} & {
|
|
69
74
|
rotation?: number;
|
|
70
75
|
toolId?: string;
|
|
@@ -75,6 +80,9 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
75
80
|
value: string[];
|
|
76
81
|
fontSize: number;
|
|
77
82
|
} & {
|
|
83
|
+
flipX?: boolean;
|
|
84
|
+
flipY?: boolean;
|
|
85
|
+
ratio?: number;
|
|
78
86
|
type: "text";
|
|
79
87
|
} & {
|
|
80
88
|
selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
@@ -87,6 +95,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
87
95
|
center: Point;
|
|
88
96
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
89
97
|
};
|
|
98
|
+
path?: Path2D | undefined;
|
|
90
99
|
} & {
|
|
91
100
|
rotation?: number;
|
|
92
101
|
toolId?: string;
|
|
@@ -97,7 +106,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
97
106
|
type: "rect";
|
|
98
107
|
} & {
|
|
99
108
|
selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
100
|
-
path?: Path2D | undefined;
|
|
101
109
|
type: "rect";
|
|
102
110
|
}) | ({
|
|
103
111
|
id: string;
|
|
@@ -107,6 +115,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
107
115
|
center: Point;
|
|
108
116
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
109
117
|
};
|
|
118
|
+
path?: Path2D | undefined;
|
|
110
119
|
} & {
|
|
111
120
|
rotation?: number;
|
|
112
121
|
toolId?: string;
|
|
@@ -117,7 +126,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
117
126
|
type: "square";
|
|
118
127
|
} & {
|
|
119
128
|
selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
120
|
-
path?: Path2D | undefined;
|
|
121
129
|
type: "square";
|
|
122
130
|
}) | ({
|
|
123
131
|
id: string;
|
|
@@ -127,6 +135,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
127
135
|
center: Point;
|
|
128
136
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
129
137
|
};
|
|
138
|
+
path?: Path2D | undefined;
|
|
130
139
|
} & {
|
|
131
140
|
rotation?: number;
|
|
132
141
|
toolId?: string;
|
|
@@ -137,7 +146,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
137
146
|
type: "circle";
|
|
138
147
|
} & {
|
|
139
148
|
selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
140
|
-
path?: Path2D | undefined;
|
|
141
149
|
type: "circle";
|
|
142
150
|
}) | ({
|
|
143
151
|
id: string;
|
|
@@ -147,6 +155,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
147
155
|
center: Point;
|
|
148
156
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
149
157
|
};
|
|
158
|
+
path?: Path2D | undefined;
|
|
150
159
|
} & {
|
|
151
160
|
rotation?: number;
|
|
152
161
|
toolId?: string;
|
|
@@ -157,7 +166,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
157
166
|
type: "ellipse";
|
|
158
167
|
} & {
|
|
159
168
|
selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
160
|
-
path?: Path2D | undefined;
|
|
161
169
|
type: "ellipse";
|
|
162
170
|
}) | ({
|
|
163
171
|
id: string;
|
|
@@ -167,6 +175,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
167
175
|
center: Point;
|
|
168
176
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
169
177
|
};
|
|
178
|
+
path?: Path2D | undefined;
|
|
170
179
|
} & {
|
|
171
180
|
rotation?: number;
|
|
172
181
|
toolId?: string;
|
|
@@ -177,7 +186,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
177
186
|
type: "polygon";
|
|
178
187
|
} & {
|
|
179
188
|
selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
|
|
180
|
-
path?: Path2D | undefined;
|
|
181
189
|
type: "polygon";
|
|
182
190
|
}) | ({
|
|
183
191
|
id: string;
|
|
@@ -187,6 +195,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
187
195
|
center: Point;
|
|
188
196
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
189
197
|
};
|
|
198
|
+
path?: Path2D | undefined;
|
|
190
199
|
} & {
|
|
191
200
|
rotation?: number;
|
|
192
201
|
toolId?: string;
|
|
@@ -197,7 +206,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
197
206
|
type: "curve";
|
|
198
207
|
} & {
|
|
199
208
|
selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
|
|
200
|
-
path?: Path2D | undefined;
|
|
201
209
|
type: "curve";
|
|
202
210
|
}) | ({
|
|
203
211
|
id: string;
|
|
@@ -207,6 +215,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
207
215
|
center: Point;
|
|
208
216
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
209
217
|
};
|
|
218
|
+
path?: Path2D | undefined;
|
|
210
219
|
} & {
|
|
211
220
|
rotation?: number;
|
|
212
221
|
toolId?: string;
|
|
@@ -219,7 +228,6 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
219
228
|
scaleY?: number;
|
|
220
229
|
} & {
|
|
221
230
|
selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
222
|
-
path?: Path2D | undefined;
|
|
223
231
|
type: "brush";
|
|
224
232
|
}) | ({
|
|
225
233
|
id: string;
|
|
@@ -229,6 +237,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
229
237
|
center: Point;
|
|
230
238
|
boundingBox: import("./../../common/types/Shapes").Rect;
|
|
231
239
|
};
|
|
240
|
+
path?: Path2D | undefined;
|
|
232
241
|
} & {
|
|
233
242
|
rotation?: number;
|
|
234
243
|
toolId?: string;
|
|
@@ -240,6 +249,5 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
|
|
|
240
249
|
type: "group";
|
|
241
250
|
} & {
|
|
242
251
|
selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
243
|
-
path?: Path2D | undefined;
|
|
244
252
|
type: "group";
|
|
245
253
|
}))[]>;
|
|
@@ -20,4 +20,4 @@ export declare const checkCurveLinesSelectionIntersection: (ctx: CanvasRendering
|
|
|
20
20
|
};
|
|
21
21
|
export declare const checkPositionIntersection: (ctx: CanvasRenderingContext2D, shape: SelectionType, position: Point, settings: UtilsSettings) => false | HoverModeData;
|
|
22
22
|
export declare function getRectIntersection(rect1: Rect, rect2: Rect): Rect | undefined;
|
|
23
|
-
export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, selectionFrame: [Point, Point]
|
|
23
|
+
export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, selectionFrame: [Point, Point]) => boolean;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
|
-
import type {
|
|
3
|
-
|
|
2
|
+
import type { SelectionModeData } from './../../../common/types/Mode';
|
|
3
|
+
import type { Point, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
|
+
export declare const drawSelectionGroup: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"group">, selectionColor: string, selectionWidth: number, selectionMode: SelectionModeData<number | Point>, settings: UtilsSettings, withAnchors: boolean) => void;
|
|
@@ -5,7 +5,7 @@ export declare const createRecSelectionPath: (path: Path2D | undefined, computed
|
|
|
5
5
|
borders: Rect;
|
|
6
6
|
outerBorders: Rect;
|
|
7
7
|
center: Point;
|
|
8
|
-
}, settings: UtilsSettings
|
|
8
|
+
}, settings: UtilsSettings) => SelectionDefaultType;
|
|
9
9
|
export declare const drawBoundingBox: (ctx: CanvasRenderingContext2D, shape: SelectionType, selectionWidth: number, settings: UtilsSettings) => void;
|
|
10
10
|
export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: ShapeEntity & {
|
|
11
11
|
selection?: SelectionDefaultType | undefined;
|
|
@@ -15,4 +15,6 @@ export declare const resizeRectSelection: (cursorPosition: Point, originalShape:
|
|
|
15
15
|
borderHeight: number;
|
|
16
16
|
borderY: number;
|
|
17
17
|
borderWidth: number;
|
|
18
|
+
isXinverted: boolean;
|
|
19
|
+
isYinverted: boolean;
|
|
18
20
|
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
2
|
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
-
import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
|
|
3
|
+
import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
4
|
import type { ToolsSettingsType } from './../../../common/types/tools';
|
|
5
|
+
import { type GroupResizeContext } from './group';
|
|
6
|
+
export declare const getBrushBorder: (brush: DrawableShape<"brush">, { selectionPadding }: Pick<UtilsSettings, "selectionPadding">) => Rect;
|
|
5
7
|
export declare const getComputedBrush: (brush: DrawableShape<"brush">, settings: UtilsSettings) => {
|
|
6
8
|
borders: Rect;
|
|
7
9
|
outerBorders: Rect;
|
|
@@ -17,7 +19,9 @@ export declare const createBrush: (shape: {
|
|
|
17
19
|
settings: ToolsSettingsType<"brush">;
|
|
18
20
|
}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"brush">;
|
|
19
21
|
export declare const drawBrush: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"brush">) => void;
|
|
20
|
-
export declare const translateBrush: (cursorPosition: Point, originalShape: ShapeEntity<"brush">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"brush">;
|
|
21
22
|
export declare const resizeBrush: (cursorPosition: Point, originalShape: ShapeEntity<"brush">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean, resizeFromCenter: boolean) => ShapeEntity<"brush">;
|
|
23
|
+
export declare const resizeBrushInGroup: (shape: ShapeEntity<"brush">, group: SelectionType & {
|
|
24
|
+
type: "group";
|
|
25
|
+
}, groupCtx: GroupResizeContext) => ShapeEntity<"brush">;
|
|
22
26
|
export declare const addNewPointToShape: (shape: ShapeEntity<"brush">, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"brush">;
|
|
23
27
|
export declare const addNewPointGroupToShape: (shape: ShapeEntity<"brush">, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"brush">;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
2
|
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
-
import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
|
|
3
|
+
import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
4
|
import type { ToolsSettingsType } from './../../../common/types/tools';
|
|
5
|
+
import { type GroupResizeContext } from './group';
|
|
5
6
|
export declare const getComputedCircle: (circle: DrawableShape<"circle">, settings: UtilsSettings) => {
|
|
6
7
|
borders: Rect;
|
|
7
8
|
outerBorders: Rect;
|
|
@@ -17,5 +18,7 @@ export declare const createCircle: (shape: {
|
|
|
17
18
|
settings: ToolsSettingsType<"circle">;
|
|
18
19
|
}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"circle">;
|
|
19
20
|
export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: ShapeEntity<"circle">) => void;
|
|
20
|
-
export declare const translateCircle: (cursorPosition: Point, originalShape: ShapeEntity<"circle">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"circle">;
|
|
21
21
|
export declare const resizeCircle: (cursorPosition: Point, originalShape: ShapeEntity<"circle">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"circle">;
|
|
22
|
+
export declare const resizeCircleInGroup: (shape: ShapeEntity<"circle">, group: SelectionType & {
|
|
23
|
+
type: "group";
|
|
24
|
+
}, groupCtx: GroupResizeContext) => ShapeEntity<"circle">;
|
|
@@ -18,6 +18,5 @@ export declare const createCurve: (shape: {
|
|
|
18
18
|
}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"curve">;
|
|
19
19
|
export declare const resizeCurve: (cursorPosition: Point, originalShape: ShapeEntity<"curve">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => ShapeEntity<"curve">;
|
|
20
20
|
export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: ShapeEntity<"curve">) => void;
|
|
21
|
-
export declare const translateCurve: (cursorPosition: Point, originalShape: ShapeEntity<"curve">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"curve">;
|
|
22
21
|
export declare const addCurveLine: (shape: ShapeEntity<"curve">, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"curve">;
|
|
23
22
|
export declare const addCurvePoint: (shape: ShapeEntity<"curve">, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => ShapeEntity<"curve">;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
2
|
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
-
import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
|
|
3
|
+
import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
4
|
import type { ToolsSettingsType } from './../../../common/types/tools';
|
|
5
|
+
import { type GroupResizeContext } from './group';
|
|
5
6
|
export declare const getComputedEllipse: (ellipse: DrawableShape<"ellipse">, settings: UtilsSettings) => {
|
|
6
7
|
borders: Rect;
|
|
7
8
|
outerBorders: Rect;
|
|
@@ -17,5 +18,7 @@ export declare const createEllipse: (shape: {
|
|
|
17
18
|
settings: ToolsSettingsType<"ellipse">;
|
|
18
19
|
}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"ellipse">;
|
|
19
20
|
export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: ShapeEntity<"ellipse">) => void;
|
|
20
|
-
export declare const translateEllipse: (cursorPosition: Point, originalShape: ShapeEntity<"ellipse">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"ellipse">;
|
|
21
21
|
export declare const resizeEllipse: (cursorPosition: Point, originalShape: ShapeEntity<"ellipse">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => ShapeEntity<"ellipse">;
|
|
22
|
+
export declare const resizeEllipseInGroup: (shape: ShapeEntity<"ellipse">, group: SelectionType & {
|
|
23
|
+
type: "group";
|
|
24
|
+
}, groupCtx: GroupResizeContext) => ShapeEntity<"ellipse">;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
|
+
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
+
import type { Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
|
+
/** Shared context when resizing shapes inside a group */
|
|
5
|
+
export type GroupResizeContext = {
|
|
6
|
+
newBorderX: number;
|
|
7
|
+
newBorderY: number;
|
|
8
|
+
newBorderWidth: number;
|
|
9
|
+
newBorderHeight: number;
|
|
10
|
+
widthMultiplier: number;
|
|
11
|
+
heightMultiplier: number;
|
|
12
|
+
isXinverted: boolean;
|
|
13
|
+
isYinverted: boolean;
|
|
14
|
+
groupCenter: Point;
|
|
15
|
+
rotation: number;
|
|
16
|
+
settings: UtilsSettings;
|
|
17
|
+
originalBorders: {
|
|
18
|
+
x: number;
|
|
19
|
+
y: number;
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export declare const getGroupResizeContext: (cursorPosition: Point, group: SelectionType & {
|
|
25
|
+
type: "group";
|
|
26
|
+
}, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean, isAltPressed: boolean) => GroupResizeContext;
|
|
27
|
+
export declare const getShapePositionInNewBorder: (shape: ShapeEntity, group: SelectionType & {
|
|
28
|
+
type: "group";
|
|
29
|
+
}, ctx: GroupResizeContext) => {
|
|
30
|
+
x: number;
|
|
31
|
+
y: number;
|
|
32
|
+
};
|
|
33
|
+
export declare const getPositionWithoutGroupRotation: (ctx: GroupResizeContext, positionInBorderX: number, positionInBorderY: number, sizeInBorderW: number, sizeInBorderH: number) => Point;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
|
-
import type { HoverModeData, SelectionModeData } from './../../../common/types/Mode';
|
|
2
|
+
import type { HoverModeData, SelectionModeData, SelectionModeResize } from './../../../common/types/Mode';
|
|
3
3
|
import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
4
|
import type { CustomTool } from './../../../common/types/tools';
|
|
5
5
|
export declare const createShape: (ctx: CanvasRenderingContext2D, shape: Exclude<CustomTool, {
|
|
@@ -7,16 +7,9 @@ export declare const createShape: (ctx: CanvasRenderingContext2D, shape: Exclude
|
|
|
7
7
|
}>, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity | undefined;
|
|
8
8
|
export declare const isInView: (shape: ShapeEntity, settings: UtilsSettings) => boolean;
|
|
9
9
|
export declare const drawShape: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, settings: UtilsSettings) => void;
|
|
10
|
-
export declare const rotateShape: <T extends
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
outerBorders: import("./../../../common/types/Shapes").Rect;
|
|
14
|
-
center: Point;
|
|
15
|
-
boundingBox: import("./../../../common/types/Shapes").Rect;
|
|
16
|
-
} | undefined;
|
|
17
|
-
};
|
|
18
|
-
export declare const resizeShape: <T extends ShapeEntity>(ctx: CanvasRenderingContext2D, shape: T, cursorPosition: Point, originalShape: T, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => T;
|
|
19
|
-
export declare const translateShape: (cursorPosition: Point, originalShape: ShapeEntity, originalCursorPosition: Point, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity;
|
|
10
|
+
export declare const rotateShape: <T extends ShapeEntity>(shape: T, rotationToApply: number, selectionCenter: Point) => T;
|
|
11
|
+
export declare const resizeShape: <T extends ShapeEntity>(ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: T, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => T;
|
|
12
|
+
export declare const resizeShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: SelectionType, selectionMode: SelectionModeResize<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => ShapeEntity[];
|
|
20
13
|
export declare const translateShapes: (cursorPosition: Point, originalShape: SelectionType, originalCursorPosition: Point, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity[];
|
|
21
14
|
export declare const refreshShape: (shape: DrawableShape & {
|
|
22
15
|
id: string;
|
|
@@ -27,13 +20,14 @@ export declare const getShapeComputedData: (shape: DrawableShape, settings: Util
|
|
|
27
20
|
center: Point;
|
|
28
21
|
boundingBox: import("./../../../common/types/Shapes").Rect;
|
|
29
22
|
} | undefined;
|
|
30
|
-
export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth, selectionColor, hoverMode, withAnchors }: {
|
|
23
|
+
export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth, selectionColor, hoverMode, selectionMode, withAnchors }: {
|
|
31
24
|
ctx: CanvasRenderingContext2D;
|
|
32
25
|
shape: SelectionType;
|
|
33
26
|
settings: UtilsSettings;
|
|
34
27
|
selectionWidth: number;
|
|
35
28
|
selectionColor: string;
|
|
36
29
|
hoverMode: HoverModeData;
|
|
30
|
+
selectionMode: SelectionModeData<number | Point>;
|
|
37
31
|
withAnchors?: boolean;
|
|
38
32
|
}) => void;
|
|
39
33
|
export declare const drawSelectionFrame: ({ ctx, selectionFrame, settings }: {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
2
|
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
-
import type { DrawableShape, Point, Rect, ShapeEntity, StyleShape, Triangle } from './../../../common/types/Shapes';
|
|
3
|
+
import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity, StyleShape, Triangle } from './../../../common/types/Shapes';
|
|
4
4
|
import type { ToolsSettingsType } from './../../../common/types/tools';
|
|
5
|
+
import { type GroupResizeContext } from './group';
|
|
5
6
|
export declare const getComputedLine: (line: DrawableShape<"line">, settings: UtilsSettings) => {
|
|
6
7
|
borders: Rect;
|
|
7
8
|
outerBorders: Rect;
|
|
@@ -18,5 +19,7 @@ export declare const createLine: (shape: {
|
|
|
18
19
|
}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"line">;
|
|
19
20
|
export declare const buildTriangleOnLine: (center: Point, rotation: number, lineStyle: StyleShape) => Triangle;
|
|
20
21
|
export declare const drawLine: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"line">) => void;
|
|
21
|
-
export declare const translateLine: (cursorPosition: Point, originalShape: ShapeEntity<"line">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"line">;
|
|
22
22
|
export declare const resizeLine: (cursorPosition: Point, originalShape: ShapeEntity<"line">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => ShapeEntity<"line">;
|
|
23
|
+
export declare const resizeLinePolygonCurveInGroup: (shape: ShapeEntity<"line" | "polygon" | "curve">, group: SelectionType & {
|
|
24
|
+
type: "group";
|
|
25
|
+
}, groupCtx: GroupResizeContext) => ShapeEntity<"line" | "polygon" | "curve">;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
|
-
import type { Circle, DrawableShape, Line, Point, Rect
|
|
2
|
+
import type { Circle, DrawableShape, Line, Point, Rect } from './../../../common/types/Shapes';
|
|
3
3
|
export declare const createRecPath: (rect: Rect) => Path2D;
|
|
4
4
|
export declare const createCirclePath: (shape: Circle) => Path2D;
|
|
5
5
|
export declare const createEllipsePath: (ellipse: DrawableShape<"ellipse">) => Path2D;
|
|
@@ -20,7 +20,7 @@ export declare const catmullRomToBezier: (p0: Point, p1: Point, p2: Point, p3: P
|
|
|
20
20
|
export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D | undefined;
|
|
21
21
|
export declare const createPolygonPath: (polygon: DrawableShape<"polygon"> | DrawableShape<"curve">) => Path2D | undefined;
|
|
22
22
|
export declare const createTrianglePath: (triangle: DrawableShape<"triangle">) => Path2D;
|
|
23
|
-
export declare const getComputedShapeInfos: <T extends DrawableShape, U extends Pick<UtilsSettings, "selectionPadding">>(shape: T, getBorder: (shape: T, settings: U) => Rect, settings: U, getOuterBorder?: (
|
|
23
|
+
export declare const getComputedShapeInfos: <T extends DrawableShape, U extends Pick<UtilsSettings, "selectionPadding">>(shape: T, getBorder: (shape: T, settings: U) => Rect, settings: U, getOuterBorder?: (shape: T, borders: Rect, settings: U) => Rect) => {
|
|
24
24
|
borders: Rect;
|
|
25
25
|
outerBorders: Rect;
|
|
26
26
|
center: Point;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
2
|
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
-
import type { DrawableShape, Point, ShapeEntity } from './../../../common/types/Shapes';
|
|
3
|
+
import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
|
+
import { type GroupResizeContext } from './group';
|
|
4
5
|
export declare const getComputedPicture: (picture: DrawableShape<"picture">, settings: UtilsSettings) => {
|
|
5
6
|
borders: import("./../../../common/types/Shapes").Rect;
|
|
6
7
|
outerBorders: import("./../../../common/types/Shapes").Rect;
|
|
@@ -12,5 +13,7 @@ export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape:
|
|
|
12
13
|
}, settings: UtilsSettings) => ShapeEntity<"picture">;
|
|
13
14
|
export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
|
|
14
15
|
export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: ShapeEntity<"picture">) => void;
|
|
15
|
-
export declare const translatePicture: (cursorPosition: Point, originalShape: ShapeEntity<"picture">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"picture">;
|
|
16
16
|
export declare const resizePicture: (cursorPosition: Point, originalShape: ShapeEntity<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"picture">;
|
|
17
|
+
export declare const resizePictureInGroup: (shape: ShapeEntity<"picture">, group: SelectionType & {
|
|
18
|
+
type: "group";
|
|
19
|
+
}, groupCtx: GroupResizeContext) => ShapeEntity<"picture">;
|
|
@@ -18,7 +18,6 @@ export declare const createPolygon: (shape: {
|
|
|
18
18
|
}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
|
|
19
19
|
export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: ShapeEntity<"polygon">) => void;
|
|
20
20
|
export declare const getPolygonBorder: (polygon: Polygon, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
|
|
21
|
-
export declare const translatePolygon: (cursorPosition: Point, originalShape: ShapeEntity<"polygon">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"polygon">;
|
|
22
21
|
export declare const resizePolygon: (cursorPosition: Point, originalShape: ShapeEntity<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => ShapeEntity<"polygon">;
|
|
23
22
|
export declare const addPolygonLine: (shape: ShapeEntity<"polygon">, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
|
|
24
23
|
export declare const addPolygonPoint: (shape: ShapeEntity<"polygon">, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => ShapeEntity<"polygon">;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
2
|
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
-
import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
|
|
3
|
+
import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
|
|
4
4
|
import type { ToolsSettingsType } from './../../../common/types/tools';
|
|
5
|
+
import { type GroupResizeContext } from './group';
|
|
5
6
|
type rectish = 'rect' | 'square';
|
|
6
7
|
export declare const getComputedRect: (rect: DrawableShape<rectish>, settings: UtilsSettings) => {
|
|
7
8
|
borders: Rect;
|
|
@@ -11,55 +12,17 @@ export declare const getComputedRect: (rect: DrawableShape<rectish>, settings: U
|
|
|
11
12
|
};
|
|
12
13
|
export declare const refreshRect: <T extends rectish>(rect: DrawableShape<T> & {
|
|
13
14
|
id: string;
|
|
14
|
-
}, settings: UtilsSettings
|
|
15
|
+
}, settings: UtilsSettings) => ShapeEntity<T>;
|
|
15
16
|
export declare const createRectangle: <T extends rectish>(shape: {
|
|
16
17
|
id: string;
|
|
17
18
|
type: T;
|
|
18
19
|
settings: ToolsSettingsType<T>;
|
|
19
|
-
}, cursorPosition: Point, settings: UtilsSettings,
|
|
20
|
+
}, cursorPosition: Point, settings: UtilsSettings, width?: number, height?: number) => ShapeEntity<T>;
|
|
20
21
|
export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<rectish>) => void;
|
|
21
22
|
export declare const getRectBorder: (rect: Rect, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
|
|
22
23
|
export declare const getRectOppositeAnchorAbsolutePosition: <T extends DrawableShape & Rect>(anchor: Point, center: Point, shape: T, [negW, negH]?: [boolean, boolean]) => Point;
|
|
23
|
-
export declare const translateRect: <T extends rectish>(cursorPosition: Point, originalShape: ShapeEntity<T>, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ({
|
|
24
|
-
id: string;
|
|
25
|
-
computed: {
|
|
26
|
-
borders: Rect;
|
|
27
|
-
outerBorders: Rect;
|
|
28
|
-
center: Point;
|
|
29
|
-
boundingBox: Rect;
|
|
30
|
-
};
|
|
31
|
-
} & {
|
|
32
|
-
rotation?: number;
|
|
33
|
-
toolId?: string;
|
|
34
|
-
visible?: boolean;
|
|
35
|
-
locked?: boolean;
|
|
36
|
-
style?: import("./../../../common/types/Shapes").StyleShape | undefined;
|
|
37
|
-
} & Rect & {
|
|
38
|
-
type: "rect";
|
|
39
|
-
} & {
|
|
40
|
-
selection?: import("./../../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
41
|
-
path?: Path2D | undefined;
|
|
42
|
-
type: "rect";
|
|
43
|
-
}) | ({
|
|
44
|
-
id: string;
|
|
45
|
-
computed: {
|
|
46
|
-
borders: Rect;
|
|
47
|
-
outerBorders: Rect;
|
|
48
|
-
center: Point;
|
|
49
|
-
boundingBox: Rect;
|
|
50
|
-
};
|
|
51
|
-
} & {
|
|
52
|
-
rotation?: number;
|
|
53
|
-
toolId?: string;
|
|
54
|
-
visible?: boolean;
|
|
55
|
-
locked?: boolean;
|
|
56
|
-
style?: import("./../../../common/types/Shapes").StyleShape | undefined;
|
|
57
|
-
} & Rect & {
|
|
58
|
-
type: "square";
|
|
59
|
-
} & {
|
|
60
|
-
selection?: import("./../../../common/types/Shapes").SelectionDefaultType | undefined;
|
|
61
|
-
path?: Path2D | undefined;
|
|
62
|
-
type: "square";
|
|
63
|
-
});
|
|
64
24
|
export declare const resizeRect: <T extends rectish>(cursorPosition: Point, originalShape: ShapeEntity<T>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => ShapeEntity<T>;
|
|
25
|
+
export declare const resizeRectInGroup: (shape: ShapeEntity<rectish>, group: SelectionType & {
|
|
26
|
+
type: "group";
|
|
27
|
+
}, groupCtx: GroupResizeContext) => ShapeEntity<rectish>;
|
|
65
28
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { UtilsSettings } from './../../../canvas/constants/app';
|
|
2
2
|
import type { SelectionModeResize } from './../../../common/types/Mode';
|
|
3
|
-
import type { DrawableShape, Point, Rect, ShapeEntity, Text } from './../../../common/types/Shapes';
|
|
3
|
+
import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity, Text } from './../../../common/types/Shapes';
|
|
4
4
|
import type { ToolsSettingsType } from './../../../common/types/tools';
|
|
5
|
+
import { type GroupResizeContext } from './group';
|
|
5
6
|
export declare const getComputedText: (text: DrawableShape<"text">, settings: UtilsSettings) => {
|
|
6
7
|
borders: Rect;
|
|
7
8
|
outerBorders: Rect;
|
|
@@ -19,6 +20,8 @@ export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
|
|
|
19
20
|
}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"text">;
|
|
20
21
|
export declare const drawText: (ctx: CanvasRenderingContext2D, text: DrawableShape<"text">) => void;
|
|
21
22
|
export declare const getTextBorder: (text: Text, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
|
|
22
|
-
export declare const translateText: (cursorPosition: Point, originalShape: ShapeEntity<"text">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"text">;
|
|
23
23
|
export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: ShapeEntity<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"text">;
|
|
24
|
+
export declare const resizeTextInGroup: (canvasCtx: CanvasRenderingContext2D, shape: ShapeEntity<"text">, group: SelectionType & {
|
|
25
|
+
type: "group";
|
|
26
|
+
}, groupCtx: GroupResizeContext) => ShapeEntity<"text">;
|
|
24
27
|
export declare const resizeTextShapeWithNewContent: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"text">, newValue: string[], settings: UtilsSettings) => ShapeEntity<"text">;
|
|
@@ -75,8 +75,14 @@ export type DrawableShape<T extends ShapeType = ShapeType> = {
|
|
|
75
75
|
type: 'line';
|
|
76
76
|
} : T extends 'picture' ? Picture & {
|
|
77
77
|
img: HTMLImageElement;
|
|
78
|
+
flipX?: boolean;
|
|
79
|
+
flipY?: boolean;
|
|
80
|
+
ratio?: number;
|
|
78
81
|
type: 'picture';
|
|
79
82
|
} : T extends 'text' ? Text & {
|
|
83
|
+
flipX?: boolean;
|
|
84
|
+
flipY?: boolean;
|
|
85
|
+
ratio?: number;
|
|
80
86
|
type: 'text';
|
|
81
87
|
} : T extends 'rect' ? Rect & {
|
|
82
88
|
type: 'rect';
|
|
@@ -118,9 +124,9 @@ export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<Shape
|
|
|
118
124
|
center: Point;
|
|
119
125
|
boundingBox: Rect;
|
|
120
126
|
};
|
|
127
|
+
path?: Path2D | undefined;
|
|
121
128
|
} & DrawableShape<T> & (T extends 'line' ? {
|
|
122
129
|
selection?: SelectionLinesType | undefined;
|
|
123
|
-
path?: Path2D | undefined;
|
|
124
130
|
arrows?: TriangleEntity[];
|
|
125
131
|
type: 'line';
|
|
126
132
|
} : T extends 'picture' ? {
|
|
@@ -132,35 +138,27 @@ export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<Shape
|
|
|
132
138
|
type: 'text';
|
|
133
139
|
} : T extends 'rect' ? {
|
|
134
140
|
selection?: SelectionDefaultType | undefined;
|
|
135
|
-
path?: Path2D | undefined;
|
|
136
141
|
type: 'rect';
|
|
137
142
|
} : T extends 'square' ? {
|
|
138
143
|
selection?: SelectionDefaultType | undefined;
|
|
139
|
-
path?: Path2D | undefined;
|
|
140
144
|
type: 'square';
|
|
141
145
|
} : T extends 'circle' ? {
|
|
142
146
|
selection?: SelectionDefaultType | undefined;
|
|
143
|
-
path?: Path2D | undefined;
|
|
144
147
|
type: 'circle';
|
|
145
148
|
} : T extends 'ellipse' ? {
|
|
146
149
|
selection?: SelectionDefaultType | undefined;
|
|
147
|
-
path?: Path2D | undefined;
|
|
148
150
|
type: 'ellipse';
|
|
149
151
|
} : T extends 'polygon' ? {
|
|
150
152
|
selection?: SelectionLinesType | undefined;
|
|
151
|
-
path?: Path2D | undefined;
|
|
152
153
|
type: 'polygon';
|
|
153
154
|
} : T extends 'curve' ? {
|
|
154
155
|
selection?: SelectionLinesType | undefined;
|
|
155
|
-
path?: Path2D | undefined;
|
|
156
156
|
type: 'curve';
|
|
157
157
|
} : T extends 'brush' ? {
|
|
158
158
|
selection?: SelectionDefaultType | undefined;
|
|
159
|
-
path?: Path2D | undefined;
|
|
160
159
|
type: 'brush';
|
|
161
160
|
} : T extends 'group' ? {
|
|
162
161
|
selection?: SelectionDefaultType | undefined;
|
|
163
|
-
path?: Path2D | undefined;
|
|
164
162
|
type: 'group';
|
|
165
163
|
} : never);
|
|
166
164
|
export type StateData = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const omit: <T extends Record<string, unknown>>(keys: string[], obj: T) => T;
|
|
1
|
+
export declare const omit: <T extends Record<string, unknown>>(keys: (string | [string, unknown[]])[], obj: T) => T;
|
|
2
2
|
export declare const set: <T extends Record<string, any> | unknown[]>(path: string | number | (string | number)[], value: unknown, obj: T) => T;
|
|
3
3
|
export declare const mergeWith: (customMergeFn: (objValue: unknown, srcValue: unknown, key: string) => unknown, target: unknown, source: unknown) => unknown;
|
|
4
4
|
export declare const isEqual: (a: unknown, b: unknown) => boolean;
|