fix: LSDV-4708: Scroll page to canvas only if needed (#1268)

* fix: LSDV-4708: Scroll page to canvas only if needed

If canvas is already in the viewport, don't scroll the page!

* Scroll only if image region is not visible

scrollIntoViewIfNeeded scolls even if it's not really needed :(

* Add comments; fix zoomed image; add smooth

- hard to calculate region position on zoomed image and it can be hidden,
  so don't scroll if image is zoomed in
- add behavior: smooth for better UX

* Improve scroll to region

* Huge improvement for zoomed and huge images

Zoomed in images makes it hard to calculate region bboxes,
so we are trying to make the whole image visible enough.

* Rename method for better readability

---------

Co-authored-by: yyassi-heartex <[email protected]>

Author: hlomzik

src/mixins/KonvaRegion.js

@@ -45,6 +45,57 @@ export const KonvaRegionMixin = types.model({})
           self.updateImageSize?.(width / naturalWidth, height / naturalHeight, width, height);
         }
       },
+
+      selectRegion() {
+        self.scrollToRegion();
+      },
+
+      /**
+       * Scrolls to region if possible or scrolls to whole image if needed
+       */
+      scrollToRegion() {
+        const zoomedIn = self.object.zoomScale > 1;
+        const canvas = self.shapeRef?.parent?.canvas?._canvas;
+        let viewport = canvas;
+
+        // `.lsf-main-content` is the main scrollable container for LSF
+        while (viewport && !viewport.scrollTop && !viewport.className.includes('main-content')) {
+          viewport = viewport.parentElement;
+        }
+        if (!viewport) return;
+
+        // minimum percent of region area to consider it visible
+        const VISIBLE_AREA = 0.6;
+        // infobar is positioned absolutely, covering part of UI
+        const INFOBAR_HEIGHT = 36;
+
+        const vBBox = viewport.getBoundingClientRect();
+        const cBBox = canvas.getBoundingClientRect();
+        // bbox inside canvas; for zoomed images calculations are tough,
+        // so we use the whole image so it should be visible enough at the end
+        const rBBox = zoomedIn ? { top: 0, bottom: cBBox.height } : self.bboxCoordsCanvas;
+        const height = rBBox.bottom - rBBox.top;
+        // comparing the closest point of region from top or bottom image edge
+        // and how deep is this edge hidden behind respective edge of viewport
+        const overTop = rBBox.top - (vBBox.top - cBBox.top);
+        const overBottom = (canvas.clientHeight - rBBox.bottom) - (cBBox.bottom - vBBox.bottom) - INFOBAR_HEIGHT;
+        // huge images should be scrolled to the closest edge, not to hidden one
+        const isHuge = zoomedIn && canvas.clientHeight > viewport.clientHeight;
+
+        // huge region or image cut off by viewport edges — do nothing
+        if (overTop < 0 && overBottom < 0) return;
+
+        if (overTop < 0 && -overTop / height > (1 - VISIBLE_AREA)) {
+          // if image is still visible enough — don't scroll
+          if (zoomedIn && (cBBox.bottom - vBBox.top) / viewport.clientHeight > (1 - VISIBLE_AREA)) return;
+          viewport.scrollBy({ top: isHuge ? -overBottom : overTop, left: 0, behavior: 'smooth' });
+        } else if (overBottom < 0 && -overBottom / height > (1 - VISIBLE_AREA)) {
+          // if image is still visible enough — don't scroll
+          if (zoomedIn && (vBBox.bottom - cBBox.top) / viewport.clientHeight > (1 - VISIBLE_AREA)) return;
+          viewport.scrollBy({ top: isHuge ? overTop : -overBottom, left: 0, behavior: 'smooth' });
+        }
+      },
+
       onClickRegion(e) {
         const annotation = self.annotation;
         const ev = e?.evt || e;

src/stores/RegionStore.js

@@ -124,9 +124,6 @@ const SelectionMap = types.model(
     highlight(region) {
       self.clear();
       self.select(region);
-
-      if (region?.type === 'polygonregion') return;
-      region?.shapeRef?.parent?.canvas?._canvas?.scrollIntoView?.();
     },
   };
 });