CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

记录上一次操作的面板的size大小持久化

Browse Source
This commit is contained in:
YHH
2025-10-15 20:26:40 +08:00
parent 171805debf
commit 62381f4160
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/editor-app/src/components/DockContainer.tsx
View File

@@ -70,6 +70,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
defaultSize={200}
minSize={32}
maxSize={600}
storageKey="editor-panel-bottom-size"
leftOrTop={content}
rightOrBottom={
<div className="dock-bottom">
@@ -87,6 +88,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
defaultSize={200}
minSize={32}
maxSize={600}
storageKey="editor-panel-top-size"
leftOrTop={
<div className="dock-top">
{renderPanelGroup('top')}
@@ -105,6 +107,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
defaultSize={250}
minSize={150}
maxSize={400}
storageKey="editor-panel-left-size"
leftOrTop={
<div className="dock-left">
{renderPanelGroup('left')}
@@ -117,6 +120,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
defaultSize={280}
minSize={200}
maxSize={500}
storageKey="editor-panel-right-size"
leftOrTop={content}
rightOrBottom={
<div className="dock-right">
@@ -134,6 +138,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
defaultSize={250}
minSize={150}
maxSize={400}
storageKey="editor-panel-left-size"
leftOrTop={
<div className="dock-left">
{renderPanelGroup('left')}
@@ -150,6 +155,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) {
defaultSize={280}
minSize={200}
maxSize={500}
storageKey="editor-panel-right-size"
leftOrTop={content}
rightOrBottom={
<div className="dock-right">

25
packages/editor-app/src/components/ResizablePanel.tsx
View File

@@ -9,6 +9,7 @@ interface ResizablePanelProps {
minSize?: number;
maxSize?: number;
side?: 'left' | 'right' | 'top' | 'bottom';
storageKey?: string;
}
export function ResizablePanel({
@@ -18,12 +19,32 @@ export function ResizablePanel({
defaultSize = 250,
minSize = 150,
maxSize = 600,
side = 'left'
side = 'left',
storageKey
}: ResizablePanelProps) {
const [size, setSize] = useState(defaultSize);
const getInitialSize = () => {
if (storageKey) {
const saved = localStorage.getItem(storageKey);
if (saved) {
const parsedSize = parseInt(saved, 10);
if (!isNaN(parsedSize)) {
return Math.max(minSize, Math.min(maxSize, parsedSize));
}
}
}
return defaultSize;
};
const [size, setSize] = useState(getInitialSize);
const [isDragging, setIsDragging] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (storageKey && !isDragging) {
localStorage.setItem(storageKey, size.toString());
}
}, [size, isDragging, storageKey]);
useEffect(() => {
if (!isDragging) return;