refactor DesktopTab impl for connection_tab_page.dart

flutter/lib/common.dart

@@ -206,7 +206,8 @@ closeConnection({String? id}) {
   if (isAndroid || isIOS) {
     Navigator.popUntil(globalKey.currentContext!, ModalRoute.withName("/"));
   } else {
-    DesktopTabBar.close(id);
+    final controller = Get.find<DesktopTabController>();
+    controller.closeBy(id);
   }
 }
 

flutter/lib/desktop/pages/connection_tab_page.dart

@@ -21,28 +21,36 @@ class ConnectionTabPage extends StatefulWidget {
 }
 
 class _ConnectionTabPageState extends State<ConnectionTabPage> {
-  // refactor List<int> when using multi-tab
+  final tabController = Get.put(DesktopTabController());
-  // this singleton is only for test
-  RxList<TabInfo> tabs = RxList<TabInfo>.empty(growable: true);
   static final Rx<String> _fullscreenID = "".obs;
-  final IconData selectedIcon = Icons.desktop_windows_sharp;
+  static final IconData selectedIcon = Icons.desktop_windows_sharp;
-  final IconData unselectedIcon = Icons.desktop_windows_outlined;
+  static final IconData unselectedIcon = Icons.desktop_windows_outlined;
 
   var connectionMap = RxList<Widget>.empty(growable: true);
 
   _ConnectionTabPageState(Map<String, dynamic> params) {
     if (params['id'] != null) {
-      tabs.add(TabInfo(
+      tabController.state.value.tabs.add(TabInfo(
           key: params['id'],
           label: params['id'],
           selectedIcon: selectedIcon,
-          unselectedIcon: unselectedIcon));
+          unselectedIcon: unselectedIcon,
+          closable: false,
+          page: RemotePage(
+            id: params['id'],
+            tabBarHeight:
+                _fullscreenID.value.isNotEmpty ? 0 : kDesktopRemoteTabBarHeight,
+            fullscreenID: _fullscreenID,
+          )));
     }
   }
 
   @override
   void initState() {
     super.initState();
+
+    tabController.onRemove = (_, id) => onRemoveId(id);
+
     rustDeskWinManager.setMethodHandler((call, fromWindowId) async {
       print(
           "call ${call.method} with args ${call.arguments} from window ${fromWindowId}");
@@ -51,18 +59,23 @@ class _ConnectionTabPageState extends State<ConnectionTabPage> {
         final args = jsonDecode(call.arguments);
         final id = args['id'];
         window_on_top(windowId());
-        DesktopTabBar.onAdd(
+        tabController.add(TabInfo(
-            tabs,
+            key: id,
-            TabInfo(
+            label: id,
-                key: id,
+            selectedIcon: selectedIcon,
-                label: id,
+            unselectedIcon: unselectedIcon,
-                selectedIcon: selectedIcon,
+            closable: false,
-                unselectedIcon: unselectedIcon));
+            page: RemotePage(
+              id: id,
+              tabBarHeight: _fullscreenID.value.isNotEmpty
+                  ? 0
+                  : kDesktopRemoteTabBarHeight,
+              fullscreenID: _fullscreenID,
+            )));
       } else if (call.method == "onDestroy") {
-        print(
+        tabController.state.value.tabs.forEach((tab) {
-            "executing onDestroy hook, closing ${tabs.map((tab) => tab.label).toList()}");
+          print("executing onDestroy hook, closing ${tab.label}}");
-        tabs.forEach((tab) {
+          final tag = tab.label;
-          final tag = '${tab.label}';
           ffi(tag).close().then((_) {
             Get.delete<FFI>(tag: tag);
           });
@@ -74,49 +87,29 @@ class _ConnectionTabPageState extends State<ConnectionTabPage> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = isDarkTheme() ? TarBarTheme.dark() : TarBarTheme.light();
     return SubWindowDragToResizeArea(
       windowId: windowId(),
       child: Container(
         decoration: BoxDecoration(
             border: Border.all(color: MyTheme.color(context).border!)),
         child: Scaffold(
-          backgroundColor: MyTheme.color(context).bg,
+            backgroundColor: MyTheme.color(context).bg,
-          body: Column(
+            body: DesktopTab(
-            children: [
+              controller: tabController,
-              Obx(() => Visibility(
+              theme: theme,
-                  visible: _fullscreenID.value.isEmpty,
+              isMainWindow: false,
-                  child: DesktopTabBar(
+              tail: AddButton(
-                    tabs: tabs,
+                theme: theme,
-                    onTabClose: onRemoveId,
+              ).paddingOnly(left: 10),
-                    dark: isDarkTheme(),
+            )),
-                    mainTab: false,
-                  ))),
-              Expanded(child: Obx(() {
-                WindowController.fromWindowId(windowId())
-                    .setFullscreen(_fullscreenID.value.isNotEmpty);
-                return PageView(
-                    controller: DesktopTabBar.controller.value,
-                    children: tabs
-                        .map((tab) => RemotePage(
-                              key: ValueKey(tab.label),
-                              id: tab.label,
-                              tabBarHeight: _fullscreenID.value.isNotEmpty
-                                  ? 0
-                                  : kDesktopRemoteTabBarHeight,
-                              fullscreenID: _fullscreenID,
-                            )) //RemotePage(key: ValueKey(e), id: e))
-                        .toList());
-              })),
-            ],
-          ),
-        ),
       ),
     );
   }
 
   void onRemoveId(String id) {
     ffi(id).close();
-    if (tabs.length == 0) {
+    if (tabController.state.value.tabs.length == 0) {
       WindowController.fromWindowId(windowId()).close();
     }
   }
@@ -125,3 +118,23 @@ class _ConnectionTabPageState extends State<ConnectionTabPage> {
     return widget.params["windowId"];
   }
 }
+
+class AddButton extends StatelessWidget {
+  late final TarBarTheme theme;
+
+  AddButton({
+    Key? key,
+    required this.theme,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ActionIcon(
+        message: 'New Connection',
+        icon: IconFont.add,
+        theme: theme,
+        onTap: () =>
+            rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
+        is_close: false);
+  }
+}

flutter/lib/desktop/widgets/tabbar_widget.dart

@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hbb/common.dart';
 import 'package:flutter_hbb/consts.dart';
 import 'package:flutter_hbb/main.dart';
-import 'package:flutter_hbb/utils/multi_window_manager.dart';
 import 'package:get/get.dart';
 import 'package:window_manager/window_manager.dart';
 import 'package:scroll_pos/scroll_pos.dart';
@@ -52,6 +51,9 @@ class DesktopTabState {
 class DesktopTabController {
   final state = DesktopTabState().obs;
 
+  /// index, key
+  Function(int, String)? onRemove;
+
   void add(TabInfo tab) {
     if (!isDesktop) return;
     final index = state.value.tabs.indexWhere((e) => e.key == tab.key);
@@ -75,8 +77,9 @@ class DesktopTabController {
 
   void remove(int index) {
     if (!isDesktop) return;
-    if (index < 0) return;
     final len = state.value.tabs.length;
+    if (index < 0 || index > len - 1) return;
+    final key = state.value.tabs[index].key;
     final currentSelected = state.value.selected;
     int toIndex = 0;
     if (index == len - 1) {
@@ -87,6 +90,7 @@ class DesktopTabController {
     state.value.tabs.removeAt(index);
     state.value.scrollController.itemCount = state.value.tabs.length;
     jumpTo(toIndex);
+    onRemove?.call(index, key);
   }
 
   void jumpTo(int index) {
@@ -98,6 +102,19 @@ class DesktopTabController {
 
     // onSelected callback
   }
+
+  void closeBy(String? key) {
+    if (!isDesktop) return;
+    assert(onRemove != null);
+    if (key == null) {
+      if (state.value.selected < state.value.tabs.length) {
+        remove(state.value.selected);
+      }
+    } else {
+      state.value.tabs.indexWhere((tab) => tab.key == key);
+      remove(state.value.selected);
+    }
+  }
 }
 
 class DesktopTab extends StatelessWidget {
@@ -201,12 +218,6 @@ class DesktopTab extends StatelessWidget {
                       theme: theme,
                     )),
               ),
-              Offstage(
-                offstage: isMainWindow,
-                child: _AddButton(
-                  theme: theme,
-                ).paddingOnly(left: 10),
-              ),
             ],
           ),
         ),
@@ -447,26 +458,6 @@ class _Tab extends StatelessWidget {
   }
 }
 
-class _AddButton extends StatelessWidget {
-  late final TarBarTheme theme;
-
-  _AddButton({
-    Key? key,
-    required this.theme,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return ActionIcon(
-        message: 'New Connection',
-        icon: IconFont.add,
-        theme: theme,
-        onTap: () =>
-            rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
-        is_close: false);
-  }
-}
-
 class _CloseButton extends StatelessWidget {
   final bool visiable;
   final bool tabSelected;