diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx index f5cefcd..063364d 100644 --- a/src/components/wired-tools/WiredCreatorToolsView.tsx +++ b/src/components/wired-tools/WiredCreatorToolsView.tsx @@ -50,8 +50,10 @@ export const WiredCreatorToolsView: FC<{}> = () => const setMonitorHistorySeverityFilter = useWiredCreatorToolsUiStore(s => s.setMonitorHistorySeverityFilter); const monitorHistoryTypeFilter = useWiredCreatorToolsUiStore(s => s.monitorHistoryTypeFilter); const setMonitorHistoryTypeFilter = useWiredCreatorToolsUiStore(s => s.setMonitorHistoryTypeFilter); - const [ editingVariable, setEditingVariable ] = useState(null); - const [ editingValue, setEditingValue ] = useState(''); + const editingVariable = useWiredCreatorToolsUiStore(s => s.editingVariable); + const setEditingVariable = useWiredCreatorToolsUiStore(s => s.setEditingVariable); + const editingValue = useWiredCreatorToolsUiStore(s => s.editingValue); + const setEditingValue = useWiredCreatorToolsUiStore(s => s.setEditingValue); const [ selectedInspectionVariableKeys, setSelectedInspectionVariableKeys ] = useState>({ furni: '', user: '', @@ -71,8 +73,10 @@ export const WiredCreatorToolsView: FC<{}> = () => const setVariableManagePage = useWiredCreatorToolsUiStore(s => s.setVariableManagePage); const [ selectedManagedVariableEntry, setSelectedManagedVariableEntry ] = useState(null); const [ selectedManagedHolderVariableId, setSelectedManagedHolderVariableId ] = useState(0); - const [ editingManagedHolderVariableId, setEditingManagedHolderVariableId ] = useState(0); - const [ editingManagedHolderValue, setEditingManagedHolderValue ] = useState(''); + const editingManagedHolderVariableId = useWiredCreatorToolsUiStore(s => s.editingManagedHolderVariableId); + const setEditingManagedHolderVariableId = useWiredCreatorToolsUiStore(s => s.setEditingManagedHolderVariableId); + const editingManagedHolderValue = useWiredCreatorToolsUiStore(s => s.editingManagedHolderValue); + const setEditingManagedHolderValue = useWiredCreatorToolsUiStore(s => s.setEditingManagedHolderValue); const isManagedGiveOpen = useWiredCreatorToolsUiStore(s => s.isManagedGiveOpen); const setIsManagedGiveOpen = useWiredCreatorToolsUiStore(s => s.setIsManagedGiveOpen); const [ managedGiveVariableItemId, setManagedGiveVariableItemId ] = useState(0); @@ -3121,9 +3125,6 @@ export const WiredCreatorToolsView: FC<{}> = () => setSelectedInspectionVariableKeys(prev => ({ ...prev, [inspectionType]: variable.key })); beginVariableEdit(variable); } } - editingVariable={ editingVariable } - editingValue={ editingValue } - onEditingValueChange={ setEditingValue } onCancelVariableEdit={ cancelVariableEdit } onVariableInputKeyDown={ onVariableInputKeyDown } onBeginVariableEdit={ variable => diff --git a/src/components/wired-tools/WiredInspectionTabView.tsx b/src/components/wired-tools/WiredInspectionTabView.tsx index 94c7a9c..b992505 100644 --- a/src/components/wired-tools/WiredInspectionTabView.tsx +++ b/src/components/wired-tools/WiredInspectionTabView.tsx @@ -34,10 +34,10 @@ export interface WiredInspectionTabViewProps selectedInspectionVariableKey: string; onSelectInspectionVariable: (variable: InspectionVariable) => void; - // inline editor - editingVariable: string; - editingValue: string; - onEditingValueChange: (value: string) => void; + // inline editor — `editingVariable` / `editingValue` come from the + // store; this tab only needs the cancel / keydown / begin handlers + // since each tab consumer wraps `onBeginVariableEdit` with its own + // bookkeeping (variable-key tracking). onCancelVariableEdit: () => void; onVariableInputKeyDown: (event: KeyboardEvent) => void; onBeginVariableEdit: (variable: InspectionVariable) => void; @@ -73,9 +73,6 @@ export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) => displayedVariables, selectedInspectionVariableKey, onSelectInspectionVariable, - editingVariable, - editingValue, - onEditingValueChange, onCancelVariableEdit, onVariableInputKeyDown, onBeginVariableEdit, @@ -94,6 +91,9 @@ export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) => const setInspectionType = useWiredCreatorToolsUiStore(s => s.setInspectionType); const isInspectionGiveOpen = useWiredCreatorToolsUiStore(s => s.isInspectionGiveOpen); const setIsInspectionGiveOpen = useWiredCreatorToolsUiStore(s => s.setIsInspectionGiveOpen); + const editingVariable = useWiredCreatorToolsUiStore(s => s.editingVariable); + const editingValue = useWiredCreatorToolsUiStore(s => s.editingValue); + const setEditingValue = useWiredCreatorToolsUiStore(s => s.setEditingValue); return (
@@ -173,7 +173,7 @@ export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) => value={ editingValue } onClick={ event => event.stopPropagation() } onBlur={ onCancelVariableEdit } - onChange={ event => onEditingValueChange(event.target.value) } + onChange={ event => setEditingValue(event.target.value) } onKeyDownCapture={ onVariableInputKeyDown } /> } { (editingVariable !== variable.key) && !variable.editable && { variable.value } } { (editingVariable !== variable.key) && variable.editable && diff --git a/src/components/wired-tools/wiredCreatorToolsUiStore.test.ts b/src/components/wired-tools/wiredCreatorToolsUiStore.test.ts index 1058b20..49a524e 100644 --- a/src/components/wired-tools/wiredCreatorToolsUiStore.test.ts +++ b/src/components/wired-tools/wiredCreatorToolsUiStore.test.ts @@ -24,7 +24,11 @@ const INITIAL = { selectedUserLiveState: null, selectedUserActionVersion: 0, isVariableHighlightActive: false, - variableHighlightOverlays: [] + variableHighlightOverlays: [], + editingVariable: null, + editingValue: '', + editingManagedHolderVariableId: 0, + editingManagedHolderValue: '' }; describe('useWiredCreatorToolsUiStore', () => @@ -60,6 +64,10 @@ describe('useWiredCreatorToolsUiStore', () => expect(state.selectedUserActionVersion).toBe(0); expect(state.isVariableHighlightActive).toBe(false); expect(state.variableHighlightOverlays).toEqual([]); + expect(state.editingVariable).toBeNull(); + expect(state.editingValue).toBe(''); + expect(state.editingManagedHolderVariableId).toBe(0); + expect(state.editingManagedHolderValue).toBe(''); }); describe('setIsVisible', () => @@ -356,4 +364,44 @@ describe('useWiredCreatorToolsUiStore', () => expect(useWiredCreatorToolsUiStore.getState().variableHighlightOverlays).toEqual([ overlay ]); }); }); + + describe('inline editor', () => + { + it('setEditingVariable + setEditingValue track the in-flight edit', () => + { + useWiredCreatorToolsUiStore.getState().setEditingVariable('@state'); + useWiredCreatorToolsUiStore.getState().setEditingValue('3'); + + expect(useWiredCreatorToolsUiStore.getState().editingVariable).toBe('@state'); + expect(useWiredCreatorToolsUiStore.getState().editingValue).toBe('3'); + }); + + it('setEditingVariable(null) clears the edit (commit / cancel path)', () => + { + useWiredCreatorToolsUiStore.getState().setEditingVariable('@state'); + useWiredCreatorToolsUiStore.getState().setEditingValue('3'); + + useWiredCreatorToolsUiStore.getState().setEditingVariable(null); + useWiredCreatorToolsUiStore.getState().setEditingValue(''); + + expect(useWiredCreatorToolsUiStore.getState().editingVariable).toBeNull(); + expect(useWiredCreatorToolsUiStore.getState().editingValue).toBe(''); + }); + + it('managed-holder editor pair uses 0 as "no row being edited"', () => + { + useWiredCreatorToolsUiStore.getState().setEditingManagedHolderVariableId(42); + useWiredCreatorToolsUiStore.getState().setEditingManagedHolderValue('15'); + + expect(useWiredCreatorToolsUiStore.getState().editingManagedHolderVariableId).toBe(42); + expect(useWiredCreatorToolsUiStore.getState().editingManagedHolderValue).toBe('15'); + + // Reset path used after commit / on blur. + useWiredCreatorToolsUiStore.getState().setEditingManagedHolderVariableId(0); + useWiredCreatorToolsUiStore.getState().setEditingManagedHolderValue(''); + + expect(useWiredCreatorToolsUiStore.getState().editingManagedHolderVariableId).toBe(0); + expect(useWiredCreatorToolsUiStore.getState().editingManagedHolderValue).toBe(''); + }); + }); }); diff --git a/src/components/wired-tools/wiredCreatorToolsUiStore.ts b/src/components/wired-tools/wiredCreatorToolsUiStore.ts index ffe395d..03c4c0e 100644 --- a/src/components/wired-tools/wiredCreatorToolsUiStore.ts +++ b/src/components/wired-tools/wiredCreatorToolsUiStore.ts @@ -65,6 +65,22 @@ interface WiredCreatorToolsUiState isVariableHighlightActive: boolean; variableHighlightOverlays: VariableHighlightOverlay[]; + /** + * Inline-editor state for the Inspection-tab variables table. + * `editingVariable` is the key of the variable whose value is being + * edited (null = none); `editingValue` is the in-flight text input. + * The "managed holder" pair plays the same role for the Variable + * Manage panel's holder rows (id 0 = none). + * + * The component uses these together with `shouldPauseVariableSnapshotRefresh` + * to suppress the periodic variables poll while an edit is open + * (so typing isn't clobbered by an incoming snapshot). + */ + editingVariable: string | null; + editingValue: string; + editingManagedHolderVariableId: number; + editingManagedHolderValue: string; + setIsVisible: (next: Updater) => void; setActiveTab: (next: WiredToolsTab) => void; setInspectionType: (next: InspectionElementType) => void; @@ -94,6 +110,11 @@ interface WiredCreatorToolsUiState setIsVariableHighlightActive: (next: Updater) => void; setVariableHighlightOverlays: (next: VariableHighlightOverlay[]) => void; + + setEditingVariable: (next: string | null) => void; + setEditingValue: (next: string) => void; + setEditingManagedHolderVariableId: (next: number) => void; + setEditingManagedHolderValue: (next: string) => void; } export const useWiredCreatorToolsUiStore = createNitroStore()((set) => ({ @@ -126,6 +147,11 @@ export const useWiredCreatorToolsUiStore = createNitroStore set(state => ({ isVisible: apply(state.isVisible, next) })), setActiveTab: (next) => set({ activeTab: next }), setInspectionType: (next) => set({ inspectionType: next }), @@ -154,5 +180,10 @@ export const useWiredCreatorToolsUiStore = createNitroStore set(state => ({ selectedUserActionVersion: apply(state.selectedUserActionVersion, next) })), setIsVariableHighlightActive: (next) => set(state => ({ isVariableHighlightActive: apply(state.isVariableHighlightActive, next) })), - setVariableHighlightOverlays: (next) => set({ variableHighlightOverlays: next }) + setVariableHighlightOverlays: (next) => set({ variableHighlightOverlays: next }), + + setEditingVariable: (next) => set({ editingVariable: next }), + setEditingValue: (next) => set({ editingValue: next }), + setEditingManagedHolderVariableId: (next) => set({ editingManagedHolderVariableId: next }), + setEditingManagedHolderValue: (next) => set({ editingManagedHolderValue: next }) }));