feat(workflow): persist debug-and-preview panel width in store

Add previewPanelWidth state and setter to layout slice, replacing local state. Persist width in localStorage to maintain user preference across sessions.
pull/21434/head
Minamiyama 11 months ago
parent d60287621a
commit 0408c675ba

@ -51,8 +51,10 @@ const DebugAndPreview = () => {
const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth) const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
const nodePanelWidth = useStore(s => s.nodePanelWidth) const nodePanelWidth = useStore(s => s.nodePanelWidth)
const [panelWidth, setPanelWidth] = useState(400) const panelWidth = useStore(s => s.previewPanelWidth)
const setPanelWidth = useStore(s => s.setPreviewPanelWidth)
const handleResize = useCallback((width: number) => { const handleResize = useCallback((width: number) => {
localStorage.setItem('debug-and-preview-panel-width', `${width}`)
setPanelWidth(width) setPanelWidth(width)
}, [setPanelWidth]) }, [setPanelWidth])
const maxPanelWidth = useMemo(() => { const maxPanelWidth = useMemo(() => {

@ -10,6 +10,8 @@ export type LayoutSliceShape = {
setRightPanelWidth: (width: number) => void setRightPanelWidth: (width: number) => void
nodePanelWidth: number nodePanelWidth: number
setNodePanelWidth: (width: number) => void setNodePanelWidth: (width: number) => void
previewPanelWidth: number
setPreviewPanelWidth: (width: number) => void
otherPanelWidth: number otherPanelWidth: number
setOtherPanelWidth: (width: number) => void setOtherPanelWidth: (width: number) => void
bottomPanelWidth: number // min-width = 400px; default-width = auto || 480px; bottomPanelWidth: number // min-width = 400px; default-width = auto || 480px;
@ -31,6 +33,8 @@ export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
setRightPanelWidth: width => set(() => ({ rightPanelWidth: width })), setRightPanelWidth: width => set(() => ({ rightPanelWidth: width })),
nodePanelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 400, nodePanelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 400,
setNodePanelWidth: width => set(() => ({ nodePanelWidth: width })), setNodePanelWidth: width => set(() => ({ nodePanelWidth: width })),
previewPanelWidth: localStorage.getItem('debug-and-preview-panel-width') ? Number.parseFloat(localStorage.getItem('debug-and-preview-panel-width')!) : 400,
setPreviewPanelWidth: width => set(() => ({ previewPanelWidth: width })),
otherPanelWidth: 400, otherPanelWidth: 400,
setOtherPanelWidth: width => set(() => ({ otherPanelWidth: width })), setOtherPanelWidth: width => set(() => ({ otherPanelWidth: width })),
bottomPanelWidth: 480, bottomPanelWidth: 480,

Loading…
Cancel
Save