canvas2d-wrapper 2.2.1 → 2.3.0

package/dist/events/elementRightClick.js

@@ -1,13 +1,16 @@
-import p from "../collisions/collideElement.js";
-function c(l, r, n, o) {
-  const t = -o.left - o.deltaLeft + l.pageX - l.target.offsetLeft, e = -o.top - o.deltaTop + l.pageY - l.target.offsetTop, f = p(l, r, t, e, n, o.zoom);
-  return f !== null ? f : {
-    id: null,
-    element: null,
-    originalEvent: l,
-    posOnMap: { x: Math.floor(t / n / o.zoom), y: Math.floor(e / n / o.zoom) }
-  };
+import e from "../collisions/collideElement.js";
+//#region lib/events/elementRightClick.ts
+function t(t, n, r, i) {
+	let a = -i.left - i.deltaLeft + t.pageX - t.target.offsetLeft, o = -i.top - i.deltaTop + t.pageY - t.target.offsetTop, s = e(t, n, a, o, r, i.zoom);
+	return s === null ? {
+		id: null,
+		element: null,
+		originalEvent: t,
+		posOnMap: {
+			x: Math.floor(a / r / i.zoom),
+			y: Math.floor(o / r / i.zoom)
+		}
+	} : s;
 }
-export {
-  c as default
-};
+//#endregion
+export { t as default };

package/dist/events/mouseMove.js

@@ -1,37 +1,24 @@
-import X from "../collisions/collideElement.js";
-import b from "./computeEventPositions.js";
-const g = 1;
-let l = null;
-const s = 300;
-function O(t, c, f, e, u, T, Y, r, m, n) {
-  const i = {
-    ...e
-  }, {
-    left: a,
-    top: o,
-    posOnMap: d
-  } = b(e, t, f);
-  if (t.nativeEvent.buttons === g && e.prevX) {
-    let E = !1;
-    r && (l === null && (l = X(t.nativeEvent, c, a, o, f, e.zoom)), l !== null && l.element.draggable && (l.element.x = -e.left - e.deltaLeft + (t.clientX - e.boundingClientRect.left) - (l.element.width ?? 0) / 2, l.element.y = -e.top - e.deltaLeft + (t.clientY - e.boundingClientRect.top) - (l.element.height ?? 0) / 2, E = !0, m && m(
-      l,
-      t.screenX - e.prevX,
-      t.screenY - e.prevY
-    ), n && n(null, d))), E || (T || (i.left += t.screenX - e.prevX), Y || (i.top += t.screenY - e.prevY)), t.nativeEvent.pointerType !== "mouse" && setTimeout(() => {
-      l = null, u({
-        ...i,
-        prevX: null,
-        prevY: null
-      });
-    }, s);
-  } else
-    n && n(X(t.nativeEvent, c, a, o, f, e.zoom), d), l = null;
-  u({
-    ...i,
-    prevX: t.screenX,
-    prevY: t.screenY
-  });
+import e from "../collisions/collideElement.js";
+import t from "./computeEventPositions.js";
+//#region lib/events/mouseMove.ts
+var n = 1, r = null, i = 300;
+function a(a, o, s, c, l, u, d, f, p, m) {
+	let h = { ...c }, { left: g, top: _, posOnMap: v } = t(c, a, s);
+	if (a.nativeEvent.buttons === n && c.prevX) {
+		let t = !1;
+		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(() => {
+			r = null, l({
+				...h,
+				prevX: null,
+				prevY: null
+			});
+		}, i);
+	} else m && m(e(a.nativeEvent, o, g, _, s, c.zoom), v), r = null;
+	l({
+		...h,
+		prevX: a.screenX,
+		prevY: a.screenY
+	});
 }
-export {
-  O as default
-};
+//#endregion
+export { a as default };

package/dist/events/mouseWheel.js

@@ -1,10 +1,11 @@
-function l(t, E, o, a, L) {
-  let e = E.zoom;
-  t.deltaY < 0 ? e += 0.05 : e -= 0.05, e = Math.max(e, a), e = Math.min(e, L), o({
-    ...E,
-    zoom: e
-  });
+//#region lib/events/mouseWheel.ts
+var e = .05;
+function t(t, n, r, i, a) {
+	let o = n.zoom;
+	t.deltaY < 0 ? o += e : o -= e, o = Math.max(o, i), o = Math.min(o, a), r({
+		...n,
+		zoom: o
+	});
 }
-export {
-  l as default
-};
+//#endregion
+export { t as default };

package/dist/functions/calcRatioForMinimap.js

@@ -1,15 +1,15 @@
-function h(m, r, o, p, x, n) {
-  const c = m.map((a) => {
-    const t = a;
-    return Array.isArray(t.points) ? t.points.map((s) => s.x * n) : [a.x * n];
-  }).flat(), M = Math.min(...c), u = Math.max(...c);
-  r = Math.max(2 * u, -2 * M, r);
-  const i = m.map((a) => {
-    const t = a;
-    return Array.isArray(t.points) ? t.points.map((s) => s.y * n) : [a.y * n];
-  }).flat(), f = Math.min(...i), y = Math.max(...i);
-  return o = Math.max(2 * y, -2 * f, o), Math.max(r / p, o / x);
+//#region lib/functions/calcRatioForMinimap.ts
+function e(e, t, n, r, i, a) {
+	let o = e.map((e) => {
+		let t = e;
+		return Array.isArray(t.points) ? t.points.map((e) => e.x * a) : [e.x * a];
+	}).flat(), s = Math.min(...o), c = Math.max(...o);
+	t = Math.max(2 * c, -2 * s, t);
+	let l = e.map((e) => {
+		let t = e;
+		return Array.isArray(t.points) ? t.points.map((e) => e.y * a) : [e.y * a];
+	}).flat(), u = Math.min(...l), d = Math.max(...l);
+	return n = Math.max(2 * d, -2 * u, n), Math.max(t / r, n / i);
 }
-export {
-  h as default
-};
+//#endregion
+export { e as default };

package/dist/functions/calcTileSize.js

@@ -1,6 +1,6 @@
-function a(e, t) {
-  return e * t;
+//#region lib/functions/calcTileSize.ts
+function e(e, t) {
+	return e * t;
 }
-export {
-  a as default
-};
+//#endregion
+export { e as default };

package/dist/functions/preloadImages.js

@@ -1,7 +1,6 @@
-function r(e) {
-  for (const a of e)
-    __canvas2dWrapper__.imgCache[a] = new Image(), __canvas2dWrapper__.imgCache[a].src = a;
+//#region lib/functions/preloadImages.ts
+function e(e) {
+	for (let t of e) __canvas2dWrapper__.imgCache[t] = new Image(), __canvas2dWrapper__.imgCache[t].src = t;
 }
-export {
-  r as default
-};
+//#endregion
+export { e as default };

package/dist/functions/sortElements.js

@@ -1,18 +1,14 @@
-function f(t) {
-  return t.sort((r, e) => {
-    if (r.zIndex !== e.zIndex)
-      return r.zIndex - e.zIndex;
-    if (r.fill === e.fill && r.stroke && e.stroke)
-      return r.stroke === e.stroke ? 0 : r.stroke < e.stroke ? 1 : -1;
-    if (r.fill && e.fill) {
-      if (r.fill < e.fill)
-        return 1;
-      if (r.fill > e.fill)
-        return -1;
-    }
-    return 0;
-  }), t;
+//#region lib/functions/sortElements.ts
+function e(e) {
+	return e.sort((e, t) => {
+		if (e.zIndex !== t.zIndex) return e.zIndex - t.zIndex;
+		if (e.fill === t.fill && e.stroke && t.stroke) return e.stroke === t.stroke ? 0 : e.stroke < t.stroke ? 1 : -1;
+		if (e.fill && t.fill) {
+			if (e.fill < t.fill) return 1;
+			if (e.fill > t.fill) return -1;
+		}
+		return 0;
+	}), e;
 }
-export {
-  f as default
-};
+//#endregion
+export { e as default };

package/dist/generateTestData.js

@@ -1,48 +1,47 @@
-import l from "./shapes/Circle.js";
-import e from "./shapes/Polygon.js";
-import i from "./shapes/Rect.js";
-function M() {
-  const r = [];
-  for (let o = 0; o < 998; o++) {
-    let t = null;
-    Math.random() > 0.5 ? t = new i({
-      id: o.toString(),
-      x: 500 - Math.round(Math.random() * 1e3),
-      y: 500 - Math.round(Math.random() * 1e3),
-      width: 32,
-      height: 32,
-      fill: Math.random() > 0.5 ? "black" : void 0,
-      stroke: Math.random() > 0.5 ? "black" : void 0,
-      draggable: !0
-    }) : t = new l({
-      id: o.toString(),
-      x: 500 - Math.round(Math.random() * 1e3),
-      y: 500 - Math.round(Math.random() * 1e3),
-      radius: 16,
-      fill: Math.random() > 0.5 ? "black" : void 0,
-      stroke: Math.random() > 0.5 ? "black" : void 0
-    }), !t.fill && !t.stroke && (t.fill = "green"), r.push(t);
-  }
-  const a = [];
-  for (let o = 0; o < 5; o++)
-    a.push({
-      x: 500 - Math.round(Math.random() * 1e3),
-      y: 500 - Math.round(Math.random() * 1e3)
-    });
-  const n = new e({
-    id: "poly",
-    points: a,
-    stroke: "red"
-  });
-  r.push(n);
-  const d = new e({
-    id: "poly",
-    points: a,
-    fill: "orange",
-    zIndex: -1
-  });
-  return r.push(d), r;
+import e from "./shapes/Circle.js";
+import t from "./shapes/Polygon.js";
+import n from "./shapes/Rect.js";
+//#region lib/generateTestData.ts
+function r() {
+	let r = [];
+	for (let t = 0; t < 998; t++) {
+		let i = null;
+		i = Math.random() > .5 ? new n({
+			id: t.toString(),
+			x: 500 - Math.round(Math.random() * 1e3),
+			y: 500 - Math.round(Math.random() * 1e3),
+			width: 32,
+			height: 32,
+			fill: Math.random() > .5 ? "black" : void 0,
+			stroke: Math.random() > .5 ? "black" : void 0,
+			draggable: !0
+		}) : new e({
+			id: t.toString(),
+			x: 500 - Math.round(Math.random() * 1e3),
+			y: 500 - Math.round(Math.random() * 1e3),
+			radius: 16,
+			fill: Math.random() > .5 ? "black" : void 0,
+			stroke: Math.random() > .5 ? "black" : void 0
+		}), !i.fill && !i.stroke && (i.fill = "green"), r.push(i);
+	}
+	let i = [];
+	for (let e = 0; e < 5; e++) i.push({
+		x: 500 - Math.round(Math.random() * 1e3),
+		y: 500 - Math.round(Math.random() * 1e3)
+	});
+	let a = new t({
+		id: "poly",
+		points: i,
+		stroke: "red"
+	});
+	r.push(a);
+	let o = new t({
+		id: "poly",
+		points: i,
+		fill: "orange",
+		zIndex: -1
+	});
+	return r.push(o), r;
 }
-export {
-  M as default
-};
+//#endregion
+export { r as default };

package/dist/hooks/useGamepad.js

@@ -1,13 +1,9 @@
-import { useState as r, useEffect as n } from "react";
-let e;
-const l = 15;
-function u() {
-  const [t, a] = r(null);
-  return n(() => (clearInterval(e), e = setInterval(
-    () => a(navigator.getGamepads()[0]),
-    l
-  ), () => clearInterval(e)), []), t;
+import { useEffect as e, useState as t } from "react";
+//#region lib/hooks/useGamepad.ts
+var n, r = 15;
+function i() {
+	let [i, a] = t(null);
+	return e(() => (clearInterval(n), n = setInterval(() => a(navigator.getGamepads()[0]), r), () => clearInterval(n)), []), i;
 }
-export {
-  u as default
-};
+//#endregion
+export { i as default };

package/dist/hooks/useKeyboard.js

@@ -1,19 +1,19 @@
-import { useState as s, useEffect as d } from "react";
-function y() {
-  const [e, n] = s({});
-  return d(() => {
-    const r = (t) => {
-      e[t.key] = !0, n(JSON.parse(JSON.stringify(e)));
-    };
-    document.addEventListener("keydown", r);
-    const o = (t) => {
-      e[t.key] = !1, n(JSON.parse(JSON.stringify(e)));
-    };
-    return document.addEventListener("keyup", o), () => {
-      document.removeEventListener("keydown", r), document.removeEventListener("keyup", o);
-    };
-  }, []), e;
+import { useEffect as e, useState as t } from "react";
+//#region lib/hooks/useKeyboard.ts
+function n() {
+	let [n, r] = t({});
+	return e(() => {
+		let e = (e) => {
+			n[e.key] = !0, r(JSON.parse(JSON.stringify(n)));
+		};
+		document.addEventListener("keydown", e);
+		let t = (e) => {
+			n[e.key] = !1, r(JSON.parse(JSON.stringify(n)));
+		};
+		return document.addEventListener("keyup", t), () => {
+			document.removeEventListener("keydown", e), document.removeEventListener("keyup", t);
+		};
+	}, []), n;
 }
-export {
-  y as default
-};
+//#endregion
+export { n as default };

package/dist/hooks/useMousePosition.js

@@ -1,25 +1,26 @@
-import { useState as m, useEffect as v } from "react";
-function d(o = !0) {
-  const [
-    u,
-    r
-  ] = m({ x: null, y: null });
-  return v(() => {
-    const e = (c) => {
-      const t = c;
-      let n, s;
-      if (t.touches) {
-        const i = t.touches[0];
-        [n, s] = [i.clientX, i.clientY];
-      } else
-        [n, s] = [t.clientX, t.clientY];
-      r({ x: n, y: s });
-    };
-    return window.addEventListener("mousemove", e), o && window.addEventListener("touchmove", e), () => {
-      window.removeEventListener("mousemove", e), o && window.removeEventListener("touchmove", e);
-    };
-  }, [o]), u;
+import { useEffect as e, useState as t } from "react";
+//#region lib/hooks/useMousePosition.ts
+function n(n = !0) {
+	let [r, i] = t({
+		x: null,
+		y: null
+	});
+	return e(() => {
+		let e = (e) => {
+			let t = e, n, r;
+			if (t.touches) {
+				let e = t.touches[0];
+				[n, r] = [e.clientX, e.clientY];
+			} else [n, r] = [t.clientX, t.clientY];
+			i({
+				x: n,
+				y: r
+			});
+		};
+		return window.addEventListener("mousemove", e), n && window.addEventListener("touchmove", e), () => {
+			window.removeEventListener("mousemove", e), n && window.removeEventListener("touchmove", e);
+		};
+	}, [n]), r;
 }
-export {
-  d as default
-};
+//#endregion
+export { n as default };

package/dist/hooks/useWindowDimensions.js

@@ -1,20 +1,20 @@
-import { useState as o, useEffect as s } from "react";
-function t() {
-  const { clientWidth: e, clientHeight: n } = document.documentElement;
-  return {
-    width: e,
-    height: n
-  };
+import { useEffect as e, useState as t } from "react";
+//#region lib/hooks/useWindowDimensions.ts
+function n() {
+	let { clientWidth: e, clientHeight: t } = document.documentElement;
+	return {
+		width: e,
+		height: t
+	};
 }
 function r() {
-  const [e, n] = o(t());
-  return s(() => {
-    function i() {
-      n(t());
-    }
-    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
-  }, []), e;
+	let [r, i] = t(n());
+	return e(() => {
+		function e() {
+			i(n());
+		}
+		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), r;
 }
-export {
-  r as default
-};
+//#endregion
+export { r as default };

package/dist/{main.d.ts → lib/main.d.ts}

@@ -18,6 +18,7 @@ import { default as Circle } from './shapes/Circle';
 import { default as LinePath } from './shapes/LinePath';
 import { default as Polygon } from './shapes/Polygon';
 import { default as Rect } from './shapes/Rect';
+import { default as Text } from './shapes/Text';
 import { default as Canvas2DProps } from './types/Canvas2DProps';
 import { default as CollideElementResultItem } from './types/CollideElementResultItem';
 import { default as Position2D } from './types/Position2D';
@@ -30,7 +31,7 @@ declare global {
     };
 }
 export { Canvas2D };
-export { CanvasImage, CanvasObject, Circle, LinePath, Polygon, Rect };
+export { CanvasImage, CanvasObject, Circle, LinePath, Polygon, Rect, Text };
 export { lineWithLine, pointInCircle, pointInPolygon, pointInRectangle, pointOnLinePath };
 export { preloadImages };
 export { useGamepad, useKeyboard, useMousePosition, useWindowDimensions };

package/dist/lib/render/renderText.d.ts

@@ -0,0 +1,2 @@
+import { default as Text } from '../shapes/Text';
+export default function renderText(context: CanvasRenderingContext2D, element: Text, left: number, top: number, localTileSize: number): void;

package/dist/lib/shapes/Text.d.ts

@@ -0,0 +1,38 @@
+import { default as ColoredCanvasObject } from './ColoredCanvasObject';
+export default class Text extends ColoredCanvasObject {
+    text: string;
+    maxWidth?: number;
+    font?: string;
+    /**
+     * Represents an Image that will be created on the canvas.
+     * Note: a cache to prevent too much loading is implemented, you can create as much
+     * images as you want of the same source without any performance issue.
+     *
+     * @param      {string|number}  id 				Identifier (used in click callback)
+     * @param      {number}			x       		Left coordinate of top-left corner of picture in canvas
+     * @param      {number}			y       		Top coordinate of top-left corner of picture in canvas
+     * @param      {number}  		text    		Text to show
+     * @param      {number}  		maxWidth  		Maximum width of this text
+     * @param      {number}  		font  			Text font
+     * @param      {string}      	fill 			DOMString, CanvasGradient or CanvsPattern representing what should be put in CanvasRenderingContext2D.fillStyle
+     * @param      {string}      	stroke 			DOMString, CanvasGradient or CanvsPattern representing what should be put in CanvasRenderingContext2D.strokeStyle
+     * @param      {number}      	zIndex 			Stack order of the element
+     * @param      {boolean}      	hasCollisions 	Does the object have collisions ?
+     * @param      {number}      	rotation 		The rotation in radians
+     */
+    constructor({ id, x, y, text, maxWidth, font, fill, stroke, zIndex, draggable, hasCollisions }: {
+        id: string;
+        x: number;
+        y: number;
+        text: string;
+        maxWidth?: number;
+        font?: string;
+        fill?: string;
+        stroke?: string;
+        zIndex?: number;
+        draggable?: boolean;
+        hasCollisions?: boolean;
+        rotation?: number;
+    });
+    get constructorName(): string;
+}

package/dist/main.js

@@ -1,42 +1,22 @@
-import { default as o } from "./Canvas2D.js";
-import { default as r } from "./collisions/lineWithLine.js";
-import { default as s } from "./collisions/pointInCircle.js";
-import { default as n } from "./collisions/pointInPolygon.js";
-import { default as p } from "./collisions/pointInRectangle.js";
-import { default as d } from "./collisions/pointOnLinePath.js";
-import { default as i } from "./functions/preloadImages.js";
-import { default as L } from "./hooks/useGamepad.js";
-import { default as C } from "./hooks/useKeyboard.js";
-import { default as P } from "./hooks/useMousePosition.js";
-import { default as v } from "./hooks/useWindowDimensions.js";
-import { default as O } from "./maths/getLineLength.js";
-import { default as D } from "./maths/normalOnLine.js";
-import { default as W } from "./maths/segmentAngle.js";
-import { default as w } from "./shapes/CanvasImage.js";
-import { default as G } from "./shapes/CanvasObject.js";
-import { default as M } from "./shapes/Circle.js";
-import { default as q } from "./shapes/LinePath.js";
-import { default as B } from "./shapes/Polygon.js";
-import { default as F } from "./shapes/Rect.js";
-export {
-  o as Canvas2D,
-  w as CanvasImage,
-  G as CanvasObject,
-  M as Circle,
-  q as LinePath,
-  B as Polygon,
-  F as Rect,
-  O as getLineLength,
-  r as lineWithLine,
-  D as normalOnLine,
-  s as pointInCircle,
-  n as pointInPolygon,
-  p as pointInRectangle,
-  d as pointOnLinePath,
-  i as preloadImages,
-  W as segmentAngle,
-  L as useGamepad,
-  C as useKeyboard,
-  P as useMousePosition,
-  v as useWindowDimensions
-};
+import e from "./collisions/pointInCircle.js";
+import t from "./collisions/pointInPolygon.js";
+import n from "./collisions/pointInRectangle.js";
+import r from "./collisions/pointOnLinePath.js";
+import i from "./shapes/CanvasObject.js";
+import a from "./shapes/CanvasImage.js";
+import o from "./shapes/Circle.js";
+import s from "./shapes/LinePath.js";
+import c from "./shapes/Polygon.js";
+import l from "./shapes/Rect.js";
+import u from "./shapes/Text.js";
+import d from "./Canvas2D.js";
+import f from "./collisions/lineWithLine.js";
+import p from "./functions/preloadImages.js";
+import m from "./hooks/useGamepad.js";
+import h from "./hooks/useKeyboard.js";
+import g from "./hooks/useMousePosition.js";
+import _ from "./hooks/useWindowDimensions.js";
+import v from "./maths/getLineLength.js";
+import y from "./maths/normalOnLine.js";
+import b from "./maths/segmentAngle.js";
+export { d as Canvas2D, a as CanvasImage, i as CanvasObject, o as Circle, s as LinePath, c as Polygon, l as Rect, u as Text, v as getLineLength, f as lineWithLine, y as normalOnLine, e as pointInCircle, t as pointInPolygon, n as pointInRectangle, r as pointOnLinePath, p as preloadImages, b as segmentAngle, m as useGamepad, h as useKeyboard, g as useMousePosition, _ as useWindowDimensions };

package/dist/maths/getLineLength.js

@@ -1,7 +1,7 @@
-function i(t, n) {
-  const e = n.x - t.x, f = n.y - t.y;
-  return Math.sqrt(e * e + f * f);
+//#region lib/maths/getLineLength.ts
+function e(e, t) {
+	let n = t.x - e.x, r = t.y - e.y;
+	return Math.sqrt(n * n + r * r);
 }
-export {
-  i as default
-};
+//#endregion
+export { e as default };

package/dist/maths/normalOnLine.js

@@ -1,7 +1,10 @@
-function f(n, t, o = !1) {
-  const s = t.x - n.x, x = t.y - n.y, y = Math.hypot(s, x), c = s / y, u = x / y, a = o ? u : -u, d = o ? -c : c;
-  return { x: a, y: d };
+//#region lib/maths/normalOnLine.ts
+function e(e, t, n = !1) {
+	let r = t.x - e.x, i = t.y - e.y, a = Math.hypot(r, i), o = r / a, s = i / a;
+	return {
+		x: n ? s : -s,
+		y: n ? -o : o
+	};
 }
-export {
-  f as default
-};
+//#endregion
+export { e as default };

package/dist/maths/segmentAngle.js

@@ -1,7 +1,7 @@
-function r(t, n) {
-  const e = n.x - t.x, a = n.y - t.y;
-  return e === 0 && a === 0 ? 0 : Math.atan2(a, e) + Math.PI / 2;
+//#region lib/maths/segmentAngle.ts
+function e(e, t) {
+	let n = t.x - e.x, r = t.y - e.y;
+	return n === 0 && r === 0 ? 0 : Math.atan2(r, n) + Math.PI / 2;
 }
-export {
-  r as default
-};
+//#endregion
+export { e as default };