refact: mobile actions (#8236)

Signed-off-by: fufesou <linlong1266@gmail.com>
This commit is contained in:
fufesou 2024-06-01 20:23:58 +08:00 committed by GitHub
parent df36580451
commit ed5487a1fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 109 additions and 59 deletions

View File

@ -18,6 +18,7 @@ import 'package:flutter_hbb/utils/multi_window_manager.dart';
import 'package:flutter_hbb/utils/platform_channel.dart'; import 'package:flutter_hbb/utils/platform_channel.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:provider/provider.dart';
import 'package:uni_links/uni_links.dart'; import 'package:uni_links/uni_links.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import 'package:uuid/uuid.dart'; import 'package:uuid/uuid.dart';
@ -858,30 +859,10 @@ class OverlayDialogManager {
final overlayState = _overlayKeyState.state; final overlayState = _overlayKeyState.state;
if (overlayState == null) return; if (overlayState == null) return;
// compute overlay position final overlay = makeMobileActionsOverlayEntry(
final screenW = MediaQuery.of(globalKey.currentContext!).size.width; () => hideMobileActionsOverlay(),
final screenH = MediaQuery.of(globalKey.currentContext!).size.height; ffi: ffi,
const double overlayW = 200;
const double overlayH = 45;
final left = (screenW - overlayW) / 2;
final top = screenH - overlayH - 80;
final overlay = OverlayEntry(builder: (context) {
final session = ffi ?? gFFI;
return DraggableMobileActions(
position: Offset(left, top),
width: overlayW,
height: overlayH,
onBackPressed: () => session.inputModel.tap(MouseButtons.right),
onHomePressed: () => session.inputModel.tap(MouseButtons.wheel),
onRecentPressed: () async {
session.inputModel.sendMouse('down', MouseButtons.wheel);
await Future.delayed(const Duration(milliseconds: 500));
session.inputModel.sendMouse('up', MouseButtons.wheel);
},
onHidePressed: () => hideMobileActionsOverlay(),
); );
});
overlayState.insert(overlay); overlayState.insert(overlay);
_mobileActionsOverlayEntry = overlay; _mobileActionsOverlayEntry = overlay;
mobileActionsOverlayVisible.value = true; mobileActionsOverlayVisible.value = true;
@ -909,6 +890,45 @@ class OverlayDialogManager {
} }
} }
makeMobileActionsOverlayEntry(VoidCallback? onHide, {FFI? ffi}) {
final position = SimpleWrapper(Offset(0, 0));
makeMobileActions(BuildContext context, double s) {
final scale = s < 0.85 ? 0.85 : s;
final session = ffi ?? gFFI;
// compute overlay position
final screenW = MediaQuery.of(context).size.width;
final screenH = MediaQuery.of(context).size.height;
const double overlayW = 200;
const double overlayH = 45;
final left = (screenW - overlayW * scale) / 2;
final top = screenH - (overlayH + 80) * scale;
position.value = Offset(left, top);
return DraggableMobileActions(
scale: scale,
position: position,
width: overlayW,
height: overlayH,
onBackPressed: () => session.inputModel.tap(MouseButtons.right),
onHomePressed: () => session.inputModel.tap(MouseButtons.wheel),
onRecentPressed: () async {
session.inputModel.sendMouse('down', MouseButtons.wheel);
await Future.delayed(const Duration(milliseconds: 500));
session.inputModel.sendMouse('up', MouseButtons.wheel);
},
onHidePressed: onHide,
);
}
return OverlayEntry(builder: (context) {
if (isDesktop) {
final c = Provider.of<CanvasModel>(context);
return makeMobileActions(context, c.scale * 2.0);
} else {
return makeMobileActions(globalKey.currentContext!, 1.0);
}
});
}
void showToast(String text, {Duration timeout = const Duration(seconds: 3)}) { void showToast(String text, {Duration timeout = const Duration(seconds: 3)}) {
final overlayState = globalKey.currentState?.overlay; final overlayState = globalKey.currentState?.overlay;
if (overlayState == null) return; if (overlayState == null) return;
@ -3255,7 +3275,8 @@ Widget buildPresetPasswordWarning() {
translate("Security Alert"), translate("Security Alert"),
style: TextStyle( style: TextStyle(
color: Colors.red, color: Colors.red,
fontSize: 18, // https://github.com/rustdesk/rustdesk-server-pro/issues/261 fontSize:
18, // https://github.com/rustdesk/rustdesk-server-pro/issues/261
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
)).paddingOnly(bottom: 8), )).paddingOnly(bottom: 8),

View File

@ -45,7 +45,7 @@ class DraggableChatWindow extends StatelessWidget {
) )
: Draggable( : Draggable(
checkKeyboard: true, checkKeyboard: true,
position: position, position: SimpleWrapper(position),
width: width, width: width,
height: height, height: height,
chatModel: chatModel, chatModel: chatModel,
@ -166,15 +166,17 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
/// floating buttons of back/home/recent actions for android /// floating buttons of back/home/recent actions for android
class DraggableMobileActions extends StatelessWidget { class DraggableMobileActions extends StatelessWidget {
DraggableMobileActions( DraggableMobileActions(
{this.position = Offset.zero, {this.onBackPressed,
this.onBackPressed,
this.onRecentPressed, this.onRecentPressed,
this.onHomePressed, this.onHomePressed,
this.onHidePressed, this.onHidePressed,
required this.position,
required this.width, required this.width,
required this.height}); required this.height,
required this.scale});
final Offset position; final double scale;
final SimpleWrapper<Offset> position;
final double width; final double width;
final double height; final double height;
final VoidCallback? onBackPressed; final VoidCallback? onBackPressed;
@ -186,8 +188,8 @@ class DraggableMobileActions extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Draggable( return Draggable(
position: position, position: position,
width: width, width: scale * width,
height: height, height: scale * height,
builder: (_, onPanUpdate) { builder: (_, onPanUpdate) {
return GestureDetector( return GestureDetector(
onPanUpdate: onPanUpdate, onPanUpdate: onPanUpdate,
@ -197,7 +199,8 @@ class DraggableMobileActions extends StatelessWidget {
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: MyTheme.accent.withOpacity(0.4), color: MyTheme.accent.withOpacity(0.4),
borderRadius: BorderRadius.all(Radius.circular(15))), borderRadius:
BorderRadius.all(Radius.circular(15 * scale))),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround, mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [ children: [
@ -205,17 +208,20 @@ class DraggableMobileActions extends StatelessWidget {
color: Colors.white, color: Colors.white,
onPressed: onBackPressed, onPressed: onBackPressed,
splashRadius: kDesktopIconButtonSplashRadius, splashRadius: kDesktopIconButtonSplashRadius,
icon: const Icon(Icons.arrow_back)), icon: const Icon(Icons.arrow_back),
iconSize: 24 * scale),
IconButton( IconButton(
color: Colors.white, color: Colors.white,
onPressed: onHomePressed, onPressed: onHomePressed,
splashRadius: kDesktopIconButtonSplashRadius, splashRadius: kDesktopIconButtonSplashRadius,
icon: const Icon(Icons.home)), icon: const Icon(Icons.home),
iconSize: 24 * scale),
IconButton( IconButton(
color: Colors.white, color: Colors.white,
onPressed: onRecentPressed, onPressed: onRecentPressed,
splashRadius: kDesktopIconButtonSplashRadius, splashRadius: kDesktopIconButtonSplashRadius,
icon: const Icon(Icons.more_horiz)), icon: const Icon(Icons.more_horiz),
iconSize: 24 * scale),
const VerticalDivider( const VerticalDivider(
width: 0, width: 0,
thickness: 2, thickness: 2,
@ -226,7 +232,8 @@ class DraggableMobileActions extends StatelessWidget {
color: Colors.white, color: Colors.white,
onPressed: onHidePressed, onPressed: onHidePressed,
splashRadius: kDesktopIconButtonSplashRadius, splashRadius: kDesktopIconButtonSplashRadius,
icon: const Icon(Icons.keyboard_arrow_down)), icon: const Icon(Icons.keyboard_arrow_down),
iconSize: 24 * scale),
], ],
), ),
))); )));
@ -235,11 +242,11 @@ class DraggableMobileActions extends StatelessWidget {
} }
class Draggable extends StatefulWidget { class Draggable extends StatefulWidget {
const Draggable( Draggable(
{Key? key, {Key? key,
this.checkKeyboard = false, this.checkKeyboard = false,
this.checkScreenSize = false, this.checkScreenSize = false,
this.position = Offset.zero, required this.position,
required this.width, required this.width,
required this.height, required this.height,
this.chatModel, this.chatModel,
@ -248,7 +255,7 @@ class Draggable extends StatefulWidget {
final bool checkKeyboard; final bool checkKeyboard;
final bool checkScreenSize; final bool checkScreenSize;
final Offset position; final SimpleWrapper<Offset> position;
final double width; final double width;
final double height; final double height;
final ChatModel? chatModel; final ChatModel? chatModel;
@ -259,7 +266,6 @@ class Draggable extends StatefulWidget {
} }
class _DraggableState extends State<Draggable> { class _DraggableState extends State<Draggable> {
late Offset _position;
late ChatModel? _chatModel; late ChatModel? _chatModel;
bool _keyboardVisible = false; bool _keyboardVisible = false;
double _saveHeight = 0; double _saveHeight = 0;
@ -268,35 +274,36 @@ class _DraggableState extends State<Draggable> {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_position = widget.position;
_chatModel = widget.chatModel; _chatModel = widget.chatModel;
} }
get position => widget.position.value;
void onPanUpdate(DragUpdateDetails d) { void onPanUpdate(DragUpdateDetails d) {
final offset = d.delta; final offset = d.delta;
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
double x = 0; double x = 0;
double y = 0; double y = 0;
if (_position.dx + offset.dx + widget.width > size.width) { if (position.dx + offset.dx + widget.width > size.width) {
x = size.width - widget.width; x = size.width - widget.width;
} else if (_position.dx + offset.dx < 0) { } else if (position.dx + offset.dx < 0) {
x = 0; x = 0;
} else { } else {
x = _position.dx + offset.dx; x = position.dx + offset.dx;
} }
if (_position.dy + offset.dy + widget.height > size.height) { if (position.dy + offset.dy + widget.height > size.height) {
y = size.height - widget.height; y = size.height - widget.height;
} else if (_position.dy + offset.dy < 0) { } else if (position.dy + offset.dy < 0) {
y = 0; y = 0;
} else { } else {
y = _position.dy + offset.dy; y = position.dy + offset.dy;
} }
setState(() { setState(() {
_position = Offset(x, y); widget.position.value = Offset(x, y);
}); });
_chatModel?.setChatWindowPosition(_position); _chatModel?.setChatWindowPosition(position);
} }
checkScreenSize() {} checkScreenSize() {}
@ -307,13 +314,13 @@ class _DraggableState extends State<Draggable> {
// save // save
if (!_keyboardVisible && currentVisible) { if (!_keyboardVisible && currentVisible) {
_saveHeight = _position.dy; _saveHeight = position.dy;
} }
// reset // reset
if (_lastBottomHeight > 0 && bottomHeight == 0) { if (_lastBottomHeight > 0 && bottomHeight == 0) {
setState(() { setState(() {
_position = Offset(_position.dx, _saveHeight); widget.position.value = Offset(position.dx, _saveHeight);
}); });
} }
@ -321,10 +328,10 @@ class _DraggableState extends State<Draggable> {
if (_keyboardVisible && currentVisible) { if (_keyboardVisible && currentVisible) {
final sumHeight = bottomHeight + widget.height; final sumHeight = bottomHeight + widget.height;
final contextHeight = MediaQuery.of(context).size.height; final contextHeight = MediaQuery.of(context).size.height;
if (sumHeight + _position.dy > contextHeight) { if (sumHeight + position.dy > contextHeight) {
final y = contextHeight - sumHeight; final y = contextHeight - sumHeight;
setState(() { setState(() {
_position = Offset(_position.dx, y); widget.position.value = Offset(position.dx, y);
}); });
} }
} }
@ -343,8 +350,8 @@ class _DraggableState extends State<Draggable> {
} }
return Stack(children: [ return Stack(children: [
Positioned( Positioned(
top: _position.dy, top: position.dy,
left: _position.dx, left: position.dx,
width: widget.width, width: widget.width,
height: widget.height, height: widget.height,
child: widget.builder(context, onPanUpdate)) child: widget.builder(context, onPanUpdate))

View File

@ -307,8 +307,30 @@ class _RemotePageState extends State<RemotePage>
_ffi.ffiModel.waitForFirstImage.isTrue _ffi.ffiModel.waitForFirstImage.isTrue
? emptyOverlay() ? emptyOverlay()
: () { : () {
_ffi.ffiModel.tryShowAndroidActionsOverlay(); if (!_ffi.ffiModel.isPeerAndroid) {
return Offstage(); return Offstage();
} else {
if (_ffi.connType == ConnType.defaultConn &&
_ffi.ffiModel.permissions['keyboard'] != false) {
Timer(
Duration(milliseconds: 10),
() => _ffi.dialogManager
.mobileActionsOverlayVisible.value = true);
}
return Obx(() => Offstage(
offstage: _ffi.dialogManager
.mobileActionsOverlayVisible.isFalse,
child: Overlay(initialEntries: [
makeMobileActionsOverlayEntry(
() => _ffi
.dialogManager
.mobileActionsOverlayVisible
.value = false,
ffi: _ffi,
)
]),
));
}
}(), }(),
// Use Overlay to enable rebuild every time on menu button click. // Use Overlay to enable rebuild every time on menu button click.
_ffi.ffiModel.pi.isSet.isTrue _ffi.ffiModel.pi.isSet.isTrue

View File

@ -588,7 +588,7 @@ class _MobileActionMenu extends StatelessWidget {
assetName: 'assets/actions_mobile.svg', assetName: 'assets/actions_mobile.svg',
tooltip: 'Mobile Actions', tooltip: 'Mobile Actions',
onPressed: () => onPressed: () =>
ffi.dialogManager.toggleMobileActionsOverlay(ffi: ffi), ffi.dialogManager.mobileActionsOverlayVisible.toggle(),
color: ffi.dialogManager.mobileActionsOverlayVisible.isTrue color: ffi.dialogManager.mobileActionsOverlayVisible.isTrue
? _ToolbarTheme.blueColor ? _ToolbarTheme.blueColor
: _ToolbarTheme.inactiveColor, : _ToolbarTheme.inactiveColor,