geometryview 0.0.0-stage → 0.1.0

package/web/library-rows.js

@@ -0,0 +1,120 @@
+// What the Library lists, as rows: the connected folders, each a tree read a level at a time as it
+// is opened, then the files opened recently. Pure: the store gives it the folders, their listings
+// and the recent files, and the card draws its rows. The Mac app's LibraryRows.swift does the
+// same, and Launcher/test/library-rows.test.mjs checks this one.
+
+export const kRecentLimit = 12;
+
+export const RowKinds = Object.freeze({
+  Section: "section", // "Folders" or "Recent"
+  Folder: "folder",   // a connected folder (depth 1) or one inside it
+  File: "file",       // a STEP or STL file in a folder
+  Recent: "recent",   // a file opened before
+  Message: "message", // a line of text where rows would be
+});
+
+export const Sections = Object.freeze({ Folders: "folders", Recent: "recent" });
+
+const kModel = /\.(step|stp|stl)$/i;
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+
+// What a folder lists: its folders, then its STEP and STL files, each in the order people read
+// numbers in names; hidden names left out. `entries` are { name, kind: "folder" | "file" }.
+export function listed(entries) {
+  const shown = entries.filter((e) => !e.name.startsWith(".") &&
+                                      (e.kind === "folder" || kModel.test(e.name)));
+  return shown.sort((a, b) => (a.kind === b.kind ? collator.compare(a.name, b.name)
+                                                 : a.kind === "folder" ? -1 : 1));
+}
+
+// The key of a folder's listing, or a file's, by its connected folder and the path inside it.
+export const keyOf = (root, path) => `${root}/${path}`;
+
+// The rows, top to bottom. `state` is:
+//   folders:   [{ id, name, state: "ready" | "reconnect" | "missing" | "visit" }]
+//   listings:  Map of keyOf(folder, path) to { state: "reading" | "listed" | "failed", entries }
+//   expanded:  Set of keyOf(folder, path) for the folders shown open
+//   collapsed: Set of the Sections hidden
+//   recent:    [{ key, name, where, openedAt }], newest first
+//   open:      Set of the keys of the files shown now
+// A row is { kind, depth, key, name, ... }.
+export function rowsOf({ folders, listings, expanded, collapsed, recent, open = new Set() }) {
+  const rows = [];
+  const folding = !collapsed.has(Sections.Folders);
+  rows.push({ kind: RowKinds.Section, depth: 0, key: Sections.Folders, name: "Folders",
+              count: folders.length, expanded: folding });
+  if (folding) {
+    if (folders.length === 0) {
+      rows.push({ kind: RowKinds.Message, depth: 1, key: "folders-empty",
+                  text: "Connect a folder to browse it." });
+    }
+    for (const folder of folders) {
+      const key = keyOf(folder.id, "");
+      const usable = folder.state === "ready" || folder.state === "visit";
+      const isOpen = usable && expanded.has(key);
+      rows.push({ kind: RowKinds.Folder, depth: 1, key, root: folder.id, path: "", name: folder.name,
+                  state: folder.state, expanded: isOpen, top: true });
+      if (isOpen) addListing(rows, folder.id, "", 2, listings, expanded, open);
+    }
+  }
+  const recentShown = !collapsed.has(Sections.Recent);
+  rows.push({ kind: RowKinds.Section, depth: 0, key: Sections.Recent, name: "Recent",
+              count: recent.length, expanded: recentShown });
+  if (recentShown) {
+    if (recent.length === 0) {
+      rows.push({ kind: RowKinds.Message, depth: 1, key: "recent-empty", text: "Files you open appear here." });
+    }
+    for (const file of recent) {
+      rows.push({ kind: RowKinds.Recent, depth: 1, key: `recent:${file.key}`, recentKey: file.key,
+                  name: file.name, where: file.where, openedAt: file.openedAt, missing: file.missing,
+                  open: open.has(file.key) });
+    }
+  }
+  return rows;
+}
+
+function addListing(rows, root, path, depth, listings, expanded, open) {
+  const listing = listings.get(keyOf(root, path));
+  if (!listing || listing.state === "reading") {
+    if (listing?.slow) rows.push({ kind: RowKinds.Message, depth, key: `${keyOf(root, path)}:reading`, text: "Reading…" });
+    return;
+  }
+  if (listing.state === "failed") {
+    rows.push({ kind: RowKinds.Message, depth, key: `${keyOf(root, path)}:failed`, text: "This folder could not be read." });
+    return;
+  }
+  const entries = listed(listing.entries);
+  if (entries.length === 0) {
+    rows.push({ kind: RowKinds.Message, depth, key: `${keyOf(root, path)}:empty`, text: "No STEP or STL files here." });
+  }
+  for (const entry of entries) {
+    const inner = path ? `${path}/${entry.name}` : entry.name;
+    const key = keyOf(root, inner);
+    if (entry.kind === "folder") {
+      const isOpen = expanded.has(key);
+      rows.push({ kind: RowKinds.Folder, depth, key, root, path: inner, name: entry.name, state: "ready",
+                  expanded: isOpen, top: false });
+      if (isOpen) addListing(rows, root, inner, depth + 1, listings, expanded, open);
+    } else {
+      rows.push({ kind: RowKinds.File, depth, key, root, path: inner, name: entry.name, open: open.has(key) });
+    }
+  }
+}
+
+// The recent files with `file` first: an entry with the same key moves up rather than repeating,
+// and the oldest beyond the limit fall off. Returns { recent, dropped }.
+export function remember(recent, file, limit = kRecentLimit) {
+  const rest = recent.filter((r) => r.key !== file.key);
+  const next = [file, ...rest];
+  return { recent: next.slice(0, limit), dropped: next.slice(limit) };
+}
+
+// How long ago, in a few characters: "now", "5 min", "3 h", "2 d".
+export function ageText(openedAt, now = Date.now()) {
+  const minutes = Math.floor(Math.max(0, now - openedAt) / 60000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours} h`;
+  return `${Math.floor(hours / 24)} d`;
+}

package/web/library-store.js

@@ -0,0 +1,368 @@
+// Where the Library's folders and recent files come from, and how a file in one is read: one
+// interface over the three ways a page can reach folders.
+//
+//   shell   The iPhone shell picks folders and files natively, keeps them, and serves them.
+//   access  The File System Access API (Chrome, Edge): folders are handles, kept in IndexedDB from
+//           one visit to the next; the browser may ask again for permission on a later visit.
+//   visit   Elsewhere (Safari, Firefox), a folder chosen with a folder input or dropped lasts
+//           for this visit only.
+//
+// Nothing is read until it is shown: a folder is listed when it is opened, by names alone, and a
+// file is read when it is opened. The recent files are kept in IndexedDB everywhere.
+
+import { keptFile } from "./library.js";
+import { remember as rememberIn } from "./library-rows.js";
+
+const kDatabase = "geometryview";
+
+function database() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(kDatabase, 1);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore("folders", { keyPath: "id" });
+      request.result.createObjectStore("recent", { keyPath: "key" });
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+let opened = null;
+async function store(name, mode, work) {
+  opened ??= database();
+  const db = await opened;
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(name, mode);
+    const result = work(transaction.objectStore(name));
+    transaction.oncomplete = () => resolve(result?.result);
+    transaction.onerror = () => reject(transaction.error);
+  });
+}
+const all = (name) => store(name, "readonly", (s) => s.getAll()).catch(() => []);
+const put = (name, value) => store(name, "readwrite", (s) => s.put(value)).catch(() => {});
+const remove = (name, key) => store(name, "readwrite", (s) => s.delete(key)).catch(() => {});
+
+const kModelTypes = [{ description: "STEP, STL or cache files",
+                       accept: { "application/octet-stream": [".step", ".stp", ".stl", ".geoblob"] } }];
+
+// ---- File System Access -----------------------------------------------------------------------
+
+class AccessFolders {
+  kind = "access";
+  canConnect = true;
+  #folders = null; // [{ id, name, handle }]
+
+  async #all() {
+    this.#folders ??= await all("folders");
+    return this.#folders;
+  }
+
+  async folders() {
+    const folders = await this.#all();
+    return Promise.all(folders.map(async ({ id, name, handle }) => {
+      const permission = await handle.queryPermission({ mode: "read" }).catch(() => "denied");
+      return { id, name, state: permission === "granted" ? "ready" : "reconnect" };
+    }));
+  }
+
+  // Asks for a folder; null if the person turns the picker away.
+  async connect() {
+    let handle;
+    try {
+      handle = await showDirectoryPicker({ id: "geometryview-library", mode: "read" });
+    } catch (error) {
+      if (error.name === "AbortError") return null;
+      throw error;
+    }
+    return this.adoptHandle(handle);
+  }
+
+  async adoptHandle(handle) {
+    const folders = await this.#all();
+    for (const folder of folders) {
+      if (await folder.handle.isSameEntry(handle).catch(() => false)) return folder.id;
+    }
+    const folder = { id: crypto.randomUUID(), name: handle.name, handle };
+    folders.push(folder);
+    await put("folders", folder);
+    return folder.id;
+  }
+
+  // The tap is the gesture the browser needs to ask again.
+  async reconnect(id) {
+    const folder = (await this.#all()).find((f) => f.id === id);
+    return (await folder?.handle.requestPermission({ mode: "read" })) === "granted";
+  }
+
+  async disconnect(id) {
+    this.#folders = (await this.#all()).filter((f) => f.id !== id);
+    await remove("folders", id);
+  }
+
+  async #directory(id, path) {
+    let directory = (await this.#all()).find((f) => f.id === id)?.handle;
+    if (!directory) throw new Error("That folder is no longer connected.");
+    for (const part of path.split("/").filter(Boolean)) directory = await directory.getDirectoryHandle(part);
+    return directory;
+  }
+
+  async list(id, path) {
+    const entries = [];
+    for await (const [name, handle] of (await this.#directory(id, path)).entries()) {
+      entries.push({ name, kind: handle.kind === "directory" ? "folder" : "file" });
+    }
+    return entries;
+  }
+
+  async fileHandle(id, path) {
+    const parts = path.split("/");
+    const name = parts.pop();
+    return (await this.#directory(id, parts.join("/"))).getFileHandle(name);
+  }
+
+  async file(id, path) {
+    return (await this.fileHandle(id, path)).getFile();
+  }
+
+  // Files to open, each with its handle so Recent can read it again; null if turned away.
+  async pickFiles() {
+    try {
+      const handles = await showOpenFilePicker({ id: "geometryview-open", multiple: true, types: kModelTypes });
+      return Promise.all(handles.map(async (handle) => ({ file: await handle.getFile(), handle })));
+    } catch (error) {
+      if (error.name === "AbortError") return null;
+      throw error;
+    }
+  }
+}
+
+// ---- A folder for this visit ------------------------------------------------------------------
+
+class VisitFolders {
+  kind = "visit";
+  canConnect = "webkitdirectory" in HTMLInputElement.prototype;
+  #folders = []; // [{ id, name, files?: Map(path, File), entry?: DirectoryEntry }]
+
+  async folders() {
+    return this.#folders.map(({ id, name }) => ({ id, name, state: "visit" }));
+  }
+
+  // A folder input: every file in the folder arrives at once, with its path inside it.
+  connect() {
+    return new Promise((resolve) => {
+      const input = Object.assign(document.createElement("input"), { type: "file", webkitdirectory: true });
+      input.addEventListener("change", () => {
+        const files = [...input.files];
+        if (files.length === 0) return resolve(null);
+        const name = files[0].webkitRelativePath.split("/")[0];
+        const byPath = new Map(files.map((f) => [f.webkitRelativePath.split("/").slice(1).join("/"), f]));
+        resolve(this.adoptFiles(name, byPath));
+      });
+      input.addEventListener("cancel", () => resolve(null));
+      input.click();
+    });
+  }
+
+  adoptEntry(entry) {
+    return this.#add({ name: entry.name, entry });
+  }
+
+  // A folder as a Map of the paths inside it to its files.
+  adoptFiles(name, files) {
+    return this.#add({ name, files });
+  }
+
+  #add(folder) {
+    const id = crypto.randomUUID();
+    this.#folders.push({ id, ...folder });
+    return id;
+  }
+
+  async reconnect() { return true; }
+
+  async disconnect(id) {
+    this.#folders = this.#folders.filter((f) => f.id !== id);
+  }
+
+  async list(id, path) {
+    const folder = this.#folders.find((f) => f.id === id);
+    if (!folder) throw new Error("That folder is no longer connected.");
+    if (folder.files) {
+      const prefix = path ? `${path}/` : "";
+      const seen = new Map();
+      for (const inner of folder.files.keys()) {
+        if (!inner.startsWith(prefix)) continue;
+        const [name, ...rest] = inner.slice(prefix.length).split("/");
+        if (!seen.has(name)) seen.set(name, rest.length > 0 ? "folder" : "file");
+      }
+      return [...seen].map(([name, kind]) => ({ name, kind }));
+    }
+    const directory = await this.#entry(folder.entry, path);
+    const entries = [];
+    const reader = directory.createReader();
+    for (;;) {
+      const batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+      if (batch.length === 0) break;
+      for (const e of batch) entries.push({ name: e.name, kind: e.isDirectory ? "folder" : "file" });
+    }
+    return entries;
+  }
+
+  async #entry(directory, path) {
+    for (const part of path.split("/").filter(Boolean)) {
+      directory = await new Promise((resolve, reject) => directory.getDirectory(part, {}, resolve, reject));
+    }
+    return directory;
+  }
+
+  async file(id, path) {
+    const folder = this.#folders.find((f) => f.id === id);
+    if (!folder) throw new Error("That folder is no longer connected.");
+    if (folder.files) return folder.files.get(path);
+    const parts = path.split("/");
+    const name = parts.pop();
+    const directory = await this.#entry(folder.entry, parts.join("/"));
+    const entry = await new Promise((resolve, reject) => directory.getFile(name, {}, resolve, reject));
+    return new Promise((resolve, reject) => entry.file(resolve, reject));
+  }
+
+  pickFiles() { return Promise.resolve(undefined); } // the page's own file input instead
+}
+
+// ---- The iPhone shell ------------------------------------------------------------------------
+
+const encodePath = (path) => path.split("/").map(encodeURIComponent).join("/");
+
+class ShellFolders {
+  kind = "shell";
+  canConnect = true;
+
+  constructor() {
+    // The shell serves the page from the same address each launch, so what it keeps lasts: asked
+    // not to be cleared under storage pressure.
+    navigator.storage?.persist?.().catch(() => {});
+  }
+
+  #ask(op, extra = {}) {
+    return window.webkit.messageHandlers.library.postMessage({ op, ...extra });
+  }
+
+  folders() { return this.#ask("folders"); }
+  async connect() { return (await this.#ask("connectFolder")) ?? null; }
+  async reconnect() { return true; }
+  async disconnect(id) { await this.#ask("disconnect", { id }); }
+
+  async list(id, path) {
+    const response = await fetch(`/list/${id}/${encodePath(path)}`);
+    if (!response.ok) throw new Error("This folder could not be read.");
+    return response.json();
+  }
+
+  async file(id, path) {
+    return this.#fetchFile(`/open/${id}/${encodePath(path)}`, path.split("/").pop());
+  }
+
+  async #fetchFile(url, name) {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`${name} could not be read.`);
+    const lastModified = Number(response.headers.get("GeometryView-Modified")) || Date.now();
+    return new File([await response.blob()], name, { lastModified });
+  }
+
+  // The system's picker, opening files where they are.
+  async pickFiles() {
+    const picked = await this.#ask("pickFiles");
+    if (!picked) return null;
+    return Promise.all(picked.map(async (p) => ({ file: await this.#fetchFile(p.path, p.name), handle: null })));
+  }
+}
+
+// ---- The store --------------------------------------------------------------------------------
+
+export class LibraryStore {
+  folders;
+  #recent = null;
+
+  // `backend` "visit" uses a folder for this visit even where the browser offers more, for checks.
+  constructor({ backend } = {}) {
+    const shell = window.webkit?.messageHandlers?.library !== undefined;
+    const access = typeof showDirectoryPicker === "function" && backend !== "visit";
+    this.folders = shell ? new ShellFolders() : access ? new AccessFolders() : new VisitFolders();
+  }
+
+  get kind() { return this.folders.kind; }
+  get canConnect() { return this.folders.canConnect; }
+
+  // Dropped items, read in the drop event itself, as browsers require: folders are connected and
+  // files returned to open, each with its handle where the browser gives one. Returns
+  // { files: [{ file, handle }], connected: [ids] }.
+  async adopt(dataTransfer) {
+    const items = [...dataTransfer.items].filter((item) => item.kind === "file");
+    // Every handle asked for before any await, while the drop's data can still be read.
+    const handles = items.map((item) => item.getAsFileSystemHandle?.() ?? null);
+    const entries = items.map((item) => item.webkitGetAsEntry?.() ?? null);
+    const plain = items.map((item) => item.getAsFile());
+    const files = [];
+    const connected = [];
+    for (let i = 0; i < items.length; ++i) {
+      const handle = await handles[i]?.catch(() => null);
+      if (handle?.kind === "directory" && this.folders.adoptHandle) {
+        connected.push(await this.folders.adoptHandle(handle));
+      } else if (entries[i]?.isDirectory && this.folders.adoptEntry) {
+        connected.push(this.folders.adoptEntry(entries[i]));
+      } else if (plain[i]) {
+        files.push({ file: plain[i], handle: handle?.kind === "file" ? handle : null });
+      }
+    }
+    return { files, connected };
+  }
+
+  // ---- Recent files ----
+
+  // The recent files, newest first: { key, name, where, openedAt, handle?, root?, path? }. On a
+  // first visit, the imports this browser kept before Recent existed.
+  async recent(kept) {
+    if (this.#recent) return this.#recent;
+    const saved = await all("recent");
+    if (saved.length === 0 && kept?.length) {
+      this.#recent = kept.slice(0, 12).map((k) => ({ key: k.name, name: k.name, where: "Kept in this browser",
+                                                     openedAt: k.modified }));
+      for (const r of this.#recent) await put("recent", r);
+    } else {
+      this.#recent = saved.sort((a, b) => b.openedAt - a.openedAt);
+    }
+    return this.#recent;
+  }
+
+  // Puts `entry` first; returns the entries that fell off.
+  async remember(entry) {
+    const { recent, dropped } = rememberIn(await this.recent(), entry);
+    this.#recent = recent;
+    await put("recent", entry);
+    for (const old of dropped) await remove("recent", old.key);
+    return dropped;
+  }
+
+  async forget(key) {
+    this.#recent = (await this.recent()).filter((r) => r.key !== key);
+    await remove("recent", key);
+  }
+
+  // What reopening a recent file gives: { file } to import (its kept import is used if it is
+  // unchanged), { cache } to open as it was kept, or null if it can't be had. May ask for
+  // permission, so call it from the click.
+  async reopen(entry, readyFolders) {
+    if (entry.root && readyFolders.has(entry.root)) {
+      return { file: await this.folders.file(entry.root, entry.path) };
+    }
+    const permission = await entry.handle?.queryPermission?.({ mode: "read" }).catch(() => "denied");
+    if (permission === "granted") return { file: await entry.handle.getFile() };
+    const cache = await keptFile(entry.name).catch(() => null);
+    if (cache) return { cache };
+    if (entry.handle && (await entry.handle.requestPermission({ mode: "read" }).catch(() => "denied")) === "granted") {
+      return { file: await entry.handle.getFile() };
+    }
+    if (entry.url) return { url: entry.url };
+    return null;
+  }
+}