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

9
src/element/Hyperlink.tsx
View File

@ -306,9 +306,16 @@ export const isPointHittingLinkIcon = (
element: NonDeletedExcalidrawElement,
appState: AppState,
[x, y]: Point,
isMobile: boolean,
) => {
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 [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(