@solidtv/renderer 1.0.0

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

@@ -0,0 +1,105 @@
+import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import {
+  RoundedWithBorderTemplate,
+  type RoundedWithBorderProps,
+} from '../templates/RoundedWithBorderTemplate.js';
+import type { ComputedBorderValues } from './Border.js';
+import type { ComputedRoundedValues } from './Rounded.js';
+import { roundedRectWithBorder } from './utils/render.js';
+
+export type ComputedRoundedWithBorderValues = ComputedRoundedValues &
+  ComputedBorderValues & {
+    outerBorderRadius: Vec4;
+    innerBorderRadius: Vec4;
+  };
+
+export const RoundedWithBorder: CanvasShaderType<
+  RoundedWithBorderProps,
+  ComputedRoundedWithBorderValues
+> = {
+  props: RoundedWithBorderTemplate.props,
+  saveAndRestore: true,
+  update(node) {
+    const props = this.props!;
+    const radius = calcFactoredRadiusArray(
+      props.radius as Vec4,
+      node.w,
+      node.h,
+    );
+    this.computed.radius = radius;
+    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) {
+    const computed = this.computed as ComputedRoundedWithBorderValues;
+    roundedRectWithBorder(
+      ctx,
+      quad.tx,
+      quad.ty,
+      quad.width,
+      quad.height,
+      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

@@ -0,0 +1,118 @@
+import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import {
+  RoundedWithBorderAndShadowTemplate,
+  type RoundedWithBorderAndShadowProps,
+} from '../templates/RoundedWithBorderAndShadowTemplate.js';
+import type { ComputedRoundedWithBorderValues } from './RoundedWithBorder.js';
+import type { ComputedShadowValues } from './Shadow.js';
+import * as render from './utils/render.js';
+
+type ComputedValues = ComputedRoundedWithBorderValues & ComputedShadowValues;
+
+export const RoundedWithBorderAndShadow: CanvasShaderType<
+  RoundedWithBorderAndShadowProps,
+  ComputedValues
+> = {
+  props: RoundedWithBorderAndShadowTemplate.props,
+  saveAndRestore: true,
+  update(node) {
+    const props = this.props!;
+    const radius = calcFactoredRadiusArray(
+      props.radius as Vec4,
+      node.w,
+      node.h,
+    );
+    this.computed.radius = radius;
+    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)),
+    ];
+
+    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;
+    const computed = this.computed as ComputedValues;
+    render.shadow(
+      ctx,
+      tx + computed.outerX,
+      ty + computed.outerY,
+      height + computed.outerH,
+      width + computed.outerW,
+      computed.shadowColor,
+      this.props!['shadow-projection'],
+      computed.shadowRadius,
+      this.stage.pixelRatio,
+    );
+    render.roundedRectWithBorder(
+      ctx,
+      quad.tx,
+      quad.ty,
+      quad.width,
+      quad.height,
+      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

@@ -0,0 +1,56 @@
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import {
+  RoundedWithShadowTemplate,
+  type RoundedWithShadowProps,
+} from '../templates/RoundedWithShadowTemplate.js';
+import type { ComputedRoundedValues } from './Rounded.js';
+import type { ComputedShadowValues } from './Shadow.js';
+import * as render from './utils/render.js';
+
+type ComputedValues = ComputedRoundedValues & ComputedShadowValues;
+
+export const RoundedWithShadow: CanvasShaderType<
+  RoundedWithShadowProps,
+  ComputedValues
+> = {
+  props: RoundedWithShadowTemplate.props,
+  saveAndRestore: true,
+  update(node) {
+    const props = this.props!;
+    const radius = calcFactoredRadiusArray(
+      props.radius as Vec4,
+      node.w,
+      node.h,
+    );
+    this.computed.radius = radius;
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
+    this.computed.shadowRadius = radius.map(
+      (value) => value + props['shadow-blur'],
+    ) as Vec4;
+  },
+  render(ctx, quad, renderContext) {
+    const { tx, ty, width, height } = quad;
+    const computed = this.computed as ComputedValues;
+
+    if (this.props!['shadow-color'] !== 0) {
+      render.shadow(
+        ctx,
+        tx,
+        ty,
+        width,
+        height,
+        computed.shadowColor,
+        this.props!['shadow-projection'],
+        computed.shadowRadius,
+        this.stage.pixelRatio,
+      );
+    }
+
+    const path = new Path2D();
+    render.roundRect(path, tx, ty, width, height, computed.radius);
+    ctx.clip(path);
+    renderContext();
+  },
+};

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

@@ -0,0 +1,35 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import {
+  ShadowTemplate,
+  type ShadowProps,
+} from '../templates/ShadowTemplate.js';
+import { shadow } from './utils/render.js';
+
+export interface ComputedShadowValues {
+  shadowColor: string;
+  shadowRadius: Vec4;
+}
+
+export const Shadow: CanvasShaderType<ShadowProps, ComputedShadowValues> = {
+  props: ShadowTemplate.props,
+  update() {
+    this.computed.shadowColor = this.toColorString(this.props!['color']);
+    const blur = this.props!['blur'];
+    this.computed.shadowRadius = [blur, blur, blur, blur];
+  },
+  render(ctx, quad, renderContext) {
+    shadow(
+      ctx,
+      quad.tx,
+      quad.ty,
+      quad.width,
+      quad.height,
+      this.computed.shadowColor!,
+      this.props!['projection'],
+      this.computed.shadowRadius!,
+      this.stage.pixelRatio,
+    );
+    renderContext();
+  },
+};

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

@@ -0,0 +1,143 @@
+import type { Vec4 } from '../../../renderers/webgl/internal/ShaderUtils.js';
+
+export function roundRect(
+  ctx: CanvasRenderingContext2D | Path2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: Vec4,
+) {
+  if (ctx.roundRect !== undefined) {
+    ctx.roundRect(x, y, width, height, radius);
+    return;
+  }
+  const { 0: tl, 1: tr, 2: br, 3: bl } = radius;
+  ctx.moveTo(x + tl, y);
+  ctx.lineTo(x + width - tr, y);
+  ctx.ellipse(x + width - tr, y + tr, tr, tr, 0, 1.5 * Math.PI, 2 * Math.PI);
+  ctx.lineTo(x + width, y - height - br);
+  ctx.ellipse(x + width - br, y + height - br, br, br, 0, 0, 0.5 * Math.PI);
+  ctx.lineTo(x + bl, y + height);
+  ctx.ellipse(x + bl, y + height - bl, bl, bl, 0, 0.5 * Math.PI, Math.PI);
+  ctx.lineTo(x, y + tl);
+  ctx.ellipse(x + tl, y + tl, tl, tl, 0, Math.PI, 1.5 * Math.PI);
+}
+
+export function roundedRectWithBorder(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: 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,
+  renderContext: () => void,
+) {
+  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, innerX, innerY, innerW, innerH, innerBorderRadius as Vec4);
+    ctx.clip(path);
+    renderContext();
+    return;
+  }
+
+  // with gap render strategy
+
+  //draw node content first
+  ctx.save();
+  const path = new Path2D();
+  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(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  color: string,
+  projection: Vec4,
+  radius: Vec4,
+  pixelRatio: number,
+) {
+  ctx.save();
+  const cw = ctx.canvas.width;
+  const ch = ctx.canvas.height;
+  const scaleFactor = (2 * projection[3] + width) / width;
+  ctx.scale(scaleFactor, scaleFactor);
+  ctx.shadowColor = color;
+  ctx.shadowBlur = projection[2] * pixelRatio;
+  ctx.shadowOffsetX = projection[0] + cw * pixelRatio - projection[3] * 0.5;
+  ctx.shadowOffsetY = projection[1] + ch * pixelRatio - projection[3] * 0.5;
+
+  const spreadFactor = projection[3];
+  ctx.beginPath();
+  roundRect(
+    ctx,
+    (x - spreadFactor - cw) / scaleFactor,
+    (y - spreadFactor - ch) / scaleFactor,
+    width + spreadFactor,
+    height + spreadFactor,
+    radius,
+  );
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.restore();
+}
+
+export function strokeLine(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  x2: number,
+  y2: number,
+  lineWidth: number,
+) {
+  ctx.beginPath();
+  ctx.lineWidth = lineWidth;
+  ctx.moveTo(x, y);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+}

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

@@ -0,0 +1,128 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { validateArrayLength4, type PrefixedType } from '../utils.js';
+
+/**
+ * Properties of the {@link Border} shader
+ */
+export interface BorderProps {
+  /**
+   * Width of the border in pixels
+   *
+   * @default 0
+   */
+  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
+   */
+  top: number;
+  /**
+   * Right width
+   */
+  right: number;
+  /**
+   * Bottom width
+   */
+  bottom: number;
+  /**
+   * Left width
+   */
+  left: number;
+}
+
+export function getBorderProps<P extends string>(
+  prefix?: P,
+): PrefixedType<BorderProps, P> {
+  const pf = prefix && prefix.length > 0 ? `${prefix}-` : '';
+  const w = pf + 'w';
+  return {
+    [w]: {
+      default: [0, 0, 0, 0],
+      resolve(value) {
+        if (value !== undefined) {
+          return validateArrayLength4(value);
+        }
+        return ([] as number[]).concat(this.default);
+      },
+    },
+    [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[w] as Vec4)[0] = value;
+      },
+      get(props) {
+        return (props[w] as Vec4)[0];
+      },
+    },
+    [pf + 'right']: {
+      default: 0,
+      set(value, props) {
+        (props[w] as Vec4)[1] = value;
+      },
+      get(props) {
+        return (props[w] as Vec4)[1];
+      },
+    },
+    [pf + 'bottom']: {
+      default: 0,
+      set(value, props) {
+        (props[w] as Vec4)[2] = value;
+      },
+      get(props) {
+        return (props[w] as Vec4)[2];
+      },
+    },
+    [pf + 'left']: {
+      default: 0,
+      set(value, props) {
+        (props[w] as Vec4)[3] = value;
+      },
+      get(props) {
+        return (props[w] as Vec4)[3];
+      },
+    },
+  } as PrefixedType<BorderProps, P>;
+}
+
+type PlainBorderProps = PrefixedType<BorderProps>;
+
+export const BorderTemplate: CoreShaderType<BorderProps> = {
+  props: getBorderProps() as PlainBorderProps,
+};

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

