@pixi/canvas-sprite - npm Package Compare versions

Comparing version 5.0.0-alpha.3 to 5.0.0-rc

lib/canvas-sprite.es.js

 /*!
- * @pixi/canvas-sprite - v5.0.0-alpha.3
- * Compiled Tue, 03 Jul 2018 04:08:21 UTC
+ * @pixi/canvas-sprite - v5.0.0-rc
+ * Compiled Fri, 01 Feb 2019 04:50:10 UTC
  *
@@ -8,4 +8,4 @@ * @pixi/canvas-sprite is licensed under the MIT License.
  */
-import { SCALE_MODES } from '@pixi/constants';
-import { GroupD8, Matrix } from '@pixi/math';
+import { SCALE_MODES, BLEND_MODES } from '@pixi/constants';
+import { Matrix, GroupD8 } from '@pixi/math';
 import { hex2rgb, rgb2hex } from '@pixi/utils';
@@ -18,2 +18,5 @@ import { canUseNewCanvasBlendModes } from '@pixi/canvas-renderer';
  *
+ * Tinting with the CanvasRenderer involves creating a new canvas to use as a texture,
+ * so be aware of the performance implications.
+ *
  * @class
@@ -31,4 +34,4 @@ * @memberof PIXI
      */
-    getTintedTexture: function (sprite$$1, color) {
-        var texture = sprite$$1._texture;
+    getTintedTexture: function (sprite, color) {
+        var texture = sprite._texture;
 
@@ -286,5 +289,7 @@ color = CanvasTinter.roundColor(color);
      * @memberof PIXI.CanvasTinter
-     * @type {tintMethodFunctionType}
+     * @type {Function}
      */
-    tintMethod: 0,
+    tintMethod: function () { // jslint-disable no-empty-function
+
+    },
 };
@@ -297,2 +302,7 @@
 /**
+ * Types that can be passed to drawImage
+ * @typedef {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap} ICanvasImageSource
+ */
+
+/**
  * @author Mat Groves
@@ -313,3 +323,3 @@ *
  * @class
- * @private
+ * @protected
  * @memberof PIXI
@@ -327,6 +337,7 @@ */
  */
-CanvasSpriteRenderer.prototype.render = function render (sprite$$1)
+CanvasSpriteRenderer.prototype.render = function render (sprite)
 {
-    var texture = sprite$$1._texture;
+    var texture = sprite._texture;
     var renderer = this.renderer;
+    var context = renderer.context;
 
@@ -336,3 +347,3 @@ var width = texture._frame.width;
 
-    var wt = sprite$$1.transform.worldTransform;
+    var wt = sprite.transform.worldTransform;
     var dx = 0;
@@ -348,107 +359,129 @@ var dy = 0;
 
-    renderer.setBlendMode(sprite$$1.blendMode);
-
-    //  Ignore null sources
-    if (texture.valid)
+    if (!texture.valid)
     {
-        renderer.context.globalAlpha = sprite$$1.worldAlpha;
+        return;
+    }
 
-        // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture
-        var smoothingEnabled = texture.baseTexture.scaleMode === SCALE_MODES.LINEAR;
+    renderer.setBlendMode(sprite.blendMode, true);
 
-        if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled)
-        {
-            renderer.context[renderer.smoothProperty] = smoothingEnabled;
-        }
+    renderer.context.globalAlpha = sprite.worldAlpha;
 
-        if (texture.trim)
-        {
-            dx = (texture.trim.width / 2) + texture.trim.x - (sprite$$1.anchor.x * texture.orig.width);
-            dy = (texture.trim.height / 2) + texture.trim.y - (sprite$$1.anchor.y * texture.orig.height);
-        }
-        else
-        {
-            dx = (0.5 - sprite$$1.anchor.x) * texture.orig.width;
-            dy = (0.5 - sprite$$1.anchor.y) * texture.orig.height;
-        }
+    // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture
+    var smoothingEnabled = texture.baseTexture.scaleMode === SCALE_MODES.LINEAR;
 
-        if (texture.rotate)
-        {
-            wt.copyTo(canvasRenderWorldTransform);
-            wt = canvasRenderWorldTransform;
-            GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy);
-            // the anchor has already been applied above, so lets set it to zero
-            dx = 0;
-            dy = 0;
-        }
+    if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled)
+    {
+        context[renderer.smoothProperty] = smoothingEnabled;
+    }
 
