canvas2d-wrapper 1.14.1 → 2.0.0

package/dist/Canvas2D.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { Canvas2DProps } from './types/Canvas2DProps';
+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, minimapFilter, ...otherProps }: Canvas2DProps): React.JSX.Element;

package/dist/Canvas2D.js

@@ -0,0 +1,158 @@
+import { jsxs as J, Fragment as K, jsx as B } from "react/jsx-runtime";
+import { useState as O, useCallback as j, useEffect as p } from "react";
+import Q from "./events/elementClick.js";
+import S from "./events/elementRightClick.js";
+import U from "./events/mouseMove.js";
+import V from "./events/mouseWheel.js";
+import $ from "./functions/calcRatioForMinimap.js";
+import z from "./functions/sortElements.js";
+import k from "./render/renderCanvas.js";
+import './assets/Canvas2D.css';const l = {};
+function re({
+  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: X = !1,
+  deltaLeft: b = 0,
+  deltaTop: g = 0,
+  showMinimap: F = !1,
+  minimapWidth: m = 240,
+  minimapHeight: i = 120,
+  minimapFilter: Y = (t) => !0,
+  ...f
+}) {
+  l[f.id] || (l[f.id] = []);
+  const [t, c] = O({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    zoom: 0,
+    deltaTop: g,
+    deltaLeft: b,
+    prevX: null,
+    prevY: null
+  }), _ = 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
+      }));
+    }
+  }, []), y = 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) => U(e, l[f.id], a, t, c, N, T, X, D, A));
+  const G = (e) => {
+    E && E(e.nativeEvent), d !== v && V(e, t, c, d, v);
+  };
+  let M;
+  return x && (M = (e) => x(Q(e, l[f.id], a, t))), p(() => {
+    function e(n) {
+      n.preventDefault(), u && u(S(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 = z(l[f.id]);
+      if (t.context && k(
+        t.context,
+        o,
+        r,
+        s,
+        a,
+        t
+      ), F && t.minimapContext) {
+        const w = s.filter(Y), I = $(w, o, r, m, i, a);
+        k(
+          t.minimapContext,
+          m,
+          i,
+          w,
+          a / I,
+          { 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__ */ J(K, { children: [
+    /* @__PURE__ */ B(
+      "canvas",
+      {
+        ref: _,
+        width: o,
+        height: r,
+        onPointerMove: L,
+        onWheel: G,
+        onClick: M,
+        className: "canvas2d-wrapper",
+        ...f
+      }
+    ),
+    F && /* @__PURE__ */ B(
+      "canvas",
+      {
+        ref: y,
+        width: m,
+        height: i,
+        className: "canvas2d-wrapper-minimap"
+      }
+    )
+  ] });
+}
+export {
+  re as default
+};