canvas2d-wrapper 1.14.0 → 2.0.0

package/dist/assets/Canvas2D.css

@@ -0,0 +1 @@
+.canvas2d-wrapper:active{cursor:move}

package/dist/collisions/collideElement.d.ts

@@ -0,0 +1,3 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+import { default as CollideElementResultItem } from '../types/CollideElementResultItem';
+export default function collideElement(e: Event, elements: CanvasObject[], left: number, top: number, tileSize: number, zoom: number): CollideElementResultItem | null;

package/dist/collisions/collideElement.js

@@ -0,0 +1,53 @@
+import f from "../functions/calcTileSize.js";
+import u from "./inCircle.js";
+import p from "./inPoly.js";
+import x from "./inRect.js";
+import y from "./onLinePath.js";
+function I(o, c, a, s, m, d) {
+  const r = f(m, d), i = [];
+  for (const e of c) {
+    if (!e.hasCollisions)
+      continue;
+    const n = e.x * r, l = e.y * r;
+    switch (e.constructorName) {
+      case "Rect":
+      case "CanvasImage":
+        const t = e;
+        x(t, n, l, a, s, r, t.rotation) && i.push({
+          id: t.id,
+          element: e,
+          originalEvent: o,
+          posOnMap: { x: t.x, y: t.y }
+        });
+        break;
+      case "Circle":
+        u(e, n, l, a, s, r) && i.push({
+          id: e.id,
+          element: e,
+          originalEvent: o,
+          posOnMap: { x: e.x, y: e.y }
+        });
+        break;
+      case "Polygon":
+        p(e, n, l, a, s, r) && i.push({
+          id: e.id,
+          element: e,
+          originalEvent: o,
+          posOnMap: { x: e.x, y: e.y }
+        });
+        break;
+      case "LinePath":
+        y(e, a, s, r) && i.push({
+          id: e.id,
+          element: e,
+          originalEvent: o,
+          posOnMap: { x: e.x, y: e.y }
+        });
+        break;
+    }
+  }
+  return i.length === 0 ? null : (i.length === 1 || i.sort((e, n) => e.element.zIndex > n.element.zIndex ? -1 : e.element.zIndex < n.element.zIndex || e.id > n.id ? 1 : e.id < n.id ? -1 : 0), i[0]);
+}
+export {
+  I as default
+};

package/dist/collisions/inCircle.d.ts

@@ -0,0 +1,3 @@
+export default function inCircle(element: {
+    radius: number;
+}, x: number, y: number, left: number, top: number, localTileSize: number): boolean;

package/dist/collisions/inCircle.js

@@ -0,0 +1,6 @@
+function c(n, r, s, a, d, i) {
+  return (r - a) * (r - a) + (s - d) * (s - d) <= n.radius * i * (n.radius * i);
+}
+export {
+  c as default
+};

package/dist/collisions/inPoly.d.ts

@@ -0,0 +1,2 @@
+import { default as Polygon } from '../shapes/Polygon';
+export default function inPoly(element: Polygon, _x: number, y: number, mouseX: number, mouseY: number, localTileSize: number): boolean;

package/dist/collisions/inPoly.js

@@ -0,0 +1,20 @@
+function y(t, h, p, u, c, o) {
+  const x = t.points.length - 1;
+  let r = !1;
+  for (let s = 0; s < t.points.length; s++) {
+    const i = t.points[s].x * o, n = t.points[s].y * o;
+    if (u === i && c === n)
+      return !0;
+    const g = t.points[x].x * o, f = t.points[x].y * o;
+    if (n > p != f > p) {
+      const j = (u - i) * (f - n) - (g - i) * (c - n);
+      if (j === 0)
+        return !0;
+      j < 0 != f < n && (r = !r);
+    }
+  }
+  return r;
+}
+export {
+  y as default
+};

package/dist/collisions/inRect.d.ts

@@ -0,0 +1,2 @@
+import { default as Rect } from '../shapes/Rect';
+export default function inRect(element: Rect, x: number, y: number, left: number, top: number, localTileSize: number, rotation?: number): boolean;

package/dist/collisions/inRect.js

