canvas2d-wrapper 1.14.0 → 2.0.0

package/dist/render/renderImage.js

@@ -0,0 +1,41 @@
+window.__canvas2dWrapper__ = { imgCache: {} };
+function p(a, s, g, c, h) {
+  __canvas2dWrapper__.imgCache[s.src] || (__canvas2dWrapper__.imgCache[s.src] = new Image(), __canvas2dWrapper__.imgCache[s.src].src = s.src);
+  const i = g + s.x * h, d = c + s.y * h, r = s.width * h, _ = s.height * h;
+  s.rotation ? (a.save(), a.translate(i + r / 2, d + _ / 2), a.rotate(s.rotation), !s.sx || !s.sy || !s.swidth || !s.sheight ? a.drawImage(
+    __canvas2dWrapper__.imgCache[s.src],
+    -r / 2,
+    -_ / 2,
+    r,
+    _
+  ) : a.drawImage(
+    __canvas2dWrapper__.imgCache[s.src],
+    s.sx,
+    s.sy,
+    s.swidth,
+    s.sheight,
+    -s.swidth / 2,
+    -s.sheight / 2,
+    r,
+    _
+  ), a.restore()) : !s.sx || !s.sy || !s.swidth || !s.sheight ? a.drawImage(
+    __canvas2dWrapper__.imgCache[s.src],
+    i,
+    d,
+    r,
+    _
+  ) : a.drawImage(
+    __canvas2dWrapper__.imgCache[s.src],
+    s.sx,
+    s.sy,
+    s.swidth,
+    s.sheight,
+    i,
+    d,
+    r,
+    _
+  );
+}
+export {
+  p as default
+};

package/dist/render/renderLinePath.d.ts

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

package/dist/render/renderLinePath.js

@@ -0,0 +1,27 @@
+function L(n, r, g, l, i) {
+  const p = n.lineWidth, o = r.points.map((s) => ({
+    x: g + s.x * i,
+    y: l + s.y * i
+  }));
+  if (!(o.length < 2)) {
+    if (n.beginPath(), n.moveTo(o[0].x, o[0].y), r.smoothCorners && r.smoothCornersRadius) {
+      for (let s = 1; s < o.length - 1; s++) {
+        const h = o[s - 1], t = o[s], y = o[s + 1], d = t.x - h.x, f = t.y - h.y, a = y.x - t.x, u = y.y - t.y, c = Math.hypot(d, f), x = Math.hypot(a, u), R = d / c * r.smoothCornersRadius, W = f / c * r.smoothCornersRadius, v = a / x * r.smoothCornersRadius, T = u / x * r.smoothCornersRadius, e = {
+          x: t.x - R,
+          y: t.y - W
+        }, C = {
+          x: t.x + v,
+          y: t.y + T
+        };
+        n.lineTo(e.x, e.y), n.quadraticCurveTo(t.x, t.y, C.x, C.y);
+      }
+      n.lineTo(o[o.length - 1].x, o[o.length - 1].y);
+    } else
+      for (let s = 1; s < o.length; s++)
+        n.lineTo(o[s].x, o[s].y);
+    n.lineWidth = r.lineWidth * i, n.stroke(), n.lineWidth = p;
+  }
+}
+export {
+  L as default
+};

package/dist/render/renderPolygon.d.ts

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

package/dist/render/renderPolygon.js

@@ -0,0 +1,18 @@
+function y(i, s, r, f, o) {
+  i.beginPath(), i.moveTo(
+    r + s.points[0].x * o,
+    f + s.points[0].y * o
+  );
+  for (let p = 0; p < s.points.length; p++)
+    i.lineTo(
+      r + s.points[p].x * o,
+      f + s.points[p].y * o
+    );
+  i.lineTo(
+    r + s.points[0].x * o,
+    f + s.points[0].y * o
+  ), s.fill && i.fill(), s.stroke && i.stroke();
+}
+export {
+  y as default
+};

package/dist/render/renderRect.d.ts

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

package/dist/render/renderRect.js

