Fix #138: page.width and page.height are 0 on the first page load

flet-dev · Aug 3, 2022 · 9fcec5b · 9fcec5b
1 parent 1421ec7
commit 9fcec5b
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 30 deletions.
diff --git a/client/lib/actions.dart b/client/lib/actions.dart
@@ -26,7 +26,8 @@ class PageReconnectingAction {
 
 class PageSizeChangeAction {
   final Size newPageSize;
-  PageSizeChangeAction(this.newPageSize);
+  final WindowMediaData? wmd;
+  PageSizeChangeAction(this.newPageSize, this.wmd);
 }
 
 class SetPageRouteAction {

diff --git a/client/lib/controls/page.dart b/client/lib/controls/page.dart
@@ -253,7 +253,7 @@ class _PageControlState extends State<PageControl> {
               distinct: true,
               converter: (store) => PageMediaViewModel.fromStore(store),
               builder: (context, media) {
-                debugPrint("Page media build: ${widget.control.id}");
+                debugPrint("MeterialApp.router build: ${widget.control.id}");
 
                 return MaterialApp.router(
                   routerDelegate: _routerDelegate,

diff --git a/client/lib/models/app_state.dart b/client/lib/models/app_state.dart
@@ -15,6 +15,7 @@ class AppState extends Equatable {
   final String route;
   final String sessionId;
   final bool isLoading;
+  final bool isRegistered;
   final int reconnectingTimeout;
   final String error;
   final Size size;
@@ -28,6 +29,7 @@ class AppState extends Equatable {
       required this.route,
       required this.sessionId,
       required this.isLoading,
+      required this.isRegistered,
       required this.reconnectingTimeout,
       required this.error,
       required this.size,
@@ -41,6 +43,7 @@ class AppState extends Equatable {
       route: "",
       sessionId: "",
       isLoading: true,
+      isRegistered: false,
       reconnectingTimeout: 0,
       error: "",
       size: Size(0, 0),
@@ -69,6 +72,7 @@ class AppState extends Equatable {
           String? route,
           String? sessionId,
           bool? isLoading,
+          bool? isRegistered,
           int? reconnectingTimeout,
           String? error,
           Size? size,
@@ -81,6 +85,7 @@ class AppState extends Equatable {
           route: route ?? this.route,
           sessionId: sessionId ?? this.sessionId,
           isLoading: isLoading ?? this.isLoading,
+          isRegistered: isRegistered ?? this.isRegistered,
           reconnectingTimeout: reconnectingTimeout ?? this.reconnectingTimeout,
           error: error ?? this.error,
           size: size ?? this.size,

diff --git a/client/lib/models/page_media_view_model.dart b/client/lib/models/page_media_view_model.dart
@@ -6,22 +6,25 @@ import 'package:redux/redux.dart';
 import 'app_state.dart';
 
 class PageMediaViewModel extends Equatable {
+  final bool isRegistered;
   final Size size;
   final Brightness displayBrightness;
   final Function dispatch;
 
   const PageMediaViewModel(
-      {required this.size,
+      {required this.isRegistered,
+      required this.size,
       required this.displayBrightness,
       required this.dispatch});
 
   static PageMediaViewModel fromStore(Store<AppState> store) {
     return PageMediaViewModel(
+        isRegistered: store.state.isRegistered,
         size: store.state.size,
         displayBrightness: store.state.displayBrightness,
         dispatch: store.dispatch);
   }
 
   @override
-  List<Object?> get props => [size, displayBrightness, dispatch];
+  List<Object?> get props => [size, displayBrightness, dispatch, isRegistered];
 }
diff --git a/client/lib/reducers.dart b/client/lib/reducers.dart
@@ -1,4 +1,5 @@
 // One simple action: Increment
+import 'package:flet_view/models/window_media_data.dart';
 import 'package:flet_view/protocol/add_page_controls_payload.dart';
 import 'package:flet_view/protocol/clean_control_payload.dart';
 import 'package:flet_view/protocol/message.dart';
@@ -46,12 +47,16 @@ AppState appReducer(AppState state, dynamic action) {
       var pageAttrs = Map.of(page.attrs);
       pageAttrs["width"] = action.newPageSize.width.toString();
       pageAttrs["height"] = action.newPageSize.height.toString();
-      controls[page.id] = page.copyWith(attrs: pageAttrs);
 
       List<Map<String, String>> props = [
         {"i": "page", "width": action.newPageSize.width.toString()},
         {"i": "page", "height": action.newPageSize.height.toString()},
       ];
+
+      if (action.wmd != null) {
+        addWindowMediaEventProps(action.wmd!, pageAttrs, props);
+      }
+      controls[page.id] = page.copyWith(attrs: pageAttrs);
       ws.updateControlProps(props: props);
       ws.pageEventFromWeb(
           eventTarget: "page",
@@ -61,6 +66,7 @@ AppState appReducer(AppState state, dynamic action) {
     }
 
     return state.copyWith(
+        isRegistered: true,
         controls: controls,
         size: action.newPageSize,
         sizeBreakpoint: newBreakpoint);
@@ -119,24 +125,10 @@ AppState appReducer(AppState state, dynamic action) {
     var controls = Map.of(state.controls);
     if (page != null && !state.isLoading) {
       var pageAttrs = Map.of(page.attrs);
-      pageAttrs["windowwidth"] = action.wmd.width.toString();
-      pageAttrs["windowheight"] = action.wmd.height.toString();
-      pageAttrs["windowtop"] = action.wmd.top.toString();
-      pageAttrs["windowleft"] = action.wmd.left.toString();
-      pageAttrs["windowminimized"] = action.wmd.isMinimized.toString();
-      pageAttrs["windowmaximized"] = action.wmd.isMaximized.toString();
-      pageAttrs["windowfocused"] = action.wmd.isFocused.toString();
-      controls[page.id] = page.copyWith(attrs: pageAttrs);
+      List<Map<String, String>> props = [];
+      addWindowMediaEventProps(action.wmd, pageAttrs, props);
 
-      List<Map<String, String>> props = [
-        {"i": "page", "windowwidth": action.wmd.width.toString()},
-        {"i": "page", "windowheight": action.wmd.height.toString()},
-        {"i": "page", "windowtop": action.wmd.top.toString()},
-        {"i": "page", "windowleft": action.wmd.left.toString()},
-        {"i": "page", "windowminimized": action.wmd.isMinimized.toString()},
-        {"i": "page", "windowmaximized": action.wmd.isMaximized.toString()},
-        {"i": "page", "windowfocused": action.wmd.isFocused.toString()},
-      ];
+      controls[page.id] = page.copyWith(attrs: pageAttrs);
       ws.updateControlProps(props: props);
       ws.pageEventFromWeb(
           eventTarget: "page",
@@ -267,6 +259,27 @@ AppState appReducer(AppState state, dynamic action) {
   return state;
 }
 
+addWindowMediaEventProps(WindowMediaData wmd, Map<String, String> pageAttrs,
+    List<Map<String, String>> props) {
+  pageAttrs["windowwidth"] = wmd.width.toString();
+  pageAttrs["windowheight"] = wmd.height.toString();
+  pageAttrs["windowtop"] = wmd.top.toString();
+  pageAttrs["windowleft"] = wmd.left.toString();
+  pageAttrs["windowminimized"] = wmd.isMinimized.toString();
+  pageAttrs["windowmaximized"] = wmd.isMaximized.toString();
+  pageAttrs["windowfocused"] = wmd.isFocused.toString();
+
+  props.addAll([
+    {"i": "page", "windowwidth": wmd.width.toString()},
+    {"i": "page", "windowheight": wmd.height.toString()},
+    {"i": "page", "windowtop": wmd.top.toString()},
+    {"i": "page", "windowleft": wmd.left.toString()},
+    {"i": "page", "windowminimized": wmd.isMinimized.toString()},
+    {"i": "page", "windowmaximized": wmd.isMaximized.toString()},
+    {"i": "page", "windowfocused": wmd.isFocused.toString()},
+  ]);
+}
+
 addControls(Map<String, Control> controls, List<Control> newControls) {
   String firstParentId = "";
   for (var ctrl in newControls) {

diff --git a/client/lib/widgets/page_media.dart b/client/lib/widgets/page_media.dart
@@ -6,6 +6,7 @@ import 'package:flutter_redux/flutter_redux.dart';
 import '../actions.dart';
 import '../models/app_state.dart';
 import '../models/page_media_view_model.dart';
+import '../utils/desktop.dart';
 
 class PageMedia extends StatefulWidget {
   const PageMedia({Key? key}) : super(key: key);
@@ -17,12 +18,18 @@ class PageMedia extends StatefulWidget {
 class _PageMediaState extends State<PageMedia> {
   Timer? _debounce;
 
-  _onScreenSizeChanged(Size newSize, Function dispatch) {
-    if (_debounce?.isActive ?? false) _debounce!.cancel();
-    _debounce = Timer(const Duration(milliseconds: 500), () {
-      debugPrint("Send current size to reducer: $newSize");
-      dispatch(PageSizeChangeAction(newSize));
-    });
+  _onScreenSizeChanged(bool isRegistered, Size newSize, Function dispatch) {
+    if (isRegistered) {
+      if (_debounce?.isActive ?? false) _debounce!.cancel();
+      _debounce = Timer(const Duration(milliseconds: 200), () {
+        debugPrint("Send current size to reducer: $newSize");
+        getWindowMediaData().then((wmd) {
+          dispatch(PageSizeChangeAction(newSize, wmd));
+        });
+      });
+    } else {
+      dispatch(PageSizeChangeAction(newSize, null));
+    }
   }
 
   _onScreenBrightnessChanged(Brightness brightness, Function dispatch) {
@@ -32,13 +39,16 @@ class _PageMediaState extends State<PageMedia> {
 
   @override
   Widget build(BuildContext context) {
+    debugPrint("Page media build");
+
     return StoreConnector<AppState, PageMediaViewModel>(
         distinct: true,
         converter: (store) => PageMediaViewModel.fromStore(store),
         builder: (context, viewModel) {
           MediaQueryData media = MediaQuery.of(context);
           if (media.size != viewModel.size) {
-            _onScreenSizeChanged(media.size, viewModel.dispatch);
+            _onScreenSizeChanged(
+                viewModel.isRegistered, media.size, viewModel.dispatch);
           } else {
             debugPrint("Page size did not change.");
           }

diff --git a/client/lib/widgets/window_media.dart b/client/lib/widgets/window_media.dart
@@ -45,7 +45,7 @@ class _WindowMediaState extends State<WindowMedia> with WindowListener {
   @override
   void onWindowEvent(String eventName) {
     if (_debounce?.isActive ?? false) _debounce!.cancel();
-    _debounce = Timer(const Duration(milliseconds: 300), () {
+    _debounce = Timer(const Duration(milliseconds: 200), () {
       debugPrint('[WindowManager] onWindowEvent: $eventName');
       getWindowMediaData().then((wmd) {
         debugPrint("WindowMediaData: $wmd");