53 lines
3.3 KiB
TypeScript
53 lines
3.3 KiB
TypeScript
// Example I — SW Footer (general mode): the bottom command bar with its command line, layout tabs and data.
|
|
// Commands are not run here: the host receives callbacks and updates the props.
|
|
import { useState } from "react"
|
|
import {
|
|
SWFooter, SWFooterCommandLine, SWFooterLayoutTabs, SW_FOOTER_MODEL, swFooterAuxIcons, swFooterToolIcons,
|
|
type SWFooterAuxItem, type SWFooterCategory, type SWFooterLayout,
|
|
} from "@hm-design/sw"
|
|
|
|
const categories: SWFooterCategory[] = [
|
|
{ id: "shape", label: "도형", tools: [
|
|
{ id: "line", label: "LINE", ...swFooterToolIcons.line },
|
|
{ id: "pline", label: "PLINE", ariaLabel: "Polyline", ...swFooterToolIcons.pline },
|
|
{ id: "circle", label: "CIRCLE", ...swFooterToolIcons.circle },
|
|
{ id: "rect", label: "RECTA...", ariaLabel: "Rectangle", ...swFooterToolIcons.rect },
|
|
] },
|
|
{ id: "modify", label: "수정", tools: [{ id: "ncopy", label: "NCOPY", ...swFooterToolIcons.ncopy }] },
|
|
{ id: "layer", label: "레이어", tools: [] },
|
|
]
|
|
|
|
export function ExampleIFooter({ onEvent }: { onEvent?: (name: string) => void }) {
|
|
const [categoryId, setCategoryId] = useState("shape")
|
|
const [running, setRunning] = useState<string | null>(null)
|
|
const [aux, setAux] = useState<SWFooterAuxItem[]>([
|
|
{ id: "objectSnap", label: "객체스냅", icon: swFooterAuxIcons.objectSnap, pressed: true },
|
|
{ id: "orthogonal", label: "직각교차", icon: swFooterAuxIcons.orthogonal, pressed: false },
|
|
{ id: "gridSnap", label: "격자스냅", icon: swFooterAuxIcons.gridSnap, pressed: false },
|
|
])
|
|
const [layouts, setLayouts] = useState<SWFooterLayout[]>([{ id: "l2", label: "Layout 02" }, { id: "l1", label: "Layout 01" }])
|
|
const [space, setSpace] = useState(SW_FOOTER_MODEL)
|
|
const [history, setHistory] = useState<string[]>(["Command: LINE", "Specify first point:"])
|
|
const [listOpen, setListOpen] = useState(false)
|
|
const run = (command: string) => { setHistory(lines => [...lines, `Command: ${command}`]); onEvent?.(`command:${command}`) }
|
|
return (
|
|
<div className="example-screen">
|
|
<main className="example-canvas" />
|
|
<SWFooter
|
|
status="0.0000, 0.0000, 0.0000"
|
|
command={<SWFooterCommandLine history={history} onSubmit={run} expanded={listOpen} onExpandedChange={setListOpen} />}
|
|
categories={categories} categoryId={categoryId} onCategoryChange={setCategoryId}
|
|
activeToolId={running} onToolSelect={toolId => { setRunning(toolId); run(toolId.toUpperCase()) }}
|
|
onSlotAdd={(slotIndex, category) => onEvent?.(`register:${category}#${slotIndex}`)}
|
|
auxItems={aux} onAuxPressedChange={(id, pressed) => setAux(items => items.map(item => (item.id === id ? { ...item, pressed } : item)))}
|
|
auxAll={{ onClick: () => onEvent?.("auxAll") }}
|
|
commandAll={{ onClick: () => setListOpen(open => !open), pressed: listOpen }}
|
|
layoutTabs={<SWFooterLayoutTabs layouts={layouts} value={space} onValueChange={setSpace}
|
|
onAdd={() => setLayouts(list => [{ id: `l${list.length + 1}`, label: `Layout 0${list.length + 1}` }, ...list])}
|
|
onRemove={id => { setLayouts(list => list.filter(item => item.id !== id)); if (space === id) setSpace(SW_FOOTER_MODEL) }}
|
|
onRename={(id, label) => setLayouts(list => list.map(item => (item.id === id ? { ...item, label } : item)))} />}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|