@@ -0,0 +1,27 @@
+function d(r, s, a, R, o) {
+  const t = a + s.x * o, h = R + s.y * o, i = s.width * o, f = s.height * o;
+  s.rotation ? (r.save(), r.translate(t + i / 2, h + f / 2), r.rotate(s.rotation), s.fill && r.fillRect(
+    -i / 2,
+    -i / 2,
+    i,
+    f
+  ), s.stroke && r.strokeRect(
+    -i / 2,
+    -i / 2,
+    i,
+    f
+  ), r.restore()) : (s.fill && r.fillRect(
+    t,
+    h,
+    i,
+    f
+  ), s.stroke && r.strokeRect(
+    t,
+    h,
+    i,
+    f
+  ));
+}
+export {
+  d as default
+};

package/dist/shapes/CanvasImage.d.ts

@@ -0,0 +1,40 @@
+import { default as CanvasObject } from './CanvasObject';
+export default class CanvasImage extends CanvasObject {
+    src: string;
+    width: number;
+    height: number;
+    rotation?: number;
+    swidth?: number;
+    sheight?: number;
+    sx?: number;
+    sy?: number;
+    /**
+     * 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}  		width   Picture width in canvas
+     * @param      {number}  		height  Picture height in canvas
+     * @param      {string}      	src 	Image source link
+     * @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, width, height, src, zIndex, draggable, hasCollisions, rotation }: {
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        src: string;
+        zIndex?: number;
+        draggable?: boolean;
+        hasCollisions?: boolean;
+        rotation?: number;
+    });
+    crop(sx: number, swidth: number, sheight: number): void;
+    get constructorName(): string;
+}

package/dist/shapes/CanvasImage.js

@@ -0,0 +1,38 @@
+import g from "./CanvasObject.js";
+class u extends g {
+  src;
+  width;
+  height;
+  rotation;
+  swidth;
+  sheight;
+  sx;
+  sy;
+  /**
+   * 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}  		width   Picture width in canvas
+   * @param      {number}  		height  Picture height in canvas
+   * @param      {string}      	src 	Image source link
+   * @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: t, x: s, y: h, width: i, height: e, src: r, zIndex: a, draggable: o, hasCollisions: c, rotation: n }) {
+    super(t, s, h, a, o, c), this.width = i, this.height = e, this.src = r, this.rotation = n;
+  }
+  crop(t, s, h) {
+    this.sx = t, this.sy = t, this.swidth = s, this.sheight = h;
+  }
+  get constructorName() {
+    return "CanvasImage";
+  }
+}
+export {
+  u as default
+};

package/dist/shapes/CanvasObject.d.ts

@@ -0,0 +1,14 @@
+export default class CanvasObject {
+    id: string;
+    x: number;
+    y: number;
+    draggable?: boolean;
+    hasCollisions?: boolean;
+    ['z-index']?: number;
+    fill?: string;
+    stroke?: string;
+    constructor(id: string, x: number, y: number, zIndex?: number, draggable?: boolean, hasCollisions?: boolean);
+    set zIndex(zIndex: number);
+    get zIndex(): number;
+    get constructorName(): string;
+}

package/dist/shapes/CanvasObject.js

@@ -0,0 +1,27 @@
+class d {
+  id;
+  x;
+  y;
+  draggable;
+  hasCollisions;
+  "z-index";
+  fill;
+  // Always undefined here but needed for typescript to work with renderCanvas() sorting
+  stroke;
+  // Always undefined here but needed for typescript to work with renderCanvas() sorting
+  constructor(s, t, e, i, a, n) {
+    this.id = s, this.x = t, this.y = e, this["z-index"] = i, this.draggable = a, this.hasCollisions = n;
+  }
+  set zIndex(s) {
+    this["z-index"] = s;
+  }
+  get zIndex() {
+    return this["z-index"] || 0;
+  }
+  get constructorName() {
+    return "CanvasObject";
+  }
+}
+export {
+  d as default
+};

package/dist/shapes/Circle.d.ts

@@ -0,0 +1,28 @@
+import { default as ColoredCanvasObject } from './ColoredCanvasObject';
+export default class Circle extends ColoredCanvasObject {
+    radius: number;
+    /**
+     * Represents a Rectangle that will be created on the canvas.
+     *
+     * @param      {string|number}  id 		Identifier (used in click callback)
+     * @param      {number}			x       Left coordinate of circle center in canvas
+     * @param      {number}			y       Top coordinate of circle center in canvas
+     * @param      {number}  		radius  Circle radius in canvas
+     * @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 ?
+     */
+    constructor({ id, x, y, radius, fill, stroke, zIndex, draggable, hasCollisions }: {
+        id: string;
+        x: number;
+        y: number;
+        radius: number;
+        fill?: string;
+        stroke?: string;
+        zIndex?: number;
+        draggable?: boolean;
+        hasCollisions?: boolean;
+    });
+    get constructorName(): string;
+}

