@issuegraph/editor 0.24.0 → 0.26.0

package/dist/workspace/mount.js

@@ -47,7 +47,7 @@
  */
 import { edgeIdentity } from '@issuegraph/core';
 import { nextDocument } from '@issuegraph/store';
-import { navigate, renderViewer, resolveTheme, } from '@issuegraph/viewer';
+import { isFooterSlot, navigate, normalizeDocument, renderViewer, resolveTheme, sameSelection, } from '@issuegraph/viewer';
 import { CONTROL_ATTRIBUTES } from "../a11y/baseline.js";
 import { isChoosingKind, isDraftLive } from "../create/draft.js";
 import { KIND_KEYS, keyIntent } from "../create/keys.js";
@@ -64,10 +64,9 @@ import { mountStylesheet } from "./chrome.js";
 import { renderWorkspaceSkeleton } from "./skeleton.js";
 import { INITIAL_HOST_STATE, editCarrier, narrowOverlayOpen, railRowAt, railSlackFor, railWindowTarget, reconcileHost, reduceHost, targetMatches, } from "./host.js";
 import { conflictDiff } from "./recovery.js";
-import { renderWorkspace, } from "./render.js";
-import { selectedEdgeId, selectedKey } from "./selection.js";
-/** What the canvas zone draws: the editor's scale ladder, or the viewer's tree projection. */
-export const CANVAS_MODES = Object.freeze(['neighbourhood', 'tree']);
+import { RELATED_STATUS_CLASS, renderWorkspace, } from "./render.js";
+import { selectedEdgeId, selectedKey, toViewerSelection } from "./selection.js";
+export { CANVAS_MODES } from "./narrow.js";
 /** The package default: wide enough that a scroll rarely lands past the drawn rows. */
 export const MOUNT_RAIL_COUNT = 80;
 /** The kind chooser's size for placement — the stylesheet decides the real one; this only picks a corner. */
@@ -83,6 +82,8 @@ const KEY_ATTRIBUTE = 'data-ig-key';
  * what has to be preserved is the live region specifically.
  */
 const LIVE_REGION = '.ig-change-line[role="status"]';
+/** The Related groups search's status line, carried across redraws the same way. */
+const RELATED_STATUS = `.${RELATED_STATUS_CLASS}[role="status"]`;
 const GROUP_ATTRIBUTE = 'data-ig-group';
 const COMMAND_ATTRIBUTE = 'data-ig-command';
 /**
@@ -165,6 +166,13 @@ function isNavigating(node) {
 function isInput(node) {
     return node !== null && node !== undefined && node.tagName === 'INPUT';
 }
+/** Whether a key press was typed into a text field. */
+function typedInField(event) {
+    const target = event.target;
+    if (!isElement(target))
+        return false;
+    return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.closest('[contenteditable="true"]') !== null;
+}
 function isComposing(event) {
     return 'isComposing' in event && event.isComposing === true;
 }
@@ -220,7 +228,18 @@ export function mountWorkspace(element, options) {
     const surface = doc.createElement('div');
     surface.className = 'ig-mount';
     element.append(styles, surface);
-    let state = INITIAL_HOST_STATE;
+    let state = { ...INITIAL_HOST_STATE, canvas: options.canvas ?? INITIAL_HOST_STATE.canvas };
+    // THE LAST SELECTION THE HOST WAS TOLD, compared by value in `render()`,
+    // which every path reaches — a gesture, a store notification, the
+    // reconciliation that drops a member — so the notice has one home.
+    let announced = state.selection;
+    /** The viewer document last drawn, which a Shift range reads its rank order from. */
+    let lastViewer = null;
+    // THE RAIL OFFSET THE SCROLL HANDLER LAST SAW, which is what every redraw
+    // restores. Read back off the old rail instead, a redraw while another tab
+    // shows would restore the 0 a hidden rail reports, and the reader would lose
+    // their place in the order on the way back.
+    let railOffset = 0;
     let pending = false;
     let destroyed = false;
     // What the last redraw drew, kept so a key press can ask the viewer's own
@@ -949,7 +968,7 @@ export function mountWorkspace(element, options) {
             }).scene;
         if (zoneName !== 'canvas')
             return null;
-        if (current.canvas === 'tree')
+        if (state.canvas === 'tree')
             return renderViewer(withoutChrome(drawn.viewer), { projection: 'tree', theme: theme(), chrome: false, frame: false, dockLegend: true }).scene;
         const ladder = scaleLadder(drawn.viewer, state.scale);
         return ladder.tier === 'direct'