@@ -0,0 +1,12 @@
+function g(i, h, c, s, e, r, t) {
+  const u = i.width * r, f = i.height * r;
+  let n = s, d = e;
+  if (t) {
+    const M = h + u / 2, a = c + f / 2;
+    n = M + (s - M) * Math.cos(-t) - (e - a) * Math.sin(-t), d = a + (e - a) * Math.cos(-t) + (s - M) * Math.sin(-t);
+  }
+  return h <= n && n <= h + u && c <= d && d <= c + f;
+}
+export {
+  g as default
+};

package/dist/collisions/onLinePath.d.ts

@@ -0,0 +1,2 @@
+import { default as LinePath } from '../shapes/LinePath';
+export default function onLinePath(element: LinePath, left: number, top: number, localTileSize: number): boolean;

package/dist/collisions/onLinePath.js

@@ -0,0 +1,45 @@
+import f from "./inCircle.js";
+function q(t, x, y, n) {
+  const p = t.lineWidth;
+  if (f(
+    { radius: p },
+    t.points[0].x * n,
+    t.points[0].y * n,
+    x,
+    y,
+    n
+  ) || f(
+    { radius: p },
+    t.points[t.points.length - 1].x * n,
+    t.points[t.points.length - 1].y * n,
+    x,
+    y,
+    n
+  ))
+    return !0;
+  for (let r = 1; r < t.points.length; r++) {
+    const s = {
+      x: t.points[r - 1].x * n,
+      y: t.points[r - 1].y * n
+    }, o = {
+      x: t.points[r].x * n,
+      y: t.points[r].y * n
+    }, u = s.x - o.x, h = s.y - o.y, g = Math.sqrt(u * u + h * h), d = ((x - s.x) * (o.x - s.x) + (y - s.y) * (o.y - s.y)) / Math.pow(g, 2), i = {
+      x: s.x + d * (o.x - s.x),
+      y: s.y + d * (o.y - s.y)
+    };
+    if (f(
+      { radius: p },
+      i.x,
+      i.y,
+      x,
+      y,
+      n
+    ))
+      return !0;
+  }
+  return !1;
+}
+export {
+  q as default
+};

package/dist/events/computeEventPositions.d.ts

@@ -0,0 +1,9 @@
+import { default as Canvas2DState } from '../types/Canvas2DState';
+export default function computeEventPositions(props: Canvas2DState, event: React.MouseEvent, tileSize: number): {
+    left: number;
+    top: number;
+    posOnMap: {
+        x: number;
+        y: number;
+    };
+};

package/dist/events/computeEventPositions.js

@@ -0,0 +1,7 @@
+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 };
+}
+export {
+  n as default
+};

package/dist/events/elementClick.d.ts

@@ -0,0 +1,4 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+import { default as Canvas2DState } from '../types/Canvas2DState';
+import { default as CollideElementResultItem } from '../types/CollideElementResultItem';
+export default function elementClick(e: React.MouseEvent, elements: CanvasObject[], tileSize: number, state: Canvas2DState): CollideElementResultItem;

package/dist/events/elementClick.js

@@ -0,0 +1,18 @@
+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
+  };
+}
+export {
+  v as default
+};

package/dist/events/elementRightClick.d.ts

@@ -0,0 +1,4 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+import { default as Canvas2DState } from '../types/Canvas2DState';
+import { default as CollideElementResultItem } from '../types/CollideElementResultItem';
+export default function elementRightClick(e: MouseEvent, elements: CanvasObject[], tileSize: number, state: Canvas2DState): CollideElementResultItem;

package/dist/events/elementRightClick.js

@@ -0,0 +1,13 @@
+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) }
+  };
+}
+export {
+  c as default
+};

package/dist/events/mouseMove.d.ts

@@ -0,0 +1,5 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+import { default as Canvas2DState } from '../types/Canvas2DState';
+import { default as CollideElementResultItem } from '../types/CollideElementResultItem';
+import { default as Position2D } from '../types/Position2D';
+export default function mouseMove(event: React.PointerEvent, elements: CanvasObject[], tileSize: number, props: Canvas2DState, setProps: React.Dispatch<React.SetStateAction<Canvas2DState>>, lockXAxis: boolean, lockYAxis: boolean, dragObjects: boolean, onElementMoved?: (obj: CollideElementResultItem, x: number, y: number) => void, onHover?: (obj: CollideElementResultItem | null, pos: Position2D) => void): void;

