From 83447b0e52eacab42fe0fb66a6409541894d418b Mon Sep 17 00:00:00 2001 From: squidrye Date: Thu, 14 Sep 2023 19:39:41 +0530 Subject: [PATCH] feat: added logic for pane drag-drop --- .../panes/panes_cubit/panes_cubit.dart | 29 +++++++-- .../panes/panes_cubit/panes_state.dart | 9 +++ .../application/panes/panes_service.dart | 65 +++++++++++++------ .../home/panes/draggable_pane_item.dart | 15 ++--- 4 files changed, 85 insertions(+), 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 index fe5ba5572080..9fdbba97fc33 100644 --- 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 { direction, axis, setActivePane, + null, ); emit( state.copyWith( root: root, - ), - ); - emit( - state.copyWith( count: panesService.countNodeHandler(root), ), ); @@ -110,4 +107,28 @@ class PanesCubit extends Cubit { } } } + + 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 index 260bc375e2d8..78519cb46d0b 100644 --- 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 index 594ba8b32902..725d2f50bc90 100644 --- 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 index c6f8cd0f6f3e..a1753835e7d1 100644 --- 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 { return true; } - void _move(PaneNode from, PaneNode to) {} + void _move(PaneNode from, PaneNode to) { + context.read().movePane(from, to, position); + } }