From d8d46d35f2b161acab366dc5f1edaa38b165c472 Mon Sep 17 00:00:00 2001 From: squidrye Date: Fri, 29 Sep 2023 16:31:52 +0530 Subject: [PATCH] chore: added suggestions --- .../application/tabs/tabs_service.dart | 3 - .../presentation/home/home_layout.dart | 2 +- .../presentation/home/home_sizes.dart | 1 + .../presentation/home/home_stack.dart | 1 + .../workspace/presentation/home/hotkeys.dart | 4 +- .../home/menu/view/draggable_view_item.dart | 4 - .../home/panes/draggable_pane_target.dart | 107 ++++++++++-------- .../home/panes/flowy_pane_group.dart | 61 +++++----- .../presentation/home/panes/panes_layout.dart | 8 +- .../home/tabs/draggable_tab_item.dart | 3 +- 10 files changed, 104 insertions(+), 90 deletions(-) diff --git a/frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_service.dart b/frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_service.dart index ae99d0d5006f..85b381d58701 100644 --- a/frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_service.dart +++ b/frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_service.dart @@ -4,7 +4,6 @@ import 'package:appflowy/core/config/kv.dart'; import 'package:appflowy/core/config/kv_keys.dart'; import 'package:appflowy/startup/plugin/plugin.dart'; import 'package:appflowy/startup/startup.dart'; -import 'package:appflowy_backend/log.dart'; class TabsService { const TabsService(); @@ -31,14 +30,12 @@ class TabsService { (l) => {}, (r) => jsonDecode(r), ); - // Log.warn("Result Map $map ${map[plugin.id]} ${plugin.id}"); if (map[plugin.id] != null) { map[plugin.id] += 1; return true; } map[plugin.id] = 1; - Log.warn(map); await getIt().set(KVKeys.openedPlugins, jsonEncode(map)); return false; } diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_layout.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_layout.dart index 83071589e336..52e4a1cd23eb 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_layout.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_layout.dart @@ -38,7 +38,7 @@ class HomeLayout { menuIsDrawer = context.widthPx <= PageBreaks.tabletPortrait; } - homePageLOffset = (showMenu) ? menuWidth : 0.0; + homePageLOffset = showMenu ? menuWidth : 0.0; menuSpacing = !showMenu && Platform.isMacOS ? 80.0 : 0.0; animDuration = homeSetting.resizeType.duration(); diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_sizes.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_sizes.dart index fd15cf8d2383..ab852f7d0f8b 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_sizes.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_sizes.dart @@ -5,6 +5,7 @@ class HomeSizes { static const double editPanelWidth = 400; static const double tabBarHeigth = 40; static const double tabBarWidth = 200; + static const double resizeBarThickness = 4; } class HomeInsets { diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart index a437f04316be..1b97f0f2c1b6 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart @@ -59,6 +59,7 @@ class HomeStack extends StatelessWidget { ); } + //TODO(squidrye): Remove before merge void _printTree(PaneNode node, [String prefix = '']) { print('$prefix${node.tabs.hashCode}'); for (var child in node.children) { diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/hotkeys.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/hotkeys.dart index d9f583ae2c39..5f444cc33b36 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/hotkeys.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/hotkeys.dart @@ -102,8 +102,6 @@ class HomeHotKeys extends StatelessWidget { void _selectTab(BuildContext context, int change) { final bloc = context.read(); - context - .read() - .selectTab(index: bloc.state.activePane.tabs.currentIndex + change); + bloc.selectTab(index: bloc.state.activePane.tabs.currentIndex + change); } } diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/draggable_view_item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/draggable_view_item.dart index d8d67c26bc9f..0995e55d3977 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/draggable_view_item.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/draggable_view_item.dart @@ -2,7 +2,6 @@ import 'package:appflowy/workspace/application/view/view_bloc.dart'; import 'package:appflowy/workspace/application/view/view_ext.dart'; import 'package:appflowy/workspace/presentation/home/home_draggables.dart'; import 'package:appflowy/workspace/presentation/widgets/draggable_item/combined_draggable_item.dart'; -import 'package:appflowy_backend/log.dart'; import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -81,9 +80,6 @@ class _DraggableViewItemState extends State { return; } setState(() { - Log.debug( - 'offset: $offset, position: $position, size: ${renderBox.size}', - ); this.position = position; }); } diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/draggable_pane_target.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/draggable_pane_target.dart index b62b98fca63f..078b31400fa6 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/draggable_pane_target.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/draggable_pane_target.dart @@ -22,7 +22,7 @@ class DraggablePaneTarget extends StatefulWidget { this.allowDrag = true, }); - final CrossDraggablesEntity pane; //pass target pane + final CrossDraggablesEntity pane; final Widget child; final BuildContext paneContext; final bool allowDrag; @@ -76,54 +76,67 @@ class _DraggablePaneTargetState extends State { BuildContext context, FlowyDraggableHoverPosition position, ) { - final top = (widget.pane.draggable as PaneNode).tabs.pages > 1 + final (left, top, height, width) = _getHoverWidgetPosition(position); + + if (position == FlowyDraggableHoverPosition.none) { + return const SizedBox.shrink(); + } + + return Positioned( + top: top, + left: left, + child: Container( + height: height, + width: width, + color: Theme.of(context).hoverColor.withOpacity(0.5), + ), + ); + } + + (double? left, double? top, double? height, double? width) + _getHoverWidgetPosition(FlowyDraggableHoverPosition position) { + double? left, top, height, width; + + final topOffset = (widget.pane.draggable as PaneNode).tabs.pages > 1 ? HomeSizes.tabBarHeigth + HomeSizes.topBarHeight : HomeSizes.topBarHeight; - return switch (position) { - FlowyDraggableHoverPosition.top => Positioned( - top: top, - child: Container( - height: (widget.size.height) / 2, - width: widget.size.width, - color: Theme.of(context).hoverColor.withOpacity(0.5), - ), - ), - FlowyDraggableHoverPosition.left => Positioned( - left: 0, - top: top, - child: Container( - width: widget.size.width / 2, - height: widget.size.height, - color: Theme.of(context).hoverColor.withOpacity(0.5), - ), - ), - FlowyDraggableHoverPosition.right => Positioned( - top: top, - left: widget.size.width / 2, - child: Container( - width: widget.size.width / 2, - height: widget.size.height, - color: Theme.of(context).hoverColor.withOpacity(0.5), - ), - ), - FlowyDraggableHoverPosition.bottom => Positioned( - top: widget.size.height / 2, - child: Container( - height: widget.size.height / 2, - width: widget.size.width, - color: Theme.of(context).hoverColor.withOpacity(0.5), - ), - ), - FlowyDraggableHoverPosition.tab => Positioned( - top: 0, - child: Container( - height: top, - width: widget.size.width, - color: Theme.of(context).hoverColor.withOpacity(0.5), - ), - ), - FlowyDraggableHoverPosition.none => const SizedBox.shrink(), - }; + + switch (position) { + case FlowyDraggableHoverPosition.top: + top = topOffset; + left = null; + height = widget.size.height / 2; + width = widget.size.width; + break; + case FlowyDraggableHoverPosition.left: + top = topOffset; + left = 0; + height = widget.size.height; + width = widget.size.width / 2; + break; + case FlowyDraggableHoverPosition.right: + top = topOffset; + left = widget.size.width / 2; + height = widget.size.height; + width = widget.size.width / 2; + break; + case FlowyDraggableHoverPosition.bottom: + top = widget.size.height / 2; + height = widget.size.height / 2; + width = widget.size.width; + left = null; + break; + case FlowyDraggableHoverPosition.tab: + top = 0; + left = null; + height = top; + width = widget.size.width; + break; + default: + break; + } + + return (left, top, height, width); } FlowyDraggableHoverPosition _computeHoverPosition( diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/flowy_pane_group.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/flowy_pane_group.dart index a9ea8e9f4101..c234d129ffd7 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/flowy_pane_group.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/flowy_pane_group.dart @@ -4,6 +4,7 @@ import 'package:appflowy/workspace/application/panes/panes_cubit/panes_cubit.dar import 'package:appflowy/workspace/presentation/home/home_layout.dart'; import 'package:appflowy/workspace/presentation/home/home_stack.dart'; import 'package:appflowy/workspace/presentation/home/panes/panes_layout.dart'; +import 'package:flowy_infra_ui/style_widget/extension.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -16,6 +17,7 @@ class FlowyPaneGroup extends StatelessWidget { final double groupHeight; final HomeLayout layout; final HomeStackDelegate delegate; + const FlowyPaneGroup({ super.key, required this.node, @@ -43,7 +45,10 @@ class FlowyPaneGroup extends StatelessWidget { return BlocProvider( key: ValueKey(node.paneId), - create: (context) => PaneNodeCubit(node.children.length), + create: (context) => PaneNodeCubit( + node.children.length, + node.axis == Axis.horizontal ? groupHeight : groupWidth, + ), child: BlocBuilder( builder: (context, state) { return SizedBox( @@ -60,12 +65,12 @@ class FlowyPaneGroup extends StatelessWidget { ); return Stack( children: [ - _resolveFlowyPanes(paneLayout, indexNode), - _resizeBar( - indexNode, - context, + _resolveFlowyPanes( paneLayout, - ) + indexNode, + state.resizeOffset[indexNode.$1], + ), + _resizeBar(indexNode, context, paneLayout), ], ); }).toList(), @@ -91,19 +96,21 @@ class FlowyPaneGroup extends StatelessWidget { cursor: paneLayout.resizeCursorType, child: GestureDetector( dragStartBehavior: DragStartBehavior.down, - onHorizontalDragUpdate: (details) => - context.read().resize( - paneLayout.childPaneWidth, - indexNode.$1, - details.delta.dx, - ), - onVerticalDragUpdate: (details) => - context.read().resize( - paneLayout.childPaneHeight, - indexNode.$1, - details.delta.dy, - ), - behavior: HitTestBehavior.opaque, + onHorizontalDragUpdate: (details) { + context + .read() + .paneResized(indexNode.$1, details.delta.dx, groupWidth); + }, + onVerticalDragUpdate: (details) { + context + .read() + .paneResized(indexNode.$1, details.delta.dy, groupHeight); + }, + onHorizontalDragStart: (_) => + context.read().resizeStart(), + onVerticalDragStart: (_) => + context.read().resizeStart(), + behavior: HitTestBehavior.translucent, child: Container( width: paneLayout.resizerWidth, height: paneLayout.resizerHeight, @@ -123,20 +130,20 @@ class FlowyPaneGroup extends StatelessWidget { Widget _resolveFlowyPanes( PaneLayout paneLayout, (int, PaneNode) indexNode, + double position, ) { return Positioned( left: paneLayout.childPaneLPosition, top: paneLayout.childPaneTPosition, - child: SizedBox( + child: FlowyPaneGroup( + node: indexNode.$2, + groupWidth: paneLayout.childPaneWidth, + groupHeight: paneLayout.childPaneHeight, + delegate: delegate, + layout: layout, + ).constrained( width: paneLayout.childPaneWidth, height: paneLayout.childPaneHeight, - child: FlowyPaneGroup( - node: indexNode.$2, - groupWidth: paneLayout.childPaneWidth, - groupHeight: paneLayout.childPaneHeight, - delegate: delegate, - layout: layout, - ), ), ); } diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/panes_layout.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/panes_layout.dart index 840c1cf24a0a..9944636eee4b 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/panes_layout.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/panes_layout.dart @@ -1,4 +1,5 @@ import 'package:appflowy/workspace/application/panes/panes.dart'; +import 'package:appflowy/workspace/presentation/home/home_sizes.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; @@ -44,11 +45,12 @@ class PaneLayout { childPaneTPosition = parentPane.axis == Axis.horizontal ? accumulatedHeight : null; - resizerWidth = - parentPane.axis == Axis.vertical ? 3 : parentPaneConstraints.maxWidth; + resizerWidth = parentPane.axis == Axis.vertical + ? HomeSizes.resizeBarThickness + : parentPaneConstraints.maxWidth; resizerHeight = parentPane.axis == Axis.horizontal - ? 3 + ? HomeSizes.resizeBarThickness : parentPaneConstraints.maxHeight; resizeCursorType = parentPane.axis == Axis.vertical diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/draggable_tab_item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/draggable_tab_item.dart index e9fd7125fbb5..05103e1856d6 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/draggable_tab_item.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/draggable_tab_item.dart @@ -138,9 +138,8 @@ class _DraggabletabItemState extends State { final threshold = size.width / 2; if (offset.dx < threshold) { return TabDraggableHoverPosition.left; - } else { - return TabDraggableHoverPosition.right; } + return TabDraggableHoverPosition.right; } return TabDraggableHoverPosition.none; }