feat: rename Rectangle to Zone, add border width selector

- Rename "Rectangle" → "Zone" in sidebar, add modal and edit modal
- Add border width selector (1–5px, default 2px) to the Zone modal
- Border width persisted in custom_colors.border_width and applied in GroupRectNode
This commit is contained in:
Pouzor
2026-03-29 01:42:22 +01:00
parent 343249fbcd
commit 38a06682e5
5 changed files with 93 additions and 12 deletions
+7 -3
View File
@@ -182,6 +182,7 @@ export default function App() {
custom_colors: {
border: data.border_color,
border_style: data.border_style,
border_width: data.border_width,
background: data.background_color,
text_color: data.text_color,
text_position: data.text_position,
@@ -198,6 +199,7 @@ export default function App() {
const handleUpdateGroupRect = useCallback((data: GroupRectFormData) => {
if (!editingGroupRectId) return
snapshotHistory()
const existing = nodes.find((n) => n.id === editingGroupRectId)
updateNode(editingGroupRectId, {
label: data.label,
@@ -205,6 +207,7 @@ export default function App() {
...existing?.data.custom_colors,
border: data.border_color,
border_style: data.border_style,
border_width: data.border_width,
background: data.background_color,
text_color: data.text_color,
text_position: data.text_position,
@@ -214,7 +217,7 @@ export default function App() {
})
setNodeZIndex(editingGroupRectId, data.z_order - 10)
setEditingGroupRectId(null)
}, [editingGroupRectId, nodes, updateNode, setNodeZIndex, setEditingGroupRectId])
}, [editingGroupRectId, nodes, updateNode, setNodeZIndex, setEditingGroupRectId, snapshotHistory])
const handleDeleteGroupRect = useCallback(() => {
if (!editingGroupRectId) return
@@ -436,7 +439,7 @@ export default function App() {
open={addGroupRectOpen}
onClose={() => setAddGroupRectOpen(false)}
onSubmit={handleAddGroupRect}
title="Add Rectangle"
title="Add Zone"
/>
{/* key forces re-mount when editing a different rect */}
@@ -457,11 +460,12 @@ export default function App() {
text_position: rc.text_position ?? 'top-left',
border_color: rc.border ?? '#00d4ff',
border_style: rc.border_style ?? 'solid',
border_width: rc.border_width ?? 2,
background_color: rc.background ?? '#00d4ff0d',
z_order: rc.z_order ?? 1,
}
})()}
title="Edit Rectangle"
title="Edit Zone"
/>
{/* key forces re-mount on open so useState captures current theme as original */}