@@ -0,0 +1,65 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import { validateArrayLength4 } from '../utils.js';
+
+/**
+ * Properties of the {@link HolePunch} shader
+ */
+export interface HolePunchProps {
+  /**
+   * X position where the hole punch starts
+   */
+  x: number;
+  /**
+   * Y position where the hole punch starts
+   */
+  y: number;
+  /**
+   * Width of the hole punch
+   */
+  w: number;
+  /**
+   * height of the hole punch
+   *
+   * @remarks if not defined uses the width value
+   */
+  h: number;
+  /**
+   * Corner radius in pixels, to cut out of the corners of the hole punch
+   *
+   * @remarks
+   * You can input an array with a length of up to four or a number.
+   *
+   * array length 4:
+   * [topLeft, topRight, bottomRight, bottomLeft]
+   *
+   * array length 2:
+   * [20, 40] -> [20(topLeft), 40(topRight), 20(bottomRight), 40(bottomLeft)]
+   *
+   * array length 3:
+   * [20, 40, 60] -> [20(topLeft), 40(topRight), 60(bottomRight), 20(bottomLeft)]
+   *
+   * number:
+   * 30 -> [30, 30, 30, 30]
+   *
+   * @default -1
+   */
+  radius: number | number[];
+}
+
+export const HolePunchTemplate: CoreShaderType<HolePunchProps> = {
+  props: {
+    x: 0,
+    y: 0,
+    w: 50,
+    h: 50,
+    radius: {
+      default: [0, 0, 0, 0],
+      resolve(value) {
+        if (value !== undefined) {
+          return validateArrayLength4(value);
+        }
+        return ([] as number[]).concat(this.default);
+      },
+    },
+  },
+};

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

