smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix point highlights

Browse source
This commit is contained in:
Mark Tolmacs 2025-03-16 15:56:07 +01:00
parent ee68dc3f1c
commit 9a02671c3f
3 changed files with 48 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

33
packages/excalidraw/components/App.tsx
View file

@ -8148,6 +8148,7 @@ class App extends React.Component<AppProps, AppState> {
...this.state.selectedLinearElement, ...this.state.selectedLinearElement,
pointerDownState: ret.pointerDownState, pointerDownState: ret.pointerDownState,
selectedPointsIndices: ret.selectedPointsIndices, selectedPointsIndices: ret.selectedPointsIndices,
segmentMidPointHoveredCoords: null,
}, },
}); });
} }
@ -8157,6 +8158,7 @@ class App extends React.Component<AppProps, AppState> {
...this.state.editingLinearElement, ...this.state.editingLinearElement,
pointerDownState: ret.pointerDownState, pointerDownState: ret.pointerDownState,
selectedPointsIndices: ret.selectedPointsIndices, selectedPointsIndices: ret.selectedPointsIndices,
segmentMidPointHoveredCoords: null,
}, },
}); });
} }
@ -8170,7 +8172,7 @@ class App extends React.Component<AppProps, AppState> {
return; return;
} }
const didDrag = LinearElementEditor.handlePointDragging( const newLinearElementEditor = LinearElementEditor.handlePointDragging(
event, event,
this, this,
pointerCoords.x, pointerCoords.x,
@ -8184,29 +8186,18 @@ class App extends React.Component<AppProps, AppState> {
linearElementEditor, linearElementEditor,
this.scene, this.scene,
); );
if (didDrag) { if (newLinearElementEditor) {
pointerDownState.lastCoords.x = pointerCoords.x; pointerDownState.lastCoords.x = pointerCoords.x;
pointerDownState.lastCoords.y = pointerCoords.y; pointerDownState.lastCoords.y = pointerCoords.y;
pointerDownState.drag.hasOccurred = true; pointerDownState.drag.hasOccurred = true;
if (
this.state.editingLinearElement && this.setState({
!this.state.editingLinearElement.isDragging editingLinearElement: this.state.editingLinearElement
) { ? newLinearElementEditor
this.setState({ : null,
editingLinearElement: { selectedLinearElement: newLinearElementEditor,
...this.state.editingLinearElement, });
isDragging: true,
},
});
}
if (!this.state.selectedLinearElement.isDragging) {
this.setState({
selectedLinearElement: {
...this.state.selectedLinearElement,
isDragging: true,
},
});
}
return; return;
} }
} }

51
packages/excalidraw/element/linearElementEditor.ts
View file

@ -232,15 +232,15 @@ export class LinearElementEditor {
) => void, ) => void,
linearElementEditor: LinearElementEditor, linearElementEditor: LinearElementEditor,
scene: Scene, scene: Scene,
): boolean { ): LinearElementEditor | null {
if (!linearElementEditor) { if (!linearElementEditor) {
return false; return null;
} }
const { elementId } = linearElementEditor; const { elementId } = linearElementEditor;
const elementsMap = scene.getNonDeletedElementsMap(); const elementsMap = scene.getNonDeletedElementsMap();
const element = LinearElementEditor.getElement(elementId, elementsMap); const element = LinearElementEditor.getElement(elementId, elementsMap);
if (!element) { if (!element) {
return false; return null;
} }
if ( if (
@ -248,24 +248,18 @@ export class LinearElementEditor {
!linearElementEditor.pointerDownState.lastClickedIsEndPoint && !linearElementEditor.pointerDownState.lastClickedIsEndPoint &&
linearElementEditor.pointerDownState.lastClickedPoint !== 0 linearElementEditor.pointerDownState.lastClickedPoint !== 0
) { ) {
return false; return null;
} }
const selectedPointsIndices = isElbowArrow(element) const selectedPointsIndices = isElbowArrow(element)
? linearElementEditor.selectedPointsIndices ? [
?.reduce( !!linearElementEditor.selectedPointsIndices?.includes(0)
(startEnd, index) => ? 0
(index === 0 : undefined,
? [0, startEnd[1]] !!linearElementEditor.selectedPointsIndices?.find((idx) => idx > 0)
: [startEnd[0], element.points.length - 1]) as [ ? element.points.length - 1
boolean | number, : undefined,
boolean | number, ].filter((idx): idx is number => idx !== undefined)
],
[false, false] as [number | boolean, number | boolean],
)
.filter(
(idx: number | boolean): idx is number => typeof idx === "number",
)
: linearElementEditor.selectedPointsIndices; : linearElementEditor.selectedPointsIndices;
const lastClickedPoint = isElbowArrow(element) const lastClickedPoint = isElbowArrow(element)
? linearElementEditor.pointerDownState.lastClickedPoint > 0 ? linearElementEditor.pointerDownState.lastClickedPoint > 0
@ -274,9 +268,7 @@ export class LinearElementEditor {
: linearElementEditor.pointerDownState.lastClickedPoint; : linearElementEditor.pointerDownState.lastClickedPoint;
// point that's being dragged (out of all selected points) // point that's being dragged (out of all selected points)
const draggingPoint = element.points[lastClickedPoint] as const draggingPoint = element.points[lastClickedPoint];
| [number, number]
| undefined;
if (selectedPointsIndices && draggingPoint) { if (selectedPointsIndices && draggingPoint) {
if ( if (
@ -384,10 +376,23 @@ export class LinearElementEditor {
} }
} }
return true; return {
...linearElementEditor,
selectedPointsIndices,
segmentMidPointHoveredCoords:
lastClickedPoint !== 0 &&
lastClickedPoint !== element.points.length - 1
? this.getPointGlobalCoordinates(
element,
draggingPoint,
elementsMap,
)
: null,
isDragging: true,
};
} }
return false; return null;
} }
static handlePointerUp( static handlePointerUp(

18
packages/excalidraw/renderer/interactiveScene.ts
View file

@ -907,16 +907,14 @@ const _renderInteractiveScene = ({
(el) => el.id === editor.elementId, // Don't forget bound text elements! (el) => el.id === editor.elementId, // Don't forget bound text elements!
); );
if (isElbowArrow(firstSelectedLinear)) { if (editor.segmentMidPointHoveredCoords) {
if (editor.segmentMidPointHoveredCoords) { renderElbowArrowMidPointHighlight(context, appState);
renderElbowArrowMidPointHighlight(context, appState); } else if (
} else if ( isElbowArrow(firstSelectedLinear)
editor.hoverPointIndex !== 0 && ? editor.hoverPointIndex === 0 ||
editor.hoverPointIndex !== firstSelectedLinear.points.length - 1 editor.hoverPointIndex === firstSelectedLinear.points.length - 1
) { : editor.hoverPointIndex >= 0
renderLinearElementPointHighlight(context, appState, elementsMap); ) {
}
} else if (editor.hoverPointIndex >= 0) {
renderLinearElementPointHighlight(context, appState, elementsMap); renderLinearElementPointHighlight(context, appState, elementsMap);
} }
} }