diff --git a/src/components/App.tsx b/src/components/App.tsx index 12ec41839..04338a8ea 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1876,7 +1876,7 @@ class App extends React.Component { if ( this.state.editingLinearElement && - this.state.editingLinearElement.draggingElementPointIndex === null + !this.state.editingLinearElement.isDragging ) { const editingLinearElement = LinearElementEditor.handlePointerMove( event, diff --git a/src/element/linearElementEditor.ts b/src/element/linearElementEditor.ts index b24ba1b4d..4b93aa440 100644 --- a/src/element/linearElementEditor.ts +++ b/src/element/linearElementEditor.ts @@ -17,7 +17,8 @@ export class LinearElementEditor { _brand: "excalidrawLinearElementId"; }; public activePointIndex: number | null; - public draggingElementPointIndex: number | null; + /** whether you're dragging a point */ + public isDragging: boolean; public lastUncommittedPoint: Point | null; constructor(element: NonDeleted, scene: Scene) { @@ -29,7 +30,7 @@ export class LinearElementEditor { this.activePointIndex = null; this.lastUncommittedPoint = null; - this.draggingElementPointIndex = null; + this.isDragging = false; } // --------------------------------------------------------------------------- @@ -63,38 +64,22 @@ export class LinearElementEditor { return false; } const { editingLinearElement } = appState; - let { draggingElementPointIndex, elementId } = editingLinearElement; + const { activePointIndex, elementId, isDragging } = editingLinearElement; const element = LinearElementEditor.getElement(elementId); if (!element) { return false; } - const clickedPointIndex = - draggingElementPointIndex ?? - LinearElementEditor.getPointIndexUnderCursor( - element, - appState.zoom, - scenePointerX, - scenePointerY, - ); - - draggingElementPointIndex = draggingElementPointIndex ?? clickedPointIndex; - if (draggingElementPointIndex > -1) { - if ( - editingLinearElement.draggingElementPointIndex !== - draggingElementPointIndex || - editingLinearElement.activePointIndex !== clickedPointIndex - ) { + if (activePointIndex != null && activePointIndex > -1) { + if (isDragging === false) { setState({ editingLinearElement: { ...editingLinearElement, - draggingElementPointIndex, - activePointIndex: clickedPointIndex, + isDragging: true, }, }); } - const [deltaX, deltaY] = rotate( scenePointerX - lastX, scenePointerY - lastY, @@ -102,8 +87,8 @@ export class LinearElementEditor { 0, -element.angle, ); - const targetPoint = element.points[clickedPointIndex]; - LinearElementEditor.movePoint(element, clickedPointIndex, [ + const targetPoint = element.points[activePointIndex]; + LinearElementEditor.movePoint(element, activePointIndex, [ targetPoint[0] + deltaX, targetPoint[1] + deltaY, ]); @@ -115,30 +100,30 @@ export class LinearElementEditor { static handlePointerUp( editingLinearElement: LinearElementEditor, ): LinearElementEditor { - const { elementId, draggingElementPointIndex } = editingLinearElement; + const { elementId, activePointIndex, isDragging } = editingLinearElement; const element = LinearElementEditor.getElement(elementId); if (!element) { return editingLinearElement; } if ( - draggingElementPointIndex !== null && - (draggingElementPointIndex === 0 || - draggingElementPointIndex === element.points.length - 1) && + isDragging && + (activePointIndex === 0 || + activePointIndex === element.points.length - 1) && isPathALoop(element.points) ) { LinearElementEditor.movePoint( element, - draggingElementPointIndex, - draggingElementPointIndex === 0 + activePointIndex, + activePointIndex === 0 ? element.points[element.points.length - 1] : element.points[0], ); } - if (draggingElementPointIndex !== null) { + if (isDragging) { return { ...editingLinearElement, - draggingElementPointIndex: null, + isDragging: false, }; } return editingLinearElement;