@amcharts/amcharts5 5.15.6 → 5.16.1

package/.internal/charts/map/MapChart.js

@@ -1,7 +1,7 @@
 import { MapChartDefaultTheme } from "./MapChartDefaultTheme";
 import { SerialChart } from "../../core/render/SerialChart";
 import { Rectangle } from "../../core/render/Rectangle";
-import { geoPath } from "d3-geo";
+import { geoPath, geoProjection, geoProjectionMutator } from "d3-geo";
 import { Color } from "../../core/util/Color";
 import { registry } from "../../core/Registry";
 import * as $math from "../../core/util/Math";
@@ -13,180 +13,22 @@ import * as $utils from "../../core/util/Utils";
 export class MapChart extends SerialChart {
     constructor() {
         super(...arguments);
-        Object.defineProperty(this, "_downTranslateX", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_downTranslateY", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_downRotationX", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_downRotationY", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_downRotationZ", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_pLat", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
-        Object.defineProperty(this, "_pLon", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
-        Object.defineProperty(this, "_movePoints", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        Object.defineProperty(this, "_downZoomLevel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 1
-        });
-        Object.defineProperty(this, "_doubleDownDistance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
-        Object.defineProperty(this, "_dirtyGeometries", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "_geometryColection", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: { type: "GeometryCollection", geometries: [] }
-        });
-        Object.defineProperty(this, "_centerLocation", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "_za", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_rxa", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_rya", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_txa", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_tya", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_mapBounds", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: [[0, 0], [0, 0]]
-        });
-        Object.defineProperty(this, "_geoCentroid", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: { longitude: 0, latitude: 0 }
-        });
-        Object.defineProperty(this, "_geoBounds", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: { left: 0, right: 0, top: 0, bottom: 0 }
-        });
-        Object.defineProperty(this, "_prevGeoBounds", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: { left: 0, right: 0, top: 0, bottom: 0 }
-        });
-        Object.defineProperty(this, "_dispatchBounds", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "_wheelDp", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_pw", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_ph", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_mapFitted", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "_centerX", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
-        Object.defineProperty(this, "_centerY", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
+        this._pLat = 0;
+        this._pLon = 0;
+        this._movePoints = {};
+        this._downZoomLevel = 1;
+        this._doubleDownDistance = 0;
+        this._dirtyGeometries = false;
+        this._geometryColection = { type: "GeometryCollection", geometries: [] };
+        this._centerLocation = null;
+        this._mapBounds = [[0, 0], [0, 0]];
+        this._geoCentroid = { longitude: 0, latitude: 0 };
+        this._geoBounds = { left: 0, right: 0, top: 0, bottom: 0 };
+        this._prevGeoBounds = { left: 0, right: 0, top: 0, bottom: 0 };
+        this._dispatchBounds = false;
+        this._mapFitted = false;
+        this._centerX = 0;
+        this._centerY = 0;
     }
     _makeGeoPath() {
         const projection = this.get("projection");
@@ -306,6 +148,37 @@ export class MapChart extends SerialChart {
                 }
             }
         }
+        // Handle projection blend animation (driven by animatePrivate on projectionBlend)
+        if (this.isPrivateDirty("projectionBlend") && this._projectionBlendData) {
+            const d = this._projectionBlendData;
+            const t = this.getPrivate("projectionBlend", 0);
+            // Update the blended raw function
+            d.mutate(t);
+            // Interpolate scale and translate
+            const scale = d.sourceScale + (d.targetScale - d.sourceScale) * t;
+            const tx = d.sourceTranslateX + (d.targetTranslateX - d.sourceTranslateX) * t;
+            const ty = d.sourceTranslateY + (d.targetTranslateY - d.sourceTranslateY) * t;
+            d.blended.scale(scale * this.get("zoomLevel", 1));
+            d.blended.translate([tx, ty]);
+            if (d.blended.rotate) {
+                d.blended.rotate([
+                    this.get("rotationX", 0),
+                    this.get("rotationY", 0),
+                    this.get("rotationZ", 0)
+                ]);
+            }
+            this.setPrivateRaw("mapScale", scale);
+            this.setRaw("translateX", tx);
+            this.setRaw("translateY", ty);
+            this.markDirtyProjection();
+            // Animation complete — install the real target projection
+            if (t >= 1) {
+                this._projectionRaw = d.targetRaw;
+                this._projectionBlendData = undefined;
+                this._projectionBlendAnim = undefined;
+                this.set("projection", d.target);
+            }
+        }
         if (this.isDirty("wheelX") || this.isDirty("wheelY")) {
             this._handleSetWheel();
         }
@@ -923,6 +796,124 @@ export class MapChart extends SerialChart {
             }
         }
     }
