@lightningtv/renderer 3.0.0-beta1 → 3.2.4

package/src/core/renderers/webgl/WebGlShaderNode.ts

@@ -2,7 +2,6 @@ import type { CoreNode } from '../../CoreNode.js';
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Stage } from '../../Stage.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
 import type {
   UniformCollection,
@@ -10,7 +9,7 @@ import type {
   Vec3,
   Vec4,
 } from './internal/ShaderUtils.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { WebGlRenderer, WebGlRenderOp } from './WebGlRenderer.js';
 import type { WebGlShaderProgram } from './WebGlShaderProgram.js';
 
 export type ShaderSource<T> =
@@ -46,7 +45,7 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      * This function is used to check if the shader can be reused based on quad info
      * @param props
      */
-    canBatch?: (renderOpA: QuadOptions, renderOpB: QuadOptions) => boolean;
+    canBatch?: (node: CoreNode, currentRenderOp: WebGlRenderOp) => boolean;
     /**
      * extensions required for specific shader?
      */
@@ -86,11 +85,9 @@ export class WebGlShaderNode<
           this.updater!(this.node as CoreNode, this.props);
           return;
         }
+
         const prevKey = this.valueKey;
-        this.valueKey = '';
-        for (const key in this.resolvedProps) {
-          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
-        }
+        this.valueKey = this.createValueKey();
 
         if (prevKey === this.valueKey) {
           return;

package/src/core/renderers/webgl/WebGlShaderProgram.ts

@@ -1,29 +1,11 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import { USE_RTT } from '../../../utils.js';
 import { Default } from '../../shaders/webgl/Default.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import type { CoreShaderProgram } from '../CoreShaderProgram.js';
 import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import type { WebGlRenderOp } from './WebGlRenderOp.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { WebGlRenderer, WebGlRenderOp } from './WebGlRenderer.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
+import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { BufferCollection } from './internal/BufferCollection.js';
 import {
   createProgram,
@@ -33,10 +15,10 @@ import {
   type UniformSet3Params,
   type UniformSet4Params,
 } from './internal/ShaderUtils.js';
+import { CoreNode } from '../../CoreNode.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
-  protected boundBufferCollection: BufferCollection | null = null;
-  protected program: WebGLProgram;
+  protected program: WebGLProgram | null;
   /**
    * Vertex Array Object
    *
@@ -46,10 +28,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
-  protected attributeLocations: Record<string, number>;
+  protected attributeLocations: string[];
+  protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
   protected useSystemDimensions = false;
+  protected useTimeValue = false;
+  public isDestroyed = false;
   supportsIndexedTextures = false;
 
   constructor(
@@ -117,10 +102,14 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.program = program;
     this.attributeLocations = glw.getAttributeLocations(program);
 
-    this.useSystemAlpha =
-      this.glw.getUniformLocation(program, 'u_alpha') !== null;
-    this.useSystemDimensions =
-      this.glw.getUniformLocation(program, 'u_dimensions') !== null;
+    const uniLocs = (this.uniformLocations = glw.getUniformLocations(program));
+
+    this.useSystemAlpha = uniLocs['u_alpha'] !== undefined;
+    this.useSystemDimensions = uniLocs['u_dimensions'] !== undefined;
+
+    this.useTimeValue =
+      this.glw.getUniformLocation(program, 'u_dimensions') !== null &&
+      config.time !== undefined;
 
     this.lifecycle = {
       update: config.update,
@@ -133,39 +122,62 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   disableAttributes() {
-    const { glw } = this;
-    const attribs = Object.keys(this.attributeLocations);
-    const attribLen = attribs.length;
+    const glw = this.glw;
+    const attribLen = this.attributeLocations.length;
     for (let i = 0; i < attribLen; i++) {
       glw.disableVertexAttribArray(i);
     }
   }
 
-  reuseRenderOp(renderOpA: QuadOptions, renderOpB: QuadOptions): boolean {
-    const lifecycleCheck = this.lifecycle.canBatch
-      ? this.lifecycle.canBatch(renderOpA, renderOpB)
-      : true;
-    if (!lifecycleCheck) {
-      return false;
+  reuseRenderOp(node: CoreNode, currentRenderOp: WebGlRenderOp): boolean {
+    if (this.lifecycle.canBatch !== undefined) {
+      return this.lifecycle.canBatch(node, currentRenderOp);
+    }
+
+    const { time, worldAlpha, width, height } = node;
+
+    if (this.useTimeValue === true) {
+      if (time !== currentRenderOp.time) {
+        return false;
+      }
     }
 
-    if (this.useSystemAlpha) {
-      if (renderOpA.alpha !== renderOpB.alpha) {
+    if (this.useSystemAlpha === true) {
+      if (worldAlpha !== currentRenderOp.worldAlpha) {
         return false;
       }
     }
 
-    if (this.useSystemDimensions) {
+    if (this.useSystemDimensions === true) {
       if (
-        renderOpA.width !== renderOpB.width ||
-        renderOpA.height !== renderOpB.height
+        width !== currentRenderOp.width ||
+        height !== currentRenderOp.height
       ) {
         return false;
       }
     }
 
-    const shaderPropsA = renderOpA.shader?.getResolvedProps();
-    const shaderPropsB = renderOpB.shader?.getResolvedProps();
+    let shaderPropsA: Record<string, unknown> | undefined = undefined;
+    let shaderPropsB: Record<string, unknown> | undefined = undefined;
+
+    const shader = node.props.shader;
+
+    if (shader !== null) {
+      shaderPropsA = (shader as WebGlShaderNode).resolvedProps;
+    }
+
+    const opShader = currentRenderOp.shader;
+    if (opShader !== null) {
+      shaderPropsB = (opShader as WebGlShaderNode).resolvedProps;
+    }
+
+    if (
+      (shaderPropsA === undefined && shaderPropsB !== undefined) ||
+      (shaderPropsA !== undefined && shaderPropsB === undefined)
+    ) {
+      return false;
+    }
+
     if (shaderPropsA !== undefined && shaderPropsB !== undefined) {
       for (const key in shaderPropsA) {
         if (shaderPropsA[key] !== shaderPropsB[key]) {
@@ -178,28 +190,35 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   bindRenderOp(renderOp: WebGlRenderOp) {
-    this.bindBufferCollection(renderOp.buffers);
-    this.bindTextures(renderOp.textures);
+    const isCoreNode = renderOp.isCoreNode;
 
-    const { parentHasRenderTexture } = renderOp.quad;
+    this.bindTextures(renderOp.renderOpTextures);
+    this.bindBufferCollection(renderOp.quadBufferCollection);
+
+    const parentHasRenderTexture = renderOp.parentHasRenderTexture;
+    const framebufferDimensions =
+      isCoreNode && renderOp.parentHasRenderTexture
+        ? renderOp.parentFramebufferDimensions
+        : renderOp.framebufferDimensions;
 
     // Skip if the parent and current operation both have render textures
-    if (renderOp.quad.rtt && parentHasRenderTexture) {
+    if (USE_RTT && renderOp.rtt === true && parentHasRenderTexture === true) {
       return;
     }
 
     // Bind render texture framebuffer dimensions as resolution
     // if the parent has a render texture
-    if (parentHasRenderTexture) {
-      const { width, height } = renderOp.quad.framebufferDimensions!;
+    if (USE_RTT && parentHasRenderTexture === true && framebufferDimensions) {
+      const { w, h } = 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.uniform1f('u_pixelRatio', renderOp.stage.pixelRatio);
+
       this.glw.uniform2f(
         'u_resolution',
         this.glw.canvas.width,
@@ -207,45 +226,47 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
-    this.glw.uniform1f('u_rtt', renderOp.quad.rtt ? 1 : 0);
+    if (this.useTimeValue === true) {
+      this.glw.uniform1f('u_time', renderOp.time);
+    }
 
-    if (this.useSystemAlpha) {
-      this.glw.uniform1f('u_alpha', renderOp.quad.alpha);
+    if (this.useSystemAlpha === true) {
+      this.glw.uniform1f('u_alpha', renderOp.worldAlpha);
     }
 
-    if (this.useSystemDimensions) {
-      this.glw.uniform2f(
-        'u_dimensions',
-        renderOp.quad.width,
-        renderOp.quad.height,
-      );
+    if (this.useSystemDimensions === true) {
+      this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
     }
 
     /**temporary fix to make sdf texts work */
-    if (renderOp.sdfShaderProps !== undefined) {
-      (renderOp.shader.shaderType as WebGlShaderType).onSdfBind?.call(
+    if (isCoreNode === false && renderOp.sdfShaderProps !== undefined) {
+      const opShader = renderOp.shader; // SdfRenderOp has .shader
+      (opShader.shaderType as WebGlShaderType).onSdfBind?.call(
         this.glw,
         renderOp.sdfShaderProps,
       );
       return;
     }
 
-    if (renderOp.shader.props) {
+    const shader = renderOp.shader as WebGlShaderNode;
+    if (shader.props !== undefined) {
       /**
        * loop over all precalculated uniform types
        */
-      for (const key in renderOp.shader.uniforms.single) {
-        const { method, value } = renderOp.shader.uniforms.single[key]!;
+      const uniforms = shader.uniforms;
+
+      for (const key in uniforms.single) {
+        const { method, value } = uniforms.single[key]!;
         this.glw[method as keyof UniformSet1Param](key, value as never);
       }
 
-      for (const key in renderOp.shader.uniforms.vec2) {
-        const { method, value } = renderOp.shader.uniforms.vec2[key]!;
+      for (const key in uniforms.vec2) {
+        const { method, value } = uniforms.vec2[key]!;
         this.glw[method as keyof UniformSet2Params](key, value[0], value[1]);
       }
 
-      for (const key in renderOp.shader.uniforms.vec3) {
-        const { method, value } = renderOp.shader.uniforms.vec3[key]!;
+      for (const key in uniforms.vec3) {
+        const { method, value } = uniforms.vec3[key]!;
         this.glw[method as keyof UniformSet3Params](
           key,
           value[0],
@@ -254,8 +275,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
         );
       }
 
-      for (const key in renderOp.shader.uniforms.vec4) {
-        const { method, value } = renderOp.shader.uniforms.vec4[key]!;
+      for (const key in uniforms.vec4) {
+        const { method, value } = uniforms.vec4[key]!;
         this.glw[method as keyof UniformSet4Params](
           key,
           value[0],
@@ -269,14 +290,14 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
   bindBufferCollection(buffer: BufferCollection) {
     const { glw } = this;
-    const attribs = Object.keys(this.attributeLocations);
+    const attribs = this.attributeLocations;
     const attribLen = attribs.length;
 
     for (let i = 0; i < attribLen; i++) {
       const name = attribs[i]!;
       const resolvedBuffer = buffer.getBuffer(name);
       const resolvedInfo = buffer.getAttributeInfo(name);
-      if (!resolvedBuffer || !resolvedInfo) {
+      if (resolvedBuffer === undefined || resolvedInfo === undefined) {
         continue;
       }
       glw.enableVertexAttribArray(i);
@@ -293,12 +314,18 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   bindTextures(textures: WebGlCtxTexture[]) {
+    if (textures[0] === undefined) {
+      return;
+    }
     this.glw.activeTexture(0);
-    this.glw.bindTexture(textures[0]!.ctxTexture);
+    this.glw.bindTexture(textures[0].ctxTexture);
   }
 
   attach(): void {
-    this.glw.useProgram(this.program);
+    if (this.isDestroyed === true) {
+      return;
+    }
+    this.glw.useProgram(this.program, this.uniformLocations!);
     if (this.glw.isWebGl2() && this.vao) {
       this.glw.bindVertexArray(this.vao);
     }
@@ -307,4 +334,23 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   detach(): void {
     this.disableAttributes();
   }
+
+  destroy() {
+    if (this.isDestroyed === true) {
+      return;
+    }
+    const glw = this.glw;
+
+    this.detach();
+
+    glw.deleteProgram(this.program!);
+    this.program = null;
+    this.uniformLocations = null;
+
+    const attribs = this.attributeLocations;
+    const attribLen = this.attributeLocations.length;
+    for (let i = 0; i < attribLen; i++) {
+      this.glw.deleteBuffer(attribs[i]!);
+    }
+  }
 }

package/src/core/renderers/webgl/internal/BufferCollection.ts

@@ -1,22 +1,3 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { AttributeInfo } from './ShaderUtils.js';
 
 export interface BufferItem {
@@ -29,7 +10,19 @@ export interface BufferItem {
  * vertex attribute formats.
  */
 export class BufferCollection {
-  constructor(readonly config: BufferItem[]) {}
+  private _lookup = new Map<string, BufferItem>();
+
+  constructor(readonly config: BufferItem[]) {
+    for (const item of config) {
+      for (const attrName in item.attributes) {
+        // We only care about attributes that are actually defined (truthy)
+        // and we want the first one found in the config array order
+        if (item.attributes[attrName] && !this._lookup.has(attrName)) {
+          this._lookup.set(attrName, item);
+        }
+      }
+    }
+  }
 
   /**
    * Get the WebGLBuffer associated with the given attribute name if it exists.
@@ -38,7 +31,7 @@ export class BufferCollection {
    * @returns
    */
   getBuffer(attributeName: string): WebGLBuffer | undefined {
-    return this.config.find((item) => item.attributes[attributeName])?.buffer;
+    return this._lookup.get(attributeName)?.buffer;
   }
 
   /**
@@ -48,7 +41,6 @@ export class BufferCollection {
    * @returns
    */
   getAttributeInfo(attributeName: string): AttributeInfo | undefined {
-    return this.config.find((item) => item.attributes[attributeName])
-      ?.attributes[attributeName];
+    return this._lookup.get(attributeName)?.attributes[attributeName];
   }
 }

package/src/core/renderers/webgl/internal/RendererUtils.ts

@@ -1,22 +1,3 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
 
 export interface CoreWebGlParameters {

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -1,22 +1,3 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
 
 //#region Types

package/src/core/renderers/webgl/internal/WebGlUtils.ts

@@ -1,22 +1,3 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 /**
  * Generic WebGL Utility Functions
  *

package/src/core/shaders/canvas/Border.ts

@@ -1,78 +1,119 @@
-/*
- * Copyright 2023 Comcast Cable Communications Management, LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
+import { formatRgba, parseColorRgba } from '../../lib/colorParser.js';
 import { valuesAreEqual } from '../../lib/utils.js';
 import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
-import {
-  formatRgba,
-  parseColorRgba,
-} from '../../renderers/canvas/internal/ColorUtils.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
 import {
   BorderTemplate,
   type BorderProps,
 } from '../templates/BorderTemplate.js';
-import { strokeLine } from './utils/render.js';
 
 export interface ComputedBorderValues {
   borderColor: string;
   borderAsym: boolean;
-  borderRadius: Vec4;
+  innerX: number;
+  innerY: number;
+  innerW: number;
+  innerH: number;
+  outerX: number;
+  outerY: number;
+  outerW: number;
+  outerH: number;
 }
 
 export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
   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[]);
+    const borderAlign = this.props!.align as number;
+    const borderGap = this.props!.gap as number;
+
+    const borderW = this.props!.w as Vec4;
+
+    if (this.computed.borderAsym === false) {
+      const bWidth = borderW[0] * 0.5;
+      //inside
+      const baseline = bWidth - borderW[0] * borderAlign - borderGap;
+      this.computed.outerX = baseline;
+      this.computed.outerY = baseline;
+
+      this.computed.outerW = -baseline * 2;
+      this.computed.outerH = -baseline * 2;
+      return;
+    }
+
+    // Calculate outer and inner rectangle dimensions
+    const [t, r, b, l] = this.props!.w as Vec4;
+
+    const outerX = (this.computed.outerX = -l * borderAlign - borderGap);
+    const outerY = (this.computed.outerY = -t * borderAlign - borderGap);
+    let outerW = 0;
+    let outerH = 0;
+
+    if (r > 0) {
+      outerW += r * borderAlign + borderGap;
+    }
+    if (l > 0) {
+      outerW += l * borderAlign + borderGap;
+    }
+
+    if (b > 0) {
+      outerH += b * borderAlign + borderGap;
+    }
+    if (t > 0) {
+      outerH += t * borderAlign + borderGap;
+    }
+
+    this.computed.outerW = outerW;
+    this.computed.outerH = outerH;
+
+    this.computed.innerX = outerX + l;
+    this.computed.innerY = outerY + t;
+    this.computed.innerW = outerW - l - r;
+    this.computed.innerH = outerH - t - b;
   },
   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];
-      const bHalfWidth = bWidth * 0.5;
-      ctx.lineWidth = bWidth;
+    const computed = this.computed as ComputedBorderValues;
+    ctx.strokeStyle = computed.borderColor!;
+    if (computed.borderAsym === false && this.props!.w[0] > 0) {
+      ctx.lineWidth = this.props!.w[0];
       ctx.beginPath();
       ctx.strokeRect(
-        quad.tx + bHalfWidth,
-        quad.ty + bHalfWidth,
-        quad.width - bWidth,
-        quad.height - bWidth,
+        quad.tx + computed.outerX,
+        quad.ty + computed.outerY,
+        quad.width + computed.outerW,
+        quad.height + computed.outerH,
       );
       return;
     }
 
-    const { 0: t, 1: r, 2: b, 3: l } = this.props!.width as Vec4;
-    if (t > 0) {
-      const y = quad.ty + t * 0.5;
-      strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t);
-    }
-    if (r > 0) {
-      const x = quad.tx + quad.width - r * 0.5;
-      strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, r);
-    }
-    if (b > 0) {
-      const y = quad.ty + quad.height - b * 0.5;
-      strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, b);
-    }
-    if (l > 0) {
-      const x = quad.tx + l * 0.5;
-      strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, l);
-    }
+    // Pre-calculate common values
+    const tx = quad.tx;
+    const ty = quad.ty;
+    const width = quad.width;
+    const height = quad.height;
+
+    // Calculate outer rectangle (including border)
+    const outerX = tx + computed.outerX;
+    const outerY = ty + computed.outerY;
+    const outerW = width + computed.outerW;
+    const outerH = height + computed.outerH;
+
+    // Calculate inner rectangle (excluding border)
+    const innerX = tx + computed.innerX;
+    const innerY = ty + computed.innerY;
+    const innerW = width + computed.innerW;
+    const innerH = height + computed.innerH;
+
+    // Use clip to subtract inner from outer
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(outerX, outerY, outerW, outerH);
+    ctx.rect(innerX, innerY, innerW, innerH);
+    ctx.clip('evenodd');
+    ctx.fillStyle = this.computed.borderColor!;
+    ctx.fillRect(outerX, outerY, outerW, outerH);
+    ctx.restore();
   },
 };