prepare for mouse

lib/model.dart

@@ -200,10 +200,14 @@ class ImageModel with ChangeNotifier {
 
   void update(ui.Image image) {
     if (_image == null && image != null) {
+      if (isDesktop) {
+        FFI.canvasModel.updateViewStyle();
+      } else {
         final size = MediaQueryData.fromWindow(ui.window).size;
         final xscale = size.width / image.width;
         final yscale = size.height / image.height;
         FFI.canvasModel.scale = max(xscale, yscale);
+      }
       initializeCursorAndCanvas();
     }
     _image = image;
@@ -240,6 +244,29 @@ class CanvasModel with ChangeNotifier {
   double get y => _y;
   double get scale => _scale;
 
+  void updateViewStyle() {
+    final s = FFI.getByName('peer_option', 'view-style');
+    final size = MediaQueryData.fromWindow(ui.window).size;
+    final s1 = size.width / FFI.ffiModel.display.width;
+    final s2 = size.height / FFI.ffiModel.display.height;
+    if (s == 'shrink') {
+      final s = s1 < s2 ? s1 : s2;
+      if (s < 1) {
+        _scale = s;
+      }
+    } else if (s == 'stretch') {
+      final s = s1 > s2 ? s1 : s2;
+      if (s > 1) {
+        _scale = s;
+      }
+    } else {
+      _scale = 1;
+    }
+    _x = (size.width - FFI.ffiModel.display.width * _scale) / 2;
+    _y = (size.height - FFI.ffiModel.display.height * _scale) / 2;
+    notifyListeners();
+  }
+
   void update(double x, double y, double scale) {
     _x = x;
     _y = y;
@@ -258,8 +285,12 @@ class CanvasModel with ChangeNotifier {
   }
 
   void resetOffset() {
+    if (isDesktop) {
+      updateViewStyle();
+    } else {
       _x = 0;
       _y = 0;
+    }
     notifyListeners();
   }
 
@@ -624,6 +655,18 @@ class FFI {
   static Future<String> getVersion() async {
     return await PlatformFFI.getVersion();
   }
+
+  static handleMouse(Map<String, dynamic> evt) {
+    //
+  }
+
+  static listenToMouse(bool yesOrNo) {
+    if (yesOrNo) {
+      PlatformFFI.startDesktopWebListener(handleMouse);
+    } else {
+      PlatformFFI.stopDesktopWebListener();
+    }
+  }
 }
 
 class Peer {

lib/native_model.dart

@@ -101,6 +101,10 @@ class PlatformFFI {
       print(e);
     }
   }
+
+  static void startDesktopWebListener(
+      Function(Map<String, dynamic>) handleMouse) {}
+  static void stopDesktopWebListener() {}
 }
 
 final localeName = Platform.localeName;

lib/remote_page.dart

@@ -242,6 +242,7 @@ class _RemotePageState extends State<RemotePage> {
         return false;
       },
       child: Scaffold(
+          // resizeToAvoidBottomInset: true,
           floatingActionButton: !showActionButton
               ? null
               : FloatingActionButton(
@@ -264,8 +265,8 @@ class _RemotePageState extends State<RemotePage> {
             child: Container(
                 color: Colors.black,
                 child: isDesktop
-                    ? getBodyForDesktop()
+                    ? getBodyForDesktopWithListener()
-                    : SafeArea(child: getBodyForMobile())),
+                    : SafeArea(child: getBodyForMobileWithGuesture())),
           )),
     );
   }
@@ -344,7 +345,7 @@ class _RemotePageState extends State<RemotePage> {
     );
   }
 
-  Widget getBodyForMobile() {
+  Widget getBodyForMobileWithGuesture() {
     return GestureDetector(
         onLongPress: () {
           if (_drag || _scroll) return;
@@ -406,7 +407,11 @@ class _RemotePageState extends State<RemotePage> {
             }
           }
         },
-        child: Container(
+        child: getBodyForMobile());
+  }
+
+  Widget getBodyForMobile() {
+    return Container(
         color: MyTheme.canvasColor,
         child: Stack(children: [
           ImagePaint(),
@@ -429,13 +434,20 @@ class _RemotePageState extends State<RemotePage> {
                     onChanged: handleInput,
                   ),
           ),
-            ])));
+        ]));
   }
 
-  Widget getBodyForDesktop() {
+  Widget getBodyForDesktopWithListener() {
-    return GestureDetector(
+    print(FFI.ffiModel.display.width);
-        onTapDown: (details) => {},
+    return MouseRegion(
-        onTapUp: (details) => {},
+        onEnter: (event) {
+          print('enter');
+          FFI.listenToMouse(true);
+        },
+        onExit: (event) {
+          print('exit');
+          FFI.listenToMouse(false);
+        },
         child: Container(
             color: MyTheme.canvasColor,
             child: Stack(children: [ImagePaint(), CursorPaint()])));
@@ -932,6 +944,7 @@ void showOptions(BuildContext context) {
         viewStyle = value;
         FFI.setByName(
             'peer_option', '{"name": "view-style", "value": "$value"}');
+        FFI.canvasModel.updateViewStyle();
       });
     };
     return Tuple3(

lib/web_model.dart

@@ -1,6 +1,10 @@
 import 'dart:typed_data';
 import 'dart:js' as js;
 import 'common.dart';
+import 'dart:html';
+import 'dart:async';
+
+final List<StreamSubscription<MouseEvent>> mouselisteners = [];
 
 class PlatformFFI {
   static void clearRgbaFrame() {}
@@ -22,10 +26,47 @@ class PlatformFFI {
   }
 
   static Future<Null> init() async {
+    window.document.onContextMenu.listen((evt) => evt.preventDefault());
     isWeb = true;
     isDesktop = !js.context.callMethod('isMobile');
     js.context.callMethod('init');
   }
+
+  // MouseRegion onHover not work for mouse move when right button down
+  static void startDesktopWebListener(
+      Function(Map<String, dynamic>) handleMouse) {
+    // document.body.getElementsByTagName('flt-glass-pane')[0].style.cursor = 'none';
+    mouselisteners.add(window.document.onMouseMove
+        .listen((evt) => handleMouse(getEvent(evt))));
+    mouselisteners.add(window.document.onMouseDown
+        .listen((evt) => handleMouse(getEvent(evt))));
+    mouselisteners.add(
+        window.document.onMouseUp.listen((evt) => handleMouse(getEvent(evt))));
+    mouselisteners.add(window.document.onMouseWheel.listen((evt) => {}));
   }
 
-final localeName = js.context.callMethod('getLanguage') as String;
+  static void stopDesktopWebListener() {
+    mouselisteners.forEach((l) {
+      l.cancel();
+    });
+    mouselisteners.clear();
+  }
+}
+
+Map<String, dynamic> getEvent(MouseEvent evt) {
+  // https://github.com/novnc/noVNC/blob/679b45fa3b453c7cf32f4b4455f4814818ecf161/core/rfb.js
+  // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousedown_event
+  final out = {};
+  out['type'] = evt.type;
+  out['x'] = evt.client.x;
+  out['y'] = evt.client.y;
+  out['ctrl'] = evt.ctrlKey;
+  out['shift'] = evt.shiftKey;
+  out['alt'] = evt.altKey;
+  out['meta'] = evt.metaKey;
+  out['buttons'] = evt
+      .buttons; // left button: 1, right button: 2, middle button: 4, 1 | 2 = 3 (left + right)
+  return out;
+}
+
+final localeName = window.navigator.language;