fix(core): split view should only be dragged by the handle (#9610)

fix BS-2354
also fix AF-2096

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<AffineDNDData>(() => {
+  const { dragRef } = useDraggable<AffineDNDData>(() => {
     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 ? (
         <ResizeHandle
@@ -236,10 +240,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({
         />
       ) : null}
       <div
-        ref={node => {
-          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={<SplitViewMenu view={view} onMove={onMove} />}
           />
         ) : null}

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"]': {

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