diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx b/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx index 2ef6cbc9df..ddc7831b14 100644 --- a/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx +++ b/packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx @@ -156,7 +156,8 @@ export const SplitViewPanel = memo(function SplitViewPanel({ canDrop(data) { const entityType = data.source.data.entity?.type; return ( - data.source.data.from?.at === 'workbench:view' || + (BUILD_CONFIG.isElectron && + data.source.data.from?.at === 'workbench:view') || data.source.data.from?.at === 'workbench:link' || (!!entityType && allowedSplitViewEntityTypes.has(entityType)) ); @@ -166,7 +167,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({ }; }, [index, isFirst, order, setDraggingOverView, view, views]); - const { dragRef, dragHandleRef } = useDraggable(() => { + const { dragRef } = useDraggable(() => { return { data: () => { return { @@ -189,6 +190,9 @@ export const SplitViewPanel = memo(function SplitViewPanel({ index: order, }); }, + canDrag() { + return BUILD_CONFIG.isElectron && views.length > 1; + }, disableDragPreview: true, }; }, [ @@ -199,6 +203,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({ setDraggingOverView, setDraggingView, view, + views.length, ]); const dragging = draggingView?.view.id === view.id; @@ -222,7 +227,6 @@ export const SplitViewPanel = memo(function SplitViewPanel({ data-is-first={isFirst} data-is-last={isLast} data-testid="split-view-panel" - draggable={false} // only drag via drag handle > {isFirst ? ( ) : null}
{ - dropTargetRef.current = node; - dragRef.current = node; - }} + ref={dropTargetRef} data-is-active={isActive && views.length > 1 && !draggingEntity} className={styles.splitViewPanelDrag} > @@ -251,7 +252,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({ view={view} isActive={isActive} isDragging={dragging} - dragHandleRef={dragHandleRef} + dragHandleRef={dragRef} menuItems={} /> ) : null} diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts index ccfdc1e0b3..0051470a3f 100644 --- a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts +++ b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts @@ -13,7 +13,7 @@ const dropIndicatorRadius = createVar(); const expandDropIndicator = keyframes({ from: { vars: { - [resizeHandleWidth]: '30px', + [resizeHandleWidth]: '50px', [dropIndicatorWidth]: '3px', [dropIndicatorOpacity]: '1', [dropIndicatorRadius]: '10px', @@ -110,7 +110,7 @@ export const resizeHandle = style({ '&[data-state="drop-indicator"]': { vars: { - [resizeHandleWidth]: '20px', + [resizeHandleWidth]: '50px', }, }, '&[data-edge="left"]': { diff --git a/tests/affine-desktop/e2e/split-view.spec.ts b/tests/affine-desktop/e2e/split-view.spec.ts index 942a17e6d3..185020d703 100644 --- a/tests/affine-desktop/e2e/split-view.spec.ts +++ b/tests/affine-desktop/e2e/split-view.spec.ts @@ -39,14 +39,14 @@ test('open split view', async ({ page }) => { 'true' ); - const firstDragHandel = page + const firstDragHandle = page .getByTestId('split-view-panel') .first() .getByTestId('split-view-indicator'); await dragTo( page, - firstDragHandel, + firstDragHandle, page.getByTestId('split-view-panel').last(), 'center', true