From d486041f53f118cca9d4bb86be39997c49d80281 Mon Sep 17 00:00:00 2001 From: csf Date: Thu, 28 Apr 2022 22:44:54 +0800 Subject: [PATCH] update overlay,add android to android actions --- lib/models/chat_model.dart | 4 +- lib/models/model.dart | 36 +++++- lib/pages/chat_page.dart | 226 ------------------------------------- lib/pages/home_page.dart | 1 + lib/pages/remote_page.dart | 73 +++++++----- lib/pages/server_page.dart | 60 ++++++---- 6 files changed, 113 insertions(+), 287 deletions(-) diff --git a/lib/models/chat_model.dart b/lib/models/chat_model.dart index 19ea97222..8ee93ae28 100644 --- a/lib/models/chat_model.dart +++ b/lib/models/chat_model.dart @@ -2,8 +2,8 @@ import 'dart:convert'; import 'package:dash_chat/dash_chat.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_hbb/pages/chat_page.dart'; +import '../widgets/overlay.dart'; import 'model.dart'; class ChatModel with ChangeNotifier { @@ -47,7 +47,7 @@ class ChatModel with ChangeNotifier { receive(int id, String text) { if (text.isEmpty) return; // first message show overlay icon - if (iconOverlayEntry == null) { + if (chatIconOverlayEntry == null) { showChatIconOverlay(); } late final chatUser; diff --git a/lib/models/model.dart b/lib/models/model.dart index b24c2c761..7e35a85f6 100644 --- a/lib/models/model.dart +++ b/lib/models/model.dart @@ -13,6 +13,7 @@ import 'package:tuple/tuple.dart'; import 'dart:async'; import '../common.dart'; import '../widgets/dialog.dart'; +import '../widgets/overlay.dart'; import 'native_model.dart' if (dart.library.html) 'web_model.dart'; typedef HandleMsgBox = void Function(Map evt, String id); @@ -26,20 +27,25 @@ class FfiModel with ChangeNotifier { final _permissions = Map(); bool? _secure; bool? _direct; + bool _touchMode = false; Timer? _timer; var _reconnects = 1; - get permissions => _permissions; + Map get permissions => _permissions; - get display => _display; + Display get display => _display; - get secure => _secure; + bool? get secure => _secure; - get direct => _direct; + bool? get direct => _direct; - get pi => _pi; + PeerInfo get pi => _pi; - get inputBlocked => _inputBlocked; + bool get inputBlocked => _inputBlocked; + + bool get touchMode => _touchMode; + + bool get isPeerAndroid => _pi.platform == "Android"; set inputBlocked(v) { _inputBlocked = v; @@ -54,6 +60,13 @@ class FfiModel with ChangeNotifier { await PlatformFFI.init(); } + void toggleTouchMode() { + if (!isPeerAndroid) { + _touchMode = !_touchMode; + notifyListeners(); + } + } + void updatePermission(Map evt) { evt.forEach((k, v) { if (k == 'name') return; @@ -229,6 +242,17 @@ class FfiModel with ChangeNotifier { _pi.sasEnabled = evt['sas_enabled'] == "true"; _pi.currentDisplay = int.parse(evt['current_display']); + if (isPeerAndroid) { + _touchMode = true; + FFI.setByName('peer_option', '{"name": "view-style", "value": "shrink"}'); + FFI.canvasModel.updateViewStyle(); + if (FFI.ffiModel.permissions['keyboard'] != false) { + showMobileActionsOverlay(); + } + } else { + _touchMode = FFI.getByName('peer_option', "touch-mode") != ''; + } + if (evt['is_file_transfer'] == "true") { FFI.fileModel.onReady(); } else { diff --git a/lib/pages/chat_page.dart b/lib/pages/chat_page.dart index 218ac365c..62c520cce 100644 --- a/lib/pages/chat_page.dart +++ b/lib/pages/chat_page.dart @@ -1,5 +1,4 @@ import 'package:dash_chat/dash_chat.dart'; -import 'package:draggable_float_widget/draggable_float_widget.dart'; import 'package:flutter/material.dart'; import 'package:flutter_hbb/common.dart'; import 'package:flutter_hbb/models/chat_model.dart'; @@ -7,9 +6,6 @@ import 'package:provider/provider.dart'; import '../models/model.dart'; import 'home_page.dart'; -OverlayEntry? iconOverlayEntry; -OverlayEntry? windowOverlayEntry; - ChatPage chatPage = ChatPage(); class ChatPage extends StatelessWidget implements PageShape { @@ -83,225 +79,3 @@ class ChatPage extends StatelessWidget implements PageShape { }))); } } - -showChatIconOverlay({Offset offset = const Offset(200, 50)}) { - if (iconOverlayEntry != null) { - iconOverlayEntry!.remove(); - } - if (globalKey.currentState == null || globalKey.currentState!.overlay == null) - return; - final globalOverlayState = globalKey.currentState!.overlay!; - - final overlay = OverlayEntry(builder: (context) { - return DraggableFloatWidget( - config: DraggableFloatWidgetBaseConfig( - initPositionYInTop: false, - initPositionYMarginBorder: 100, - borderTopContainTopBar: true, - ), - child: FloatingActionButton( - onPressed: () { - if (windowOverlayEntry == null) { - showChatWindowOverlay(); - } else { - hideChatWindowOverlay(); - } - }, - child: Icon(Icons.message))); - }); - globalOverlayState.insert(overlay); - iconOverlayEntry = overlay; - debugPrint("created"); -} - -hideChatIconOverlay() { - if (iconOverlayEntry != null) { - iconOverlayEntry!.remove(); - iconOverlayEntry = null; - } -} - -final FocusNode _focusNode = FocusNode(); - -showChatWindowOverlay() { - if (windowOverlayEntry != null) return; - if (globalKey.currentState == null || globalKey.currentState!.overlay == null) - return; - final globalOverlayState = globalKey.currentState!.overlay!; - - final overlay = OverlayEntry(builder: (context) { - return ChatWindowOverlay(); - }); - _focusNode.requestFocus(); - globalOverlayState.insert(overlay); - windowOverlayEntry = overlay; - debugPrint("chatEntry created"); -} - -hideChatWindowOverlay() { - if (windowOverlayEntry != null) { - windowOverlayEntry!.remove(); - windowOverlayEntry = null; - return; - } -} - -toggleChatOverlay() { - if (iconOverlayEntry == null || windowOverlayEntry == null) { - FFI.invokeMethod("enable_soft_keyboard", true); - showChatIconOverlay(); - showChatWindowOverlay(); - } else { - hideChatIconOverlay(); - hideChatWindowOverlay(); - } -} - -class ChatWindowOverlay extends StatefulWidget { - final double windowWidth = 250; - final double windowHeight = 350; - - @override - State createState() => _ChatWindowOverlayState(); -} - -class _ChatWindowOverlayState extends State { - Offset _o = Offset(20, 80); - bool _keyboardVisible = false; - double _saveHeight = 0; - double _lastBottomHeight = 0; - - changeOffset(Offset offset) { - final size = MediaQuery.of(context).size; - debugPrint("parent size:$size"); - double x = 0; - double y = 0; - - if (_o.dx + offset.dx + widget.windowWidth > size.width) { - x = size.width - widget.windowWidth; - } else if (_o.dx + offset.dx < 0) { - x = 0; - } else { - x = _o.dx + offset.dx; - } - - if (_o.dy + offset.dy + widget.windowHeight > size.height) { - y = size.height - widget.windowHeight; - } else if (_o.dy + offset.dy < 0) { - y = 0; - } else { - y = _o.dy + offset.dy; - } - setState(() { - _o = Offset(x, y); - }); - } - - checkScreenSize() {} - - checkKeyboard() { - final bottomHeight = MediaQuery.of(context).viewInsets.bottom; - final currentVisible = bottomHeight != 0; - - debugPrint(bottomHeight.toString() + currentVisible.toString()); - // save - if (!_keyboardVisible && currentVisible) { - _saveHeight = _o.dy; - debugPrint("on save $_saveHeight"); - } - - // reset - if (_lastBottomHeight > 0 && bottomHeight == 0) { - debugPrint("on reset"); - _o = Offset(_o.dx, _saveHeight); - } - - // onKeyboardVisible - if (_keyboardVisible && currentVisible) { - final sumHeight = bottomHeight + widget.windowHeight; - final contextHeight = MediaQuery.of(context).size.height; - debugPrint( - "prepare update sumHeight:$sumHeight,contextHeight:$contextHeight"); - if (sumHeight + _o.dy > contextHeight) { - final y = contextHeight - sumHeight; - debugPrint("on update"); - _o = Offset(_o.dx, y); - } - } - - _keyboardVisible = currentVisible; - _lastBottomHeight = bottomHeight; - } - - @override - Widget build(BuildContext context) { - checkKeyboard(); - checkScreenSize(); - return Positioned( - top: _o.dy, - left: _o.dx, - width: widget.windowWidth, - height: widget.windowHeight, - child: isIOS - ? chatPage - : Scaffold( - resizeToAvoidBottomInset: false, - appBar: CustomAppBar( - onPanUpdate: (d) => changeOffset(d.delta), - appBar: Container( - color: MyTheme.accent50, - height: 50, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Padding( - padding: EdgeInsets.symmetric(horizontal: 15), - child: Text( - translate("Chat"), - style: TextStyle( - color: Colors.white, - fontFamily: 'WorkSans', - fontWeight: FontWeight.bold, - fontSize: 20), - )), - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - IconButton( - onPressed: () { - hideChatWindowOverlay(); - }, - icon: Icon(Icons.keyboard_arrow_down)), - IconButton( - onPressed: () { - hideChatWindowOverlay(); - hideChatIconOverlay(); - }, - icon: Icon(Icons.close)) - ], - ) - ], - ), - ), - ), - body: chatPage, - )); - } -} - -class CustomAppBar extends StatelessWidget implements PreferredSizeWidget { - final GestureDragUpdateCallback onPanUpdate; - final Widget appBar; - - const CustomAppBar( - {Key? key, required this.onPanUpdate, required this.appBar}) - : super(key: key); - - @override - Widget build(BuildContext context) { - return GestureDetector(onPanUpdate: onPanUpdate, child: appBar); - } - - @override - Size get preferredSize => new Size.fromHeight(kToolbarHeight); -} diff --git a/lib/pages/home_page.dart b/lib/pages/home_page.dart index c4f9e0c08..371aa3f64 100644 --- a/lib/pages/home_page.dart +++ b/lib/pages/home_page.dart @@ -3,6 +3,7 @@ import 'package:flutter_hbb/pages/chat_page.dart'; import 'package:flutter_hbb/pages/server_page.dart'; import 'package:flutter_hbb/pages/settings_page.dart'; import '../common.dart'; +import '../widgets/overlay.dart'; import 'connection_page.dart'; abstract class PageShape extends Widget { diff --git a/lib/pages/remote_page.dart b/lib/pages/remote_page.dart index d26246ae9..05b1fc979 100644 --- a/lib/pages/remote_page.dart +++ b/lib/pages/remote_page.dart @@ -12,7 +12,7 @@ import '../common.dart'; import '../widgets/gestures.dart'; import '../models/model.dart'; import '../widgets/dialog.dart'; -import 'chat_page.dart'; +import '../widgets/overlay.dart'; final initText = '\1' * 1024; @@ -38,7 +38,6 @@ class _RemotePageState extends State { final FocusNode _mobileFocusNode = FocusNode(); final FocusNode _physicalFocusNode = FocusNode(); var _showEdit = false; - var _touchMode = false; var _isPhysicalKeyboard = false; @override @@ -52,13 +51,13 @@ class _RemotePageState extends State { Timer.periodic(Duration(milliseconds: 30), (timer) => interval()); }); Wakelock.enable(); - _touchMode = FFI.getByName('peer_option', "touch-mode") != ''; _physicalFocusNode.requestFocus(); FFI.listenToMouse(true); } @override void dispose() { + hideMobileActionsOverlay(); FFI.listenToMouse(false); FFI.invokeMethod("enable_soft_keyboard", true); _mobileFocusNode.dispose(); @@ -91,7 +90,9 @@ class _RemotePageState extends State { if (v < 100) { SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []); - FFI.invokeMethod("enable_soft_keyboard", false); + if (chatWindowOverlayEntry == null) { + FFI.invokeMethod("enable_soft_keyboard", false); + } } }); } @@ -243,14 +244,14 @@ class _RemotePageState extends State { } }); }), - bottomNavigationBar: - _showBar && pi.displays != null ? getBottomAppBar() : null, + bottomNavigationBar: _showBar && pi.displays.length > 0 + ? getBottomAppBar(keyboard) + : null, body: Overlay( initialEntries: [ OverlayEntry(builder: (context) { return Container( color: Colors.black, - // child: getRawPointerAndKeyBody(keyboard)); child: isDesktop ? getBodyForDesktopWithListener(keyboard) : SafeArea( @@ -367,7 +368,7 @@ class _RemotePageState extends State { child: child)))); } - Widget getBottomAppBar() { + Widget getBottomAppBar(bool keyboard) { return BottomAppBar( elevation: 10, color: MyTheme.accent, @@ -402,12 +403,27 @@ class _RemotePageState extends State { color: Colors.white, icon: Icon(Icons.keyboard), onPressed: openKeyboard), - IconButton( - color: Colors.white, - icon: Icon( - _touchMode ? Icons.touch_app : Icons.mouse), - onPressed: changeTouchMode, - ) + FFI.ffiModel.isPeerAndroid + ? (keyboard + ? IconButton( + color: Colors.white, + icon: Icon(Icons.build), + onPressed: () { + if (mobileActionsOverlayEntry == null) { + showMobileActionsOverlay(); + } else { + hideMobileActionsOverlay(); + } + }, + ) + : SizedBox.shrink()) + : IconButton( + color: Colors.white, + icon: Icon(FFI.ffiModel.touchMode + ? Icons.touch_app + : Icons.mouse), + onPressed: changeTouchMode, + ) ]) + (isWeb ? [] @@ -454,10 +470,11 @@ class _RemotePageState extends State { /// HoldDrag -> left drag Widget getBodyForMobileWithGesture() { + final touchMode = FFI.ffiModel.touchMode; return getMixinGestureDetector( child: getBodyForMobile(), onTapUp: (d) { - if (_touchMode) { + if (touchMode) { FFI.cursorModel.touch( d.localPosition.dx, d.localPosition.dy, MouseButtons.left); } else { @@ -465,7 +482,7 @@ class _RemotePageState extends State { } }, onDoubleTapDown: (d) { - if (_touchMode) { + if (touchMode) { FFI.cursorModel.move(d.localPosition.dx, d.localPosition.dy); } }, @@ -474,7 +491,7 @@ class _RemotePageState extends State { FFI.tap(MouseButtons.left); }, onLongPressDown: (d) { - if (_touchMode) { + if (touchMode) { FFI.cursorModel.move(d.localPosition.dx, d.localPosition.dy); } }, @@ -482,36 +499,36 @@ class _RemotePageState extends State { FFI.tap(MouseButtons.right); }, onDoubleFinerTap: (d) { - if (!_touchMode) { + if (!touchMode) { FFI.tap(MouseButtons.right); } }, onHoldDragStart: (d) { - if (!_touchMode) { + if (!touchMode) { FFI.sendMouse('down', MouseButtons.left); } }, onHoldDragUpdate: (d) { - if (!_touchMode) { - FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, _touchMode); + if (!touchMode) { + FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, touchMode); } }, onHoldDragEnd: (_) { - if (!_touchMode) { + if (!touchMode) { FFI.sendMouse('up', MouseButtons.left); } }, onOneFingerPanStart: (d) { - if (_touchMode) { + if (touchMode) { FFI.cursorModel.move(d.localPosition.dx, d.localPosition.dy); FFI.sendMouse('down', MouseButtons.left); } }, onOneFingerPanUpdate: (d) { - FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, _touchMode); + FFI.cursorModel.updatePan(d.delta.dx, d.delta.dy, touchMode); }, onOneFingerPanEnd: (d) { - if (_touchMode) { + if (touchMode) { FFI.sendMouse('up', MouseButtons.left); } }, @@ -689,10 +706,10 @@ class _RemotePageState extends State { return SingleChildScrollView( padding: EdgeInsets.symmetric(vertical: 10), child: GestureHelp( - touchMode: _touchMode, + touchMode: FFI.ffiModel.touchMode, onTouchModeChange: (t) { - setState(() => _touchMode = t); - final v = _touchMode ? 'Y' : ''; + FFI.ffiModel.toggleTouchMode(); + final v = FFI.ffiModel.touchMode ? 'Y' : ''; FFI.setByName('peer_option', '{"name": "touch-mode", "value": "$v"}'); })); diff --git a/lib/pages/server_page.dart b/lib/pages/server_page.dart index 322c98682..9377f495d 100644 --- a/lib/pages/server_page.dart +++ b/lib/pages/server_page.dart @@ -319,22 +319,27 @@ class ConnectionManager extends StatelessWidget { Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - clientInfo(entry.value), - entry.value.isFileTransfer || !entry.value.authorized - ? SizedBox.shrink() - : IconButton( - onPressed: () { - FFI.chatModel.changeCurrentID(entry.value.id); - final bar = navigationBarKey.currentWidget; - if (bar != null) { - bar as BottomNavigationBar; - bar.onTap!(1); - } - }, - icon: Icon( - Icons.chat, - color: MyTheme.accent80, - )) + Expanded(child: clientInfo(entry.value)), + Expanded( + flex: -1, + child: entry.value.isFileTransfer || + !entry.value.authorized + ? SizedBox.shrink() + : IconButton( + onPressed: () { + FFI.chatModel + .changeCurrentID(entry.value.id); + final bar = + navigationBarKey.currentWidget; + if (bar != null) { + bar as BottomNavigationBar; + bar.onTap!(1); + } + }, + icon: Icon( + Icons.chat, + color: MyTheme.accent80, + ))) ], ), entry.value.authorized @@ -432,19 +437,24 @@ Widget clientInfo(Client client) { child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ - CircleAvatar( - child: Text(client.name[0]), backgroundColor: MyTheme.border), - SizedBox(width: 12), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ + Expanded( + flex: -1, + child: Padding( + padding: EdgeInsets.only(right: 12), + child: CircleAvatar( + child: Text(client.name[0]), + backgroundColor: MyTheme.border))), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ Text(client.name, - style: TextStyle(color: MyTheme.idColor, fontSize: 20)), + style: TextStyle(color: MyTheme.idColor, fontSize: 18)), SizedBox(width: 8), Text(client.peerId, style: TextStyle(color: MyTheme.idColor, fontSize: 10)) - ]) + ])) ], ), ]));