From 32961bfd07392db9dd61bf1ca166efa3ac00a024 Mon Sep 17 00:00:00 2001 From: Jaylen Bian Date: Fri, 16 Jul 2021 15:40:54 +0800 Subject: [PATCH] [infra_ui][overlay] (WIP) Add overlay declearations --- .../flowy_infra_ui/example/pubspec.yaml | 47 +------------------ .../lib/src/overlay/overlay_basis.dart | 42 +++++++++++++++++ .../lib/src/overlay/overlay_pannel.dart | 43 +++++++++++++++++ .../lib/src/overlay/overlay_widget.dart | 0 4 files changed, 87 insertions(+), 45 deletions(-) create mode 100644 app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_basis.dart create mode 100644 app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_pannel.dart create mode 100644 app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_widget.dart diff --git a/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml b/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml index 3440f8d831..90460cf69c 100644 --- a/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml +++ b/app_flowy/packages/flowy_infra_ui/example/pubspec.yaml @@ -12,6 +12,7 @@ dependencies: sdk: flutter cupertino_icons: ^1.0.2 + flowy_infra_ui: path: ../ @@ -19,51 +20,7 @@ dev_dependencies: flutter_test: sdk: flutter - # The "flutter_lints" package below contains a set of recommended lints to - # encourage good coding practices. The lint set provided by the package is - # activated in the `analysis_options.yaml` file located at the root of your - # package. See that file for information about deactivating specific lint - # rules and activating additional ones. flutter_lints: ^1.0.0 -# For information on the generic Dart part of this file, see the -# following page: https://dart.dev/tools/pub/pubspec - -# The following section is specific to Flutter. flutter: - - # The following line ensures that the Material Icons font is - # included with your application, so that you can use the icons in - # the material Icons class. - uses-material-design: true - - # To add assets to your application, add an assets section, like this: - # assets: - # - images/a_dot_burr.jpeg - # - images/a_dot_ham.jpeg - - # An image asset can refer to one or more resolution-specific "variants", see - # https://flutter.dev/assets-and-images/#resolution-aware. - - # For details regarding adding assets from package dependencies, see - # https://flutter.dev/assets-and-images/#from-packages - - # To add custom fonts to your application, add a fonts section here, - # in this "flutter" section. Each entry in this list should have a - # "family" key with the font family name, and a "fonts" key with a - # list giving the asset and other descriptors for the font. For - # example: - # fonts: - # - family: Schyler - # fonts: - # - asset: fonts/Schyler-Regular.ttf - # - asset: fonts/Schyler-Italic.ttf - # style: italic - # - family: Trajan Pro - # fonts: - # - asset: fonts/TrajanPro.ttf - # - asset: fonts/TrajanPro_Bold.ttf - # weight: 700 - # - # For details regarding fonts from package dependencies, - # see https://flutter.dev/custom-fonts/#from-packages + uses-material-design: true \ No newline at end of file diff --git a/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_basis.dart b/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_basis.dart new file mode 100644 index 0000000000..81a6686447 --- /dev/null +++ b/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_basis.dart @@ -0,0 +1,42 @@ +import 'package:flutter/material.dart'; + +/// Specifies how overlay are anchored to the SourceWidget +enum AnchorDirection { + // Corner aligned with a corner of the SourceWidget + topLeft, + topRight, + bottomLeft, + bottomRight, + + // Edge aligned with a edge of the SourceWidget + topWithLeftAligned, + topWithCenterAligned, + topWithRightAligned, + rightWithTopAligned, + rightWithCenterAligned, + rightWithBottomAligned, + bottomWithLeftAligned, + bottomWithCenterAligned, + bottomWithRightAligned, + leftWithTopAligned, + leftWithCenterAligned, + leftWithBottomAligned, + + // Custom position + custom, +} + +/// The behavior of overlay when user tapping system back button +enum OnBackBehavior { + /// Won't handle the back action + none, + + /// Animate to get the user's attention + alert, + + /// Intercept the back action and abort directly + abort, + + /// Intercept the back action and dismiss overlay + dismiss, +} diff --git a/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_pannel.dart b/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_pannel.dart new file mode 100644 index 0000000000..758c18dc50 --- /dev/null +++ b/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_pannel.dart @@ -0,0 +1,43 @@ +import 'dart:ui'; + +import 'package:flutter/material.dart'; +import 'overlay_basis.dart'; + +class OverlayPannel extends SingleChildLayoutDelegate { + OverlayPannel({ + required this.targetRect, + this.anchorDirection = AnchorDirection.topRight, + this.safeAreaEnabled = false, + this.insets = EdgeInsets.zero, + }); + + final AnchorDirection anchorDirection; + final bool safeAreaEnabled; + final EdgeInsets insets; + final Rect targetRect; + + @override + bool shouldRelayout(OverlayPannel oldDelegate) { + return targetRect != oldDelegate.targetRect || + insets != oldDelegate.insets || + safeAreaEnabled != oldDelegate.safeAreaEnabled || + anchorDirection != oldDelegate.anchorDirection; + } + + @override + Offset getPositionForChild(Size size, Size childSize) { + var pannelRect = targetRect; + if (safeAreaEnabled) { + final safeArea = MediaQueryData.fromWindow(window).padding; + pannelRect = safeArea.deflateRect(pannelRect); + } + + // TODO: junlin - calculate child position + return Offset.zero; + } + + @override + BoxConstraints getConstraintsForChild(BoxConstraints constraints) { + return constraints.loosen(); + } +} diff --git a/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_widget.dart b/app_flowy/packages/flowy_infra_ui/lib/src/overlay/overlay_widget.dart new file mode 100644 index 0000000000..e69de29bb2