@lightningjs/renderer 3.0.0-beta20 → 3.0.0-beta21

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

@@ -38,14 +38,14 @@ export const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues> = {
       node.h,
     );
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     const path = new Path2D();
     roundRect(
       path,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      node.globalTransform!.tx,
+      node.globalTransform!.ty,
+      node.props.w,
+      node.props.h,
       this.computed.radius!,
     );
     ctx.clip(path);

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

@@ -26,11 +26,15 @@ 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,
@@ -44,28 +48,74 @@ export const RoundedWithBorder: CanvasShaderType<
     this.computed.radius = radius;
     this.computed.borderColor = this.toColorString(props['border-color']);
     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-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),
-      Math.max(0.0, radius[2] - Math.max(z, y) * 0.5),
-      Math.max(0.0, radius[3] - Math.max(z, w) * 0.5),
+    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) {
-    const computed = this.computed as ComputedValues;
+  render(ctx, node, renderContext) {
+    const computed = this.computed as ComputedRoundedWithBorderValues;
     roundedRectWithBorder(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      node.globalTransform!.tx,
+      node.globalTransform!.ty,
+      node.props.w,
+      node.props.h,
       computed.radius,
-      this.props!['border-w'] as Vec4,
-      computed.borderRadius,
+      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,
-      computed.borderAsym,
       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,
@@ -47,25 +44,68 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
     this.computed.radius = radius;
     this.computed.borderColor = this.toColorString(props['border-color']);
     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;
+    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)),
+    ];
 
     this.computed.shadowColor = this.toColorString(props['shadow-color']);
-    this.computed.shadowRadius = radius.map(
+    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,
+      tx + computed.outerX,
+      ty + computed.outerY,
+      w + computed.outerW,
+      h + computed.outerH,
       computed.shadowColor,
       this.props!['shadow-projection'],
       computed.shadowRadius,
@@ -73,15 +113,23 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
     );
     render.roundedRectWithBorder(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      tx,
+      ty,
+      w,
+      h,
       computed.radius,
-      this.props!['border-w'] as Vec4,
-      computed.borderRadius,
+      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,
-      computed.borderAsym,
       renderContext,
     );
   },

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

@@ -47,15 +47,16 @@ export const RoundedWithShadow: CanvasShaderType<
       (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,
+      w,
+      h,
       computed.shadowColor,
       this.props!['shadow-projection'],
       computed.shadowRadius,
@@ -63,7 +64,7 @@ export const RoundedWithShadow: CanvasShaderType<
     );
 
     const path = new Path2D();
