diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index fb0c24d91..afcdea4e1 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -531,6 +531,7 @@ let isDraggingScrollBar: boolean = false; let currentScrollBars: ScrollBars = { horizontal: null, vertical: null }; let touchTimeout = 0; let invalidateContextMenu = false; +let elementStartedMoving = false; /** * Map of youtube embed video states @@ -7900,6 +7901,31 @@ class App extends React.Component { !this.state.editingTextElement && this.state.activeEmbeddable?.state !== "active" ) { + + if(!this.state.editingLinearElement && !this.state.editingFrame && !this.state.resizingElement){ + + // this determines the threshold for dragging the element initially + const MOVEMENT_BUFFER = 4; + + // this calculates the buffer for the movement based on the zoom level + const ZOOM_RELETIVE_MOVEMENT_BUFFER = MOVEMENT_BUFFER / this.state.zoom.value; + + if(typeof(ZOOM_RELETIVE_MOVEMENT_BUFFER) === 'number'){ + + if ( + pointDistance( + pointFrom(pointerCoords.x, pointerCoords.y), + pointFrom(pointerDownState.origin.x, pointerDownState.origin.y), + ) < ZOOM_RELETIVE_MOVEMENT_BUFFER && !elementStartedMoving + ) { + return; + } + } + + // sets the elementStartedMoving to true so that the buffer is only used once + elementStartedMoving = true; + } + const dragOffset = { x: pointerCoords.x - pointerDownState.origin.x, y: pointerCoords.y - pointerDownState.origin.y, @@ -8408,6 +8434,9 @@ class App extends React.Component { isCropping, } = this.state; + // sets the elementStartedMoving to false so that the buffer can be used again + elementStartedMoving = false; + this.setState((prevState) => ({ isResizing: false, isRotating: false,