@solidtv/renderer 1.0.0 → 1.0.2

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

@@ -21,14 +21,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

@@ -78,14 +78,14 @@ export const RoundedWithBorder: CanvasShaderType<
       Math.max(0.0, this.computed.outerBorderRadius[3] - Math.max(l, r)),
     ];
   },
-  render(ctx, quad, renderContext) {
+  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-gap'] as number,
       computed.outerX,

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

@@ -79,15 +79,16 @@ export const RoundedWithBorderAndShadow: 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 + computed.outerX,
       ty + computed.outerY,
-      height + computed.outerH,
-      width + computed.outerW,
+      w + computed.outerW,
+      h + computed.outerH,
       computed.shadowColor,
       this.props!['shadow-projection'],
       computed.shadowRadius,
@@ -95,10 +96,10 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
     );
     render.roundedRectWithBorder(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      tx,
+      ty,
+      w,
+      h,
       computed.radius,
       this.props!['border-gap'] as number,
       computed.outerX,

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

@@ -30,8 +30,9 @@ 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;
 
     if (this.props!['shadow-color'] !== 0) {
@@ -39,8 +40,8 @@ export const RoundedWithShadow: CanvasShaderType<
         ctx,
         tx,
         ty,
-        width,
-        height,
+        w,
+        h,
         computed.shadowColor,
         this.props!['shadow-projection'],
         computed.shadowRadius,
@@ -49,7 +50,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

@@ -18,13 +18,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

@@ -55,24 +55,6 @@ export function roundedRectWithBorder(
   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();