@lightningtv/renderer 3.0.0-beta1 → 3.2.3

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

@@ -1,20 +1,3 @@
-/*
- * 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(
@@ -48,55 +31,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

@@ -1,23 +1,6 @@
-/*
- * 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 { 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 +11,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 +50,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 +62,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

@@ -1,22 +1,5 @@
-/*
- * 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 { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 
 /**
  * Properties of the {@link HolePunch} shader
@@ -33,13 +16,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 +50,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/LinearGradientTemplate.ts

@@ -1,20 +1,3 @@
-/*
- * 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 { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 
 /**

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

@@ -1,20 +1,3 @@
-/*
- * 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 { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 
 /**
@@ -32,15 +15,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 +59,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

@@ -1,23 +1,6 @@
-/*
- * 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 { 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

@@ -1,24 +1,7 @@
-/*
- * 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 { 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

@@ -1,32 +1,20 @@
-/*
- * 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 { 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'>;
+  PrefixedType<BorderProps, 'border'> & {
+    'border-fill': number;
+  };
 
 const props = Object.assign(
   {},
   RoundedTemplate.props,
   getBorderProps('border'),
+  {
+    'border-fill': 0x00000000,
+  },
 ) as RoundedWithBorderProps;
 
 export const RoundedWithBorderTemplate: CoreShaderType<RoundedWithBorderProps> =

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

@@ -1,23 +1,6 @@
-/*
- * 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 { 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

@@ -1,22 +1,5 @@
-/*
- * 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 { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 
 export interface ShadowProps {
   /**

package/src/core/shaders/utils.ts

@@ -0,0 +1,30 @@
+import { assertTruthy } from '../../utils.js';
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
+
+export const validateArrayLength4 = (value: number | number[]): Vec4 => {
+  if (!Array.isArray(value)) {
+    return [value, value, value, value];
+  }
+  assertTruthy(value);
+  if (value.length === 4) {
+    return value as Vec4;
+  }
+  if (value.length === 3) {
+    value[3] = value[0]!;
+    return value as Vec4;
+  }
+  if (value.length === 2) {
+    value[2] = value[0]!;
+    value[3] = value[1]!;
+    return value as Vec4;
+  }
+  value[0] = value[0] || 0;
+  value[1] = value[0];
+  value[2] = value[0];
+  value[3] = value[0];
+  return value as Vec4;
+};
+
+export type PrefixedType<T, P extends string | undefined = undefined> = {
+  [Key in keyof T as P extends string ? `${P}-${string & Key}` : Key]: T[Key];
+};