@pixi/graphics - npm Package Compare versions

Comparing version 7.1.2 to 7.2.0-beta

lib/const.d.ts

@@ -5,13 +5,21 @@ /**
  * @see https://graphicdesign.stackexchange.com/questions/59018/what-is-a-bevel-join-of-two-lines-exactly-illustrator
- * @name LINE_JOIN
  * @memberof PIXI
  * @static
  * @enum {string}
- * @property {string} MITER - 'miter': make a sharp corner where outer part of lines meet
- * @property {string} BEVEL - 'bevel': add a square butt at each end of line segment and fill the triangle at turn
- * @property {string} ROUND - 'round': add an arc at the joint
  */
 export declare enum LINE_JOIN {
+    /**
+     * 'miter': make a sharp corner where outer part of lines meet
+     * @default miter
+     */
     MITER = "miter",
+    /**
+     * 'bevel': add a square butt at each end of line segment and fill the triangle at turn
+     * @default bevel
+     */
     BEVEL = "bevel",
+    /**
+     * 'round': add an arc at the joint
+     * @default round
+     */
     ROUND = "round"
@@ -22,16 +30,27 @@ }
  * @see PIXI.Graphics#lineStyle
- * @name LINE_CAP
  * @memberof PIXI
  * @static
  * @enum {string}
- * @property {string} BUTT - 'butt': don't add any cap at line ends (leaves orthogonal edges)
- * @property {string} ROUND - 'round': add semicircle at ends
- * @property {string} SQUARE - 'square': add square at end (like `BUTT` except more length at end)
  */
 export declare enum LINE_CAP {
+    /**
+     * 'butt': don't add any cap at line ends (leaves orthogonal edges)
+     * @default butt
+     */
     BUTT = "butt",
+    /**
+     * 'round': add semicircle at ends
+     * @default round
+     */
     ROUND = "round",
+    /**
+     * 'square': add square at end (like `BUTT` except more length at end)
+     * @default square
+     */
     SQUARE = "square"
 }
