[infra_ui][overlar] Implement corner aligned anchor mode and update example project

app_flowy/packages/flowy_infra_ui/example/lib/overlay/overlay_screen.dart

@@ -1,5 +1,6 @@
 import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 import '../home/demo_item.dart';
 
@@ -19,6 +20,19 @@ class OverlayItem extends DemoItem {
   }
 }
 
+class OverlayDemoAnchorDirection extends ChangeNotifier {
+  OverlayDemoAnchorDirection(this._anchorDirection);
+
+  AnchorDirection _anchorDirection;
+
+  AnchorDirection get anchorDirection => _anchorDirection;
+
+  set anchorDirection(AnchorDirection value) {
+    _anchorDirection = value;
+    notifyListeners();
+  }
+}
+
 class OverlayScreen extends StatelessWidget {
   const OverlayScreen({Key? key}) : super(key: key);
 
@@ -28,8 +42,22 @@ class OverlayScreen extends StatelessWidget {
         appBar: AppBar(
           title: const Text('Overlay Demo'),
         ),
-        body: Column(
+        body: ChangeNotifierProvider(
+          create: (context) => OverlayDemoAnchorDirection(AnchorDirection.topLeft),
+          child: Builder(builder: (context) {
+            return Column(
               children: [
+                DropdownButton<AnchorDirection>(
+                  value: context.watch<OverlayDemoAnchorDirection>().anchorDirection,
+                  onChanged: (AnchorDirection? newValue) {
+                    if (newValue != null) {
+                      context.read<OverlayDemoAnchorDirection>().anchorDirection = newValue;
+                    }
+                  },
+                  items: AnchorDirection.values.map((AnchorDirection classType) {
+                    return DropdownMenuItem<AnchorDirection>(value: classType, child: Text(classType.toString()));
+                  }).toList(),
+                ),
                 Flexible(
                   child: Padding(
                     padding: const EdgeInsets.all(16.0),
@@ -73,7 +101,7 @@ class OverlayScreen extends StatelessWidget {
                         identifier: 'overlay_card',
                         delegate: null,
                         anchorContext: buttonContext,
-                    anchorDirection: AnchorDirection.topLeft,
+                        anchorDirection: context.read<OverlayDemoAnchorDirection>().anchorDirection,
                       );
                     },
                     child: const Text('Show Anchored Overlay'),
@@ -99,12 +127,14 @@ class OverlayScreen extends StatelessWidget {
                       delegate: null,
                       anchorPosition: Offset(0, windowSize.height - 200),
                       anchorSize: Size.zero,
-                  anchorDirection: AnchorDirection.topLeft,
+                      anchorDirection: context.read<OverlayDemoAnchorDirection>().anchorDirection,
                     );
                   },
                   child: const Text('Show Positioned Overlay'),
                 ),
               ],
+            );
+          }),
         ));
   }
 }

app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_layout_delegate.dart

@@ -39,17 +39,23 @@ class OverlayLayoutDelegate extends SingleChildLayoutDelegate {
     Offset position;
     switch (anchorDirection) {
       case AnchorDirection.topLeft:
-        position = Offset(
+        position = Offset(anchorRect.left - childSize.width, anchorRect.top - childSize.height);
-          anchorRect.left - childSize.width,
+        break;
-          anchorRect.top - childSize.height,
+      case AnchorDirection.topRight:
-        );
+        position = Offset(anchorRect.right, anchorRect.top - childSize.height);
+        break;
+      case AnchorDirection.bottomLeft:
+        position = Offset(anchorRect.left - childSize.width, anchorRect.bottom);
+        break;
+      case AnchorDirection.bottomRight:
+        position = Offset(anchorRect.right, anchorRect.bottom);
         break;
       default:
         throw UnimplementedError();
     }
     return Offset(
-      math.max(0.0, math.min(size.width, position.dx)),
+      math.max(0.0, math.min(size.width - childSize.width, position.dx)),
-      math.max(0.0, math.min(size.height, position.dy)),
+      math.max(0.0, math.min(size.height - childSize.height, position.dy)),
     );
   }
 }