mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: eye dropper (#6615)
This commit is contained in:
parent
644685a5a8
commit
079aa72475
31 changed files with 803 additions and 250 deletions
|
@ -6,7 +6,6 @@ import React, {
|
|||
forwardRef,
|
||||
useImperativeHandle,
|
||||
useCallback,
|
||||
RefObject,
|
||||
} from "react";
|
||||
import { Island } from ".././Island";
|
||||
import { atom, useSetAtom } from "jotai";
|
||||
|
@ -27,38 +26,10 @@ import { SidebarTabTriggers } from "./SidebarTabTriggers";
|
|||
import { SidebarTabTrigger } from "./SidebarTabTrigger";
|
||||
import { SidebarTabs } from "./SidebarTabs";
|
||||
import { SidebarTab } from "./SidebarTab";
|
||||
import { useUIAppState } from "../../context/ui-appState";
|
||||
import { useOutsideClick } from "../../hooks/useOutsideClick";
|
||||
|
||||
import "./Sidebar.scss";
|
||||
import { useUIAppState } from "../../context/ui-appState";
|
||||
|
||||
// FIXME replace this with the implem from ColorPicker once it's merged
|
||||
const useOnClickOutside = (
|
||||
ref: RefObject<HTMLElement>,
|
||||
cb: (event: MouseEvent) => void,
|
||||
) => {
|
||||
useEffect(() => {
|
||||
const listener = (event: MouseEvent) => {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
event.target instanceof Element &&
|
||||
(ref.current.contains(event.target) ||
|
||||
!document.body.contains(event.target))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
cb(event);
|
||||
};
|
||||
document.addEventListener("pointerdown", listener, false);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", listener);
|
||||
};
|
||||
}, [ref, cb]);
|
||||
};
|
||||
|
||||
/**
|
||||
* Flags whether the currently rendered Sidebar is docked or not, for use
|
||||
|
@ -133,7 +104,7 @@ export const SidebarInner = forwardRef(
|
|||
setAppState({ openSidebar: null });
|
||||
}, [setAppState]);
|
||||
|
||||
useOnClickOutside(
|
||||
useOutsideClick(
|
||||
islandRef,
|
||||
useCallback(
|
||||
(event) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue