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

feat: show a mid point for linear elements (#5534)

Browse source 
* feat: Add a mid point for linear elements

* fix tests

* show mid point only on hover

* hacky fix :(

* don't add mid points if present and only add outside editor

* improve styling and always show phantom point instead of just on hover

* fix tests

* fix

* only add polyfill for test

* add hover state for phantom point

* fix tests

* fix

* Add Array.at polyfill

* reuse `centerPoint()` helper

* reuse `distance2d`

* use `Point` type

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2022-08-11 20:16:25 +05:30 • committed by GitHub
parent 731093f631
commit 5a8dbe8030
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 266 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/App.tsx
View file

@ -1,5 +1,6 @@
import React, { useContext } from "react";
import { flushSync } from "react-dom";
import { RoughCanvas } from "roughjs/bin/canvas";
import rough from "roughjs/bin/rough";
import clsx from "clsx";
@ -3030,6 +3031,7 @@ class App extends React.Component<AppProps, AppState> {
}
if (this.state.selectedLinearElement) {
let hoverPointIndex = -1;
let midPointHovered = false;
if (
isHittingElementNotConsideringBoundingBox(element, this.state, [
scenePointerX,
@ -3042,7 +3044,13 @@ class App extends React.Component<AppProps, AppState> {
scenePointerX,
scenePointerY,
);
if (hoverPointIndex >= 0) {
midPointHovered = LinearElementEditor.isHittingMidPoint(
linearElementEditor,
{ x: scenePointerX, y: scenePointerY },
this.state,
);
if (hoverPointIndex >= 0 || midPointHovered) {
setCursor(this.canvas, CURSOR_TYPE.POINTER);
} else {
setCursor(this.canvas, CURSOR_TYPE.MOVE);
@ -3069,6 +3077,17 @@ class App extends React.Component<AppProps, AppState> {
},
});
}
if (
this.state.selectedLinearElement.midPointHovered !== midPointHovered
) {
this.setState({
selectedLinearElement: {
...this.state.selectedLinearElement,
midPointHovered,
},
});
}
} else {
setCursor(this.canvas, CURSOR_TYPE.AUTO);
}
@ -3623,7 +3642,7 @@ class App extends React.Component<AppProps, AppState> {
this.setState({ editingLinearElement: ret.linearElementEditor });
}
}
if (ret.didAddPoint) {
if (ret.didAddPoint && !ret.isMidPoint) {
return true;
}
}
@ -4112,6 +4131,7 @@ class App extends React.Component<AppProps, AppState> {
// to ensure we don't create a 2-point arrow by mistake when
// user clicks mouse in a way that it moves a tiny bit (thus
// triggering pointermove)
if (
!pointerDownState.drag.hasOccurred &&
(this.state.activeTool.type === "arrow" ||
@ -4128,7 +4148,6 @@ class App extends React.Component<AppProps, AppState> {
return;
}
}
if (pointerDownState.resize.isResizing) {
pointerDownState.lastCoords.x = pointerCoords.x;
pointerDownState.lastCoords.y = pointerCoords.y;
@ -4339,8 +4358,10 @@ class App extends React.Component<AppProps, AppState> {
}
if (points.length === 1) {
mutateElement(draggingElement, { points: [...points, [dx, dy]] });
} else if (points.length > 1) {
mutateElement(draggingElement, {
points: [...points, [dx, dy]],
});
} else if (points.length === 2) {
mutateElement(draggingElement, {
points: [...points.slice(0, -1), [dx, dy]],
});
@ -6202,4 +6223,5 @@ if (
},
});
}
export default App;