canvas2d-wrapper 1.14.1 → 2.0.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.
Files changed (89) hide show
  1. package/dist/Canvas2D.d.ts +3 -0
  2. package/dist/Canvas2D.js +158 -0
  3. package/dist/Canvas2D.spec.d.ts +0 -0
  4. package/dist/Canvas2D.spec.js +38101 -0
  5. package/dist/assets/Canvas2D.css +1 -0
  6. package/dist/collisions/collideElement.d.ts +3 -0
  7. package/dist/collisions/collideElement.js +53 -0
  8. package/dist/collisions/inCircle.d.ts +3 -0
  9. package/dist/collisions/inCircle.js +6 -0
  10. package/dist/collisions/inPoly.d.ts +2 -0
  11. package/dist/collisions/inPoly.js +20 -0
  12. package/dist/collisions/inRect.d.ts +2 -0
  13. package/dist/collisions/inRect.js +12 -0
  14. package/dist/collisions/onLinePath.d.ts +2 -0
  15. package/dist/collisions/onLinePath.js +45 -0
  16. package/dist/events/computeEventPositions.d.ts +9 -0
  17. package/dist/events/computeEventPositions.js +7 -0
  18. package/dist/events/elementClick.d.ts +4 -0
  19. package/dist/events/elementClick.js +18 -0
  20. package/dist/events/elementRightClick.d.ts +4 -0
  21. package/dist/events/elementRightClick.js +13 -0
  22. package/dist/events/mouseMove.d.ts +5 -0
  23. package/dist/events/mouseMove.js +37 -0
  24. package/dist/events/mouseWheel.d.ts +2 -0
  25. package/dist/events/mouseWheel.js +10 -0
  26. package/dist/functions/calcRatioForMinimap.d.ts +2 -0
  27. package/dist/functions/calcRatioForMinimap.js +15 -0
  28. package/dist/functions/calcTileSize.d.ts +1 -0
  29. package/dist/functions/calcTileSize.js +6 -0
  30. package/dist/functions/preloadImages.d.ts +1 -0
  31. package/dist/functions/preloadImages.js +7 -0
  32. package/dist/functions/sortElements.d.ts +2 -0
  33. package/dist/functions/sortElements.js +18 -0
  34. package/dist/generateTestData.d.ts +2 -0
  35. package/dist/generateTestData.js +48 -0
  36. package/dist/hooks/useGamepad.d.ts +1 -0
  37. package/dist/hooks/useGamepad.js +13 -0
  38. package/dist/hooks/useKeyboard.d.ts +5 -0
  39. package/dist/hooks/useKeyboard.js +19 -0
  40. package/dist/hooks/useMousePosition.d.ts +6 -0
  41. package/dist/hooks/useMousePosition.js +25 -0
  42. package/dist/hooks/useWindowDimensions.d.ts +4 -0
  43. package/dist/hooks/useWindowDimensions.js +20 -0
  44. package/dist/img/logo.png +0 -0
  45. package/dist/main.d.ts +20 -0
  46. package/dist/main.js +26 -0
  47. package/dist/render/renderCanvas.d.ts +3 -0
  48. package/dist/render/renderCanvas.js +35 -0
  49. package/dist/render/renderCircle.d.ts +2 -0
  50. package/dist/render/renderCircle.js +12 -0
  51. package/dist/render/renderImage.d.ts +2 -0
  52. package/dist/render/renderImage.js +41 -0
  53. package/dist/render/renderLinePath.d.ts +2 -0
  54. package/dist/render/renderLinePath.js +27 -0
  55. package/dist/render/renderPolygon.d.ts +2 -0
  56. package/dist/render/renderPolygon.js +18 -0
  57. package/dist/render/renderRect.d.ts +2 -0
  58. package/dist/render/renderRect.js +27 -0
  59. package/dist/shapes/CanvasImage.d.ts +40 -0
  60. package/dist/shapes/CanvasImage.js +38 -0
  61. package/dist/shapes/CanvasObject.d.ts +14 -0
  62. package/dist/shapes/CanvasObject.js +27 -0
  63. package/dist/shapes/Circle.d.ts +28 -0
  64. package/dist/shapes/Circle.js +25 -0
  65. package/dist/shapes/ColoredCanvasObject.d.ts +7 -0
  66. package/dist/shapes/ColoredCanvasObject.js +14 -0
  67. package/dist/shapes/LinePath.d.ts +31 -0
  68. package/dist/shapes/LinePath.js +28 -0
  69. package/dist/shapes/Polygon.d.ts +25 -0
  70. package/dist/shapes/Polygon.js +23 -0
  71. package/dist/shapes/Rect.d.ts +34 -0
  72. package/dist/shapes/Rect.js +29 -0
  73. package/dist/types/Canvas2DProps.d.ts +30 -0
  74. package/dist/types/Canvas2DProps.js +1 -0
  75. package/dist/types/Canvas2DState.d.ts +18 -0
  76. package/dist/types/Canvas2DState.js +1 -0
  77. package/dist/types/CollideElementResultItem.d.ts +9 -0
  78. package/dist/types/CollideElementResultItem.js +1 -0
  79. package/dist/types/Position2D.d.ts +5 -0
  80. package/dist/types/Position2D.js +1 -0
  81. package/dist/types/Surface2D.d.ts +7 -0
  82. package/dist/types/Surface2D.js +1 -0
  83. package/package.json +48 -56
  84. package/canvas2d-wrapper.d.ts +0 -285
  85. package/dist/index.css +0 -3
  86. package/dist/index.js +0 -1088
  87. package/dist/index.js.map +0 -1
  88. package/dist/index.modern.js +0 -1074
  89. package/dist/index.modern.js.map +0 -1
