canvas2d-wrapper 2.2.1 → 2.3.0

package/dist/Canvas2D.js

@@ -1,159 +1,123 @@
-import { jsxs as K, Fragment as O, jsx as B } from "react/jsx-runtime";
-import { useState as Q, useCallback as j, useEffect as p } from "react";
-import S from "./events/elementClick.js";
-import U from "./events/elementRightClick.js";
-import V from "./events/mouseMove.js";
-import $ from "./events/mouseWheel.js";
-import z from "./functions/calcRatioForMinimap.js";
-import W from "./functions/sortElements.js";
-import k from "./render/renderCanvas.js";
-import './assets/Canvas2D.css';const l = {};
-function fe({
-  width: o,
-  height: r,
-  trackMouseMove: q = !0,
-  minZoom: d = 1,
-  maxZoom: v = 1,
-  tileSize: a = 1,
-  onClick: x,
-  onRightClick: u,
-  onHover: A,
-  onElementMoved: D,
-  onWheel: E,
-  onFrame: C,
-  lockXAxis: N = !1,
-  lockYAxis: T = !1,
-  smoothingQuality: R = "medium",
-  dragObjects: _ = !1,
-  deltaLeft: b = 0,
-  deltaTop: g = 0,
-  showMinimap: F = !1,
-  minimapWidth: m = 240,
-  minimapHeight: i = 120,
-  minimapDisplayFilter: X = (t) => !0,
-  minimapAutomaticZoomFilter: Y = (t) => !0,
-  ...f
-}) {
-  l[f.id] || (l[f.id] = []);
-  const [t, c] = Q({
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-    zoom: 0,
-    deltaTop: g,
-    deltaLeft: b,
-    prevX: null,
-    prevY: null
-  }), y = j((e) => {
-    if (e !== null) {
-      const n = e.getContext("2d");
-      if (!n)
-        return;
-      R ? (n.imageSmoothingEnabled = !0, n.imageSmoothingQuality = R) : n.imageSmoothingEnabled = !1, c((s) => ({
-        ...s,
-        boundingClientRect: e.getBoundingClientRect(),
-        canvas: e,
-        context: n,
-        left: o / 2,
-        top: r / 2,
-        width: o,
-        height: r,
-        zoom: 1
-      }));
-    }
-  }, []), G = j((e) => {
-    if (e !== null) {
-      const n = e.getContext("2d");
-      if (!n)
-        return;
-      c((s) => ({
-        ...s,
-        minimapBoundingClientRect: e.getBoundingClientRect(),
-        minimapCanvas: e,
-        minimapContext: n
-      }));
-    }
-  }, []);
-  if (t.deltaTop = g, t.deltaLeft = b, d > v)
-    throw new Error("minZoom should be lower than maxZoom.");
-  let L;
-  q && (L = (e) => V(e, l[f.id], a, t, c, N, T, _, D, A));
-  const I = (e) => {
-    E && E(e.nativeEvent), d !== v && $(e, t, c, d, v);
-  };
-  let M;
-  return x && (M = (e) => x(S(e, l[f.id], a, t))), p(() => {
-    function e(n) {
-      n.preventDefault(), u && u(U(n, l[f.id], a, t));
-    }
-    if (u && t.canvas)
-      return t.canvas.addEventListener("contextmenu", e), () => {
-        t.canvas?.removeEventListener("contextmenu", e);
-      };
-  }, [t.canvas, u]), p(() => {
-    let e = !0;
-    function n() {
-      if (!e)
-        return;
-      l[f.id] = C();
-      const s = W(l[f.id]);
-      if (t.context && k(
-        t.context,
-        o,
-        r,
-        s,
-        a,
-        t
-      ), F && t.minimapContext) {
-        const w = s.filter(X), J = z(w.filter(Y), o, r, m, i, a);
-        k(
-          t.minimapContext,
-          m,
-          i,
-          w,
-          a / J,
-          { left: m / 2, top: i / 2, deltaLeft: 0, deltaTop: 0, zoom: 1 }
-        );
-      }
-      window.requestAnimationFrame(n);
-    }
-    return window.requestAnimationFrame(n), () => {
-      e = !1;
-    };
-  }, [t.left, t.top, t.deltaLeft, t.deltaTop, t.zoom, t.context, C]), p(() => {
-    c((e) => ({
-      ...e,
-      left: o / 2,
-      top: r / 2,
-      width: o,
-      height: r
-    }));
-  }, [o, r]), /* @__PURE__ */ K(O, { children: [
-    /* @__PURE__ */ B(
-      "canvas",
-      {
-        ref: y,
-        width: o,
-        height: r,
-        onPointerMove: L,
-        onWheel: I,
-        onClick: M,
-        className: "canvas2d-wrapper",
-        ...f
-      }
-    ),
-    F && /* @__PURE__ */ B(
-      "canvas",
-      {
-        ref: G,
-        width: m,
-        height: i,
-        className: "canvas2d-wrapper-minimap"
-      }
-    )
-  ] });
+import e from "./events/elementClick.js";
+import t from "./events/elementRightClick.js";
+import n from "./events/mouseMove.js";
+import r from "./events/mouseWheel.js";
+import i from "./functions/calcRatioForMinimap.js";
+import a from "./functions/sortElements.js";
+import o from "./render/renderCanvas.js";
+import { useCallback as s, useEffect as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import './assets/Canvas2D.css';//#region lib/Canvas2D.tsx
+var p = {};
+function m({ width: m, height: h, trackMouseMove: g = !0, minZoom: _ = 1, maxZoom: v = 1, tileSize: y = 1, onClick: b, onRightClick: x, onHover: S, onElementMoved: C, onWheel: w, onFrame: T, lockXAxis: E = !1, lockYAxis: D = !1, smoothingQuality: O = "medium", dragObjects: k = !1, deltaLeft: A = 0, deltaTop: j = 0, showMinimap: M = !1, minimapWidth: N = 240, minimapHeight: P = 120, minimapDisplayFilter: F = (e) => !0, minimapAutomaticZoomFilter: I = (e) => !0, ...L }) {
+	p[L.id] || (p[L.id] = []);
+	let [R, z] = l({
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0,
+		zoom: 0,
+		deltaTop: j,
+		deltaLeft: A,
+		prevX: null,
+		prevY: null
+	}), B = s((e) => {
+		if (e !== null) {
+			let t = e.getContext("2d");
+			if (!t) return;
+			O ? (t.imageSmoothingEnabled = !0, t.imageSmoothingQuality = O) : t.imageSmoothingEnabled = !1, z((n) => ({
+				...n,
+				boundingClientRect: e.getBoundingClientRect(),
+				canvas: e,
+				context: t,
+				left: m / 2,
+				top: h / 2,
+				width: m,
+				height: h,
+				zoom: 1
+			}));
+		}
+	}, []), V = s((e) => {
+		if (e !== null) {
+			let t = e.getContext("2d");
+			if (!t) return;
+			z((n) => ({
+				...n,
+				minimapBoundingClientRect: e.getBoundingClientRect(),
+				minimapCanvas: e,
+				minimapContext: t
+			}));
+		}
+	}, []);
+	if (R.deltaTop = j, R.deltaLeft = A, _ > v) throw Error("minZoom should be lower than maxZoom.");
+	let H;
+	g && (H = (e) => n(e, p[L.id], y, R, z, E, D, k, C, S));
+	let U = (e) => {
+		w && w(e.nativeEvent), _ !== v && r(e, R, z, _, v);
+	}, W;
+	return b && (W = (t) => b(e(t, p[L.id], y, R))), c(() => {
+		function e(e) {
+			e.preventDefault(), x && x(t(e, p[L.id], y, R));
+		}
+		if (x && R.canvas) return R.canvas.addEventListener("contextmenu", e), () => {
+			R.canvas?.removeEventListener("contextmenu", e);
+		};
+	}, [R.canvas, x]), c(() => {
+		let e = !0;
+		function t() {
+			if (!e) return;
+			p[L.id] = T();
+			let n = a(p[L.id]);
+			if (R.context && o(R.context, m, h, n, y, R), M && R.minimapContext) {
+				let e = n.filter(F), t = i(e.filter(I), m, h, N, P, y);
+				o(R.minimapContext, N, P, e, y / t, {
+					left: N / 2,
+					top: P / 2,
+					deltaLeft: 0,
+					deltaTop: 0,
+					zoom: 1,
+					width: N,
+					height: P,
+					prevX: null,
+					prevY: null
+				});
+			}
+			window.requestAnimationFrame(t);
+		}
+		return window.requestAnimationFrame(t), () => {
+			e = !1;
+		};
+	}, [
+		R.left,
+		R.top,
+		R.deltaLeft,
+		R.deltaTop,
+		R.zoom,
+		R.context,
+		T
+	]), c(() => {
+		z((e) => ({
+			...e,
+			left: m / 2,
+			top: h / 2,
+			width: m,
+			height: h
+		}));
+	}, [m, h]), /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("canvas", {
+		ref: B,
+		width: m,
+		height: h,
+		onPointerMove: H,
+		onWheel: U,
+		onClick: W,
+		className: "canvas2d-wrapper",
+		...L
+	}), M && /* @__PURE__ */ d("canvas", {
+		ref: V,
+		width: N,
+		height: P,
+		className: "canvas2d-wrapper-minimap"
+	})] });
 }
