View / allow specifying an anchor on interaction end

This also fixes a bug where the animation anchor would be lost when outside
the allowed resolution.
This commit is contained in:
Olivier Guyot
2019-02-22 14:54:18 +01:00
parent 405e206717
commit 75c379beeb
+14 -7
View File
@@ -497,7 +497,7 @@ class View extends BaseObject {
if (options.center) { if (options.center) {
animation.sourceCenter = center; animation.sourceCenter = center;
animation.targetCenter = options.center; animation.targetCenter = options.center.slice();
center = animation.targetCenter; center = animation.targetCenter;
} }
@@ -609,16 +609,20 @@ class View extends BaseObject {
animation.targetResolution : animation.targetResolution :
animation.sourceResolution + progress * (animation.targetResolution - animation.sourceResolution); animation.sourceResolution + progress * (animation.targetResolution - animation.sourceResolution);
if (animation.anchor) { if (animation.anchor) {
this.targetCenter_ = this.calculateCenterZoom(resolution, animation.anchor); const size = this.getSizeFromViewport_(this.getRotation());
const constrainedResolution = this.constraints_.resolution(resolution, 0, size, true);
this.targetCenter_ = this.calculateCenterZoom(constrainedResolution, animation.anchor);
} }
this.targetResolution_ = resolution; this.targetResolution_ = resolution;
this.applyTargetState_(true);
} }
if (animation.sourceRotation !== undefined && animation.targetRotation !== undefined) { if (animation.sourceRotation !== undefined && animation.targetRotation !== undefined) {
const rotation = progress === 1 ? const rotation = progress === 1 ?
modulo(animation.targetRotation + Math.PI, 2 * Math.PI) - Math.PI : modulo(animation.targetRotation + Math.PI, 2 * Math.PI) - Math.PI :
animation.sourceRotation + progress * (animation.targetRotation - animation.sourceRotation); animation.sourceRotation + progress * (animation.targetRotation - animation.sourceRotation);
if (animation.anchor) { if (animation.anchor) {
this.targetCenter_ = this.calculateCenterRotate(rotation, animation.anchor); const constrainedRotation = this.constraints_.rotation(rotation, true);
this.targetCenter_ = this.calculateCenterRotate(constrainedRotation, animation.anchor);
} }
this.targetRotation_ = rotation; this.targetRotation_ = rotation;
} }
@@ -1281,9 +1285,10 @@ class View extends BaseObject {
* This is typically done on interaction end. * This is typically done on interaction end.
* @param {number=} opt_duration The animation duration in ms. * @param {number=} opt_duration The animation duration in ms.
* @param {number=} opt_resolutionDirection Which direction to zoom. * @param {number=} opt_resolutionDirection Which direction to zoom.
* @param {import("./coordinate.js").Coordinate=} opt_anchor The origin of the transformation.
* @private * @private
*/ */
resolveConstraints_(opt_duration, opt_resolutionDirection) { resolveConstraints_(opt_duration, opt_resolutionDirection, opt_anchor) {
const duration = opt_duration !== undefined ? opt_duration : 200; const duration = opt_duration !== undefined ? opt_duration : 200;
const direction = opt_resolutionDirection || 0; const direction = opt_resolutionDirection || 0;
@@ -1306,7 +1311,8 @@ class View extends BaseObject {
center: newCenter, center: newCenter,
resolution: newResolution, resolution: newResolution,
duration: duration, duration: duration,
easing: easeOut easing: easeOut,
anchor: opt_anchor
}); });
} }
} }
@@ -1324,12 +1330,13 @@ class View extends BaseObject {
* to a stable one if needed (depending on its constraints). * to a stable one if needed (depending on its constraints).
* @param {number=} opt_duration Animation duration in ms. * @param {number=} opt_duration Animation duration in ms.
* @param {number=} opt_resolutionDirection Which direction to zoom. * @param {number=} opt_resolutionDirection Which direction to zoom.
* @param {import("./coordinate.js").Coordinate=} opt_anchor The origin of the transformation.
* @api * @api
*/ */
endInteraction(opt_duration, opt_resolutionDirection) { endInteraction(opt_duration, opt_resolutionDirection, opt_anchor) {
this.setHint(ViewHint.INTERACTING, -1); this.setHint(ViewHint.INTERACTING, -1);
this.resolveConstraints_(opt_duration, opt_resolutionDirection); this.resolveConstraints_(opt_duration, opt_resolutionDirection, opt_anchor);
} }
/** /**