Add examples circles3: event

src/canvas/attr.js

@@ -0,0 +1,3 @@
+export function canvas_attr(key) {
+  return this._attrs[key];
+}

src/canvas/index.js

@@ -2,17 +2,20 @@ 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: {}},
   });
 }
 
 Object.defineProperties(Canvas.prototype, {
   circle: {value: canvas_circle},
   background: {value: canvas_background},
   init: {value: canvas_init},
+  attr: {value: canvas_attr},
   node: {value: canvas_node},
 });
 

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;
+  });
 }

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(() => {

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};

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";
+              });
+            },
+          }),
+        ),
+      );
+    },
+  });
+}

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";