@pixi/mixin-cache-as-bitmap - npm Package Compare versions

Comparing version 7.2.4 to 7.3.0-rc

lib/index.d.ts

 /// <reference path="../global.d.ts" />
+import { Rectangle } from '@pixi/core';
 import { Sprite } from '@pixi/sprite';
-import type { IPointData, IRenderer, MaskData, Rectangle, Renderer } from '@pixi/core';
+import type { IPointData, IRenderer, MaskData, Renderer } from '@pixi/core';
 import type { Container, IDestroyOptions } from '@pixi/display';
@@ -5,0 +6,0 @@ /**

lib/index.js

@@ -1,11 +0,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@pixi/core');
-var display = require('@pixi/display');
-var sprite = require('@pixi/sprite');
-
+"use strict";
+var core = require("@pixi/core"), display = require("@pixi/display"), sprite = require("@pixi/sprite");
 const _tempMatrix = new core.Matrix();
-display.DisplayObject.prototype._cacheAsBitmap = false;
+display.DisplayObject.prototype._cacheAsBitmap = !1;
 display.DisplayObject.prototype._cacheData = null;
@@ -16,16 +10,15 @@ display.DisplayObject.prototype._cacheAsBitmapResolution = null;
   constructor() {
-    this.textureCacheId = null;
-    this.originalRender = null;
-    this.originalRenderCanvas = null;
-    this.originalCalculateBounds = null;
-    this.originalGetLocalBounds = null;
-    this.originalUpdateTransform = null;
-    this.originalDestroy = null;
-    this.originalMask = null;
-    this.originalFilterArea = null;
-    this.originalContainsPoint = null;
-    this.sprite = null;
+    this.textureCacheId = null, this.originalRender = null, this.originalRenderCanvas = null, this.originalCalculateBounds = null, this.originalGetLocalBounds = null, this.originalUpdateTransform = null, this.originalDestroy = null, this.originalMask = null, this.originalFilterArea = null, this.originalContainsPoint = null, this.sprite = null;
   }
 }
 Object.defineProperties(display.DisplayObject.prototype, {
+  /**
+   * The resolution to use for cacheAsBitmap. By default this will use the renderer's resolution
+   * but can be overriden for performance. Lower values will reduce memory usage at the expense
+   * of render quality. A falsey value of `null` or `0` will default to the renderer's resolution.
+   * If `cacheAsBitmap` is set to `true`, this will re-render with the new resolution.
+   * @member {number|null} cacheAsBitmapResolution
+   * @memberof PIXI.DisplayObject#
+   * @default null
+   */
   cacheAsBitmapResolution: {
@@ -36,12 +29,13 @@ get() {
     set(resolution) {
-      if (resolution === this._cacheAsBitmapResolution) {
-        return;
-      }
-      this._cacheAsBitmapResolution = resolution;
-      if (this.cacheAsBitmap) {
-        this.cacheAsBitmap = false;
-        this.cacheAsBitmap = true;
-      }
+      resolution !== this._cacheAsBitmapResolution && (this._cacheAsBitmapResolution = resolution, this.cacheAsBitmap && (this.cacheAsBitmap = !1, this.cacheAsBitmap = !0));
     }
   },
+  /**
+   * The number of samples to use for cacheAsBitmap. If set to `null`, the renderer's
+   * sample count is used.
+   * If `cacheAsBitmap` is set to `true`, this will re-render with the new number of samples.
+   * @member {number|null} cacheAsBitmapMultisample
+   * @memberof PIXI.DisplayObject#
+   * @default null
+   */
   cacheAsBitmapMultisample: {
@@ -52,12 +46,16 @@ get() {
     set(multisample) {
-      if (multisample === this._cacheAsBitmapMultisample) {
-        return;
-      }
-      this._cacheAsBitmapMultisample = multisample;
-      if (this.cacheAsBitmap) {
-        this.cacheAsBitmap = false;
-        this.cacheAsBitmap = true;
-      }
+      multisample !== this._cacheAsBitmapMultisample && (this._cacheAsBitmapMultisample = multisample, this.cacheAsBitmap && (this.cacheAsBitmap = !1, this.cacheAsBitmap = !0));
     }
   },
+  /**
+   * Set this to true if you want this display object to be cached as a bitmap.
+   * This basically takes a snapshot of the display object as it is at that moment. It can
+   * provide a performance benefit for complex static displayObjects.
+   * To remove simply set this property to `false`
+   *
+   * IMPORTANT GOTCHA - Make sure that all your textures are preloaded BEFORE setting this property to true
+   * as it will take a snapshot of what is currently there. If the textures have not loaded then they will not appear.
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   */
   cacheAsBitmap: {
@@ -68,59 +66,19 @@ get() {
     set(value) {
-      if (this._cacheAsBitmap === value) {
+      if (this._cacheAsBitmap === value)
         return;
-      }
       this._cacheAsBitmap = value;
       let data;
-      if (value) {
-        if (!this._cacheData) {
-          this._cacheData = new CacheData();
-        }
-        data = this._cacheData;
-        data.originalRender = this.render;
-        data.originalRenderCanvas = this.renderCanvas;
-        data.originalUpdateTransform = this.updateTransform;
-        data.originalCalculateBounds = this.calculateBounds;
-        data.originalGetLocalBounds = this.getLocalBounds;
-        data.originalDestroy = this.destroy;
-        data.originalContainsPoint = this.containsPoint;
-        data.originalMask = this._mask;
-        data.originalFilterArea = this.filterArea;
-        this.render = this._renderCached;
-        this.renderCanvas = this._renderCachedCanvas;
-        this.destroy = this._cacheAsBitmapDestroy;
-      } else {
-        data = this._cacheData;
-        if (data.sprite) {
-          this._destroyCachedDisplayObject();
-        }
-        this.render = data.originalRender;
-        this.renderCanvas = data.originalRenderCanvas;
-        this.calculateBounds = data.originalCalculateBounds;
-        this.getLocalBounds = data.originalGetLocalBounds;
-        this.destroy = data.originalDestroy;
-        this.updateTransform = data.originalUpdateTransform;
-        this.containsPoint = data.originalContainsPoint;
-        this._mask = data.originalMask;
-        this.filterArea = data.originalFilterArea;
-      }
+      value ? (this._cacheData || (this._cacheData = new CacheData()), data = this._cacheData, data.originalRender = this.render, data.originalRenderCanvas = this.renderCanvas, data.originalUpdateTransform = this.updateTransform, data.originalCalculateBounds = this.calculateBounds, data.originalGetLocalBounds = this.getLocalBounds, data.originalDestroy = this.destroy, data.originalContainsPoint = this.containsPoint, data.originalMask = this._mask, data.originalFilterArea = this.filterArea, this.render = this._renderCached, this.renderCanvas = this._renderCachedCanvas, this.destroy = this._cacheAsBitmapDestroy) : (data = this._cacheData, data.sprite && this._destroyCachedDisplayObject(), this.render = data.originalRender, this.renderCanvas = data.originalRenderCanvas, this.calculateBounds = data.originalCalculateBounds, this.getLocalBounds = data.originalGetLocalBounds, this.destroy = data.originalDestroy, this.updateTransform = data.originalUpdateTransform, this.containsPoint = data.originalContainsPoint, this._mask = data.originalMask, this.filterArea = data.originalFilterArea);
     }
   }
 });
-display.DisplayObject.prototype._renderCached = function _renderCached(renderer) {
-  if (!this.visible || this.worldAlpha <= 0 || !this.renderable) {
-    return;
-  }
-  this._initCachedDisplayObject(renderer);
-  this._cacheData.sprite.transform._worldID = this.transform._worldID;
-  this._cacheData.sprite.worldAlpha = this.worldAlpha;
-  this._cacheData.sprite._render(renderer);
+display.DisplayObject.prototype._renderCached = function(renderer) {
+  !this.visible || this.worldAlpha <= 0 || !this.renderable || (this._initCachedDisplayObject(renderer), this._cacheData.sprite.transform._worldID = this.transform._worldID, this._cacheData.sprite.worldAlpha = this.worldAlpha, this._cacheData.sprite._render(renderer));
 };
-display.DisplayObject.prototype._initCachedDisplayObject = function _initCachedDisplayObject(renderer) {
-  if (this._cacheData?.sprite) {
+display.DisplayObject.prototype._initCachedDisplayObject = function(renderer) {
+  if (this._cacheData?.sprite)
     return;
-  }
   const cacheAlpha = this.alpha;
-  this.alpha = 1;
-  renderer.batch.flush();
-  const bounds = this.getLocalBounds(null, true).clone();
+  this.alpha = 1, renderer.batch.flush();
+  const bounds = this.getLocalBounds(new core.Rectangle(), !0);
   if (this.filters?.length) {
@@ -130,125 +88,50 @@ const padding = this.filters[0].padding;
   }
-  bounds.ceil(core.settings.RESOLUTION);
-  const cachedRenderTexture = renderer.renderTexture.current;
-  const cachedSourceFrame = renderer.renderTexture.sourceFrame.clone();
-  const cachedDestinationFrame = renderer.renderTexture.destinationFrame.clone();
-  const cachedProjectionTransform = renderer.projection.transform;
-  const renderTexture = core.RenderTexture.create({
+  const resolution = this.cacheAsBitmapResolution || renderer.resolution;
+  bounds.ceil(resolution), bounds.width = Math.max(bounds.width, 1 / resolution), bounds.height = Math.max(bounds.height, 1 / resolution);
+  const cachedRenderTexture = renderer.renderTexture.current, cachedSourceFrame = renderer.renderTexture.sourceFrame.clone(), cachedDestinationFrame = renderer.renderTexture.destinationFrame.clone(), cachedProjectionTransform = renderer.projection.transform, renderTexture = core.RenderTexture.create({
     width: bounds.width,
     height: bounds.height,
-    resolution: this.cacheAsBitmapResolution || renderer.resolution,
+    resolution,
     multisample: this.cacheAsBitmapMultisample ?? renderer.multisample
-  });
-  const textureCacheId = `cacheAsBitmap_${core.utils.uid()}`;
-  this._cacheData.textureCacheId = textureCacheId;
-  core.BaseTexture.addToCache(renderTexture.baseTexture, textureCacheId);
-  core.Texture.addToCache(renderTexture, textureCacheId);
+  }), textureCacheId = `cacheAsBitmap_${core.utils.uid()}`;
+  this._cacheData.textureCacheId = textureCacheId, core.BaseTexture.addToCache(renderTexture.baseTexture, textureCacheId), core.Texture.addToCache(renderTexture, textureCacheId);
   const m = this.transform.localTransform.copyTo(_tempMatrix).invert().translate(-bounds.x, -bounds.y);
-  this.render = this._cacheData.originalRender;
-  renderer.render(this, { renderTexture, clear: true, transform: m, skipUpdateTransform: false });
-  renderer.framebuffer.blit();
-  renderer.projection.transform = cachedProjectionTransform;
-  renderer.renderTexture.bind(cachedRenderTexture, cachedSourceFrame, cachedDestinationFrame);
-  this.render = this._renderCached;
-  this.updateTransform = this.displayObjectUpdateTransform;
-  this.calculateBounds = this._calculateCachedBounds;
-  this.getLocalBounds = this._getCachedLocalBounds;
-  this._mask = null;
-  this.filterArea = null;
-  this.alpha = cacheAlpha;
+  this.render = this._cacheData.originalRender, renderer.render(this, { renderTexture, clear: !0, transform: m, skipUpdateTransform: !1 }), renderer.framebuffer.blit(), renderer.projection.transform = cachedProjectionTransform, renderer.renderTexture.bind(cachedRenderTexture, cachedSourceFrame, cachedDestinationFrame), this.render = this._renderCached, this.updateTransform = this.displayObjectUpdateTransform, this.calculateBounds = this._calculateCachedBounds, this.getLocalBounds = this._getCachedLocalBounds, this._mask = null, this.filterArea = null, this.alpha = cacheAlpha;
   const cachedSprite = new sprite.Sprite(renderTexture);
-  cachedSprite.transform.worldTransform = this.transform.worldTransform;
-  cachedSprite.anchor.x = -(bounds.x / bounds.width);
-  cachedSprite.anchor.y = -(bounds.y / bounds.height);
-  cachedSprite.alpha = cacheAlpha;
-  cachedSprite._bounds = this._bounds;
-  this._cacheData.sprite = cachedSprite;
-  this.transform._parentID = -1;
-  if (!this.parent) {
-    this.enableTempParent();
-    this.updateTransform();
-    this.disableTempParent(null);
-  } else {
-    this.updateTransform();
-  }
-  this.containsPoint = cachedSprite.containsPoint.bind(cachedSprite);
+  cachedSprite.transform.worldTransform = this.transform.worldTransform, cachedSprite.anchor.x = -(bounds.x / bounds.width), cachedSprite.anchor.y = -(bounds.y / bounds.height), cachedSprite.alpha = cacheAlpha, cachedSprite._bounds = this._bounds, this._cacheData.sprite = cachedSprite, this.transform._parentID = -1, this.parent ? this.updateTransform() : (this.enableTempParent(), this.updateTransform(), this.disableTempParent(null)), this.containsPoint = cachedSprite.containsPoint.bind(cachedSprite);
 };
-display.DisplayObject.prototype._renderCachedCanvas = function _renderCachedCanvas(renderer) {
-  if (!this.visible || this.worldAlpha <= 0 || !this.renderable) {
-    return;
-  }
-  this._initCachedDisplayObjectCanvas(renderer);
-  this._cacheData.sprite.worldAlpha = this.worldAlpha;
-  this._cacheData.sprite._renderCanvas(renderer);
+display.DisplayObject.prototype._renderCachedCanvas = function(renderer) {
+  !this.visible || this.worldAlpha <= 0 || !this.renderable || (this._initCachedDisplayObjectCanvas(renderer), this._cacheData.sprite.worldAlpha = this.worldAlpha, this._cacheData.sprite._renderCanvas(renderer));
 };
-display.DisplayObject.prototype._initCachedDisplayObjectCanvas = function _initCachedDisplayObjectCanvas(renderer) {
-  if (this._cacheData?.sprite) {
+display.DisplayObject.prototype._initCachedDisplayObjectCanvas = function(renderer) {
+  if (this._cacheData?.sprite)
     return;
-  }
-  const bounds = this.getLocalBounds(null, true);
-  const cacheAlpha = this.alpha;
+  const bounds = this.getLocalBounds(new core.Rectangle(), !0), cacheAlpha = this.alpha;
   this.alpha = 1;
-  const cachedRenderTarget = renderer.canvasContext.activeContext;
-  const cachedProjectionTransform = renderer._projTransform;
-  bounds.ceil(core.settings.RESOLUTION);
-  const renderTexture = core.RenderTexture.create({ width: bounds.width, height: bounds.height });
-  const textureCacheId = `cacheAsBitmap_${core.utils.uid()}`;
-  this._cacheData.textureCacheId = textureCacheId;
-  core.BaseTexture.addToCache(renderTexture.baseTexture, textureCacheId);
-  core.Texture.addToCache(renderTexture, textureCacheId);
+  const cachedRenderTarget = renderer.canvasContext.activeContext, cachedProjectionTransform = renderer._projTransform, resolution = this.cacheAsBitmapResolution || renderer.resolution;
+  bounds.ceil(resolution), bounds.width = Math.max(bounds.width, 1 / resolution), bounds.height = Math.max(bounds.height, 1 / resolution);
+  const renderTexture = core.RenderTexture.create({
+    width: bounds.width,
+    height: bounds.height,
+    resolution
+  }), textureCacheId = `cacheAsBitmap_${core.utils.uid()}`;
+  this._cacheData.textureCacheId = textureCacheId, core.BaseTexture.addToCache(renderTexture.baseTexture, textureCacheId), core.Texture.addToCache(renderTexture, textureCacheId);
   const m = _tempMatrix;
-  this.transform.localTransform.copyTo(m);
-  m.invert();
-  m.tx -= bounds.x;
-  m.ty -= bounds.y;
-  this.renderCanvas = this._cacheData.originalRenderCanvas;
-  renderer.render(this, { renderTexture, clear: true, transform: m, skipUpdateTransform: false });
-  renderer.canvasContext.activeContext = cachedRenderTarget;
-  renderer._projTransform = cachedProjectionTransform;
-  this.renderCanvas = this._renderCachedCanvas;
-  this.updateTransform = this.displayObjectUpdateTransform;
-  this.calculateBounds = this._calculateCachedBounds;
-  this.getLocalBounds = this._getCachedLocalBounds;
-  this._mask = null;
-  this.filterArea = null;
-  this.alpha = cacheAlpha;
+  this.transform.localTransform.copyTo(m), m.invert(), m.tx -= bounds.x, m.ty -= bounds.y, this.renderCanvas = this._cacheData.originalRenderCanvas, renderer.render(this, { renderTexture, clear: !0, transform: m, skipUpdateTransform: !1 }), renderer.canvasContext.activeContext = cachedRenderTarget, renderer._projTransform = cachedProjectionTransform, this.renderCanvas = this._renderCachedCanvas, this.updateTransform = this.displayObjectUpdateTransform, this.calculateBounds = this._calculateCachedBounds, this.getLocalBounds = this._getCachedLocalBounds, this._mask = null, this.filterArea = null, this.alpha = cacheAlpha;
   const cachedSprite = new sprite.Sprite(renderTexture);
-  cachedSprite.transform.worldTransform = this.transform.worldTransform;
-  cachedSprite.anchor.x = -(bounds.x / bounds.width);
-  cachedSprite.anchor.y = -(bounds.y / bounds.height);
-  cachedSprite.alpha = cacheAlpha;
-  cachedSprite._bounds = this._bounds;
-  this._cacheData.sprite = cachedSprite;
-  this.transform._parentID = -1;
-  if (!this.parent) {
-    this.parent = renderer._tempDisplayObjectParent;
-    this.updateTransform();
-    this.parent = null;
-  } else {
-    this.updateTransform();
-  }
-  this.containsPoint = cachedSprite.containsPoint.bind(cachedSprite);
+  cachedSprite.transform.worldTransform = this.transform.worldTransform, cachedSprite.anchor.x = -(bounds.x / bounds.width), cachedSprite.anchor.y = -(bounds.y / bounds.height), cachedSprite.alpha = cacheAlpha, cachedSprite._bounds = this._bounds, this._cacheData.sprite = cachedSprite, this.transform._parentID = -1, this.parent ? this.updateTransform() : (this.parent = renderer._tempDisplayObjectParent, this.updateTransform(), this.parent = null), this.containsPoint = cachedSprite.containsPoint.bind(cachedSprite);
 };
-display.DisplayObject.prototype._calculateCachedBounds = function _calculateCachedBounds() {
-  this._bounds.clear();
-  this._cacheData.sprite.transform._worldID = this.transform._worldID;
-  this._cacheData.sprite._calculateBounds();
-  this._bounds.updateID = this._boundsID;
+display.DisplayObject.prototype._calculateCachedBounds = function() {
+  this._bounds.clear(), this._cacheData.sprite.transform._worldID = this.transform._worldID, this._cacheData.sprite._calculateBounds(), this._bounds.updateID = this._boundsID;
 };
-display.DisplayObject.prototype._getCachedLocalBounds = function _getCachedLocalBounds() {
+display.DisplayObject.prototype._getCachedLocalBounds = function() {
   return this._cacheData.sprite.getLocalBounds(null);
 };
-display.DisplayObject.prototype._destroyCachedDisplayObject = function _destroyCachedDisplayObject() {
-  this._cacheData.sprite._texture.destroy(true);
-  this._cacheData.sprite = null;
-  core.BaseTexture.removeFromCache(this._cacheData.textureCacheId);
-  core.Texture.removeFromCache(this._cacheData.textureCacheId);
-  this._cacheData.textureCacheId = null;
+display.DisplayObject.prototype._destroyCachedDisplayObject = function() {
+  this._cacheData.sprite._texture.destroy(!0), this._cacheData.sprite = null, core.BaseTexture.removeFromCache(this._cacheData.textureCacheId), core.Texture.removeFromCache(this._cacheData.textureCacheId), this._cacheData.textureCacheId = null;
 };
-display.DisplayObject.prototype._cacheAsBitmapDestroy = function _cacheAsBitmapDestroy(options) {
-  this.cacheAsBitmap = false;
-  this.destroy(options);
+display.DisplayObject.prototype._cacheAsBitmapDestroy = function(options) {
+  this.cacheAsBitmap = !1, this.destroy(options);
 };
-
 exports.CacheData = CacheData;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@pixi/mixin-cache-as-bitmap",
-  "version": "7.2.4",
+  "version": "7.3.0-rc",
   "main": "lib/index.js",
@@ -39,6 +39,6 @@ "module": "lib/index.mjs",
   "peerDependencies": {
-    "@pixi/core": "7.2.4",
-    "@pixi/display": "7.2.4",
-    "@pixi/sprite": "7.2.4"
+    "@pixi/core": "7.3.0-rc",
+    "@pixi/display": "7.3.0-rc",
+    "@pixi/sprite": "7.3.0-rc"
   }
 }

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

Worsened metrics

Total package byte prevSize

71494

decreased by-9.32%

Lines of code

334

decreased by-37.22%

Number of low quality alerts

1

increased byInfinity%

No dependency changes