-        dx -= width / 2;
-        dy -= height / 2;
+    if (texture.trim)
+    {
+        dx = (texture.trim.width / 2) + texture.trim.x - (sprite.anchor.x * texture.orig.width);
+        dy = (texture.trim.height / 2) + texture.trim.y - (sprite.anchor.y * texture.orig.height);
+    }
+    else
+    {
+        dx = (0.5 - sprite.anchor.x) * texture.orig.width;
+        dy = (0.5 - sprite.anchor.y) * texture.orig.height;
+    }
 
-        // Allow for pixel rounding
-        if (renderer.roundPixels)
-        {
-            renderer.context.setTransform(
-                wt.a,
-                wt.b,
-                wt.c,
-                wt.d,
-                (wt.tx * renderer.resolution) | 0,
-                (wt.ty * renderer.resolution) | 0
-            );
+    if (texture.rotate)
+    {
+        wt.copyTo(canvasRenderWorldTransform);
+        wt = canvasRenderWorldTransform;
+        GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy);
+        // the anchor has already been applied above, so lets set it to zero
+        dx = 0;
+        dy = 0;
+    }
 
-            dx = dx | 0;
-            dy = dy | 0;
-        }
-        else
-        {
-            renderer.context.setTransform(
-                wt.a,
-                wt.b,
-                wt.c,
-                wt.d,
-                wt.tx * renderer.resolution,
-                wt.ty * renderer.resolution
-            );
-        }
+    dx -= width / 2;
+    dy -= height / 2;
 
-        var resolution = texture.baseTexture.resolution;
+    // Allow for pixel rounding
+    if (sprite.roundPixels)
+    {
+        renderer.context.setTransform(
+            wt.a,
+            wt.b,
+            wt.c,
+            wt.d,
+            (wt.tx * renderer.resolution) | 0,
+            (wt.ty * renderer.resolution) | 0
+        );
 
-        if (sprite$$1.tint !== 0xFFFFFF)
-        {
-            if (sprite$$1.cachedTint !== sprite$$1.tint || sprite$$1.tintedTexture.tintId !== sprite$$1._texture._updateID)
-            {
-                sprite$$1.cachedTint = sprite$$1.tint;
+        dx = dx | 0;
+        dy = dy | 0;
+    }
+    else
+    {
+        renderer.context.setTransform(
+            wt.a,
+            wt.b,
+            wt.c,
+            wt.d,
+            wt.tx * renderer.resolution,
+            wt.ty * renderer.resolution
+        );
+    }
 
-                // TODO clean up caching - how to clean up the caches?
-                sprite$$1.tintedTexture = CanvasTinter.getTintedTexture(sprite$$1, sprite$$1.tint);
-            }
+    var resolution = texture.baseTexture.resolution;
+    var outerBlend = renderer._outerBlend;
 
-            renderer.context.drawImage(
-                source,
-                0,
-                0,
-                width * resolution,
-                height * resolution,
-                dx * renderer.resolution,
-                dy * renderer.resolution,
-                width * renderer.resolution,
-                height * renderer.resolution
-            );
-        }
-        else
+    if (outerBlend)
+    {
+        context.save();
+        context.beginPath();
+        context.rect(
+            dx * renderer.resolution,
+            dy * renderer.resolution,
+            width * renderer.resolution,
+            height * renderer.resolution
+        );
+        context.clip();
+    }
+
+    if (sprite.tint !== 0xFFFFFF)
+    {
+        if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID)
         {
-            renderer.context.drawImage(
-                source,
-                texture._frame.x * resolution,
-                texture._frame.y * resolution,
-                width * resolution,
-                height * resolution,
-                dx * renderer.resolution,
-                dy * renderer.resolution,
-                width * renderer.resolution,
-                height * renderer.resolution
-            );
+            sprite.cachedTint = sprite.tint;
+
+            // TODO clean up caching - how to clean up the caches?
+            sprite.tintedTexture = CanvasTinter.getTintedTexture(sprite, sprite.tint);
         }
