From fc2c79781808bd4dafefae33148616c831a6be81 Mon Sep 17 00:00:00 2001 From: Michael Halpern <100871194+michaelhelper@users.noreply.github.com> Date: Tue, 30 Jul 2024 16:58:40 -0400 Subject: [PATCH 1/2] enabled the feature flag added notes and more debugging --- src/client/RunCodeWidget/index.tsx | 2 +- src/client/VZCodeContext.tsx | 9 +++++++++ src/client/vzReducer/splitCurrentPaneReducer.ts | 2 ++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/client/RunCodeWidget/index.tsx b/src/client/RunCodeWidget/index.tsx index 0bbb7ab0..e5d60d8f 100644 --- a/src/client/RunCodeWidget/index.tsx +++ b/src/client/RunCodeWidget/index.tsx @@ -7,7 +7,7 @@ import { OverlayTrigger, Tooltip } from '../bootstrap'; import './style.scss'; // Feature flag for split pane feature (WIP) -const enableSplitPane = false; +const enableSplitPane = true; export const RunCodeWidget = ({ runCodeWidgetTooltipText = ( diff --git a/src/client/VZCodeContext.tsx b/src/client/VZCodeContext.tsx index e3e11ec0..772b9dec 100644 --- a/src/client/VZCodeContext.tsx +++ b/src/client/VZCodeContext.tsx @@ -34,6 +34,7 @@ import { import { useURLSync } from './useURLSync'; import { useKeyboardShortcuts } from './useKeyboardShortcuts'; import { useRunCode } from './useRunCode'; +import { findPane } from './vzReducer/findPane'; // This context centralizes all the "smart" logic // to do with the application state. This includes @@ -241,6 +242,10 @@ export const VZCodeProvider = ({ // TODO support splitPane type if (pane.type !== 'leafPane') { + const activePaneId = state.activePaneId; + const activePane = findPane(pane, activePaneId); + console.log('activePane: ', activePane); + // console.error(pane); throw new Error('Expected leafPane'); } const tabList = pane.tabList; @@ -270,6 +275,10 @@ export const VZCodeProvider = ({ } = useActions(dispatch); // Sync tab state to the URL. + // TODO make the URL sync to the active pane only + const activePaneId = state.activePaneId; + // find the active pane + const activePane = findPane(pane, activePaneId); useURLSync({ content, openTab, diff --git a/src/client/vzReducer/splitCurrentPaneReducer.ts b/src/client/vzReducer/splitCurrentPaneReducer.ts index d90febad..b59f11c2 100644 --- a/src/client/vzReducer/splitCurrentPaneReducer.ts +++ b/src/client/vzReducer/splitCurrentPaneReducer.ts @@ -21,6 +21,7 @@ export const splitCurrentPaneReducer = ( const newLeafPane1: Pane = { id: `${activePaneId}-1`, // Generate unique IDs for new panes type: 'leafPane', + // TODO Copy the tab list from the active pane tabList: [], activeFileId: null, }; @@ -28,6 +29,7 @@ export const splitCurrentPaneReducer = ( const newLeafPane2: Pane = { id: `${activePaneId}-2`, type: 'leafPane', + // TODO Copy the tab list from the active pane tabList: [], activeFileId: null, }; From 5afeec34e8e7ca9cfcbe30804d938f9661815865 Mon Sep 17 00:00:00 2001 From: Michael Halpern <100871194+michaelhelper@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:41:05 -0400 Subject: [PATCH 2/2] current progress --- src/client/VZCodeContext.tsx | 49 ++++++-- src/client/useURLSync.ts | 106 +++++------------- test/sampleDirectories/kitchenSink/index.html | 3 +- 3 files changed, 66 insertions(+), 92 deletions(-) diff --git a/src/client/VZCodeContext.tsx b/src/client/VZCodeContext.tsx index 772b9dec..6a5caeca 100644 --- a/src/client/VZCodeContext.tsx +++ b/src/client/VZCodeContext.tsx @@ -241,16 +241,41 @@ export const VZCodeProvider = ({ } = state; // TODO support splitPane type - if (pane.type !== 'leafPane') { - const activePaneId = state.activePaneId; - const activePane = findPane(pane, activePaneId); - console.log('activePane: ', activePane); - // console.error(pane); - throw new Error('Expected leafPane'); + // Determine the active pane and handle both leaf and non-leaf panes + let activePaneId = state.activePaneId; + let activePane = findPane(pane, activePaneId); + + let tabList = []; + let activeFileId = null; + + if (activePane.type === 'leafPane') { + tabList = activePane.tabList; + activeFileId = activePane.activeFileId; + } else { + // Handle non-leaf pane logic if needed + // For now, just log the active pane for debugging purposes + console.log('Active Pane is not a leafPane:', activePane); + // check if any children are leaf panes + // if so, set the active pane to the first leaf pane + // if no children are leaf panes check if any childrens children are leaf panes + // if so, set the active pane to the first leaf pane + while (activePane.type !== 'leafPane') { + // check if any children are leaf panes + for (const child of activePane.children) { + if (child.type === 'leafPane') { + activePaneId = child.id; + activePane = child; + break; + } + } + // if no children are leaf panes check if any childrens children are leaf panes + if (activePane.type !== 'leafPane') { + // set the active pane to the first child + activePaneId = activePane.children[0].id; + activePane = activePane.children[0]; + } + } } - const tabList = pane.tabList; - const activeFileId = pane.activeFileId; - // Functions for dispatching actions to the reducer. const { setActiveFileId, @@ -276,9 +301,9 @@ export const VZCodeProvider = ({ // Sync tab state to the URL. // TODO make the URL sync to the active pane only - const activePaneId = state.activePaneId; - // find the active pane - const activePane = findPane(pane, activePaneId); + // const activePaneId = state.activePaneId; + // // find the active pane + // const activePane = findPane(pane, activePaneId); useURLSync({ content, openTab, diff --git a/src/client/useURLSync.ts b/src/client/useURLSync.ts index 94eb8889..43179dad 100644 --- a/src/client/useURLSync.ts +++ b/src/client/useURLSync.ts @@ -1,38 +1,20 @@ import { useSearchParams } from 'react-router-dom'; -import { FileId, TabState, VZCodeContent } from '../types'; -import { useEffect, useMemo, useRef } from 'react'; -import { - TabStateParams, - decodeTabs, - encodeTabs, -} from './tabsSearchParameters'; +import { FileId, VZCodeContent } from '../types'; +import { useEffect, useRef } from 'react'; -// Synchronizes the tab state with the URL parameters. +// Synchronizes the active pane state with the URL parameters. export const useURLSync = ({ content, - openTab, setActiveFileId, - tabList, activeFileId, }: { content: VZCodeContent | null; - openTab: (tabState: TabState) => void; setActiveFileId: (activeFileId: FileId) => void; - tabList: Array; activeFileId: FileId | null; }) => { - // Use React router to get and set the search parameters. + // Use React router to get and set the search parameters. const [searchParams, setSearchParams] = useSearchParams(); - // Extract the tab state parameters from the search parameters. - const tabStateParams: TabStateParams = useMemo( - () => ({ - file: searchParams.get('file'), - tabs: searchParams.get('tabs'), - }), - [searchParams], - ); - // `true` after the state is updated based on the // initial search parameters from the URL. const isInitialized = useRef(false); @@ -49,25 +31,15 @@ export const useURLSync = ({ return; } - // Decode the search parameters. - const { tabList, activeFileId } = decodeTabs({ - tabStateParams, - content, - }); + // Get the active file id from the search parameters. + const file = searchParams.get('file'); + if (file) { + setActiveFileId(file as FileId); + } // Mark the state as initialized. isInitialized.current = true; - - // Update the state. - tabList.forEach(openTab); - setActiveFileId(activeFileId); - }, [ - content, - searchParams, - setActiveFileId, - openTab, - isInitialized, - ]); + }, [content, searchParams, setActiveFileId, isInitialized]); // Track content in a ref so that we can use it in the // effect below without triggering the effect when @@ -77,16 +49,15 @@ export const useURLSync = ({ contentRef.current = content; }, [content]); - // track setSearchParams in a ref so that we can use it in the + // Track setSearchParams in a ref so that we can use it in the // effect below without triggering the effect on each render. - // The definition of `setSearchParams` changes on every render. const setSearchParamsRef = useRef(setSearchParams); useEffect(() => { setSearchParamsRef.current = setSearchParams; }, [setSearchParams]); // Update the URL to match the current state whenever - // the active file or tab list changes. + // the active file changes. useEffect(() => { // Safety check to make sure the content is loaded. // Should never happen. @@ -94,43 +65,20 @@ export const useURLSync = ({ return; } - const newTabStateParams: TabStateParams = encodeTabs({ - tabList, - activeFileId, - content: contentRef.current, - }); - - // Update the URL if the search parameters have changed. - setSearchParamsRef.current( - (oldSearchParams: URLSearchParams) => { - // Create a copy of the old search params - const updatedSearchParams = new URLSearchParams( - oldSearchParams, - ); + // Update the URL if the active file has changed. + setSearchParamsRef.current((oldSearchParams: URLSearchParams) => { + // Create a copy of the old search params + const updatedSearchParams = new URLSearchParams(oldSearchParams); - // Set the 'file' parameter - if (newTabStateParams.file) { - updatedSearchParams.set( - 'file', - newTabStateParams.file, - ); - } else { - updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams - } + // Set the 'file' parameter + if (activeFileId) { + updatedSearchParams.set('file', activeFileId); + } else { + updatedSearchParams.delete('file'); // Remove 'file' if there's no active file + } - // Set the 'tabs' parameter - if (newTabStateParams.tabs) { - updatedSearchParams.set( - 'tabs', - newTabStateParams.tabs, - ); - } else { - updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams - } - - // Return the updated search params - return updatedSearchParams; - }, - ); - }, [tabList, activeFileId]); -}; + // Return the updated search params + return updatedSearchParams; + }); + }, [activeFileId]); +}; \ No newline at end of file diff --git a/test/sampleDirectories/kitchenSink/index.html b/test/sampleDirectories/kitchenSink/index.html index e2b40563..d329cd39 100644 --- a/test/sampleDirectories/kitchenSink/index.html +++ b/test/sampleDirectories/kitchenSink/index.html @@ -7,6 +7,7 @@