@@ -0,0 +1,54 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+
+/**
+ * Properties of the {@link LinearGradient} shader
+ */
+export interface LinearGradientProps {
+  /**
+   * Array of colors to be used in the LinearGradient shader
+   *
+   * @default [0xff000000, 0xffffffff]
+   */
+  colors: number[];
+  /**
+   * Angle of the LinearGradient shader, Angle in Radians
+   *
+   * @default 0
+   */
+  angle: number;
+  /**
+   * Array of color stops
+   */
+  stops: number[];
+}
+
+export const LinearGradientTemplate: CoreShaderType<LinearGradientProps> = {
+  props: {
+    colors: {
+      default: [0x000000ff, 0xffffffff],
+      resolve(value) {
+        if (value !== undefined && value.length > 0) {
+          return value;
+        }
+        return ([] as number[]).concat(this.default);
+      },
+    },
+    stops: {
+      default: [0, 1],
+      resolve(value, props) {
+        if (value !== undefined && value.length === props.colors.length) {
+          return value;
+        }
+        if (value === undefined) {
+          value = [];
+        }
+        const len = props.colors.length;
+        for (let i = 0; i < len; i++) {
+          value[i] = i * (1 / (len - 1));
+        }
+        return value;
+      },
+    },
+    angle: 0,
+  },
+};