@jbrowse/plugin-linear-genome-view 5.0.0-beta.2 → 5.0.0-beta.20

package/esm/LinearGenomeView/components/useSideScroll.d.ts

@@ -1,6 +1,21 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 import type React from 'react';
+/**
+ * Drag to pan and pinch to zoom, on pointer events so a finger works the same
+ * as a mouse. A second finger turns a pan into a pinch: the spread between the
+ * two zooms about their midpoint, and moving the midpoint pans. Lifting either
+ * finger goes back to panning with the other.
+ *
+ * The host sets `touch-action` to leave the browser only the gestures this
+ * does not want (TracksContainer keeps vertical scroll); without it a touch
+ * drag is a page scroll and a pinch zooms the page, and no pointer stream
+ * arrives.
+ *
+ * The window listeners go on in the press handler itself rather than in an
+ * effect, so a release that lands before React commits still finds them.
+ */
 export declare function useSideScroll(model: LinearGenomeViewModel): {
-    mouseDown: (event: React.MouseEvent) => void;
-    mouseUp: (event: React.MouseEvent) => void;
+    onPointerDownCapture: (event: React.PointerEvent) => void;
+    onPointerDown: (event: React.PointerEvent) => void;
+    onClickCapture: (event: React.MouseEvent) => void;
 };

package/esm/LinearGenomeView/components/useSideScroll.js

@@ -1,125 +1,179 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
+import { isClaimedPress } from '@jbrowse/core/util/pressOwner';
+import { transaction } from 'mobx';
 // A press that travels further than this is a pan, and the click that ends it
 // is not a click. A hand that wobbles two pixels can still select something.
 const PAN_CLICK_THRESHOLD_PX = 4;
 // The pan publishes its state as attributes on the element the press landed in
 // (TracksContainer), so a track's own pointer handlers read it with `closest`
 // and nothing has to hand them a ref or a model field — the same marker shape
-// as `data-gesture-owner`. `data-pan-dragging` is present from mousedown to
-// mouseup; `data-pan-moved` is set once the press travels past the threshold
-// and cleared by the next press, so it still answers for the click that
-// follows mouseup.
+// as `data-gesture-owner`. `data-pan-dragging` is present from press to
+// release; `data-pan-moved` is set once the press travels past the threshold
+// or becomes a pinch, and cleared by the next press, so it still answers for
+// the click that follows the release: `onClickCapture` swallows that click
+// before any track sees it.
 const PAN_DRAGGING_ATTR = 'data-pan-dragging';
 const PAN_MOVED_ATTR = 'data-pan-moved';
