mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2025-11-04 12:03:28 +00:00
fix: mobile slash menu position error (#7747)
* fix: mobile slash menu position error * fix: mobile slash menu sometimes not showing up
This commit is contained in:
parent
69b5452af5
commit
c6511cfb55
@ -1,5 +1,4 @@
|
|||||||
import 'dart:async';
|
import 'dart:async';
|
||||||
import 'dart:math';
|
|
||||||
|
|
||||||
import 'package:appflowy/mobile/presentation/selection_menu/mobile_selection_menu_item.dart';
|
import 'package:appflowy/mobile/presentation/selection_menu/mobile_selection_menu_item.dart';
|
||||||
import 'package:appflowy_editor/appflowy_editor.dart';
|
import 'package:appflowy_editor/appflowy_editor.dart';
|
||||||
@ -166,7 +165,8 @@ class MobileSelectionMenu extends SelectionMenuService {
|
|||||||
if (selectionRects.isEmpty) {
|
if (selectionRects.isEmpty) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
calculateSelectionMenuOffset(selectionRects.first);
|
final screenSize = MediaQuery.of(context).size;
|
||||||
|
calculateSelectionMenuOffset(selectionRects.first, screenSize);
|
||||||
final (left, top, right, bottom) = getPosition();
|
final (left, top, right, bottom) = getPosition();
|
||||||
return _Position(left, top, right, bottom);
|
return _Position(left, top, right, bottom);
|
||||||
}
|
}
|
||||||
@ -205,50 +205,65 @@ class MobileSelectionMenu extends SelectionMenuService {
|
|||||||
return (left, top, right, bottom);
|
return (left, top, right, bottom);
|
||||||
}
|
}
|
||||||
|
|
||||||
void calculateSelectionMenuOffset(Rect rect) {
|
void calculateSelectionMenuOffset(Rect rect, Size screenSize) {
|
||||||
// Workaround: We can customize the padding through the [EditorStyle],
|
// Workaround: We can customize the padding through the [EditorStyle],
|
||||||
// but the coordinates of overlay are not properly converted currently.
|
// but the coordinates of overlay are not properly converted currently.
|
||||||
// Just subtract the padding here as a result.
|
// Just subtract the padding here as a result.
|
||||||
const menuHeight = 192.0, menuWidth = 240.0 + 10;
|
const menuHeight = 192.0, menuWidth = 240.0;
|
||||||
const menuOffset = Offset(0, 10);
|
|
||||||
final editorOffset =
|
final editorOffset =
|
||||||
editorState.renderBox?.localToGlobal(Offset.zero) ?? Offset.zero;
|
editorState.renderBox?.localToGlobal(Offset.zero) ?? Offset.zero;
|
||||||
final editorHeight = editorState.renderBox!.size.height;
|
final editorHeight = editorState.renderBox!.size.height;
|
||||||
|
final screenHeight = screenSize.height;
|
||||||
final editorWidth = editorState.renderBox!.size.width;
|
final editorWidth = editorState.renderBox!.size.width;
|
||||||
|
final rectHeight = rect.height;
|
||||||
|
|
||||||
// show below default
|
// show below default
|
||||||
_alignment = Alignment.topLeft;
|
_alignment = Alignment.bottomRight;
|
||||||
final bottomRight = rect.bottomRight;
|
final bottomRight = rect.topLeft;
|
||||||
final topRight = rect.topRight;
|
final offset = bottomRight;
|
||||||
var offset = bottomRight + menuOffset;
|
final limitX = editorWidth + editorOffset.dx - menuWidth,
|
||||||
final limitX = editorWidth - menuWidth + editorOffset.dx;
|
limitY = screenHeight -
|
||||||
|
editorHeight +
|
||||||
|
editorOffset.dy -
|
||||||
|
menuHeight -
|
||||||
|
rectHeight;
|
||||||
_offset = Offset(
|
_offset = Offset(
|
||||||
min(offset.dx, limitX),
|
editorWidth - offset.dx - menuWidth,
|
||||||
offset.dy,
|
screenHeight - offset.dy - menuHeight - rectHeight,
|
||||||
);
|
);
|
||||||
|
|
||||||
// show above
|
|
||||||
if (offset.dy + menuHeight >= editorOffset.dy + editorHeight) {
|
if (offset.dy + menuHeight >= editorOffset.dy + editorHeight) {
|
||||||
offset = topRight - menuOffset;
|
/// show above
|
||||||
_alignment = Alignment.bottomLeft;
|
if (offset.dy > menuHeight) {
|
||||||
|
_offset = Offset(
|
||||||
_offset = Offset(
|
_offset.dx,
|
||||||
offset.dx,
|
offset.dy - menuHeight,
|
||||||
editorOffset.dy + editorHeight - offset.dy,
|
);
|
||||||
);
|
_alignment = Alignment.topRight;
|
||||||
|
} else {
|
||||||
|
_offset = Offset(
|
||||||
|
_offset.dx,
|
||||||
|
limitY,
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// show on left
|
if (offset.dx + menuWidth >= editorOffset.dx + editorWidth) {
|
||||||
if (_offset.dx - editorOffset.dx > editorWidth / 2) {
|
/// show left
|
||||||
_alignment = _alignment == Alignment.topLeft
|
if (offset.dx > menuWidth) {
|
||||||
? Alignment.topRight
|
_alignment = _alignment == Alignment.bottomRight
|
||||||
: Alignment.bottomRight;
|
? Alignment.bottomLeft
|
||||||
|
: Alignment.topLeft;
|
||||||
final x = editorWidth - _offset.dx + editorOffset.dx;
|
_offset = Offset(
|
||||||
_offset = Offset(
|
offset.dx - menuWidth,
|
||||||
min(x, limitX),
|
_offset.dy,
|
||||||
_offset.dy,
|
);
|
||||||
);
|
} else {
|
||||||
|
_offset = Offset(
|
||||||
|
limitX,
|
||||||
|
_offset.dy,
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -98,8 +98,8 @@ packages:
|
|||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
path: "."
|
path: "."
|
||||||
ref: "361b99c38370abeeb19656f89e8c31cb3666623b"
|
ref: "4967ed5"
|
||||||
resolved-ref: "361b99c38370abeeb19656f89e8c31cb3666623b"
|
resolved-ref: "4967ed57d9190948c08f868972c0babfdc470ba7"
|
||||||
url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
|
url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
|
||||||
source: git
|
source: git
|
||||||
version: "5.1.0"
|
version: "5.1.0"
|
||||||
|
|||||||
@ -185,7 +185,7 @@ dependency_overrides:
|
|||||||
appflowy_editor:
|
appflowy_editor:
|
||||||
git:
|
git:
|
||||||
url: https://github.com/AppFlowy-IO/appflowy-editor.git
|
url: https://github.com/AppFlowy-IO/appflowy-editor.git
|
||||||
ref: '361b99c38370abeeb19656f89e8c31cb3666623b'
|
ref: '4967ed5'
|
||||||
|
|
||||||
appflowy_editor_plugins:
|
appflowy_editor_plugins:
|
||||||
git:
|
git:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user