From ade87badf26b051b8e0b9b1678d9b3830bebd618 Mon Sep 17 00:00:00 2001 From: Michael Halpern <100871194+michaelhelper@users.noreply.github.com> Date: Sat, 13 Jul 2024 22:19:01 -0400 Subject: [PATCH 01/10] added fork button --- src/client/Icons/ForkSVG.tsx | 19 +++++++++++++++++++ src/client/VZSidebar/Item.tsx | 27 +++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 src/client/Icons/ForkSVG.tsx diff --git a/src/client/Icons/ForkSVG.tsx b/src/client/Icons/ForkSVG.tsx new file mode 100644 index 00000000..ec5c5635 --- /dev/null +++ b/src/client/Icons/ForkSVG.tsx @@ -0,0 +1,19 @@ +export const ForkSVG = () => { + return ( + + + + ); +} diff --git a/src/client/VZSidebar/Item.tsx b/src/client/VZSidebar/Item.tsx index 93e50357..0da8a5a1 100644 --- a/src/client/VZSidebar/Item.tsx +++ b/src/client/VZSidebar/Item.tsx @@ -13,6 +13,8 @@ import { DeleteConfirmationModal } from './DeleteConfirmationModal'; import { VZCodeContext } from '../VZCodeContext'; import { ItemId } from '../../types'; import { getExtensionIcon } from './FileListing'; +import { ForkSVG } from '../Icons/ForkSVG'; +import { SplitPaneResizeProvider } from '../SplitPaneResizeContext'; // TODO support renaming directories // See https://github.com/vizhub-core/vzcode/issues/103 @@ -97,6 +99,15 @@ export const Item = ({ } }, [handleRenameClick]); + const handleOpenInNewTab = useCallback( + (event: React.MouseEvent) => { + event.stopPropagation(); + // set the code editor width to half of its current width + + }, + [], + ); + const handleRenameIconClick = useCallback( (event: React.MouseEvent) => { event.stopPropagation(); @@ -122,6 +133,7 @@ export const Item = ({ [], ); + // Function to close the modal const handleModalClose = useCallback(() => { setShowModal(false); @@ -192,6 +204,21 @@ export const Item = ({ className="utils" style={{ position: 'relative' }} > + + {isDirectory ? 'Directory' : 'Open in New Tab'} + + } + > + + + + {(isDirectory ? enableRenameDirectory : true) ? ( Date: Fri, 19 Jul 2024 14:05:07 -0400 Subject: [PATCH 02/10] first steps for split view --- src/client/CodeEditor/index.tsx | 10 ++++++---- src/client/VZSidebar/Item.tsx | 3 --- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/client/CodeEditor/index.tsx b/src/client/CodeEditor/index.tsx index 5afe7da1..93164e4a 100644 --- a/src/client/CodeEditor/index.tsx +++ b/src/client/CodeEditor/index.tsx @@ -99,6 +99,7 @@ export const CodeEditor = ({ allowGlobals, enableAutoFollowRef, openTab, + // splitPaneView, }), [ activeFileId, @@ -121,6 +122,7 @@ export const CodeEditor = ({ // Guard against cases where page is still loading. if (!codeEditorRef.current) return; if (!content) return; + // if (openSplitPane) return; // Add the editor and apply the prior scroll position to the DOM. codeEditorRef.current.appendChild( @@ -134,10 +136,10 @@ export const CodeEditor = ({ // Remove the old editor from the DOM and store the current scroll position. // This happens every time `activeFileId` changes. editorCacheValue.scrollPosition = - editorCacheValue.editor.scrollDOM.scrollTop; - codeEditorRef.current.removeChild( - editorCacheValue.editor.dom, - ); + editorCacheValue.editor.scrollDOM.scrollTop; + // codeEditorRef.current.removeChild( + // editorCacheValue.editor.dom, + // ); }; }, [shareDBDoc, editorCacheValue]); diff --git a/src/client/VZSidebar/Item.tsx b/src/client/VZSidebar/Item.tsx index 0da8a5a1..70edeebd 100644 --- a/src/client/VZSidebar/Item.tsx +++ b/src/client/VZSidebar/Item.tsx @@ -16,8 +16,6 @@ import { getExtensionIcon } from './FileListing'; import { ForkSVG } from '../Icons/ForkSVG'; import { SplitPaneResizeProvider } from '../SplitPaneResizeContext'; -// TODO support renaming directories -// See https://github.com/vizhub-core/vzcode/issues/103 const enableRenameDirectory = true; // A file or directory in the sidebar. @@ -103,7 +101,6 @@ export const Item = ({ (event: React.MouseEvent) => { event.stopPropagation(); // set the code editor width to half of its current width - }, [], ); From f94c76bfbac3e79ab60ef70f0a41f87e3e527502 Mon Sep 17 00:00:00 2001 From: Michael Halpern <100871194+michaelhelper@users.noreply.github.com> Date: Tue, 23 Jul 2024 15:04:05 -0400 Subject: [PATCH 03/10] changed icon --- src/client/Icons/ForkSVG.tsx | 25 ++++++++++++++++++++----- src/client/VZSidebar/Item.tsx | 2 +- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/client/Icons/ForkSVG.tsx b/src/client/Icons/ForkSVG.tsx index ec5c5635..4574dd72 100644 --- a/src/client/Icons/ForkSVG.tsx +++ b/src/client/Icons/ForkSVG.tsx @@ -7,13 +7,28 @@ export const ForkSVG = () => { viewBox="0 0 24 24" fill="none" > - + ); -} +} \ No newline at end of file diff --git a/src/client/VZSidebar/Item.tsx b/src/client/VZSidebar/Item.tsx index 70edeebd..7ccaf972 100644 --- a/src/client/VZSidebar/Item.tsx +++ b/src/client/VZSidebar/Item.tsx @@ -205,7 +205,7 @@ export const Item = ({ placement="top" overlay={ - {isDirectory ? 'Directory' : 'Open in New Tab'} + {isDirectory ? 'Directory' : 'Split Editor'} } > From e9c711fc65031cdbe4808950c9e50644bd2cbce7 Mon Sep 17 00:00:00 2001 From: Curran Date: Tue, 23 Jul 2024 15:31:02 -0400 Subject: [PATCH 04/10] Start on new cache key --- src/client/CodeEditor/getOrCreateEditor.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/client/CodeEditor/getOrCreateEditor.ts b/src/client/CodeEditor/getOrCreateEditor.ts index f09bf39c..e7a2f818 100644 --- a/src/client/CodeEditor/getOrCreateEditor.ts +++ b/src/client/CodeEditor/getOrCreateEditor.ts @@ -18,6 +18,7 @@ import { Diagnostic, linter } from '@codemirror/lint'; import { json1Presence, textUnicode } from '../../ot'; import { FileId, + PaneId, ShareDBDoc, TabState, Username, @@ -102,6 +103,7 @@ const getAtPath = (obj, path) => { // Gets or creates an `editorCache` entry for the given file id. // Looks in `editorCache` first, and if not found, creates a new editor. export const getOrCreateEditor = ({ + paneId = 'root', fileId, shareDBDoc, content, @@ -118,6 +120,8 @@ export const getOrCreateEditor = ({ enableAutoFollowRef, openTab, }: { + // TODO pass this in from the outside + paneId?: PaneId; fileId: FileId; // The ShareDB document that contains the file. @@ -153,8 +157,11 @@ export const getOrCreateEditor = ({ openTab: (tabState: TabState) => void; }): EditorCacheValue => { // Cache hit - if (editorCache.has(fileId)) { - return editorCache.get(fileId); + + const cacheKey = fileId+"|"+paneId; + + if (editorCache.has(cacheKey)) { + return editorCache.get(cacheKey); } // Cache miss @@ -385,7 +392,7 @@ export const getOrCreateEditor = ({ const editorCacheValue = { editor, themeCompartment }; // Populate the cache. - editorCache.set(fileId, editorCacheValue); + editorCache.set(cacheKey, editorCacheValue); return editorCacheValue; }; From ab50d9fee934cb550d5842c29bc66a9af599e1cd Mon Sep 17 00:00:00 2001 From: Michael Halpern <100871194+michaelhelper@users.noreply.github.com> Date: Fri, 26 Jul 2024 14:17:13 -0400 Subject: [PATCH 05/10] moved the split view icon moved the split view icon to the top right of the editor and add moved the tooltip labels for the run code button and split view icon to display below the icons. --- .../Icons/{ForkSVG.tsx => SplitEditorSVG.tsx} | 2 +- src/client/RunCodeWidget/index.tsx | 59 ++++++++++++++----- src/client/RunCodeWidget/style.scss | 7 ++- src/client/VZSidebar/Item.tsx | 26 +------- 4 files changed, 52 insertions(+), 42 deletions(-) rename src/client/Icons/{ForkSVG.tsx => SplitEditorSVG.tsx} (93%) diff --git a/src/client/Icons/ForkSVG.tsx b/src/client/Icons/SplitEditorSVG.tsx similarity index 93% rename from src/client/Icons/ForkSVG.tsx rename to src/client/Icons/SplitEditorSVG.tsx index 4574dd72..cf2f446f 100644 --- a/src/client/Icons/ForkSVG.tsx +++ b/src/client/Icons/SplitEditorSVG.tsx @@ -1,4 +1,4 @@ -export const ForkSVG = () => { +export const SplitEditorSVG = () => { return ( setIsRunning(false), 1000); }, []); + const handleSplitEditor = useCallback( + (event: React.MouseEvent) => { + event.stopPropagation(); + // set the code editor width to half of its current width + }, + [], + ); return ( -
- - {runCodeWidgetTooltipText} - - } - > - +
+ + Split Editor + + } + > + + + + +
+
+ + {runCodeWidgetTooltipText} + + } > - - - + + + + +
); }; diff --git a/src/client/RunCodeWidget/style.scss b/src/client/RunCodeWidget/style.scss index 0cc8fc6c..2dd88baa 100644 --- a/src/client/RunCodeWidget/style.scss +++ b/src/client/RunCodeWidget/style.scss @@ -3,11 +3,16 @@ right: 16px; top: 9px; color: var(--vh-color-neutral-04); - .rotate-icon { animation: spin 1s linear; } } +.vz-code-split-view-widget { + position: absolute; + right: 51px; + top: 9px; + color: var(--vh-color-neutral-04); +} @keyframes spin { from { diff --git a/src/client/VZSidebar/Item.tsx b/src/client/VZSidebar/Item.tsx index 7ccaf972..3dcaa918 100644 --- a/src/client/VZSidebar/Item.tsx +++ b/src/client/VZSidebar/Item.tsx @@ -13,7 +13,7 @@ import { DeleteConfirmationModal } from './DeleteConfirmationModal'; import { VZCodeContext } from '../VZCodeContext'; import { ItemId } from '../../types'; import { getExtensionIcon } from './FileListing'; -import { ForkSVG } from '../Icons/ForkSVG'; +import { SplitEditorSVG } from '../Icons/SplitEditorSVG'; import { SplitPaneResizeProvider } from '../SplitPaneResizeContext'; const enableRenameDirectory = true; @@ -97,14 +97,6 @@ export const Item = ({ } }, [handleRenameClick]); - const handleOpenInNewTab = useCallback( - (event: React.MouseEvent) => { - event.stopPropagation(); - // set the code editor width to half of its current width - }, - [], - ); - const handleRenameIconClick = useCallback( (event: React.MouseEvent) => { event.stopPropagation(); @@ -201,21 +193,7 @@ export const Item = ({ className="utils" style={{ position: 'relative' }} > - - {isDirectory ? 'Directory' : 'Split Editor'} - - } - > - - - - + {(isDirectory ? enableRenameDirectory : true) ? ( Date: Fri, 26 Jul 2024 14:55:59 -0400 Subject: [PATCH 06/10] created a new split pane reducer the new split pane reducer takes a leaf pane and converts it into a split pane with two leaf pane childern with the same tabs as the original leaf pane before the split. --- src/client/RunCodeWidget/index.tsx | 1 + src/client/vzReducer/splitPane.ts | 46 ++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 src/client/vzReducer/splitPane.ts diff --git a/src/client/RunCodeWidget/index.tsx b/src/client/RunCodeWidget/index.tsx index 3bdc65e4..ebd3e012 100644 --- a/src/client/RunCodeWidget/index.tsx +++ b/src/client/RunCodeWidget/index.tsx @@ -41,6 +41,7 @@ export const RunCodeWidget = ({ (event: React.MouseEvent) => { event.stopPropagation(); // set the code editor width to half of its current width + }, [], ); diff --git a/src/client/vzReducer/splitPane.ts b/src/client/vzReducer/splitPane.ts new file mode 100644 index 00000000..973524e1 --- /dev/null +++ b/src/client/vzReducer/splitPane.ts @@ -0,0 +1,46 @@ +import { + PaneId, + LeafPane, + SplitPane, + Pane, +} from '../../types'; + +export const splitCurrentPane = ( { + pane, + activePaneId, + orientation, +}: { + pane: Pane; + activePaneId: PaneId; + orientation: 'vertical' | 'horizontal'; +}): Pane => { + if (pane.type === 'leafPane') { + // convert the leafPane to a splitPane with two leafPane children + const newPaneId1 = activePaneId + 1; + const newLeafPane1: Pane = { + id: newPaneId1, + type: 'leafPane', + tabList: pane.tabList, + activeFileId: pane.activeFileId, + }; + const newPaneId2 = activePaneId + 2; + const newLeafPane2: Pane = { + id: newPaneId2, + type: 'leafPane', + tabList: pane.tabList, + activeFileId: pane.activeFileId, + }; + const newSplitPane: Pane = { + id: activePaneId, + type: 'splitPane', + orientation: orientation, + children: [newLeafPane1, newLeafPane2], + }; + return newSplitPane; + } + else { + throw new Error('The pane is not a leafPane and cannot be split'); + } + +} + From 8b43025192141411e126c342ad795b1918575d24 Mon Sep 17 00:00:00 2001 From: Michael Halpern <100871194+michaelhelper@users.noreply.github.com> Date: Tue, 30 Jul 2024 14:22:43 -0400 Subject: [PATCH 07/10] refactored the reducer and attempted to connect to context menu still buggy --- src/client/CodeEditor/index.tsx | 6 +- src/client/RunCodeWidget/index.tsx | 24 ++++--- src/client/VZCodeContext.tsx | 7 ++ src/client/useActions.ts | 6 ++ src/client/vzReducer/index.ts | 9 ++- .../vzReducer/splitCurrentPaneReducer.ts | 70 +++++++++++++++++++ src/client/vzReducer/splitPane.ts | 46 ------------ 7 files changed, 109 insertions(+), 59 deletions(-) create mode 100644 src/client/vzReducer/splitCurrentPaneReducer.ts delete mode 100644 src/client/vzReducer/splitPane.ts diff --git a/src/client/CodeEditor/index.tsx b/src/client/CodeEditor/index.tsx index 93164e4a..c1d65152 100644 --- a/src/client/CodeEditor/index.tsx +++ b/src/client/CodeEditor/index.tsx @@ -137,9 +137,9 @@ export const CodeEditor = ({ // This happens every time `activeFileId` changes. editorCacheValue.scrollPosition = editorCacheValue.editor.scrollDOM.scrollTop; - // codeEditorRef.current.removeChild( - // editorCacheValue.editor.dom, - // ); + codeEditorRef.current.removeChild( + editorCacheValue.editor.dom, + ); }; }, [shareDBDoc, editorCacheValue]); diff --git a/src/client/RunCodeWidget/index.tsx b/src/client/RunCodeWidget/index.tsx index ebd3e012..eb785b96 100644 --- a/src/client/RunCodeWidget/index.tsx +++ b/src/client/RunCodeWidget/index.tsx @@ -3,6 +3,7 @@ import { PlaySVG} from '../Icons'; import { SplitEditorSVG } from '../Icons/SplitEditorSVG'; import { VZCodeContext } from '../VZCodeContext'; import { OverlayTrigger, Tooltip } from '../bootstrap'; + import './style.scss'; export const RunCodeWidget = ({ @@ -37,14 +38,21 @@ export const RunCodeWidget = ({ // Optional: reset the icon state after animation completes (e.g., 1 second) setTimeout(() => setIsRunning(false), 1000); }, []); - const handleSplitEditor = useCallback( - (event: React.MouseEvent) => { - event.stopPropagation(); - // set the code editor width to half of its current width - - }, - [], - ); + // const handleSplitEditor = useCallback(() => { + // const splitEditor = runCodeRef.current; + // if (splitEditor !== null) { + // splitEditor(); + // } + // } + // , []); + const handleSplitEditor = useCallback(() => { + const splitCurrentPane = runCodeRef.current; + console.log('Split Editor'); + console.log(splitCurrentPane); + splitCurrentPane(); + + } + , []); return (
diff --git a/src/client/VZCodeContext.tsx b/src/client/VZCodeContext.tsx index 92134844..e68d1230 100644 --- a/src/client/VZCodeContext.tsx +++ b/src/client/VZCodeContext.tsx @@ -146,6 +146,9 @@ export type VZCodeContextValue = { enableAutoFollow: boolean; toggleAutoFollow: () => void; + + splitCurrPane: boolean; + splitPane: () => void; }; export const VZCodeProvider = ({ @@ -223,6 +226,8 @@ export const VZCodeProvider = ({ ); // Unpack state. + // print the state object to see what it contains + // console.log('state: ', state); const { pane, theme, @@ -262,6 +267,7 @@ export const VZCodeProvider = ({ editorNoLongerWantsFocus, setUsername, toggleAutoFollow, + splitCurrentPane, } = useActions(dispatch); // Sync tab state to the URL. @@ -439,6 +445,7 @@ export const VZCodeProvider = ({ enableAutoFollow, toggleAutoFollow, + }; return ( diff --git a/src/client/useActions.ts b/src/client/useActions.ts index 485bc929..d2c0484e 100644 --- a/src/client/useActions.ts +++ b/src/client/useActions.ts @@ -172,6 +172,11 @@ export const useActions = ( }); }, [dispatch]); + const splitCurrentPane = useCallback(() => { + dispatch({ + type: 'split_current_pane', + }); + }, [dispatch]); return { setActiveFileId, setActiveFileLeft, @@ -191,5 +196,6 @@ export const useActions = ( editorNoLongerWantsFocus, setUsername, toggleAutoFollow, + splitCurrentPane, }; }; diff --git a/src/client/vzReducer/index.ts b/src/client/vzReducer/index.ts index 22dbe066..d820cbae 100644 --- a/src/client/vzReducer/index.ts +++ b/src/client/vzReducer/index.ts @@ -29,6 +29,7 @@ import { toggleSearchFocusedReducer, } from './searchReducer'; import { toggleAutoFollowReducer } from './toggleAutoFollowReducer'; +import { splitCurrentPaneReducer } from './splitCurrentPaneReducer'; export { createInitialState } from './createInitialState'; // The shape of the state managed by the reducer. @@ -139,9 +140,12 @@ export type VZAction = // * Sets the username. | { type: 'set_username'; username: Username } - // `toggle_auto_follow + // `toggle_auto_follow` // * Toggles the auto-follow feature. - | { type: 'toggle_auto_follow' }; + | { type: 'toggle_auto_follow' } + + // `split_current_pane` + | { type: 'split_current_pane' }; const reducers = [ setActiveFileIdReducer, @@ -160,6 +164,7 @@ const reducers = [ editorNoLongerWantsFocusReducer, setUsernameReducer, toggleAutoFollowReducer, + splitCurrentPaneReducer, ]; export const vzReducer = ( diff --git a/src/client/vzReducer/splitCurrentPaneReducer.ts b/src/client/vzReducer/splitCurrentPaneReducer.ts new file mode 100644 index 00000000..619bbe9a --- /dev/null +++ b/src/client/vzReducer/splitCurrentPaneReducer.ts @@ -0,0 +1,70 @@ +import { + PaneId, + LeafPane, + SplitPane, + Pane, +} from '../../types'; +import { VZAction, VZState } from '.'; +import { updatePane } from './updatePane'; + + +export const splitCurrentPaneReducer = ( + state: VZState, + action: VZAction, +): VZState => { + console.log('splitCurrentPaneReducer'); + if (action.type !== 'split_current_pane') { + return state; + } + + const activePaneId = state.activePaneId; + + const newLeafPane1: Pane = { + id: `${activePaneId}-1`, // Generate unique IDs for new panes + type: 'leafPane', + tabList: [], + activeFileId: null, + }; + + const newLeafPane2: Pane = { + id: `${activePaneId}-2`, + type: 'leafPane', + tabList: [], + activeFileId: null, + }; + + const newSplitPane: Pane = { + id: activePaneId, + type: 'splitPane', + orientation: 'horizontal', + children: [newLeafPane1, newLeafPane2], + }; + + const updatedPane = updatePane({ + pane: state.pane, + activePaneId, + newTabList: undefined, + newActiveFileId: undefined, + }); + + const updateSplitPane = (pane: Pane, id: PaneId): Pane => + pane.id === id + ? newSplitPane + : pane.type === 'splitPane' + ? { + ...pane, + children: pane.children.map((child) => + updateSplitPane(child, id) + ), + } + : pane; + + const finalPane = updateSplitPane(updatedPane, activePaneId); + + return { + ...state, + pane: finalPane, + }; +}; + + diff --git a/src/client/vzReducer/splitPane.ts b/src/client/vzReducer/splitPane.ts deleted file mode 100644 index 973524e1..00000000 --- a/src/client/vzReducer/splitPane.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { - PaneId, - LeafPane, - SplitPane, - Pane, -} from '../../types'; - -export const splitCurrentPane = ( { - pane, - activePaneId, - orientation, -}: { - pane: Pane; - activePaneId: PaneId; - orientation: 'vertical' | 'horizontal'; -}): Pane => { - if (pane.type === 'leafPane') { - // convert the leafPane to a splitPane with two leafPane children - const newPaneId1 = activePaneId + 1; - const newLeafPane1: Pane = { - id: newPaneId1, - type: 'leafPane', - tabList: pane.tabList, - activeFileId: pane.activeFileId, - }; - const newPaneId2 = activePaneId + 2; - const newLeafPane2: Pane = { - id: newPaneId2, - type: 'leafPane', - tabList: pane.tabList, - activeFileId: pane.activeFileId, - }; - const newSplitPane: Pane = { - id: activePaneId, - type: 'splitPane', - orientation: orientation, - children: [newLeafPane1, newLeafPane2], - }; - return newSplitPane; - } - else { - throw new Error('The pane is not a leafPane and cannot be split'); - } - -} - From 478c1c0f942a6f19b4914018f960ad3d6761f82b Mon Sep 17 00:00:00 2001 From: Michael Halpern <100871194+michaelhelper@users.noreply.github.com> Date: Tue, 30 Jul 2024 14:32:28 -0400 Subject: [PATCH 08/10] Update VZCodeContext.tsx --- src/client/VZCodeContext.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/client/VZCodeContext.tsx b/src/client/VZCodeContext.tsx index e68d1230..7eb3d396 100644 --- a/src/client/VZCodeContext.tsx +++ b/src/client/VZCodeContext.tsx @@ -147,8 +147,7 @@ export type VZCodeContextValue = { enableAutoFollow: boolean; toggleAutoFollow: () => void; - splitCurrPane: boolean; - splitPane: () => void; + splitCurrentPane: () => void; }; export const VZCodeProvider = ({ From e959ca4404dbeb02c4e723108a28ca85f8953426 Mon Sep 17 00:00:00 2001 From: Curran Date: Tue, 30 Jul 2024 14:46:32 -0400 Subject: [PATCH 09/10] Feature flag --- src/client/RunCodeWidget/index.tsx | 56 +++++++++---------- src/client/VZCodeContext.tsx | 4 +- .../vzReducer/splitCurrentPaneReducer.ts | 23 ++++---- 3 files changed, 40 insertions(+), 43 deletions(-) diff --git a/src/client/RunCodeWidget/index.tsx b/src/client/RunCodeWidget/index.tsx index eb785b96..0bbb7ab0 100644 --- a/src/client/RunCodeWidget/index.tsx +++ b/src/client/RunCodeWidget/index.tsx @@ -1,11 +1,14 @@ import { useCallback, useContext, useState } from 'react'; -import { PlaySVG} from '../Icons'; +import { PlaySVG } from '../Icons'; import { SplitEditorSVG } from '../Icons/SplitEditorSVG'; import { VZCodeContext } from '../VZCodeContext'; import { OverlayTrigger, Tooltip } from '../bootstrap'; import './style.scss'; +// Feature flag for split pane feature (WIP) +const enableSplitPane = false; + export const RunCodeWidget = ({ runCodeWidgetTooltipText = ( <> @@ -16,7 +19,7 @@ export const RunCodeWidget = ({ }: { runCodeWidgetTooltipText?: JSX.Element; }) => { - const { runCodeRef, runPrettierRef } = + const { runCodeRef, runPrettierRef, splitCurrentPane } = useContext(VZCodeContext); const [isRunning, setIsRunning] = useState(false); @@ -38,42 +41,35 @@ export const RunCodeWidget = ({ // Optional: reset the icon state after animation completes (e.g., 1 second) setTimeout(() => setIsRunning(false), 1000); }, []); - // const handleSplitEditor = useCallback(() => { - // const splitEditor = runCodeRef.current; - // if (splitEditor !== null) { - // splitEditor(); - // } - // } - // , []); + const handleSplitEditor = useCallback(() => { - const splitCurrentPane = runCodeRef.current; console.log('Split Editor'); console.log(splitCurrentPane); splitCurrentPane(); - - } - , []); + }, [splitCurrentPane]); return ( -
-
- - Split Editor - - } - > - +
+ {enableSplitPane && ( + + Split Editor + + } > - - - + + + + + )}
-
+
void; - + splitCurrentPane: () => void; }; @@ -444,7 +444,7 @@ export const VZCodeProvider = ({ enableAutoFollow, toggleAutoFollow, - + splitCurrentPane, }; return ( diff --git a/src/client/vzReducer/splitCurrentPaneReducer.ts b/src/client/vzReducer/splitCurrentPaneReducer.ts index 619bbe9a..d90febad 100644 --- a/src/client/vzReducer/splitCurrentPaneReducer.ts +++ b/src/client/vzReducer/splitCurrentPaneReducer.ts @@ -1,18 +1,17 @@ import { - PaneId, - LeafPane, - SplitPane, - Pane, + PaneId, + LeafPane, + SplitPane, + Pane, } from '../../types'; import { VZAction, VZState } from '.'; import { updatePane } from './updatePane'; - export const splitCurrentPaneReducer = ( state: VZState, action: VZAction, ): VZState => { - console.log('splitCurrentPaneReducer'); + console.log('splitCurrentPaneReducer'); if (action.type !== 'split_current_pane') { return state; } @@ -47,24 +46,26 @@ export const splitCurrentPaneReducer = ( newActiveFileId: undefined, }); - const updateSplitPane = (pane: Pane, id: PaneId): Pane => + const updateSplitPane = (pane: Pane, id: PaneId): Pane => pane.id === id ? newSplitPane : pane.type === 'splitPane' ? { ...pane, children: pane.children.map((child) => - updateSplitPane(child, id) + updateSplitPane(child, id), ), } : pane; - const finalPane = updateSplitPane(updatedPane, activePaneId); + const finalPane = updateSplitPane( + updatedPane, + activePaneId, + ); return { ...state, pane: finalPane, + activePaneId: newLeafPane1.id, }; }; - - From a1d524f042bce6eb2d0cb253ada32bb4f367fde2 Mon Sep 17 00:00:00 2001 From: Curran Date: Tue, 30 Jul 2024 14:46:47 -0400 Subject: [PATCH 10/10] Prettier --- src/client/CodeEditor/getOrCreateEditor.ts | 4 ++-- src/client/CodeEditor/index.tsx | 2 +- src/client/Icons/SplitEditorSVG.tsx | 2 +- src/client/RunCodeWidget/style.scss | 8 ++++---- src/client/VZSidebar/Item.tsx | 2 -- src/client/vzReducer/index.ts | 2 +- 6 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/client/CodeEditor/getOrCreateEditor.ts b/src/client/CodeEditor/getOrCreateEditor.ts index e7a2f818..d8f6d4c6 100644 --- a/src/client/CodeEditor/getOrCreateEditor.ts +++ b/src/client/CodeEditor/getOrCreateEditor.ts @@ -158,8 +158,8 @@ export const getOrCreateEditor = ({ }): EditorCacheValue => { // Cache hit - const cacheKey = fileId+"|"+paneId; - + const cacheKey = fileId + '|' + paneId; + if (editorCache.has(cacheKey)) { return editorCache.get(cacheKey); } diff --git a/src/client/CodeEditor/index.tsx b/src/client/CodeEditor/index.tsx index c1d65152..e1d365e1 100644 --- a/src/client/CodeEditor/index.tsx +++ b/src/client/CodeEditor/index.tsx @@ -136,7 +136,7 @@ export const CodeEditor = ({ // Remove the old editor from the DOM and store the current scroll position. // This happens every time `activeFileId` changes. editorCacheValue.scrollPosition = - editorCacheValue.editor.scrollDOM.scrollTop; + editorCacheValue.editor.scrollDOM.scrollTop; codeEditorRef.current.removeChild( editorCacheValue.editor.dom, ); diff --git a/src/client/Icons/SplitEditorSVG.tsx b/src/client/Icons/SplitEditorSVG.tsx index cf2f446f..d52cd5f1 100644 --- a/src/client/Icons/SplitEditorSVG.tsx +++ b/src/client/Icons/SplitEditorSVG.tsx @@ -31,4 +31,4 @@ export const SplitEditorSVG = () => { /> ); -} \ No newline at end of file +}; diff --git a/src/client/RunCodeWidget/style.scss b/src/client/RunCodeWidget/style.scss index 2dd88baa..213183e6 100644 --- a/src/client/RunCodeWidget/style.scss +++ b/src/client/RunCodeWidget/style.scss @@ -8,10 +8,10 @@ } } .vz-code-split-view-widget { - position: absolute; - right: 51px; - top: 9px; - color: var(--vh-color-neutral-04); + position: absolute; + right: 51px; + top: 9px; + color: var(--vh-color-neutral-04); } @keyframes spin { diff --git a/src/client/VZSidebar/Item.tsx b/src/client/VZSidebar/Item.tsx index 3dcaa918..7662ee42 100644 --- a/src/client/VZSidebar/Item.tsx +++ b/src/client/VZSidebar/Item.tsx @@ -122,7 +122,6 @@ export const Item = ({ [], ); - // Function to close the modal const handleModalClose = useCallback(() => { setShowModal(false); @@ -193,7 +192,6 @@ export const Item = ({ className="utils" style={{ position: 'relative' }} > - {(isDirectory ? enableRenameDirectory : true) ? (