@lightningtv/solid 3.0.7-0 → 3.0.7-2

package/src/core/shaders.ts

@@ -73,6 +73,9 @@ export const defaultShaderRadialGradient: ShaderRadialGradient =
 export const defaultShaderLinearGradient: ShaderLinearGradient =
   lngr_shaders.LinearGradient;
 
+export const defaultShaderRoundedWithBorder =
+  lngr_shaders.RoundedWithBorder as ShaderRoundedWithBorder;
+
 function calcFactoredRadiusArray(
   radius: Vec4,
   width: number,
@@ -123,6 +126,7 @@ const roundedWithBorderProps: lngr.ShaderProps<ShaderRoundedWithBorderProps> = {
       return toValidVec4(value);
     },
   },
+  'border-align': 0,
   'top-left': {
     default: 0,
     set(value, props) {
@@ -206,297 +210,6 @@ const roundedWithBorderProps: lngr.ShaderProps<ShaderRoundedWithBorderProps> = {
   'border-inset': true,
 };
 
-export const defaultShaderRoundedWithBorder: ShaderRoundedWithBorder = {
-  props: roundedWithBorderProps,
-  canBatch: () => false,
-  update(node) {
-    let props = this.props!;
-    let borderWidth = props['border-w'] as Vec4;
-    let borderGap = props['border-gap'];
-    let inset = props['border-inset'];
-
-    let [b_t, b_r, b_b, b_l] = borderWidth;
-
-    this.uniformRGBA('u_borderColor', props['border-color']);
-    this.uniform4fa('u_border', borderWidth);
-    this.uniform1f('u_gap', borderGap);
-    this.uniform1i('u_inset', inset ? 1 : 0);
-
-    // Check if border is zero (no border widths)
-    let borderZero = b_t === 0 && b_r === 0 && b_b === 0 && b_l === 0;
-    this.uniform1i('u_borderZero', borderZero ? 1 : 0);
-
-    let origWidth = node.w;
-    let origHeight = node.h;
-    this.uniform2f('u_dimensions_orig', origWidth, origHeight);
-
-    let finalWidth = origWidth;
-    let finalHeight = origHeight;
-    if (!inset) {
-      // For outside borders, expand dimensions
-      finalWidth = origWidth + b_l + b_r + borderGap * 2;
-      finalHeight = origHeight + b_t + b_b + borderGap * 2;
-    }
-
-    // u_dimensions for the shader's SDF functions
-    this.uniform2f('u_dimensions', finalWidth, finalHeight);
-
-    // The `radius` property is for the content rectangle.
-    // Factor it against the appropriate dimensions to prevent self-intersection.
-    let contentRadius = calcFactoredRadiusArray(
-      props.radius as Vec4,
-      origWidth,
-      origHeight,
-    );
-
-    // Calculate the appropriate radius for the shader based on inset mode
-    let finalRadius = contentRadius;
-    if (!inset) {
-      // For each corner, the total radius is content radius + gap + border thickness.
-      // Border thickness at a corner is approximated as the max of the two adjacent border sides.
-      let outerRadius: Vec4 = [
-        contentRadius[0] + borderGap + Math.max(b_t, b_l), // top-left
-        contentRadius[1] + borderGap + Math.max(b_t, b_r), // top-right
-        contentRadius[2] + borderGap + Math.max(b_b, b_r), // bottom-right
-        contentRadius[3] + borderGap + Math.max(b_b, b_l), // bottom-left
-      ];
-      calcFactoredRadiusArray(
-        outerRadius,
-        finalWidth,
-        finalHeight,
-        finalRadius,
-      );
-    }
-
-    this.uniform4fa('u_radius', finalRadius);
-  },
-  vertex: /*glsl*/ `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    /* Passed by lightning renderer */
-    attribute vec2 a_position;
-    attribute vec2 a_textureCoords;
-    attribute vec4 a_color;
-    attribute vec2 a_nodeCoords;
-
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-
-    /* Passed by shader setup */
-    uniform vec2 u_dimensions;
-    uniform vec2 u_dimensions_orig;
-    uniform vec4 u_radius;
-    uniform vec4 u_border;
-    uniform float u_gap;
-    uniform bool u_inset;
-    uniform bool u_borderZero;
-
-    varying vec4 v_color;
-    varying vec2 v_texcoords;
-    varying vec2 v_nodeCoords;
-    varying vec4 v_borderEndRadius;
-    varying vec2 v_borderEndSize;
-
-    varying vec4 v_innerRadius;
-    varying vec2 v_innerSize;
-    varying vec2 v_halfDimensions;
-
-    void main() {
-      vec2 screen_space = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
-
-      v_color = a_color;
-      v_nodeCoords = a_nodeCoords;
-
-      float b_t = u_border.x;
-      float b_r = u_border.y;
-      float b_b = u_border.z;
-      float b_l = u_border.w;
-
-      // Calculate the offset to expand/contract the quad for border and gap
-      vec2 expansion_offset = vec2(0.0);
-      if (!u_inset) {
-        // Outside border: expand the quad
-        if (a_nodeCoords.x == 0.0) { // Left edge vertex
-          expansion_offset.x = -(b_l + u_gap);
-        } else { // Right edge vertex (a_nodeCoords.x == 1.0)
-          expansion_offset.x =  (b_r + u_gap);
-        }
-        if (a_nodeCoords.y == 0.0) { // Top edge vertex
-          expansion_offset.y = -(b_t + u_gap);
-        } else { // Bottom edge vertex (a_nodeCoords.y == 1.0)
-          expansion_offset.y =  (b_b + u_gap);
-        }
-      }
-      // For inset borders, no expansion needed - use original position
-
-      // Texture coordinate calculation
-      v_texcoords = a_textureCoords;
-      if (!u_inset) { // For outside borders, adjust texture coordinates for expansion
-        v_texcoords *= u_dimensions;
-        v_texcoords.x -= b_l + u_gap;
-        v_texcoords.y -= b_t + u_gap;
-        v_texcoords /= u_dimensions_orig;
-      }
-
-      v_halfDimensions = u_dimensions * 0.5;
-      if (!u_borderZero) {
-
-        float gap_x2 = u_gap * 2.0;
-
-        if (u_inset) {
-          // For inset borders, flip the meaning:
-          // v_borderEndRadius/Size represents the gap area
-          // v_innerRadius/Size represents the border area
-
-          // Gap area (v_borderEnd represents gap boundary) - uniform gap
-          v_borderEndRadius = u_radius - u_gap - 0.5;
-          v_borderEndSize = (u_dimensions - gap_x2 - 1.0) * 0.5;
-
-          // Border area (v_inner represents border boundary) - individual border widths
-          v_innerRadius.x = u_radius.x - u_gap - max(b_t, b_l) - 0.5;
-          v_innerRadius.y = u_radius.y - u_gap - max(b_t, b_r) - 0.5;
-          v_innerRadius.z = u_radius.z - u_gap - max(b_b, b_r) - 0.5;
-          v_innerRadius.w = u_radius.w - u_gap - max(b_b, b_l) - 0.5;
-
-          v_innerSize = (u_dimensions - gap_x2 - vec2(b_l + b_r, b_t + b_b) - 1.0) * 0.5;
-        } else {
-          // For outside borders, calculate from expanded dimensions inward
-          v_borderEndRadius.x = u_radius.x - max(b_t, b_l) - 0.5;
-          v_borderEndRadius.y = u_radius.y - max(b_t, b_r) - 0.5;
-          v_borderEndRadius.z = u_radius.z - max(b_b, b_r) - 0.5;
-          v_borderEndRadius.w = u_radius.w - max(b_b, b_l) - 0.5;
-
-          v_borderEndSize = (u_dimensions - vec2(b_l + b_r, b_t + b_b) - 1.0) * 0.5;
-
-          v_innerRadius.x = u_radius.x - max(b_t, b_l) - u_gap - 0.5;
-          v_innerRadius.y = u_radius.y - max(b_t, b_r) - u_gap - 0.5;
-          v_innerRadius.z = u_radius.z - max(b_b, b_r) - u_gap - 0.5;
-          v_innerRadius.w = u_radius.w - max(b_b, b_l) - u_gap - 0.5;
-
-          v_innerSize.x = u_dimensions.x - (b_l + b_r) - gap_x2 - 1.0;
-          v_innerSize.y = u_dimensions.y - (b_t + b_b) - gap_x2 - 1.0;
-          v_innerSize *= 0.5;
-        }
-
-        v_borderEndRadius = max(v_borderEndRadius, vec4(0.0));
-        v_innerRadius     = max(v_innerRadius, vec4(0.0));
-      }
-
-      vec2 normalized = (a_position + expansion_offset) * u_pixelRatio;
-
-      gl_Position = vec4(normalized.x * screen_space.x - 1.0, normalized.y * -abs(screen_space.y) + 1.0, 0.0, 1.0);
-      gl_Position.y = -sign(screen_space.y) * gl_Position.y;
-    }
-  `,
-  fragment: /*glsl*/ `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    /* Passed by lightning renderer */
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-    uniform float u_alpha;
-    uniform vec2 u_dimensions;
-    uniform sampler2D u_texture;
-
-    /* Passed by shader setup */
-    uniform vec4 u_radius;
-
-    uniform vec4 u_border;
-    uniform vec4 u_borderColor;
-    uniform bool u_inset;
-    uniform bool u_borderZero;
-
-    varying vec4 v_borderEndRadius;
-    varying vec2 v_borderEndSize;
-
-    varying vec4 v_color;
-    varying vec2 v_texcoords;
-    varying vec2 v_nodeCoords;
-
-    varying vec2 v_halfDimensions;
-    varying vec4 v_innerRadius;
-    varying vec2 v_innerSize;
-
-    float roundedBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
-    }
-
-    void main() {
-      vec4 contentTexColor = texture2D(u_texture, v_texcoords) * v_color;
-
-      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
-      float outerShapeDist = roundedBox(boxUv, v_halfDimensions, u_radius);
-      float outerShapeAlpha = 1.0 - smoothstep(0.0, 1.0, outerShapeDist); // 1 inside, 0 outside
-
-      if (u_borderZero) { // No border, effectively no gap from border logic
-        gl_FragColor = mix(vec4(0.0), contentTexColor, outerShapeAlpha) * u_alpha;
-        return;
-      }
-
-      // Adjust boxUv for non-uniform borders
-      // This adjusted UV is used for calculating distances to border-end and content shapes
-      vec2 adjustedBoxUv = boxUv;
-      vec2 borderAdjustedBoxUv = boxUv;
-
-      if (!u_inset) {
-        // For outside borders, use same adjustment for both calculations
-        adjustedBoxUv.x += (u_border.y - u_border.w) * 0.5;
-        adjustedBoxUv.y += (u_border.z - u_border.x) * 0.5;
-        borderAdjustedBoxUv = adjustedBoxUv;
-      } else {
-        // For inset borders, gap calculation uses no adjustment (uniform gap)
-        // Border calculation uses adjustment (non-uniform border)
-        borderAdjustedBoxUv.x += (u_border.y - u_border.w) * 0.5;
-        borderAdjustedBoxUv.y += (u_border.z - u_border.x) * 0.5;
-      }
-
-      // Distance to the inner edge of the border (where the gap begins)
-      float borderEndDist = roundedBox(adjustedBoxUv, v_borderEndSize, v_borderEndRadius);
-      float borderEndAlpha = 1.0 - smoothstep(0.0, 1.0, borderEndDist); // 1 if inside gap or content, 0 if in border or outside
-
-      // Distance to the content area (after the gap)
-      float contentDist = roundedBox(borderAdjustedBoxUv, v_innerSize, v_innerRadius);
-      float contentAlpha = 1.0 - smoothstep(0.0, 1.0, contentDist); // 1 if inside content, 0 if in gap, border or outside
-
-      vec4 finalColor;
-      if (u_inset) { // For inset borders: border <- gap <- element
-        // flip the logic: borderEndAlpha becomes gap, contentAlpha becomes border+content
-        if (contentAlpha > 0.0) { // Pixel is inside the content area (innermost)
-          finalColor = contentTexColor;
-        } else if (borderEndAlpha > 0.0) { // Pixel is inside the border area (middle)
-          vec4 borderColor = u_borderColor;
-          finalColor = mix(contentTexColor, vec4(borderColor.rgb, 1.0), borderColor.a);
-        } else { // Pixel is in the gap area (outermost) - show content through gap
-          finalColor = contentTexColor;
-        }
-      } else { // For outside borders: element -> gap -> border
-        if (contentAlpha > 0.0) { // Pixel is inside the content area
-          finalColor = contentTexColor;
-        } else if (borderEndAlpha > 0.0) { // Pixel is inside the gap area
-          finalColor = vec4(0.0); // Transparent gap
-        } else { // Pixel is inside the border area
-          vec4 borderColor = u_borderColor;
-          finalColor = borderColor;
-          finalColor.rgb *= finalColor.a;
-        }
-      }
-
-      gl_FragColor = mix(vec4(0.0), finalColor, outerShapeAlpha) * u_alpha;
-    }
-  `,
-};
-
 export function registerDefaultShaderRounded(
   shManager: IRendererShaderManager,
 ) {

package/src/primitives/borderBox.tsx

@@ -4,41 +4,38 @@ import {
   type NodeProps,
   type NodeStyles,
 } from '@lightningtv/solid';
-import {
-  createMemo,
-  getOwner,
-  onMount,
-  runWithOwner,
-  type Accessor,
-} from 'solid-js';
-import { fadeIn, fadeOut } from './FadeInOut.jsx';
+import { getOwner, runWithOwner, type Accessor } from 'solid-js';
 import { chainFunctions } from '@lightningtv/solid/primitives';
 
 export const BorderBoxStyle: NodeStyles = {
-  alpha: 0,
+  alpha: 0.01,
   borderSpace: 6,
   borderRadius: 20,
   border: { color: 0xffffff, width: 2 },
+  transition: { alpha: { duration: 100, easing: 'linear' } },
 };
 
 type BorderProps = NodeProps & { borderSpace?: number };
 const borderComponent = (props: BorderProps) => {
-  const space = createMemo(
-    () => props.borderSpace ?? (BorderBoxStyle.borderSpace as number),
-  );
+  const space = props.borderSpace ?? (BorderBoxStyle.borderSpace as number);
   return (
     <view
       skipFocus
       onCreate={(el) => {
         const parent = el.parent!;
-        el.width = parent.width + space() * 2;
-        el.height = parent.height + space() * 2;
-        fadeIn(el);
+        el.width = parent.width + space * 2;
+        el.height = parent.height + space * 2;
+        el.alpha = 1;
+      }}
+      onDestroy={(el) => {
+        return el
+          .animate({ alpha: 0 }, el.transition as any)
+          .start()
+          .waitUntilStopped();
       }}
-      onDestroy={fadeOut}
       style={BorderBoxStyle}
-      x={-space()}
-      y={-space()}
+      x={-space}
+      y={-space}
       {...props}
     />
   );
@@ -52,23 +49,21 @@ export function borderBox(
   let border: ElementNode | null;
   const owner = getOwner();
 
-  onMount(() => {
-    el.onFocusChanged = chainFunctions((f) => {
-      if (f) {
-        if (border) return;
-        runWithOwner(owner, () => {
-          const props = accessor();
-          border = borderComponent(
-            props === true || props === undefined ? ({} as NodeProps) : props,
-          ) as any as ElementNode;
-          insertNode(el, border);
-          border.render();
-        });
-      } else if (border) {
-        border.destroy();
-        el.removeChild(border!);
-        border = null;
-      }
-    }, el.onFocusChanged);
-  });
+  el.onFocusChanged = chainFunctions((f) => {
+    if (f) {
+      if (border) return;
+      runWithOwner(owner, () => {
+        const props = accessor();
+        border = borderComponent(
+          props === true || props === undefined ? ({} as NodeProps) : props,
+        ) as any as ElementNode;
+        insertNode(el, border);
+        border.render();
+      });
+    } else if (border) {
+      border.destroy();
+      el.removeChild(border!);
+      border = null;
+    }
+  }, el.onFocusChanged);
 }

package/dist/src/shaders/Rounded.d.ts

@@ -1,7 +0,0 @@
-import type { WebGlShaderType } from '@lightningjs/renderer/webgl';
-import { type RoundedProps } from './templates/RoundedTemplate.js';
-/**
- * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
- * as defined by the specified corner {@link RoundedProps.radius}
- */
-export declare const Rounded: WebGlShaderType<RoundedProps>;

package/dist/src/shaders/Rounded.js

@@ -1,88 +0,0 @@
-import { calcFactoredRadiusArray } from './utils.js';
-import { RoundedTemplate, } from './templates/RoundedTemplate.js';
-/**
- * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
- * as defined by the specified corner {@link RoundedProps.radius}
- */
-export const Rounded = {
-    props: RoundedTemplate.props,
-    update(node) {
-        this.uniform4fa('u_radius', calcFactoredRadiusArray(this.props.radius, node.w, node.h));
-    },
-    vertex: `
-  # ifdef GL_FRAGMENT_PRECISION_HIGH
-  precision highp float;
-  # else
-  precision mediump float;
-  # endif
-
-  attribute vec2 a_position;
-  attribute vec2 a_textureCoords;
-  attribute vec4 a_color;
-  attribute vec2 a_nodeCoords;
-
-  uniform vec2 u_resolution;
-  uniform float u_pixelRatio;
-
-  varying vec4 v_color;
-  varying vec2 v_textureCoords;
-  varying vec2 v_nodeCoords;
-
-  void main() {
-    vec2 normalized = a_position * u_pixelRatio;
-    vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
-
-    v_color = a_color;
-    v_nodeCoords = a_nodeCoords;
-    v_textureCoords = a_textureCoords;
-
-    gl_Position = vec4(
-      normalized.x * screenSpace.x - 1.0,
-      normalized.y * -abs(screenSpace.y) + 1.0,
-      0.0,
-      1.0
-    );
-  }
-`,
-    fragment: `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    uniform vec2 u_dimensions;
-    uniform float u_alpha;
-    uniform float u_pixelRatio;
-    uniform sampler2D u_texture;
-    uniform vec4 u_radius;
-
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
-    varying vec2 v_nodeCoords;
-
-    void main() {
-      vec2 halfDimensions = u_dimensions * 0.5;
-      vec2 boxUv = v_nodeCoords * u_dimensions - halfDimensions;
-
-      // Branchless radius selection based on quadrant
-      // x: TL, y: TR, z: BR, w: BL
-      vec2 stepVal = step(vec2(0.0), boxUv);
-      float r = mix(
-        mix(u_radius.x, u_radius.y, stepVal.x),
-        mix(u_radius.w, u_radius.z, stepVal.x),
-        stepVal.y
-      );
-
-      vec2 q = abs(boxUv) - halfDimensions + r;
-      float d = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
-
-      float edgeWidth = 1.0 / u_pixelRatio;
-      float alpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, d);
-
-      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      gl_FragColor = color * alpha * u_alpha;
-    }
-  `,
-};
-//# sourceMappingURL=Rounded.js.map

package/dist/src/shaders/Rounded.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Rounded.js","sourceRoot":"","sources":["../../../src/shaders/Rounded.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAa,MAAM,YAAY,CAAC;AAChE,OAAO,EACL,eAAe,GAEhB,MAAM,gCAAgC,CAAC;AAOxC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAkC;IACpD,KAAK,EAAE,eAAe,CAAC,KAAK;IAC5B,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCT;IACC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCT;CACF,CAAC"}

package/dist/src/shaders/RoundedWithBorder.d.ts

@@ -1,3 +0,0 @@
-import type { WebGlShaderType } from '@lightningjs/renderer/webgl';
-import { type RoundedWithBorderProps } from './templates/RoundedWithBorderTemplate.js';
-export declare const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps>;