From 8754d2687b5342be892b280696f8e42d883d1722 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Thu, 16 Nov 2023 12:04:38 +0300 Subject: [PATCH 01/10] added localstorage for section fields --- .../beta/components/SidePanelSectionField/index.tsx | 12 ++++++++---- web/src/beta/features/Editor/Settings/index.tsx | 4 ++-- .../features/Editor/SidePanel/Settings/index.tsx | 5 ++++- .../Editor/tabs/map/LeftPanel/GroupField/index.tsx | 4 ++-- .../widgets/RightPanel/ContainerSettings/index.tsx | 2 +- 5 files changed, 17 insertions(+), 10 deletions(-) diff --git a/web/src/beta/components/SidePanelSectionField/index.tsx b/web/src/beta/components/SidePanelSectionField/index.tsx index 06f57c61c..6a520ca93 100644 --- a/web/src/beta/components/SidePanelSectionField/index.tsx +++ b/web/src/beta/components/SidePanelSectionField/index.tsx @@ -10,13 +10,17 @@ const SidePanelSectionField: React.FC<{ title?: string; startCollapsed?: boolean; children?: ReactNode; -}> = ({ className, title, startCollapsed, children }) => { + storageKey?: string; +}> = ({ className, title, startCollapsed, children, storageKey }) => { const theme = useTheme(); - const [opened, setOpened] = useState(); + const [opened, setOpened] = useState(() => { + const storedValue = localStorage.getItem(storageKey || ""); + return storedValue ? JSON.parse(storedValue) : !startCollapsed ?? true; + }); useEffect(() => { - setOpened(!startCollapsed ?? true); - }, []); // eslint-disable-line react-hooks/exhaustive-deps + localStorage.setItem(storageKey || "", JSON.stringify(opened)); + }, [opened, storageKey]); return ( diff --git a/web/src/beta/features/Editor/Settings/index.tsx b/web/src/beta/features/Editor/Settings/index.tsx index 540731389..1ddebe8c2 100644 --- a/web/src/beta/features/Editor/Settings/index.tsx +++ b/web/src/beta/features/Editor/Settings/index.tsx @@ -49,7 +49,7 @@ const Settings: React.FC = ({ return ( {tab == "story" && ( - + {layers && layers?.length > 0 && ( @@ -74,7 +74,7 @@ const Settings: React.FC = ({ )} {visibleItems?.map((i, idx) => ( - + = ({ id, propertyItems }) => { return ( {visibleItems?.map((i, idx) => ( - + ))} diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx index 14d9ca4da..baeb5a54e 100644 --- a/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx +++ b/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx @@ -42,7 +42,7 @@ const GroupSectionField: React.FC = ({ const t = useT(); return ( <> - + {[...new Set(scene?.property?.schema?.groups.map(({ collection }) => collection))].map( (collection, index) => collection && ( @@ -55,7 +55,7 @@ const GroupSectionField: React.FC = ({ ), )} - + = ({ widgetArea, onWidgetAreaStateChang const t = useT(); return ( - + Date: Fri, 17 Nov 2023 08:54:39 +0300 Subject: [PATCH 02/10] store resize --- web/src/beta/components/Resizable/hooks.ts | 21 ++++++++++++++++----- web/src/beta/components/Resizable/index.tsx | 3 +++ web/src/beta/features/Editor/index.tsx | 9 ++++++--- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index adc0dad57..06d12035f 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -33,6 +33,7 @@ const getSize = (size: number, delta: number, minSize?: number, maxSize?: number if (maxSize !== undefined && newSize > maxSize) newSize = maxSize; // New check for maxSize return newSize; }; +// ... (your imports) export default ( direction: Direction, @@ -40,15 +41,17 @@ export default ( initialSize: number, minSize: number, maxSize?: number, + localStorageKey?: string, ) => { - const [startingSize, setStartingSize] = useState(initialSize); + const savedState = localStorageKey && localStorage.getItem(localStorageKey); + const parsedState = savedState ? JSON.parse(savedState) : null; + const [startingSize, setStartingSize] = useState(parsedState?.startingSize || initialSize); const [isResizing, setIsResizing] = useState(false); - const [size, setSize] = useState(initialSize); + const [size, setSize] = useState(parsedState?.size || initialSize); const [position, setPosition] = useState({ x: 0, y: 0 }); - const [minimized, setMinimized] = useState(false); - - const [difference, setDifference] = useState(0); + const [minimized, setMinimized] = useState(parsedState?.minimized || false); + const [difference, setDifference] = useState(parsedState?.difference || 0); const onResizeStart = useCallback( (e: React.MouseEvent | React.TouchEvent) => { @@ -133,6 +136,14 @@ export default ( return () => unbindEventListeners(); }, [bindEventListeners, isResizing, unbindEventListeners]); + useEffect(() => { + if (!localStorageKey) return; + localStorage.setItem( + localStorageKey, + JSON.stringify({ size, minimized, difference, startingSize }), + ); + }, [size, minimized, difference, startingSize, localStorageKey]); + const gutterProps = useMemo( () => ({ onMouseDown: (e: React.MouseEvent) => onResizeStart(e), diff --git a/web/src/beta/components/Resizable/index.tsx b/web/src/beta/components/Resizable/index.tsx index f4db5333f..2101a3bd6 100644 --- a/web/src/beta/components/Resizable/index.tsx +++ b/web/src/beta/components/Resizable/index.tsx @@ -12,6 +12,7 @@ type Props = { initialSize: number; minSize: number; maxSize?: number; + localStorageKey?: string; }; const Resizable: React.FC = ({ @@ -21,6 +22,7 @@ const Resizable: React.FC = ({ maxSize, initialSize, children, + localStorageKey, }) => { const { size, gutterProps, minimized, handleResetSize } = useHooks( direction, @@ -28,6 +30,7 @@ const Resizable: React.FC = ({ initialSize, minSize, maxSize, + localStorageKey, ); const showTopGutter = direction === "horizontal" && gutter === "start"; diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx index d573aa168..652ff376a 100644 --- a/web/src/beta/features/Editor/index.tsx +++ b/web/src/beta/features/Editor/index.tsx @@ -191,7 +191,8 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { direction="vertical" gutter="end" initialSize={metrics.propertyMenuWidth} - minSize={metrics.propertyMenuMinWidth}> + minSize={metrics.propertyMenuMinWidth} + localStorageKey="leftPanel"> {leftPanel} )} @@ -221,7 +222,8 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { gutter="start" initialSize={metrics.bottomPanelMinHeight} minSize={metrics.bottomPanelMinHeight} - maxSize={metrics.bottomPanelMaxHeight}> + maxSize={metrics.bottomPanelMaxHeight} + localStorageKey="bottomPanel"> {bottomPanel} )} @@ -232,7 +234,8 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { direction="vertical" gutter="start" initialSize={metrics.propertyMenuWidth} - minSize={metrics.propertyMenuMinWidth}> + minSize={metrics.propertyMenuMinWidth} + localStorageKey="rightPanel"> {rightPanel} )} From 854f283a28290b9a8425ffe70beb699c1d9cf535 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Fri, 17 Nov 2023 16:29:32 +0300 Subject: [PATCH 03/10] improve editor setting remember --- web/src/beta/components/Resizable/hooks.ts | 59 +++++++++++----- .../beta/features/Editor/Settings/index.tsx | 2 +- .../Editor/SidePanel/Settings/index.tsx | 5 +- web/src/beta/features/Editor/index.tsx | 22 +----- .../RightPanel/ContainerSettings/index.tsx | 2 +- web/src/beta/features/Editor/useLeftPanel.tsx | 62 ++++++++++------- .../beta/features/Editor/useRightPanel.tsx | 69 +++++++++++++------ 7 files changed, 131 insertions(+), 90 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index 06d12035f..7d25a07d0 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -30,10 +30,9 @@ const getDelta = (direction: Direction, deltaX: number, deltaY: number) => const getSize = (size: number, delta: number, minSize?: number, maxSize?: number) => { let newSize = size + delta; if (minSize !== undefined && newSize < minSize) newSize = minSize; - if (maxSize !== undefined && newSize > maxSize) newSize = maxSize; // New check for maxSize + if (maxSize !== undefined && newSize > maxSize) newSize = maxSize; return newSize; }; -// ... (your imports) export default ( direction: Direction, @@ -44,14 +43,13 @@ export default ( localStorageKey?: string, ) => { const savedState = localStorageKey && localStorage.getItem(localStorageKey); - const parsedState = savedState ? JSON.parse(savedState) : null; - - const [startingSize, setStartingSize] = useState(parsedState?.startingSize || initialSize); + const parsedState = savedState && JSON.parse(savedState); + const [startingSize, setStartingSize] = useState(initialSize); const [isResizing, setIsResizing] = useState(false); - const [size, setSize] = useState(parsedState?.size || initialSize); + const [size, setSize] = useState(initialSize); const [position, setPosition] = useState({ x: 0, y: 0 }); - const [minimized, setMinimized] = useState(parsedState?.minimized || false); - const [difference, setDifference] = useState(parsedState?.difference || 0); + const [minimized, setMinimized] = useState(parsedState ? parsedState.minimized : false); + const [difference, setDifference] = useState(0); const onResizeStart = useCallback( (e: React.MouseEvent | React.TouchEvent) => { @@ -93,10 +91,10 @@ export default ( direction, difference, size, - minSize, - maxSize, minimized, startingSize, + minSize, + maxSize, ], ); @@ -132,17 +130,24 @@ export default ( unbindEventListeners(); return; } - bindEventListeners(); - return () => unbindEventListeners(); - }, [bindEventListeners, isResizing, unbindEventListeners]); - - useEffect(() => { if (!localStorageKey) return; localStorage.setItem( localStorageKey, JSON.stringify({ size, minimized, difference, startingSize }), ); - }, [size, minimized, difference, startingSize, localStorageKey]); + + bindEventListeners(); + return () => unbindEventListeners(); + }, [ + bindEventListeners, + difference, + isResizing, + localStorageKey, + minimized, + size, + startingSize, + unbindEventListeners, + ]); const gutterProps = useMemo( () => ({ @@ -153,9 +158,25 @@ export default ( ); const handleResetSize = useCallback(() => { + if (!parsedState || !localStorageKey) return; + localStorage.setItem( + localStorageKey, + JSON.stringify({ + size: initialSize, + minimized: false, + difference: 0, + startingSize: initialSize, + }), + ); + setMinimized(false); setSize(initialSize); - }, [initialSize]); - - return { size, gutterProps, minimized, handleResetSize }; + }, [initialSize, localStorageKey, parsedState]); + + return { + size: parsedState ? parsedState.size : initialSize, + gutterProps, + minimized: parsedState ? parsedState.minimized : false, + handleResetSize, + }; }; diff --git a/web/src/beta/features/Editor/Settings/index.tsx b/web/src/beta/features/Editor/Settings/index.tsx index 1ddebe8c2..4a47e40ea 100644 --- a/web/src/beta/features/Editor/Settings/index.tsx +++ b/web/src/beta/features/Editor/Settings/index.tsx @@ -74,7 +74,7 @@ const Settings: React.FC = ({ )} {visibleItems?.map((i, idx) => ( - + = ({ id, propertyItems }) => { return ( {visibleItems?.map((i, idx) => ( - + ))} diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx index fb01e7ba8..5b15cd598 100644 --- a/web/src/beta/features/Editor/index.tsx +++ b/web/src/beta/features/Editor/index.tsx @@ -188,16 +188,7 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { currentTab={tab} /> - {leftPanel && ( - - {leftPanel} - - )} + {leftPanel && leftPanel}
{secondaryNavbar} @@ -231,16 +222,7 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { )}
- {rightPanel && ( - - {rightPanel} - - )} + {rightPanel && rightPanel} {showDataSourceManager && ( diff --git a/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx b/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx index ad8cb9f2c..8190f988c 100644 --- a/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx +++ b/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx @@ -14,7 +14,7 @@ const ContainerSettings: React.FC = ({ widgetArea, onWidgetAreaStateChang const t = useT(); return ( - + + + + ); case "story": return ( - + + + ); case "widgets": case "publish": diff --git a/web/src/beta/features/Editor/useRightPanel.tsx b/web/src/beta/features/Editor/useRightPanel.tsx index e19cecffd..268c59acc 100644 --- a/web/src/beta/features/Editor/useRightPanel.tsx +++ b/web/src/beta/features/Editor/useRightPanel.tsx @@ -1,5 +1,6 @@ import { ReactNode, useMemo } from "react"; +import Resizable from "@reearth/beta/components/Resizable"; import type { Tab } from "@reearth/beta/features/Navbar"; import type { FlyTo } from "@reearth/beta/lib/core/types"; import type { Camera } from "@reearth/beta/utils/value"; @@ -8,6 +9,7 @@ import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils"; import { Item } from "@reearth/services/api/propertyApi/utils"; import type { Scene } from "@reearth/services/api/sceneApi"; import type { Page } from "@reearth/services/api/storytellingApi/utils"; +import { metrics } from "@reearth/services/theme"; import MapSidePanel from "./tabs/map/RightPanel"; import StorySidePanel from "./tabs/story/RightPanel"; @@ -52,33 +54,56 @@ export default ({ switch (tab) { case "map": return ( - + + + ); case "story": return ( - + + + ); case "widgets": - return ; + return ( + + + + ); case "publish": default: From 4d5d72fd6b6b9f173166f93c32a468035a290ad0 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Mon, 20 Nov 2023 12:41:01 +0300 Subject: [PATCH 04/10] update minimized logic --- web/src/beta/components/Resizable/hooks.ts | 46 +++++++++++++++++----- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index 7d25a07d0..0193e8d43 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -50,6 +50,7 @@ export default ( const [position, setPosition] = useState({ x: 0, y: 0 }); const [minimized, setMinimized] = useState(parsedState ? parsedState.minimized : false); const [difference, setDifference] = useState(0); + const [minimizedStates, setMinimizedStates] = useState>({}); const onResizeStart = useCallback( (e: React.MouseEvent | React.TouchEvent) => { @@ -81,6 +82,7 @@ export default ( if (!minimized && startingSize + newDiff <= minSize / 2) { setMinimized(true); } + setPosition({ x, y }); }, [ @@ -131,11 +133,20 @@ export default ( return; } if (!localStorageKey) return; - localStorage.setItem( - localStorageKey, - JSON.stringify({ size, minimized, difference, startingSize }), - ); + const storedData = { + key: localStorageKey, + size, + minimized, + difference, + startingSize, + }; + + localStorage.setItem(localStorageKey, JSON.stringify(storedData)); + setMinimizedStates(prevMinimizedStates => ({ + ...prevMinimizedStates, + [localStorageKey]: minimized, + })); bindEventListeners(); return () => unbindEventListeners(); }, [ @@ -162,21 +173,36 @@ export default ( localStorage.setItem( localStorageKey, JSON.stringify({ - size: initialSize, - minimized: false, - difference: 0, - startingSize: initialSize, + [localStorageKey]: { + size: initialSize, + minimized: false, + difference: 0, + startingSize: initialSize, + }, }), ); + setMinimizedStates(prevMinimizedStates => ({ + ...prevMinimizedStates, + [localStorageKey]: false, + })); + setMinimized(false); setSize(initialSize); }, [initialSize, localStorageKey, parsedState]); + const storedValues = useMemo(() => { + if (!parsedState) return; + return { + size: parsedState.size, + minimized: minimizedStates[localStorageKey] ?? parsedState.minimized, + }; + }, [localStorageKey, minimizedStates, parsedState]); + return { - size: parsedState ? parsedState.size : initialSize, + size: storedValues?.size || initialSize, gutterProps, - minimized: parsedState ? parsedState.minimized : false, + minimized: storedValues?.minimized, handleResetSize, }; }; From c59792f30bc7c11ec6f528cdf0e7c7a473000036 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Thu, 7 Dec 2023 16:10:38 +0300 Subject: [PATCH 05/10] fix size issue --- web/src/beta/components/Resizable/hooks.ts | 65 +++++++++++-------- web/src/beta/components/Resizable/index.tsx | 19 +++++- web/src/beta/features/Editor/useLeftPanel.tsx | 6 +- .../beta/features/Editor/useRightPanel.tsx | 9 ++- 4 files changed, 63 insertions(+), 36 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index 0193e8d43..cf7280c12 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -42,26 +42,53 @@ export default ( maxSize?: number, localStorageKey?: string, ) => { - const savedState = localStorageKey && localStorage.getItem(localStorageKey); - const parsedState = savedState && JSON.parse(savedState); + const getLocalStorageParsedState = useCallback((localStorageKey?: string) => { + const savedState = localStorageKey && localStorage.getItem(localStorageKey); + return savedState ? JSON.parse(savedState) : null; + }, []); + + const parsedState = getLocalStorageParsedState(localStorageKey); + const [startingSize, setStartingSize] = useState(initialSize); const [isResizing, setIsResizing] = useState(false); const [size, setSize] = useState(initialSize); const [position, setPosition] = useState({ x: 0, y: 0 }); - const [minimized, setMinimized] = useState(parsedState ? parsedState.minimized : false); + const [minimized, setMinimized] = useState(false); const [difference, setDifference] = useState(0); - const [minimizedStates, setMinimizedStates] = useState>({}); + + const storedValues = useMemo(() => { + if (!parsedState) return; + return { + size: parsedState.size, + }; + }, [parsedState]); + + const setSizeFromStorage = useCallback( + (localStorageKey: string) => { + const parsedState = getLocalStorageParsedState(localStorageKey); + const storedSize = parsedState?.size; + + if (storedSize !== undefined) { + setSize(storedSize); + setMinimized(parsedState.minimized); + } else { + setSize(initialSize); + setMinimized(false); + } + }, + [getLocalStorageParsedState, initialSize], + ); const onResizeStart = useCallback( (e: React.MouseEvent | React.TouchEvent) => { const position = getPositionFromEvent(e); if (!position) return; - setStartingSize(size); + setStartingSize(initialSize); setIsResizing(true); setPosition(position); }, - [size], + [initialSize], ); const onResize = useCallback( @@ -93,10 +120,10 @@ export default ( direction, difference, size, - minimized, - startingSize, minSize, maxSize, + minimized, + startingSize, ], ); @@ -138,15 +165,9 @@ export default ( key: localStorageKey, size, minimized, - difference, - startingSize, }; localStorage.setItem(localStorageKey, JSON.stringify(storedData)); - setMinimizedStates(prevMinimizedStates => ({ - ...prevMinimizedStates, - [localStorageKey]: minimized, - })); bindEventListeners(); return () => unbindEventListeners(); }, [ @@ -182,27 +203,15 @@ export default ( }), ); - setMinimizedStates(prevMinimizedStates => ({ - ...prevMinimizedStates, - [localStorageKey]: false, - })); - setMinimized(false); setSize(initialSize); }, [initialSize, localStorageKey, parsedState]); - const storedValues = useMemo(() => { - if (!parsedState) return; - return { - size: parsedState.size, - minimized: minimizedStates[localStorageKey] ?? parsedState.minimized, - }; - }, [localStorageKey, minimizedStates, parsedState]); - return { size: storedValues?.size || initialSize, gutterProps, - minimized: storedValues?.minimized, + minimized, handleResetSize, + setSizeFromStorage, }; }; diff --git a/web/src/beta/components/Resizable/index.tsx b/web/src/beta/components/Resizable/index.tsx index 2101a3bd6..f5d054a59 100644 --- a/web/src/beta/components/Resizable/index.tsx +++ b/web/src/beta/components/Resizable/index.tsx @@ -1,5 +1,6 @@ -import { ReactNode } from "react"; +import { ReactNode, useEffect } from "react"; +import { Tab } from "@reearth/beta/features/Navbar"; import Icon from "@reearth/classic/components/atoms/Icon"; import { styled } from "@reearth/services/theme"; @@ -13,6 +14,7 @@ type Props = { minSize: number; maxSize?: number; localStorageKey?: string; + tab?: Tab; }; const Resizable: React.FC = ({ @@ -23,8 +25,9 @@ const Resizable: React.FC = ({ initialSize, children, localStorageKey, + tab, }) => { - const { size, gutterProps, minimized, handleResetSize } = useHooks( + const { size, gutterProps, minimized, handleResetSize, setSizeFromStorage } = useHooks( direction, gutter, initialSize, @@ -33,6 +36,15 @@ const Resizable: React.FC = ({ localStorageKey, ); + useEffect(() => { + const setSizeBasedOnTab = () => { + if (tab === "map" || tab === "story" || tab === "widgets") { + localStorageKey && setSizeFromStorage(localStorageKey); + } + }; + setSizeBasedOnTab(); + }, [tab, setSizeFromStorage, localStorageKey]); + const showTopGutter = direction === "horizontal" && gutter === "start"; const showRightGutter = direction === "vertical" && gutter === "end"; const showBottomGutter = direction === "horizontal" && gutter === "end"; @@ -118,5 +130,6 @@ const MinimizedWrapper = styled.div>` :hover { background: ${({ theme }) => theme.bg[1]}; } -`; +}`; + export default Resizable; diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx index 02fad2fbd..40fa15ac7 100644 --- a/web/src/beta/features/Editor/useLeftPanel.tsx +++ b/web/src/beta/features/Editor/useLeftPanel.tsx @@ -80,7 +80,8 @@ export default ({ gutter="end" initialSize={metrics.propertyMenuWidth} minSize={metrics.propertyMenuMinWidth} - localStorageKey="mapLeftPanel"> + localStorageKey="mapLeftPanel" + tab="map"> + localStorageKey="storyLeftPanel" + tab="story"> + localStorageKey="mapRightPanel" + tab="map"> + localStorageKey="storyRightPanel" + tab="story"> + localStorageKey="widgetRightPanel" + tab="widgets"> ); From ba280dc78b02ebb5dae1f331c56dd4a87fbe2087 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Fri, 8 Dec 2023 16:52:09 +0300 Subject: [PATCH 06/10] fix minimized bug --- web/src/beta/components/Resizable/hooks.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index cf7280c12..ce9f42575 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -84,11 +84,11 @@ export default ( const position = getPositionFromEvent(e); if (!position) return; - setStartingSize(initialSize); + setStartingSize(size); setIsResizing(true); setPosition(position); }, - [initialSize], + [size], ); const onResize = useCallback( From a2d7ec201032bdc37a9c055d23538ff4689ba6cf Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Sat, 9 Dec 2023 13:52:06 +0300 Subject: [PATCH 07/10] update on localstorage onmouse up --- web/src/beta/components/Resizable/hooks.ts | 29 ++++++++-------------- 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index ce9f42575..184a28ad8 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -56,13 +56,6 @@ export default ( const [minimized, setMinimized] = useState(false); const [difference, setDifference] = useState(0); - const storedValues = useMemo(() => { - if (!parsedState) return; - return { - size: parsedState.size, - }; - }, [parsedState]); - const setSizeFromStorage = useCallback( (localStorageKey: string) => { const parsedState = getLocalStorageParsedState(localStorageKey); @@ -134,7 +127,16 @@ export default ( setPosition({ x: 0, y: 0 }); setStartingSize(size); setDifference(0); - }, [isResizing, size]); + if (!localStorageKey) return; + + const storedData = { + key: localStorageKey, + size, + minimized, + }; + + localStorage.setItem(localStorageKey, JSON.stringify(storedData)); + }, [isResizing, localStorageKey, minimized, size]); const bindEventListeners = useCallback(() => { if (typeof window === "undefined") return; @@ -159,15 +161,6 @@ export default ( unbindEventListeners(); return; } - if (!localStorageKey) return; - - const storedData = { - key: localStorageKey, - size, - minimized, - }; - - localStorage.setItem(localStorageKey, JSON.stringify(storedData)); bindEventListeners(); return () => unbindEventListeners(); }, [ @@ -208,7 +201,7 @@ export default ( }, [initialSize, localStorageKey, parsedState]); return { - size: storedValues?.size || initialSize, + size: size || initialSize, gutterProps, minimized, handleResetSize, From 434252f8c16584b1ab56107072eade9850347731 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Sat, 9 Dec 2023 14:21:08 +0300 Subject: [PATCH 08/10] refactor setting localstorage --- web/src/beta/components/Resizable/hooks.ts | 9 +++------ web/src/beta/utils/localstorage.ts | 5 +++++ 2 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 web/src/beta/utils/localstorage.ts diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index 184a28ad8..42a33afbd 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -1,5 +1,7 @@ import React, { useCallback, useState, useEffect, useMemo } from "react"; +import { setLocalStorageData } from "@reearth/beta/utils/localstorage"; + export type Direction = "vertical" | "horizontal"; export type Gutter = "start" | "end"; @@ -7,9 +9,6 @@ const getPositionFromEvent = (e: React.MouseEvent | React.TouchEvent) => { const { nativeEvent } = e; if (nativeEvent instanceof MouseEvent) { const { clientX: x, clientY: y, which } = nativeEvent; - - // When user click with right button the resize is stuck in resizing mode until users clicks again, dont continue if right click is used. - // https://github.com/bokuweb/re-resizable/blob/06dd269f835a201b03b4f62f37533784d855fdd2/src/index.tsx#L611 if (which === 3) return; return { x, y }; @@ -130,12 +129,10 @@ export default ( if (!localStorageKey) return; const storedData = { - key: localStorageKey, size, minimized, }; - - localStorage.setItem(localStorageKey, JSON.stringify(storedData)); + setLocalStorageData(localStorageKey, storedData); }, [isResizing, localStorageKey, minimized, size]); const bindEventListeners = useCallback(() => { diff --git a/web/src/beta/utils/localstorage.ts b/web/src/beta/utils/localstorage.ts new file mode 100644 index 000000000..bb9b1ce12 --- /dev/null +++ b/web/src/beta/utils/localstorage.ts @@ -0,0 +1,5 @@ +export const setLocalStorageData = (localStorageKey: string, storedData: any) => { + if (!localStorageKey) return; + + localStorage.setItem(localStorageKey, JSON.stringify(storedData)); +}; From aac9347730564aa52584940c0d01c98335d9ce1e Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Thu, 14 Dec 2023 11:04:11 +0300 Subject: [PATCH 09/10] improve resizable --- web/src/beta/components/Resizable/hooks.ts | 24 +++++++++++++++---- web/src/beta/components/Resizable/index.tsx | 16 ++----------- web/src/beta/features/Editor/useLeftPanel.tsx | 6 ++--- .../beta/features/Editor/useRightPanel.tsx | 9 +++---- 4 files changed, 27 insertions(+), 28 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index 42a33afbd..c3c9fd7ab 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -46,8 +46,6 @@ export default ( return savedState ? JSON.parse(savedState) : null; }, []); - const parsedState = getLocalStorageParsedState(localStorageKey); - const [startingSize, setStartingSize] = useState(initialSize); const [isResizing, setIsResizing] = useState(false); const [size, setSize] = useState(initialSize); @@ -71,6 +69,24 @@ export default ( [getLocalStorageParsedState, initialSize], ); + useEffect(() => { + const setSizeBasedOnTab = () => { + if (localStorageKey) { + const parsedState = getLocalStorageParsedState(localStorageKey); + const storedSize = parsedState?.size; + + if (storedSize !== undefined) { + setSize(storedSize); + setMinimized(parsedState.minimized); + } else { + setSize(initialSize); + setMinimized(false); + } + } + }; + setSizeBasedOnTab(); + }, [setSizeFromStorage, localStorageKey, getLocalStorageParsedState, initialSize]); + const onResizeStart = useCallback( (e: React.MouseEvent | React.TouchEvent) => { const position = getPositionFromEvent(e); @@ -180,7 +196,7 @@ export default ( ); const handleResetSize = useCallback(() => { - if (!parsedState || !localStorageKey) return; + if (!localStorageKey) return; localStorage.setItem( localStorageKey, JSON.stringify({ @@ -195,7 +211,7 @@ export default ( setMinimized(false); setSize(initialSize); - }, [initialSize, localStorageKey, parsedState]); + }, [initialSize, localStorageKey]); return { size: size || initialSize, diff --git a/web/src/beta/components/Resizable/index.tsx b/web/src/beta/components/Resizable/index.tsx index f5d054a59..753dd61d0 100644 --- a/web/src/beta/components/Resizable/index.tsx +++ b/web/src/beta/components/Resizable/index.tsx @@ -1,6 +1,5 @@ -import { ReactNode, useEffect } from "react"; +import { ReactNode } from "react"; -import { Tab } from "@reearth/beta/features/Navbar"; import Icon from "@reearth/classic/components/atoms/Icon"; import { styled } from "@reearth/services/theme"; @@ -14,7 +13,6 @@ type Props = { minSize: number; maxSize?: number; localStorageKey?: string; - tab?: Tab; }; const Resizable: React.FC = ({ @@ -25,9 +23,8 @@ const Resizable: React.FC = ({ initialSize, children, localStorageKey, - tab, }) => { - const { size, gutterProps, minimized, handleResetSize, setSizeFromStorage } = useHooks( + const { size, gutterProps, minimized, handleResetSize } = useHooks( direction, gutter, initialSize, @@ -36,15 +33,6 @@ const Resizable: React.FC = ({ localStorageKey, ); - useEffect(() => { - const setSizeBasedOnTab = () => { - if (tab === "map" || tab === "story" || tab === "widgets") { - localStorageKey && setSizeFromStorage(localStorageKey); - } - }; - setSizeBasedOnTab(); - }, [tab, setSizeFromStorage, localStorageKey]); - const showTopGutter = direction === "horizontal" && gutter === "start"; const showRightGutter = direction === "vertical" && gutter === "end"; const showBottomGutter = direction === "horizontal" && gutter === "end"; diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx index 40fa15ac7..02fad2fbd 100644 --- a/web/src/beta/features/Editor/useLeftPanel.tsx +++ b/web/src/beta/features/Editor/useLeftPanel.tsx @@ -80,8 +80,7 @@ export default ({ gutter="end" initialSize={metrics.propertyMenuWidth} minSize={metrics.propertyMenuMinWidth} - localStorageKey="mapLeftPanel" - tab="map"> + localStorageKey="mapLeftPanel"> + localStorageKey="storyLeftPanel"> + localStorageKey="mapRightPanel"> + localStorageKey="storyRightPanel"> + localStorageKey="widgetRightPanel"> ); From 39d86d8bc27f4e401d92d6ed058f44feec7fe6e0 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Thu, 14 Dec 2023 17:13:34 +0300 Subject: [PATCH 10/10] improve based on comments --- web/src/beta/components/Resizable/hooks.ts | 52 +++----------- web/src/beta/features/Editor/index.tsx | 22 +++++- web/src/beta/features/Editor/useLeftPanel.tsx | 62 +++++++---------- .../beta/features/Editor/useRightPanel.tsx | 69 ++++++------------- 4 files changed, 73 insertions(+), 132 deletions(-) diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts index c3c9fd7ab..0d065535b 100644 --- a/web/src/beta/components/Resizable/hooks.ts +++ b/web/src/beta/components/Resizable/hooks.ts @@ -53,22 +53,6 @@ export default ( const [minimized, setMinimized] = useState(false); const [difference, setDifference] = useState(0); - const setSizeFromStorage = useCallback( - (localStorageKey: string) => { - const parsedState = getLocalStorageParsedState(localStorageKey); - const storedSize = parsedState?.size; - - if (storedSize !== undefined) { - setSize(storedSize); - setMinimized(parsedState.minimized); - } else { - setSize(initialSize); - setMinimized(false); - } - }, - [getLocalStorageParsedState, initialSize], - ); - useEffect(() => { const setSizeBasedOnTab = () => { if (localStorageKey) { @@ -85,7 +69,7 @@ export default ( } }; setSizeBasedOnTab(); - }, [setSizeFromStorage, localStorageKey, getLocalStorageParsedState, initialSize]); + }, [localStorageKey, getLocalStorageParsedState, initialSize]); const onResizeStart = useCallback( (e: React.MouseEvent | React.TouchEvent) => { @@ -142,13 +126,11 @@ export default ( setPosition({ x: 0, y: 0 }); setStartingSize(size); setDifference(0); - if (!localStorageKey) return; - const storedData = { size, minimized, }; - setLocalStorageData(localStorageKey, storedData); + localStorageKey && setLocalStorageData(localStorageKey, storedData); }, [isResizing, localStorageKey, minimized, size]); const bindEventListeners = useCallback(() => { @@ -176,16 +158,7 @@ export default ( } bindEventListeners(); return () => unbindEventListeners(); - }, [ - bindEventListeners, - difference, - isResizing, - localStorageKey, - minimized, - size, - startingSize, - unbindEventListeners, - ]); + }, [bindEventListeners, isResizing, unbindEventListeners]); const gutterProps = useMemo( () => ({ @@ -196,21 +169,13 @@ export default ( ); const handleResetSize = useCallback(() => { - if (!localStorageKey) return; - localStorage.setItem( - localStorageKey, - JSON.stringify({ - [localStorageKey]: { - size: initialSize, - minimized: false, - difference: 0, - startingSize: initialSize, - }, - }), - ); - setMinimized(false); setSize(initialSize); + localStorageKey && + setLocalStorageData(localStorageKey, { + size: initialSize, + minimized: false, + }); }, [initialSize, localStorageKey]); return { @@ -218,6 +183,5 @@ export default ( gutterProps, minimized, handleResetSize, - setSizeFromStorage, }; }; diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx index 501c29d21..3a3c2f1de 100644 --- a/web/src/beta/features/Editor/index.tsx +++ b/web/src/beta/features/Editor/index.tsx @@ -189,7 +189,16 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { currentTab={tab} /> - {leftPanel && leftPanel} + {leftPanel && ( + + {leftPanel} + + )}
{secondaryNavbar} @@ -223,7 +232,16 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { )}
- {rightPanel && rightPanel} + {rightPanel && ( + + {rightPanel} + + )} {showDataSourceManager && ( diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx index 02fad2fbd..ccf0df58d 100644 --- a/web/src/beta/features/Editor/useLeftPanel.tsx +++ b/web/src/beta/features/Editor/useLeftPanel.tsx @@ -1,6 +1,5 @@ import { ReactNode, useMemo } from "react"; -import Resizable from "@reearth/beta/components/Resizable"; import MapSidePanel from "@reearth/beta/features/Editor/tabs/map/LeftPanel"; import StorySidePanel from "@reearth/beta/features/Editor/tabs/story/LeftPanel"; import { Tab } from "@reearth/beta/features/Navbar"; @@ -9,7 +8,6 @@ import { ValueType, ValueTypes } from "@reearth/beta/utils/value"; import type { NLSLayer } from "@reearth/services/api/layersApi/utils"; import type { Scene } from "@reearth/services/api/sceneApi"; import type { Story } from "@reearth/services/api/storytellingApi/utils"; -import { metrics } from "@reearth/services/theme"; import type { LayerNameUpdateProps, LayerVisibilityUpdateProps } from "./useLayers"; @@ -75,46 +73,32 @@ export default ({ switch (tab) { case "map": return ( - - - + ); case "story": return ( - - - + ); case "widgets": case "publish": diff --git a/web/src/beta/features/Editor/useRightPanel.tsx b/web/src/beta/features/Editor/useRightPanel.tsx index 268c59acc..e19cecffd 100644 --- a/web/src/beta/features/Editor/useRightPanel.tsx +++ b/web/src/beta/features/Editor/useRightPanel.tsx @@ -1,6 +1,5 @@ import { ReactNode, useMemo } from "react"; -import Resizable from "@reearth/beta/components/Resizable"; import type { Tab } from "@reearth/beta/features/Navbar"; import type { FlyTo } from "@reearth/beta/lib/core/types"; import type { Camera } from "@reearth/beta/utils/value"; @@ -9,7 +8,6 @@ import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils"; import { Item } from "@reearth/services/api/propertyApi/utils"; import type { Scene } from "@reearth/services/api/sceneApi"; import type { Page } from "@reearth/services/api/storytellingApi/utils"; -import { metrics } from "@reearth/services/theme"; import MapSidePanel from "./tabs/map/RightPanel"; import StorySidePanel from "./tabs/story/RightPanel"; @@ -54,56 +52,33 @@ export default ({ switch (tab) { case "map": return ( - - - + ); case "story": return ( - - - + ); case "widgets": - return ( - - - - ); + return ; case "publish": default: