[BUG] while zooming in, panning is out fo sync

[StefanLobbenmeier]

Describe the bug
While zooming in, panning is out fo sync.

To Reproduce
Zoom in, keep the fingers on the screen. Now move them around.

Current behaviour
The image travels faster than my fingers pan it.

Expected behavior
The image travels at exactly the same speed that I pan.

Screenshots
If applicable, add screenshots to help explain your problem.

Is this a feature or report a bug?
Bug

[renancaraujo]

Nice perception. I will look into it as soon as I solve older issues. If you come up with any idea, PRs are welcome 😄

[graknol]

I finally figured this out.
I modified the code from matrix_gesture_detector to work with this PhotoViewCore.

Note: This is not in a state which is acceptable for master, yet. But, if you only care about panning, zooming and zooming to focalPoint, then you can drop this in ;-)

Also, I tried to make the clampMatrix to take rotation into account, but I didn't get it to work (math.

This could also be used to solve #82 (see the alignFocalPoint function).

TODO (I'm not spending any more hours on this though 🤣):

• Move matrix into PhotoViewComputedState.
• Handle double tap.
• Fix clamping when rotated (rotation works, it's just that it doesn't take into account that the bounding box gets bigger).
• Go over all the computations and remove unnecessary mathematical complexity.

value_updater.dart

typedef _OnUpdate<T> = T Function(T oldValue, T newValue);

class ValueUpdater<T> {
  ValueUpdater({this.onUpdate});

  final _OnUpdate<T> onUpdate;
  T value;

  T update(T newValue) {
    final updated = onUpdate(value, newValue);
    value = newValue;
    return updated;
  }
}

photo_view_core.dart

import 'dart:math';

import 'package:flutter/widgets.dart';

import 'package:photo_view/photo_view.dart'
    show
        PhotoViewHeroAttributes,
        PhotoViewImageTapDownCallback,
        PhotoViewImageTapUpCallback,
        ScaleStateCycle;
import 'package:photo_view/src/controller/photo_view_controller.dart';
import 'package:photo_view/src/controller/photo_view_controller_delegate.dart';
import 'package:photo_view/src/controller/photo_view_scalestate_controller.dart';
import 'package:photo_view/src/utils/photo_view_utils.dart';
import 'package:photo_view/src/utils/value_updater.dart';
import 'package:photo_view/src/core/photo_view_gesture_detector.dart';
import 'package:photo_view/src/core/photo_view_hit_corners.dart';
import 'package:vector_math/vector_math_64.dart';

const _defaultDecoration = const BoxDecoration(
  color: const 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.gestureDetectorBehavior,
    @required this.controller,
    @required this.scaleBoundaries,
    @required this.scaleStateCycle,
    @required this.scaleStateController,
    @required this.basePosition,
    @required this.tightMode,
  })  : customChild = null,
        super(key: key);

  const PhotoViewCore.customChild({
    Key key,
    @required this.customChild,
    @required this.backgroundDecoration,
    @required this.heroAttributes,
    @required this.enableRotation,
    @required this.onTapUp,
    @required this.onTapDown,
    @required this.gestureDetectorBehavior,
    @required this.controller,
    @required this.scaleBoundaries,
    @required this.scaleStateCycle,
    @required this.scaleStateController,
    @required this.basePosition,
    @required this.tightMode,
  })  : 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 HitTestBehavior gestureDetectorBehavior;
  final bool tightMode;

  @override
  State<StatefulWidget> createState() {
    return PhotoViewCoreState();
  }

  bool get hasCustomChild => customChild != null;
}