package/dist/shapes/Circle.js

@@ -0,0 +1,25 @@
+import d from "./ColoredCanvasObject.js";
+class C extends d {
+  radius;
+  /**
+   * Represents a Rectangle that will be created on the canvas.
+   *
+   * @param      {string|number}  id 		Identifier (used in click callback)
+   * @param      {number}			x       Left coordinate of circle center in canvas
+   * @param      {number}			y       Top coordinate of circle center in canvas
+   * @param      {number}  		radius  Circle radius in canvas
+   * @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 ?
+   */
+  constructor({ id: r, x: e, y: t, radius: s, fill: o, stroke: a, zIndex: c, draggable: u, hasCollisions: i }) {
+    super(r, e, t, o, a, c, u, i), this.radius = s;
+  }
+  get constructorName() {
+    return "Circle";
+  }
+}
+export {
+  C as default
+};

package/dist/shapes/ColoredCanvasObject.d.ts

@@ -0,0 +1,7 @@
+import { default as CanvasObject } from './CanvasObject';
+export default class ColoredCanvasObject extends CanvasObject {
+    fill?: string;
+    stroke?: string;
+    constructor(id: string, x: number, y: number, fill?: string, stroke?: string, zIndex?: number, draggable?: boolean, hasCollisions?: boolean);
+    get constructorName(): string;
+}

package/dist/shapes/ColoredCanvasObject.js

@@ -0,0 +1,14 @@
+import n from "./CanvasObject.js";
+class C extends n {
+  fill;
+  stroke;
+  constructor(t, e, r, s, o, a, c, l) {
+    super(t, e, r, a, c, l), this.fill = s, this.stroke = o;
+  }
+  get constructorName() {
+    return "ColoredCanvasObject";
+  }
+}
+export {
+  C as default
+};

package/dist/shapes/LinePath.d.ts

@@ -0,0 +1,31 @@
+import { default as Position2D } from '../types/Position2D';
+import { default as ColoredCanvasObject } from './ColoredCanvasObject';
+export default class LinePath extends ColoredCanvasObject {
+    points: Position2D[];
+    lineWidth: number;
+    smoothCorners?: boolean;
+    smoothCornersRadius?: number;
+    /**
+     * Represents a Line Path that will be created on the canvas.
+     *
+     * @param      {string|number}  id 		Identifier (used in click callback)
+     * @param      {number}			points  Array of coordinates {x, y} of the polygon points
+     * @param      {string}      	stroke 	DOMString, CanvasGradient or CanvsPattern representing what should be put in CanvasRenderingContext2D.strokeStyle
+     * @param      {number}      	zIndex 	Stack order of the element
+     * @param 	   {number} 		lineWidth Width of the stroked line
+     * @param 	   {number} 		smoothCorners  Should we have smooth corners ?
+     * @param 	   {number} 		smoothCornersRadius  Radius of smoothed corners
+     * @param      {boolean}      	hasCollisions 	Does the object have collisions ?
+     */
+    constructor({ id, lineWidth, points, stroke, zIndex, smoothCorners, smoothCornersRadius, hasCollisions }: {
+        id: string;
+        lineWidth: number;
+        points: Position2D[];
+        stroke: string;
+        zIndex?: number;
+        smoothCorners?: boolean;
+        smoothCornersRadius?: number;
+        hasCollisions?: boolean;
+    });
+    get constructorName(): string;
+}

