feat: added logic for pane drag-drop

squidrye · Sep 14, 2023 · 83447b0 · 83447b0
1 parent ca81a1c
commit 83447b0
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 33 deletions.
diff --git a/frontend/appflowy_flutter/lib/workspace/application/panes/panes_cubit/panes_cubit.dart b/frontend/appflowy_flutter/lib/workspace/application/panes/panes_cubit/panes_cubit.dart
@@ -47,15 +47,12 @@ class PanesCubit extends Cubit<PanesState> {
       direction,
       axis,
       setActivePane,
+      null,
     );
 
     emit(
       state.copyWith(
         root: root,
-      ),
-    );
-    emit(
-      state.copyWith(
         count: panesService.countNodeHandler(root),
       ),
     );
@@ -110,4 +107,28 @@ class PanesCubit extends Cubit<PanesState> {
       }
     }
   }
+
+  void movePane(
+    PaneNode from,
+    PaneNode to,
+    PaneDraggableHoverPosition position,
+  ) {
+    emit(
+      state.copyWith(
+        root: panesService.splitHandler(
+          state.root,
+          to.paneId,
+          null,
+          Direction.front,
+          (position == PaneDraggableHoverPosition.left ||
+                  position == PaneDraggableHoverPosition.right)
+              ? Axis.vertical
+              : Axis.horizontal,
+          setActivePane,
+          from,
+        ),
+      ),
+    );
+    closePane(from.paneId);
+  }
 }
diff --git a/frontend/appflowy_flutter/lib/workspace/application/panes/panes_cubit/panes_state.dart b/frontend/appflowy_flutter/lib/workspace/application/panes/panes_cubit/panes_state.dart
@@ -1,5 +1,14 @@
 part of 'panes_cubit.dart';
 
+enum PaneDraggableHoverPosition {
+  none,
+  top,
+  left,
+  right,
+  bottom,
+  whole,
+}
+
 class PanesState extends Equatable {
   final PaneNode root;
   final int count;

diff --git a/frontend/appflowy_flutter/lib/workspace/application/panes/panes_service.dart b/frontend/appflowy_flutter/lib/workspace/application/panes/panes_service.dart
@@ -1,4 +1,5 @@
 import 'package:appflowy/workspace/application/panes/panes.dart';
+import 'package:appflowy/workspace/application/panes/panes_cubit/panes_cubit.dart';
 import 'package:appflowy/workspace/application/panes/size_controller.dart';
 import 'package:appflowy/workspace/application/tabs/tabs.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
@@ -14,10 +15,11 @@ class PanesService {
   PaneNode splitHandler(
     PaneNode node,
     String targetPaneId,
-    ViewPB view,
+    ViewPB? view,
     Direction direction,
     Axis axis,
     void Function(PaneNode) activePane,
+    PaneNode? fromNode,
   ) {
     /// This is a recursive handler, following condition checks if passed node
     /// is our target node
@@ -43,14 +45,16 @@ class PanesService {
               pageManagers: node.tabs.pageManagers,
             ),
           ),
-          PaneNode(
-            sizeController: PaneSizeController.intial(),
-            paneId: nanoid(),
-            children: const [],
-            parent: newNode,
-            axis: null,
-            tabs: Tabs(pageManagers: [PageManager()..setPlugin(view.plugin())]),
-          )
+          fromNode ??
+              PaneNode(
+                sizeController: PaneSizeController.intial(),
+                paneId: nanoid(),
+                children: const [],
+                parent: newNode,
+                axis: null,
+                tabs: Tabs(
+                    pageManagers: [PageManager()..setPlugin(view!.plugin())]),
+              )
         ],
       );
       activePane(ret.children[0]);
@@ -62,13 +66,15 @@ class PanesService {
     if (node.axis == axis) {
       for (int i = 0; i < node.children.length; i++) {
         if (node.children[i].paneId == targetPaneId) {
-          final newNode = PaneNode(
-            sizeController: PaneSizeController.intial(),
-            paneId: nanoid(),
-            children: const [],
-            parent: node.parent,
-            tabs: Tabs(pageManagers: [PageManager()..setPlugin(view.plugin())]),
-          );
+          final newNode = fromNode ??
+              PaneNode(
+                sizeController: PaneSizeController.intial(),
+                paneId: nanoid(),
+                children: const [],
+                parent: node.parent,
+                tabs: Tabs(
+                    pageManagers: [PageManager()..setPlugin(view!.plugin())]),
+              );
           if (direction == Direction.front) {
             if (i == node.children.length) {
               node.children.add(newNode);
@@ -99,8 +105,17 @@ class PanesService {
     ///node isn't right holder we proceed recursively to dfs remaining
     ///children
     final newChildren = node.children
-        .map((e) =>
-            splitHandler(e, targetPaneId, view, direction, axis, activePane))
+        .map(
+          (e) => splitHandler(
+            e,
+            targetPaneId,
+            view,
+            direction,
+            axis,
+            activePane,
+            fromNode,
+          ),
+        )
         .toList();
     return node.copyWith(children: newChildren);
   }
@@ -123,7 +138,19 @@ class PanesService {
             parent: node.parent,
           );
         }
-        return node;
+        return node.copyWith(
+          paneId: nanoid(),
+          tabs: Tabs(
+            currentIndex: node.tabs.currentIndex,
+            pageManagers: node.tabs.pageManagers,
+          ),
+          sizeController: PaneSizeController(
+            flex: List.generate(
+              node.children.length,
+              (_) => 1 / (node.children.length),
+            ),
+          ),
+        );
       }
     }
 

diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/draggable_pane_item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/draggable_pane_item.dart
@@ -1,19 +1,12 @@
 import 'package:appflowy/workspace/application/panes/panes.dart';
+import 'package:appflowy/workspace/application/panes/panes_cubit/panes_cubit.dart';
 import 'package:appflowy/workspace/presentation/widgets/draggable_item/draggable_item.dart';
 import 'package:appflowy_backend/log.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:vector_math/vector_math.dart' as math;
 import 'dart:math';
 import 'package:flutter/material.dart';
 
-enum PaneDraggableHoverPosition {
-  none,
-  top,
-  left,
-  right,
-  bottom,
-  whole,
-}
-
 class DraggablePaneItem extends StatefulWidget {
   const DraggablePaneItem({
     super.key,
@@ -166,5 +159,7 @@ class _DraggablePaneItemState extends State<DraggablePaneItem> {
     return true;
   }
 
-  void _move(PaneNode from, PaneNode to) {}
+  void _move(PaneNode from, PaneNode to) {
+    context.read<PanesCubit>().movePane(from, to, position);
+  }
 }