-/** @deprecated */
+/**
+ * @memberof PIXI
+ * @deprecated
+ */
 export interface IGraphicsCurvesSettings {
@@ -38,0 +57,0 @@ adaptive: boolean;

lib/Graphics.d.ts

@@ -7,5 +7,8 @@ import { BLEND_MODES, Matrix, Point, Polygon, Shader, Texture } from '@pixi/core';
 import { LineStyle } from './styles/LineStyle';
-import type { BatchDrawCall, IPointData, IShape, Renderer } from '@pixi/core';
+import type { BatchDrawCall, ColorSource, IPointData, IShape, Renderer } from '@pixi/core';
 import type { IDestroyOptions } from '@pixi/display';
-/** Batch element computed from Graphics geometry */
+/**
+ * Batch element computed from Graphics geometry.
+ * @memberof PIXI
+ */
 export interface IGraphicsBatchElement {
@@ -23,3 +26,3 @@ vertexData: Float32Array;
 export interface IFillStyleOptions {
-    color?: number;
+    color?: ColorSource;
     alpha?: number;
@@ -173,3 +176,3 @@ texture?: Texture;
      */
-    lineStyle(width: number, color?: number, alpha?: number, alignment?: number, native?: boolean): this;
+    lineStyle(width: number, color?: ColorSource, alpha?: number, alignment?: number, native?: boolean): this;
     /**
@@ -180,4 +183,4 @@ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo()
      * @param {number} [options.width=0] - width of the line to draw, will update the objects stored style
-     * @param {number} [options.color=0x0] - color of the line to draw, will update the objects stored style
-     * @param {number} [options.alpha=1] - alpha of the line to draw, will update the objects stored style
+     * @param {PIXI.ColorSource} [options.color=0x0] - color of the line to draw, will update the objects stored style
+     * @param {number} [options.alpha] - alpha of the line to draw, will update the objects stored style
      * @param {number} [options.alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer).
@@ -197,3 +200,3 @@ *        WebGL only.
      * @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to use
-     * @param {number} [options.color=0x0] - color of the line to draw, will update the objects stored style.
+     * @param {PIXI.ColorSource} [options.color=0x0] - color of the line to draw, will update the objects stored style.
      *  Default 0xFFFFFF if texture present.
@@ -295,14 +298,19 @@ * @param {number} [options.alpha=1] - alpha of the line to draw, will update the objects stored style
      * (such as lineTo() or drawCircle()) use when drawing.
-     * @param color - the color of the fill
-     * @param alpha - the alpha of the fill
-     * @returns - This Graphics object. Good for chaining method calls
+     * @param {PIXI.ColorSource} color - the color of the fill
+     * @param alpha - the alpha of the fill, will override the color's alpha
+     * @returns - This Graphics object. Suitable for chaining method calls
      */
-    beginFill(color?: number, alpha?: number): this;
+    beginFill(color?: ColorSource, alpha?: number): this;
     /**
+     * Normalize the color input from options for line style or fill
+     * @param {PIXI.IFillStyleOptions} options - Fill style object.
+     */
+    private normalizeColor;
+    /**
      * Begin the texture fill.
      * Note: The wrap mode of the texture is forced to REPEAT on render.
-     * @param options - Object object.
+     * @param options - Fill style object.
      * @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to fill
-     * @param {number} [options.color=0xffffff] - Background to fill behind texture
-     * @param {number} [options.alpha=1] - Alpha of fill
+     * @param {PIXI.ColorSource} [options.color=0xffffff] - Background to fill behind texture
+     * @param {number} [options.alpha] - Alpha of fill, overrides the color's alpha
      * @param {PIXI.Matrix} [options.matrix=null] - Transform matrix
@@ -309,0 +317,0 @@ * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls

lib/Graphics.js

@@ -64,3 +64,3 @@ 'use strict';
   }
-  lineStyle(options = null, color = 0, alpha = 1, alignment = 0.5, native = false) {
+  lineStyle(options = null, color = 0, alpha, alignment = 0.5, native = false) {
     if (typeof options === "number") {
@@ -72,7 +72,6 @@ options = { width: options, color, alpha, alignment, native };
   lineTextureStyle(options) {
-    options = Object.assign({
+    const defaultLineStyleOptions = {
       width: 0,
       texture: core.Texture.WHITE,
       color: options?.texture ? 16777215 : 0,
-      alpha: 1,
       matrix: null,
@@ -84,3 +83,5 @@ alignment: 0.5,
       miterLimit: 10
-    }, options);
+    };
+    options = Object.assign(defaultLineStyleOptions, options);
+    this.normalizeColor(options);
     if (this.currentPath) {
@@ -208,12 +209,18 @@ this.startPoly();
   }
-  beginFill(color = 0, alpha = 1) {
+  beginFill(color = 0, alpha) {
     return this.beginTextureFill({ texture: core.Texture.WHITE, color, alpha });
   }
+  normalizeColor(options) {
+    const temp2 = core.Color.shared.setValue(options.color ?? 0);
+    options.color = temp2.toNumber();
+    options.alpha ?? (options.alpha = temp2.alpha);
+  }
   beginTextureFill(options) {
-    options = Object.assign({
+    const defaultOptions = {
       texture: core.Texture.WHITE,
       color: 16777215,
-      alpha: 1,
       matrix: null
-    }, options);
+    };
+    options = Object.assign(defaultOptions, options);
+    this.normalizeColor(options);
     if (this.currentPath) {
@@ -324,3 +331,3 @@ this.startPoly();
         uvs,
-        _batchRGB: core.utils.hex2rgb(color),
+        _batchRGB: core.Color.shared.setValue(color).toRgbArray(),
         _tintRGB: color,
@@ -355,6 +362,3 @@ _texture: gI.style.texture,
     uniforms.translationMatrix = this.transform.worldTransform;
-    uniforms.tint[0] = (tint >> 16 & 255) / 255 * worldAlpha;
-    uniforms.tint[1] = (tint >> 8 & 255) / 255 * worldAlpha;
-    uniforms.tint[2] = (tint & 255) / 255 * worldAlpha;
-    uniforms.tint[3] = worldAlpha;
+    core.Color.shared.setValue(tint).multiply([worldAlpha, worldAlpha, worldAlpha]).setAlpha(worldAlpha).toArray(uniforms.tint);
     renderer.shader.bind(shader);
@@ -413,11 +417,6 @@ renderer.geometry.bind(geometry, shader);
       this.batchTint = this.tint;
-      const tintRGB = core.utils.hex2rgb(this.tint, temp);
+      const tintRGB = core.Color.shared.setValue(this.tint).toRgbArray(temp);
       for (let i = 0; i < this.batches.length; i++) {
         const batch = this.batches[i];
-        const batchTint = batch._batchRGB;
-        const r = tintRGB[0] * batchTint[0] * 255;
-        const g = tintRGB[1] * batchTint[1] * 255;
-        const b = tintRGB[2] * batchTint[2] * 255;
-        const color = (r << 16) + (g << 8) + (b | 0);
-        batch._tintRGB = (color >> 16) + (color & 65280) + ((color & 255) << 16);
+        batch._tintRGB = core.Color.shared.setValue(tintRGB).multiply(batch._batchRGB).toLittleEndianNumber();
       }
@@ -424,0 +423,0 @@ }

lib/GraphicsGeometry.d.ts

@@ -5,6 +5,5 @@ import { BatchDrawCall, BatchGeometry } from '@pixi/core';
 import { BatchPart } from './utils';
-import type { Circle, Ellipse, IPointData, Matrix, Polygon, Rectangle, RoundedRectangle, Texture } from '@pixi/core';
+import type { IPointData, IShape, Matrix, Texture } from '@pixi/core';
 import type { FillStyle } from './styles/FillStyle';
 import type { LineStyle } from './styles/LineStyle';
-declare type IShape = Circle | Ellipse | Polygon | Rectangle | RoundedRectangle;
 /**
@@ -194,2 +193,1 @@ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
 }
-export {};

lib/GraphicsGeometry.js

@@ -415,7 +415,7 @@ 'use strict';
   addColors(colors, color, alpha, size, offset = 0) {
-    const rgb = (color >> 16) + (color & 65280) + ((color & 255) << 16);
-    const rgba = core.utils.premultiplyTint(rgb, alpha);
+    const bgr = core.Color.shared.setValue(color).toLittleEndianNumber();
+    const result = core.Color.shared.setValue(bgr).toPremultiplied(alpha);
     colors.length = Math.max(colors.length, offset + size);
     for (let i = 0; i < size; i++) {
-      colors[offset + i] = rgba;
+      colors[offset + i] = result;
     }
@@ -422,0 +422,0 @@ }

package.json

 {
   "name": "@pixi/graphics",
-  "version": "7.1.2",
+  "version": "7.2.0-beta",
   "main": "lib/index.js",
@@ -42,4 +42,3 @@ "module": "lib/index.mjs",
     "@pixi/sprite"
-  ],
-  "gitHead": "27e65c73bb36a06fd00d6da5bf460bbee9f6c984"
+  ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

573547

increased by0.12%

Lines of code

4868

increased by0.47%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes