@adecore/editor 0.21.0 → 0.21.2

package/dist/fake.js

@@ -6,7 +6,7 @@ function positionIn(text, offset) {
     const lines = before.split('\n');
     return { line: lines.length - 1, character: lines.at(-1).length };
 }
-/* An editor without a DOM, for tests: `type`, `save` and `blur` do what a person would, the rest says what the client asked of it. */
+/* An editor without a DOM, for tests: `type`, `save` and `blur` do what a person would, the rest says what the host asked of it. */
 export class FakeEditor {
     element;
     language;
@@ -20,10 +20,10 @@ export class FakeEditor {
     revealedLine;
     focused = false;
     indentation;
-    /* How often the client asked it to read the code face off the page again. */
+    /* How often the host asked it to read the code face off the page again. */
     fontRefreshes = 0;
     disposed = false;
-    /* What the client asked to find last; null once it ended the find. */
+    /* What the host asked to find last; null once it ended the find. */
     findQuery = null;
     findState = { count: 0, current: null };
     text;
@@ -93,9 +93,7 @@ export class FakeEditor {
             source,
             changes: [{ range: { start: positionIn(before, span.start), end: positionIn(before, span.end) }, text: span.text }]
         };
-        for (const listener of [...this.textChanges]) {
-            listener(change);
-        }
+        emit(this.textChanges, change);
     }
     tracked = new Set();
     /* The fake sees one change per edit, the stretch that differs, so a range it tracks is lost a little sooner than the real editor's. */
@@ -123,10 +121,7 @@ export class FakeEditor {
         };
     }
     onTextChange(listener) {
-        this.textChanges.add(listener);
-        return () => {
-            this.textChanges.delete(listener);
-        };
+        return subscribe(this.textChanges, listener);
     }
     positionAt(offset) {
         return positionIn(this.text, offset);
@@ -152,13 +147,13 @@ export class FakeEditor {
     onBlur(listener) {
         return subscribe(this.blurs, listener);
     }
-    /* How the client last asked the view to follow a jump. */
+    /* How the host last asked the view to follow a jump. */
     lastReveal = null;
     revealLine(line, reveal = 'center') {
         this.revealedLine = line;
         this.lastReveal = reveal;
     }
-    /* Counts plain occurrences only; the matcher itself is the editor's, and a test here is about the client's side. */
+    /* Counts plain occurrences only; the matcher itself is the editor's, and a test here is about the host's side. */
     find(query) {
         this.findQuery = query;
         const needle = query === null || query.text === '' ? '' : query.caseSensitive ? query.text : query.text.toLowerCase();
@@ -166,12 +161,12 @@ export class FakeEditor {
         const count = needle === '' ? 0 : haystack.split(needle).length - 1;
         this.announceFind({ count, current: count === 0 ? null : 0 });
     }
-    /* What the client asked to replace, one match at a time and all at once. */
+    /* What the host asked to replace, one match at a time and all at once. */
     replacements = [];
     replaceOptions = [];
-    /* What the client last asked to show under the match. */
+    /* What the host last asked to show under the match. */
     replacePreview = null;
-    /* What the client asked to select all matches of, and how many it was told there were. */
+    /* What the host asked to select all matches of, and how many it was told there were. */
     selectedMatches = 0;
     lastFindFromCursor = null;
     replacementsOfAll = [];
@@ -204,10 +199,7 @@ export class FakeEditor {
         }
     }
     onFind(listener) {
-        this.finds.add(listener);
-        return () => {
-            this.finds.delete(listener);
-        };
+        return subscribe(this.finds, listener);
     }
     endFind() {
         this.find(null);
@@ -215,40 +207,37 @@ export class FakeEditor {
     setWrap(wrap) {
         this.wrap = wrap;
     }
-    /* What the client handed it last; null while it reads the structure itself. */
+    /* What the host handed it last; null while it reads the structure itself. */
     blocks = null;
     scopes = new Set();
-    /* What the client marked as changed last. */
+    /* What the host marked as changed last. */
     changeMarks = [];
     setChangeMarks(marks) {
         this.changeMarks = marks;
     }
-    /* The tinted lines the client set last. */
+    /* The tinted lines the host set last. */
     lineHighlights = [];
     setLineHighlights(highlights) {
         this.lineHighlights = highlights;
     }
-    /* What the client drew as code outside the document: the text and how, and into which element. */
+    /* What the host drew as code outside the document: the text and how, and into which element. */
     codeBlocks = [];
     renderCode(container, text, options = {}) {
         this.codeBlocks.push({ container, text, options });
     }
-    /* The cursors of agents the client set last. */
+    /* The cursors of agents the host set last. */
     remoteCursors = [];
     setRemoteCursors(cursors) {
         this.remoteCursors = cursors;
     }
-    /* What the client marked as written by an agent last. */
+    /* What the host marked as written by an agent last. */
     attributionMarks = [];
     attributionHovers = new Set();
     setAttributionMarks(marks) {
         this.attributionMarks = marks;
     }
     onAttributionHover(listener) {
-        this.attributionHovers.add(listener);
-        return () => {
-            this.attributionHovers.delete(listener);
-        };
+        return subscribe(this.attributionHovers, listener);
     }
     /* The pointer on the bar of a mark, or leaving it. The rect is where `rectAt` puts the mark's first line unless given. */
     hoverAttribution(id, rect) {
@@ -256,9 +245,7 @@ export class FakeEditor {
         const hover = mark === undefined
             ? null
             : { id: mark.id, rect: rect ?? this.rectAt({ line: mark.startLine - 1, character: 0 }) ?? { left: 0, top: 0, right: 0, bottom: 0 } };
-        for (const listener of [...this.attributionHovers]) {
-            listener(hover);
-        }
+        emit(this.attributionHovers, hover);
     }
     /* What each owner put next to lines of the text last. */
     widgetsByOwner = new Map();
@@ -292,22 +279,19 @@ export class FakeEditor {
             this.lineActionsByOwner.set(owner, actions);
         }
     }
-    /* The code vision rows the client set last. */
+    /* The code vision rows the host set last. */
     codeVision = [];
     setCodeVision(rows) {
         this.codeVision = rows;
     }
-    /* The button the client set in the gutter last. */
+    /* The button the host set in the gutter last. */
     gutterAction = null;
     gutterActionListeners = new Set();
     setGutterAction(action) {
         this.gutterAction = action;
     }
     onGutterAction(listener) {
-        this.gutterActionListeners.add(listener);
-        return () => {
-            this.gutterActionListeners.delete(listener);
-        };
+        return subscribe(this.gutterActionListeners, listener);
     }
     /* What each owner put in the gutter last. */
     gutterMarkersByOwner = new Map();
@@ -321,39 +305,27 @@ export class FakeEditor {
         }
     }
     onGutterMarker(listener) {
-        this.gutterMarkerListeners.add(listener);
-        return () => {
-            this.gutterMarkerListeners.delete(listener);
-        };
+        return subscribe(this.gutterMarkerListeners, listener);
     }
     /* A press on a gutter marker. */
     pressGutterMarker(id) {
-        for (const listener of [...this.gutterMarkerListeners]) {
-            listener(id);
-        }
+        emit(this.gutterMarkerListeners, id);
     }
     /* A press on the gutter button, if there is one. */
     pressGutterAction() {
         if (this.gutterAction !== null) {
-            for (const listener of [...this.gutterActionListeners]) {
-                listener(this.gutterAction.line);
-            }
+            emit(this.gutterActionListeners, this.gutterAction.line);
         }
     }
     setBlocks(blocks) {
         this.blocks = blocks;
     }
     onScope(listener) {
-        this.scopes.add(listener);
-        return () => {
-            this.scopes.delete(listener);
-        };
+        return subscribe(this.scopes, listener);
     }
-    /* The caret moving into blocks, for a test of what the client draws from it. */
+    /* The caret moving into blocks, for a test of what the host draws from it. */
     enterScope(scope) {
-        for (const listener of [...this.scopes]) {
-            listener(scope);
-        }
+        emit(this.scopes, scope);
     }
     smartKeys;
     guides = true;
@@ -386,7 +358,7 @@ export class FakeEditor {
     setIndentation(indentation) {
         this.indentation = indentation;
     }
-    /* What the client marked and highlighted last. */
+    /* What the host marked and highlighted last. */
     markers = [];
     highlights = [];
     caret = { line: 0, character: 0 };
@@ -400,7 +372,7 @@ export class FakeEditor {
     setMarkers(markers) {
         this.markers = markers;
     }
-    /* What the client drew as hints last. */
+    /* What the host drew as hints last. */
     inlayHints = [];
     setInlayHints(hints) {
         this.inlayHints = hints;
@@ -410,12 +382,12 @@ export class FakeEditor {
     setGhostText(ghost) {
         this.ghost = ghost;
     }
-    /* What the client classified last. */
+    /* What the host classified last. */
     semanticTokens = null;
     setSemanticTokens(tokens) {
         this.semanticTokens = tokens;
     }
-    /* What the client drew as a link last. */
+    /* What the host drew as a link last. */
     link = null;
     setLink(range) {
         this.link = range;
@@ -426,7 +398,7 @@ export class FakeEditor {
     getCaret() {
         return this.caret;
     }
-    /* The folds the client asked to keep. */
+    /* The folds the host asked to keep. */
     folds = { collapsed: [], custom: [] };
     getFolds() {
         return this.folds;
@@ -472,36 +444,24 @@ export class FakeEditor {
         this.lastReveal = reveal;
         this.caret = range.end;
         this.selection = range;
-        for (const listener of [...this.carets]) {
-            listener(range.end);
-        }
+        emit(this.carets, range.end);
     }
     /* The caret a person's click or key moved. */
     moveCaret(position) {
         this.caret = position;
         this.selection = null;
-        for (const listener of [...this.carets]) {
-            listener(position);
-        }
+        emit(this.carets, position);
     }
     onCaret(listener) {
-        this.carets.add(listener);
-        return () => {
-            this.carets.delete(listener);
-        };
+        return subscribe(this.carets, listener);
     }
     onHover(listener) {
-        this.hovers.add(listener);
-        return () => {
-            this.hovers.delete(listener);
-        };
+        return subscribe(this.hovers, listener);
     }
     /* The pointer resting on a position, or leaving the text. */
     hover(position) {
         const hover = position === null ? null : { position, rect: this.rectAt(position) };
-        for (const listener of [...this.hovers]) {
-            listener(hover);
-        }
+        emit(this.hovers, hover);
     }
     rectAt(position) {
         const left = this.origin.left + position.character * this.charSize.width;
@@ -529,24 +489,15 @@ export class FakeEditor {
         this.selectionRanges = provider;
     }
     onKeyDown(handler) {
-        this.keys.add(handler);
-        return () => {
-            this.keys.delete(handler);
-        };
+        return subscribe(this.keys, handler);
     }
     clickHandlers = new Set();
     contextListeners = new Set();
     onClick(handler) {
-        this.clickHandlers.add(handler);
-        return () => {
-            this.clickHandlers.delete(handler);
-        };
+        return subscribe(this.clickHandlers, handler);
     }
     onContextMenu(listener) {
-        this.contextListeners.add(listener);
-        return () => {
-            this.contextListeners.delete(listener);
-        };
+        return subscribe(this.contextListeners, listener);
     }
     /* A press on a character as the editor sees it first; true when a handler took it, and the caret stays where it is otherwise only until the test moves it. */
     click(click) {
@@ -554,9 +505,7 @@ export class FakeEditor {
     }
     /* The context menu asked for at a position. */
     openContextMenu(menu) {
-        for (const listener of [...this.contextListeners]) {
-            listener(menu);
-        }
+        emit(this.contextListeners, menu);
     }
     /* A key as the editor sees it first; true when a handler took it. */
     press(event) {
@@ -634,11 +583,9 @@ export class FakeEditor {
     }
     announceFind(state) {
         this.findState = state;
-        for (const listener of [...this.finds]) {
-            listener(state);
-        }
+        emit(this.finds, state);
     }
-    /* A test that drives an editor its client already disposed has found a leak. */
+    /* A test that drives an editor its host already disposed has found a leak. */
     assertLive() {
         if (this.disposed) {
             throw new Error('The editor is disposed');

package/dist/keymap.d.ts

@@ -1,7 +1,6 @@
 import type { EditorCommand } from '@adecore/editor-core';
-import type { EditorViewCommand } from './types.ts';
 import { type Keymap } from './keymap-table.ts';
-import type { KeyChord } from './types.ts';
+import type { EditorViewCommand, KeyChord } from './types.ts';
 export interface KeyLike {
     key: string;
     code?: string;

package/dist/keymap.js

@@ -3,6 +3,9 @@ const MOVES = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageU
 function command(name) {
     return { type: 'command', command: name };
 }
+function view(name) {
+    return { type: 'view', command: name };
+}
 /* What each key of the table does in the editor. A key of the table that is not here is a language command, which the host answers. */
 const ACTIONS = {
     undo: command('undo'),
@@ -42,21 +45,21 @@ const ACTIONS = {
     selectTextStart: { type: 'edge', end: false, extend: true },
     textEnd: { type: 'edge', end: true, extend: false },
     selectTextEnd: { type: 'edge', end: true, extend: true },
-    collapse: { type: 'view', command: 'collapseRegion' },
-    expand: { type: 'view', command: 'expandRegion' },
-    collapseAll: { type: 'view', command: 'collapseAllRegions' },
-    expandAll: { type: 'view', command: 'expandAllRegions' },
-    collapseRecursively: { type: 'view', command: 'collapseRegionRecursively' },
-    expandRecursively: { type: 'view', command: 'expandRegionRecursively' },
-    foldSelection: { type: 'view', command: 'foldSelection' },
-    collapseDocComments: { type: 'view', command: 'collapseDocComments' },
-    expandDocComments: { type: 'view', command: 'expandDocComments' },
-    expandAllToLevel1: { type: 'view', command: 'expandAllToLevel1' },
-    expandAllToLevel2: { type: 'view', command: 'expandAllToLevel2' },
-    expandAllToLevel3: { type: 'view', command: 'expandAllToLevel3' },
-    expandAllToLevel4: { type: 'view', command: 'expandAllToLevel4' },
-    expandAllToLevel5: { type: 'view', command: 'expandAllToLevel5' },
-    toggleColumnMode: { type: 'view', command: 'toggleColumnMode' }
+    collapse: view('collapseRegion'),
+    expand: view('expandRegion'),
+    collapseAll: view('collapseAllRegions'),
+    expandAll: view('expandAllRegions'),
+    collapseRecursively: view('collapseRegionRecursively'),
+    expandRecursively: view('expandRegionRecursively'),
+    foldSelection: view('foldSelection'),
+    collapseDocComments: view('collapseDocComments'),
+    expandDocComments: view('expandDocComments'),
+    expandAllToLevel1: view('expandAllToLevel1'),
+    expandAllToLevel2: view('expandAllToLevel2'),
+    expandAllToLevel3: view('expandAllToLevel3'),
+    expandAllToLevel4: view('expandAllToLevel4'),
+    expandAllToLevel5: view('expandAllToLevel5'),
+    toggleColumnMode: view('toggleColumnMode')
 };
 const PUNCTUATION_CODES = {
     ',': 'Comma',

package/dist/layout.d.ts

@@ -133,7 +133,7 @@ export declare class EditorLayout {
     configure(config: LayoutConfig): void;
     private rowCountOf;
     private rebuild;
-    private tailOf;
+    private clampToLine;
     private reflow;
     setMeasuredHeight(key: string, height: number): boolean;
     syncRows(rows: readonly LayoutRow[]): boolean;

package/dist/layout.js

@@ -8,6 +8,7 @@ const DEFAULT_BLOCK_HEIGHT = 40;
 const WRAP_INDENT_STEP = 2;
 const GEOMETRY_CACHE_SIZE = 400;
 const PLAIN = /^[\x20-\x7e\t]*$/;
+const GRAPHEME_LIMIT = 20000;
 const SEGMENTER = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 function lowerBound(values, value) {
     let low = 0;
@@ -23,10 +24,10 @@ function lowerBound(values, value) {
     }
     return low;
 }
-/* Where each character starts, with the length last. A line that long is cut by code unit, since splitting it by grapheme would cost more than it shows. */
+/* Where each character starts, with the length last. A very long line is cut by code unit, since splitting it by grapheme would cost more than it shows. */
 function characterOffsets(text) {
     const offsets = [];
-    if (text.length > 20000 || PLAIN.test(text)) {
+    if (text.length > GRAPHEME_LIMIT || PLAIN.test(text)) {
         for (let i = 0; i < text.length; i++) {
             offsets.push(i);
         }
@@ -277,8 +278,8 @@ export class EditorLayout {
             }
             const fold = folds.get(line);
             const last = Math.max(line, Math.min(count - 1, fold?.endLine ?? line));
-            const tail = fold?.closer !== undefined && last > line ? this.tailOf(fold.closer, last) : null;
-            const head = fold?.head !== undefined && last > line ? this.tailOf(fold.head, line) : null;
+            const tail = fold?.closer !== undefined && last > line ? this.clampToLine(fold.closer, last) : null;
+            const head = fold?.head !== undefined && last > line ? this.clampToLine(fold.head, line) : null;
             const index = this.rows.length;
             const bounds = this.wrapWidth === null ? null : this.document.getLine(line);
             const subRows = this.rowCountOf(line, bounds === null ? 0 : bounds.end - bounds.start);
@@ -305,9 +306,9 @@ export class EditorLayout {
         this.reflow();
     }
     /* An offset of a fold clamped to its line, since the fold may be a moment older than an edit. */
-    tailOf(closer, line) {
+    clampToLine(offset, line) {
         const bounds = this.document.getLine(line);
-        return Math.min(bounds.end, Math.max(bounds.start, closer));
+        return Math.min(bounds.end, Math.max(bounds.start, offset));
     }
     reflow() {
         let top = 0;

package/dist/listeners.d.ts

@@ -1,3 +1,3 @@
 export type Listener = () => void;
-export declare function subscribe(listeners: Set<Listener>, listener: Listener): () => void;
-export declare function emit(listeners: Set<Listener>): void;
+export declare function subscribe<T>(listeners: Set<T>, listener: T): () => void;
+export declare function emit<Args extends unknown[]>(listeners: Set<(...args: Args) => void>, ...args: Args): void;

package/dist/listeners.js

@@ -5,8 +5,8 @@ export function subscribe(listeners, listener) {
     };
 }
 /* Over a copy, so a listener that unsubscribes itself does not skip the next one. */
-export function emit(listeners) {
+export function emit(listeners, ...args) {
     for (const listener of [...listeners]) {
-        listener();
+        listener(...args);
     }
 }

package/dist/modifier-gesture.js

@@ -27,8 +27,8 @@ export class DoubleModifierGesture {
     }
     /* Another modifier held with the one that counts spoils the gesture. */
     spoiled(event) {
-        const others = this.modifier === 'Alt' ? event.ctrlKey || event.metaKey || event.shiftKey : event.altKey || event.metaKey || event.shiftKey;
-        return others;
+        const other = this.modifier === 'Alt' ? event.ctrlKey : event.altKey;
+        return other || event.metaKey || event.shiftKey;
     }
     keydown(event) {
         if (event.key === this.modifier) {

package/dist/native-input.d.ts

@@ -23,4 +23,5 @@ export declare class NativeInput {
     endComposition(data: string): void;
     normalizeNewlines(text: string): string;
     private composedText;
+    private replacedText;
 }

package/dist/native-input.js

@@ -90,8 +90,7 @@ export class NativeInput {
             return;
         }
         if (this.model.getSelections().length > 1) {
-            const suffix = context.value.length - context.end;
-            this.host.replace(this.element.value.slice(context.start, Math.max(context.start, this.element.value.length - suffix)));
+            this.host.replace(this.replacedText(context));
             return;
         }
         const edit = {
@@ -140,7 +139,10 @@ export class NativeInput {
         return textareaText(text).replace(/\n/g, newline);
     }
     composedText() {
-        const context = this.compositionContext;
+        return this.replacedText(this.compositionContext);
+    }
+    /* What the textarea now holds where the selection of `context` was, the text after it kept. */
+    replacedText(context) {
         const suffix = context.value.length - context.end;
         return this.element.value.slice(context.start, Math.max(context.start, this.element.value.length - suffix));
     }

package/dist/outline.js

@@ -82,7 +82,7 @@ export function structuralEntries(ranges, document, slice, mate) {
     }
     return entries;
 }
-function toEditorLines(entry, document) {
+function toBlock(entry, document) {
     const startLine = document.positionAt(entry.from).line;
     return {
         startLine,
@@ -143,7 +143,7 @@ export class Outline {
     blocks(document) {
         if (this.cache?.version !== this.version) {
             const sorted = (this.provided ?? this.structure)
-                .map((entry) => toEditorLines(entry, document))
+                .map((entry) => toBlock(entry, document))
                 .sort((left, right) => left.startLine - right.startLine || right.endLine - left.endLine);
             this.cache = { version: this.version, blocks: sorted.filter((block, index) => index === 0 || block.startLine !== sorted[index - 1].startLine) };
         }

package/dist/overview.js

@@ -33,7 +33,6 @@ export function overviewTicks(spans, contentHeight, trackHeight) {
 }
 /* What is painted later is on top: the current find match, and the worse a problem is the later it goes. */
 const PAINT_ORDER = { warning: 1, error: 2, 'find-current': 3 };
-/* Draws the ticks. */
 export function paintOverview(container, ticks) {
     const document = container.ownerDocument;
     const order = (tick) => PAINT_ORDER[tick.kind] ?? 0;

package/dist/paint.js

@@ -266,6 +266,14 @@ export class RowPainter {
         this.rows.clear();
     }
 }
+function gutterButton(document, className, label) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = className;
+    button.tabIndex = -1;
+    button.setAttribute('aria-label', label);
+    return button;
+}
 /* The line numbers of the visible rows, and the fold control of the lines that have one. */
 export function paintGutter(container, layout, rows, paint) {
     const document = container.ownerDocument;
@@ -286,22 +294,14 @@ export function paintGutter(container, layout, rows, paint) {
         number.textContent = String(row.line + 1);
         item.append(number);
         if (paint.action?.line === row.line) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'se-gutter-action';
+            const button = gutterButton(document, 'se-gutter-action', paint.action.label);
             button.dataset.gutterAction = String(row.line);
-            button.tabIndex = -1;
-            button.setAttribute('aria-label', paint.action.label);
             item.append(button);
         }
         const marker = paint.markers.get(row.line);
         if (marker !== undefined) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'se-gutter-marker';
+            const button = gutterButton(document, 'se-gutter-marker', marker.label);
             button.dataset.gutterMarker = marker.id;
-            button.tabIndex = -1;
-            button.setAttribute('aria-label', marker.label);
             item.append(button);
         }
         const sign = paint.highlights.get(row.line)?.sign;
@@ -333,12 +333,8 @@ export function paintGutter(container, layout, rows, paint) {
         }
         const collapsed = paint.foldable.get(row.line);
         if (collapsed !== undefined) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = collapsed ? 'se-fold-toggle se-folded' : 'se-fold-toggle';
+            const button = gutterButton(document, collapsed ? 'se-fold-toggle se-folded' : 'se-fold-toggle', collapsed ? 'Expand' : 'Collapse');
             button.dataset.foldLine = String(row.line);
-            button.tabIndex = -1;
-            button.setAttribute('aria-label', collapsed ? 'Expand' : 'Collapse');
             item.append(button);
         }
         fragment.append(item);

package/dist/pointer.js

@@ -4,6 +4,13 @@ const MULTI_CLICK_MS = 500;
 const MULTI_CLICK_DISTANCE = 4;
 /* How far the pointer goes, in pixels, before a press on a selection starts carrying it. */
 const CARRY_THRESHOLD = 5;
+/* How far `value` lies outside `[low, high]`, negative below it and zero inside. */
+function overshoot(value, low, high) {
+    if (value < low) {
+        return value - low;
+    }
+    return value > high ? value - high : 0;
+}
 /* The selection a mouse makes: a click, a drag, shift to extend, alt to add a caret or, dragged, a column, a double click for a word and a triple for a line, which a drag then grows by words and lines. */
 export class PointerSelection {
     drag;
@@ -230,8 +237,8 @@ export class PointerSelection {
             return;
         }
         const rect = viewport.getBoundingClientRect();
-        const dy = this.drag.y < rect.top ? this.drag.y - rect.top : this.drag.y > rect.bottom ? this.drag.y - rect.bottom : 0;
-        const dx = this.drag.x < rect.left ? this.drag.x - rect.left : this.drag.x > rect.right ? this.drag.x - rect.right : 0;
+        const dy = overshoot(this.drag.y, rect.top, rect.bottom);
+        const dx = overshoot(this.drag.x, rect.left, rect.right);
         if (dy || dx) {
             viewport.scrollTop += Math.max(-SCROLL_STEP, Math.min(SCROLL_STEP, dy));
             viewport.scrollLeft += Math.max(-SCROLL_STEP, Math.min(SCROLL_STEP, dx));