@geoblocks/cesium-iso 0.1.0 → 0.2.0

package/README.md

@@ -36,6 +36,8 @@ iso.turnTo(200);   // to a heading, in degrees, the shorter way
 iso.zoom(0.8);     // in, toward the middle of the screen
 iso.glideTo(position);
 iso.target = position; // at once
+iso.heading = 90;      // at once, in degrees, no easing
+iso.size = 300;        // at once, in meters across the screen's shorter side, within minSize and maxSize
 ```
 
 ## Options

package/cesium-iso.js

@@ -1,4 +1,5 @@
 import {Cartesian2, Cartesian3, Cartographic, FixedFrameTransforms, IntersectionTests, Math as CesiumMath, Matrix4, Plane} from '@cesium/core';
+import {EasingFunction} from '@cesium/engine';
 
 // in meters, how far the camera stays from its target by default, out of the scene's way: an orthographic view's
 // size does not depend on it, its depth's precision does (32-bit floats: half a millimeter at 5 km)
@@ -17,7 +18,7 @@ const TWIST = CesiumMath.toRadians(15);
 const DAMPING = 0.95;
 const LET_GO = 60;
 
-const easeInOut = (/** @type {number} */ t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+const easeInOut = EasingFunction.QUADRATIC_IN_OUT;
 const positionScratch = new Cartesian2();
 const planeScratch = new Plane(Cartesian3.UNIT_Z, 0);
 const normalScratch = new Cartesian3();
@@ -55,7 +56,7 @@ export default class CesiumIso {
     /** @type {Cartesian3} */
     this.target_ = new Cartesian3();
     this.heading_ = 0;
-    /** @type {Map<number, {x: number, y: number}>} */
+    /** @type {Map<number, Cartesian2>} */
     this.pointers_ = new Map();
     /** @type {{grab?: Cartesian3 | undefined, turn?: boolean, last?: {x: number, y: number}, distance?: number, angle?: number, twist?: number} | undefined} */
     this.drag_ = undefined;
@@ -184,6 +185,30 @@ export default class CesiumIso {
     return CesiumMath.toDegrees(this.heading_);
   }
 
+  /**
+   * The heading set, in degrees: the view turned there at once, with no easing (turnTo eases); an animation under way,
+   * a drift or a turn, is dropped. While active.
+   * @param {number} heading
+   */
+  set heading(heading) {
+    this.turning_ = this.drift_ = this.drifted_ = undefined;
+    this.heading_ = CesiumMath.toRadians(heading);
+    this.place_();
+  }
+
+  /**
+   * The view's size, in meters across the screen's shorter side; set, within its bounds, the view zooms at once about
+   * its target (zoom zooms about a point of the screen).
+   */
+  get size() {
+    return this.size_;
+  }
+
+  set size(size) {
+    this.size_ = CesiumMath.clamp(size, this.minSize_, this.maxSize_);
+    this.place_();
+  }
+
   /**
    * A turn, eased, to a heading, in degrees, the shorter way round: the view toward a side a place is seen from.
    * @param {number} heading
@@ -192,7 +217,7 @@ export default class CesiumIso {
     this.drift_ = this.drifted_ = undefined;
     this.anchor_();
     const to = CesiumMath.toRadians(heading);
-    const delta = Math.atan2(Math.sin(to - this.heading_), Math.cos(to - this.heading_));
+    const delta = CesiumMath.negativePiToPi(to - this.heading_);
     this.turning_ = {from: this.heading_, to: this.heading_ + delta, start: performance.now()};
     this.animate_();
   }
@@ -260,7 +285,10 @@ export default class CesiumIso {
     Cartesian3.clone(up, camera.up);
     Cartesian3.cross(direction, up, camera.right);
     // the orthographic frustum's width
-    Object.assign(camera.frustum, {width: this.width_()});
+    // the orthographic frustum's width; a subclass placing the camera on a perspective frustum has none to set
+    if ('width' in camera.frustum) {
+      camera.frustum.width = this.width_();
+    }
     this.viewer.scene.requestRender();
   }
 
@@ -278,7 +306,7 @@ export default class CesiumIso {
    * @param {number} sign
    */
   cornerAfter_(heading, sign) {
-    const quarter = Math.PI / 2;
+    const quarter = CesiumMath.PI_OVER_TWO;
     return this.corner_ + (Math.round((heading - this.corner_) / quarter) + sign) * quarter;
   }
 
@@ -365,8 +393,8 @@ export default class CesiumIso {
     const points = [...this.pointers_.values()];
     if (points.length === 2) {
       const [a, b] = points;
-      const middle = new Cartesian2((a.x + b.x) / 2, (a.y + b.y) / 2);
-      return {grab: this.ground_(middle, this.target_), distance: Math.hypot(b.x - a.x, b.y - a.y), angle: Math.atan2(b.y - a.y, b.x - a.x), twist: 0};
+      const middle = Cartesian2.lerp(a, b, 0.5, new Cartesian2());
+      return {grab: this.ground_(middle, this.target_), distance: Cartesian2.distance(a, b), angle: Math.atan2(b.y - a.y, b.x - a.x), twist: 0};
     }
     const slide = e.pointerType === 'touch' || e.button === 2 || e.ctrlKey || e.shiftKey;
     const point = /** @type {{x: number, y: number}} */ (points[0]);
@@ -384,15 +412,15 @@ export default class CesiumIso {
     const drag = this.drag_;
     const points = [...this.pointers_.values()];
     if (points.length === 2 && drag.distance !== undefined) {
-      const [a, b] = /** @type {[{x: number, y: number}, {x: number, y: number}]} */ (points);
-      const middle = new Cartesian2((a.x + b.x) / 2, (a.y + b.y) / 2);
-      const [distance, angle] = [Math.hypot(b.x - a.x, b.y - a.y), Math.atan2(b.y - a.y, b.x - a.x)];
+      const [a, b] = /** @type {[Cartesian2, Cartesian2]} */ (points);
+      const middle = Cartesian2.lerp(a, b, 0.5, new Cartesian2());
+      const [distance, angle] = [Cartesian2.distance(a, b), Math.atan2(b.y - a.y, b.x - a.x)];
       this.size_ = CesiumMath.clamp(this.size_ * drag.distance / distance, this.minSize_, this.maxSize_);
       this.place_();
       if (drag.grab) {
         this.keep_(drag.grab, middle);
       }
-      const turned = Math.atan2(Math.sin(angle - /** @type {number} */ (drag.angle)), Math.cos(angle - /** @type {number} */ (drag.angle)));
+      const turned = CesiumMath.negativePiToPi(angle - /** @type {number} */ (drag.angle));
       drag.twist = /** @type {number} */ (drag.twist) + turned;
       if (Math.abs(drag.twist) >= TWIST) {
         // the screen's y down: the fingers turning clockwise on it turn the ground clockwise under them
@@ -405,7 +433,7 @@ export default class CesiumIso {
       return;
     } else if (drag.turn && drag.last) {
       const point = /** @type {{x: number, y: number}} */ (points[0]);
-      this.heading_ -= 2 * Math.PI * (point.x - drag.last.x) / this.viewer.scene.canvas.clientHeight;
+      this.heading_ -= CesiumMath.TWO_PI * (point.x - drag.last.x) / this.viewer.scene.canvas.clientHeight;
       drag.last = point;
       this.place_();
     } else if (drag.grab) {
@@ -443,6 +471,10 @@ export default class CesiumIso {
    * @param {PointerEvent} e
    */
   up_(e) {
+    // a pointer pressed elsewhere (on a control over the canvas) and let go here was never the view's
+    if (!this.pointers_.has(e.pointerId)) {
+      return;
+    }
     this.pointers_.delete(e.pointerId);
     // a finger lifted: the other slides on, from here
     this.drag_ = this.pointers_.size ? this.start_(e) : undefined;
@@ -539,7 +571,7 @@ export default class CesiumIso {
       }
       if (this.turning_) {
         const t = Math.min(1, (now - this.turning_.start) / TURN_TIME);
-        this.heading_ = this.turning_.from + (this.turning_.to - this.turning_.from) * easeInOut(t);
+        this.heading_ = CesiumMath.lerp(this.turning_.from, this.turning_.to, easeInOut(t));
         this.place_();
         if (t === 1) {
           this.turning_ = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/cesium-iso",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "BSD-3-Clause",
   "type": "module",
   "repository": {
@@ -21,5 +21,5 @@
     "@cesium/core": ">=0.1.0",
     "@cesium/engine": ">=10"
   },
-  "gitHead": "430bbbb63bf3d60221d670f65d5e51fdb6d5b944"
+  "gitHead": "5c6ee12b4e35f46ff733cf628da105f55121fbf3"
 }