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 adding multiple library items on canvas (#5116)

Browse source
This commit is contained in:
David Luzar 2022-05-11 15:51:02 +02:00 • committed by GitHub
parent cad6097d60
commit d2cc76e52e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 275 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/LibraryMenuItems.tsx
View file

@ -1,6 +1,6 @@
import { chunk } from "lodash";
import React, { useCallback, useState } from "react";
import { saveLibraryAsJSON } from "../data/json";
import { saveLibraryAsJSON, serializeLibraryAsJSON } from "../data/json";
import Library from "../data/library";
import { ExcalidrawElement, NonDeleted } from "../element/types";
import { t } from "../i18n";
@ -21,7 +21,7 @@ import { ToolButton } from "./ToolButton";
import { Tooltip } from "./Tooltip";
import "./LibraryMenuItems.scss";
import { VERSIONS } from "../constants";
import { MIME_TYPES, VERSIONS } from "../constants";
import Spinner from "./Spinner";
import { fileOpen } from "../data/filesystem";
@ -30,7 +30,7 @@ const LibraryMenuItems = ({
libraryItems,
onRemoveFromLibrary,
onAddToLibrary,
onInsertShape,
onInsertLibraryItems,
pendingElements,
theme,
setAppState,
@ -47,7 +47,7 @@ const LibraryMenuItems = ({
libraryItems: LibraryItems;
pendingElements: LibraryItem["elements"];
onRemoveFromLibrary: () => void;
onInsertShape: (elements: LibraryItem["elements"]) => void;
onInsertLibraryItems: (libraryItems: LibraryItems) => void;
onAddToLibrary: (elements: LibraryItem["elements"]) => void;
theme: AppState["theme"];
files: BinaryFiles;
@ -252,6 +252,18 @@ const LibraryMenuItems = ({
}
};
const getInsertedElements = (id: string) => {
let targetElements;
if (selectedItems.includes(id)) {
targetElements = libraryItems.filter((item) =>
selectedItems.includes(item.id),
);
} else {
targetElements = libraryItems.filter((item) => item.id === id);
}
return targetElements;
};
const createLibraryItemCompo = (params: {
item:
| LibraryItem
@ -273,6 +285,12 @@ const LibraryMenuItems = ({
id={params.item?.id || null}
selected={!!params.item?.id && selectedItems.includes(params.item.id)}
onToggle={onItemSelectToggle}
onDrag={(id, event) => {
event.dataTransfer.setData(
MIME_TYPES.excalidrawlib,
serializeLibraryAsJSON(getInsertedElements(id)),
);
}}
/>
</Stack.Col>
);
@ -291,7 +309,7 @@ const LibraryMenuItems = ({
if (item.id) {
return createLibraryItemCompo({
item,
onClick: () => onInsertShape(item.elements),
onClick: () => onInsertLibraryItems(getInsertedElements(item.id)),
key: item.id,
});
}