("none")
const [selection, setSelection] = useState(propertySelection("none"))
const [properties, setProperties] = useState(propertyFixture("none"))
@@ -1087,12 +1087,11 @@ function PropertyPanelDemo({ standalone = false }: { standalone?: boolean }) {
{log.join(" → ") || "Callback 없음"}
{JSON.stringify({ selection: selection.id, values: properties.map(item => [item.id, item.value]), expanded, open })}
- {standalone ? record("close")} />
- : { record("open(" + next + ")"); if (controlled) setOpen(next) }}
- onPropertyPanelToggle={() => record("legacyToggle")}
- layers={SAMPLE_LAYERS} activeLayerId="layer-0" colors={FIGMA_COLORS} lineTypes={FIGMA_LINE_TYPES} textStyles={FIGMA_TEXT_STYLES} dimensionStyles={FIGMA_DIMENSION_STYLES}
- />
}
+ { record("open(" + next + ")"); if (controlled) setOpen(next) }}
+ onPropertyPanelToggle={() => record("legacyToggle")}
+ layers={SAMPLE_LAYERS} activeLayerId="layer-0" colors={FIGMA_COLORS} lineTypes={FIGMA_LINE_TYPES} textStyles={FIGMA_TEXT_STYLES} dimensionStyles={FIGMA_DIMENSION_STYLES}
+ />
)
}
@@ -1102,11 +1101,6 @@ export const PropertyPanel: Story = {
parameters: { controls: { disable: true } },
render: () => ,
}
-export const PropertyPanelVariants: Story = {
- name: "Property Panel Variants",
- parameters: { controls: { disable: true } },
- render: () => ,
-}
export const KGuide: Story = {
name: "K Guide",
parameters: { controls: { disable: true } },
@@ -1293,22 +1287,11 @@ function PropertyState({ example, shapeContent, onLog }: { example: PropertyExam
onPropertyChange={(property, value) => { onLog?.(`property(${property.id}, ${value})`); setProperties(items => items.map(item => item.id === property.id ? { ...item, value, mixed: false, ...(item.id === "line" ? { linePattern: linePatternOf(value) } : {}) } : item)) }}
onClose={() => onLog?.("close")} />
}
-function PropertyStateStory({ example }: { example: PropertyExample }) {
- const state = PROPERTY_STATES.find(item => item.example === example)!
- const [log, setLog] = useState([])
- return
- {log.join(" → ") || "Callback 없음"}
- setLog(lines => [...lines.slice(-9), line])} />
-
-}
-export const PropertyPanelNone: Story = { name: "Property Panel · 선택 없음", parameters: { controls: { disable: true } }, render: () => }
-export const PropertyPanelAll: Story = { name: "Property Panel · 전체 선택", parameters: { controls: { disable: true } }, render: () => }
-export const PropertyPanelCircle: Story = { name: "Property Panel · 원 1개", parameters: { controls: { disable: true } }, render: () => }
-export const PropertyPanelExpanded: Story = { name: "Property Panel · 모두 펼침", parameters: { controls: { disable: true } }, render: () => }
-
-/** Design check only: a real header shows one panel for the current selection. */
+/** Design check only: a real header shows one panel for the current selection.
+ 2 columns × 2 rows at the panels' own size; the Inner scrolls instead of shrinking or wrapping them. */
function PropertyCompare() {
const [sizes, setSizes] = useState>({})
+ const [log, setLog] = useState([])
const ref = useRef(null)
useEffect(() => {
const measure = () => setSizes(Object.fromEntries(Array.from(ref.current?.querySelectorAll("[data-compare]") ?? []).map(cell => {
@@ -1320,17 +1303,22 @@ function PropertyCompare() {
ref.current?.querySelectorAll(".hm-sw-property").forEach(panel => observer.observe(panel))
return () => observer.disconnect()
}, [])
- return
- {PROPERTY_STATES.map(state =>
- {state.title}Figma {state.node} · {state.size}측정 {sizes[state.example] ?? "-"}
-
- )}
-
{log.join(" → ") || "Callback 없음"}
+
+
+ {PROPERTY_STATES.map(state =>
+ {state.title}Figma {state.node} · {state.size}측정 {sizes[state.example] ?? "-"}
+ setLog(lines => [...lines.slice(-7), `${state.example}: ${line}`])} />
+ )}
+
+