smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: support selecting multiple library items via shift (#4306)

Browse source
This commit is contained in:
David Luzar 2021-11-26 12:46:23 +01:00 • committed by GitHub
parent b53d1f6f3e
commit 06db702b5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 117 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/LibraryUnit.tsx
View file

@ -8,12 +8,15 @@ import { BinaryFiles, LibraryItem } from "../types";
import "./LibraryUnit.scss";
import { CheckboxItem } from "./CheckboxItem";
// fa-plus
const PLUS_ICON = (
<svg viewBox="0 0 1792 1792">
<path
fill="currentColor"
d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"
d="M1600 736v192c0 26.667-9.33 49.333-28 68-18.67 18.67-41.33 28-68 28h-416v416c0 26.67-9.33 49.33-28 68s-41.33 28-68 28H800c-26.667 0-49.333-9.33-68-28s-28-41.33-28-68v-416H288c-26.667 0-49.333-9.33-68-28-18.667-18.667-28-41.333-28-68V736c0-26.667 9.333-49.333 28-68s41.333-28 68-28h416V224c0-26.667 9.333-49.333 28-68s41.333-28 68-28h192c26.67 0 49.33 9.333 68 28s28 41.333 28 68v416h416c26.67 0 49.33 9.333 68 28s28 41.333 28 68Z"
style={{
stroke: "#fff",
strokeWidth: 140,
}}
transform="translate(0 64)"
/>
</svg>
);
@ -33,7 +36,7 @@ export const LibraryUnit = ({
isPending?: boolean;
onClick: () => void;
selected: boolean;
onToggle: (id: string) => void;
onToggle: (id: string, event: React.MouseEvent) => void;
}) => {
const ref = useRef<HTMLDivElement | null>(null);
useEffect(() => {
@ -84,7 +87,17 @@ export const LibraryUnit = ({
})}
ref={ref}
draggable={!!elements}
onClick={!!elements || !!isPending ? onClick : undefined}
onClick={
!!elements || !!isPending
? (event) => {
if (id && event.shiftKey) {
onToggle(id, event);
} else {
onClick();
}
}
: undefined
}
onDragStart={(event) => {
setIsHovered(false);
event.dataTransfer.setData(
@ -97,7 +110,7 @@ export const LibraryUnit = ({
{id && elements && (isHovered || isMobile || selected) && (
<CheckboxItem
checked={selected}
onChange={() => onToggle(id)}
onChange={(checked, event) => onToggle(id, event)}
className="library-unit__checkbox"
/>
)}