90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import { useEditor } from "@tldraw/tldraw";
|
||
import { useEffect } from "react";
|
||
import "../css/dev-ui.css";
|
||
import { useCollection } from "@/collections";
|
||
|
||
export const GraphUi = () => {
|
||
const editor = useEditor();
|
||
const { collection, size } = useCollection('graph')
|
||
|
||
const handleAdd = () => {
|
||
if (collection) {
|
||
collection.add(editor.getSelectedShapes())
|
||
editor.selectNone()
|
||
}
|
||
}
|
||
|
||
const handleRemove = () => {
|
||
if (collection) {
|
||
collection.remove(editor.getSelectedShapes())
|
||
editor.selectNone()
|
||
}
|
||
}
|
||
|
||
const handleShortcut = () => {
|
||
if (!collection) return
|
||
const empty = collection.getShapes().size === 0
|
||
if (empty)
|
||
collection.add(editor.getCurrentPageShapes())
|
||
else
|
||
collection.clear()
|
||
};
|
||
|
||
const handleHighlight = () => {
|
||
if (collection) {
|
||
editor.setHintingShapes([...collection.getShapes().values()])
|
||
}
|
||
}
|
||
|
||
const handleHelp = () => {
|
||
alert("Use the 'Add' and 'Remove' buttons to add/remove selected shapes, or hit 'G' to add/remove all shapes. \n\nUse the highlight button (🔦) to visualize shapes in the simulation. \n\nBLUE shapes are constrained horizontally, RED shapes are constrained vertically. This is just to demo basic constraints, I plan to demo more interesting constraints in the future. \n\nFor more details, check the project's README.");
|
||
}
|
||
|
||
useEffect(() => {
|
||
window.addEventListener('toggleGraphLayoutEvent', handleShortcut);
|
||
|
||
return () => {
|
||
window.removeEventListener('toggleGraphLayoutEvent', handleShortcut);
|
||
};
|
||
}, [handleShortcut]);
|
||
|
||
return (
|
||
<div className="custom-layout">
|
||
<div className="custom-toolbar">
|
||
<div>{size} shapes</div>
|
||
<button
|
||
type="button"
|
||
title="Add Selected"
|
||
className="custom-button"
|
||
onClick={handleAdd}
|
||
>
|
||
Add
|
||
</button>
|
||
<button
|
||
type="button"
|
||
title="Remove Selected"
|
||
className="custom-button"
|
||
onClick={handleRemove}
|
||
>
|
||
Remove
|
||
</button>
|
||
<button
|
||
type="button"
|
||
title="Highlight Collection"
|
||
className="custom-button"
|
||
onClick={handleHighlight}
|
||
>
|
||
🔦
|
||
</button>
|
||
<button
|
||
type="button"
|
||
title="Show Help"
|
||
className="custom-button"
|
||
onClick={handleHelp}
|
||
>
|
||
⁉️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}; |