@pixi/canvas-graphics - npm Package Compare versions

Comparing version 5.0.0-alpha.3 to 5.0.0-rc

lib/canvas-graphics.es.js

 /*!
- * @pixi/canvas-graphics - v5.0.0-alpha.3
- * Compiled Tue, 03 Jul 2018 04:08:21 UTC
+ * @pixi/canvas-graphics - v5.0.0-rc
+ * Compiled Fri, 01 Feb 2019 04:50:10 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-graphics is licensed under the MIT License.
  */
-import { Matrix, SHAPES } from '@pixi/math';
+import { SHAPES, Matrix } from '@pixi/math';
 import { Graphics } from '@pixi/graphics';
@@ -30,3 +30,3 @@ import { CanvasRenderer } from '@pixi/canvas-renderer';
  * @class
- * @private
+ * @protected
  * @memberof PIXI
@@ -44,18 +44,10 @@ */
  */
-CanvasGraphicsRenderer.prototype.render = function render (graphics$$1)
+CanvasGraphicsRenderer.prototype.render = function render (graphics)
 {
-        var this$1 = this;
-
     var renderer = this.renderer;
     var context = renderer.context;
-    var worldAlpha = graphics$$1.worldAlpha;
-    var transform = graphics$$1.transform.worldTransform;
+    var worldAlpha = graphics.worldAlpha;
+    var transform = graphics.transform.worldTransform;
     var resolution = renderer.resolution;
 
-    // if the tint has changed, set the graphics object to dirty.
-    if (this._prevTint !== this.tint)
-    {
-        this.dirty = true;
-    }
-
     context.setTransform(
@@ -70,19 +62,22 @@ transform.a * resolution,
 
-    if (graphics$$1.dirty)
-    {
-        this.updateGraphicsTint(graphics$$1);
-        graphics$$1.dirty = false;
-    }
+    // update tint if graphics was dirty
+    if (graphics.canvasTintDirty !== graphics.dirty
+        || graphics._prevTint !== graphics.tint)
+    ;
 
-    renderer.setBlendMode(graphics$$1.blendMode);
+    renderer.setBlendMode(graphics.blendMode);
 
-    for (var i = 0; i < graphics$$1.graphicsData.length; i++)
+    var graphicsData = graphics.geometry.graphicsData;
+
+    for (var i = 0; i < graphicsData.length; i++)
     {
-        var data = graphics$$1.graphicsData[i];
+        var data = graphicsData[i];
         var shape = data.shape;
+        var fillStyle = data.fillStyle;
+        var lineStyle = data.lineStyle;
 
-        var fillColor = data._fillTint;
-        var lineColor = data._lineTint;
+        var fillColor = fillStyle.color;// data._fillTint;
+        var lineColor = lineStyle.color;// data._lineTint;
 
-        context.lineWidth = data.lineWidth;
+        context.lineWidth = lineStyle.width;
 
@@ -93,18 +88,20 @@ if (data.type === SHAPES.POLY)
 
-            this$1.renderPolygon(shape.points, shape.closed, context);
+            this.renderPolygon(shape.points, shape.closed, context);
 
             for (var j = 0; j < data.holes.length; j++)
             {
-                this$1.renderPolygon(data.holes[j].points, true, context);
+                //   this.renderPolygon(data.holes[j].points, true, context);
             }
 
-            if (data.fill)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
+
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-            if (data.lineWidth)
+
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -116,11 +113,11 @@ context.stroke();
         {
-            if (data.fillColor || data.fillColor === 0)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fillRect(shape.x, shape.y, shape.width, shape.height);
             }
-            if (data.lineWidth)
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -137,11 +134,12 @@ context.strokeRect(shape.x, shape.y, shape.width, shape.height);
 
-            if (data.fill)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-            if (data.lineWidth)
+
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -179,11 +177,11 @@ context.stroke();
 
-            if (data.fill)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-            if (data.lineWidth)
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -217,12 +215,11 @@ context.stroke();
 
-            if (data.fillColor || data.fillColor === 0)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-
-            if (data.lineWidth)
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -238,16 +235,17 @@ context.stroke();
  *
- * @private
+ * @protected
  * @param {PIXI.Graphics} graphics - the graphics that will have its tint updated
  */
-CanvasGraphicsRenderer.prototype.updateGraphicsTint = function updateGraphicsTint (graphics$$1)
+CanvasGraphicsRenderer.prototype.updateGraphicsTint = function updateGraphicsTint (graphics)
 {
-    graphics$$1._prevTint = graphics$$1.tint;
+    graphics._prevTint = graphics.tint;
+    graphics.canvasTintDirty = graphics.dirty;
 
-    var tintR = ((graphics$$1.tint >> 16) & 0xFF) / 255;
-    var tintG = ((graphics$$1.tint >> 8) & 0xFF) / 255;
-    var tintB = (graphics$$1.tint & 0xFF) / 255;
+    var tintR = ((graphics.tint >> 16) & 0xFF) / 255;
+    var tintG = ((graphics.tint >> 8) & 0xFF) / 255;
+    var tintB = (graphics.tint & 0xFF) / 255;
 
-    for (var i = 0; i < graphics$$1.graphicsData.length; ++i)
+    for (var i = 0; i < graphics.graphicsData.length; ++i)
     {
-        var data = graphics$$1.graphicsData[i];
+        var data = graphics.graphicsData[i];
 
@@ -303,3 +301,3 @@ var fillColor = data.fillColor | 0;
 
-var canvasRenderer$1;
+var canvasRenderer;
 var tempMatrix = new Matrix();
@@ -323,5 +321,5 @@
 
-    if (!canvasRenderer$1)
+    if (!canvasRenderer)
     {
-        canvasRenderer$1 = new CanvasRenderer();
+        canvasRenderer = new CanvasRenderer();
     }
@@ -337,3 +335,3 @@
 
-    canvasRenderer$1.render(this, canvasBuffer, true, tempMatrix);
+    canvasRenderer.render(this, canvasBuffer, true, tempMatrix);
 
@@ -350,2 +348,4 @@ var texture = Texture.from(canvasBuffer.baseTexture._canvasRenderTarget.canvas, {
 
+Graphics.prototype.cachedGraphicsData = [];
+
 /**
@@ -366,2 +366,3 @@ * Renders the object using the Canvas renderer
 
+    this.finishPoly();
     renderer.plugins.graphics.render(this);
@@ -368,0 +369,0 @@ };

lib/canvas-graphics.js

 /*!
- * @pixi/canvas-graphics - v5.0.0-alpha.3
- * Compiled Tue, 03 Jul 2018 04:08:21 UTC
+ * @pixi/canvas-graphics - v5.0.0-rc
+ * Compiled Fri, 01 Feb 2019 04:50:10 UTC
  *
@@ -33,3 +33,3 @@ * @pixi/canvas-graphics is licensed under the MIT License.
  * @class
- * @private
+ * @protected
  * @memberof PIXI
@@ -49,4 +49,2 @@ */
 {
-        var this$1 = this;
-
     var renderer = this.renderer;
@@ -58,8 +56,2 @@ var context = renderer.context;
 
-    // if the tint has changed, set the graphics object to dirty.
-    if (this._prevTint !== this.tint)
-    {
-        this.dirty = true;
-    }
-
     context.setTransform(
@@ -74,19 +66,22 @@ transform.a * resolution,
 
-    if (graphics$$1.dirty)
-    {
-        this.updateGraphicsTint(graphics$$1);
-        graphics$$1.dirty = false;
-    }
+    // update tint if graphics was dirty
+    if (graphics$$1.canvasTintDirty !== graphics$$1.dirty
+        || graphics$$1._prevTint !== graphics$$1.tint)
+    ;
 
     renderer.setBlendMode(graphics$$1.blendMode);
 
-    for (var i = 0; i < graphics$$1.graphicsData.length; i++)
+    var graphicsData = graphics$$1.geometry.graphicsData;
+
+    for (var i = 0; i < graphicsData.length; i++)
     {
-        var data = graphics$$1.graphicsData[i];
+        var data = graphicsData[i];
         var shape = data.shape;
+        var fillStyle = data.fillStyle;
+        var lineStyle = data.lineStyle;
 
-        var fillColor = data._fillTint;
-        var lineColor = data._lineTint;
+        var fillColor = fillStyle.color;// data._fillTint;
+        var lineColor = lineStyle.color;// data._lineTint;
 
-        context.lineWidth = data.lineWidth;
+        context.lineWidth = lineStyle.width;
 
@@ -97,18 +92,20 @@ if (data.type === math.SHAPES.POLY)
 
-            this$1.renderPolygon(shape.points, shape.closed, context);
+            this.renderPolygon(shape.points, shape.closed, context);
 
             for (var j = 0; j < data.holes.length; j++)
             {
-                this$1.renderPolygon(data.holes[j].points, true, context);
+                //   this.renderPolygon(data.holes[j].points, true, context);
             }
 
-            if (data.fill)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
+
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-            if (data.lineWidth)
+
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -120,11 +117,11 @@ context.stroke();
         {
-            if (data.fillColor || data.fillColor === 0)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fillRect(shape.x, shape.y, shape.width, shape.height);
             }
-            if (data.lineWidth)
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -141,11 +138,12 @@ context.strokeRect(shape.x, shape.y, shape.width, shape.height);
 
-            if (data.fill)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-            if (data.lineWidth)
+
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -183,11 +181,11 @@ context.stroke();
 
-            if (data.fill)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-            if (data.lineWidth)
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -221,12 +219,11 @@ context.stroke();
 
-            if (data.fillColor || data.fillColor === 0)
+            if (fillStyle.visible)
             {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
                 context.fillStyle = "#" + ((("00000" + ((fillColor | 0).toString(16)))).substr(-6));
                 context.fill();
             }
-
-            if (data.lineWidth)
+            if (lineStyle.visible)
             {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.globalAlpha = lineStyle.alpha * worldAlpha;
                 context.strokeStyle = "#" + ((("00000" + ((lineColor | 0).toString(16)))).substr(-6));
@@ -242,3 +239,3 @@ context.stroke();
  *
- * @private
+ * @protected
  * @param {PIXI.Graphics} graphics - the graphics that will have its tint updated
@@ -249,2 +246,3 @@ */
     graphics$$1._prevTint = graphics$$1.tint;
+    graphics$$1.canvasTintDirty = graphics$$1.dirty;
 
@@ -352,2 +350,4 @@ var tintR = ((graphics$$1.tint >> 16) & 0xFF) / 255;
 
+graphics.Graphics.prototype.cachedGraphicsData = [];
+
 /**
@@ -368,2 +368,3 @@ * Renders the object using the Canvas renderer
 
+    this.finishPoly();
     renderer.plugins.graphics.render(this);
@@ -370,0 +371,0 @@ };

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

69584

increased by1.06%

Worsened metrics

Lines of code

606

decreased by-0.33%

Dependency changes

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

• Updated@pixi/core@^5.0.0-rc

• Updated@pixi/graphics@^5.0.0-rc

• Updated@pixi/math@^5.0.0-rc