opt peer card multi select

Signed-off-by: 21pages <pages21@163.com>

flutter/lib/common.dart

@@ -90,6 +90,7 @@ class IconFont {
   static const IconData roundClose = IconData(0xe6ed, fontFamily: _family2);
   static const IconData addressBook =
       IconData(0xe602, fontFamily: "AddressBook");
+  static const IconData checkbox = IconData(0xe7d6, fontFamily: "CheckBox");
 }
 
 class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {

flutter/lib/common/widgets/peer_card.dart

@@ -61,20 +61,19 @@ class _PeerCardState extends State<_PeerCard>
     final name =
         '${peer.username}${peer.username.isNotEmpty && peer.hostname.isNotEmpty ? '@' : ''}${peer.hostname}';
     final PeerTabModel peerTabModel = Provider.of(context);
-    final selected = peerTabModel.isPeerSelected(peer.id);
     return Card(
         margin: EdgeInsets.symmetric(horizontal: 2),
         child: GestureDetector(
             onTap: () {
               if (peerTabModel.multiSelectionMode) {
-                peerTabModel.togglePeerSelect(peer);
+                peerTabModel.select(peer);
               } else {
                 if (!isWebDesktop) connect(context, peer.id);
               }
             },
             onDoubleTap: isWebDesktop ? () => connect(context, peer.id) : null,
             onLongPress: () {
-              peerTabModel.togglePeerSelect(peer);
+              peerTabModel.select(peer);
             },
             child: Container(
               padding: EdgeInsets.only(left: 12, top: 8, bottom: 8),
@@ -103,23 +102,7 @@ class _PeerCardState extends State<_PeerCard>
                       ],
                     ).paddingOnly(left: 8.0),
                   ),
-                  selected
+                  checkBoxOrActionMoreMobile(peer),
-                      ? Padding(
-                          padding: const EdgeInsets.all(12),
-                          child: checkBox(),
-                        )
-                      : InkWell(
-                          child: const Padding(
-                              padding: EdgeInsets.all(12),
-                              child: Icon(Icons.more_vert)),
-                          onTapDown: (e) {
-                            final x = e.globalPosition.dx;
-                            final y = e.globalPosition.dy;
-                            _menuPos = RelativeRect.fromLTRB(x, y, x, y);
-                          },
-                          onTap: () {
-                            _showPeerMenu(peer.id);
-                          }),
                 ],
               ),
             )));
@@ -159,15 +142,8 @@ class _PeerCardState extends State<_PeerCard>
           onDoubleTap: peerTabModel.multiSelectionMode
               ? null
               : () => widget.connect(context, peer.id),
-          onLongPress: () {
+          onTap: () => peerTabModel.select(peer),
-            peerTabModel.togglePeerSelect(peer);
+          onLongPress: () => peerTabModel.select(peer),
-          },
-          onSecondaryTapDown: (_) {
-            peerTabModel.togglePeerSelect(peer);
-          },
-          onTap: peerTabModel.multiSelectionMode
-              ? () => peerTabModel.togglePeerSelect(peer)
-              : null,
           child: Obx(() => peerCardUiType.value == PeerUiType.grid
               ? _buildPeerCard(context, peer, deco)
               : _buildPeerTile(context, peer, deco))),
@@ -176,8 +152,6 @@ class _PeerCardState extends State<_PeerCard>
 
   Widget _buildPeerTile(
       BuildContext context, Peer peer, Rx<BoxDecoration?> deco) {
-    final PeerTabModel peerTabModel = Provider.of(context);
-    final selected = peerTabModel.isPeerSelected(peer.id);
     final name =
         '${peer.username}${peer.username.isNotEmpty && peer.hostname.isNotEmpty ? '@' : ''}${peer.hostname}';
     final greyStyle = TextStyle(
@@ -237,7 +211,7 @@ class _PeerCardState extends State<_PeerCard>
                         ],
                       ).marginOnly(top: 2),
                     ),
