thi-ng · nkint · Feb 5, 2020 · Feb 5, 2020 · Feb 5, 2020 · Feb 5, 2020
diff --git a/package.json b/package.json
@@ -6,12 +6,19 @@
     "author": "Karsten Schmidt <k+npm@thi.ng>",
     "scripts": {
         "build": "mkdir -p build && ts-node src/index.ts",
-        "debug": "mkdir -p build && ts-node src/debug-grid.ts"
+        "debug": "mkdir -p build && ts-node src/debug-grid.ts",
+        "start": "parcel ./src/index.html -p 8080 --open"
     },
     "dependencies": {
+        "@thi.ng/atom": "^3.1.4",
         "@thi.ng/geom": "^1.7.10",
+        "@thi.ng/hdom": "^8.0.10",
+        "@thi.ng/paths": "^3.0.1",
+        "@thi.ng/rstream": "^3.0.2",
         "@thi.ng/transducers": "^6.2.1",
-        "opentype.js": "^1.1.0"
+        "@thi.ng/transducers-hdom": "^2.0.34",
+        "opentype.js": "^1.1.0",
+        "parcel-bundler": "^1.12.4"
     },
     "devDependencies": {
         "@types/node": "^12.12.2",
@@ -28,4 +35,4 @@
         "license": "SIL Open Font License 1.1",
         "licenseURL": "https://opensource.org/licenses/OFL-1.1"
     }
