@pixi/canvas-mesh - npm Package Compare versions

Comparing version 6.5.3 to 7.0.0-alpha

dist/cjs/canvas-mesh.js

 /*!
- * @pixi/canvas-mesh - v6.5.3
- * Compiled Fri, 09 Sep 2022 13:55:20 UTC
+ * @pixi/canvas-mesh - v7.0.0-alpha
+ * Compiled Fri, 09 Sep 2022 16:09:18 UTC
  *
@@ -13,408 +13,258 @@ * @pixi/canvas-mesh is licensed under the MIT License.
 var core = require('@pixi/core');
-var constants = require('@pixi/constants');
 var canvasRenderer = require('@pixi/canvas-renderer');
-var settings = require('@pixi/settings');
 var mesh = require('@pixi/mesh');
 var meshExtras = require('@pixi/mesh-extras');
 
-/**
- * Renderer dedicated to meshes.
- * @class
- * @protected
- * @memberof PIXI
- */
-var CanvasMeshRenderer = /** @class */ (function () {
-    /** @param renderer - A reference to the current renderer */
-    function CanvasMeshRenderer(renderer) {
-        this.renderer = renderer;
+class CanvasMeshRenderer {
+  constructor(renderer) {
+    this.renderer = renderer;
+  }
+  render(mesh) {
+    const renderer = this.renderer;
+    const transform = mesh.worldTransform;
+    renderer.canvasContext.activeContext.globalAlpha = mesh.worldAlpha;
+    renderer.canvasContext.setBlendMode(mesh.blendMode);
+    renderer.canvasContext.setContextTransform(transform, mesh.roundPixels);
+    if (mesh.drawMode !== core.DRAW_MODES.TRIANGLES) {
+      this._renderTriangleMesh(mesh);
+    } else {
+      this._renderTriangles(mesh);
     }
-    /**
-     * Renders the Mesh
-     * @param mesh - the Mesh to render
-     */
-    CanvasMeshRenderer.prototype.render = function (mesh) {
-        var renderer = this.renderer;
-        var transform = mesh.worldTransform;
-        renderer.context.globalAlpha = mesh.worldAlpha;
-        renderer.setBlendMode(mesh.blendMode);
-        renderer.setContextTransform(transform, mesh.roundPixels);
-        if (mesh.drawMode !== constants.DRAW_MODES.TRIANGLES) {
-            this._renderTriangleMesh(mesh);
-        }
-        else {
-            this._renderTriangles(mesh);
-        }
-    };
-    /**
-     * Draws the object in Triangle Mesh mode
-     * @private
-     * @param mesh - the Mesh to render
-     */
-    CanvasMeshRenderer.prototype._renderTriangleMesh = function (mesh) {
-        // draw triangles!!
-        var length = mesh.geometry.buffers[0].data.length;
-        for (var i = 0; i < length - 2; i++) {
-            // draw some triangles!
-            var index = i * 2;
-            this._renderDrawTriangle(mesh, index, (index + 2), (index + 4));
-        }
-    };
-    /**
-     * Draws the object in triangle mode using canvas
-     * @private
-     * @param mesh - the current mesh
-     */
-    CanvasMeshRenderer.prototype._renderTriangles = function (mesh) {
-        // draw triangles!!
-        var indices = mesh.geometry.getIndex().data;
-        var length = indices.length;
-        for (var i = 0; i < length; i += 3) {
-            // draw some triangles!
-            var index0 = indices[i] * 2;
-            var index1 = indices[i + 1] * 2;
-            var index2 = indices[i + 2] * 2;
-            this._renderDrawTriangle(mesh, index0, index1, index2);
-        }
-    };
-    /**
-     * Draws one of the triangles that from the Mesh
-     * @private
-     * @param mesh - the current mesh
-     * @param index0 - the index of the first vertex
-     * @param index1 - the index of the second vertex
-     * @param index2 - the index of the third vertex
-     */
-    CanvasMeshRenderer.prototype._renderDrawTriangle = function (mesh, index0, index1, index2) {
-        var context = this.renderer.context;
-        var vertices = mesh.geometry.buffers[0].data;
-        var uvs = mesh.uvs, texture = mesh.texture;
-        if (!texture.valid) {
-            return;
-        }
-        var isTinted = mesh.tint !== 0xFFFFFF;
-        var base = texture.baseTexture;
-        var textureWidth = base.width;
-        var textureHeight = base.height;
-        if (isTinted) {
-            if (mesh._cachedTint !== mesh.tint) {
-                mesh._cachedTint = mesh.tint;
-                mesh._cachedTexture = mesh._cachedTexture || new core.Texture(base);
-                mesh._tintedCanvas = canvasRenderer.canvasUtils.getTintedCanvas({ texture: mesh._cachedTexture }, mesh.tint);
-            }
-        }
-        var textureSource = isTinted ? mesh._tintedCanvas : base.getDrawableSource();
-        var u0 = uvs[index0] * base.width;
-        var u1 = uvs[index1] * base.width;
-        var u2 = uvs[index2] * base.width;
-        var v0 = uvs[index0 + 1] * base.height;
-        var v1 = uvs[index1 + 1] * base.height;
-        var v2 = uvs[index2 + 1] * base.height;
-        var x0 = vertices[index0];
-        var x1 = vertices[index1];
-        var x2 = vertices[index2];
-        var y0 = vertices[index0 + 1];
-        var y1 = vertices[index1 + 1];
-        var y2 = vertices[index2 + 1];
-        var screenPadding = mesh.canvasPadding / this.renderer.resolution;
-        if (screenPadding > 0) {
-            var _a = mesh.worldTransform, a = _a.a, b = _a.b, c = _a.c, d = _a.d;
-            var centerX = (x0 + x1 + x2) / 3;
-            var centerY = (y0 + y1 + y2) / 3;
-            var normX = x0 - centerX;
-            var normY = y0 - centerY;
-            // Transform to screen space and calculate the distance
-            var screenX = (a * normX) + (c * normY);
-            var screenY = (b * normX) + (d * normY);
-            var screenDist = Math.sqrt((screenX * screenX) + (screenY * screenY));
-            // Factor by which to scale in order to add padding equal to screenPadding
-            var paddingFactor = 1 + (screenPadding / screenDist);
-            x0 = centerX + (normX * paddingFactor);
-            y0 = centerY + (normY * paddingFactor);
-            normX = x1 - centerX;
-            normY = y1 - centerY;
-            screenX = (a * normX) + (c * normY);
-            screenY = (b * normX) + (d * normY);
-            screenDist = Math.sqrt((screenX * screenX) + (screenY * screenY));
-            paddingFactor = 1 + (screenPadding / screenDist);
-            x1 = centerX + (normX * paddingFactor);
-            y1 = centerY + (normY * paddingFactor);
-            normX = x2 - centerX;
-            normY = y2 - centerY;
-            screenX = (a * normX) + (c * normY);
-            screenY = (b * normX) + (d * normY);
-            screenDist = Math.sqrt((screenX * screenX) + (screenY * screenY));
-            paddingFactor = 1 + (screenPadding / screenDist);
-            x2 = centerX + (normX * paddingFactor);
-            y2 = centerY + (normY * paddingFactor);
-        }
-        context.save();
-        context.beginPath();
-        context.moveTo(x0, y0);
-        context.lineTo(x1, y1);
-        context.lineTo(x2, y2);
-        context.closePath();
-        context.clip();
-        // Compute matrix transform
-        var delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2);
-        var deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2);
-        var deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2);
-        var deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2);
-        var deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2);
-        var deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2);
-        var deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2);
-        context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, deltaC / delta, deltaF / delta);
-        context.drawImage(textureSource, 0, 0, textureWidth * base.resolution, textureHeight * base.resolution, 0, 0, textureWidth, textureHeight);
-        context.restore();
-        this.renderer.invalidateBlendMode();
-    };
-    /**
-     * Renders a flat Mesh
-     * @private
-     * @param mesh - The Mesh to render
-     */
-    CanvasMeshRenderer.prototype.renderMeshFlat = function (mesh) {
-        var context = this.renderer.context;
-        var vertices = mesh.geometry.getBuffer('aVertexPosition').data;
-        var length = vertices.length / 2;
-        // this.count++;
-        context.beginPath();
-        for (var i = 1; i < length - 2; ++i) {
-            // draw some triangles!
-            var index = i * 2;
-            var x0 = vertices[index];
-            var y0 = vertices[index + 1];
-            var x1 = vertices[index + 2];
-            var y1 = vertices[index + 3];
-            var x2 = vertices[index + 4];
-            var y2 = vertices[index + 5];
-            context.moveTo(x0, y0);
-            context.lineTo(x1, y1);
-            context.lineTo(x2, y2);
-        }
-        context.fillStyle = '#FF0000';
-        context.fill();
-        context.closePath();
-    };
-    /** destroy the renderer */
-    CanvasMeshRenderer.prototype.destroy = function () {
-        this.renderer = null;
-    };
-    /** @ignore */
-    CanvasMeshRenderer.extension = {
-        name: 'mesh',
-        type: core.ExtensionType.CanvasRendererPlugin,
-    };
-    return CanvasMeshRenderer;
-}());
+  }
+  _renderTriangleMesh(mesh) {
+    const length = mesh.geometry.buffers[0].data.length;
+    for (let i = 0; i < length - 2; i++) {
+      const index = i * 2;
+      this._renderDrawTriangle(mesh, index, index + 2, index + 4);
+    }
+  }
+  _renderTriangles(mesh) {
+    const indices = mesh.geometry.getIndex().data;
+    const length = indices.length;
+    for (let i = 0; i < length; i += 3) {
+      const index0 = indices[i] * 2;
+      const index1 = indices[i + 1] * 2;
+      const index2 = indices[i + 2] * 2;
+      this._renderDrawTriangle(mesh, index0, index1, index2);
+    }
+  }
+  _renderDrawTriangle(mesh, index0, index1, index2) {
+    const context = this.renderer.canvasContext.activeContext;
+    const vertices = mesh.geometry.buffers[0].data;
+    const { uvs, texture } = mesh;
+    if (!texture.valid) {
+      return;
+    }
+    const isTinted = mesh.tint !== 16777215;
+    const base = texture.baseTexture;
+    const textureWidth = base.width;
+    const textureHeight = base.height;
+    if (isTinted) {
+      if (mesh._cachedTint !== mesh.tint) {
+        mesh._cachedTint = mesh.tint;
+        mesh._cachedTexture = mesh._cachedTexture || new core.Texture(base);
+        mesh._tintedCanvas = canvasRenderer.canvasUtils.getTintedCanvas({ texture: mesh._cachedTexture }, mesh.tint);
+      }
+    }
+    const textureSource = isTinted ? mesh._tintedCanvas : base.getDrawableSource();
+    const u0 = uvs[index0] * base.width;
+    const u1 = uvs[index1] * base.width;
+    const u2 = uvs[index2] * base.width;
+    const v0 = uvs[index0 + 1] * base.height;
+    const v1 = uvs[index1 + 1] * base.height;
+    const v2 = uvs[index2 + 1] * base.height;
+    let x0 = vertices[index0];
+    let x1 = vertices[index1];
+    let x2 = vertices[index2];
+    let y0 = vertices[index0 + 1];
+    let y1 = vertices[index1 + 1];
+    let y2 = vertices[index2 + 1];
+    const screenPadding = mesh.canvasPadding / this.renderer.canvasContext.activeResolution;
+    if (screenPadding > 0) {
+      const { a, b, c, d } = mesh.worldTransform;
+      const centerX = (x0 + x1 + x2) / 3;
+      const centerY = (y0 + y1 + y2) / 3;
+      let normX = x0 - centerX;
+      let normY = y0 - centerY;
+      let screenX = a * normX + c * normY;
+      let screenY = b * normX + d * normY;
+      let screenDist = Math.sqrt(screenX * screenX + screenY * screenY);
+      let paddingFactor = 1 + screenPadding / screenDist;
+      x0 = centerX + normX * paddingFactor;
+      y0 = centerY + normY * paddingFactor;
+      normX = x1 - centerX;
+      normY = y1 - centerY;
+      screenX = a * normX + c * normY;
+      screenY = b * normX + d * normY;
+      screenDist = Math.sqrt(screenX * screenX + screenY * screenY);
+      paddingFactor = 1 + screenPadding / screenDist;
+      x1 = centerX + normX * paddingFactor;
+      y1 = centerY + normY * paddingFactor;
+      normX = x2 - centerX;
+      normY = y2 - centerY;
+      screenX = a * normX + c * normY;
+      screenY = b * normX + d * normY;
+      screenDist = Math.sqrt(screenX * screenX + screenY * screenY);
+      paddingFactor = 1 + screenPadding / screenDist;
+      x2 = centerX + normX * paddingFactor;
+      y2 = centerY + normY * paddingFactor;
+    }
+    context.save();
+    context.beginPath();
+    context.moveTo(x0, y0);
+    context.lineTo(x1, y1);
+    context.lineTo(x2, y2);
+    context.closePath();
+    context.clip();
+    const delta = u0 * v1 + v0 * u2 + u1 * v2 - v1 * u2 - v0 * u1 - u0 * v2;
+    const deltaA = x0 * v1 + v0 * x2 + x1 * v2 - v1 * x2 - v0 * x1 - x0 * v2;
+    const deltaB = u0 * x1 + x0 * u2 + u1 * x2 - x1 * u2 - x0 * u1 - u0 * x2;
+    const deltaC = u0 * v1 * x2 + v0 * x1 * u2 + x0 * u1 * v2 - x0 * v1 * u2 - v0 * u1 * x2 - u0 * x1 * v2;
+    const deltaD = y0 * v1 + v0 * y2 + y1 * v2 - v1 * y2 - v0 * y1 - y0 * v2;
+    const deltaE = u0 * y1 + y0 * u2 + u1 * y2 - y1 * u2 - y0 * u1 - u0 * y2;
+    const deltaF = u0 * v1 * y2 + v0 * y1 * u2 + y0 * u1 * v2 - y0 * v1 * u2 - v0 * u1 * y2 - u0 * y1 * v2;
+    context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, deltaC / delta, deltaF / delta);
+    context.drawImage(textureSource, 0, 0, textureWidth * base.resolution, textureHeight * base.resolution, 0, 0, textureWidth, textureHeight);
+    context.restore();
+    this.renderer.canvasContext.invalidateBlendMode();
+  }
+  renderMeshFlat(mesh) {
+    const context = this.renderer.canvasContext.activeContext;
+    const vertices = mesh.geometry.getBuffer("aVertexPosition").data;
+    const length = vertices.length / 2;
+    context.beginPath();
+    for (let i = 1; i < length - 2; ++i) {
+      const index = i * 2;
+      const x0 = vertices[index];
+      const y0 = vertices[index + 1];
+      const x1 = vertices[index + 2];
+      const y1 = vertices[index + 3];
+      const x2 = vertices[index + 4];
+      const y2 = vertices[index + 5];
+      context.moveTo(x0, y0);
+      context.lineTo(x1, y1);
+      context.lineTo(x2, y2);
+    }
+    context.fillStyle = "#FF0000";
+    context.fill();
+    context.closePath();
+  }
+  destroy() {
+    this.renderer = null;
+  }
+}
+CanvasMeshRenderer.extension = {
+  name: "mesh",
+  type: core.ExtensionType.CanvasRendererPlugin
+};
+core.extensions.add(CanvasMeshRenderer);
 
