Spaces:
Running
Running
File size: 1,965 Bytes
91961e7 a6f4e88 91961e7 ffe4038 91961e7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import { useReactFlow } from "@xyflow/react";
import { useState } from "react";
// @ts-ignore
import Palette from "~icons/tabler/palette-filled.jsx";
// @ts-ignore
import Square from "~icons/tabler/square-filled.jsx";
import Tooltip from "../../Tooltip.tsx";
import { COLORS } from "../../common.ts";
export default function Group(props: any) {
const reactFlow = useReactFlow();
const [displayingColorPicker, setDisplayingColorPicker] = useState(false);
function setColor(newValue: string) {
reactFlow.updateNodeData(props.id, (prevData: any) => ({
...prevData,
params: { color: newValue },
}));
setDisplayingColorPicker(false);
}
function toggleColorPicker(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
e.stopPropagation();
setDisplayingColorPicker(!displayingColorPicker);
}
const currentColor = props.data?.params?.color || "gray";
return (
<div
className={`node-group ${props.parentId ? "in-group" : ""}`}
style={{
width: props.width,
height: props.height,
backgroundColor: COLORS[currentColor],
}}
>
<button
className="node-group-color-picker-icon"
onClick={toggleColorPicker}
aria-label="Change group color"
>
<Tooltip doc="Change color">
<Palette />
</Tooltip>
</button>
{displayingColorPicker && <ColorPicker currentColor={currentColor} onPick={setColor} />}
</div>
);
}
function ColorPicker(props: { currentColor: string; onPick: (color: string) => void }) {
const colors = Object.keys(COLORS).filter((color) => color !== props.currentColor);
return (
<div className="color-picker">
{colors.map((color) => (
<button
key={color}
className="color-picker-button"
style={{ color: COLORS[color] }}
onClick={() => props.onPick(color)}
>
<Square />
</button>
))}
</div>
);
}
|