aiden
/
fluffychat
mirror of https://github.com/krille-chan/fluffychat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

position overlay cards via tranform follower instead of manually calculating offset, close keyboard when showing span card

Browse Source
pull/1423/head
ggurdin 1 year ago
parent f6248b73f1
commit ac586e0a4d
No known key found for this signature in database
GPG Key ID: A01CB41737CBB478
4 changed files with 112 additions and 118 deletions
Show Stats Download Patch File Download Diff File

3
lib/pangea/choreographer/controllers/igc_controller.dart
Unescape Escape View File

@ -105,6 +105,7 @@ class IgcController {
return; return;
} }
choreographer.chatController.inputFocus.unfocus();
OverlayUtil.showPositionedCard( OverlayUtil.showPositionedCard(
context: context, context: context,
cardToShow: SpanCard( cardToShow: SpanCard(
@ -124,7 +125,7 @@ class IgcController {
), ),
roomId: choreographer.roomId, roomId: choreographer.roomId,
), ),
cardSize: match.isITStart ? const Size(325, 260) : const Size(400, 400), cardSize: match.isITStart ? const Size(350, 260) : const Size(350, 350),
transformTargetId: choreographer.inputTransformTargetKey, transformTargetId: choreographer.inputTransformTargetKey,
); );
} }

2
lib/pangea/choreographer/widgets/it_bar.dart
Unescape Escape View File

