canvas2d-wrapper 2.3.1 → 2.4.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/Canvas2D.d.ts +1 -1
- package/dist/Canvas2D.js +80 -61
- package/dist/collisions/collideElement.d.ts +2 -1
- package/dist/collisions/collideElement.js +15 -27
- package/dist/collisions/pointOnLinePath.js +18 -17
- package/dist/events/computeEventPositions.d.ts +1 -1
- package/dist/events/elementClick.d.ts +1 -1
- package/dist/events/elementClick.js +9 -5
- package/dist/events/elementRightClick.js +8 -10
- package/dist/events/mouseMove.js +4 -4
- package/dist/functions/calcRatioForMinimap.js +4 -4
- package/dist/hooks/useMousePosition.js +2 -2
- package/dist/hooks/useWindowDimensions.js +1 -1
- package/dist/main.js +17 -17
- package/dist/maths/getLineLength.js +1 -1
- package/dist/render/renderImage.js +1 -1
- package/dist/types/CollideElementResultItem.d.ts +1 -0
- package/package.json +12 -12
package/dist/Canvas2D.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { Canvas2DProps } from './types/Canvas2DProps';
|
|
3
|
-
export default function Canvas2D({ width, height, trackMouseMove, minZoom, maxZoom, tileSize, onClick, onRightClick, onHover, onElementMoved, onWheel, onFrame, lockXAxis, lockYAxis, smoothingQuality, dragObjects, deltaLeft, deltaTop, showMinimap, minimapWidth, minimapHeight, minimapDisplayFilter, minimapAutomaticZoomFilter, ...otherProps }: Canvas2DProps): React.JSX.Element;
|
|
3
|
+
export default function Canvas2D({ width, height, trackMouseMove, minZoom, maxZoom, tileSize, onClick, onRightClick, onHover, onElementMoved, onWheel, onFrame, lockXAxis, lockYAxis, smoothingQuality, dragObjects, deltaLeft, deltaTop, showMinimap, minimapWidth, minimapHeight, minimapDisplayFilter, minimapAutomaticZoomFilter, ...otherProps }: Readonly<Canvas2DProps>): React.JSX.Element;
|
package/dist/Canvas2D.js
CHANGED
|
@@ -8,40 +8,40 @@ import o from "./render/renderCanvas.js";
|
|
|
8
8
|
import { useCallback as s, useEffect as c, useState as l } from "react";
|
|
9
9
|
import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
10
10
|
import './assets/Canvas2D.css';//#region lib/Canvas2D.tsx
|
|
11
|
-
var p = {};
|
|
12
|
-
function
|
|
13
|
-
p[
|
|
14
|
-
let [
|
|
11
|
+
var p = {}, m = {}, h = 5;
|
|
12
|
+
function g({ width: g, height: _, trackMouseMove: v = !0, minZoom: y = 1, maxZoom: b = 1, tileSize: x = 1, onClick: S, onRightClick: C, onHover: w, onElementMoved: T, onWheel: E, onFrame: D, lockXAxis: O = !1, lockYAxis: k = !1, smoothingQuality: A = "medium", dragObjects: j = !1, deltaLeft: M = 0, deltaTop: N = 0, showMinimap: P = !1, minimapWidth: F = 240, minimapHeight: I = 120, minimapDisplayFilter: L = (e) => !0, minimapAutomaticZoomFilter: R = (e) => !0, ...z }) {
|
|
13
|
+
p[z.id] || (p[z.id] = []);
|
|
14
|
+
let [B, V] = l({
|
|
15
15
|
left: 0,
|
|
16
16
|
top: 0,
|
|
17
17
|
width: 0,
|
|
18
18
|
height: 0,
|
|
19
19
|
zoom: 0,
|
|
20
|
-
deltaTop:
|
|
21
|
-
deltaLeft:
|
|
20
|
+
deltaTop: N,
|
|
21
|
+
deltaLeft: M,
|
|
22
22
|
prevX: null,
|
|
23
23
|
prevY: null
|
|
24
|
-
}),
|
|
24
|
+
}), H = s((e) => {
|
|
25
25
|
if (e !== null) {
|
|
26
26
|
let t = e.getContext("2d");
|
|
27
27
|
if (!t) return;
|
|
28
|
-
|
|
28
|
+
A ? (t.imageSmoothingEnabled = !0, t.imageSmoothingQuality = A) : t.imageSmoothingEnabled = !1, V((n) => ({
|
|
29
29
|
...n,
|
|
30
30
|
boundingClientRect: e.getBoundingClientRect(),
|
|
31
31
|
canvas: e,
|
|
32
32
|
context: t,
|
|
33
|
-
left:
|
|
34
|
-
top:
|
|
35
|
-
width:
|
|
36
|
-
height:
|
|
33
|
+
left: g / 2,
|
|
34
|
+
top: _ / 2,
|
|
35
|
+
width: g,
|
|
36
|
+
height: _,
|
|
37
37
|
zoom: 1
|
|
38
38
|
}));
|
|
39
39
|
}
|
|
40
|
-
}, []),
|
|
40
|
+
}, []), U = s((e) => {
|
|
41
41
|
if (e !== null) {
|
|
42
42
|
let t = e.getContext("2d");
|
|
43
43
|
if (!t) return;
|
|
44
|
-
|
|
44
|
+
V((n) => ({
|
|
45
45
|
...n,
|
|
46
46
|
minimapBoundingClientRect: e.getBoundingClientRect(),
|
|
47
47
|
minimapCanvas: e,
|
|
@@ -49,75 +49,94 @@ function m({ width: m, height: h, trackMouseMove: g = !0, minZoom: _ = 1, maxZoo
|
|
|
49
49
|
}));
|
|
50
50
|
}
|
|
51
51
|
}, []);
|
|
52
|
-
if (
|
|
53
|
-
let
|
|
54
|
-
|
|
55
|
-
let
|
|
56
|
-
|
|
57
|
-
},
|
|
58
|
-
return
|
|
52
|
+
if (B.deltaTop = N, B.deltaLeft = M, y > b) throw Error("minZoom should be lower than maxZoom.");
|
|
53
|
+
let W;
|
|
54
|
+
v && (W = (e) => n(e, p[z.id], x, B, V, O, k, j, T, w));
|
|
55
|
+
let G = (e) => {
|
|
56
|
+
E && E(e.nativeEvent), y !== b && r(e, B, V, y, b);
|
|
57
|
+
}, K;
|
|
58
|
+
return S && (K = (t) => {
|
|
59
|
+
let n = !1;
|
|
60
|
+
m[z.id] && (n = Math.abs(m[z.id].x - t.nativeEvent.screenX) > h || Math.abs(m[z.id].y - t.nativeEvent.screenY) > h), S(e(t, p[z.id], x, B, n));
|
|
61
|
+
}), c(() => {
|
|
62
|
+
if (S && B.canvas) {
|
|
63
|
+
function e(e) {
|
|
64
|
+
m[z.id] = {
|
|
65
|
+
x: e.screenX,
|
|
66
|
+
y: e.screenY
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
return B.canvas.addEventListener("mousedown", e), () => {
|
|
70
|
+
B.canvas?.removeEventListener("mousedown", e);
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
}, [
|
|
74
|
+
B.canvas,
|
|
75
|
+
S,
|
|
76
|
+
z.id
|
|
77
|
+
]), c(() => {
|
|
59
78
|
function e(e) {
|
|
60
|
-
e.preventDefault(),
|
|
79
|
+
e.preventDefault(), C && C(t(e, p[z.id], x, B));
|
|
61
80
|
}
|
|
62
|
-
if (
|
|
63
|
-
|
|
81
|
+
if (C && B.canvas) return B.canvas.addEventListener("contextmenu", e), () => {
|
|
82
|
+
B.canvas?.removeEventListener("contextmenu", e);
|
|
64
83
|
};
|
|
65
|
-
}, [
|
|
84
|
+
}, [B.canvas, C]), c(() => {
|
|
66
85
|
let e = !0;
|
|
67
86
|
function t() {
|
|
68
87
|
if (!e) return;
|
|
69
|
-
p[
|
|
70
|
-
let n = a(p[
|
|
71
|
-
if (
|
|
72
|
-
let e = n.filter(
|
|
73
|
-
o(
|
|
74
|
-
left:
|
|
75
|
-
top:
|
|
88
|
+
p[z.id] = D();
|
|
89
|
+
let n = a(p[z.id]);
|
|
90
|
+
if (B.context && o(B.context, g, _, n, x, B), P && B.minimapContext) {
|
|
91
|
+
let e = n.filter(L), t = i(e.filter(R), g, _, F, I, x);
|
|
92
|
+
o(B.minimapContext, F, I, e, x / t, {
|
|
93
|
+
left: F / 2,
|
|
94
|
+
top: I / 2,
|
|
76
95
|
deltaLeft: 0,
|
|
77
96
|
deltaTop: 0,
|
|
78
97
|
zoom: 1,
|
|
79
|
-
width:
|
|
80
|
-
height:
|
|
98
|
+
width: F,
|
|
99
|
+
height: I,
|
|
81
100
|
prevX: null,
|
|
82
101
|
prevY: null
|
|
83
102
|
});
|
|
84
103
|
}
|
|
85
|
-
|
|
104
|
+
globalThis.requestAnimationFrame(t);
|
|
86
105
|
}
|
|
87
|
-
return
|
|
106
|
+
return globalThis.requestAnimationFrame(t), () => {
|
|
88
107
|
e = !1;
|
|
89
108
|
};
|
|
90
109
|
}, [
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
B.left,
|
|
111
|
+
B.top,
|
|
112
|
+
B.deltaLeft,
|
|
113
|
+
B.deltaTop,
|
|
114
|
+
B.zoom,
|
|
115
|
+
B.context,
|
|
116
|
+
D
|
|
98
117
|
]), c(() => {
|
|
99
|
-
|
|
118
|
+
V((e) => ({
|
|
100
119
|
...e,
|
|
101
|
-
left:
|
|
102
|
-
top:
|
|
103
|
-
width:
|
|
104
|
-
height:
|
|
120
|
+
left: g / 2,
|
|
121
|
+
top: _ / 2,
|
|
122
|
+
width: g,
|
|
123
|
+
height: _
|
|
105
124
|
}));
|
|
106
|
-
}, [
|
|
107
|
-
ref:
|
|
108
|
-
width:
|
|
109
|
-
height:
|
|
110
|
-
onPointerMove:
|
|
111
|
-
onWheel:
|
|
112
|
-
onClick:
|
|
125
|
+
}, [g, _]), /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("canvas", {
|
|
126
|
+
ref: H,
|
|
127
|
+
width: g,
|
|
128
|
+
height: _,
|
|
129
|
+
onPointerMove: W,
|
|
130
|
+
onWheel: G,
|
|
131
|
+
onClick: K,
|
|
113
132
|
className: "canvas2d-wrapper",
|
|
114
|
-
...
|
|
115
|
-
}),
|
|
116
|
-
ref:
|
|
117
|
-
width:
|
|
118
|
-
height:
|
|
133
|
+
...z
|
|
134
|
+
}), P && /* @__PURE__ */ d("canvas", {
|
|
135
|
+
ref: U,
|
|
136
|
+
width: F,
|
|
137
|
+
height: I,
|
|
119
138
|
className: "canvas2d-wrapper-minimap"
|
|
120
139
|
})] });
|
|
121
140
|
}
|
|
122
141
|
//#endregion
|
|
123
|
-
export {
|
|
142
|
+
export { g as default };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Position2D } from '../main';
|
|
1
2
|
import { default as CanvasObject } from '../shapes/CanvasObject';
|
|
2
3
|
import { default as CollideElementResultItem } from '../types/CollideElementResultItem';
|
|
3
|
-
export default function collideElement(e: Event, elements: CanvasObject[], left: number, top: number, tileSize: number, zoom: number): CollideElementResultItem | null;
|
|
4
|
+
export default function collideElement(e: Event, elements: CanvasObject[], left: number, top: number, posOnMap: Position2D, tileSize: number, zoom: number): CollideElementResultItem | null;
|
|
@@ -4,62 +4,50 @@ import n from "./pointInPolygon.js";
|
|
|
4
4
|
import r from "./pointInRectangle.js";
|
|
5
5
|
import i from "./pointOnLinePath.js";
|
|
6
6
|
//#region lib/collisions/collideElement.ts
|
|
7
|
-
function a(a, o, s, c, l, u) {
|
|
8
|
-
let
|
|
7
|
+
function a(a, o, s, c, l, u, d) {
|
|
8
|
+
let f = e(u, d), p = [];
|
|
9
9
|
for (let e of o) {
|
|
10
10
|
if (!e.hasCollisions) continue;
|
|
11
|
-
let o = e.x *
|
|
11
|
+
let o = e.x * f, u = e.y * f;
|
|
12
12
|
switch (e.constructorName) {
|
|
13
13
|
case "Rect":
|
|
14
14
|
case "CanvasImage":
|
|
15
|
-
let
|
|
16
|
-
r(o,
|
|
17
|
-
id:
|
|
15
|
+
let d = e;
|
|
16
|
+
r(o, u, d.width * f, d.height * f, s, c, d.rotation) && p.push({
|
|
17
|
+
id: d.id,
|
|
18
18
|
element: e,
|
|
19
19
|
originalEvent: a,
|
|
20
|
-
posOnMap:
|
|
21
|
-
x: u.x,
|
|
22
|
-
y: u.y
|
|
23
|
-
}
|
|
20
|
+
posOnMap: l
|
|
24
21
|
});
|
|
25
22
|
break;
|
|
26
23
|
case "Circle":
|
|
27
|
-
t(o,
|
|
24
|
+
t(o, u, e.radius * f, s, c) && p.push({
|
|
28
25
|
id: e.id,
|
|
29
26
|
element: e,
|
|
30
27
|
originalEvent: a,
|
|
31
|
-
posOnMap:
|
|
32
|
-
x: e.x,
|
|
33
|
-
y: e.y
|
|
34
|
-
}
|
|
28
|
+
posOnMap: l
|
|
35
29
|
});
|
|
36
30
|
break;
|
|
37
31
|
case "Polygon":
|
|
38
|
-
n(e.points, s, c,
|
|
32
|
+
n(e.points, s, c, f) && p.push({
|
|
39
33
|
id: e.id,
|
|
40
34
|
element: e,
|
|
41
35
|
originalEvent: a,
|
|
42
|
-
posOnMap:
|
|
43
|
-
x: e.x,
|
|
44
|
-
y: e.y
|
|
45
|
-
}
|
|
36
|
+
posOnMap: l
|
|
46
37
|
});
|
|
47
38
|
break;
|
|
48
39
|
case "LinePath":
|
|
49
|
-
let
|
|
50
|
-
i(
|
|
40
|
+
let m = e;
|
|
41
|
+
i(m.points, m.lineWidth, s, c, f) && p.push({
|
|
51
42
|
id: e.id,
|
|
52
43
|
element: e,
|
|
53
44
|
originalEvent: a,
|
|
54
|
-
posOnMap:
|
|
55
|
-
x: e.x,
|
|
56
|
-
y: e.y
|
|
57
|
-
}
|
|
45
|
+
posOnMap: l
|
|
58
46
|
});
|
|
59
47
|
break;
|
|
60
48
|
}
|
|
61
49
|
}
|
|
62
|
-
return
|
|
50
|
+
return p.length === 0 ? null : (p.length === 1 || p.sort((e, t) => e.element.zIndex > t.element.zIndex ? -1 : e.element.zIndex < t.element.zIndex || e.id > t.id ? 1 : e.id < t.id ? -1 : 0), p[0]);
|
|
63
51
|
}
|
|
64
52
|
//#endregion
|
|
65
53
|
export { a as default };
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import e from "./pointInCircle.js";
|
|
2
|
+
import t from "../maths/getLineLength.js";
|
|
2
3
|
//#region lib/collisions/pointOnLinePath.ts
|
|
3
|
-
function
|
|
4
|
-
let
|
|
5
|
-
if (e(
|
|
6
|
-
for (let
|
|
7
|
-
let
|
|
8
|
-
x:
|
|
9
|
-
y:
|
|
10
|
-
},
|
|
11
|
-
x:
|
|
12
|
-
y:
|
|
13
|
-
},
|
|
14
|
-
if (
|
|
15
|
-
let
|
|
16
|
-
x:
|
|
17
|
-
y:
|
|
4
|
+
function n(n, r, i, a, o = 1) {
|
|
5
|
+
let s = r / 2;
|
|
6
|
+
if (e(n[0].x * o, n[0].y * o, s * o, i, a) || e(n[n.length - 1].x * o, n[n.length - 1].y * o, s * o, i, a)) return !0;
|
|
7
|
+
for (let r = 1; r < n.length; r++) {
|
|
8
|
+
let c = {
|
|
9
|
+
x: n[r - 1].x * o,
|
|
10
|
+
y: n[r - 1].y * o
|
|
11
|
+
}, l = {
|
|
12
|
+
x: n[r].x * o,
|
|
13
|
+
y: n[r].y * o
|
|
14
|
+
}, u = t(c, l), d = ((i - c.x) * (l.x - c.x) + (a - c.y) * (l.y - c.y)) / u ** 2;
|
|
15
|
+
if (d < 0 || d > 1) continue;
|
|
16
|
+
let f = {
|
|
17
|
+
x: c.x + d * (l.x - c.x),
|
|
18
|
+
y: c.y + d * (l.y - c.y)
|
|
18
19
|
};
|
|
19
|
-
if (e(
|
|
20
|
+
if (e(f.x, f.y, s * o, i, a)) return !0;
|
|
20
21
|
}
|
|
21
22
|
return !1;
|
|
22
23
|
}
|
|
23
24
|
//#endregion
|
|
24
|
-
export {
|
|
25
|
+
export { n as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as Canvas2DState } from '../types/Canvas2DState';
|
|
2
|
-
export default function computeEventPositions(props: Canvas2DState, event:
|
|
2
|
+
export default function computeEventPositions(props: Canvas2DState, event: MouseEvent, tileSize: number): {
|
|
3
3
|
left: number;
|
|
4
4
|
top: number;
|
|
5
5
|
posOnMap: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { default as CanvasObject } from '../shapes/CanvasObject';
|
|
2
2
|
import { default as Canvas2DState } from '../types/Canvas2DState';
|
|
3
3
|
import { default as CollideElementResultItem } from '../types/CollideElementResultItem';
|
|
4
|
-
export default function elementClick(e: React.MouseEvent, elements: CanvasObject[], tileSize: number, state: Canvas2DState): CollideElementResultItem;
|
|
4
|
+
export default function elementClick(e: React.MouseEvent, elements: CanvasObject[], tileSize: number, state: Canvas2DState, hasMovedMouse: boolean): CollideElementResultItem;
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import e from "../collisions/collideElement.js";
|
|
2
2
|
import t from "./computeEventPositions.js";
|
|
3
3
|
//#region lib/events/elementClick.ts
|
|
4
|
-
function n(n, r, i, a) {
|
|
5
|
-
let { left:
|
|
6
|
-
return
|
|
4
|
+
function n(n, r, i, a, o) {
|
|
5
|
+
let { left: s, top: c, posOnMap: l } = t(a, n.nativeEvent, i), u = e(n.nativeEvent, r, s, c, l, i, a.zoom);
|
|
6
|
+
return u === null ? {
|
|
7
7
|
id: null,
|
|
8
8
|
element: null,
|
|
9
9
|
originalEvent: n.nativeEvent,
|
|
10
|
-
posOnMap:
|
|
11
|
-
|
|
10
|
+
posOnMap: l,
|
|
11
|
+
hasMovedMouse: o
|
|
12
|
+
} : {
|
|
13
|
+
...u,
|
|
14
|
+
hasMovedMouse: o
|
|
15
|
+
};
|
|
12
16
|
}
|
|
13
17
|
//#endregion
|
|
14
18
|
export { n as default };
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import e from "../collisions/collideElement.js";
|
|
2
|
+
import t from "./computeEventPositions.js";
|
|
2
3
|
//#region lib/events/elementRightClick.ts
|
|
3
|
-
function
|
|
4
|
-
let
|
|
5
|
-
return
|
|
4
|
+
function n(n, r, i, a) {
|
|
5
|
+
let { left: o, top: s, posOnMap: c } = t(a, n, i), l = e(n, r, o, s, c, i, a.zoom);
|
|
6
|
+
return l === null ? {
|
|
6
7
|
id: null,
|
|
7
8
|
element: null,
|
|
8
|
-
originalEvent:
|
|
9
|
-
posOnMap:
|
|
10
|
-
|
|
11
|
-
y: Math.floor(o / r / i.zoom)
|
|
12
|
-
}
|
|
13
|
-
} : s;
|
|
9
|
+
originalEvent: n,
|
|
10
|
+
posOnMap: c
|
|
11
|
+
} : l;
|
|
14
12
|
}
|
|
15
13
|
//#endregion
|
|
16
|
-
export {
|
|
14
|
+
export { n as default };
|
package/dist/events/mouseMove.js
CHANGED
|
@@ -3,17 +3,17 @@ import t from "./computeEventPositions.js";
|
|
|
3
3
|
//#region lib/events/mouseMove.ts
|
|
4
4
|
var n = 1, r = null, i = 300;
|
|
5
5
|
function a(a, o, s, c, l, u, d, f, p, m) {
|
|
6
|
-
let h = { ...c }, { left: g, top: _, posOnMap: v } = t(c, a, s);
|
|
7
|
-
if (a.nativeEvent.buttons === n && c.prevX) {
|
|
6
|
+
let h = { ...c }, { left: g, top: _, posOnMap: v } = t(c, a.nativeEvent, s);
|
|
7
|
+
if (a.nativeEvent.buttons === n && c.prevX && c.prevY) {
|
|
8
8
|
let t = !1;
|
|
9
|
-
f && (r === null && (r = e(a.nativeEvent, o, g, _, s, c.zoom)), r !== null && r.element.draggable && (r.element.x = -c.left - c.deltaLeft + (a.clientX - c.boundingClientRect.left) - (r.element.width ?? 0) / 2, r.element.y = -c.top - c.deltaLeft + (a.clientY - c.boundingClientRect.top) - (r.element.height ?? 0) / 2, t = !0, p && p(r, a.screenX - c.prevX, a.screenY - c.prevY), m && m(null, v))), t || (u || (h.left += a.screenX - c.prevX), d || (h.top += a.screenY - c.prevY)), a.nativeEvent.pointerType !== "mouse" && setTimeout(() => {
|
|
9
|
+
f && (r === null && (r = e(a.nativeEvent, o, g, _, v, s, c.zoom)), r !== null && r.element.draggable && (r.element.x = -c.left - c.deltaLeft + (a.clientX - c.boundingClientRect.left) - (r.element.width ?? 0) / 2, r.element.y = -c.top - c.deltaLeft + (a.clientY - c.boundingClientRect.top) - (r.element.height ?? 0) / 2, t = !0, p && p(r, a.screenX - c.prevX, a.screenY - c.prevY), m && m(null, v))), t || (u || (h.left += a.screenX - c.prevX), d || (h.top += a.screenY - c.prevY)), a.nativeEvent.pointerType !== "mouse" && setTimeout(() => {
|
|
10
10
|
r = null, l({
|
|
11
11
|
...h,
|
|
12
12
|
prevX: null,
|
|
13
13
|
prevY: null
|
|
14
14
|
});
|
|
15
15
|
}, i);
|
|
16
|
-
} else m && m(e(a.nativeEvent, o, g, _, s, c.zoom), v), r = null;
|
|
16
|
+
} else m && m(e(a.nativeEvent, o, g, _, v, s, c.zoom), v), r = null;
|
|
17
17
|
l({
|
|
18
18
|
...h,
|
|
19
19
|
prevX: a.screenX,
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
//#region lib/functions/calcRatioForMinimap.ts
|
|
2
2
|
function e(e, t, n, r, i, a) {
|
|
3
|
-
let o = e.
|
|
3
|
+
let o = e.flatMap((e) => {
|
|
4
4
|
let t = e;
|
|
5
5
|
return Array.isArray(t.points) ? t.points.map((e) => e.x * a) : [e.x * a];
|
|
6
|
-
})
|
|
6
|
+
}), s = Math.min(...o), c = Math.max(...o);
|
|
7
7
|
t = Math.max(2 * c, -2 * s, t);
|
|
8
|
-
let l = e.
|
|
8
|
+
let l = e.flatMap((e) => {
|
|
9
9
|
let t = e;
|
|
10
10
|
return Array.isArray(t.points) ? t.points.map((e) => e.y * a) : [e.y * a];
|
|
11
|
-
})
|
|
11
|
+
}), u = Math.min(...l), d = Math.max(...l);
|
|
12
12
|
return n = Math.max(2 * d, -2 * u, n), Math.max(t / r, n / i);
|
|
13
13
|
}
|
|
14
14
|
//#endregion
|
|
@@ -17,8 +17,8 @@ function n(n = !0) {
|
|
|
17
17
|
y: r
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
|
-
return
|
|
21
|
-
|
|
20
|
+
return globalThis.addEventListener("mousemove", e), n && globalThis.addEventListener("touchmove", e), () => {
|
|
21
|
+
globalThis.removeEventListener("mousemove", e), n && globalThis.removeEventListener("touchmove", e);
|
|
22
22
|
};
|
|
23
23
|
}, [n]), r;
|
|
24
24
|
}
|
|
@@ -13,7 +13,7 @@ function r() {
|
|
|
13
13
|
function e() {
|
|
14
14
|
i(n());
|
|
15
15
|
}
|
|
16
|
-
return
|
|
16
|
+
return globalThis.addEventListener("resize", e), () => globalThis.removeEventListener("resize", e);
|
|
17
17
|
}, []), r;
|
|
18
18
|
}
|
|
19
19
|
//#endregion
|
package/dist/main.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import e from "./collisions/pointInCircle.js";
|
|
2
2
|
import t from "./collisions/pointInPolygon.js";
|
|
3
3
|
import n from "./collisions/pointInRectangle.js";
|
|
4
|
-
import r from "./
|
|
5
|
-
import i from "./
|
|
6
|
-
import a from "./shapes/
|
|
7
|
-
import o from "./shapes/
|
|
8
|
-
import s from "./shapes/
|
|
9
|
-
import c from "./shapes/
|
|
10
|
-
import l from "./shapes/
|
|
11
|
-
import u from "./shapes/
|
|
12
|
-
import d from "./
|
|
13
|
-
import f from "./
|
|
14
|
-
import p from "./
|
|
15
|
-
import m from "./
|
|
16
|
-
import h from "./hooks/
|
|
17
|
-
import g from "./hooks/
|
|
18
|
-
import _ from "./hooks/
|
|
19
|
-
import v from "./
|
|
4
|
+
import r from "./maths/getLineLength.js";
|
|
5
|
+
import i from "./collisions/pointOnLinePath.js";
|
|
6
|
+
import a from "./shapes/CanvasObject.js";
|
|
7
|
+
import o from "./shapes/CanvasImage.js";
|
|
8
|
+
import s from "./shapes/Circle.js";
|
|
9
|
+
import c from "./shapes/LinePath.js";
|
|
10
|
+
import l from "./shapes/Polygon.js";
|
|
11
|
+
import u from "./shapes/Rect.js";
|
|
12
|
+
import d from "./shapes/Text.js";
|
|
13
|
+
import f from "./Canvas2D.js";
|
|
14
|
+
import p from "./collisions/lineWithLine.js";
|
|
15
|
+
import m from "./functions/preloadImages.js";
|
|
16
|
+
import h from "./hooks/useGamepad.js";
|
|
17
|
+
import g from "./hooks/useKeyboard.js";
|
|
18
|
+
import _ from "./hooks/useMousePosition.js";
|
|
19
|
+
import v from "./hooks/useWindowDimensions.js";
|
|
20
20
|
import y from "./maths/normalOnLine.js";
|
|
21
21
|
import b from "./maths/segmentAngle.js";
|
|
22
|
-
export {
|
|
22
|
+
export { f as Canvas2D, o as CanvasImage, a as CanvasObject, s as Circle, c as LinePath, l as Polygon, u as Rect, d as Text, r as getLineLength, p as lineWithLine, y as normalOnLine, e as pointInCircle, t as pointInPolygon, n as pointInRectangle, i as pointOnLinePath, m as preloadImages, b as segmentAngle, h as useGamepad, g as useKeyboard, _ as useMousePosition, v as useWindowDimensions };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region lib/render/renderImage.ts
|
|
2
|
-
|
|
2
|
+
globalThis.__canvas2dWrapper__ = { imgCache: {} };
|
|
3
3
|
function e(e, t, n, r, i) {
|
|
4
4
|
__canvas2dWrapper__.imgCache[t.src] || (__canvas2dWrapper__.imgCache[t.src] = new Image(), __canvas2dWrapper__.imgCache[t.src].src = t.src);
|
|
5
5
|
let a = n + t.x * i, o = r + t.y * i, s = t.width * i, c = t.height * i;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "canvas2d-wrapper",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"types": "dist/main.d.ts",
|
|
@@ -24,24 +24,24 @@
|
|
|
24
24
|
"@testing-library/jest-dom": "^6.9.1",
|
|
25
25
|
"@testing-library/react": "^16.3.2",
|
|
26
26
|
"@types/jest": "^30.0.0",
|
|
27
|
-
"@types/node": "^
|
|
27
|
+
"@types/node": "^26.1.1",
|
|
28
28
|
"@types/react": "^19.2.17",
|
|
29
29
|
"@types/react-dom": "^19.2.3",
|
|
30
|
-
"@vitejs/plugin-react": "^6.0.
|
|
31
|
-
"@vitest/coverage-v8": "^4.1.
|
|
32
|
-
"eslint": "^10.
|
|
30
|
+
"@vitejs/plugin-react": "^6.0.3",
|
|
31
|
+
"@vitest/coverage-v8": "^4.1.10",
|
|
32
|
+
"eslint": "^10.7.0",
|
|
33
33
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
34
|
-
"eslint-plugin-react-refresh": "^0.5.
|
|
34
|
+
"eslint-plugin-react-refresh": "^0.5.3",
|
|
35
35
|
"glob": "^13.0.6",
|
|
36
|
-
"globals": "^17.
|
|
36
|
+
"globals": "^17.7.0",
|
|
37
37
|
"jsdom": "^29.1.1",
|
|
38
38
|
"react": "^19.2.7",
|
|
39
39
|
"react-dom": "^19.2.7",
|
|
40
|
-
"typescript": "^
|
|
41
|
-
"typescript-eslint": "^8.
|
|
42
|
-
"vite": "^8.
|
|
43
|
-
"vite-plugin-dts": "^5.0.
|
|
40
|
+
"typescript": "^6.0.3",
|
|
41
|
+
"typescript-eslint": "^8.64.0",
|
|
42
|
+
"vite": "^8.1.4",
|
|
43
|
+
"vite-plugin-dts": "^5.0.3",
|
|
44
44
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
45
|
-
"vitest": "^4.1.
|
|
45
|
+
"vitest": "^4.1.10"
|
|
46
46
|
}
|
|
47
47
|
}
|