package/dist/events/mouseMove.js

@@ -0,0 +1,37 @@
+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
+  });
+}
+export {
+  O as default
+};

package/dist/events/mouseWheel.d.ts

@@ -0,0 +1,2 @@
+import { default as Canvas2DState } from '../types/Canvas2DState';
+export default function mouseWheel(event: React.WheelEvent, props: Canvas2DState, setProps: React.Dispatch<React.SetStateAction<Canvas2DState>>, minZoom: number, maxZoom: number): void;

package/dist/events/mouseWheel.js

@@ -0,0 +1,10 @@
+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
+  });
+}
+export {
+  l as default
+};

package/dist/functions/calcRatioForMinimap.d.ts

@@ -0,0 +1,2 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+export default function calcRatioForMinimap(elements: CanvasObject[], width: number, height: number, minimapWidth: number, minimapHeight: number, tileSize: number): number;

package/dist/functions/calcRatioForMinimap.js

@@ -0,0 +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);
+}
+export {
+  h as default
+};

package/dist/functions/calcTileSize.d.ts

@@ -0,0 +1 @@
+export default function calcTileSize(tileSize: number, zoom: number): number;

package/dist/functions/calcTileSize.js

@@ -0,0 +1,6 @@
+function a(e, t) {
+  return e * t;
+}
+export {
+  a as default
+};

package/dist/functions/preloadImages.d.ts

@@ -0,0 +1 @@
+export default function preloadImages(images: string[]): void;

package/dist/functions/preloadImages.js

@@ -0,0 +1,7 @@
+function r(e) {
+  for (const a of e)
+    __canvas2dWrapper__.imgCache[a] = new Image(), __canvas2dWrapper__.imgCache[a].src = a;
+}
+export {
+  r as default
+};

package/dist/functions/sortElements.d.ts

@@ -0,0 +1,2 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+export default function sortElements(elements: CanvasObject[]): CanvasObject[];

package/dist/functions/sortElements.js

@@ -0,0 +1,18 @@
+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;
+}
+export {
+  f as default
+};

package/dist/generateTestData.d.ts

@@ -0,0 +1,2 @@
+import { default as CanvasObject } from './shapes/CanvasObject';
+export default function generateTestData(): CanvasObject[];

package/dist/generateTestData.js

@@ -0,0 +1,48 @@
+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;
+}
+export {
+  M as default
+};

package/dist/hooks/useGamepad.d.ts

@@ -0,0 +1 @@
+export default function useGamepad(): Gamepad | null;

package/dist/hooks/useGamepad.js

@@ -0,0 +1,13 @@
+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;
+}
+export {
+  u as default
+};

package/dist/hooks/useKeyboard.d.ts

@@ -0,0 +1,5 @@
+type KeyboardEntries = {
+    [id: string]: boolean;
+};
+export default function useKeyboard(): KeyboardEntries;
+export {};

package/dist/hooks/useKeyboard.js

@@ -0,0 +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;
+}
+export {
+  y as default
+};

package/dist/hooks/useMousePosition.d.ts

@@ -0,0 +1,6 @@
+type MousePos = {
+    x: number | null;
+    y: number | null;
+};
+export default function useMousePosition(includeTouch?: boolean): MousePos;
+export {};

package/dist/hooks/useMousePosition.js

@@ -0,0 +1,25 @@
+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;
+}
+export {
+  d as default
+};

package/dist/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export default function useWindowDimensions(): {
+    width: number;
+    height: number;
+};

package/dist/hooks/useWindowDimensions.js

