From ba5f6cffc0ba1deef3adc48f417033de471ada03 Mon Sep 17 00:00:00 2001
From: pearmini <subairui@icloud.com>
Date: Wed, 23 Oct 2024 20:54:56 -0400
Subject: [PATCH] Add examples circles3: event

---
 src/canvas/attr.js     |  3 +++
 src/canvas/index.js    |  3 +++
 src/canvas/init.js     |  6 ++++++
 src/render.js          |  2 +-
 src/transform/scale.js | 11 +++++++----
 test/apps/circles3.js  | 36 ++++++++++++++++++++++++++++++++++++
 test/apps/index.js     |  1 +
 7 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 src/canvas/attr.js
 create mode 100644 test/apps/circles3.js

diff --git a/src/canvas/attr.js b/src/canvas/attr.js
new file mode 100644
index 00000000..fe63b2a1
--- /dev/null
+++ b/src/canvas/attr.js
@@ -0,0 +1,3 @@
+export function canvas_attr(key) {
+  return this._attrs[key];
+}
diff --git a/src/canvas/index.js b/src/canvas/index.js
index 9648d790..45cf3490 100644
--- a/src/canvas/index.js
+++ b/src/canvas/index.js
@@ -2,10 +2,12 @@ import {canvas_circle} from "./circle.js";
 import {canvas_background} from "./background.js";
 import {canvas_init} from "./init.js";
 import {canvas_node} from "./node.js";
+import {canvas_attr} from "./attr.js";
 
 function Canvas() {
   Object.defineProperties(this, {
     _ctx: {value: null, writable: true},
+    _attrs: {value: {}},
   });
 }
 
@@ -13,6 +15,7 @@ Object.defineProperties(Canvas.prototype, {
   circle: {value: canvas_circle},
   background: {value: canvas_background},
   init: {value: canvas_init},
+  attr: {value: canvas_attr},
   node: {value: canvas_node},
 });
 
diff --git a/src/canvas/init.js b/src/canvas/init.js
index 66b0f34a..38436f3d 100644
--- a/src/canvas/init.js
+++ b/src/canvas/init.js
@@ -12,4 +12,10 @@ function context2d(width = 640, height = 480, dpr = null) {
 
 export function canvas_init({width, height}) {
   this._ctx = context2d(width, height);
+  const canvas = this._ctx.canvas;
+  canvas.addEventListener("mousemove", (event) => {
+    const rect = canvas.getBoundingClientRect();
+    this._attrs.mouseX = event.clientX - rect.left;
+    this._attrs.mouseY = event.clientY - rect.top;
+  });
 }
diff --git a/src/render.js b/src/render.js
index 0e74bc69..2fa7ecbd 100644
--- a/src/render.js
+++ b/src/render.js
@@ -16,7 +16,7 @@ export function render({width = 640, height = 480, renderer = canvas(), setup, l
   if (loop) {
     let observer;
     const id = setInterval(() => {
-      renderFlow(renderer, loop());
+      renderFlow(renderer, loop(renderer));
       if (node.parentNode && !observer) {
         const parent = node.parentNode;
         observer = new MutationObserver(() => {
diff --git a/src/transform/scale.js b/src/transform/scale.js
index 932e43e7..f9e1100d 100644
--- a/src/transform/scale.js
+++ b/src/transform/scale.js
@@ -14,10 +14,13 @@ export function scale(options) {
   return (data) => {
     const mapped = {};
     for (const [key, option] of Object.entries(options)) {
-      if (key in data) {
-        const column = data[key];
-        const map = createScale(column, option);
-        mapped[key] = column.map(map);
+      if (typeof option === "function") mapped[key] = option(data);
+      else {
+        if (key in data) {
+          const column = data[key];
+          const map = createScale(column, option);
+          mapped[key] = column.map(map);
+        }
       }
     }
     return {...data, ...mapped};
diff --git a/test/apps/circles3.js b/test/apps/circles3.js
new file mode 100644
index 00000000..e401c011
--- /dev/null
+++ b/test/apps/circles3.js
@@ -0,0 +1,36 @@
+import * as cm from "@charming-art/charming";
+
+export function circles3() {
+  return cm.render({
+    width: 640,
+    height: 640,
+    loop: (context) => {
+      const mouseX = context.attr("mouseX");
+      const mouseY = context.attr("mouseY");
+      return cm.group(
+        cm.background({fill: "white"}),
+        cm.flow(
+          cm.range(120),
+          cm.map((_, i, data) => (i * Math.PI) / data.length),
+          cm.circle({
+            x: (t) => Math.cos(t) * Math.cos(t * 3) * 250 + 280,
+            y: (t) => Math.sin(t) * Math.cos(t * 3) * 250 + 320,
+            r: (i) => i,
+          }),
+          cm.scale({r: {range: [5, 20]}}),
+          cm.scale({
+            fill: (data) => {
+              const {I, x: X, y: Y, r: R} = data;
+              return I.map((i) => {
+                const dx = X[i] - mouseX;
+                const dy = Y[i] - mouseY;
+                const d = Math.sqrt(dx * dx + dy * dy);
+                return d < R[i] ? "red" : "black";
+              });
+            },
+          }),
+        ),
+      );
+    },
+  });
+}
diff --git a/test/apps/index.js b/test/apps/index.js
index 75b02ae9..b05611f4 100644
--- a/test/apps/index.js
+++ b/test/apps/index.js
@@ -1,5 +1,6 @@
 export {circles} from "./circles.js";
 export {circles2} from "./circles2.js";
+export {circles3} from "./circles3.js";
 export {circle} from "./circle.js";
 export {pandas} from "./pandas.js";
 export {rings} from "./rings.js";