@pixi/canvas-graphics - npm Package Compare versions

Comparing version 7.2.4 to 7.3.0-rc

lib/CanvasGraphicsRenderer.js

@@ -1,61 +0,40 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var canvasRenderer = require('@pixi/canvas-renderer');
-var core = require('@pixi/core');
-var PolygonUtils = require('./utils/PolygonUtils.js');
-
+"use strict";
+var canvasRenderer = require("@pixi/canvas-renderer"), core = require("@pixi/core"), PolygonUtils = require("./utils/PolygonUtils.js");
 class CanvasGraphicsRenderer {
+  /**
+   * @param renderer - A reference to the current renderer.
+   */
   constructor(renderer) {
-    this._svgMatrix = null;
-    this._tempMatrix = new core.Matrix();
-    this.renderer = renderer;
+    this._svgMatrix = null, this._tempMatrix = new core.Matrix(), this.renderer = renderer;
   }
+  /**
+   * calculates fill/stroke style for canvas
+   * @private
+   * @param style - A graphics {@link PIXI.FILL_STYLE} where if `texture` is specified then a tinted CanvasPattern
+   * will be used for the fill.stroke
+   * @param tint - color to set the fill/stroke too.
+   */
   _calcCanvasStyle(style, tint) {
     let res;
-    if (style.texture && style.texture.baseTexture !== core.Texture.WHITE.baseTexture) {
-      if (style.texture.valid) {
-        res = canvasRenderer.canvasUtils.getTintedPattern(style.texture, tint);
-        this.setPatternTransform(res, style.matrix || core.Matrix.IDENTITY);
-      } else {
-        res = "#808080";
-      }
-    } else {
-      res = `#${`00000${(tint | 0).toString(16)}`.slice(-6)}`;
-    }
-    return res;
+    return style.texture && style.texture.baseTexture !== core.Texture.WHITE.baseTexture ? style.texture.valid ? (res = canvasRenderer.canvasUtils.getTintedPattern(style.texture, tint), this.setPatternTransform(res, style.matrix || core.Matrix.IDENTITY)) : res = "#808080" : res = `#${`00000${(tint | 0).toString(16)}`.slice(-6)}`, res;
   }
+  /**
+   * Renders a Graphics object to a canvas.
+   * @param graphics - the actual graphics object to render
+   */
   render(graphics) {
-    const renderer = this.renderer;
-    const context = renderer.canvasContext.activeContext;
-    const worldAlpha = graphics.worldAlpha;
-    const transform = graphics.transform.worldTransform;
-    renderer.canvasContext.setContextTransform(transform);
-    renderer.canvasContext.setBlendMode(graphics.blendMode);
+    const renderer = this.renderer, context = renderer.canvasContext.activeContext, worldAlpha = graphics.worldAlpha, transform = graphics.transform.worldTransform;
+    renderer.canvasContext.setContextTransform(transform), renderer.canvasContext.setBlendMode(graphics.blendMode);
     const graphicsData = graphics.geometry.graphicsData;
-    let contextFillStyle;
-    let contextStrokeStyle;
+    let contextFillStyle, contextStrokeStyle;
     const tint = core.Color.shared.setValue(graphics.tint).toArray();
     for (let i = 0; i < graphicsData.length; i++) {
-      const data = graphicsData[i];
-      const shape = data.shape;
-      const fillStyle = data.fillStyle;
-      const lineStyle = data.lineStyle;
-      const fillColor = data.fillStyle.color | 0;
-      const lineColor = data.lineStyle.color | 0;
-      if (data.matrix) {
-        renderer.canvasContext.setContextTransform(transform.copyTo(this._tempMatrix).append(data.matrix));
-      }
-      if (fillStyle.visible) {
-        contextFillStyle = this._calcCanvasStyle(fillStyle, core.Color.shared.setValue(fillColor).multiply(tint).toNumber());
-      }
-      if (lineStyle.visible) {
-        contextStrokeStyle = this._calcCanvasStyle(lineStyle, core.Color.shared.setValue(lineColor).multiply(tint).toNumber());
-      }
-      context.lineWidth = lineStyle.width;
-      context.lineCap = lineStyle.cap;
-      context.lineJoin = lineStyle.join;
-      context.miterLimit = lineStyle.miterLimit;
-      if (data.type === core.SHAPES.POLY) {
+      const data = graphicsData[i], shape = data.shape, fillStyle = data.fillStyle, lineStyle = data.lineStyle, fillColor = data.fillStyle.color | 0, lineColor = data.lineStyle.color | 0;
+      if (data.matrix && renderer.canvasContext.setContextTransform(transform.copyTo(this._tempMatrix).append(data.matrix)), fillStyle.visible && (contextFillStyle = this._calcCanvasStyle(
+        fillStyle,
+        core.Color.shared.setValue(fillColor).multiply(tint).toNumber()
+      )), lineStyle.visible && (contextStrokeStyle = this._calcCanvasStyle(
+        lineStyle,
+        core.Color.shared.setValue(lineColor).multiply(tint).toNumber()
+      )), context.lineWidth = lineStyle.width, context.lineCap = lineStyle.cap, context.lineJoin = lineStyle.join, context.miterLimit = lineStyle.miterLimit, data.type === core.SHAPES.POLY) {
         context.beginPath();
@@ -65,300 +44,155 @@ const tempShape = shape;
         const holes = data.holes;
-        let outerArea;
-        let innerArea;
-        let px;
-        let py;
-        let holesDirection;
+        let outerArea, innerArea, px, py, holesDirection;
         context.moveTo(points[0], points[1]);
-        for (let j = 2; j < points.length; j += 2) {
+        for (let j = 2; j < points.length; j += 2)
           context.lineTo(points[j], points[j + 1]);
-        }
-        if (tempShape.closeStroke) {
-          context.closePath();
-        }
-        if (holes.length > 0) {
-          holesDirection = [];
-          outerArea = 0;
-          px = points[0];
-          py = points[1];
-          for (let j = 2; j + 2 < points.length; j += 2) {
+        if (tempShape.closeStroke && context.closePath(), holes.length > 0) {
+          holesDirection = [], outerArea = 0, px = points[0], py = points[1];
+          for (let j = 2; j + 2 < points.length; j += 2)
             outerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py);
-          }
-          for (let k = 0; k < holes.length; k++) {
-            points = holes[k].shape.points;
-            if (!points) {
-              continue;
-            }
-            innerArea = 0;
-            px = points[0];
-            py = points[1];
-            for (let j = 2; j + 2 < points.length; j += 2) {
-              innerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py);
-            }
-            if (innerArea * outerArea < 0) {
-              context.moveTo(points[0], points[1]);
-              for (let j = 2; j < points.length; j += 2) {
-                context.lineTo(points[j], points[j + 1]);
+          for (let k = 0; k < holes.length; k++)
+            if (points = holes[k].shape.points, !!points) {
+              innerArea = 0, px = points[0], py = points[1];
+              for (let j = 2; j + 2 < points.length; j += 2)
+                innerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py);
+              if (innerArea * outerArea < 0) {
+                context.moveTo(points[0], points[1]);
+                for (let j = 2; j < points.length; j += 2)
+                  context.lineTo(points[j], points[j + 1]);
+              } else {
+                context.moveTo(points[points.length - 2], points[points.length - 1]);
+                for (let j = points.length - 4; j >= 0; j -= 2)
+                  context.lineTo(points[j], points[j + 1]);
               }
-            } else {
-              context.moveTo(points[points.length - 2], points[points.length - 1]);
-              for (let j = points.length - 4; j >= 0; j -= 2) {
-                context.lineTo(points[j], points[j + 1]);
-              }
+              holes[k].shape.closeStroke && context.closePath(), holesDirection[k] = innerArea * outerArea < 0;
             }
-            if (holes[k].shape.closeStroke) {
-              context.closePath();
-            }
-            holesDirection[k] = innerArea * outerArea < 0;
-          }
         }
-        if (fillStyle.visible) {
-          context.globalAlpha = fillStyle.alpha * worldAlpha;
-          context.fillStyle = contextFillStyle;
-          context.fill();
-        }
-        if (lineStyle.visible) {
-          this.paintPolygonStroke(tempShape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context);
-        }
+        fillStyle.visible && (context.globalAlpha = fillStyle.alpha * worldAlpha, context.fillStyle = contextFillStyle, context.fill()), lineStyle.visible && this.paintPolygonStroke(
+          tempShape,
+          lineStyle,
+          contextStrokeStyle,
+          holes,
+          holesDirection,
+          worldAlpha,
+          context
+        );
       } else if (data.type === core.SHAPES.RECT) {
         const tempShape = shape;
-        if (fillStyle.visible) {
-          context.globalAlpha = fillStyle.alpha * worldAlpha;
-          context.fillStyle = contextFillStyle;
-          context.fillRect(tempShape.x, tempShape.y, tempShape.width, tempShape.height);
+        if (fillStyle.visible && (context.globalAlpha = fillStyle.alpha * worldAlpha, context.fillStyle = contextFillStyle, context.fillRect(tempShape.x, tempShape.y, tempShape.width, tempShape.height)), lineStyle.visible) {
+          const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)), width = tempShape.width + 2 * alignmentOffset, height = tempShape.height + 2 * alignmentOffset;
+          context.globalAlpha = lineStyle.alpha * worldAlpha, context.strokeStyle = contextStrokeStyle, context.strokeRect(tempShape.x - alignmentOffset, tempShape.y - alignmentOffset, width, height);
         }
-        if (lineStyle.visible) {
-          const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
-          const width = tempShape.width + 2 * alignmentOffset;
-          const height = tempShape.height + 2 * alignmentOffset;
-          context.globalAlpha = lineStyle.alpha * worldAlpha;
-          context.strokeStyle = contextStrokeStyle;
-          context.strokeRect(tempShape.x - alignmentOffset, tempShape.y - alignmentOffset, width, height);
-        }
       } else if (data.type === core.SHAPES.CIRC) {
         const tempShape = shape;
-        context.beginPath();
-        context.arc(tempShape.x, tempShape.y, tempShape.radius, 0, 2 * Math.PI);
-        context.closePath();
-        if (fillStyle.visible) {
-          context.globalAlpha = fillStyle.alpha * worldAlpha;
-          context.fillStyle = contextFillStyle;
-          context.fill();
-        }
-        if (lineStyle.visible) {
+        if (context.beginPath(), context.arc(tempShape.x, tempShape.y, tempShape.radius, 0, 2 * Math.PI), context.closePath(), fillStyle.visible && (context.globalAlpha = fillStyle.alpha * worldAlpha, context.fillStyle = contextFillStyle, context.fill()), lineStyle.visible) {
           if (lineStyle.alignment !== 0.5) {
             const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
-            context.beginPath();
-            context.arc(tempShape.x, tempShape.y, tempShape.radius + alignmentOffset, 0, 2 * Math.PI);
-            context.closePath();
+            context.beginPath(), context.arc(tempShape.x, tempShape.y, tempShape.radius + alignmentOffset, 0, 2 * Math.PI), context.closePath();
           }
-          context.globalAlpha = lineStyle.alpha * worldAlpha;
-          context.strokeStyle = contextStrokeStyle;
-          context.stroke();
+          context.globalAlpha = lineStyle.alpha * worldAlpha, context.strokeStyle = contextStrokeStyle, context.stroke();
         }
       } else if (data.type === core.SHAPES.ELIP) {
-        const tempShape = shape;
-        const drawShapeOverStroke = lineStyle.alignment === 1;
-        if (!drawShapeOverStroke) {
-          this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
-        }
-        if (lineStyle.visible) {
+        const tempShape = shape, drawShapeOverStroke = lineStyle.alignment === 1;
+        if (drawShapeOverStroke || this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context), lineStyle.visible) {
           if (lineStyle.alignment !== 0.5) {
-            const kappa = 0.5522848;
-            const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
-            const sW = (tempShape.width + alignmentOffset) * 2;
-            const sH = (tempShape.height + alignmentOffset) * 2;
-            const sX = tempShape.x - sW / 2;
-            const sY = tempShape.y - sH / 2;
-            const sOx = sW / 2 * kappa;
-            const sOy = sH / 2 * kappa;
-            const sXe = sX + sW;
-            const sYe = sY + sH;
-            const sXm = sX + sW / 2;
-            const sYm = sY + sH / 2;
-            context.beginPath();
-            context.moveTo(sX, sYm);
-            context.bezierCurveTo(sX, sYm - sOy, sXm - sOx, sY, sXm, sY);
-            context.bezierCurveTo(sXm + sOx, sY, sXe, sYm - sOy, sXe, sYm);
-            context.bezierCurveTo(sXe, sYm + sOy, sXm + sOx, sYe, sXm, sYe);
-            context.bezierCurveTo(sXm - sOx, sYe, sX, sYm + sOy, sX, sYm);
-            context.closePath();
+            const kappa = 0.5522848, alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)), sW = (tempShape.width + alignmentOffset) * 2, sH = (tempShape.height + alignmentOffset) * 2, sX = tempShape.x - sW / 2, sY = tempShape.y - sH / 2, sOx = sW / 2 * kappa, sOy = sH / 2 * kappa, sXe = sX + sW, sYe = sY + sH, sXm = sX + sW / 2, sYm = sY + sH / 2;
+            context.beginPath(), context.moveTo(sX, sYm), context.bezierCurveTo(sX, sYm - sOy, sXm - sOx, sY, sXm, sY), context.bezierCurveTo(sXm + sOx, sY, sXe, sYm - sOy, sXe, sYm), context.bezierCurveTo(sXe, sYm + sOy, sXm + sOx, sYe, sXm, sYe), context.bezierCurveTo(sXm - sOx, sYe, sX, sYm + sOy, sX, sYm), context.closePath();
           }
-          context.globalAlpha = lineStyle.alpha * worldAlpha;
-          context.strokeStyle = contextStrokeStyle;
-          context.stroke();
+          context.globalAlpha = lineStyle.alpha * worldAlpha, context.strokeStyle = contextStrokeStyle, context.stroke();
         }
-        if (drawShapeOverStroke) {
-          this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
-        }
+        drawShapeOverStroke && this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
       } else if (data.type === core.SHAPES.RREC) {
-        const tempShape = shape;
-        const drawShapeOverStroke = lineStyle.alignment === 1;
-        if (!drawShapeOverStroke) {
-          this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
-        }
-        if (lineStyle.visible) {
+        const tempShape = shape, drawShapeOverStroke = lineStyle.alignment === 1;
+        if (drawShapeOverStroke || this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context), lineStyle.visible) {
           if (lineStyle.alignment !== 0.5) {
-            const width = tempShape.width;
-            const height = tempShape.height;
-            const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
-            const sRx = tempShape.x - alignmentOffset;
-            const sRy = tempShape.y - alignmentOffset;
-            const sWidth = tempShape.width + 2 * alignmentOffset;
-            const sHeight = tempShape.height + 2 * alignmentOffset;
-            const radiusOffset = alignmentOffset * (lineStyle.alignment >= 1 ? Math.min(sWidth / width, sHeight / height) : Math.min(width / sWidth, height / sHeight));
+            const width = tempShape.width, height = tempShape.height, alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)), sRx = tempShape.x - alignmentOffset, sRy = tempShape.y - alignmentOffset, sWidth = tempShape.width + 2 * alignmentOffset, sHeight = tempShape.height + 2 * alignmentOffset, radiusOffset = alignmentOffset * (lineStyle.alignment >= 1 ? Math.min(sWidth / width, sHeight / height) : Math.min(width / sWidth, height / sHeight));
             let sRadius = tempShape.radius + radiusOffset;
             const sMaxRadius = Math.min(sWidth, sHeight) / 2;
-            sRadius = sRadius > sMaxRadius ? sMaxRadius : sRadius;
-            context.beginPath();
-            context.moveTo(sRx, sRy + sRadius);
-            context.lineTo(sRx, sRy + sHeight - sRadius);
-            context.quadraticCurveTo(sRx, sRy + sHeight, sRx + sRadius, sRy + sHeight);
-            context.lineTo(sRx + sWidth - sRadius, sRy + sHeight);
-            context.quadraticCurveTo(sRx + sWidth, sRy + sHeight, sRx + sWidth, sRy + sHeight - sRadius);
-            context.lineTo(sRx + sWidth, sRy + sRadius);
-            context.quadraticCurveTo(sRx + sWidth, sRy, sRx + sWidth - sRadius, sRy);
-            context.lineTo(sRx + sRadius, sRy);
-            context.quadraticCurveTo(sRx, sRy, sRx, sRy + sRadius);
-            context.closePath();
+            sRadius = sRadius > sMaxRadius ? sMaxRadius : sRadius, context.beginPath(), context.moveTo(sRx, sRy + sRadius), context.lineTo(sRx, sRy + sHeight - sRadius), context.quadraticCurveTo(sRx, sRy + sHeight, sRx + sRadius, sRy + sHeight), context.lineTo(sRx + sWidth - sRadius, sRy + sHeight), context.quadraticCurveTo(sRx + sWidth, sRy + sHeight, sRx + sWidth, sRy + sHeight - sRadius), context.lineTo(sRx + sWidth, sRy + sRadius), context.quadraticCurveTo(sRx + sWidth, sRy, sRx + sWidth - sRadius, sRy), context.lineTo(sRx + sRadius, sRy), context.quadraticCurveTo(sRx, sRy, sRx, sRy + sRadius), context.closePath();
           }
-          context.globalAlpha = lineStyle.alpha * worldAlpha;
-          context.strokeStyle = contextStrokeStyle;
-          context.stroke();
+          context.globalAlpha = lineStyle.alpha * worldAlpha, context.strokeStyle = contextStrokeStyle, context.stroke();
         }
-        if (drawShapeOverStroke) {
-          this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
-        }
+        drawShapeOverStroke && this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
       }
     }
   }
