gds-lens 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -7,6 +7,47 @@ follows [semantic versioning](https://semver.org/spec/v2.0.0.html).
 From 1.0.0 on, a breaking change to the element's API waits for a major
 version. Before that, `0.x` releases changed it freely.
 
+## [1.1.0] - 2026-08-31
+
+### Added
+
+- Touch: one finger pans the layout, two pinch to zoom about the point between
+  them and drag the view with it. Lifting one finger of a pinch hands the
+  gesture to the other rather than ending it, so a pinch that relaxes into a
+  drag does not jump.
+
+### Changed
+
+- On a touch-only device (a coarse pointer *and* no hover, so a touchscreen
+  laptop is not one) the control panel starts collapsed to its title bar, and
+  both it and the cell hierarchy are capped at 85% of the viewport width. A
+  panel sized for a window is most of a phone screen, and the layout is what
+  someone opening the viewer came for.
+- Measure mode is offered greyed out where there is no hovering pointer. It is
+  placed by clicking two points, and without hover the snap indicator only
+  appears after the tap that already used it, under a fingertip.
+- The demo page drops its tagline, its file button, its status line and its
+  what-this-is-built-from footer line below 620px. Two of those cannot work on
+  touch anyway: there is no drag-and-drop, and the file picker's extension
+  filter greys out `.gds`/`.oas` in the iOS Files app.
+
+### Fixed
+
+- Touch input did not work at all on iOS. The gestures were handled in the
+  renderer, through `emscripten_set_touchstart_callback`, and that callback
+  never runs on iOS Safari: the events reach the canvas and the handler behind
+  them does not fire. Emscripten resolves mouse and touch targets through the
+  same code path, so the mouse handlers next to them were fine, which is what
+  made this invisible from a desktop. The gestures are now ordinary listeners
+  on the element, driving the camera through the exported `getCamera` /
+  `setCamera` -- the same arithmetic, with nothing between the DOM event and
+  the state it changes. Covered by a test that spells out the touch lists.
+- A two-finger pinch over the viewer zoomed the page on iOS instead of the
+  layout. Safari answers a pinch with its own page zoom, delivered as a
+  proprietary `GestureEvent`, and it does that over an element that has already
+  claimed the gesture with `touch-action: none`. Refused on the canvas alone,
+  so a pinch anywhere else in an embedding page still zooms it.
+
 ## [1.0.3] - 2026-08-31
 
 ### Fixed
@@ -348,7 +389,9 @@ web page rather than for a webview.
   worker-loading route and shipped unsubstituted. The `createWorker` host hook
   replaces it.
 
-[Unreleased]: https://github.com/EthanLowenthal/GDS-Lens/compare/v1.0.2...HEAD
+[Unreleased]: https://github.com/EthanLowenthal/GDS-Lens/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/EthanLowenthal/GDS-Lens/compare/v1.0.3...v1.1.0
+[1.0.3]: https://github.com/EthanLowenthal/GDS-Lens/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/EthanLowenthal/GDS-Lens/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/EthanLowenthal/GDS-Lens/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/EthanLowenthal/GDS-Lens/compare/v0.1.1...v1.0.0

package/README.md

@@ -32,10 +32,10 @@ import "gds-lens";   // registers <gds-lens>
 <gds-lens src="chip.gds" style="width: 100%; height: 600px"></gds-lens>
 ```
 
-That's the whole thing. Pan with the mouse, zoom with the wheel. The import
-pulls in one self-contained module — the parser, the renderer, the WebAssembly
-binary, and the control panel — so there is nothing to copy and nothing
-else to serve.
+That's the whole thing. Pan with the mouse, zoom with the wheel; on a touch
+screen, drag to pan and pinch to zoom. The import pulls in one self-contained
+module — the parser, the renderer, the WebAssembly binary, and the control
+panel — so there is nothing to copy and nothing else to serve.
 
 Or drive it from JavaScript:
 

package/dist/esm/gds-lens.js

@@ -895,7 +895,12 @@ var init_viewer = __esm({
            against it rather than against the page. */
         :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden;
                 background: var(--bg); user-select: none; color: var(--fg); }
-        canvas { width: 100%; height: 100%; display: block; }
+        /* touch-action: none hands every gesture over the canvas to the touch
+           handlers in renderer.cpp: without it the browser claims a drag for
+           page scrolling and a pinch for its own page zoom before the handlers
+           see the second event, and it is also what turns off double-tap zoom
+           over the layout. */
+        canvas { width: 100%; height: 100%; display: block; touch-action: none; }
         /* The engine readout (polygon/label counts + the per-frame #renderStats
            span, both written from renderer.cpp). It lives inside #debugPanel
            rather than floating over the canvas on its own: it's debug-only
@@ -980,6 +985,15 @@ var init_viewer = __esm({
            overlay (30) and debug panel (40) rather than lil-gui's 1001. */
         #guiHost { position: absolute; top: 0; right: 15px; max-height: 100%; z-index: 20; display: flex; }
         #guiHost > .lil-gui.lil-root { max-height: 100%; }
+        /* Both panels are sized for a window, and a phone is narrower than
+           either of them plus anything worth seeing. Capped rather than
+           reflowed: they still open over the layout, but never across all of
+           it. (The control panel also starts collapsed here -- see touchOnly
+           in viewer.js.) */
+        @media (pointer: coarse) and (hover: none) {
+            #guiHost > .lil-gui.lil-root { max-width: 85vw; }
+            #hierarchyPanel { width: min(260px, 85vw); }
+        }
         /* Checkbox rows (layer list + top-level toggles): lil-gui gives the
            label a 45% min-width and no overflow handling, so a long name like
            "250/74 \u2013 SIN_WG_S" would push into the checkbox column. Widen the
@@ -1021,6 +1035,10 @@ var init_viewer = __esm({
            buttons a readable width. */
         .lil-gui .lil-controller.mode-row .lil-name { min-width: 30%; }
         .lil-gui .lil-controller.mode-row .mode-widget { gap: 4px; }
+        /* Greyed out where the mode is not offered (see touchOnly in
+           viewer.js). lil-gui dims a whole disabled controller, but has no rule
+           for one disabled button inside a live row. */
+        .lil-gui .lil-controller.mode-row .mode-widget button:disabled { opacity: 0.5; cursor: default; }
         .lil-gui .lil-controller.mode-row .mode-widget button { flex: 1; }
         /* :hover/:active spelled out too -- lil-gui's own button:hover rule
            outranks a bare .mode-active, which would grey out the selected
@@ -3126,6 +3144,7 @@ function createViewer(mountTarget) {
   const hostCall = (name, ...args) => hostCan(name) ? host[name](...args) : void 0;
   trace("[GDS] host ready; Worker:", typeof Worker, "Blob:", typeof Blob, "bundled worker:", !!workerBundle);
   const gui = new GUI({ width: 260, container: viewerRoot.getElementById("guiHost"), injectStyles: false });
+  const touchOnly = typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse) and (hover: none)").matches;
   const actions = {
     // Clicking the row always opens the file dialog (load, or replace the
     // current file); the injected ✕ (see setFileChip) handles unloading.
@@ -3154,6 +3173,7 @@ function createViewer(mountTarget) {
   const lypController = displayFolder.add(actions, "loadLypFile").name("Load .lyp File");
   const markerController = displayFolder.add(actions, "loadMarkerFile").name("Load Marker File (.lyrdb / DRC)");
   displayFolder.add(actions, "resetView").name("Reset View");
+  if (touchOnly) gui.close();
   const MODES = [
     { id: "pan", label: "Pan", title: "Drag to pan the view, wheel to zoom" },
     {
@@ -3176,6 +3196,10 @@ function createViewer(mountTarget) {
     btn.type = "button";
     btn.textContent = mode.label;
     btn.title = mode.title;
+    if (mode.id === "measure" && touchOnly) {
+      btn.disabled = true;
+      btn.title = "Measuring needs a pointer that hovers: use a mouse or a trackpad.";
+    }
     btn.addEventListener("click", () => setMode(mode.id));
     modeWidget.appendChild(btn);
     modeButtons.set(mode.id, btn);
@@ -3184,6 +3208,7 @@ function createViewer(mountTarget) {
   modeRow.appendChild(modeWidget);
   gui.$children.prepend(modeRow);
   function setMode(id) {
+    if (id === "measure" && touchOnly) return;
     if (currentMode === id) return;
     currentMode = id;
     for (const [modeId, btn] of modeButtons) {
@@ -3222,10 +3247,110 @@ function createViewer(mountTarget) {
   }
   const glCanvas = els.glCanvas;
   if (glCanvas) {
+    let zoomAbout = function(camera, newZoom, pixelX, pixelY) {
+      const dx = pixelX - glCanvas.clientWidth / 2;
+      const dy = glCanvas.clientHeight / 2 - pixelY;
+      const worldX = camera.panX + dx / camera.zoom;
+      const worldY = camera.panY + dy / camera.zoom;
+      return { zoom: newZoom, panX: worldX - dx / newZoom, panY: worldY - dy / newZoom };
+    };
     glCanvas.addEventListener("mousedown", () => {
       if (currentMode !== "measure") return;
       setTimeout(() => modulePromise.then(refreshRulerRow), 0);
     });
+    let panId = null;
+    let pinch = null;
+    let lastX = 0, lastY = 0;
+    const MIN_PINCH_PX = 8;
+    const touchById = (list, id) => {
+      for (const touch of list) if (touch.identifier === id) return touch;
+      return null;
+    };
+    const spread = (a, b) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+    const onCanvas = (event) => event.composedPath().includes(glCanvas);
+    const touchIdle = () => currentMode === "measure" || !resolvedModule;
+    hostElement.addEventListener("touchstart", (event) => {
+      if (touchIdle() || !onCanvas(event)) return;
+      const touches = event.touches;
+      if (touches.length >= 2) {
+        if (!pinch) {
+          const [a, b] = touches;
+          pinch = { a: a.identifier, b: b.identifier, dist: spread(a, b) };
+          panId = null;
+          lastX = (a.clientX + b.clientX) / 2;
+          lastY = (a.clientY + b.clientY) / 2;
+        }
+      } else if (touches.length === 1) {
+        panId = touches[0].identifier;
+        lastX = touches[0].clientX;
+        lastY = touches[0].clientY;
+      }
+      event.preventDefault();
+    }, { passive: false });
+    hostElement.addEventListener("touchmove", (event) => {
+      if (touchIdle() || !onCanvas(event)) return;
+      let camera = resolvedModule.getCamera();
+      if (pinch) {
+        const a = touchById(event.touches, pinch.a);
+        const b = touchById(event.touches, pinch.b);
+        if (a && b) {
+          const midX = (a.clientX + b.clientX) / 2;
+          const midY = (a.clientY + b.clientY) / 2;
+          camera = {
+            zoom: camera.zoom,
+            panX: camera.panX - (midX - lastX) / camera.zoom,
+            panY: camera.panY + (midY - lastY) / camera.zoom
+          };
+          lastX = midX;
+          lastY = midY;
+          const dist = spread(a, b);
+          if (dist >= MIN_PINCH_PX && pinch.dist >= MIN_PINCH_PX) {
+            const rect = glCanvas.getBoundingClientRect();
+            camera = zoomAbout(
+              camera,
+              camera.zoom * dist / pinch.dist,
+              midX - rect.left,
+              midY - rect.top
+            );
+            pinch.dist = dist;
+          }
+          resolvedModule.setCamera(camera.zoom, camera.panX, camera.panY);
+          event.preventDefault();
+        }
+        return;
+      }
+      const finger = panId === null ? null : touchById(event.touches, panId);
+      if (!finger) return;
+      resolvedModule.setCamera(
+        camera.zoom,
+        camera.panX - (finger.clientX - lastX) / camera.zoom,
+        camera.panY + (finger.clientY - lastY) / camera.zoom
+      );
+      lastX = finger.clientX;
+      lastY = finger.clientY;
+      event.preventDefault();
+    }, { passive: false });
+    const endTouch = (event) => {
+      if (pinch) {
+        const a = touchById(event.touches, pinch.a);
+        const b = touchById(event.touches, pinch.b);
+        if (a && b) return;
+        const survivor = a || b;
+        pinch = null;
+        panId = survivor ? survivor.identifier : null;
+        if (survivor) {
+          lastX = survivor.clientX;
+          lastY = survivor.clientY;
+        }
+        return;
+      }
+      if (panId !== null && !touchById(event.touches, panId)) panId = null;
+    };
+    hostElement.addEventListener("touchend", endTouch);
+    hostElement.addEventListener("touchcancel", endTouch);
+    for (const type of ["gesturestart", "gesturechange", "gestureend"]) {
+      glCanvas.addEventListener(type, (event) => event.preventDefault());
+    }
   }
   function setFileChip(controller, name, { idleLabel, idleTitle, unloadTitle, onUnload }) {
     const existingX = controller.domElement.querySelector(".lyp-unload");

package/dist/inline-wasm/gds-lens.js

@@ -871,7 +871,12 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
            against it rather than against the page. */
         :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden;
                 background: var(--bg); user-select: none; color: var(--fg); }
-        canvas { width: 100%; height: 100%; display: block; }
+        /* touch-action: none hands every gesture over the canvas to the touch
+           handlers in renderer.cpp: without it the browser claims a drag for
+           page scrolling and a pinch for its own page zoom before the handlers
+           see the second event, and it is also what turns off double-tap zoom
+           over the layout. */
+        canvas { width: 100%; height: 100%; display: block; touch-action: none; }
         /* The engine readout (polygon/label counts + the per-frame #renderStats
            span, both written from renderer.cpp). It lives inside #debugPanel
            rather than floating over the canvas on its own: it's debug-only
@@ -956,6 +961,15 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
            overlay (30) and debug panel (40) rather than lil-gui's 1001. */
         #guiHost { position: absolute; top: 0; right: 15px; max-height: 100%; z-index: 20; display: flex; }
         #guiHost > .lil-gui.lil-root { max-height: 100%; }
+        /* Both panels are sized for a window, and a phone is narrower than
+           either of them plus anything worth seeing. Capped rather than
+           reflowed: they still open over the layout, but never across all of
+           it. (The control panel also starts collapsed here -- see touchOnly
+           in viewer.js.) */
+        @media (pointer: coarse) and (hover: none) {
+            #guiHost > .lil-gui.lil-root { max-width: 85vw; }
+            #hierarchyPanel { width: min(260px, 85vw); }
+        }
         /* Checkbox rows (layer list + top-level toggles): lil-gui gives the
            label a 45% min-width and no overflow handling, so a long name like
            "250/74 \u2013 SIN_WG_S" would push into the checkbox column. Widen the
@@ -997,6 +1011,10 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
            buttons a readable width. */
         .lil-gui .lil-controller.mode-row .lil-name { min-width: 30%; }
         .lil-gui .lil-controller.mode-row .mode-widget { gap: 4px; }
+        /* Greyed out where the mode is not offered (see touchOnly in
+           viewer.js). lil-gui dims a whole disabled controller, but has no rule
+           for one disabled button inside a live row. */
+        .lil-gui .lil-controller.mode-row .mode-widget button:disabled { opacity: 0.5; cursor: default; }
         .lil-gui .lil-controller.mode-row .mode-widget button { flex: 1; }
         /* :hover/:active spelled out too -- lil-gui's own button:hover rule
            outranks a bare .mode-active, which would grey out the selected
@@ -3102,6 +3120,7 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     const hostCall = (name, ...args) => hostCan(name) ? host[name](...args) : void 0;
     trace("[GDS] host ready; Worker:", typeof Worker, "Blob:", typeof Blob, "bundled worker:", !!workerBundle);
     const gui = new GUI({ width: 260, container: viewerRoot.getElementById("guiHost"), injectStyles: false });
+    const touchOnly = typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse) and (hover: none)").matches;
     const actions = {
       // Clicking the row always opens the file dialog (load, or replace the
       // current file); the injected ✕ (see setFileChip) handles unloading.
@@ -3130,6 +3149,7 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     const lypController = displayFolder.add(actions, "loadLypFile").name("Load .lyp File");
     const markerController = displayFolder.add(actions, "loadMarkerFile").name("Load Marker File (.lyrdb / DRC)");
     displayFolder.add(actions, "resetView").name("Reset View");
+    if (touchOnly) gui.close();
     const MODES = [
       { id: "pan", label: "Pan", title: "Drag to pan the view, wheel to zoom" },
       {
@@ -3152,6 +3172,10 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
       btn.type = "button";
       btn.textContent = mode.label;
       btn.title = mode.title;
+      if (mode.id === "measure" && touchOnly) {
+        btn.disabled = true;
+        btn.title = "Measuring needs a pointer that hovers: use a mouse or a trackpad.";
+      }
       btn.addEventListener("click", () => setMode(mode.id));
       modeWidget.appendChild(btn);
       modeButtons.set(mode.id, btn);
@@ -3160,6 +3184,7 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     modeRow.appendChild(modeWidget);
     gui.$children.prepend(modeRow);
     function setMode(id) {
+      if (id === "measure" && touchOnly) return;
       if (currentMode === id) return;
       currentMode = id;
       for (const [modeId, btn] of modeButtons) {
@@ -3198,10 +3223,110 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     }
     const glCanvas = els.glCanvas;
     if (glCanvas) {
+      let zoomAbout = function(camera, newZoom, pixelX, pixelY) {
+        const dx = pixelX - glCanvas.clientWidth / 2;
+        const dy = glCanvas.clientHeight / 2 - pixelY;
+        const worldX = camera.panX + dx / camera.zoom;
+        const worldY = camera.panY + dy / camera.zoom;
+        return { zoom: newZoom, panX: worldX - dx / newZoom, panY: worldY - dy / newZoom };
+      };
       glCanvas.addEventListener("mousedown", () => {
         if (currentMode !== "measure") return;
         setTimeout(() => modulePromise.then(refreshRulerRow), 0);
       });
+      let panId = null;
+      let pinch = null;
+      let lastX = 0, lastY = 0;
+      const MIN_PINCH_PX = 8;
+      const touchById = (list, id) => {
+        for (const touch of list) if (touch.identifier === id) return touch;
+        return null;
+      };
+      const spread = (a, b) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+      const onCanvas = (event) => event.composedPath().includes(glCanvas);
+      const touchIdle = () => currentMode === "measure" || !resolvedModule;
+      hostElement.addEventListener("touchstart", (event) => {
+        if (touchIdle() || !onCanvas(event)) return;
+        const touches = event.touches;
+        if (touches.length >= 2) {
+          if (!pinch) {
+            const [a, b] = touches;
+            pinch = { a: a.identifier, b: b.identifier, dist: spread(a, b) };
+            panId = null;
+            lastX = (a.clientX + b.clientX) / 2;
+            lastY = (a.clientY + b.clientY) / 2;
+          }
+        } else if (touches.length === 1) {
+          panId = touches[0].identifier;
+          lastX = touches[0].clientX;
+          lastY = touches[0].clientY;
+        }
+        event.preventDefault();
+      }, { passive: false });
+      hostElement.addEventListener("touchmove", (event) => {
+        if (touchIdle() || !onCanvas(event)) return;
+        let camera = resolvedModule.getCamera();
+        if (pinch) {
+          const a = touchById(event.touches, pinch.a);
+          const b = touchById(event.touches, pinch.b);
+          if (a && b) {
+            const midX = (a.clientX + b.clientX) / 2;
+            const midY = (a.clientY + b.clientY) / 2;
+            camera = {
+              zoom: camera.zoom,
+              panX: camera.panX - (midX - lastX) / camera.zoom,
+              panY: camera.panY + (midY - lastY) / camera.zoom
+            };
+            lastX = midX;
+            lastY = midY;
+            const dist = spread(a, b);
+            if (dist >= MIN_PINCH_PX && pinch.dist >= MIN_PINCH_PX) {
+              const rect = glCanvas.getBoundingClientRect();
+              camera = zoomAbout(
+                camera,
+                camera.zoom * dist / pinch.dist,
+                midX - rect.left,
+                midY - rect.top
+              );
+              pinch.dist = dist;
+            }
+            resolvedModule.setCamera(camera.zoom, camera.panX, camera.panY);
+            event.preventDefault();
+          }
+          return;
+        }
+        const finger = panId === null ? null : touchById(event.touches, panId);
+        if (!finger) return;
+        resolvedModule.setCamera(
+          camera.zoom,
+          camera.panX - (finger.clientX - lastX) / camera.zoom,
+          camera.panY + (finger.clientY - lastY) / camera.zoom
+        );
+        lastX = finger.clientX;
+        lastY = finger.clientY;
+        event.preventDefault();
+      }, { passive: false });
+      const endTouch = (event) => {
+        if (pinch) {
+          const a = touchById(event.touches, pinch.a);
+          const b = touchById(event.touches, pinch.b);
+          if (a && b) return;
+          const survivor = a || b;
+          pinch = null;
+          panId = survivor ? survivor.identifier : null;
+          if (survivor) {
+            lastX = survivor.clientX;
+            lastY = survivor.clientY;
+          }
+          return;
+        }
+        if (panId !== null && !touchById(event.touches, panId)) panId = null;
+      };
+      hostElement.addEventListener("touchend", endTouch);
+      hostElement.addEventListener("touchcancel", endTouch);
+      for (const type of ["gesturestart", "gesturechange", "gestureend"]) {
+        glCanvas.addEventListener(type, (event) => event.preventDefault());
+      }
     }
     function setFileChip(controller, name, { idleLabel, idleTitle, unloadTitle, onUnload }) {
       const existingX = controller.domElement.querySelector(".lyp-unload");

package/dist/web/gds-lens.js

@@ -871,7 +871,12 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
            against it rather than against the page. */
         :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden;
                 background: var(--bg); user-select: none; color: var(--fg); }
-        canvas { width: 100%; height: 100%; display: block; }
+        /* touch-action: none hands every gesture over the canvas to the touch
+           handlers in renderer.cpp: without it the browser claims a drag for
+           page scrolling and a pinch for its own page zoom before the handlers
+           see the second event, and it is also what turns off double-tap zoom
+           over the layout. */
+        canvas { width: 100%; height: 100%; display: block; touch-action: none; }
         /* The engine readout (polygon/label counts + the per-frame #renderStats
            span, both written from renderer.cpp). It lives inside #debugPanel
            rather than floating over the canvas on its own: it's debug-only
@@ -956,6 +961,15 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
            overlay (30) and debug panel (40) rather than lil-gui's 1001. */
         #guiHost { position: absolute; top: 0; right: 15px; max-height: 100%; z-index: 20; display: flex; }
         #guiHost > .lil-gui.lil-root { max-height: 100%; }
+        /* Both panels are sized for a window, and a phone is narrower than
+           either of them plus anything worth seeing. Capped rather than
+           reflowed: they still open over the layout, but never across all of
+           it. (The control panel also starts collapsed here -- see touchOnly
+           in viewer.js.) */
+        @media (pointer: coarse) and (hover: none) {
+            #guiHost > .lil-gui.lil-root { max-width: 85vw; }
+            #hierarchyPanel { width: min(260px, 85vw); }
+        }
         /* Checkbox rows (layer list + top-level toggles): lil-gui gives the
            label a 45% min-width and no overflow handling, so a long name like
            "250/74 \u2013 SIN_WG_S" would push into the checkbox column. Widen the
@@ -997,6 +1011,10 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
            buttons a readable width. */
         .lil-gui .lil-controller.mode-row .lil-name { min-width: 30%; }
         .lil-gui .lil-controller.mode-row .mode-widget { gap: 4px; }
+        /* Greyed out where the mode is not offered (see touchOnly in
+           viewer.js). lil-gui dims a whole disabled controller, but has no rule
+           for one disabled button inside a live row. */
+        .lil-gui .lil-controller.mode-row .mode-widget button:disabled { opacity: 0.5; cursor: default; }
         .lil-gui .lil-controller.mode-row .mode-widget button { flex: 1; }
         /* :hover/:active spelled out too -- lil-gui's own button:hover rule
            outranks a bare .mode-active, which would grey out the selected
@@ -3102,6 +3120,7 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     const hostCall = (name, ...args) => hostCan(name) ? host[name](...args) : void 0;
     trace("[GDS] host ready; Worker:", typeof Worker, "Blob:", typeof Blob, "bundled worker:", !!workerBundle);
     const gui = new GUI({ width: 260, container: viewerRoot.getElementById("guiHost"), injectStyles: false });
+    const touchOnly = typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse) and (hover: none)").matches;
     const actions = {
       // Clicking the row always opens the file dialog (load, or replace the
       // current file); the injected ✕ (see setFileChip) handles unloading.
@@ -3130,6 +3149,7 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     const lypController = displayFolder.add(actions, "loadLypFile").name("Load .lyp File");
     const markerController = displayFolder.add(actions, "loadMarkerFile").name("Load Marker File (.lyrdb / DRC)");
     displayFolder.add(actions, "resetView").name("Reset View");
+    if (touchOnly) gui.close();
     const MODES = [
       { id: "pan", label: "Pan", title: "Drag to pan the view, wheel to zoom" },
       {
@@ -3152,6 +3172,10 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
       btn.type = "button";
       btn.textContent = mode.label;
       btn.title = mode.title;
+      if (mode.id === "measure" && touchOnly) {
+        btn.disabled = true;
+        btn.title = "Measuring needs a pointer that hovers: use a mouse or a trackpad.";
+      }
       btn.addEventListener("click", () => setMode(mode.id));
       modeWidget.appendChild(btn);
       modeButtons.set(mode.id, btn);
@@ -3160,6 +3184,7 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     modeRow.appendChild(modeWidget);
     gui.$children.prepend(modeRow);
     function setMode(id) {
+      if (id === "measure" && touchOnly) return;
       if (currentMode === id) return;
       currentMode = id;
       for (const [modeId, btn] of modeButtons) {
@@ -3198,10 +3223,110 @@ Usually a truncated or half-written file -- a copy that was interrupted, or a do
     }
     const glCanvas = els.glCanvas;
     if (glCanvas) {
+      let zoomAbout = function(camera, newZoom, pixelX, pixelY) {
+        const dx = pixelX - glCanvas.clientWidth / 2;
+        const dy = glCanvas.clientHeight / 2 - pixelY;
+        const worldX = camera.panX + dx / camera.zoom;
+        const worldY = camera.panY + dy / camera.zoom;
+        return { zoom: newZoom, panX: worldX - dx / newZoom, panY: worldY - dy / newZoom };
+      };
       glCanvas.addEventListener("mousedown", () => {
         if (currentMode !== "measure") return;
         setTimeout(() => modulePromise.then(refreshRulerRow), 0);
       });
+      let panId = null;
+      let pinch = null;
+      let lastX = 0, lastY = 0;
+      const MIN_PINCH_PX = 8;
+      const touchById = (list, id) => {
+        for (const touch of list) if (touch.identifier === id) return touch;
+        return null;
+      };
+      const spread = (a, b) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+      const onCanvas = (event) => event.composedPath().includes(glCanvas);
+      const touchIdle = () => currentMode === "measure" || !resolvedModule;
+      hostElement.addEventListener("touchstart", (event) => {
+        if (touchIdle() || !onCanvas(event)) return;
+        const touches = event.touches;
+        if (touches.length >= 2) {
+          if (!pinch) {
+            const [a, b] = touches;
+            pinch = { a: a.identifier, b: b.identifier, dist: spread(a, b) };
+            panId = null;
+            lastX = (a.clientX + b.clientX) / 2;
+            lastY = (a.clientY + b.clientY) / 2;
+          }
+        } else if (touches.length === 1) {
+          panId = touches[0].identifier;
+          lastX = touches[0].clientX;
+          lastY = touches[0].clientY;
+        }
+        event.preventDefault();
+      }, { passive: false });
+      hostElement.addEventListener("touchmove", (event) => {
+        if (touchIdle() || !onCanvas(event)) return;
+        let camera = resolvedModule.getCamera();
+        if (pinch) {
+          const a = touchById(event.touches, pinch.a);
+          const b = touchById(event.touches, pinch.b);
+          if (a && b) {
+            const midX = (a.clientX + b.clientX) / 2;
+            const midY = (a.clientY + b.clientY) / 2;
+            camera = {
+              zoom: camera.zoom,
+              panX: camera.panX - (midX - lastX) / camera.zoom,
+              panY: camera.panY + (midY - lastY) / camera.zoom
+            };
+            lastX = midX;
+            lastY = midY;
+            const dist = spread(a, b);
+            if (dist >= MIN_PINCH_PX && pinch.dist >= MIN_PINCH_PX) {
+              const rect = glCanvas.getBoundingClientRect();
+              camera = zoomAbout(
+                camera,
+                camera.zoom * dist / pinch.dist,
+                midX - rect.left,
+                midY - rect.top
+              );
+              pinch.dist = dist;
+            }
+            resolvedModule.setCamera(camera.zoom, camera.panX, camera.panY);
+            event.preventDefault();
+          }
+          return;
+        }
+        const finger = panId === null ? null : touchById(event.touches, panId);
+        if (!finger) return;
+        resolvedModule.setCamera(
+          camera.zoom,
+          camera.panX - (finger.clientX - lastX) / camera.zoom,
+          camera.panY + (finger.clientY - lastY) / camera.zoom
+        );
+        lastX = finger.clientX;
+        lastY = finger.clientY;
+        event.preventDefault();
+      }, { passive: false });
+      const endTouch = (event) => {
+        if (pinch) {
+          const a = touchById(event.touches, pinch.a);
+          const b = touchById(event.touches, pinch.b);
+          if (a && b) return;
+          const survivor = a || b;
+          pinch = null;
+          panId = survivor ? survivor.identifier : null;
+          if (survivor) {
+            lastX = survivor.clientX;
+            lastY = survivor.clientY;
+          }
+          return;
+        }
+        if (panId !== null && !touchById(event.touches, panId)) panId = null;
+      };
+      hostElement.addEventListener("touchend", endTouch);
+      hostElement.addEventListener("touchcancel", endTouch);
+      for (const type of ["gesturestart", "gesturechange", "gestureend"]) {
+        glCanvas.addEventListener(type, (event) => event.preventDefault());
+      }
     }
     function setFileChip(controller, name, { idleLabel, idleTitle, unloadTitle, onUnload }) {
       const existingX = controller.domElement.querySelector(".lyp-unload");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gds-lens",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "GDSII & OASIS layout parsing and WebGL2 rendering for the browser",
   "license": "MIT",
   "author": "Ethan Lowenthal",

package/src/viewer.css

@@ -110,7 +110,12 @@
            against it rather than against the page. */
         :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden;
                 background: var(--bg); user-select: none; color: var(--fg); }
-        canvas { width: 100%; height: 100%; display: block; }
+        /* touch-action: none hands every gesture over the canvas to the touch
+           handlers in renderer.cpp: without it the browser claims a drag for
+           page scrolling and a pinch for its own page zoom before the handlers
+           see the second event, and it is also what turns off double-tap zoom
+           over the layout. */
+        canvas { width: 100%; height: 100%; display: block; touch-action: none; }
         /* The engine readout (polygon/label counts + the per-frame #renderStats
            span, both written from renderer.cpp). It lives inside #debugPanel
            rather than floating over the canvas on its own: it's debug-only
@@ -195,6 +200,15 @@
            overlay (30) and debug panel (40) rather than lil-gui's 1001. */
         #guiHost { position: absolute; top: 0; right: 15px; max-height: 100%; z-index: 20; display: flex; }
         #guiHost > .lil-gui.lil-root { max-height: 100%; }
+        /* Both panels are sized for a window, and a phone is narrower than
+           either of them plus anything worth seeing. Capped rather than
+           reflowed: they still open over the layout, but never across all of
+           it. (The control panel also starts collapsed here -- see touchOnly
+           in viewer.js.) */
+        @media (pointer: coarse) and (hover: none) {
+            #guiHost > .lil-gui.lil-root { max-width: 85vw; }
+            #hierarchyPanel { width: min(260px, 85vw); }
+        }
         /* Checkbox rows (layer list + top-level toggles): lil-gui gives the
            label a 45% min-width and no overflow handling, so a long name like
            "250/74 – SIN_WG_S" would push into the checkbox column. Widen the
@@ -236,6 +250,10 @@
            buttons a readable width. */
         .lil-gui .lil-controller.mode-row .lil-name { min-width: 30%; }
         .lil-gui .lil-controller.mode-row .mode-widget { gap: 4px; }
+        /* Greyed out where the mode is not offered (see touchOnly in
+           viewer.js). lil-gui dims a whole disabled controller, but has no rule
+           for one disabled button inside a live row. */
+        .lil-gui .lil-controller.mode-row .mode-widget button:disabled { opacity: 0.5; cursor: default; }
         .lil-gui .lil-controller.mode-row .mode-widget button { flex: 1; }
         /* :hover/:active spelled out too -- lil-gui's own button:hover rule
            outranks a bare .mode-active, which would grey out the selected

package/src/viewer.js

@@ -311,6 +311,14 @@ export function createViewer(mountTarget) {
     // unstyled. Its CSS is carried in viewer.css instead (see the lil-gui block
     // there), alongside everything else the shadow root owns.
     const gui = new GUI({ width: 260, container: viewerRoot.getElementById("guiHost"), injectStyles: false });
+
+    // A touch-only device: coarse pointer *and* no hover, so a touchscreen
+    // laptop (coarse pointer, but a mouse too) is not one. Two things follow
+    // from it -- the panel starts collapsed, and measure mode is withheld --
+    // and both are about the same thing: what a fingertip can do, and how much
+    // room there is to do it in.
+    const touchOnly = typeof window.matchMedia === "function"
+        && window.matchMedia("(pointer: coarse) and (hover: none)").matches;
     const actions = {
         // Clicking the row always opens the file dialog (load, or replace the
         // current file); the injected ✕ (see setFileChip) handles unloading.
@@ -363,6 +371,13 @@ export function createViewer(mountTarget) {
     const markerController = displayFolder.add(actions, "loadMarkerFile").name("Load Marker File (.lyrdb / DRC)");
     displayFolder.add(actions, "resetView").name("Reset View");
 
+    // On a phone the panel is most of the screen, so it starts collapsed to its
+    // title bar rather than opening over the layout: the point of arriving is
+    // to see the design, and one tap on the bar brings the controls back. Left
+    // open everywhere a pointer hovers, where it costs a corner of a much
+    // larger window.
+    if (touchOnly) gui.close();
+
     // ---- Interaction mode (Pan / Measure) ----
     // The canvas can only do one thing with a click, so the two are exclusive
     // modes rather than an "on top of panning" toggle: in Pan mode a drag moves
@@ -399,6 +414,16 @@ export function createViewer(mountTarget) {
         btn.type = "button";
         btn.textContent = mode.label;
         btn.title = mode.title;
+        // Measuring is left to the compatibility mouse events a tap produces
+        // (the canvas's touch handlers in renderer.cpp bow out while the mode
+        // is on), and on a touch-only device that is a poor tool: with no
+        // hover the snap indicator only appears after the tap that already
+        // used it, and the point it snapped to is under a fingertip. Offered
+        // greyed out rather than half-working.
+        if (mode.id === "measure" && touchOnly) {
+            btn.disabled = true;
+            btn.title = "Measuring needs a pointer that hovers: use a mouse or a trackpad.";
+        }
         btn.addEventListener("click", () => setMode(mode.id));
         modeWidget.appendChild(btn);
         modeButtons.set(mode.id, btn);
@@ -413,6 +438,8 @@ export function createViewer(mountTarget) {
     gui.$children.prepend(modeRow);
 
     function setMode(id) {
+        // Also guards the M key, which calls straight in here.
+        if (id === "measure" && touchOnly) return;
         if (currentMode === id) return;
         currentMode = id;
         for (const [modeId, btn] of modeButtons) {
@@ -470,6 +497,167 @@ export function createViewer(mountTarget) {
             if (currentMode !== "measure") return;
             setTimeout(() => modulePromise.then(refreshRulerRow), 0);
         });
+
+        // ---- Touch: one finger pans, two pinch about their midpoint ----
+        //
+        // Here rather than in renderer.cpp, where the mouse and wheel handlers
+        // live, because Emscripten's touch marshalling never reaches the C++
+        // callback on iOS Safari: the events arrive at the canvas, and the
+        // handler behind emscripten_set_touchstart_callback does not run.
+        // Driving the camera through getCamera/setCamera is the same
+        // arithmetic (see zoom_about_canvas_point in renderer.cpp) with
+        // nothing between the DOM event and the state it changes.
+        //
+        // Bound to the host element and filtered by composedPath rather than
+        // bound to the canvas: a touch sequence keeps the target it started
+        // on, so this sees a whole gesture that began on the layout, and never
+        // sees one that began on the control panel -- which is what leaves the
+        // layer list scrollable.
+        //
+        // Fingers are tracked by identifier, never by their index in the touch
+        // list: that list is rebuilt on every event, so the slot a gesture
+        // started in can hold a different finger a frame later.
+        let panId = null;
+        let pinch = null;       // { a, b, dist } while two fingers are down
+        let lastX = 0, lastY = 0;   // client px: the pan finger, or the midpoint
+
+        // Below this the fingers are close enough that the distance ratio is
+        // mostly noise, and one jittery frame would multiply the zoom by an
+        // arbitrary amount.
+        const MIN_PINCH_PX = 8;
+
+        const touchById = (list, id) => {
+            for (const touch of list) if (touch.identifier === id) return touch;
+            return null;
+        };
+        const spread = (a, b) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+        const onCanvas = (event) => event.composedPath().includes(glCanvas);
+
+        // Holds the world point under a canvas pixel still across a zoom
+        // change: the same inverse the vertex shader applies, solved for the
+        // pan that puts that point back under the same pixel.
+        function zoomAbout(camera, newZoom, pixelX, pixelY) {
+            const dx = pixelX - glCanvas.clientWidth / 2;
+            const dy = glCanvas.clientHeight / 2 - pixelY;
+            const worldX = camera.panX + dx / camera.zoom;
+            const worldY = camera.panY + dy / camera.zoom;
+            return { zoom: newZoom, panX: worldX - dx / newZoom, panY: worldY - dy / newZoom };
+        }
+
+        // Measure mode places its ruler by tapping, which arrives as the
+        // compatibility mouse events renderer.cpp already handles, so the
+        // gesture is left alone while it is on.
+        const touchIdle = () => currentMode === "measure" || !resolvedModule;
+
+        hostElement.addEventListener("touchstart", (event) => {
+            if (touchIdle() || !onCanvas(event)) return;
+            const touches = event.touches;
+            if (touches.length >= 2) {
+                // A third finger is ignored rather than reseating the pinch,
+                // which would jump the view mid-zoom.
+                if (!pinch) {
+                    const [a, b] = touches;
+                    pinch = { a: a.identifier, b: b.identifier, dist: spread(a, b) };
+                    panId = null;
+                    lastX = (a.clientX + b.clientX) / 2;
+                    lastY = (a.clientY + b.clientY) / 2;
+                }
+            } else if (touches.length === 1) {
+                panId = touches[0].identifier;
+                lastX = touches[0].clientX;
+                lastY = touches[0].clientY;
+            }
+            // Without this the browser takes the gesture for page scrolling or
+            // its own pinch zoom, whatever touch-action says.
+            event.preventDefault();
+        }, { passive: false });
+
+        hostElement.addEventListener("touchmove", (event) => {
+            if (touchIdle() || !onCanvas(event)) return;
+            let camera = resolvedModule.getCamera();
+
+            if (pinch) {
+                const a = touchById(event.touches, pinch.a);
+                const b = touchById(event.touches, pinch.b);
+                if (a && b) {
+                    // Two things at once, and both are wanted: the midpoint
+                    // travelling across the glass drags the layout exactly as
+                    // one finger would, and the fingers' separation changing
+                    // zooms about that midpoint. Panning first, at the
+                    // pre-zoom scale, keeps the two independent.
+                    const midX = (a.clientX + b.clientX) / 2;
+                    const midY = (a.clientY + b.clientY) / 2;
+                    camera = {
+                        zoom: camera.zoom,
+                        panX: camera.panX - (midX - lastX) / camera.zoom,
+                        panY: camera.panY + (midY - lastY) / camera.zoom
+                    };
+                    lastX = midX;
+                    lastY = midY;
+
+                    const dist = spread(a, b);
+                    if (dist >= MIN_PINCH_PX && pinch.dist >= MIN_PINCH_PX) {
+                        const rect = glCanvas.getBoundingClientRect();
+                        camera = zoomAbout(camera, camera.zoom * dist / pinch.dist,
+                                           midX - rect.left, midY - rect.top);
+                        pinch.dist = dist;
+                    }
+                    // setCamera clamps both zoom and pan and asks for a redraw,
+                    // so the next getCamera reads back what was allowed rather
+                    // than what was asked for, and nothing drifts.
+                    resolvedModule.setCamera(camera.zoom, camera.panX, camera.panY);
+                    event.preventDefault();
+                }
+                return;
+            }
+
+            const finger = panId === null ? null : touchById(event.touches, panId);
+            if (!finger) return;
+            resolvedModule.setCamera(camera.zoom,
+                                     camera.panX - (finger.clientX - lastX) / camera.zoom,
+                                     camera.panY + (finger.clientY - lastY) / camera.zoom);
+            lastX = finger.clientX;
+            lastY = finger.clientY;
+            event.preventDefault();
+        }, { passive: false });
+
+        // touchend and touchcancel want the same thing: forget the fingers that
+        // are gone, and keep whatever gesture the ones still down can support.
+        // event.touches is already only the fingers still on the glass.
+        const endTouch = (event) => {
+            if (pinch) {
+                const a = touchById(event.touches, pinch.a);
+                const b = touchById(event.touches, pinch.b);
+                if (a && b) return;
+                // Lifting one finger of a pinch hands the gesture to the other
+                // rather than ending it. Otherwise the survivor is picked up as
+                // a fresh pan only at its next move, and the view jumps by
+                // however far it travelled since the lift.
+                const survivor = a || b;
+                pinch = null;
+                panId = survivor ? survivor.identifier : null;
+                if (survivor) {
+                    lastX = survivor.clientX;
+                    lastY = survivor.clientY;
+                }
+                return;
+            }
+            if (panId !== null && !touchById(event.touches, panId)) panId = null;
+        };
+        hostElement.addEventListener("touchend", endTouch);
+        hostElement.addEventListener("touchcancel", endTouch);
+
+        // iOS Safari answers a two-finger pinch with its own page zoom,
+        // delivered as a proprietary GestureEvent rather than through the touch
+        // events, and it can do that over an element that has already claimed
+        // the gesture with touch-action: none. Refused here so the pinch
+        // reaches the touch handlers in renderer.cpp instead -- and refused on
+        // the canvas alone, never on the page, so a pinch anywhere else in an
+        // embedding page still zooms it. A no-op in every other browser:
+        // nothing else fires these.
+        for (const type of ["gesturestart", "gesturechange", "gestureend"]) {
+            glCanvas.addEventListener(type, (event) => event.preventDefault());
+        }
     }
 
     // Reflects a loaded-file state in a lil-gui button row (used by both the