@codemirror/view 6.7.0 → 6.7.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.7.1 (2022-12-12)
+
+### Bug fixes
+
+Make the editor properly scroll when moving the pointer out of it during drag selection.
+
+Fix a regression where clicking below the content element in an editor with its own height didn't focus the editor.
+
 ## 6.7.0 (2022-12-07)
 
 ### Bug fixes

package/dist/index.cjs

@@ -191,6 +191,26 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
         }
     }
 }
+function scrollableParent(dom) {
+    let doc = dom.ownerDocument;
+    for (let cur = dom.parentNode; cur;) {
+        if (cur == doc.body) {
+            break;
+        }
+        else if (cur.nodeType == 1) {
+            if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+                return cur;
+            cur = cur.assignedSlot || cur.parentNode;
+        }
+        else if (cur.nodeType == 11) {
+            cur = cur.host;
+        }
+        else {
+            break;
+        }
+    }
+    return null;
+}
 class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
@@ -3391,22 +3411,30 @@ class InputState {
         this.compositionFirstChange = null;
         this.compositionEndedAt = 0;
         this.mouseSelection = null;
+        let handleEvent = (handler, event) => {
+            if (this.ignoreDuringComposition(event))
+                return;
+            if (event.type == "keydown" && this.keydown(view, event))
+                return;
+            if (this.mustFlushObserver(event))
+                view.observer.forceFlush();
+            if (this.runCustomHandlers(event.type, view, event))
+                event.preventDefault();
+            else
+                handler(view, event);
+        };
         for (let type in handlers) {
             let handler = handlers[type];
-            view.contentDOM.addEventListener(type, (event) => {
-                if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-                    return;
-                if (type == "keydown" && this.keydown(view, event))
-                    return;
-                if (this.mustFlushObserver(event))
-                    view.observer.forceFlush();
-                if (this.runCustomHandlers(type, view, event))
-                    event.preventDefault();
-                else
-                    handler(view, event);
+            view.contentDOM.addEventListener(type, event => {
+                if (eventBelongsToEditor(view, event))
+                    handleEvent(handler, event);
             }, handlerOptions[type]);
             this.registeredEvents.push(type);
         }
+        view.scrollDOM.addEventListener("mousedown", (event) => {
+            if (event.target == view.scrollDOM)
+                handleEvent(handlers.mousedown, event);
+        });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
             // scrolling. Turning off pointer events during the scroll seems
@@ -3563,12 +3591,18 @@ const PendingKeys = [
 const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+function dragScrollSpeed(dist) {
+    return dist * 0.7 + 8;
+}
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
         this.view = view;
         this.style = style;
         this.mustSelect = mustSelect;
+        this.scrollSpeed = { x: 0, y: 0 };
+        this.scrolling = -1;
         this.lastEvent = startEvent;
+        this.scrollParent = scrollableParent(view.contentDOM);
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3584,11 +3618,24 @@ class MouseSelection {
         }
     }
     move(event) {
+        var _a;
         if (event.buttons == 0)
             return this.destroy();
         if (this.dragging !== false)
             return;
         this.select(this.lastEvent = event);
+        let sx = 0, sy = 0;
+        let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+            || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+        if (event.clientX <= rect.left)
+            sx = -dragScrollSpeed(rect.left - event.clientX);
+        else if (event.clientX >= rect.right)
+            sx = dragScrollSpeed(event.clientX - rect.right);
+        if (event.clientY <= rect.top)
+            sy = -dragScrollSpeed(rect.top - event.clientY);
+        else if (event.clientY >= rect.bottom)
+            sy = dragScrollSpeed(event.clientY - rect.bottom);
+        this.setScrollSpeed(sx, sy);
     }
     up(event) {
         if (this.dragging == null)
@@ -3598,19 +3645,41 @@ class MouseSelection {
         this.destroy();
     }
     destroy() {
+        this.setScrollSpeed(0, 0);
         let doc = this.view.contentDOM.ownerDocument;
         doc.removeEventListener("mousemove", this.move);
         doc.removeEventListener("mouseup", this.up);
         this.view.inputState.mouseSelection = null;
     }
+    setScrollSpeed(sx, sy) {
+        this.scrollSpeed = { x: sx, y: sy };
+        if (sx || sy) {
+            if (this.scrolling < 0)
+                this.scrolling = setInterval(() => this.scroll(), 50);
+        }
+        else if (this.scrolling > -1) {
+            clearInterval(this.scrolling);
+            this.scrolling = -1;
+        }
+    }
+    scroll() {
+        if (this.scrollParent) {
+            this.scrollParent.scrollLeft += this.scrollSpeed.x;
+            this.scrollParent.scrollTop += this.scrollSpeed.y;
+        }
+        else {
+            this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+        }
+        if (this.dragging === false)
+            this.select(this.lastEvent);
+    }
     select(event) {
         let selection = this.style.get(event, this.extend, this.multiple);
         if (this.mustSelect || !selection.eq(this.view.state.selection) ||
             selection.main.assoc != this.view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
-                userEvent: "select.pointer",
-                scrollIntoView: true
+                userEvent: "select.pointer"
             });
         this.mustSelect = false;
     }
@@ -3801,23 +3870,15 @@ function getClickType(event) {
 function basicMouseSelection(view, event) {
     let start = queryPos(view, event), type = getClickType(event);
     let startSel = view.state.selection;
-    let last = start, lastEvent = event;
     return {
         update(update) {
             if (update.docChanged) {
                 start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
-                lastEvent = null;
             }
         },
         get(event, extend, multiple) {
-            let cur;
-            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-                cur = last;
-            else {
-                cur = last = queryPos(view, event);
-                lastEvent = event;
-            }
+            let cur = queryPos(view, event);
             let range = rangeForClick(view, cur.pos, cur.bias, type);
             if (start.pos != cur.pos && !extend) {
                 let startRange = rangeForClick(view, start.pos, start.bias, type);

package/dist/index.js

@@ -187,6 +187,26 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
         }
     }
 }
+function scrollableParent(dom) {
+    let doc = dom.ownerDocument;
+    for (let cur = dom.parentNode; cur;) {
+        if (cur == doc.body) {
+            break;
+        }
+        else if (cur.nodeType == 1) {
+            if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+                return cur;
+            cur = cur.assignedSlot || cur.parentNode;
+        }
+        else if (cur.nodeType == 11) {
+            cur = cur.host;
+        }
+        else {
+            break;
+        }
+    }
+    return null;
+}
 class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
@@ -3385,22 +3405,30 @@ class InputState {
         this.compositionFirstChange = null;
         this.compositionEndedAt = 0;
         this.mouseSelection = null;
+        let handleEvent = (handler, event) => {
+            if (this.ignoreDuringComposition(event))
+                return;
+            if (event.type == "keydown" && this.keydown(view, event))
+                return;
+            if (this.mustFlushObserver(event))
+                view.observer.forceFlush();
+            if (this.runCustomHandlers(event.type, view, event))
+                event.preventDefault();
+            else
+                handler(view, event);
+        };
         for (let type in handlers) {
             let handler = handlers[type];
-            view.contentDOM.addEventListener(type, (event) => {
-                if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-                    return;
-                if (type == "keydown" && this.keydown(view, event))
-                    return;
-                if (this.mustFlushObserver(event))
-                    view.observer.forceFlush();
-                if (this.runCustomHandlers(type, view, event))
-                    event.preventDefault();
-                else
-                    handler(view, event);
+            view.contentDOM.addEventListener(type, event => {
+                if (eventBelongsToEditor(view, event))
+                    handleEvent(handler, event);
             }, handlerOptions[type]);
             this.registeredEvents.push(type);
         }
+        view.scrollDOM.addEventListener("mousedown", (event) => {
+            if (event.target == view.scrollDOM)
+                handleEvent(handlers.mousedown, event);
+        });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
             // scrolling. Turning off pointer events during the scroll seems
@@ -3557,12 +3585,18 @@ const PendingKeys = [
 const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+function dragScrollSpeed(dist) {
+    return dist * 0.7 + 8;
+}
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
         this.view = view;
         this.style = style;
         this.mustSelect = mustSelect;
+        this.scrollSpeed = { x: 0, y: 0 };
+        this.scrolling = -1;
         this.lastEvent = startEvent;
+        this.scrollParent = scrollableParent(view.contentDOM);
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3578,11 +3612,24 @@ class MouseSelection {
         }
     }
     move(event) {
+        var _a;
         if (event.buttons == 0)
             return this.destroy();
         if (this.dragging !== false)
             return;
         this.select(this.lastEvent = event);
+        let sx = 0, sy = 0;
+        let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+            || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+        if (event.clientX <= rect.left)
+            sx = -dragScrollSpeed(rect.left - event.clientX);
+        else if (event.clientX >= rect.right)
+            sx = dragScrollSpeed(event.clientX - rect.right);
+        if (event.clientY <= rect.top)
+            sy = -dragScrollSpeed(rect.top - event.clientY);
+        else if (event.clientY >= rect.bottom)
+            sy = dragScrollSpeed(event.clientY - rect.bottom);
+        this.setScrollSpeed(sx, sy);
     }
     up(event) {
         if (this.dragging == null)
@@ -3592,19 +3639,41 @@ class MouseSelection {
         this.destroy();
     }
     destroy() {
+        this.setScrollSpeed(0, 0);
         let doc = this.view.contentDOM.ownerDocument;
         doc.removeEventListener("mousemove", this.move);
         doc.removeEventListener("mouseup", this.up);
         this.view.inputState.mouseSelection = null;
     }
+    setScrollSpeed(sx, sy) {
+        this.scrollSpeed = { x: sx, y: sy };
+        if (sx || sy) {
+            if (this.scrolling < 0)
+                this.scrolling = setInterval(() => this.scroll(), 50);
+        }
+        else if (this.scrolling > -1) {
+            clearInterval(this.scrolling);
+            this.scrolling = -1;
+        }
+    }
+    scroll() {
+        if (this.scrollParent) {
+            this.scrollParent.scrollLeft += this.scrollSpeed.x;
+            this.scrollParent.scrollTop += this.scrollSpeed.y;
+        }
+        else {
+            this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+        }
+        if (this.dragging === false)
+            this.select(this.lastEvent);
+    }
     select(event) {
         let selection = this.style.get(event, this.extend, this.multiple);
         if (this.mustSelect || !selection.eq(this.view.state.selection) ||
             selection.main.assoc != this.view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
-                userEvent: "select.pointer",
-                scrollIntoView: true
+                userEvent: "select.pointer"
             });
         this.mustSelect = false;
     }
@@ -3795,23 +3864,15 @@ function getClickType(event) {
 function basicMouseSelection(view, event) {
     let start = queryPos(view, event), type = getClickType(event);
     let startSel = view.state.selection;
-    let last = start, lastEvent = event;
     return {
         update(update) {
             if (update.docChanged) {
                 start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
-                lastEvent = null;
             }
         },
         get(event, extend, multiple) {
-            let cur;
-            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-                cur = last;
-            else {
-                cur = last = queryPos(view, event);
-                lastEvent = event;
-            }
+            let cur = queryPos(view, event);
             let range = rangeForClick(view, cur.pos, cur.bias, type);
             if (start.pos != cur.pos && !extend) {
                 let startRange = rangeForClick(view, start.pos, start.bias, type);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "6.7.0",
+  "version": "6.7.1",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",