-                    selected ? checkBox() : _actionMore(peer),
+                    checkBoxOrActionMoreDesktop(peer),
                   ],
                 ).paddingOnly(left: 10.0, top: 3.0),
               ),
@@ -250,8 +224,6 @@ class _PeerCardState extends State<_PeerCard>
 
   Widget _buildPeerCard(
       BuildContext context, Peer peer, Rx<BoxDecoration?> deco) {
-    final PeerTabModel peerTabModel = Provider.of(context);
-    final selected = peerTabModel.isPeerSelected(peer.id);
     final name =
         '${peer.username}${peer.username.isNotEmpty && peer.hostname.isNotEmpty ? '@' : ''}${peer.hostname}';
     return Card(
@@ -321,7 +293,7 @@ class _PeerCardState extends State<_PeerCard>
                           style: Theme.of(context).textTheme.titleSmall,
                         )),
                       ]).paddingSymmetric(vertical: 8)),
-                      selected ? checkBox() : _actionMore(peer),
+                      checkBoxOrActionMoreDesktop(peer),
                     ],
                   ).paddingSymmetric(horizontal: 12.0),
                 )
@@ -333,11 +305,57 @@ class _PeerCardState extends State<_PeerCard>
     );
   }
 
-  Widget checkBox() {
+  Widget checkBoxOrActionMoreMobile(Peer peer) {
-    return Icon(
+    final PeerTabModel peerTabModel = Provider.of(context);
-      Icons.check_box,
+    final selected = peerTabModel.isPeerSelected(peer.id);
-      color: MyTheme.accent,
+    if (peerTabModel.multiSelectionMode) {
-    );
+      return Padding(
+        padding: const EdgeInsets.all(12),
+        child: selected
+            ? Icon(
+                Icons.check_box,
+                color: MyTheme.accent,
+              )
+            : Icon(Icons.check_box_outline_blank),
+      );
+    } else {
+      return InkWell(
+          child: const Padding(
+              padding: EdgeInsets.all(12), child: Icon(Icons.more_vert)),
+          onTapDown: (e) {
+            final x = e.globalPosition.dx;
+            final y = e.globalPosition.dy;
+            _menuPos = RelativeRect.fromLTRB(x, y, x, y);
+          },
+          onTap: () {
+            _showPeerMenu(peer.id);
+          });
+    }
+  }
+
+  Widget checkBoxOrActionMoreDesktop(Peer peer) {
+    final PeerTabModel peerTabModel = Provider.of(context);
+    final selected = peerTabModel.isPeerSelected(peer.id);
+    if (peerTabModel.multiSelectionMode) {
+      final icon = selected
+          ? Icon(
+              Icons.check_box,
+              color: MyTheme.accent,
+            )
+          : Icon(Icons.check_box_outline_blank);
+      bool last = peerTabModel.isShiftDown && peer.id == peerTabModel.lastId;
+      if (last) {
+        return Container(
+          decoration: BoxDecoration(
+              border: Border.all(color: MyTheme.accent, width: 1)),
+          child: icon,
+        );
+      } else {
+        return icon;
+      }
+    } else {
+      return _actionMore(peer);
+    }
   }
 
   Widget _actionMore(Peer peer) => Listener(

flutter/lib/common/widgets/peer_tab_page.dart

@@ -103,6 +103,7 @@ class _PeerTabPageState extends State<PeerTabPage>
                 Expanded(child: _createSwitchBar(context)),
                 const PeerSearchBar().marginOnly(right: isMobile ? 0 : 13),
                 _createRefresh(),
+                _createMultiSelection(),
                 Offstage(
                     offstage: !isDesktop,
                     child: _createPeerViewTypeSwitch(context)),
@@ -258,6 +259,24 @@ class _PeerTabPageState extends State<PeerTabPage>
     );
   }
 
