feat: let Pixi Application options be configurable (#470)

This lets the users of this library configure Pixi.js Application for pixi layers if default setting don't cover their use case.
equinor · Apr 8, 2022 · 13bec33 · 13bec33
1 parent 64fc8b1
commit 13bec33
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -1,5 +1,5 @@
 import { ZoomTransform } from 'd3-zoom';
-import { Graphics } from 'pixi.js';
+import { Application, Graphics } from 'pixi.js';
 import { Layer } from './layers/base/Layer';
 import { IntersectionReferenceSystem } from './control/IntersectionReferenceSystem';
 import Vector2 from '@equinor/videx-vector2';
@@ -65,7 +65,7 @@ export interface WellborepathLayerOptions extends LayerOptions {
 
 export interface GeomodelLayerOptions extends LayerOptions {}
 
-export interface CompletionLayerOptions extends LayerOptions {}
+export interface CompletionLayerOptions extends PixiLayerOptions {}
 
 export interface GeomodelLayerLabelsOptions extends LayerOptions {
   margins?: number;
@@ -91,7 +91,11 @@ export interface CementLayerOptions extends WellComponentBaseOptions {
   secondColor?: string;
 }
 
-export interface WellComponentBaseOptions extends LayerOptions {
+export interface PixiLayerOptions extends LayerOptions {
+  pixiApplicationOptions?: PixiApplicationOptions;
+}
+
+export interface WellComponentBaseOptions extends PixiLayerOptions {
   exaggerationFactor?: number;
 }
 
@@ -202,3 +206,6 @@ export interface CalloutOptions extends LayerOptions {
   offsetMax?: number;
   offsetFactor?: number;
 }
+
+type PixiApplicationConstructorParameters = ConstructorParameters<typeof Application>;
+type PixiApplicationOptions = PixiApplicationConstructorParameters[0];
diff --git a/src/layers/base/PixiLayer.ts b/src/layers/base/PixiLayer.ts
@@ -1,13 +1,17 @@
 import { Application, RENDERER_TYPE } from 'pixi.js';
 import { Layer } from './Layer';
-import { OnMountEvent, OnRescaleEvent, OnResizeEvent, OnUnmountEvent } from '../../interfaces';
+import { OnMountEvent, OnRescaleEvent, OnResizeEvent, OnUnmountEvent, PixiLayerOptions } from '../../interfaces';
 import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
 
 export abstract class PixiLayer extends Layer {
   elm: HTMLElement;
 
   ctx: Application;
 
+  constructor(id?: string, options?: PixiLayerOptions) {
+    super(id, options);
+  }
+
   onMount(event: OnMountEvent): void {
     super.onMount(event);
 
@@ -19,6 +23,7 @@ export abstract class PixiLayer extends Layer {
       this.updateStyle();
 
       const { elm, height, width } = event;
+      const { pixiApplicationOptions } = this.options as PixiLayerOptions;
 
       const pixiOptions = {
         width: width || parseInt(this.elm.getAttribute('width'), 10) || DEFAULT_LAYER_WIDTH,
@@ -28,6 +33,7 @@ export abstract class PixiLayer extends Layer {
         clearBeforeRender: true,
         autoResize: true,
         preserveDrawingBuffer: true,
+        ...pixiApplicationOptions,
       };
 
       this.ctx = new Application(pixiOptions);