mirror of
				https://github.com/excalidraw/excalidraw.git
				synced 2025-11-04 04:44:31 +01:00 
			
		
		
		
	fix: mobile link click (#4742)
* add tolerance to redirect pointerDown_Up check * Update src/components/App.tsx Co-authored-by: David Luzar <luzar.david@gmail.com> * Update App.tsx * lint * lint * fix for ipad/mobile * Update App.tsx * Update App.tsx * Update App.tsx * testing if isIPad works on iOS15 * Update App.tsx * Update keys.ts * Update keys.ts * lint * test * removed isTouchScreen * isTouchScreen * lint * lint * Update App.tsx * tweak Co-authored-by: David Luzar <luzar.david@gmail.com> Co-authored-by: ad1992 <aakansha1216@gmail.com>
This commit is contained in:
		@@ -2386,11 +2386,21 @@ class App extends React.Component<AppProps, AppState> {
 | 
			
		||||
    });
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  private redirectToLink = (event: React.PointerEvent<HTMLCanvasElement>) => {
 | 
			
		||||
  private redirectToLink = (
 | 
			
		||||
    event: React.PointerEvent<HTMLCanvasElement>,
 | 
			
		||||
    isTouchScreen: boolean,
 | 
			
		||||
  ) => {
 | 
			
		||||
    const draggedDistance = distance2d(
 | 
			
		||||
      this.lastPointerDown!.clientX,
 | 
			
		||||
      this.lastPointerDown!.clientY,
 | 
			
		||||
      this.lastPointerUp!.clientX,
 | 
			
		||||
      this.lastPointerUp!.clientY,
 | 
			
		||||
    );
 | 
			
		||||
    if (
 | 
			
		||||
      !this.hitLinkElement ||
 | 
			
		||||
      this.lastPointerDown!.clientX !== this.lastPointerUp!.clientX ||
 | 
			
		||||
      this.lastPointerDown!.clientY !== this.lastPointerUp!.clientY
 | 
			
		||||
      // For touch screen allow dragging threshold else strict check
 | 
			
		||||
      (isTouchScreen && draggedDistance > DRAGGING_THRESHOLD) ||
 | 
			
		||||
      (!isTouchScreen && draggedDistance !== 0)
 | 
			
		||||
    ) {
 | 
			
		||||
      return;
 | 
			
		||||
    }
 | 
			
		||||
@@ -2888,7 +2898,8 @@ class App extends React.Component<AppProps, AppState> {
 | 
			
		||||
    event: React.PointerEvent<HTMLCanvasElement>,
 | 
			
		||||
  ) => {
 | 
			
		||||
    this.lastPointerUp = event;
 | 
			
		||||
    if (this.isMobile) {
 | 
			
		||||
    const isTouchScreen = ["pen", "touch"].includes(event.pointerType);
 | 
			
		||||
    if (isTouchScreen) {
 | 
			
		||||
      const scenePointer = viewportCoordsToSceneCoords(
 | 
			
		||||
        { clientX: event.clientX, clientY: event.clientY },
 | 
			
		||||
        this.state,
 | 
			
		||||
@@ -2906,7 +2917,7 @@ class App extends React.Component<AppProps, AppState> {
 | 
			
		||||
      this.hitLinkElement &&
 | 
			
		||||
      !this.state.selectedElementIds[this.hitLinkElement.id]
 | 
			
		||||
    ) {
 | 
			
		||||
      this.redirectToLink(event);
 | 
			
		||||
      this.redirectToLink(event, isTouchScreen);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    this.removePointer(event);
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user