+  /**
+   * Paint stroke for polygon and holes
+   * @private
+   * @param shape - Shape to be drawn
+   * @param lineStyle - Line style for the shape
+   * @param contextStrokeStyle - The strokeStyle for the canvas context
+   * @param holes - Holes to be added to the shape
+   * @param holesDirection -
+   * @param worldAlpha - The multiplied alpha of the displayObject
+   * @param context - The canvas context
+   */
   paintPolygonStroke(shape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context) {
     if (lineStyle.alignment !== 0.5) {
       const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
-      let offsetPoints = PolygonUtils.PolygonUtils.offsetPolygon(shape.points, alignmentOffset);
-      let points;
-      context.beginPath();
-      context.moveTo(offsetPoints[0], offsetPoints[1]);
-      for (let j = 2; j < offsetPoints.length; j += 2) {
+      let offsetPoints = PolygonUtils.PolygonUtils.offsetPolygon(shape.points, alignmentOffset), points;
+      context.beginPath(), context.moveTo(offsetPoints[0], offsetPoints[1]);
+      for (let j = 2; j < offsetPoints.length; j += 2)
         context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
-      }
-      if (shape.closeStroke) {
-        context.closePath();
-      }
+      shape.closeStroke && context.closePath();
       for (let k = 0; k < holes.length; k++) {
-        points = holes[k].shape.points;
-        offsetPoints = PolygonUtils.PolygonUtils.offsetPolygon(points, alignmentOffset);
-        if (holesDirection[k]) {
+        if (points = holes[k].shape.points, offsetPoints = PolygonUtils.PolygonUtils.offsetPolygon(points, alignmentOffset), holesDirection[k]) {
           context.moveTo(offsetPoints[0], offsetPoints[1]);
-          for (let j = 2; j < offsetPoints.length; j += 2) {
+          for (let j = 2; j < offsetPoints.length; j += 2)
             context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
-          }
         } else {
           context.moveTo(offsetPoints[offsetPoints.length - 2], offsetPoints[offsetPoints.length - 1]);
-          for (let j = offsetPoints.length - 4; j >= 0; j -= 2) {
+          for (let j = offsetPoints.length - 4; j >= 0; j -= 2)
             context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
-          }
         }
-        if (holes[k].shape.closeStroke) {
-          context.closePath();
-        }
+        holes[k].shape.closeStroke && context.closePath();
       }
     }
-    context.globalAlpha = lineStyle.alpha * worldAlpha;
-    context.strokeStyle = contextStrokeStyle;
-    context.stroke();
+    context.globalAlpha = lineStyle.alpha * worldAlpha, context.strokeStyle = contextStrokeStyle, context.stroke();
   }
+  /**
+   * Paint Ellipse
+   * @private
+   * @param shape - Shape to be drawn
+   * @param fillStyle - Fill for the shape
+   * @param lineStyle - Line style for the shape
+   * @param contextFillStyle - The canvas context fill style
+   * @param worldAlpha - The multiplied alpha of the displayObject
+   * @param context - The canvas context
+   */
   paintEllipse(shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
-    const w = shape.width * 2;
-    const h = shape.height * 2;
-    const x = shape.x - w / 2;
-    const y = shape.y - h / 2;
-    const kappa = 0.5522848;
-    const ox = w / 2 * kappa;
-    const oy = h / 2 * kappa;
-    const xe = x + w;
-    const ye = y + h;
-    const xm = x + w / 2;
-    const ym = y + h / 2;
-    if (lineStyle.alignment === 0) {
-      context.save();
-    }
-    context.beginPath();
-    context.moveTo(x, ym);
-    context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-    context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-    context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-    context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-    context.closePath();
-    if (lineStyle.alignment === 0) {
-      context.clip();
-    }
-    if (fillStyle.visible) {
-      context.globalAlpha = fillStyle.alpha * worldAlpha;
-      context.fillStyle = contextFillStyle;
-      context.fill();
-    }
-    if (lineStyle.alignment === 0) {
-      context.restore();
-    }
+    const w = shape.width * 2, h = shape.height * 2, x = shape.x - w / 2, y = shape.y - h / 2, kappa = 0.5522848, ox = w / 2 * kappa, oy = h / 2 * kappa, xe = x + w, ye = y + h, xm = x + w / 2, ym = y + h / 2;
+    lineStyle.alignment === 0 && context.save(), context.beginPath(), context.moveTo(x, ym), context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y), context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym), context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye), context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym), context.closePath(), lineStyle.alignment === 0 && context.clip(), fillStyle.visible && (context.globalAlpha = fillStyle.alpha * worldAlpha, context.fillStyle = contextFillStyle, context.fill()), lineStyle.alignment === 0 && context.restore();
   }