-/**
- * Default `canvasPadding` for canvas-based Mesh rendering.
- * @see PIXI.Mesh2d#canvasPadding
- * @static
- * @memberof PIXI.settings
- * @member {number}
- * @default 0
- */
-settings.settings.MESH_CANVAS_PADDING = 0;
+core.settings.MESH_CANVAS_PADDING = 0;
 
-/**
- * Renders the mesh using the Canvas renderer
- * @protected
- * @method render
- * @memberof PIXI.MeshMaterial#
- * @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
- * @param {PIXI.Mesh} mesh - Mesh to render.
- */
 mesh.MeshMaterial.prototype._renderCanvas = function _renderCanvas(renderer, mesh) {
-    renderer.plugins.mesh.render(mesh);
+  renderer.plugins.mesh.render(mesh);
 };
 
-/**
- * Cached tint value so we can tell when the tint is changed.
- * @memberof PIXI.NineSlicePlane#
- * @member {number} _cachedTint
- * @protected
- */
-meshExtras.NineSlicePlane.prototype._cachedTint = 0xFFFFFF;
-/**
- * Cached tinted texture.
- * @memberof PIXI.NineSlicePlane#
- * @member {HTMLCanvasElement} _tintedCanvas
- * @protected
- */
+meshExtras.NineSlicePlane.prototype._cachedTint = 16777215;
 meshExtras.NineSlicePlane.prototype._tintedCanvas = null;
