feat(sw): viewer mode header, dropdown and popup panel
- SWViewerHeader: data-driven viewer menu (button / toggle / menu / tabs / switch / custom), More by collapseBelow, trailing slot, onCommand; SWHeader logo props with no default logo - SWViewerMenu: dropdown, check / radio, multi-level submenu, context menu at a point - SWViewerPanel: viewer popup frame with free children / footer, drag, corner resize, collapse, modal - Panel controls: SWViewerSection / Field / Hint / Switch / Slider / Input / Button / Badge / Status - SWHeader black text outline tokens on viewer text, matching icon outline (drop-shadow) - Storybook SW/Viewer stories; remove SW/Tool story (SW/Popup kept) - AI guide ai/VIEWER.md, example H, verification scripts and evidence
This commit is contained in:
shkim4 committed
1 parent
e8409eff44
commit
7f42923ccf
50 files changed
+3838
-92
No files matched your search
@@ -0,0 +1,236 @@
|
||||
import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type HTMLAttributes, type KeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react"
|
||||
import "../../theme/sw-viewer.css"
|
||||
|
||||
export type SWViewerPanelPlacement = "top-end" | "top-start" | "center"
|
||||
|
||||
export interface SWViewerPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
||||
/** Title (14px 700 #FFC600, ellipsis). Also the accessible name. */
|
||||
title: string
|
||||
/** 16px title icon supplied by the program. */
|
||||
icon?: ReactNode
|
||||
/** Shown when true. Unmounted otherwise (no hidden DOM). */
|
||||
open: boolean
|
||||
/** Close button, and Escape while focus is inside the panel. */
|
||||
onClose: () => void
|
||||
closeLabel?: string
|
||||
/** Extra title-bar buttons before collapse / close (use `SWViewerButton variant="ghost"`). */
|
||||
headerActions?: ReactNode
|
||||
/** Free body content: SWViewerSection / SWViewerField / lists / any component. The body scrolls. */
|
||||
children?: ReactNode
|
||||
/** Bottom button area (e.g. 취소 / 적용). Stays visible while the body scrolls. */
|
||||
footer?: ReactNode
|
||||
/** Initial size. Default 320 x 420 (reference panel). `height: "auto"` follows the content. */
|
||||
width?: number
|
||||
height?: number | "auto"
|
||||
minWidth?: number
|
||||
minHeight?: number
|
||||
/** Initial position: a point, or a placement inside the bounds. Default `top-end`. */
|
||||
defaultPosition?: { left: number; top: number } | SWViewerPanelPlacement
|
||||
/** Placement insets in px. Default `{ top: 56, side: 24 }` (below the 52px viewer header). */
|
||||
inset?: { top?: number; side?: number }
|
||||
/** `fixed` (default): the viewport. `absolute`: the nearest positioned ancestor (embedded preview). */
|
||||
strategy?: "fixed" | "absolute"
|
||||
/** Drag by the title bar. Default true. */
|
||||
draggable?: boolean
|
||||
/** Corner grip resize (min / max size, kept inside the bounds). Default true. */
|
||||
resizable?: boolean
|
||||
/** Collapse button and title double click. Default true. */
|
||||
collapsible?: boolean
|
||||
defaultCollapsed?: boolean
|
||||
collapsed?: boolean
|
||||
onCollapsedChange?: (collapsed: boolean) => void
|
||||
/** Dim backdrop, focus trap and centered default (input / confirm popups). Default false. */
|
||||
modal?: boolean
|
||||
/** Focus the panel when it opens; focus returns to the previous element when it closes. Default true. */
|
||||
autoFocus?: boolean
|
||||
onPositionChange?: (position: { left: number; top: number }) => void
|
||||
/** After a corner resize. */
|
||||
onSizeChange?: (size: { width: number; height: number }) => void
|
||||
}
|
||||
|
||||
let topLayer = 30
|
||||
const EDGE = 10
|
||||
const INTERACTIVE = "button, input, select, textarea, a, label, [data-panel-no-drag]"
|
||||
|
||||
const Chevron = ({ down }: { down: boolean }) => (
|
||||
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d={down ? "M4 6l4 4 4-4" : "M6 4l4 4-4 4"} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
|
||||
)
|
||||
|
||||
function bounds(element: HTMLElement | null, strategy: "fixed" | "absolute") {
|
||||
const parent = strategy === "absolute" ? element?.offsetParent as HTMLElement | null : null
|
||||
return parent ? { width: parent.clientWidth, height: parent.clientHeight } : { width: document.documentElement.clientWidth, height: window.innerHeight }
|
||||
}
|
||||
|
||||
function clamp(left: number, top: number, element: HTMLElement, strategy: "fixed" | "absolute") {
|
||||
const box = bounds(element, strategy)
|
||||
return {
|
||||
left: Math.round(Math.min(Math.max(left, EDGE), Math.max(EDGE, box.width - element.offsetWidth - EDGE))),
|
||||
top: Math.round(Math.min(Math.max(top, EDGE), Math.max(EDGE, box.height - element.offsetHeight - EDGE))),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* SW viewer popup / settings window (reference DWG/DXF viewer floating panel): #E0DACE body, 2px #897445 border,
|
||||
* #221D13 title bar with #FFC600 title, collapse and the curved green close (#E40000 on hover). Non-modal by
|
||||
* default: drag by the title bar, corner resize, collapse, stays inside the bounds, Escape inside closes, the
|
||||
* last touched panel comes to the front. The frame is fixed; `children` / `footer` are free.
|
||||
*/
|
||||
export function SWViewerPanel({
|
||||
title, icon, open, onClose, closeLabel = "닫기", headerActions, children, footer,
|
||||
width = 320, height = 420, minWidth = 250, minHeight = 140, defaultPosition, inset, strategy = "fixed",
|
||||
draggable = true, resizable = true, collapsible = true, defaultCollapsed = false, collapsed: collapsedProp, onCollapsedChange,
|
||||
modal = false, autoFocus = true, onPositionChange, onSizeChange, className, style, onKeyDown, onPointerDownCapture, onFocusCapture, ...rest
|
||||
}: SWViewerPanelProps) {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const titleId = useId()
|
||||
const closeGradient = `hm-sw-viewer-close-${useId().replace(/:/g, "")}`
|
||||
const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
|
||||
const [layer, setLayer] = useState(() => ++topLayer)
|
||||
const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed)
|
||||
const collapsed = collapsible && (collapsedProp ?? internalCollapsed)
|
||||
const drag = useRef<{ x: number; y: number; left: number; top: number } | null>(null)
|
||||
// Size after a corner resize (null: the width / height props).
|
||||
const [size, setSize] = useState<{ width: number; height: number } | null>(null)
|
||||
const resize = useRef<{ x: number; y: number; width: number; height: number } | null>(null)
|
||||
const positionRef = useRef(position)
|
||||
positionRef.current = position
|
||||
const placement = defaultPosition ?? (modal ? "center" : "top-end")
|
||||
|
||||
// Initial position, measured once per opening; then kept inside the bounds when they change.
|
||||
useLayoutEffect(() => {
|
||||
if (!open) { setPosition(null); setSize(null); return }
|
||||
const panel = ref.current
|
||||
if (!panel) return
|
||||
const box = bounds(panel, strategy)
|
||||
const top = inset?.top ?? 56, side = inset?.side ?? 24
|
||||
const start = typeof placement === "object" ? placement
|
||||
: placement === "center" ? { left: (box.width - panel.offsetWidth) / 2, top: (box.height - panel.offsetHeight) / 2 }
|
||||
: { left: placement === "top-end" ? box.width - panel.offsetWidth - side : side, top }
|
||||
setPosition(clamp(start.left, start.top, panel, strategy))
|
||||
const keepInside = () => { const current = positionRef.current; if (current && ref.current) setPosition(clamp(current.left, current.top, ref.current, strategy)) }
|
||||
window.addEventListener("resize", keepInside)
|
||||
const parent = strategy === "absolute" ? panel.offsetParent : null
|
||||
const observer = parent ? new ResizeObserver(keepInside) : null
|
||||
if (parent) observer?.observe(parent)
|
||||
return () => { window.removeEventListener("resize", keepInside); observer?.disconnect() }
|
||||
}, [open])
|
||||
|
||||
// Focus in once positioned (a hidden panel cannot take focus), back to the opener on close.
|
||||
const placed = position !== null
|
||||
useEffect(() => {
|
||||
if (!open || !autoFocus) return
|
||||
const previous = document.activeElement as HTMLElement | null
|
||||
return () => { if (previous?.isConnected) previous.focus({ preventScroll: true }) }
|
||||
}, [open, autoFocus])
|
||||
useEffect(() => {
|
||||
if (open && autoFocus && placed && !ref.current?.contains(document.activeElement)) ref.current?.focus({ preventScroll: true })
|
||||
}, [open, autoFocus, placed])
|
||||
|
||||
if (!open) return null
|
||||
const raise = () => { if (layer !== topLayer) setLayer(++topLayer) }
|
||||
const setCollapsed = (next: boolean) => { if (collapsedProp === undefined) setInternalCollapsed(next); onCollapsedChange?.(next) }
|
||||
|
||||
const onTitlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
if (!draggable || event.button !== 0 || (event.target as HTMLElement).closest(INTERACTIVE) || !ref.current || !position) return
|
||||
drag.current = { x: event.clientX, y: event.clientY, left: position.left, top: position.top }
|
||||
event.currentTarget.setPointerCapture(event.pointerId)
|
||||
event.currentTarget.dataset.dragging = ""
|
||||
}
|
||||
const onTitlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
const start = drag.current
|
||||
if (!start || !ref.current) return
|
||||
setPosition(clamp(start.left + event.clientX - start.x, start.top + event.clientY - start.y, ref.current, strategy))
|
||||
}
|
||||
const onTitlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
if (!drag.current) return
|
||||
drag.current = null
|
||||
delete event.currentTarget.dataset.dragging
|
||||
if (positionRef.current) onPositionChange?.(positionRef.current)
|
||||
}
|
||||
const onGripPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
if (event.button !== 0 || !ref.current) return
|
||||
event.preventDefault()
|
||||
resize.current = { x: event.clientX, y: event.clientY, width: ref.current.offsetWidth, height: ref.current.offsetHeight }
|
||||
event.currentTarget.setPointerCapture(event.pointerId)
|
||||
}
|
||||
const onGripPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
const start = resize.current, panel = ref.current
|
||||
if (!start || !panel || !position) return
|
||||
const box = bounds(panel, strategy)
|
||||
// Min size, 90% of the bounds, and never past the bounds edge (10px) from the current corner.
|
||||
const maxWidth = Math.min(box.width * 0.9, box.width - position.left - EDGE), maxHeight = Math.min(box.height * 0.9, box.height - position.top - EDGE)
|
||||
setSize({
|
||||
width: Math.round(Math.max(minWidth, Math.min(maxWidth, start.width + event.clientX - start.x))),
|
||||
height: Math.round(Math.max(minHeight, Math.min(maxHeight, start.height + event.clientY - start.y))),
|
||||
})
|
||||
}
|
||||
const onGripPointerUp = () => {
|
||||
if (!resize.current) return
|
||||
resize.current = null
|
||||
if (ref.current) onSizeChange?.({ width: ref.current.offsetWidth, height: ref.current.offsetHeight })
|
||||
}
|
||||
const onPanelKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||
onKeyDown?.(event)
|
||||
if (event.defaultPrevented || event.nativeEvent.isComposing) return
|
||||
if (event.key === "Escape") { event.stopPropagation(); onClose(); return }
|
||||
if (modal && event.key === "Tab" && ref.current) {
|
||||
const focusables = Array.from(ref.current.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), a[href], [tabindex]:not([tabindex="-1"])'))
|
||||
if (!focusables.length) { event.preventDefault(); return }
|
||||
const first = focusables[0], last = focusables[focusables.length - 1]
|
||||
if (event.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) { event.preventDefault(); last.focus() }
|
||||
else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus() }
|
||||
}
|
||||
}
|
||||
|
||||
const frameStyle: CSSProperties = {
|
||||
position: strategy,
|
||||
left: position?.left ?? 0,
|
||||
top: position?.top ?? 0,
|
||||
zIndex: layer,
|
||||
width: size?.width ?? width,
|
||||
height: collapsed || (height === "auto" && !size) ? "auto" : size?.height ?? height,
|
||||
minWidth,
|
||||
minHeight: collapsed ? undefined : Math.min(minHeight, typeof height === "number" ? height : minHeight),
|
||||
visibility: position ? undefined : "hidden",
|
||||
...style,
|
||||
}
|
||||
const panel = (
|
||||
<div ref={ref} role="dialog" aria-modal={modal} aria-labelledby={titleId} tabIndex={-1}
|
||||
className={`hm-sw-theme hm-sw-viewer-panel${className ? ` ${className}` : ""}`} data-collapsed={collapsed || undefined} data-modal={modal || undefined}
|
||||
style={frameStyle} {...rest}
|
||||
onKeyDown={onPanelKeyDown}
|
||||
onPointerDownCapture={event => { raise(); onPointerDownCapture?.(event) }}
|
||||
onFocusCapture={event => { raise(); onFocusCapture?.(event) }}>
|
||||
<div className="hm-sw-viewer-panel__titlebar" data-draggable={draggable || undefined}
|
||||
onPointerDown={onTitlePointerDown} onPointerMove={onTitlePointerMove} onPointerUp={onTitlePointerUp} onPointerCancel={onTitlePointerUp}
|
||||
onDoubleClick={event => { if (collapsible && !(event.target as HTMLElement).closest(INTERACTIVE)) setCollapsed(!collapsed) }}>
|
||||
<h2 id={titleId} className="hm-sw-viewer-panel__title" title={title}>
|
||||
{icon && <span className="hm-sw-viewer-panel__title-icon" aria-hidden="true">{icon}</span>}
|
||||
<span className="hm-sw-viewer-panel__title-text">{title}</span>
|
||||
</h2>
|
||||
<div className="hm-sw-viewer-panel__actions">
|
||||
{headerActions}
|
||||
{collapsible && <button type="button" className="hm-sw-viewer-panel__icon-button" aria-label={collapsed ? "펼치기" : "접기"} title={collapsed ? "펼치기" : "접기"} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}><Chevron down={!collapsed} /></button>}
|
||||
<button type="button" className="hm-sw-viewer-panel__close" aria-label={closeLabel} title={closeLabel} onClick={onClose}>
|
||||
<svg className="hm-sw-viewer-panel__close-shape" viewBox="0 0 52 34" preserveAspectRatio="none" aria-hidden="true" focusable="false">
|
||||
<defs>
|
||||
<radialGradient id={closeGradient} cx="55%" cy="30%" r="85%">
|
||||
<stop offset="0%" stopColor="var(--hm-sw-viewer-close-glow)" />
|
||||
<stop offset="100%" stopColor="var(--hm-sw-viewer-close-edge)" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<path d="M 0 0 C 12 0 14 34 26 34 H 52 V 0 Z" fill={`url(#${closeGradient})`} />
|
||||
<path className="hm-sw-viewer-panel__close-curve" d="M 0 0 C 12 0 14 34 26 34" fill="none" vectorEffect="non-scaling-stroke" />
|
||||
</svg>
|
||||
<svg className="hm-sw-viewer-panel__close-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!collapsed && <div className="hm-sw-viewer-panel__body">{children}</div>}
|
||||
{!collapsed && footer && <div className="hm-sw-viewer-panel__footer">{footer}</div>}
|
||||
{resizable && !collapsed && <div className="hm-sw-viewer-panel__resize" aria-hidden="true" data-panel-no-drag=""
|
||||
onPointerDown={onGripPointerDown} onPointerMove={onGripPointerMove} onPointerUp={onGripPointerUp} onPointerCancel={onGripPointerUp} />}
|
||||
</div>
|
||||
)
|
||||
return modal ? <><div className="hm-sw-viewer-panel-backdrop" style={{ position: strategy, zIndex: layer }} aria-hidden="true" />{panel}</> : panel
|
||||
}
|
||||
Reference in new issue
Block a user