class PhotoViewCoreState extends State<PhotoViewCore>
    with
        TickerProviderStateMixin,
        PhotoViewControllerDelegate,
        HitCornersDetector {
  Matrix4 matrix = Matrix4.identity();

  double _scaleBefore = 0.0;

  @override
  double get scale => matrix.storage[0];

  @override
  Offset get position {
    final t = matrix.getTranslation();
    return Offset(t.x, t.y);
  }

  final ValueUpdater<Offset> _translationUpdater = ValueUpdater(
    onUpdate: (oldVal, newVal) => newVal - oldVal,
  );
  final ValueUpdater<double> _rotationUpdater = ValueUpdater(
    onUpdate: (oldVal, newVal) => newVal - oldVal,
  );
  final ValueUpdater<double> _scaleUpdater = ValueUpdater(
    onUpdate: (oldVal, newVal) => newVal / oldVal,
  );

  AnimationController _scaleAnimationController;
  Animation<double> _scaleAnimation;

  AnimationController _positionAnimationController;
  Animation<Offset> _positionAnimation;

  AnimationController _rotationAnimationController;
  Animation<double> _rotationAnimation;

  PhotoViewHeroAttributes get heroAttributes => widget.heroAttributes;

  ScaleBoundaries cachedScaleBoundaries;

  void handleScaleAnimation() {
    setState(() {
      matrix..scale(1 / scale)..scale(_scaleAnimation.value);
    });
  }

  void handlePositionAnimate() {
    setState(() {
      matrix.setTranslation(Vector3(
          _positionAnimation.value.dx, _positionAnimation.value.dy, 0.0));
    });
  }

  void handleRotationAnimation() {
    setState(() {
      matrix.setRotationZ(_rotationAnimation.value);
    });
  }

  void onScaleStart(ScaleStartDetails details) {
    _scaleAnimationController.stop();
    _positionAnimationController.stop();
    _rotationAnimationController.stop();

    _scaleBefore = scale;

    _translationUpdater.value = alignFocalPoint(details.focalPoint);
    _rotationUpdater.value = double.nan;
    _scaleUpdater.value = 1.0;
  }

  void onScaleUpdate(ScaleUpdateDetails details) {
    setState(() {
      var translationDeltaMatrix = Matrix4.identity();
      var scaleDeltaMatrix = Matrix4.identity();
      var rotationDeltaMatrix = Matrix4.identity();

      final alignedFocalPoint = alignFocalPoint(details.focalPoint);

      // handle matrix translating
      final translationDelta = _translationUpdater.update(alignedFocalPoint);
      translationDeltaMatrix = _translate(translationDelta);
      matrix = translationDeltaMatrix * matrix;

      final RenderBox renderBox = context.findRenderObject();
      final focalPoint = renderBox.globalToLocal(alignedFocalPoint);

      // handle matrix scaling
      if (details.scale != 1.0) {
        final scaleDelta = _scaleUpdater.update(details.scale);
        scaleDeltaMatrix = _scale(scaleDelta, focalPoint);
        matrix = scaleDeltaMatrix * matrix;
      }

      // handle matrix rotating
      if (widget.enableRotation && details.rotation != 0.0) {
        if (_rotationUpdater.value.isNaN) {
          _rotationUpdater.value = details.rotation;
        } else {
          final rotationDelta = _rotationUpdater.update(details.rotation);
          rotationDeltaMatrix = _rotate(rotationDelta, focalPoint);
          matrix = rotationDeltaMatrix * matrix;
        }
      }

      updateScaleStateFromNewScale(scale);

      _clampMatrix();
    });
  }

  void onScaleEnd(ScaleEndDetails details) {
    final double _scale = scale;
    final Offset _position = position;
    final double maxScale = scaleBoundaries.maxScale;
    final double minScale = scaleBoundaries.minScale;

    //animate back to maxScale if gesture exceeded the maxScale specified
    if (_scale > maxScale) {
      final double scaleComebackRatio = maxScale / _scale;
      animateScale(_scale, maxScale);
      final Offset clampedPosition = clampPosition(
        position: _position * scaleComebackRatio,
        scale: maxScale,
      );
      animatePosition(_position, clampedPosition);
      return;
    }

    //animate back to minScale if gesture fell smaller than the minScale specified
    if (_scale < minScale) {
      final double scaleComebackRatio = minScale / _scale;
      animateScale(_scale, minScale);
      animatePosition(
        _position,
        clampPosition(
          position: _position * 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 == _scale && magnitude >= 400.0) {
      final Offset direction = details.velocity.pixelsPerSecond / magnitude;
      animatePosition(
        _position,
        clampPosition(position: _position + direction * 100.0),
      );
    }

    checkAndSetToInitialScaleState();
  }

  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) {
      checkAndSetToInitialScaleState();
    }
  }

  @override
  void initState() {
    super.initState();
    _scaleAnimationController = AnimationController(vsync: this)
      ..addListener(handleScaleAnimation);
    _scaleAnimationController.addStatusListener(onAnimationStatus);

    _positionAnimationController = AnimationController(vsync: this)
      ..addListener(handlePositionAnimate);

    _rotationAnimationController = AnimationController(vsync: this)
      ..addListener(handleRotationAnimation);
    startListeners();
    addAnimateOnScaleStateUpdate(animateOnScaleStateUpdate);

    cachedScaleBoundaries = widget.scaleBoundaries;

    matrix.scale(cachedScaleBoundaries.initialScale);
  }

  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;
    }

    final Widget customChildLayout = CustomSingleChildLayout(
      delegate: _CenterWithOriginalSizeDelegate(
        scaleBoundaries.childSize,
        basePosition,
      ),
      child: _buildHero(),
    );
    return PhotoViewGestureDetector(
      child: Container(
        constraints: widget.tightMode
            ? BoxConstraints.tight(scaleBoundaries.childSize * scale)
            : null,
        child: Center(
          child: Transform(
            child: customChildLayout,
            transform: matrix,
            alignment: basePosition,
          ),
        ),
        decoration: widget.backgroundDecoration ?? _defaultDecoration,
      ),
      // onDoubleTap: nextScaleState,
      onScaleStart: onScaleStart,
      onScaleUpdate: onScaleUpdate,
      onScaleEnd: onScaleEnd,
      hitDetector: this,
      onTapUp: widget.onTapUp == null ? null : onTapUp,
      onTapDown: widget.onTapDown == null ? null : onTapDown,
    );
  }

  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,
          );
  }

  Offset alignFocalPoint(Offset focalPoint) {
    return focalPoint - basePosition.alongSize(scaleBoundaries.outerSize);
  }

  void _clampMatrix() {
    final _scale = scale;
    // final radians = Quaternion.fromRotation(matrix.getRotation()).radians;

    matrix.scale(1 / _scale);

    final pos = -position;

    final double computedWidth = scaleBoundaries.childSize.width * _scale;
    final double computedHeight = scaleBoundaries.childSize.height * _scale;
    // final double rawComputedWidth = scaleBoundaries.childSize.width * _scale;
    // final double rawComputedHeight = scaleBoundaries.childSize.height * _scale;
    // final double computedWidth =
    //     (rawComputedWidth * sin((pi / 2) - radians)).abs() +
    //         (rawComputedHeight * sin(radians)).abs();
    // final double computedHeight =
    //     (rawComputedHeight * sin((pi / 2) - radians)).abs() +
    //         (rawComputedWidth * sin(radians)).abs();

    final double screenWidth = scaleBoundaries.outerSize.width;
    final double screenHeight = scaleBoundaries.outerSize.height;

    final double widthDiff = computedWidth - screenWidth;
    final double heightDiff = computedHeight - screenHeight;

    final double positionX = basePosition.x;
    final double positionY = basePosition.y;

    final double maxX = ((positionX + 1).abs() / 2) * widthDiff;
    final double minX = -maxX;
    final double maxY = ((positionY + 1).abs() / 2) * heightDiff;
    final double minY = -maxY;

    if (screenWidth < computedWidth) {
      if (pos.dx < minX) {
        matrix.leftTranslate(pos.dx - minX, 0.0);
      }
      if (maxX < pos.dx) {
        matrix.leftTranslate(pos.dx - maxX, 0.0);
      }
    } else {
      matrix.leftTranslate(pos.dx, 0.0);
    }
    if (screenHeight < computedHeight) {
      if (pos.dy < minY) {
        matrix.leftTranslate(0.0, pos.dy - minY);
      }
      if (maxY < pos.dy) {
        matrix.leftTranslate(0.0, pos.dy - maxY);
      }
    } else {
      matrix.leftTranslate(0.0, pos.dy);
    }

    matrix.scale(_scale);
  }

  Matrix4 _translate(Offset translation) {
    final dx = translation.dx;
    final dy = translation.dy;

    //  ..[0]  = 1       # x scale
    //  ..[5]  = 1       # y scale
    //  ..[10] = 1       # diagonal "one"
    //  ..[12] = dx      # x translation
    //  ..[13] = dy      # y translation
    //  ..[15] = 1       # diagonal "one"
    return Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, dx, dy, 0, 1);
  }

  Matrix4 _scale(double scale, Offset focalPoint) {
    final dx = (1 - scale) * focalPoint.dx;
    final dy = (1 - scale) * focalPoint.dy;

    //  ..[0]  = scale   # x scale
    //  ..[5]  = scale   # y scale
    //  ..[10] = 1       # diagonal "one"
    //  ..[12] = dx      # x translation
    //  ..[13] = dy      # y translation
    //  ..[15] = 1       # diagonal "one"
    return Matrix4(scale, 0, 0, 0, 0, scale, 0, 0, 0, 0, 1, 0, dx, dy, 0, 1);
  }

  Matrix4 _rotate(double angle, Offset focalPoint) {
    final c = cos(angle);
    final s = sin(angle);
    final dx = (1 - c) * focalPoint.dx + s * focalPoint.dy;
    final dy = (1 - c) * focalPoint.dy - s * focalPoint.dx;

    //  ..[0]  = c       # x scale
    //  ..[1]  = s       # y skew
    //  ..[4]  = -s      # x skew
    //  ..[5]  = c       # y scale
    //  ..[10] = 1       # diagonal "one"
    //  ..[12] = dx      # x translation
    //  ..[13] = dy      # y translation
    //  ..[15] = 1       # diagonal "one"
    return Matrix4(c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, dx, dy, 0, 1);
  }
}

class _CenterWithOriginalSizeDelegate extends SingleChildLayoutDelegate {
  const _CenterWithOriginalSizeDelegate(this.subjectSize, this.basePosition);

  final Size subjectSize;
  final Alignment basePosition;

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    final double offsetX =
        ((size.width - subjectSize.width) / 2) * (basePosition.x + 1);
    final double offsetY =
        ((size.height - subjectSize.height) / 2) * (basePosition.y + 1);
    return Offset(offsetX, offsetY);
  }

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return 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;

  @override
  int get hashCode => subjectSize.hashCode ^ basePosition.hashCode;
}

[thef]

@renancaraujo I reviewed the code posted by @graknol, made some changes and have a working combination; I just need some help with the filterQuality and some refactoring if you could help?

[renancaraujo]

@thef I've jst seen that, I'm working on a updated version of this comment.

[renancaraujo]

It is gonna be a breaking change.

[Kavantix]

My one line fix in #291 should fix this issue
@renancaraujo @thef @graknol Could you test this to confirm

[quaaantumdev]

The issue still persists so i created a pull request to actually fix this: #572