Merge pull request #3249 from fufesou/fix/monitor_count_sync

fix sync displays info && select monitor menu

flutter/lib/desktop/widgets/material_mod_popup_menu.dart

@@ -1400,7 +1400,7 @@ class PopupMenuButtonState<T> extends State<PopupMenuButton<T>> {
     }
 
     return MenuButton(
-      icon: widget.icon ?? Icon(Icons.adaptive.more),
+      child: widget.icon ?? Icon(Icons.adaptive.more),
       tooltip:
           widget.tooltip ?? MaterialLocalizations.of(context).showMenuTooltip,
       onPressed: widget.enabled ? showButtonMenu : null,

flutter/lib/desktop/widgets/menu_button.dart

@@ -5,7 +5,7 @@ class MenuButton extends StatefulWidget {
   final Color color;
   final Color hoverColor;
   final Color? splashColor;
-  final Widget icon;
+  final Widget child;
   final String? tooltip;
   final EdgeInsetsGeometry padding;
   final bool enableFeedback;
@@ -14,7 +14,7 @@ class MenuButton extends StatefulWidget {
     required this.onPressed,
     required this.color,
     required this.hoverColor,
-    required this.icon,
+    required this.child,
     this.splashColor,
     this.tooltip = "",
     this.padding = const EdgeInsets.symmetric(horizontal: 3, vertical: 6),
@@ -51,7 +51,7 @@ class _MenuButtonState extends State<MenuButton> {
               splashColor: widget.splashColor,
               enableFeedback: widget.enableFeedback,
               onTap: widget.onPressed,
-              child: widget.icon,
+              child: widget.child,
             ),
           ),
         ),

flutter/lib/desktop/widgets/remote_menubar.dart

@@ -476,7 +476,7 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
         onPressed: () {
           widget.state.switchPin();
         },
-        icon: SvgPicture.asset(
+        child: SvgPicture.asset(
           pin ? "assets/pinned.svg" : "assets/unpinned.svg",
           color: Colors.white,
         ),
@@ -492,7 +492,7 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
       onPressed: () {
         _setFullscreen(!isFullscreen);
       },
-      icon: SvgPicture.asset(
+      child: SvgPicture.asset(
         isFullscreen ? "assets/fullscreen_exit.svg" : "assets/fullscreen.svg",
         color: Colors.white,
       ),
@@ -503,7 +503,7 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
 
   Widget _buildMonitor(BuildContext context) {
     final pi = widget.ffi.ffiModel.pi;
-    return mod_menu.PopupMenuButton(
+    final monitor = mod_menu.PopupMenuButton(
       tooltip: translate('Select Monitor'),
       position: mod_menu.PopupMenuPosition.under,
       icon: Stack(
@@ -528,43 +528,44 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
       itemBuilder: (BuildContext context) {
         final List<Widget> rowChildren = [];
         for (int i = 0; i < pi.displays.length; i++) {
-          rowChildren.add(
-            Stack(
-              alignment: Alignment.center,
-              children: [
-                SvgPicture.asset(
-                  "assets/display.svg",
-                  color: Colors.white,
-                ),
-                TextButton(
-                  child: Container(
-                    alignment: AlignmentDirectional.center,
-                    constraints:
-                        const BoxConstraints(minHeight: _MenubarTheme.height),
-                    child: Padding(
-                      padding: const EdgeInsets.only(bottom: 2.5),
-                      child: Text(
-                        (i + 1).toString(),
-                        style: TextStyle(
-                          color: Colors.white,
-                        ),
+          rowChildren.add(MenuButton(
+            color: _MenubarTheme.blueColor,
+            hoverColor: _MenubarTheme.hoverBlueColor,
+            child: Container(
+              alignment: AlignmentDirectional.center,
+              constraints:
+                  const BoxConstraints(minHeight: _MenubarTheme.height),
+              child: Stack(
+                alignment: Alignment.center,
+                children: [
+                  SvgPicture.asset(
+                    "assets/display.svg",
+                    color: Colors.white,
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 2.5),
+                    child: Text(
+                      (i + 1).toString(),
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 12,
                       ),
                     ),
-                  ),
-                  onPressed: () {
-                    if (Navigator.canPop(context)) {
-                      Navigator.pop(context);
-                      _menuDismissCallback();
-                    }
-                    RxInt display = CurrentDisplayState.find(widget.id);
-                    if (display.value != i) {
-                      bind.sessionSwitchDisplay(id: widget.id, value: i);
-                    }
-                  },
-                )
-              ],
+                  )
+                ],
+              ),
             ),
-          );
+            onPressed: () {
+              if (Navigator.canPop(context)) {
+                Navigator.pop(context);
+                _menuDismissCallback();
+              }
+              RxInt display = CurrentDisplayState.find(widget.id);
+              if (display.value != i) {
+                bind.sessionSwitchDisplay(id: widget.id, value: i);
+              }
+            },
+          ));
         }
         return <mod_menu.PopupMenuEntry<String>>[
           mod_menu.PopupMenuItem<String>(
@@ -580,6 +581,11 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
         ];
       },
     );
+
+    return Obx(() => Offstage(
+          offstage: stateGlobal.displaysCount.value < 2,
+          child: monitor,
+        ));
   }
 
   Widget _buildControl(BuildContext context) {
@@ -678,7 +684,7 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
                 ? translate('Stop session recording')
                 : translate('Start session recording'),
             onPressed: () => value.toggle(),
-            icon: SvgPicture.asset(
+            child: SvgPicture.asset(
               "assets/rec.svg",
               color: Colors.white,
             ),
@@ -701,7 +707,7 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
       onPressed: () {
         clientClose(widget.id, widget.ffi.dialogManager);
       },
-      icon: SvgPicture.asset(
+      child: SvgPicture.asset(
         "assets/close.svg",
         color: Colors.white,
       ),
@@ -771,7 +777,7 @@ class _RemoteMenubarState extends State<RemoteMenubar> {
         return tooltipText == null
             ? const Offstage()
             : MenuButton(
-                icon: _getVoiceCallIcon(),
+                child: _getVoiceCallIcon(),
                 tooltip: translate(tooltipText),
                 onPressed: () => bind.sessionCloseVoiceCall(id: widget.id),
                 color: _MenubarTheme.redColor,

flutter/lib/models/model.dart

@@ -140,6 +140,8 @@ class FfiModel with ChangeNotifier {
         handleMsgBox(evt, peerId);
       } else if (name == 'peer_info') {
         handlePeerInfo(evt, peerId);
+      } else if (name == 'sync_peer_info') {
+        handleSyncPeerInfo(evt, peerId);
       } else if (name == 'connection_ready') {
         setConnectionType(
             peerId, evt['secure'] == 'true', evt['direct'] == 'true');
@@ -415,6 +417,7 @@ class FfiModel with ChangeNotifier {
         d.cursorEmbedded = d0['cursor_embedded'] == 1;
         _pi.displays.add(d);
       }
+      stateGlobal.displaysCount.value = _pi.displays.length;
       if (_pi.currentDisplay < _pi.displays.length) {
         _display = _pi.displays[_pi.currentDisplay];
       }
@@ -431,6 +434,27 @@ class FfiModel with ChangeNotifier {
     notifyListeners();
   }
 
+  /// Handle the peer info synchronization event based on [evt].
+  handleSyncPeerInfo(Map<String, dynamic> evt, String peerId) async {
+    if (evt['displays'] != null) {
+      List<dynamic> displays = json.decode(evt['displays']);
+      List<Display> newDisplays = [];
+      for (int i = 0; i < displays.length; ++i) {
+        Map<String, dynamic> d0 = displays[i];
+        var d = Display();
+        d.x = d0['x'].toDouble();
+        d.y = d0['y'].toDouble();
+        d.width = d0['width'];
+        d.height = d0['height'];
+        d.cursorEmbedded = d0['cursor_embedded'] == 1;
+        newDisplays.add(d);
+      }
+      _pi.displays = newDisplays;
+      stateGlobal.displaysCount.value = _pi.displays.length;
+    }
+    notifyListeners();
+  }
+
   updateBlockInputState(Map<String, dynamic> evt, String peerId) {
     _inputBlocked = evt['input_state'] == 'on';
     notifyListeners();

flutter/lib/models/state_model.dart

@@ -14,6 +14,7 @@ class StateGlobal {
   final RxDouble _resizeEdgeSize = RxDouble(kWindowEdgeSize);
   final RxDouble _windowBorderWidth = RxDouble(kWindowBorderWidth);
   final RxBool showRemoteMenuBar = false.obs;
+  final RxInt displaysCount = 0.obs;
 
   int get windowId => _windowId;
   bool get fullscreen => _fullscreen;