55 lines
3.0 KiB
TypeScript
55 lines
3.0 KiB
TypeScript
// Example F — an SW NORMAL-mode SWHeader with file open and a tool bar: logo → Open → file → layer → color → K, plus
|
|
// a tool bar (Model / Layout, 2.5D, Fit) after the menus. Everything is SWHeader props, so the existing responsive
|
|
// More serves the whole layout (Open moves into More when the measured header has no room). No freeze / lock, no
|
|
// "+ New" in this product.
|
|
// It is NOT the SW viewer mode: a viewer screen (DWG/DXF viewing) uses SWViewerHeader / SWViewerMenu /
|
|
// SWViewerPanel (Example H, VIEWER.md). "Viewer" in the file and function name is a former name, kept so existing
|
|
// imports keep working.
|
|
import { useState } from "react"
|
|
import { SWHeader, SWToolButton, SWToolGroup } from "@hm-design/sw"
|
|
import { colors, documents, layers } from "./sample-data"
|
|
|
|
// The program supplies its icons (24 x 23 box of a pill button). Colors: the existing print icon fill #B6D0C9,
|
|
// hover --hm-sw-header-selected-color (#FFC600), as in DESIGN_RULES §2.
|
|
const FitIcon = ({ color }: { color: string }) => (
|
|
<svg viewBox="0 0 24 23" width="24" height="23" aria-hidden="true">
|
|
<path d="M2 8V2h6M16 2h6v6M22 15v6h-6M8 21H2v-6" fill="none" stroke={color} strokeWidth="2" />
|
|
</svg>
|
|
)
|
|
|
|
export function ExampleFViewerToolbar({ onEvent }: { onEvent?: (name: string) => void }) {
|
|
const [activeLayerId, setActiveLayerId] = useState("0")
|
|
const [view, setView] = useState<"model" | "layout">("model")
|
|
const [depth, setDepth] = useState(false)
|
|
return (
|
|
<SWHeader
|
|
documentTitle={documents[0].name}
|
|
documents={documents}
|
|
activeDocumentId="doc-1"
|
|
documentOpenPlacement="header"
|
|
documentOpenLabel="파일 열기"
|
|
onDocumentOpen={() => onEvent?.("document:open")}
|
|
onDocumentSelect={document => onEvent?.(`document:${document.id}`)}
|
|
controls={[{ id: "document" }, { id: "layer" }, { id: "color" }, { id: "popupGuide" }]}
|
|
hiddenControls={["documentNew", "layerFreeze", "layerLock"]}
|
|
layers={layers}
|
|
activeLayerId={activeLayerId}
|
|
onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
|
|
colors={colors}
|
|
onColorSelect={option => onEvent?.(`color:${option.id}`)}
|
|
tools={<>
|
|
<SWToolGroup label="보기" selection="single">
|
|
<SWToolButton pressed={view === "model"} onClick={() => { setView("model"); onEvent?.("view:model") }}>Model</SWToolButton>
|
|
<SWToolButton pressed={view === "layout"} onClick={() => { setView("layout"); onEvent?.("view:layout") }}>Layout</SWToolButton>
|
|
</SWToolGroup>
|
|
<SWToolGroup label="표시">
|
|
<SWToolButton pressed={depth} onClick={() => { setDepth(!depth); onEvent?.(`2.5d:${!depth}`) }}>2.5D</SWToolButton>
|
|
</SWToolGroup>
|
|
<SWToolGroup appearance="pill" aria-label="화면">
|
|
<SWToolButton appearance="pill" icon={<FitIcon color="#B6D0C9" />} hoverIcon={<FitIcon color="var(--hm-sw-header-selected-color)" />} onClick={() => onEvent?.("fit")}>화면 맞춤</SWToolButton>
|
|
</SWToolGroup>
|
|
</>}
|
|
/>
|
|
)
|
|
}
|