From f021aa3ba47f63a33a08d142a4cbe8bc1ad47997 Mon Sep 17 00:00:00 2001
From: pearmini <subairui@icloud.com>
Date: Sat, 12 Oct 2024 11:18:23 -0400
Subject: [PATCH] Fix nested groups

---
 src/canvas/circle.js     |  2 +-
 src/shapes/background.js |  2 +-
 src/shapes/circle.js     |  3 ++-
 src/shapes/group.js      | 14 +++++++-------
 test/apps/circles2.js    |  5 ++++-
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/canvas/circle.js b/src/canvas/circle.js
index df602c4a..b4960229 100644
--- a/src/canvas/circle.js
+++ b/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] ?? []);
diff --git a/src/shapes/background.js b/src/shapes/background.js
index 6ae49ebb..d022d3b2 100644
--- a/src/shapes/background.js
+++ b/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})});
 }
diff --git a/src/shapes/circle.js b/src/shapes/circle.js
index 41de70b4..d68ee0d7 100644
--- a/src/shapes/circle.js
+++ b/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))}),
diff --git a/src/shapes/group.js b/src/shapes/group.js
index 32de0182..c1837388 100644
--- a/src/shapes/group.js
+++ b/src/shapes/group.js
@@ -16,12 +16,12 @@ 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;
@@ -29,7 +29,7 @@ function withTransform({x, y, rotate}, ...flows) {
           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};
   };
 }
 
diff --git a/test/apps/circles2.js b/test/apps/circles2.js
index 4ff27b79..f0e2bf06 100644
--- a/test/apps/circles2.js
+++ b/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"})),
+        ),
       ),
     ),
   });