-    render.roundRect(path, tx, ty, width, height, 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

@@ -35,6 +35,16 @@ export interface BorderProps {
    * @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
    */
@@ -69,6 +79,26 @@ 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) {

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

@@ -14,8 +14,6 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { valuesAreEqual } from '../../lib/utils.js';
 import {
   BorderTemplate,
   type BorderProps,
@@ -28,6 +26,8 @@ export const Border: WebGlShaderType<BorderProps> = {
   update(node) {
     this.uniform4fa('u_borderWidth', this.props!.w as Vec4);
     this.uniformRGBA('u_borderColor', this.props!.color);
+    this.uniform1f('u_borderGap', this.props!.gap as number);
+    this.uniform1f('u_borderAlign', this.props!.align as number);
   },
   vertex: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -47,27 +47,67 @@ export const Border: WebGlShaderType<BorderProps> = {
 
     uniform vec4 u_radius;
     uniform vec4 u_borderWidth;
+    uniform float u_borderGap;
+    uniform float u_borderAlign;
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
     varying vec2 v_nodeCoords;
 
     varying vec2 v_innerSize;
+    varying vec2 v_outerSize;
+    varying vec2 v_outerBorderUv;
+    varying vec2 v_innerBorderUv;
     varying vec2 v_halfDimensions;
+    varying float v_edgeWidth;
 
     void main() {
-      vec2 normalized = a_position * u_pixelRatio;
       vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+      vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+      v_edgeWidth = 1.0 / u_pixelRatio;
+
+      float borderTop = u_borderWidth.x;
+      float borderRight = u_borderWidth.y;
+      float borderBottom = u_borderWidth.z;
+      float borderLeft = u_borderWidth.w;
+
+      v_outerBorderUv = vec2(0.0);
+      v_innerBorderUv = vec2(0.0);
+
+      vec2 borderSize = vec2(borderRight + borderLeft, borderTop + borderBottom);
+      vec2 extraSize = borderSize * u_borderAlign;
+      float gapLeft = step(0.001, borderLeft) * u_borderGap;
+      float gapRight = step(0.001, borderRight) * u_borderGap;
+      float gapTop = step(0.001, borderTop) * u_borderGap;
+      float gapBottom = step(0.001, borderBottom) * u_borderGap;
+      vec2 gapSize = vec2(gapLeft + gapRight, gapTop + gapBottom);
+
+      v_outerSize = (u_dimensions + gapSize + extraSize) * 0.5;
+      v_innerSize = v_outerSize - borderSize * 0.5;
+
+      // Use sign() to avoid branching
+      vec2 borderDiff = vec2(borderRight - borderLeft, borderBottom - borderTop);
+      vec2 signDiff = sign(borderDiff);
+      borderDiff = abs(borderDiff);
+
+      vec2 gapDiff = vec2(gapRight - gapLeft, gapBottom - gapTop);
+      vec2 signGapDiff = sign(gapDiff);
+      gapDiff = abs(gapDiff);
+
+      v_outerBorderUv = -signDiff * borderDiff * u_borderAlign * 0.5 - signGapDiff * gapDiff * 0.5;
+      v_innerBorderUv = v_outerBorderUv + signDiff * borderDiff * 0.5;
+
+      vec2 edgeOffsetExtra = step(u_dimensions * 0.5, v_outerSize) * edge * (extraSize + u_borderGap);
+      vec2 borderEdge = edgeOffsetExtra;
+
+      vec2 vertexPos = (a_position + edge + borderEdge) * u_pixelRatio;
+      gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
 
       v_color = a_color;
-      v_nodeCoords = a_nodeCoords;
-      v_textureCoords = a_textureCoords;
+      v_nodeCoords = a_nodeCoords + (screenSpace + borderEdge) / (u_dimensions);
+      v_textureCoords = a_textureCoords + (screenSpace + borderEdge) / (u_dimensions);
 
       v_halfDimensions = u_dimensions * 0.5;
-      v_innerSize = vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]), u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) * 0.5 - 0.5;
-
-      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
-      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
     }
   `,
   fragment: `
@@ -86,13 +126,18 @@ export const Border: WebGlShaderType<BorderProps> = {
 
     uniform vec4 u_borderWidth;
     uniform vec4 u_borderColor;
+    uniform float u_borderGap;
 
     varying vec4 v_color;
     varying vec2 v_nodeCoords;
     varying vec2 v_textureCoords;
 
     varying vec2 v_innerSize;
+    varying vec2 v_outerSize;
+    varying vec2 v_outerBorderUv;
+    varying vec2 v_innerBorderUv;
     varying vec2 v_halfDimensions;
+    varying float v_edgeWidth;
 
     float box(vec2 p, vec2 s) {
       vec2 q = abs(p) - s;
@@ -101,16 +146,28 @@ export const Border: WebGlShaderType<BorderProps> = {
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
 
-      boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
-      boxUv.y += u_borderWidth.z > u_borderWidth.x ? (u_borderWidth.z - u_borderWidth.x) * 0.5 : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
+      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth);
+      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth);
+
+      if(u_borderGap == 0.0) {
+        resultColor = mix(resultColor, u_borderColor, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist));
+        resultColor = mix(resultColor, color, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist));
+        gl_FragColor = resultColor * u_alpha;
+        return;
+      }
+
+      float nodeDist = box(boxUv, v_halfDimensions - v_edgeWidth);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
 
-      float innerDist = box(boxUv, v_innerSize);
-      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
+      float borderDist = max(-innerDist, outerDist);
+      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      resultColor = mix(resultColor, color, nodeAlpha);
+      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
 
-      vec4 resColor = mix(u_borderColor, color, innerAlpha);
-      gl_FragColor = resColor * u_alpha;
+      gl_FragColor = resultColor * u_alpha;
     }
   `,
 };