48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { LINE_LIST, type LinePoolItem } from '@/configs/lines';
|
|
|
|
interface LinePresetPickerProps {
|
|
readonly onPick: (preset: LinePoolItem) => void;
|
|
}
|
|
|
|
function getPresetLabel(preset: LinePoolItem) {
|
|
if (preset.isCubic) return '三次曲线';
|
|
if (preset.isCurve) return '曲线';
|
|
if (preset.isBroken2) return '双折线';
|
|
if (preset.isBroken) return '折线';
|
|
if (preset.points[1] === 'arrow') return '箭头直线';
|
|
if (preset.points[1] === 'dot') return '圆点直线';
|
|
return preset.style === 'dashed' ? '虚线' : '直线';
|
|
}
|
|
|
|
/** Renderer-editor insert palette for the existing DSL line presets. */
|
|
export function LinePresetPicker({ onPick }: LinePresetPickerProps) {
|
|
return (
|
|
<div className="grid grid-cols-5 gap-2" role="group" aria-label="线条预设">
|
|
{LINE_LIST.flatMap((group) => group.children).map((preset, index) => {
|
|
const label = getPresetLabel(preset);
|
|
return (
|
|
<button
|
|
key={`${preset.path}-${index}`}
|
|
type="button"
|
|
aria-label={label}
|
|
className="flex aspect-square items-center justify-center rounded-md border border-transparent p-2 text-zinc-600 hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 dark:text-zinc-300 dark:hover:border-violet-500/50 dark:hover:bg-violet-500/10"
|
|
onClick={() => onPick(preset)}
|
|
>
|
|
<svg viewBox="0 0 20 20" className="h-7 w-7" aria-hidden="true">
|
|
<path
|
|
d={preset.path}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeDasharray={preset.style === 'dashed' ? '5 2.5' : undefined}
|
|
/>
|
|
</svg>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|