update overlay,add android to android actions

This commit is contained in:
csf 2022-04-28 22:44:54 +08:00
parent c188a6f93f
commit d486041f53
6 changed files with 113 additions and 287 deletions

View File

@ -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;

View File

@ -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<String, dynamic> evt, String id);
@ -26,20 +27,25 @@ class FfiModel with ChangeNotifier {
final _permissions = Map<String, bool>();
bool? _secure;
bool? _direct;
bool _touchMode = false;
Timer? _timer;
var _reconnects = 1;
get permissions => _permissions;
Map<String, bool> 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<String, dynamic> 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 {

View File

@ -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<StatefulWidget> createState() => _ChatWindowOverlayState();
}
class _ChatWindowOverlayState extends State<ChatWindowOverlay> {
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);
}

View File

@ -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 {

View File

@ -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<RemotePage> {
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<RemotePage> {
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<RemotePage> {
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<RemotePage> {
}
});
}),
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<RemotePage> {
child: child))));
}
Widget getBottomAppBar() {
Widget getBottomAppBar(bool keyboard) {
return BottomAppBar(
elevation: 10,
color: MyTheme.accent,
@ -402,12 +403,27 @@ class _RemotePageState extends State<RemotePage> {
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<RemotePage> {
/// 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<RemotePage> {
}
},
onDoubleTapDown: (d) {
if (_touchMode) {
if (touchMode) {
FFI.cursorModel.move(d.localPosition.dx, d.localPosition.dy);
}
},
@ -474,7 +491,7 @@ class _RemotePageState extends State<RemotePage> {
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<RemotePage> {
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<RemotePage> {
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"}');
}));

View File

@ -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))
])
]))
],
),
]));