shkim4
b50e95c325
- dropdown-consolidation, storybook-cleanup-stage1, detail-buttons, property-panel-comparison: assert their recorded state and accept today only the approved later Story changes (storybook-inventory.mjs helpers). - header-composition.browser.mjs + fixtures/header-composition.tsx: the removed Composition Story presets, hidden controls, invalid menuOrder / hiddenControls and live changes, on a test-only page using the public API only. - storybook-unused-removal: header comment lists which older scripts run on current Stories again.
46 lines
2.8 KiB
TypeScript
46 lines
2.8 KiB
TypeScript
// Test-only host for header-composition.browser.mjs (2026-10-20). Not a Storybook Story and not shipped (package
|
|
// "files" is dist + ai). It replaces the Composition demo removed in 5faa1f1 for the hiddenControls / menuOrder checks.
|
|
// Uses only the public @hm-design/sw API, like a consuming project. window.__setComposition({ hidden, order }) changes
|
|
// the props at runtime; the layer selection is host state, so it must survive reordering, hiding and showing again.
|
|
import { useEffect, useState } from "react"
|
|
import { createRoot } from "react-dom/client"
|
|
import { SWHeader, type SWHeaderHideableControlId, type SWHeaderLayer, type SWHeaderMenuId } from "@hm-design/sw"
|
|
import "@hm-design/sw/styles.css"
|
|
|
|
type Composition = { hidden?: SWHeaderHideableControlId[]; order?: SWHeaderMenuId[] }
|
|
declare global { interface Window { __setComposition?: (next: Composition) => void; __callbacks: string[] } }
|
|
window.__callbacks = []
|
|
|
|
const LAYERS: SWHeaderLayer[] = [
|
|
{ id: "0", name: "0", color: "#ffffff" },
|
|
{ id: "wall", name: "WALL", color: "#ff4242" },
|
|
{ id: "dim", name: "DIM", color: "#47af91" },
|
|
]
|
|
const record = (line: string) => { window.__callbacks.push(line) }
|
|
|
|
function Host() {
|
|
const [composition, setComposition] = useState<Composition>({})
|
|
const [layerId, setLayerId] = useState("0")
|
|
useEffect(() => { window.__setComposition = next => setComposition(next) }, [])
|
|
const layer = LAYERS.find(item => item.id === layerId)!
|
|
return (
|
|
<div data-composition-fixture="" data-hidden={(composition.hidden ?? []).join(",")} data-order={composition.order?.join(",") ?? "default"}>
|
|
<SWHeader
|
|
documentTitle="C0020101-006-평면및종단면도(06)" drawingModeLabel="그리기모드"
|
|
documents={[{ id: "doc-current", name: "C0020101-006-평면및종단면도(06)" }]} activeDocumentId="doc-current"
|
|
layers={LAYERS} activeLayerId={layerId} layer={{ name: layer.name }}
|
|
color={{ value: "255,229,0", swatch: "#ffe500" }}
|
|
lineStyle={{ name: "Continuous", weight: "0.25", scale: "1.00" }}
|
|
textStyle={{ font: "Arial", name: "Standard" }} dimensionStyle={{ name: "Standard" }}
|
|
hiddenControls={composition.hidden} menuOrder={composition.order}
|
|
onHomeClick={() => record("onHomeClick")} onLayerSelect={item => { setLayerId(item.id); record(`onLayerSelect(${item.id})`) }}
|
|
onLayerOpen={() => record("onLayerOpen")} onColorOpen={() => record("onColorOpen")} onLineStyleOpen={() => record("onLineStyleOpen")}
|
|
onTextStyleOpen={() => record("onTextStyleOpen")} onDimensionStyleOpen={() => record("onDimensionStyleOpen")}
|
|
onPrint={() => record("onPrint")} onPopupGuide={() => record("onPopupGuide")} onMinimize={() => record("onMinimize")} onClose={() => record("onClose")}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
createRoot(document.getElementById("root")!).render(<Host />)
|