sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: refactor event globals to differentiate from lastPointerUp (#7084)

Browse Source
This commit is contained in:
David Luzar 2023-10-04 16:18:22 +02:00 committed by GitHub
parent 8b838049df
commit fa33aa08ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/App.tsx
View File

@ -491,8 +491,9 @@ class App extends React.Component<AppProps, AppState> {
private iFrameRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement>(); private iFrameRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement>();
hitLinkElement?: NonDeletedExcalidrawElement; hitLinkElement?: NonDeletedExcalidrawElement;
lastPointerDown: React.PointerEvent<HTMLElement> | null = null; lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null;
lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null = null; lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
null;
lastViewportPosition = { x: 0, y: 0 }; lastViewportPosition = { x: 0, y: 0 };
constructor(props: AppProps) { constructor(props: AppProps) {
@ -3736,10 +3737,10 @@ class App extends React.Component<AppProps, AppState> {
isTouchScreen: boolean, isTouchScreen: boolean,
) => { ) => {
const draggedDistance = distance2d( const draggedDistance = distance2d(
this.lastPointerDown!.clientX, this.lastPointerDownEvent!.clientX,
this.lastPointerDown!.clientY, this.lastPointerDownEvent!.clientY,
this.lastPointerUp!.clientX, this.lastPointerUpEvent!.clientX,
this.lastPointerUp!.clientY, this.lastPointerUpEvent!.clientY,
); );
if ( if (
!this.hitLinkElement || !this.hitLinkElement ||
@ -3750,7 +3751,7 @@ class App extends React.Component<AppProps, AppState> {
return; return;
} }
const lastPointerDownCoords = viewportCoordsToSceneCoords( const lastPointerDownCoords = viewportCoordsToSceneCoords(
this.lastPointerDown!, this.lastPointerDownEvent!,
this.state, this.state,
); );
const lastPointerDownHittingLinkIcon = isPointHittingLink( const lastPointerDownHittingLinkIcon = isPointHittingLink(
@ -3760,7 +3761,7 @@ class App extends React.Component<AppProps, AppState> {
this.device.isMobile, this.device.isMobile,
); );
const lastPointerUpCoords = viewportCoordsToSceneCoords( const lastPointerUpCoords = viewportCoordsToSceneCoords(
this.lastPointerUp!, this.lastPointerUpEvent!,
this.state, this.state,
); );
const lastPointerUpHittingLinkIcon = isPointHittingLink( const lastPointerUpHittingLinkIcon = isPointHittingLink(
@ -4465,7 +4466,8 @@ class App extends React.Component<AppProps, AppState> {
return; return;
} }
this.lastPointerDown = event; this.lastPointerDownEvent = event;
this.setState({ this.setState({
lastPointerDownWith: event.pointerType, lastPointerDownWith: event.pointerType,
cursorButton: "down", cursorButton: "down",
@ -4605,14 +4607,14 @@ class App extends React.Component<AppProps, AppState> {
event: React.PointerEvent<HTMLCanvasElement>, event: React.PointerEvent<HTMLCanvasElement>,
) => { ) => {
this.removePointer(event); this.removePointer(event);
this.lastPointerUp = event; this.lastPointerUpEvent = event;
const scenePointer = viewportCoordsToSceneCoords( const scenePointer = viewportCoordsToSceneCoords(
{ clientX: event.clientX, clientY: event.clientY }, { clientX: event.clientX, clientY: event.clientY },
this.state, this.state,
); );
const clicklength = const clicklength =
event.timeStamp - (this.lastPointerDown?.timeStamp ?? 0); event.timeStamp - (this.lastPointerDownEvent?.timeStamp ?? 0);
if (this.device.isMobile && clicklength < 300) { if (this.device.isMobile && clicklength < 300) {
const hitElement = this.getElementAtPosition( const hitElement = this.getElementAtPosition(
scenePointer.x, scenePointer.x,
@ -5366,7 +5368,9 @@ class App extends React.Component<AppProps, AppState> {
const [gridX, gridY] = getGridPoint( const [gridX, gridY] = getGridPoint(
sceneX, sceneX,
sceneY, sceneY,
this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
? null
: this.state.gridSize,
); );
const embedLink = getEmbedLink(link); const embedLink = getEmbedLink(link);
@ -5416,7 +5420,9 @@ class App extends React.Component<AppProps, AppState> {
const [gridX, gridY] = getGridPoint( const [gridX, gridY] = getGridPoint(
sceneX, sceneX,
sceneY, sceneY,
this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
? null
: this.state.gridSize,
); );
const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@ -5593,7 +5599,9 @@ class App extends React.Component<AppProps, AppState> {
const [gridX, gridY] = getGridPoint( const [gridX, gridY] = getGridPoint(
pointerDownState.origin.x, pointerDownState.origin.x,
pointerDownState.origin.y, pointerDownState.origin.y,
this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
? null
: this.state.gridSize,
); );
const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@ -5651,7 +5659,9 @@ class App extends React.Component<AppProps, AppState> {
const [gridX, gridY] = getGridPoint( const [gridX, gridY] = getGridPoint(
pointerDownState.origin.x, pointerDownState.origin.x,
pointerDownState.origin.y, pointerDownState.origin.y,
this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
? null
: this.state.gridSize,
); );
const frame = newFrameElement({ const frame = newFrameElement({
@ -6773,17 +6783,17 @@ class App extends React.Component<AppProps, AppState> {
} }
if (isEraserActive(this.state)) { if (isEraserActive(this.state)) {
const draggedDistance = distance2d( const draggedDistance = distance2d(
this.lastPointerDown!.clientX, this.lastPointerDownEvent!.clientX,
this.lastPointerDown!.clientY, this.lastPointerDownEvent!.clientY,
this.lastPointerUp!.clientX, this.lastPointerUpEvent!.clientX,
this.lastPointerUp!.clientY, this.lastPointerUpEvent!.clientY,
); );
if (draggedDistance === 0) { if (draggedDistance === 0) {
const scenePointer = viewportCoordsToSceneCoords( const scenePointer = viewportCoordsToSceneCoords(
{ {
clientX: this.lastPointerUp!.clientX, clientX: this.lastPointerUpEvent!.clientX,
clientY: this.lastPointerUp!.clientY, clientY: this.lastPointerUpEvent!.clientY,
}, },
this.state, this.state,
); );
@ -7039,14 +7049,16 @@ class App extends React.Component<AppProps, AppState> {
if ( if (
hitElement && hitElement &&
this.lastPointerUp && this.lastPointerUpEvent &&
this.lastPointerDown && this.lastPointerDownEvent &&
this.lastPointerUp.timeStamp - this.lastPointerDown.timeStamp < 300 && this.lastPointerUpEvent.timeStamp -
this.lastPointerDownEvent.timeStamp <
300 &&
gesture.pointers.size <= 1 && gesture.pointers.size <= 1 &&
isEmbeddableElement(hitElement) && isEmbeddableElement(hitElement) &&
this.isEmbeddableCenter( this.isEmbeddableCenter(
hitElement, hitElement,
this.lastPointerUp, this.lastPointerUpEvent,
pointerDownState.origin.x, pointerDownState.origin.x,
pointerDownState.origin.y, pointerDownState.origin.y,
) )