geometryview 0.0.0-stage → 0.1.0

package/web/engine.js

@@ -0,0 +1,453 @@
+// The engine in the page: loads the WebAssembly module, answers its host calls, streams files into
+// it, draws the overlay's text, and wraps its geo_web_* functions. Framework-free; everything runs
+// on the main thread, as the engine does.
+
+import createGeometryView from "./build/geometryview-web.mjs";
+
+// GeoEventKind, as engine.h numbers them.
+export const Events = Object.freeze({
+  Loading: 0, SceneReady: 1, Failed: 2, Progress: 3, ModelReady: 4, SelectionChanged: 5,
+  HoverChanged: 6, LooksChanged: 7, VisibilityChanged: 8,
+});
+export const Actions = Object.freeze({
+  Fit: 0, ClearSelection: 1, ToggleProjection: 2, ShowAll: 3, UnghostAll: 4, Isolate: 5,
+  HideSelection: 6, GhostSelection: 7, Undo: 8, Redo: 9, ViewFront: 10, ViewBack: 11,
+  ViewLeft: 12, ViewRight: 13, ViewTop: 14, ViewBottom: 15, ViewIso: 16, FitSelection: 17,
+  ToggleSeeThrough: 18,
+});
+export const Pointer = Object.freeze({ Move: 0, Down: 1, Up: 2, Scroll: 3, Magnify: 4, Leave: 5,
+                                       Cancel: 6 });
+export const Buttons = Object.freeze({ None: 0, Left: 1, Right: 2, Middle: 3 });
+export const Modifiers = Object.freeze({ Shift: 1, Control: 2, Option: 4, Command: 8, Space: 16 });
+export const NodeKinds = Object.freeze({ Assembly: 0, Part: 1, Body: 2 });
+export const NodeActions = Object.freeze({ Hide: 0, Show: 1, Ghost: 2, Unghost: 3, Isolate: 4 });
+export const Tools = Object.freeze({ Select: 0, Hide: 1, Ghost: 2 });
+
+// The overlay atlas's layout, as gpu_types.h fixes it.
+const kAtlasWidth = 512, kAtlasHeight = 6 * 48 + 48;
+const kLabelWidth = 144, kLabelHeight = 48, kGlyphWidth = 28, kGlyphHeight = 48;
+const kAtlasGlyphs = " 0123456789.kmu";
+
+// Bytes handed to the engine at a time, through one staging buffer it owns.
+const kStage = 1 << 20;
+
+// Why the frame loop runs, from its stat: just started, the core wants frames (something moves, or
+// it lingers after), the still view's samples are yet to be drawn, or both.
+const kLoopCauses = [null, "starting", "moving", "settling", "moving, settling"];
+
+export class Engine {
+  // `canvas` is drawn into; `handlers` takes the engine's events: { event(kind, document, node,
+  // done, total, message), framesRunning(running) }.
+  static async start(canvas, handlers, { phone = false } = {}) {
+    const engine = new Engine(canvas, handlers, phone);
+    await engine.#load();
+    return engine;
+  }
+
+  #module = null;
+  #canvas;
+  #handlers;
+  #sources = new Map(); // what each open path streams from
+  #imports = new Map(); // token to its stream's state
+  #nextSource = 1;
+  #stage = 0;
+  // How the last file read arrived: { bytes, pieces, largest, firstMs, ms }, the times from
+  // asking for it. A file whose length WebKit knows can come in one piece, all at the end.
+  lastRead = null;
+
+  constructor(canvas, handlers, phone) {
+    this.#canvas = canvas;
+    this.#handlers = handlers;
+    this.phone = phone;
+  }
+
+  async #load() {
+    const phone = this.phone;
+    const module = await createGeometryView();
+    this.#module = module;
+    const ready = new Promise((resolve, reject) => {
+      module.geoHost = {
+        ready: () => resolve(),
+        failed: (message) => reject(new Error(message)),
+        runFrames: (running) => this.#handlers.framesRunning?.(running),
+        // WebAssembly hands unsigned values over as signed ones.
+        // A throw here would unwind through the engine, so the page's errors stop at this edge.
+        event: (kind, document, node, done, total, message) => {
+          try {
+            this.#handlers.event?.(kind >>> 0, document >>> 0, node >>> 0, done >>> 0, total >>> 0, message);
+          } catch (error) {
+            reportError(error);
+          }
+        },
+        startImport: (token, path) => this.#startImport(token, path),
+        cancelImport: (token) => this.#imports.get(token)?.cancel(),
+        // Finer geometry for some of a document's definitions, from the file it was imported
+        // from: the page answers through refineSegment and finishRefinement, later, never at once.
+        startRefinement: (token, path, level, definitions) => {
+          const name = path.slice(path.indexOf("/") + 1);
+          const refine = this.#handlers.refine;
+          if (refine) {
+            refine(token, name, level, Array.from(definitions));
+          } else {
+            setTimeout(() => this.finishRefinement(token, false));
+          }
+        },
+        cancelRefinement: () => this.#handlers.cancelRefinement?.(),
+        snapshot: (pointer, width, height, bgra) => this.#snapshotArrived(pointer, width, height, bgra),
+      };
+    });
+    const { width, height, scale } = this.#size();
+    if (!this.#canvas.id) this.#canvas.id = "viewport";
+    const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    this.#withString(`#${this.#canvas.id}`, (selector) => module._geo_web_start(
+        selector, width, height, scale, (reduceMotion ? 1 : 0) | (phone ? 2 : 0)));
+    await ready;
+    this.#stage = module._geo_web_staging(kStage);
+    await this.#drawAtlas();
+  }
+
+  // ---- Sizes and input ---------------------------------------------------------------------
+
+  #size() {
+    const scale = this.scale;
+    const rect = this.#canvas.getBoundingClientRect();
+    const width = Math.max(1, Math.round(rect.width * scale));
+    const height = Math.max(1, Math.round(rect.height * scale));
+    this.#canvas.width = width;
+    this.#canvas.height = height;
+    return { width, height, scale };
+  }
+
+  // Pixels per CSS pixel. Phones draw at 2 at most: the third costs more than it shows.
+  get scale() {
+    return this.phone ? Math.min(devicePixelRatio, 2) : devicePixelRatio;
+  }
+
+  resize() {
+    const { width, height, scale } = this.#size();
+    this.#module._geo_web_resize(width, height, scale);
+  }
+
+  setInsets(left, top, right, bottom) {
+    this.#module._geo_web_set_insets(left, top, right, bottom);
+  }
+
+  /** Whether the view cube and scale bar are drawn. */
+  setOverlayShown(shown) {
+    this.#module._geo_web_set_overlay_shown(shown ? 1 : 0);
+  }
+
+  pointer(kind, button, x, y, delta = 0, modifiers = 0, timestamp = performance.now() / 1000) {
+    this.#module._geo_web_pointer(kind, button, x, y, delta, modifiers, timestamp);
+  }
+
+  perform(action) { this.#module._geo_web_perform(action); }
+  setSelectionMode(mode) { this.#module._geo_web_set_selection_mode(mode); }
+  setTool(tool) { this.#module._geo_web_set_tool(tool); }
+  setLook({ style, colorMode, ghostStyle, castShadow, grain, wobble }) {
+    this.#module._geo_web_set_look(style, colorMode, ghostStyle, castShadow ? 1 : 0, grain, wobble);
+  }
+  // The cache file version this engine reads.
+  get cacheVersion() { return this.#module._geo_web_cache_version(); }
+
+  // The look every app starts with, as setLook takes it: the engine's, so all agree.
+  defaultLook() {
+    const m = this.#module;
+    const out = m._malloc(6 * 8);
+    m._geo_web_default_look(out);
+    const v = new Float64Array(m.HEAPU8.buffer, out, 6).slice();
+    m._free(out);
+    return { style: v[0], colorMode: v[1], ghostStyle: v[2], castShadow: v[3] !== 0, grain: v[4], wobble: v[5] };
+  }
+  // `cuts` is three { enabled, position, flip }.
+  setSection(cuts) {
+    let bits = 0;
+    cuts.forEach((cut, axis) => {
+      if (cut.enabled) bits |= 1 << axis;
+      if (cut.flip) bits |= 16 << axis;
+    });
+    this.#module._geo_web_set_section(bits, cuts[0].position, cuts[1].position, cuts[2].position);
+  }
+  selectNode(document, node, extend) { this.#module._geo_web_select_node(document, node, extend ? 1 : 0); }
+  hoverNode(document, node) { this.#module._geo_web_hover_node(document, node); }
+  nodeAction(document, node, action) { this.#module._geo_web_node_action(document, node, action); }
+  requestFrame() { this.#module._geo_web_request_frame(); }
+  // Looks at what is shown from a direction, in degrees around Z and above the XY plane.
+  setView(azimuth, elevation, perspective) {
+    this.#module._geo_web_set_view(azimuth, elevation, perspective ? 1 : 0);
+  }
+
+  // The latest GPU error the engine saw, for diagnosing.
+  lastError() { return this.#module.UTF8ToString(this.#module._geo_web_last_error()); }
+
+  // The scene's bounds and face count.
+  sceneInfo() {
+    const m = this.#module;
+    const out = m._malloc(8 * 8);
+    m._geo_web_scene_info(out);
+    const v = new Float64Array(m.HEAPU8.buffer, out, 8).slice();
+    m._free(out);
+    return { min: [v[0], v[1], v[2]], max: [v[3], v[4], v[5]], faces: v[6], triangles: v[7] };
+  }
+
+  // ---- Files -------------------------------------------------------------------------------
+
+  // Opens a cache file from a URL or a File, replacing what is open or added to it. `name` is
+  // what the interface calls it.
+  open(source, name, { add = false } = {}) {
+    const path = `${this.#nextSource++}/${name}`;
+    this.#sources.set(path, source);
+    this.#withString(path, (pointer) => this.#module._geo_web_open(pointer, add ? 1 : 0));
+  }
+
+  // Opens a document whose segments the page will hand over as an importer writes them, so the
+  // model shows while it imports. Resolves to the import's token.
+  openImport(name, { add = false } = {}) {
+    return new Promise((resolve) => {
+      const path = `${this.#nextSource++}/${name}`;
+      this.#sources.set(path, { importing: resolve });
+      this.#withString(path, (pointer) => this.#module._geo_web_open(pointer, add ? 1 : 0));
+    });
+  }
+
+  // One whole segment, for the import of `token`. False if the engine refused it or the import
+  // was cancelled.
+  importSegment(token, bytes) {
+    const m = this.#module;
+    const pointer = m._malloc(bytes.length);
+    m.HEAPU8.set(bytes, pointer);
+    const taken = m._geo_web_import_segment(token, pointer, bytes.length);
+    m._free(pointer);
+    return taken > 0;
+  }
+
+  // One whole segment of the refinement of `token`'s document. False if the engine refused it or
+  // the refinement was cancelled.
+  refineSegment(token, bytes) {
+    const m = this.#module;
+    const pointer = m._malloc(bytes.length);
+    m.HEAPU8.set(bytes, pointer);
+    const taken = m._geo_web_refine_segment(token, pointer, bytes.length);
+    m._free(pointer);
+    return taken > 0;
+  }
+
+  // Ends the refinement of `token`'s document: every segment handed over if `ok`.
+  finishRefinement(token, ok) {
+    this.#module._geo_web_refine_end(token, ok ? 1 : 0);
+  }
+
+  // Ends the import of `token`: every segment handed over, or failed, as `message` says.
+  finishImport(token, message = null) {
+    if (message === null) this.#module._geo_web_import_end(token, 0);
+    else this.#withString(message, (pointer) => this.#module._geo_web_import_end(token, pointer));
+  }
+
+  async #startImport(token, path) {
+    const source = this.#sources.get(path);
+    if (source?.importing) {
+      source.importing(token);
+      return;
+    }
+    const module = this.#module;
+    let cancelled = false;
+    let reader = null;
+    this.#imports.set(token, { cancel: () => { cancelled = true; reader?.cancel(); } });
+    const asked = performance.now();
+    const read = { bytes: 0, pieces: 0, largest: 0, firstMs: null, ms: null };
+    try {
+      let body = source, size = 0;
+      if (typeof source === "string") {
+        const response = await fetch(source);
+        body = response.body;
+        // The launcher and the iPhone shell send files chunked, which WebKit streams, with their
+        // size apart.
+        const length = response.headers.get("content-length") ?? response.headers.get("geometryview-size");
+        size = Number(length ?? 0);
+      } else if (source instanceof Blob) {
+        body = source.stream();
+        size = source.size;
+      }
+      // The file's real size bounds what its header may ask to be placed.
+      if (size > 0) module._geo_web_stream_size(token, size);
+      reader = body.getReader();
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (cancelled) return;
+        if (done) break;
+        read.firstMs ??= performance.now() - asked;
+        read.pieces += 1;
+        read.bytes += value.length;
+        read.largest = Math.max(read.largest, value.length);
+        for (let at = 0; at < value.length; at += kStage) {
+          const piece = value.subarray(at, Math.min(value.length, at + kStage));
+          module.HEAPU8.set(piece, this.#stage);
+          if (module._geo_web_stream_chunk(token, this.#stage, piece.length) <= 0) {
+            reader.cancel();
+            return;
+          }
+        }
+      }
+      read.ms = performance.now() - asked;
+      this.lastRead = read;
+      module._geo_web_stream_end(token, 0);
+    } catch (error) {
+      if (!cancelled) {
+        this.#withString(`The file could not be read: ${error.message}`,
+                         (message) => module._geo_web_stream_end(token, message));
+      }
+    } finally {
+      this.#imports.delete(token);
+    }
+  }
+
+  // The view as drawn, with all its samples and the overlay: { width, height, pixels } with
+  // pixels as RGBA, or null if nothing is open.
+  snapshot() {
+    return new Promise((resolve) => {
+      this.#snapshots.push(resolve);
+      if (this.#snapshots.length === 1) this.#module._geo_web_snapshot();
+    });
+  }
+
+  #snapshots = [];
+
+  #snapshotArrived(pointer, width, height, bgra) {
+    const resolve = this.#snapshots.shift();
+    let image = null;
+    if (pointer !== 0 && width > 0) {
+      const pixels = this.#module.HEAPU8.slice(pointer, pointer + width * height * 4);
+      if (bgra) {
+        for (let p = 0; p < pixels.length; p += 4) {
+          const b = pixels[p];
+          pixels[p] = pixels[p + 2];
+          pixels[p + 2] = b;
+        }
+      }
+      image = { width, height, pixels };
+    }
+    resolve?.(image);
+    if (this.#snapshots.length > 0) this.#module._geo_web_snapshot();
+  }
+
+  // ---- What the engine publishes -----------------------------------------------------------
+
+  // A document's tree: rows of { parent, end, firstOccurrence, occurrenceEnd, name, kind }.
+  model(document) {
+    const m = this.#module;
+    const count = m._geo_web_model_node_count(document);
+    if (count === 0) return null;
+    const words = new Uint32Array(m.HEAPU8.buffer, m._geo_web_model_nodes(document), count * 8);
+    const strings = new Uint8Array(m.HEAPU8.buffer, m._geo_web_model_strings(document),
+                                   m._geo_web_model_strings_size(document));
+    const decoder = new TextDecoder();
+    const nodes = new Array(count);
+    for (let n = 0; n < count; ++n) {
+      const w = n * 8;
+      nodes[n] = {
+        parent: words[w] === 0xFFFFFFFF ? -1 : words[w],
+        end: words[w + 1],
+        firstOccurrence: words[w + 2],
+        occurrenceEnd: words[w + 3],
+        name: decoder.decode(strings.subarray(words[w + 4], words[w + 4] + words[w + 5])),
+        kind: words[w + 6],
+      };
+    }
+    return nodes;
+  }
+
+  // One NodeVisibility per row: 0 shown, 1 hidden, 2 ghosted, 3 mixed.
+  nodeStates(document) {
+    const m = this.#module;
+    const count = m._geo_web_node_state_count(document);
+    return count === 0 ? new Uint8Array(0)
+                       : new Uint8Array(m.HEAPU8.buffer, m._geo_web_node_states(document), count).slice();
+  }
+
+  // Each occurrence's swatch, RGBA8 with red in the low byte, in global order, and each
+  // document's first occurrence.
+  swatches() {
+    const m = this.#module;
+    const at = (pointer, count) => count === 0 ? new Uint32Array(0)
+                                               : new Uint32Array(m.HEAPU8.buffer, pointer, count).slice();
+    return { colors: at(m._geo_web_swatches(), m._geo_web_swatch_count()),
+             bases: at(m._geo_web_swatch_bases(), m._geo_web_swatch_base_count()) };
+  }
+
+  summary() {
+    const m = this.#module;
+    const out = m._malloc(7 * 4);
+    m._geo_web_summary(out);
+    const v = new Uint32Array(m.HEAPU8.buffer, out, 7).slice();
+    m._free(out);
+    return { occurrences: v[0], faces: v[1], document: v[2], node: v[3] === 0xFFFFFFFF ? -1 : v[3],
+             mode: v[4], selected: v[5], hidden: v[6] };
+  }
+
+  stats() {
+    const m = this.#module;
+    const out = m._malloc(9 * 8);
+    m._geo_web_stats(out);
+    const v = new Float64Array(m.HEAPU8.buffer, out, 9).slice();
+    m._free(out);
+    return { frames: v[0], settledFrames: v[1], gpuMs: v[2], bufferMB: v[3], targetMB: v[4],
+             triangles: v[5], edgeSegments: v[6], looping: v[7] !== 0, loopCause: kLoopCauses[v[7]],
+             hovered: v[8], heapMB: m.HEAPU8.length / 1048576 };
+  }
+
+  // ---- The overlay's text ------------------------------------------------------------------
+
+  // The view cube's labels and the scale bar's glyphs, drawn as the Mac draws them with Core
+  // Text: IBM Plex Mono SemiBold, white on black, each centred on its cap height in its cell.
+  async #drawAtlas() {
+    const family = "GeometryView Plex Mono";
+    try {
+      const face = new FontFace(family, `url(${new URL("./fonts/IBMPlexMono-SemiBold.ttf", import.meta.url)})`,
+                                { weight: "600" });
+      document.fonts.add(await face.load());
+    } catch {
+      // The browser's own monospace stands in.
+    }
+    const canvas = new OffscreenCanvas(kAtlasWidth, kAtlasHeight);
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    context.fillStyle = "#000";
+    context.fillRect(0, 0, kAtlasWidth, kAtlasHeight);
+    context.fillStyle = "#fff";
+    context.textBaseline = "alphabetic";
+    const draw = (text, size, left, width, top, height) => {
+      context.font = `600 ${size}px "${family}", Menlo, monospace`;
+      const capHeight = context.measureText("H").actualBoundingBoxAscent;
+      const x = left + (width - context.measureText(text).width) / 2;
+      context.fillText(text, x, top + (height + capHeight) / 2);
+    };
+    ["FRONT", "BACK", "LEFT", "RIGHT", "TOP", "BOTTOM"].forEach((label, face) => {
+      draw(label, 23, 0, kLabelWidth, face * kLabelHeight, kLabelHeight);
+    });
+    // The glyph strip, drawn for a 2x display: 11 points is 22 pixels.
+    [...kAtlasGlyphs].forEach((c, cell) => {
+      draw(c === "u" ? "µ" : c, 22, cell * kGlyphWidth, kGlyphWidth, 6 * kLabelHeight, kGlyphHeight);
+    });
+    context.font = `600 22px "${family}", Menlo, monospace`;
+    const advance = context.measureText("0").width;
+    const rgba = context.getImageData(0, 0, kAtlasWidth, kAtlasHeight).data;
+    const m = this.#module;
+    const pixels = m._malloc(kAtlasWidth * kAtlasHeight);
+    const coverage = new Uint8Array(m.HEAPU8.buffer, pixels, kAtlasWidth * kAtlasHeight);
+    for (let p = 0; p < coverage.length; ++p) coverage[p] = rgba[p * 4];
+    m._geo_web_set_atlas(pixels, kAtlasWidth * kAtlasHeight, advance);
+    m._free(pixels);
+  }
+
+  // Calls `use` with `text` in the module's memory, which the engine copies if it keeps it.
+  #withString(text, use) {
+    const m = this.#module;
+    const size = m.lengthBytesUTF8(text) + 1;
+    const pointer = m._malloc(size);
+    m.stringToUTF8(text, pointer, size);
+    try {
+      return use(pointer);
+    } finally {
+      m._free(pointer);
+    }
+  }
+}

package/web/fonts/LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/web/icons.js

@@ -0,0 +1,50 @@
+// Line icons for the chrome, on a 16 unit grid, stroked in the current text colour. The Mac app
+// draws these same icons: it reads this file, so each icon stays on one line of its own, as
+// `name: \`markup\`,` with plain SVG markup and nothing computed. Launcher/test/icons.test.mjs
+// reads it the way the app does.
+
+const svg = (markup, size = 16) =>
+  `<svg viewBox="0 0 16 16" width="${size}" height="${size}" fill="none" stroke="currentColor" ` +
+  `stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${markup}</svg>`;
+
+export const iconMarkup = {
+  eye: `<path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/>`,
+  eyeSlash: `<path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/><path d="M2.5 2.5l11 11"/>`,
+  ghost: `<circle cx="8" cy="8" r="5.5" stroke-dasharray="2.2 1.8"/>`,
+  scope: `<circle cx="8" cy="8" r="4.5"/><path d="M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3"/>`,
+  undo: `<path d="M5.5 4.5L2.5 7.5l3 3"/><path d="M2.5 7.5H10a3.5 3.5 0 0 1 0 7H8"/>`,
+  redo: `<path d="M10.5 4.5l3 3-3 3"/><path d="M13.5 7.5H6a3.5 3.5 0 0 0 0 7h2"/>`,
+  seeThrough: `<circle cx="8" cy="8" r="5.5"/><path d="M8 2.5v11a5.5 5.5 0 0 1 0-11z" fill="currentColor"/>`,
+  scissors: `<circle cx="4" cy="11.5" r="2"/><circle cx="12" cy="11.5" r="2"/><path d="M5.5 10L12 2.5M10.5 10L4 2.5"/>`,
+  palette: `<path d="M8 1.75a6.25 6.25 0 1 0 0 12.5c1 0 1.5-.6 1.5-1.3 0-.9-.8-1.3-.8-2 0-.8.6-1.2 1.4-1.2h1.6c1.6 0 2.55-1.1 2.55-2.6C14.25 4.4 11.6 1.75 8 1.75z"/><circle cx="4.6" cy="7.4" r=".9" fill="currentColor"/><circle cx="6.6" cy="4.6" r=".9" fill="currentColor"/><circle cx="10" cy="4.6" r=".9" fill="currentColor"/>`,
+  cube: `<path d="M8 1.75l5.5 3v6.5L8 14.25l-5.5-3V4.75z"/><path d="M2.5 4.75L8 7.75l5.5-3M8 7.75v6.5"/>`,
+  fit: `<path d="M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10"/>`,
+  chevron: `<path d="M6 4l4 4-4 4"/>`,
+  assembly: `<path stroke-width="1.25" d="M9.24 8.1L5.6 10.2L1.96 8.1L1.96 3.9L5.6 1.8L9.24 3.9zM14.04 12.1L10.4 14.2L6.76 12.1L6.76 7.9L10.4 5.8L14.04 7.9z"/>`,
+  search: `<circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5l3.5 3.5"/>`,
+  folder: `<path d="M2.5 4.5v8h11V6.5H8L6.5 4.5z"/>`,
+  folderPlus: `<path d="M2.5 4.5v8h11V6.5H8L6.5 4.5z"/><path d="M8 7.75v3.5M6.25 9.5h3.5"/>`,
+  file: `<path d="M4 1.75h5.25L12.5 5v9.25H4z"/><path d="M9.25 1.75V5h3.25"/>`,
+  plus: `<path d="M8 3v10M3 8h10"/>`,
+  close: `<path d="M4 4l8 8M12 4l-8 8"/>`,
+  parts: `<path d="M3 4h10M3 8h10M3 12h10"/>`,
+  more: `<circle cx="3.5" cy="8" r="1.1" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="1.1" fill="currentColor" stroke="none"/><circle cx="12.5" cy="8" r="1.1" fill="currentColor" stroke="none"/>`,
+  check: `<path d="M3.5 8.5l3 3 6-7"/>`,
+};
+
+export const icons = Object.fromEntries(
+  Object.entries(iconMarkup).map(([name, markup]) => [name, (size) => svg(markup, size)]));
+
+// An icon as an element, parsed once and then cloned, for chrome made often, such as tree rows.
+const parsed = new Map();
+export function iconNode(name, size) {
+  const key = `${name} ${size}`;
+  let node = parsed.get(key);
+  if (!node) {
+    const template = document.createElement("template");
+    template.innerHTML = icons[name](size);
+    node = template.content.firstChild;
+    parsed.set(key, node);
+  }
+  return node.cloneNode(true);
+}