+  Widget _createMultiSelection() {
+    final textColor = Theme.of(context).textTheme.titleLarge?.color;
+    final model = Provider.of<PeerTabModel>(context);
+    return Container(
+      padding: EdgeInsets.all(4.0),
+      child: InkWell(
+        onTap: () {
+          model.setMultiSelectionMode(true);
+        },
+        child: Icon(
+          IconFont.checkbox,
+          size: 18,
+          color: textColor,
+        ),
+      ),
+    );
+  }
+
   Widget createMultiSelectionBar() {
     final model = Provider.of<PeerTabModel>(context);
     return Row(
@@ -308,7 +327,7 @@ class _PeerTabPageState extends State<PeerTabPage>
               default:
                 break;
             }
-            gFFI.peerTabModel.closeSelection();
+            gFFI.peerTabModel.setMultiSelectionMode(false);
             showToast(translate('Successful'));
           }
 
@@ -334,7 +353,7 @@ class _PeerTabPageState extends State<PeerTabPage>
             }
           }
           await bind.mainStoreFav(favs: favs);
-          gFFI.peerTabModel.closeSelection();
+          model.setMultiSelectionMode(false);
           showToast(translate('Successful'));
         },
         child: Tooltip(
@@ -355,7 +374,7 @@ class _PeerTabPageState extends State<PeerTabPage>
           final peers = model.selectedPeers;
           gFFI.abModel.addPeers(peers);
           gFFI.abModel.pushAb();
-          gFFI.peerTabModel.closeSelection();
+          model.setMultiSelectionMode(false);
           showToast(translate('Successful'));
         },
         child: Tooltip(
@@ -379,7 +398,7 @@ class _PeerTabPageState extends State<PeerTabPage>
                   gFFI.abModel.changeTagForPeers(
                       peers.map((p) => p.id).toList(), selectedTags);
                   gFFI.abModel.pushAb();
-                  gFFI.peerTabModel.closeSelection();
+                  model.setMultiSelectionMode(false);
                   showToast(translate('Successful'));
                 });
               },
@@ -416,7 +435,7 @@ class _PeerTabPageState extends State<PeerTabPage>
     final model = Provider.of<PeerTabModel>(context);
     return InkWell(
             onTap: () {
-              model.closeSelection();
+              model.setMultiSelectionMode(false);
             },
             child:
                 Tooltip(message: translate('Close'), child: Icon(Icons.clear)))

flutter/lib/main.dart