-export {
-  fe as default
-};
+//#endregion
+export { m as default };

package/dist/collisions/collideElement.js

@@ -1,62 +1,65 @@
-import u from "../functions/calcTileSize.js";
-import f from "./pointInCircle.js";
-import x from "./pointInPolygon.js";
-import h from "./pointInRectangle.js";
-import g from "./pointOnLinePath.js";
-function O(r, d, s, l, p, m) {
-  const e = u(p, m), i = [];
-  for (const n of d) {
-    if (!n.hasCollisions)
-      continue;
-    const t = n.x * e, a = n.y * e;
-    switch (n.constructorName) {
-      case "Rect":
-      case "CanvasImage":
-        const o = n;
-        h(
-          t,
-          a,
-          o.width * e,
-          o.height * e,
-          s,
-          l,
-          o.rotation
-        ) && i.push({
-          id: o.id,
-          element: n,
-          originalEvent: r,
-          posOnMap: { x: o.x, y: o.y }
-        });
-        break;
-      case "Circle":
-        f(t, a, n.radius * e, s, l) && i.push({
-          id: n.id,
-          element: n,
-          originalEvent: r,
-          posOnMap: { x: n.x, y: n.y }
-        });
-        break;
-      case "Polygon":
-        x(n.points, s, l, e) && i.push({
-          id: n.id,
-          element: n,
-          originalEvent: r,
-          posOnMap: { x: n.x, y: n.y }
-        });
-        break;
-      case "LinePath":
-        const c = n;
-        g(c.points, c.lineWidth, s, l, e) && i.push({
-          id: n.id,
-          element: n,
-          originalEvent: r,
-          posOnMap: { x: n.x, y: n.y }
-        });
-        break;
-    }
-  }
-  return i.length === 0 ? null : (i.length === 1 || i.sort((n, t) => n.element.zIndex > t.element.zIndex ? -1 : n.element.zIndex < t.element.zIndex || n.id > t.id ? 1 : n.id < t.id ? -1 : 0), i[0]);
+import e from "../functions/calcTileSize.js";
+import t from "./pointInCircle.js";
+import n from "./pointInPolygon.js";
+import r from "./pointInRectangle.js";
+import i from "./pointOnLinePath.js";
+//#region lib/collisions/collideElement.ts
+function a(a, o, s, c, l, u) {
+	let d = e(l, u), f = [];
+	for (let e of o) {
+		if (!e.hasCollisions) continue;
+		let o = e.x * d, l = e.y * d;
+		switch (e.constructorName) {
+			case "Rect":
+			case "CanvasImage":
+				let u = e;
+				r(o, l, u.width * d, u.height * d, s, c, u.rotation) && f.push({
+					id: u.id,
+					element: e,
+					originalEvent: a,
+					posOnMap: {
+						x: u.x,
+						y: u.y
+					}
+				});
+				break;
+			case "Circle":
+				t(o, l, e.radius * d, s, c) && f.push({
+					id: e.id,
+					element: e,
+					originalEvent: a,
+					posOnMap: {
+						x: e.x,
+						y: e.y
+					}
+				});
+				break;
+			case "Polygon":
+				n(e.points, s, c, d) && f.push({
+					id: e.id,
+					element: e,
+					originalEvent: a,
+					posOnMap: {
+						x: e.x,
+						y: e.y
+					}
+				});
+				break;
+			case "LinePath":
+				let p = e;
+				i(p.points, p.lineWidth, s, c, d) && f.push({
+					id: e.id,
+					element: e,
+					originalEvent: a,
+					posOnMap: {
+						x: e.x,
+						y: e.y
+					}
+				});
+				break;
+		}
+	}
+	return f.length === 0 ? null : (f.length === 1 || f.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), f[0]);
 }