+
+        context.drawImage(
+            source,
+            0,
+            0,
+            width * resolution,
+            height * resolution,
+            dx * renderer.resolution,
+            dy * renderer.resolution,
+            width * renderer.resolution,
+            height * renderer.resolution
+        );
     }
+    else
+    {
+        context.drawImage(
+            source,
+            texture._frame.x * resolution,
+            texture._frame.y * resolution,
+            width * resolution,
+            height * resolution,
+            dx * renderer.resolution,
+            dy * renderer.resolution,
+            width * renderer.resolution,
+            height * renderer.resolution
+        );
+    }
+
+    if (outerBlend)
+    {
+        context.restore();
+    }
+    // just in case, leaking outer blend here will be catastrophic!
+    renderer.setBlendMode(BLEND_MODES.NORMAL);
 };
@@ -475,3 +508,3 @@
 {
-    renderer.plugins[this.pluginName].render(this);
+    renderer.plugins.sprite.render(this);
 };
@@ -478,0 +511,0 @@

lib/canvas-sprite.js

 /*!
- * @pixi/canvas-sprite - v5.0.0-alpha.3
- * Compiled Tue, 03 Jul 2018 04:08:21 UTC
+ * @pixi/canvas-sprite - v5.0.0-rc
+ * Compiled Fri, 01 Feb 2019 04:50:10 UTC
  *
@@ -21,2 +21,5 @@ * @pixi/canvas-sprite is licensed under the MIT License.
  *
+ * Tinting with the CanvasRenderer involves creating a new canvas to use as a texture,
+ * so be aware of the performance implications.
+ *
  * @class
@@ -288,5 +291,7 @@ * @memberof PIXI
      * @memberof PIXI.CanvasTinter
-     * @type {tintMethodFunctionType}
+     * @type {Function}
      */
-    tintMethod: 0,
+    tintMethod: function () { // jslint-disable no-empty-function
+
+    },
 };
@@ -299,2 +304,7 @@
 /**
+ * Types that can be passed to drawImage
+ * @typedef {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap} ICanvasImageSource
+ */
+
+/**
  * @author Mat Groves
@@ -315,3 +325,3 @@ *
  * @class
- * @private
+ * @protected
  * @memberof PIXI
@@ -333,2 +343,3 @@ */
     var renderer = this.renderer;
+    var context = renderer.context;
 
@@ -349,107 +360,129 @@ var width = texture._frame.width;
 
-    renderer.setBlendMode(sprite$$1.blendMode);
-
-    //  Ignore null sources
-    if (texture.valid)
+    if (!texture.valid)
     {
-        renderer.context.globalAlpha = sprite$$1.worldAlpha;
+        return;
+    }
 
-        // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture
-        var smoothingEnabled = texture.baseTexture.scaleMode === constants.SCALE_MODES.LINEAR;
+    renderer.setBlendMode(sprite$$1.blendMode, true);
 
-        if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled)
-        {
-            renderer.context[renderer.smoothProperty] = smoothingEnabled;
-        }
+    renderer.context.globalAlpha = sprite$$1.worldAlpha;
 