@ -308,6 +308,8 @@ class ITChoices extends StatelessWidget {
); );
return; return;
} }
controller.choreographer.chatController.inputFocus.unfocus();
OverlayUtil.showPositionedCard( OverlayUtil.showPositionedCard(
context: context, context: context,
cardToShow: choiceFeedback == null cardToShow: choiceFeedback == null

221
lib/pangea/utils/overlay.dart
Unescape Escape View File

@ -1,8 +1,6 @@
import 'dart:developer'; import 'dart:developer';
import 'dart:math';
import 'dart:ui'; import 'dart:ui';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/pangea/utils/any_state_holder.dart'; import 'package:fluffychat/pangea/utils/any_state_holder.dart';
import 'package:fluffychat/pangea/widgets/common_widgets/overlay_container.dart'; import 'package:fluffychat/pangea/widgets/common_widgets/overlay_container.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
@ -22,7 +20,6 @@ class OverlayUtil {
required BuildContext context, required BuildContext context,
required Widget child, required Widget child,
required String transformTargetId, required String transformTargetId,
// Size? size,
double? width, double? width,
double? height, double? height,
Offset? offset, Offset? offset,
@ -63,13 +60,13 @@ class OverlayUtil {
child: (position != OverlayPositionEnum.transform) child: (position != OverlayPositionEnum.transform)
? child ? child
: CompositedTransformFollower( : CompositedTransformFollower(
targetAnchor: targetAnchor ?? Alignment.topLeft, targetAnchor: targetAnchor ?? Alignment.topCenter,
followerAnchor: followerAnchor ?? Alignment.topLeft, followerAnchor:
followerAnchor ?? Alignment.bottomCenter,
link: MatrixState.pAnyState link: MatrixState.pAnyState
.layerLinkAndKey(transformTargetId) .layerLinkAndKey(transformTargetId)
.link, .link,
showWhenUnlinked: false, showWhenUnlinked: false,
offset: offset ?? Offset.zero,
child: child, child: child,
), ),
), ),
@ -103,11 +100,6 @@ class OverlayUtil {
return; return;
} }
final Offset cardOffset = _calculateCardOffset(
cardSize: cardSize,
transformTargetContext: layerLinkAndKey.key.currentContext!,
);
final Widget child = Material( final Widget child = Material(
borderOnForeground: false, borderOnForeground: false,
color: Colors.transparent, color: Colors.transparent,
@ -124,7 +116,6 @@ class OverlayUtil {
width: cardSize.width, width: cardSize.width,
height: cardSize.height, height: cardSize.height,
transformTargetId: transformTargetId, transformTargetId: transformTargetId,
offset: cardOffset,
backDropToDismiss: backDropToDismiss, backDropToDismiss: backDropToDismiss,
borderColor: borderColor, borderColor: borderColor,
closePrevOverlay: closePrevOverlay, closePrevOverlay: closePrevOverlay,
@ -135,73 +126,73 @@ class OverlayUtil {
} }
} }
/// calculates the card offset relative to the target // /// calculates the card offset relative to the target
/// identified by [transformTargetKey] // /// identified by [transformTargetKey]
static Offset _calculateCardOffset({ // static Offset _calculateCardOffset({
required Size cardSize, // required Size cardSize,
required BuildContext transformTargetContext, // required BuildContext transformTargetContext,
final double minPadding = 10.0, // final double minPadding = 10.0,
}) { // }) {
// debugger(when: kDebugMode); // // debugger(when: kDebugMode);
//Note: assumes overlay in chatview // //Note: assumes overlay in chatview
final OverlayConstraints constraints = // final OverlayConstraints constraints =
ChatViewConstraints(transformTargetContext); // ChatViewConstraints(transformTargetContext);
final RenderObject? targetRenderBox = // final RenderObject? targetRenderBox =
transformTargetContext.findRenderObject(); // transformTargetContext.findRenderObject();
if (targetRenderBox == null) return Offset.zero; // if (targetRenderBox == null) return Offset.zero;
final Offset transformTargetOffset = // final Offset transformTargetOffset =
(targetRenderBox as RenderBox).localToGlobal(Offset.zero); // (targetRenderBox as RenderBox).localToGlobal(Offset.zero);
final Size transformTargetSize = targetRenderBox.size; // final Size transformTargetSize = targetRenderBox.size;
// ideally horizontally centered on target // // ideally horizontally centered on target
double dx = transformTargetSize.width / 2 - cardSize.width / 2; // double dx = transformTargetSize.width / 2 - cardSize.width / 2;
// make sure it's not off the left edge of the screen // // make sure it's not off the left edge of the screen
// if transformTargetOffset.dx + dc < constraints.x0 + minPadding // // if transformTargetOffset.dx + dc < constraints.x0 + minPadding
if (transformTargetOffset.dx + dx < minPadding + constraints.x0) { // if (transformTargetOffset.dx + dx < minPadding + constraints.x0) {
debugPrint("setting dx"); // debugPrint("setting dx");
dx = minPadding + constraints.x0 - transformTargetOffset.dx; // dx = minPadding + constraints.x0 - transformTargetOffset.dx;
} // }
// make sure it's not off the right edge of the screen // // make sure it's not off the right edge of the screen
if (transformTargetOffset.dx + dx + cardSize.width + minPadding > // if (transformTargetOffset.dx + dx + cardSize.width + minPadding >
constraints.x1) { // constraints.x1) {
dx = constraints.x1 - // dx = constraints.x1 -
transformTargetOffset.dx - // transformTargetOffset.dx -
cardSize.width - // cardSize.width -
minPadding; // minPadding;
} // }
// if there's more room above target, // // if there's more room above target,
// put the card there // // put the card there
// else, // // else,
// put it below // // put it below
// debugPrint( // // debugPrint(
// "transformTargetOffset.dx ${transformTargetOffset.dx} transformTargetOffset.dy ${transformTargetOffset.dy}"); // // "transformTargetOffset.dx ${transformTargetOffset.dx} transformTargetOffset.dy ${transformTargetOffset.dy}");
// debugPrint( // // debugPrint(
// "transformTargetSize.width ${transformTargetSize.width} transformTargetSize.height ${transformTargetSize.height}"); // // "transformTargetSize.width ${transformTargetSize.width} transformTargetSize.height ${transformTargetSize.height}");
double dy = transformTargetOffset.dy > // double dy = transformTargetOffset.dy >
constraints.y1 - // constraints.y1 -
transformTargetOffset.dy - // transformTargetOffset.dy -
transformTargetSize.height // transformTargetSize.height
? -cardSize.height - minPadding // ? -cardSize.height - minPadding
: transformTargetSize.height + minPadding; // : transformTargetSize.height + minPadding;
// make sure it's not off the top edge of the screen // // make sure it's not off the top edge of the screen
if (dy < minPadding + constraints.y0 - transformTargetOffset.dy) { // if (dy < minPadding + constraints.y0 - transformTargetOffset.dy) {
dy = minPadding + constraints.y0 - transformTargetOffset.dy; // dy = minPadding + constraints.y0 - transformTargetOffset.dy;
} // }
// make sure it's not off the bottom edge of the screen // // make sure it's not off the bottom edge of the screen
if (transformTargetOffset.dy + dy + cardSize.height + minPadding > // if (transformTargetOffset.dy + dy + cardSize.height + minPadding >
constraints.y1) { // constraints.y1) {
dy = constraints.y1 - // dy = constraints.y1 -
transformTargetOffset.dy - // transformTargetOffset.dy -
cardSize.height - // cardSize.height -
minPadding; // minPadding;
} // }
// debugPrint("dx $dx dy $dy"); // // debugPrint("dx $dx dy $dy");
return Offset(dx, dy); // return Offset(dx, dy);
} // }
static bool get isOverlayOpen => MatrixState.pAnyState.entries.isNotEmpty; static bool get isOverlayOpen => MatrixState.pAnyState.entries.isNotEmpty;
} }
@ -250,48 +241,48 @@ class TransparentBackdrop extends StatelessWidget {
} }
} }
/// global coordinates that the overlay should stay inside // /// global coordinates that the overlay should stay inside
abstract class OverlayConstraints { // abstract class OverlayConstraints {
late double x0; // late double x0;
late double y0; // late double y0;
late double x1; // late double x1;
late double y1; // late double y1;
} // }
class ChatViewConstraints implements OverlayConstraints { // class ChatViewConstraints implements OverlayConstraints {
@override // @override
late double x0; // late double x0;
@override // @override
late double y0; // late double y0;
@override // @override
late double x1; // late double x1;
@override // @override
late double y1; // late double y1;
ChatViewConstraints(BuildContext context) { // ChatViewConstraints(BuildContext context) {
final MediaQueryData mediaQueryData = // final MediaQueryData mediaQueryData =
MediaQuery.of(Scaffold.of(context).context); // MediaQuery.of(Scaffold.of(context).context);
final bool isColumnMode = FluffyThemes.isColumnMode(context); // final bool isColumnMode = FluffyThemes.isColumnMode(context);
x0 = isColumnMode // x0 = isColumnMode
? AppConfig.columnWidth + 70.0 // ? AppConfig.columnWidth + 70.0
: max(mediaQueryData.viewPadding.left, mediaQueryData.viewInsets.left); // : max(mediaQueryData.viewPadding.left, mediaQueryData.viewInsets.left);
y0 = max(mediaQueryData.viewPadding.top, mediaQueryData.viewInsets.top); // y0 = max(mediaQueryData.viewPadding.top, mediaQueryData.viewInsets.top);
x1 = mediaQueryData.size.width - // x1 = mediaQueryData.size.width -
max(mediaQueryData.viewPadding.right, mediaQueryData.viewInsets.right); // max(mediaQueryData.viewPadding.right, mediaQueryData.viewInsets.right);
y1 = mediaQueryData.size.height - // y1 = mediaQueryData.size.height -
max( // max(
mediaQueryData.viewPadding.bottom, // mediaQueryData.viewPadding.bottom,
mediaQueryData.viewInsets.bottom, // mediaQueryData.viewInsets.bottom,
); // );
// https://medium.com/flutter-community/a-flutter-guide-to-visual-overlap-padding-viewpadding-and-viewinsets-a63e214be6e8 // // https://medium.com/flutter-community/a-flutter-guide-to-visual-overlap-padding-viewpadding-and-viewinsets-a63e214be6e8
// debugPrint( // // debugPrint(
// "viewInsets ${mediaQueryData.viewInsets.left} ${mediaQueryData.viewInsets.top} ${mediaQueryData.viewInsets.right} ${mediaQueryData.viewInsets.bottom}"); // // "viewInsets ${mediaQueryData.viewInsets.left} ${mediaQueryData.viewInsets.top} ${mediaQueryData.viewInsets.right} ${mediaQueryData.viewInsets.bottom}");
// debugPrint( // // debugPrint(
// "padding ${mediaQueryData.padding.left} ${mediaQueryData.padding.top} ${mediaQueryData.padding.right} ${mediaQueryData.padding.bottom}"); // // "padding ${mediaQueryData.padding.left} ${mediaQueryData.padding.top} ${mediaQueryData.padding.right} ${mediaQueryData.padding.bottom}");
// debugPrint( // // debugPrint(
// "viewPadding ${mediaQueryData.viewPadding.left} ${mediaQueryData.viewPadding.top} ${mediaQueryData.viewPadding.right} ${mediaQueryData.viewPadding.bottom}"); // // "viewPadding ${mediaQueryData.viewPadding.left} ${mediaQueryData.viewPadding.top} ${mediaQueryData.viewPadding.right} ${mediaQueryData.viewPadding.bottom}");
// debugPrint("chatViewConstraints x0: $x0 y0: $y0 x1: $x1 y1: $y1"); // // debugPrint("chatViewConstraints x0: $x0 y0: $y0 x1: $x1 y1: $y1");
} // }
} // }

4
lib/pangea/widgets/igc/pangea_text_controller.dart
Unescape Escape View File

@ -114,8 +114,8 @@ class PangeaTextController extends TextEditingController {
context: context, context: context,
cardSize: matchIndex != -1 && cardSize: matchIndex != -1 &&
choreographer.igc.igcTextData!.matches[matchIndex].isITStart choreographer.igc.igcTextData!.matches[matchIndex].isITStart
? const Size(325, 260) ? const Size(350, 260)
: const Size(325, 400), : const Size(350, 400),
cardToShow: cardToShow, cardToShow: cardToShow,
transformTargetId: choreographer.inputTransformTargetKey, transformTargetId: choreographer.inputTransformTargetKey,
); );

Write Preview
Loading…
Cancel
Save