lispgram 0.10.2 → 0.10.3

package/README.md

@@ -121,7 +121,7 @@ npm install lispgram
     startOnLoad: true,
     showArrowGlyphs: true,
     clickToFocus: true,
-    zoom: "both"
+    zoom: true
   });
 </script>
 ```
@@ -227,7 +227,7 @@ import { render, renderElement, initialize, createDiagramSvg } from "lispgram/la
 
 `render(target, source, options?)` renders Lispgram or NCF into a DOM target. `renderElement(sourceElement, options?)` renders one source element. `initialize(options?)` auto-renders matching elements such as `<pre class="lispgram">`. `createDiagramSvg(doc, options?)` renders an already-normalized NCF document into an SVG element.
 
-`options.zoom` controls built-in shift zoom behavior. The default with no option is `"both"`, which enables Shift-click zoom-to-fit and cursor-centered Shift + wheel zoom. Shift-click fits containers to about 80% of the viewport; Shift-click on ordinary nodes or arrows zooms to that target so its height is about 5% of the view. Use `"shift-wheel"` for cursor-centered Shift + wheel only, `"shift-click-container"` for Shift-click only, or `"none"` to disable zoom. Auto-rendered `<pre>` blocks can set `data-lispgram-zoom="both"`, `data-lispgram-zoom="shift-wheel"`, `data-lispgram-zoom="shift-click-container"`, or `data-lispgram-zoom="none"`.
+`options.zoom` is a boolean that controls the built-in Shift navigation tools. The default is `true`, which enables Shift + A + click zoom-to-target, cursor-centered Shift + wheel zoom, and Shift + drag panning. Shift + A + click fits containers to about 80% of the viewport. Ordinary nodes zoom until the node height is about 8% of the view height. Arrows zoom to their arrow glyph/label area at about 2% of the view height. Use `zoom: false`, or `data-lispgram-zoom="false"` on auto-rendered `<pre>` blocks, to disable all built-in zoom and panning behavior.
 
 ### Interaction entry point
 
@@ -289,7 +289,7 @@ When `clickToFocus` is enabled, clicking a node, compound/container, or arrow fo
 
 Click hit-testing uses a transparent interaction layer above the rendered diagram. Ordinary nodes are given priority over arrows, arrows over container interiors, and deeper containers over their ancestors. This keeps large ancestor containers clickable without letting them steal clicks from nested containers such as `BuildSystem`, `ExternalDependencies`, or `GuileBinding`.
 
-The examples use `zoom: "both"`, which is also the default. It enables Shift-click zoom-to-fit plus Shift-wheel cursor zoom. Containers fit to roughly 80% of the viewport. Ordinary nodes and arrows fit so the clicked target is about 5% of the view height. Pass `zoom: "shift-wheel"` for Shift + wheel only, `zoom: "shift-click-container"` for Shift-click only, or `zoom: "none"` to disable built-in zoom.
+The examples use `zoom: true`, which is also the default. It enables Shift + A + click zoom-to-target, Shift-wheel cursor zoom, and Shift-drag panning. Containers fit to roughly 80% of the viewport; ordinary nodes fit to about 8% of the view height; arrows fit to the arrow glyph/label area at about 2% of the view height. Pass `zoom: false` to disable built-in zoom and pan behavior.
 
 ## Demo
 
@@ -317,7 +317,7 @@ navigate to examples/basic.html in browser
     startOnLoad: true,
     showArrowGlyphs: true,
     clickToFocus: true,
-    zoom: "both",
+    zoom: true,
     arrowGlyphRadius: 5.75
   });
 </script>

package/dist/index.js

@@ -4772,7 +4772,7 @@ function renderLispgramRoute(svg, route, options) {
 }
 
 function renderLispgramHitLayer(svg, result, options = {}) {
-  if (options.clickToFocus === false && normalizeZoomMode(options) === 'none') return;
+  if (options.clickToFocus === false && !zoomEnabled(options)) return;
   const layer = svgEl('g', { class: 'lispgram-hit-layer', 'aria-hidden': 'true' });
 
   // Container hit regions are separate from the visible paint order.  They are
@@ -4888,26 +4888,25 @@ function routeTouchesFocus(route, focus) {
   return endpointTouches(route.fromEndpoint, focus.id, focus.type) || endpointTouches(route.toEndpoint, focus.id, focus.type);
 }
 
-function normalizeZoomMode(options = {}) {
-  const raw = options.zoom ?? options.zoomMode ?? options.interactionZoom;
-  if (raw === false || raw == null && options.noZoom === true) return 'none';
-  if (raw == null || raw === true || raw === '') return 'both';
-  const value = String(raw).trim().toLowerCase().replace(/_/g, '-');
-  if (['none', 'off', 'false', '0', 'no', 'disabled', 'disable'].includes(value)) return 'none';
-  if (['wheel', 'scroll', 'cursor', 'cursor-wheel', 'shift-wheel', 'shift-scroll', 'wheel-at-cursor', 'scroll-at-cursor'].includes(value)) return 'shift-wheel';
-  if (['container', 'click-container', 'shift-click', 'shift-click-container', 'container-fit', 'fit-container', 'zoom-container', 'container-zoom'].includes(value)) return 'shift-click-container';
-  if (['both', 'all', 'shift-both'].includes(value)) return 'both';
-  return 'both';
+function zoomEnabled(options = {}) {
+  return options.zoom !== false;
 }
 
-function shiftClickZoomEnabled(options = {}) {
-  const mode = normalizeZoomMode(options);
-  return mode === 'shift-click-container' || mode === 'both';
+const lispgramZoomKeyState = new WeakMap();
+
+function normalizeKeyboardKey(event) {
+  return String(event?.key || event?.code || '').toLowerCase();
+}
+
+function eventHasZoomClickKey(svg, event) {
+  if (event?.aKey === true) return true;
+  const key = normalizeKeyboardKey(event);
+  if (key === 'a' || key === 'keya') return true;
+  return !!lispgramZoomKeyState.get(svg)?.aDown;
 }
 
-function shiftWheelZoomEnabled(options = {}) {
-  const mode = normalizeZoomMode(options);
-  return mode === 'shift-wheel' || mode === 'both';
+function isZoomClickEvent(svg, event) {
+  return !!event?.shiftKey && eventHasZoomClickKey(svg, event);
 }
 
 function parseViewBox(svg) {
@@ -5029,8 +5028,8 @@ function routeZoomBounds(route, options = {}) {
 function viewBoxForSmallBounds(svg, bounds, originalViewBox, options = {}) {
   if (!bounds || !originalViewBox) return null;
   const aspect = svgDisplayAspect(svg, originalViewBox) || 1;
-  const fractionRaw = Number(options.zoomTargetHeightFraction ?? options.smallZoomHeightFraction ?? 0.05);
-  const fraction = Number.isFinite(fractionRaw) && fractionRaw > 0 && fractionRaw < 1 ? fractionRaw : 0.05;
+  const fractionRaw = Number(options.zoomTargetHeightFraction ?? options.smallZoomHeightFraction ?? 0.08);
+  const fraction = Number.isFinite(fractionRaw) && fractionRaw > 0 && fractionRaw < 1 ? fractionRaw : 0.08;
   const minTargetH = Number.isFinite(Number(options.smallZoomMinTargetHeight)) ? Number(options.smallZoomMinTargetHeight) : 10;
   const targetH = Math.max(bounds.h || 0, minTargetH);
   let h = targetH / fraction;
@@ -5052,15 +5051,18 @@ function viewBoxForZoomTarget(svg, target, result, originalViewBox, options = {}
   }
   if (target.type === 'edge') {
     const route = result.routes?.get?.(target.id);
-    return viewBoxForSmallBounds(svg, routeZoomBounds(route, options), originalViewBox, options);
+    const edgeOptions = {
+      ...options,
+      zoomTargetHeightFraction: options.arrowZoomHeightFraction ?? options.edgeZoomHeightFraction ?? 0.02,
+      smallZoomMinTargetHeight: options.arrowZoomMinTargetHeight ?? options.edgeZoomMinTargetHeight ?? 10
+    };
+    return viewBoxForSmallBounds(svg, routeZoomBounds(route, edgeOptions), originalViewBox, edgeOptions);
   }
   return null;
 }
 
 function enableLispgramZoom(svg, result, options = {}) {
-  if (!svg || !result) return;
-  const mode = normalizeZoomMode(options);
-  if (mode === 'none') return;
+  if (!svg || !result || !zoomEnabled(options)) return;
   const originalViewBox = parseViewBox(svg) || result.viewBox || null;
   if (!originalViewBox) return;
   let currentViewBox = { ...originalViewBox };
@@ -5090,19 +5092,98 @@ function enableLispgramZoom(svg, result, options = {}) {
     return setViewBox(originalViewBox);
   }
 
-  if (shiftWheelZoomEnabled(options) && typeof svg.addEventListener === 'function') {
+  let suppressNextShiftClick = false;
+  const keyState = { aDown: false };
+  lispgramZoomKeyState.set(svg, keyState);
+
+  function updateZoomKeyState(event, value) {
+    const key = normalizeKeyboardKey(event);
+    if (key === 'a' || key === 'keya') keyState.aDown = value;
+  }
+
+  const keyTargets = [];
+  const ownerDocument = svg.ownerDocument || (typeof document !== 'undefined' ? document : null);
+  if (ownerDocument?.defaultView?.addEventListener) keyTargets.push(ownerDocument.defaultView);
+  if (ownerDocument?.addEventListener) keyTargets.push(ownerDocument);
+  for (const target of keyTargets) {
+    target.addEventListener('keydown', (event) => updateZoomKeyState(event, true));
+    target.addEventListener('keyup', (event) => updateZoomKeyState(event, false));
+    target.addEventListener('blur', () => { keyState.aDown = false; });
+  }
+
+  if (typeof svg.addEventListener === 'function') {
     svg.addEventListener('wheel', (event) => {
       if (!event?.shiftKey) return;
       if (typeof event.preventDefault === 'function') event.preventDefault();
-      const scale = Number.isFinite(Number(options.zoomWheelScale)) ? Number(options.zoomWheelScale) : 1.08;
+      const scale = Number.isFinite(Number(options.zoomWheelScale)) ? Number(options.zoomWheelScale) : 1.05;
       const delta = Number(event.deltaY || 0);
       const factor = delta < 0 ? 1 / scale : scale;
       const pivot = svgPointFromEvent(svg, event, currentViewBox);
       currentViewBox = zoomViewBoxAt(svg, pivot, factor, originalViewBox, options) || currentViewBox;
     }, { passive: false });
+
+    let dragState = null;
+    const dragThreshold = Number.isFinite(Number(options.zoomDragThreshold)) ? Number(options.zoomDragThreshold) : 3;
+
+    function updateDrag(event) {
+      if (!dragState) return;
+      const rect = typeof svg.getBoundingClientRect === 'function' ? svg.getBoundingClientRect() : null;
+      if (!rect?.width || !rect?.height) return;
+      const dx = Number(event.clientX) - dragState.startClientX;
+      const dy = Number(event.clientY) - dragState.startClientY;
+      if (!dragState.moved && Math.hypot(dx, dy) >= dragThreshold) dragState.moved = true;
+      if (typeof event.preventDefault === 'function') event.preventDefault();
+      const next = {
+        x: dragState.startViewBox.x - dx / rect.width * dragState.startViewBox.w,
+        y: dragState.startViewBox.y - dy / rect.height * dragState.startViewBox.h,
+        w: dragState.startViewBox.w,
+        h: dragState.startViewBox.h
+      };
+      currentViewBox = next;
+      writeViewBox(svg, currentViewBox);
+    }
+
+    function endDrag(event) {
+      if (!dragState) return;
+      if (dragState.moved) {
+        suppressNextShiftClick = true;
+        if (typeof event?.preventDefault === 'function') event.preventDefault();
+      }
+      if (dragState.pointerId != null && typeof svg.releasePointerCapture === 'function') {
+        try { svg.releasePointerCapture(dragState.pointerId); } catch {}
+      }
+      dragState = null;
+      if (svg.style) svg.style.cursor = '';
+      setTimeout(() => { suppressNextShiftClick = false; }, 0);
+    }
+
+    if (typeof svg.addEventListener === 'function') {
+      svg.addEventListener('pointerdown', (event) => {
+        if (!event?.shiftKey) return;
+        if (isZoomClickEvent(svg, event)) return;
+        if (event.button != null && event.button !== 0) return;
+        const start = parseViewBox(svg) || currentViewBox;
+        if (!start) return;
+        dragState = {
+          pointerId: event.pointerId,
+          startClientX: Number(event.clientX),
+          startClientY: Number(event.clientY),
+          startViewBox: { ...start },
+          moved: false
+        };
+        if (typeof svg.setPointerCapture === 'function' && event.pointerId != null) {
+          try { svg.setPointerCapture(event.pointerId); } catch {}
+        }
+        if (svg.style) svg.style.cursor = 'grabbing';
+        if (typeof event.preventDefault === 'function') event.preventDefault();
+      }, { passive: false });
+      svg.addEventListener('pointermove', updateDrag, { passive: false });
+      svg.addEventListener('pointerup', endDrag, { passive: false });
+      svg.addEventListener('pointercancel', endDrag, { passive: false });
+    }
   }
 
-  if (shiftClickZoomEnabled(options)) {
+  {
     const hitboxes = [];
     walkSvgElements(svg, (node) => {
       if (typeof node.getAttribute !== 'function') return;
@@ -5118,7 +5199,8 @@ function enableLispgramZoom(svg, result, options = {}) {
     for (const [el, target] of hitboxes) {
       if (typeof el.addEventListener !== 'function') continue;
       el.addEventListener('click', (event) => {
-        if (!event?.shiftKey) return;
+        if (!isZoomClickEvent(svg, event)) return;
+        if (suppressNextShiftClick) return;
         if (typeof event.preventDefault === 'function') event.preventDefault();
         if (typeof event.stopPropagation === 'function') event.stopPropagation();
         if (typeof event.stopImmediatePropagation === 'function') event.stopImmediatePropagation();
@@ -5127,7 +5209,7 @@ function enableLispgramZoom(svg, result, options = {}) {
     }
   }
 
-  svg.__lispgramZoom = { mode, originalViewBox, get viewBox() { return currentViewBox; }, reset, zoomToBox, zoomToEdge, zoomToTarget };
+  svg.__lispgramZoom = { enabled: true, originalViewBox, get viewBox() { return currentViewBox; }, reset, zoomToBox, zoomToEdge, zoomToTarget };
 }
 
 function enableLispgramClickFocus(svg, result, options = {}) {
@@ -5202,7 +5284,7 @@ function enableLispgramClickFocus(svg, result, options = {}) {
       if (typeof el.addEventListener !== 'function') continue;
       if (el.style) el.style.cursor = 'pointer';
       el.addEventListener('click', (event) => {
-        if (event?.shiftKey && shiftClickZoomEnabled(options) && result.boxes?.has?.(id)) return;
+        if (zoomEnabled(options) && event?.shiftKey && result.boxes?.has?.(id)) return;
         stop(event);
         const next = { type: 'node', id };
         applyFocus(sameFocus(currentFocus, next) ? null : next);
@@ -5215,6 +5297,7 @@ function enableLispgramClickFocus(svg, result, options = {}) {
       if (typeof el.addEventListener !== 'function') continue;
       if (el.style) el.style.cursor = 'pointer';
       el.addEventListener('click', (event) => {
+        if (zoomEnabled(options) && event?.shiftKey && result.routes?.has?.(id)) return;
         stop(event);
         const next = { type: 'edge', id };
         applyFocus(sameFocus(currentFocus, next) ? null : next);
@@ -5451,8 +5534,7 @@ function elementRenderOptions(sourceElement, options = {}) {
     ...options,
     showArrowGlyphs: parseBooleanOption(data.lispgramArrowGlyphs, options.showArrowGlyphs ?? false),
     clickToFocus: parseBooleanOption(data.lispgramClickFocus, options.clickToFocus ?? true),
-    zoom: data.lispgramZoom || data.lispgramZoomMode || options.zoom || options.zoomMode,
-    zoomMode: data.lispgramZoomMode || data.lispgramZoom || options.zoomMode || options.zoom,
+    zoom: parseBooleanOption(data.lispgramZoom, options.zoom ?? true),
     arrowGlyphRadius: parseNumericOption(data.lispgramArrowGlyphRadius, options.arrowGlyphRadius),
     diagramId: data.lispgramDiagram || data.diagramId || options.diagramId || options.name || options.id || sourceElement?.id || undefined
   };
@@ -5523,8 +5605,7 @@ function initialize(options = {}) {
     showNCF = false,
     showArrowGlyphs = false,
     clickToFocus = true,
-    zoom,
-    zoomMode,
+    zoom = true,
     arrowGlyphRadius = 5.75,
     height,
     width,
@@ -5536,7 +5617,7 @@ function initialize(options = {}) {
     for (const element of elements) {
       if (element.dataset.lispgramMounted === 'true') continue;
       try {
-        renderElement(element, { showNCF, showArrowGlyphs, clickToFocus, zoom: zoomMode ?? zoom, zoomMode: zoomMode ?? zoom, arrowGlyphRadius, height, width, diagramId });
+        renderElement(element, { showNCF, showArrowGlyphs, clickToFocus, zoom, arrowGlyphRadius, height, width, diagramId });
         element.dataset.lispgramMounted = 'true';
       } catch {
         element.dataset.lispgramMounted = 'error';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lispgram",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "A small public Lispgram surface compiler, constraint-layout SVG renderer, and interaction API.",
   "type": "module",
   "main": "./dist/index.js",