-/**
- * Temporary storage for canvas source coords
- * @memberof PIXI.NineSlicePlane#
- * @member {number[]} _canvasUvs
- * @private
- */
 meshExtras.NineSlicePlane.prototype._canvasUvs = null;
-/**
- * Renders the object using the Canvas renderer
- * @private
- * @method _renderCanvas
- * @memberof PIXI.NineSlicePlane#
- * @param {PIXI.CanvasRenderer} renderer - The canvas renderer to render with.
- */
 meshExtras.NineSlicePlane.prototype._renderCanvas = function _renderCanvas(renderer) {
-    var context = renderer.context;
-    var transform = this.worldTransform;
-    var isTinted = this.tint !== 0xFFFFFF;
-    var texture = this.texture;
-    if (!texture.valid) {
-        return;
+  const context = renderer.canvasContext.activeContext;
+  const transform = this.worldTransform;
+  const isTinted = this.tint !== 16777215;
+  const texture = this.texture;
+  if (!texture.valid) {
+    return;
+  }
+  if (isTinted) {
+    if (this._cachedTint !== this.tint) {
+      this._cachedTint = this.tint;
+      this._tintedCanvas = canvasRenderer.canvasUtils.getTintedCanvas(this, this.tint);
     }
-    // Work out tinting
-    if (isTinted) {
-        if (this._cachedTint !== this.tint) {
-            // Tint has changed, need to update the tinted texture and use that instead
-            this._cachedTint = this.tint;
-            this._tintedCanvas = canvasRenderer.canvasUtils.getTintedCanvas(this, this.tint);
-        }
+  }
+  const textureSource = !isTinted ? texture.baseTexture.getDrawableSource() : this._tintedCanvas;
+  if (!this._canvasUvs) {
+    this._canvasUvs = [0, 0, 0, 0, 0, 0, 0, 0];
+  }
+  const vertices = this.vertices;
+  const uvs = this._canvasUvs;
+  const u0 = isTinted ? 0 : texture.frame.x;
+  const v0 = isTinted ? 0 : texture.frame.y;
+  const u1 = u0 + texture.frame.width;
+  const v1 = v0 + texture.frame.height;
+  uvs[0] = u0;
+  uvs[1] = u0 + this._leftWidth;
+  uvs[2] = u1 - this._rightWidth;
+  uvs[3] = u1;
+  uvs[4] = v0;
+  uvs[5] = v0 + this._topHeight;
+  uvs[6] = v1 - this._bottomHeight;
+  uvs[7] = v1;
+  for (let i = 0; i < 8; i++) {
+    uvs[i] *= texture.baseTexture.resolution;
+  }
+  context.globalAlpha = this.worldAlpha;
+  renderer.canvasContext.setBlendMode(this.blendMode);
+  renderer.canvasContext.setContextTransform(transform, this.roundPixels);
+  for (let row = 0; row < 3; row++) {
+    for (let col = 0; col < 3; col++) {
+      const ind = col * 2 + row * 8;
+      const sw = Math.max(1, uvs[col + 1] - uvs[col]);
+      const sh = Math.max(1, uvs[row + 5] - uvs[row + 4]);
+      const dw = Math.max(1, vertices[ind + 10] - vertices[ind]);
+      const dh = Math.max(1, vertices[ind + 11] - vertices[ind + 1]);
+      context.drawImage(textureSource, uvs[col], uvs[row + 4], sw, sh, vertices[ind], vertices[ind + 1], dw, dh);
     }
-    var textureSource = !isTinted ? texture.baseTexture.getDrawableSource() : this._tintedCanvas;
-    if (!this._canvasUvs) {
-        this._canvasUvs = [0, 0, 0, 0, 0, 0, 0, 0];
-    }
-    var vertices = this.vertices;
-    var uvs = this._canvasUvs;
-    var u0 = isTinted ? 0 : texture.frame.x;
-    var v0 = isTinted ? 0 : texture.frame.y;
-    var u1 = u0 + texture.frame.width;
-    var v1 = v0 + texture.frame.height;
-    uvs[0] = u0;
-    uvs[1] = u0 + this._leftWidth;
-    uvs[2] = u1 - this._rightWidth;
-    uvs[3] = u1;
-    uvs[4] = v0;
-    uvs[5] = v0 + this._topHeight;
-    uvs[6] = v1 - this._bottomHeight;
-    uvs[7] = v1;
-    for (var i = 0; i < 8; i++) {
-        uvs[i] *= texture.baseTexture.resolution;
-    }
-    context.globalAlpha = this.worldAlpha;
-    renderer.setBlendMode(this.blendMode);
-    renderer.setContextTransform(transform, this.roundPixels);
-    for (var row = 0; row < 3; row++) {
-        for (var col = 0; col < 3; col++) {
-            var ind = (col * 2) + (row * 8);
-            var sw = Math.max(1, uvs[col + 1] - uvs[col]);
-            var sh = Math.max(1, uvs[row + 5] - uvs[row + 4]);
-            var dw = Math.max(1, vertices[ind + 10] - vertices[ind]);
-            var dh = Math.max(1, vertices[ind + 11] - vertices[ind + 1]);
-            context.drawImage(textureSource, uvs[col], uvs[row + 4], sw, sh, vertices[ind], vertices[ind + 1], dw, dh);
-        }
-    }
+  }
 };
 
-var warned = false;
-/**
- * Cached tint value so we can tell when the tint is changed.
- * @memberof PIXI.Mesh#
- * @member {number} _cachedTint
- * @protected
- */
-mesh.Mesh.prototype._cachedTint = 0xFFFFFF;
-/**
- * Cached tinted texture.
- * @memberof PIXI.Mesh#
- * @member {HTMLCanvasElement} _tintedCanvas
- * @protected
- */
+let warned = false;
+mesh.Mesh.prototype._cachedTint = 16777215;
 mesh.Mesh.prototype._tintedCanvas = null;
-/**
- * The cache texture is used to generate `_tintedCanvas`.
- * @memberof PIXI.Mesh#
- * @member {PIXI.Texture} _cachedTexture
- * @protected
- */
 mesh.Mesh.prototype._cachedTexture = null;
-/**
- * Renders the object using the Canvas renderer
- * @private
- * @method _renderCanvas
- * @memberof PIXI.Mesh#
- * @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
- */
 mesh.Mesh.prototype._renderCanvas = function _renderCanvas(renderer) {
-    if (this.shader.uvMatrix) {
-        this.shader.uvMatrix.update();
-        this.calculateUvs();
+  if (this.shader.uvMatrix) {
+    this.shader.uvMatrix.update();
+    this.calculateUvs();
+  }
+  if (this.material._renderCanvas) {
+    this.material._renderCanvas(renderer, this);
+  } else if (!warned) {
+    warned = true;
+    if (globalThis.console) {
+      console.warn("Mesh with custom shaders are not supported in CanvasRenderer.");
     }
-    if (this.material._renderCanvas) {
-        this.material._renderCanvas(renderer, this);
-    }
-    else if (!warned) {
-        warned = true;
-        if (globalThis.console) {
-            console.warn('Mesh with custom shaders are not supported in CanvasRenderer.');
-        }
-    }
+  }
 };
-// IMPORTANT: Please do NOT use this as a precedent to use `settings` after the object is created
-// this was merely created to completely decouple canvas from the base Mesh class and we are
-// unable to add `canvasPadding` in the constructor anymore, as the case was for PixiJS v4.
-/**
- * Internal variable for `canvasPadding`.
- * @private
- * @memberof PIXI.Mesh
- * @member {number}
- * @default null
- */
 mesh.Mesh.prototype._canvasPadding = null;
-/**
- * Triangles in canvas mode are automatically antialiased, use this value to force triangles
- * to overlap a bit with each other. To set the global default, set {@link PIXI.settings.MESH_CANVAS_PADDING}
- * @see PIXI.settings.MESH_CANVAS_PADDING
- * @member {number} canvasPadding
- * @memberof PIXI.SimpleMesh#
- * @default 0
- */
-Object.defineProperty(mesh.Mesh.prototype, 'canvasPadding', {
-    get: function () {
-        return this._canvasPadding !== null ? this._canvasPadding : settings.settings.MESH_CANVAS_PADDING;
-    },
-    set: function (value) {
-        this._canvasPadding = value;
-    },
+Object.defineProperty(mesh.Mesh.prototype, "canvasPadding", {
+  get() {
+    return this._canvasPadding !== null ? this._canvasPadding : core.settings.MESH_CANVAS_PADDING;
+  },
+  set(value) {
+    this._canvasPadding = value;
+  }
 });
 
-/**
- * Renders the object using the Canvas renderer
- * @private
- * @method _renderCanvas
- * @memberof PIXI.Mesh#
- * @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
- */
 meshExtras.SimpleMesh.prototype._renderCanvas = function _renderCanvas(renderer) {
-    if (this.autoUpdate) {
-        this.geometry.getBuffer('aVertexPosition').update();
-    }
-    if (this.shader.update) {
-        this.shader.update();
-    }
-    this.calculateUvs();
-    this.material._renderCanvas(renderer, this);
+  if (this.autoUpdate) {
+    this.geometry.getBuffer("aVertexPosition").update();
+  }
+  if (this.shader.update) {
+    this.shader.update();
+  }
+  this.calculateUvs();
+  this.material._renderCanvas(renderer, this);
 };
 
-/**
- * Renders the object using the Canvas renderer
- * @protected
- * @method _renderCanvas
- * @memberof PIXI.Mesh#
- * @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
- */
 meshExtras.SimpleRope.prototype._renderCanvas = function _renderCanvas(renderer) {
-    if (this.autoUpdate
-        || this.geometry._width !== this.shader.texture.height) {
-        this.geometry._width = this.shader.texture.height;
-        this.geometry.update();
-    }
-    if (this.shader.update) {
-        this.shader.update();
-    }
-    this.calculateUvs();
-    this.material._renderCanvas(renderer, this);
+  if (this.autoUpdate || this.geometry._width !== this.shader.texture.height) {
+    this.geometry._width = this.shader.texture.height;
+    this.geometry.update();
+  }
+  if (this.shader.update) {
+    this.shader.update();
+  }
+  this.calculateUvs();
+  this.material._renderCanvas(renderer, this);
 };
@@ -421,0 +271,0 @@

dist/cjs/canvas-mesh.min.js

@@ -1,9 +0,8 @@
-/*!
- * @pixi/canvas-mesh - v6.5.3
- * Compiled Fri, 09 Sep 2022 13:55:20 UTC
+"use strict";/*!
+ * @pixi/canvas-mesh - v7.0.0-alpha
+ * Compiled Fri, 09 Sep 2022 16:09:18 UTC
  *
  * @pixi/canvas-mesh is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@pixi/core"),t=require("@pixi/constants"),r=require("@pixi/canvas-renderer"),a=require("@pixi/settings"),i=require("@pixi/mesh"),n=require("@pixi/mesh-extras"),s=function(){function a(e){this.renderer=e}return a.prototype.render=function(e){var r=this.renderer,a=e.worldTransform;r.context.globalAlpha=e.worldAlpha,r.setBlendMode(e.blendMode),r.setContextTransform(a,e.roundPixels),e.drawMode!==t.DRAW_MODES.TRIANGLES?this._renderTriangleMesh(e):this._renderTriangles(e)},a.prototype._renderTriangleMesh=function(e){for(var t=e.geometry.buffers[0].data.length,r=0;r<t-2;r++){var a=2*r;this._renderDrawTriangle(e,a,a+2,a+4)}},a.prototype._renderTriangles=function(e){for(var t=e.geometry.getIndex().data,r=t.length,a=0;a<r;a+=3){var i=2*t[a],n=2*t[a+1],s=2*t[a+2];this._renderDrawTriangle(e,i,n,s)}},a.prototype._renderDrawTriangle=function(t,a,i,n){var s=this.renderer.context,o=t.geometry.buffers[0].data,h=t.uvs,d=t.texture;if(d.valid){var l=16777215!==t.tint,c=d.baseTexture,u=c.width,v=c.height;l&&t._cachedTint!==t.tint&&(t._cachedTint=t.tint,t._cachedTexture=t._cachedTexture||new e.Texture(c),t._tintedCanvas=r.canvasUtils.getTintedCanvas({texture:t._cachedTexture},t.tint));var p=l?t._tintedCanvas:c.getDrawableSource(),g=h[a]*c.width,_=h[i]*c.width,f=h[n]*c.width,x=h[a+1]*c.height,m=h[i+1]*c.height,T=h[n+1]*c.height,y=o[a],M=o[i],C=o[n],w=o[a+1],P=o[i+1],b=o[n+1],S=t.canvasPadding/this.renderer.resolution;if(S>0){var A=t.worldTransform,D=A.a,U=A.b,q=A.c,N=A.d,I=(y+M+C)/3,R=(w+P+b)/3,B=y-I,E=w-R,H=D*B+q*E,V=U*B+N*E,F=Math.sqrt(H*H+V*V),G=1+S/F;y=I+B*G,w=R+E*G,H=D*(B=M-I)+q*(E=P-R),V=U*B+N*E,M=I+B*(G=1+S/(F=Math.sqrt(H*H+V*V))),P=R+E*G,H=D*(B=C-I)+q*(E=b-R),V=U*B+N*E,C=I+B*(G=1+S/(F=Math.sqrt(H*H+V*V))),b=R+E*G}s.save(),s.beginPath(),s.moveTo(y,w),s.lineTo(M,P),s.lineTo(C,b),s.closePath(),s.clip();var O=g*m+x*f+_*T-m*f-x*_-g*T,W=y*m+x*C+M*T-m*C-x*M-y*T,j=g*M+y*f+_*C-M*f-y*_-g*C,L=g*m*C+x*M*f+y*_*T-y*m*f-x*_*C-g*M*T,k=w*m+x*b+P*T-m*b-x*P-w*T,z=g*P+w*f+_*b-P*f-w*_-g*b,J=g*m*b+x*P*f+w*_*T-w*m*f-x*_*b-g*P*T;s.transform(W/O,k/O,j/O,z/O,L/O,J/O),s.drawImage(p,0,0,u*c.resolution,v*c.resolution,0,0,u,v),s.restore(),this.renderer.invalidateBlendMode()}},a.prototype.renderMeshFlat=function(e){var t=this.renderer.context,r=e.geometry.getBuffer("aVertexPosition").data,a=r.length/2;t.beginPath();for(var i=1;i<a-2;++i){var n=2*i,s=r[n],o=r[n+1],h=r[n+2],d=r[n+3],l=r[n+4],c=r[n+5];t.moveTo(s,o),t.lineTo(h,d),t.lineTo(l,c)}t.fillStyle="#FF0000",t.fill(),t.closePath()},a.prototype.destroy=function(){this.renderer=null},a.extension={name:"mesh",type:e.ExtensionType.CanvasRendererPlugin},a}();a.settings.MESH_CANVAS_PADDING=0,i.MeshMaterial.prototype._renderCanvas=function(e,t){e.plugins.mesh.render(t)},n.NineSlicePlane.prototype._cachedTint=16777215,n.NineSlicePlane.prototype._tintedCanvas=null,n.NineSlicePlane.prototype._canvasUvs=null,n.NineSlicePlane.prototype._renderCanvas=function(e){var t=e.context,a=this.worldTransform,i=16777215!==this.tint,n=this.texture;if(n.valid){i&&this._cachedTint!==this.tint&&(this._cachedTint=this.tint,this._tintedCanvas=r.canvasUtils.getTintedCanvas(this,this.tint));var s=i?this._tintedCanvas:n.baseTexture.getDrawableSource();this._canvasUvs||(this._canvasUvs=[0,0,0,0,0,0,0,0]);var o=this.vertices,h=this._canvasUvs,d=i?0:n.frame.x,l=i?0:n.frame.y,c=d+n.frame.width,u=l+n.frame.height;h[0]=d,h[1]=d+this._leftWidth,h[2]=c-this._rightWidth,h[3]=c,h[4]=l,h[5]=l+this._topHeight,h[6]=u-this._bottomHeight,h[7]=u;for(var v=0;v<8;v++)h[v]*=n.baseTexture.resolution;t.globalAlpha=this.worldAlpha,e.setBlendMode(this.blendMode),e.setContextTransform(a,this.roundPixels);for(var p=0;p<3;p++)for(var g=0;g<3;g++){var _=2*g+8*p,f=Math.max(1,h[g+1]-h[g]),x=Math.max(1,h[p+5]-h[p+4]),m=Math.max(1,o[_+10]-o[_]),T=Math.max(1,o[_+11]-o[_+1]);t.drawImage(s,h[g],h[p+4],f,x,o[_],o[_+1],m,T)}}};var o=!1;i.Mesh.prototype._cachedTint=16777215,i.Mesh.prototype._tintedCanvas=null,i.Mesh.prototype._cachedTexture=null,i.Mesh.prototype._renderCanvas=function(e){this.shader.uvMatrix&&(this.shader.uvMatrix.update(),this.calculateUvs()),this.material._renderCanvas?this.material._renderCanvas(e,this):o||(o=!0,globalThis.console&&console.warn("Mesh with custom shaders are not supported in CanvasRenderer."))},i.Mesh.prototype._canvasPadding=null,Object.defineProperty(i.Mesh.prototype,"canvasPadding",{get:function(){return null!==this._canvasPadding?this._canvasPadding:a.settings.MESH_CANVAS_PADDING},set:function(e){this._canvasPadding=e}}),n.SimpleMesh.prototype._renderCanvas=function(e){this.autoUpdate&&this.geometry.getBuffer("aVertexPosition").update(),this.shader.update&&this.shader.update(),this.calculateUvs(),this.material._renderCanvas(e,this)},n.SimpleRope.prototype._renderCanvas=function(e){(this.autoUpdate||this.geometry._width!==this.shader.texture.height)&&(this.geometry._width=this.shader.texture.height,this.geometry.update()),this.shader.update&&this.shader.update(),this.calculateUvs(),this.material._renderCanvas(e,this)},exports.CanvasMeshRenderer=s;
+ */Object.defineProperty(exports,"__esModule",{value:!0});var I=require("@pixi/core"),L=require("@pixi/canvas-renderer"),R=require("@pixi/mesh"),B=require("@pixi/mesh-extras");class j{constructor(e){this.renderer=e}render(e){const a=this.renderer,n=e.worldTransform;a.canvasContext.activeContext.globalAlpha=e.worldAlpha,a.canvasContext.setBlendMode(e.blendMode),a.canvasContext.setContextTransform(n,e.roundPixels),e.drawMode!==I.DRAW_MODES.TRIANGLES?this._renderTriangleMesh(e):this._renderTriangles(e)}_renderTriangleMesh(e){const a=e.geometry.buffers[0].data.length;for(let n=0;n<a-2;n++){const s=n*2;this._renderDrawTriangle(e,s,s+2,s+4)}}_renderTriangles(e){const a=e.geometry.getIndex().data,n=a.length;for(let s=0;s<n;s+=3){const i=a[s]*2,r=a[s+1]*2,t=a[s+2]*2;this._renderDrawTriangle(e,i,r,t)}}_renderDrawTriangle(e,a,n,s){const i=this.renderer.canvasContext.activeContext,r=e.geometry.buffers[0].data,{uvs:t,texture:w}=e;if(!w.valid)return;const P=e.tint!==16777215,o=w.baseTexture,U=o.width,d=o.height;P&&e._cachedTint!==e.tint&&(e._cachedTint=e.tint,e._cachedTexture=e._cachedTexture||new I.Texture(o),e._tintedCanvas=L.canvasUtils.getTintedCanvas({texture:e._cachedTexture},e.tint));const b=P?e._tintedCanvas:o.getDrawableSource(),h=t[a]*o.width,c=t[n]*o.width,v=t[s]*o.width,u=t[a+1]*o.height,p=t[n+1]*o.height,x=t[s+1]*o.height;let m=r[a],C=r[n],f=r[s],T=r[a+1],M=r[n+1],y=r[s+1];const F=e.canvasPadding/this.renderer.canvasContext.activeResolution;if(F>0){const{a:G,b:O,c:V,d:W}=e.worldTransform,q=(m+C+f)/3,E=(T+M+y)/3;let _=m-q,g=T-E,S=G*_+V*g,A=O*_+W*g,H=Math.sqrt(S*S+A*A),D=1+F/H;m=q+_*D,T=E+g*D,_=C-q,g=M-E,S=G*_+V*g,A=O*_+W*g,H=Math.sqrt(S*S+A*A),D=1+F/H,C=q+_*D,M=E+g*D,_=f-q,g=y-E,S=G*_+V*g,A=O*_+W*g,H=Math.sqrt(S*S+A*A),D=1+F/H,f=q+_*D,y=E+g*D}i.save(),i.beginPath(),i.moveTo(m,T),i.lineTo(C,M),i.lineTo(f,y),i.closePath(),i.clip();const N=h*p+u*v+c*x-p*v-u*c-h*x,Y=m*p+u*f+C*x-p*f-u*C-m*x,k=h*C+m*v+c*f-C*v-m*c-h*f,z=h*p*f+u*C*v+m*c*x-m*p*v-u*c*f-h*C*x,J=T*p+u*y+M*x-p*y-u*M-T*x,K=h*M+T*v+c*y-M*v-T*c-h*y,Q=h*p*y+u*M*v+T*c*x-T*p*v-u*c*y-h*M*x;i.transform(Y/N,J/N,k/N,K/N,z/N,Q/N),i.drawImage(b,0,0,U*o.resolution,d*o.resolution,0,0,U,d),i.restore(),this.renderer.canvasContext.invalidateBlendMode()}renderMeshFlat(e){const a=this.renderer.canvasContext.activeContext,n=e.geometry.getBuffer("aVertexPosition").data,s=n.length/2;a.beginPath();for(let i=1;i<s-2;++i){const r=i*2,t=n[r],w=n[r+1],P=n[r+2],o=n[r+3],U=n[r+4],d=n[r+5];a.moveTo(t,w),a.lineTo(P,o),a.lineTo(U,d)}a.fillStyle="#FF0000",a.fill(),a.closePath()}destroy(){this.renderer=null}}j.extension={name:"mesh",type:I.ExtensionType.CanvasRendererPlugin},I.extensions.add(j),I.settings.MESH_CANVAS_PADDING=0,R.MeshMaterial.prototype._renderCanvas=function(l,e){l.plugins.mesh.render(e)},B.NineSlicePlane.prototype._cachedTint=16777215,B.NineSlicePlane.prototype._tintedCanvas=null,B.NineSlicePlane.prototype._canvasUvs=null,B.NineSlicePlane.prototype._renderCanvas=function(l){const e=l.canvasContext.activeContext,a=this.worldTransform,n=this.tint!==16777215,s=this.texture;if(!s.valid)return;n&&this._cachedTint!==this.tint&&(this._cachedTint=this.tint,this._tintedCanvas=L.canvasUtils.getTintedCanvas(this,this.tint));const i=n?this._tintedCanvas:s.baseTexture.getDrawableSource();this._canvasUvs||(this._canvasUvs=[0,0,0,0,0,0,0,0]);const r=this.vertices,t=this._canvasUvs,w=n?0:s.frame.x,P=n?0:s.frame.y,o=w+s.frame.width,U=P+s.frame.height;t[0]=w,t[1]=w+this._leftWidth,t[2]=o-this._rightWidth,t[3]=o,t[4]=P,t[5]=P+this._topHeight,t[6]=U-this._bottomHeight,t[7]=U;for(let d=0;d<8;d++)t[d]*=s.baseTexture.resolution;e.globalAlpha=this.worldAlpha,l.canvasContext.setBlendMode(this.blendMode),l.canvasContext.setContextTransform(a,this.roundPixels);for(let d=0;d<3;d++)for(let b=0;b<3;b++){const h=b*2+d*8,c=Math.max(1,t[b+1]-t[b]),v=Math.max(1,t[d+5]-t[d+4]),u=Math.max(1,r[h+10]-r[h]),p=Math.max(1,r[h+11]-r[h+1]);e.drawImage(i,t[b],t[d+4],c,v,r[h],r[h+1],u,p)}};let X=!1;R.Mesh.prototype._cachedTint=16777215,R.Mesh.prototype._tintedCanvas=null,R.Mesh.prototype._cachedTexture=null,R.Mesh.prototype._renderCanvas=function(l){this.shader.uvMatrix&&(this.shader.uvMatrix.update(),this.calculateUvs()),this.material._renderCanvas?this.material._renderCanvas(l,this):X||(X=!0,globalThis.console&&console.warn("Mesh with custom shaders are not supported in CanvasRenderer."))},R.Mesh.prototype._canvasPadding=null,Object.defineProperty(R.Mesh.prototype,"canvasPadding",{get(){return this._canvasPadding!==null?this._canvasPadding:I.settings.MESH_CANVAS_PADDING},set(l){this._canvasPadding=l}}),B.SimpleMesh.prototype._renderCanvas=function(l){this.autoUpdate&&this.geometry.getBuffer("aVertexPosition").update(),this.shader.update&&this.shader.update(),this.calculateUvs(),this.material._renderCanvas(l,this)},B.SimpleRope.prototype._renderCanvas=function(l){(this.autoUpdate||this.geometry._width!==this.shader.texture.height)&&(this.geometry._width=this.shader.texture.height,this.geometry.update()),this.shader.update&&this.shader.update(),this.calculateUvs(),this.material._renderCanvas(l,this)},exports.CanvasMeshRenderer=j;
 //# sourceMappingURL=canvas-mesh.min.js.map

package.json

 {
   "name": "@pixi/canvas-mesh",
-  "version": "6.5.3",
+  "version": "7.0.0-alpha",
   "main": "dist/cjs/canvas-mesh.js",
   "module": "dist/esm/canvas-mesh.mjs",
-  "bundle": "dist/browser/canvas-mesh.js",
   "types": "index.d.ts",
@@ -36,16 +35,13 @@ "exports": {
   "files": [
-    "lib",
     "dist",
     "*.d.ts"
   ],
-  "peerDependencies": {
-    "@pixi/canvas-display": "6.5.3",
-    "@pixi/canvas-renderer": "6.5.3",
-    "@pixi/constants": "6.5.3",
-    "@pixi/core": "6.5.3",
-    "@pixi/mesh": "6.5.3",
-    "@pixi/mesh-extras": "6.5.3",
-    "@pixi/settings": "6.5.3"
-  },
-  "gitHead": "28e6b2841a65837a5e2873a3d5a9c27cabbe795a"
+  "pixiRequirements": [
+    "@pixi/canvas-display",
+    "@pixi/canvas-renderer",
+    "@pixi/core",
+    "@pixi/mesh",
+    "@pixi/mesh-extras"
+  ],
+  "gitHead": "da993226df64b804a9c00ed9ee4d011191467b8a"
 }

README.md

@@ -12,6 +12,3 @@ # @pixi/canvas-mesh
 ```js
-import { CanvasMeshRenderer } from '@pixi/canvas-mesh';
-import { extensions } from '@pixi/core';
-
-extensions.add(CanvasMeshRenderer);
+import '@pixi/canvas-mesh';
 ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

149669

decreased by-36.93%

Number of package files

13

decreased by-23.53%

Lines of code

651

decreased by-53.23%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

13

decreased by-18.75%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes