mirror of
https://github.com/KevinMidboe/immich.git
synced 2025-10-29 17:40:28 +00:00
(fix)mobile: Improve the gallery to improve scale, double tap, and swipe gesture detection (#1502)
* photoviewgallery * stiffer scrolling to react more like google photos * adds a dx threshhold for the swipe/up down from the original dropped point * stopped wrapping imageview in gallery viewer to avoid the double photoview issue. breaks imageview page pinch-to-zoom, so i need to fix that for other callers * refactors gallery view to use remoteimage directly and breaks imageviewpage * removed image_viewer_page * adds minscale * adds photo_view to repository * double tap to zoom out with hacked commit * double tapping! * got up and down swipe gestures working * fixed wrong cache and headers in image providers * fixed image quality and added videos back in * local loading asset image fix * precaches images * fixes lint errors * deleted remote_photo_view and more linters * fixes scale * load preview and load original * precache does original / preview as well * refactored image providers to nice functions and added JPEG thumbnail format to remote image thumbnail lookup * moved photo_view to shared/ui/ * three stage loading with webp and fixes some thumbnail fits * fixed local thumbnail * fixed paging in iOS
This commit is contained in:
martyfuhry
GitHub
@@ -0,0 +1,291 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/utils/ignorable_change_notifier.dart';
|
||||
|
||||
/// The interface in which controllers will be implemented.
|
||||
///
|
||||
/// It concerns storing the state ([PhotoViewControllerValue]) and streaming its updates.
|
||||
/// [PhotoViewImageWrapper] will respond to user gestures setting thew fields in the instance of a controller.
|
||||
///
|
||||
/// Any instance of a controller must be disposed after unmount. So if you instantiate a [PhotoViewController] or your custom implementation, do not forget to dispose it when not using it anymore.
|
||||
///
|
||||
/// The controller exposes value fields like [scale] or [rotationFocus]. Usually those fields will be only getters and setters serving as hooks to the internal [PhotoViewControllerValue].
|
||||
///
|
||||
/// The default implementation used by [PhotoView] is [PhotoViewController].
|
||||
///
|
||||
/// This was created to allow customization (you can create your own controller class)
|
||||
///
|
||||
/// Previously it controlled `scaleState` as well, but duw to some [concerns](https://github.com/renancaraujo/photo_view/issues/127)
|
||||
/// [ScaleStateListener is responsible for tat value now
|
||||
///
|
||||
/// As it is a controller, whoever instantiates it, should [dispose] it afterwards.
|
||||
///
|
||||
abstract class PhotoViewControllerBase<T extends PhotoViewControllerValue> {
|
||||
/// The output for state/value updates. Usually a broadcast [Stream]
|
||||
Stream<T> get outputStateStream;
|
||||
|
||||
/// The state value before the last change or the initial state if the state has not been changed.
|
||||
late T prevValue;
|
||||
|
||||
/// The actual state value
|
||||
late T value;
|
||||
|
||||
/// Resets the state to the initial value;
|
||||
void reset();
|
||||
|
||||
/// Closes streams and removes eventual listeners.
|
||||
void dispose();
|
||||
|
||||
/// Add a listener that will ignore updates made internally
|
||||
///
|
||||
/// Since it is made for internal use, it is not performatic to use more than one
|
||||
/// listener. Prefer [outputStateStream]
|
||||
void addIgnorableListener(VoidCallback callback);
|
||||
|
||||
/// Remove a listener that will ignore updates made internally
|
||||
///
|
||||
/// Since it is made for internal use, it is not performatic to use more than one
|
||||
/// listener. Prefer [outputStateStream]
|
||||
void removeIgnorableListener(VoidCallback callback);
|
||||
|
||||
/// The position of the image in the screen given its offset after pan gestures.
|
||||
late Offset position;
|
||||
|
||||
/// The scale factor to transform the child (image or a customChild).
|
||||
late double? scale;
|
||||
|
||||
/// Nevermind this method :D, look away
|
||||
void setScaleInvisibly(double? scale);
|
||||
|
||||
/// The rotation factor to transform the child (image or a customChild).
|
||||
late double rotation;
|
||||
|
||||
/// The center of the rotation transformation. It is a coordinate referring to the absolute dimensions of the image.
|
||||
Offset? rotationFocusPoint;
|
||||
|
||||
/// Update multiple fields of the state with only one update streamed.
|
||||
void updateMultiple({
|
||||
Offset? position,
|
||||
double? scale,
|
||||
double? rotation,
|
||||
Offset? rotationFocusPoint,
|
||||
});
|
||||
}
|
||||
|
||||
/// The state value stored and streamed by [PhotoViewController].
|
||||
@immutable
|
||||
class PhotoViewControllerValue {
|
||||
const PhotoViewControllerValue({
|
||||
required this.position,
|
||||
required this.scale,
|
||||
required this.rotation,
|
||||
required this.rotationFocusPoint,
|
||||
});
|
||||
|
||||
final Offset position;
|
||||
final double? scale;
|
||||
final double rotation;
|
||||
final Offset? rotationFocusPoint;
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
identical(this, other) ||
|
||||
other is PhotoViewControllerValue &&
|
||||
runtimeType == other.runtimeType &&
|
||||
position == other.position &&
|
||||
scale == other.scale &&
|
||||
rotation == other.rotation &&
|
||||
rotationFocusPoint == other.rotationFocusPoint;
|
||||
|
||||
@override
|
||||
int get hashCode =>
|
||||
position.hashCode ^
|
||||
scale.hashCode ^
|
||||
rotation.hashCode ^
|
||||
rotationFocusPoint.hashCode;
|
||||
|
||||
@override
|
||||
String toString() {
|
||||
return 'PhotoViewControllerValue{position: $position, scale: $scale, rotation: $rotation, rotationFocusPoint: $rotationFocusPoint}';
|
||||
}
|
||||
}
|
||||
|
||||
/// The default implementation of [PhotoViewControllerBase].
|
||||
///
|
||||
/// Containing a [ValueNotifier] it stores the state in the [value] field and streams
|
||||
/// updates via [outputStateStream].
|
||||
///
|
||||
/// For details of fields and methods, check [PhotoViewControllerBase].
|
||||
///
|
||||
class PhotoViewController
|
||||
implements PhotoViewControllerBase<PhotoViewControllerValue> {
|
||||
PhotoViewController({
|
||||
Offset initialPosition = Offset.zero,
|
||||
double initialRotation = 0.0,
|
||||
double? initialScale,
|
||||
}) : _valueNotifier = IgnorableValueNotifier(
|
||||
PhotoViewControllerValue(
|
||||
position: initialPosition,
|
||||
rotation: initialRotation,
|
||||
scale: initialScale,
|
||||
rotationFocusPoint: null,
|
||||
),
|
||||
),
|
||||
super() {
|
||||
initial = value;
|
||||
prevValue = initial;
|
||||
|
||||
_valueNotifier.addListener(_changeListener);
|
||||
_outputCtrl = StreamController<PhotoViewControllerValue>.broadcast();
|
||||
_outputCtrl.sink.add(initial);
|
||||
}
|
||||
|
||||
final IgnorableValueNotifier<PhotoViewControllerValue> _valueNotifier;
|
||||
|
||||
late PhotoViewControllerValue initial;
|
||||
|
||||
late StreamController<PhotoViewControllerValue> _outputCtrl;
|
||||
|
||||
@override
|
||||
Stream<PhotoViewControllerValue> get outputStateStream => _outputCtrl.stream;
|
||||
|
||||
@override
|
||||
late PhotoViewControllerValue prevValue;
|
||||
|
||||
@override
|
||||
void reset() {
|
||||
value = initial;
|
||||
}
|
||||
|
||||
void _changeListener() {
|
||||
_outputCtrl.sink.add(value);
|
||||
}
|
||||
|
||||
@override
|
||||
void addIgnorableListener(VoidCallback callback) {
|
||||
_valueNotifier.addIgnorableListener(callback);
|
||||
}
|
||||
|
||||
@override
|
||||
void removeIgnorableListener(VoidCallback callback) {
|
||||
_valueNotifier.removeIgnorableListener(callback);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_outputCtrl.close();
|
||||
_valueNotifier.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
set position(Offset position) {
|
||||
if (value.position == position) {
|
||||
return;
|
||||
}
|
||||
prevValue = value;
|
||||
value = PhotoViewControllerValue(
|
||||
position: position,
|
||||
scale: scale,
|
||||
rotation: rotation,
|
||||
rotationFocusPoint: rotationFocusPoint,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Offset get position => value.position;
|
||||
|
||||
@override
|
||||
set scale(double? scale) {
|
||||
if (value.scale == scale) {
|
||||
return;
|
||||
}
|
||||
prevValue = value;
|
||||
value = PhotoViewControllerValue(
|
||||
position: position,
|
||||
scale: scale,
|
||||
rotation: rotation,
|
||||
rotationFocusPoint: rotationFocusPoint,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
double? get scale => value.scale;
|
||||
|
||||
@override
|
||||
void setScaleInvisibly(double? scale) {
|
||||
if (value.scale == scale) {
|
||||
return;
|
||||
}
|
||||
prevValue = value;
|
||||
_valueNotifier.updateIgnoring(
|
||||
PhotoViewControllerValue(
|
||||
position: position,
|
||||
scale: scale,
|
||||
rotation: rotation,
|
||||
rotationFocusPoint: rotationFocusPoint,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
set rotation(double rotation) {
|
||||
if (value.rotation == rotation) {
|
||||
return;
|
||||
}
|
||||
prevValue = value;
|
||||
value = PhotoViewControllerValue(
|
||||
position: position,
|
||||
scale: scale,
|
||||
rotation: rotation,
|
||||
rotationFocusPoint: rotationFocusPoint,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
double get rotation => value.rotation;
|
||||
|
||||
@override
|
||||
set rotationFocusPoint(Offset? rotationFocusPoint) {
|
||||
if (value.rotationFocusPoint == rotationFocusPoint) {
|
||||
return;
|
||||
}
|
||||
prevValue = value;
|
||||
value = PhotoViewControllerValue(
|
||||
position: position,
|
||||
scale: scale,
|
||||
rotation: rotation,
|
||||
rotationFocusPoint: rotationFocusPoint,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Offset? get rotationFocusPoint => value.rotationFocusPoint;
|
||||
|
||||
@override
|
||||
void updateMultiple({
|
||||
Offset? position,
|
||||
double? scale,
|
||||
double? rotation,
|
||||
Offset? rotationFocusPoint,
|
||||
}) {
|
||||
prevValue = value;
|
||||
value = PhotoViewControllerValue(
|
||||
position: position ?? value.position,
|
||||
scale: scale ?? value.scale,
|
||||
rotation: rotation ?? value.rotation,
|
||||
rotationFocusPoint: rotationFocusPoint ?? value.rotationFocusPoint,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
PhotoViewControllerValue get value => _valueNotifier.value;
|
||||
|
||||
@override
|
||||
set value(PhotoViewControllerValue newValue) {
|
||||
if (_valueNotifier.value == newValue) {
|
||||
return;
|
||||
}
|
||||
_valueNotifier.value = newValue;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/photo_view.dart'
|
||||
show
|
||||
PhotoViewControllerBase,
|
||||
PhotoViewScaleState,
|
||||
PhotoViewScaleStateController,
|
||||
ScaleStateCycle;
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/core/photo_view_core.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/utils/photo_view_utils.dart';
|
||||
|
||||
/// A class to hold internal layout logic to sync both controller states
|
||||
///
|
||||
/// It reacts to layout changes (eg: enter landscape or widget resize) and syncs the two controllers.
|
||||
mixin PhotoViewControllerDelegate on State<PhotoViewCore> {
|
||||
PhotoViewControllerBase get controller => widget.controller;
|
||||
|
||||
PhotoViewScaleStateController get scaleStateController =>
|
||||
widget.scaleStateController;
|
||||
|
||||
ScaleBoundaries get scaleBoundaries => widget.scaleBoundaries;
|
||||
|
||||
ScaleStateCycle get scaleStateCycle => widget.scaleStateCycle;
|
||||
|
||||
Alignment get basePosition => widget.basePosition;
|
||||
Function(double prevScale, double nextScale)? _animateScale;
|
||||
|
||||
/// Mark if scale need recalculation, useful for scale boundaries changes.
|
||||
bool markNeedsScaleRecalc = true;
|
||||
|
||||
void initDelegate() {
|
||||
controller.addIgnorableListener(_blindScaleListener);
|
||||
scaleStateController.addIgnorableListener(_blindScaleStateListener);
|
||||
}
|
||||
|
||||
void _blindScaleStateListener() {
|
||||
if (!scaleStateController.hasChanged) {
|
||||
return;
|
||||
}
|
||||
if (_animateScale == null || scaleStateController.isZooming) {
|
||||
controller.setScaleInvisibly(scale);
|
||||
return;
|
||||
}
|
||||
final double prevScale = controller.scale ??
|
||||
getScaleForScaleState(
|
||||
scaleStateController.prevScaleState,
|
||||
scaleBoundaries,
|
||||
);
|
||||
|
||||
final double nextScale = getScaleForScaleState(
|
||||
scaleStateController.scaleState,
|
||||
scaleBoundaries,
|
||||
);
|
||||
|
||||
_animateScale!(prevScale, nextScale);
|
||||
}
|
||||
|
||||
void addAnimateOnScaleStateUpdate(
|
||||
void Function(double prevScale, double nextScale) animateScale,
|
||||
) {
|
||||
_animateScale = animateScale;
|
||||
}
|
||||
|
||||
void _blindScaleListener() {
|
||||
if (!widget.enablePanAlways) {
|
||||
controller.position = clampPosition();
|
||||
}
|
||||
if (controller.scale == controller.prevValue.scale) {
|
||||
return;
|
||||
}
|
||||
final PhotoViewScaleState newScaleState =
|
||||
(scale > scaleBoundaries.initialScale)
|
||||
? PhotoViewScaleState.zoomedIn
|
||||
: PhotoViewScaleState.zoomedOut;
|
||||
|
||||
scaleStateController.setInvisibly(newScaleState);
|
||||
}
|
||||
|
||||
Offset get position => controller.position;
|
||||
|
||||
double get scale {
|
||||
// for figuring out initial scale
|
||||
final needsRecalc = markNeedsScaleRecalc &&
|
||||
!scaleStateController.scaleState.isScaleStateZooming;
|
||||
|
||||
final scaleExistsOnController = controller.scale != null;
|
||||
if (needsRecalc || !scaleExistsOnController) {
|
||||
final newScale = getScaleForScaleState(
|
||||
scaleStateController.scaleState,
|
||||
scaleBoundaries,
|
||||
);
|
||||
markNeedsScaleRecalc = false;
|
||||
scale = newScale;
|
||||
return newScale;
|
||||
}
|
||||
return controller.scale!;
|
||||
}
|
||||
|
||||
set scale(double scale) => controller.setScaleInvisibly(scale);
|
||||
|
||||
void updateMultiple({
|
||||
Offset? position,
|
||||
double? scale,
|
||||
double? rotation,
|
||||
Offset? rotationFocusPoint,
|
||||
}) {
|
||||
controller.updateMultiple(
|
||||
position: position,
|
||||
scale: scale,
|
||||
rotation: rotation,
|
||||
rotationFocusPoint: rotationFocusPoint,
|
||||
);
|
||||
}
|
||||
|
||||
void updateScaleStateFromNewScale(double newScale) {
|
||||
PhotoViewScaleState newScaleState = PhotoViewScaleState.initial;
|
||||
if (scale != scaleBoundaries.initialScale) {
|
||||
newScaleState = (newScale > scaleBoundaries.initialScale)
|
||||
? PhotoViewScaleState.zoomedIn
|
||||
: PhotoViewScaleState.zoomedOut;
|
||||
}
|
||||
scaleStateController.setInvisibly(newScaleState);
|
||||
}
|
||||
|
||||
void nextScaleState() {
|
||||
final PhotoViewScaleState scaleState = scaleStateController.scaleState;
|
||||
if (scaleState == PhotoViewScaleState.zoomedIn ||
|
||||
scaleState == PhotoViewScaleState.zoomedOut) {
|
||||
scaleStateController.scaleState = scaleStateCycle(scaleState);
|
||||
return;
|
||||
}
|
||||
final double originalScale = getScaleForScaleState(
|
||||
scaleState,
|
||||
scaleBoundaries,
|
||||
);
|
||||
|
||||
double prevScale = originalScale;
|
||||
PhotoViewScaleState prevScaleState = scaleState;
|
||||
double nextScale = originalScale;
|
||||
PhotoViewScaleState nextScaleState = scaleState;
|
||||
|
||||
do {
|
||||
prevScale = nextScale;
|
||||
prevScaleState = nextScaleState;
|
||||
nextScaleState = scaleStateCycle(prevScaleState);
|
||||
nextScale = getScaleForScaleState(nextScaleState, scaleBoundaries);
|
||||
} while (prevScale == nextScale && scaleState != nextScaleState);
|
||||
|
||||
if (originalScale == nextScale) {
|
||||
return;
|
||||
}
|
||||
scaleStateController.scaleState = nextScaleState;
|
||||
}
|
||||
|
||||
CornersRange cornersX({double? scale}) {
|
||||
final double s = scale ?? this.scale;
|
||||
|
||||
final double computedWidth = scaleBoundaries.childSize.width * s;
|
||||
final double screenWidth = scaleBoundaries.outerSize.width;
|
||||
|
||||
final double positionX = basePosition.x;
|
||||
final double widthDiff = computedWidth - screenWidth;
|
||||
|
||||
final double minX = ((positionX - 1).abs() / 2) * widthDiff * -1;
|
||||
final double maxX = ((positionX + 1).abs() / 2) * widthDiff;
|
||||
return CornersRange(minX, maxX);
|
||||
}
|
||||
|
||||
CornersRange cornersY({double? scale}) {
|
||||
final double s = scale ?? this.scale;
|
||||
|
||||
final double computedHeight = scaleBoundaries.childSize.height * s;
|
||||
final double screenHeight = scaleBoundaries.outerSize.height;
|
||||
|
||||
final double positionY = basePosition.y;
|
||||
final double heightDiff = computedHeight - screenHeight;
|
||||
|
||||
final double minY = ((positionY - 1).abs() / 2) * heightDiff * -1;
|
||||
final double maxY = ((positionY + 1).abs() / 2) * heightDiff;
|
||||
return CornersRange(minY, maxY);
|
||||
}
|
||||
|
||||
Offset clampPosition({Offset? position, double? scale}) {
|
||||
final double s = scale ?? this.scale;
|
||||
final Offset p = position ?? this.position;
|
||||
|
||||
final double computedWidth = scaleBoundaries.childSize.width * s;
|
||||
final double computedHeight = scaleBoundaries.childSize.height * s;
|
||||
|
||||
final double screenWidth = scaleBoundaries.outerSize.width;
|
||||
final double screenHeight = scaleBoundaries.outerSize.height;
|
||||
|
||||
double finalX = 0.0;
|
||||
if (screenWidth < computedWidth) {
|
||||
final cornersX = this.cornersX(scale: s);
|
||||
finalX = p.dx.clamp(cornersX.min, cornersX.max);
|
||||
}
|
||||
|
||||
double finalY = 0.0;
|
||||
if (screenHeight < computedHeight) {
|
||||
final cornersY = this.cornersY(scale: s);
|
||||
finalY = p.dy.clamp(cornersY.min, cornersY.max);
|
||||
}
|
||||
|
||||
return Offset(finalX, finalY);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animateScale = null;
|
||||
controller.removeIgnorableListener(_blindScaleListener);
|
||||
scaleStateController.removeIgnorableListener(_blindScaleStateListener);
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import 'dart:async';
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/widgets.dart' show VoidCallback;
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/photo_view_scale_state.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/utils/ignorable_change_notifier.dart';
|
||||
|
||||
typedef ScaleStateListener = void Function(double prevScale, double nextScale);
|
||||
|
||||
/// A controller responsible only by [scaleState].
|
||||
///
|
||||
/// Scale state is a common value with represents the step in which the [PhotoView.scaleStateCycle] is.
|
||||
/// This cycle is triggered by the "doubleTap" gesture.
|
||||
///
|
||||
/// Any change in its [scaleState] should animate the scale of image/content.
|
||||
///
|
||||
/// As it is a controller, whoever instantiates it, should [dispose] it afterwards.
|
||||
///
|
||||
/// The updates should be done via [scaleState] setter and the updated listened via [outputScaleStateStream]
|
||||
///
|
||||
class PhotoViewScaleStateController {
|
||||
late final IgnorableValueNotifier<PhotoViewScaleState> _scaleStateNotifier =
|
||||
IgnorableValueNotifier(PhotoViewScaleState.initial)
|
||||
..addListener(_scaleStateChangeListener);
|
||||
final StreamController<PhotoViewScaleState> _outputScaleStateCtrl =
|
||||
StreamController<PhotoViewScaleState>.broadcast()
|
||||
..sink.add(PhotoViewScaleState.initial);
|
||||
|
||||
/// The output for state/value updates
|
||||
Stream<PhotoViewScaleState> get outputScaleStateStream =>
|
||||
_outputScaleStateCtrl.stream;
|
||||
|
||||
/// The state value before the last change or the initial state if the state has not been changed.
|
||||
PhotoViewScaleState prevScaleState = PhotoViewScaleState.initial;
|
||||
|
||||
/// The actual state value
|
||||
PhotoViewScaleState get scaleState => _scaleStateNotifier.value;
|
||||
|
||||
/// Updates scaleState and notify all listeners (and the stream)
|
||||
set scaleState(PhotoViewScaleState newValue) {
|
||||
if (_scaleStateNotifier.value == newValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
prevScaleState = _scaleStateNotifier.value;
|
||||
_scaleStateNotifier.value = newValue;
|
||||
}
|
||||
|
||||
/// Checks if its actual value is different than previousValue
|
||||
bool get hasChanged => prevScaleState != scaleState;
|
||||
|
||||
/// Check if is `zoomedIn` & `zoomedOut`
|
||||
bool get isZooming =>
|
||||
scaleState == PhotoViewScaleState.zoomedIn ||
|
||||
scaleState == PhotoViewScaleState.zoomedOut;
|
||||
|
||||
/// Resets the state to the initial value;
|
||||
void reset() {
|
||||
prevScaleState = scaleState;
|
||||
scaleState = PhotoViewScaleState.initial;
|
||||
}
|
||||
|
||||
/// Closes streams and removes eventual listeners
|
||||
void dispose() {
|
||||
_outputScaleStateCtrl.close();
|
||||
_scaleStateNotifier.dispose();
|
||||
}
|
||||
|
||||
/// Nevermind this method :D, look away
|
||||
/// Seriously: It is used to change scale state without trigging updates on the []
|
||||
void setInvisibly(PhotoViewScaleState newValue) {
|
||||
if (_scaleStateNotifier.value == newValue) {
|
||||
return;
|
||||
}
|
||||
prevScaleState = _scaleStateNotifier.value;
|
||||
_scaleStateNotifier.updateIgnoring(newValue);
|
||||
}
|
||||
|
||||
void _scaleStateChangeListener() {
|
||||
_outputScaleStateCtrl.sink.add(scaleState);
|
||||
}
|
||||
|
||||
/// Add a listener that will ignore updates made internally
|
||||
///
|
||||
/// Since it is made for internal use, it is not performatic to use more than one
|
||||
/// listener. Prefer [outputScaleStateStream]
|
||||
void addIgnorableListener(VoidCallback callback) {
|
||||
_scaleStateNotifier.addIgnorableListener(callback);
|
||||
}
|
||||
|
||||
/// Remove a listener that will ignore updates made internally
|
||||
///
|
||||
/// Since it is made for internal use, it is not performatic to use more than one
|
||||
/// listener. Prefer [outputScaleStateStream]
|
||||
void removeIgnorableListener(VoidCallback callback) {
|
||||
_scaleStateNotifier.removeIgnorableListener(callback);
|
||||
}
|
||||
}
|
||||
461
mobile/lib/shared/ui/photo_view/src/core/photo_view_core.dart
Normal file
461
mobile/lib/shared/ui/photo_view/src/core/photo_view_core.dart
Normal file
@@ -0,0 +1,461 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/photo_view.dart'
|
||||
show
|
||||
PhotoViewScaleState,
|
||||
PhotoViewHeroAttributes,
|
||||
PhotoViewImageTapDownCallback,
|
||||
PhotoViewImageTapUpCallback,
|
||||
PhotoViewImageScaleEndCallback,
|
||||
PhotoViewImageDragEndCallback,
|
||||
PhotoViewImageDragStartCallback,
|
||||
PhotoViewImageDragUpdateCallback,
|
||||
ScaleStateCycle;
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/controller/photo_view_controller.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/controller/photo_view_controller_delegate.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/controller/photo_view_scalestate_controller.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/core/photo_view_gesture_detector.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/core/photo_view_hit_corners.dart';
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/utils/photo_view_utils.dart';
|
||||
|
||||
const _defaultDecoration = BoxDecoration(
|
||||
color: Color.fromRGBO(0, 0, 0, 1.0),
|
||||
);
|
||||
|
||||
/// Internal widget in which controls all animations lifecycle, core responses
|
||||
/// to user gestures, updates to the controller state and mounts the entire PhotoView Layout
|
||||
class PhotoViewCore extends StatefulWidget {
|
||||
const PhotoViewCore({
|
||||
Key? key,
|
||||
required this.imageProvider,
|
||||
required this.backgroundDecoration,
|
||||
required this.gaplessPlayback,
|
||||
required this.heroAttributes,
|
||||
required this.enableRotation,
|
||||
required this.onTapUp,
|
||||
required this.onTapDown,
|
||||
required this.onDragStart,
|
||||
required this.onDragEnd,
|
||||
required this.onDragUpdate,
|
||||
required this.onScaleEnd,
|
||||
required this.gestureDetectorBehavior,
|
||||
required this.controller,
|
||||
required this.scaleBoundaries,
|
||||
required this.scaleStateCycle,
|
||||
required this.scaleStateController,
|
||||
required this.basePosition,
|
||||
required this.tightMode,
|
||||
required this.filterQuality,
|
||||
required this.disableGestures,
|
||||
required this.enablePanAlways,
|
||||
}) : customChild = null,
|
||||
super(key: key);
|
||||
|
||||
const PhotoViewCore.customChild({
|
||||
Key? key,
|
||||
required this.customChild,
|
||||
required this.backgroundDecoration,
|
||||
this.heroAttributes,
|
||||
required this.enableRotation,
|
||||
this.onTapUp,
|
||||
this.onTapDown,
|
||||
this.onDragStart,
|
||||
this.onDragEnd,
|
||||
this.onDragUpdate,
|
||||
this.onScaleEnd,
|
||||
this.gestureDetectorBehavior,
|
||||
required this.controller,
|
||||
required this.scaleBoundaries,
|
||||
required this.scaleStateCycle,
|
||||
required this.scaleStateController,
|
||||
required this.basePosition,
|
||||
required this.tightMode,
|
||||
required this.filterQuality,
|
||||
required this.disableGestures,
|
||||
required this.enablePanAlways,
|
||||
}) : imageProvider = null,
|
||||
gaplessPlayback = false,
|
||||
super(key: key);
|
||||
|
||||
final Decoration? backgroundDecoration;
|
||||
final ImageProvider? imageProvider;
|
||||
final bool? gaplessPlayback;
|
||||
final PhotoViewHeroAttributes? heroAttributes;
|
||||
final bool enableRotation;
|
||||
final Widget? customChild;
|
||||
|
||||
final PhotoViewControllerBase controller;
|
||||
final PhotoViewScaleStateController scaleStateController;
|
||||
final ScaleBoundaries scaleBoundaries;
|
||||
final ScaleStateCycle scaleStateCycle;
|
||||
final Alignment basePosition;
|
||||
|
||||
final PhotoViewImageTapUpCallback? onTapUp;
|
||||
final PhotoViewImageTapDownCallback? onTapDown;
|
||||
final PhotoViewImageScaleEndCallback? onScaleEnd;
|
||||
|
||||
final PhotoViewImageDragStartCallback? onDragStart;
|
||||
final PhotoViewImageDragEndCallback? onDragEnd;
|
||||
final PhotoViewImageDragUpdateCallback? onDragUpdate;
|
||||
|
||||
final HitTestBehavior? gestureDetectorBehavior;
|
||||
final bool tightMode;
|
||||
final bool disableGestures;
|
||||
final bool enablePanAlways;
|
||||
|
||||
final FilterQuality filterQuality;
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return PhotoViewCoreState();
|
||||
}
|
||||
|
||||
bool get hasCustomChild => customChild != null;
|
||||
}
|
||||
|
||||
class PhotoViewCoreState extends State<PhotoViewCore>
|
||||
with
|
||||
TickerProviderStateMixin,
|
||||
PhotoViewControllerDelegate,
|
||||
HitCornersDetector {
|
||||
Offset? _normalizedPosition;
|
||||
double? _scaleBefore;
|
||||
double? _rotationBefore;
|
||||
|
||||
late final AnimationController _scaleAnimationController;
|
||||
Animation<double>? _scaleAnimation;
|
||||
|
||||
late final AnimationController _positionAnimationController;
|
||||
Animation<Offset>? _positionAnimation;
|
||||
|
||||
late final AnimationController _rotationAnimationController =
|
||||
AnimationController(vsync: this)..addListener(handleRotationAnimation);
|
||||
Animation<double>? _rotationAnimation;
|
||||
|
||||
PhotoViewHeroAttributes? get heroAttributes => widget.heroAttributes;
|
||||
|
||||
late ScaleBoundaries cachedScaleBoundaries = widget.scaleBoundaries;
|
||||
|
||||
void handleScaleAnimation() {
|
||||
scale = _scaleAnimation!.value;
|
||||
}
|
||||
|
||||
void handlePositionAnimate() {
|
||||
controller.position = _positionAnimation!.value;
|
||||
}
|
||||
|
||||
void handleRotationAnimation() {
|
||||
controller.rotation = _rotationAnimation!.value;
|
||||
}
|
||||
|
||||
void onScaleStart(ScaleStartDetails details) {
|
||||
_rotationBefore = controller.rotation;
|
||||
_scaleBefore = scale;
|
||||
_normalizedPosition = details.focalPoint - controller.position;
|
||||
_scaleAnimationController.stop();
|
||||
_positionAnimationController.stop();
|
||||
_rotationAnimationController.stop();
|
||||
}
|
||||
|
||||
void onScaleUpdate(ScaleUpdateDetails details) {
|
||||
final double newScale = _scaleBefore! * details.scale;
|
||||
final Offset delta = details.focalPoint - _normalizedPosition!;
|
||||
|
||||
updateScaleStateFromNewScale(newScale);
|
||||
|
||||
updateMultiple(
|
||||
scale: newScale,
|
||||
position: widget.enablePanAlways
|
||||
? delta
|
||||
: clampPosition(position: delta * details.scale),
|
||||
rotation:
|
||||
widget.enableRotation ? _rotationBefore! + details.rotation : null,
|
||||
rotationFocusPoint: widget.enableRotation ? details.focalPoint : null,
|
||||
);
|
||||
}
|
||||
|
||||
void onScaleEnd(ScaleEndDetails details) {
|
||||
final double s = scale;
|
||||
final Offset p = controller.position;
|
||||
final double maxScale = scaleBoundaries.maxScale;
|
||||
final double minScale = scaleBoundaries.minScale;
|
||||
|
||||
widget.onScaleEnd?.call(context, details, controller.value);
|
||||
|
||||
//animate back to maxScale if gesture exceeded the maxScale specified
|
||||
if (s > maxScale) {
|
||||
final double scaleComebackRatio = maxScale / s;
|
||||
animateScale(s, maxScale);
|
||||
final Offset clampedPosition = clampPosition(
|
||||
position: p * scaleComebackRatio,
|
||||
scale: maxScale,
|
||||
);
|
||||
animatePosition(p, clampedPosition);
|
||||
return;
|
||||
}
|
||||
|
||||
//animate back to minScale if gesture fell smaller than the minScale specified
|
||||
if (s < minScale) {
|
||||
final double scaleComebackRatio = minScale / s;
|
||||
animateScale(s, minScale);
|
||||
animatePosition(
|
||||
p,
|
||||
clampPosition(
|
||||
position: p * scaleComebackRatio,
|
||||
scale: minScale,
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
// get magnitude from gesture velocity
|
||||
final double magnitude = details.velocity.pixelsPerSecond.distance;
|
||||
|
||||
// animate velocity only if there is no scale change and a significant magnitude
|
||||
if (_scaleBefore! / s == 1.0 && magnitude >= 400.0) {
|
||||
final Offset direction = details.velocity.pixelsPerSecond / magnitude;
|
||||
animatePosition(
|
||||
p,
|
||||
clampPosition(position: p + direction * 100.0),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void onDoubleTap() {
|
||||
nextScaleState();
|
||||
}
|
||||
|
||||
void animateScale(double from, double to) {
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: from,
|
||||
end: to,
|
||||
).animate(_scaleAnimationController);
|
||||
_scaleAnimationController
|
||||
..value = 0.0
|
||||
..fling(velocity: 0.4);
|
||||
}
|
||||
|
||||
void animatePosition(Offset from, Offset to) {
|
||||
_positionAnimation = Tween<Offset>(begin: from, end: to)
|
||||
.animate(_positionAnimationController);
|
||||
_positionAnimationController
|
||||
..value = 0.0
|
||||
..fling(velocity: 0.4);
|
||||
}
|
||||
|
||||
void animateRotation(double from, double to) {
|
||||
_rotationAnimation = Tween<double>(begin: from, end: to)
|
||||
.animate(_rotationAnimationController);
|
||||
_rotationAnimationController
|
||||
..value = 0.0
|
||||
..fling(velocity: 0.4);
|
||||
}
|
||||
|
||||
void onAnimationStatus(AnimationStatus status) {
|
||||
if (status == AnimationStatus.completed) {
|
||||
onAnimationStatusCompleted();
|
||||
}
|
||||
}
|
||||
|
||||
/// Check if scale is equal to initial after scale animation update
|
||||
void onAnimationStatusCompleted() {
|
||||
if (scaleStateController.scaleState != PhotoViewScaleState.initial &&
|
||||
scale == scaleBoundaries.initialScale) {
|
||||
scaleStateController.setInvisibly(PhotoViewScaleState.initial);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
initDelegate();
|
||||
addAnimateOnScaleStateUpdate(animateOnScaleStateUpdate);
|
||||
|
||||
cachedScaleBoundaries = widget.scaleBoundaries;
|
||||
|
||||
_scaleAnimationController = AnimationController(vsync: this)
|
||||
..addListener(handleScaleAnimation)
|
||||
..addStatusListener(onAnimationStatus);
|
||||
_positionAnimationController = AnimationController(vsync: this)
|
||||
..addListener(handlePositionAnimate);
|
||||
}
|
||||
|
||||
void animateOnScaleStateUpdate(double prevScale, double nextScale) {
|
||||
animateScale(prevScale, nextScale);
|
||||
animatePosition(controller.position, Offset.zero);
|
||||
animateRotation(controller.rotation, 0.0);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_scaleAnimationController.removeStatusListener(onAnimationStatus);
|
||||
_scaleAnimationController.dispose();
|
||||
_positionAnimationController.dispose();
|
||||
_rotationAnimationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void onTapUp(TapUpDetails details) {
|
||||
widget.onTapUp?.call(context, details, controller.value);
|
||||
}
|
||||
|
||||
void onTapDown(TapDownDetails details) {
|
||||
widget.onTapDown?.call(context, details, controller.value);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Check if we need a recalc on the scale
|
||||
if (widget.scaleBoundaries != cachedScaleBoundaries) {
|
||||
markNeedsScaleRecalc = true;
|
||||
cachedScaleBoundaries = widget.scaleBoundaries;
|
||||
}
|
||||
|
||||
return StreamBuilder(
|
||||
stream: controller.outputStateStream,
|
||||
initialData: controller.prevValue,
|
||||
builder: (
|
||||
BuildContext context,
|
||||
AsyncSnapshot<PhotoViewControllerValue> snapshot,
|
||||
) {
|
||||
if (snapshot.hasData) {
|
||||
final PhotoViewControllerValue value = snapshot.data!;
|
||||
final useImageScale = widget.filterQuality != FilterQuality.none;
|
||||
|
||||
final computedScale = useImageScale ? 1.0 : scale;
|
||||
|
||||
final matrix = Matrix4.identity()
|
||||
..translate(value.position.dx, value.position.dy)
|
||||
..scale(computedScale)
|
||||
..rotateZ(value.rotation);
|
||||
|
||||
final Widget customChildLayout = CustomSingleChildLayout(
|
||||
delegate: _CenterWithOriginalSizeDelegate(
|
||||
scaleBoundaries.childSize,
|
||||
basePosition,
|
||||
useImageScale,
|
||||
),
|
||||
child: _buildHero(),
|
||||
);
|
||||
|
||||
final child = Container(
|
||||
constraints: widget.tightMode
|
||||
? BoxConstraints.tight(scaleBoundaries.childSize * scale)
|
||||
: null,
|
||||
decoration: widget.backgroundDecoration ?? _defaultDecoration,
|
||||
child: Center(
|
||||
child: Transform(
|
||||
transform: matrix,
|
||||
alignment: basePosition,
|
||||
child: customChildLayout,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (widget.disableGestures) {
|
||||
return child;
|
||||
}
|
||||
|
||||
return PhotoViewGestureDetector(
|
||||
onDoubleTap: nextScaleState,
|
||||
onScaleStart: onScaleStart,
|
||||
onScaleUpdate: onScaleUpdate,
|
||||
onScaleEnd: onScaleEnd,
|
||||
onDragStart: widget.onDragStart != null
|
||||
? (details) => widget.onDragStart!(context, details, value)
|
||||
: null,
|
||||
onDragEnd: widget.onDragEnd != null
|
||||
? (details) => widget.onDragEnd!(context, details, value)
|
||||
: null,
|
||||
onDragUpdate: widget.onDragUpdate != null
|
||||
? (details) => widget.onDragUpdate!(context, details, value)
|
||||
: null,
|
||||
hitDetector: this,
|
||||
onTapUp: widget.onTapUp != null
|
||||
? (details) => widget.onTapUp!(context, details, value)
|
||||
: null,
|
||||
onTapDown: widget.onTapDown != null
|
||||
? (details) => widget.onTapDown!(context, details, value)
|
||||
: null,
|
||||
child: child,
|
||||
);
|
||||
} else {
|
||||
return Container();
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHero() {
|
||||
return heroAttributes != null
|
||||
? Hero(
|
||||
tag: heroAttributes!.tag,
|
||||
createRectTween: heroAttributes!.createRectTween,
|
||||
flightShuttleBuilder: heroAttributes!.flightShuttleBuilder,
|
||||
placeholderBuilder: heroAttributes!.placeholderBuilder,
|
||||
transitionOnUserGestures: heroAttributes!.transitionOnUserGestures,
|
||||
child: _buildChild(),
|
||||
)
|
||||
: _buildChild();
|
||||
}
|
||||
|
||||
Widget _buildChild() {
|
||||
return widget.hasCustomChild
|
||||
? widget.customChild!
|
||||
: Image(
|
||||
image: widget.imageProvider!,
|
||||
gaplessPlayback: widget.gaplessPlayback ?? false,
|
||||
filterQuality: widget.filterQuality,
|
||||
width: scaleBoundaries.childSize.width * scale,
|
||||
fit: BoxFit.contain,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CenterWithOriginalSizeDelegate extends SingleChildLayoutDelegate {
|
||||
const _CenterWithOriginalSizeDelegate(
|
||||
this.subjectSize,
|
||||
this.basePosition,
|
||||
this.useImageScale,
|
||||
);
|
||||
|
||||
final Size subjectSize;
|
||||
final Alignment basePosition;
|
||||
final bool useImageScale;
|
||||
|
||||
@override
|
||||
Offset getPositionForChild(Size size, Size childSize) {
|
||||
final childWidth = useImageScale ? childSize.width : subjectSize.width;
|
||||
final childHeight = useImageScale ? childSize.height : subjectSize.height;
|
||||
|
||||
final halfWidth = (size.width - childWidth) / 2;
|
||||
final halfHeight = (size.height - childHeight) / 2;
|
||||
|
||||
final double offsetX = halfWidth * (basePosition.x + 1);
|
||||
final double offsetY = halfHeight * (basePosition.y + 1);
|
||||
return Offset(offsetX, offsetY);
|
||||
}
|
||||
|
||||
@override
|
||||
BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
|
||||
return useImageScale
|
||||
? const BoxConstraints()
|
||||
: BoxConstraints.tight(subjectSize);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRelayout(_CenterWithOriginalSizeDelegate oldDelegate) {
|
||||
return oldDelegate != this;
|
||||
}
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
identical(this, other) ||
|
||||
other is _CenterWithOriginalSizeDelegate &&
|
||||
runtimeType == other.runtimeType &&
|
||||
subjectSize == other.subjectSize &&
|
||||
basePosition == other.basePosition &&
|
||||
useImageScale == other.useImageScale;
|
||||
|
||||
@override
|
||||
int get hashCode =>
|
||||
subjectSize.hashCode ^ basePosition.hashCode ^ useImageScale.hashCode;
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
import 'photo_view_hit_corners.dart';
|
||||
|
||||
/// Credit to [eduribas](https://github.com/eduribas/photo_view/commit/508d9b77dafbcf88045b4a7fee737eed4064ea2c)
|
||||
/// for the gist
|
||||
class PhotoViewGestureDetector extends StatelessWidget {
|
||||
const PhotoViewGestureDetector({
|
||||
Key? key,
|
||||
this.hitDetector,
|
||||
this.onScaleStart,
|
||||
this.onScaleUpdate,
|
||||
this.onScaleEnd,
|
||||
this.onDoubleTap,
|
||||
this.onDragStart,
|
||||
this.onDragEnd,
|
||||
this.onDragUpdate,
|
||||
this.child,
|
||||
this.onTapUp,
|
||||
this.onTapDown,
|
||||
this.behavior,
|
||||
}) : super(key: key);
|
||||
|
||||
final GestureDoubleTapCallback? onDoubleTap;
|
||||
final HitCornersDetector? hitDetector;
|
||||
|
||||
final GestureScaleStartCallback? onScaleStart;
|
||||
final GestureScaleUpdateCallback? onScaleUpdate;
|
||||
final GestureScaleEndCallback? onScaleEnd;
|
||||
|
||||
final GestureDragEndCallback? onDragEnd;
|
||||
final GestureDragStartCallback? onDragStart;
|
||||
final GestureDragUpdateCallback? onDragUpdate;
|
||||
|
||||
final GestureTapUpCallback? onTapUp;
|
||||
final GestureTapDownCallback? onTapDown;
|
||||
|
||||
final Widget? child;
|
||||
|
||||
final HitTestBehavior? behavior;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final scope = PhotoViewGestureDetectorScope.of(context);
|
||||
|
||||
final Axis? axis = scope?.axis;
|
||||
final touchSlopFactor = scope?.touchSlopFactor ?? 2;
|
||||
|
||||
final Map<Type, GestureRecognizerFactory> gestures =
|
||||
<Type, GestureRecognizerFactory>{};
|
||||
|
||||
if (onTapDown != null || onTapUp != null) {
|
||||
gestures[TapGestureRecognizer] =
|
||||
GestureRecognizerFactoryWithHandlers<TapGestureRecognizer>(
|
||||
() => TapGestureRecognizer(debugOwner: this),
|
||||
(TapGestureRecognizer instance) {
|
||||
instance
|
||||
..onTapDown = onTapDown
|
||||
..onTapUp = onTapUp;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
if (onDragStart != null || onDragEnd != null || onDragUpdate != null) {
|
||||
gestures[VerticalDragGestureRecognizer] =
|
||||
GestureRecognizerFactoryWithHandlers<VerticalDragGestureRecognizer>(
|
||||
() => VerticalDragGestureRecognizer(debugOwner: this),
|
||||
(VerticalDragGestureRecognizer instance) {
|
||||
instance
|
||||
..onStart = onDragStart
|
||||
..onUpdate = onDragUpdate
|
||||
..onEnd = onDragEnd;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
gestures[DoubleTapGestureRecognizer] =
|
||||
GestureRecognizerFactoryWithHandlers<DoubleTapGestureRecognizer>(
|
||||
() => DoubleTapGestureRecognizer(debugOwner: this),
|
||||
(DoubleTapGestureRecognizer instance) {
|
||||
instance.onDoubleTap = onDoubleTap;
|
||||
},
|
||||
);
|
||||
|
||||
gestures[PhotoViewGestureRecognizer] =
|
||||
GestureRecognizerFactoryWithHandlers<PhotoViewGestureRecognizer>(
|
||||
() => PhotoViewGestureRecognizer(
|
||||
hitDetector: hitDetector,
|
||||
debugOwner: this,
|
||||
validateAxis: axis,
|
||||
touchSlopFactor: touchSlopFactor,
|
||||
),
|
||||
(PhotoViewGestureRecognizer instance) {
|
||||
instance
|
||||
..onStart = onScaleStart
|
||||
..onUpdate = onScaleUpdate
|
||||
..onEnd = onScaleEnd;
|
||||
},
|
||||
);
|
||||
|
||||
return RawGestureDetector(
|
||||
behavior: behavior,
|
||||
gestures: gestures,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PhotoViewGestureRecognizer extends ScaleGestureRecognizer {
|
||||
PhotoViewGestureRecognizer({
|
||||
this.hitDetector,
|
||||
Object? debugOwner,
|
||||
this.validateAxis,
|
||||
this.touchSlopFactor = 1,
|
||||
PointerDeviceKind? kind,
|
||||
}) : super(debugOwner: debugOwner, supportedDevices: null);
|
||||
final HitCornersDetector? hitDetector;
|
||||
final Axis? validateAxis;
|
||||
final double touchSlopFactor;
|
||||
|
||||
Map<int, Offset> _pointerLocations = <int, Offset>{};
|
||||
|
||||
Offset? _initialFocalPoint;
|
||||
Offset? _currentFocalPoint;
|
||||
double? _initialSpan;
|
||||
double? _currentSpan;
|
||||
|
||||
bool ready = true;
|
||||
|
||||
@override
|
||||
void addAllowedPointer(PointerDownEvent event) {
|
||||
if (ready) {
|
||||
ready = false;
|
||||
_pointerLocations = <int, Offset>{};
|
||||
}
|
||||
super.addAllowedPointer(event);
|
||||
}
|
||||
|
||||
@override
|
||||
void didStopTrackingLastPointer(int pointer) {
|
||||
ready = true;
|
||||
super.didStopTrackingLastPointer(pointer);
|
||||
}
|
||||
|
||||
@override
|
||||
void handleEvent(PointerEvent event) {
|
||||
if (validateAxis != null) {
|
||||
bool didChangeConfiguration = false;
|
||||
if (event is PointerMoveEvent) {
|
||||
if (!event.synthesized) {
|
||||
_pointerLocations[event.pointer] = event.position;
|
||||
}
|
||||
} else if (event is PointerDownEvent) {
|
||||
_pointerLocations[event.pointer] = event.position;
|
||||
didChangeConfiguration = true;
|
||||
} else if (event is PointerUpEvent || event is PointerCancelEvent) {
|
||||
_pointerLocations.remove(event.pointer);
|
||||
didChangeConfiguration = true;
|
||||
}
|
||||
|
||||
_updateDistances();
|
||||
|
||||
if (didChangeConfiguration) {
|
||||
// cf super._reconfigure
|
||||
_initialFocalPoint = _currentFocalPoint;
|
||||
_initialSpan = _currentSpan;
|
||||
}
|
||||
|
||||
_decideIfWeAcceptEvent(event);
|
||||
}
|
||||
super.handleEvent(event);
|
||||
}
|
||||
|
||||
void _updateDistances() {
|
||||
// cf super._update
|
||||
final int count = _pointerLocations.keys.length;
|
||||
|
||||
// Compute the focal point
|
||||
Offset focalPoint = Offset.zero;
|
||||
for (final int pointer in _pointerLocations.keys) {
|
||||
focalPoint += _pointerLocations[pointer]!;
|
||||
}
|
||||
_currentFocalPoint =
|
||||
count > 0 ? focalPoint / count.toDouble() : Offset.zero;
|
||||
|
||||
// Span is the average deviation from focal point. Horizontal and vertical
|
||||
// spans are the average deviations from the focal point's horizontal and
|
||||
// vertical coordinates, respectively.
|
||||
double totalDeviation = 0.0;
|
||||
for (final int pointer in _pointerLocations.keys) {
|
||||
totalDeviation +=
|
||||
(_currentFocalPoint! - _pointerLocations[pointer]!).distance;
|
||||
}
|
||||
_currentSpan = count > 0 ? totalDeviation / count : 0.0;
|
||||
}
|
||||
|
||||
void _decideIfWeAcceptEvent(PointerEvent event) {
|
||||
final move = _initialFocalPoint! - _currentFocalPoint!;
|
||||
final bool shouldMove = validateAxis == Axis.vertical
|
||||
? hitDetector!.shouldMove(move, Axis.vertical)
|
||||
: hitDetector!.shouldMove(move, Axis.horizontal);
|
||||
if (shouldMove || _pointerLocations.keys.length > 1) {
|
||||
final double spanDelta = (_currentSpan! - _initialSpan!).abs();
|
||||
final double focalPointDelta =
|
||||
(_currentFocalPoint! - _initialFocalPoint!).distance;
|
||||
// warning: do not compare `focalPointDelta` to `kPanSlop`
|
||||
// `ScaleGestureRecognizer` uses `kPanSlop`, but `HorizontalDragGestureRecognizer` uses `kTouchSlop`
|
||||
// and PhotoView recognizer may compete with the `HorizontalDragGestureRecognizer` from a containing `PageView`
|
||||
// setting `touchSlopFactor` to 2 restores default `ScaleGestureRecognizer` behaviour as `kPanSlop = kTouchSlop * 2.0`
|
||||
// setting `touchSlopFactor` in [0, 1] will allow this recognizer to accept the gesture before the one from `PageView`
|
||||
if (spanDelta > kScaleSlop ||
|
||||
focalPointDelta > kTouchSlop * touchSlopFactor) {
|
||||
acceptGesture(event.pointer);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// An [InheritedWidget] responsible to give a axis aware scope to [PhotoViewGestureRecognizer].
|
||||
///
|
||||
/// When using this, PhotoView will test if the content zoomed has hit edge every time user pinches,
|
||||
/// if so, it will let parent gesture detectors win the gesture arena
|
||||
///
|
||||
/// Useful when placing PhotoView inside a gesture sensitive context,
|
||||
/// such as [PageView], [Dismissible], [BottomSheet].
|
||||
///
|
||||
/// Usage example:
|
||||
/// ```
|
||||
/// PhotoViewGestureDetectorScope(
|
||||
/// axis: Axis.vertical,
|
||||
/// child: PhotoView(
|
||||
/// imageProvider: AssetImage("assets/pudim.jpg"),
|
||||
/// ),
|
||||
/// );
|
||||
/// ```
|
||||
class PhotoViewGestureDetectorScope extends InheritedWidget {
|
||||
const PhotoViewGestureDetectorScope({
|
||||
super.key,
|
||||
this.axis,
|
||||
this.touchSlopFactor = .2,
|
||||
required Widget child,
|
||||
}) : super(child: child);
|
||||
|
||||
static PhotoViewGestureDetectorScope? of(BuildContext context) {
|
||||
final PhotoViewGestureDetectorScope? scope = context
|
||||
.dependOnInheritedWidgetOfExactType<PhotoViewGestureDetectorScope>();
|
||||
return scope;
|
||||
}
|
||||
|
||||
final Axis? axis;
|
||||
|
||||
// in [0, 1[
|
||||
// 0: most reactive but will not let tap recognizers accept gestures
|
||||
// <1: less reactive but gives the most leeway to other recognizers
|
||||
// 1: will not be able to compete with a `HorizontalDragGestureRecognizer` up the widget tree
|
||||
final double touchSlopFactor;
|
||||
|
||||
@override
|
||||
bool updateShouldNotify(PhotoViewGestureDetectorScope oldWidget) {
|
||||
return axis != oldWidget.axis && touchSlopFactor != oldWidget.touchSlopFactor;
|
||||
}
|
||||
}
|
||||
|
||||
// `PageView` contains a `Scrollable` which sets up a `HorizontalDragGestureRecognizer`
|
||||
// this recognizer will win in the gesture arena when the drag distance reaches `kTouchSlop`
|
||||
// we cannot change that, but we can prevent the scrollable from panning until this threshold is reached
|
||||
// and let other recognizers accept the gesture instead
|
||||
class PhotoViewPageViewScrollPhysics extends ScrollPhysics {
|
||||
const PhotoViewPageViewScrollPhysics({
|
||||
this.touchSlopFactor = 0.1,
|
||||
ScrollPhysics? parent,
|
||||
}) : super(parent: parent);
|
||||
|
||||
|
||||
// in [0, 1]
|
||||
// 0: most reactive but will not let PhotoView recognizers accept gestures
|
||||
// 1: less reactive but gives the most leeway to PhotoView recognizers
|
||||
final double touchSlopFactor;
|
||||
|
||||
|
||||
@override
|
||||
PhotoViewPageViewScrollPhysics applyTo(ScrollPhysics? ancestor) {
|
||||
return PhotoViewPageViewScrollPhysics(
|
||||
touchSlopFactor: touchSlopFactor,
|
||||
parent: buildParent(ancestor),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@override
|
||||
double get dragStartDistanceMotionThreshold => kTouchSlop * touchSlopFactor;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/controller/photo_view_controller_delegate.dart'
|
||||
show PhotoViewControllerDelegate;
|
||||
|
||||
mixin HitCornersDetector on PhotoViewControllerDelegate {
|
||||
HitCorners _hitCornersX() {
|
||||
final double childWidth = scaleBoundaries.childSize.width * scale;
|
||||
final double screenWidth = scaleBoundaries.outerSize.width;
|
||||
if (screenWidth >= childWidth) {
|
||||
return const HitCorners(true, true);
|
||||
}
|
||||
final x = -position.dx;
|
||||
final cornersX = this.cornersX();
|
||||
return HitCorners(x <= cornersX.min, x >= cornersX.max);
|
||||
}
|
||||
|
||||
HitCorners _hitCornersY() {
|
||||
final double childHeight = scaleBoundaries.childSize.height * scale;
|
||||
final double screenHeight = scaleBoundaries.outerSize.height;
|
||||
if (screenHeight >= childHeight) {
|
||||
return const HitCorners(true, true);
|
||||
}
|
||||
final y = -position.dy;
|
||||
final cornersY = this.cornersY();
|
||||
return HitCorners(y <= cornersY.min, y >= cornersY.max);
|
||||
}
|
||||
|
||||
bool _shouldMoveAxis(HitCorners hitCorners, double mainAxisMove, double crossAxisMove) {
|
||||
if (mainAxisMove == 0) {
|
||||
return false;
|
||||
}
|
||||
if (!hitCorners.hasHitAny) {
|
||||
return true;
|
||||
}
|
||||
final axisBlocked = hitCorners.hasHitBoth ||
|
||||
(hitCorners.hasHitMax ? mainAxisMove > 0 : mainAxisMove < 0);
|
||||
if (axisBlocked) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
bool _shouldMoveX(Offset move) {
|
||||
final hitCornersX = _hitCornersX();
|
||||
final mainAxisMove = move.dx;
|
||||
final crossAxisMove = move.dy;
|
||||
|
||||
return _shouldMoveAxis(hitCornersX, mainAxisMove, crossAxisMove);
|
||||
}
|
||||
|
||||
bool _shouldMoveY(Offset move) {
|
||||
final hitCornersY = _hitCornersY();
|
||||
final mainAxisMove = move.dy;
|
||||
final crossAxisMove = move.dx;
|
||||
|
||||
return _shouldMoveAxis(hitCornersY, mainAxisMove, crossAxisMove);
|
||||
}
|
||||
|
||||
bool shouldMove(Offset move, Axis mainAxis) {
|
||||
if (mainAxis == Axis.vertical) {
|
||||
return _shouldMoveY(move);
|
||||
}
|
||||
return _shouldMoveX(move);
|
||||
}
|
||||
}
|
||||
|
||||
class HitCorners {
|
||||
const HitCorners(this.hasHitMin, this.hasHitMax);
|
||||
|
||||
final bool hasHitMin;
|
||||
final bool hasHitMax;
|
||||
|
||||
bool get hasHitAny => hasHitMin || hasHitMax;
|
||||
|
||||
bool get hasHitBoth => hasHitMin && hasHitMax;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/// A class that work as a enum. It overloads the operator `*` saving the double as a multiplier.
|
||||
///
|
||||
/// ```
|
||||
/// PhotoViewComputedScale.contained * 2
|
||||
/// ```
|
||||
///
|
||||
class PhotoViewComputedScale {
|
||||
const PhotoViewComputedScale._internal(this._value, [this.multiplier = 1.0]);
|
||||
|
||||
final String _value;
|
||||
final double multiplier;
|
||||
|
||||
@override
|
||||
String toString() => 'Enum.$_value';
|
||||
|
||||
static const contained = PhotoViewComputedScale._internal('contained');
|
||||
static const covered = PhotoViewComputedScale._internal('covered');
|
||||
|
||||
PhotoViewComputedScale operator *(double multiplier) {
|
||||
return PhotoViewComputedScale._internal(_value, multiplier);
|
||||
}
|
||||
|
||||
PhotoViewComputedScale operator /(double divider) {
|
||||
return PhotoViewComputedScale._internal(_value, 1 / divider);
|
||||
}
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
identical(this, other) ||
|
||||
other is PhotoViewComputedScale &&
|
||||
runtimeType == other.runtimeType &&
|
||||
_value == other._value;
|
||||
|
||||
@override
|
||||
int get hashCode => _value.hashCode;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class PhotoViewDefaultError extends StatelessWidget {
|
||||
const PhotoViewDefaultError({Key? key, required this.decoration})
|
||||
: super(key: key);
|
||||
|
||||
final BoxDecoration decoration;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DecoratedBox(
|
||||
decoration: decoration,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.broken_image,
|
||||
color: Colors.grey[400],
|
||||
size: 40.0,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PhotoViewDefaultLoading extends StatelessWidget {
|
||||
const PhotoViewDefaultLoading({Key? key, this.event}) : super(key: key);
|
||||
|
||||
final ImageChunkEvent? event;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final expectedBytes = event?.expectedTotalBytes;
|
||||
final loadedBytes = event?.cumulativeBytesLoaded;
|
||||
final value = loadedBytes != null && expectedBytes != null
|
||||
? loadedBytes / expectedBytes
|
||||
: null;
|
||||
|
||||
return Center(
|
||||
child: SizedBox(
|
||||
width: 20.0,
|
||||
height: 20.0,
|
||||
child: CircularProgressIndicator(value: value),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/// A way to represent the step of the "doubletap gesture cycle" in which PhotoView is.
|
||||
enum PhotoViewScaleState {
|
||||
initial,
|
||||
covering,
|
||||
originalSize,
|
||||
zoomedIn,
|
||||
zoomedOut;
|
||||
|
||||
bool get isScaleStateZooming =>
|
||||
this == PhotoViewScaleState.zoomedIn ||
|
||||
this == PhotoViewScaleState.zoomedOut;
|
||||
}
|
||||
327
mobile/lib/shared/ui/photo_view/src/photo_view_wrappers.dart
Normal file
327
mobile/lib/shared/ui/photo_view/src/photo_view_wrappers.dart
Normal file
@@ -0,0 +1,327 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
import '../photo_view.dart';
|
||||
import 'core/photo_view_core.dart';
|
||||
import 'photo_view_default_widgets.dart';
|
||||
import 'utils/photo_view_utils.dart';
|
||||
|
||||
class ImageWrapper extends StatefulWidget {
|
||||
const ImageWrapper({
|
||||
Key? key,
|
||||
required this.imageProvider,
|
||||
required this.loadingBuilder,
|
||||
required this.backgroundDecoration,
|
||||
required this.gaplessPlayback,
|
||||
required this.heroAttributes,
|
||||
required this.scaleStateChangedCallback,
|
||||
required this.enableRotation,
|
||||
required this.controller,
|
||||
required this.scaleStateController,
|
||||
required this.maxScale,
|
||||
required this.minScale,
|
||||
required this.initialScale,
|
||||
required this.basePosition,
|
||||
required this.scaleStateCycle,
|
||||
required this.onTapUp,
|
||||
required this.onTapDown,
|
||||
required this.onDragStart,
|
||||
required this.onDragEnd,
|
||||
required this.onDragUpdate,
|
||||
required this.onScaleEnd,
|
||||
required this.outerSize,
|
||||
required this.gestureDetectorBehavior,
|
||||
required this.tightMode,
|
||||
required this.filterQuality,
|
||||
required this.disableGestures,
|
||||
required this.errorBuilder,
|
||||
required this.enablePanAlways,
|
||||
}) : super(key: key);
|
||||
|
||||
final ImageProvider imageProvider;
|
||||
final LoadingBuilder? loadingBuilder;
|
||||
final ImageErrorWidgetBuilder? errorBuilder;
|
||||
final BoxDecoration backgroundDecoration;
|
||||
final bool gaplessPlayback;
|
||||
final PhotoViewHeroAttributes? heroAttributes;
|
||||
final ValueChanged<PhotoViewScaleState>? scaleStateChangedCallback;
|
||||
final bool enableRotation;
|
||||
final dynamic maxScale;
|
||||
final dynamic minScale;
|
||||
final dynamic initialScale;
|
||||
final PhotoViewControllerBase controller;
|
||||
final PhotoViewScaleStateController scaleStateController;
|
||||
final Alignment? basePosition;
|
||||
final ScaleStateCycle? scaleStateCycle;
|
||||
final PhotoViewImageTapUpCallback? onTapUp;
|
||||
final PhotoViewImageTapDownCallback? onTapDown;
|
||||
final PhotoViewImageDragStartCallback? onDragStart;
|
||||
final PhotoViewImageDragEndCallback? onDragEnd;
|
||||
final PhotoViewImageDragUpdateCallback? onDragUpdate;
|
||||
final PhotoViewImageScaleEndCallback? onScaleEnd;
|
||||
final Size outerSize;
|
||||
final HitTestBehavior? gestureDetectorBehavior;
|
||||
final bool? tightMode;
|
||||
final FilterQuality? filterQuality;
|
||||
final bool? disableGestures;
|
||||
final bool? enablePanAlways;
|
||||
|
||||
@override
|
||||
createState() => _ImageWrapperState();
|
||||
}
|
||||
|
||||
class _ImageWrapperState extends State<ImageWrapper> {
|
||||
ImageStreamListener? _imageStreamListener;
|
||||
ImageStream? _imageStream;
|
||||
ImageChunkEvent? _loadingProgress;
|
||||
ImageInfo? _imageInfo;
|
||||
bool _loading = true;
|
||||
Size? _imageSize;
|
||||
Object? _lastException;
|
||||
StackTrace? _lastStack;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
_stopImageStream();
|
||||
}
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
_resolveImage();
|
||||
super.didChangeDependencies();
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(ImageWrapper oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (widget.imageProvider != oldWidget.imageProvider) {
|
||||
_resolveImage();
|
||||
}
|
||||
}
|
||||
|
||||
// retrieve image from the provider
|
||||
void _resolveImage() {
|
||||
final ImageStream newStream = widget.imageProvider.resolve(
|
||||
const ImageConfiguration(),
|
||||
);
|
||||
_updateSourceStream(newStream);
|
||||
}
|
||||
|
||||
ImageStreamListener _getOrCreateListener() {
|
||||
void handleImageChunk(ImageChunkEvent event) {
|
||||
setState(() {
|
||||
_loadingProgress = event;
|
||||
_lastException = null;
|
||||
});
|
||||
}
|
||||
|
||||
void handleImageFrame(ImageInfo info, bool synchronousCall) {
|
||||
setupCB() {
|
||||
_imageSize = Size(
|
||||
info.image.width.toDouble(),
|
||||
info.image.height.toDouble(),
|
||||
);
|
||||
_loading = false;
|
||||
_imageInfo = _imageInfo;
|
||||
|
||||
_loadingProgress = null;
|
||||
_lastException = null;
|
||||
_lastStack = null;
|
||||
}
|
||||
synchronousCall ? setupCB() : setState(setupCB);
|
||||
}
|
||||
|
||||
void handleError(dynamic error, StackTrace? stackTrace) {
|
||||
setState(() {
|
||||
_loading = false;
|
||||
_lastException = error;
|
||||
_lastStack = stackTrace;
|
||||
});
|
||||
assert(() {
|
||||
if (widget.errorBuilder == null) {
|
||||
throw error;
|
||||
}
|
||||
return true;
|
||||
}());
|
||||
}
|
||||
|
||||
_imageStreamListener = ImageStreamListener(
|
||||
handleImageFrame,
|
||||
onChunk: handleImageChunk,
|
||||
onError: handleError,
|
||||
);
|
||||
|
||||
return _imageStreamListener!;
|
||||
}
|
||||
|
||||
void _updateSourceStream(ImageStream newStream) {
|
||||
if (_imageStream?.key == newStream.key) {
|
||||
return;
|
||||
}
|
||||
_imageStream?.removeListener(_imageStreamListener!);
|
||||
_imageStream = newStream;
|
||||
_imageStream!.addListener(_getOrCreateListener());
|
||||
}
|
||||
|
||||
void _stopImageStream() {
|
||||
_imageStream?.removeListener(_imageStreamListener!);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (_loading) {
|
||||
return _buildLoading(context);
|
||||
}
|
||||
|
||||
if (_lastException != null) {
|
||||
return _buildError(context);
|
||||
}
|
||||
|
||||
final scaleBoundaries = ScaleBoundaries(
|
||||
widget.minScale ?? 0.0,
|
||||
widget.maxScale ?? double.infinity,
|
||||
widget.initialScale ?? PhotoViewComputedScale.contained,
|
||||
widget.outerSize,
|
||||
_imageSize!,
|
||||
);
|
||||
|
||||
return PhotoViewCore(
|
||||
imageProvider: widget.imageProvider,
|
||||
backgroundDecoration: widget.backgroundDecoration,
|
||||
gaplessPlayback: widget.gaplessPlayback,
|
||||
enableRotation: widget.enableRotation,
|
||||
heroAttributes: widget.heroAttributes,
|
||||
basePosition: widget.basePosition ?? Alignment.center,
|
||||
controller: widget.controller,
|
||||
scaleStateController: widget.scaleStateController,
|
||||
scaleStateCycle: widget.scaleStateCycle ?? defaultScaleStateCycle,
|
||||
scaleBoundaries: scaleBoundaries,
|
||||
onTapUp: widget.onTapUp,
|
||||
onTapDown: widget.onTapDown,
|
||||
onDragStart: widget.onDragStart,
|
||||
onDragEnd: widget.onDragEnd,
|
||||
onDragUpdate: widget.onDragUpdate,
|
||||
onScaleEnd: widget.onScaleEnd,
|
||||
gestureDetectorBehavior: widget.gestureDetectorBehavior,
|
||||
tightMode: widget.tightMode ?? false,
|
||||
filterQuality: widget.filterQuality ?? FilterQuality.none,
|
||||
disableGestures: widget.disableGestures ?? false,
|
||||
enablePanAlways: widget.enablePanAlways ?? false,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLoading(BuildContext context) {
|
||||
if (widget.loadingBuilder != null) {
|
||||
return widget.loadingBuilder!(context, _loadingProgress);
|
||||
}
|
||||
|
||||
return PhotoViewDefaultLoading(
|
||||
event: _loadingProgress,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildError(
|
||||
BuildContext context,
|
||||
) {
|
||||
if (widget.errorBuilder != null) {
|
||||
return widget.errorBuilder!(context, _lastException!, _lastStack);
|
||||
}
|
||||
return PhotoViewDefaultError(
|
||||
decoration: widget.backgroundDecoration,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class CustomChildWrapper extends StatelessWidget {
|
||||
const CustomChildWrapper({
|
||||
Key? key,
|
||||
this.child,
|
||||
required this.childSize,
|
||||
required this.backgroundDecoration,
|
||||
this.heroAttributes,
|
||||
this.scaleStateChangedCallback,
|
||||
required this.enableRotation,
|
||||
required this.controller,
|
||||
required this.scaleStateController,
|
||||
required this.maxScale,
|
||||
required this.minScale,
|
||||
required this.initialScale,
|
||||
required this.basePosition,
|
||||
required this.scaleStateCycle,
|
||||
this.onTapUp,
|
||||
this.onTapDown,
|
||||
this.onDragStart,
|
||||
this.onDragEnd,
|
||||
this.onDragUpdate,
|
||||
this.onScaleEnd,
|
||||
required this.outerSize,
|
||||
this.gestureDetectorBehavior,
|
||||
required this.tightMode,
|
||||
required this.filterQuality,
|
||||
required this.disableGestures,
|
||||
required this.enablePanAlways,
|
||||
}) : super(key: key);
|
||||
|
||||
final Widget? child;
|
||||
final Size? childSize;
|
||||
final Decoration backgroundDecoration;
|
||||
final PhotoViewHeroAttributes? heroAttributes;
|
||||
final ValueChanged<PhotoViewScaleState>? scaleStateChangedCallback;
|
||||
final bool enableRotation;
|
||||
|
||||
final PhotoViewControllerBase controller;
|
||||
final PhotoViewScaleStateController scaleStateController;
|
||||
|
||||
final dynamic maxScale;
|
||||
final dynamic minScale;
|
||||
final dynamic initialScale;
|
||||
|
||||
final Alignment? basePosition;
|
||||
final ScaleStateCycle? scaleStateCycle;
|
||||
final PhotoViewImageTapUpCallback? onTapUp;
|
||||
final PhotoViewImageTapDownCallback? onTapDown;
|
||||
final PhotoViewImageDragStartCallback? onDragStart;
|
||||
final PhotoViewImageDragEndCallback? onDragEnd;
|
||||
final PhotoViewImageDragUpdateCallback? onDragUpdate;
|
||||
final PhotoViewImageScaleEndCallback? onScaleEnd;
|
||||
final Size outerSize;
|
||||
final HitTestBehavior? gestureDetectorBehavior;
|
||||
final bool? tightMode;
|
||||
final FilterQuality? filterQuality;
|
||||
final bool? disableGestures;
|
||||
final bool? enablePanAlways;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final scaleBoundaries = ScaleBoundaries(
|
||||
minScale ?? 0.0,
|
||||
maxScale ?? double.infinity,
|
||||
initialScale ?? PhotoViewComputedScale.contained,
|
||||
outerSize,
|
||||
childSize ?? outerSize,
|
||||
);
|
||||
|
||||
return PhotoViewCore.customChild(
|
||||
customChild: child,
|
||||
backgroundDecoration: backgroundDecoration,
|
||||
enableRotation: enableRotation,
|
||||
heroAttributes: heroAttributes,
|
||||
controller: controller,
|
||||
scaleStateController: scaleStateController,
|
||||
scaleStateCycle: scaleStateCycle ?? defaultScaleStateCycle,
|
||||
basePosition: basePosition ?? Alignment.center,
|
||||
scaleBoundaries: scaleBoundaries,
|
||||
onTapUp: onTapUp,
|
||||
onTapDown: onTapDown,
|
||||
onDragStart: onDragStart,
|
||||
onDragEnd: onDragEnd,
|
||||
onDragUpdate: onDragUpdate,
|
||||
onScaleEnd: onScaleEnd,
|
||||
gestureDetectorBehavior: gestureDetectorBehavior,
|
||||
tightMode: tightMode ?? false,
|
||||
filterQuality: filterQuality ?? FilterQuality.none,
|
||||
disableGestures: disableGestures ?? false,
|
||||
enablePanAlways: enablePanAlways ?? false,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import 'package:flutter/foundation.dart';
|
||||
|
||||
/// A [ChangeNotifier] that has a second collection of listeners: the ignorable ones
|
||||
///
|
||||
/// Those listeners will be fired when [notifyListeners] fires and will be ignored
|
||||
/// when [notifySomeListeners] fires.
|
||||
///
|
||||
/// The common collection of listeners inherited from [ChangeNotifier] will be fired
|
||||
/// every time.
|
||||
class IgnorableChangeNotifier extends ChangeNotifier {
|
||||
ObserverList<VoidCallback>? _ignorableListeners =
|
||||
ObserverList<VoidCallback>();
|
||||
|
||||
bool _debugAssertNotDisposed() {
|
||||
assert(() {
|
||||
if (_ignorableListeners == null) {
|
||||
AssertionError([
|
||||
'A $runtimeType was used after being disposed.',
|
||||
'Once you have called dispose() on a $runtimeType, it can no longer be used.'
|
||||
]);
|
||||
}
|
||||
return true;
|
||||
}());
|
||||
return true;
|
||||
}
|
||||
|
||||
@override
|
||||
bool get hasListeners {
|
||||
return super.hasListeners || (_ignorableListeners?.isNotEmpty ?? false);
|
||||
}
|
||||
|
||||
void addIgnorableListener(listener) {
|
||||
assert(_debugAssertNotDisposed());
|
||||
_ignorableListeners!.add(listener);
|
||||
}
|
||||
|
||||
void removeIgnorableListener(listener) {
|
||||
assert(_debugAssertNotDisposed());
|
||||
_ignorableListeners!.remove(listener);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_ignorableListeners = null;
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@protected
|
||||
@override
|
||||
@visibleForTesting
|
||||
void notifyListeners() {
|
||||
super.notifyListeners();
|
||||
if (_ignorableListeners != null) {
|
||||
final List<VoidCallback> localListeners =
|
||||
List<VoidCallback>.from(_ignorableListeners!);
|
||||
for (VoidCallback listener in localListeners) {
|
||||
try {
|
||||
if (_ignorableListeners!.contains(listener)) {
|
||||
listener();
|
||||
}
|
||||
} catch (exception, stack) {
|
||||
FlutterError.reportError(
|
||||
FlutterErrorDetails(
|
||||
exception: exception,
|
||||
stack: stack,
|
||||
library: 'Photoview library',
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Ignores the ignoreables
|
||||
@protected
|
||||
void notifySomeListeners() {
|
||||
super.notifyListeners();
|
||||
}
|
||||
}
|
||||
|
||||
/// Just like [ValueNotifier] except it extends [IgnorableChangeNotifier] which has
|
||||
/// listeners that wont fire when [updateIgnoring] is called.
|
||||
class IgnorableValueNotifier<T> extends IgnorableChangeNotifier
|
||||
implements ValueListenable<T> {
|
||||
IgnorableValueNotifier(this._value);
|
||||
|
||||
@override
|
||||
T get value => _value;
|
||||
T _value;
|
||||
|
||||
set value(T newValue) {
|
||||
if (_value == newValue) {
|
||||
return;
|
||||
}
|
||||
_value = newValue;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void updateIgnoring(T newValue) {
|
||||
if (_value == newValue) {
|
||||
return;
|
||||
}
|
||||
_value = newValue;
|
||||
notifySomeListeners();
|
||||
}
|
||||
|
||||
@override
|
||||
String toString() => '${describeIdentity(this)}($value)';
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
/// Data class that holds the attributes that are going to be passed to
|
||||
/// [PhotoViewImageWrapper]'s [Hero].
|
||||
class PhotoViewHeroAttributes {
|
||||
const PhotoViewHeroAttributes({
|
||||
required this.tag,
|
||||
this.createRectTween,
|
||||
this.flightShuttleBuilder,
|
||||
this.placeholderBuilder,
|
||||
this.transitionOnUserGestures = false,
|
||||
});
|
||||
|
||||
/// Mirror to [Hero.tag]
|
||||
final Object tag;
|
||||
|
||||
/// Mirror to [Hero.createRectTween]
|
||||
final CreateRectTween? createRectTween;
|
||||
|
||||
/// Mirror to [Hero.flightShuttleBuilder]
|
||||
final HeroFlightShuttleBuilder? flightShuttleBuilder;
|
||||
|
||||
/// Mirror to [Hero.placeholderBuilder]
|
||||
final HeroPlaceholderBuilder? placeholderBuilder;
|
||||
|
||||
/// Mirror to [Hero.transitionOnUserGestures]
|
||||
final bool transitionOnUserGestures;
|
||||
}
|
||||
145
mobile/lib/shared/ui/photo_view/src/utils/photo_view_utils.dart
Normal file
145
mobile/lib/shared/ui/photo_view/src/utils/photo_view_utils.dart
Normal file
@@ -0,0 +1,145 @@
|
||||
import 'dart:math' as math;
|
||||
import 'dart:ui' show Size;
|
||||
|
||||
import "package:immich_mobile/shared/ui/photo_view/src/photo_view_computed_scale.dart";
|
||||
import 'package:immich_mobile/shared/ui/photo_view/src/photo_view_scale_state.dart';
|
||||
|
||||
/// Given a [PhotoViewScaleState], returns a scale value considering [scaleBoundaries].
|
||||
double getScaleForScaleState(
|
||||
PhotoViewScaleState scaleState,
|
||||
ScaleBoundaries scaleBoundaries,
|
||||
) {
|
||||
switch (scaleState) {
|
||||
case PhotoViewScaleState.initial:
|
||||
case PhotoViewScaleState.zoomedIn:
|
||||
case PhotoViewScaleState.zoomedOut:
|
||||
return _clampSize(scaleBoundaries.initialScale, scaleBoundaries);
|
||||
case PhotoViewScaleState.covering:
|
||||
return _clampSize(
|
||||
_scaleForCovering(
|
||||
scaleBoundaries.outerSize,
|
||||
scaleBoundaries.childSize,
|
||||
),
|
||||
scaleBoundaries,
|
||||
);
|
||||
case PhotoViewScaleState.originalSize:
|
||||
return _clampSize(1.0, scaleBoundaries);
|
||||
// Will never be reached
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// Internal class to wraps custom scale boundaries (min, max and initial)
|
||||
/// Also, stores values regarding the two sizes: the container and teh child.
|
||||
class ScaleBoundaries {
|
||||
const ScaleBoundaries(
|
||||
this._minScale,
|
||||
this._maxScale,
|
||||
this._initialScale,
|
||||
this.outerSize,
|
||||
this.childSize,
|
||||
);
|
||||
|
||||
final dynamic _minScale;
|
||||
final dynamic _maxScale;
|
||||
final dynamic _initialScale;
|
||||
final Size outerSize;
|
||||
final Size childSize;
|
||||
|
||||
double get minScale {
|
||||
assert(_minScale is double || _minScale is PhotoViewComputedScale);
|
||||
if (_minScale == PhotoViewComputedScale.contained) {
|
||||
return _scaleForContained(outerSize, childSize) *
|
||||
(_minScale as PhotoViewComputedScale).multiplier; // ignore: avoid_as
|
||||
}
|
||||
if (_minScale == PhotoViewComputedScale.covered) {
|
||||
return _scaleForCovering(outerSize, childSize) *
|
||||
(_minScale as PhotoViewComputedScale).multiplier; // ignore: avoid_as
|
||||
}
|
||||
assert(_minScale >= 0.0);
|
||||
return _minScale;
|
||||
}
|
||||
|
||||
double get maxScale {
|
||||
assert(_maxScale is double || _maxScale is PhotoViewComputedScale);
|
||||
if (_maxScale == PhotoViewComputedScale.contained) {
|
||||
return (_scaleForContained(outerSize, childSize) *
|
||||
(_maxScale as PhotoViewComputedScale) // ignore: avoid_as
|
||||
.multiplier)
|
||||
.clamp(minScale, double.infinity);
|
||||
}
|
||||
if (_maxScale == PhotoViewComputedScale.covered) {
|
||||
return (_scaleForCovering(outerSize, childSize) *
|
||||
(_maxScale as PhotoViewComputedScale) // ignore: avoid_as
|
||||
.multiplier)
|
||||
.clamp(minScale, double.infinity);
|
||||
}
|
||||
return _maxScale.clamp(minScale, double.infinity);
|
||||
}
|
||||
|
||||
double get initialScale {
|
||||
assert(_initialScale is double || _initialScale is PhotoViewComputedScale);
|
||||
if (_initialScale == PhotoViewComputedScale.contained) {
|
||||
return _scaleForContained(outerSize, childSize) *
|
||||
(_initialScale as PhotoViewComputedScale) // ignore: avoid_as
|
||||
.multiplier;
|
||||
}
|
||||
if (_initialScale == PhotoViewComputedScale.covered) {
|
||||
return _scaleForCovering(outerSize, childSize) *
|
||||
(_initialScale as PhotoViewComputedScale) // ignore: avoid_as
|
||||
.multiplier;
|
||||
}
|
||||
return _initialScale.clamp(minScale, maxScale);
|
||||
}
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
identical(this, other) ||
|
||||
other is ScaleBoundaries &&
|
||||
runtimeType == other.runtimeType &&
|
||||
_minScale == other._minScale &&
|
||||
_maxScale == other._maxScale &&
|
||||
_initialScale == other._initialScale &&
|
||||
outerSize == other.outerSize &&
|
||||
childSize == other.childSize;
|
||||
|
||||
@override
|
||||
int get hashCode =>
|
||||
_minScale.hashCode ^
|
||||
_maxScale.hashCode ^
|
||||
_initialScale.hashCode ^
|
||||
outerSize.hashCode ^
|
||||
childSize.hashCode;
|
||||
}
|
||||
|
||||
double _scaleForContained(Size size, Size childSize) {
|
||||
final double imageWidth = childSize.width;
|
||||
final double imageHeight = childSize.height;
|
||||
|
||||
final double screenWidth = size.width;
|
||||
final double screenHeight = size.height;
|
||||
|
||||
return math.min(screenWidth / imageWidth, screenHeight / imageHeight);
|
||||
}
|
||||
|
||||
double _scaleForCovering(Size size, Size childSize) {
|
||||
final double imageWidth = childSize.width;
|
||||
final double imageHeight = childSize.height;
|
||||
|
||||
final double screenWidth = size.width;
|
||||
final double screenHeight = size.height;
|
||||
|
||||
return math.max(screenWidth / imageWidth, screenHeight / imageHeight);
|
||||
}
|
||||
|
||||
double _clampSize(double size, ScaleBoundaries scaleBoundaries) {
|
||||
return size.clamp(scaleBoundaries.minScale, scaleBoundaries.maxScale);
|
||||
}
|
||||
|
||||
/// Simple class to store a min and a max value
|
||||
class CornersRange {
|
||||
const CornersRange(this.min, this.max);
|
||||
final double min;
|
||||
final double max;
|
||||
}
|
||||
Reference in New Issue
Block a user