-        if (texture.trim)
-        {
-            dx = (texture.trim.width / 2) + texture.trim.x - (sprite$$1.anchor.x * texture.orig.width);
-            dy = (texture.trim.height / 2) + texture.trim.y - (sprite$$1.anchor.y * texture.orig.height);
-        }
-        else
-        {
-            dx = (0.5 - sprite$$1.anchor.x) * texture.orig.width;
-            dy = (0.5 - sprite$$1.anchor.y) * texture.orig.height;
-        }
+    // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture
+    var smoothingEnabled = texture.baseTexture.scaleMode === constants.SCALE_MODES.LINEAR;
 
-        if (texture.rotate)
-        {
-            wt.copyTo(canvasRenderWorldTransform);
-            wt = canvasRenderWorldTransform;
-            math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy);
-            // the anchor has already been applied above, so lets set it to zero
-            dx = 0;
-            dy = 0;
-        }
+    if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled)
+    {
+        context[renderer.smoothProperty] = smoothingEnabled;
+    }
 
-        dx -= width / 2;
-        dy -= height / 2;
+    if (texture.trim)
+    {
+        dx = (texture.trim.width / 2) + texture.trim.x - (sprite$$1.anchor.x * texture.orig.width);
+        dy = (texture.trim.height / 2) + texture.trim.y - (sprite$$1.anchor.y * texture.orig.height);
+    }
+    else
+    {
+        dx = (0.5 - sprite$$1.anchor.x) * texture.orig.width;
+        dy = (0.5 - sprite$$1.anchor.y) * texture.orig.height;
+    }
 
-        // Allow for pixel rounding
-        if (renderer.roundPixels)
-        {
-            renderer.context.setTransform(
-                wt.a,
-                wt.b,
-                wt.c,
-                wt.d,
-                (wt.tx * renderer.resolution) | 0,
-                (wt.ty * renderer.resolution) | 0
-            );
+    if (texture.rotate)
+    {
+        wt.copyTo(canvasRenderWorldTransform);
+        wt = canvasRenderWorldTransform;
+        math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy);
+        // the anchor has already been applied above, so lets set it to zero
+        dx = 0;
+        dy = 0;
+    }
 
-            dx = dx | 0;
-            dy = dy | 0;
-        }
-        else
-        {
-            renderer.context.setTransform(
-                wt.a,
-                wt.b,
-                wt.c,
-                wt.d,
-                wt.tx * renderer.resolution,
-                wt.ty * renderer.resolution
-            );
-        }
+    dx -= width / 2;
+    dy -= height / 2;
 
-        var resolution = texture.baseTexture.resolution;
+    // Allow for pixel rounding
+    if (sprite$$1.roundPixels)
+    {
+        renderer.context.setTransform(
+            wt.a,
+            wt.b,
+            wt.c,
+            wt.d,
+            (wt.tx * renderer.resolution) | 0,
+            (wt.ty * renderer.resolution) | 0
+        );
 
-        if (sprite$$1.tint !== 0xFFFFFF)
-        {
-            if (sprite$$1.cachedTint !== sprite$$1.tint || sprite$$1.tintedTexture.tintId !== sprite$$1._texture._updateID)
-            {
-                sprite$$1.cachedTint = sprite$$1.tint;
+        dx = dx | 0;
+        dy = dy | 0;
+    }
+    else
+    {
+        renderer.context.setTransform(
+            wt.a,
+            wt.b,
+            wt.c,
+            wt.d,
+            wt.tx * renderer.resolution,
+            wt.ty * renderer.resolution
+        );
+    }
 
-                // TODO clean up caching - how to clean up the caches?
-                sprite$$1.tintedTexture = CanvasTinter.getTintedTexture(sprite$$1, sprite$$1.tint);
-            }
+    var resolution = texture.baseTexture.resolution;
+    var outerBlend = renderer._outerBlend;
 
-            renderer.context.drawImage(
-                source,
-                0,
-                0,
-                width * resolution,
-                height * resolution,
-                dx * renderer.resolution,
-                dy * renderer.resolution,
-                width * renderer.resolution,
-                height * renderer.resolution
-            );
-        }
-        else
+    if (outerBlend)
+    {
+        context.save();
+        context.beginPath();
+        context.rect(
+            dx * renderer.resolution,
+            dy * renderer.resolution,
+            width * renderer.resolution,
+            height * renderer.resolution
+        );
+        context.clip();
+    }
+
+    if (sprite$$1.tint !== 0xFFFFFF)
+    {
+        if (sprite$$1.cachedTint !== sprite$$1.tint || sprite$$1.tintedTexture.tintId !== sprite$$1._texture._updateID)
         {
-            renderer.context.drawImage(
-                source,
-                texture._frame.x * resolution,
-                texture._frame.y * resolution,
-                width * resolution,
-                height * resolution,
-                dx * renderer.resolution,
-                dy * renderer.resolution,
-                width * renderer.resolution,
-                height * renderer.resolution
-            );
+            sprite$$1.cachedTint = sprite$$1.tint;
+
+            // TODO clean up caching - how to clean up the caches?
+            sprite$$1.tintedTexture = CanvasTinter.getTintedTexture(sprite$$1, sprite$$1.tint);
         }
+
+        context.drawImage(
+            source,
+            0,
+            0,
+            width * resolution,
+            height * resolution,
+            dx * renderer.resolution,
+            dy * renderer.resolution,
+            width * renderer.resolution,
+            height * renderer.resolution
+        );
     }