package/dist/shapes/LinePath.js

@@ -0,0 +1,28 @@
+import a from "./ColoredCanvasObject.js";
+class u extends a {
+  points;
+  lineWidth;
+  smoothCorners;
+  smoothCornersRadius;
+  /**
+   * Represents a Line Path that will be created on the canvas.
+   *
+   * @param      {string|number}  id 		Identifier (used in click callback)
+   * @param      {number}			points  Array of coordinates {x, y} of the polygon points
+   * @param      {string}      	stroke 	DOMString, CanvasGradient or CanvsPattern representing what should be put in CanvasRenderingContext2D.strokeStyle
+   * @param      {number}      	zIndex 	Stack order of the element
+   * @param 	   {number} 		lineWidth Width of the stroked line
+   * @param 	   {number} 		smoothCorners  Should we have smooth corners ?
+   * @param 	   {number} 		smoothCornersRadius  Radius of smoothed corners
+   * @param      {boolean}      	hasCollisions 	Does the object have collisions ?
+   */
+  constructor({ id: t, lineWidth: o, points: s, stroke: e, zIndex: r, smoothCorners: n, smoothCornersRadius: i, hasCollisions: h }) {
+    super(t, s[0].x, s[0].y, "none", e, r, !1, h), this.points = s, this.lineWidth = o, this.smoothCorners = n, this.smoothCornersRadius = i;
+  }
+  get constructorName() {
+    return "LinePath";
+  }
+}
+export {
+  u as default
+};

package/dist/shapes/Polygon.d.ts

@@ -0,0 +1,25 @@
+import { default as Position2D } from '../types/Position2D';
+import { default as ColoredCanvasObject } from './ColoredCanvasObject';
+export default class Polygon extends ColoredCanvasObject {
+    points: Position2D[];
+    /**
+     * Represents a Rectangle that will be created on the canvas.
+     *
+     * @param      {string|number}  id 		Identifier (used in click callback)
+     * @param      {number}			points  Array of coordinates {x, y} of the polygon points
+     * @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 ?
+     */
+    constructor({ id, points, fill, stroke, zIndex, draggable, hasCollisions }: {
+        id: string;
+        points: Position2D[];
+        fill?: string;
+        stroke?: string;
+        zIndex?: number;
+        draggable?: boolean;
+        hasCollisions?: boolean;
+    });
+    get constructorName(): string;
+}

package/dist/shapes/Polygon.js

@@ -0,0 +1,23 @@
+import c from "./ColoredCanvasObject.js";
+class d extends c {
+  points;
+  /**
+   * Represents a Rectangle that will be created on the canvas.
+   *
+   * @param      {string|number}  id 		Identifier (used in click callback)
+   * @param      {number}			points  Array of coordinates {x, y} of the polygon points
+   * @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 ?
+   */
+  constructor({ id: t, points: o, fill: r, stroke: e, zIndex: s, draggable: n, hasCollisions: a }) {
+    super(t, o[0].x, o[0].y, r, e, s, n, a), this.points = o;
+  }
+  get constructorName() {
+    return "Polygon";
+  }
+}
+export {
+  d as default
+};

package/dist/shapes/Rect.d.ts

