Explorar el Código

[editor] Automatically close the Autocompleter Vue component on scroll

Johan Ahlen hace 5 años
padre
commit
5df0e65886

+ 26 - 25
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/autocomplete/AceAutocomplete.vue

@@ -129,13 +129,16 @@
     @Prop({ required: false, default: false })
     temporaryOnly?: boolean;
 
+    startLayout: DOMRect | null = null;
+    startPixelRatio = window.devicePixelRatio;
+    left = 0;
+    top = 0;
+
     loading = false;
     active = false;
     filter = '';
     availableCategories = [Category.All];
     activeCategory = Category.All;
-    left = 0;
-    top = 0;
     selectedIndex: number | null = null;
     hoveredIndex: number | null = null;
     base: Ace.Anchor | null = null;
@@ -150,7 +153,7 @@
     keyboardHandler: Ace.HashHandler | null = null;
     changeListener: (() => void) | null = null;
     mousedownListener = this.detach.bind(this);
-    mousewheelListener = this.detach.bind(this);
+    mousewheelListener = this.closeOnScroll.bind(this);
     subTracker = new SubscriptionTracker();
 
     created(): void {
@@ -535,10 +538,29 @@
       this.editor.focus();
     }
 
+    closeOnScroll(): void {
+      if (!this.active || !this.startLayout) {
+        return;
+      }
+      const newLayout = this.editor.container.getBoundingClientRect();
+      const yDiff = newLayout.top - this.startLayout.top;
+      const xDiff = newLayout.left - this.startLayout.left;
+      if (this.startPixelRatio !== window.devicePixelRatio) {
+        // Ignore zoom changes
+        this.startLayout = newLayout;
+      } else if (Math.abs(yDiff) > 10 || Math.abs(xDiff) > 10) {
+        // Close if scroll more than 10px in any direction
+        this.detach();
+      }
+    }
+
     attach(): void {
       this.updateFilter();
       this.disposeEventHandlers();
 
+      this.startLayout = this.editor.container.getBoundingClientRect();
+      this.startPixelRatio = window.devicePixelRatio;
+
       if (this.keyboardHandler) {
         this.editor.keyBinding.addKeyboardHandler(this.keyboardHandler);
       }
@@ -547,28 +569,7 @@
       }
       this.editor.on('mousedown', this.mousedownListener);
       this.editor.on('mousewheel', this.mousewheelListener);
-
-      let currentOffset = {
-        top: this.editor.container.offsetTop,
-        left: this.editor.container.offsetLeft
-      };
-      let currentPixelRatio = window.devicePixelRatio; // Detect zoom changes
-
-      this.positionInterval = window.setInterval(() => {
-        const newOffset = {
-          top: this.editor.container.offsetTop,
-          left: this.editor.container.offsetLeft
-        };
-        if (currentPixelRatio !== window.devicePixelRatio) {
-          currentOffset = newOffset;
-          currentPixelRatio = window.devicePixelRatio;
-        } else if (
-          Math.abs(newOffset.top - currentOffset.top) > 20 ||
-          Math.abs(newOffset.left - currentOffset.left) > 20
-        ) {
-          this.detach();
-        }
-      }, 300);
+      this.positionInterval = window.setInterval(this.closeOnScroll.bind(this), 300);
     }
 
     detach(): void {