+    else
+    {
+        context.drawImage(
+            source,
+            texture._frame.x * resolution,
+            texture._frame.y * resolution,
+            width * resolution,
+            height * resolution,
+            dx * renderer.resolution,
+            dy * renderer.resolution,
+            width * renderer.resolution,
+            height * renderer.resolution
+        );
+    }
+
+    if (outerBlend)
+    {
+        context.restore();
+    }
+    // just in case, leaking outer blend here will be catastrophic!
+    renderer.setBlendMode(constants.BLEND_MODES.NORMAL);
 };
@@ -476,3 +509,3 @@
 {
-    renderer.plugins[this.pluginName].render(this);
+    renderer.plugins.sprite.render(this);
 };
@@ -479,0 +512,0 @@

package.json

 {
   "name": "@pixi/canvas-sprite",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-rc",
   "main": "lib/canvas-sprite.js",
   "module": "lib/canvas-sprite.es.js",
-  "description": "PixiJS Application",
+  "description": "Canvas mixin for the sprite package",
   "author": "Mat Groves",
@@ -25,11 +25,12 @@ "contributors": [
   "dependencies": {
-    "@pixi/canvas-renderer": "^5.0.0-alpha.3",
-    "@pixi/constants": "^5.0.0-alpha.3",
-    "@pixi/math": "^5.0.0-alpha.3",
-    "@pixi/sprite": "^5.0.0-alpha.3",
-    "@pixi/utils": "^5.0.0-alpha.3"
+    "@pixi/canvas-renderer": "^5.0.0-rc",
+    "@pixi/constants": "^5.0.0-rc",
+    "@pixi/math": "^5.0.0-rc",
+    "@pixi/sprite": "^5.0.0-rc",
+    "@pixi/utils": "^5.0.0-rc"
   },
   "devDependencies": {
-    "floss": "^2.1.3"
-  }
+    "floss": "^2.1.5"
+  },
+  "gitHead": "9026a1bbca9a9d86b7a3b6d5eb4fa2c3145c2b85"
 }

No alert changes

Improved metrics

Total package byte prevSize

79841

increased by3.22%

Lines of code

855

increased by7.01%

Dependency changes

• Updated@pixi/canvas-renderer@^5.0.0-rc

• Updated@pixi/constants@^5.0.0-rc

• Updated@pixi/math@^5.0.0-rc

• Updated@pixi/sprite@^5.0.0-rc

• Updated@pixi/utils@^5.0.0-rc