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:
+14
-7
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user