+  /**
+   * Paint Rounded Rectangle
+   * @private
+   * @param shape - Shape to be drawn
+   * @param fillStyle - Fill for the shape
+   * @param lineStyle - Line style for the shape
+   * @param contextFillStyle - The canvas context fill style
+   * @param worldAlpha - The multiplied alpha of the displayObject
+   * @param context - The canvas context
+   */
   paintRoundedRectangle(shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
-    const rx = shape.x;
-    const ry = shape.y;
-    const width = shape.width;
-    const height = shape.height;
+    const rx = shape.x, ry = shape.y, width = shape.width, height = shape.height;
     let radius = shape.radius;
     const maxRadius = Math.min(width, height) / 2;
-    radius = radius > maxRadius ? maxRadius : radius;
-    if (lineStyle.alignment === 0) {
-      context.save();
-    }
-    context.beginPath();
-    context.moveTo(rx, ry + radius);
-    context.lineTo(rx, ry + height - radius);
-    context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
-    context.lineTo(rx + width - radius, ry + height);
-    context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
-    context.lineTo(rx + width, ry + radius);
-    context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
-    context.lineTo(rx + radius, ry);
-    context.quadraticCurveTo(rx, ry, rx, ry + radius);
-    context.closePath();
-    if (lineStyle.alignment === 0) {
-      context.clip();
-    }
-    if (fillStyle.visible) {
-      context.globalAlpha = fillStyle.alpha * worldAlpha;
-      context.fillStyle = contextFillStyle;
-      context.fill();
-    }
-    if (lineStyle.alignment === 0) {
-      context.restore();
-    }
+    radius = radius > maxRadius ? maxRadius : radius, lineStyle.alignment === 0 && context.save(), context.beginPath(), context.moveTo(rx, ry + radius), context.lineTo(rx, ry + height - radius), context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height), context.lineTo(rx + width - radius, ry + height), context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius), context.lineTo(rx + width, ry + radius), context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry), context.lineTo(rx + radius, ry), context.quadraticCurveTo(rx, ry, rx, ry + radius), context.closePath(), lineStyle.alignment === 0 && context.clip(), fillStyle.visible && (context.globalAlpha = fillStyle.alpha * worldAlpha, context.fillStyle = contextFillStyle, context.fill()), lineStyle.alignment === 0 && context.restore();
   }
   setPatternTransform(pattern, matrix) {
-    if (this._svgMatrix === false) {
-      return;
-    }
-    if (!this._svgMatrix) {
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      if (svg?.createSVGMatrix) {
-        this._svgMatrix = svg.createSVGMatrix();
+    if (this._svgMatrix !== !1) {
+      if (!this._svgMatrix) {
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        if (svg?.createSVGMatrix && (this._svgMatrix = svg.createSVGMatrix()), !this._svgMatrix || !pattern.setTransform) {
+          this._svgMatrix = !1;
+          return;
+        }
       }
-      if (!this._svgMatrix || !pattern.setTransform) {
-        this._svgMatrix = false;
-        return;
-      }
+      this._svgMatrix.a = matrix.a, this._svgMatrix.b = matrix.b, this._svgMatrix.c = matrix.c, this._svgMatrix.d = matrix.d, this._svgMatrix.e = matrix.tx, this._svgMatrix.f = matrix.ty, pattern.setTransform(this._svgMatrix.inverse());
     }
-    this._svgMatrix.a = matrix.a;
-    this._svgMatrix.b = matrix.b;
-    this._svgMatrix.c = matrix.c;
-    this._svgMatrix.d = matrix.d;
-    this._svgMatrix.e = matrix.tx;
-    this._svgMatrix.f = matrix.ty;
-    pattern.setTransform(this._svgMatrix.inverse());
   }
+  /** destroy graphics object */
   destroy() {
-    this.renderer = null;
-    this._svgMatrix = null;
-    this._tempMatrix = null;
+    this.renderer = null, this._svgMatrix = null, this._tempMatrix = null;
   }
@@ -371,4 +205,3 @@ }
 core.extensions.add(CanvasGraphicsRenderer);
-
 exports.CanvasGraphicsRenderer = CanvasGraphicsRenderer;
 //# sourceMappingURL=CanvasGraphicsRenderer.js.map

lib/Graphics.js

@@ -1,11 +0,8 @@
-'use strict';
-
-var canvasRenderer$1 = require('@pixi/canvas-renderer');
-var core = require('@pixi/core');
-var graphics = require('@pixi/graphics');
-
+"use strict";
+var canvasRenderer$1 = require("@pixi/canvas-renderer"), core = require("@pixi/core"), graphics = require("@pixi/graphics");
 let canvasRenderer;
 const tempMatrix = new core.Matrix();
-graphics.Graphics.prototype.generateCanvasTexture = function generateCanvasTexture(scaleMode, resolution = 1) {
-  const bounds = this.getLocalBounds();
+graphics.Graphics.prototype.generateCanvasTexture = function(scaleMode, resolution = 1) {
+  const bounds = this.getLocalBounds(new core.Rectangle());
+  bounds.width = Math.max(bounds.width, 1 / resolution), bounds.height = Math.max(bounds.height, 1 / resolution);
   const canvasBuffer = core.RenderTexture.create({
@@ -17,23 +14,13 @@ width: bounds.width,
   });
-  if (!canvasRenderer) {
-    canvasRenderer = new canvasRenderer$1.CanvasRenderer();
-  }
-  this.transform.updateLocalTransform();
-  this.transform.localTransform.copyTo(tempMatrix);
-  tempMatrix.invert();
-  tempMatrix.tx -= bounds.x;
-  tempMatrix.ty -= bounds.y;
-  canvasRenderer.render(this, { renderTexture: canvasBuffer, clear: true, transform: tempMatrix });
-  const texture = core.Texture.from(canvasBuffer.baseTexture._canvasRenderTarget.canvas, { scaleMode });
-  texture.baseTexture.setResolution(resolution);
-  return texture;
+  canvasRenderer || (canvasRenderer = new canvasRenderer$1.CanvasRenderer()), this.transform.updateLocalTransform(), this.transform.localTransform.copyTo(tempMatrix), tempMatrix.invert(), tempMatrix.tx -= bounds.x, tempMatrix.ty -= bounds.y, canvasRenderer.render(this, { renderTexture: canvasBuffer, clear: !0, transform: tempMatrix });
+  const texture = core.Texture.from(
+    canvasBuffer.baseTexture._canvasRenderTarget.canvas,
+    { scaleMode }
+  );
+  return texture.baseTexture.setResolution(resolution), texture;
 };
 graphics.Graphics.prototype.cachedGraphicsData = [];
-graphics.Graphics.prototype._renderCanvas = function _renderCanvas(renderer) {
-  if (this.isMask === true) {
-    return;
-  }
-  this.finishPoly();
-  renderer.plugins.graphics.render(this);
+graphics.Graphics.prototype._renderCanvas = function(renderer) {
+  this.isMask !== !0 && (this.finishPoly(), renderer.plugins.graphics.render(this));
 };
 //# sourceMappingURL=Graphics.js.map

lib/index.js

@@ -1,11 +0,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('./Graphics.js');
-var CanvasGraphicsRenderer = require('./CanvasGraphicsRenderer.js');
-
-
-
+"use strict";
+require("./Graphics.js");
+var CanvasGraphicsRenderer = require("./CanvasGraphicsRenderer.js");
 exports.CanvasGraphicsRenderer = CanvasGraphicsRenderer.CanvasGraphicsRenderer;
 //# sourceMappingURL=index.js.map

lib/utils/PolygonUtils.js

@@ -1,68 +0,64 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
+"use strict";
 class PolygonUtils {
+  /**
+   * Calculate points of an offset polygon
+   * @see {@link http://csharphelper.com/blog/2016/01/enlarge-a-polygon-in-c/}
+   * @private
+   * @param {number[]} points - polygon coordinates
+   * @param {number} offset
+   * @returns {number[]} - offset points
+   */
   static offsetPolygon(points, offset) {
-    const offsetPoints = [];
-    const length = points.length;
+    const offsetPoints = [], length = points.length;
     offset = PolygonUtils.isPolygonClockwise(points) ? offset : -1 * offset;
     for (let j = 0; j < length; j += 2) {
       let i = j - 2;
-      if (i < 0) {
-        i += length;
-      }
+      i < 0 && (i += length);
       const k = (j + 2) % length;
-      let v1x = points[j] - points[i];
-      let v1y = points[j + 1] - points[i + 1];
-      let len = Math.sqrt(v1x * v1x + v1y * v1y);
-      v1x /= len;
-      v1y /= len;
-      v1x *= offset;
-      v1y *= offset;
-      const norm1x = -v1y;
-      const norm1y = v1x;
-      const pij1 = [points[i] + norm1x, points[i + 1] + norm1y];
-      const pij2 = [points[j] + norm1x, points[j + 1] + norm1y];
-      let v2x = points[k] - points[j];
-      let v2y = points[k + 1] - points[j + 1];
-      len = Math.sqrt(v2x * v2x + v2y * v2y);
-      v2x /= len;
-      v2y /= len;
-      v2x *= offset;
-      v2y *= offset;
-      const norm2x = -v2y;
-      const norm2y = v2x;
-      const pjk1 = [points[j] + norm2x, points[j + 1] + norm2y];
-      const pjk2 = [points[k] + norm2x, points[k + 1] + norm2y];
-      const intersectPoint = PolygonUtils.findIntersection(pij1[0], pij1[1], pij2[0], pij2[1], pjk1[0], pjk1[1], pjk2[0], pjk2[1]);
-      if (intersectPoint) {
-        offsetPoints.push(...intersectPoint);
-      }
+      let v1x = points[j] - points[i], v1y = points[j + 1] - points[i + 1], len = Math.sqrt(v1x * v1x + v1y * v1y);
+      v1x /= len, v1y /= len, v1x *= offset, v1y *= offset;
+      const norm1x = -v1y, norm1y = v1x, pij1 = [points[i] + norm1x, points[i + 1] + norm1y], pij2 = [points[j] + norm1x, points[j + 1] + norm1y];
+      let v2x = points[k] - points[j], v2y = points[k + 1] - points[j + 1];
+      len = Math.sqrt(v2x * v2x + v2y * v2y), v2x /= len, v2y /= len, v2x *= offset, v2y *= offset;
+      const norm2x = -v2y, norm2y = v2x, pjk1 = [points[j] + norm2x, points[j + 1] + norm2y], pjk2 = [points[k] + norm2x, points[k + 1] + norm2y], intersectPoint = PolygonUtils.findIntersection(pij1[0], pij1[1], pij2[0], pij2[1], pjk1[0], pjk1[1], pjk2[0], pjk2[1]);
+      intersectPoint && offsetPoints.push(...intersectPoint);
     }
     return offsetPoints;
   }
+  /**
+   * Determine the intersection point of two line segments
+   * @see {@link here http://paulbourke.net/geometry/pointlineplane/}
+   * @private
+   * @param {number} x1 - x-coordinate of start point at first line
+   * @param {number} y1 - y-coordinate of start point at first line
+   * @param {number} x2 - x-coordinate of end point at first line
+   * @param {number} y2 - y-coordinate of end point at first line
+   * @param {number} x3 - x-coordinate of start point at second line
+   * @param {number} y3 - y-coordinate of start point at second line
+   * @param {number} x4 - x-coordinate of end point at second line
+   * @param {number} y4 - y-coordinate of end point at second line
+   * @returns [x, y] coordinates of intersection
+   */
   static findIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
-    const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
-    const numeratorA = (x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3);
-    const numeratorB = (x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3);
-    if (denominator === 0) {
-      if (numeratorA === 0 && numeratorB === 0) {
-        return [(x1 + x2) / 2, (y1 + y2) / 2];
-      }
-      return null;
-    }
+    const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1), numeratorA = (x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3), numeratorB = (x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3);
+    if (denominator === 0)
+      return numeratorA === 0 && numeratorB === 0 ? [(x1 + x2) / 2, (y1 + y2) / 2] : null;
     const uA = numeratorA / denominator;
     return [x1 + uA * (x2 - x1), y1 + uA * (y2 - y1)];
   }
+  /**
+   * Determine polygon are clockwise or counterclockwise
+   * @see {@link https://stackoverflow.com/questions/1165647}
+   * @private
+   * @param {number[]} polygon - polygon coordinates
+   * @returns {boolean} - true if polygon is clockwise
+   */
   static isPolygonClockwise(polygon) {
     let sum = 0;
-    for (let i = 0, j = polygon.length - 2; i < polygon.length; j = i, i += 2) {
+    for (let i = 0, j = polygon.length - 2; i < polygon.length; j = i, i += 2)
       sum += (polygon[i] - polygon[j]) * (polygon[i + 1] + polygon[j + 1]);
-    }
     return sum > 0;
   }
 }
-
 exports.PolygonUtils = PolygonUtils;
 //# sourceMappingURL=PolygonUtils.js.map

package.json

 {
   "name": "@pixi/canvas-graphics",
-  "version": "7.2.4",
+  "version": "7.3.0-rc",
   "main": "lib/index.js",
@@ -39,7 +39,7 @@ "module": "lib/index.mjs",
   "peerDependencies": {
-    "@pixi/canvas-display": "7.2.4",
-    "@pixi/canvas-renderer": "7.2.4",
-    "@pixi/core": "7.2.4",
-    "@pixi/graphics": "7.2.4"
+    "@pixi/canvas-display": "7.3.0-rc",
+    "@pixi/canvas-renderer": "7.3.0-rc",
+    "@pixi/core": "7.3.0-rc",
+    "@pixi/graphics": "7.3.0-rc"
   }
 }

New alerts

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

Worsened metrics

Total package byte prevSize

129836

decreased by-13.34%

Lines of code

748

decreased by-29.83%

Number of low quality alerts

2

increased by100%

No dependency changes