+function pointOf(event) {
+    return { x: event.clientX, y: event.clientY };
+}
+/**
+ * Drag to pan and pinch to zoom, on pointer events so a finger works the same
+ * as a mouse. A second finger turns a pan into a pinch: the spread between the
+ * two zooms about their midpoint, and moving the midpoint pans. Lifting either
+ * finger goes back to panning with the other.
+ *
+ * The host sets `touch-action` to leave the browser only the gestures this
+ * does not want (TracksContainer keeps vertical scroll); without it a touch
+ * drag is a page scroll and a pinch zooms the page, and no pointer stream
+ * arrives.
+ *
+ * The window listeners go on in the press handler itself rather than in an
+ * effect, so a release that lands before React commits still finds them.
+ */
 export function useSideScroll(model) {
-    const [mouseDragging, setMouseDragging] = useState(false);
-    const scheduledRef = useRef(false);
-    const rafRef = useRef(null);
-    const startXRef = useRef(0);
-    const prevXRef = useRef(0);
-    const currXRef = useRef(0);
-    const hostRef = useRef(null);
-    useEffect(() => {
-        // apply the movement accumulated since the previous frame, then advance the
-        // baseline. shared by the rAF tick and the mouseup flush
-        function flushScroll() {
-            const distance = currXRef.current - prevXRef.current;
-            if (distance) {
-                model.horizontalScroll(-distance);
-                prevXRef.current = currXRef.current;
+    const gestureRef = useRef(undefined);
+    useEffect(() => () => {
+        gestureRef.current?.cancel();
+    }, []);
+    // The marker outlives the gesture that set it, so every press clears it, in
+    // the capture phase: a track that keeps its own press and stops it bubbling
+    // (multiway's lane slide, maf's drag select) would otherwise leave the last
+    // pan's marker standing to swallow its click.
+    function onPointerDownCapture(event) {
+        if (!gestureRef.current) {
+            event.currentTarget.removeAttribute(PAN_MOVED_ATTR);
+        }
+    }
+    function onPointerDown(event) {
+        const host = event.currentTarget;
+        if (gestureRef.current) {
+            gestureRef.current.join(event);
+            return;
+        }
+        if (event.shiftKey || event.button !== 0 || !event.isPrimary) {
+            return;
+        }
+        if (isClaimedPress(event)) {
+            return;
+        }
+        const left = host.getBoundingClientRect().left;
+        const startX = event.clientX;
+        // where each finger is now, and where it was when the view last moved
+        const pointers = new Map([[event.pointerId, pointOf(event)]]);
+        let applied = new Map(pointers);
+        let frame;
+        // only a selection that starts in the tracks, so a press that leaks here
+        // cannot block selection in the rest of the app
+        function blockSelection(e) {
+            if (e.target instanceof Node && host.contains(e.target)) {
+                e.preventDefault();
             }
         }
-        function globalMouseMove(event) {
-            event.preventDefault();
-            currXRef.current = event.clientX;
-            if (Math.abs(currXRef.current - startXRef.current) > PAN_CLICK_THRESHOLD_PX) {
-                hostRef.current?.setAttribute(PAN_MOVED_ATTR, '');
+        function flush() {
+            frame = undefined;
+            const [a, b] = [...pointers.keys()];
+            const curr1 = pointers.get(a);
+            const prev1 = applied.get(a);
+            if (b === undefined) {
+                if (curr1.x !== prev1.x) {
+                    model.horizontalScroll(prev1.x - curr1.x);
+                }
             }
-            const distance = currXRef.current - prevXRef.current;
-            // use rAF to make it so multiple event handlers aren't fired per-frame
-            // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-            if (distance && !scheduledRef.current) {
-                scheduledRef.current = true;
-                rafRef.current = window.requestAnimationFrame(() => {
-                    rafRef.current = null;
-                    scheduledRef.current = false;
-                    flushScroll();
+            else {
+                const curr2 = pointers.get(b);
+                const prev2 = applied.get(b);
+                const prevSpread = Math.hypot(prev1.x - prev2.x, prev1.y - prev2.y);
+                const spread = Math.hypot(curr1.x - curr2.x, curr1.y - curr2.y);
+                const prevMid = (prev1.x + prev2.x) / 2;
+                const mid = (curr1.x + curr2.x) / 2;
+                transaction(() => {
+                    if (prevSpread > 0 && spread > 0) {
+                        model.zoomTo((model.bpPerPx * prevSpread) / spread, prevMid - left);
+                    }
+                    if (mid !== prevMid) {
+                        model.horizontalScroll(prevMid - mid);
+                    }
                 });
             }
+            applied = new Map(pointers);
         }
-        function globalMouseUp() {
-            // flush any movement still queued for the next frame before ending the
-            // drag; otherwise a quick flick (mousedown/move/up within one frame) or
-            // the cleanup below would cancel it and drop the scroll
-            if (rafRef.current !== null) {
-                window.cancelAnimationFrame(rafRef.current);
-                rafRef.current = null;
-                scheduledRef.current = false;
-                flushScroll();
-            }
-            prevXRef.current = 0;
-            hostRef.current?.removeAttribute(PAN_DRAGGING_ATTR);
-            if (mouseDragging) {
-                setMouseDragging(false);
+        // Applies what is queued before the set of fingers changes, so the next
+        // frame measures from where every finger is now rather than jumping by the
+        // distance between them.
+        function settle() {
+            if (frame !== undefined) {
+                window.cancelAnimationFrame(frame);
+                flush();
             }
         }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove, true);
-            window.addEventListener('mouseup', globalMouseUp, true);
-            return () => {
-                window.removeEventListener('mousemove', globalMouseMove, true);
-                window.removeEventListener('mouseup', globalMouseUp, true);
-                // drop a frame queued mid-drag so it can't fire a stray scroll after
-                // unmount (matches `useVirtualScrollWheel`'s cleanup)
-                if (rafRef.current !== null) {
-                    window.cancelAnimationFrame(rafRef.current);
-                    rafRef.current = null;
-                }
-                scheduledRef.current = false;
-            };
-        }
-        return undefined;
-    }, [model, mouseDragging]);
-    function mouseDown(event) {
-        // Cleared for EVERY press, ahead of the returns below, because the marker
-        // outlives the gesture that set it: a pan, then a shift-press or a press on
-        // a button, used to leave `data-pan-moved` standing on the container. The
-        // one reader today re-enters through a press that reaches the bottom of
-        // this function, so nothing was wrong — but these attributes are a DOM
-        // contract other displays read with `closest`, and a stale true is what the
-        // next reader would inherit.
-        event.currentTarget.removeAttribute(PAN_MOVED_ATTR);
-        if (event.shiftKey) {
-            return;
+        function move(e) {
+            if (!pointers.has(e.pointerId)) {
+                return;
+            }
+            pointers.set(e.pointerId, pointOf(e));
+            if (Math.abs(e.clientX - startX) > PAN_CLICK_THRESHOLD_PX) {
+                host.setAttribute(PAN_MOVED_ATTR, '');
+            }
+            frame ??= window.requestAnimationFrame(flush);
         }
-        // skip the click-drag pan when pressing an interactive control: a
-        // draggable element, a control that claimed the press (resize handles, the
-        // scalebar), or a button (e.g. the menu button on a highlight/bookmark
-        // chip, whose actual target is the icon inside it). All three are matched
-        // with `closest`, since the press usually lands on a child of the control
-        // rather than the control itself.
-        const target = event.target;
-        if (target.draggable ||
-            target.closest('[data-gesture-owner]') ||
-            target.closest('button')) {
-            return;
+        function end(applyQueued) {
+            if (applyQueued) {
+                settle();
+            }
+            else if (frame !== undefined) {
+                window.cancelAnimationFrame(frame);
+            }
+            host.removeAttribute(PAN_DRAGGING_ATTR);
+            window.removeEventListener('pointermove', move, true);
+            window.removeEventListener('pointerup', release, true);
+            window.removeEventListener('pointercancel', release, true);
+            window.removeEventListener('selectstart', blockSelection, true);
+            gestureRef.current = undefined;
         }
-        // otherwise do click and drag scroll
-        if (event.button === 0) {
-            hostRef.current = event.currentTarget;
-            event.currentTarget.setAttribute(PAN_DRAGGING_ATTR, '');
-            startXRef.current = event.clientX;
-            prevXRef.current = event.clientX;
-            currXRef.current = event.clientX;
-            setMouseDragging(true);
+        // pointercancel as well as pointerup: the browser cancels a touch it takes
+        // over as a vertical scroll, and the gesture would otherwise stay latched
+        function release(e) {
+            if (!pointers.has(e.pointerId)) {
+                return;
+            }
+            if (pointers.size > 1) {
+                settle();
+                pointers.delete(e.pointerId);
+                applied.delete(e.pointerId);
+            }
+            else {
+                end(true);
+            }
         }
+        host.setAttribute(PAN_DRAGGING_ATTR, '');
+        window.addEventListener('pointermove', move, true);
+        window.addEventListener('pointerup', release, true);
+        window.addEventListener('pointercancel', release, true);
+        window.addEventListener('selectstart', blockSelection, true);
+        gestureRef.current = {
+            join(e) {
+                if (e.pointerType !== 'touch' || pointers.size > 1) {
+                    return;
+                }
+                settle();
+                pointers.set(e.pointerId, pointOf(e));
+                applied = new Map(pointers);
+                host.setAttribute(PAN_MOVED_ATTR, '');
+                model.cancelZoomAnimation();
+            },
+            cancel() {
+                end(false);
+            },
+        };
     }
-    // this local mouseup is used in addition to the global because sometimes
-    // the global add/remove are not called in time, resulting in issue #533
-    function mouseUp(event) {
-        event.preventDefault();
-        hostRef.current?.removeAttribute(PAN_DRAGGING_ATTR);
-        setMouseDragging(false);
+    // The browser fires `click` after a release on whatever the press and the
+    // release share, which over a track is its canvas, so a pan that ended on a
+    // gene would open that gene's details.
+    function onClickCapture(event) {
+        if (event.currentTarget.hasAttribute(PAN_MOVED_ATTR)) {
+            event.stopPropagation();
+        }
     }
-    return { mouseDown, mouseUp };
+    return { onPointerDownCapture, onPointerDown, onClickCapture };
 }

package/esm/LinearGenomeView/components/util.d.ts

@@ -1,6 +1,10 @@
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
 import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 export { getHighlightColor, highlightKey } from '@jbrowse/core/util/highlights';
+export declare const scalebarRefLabelProps: {
+    'data-scalebar-ref-label': string;
+};
+export declare function isOnScalebarRefLabel(target: EventTarget | null): boolean;
 export declare const elidedBlockStyles: {
     readonly backgroundColor: '#999';
     readonly backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)';

package/esm/LinearGenomeView/components/util.js

@@ -3,8 +3,10 @@ import { pxToBp } from '@jbrowse/core/util/Base1DUtils';
 // getHighlightColor/highlightKey live in core so the dotplot highlight bands can
 // share the exact same color and React-key semantics
 export { getHighlightColor, highlightKey } from '@jbrowse/core/util/highlights';
-// Shared style for elided (collapsed) blocks — striped grey pattern used
-// consistently across OverviewScalebar, ScalebarCoordinateLabels, and Gridlines
+export const scalebarRefLabelProps = { 'data-scalebar-ref-label': '' };
+export function isOnScalebarRefLabel(target) {
+    return (target instanceof Element && !!target.closest('[data-scalebar-ref-label]'));
+}
 export const elidedBlockStyles = {
     backgroundColor: '#999',
     backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',

package/esm/LinearGenomeView/consts.d.ts

@@ -1,10 +1,12 @@
 export declare const MIN_BP_PER_PX: number;
+export declare const MINIMUM_BLOCK_WIDTH = 3;
 export declare const SHOW_ALL_REGIONS_FILL = 0.9;
 export declare const HEADER_BAR_HEIGHT = 48;
 export declare const HEADER_OVERVIEW_HEIGHT = 20;
 export declare const SCALE_BAR_HEIGHT = 17;
 export declare const SVG_SCALEBAR_CAP = 5;
 export declare const RESIZE_HANDLE_HEIGHT = 4;
+export declare const RESIZE_ALL_HANDLE_HEIGHT = 6;
 export declare const TRACK_TOP_GAP = 2;
 export declare const TRACK_OUTLINE_BORDER = 1;
 export declare const MINIMIZED_TRACK_HEIGHT = 20;

package/esm/LinearGenomeView/consts.js

@@ -1,5 +1,6 @@
 // most zoomed-in level: 50px per bp
 export const MIN_BP_PER_PX = 1 / 50;
+export const MINIMUM_BLOCK_WIDTH = 3;
 // fraction of the view width the whole genome fills at the most zoomed-out
 // level, leaving a 10% margin
 export const SHOW_ALL_REGIONS_FILL = 0.9;
@@ -14,8 +15,9 @@ export const SVG_SCALEBAR_CAP = 5;
 // TrackContainer lays its Paper out from these same three and nothing else —
 // the previous spelling had the model on a 3 while the CSS rendered 2 + 1 + 4,
 // which put every model-derived track offset 5px per track above the pixels.
-// The track *label* is deliberately not among them; see `trackChromeHeight`.
+// The track *label* is not among them: it is measured, see `trackLabelBand`.
 export const RESIZE_HANDLE_HEIGHT = 4;
+export const RESIZE_ALL_HANDLE_HEIGHT = 6;
 export const TRACK_TOP_GAP = 2;
 export const TRACK_OUTLINE_BORDER = 1;
 export const MINIMIZED_TRACK_HEIGHT = 20;

package/esm/LinearGenomeView/containingLgv.d.ts

@@ -0,0 +1,21 @@
+import type { LinearGenomeViewModel } from './model.ts';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+/**
+ * The containing view as the linear genome view itself, for a display that
+ * needs `pxToBp`, `showTrack`, `navTo` or the view's own chrome settings.
+ *
+ * The twin of display-kit's `containingHost`, and deliberately not the same
+ * function: `RegionHost` is the region contract display-kit reads, and widening
+ * it to carry the LGV's own surface is how the display layer would come to
+ * depend on the view plugin. A display that wants the view names the view.
+ *
+ * A view that lays its displays along a strip of its own — the circular view's
+ * ring host — is answered here too, the way `containingHost` answers it: the
+ * strip carries the members a display reads to draw (`bpToPx`, `pxToBp`, the
+ * blocks), and a display drawn there that reaches for a member the strip has
+ * not is the display that stays off the circle.
+ *
+ * Components and structural helpers taking duck-typed model shapes keep calling
+ * `getContainingView` — the same carve-out `containingHost` documents.
+ */
+export declare function containingLgv(self: IStateTreeNode): LinearGenomeViewModel;

package/esm/LinearGenomeView/containingLgv.js

@@ -0,0 +1,23 @@
+import { getContainingView } from '@jbrowse/core/util';
+/**
+ * The containing view as the linear genome view itself, for a display that
+ * needs `pxToBp`, `showTrack`, `navTo` or the view's own chrome settings.
+ *
+ * The twin of display-kit's `containingHost`, and deliberately not the same
+ * function: `RegionHost` is the region contract display-kit reads, and widening
+ * it to carry the LGV's own surface is how the display layer would come to
+ * depend on the view plugin. A display that wants the view names the view.
+ *
+ * A view that lays its displays along a strip of its own — the circular view's
+ * ring host — is answered here too, the way `containingHost` answers it: the
+ * strip carries the members a display reads to draw (`bpToPx`, `pxToBp`, the
+ * blocks), and a display drawn there that reaches for a member the strip has
+ * not is the display that stays off the circle.
+ *
+ * Components and structural helpers taking duck-typed model shapes keep calling
+ * `getContainingView` — the same carve-out `containingHost` documents.
+ */
+export function containingLgv(self) {
+    const view = getContainingView(self);
+    return (view.regionHost ?? view);
+}

package/esm/LinearGenomeView/headerFit.d.ts

@@ -1,4 +1,4 @@
-declare const SHEDDABLE: readonly [readonly ['trackSelectorIndent', 16], readonly ['panButtonSpacing', 100], readonly ['scrollZoomLabel', 83], readonly ['zoomSlider', 100], readonly ['regionWidth', 54]];
+declare const SHEDDABLE: readonly [readonly ['trackSelectorIndent', 16], readonly ['panButtonSpacing', 100], readonly ['scrollZoomLabel', 88], readonly ['zoomSlider', 100], readonly ['regionWidth', 54]];
 export type HeaderFit = Record<(typeof SHEDDABLE)[number][0], boolean>;
 /**
  * Which of the header bar's optional pieces a header `width` px wide still has
@@ -19,9 +19,11 @@ export type HeaderFit = Record<(typeof SHEDDABLE)[number][0], boolean>;
  * not a cliff: it shrinks from what it asked for rather than from the 101px the
  * unshed row used to leave it.
  */
-export declare function headerFit({ width, searchBoxPx, clearHighlight, }: {
+export declare function headerFit({ width, searchBoxPx, clearHighlight, viewMenu, touch, }: {
     width: number | undefined;
     searchBoxPx: number;
     clearHighlight?: boolean;
+    viewMenu?: boolean;
+    touch?: boolean;
 }): HeaderFit;
 export {};

package/esm/LinearGenomeView/headerFit.js

@@ -1,15 +1,23 @@
 // Widths measured against a built jbrowse-web at the default theme and root
 // font size — `products/jbrowse-web/browser-tests/probe-lgv-header-fit.ts`
-// prints the row piece by piece. It spends 591px on everything that is not the
-// search box (47 track selector, 114 scroll-zoom toggle, 156 pan buttons, 50 bp
+// prints the row piece by piece. It spends 596px on everything that is not the
+// search box (47 track selector, 119 scroll-zoom checkbox, 156 pan buttons, 50 bp
 // readout, 192 zoom controls, 32 of flex gap). What the box itself asks for is
 // the caller's, because it follows the locstring rather than being a constant.
-const ROW_WITHOUT_SEARCH_PX = 591;
+const ROW_WITHOUT_SEARCH_PX = 596;
 // The one piece of the row that comes and goes on its own. A text search that
 // lands on a feature raises it — the same flow that was just using the search
 // box this whole table exists to protect — so its width is taken off the top
 // rather than left for the search box to absorb.
 const CLEAR_HIGHLIGHT_PX = 35;
+// An embedded view has no title bar, so its menu button leads this row: a
+// 40px icon button and its flex gap.
+const VIEW_MENU_PX = 44;
+// A touch device drops the scroll-zoom toggle, which has no wheel to
+// govern, and the pan buttons, which a swipe replaces: 119 + 156, and the flex
+// gaps of the three items.
+const TOUCH_ABSENT_PX = 287;
+const TOUCH_ABSENT = new Set(['panButtonSpacing', 'scrollZoomLabel']);
 // What the header gives up as its window narrows, cheapest first, with the
 // pixels each one frees. Whitespace goes before words, words before a redundant
 // control, and that before a readout. The search box is not on the list: it is
@@ -18,7 +26,7 @@ const CLEAR_HIGHLIGHT_PX = 35;
 const SHEDDABLE = [
     ['trackSelectorIndent', 16],
     ['panButtonSpacing', 100],
-    ['scrollZoomLabel', 83],
+    ['scrollZoomLabel', 88],
     ['zoomSlider', 100],
     ['regionWidth', 54],
 ];
@@ -41,17 +49,22 @@ const SHEDDABLE = [
  * not a cliff: it shrinks from what it asked for rather than from the 101px the
  * unshed row used to leave it.
  */
-export function headerFit({ width, searchBoxPx, clearHighlight = false, }) {
+export function headerFit({ width, searchBoxPx, clearHighlight = false, viewMenu = false, touch = false, }) {
     const fit = Object.fromEntries(SHEDDABLE.map(([k]) => [k, true]));
     if (width === undefined) {
         return fit;
     }
-    const room = width - (clearHighlight ? CLEAR_HIGHLIGHT_PX : 0);
-    let need = ROW_WITHOUT_SEARCH_PX + searchBoxPx;
+    const room = width -
+        (clearHighlight ? CLEAR_HIGHLIGHT_PX : 0) -
+        (viewMenu ? VIEW_MENU_PX : 0);
+    let need = ROW_WITHOUT_SEARCH_PX + searchBoxPx - (touch ? TOUCH_ABSENT_PX : 0);
     for (const [key, saves] of SHEDDABLE) {
         if (need <= room) {
             break;
         }
+        if (touch && TOUCH_ABSENT.has(key)) {
+            continue;
+        }
         fit[key] = false;
         need -= saves;
     }

package/esm/LinearGenomeView/index.d.ts

@@ -25,11 +25,6 @@ declare module '@jbrowse/core/PluginManager' {
 }
 export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export { stateModelFactory } from './model.ts';
-export { lgvLaunchKeys } from './launchKeys.ts';
-export type { LinearGenomeViewModel, LinearGenomeViewStateModel, } from './model.ts';
-export type { BpOffset, ExportSvgOptions, HighlightType, InitState, LinearGenomeViewLaunchProps, NavLocation, TrackLabelMode, VolatileGuide, } from './types.ts';
-export { type SyncableViewAction, installLinkedViewSync, } from './linkedViewSync.ts';
-export { default as HighlightBand } from './components/HighlightBand.tsx';
+export type { LinearGenomeViewModel, LinearGenomeViewStateModel, LinearGenomeViewTrack, } from './model.ts';
+export { installLinkedViewSync } from './linkedViewSync.ts';
 export { default as HighlightChip } from './components/HighlightChip.tsx';
-export { default as OverviewHighlightBand } from './components/OverviewHighlightBand.tsx';
-export { default as SVGHighlightBand } from './components/SVGHighlightBand.tsx';

package/esm/LinearGenomeView/index.js

@@ -1,5 +1,6 @@
-import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
+import { lazyWithPreload } from '@jbrowse/core/util/lazyWithPreload';
+import { lgvKeyboardShortcuts } from './keyboardHandler.js';
 import { lgvLaunchKeys } from './launchKeys.js';
 import { stateModelFactory } from './model.js';
 export default function LinearGenomeViewF(pluginManager) {
@@ -13,14 +14,11 @@ export default function LinearGenomeViewF(pluginManager) {
             displayName: 'Linear genome view',
             stateModel,
             launchKeys: lgvLaunchKeys,
-            ReactComponent: lazy(() => import('./components/LinearGenomeView.js')),
+            keyboardShortcuts: lgvKeyboardShortcuts,
+            ReactComponent: lazyWithPreload(() => import('./components/LinearGenomeView.js')),
         });
     });
 }
 export { stateModelFactory } from './model.js';
-export { lgvLaunchKeys } from './launchKeys.js';
-export { installLinkedViewSync, } from './linkedViewSync.js';
-export { default as HighlightBand } from './components/HighlightBand.js';
+export { installLinkedViewSync } from './linkedViewSync.js';
 export { default as HighlightChip } from './components/HighlightChip.js';
-export { default as OverviewHighlightBand } from './components/OverviewHighlightBand.js';
-export { default as SVGHighlightBand } from './components/SVGHighlightBand.js';

package/esm/LinearGenomeView/keyboardHandler.d.ts

@@ -1,9 +1,10 @@
 import type { LinearGenomeViewModel } from './model.ts';
-/**
- * Sets up keyboard shortcuts for the LinearGenomeView
- * - Ctrl/Cmd + ArrowLeft: slide left
- * - Ctrl/Cmd + ArrowRight: slide right
- * - Ctrl/Cmd + ArrowUp: zoom in
- * - Ctrl/Cmd + ArrowDown: zoom out
- */
+import type { KeyboardShortcut } from '@jbrowse/core/pluggableElementTypes';
+interface LgvShortcut extends KeyboardShortcut {
+    code: string;
+    shift?: boolean;
+    run: (self: LinearGenomeViewModel) => void;
+}
+export declare const lgvKeyboardShortcuts: readonly LgvShortcut[];
 export declare function setupKeyboardHandler(self: LinearGenomeViewModel): void;
+export {};