+    /**
+     * Animates the map projection transition from the current projection to
+     * the target projection over the specified duration.
+     *
+     * Since d3-geo does not expose raw projection functions on projection
+     * instances, you must pass both the target `GeoProjection` and its
+     * corresponding `GeoRawProjection`. On the first call you must also
+     * pass `sourceRaw` so the method knows the current projection's raw
+     * function. Subsequent calls reuse the previous target's raw
+     * automatically.
+     *
+     * @param target     Target projection (e.g. `geoOrthographic()`)
+     * @param targetRaw  Raw projection function (e.g. `geoOrthographicRaw`)
+     * @param duration   Duration in milliseconds (default: `animationDuration`)
+     * @param easing     Easing function (default: `animationEasing`)
+     * @param sourceRaw  Raw function of the current projection (needed on first call)
+     *
+     * @since 5.16.0
+     */
+    animateProjection(target, targetRaw, duration, easing, sourceRaw) {
+        // Cancel any ongoing projection blend animation
+        if (this._projectionBlendAnim) {
+            this._projectionBlendAnim.stop();
+            this._projectionBlendAnim = undefined;
+            this._projectionBlendData = undefined;
+        }
+        // Use provided sourceRaw, or fall back to stored one from previous call
+        if (sourceRaw) {
+            this._projectionRaw = sourceRaw;
+        }
+        const currentRaw = this._projectionRaw;
+        // If we don't have a source raw, snap immediately
+        if (!currentRaw) {
+            this.set("projection", target);
+            this._projectionRaw = targetRaw;
+            return;
+        }
+        if (duration == null) {
+            duration = this.get("animationDuration", 0);
+        }
+        if (!duration) {
+            this.set("projection", target);
+            this._projectionRaw = targetRaw;
+            return;
+        }
+        if (!easing) {
+            easing = this.get("animationEasing");
+        }
+        // Stop ongoing zoom/pan/rotation animations
+        if (this._za)
+            this._za.stop();
+        if (this._txa)
+            this._txa.stop();
+        if (this._tya)
+            this._tya.stop();
+        if (this._rxa)
+            this._rxa.stop();
+        if (this._rya)
+            this._rya.stop();
+        const w = this.innerWidth();
+        const h = this.innerHeight();
+        // Capture current source state
+        const sScale = this.getPrivate("mapScale");
+        const sTx = this.get("translateX", w / 2);
+        const sTy = this.get("translateY", h / 2);
+        // Compute fitted target state using a temporary projection
+        const tempTarget = geoProjection(targetRaw);
+        tempTarget.fitSize([w, h], this._geometryColection);
+        const tScale = tempTarget.scale();
+        const tTranslate = tempTarget.translate();
+        // Create blended projection via geoProjectionMutator
+        const mutate = geoProjectionMutator((t) => {
+            return (lambda, phi) => {
+                const p0 = currentRaw(lambda, phi);
+                const p1 = targetRaw(lambda, phi);
+                return [
+                    (1 - t) * p0[0] + t * p1[0],
+                    (1 - t) * p0[1] + t * p1[1]
+                ];
+            };
+        });
+        // Initialize at t=0
+        const blended = mutate(0);
+        blended.scale(sScale * this.get("zoomLevel", 1));
+        blended.translate([sTx, sTy]);
+        blended.precision(0.5);
+        if (blended.rotate) {
+            blended.rotate([
+                this.get("rotationX", 0),
+                this.get("rotationY", 0),
+                this.get("rotationZ", 0)
+            ]);
+        }
+        // Install blended projection without triggering isDirty("projection") cascade
+        this.setRaw("projection", blended);
+        this._makeGeoPath();
+        // Store blend data for _prepareChildren to use
+        this._projectionBlendData = {
+            blended,
+            mutate,
+            sourceScale: sScale,
+            targetScale: tScale,
+            sourceTranslateX: sTx,
+            sourceTranslateY: sTy,
+            targetTranslateX: tTranslate[0],
+            targetTranslateY: tTranslate[1],
+            target,
+            targetRaw
+        };
+        // Animate the blend value 0→1 using the standard animation system
+        this._projectionBlendAnim = this.animatePrivate({
+            key: "projectionBlend",
+            from: 0,
+            to: 1,
+            duration,
+            easing
+        });
+    }
     /**
      * Zooms the map in.
      */
@@ -952,16 +943,6 @@ export class MapChart extends SerialChart {
         return 0;
     }
 }
-Object.defineProperty(MapChart, "className", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: "MapChart"
-});
-Object.defineProperty(MapChart, "classNames", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: SerialChart.classNames.concat([MapChart.className])
-});
+MapChart.className = "MapChart";
+MapChart.classNames = SerialChart.classNames.concat([MapChart.className]);
 //# sourceMappingURL=MapChart.js.map