canvas2d-wrapper 1.9.0 → 1.9.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/canvas2d-wrapper.d.ts +152 -0
- package/package.json +3 -2
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
declare module "canvas2d-wrapper" {
|
|
2
|
+
// React component
|
|
3
|
+
export type Canvas2DProps = {
|
|
4
|
+
width : number,
|
|
5
|
+
height : number,
|
|
6
|
+
trackMouseMove? : boolean,
|
|
7
|
+
minZoom? : number,
|
|
8
|
+
maxZoom? : number,
|
|
9
|
+
tileSize? : number,
|
|
10
|
+
onClick : (element : CanvasObject) => void,
|
|
11
|
+
onRightClick? : (element : CanvasObject) => void,
|
|
12
|
+
onHover? : (element : CanvasObject, { x, y } : { x : number, y : number }) => void,
|
|
13
|
+
onElementMoved? : (element : CanvasObject, x : number, y : number) => void,
|
|
14
|
+
onWheel? : (e : Event) => void,
|
|
15
|
+
onFrame : () => CanvasObject[],
|
|
16
|
+
lockXAxis? : boolean,
|
|
17
|
+
lockYAxis? : boolean,
|
|
18
|
+
smoothingQuality? : string,
|
|
19
|
+
dragObjects? : boolean,
|
|
20
|
+
deltaLeft? : number,
|
|
21
|
+
deltaTop? : number,
|
|
22
|
+
// Additional props
|
|
23
|
+
id: string,
|
|
24
|
+
className?: string,
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export function Canvas2D(props : Canvas2DProps);
|
|
28
|
+
|
|
29
|
+
// Shapes
|
|
30
|
+
export class CanvasObject {
|
|
31
|
+
constructor(
|
|
32
|
+
id: string,
|
|
33
|
+
x: number,
|
|
34
|
+
y: number,
|
|
35
|
+
zIndex?: number,
|
|
36
|
+
draggable?: boolean
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
get constructorName() : string;
|
|
40
|
+
|
|
41
|
+
get zIndex() : number;
|
|
42
|
+
|
|
43
|
+
set zIndex(zIndex : number);
|
|
44
|
+
|
|
45
|
+
id: string;
|
|
46
|
+
x: number;
|
|
47
|
+
y: number;
|
|
48
|
+
draggable: boolean | undefined;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export class ColoredCanvasObject extends CanvasObject {
|
|
52
|
+
constructor(
|
|
53
|
+
id: string,
|
|
54
|
+
x: number,
|
|
55
|
+
y: number,
|
|
56
|
+
width: number,
|
|
57
|
+
height: number,
|
|
58
|
+
fill?: string,
|
|
59
|
+
stroke?: string,
|
|
60
|
+
zIndex?: number,
|
|
61
|
+
draggable?: boolean
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
fill: string | undefined;
|
|
65
|
+
stroke: string | undefined;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export class CanvasImage extends ColoredCanvasObject {
|
|
69
|
+
constructor({ id, x, y, width, height, src, zIndex, draggable } : {
|
|
70
|
+
id: string,
|
|
71
|
+
x: number,
|
|
72
|
+
y: number,
|
|
73
|
+
width: number,
|
|
74
|
+
height: number,
|
|
75
|
+
src: string,
|
|
76
|
+
zIndex?: number,
|
|
77
|
+
draggable?: boolean,
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
crop(sx : number, swidth : number, sheight : number);
|
|
81
|
+
|
|
82
|
+
src: string;
|
|
83
|
+
width: number;
|
|
84
|
+
height: number;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export class Circle extends ColoredCanvasObject {
|
|
88
|
+
constructor({ id, x, y, radius, fill, stroke, zIndex, draggable } : {
|
|
89
|
+
id: string,
|
|
90
|
+
x: number,
|
|
91
|
+
y: number,
|
|
92
|
+
radius: number,
|
|
93
|
+
fill?: string,
|
|
94
|
+
stroke?: string,
|
|
95
|
+
zIndex?: number,
|
|
96
|
+
draggable?: boolean,
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
radius: number;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export class Polygon extends ColoredCanvasObject {
|
|
103
|
+
constructor({ id, x, y, width, height, src, zIndex, draggable } : {
|
|
104
|
+
id: string,
|
|
105
|
+
points: {
|
|
106
|
+
x: number,
|
|
107
|
+
y: number,
|
|
108
|
+
}[],
|
|
109
|
+
fill?: string,
|
|
110
|
+
stroke?: string,
|
|
111
|
+
zIndex?: number,
|
|
112
|
+
draggable?: boolean,
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
points: {
|
|
116
|
+
x: number,
|
|
117
|
+
y: number,
|
|
118
|
+
}[];
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export class Rect extends ColoredCanvasObject {
|
|
122
|
+
constructor({ id, x, y, width, height, src, zIndex, draggable } : {
|
|
123
|
+
id: string,
|
|
124
|
+
x: number,
|
|
125
|
+
y: number,
|
|
126
|
+
width: number,
|
|
127
|
+
height: number,
|
|
128
|
+
fill?: string,
|
|
129
|
+
stroke?: string,
|
|
130
|
+
zIndex?: number,
|
|
131
|
+
draggable?: boolean,
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
width: number;
|
|
135
|
+
height: number;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// Functions
|
|
139
|
+
export function preloadImages(images : string[]) : void;
|
|
140
|
+
|
|
141
|
+
// Hooks
|
|
142
|
+
export function useGamepad() : { [id : string] : string };
|
|
143
|
+
export function useKeyboard() : { [id : string] : string };
|
|
144
|
+
export function useMousePosition() : {
|
|
145
|
+
x : number | null,
|
|
146
|
+
y : number | null,
|
|
147
|
+
};
|
|
148
|
+
export function useWindowDimensions() : {
|
|
149
|
+
width : number,
|
|
150
|
+
height : number,
|
|
151
|
+
};
|
|
152
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "canvas2d-wrapper",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.1",
|
|
4
4
|
"description": "A React Wrapper to use HTML5 canvas with mouse move and zoom abilities.",
|
|
5
5
|
"author": "Elanis",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,7 +44,8 @@
|
|
|
44
44
|
"react-scripts": "^5.0.1"
|
|
45
45
|
},
|
|
46
46
|
"files": [
|
|
47
|
-
"dist"
|
|
47
|
+
"dist",
|
|
48
|
+
"./canvas2d-wrapper.d.ts"
|
|
48
49
|
],
|
|
49
50
|
"dependencies": {
|
|
50
51
|
"@babel/eslint-parser": "^7.25.9",
|