scrollZones

Author: Vinogradov Victor

dist/editor.js

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.11.2
+
+- `Fix` *RectangeSelection* — Redesign of the scrolling zones
+
 ### 2.11.1
 
 - `Fix` *RectangeSelection* — Selection is available only for the main mouse button

docs/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

package.json

@@ -36,7 +36,7 @@ export default class RectangleSelection extends Module {
   /**
    *  Speed of Scrolling
    */
-  private readonly SCROLL_SPEED: number = 3;
+  private readonly SCROLL_SPEED: number = 1;
 
   /**
    *  Height of scroll zone on boundary of screen
@@ -87,45 +87,22 @@ export default class RectangleSelection extends Module {
    */
   private overlayRectangle: HTMLDivElement;
 
-  /**
-   * Coords of redactor
-   */
-  private left;
-  private top;
-
   /**
    * Module Preparation
    * Creating rect and hang handlers
    */
   public prepare(): void {
     const {Listeners} = this.Editor;
-    const {overlayTopScrollZone, overlayBottomScrollZone, container, overlay} = this.genHTML();
-
-    Listeners.on(overlayBottomScrollZone, 'mouseenter', (event) => {
-      this.inScrollZone = this.BOTTOM_SCROLL_ZONE;
-      this.scrollVertical(this.SCROLL_SPEED);
-    });
-
-    Listeners.on(overlayTopScrollZone, 'mouseenter', (event) => {
-      this.inScrollZone = this.TOP_SCROLL_ZONE;
-      this.scrollVertical(-this.SCROLL_SPEED);
-    });
-
-    Listeners.on(overlayBottomScrollZone, 'mouseleave', (event) => {
-      this.inScrollZone = null;
-    });
-
-    Listeners.on(overlayTopScrollZone, 'mouseleave', (event) => {
-      this.inScrollZone = null;
-    });
+    const {container, overlay} = this.genHTML();
 
     Listeners.on(container, 'mousedown', (event: MouseEvent) => {
       if (event.button !== this.MAIN_MOUSE_BUTTON) { return; }
       this.startSelection(event.pageX, event.pageY);
     }, false);
 
-    Listeners.on(document.body, 'mousemove', (event) => {
+    Listeners.on(document.body, 'mousemove', (event: MouseEvent) => {
       this.changingRectangle(event);
+      this.scrollByZones(event.clientY);
     }, false);
 
     Listeners.on(document.body, 'mouseleave', (event) => {
@@ -135,6 +112,7 @@ export default class RectangleSelection extends Module {
 
     Listeners.on(window, 'scroll', (event) => {
       this.changingRectangle(event);
+      this.scrollByZones(null);
     }, false);
 
     Listeners.on(document.body, 'mouseup', (event) => {
@@ -188,24 +166,40 @@ export default class RectangleSelection extends Module {
     this.isRectSelectionActivated = false;
   }
 
+  /**
+   * Scroll If mouse in scroll zone
+   * @param {number} clientY - Y coord of mouse
+   */
+  private scrollByZones(clientY) {
+    // Может быть 0
+    if (clientY !== null) {
+      this.inScrollZone = null;
+      if (clientY <= this.HEIGHT_OF_SCROLL_ZONE) {
+        this.inScrollZone = this.TOP_SCROLL_ZONE;
+      }
+      if (document.documentElement.clientHeight - clientY <= this.HEIGHT_OF_SCROLL_ZONE) {
+        this.inScrollZone = this.BOTTOM_SCROLL_ZONE;
+      }
+    }
+    if (!this.inScrollZone) {
+      return;
+    }
+
+    this.scrollVertical(this.inScrollZone === this.TOP_SCROLL_ZONE ? -this.SCROLL_SPEED : this.SCROLL_SPEED);
+  }
+
   private genHTML() {
     const container = document.querySelector('.' + UI.CSS.editorWrapper);
     const overlay = $.make('div', RectangleSelection.CSS.overlay, {});
     const overlayContainer = $.make('div', RectangleSelection.CSS.overlayContainer, {});
     const overlayRectangle = $.make('div', RectangleSelection.CSS.rect, {});
-    const overlayTopScrollZone = $.make('div', RectangleSelection.CSS.topScrollZone, {});
-    const overlayBottomScrollZone = $.make('div', RectangleSelection.CSS.bottomScrollZone, {});
 
     overlayContainer.appendChild(overlayRectangle);
     overlay.appendChild(overlayContainer);
-    document.body.appendChild(overlayTopScrollZone);
-    document.body.appendChild(overlayBottomScrollZone);
     container.appendChild(overlay);
 
     this.overlayRectangle = overlayRectangle as HTMLDivElement;
     return {
-      overlayBottomScrollZone,
-      overlayTopScrollZone,
       container,
       overlay,
     };

src/components/modules/rectangleSelection.ts

@@ -85,28 +85,6 @@
        background-color: rgba(46, 170, 220, 0.2);
        border: 1px solid transparent;
     }
-
-     &__scroll-zone {
-
-
-        &--top {
-           top: 0;
-           width: 100%;
-           height: 30px;
-           position: fixed;
-           pointer-events: auto;
-           z-index: 10500;
-         }
-
-        &--bottom {
-           bottom: 0;
-           width: 100%;
-           height: 30px;
-           position: fixed;
-           pointer-events: auto;
-           z-index: 10500;
-          }
-      }
   }
 
   svg {