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

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

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

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!
);
if (isElbowArrow(firstSelectedLinear)) {
if (editor.segmentMidPointHoveredCoords) {
renderElbowArrowMidPointHighlight(context, appState);
} else if (
editor.hoverPointIndex !== 0 &&
editor.hoverPointIndex !== firstSelectedLinear.points.length - 1
) {
renderLinearElementPointHighlight(context, appState, elementsMap);
}
} else if (editor.hoverPointIndex >= 0) {
if (editor.segmentMidPointHoveredCoords) {
renderElbowArrowMidPointHighlight(context, appState);
} else if (
isElbowArrow(firstSelectedLinear)
? editor.hoverPointIndex === 0 ||
editor.hoverPointIndex === firstSelectedLinear.points.length - 1
: editor.hoverPointIndex >= 0
) {
renderLinearElementPointHighlight(context, appState, elementsMap);
}
}