feat(sw): integrate responsive home menu into header
- Merge SW / Home Menu Stories into SW / Header (sidebar: Home Menu; others verification-tagged) - Home On: logo hover ring and header top/bottom #5F4B0F lines while the menu is open - Measured More in SWHeader; home menu narrow widths use a More (...) section with a grouped text menu instead of horizontal scroll, placed right after the last visible section - Action tiles no longer stay on after a click; 최근파일 stays Active only while its list is open - More dropdown and recent files list never open together; list top joins the accent line - Recent files preview falls back left / over the list at narrow widths (390px) - Update Storybook, browser tests, docs, AI guides and QA evidence
This commit is contained in:
shkim4 committed
1 parent
c542bdc282
commit
170a5c23ae
71 files changed
+12535
-150
No files matched your search
@@ -42,6 +42,34 @@ const frameControls: readonly SWHeaderFrameControlId[] = ["home", "windowMove",
|
||||
const subControls: readonly SWHeaderSubControlId[] = ["documentNew", "documentOpen", "layerFreeze", "layerLock"]
|
||||
const isMenu = (id: string): id is SWHeaderMenuId => id in menuSlot
|
||||
|
||||
/**
|
||||
* Order in which visible parts move into More when the measured object area has no room left (on top of the
|
||||
* breakpoints): the breakpoint tier order — line / text / dimension style, 그리기모드, the property block, color,
|
||||
* print / K — and within a tier the rightmost part first. The representative field never moves.
|
||||
*/
|
||||
const squeezeRank: Partial<Record<SWHeaderControlId, number>> = {
|
||||
lineStyle: 0, textStyle: 0, dimensionStyle: 0, drawingMode: 1, details: 2, propertyBar: 2, propertyPanel: 2, color: 3, print: 4, popupGuide: 4,
|
||||
}
|
||||
|
||||
/**
|
||||
* Room left in the object area (negative: missing) when nothing in it shrinks, grows or takes free space through an
|
||||
* auto margin (`data-measuring`, see sw.css "Measured More"). Read and reset in one layout effect, never painted.
|
||||
* Only in-flow children count: dropdowns, tooltips and other positioned layers never change the result.
|
||||
*/
|
||||
function measureRoom(header: HTMLElement, area: HTMLElement) {
|
||||
header.setAttribute("data-measuring", "")
|
||||
const style = getComputedStyle(area)
|
||||
const end = area.getBoundingClientRect().right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight)
|
||||
let used = area.getBoundingClientRect().left + parseFloat(style.borderLeftWidth) + parseFloat(style.paddingLeft)
|
||||
for (const child of Array.from(area.children)) {
|
||||
const childStyle = getComputedStyle(child)
|
||||
if (childStyle.display === "none" || childStyle.position === "absolute" || childStyle.position === "fixed") continue
|
||||
used = Math.max(used, child.getBoundingClientRect().right + parseFloat(childStyle.marginRight))
|
||||
}
|
||||
header.removeAttribute("data-measuring")
|
||||
return end - used
|
||||
}
|
||||
|
||||
/**
|
||||
* Menu order: listed known ids first (duplicates and unknown ids ignored), missing ids after them in
|
||||
* the default order. Menus only swap places among the slots menus already take; other parts never move.
|
||||
@@ -170,8 +198,9 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
const enabled = (id: SWHeaderControlId) => configuration.some(item => item.id === id)
|
||||
// Default design with removed object parts: same structure and breakpoints, but the script decides what
|
||||
// moves into More (the CSS alone assumes every field is present). Untouched defaults stay CSS-only.
|
||||
// Sub-items live inside a part and never change the layout mode.
|
||||
const scripted = controls !== undefined || [...removed].some(id => !frameControls.includes(id as SWHeaderFrameControlId) && !subControls.includes(id as SWHeaderSubControlId))
|
||||
// Sub-items live inside a part and never change the layout mode. Parts measured into More also need the script.
|
||||
const [squeezed, setSqueezed] = useState<readonly string[]>([])
|
||||
const scripted = controls !== undefined || squeezed.length > 0 || [...removed].some(id => !frameControls.includes(id as SWHeaderFrameControlId) && !subControls.includes(id as SWHeaderSubControlId))
|
||||
const layerStates = { showFreeze: shown("layerFreeze"), showLock: shown("layerLock") }
|
||||
const presentRef = useRef(new Set(configuration.map(item => item.id)))
|
||||
presentRef.current = new Set(configuration.map(item => item.id))
|
||||
@@ -214,6 +243,7 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
|
||||
|
||||
const [headerWidth, setHeaderWidth] = useState(1920)
|
||||
const [, setAreaWidth] = useState(0)
|
||||
const [barOffset, setBarOffset] = useState(0)
|
||||
// Open next to the logo (documentOpenPlacement="header") moves into More when the measured header has no room.
|
||||
const openInHeader = documentOpenPlacement === "header" && shown("documentOpen")
|
||||
@@ -228,6 +258,8 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
const update = () => {
|
||||
const bounds = header.getBoundingClientRect()
|
||||
setHeaderWidth(bounds.width)
|
||||
// The object area can change alone (leading content, file name, window area): it re-runs the measured More.
|
||||
setAreaWidth(panelAnchorRef.current?.getBoundingClientRect().width ?? 0)
|
||||
setBarOffset((panelAnchorRef.current?.getBoundingClientRect().left ?? bounds.left) - bounds.left)
|
||||
}
|
||||
const observer = new ResizeObserver(update)
|
||||
@@ -237,8 +269,7 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
// Space for the parts right of the logo, measured: the file name gives way first (its CSS clamp subtracts
|
||||
// --hm-sw-header-leading-width). Open moves into More only when the bar or object area really overflows,
|
||||
// and returns once the header is wider than at that moment by the Open width (no flicker at the edge).
|
||||
// --hm-sw-header-leading-width). Open and the other parts move into More by measurement (see "Measured More").
|
||||
useLayoutEffect(() => {
|
||||
const header = fieldsRef.current?.closest<HTMLElement>(".hm-sw-header")
|
||||
if (!header) return
|
||||
@@ -248,22 +279,6 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
if (value) header.style.setProperty("--hm-sw-header-leading-width", value)
|
||||
else header.style.removeProperty("--hm-sw-header-leading-width")
|
||||
}
|
||||
if (!openInHeader) {
|
||||
collapseRef.current = null
|
||||
if (openCollapsed) setOpenCollapsed(false)
|
||||
return
|
||||
}
|
||||
if (!openCollapsed) {
|
||||
const bar = header.querySelector<HTMLElement>(":scope > .hm-sw-header__bar")
|
||||
const overflow = [bar, panelAnchorRef.current].some(element => !!element && element.scrollWidth - element.clientWidth > 1)
|
||||
const open = leadingRef.current?.querySelector<HTMLElement>("[data-document-open]")
|
||||
if (overflow && open) {
|
||||
collapseRef.current = { at: header.getBoundingClientRect().width, width: open.getBoundingClientRect().width + 2 }
|
||||
setOpenCollapsed(true)
|
||||
}
|
||||
} else if (collapseRef.current && headerWidth >= collapseRef.current.at + collapseRef.current.width) {
|
||||
setOpenCollapsed(false)
|
||||
}
|
||||
})
|
||||
|
||||
// Logo (home) menu: SWHeader owns its open state; a logo click toggles it instead of calling onHomeClick.
|
||||
@@ -303,9 +318,23 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
const menuIds = configuration.map(item => item.id).filter((id): id is SWHeaderMenuId => id in menuSlot)
|
||||
const baseMenu = menuIds.includes("layer") ? "layer" : menuIds[0]
|
||||
const validPromoted = promoted && enabled(promoted) ? promoted : null
|
||||
const isOverflow = (id: SWHeaderControlId) => id === "color" ? headerWidth < 900 : ["lineStyle", "textStyle", "dimensionStyle"].includes(id) ? headerWidth < 1800 : ["propertyBar", "propertyPanel", "details"].includes(id) ? headerWidth < 1080 : ["print", "popupGuide"].includes(id) ? headerWidth < 640 : false
|
||||
const breakpointOverflow = (id: SWHeaderControlId) => id === "color" ? headerWidth < 900 : ["lineStyle", "textStyle", "dimensionStyle"].includes(id) ? headerWidth < 1800 : ["propertyBar", "propertyPanel", "details"].includes(id) ? headerWidth < 1080 : ["print", "popupGuide"].includes(id) ? headerWidth < 640 : id === "drawingMode" ? headerWidth < 1180 : false
|
||||
// Measured More: the parts that can move (the default layout moves the property block as one part; print / K sit in
|
||||
// the window area there and keep the breakpoint). Keys of the moved parts are kept in move order.
|
||||
const squeezeGroups = (controls === undefined
|
||||
? [...menuIds.map(id => ({ key: id as string, ids: [id] as SWHeaderControlId[] })), { key: "drawingMode", ids: ["drawingMode"] as SWHeaderControlId[] },
|
||||
{ key: "properties", ids: ["details", "propertyBar", "propertyPanel"] as SWHeaderControlId[] }]
|
||||
: configuration.map(item => ({ key: item.id as string, ids: [item.id] })))
|
||||
.map((group, index) => ({ ...group, ids: group.ids.filter(id => enabled(id) && squeezeRank[id] !== undefined), index }))
|
||||
.filter(group => group.ids.length > 0)
|
||||
const squeezedIds = new Set(squeezeGroups.filter(group => squeezed.includes(group.key)).flatMap(group => group.ids))
|
||||
const isOverflow = (id: SWHeaderControlId) => breakpointOverflow(id) || squeezedIds.has(id)
|
||||
const representative = validPromoted && isOverflow(validPromoted) ? validPromoted : baseMenu
|
||||
const fieldHidden = (id: SWHeaderMenuId) => id !== representative && (isOverflow(id) || (id === baseMenu && representative !== baseMenu))
|
||||
// Next part to move: shown now, never the representative slot, lowest tier first, rightmost first within a tier.
|
||||
const squeezeCandidates = squeezeGroups
|
||||
.filter(group => !squeezed.includes(group.key) && !group.ids.some(id => id === baseMenu || id === validPromoted || (isMenu(id) ? fieldHidden(id) : isOverflow(id))))
|
||||
.sort((a, b) => (squeezeRank[a.ids[0]] ?? 0) - (squeezeRank[b.ids[0]] ?? 0) || b.index - a.index)
|
||||
// Removal is structural: close stale internal dropdown state silently, never send data callbacks.
|
||||
const controlKey = configuration.map(item => item.id).join(",")
|
||||
useEffect(() => {
|
||||
@@ -315,6 +344,51 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
if (!enabled("propertyBar")) setInternalBarOpen(false)
|
||||
}, [controlKey, openMenu, promoted])
|
||||
|
||||
// Measured More (2026-10-19): on top of the breakpoints, parts move into More while the object area has no room for
|
||||
// them (leading content, tools, labels, a side panel) and return once the room they freed is back, so the header
|
||||
// never relies on fixed widths alone. Open next to the logo moves first and returns last. One part per pass; the
|
||||
// passes are synchronous layout effects, so only the final layout is painted. Opening a menu never moves a part:
|
||||
// dropdowns and the logo menu are positioned layers, which the measurement ignores.
|
||||
const squeezeRef = useRef(new Map<string, { before: number; room?: number }>())
|
||||
useLayoutEffect(() => {
|
||||
const header = fieldsRef.current?.closest<HTMLElement>(".hm-sw-header")
|
||||
const area = panelAnchorRef.current
|
||||
// Wait for the measured header width (breakpoint state) to be rendered first.
|
||||
if (!header || !area || Math.abs(header.getBoundingClientRect().width - headerWidth) > 0.5) return
|
||||
if (!openInHeader) {
|
||||
collapseRef.current = null
|
||||
if (openCollapsed) return setOpenCollapsed(false)
|
||||
}
|
||||
// Parts removed from the configuration leave the list silently.
|
||||
const valid = squeezed.filter(key => squeezeGroups.some(group => group.key === key))
|
||||
if (valid.length !== squeezed.length) return setSqueezed(valid)
|
||||
const room = measureRoom(header, area)
|
||||
const last = squeezed[squeezed.length - 1]
|
||||
const metrics = last === undefined ? undefined : squeezeRef.current.get(last)
|
||||
// The room a part frees is measured once, right after it moved (More appearing and padding changes included).
|
||||
if (metrics && metrics.room === undefined) metrics.room = room - metrics.before
|
||||
if (room < -0.5) {
|
||||
const open = openShown ? leadingRef.current?.querySelector<HTMLElement>("[data-document-open]") : null
|
||||
if (open) {
|
||||
collapseRef.current = { at: header.getBoundingClientRect().width, width: open.getBoundingClientRect().width + 2 }
|
||||
return setOpenCollapsed(true)
|
||||
}
|
||||
const next = squeezeCandidates[0]
|
||||
if (next) {
|
||||
squeezeRef.current.set(next.key, { before: room })
|
||||
setSqueezed([...squeezed, next.key])
|
||||
}
|
||||
} else if (last !== undefined) {
|
||||
if (room >= (metrics?.room ?? Infinity) - 0.5) {
|
||||
squeezeRef.current.delete(last)
|
||||
setSqueezed(squeezed.slice(0, -1))
|
||||
}
|
||||
} else if (openCollapsed && collapseRef.current && headerWidth >= collapseRef.current.at + collapseRef.current.width) {
|
||||
// Open returns once the header is wider than when it moved by the Open width (no flicker at the edge).
|
||||
setOpenCollapsed(false)
|
||||
}
|
||||
})
|
||||
|
||||
const hasMenu: Record<SWHeaderMenuId, boolean> = {
|
||||
layer: layers !== undefined,
|
||||
color: colors !== undefined,
|
||||
@@ -518,7 +592,7 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
})
|
||||
|
||||
return (
|
||||
<header ref={ref} className={`hm-sw-header${className ? ` ${className}` : ""}`} data-leading={openShown ? "open" : hasLeading ? "" : undefined} {...rest}>
|
||||
<header ref={ref} className={`hm-sw-header${className ? ` ${className}` : ""}`} data-leading={openShown ? "open" : hasLeading ? "" : undefined} data-home-menu-open={homeOpen || undefined} {...rest}>
|
||||
<div className="hm-sw-header__bar">
|
||||
<SWHeaderHome onClick={!shown("home") ? undefined : homeMenu ? () => setHomeOpen(!homeOpen, "home") : onHomeClick} interactive={shown("home")} logo={logo} logoSrc={logoSrc} logoAlt={logoAlt}
|
||||
aria-expanded={homeMenu && shown("home") ? homeOpen : undefined} aria-controls={homeOpen ? homeMenu?.id ?? homeMenuId : undefined} />
|
||||
@@ -527,19 +601,19 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
|
||||
{leading}
|
||||
</div>}
|
||||
{controls === undefined && enabled("document") && documentNode}
|
||||
<div ref={panelAnchorRef} className="hm-sw-header__object-area" role="toolbar" aria-label="객체 수정" data-configured={controls !== undefined || undefined} data-promoted={promotedSlot ? menuSlot[promotedSlot] : undefined}>
|
||||
{controls === undefined && enabled("drawingMode") && <span className="hm-sw-header__mode">{drawingModeLabel}</span>}
|
||||
<div ref={panelAnchorRef} className="hm-sw-header__object-area" role="toolbar" aria-label="객체 수정" data-configured={controls !== undefined || undefined} data-promoted={promotedSlot ? menuSlot[promotedSlot] : undefined} data-squeezed={squeezed.length ? squeezed.join(" ") : undefined}>
|
||||
{controls === undefined && enabled("drawingMode") && !squeezedIds.has("drawingMode") && <span className="hm-sw-header__mode">{drawingModeLabel}</span>}
|
||||
<div ref={fieldsRef} className="hm-sw-header__fields" data-configured={controls !== undefined || undefined}>
|
||||
{controls ? configuration.map(config => {
|
||||
const hidden = config.id in menuSlot ? fieldHidden(config.id as SWHeaderMenuId) : isOverflow(config.id) || (config.id === "drawingMode" && headerWidth < 1180)
|
||||
const hidden = config.id in menuSlot ? fieldHidden(config.id as SWHeaderMenuId) : isOverflow(config.id)
|
||||
return <div key={config.id} className="hm-sw-header__control" data-control={config.id} data-hidden={hidden || undefined}>{presence(config.id, configuredNodes[config.id])}</div>
|
||||
}) : scripted ? menuIds.map(id => (
|
||||
<div key={id} className="hm-sw-header__control" data-control={id} data-hidden={fieldHidden(id) || undefined} data-representative={(id === representative && id !== baseMenu) || undefined}>{presence(id, fieldNodes[id])}</div>
|
||||
)) : menuIds.map(id => <Fragment key={id}>{fieldNodes[id]}</Fragment>)}
|
||||
{tools}
|
||||
</div>
|
||||
{moreItems.some(item => item.visible !== false) && <SWHeaderMore items={moreItems} forceVisible={openCollapsed} />}
|
||||
{controls === undefined && <SWHeaderProperties barOpen={barOpen} panelOpen={panelOpen} panelId={propertyPanel ? panelId : undefined} disabled={disabled} onBarToggle={toggleBar} onPanelToggle={togglePanel} showCaption={enabled("details")} showBar={enabled("propertyBar")} showPanel={enabled("propertyPanel")} />}
|
||||
{moreItems.some(item => item.visible !== false) && <SWHeaderMore items={moreItems} forceVisible={openCollapsed || squeezed.length > 0} />}
|
||||
{controls === undefined && !squeezed.includes("properties") && <SWHeaderProperties barOpen={barOpen} panelOpen={panelOpen} panelId={propertyPanel ? panelId : undefined} disabled={disabled} onBarToggle={toggleBar} onPanelToggle={togglePanel} showCaption={enabled("details")} showBar={enabled("propertyBar")} showPanel={enabled("propertyPanel")} />}
|
||||
</div>
|
||||
{windowShown && <div className="hm-sw-header__window" data-configured={controls !== undefined || undefined} data-reduced={windowReduced || undefined}>
|
||||
{actionsShown && <SWHeaderActions disabled={disabled} onPrint={onPrint} onPopupGuide={onPopupGuide} showPrint={enabled("print")} showPopupGuide={enabled("popupGuide")} />}
|
||||
|
||||
Reference in new issue
Block a user