@@ -0,0 +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
+  };
+}
+function r() {
+  const [e, n] = o(t());
+  return s(() => {
+    function i() {
+      n(t());
+    }
+    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, []), e;
+}
+export {
+  r as default
+};

package/dist/main.d.ts

@@ -0,0 +1,20 @@
+import { default as Canvas2D } from './Canvas2D';
+import { default as preloadImages } from './functions/preloadImages';
+import { default as useGamepad } from './hooks/useGamepad';
+import { default as useKeyboard } from './hooks/useKeyboard';
+import { default as useMousePosition } from './hooks/useMousePosition';
+import { default as useWindowDimensions } from './hooks/useWindowDimensions';
+import { default as CanvasImage } from './shapes/CanvasImage';
+import { default as CanvasObject } from './shapes/CanvasObject';
+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';
+declare global {
+    var __canvas2dWrapper__: {
+        imgCache: {
+            [key: string]: HTMLImageElement;
+        };
+    };
+}
+export { Canvas2D, CanvasImage, CanvasObject, Circle, LinePath, Polygon, preloadImages, Rect, useGamepad, useKeyboard, useMousePosition, useWindowDimensions };

package/dist/main.js

@@ -0,0 +1,26 @@
+import { default as o } from "./Canvas2D.js";
+import { default as r } from "./functions/preloadImages.js";
+import { default as s } from "./hooks/useGamepad.js";
+import { default as d } from "./hooks/useKeyboard.js";
+import { default as l } from "./hooks/useMousePosition.js";
+import { default as x } from "./hooks/useWindowDimensions.js";
+import { default as i } from "./shapes/CanvasImage.js";
+import { default as c } from "./shapes/CanvasObject.js";
+import { default as v } from "./shapes/Circle.js";
+import { default as b } from "./shapes/LinePath.js";
+import { default as D } from "./shapes/Polygon.js";
+import { default as h } from "./shapes/Rect.js";
+export {
+  o as Canvas2D,
+  i as CanvasImage,
+  c as CanvasObject,
+  v as Circle,
+  b as LinePath,
+  D as Polygon,
+  h as Rect,
+  r as preloadImages,
+  s as useGamepad,
+  d as useKeyboard,
+  l as useMousePosition,
+  x as useWindowDimensions
+};

package/dist/render/renderCanvas.d.ts

@@ -0,0 +1,3 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+import { default as Canvas2DState } from '../types/Canvas2DState';
+export default function renderCanvas(context: CanvasRenderingContext2D, width: number, height: number, elements: CanvasObject[], tileSize: number, state: Canvas2DState): void;

package/dist/render/renderCanvas.js

@@ -0,0 +1,35 @@
+import y from "../functions/calcTileSize.js";
+import u from "../shapes/CanvasImage.js";
+import h from "../shapes/Circle.js";
+import w from "../shapes/LinePath.js";
+import k from "../shapes/Polygon.js";
+import S from "../shapes/Rect.js";
+import g from "./renderCircle.js";
+import N from "./renderImage.js";
+import v from "./renderLinePath.js";
+import C from "./renderPolygon.js";
+import P from "./renderRect.js";
+const l = {
+  [new h({ id: "a", x: 0, y: 0, radius: 0 }).constructorName]: g,
+  [new u({ id: "a", x: 0, y: 0, src: "", width: 0, height: 0 }).constructorName]: N,
+  [new w({ id: "a", points: [{ x: 0, y: 0 }], lineWidth: 0, stroke: "" }).constructorName]: v,
+  [new k({ id: "a", points: [{ x: 0, y: 0 }] }).constructorName]: C,
+  [new S({ id: "a", x: 0, y: 0, width: 0, height: 0 }).constructorName]: P
+};
+function j(o, m, f, c, p, r) {
+  const a = r.left + r.deltaLeft, d = r.top + r.deltaTop;
+  let i = "", n = "";
+  const s = y(p, r.zoom);
+  o.clearRect(0, 0, m, f);
+  for (const e of c) {
+    e.fill !== i && typeof e.fill < "u" && (o.fillStyle = e.fill, i = e.fill), e.stroke !== n && typeof e.stroke < "u" && (o.strokeStyle = e.stroke, n = e.stroke);
+    const t = e.constructorName;
+    if (l[t])
+      l[t](o, e, a, d, s);
+    else
+      throw new Error("Unsupported shape type:" + t);
+  }
+}
+export {
+  j as default
+};

package/dist/render/renderCircle.d.ts

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

package/dist/render/renderCircle.js

@@ -0,0 +1,12 @@
+function d(f, r, i, s, a) {
+  f.beginPath(), f.arc(
+    i + r.x * a,
+    s + r.y * a,
+    r.radius * a,
+    0,
+    2 * Math.PI
+  ), r.fill && f.fill(), r.stroke && f.stroke();
+}
+export {
+  d as default
+};

package/dist/render/renderImage.d.ts

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