199 lines
15 KiB
TypeScript
199 lines
15 KiB
TypeScript
// Test-only host for property-fields.browser.mjs (2026-11-10). Not a Storybook Story and not shipped (package "files" is
|
||
// dist + ai). It restores the host data and host controls of the two demos removed in 5faa1f1 that the field checks
|
||
// need: SW/Header › Property Fields (data-fields live / default / pinned hover) and the Header-hosted Property Panel
|
||
// (원 1개 selection). Records and controls are copied from src/sw/sw-header.stories.tsx at 5faa1f1^ without changes.
|
||
// Uses only the public @hm-design/sw API, like a consuming project. The pinned Hover column uses the Storybook pseudo-state
|
||
// mirror (.storybook/pseudo-states.ts) exactly as the retired Story did.
|
||
import { useEffect, useRef, useState, type ReactNode } from "react"
|
||
import { createRoot } from "react-dom/client"
|
||
import {
|
||
SWHeader, SWHeaderPropertyPanel, SWTheme, swHeaderLinePatterns,
|
||
type SWHeaderColorMode, type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderLineType, type SWHeaderLineWeight,
|
||
type SWHeaderProperty, type SWHeaderPropertyGroup, type SWHeaderPropertyMenus, type SWHeaderPropertySelection,
|
||
} from "@hm-design/sw"
|
||
import "@hm-design/sw/styles.css"
|
||
import { ensurePseudoStates } from "../../../../.storybook/pseudo-states"
|
||
|
||
const FIGMA_COLORS: SWHeaderColorOption[] = [
|
||
{ id: "white", color: "#ffffff", label: "흰색" },
|
||
{ id: "red", color: "#f10404", label: "빨강" },
|
||
{ id: "green", color: "#48ff08", label: "초록" },
|
||
{ id: "yellow", color: "#ffff00", label: "노랑" },
|
||
{ id: "blue", color: "#0012ff", label: "파랑" },
|
||
{ id: "magenta", color: "#ff00f6", label: "자홍" },
|
||
{ id: "cyan", color: "#00f6ff", label: "청록" },
|
||
]
|
||
const FIGMA_LINE_TYPES: SWHeaderLineType[] = [
|
||
{ id: "byblock", name: "ByBlock" },
|
||
{ id: "bylayer", name: "ByLayer" },
|
||
{ id: "continuous", name: "Continuous" },
|
||
{ id: "center", name: "CENTER", pattern: swHeaderLinePatterns.center },
|
||
{ id: "hidden", name: "HIDDEN", pattern: swHeaderLinePatterns.hidden },
|
||
]
|
||
const FIGMA_LINE_WEIGHTS: SWHeaderLineWeight[] = [
|
||
{ id: "w-bylayer", name: "ByLayer" },
|
||
{ id: "w-byblock", name: "ByBlock" },
|
||
{ id: "w-default", name: "ByDefault", value: "0.25" },
|
||
{ id: "w-user", name: "User", value: "0.25", editable: true },
|
||
]
|
||
const PROPERTY_GROUPS: SWHeaderPropertyGroup[] = [
|
||
{ id: "common", collapsedCount: 6 },
|
||
{ id: "shape", name: "형상", layout: "circle" },
|
||
{ id: "position", name: "위치", layout: "position", positionLabel: "중간점" },
|
||
]
|
||
const PROPERTY_FIXTURE: SWHeaderProperty[] = [
|
||
{ id: "layer", name: "레이어", value: "0_Layer_Cludmark", type: "text", groupId: "common", picker: "layer", validate: draft => draft.length <= 40 },
|
||
{ id: "color", name: "색상", value: "255,229,0", type: "color", groupId: "common" },
|
||
{ id: "line", name: "선스타일", value: "Continuous", type: "select", groupId: "common", unit: "(ByL)", linePreview: true, options: [{ id: "Continuous", name: "Continuous" }, { id: "CENTER", name: "CENTER" }, { id: "HIDDEN", name: "HIDDEN" }] },
|
||
{ id: "weight", name: "선가중치", value: "0.25", type: "number", groupId: "common", min: 0 },
|
||
{ id: "scale", name: "선축적", value: "1.0000", type: "number", groupId: "common", min: .0001, decimals: 4, unit: "(LTscale:1)" },
|
||
{ id: "opacity", name: "투명도", value: "0.25", type: "slider", groupId: "common", min: 0, max: 1, step: .01, annotation: "(ByL)", unit: "%" },
|
||
{ id: "link", name: "하이퍼링크", value: "--", type: "text", groupId: "common" },
|
||
{ id: "thickness", name: "두께", value: "0.25", type: "number", groupId: "common", unit: "mm", min: 0 },
|
||
{ id: "material", name: "재료", value: "-", type: "computed", groupId: "common", unit: "(ByL)" },
|
||
{ id: "circumference", name: "원주", value: "0.25", type: "computed", groupId: "shape", graphicSlot: "circumference" },
|
||
{ id: "diameter", name: "지름", value: "8.1502", type: "number", groupId: "shape", graphicSlot: "diameter", min: 0 },
|
||
{ id: "radius", name: "반지름", value: "4.0526", type: "number", groupId: "shape", graphicSlot: "radius", min: 0 },
|
||
{ id: "area", name: "면적", value: "51.5962", type: "computed", groupId: "shape", graphicSlot: "area" },
|
||
{ id: "x", name: "X", value: "48.0808", type: "number", groupId: "position" },
|
||
{ id: "y", name: "Y", value: "14.9160", type: "number", groupId: "position" },
|
||
{ id: "z", name: "Z", value: "0.0000", type: "number", groupId: "position" },
|
||
]
|
||
const PROPERTY_COUNTS = [
|
||
{ id: "shape", name: "도형", count: 10, row: 1, column: 1 }, { id: "line", name: "직선", count: 10, row: 1, column: 2 },
|
||
{ id: "circle", name: "원", count: 1, row: 1, column: 3 }, { id: "ray", name: "광선", count: 1, row: 1, column: 4 },
|
||
{ id: "curve", name: "곡선", count: 10, row: 2, column: 3 }, { id: "arc", name: "호", count: 1, row: 2, column: 4 },
|
||
{ id: "polyline", name: "폴리선", count: 10, row: 3, column: 3 }, { id: "polyline2", name: "폴리선", count: 2, row: 3, column: 4 },
|
||
{ id: "text1", name: "문자", count: 1, row: 4, column: 1 }, { id: "text2", name: "문자", count: 1, row: 4, column: 2 },
|
||
{ id: "text3", name: "문자", count: 1, row: 4, column: 3 },
|
||
]
|
||
type PropertyExample = "none" | "all" | "circle" | "expanded"
|
||
function propertySelection(example: PropertyExample): SWHeaderPropertySelection {
|
||
return example === "none" ? { id: "none", title: "선택된 객체 - 없음", kind: "none" }
|
||
: example === "all" ? { id: "all", title: "선택된 객체 - 전체 11", kind: "all", counts: PROPERTY_COUNTS }
|
||
: { id: "circle", title: "선택된 객체 - 원1", kind: "single", overviewTitle: "선택된 객체 - 전체 11" }
|
||
}
|
||
function propertyFixture(example: PropertyExample) {
|
||
return PROPERTY_FIXTURE.filter(item => (example === "none" || example === "all") ? item.groupId === "common" : true).map(item => ({
|
||
...item, ...(example === "none" && item.id === "layer" ? { value: "0" } : {}),
|
||
...(example === "none" && item.id === "color" ? { value: "138,138,138" } : {}),
|
||
...(example === "all" && item.id === "layer" ? { mixed: true } : {}),
|
||
...((example === "none" || example === "all") && item.id === "opacity" ? { value: "0" } : {}),
|
||
}))
|
||
}
|
||
const PROPERTY_LAYERS: SWHeaderLayer[] = [
|
||
{ id: "0", name: "0" },
|
||
{ id: "0_Layer_Cludmark", name: "0_Layer_Cludmark", color: "#ff0000" },
|
||
{ id: "CC-D GNL", name: "CC-D GNL" },
|
||
{ id: "Sample-Wall", name: "Sample-Wall", color: "#ffe500", visible: false },
|
||
{ id: "Sample-Door", name: "Sample-Door", color: "#00ff00", frozen: true },
|
||
{ id: "Sample-Text", name: "Sample-Text", color: "#00ffff", locked: true },
|
||
{ id: "Sample-Defpoints", name: "Sample-Defpoints", color: "#808080", disabled: true },
|
||
]
|
||
const PROPERTY_LINE_TYPES: SWHeaderLineType[] = FIGMA_LINE_TYPES.map(item => ({ ...item, id: item.name }))
|
||
const linePatternOf = (value: string) => PROPERTY_LINE_TYPES.find(item => item.id === value)?.pattern
|
||
function usePropertyMenus(record: (line: string) => void, setProperties: (update: (items: SWHeaderProperty[]) => SWHeaderProperty[]) => void): SWHeaderPropertyMenus {
|
||
const [layers, setLayers] = useState(PROPERTY_LAYERS)
|
||
const [weights, setWeights] = useState(FIGMA_LINE_WEIGHTS)
|
||
const [weightId, setWeightId] = useState("w-default")
|
||
const [colorMode, setColorMode] = useState<SWHeaderColorMode | null>(null)
|
||
const setValue = (id: string, value: string) => setProperties(items => items.map(item => item.id === id ? { ...item, value, mixed: false } : item))
|
||
const scale = "1.0000"
|
||
const toggle = (key: "visible" | "frozen" | "locked") => (layer: SWHeaderLayer, next: boolean) => {
|
||
record(`layer.${key}(${layer.id}, ${next})`)
|
||
setLayers(items => items.map(item => item.id === layer.id ? { ...item, [key]: next } : item))
|
||
}
|
||
return {
|
||
layers, onLayerVisibilityChange: toggle("visible"), onLayerFreezeChange: toggle("frozen"), onLayerLockChange: toggle("locked"),
|
||
onLayerDetail: () => record("layerDetail"),
|
||
lineTypes: PROPERTY_LINE_TYPES, lineWeights: weights, activeLineWeightId: weightId, lineScale: scale,
|
||
onLineWeightSelect: weight => { record(`lineWeight(${weight.id})`); setWeightId(weight.id); if (weight.value) setValue("weight", weight.value) },
|
||
onLineWeightValueChange: (weight, value) => { record(`lineWeightValue(${weight.id}, ${value})`); setWeights(items => items.map(item => item.id === weight.id ? { ...item, value } : item)) },
|
||
onLineScaleChange: value => { record(`lineScale(${value})`); setValue("scale", Number(value).toFixed(4)) },
|
||
onLineStyleDetail: () => record("lineStyleDetail"),
|
||
colors: FIGMA_COLORS, colorMode,
|
||
onColorModeChange: mode => { record(`colorMode(${mode})`); setColorMode(mode) },
|
||
onColorPick: property => record(`colorPick(${property.id})`),
|
||
onColorDetail: () => record("colorDetail"),
|
||
}
|
||
}
|
||
function PinHover({ selectors, children }: { selectors: string[]; children: ReactNode }) {
|
||
const ref = useRef<HTMLDivElement>(null)
|
||
useEffect(() => {
|
||
ensurePseudoStates()
|
||
ref.current?.querySelectorAll(selectors.join(",")).forEach(element => element.setAttribute("data-sb-hover", ""))
|
||
}, [selectors])
|
||
return <div ref={ref}>{children}</div>
|
||
}
|
||
|
||
/* SW/Header › Property Fields (retired in 5faa1f1): the common rows of PROPERTY_FIXTURE plus a mixed layer row. Figma
|
||
sample text 255,259,0 is out of range: shown as host text only, never accepted as input. */
|
||
const FIELD_FIXTURE: SWHeaderProperty[] = PROPERTY_FIXTURE.filter(item => item.groupId === "common").flatMap(item =>
|
||
item.id === "layer" ? [{ ...item, id: "layer-mixed", mixed: true }, item]
|
||
: item.id === "color" ? [{ ...item, value: "255,259,0", swatch: "#ffe500" }]
|
||
: [item])
|
||
const FIELD_HOVER = [".hm-sw-property__value[data-field]", ".hm-sw-property__compact"]
|
||
function FieldPanel({ title, properties, onChange, menus }: { title: string; properties: SWHeaderProperty[]; onChange?: (property: SWHeaderProperty, value: string) => void; menus?: SWHeaderPropertyMenus }) {
|
||
return <SWTheme><SWHeaderPropertyPanel selection={{ id: title, title, kind: "none" }} properties={properties} groups={[{ id: "common" }]} onPropertyChange={onChange} menus={menus} /></SWTheme>
|
||
}
|
||
function PropertyFieldsHost() {
|
||
const [properties, setProperties] = useState(FIELD_FIXTURE)
|
||
const [log, setLog] = useState<string[]>([])
|
||
const record = (line: string) => setLog(lines => [...lines.slice(-11), line])
|
||
const menus = usePropertyMenus(record, setProperties as (update: (items: SWHeaderProperty[]) => SWHeaderProperty[]) => void)
|
||
const [noMenus, setNoMenus] = useState(false)
|
||
const patch = (id: string, change: Partial<SWHeaderProperty>) => setProperties(items => items.map(item => item.id === id ? { ...item, ...change } : item))
|
||
const change = (property: SWHeaderProperty, value: string) => {
|
||
record(`property(${property.id}, ${value})`)
|
||
patch(property.id, { value, mixed: false, ...(property.id === "line" ? { linePattern: linePatternOf(value) } : {}), ...(property.id === "color" ? { swatch: undefined } : {}) })
|
||
}
|
||
return <div data-fields-demo="">
|
||
<div><strong>외부 데이터</strong>
|
||
<button data-action="layer-mixed" onClick={() => patch("layer-mixed", { mixed: !properties.find(item => item.id === "layer-mixed")?.mixed })}>레이어 다양함 ↔ 단일</button>
|
||
<button data-action="layer-external" onClick={() => patch("layer", { value: "CC-D GNL" })}>레이어 외부 값 변경</button>
|
||
<button data-action="scale-external" onClick={() => patch("scale", { value: "2.5000" })}>선축적 외부 값 변경</button>
|
||
<button data-action="thickness-unit" onClick={() => patch("thickness", { unit: properties.find(item => item.id === "thickness")?.unit === "mm" ? "cm" : "mm" })}>두께 단위 변경</button>
|
||
<button data-action="line-center" onClick={() => patch("line", { value: "CENTER", linePattern: linePatternOf("CENTER") })}>선스타일 외부 CENTER</button>
|
||
<button data-action="readonly" onClick={() => setProperties(items => items.map(item => item.id === "thickness" || item.id === "layer" ? { ...item, readOnly: !item.readOnly } : item))}>두께·레이어 ReadOnly</button>
|
||
<button data-action="disabled" onClick={() => setProperties(items => items.map(item => item.id === "scale" || item.id === "color" ? { ...item, disabled: !item.disabled } : item))}>선축적·색상 Disabled</button>
|
||
<button data-action="add-row" onClick={() => setProperties(items => [...items, { id: `extra-${items.length}`, name: "추가 속성", value: "호스트 값", type: "text", groupId: "common" }])}>속성 추가</button>
|
||
<button data-action="remove-row" onClick={() => setProperties(items => items.filter(item => item.id !== "link"))}>하이퍼링크 삭제</button>
|
||
<button data-action="no-menus" onClick={() => setNoMenus(value => !value)}>menus 없음(options 사용): {String(noMenus)}</button>
|
||
</div>
|
||
<p data-property-log="" aria-live="polite">{log.join(" → ") || "Callback 없음"}</p>
|
||
<div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
|
||
<figure style={{ margin: 0 }} data-fields="live"><FieldPanel title="실제 조작" properties={properties} onChange={change} menus={noMenus ? undefined : menus} /></figure>
|
||
<figure style={{ margin: 0 }} data-fields="default"><FieldPanel title="Default" properties={FIELD_FIXTURE} /></figure>
|
||
<figure style={{ margin: 0 }} data-fields="hover"><PinHover selectors={FIELD_HOVER}><FieldPanel title="Hover" properties={FIELD_FIXTURE} /></PinHover></figure>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
/* SW/Header › Property Panel (retired in 5faa1f1): SWHeader with the propertyPanel prop and the selection buttons. */
|
||
function HeaderPanelHost() {
|
||
const [selection, setSelection] = useState(propertySelection("none"))
|
||
const [properties, setProperties] = useState(propertyFixture("none"))
|
||
const [expanded, setExpanded] = useState<string[]>([])
|
||
const menus = usePropertyMenus(() => {}, setProperties)
|
||
const changeExample = (next: PropertyExample) => {
|
||
setSelection(propertySelection(next)); setProperties(propertyFixture(next))
|
||
setExpanded(next === "expanded" ? ["common"] : [])
|
||
}
|
||
const panel = {
|
||
selection, properties, groups: PROPERTY_GROUPS, expandedGroupIds: expanded, menus,
|
||
onExpandedGroupsChange: setExpanded,
|
||
onPropertyChange: (property: SWHeaderProperty, value: string) => setProperties(items => items.map(item => item.id === property.id ? { ...item, value, mixed: false } : item)),
|
||
onOverviewClick: () => changeExample("all"),
|
||
}
|
||
return <div data-property-demo="">
|
||
<div>{(["none", "all", "circle", "expanded"] as const).map((name, index) => <button key={name} data-example-button={name} onClick={() => changeExample(name)}>{["선택 없음", "전체 선택", "원 1개", "모두 펼침"][index]}</button>)}</div>
|
||
<div style={{ width: 1920, minHeight: 820 }}>
|
||
<SWHeader documentTitle="C0020101-006-평면및종단면도(06)" drawingModeLabel="그리기모드" layer={{ name: "0_Layer_Cludmark" }} color={{ value: "255,229,0", swatch: "#ffe500" }}
|
||
lineStyle={{ name: "Continuous", weight: "0.25", scale: "1.00" }} textStyle={{ font: "Arial", name: "Standard" }} dimensionStyle={{ name: "Standard" }} propertyPanel={panel} />
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
const view = new URLSearchParams(location.search).get("view")
|
||
createRoot(document.getElementById("root")!).render(view === "header" ? <HeaderPanelHost /> : <PropertyFieldsHost />)
|