@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

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

@@ -26,42 +26,96 @@ import type { ComputedBorderValues } from './Border.js';
 import type { ComputedRoundedValues } from './Rounded.js';
 import { roundedRectWithBorder } from './utils/render.js';
 
-type ComputedValues = ComputedRoundedValues & ComputedBorderValues;
+export type ComputedRoundedWithBorderValues = ComputedRoundedValues &
+  ComputedBorderValues & {
+    outerBorderRadius: Vec4;
+    innerBorderRadius: Vec4;
+  };
 
 export const RoundedWithBorder: CanvasShaderType<
   RoundedWithBorderProps,
-  ComputedValues
+  ComputedRoundedWithBorderValues
 > = {
   props: RoundedWithBorderTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      props.radius as Vec4,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
-    this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
-    );
-    const borderWidth = this.props!['border-width'] as Vec4;
-    this.computed.borderRadius = radius.map((value, index) =>
-      Math.max(0, value - borderWidth[index]! * 0.5),
-    ) as Vec4;
+    this.computed.borderColor = this.toColorString(props['border-color']);
+    this.computed.borderAsym = !valuesAreEqual(props['border-w'] as number[]);
+    const borderAlign = this.props!['border-align'] as number;
+    const borderGap = this.props!['border-gap'] as number;
+
+    // Calculate outer and inner rectangle dimensions
+    const [t, r, b, l] = this.props!['border-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;
+
+    this.computed.outerBorderRadius = [
+      Math.max(0.0, radius[0] + (Math.max(l, r) * borderAlign + borderGap)),
+      Math.max(0.0, radius[1] + (Math.max(t, b) * borderAlign + borderGap)),
+      Math.max(0.0, radius[2] + (Math.max(b, t) * borderAlign + borderGap)),
+      Math.max(0.0, radius[3] + (Math.max(l, r) * borderAlign + borderGap)),
+    ];
+
+    this.computed.innerBorderRadius = [
+      Math.max(0.0, this.computed.outerBorderRadius[0] - Math.max(l, r)),
+      Math.max(0.0, this.computed.outerBorderRadius[1] - Math.max(t, b)),
+      Math.max(0.0, this.computed.outerBorderRadius[2] - Math.max(b, t)),
+      Math.max(0.0, this.computed.outerBorderRadius[3] - Math.max(l, r)),
+    ];
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
+    const computed = this.computed as ComputedRoundedWithBorderValues;
     roundedRectWithBorder(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
-      this.computed.radius!,
-      this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      node.globalTransform!.tx,
+      node.globalTransform!.ty,
+      node.props.w,
+      node.props.h,
+      computed.radius,
+      this.props!['border-gap'] as number,
+      computed.outerX,
+      computed.outerY,
+      computed.outerW,
+      computed.outerH,
+      computed.outerBorderRadius,
+      computed.innerX,
+      computed.innerY,
+      computed.innerW,
+      computed.innerH,
+      computed.innerBorderRadius,
+      computed.borderColor,
       renderContext,
     );
   },

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

@@ -22,14 +22,11 @@ import {
   RoundedWithBorderAndShadowTemplate,
   type RoundedWithBorderAndShadowProps,
 } from '../templates/RoundedWithBorderAndShadowTemplate.js';
-import type { ComputedBorderValues } from './Border.js';
-import type { ComputedRoundedValues } from './Rounded.js';
+import type { ComputedRoundedWithBorderValues } from './RoundedWithBorder.js';
 import type { ComputedShadowValues } from './Shadow.js';
 import * as render from './utils/render.js';
 
-type ComputedValues = ComputedRoundedValues &
-  ComputedBorderValues &
-  ComputedShadowValues;
+type ComputedValues = ComputedRoundedWithBorderValues & ComputedShadowValues;
 
 export const RoundedWithBorderAndShadow: CanvasShaderType<
   RoundedWithBorderAndShadowProps,
@@ -38,50 +35,101 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
   props: RoundedWithBorderAndShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      props.radius as Vec4,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
