@lightningjs/renderer 3.0.0-beta20 → 3.0.0-beta21

package/dist/src/core/shaders/canvas/Border.js

@@ -17,41 +17,80 @@
 import { formatRgba, parseColorRgba } from '../../lib/colorParser.js';
 import { valuesAreEqual } from '../../lib/utils.js';
 import { BorderTemplate, } from '../templates/BorderTemplate.js';
-import { strokeLine } from './utils/render.js';
 export const Border = {
     props: BorderTemplate.props,
     update() {
         this.computed.borderColor = formatRgba(parseColorRgba(this.props.color));
         this.computed.borderAsym = !valuesAreEqual(this.props.w);
-    },
-    render(ctx, quad, renderContext) {
-        renderContext();
-        ctx.strokeStyle = this.computed.borderColor;
-        if (this.computed.borderAsym === false && this.props.w[0] > 0) {
-            const bWidth = this.props.w[0];
-            const bHalfWidth = bWidth * 0.5;
-            ctx.lineWidth = bWidth;
-            ctx.beginPath();
-            ctx.strokeRect(quad.tx + bHalfWidth, quad.ty + bHalfWidth, quad.width - bWidth, quad.height - bWidth);
+        const borderAlign = this.props.align;
+        const borderGap = this.props.gap;
+        const borderW = this.props.w;
+        if (this.computed.borderAsym === false) {
+            const bWidth = borderW[0] * 0.5;
+            //inside
+            const baseline = bWidth - borderW[0] * borderAlign - borderGap;
+            this.computed.outerX = baseline;
+            this.computed.outerY = baseline;
+            this.computed.outerW = -baseline * 2;
+            this.computed.outerH = -baseline * 2;
             return;
         }
-        const { 0: t, 1: r, 2: b, 3: l } = this.props.w;
-        if (t > 0) {
-            const y = quad.ty + t * 0.5;
-            strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t);
-        }
+        // Calculate outer and inner rectangle dimensions
+        const [t, r, b, l] = this.props.w;
+        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) {
-            const x = quad.tx + quad.width - r * 0.5;
-            strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, r);
+            outerW += r * borderAlign + borderGap;
+        }
+        if (l > 0) {
+            outerW += l * borderAlign + borderGap;
         }
         if (b > 0) {
-            const y = quad.ty + quad.height - b * 0.5;
-            strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, b);
+            outerH += b * borderAlign + borderGap;
         }
-        if (l > 0) {
-            const x = quad.tx + l * 0.5;
-            strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, l);
+        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;
+    },
+    render(ctx, node, renderContext) {
+        renderContext();
+        const computed = this.computed;
+        const { tx, ty } = node.globalTransform;
+        const { w, h } = node.props;
+        ctx.strokeStyle = computed.borderColor;
+        if (computed.borderAsym === false && this.props.w[0] > 0) {
+            ctx.lineWidth = this.props.w[0];
+            ctx.beginPath();
+            ctx.strokeRect(tx + computed.outerX, ty + computed.outerY, w + computed.outerW, h + computed.outerH);
+            return;
         }
+        // Calculate outer rectangle (including border)
+        const outerX = tx + computed.outerX;
+        const outerY = ty + computed.outerY;
+        const outerW = w + computed.outerW;
+        const outerH = h + computed.outerH;
+        // Calculate inner rectangle (excluding border)
+        const innerX = tx + computed.innerX;
+        const innerY = ty + computed.innerY;
+        const innerW = w + computed.innerW;
+        const innerH = h + computed.innerH;
+        // Use clip to subtract inner from outer
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(outerX, outerY, outerW, outerH);
+        ctx.rect(innerX, innerY, innerW, innerH);
+        ctx.clip('evenodd');
+        ctx.fillStyle = this.computed.borderColor;
+        ctx.fillRect(outerX, outerY, outerW, outerH);
+        ctx.restore();
     },
 };
 //# sourceMappingURL=Border.js.map

package/dist/src/core/shaders/canvas/Border.js.map

