shkim4andClaude Opus 5.5
55179b4577
SW package 0.2.0 integrated improvement (Task A, steps 1-8). All new props are
optional; existing SW Stories are pixel-identical to the previous build (28/28).
- Build reproducibility: dist text normalized to LF, dist/build-info.json
(commit, dirty, tool versions, no timestamp), packages/sw/.gitattributes
(eol=lf). LF checkouts give identical dist and tarball.
- SWHeader: documentOpenPlacement ("menu" default | "header": Open right of
the logo in the existing document-button look, reusing onDocumentOpen and
documentOpenLabel, no duplicate Open in the dropdown), leading slot,
hiddenControls sub-items documentNew / documentOpen / layerFreeze /
layerLock. Open moves into More on measured overflow (with hysteresis).
- showNew / showOpen (SWHeaderDocumentTitle), showFreeze / showLock (layer
menu, field, property window list).
- SWToolButton (text / pill / document) and SWToolGroup (radio selection),
reusing the existing toggle, pill and file-name looks.
- SWPopup / SWPopupSection / SWPopupRow on the shared property window frame;
SWHeaderPropertyPanel gains children, title, autoFocus and optional
selection / properties / groups. Escape stack for several popups.
- Field dropdowns inside a popup use the shared fixed overlay
(useSWFixedDropdownPosition), so the scrolling body no longer clips them.
- AI guide, examples E/F, README, Storybook (SW/Header/Options, SW/Tool,
SW/Popup) and verification record docs/sw/sw-integrated-improvement-2026-10-19.md.
- Regression scripts rescoped for the intended changes (unused-removal 81/81,
overview 52/54 with the two pre-existing historical assertions).
Known limitation (unresolved): tools / leading content (incl. SWToolGroup)
does not move into More. With a wide tool bar the configured fields shrink
instead; in Example F the document name and layer field reach 0px at 390px.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
512 lines
28 KiB
TypeScript
512 lines
28 KiB
TypeScript
import { forwardRef, useEffect, useLayoutEffect, Fragment, type ReactNode, useId, useRef, useState } from "react"
|
|
import { SWHeaderActions } from "./components/SWHeaderActions"
|
|
import { SWHeaderColorMenu } from "./components/SWHeaderColorMenu"
|
|
import { SWHeaderDocumentTitle } from "./components/SWHeaderDocumentTitle"
|
|
import {
|
|
SWHeaderColorControl, SWHeaderDimensionStyle, SWHeaderLayerControl,
|
|
SWHeaderLineStyle, SWHeaderTextStyle,
|
|
} from "./components/SWHeaderFields"
|
|
import { SWHeaderHome } from "./components/SWHeaderHome"
|
|
import { SWHeaderLayerMenu } from "./components/SWHeaderLayerMenu"
|
|
import { SWHeaderLineStyleMenu } from "./components/SWHeaderLineStyleMenu"
|
|
import { SWHeaderMore, type SWHeaderMoreItem } from "./components/SWHeaderMore"
|
|
import { SWHeaderProperties } from "./components/SWHeaderProperties"
|
|
import { SWHeaderPropertyBar } from "./components/SWHeaderPropertyBar"
|
|
import { SWHeaderCommitPresence } from "./components/SWHeaderInput"
|
|
import { SWHeaderKGuide } from "./components/SWHeaderKGuide"
|
|
import printIcon from "../../assets/print.svg"
|
|
import printHover from "../../assets/print-hover.svg"
|
|
import { SWHeaderPropertyPanel } from "./components/SWHeaderPropertyPanel"
|
|
import { SWHeaderDimensionStyleMenu, SWHeaderTextStyleMenu } from "./components/SWHeaderStyleListMenus"
|
|
import { SWHeaderWindowControls } from "./components/SWHeaderWindowControls"
|
|
import { SWToolButton } from "../sw-tool/SWTool"
|
|
import type { SWHeaderControlId, SWHeaderControlConfig, SWHeaderFrameControlId, SWHeaderHideableControlId, SWHeaderMenuId, SWHeaderProps, SWHeaderSubControlId } from "./types"
|
|
|
|
const defaults = {
|
|
layer: { name: "0" },
|
|
color: { value: "ByLayer", swatch: "#ffffff" },
|
|
lineStyle: { name: "ByLayer", weight: "ByLayer", scale: "1.00" },
|
|
textStyle: { font: "Arial", name: "Standard" },
|
|
dimensionStyle: { name: "Standard" },
|
|
}
|
|
|
|
/** `data-menu` of each field (its Figma variant name). */
|
|
const menuSlot: Record<SWHeaderMenuId, string> = {
|
|
layer: "layer", color: "color", lineStyle: "line-style", textStyle: "text-style", dimensionStyle: "dimension-style",
|
|
}
|
|
|
|
const defaultMenuOrder = Object.keys(menuSlot) as SWHeaderMenuId[]
|
|
const defaultControls: SWHeaderControlConfig[] = (["document", "drawingMode", ...defaultMenuOrder, "details", "propertyBar", "propertyPanel", "print", "popupGuide"] as const).map(id => ({ id }))
|
|
const frameControls: readonly SWHeaderFrameControlId[] = ["home", "windowMove", "minimize", "close"]
|
|
const subControls: readonly SWHeaderSubControlId[] = ["documentNew", "documentOpen", "layerFreeze", "layerLock"]
|
|
const isMenu = (id: string): id is SWHeaderMenuId => id in menuSlot
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
function orderMenus(items: SWHeaderControlConfig[], menuOrder?: readonly SWHeaderMenuId[]) {
|
|
if (!menuOrder) return items
|
|
const listed = menuOrder.filter((id, index) => isMenu(id) && menuOrder.indexOf(id) === index)
|
|
const rank = [...listed, ...defaultMenuOrder.filter(id => !listed.includes(id))]
|
|
const menus = items.filter(item => isMenu(item.id)).sort((a, b) => rank.indexOf(a.id as SWHeaderMenuId) - rank.indexOf(b.id as SWHeaderMenuId))
|
|
let next = 0
|
|
return items.map(item => (isMenu(item.id) ? menus[next++] : item))
|
|
}
|
|
|
|
/**
|
|
* SW Header (Figma node 26:8944, 1920 x 49). Pure presentation: values are props,
|
|
* user actions are callbacks, window behavior belongs to the host program.
|
|
*/
|
|
export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader(
|
|
{
|
|
documentTitle,
|
|
controls,
|
|
hiddenControls,
|
|
menuOrder,
|
|
documents,
|
|
documentMenuOpen,
|
|
onDocumentMenuOpenChange,
|
|
onDocumentSelect,
|
|
activeDocumentId,
|
|
onDocumentClose,
|
|
onDocumentNew,
|
|
onDocumentOpen,
|
|
documentIcon,
|
|
documentNewLabel,
|
|
documentOpenLabel,
|
|
documentOpenPlacement = "menu",
|
|
leading,
|
|
drawingModeLabel = "그리기모드",
|
|
layer = defaults.layer,
|
|
layers,
|
|
activeLayerId,
|
|
layerMenuOpen,
|
|
onLayerMenuOpenChange,
|
|
onLayerSelect,
|
|
onLayerVisibilityChange,
|
|
onLayerFreezeChange,
|
|
onLayerLockChange,
|
|
onLayerDetail,
|
|
color = defaults.color,
|
|
lineStyle = defaults.lineStyle,
|
|
textStyle = defaults.textStyle,
|
|
dimensionStyle = defaults.dimensionStyle,
|
|
colors,
|
|
userColors,
|
|
colorMode,
|
|
colorMenuOpen,
|
|
onColorMenuOpenChange,
|
|
onColorSelect,
|
|
onColorModeChange,
|
|
onColorInput,
|
|
onColorPick,
|
|
onColorDetail,
|
|
lineTypes,
|
|
lineWeights,
|
|
activeLineTypeId,
|
|
activeLineWeightId,
|
|
lineStyleMenuOpen,
|
|
onLineStyleMenuOpenChange,
|
|
onLineTypeSelect,
|
|
onLineWeightSelect,
|
|
onLineWeightValueChange,
|
|
onLineScaleChange,
|
|
onLineStyleDetail,
|
|
textStyles,
|
|
activeTextStyleId,
|
|
textStyleMenuOpen,
|
|
onTextStyleMenuOpenChange,
|
|
onTextStyleSelect,
|
|
onTextStyleDetail,
|
|
dimensionStyles,
|
|
activeDimensionStyleId,
|
|
dimensionStyleMenuOpen,
|
|
onDimensionStyleMenuOpenChange,
|
|
onDimensionStyleSelect,
|
|
onDimensionStyleDetail,
|
|
activeMenu = null,
|
|
propertyBarOpen,
|
|
defaultPropertyBarOpen = false,
|
|
propertyBar,
|
|
onPropertyBarOpenChange,
|
|
propertyPanelOpen,
|
|
propertyPanel,
|
|
onPropertyPanelOpenChange,
|
|
disabled = false,
|
|
tools,
|
|
logo,
|
|
logoSrc,
|
|
logoAlt,
|
|
onHomeClick,
|
|
onDocumentClick,
|
|
onLayerOpen,
|
|
onColorOpen,
|
|
onLineStyleOpen,
|
|
onTextStyleOpen,
|
|
onDimensionStyleOpen,
|
|
onPropertyBarToggle,
|
|
onPropertyPanelToggle,
|
|
onPrint,
|
|
onPopupGuide,
|
|
onWindowMoveStart,
|
|
onMinimize,
|
|
onClose,
|
|
className,
|
|
...rest
|
|
},
|
|
ref,
|
|
) {
|
|
// The logo is never in this list: it is always shown. Hidden parts are unmounted (no space, no popup, no callback).
|
|
const removed = new Set<string>(hiddenControls ?? [])
|
|
const shown = (id: SWHeaderHideableControlId) => !removed.has(id)
|
|
const seen = new Set<SWHeaderControlId>()
|
|
const configuration = orderMenus((controls ?? defaultControls).filter(item => item.visible !== false && shown(item.id) && !seen.has(item.id) && !!seen.add(item.id)), menuOrder)
|
|
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))
|
|
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))
|
|
const label = (id: SWHeaderControlId, fallback: string) => configuration.find(item => item.id === id)?.label ?? fallback
|
|
const [internalBarOpen, setInternalBarOpen] = useState(defaultPropertyBarOpen)
|
|
const barOpen = !disabled && enabled("propertyBar") && (propertyBarOpen ?? internalBarOpen)
|
|
const toggleBar = () => {
|
|
if (!enabled("propertyBar") || disabled) return
|
|
const next = !barOpen
|
|
if (propertyBarOpen === undefined) setInternalBarOpen(next)
|
|
onPropertyBarToggle?.()
|
|
onPropertyBarOpenChange?.(next)
|
|
}
|
|
// Uncontrolled open dropdown (one at a time). A controlled `*MenuOpen` prop takes precedence.
|
|
const [openMenu, setOpenMenu] = useState<SWHeaderMenuId | null>(null)
|
|
// Representative slot (UI state only, never program data): a field chosen in More takes the layer
|
|
// field's place while it is in More at the current width (CSS decides, see sw.css "Representative slot").
|
|
const [promoted, setPromoted] = useState<SWHeaderMenuId | null>(null)
|
|
const focusRef = useRef<SWHeaderMenuId | null>(null)
|
|
const fieldsRef = useRef<HTMLDivElement>(null)
|
|
const panelAnchorRef = useRef<HTMLDivElement>(null)
|
|
const panelId = useId()
|
|
const barId = useId()
|
|
const [internalPanelOpen, setInternalPanelOpen] = useState(false)
|
|
const panelOpen = !disabled && enabled("propertyPanel") && (propertyPanelOpen ?? internalPanelOpen)
|
|
const setPanelOpen = (next: boolean) => {
|
|
if (propertyPanelOpen === undefined) setInternalPanelOpen(next)
|
|
if (next !== panelOpen) onPropertyPanelOpenChange?.(next)
|
|
if (next) setOpenMenu(null)
|
|
}
|
|
const togglePanel = () => { onPropertyPanelToggle?.(); setPanelOpen(!panelOpen) }
|
|
const closePanel = () => {
|
|
if (propertyPanelOpen !== undefined && !onPropertyPanelOpenChange) onPropertyPanelToggle?.()
|
|
setPanelOpen(false)
|
|
const header = panelAnchorRef.current?.closest(".hm-sw-header")
|
|
const trigger = header?.querySelector<HTMLButtonElement>('[data-property-panel-trigger]')
|
|
const more = header?.querySelector<HTMLButtonElement>('.hm-sw-header__more-trigger')
|
|
;(trigger?.getClientRects().length ? trigger : more)?.focus()
|
|
}
|
|
|
|
|
|
const [headerWidth, setHeaderWidth] = useState(1920)
|
|
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")
|
|
const leadingRef = useRef<HTMLDivElement>(null)
|
|
const [openCollapsed, setOpenCollapsed] = useState(false)
|
|
const collapseRef = useRef<{ at: number; width: number } | null>(null)
|
|
const openShown = openInHeader && !openCollapsed
|
|
const hasLeading = openShown || (leading !== undefined && leading !== null && leading !== false)
|
|
useLayoutEffect(() => {
|
|
const header = fieldsRef.current?.closest(".hm-sw-header")
|
|
if (!header) return
|
|
const update = () => {
|
|
const bounds = header.getBoundingClientRect()
|
|
setHeaderWidth(bounds.width)
|
|
setBarOffset((panelAnchorRef.current?.getBoundingClientRect().left ?? bounds.left) - bounds.left)
|
|
}
|
|
const observer = new ResizeObserver(update)
|
|
update()
|
|
observer.observe(header)
|
|
if (panelAnchorRef.current) observer.observe(panelAnchorRef.current)
|
|
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).
|
|
useLayoutEffect(() => {
|
|
const header = fieldsRef.current?.closest<HTMLElement>(".hm-sw-header")
|
|
if (!header) return
|
|
const leadingWidth = leadingRef.current ? leadingRef.current.getBoundingClientRect().width : 0
|
|
const value = hasLeading ? `${leadingWidth + 2}px` : ""
|
|
if (header.style.getPropertyValue("--hm-sw-header-leading-width") !== value) {
|
|
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)
|
|
}
|
|
})
|
|
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 representative = validPromoted && isOverflow(validPromoted) ? validPromoted : baseMenu
|
|
const fieldHidden = (id: SWHeaderMenuId) => id !== representative && (isOverflow(id) || (id === baseMenu && representative !== baseMenu))
|
|
// Removal is structural: close stale internal dropdown state silently, never send data callbacks.
|
|
const controlKey = configuration.map(item => item.id).join(",")
|
|
useEffect(() => {
|
|
if (openMenu && !enabled(openMenu)) setOpenMenu(null)
|
|
if (promoted && !enabled(promoted)) setPromoted(null)
|
|
if (!enabled("propertyPanel")) setInternalPanelOpen(false)
|
|
if (!enabled("propertyBar")) setInternalBarOpen(false)
|
|
}, [controlKey, openMenu, promoted])
|
|
|
|
const hasMenu: Record<SWHeaderMenuId, boolean> = {
|
|
layer: layers !== undefined,
|
|
color: colors !== undefined,
|
|
lineStyle: lineTypes !== undefined || lineWeights !== undefined,
|
|
textStyle: textStyles !== undefined,
|
|
dimensionStyle: dimensionStyles !== undefined,
|
|
}
|
|
const openChange = (id: SWHeaderMenuId, callback?: (open: boolean) => void) => (next: boolean) => {
|
|
if (next && panelOpen) setPanelOpen(false)
|
|
setOpenMenu(current => (next ? id : current === id ? null : current))
|
|
callback?.(next)
|
|
}
|
|
const menuOpenProps = (id: SWHeaderMenuId, controlled: boolean | undefined, callback?: (open: boolean) => void) => ({
|
|
open: enabled(id) && (controlled ?? openMenu === id),
|
|
onOpenChange: openChange(id, callback),
|
|
})
|
|
const layerOpen = menuOpenProps("layer", layerMenuOpen, onLayerMenuOpenChange)
|
|
const colorOpen = menuOpenProps("color", colorMenuOpen, onColorMenuOpenChange)
|
|
const lineStyleOpen = menuOpenProps("lineStyle", lineStyleMenuOpen, onLineStyleMenuOpenChange)
|
|
const textStyleOpen = menuOpenProps("textStyle", textStyleMenuOpen, onTextStyleMenuOpenChange)
|
|
const dimensionStyleOpen = menuOpenProps("dimensionStyle", dimensionStyleMenuOpen, onDimensionStyleMenuOpenChange)
|
|
const openers: Record<SWHeaderMenuId, { onOpenChange: (open: boolean) => void; onOpen?: () => void }> = {
|
|
layer: { onOpenChange: layerOpen.onOpenChange, onOpen: onLayerOpen },
|
|
color: { onOpenChange: colorOpen.onOpenChange, onOpen: onColorOpen },
|
|
lineStyle: { onOpenChange: lineStyleOpen.onOpenChange, onOpen: onLineStyleOpen },
|
|
textStyle: { onOpenChange: textStyleOpen.onOpenChange, onOpen: onTextStyleOpen },
|
|
dimensionStyle: { onOpenChange: dimensionStyleOpen.onOpenChange, onOpen: onDimensionStyleOpen },
|
|
}
|
|
|
|
/**
|
|
* More → field: show the field in the representative slot (choosing the layer gives the slot back),
|
|
* open its dropdown right below and move focus to the field. Calls the field's open callback once,
|
|
* exactly like a click on the field; no data callback is called.
|
|
*/
|
|
const promote = (id: SWHeaderMenuId) => () => {
|
|
setPromoted(id === baseMenu ? null : id)
|
|
focusRef.current = id
|
|
if (hasMenu[id]) openers[id].onOpenChange(true)
|
|
openers[id].onOpen?.()
|
|
}
|
|
|
|
useEffect(() => {
|
|
const id = focusRef.current
|
|
if (!id) return
|
|
focusRef.current = null
|
|
// The slot is the field itself, or the wrapper of a field with a dropdown (layer: .hm-sw-header__layer).
|
|
const slot = fieldsRef.current?.querySelector<HTMLElement>(scripted ? `[data-control="${id}"]` : id === "layer" ? ":scope > :is(.hm-sw-header__layer, [data-menu='layer'])" : `:scope > [data-menu="${menuSlot[id]}"]`)
|
|
const field = slot?.matches(".hm-sw-header__field") ? slot : slot?.querySelector<HTMLElement>(".hm-sw-header__field")
|
|
field?.focus()
|
|
})
|
|
|
|
const currentLayerName = layers?.find(item => item.id === activeLayerId)?.name ?? layer.name
|
|
const allMoreItems: SWHeaderMoreItem[] = [
|
|
{ id: "layer", menu: "layer", label: "레이어", value: currentLayerName, tier: "slot", selected: activeMenu === "layer", disabled, onSelect: promote("layer") },
|
|
{ id: "color", menu: "color", label: "색상", value: color.value, tier: "narrow", selected: activeMenu === "color", disabled, onSelect: promote("color") },
|
|
{ id: "lineStyle", menu: "line-style", label: "선스타일", value: lineStyle.name, tier: "aux", selected: activeMenu === "lineStyle", disabled, onSelect: promote("lineStyle") },
|
|
{ id: "textStyle", menu: "text-style", label: "문자스타일", value: textStyle.name, tier: "aux", selected: activeMenu === "textStyle", disabled, onSelect: promote("textStyle") },
|
|
{ id: "dimensionStyle", menu: "dimension-style", label: "치수스타일", value: dimensionStyle.name, tier: "aux", selected: activeMenu === "dimensionStyle", disabled, onSelect: promote("dimensionStyle") },
|
|
{ id: "propertyBar", label: "속성Bar", tier: "panel", checked: barOpen, disabled, onSelect: toggleBar },
|
|
{ id: "propertyPanel", label: "속성창", tier: "panel", checked: panelOpen, disabled, onSelect: togglePanel },
|
|
{ id: "print", label: "인쇄", tier: "action", disabled, onSelect: onPrint },
|
|
{ id: "popupGuide", label: "팝업 가이드", tier: "action", disabled, guide: true, onSelect: onPopupGuide },
|
|
]
|
|
|
|
const moreItems = configuration.flatMap(config => {
|
|
const item = allMoreItems.find(item => item.id === config.id)
|
|
if (!item) return []
|
|
const hidden = config.id in menuSlot ? fieldHidden(config.id as SWHeaderMenuId) : isOverflow(config.id)
|
|
return [{ ...item, label: config.label ?? item.label, visible: scripted ? hidden : undefined }]
|
|
}).concat(openInHeader ? [{ id: "documentOpen", label: documentOpenLabel ?? "Open", tier: "action" as const, disabled, visible: openCollapsed, onSelect: onDocumentOpen }] : [])
|
|
const fieldNodes: Record<SWHeaderMenuId, ReactNode> = {
|
|
layer: (layers ? (
|
|
<SWHeaderLayerMenu label={label("layer", "레이어")}
|
|
value={layer}
|
|
layers={layers}
|
|
activeLayerId={activeLayerId}
|
|
{...layerOpen}
|
|
onClick={onLayerOpen}
|
|
selected={activeMenu === "layer"}
|
|
disabled={disabled}
|
|
onLayerSelect={onLayerSelect}
|
|
onVisibilityChange={onLayerVisibilityChange}
|
|
onFreezeChange={onLayerFreezeChange}
|
|
onLockChange={onLayerLockChange}
|
|
onDetail={onLayerDetail}
|
|
{...layerStates}
|
|
/>
|
|
) : (
|
|
<SWHeaderLayerControl label={label("layer", "레이어")} value={layer} selected={activeMenu === "layer"} disabled={disabled} onClick={onLayerOpen} {...layerStates} />
|
|
)),
|
|
color: (colors ? (
|
|
<SWHeaderColorMenu label={label("color", "색상")}
|
|
value={color}
|
|
colors={colors}
|
|
userColors={userColors}
|
|
mode={colorMode}
|
|
{...colorOpen}
|
|
onClick={onColorOpen}
|
|
selected={activeMenu === "color"}
|
|
disabled={disabled}
|
|
onColorSelect={onColorSelect}
|
|
onModeChange={onColorModeChange}
|
|
onColorInput={onColorInput}
|
|
onPick={onColorPick}
|
|
onDetail={onColorDetail}
|
|
/>
|
|
) : (
|
|
<SWHeaderColorControl label={label("color", "색상")} value={color} selected={activeMenu === "color"} disabled={disabled} onClick={onColorOpen} />
|
|
)),
|
|
lineStyle: (hasMenu.lineStyle ? (
|
|
<SWHeaderLineStyleMenu label={label("lineStyle", "선스타일")}
|
|
value={lineStyle}
|
|
lineTypes={lineTypes}
|
|
lineWeights={lineWeights}
|
|
activeLineTypeId={activeLineTypeId}
|
|
activeLineWeightId={activeLineWeightId}
|
|
{...lineStyleOpen}
|
|
onClick={onLineStyleOpen}
|
|
selected={activeMenu === "lineStyle"}
|
|
disabled={disabled}
|
|
onLineTypeSelect={onLineTypeSelect}
|
|
onLineWeightSelect={onLineWeightSelect}
|
|
onLineWeightValueChange={onLineWeightValueChange}
|
|
onScaleChange={onLineScaleChange}
|
|
onDetail={onLineStyleDetail}
|
|
/>
|
|
) : (
|
|
<SWHeaderLineStyle label={label("lineStyle", "선스타일")} value={lineStyle} selected={activeMenu === "lineStyle"} disabled={disabled} onClick={onLineStyleOpen} />
|
|
)),
|
|
textStyle: (textStyles ? (
|
|
<SWHeaderTextStyleMenu label={label("textStyle", "문자스타일")}
|
|
value={textStyle}
|
|
textStyles={textStyles}
|
|
activeTextStyleId={activeTextStyleId}
|
|
{...textStyleOpen}
|
|
onClick={onTextStyleOpen}
|
|
selected={activeMenu === "textStyle"}
|
|
disabled={disabled}
|
|
onTextStyleSelect={onTextStyleSelect}
|
|
onDetail={onTextStyleDetail}
|
|
/>
|
|
) : (
|
|
<SWHeaderTextStyle label={label("textStyle", "문자스타일")} value={textStyle} selected={activeMenu === "textStyle"} disabled={disabled} onClick={onTextStyleOpen} />
|
|
)),
|
|
dimensionStyle: (dimensionStyles ? (
|
|
<SWHeaderDimensionStyleMenu label={label("dimensionStyle", "치수스타일")}
|
|
value={dimensionStyle}
|
|
dimensionStyles={dimensionStyles}
|
|
activeDimensionStyleId={activeDimensionStyleId}
|
|
{...dimensionStyleOpen}
|
|
onClick={onDimensionStyleOpen}
|
|
selected={activeMenu === "dimensionStyle"}
|
|
disabled={disabled}
|
|
onDimensionStyleSelect={onDimensionStyleSelect}
|
|
onDetail={onDimensionStyleDetail}
|
|
/>
|
|
) : (
|
|
<SWHeaderDimensionStyle label={label("dimensionStyle", "치수스타일")} value={dimensionStyle} selected={activeMenu === "dimensionStyle"} disabled={disabled} onClick={onDimensionStyleOpen} />
|
|
)),
|
|
}
|
|
const documentNode = (<SWHeaderDocumentTitle
|
|
label={label("document", "문서")}
|
|
title={documentTitle}
|
|
onClick={onDocumentClick}
|
|
documents={documents}
|
|
menuOpen={documentMenuOpen}
|
|
onMenuOpenChange={onDocumentMenuOpenChange}
|
|
onDocumentSelect={onDocumentSelect}
|
|
activeDocumentId={activeDocumentId}
|
|
onDocumentClose={onDocumentClose}
|
|
onNew={onDocumentNew}
|
|
onOpen={onDocumentOpen}
|
|
showNew={shown("documentNew")}
|
|
showOpen={shown("documentOpen") && !openInHeader}
|
|
documentIcon={documentIcon}
|
|
newLabel={documentNewLabel}
|
|
openLabel={documentOpenLabel}
|
|
/>)
|
|
const configuredNodes: Partial<Record<SWHeaderControlId, ReactNode>> = {
|
|
...fieldNodes,
|
|
document: documentNode,
|
|
drawingMode: <span className="hm-sw-header__mode">{label("drawingMode", drawingModeLabel)}</span>,
|
|
details: <span className="hm-sw-header__properties-caption">{label("details", "상세보기")}</span>,
|
|
propertyBar: <button type="button" className="hm-sw-header__toggle" aria-pressed={barOpen} aria-controls={barOpen ? barId : undefined} disabled={disabled} onClick={toggleBar}>{label("propertyBar", "속성Bar")}</button>,
|
|
propertyPanel: <button type="button" className="hm-sw-header__toggle" data-property-panel-trigger="" aria-pressed={panelOpen} aria-haspopup={propertyPanel ? "dialog" : undefined} aria-expanded={panelOpen} aria-controls={panelOpen ? panelId : undefined} disabled={disabled} onClick={togglePanel}>{label("propertyPanel", "속성창")}</button>,
|
|
print: <button type="button" className="hm-sw-header__action hm-sw-header__action--print" aria-label={label("print", "인쇄")} disabled={disabled} onClick={onPrint}><img className="hm-sw-header__icon" src={printIcon} alt="" /><img className="hm-sw-header__icon-hover" src={printHover} alt="" /></button>,
|
|
popupGuide: <SWHeaderKGuide label={label("popupGuide", "팝업 가이드")} disabled={disabled} onClick={onPopupGuide} />,
|
|
}
|
|
const presence = (id: SWHeaderControlId, node: ReactNode) => <SWHeaderCommitPresence.Provider value={() => presentRef.current.has(id)}>{node}</SWHeaderCommitPresence.Provider>
|
|
const actionsShown = controls === undefined && (enabled("print") || enabled("popupGuide"))
|
|
const windowShown = actionsShown || frameControls.slice(1).some(shown)
|
|
const windowReduced = removed.size > 0 && (frameControls.some(id => removed.has(id)) || (controls === undefined && !(enabled("print") && enabled("popupGuide"))))
|
|
// CSS-only default layout: a field holding the first slot instead of the removed layer is styled as promoted.
|
|
const promotedSlot = validPromoted ?? (!scripted && baseMenu && baseMenu !== "layer" ? baseMenu : null)
|
|
// The bar shares the panel data only when the panel has a selection (a content-only panel has no bar rows).
|
|
const barData = propertyBar ?? (propertyPanel?.selection && {
|
|
selection: propertyPanel.selection,
|
|
properties: propertyPanel.properties ?? [],
|
|
onPropertyChange: propertyPanel.onPropertyChange,
|
|
})
|
|
|
|
return (
|
|
<header ref={ref} className={`hm-sw-header${className ? ` ${className}` : ""}`} data-leading={openShown ? "open" : hasLeading ? "" : undefined} {...rest}>
|
|
<div className="hm-sw-header__bar">
|
|
<SWHeaderHome onClick={shown("home") ? onHomeClick : undefined} interactive={shown("home")} logo={logo} logoSrc={logoSrc} logoAlt={logoAlt} />
|
|
{hasLeading && <div ref={leadingRef} className="hm-sw-header__leading">
|
|
{openShown && <SWToolButton appearance="document" data-document-open="" disabled={disabled} onClick={onDocumentOpen}>{documentOpenLabel ?? "Open"}</SWToolButton>}
|
|
{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={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)
|
|
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")} />}
|
|
</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")} />}
|
|
<SWHeaderWindowControls onWindowMoveStart={onWindowMoveStart} onMinimize={onMinimize} onClose={onClose} showWindowMove={shown("windowMove")} showMinimize={shown("minimize")} showClose={shown("close")} />
|
|
</div>}
|
|
</div>
|
|
{barOpen && barData && <div className="hm-sw-header__bar-anchor" style={{ left: barOffset, maxWidth: `calc(100% - ${barOffset}px)` }}><SWHeaderPropertyBar {...barData} disabled={disabled || propertyBar?.disabled} id={barId} /></div>}
|
|
{panelOpen && propertyPanel && <SWHeaderPropertyPanel {...propertyPanel} menus={{ showLayerFreeze: layerStates.showFreeze, showLayerLock: layerStates.showLock, ...propertyPanel.menus }} id={panelId} anchorRef={panelAnchorRef} onClose={closePanel} />}
|
|
</header>
|
|
)
|
|
})
|