-}
+}
diff --git a/src/data.ts b/src/data.ts
@@ -0,0 +1,95 @@
+import { COL_WIDTH, R } from "./api";
+
+export const data = [
+    {
+        name: ".notdef",
+        id: 0,
+        g: ">"
+    },
+    {
+        name: "space",
+        id: 0x20,
+        g: ">"
+    },
+    // punctuation
+    { name: "!", id: 0x21, g: ".46e" },
+    { name: '"', id: 0x22, g: "ce>ce" },
+    { name: "#", id: 0x23, g: "H66Hb6>467bce>467bce", x: -R },
+    { name: "(", id: 0x28, g: "H43Hd35d>" },
+    { name: ")", id: 0x29, g: "h43hd3>5d" },
+    { name: ",", id: 0x2c, g: "25" },
+    { name: "-", id: 0x2d, g: "h74>" },
+    { name: ".", id: 0x2e, g: ".4" },
+    { name: "|", id: 0x2f, g: "0e" },
+    { name: ":", id: 0x3a, g: ".5.7" },
+    { name: ";", id: 0x3b, g: "25.7" },
+    { name: "=", id: 0x3d, g: "h54h74>" },
+    { name: "[", id: 0x5b, g: "h44hd45d>" },
+    { name: "]", id: 0x5d, g: "h44hd4>5d" },
+    { name: "_", id: 0x5f, g: "h44>" },
+    // digits
+    { name: "0", id: 0x30, g: "5dh44hd4>5d" },
+    { name: "1", id: 0x31, g: "Hd3>4d", x: -R },
+    { name: "2", id: 0x32, g: "56/6ch44hd4>cd" },
+    { name: "3", id: 0x33, g: "h44hd4H93>4d" },
+    { name: "4", id: 0x34, g: "aeh94>49ae" },
+    { name: "5", id: 0x35, g: "adh44h94hd4>59" },
+    { name: "6", id: 0x36, g: "5a/aeh44>5a" },
+    { name: "7", id: 0x37, g: "/4dhd4>" },
+    { name: "8", id: 0x38, g: "48ae/8a/a8h44hd4>48ae" },
+    { name: "9", id: 0x39, g: "9dhd4/49>9d" },
+
+    { name: "A", id: 0x41 + 0x20, g: "4eHd3H83>4e" },
+    { name: "B", id: 0x42 + 0x20, g: "48ae8aHd3H43/8a/a8>48ad" },
+    { name: "C", id: 0x43 + 0x20, g: "4eHd3H43>ce46" },
+    { name: "D", id: 0x44 + 0x20, g: "4e/ec/46>6c" },
+    { name: "E", id: 0x45 + 0x20, g: "4eH43H82Hd3>" },
+    { name: "F", id: 0x46 + 0x20, g: "4eH82Hd3>" },
+    { name: "G", id: 0x47 + 0x20, g: "4eH43Hd3>49ce" },
+    { name: "H", id: 0x48 + 0x20, g: "4eH83>4e" },
+    { name: "I", id: 0x49 + 0x20, g: "4e>" },
+    { name: "J", id: 0x4a + 0x20, g: "H42>4e", x: -COL_WIDTH },
+    { name: "K", id: 0x4b + 0x20, g: "48ae8a/8a/a8>48ae" },
+    { name: "L", id: 0x4c + 0x20, g: "4eH43>" },
+    { name: "M", id: 0x4d + 0x20, g: "4eHd3>Hd38e>4e" },
+    { name: "N", id: 0x4e + 0x20, g: "4eHd3>4e" },
+    { name: "O", id: 0x4f + 0x20, g: "4eHd3H43>4e" },
+    { name: "P", id: 0x50 + 0x20, g: "4eHd3H83>8e" },
+    { name: "Q", id: 0x51 + 0x20, g: "4eHd3H43>4eH42>" },
+    { name: "R", id: 0x52 + 0x20, g: "4eHd3/8a/a8>ae48" },
+    { name: "S", id: 0x53 + 0x20, g: "46aeHd3/a8h43>48ce" },
+    { name: "T", id: 0x54 + 0x20, g: "hd3>4eHd3>" },
+    { name: "U", id: 0x55 + 0x20, g: "4eH43>4e" },
+    { name: "V", id: 0x56 + 0x20, g: "4e/46>6e" },
+    { name: "W", id: 0x57 + 0x20, g: "4eH43>H4349>4e" },
+    { name: "X", id: 0x58 + 0x20, g: "48ae/8a/a8>48ae" },
+    { name: "Y", id: 0x59 + 0x20, g: "8eH83>4e" },
+    { name: "Z", id: 0x5a + 0x20, g: "hd4H43/4d" },
+
+    { name: "a", id: 0x41, g: "58h44h94>59" },
+    { name: "b", id: 0x42, g: "5eh44>5a" },
+    { name: "c", id: 0x43, g: "5ah44h94>5689" },
+    { name: "d", id: 0x44, g: "5ah44>5e" },
+    { name: "e", id: 0x45, g: "5ah44h94>69" },
+    { name: "f", id: 0x46, g: "49adh93hd4>cd", width: 2 * COL_WIDTH - R },
+    { name: "g", id: 0x47, g: "4912h04h94>19" },
+    { name: "h", id: 0x48, g: "49aeh94>49" },
+    { name: "i", id: 0x49, g: "4a.b" },
+    { name: "j", id: 0x4a, g: "12h04H93>19.b", x: -R },
+    { name: "k", id: 0x4b, g: "4e/78/76>468a" },
+    { name: "l", id: 0x4c, g: "4e" },
+    { name: "m", id: 0x4d, g: "49h96>49>49" },
+    { name: "n", id: 0x4e, g: "49h94>49" },
+    { name: "o", id: 0x4f, g: "59h44h94>59" },
+    { name: "p", id: 0x50, g: "09h94>49" },
+    { name: "q", id: 0x51, g: "49h94>09" },
+    { name: "r", id: 0x52, g: "49h94>89" },
+    { name: "s", id: 0x53, g: "5689/86h44h94>5689" },
+    { name: "t", id: 0x54, g: "Hb3>4bce", x: -COL_WIDTH },
+    { name: "u", id: 0x55, g: "5ah44>5a" },
+    { name: "v", id: 0x56, g: "4a/46>6a" },
+    { name: "w", id: 0x57, g: "5ah46>5a>5a" },
+    { name: "x", id: 0x58, g: "468a/68/86>468a" },
+    { name: "y", id: 0x59, g: "5ah44>045a" },
+    { name: "z", id: 0x5a, g: "/59h44h94>" }
+];
diff --git a/src/gen.ts b/src/gen.ts
@@ -1,16 +1,8 @@
 import { asCubic, circle } from "@thi.ng/geom";
 import { Glyph, Path } from "opentype.js";
-import {
-    COL_WIDTH,
-    D,
-    DOTGRID,
-    GlyphDef,
-    GRID,
-    HGAP,
-    R
-} from "./api";
+import { COL_WIDTH, D, DOTGRID, GlyphDef, GRID, HGAP, R } from "./api";
 
