You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.0 KiB
74 lines
2.0 KiB
import React from "react"; |
|
|
|
import type * as TExcalidraw from "@excalidraw/excalidraw"; |
|
import type { ExcalidrawImperativeAPI } from "@excalidraw/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;
|
|
|