73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import type * as TExcalidraw from "@excalidraw/excalidraw";
|
|
import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/dist/excalidraw/types";
|
|
|
|
const COMMENT_SVG = (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="feather feather-message-circle"
|
|
>
|
|
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
|
|
</svg>
|
|
);
|
|
|
|
const CustomFooter = ({
|
|
excalidrawAPI,
|
|
excalidrawLib,
|
|
}: {
|
|
excalidrawAPI: ExcalidrawImperativeAPI;
|
|
excalidrawLib: typeof TExcalidraw;
|
|
}) => {
|
|
const { Button, MIME_TYPES } = excalidrawLib;
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
onSelect={() => alert("General Kenobi!")}
|
|
style={{ marginLeft: "1rem", width: "auto" }}
|
|
title="Hello there!"
|
|
>
|
|
Hit me
|
|
</Button>
|
|
<Button
|
|
className="custom-element"
|
|
onSelect={() => {
|
|
excalidrawAPI?.setActiveTool({
|
|
type: "custom",
|
|
customType: "comment",
|
|
});
|
|
const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
|
|
`<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="feather feather-message-circle"
|
|
>
|
|
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
|
|
</svg>`,
|
|
)}`;
|
|
excalidrawAPI?.setCursor(`url(${url}), auto`);
|
|
}}
|
|
title="Comments!"
|
|
>
|
|
{COMMENT_SVG}
|
|
</Button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CustomFooter;
|