-    this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
-    );
-    const borderWidth = this.props!['border-width'] as Vec4;
-    this.computed.borderRadius = radius.map((value, index) =>
-      Math.max(0, value - borderWidth[index]! * 0.5),
-    ) as Vec4;
+    this.computed.borderColor = this.toColorString(props['border-color']);
+    this.computed.borderAsym = !valuesAreEqual(props['border-w'] as number[]);
+    const borderAlign = this.props!['border-align'] as number;
+    const borderGap = this.props!['border-gap'] as number;
+
+    // Calculate outer and inner rectangle dimensions
+    const [t, r, b, l] = this.props!['border-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.shadowColor = this.toColorString(this.props!['shadow-color']);
-    this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+    this.computed.innerX = outerX + l;
+    this.computed.innerY = outerY + t;
+    this.computed.innerW = outerW - l - r;
+    this.computed.innerH = outerH - t - b;
+
+    this.computed.outerBorderRadius = [
+      Math.max(0.0, radius[0] + (Math.max(l, r) * borderAlign + borderGap)),
+      Math.max(0.0, radius[1] + (Math.max(t, b) * borderAlign + borderGap)),
+      Math.max(0.0, radius[2] + (Math.max(b, t) * borderAlign + borderGap)),
+      Math.max(0.0, radius[3] + (Math.max(l, r) * borderAlign + borderGap)),
+    ];
+
+    this.computed.innerBorderRadius = [
+      Math.max(0.0, this.computed.outerBorderRadius[0] - Math.max(l, r)),
+      Math.max(0.0, this.computed.outerBorderRadius[1] - Math.max(t, b)),
+      Math.max(0.0, this.computed.outerBorderRadius[2] - Math.max(b, t)),
+      Math.max(0.0, this.computed.outerBorderRadius[3] - Math.max(l, r)),
+    ];
+
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
+    this.computed.shadowRadius = this.computed.outerBorderRadius.map(
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
-  render(ctx, quad, renderContext) {
-    const { tx, ty, width, height } = quad;
+  render(ctx, node, renderContext) {
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
-      tx,
-      ty,
-      height,
-      width,
-      this.computed.shadowColor!,
+      tx + computed.outerX,
+      ty + computed.outerY,
+      w + computed.outerW,
+      h + computed.outerH,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
     render.roundedRectWithBorder(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
-      this.computed.radius!,
-      this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      tx,
+      ty,
+      w,
+      h,
+      computed.radius,
+      this.props!['border-gap'] as number,
+      computed.outerX,
+      computed.outerY,
+      computed.outerW,
+      computed.outerH,
+      computed.outerBorderRadius,
+      computed.innerX,
+      computed.innerY,
+      computed.innerW,
+      computed.innerH,
+      computed.innerBorderRadius,
+      computed.borderColor,
       renderContext,
     );
   },

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

@@ -35,34 +35,36 @@ export const RoundedWithShadow: CanvasShaderType<
   props: RoundedWithShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      props.radius as Vec4,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
-    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
     this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
-  render(ctx, quad, renderContext) {
-    const { tx, ty, width, height } = quad;
-
+  render(ctx, node, renderContext) {
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx,
       ty,
-      width,
-      height,
-      this.computed.shadowColor!,
+      w,
+      h,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
 
     const path = new Path2D();
-    render.roundRect(path, tx, ty, width, height, this.computed.radius!);
+    render.roundRect(path, tx, ty, w, h, computed.radius);
     ctx.clip(path);
     renderContext();
   },

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

@@ -35,13 +35,15 @@ export const Shadow: CanvasShaderType<ShadowProps, ComputedShadowValues> = {
     const blur = this.props!['blur'];
     this.computed.shadowRadius = [blur, blur, blur, blur];
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     shadow(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      tx,
+      ty,
+      w,
+      h,
       this.computed.shadowColor!,
       this.props!['projection'],
       this.computed.shadowRadius!,

package/src/core/shaders/canvas/utils/render.ts

@@ -48,55 +48,64 @@ export function roundedRectWithBorder(
   width: number,
   height: number,
   radius: Vec4,
-  borderWidth: Vec4,
-  borderRadius: Vec4,
+  borderGap: number,
+  outerX: number,
+  outerY: number,
+  outerW: number,
+  outerH: number,
+  outerBorderRadius: Vec4,
+  innerX: number,
+  innerY: number,
+  innerW: number,
+  innerH: number,
+  innerBorderRadius: Vec4,
   borderColor: string,
-  borderAsym: boolean,
   renderContext: () => void,
 ) {
-  if (borderAsym === false) {
-    const bWidth = borderWidth[0];
-    const bHalfWidth = bWidth * 0.5;
+  outerX += x;
+  outerY += y;
+  outerW += width;
+  outerH += height;
+
+  innerX += x;
+  innerY += y;
+  innerW += width;
+  innerH += height;
+
+  // no gap render strategy - to avoid artifacts between border and node
+  if (borderGap === 0) {
+    //draw outer border rounded rect
+    ctx.beginPath();
+    roundRect(ctx, outerX, outerY, outerW, outerH, outerBorderRadius);
+    ctx.fillStyle = borderColor;
+    ctx.fill();
+    ctx.closePath();
+
     const path = new Path2D();
-    roundRect(path, x, y, width, height, radius);
+    roundRect(path, innerX, innerY, innerW, innerH, innerBorderRadius as Vec4);
     ctx.clip(path);
-
     renderContext();
-
-    if (bWidth > 0) {
-      ctx.beginPath();
-      ctx.lineWidth = bWidth;
-      ctx.strokeStyle = borderColor;
-      roundRect(
-        ctx,
-        x + bHalfWidth,
-        y + bHalfWidth,
-        width - bWidth,
-        height - bWidth,
-        borderRadius,
-      );
-      ctx.stroke();
-    }
     return;
   }
 
-  ctx.beginPath();
-  roundRect(ctx, x, y, width, height, radius as Vec4);
-  ctx.fillStyle = borderColor;
-  ctx.fill();
-  const { 0: t, 1: r, 2: b, 3: l } = borderWidth as Vec4;
+  // with gap render strategy
 
+  //draw node content first
+  ctx.save();
   const path = new Path2D();
-  roundRect(
-    path,
-    x + l,
-    y + t,
-    width - (l + r),
-    height - (t + b),
-    borderRadius as Vec4,
-  );
+  roundRect(path, x, y, width, height, radius);
   ctx.clip(path);
   renderContext();
+  ctx.restore();
+
+  //draw border by clipping inner area from outer area
+  ctx.save();
+  const borderPath = new Path2D();
+  roundRect(borderPath, outerX, outerY, outerW, outerH, outerBorderRadius);
+  roundRect(borderPath, innerX, innerY, innerW, innerH, innerBorderRadius);
+  ctx.fillStyle = borderColor;
+  ctx.fill(borderPath, 'evenodd');
+  ctx.restore();
 }
 
 export function shadow(

package/src/core/shaders/templates/BorderTemplate.ts

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
-import { validateArrayLength4, type PrefixedType } from './shaderUtils.js';
+import { validateArrayLength4, type PrefixedType } from '../utils.js';
 
 /**
  * Properties of the {@link Border} shader
@@ -28,13 +28,23 @@ export interface BorderProps {
    *
    * @default 0
    */
-  width: number | [number, number, number, number];
+  w: number | [number, number, number, number];
   /**
    * Color of the border in 0xRRGGBBAA
    *
    * @default 0xffffffff
    */
   color: number;
+  /**
+   * Alignment of the border
+   *
+   * @default 'inside'
+   */
+  align: number | 'inside' | 'center' | 'outside';
+  /**
+   * Gap between node and border baseline. Default is 0. and generally edge of node)
+   */
+  gap: number;
   /**
    * Top width
    */
@@ -57,9 +67,9 @@ export function getBorderProps<P extends string>(
   prefix?: P,
 ): PrefixedType<BorderProps, P> {
   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) {
@@ -69,40 +79,60 @@ export function getBorderProps<P extends string>(
       },
     },
     [pf + 'color']: 0xffffffff,
+    [pf + 'align']: {
+      default: 0, //inside,
+      resolve(value) {
+        if (!isNaN(value)) {
+          return value as number;
+        }
+        if (typeof value === 'string') {
+          switch (value) {
+            case 'inside':
+              return 0;
+            case 'center':
+              return 0.5;
+            case 'outside':
+              return 1;
+          }
+        }
+        return this.default;
+      },
+    },
+    [pf + 'gap']: 0,
     [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<BorderProps, P>;

package/src/core/shaders/templates/HolePunchTemplate.ts

@@ -16,7 +16,7 @@
  */
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 
 /**
  * Properties of the {@link HolePunch} shader
@@ -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<HolePunchProps> = {
   props: {
     x: 0,
     y: 0,
-    width: 50,
-    height: 50,
+    w: 50,
+    h: 50,
     radius: {
       default: [0, 0, 0, 0],
       resolve(value) {

package/src/core/shaders/templates/RadialGradientTemplate.ts

@@ -32,15 +32,17 @@ export interface RadialGradientProps {
    */
   stops: number[];
   /**
-   * Width of the RadialGradientEffect
+   * radial width of the RadialGradientEffect
+   *
+   * @remarks from the center to the outer edge of the gradient
    */
-  width: number;
+  w: number;
   /**
-   * height of the RadialGradientEffect
-   *
-   * @remarks if not defined uses the width value
+   * radial height of the RadialGradientEffect
+   * if not defined uses the width value
+   * @remarks from the center to the outer edge of the gradient
    */
-  height: number;
+  h: number;
   /**
    * center point of where the RadialGradientEffect is drawn
    */
@@ -74,8 +76,8 @@ export const RadialGradientTemplate: CoreShaderType<RadialGradientProps> = {
         return value;
       },
     },
-    width: 50,
-    height: 50,
+    w: 50,
+    h: 50,
     pivot: [0.5, 0.5],
   },
 };

package/src/core/shaders/templates/RoundedTemplate.ts

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 
 /**
  * Properties of the {@link RoundedRectangle} shader

package/src/core/shaders/templates/RoundedWithBorderAndShadowTemplate.ts

@@ -18,7 +18,7 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { getBorderProps, type BorderProps } from './BorderTemplate.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
 
 export type RoundedWithBorderAndShadowProps = RoundedProps &

package/src/core/shaders/templates/RoundedWithBorderTemplate.ts

@@ -18,7 +18,7 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { getBorderProps, type BorderProps } from './BorderTemplate.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 
 export type RoundedWithBorderProps = RoundedProps &
   PrefixedType<BorderProps, 'border'>;

package/src/core/shaders/templates/RoundedWithShadowTemplate.ts

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
 
 export type RoundedWithShadowProps = RoundedProps &

package/src/core/shaders/templates/ShadowTemplate.ts

@@ -16,7 +16,7 @@
  */
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 
 export interface ShadowProps {
   /**