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

feat: Make whole element clickable in view mode when it has hyperlink (#4735)

Browse Source 
* feat: Make whole element clickable in view mode when it has hyperlink

* redirect to link if pointerup and pointer down is exactly same point

* don't make element clickable in mobile
This commit is contained in:
Aakansha Doshi 2022-02-07 19:54:39 +05:30 committed by GitHub
parent 5f1cd4591a
commit 66c92fc65a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/App.tsx
View File

@ -2366,16 +2366,24 @@ class App extends React.Component<AppProps, AppState> {
} }
return ( return (
element.link && element.link &&
isPointHittingLinkIcon(element, this.state, [ isPointHittingLinkIcon(
scenePointer.x, element,
scenePointer.y, this.state,
]) && [scenePointer.x, scenePointer.y],
this.isMobile,
) &&
index <= hitElementIndex index <= hitElementIndex
); );
}); });
}; };
private redirectToLink = () => { private redirectToLink = () => {
if (
this.lastPointerDown!.clientX !== this.lastPointerUp!.clientX ||
this.lastPointerDown!.clientY !== this.lastPointerUp!.clientY
) {
return;
}
const lastPointerDownCoords = viewportCoordsToSceneCoords( const lastPointerDownCoords = viewportCoordsToSceneCoords(
this.lastPointerDown!, this.lastPointerDown!,
this.state, this.state,
@ -2384,6 +2392,7 @@ class App extends React.Component<AppProps, AppState> {
this.hitLinkElement!, this.hitLinkElement!,
this.state, this.state,
[lastPointerDownCoords.x, lastPointerDownCoords.y], [lastPointerDownCoords.x, lastPointerDownCoords.y],
this.isMobile,
); );
const lastPointerUpCoords = viewportCoordsToSceneCoords( const lastPointerUpCoords = viewportCoordsToSceneCoords(
this.lastPointerUp!, this.lastPointerUp!,
@ -2393,6 +2402,7 @@ class App extends React.Component<AppProps, AppState> {
this.hitLinkElement!, this.hitLinkElement!,
this.state, this.state,
[lastPointerUpCoords.x, lastPointerUpCoords.y], [lastPointerUpCoords.x, lastPointerUpCoords.y],
this.isMobile,
); );
if (lastPointerDownHittingLinkIcon && LastPointerUpHittingLinkIcon) { if (lastPointerDownHittingLinkIcon && LastPointerUpHittingLinkIcon) {
const url = this.hitLinkElement?.link; const url = this.hitLinkElement?.link;
@ -3238,10 +3248,12 @@ class App extends React.Component<AppProps, AppState> {
if (pointerDownState.hit.element) { if (pointerDownState.hit.element) {
// Early return if pointer is hitting link icon // Early return if pointer is hitting link icon
if ( if (
isPointHittingLinkIcon(pointerDownState.hit.element, this.state, [ isPointHittingLinkIcon(
pointerDownState.origin.x, pointerDownState.hit.element,
pointerDownState.origin.y, this.state,
]) [pointerDownState.origin.x, pointerDownState.origin.y],
this.isMobile,
)
) { ) {
return false; return false;
} }

9
src/element/Hyperlink.tsx
View File

@ -306,9 +306,16 @@ export const isPointHittingLinkIcon = (
element: NonDeletedExcalidrawElement, element: NonDeletedExcalidrawElement,
appState: AppState, appState: AppState,
[x, y]: Point, [x, y]: Point,
isMobile: boolean,
) => { ) => {
const threshold = 4 / appState.zoom.value; const threshold = 4 / appState.zoom.value;
if (
!isMobile &&
appState.viewModeEnabled &&
isPointHittingElementBoundingBox(element, [x, y], threshold)
) {
return true;
}
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element); const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords( const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(