Remove AbstractRenderer, move its functionality to Systems (pixijs#8331)

* - create mutisample system - create base renderer (needs better name) - create plugin system * - split out webGL renderer into systems - created first pass of `IRenderer` interface - add init to `ISystem` - make destroy optinoal on `ISystem` * - convert canvas renderer to use systems - `CanvasmaskManager` converted to `CanvasmaskSystem` - renamed `BaseRenderer` to `SystemManager` - removed `AbstractRenderer` - created a `ISystemConfig` - created a `StartupSystem` * - fill out destroy functions for new systems - resolution getter performance pass * - fix up the destory methods so they run in reverse to the init methods * - move system to correct folders - move `IRenderableObject` and `IRenderableContainer` to `IRenderer` file * EventSystem * - system doc update for `renderer` * update generic plugin docs * webGL system documentation * final round of docs * final doc tweaks * docs for SystemManager * fix the interface locations for `IRenderingContext` * Update packages/accessibility/src/AccessibilityManager.ts Co-authored-by: Matt Karl <matt@mattkarl.com> * fix packages/core refes * learn to spell.. * final types fix! * docs and missing getters on renderer * feedback * added deprications.. * rename context to canvasContext * linto * tweak background constructor * more deprications * fix bad import * make blit an option when rendering to a renderTexture * test tweaks * fix tests * fix type * feedback * tweak doc for system * add #is_DEBUG * fix docs * Update packages/core/src/view/ViewSystem.ts Co-authored-by: Matt Karl <matt@mattkarl.com> * rename `RenderSystem` -> `ObjectRendererSystem` `viewSystem.view` -> `viewSystem.element` * remove cast * Update CanvasObjectRendererSystem.ts * merges * fix busted text * lint * tweak to IRenderer * oops * lint some more Co-authored-by: Matt Karl <matt@mattkarl.com> Co-authored-by: Zyie <24736175+Zyie@users.noreply.github.com>
michaeljherrmann · Jun 3, 2022 · ccc1516 · ccc1516
1 parent 524eb15
commit ccc1516
Show file tree

Hide file tree

Showing 63 changed files with 2,435 additions and 1,263 deletions.
diff --git a/packages/accessibility/src/AccessibilityManager.ts b/packages/accessibility/src/AccessibilityManager.ts
@@ -4,8 +4,8 @@ import { accessibleTarget } from './accessibleTarget';
 
 import type { Rectangle } from '@pixi/math';
 import type { Container } from '@pixi/display';
-import type { Renderer, AbstractRenderer } from '@pixi/core';
 import type { IAccessibleHTMLElement } from './accessibleTarget';
+import type { IRenderer } from '@pixi/core';
 
 // add some extra variables to the container..
 DisplayObject.mixin(accessibleTarget);
@@ -42,7 +42,7 @@ export class AccessibilityManager
      * The renderer this accessibility manager works for.
      * @type {PIXI.CanvasRenderer|PIXI.Renderer}
      */
-    public renderer: AbstractRenderer | Renderer;
+    public renderer: IRenderer;
 
     /** Internal variable, see isActive getter. */
     private _isActive = false;
@@ -74,7 +74,7 @@ export class AccessibilityManager
     /**
      * @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer
      */
-    constructor(renderer: AbstractRenderer | Renderer)
+    constructor(renderer: IRenderer)
     {
         this._hookDiv = null;
 
@@ -270,15 +270,15 @@ export class AccessibilityManager
 
         this.androidUpdateCount = now + this.androidUpdateFrequency;
 
-        if (!(this.renderer as Renderer).renderingToScreen)
+        if (!this.renderer.renderingToScreen)
         {
             return;
         }
 
         // update children...
-        if (this.renderer._lastObjectRendered)
+        if (this.renderer.lastObjectRendered)
         {
-            this.updateAccessibleObjects(this.renderer._lastObjectRendered as Container);
+            this.updateAccessibleObjects(this.renderer.lastObjectRendered as Container);
         }
 
         const { left, top, width, height } = this.renderer.view.getBoundingClientRect();

diff --git a/packages/app/src/Application.ts b/packages/app/src/Application.ts
@@ -2,7 +2,7 @@ import { Container } from '@pixi/display';
 import { autoDetectRenderer } from '@pixi/core';
 
 import type { Rectangle } from '@pixi/math';
-import type { Renderer, IRendererOptionsAuto, AbstractRenderer } from '@pixi/core';
+import type {  IRendererOptionsAuto, IRenderer } from '@pixi/core';
 import type { IDestroyOptions } from '@pixi/display';
 
 /**
@@ -59,7 +59,7 @@ export class Application
      * WebGL renderer if available, otherwise CanvasRenderer.
      * @member {PIXI.Renderer|PIXI.CanvasRenderer}
      */
-    public renderer: Renderer | AbstractRenderer;
+    public renderer: IRenderer;
 
     /**
      * @param {object} [options] - The optional renderer parameters.

diff --git a/packages/canvas-display/src/Container.ts b/packages/canvas-display/src/Container.ts
@@ -30,7 +30,7 @@ Container.prototype.renderCanvas = function renderCanvas(renderer: CanvasRendere
 
     if (this._mask)
     {
-        renderer.maskManager.pushMask(this._mask as MaskData);
+        renderer.mask.pushMask(this._mask as MaskData);
     }
 
     this._renderCanvas(renderer);
@@ -41,6 +41,6 @@ Container.prototype.renderCanvas = function renderCanvas(renderer: CanvasRendere
 
     if (this._mask)
     {
-        renderer.maskManager.popMask(renderer);
+        renderer.mask.popMask(renderer);
     }
 };
diff --git a/packages/canvas-extract/src/CanvasExtract.ts b/packages/canvas-extract/src/CanvasExtract.ts
@@ -92,8 +92,8 @@ export class CanvasExtract
         }
         else
         {
-            context = renderer.rootContext;
-            resolution = renderer.resolution;
+            context = renderer.canvasContext.rootContext;
+            resolution = renderer._view.resolution;
             frame = TEMP_RECT;
             frame.width = this.renderer.width;
             frame.height = this.renderer.height;
@@ -146,7 +146,7 @@ export class CanvasExtract
         }
         else
         {
-            context = renderer.rootContext;
+            context = renderer.canvasContext.rootContext;
             resolution = renderer.resolution;
             frame = TEMP_RECT;
             frame.width = renderer.width;

diff --git a/packages/canvas-graphics/src/CanvasGraphicsRenderer.ts b/packages/canvas-graphics/src/CanvasGraphicsRenderer.ts
@@ -77,12 +77,13 @@ export class CanvasGraphicsRenderer
     public render(graphics: Graphics): void
     {
         const renderer = this.renderer;
-        const context = renderer.context;
+
+        const context = renderer.canvasContext.activeContext;
         const worldAlpha = graphics.worldAlpha;
         const transform = graphics.transform.worldTransform;
 
-        renderer.setContextTransform(transform);
-        renderer.setBlendMode(graphics.blendMode);
+        renderer.canvasContext.setContextTransform(transform);
+        renderer.canvasContext.setBlendMode(graphics.blendMode);
 
         const graphicsData = graphics.geometry.graphicsData;
 
@@ -105,7 +106,7 @@ export class CanvasGraphicsRenderer
 
             if (data.matrix)
             {
-                renderer.setContextTransform(transform.copyTo(this._tempMatrix).append(data.matrix));
+                renderer.canvasContext.setContextTransform(transform.copyTo(this._tempMatrix).append(data.matrix));
             }
 
             if (fillStyle.visible)

diff --git a/packages/canvas-mesh/src/CanvasMeshRenderer.ts b/packages/canvas-mesh/src/CanvasMeshRenderer.ts
@@ -31,9 +31,9 @@ export class CanvasMeshRenderer
         const renderer = this.renderer;
         const transform = mesh.worldTransform;
 
-        renderer.context.globalAlpha = mesh.worldAlpha;
-        renderer.setBlendMode(mesh.blendMode);
-        renderer.setContextTransform(transform, mesh.roundPixels);
+        renderer.canvasContext.activeContext.globalAlpha = mesh.worldAlpha;
+        renderer.canvasContext.setBlendMode(mesh.blendMode);
+        renderer.canvasContext.setContextTransform(transform, mesh.roundPixels);
 
         if (mesh.drawMode !== DRAW_MODES.TRIANGLES)
         {
@@ -96,7 +96,7 @@ export class CanvasMeshRenderer
      */
     private _renderDrawTriangle(mesh: Mesh, index0: number, index1: number, index2: number): void
     {
-        const context = this.renderer.context;
+        const context = this.renderer.canvasContext.activeContext;
         const vertices = mesh.geometry.buffers[0].data;
         const { uvs, texture } = mesh;
 
@@ -138,7 +138,7 @@ export class CanvasMeshRenderer
         let y1 = vertices[index1 + 1];
         let y2 = vertices[index2 + 1];
 
-        const screenPadding = mesh.canvasPadding / this.renderer.resolution;
+        const screenPadding = mesh.canvasPadding / this.renderer.canvasContext.activeResolution;
 
         if (screenPadding > 0)
         {
@@ -228,7 +228,7 @@ export class CanvasMeshRenderer
         );
 
         context.restore();
-        this.renderer.invalidateBlendMode();
+        this.renderer.canvasContext.invalidateBlendMode();
     }
 
     /**
@@ -238,7 +238,7 @@ export class CanvasMeshRenderer
      */
     renderMeshFlat(mesh: Mesh): void
     {
-        const context = this.renderer.context;
+        const context = this.renderer.canvasContext.activeContext;
         const vertices = mesh.geometry.getBuffer('aVertexPosition').data;
         const length = vertices.length / 2;
 

diff --git a/packages/canvas-mesh/src/NineSlicePlane.ts b/packages/canvas-mesh/src/NineSlicePlane.ts
@@ -36,7 +36,7 @@ NineSlicePlane.prototype._canvasUvs = null;
  */
 NineSlicePlane.prototype._renderCanvas = function _renderCanvas(renderer: CanvasRenderer): void
 {
-    const context = renderer.context;
+    const context = renderer.canvasContext.activeContext;
     const transform = this.worldTransform;
     const isTinted = this.tint !== 0xFFFFFF;
     const texture = this.texture;
@@ -88,8 +88,8 @@ NineSlicePlane.prototype._renderCanvas = function _renderCanvas(renderer: Canvas
     }
 
     context.globalAlpha = this.worldAlpha;
-    renderer.setBlendMode(this.blendMode);
-    renderer.setContextTransform(transform, this.roundPixels);
+    renderer.canvasContext.setBlendMode(this.blendMode);
+    renderer.canvasContext.setContextTransform(transform, this.roundPixels);
 
     for (let row = 0; row < 3; row++)
     {

diff --git a/packages/canvas-particle-container/src/ParticleContainer.ts b/packages/canvas-particle-container/src/ParticleContainer.ts
@@ -16,7 +16,7 @@ ParticleContainer.prototype.renderCanvas = function renderCanvas(renderer: Canva
         return;
     }
 
-    const context = renderer.context;
+    const context = renderer.canvasContext.activeContext;
     const transform = this.worldTransform;
     let isRotated = true;
 
@@ -26,7 +26,7 @@ ParticleContainer.prototype.renderCanvas = function renderCanvas(renderer: Canva
     let finalWidth = 0;
     let finalHeight = 0;
 
-    renderer.setBlendMode(this.blendMode);
+    renderer.canvasContext.setBlendMode(this.blendMode);
 
     context.globalAlpha = this.worldAlpha;
 
@@ -55,7 +55,7 @@ ParticleContainer.prototype.renderCanvas = function renderCanvas(renderer: Canva
             // this is the fastest  way to optimise! - if rotation is 0 then we can avoid any kind of setTransform call
             if (isRotated)
             {
-                renderer.setContextTransform(transform, false, 1);
+                renderer.canvasContext.setContextTransform(transform, false, 1);
                 isRotated = false;
             }
 
@@ -76,7 +76,7 @@ ParticleContainer.prototype.renderCanvas = function renderCanvas(renderer: Canva
 
             const childTransform = child.worldTransform;
 
-            renderer.setContextTransform(childTransform, this.roundPixels, 1);
+            renderer.canvasContext.setContextTransform(childTransform, this.roundPixels, 1);
 
             positionX = ((child.anchor.x) * (-frame.width)) + 0.5;
             positionY = ((child.anchor.y) * (-frame.height)) + 0.5;
@@ -86,17 +86,18 @@ ParticleContainer.prototype.renderCanvas = function renderCanvas(renderer: Canva
         }
 
         const resolution = child._texture.baseTexture.resolution;
+        const contextResolution = renderer.canvasContext.activeResolution;
 
         context.drawImage(
             child._texture.baseTexture.getDrawableSource(),
             frame.x * resolution,
             frame.y * resolution,
             frame.width * resolution,
             frame.height * resolution,
-            positionX * renderer.resolution,
-            positionY * renderer.resolution,
-            finalWidth * renderer.resolution,
-            finalHeight * renderer.resolution
+            positionX * contextResolution,
+            positionY * contextResolution,
+            finalWidth * contextResolution,
+            finalHeight * contextResolution
         );
     }
 };
diff --git a/packages/canvas-prepare/src/CanvasPrepare.ts b/packages/canvas-prepare/src/CanvasPrepare.ts
@@ -1,7 +1,6 @@
-import { BaseTexture } from '@pixi/core';
+import { BaseTexture, IRenderer } from '@pixi/core';
 import { BasePrepare } from '@pixi/prepare';
 
-import type { AbstractRenderer } from '@pixi/core';
 import type { CanvasRenderer } from '@pixi/canvas-renderer';
 import type { IDisplayObjectExtended } from '@pixi/prepare';
 
@@ -14,7 +13,7 @@ const CANVAS_START_SIZE = 16;
  * @param item - Item to check
  * @returns If item was uploaded.
  */
-function uploadBaseTextures(prepare: AbstractRenderer | BasePrepare, item: IDisplayObjectExtended): boolean
+function uploadBaseTextures(prepare: IRenderer | BasePrepare, item: IDisplayObjectExtended): boolean
 {
     const tempPrepare = prepare as CanvasPrepare;