@@ -0,0 +1,34 @@
+import { default as ColoredCanvasObject } from './ColoredCanvasObject';
+export default class Rect extends ColoredCanvasObject {
+    width: number;
+    height: number;
+    rotation?: number;
+    /**
+     * Represents a Rectangle that will be created on the canvas.
+     *
+     * @param      {string|number}  id 		Identifier (used in click callback)
+     * @param      {number}			x       Left coordinate of top-left corner of rectangle in canvas
+     * @param      {number}			y       Top coordinate of top-left corner of rectangle in canvas
+     * @param      {number}  		width   Rectangle width in canvas
+     * @param      {number}  		height  Rectangle height in canvas
+     * @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, width, height, fill, stroke, zIndex, draggable, hasCollisions, rotation }: {
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        fill?: string;
+        stroke?: string;
+        zIndex?: number;
+        draggable?: boolean;
+        hasCollisions?: boolean;
+        rotation?: number;
+    });
+    get constructorName(): string;
+}

package/dist/shapes/Rect.js

@@ -0,0 +1,29 @@
+import u from "./ColoredCanvasObject.js";
+class m extends u {
+  width;
+  height;
+  rotation;
+  /**
+   * Represents a Rectangle that will be created on the canvas.
+   *
+   * @param      {string|number}  id 		Identifier (used in click callback)
+   * @param      {number}			x       Left coordinate of top-left corner of rectangle in canvas
+   * @param      {number}			y       Top coordinate of top-left corner of rectangle in canvas
+   * @param      {number}  		width   Rectangle width in canvas
+   * @param      {number}  		height  Rectangle height in canvas
+   * @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: t, x: e, y: o, width: r, height: s, fill: i, stroke: h, zIndex: a, draggable: c, hasCollisions: n, rotation: d }) {
+    super(t, e, o, i, h, a, c, n), this.width = r, this.height = s, this.rotation = d;
+  }
+  get constructorName() {
+    return "Rect";
+  }
+}
+export {
+  m as default
+};

package/dist/types/Canvas2DProps.d.ts

@@ -0,0 +1,30 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+import { default as CollideElementResultItem } from './CollideElementResultItem';
+import { default as Position2D } from './Position2D';
+export type Canvas2DProps = {
+    width: number;
+    height: number;
+    trackMouseMove?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    tileSize?: number;
+    onClick?: (collideRes: CollideElementResultItem) => void;
+    onRightClick?: (collideRes: CollideElementResultItem) => void;
+    onHover?: (collideRes: CollideElementResultItem | null, position?: Position2D) => void;
+    onElementMoved?: (collideRes: CollideElementResultItem, x: number, y: number) => void;
+    onWheel?: (e: Event) => void;
+    onFrame: () => CanvasObject[];
+    lockXAxis?: boolean;
+    lockYAxis?: boolean;
+    smoothingQuality?: ImageSmoothingQuality;
+    dragObjects?: boolean;
+    deltaLeft?: number;
+    deltaTop?: number;
+    id: string;
+    className?: string;
+    showMinimap?: boolean;
+    minimapWidth?: number;
+    minimapHeight?: number;
+    minimapFilter?: (e: CanvasObject) => boolean;
+};
+export default Canvas2DProps;

package/dist/types/Canvas2DProps.js

@@ -0,0 +1 @@
+

package/dist/types/Canvas2DState.d.ts

@@ -0,0 +1,18 @@
+type Canvas2DState = {
+    boundingClientRect?: DOMRect;
+    canvas?: HTMLCanvasElement;
+    context?: CanvasRenderingContext2D;
+    minimapBoundingClientRect?: DOMRect;
+    minimapCanvas?: HTMLCanvasElement;
+    minimapContext?: CanvasRenderingContext2D;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    zoom: number;
+    deltaTop: number;
+    deltaLeft: number;
+    prevX: number | null;
+    prevY: number | null;
+};
+export default Canvas2DState;

package/dist/types/Canvas2DState.js

@@ -0,0 +1 @@
+

package/dist/types/CollideElementResultItem.d.ts

@@ -0,0 +1,9 @@
+import { default as CanvasObject } from '../shapes/CanvasObject';
+import { default as Position2D } from './Position2D';
+type CollideElementResultItem = {
+    id: string | null;
+    element: CanvasObject | null;
+    originalEvent: Event;
+    posOnMap: Position2D;
+};
+export default CollideElementResultItem;

package/dist/types/CollideElementResultItem.js

@@ -0,0 +1 @@
+

package/dist/types/Position2D.d.ts

@@ -0,0 +1,5 @@
+type Position2D = {
+    x: number;
+    y: number;
+};
+export default Position2D;

package/dist/types/Position2D.js

@@ -0,0 +1 @@
+

package/dist/types/Surface2D.d.ts

@@ -0,0 +1,7 @@
+type Surface2D = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export default Surface2D;

package/dist/types/Surface2D.js

@@ -0,0 +1 @@
+