@@ -1054,6 +1073,7 @@ export function mountWorkspace(element, options) {
         const viewer = unsettled.length === 0 && kept.length === projected.viewer.edges.length
             ? projected.viewer
             : { ...projected.viewer, edges: [...kept, ...unsettled] };
+        lastViewer = viewer;
         const { audit } = projected;
         const resolved = theme();
         // THE WRITE STATES ONLY. The workspace holds the one selection, and every
@@ -1249,6 +1269,12 @@ export function mountWorkspace(element, options) {
             // that reopened itself on every landed write would be unusable.
             canvasOpen: state.canvasOpen,
             inspectorDismissed: state.inspectorDismissed,
+            // The layout under 640's tab and the Related groups list's place, for the
+            // same reason: the renderer keeps nothing across a redraw.
+            narrowView: state.narrowView,
+            canvas: state.canvas,
+            relatedGroup: state.relatedGroup,
+            relatedQuery: state.relatedQuery,
             // §17d's overlay. Host state, for the same reason the filter beside it
             // is: the renderer keeps nothing across a redraw.
             auditOpen: state.auditOpen,
@@ -1280,11 +1306,9 @@ export function mountWorkspace(element, options) {
         const sheet = [result.styles, pickerStylesheet, firstPassStylesheet, mountStylesheet].join('\n');
         if (styles.textContent !== sheet)
             styles.textContent = sheet;
-        // What the reader was doing survives the redraw: the rail's scroll offset,
-        // the audit panel's, and the caret in whichever search box they were typing
-        // into.
-        const railBefore = zone('rail');
-        const scrollTop = railBefore?.scrollTop ?? 0;
+        // What the reader was doing survives the redraw: the rail's scroll offset
+        // (kept as `railOffset`), the audit panel's, and the caret in whichever
+        // search box they were typing into.
         // THE AUDIT SCROLLS TOO, SINCE IT TOOK A SHARE OF ITS COLUMN. Before it had
         // a bound it grew to its content and only the ZONE scrolled, so there was no
         // second offset to keep. Now a long audit is read inside its own scroller,
@@ -1360,19 +1384,24 @@ export function mountWorkspace(element, options) {
         // summary, and only then given the new one. The insertion says nothing and
         // the mutation is what announces, which is the sequence the region was
         // designed around.
-        const liveBefore = surface.querySelector(LIVE_REGION);
+        // THE RELATED SEARCH'S STATUS LINE IS THE SAME KIND OF REGION and is
+        // carried the same way, so the left-out count and the no-match sentence
+        // are announced as they change while the reader types.
+        const carried = [LIVE_REGION, RELATED_STATUS].map((selector) => [selector, surface.querySelector(selector)]);
         // Package-rendered markup, escaped by the package.
         surface.innerHTML = result.markup;
-        const liveAfter = surface.querySelector(LIVE_REGION);
-        if (liveBefore !== null && liveAfter !== null) {
-            const next = liveAfter.innerHTML;
-            liveAfter.replaceWith(liveBefore);
-            // GUARDED, so a redraw that did not touch the summary is not a change to
-            // announce. Every keystroke in the ladder's search box redraws this
-            // surface, and re-assigning identical content would re-announce the last
-            // edit's result on each one.
-            if (liveBefore.innerHTML !== next)
-                liveBefore.innerHTML = next;
+        for (const [selector, before] of carried) {
+            const after = surface.querySelector(selector);
+            if (before === null || after === null)
+                continue;
+            const next = after.innerHTML;
+            after.replaceWith(before);
+            // GUARDED, so a redraw that did not touch the region is not a change to
+            // announce. Every keystroke in a search box redraws this surface, and
+            // re-assigning identical content would re-announce the last result on
+            // each one.
+            if (before.innerHTML !== next)
+                before.innerHTML = next;
         }
         // THE ORDER'S STATUS, PUBLISHED AS DATA. A write in flight holds the order
         // — it does not move until the edit lands — and a host that wants to say
@@ -1380,7 +1409,7 @@ export function mountWorkspace(element, options) {
         // attribute is the store's own vocabulary, verbatim, so a host styles or
         // reads it without this package inventing a sentence.
         surface.setAttribute('data-order', snapshot.order.status);
-        if (current.canvas === 'tree') {
+        if (state.canvas === 'tree') {
             const canvas = zone('canvas');
             if (canvas !== null) {
                 // THE SAME STATES THE LADDER DRAWS, on the tree's badges. The tree
@@ -1425,6 +1454,12 @@ export function mountWorkspace(element, options) {
                 // element is not assembled from optional parts: `isolatedSpec` returns
                 // null rather than an empty husk, so anything found here has content.
                 const isolated = canvas.querySelector('.ig-ladder-isolated');
+                // §17d'S FINDINGS PANEL SURVIVES TOO. It is an overlay drawn in THIS
+                // zone (RULINGS.md §3: over the canvas, anchored to the header count),
+                // so the assignment below deleted it and the header's problem count
+                // opened nothing in tree mode, at every width. It is kept whole, as the
+                // isolated list is, and put back last so it still floats over the tree.
+                const findings = canvas.querySelector('.ig-audit-overlay');
                 canvas.innerHTML = renderViewer(withoutChrome(viewer), {
                     projection: 'tree',
                     theme: resolved,
@@ -1461,6 +1496,8 @@ export function mountWorkspace(element, options) {
                 surface.firstElementChild?.setAttribute('data-canvas-legend', 'drawn');
                 if (isolated !== null)
                     canvas.append(isolated);
+                if (findings !== null)
+                    canvas.append(findings);
                 if (toolbar !== null && toolbar.childElementCount > 0)
                     canvas.prepend(toolbar);
                 const states = new Map(overlaysFor(viewer.edges, writeStates, selectedEdgeId(state.selection)).map((edge) => [edge.id, overlayFor(edge).attribute]));
@@ -1489,7 +1526,7 @@ export function mountWorkspace(element, options) {
         }
         const rail = zone('rail');
         if (rail !== null)
-            rail.scrollTop = scrollTop;
+            rail.scrollTop = railOffset;
         // AFTER the subtree is in place, because it measures what was just drawn.
         dockRailLegend();
         // RE-QUERIED, NEVER REUSED: `surface.innerHTML` above replaced the subtree,
@@ -1605,6 +1642,9 @@ export function mountWorkspace(element, options) {
                     if (isFocusable(now) && typeof now.scrollIntoView === 'function')
                         now.scrollIntoView({ block: 'nearest' });
                 }
+                // Recorded here as well as by the scroll handler, whose event arrives
+                // later: a redraw before it would put the rail back where the jump began.
+                railOffset = rail.scrollTop;
             }
         }
         else {
@@ -1726,6 +1766,53 @@ export function mountWorkspace(element, options) {
         }
         firstPassWas = state.firstPass.phase.kind;
         searchWasOpen = search !== null;
+        announceSelection();
+    };
+    /**
+     * Tell the host the selection changed, once, with a fresh frozen copy. The
+     * announced value is written BEFORE the callback, so a host that changes the
+     * selection from inside it is told about that change on its own render.
+     */
+    const announceSelection = () => {
+        const now = state.selection;
+        if (sameSelection(toViewerSelection(announced), toViewerSelection(now)))
+            return;
+        announced = now;
+        const handed = now.kind === 'issues' ? Object.freeze({ kind: 'issues', keys: Object.freeze([...now.keys]) }) : Object.freeze({ ...now });
+        current.onSelectionChange?.(handed);
+    };
+    /**
+     * The WHOLE rank order as last drawn — every member of every ranked slot —
+     * which a Shift range walks. Never the rail window: a range whose anchor is
+     * outside the window covers the full span.
+     */
+    const rankOrder = () => lastViewer === null
+        ? []
+        : normalizeDocument(lastViewer).document.order.slots
+            .filter((slot) => slot.rank !== null)
+            .flatMap((slot) => slot.members);
+    /** The pointer gesture a click's modifiers ask for: Cmd or Ctrl toggles, Shift ranges. */
+    const gestureOf = (event) => {
+        if (event.metaKey || event.ctrlKey)
+            return { gesture: 'toggle' };
+        return event.shiftKey ? { gesture: 'range', order: rankOrder() } : {};
+    };
+    /**
+     * The row across the rail window's edge that ArrowDown on its last drawn row
+     * (or ArrowUp on its first) will focus once the window is re-cut: the next
+     * (or previous) slot in the WHOLE sequence. `null` when the press does not
+     * re-cut the window — exactly the conditions `advanceRail` re-cuts on.
+     */
+    const acrossEdge = (rail, key, pressedKey) => {
+        const offset = rail.offsetOf(key);
+        if (offset === undefined || lastViewer === null)
+            return null;
+        const down = pressedKey === 'ArrowDown' && rail.after > 0 && (rail.rows.at(-1)?.members.includes(key) ?? false);
+        const up = pressedKey === 'ArrowUp' && rail.before > 0 && (rail.rows[0]?.members.includes(key) ?? false);
+        if (!down && !up)
+            return null;
+        const sequence = normalizeDocument(lastViewer).document.order.slots.filter((slot) => !isFooterSlot(slot));
+        return sequence[offset + (down ? 1 : -1)]?.lead ?? null;
     };
     /**
      * Take the option's scanner, and end the lifecycle the old one was scanning for.
@@ -1907,17 +1994,20 @@ export function mountWorkspace(element, options) {
             dispatch({ kind: 'group', id });
             return;
         }
+        // MODIFIERS ARE READ ON AN ISSUE ONLY. A relationship above stays a plain
+        // relationship click under any modifier, replacing any set.
         const key = named.getAttribute(KEY_ATTRIBUTE);
         if (key !== null)
-            dispatch({ kind: 'point', key });
+            dispatch({ kind: 'point', key, ...gestureOf(event) });
     };
     const readInput = (event) => {
         const target = isElement(event.target) && isInput(event.target) ? event.target : null;
         if (target === null || !surface.contains(target))
             return;
         const name = target.getAttribute(COMMAND_ATTRIBUTE);
-        if (name === 'search' || name === 'target-query')
+        if (name === 'search' || name === 'target-query' || name === 'related-query') {
             dispatch({ kind: 'control', name, value: target.value });
+        }
     };
     // NOT WHILE AN INPUT METHOD IS COMPOSING. Every keystroke of a composition
     // fires `input`, and a redraw replaces the element that owns the
@@ -1978,6 +2068,7 @@ export function mountWorkspace(element, options) {
         const rail = zone('rail');
         if (rail === null || event.target !== rail)
             return;
+        railOffset = rail.scrollTop;
         if (drawn === null)
             return;
         // THE DECISION IS THE REDUCER'S, and `null` is load-bearing: a scroll that
@@ -2237,16 +2328,33 @@ export function mountWorkspace(element, options) {
         const key = active.closest(`[${KEY_ATTRIBUTE}]`)?.getAttribute(KEY_ATTRIBUTE) ?? null;
         if (owner === null || zoneName === null || key === null || !surface.contains(owner))
             return false;
-        if (zoneName === 'rail' && drawn !== null && advanceRail(drawn.rail, key, event.key))
-            return true;
+        // SHIFT IS READ BEFORE THE RE-CUT, because `advanceRail` returns before
+        // `navigate` runs: the range goes to the neighbour in the whole order that
+        // the re-cut then focuses, so the set extends across the edge exactly as
+        // it does inside the window.
+        if (zoneName === 'rail' && drawn !== null) {
+            const across = event.shiftKey ? acrossEdge(drawn.rail, key, event.key) : null;
+            if (across !== null)
+                dispatch({ kind: 'point', key: across, gesture: 'range', order: rankOrder() });
+            if (drawn !== null && advanceRail(drawn.rail, key, event.key))
+                return true;
+        }
         const scene = sceneFor(zoneName);
         if (scene === null)
             return false;
-        const result = navigate(scene, { focused: key, selected: selectedKey(state.selection) }, event.key);
+        const result = navigate(scene, { focused: key, selected: selectedKey(state.selection) }, event.key, {
+            shift: event.shiftKey,
+        });
         if (result.command.kind === 'select') {
             dispatch({ kind: 'point', key: result.command.key });
             return true;
         }
+        // SHIFT WITH AN ARROW: a Shift-click on the issue focus moves to.
+        if (result.command.kind === 'extend') {
+            dispatch({ kind: 'point', key: result.command.key, gesture: 'range', order: rankOrder() });
+            focusIn(zoneName, result.command.key);
+            return true;
+        }
         if (result.command.kind === 'focus') {
             focusIn(zoneName, result.command.key);
             return true;
@@ -2466,6 +2574,14 @@ export function mountWorkspace(element, options) {
                 dispatch({ kind: 'control', name: 'narrow-dismiss' });
                 return;
             }
+            // THE SELECTION CLEARS LAST, only when nothing above claimed the press
+            // and before the create map's cancel, and never from a text field: an
+            // Escape typed there belongs to the field.
+            if (state.selection.kind !== 'none' && !typedInField(event)) {
+                event.preventDefault();
+                dispatch({ kind: 'control', name: 'clear' });
+                return;
+            }
         }
         const intent = keyIntent(event, context);
         if (intent.kind !== 'none') {
@@ -2796,6 +2912,10 @@ export function mountWorkspace(element, options) {
                 return;
             if (next !== undefined) {
                 current = { ...current, ...next, store };
+                // ONLY AN UPDATE THAT NAMES THE MODE SETS IT. `current` keeps the mount's
+                // seed, so re-reading it here would undo the reader's last tab press.
+                if (next.canvas !== undefined)
+                    state = { ...state, canvas: next.canvas };
                 adoptSource();
             }
             schedule();