refactor(examples): update attribs & scengraph in hdom-canvas-clock

thi-ng · Sep 11, 2018 · c69454b · c69454b
1 parent ccbf53c
commit c69454b
Showing 1 changed file with 30 additions and 18 deletions.
diff --git a/examples/hdom-canvas-clock/src/index.ts b/examples/hdom-canvas-clock/src/index.ts
@@ -2,24 +2,22 @@ import { start } from "@thi.ng/hdom";
 import { canvas } from "@thi.ng/hdom-canvas";
 import { range } from "@thi.ng/transducers/iter/range";
 import { mapcat } from "@thi.ng/transducers/xform/mapcat";
-import { map } from "@thi.ng/transducers/xform/map";
 import { HALF_PI, TAU } from "@thi.ng/vectors/math";
 import { toCartesian2 } from "@thi.ng/vectors/vec2";
 
 const WEEKDAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
 
-const tick = (i: number, r1: number, r2: number, color: string) => {
+const tick = (i: number, r1: number, r2: number) => {
     const theta = i / 12 * TAU - HALF_PI;
     return [
-        ["line", { stroke: color }, toCartesian2([r1, theta]), toCartesian2([r2, theta])],
+        ["line", {}, toCartesian2([r1, theta]), toCartesian2([r2, theta])],
         (i % 3) == 0 ?
-            ["text", { fill: color, align: "center", baseLine: "middle" },
-                toCartesian2([r1 - 10, theta]), i > 0 ? i : 12] :
-            []
+            ["text", { stroke: "none" }, toCartesian2([r1 - 10, theta]), i > 0 ? i : 12] :
+            null
     ];
 };
 
-const hand = (r1: number, r2: number, theta: number, fill: string, eps = 0.5) => {
+const hand = (r1: number, r2: number, theta: number, fill?: string, eps = 0.5) => {
     theta = theta * TAU - HALF_PI;
     return ["polygon", { fill },
         [[r1, theta - eps], [r2, theta], [r1, theta + eps]].map((p) => toCartesian2(p))];
@@ -38,19 +36,33 @@ const cancel = start(() => {
             // but are NOT real DOM elements. they will be processed by
             // the canvas component's branch-local hdom update
             // operations and translated into canvas drawing commands
-            ["g", { translate: [100, 100] },
+            //
+            // shapes can be grouped using ["g"...] elements as in SVG
+            // attribs declared at group level will be shared by all
+            // children but can be overridden individually. groups can
+            // be nested. also note, that nested `transform`,
+            // `translate`, `rotate` and `scale` attribs are indeed
+            // applied in a nested manner...
+            //
+            // see here for a list of all supported attribs:
+            // https://github.com/thi-ng/umbrella/blob/feature/hdom-canvas/packages/hdom-canvas/src/index.ts#L35
+            ["g", { translate: [100, 100], stroke: "black", fill: "none", align: "center", baseLine: "middle" },
                 // rim
-                ["circle", { stroke: "black" }, [0, 0], 99],
-                // hour tick marks
-                ...mapcat((i) => tick(i, 90, 99, "black"), range(12)),
-                // weekday inset
-                ["rect", { stroke: "black" }, [40, -8], 30, 16],
-                ["text", { fill: "black" }, [55, 0], WEEKDAYS[now.getDay()]],
+                ["circle", {}, [0, 0], 99],
+                ["text", { font: "24px Menlo" }, [0, -33], "thi.ng"],
+                // hour tick marks & weekday inset
+                ["g", { fill: "black" },
+                    ...mapcat((i) => tick(i, 90, 99), range(12)),
+                    ["rect", { fill: "none" }, [40, -8], 30, 16],
+                    ["text", { stroke: "none" }, [55, 0], WEEKDAYS[now.getDay()]]
+                ],
                 // hands
-                hand(5, 60, hour, "black"),
-                hand(5, 90, min, "black"),
-                hand(5, 80, sec, "red"),
-                ["circle", { fill: "black" }, [0, 0], 5]
+                ["g", { fill: "black", stroke: "none" },
+                    hand(5, 60, hour),
+                    hand(5, 90, min),
+                    hand(5, 80, sec, "red"),
+                    ["circle", {}, [0, 0], 5]
+                ]
             ]],
         ["a.link",
             { href: "https://github.com/thi-ng/umbrella/tree/feature/hdom-canvas/examples/hdom-canvas-clock" },