@pixi/canvas-sprite-tiling - npm Package Compare versions

Comparing version 5.3.4 to 5.3.5

dist/canvas-sprite-tiling.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.3.4
- * Compiled Mon, 14 Dec 2020 19:48:09 UTC
+ * @pixi/canvas-sprite-tiling - v5.3.5
+ * Compiled Thu, 17 Dec 2020 18:23:23 UTC
  *
@@ -9,5 +9,7 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
 this.PIXI = this.PIXI || {};
-(function (spriteTiling, canvasRenderer, utils) {
+(function (spriteTiling, canvasRenderer, utils, math) {
     'use strict';
 
+    var tempMatrix = new math.Matrix();
+    var tempPoints = [new math.Point(), new math.Point(), new math.Point(), new math.Point()];
     /**
@@ -31,4 +33,2 @@ * Renders the object using the Canvas renderer
         var baseTextureResolution = baseTexture.resolution;
-        var modX = ((this.tilePosition.x / this.tileScale.x) % texture._frame.width) * baseTextureResolution;
-        var modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution;
         // create a nice shiny pattern!
@@ -53,20 +53,31 @@ if (this._textureID !== this._texture._updateID || this._cachedTint !== this.tint) {
         renderer.setBlendMode(this.blendMode);
-        renderer.setContextTransform(transform);
+        this.tileTransform.updateLocalTransform();
+        var lt = this.tileTransform.localTransform;
+        var W = this._width;
+        var H = this._height;
+        tempMatrix.identity();
+        tempMatrix.copyFrom(lt);
+        tempMatrix.prepend(transform);
+        renderer.setContextTransform(tempMatrix);
         // fill the pattern!
         context.fillStyle = this._canvasPattern;
-        // TODO - this should be rolled into the setTransform above..
-        context.scale(this.tileScale.x / baseTextureResolution, this.tileScale.y / baseTextureResolution);
-        var anchorX = this.anchor.x * -this._width;
-        var anchorY = this.anchor.y * -this._height;
-        if (this.uvRespectAnchor) {
-            context.translate(modX, modY);
-            context.fillRect(-modX + anchorX, -modY + anchorY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+        var anchorX = this.uvRespectAnchor ? this.anchor.x * -W : 0;
+        var anchorY = this.uvRespectAnchor ? this.anchor.y * -H : 0;
+        tempPoints[0].set(anchorX, anchorY);
+        tempPoints[1].set(anchorX + W, anchorY);
+        tempPoints[2].set(anchorX + W, anchorY + H);
+        tempPoints[3].set(anchorX, anchorY + H);
+        for (var i = 0; i < 4; i++) {
+            lt.applyInverse(tempPoints[i], tempPoints[i]);
         }
-        else {
-            context.translate(modX + anchorX, modY + anchorY);
-            context.fillRect(-modX, -modY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+        context.beginPath();
+        context.moveTo(tempPoints[0].x, tempPoints[0].y);
+        for (var i = 1; i < 4; i++) {
+            context.lineTo(tempPoints[i].x, tempPoints[i].y);
         }
+        context.closePath();
+        context.fill();
     };
 
-}(PIXI, PIXI, PIXI.utils));
+}(PIXI, PIXI, PIXI.utils, PIXI));
 //# sourceMappingURL=canvas-sprite-tiling.js.map

dist/canvas-sprite-tiling.min.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.3.4
- * Compiled Mon, 14 Dec 2020 19:48:09 UTC
+ * @pixi/canvas-sprite-tiling - v5.3.5
+ * Compiled Thu, 17 Dec 2020 18:23:23 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
  */
-this.PIXI=this.PIXI||{},function(t,e,i){"use strict";t.TilingSprite.prototype._renderCanvas=function(t){var a=this._texture;if(a.baseTexture.valid){var s=t.context,h=this.worldTransform,n=a.baseTexture,r=n.getDrawableSource(),l=n.resolution,c=this.tilePosition.x/this.tileScale.x%a._frame.width*l,o=this.tilePosition.y/this.tileScale.y%a._frame.height*l;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var _=new i.CanvasRenderTarget(a._frame.width,a._frame.height,l);16777215!==this.tint?(this._tintedCanvas=e.canvasUtils.getTintedCanvas(this,this.tint),_.context.drawImage(this._tintedCanvas,0,0)):_.context.drawImage(r,-a._frame.x*l,-a._frame.y*l),this._cachedTint=this.tint,this._canvasPattern=_.context.createPattern(_.canvas,"repeat")}s.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),t.setContextTransform(h),s.fillStyle=this._canvasPattern,s.scale(this.tileScale.x/l,this.tileScale.y/l);var d=this.anchor.x*-this._width,x=this.anchor.y*-this._height;this.uvRespectAnchor?(s.translate(c,o),s.fillRect(-c+d,-o+x,this._width/this.tileScale.x*l,this._height/this.tileScale.y*l)):(s.translate(c+d,o+x),s.fillRect(-c,-o,this._width/this.tileScale.x*l,this._height/this.tileScale.y*l))}}}(PIXI,PIXI,PIXI.utils);
+this.PIXI=this.PIXI||{},function(t,e,i,a){"use strict";var n=new a.Matrix,s=[new a.Point,new a.Point,new a.Point,new a.Point];t.TilingSprite.prototype._renderCanvas=function(t){var a=this._texture;if(a.baseTexture.valid){var r=t.context,h=this.worldTransform,o=a.baseTexture,c=o.getDrawableSource(),l=o.resolution;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var d=new i.CanvasRenderTarget(a._frame.width,a._frame.height,l);16777215!==this.tint?(this._tintedCanvas=e.canvasUtils.getTintedCanvas(this,this.tint),d.context.drawImage(this._tintedCanvas,0,0)):d.context.drawImage(c,-a._frame.x*l,-a._frame.y*l),this._cachedTint=this.tint,this._canvasPattern=d.context.createPattern(d.canvas,"repeat")}r.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),this.tileTransform.updateLocalTransform();var v=this.tileTransform.localTransform,_=this._width,I=this._height;n.identity(),n.copyFrom(v),n.prepend(h),t.setContextTransform(n),r.fillStyle=this._canvasPattern;var f=this.uvRespectAnchor?this.anchor.x*-_:0,u=this.uvRespectAnchor?this.anchor.y*-I:0;s[0].set(f,u),s[1].set(f+_,u),s[2].set(f+_,u+I),s[3].set(f,u+I);for(var x=0;x<4;x++)v.applyInverse(s[x],s[x]);r.beginPath(),r.moveTo(s[0].x,s[0].y);for(x=1;x<4;x++)r.lineTo(s[x].x,s[x].y);r.closePath(),r.fill()}}}(PIXI,PIXI,PIXI.utils,PIXI);
 //# sourceMappingURL=canvas-sprite-tiling.min.js.map