package/package.json CHANGED
@@ -1,58 +1,50 @@
1
1
  {
2
- "name": "canvas2d-wrapper",
3
- "version": "1.14.1",
4
- "description": "A React Wrapper to use HTML5 canvas with mouse move and zoom abilities.",
5
- "author": "Elanis",
6
- "license": "MIT",
7
- "repository": "Dysnomia-studio/canvas2d-wrapper",
8
- "main": "dist/index.js",
9
- "module": "dist/index.modern.js",
10
- "source": "src/index.js",
11
- "engines": {
12
- "node": ">=10"
13
- },
14
- "scripts": {
15
- "build": "microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment",
16
- "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment",
17
- "prepare": "run-s build",
18
- "test": "run-s test:unit test:lint test:build",
19
- "test:build": "run-s build",
20
- "test:lint": "eslint . --fix",
21
- "test:unit": "cross-env CI=1 react-scripts test --env=jsdom --coverage",
22
- "test:watch": "react-scripts test --env=jsdom --coverage",
23
- "predeploy": "cd example && npm install && npm run build",
24
- "deploy": "gh-pages -d example/build"
25
- },
26
- "peerDependencies": {
27
- "react": "^18.0.0 || ^19.0.0"
28
- },
29
- "devDependencies": {
30
- "@eslint/eslintrc": "^3.3.1",
31
- "@eslint/js": "^9.36.0",
32
- "@testing-library/jest-dom": "^6.8.0",
33
- "@testing-library/react": "^16.3.0",
34
- "@testing-library/user-event": "^14.6.1",
35
- "canvas": "^3.2.0",
36
- "cross-env": "^10.0.0",
37
- "eslint": "^9.36.0",
38
- "gh-pages": "^6.3.0",
39
- "globals": "^16.4.0",
40
- "microbundle-crl": "^0.13.11",
41
- "npm-run-all": "^4.1.5",
42
- "postcss-flexbugs-fixes": "^5.0.2",
43
- "postcss-normalize": "^13.0.1",
44
- "postcss-preset-env": "^10.4.0",
45
- "react": "^19.1.1",
46
- "react-dom": "^19.1.1",
47
- "react-scripts": "^5.0.1"
48
- },
49
- "files": [
50
- "dist",
51
- "./canvas2d-wrapper.d.ts"
52
- ],
53
- "dependencies": {
54
- "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
55
- "@babel/preset-react": "^7.27.1"
56
- },
57
- "types": "./canvas2d-wrapper.d.ts"
2
+ "name": "canvas2d-wrapper",
3
+ "version": "2.0.0",
4
+ "type": "module",
5
+ "main": "dist/main.js",
6
+ "types": "dist/main.d.ts",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "scripts": {
11
+ "dev": "vite",
12
+ "build": "tsc -b ./tsconfig.lib.json && vite build",
13
+ "lint": "eslint .",
14
+ "prepublishOnly": "npm run build",
15
+ "preview": "vite preview",
16
+ "test": "vitest run --coverage"
17
+ },
18
+ "peerDependencies": {
19
+ "react": "^19.0.0",
20
+ "react-dom": "^19.0.0"
21
+ },
22
+ "devDependencies": {
23
+ "@eslint/js": "^9.37.0",
24
+ "@testing-library/jest-dom": "^6.9.1",
25
+ "@testing-library/react": "^16.3.0",
26
+ "@types/jest": "^30.0.0",
27
+ "@types/node": "^24.7.1",
28
+ "@types/react": "^19.2.2",
29
+ "@types/react-dom": "^19.2.1",
30
+ "@vitejs/plugin-react": "^5.0.4",
31
+ "@vitest/coverage-v8": "^3.2.4",
32
+ "eslint": "^9.37.0",
33
+ "eslint-plugin-react-hooks": "^7.0.0",
34
+ "eslint-plugin-react-refresh": "^0.4.23",
35
+ "glob": "^11.0.3",
36
+ "globals": "^16.4.0",
37
+ "jsdom": "^27.0.0",
38
+ "react": "^19.2.0",
39
+ "react-dom": "^19.2.0",
40
+ "typescript": "5.9",
41
+ "typescript-eslint": "^8.46.0",
42
+ "vite": "^7.1.9",
43
+ "vite-plugin-dts": "^4.5.4",
44
+ "vite-plugin-lib-inject-css": "^2.2.2",
45
+ "vitest": "^3.2.4"
46
+ },
47
+ "dependencies": {
48
+ "canvas2d-wrapper": "^1.14.1"
49
+ }
58
50
  }
