@lightningjs/renderer 2.12.1 → 3.0.0-beta1

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

@@ -0,0 +1,113 @@
+/*
+ * 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 type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import {
+  RadialGradientTemplate,
+  type RadialGradientProps,
+} from '../templates/RadialGradientTemplate.js';
+
+export interface ComputedRadialGradientValues {
+  pivotX: number;
+  pivotY: number;
+  scaleX: number;
+  scaleY: number;
+  size: number;
+  colors: string[];
+}
+
+export const RadialGradient: CanvasShaderType<
+  RadialGradientProps,
+  ComputedRadialGradientValues
+> = {
+  props: RadialGradientTemplate.props,
+  update(node) {
+    let scaleX = 1;
+    let scaleY = 1;
+
+    const pWidth = this.props!.width;
+    const pHeight = this.props!.height;
+    if (pWidth > pHeight) {
+      scaleX = pWidth / pHeight;
+    } else if (pHeight > pWidth) {
+      scaleY = pHeight / pWidth;
+    }
+
+    this.computed = {
+      pivotX: this.props!.pivot[0] * node.width,
+      pivotY: this.props!.pivot[1] * node.height,
+      scaleX,
+      scaleY,
+      size: Math.min(pWidth, pHeight) * 0.5,
+      colors: this.props!.colors.map((value) => this.toColorString(value)),
+    };
+  },
+  render(ctx, quad, renderContext) {
+    renderContext();
+
+    const { scaleX, scaleY, pivotX, pivotY } = this.computed!;
+    const colors = this.computed.colors!;
+    let x = quad.tx + pivotX!;
+    let y = quad.ty + pivotY!;
+
+    if (scaleX === scaleY) {
+      const gradient = ctx.createRadialGradient(
+        x,
+        y,
+        0,
+        x,
+        y,
+        this.computed.size!,
+      );
+
+      for (let i = 0; i < colors.length; i++) {
+        gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+      }
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+      return;
+    }
+
+    ctx.save();
+    ctx.scale(scaleX!, scaleY!);
+    x = x / scaleX!;
+    y = y / scaleY!;
+    const gradient = ctx.createRadialGradient(
+      x,
+      y,
+      0,
+      x,
+      y,
+      this.computed.size!,
+    );
+
+    for (let i = 0; i < colors.length; i++) {
+      gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+    }
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(
+      quad.tx / scaleX!,
+      quad.ty / scaleY!,
+      quad.width / scaleX!,
+      quad.height / scaleY!,
+    );
+
+    ctx.restore();
+  },
+};

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

@@ -0,0 +1,55 @@
+/*
+ * 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 { calcFactoredRadiusArray } from '../../lib/utils.js';
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import {
+  RoundedTemplate,
+  type RoundedProps,
+} from '../templates/RoundedTemplate.js';
+import { roundRect } from './utils/render.js';
+
+export interface ComputedRoundedValues {
+  radius: Vec4;
+}
+
+export const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues> = {
+  props: RoundedTemplate.props,
+  saveAndRestore: true,
+  update(node) {
+    this.computed.radius = calcFactoredRadiusArray(
+      this.props!.radius as Vec4,
+      node.width,
+      node.height,
+    );
+  },
+  render(ctx, quad, renderContext) {
+    const path = new Path2D();
+    roundRect(
+      path,
+      quad.tx,
+      quad.ty,
+      quad.width,
+      quad.height,
+      this.computed.radius!,
+    );
+    ctx.clip(path);
+
+    renderContext();
+  },
+};

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

@@ -0,0 +1,68 @@
+/*
+ * 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 { 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';
+
+type ComputedValues = ComputedRoundedValues & ComputedBorderValues;
+
+export const RoundedWithBorder: CanvasShaderType<
+  RoundedWithBorderProps,
+  ComputedValues
+> = {
+  props: RoundedWithBorderTemplate.props,
+  saveAndRestore: true,
+  update(node) {
+    const radius = calcFactoredRadiusArray(
+      this.props!.radius as Vec4,
+      node.width,
+      node.height,
+    );
+    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;
+  },
+  render(ctx, quad, renderContext) {
+    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!,
+      renderContext,
+    );
+  },
+};

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

@@ -0,0 +1,88 @@
+/*
+ * 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 { 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 { ComputedBorderValues } from './Border.js';
+import type { ComputedRoundedValues } from './Rounded.js';
+import type { ComputedShadowValues } from './Shadow.js';
+import * as render from './utils/render.js';
+
+type ComputedValues = ComputedRoundedValues &
+  ComputedBorderValues &
+  ComputedShadowValues;
+
+export const RoundedWithBorderAndShadow: CanvasShaderType<
+  RoundedWithBorderAndShadowProps,
+  ComputedValues
+> = {
+  props: RoundedWithBorderAndShadowTemplate.props,
+  saveAndRestore: true,
+  update(node) {
+    const radius = calcFactoredRadiusArray(
+      this.props!.radius as Vec4,
+      node.width,
+      node.height,
+    );
+    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.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowRadius = radius.map(
+      (value) => value + this.props!['shadow-blur'],
+    ) as Vec4;
+  },
+  render(ctx, quad, renderContext) {
+    const { tx, ty, width, height } = quad;
+    render.shadow(
+      ctx,
+      tx,
+      ty,
+      height,
+      width,
+      this.computed.shadowColor!,
+      this.props!['shadow-projection'],
+      this.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!,
+      renderContext,
+    );
+  },
+};

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

@@ -0,0 +1,69 @@
+/*
+ * 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 { 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 radius = calcFactoredRadiusArray(
+      this.props!.radius as Vec4,
+      node.width,
+      node.height,
+    );
+    this.computed.radius = radius;
+    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowRadius = radius.map(
+      (value) => value + this.props!['shadow-blur'],
+    ) as Vec4;
+  },
+  render(ctx, quad, renderContext) {
+    const { tx, ty, width, height } = quad;
+
+    render.shadow(
+      ctx,
+      tx,
+      ty,
+      width,
+      height,
+      this.computed.shadowColor!,
+      this.props!['shadow-projection'],
+      this.computed.shadowRadius!,
+      this.stage.pixelRatio,
+    );
+
+    const path = new Path2D();
+    render.roundRect(path, tx, ty, width, height, this.computed.radius!);
+    ctx.clip(path);
+    renderContext();
+  },
+};

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

@@ -0,0 +1,52 @@
+/*
+ * 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 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,151 @@
+/*
+ * 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 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,
+  borderWidth: Vec4,
+  borderRadius: Vec4,
+  borderColor: string,
+  borderAsym: boolean,
+  renderContext: () => void,
+) {
+  if (borderAsym === false) {
+    const bWidth = borderWidth[0];
+    const bHalfWidth = bWidth * 0.5;
+    const path = new Path2D();
+    roundRect(path, x, y, width, height, radius);
+    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;
+
+  const path = new Path2D();
+  roundRect(
+    path,
+    x + l,
+    y + t,
+    width - (l + r),
+    height - (t + b),
+    borderRadius as Vec4,
+  );
+  ctx.clip(path);
+  renderContext();
+}
+
+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();
+}