diff --git a/src/actions/actionFinalize.tsx b/src/actions/actionFinalize.tsx index 370c60978..038505925 100644 --- a/src/actions/actionFinalize.tsx +++ b/src/actions/actionFinalize.tsx @@ -34,7 +34,7 @@ export const actionFinalize = register({ ); } const selectedLinearElement = appState.selectedLinearElement - ? new LinearElementEditor(element, scene) + ? new LinearElementEditor(element, scene, appState) : null; return { elements: @@ -188,7 +188,7 @@ export const actionFinalize = register({ // To select the linear element when user has finished mutipoint editing selectedLinearElement: multiPointElement && isLinearElement(multiPointElement) - ? new LinearElementEditor(multiPointElement, scene) + ? new LinearElementEditor(multiPointElement, scene, appState) : appState.selectedLinearElement, pendingImageElementId: null, }, diff --git a/src/actions/actionSelectAll.ts b/src/actions/actionSelectAll.ts index 2adadd241..cc67a0168 100644 --- a/src/actions/actionSelectAll.ts +++ b/src/actions/actionSelectAll.ts @@ -35,7 +35,7 @@ export const actionSelectAll = register({ // single linear element selected Object.keys(selectedElementIds).length === 1 && isLinearElement(elements[0]) - ? new LinearElementEditor(elements[0], app.scene) + ? new LinearElementEditor(elements[0], app.scene, appState) : null, editingGroupId: null, selectedElementIds, diff --git a/src/components/App.tsx b/src/components/App.tsx index 23132eb68..f6d7f8915 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1083,6 +1083,20 @@ class App extends React.Component { this.refreshDeviceState(this.excalidrawContainerRef.current); } + if ( + this.state.selectedLinearElement && + prevState.zoom !== this.state.zoom + ) { + const selectedLinearElement = + LinearElementEditor.updateVisiblePointIndexes( + this.state.selectedLinearElement, + this.state, + ); + this.setState({ + selectedLinearElement, + }); + } + if ( prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY @@ -1907,6 +1921,7 @@ class App extends React.Component { editingLinearElement: new LinearElementEditor( selectedElements[0], this.scene, + this.state, true, ), }); @@ -2486,6 +2501,7 @@ class App extends React.Component { editingLinearElement: new LinearElementEditor( selectedElements[0], this.scene, + this.state, true, ), }); @@ -4481,6 +4497,7 @@ class App extends React.Component { ? new LinearElementEditor( elementsWithinSelection[0], this.scene, + this.state, ) : null, }, @@ -4745,6 +4762,7 @@ class App extends React.Component { selectedLinearElement: new LinearElementEditor( draggingElement, this.scene, + this.state, ), })); } else { @@ -4812,6 +4830,7 @@ class App extends React.Component { selectedLinearElement: new LinearElementEditor( hitElement, this.scene, + this.state, ), }); } @@ -4914,6 +4933,7 @@ class App extends React.Component { ? new LinearElementEditor( newSelectedElements[0], this.scene, + this.state, ) : prevState.selectedLinearElement, }, @@ -4942,7 +4962,11 @@ class App extends React.Component { // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1. // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized prevState.selectedLinearElement?.elementId !== hitElement.id - ? new LinearElementEditor(hitElement, this.scene) + ? new LinearElementEditor( + hitElement, + this.scene, + this.state, + ) : prevState.selectedLinearElement, }, this.scene.getNonDeletedElements(), @@ -5702,7 +5726,7 @@ class App extends React.Component { ...this.state, selectedElementIds: { [element.id]: true }, selectedLinearElement: isLinearElement(element) - ? new LinearElementEditor(element, this.scene) + ? new LinearElementEditor(element, this.scene, this.state) : null, }, this.scene.getNonDeletedElements(), diff --git a/src/element/linearElementEditor.ts b/src/element/linearElementEditor.ts index e14925991..3eabcfa48 100644 --- a/src/element/linearElementEditor.ts +++ b/src/element/linearElementEditor.ts @@ -57,6 +57,7 @@ export class LinearElementEditor { constructor( element: NonDeleted, scene: Scene, + appState: AppState, editingLinearElement = false, ) { this.elementId = element.id as string & { @@ -79,6 +80,7 @@ export class LinearElementEditor { this.midPointHovered = false; this.visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes( element, + appState, editingLinearElement, ); } @@ -419,6 +421,7 @@ export class LinearElementEditor { static getVisiblePointIndexes( element: NonDeleted, + appState: AppState, editingLinearElement: boolean, ) { if (!element) { @@ -429,12 +432,9 @@ export class LinearElementEditor { element.points.forEach((point, index) => { let distance = Infinity; if (previousPoint) { - distance = distance2d( - point[0], - point[1], - previousPoint[0], - previousPoint[1], - ); + distance = + distance2d(point[0], point[1], previousPoint[0], previousPoint[1]) * + appState.zoom.value; } const isExtremePoint = index === 0 || index === element.points.length - 1; if ( @@ -448,6 +448,25 @@ export class LinearElementEditor { }); return visiblePointIndexes; } + + static updateVisiblePointIndexes( + linearElementEditor: LinearElementEditor, + appState: AppState, + ) { + const { elementId } = linearElementEditor; + const element = LinearElementEditor.getElement(elementId); + if (!element) { + return linearElementEditor; + } + return { + ...linearElementEditor, + visiblePointIndexes: LinearElementEditor.getVisiblePointIndexes( + element, + appState, + false, + ), + }; + } static handlePointerDown( event: React.PointerEvent, appState: AppState, @@ -537,6 +556,7 @@ export class LinearElementEditor { ), visiblePointIndexes: LinearElementEditor.getVisiblePointIndexes( element, + appState, true, ), }; @@ -612,6 +632,7 @@ export class LinearElementEditor { if (ret.didAddPoint) { const visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes( element, + appState, !!appState.editingLinearElement, ); ret.linearElementEditor = {