@lightningjs/renderer - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

dist/src/common/IAnimationController.d.ts

 import type { IEventEmitter } from './IEventEmitter.js';
-export type AnimationControllerState = 'running' | 'paused' | 'stopped';
+export type AnimationControllerState = 'scheduled' | 'running' | 'paused' | 'stopped';
 /**
@@ -4,0 +4,0 @@ * Animation Controller interface

dist/src/core/animations/CoreAnimationController.js

@@ -43,6 +43,6 @@ /* eslint-disable @typescript-eslint/unbound-method */
     start() {
-        if (this.state !== 'running') {
+        if (this.state !== 'running' && this.state !== 'scheduled') {
             this.makeStoppedPromise();
             this.registerAnimation();
-            this.state = 'running';
+            this.state = 'scheduled';
         }
@@ -117,2 +117,3 @@ return this;
     onAnimating() {
+        this.state = 'running';
         this.emit('animating', this);
@@ -119,0 +120,0 @@ }

dist/src/core/CoreNode.js

@@ -413,6 +413,7 @@ /*
             this.setUpdateType(UpdateType.RenderState | UpdateType.Children);
+            this.childUpdateType |= UpdateType.Global;
             if (this.clipping === true) {
-                this.setUpdateType(UpdateType.Clipping);
+                this.setUpdateType(UpdateType.Clipping | UpdateType.RenderBounds);
+                this.childUpdateType |= UpdateType.RenderBounds;
             }
-            this.childUpdateType |= UpdateType.Global;
         }
@@ -449,5 +450,2 @@ if (this.updateType & UpdateType.RenderBounds) {
         }
-        if (this.renderState === CoreNodeRenderState.OutOfBounds) {
-            return;
-        }
         if (this.updateType & UpdateType.Clipping) {
@@ -482,2 +480,5 @@ this.calculateClippingRect(parentClippingRect);
         }
+        if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+            return;
+        }
         if (this.updateType & UpdateType.Children &&
@@ -484,0 +485,0 @@ this.children.length > 0 &&

dist/src/core/renderers/CoreRenderer.d.ts

@@ -49,2 +49,3 @@ import type { Dimensions } from '../../common/CommonTypes.js';
     contextSpy: ContextSpy | null;
+    forceWebGL2: boolean;
 }
@@ -51,0 +52,0 @@ export interface BufferInfo {

dist/src/core/renderers/webgl/WebGlCoreRenderer.js

@@ -81,3 +81,3 @@ /*
         });
-        const gl = createWebGLContext(canvas, options.contextSpy);
+        const gl = createWebGLContext(canvas, options.forceWebGL2, options.contextSpy);
         const glw = (this.glw = new WebGlContextWrapper(gl));
@@ -84,0 +84,0 @@ const color = getNormalizedRgbaComponents(clearColor);

dist/src/core/renderers/webgl/WebGlCoreShader.js

@@ -89,10 +89,2 @@ /*
         this.program = program;
-        if (webGl2) {
-            const vao = glw.createVertexArray();
-            if (!vao) {
-                throw new Error();
-            }
-            this.vao = vao;
-            glw.bindVertexArray(this.vao);
-        }
         this.attributeLocations = {};
@@ -226,3 +218,2 @@ this.attributeBuffers = {};
         this.glw.useProgram(this.program);
-        this.glw.useProgram(this.program);
         if (this.glw.isWebGl2() && this.vao) {
@@ -229,0 +220,0 @@ this.glw.bindVertexArray(this.vao);

dist/src/core/Stage.d.ts

@@ -29,2 +29,3 @@ import { AnimationManager } from './animations/AnimationManager.js';
     enableContextSpy: boolean;
+    forceWebGL2: boolean;
     numImageWorkers: number;
@@ -31,0 +32,0 @@ renderEngine: typeof WebGlCoreRenderer | typeof CanvasCoreRenderer;

dist/src/core/Stage.js

@@ -73,3 +73,3 @@ /*
         this.options = options;
-        const { canvas, clearColor, appWidth, appHeight, boundsMargin, enableContextSpy, numImageWorkers, textureMemory, renderEngine, fontEngines, } = options;
+        const { canvas, clearColor, appWidth, appHeight, boundsMargin, enableContextSpy, forceWebGL2, numImageWorkers, textureMemory, renderEngine, fontEngines, } = options;
         this.eventBus = options.eventBus;
@@ -98,2 +98,3 @@ this.txManager = new CoreTextureManager(numImageWorkers);
             contextSpy: this.contextSpy,
+            forceWebGL2,
         };
@@ -100,0 +101,0 @@ this.renderer = new renderEngine(rendererOptions);

dist/src/core/utils.d.ts

@@ -7,3 +7,3 @@ /**
 export declare const EPSILON = 0.000001;
-export declare let ARRAY_TYPE: Float32ArrayConstructor | ArrayConstructor;
+export declare let ARRAY_TYPE: ArrayConstructor | Float32ArrayConstructor;
 export declare const RANDOM: () => number;
@@ -10,0 +10,0 @@ export declare const ANGLE_ORDER = "zyx";

dist/src/main-api/Inspector.js

@@ -172,2 +172,11 @@ import { CoreNode, } from '../core/CoreNode.js';
         node.div = div;
+        node.on('inViewport', () => {
+            div.setAttribute('state', 'inViewport');
+        });
+        node.on('inBounds', () => {
+            div.setAttribute('state', 'inBounds');
+        });
+        node.on('outOfBounds', () => {
+            div.setAttribute('state', 'outOfBounds');
+        });
         return this.createProxy(node, div);
@@ -174,0 +183,0 @@ }

dist/src/main-api/Renderer.d.ts

@@ -199,2 +199,12 @@ import type { EffectMap, ShaderMap } from '../core/CoreShaderManager.js';
     fontEngines: (typeof SdfTextRenderer | typeof CanvasTextRenderer)[];
+    /**
+     * Force WebGL2
+     *
+     * @remarks
+     * Force the renderer to use WebGL2. This can be used to force the renderer to
+     * use WebGL2 even if the browser supports WebGL1.
+     *
+     * @defaultValue `false`
+     */
+    forceWebGL2?: boolean;
 }
@@ -201,0 +211,0 @@ /**

dist/src/main-api/Renderer.js

@@ -104,2 +104,3 @@ /*
             enableContextSpy: settings.enableContextSpy ?? false,
+            forceWebGL2: settings.forceWebGL2 ?? false,
             inspector: settings.inspector ?? false,
@@ -130,2 +131,3 @@ renderEngine: settings.renderEngine,
             enableContextSpy: this.settings.enableContextSpy,
+            forceWebGL2: this.settings.forceWebGL2,
             fpsUpdateInterval: this.settings.fpsUpdateInterval,
@@ -132,0 +134,0 @@ numImageWorkers: this.settings.numImageWorkers,

dist/src/main-api/RendererMain.js

@@ -204,3 +204,3 @@ /*
             letterSpacing: props.letterSpacing ?? 0,
-            lineHeight: props.lineHeight,
+            lineHeight: props.lineHeight, // `undefined` is a valid value
             maxLines: props.maxLines ?? 0,
@@ -207,0 +207,0 @@ textBaseline: props.textBaseline ?? 'alphabetic',

dist/src/render-drivers/threadx/ThreadXMainAnimationController.d.ts

@@ -0,7 +1,8 @@
+import { EventEmitter } from '../../common/EventEmitter.js';
 import type { AnimationControllerState, IAnimationController } from '../../common/IAnimationController.js';
 import type { ThreadXMainNode } from './ThreadXMainNode.js';
-export declare class ThreadXMainAnimationController implements IAnimationController {
+export declare class ThreadXMainAnimationController extends EventEmitter implements IAnimationController {
     private node;
     private id;
-    stoppedPromise: Promise<void> | null;
+    stoppedPromise: Promise<void>;
     /**
@@ -11,4 +12,4 @@ * If this is null, then the animation is in a finished / stopped state.
     stoppedResolve: (() => void) | null;
+    state: AnimationControllerState;
     constructor(node: ThreadXMainNode, id: number);
-    state: AnimationControllerState;
     start(): IAnimationController;
@@ -19,4 +20,7 @@ stop(): IAnimationController;
     waitUntilStopped(): Promise<void>;
-    private onAnimationFinished;
+    private sendStart;
+    private sendStop;
     private makeStoppedPromise;
+    private onFinished;
+    private onAnimating;
 }

dist/src/render-drivers/threadx/ThreadXMainAnimationController.js

@@ -19,7 +19,9 @@ /*
  */
+/* eslint-disable @typescript-eslint/unbound-method */
+import { EventEmitter } from '../../common/EventEmitter.js';
 import { assertTruthy } from '../../utils.js';
-export class ThreadXMainAnimationController {
+export class ThreadXMainAnimationController extends EventEmitter {
     node;
     id;
-    stoppedPromise = null;
+    stoppedPromise;
     /**
@@ -29,25 +31,32 @@ * If this is null, then the animation is in a finished / stopped state.
     stoppedResolve = null;
+    state;
     constructor(node, id) {
+        super();
         this.node = node;
         this.id = id;
-        this.onAnimationFinished = this.onAnimationFinished.bind(this);
         this.state = 'stopped';
+        // Initial stopped promise is resolved (since the animation is stopped)
+        this.stoppedPromise = Promise.resolve();
+        // Bind event handlers
+        this.onAnimating = this.onAnimating.bind(this);
+        this.onFinished = this.onFinished.bind(this);
     }
-    state;
     start() {
-        if (this.stoppedResolve === null) {
+        if (this.state !== 'running') {
             this.makeStoppedPromise();
-            this.node.on('animationFinished', this.onAnimationFinished);
+            this.sendStart();
+            this.state = 'running';
         }
-        this.state = 'running';
-        this.node.emit('startAnimation', { id: this.id });
         return this;
     }
     stop() {
-        this.node.emit('stopAnimation', { id: this.id });
-        this.node.off('animationFinished', this.onAnimationFinished);
-        if (this.stoppedResolve !== null) {
-            this.stoppedResolve();
-            this.stoppedResolve = null;
+        if (this.state === 'stopped') {
+            return this;
         }
+        this.sendStop();
+        // if (this.stoppedResolve !== null) {
+        //   this.stoppedResolve();
+        //   this.stoppedResolve = null;
+        //   this.emit('stopped', this);
+        // }
         this.state = 'stopped';
@@ -65,15 +74,18 @@ return this;
     waitUntilStopped() {
-        this.makeStoppedPromise();
-        const promise = this.stoppedPromise;
-        assertTruthy(promise);
-        return promise;
+        return this.stoppedPromise;
     }
-    onAnimationFinished(target, { id, loop }) {
-        if (id === this.id) {
-            this.node.off('animationFinished', this.onAnimationFinished);
-            this.stoppedResolve?.();
-            this.stoppedResolve = null;
-            this.state = 'stopped';
-        }
+    sendStart() {
+        // Hook up event listeners
+        this.node.on('animationFinished', this.onFinished);
+        this.node.on('animationAnimating', this.onAnimating);
+        // Then register the animation
+        this.node.emit('startAnimation', { id: this.id });
     }
+    sendStop() {
+        // First unregister the animation
+        this.node.emit('stopAnimation', { id: this.id });
+        // Then unhook event listeners
+        this.node.off('animationFinished', this.onFinished);
+        this.node.off('animationAnimating', this.onAnimating);
+    }
     makeStoppedPromise() {
@@ -86,3 +98,20 @@ if (this.stoppedResolve === null) {
     }
+    onFinished(target, { id }) {
+        if (id === this.id) {
+            assertTruthy(this.stoppedResolve);
+            this.node.off('animationFinished', this.onFinished);
+            this.node.off('animationAnimating', this.onAnimating);
+            // resolve promise
+            this.stoppedResolve();
+            this.stoppedResolve = null;
+            this.emit('stopped', this);
+            this.state = 'stopped';
+        }
+    }
+    onAnimating(target, { id }) {
+        if (id === this.id) {
+            this.emit('animating', this);
+        }
+    }
 }
 //# sourceMappingURL=ThreadXMainAnimationController.js.map

dist/src/render-drivers/threadx/worker/ThreadXRendererNode.js

@@ -55,2 +55,8 @@ /*
             const animation = new CoreAnimation(this.coreNode, props, settings);
+            animation.on('animating', () => {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                this.emit('animationAnimating', {
+                    id: id,
+                });
+            });
             animation.on('finished', () => {
@@ -57,0 +63,0 @@ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

dist/src/render-drivers/utils.js

@@ -42,3 +42,8 @@ import { CoreExtension } from '../../exports/core-api.js';
 export function santizeCustomDataMap(d) {
-    const validTypes = { boolean: true, string: true, number: true, undefined: true };
+    const validTypes = {
+        boolean: true,
+        string: true,
+        number: true,
+        undefined: true,
+    };
     const keys = Object.keys(d);
@@ -45,0 +50,0 @@ for (let i = 0; i < keys.length; i++) {

dist/src/utils.d.ts

 import type { ContextSpy } from './core/lib/ContextSpy.js';
-export declare function createWebGLContext(canvas: HTMLCanvasElement | OffscreenCanvas, contextSpy: ContextSpy | null): WebGLRenderingContext;
+export declare function createWebGLContext(canvas: HTMLCanvasElement | OffscreenCanvas, forceWebGL2: boolean | undefined, contextSpy: ContextSpy | null): WebGLRenderingContext;
 /**
@@ -4,0 +4,0 @@ * Asserts a condition is truthy, otherwise throws an error

dist/src/utils.js

@@ -19,3 +19,3 @@ /*
  */
-export function createWebGLContext(canvas, contextSpy) {
+export function createWebGLContext(canvas, forceWebGL2 = false, contextSpy) {
     const config = {
@@ -36,3 +36,3 @@ alpha: true,
     // https://github.com/microsoft/TypeScript/issues/53614
-    (canvas.getContext('webgl', config) ||
+    (canvas.getContext(forceWebGL2 ? 'webgl2' : 'webgl', config) ||
         canvas.getContext('experimental-webgl', config));
@@ -39,0 +39,0 @@ if (!gl) {

package.json

 {
   "name": "@lightningjs/renderer",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Lightning 3 Renderer",
@@ -5,0 +5,0 @@ "type": "module",

src/common/IAnimationController.ts

@@ -21,3 +21,7 @@ /*
 
-export type AnimationControllerState = 'running' | 'paused' | 'stopped';
+export type AnimationControllerState =
+  | 'scheduled'
+  | 'running'
+  | 'paused'
+  | 'stopped';
 
@@ -24,0 +28,0 @@ /**

src/core/animations/CoreAnimationController.ts

@@ -56,6 +56,6 @@ /* eslint-disable @typescript-eslint/unbound-method */
   start(): IAnimationController {
-    if (this.state !== 'running') {
+    if (this.state !== 'running' && this.state !== 'scheduled') {
       this.makeStoppedPromise();
       this.registerAnimation();
-      this.state = 'running';
+      this.state = 'scheduled';
     }
@@ -143,4 +143,5 @@ return this;
   private onAnimating(this: CoreAnimationController): void {
+    this.state = 'running';
     this.emit('animating', this);
   }
 }

src/core/CoreNode.ts

@@ -1009,8 +1009,8 @@ /*
       this.setUpdateType(UpdateType.RenderState | UpdateType.Children);
+      this.childUpdateType |= UpdateType.Global;
 
       if (this.clipping === true) {
-        this.setUpdateType(UpdateType.Clipping);
+        this.setUpdateType(UpdateType.Clipping | UpdateType.RenderBounds);
+        this.childUpdateType |= UpdateType.RenderBounds;
       }
-
-      this.childUpdateType |= UpdateType.Global;
     }
@@ -1054,6 +1054,2 @@
 
-    if (this.renderState === CoreNodeRenderState.OutOfBounds) {
-      return;
-    }
-
     if (this.updateType & UpdateType.Clipping) {
@@ -1110,2 +1106,6 @@ this.calculateClippingRect(parentClippingRect);
 
+    if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+      return;
+    }
+
     if (
@@ -1112,0 +1112,0 @@ this.updateType & UpdateType.Children &&

src/core/renderers/CoreRenderer.ts

@@ -73,2 +73,3 @@ /*
   contextSpy: ContextSpy | null;
+  forceWebGL2: boolean;
 }
@@ -75,0 +76,0 @@

src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -124,3 +124,7 @@ /*
 
-    const gl = createWebGLContext(canvas, options.contextSpy);
+    const gl = createWebGLContext(
+      canvas,
+      options.forceWebGL2,
+      options.contextSpy,
+    );
     const glw = (this.glw = new WebGlContextWrapper(gl));
@@ -127,0 +131,0 @@

src/core/renderers/webgl/WebGlCoreShader.ts

@@ -155,12 +155,2 @@ /*
 
-    if (webGl2) {
-      const vao = glw.createVertexArray();
-      if (!vao) {
-        throw new Error();
-      }
-      this.vao = vao;
-
-      glw.bindVertexArray(this.vao);
-    }
-
     this.attributeLocations = {} as Record<string, number>;
@@ -355,3 +345,2 @@ this.attributeBuffers = {} as Record<string, number>;
     this.glw.useProgram(this.program);
-    this.glw.useProgram(this.program);
     if (this.glw.isWebGl2() && this.vao) {
@@ -358,0 +347,0 @@ this.glw.bindVertexArray(this.vao);

src/core/Stage.ts

@@ -63,2 +63,3 @@ /*
   enableContextSpy: boolean;
+  forceWebGL2: boolean;
   numImageWorkers: number;
@@ -132,2 +133,3 @@ renderEngine: typeof WebGlCoreRenderer | typeof CanvasCoreRenderer;
       enableContextSpy,
+      forceWebGL2,
       numImageWorkers,
@@ -165,2 +167,3 @@ textureMemory,
       contextSpy: this.contextSpy,
+      forceWebGL2,
     };
@@ -167,0 +170,0 @@

src/main-api/Inspector.ts

@@ -249,2 +249,14 @@ import {
 
+    node.on('inViewport', () => {
+      div.setAttribute('state', 'inViewport');
+    });
+
+    node.on('inBounds', () => {
+      div.setAttribute('state', 'inBounds');
+    });
+
+    node.on('outOfBounds', () => {
+      div.setAttribute('state', 'outOfBounds');
+    });
+
     return this.createProxy(node, div);
@@ -251,0 +263,0 @@ }

src/main-api/Renderer.ts

@@ -248,2 +248,13 @@ /*
   fontEngines: (typeof SdfTextRenderer | typeof CanvasTextRenderer)[];
+
+  /**
+   * Force WebGL2
+   *
+   * @remarks
+   * Force the renderer to use WebGL2. This can be used to force the renderer to
+   * use WebGL2 even if the browser supports WebGL1.
+   *
+   * @defaultValue `false`
+   */
+  forceWebGL2?: boolean;
 }
@@ -334,2 +345,3 @@
       enableContextSpy: settings.enableContextSpy ?? false,
+      forceWebGL2: settings.forceWebGL2 ?? false,
       inspector: settings.inspector ?? false,
@@ -371,2 +383,3 @@ renderEngine: settings.renderEngine,
       enableContextSpy: this.settings.enableContextSpy,
+      forceWebGL2: this.settings.forceWebGL2,
       fpsUpdateInterval: this.settings.fpsUpdateInterval,
@@ -373,0 +386,0 @@ numImageWorkers: this.settings.numImageWorkers,

src/utils.ts

@@ -24,2 +24,3 @@ /*
   canvas: HTMLCanvasElement | OffscreenCanvas,
+  forceWebGL2 = false,
   contextSpy: ContextSpy | null,
@@ -42,3 +43,3 @@ ): WebGLRenderingContext {
     // https://github.com/microsoft/TypeScript/issues/53614
-    (canvas.getContext('webgl', config) ||
+    (canvas.getContext(forceWebGL2 ? 'webgl2' : 'webgl', config) ||
       canvas.getContext(
@@ -45,0 +46,0 @@ 'experimental-webgl' as 'webgl',

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

3

decreased by-25%

Worsened metrics

Total package byte prevSize

2021460

decreased by-22.81%

Number of package files

488

decreased by-14.08%

Lines of code

44652

decreased by-20.31%

No dependency changes