jan-henrik/constellation-analyzer
1
0
Fork 0
mirror of https://github.com/OFFIS-ESC/constellation-analyzer synced 2026-01-27 07:43:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix state management bugs in tangible configuration

Browse source 
1. Fix state dropdown not updating when new states are added:
   - Replace useMemo with proper Zustand selector subscription
   - Component now re-renders when timeline states change

2. Add auto-save trigger to state operations:
   - createState now triggers auto-save after 1 second
   - updateState now triggers auto-save after 1 second
   - deleteState now triggers auto-save after 1 second
   - Consistent with label and tangible operations

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2026-01-19 11:37:05 +01:00
parent efc93c8acb
commit d5450610f1
2 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/Config/TangibleConfig.tsx
View file

@ -1,4 +1,4 @@
import { useState, useEffect, useMemo } from 'react';
import { useState, useEffect } from 'react';
import { useGraphWithHistory } from '../../hooks/useGraphWithHistory';
import { useConfirm } from '../../hooks/useConfirm';
import { useToastStore } from '../../stores/toastStore';
@ -18,12 +18,18 @@ const TangibleConfigModal = ({ isOpen, onClose, initialEditingTangibleId }: Prop
const { tangibles, labels, addTangible, updateTangible, deleteTangible } = useGraphWithHistory();
const { confirm, ConfirmDialogComponent } = useConfirm();
const { showToast } = useToastStore();
const { getAllStates } = useTimelineStore();
const [editingTangible, setEditingTangible] = useState<TangibleConfigType | null>(null);
// Get all available states for state mode
const availableStates = useMemo(() => getAllStates(), [getAllStates]);
// Use Zustand selector to properly subscribe to state changes
const availableStates = useTimelineStore((state) => {
const { activeDocumentId } = state;
if (!activeDocumentId) return [];
const timeline = state.timelines.get(activeDocumentId);
if (!timeline) return [];
return Array.from(timeline.states.values());
});
// Set editing tangible when initialEditingTangibleId changes
useEffect(() => {

15
src/stores/timelineStore.ts
View file

@ -225,6 +225,11 @@ export const useTimelineStore = create<TimelineStore & TimelineActions>(
// Mark document as dirty
useWorkspaceStore.getState().markDocumentDirty(activeDocumentId);
// Trigger auto-save after 1 second (consistent with other operations)
setTimeout(() => {
useWorkspaceStore.getState().saveDocument(activeDocumentId);
}, 1000);
useToastStore.getState().showToast(`State "${label}" created`, "success");
return newStateId;
@ -365,6 +370,11 @@ export const useTimelineStore = create<TimelineStore & TimelineActions>(
// Mark document as dirty
useWorkspaceStore.getState().markDocumentDirty(activeDocumentId);
// Trigger auto-save after 1 second (consistent with other operations)
setTimeout(() => {
useWorkspaceStore.getState().saveDocument(activeDocumentId);
}, 1000);
},
deleteState: (stateId: StateId) => {
@ -453,6 +463,11 @@ export const useTimelineStore = create<TimelineStore & TimelineActions>(
// Mark document as dirty
useWorkspaceStore.getState().markDocumentDirty(activeDocumentId);
// Trigger auto-save after 1 second (consistent with other operations)
setTimeout(() => {
useWorkspaceStore.getState().saveDocument(activeDocumentId);
}, 1000);
useToastStore
.getState()
.showToast(`State "${stateName}" deleted`, "info");