Fix nested groups

src/canvas/circle.js

@@ -4,7 +4,7 @@ function applyMatrix(context, matrices) {
 
 export function canvas_circle(I, value) {
   const context = this._ctx;
-  const {x: X = [], y: Y = [], r: R = [], fill: F = [], M = []} = value;
+  const {x: X = [], y: Y = [], r: R = [], fill: F = [], matrix: M = []} = value;
   for (const i of I) {
     context.save();
     applyMatrix(context, M[i] ?? []);

src/shapes/background.js

@@ -1,3 +1,3 @@
 export function background({fill}) {
-  return () => ({transform: (renderer) => renderer.background({fill})});
+  return (data) => ({...data, transform: (renderer) => renderer.background({fill})});
 }

src/shapes/circle.js

@@ -1,9 +1,10 @@
 import {attribute} from "./attribute.js";
 
 export function circle({x, y, fill, r}) {
-  return ({data} = {data: [0]}) => {
+  return ({data = [0], x: px, y: py, rotate: protate, ...rest} = {}) => {
     const I = Array.from({length: data.length}, (_, i) => i);
     return {
+      ...rest,
       ...(x !== undefined && {x: I.map((i) => attribute(x, i, data))}),
       ...(y !== undefined && {y: I.map((i) => attribute(y, i, data))}),
       ...(r !== undefined && {r: I.map((i) => attribute(r, i, data))}),

src/shapes/group.js

@@ -16,20 +16,20 @@ function mergeMatrix(I, PM = [], M = []) {
 
 function withTransform({x, y, rotate}, ...flows) {
   return (raw) => {
-    const {data, ...rest} = raw ?? {data: [0]};
+    const {data, x: px, y: py, rotate: protate, ...rest} = raw ?? {data: [0]};
     const I = Array.from({length: data.length}, (_, i) => i);
     const transform = (context, _, value) => {
       const {x: X = [], y: Y = [], rotate: R = []} = value;
       for (const flow of flows) {
-        const {I, transform, M: PM, ...rest} = flow(value);
+        const {I, transform, matrix: PM, ...rest} = flow(value);
         const M = I.map((i) => {
           const x = (raw ? X[i] : X[0]) ?? 0;
           const y = (raw ? Y[i] : Y[0]) ?? 0;
           const r = (raw ? R[i] : R[0]) ?? 0;
           return [translateMatrix(x, y), rotateMatrix(r)];
         });
         const NM = mergeMatrix(I, PM, M);
-        transform(context, I, {...rest, M: NM});
+        transform(context, I, {...rest, matrix: NM, I});
       }
     };
     return {
@@ -46,13 +46,13 @@ function withTransform({x, y, rotate}, ...flows) {
 
 function noTransform(...flows) {
   return (data) => {
-    const transform = (context) => {
+    const transform = (context, _, value) => {
       for (const flow of flows) {
-        const {I, transform, ...value} = flow(data);
-        transform(context, I, value);
+        const {I, transform, ...rest} = flow(value);
+        transform(context, I, rest);
       }
     };
-    return {transform};
+    return {...data, transform};
   };
 }
 

test/apps/circles2.js

@@ -9,7 +9,10 @@ export function circles2() {
       cm.map((_, i, data) => (i * Math.PI) / data.length),
       cm.group(
         {x: (t) => Math.cos(t) * Math.cos(t * 3) * 250 + 280},
-        cm.group({y: (t) => Math.sin(t) * Math.cos(t * 3) * 250 + 320}, cm.circle({r: 10, x: 0, y: 0})),
+        cm.group(
+          {y: (t) => Math.sin(t) * Math.cos(t * 3) * 250 + 320},
+          cm.group(cm.circle({r: 10, x: 0, y: 0}), cm.circle({r: 3, x: 0, y: 0, fill: "white"})),
+        ),
       ),
     ),
   });