@@ -1 +1 @@
-{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Border.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Border.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/canvas/HolePunch.js

@@ -26,8 +26,9 @@ export const HolePunch = {
         ctx.save();
         renderContext();
         const { x, y, w, h } = this.props;
+        const gt = quad.globalTransform;
         ctx.beginPath();
-        roundRect(ctx, quad.tx + x, quad.ty + y, w, h, this.computed.radius);
+        roundRect(ctx, gt.tx + x, gt.ty + y, w, h, this.computed.radius);
         ctx.closePath();
         ctx.fillStyle = 'black';
         ctx.globalCompositeOperation = 'destination-out';

package/dist/src/core/shaders/canvas/HolePunch.js.map

@@ -1 +1 @@
-{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/HolePunch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,SAAS,GAGlB;IACF,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAM,CAAC,CAAC,EACb,IAAI,CAAC,KAAM,CAAC,CAAC,CACd,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAM,CAAC;QACnC,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAO,CAAC,CAAC;QACtE,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;QACxB,GAAG,CAAC,wBAAwB,GAAG,iBAAiB,CAAC;QACjD,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,GAAG,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;CACF,CAAC"}
+{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/HolePunch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,SAAS,GAGlB;IACF,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAM,CAAC,CAAC,EACb,IAAI,CAAC,KAAM,CAAC,CAAC,CACd,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAM,CAAC;QACnC,MAAM,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC;QACjC,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,SAAS,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAO,CAAC,CAAC;QAClE,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;QACxB,GAAG,CAAC,wBAAwB,GAAG,iBAAiB,CAAC;QACjD,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,GAAG,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/LinearGradient.js

@@ -32,17 +32,19 @@ export const LinearGradient = {
             colors: this.props.colors.map((value) => this.toColorString(value)),
         };
     },
-    render(ctx, quad, renderContext) {
+    render(ctx, node, renderContext) {
         renderContext();
         const computed = this.computed;
-        const gradient = ctx.createLinearGradient(quad.tx + computed.x0, quad.ty + computed.y0, quad.tx + computed.x1, quad.ty + computed.y1);
+        const { tx, ty } = node.globalTransform;
+        const { w, h } = node.props;
+        const gradient = ctx.createLinearGradient(tx + computed.x0, ty + computed.y0, tx + computed.x1, ty + computed.y1);
         const colors = computed.colors;
         const stops = this.props.stops;
         for (let i = 0; i < colors.length; i++) {
             gradient.addColorStop(stops[i], colors[i]);
         }
         ctx.fillStyle = gradient;
-        ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+        ctx.fillRect(tx, ty, w, h);
     },
 };
 //# sourceMappingURL=LinearGradient.js.map

package/dist/src/core/shaders/canvas/LinearGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/LinearGradient.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAUhD,MAAM,CAAC,MAAM,cAAc,GAGvB;IACF,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;QACvB,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YACtC,GAAG,CAAC;QAEN,IAAI,CAAC,QAAQ,GAAG;YACd,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,GAAG;YACzC,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,GAAG;YAC1C,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,GAAG;YACnD,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,OAAO,GAAG,GAAG;YACpD,MAAM,EAAE,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrE,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,aAAa,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAwC,CAAC;QAC/D,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CACvC,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,EACrB,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,EACrB,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,EACrB,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,CACtB,CAAC;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC;QAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAE,EAAE,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;QAC/C,CAAC;QACD,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC;QACzB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;CACF,CAAC"}
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/LinearGradient.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAUhD,MAAM,CAAC,MAAM,cAAc,GAGvB;IACF,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;QACvB,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YACtC,GAAG,CAAC;QAEN,IAAI,CAAC,QAAQ,GAAG;YACd,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,GAAG;YACzC,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,GAAG;YAC1C,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,GAAG;YACnD,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,OAAO,GAAG,GAAG;YACpD,MAAM,EAAE,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrE,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,aAAa,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAwC,CAAC;QAC/D,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC;QACzC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CACvC,EAAE,GAAG,QAAQ,CAAC,EAAE,EAChB,EAAE,GAAG,QAAQ,CAAC,EAAE,EAChB,EAAE,GAAG,QAAQ,CAAC,EAAE,EAChB,EAAE,GAAG,QAAQ,CAAC,EAAE,CACjB,CAAC;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC;QAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAE,EAAE,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;QAC/C,CAAC;QACD,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC;QACzB,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RadialGradient.js

@@ -38,12 +38,14 @@ export const RadialGradient = {
             colors: props.colors.map((value) => this.toColorString(value)),
         };
     },
-    render(ctx, quad, renderContext) {
+    render(ctx, node, renderContext) {
         renderContext();
         const { scaleX, scaleY, pivotX, pivotY, colors, size } = this
             .computed;
-        let x = quad.tx + pivotX;
-        let y = quad.ty + pivotY;
+        const { tx, ty } = node.globalTransform;
+        const { w, h } = node.props;
+        let x = tx + pivotX;
+        let y = ty + pivotY;
         const stops = this.props.stops;
         if (scaleX === scaleY) {
             const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
@@ -51,7 +53,7 @@ export const RadialGradient = {
                 gradient.addColorStop(stops[i], colors[i]);
             }
             ctx.fillStyle = gradient;
-            ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+            ctx.fillRect(tx, ty, w, h);
             return;
         }
         ctx.save();
@@ -63,7 +65,7 @@ export const RadialGradient = {
             gradient.addColorStop(stops[i], colors[i]);
         }
         ctx.fillStyle = gradient;
-        ctx.fillRect(quad.tx / scaleX, quad.ty / scaleY, quad.width / scaleX, quad.height / scaleY);
+        ctx.fillRect(tx / scaleX, ty / scaleY, w / scaleX, h / scaleY);
         ctx.restore();
     },
 };

package/dist/src/core/shaders/canvas/RadialGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RadialGradient.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RadialGradient.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAWhD,MAAM,CAAC,MAAM,cAAc,GAGvB;IACF,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAI;QACT,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,KAA4B,CAAC;QAChD,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;QACvB,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;QACxB,IAAI,MAAM,GAAG,OAAO,EAAE,CAAC;YACrB,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;QAC5B,CAAC;aAAM,IAAI,OAAO,GAAG,MAAM,EAAE,CAAC;YAC5B,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;QAC5B,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG;YACd,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAC/B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAC/B,MAAM;YACN,MAAM;YACN,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAC/B,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC/D,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;aAC1D,QAAwC,CAAC;QAC5C,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC;QACzC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;QACpB,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC;QAEhC,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;YAE/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACvC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAE,EAAE,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC/C,CAAC;YAED,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC;YACzB,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1B,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;QACf,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;QACf,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;QAE/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAE,EAAE,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;QAC/C,CAAC;QAED,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC;QACzB,GAAG,CAAC,QAAQ,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;QAE/D,GAAG,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/Rounded.js

@@ -23,9 +23,9 @@ export const Rounded = {
     update(node) {
         this.computed.radius = calcFactoredRadiusArray(this.props.radius, node.w, node.h);
     },
-    render(ctx, quad, renderContext) {
+    render(ctx, node, renderContext) {
         const path = new Path2D();
-        roundRect(path, quad.tx, quad.ty, quad.width, quad.height, this.computed.radius);
+        roundRect(path, node.globalTransform.tx, node.globalTransform.ty, node.props.w, node.props.h, this.computed.radius);
         ctx.clip(path);
         renderContext();
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Rounded.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Rounded.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,OAAO,GAA0D;IAC5E,KAAK,EAAE,eAAe,CAAC,KAAK;IAC5B,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,SAAS,CACP,IAAI,EACJ,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAO,CACtB,CAAC;QACF,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEf,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}
+{"version":3,"file":"Rounded.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Rounded.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,OAAO,GAA0D;IAC5E,KAAK,EAAE,eAAe,CAAC,KAAK;IAC5B,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,SAAS,CACP,IAAI,EACJ,IAAI,CAAC,eAAgB,CAAC,EAAE,EACxB,IAAI,CAAC,eAAgB,CAAC,EAAE,EACxB,IAAI,CAAC,KAAK,CAAC,CAAC,EACZ,IAAI,CAAC,KAAK,CAAC,CAAC,EACZ,IAAI,CAAC,QAAQ,CAAC,MAAO,CACtB,CAAC;QACF,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEf,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}

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

@@ -1,7 +1,10 @@
 import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
 import { type RoundedWithBorderProps } from '../templates/RoundedWithBorderTemplate.js';
 import type { ComputedBorderValues } from './Border.js';
 import type { ComputedRoundedValues } from './Rounded.js';
-type ComputedValues = ComputedRoundedValues & ComputedBorderValues;
-export declare const RoundedWithBorder: CanvasShaderType<RoundedWithBorderProps, ComputedValues>;
-export {};
+export type ComputedRoundedWithBorderValues = ComputedRoundedValues & ComputedBorderValues & {
+    outerBorderRadius: Vec4;
+    innerBorderRadius: Vec4;
+};
+export declare const RoundedWithBorder: CanvasShaderType<RoundedWithBorderProps, ComputedRoundedWithBorderValues>;

package/dist/src/core/shaders/canvas/RoundedWithBorder.js

@@ -26,18 +26,48 @@ export const RoundedWithBorder = {
         this.computed.radius = radius;
         this.computed.borderColor = this.toColorString(props['border-color']);
         this.computed.borderAsym = !valuesAreEqual(props['border-w']);
-        //following vec4 convention 0, 1, 2, 3 => x, y, z, w;
-        const [x, y, z, w] = props['border-w'];
-        this.computed.borderRadius = [
-            Math.max(0.0, radius[0] - Math.max(x, w) * 0.5),
-            Math.max(0.0, radius[1] - Math.max(x, y) * 0.5),
-            Math.max(0.0, radius[2] - Math.max(z, y) * 0.5),
-            Math.max(0.0, radius[3] - Math.max(z, w) * 0.5),
+        const borderAlign = this.props['border-align'];
+        const borderGap = this.props['border-gap'];
+        // Calculate outer and inner rectangle dimensions
+        const [t, r, b, l] = this.props['border-w'];
+        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) {
+    render(ctx, node, renderContext) {
         const computed = this.computed;
-        roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, computed.radius, this.props['border-w'], computed.borderRadius, computed.borderColor, computed.borderAsym, renderContext);
+        roundedRectWithBorder(ctx, node.globalTransform.tx, node.globalTransform.ty, node.props.w, node.props.h, computed.radius, this.props['border-gap'], computed.outerX, computed.outerY, computed.outerW, computed.outerH, computed.outerBorderRadius, computed.innerX, computed.innerY, computed.innerW, computed.innerH, computed.innerBorderRadius, computed.borderColor, renderContext);
     },
 };
 //# sourceMappingURL=RoundedWithBorder.js.map

package/dist/src/core/shaders/canvas/RoundedWithBorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,qDAAqD;QACrD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAS,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG;YAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;SAChD,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,qBAAqB,CACnB,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,EAC/B,QAAQ,CAAC,YAAY,EACrB,QAAQ,CAAC,WAAW,EACpB,QAAQ,CAAC,UAAU,EACnB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorder.ts"],"names":[],"mappings":"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"}

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

@@ -1,8 +1,7 @@
 import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
 import { type RoundedWithBorderAndShadowProps } from '../templates/RoundedWithBorderAndShadowTemplate.js';
-import type { ComputedBorderValues } from './Border.js';
-import type { ComputedRoundedValues } from './Rounded.js';
+import type { ComputedRoundedWithBorderValues } from './RoundedWithBorder.js';
 import type { ComputedShadowValues } from './Shadow.js';
-type ComputedValues = ComputedRoundedValues & ComputedBorderValues & ComputedShadowValues;
+type ComputedValues = ComputedRoundedWithBorderValues & ComputedShadowValues;
 export declare const RoundedWithBorderAndShadow: CanvasShaderType<RoundedWithBorderAndShadowProps, ComputedValues>;
 export {};

package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.js

@@ -26,16 +26,53 @@ export const RoundedWithBorderAndShadow = {
         this.computed.radius = radius;
         this.computed.borderColor = this.toColorString(props['border-color']);
         this.computed.borderAsym = !valuesAreEqual(props['border-w']);
-        const borderWidth = props['border-w'];
-        this.computed.borderRadius = radius.map((value, index) => Math.max(0, value - borderWidth[index] * 0.5));
+        const borderAlign = this.props['border-align'];
+        const borderGap = this.props['border-gap'];
+        // Calculate outer and inner rectangle dimensions
+        const [t, r, b, l] = this.props['border-w'];
+        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 = radius.map((value) => value + props['shadow-blur']);
+        this.computed.shadowRadius = this.computed.outerBorderRadius.map((value) => value + props['shadow-blur']);
     },
-    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;
-        render.shadow(ctx, tx, ty, height, width, 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-w'], computed.borderRadius, computed.borderColor, computed.borderAsym, renderContext);
+        render.shadow(ctx, tx + computed.outerX, ty + computed.outerY, w + computed.outerW, h + computed.outerH, computed.shadowColor, this.props['shadow-projection'], computed.shadowRadius, this.stage.pixelRatio);
+        render.roundedRectWithBorder(ctx, tx, ty, w, h, computed.radius, this.props['border-gap'], computed.outerX, computed.outerY, computed.outerW, computed.outerH, computed.outerBorderRadius, computed.innerX, computed.innerY, computed.innerW, computed.innerH, computed.innerBorderRadius, computed.borderColor, renderContext);
     },
 };
 //# sourceMappingURL=RoundedWithBorderAndShadow.js.map

package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAI5D,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAM5C,MAAM,CAAC,MAAM,0BAA0B,GAGnC;IACF,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAS,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,CAAE,GAAG,GAAG,CAAC,CACvC,CAAC;QAEV,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAChC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,CAAC,WAAW,EACpB,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,QAAQ,CAAC,YAAY,EACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,MAAM,CAAC,qBAAqB,CAC1B,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,EAC/B,QAAQ,CAAC,YAAY,EACrB,QAAQ,CAAC,WAAW,EACpB,QAAQ,CAAC,UAAU,EACnB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAG5D,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAI5C,MAAM,CAAC,MAAM,0BAA0B,GAGnC;IACF,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAW,CAAC;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,CAAC;QAEtD,iDAAiD;QACjD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,CAAC;QAErD,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;QACrE,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;QACrE,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,IAAI,MAAM,GAAG,CAAC,CAAC;QAEf,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,MAAM,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAE9B,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;QAEtC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,GAAG;YAChC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;YACrE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;YACrE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;YACrE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;SACtE,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,iBAAiB,GAAG;YAChC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GAAG,CAC9D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAChC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC;QACzC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,GAAG,QAAQ,CAAC,MAAM,EACpB,EAAE,GAAG,QAAQ,CAAC,MAAM,EACpB,CAAC,GAAG,QAAQ,CAAC,MAAM,EACnB,CAAC,GAAG,QAAQ,CAAC,MAAM,EACnB,QAAQ,CAAC,WAAW,EACpB,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,QAAQ,CAAC,YAAY,EACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,MAAM,CAAC,qBAAqB,CAC1B,GAAG,EACH,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,EACD,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,EACnC,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,iBAAiB,EAC1B,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,iBAAiB,EAC1B,QAAQ,CAAC,WAAW,EACpB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RoundedWithShadow.js

@@ -27,12 +27,13 @@ export const RoundedWithShadow = {
         this.computed.shadowColor = this.toColorString(props['shadow-color']);
         this.computed.shadowRadius = radius.map((value) => value + props['shadow-blur']);
     },
-    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;
-        render.shadow(ctx, tx, ty, width, height, computed.shadowColor, this.props['shadow-projection'], computed.shadowRadius, this.stage.pixelRatio);
+        render.shadow(ctx, tx, ty, w, h, computed.shadowColor, this.props['shadow-projection'], computed.shadowRadius, this.stage.pixelRatio);
         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/dist/src/core/shaders/canvas/RoundedWithShadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAI5C,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAChC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,CAAC,WAAW,EACpB,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,QAAQ,CAAC,YAAY,EACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QAEF,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC/D,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACf,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}
+{"version":3,"file":"RoundedWithShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAI5C,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAChC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC;QACzC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,EACD,QAAQ,CAAC,WAAW,EACpB,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,QAAQ,CAAC,YAAY,EACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QAEF,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QACtD,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACf,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/Shadow.js

@@ -23,8 +23,10 @@ export const Shadow = {
         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);
+    render(ctx, node, renderContext) {
+        const { tx, ty } = node.globalTransform;
+        const { w, h } = node.props;
+        shadow(ctx, tx, ty, w, h, this.computed.shadowColor, this.props['projection'], this.computed.shadowRadius, this.stage.pixelRatio);
         renderContext();
     },
 };

package/dist/src/core/shaders/canvas/Shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Shadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAO3C,MAAM,CAAC,MAAM,MAAM,GAAwD;IACzE,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM;QACJ,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACrE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxD,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,CACJ,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,KAAM,CAAC,YAAY,CAAC,EACzB,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}
+{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Shadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAO3C,MAAM,CAAC,MAAM,MAAM,GAAwD;IACzE,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM;QACJ,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACrE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxD,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,eAAgB,CAAC;QACzC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,CACJ,GAAG,EACH,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,EACD,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,KAAM,CAAC,YAAY,CAAC,EACzB,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { Vec4 } from '../../../renderers/webgl/internal/ShaderUtils.js';
 export declare function roundRect(ctx: CanvasRenderingContext2D | Path2D, x: number, y: number, width: number, height: number, radius: Vec4): void;
-export declare function roundedRectWithBorder(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: Vec4, borderWidth: Vec4, borderRadius: Vec4, borderColor: string, borderAsym: boolean, renderContext: () => void): void;
+export declare 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): void;
 export declare function shadow(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, color: string, projection: Vec4, radius: Vec4, pixelRatio: number): void;
 export declare function strokeLine(ctx: CanvasRenderingContext2D, x: number, y: number, x2: number, y2: number, lineWidth: number): void;

package/dist/src/core/shaders/canvas/utils/render.js

@@ -30,32 +30,45 @@ export function roundRect(ctx, x, y, width, height, radius) {
     ctx.lineTo(x, y + tl);
     ctx.ellipse(x + tl, y + tl, tl, tl, 0, Math.PI, 1.5 * Math.PI);
 }
-export function roundedRectWithBorder(ctx, x, y, width, height, radius, borderWidth, borderRadius, borderColor, borderAsym, renderContext) {
-    if (borderAsym === false) {
-        const bWidth = borderWidth[0];
-        const bHalfWidth = bWidth * 0.5;
+export function roundedRectWithBorder(ctx, x, y, width, height, radius, borderGap, outerX, outerY, outerW, outerH, outerBorderRadius, innerX, innerY, innerW, innerH, innerBorderRadius, borderColor, renderContext) {
+    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);
         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);
-    ctx.fillStyle = borderColor;
-    ctx.fill();
-    const { 0: t, 1: r, 2: b, 3: l } = borderWidth;
+    // 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);
+    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, x, y, width, height, color, projection, radius, pixelRatio) {
     ctx.save();

package/dist/src/core/shaders/canvas/utils/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../../src/core/shaders/canvas/utils/render.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../../src/core/shaders/canvas/utils/render.ts"],"names":[],"mappings":"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"}