#2427 – When moving a structure outside of the canvas, structure doe…

…s not move smoothly
epam · Apr 7, 2023 · f6d9d0f · f6d9d0f
1 parent 2167ff5
commit f6d9d0f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 15 deletions.
diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts
@@ -43,6 +43,7 @@ import { getGroupIdsFromItemArrays } from './helper/getGroupIdsFromItems'
 import { getMergeItems } from './helper/getMergeItems'
 import { updateSelectedAtoms } from 'src/script/ui/state/modal/atoms'
 import {
+  getDirections,
   isCloseToEdgeOfCanvas,
   isCloseToEdgeOfScreen,
   scrollByVector,
@@ -213,7 +214,7 @@ class SelectTool {
       editor.hover(getHoverToFuse(dragCtx.mergeItems))
 
       extendCanvas(rnd, event)
-      editor.update(dragCtx.action, true)
+      editor.update(dragCtx.action, true, { extendCanvas: false })
       return true
     }
 
@@ -478,47 +479,49 @@ function extendCanvas(render, event) {
     isCloseToRightEdgeOfScreen,
     isCloseToBottomEdgeOfScreen
   } = isCloseToEdgeOfScreen(event)
+  const { isMovingLeft, isMovingRight, isMovingTop, isMovingBottom } =
+    getDirections(event)
 
-  if (isCloseToLeftEdgeOfCanvas) {
+  if (isCloseToLeftEdgeOfCanvas && isMovingLeft) {
     shiftAndExtendCanvasByVector(new Vec2(-offset, 0, 0), render)
   }
 
-  if (isCloseToTopEdgeOfCanvas) {
+  if (isCloseToTopEdgeOfCanvas && isMovingTop) {
     shiftAndExtendCanvasByVector(new Vec2(0, -offset, 0), render)
   }
 
-  if (isCloseToRightEdgeOfCanvas) {
+  if (isCloseToRightEdgeOfCanvas && isMovingRight) {
     shiftAndExtendCanvasByVector(new Vec2(offset, 0, 0), render)
   }
 
-  if (isCloseToBottomEdgeOfCanvas) {
+  if (isCloseToBottomEdgeOfCanvas && isMovingBottom) {
     shiftAndExtendCanvasByVector(new Vec2(0, offset, 0), render)
   }
 
   const isCloseToSomeEdgeOfCanvas = [
-    isCloseToTopEdgeOfCanvas,
-    isCloseToRightEdgeOfCanvas,
-    isCloseToBottomEdgeOfCanvas,
-    isCloseToLeftEdgeOfCanvas
+    isCloseToTopEdgeOfCanvas && isMovingTop,
+    isCloseToRightEdgeOfCanvas && isMovingRight,
+    isCloseToBottomEdgeOfCanvas && isMovingBottom,
+    isCloseToLeftEdgeOfCanvas && isMovingLeft
   ].some((isCloseToEdge) => isCloseToEdge)
 
   if (isCloseToSomeEdgeOfCanvas) {
     return
   }
 
-  if (isCloseToTopEdgeOfScreen) {
+  if (isCloseToTopEdgeOfScreen && isMovingTop) {
     scrollByVector(new Vec2(0, -offset), render)
   }
 
-  if (isCloseToBottomEdgeOfScreen) {
+  if (isCloseToBottomEdgeOfScreen && isMovingBottom) {
     scrollByVector(new Vec2(0, offset), render)
   }
 
-  if (isCloseToLeftEdgeOfScreen) {
+  if (isCloseToLeftEdgeOfScreen && isMovingLeft) {
     scrollByVector(new Vec2(-offset, 0), render)
   }
 
-  if (isCloseToRightEdgeOfScreen) {
+  if (isCloseToRightEdgeOfScreen && isMovingRight) {
     scrollByVector(new Vec2(offset, 0), render)
   }
 }

diff --git a/packages/ketcher-react/src/script/editor/utils/canvasExtension.ts b/packages/ketcher-react/src/script/editor/utils/canvasExtension.ts
@@ -2,6 +2,21 @@ import { Vec2 } from 'ketcher-core'
 import _ from 'lodash'
 
 const edgeOffset = 150
+const scrollMultiplier = 2
+const moveDelta = 1
+let lastX = 0
+let lastY = 0
+
+export function getDirections(event) {
+  const { layerX, layerY } = event
+  const isMovingRight = layerX - lastX > moveDelta
+  const isMovingLeft = lastX - layerX > moveDelta
+  const isMovingTop = lastY - layerY > moveDelta
+  const isMovingBottom = layerY - lastY > moveDelta
+  lastX = layerX
+  lastY = layerY
+  return { isMovingRight, isMovingLeft, isMovingTop, isMovingBottom }
+}
 
 export function isCloseToEdgeOfScreen(event) {
   const { clientX, clientY } = event
@@ -68,6 +83,11 @@ export function shiftAndExtendCanvasByVector(vector: Vec2, render) {
     render.setPaperSize(render.sz.add(extensionVector))
     render.setOffset(render.options.offset.add(vector))
     render.ctab.translate(vector)
+    /**
+     * When canvas extends previous (0, 0) coordinates may become (100, 100)
+     */
+    lastX += extensionVector.x
+    lastY += extensionVector.y
   }
 
   scrollByVector(vector, render)
@@ -76,6 +96,6 @@ export function shiftAndExtendCanvasByVector(vector: Vec2, render) {
 
 export function scrollByVector(vector: Vec2, render) {
   const clientArea = render.clientArea
-  clientArea.scrollLeft += vector.x * render.options.scale
-  clientArea.scrollTop += vector.y * render.options.scale
+  clientArea.scrollLeft += (vector.x * render.options.scale) / scrollMultiplier
+  clientArea.scrollTop += (vector.y * render.options.scale) / scrollMultiplier
 }