-export {
-  O as default
-};
+//#endregion
+export { a as default };

package/dist/collisions/lineWithLine.js

@@ -1,7 +1,10 @@
-function e(x, l, y, u) {
-  const t = l.x - x.x, c = l.y - x.y, s = u.x - y.x, d = u.y - y.y, _ = (-c * (x.x - y.x) + t * (x.y - y.y)) / (-s * c + t * d), o = (+s * (x.y - y.y) - d * (x.x - y.x)) / (-s * c + t * d);
-  return _ >= 0 && _ <= 1 && o >= 0 && o <= 1 ? { x: x.x + o * t, y: x.y + o * c } : null;
+//#region lib/collisions/lineWithLine.ts
+function e(e, t, n, r) {
+	let i = t.x - e.x, a = t.y - e.y, o = r.x - n.x, s = r.y - n.y, c = (-a * (e.x - n.x) + i * (e.y - n.y)) / (-o * a + i * s), l = (+o * (e.y - n.y) - s * (e.x - n.x)) / (-o * a + i * s);
+	return c >= 0 && c <= 1 && l >= 0 && l <= 1 ? {
+		x: e.x + l * i,
+		y: e.y + l * a
+	} : null;
 }
-export {
-  e as default
-};
+//#endregion
+export { e as default };

package/dist/collisions/pointInCircle.js

@@ -1,6 +1,6 @@
-function e(n, t, a, c, s) {
-  return (n - c) * (n - c) + (t - s) * (t - s) <= a * a;
+//#region lib/collisions/pointInCircle.ts
+function e(e, t, n, r, i) {
+	return (e - r) * (e - r) + (t - i) * (t - i) <= n * n;
 }
-export {
-  e as default
-};
+//#endregion
+export { e as default };

package/dist/collisions/pointInPolygon.js

@@ -1,21 +1,19 @@
-function s(r, a, t, u = 1) {
-  let n = !1;
-  for (let e = 0; e < r.length; e++) {
-    const l = r[e].x * u, f = r[e].y * u;
-    if (a === l && t === f)
-      return !0;
-    let c = e + 1;
-    c >= r.length && (c = 0);
-    const j = r[c].x * u, o = r[c].y * u;
-    if (f > t != o > t) {
-      const g = (a - l) * (o - f) - (j - l) * (t - f);
-      if (g === 0)
-        return !0;
-      g < 0 != o < f && (n = !n);
-    }
-  }
-  return n;
+//#region lib/collisions/pointInPolygon.ts
+function e(e, t, n, r = 1) {
+	let i = !1;
+	for (let a = 0; a < e.length; a++) {
+		let o = e[a].x * r, s = e[a].y * r;
+		if (t === o && n === s) return !0;
+		let c = a + 1;
+		c >= e.length && (c = 0);
+		let l = e[c].x * r, u = e[c].y * r;
+		if (s > n != u > n) {
+			let e = (t - o) * (u - s) - (l - o) * (n - s);
+			if (e === 0) return !0;
+			e < 0 != u < s && (i = !i);
+		}
+	}
+	return i;
 }
-export {
-  s as default
-};
+//#endregion
+export { e as default };

package/dist/collisions/pointInRectangle.js

@@ -1,11 +1,11 @@
-function L(f, M, x, I, u, c, s) {
-  let d = u, h = c;
-  if (s) {
-    const e = f + x / 2, t = M + I / 2;
-    d = e + (u - e) * Math.cos(-s) - (c - t) * Math.sin(-s), h = t + (c - t) * Math.cos(-s) + (u - e) * Math.sin(-s);
-  }
-  return f <= d && d <= f + x && M <= h && h <= M + I;
+//#region lib/collisions/pointInRectangle.ts
+function e(e, t, n, r, i, a, o) {
+	let s = i, c = a;
+	if (o) {
+		let l = e + n / 2, u = t + r / 2;
+		s = l + (i - l) * Math.cos(-o) - (a - u) * Math.sin(-o), c = u + (a - u) * Math.cos(-o) + (i - l) * Math.sin(-o);
+	}
+	return e <= s && s <= e + n && t <= c && c <= t + r;
 }
-export {
-  L as default
-};
+//#endregion
+export { e as default };

package/dist/collisions/pointOnLinePath.js

@@ -1,45 +1,24 @@
-import h from "./pointInCircle.js";
-function q(r, m, u, n, x = 1) {
-  const a = m / 2;
-  if (h(
-    r[0].x * x,
-    r[0].y * x,
-    a * x,
-    u,
-    n
-  ) || h(
-    r[r.length - 1].x * x,
-    r[r.length - 1].y * x,
-    a * x,
-    u,
-    n
-  ))
-    return !0;
-  for (let f = 1; f < r.length; f++) {
-    const y = {
-      x: r[f - 1].x * x,
-      y: r[f - 1].y * x
-    }, c = {
-      x: r[f].x * x,
-      y: r[f].y * x
-    }, d = y.x - c.x, o = y.y - c.y, s = Math.sqrt(d * d + o * o), t = ((u - y.x) * (c.x - y.x) + (n - y.y) * (c.y - y.y)) / Math.pow(s, 2);
-    if (t < 0 || t > 1)
-      continue;
-    const g = {
-      x: y.x + t * (c.x - y.x),
-      y: y.y + t * (c.y - y.y)
-    };
-    if (h(
-      g.x,
-      g.y,
-      a * x,
-      u,
-      n
-    ))
-      return !0;
-  }
-  return !1;
+import e from "./pointInCircle.js";
+//#region lib/collisions/pointOnLinePath.ts
+function t(t, n, r, i, a = 1) {
+	let o = n / 2;
+	if (e(t[0].x * a, t[0].y * a, o * a, r, i) || e(t[t.length - 1].x * a, t[t.length - 1].y * a, o * a, r, i)) return !0;
+	for (let n = 1; n < t.length; n++) {
+		let s = {
+			x: t[n - 1].x * a,
+			y: t[n - 1].y * a
+		}, c = {
+			x: t[n].x * a,
+			y: t[n].y * a
+		}, l = s.x - c.x, u = s.y - c.y, d = Math.sqrt(l * l + u * u), f = ((r - s.x) * (c.x - s.x) + (i - s.y) * (c.y - s.y)) / d ** 2;
+		if (f < 0 || f > 1) continue;
+		let p = {
+			x: s.x + f * (c.x - s.x),
+			y: s.y + f * (c.y - s.y)
+		};
+		if (e(p.x, p.y, o * a, r, i)) return !0;
+	}
+	return !1;
 }
-export {
-  q as default
-};
+//#endregion
+export { t as default };

package/dist/events/computeEventPositions.js

@@ -1,7 +1,14 @@
-function n(t, o, f) {
-  const a = -t.left - t.deltaLeft + o.pageX - o.target.offsetLeft, e = -t.top - t.deltaTop + o.pageY - o.target.offsetTop, l = { x: Math.floor(a / f / t.zoom), y: Math.floor(e / f / t.zoom) };
-  return { left: a, top: e, posOnMap: l };
+//#region lib/events/computeEventPositions.ts
+function e(e, t, n) {
+	let r = -e.left - e.deltaLeft + t.pageX - t.target.offsetLeft, i = -e.top - e.deltaTop + t.pageY - t.target.offsetTop;
+	return {
+		left: r,
+		top: i,
+		posOnMap: {
+			x: Math.floor(r / n / e.zoom),
+			y: Math.floor(i / n / e.zoom)
+		}
+	};
 }
-export {
-  n as default
-};
+//#endregion
+export { e as default };

package/dist/events/elementClick.js

@@ -1,18 +1,14 @@
-import c from "../collisions/collideElement.js";
-import u from "./computeEventPositions.js";
-function v(n, l, t, e) {
-  const {
-    left: i,
-    top: m,
-    posOnMap: r
-  } = u(e, n, t), o = c(n.nativeEvent, l, i, m, t, e.zoom);
-  return o !== null ? o : {
-    id: null,
-    element: null,
-    originalEvent: n.nativeEvent,
-    posOnMap: r
-  };
+import e from "../collisions/collideElement.js";
+import t from "./computeEventPositions.js";
+//#region lib/events/elementClick.ts
+function n(n, r, i, a) {
+	let { left: o, top: s, posOnMap: c } = t(a, n, i), l = e(n.nativeEvent, r, o, s, i, a.zoom);
+	return l === null ? {
+		id: null,
+		element: null,
+		originalEvent: n.nativeEvent,
+		posOnMap: c
+	} : l;
 }
-export {
-  v as default
-};
+//#endregion
+export { n as default };