@@ -1,285 +0,0 @@
1
- declare module "canvas2d-wrapper" {
2
- export type Position2D = {
3
- x: number,
4
- y: number
5
- };
6
-
7
- export type Surface2D = {
8
- x: number,
9
- y: number,
10
- width: number,
11
- height: number
12
- };
13
-
14
- export type Canvas2DEventCallbackParams = {
15
- id: string | null,
16
- element: CanvasObject | null,
17
- originalEvent: Event,
18
- posOnMap: Position2D
19
- };
20
-
21
- // React component
22
- export type Canvas2DProps = {
23
- width: number,
24
- height: number,
25
- trackMouseMove?: boolean,
26
- minZoom?: number,
27
- maxZoom?: number,
28
- tileSize?: number,
29
- onClick: ({ id, element, originalEvent }: Canvas2DEventCallbackParams) => void,
30
- onRightClick?: ({ id, element, originalEvent }: Canvas2DEventCallbackParams) => void,
31
- onHover?: ({ id, element, originalEvent }?: Canvas2DEventCallbackParams | null, position: Position2D | undefined) => void,
32
- onElementMoved?: (element: CanvasObject, x: number, y: number) => void,
33
- onWheel?: (e: Event) => void,
34
- onFrame: () => CanvasObject[],
35
- lockXAxis?: boolean,
36
- lockYAxis?: boolean,
37
- smoothingQuality?: string,
38
- dragObjects?: boolean,
39
- deltaLeft?: number,
40
- deltaTop?: number,
41
- // Additional props
42
- id: string,
43
- className?: string,
44
- showMinimap?: boolean,
45
- minimapWidth?: number,
46
- minimapHeight?: number,
47
- minimapFilter?: (e: CanvasObject) => boolean,
48
- };
49
-
50
- export function Canvas2D(props: Canvas2DProps);
51
-
52
- // Shapes
53
- export class CanvasObject {
54
- constructor(
55
- id: string,
56
- x: number,
57
- y: number,
58
- zIndex?: number,
59
- draggable?: boolean,
60
- hasCollisions?: boolean
61
- );
62
-
63
- get constructorName(): string;
64
-
65
- get zIndex(): number;
66
-
67
- set zIndex(zIndex: number);
68
-
69
- id: string;
70
- x: number;
71
- y: number;
72
- draggable: boolean | undefined;
73
- hasCollisions: boolean | undefined;
74
- }
75
-
76
- export class ColoredCanvasObject extends CanvasObject {
77
- constructor(
78
- id: string,
79
- x: number,
80
- y: number,
81
- width: number,
82
- height: number,
83
- fill?: string,
84
- stroke?: string,
85
- zIndex?: number,
86
- draggable?: boolean,
87
- hasCollisions?: boolean
88
- );
89
-
90
- fill: string | undefined;
91
- stroke: string | undefined;
92
- }
93
-
94
- export class CanvasImage extends ColoredCanvasObject {
95
- constructor({ id, x, y, width, height, src, zIndex, draggable }: {
96
- id: string,
97
- x: number,
98
- y: number,
99
- width: number,
100
- height: number,
101
- src: string,
102
- zIndex?: number,
103
- draggable?: boolean,
104
- hasCollisions?: boolean,
105
- rotation?: number,
106
- });
107
-
108
- crop(sx: number, swidth: number, sheight: number);
109
-
110
- src: string;
111
- width: number;
112
- height: number;
113
- rotation?: number;
114
- }
115
-
116
- export class Circle extends ColoredCanvasObject {
117
- constructor({ id, x, y, radius, fill, stroke, zIndex, draggable }: {
118
- id: string,
119
- x: number,
120
- y: number,
121
- radius: number,
122
- fill?: string,
123
- stroke?: string,
124
- zIndex?: number,
125
- draggable?: boolean,
126
- hasCollisions?: boolean
127
- });
128
-
129
- radius: number;
130
- }
131
-
132
- export class LinePath extends ColoredCanvasObject {
133
- constructor({ id, points, stroke, zIndex }: {
134
- id: string,
135
- lineWidth: number,
136
- points: Position2D[],
137
- stroke: string,
138
- zIndex?: number,
139
- smoothCorners?: boolean,
140
- smoothCornersRadius?: number,
141
- hasCollisions?: boolean
142
- });
143
-
144
- points: Position2D[];
145
- lineWidth: number;
146
- smoothCorners?: boolean;
147
- smoothCornersRadius?: number;
148
- }
149
-
150
- export class Polygon extends ColoredCanvasObject {
151
- constructor({ id, points, width, height, src, zIndex, draggable }: {
152
- id: string,
153
- points: Position2D[],
154
- fill?: string,
155
- stroke?: string,
156
- zIndex?: number,
157
- draggable?: boolean,
158
- hasCollisions?: boolean
159
- });
160
-
161
- points: Position2D[];
162
- }
163
-
164
- export class Rect extends ColoredCanvasObject {
165
- constructor({ id, x, y, width, height, src, zIndex, draggable }: {
166
- id: string,
167
- x: number,
168
- y: number,
169
- width: number,
170
- height: number,
171
- fill?: string,
172
- stroke?: string,
173
- zIndex?: number,
174
- draggable?: boolean,
175
- hasCollisions?: boolean,
176
- rotation?: number,
177
- });
178
-
179
- width: number;
180
- height: number;
181
- rotation?: number;
182
- }
183
-
184
- // Functions
185
- export function preloadImages(images: string[]): void;
186
-
187
- // Hooks
188
- export function useGamepad(): Gamepad;
189
- export function useKeyboard(): { [id: string]: string };
190
- export function useMousePosition(): {
191
- x: number | null,
192
- y: number | null,
193
- };
194
- export function useWindowDimensions(): {
195
- width: number,
196
- height: number,
197
- };
198
-
199
-
200
-
201
- // Gamepad
202
- /**
203
- * Represents a single gamepad device.
204
- */
205
- interface Gamepad {
206
- /** Unique identifier for the controller (usually the model name). */
207
- readonly id: string;
208
-
209
- /** Index of the gamepad in the array returned by getGamepads(). */
210
- readonly index: number;
211
-
212
- /** True if the gamepad is currently connected. */
213
- readonly connected: boolean;
214
-
215
- /** Timestamp (in milliseconds) of the last update. */
216
- readonly timestamp: number;
217
-
218
- /** Mapping type – typically "standard" or an empty string for custom layouts. */
219
- readonly mapping: string;
220
-
221
- /** Array of button states (pressed, touched, value). */
222
- readonly buttons: readonly GamepadButton[];
223
-
224
- /** Array of axis values ranging from -1.0 to +1.0. */
225
- readonly axes: readonly number[];
226
-
227
- /** Optional pose information (e.g., for VR controllers). */
228
- readonly pose?: GamepadPose | null;
229
-
230
- /** Optional haptic actuators (vibration). */
231
- readonly hapticActuators?: readonly GamepadHapticActuator[] | null;
232
- }
233
-
234
- /**
235
- * Represents a single button on a gamepad.
236
- */
237
- interface GamepadButton {
238
- /** Normalized pressure (0.0–1.0). */
239
- readonly value: number;
240
-
241
- /** True if the button is currently pressed. */
242
- readonly pressed: boolean;
243
-
244
- /** True if the button is being touched (may be same as pressed). */
245
- readonly touched: boolean;
246
- }
247
-
248
- /**
249
- * Pose information for motion‑tracking controllers.
250
- */
251
- interface GamepadPose {
252
- /** Position vector `[x, y, z]` in meters (if available). */
253
- readonly position?: readonly number[] | null;
254
-
255
- /** Linear velocity `[vx, vy, vz]` in m/s (if available). */
256
- readonly linearVelocity?: readonly number[] | null;
257
-
258
- /** Linear acceleration `[ax, ay, az]` in m/s² (if available). */
259
- readonly linearAcceleration?: readonly number[] | null;
260
-
261
- /** Orientation quaternion `[x, y, z, w]` (if available). */
262
- readonly orientation?: readonly number[] | null;
263
-
264
- /** Angular velocity `[wx, wy, wz]` in rad/s (if available). */
265
- readonly angularVelocity?: readonly number[] | null;
266
-
267
- /** Angular acceleration `[αx, αy, αz]` in rad/s² (if available). */
268
- readonly angularAcceleration?: readonly number[] | null;
269
-
270
- /** Indicates whether the pose data is reliable. */
271
- readonly hasOrientation: boolean;
272
- readonly hasPosition: boolean;
273
- }
274
-
275
- /**
276
- * Haptic actuator for vibration feedback.
277
- */
278
- interface GamepadHapticActuator {
279
- /** The type of actuator (e.g., "vibration"). */
280
- readonly type: string;
281
-
282
- /** Duration in milliseconds, strong magnitude (0–1), and optional weak magnitude. */
283
- pulse(duration: number, strongMagnitude: number, weakMagnitude?: number): Promise<boolean>;
284
- }
285
- }
package/dist/index.css DELETED
@@ -1,3 +0,0 @@
1
- ._2eUir:active {
2
- cursor: move;
3
- }