-const line = (x: number, y1: number, y2: number) => {
+export const line = (x: number, y1: number, y2: number) => {
     const path = new Path();
     const [ax, ay] = GRID[y1];
     const [bx, by] = GRID[y2];

diff --git a/src/index-ui.ts b/src/index-ui.ts
@@ -0,0 +1,142 @@
+import { line, svg } from "@thi.ng/hiccup-svg";
+import { map, range2d, pairs } from "@thi.ng/transducers";
+import { updateDOM } from "@thi.ng/transducers-hdom";
+import { Atom } from "@thi.ng/atom";
+import { setIn } from "@thi.ng/paths";
+import { fromAtom } from "@thi.ng/rstream";
+import { Path } from "opentype.js";
+import { MAX_Y, MIN_Y, R, HGAP, GRID, D } from "./api";
+import { defGlyph } from "./gen";
+import { data } from "./data";
+
+type GlyphSpec = {
+    name: string;
+    id: number;
+    g: string;
+    x?: number;
+    width?: number;
+};
+
+function hash(item: GlyphSpec) {
+    return `${item.id}-${item.name}`;
+}
+
+const dataObj = data.slice(23, 24).reduce((acc, item) => {
+    // const dataObj = data..reduce((acc, item) => {
+    acc[hash(item)] = item;
+    return acc;
+}, <{ [k: string]: GlyphSpec }>{});
+
+const db = new Atom({
+    glyphs: dataObj
+});
+(window as any).db = db;
+
+const cachedGlyphsUi = db.addView("glyphs", (glyphs) => [
+    ...map(
+        ([_, glyph]) => glyphEditor(glyph),
+        pairs(<{ [k: string]: GlyphSpec }>glyphs)
+    )
+]);
+
+const setGlyphValue = (item: GlyphSpec, g: string) => {
+    db.swap((state) => setIn(state, ["glyphs", hash(item), "g"], g));
+};
+
+const innerHtmlWrapperSvg = () =>
+    <any>{
+        init(el: any, _: any, html: string) {
+            this.el = el;
+            this.prev = html;
+            el.innerHTML = html;
+        },
+        render(_: any, html: string) {
+            if (this.el && this.prev != html) {
+                this.el.innerHTML = html;
+                this.prev = html;
+            }
+            return ["g"];
+        },
+        release() {
+            this.el.innerHTML = "";
+            delete this.prev;
+            delete this.el;
+        }
+    };
+
+const gridElements = [
+    ...map(([xi, yi]) => {
+        const x = 0;
+        const y1 = xi;
+        const y2 = x + 1;
+        const [ax, ay] = GRID[y1];
+        const [bx, by] = GRID[y2];
+        return [
+            "g",
+            { transform: `translate(${yi * (R * 2 + HGAP)}, 0)` },
+            line([x + ax, ay], [x + bx, by]),
+            line([x + bx, by], [x + D + bx, by]),
+            line([x + D + bx, by], [x + D + ax, ay]),
+            line([x + D + ax, ay], [x + ax, ay]),
+
+            [
+                "text",
+                {
+                    transform: `translate(${x + ax} ${ay}) scale(1, -1)`,
+                    x: 50,
+                    y: -5,
+                    fill: "silver",
+                    stroke: "none",
+                    "font-size": "2rem",
+                    "font-family": "monospace"
+                },
+                `${xi.toString(16)},${yi}`
+            ]
+        ];
+    }, range2d(14, 6))
+];
+
+function glyphEditor(item: GlyphSpec) {
+    const { name, id, g } = item;
+    const glyph = defGlyph({ id, g });
+    const pathString = (glyph.path as Path).toSVG(4);
+    return [
+        "div.ba.ma2.pa2.b--silver",
+        { style: { width: "400px" } },
+        ["p.ma0", ["span.silver.sub", id], ["span.b.ml2", name]],
+        [
+            "input",
+            {
+                type: "text",
+                value: g,
+                onchange: (event: InputEvent) =>
+                    setGlyphValue(item, (<any>event.target).value),
+                onblur: (event: InputEvent) =>
+                    setGlyphValue(item, (<any>event.target).value)
+            }
+        ],
+        [
+            "svg",
+            { viewBox: `-100 0 1300 ${MAX_Y - MIN_Y}`, width: 400 },
+            [
+                "g",
+                { transform: `matrix(1 0 0 -1 0 ${MAX_Y - 10})` },
+                [wrapper, pathString],
+                ["g", { fill: "none", stroke: "silver" }, ...gridElements]
+            ]
+        ]
+    ];
+}
+
+const wrapper = innerHtmlWrapperSvg();
+const app = () => {
+    return ["div.flex.flex-wrap.code", ...cachedGlyphsUi.deref()!];
+};
+
+const streamAtomChange = fromAtom(db);
+streamAtomChange.transform(map(app), updateDOM());
+
+if (process.env.NODE_ENV !== "production") {
+    const hot = (<any>module).hot;
+    hot && hot.dispose(() => streamAtomChange.done());
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>hdom-inner-html</title>
+        <link
+            href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
+            rel="stylesheet"
+        />
+        <style>
+            #app {
+                margin-left: 5rem;
+                margin-right: 5rem;
+                margin-top: 5rem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="text/javascript" src="./index-ui.ts"></script>
+    </body>
+</html>