From 99ee6afde2d266b91ae9f0166a0592bcfec6aead Mon Sep 17 00:00:00 2001 From: Chris Lorenzo Date: Thu, 22 Aug 2024 08:20:32 -0400 Subject: [PATCH 1/2] feat: import inspector so it isn't included by default --- examples/index.ts | 5 ++++- exports/index.ts | 1 + exports/inspector.ts | 20 ++++++++++++++++++++ package.json | 3 ++- src/main-api/Inspector.ts | 4 ++-- src/main-api/Renderer.ts | 20 +++++++++----------- 6 files changed, 38 insertions(+), 15 deletions(-) create mode 100644 exports/inspector.ts diff --git a/examples/index.ts b/examples/index.ts index 9f07dab2..16e1345c 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -32,6 +32,7 @@ import { CanvasTextRenderer, } from '@lightningjs/renderer/canvas'; +import { Inspector } from '@lightningjs/renderer/inspector'; import { assertTruthy } from '@lightningjs/renderer/utils'; import * as mt19937 from '@stdlib/random-base-mt19937'; import type { @@ -223,6 +224,8 @@ async function initRenderer( enableInspector: boolean, customSettings?: Partial, ) { + let inspectorEngine: typeof Inspector | undefined; + if (enableInspector) inspectorEngine = Inspector; const renderer = new RendererMain( { appWidth, @@ -233,7 +236,7 @@ async function initRenderer( clearColor: 0x00000000, fpsUpdateInterval: logFps ? 1000 : 0, enableContextSpy, - enableInspector, + inspectorEngine, renderEngine: renderMode === 'webgl' ? WebGlCoreRenderer : CanvasCoreRenderer, fontEngines: [SdfTextRenderer, CanvasTextRenderer], diff --git a/exports/index.ts b/exports/index.ts index c82c78c2..6afbf27d 100644 --- a/exports/index.ts +++ b/exports/index.ts @@ -66,6 +66,7 @@ export type { } from '../src/core/CoreShaderManager.js'; export type { WebGlCoreRenderer } from '../src/core/renderers/webgl/WebGlCoreRenderer.js'; export type { WebGlCoreCtxTexture } from '../src/core/renderers/webgl/WebGlCoreCtxTexture.js'; +export type { Inspector } from '../src/main-api/Inspector.js'; // Shaders export * from '../src/core/renderers/webgl/WebGlCoreShader.js'; diff --git a/exports/inspector.ts b/exports/inspector.ts new file mode 100644 index 00000000..afa69c4a --- /dev/null +++ b/exports/inspector.ts @@ -0,0 +1,20 @@ +/* + * If not stated otherwise in this file or this component's LICENSE file the + * following copyright and licenses apply: + * + * Copyright 2023 Comcast Cable Communications Management, LLC. + * + * Licensed under the Apache License, Version 2.0 (the License); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { Inspector } from '../src/main-api/Inspector.js'; diff --git a/package.json b/package.json index cd5937ea..8f098cdc 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ ".": "./dist/exports/index.js", "./utils": "./dist/exports/utils.js", "./canvas": "./dist/exports/canvas.js", - "./webgl": "./dist/exports/webgl.js" + "./webgl": "./dist/exports/webgl.js", + "./inspector": "./dist/exports/inspector.js" }, "scripts": { "preinstall": "node scripts/please-use-pnpm.js", diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index f5d6e4a3..550abc85 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -128,7 +128,7 @@ const convertColorToRgba = (color: number) => { }; const domPropertyMap: { [key: string]: string } = { - id: 'id', + id: 'test-id', }; const gradientColorPropertyMap = [ @@ -163,7 +163,7 @@ export class Inspector { ); this.width = Math.ceil( - settings.appWidth ?? 1900 / (settings.deviceLogicalPixelRatio ?? 1), + settings.appWidth ?? 1920 / (settings.deviceLogicalPixelRatio ?? 1), ); this.scaleX = settings.deviceLogicalPixelRatio ?? 1; diff --git a/src/main-api/Renderer.ts b/src/main-api/Renderer.ts index f28d607c..1ba12e09 100644 --- a/src/main-api/Renderer.ts +++ b/src/main-api/Renderer.ts @@ -21,7 +21,6 @@ import type { EffectMap, ShaderMap } from '../core/CoreShaderManager.js'; import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js'; import { EventEmitter } from '../common/EventEmitter.js'; -import { Inspector } from './Inspector.js'; import { assertTruthy, isProductionEnvironment } from '../utils.js'; import { Stage } from '../core/Stage.js'; import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js'; @@ -44,6 +43,7 @@ import type { CanvasTextRenderer } from '../core/text-rendering/renderers/Canvas import type { SdfTextRenderer } from '../core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js'; import type { WebGlCoreRenderer } from '../core/renderers/webgl/WebGlCoreRenderer.js'; import type { CanvasCoreRenderer } from '../core/renderers/canvas/CanvasCoreRenderer.js'; +import type { Inspector } from './Inspector.js'; /** * An immutable reference to a specific Shader type @@ -185,16 +185,14 @@ export interface RendererMainSettings { numImageWorkers?: number; /** - * Enable inspector + * DOM Inspector Engine * * @remarks - * When enabled the renderer will spawn a inspector. The inspector will - * replicate the state of the Nodes created in the renderer and allow - * inspection of the state of the nodes. + * The inspector will replicate the state of the Nodes created + * in the renderer and allow inspection of the state of the nodes. * - * @defaultValue `false` (disabled) */ - enableInspector?: boolean; + inspectorEngine: typeof Inspector | undefined; /** * Renderer Engine @@ -332,7 +330,7 @@ export class RendererMain extends EventEmitter { numImageWorkers: settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2, enableContextSpy: settings.enableContextSpy ?? false, - enableInspector: settings.enableInspector ?? false, + inspectorEngine: settings.inspectorEngine, renderEngine: settings.renderEngine, quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024, fontEngines: settings.fontEngines, @@ -344,7 +342,7 @@ export class RendererMain extends EventEmitter { appHeight, deviceLogicalPixelRatio, devicePhysicalPixelRatio, - enableInspector, + inspectorEngine, } = resolvedSettings; const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio; @@ -397,8 +395,8 @@ export class RendererMain extends EventEmitter { targetEl.appendChild(canvas); // Initialize inspector (if enabled) - if (enableInspector && !isProductionEnvironment()) { - this.inspector = new Inspector(canvas, resolvedSettings); + if (inspectorEngine && !isProductionEnvironment()) { + this.inspector = new inspectorEngine(canvas, resolvedSettings); } } From db0477cc8e15ed4b85f798de4ff6ba40f8812c86 Mon Sep 17 00:00:00 2001 From: Chris Lorenzo Date: Thu, 22 Aug 2024 08:26:31 -0400 Subject: [PATCH 2/2] rename inspectorEngine to just inspector --- examples/index.ts | 6 +++--- src/main-api/Renderer.ts | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/index.ts b/examples/index.ts index 16e1345c..25a60b54 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -224,8 +224,8 @@ async function initRenderer( enableInspector: boolean, customSettings?: Partial, ) { - let inspectorEngine: typeof Inspector | undefined; - if (enableInspector) inspectorEngine = Inspector; + let inspector: typeof Inspector | undefined; + if (enableInspector) inspector = Inspector; const renderer = new RendererMain( { appWidth, @@ -236,7 +236,7 @@ async function initRenderer( clearColor: 0x00000000, fpsUpdateInterval: logFps ? 1000 : 0, enableContextSpy, - inspectorEngine, + inspector, renderEngine: renderMode === 'webgl' ? WebGlCoreRenderer : CanvasCoreRenderer, fontEngines: [SdfTextRenderer, CanvasTextRenderer], diff --git a/src/main-api/Renderer.ts b/src/main-api/Renderer.ts index 1ba12e09..d3e9139e 100644 --- a/src/main-api/Renderer.ts +++ b/src/main-api/Renderer.ts @@ -185,14 +185,14 @@ export interface RendererMainSettings { numImageWorkers?: number; /** - * DOM Inspector Engine + * DOM Inspector * * @remarks * The inspector will replicate the state of the Nodes created * in the renderer and allow inspection of the state of the nodes. * */ - inspectorEngine: typeof Inspector | undefined; + inspector: typeof Inspector | undefined; /** * Renderer Engine @@ -330,7 +330,7 @@ export class RendererMain extends EventEmitter { numImageWorkers: settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2, enableContextSpy: settings.enableContextSpy ?? false, - inspectorEngine: settings.inspectorEngine, + inspector: settings.inspector, renderEngine: settings.renderEngine, quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024, fontEngines: settings.fontEngines, @@ -342,7 +342,7 @@ export class RendererMain extends EventEmitter { appHeight, deviceLogicalPixelRatio, devicePhysicalPixelRatio, - inspectorEngine, + inspector, } = resolvedSettings; const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio; @@ -395,8 +395,8 @@ export class RendererMain extends EventEmitter { targetEl.appendChild(canvas); // Initialize inspector (if enabled) - if (inspectorEngine && !isProductionEnvironment()) { - this.inspector = new inspectorEngine(canvas, resolvedSettings); + if (inspector && !isProductionEnvironment()) { + this.inspector = new inspector(canvas, resolvedSettings); } }