From 2bc177ae4ce7fbc613488269d39dfb7d0773f7a5 Mon Sep 17 00:00:00 2001 From: wouterlucas Date: Tue, 12 Aug 2025 11:27:31 +0200 Subject: [PATCH 1/9] feat: reinstate w/h shorthand properties --- examples/tests/width-height-shortcuts.ts | 134 +++++++++++++++++++++++ src/core/CoreNode.ts | 54 +++++++++ src/core/Stage.ts | 7 +- 3 files changed, 193 insertions(+), 2 deletions(-) create mode 100644 examples/tests/width-height-shortcuts.ts diff --git a/examples/tests/width-height-shortcuts.ts b/examples/tests/width-height-shortcuts.ts new file mode 100644 index 00000000..b610318e --- /dev/null +++ b/examples/tests/width-height-shortcuts.ts @@ -0,0 +1,134 @@ +/* + * If not stated otherwise in this file or this component's LICENSE file the + * following copyright and licenses apply: + * + * Copyright 2025 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. + */ + +import type { ExampleSettings } from '../common/ExampleSettings.js'; + +export async function automation(settings: ExampleSettings) { + await test(settings); + await settings.snapshot(); +} + +/** + * Tests that w/h shorthand properties work identically to width/height + * on CoreNodes + * + * @param settings + * @returns + */ +export default async function test(settings: ExampleSettings) { + const { renderer, testRoot } = settings; + + // Set test area + testRoot.width = 600; + testRoot.height = 270; + testRoot.color = 0x222222ff; + + // Create header text + renderer.createTextNode({ + x: 20, + y: 20, + color: 0xffffffff, + fontFamily: 'Ubuntu', + fontSize: 24, + text: 'Width/Height vs W/H Shorthand Test (CoreNodes)', + parent: testRoot, + }); + + // Test CoreNodes - using width/height + const nodeWithLongProps = renderer.createNode({ + x: 50, + y: 80, + width: 120, + height: 80, + color: 0xff0000ff, + parent: testRoot, + }); + + // Test CoreNodes - using w/h shorthand + renderer.createNode({ + x: 200, + y: 80, + w: 120, + h: 80, + color: 0x00ff00ff, + parent: testRoot, + }); + + // Additional test with different sizes + renderer.createNode({ + x: 350, + y: 80, + width: 80, + height: 120, + color: 0x0080ffff, + parent: testRoot, + }); + + renderer.createNode({ + x: 450, + y: 80, + w: 80, + h: 120, + color: 0xff8000ff, + parent: testRoot, + }); + + // Label for CoreNodes + renderer.createTextNode({ + x: 50, + y: 170, + color: 0xffffffff, + fontFamily: 'Ubuntu', + fontSize: 14, + text: 'width: 120\nheight: 80', + parent: testRoot, + }); + + renderer.createTextNode({ + x: 200, + y: 170, + color: 0xffffffff, + fontFamily: 'Ubuntu', + fontSize: 14, + text: 'w: 120\nh: 80', + parent: testRoot, + }); + + renderer.createTextNode({ + x: 350, + y: 210, + color: 0xffffffff, + fontFamily: 'Ubuntu', + fontSize: 14, + text: 'width: 80\nheight: 120', + parent: testRoot, + }); + + renderer.createTextNode({ + x: 450, + y: 210, + color: 0xffffffff, + fontFamily: 'Ubuntu', + fontSize: 14, + text: 'w: 80\nh: 120', + parent: testRoot, + }); + + return Promise.resolve(); +} diff --git a/src/core/CoreNode.ts b/src/core/CoreNode.ts index cd7a0f2b..8587b4d5 100644 --- a/src/core/CoreNode.ts +++ b/src/core/CoreNode.ts @@ -231,16 +231,26 @@ export interface CoreNodeProps { y: number; /** * The width of the Node. + * @warning This will be deprecated in favor of `w` and `h` properties in the future. * * @default `0` */ width: number; /** * The height of the Node. + * @warning This will be deprecated in favor of `w` and `h` properties in the future. * * @default `0` */ height: number; + /** + * Short width of the Node. + */ + w?: number; + /** + * Short height of the Node. + */ + h?: number; /** * The alpha opacity of the Node. * @@ -1797,6 +1807,28 @@ export class CoreNode extends EventEmitter { } } + get w(): number { + return this.props.width; + } + + set w(value: number) { + if (this.props.width !== value) { + this.textureCoords = undefined; + this.props.width = value; + this.setUpdateType(UpdateType.Local); + + if (this.props.rtt === true) { + this.framebufferDimensions!.width = value; + this.texture = this.stage.txManager.createTexture( + 'RenderTexture', + this.framebufferDimensions!, + ); + + this.setUpdateType(UpdateType.RenderTexture); + } + } + } + get width(): number { return this.props.width; } @@ -1819,6 +1851,28 @@ export class CoreNode extends EventEmitter { } } + get h(): number { + return this.props.height; + } + + set h(value: number) { + if (this.props.height !== value) { + this.textureCoords = undefined; + this.props.height = value; + this.setUpdateType(UpdateType.Local); + + if (this.props.rtt === true) { + this.framebufferDimensions!.height = value; + this.texture = this.stage.txManager.createTexture( + 'RenderTexture', + this.framebufferDimensions!, + ); + + this.setUpdateType(UpdateType.RenderTexture); + } + } + } + get height(): number { return this.props.height; } diff --git a/src/core/Stage.ts b/src/core/Stage.ts index 1275c499..58e11300 100644 --- a/src/core/Stage.ts +++ b/src/core/Stage.ts @@ -800,6 +800,9 @@ export class Stage { const mount = props.mount ?? 0; const pivot = props.pivot ?? 0.5; + const width = props.w ?? props.width ?? 0; + const height = props.h ?? props.height ?? 0; + const data = this.options.inspector ? santizeCustomDataMap(props.data ?? {}) : {}; @@ -807,8 +810,8 @@ export class Stage { return { x: props.x ?? 0, y: props.y ?? 0, - width: props.width ?? 0, - height: props.height ?? 0, + width, + height, alpha: props.alpha ?? 1, autosize: props.autosize ?? false, boundsMargin: props.boundsMargin ?? null, From 6e7dbbd594f87d210f64b880f78750a4c968ddfa Mon Sep 17 00:00:00 2001 From: wouterlucas Date: Tue, 12 Aug 2025 11:37:16 +0200 Subject: [PATCH 2/9] chore: add certified snapshot for width-height shortcuts --- .../chromium-ci/width-height-shortcuts-1.png | Bin 0 -> 11211 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 visual-regression/certified-snapshots/chromium-ci/width-height-shortcuts-1.png diff --git a/visual-regression/certified-snapshots/chromium-ci/width-height-shortcuts-1.png b/visual-regression/certified-snapshots/chromium-ci/width-height-shortcuts-1.png new file mode 100644 index 0000000000000000000000000000000000000000..8cc64d01d4d61100c460962608af789da97266d8 GIT binary patch literal 11211 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 E0WyKqV*mgE literal 0 HcmV?d00001 From 6d1d53011a5cd7e6580c5765d793783a7cbe2f23 Mon Sep 17 00:00:00 2001 From: wouterlucas Date: Tue, 12 Aug 2025 21:13:31 +0200 Subject: [PATCH 3/9] refactor: width/height -> w/h --- .../src/MyCustomShader.ts | 4 +- .../src/MyCustomTexture.ts | 8 +- .../custom-shader-effect-texture/src/index.ts | 12 +- examples/common/Character.ts | 4 +- examples/common/Component.ts | 16 +- examples/common/ExampleSettings.ts | 4 +- examples/common/MemMonitor.ts | 52 +++-- examples/common/PageContainer.ts | 18 +- examples/common/constructTestRow.ts | 6 +- examples/common/paginateTestRows.ts | 20 +- examples/common/utils.ts | 6 +- examples/index.ts | 20 +- examples/tests/absolute-position.ts | 48 ++--- examples/tests/alignment.ts | 16 +- examples/tests/alpha-blending.ts | 58 +++--- examples/tests/alpha.ts | 8 +- examples/tests/animation-events.ts | 12 +- examples/tests/animation.ts | 10 +- examples/tests/child-positioning.ts | 12 +- examples/tests/clear-color-setting.ts | 8 +- examples/tests/clipping-mutations.ts | 22 +- examples/tests/clipping.ts | 194 +++++++++--------- examples/tests/default-fps-animation.ts | 16 +- examples/tests/destroy.ts | 12 +- examples/tests/detect-touch.ts | 8 +- examples/tests/gradient.ts | 4 +- examples/tests/inspector.ts | 30 +-- examples/tests/mount-pivot.ts | 24 +-- examples/tests/no-rtt.ts | 16 +- examples/tests/quads-rendered.ts | 12 +- examples/tests/render-bounds.ts | 20 +- examples/tests/render-settings.ts | 41 ++-- examples/tests/resize-mode.ts | 88 ++++---- examples/tests/robot.ts | 46 ++--- examples/tests/rotation.ts | 16 +- examples/tests/rtt-dimension.ts | 60 +++--- examples/tests/rtt-nested-clipping.ts | 16 +- examples/tests/rtt-reflection.ts | 16 +- examples/tests/rtt-spritemap.ts | 16 +- examples/tests/rtt.ts | 16 +- examples/tests/scaling-animations.ts | 16 +- examples/tests/scaling.ts | 40 ++-- examples/tests/shader-animation.ts | 4 +- examples/tests/shader-border.ts | 56 ++--- examples/tests/shader-hole-punch.ts | 28 +-- examples/tests/shader-linear-gradient.ts | 16 +- examples/tests/shader-radial-gradient.ts | 32 +-- examples/tests/shader-rounded.ts | 56 ++--- examples/tests/shader-shadow.ts | 16 +- examples/tests/stress-images.ts | 8 +- examples/tests/stress-mix.ts | 8 +- examples/tests/stress-multi-level-bounds.ts | 8 +- examples/tests/stress-multi-level-clipping.ts | 12 +- examples/tests/stress-multi-level.ts | 8 +- examples/tests/stress-multi-texture.ts | 12 +- examples/tests/stress-single-level-text.ts | 8 +- examples/tests/stress-single-level.ts | 8 +- examples/tests/stress-textures.ts | 8 +- examples/tests/test.ts | 84 ++++---- examples/tests/text-align.ts | 12 +- examples/tests/text-alpha.ts | 8 +- examples/tests/text-baseline.ts | 8 +- examples/tests/text-canvas-font-no-metrics.ts | 10 +- examples/tests/text-canvas.ts | 4 +- examples/tests/text-contain.ts | 68 +++--- examples/tests/text-dimensions.ts | 24 +-- examples/tests/text-events.ts | 17 +- ...ext-layout-consistency-modified-metrics.ts | 16 +- examples/tests/text-layout-consistency.ts | 22 +- examples/tests/text-line-height.ts | 6 +- examples/tests/text-max-lines.ts | 4 +- examples/tests/text-mixed.ts | 4 +- examples/tests/text-offscreen-move.ts | 4 +- examples/tests/text-overflow-suffix.ts | 4 +- examples/tests/text-rotation.ts | 4 +- examples/tests/text-scaling.ts | 42 ++-- examples/tests/text-ssdf.ts | 4 +- examples/tests/text-vertical-align.ts | 16 +- examples/tests/text-wordbreak.ts | 4 +- examples/tests/text-zwsp.ts | 12 +- examples/tests/text.ts | 43 ++-- examples/tests/texture-alpha-switching.ts | 12 +- examples/tests/texture-autosize.ts | 15 +- examples/tests/texture-base64.ts | 4 +- examples/tests/texture-cleanup-critical.ts | 8 +- examples/tests/texture-cleanup-idle.ts | 8 +- examples/tests/texture-factory.ts | 8 +- examples/tests/texture-memory-allocation.ts | 26 +-- examples/tests/texture-memory-rtt.ts | 36 ++-- examples/tests/texture-memory-spritemap.ts | 32 +-- examples/tests/texture-reload.ts | 48 ++--- examples/tests/texture-source.ts | 14 +- examples/tests/texture-spritemap.ts | 8 +- examples/tests/texture-svg.ts | 20 +- examples/tests/textures.ts | 28 +-- examples/tests/tx-compression.ts | 8 +- examples/tests/viewport-boundsmargin.ts | 12 +- examples/tests/viewport-events-canvas.ts | 16 +- examples/tests/viewport-events.ts | 39 ++-- examples/tests/viewport-largebound.ts | 9 +- examples/tests/viewport-memory.ts | 24 +-- examples/tests/viewport-strictbounds.ts | 8 +- examples/tests/width-height-shortcuts.ts | 16 +- examples/tests/zIndex.ts | 52 ++--- src/common/CommonTypes.ts | 4 +- src/core/CoreNode.test.ts | 24 +-- src/core/CoreNode.ts | 186 ++++++----------- src/core/CoreTextNode.ts | 18 +- src/core/Stage.ts | 11 +- src/core/lib/textureCompression.ts | 8 +- src/core/renderers/CoreShaderNode.ts | 4 +- src/core/renderers/canvas/CanvasRenderer.ts | 4 +- src/core/renderers/canvas/CanvasTexture.ts | 10 +- .../renderers/webgl/WebGlCtxRenderTexture.ts | 20 +- .../renderers/webgl/WebGlCtxSubTexture.ts | 55 ++++- src/core/renderers/webgl/WebGlCtxTexture.ts | 47 ++--- src/core/renderers/webgl/WebGlRenderOp.ts | 2 +- src/core/renderers/webgl/WebGlRenderer.ts | 25 ++- .../renderers/webgl/WebGlShaderProgram.ts | 4 +- src/core/shaders/canvas/Border.ts | 8 +- src/core/shaders/canvas/HolePunch.ts | 15 +- src/core/shaders/canvas/LinearGradient.ts | 4 +- src/core/shaders/canvas/RadialGradient.ts | 8 +- src/core/shaders/canvas/Rounded.ts | 4 +- src/core/shaders/canvas/RoundedWithBorder.ts | 4 +- .../canvas/RoundedWithBorderAndShadow.ts | 4 +- src/core/shaders/canvas/RoundedWithShadow.ts | 4 +- src/core/shaders/templates/BorderTemplate.ts | 22 +- .../shaders/templates/HolePunchTemplate.ts | 8 +- .../templates/RadialGradientTemplate.ts | 8 +- src/core/shaders/webgl/Border.ts | 2 +- src/core/shaders/webgl/HolePunch.ts | 4 +- src/core/shaders/webgl/RadialGradient.ts | 6 +- src/core/shaders/webgl/Rounded.ts | 6 +- src/core/shaders/webgl/RoundedWithBorder.ts | 6 +- .../webgl/RoundedWithBorderAndShadow.ts | 2 +- src/core/shaders/webgl/RoundedWithShadow.ts | 6 +- src/core/textures/ColorTexture.ts | 2 +- src/core/textures/ImageTexture.ts | 30 +-- src/core/textures/NoiseTexture.ts | 16 +- src/core/textures/RenderTexture.ts | 24 +-- src/core/textures/SubTexture.ts | 20 +- src/core/textures/Texture.ts | 14 +- src/main-api/Inspector.ts | 16 +- src/main-api/Renderer.ts | 4 +- 145 files changed, 1413 insertions(+), 1486 deletions(-) diff --git a/docs/example-projects/custom-shader-effect-texture/src/MyCustomShader.ts b/docs/example-projects/custom-shader-effect-texture/src/MyCustomShader.ts index 22131497..2f821e06 100644 --- a/docs/example-projects/custom-shader-effect-texture/src/MyCustomShader.ts +++ b/docs/example-projects/custom-shader-effect-texture/src/MyCustomShader.ts @@ -79,8 +79,8 @@ export const MyCustomShader: WebGlShaderType = { }, update(node) { const props = this.props!; - const width = props.normalized ? 1 : node.width; - const height = props.normalized ? 1 : node.height; + const width = props.normalized ? 1 : node.w; + const height = props.normalized ? 1 : node.h; const topLeft = [ (props.topLeft?.x || 0) / width, diff --git a/docs/example-projects/custom-shader-effect-texture/src/MyCustomTexture.ts b/docs/example-projects/custom-shader-effect-texture/src/MyCustomTexture.ts index df661bf3..8109c5c1 100644 --- a/docs/example-projects/custom-shader-effect-texture/src/MyCustomTexture.ts +++ b/docs/example-projects/custom-shader-effect-texture/src/MyCustomTexture.ts @@ -15,8 +15,8 @@ declare module '@lightningjs/renderer' { export interface MyCustomTextureProps { percent?: number; - width: number; - height: number; + w: number; + h: number; } export class MyCustomTexture extends Texture { @@ -71,8 +71,8 @@ export class MyCustomTexture extends Texture { ): Required { return { percent: props.percent ?? 20, - width: props.width, - height: props.height, + w: props.width, + h: props.height, }; } } diff --git a/docs/example-projects/custom-shader-effect-texture/src/index.ts b/docs/example-projects/custom-shader-effect-texture/src/index.ts index 4b988886..7484a2db 100644 --- a/docs/example-projects/custom-shader-effect-texture/src/index.ts +++ b/docs/example-projects/custom-shader-effect-texture/src/index.ts @@ -32,8 +32,8 @@ import robotImg from './assets/robot.png'; ); const distortedBot = renderer.createNode({ - width: 300, - height: 300, + w: 300, + h: 300, src: robotImg, parent: renderer.root, shader: renderer.createShader('MyCustomShader', { @@ -47,12 +47,12 @@ import robotImg from './assets/robot.png'; const pacman = renderer.createNode({ x: 600, - width: 300, - height: 300, + w: 300, + h: 300, texture: renderer.createTexture('MyCustomTexture', { percent: 5, - width: 300, - height: 300, + w: 300, + h: 300, }), parent: renderer.root, }); diff --git a/examples/common/Character.ts b/examples/common/Character.ts index ee35dce6..74f3461c 100644 --- a/examples/common/Character.ts +++ b/examples/common/Character.ts @@ -39,8 +39,8 @@ export class Character { this.node = renderer.createNode({ x: props.x, y: props.y, - width: 200 / 2, - height: 300 / 2, + w: 200 / 2, + h: 300 / 2, texture: rightFrames[0], parent: renderer.root, zIndex: props.zIndex, diff --git a/examples/common/Component.ts b/examples/common/Component.ts index 3990dcca..f6c32d75 100644 --- a/examples/common/Component.ts +++ b/examples/common/Component.ts @@ -44,19 +44,19 @@ export class Component { this.node.y = y; } - get width() { - return this.node.width; + get w() { + return this.node.w; } - set width(width: number) { - this.node.width = width; + set w(w: number) { + this.node.w = w; } - get height() { - return this.node.height; + get h() { + return this.node.h; } - set height(height: number) { - this.node.height = height; + set h(h: number) { + this.node.h = h; } } diff --git a/examples/common/ExampleSettings.ts b/examples/common/ExampleSettings.ts index a2ef140c..ecba6e40 100644 --- a/examples/common/ExampleSettings.ts +++ b/examples/common/ExampleSettings.ts @@ -38,8 +38,8 @@ export interface SnapshotOptions { clip?: { x: number; y: number; - width: number; - height: number; + w: number; + h: number; }; } diff --git a/examples/common/MemMonitor.ts b/examples/common/MemMonitor.ts index 496d7738..4629efdb 100644 --- a/examples/common/MemMonitor.ts +++ b/examples/common/MemMonitor.ts @@ -63,14 +63,14 @@ export class MemMonitor extends Component { this.interval = props.interval || 500; this.node.color = 0xffffffaa; - this.node.width = 400; - this.node.height = BAR_HEIGHT + MARGIN * 2; + this.node.w = 400; + this.node.h = BAR_HEIGHT + MARGIN * 2; this.bar = renderer.createNode({ - x: this.node.width - BAR_WIDTH - MARGIN, + x: this.node.w - BAR_WIDTH - MARGIN, y: MARGIN, - width: BAR_WIDTH, - height: BAR_HEIGHT, + w: BAR_WIDTH, + h: BAR_HEIGHT, parent: this.node, color: 0x00000000, }); @@ -78,8 +78,8 @@ export class MemMonitor extends Component { this.baseMemBar = renderer.createNode({ x: 0, y: 0, - width: BAR_WIDTH, - height: 0, + w: BAR_WIDTH, + h: 0, parent: this.bar, color: 0x808080ff, }); @@ -87,8 +87,8 @@ export class MemMonitor extends Component { this.memUsedBar = renderer.createNode({ x: 0, y: 0, - width: BAR_WIDTH, - height: 0, + w: BAR_WIDTH, + h: 0, parent: this.bar, color: 0x0000ffff, }); @@ -96,19 +96,19 @@ export class MemMonitor extends Component { this.renderableMemBar = renderer.createNode({ x: 0, y: 0, - width: BAR_WIDTH, - height: 0, + w: BAR_WIDTH, + h: 0, parent: this.bar, color: 0xff00ffff, }); // Bar Frame renderer.createNode({ - width: BAR_WIDTH, - height: BAR_HEIGHT, + w: BAR_WIDTH, + h: BAR_HEIGHT, color: 0x00000000, shader: renderer.createShader('Border', { - width: 4, + w: 4, color: 0x000000cc, }), parent: this.bar, @@ -129,8 +129,8 @@ export class MemMonitor extends Component { this.criticalTick = renderer.createNode({ x: BAR_WIDTH / 2, y: 0, - width: BAR_WIDTH * 2, - height: 2, + w: BAR_WIDTH * 2, + h: 2, parent: this.bar, color: 0xff0000ff, mount: 0.5, @@ -151,16 +151,15 @@ export class MemMonitor extends Component { this.targetTick = renderer.createNode({ x: BAR_WIDTH / 2, y: 0, - width: BAR_WIDTH * 2, - height: 2, + w: BAR_WIDTH * 2, + h: 2, parent: this.bar, color: 0x000000ff, mount: 0.5, }); const numLines = 11; - const infoTextY = - this.node.height - MARGIN - INFO_TEXT_LINEHEIGHT * numLines; + const infoTextY = this.node.h - MARGIN - INFO_TEXT_LINEHEIGHT * numLines; this.criticalInfoText = renderer.createTextNode({ x: MARGIN, @@ -259,14 +258,13 @@ export class MemMonitor extends Component { 0, ); - this.baseMemBar.height = BAR_HEIGHT * baseUsedFraction; - this.baseMemBar.y = BAR_HEIGHT - this.baseMemBar.height; - this.memUsedBar.height = BAR_HEIGHT * memUsedFraction; - this.memUsedBar.y = - BAR_HEIGHT - this.memUsedBar.height - this.baseMemBar.height; - this.renderableMemBar.height = BAR_HEIGHT * renderableMemoryFraction; + this.baseMemBar.h = BAR_HEIGHT * baseUsedFraction; + this.baseMemBar.y = BAR_HEIGHT - this.baseMemBar.h; + this.memUsedBar.h = BAR_HEIGHT * memUsedFraction; + this.memUsedBar.y = BAR_HEIGHT - this.memUsedBar.h - this.baseMemBar.h; + this.renderableMemBar.h = BAR_HEIGHT * renderableMemoryFraction; this.renderableMemBar.y = - BAR_HEIGHT - this.renderableMemBar.height - this.baseMemBar.height; + BAR_HEIGHT - this.renderableMemBar.h - this.baseMemBar.h; this.memUsedText.text = ` Memory Used diff --git a/examples/common/PageContainer.ts b/examples/common/PageContainer.ts index 2165d6a2..6d392c7e 100644 --- a/examples/common/PageContainer.ts +++ b/examples/common/PageContainer.ts @@ -32,8 +32,8 @@ const PADDING = 20; interface PageContainerProps { x?: number; y?: number; - width?: number; - height?: number; + w?: number; + h?: number; parent?: INode | null; color?: number; @@ -55,8 +55,8 @@ export class PageContainer extends Component { x: props.x, y: props.y, color: props.color ?? 0x00000000, - width: props.width, - height: props.height, + w: props.w, + h: props.h, parent: props.parent ? props.parent : settings.testRoot, }); @@ -75,7 +75,7 @@ export class PageContainer extends Component { fontFamily: 'Ubuntu', fontSize: 30, x: PADDING, - y: this.node.height - 30 - PADDING, + y: this.node.h - 30 - PADDING, parent: this.node, }); } @@ -120,8 +120,8 @@ export class PageContainer extends Component { x: PADDING, y: TITLE_FONT_SIZE + PADDING, color: 0x00000000, - width: this.contentWidth, - height: this.contentHeight, + w: this.contentWidth, + h: this.contentHeight, parent: this.node, }); @@ -172,11 +172,11 @@ export class PageContainer extends Component { } get contentHeight() { - return this.node.height - TITLE_FONT_SIZE - PADDING * 2; + return this.node.h - TITLE_FONT_SIZE - PADDING * 2; } get contentWidth() { - return this.node.width - PADDING * 2; + return this.node.w - PADDING * 2; } get padding() { diff --git a/examples/common/constructTestRow.ts b/examples/common/constructTestRow.ts index 196f7255..489922f2 100644 --- a/examples/common/constructTestRow.ts +++ b/examples/common/constructTestRow.ts @@ -65,13 +65,13 @@ export async function constructTestRow( parent: rowNode, }), ); - curX += descriptionPosition ? 0 : dimensions.width + padding; + curX += descriptionPosition ? 0 : dimensions.w + padding; } else { const container = renderer.createNode({ parent: rowNode, color: 0xffffffff, - width: containerSize, - height: containerHeight, + w: containerSize, + h: containerHeight, clipping: true, x: curX, y: curY, diff --git a/examples/common/paginateTestRows.ts b/examples/common/paginateTestRows.ts index 396fe57b..d236eed7 100644 --- a/examples/common/paginateTestRows.ts +++ b/examples/common/paginateTestRows.ts @@ -43,7 +43,7 @@ function createPageConstructor(curPageRowConstructors: RowConstructor[]) { for (const rowConstructor of rowConstructors) { const rowNode = await rowConstructor(pageNode); rowNode.y = curY; - curY += rowNode.height; + curY += rowNode.h; } }.bind(null, curPageRowConstructors); } @@ -75,8 +75,8 @@ export async function paginateTestRows( const rowContainer = renderer.createNode({ x: 0, y: pageCurY, - width: pageContainer.contentWidth, - height: 0, + w: pageContainer.contentWidth, + h: 0, color: 0x00000000, parent: pageNode, }); @@ -89,15 +89,15 @@ export async function paginateTestRows( }); const rowNode = renderer.createNode({ y: HEADER_FONT_SIZE + PADDING * 2, - width: pageContainer.contentWidth, - height: 0, + w: pageContainer.contentWidth, + h: 0, color: 0x00000000, parent: rowContainer, }); const rowHeight = await testRow.content(rowNode); - rowNode.height = rowHeight; + rowNode.h = rowHeight; rowHeaderNode.text = testRow.title; - rowContainer.height = HEADER_FONT_SIZE + PADDING * 2 + rowNode.height; + rowContainer.h = HEADER_FONT_SIZE + PADDING * 2 + rowNode.h; return rowContainer; }); @@ -109,10 +109,10 @@ export async function paginateTestRows( tmpRowContainer = await newRowConstructor(renderer.root); // curPageRowConstructors.push(newRowConstructor); // If it fits, add it to the current page - itFits = pageCurY + tmpRowContainer.height <= pageContainer.contentHeight; + itFits = pageCurY + tmpRowContainer.h <= pageContainer.contentHeight; if (itFits) { curPageRowConstructors.push(newRowConstructor); - pageCurY += tmpRowContainer.height; + pageCurY += tmpRowContainer.h; newRowConstructor = null; } } @@ -122,7 +122,7 @@ export async function paginateTestRows( const pageConstructor = createPageConstructor(curPageRowConstructors); pageContainer.pushPage(pageConstructor); - pageCurY = tmpRowContainer?.height || 0; + pageCurY = tmpRowContainer?.h || 0; curPageRowConstructors = []; if (newRowConstructor) { curPageRowConstructors.push(newRowConstructor); diff --git a/examples/common/utils.ts b/examples/common/utils.ts index 1586674f..d77b6edb 100644 --- a/examples/common/utils.ts +++ b/examples/common/utils.ts @@ -29,10 +29,10 @@ export async function waitForLoadedDimensions( ): Promise { return new Promise((resolve) => { node.once('loaded', (_node: INode, payload: NodeTextLoadedPayload) => { - const { width, height } = payload.dimensions; + const { w, h } = payload.dimensions; resolve({ - width, - height, + w, + h, }); }); }); diff --git a/examples/index.ts b/examples/index.ts index ca627640..3e047ae3 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -185,8 +185,8 @@ async function runTest( return; } - overlayText.x = renderer.settings.appWidth - dimensions.width - 20; - overlayText.y = renderer.settings.appHeight - dimensions.height - 20; + overlayText.x = renderer.settings.appWidth - dimensions.w - 20; + overlayText.y = renderer.settings.appHeight - dimensions.h - 20; }, ); } @@ -209,8 +209,8 @@ async function runTest( parent: renderer.root, x: renderer.root.x, y: renderer.root.y, - width: renderer.settings.appWidth, - height: renderer.settings.appHeight - 100, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight - 100, color: 0x00000000, }); } @@ -404,8 +404,8 @@ async function runAutomation( parent: renderer.root, x: renderer.root.x, y: renderer.root.y, - width: renderer.root.width, - height: renderer.root.height, + w: renderer.root.w, + h: renderer.root.h, color: 0x00000000, }); const exampleSettings: ExampleSettings = { @@ -423,8 +423,8 @@ async function runAutomation( const clipRect = options?.clip || { x: testRoot.x, y: testRoot.y, - width: testRoot.width, - height: testRoot.height, + w: testRoot.w, + h: testRoot.h, }; const adjustedOptions = { @@ -432,8 +432,8 @@ async function runAutomation( clip: { x: Math.round(clipRect.x * logicalPixelRatio), y: Math.round(clipRect.y * logicalPixelRatio), - width: Math.round(clipRect.width * logicalPixelRatio), - height: Math.round(clipRect.height * logicalPixelRatio), + w: Math.round(clipRect.w * logicalPixelRatio), + h: Math.round(clipRect.h * logicalPixelRatio), }, }; diff --git a/examples/tests/absolute-position.ts b/examples/tests/absolute-position.ts index baf36788..ac6fe011 100644 --- a/examples/tests/absolute-position.ts +++ b/examples/tests/absolute-position.ts @@ -17,22 +17,22 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { } /* Create a grid to show the values */ - for (let index = 1; index <= Math.ceil(testRoot.width / 100); index++) { + for (let index = 1; index <= Math.ceil(testRoot.w / 100); index++) { renderer.createNode({ x: index * 100, y: 0, - width: 2, - height: testRoot.height, + w: 2, + h: testRoot.h, color: index % 5 ? 0xffffff40 : 0xffffffa0, parent: testRoot, }); } - for (let index = 1; index <= Math.ceil(testRoot.height / 100); index++) { + for (let index = 1; index <= Math.ceil(testRoot.h / 100); index++) { renderer.createNode({ x: 0, y: index * 100, - width: testRoot.width, - height: 2, + w: testRoot.w, + h: 2, color: index % 5 ? 0xffffff40 : 0xffffffa0, parent: testRoot, }); @@ -41,8 +41,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const defaultRect = renderer.createNode({ x: 100, y: 100, - width: 200, - height: 200, + w: 200, + h: 200, mountX: 0, color: 0x00ff00ff, parent: testRoot, @@ -52,8 +52,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const mount1Rect = renderer.createNode({ x: 600, y: 200, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, mount: 1, parent: testRoot, @@ -63,8 +63,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const scaleRect = renderer.createNode({ x: 700, y: 100, - width: 200, - height: 200, + w: 200, + h: 200, scale: 1.2, color: 0xff0000ff, parent: testRoot, @@ -74,8 +74,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const rotationPivot0Rect = renderer.createNode({ x: 1100, y: 100, - width: 200, - height: 200, + w: 200, + h: 200, rotation: Math.PI / 6, pivot: 0, color: 0xff0000ff, @@ -86,8 +86,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const rotationPivot1Rect = renderer.createNode({ x: 1300, y: 100, - width: 200, - height: 200, + w: 200, + h: 200, rotation: Math.PI / 6, pivot: 1, color: 0xff0000ff, @@ -98,8 +98,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const mountX1Rect = renderer.createNode({ x: 300, y: 500, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, mountX: 1, mountY: 0, @@ -110,8 +110,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const mountY1Rect = renderer.createNode({ x: 400, y: 600, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, mountX: 0, mountY: 1, @@ -122,8 +122,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const mountThirdRect = renderer.createNode({ x: 700, y: 600, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, mountX: 0.33, mountY: 0.66, @@ -134,8 +134,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const mountScaleRect = renderer.createNode({ x: 1200, y: 600, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, mountX: 1, mountY: 0.5, diff --git a/examples/tests/alignment.ts b/examples/tests/alignment.ts index e8bb6faa..abf3ca38 100644 --- a/examples/tests/alignment.ts +++ b/examples/tests/alignment.ts @@ -29,8 +29,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -38,8 +38,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const holderNode = renderer.createNode({ x: 1920 / 2 - 100, y: 1080 / 3 - 100, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xffffffff, parent: node, }); @@ -56,8 +56,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const alignedNodeProps = { x: 0, y: 0, - width: 50, - height: 50, + w: 50, + h: 50, color: 0xffa500ff, parent: holderNode, }; @@ -100,8 +100,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const holderNodeTwo = renderer.createNode({ x: 0, y: 0, - width: 200, - height: 200, + w: 200, + h: 200, parent: emptyHolderNode, }); diff --git a/examples/tests/alpha-blending.ts b/examples/tests/alpha-blending.ts index 2a9740cc..fb966fbc 100644 --- a/examples/tests/alpha-blending.ts +++ b/examples/tests/alpha-blending.ts @@ -67,8 +67,8 @@ export default async function test(settings: ExampleSettings) { const rightBackground = renderer.createNode({ x: renderer.settings.appWidth / 2, y: 0, - width: renderer.settings.appWidth / 2, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth / 2, + h: renderer.settings.appHeight, color: rightSideBg === 'red' ? 0xff0000ff : 0x00ff00ff, parent: testRoot, zIndex: 0, @@ -139,8 +139,8 @@ export default async function test(settings: ExampleSettings) { const alphaPropRgbaRectHalf1 = renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, color: 0xffffffff, alpha: 0.5, parent: sideContainer, @@ -152,8 +152,8 @@ export default async function test(settings: ExampleSettings) { const alphaPropRgbaRectHalf2 = renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, color: mergeColorAlpha(0xffffffff, 0.5), alpha: 1.0, parent: sideContainer, @@ -179,8 +179,8 @@ export default async function test(settings: ExampleSettings) { const sameColorRectAlphaFull = renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, color: bgColor, parent: sideContainer, alpha: 1.0, @@ -192,8 +192,8 @@ export default async function test(settings: ExampleSettings) { const sameColorRectAlphaHalf1 = renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, color: bgColor, parent: sideContainer, alpha: 0.5, @@ -205,8 +205,8 @@ export default async function test(settings: ExampleSettings) { const sameColorRectAlphaHalf2 = renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, color: mergeColorAlpha(bgColor, 0.5), parent: sideContainer, alpha: 1.0, @@ -218,8 +218,8 @@ export default async function test(settings: ExampleSettings) { const sameColorRectAlphaQuarter = renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, color: mergeColorAlpha(bgColor, 0.5), parent: sideContainer, alpha: 0.5, @@ -244,8 +244,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, src: bgColorName === 'red' ? red100 : green100, alpha: 1, parent: sideContainer, @@ -256,8 +256,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, src: bgColorName === 'red' ? red50 : green50, alpha: 1, parent: sideContainer, @@ -268,8 +268,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, src: bgColorName === 'red' ? red100 : green100, alpha: 0.5, parent: sideContainer, @@ -280,8 +280,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, src: bgColorName === 'red' ? red50 : green50, alpha: 0.5, parent: sideContainer, @@ -292,8 +292,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, src: bgColorName === 'red' ? red25 : green25, alpha: 1, parent: sideContainer, @@ -455,17 +455,17 @@ export default async function test(settings: ExampleSettings) { curY += 30 + PADDING; const sizeToTexture: NodeLoadedEventHandler = (target, payload) => { - const { width, height } = payload.dimensions; - target.width = width; - target.height = height; + const { w, h } = payload.dimensions; + target.w = w; + target.h = h; }; renderer .createNode({ x: curX, y: curY, - width: RECT_SIZE, - height: RECT_SIZE, + w: RECT_SIZE, + h: RECT_SIZE, src: robot, alpha: 1, parent: sideContainer, diff --git a/examples/tests/alpha.ts b/examples/tests/alpha.ts index 8f5ae06d..66723df4 100644 --- a/examples/tests/alpha.ts +++ b/examples/tests/alpha.ts @@ -29,8 +29,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const parent = renderer.createNode({ x: 200, y: 240, - width: 500, - height: 500, + w: 500, + h: 500, color: 0x000000ff, parent: testRoot, zIndex: 0, @@ -41,8 +41,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const child = renderer.createNode({ x: 800, y: 0, - width: 500, - height: 500, + w: 500, + h: 500, color: 0xff0000ff, parent, zIndex: 12, diff --git a/examples/tests/animation-events.ts b/examples/tests/animation-events.ts index 79508e44..165d78d4 100644 --- a/examples/tests/animation-events.ts +++ b/examples/tests/animation-events.ts @@ -62,15 +62,15 @@ export default async function test({ testRoot, snapshot, }: ExampleSettings) { - testRoot.width = 250; - testRoot.height = 250; + testRoot.w = 250; + testRoot.h = 250; testRoot.color = 0xffffffff; const robot = renderer.createNode({ x: 0, y: 0, - width: 140, - height: 140, + w: 140, + h: 140, zIndex: 5, src: robotImg, parent: testRoot, @@ -78,8 +78,8 @@ export default async function test({ const status = renderer.createTextNode({ mount: 1, - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, fontSize: 40, fontFamily: 'Ubuntu', parent: testRoot, diff --git a/examples/tests/animation.ts b/examples/tests/animation.ts index 5ca4bbdd..82bcc55c 100644 --- a/examples/tests/animation.ts +++ b/examples/tests/animation.ts @@ -32,8 +32,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -41,8 +41,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const animatableNode = renderer.createNode({ x: 0, y: 300, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xffffffff, parent: node, }); @@ -132,7 +132,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { currentAnimation = animatableNode.animate( { - x: renderer.settings.appWidth - animatableNode.width, + x: renderer.settings.appWidth - animatableNode.w, }, animationSettings, // Remove the unnecessary assertion ); diff --git a/examples/tests/child-positioning.ts b/examples/tests/child-positioning.ts index 507ef477..a6b428ea 100644 --- a/examples/tests/child-positioning.ts +++ b/examples/tests/child-positioning.ts @@ -30,8 +30,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: (idx % 5) * 250 + 100, y: Math.floor(idx / 5) * 250 + 100, - width: rand(50, 120), - height: rand(50, 120), + w: rand(50, 120), + h: rand(50, 120), color: 0x0000ffaa, parent: testRoot, }); @@ -39,8 +39,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const R1 = renderer.createNode({ x: 10, y: 10, - width: 20, - height: 20, + w: 20, + h: 20, color: 0xffffffff, parent: node, scale: 1, @@ -49,8 +49,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const R3 = renderer.createNode({ x: 40, y: 40, - width: 10, - height: 10, + w: 10, + h: 10, color: 0xffffffff, parent: node, scale: 1, diff --git a/examples/tests/clear-color-setting.ts b/examples/tests/clear-color-setting.ts index 9cc75081..40c279fe 100644 --- a/examples/tests/clear-color-setting.ts +++ b/examples/tests/clear-color-setting.ts @@ -29,8 +29,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Dynamic Settings clearColor Tests', }); @@ -51,8 +51,8 @@ function createTestCase( return async function (page: INode) { renderer.createTextNode({ mount: 0.5, - width: 400, - height: 400, + w: 400, + h: 400, text: `Test passes if the background appears as ${colorName}`, fontFamily: 'Ubuntu', fontSize: 50, diff --git a/examples/tests/clipping-mutations.ts b/examples/tests/clipping-mutations.ts index a2288ef0..6159bb8c 100644 --- a/examples/tests/clipping-mutations.ts +++ b/examples/tests/clipping-mutations.ts @@ -26,25 +26,25 @@ export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; // Set a smaller snapshot area - testRoot.width = 200; - testRoot.height = 200; + testRoot.w = 200; + testRoot.h = 200; testRoot.color = 0xffffffff; const clippedContainer = renderer.createNode({ x: 0, y: 0, - width: testRoot.width / 2, - height: testRoot.height / 2, + w: testRoot.w / 2, + h: testRoot.h / 2, parent: settings.testRoot, color: 0x00ffffff, clipping: true, }); renderer.createNode({ - x: -testRoot.width / 4, - y: -testRoot.height / 4, - width: testRoot.width, - height: testRoot.height, + x: -testRoot.w / 4, + y: -testRoot.h / 4, + w: testRoot.w, + h: testRoot.h, scale: 0.9, parent: clippedContainer, src: robotImg, @@ -61,10 +61,10 @@ export default async function test(settings: ExampleSettings) { clippedContainer.x = 0; clippedContainer.y = 0; } else if (i === 1) { - clippedContainer.x = testRoot.width / 4; + clippedContainer.x = testRoot.w / 4; } else if (i === 2) { - clippedContainer.x = testRoot.width / 2; - clippedContainer.y = testRoot.height / 2; + clippedContainer.x = testRoot.w / 2; + clippedContainer.y = testRoot.h / 2; } } diff --git a/examples/tests/clipping.ts b/examples/tests/clipping.ts index 7bb4a9aa..cf72bb39 100644 --- a/examples/tests/clipping.ts +++ b/examples/tests/clipping.ts @@ -36,8 +36,8 @@ const PADDING = 20; export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Clipping Tests', }); @@ -50,8 +50,8 @@ export default async function test(settings: ExampleSettings) { /// TOP LEFT const clipContainerTopLeft = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -59,8 +59,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerTopLeft, }); @@ -70,8 +70,8 @@ export default async function test(settings: ExampleSettings) { /// TOP RIGHT const clipContainerTopRight = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -79,8 +79,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerTopRight, }); @@ -90,8 +90,8 @@ export default async function test(settings: ExampleSettings) { /// BOTTOM RIGHT const clipContainerBottomRight = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -99,8 +99,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 100, y: 100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerBottomRight, }); @@ -110,8 +110,8 @@ export default async function test(settings: ExampleSettings) { /// BOTTOM LEFT const clipContainerBottomLeft = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -119,8 +119,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: -100, y: 100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerBottomLeft, }); @@ -130,8 +130,8 @@ export default async function test(settings: ExampleSettings) { // ALL SIDES const clipAllSides = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -139,8 +139,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE * 2, - height: SQUARE_SIZE * 2, + w: SQUARE_SIZE * 2, + h: SQUARE_SIZE * 2, src: robotImg, parent: clipAllSides, }); @@ -156,8 +156,8 @@ export default async function test(settings: ExampleSettings) { /// TOP LEFT const clipContainerTopLeft = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -168,8 +168,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerTopLeft2, }); @@ -179,8 +179,8 @@ export default async function test(settings: ExampleSettings) { /// TOP RIGHT const clipContainerTopRight = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -191,8 +191,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerTopRight2, }); @@ -202,8 +202,8 @@ export default async function test(settings: ExampleSettings) { /// BOTTOM RIGHT const clipContainerBottomRight = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -214,8 +214,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 100, y: 100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerBottomRight2, }); @@ -225,8 +225,8 @@ export default async function test(settings: ExampleSettings) { /// BOTTOM LEFT const clipContainerBottomLeft = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -237,8 +237,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: -100, y: 100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerBottomLeft2, }); @@ -248,8 +248,8 @@ export default async function test(settings: ExampleSettings) { // ALL SIDES const clipAllSides = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -260,13 +260,13 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE * 2, - height: SQUARE_SIZE * 2, + w: SQUARE_SIZE * 2, + h: SQUARE_SIZE * 2, src: robotImg, parent: clipAllSides2, }); - rowNode.height = SQUARE_SIZE; + rowNode.h = SQUARE_SIZE; return SQUARE_SIZE; }, }, @@ -278,8 +278,8 @@ export default async function test(settings: ExampleSettings) { /// TOP LEFT const clipContainerTopLeft = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -287,8 +287,8 @@ export default async function test(settings: ExampleSettings) { const clipContainerTopLeft2 = renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0xff0000ff, src: robotImg, parent: clipContainerTopLeft, @@ -297,8 +297,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 50, y: 50, - width: SQUARE_SIZE / 2, - height: SQUARE_SIZE / 2, + w: SQUARE_SIZE / 2, + h: SQUARE_SIZE / 2, src: robotImg, parent: clipContainerTopLeft2, }); @@ -308,8 +308,8 @@ export default async function test(settings: ExampleSettings) { /// TOP RIGHT const clipContainerTopRight = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -317,8 +317,8 @@ export default async function test(settings: ExampleSettings) { const clipContainerTopRight2 = renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0xff0000ff, src: robotImg, parent: clipContainerTopRight, @@ -327,8 +327,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 150, y: 50, - width: SQUARE_SIZE / 2, - height: SQUARE_SIZE / 2, + w: SQUARE_SIZE / 2, + h: SQUARE_SIZE / 2, src: robotImg, parent: clipContainerTopRight2, }); @@ -338,8 +338,8 @@ export default async function test(settings: ExampleSettings) { /// BOTTOM RIGHT const clipContainerBottomRight = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -347,8 +347,8 @@ export default async function test(settings: ExampleSettings) { const clipContainerBottomRight2 = renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0xff0000ff, src: robotImg, parent: clipContainerBottomRight, @@ -357,8 +357,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 150, y: 150, - width: SQUARE_SIZE / 2, - height: SQUARE_SIZE / 2, + w: SQUARE_SIZE / 2, + h: SQUARE_SIZE / 2, src: robotImg, parent: clipContainerBottomRight2, }); @@ -368,8 +368,8 @@ export default async function test(settings: ExampleSettings) { /// BOTTOM LEFT const clipContainerBottomLeft = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -377,8 +377,8 @@ export default async function test(settings: ExampleSettings) { const clipContainerBottomLeft2 = renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0xff0000ff, src: robotImg, parent: clipContainerBottomLeft, @@ -387,8 +387,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 50, y: 150, - width: SQUARE_SIZE / 2, - height: SQUARE_SIZE / 2, + w: SQUARE_SIZE / 2, + h: SQUARE_SIZE / 2, src: robotImg, parent: clipContainerBottomLeft2, }); @@ -398,8 +398,8 @@ export default async function test(settings: ExampleSettings) { // ALL SIDES const clipContainerAllSides = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0x00ff00ff, parent: rowNode, clipping: true, @@ -407,8 +407,8 @@ export default async function test(settings: ExampleSettings) { const clipContainerAllSides2 = renderer.createNode({ x: -100, y: -100, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, color: 0xff0000ff, src: robotImg, parent: clipContainerAllSides, @@ -417,8 +417,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 50, y: 50, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, src: robotImg, parent: clipContainerAllSides2, }); @@ -433,15 +433,15 @@ export default async function test(settings: ExampleSettings) { const parent = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, parent: rowNode, clipping: true, }); renderer.createTextNode({ - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, parent, fontFamily: 'Ubuntu', fontSize: 40, @@ -461,15 +461,15 @@ export default async function test(settings: ExampleSettings) { const parent = renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, parent: rowNode, clipping: true, }); renderer.createTextNode({ - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, parent, fontFamily: 'Ubuntu', fontSize: 40, @@ -487,8 +487,8 @@ export default async function test(settings: ExampleSettings) { let curX = 0; const containerProps = { - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, parent: rowNode, color: 0x00ff00ff, clipping: true, @@ -498,15 +498,15 @@ export default async function test(settings: ExampleSettings) { mount: 0.5, x: SQUARE_SIZE / 2, y: SQUARE_SIZE / 2, - width: SQUARE_SIZE / 2, - height: SQUARE_SIZE / 2, + w: SQUARE_SIZE / 2, + h: SQUARE_SIZE / 2, clipping: true, // rotation: Math.PI / 4 } satisfies Partial; const clippingChildProps = { - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, mount: 0.5, src: robotImg, } satisfies Partial; @@ -539,7 +539,7 @@ export default async function test(settings: ExampleSettings) { }), ); - curX += dim.width + PADDING; + curX += dim.w + PADDING; const container2 = renderer.createNode({ ...containerProps, @@ -559,7 +559,7 @@ export default async function test(settings: ExampleSettings) { curX += SQUARE_SIZE + PADDING; - curX += dim.width + PADDING; + curX += dim.w + PADDING; const container3 = renderer.createNode({ ...containerProps, @@ -580,7 +580,7 @@ export default async function test(settings: ExampleSettings) { curX += SQUARE_SIZE + PADDING; - curX += dim.width + PADDING; + curX += dim.w + PADDING; const container4 = renderer.createNode({ ...containerProps, @@ -608,8 +608,8 @@ export default async function test(settings: ExampleSettings) { let curX = 0; const containerProps = { - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, parent: rowNode, color: 0x00ff00ff, clipping: true, @@ -619,14 +619,14 @@ export default async function test(settings: ExampleSettings) { mount: 0.5, x: SQUARE_SIZE / 2, y: SQUARE_SIZE / 2, - width: SQUARE_SIZE / 2, - height: SQUARE_SIZE / 2, + w: SQUARE_SIZE / 2, + h: SQUARE_SIZE / 2, clipping: true, } satisfies Partial; const clippingChildProps = { - width: SQUARE_SIZE, - height: SQUARE_SIZE, + w: SQUARE_SIZE, + h: SQUARE_SIZE, mount: 0.5, src: robotImg, } satisfies Partial; @@ -659,7 +659,7 @@ export default async function test(settings: ExampleSettings) { }), ); - curX += dimensions.width + PADDING; + curX += dimensions.w + PADDING; const container2 = renderer.createNode({ ...containerProps, diff --git a/examples/tests/default-fps-animation.ts b/examples/tests/default-fps-animation.ts index 20473de4..fa268813 100644 --- a/examples/tests/default-fps-animation.ts +++ b/examples/tests/default-fps-animation.ts @@ -36,8 +36,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const backgroundNode = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x1a1a1aff, parent: testRoot, }); @@ -116,8 +116,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const animatedNode = renderer.createNode({ x, y, - width: 60, - height: 60, + w: 60, + h: 60, color, parent: backgroundNode, }); @@ -136,8 +136,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const rotatingNode = renderer.createNode({ x: 1500, y: 400, - width: 100, - height: 100, + w: 100, + h: 100, color: 0xffa500ff, parent: backgroundNode, pivot: 0.5, @@ -147,8 +147,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const scalingNode = renderer.createNode({ x: 1650, y: 400, - width: 80, - height: 80, + w: 80, + h: 80, color: 0x9400d3ff, parent: backgroundNode, pivot: 0.5, diff --git a/examples/tests/destroy.ts b/examples/tests/destroy.ts index 34acabe3..a5fd0460 100644 --- a/examples/tests/destroy.ts +++ b/examples/tests/destroy.ts @@ -39,8 +39,8 @@ export default async function test({ const nodes: INode[] = []; const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xff1e293b, parent: testRoot, }); @@ -51,8 +51,8 @@ export default async function test({ const baseY = Math.floor(i / gridSize) * 60; const node = renderer.createNode({ - width: 125, - height: 25, + w: 125, + h: 25, x: baseX, y: baseY, src: logo, @@ -65,8 +65,8 @@ export default async function test({ nodes.push(node); const textNode = renderer.createTextNode({ - width: 125, - height: 25, + w: 125, + h: 25, x: baseX, y: baseY + 25, text: 'Lightning 3', diff --git a/examples/tests/detect-touch.ts b/examples/tests/detect-touch.ts index a97675af..bf1a97af 100644 --- a/examples/tests/detect-touch.ts +++ b/examples/tests/detect-touch.ts @@ -29,8 +29,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const holder = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -42,8 +42,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: holder, x: getRandomValue(0, 1820), y: getRandomValue(0, 980), - width: dimension, - height: dimension, + w: dimension, + h: dimension, color: getRandomColor(), interactive: true, zIndex: getRandomValue(0, 100), diff --git a/examples/tests/gradient.ts b/examples/tests/gradient.ts index e5c453ca..b1cdd43f 100644 --- a/examples/tests/gradient.ts +++ b/examples/tests/gradient.ts @@ -36,8 +36,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { return renderer.createNode({ x: (idx % 4) * 300 + 100, y: Math.floor(idx / 4) * 300 + 100, - width: 250, - height: 250, + w: 250, + h: 250, color: 0x000000ff, [element]: 0xff0000ff, parent: testRoot, diff --git a/examples/tests/inspector.ts b/examples/tests/inspector.ts index eb4a755b..c8e0b778 100644 --- a/examples/tests/inspector.ts +++ b/examples/tests/inspector.ts @@ -22,15 +22,15 @@ import type { ExampleSettings } from '../common/ExampleSettings.js'; export default async function ({ renderer, testRoot }: ExampleSettings) { const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); const dataNodeCheckBox = renderer.createNode({ - width: 100, - height: 100, + w: 100, + h: 100, x: 80, y: 200, color: 0xff0000ff, @@ -38,8 +38,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { }); const dataNode = renderer.createNode({ - width: 505, - height: 101, + w: 505, + h: 101, x: 200, y: 200, src: logo, @@ -52,8 +52,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { }); const tooLongStringCheckBox = renderer.createNode({ - width: 100, - height: 100, + w: 100, + h: 100, x: 80, y: 400, color: 0xff0000ff, @@ -61,8 +61,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { }); const tooLongString = renderer.createNode({ - width: 505, - height: 101, + w: 505, + h: 101, x: 200, y: 400, src: logo, @@ -74,8 +74,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { }); const textNodeCheckBox = renderer.createNode({ - width: 100, - height: 100, + w: 100, + h: 100, x: 80, y: 600, color: 0xff0000ff, @@ -85,7 +85,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const textNode = renderer.createTextNode({ x: 200, y: 600, - height: 100, + h: 100, text: 'Hello World', fontFamily: 'Ubuntu', fontSize: 100, @@ -98,7 +98,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const testDetailsText = renderer.createTextNode({ x: 30, y: 80, - height: 100, + h: 100, text: 'Boxes should turn green if the inspector is enabled', fontFamily: 'Ubuntu', fontSize: 50, @@ -108,7 +108,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const testQparamDetailsText = renderer.createTextNode({ x: 30, y: 800, - height: 100, + h: 100, text: 'Please make sure to run this test with ?inspector=true', fontFamily: 'Ubuntu', fontSize: 50, diff --git a/examples/tests/mount-pivot.ts b/examples/tests/mount-pivot.ts index 45759436..1a23ecdd 100644 --- a/examples/tests/mount-pivot.ts +++ b/examples/tests/mount-pivot.ts @@ -34,8 +34,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const bg = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -43,8 +43,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const x = renderer.createNode({ x: 0, y: 1080 / 2, - width: 1920, - height: 4, + w: 1920, + h: 4, color: 0xffffffff, parent: testRoot, mountY: 0.5, @@ -53,8 +53,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const y = renderer.createNode({ x: 1920 / 2, y: 0, - width: 4, - height: 1080, + w: 4, + h: 1080, color: 0xffffffff, parent: testRoot, mountX: 0.5, @@ -69,8 +69,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 1920 / 2, y: 1080 / 2, - width: 500, - height: 500, + w: 500, + h: 500, colorBottom: randomColor() * 0xffffffaa, colorTop: randomColor() * 0xffffffaa, parent: testRoot, @@ -86,8 +86,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const pivotPoint = renderer.createNode({ x: pivotX * 500, y: pivotY * 500, - width: 20, - height: 20, + w: 20, + h: 20, color: 0xffffffff, parent: node, shader: renderer.createShader('RoundedRectangle', { @@ -97,12 +97,12 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { mount: 0.5, }); - // eslint-disable-next-line @typescript-eslint/no-misused-promises + setTimeout(async () => { const dimension = node .animate( { - width: 1920, + w: 1920, }, { duration: 450, diff --git a/examples/tests/no-rtt.ts b/examples/tests/no-rtt.ts index 0c3fc0e9..6ece2b56 100644 --- a/examples/tests/no-rtt.ts +++ b/examples/tests/no-rtt.ts @@ -20,16 +20,16 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); const clippingNode = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, parent: node, clipping: true, color: 0x00000000, @@ -38,8 +38,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const rootRenderToTextureNode = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, parent: clippingNode, rtt: false, zIndex: 5, @@ -53,8 +53,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: rootRenderToTextureNode, x: (i % 15) * 120 + 120, y: Math.floor(i / 15) * 120 + 150, - width: 120, - height: 120, + w: 120, + h: 120, scale: 0.85, // src: '../assets/rocko.png', src: `https://picsum.photos/id/${image + 30}/120/120`, diff --git a/examples/tests/quads-rendered.ts b/examples/tests/quads-rendered.ts index 3e4e2996..16de77f6 100644 --- a/examples/tests/quads-rendered.ts +++ b/examples/tests/quads-rendered.ts @@ -39,8 +39,8 @@ export default async function test({ const bg = renderer.createNode({ y: 80, - width: 1920, - height: 1000, + w: 1920, + h: 1000, color: 0xff1e293b, parent: testRoot, }); @@ -68,8 +68,8 @@ export default async function test({ if (automation === false) await new Promise((resolve) => setTimeout(resolve, delay)); const node = renderer.createNode({ - width: 125, - height: 25, + w: 125, + h: 25, x: baseX, y: baseY, color: 0xff0000ff, @@ -83,8 +83,8 @@ export default async function test({ nodes.push(node); const textNode = renderer.createTextNode({ - width: 125, - height: 25, + w: 125, + h: 25, rtt: false, x: baseX, y: baseY + 25, diff --git a/examples/tests/render-bounds.ts b/examples/tests/render-bounds.ts index 6065c5d5..a7ee646e 100644 --- a/examples/tests/render-bounds.ts +++ b/examples/tests/render-bounds.ts @@ -9,8 +9,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const greenRect = renderer.createNode({ x: 0, y: 540, - width: 960, - height: 540, + w: 960, + h: 540, color: 0x00ff00ff, clipping: true, parent: testRoot, @@ -21,8 +21,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { x: 0, y: 0, alpha: 1, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, pivot: 0, parent: testRoot, @@ -37,9 +37,9 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { }); let redRectAnimation: IAnimationController | null = null; - // eslint-disable-next-line @typescript-eslint/no-misused-promises + setTimeout(async () => { - // eslint-disable-next-line no-constant-condition + while (true) { redRectAnimation = redRect .animate( @@ -71,8 +71,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const blueRect = renderer.createNode({ x: 1921, y: 540, - width: 540, - height: 540, + w: 540, + h: 540, color: 0x0000ffff, mountX: 0.5, mountY: 0.5, @@ -89,9 +89,9 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { }); let blueRectAnimation: IAnimationController | null = null; - // eslint-disable-next-line @typescript-eslint/no-misused-promises + setTimeout(async () => { - // eslint-disable-next-line no-constant-condition + while (true) { blueRectAnimation = blueRect .animate( diff --git a/examples/tests/render-settings.ts b/examples/tests/render-settings.ts index 757789a9..1ead3dbe 100644 --- a/examples/tests/render-settings.ts +++ b/examples/tests/render-settings.ts @@ -51,7 +51,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { fontFamily: 'Ubuntu-ssdf', x: 10, y: 810, - maxWidth: renderer.root.width - 20, + maxWidth: renderer.root.w - 20, parent: testRoot, }); @@ -67,8 +67,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const boundaryRect1 = renderer.createNode({ x: 1920 / 2 - (1920 * 0.75) / 2, y: 1080 / 2 - (1080 * 0.45) / 2, - width: 1000, - height: 410, + w: 1000, + h: 410, color: 0x000000ff, parent: testRoot, }); @@ -76,8 +76,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const screen = renderer.createNode({ x: 50, y: 50, - width: boundaryRect1.width - 100, - height: boundaryRect1.height - 100, + w: boundaryRect1.w - 100, + h: boundaryRect1.h - 100, parent: boundaryRect1, color: 0x222222ff, }); @@ -85,8 +85,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const boundaryRect2 = renderer.createNode({ x: 50, y: 50, - width: 1000 - 100, - height: 410 - 250, + w: 1000 - 100, + h: 410 - 250, color: 0x222222ff, parent: boundaryRect1, }); @@ -95,8 +95,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 380, y: 50, alpha: 1, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, pivot: 0, text: 'red', @@ -127,7 +127,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { yPos += 40; const appSize = renderer.createTextNode({ - text: `App Size: ${renderer.root.width}x${renderer.root.height}`, + text: `App Size: ${renderer.root.w}x${renderer.root.h}`, fontSize: 30, x: 10, y: yPos, @@ -139,7 +139,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const pixelSize = renderer.createTextNode({ text: `Pixels: ${renderer.canvas.width}x${renderer.canvas.height}`, fontSize: 30, - x: 10, y: yPos, fontFamily: 'Ubuntu-ssdf', parent: testRoot, @@ -157,8 +156,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { yPos += 40; const fpsCheckBox = renderer.createNode({ - width: 30, - height: 30, + w: 30, + h: 30, x: 10, y: yPos, color: 0xff0000ff, @@ -176,8 +175,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { yPos += 40; const inspectorCheckBox = renderer.createNode({ - width: 30, - height: 30, + w: 30, + h: 30, x: 10, y: yPos, color: 0xff0000ff, @@ -187,7 +186,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createTextNode({ x: 50, y: yPos, - height: 100, + h: 100, text: 'Inspector enabled?', fontFamily: 'Ubuntu-ssdf', fontSize: 30, @@ -278,7 +277,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { clearColor: 0xff6f00ff, inspector: false, }); - info.width = renderer.root.width - 20; + info.w = renderer.root.w - 20; info.text = 'PhysicalPixelRatio: 0.5. Pixels should be 960x540. Inspector disabled. ClearColor changed to orange.'; break; @@ -291,7 +290,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { devicePhysicalPixelRatio: ppr, clearColor: 0x00000000, }); - info.width = renderer.root.width - 20; + info.w = renderer.root.w - 20; info.text = 'Pixels should be 366x666. redText should be out of bounds. Default clearColor, LogicalPixelRatio and PhysicalPixelRatio'; break; @@ -333,8 +332,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { intervalID = setInterval(() => { screen.color = 0xffffffff; screen.texture = renderer.createTexture('NoiseTexture', { - width: 500, - height: 500, + w: 500, + h: 500, cacheId: Math.floor(Math.random() * 100000), }); screen.textureOptions.preload = true; @@ -349,7 +348,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { } redPosition.text = `Text X Position: ${redText.x}`; - appSize.text = `App Size: ${renderer.root.width}x${renderer.root.height}`; + appSize.text = `App Size: ${renderer.root.w}x${renderer.root.h}`; pixelSize.text = `Pixels: ${renderer.canvas.width * ppr}x${ renderer.canvas.height * ppr }`; diff --git a/examples/tests/resize-mode.ts b/examples/tests/resize-mode.ts index 118884f4..d05170ba 100644 --- a/examples/tests/resize-mode.ts +++ b/examples/tests/resize-mode.ts @@ -36,8 +36,8 @@ const PADDING = 20; export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Resizemode Tests', }); @@ -51,8 +51,8 @@ export default async function test(settings: ExampleSettings) { for (let i = 0; i < 3; i++) { renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE - 300, + w: SQUARE_SIZE, + h: SQUARE_SIZE - 300, texture: renderer.createTexture('ImageTexture', { src: testscreenImg, }), @@ -68,8 +68,8 @@ export default async function test(settings: ExampleSettings) { curX += SQUARE_SIZE + PADDING; } - rowNode.height = SQUARE_SIZE - 300; - return rowNode.height; + rowNode.h = SQUARE_SIZE - 300; + return rowNode.h; }, }, { @@ -81,8 +81,8 @@ export default async function test(settings: ExampleSettings) { for (let i = 0; i < 3; i++) { renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE - 200, + w: SQUARE_SIZE, + h: SQUARE_SIZE - 200, texture: renderer.createTexture('ImageTexture', { src: testscreenImg, }), @@ -98,8 +98,8 @@ export default async function test(settings: ExampleSettings) { curX += SQUARE_SIZE + PADDING; } - rowNode.height = SQUARE_SIZE - 200; - return rowNode.height; + rowNode.h = SQUARE_SIZE - 200; + return rowNode.h; }, }, { @@ -111,8 +111,8 @@ export default async function test(settings: ExampleSettings) { for (let i = 0; i < 3; i++) { renderer.createNode({ x: curX, - width: SQUARE_SIZE, - height: SQUARE_SIZE - 300, + w: SQUARE_SIZE, + h: SQUARE_SIZE - 300, texture: renderer.createTexture('ImageTexture', { src: testscreenRImg, }), @@ -128,8 +128,8 @@ export default async function test(settings: ExampleSettings) { curX += SQUARE_SIZE + PADDING; } - rowNode.height = SQUARE_SIZE - 300; - return rowNode.height; + rowNode.h = SQUARE_SIZE - 300; + return rowNode.h; }, }, { @@ -141,8 +141,8 @@ export default async function test(settings: ExampleSettings) { for (let i = 0; i < 5; i++) { renderer.createNode({ x: curX, - width: SQUARE_SIZE - 400, - height: SQUARE_SIZE - 100, + w: SQUARE_SIZE - 400, + h: SQUARE_SIZE - 100, texture: renderer.createTexture('ImageTexture', { src: testscreenRImg, }), @@ -158,8 +158,8 @@ export default async function test(settings: ExampleSettings) { curX += SQUARE_SIZE + PADDING - 330; } - rowNode.height = SQUARE_SIZE - 200; - return rowNode.height; + rowNode.h = SQUARE_SIZE - 200; + return rowNode.h; }, }, { @@ -168,16 +168,16 @@ export default async function test(settings: ExampleSettings) { content: async (rowNode) => { let curX = 0; const containerProps = { - width: SQUARE_SIZE, - height: SQUARE_SIZE - 300, + w: SQUARE_SIZE, + h: SQUARE_SIZE - 300, parent: rowNode, color: 0x333333ff, clipping: true, } satisfies Partial; const textureNodeProps = { - width: containerProps.width, - height: containerProps.height, + w: containerProps.width, + h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { src: testscreenImg, @@ -201,8 +201,8 @@ export default async function test(settings: ExampleSettings) { curX += containerProps.width + PADDING; - rowNode.height = containerProps.height; - return rowNode.height; + rowNode.h = containerProps.h; + return rowNode.h; }, }, { @@ -211,16 +211,16 @@ export default async function test(settings: ExampleSettings) { content: async (rowNode) => { const curX = 0; const containerProps = { - width: SQUARE_SIZE, - height: SQUARE_SIZE - 200, + w: SQUARE_SIZE, + h: SQUARE_SIZE - 200, parent: rowNode, color: 0x333333ff, clipping: true, } satisfies Partial; const textureNodeProps = { - width: containerProps.width, - height: containerProps.height, + w: containerProps.width, + h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { src: testscreenImg, @@ -242,8 +242,8 @@ export default async function test(settings: ExampleSettings) { parent: container1, }); - rowNode.height = containerProps.height; - return rowNode.height; + rowNode.h = containerProps.h; + return rowNode.h; }, }, { @@ -252,16 +252,16 @@ export default async function test(settings: ExampleSettings) { content: async (rowNode) => { let curX = 0; const containerProps = { - width: SQUARE_SIZE - 400, - height: SQUARE_SIZE - 200, + w: SQUARE_SIZE - 400, + h: SQUARE_SIZE - 200, parent: rowNode, color: 0x333333ff, clipping: true, } satisfies Partial; const textureNodeProps = { - width: containerProps.width, - height: containerProps.height, + w: containerProps.width, + h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { src: testscreenRImg, @@ -294,14 +294,14 @@ export default async function test(settings: ExampleSettings) { ...textureNodeProps, mount: 0.5, x: containerProps.width / 2, - y: containerProps.height / 2, + y: containerProps.h / 2, pivotX: 0.5, rotation: deg2Rad(45), parent: container2, }); - rowNode.height = containerProps.height; - return rowNode.height; + rowNode.h = containerProps.h; + return rowNode.h; }, }, { @@ -310,16 +310,16 @@ export default async function test(settings: ExampleSettings) { content: async (rowNode) => { let curX = 0; const containerProps = { - width: SQUARE_SIZE - 150, - height: SQUARE_SIZE - 200, + w: SQUARE_SIZE - 150, + h: SQUARE_SIZE - 200, parent: rowNode, color: 0x333333ff, clipping: true, } satisfies Partial; const textureNodeProps = { - width: containerProps.width, - height: containerProps.height, + w: containerProps.width, + h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { src: testscreenRImg, @@ -352,14 +352,14 @@ export default async function test(settings: ExampleSettings) { ...textureNodeProps, mount: 0.5, x: containerProps.width / 2, - y: containerProps.height / 2, + y: containerProps.h / 2, pivotX: 0.5, rotation: deg2Rad(45), parent: container2, }); - rowNode.height = containerProps.height; - return rowNode.height; + rowNode.h = containerProps.h; + return rowNode.h; }, }, ]); diff --git a/examples/tests/robot.ts b/examples/tests/robot.ts index a48397fd..307af926 100644 --- a/examples/tests/robot.ts +++ b/examples/tests/robot.ts @@ -31,8 +31,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const elevatorBg = renderer.createNode({ x: 368, y: 228, - width: 226, - height: 214, + w: 226, + h: 214, zIndex: 0, src: elevatorBgImg, parent: testRoot, @@ -41,8 +41,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const elevatorBg2 = renderer.createNode({ x: 368, y: 827, - width: 226, - height: 214, + w: 226, + h: 214, zIndex: 0, src: elevatorBgImg, parent: testRoot, @@ -51,8 +51,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const doorLeftGround = renderer.createNode({ x: 480 - 68, y: 827, - width: 68, - height: 194, + w: 68, + h: 194, zIndex: 2, src: doorLeftGroundImg, parent: testRoot, @@ -61,8 +61,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const doorRightGround = renderer.createNode({ x: 480, y: 827, - width: 68, - height: 194, + w: 68, + h: 194, zIndex: 2, src: doorRightGroundImg, parent: testRoot, @@ -71,8 +71,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const environment = renderer.createNode({ x: 0, y: 0, - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, zIndex: 3, src: environmentImg, parent: testRoot, @@ -81,8 +81,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const robot = renderer.createNode({ x: -140, y: 850, - width: 140, - height: 140, + w: 140, + h: 140, zIndex: 5, color: 0x00000000, parent: testRoot, @@ -91,8 +91,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const shadow = renderer.createNode({ x: -40, y: 180, - width: 228, - height: 65, + w: 228, + h: 65, zIndex: 5, src: shadowImg, parent: robot, @@ -101,16 +101,16 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const robotCore = renderer.createNode({ x: 0, y: 0, - width: 140, - height: 140, + w: 140, + h: 140, zIndex: 5, src: robotImg, parent: robot, }); - // eslint-disable-next-line @typescript-eslint/no-misused-promises + setTimeout(async () => { - // eslint-disable-next-line no-constant-condition + while (true) { await robotCore .animate({ y: 10 }, { duration: 500 }) @@ -126,8 +126,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const doorTopTop = renderer.createNode({ x: 375, y: 207, - width: 211, - height: 129, + w: 211, + h: 129, zIndex: 4, src: doorTopTopImg, parent: testRoot, @@ -136,14 +136,14 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const doorBottomTop = renderer.createNode({ x: 375, y: 207 + 129, - width: 211, - height: 129, + w: 211, + h: 129, zIndex: 4, src: doorBottomTopImg, parent: testRoot, }); - // eslint-disable-next-line @typescript-eslint/no-misused-promises + setTimeout(async () => { await openGroundDoors(1000); await robot diff --git a/examples/tests/rotation.ts b/examples/tests/rotation.ts index be7ee796..c506a4d5 100644 --- a/examples/tests/rotation.ts +++ b/examples/tests/rotation.ts @@ -37,8 +37,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: Math.floor(idx % 5) * 360 + 100, y: Math.floor(idx / 5) * 360 + 100, - width: 200, - height: 200, + w: 200, + h: 200, colorBottom: randomColor(), colorTop: randomColor(), parent: testRoot, @@ -52,8 +52,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const pivotPoint = renderer.createNode({ x: pivot * 200 - 5, y: pivot * 200 - 5, - width: 10, - height: 10, + w: 10, + h: 10, color: 0xffffff55, parent: node, scale: 1, @@ -62,8 +62,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const pointInner = renderer.createNode({ x: 2, y: 2, - width: 6, - height: 6, + w: 6, + h: 6, color: 0x000000ff, parent: pivotPoint, }); @@ -75,8 +75,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { scale: 1.2, y: 460, x: 820, - width: 10, - height: 180, + w: 10, + h: 180, rotation: Math.PI * 2, }, { diff --git a/examples/tests/rtt-dimension.ts b/examples/tests/rtt-dimension.ts index 7e062518..5b9f215c 100644 --- a/examples/tests/rtt-dimension.ts +++ b/examples/tests/rtt-dimension.ts @@ -15,8 +15,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -25,8 +25,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rttNode = renderer.createNode({ x: 100, y: 200, - width: 300, - height: 300, + w: 300, + h: 300, parent: node, rtt: true, clipping: true, @@ -38,8 +38,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 0, y: 0, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode, color: 0xff0000ff, }); @@ -57,8 +57,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 50, y: 100, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode, src: rocko, }); @@ -67,8 +67,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rttNode2 = renderer.createNode({ x: 500, y: 200, - width: 300, - height: 300, + w: 300, + h: 300, parent: node, rtt: true, colorTop: 0xfff00fff, @@ -78,8 +78,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 0, y: 0, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode2, color: 0xc0ff33ff, }); @@ -97,8 +97,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 50, y: 100, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode2, src: rocko, }); @@ -107,8 +107,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rttNode3 = renderer.createNode({ x: 900, y: 200, - width: 800, - height: 300, + w: 800, + h: 300, parent: node, rtt: true, colorTop: 0x67378dff, @@ -118,8 +118,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 0, y: 0, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode3, color: 0xc0ff33ff, }); @@ -137,8 +137,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 50, y: 100, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode3, src: rocko, }); @@ -146,8 +146,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const nestedRTTNode1 = renderer.createNode({ x: 400, y: 0, - width: 150, - height: 150, + w: 150, + h: 150, parent: rttNode3, rtt: true, colorTop: 0x26f1e0ff, @@ -157,8 +157,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 0, y: 0, - width: 150, - height: 150, + w: 150, + h: 150, parent: nestedRTTNode1, color: 0xc0ff33ff, }); @@ -176,8 +176,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rocko4 = renderer.createNode({ x: -120, y: 50, - width: 300, - height: 300, + w: 300, + h: 300, parent: nestedRTTNode1, src: rocko, }); @@ -188,8 +188,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { parent: node, x: (i % 15) * 120 + 100, y: Math.floor(i / 15) * 120 + 600, - width: 100, - height: 100, + w: 100, + h: 100, texture: nestedRTTNode1.texture, // Flip every other one of them textureOptions: { @@ -254,8 +254,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { animation.start(); } if (e.key === 'w') { - rttNode.width = rttNode.width === 200 ? 300 : 200; - rttNode.height = rttNode.height === 200 ? 300 : 200; + rttNode.w = rttNode.w === 200 ? 300 : 200; + rttNode.h = rttNode.h === 200 ? 300 : 200; } if (e.key === 'ArrowRight') { diff --git a/examples/tests/rtt-nested-clipping.ts b/examples/tests/rtt-nested-clipping.ts index a1962101..ee13a521 100644 --- a/examples/tests/rtt-nested-clipping.ts +++ b/examples/tests/rtt-nested-clipping.ts @@ -5,8 +5,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -15,8 +15,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rttNode = renderer.createNode({ x: 100, y: 200, - width: 400, - height: 400, + w: 400, + h: 400, parent: node, rtt: true, zIndex: 5, @@ -27,8 +27,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rect = renderer.createNode({ x: 0, y: 0, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode, clipping: true, color: 0xff0000ff, @@ -47,8 +47,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 50, y: 100, - width: 600, - height: 600, + w: 600, + h: 600, parent: rttNode, src: rocko, }); diff --git a/examples/tests/rtt-reflection.ts b/examples/tests/rtt-reflection.ts index b1250a2d..0c2c814f 100644 --- a/examples/tests/rtt-reflection.ts +++ b/examples/tests/rtt-reflection.ts @@ -10,8 +10,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -19,8 +19,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const rootRenderToTextureNode = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 540, + w: 1920, + h: 540, parent: node, rtt: true, zIndex: 5, @@ -30,8 +30,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const reflectionNode = renderer.createNode({ x: 0, y: 540, - width: 1920, - height: 540, + w: 1920, + h: 540, colorTop: 0xc0ffee00, colorBottom: 0x97abffff, parent: node, @@ -46,8 +46,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: rootRenderToTextureNode, x: (i % 15) * 120 + 50, y: Math.floor(i / 15) * 140 + 1920, - width: 120, - height: 120, + w: 120, + h: 120, scale: 0.5, src: `https://picsum.photos/id/${i + 30}/120/120`, }); diff --git a/examples/tests/rtt-spritemap.ts b/examples/tests/rtt-spritemap.ts index 355813e5..c991837d 100644 --- a/examples/tests/rtt-spritemap.ts +++ b/examples/tests/rtt-spritemap.ts @@ -47,8 +47,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rttNode = renderer.createNode({ x: 200, y: 200, - width: 300, - height: 300, + w: 300, + h: 300, parent: testRoot, rtt: true, clipping: true, @@ -60,8 +60,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 0, y: 0, - width: 300, - height: 300, + w: 300, + h: 300, parent: rttNode, color: 0xff0000ff, }); @@ -85,15 +85,15 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { texture: spriteMapTexture, x: sourceX, y: 0, - width: 100, - height: 150, + w: 100, + h: 150, }); renderer.createNode({ x: positionX, y: 80, - width: 100, - height: 150, + w: 100, + h: 150, texture: character, parent: rttNode, }); diff --git a/examples/tests/rtt.ts b/examples/tests/rtt.ts index ad67c5cf..a9f020de 100644 --- a/examples/tests/rtt.ts +++ b/examples/tests/rtt.ts @@ -30,8 +30,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0x000000ff, parent: testRoot, }); @@ -39,8 +39,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const rootRenderToTextureNode = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, parent: node, rtt: true, zIndex: 5, @@ -53,8 +53,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: rootRenderToTextureNode, x: (i % 15) * 120 + 120, y: Math.floor(i / 15) * 120 + 150, - width: 120, - height: 120, + w: 120, + h: 120, scale: 1, // src: '../assets/rocko.png', src: `https://picsum.photos/id/${i + 30}/120/120`, @@ -65,8 +65,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const a = renderer.createNode({ x: (i % 1) * 1920, y: Math.floor(i / 1) * 800, - width: 1920, - height: 1080, + w: 1920, + h: 1080, parent: testRoot, alpha: 1, color: 0xffffffff, diff --git a/examples/tests/scaling-animations.ts b/examples/tests/scaling-animations.ts index d4bdbdad..d3f4d8bd 100644 --- a/examples/tests/scaling-animations.ts +++ b/examples/tests/scaling-animations.ts @@ -37,8 +37,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: Math.floor(idx % 5) * 360 + 100, y: Math.floor(idx / 5) * 360 + 100, - width: rnd(200, 300), - height: rnd(200, 300), + w: rnd(200, 300), + h: rnd(200, 300), colorBottom: randomColor(), colorTop: randomColor(), parent: testRoot, @@ -52,8 +52,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const pivotPoint = renderer.createNode({ x: pivot * 140 - 5, y: pivot * 140 - 5, - width: 20, - height: 20, + w: 20, + h: 20, color: 0xffffff55, parent: node, // shader: renderer.createShader('RoundedRectangle', { @@ -65,8 +65,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const pointInner = renderer.createNode({ x: 2, y: 2, - width: 16, - height: 16, + w: 16, + h: 16, color: 0x000000ff, parent: pivotPoint, // shader: renderer.createShader('RoundedRectangle', { @@ -82,8 +82,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { rotation: Math.random() * Math.PI, y: 460, x: 820, - width: 3, - height: 180, + w: 3, + h: 180, }, { duration: rnd(1500, 1700), diff --git a/examples/tests/scaling.ts b/examples/tests/scaling.ts index 0afecfe4..9080634a 100644 --- a/examples/tests/scaling.ts +++ b/examples/tests/scaling.ts @@ -31,8 +31,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Scaling', }); @@ -47,8 +47,8 @@ export default async function test(settings: ExampleSettings) { // mount: 0, (should be default) x: 50, y: 50, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -84,8 +84,8 @@ export default async function test(settings: ExampleSettings) { mount: 0.5, x: 100, y: 100, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -121,8 +121,8 @@ export default async function test(settings: ExampleSettings) { mount: 1, x: 150, y: 150, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -161,8 +161,8 @@ export default async function test(settings: ExampleSettings) { // mount: 0, (should be default) x: 50, y: 50, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -198,8 +198,8 @@ export default async function test(settings: ExampleSettings) { mount: 0.5, x: 100, y: 100, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -235,8 +235,8 @@ export default async function test(settings: ExampleSettings) { mount: 1, x: 150, y: 150, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -275,8 +275,8 @@ export default async function test(settings: ExampleSettings) { // mount: 0, (should be default) x: 50, y: 50, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -312,8 +312,8 @@ export default async function test(settings: ExampleSettings) { mount: 0.5, x: 100, y: 100, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; @@ -349,8 +349,8 @@ export default async function test(settings: ExampleSettings) { mount: 1, x: 150, y: 150, - width: 100, - height: 100, + w: 100, + h: 100, src: robotImg, } satisfies Partial; diff --git a/examples/tests/shader-animation.ts b/examples/tests/shader-animation.ts index 3a676397..7f6bb890 100644 --- a/examples/tests/shader-animation.ts +++ b/examples/tests/shader-animation.ts @@ -36,7 +36,7 @@ export default async function test({ const nodeSize = { width: 300, - height: 300, + h: 300, }; const t1 = renderer.createNode({ @@ -52,7 +52,7 @@ export default async function test({ const t1Radius = renderer.createTextNode({ mountX: 1, - x: testRoot.width - 90, + x: testRoot.w - 90, y: 90, fontSize: 40, fontFamily: 'Ubuntu', diff --git a/examples/tests/shader-border.ts b/examples/tests/shader-border.ts index 2ba78e6f..46c6e8d5 100644 --- a/examples/tests/shader-border.ts +++ b/examples/tests/shader-border.ts @@ -31,8 +31,8 @@ export default async function test({ const RedRect = renderer.createNode({ x: 20, y: 20, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, shader: renderer.createShader('Border', { width: 1 }), parent: testRoot, @@ -41,8 +41,8 @@ export default async function test({ const RedRect2 = renderer.createNode({ x: 250, y: 20, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, shader: renderer.createShader('Border', { width: 30 }), parent: testRoot, @@ -51,8 +51,8 @@ export default async function test({ const GreenRect = renderer.createNode({ x: 20, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Border', { top: 10, @@ -63,8 +63,8 @@ export default async function test({ const GreenRect2 = renderer.createNode({ x: 250, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Border', { right: 10, @@ -75,8 +75,8 @@ export default async function test({ const GreenRect3 = renderer.createNode({ x: 480, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Border', { bottom: 10, @@ -87,8 +87,8 @@ export default async function test({ const GreenRect4 = renderer.createNode({ x: 710, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Border', { left: 10, @@ -99,8 +99,8 @@ export default async function test({ const BlueRect = renderer.createNode({ x: 20, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { radius: 10, @@ -112,8 +112,8 @@ export default async function test({ const BlueRect2 = renderer.createNode({ x: 250, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'top-right': 20, @@ -125,8 +125,8 @@ export default async function test({ const BlueRect3 = renderer.createNode({ x: 480, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'border-width': 10, @@ -140,8 +140,8 @@ export default async function test({ const BlueRect4 = renderer.createNode({ x: 710, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'bottom-left': 20, @@ -153,8 +153,8 @@ export default async function test({ const YellowRect = renderer.createNode({ x: 20, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'top-left': 20, @@ -166,8 +166,8 @@ export default async function test({ const YellowRect2 = renderer.createNode({ x: 250, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'top-right': 20, @@ -179,8 +179,8 @@ export default async function test({ const YellowRect3 = renderer.createNode({ x: 480, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'bottom-right': 20, @@ -192,8 +192,8 @@ export default async function test({ const YellowRect4 = renderer.createNode({ x: 710, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'bottom-left': 20, diff --git a/examples/tests/shader-hole-punch.ts b/examples/tests/shader-hole-punch.ts index 2f3607e3..380363fa 100644 --- a/examples/tests/shader-hole-punch.ts +++ b/examples/tests/shader-hole-punch.ts @@ -27,8 +27,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect = renderer.createNode({ x: 20, y: 20, - width: 600, - height: 400, + w: 600, + h: 400, color: 0xff0000ff, shader: renderer.createShader('HolePunch'), parent: testRoot, @@ -37,14 +37,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect2 = renderer.createNode({ x: 720, y: 20, - width: 600, - height: 400, + w: 600, + h: 400, color: 0xff0000ff, shader: renderer.createShader('HolePunch', { x: 100, y: 100, - width: 100, - height: 100, + w: 100, + h: 100, radius: 10, }), parent: testRoot, @@ -53,14 +53,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect = renderer.createNode({ x: 20, y: 520, - width: 600, - height: 400, + w: 600, + h: 400, color: 0x00ff00ff, shader: renderer.createShader('HolePunch', { x: 100, y: 100, - width: 200, - height: 150, + w: 200, + h: 150, radius: 10, }), parent: testRoot, @@ -69,14 +69,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect2 = renderer.createNode({ x: 720, y: 520, - width: 600, - height: 400, + w: 600, + h: 400, color: 0x00ff00ff, shader: renderer.createShader('HolePunch', { x: 270, y: 200, - width: 225, - height: 150, + w: 225, + h: 150, radius: [50, 20, 30], }), parent: testRoot, diff --git a/examples/tests/shader-linear-gradient.ts b/examples/tests/shader-linear-gradient.ts index b16d3cbc..d50b5465 100644 --- a/examples/tests/shader-linear-gradient.ts +++ b/examples/tests/shader-linear-gradient.ts @@ -31,8 +31,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect = renderer.createNode({ x: 20, y: 20, - width: 600, - height: 400, + w: 600, + h: 400, color: 0xff0000ff, shader: renderer.createShader('LinearGradient'), parent: testRoot, @@ -43,8 +43,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect2 = renderer.createNode({ x: 720, y: 20, - width: 600, - height: 400, + w: 600, + h: 400, color: 0xff0000ff, shader: renderer.createShader('LinearGradient', { colors: [0xff00ffff, 0xffff00ff, 0x0000ffff, 0x00ff00ff], @@ -56,8 +56,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect = renderer.createNode({ x: 20, y: 520, - width: 600, - height: 400, + w: 600, + h: 400, color: 0x00ff00ff, shader: renderer.createShader('LinearGradient', { colors: [0xff00ffff, 0xffff00ff, 0x0000ffff, 0x00ff00ff, 0xff0000ff], @@ -69,8 +69,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect2 = renderer.createNode({ x: 720, y: 520, - width: 600, - height: 400, + w: 600, + h: 400, src: elevatorPng, shader: renderer.createShader('LinearGradient', { colors: [0x000000ff, 0x00000000], diff --git a/examples/tests/shader-radial-gradient.ts b/examples/tests/shader-radial-gradient.ts index 37d556f0..e3afe310 100644 --- a/examples/tests/shader-radial-gradient.ts +++ b/examples/tests/shader-radial-gradient.ts @@ -28,12 +28,12 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect = renderer.createNode({ x: 20, y: 20, - width: 600, - height: 400, + w: 600, + h: 400, color: 0xff0000ff, shader: renderer.createShader('RadialGradient', { - width: 400, - height: 400, + w: 400, + h: 400, }), parent: testRoot, }); @@ -41,13 +41,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect2 = renderer.createNode({ x: 720, y: 20, - width: 600, - height: 400, + w: 600, + h: 400, color: 0xff0000ff, shader: renderer.createShader('RadialGradient', { colors: [0xff00ffff, 0xffff00ff, 0x0000ffff, 0x00ff00ff], - width: 600, - height: 400, + w: 600, + h: 400, }), parent: testRoot, }); @@ -55,13 +55,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect = renderer.createNode({ x: 20, y: 520, - width: 600, - height: 400, + w: 600, + h: 400, color: 0x00ff00ff, shader: renderer.createShader('RadialGradient', { colors: [0xff00ffff, 0xffff00ff, 0x0000ffff, 0x00ff00ff, 0xff0000ff], - width: 400, - height: 600, + w: 400, + h: 600, }), parent: testRoot, }); @@ -69,14 +69,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect2 = renderer.createNode({ x: 720, y: 520, - width: 600, - height: 400, + w: 600, + h: 400, src: elevatorPng, shader: renderer.createShader('RadialGradient', { colors: [0x00000000, 0x000000ff], stops: [0.3, 1.0], - width: 600, - height: 400, + w: 600, + h: 400, }), parent: testRoot, }); diff --git a/examples/tests/shader-rounded.ts b/examples/tests/shader-rounded.ts index 9378ec43..0a3b4f46 100644 --- a/examples/tests/shader-rounded.ts +++ b/examples/tests/shader-rounded.ts @@ -27,8 +27,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect = renderer.createNode({ x: 20, y: 20, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, shader: renderer.createShader('Rounded'), parent: testRoot, @@ -37,8 +37,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const RedRect2 = renderer.createNode({ x: 250, y: 20, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, shader: renderer.createShader('Rounded', { radius: [20] }), parent: testRoot, @@ -47,8 +47,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect = renderer.createNode({ x: 20, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Rounded', { 'top-left': 20, @@ -59,8 +59,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect2 = renderer.createNode({ x: 250, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Rounded', { 'top-right': 20, @@ -71,8 +71,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect3 = renderer.createNode({ x: 480, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Rounded', { 'bottom-right': 20, @@ -83,8 +83,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const GreenRect4 = renderer.createNode({ x: 710, y: 250, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x00ff00ff, shader: renderer.createShader('Rounded', { 'bottom-left': 20, @@ -95,8 +95,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const BlueRect = renderer.createNode({ x: 20, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'top-left': 20, @@ -108,8 +108,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const BlueRect2 = renderer.createNode({ x: 250, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'top-right': 20, @@ -121,8 +121,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const BlueRect3 = renderer.createNode({ x: 480, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'border-width': 10, @@ -136,8 +136,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const BlueRect4 = renderer.createNode({ x: 710, y: 480, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'bottom-left': 20, @@ -149,8 +149,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const YellowRect = renderer.createNode({ x: 20, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithShadow', { 'top-left': 20, @@ -161,8 +161,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const YellowRect2 = renderer.createNode({ x: 250, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithShadow', { 'top-right': 20, @@ -173,8 +173,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const YellowRect3 = renderer.createNode({ x: 480, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithShadow', { 'bottom-right': 20, @@ -185,8 +185,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const YellowRect4 = renderer.createNode({ x: 710, y: 710, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff9900ff, shader: renderer.createShader('RoundedWithShadow', { 'bottom-left': 20, diff --git a/examples/tests/shader-shadow.ts b/examples/tests/shader-shadow.ts index 3fde8323..7fd513f6 100644 --- a/examples/tests/shader-shadow.ts +++ b/examples/tests/shader-shadow.ts @@ -27,8 +27,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x: 0, y: 0, - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xffffffff, parent: testRoot, }); @@ -37,8 +37,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 300, y: 300, mount: 0.5, - width: 250, - height: 250, + w: 250, + h: 250, color: 0xff00ffff, shader: renderer.createShader('Shadow', { x: 50, @@ -52,8 +52,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 700, y: 300, mount: 0.5, - width: 250, - height: 250, + w: 250, + h: 250, color: 0xff00ffff, shader: renderer.createShader('RoundedWithShadow', { radius: 10, @@ -68,8 +68,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 1100, y: 300, mount: 0.5, - width: 250, - height: 250, + w: 250, + h: 250, color: 0xff00ffff, shader: renderer.createShader('RoundedWithBorderAndShadow', { radius: 10, diff --git a/examples/tests/stress-images.ts b/examples/tests/stress-images.ts index 23e69148..af95eb20 100644 --- a/examples/tests/stress-images.ts +++ b/examples/tests/stress-images.ts @@ -32,8 +32,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const gridNode = renderer.createNode({ x: 0, y: 0, - width: screenWidth, - height: screenHeight, + w: screenWidth, + h: screenHeight, parent: testRoot, }); @@ -46,8 +46,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: gridNode, x, y, - width: imageSize, - height: imageSize, + w: imageSize, + h: imageSize, src: `https://picsum.photos/id/${i}/${imageSize}/${imageSize}`, // Random images }); }); diff --git a/examples/tests/stress-mix.ts b/examples/tests/stress-mix.ts index efc483f0..fc4f0344 100644 --- a/examples/tests/stress-mix.ts +++ b/examples/tests/stress-mix.ts @@ -40,8 +40,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const gridNode = renderer.createNode({ x: 0, y: 0, - width: screenWidth, - height: screenHeight, + w: screenWidth, + h: screenHeight, parent: testRoot, }); @@ -63,8 +63,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: gridNode, x, y, - width: imageSize, - height: imageSize, + w: imageSize, + h: imageSize, } as Partial | Partial; if (texture === 'Image') { diff --git a/examples/tests/stress-multi-level-bounds.ts b/examples/tests/stress-multi-level-bounds.ts index 74c54905..9aa9ccaf 100644 --- a/examples/tests/stress-multi-level-bounds.ts +++ b/examples/tests/stress-multi-level-bounds.ts @@ -35,8 +35,8 @@ export default async function ({ let totalNodes = 0; const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xff1e293b, parent: testRoot, }); @@ -48,8 +48,8 @@ export default async function ({ parent: bg, }); const node = renderer.createNode({ - width: 505, - height: 101, + w: 505, + h: 101, src: logo, parent: container, }); diff --git a/examples/tests/stress-multi-level-clipping.ts b/examples/tests/stress-multi-level-clipping.ts index 41becb0c..1696f49a 100644 --- a/examples/tests/stress-multi-level-clipping.ts +++ b/examples/tests/stress-multi-level-clipping.ts @@ -35,8 +35,8 @@ export default async function ({ let totalNodes = 0; const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xff1e293b, parent: testRoot, }); @@ -45,8 +45,8 @@ export default async function ({ const container = renderer.createNode({ x: Math.random() * 1920, y: Math.random() * 1080, - width: 100, - height: 100, + w: 100, + h: 100, clipping: true, parent: bg, }); @@ -54,8 +54,8 @@ export default async function ({ mount: 0.5, x: 50, y: 50, - width: 200, - height: 200, + w: 200, + h: 200, src: robotImg, parent: container, }); diff --git a/examples/tests/stress-multi-level.ts b/examples/tests/stress-multi-level.ts index f149a913..b1ac075d 100644 --- a/examples/tests/stress-multi-level.ts +++ b/examples/tests/stress-multi-level.ts @@ -35,8 +35,8 @@ export default async function ({ let totalNodes = 0; const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xff1e293b, parent: testRoot, }); @@ -48,8 +48,8 @@ export default async function ({ parent: bg, }); const node = renderer.createNode({ - width: 505, - height: 101, + w: 505, + h: 101, src: logo, parent: container, }); diff --git a/examples/tests/stress-multi-texture.ts b/examples/tests/stress-multi-texture.ts index 1d9b4793..73f96a62 100644 --- a/examples/tests/stress-multi-texture.ts +++ b/examples/tests/stress-multi-texture.ts @@ -36,8 +36,8 @@ export default async function ({ const nodes: INode[] = []; const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xff1e293b, parent: testRoot, }); @@ -48,13 +48,13 @@ export default async function ({ y: Math.random() * 1080, ...(i % 2 === 0 ? { - width: 505, - height: 101, + w: 505, + h: 101, src: logo, } : { - width: 140, - height: 140, + w: 140, + h: 140, src: robot, }), parent: bg, diff --git a/examples/tests/stress-single-level-text.ts b/examples/tests/stress-single-level-text.ts index 2d1bb9ff..0fd5f5b0 100644 --- a/examples/tests/stress-single-level-text.ts +++ b/examples/tests/stress-single-level-text.ts @@ -38,8 +38,8 @@ export default async function ({ const endMax = 3000; const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xff1e293b, parent: testRoot, }); @@ -52,8 +52,8 @@ export default async function ({ textRendererOverride: 'sdf', text: 'Lightning 3.0', // contain: 'both', - // width: 237, - // height: 45, + // w: 237, + // h: 45, color: 0xffffffff, fontSize: 40, parent: bg, diff --git a/examples/tests/stress-single-level.ts b/examples/tests/stress-single-level.ts index f488dfed..d65a7169 100644 --- a/examples/tests/stress-single-level.ts +++ b/examples/tests/stress-single-level.ts @@ -34,16 +34,16 @@ export default async function ({ const nodes: INode[] = []; const bg = renderer.createNode({ - width: 1920, - height: 1080, + w: 1920, + h: 1080, color: 0xff1e293b, parent: testRoot, }); for (let i = 0; i < numOuterNodes; i++) { const node = renderer.createNode({ - width: 505, - height: 101, + w: 505, + h: 101, x: Math.random() * 1920, y: Math.random() * 1080, // src: logo, diff --git a/examples/tests/stress-textures.ts b/examples/tests/stress-textures.ts index a9c9ecff..a6f46a82 100644 --- a/examples/tests/stress-textures.ts +++ b/examples/tests/stress-textures.ts @@ -42,8 +42,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const gridNode = renderer.createNode({ x: 0, y: 0, - width: screenWidth, - height: screenHeight, + w: screenWidth, + h: screenHeight, parent: testRoot, }); @@ -62,8 +62,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: gridNode, x, y, - width: imageSize, - height: imageSize, + w: imageSize, + h: imageSize, color: clr, }); }); diff --git a/examples/tests/test.ts b/examples/tests/test.ts index d2d352c0..9f0de9d2 100644 --- a/examples/tests/test.ts +++ b/examples/tests/test.ts @@ -28,8 +28,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const redRect = renderer.createNode({ x: 0, y: 0, - width: 100, - height: 100, + w: 100, + h: 100, color: 0xff0000ff, shader: renderer.createShader('Rounded', { radius: 10, @@ -40,8 +40,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const holder = renderer.createNode({ x: 150, y: 900, - width: 100, - height: 100, + w: 100, + h: 100, color: 0xff0000ff, parent: testRoot, zIndex: 0, @@ -52,8 +52,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const child = renderer.createNode({ x: 111, y: 0, - width: 111, - height: 111, + w: 111, + h: 111, color: 0xff0000ff, parent: holder, zIndex: 12, @@ -63,8 +63,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const greenRect = renderer.createNode({ x: 100, y: 0, - width: 100, - height: 100, + w: 100, + h: 100, color: 0x00ff00ff, parent: testRoot, }); @@ -72,12 +72,12 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const shaft = renderer.createNode({ x: 395, y: 0, - width: 210, - height: renderer.settings.appHeight, + w: 210, + h: renderer.settings.appHeight, color: 0xffffffff, texture: renderer.createTexture('NoiseTexture', { - width: 210, - height: renderer.settings.appHeight, + w: 210, + h: renderer.settings.appHeight, }), parent: testRoot, }); @@ -89,12 +89,12 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const relativePositioningPlatform = renderer.createNode({ x: 605, y: 230, - width: 1315, - height: 50, + w: 1315, + h: 50, color: 0xaabb66ff, texture: renderer.createTexture('NoiseTexture', { - width: 1315, - height: 50, + w: 1315, + h: 50, }), parent: testRoot, }); @@ -102,26 +102,26 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const relativePositioningChild = renderer.createNode({ x: 10, y: 10, - width: 1315 - 20, - height: 30, + w: 1315 - 20, + h: 30, color: 0xaaedffaa, parent: relativePositioningPlatform, texture: renderer.createTexture('NoiseTexture', { - width: 1315 - 20, - height: 30, + w: 1315 - 20, + h: 30, }), }); const relativePositioningGrandchild = renderer.createNode({ x: 10, y: 10, - width: 1315 - 20 - 20, - height: 10, + w: 1315 - 20 - 20, + h: 10, color: 0xff00ffff, parent: relativePositioningChild, texture: renderer.createTexture('NoiseTexture', { - width: 1315 - 20 - 20, - height: 50, + w: 1315 - 20 - 20, + h: 50, }), }); @@ -132,8 +132,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const rockoRect = renderer.createNode({ x: -181, y: renderer.settings.appHeight - 218, - width: 181, - height: 218, + w: 181, + h: 218, src: rocko, color: 0xffffffff, parent: testRoot, @@ -143,8 +143,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const elevatorRect = renderer.createNode({ x: 400, y: 0, - width: 200, - height: 268, + w: 200, + h: 268, src: elevator, color: 0x0000ffff, parent: testRoot, @@ -169,8 +169,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { setInterval(() => { shaft.texture = renderer.createTexture('NoiseTexture', { - width: 210, - height: renderer.settings.appHeight, + w: 210, + h: renderer.settings.appHeight, cacheId: Math.floor(Math.random() * 100000), }); }, 1000); @@ -203,7 +203,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { rockoAnimation = rockoRect .animate( { - y: elevatorRect.height - rockoRect.height, + y: elevatorRect.h - rockoRect.h, }, { duration: 1000, @@ -229,7 +229,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { await rockoAnimation.waitUntilStopped(); console.log('resetting rocko'); - rockoRect.x = -rockoRect.width; + rockoRect.x = -rockoRect.w; rockoRect.y = renderer.settings.appHeight - 218; rockoRect.flush(); } @@ -244,7 +244,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { elevatorAnimation = elevatorRect .animate( { - y: 1080 - elevatorRect.height, + y: 1080 - elevatorRect.h, }, { duration: 1000, @@ -256,7 +256,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { elevatorAnimation = elevatorRect .animate( { - // y: 1080 - elevatorRect.height, + // y: 1080 - elevatorRect.h, }, { duration: 1000, @@ -309,8 +309,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { blueRect = renderer.createNode({ x: 200, y: 0, - width: 100, - height: 100, + w: 100, + h: 100, color: 0x0000ffff, parent: testRoot, }); @@ -340,8 +340,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { texture: spriteMapTexture, x, y, - width: 100, - height: 150, + w: 100, + h: 150, }); }); @@ -402,10 +402,10 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { /// Text Demo const textNode = renderer.createTextNode({ - x: shaft.x + shaft.width, - y: relativePositioningPlatform.y + relativePositioningPlatform.height, + x: shaft.x + shaft.w, + y: relativePositioningPlatform.y + relativePositioningPlatform.h, maxWidth: 300, - height: 200, + h: 200, color: 0xffffffff, alpha: 1.0, text: 'Text Test: 0', @@ -421,7 +421,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { y: renderer.settings.appHeight, mount: 1, maxWidth: 300, - height: 1, + h: 1, color: 0xffffffff, alpha: 1.0, text: 'Rocko Test', diff --git a/examples/tests/text-align.ts b/examples/tests/text-align.ts index 2dd33386..f1bffea0 100644 --- a/examples/tests/text-align.ts +++ b/examples/tests/text-align.ts @@ -57,14 +57,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const fontFamily = 'Ubuntu'; const fontSize = 20; const yPos = 0; - testRoot.width = 500; - testRoot.height = 500; + testRoot.w = 500; + testRoot.h = 500; testRoot.clipping = true; testRoot.color = 0xffffffff; const canvasText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, fontSize, fontFamily, color: 0xff0000ff, @@ -73,7 +73,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { }); const sdfText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, fontSize, fontFamily, color: 0x0000ff77, @@ -81,8 +81,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { zIndex: 3, }); const indexInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, mount: 1, color: 0x000000ff, fontFamily: 'Ubuntu', diff --git a/examples/tests/text-alpha.ts b/examples/tests/text-alpha.ts index 7f4e0eb1..466bf942 100644 --- a/examples/tests/text-alpha.ts +++ b/examples/tests/text-alpha.ts @@ -48,8 +48,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, parent: testRoot, title: 'Text Alpha', }); @@ -191,8 +191,8 @@ function createContainedTextNode( containerProps: Partial, ) { const container = renderer.createNode({ - width: containerSize, - height: containerSize, + w: containerSize, + h: containerSize, color: 0x00ff00ff, ...containerProps, }); diff --git a/examples/tests/text-baseline.ts b/examples/tests/text-baseline.ts index 2373b824..5cf24416 100644 --- a/examples/tests/text-baseline.ts +++ b/examples/tests/text-baseline.ts @@ -32,8 +32,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text Baseline', }); @@ -80,8 +80,8 @@ function generateBaselineTest( // Get the position for the center of the container based on mount = 0 const position = { - x: 100 - dimensions.width / 2, - y: 100 - dimensions.height / 2, + x: 100 - dimensions.w / 2, + y: 100 - dimensions.h / 2, }; baselineNode.x = position.x; diff --git a/examples/tests/text-canvas-font-no-metrics.ts b/examples/tests/text-canvas-font-no-metrics.ts index 803ea162..1cafe410 100644 --- a/examples/tests/text-canvas-font-no-metrics.ts +++ b/examples/tests/text-canvas-font-no-metrics.ts @@ -50,13 +50,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; const fontSize = 100; const yPos = 0; - testRoot.width = 1000; - testRoot.height = 1000; + testRoot.w = 1000; + testRoot.h = 1000; testRoot.color = 0xffffffff; const canvasText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, text, fontSize, fontFamily, @@ -65,8 +65,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { parent: testRoot, }); const indexInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, mount: 1, color: 0x000000ff, fontFamily: 'Ubuntu', diff --git a/examples/tests/text-canvas.ts b/examples/tests/text-canvas.ts index 21424c5b..f117a88c 100644 --- a/examples/tests/text-canvas.ts +++ b/examples/tests/text-canvas.ts @@ -46,8 +46,8 @@ export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; // Set a smaller snapshot area - // testRoot.width = 200; - // testRoot.height = 200; + // testRoot.w = 200; + // testRoot.h = 200; // testRoot.color = 0xffffffff; const nodes: any[] = []; diff --git a/examples/tests/text-contain.ts b/examples/tests/text-contain.ts index 106864c0..b36c845f 100644 --- a/examples/tests/text-contain.ts +++ b/examples/tests/text-contain.ts @@ -23,15 +23,15 @@ export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; // Set a smaller snapshot area - testRoot.width = 400; - testRoot.height = 400; + testRoot.w = 400; + testRoot.h = 400; testRoot.color = 0xffffffff; const textSizeAfterLoadingBg = renderer.createNode({ x: 5, y: 5, - width: 0, - height: 0, + w: 0, + h: 0, color: 0x22ff227f, parent: testRoot, }); @@ -39,8 +39,8 @@ export default async function test(settings: ExampleSettings) { const textReportedSizeBg = renderer.createNode({ x: textSizeAfterLoadingBg.x, y: textSizeAfterLoadingBg.y, - width: 0, - height: 0, + w: 0, + h: 0, color: 0xff11117f, parent: testRoot, }); @@ -48,8 +48,8 @@ export default async function test(settings: ExampleSettings) { const text1 = renderer.createTextNode({ x: textSizeAfterLoadingBg.x, y: textSizeAfterLoadingBg.y, - width: 0, - height: 0, + w: 0, + h: 0, color: 0x000000ff, forceLoad: true, fontFamily: 'Ubuntu', @@ -65,8 +65,8 @@ Vivamus consectetur ex magna, non mollis.`, const text2 = renderer.createTextNode({ x: textSizeAfterLoadingBg.x, y: textSizeAfterLoadingBg.y, - width: 0, - height: 0, + w: 0, + h: 0, color: 0x000000ff, forceLoad: true, fontFamily: 'Ubuntu', @@ -81,8 +81,8 @@ Vivamus consectetur ex magna, non mollis.`, }); const indexInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, mount: 1, color: 0x000000ff, fontFamily: 'Ubuntu', @@ -92,8 +92,8 @@ Vivamus consectetur ex magna, non mollis.`, }); const textSizeAfterLoadInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height - 20, + x: testRoot.w, + y: testRoot.h - 20, mount: 1, color: 0x00ff00ff, fontFamily: 'Ubuntu', @@ -103,8 +103,8 @@ Vivamus consectetur ex magna, non mollis.`, }); const textReportedSizeInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height - 40, + x: testRoot.w, + y: testRoot.h - 40, mount: 1, color: 0xff0000ff, fontFamily: 'Ubuntu', @@ -114,8 +114,8 @@ Vivamus consectetur ex magna, non mollis.`, }); const textSetDimsInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height - 60, + x: testRoot.w, + y: testRoot.h - 60, mount: 1, color: 0x0000ffff, fontFamily: 'Ubuntu', @@ -125,8 +125,8 @@ Vivamus consectetur ex magna, non mollis.`, }); const header = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height - 80, + x: testRoot.w, + y: testRoot.h - 80, mount: 1, color: 0x000000ff, fontFamily: 'Ubuntu', @@ -164,7 +164,7 @@ Vivamus consectetur ex magna, non mollis.`, text1.alpha = 0; text2.alpha = 1; text2.maxWidth = 0; - text2.height = 0; + text2.h = 0; }, () => { // Canvas, contain width @@ -203,24 +203,24 @@ Vivamus consectetur ex magna, non mollis.`, header.text = makeHeader( targetText.textRendererOverride!, - targetText.width, - targetText.height, + targetText.w, + targetText.h, ); indexInfo.text = (i + 1).toString(); - textSetDimsInfo.text = `Set size: ${Math.round( - targetText.width, - )}x${Math.round(targetText.height)}`; + textSetDimsInfo.text = `Set size: ${Math.round(targetText.w)}x${Math.round( + targetText.h, + )}`; const dimensions = await waitForLoadedDimensions(targetText); - textSizeAfterLoadingBg.width = targetText.width; - textSizeAfterLoadingBg.height = targetText.height; + textSizeAfterLoadingBg.w = targetText.w; + textSizeAfterLoadingBg.h = targetText.h; textSizeAfterLoadInfo.text = `After 'loading' size: ${Math.round( - textSizeAfterLoadingBg.width, - )}x${Math.round(textSizeAfterLoadingBg.height)}`; - textReportedSizeBg.width = dimensions.width; - textReportedSizeBg.height = dimensions.height; + textSizeAfterLoadingBg.w, + )}x${Math.round(textSizeAfterLoadingBg.h)}`; + textReportedSizeBg.w = dimensions.w; + textReportedSizeBg.h = dimensions.h; textReportedSizeInfo.text = `'loading' event size: ${Math.round( - textReportedSizeBg.width, - )}x${Math.round(textReportedSizeBg.height)}`; + textReportedSizeBg.w, + )}x${Math.round(textReportedSizeBg.h)}`; return true; } await next(false, 0); diff --git a/examples/tests/text-dimensions.ts b/examples/tests/text-dimensions.ts index 60ee1765..6a15237b 100644 --- a/examples/tests/text-dimensions.ts +++ b/examples/tests/text-dimensions.ts @@ -42,15 +42,15 @@ export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; // Set a smaller snapshot area - testRoot.width = 200; - testRoot.height = 200; + testRoot.w = 200; + testRoot.h = 200; testRoot.color = 0xffffffff; const textBg = renderer.createNode({ x: 0, y: 0, - width: 0, - height: 0, + w: 0, + h: 0, color: 0x00ff00ff, parent: testRoot, }); @@ -58,8 +58,8 @@ export default async function test(settings: ExampleSettings) { const text1 = renderer.createTextNode({ x: 0, y: 0, - width: 0, - height: 0, + w: 0, + h: 0, color: 0x000000ff, forceLoad: true, fontFamily: 'Ubuntu', @@ -70,11 +70,11 @@ export default async function test(settings: ExampleSettings) { }); const indexInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, mount: 1, - width: 0, - height: 0, + w: 0, + h: 0, color: 0x000000ff, fontFamily: 'Ubuntu', fontSize: 20, @@ -132,8 +132,8 @@ export default async function test(settings: ExampleSettings) { mutations[i]?.(); indexInfo.text = (i + 1).toString(); const dimensions = await waitPromise; - textBg.width = dimensions.width; - textBg.height = dimensions.height; + textBg.w = dimensions.width; + textBg.h = dimensions.h; return true; } await next(false, 0); diff --git a/examples/tests/text-events.ts b/examples/tests/text-events.ts index 884aa03f..e92f50f3 100644 --- a/examples/tests/text-events.ts +++ b/examples/tests/text-events.ts @@ -64,9 +64,9 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { ); marqueeSdf.on('afterLayout', () => { - marqueeSdf.x = renderer.settings.appWidth / 2 - marqueeSdf.node.width / 2; + marqueeSdf.x = renderer.settings.appWidth / 2 - marqueeSdf.node.w / 2; marqueeSdf.y = - (renderer.settings.appHeight * 1) / 4 - marqueeSdf.node.height / 2; + (renderer.settings.appHeight * 1) / 4 - marqueeSdf.node.h / 2; }); const canvasLabel = renderer.createTextNode({ @@ -91,10 +91,9 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { ); marqueeCanvas.on('afterLayout', () => { - marqueeCanvas.x = - renderer.settings.appWidth / 2 - marqueeCanvas.node.width / 2; + marqueeCanvas.x = renderer.settings.appWidth / 2 - marqueeCanvas.node.w / 2; marqueeCanvas.y = - (renderer.settings.appHeight * 3) / 4 - marqueeCanvas.node.height / 2; + (renderer.settings.appHeight * 3) / 4 - marqueeCanvas.node.h / 2; }); const marqueeText = `The following is a test of the text loaded event... @@ -223,10 +222,10 @@ class BoxedText extends EventEmitter implements BoxedTextProps { }; private layout(textDimensions: Dimensions) { - this.node.width = textDimensions.width + BUTTON_PADDING * 2; - this.node.height = textDimensions.height + BUTTON_PADDING * 2; - this.textNode.x = this.node.width / 2 - textDimensions.width / 2; - this.textNode.y = this.node.height / 2 - textDimensions.height / 2; + this.node.w = textDimensions.width + BUTTON_PADDING * 2; + this.node.h = textDimensions.h + BUTTON_PADDING * 2; + this.textNode.x = this.node.w / 2 - textDimensions.width / 2; + this.textNode.y = this.node.h / 2 - textDimensions.h / 2; this.textNode.alpha = 1; this.emit('afterLayout'); } diff --git a/examples/tests/text-layout-consistency-modified-metrics.ts b/examples/tests/text-layout-consistency-modified-metrics.ts index bba57fea..e5dfa334 100644 --- a/examples/tests/text-layout-consistency-modified-metrics.ts +++ b/examples/tests/text-layout-consistency-modified-metrics.ts @@ -51,14 +51,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const text = getLoremIpsum(1200); const fontSize = 20; const yPos = 0; - testRoot.width = 500; - testRoot.height = 500; + testRoot.w = 500; + testRoot.h = 500; testRoot.clipping = true; testRoot.color = 0xffffffff; const canvasText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, text, fontSize, fontFamily, @@ -68,7 +68,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { }); const sdfText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, text, fontSize, fontFamily, @@ -77,11 +77,11 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { zIndex: 3, }); const indexInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, mount: 1, - width: 0, - height: 0, + w: 0, + h: 0, color: 0x000000ff, fontFamily: 'Ubuntu', fontSize: 20, diff --git a/examples/tests/text-layout-consistency.ts b/examples/tests/text-layout-consistency.ts index 0a276c3d..3c767f61 100644 --- a/examples/tests/text-layout-consistency.ts +++ b/examples/tests/text-layout-consistency.ts @@ -56,8 +56,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const text = getLoremIpsum(1200); const fontSize = 20; const yPos = 0; - testRoot.width = 500; - testRoot.height = 500; + testRoot.w = 500; + testRoot.h = 500; testRoot.clipping = true; testRoot.color = 0xffffffff; @@ -67,14 +67,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const background = renderer.createNode({ x: 0, y: 0, - width: testRoot.width, - height: testRoot.height, + w: testRoot.w, + h: testRoot.h, color: 0x00ff0020, parent: testRoot, }); const canvasText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, text, fontSize, fontFamily, @@ -84,7 +84,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { }); const sdfText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, text, fontSize, fontFamily, @@ -93,8 +93,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { zIndex: 3, }); const indexInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, mount: 1, color: 0x000000ff, fontFamily: 'Ubuntu', @@ -106,13 +106,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { let i = 0; const mutations = [ () => { - canvasText.width = sdfText.width = background.width = 250; + canvasText.w = sdfText.w = background.w = 250; }, () => { - canvasText.width = sdfText.width = background.width = 350; + canvasText.w = sdfText.w = background.w = 350; }, () => { - canvasText.width = sdfText.width = background.width = 500; + canvasText.w = sdfText.w = background.w = 500; }, ]; diff --git a/examples/tests/text-line-height.ts b/examples/tests/text-line-height.ts index 12f41035..537be497 100644 --- a/examples/tests/text-line-height.ts +++ b/examples/tests/text-line-height.ts @@ -31,8 +31,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text Line Height', }); @@ -77,7 +77,7 @@ function generateLineHeightTest( // // Get the position for the center of the container based on mount = 0 // const position = { - // y: 100 - dimensions.height / 2, + // y: 100 - dimensions.h / 2, // }; // baselineNode.y = position.y; diff --git a/examples/tests/text-max-lines.ts b/examples/tests/text-max-lines.ts index 2a61c4b2..396517c6 100644 --- a/examples/tests/text-max-lines.ts +++ b/examples/tests/text-max-lines.ts @@ -32,8 +32,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text Max Lines', }); diff --git a/examples/tests/text-mixed.ts b/examples/tests/text-mixed.ts index 49a17767..ee01cc6f 100644 --- a/examples/tests/text-mixed.ts +++ b/examples/tests/text-mixed.ts @@ -59,8 +59,8 @@ export default async function test(settings: ExampleSettings) { factory = renderer.createNode({ x, y: 150, - width: 300, - height: 200, + w: 300, + h: 200, parent: testRoot, texture: renderer.createTexture('ImageTexture', { src: textFactory, diff --git a/examples/tests/text-offscreen-move.ts b/examples/tests/text-offscreen-move.ts index 98efb838..0ff5a945 100644 --- a/examples/tests/text-offscreen-move.ts +++ b/examples/tests/text-offscreen-move.ts @@ -43,8 +43,8 @@ export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text Offscreen Move Tests', }); diff --git a/examples/tests/text-overflow-suffix.ts b/examples/tests/text-overflow-suffix.ts index 1961c40d..cc981597 100644 --- a/examples/tests/text-overflow-suffix.ts +++ b/examples/tests/text-overflow-suffix.ts @@ -32,8 +32,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text Overflow Suffix', }); diff --git a/examples/tests/text-rotation.ts b/examples/tests/text-rotation.ts index 6708e44b..8bc46e8b 100644 --- a/examples/tests/text-rotation.ts +++ b/examples/tests/text-rotation.ts @@ -31,8 +31,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text Rotation', }); diff --git a/examples/tests/text-scaling.ts b/examples/tests/text-scaling.ts index 2c359652..37111dbc 100644 --- a/examples/tests/text-scaling.ts +++ b/examples/tests/text-scaling.ts @@ -31,8 +31,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, parent: testRoot, title: 'Text Scaling', }); @@ -78,14 +78,14 @@ function generateScalingTest( }); const dimensions = { - width: 74, - height: 51, + w: 74, + h: 51, }; // Get the position for the center of the container based on mount = 0 const position = { - x: 100 - dimensions.width / 2, - y: 100 - dimensions.height / 2, + x: 100 - dimensions.w / 2, + y: 100 - dimensions.h / 2, }; baselineNode.x = position.x; @@ -118,7 +118,7 @@ function generateScalingTest( renderer.createTextNode({ ...nodeProps, ...position, - maxWidth: dimensions.width, + maxWidth: dimensions.w, pivot: 0.5, [scaleProp]: 2, }), @@ -126,8 +126,8 @@ function generateScalingTest( renderer.createTextNode({ ...nodeProps, ...position, - maxWidth: dimensions.width, - maxHeight: dimensions.height, + maxWidth: dimensions.w, + maxHeight: dimensions.h, pivot: 0.5, [scaleProp]: 2, }), @@ -150,8 +150,8 @@ function generateScalingTest( }); const dimensions = { - width: 74, - height: 51, + w: 74, + h: 51, }; return await constructTestRow({ renderer, rowNode }, [ @@ -177,15 +177,15 @@ function generateScalingTest( "pivot 0.5 ->\ncontain -> 'width'", renderer.createTextNode({ ...nodeProps, - maxWidth: dimensions.width, + maxWidth: dimensions.w, pivot: 0.5, [scaleProp]: 2, }), "pivot 0.5 ->\ncontain -> 'both'", renderer.createTextNode({ ...nodeProps, - maxWidth: dimensions.width, - maxHeight: dimensions.height, + maxWidth: dimensions.w, + maxHeight: dimensions.h, pivot: 0.5, [scaleProp]: 2, }), @@ -205,14 +205,14 @@ function generateScalingTest( ...nodeProps, }); const dimensions = { - width: 74, - height: 51, + w: 74, + h: 51, }; // Get the position for the center of the container based on mount = 0 const position = { - x: 100 - dimensions.width / 2, - y: 100 - dimensions.height / 2, + x: 100 - dimensions.w / 2, + y: 100 - dimensions.h / 2, }; baselineNode.x = position.x; @@ -245,7 +245,7 @@ function generateScalingTest( renderer.createTextNode({ ...nodeProps, ...position, - maxWidth: dimensions.width, + maxWidth: dimensions.w, pivot: 0.5, [scaleProp]: 2, }), @@ -253,8 +253,8 @@ function generateScalingTest( renderer.createTextNode({ ...nodeProps, ...position, - maxWidth: dimensions.width, - maxHeight: dimensions.height, + maxWidth: dimensions.w, + maxHeight: dimensions.h, pivot: 0.5, [scaleProp]: 2, }), diff --git a/examples/tests/text-ssdf.ts b/examples/tests/text-ssdf.ts index f9b5187a..9e6571f2 100644 --- a/examples/tests/text-ssdf.ts +++ b/examples/tests/text-ssdf.ts @@ -19,8 +19,8 @@ export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; // Set a smaller snapshot area - testRoot.width = 200; - testRoot.height = 200; + testRoot.w = 200; + testRoot.h = 200; testRoot.color = 0xffffffff; renderer.createTextNode({ diff --git a/examples/tests/text-vertical-align.ts b/examples/tests/text-vertical-align.ts index 4b8337f6..98a40caa 100644 --- a/examples/tests/text-vertical-align.ts +++ b/examples/tests/text-vertical-align.ts @@ -35,8 +35,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text Vertical Align', }); @@ -61,19 +61,19 @@ const CONTAINER_SIZE = 200; function getSquare(renderer: RendererMain, node: ITextNode) { const wrapper = renderer.createNode({ - width: CONTAINER_SIZE, - height: CONTAINER_SIZE, + w: CONTAINER_SIZE, + h: CONTAINER_SIZE, }); const line1 = renderer.createNode({ - width: CONTAINER_SIZE, - height: 1, + w: CONTAINER_SIZE, + h: 1, color: 0x00ff00ff, y: NODE_PROPS.lineHeight, }); line1.parent = wrapper; const line2 = renderer.createNode({ - width: CONTAINER_SIZE, - height: 1, + w: CONTAINER_SIZE, + h: 1, color: 0x00ff00ff, y: NODE_PROPS.lineHeight * 2, }); diff --git a/examples/tests/text-wordbreak.ts b/examples/tests/text-wordbreak.ts index ea817dab..b7566ac5 100644 --- a/examples/tests/text-wordbreak.ts +++ b/examples/tests/text-wordbreak.ts @@ -12,8 +12,8 @@ export async function automation(settings: ExampleSettings) { export default async function test(settings: ExampleSettings) { const { renderer } = settings; const pageContainer = new PageContainer(settings, { - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, title: 'Text wordBreak', }); diff --git a/examples/tests/text-zwsp.ts b/examples/tests/text-zwsp.ts index 3699b726..d36adfb8 100644 --- a/examples/tests/text-zwsp.ts +++ b/examples/tests/text-zwsp.ts @@ -46,14 +46,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const fontFamily = 'Ubuntu'; const fontSize = 40; const yPos = 0; - testRoot.width = 500; - testRoot.height = 500; + testRoot.w = 500; + testRoot.h = 500; testRoot.clipping = true; testRoot.color = 0xffffffff; const canvasText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, fontSize, fontFamily, color: 0xff0000ff, @@ -63,7 +63,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const sdfText = renderer.createTextNode({ y: yPos, - maxWidth: testRoot.width, + maxWidth: testRoot.w, fontSize, fontFamily, color: 0x0000ff77, @@ -71,8 +71,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { zIndex: 3, }); const indexInfo = renderer.createTextNode({ - x: testRoot.width, - y: testRoot.height, + x: testRoot.w, + y: testRoot.h, mount: 1, color: 0x000000ff, fontFamily: 'Ubuntu', diff --git a/examples/tests/text.ts b/examples/tests/text.ts index 0e36b90d..67d77ba3 100644 --- a/examples/tests/text.ts +++ b/examples/tests/text.ts @@ -19,8 +19,6 @@ import { type ITextNodeProps, - type TextRendererMap, - type TrFontFaceMap, type NodeLoadedEventHandler, } from '@lightningjs/renderer'; import { getLoremIpsum } from '../common/LoremIpsum.js'; @@ -41,9 +39,6 @@ const initialMutableProps: Partial = { fontFamily: FONT_FAMILY, fontSize: FONT_SIZE, color: 0x000000ff, - debug: { - sdfShaderDebug: false, - }, }; export const Colors = { @@ -214,14 +209,14 @@ export default async function ({ setMode(curMode + 1); changedState = true; } else if (e.code === 'ArrowUp') { - canvasTextNode.scrollY -= moveStep; - ssdfTextNode.scrollY -= moveStep; - msdfTextNode.scrollY -= moveStep; + // canvasTextNode.scrollY -= moveStep; + // ssdfTextNode.scrollY -= moveStep; + // msdfTextNode.scrollY -= moveStep; changedState = true; } else if (e.code === 'ArrowDown') { - canvasTextNode.scrollY += moveStep; - ssdfTextNode.scrollY += moveStep; - msdfTextNode.scrollY += moveStep; + // canvasTextNode.scrollY += moveStep; + // ssdfTextNode.scrollY += moveStep; + // msdfTextNode.scrollY += moveStep; changedState = true; } else if (e.code === 'KeyQ') { moveStep--; @@ -309,18 +304,18 @@ export default async function ({ changedState = true; } else if (e.code === 'Slash') { // Toggle SDF shader debug - canvasTextNode.debug = { - ...canvasTextNode.debug, - sdfShaderDebug: !canvasTextNode.debug.sdfShaderDebug, - }; - ssdfTextNode.debug = { - ...ssdfTextNode.debug, - sdfShaderDebug: !ssdfTextNode.debug.sdfShaderDebug, - }; - msdfTextNode.debug = { - ...msdfTextNode.debug, - sdfShaderDebug: !msdfTextNode.debug.sdfShaderDebug, - }; + // canvasTextNode.debug = { + // ...canvasTextNode.debug, + // sdfShaderDebug: !canvasTextNode.debug.sdfShaderDebug, + // }; + // ssdfTextNode.debug = { + // ...ssdfTextNode.debug, + // sdfShaderDebug: !ssdfTextNode.debug.sdfShaderDebug, + // }; + // msdfTextNode.debug = { + // ...msdfTextNode.debug, + // sdfShaderDebug: !msdfTextNode.debug.sdfShaderDebug, + // }; changedState = true; } @@ -337,7 +332,7 @@ export default async function ({ y: canvasTextNode.y, fontSize: canvasTextNode.fontSize, letterSpacing: canvasTextNode.letterSpacing, - scrollY: canvasTextNode.scrollY, + // scrollY: canvasTextNode.scrollY, // debug: canvasTextNode.debug, }, }); diff --git a/examples/tests/texture-alpha-switching.ts b/examples/tests/texture-alpha-switching.ts index c8e37567..175303d5 100644 --- a/examples/tests/texture-alpha-switching.ts +++ b/examples/tests/texture-alpha-switching.ts @@ -42,16 +42,16 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const childNode = renderer.createNode({ x: i * nodeWidth, // Adjust position by subtracting the gap y: 0, - width: nodeWidth, // Width of the green node - height: nodeHeight, // Slightly smaller height + w: nodeWidth, // Width of the green node + h: nodeHeight, // Slightly smaller height parent: rowNode, }); const imageNode = renderer.createNode({ x: 0, y: 0, - width: nodeWidth, - height: nodeHeight, + w: nodeWidth, + h: nodeHeight, parent: childNode, src: `https://picsum.photos/id/${id}/${nodeWidth}/${nodeHeight}`, // Random images }); @@ -85,8 +85,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { }); const img = renderer.createNode({ - width: 300, - height: 300, + w: 300, + h: 300, parent: holder2, src: 'https://images.unsplash.com/photo-1690360994204-3d10cc73a08d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80', alpha: 1, diff --git a/examples/tests/texture-autosize.ts b/examples/tests/texture-autosize.ts index 33ecac13..8145e00e 100644 --- a/examples/tests/texture-autosize.ts +++ b/examples/tests/texture-autosize.ts @@ -38,14 +38,14 @@ export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; // Set a smaller snapshot area - testRoot.width = 200; - testRoot.height = 250; + testRoot.w = 200; + testRoot.h = 250; testRoot.color = 0xffffffff; const image = renderer.createNode({ mount: 0.5, - x: testRoot.width / 2, - y: testRoot.height / 4, + x: testRoot.w / 2, + y: testRoot.h / 4, autosize: true, src: robotImg, parent: testRoot, @@ -53,14 +53,13 @@ export default async function test(settings: ExampleSettings) { const dimensions = await waitForLoadedDimensions(image); - const dimensionsMatch = - dimensions.width === image.width && dimensions.height === image.height; + const dimensionsMatch = dimensions.w === image.w && dimensions.h === image.h; renderer.createTextNode({ mountX: 0.5, mountY: 1, - x: testRoot.width / 2, - y: testRoot.height, + x: testRoot.w / 2, + y: testRoot.h, textAlign: 'center', text: dimensionsMatch ? 'Autosize\nSuccess' : 'Autosize\nFailure', color: dimensionsMatch ? 0x00ff00ff : 0xff0000ff, diff --git a/examples/tests/texture-base64.ts b/examples/tests/texture-base64.ts index 68670372..710429c0 100644 --- a/examples/tests/texture-base64.ts +++ b/examples/tests/texture-base64.ts @@ -33,8 +33,8 @@ export default async function test(settings: ExampleSettings) { const node = renderer.createNode({ x: 400, y: 200, - width: 228, - height: 228, + w: 228, + h: 228, parent: testRoot, src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAANHUlEQVR4nOzXjdcWdH3HcW69UcdUsnK4JWtNfDh3SDkyBfF0TM9Ec2SajJwPcE5LDQmtOSNTO5ajURZuuq2EwdZtDxsHXA0EVmFio81QGg3xgIZLGBJYaE+guf0Vn3M65/N6/QGf332u67rP+3wHL7/wqhFJd+76RnT/stPnRPePf35CdH/XTeui+0sueCa6v/srH4zu33LFwuj+2humRfcP2/bT6P6o18+L7o/76NTo/ozr3hDdv/WXn4zur7n/Q9H9J487NLp/SHQdgF9bAgBQSgAASgkAQCkBACglAAClBACglAAAlBIAgFICAFBKAABKCQBAKQEAKCUAAKUEAKCUAACUEgCAUgIAUEoAAEoJAEApAQAoJQAApQQAoJQAAJQSAIBSAgBQSgAASgkAQCkBACglAAClBACg1OCW0S9FHxg3tCy6v27WlOj+D097Lrp/246To/vjLz8Y3b/8qs3R/aPPfF90f9EJK6L7+07N/n7WXropuv/ak+ZE96eNfjG6//Kl347uH33vs9H9Y/dkv18XAEApAQAoJQAApQQAoJQAAJQSAIBSAgBQSgAASgkAQCkBACglAAClBACglAAAlBIAgFICAFBKAABKCQBAKQEAKCUAAKUEAKCUAACUEgCAUgIAUEoAAEoJAEApAQAoJQAApQQAoJQAAJQSAIBSAgBQauA3fjAh+sCOd58c3R9/5vui+88MPxTdP+Glg9H9t45aHt1ffdym6P55n/pWdP/p88+J7k/726Ho/uvueiy6f8Zp46P7P9y6Mbo/5bbjovvbNn4kuj970cvRfRcAQCkBACglAAClBACglAAAlBIAgFICAFBKAABKCQBAKQEAKCUAAKUEAKCUAACUEgCAUgIAUEoAAEoJAEApAQAoJQAApQQAoJQAAJQSAIBSAgBQSgAASgkAQCkBACglAAClBACglAAAlBIAgFICAFBqYMTMN0cfmPp4tjEzvjsrur9o6e7o/sH/fkN0/6wl66P7v/XdTdH9kY/eGd1/6pj90f2HZvxndP8dK2+J7p/xtiej+/M+9IXo/qS5S6P7570/+/nc9M6J0X0XAEApAQAoJQAApQQAoJQAAJQSAIBSAgBQSgAASgkAQCkBACglAAClBACglAAAlBIAgFICAFBK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', }); diff --git a/examples/tests/texture-cleanup-critical.ts b/examples/tests/texture-cleanup-critical.ts index d11c5a64..4823409c 100644 --- a/examples/tests/texture-cleanup-critical.ts +++ b/examples/tests/texture-cleanup-critical.ts @@ -41,8 +41,8 @@ export default async function ({ const screen = renderer.createNode({ x: 0, y: 0, - width: renderer.settings.appWidth, - height: renderer.settings.appHeight, + w: renderer.settings.appWidth, + h: renderer.settings.appHeight, parent: testRoot, color: 0xff00ffff, }); @@ -72,8 +72,8 @@ See docs/ManualRegressionTests.md for more information. // Create a new random texture every 10ms setInterval(() => { screen.texture = renderer.createTexture('NoiseTexture', { - width: 500, - height: 500, + w: 500, + h: 500, cacheId: Math.floor(Math.random() * 100000), }); screen.textureOptions.preload = true; diff --git a/examples/tests/texture-cleanup-idle.ts b/examples/tests/texture-cleanup-idle.ts index fe6b7a1c..8a766ba2 100644 --- a/examples/tests/texture-cleanup-idle.ts +++ b/examples/tests/texture-cleanup-idle.ts @@ -92,13 +92,13 @@ See docs/ManualRegressionTests.md for more information. const node = renderer.createNode({ x: i * nodeWidth, y: j * nodeHeight, - width: nodeWidth, - height: nodeHeight, + w: nodeWidth, + h: nodeHeight, parent: testRoot, color: randomColor(), texture: renderer.createTexture('NoiseTexture', { - width: nodeWidth, - height: nodeHeight, + w: nodeWidth, + h: nodeHeight, cacheId: Math.floor(Math.random() * 100000), }), textureOptions: { diff --git a/examples/tests/texture-factory.ts b/examples/tests/texture-factory.ts index 5fd0a8b5..3ba2572d 100644 --- a/examples/tests/texture-factory.ts +++ b/examples/tests/texture-factory.ts @@ -77,8 +77,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { color: 0xffffffff, x: 20, y: y + 80, - width: 300, - height: 200, + w: 300, + h: 200, parent: testRoot, texture: renderer.createTexture('ImageTexture', { src: factory, @@ -90,8 +90,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { color: 0xffffffff, x: 340, y: y + 80, - width: 300, - height: 200, + w: 300, + h: 200, parent: testRoot, texture: renderer.createTexture('ImageTexture', { src: factory, diff --git a/examples/tests/texture-memory-allocation.ts b/examples/tests/texture-memory-allocation.ts index 9b772dc6..3bff1a9e 100644 --- a/examples/tests/texture-memory-allocation.ts +++ b/examples/tests/texture-memory-allocation.ts @@ -63,8 +63,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const clippingNode = renderer.createNode({ x: 600, y: 200, - width: 1300, - height: 800, + w: 1300, + h: 800, parent: testRoot, color: 0xff0000ff, clipping: true, @@ -73,8 +73,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const containerNode = renderer.createNode({ x: 0, y: 0, - width: 1300, - height: 800, + w: 1300, + h: 800, parent: clippingNode, color: 0x000000ff, clipping: false, @@ -109,8 +109,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rowNode = renderer.createNode({ x: 0, y: y, - width: containerNode.width, - height: nodeHeight, + w: containerNode.w, + h: nodeHeight, parent: containerNode, color: 0x000000ff, clipping: true, @@ -126,8 +126,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const childNode = renderer.createNode({ x: x, // Adjust position by subtracting the gap y: 0, - width: nodeWidth, // Width of the green node - height: nodeHeight, // Slightly smaller height + w: nodeWidth, // Width of the green node + h: nodeHeight, // Slightly smaller height parent: rowNode, rtt: testMode === 'rtt', }); @@ -135,8 +135,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const imageNode = renderer.createNode({ x: 0, y: 0, - width: nodeWidth, - height: nodeHeight, + w: nodeWidth, + h: nodeHeight, parent: childNode, src: `https://picsum.photos/id/${id}/${nodeWidth}/${nodeHeight}`, // Random images }); @@ -200,14 +200,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { } // adjust container node size - containerNode.height = amountOfRows * (nodeHeight + gap); + containerNode.h = amountOfRows * (nodeHeight + gap); }; await spawnRows(20); window.addEventListener('keydown', async (e) => { if (e.key === 'ArrowDown') { - if (containerNode.y > clippingNode.height + 200) { + if (containerNode.y > clippingNode.h + 200) { return; } @@ -215,7 +215,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { } if (e.key === 'ArrowUp') { - if (containerNode.y < containerNode.height * -1 - 200) { + if (containerNode.y < containerNode.h * -1 - 200) { return; } diff --git a/examples/tests/texture-memory-rtt.ts b/examples/tests/texture-memory-rtt.ts index c407c3c3..0a9ed3f3 100644 --- a/examples/tests/texture-memory-rtt.ts +++ b/examples/tests/texture-memory-rtt.ts @@ -69,13 +69,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x, y: lastNoiseNodePosition + y, - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, parent: testRoot, color: randomColor(), texture: renderer.createTexture('NoiseTexture', { - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, cacheId: i + Math.random(), }), }); @@ -91,8 +91,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const clippingNode = renderer.createNode({ x: 600, y: 200, - width: 1300, - height: 800, + w: 1300, + h: 800, parent: testRoot, color: 0xff0000ff, clipping: true, @@ -101,8 +101,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const containerNode = renderer.createNode({ x: 0, y: 0, - width: 1300, - height: 800, + w: 1300, + h: 800, parent: clippingNode, // color: 0x000000ff, clipping: false, @@ -120,8 +120,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rowNode = renderer.createNode({ x: 0, y: y, - width: (nodeWidth + gap) * amount, - height: nodeHeight, + w: (nodeWidth + gap) * amount, + h: nodeHeight, parent: containerNode, // color: 0x000000ff, rtt: true, @@ -137,8 +137,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const childNode = renderer.createNode({ x: x, // Adjust position by subtracting the gap y: 0, - width: nodeWidth, - height: nodeHeight, + w: nodeWidth, + h: nodeHeight, parent: rowNode, rtt: false, }); @@ -146,8 +146,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const imageNode = renderer.createNode({ x: 0, y: 0, - width: nodeWidth, - height: nodeHeight, + w: nodeWidth, + h: nodeHeight, parent: childNode, src: `https://picsum.photos/id/${id}/${nodeWidth}/${nodeHeight}`, // Random images }); @@ -169,13 +169,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const focusNode = renderer.createNode({ x: 0, y: 0, - width: nodeWidth + gap + gap, - height: nodeHeight + gap, + w: nodeWidth + gap + gap, + h: nodeHeight + gap, parent: containerNode, alpha: 0.5, shader: renderer.createShader('Border', { color: 0xff00ffff, - width: 10, + w: 10, }), zIndex: 100, }); @@ -192,7 +192,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { } // adjust container node size - containerNode.height = amountOfRows * (nodeHeight + gap); + containerNode.h = amountOfRows * (nodeHeight + gap); window.addEventListener('keydown', async (e) => { if (e.key === 'ArrowDown') { diff --git a/examples/tests/texture-memory-spritemap.ts b/examples/tests/texture-memory-spritemap.ts index 03961f28..3e9eddc7 100644 --- a/examples/tests/texture-memory-spritemap.ts +++ b/examples/tests/texture-memory-spritemap.ts @@ -66,13 +66,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x, y: lastNoiseNodePosition + y, - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, parent: testRoot, color: randomColor(), texture: renderer.createTexture('NoiseTexture', { - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, cacheId: i + Math.random(), }), }); @@ -117,8 +117,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const clippingNode = renderer.createNode({ x: 600, y: 200, - width: 1300, - height: 800, + w: 1300, + h: 800, parent: testRoot, color: 0xff0000ff, clipping: true, @@ -127,8 +127,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const containerNode = renderer.createNode({ x: 0, y: 0, - width: 500 * (nodeSize + 10), - height: 800, + w: 500 * (nodeSize + 10), + h: 800, parent: clippingNode, color: 0x00000022, clipping: false, @@ -154,8 +154,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const rowNode = renderer.createNode({ x: 0, y: y, - width: containerNode.width, - height: nodeHeight, + w: containerNode.w, + h: nodeHeight, parent: containerNode, color: 0x000000ff, }); @@ -185,8 +185,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const childNode = renderer.createNode({ x: x, // Adjust position by subtracting the gap y: 0, - width: nodeWidth, // Width of the green node - height: nodeHeight, // Slightly smaller height + w: nodeWidth, // Width of the green node + h: nodeHeight, // Slightly smaller height parent: rowNode, color: color, texture: renderer.createTexture('SubTexture', { @@ -194,8 +194,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { texture: loadedSpritemaps[currentTextureIndex], x: subtextureX, y: subtextureY, - width: 100, - height: 150, + w: 100, + h: 150, }), }); @@ -210,8 +210,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { spawnRow(0, amountOfRows); // adjust container node size - containerNode.width = amountOfRows * (nodeWidth + gap); - console.log(`Container node width: ${containerNode.width}`); + containerNode.w = amountOfRows * (nodeWidth + gap); + console.log(`Container node w: ${containerNode.w}`); window.addEventListener('keydown', async (e) => { if (e.key === 'ArrowLeft') { diff --git a/examples/tests/texture-reload.ts b/examples/tests/texture-reload.ts index 67932e45..c372a0ba 100644 --- a/examples/tests/texture-reload.ts +++ b/examples/tests/texture-reload.ts @@ -88,13 +88,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const node = renderer.createNode({ x, y, - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, parent: testRoot, color: randomColor(), texture: renderer.createTexture('NoiseTexture', { - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, cacheId: i, }), }); @@ -212,14 +212,14 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { 'Noise Texture': () => renderer.createNode({ texture: renderer.createTexture('NoiseTexture', { - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, cacheId: Math.random(), }), x: nodeSpawnX, y: nodeSpawnY, - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, parent: testRoot, }), // No need to test color textures, they all sample from the same 1x1 pixel texture @@ -228,8 +228,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { // color: 0xff00ff, // Magenta // x: nodeSpawnX, // y: nodeSpawnY, - // width: nodeSize, - // height: nodeSize, + // w: nodeSize, + // h: nodeSize, // parent: testRoot, // }), SubTexture: () => @@ -238,21 +238,21 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { texture: image, x: 30, y: 0, - width: 50, - height: 50, + w: 50, + h: 50, }), x: nodeSpawnX, y: nodeSpawnY, - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, parent: testRoot, }), 'Image Texture': () => renderer.createNode({ x: nodeSpawnX, y: nodeSpawnY, - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, src: rockoPng, parent: testRoot, }), @@ -261,16 +261,16 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { rtt: true, x: nodeSpawnX, y: nodeSpawnY, - width: nodeSize, - height: nodeSize, + w: nodeSize, + h: nodeSize, parent: testRoot, }); const child = renderer.createNode({ x: 0, y: 0, - width: 100, - height: 100, + w: 100, + h: 100, color: 0xff0000ff, parent: rtt, }); @@ -278,8 +278,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const child2 = renderer.createNode({ x: 0, y: 20, - width: 100, - height: 100, + w: 100, + h: 100, src: rockoPng, parent: rtt, }); @@ -312,8 +312,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { testNodeInstance.x = 500; testNodeInstance.y = lastStatusOffSet + 128; - testNodeInstance.width = 128; - testNodeInstance.height = 128; + testNodeInstance.w = 128; + testNodeInstance.h = 128; renderer.createTextNode({ fontFamily: 'Ubuntu', diff --git a/examples/tests/texture-source.ts b/examples/tests/texture-source.ts index 6a820841..13313887 100644 --- a/examples/tests/texture-source.ts +++ b/examples/tests/texture-source.ts @@ -105,7 +105,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { }); let exception: string | false = false; - let dimensions: Dimensions = { width: 0, height: 0 }; + let dimensions: Dimensions = { w: 0, h: 0 }; try { dimensions = await waitForTxLoaded(imgNode); } catch (e: unknown) { @@ -113,16 +113,16 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { exception = (e as any)?.message ?? 'Unknown'; } - imgNode.width = dimensions.width; - imgNode.height = dimensions.height; + imgNode.w = dimensions.w; + imgNode.h = dimensions.h; - textNode.y = imgNode.y + imgNode.height; + textNode.y = imgNode.y + imgNode.h; let result = 'Fail'; let expectedPostfix = ''; if ( !exception && - imgNode.width === expectedWidth && - imgNode.height === expectedHeight + imgNode.w === expectedWidth && + imgNode.h === expectedHeight ) { textNode.color = 0x00ff00ff; result = 'Pass'; @@ -134,7 +134,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { expectedPostfix = ` (expected ${expectedWidth}x${expectedHeight})`; } } - textNode.text = `${curTest}. Loaded Event Test: ${result} (${imgNode.width}x${imgNode.height})${expectedPostfix}`; + textNode.text = `${curTest}. Loaded Event Test: ${result} (${imgNode.w}x${imgNode.h})${expectedPostfix}`; curY = textNode.y + FONT_SIZE; curTest++; } diff --git a/examples/tests/texture-spritemap.ts b/examples/tests/texture-spritemap.ts index 59efdd38..42045e39 100644 --- a/examples/tests/texture-spritemap.ts +++ b/examples/tests/texture-spritemap.ts @@ -56,15 +56,15 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { texture: spriteMapTexture, x: x, y: 0, - width: 100, - height: 150, + w: 100, + h: 150, }); renderer.createNode({ x: 20, y: y + 80, - width: 100, - height: 150, + w: 100, + h: 150, texture: character, parent: testRoot, }); diff --git a/examples/tests/texture-svg.ts b/examples/tests/texture-svg.ts index 8e2f4c4a..3109f134 100644 --- a/examples/tests/texture-svg.ts +++ b/examples/tests/texture-svg.ts @@ -72,8 +72,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: curX, y: curY, src: lightning, - height: 25, - width: 125, + h: 25, + w: 125, parent: testRoot, }); @@ -138,7 +138,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { }); let exception: string | false = false; - let dimensions: Dimensions = { width: 0, height: 0 }; + let dimensions: Dimensions = { w: 0, h: 0 }; try { dimensions = await waitForTxLoaded(imgNode); } catch (e: unknown) { @@ -146,16 +146,16 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { exception = (e as any)?.message ?? 'Unknown'; } - imgNode.width = dimensions.width; - imgNode.height = dimensions.height; + imgNode.w = dimensions.w; + imgNode.h = dimensions.height; - textNode.y = imgNode.y + imgNode.height; + textNode.y = imgNode.y + imgNode.h; let result = 'Fail'; let expectedPostfix = ''; if ( !exception && - imgNode.width === expectedWidth && - imgNode.height === expectedHeight + imgNode.w === expectedWidth && + imgNode.h === expectedHeight ) { textNode.color = 0x00ff00ff; result = 'Pass'; @@ -167,7 +167,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { expectedPostfix = ` (expected ${expectedWidth}x${expectedHeight})`; } } - textNode.text = `${curTest}. Loaded Event Test: ${result} (${imgNode.width}x${imgNode.height})${expectedPostfix}`; + textNode.text = `${curTest}. Loaded Event Test: ${result} (${imgNode.w}x${imgNode.h})${expectedPostfix}`; curY = textNode.y + FONT_SIZE; curTest++; } @@ -190,7 +190,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { exception = (e as any)?.message ?? 'Unknown'; } - textNode.y = imgNode.y + imgNode.height; + textNode.y = imgNode.y + imgNode.h; let result = ''; if (!exception && failureTestPass) { textNode.color = 0x00ff00ff; diff --git a/examples/tests/textures.ts b/examples/tests/textures.ts index 32bfc1e2..b5fe3346 100644 --- a/examples/tests/textures.ts +++ b/examples/tests/textures.ts @@ -104,8 +104,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { curY = BEGIN_Y; const noiseTexture = renderer.createTexture('NoiseTexture', { - width: 100, - height: 100, + w: 100, + h: 100, }); const noise = renderer.createNode({ @@ -139,8 +139,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { texture: spriteMapTexture, x, y, - width: 100, - height: 150, + w: 100, + h: 150, }); }); @@ -175,8 +175,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { texture: failureTexture, x, y, - width: 120, - height: 120, + w: 120, + h: 120, }); }); @@ -236,7 +236,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { }); let exception: string | false = false; - let dimensions: Dimensions = { width: 0, height: 0 }; + let dimensions: Dimensions = { w: 0, h: 0 }; try { dimensions = await waitForTxLoaded(imgNode); } catch (e: unknown) { @@ -244,16 +244,16 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { exception = (e as any)?.message ?? 'Unknown'; } - imgNode.width = dimensions.width; - imgNode.height = dimensions.height; + imgNode.w = dimensions.w; + imgNode.h = dimensions.h; - textNode.y = imgNode.y + imgNode.height; + textNode.y = imgNode.y + imgNode.h; let result = 'Fail'; let expectedPostfix = ''; if ( !exception && - imgNode.width === expectedWidth && - imgNode.height === expectedHeight + imgNode.w === expectedWidth && + imgNode.h === expectedHeight ) { textNode.color = 0x00ff00ff; result = 'Pass'; @@ -265,7 +265,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { expectedPostfix = ` (expected ${expectedWidth}x${expectedHeight})`; } } - textNode.text = `${curTest}. Loaded Event Test: ${result} (${imgNode.width}x${imgNode.height})${expectedPostfix}`; + textNode.text = `${curTest}. Loaded Event Test: ${result} (${imgNode.w}x${imgNode.h})${expectedPostfix}`; curY = textNode.y + FONT_SIZE; curTest++; } @@ -288,7 +288,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { exception = (e as any)?.message ?? 'Unknown'; } - textNode.y = imgNode.y + imgNode.height; + textNode.y = imgNode.y + imgNode.h; let result = ''; if (!exception && failureTestPass) { textNode.color = 0x00ff00ff; diff --git a/examples/tests/tx-compression.ts b/examples/tests/tx-compression.ts index 8031c850..0b8248ef 100644 --- a/examples/tests/tx-compression.ts +++ b/examples/tests/tx-compression.ts @@ -34,8 +34,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 100, y: 170, - width: 550, - height: 550, + w: 550, + h: 550, src: '../assets/test-etc1.pvr', parent: testRoot, }); @@ -54,8 +54,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 800, y: 170, - width: 400, - height: 400, + w: 400, + h: 400, src: '../assets/test-s3tc.ktx', parent: testRoot, }); diff --git a/examples/tests/viewport-boundsmargin.ts b/examples/tests/viewport-boundsmargin.ts index 5baf0c8c..12d7e471 100644 --- a/examples/tests/viewport-boundsmargin.ts +++ b/examples/tests/viewport-boundsmargin.ts @@ -61,8 +61,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const boundaryRect1 = renderer.createNode({ x: 1920 / 2 - (1920 * 0.75) / 2, y: 1080 / 2 - (1080 * 0.75) / 2, - width: 1440, - height: 810, + w: 1440, + h: 810, color: 0x000000ff, parent: testRoot, }); @@ -70,8 +70,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const boundaryRect2 = renderer.createNode({ x: 50, y: 50, - width: 1440 - 100, - height: 810 - 100, + w: 1440 - 100, + h: 810 - 100, color: 0x222222ff, parent: boundaryRect1, }); @@ -80,8 +80,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 500, y: 305, alpha: 1, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, pivot: 0, text: 'red', diff --git a/examples/tests/viewport-events-canvas.ts b/examples/tests/viewport-events-canvas.ts index e9b6858b..839fe35c 100644 --- a/examples/tests/viewport-events-canvas.ts +++ b/examples/tests/viewport-events-canvas.ts @@ -50,8 +50,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { const boundaryRect = renderer.createNode({ x: 1920 / 2 - (1920 * 0.75) / 2, y: 1080 / 2 - (1080 * 0.75) / 2, - width: 1440, - height: 810, + w: 1440, + h: 810, color: 0x000000ff, clipping: true, parent: testRoot, @@ -61,8 +61,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { x: 500, y: 305, alpha: 1, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, pivot: 0, text: 'red', @@ -93,8 +93,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { x: 1920 / 2 - 200, y: 100, alpha: 1, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, pivot: 0, text: 'blue', @@ -173,7 +173,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { .waitUntilStopped(); if (runAnimation) { - // eslint-disable-next-line @typescript-eslint/no-misused-promises + setTimeout(animate, 2000); } }; @@ -184,7 +184,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { runAnimation = !runAnimation; if (runAnimation) { - // eslint-disable-next-line @typescript-eslint/no-floating-promises + animate(); } } diff --git a/examples/tests/viewport-events.ts b/examples/tests/viewport-events.ts index 74f35316..0d46abfc 100644 --- a/examples/tests/viewport-events.ts +++ b/examples/tests/viewport-events.ts @@ -74,8 +74,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const boundaryRect = renderer.createNode({ x: 1920 / 2 - (1920 * 0.75) / 2, y: 1080 / 2 - (1080 * 0.75) / 2, - width: 1440, - height: 810, + w: 1440, + h: 810, color: 0x000000ff, clipping: true, parent: testRoot, @@ -86,8 +86,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 100, y: 305, alpha: 1, - width: 200, - height: 200, + w: 200, + h: 200, color: 0xff0000ff, pivot: 0, parent: boundaryRect, @@ -97,8 +97,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 20, y: 20, alpha: 1, - width: 20, - height: 20, + w: 20, + h: 20, color: 0xffff00ff, pivot: 0, parent: redRect, @@ -108,8 +108,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 50, y: 50, alpha: 1, - width: 20, - height: 20, + w: 20, + h: 20, color: 0xffff00ff, pivot: 0, parent: redRect, @@ -119,8 +119,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 80, y: 80, alpha: 1, - width: 20, - height: 20, + w: 20, + h: 20, color: 0xffff00ff, pivot: 0, parent: redRect, @@ -130,8 +130,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 110, y: 110, alpha: 1, - width: 20, - height: 20, + w: 20, + h: 20, color: 0xffff00ff, pivot: 0, parent: redRect, @@ -237,8 +237,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { x: 340, y: 100, alpha: 1, - width: 200, - height: 200, + w: 200, + h: 200, color: 0x0000ffff, pivot: 0, parent: testRoot, @@ -314,7 +314,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { .waitUntilStopped(); if (runAnimation) { - // eslint-disable-next-line @typescript-eslint/no-misused-promises + setTimeout(animate, 2000); } }; @@ -428,13 +428,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { // resize redrect, should be inbounds again due to size change case 16: - redRect.width = 400; + redRect.w = 400; break; // but parent redRect out of bounds, update yellow rect colors // move in bounds and color change should be reflected case 17: - redRect.width = 200; + redRect.w = 200; yellow1Rect.color = 0x0000ffff; yellow2Rect.color = 0x0000ffff; yellow3Rect.color = 0x0000ffff; @@ -467,7 +467,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { runAnimation = !runAnimation; if (runAnimation) { - // eslint-disable-next-line @typescript-eslint/no-floating-promises + animate(); } } @@ -503,8 +503,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { } if (e.key === 's') { - (redRect.width = Math.random() * 400), - (redRect.height = Math.random() * 400); + (redRect.w = Math.random() * 400), (redRect.h = Math.random() * 400); } if (e.key === 'c') { diff --git a/examples/tests/viewport-largebound.ts b/examples/tests/viewport-largebound.ts index 88cb492d..088533df 100644 --- a/examples/tests/viewport-largebound.ts +++ b/examples/tests/viewport-largebound.ts @@ -19,8 +19,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const containerNode = renderer.createNode({ x: -100, y: -100, - width: 2040, - height: 1280, + w: 2040, + h: 1280, color: 0xff0000ff, // Red parent: testRoot, clipping: true, @@ -42,8 +42,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const childNode = renderer.createNode({ x: i * childNodeWidth + i * 100, y: 300, - width: childNodeWidth, - height: 300, + w: childNodeWidth, + h: 300, color: 0x00ff00ff, // Green parent: containerNode, }); @@ -62,7 +62,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { 'Container bound: ' + JSON.stringify(containerNode.renderState) + '\n'; for (const node of containerNode.children) { - status += `${ (node.children[0] as CoreTextNode)?.text } bound: ${JSON.stringify(node.renderState)} \n`; diff --git a/examples/tests/viewport-memory.ts b/examples/tests/viewport-memory.ts index 372b819f..0acb9d73 100644 --- a/examples/tests/viewport-memory.ts +++ b/examples/tests/viewport-memory.ts @@ -16,8 +16,8 @@ export default async function test(settings: ExampleSettings) { const containerNode = renderer.createNode({ x: 200, // Offset from the left y: 200, - width: 2000, - height: 2000, + w: 2000, + h: 2000, color: 0x000000ff, // Black parent: testRoot, clipping: true, @@ -26,8 +26,8 @@ export default async function test(settings: ExampleSettings) { const redCircle = renderer.createNode({ x: 0, y: 0, - width: 100, - height: 100, + w: 100, + h: 100, color: 0xff0000ff, shader: renderer.createShader('RoundedRectangle', { radius: 50, @@ -38,8 +38,8 @@ export default async function test(settings: ExampleSettings) { const blueCircle = renderer.createNode({ x: 150, y: 0, - width: 100, - height: 100, + w: 100, + h: 100, color: 0x0000ffff, shader: renderer.createShader('RoundedRectangle', { radius: 50, @@ -50,8 +50,8 @@ export default async function test(settings: ExampleSettings) { const yellowCircle = renderer.createNode({ x: 300, y: 0, - width: 100, - height: 100, + w: 100, + h: 100, color: 0xffff00ff, shader: renderer.createShader('RoundedRectangle', { radius: 50, @@ -83,8 +83,8 @@ export default async function test(settings: ExampleSettings) { const borderNode = renderer.createNode({ x: totalWidth - randomWidth - gap, // Adjust position by subtracting the gap y: rowIndex * 100, - width: randomWidth + gap, // Width of the black rectangle to include the gap - height: 100, // Height of the border + w: randomWidth + gap, // Width of the black rectangle to include the gap + h: 100, // Height of the border color: 0x000000ff, // Black parent: containerNode, clipping: true, @@ -94,8 +94,8 @@ export default async function test(settings: ExampleSettings) { const childNode = renderer.createNode({ x: 5, // Offset for the green node to mimic a border y: 5, // Offset for the green node to mimic a border - width: randomWidth, // Width of the green node - height: 90, // Slightly smaller height + w: randomWidth, // Width of the green node + h: 90, // Slightly smaller height color: 0x00ff00ff, // Green parent: borderNode, shader: renderer.createShader('RoundedRectangle', { diff --git a/examples/tests/viewport-strictbounds.ts b/examples/tests/viewport-strictbounds.ts index 1491cbcb..f124dd83 100644 --- a/examples/tests/viewport-strictbounds.ts +++ b/examples/tests/viewport-strictbounds.ts @@ -17,8 +17,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const containerNode = renderer.createNode({ x: 10, y: 100, - width: 1000, - height: 600, + w: 1000, + h: 600, color: 0xff0000ff, // Red parent: testRoot, strictBounds: false, @@ -40,8 +40,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const childNode = renderer.createNode({ x: i * childNodeWidth + i * 100, y: 100, - width: childNodeWidth, - height: 300, + w: childNodeWidth, + h: 300, color: 0x00ff00ff, // Green parent: containerNode, }); diff --git a/examples/tests/width-height-shortcuts.ts b/examples/tests/width-height-shortcuts.ts index b610318e..33a63249 100644 --- a/examples/tests/width-height-shortcuts.ts +++ b/examples/tests/width-height-shortcuts.ts @@ -35,8 +35,8 @@ export default async function test(settings: ExampleSettings) { const { renderer, testRoot } = settings; // Set test area - testRoot.width = 600; - testRoot.height = 270; + testRoot.w = 600; + testRoot.h = 270; testRoot.color = 0x222222ff; // Create header text @@ -54,8 +54,8 @@ export default async function test(settings: ExampleSettings) { const nodeWithLongProps = renderer.createNode({ x: 50, y: 80, - width: 120, - height: 80, + w: 120, + h: 80, color: 0xff0000ff, parent: testRoot, }); @@ -74,8 +74,8 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ x: 350, y: 80, - width: 80, - height: 120, + w: 80, + h: 120, color: 0x0080ffff, parent: testRoot, }); @@ -96,7 +96,7 @@ export default async function test(settings: ExampleSettings) { color: 0xffffffff, fontFamily: 'Ubuntu', fontSize: 14, - text: 'width: 120\nheight: 80', + text: 'w: 120\nheight: 80', parent: testRoot, }); @@ -116,7 +116,7 @@ export default async function test(settings: ExampleSettings) { color: 0xffffffff, fontFamily: 'Ubuntu', fontSize: 14, - text: 'width: 80\nheight: 120', + text: 'w: 80\nheight: 120', parent: testRoot, }); diff --git a/examples/tests/zIndex.ts b/examples/tests/zIndex.ts index 72aefb6c..bc59d404 100644 --- a/examples/tests/zIndex.ts +++ b/examples/tests/zIndex.ts @@ -61,8 +61,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 200 + i * 20, y: 200 + i * 20, - width: 200, - height: 200, + w: 200, + h: 200, // eslint-disable-next-line @typescript-eslint/ban-ts-comment //@ts-ignore color: Colors[color], @@ -78,8 +78,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const parentRect = renderer.createNode({ x: 800, y: 200, - width: 600, - height: 600, + w: 600, + h: 600, color: Colors.Gray, // shader: renderer.createShader('RoundedRectangle', { // radius: 40, @@ -92,8 +92,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const childRectWhite = renderer.createNode({ x: 100, y: 100, - width: 200, - height: 200, + w: 200, + h: 200, color: Colors.White, // shader: renderer.createShader('RoundedRectangle', { // radius: 40, @@ -105,8 +105,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const childRectRed = renderer.createNode({ x: 120, y: 120, - width: 200, - height: 200, + w: 200, + h: 200, color: Colors.Red, // shader: renderer.createShader('RoundedRectangle', { // radius: 40, @@ -133,8 +133,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const blockingRect = renderer.createNode({ x: 750, y: 300, - width: 400, - height: 100, + w: 400, + h: 100, color: Colors.Green, // shader: renderer.createShader('RoundedRectangle', { // radius: 40, @@ -161,8 +161,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 0, y: 0, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, @@ -177,8 +177,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 0, y: 900, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, @@ -193,8 +193,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 1000, y: 900, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, @@ -209,8 +209,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 1000, y: 0, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, @@ -225,8 +225,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 1000, y: 0, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, @@ -241,8 +241,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 200, y: 0, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, @@ -255,8 +255,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 200, y: 900, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, @@ -273,8 +273,8 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { renderer.createNode({ x: 500, y: 900, - width: 10, - height: 10, + w: 10, + h: 10, color: 0x00ffffff, shader: renderer.createShader('RoundedRectangle', { radius: 2, diff --git a/src/common/CommonTypes.ts b/src/common/CommonTypes.ts index 33671c49..65940171 100644 --- a/src/common/CommonTypes.ts +++ b/src/common/CommonTypes.ts @@ -31,8 +31,8 @@ import type { CoreNodeRenderState } from '../core/CoreNode.js'; * Represents a width and height. */ export interface Dimensions { - width: number; - height: number; + w: number; + h: number; } /** diff --git a/src/core/CoreNode.test.ts b/src/core/CoreNode.test.ts index 4ba351b8..5d3f9206 100644 --- a/src/core/CoreNode.test.ts +++ b/src/core/CoreNode.test.ts @@ -40,7 +40,7 @@ describe('set color()', () => { colorTl: 0, colorTop: 0, colorTr: 0, - height: 0, + h: 0, mount: 0, mountX: 0, mountY: 0, @@ -57,7 +57,7 @@ describe('set color()', () => { src: '', texture: null, textureOptions: {} as TextureOptions, - width: 0, + w: 0, x: 0, y: 0, zIndex: 0, @@ -125,8 +125,8 @@ describe('set color()', () => { node.alpha = 1; node.x = 0; node.y = 0; - node.width = 100; - node.height = 100; + node.w = 100; + node.h = 100; node.color = 0xffffffff; node.update(0, clippingRect); @@ -138,8 +138,8 @@ describe('set color()', () => { node.alpha = 1; node.x = 0; node.y = 0; - node.width = 100; - node.height = 100; + node.w = 100; + node.h = 100; node.texture = mock({ state: 'initial', }); @@ -159,8 +159,8 @@ describe('set color()', () => { node.alpha = 0; node.x = 0; node.y = 0; - node.width = 100; - node.height = 100; + node.w = 100; + node.h = 100; node.texture = mock({ state: 'loaded', }); @@ -174,8 +174,8 @@ describe('set color()', () => { node.alpha = 1; node.x = 300; node.y = 300; - node.width = 100; - node.height = 100; + node.w = 100; + node.h = 100; node.texture = mock({ state: 'loaded', }); @@ -189,8 +189,8 @@ describe('set color()', () => { node.alpha = 1; node.x = 0; node.y = 0; - node.width = 100; - node.height = 100; + node.w = 100; + node.h = 100; node.texture = mock({ state: 'freed', }); diff --git a/src/core/CoreNode.ts b/src/core/CoreNode.ts index 8587b4d5..79585b63 100644 --- a/src/core/CoreNode.ts +++ b/src/core/CoreNode.ts @@ -235,22 +235,14 @@ export interface CoreNodeProps { * * @default `0` */ - width: number; + w: number; /** * The height of the Node. * @warning This will be deprecated in favor of `w` and `h` properties in the future. * * @default `0` */ - height: number; - /** - * Short width of the Node. - */ - w?: number; - /** - * Short height of the Node. - */ - h?: number; + h: number; /** * The alpha opacity of the Node. * @@ -778,8 +770,8 @@ export class CoreNode extends EventEmitter { // Fast-path assign only known keys p.x = props.x; p.y = props.y; - p.width = props.width; - p.height = props.height; + p.w = props.w; + p.h = props.h; p.alpha = props.alpha; p.autosize = props.autosize; p.clipping = props.clipping; @@ -898,15 +890,12 @@ export class CoreNode extends EventEmitter { texture.setRenderableOwner(this, false); } - autosizeNode(dimensions: Dimensions) { - if (this.autosize) { - this.width = dimensions.width; - this.height = dimensions.height; + protected onTextureLoaded: TextureLoadedEventHandler = (_, dimensions) => { + if (this.autosize === true) { + this.w = dimensions.w; + this.h = dimensions.h; } - } - protected onTextureLoaded: TextureLoadedEventHandler = (_, dimensions) => { - this.autosizeNode(dimensions); this.setUpdateType(UpdateType.IsRenderable); // Texture was loaded. In case the RAF loop has already stopped, we request @@ -919,7 +908,7 @@ export class CoreNode extends EventEmitter { } // ignore 1x1 pixel textures - if (dimensions.width > 1 && dimensions.height > 1) { + if (dimensions.w > 1 && dimensions.h > 1) { this.emit('loaded', { type: 'texture', dimensions, @@ -989,13 +978,13 @@ export class CoreNode extends EventEmitter { updateLocalTransform() { const p = this.props; - const { x, y, width, height } = p; - const mountTranslateX = p.mountX * width; - const mountTranslateY = p.mountY * height; + const { x, y, w, h } = p; + const mountTranslateX = p.mountX * w; + const mountTranslateY = p.mountY * h; if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) { - const pivotTranslateX = p.pivotX * width; - const pivotTranslateY = p.pivotY * height; + const pivotTranslateX = p.pivotX * w; + const pivotTranslateY = p.pivotY * h; this.localTransform = Matrix3d.translate( x - mountTranslateX + pivotTranslateX, @@ -1024,25 +1013,25 @@ export class CoreNode extends EventEmitter { let resizeModeScaleY = 1; let extraX = 0; let extraY = 0; - const { width: tw, height: th } = texture.dimensions; + const { w: tw, h: th } = texture.dimensions; const txAspectRatio = tw / th; - const nodeAspectRatio = width / height; + const nodeAspectRatio = w / h; if (txAspectRatio > nodeAspectRatio) { // Texture is wider than node // Center the node vertically (shift down by extraY) // Scale the node vertically to maintain original aspect ratio - const scaleX = width / tw; + const scaleX = w / tw; const scaledTxHeight = th * scaleX; - extraY = (height - scaledTxHeight) / 2; - resizeModeScaleY = scaledTxHeight / height; + extraY = (h - scaledTxHeight) / 2; + resizeModeScaleY = scaledTxHeight / h; } else { // Texture is taller than node (or equal) // Center the node horizontally (shift right by extraX) // Scale the node horizontally to maintain original aspect ratio - const scaleY = height / th; + const scaleY = h / th; const scaledTxWidth = tw * scaleY; - extraX = (width - scaledTxWidth) / 2; - resizeModeScaleX = scaledTxWidth / width; + extraX = (w - scaledTxWidth) / 2; + resizeModeScaleX = scaledTxWidth / w; } // Apply the extra translation and scale to the local transform @@ -1363,10 +1352,7 @@ export class CoreNode extends EventEmitter { } // check if we dont have dimensions, take our parent's render state - if ( - this.parent !== null && - (this.props.width === 0 || this.props.height === 0) - ) { + if (this.parent !== null && (this.props.w === 0 || this.props.h === 0)) { return this.parent.renderState; } @@ -1437,20 +1423,14 @@ export class CoreNode extends EventEmitter { } // clipping is enabled and we are in bounds create our own bounds - const { x, y, width, height } = this.props; + const { x, y, w, h } = this.props; // Pick the global transform if available, otherwise use the local transform // global transform is only available if the node in an RTT chain const { tx, ty } = this.sceneGlobalTransform || this.globalTransform || {}; const _x = tx ?? x; const _y = ty ?? y; - this.strictBound = createBound( - _x, - _y, - _x + width, - _y + height, - this.strictBound, - ); + this.strictBound = createBound(_x, _y, _x + w, _y + h, this.strictBound); this.preloadBound = createPreloadBounds( this.strictBound, @@ -1499,7 +1479,7 @@ export class CoreNode extends EventEmitter { // check shader (this.props.shader !== null || this.hasColorProps === true) && // check dimensions - (this.props.width !== 0 && this.props.height !== 0) === true + (this.props.w !== 0 && this.props.h !== 0) === true ) { // This mean we have dimensions and a color set, so we can render a ColorTexture if ( @@ -1537,7 +1517,7 @@ export class CoreNode extends EventEmitter { } calculateRenderCoords() { - const { width, height } = this; + const { w, h } = this.props; const g = this.globalTransform!; const tx = g.tx, @@ -1548,9 +1528,9 @@ export class CoreNode extends EventEmitter { td = g.td; if (tb === 0 && tc === 0) { const minX = tx; - const maxX = tx + width * ta; + const maxX = tx + w * ta; const minY = ty; - const maxY = ty + height * td; + const maxY = ty + h * td; this.renderCoords = RenderCoords.translate( //top-left minX, @@ -1572,14 +1552,14 @@ export class CoreNode extends EventEmitter { tx, ty, //top-right - tx + width * ta, - ty + width * tc, + tx + w * ta, + ty + w * tc, //bottom-right - tx + width * ta + height * tb, - ty + width * tc + height * td, + tx + w * ta + h * tb, + ty + w * tc + h * td, //bottom-left - tx + height * tb, - ty + height * td, + tx + h * tb, + ty + h * td, this.renderCoords, ); } @@ -1597,9 +1577,9 @@ export class CoreNode extends EventEmitter { } = this.sceneGlobalTransform; if (stb === 0 && stc === 0) { const minX = stx; - const maxX = stx + width * sta; + const maxX = stx + w * sta; const minY = sty; - const maxY = sty + height * std; + const maxY = sty + h * std; this.sceneRenderCoords = RenderCoords.translate( //top-left minX, @@ -1621,14 +1601,14 @@ export class CoreNode extends EventEmitter { stx, sty, //top-right - stx + width * sta, - sty + width * stc, + stx + w * sta, + sty + w * stc, //bottom-right - stx + width * sta + height * stb, - sty + width * stc + height * std, + stx + w * sta + h * stb, + sty + w * stc + h * std, //bottom-left - stx + height * stb, - sty + height * std, + stx + h * stb, + sty + h * std, this.sceneRenderCoords, ); } @@ -1650,8 +1630,8 @@ export class CoreNode extends EventEmitter { if (clipping === true && isRotated === false) { clippingRect.x = gt!.tx; clippingRect.y = gt!.ty; - clippingRect.width = this.width * gt!.ta; - clippingRect.height = this.height * gt!.td; + clippingRect.width = this.props.w * gt!.ta; + clippingRect.height = this.props.h * gt!.td; clippingRect.valid = true; } else { clippingRect.valid = false; @@ -1728,8 +1708,8 @@ export class CoreNode extends EventEmitter { const texture = p.texture || this.stage.defaultTexture; renderer.addQuad({ - width: p.width, - height: p.height, + width: p.w, + height: p.h, colorTl: this.premultipliedColorTl, colorTr: this.premultipliedColorTr, colorBl: this.premultipliedColorBl, @@ -1783,7 +1763,7 @@ export class CoreNode extends EventEmitter { get absX(): number { return ( this.props.x + - -this.props.width * this.props.mountX + + -this.props.w * this.props.mountX + (this.props.parent?.absX || this.props.parent?.globalTransform?.tx || 0) ); } @@ -1791,7 +1771,7 @@ export class CoreNode extends EventEmitter { get absY(): number { return ( this.props.y + - -this.props.height * this.props.mountY + + -this.props.h * this.props.mountY + (this.props.parent?.absY ?? 0) ); } @@ -1808,39 +1788,17 @@ export class CoreNode extends EventEmitter { } get w(): number { - return this.props.width; + return this.props.w; } set w(value: number) { - if (this.props.width !== value) { + if (this.props.w !== value) { this.textureCoords = undefined; - this.props.width = value; + this.props.w = value; this.setUpdateType(UpdateType.Local); if (this.props.rtt === true) { - this.framebufferDimensions!.width = value; - this.texture = this.stage.txManager.createTexture( - 'RenderTexture', - this.framebufferDimensions!, - ); - - this.setUpdateType(UpdateType.RenderTexture); - } - } - } - - get width(): number { - return this.props.width; - } - - set width(value: number) { - if (this.props.width !== value) { - this.textureCoords = undefined; - this.props.width = value; - this.setUpdateType(UpdateType.Local); - - if (this.props.rtt === true) { - this.framebufferDimensions!.width = value; + this.framebufferDimensions!.w = value; this.texture = this.stage.txManager.createTexture( 'RenderTexture', this.framebufferDimensions!, @@ -1852,39 +1810,17 @@ export class CoreNode extends EventEmitter { } get h(): number { - return this.props.height; + return this.props.h; } set h(value: number) { - if (this.props.height !== value) { - this.textureCoords = undefined; - this.props.height = value; - this.setUpdateType(UpdateType.Local); - - if (this.props.rtt === true) { - this.framebufferDimensions!.height = value; - this.texture = this.stage.txManager.createTexture( - 'RenderTexture', - this.framebufferDimensions!, - ); - - this.setUpdateType(UpdateType.RenderTexture); - } - } - } - - get height(): number { - return this.props.height; - } - - set height(value: number) { - if (this.props.height !== value) { + if (this.props.h !== value) { this.textureCoords = undefined; - this.props.height = value; + this.props.h = value; this.setUpdateType(UpdateType.Local); if (this.props.rtt === true) { - this.framebufferDimensions!.height = value; + this.framebufferDimensions!.h = value; this.texture = this.stage.txManager.createTexture( 'RenderTexture', this.framebufferDimensions!, @@ -2284,8 +2220,8 @@ export class CoreNode extends EventEmitter { } private initRenderTexture() { this.framebufferDimensions = { - width: this.width, - height: this.height, + w: this.props.w, + h: this.props.h, }; this.texture = this.stage.txManager.createTexture( 'RenderTexture', @@ -2381,8 +2317,8 @@ export class CoreNode extends EventEmitter { this.texture = this.stage.txManager.createTexture('ImageTexture', { src: imageUrl, - width: this.props.width, - height: this.props.height, + w: this.props.w, + h: this.props.h, type: this.props.imageType, sx: this.props.srcX, sy: this.props.srcY, diff --git a/src/core/CoreTextNode.ts b/src/core/CoreTextNode.ts index 90534bbf..9dfb63fe 100644 --- a/src/core/CoreTextNode.ts +++ b/src/core/CoreTextNode.ts @@ -94,15 +94,15 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps { } // ignore 1x1 pixel textures - if (dimensions.width > 1 && dimensions.height > 1) { + if (dimensions.w > 1 && dimensions.h > 1) { this.emit('loaded', { type: 'texture', dimensions, } satisfies NodeTextureLoadedPayload); } - this.width = this._renderInfo.width; - this.height = this._renderInfo.height; + this.w = this._renderInfo.width; + this.h = this._renderInfo.height; // Texture was loaded. In case the RAF loop has already stopped, we request // a render to ensure the texture is rendered. @@ -197,8 +197,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps { if (textRendererType === 'sdf') { this._cachedLayout = result.layout || null; this.setRenderable(true); - this.props.width = width; - this.props.height = height; + this.props.w = width; + this.props.h = height; this.setUpdateType(UpdateType.Local); } @@ -206,8 +206,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps { this.emit('loaded', { type: 'text', dimensions: { - width: width, - height: height, + w: width, + h: height, }, } satisfies NodeTextLoadedPayload); } @@ -250,8 +250,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps { worldAlpha: this.worldAlpha, globalTransform: this.globalTransform!.getFloatArr(), clippingRect: this.clippingRect, - width: this.props.width, - height: this.props.height, + width: this.props.w, + height: this.props.h, parentHasRenderTexture: this.parentHasRenderTexture, framebufferDimensions: this.parentHasRenderTexture === true diff --git a/src/core/Stage.ts b/src/core/Stage.ts index 58e11300..0ceda96e 100644 --- a/src/core/Stage.ts +++ b/src/core/Stage.ts @@ -321,8 +321,8 @@ export class Stage { const rootNode = new CoreNode(this, { x: 0, y: 0, - width: appWidth, - height: appHeight, + w: appWidth, + h: appHeight, alpha: 1, autosize: false, boundsMargin: null, @@ -800,9 +800,6 @@ export class Stage { const mount = props.mount ?? 0; const pivot = props.pivot ?? 0.5; - const width = props.w ?? props.width ?? 0; - const height = props.h ?? props.height ?? 0; - const data = this.options.inspector ? santizeCustomDataMap(props.data ?? {}) : {}; @@ -810,8 +807,8 @@ export class Stage { return { x: props.x ?? 0, y: props.y ?? 0, - width, - height, + w: props.w ?? 0, + h: props.h ?? 0, alpha: props.alpha ?? 1, autosize: props.autosize ?? false, boundsMargin: props.boundsMargin ?? null, diff --git a/src/core/lib/textureCompression.ts b/src/core/lib/textureCompression.ts index 0b1951b6..213d83d9 100644 --- a/src/core/lib/textureCompression.ts +++ b/src/core/lib/textureCompression.ts @@ -85,8 +85,8 @@ const loadKTXData = async (buffer: ArrayBuffer): Promise => { data: { glInternalFormat: data.glInternalFormat, mipmaps, - width: data.pixelWidth || 0, - height: data.pixelHeight || 0, + w: data.pixelWidth || 0, + h: data.pixelHeight || 0, type: 'ktx', }, premultiplyAlpha: false, @@ -143,8 +143,8 @@ const loadPVRData = async (buffer: ArrayBuffer): Promise => { data: { glInternalFormat: pvrFormatEtc1, mipmaps: mipmaps, - width: data.pixelWidth || 0, - height: data.pixelHeight || 0, + w: data.pixelWidth || 0, + h: data.pixelHeight || 0, type: 'pvr', }, premultiplyAlpha: false, diff --git a/src/core/renderers/CoreShaderNode.ts b/src/core/renderers/CoreShaderNode.ts index f86d48a8..9a581237 100644 --- a/src/core/renderers/CoreShaderNode.ts +++ b/src/core/renderers/CoreShaderNode.ts @@ -155,8 +155,8 @@ export class CoreShaderNode> { for (const key in this.resolvedProps) { valueKey += `${key}:${this.resolvedProps[key]!};`; } - valueKey += `node-width:${this.node!.width}`; - valueKey += `node-height:${this.node!.height}`; + valueKey += `node-width:${this.node!.w}`; + valueKey += `node-height:${this.node!.h}`; return valueKey; } diff --git a/src/core/renderers/canvas/CanvasRenderer.ts b/src/core/renderers/canvas/CanvasRenderer.ts index 380569fe..1f1650f5 100644 --- a/src/core/renderers/canvas/CanvasRenderer.ts +++ b/src/core/renderers/canvas/CanvasRenderer.ts @@ -168,8 +168,8 @@ export class CanvasRenderer extends CoreRenderer { image, (quad.texture as SubTexture).props.x, (quad.texture as SubTexture).props.y, - (quad.texture as SubTexture).props.width, - (quad.texture as SubTexture).props.height, + (quad.texture as SubTexture).props.w, + (quad.texture as SubTexture).props.h, quad.tx, quad.ty, quad.width, diff --git a/src/core/renderers/canvas/CanvasTexture.ts b/src/core/renderers/canvas/CanvasTexture.ts index fe93ab5b..72a36c72 100644 --- a/src/core/renderers/canvas/CanvasTexture.ts +++ b/src/core/renderers/canvas/CanvasTexture.ts @@ -65,8 +65,8 @@ export class CanvasTexture extends CoreContextTexture { const mult = this.tintCache ? 8 : 4; if (this.textureSource.dimensions) { this.setTextureMemUse( - this.textureSource.dimensions.width * - this.textureSource.dimensions.height * + this.textureSource.dimensions.w * + this.textureSource.dimensions.h * mult, ); } @@ -142,15 +142,15 @@ export class CanvasTexture extends CoreContextTexture { const ctx = canvas.getContext('2d'); if (ctx) ctx.putImageData(data, 0, 0); this.image = canvas; - return { width: data.width, height: data.height }; + return { w: data.width, h: data.height }; } else if ( (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) || data instanceof HTMLImageElement ) { this.image = data; - return { width: data.width, height: data.height }; + return { w: data.width, h: data.height }; } - return { width: 0, height: 0 }; + return { w: 0, h: 0 }; } } diff --git a/src/core/renderers/webgl/WebGlCtxRenderTexture.ts b/src/core/renderers/webgl/WebGlCtxRenderTexture.ts index 47549361..5579878a 100644 --- a/src/core/renderers/webgl/WebGlCtxRenderTexture.ts +++ b/src/core/renderers/webgl/WebGlCtxRenderTexture.ts @@ -18,7 +18,6 @@ */ import type { Dimensions } from '../../../common/CommonTypes.js'; -import { assertTruthy } from '../../../utils.js'; import type { TextureMemoryManager } from '../../TextureMemoryManager.js'; import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js'; import type { RenderTexture } from '../../textures/RenderTexture.js'; @@ -46,25 +45,16 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture { throw new Error('Failed to create native texture for RenderTexture'); } - const { width, height } = this.textureSource; + const { w, h } = this.textureSource; // Create Framebuffer object this.framebuffer = glw.createFramebuffer(); // Set the dimensions of the render texture - glw.texImage2D( - 0, - glw.RGBA, - width, - height, - 0, - glw.RGBA, - glw.UNSIGNED_BYTE, - null, - ); + glw.texImage2D(0, glw.RGBA, w, h, 0, glw.RGBA, glw.UNSIGNED_BYTE, null); // Update the texture memory manager - this.setTextureMemUse(width * height * 4); + this.setTextureMemUse(w * h * 4); // Bind the framebuffer glw.bindFramebuffer(this.framebuffer); @@ -76,8 +66,8 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture { glw.bindFramebuffer(null); return { - width, - height, + w, + h, }; } diff --git a/src/core/renderers/webgl/WebGlCtxSubTexture.ts b/src/core/renderers/webgl/WebGlCtxSubTexture.ts index 2b7560fe..ab4f089b 100644 --- a/src/core/renderers/webgl/WebGlCtxSubTexture.ts +++ b/src/core/renderers/webgl/WebGlCtxSubTexture.ts @@ -22,6 +22,8 @@ import { assertTruthy } from '../../../utils.js'; import type { TextureMemoryManager } from '../../TextureMemoryManager.js'; import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js'; import type { SubTexture } from '../../textures/SubTexture.js'; +import type { SubTextureProps } from '../../textures/SubTexture.js'; +import type { CompressedData } from '../../textures/Texture.js'; import { WebGlCtxTexture } from './WebGlCtxTexture.js'; export class WebGlCtxSubTexture extends WebGlCtxTexture { @@ -39,12 +41,55 @@ export class WebGlCtxSubTexture extends WebGlCtxTexture { if (props.data instanceof Uint8Array) { // its a 1x1 Color Texture - return { width: 1, height: 1 }; + return { w: 1, h: 1 }; } - return { - width: props.data?.width || 0, - height: props.data?.height || 0, - }; + return this.extractDimensions(props.data); + } + + /** + * Efficiently extracts width/height from polymorphic texture data + * Optimized for performance by using type guards and avoiding unnecessary property access + */ + private extractDimensions( + data: + | ImageBitmap + | ImageData + | SubTextureProps + | CompressedData + | HTMLImageElement + | null, + ): Dimensions { + if (!data) { + return { w: 0, h: 0 }; + } + + // Check for standard web API objects first (most common case) + // These use width/height properties: ImageBitmap, ImageData, HTMLImageElement + if (this.hasWidthHeight(data)) { + return { w: data.width, h: data.height }; + } + + // Check for internal objects that use w/h properties: SubTextureProps, CompressedData + if (this.hasWH(data)) { + return { w: data.w, h: data.h }; + } + + // Fallback + return { w: 0, h: 0 }; + } + + /** + * Type guard for objects with width/height properties + */ + private hasWidthHeight(data: any): data is { width: number; height: number } { + return typeof data.width === 'number' && typeof data.height === 'number'; + } + + /** + * Type guard for objects with w/h properties + */ + private hasWH(data: any): data is { w: number; h: number } { + return typeof data.w === 'number' && typeof data.h === 'number'; } } diff --git a/src/core/renderers/webgl/WebGlCtxTexture.ts b/src/core/renderers/webgl/WebGlCtxTexture.ts index 2e3f7142..c05407af 100644 --- a/src/core/renderers/webgl/WebGlCtxTexture.ts +++ b/src/core/renderers/webgl/WebGlCtxTexture.ts @@ -96,7 +96,7 @@ export class WebGlCtxTexture extends CoreContextTexture { } try { - const { width, height } = await this.onLoadRequest(); + const { w, h } = await this.onLoadRequest(); // If the texture has been freed while loading, return early. // Type assertion needed because state could change during async operations @@ -105,11 +105,11 @@ export class WebGlCtxTexture extends CoreContextTexture { } this.state = 'loaded'; - this._w = width; - this._h = height; + this._w = w; + this._h = h; // Update the texture source's width and height so that it can be used // for rendering. - this.textureSource.setState('loaded', { width, height }); + this.textureSource.setState('loaded', { w, h }); // cleanup source texture data next tick // This is done using queueMicrotask to ensure it runs after the current @@ -152,8 +152,8 @@ export class WebGlCtxTexture extends CoreContextTexture { glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null); this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength); - let width = 0; - let height = 0; + let w = 0; + let h = 0; glw.activeTexture(0); @@ -170,8 +170,8 @@ export class WebGlCtxTexture extends CoreContextTexture { // not using typeof HTMLImageElement due to web worker isHTMLImageElement(tdata) ) { - width = tdata.width; - height = tdata.height; + w = tdata.width; + h = tdata.height; glw.bindTexture(this._nativeCtxTexture); glw.pixelStorei( glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL, @@ -180,10 +180,10 @@ export class WebGlCtxTexture extends CoreContextTexture { glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata); - this.setTextureMemUse(height * width * formatBytes * memoryPadding); + this.setTextureMemUse(h * w * formatBytes * memoryPadding); } else if (tdata === null) { - width = 0; - height = 0; + w = 0; + h = 0; // Reset to a 1x1 transparent texture glw.bindTexture(this._nativeCtxTexture); @@ -199,7 +199,7 @@ export class WebGlCtxTexture extends CoreContextTexture { ); this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength); } else if ('mipmaps' in tdata && tdata.mipmaps) { - const { mipmaps, width = 0, height = 0, type, glInternalFormat } = tdata; + const { mipmaps, w = 0, h = 0, type, glInternalFormat } = tdata; const view = type === 'ktx' ? new DataView(mipmaps[0] ?? new ArrayBuffer(0)) @@ -207,7 +207,7 @@ export class WebGlCtxTexture extends CoreContextTexture { glw.bindTexture(this._nativeCtxTexture); - glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view); + glw.compressedTexImage2D(0, glInternalFormat, w, h, 0, view); glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE); glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE); glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR); @@ -216,8 +216,8 @@ export class WebGlCtxTexture extends CoreContextTexture { this.setTextureMemUse(view.byteLength); } else if (tdata && tdata instanceof Uint8Array) { // Color Texture - width = 1; - height = 1; + w = 1; + h = 1; glw.bindTexture(this._nativeCtxTexture); glw.pixelStorei( @@ -225,18 +225,9 @@ export class WebGlCtxTexture extends CoreContextTexture { !!textureData.premultiplyAlpha, ); - glw.texImage2D( - 0, - format, - width, - height, - 0, - format, - glw.UNSIGNED_BYTE, - tdata, - ); + glw.texImage2D(0, format, w, h, 0, format, glw.UNSIGNED_BYTE, tdata); - this.setTextureMemUse(width * height * formatBytes); + this.setTextureMemUse(w * h * formatBytes); } else { console.error( `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`, @@ -245,8 +236,8 @@ export class WebGlCtxTexture extends CoreContextTexture { } return { - width, - height, + w, + h, }; } diff --git a/src/core/renderers/webgl/WebGlRenderOp.ts b/src/core/renderers/webgl/WebGlRenderOp.ts index ece2d09d..4819d072 100644 --- a/src/core/renderers/webgl/WebGlRenderOp.ts +++ b/src/core/renderers/webgl/WebGlRenderOp.ts @@ -139,7 +139,7 @@ export class WebGlRenderOp extends CoreRenderOp { // to be relative to the parent's framebuffer if (this.parentHasRenderTexture) { clipY = this.framebufferDimensions - ? this.framebufferDimensions.height - this.height + ? this.framebufferDimensions.h - this.height : 0; } diff --git a/src/core/renderers/webgl/WebGlRenderer.ts b/src/core/renderers/webgl/WebGlRenderer.ts index 5d6121a1..204b9092 100644 --- a/src/core/renderers/webgl/WebGlRenderer.ts +++ b/src/core/renderers/webgl/WebGlRenderer.ts @@ -663,13 +663,12 @@ export class WebGlRenderer extends CoreRenderer { if (texture.type === TextureType.subTexture) { const props = (texture as SubTexture).props; - const { width: parentW = 0, height: parentH = 0 } = ( - texture as SubTexture - ).parentTexture.dimensions || { width: 0, height: 0 }; + const { w: parentW = 0, h: parentH = 0 } = (texture as SubTexture) + .parentTexture.dimensions || { w: 0, h: 0 }; result.x1 = props.x / parentW; - result.x2 = result.x1 + props.width / parentW; + result.x2 = result.x1 + props.w / parentW; result.y1 = props.y / parentH; - result.y2 = result.y1 + props.height / parentH; + result.y2 = result.y1 + props.h / parentH; } if ( @@ -681,23 +680,23 @@ export class WebGlRenderer extends CoreRenderer { const resizeMode = textureOptions.resizeMode; const dimensions = texture.dimensions; if (resizeMode.type === 'cover') { - const scaleX = node.props.width / dimensions.width; - const scaleY = node.props.height / dimensions.height; + const scaleX = node.props.w / dimensions.w; + const scaleY = node.props.h / dimensions.h; const scale = Math.max(scaleX, scaleY); const precision = 1 / scale; // Determine based on width if (scaleX < scale) { - const desiredSize = precision * node.props.width; + const desiredSize = precision * node.props.w; result.x1 = - (1 - desiredSize / dimensions.width) * (resizeMode.clipX ?? 0.5); - result.x2 = result.x1 + desiredSize / dimensions.width; + (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5); + result.x2 = result.x1 + desiredSize / dimensions.w; } // Determine based on height if (scaleY < scale) { - const desiredSize = precision * node.props.height; + const desiredSize = precision * node.props.h; result.y1 = - (1 - desiredSize / dimensions.height) * (resizeMode.clipY ?? 0.5); - result.y2 = result.y1 + desiredSize / dimensions.height; + (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5); + result.y2 = result.y1 + desiredSize / dimensions.h; } } } diff --git a/src/core/renderers/webgl/WebGlShaderProgram.ts b/src/core/renderers/webgl/WebGlShaderProgram.ts index c38da885..e53af703 100644 --- a/src/core/renderers/webgl/WebGlShaderProgram.ts +++ b/src/core/renderers/webgl/WebGlShaderProgram.ts @@ -206,13 +206,13 @@ export class WebGlShaderProgram implements CoreShaderProgram { // Bind render texture framebuffer dimensions as resolution // if the parent has a render texture if (parentHasRenderTexture === true) { - const { width, height } = renderOp.framebufferDimensions!; + const { w, h } = renderOp.framebufferDimensions!; // Force pixel ratio to 1.0 for render textures since they are always 1:1 // the final render texture will be rendered to the screen with the correct pixel ratio this.glw.uniform1f('u_pixelRatio', 1.0); // Set resolution to the framebuffer dimensions - this.glw.uniform2f('u_resolution', width, height); + this.glw.uniform2f('u_resolution', w, h); } else { this.glw.uniform1f('u_pixelRatio', renderOp.renderer.stage.pixelRatio); this.glw.uniform2f( diff --git a/src/core/shaders/canvas/Border.ts b/src/core/shaders/canvas/Border.ts index 1e919664..2b9aaf80 100644 --- a/src/core/shaders/canvas/Border.ts +++ b/src/core/shaders/canvas/Border.ts @@ -35,13 +35,13 @@ export const Border: CanvasShaderType = { props: BorderTemplate.props, update() { this.computed.borderColor = formatRgba(parseColorRgba(this.props!.color)); - this.computed.borderAsym = !valuesAreEqual(this.props!.width as number[]); + this.computed.borderAsym = !valuesAreEqual(this.props!.w as number[]); }, render(ctx, quad, renderContext) { renderContext(); ctx.strokeStyle = this.computed.borderColor!; - if (this.computed.borderAsym === false && this.props!.width[0] > 0) { - const bWidth = this.props!.width[0]; + if (this.computed.borderAsym === false && this.props!.w[0] > 0) { + const bWidth = this.props!.w[0]; const bHalfWidth = bWidth * 0.5; ctx.lineWidth = bWidth; ctx.beginPath(); @@ -54,7 +54,7 @@ export const Border: CanvasShaderType = { return; } - const { 0: t, 1: r, 2: b, 3: l } = this.props!.width as Vec4; + const { 0: t, 1: r, 2: b, 3: l } = this.props!.w as Vec4; if (t > 0) { const y = quad.ty + t * 0.5; strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t); diff --git a/src/core/shaders/canvas/HolePunch.ts b/src/core/shaders/canvas/HolePunch.ts index 3f0dab12..7438c131 100644 --- a/src/core/shaders/canvas/HolePunch.ts +++ b/src/core/shaders/canvas/HolePunch.ts @@ -36,23 +36,16 @@ export const HolePunch: CanvasShaderType< update() { this.computed.radius = calcFactoredRadiusArray( this.props!.radius as Vec4, - this.props!.width, - this.props!.height, + this.props!.w, + this.props!.h, ); }, render(ctx, quad, renderContext) { ctx.save(); renderContext(); - const { x, y, width, height } = this.props!; + const { x, y, w, h } = this.props!; ctx.beginPath(); - roundRect( - ctx, - quad.tx + x, - quad.ty + y, - width, - height, - this.computed.radius!, - ); + roundRect(ctx, quad.tx + x, quad.ty + y, w, h, this.computed.radius!); ctx.closePath(); ctx.fillStyle = 'black'; ctx.globalCompositeOperation = 'destination-out'; diff --git a/src/core/shaders/canvas/LinearGradient.ts b/src/core/shaders/canvas/LinearGradient.ts index a9601c0c..4adb76fb 100644 --- a/src/core/shaders/canvas/LinearGradient.ts +++ b/src/core/shaders/canvas/LinearGradient.ts @@ -36,8 +36,8 @@ export const LinearGradient: CanvasShaderType< props: LinearGradientTemplate.props, update(node) { const angle = this.props!.angle - (Math.PI / 180) * 90; - const nWidth = node.width; - const nHeight = node.height; + const nWidth = node.w; + const nHeight = node.h; const line = (Math.abs(nWidth * Math.sin(angle)) + Math.abs(nHeight * Math.cos(angle))) * diff --git a/src/core/shaders/canvas/RadialGradient.ts b/src/core/shaders/canvas/RadialGradient.ts index d51ec424..7b5d935b 100644 --- a/src/core/shaders/canvas/RadialGradient.ts +++ b/src/core/shaders/canvas/RadialGradient.ts @@ -39,8 +39,8 @@ export const RadialGradient: CanvasShaderType< let scaleX = 1; let scaleY = 1; const props = this.props as RadialGradientProps; - const pWidth = props.width; - const pHeight = props.height; + const pWidth = props.w; + const pHeight = props.h; if (pWidth > pHeight) { scaleX = pWidth / pHeight; } else if (pHeight > pWidth) { @@ -48,8 +48,8 @@ export const RadialGradient: CanvasShaderType< } this.computed = { - pivotX: props.pivot[0] * node.width, - pivotY: props.pivot[1] * node.height, + pivotX: props.pivot[0] * node.w, + pivotY: props.pivot[1] * node.h, scaleX, scaleY, size: Math.min(pWidth, pHeight) * 0.5, diff --git a/src/core/shaders/canvas/Rounded.ts b/src/core/shaders/canvas/Rounded.ts index 45e5573d..90b822d2 100644 --- a/src/core/shaders/canvas/Rounded.ts +++ b/src/core/shaders/canvas/Rounded.ts @@ -34,8 +34,8 @@ export const Rounded: CanvasShaderType = { update(node) { this.computed.radius = calcFactoredRadiusArray( this.props!.radius as Vec4, - node.width, - node.height, + node.w, + node.h, ); }, render(ctx, quad, renderContext) { diff --git a/src/core/shaders/canvas/RoundedWithBorder.ts b/src/core/shaders/canvas/RoundedWithBorder.ts index 101f23c4..2bd6d95b 100644 --- a/src/core/shaders/canvas/RoundedWithBorder.ts +++ b/src/core/shaders/canvas/RoundedWithBorder.ts @@ -38,8 +38,8 @@ export const RoundedWithBorder: CanvasShaderType< const props = this.props!; const radius = calcFactoredRadiusArray( props.radius as Vec4, - node.width, - node.height, + node.w, + node.h, ); this.computed.radius = radius; this.computed.borderColor = this.toColorString(props['border-color']); diff --git a/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts b/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts index 01986192..82804f0f 100644 --- a/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts +++ b/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts @@ -41,8 +41,8 @@ export const RoundedWithBorderAndShadow: CanvasShaderType< const props = this.props!; const radius = calcFactoredRadiusArray( props.radius as Vec4, - node.width, - node.height, + node.w, + node.h, ); this.computed.radius = radius; this.computed.borderColor = this.toColorString(props['border-color']); diff --git a/src/core/shaders/canvas/RoundedWithShadow.ts b/src/core/shaders/canvas/RoundedWithShadow.ts index 5f9bae25..530e8b09 100644 --- a/src/core/shaders/canvas/RoundedWithShadow.ts +++ b/src/core/shaders/canvas/RoundedWithShadow.ts @@ -38,8 +38,8 @@ export const RoundedWithShadow: CanvasShaderType< const props = this.props!; const radius = calcFactoredRadiusArray( props.radius as Vec4, - node.width, - node.height, + node.w, + node.h, ); this.computed.radius = radius; this.computed.shadowColor = this.toColorString(props['shadow-color']); diff --git a/src/core/shaders/templates/BorderTemplate.ts b/src/core/shaders/templates/BorderTemplate.ts index 8981e200..29e732e7 100644 --- a/src/core/shaders/templates/BorderTemplate.ts +++ b/src/core/shaders/templates/BorderTemplate.ts @@ -28,7 +28,7 @@ export interface BorderProps { * * @default 0 */ - width: number | [number, number, number, number]; + w: number | [number, number, number, number]; /** * Color of the border in 0xRRGGBBAA * @@ -57,9 +57,9 @@ export function getBorderProps

( prefix?: P, ): PrefixedType { const pf = prefix && prefix.length > 0 ? `${prefix}-` : ''; - const width = pf + 'width'; + const w = pf + 'w'; return { - [width]: { + [w]: { default: [0, 0, 0, 0], resolve(value) { if (value !== undefined) { @@ -72,37 +72,37 @@ export function getBorderProps

( [pf + 'top']: { default: 0, set(value, props) { - (props[width] as Vec4)[0] = value; + (props[w] as Vec4)[0] = value; }, get(props) { - return (props[width] as Vec4)[0]; + return (props[w] as Vec4)[0]; }, }, [pf + 'right']: { default: 0, set(value, props) { - (props[width] as Vec4)[1] = value; + (props[w] as Vec4)[1] = value; }, get(props) { - return (props[width] as Vec4)[1]; + return (props[w] as Vec4)[1]; }, }, [pf + 'bottom']: { default: 0, set(value, props) { - (props[width] as Vec4)[2] = value; + (props[w] as Vec4)[2] = value; }, get(props) { - return (props[width] as Vec4)[2]; + return (props[w] as Vec4)[2]; }, }, [pf + 'left']: { default: 0, set(value, props) { - (props[width] as Vec4)[3] = value; + (props[w] as Vec4)[3] = value; }, get(props) { - return (props[width] as Vec4)[3]; + return (props[w] as Vec4)[3]; }, }, } as PrefixedType; diff --git a/src/core/shaders/templates/HolePunchTemplate.ts b/src/core/shaders/templates/HolePunchTemplate.ts index c7e234b5..736bd7cc 100644 --- a/src/core/shaders/templates/HolePunchTemplate.ts +++ b/src/core/shaders/templates/HolePunchTemplate.ts @@ -33,13 +33,13 @@ export interface HolePunchProps { /** * Width of the hole punch */ - width: number; + w: number; /** * height of the hole punch * * @remarks if not defined uses the width value */ - height: number; + h: number; /** * Corner radius in pixels, to cut out of the corners of the hole punch * @@ -67,8 +67,8 @@ export const HolePunchTemplate: CoreShaderType = { props: { x: 0, y: 0, - width: 50, - height: 50, + w: 50, + h: 50, radius: { default: [0, 0, 0, 0], resolve(value) { diff --git a/src/core/shaders/templates/RadialGradientTemplate.ts b/src/core/shaders/templates/RadialGradientTemplate.ts index 8427cb7d..7a4548ec 100644 --- a/src/core/shaders/templates/RadialGradientTemplate.ts +++ b/src/core/shaders/templates/RadialGradientTemplate.ts @@ -34,13 +34,13 @@ export interface RadialGradientProps { /** * Width of the RadialGradientEffect */ - width: number; + w: number; /** * height of the RadialGradientEffect * * @remarks if not defined uses the width value */ - height: number; + h: number; /** * center point of where the RadialGradientEffect is drawn */ @@ -74,8 +74,8 @@ export const RadialGradientTemplate: CoreShaderType = { return value; }, }, - width: 50, - height: 50, + w: 50, + h: 50, pivot: [0.5, 0.5], }, }; diff --git a/src/core/shaders/webgl/Border.ts b/src/core/shaders/webgl/Border.ts index 3280d1fb..74075f58 100644 --- a/src/core/shaders/webgl/Border.ts +++ b/src/core/shaders/webgl/Border.ts @@ -26,7 +26,7 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js'; export const Border: WebGlShaderType = { props: BorderTemplate.props, update(node) { - this.uniform4fa('u_borderWidth', this.props!.width as Vec4); + this.uniform4fa('u_borderWidth', this.props!.w as Vec4); this.uniformRGBA('u_borderColor', this.props!.color); }, vertex: ` diff --git a/src/core/shaders/webgl/HolePunch.ts b/src/core/shaders/webgl/HolePunch.ts index b9bdb662..f14400fd 100644 --- a/src/core/shaders/webgl/HolePunch.ts +++ b/src/core/shaders/webgl/HolePunch.ts @@ -29,11 +29,11 @@ export const HolePunch: WebGlShaderType = { const props = this.props!; this.uniform2f('u_pos', props.x, props.y); //precalculate to halfSize once instead of for every pixel - this.uniform2f('u_size', props.width * 0.5, props.height * 0.5); + this.uniform2f('u_size', props.w * 0.5, props.h * 0.5); this.uniform4fa( 'u_radius', - calcFactoredRadiusArray(props.radius as Vec4, props.width, props.height), + calcFactoredRadiusArray(props.radius as Vec4, props.w, props.h), ); }, getCacheMarkers(props: HolePunchProps) { diff --git a/src/core/shaders/webgl/RadialGradient.ts b/src/core/shaders/webgl/RadialGradient.ts index 6865ba8e..bd23210a 100644 --- a/src/core/shaders/webgl/RadialGradient.ts +++ b/src/core/shaders/webgl/RadialGradient.ts @@ -31,10 +31,10 @@ export const RadialGradient: WebGlShaderType = { const props = this.props!; this.uniform2f( 'u_projection', - props.pivot[0] * node.width, - props.pivot[1] * node.height, + props.pivot[0] * node.w, + props.pivot[1] * node.h, ); - this.uniform2f('u_size', props.width * 0.5, props.height * 0.5); + this.uniform2f('u_size', props.w * 0.5, props.h * 0.5); this.uniform1fv('u_stops', new Float32Array(props.stops)); const colors: number[] = []; for (let i = 0; i < props.colors.length; i++) { diff --git a/src/core/shaders/webgl/Rounded.ts b/src/core/shaders/webgl/Rounded.ts index b8bf4af5..9121ffc2 100644 --- a/src/core/shaders/webgl/Rounded.ts +++ b/src/core/shaders/webgl/Rounded.ts @@ -34,11 +34,7 @@ export const Rounded: WebGlShaderType = { update(node: CoreNode) { this.uniform4fa( 'u_radius', - calcFactoredRadiusArray( - this.props!.radius as Vec4, - node.width, - node.height, - ), + calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h), ); }, vertex: ` diff --git a/src/core/shaders/webgl/RoundedWithBorder.ts b/src/core/shaders/webgl/RoundedWithBorder.ts index 17bcb9ca..84005270 100644 --- a/src/core/shaders/webgl/RoundedWithBorder.ts +++ b/src/core/shaders/webgl/RoundedWithBorder.ts @@ -32,11 +32,7 @@ export const RoundedWithBorder: WebGlShaderType = { this.uniform4fa( 'u_radius', - calcFactoredRadiusArray( - this.props!.radius as Vec4, - node.width, - node.height, - ), + calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h), ); }, vertex: ` diff --git a/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts b/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts index d13f737c..99ae7de4 100644 --- a/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts +++ b/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts @@ -37,7 +37,7 @@ export const RoundedWithBorderAndShadow: WebGlShaderType = { this.uniform4fa('u_shadow', this.props!['shadow-projection']!); this.uniform4fa( 'u_radius', - calcFactoredRadiusArray( - this.props!.radius as Vec4, - node.width, - node.height, - ), + calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h), ); }, vertex: Shadow.vertex as string, diff --git a/src/core/textures/ColorTexture.ts b/src/core/textures/ColorTexture.ts index 563f880f..84b958b6 100644 --- a/src/core/textures/ColorTexture.ts +++ b/src/core/textures/ColorTexture.ts @@ -77,7 +77,7 @@ export class ColorTexture extends Texture { pixelData[3] = (this.color >>> 24) & 0xff; // Alpha } - this.setState('fetched', { width: 1, height: 1 }); + this.setState('fetched', { w: 1, h: 1 }); return { data: pixelData, diff --git a/src/core/textures/ImageTexture.ts b/src/core/textures/ImageTexture.ts index e028d5ac..a14a7a39 100644 --- a/src/core/textures/ImageTexture.ts +++ b/src/core/textures/ImageTexture.ts @@ -67,12 +67,12 @@ export interface ImageTextureProps { * Width of the image to be used as a texture. If not provided, the image's * natural width will be used. */ - width?: number | null; + w?: number | null; /** * Height of the image to be used as a texture. If not provided, the image's * natural height will be used. */ - height?: number | null; + h?: number | null; /** * Type, indicate an image type for overriding type detection * @@ -276,21 +276,21 @@ export class ImageTexture extends Texture { }; } - let width, height; + let w, h; // check if resp.data is typeof Uint8ClampedArray else // use resp.data.width and resp.data.height if (resp.data instanceof Uint8Array) { - width = this.props.width ?? 0; - height = this.props.height ?? 0; + w = this.props.w ?? 0; + h = this.props.h ?? 0; } else { - width = resp.data?.width ?? (this.props.width || 0); - height = resp.data?.height ?? (this.props.height || 0); + w = resp.data?.width ?? (this.props.w || 0); + h = resp.data?.height ?? (this.props.h || 0); } // we're loaded! this.setState('fetched', { - width, - height, + w, + h, }); return { @@ -336,8 +336,8 @@ export class ImageTexture extends Texture { if (type === 'svg') { return loadSvg( absoluteSrc, - this.props.width, - this.props.height, + this.props.w, + this.props.h, this.props.sx, this.props.sy, this.props.sw, @@ -348,8 +348,8 @@ export class ImageTexture extends Texture { if (isSvgImage(src) === true) { return loadSvg( absoluteSrc, - this.props.width, - this.props.height, + this.props.w, + this.props.h, this.props.sx, this.props.sy, this.props.sw, @@ -405,8 +405,8 @@ export class ImageTexture extends Texture { premultiplyAlpha: props.premultiplyAlpha ?? true, // null, key: props.key ?? null, type: props.type ?? null, - width: props.width ?? null, - height: props.height ?? null, + w: props.w ?? null, + h: props.h ?? null, sx: props.sx ?? null, sy: props.sy ?? null, sw: props.sw ?? null, diff --git a/src/core/textures/NoiseTexture.ts b/src/core/textures/NoiseTexture.ts index a8fd9020..91a82ac3 100644 --- a/src/core/textures/NoiseTexture.ts +++ b/src/core/textures/NoiseTexture.ts @@ -29,13 +29,13 @@ export interface NoiseTextureProps { * * @default 128 */ - width?: number; + w?: number; /** * Height of texture * * @default 128 */ - height?: number; + h?: number; /** * A number value that can be varied to force new textures to be generated * @@ -64,8 +64,8 @@ export class NoiseTexture extends Texture { } override async getTextureSource(): Promise { - const { width, height } = this.props; - const size = width * height * 4; + const { w, h } = this.props; + const size = w * h * 4; const pixelData8 = new Uint8ClampedArray(size); for (let i = 0; i < size; i += 4) { const v = Math.floor(Math.random() * 256); @@ -78,7 +78,7 @@ export class NoiseTexture extends Texture { this.setState('fetched'); return { - data: new ImageData(pixelData8, width, height), + data: new ImageData(pixelData8, w, h), }; } @@ -87,15 +87,15 @@ export class NoiseTexture extends Texture { return false; } const resolvedProps = NoiseTexture.resolveDefaults(props); - return `NoiseTexture,${resolvedProps.width},${resolvedProps.height},${resolvedProps.cacheId}`; + return `NoiseTexture,${resolvedProps.w},${resolvedProps.h},${resolvedProps.cacheId}`; } static override resolveDefaults( props: NoiseTextureProps, ): Required { return { - width: props.width ?? 128, - height: props.height ?? 128, + w: props.w ?? 128, + h: props.h ?? 128, cacheId: props.cacheId ?? 0, }; } diff --git a/src/core/textures/RenderTexture.ts b/src/core/textures/RenderTexture.ts index 4fd96e50..dced26d4 100644 --- a/src/core/textures/RenderTexture.ts +++ b/src/core/textures/RenderTexture.ts @@ -28,13 +28,13 @@ export interface RenderTextureProps { * WebGL Texture width * @default 256 */ - width?: number; + w?: number; /** * WebGL Texture height * @default 256 */ - height?: number; + h?: number; } export class RenderTexture extends Texture { @@ -47,20 +47,20 @@ export class RenderTexture extends Texture { this.props = RenderTexture.resolveDefaults(props || {}); } - get width() { - return this.props.width; + get w() { + return this.props.w; } - set width(value: number) { - this.props.width = value; + set w(value: number) { + this.props.w = value; } - get height() { - return this.props.height; + get h() { + return this.props.h; } - set height(value: number) { - this.props.height = value; + set h(value: number) { + this.props.h = value; } override async getTextureSource(): Promise { @@ -76,8 +76,8 @@ export class RenderTexture extends Texture { props: RenderTextureProps, ): Required { return { - width: props.width || 256, - height: props.height || 256, + w: props.w || 256, + h: props.h || 256, }; } diff --git a/src/core/textures/SubTexture.ts b/src/core/textures/SubTexture.ts index 84807231..4b8879b8 100644 --- a/src/core/textures/SubTexture.ts +++ b/src/core/textures/SubTexture.ts @@ -60,12 +60,12 @@ export interface SubTextureProps { * * @default 0 */ - width?: number; + w?: number; /** * The height of the sub-texture in pixels **/ - height?: number; + h?: number; } /** @@ -75,8 +75,8 @@ export interface SubTextureProps { * The parent texture can be a Sprite Sheet/Texture Atlas and set using the * {@link SubTextureProps.texture} prop. The sub-region relative to the parent * texture is defined with the {@link SubTextureProps.x}, - * {@link SubTextureProps.y}, {@link SubTextureProps.width}, and - * {@link SubTextureProps.height} pixel values. + * {@link SubTextureProps.y}, {@link SubTextureProps.w}, and + * {@link SubTextureProps.h} pixel values. */ export class SubTexture extends Texture { props: Required; @@ -134,8 +134,8 @@ export class SubTexture extends Texture { // We ignore the parent's passed dimensions, and simply use the SubTexture's // configured dimensions (because that's all that matters here) this.forwardParentTxState('loaded', { - width: this.props.width, - height: this.props.height, + w: this.props.w, + h: this.props.h, }); }; @@ -145,8 +145,8 @@ export class SubTexture extends Texture { private onParentTxFetched = () => { this.forwardParentTxState('fetched', { - width: this.props.width, - height: this.props.height, + w: this.props.w, + h: this.props.h, }); }; @@ -196,8 +196,8 @@ export class SubTexture extends Texture { texture: props.texture, x: props.x || 0, y: props.y || 0, - width: props.width || 0, - height: props.height || 0, + w: props.w || 0, + h: props.h || 0, }; } diff --git a/src/core/textures/Texture.ts b/src/core/textures/Texture.ts index dfa07fff..5ee5c76d 100644 --- a/src/core/textures/Texture.ts +++ b/src/core/textures/Texture.ts @@ -45,7 +45,7 @@ export type TextureLoadedEventHandler = ( /** * Represents compressed texture data. */ -interface CompressedData { +export interface CompressedData { /** * GLenum spcifying compression format */ @@ -66,12 +66,12 @@ interface CompressedData { * * @default 0 */ - width: number; + w: number; /** * The height of the compressed texture in pixels. **/ - height: number; + h: number; } /** @@ -296,10 +296,10 @@ export abstract class Texture extends EventEmitter { if (state === 'loaded') { if ( errorOrDimensions !== undefined && - 'width' in errorOrDimensions === true && - 'height' in errorOrDimensions === true && - errorOrDimensions.width !== undefined && - errorOrDimensions.height !== undefined + 'w' in errorOrDimensions === true && + 'h' in errorOrDimensions === true && + errorOrDimensions.w !== undefined && + errorOrDimensions.h !== undefined ) { this._dimensions = errorOrDimensions; } diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index f4bbe128..e1a6bcbd 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -462,14 +462,14 @@ export class Inspector { let value = mappedStyleResponse.value; if (property === 'x') { const mount = props.mountX; - const width = props.width; + const width = props.w; if (mount) { value = `${parseInt(value) - width * mount}px`; } } else if (property === 'y') { const mount = props.mountY; - const height = props.height; + const height = props.h; if (mount) { value = `${parseInt(value) - height * mount}px`; @@ -538,8 +538,8 @@ export class Inspector { const { x, y, - width, - height, + w, + h, alpha = 1, rotation = 0, scale = 1, @@ -551,10 +551,10 @@ export class Inspector { // ignoring loops and repeats for now, as that might be a bit too much for the inspector function animate() { setTimeout(() => { - div.style.top = `${y - height * mountY}px`; - div.style.left = `${x - width * mountX}px`; - div.style.width = `${width}px`; - div.style.height = `${height}px`; + div.style.top = `${y - h * mountY}px`; + div.style.left = `${x - w * mountX}px`; + div.style.width = `${w}px`; + div.style.height = `${h}px`; div.style.opacity = `${alpha}`; div.style.rotate = `${rotation}rad`; div.style.scale = `${scale}`; diff --git a/src/main-api/Renderer.ts b/src/main-api/Renderer.ts index 98a0f0b1..6cfa3172 100644 --- a/src/main-api/Renderer.ts +++ b/src/main-api/Renderer.ts @@ -824,8 +824,8 @@ export class RendererMain extends EventEmitter { this.stage.renderer.updateViewport(); - this.root.width = appWidth; - this.root.height = appHeight; + this.root.w = appWidth; + this.root.h = appHeight; this.stage.updateViewportBounds(); } From ee9ba36c60d66ca3570eaaf3b3f8e4d3787bf2b5 Mon Sep 17 00:00:00 2001 From: wouterlucas Date: Tue, 12 Aug 2025 21:32:06 +0200 Subject: [PATCH 4/9] fix: fix snapshot clip area --- visual-regression/src/index.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/visual-regression/src/index.ts b/visual-regression/src/index.ts index 576c6454..2b63a203 100644 --- a/visual-regression/src/index.ts +++ b/visual-regression/src/index.ts @@ -294,10 +294,17 @@ async function runTest(browserType: 'chromium') { // Ensure clip dimensions are integers if (options.clip) { - for (const key of ['x', 'y', 'width', 'height']) { - options.clip[key as keyof typeof options.clip] = Math.round( - options.clip[key as keyof typeof options.clip], - ); + for (const key of ['x', 'y', 'w', 'h']) { + // remap 'w' and 'h' to 'width' and 'height' + if (key === 'w' || key === 'h') { + options.clip[key === 'w' ? 'width' : 'height'] = Math.round( + options.clip[key as keyof typeof options.clip], + ); + } else { + options.clip[key as keyof typeof options.clip] = Math.round( + options.clip[key as keyof typeof options.clip], + ); + } } } From 3d26140a02614bbebeb0d8ef658190922911d1a0 Mon Sep 17 00:00:00 2001 From: wouterlucas Date: Tue, 12 Aug 2025 21:57:19 +0200 Subject: [PATCH 5/9] fix: fix 2 tests --- examples/tests/render-settings.ts | 1 + examples/tests/resize-mode.ts | 18 +++++++++--------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/examples/tests/render-settings.ts b/examples/tests/render-settings.ts index 1ead3dbe..8ed6e7a3 100644 --- a/examples/tests/render-settings.ts +++ b/examples/tests/render-settings.ts @@ -139,6 +139,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { const pixelSize = renderer.createTextNode({ text: `Pixels: ${renderer.canvas.width}x${renderer.canvas.height}`, fontSize: 30, + x: 10, y: yPos, fontFamily: 'Ubuntu-ssdf', parent: testRoot, diff --git a/examples/tests/resize-mode.ts b/examples/tests/resize-mode.ts index d05170ba..1c330cd3 100644 --- a/examples/tests/resize-mode.ts +++ b/examples/tests/resize-mode.ts @@ -176,7 +176,7 @@ export default async function test(settings: ExampleSettings) { } satisfies Partial; const textureNodeProps = { - w: containerProps.width, + w: containerProps.w, h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { @@ -199,7 +199,7 @@ export default async function test(settings: ExampleSettings) { parent: container1, }); - curX += containerProps.width + PADDING; + curX += containerProps.w + PADDING; rowNode.h = containerProps.h; return rowNode.h; @@ -219,7 +219,7 @@ export default async function test(settings: ExampleSettings) { } satisfies Partial; const textureNodeProps = { - w: containerProps.width, + w: containerProps.w, h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { @@ -260,7 +260,7 @@ export default async function test(settings: ExampleSettings) { } satisfies Partial; const textureNodeProps = { - w: containerProps.width, + w: containerProps.w, h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { @@ -283,7 +283,7 @@ export default async function test(settings: ExampleSettings) { parent: container1, }); - curX += containerProps.width + PADDING; + curX += containerProps.w + PADDING; const container2 = renderer.createNode({ ...containerProps, @@ -293,7 +293,7 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ ...textureNodeProps, mount: 0.5, - x: containerProps.width / 2, + x: containerProps.w / 2, y: containerProps.h / 2, pivotX: 0.5, rotation: deg2Rad(45), @@ -318,7 +318,7 @@ export default async function test(settings: ExampleSettings) { } satisfies Partial; const textureNodeProps = { - w: containerProps.width, + w: containerProps.w, h: containerProps.h, clipping: true, texture: renderer.createTexture('ImageTexture', { @@ -341,7 +341,7 @@ export default async function test(settings: ExampleSettings) { parent: container1, }); - curX += containerProps.width + PADDING; + curX += containerProps.w + PADDING; const container2 = renderer.createNode({ ...containerProps, @@ -351,7 +351,7 @@ export default async function test(settings: ExampleSettings) { renderer.createNode({ ...textureNodeProps, mount: 0.5, - x: containerProps.width / 2, + x: containerProps.w / 2, y: containerProps.h / 2, pivotX: 0.5, rotation: deg2Rad(45), From 20a0193342df13e9fa1f6a76cbcd1c09c0a8e9ea Mon Sep 17 00:00:00 2001 From: jfboeve Date: Wed, 13 Aug 2025 08:43:30 +0200 Subject: [PATCH 6/9] fix some shader tests / fix truthy checks --- examples/tests/shader-animation.ts | 10 +++++----- examples/tests/shader-border.ts | 12 ++++++------ examples/tests/shader-rounded.ts | 4 ++-- examples/tests/shader-shadow.ts | 2 +- src/core/renderers/webgl/WebGlCtxSubTexture.ts | 6 +++--- src/core/renderers/webgl/WebGlCtxTexture.ts | 4 ++-- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/examples/tests/shader-animation.ts b/examples/tests/shader-animation.ts index 7f6bb890..465fe95e 100644 --- a/examples/tests/shader-animation.ts +++ b/examples/tests/shader-animation.ts @@ -35,7 +35,7 @@ export default async function test({ }; const nodeSize = { - width: 300, + w: 300, h: 300, }; @@ -74,8 +74,8 @@ export default async function test({ duration: 500, }, ); - // shaderAnimation.start(); - // await shaderAnimation.waitUntilStopped(); - // t1Radius.text = 'radius: ' + t1.shader.props!.radius.toString(); - // await snapshot({ name: 'animation1' }); + shaderAnimation.start(); + await shaderAnimation.waitUntilStopped(); + t1Radius.text = 'radius: ' + t1.shader.props!.radius.toString(); + await snapshot({ name: 'animation1' }); } diff --git a/examples/tests/shader-border.ts b/examples/tests/shader-border.ts index 46c6e8d5..d65fdf80 100644 --- a/examples/tests/shader-border.ts +++ b/examples/tests/shader-border.ts @@ -104,7 +104,7 @@ export default async function test({ color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { radius: 10, - 'border-width': 1, + 'border-w': 1, }), parent: testRoot, }); @@ -129,7 +129,7 @@ export default async function test({ h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { - 'border-width': 10, + 'border-w': 10, 'border-left': 20, 'border-right': 20, radius: 50, @@ -158,7 +158,7 @@ export default async function test({ color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'top-left': 20, - 'border-width': 1, + 'border-w': 1, }), parent: testRoot, }); @@ -171,7 +171,7 @@ export default async function test({ color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'top-right': 20, - 'border-width': 1, + 'border-w': 1, }), parent: testRoot, }); @@ -184,7 +184,7 @@ export default async function test({ color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'bottom-right': 20, - 'border-width': 1, + 'border-w': 1, }), parent: testRoot, }); @@ -197,7 +197,7 @@ export default async function test({ color: 0xff9900ff, shader: renderer.createShader('RoundedWithBorderAndShadow', { 'bottom-left': 20, - 'border-width': 1, + 'border-w': 1, }), parent: testRoot, }); diff --git a/examples/tests/shader-rounded.ts b/examples/tests/shader-rounded.ts index 0a3b4f46..a8e41c56 100644 --- a/examples/tests/shader-rounded.ts +++ b/examples/tests/shader-rounded.ts @@ -100,7 +100,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { 'top-left': 20, - 'border-width': 10, + 'border-w': 10, }), parent: testRoot, }); @@ -125,7 +125,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { h: 200, color: 0x0000ffff, shader: renderer.createShader('RoundedWithBorder', { - 'border-width': 10, + 'border-w': 10, 'border-left': 20, 'border-right': 20, radius: 50, diff --git a/examples/tests/shader-shadow.ts b/examples/tests/shader-shadow.ts index 7fd513f6..e56ff83f 100644 --- a/examples/tests/shader-shadow.ts +++ b/examples/tests/shader-shadow.ts @@ -76,7 +76,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { 'shadow-x': 50, 'shadow-spread': 50, 'shadow-blur': 100, - 'border-width': 20, + 'border-w': 20, }), parent: node, }); diff --git a/src/core/renderers/webgl/WebGlCtxSubTexture.ts b/src/core/renderers/webgl/WebGlCtxSubTexture.ts index ab4f089b..eac634d2 100644 --- a/src/core/renderers/webgl/WebGlCtxSubTexture.ts +++ b/src/core/renderers/webgl/WebGlCtxSubTexture.ts @@ -60,18 +60,18 @@ export class WebGlCtxSubTexture extends WebGlCtxTexture { | HTMLImageElement | null, ): Dimensions { - if (!data) { + if (data === null) { return { w: 0, h: 0 }; } // Check for standard web API objects first (most common case) // These use width/height properties: ImageBitmap, ImageData, HTMLImageElement - if (this.hasWidthHeight(data)) { + if (this.hasWidthHeight(data) === true) { return { w: data.width, h: data.height }; } // Check for internal objects that use w/h properties: SubTextureProps, CompressedData - if (this.hasWH(data)) { + if (this.hasWH(data) === true) { return { w: data.w, h: data.h }; } diff --git a/src/core/renderers/webgl/WebGlCtxTexture.ts b/src/core/renderers/webgl/WebGlCtxTexture.ts index c05407af..f59d120d 100644 --- a/src/core/renderers/webgl/WebGlCtxTexture.ts +++ b/src/core/renderers/webgl/WebGlCtxTexture.ts @@ -167,8 +167,8 @@ export class WebGlCtxTexture extends CoreContextTexture { if ( (typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap) || tdata instanceof ImageData || - // not using typeof HTMLImageElement due to web worker - isHTMLImageElement(tdata) + // not using typeof HTMLI mageElement due to web worker + isHTMLImageElement(tdata) === true ) { w = tdata.width; h = tdata.height; From 49c4ab4da7001d37a643536b75d2f526698fbb7a Mon Sep 17 00:00:00 2001 From: jfboeve Date: Wed, 13 Aug 2025 08:49:00 +0200 Subject: [PATCH 7/9] revert some lines in shader animation test --- examples/tests/shader-animation.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/tests/shader-animation.ts b/examples/tests/shader-animation.ts index 465fe95e..3a676397 100644 --- a/examples/tests/shader-animation.ts +++ b/examples/tests/shader-animation.ts @@ -35,8 +35,8 @@ export default async function test({ }; const nodeSize = { - w: 300, - h: 300, + width: 300, + height: 300, }; const t1 = renderer.createNode({ @@ -52,7 +52,7 @@ export default async function test({ const t1Radius = renderer.createTextNode({ mountX: 1, - x: testRoot.w - 90, + x: testRoot.width - 90, y: 90, fontSize: 40, fontFamily: 'Ubuntu', @@ -74,8 +74,8 @@ export default async function test({ duration: 500, }, ); - shaderAnimation.start(); - await shaderAnimation.waitUntilStopped(); - t1Radius.text = 'radius: ' + t1.shader.props!.radius.toString(); - await snapshot({ name: 'animation1' }); + // shaderAnimation.start(); + // await shaderAnimation.waitUntilStopped(); + // t1Radius.text = 'radius: ' + t1.shader.props!.radius.toString(); + // await snapshot({ name: 'animation1' }); } From 23d07b9c8ec9d2adb7bd60547d70acefc3af5d3c Mon Sep 17 00:00:00 2001 From: jfboeve Date: Wed, 13 Aug 2025 09:00:01 +0200 Subject: [PATCH 8/9] fix borderer shaders --- src/core/shaders/canvas/RoundedWithBorder.ts | 6 ++---- src/core/shaders/canvas/RoundedWithBorderAndShadow.ts | 6 ++---- src/core/shaders/webgl/RoundedWithBorder.ts | 2 +- src/core/shaders/webgl/RoundedWithBorderAndShadow.ts | 2 +- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/core/shaders/canvas/RoundedWithBorder.ts b/src/core/shaders/canvas/RoundedWithBorder.ts index 2bd6d95b..32fcd849 100644 --- a/src/core/shaders/canvas/RoundedWithBorder.ts +++ b/src/core/shaders/canvas/RoundedWithBorder.ts @@ -43,11 +43,9 @@ export const RoundedWithBorder: CanvasShaderType< ); this.computed.radius = radius; this.computed.borderColor = this.toColorString(props['border-color']); - this.computed.borderAsym = !valuesAreEqual( - props['border-width'] as number[], - ); + this.computed.borderAsym = !valuesAreEqual(props['border-w'] as number[]); //following vec4 convention 0, 1, 2, 3 => x, y, z, w; - const [x, y, z, w] = props['border-width'] as Vec4; + const [x, y, z, w] = props['border-w'] as Vec4; this.computed.borderRadius = [ Math.max(0.0, radius[0] - Math.max(x, w) * 0.5), Math.max(0.0, radius[1] - Math.max(x, y) * 0.5), diff --git a/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts b/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts index 82804f0f..448a1c1a 100644 --- a/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts +++ b/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts @@ -46,10 +46,8 @@ export const RoundedWithBorderAndShadow: CanvasShaderType< ); this.computed.radius = radius; this.computed.borderColor = this.toColorString(props['border-color']); - this.computed.borderAsym = !valuesAreEqual( - props['border-width'] as number[], - ); - const borderWidth = props['border-width'] as Vec4; + this.computed.borderAsym = !valuesAreEqual(props['border-w'] as number[]); + const borderWidth = props['border-w'] as Vec4; this.computed.borderRadius = radius.map((value, index) => Math.max(0, value - borderWidth[index]! * 0.5), ) as Vec4; diff --git a/src/core/shaders/webgl/RoundedWithBorder.ts b/src/core/shaders/webgl/RoundedWithBorder.ts index 84005270..0699c9ca 100644 --- a/src/core/shaders/webgl/RoundedWithBorder.ts +++ b/src/core/shaders/webgl/RoundedWithBorder.ts @@ -28,7 +28,7 @@ export const RoundedWithBorder: WebGlShaderType = { props: RoundedWithBorderTemplate.props, update(node: CoreNode) { this.uniformRGBA('u_borderColor', this.props!['border-color']); - this.uniform4fa('u_borderWidth', this.props!['border-width'] as Vec4); + this.uniform4fa('u_borderWidth', this.props!['border-w'] as Vec4); this.uniform4fa( 'u_radius', diff --git a/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts b/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts index 99ae7de4..83eb74bb 100644 --- a/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts +++ b/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts @@ -30,7 +30,7 @@ export const RoundedWithBorderAndShadow: WebGlShaderType Date: Wed, 13 Aug 2025 09:20:57 +0200 Subject: [PATCH 9/9] fix more shader tests --- examples/tests/shader-animation.ts | 6 +- examples/tests/shader-border.ts | 4 +- examples/tests/text-dimensions.ts | 2 +- examples/tests/texture-svg.ts | 3 +- examples/tests/width-height-shortcuts.ts | 134 ------------------ .../chromium-ci/width-height-shortcuts-1.png | Bin 11211 -> 0 bytes 6 files changed, 7 insertions(+), 142 deletions(-) delete mode 100644 examples/tests/width-height-shortcuts.ts delete mode 100644 visual-regression/certified-snapshots/chromium-ci/width-height-shortcuts-1.png diff --git a/examples/tests/shader-animation.ts b/examples/tests/shader-animation.ts index 3a676397..212e4939 100644 --- a/examples/tests/shader-animation.ts +++ b/examples/tests/shader-animation.ts @@ -35,8 +35,8 @@ export default async function test({ }; const nodeSize = { - width: 300, - height: 300, + w: 300, + h: 300, }; const t1 = renderer.createNode({ @@ -52,7 +52,7 @@ export default async function test({ const t1Radius = renderer.createTextNode({ mountX: 1, - x: testRoot.width - 90, + x: testRoot.w - 90, y: 90, fontSize: 40, fontFamily: 'Ubuntu', diff --git a/examples/tests/shader-border.ts b/examples/tests/shader-border.ts index d65fdf80..ec6e86f4 100644 --- a/examples/tests/shader-border.ts +++ b/examples/tests/shader-border.ts @@ -34,7 +34,7 @@ export default async function test({ w: 200, h: 200, color: 0xff0000ff, - shader: renderer.createShader('Border', { width: 1 }), + shader: renderer.createShader('Border', { w: 1 }), parent: testRoot, }); @@ -44,7 +44,7 @@ export default async function test({ w: 200, h: 200, color: 0xff0000ff, - shader: renderer.createShader('Border', { width: 30 }), + shader: renderer.createShader('Border', { w: 30 }), parent: testRoot, }); diff --git a/examples/tests/text-dimensions.ts b/examples/tests/text-dimensions.ts index 6a15237b..8f66061e 100644 --- a/examples/tests/text-dimensions.ts +++ b/examples/tests/text-dimensions.ts @@ -132,7 +132,7 @@ export default async function test(settings: ExampleSettings) { mutations[i]?.(); indexInfo.text = (i + 1).toString(); const dimensions = await waitPromise; - textBg.w = dimensions.width; + textBg.w = dimensions.w; textBg.h = dimensions.h; return true; } diff --git a/examples/tests/texture-svg.ts b/examples/tests/texture-svg.ts index 3109f134..d71f3d8b 100644 --- a/examples/tests/texture-svg.ts +++ b/examples/tests/texture-svg.ts @@ -22,7 +22,6 @@ import { type Dimensions, type NodeLoadedEventHandler, type NodeFailedEventHandler, - Texture, } from '@lightningjs/renderer'; import rockoSvg from '../assets/rocko.svg'; import lightning from '../assets/lightning.svg'; @@ -147,7 +146,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) { } imgNode.w = dimensions.w; - imgNode.h = dimensions.height; + imgNode.h = dimensions.h; textNode.y = imgNode.y + imgNode.h; let result = 'Fail'; diff --git a/examples/tests/width-height-shortcuts.ts b/examples/tests/width-height-shortcuts.ts deleted file mode 100644 index 33a63249..00000000 --- a/examples/tests/width-height-shortcuts.ts +++ /dev/null @@ -1,134 +0,0 @@ -/* - * If not stated otherwise in this file or this component's LICENSE file the - * following copyright and licenses apply: - * - * Copyright 2025 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. - */ - -import type { ExampleSettings } from '../common/ExampleSettings.js'; - -export async function automation(settings: ExampleSettings) { - await test(settings); - await settings.snapshot(); -} - -/** - * Tests that w/h shorthand properties work identically to width/height - * on CoreNodes - * - * @param settings - * @returns - */ -export default async function test(settings: ExampleSettings) { - const { renderer, testRoot } = settings; - - // Set test area - testRoot.w = 600; - testRoot.h = 270; - testRoot.color = 0x222222ff; - - // Create header text - renderer.createTextNode({ - x: 20, - y: 20, - color: 0xffffffff, - fontFamily: 'Ubuntu', - fontSize: 24, - text: 'Width/Height vs W/H Shorthand Test (CoreNodes)', - parent: testRoot, - }); - - // Test CoreNodes - using width/height - const nodeWithLongProps = renderer.createNode({ - x: 50, - y: 80, - w: 120, - h: 80, - color: 0xff0000ff, - parent: testRoot, - }); - - // Test CoreNodes - using w/h shorthand - renderer.createNode({ - x: 200, - y: 80, - w: 120, - h: 80, - color: 0x00ff00ff, - parent: testRoot, - }); - - // Additional test with different sizes - renderer.createNode({ - x: 350, - y: 80, - w: 80, - h: 120, - color: 0x0080ffff, - parent: testRoot, - }); - - renderer.createNode({ - x: 450, - y: 80, - w: 80, - h: 120, - color: 0xff8000ff, - parent: testRoot, - }); - - // Label for CoreNodes - renderer.createTextNode({ - x: 50, - y: 170, - color: 0xffffffff, - fontFamily: 'Ubuntu', - fontSize: 14, - text: 'w: 120\nheight: 80', - parent: testRoot, - }); - - renderer.createTextNode({ - x: 200, - y: 170, - color: 0xffffffff, - fontFamily: 'Ubuntu', - fontSize: 14, - text: 'w: 120\nh: 80', - parent: testRoot, - }); - - renderer.createTextNode({ - x: 350, - y: 210, - color: 0xffffffff, - fontFamily: 'Ubuntu', - fontSize: 14, - text: 'w: 80\nheight: 120', - parent: testRoot, - }); - - renderer.createTextNode({ - x: 450, - y: 210, - color: 0xffffffff, - fontFamily: 'Ubuntu', - fontSize: 14, - text: 'w: 80\nh: 120', - parent: testRoot, - }); - - return Promise.resolve(); -} diff --git a/visual-regression/certified-snapshots/chromium-ci/width-height-shortcuts-1.png b/visual-regression/certified-snapshots/chromium-ci/width-height-shortcuts-1.png deleted file mode 100644 index 8cc64d01d4d61100c460962608af789da97266d8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11211 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 E0WyKqV*mgE