@@ -418,7 +418,7 @@ class _AppState extends State<App> {
               : (context, child) {
                   child = _keepScaleBuilder(context, child);
                   child = botToastBuilder(context, child);
-                  if (desktopType == DesktopType.main) {
+                  if (isDesktop && desktopType == DesktopType.main) {
                     child = keyListenerBuilder(context, child);
                   }
                   return child;
@@ -465,9 +465,9 @@ Widget keyListenerBuilder(BuildContext context, Widget? child) {
     onKey: (RawKeyEvent event) {
       if (event.logicalKey == LogicalKeyboardKey.shiftLeft) {
         if (event is RawKeyDownEvent) {
-          gFFI.peerTabModel.isShiftDown = true;
+          gFFI.peerTabModel.setShiftDown(true);
         } else if (event is RawKeyUpEvent) {
-          gFFI.peerTabModel.isShiftDown = false;
+          gFFI.peerTabModel.setShiftDown(false);
         }
       }
     },

flutter/lib/models/peer_tab_model.dart

@@ -39,11 +39,14 @@ class PeerTabModel with ChangeNotifier {
   List<int> get indexs => List.generate(tabNames.length, (index) => index);
   List<Peer> _selectedPeers = List.empty(growable: true);
   List<Peer> get selectedPeers => _selectedPeers;
-  bool get multiSelectionMode => _selectedPeers.isNotEmpty;
+  bool _multiSelectionMode = false;
+  bool get multiSelectionMode => _multiSelectionMode;
   List<Peer> _currentTabCachedPeers = List.empty(growable: true);
   List<Peer> get currentTabCachedPeers => _currentTabCachedPeers;
-  bool isShiftDown = false;
+  bool _isShiftDown = false;
-  String? _shiftAnchorId;
+  bool get isShiftDown => _isShiftDown;
+  String _lastId = '';
+  String get lastId => _lastId;
 
   PeerTabModel(this.parent) {
     // init currentTab
@@ -85,38 +88,39 @@ class PeerTabModel with ChangeNotifier {
     return Icons.help;
   }
 
-  togglePeerSelect(Peer peer) {
+  setMultiSelectionMode(bool mode) {
+    _multiSelectionMode = mode;
+    if (!mode) {
+      _selectedPeers.clear();
+      _lastId = '';
+    }
+    notifyListeners();
+  }
+
+  select(Peer peer) {
+    if (!_multiSelectionMode) {
+      // https://github.com/flutter/flutter/issues/101275#issuecomment-1604541700
+      // After onTap, the shift key should be pressed for a while when not in multiselection mode,
+      // because onTap is delayed when onDoubleTap is not null
+      if (isDesktop && !_isShiftDown) return;
+      _multiSelectionMode = true;
+    }
     final cached = _currentTabCachedPeers.map((e) => e.id).toList();
     int thisIndex = cached.indexOf(peer.id);
-    int closestIndex = -1;
+    int lastIndex = cached.indexOf(_lastId);
-    String? closestId;
+    if (_isShiftDown && thisIndex >= 0 && lastIndex >= 0) {
-    int smallestDiff = -1;
+      int start = min(thisIndex, lastIndex);
-    for (var i = 0; i < cached.length; i++) {
+      int end = max(thisIndex, lastIndex);
-      if (isPeerSelected(cached[i])) {
+      bool remove = isPeerSelected(peer.id);
-        int diff = (i - thisIndex).abs();
-        if (smallestDiff == -1 || diff < smallestDiff) {
-          closestIndex = i;
-          closestId = cached[i];
-          smallestDiff = diff;
-        }
-      }
-    }
-    if (isShiftDown &&
-        thisIndex >= 0 &&
-        closestIndex >= 0 &&
-        closestId != null) {
-      int shiftAnchorIndex = cached.indexOf(_shiftAnchorId ?? '');
-      if (shiftAnchorIndex < 0) {
-        // use closest as shift anchor, rather than focused which we don't have
-        shiftAnchorIndex = closestIndex;
-        _shiftAnchorId = closestId;
-      }
-      int start = min(shiftAnchorIndex, thisIndex);
-      int end = max(shiftAnchorIndex, thisIndex);
-      _selectedPeers.clear();
       for (var i = start; i <= end; i++) {
-        if (!isPeerSelected(cached[i])) {
+        if (remove) {
-          _selectedPeers.add(_currentTabCachedPeers[i]);
+          if (isPeerSelected(cached[i])) {
+            _selectedPeers.removeWhere((p) => p.id == cached[i]);
+          }
+        } else {
+          if (!isPeerSelected(cached[i])) {
+            _selectedPeers.add(_currentTabCachedPeers[i]);
+          }
         }
       }
     } else {
@@ -125,14 +129,8 @@ class PeerTabModel with ChangeNotifier {
       } else {
         _selectedPeers.add(peer);
       }
-      _shiftAnchorId = null;
     }
-    notifyListeners();
+    _lastId = peer.id;
-  }
-
-  closeSelection() {
-    _selectedPeers.clear();
-    _shiftAnchorId = null;
     notifyListeners();
   }
 
@@ -151,4 +149,13 @@ class PeerTabModel with ChangeNotifier {
   bool isPeerSelected(String id) {
     return selectedPeers.firstWhereOrNull((p) => p.id == id) != null;
   }
+
+  setShiftDown(bool v) {
+    if (_isShiftDown != v) {
+      _isShiftDown = v;
+      if (_multiSelectionMode) {
+        notifyListeners();
+      }
+    }
+  }
 }

flutter/pubspec.yaml

@@ -149,6 +149,9 @@ flutter:
     - family: AddressBook
       fonts:
         - asset: assets/address_book.ttf
+    - family: CheckBox
+      fonts:
+        - asset: assets/checkbox.ttf
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.