lib/canvas-sprite-tiling.es.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.3.4
- * Compiled Mon, 14 Dec 2020 19:48:09 UTC
+ * @pixi/canvas-sprite-tiling - v5.3.5
+ * Compiled Thu, 17 Dec 2020 18:23:23 UTC
  *
@@ -11,3 +11,6 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
 import { CanvasRenderTarget } from '@pixi/utils';
+import { Matrix, Point } from '@pixi/math';
 
+var tempMatrix = new Matrix();
+var tempPoints = [new Point(), new Point(), new Point(), new Point()];
 /**
@@ -31,4 +34,2 @@ * Renders the object using the Canvas renderer
     var baseTextureResolution = baseTexture.resolution;
-    var modX = ((this.tilePosition.x / this.tileScale.x) % texture._frame.width) * baseTextureResolution;
-    var modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution;
     // create a nice shiny pattern!
@@ -53,18 +54,29 @@ if (this._textureID !== this._texture._updateID || this._cachedTint !== this.tint) {
     renderer.setBlendMode(this.blendMode);
-    renderer.setContextTransform(transform);
+    this.tileTransform.updateLocalTransform();
+    var lt = this.tileTransform.localTransform;
+    var W = this._width;
+    var H = this._height;
+    tempMatrix.identity();
+    tempMatrix.copyFrom(lt);
+    tempMatrix.prepend(transform);
+    renderer.setContextTransform(tempMatrix);
     // fill the pattern!
     context.fillStyle = this._canvasPattern;
-    // TODO - this should be rolled into the setTransform above..
-    context.scale(this.tileScale.x / baseTextureResolution, this.tileScale.y / baseTextureResolution);
-    var anchorX = this.anchor.x * -this._width;
-    var anchorY = this.anchor.y * -this._height;
-    if (this.uvRespectAnchor) {
-        context.translate(modX, modY);
-        context.fillRect(-modX + anchorX, -modY + anchorY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+    var anchorX = this.uvRespectAnchor ? this.anchor.x * -W : 0;
+    var anchorY = this.uvRespectAnchor ? this.anchor.y * -H : 0;
+    tempPoints[0].set(anchorX, anchorY);
+    tempPoints[1].set(anchorX + W, anchorY);
+    tempPoints[2].set(anchorX + W, anchorY + H);
+    tempPoints[3].set(anchorX, anchorY + H);
+    for (var i = 0; i < 4; i++) {
+        lt.applyInverse(tempPoints[i], tempPoints[i]);
     }
-    else {
-        context.translate(modX + anchorX, modY + anchorY);
-        context.fillRect(-modX, -modY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+    context.beginPath();
+    context.moveTo(tempPoints[0].x, tempPoints[0].y);
+    for (var i = 1; i < 4; i++) {
+        context.lineTo(tempPoints[i].x, tempPoints[i].y);
     }
+    context.closePath();
+    context.fill();
 };
 //# sourceMappingURL=canvas-sprite-tiling.es.js.map

lib/canvas-sprite-tiling.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.3.4
- * Compiled Mon, 14 Dec 2020 19:48:09 UTC
+ * @pixi/canvas-sprite-tiling - v5.3.5
+ * Compiled Thu, 17 Dec 2020 18:23:23 UTC
  *
@@ -13,3 +13,6 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
 var utils = require('@pixi/utils');
+var math = require('@pixi/math');
 
+var tempMatrix = new math.Matrix();
+var tempPoints = [new math.Point(), new math.Point(), new math.Point(), new math.Point()];
 /**
@@ -33,4 +36,2 @@ * Renders the object using the Canvas renderer
     var baseTextureResolution = baseTexture.resolution;
-    var modX = ((this.tilePosition.x / this.tileScale.x) % texture._frame.width) * baseTextureResolution;
-    var modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution;
     // create a nice shiny pattern!
@@ -55,18 +56,29 @@ if (this._textureID !== this._texture._updateID || this._cachedTint !== this.tint) {
     renderer.setBlendMode(this.blendMode);
-    renderer.setContextTransform(transform);
+    this.tileTransform.updateLocalTransform();
+    var lt = this.tileTransform.localTransform;
+    var W = this._width;
+    var H = this._height;
+    tempMatrix.identity();
+    tempMatrix.copyFrom(lt);
+    tempMatrix.prepend(transform);
+    renderer.setContextTransform(tempMatrix);
     // fill the pattern!
     context.fillStyle = this._canvasPattern;
-    // TODO - this should be rolled into the setTransform above..
-    context.scale(this.tileScale.x / baseTextureResolution, this.tileScale.y / baseTextureResolution);
-    var anchorX = this.anchor.x * -this._width;
-    var anchorY = this.anchor.y * -this._height;
-    if (this.uvRespectAnchor) {
-        context.translate(modX, modY);
-        context.fillRect(-modX + anchorX, -modY + anchorY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+    var anchorX = this.uvRespectAnchor ? this.anchor.x * -W : 0;
+    var anchorY = this.uvRespectAnchor ? this.anchor.y * -H : 0;
+    tempPoints[0].set(anchorX, anchorY);
+    tempPoints[1].set(anchorX + W, anchorY);
+    tempPoints[2].set(anchorX + W, anchorY + H);
+    tempPoints[3].set(anchorX, anchorY + H);
+    for (var i = 0; i < 4; i++) {
+        lt.applyInverse(tempPoints[i], tempPoints[i]);
     }
-    else {
-        context.translate(modX + anchorX, modY + anchorY);
-        context.fillRect(-modX, -modY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+    context.beginPath();
+    context.moveTo(tempPoints[0].x, tempPoints[0].y);
+    for (var i = 1; i < 4; i++) {
+        context.lineTo(tempPoints[i].x, tempPoints[i].y);
     }
+    context.closePath();
+    context.fill();
 };
 //# sourceMappingURL=canvas-sprite-tiling.js.map

package.json

 {
   "name": "@pixi/canvas-sprite-tiling",
-  "version": "5.3.4",
+  "version": "5.3.5",
   "main": "lib/canvas-sprite-tiling.js",
@@ -28,8 +28,9 @@ "module": "lib/canvas-sprite-tiling.es.js",
   "dependencies": {
-    "@pixi/canvas-renderer": "5.3.4",
-    "@pixi/canvas-sprite": "5.3.4",
-    "@pixi/sprite-tiling": "5.3.4",
-    "@pixi/utils": "5.3.4"
+    "@pixi/canvas-renderer": "5.3.2",
+    "@pixi/canvas-sprite": "5.3.2",
+    "@pixi/math": "5.3.5",
+    "@pixi/sprite-tiling": "5.3.2",
+    "@pixi/utils": "5.3.2"
   },
-  "gitHead": "f6a5f18e9d5a9b6e57d7bdcb0c369f88cd83530c"
+  "gitHead": "b5353da2693f0112230cd2b1be581f9bff0ce2a1"
 }

No alert changes

Improved metrics

Total package byte prevSize

37677

5.15%

Lines of code

249

16.36%

Worsened metrics

Dependency count

5

25%

Dependency changes

• + Added

  @pixi/math@5.3.5

• + Added

  @pixi/canvas-renderer@5.3.2
  (transitive)

• + Added

  @pixi/canvas-sprite@5.3.2
  (transitive)

• + Added

  @pixi/constants@5.3.2
  (transitive)

• + Added

  @pixi/core@5.3.2
  (transitive)

• + Added

  @pixi/display@5.3.2
  (transitive)

• + Added

  @pixi/math@5.3.25.3.5
  (transitive)

• + Added

  @pixi/runner@5.3.2
  (transitive)

• + Added

  @pixi/settings@5.3.2
  (transitive)

• + Added

  @pixi/sprite@5.3.2
  (transitive)

• + Added

  @pixi/sprite-tiling@5.3.2
  (transitive)

• + Added

  @pixi/ticker@5.3.2
  (transitive)

• + Added

  @pixi/utils@5.3.2
  (transitive)

• - Removed

  @pixi/canvas-renderer@5.3.4
  (transitive)

• - Removed

  @pixi/canvas-sprite@5.3.4
  (transitive)

• - Removed

  @pixi/constants@5.3.4
  (transitive)

• - Removed

  @pixi/core@5.3.4
  (transitive)

• - Removed

  @pixi/display@5.3.4
  (transitive)

• - Removed

  @pixi/math@5.3.4
  (transitive)

• - Removed

  @pixi/runner@5.3.4
  (transitive)

• - Removed

  @pixi/settings@5.3.4
  (transitive)

• - Removed

  @pixi/sprite@5.3.4
  (transitive)

• - Removed

  @pixi/sprite-tiling@5.3.4
  (transitive)

• - Removed

  @pixi/ticker@5.3.4
  (transitive)

• - Removed

  @pixi/utils@5.3.4
  (transitive)

• Updated

  @pixi/canvas-renderer@5.3.2

• Updated

  @pixi/canvas-sprite@5.3.2

• Updated

  @pixi/sprite-tiling@5.3.2

• Updated

  @pixi/utils@5.3.2