46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useEffect, useState, type ReactElement, type RefObject } from "react";
|
|
import type { Editor } from "./editor/Editor";
|
|
|
|
type Props = { editor: Editor; canvasRef: RefObject<HTMLCanvasElement | null> };
|
|
|
|
function Toolbar({ editor, canvasRef }: Props): ReactElement {
|
|
const [updateId, update] = useState(0);
|
|
const [selectedTool, setSelectedTool] = useState("select");
|
|
|
|
useEffect(() =>
|
|
editor.events.subscribe(["ShowSelectedTool"], (ev) => {
|
|
update(updateId + 1);
|
|
setSelectedTool(ev.tool);
|
|
}),
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="Toolbar">
|
|
<h2>Toolbar</h2>
|
|
<div>
|
|
{editor.availableTools().map((tool, key) => (
|
|
<button
|
|
key={key}
|
|
className={selectedTool === tool ? "active" : ""}
|
|
onClick={() => {
|
|
editor.events.send({ tag: "SelectTool", tool });
|
|
canvasRef.current?.focus();
|
|
}}
|
|
onDoubleClick={() => {
|
|
editor.events.send({ tag: "OpenTabWithTool", tool });
|
|
canvasRef.current?.focus();
|
|
}}
|
|
>
|
|
{tool}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Toolbar;
|