@honua/react 0.0.20-alpha.0

package/esri-compat/map-view.js

@@ -0,0 +1,1175 @@
+import { CompatEventBus, resolveCompatEventBus, safeInvokeCompatListener } from "./event-bus.js";
+import { FeatureFilterCompat } from "./feature-filter.js";
+export class MapViewPopupCompat {
+    visible;
+    location;
+    features;
+    selectedFeature;
+    selectedFeatureIndex;
+    title;
+    content;
+    autoOpenEnabled;
+    dockEnabled;
+    dockOptions;
+    viewModel;
+    onChange;
+    constructor(onChange, options = {}) {
+        this.visible = false;
+        this.location = undefined;
+        this.features = [];
+        this.selectedFeature = undefined;
+        this.selectedFeatureIndex = -1;
+        this.title = undefined;
+        this.content = undefined;
+        this.autoOpenEnabled = options.autoOpenEnabled ?? true;
+        this.dockEnabled = options.dockEnabled ?? false;
+        this.dockOptions = options.dockOptions;
+        this.viewModel = {
+            active: false,
+        };
+        this.onChange = onChange;
+    }
+    open(options = {}) {
+        this.visible = true;
+        this.viewModel.active = true;
+        this.location = options.location;
+        this.features = options.features ? [...options.features] : [];
+        this.selectedFeature = this.features[0];
+        this.selectedFeatureIndex = this.features.length > 0 ? 0 : -1;
+        this.title = options.title;
+        this.content = options.content;
+        this.onChange("open", options);
+    }
+    close() {
+        if (!this.visible) {
+            return;
+        }
+        this.visible = false;
+        this.viewModel.active = false;
+        this.location = undefined;
+        this.features = [];
+        this.selectedFeature = undefined;
+        this.selectedFeatureIndex = -1;
+        this.title = undefined;
+        this.content = undefined;
+        this.onChange("close");
+    }
+    selectFeature(featureOrIndex) {
+        if (this.features.length === 0) {
+            return undefined;
+        }
+        const index = typeof featureOrIndex === "number"
+            ? normalizeFeatureIndex(featureOrIndex, this.features.length)
+            : this.features.findIndex((feature) => feature === featureOrIndex);
+        if (index < 0) {
+            return undefined;
+        }
+        this.selectedFeatureIndex = index;
+        this.selectedFeature = this.features[index];
+        this.onChange("selection");
+        return this.selectedFeature;
+    }
+    next() {
+        if (this.features.length === 0) {
+            return undefined;
+        }
+        const current = this.selectedFeatureIndex >= 0 ? this.selectedFeatureIndex : 0;
+        const next = Math.min(current + 1, this.features.length - 1);
+        return this.selectFeature(next);
+    }
+    previous() {
+        if (this.features.length === 0) {
+            return undefined;
+        }
+        const current = this.selectedFeatureIndex >= 0 ? this.selectedFeatureIndex : 0;
+        const previous = Math.max(current - 1, 0);
+        return this.selectFeature(previous);
+    }
+}
+export class MapViewLayerViewCompat {
+    layer;
+    updating;
+    suspended;
+    hasAllFeatures;
+    hasAllFeaturesInView;
+    visible;
+    filter;
+    effect;
+    watchListeners;
+    eventBus;
+    highlightsInternal;
+    nextHighlightId;
+    constructor(layer, eventBus) {
+        this.layer = layer;
+        this.updating = false;
+        this.suspended = false;
+        this.hasAllFeatures = true;
+        this.hasAllFeaturesInView = true;
+        this.visible = true;
+        this.filter = null;
+        this.effect = undefined;
+        this.watchListeners = new Map();
+        this.eventBus = eventBus;
+        this.highlightsInternal = new Map();
+        this.nextHighlightId = 1;
+    }
+    setFilter(input) {
+        if (input === null || input === undefined) {
+            this.filter = null;
+        }
+        else if (input instanceof FeatureFilterCompat) {
+            this.filter = input;
+        }
+        else {
+            this.filter = new FeatureFilterCompat({ ...input, eventBus: this.eventBus });
+        }
+        this.notifyWatchers("filter", this.filter);
+        this.eventBus?.emit("view.layer-view-filter-changed", { layer: this.layer, filter: this.filter?.toJSON() ?? null }, this);
+    }
+    setEffect(effect) {
+        this.effect = effect;
+        this.notifyWatchers("effect", effect);
+        this.eventBus?.emit("view.layer-view-effect-changed", { layer: this.layer, effect }, this);
+    }
+    setVisibility(visible) {
+        if (this.visible === visible)
+            return;
+        this.visible = visible;
+        this.notifyWatchers("visible", visible);
+        this.eventBus?.emit("view.layer-view-visibility-changed", { layer: this.layer, visible }, this);
+    }
+    get highlights() {
+        return Array.from(this.highlightsInternal.values()).map((record) => ({
+            targets: [...record.targets],
+            options: { ...record.options },
+        }));
+    }
+    watch(propertyName, listener) {
+        let listeners = this.watchListeners.get(propertyName);
+        if (!listeners) {
+            listeners = new Set();
+            this.watchListeners.set(propertyName, listeners);
+        }
+        listeners.add(listener);
+        return {
+            remove: () => {
+                listeners?.delete(listener);
+            },
+        };
+    }
+    setUpdating(value) {
+        this.updating = value;
+        this.notifyWatchers("updating", value);
+        this.eventBus?.emit("view.layer-view-updating-changed", { layer: this.layer, updating: value }, this);
+    }
+    setSuspended(value) {
+        this.suspended = value;
+        this.notifyWatchers("suspended", value);
+        this.eventBus?.emit("view.layer-view-suspended-changed", { layer: this.layer, suspended: value }, this);
+    }
+    setHasAllFeatures(value) {
+        this.hasAllFeatures = value;
+        this.notifyWatchers("hasAllFeatures", value);
+        this.eventBus?.emit("view.layer-view-has-all-features-changed", { layer: this.layer, hasAllFeatures: value }, this);
+    }
+    setHasAllFeaturesInView(value) {
+        this.hasAllFeaturesInView = value;
+        this.notifyWatchers("hasAllFeaturesInView", value);
+        this.eventBus?.emit("view.layer-view-has-all-features-in-view-changed", { layer: this.layer, hasAllFeaturesInView: value }, this);
+    }
+    async queryFeatures(options = {}) {
+        const merged = this.mergeFilter(options);
+        if (isQueryFeaturesProvider(this.layer)) {
+            return this.layer.queryFeatures(merged);
+        }
+        return { features: [] };
+    }
+    mergeFilter(options) {
+        const filter = this.filter;
+        if (!filter)
+            return options;
+        const merged = { ...options };
+        const filterWhere = filter.where;
+        if (typeof filterWhere === "string" && filterWhere.length > 0) {
+            const optionWhere = typeof merged.where === "string" && merged.where.length > 0 ? merged.where : undefined;
+            merged.where = optionWhere ? `(${optionWhere}) AND (${filterWhere})` : filterWhere;
+        }
+        if (filter.objectIds) {
+            if (merged.objectIds === undefined) {
+                merged.objectIds = [...filter.objectIds];
+            }
+            else if (Array.isArray(merged.objectIds)) {
+                const filterIds = new Set(filter.objectIds);
+                merged.objectIds = merged.objectIds.filter((id) => filterIds.has(id));
+            }
+        }
+        if (merged.geometry === undefined && filter.geometry) {
+            merged.geometry = filter.geometry;
+        }
+        if (merged.spatialRelationship === undefined) {
+            merged.spatialRelationship = filter.spatialRelationship;
+        }
+        if (merged.timeExtent === undefined && filter.timeExtent != null) {
+            merged.timeExtent = filter.timeExtent;
+        }
+        return merged;
+    }
+    async queryFeatureCount(options = {}) {
+        const merged = this.mergeFilter(options);
+        if (isQueryFeatureCountProvider(this.layer)) {
+            const count = await this.layer.queryFeatureCount(merged);
+            return normalizeCount(count);
+        }
+        const result = await this.queryFeatures(merged);
+        if (isFeatureCollection(result)) {
+            return result.features.length;
+        }
+        return 0;
+    }
+    async queryObjectIds(options = {}) {
+        const merged = this.mergeFilter(options);
+        if (isQueryObjectIdsProvider(this.layer)) {
+            const ids = await this.layer.queryObjectIds(merged);
+            return Array.isArray(ids)
+                ? ids.filter((value) => typeof value === "number" && Number.isFinite(value))
+                : [];
+        }
+        const result = await this.queryFeatures(merged);
+        if (!isFeatureCollection(result)) {
+            return [];
+        }
+        const ids = [];
+        for (const feature of result.features) {
+            const objectId = extractObjectId(feature);
+            if (typeof objectId === "number" && Number.isFinite(objectId)) {
+                ids.push(objectId);
+            }
+        }
+        return ids;
+    }
+    highlight(target, options = {}) {
+        const id = this.nextHighlightId;
+        this.nextHighlightId += 1;
+        const record = {
+            targets: normalizeHighlightTargets(target),
+            options: { ...options },
+        };
+        this.highlightsInternal.set(id, record);
+        this.notifyWatchers("highlights", this.highlights);
+        this.eventBus?.emit("view.layer-view-highlight-added", {
+            layer: this.layer,
+            targets: [...record.targets],
+            options: { ...record.options },
+            count: this.highlightsInternal.size,
+        }, this);
+        return {
+            remove: () => {
+                this.removeHighlight(id);
+            },
+        };
+    }
+    destroy() {
+        if (this.highlightsInternal.size > 0) {
+            this.highlightsInternal.clear();
+            this.notifyWatchers("highlights", this.highlights);
+            this.eventBus?.emit("view.layer-view-highlights-cleared", { layer: this.layer, count: 0 }, this);
+        }
+        this.watchListeners.clear();
+    }
+    removeHighlight(id) {
+        const record = this.highlightsInternal.get(id);
+        if (!record) {
+            return false;
+        }
+        this.highlightsInternal.delete(id);
+        this.notifyWatchers("highlights", this.highlights);
+        this.eventBus?.emit("view.layer-view-highlight-removed", {
+            layer: this.layer,
+            targets: [...record.targets],
+            options: { ...record.options },
+            count: this.highlightsInternal.size,
+        }, this);
+        return true;
+    }
+    notifyWatchers(propertyName, value) {
+        const listeners = this.watchListeners.get(propertyName);
+        if (!listeners) {
+            return;
+        }
+        for (const listener of listeners) {
+            safeInvokeListener(() => listener(value));
+        }
+    }
+}
+export class MapViewUiCompat {
+    eventBus;
+    onChanged;
+    componentsInternal;
+    constructor(eventBus, onChanged) {
+        this.eventBus = eventBus;
+        this.onChanged = onChanged;
+        this.componentsInternal = [];
+    }
+    get components() {
+        return this.componentsInternal.map((record) => ({ ...record }));
+    }
+    add(componentOrComponents, positionOrOptions = "manual") {
+        if (Array.isArray(componentOrComponents)) {
+            for (const component of componentOrComponents) {
+                this.add(component, positionOrOptions);
+            }
+            return;
+        }
+        const component = componentOrComponents;
+        const options = normalizeUiOptions(positionOrOptions);
+        const existingIndex = this.findComponentIndex(component);
+        if (existingIndex >= 0) {
+            this.componentsInternal.splice(existingIndex, 1);
+        }
+        const insertIndex = normalizeUiIndex(options.index, this.componentsInternal.length);
+        const record = {
+            component,
+            position: options.position,
+            index: insertIndex,
+        };
+        this.componentsInternal.splice(insertIndex, 0, record);
+        this.reindexComponents();
+        this.eventBus.emit("view.ui.component-added", {
+            component,
+            position: record.position,
+            index: record.index,
+        }, this);
+        this.notifyChanged();
+    }
+    remove(componentOrId) {
+        const index = this.findComponentIndex(componentOrId);
+        if (index < 0) {
+            return false;
+        }
+        const [removed] = this.componentsInternal.splice(index, 1);
+        this.reindexComponents();
+        this.eventBus.emit("view.ui.component-removed", {
+            component: removed?.component,
+            position: removed?.position,
+        }, this);
+        this.notifyChanged();
+        return true;
+    }
+    removeAll() {
+        if (this.componentsInternal.length === 0) {
+            return;
+        }
+        const removedComponents = this.componentsInternal.map((record) => record.component);
+        this.componentsInternal.length = 0;
+        this.eventBus.emit("view.ui.components-cleared", {
+            count: removedComponents.length,
+        }, this);
+        this.notifyChanged();
+    }
+    empty(position) {
+        const previous = this.componentsInternal.length;
+        const remaining = this.componentsInternal.filter((record) => record.position !== position);
+        if (remaining.length === previous) {
+            return;
+        }
+        this.componentsInternal.length = 0;
+        this.componentsInternal.push(...remaining);
+        this.reindexComponents();
+        this.eventBus.emit("view.ui.position-cleared", {
+            position,
+            remainingCount: this.componentsInternal.length,
+        }, this);
+        this.notifyChanged();
+    }
+    move(componentOrId, positionOrOptions) {
+        const index = this.findComponentIndex(componentOrId);
+        if (index < 0) {
+            return false;
+        }
+        const [record] = this.componentsInternal.splice(index, 1);
+        const options = normalizeUiOptions(positionOrOptions);
+        const insertIndex = normalizeUiIndex(options.index, this.componentsInternal.length);
+        const movedRecord = {
+            component: record.component,
+            position: options.position,
+            index: insertIndex,
+        };
+        this.componentsInternal.splice(insertIndex, 0, movedRecord);
+        this.reindexComponents();
+        this.eventBus.emit("view.ui.component-moved", {
+            component: movedRecord.component,
+            position: movedRecord.position,
+            index: movedRecord.index,
+        }, this);
+        this.notifyChanged();
+        return true;
+    }
+    find(componentOrId) {
+        const index = this.findComponentIndex(componentOrId);
+        return index < 0 ? undefined : this.componentsInternal[index]?.component;
+    }
+    getComponents(position) {
+        if (position === undefined) {
+            return this.componentsInternal.map((record) => record.component);
+        }
+        return this.componentsInternal.filter((record) => record.position === position).map((record) => record.component);
+    }
+    findComponentIndex(componentOrId) {
+        if (typeof componentOrId === "string") {
+            for (let i = 0; i < this.componentsInternal.length; i += 1) {
+                const component = this.componentsInternal[i]?.component;
+                if (isRecord(component) && component.id === componentOrId) {
+                    return i;
+                }
+            }
+            return -1;
+        }
+        return this.componentsInternal.findIndex((record) => record.component === componentOrId);
+    }
+    reindexComponents() {
+        for (let i = 0; i < this.componentsInternal.length; i += 1) {
+            const existing = this.componentsInternal[i];
+            if (!existing) {
+                continue;
+            }
+            existing.index = i;
+        }
+    }
+    notifyChanged() {
+        this.onChanged?.(this.components);
+    }
+}
+export class MapViewCompat {
+    map;
+    container;
+    loaded;
+    loadStatus;
+    center;
+    zoom;
+    scale;
+    rotation;
+    extent;
+    constraints;
+    padding;
+    highlightOptions;
+    spatialReference;
+    eventBus;
+    popup;
+    ui;
+    eventListeners;
+    watchListeners;
+    layerViews;
+    readyPromise;
+    constructor(options = {}) {
+        this.map = options.map;
+        this.container = options.container;
+        this.loaded = false;
+        this.loadStatus = "not-loaded";
+        this.center = options.center;
+        this.zoom = options.zoom;
+        this.scale = options.scale;
+        this.rotation = options.rotation;
+        this.extent = options.extent;
+        this.constraints = options.constraints;
+        this.padding = options.padding;
+        this.highlightOptions = options.highlightOptions;
+        this.spatialReference = options.spatialReference;
+        this.eventBus = options.eventBus ?? resolveCompatEventBus(options.map, options.container) ?? new CompatEventBus();
+        this.popup = new MapViewPopupCompat((type, popupOptions) => {
+            this.notifyWatchers("popup.visible", this.popup.visible);
+            this.notifyWatchers("popup.features", this.popup.features);
+            this.notifyWatchers("popup.selectedFeature", this.popup.selectedFeature);
+            this.notifyWatchers("popup.selectedFeatureIndex", this.popup.selectedFeatureIndex);
+            this.notifyWatchers("popup.location", this.popup.location);
+            this.notifyWatchers("popup.title", this.popup.title);
+            this.notifyWatchers("popup.content", this.popup.content);
+            this.notifyWatchers("popup.viewModel.active", this.popup.viewModel.active);
+            if (type === "open") {
+                this.eventBus.emit("popup.open", popupOptions, this);
+                this.emit("popup-open", popupOptions);
+            }
+            else if (type === "close") {
+                this.eventBus.emit("popup.close", popupOptions, this);
+                this.emit("popup-close", popupOptions);
+            }
+            else {
+                const selection = {
+                    selectedFeature: this.popup.selectedFeature,
+                    selectedFeatureIndex: this.popup.selectedFeatureIndex,
+                };
+                this.eventBus.emit("popup.selected-feature-changed", selection, this);
+                this.emit("popup-selection-change", selection);
+            }
+        }, extractPopupOptions(options.popup));
+        this.ui = new MapViewUiCompat(this.eventBus, (components) => {
+            this.notifyWatchers("ui.components", components);
+        });
+        this.eventListeners = new Map();
+        this.watchListeners = new Map();
+        this.layerViews = new Map();
+        this.readyPromise = Promise.resolve(this);
+    }
+    async load() {
+        if (this.loaded) {
+            return this;
+        }
+        this.loadStatus = "loading";
+        this.notifyWatchers("loadStatus", this.loadStatus);
+        this.eventBus.emit("view.loading", undefined, this);
+        await this.readyPromise;
+        this.loaded = true;
+        this.notifyWatchers("loaded", this.loaded);
+        this.loadStatus = "loaded";
+        this.notifyWatchers("loadStatus", this.loadStatus);
+        this.eventBus.emit("view.loaded", undefined, this);
+        return this;
+    }
+    async when(callback) {
+        const view = await this.load();
+        if (callback) {
+            callback(view);
+        }
+        return view;
+    }
+    toMap(screenPoint) {
+        const mapPoint = {
+            x: screenPoint.x,
+            y: screenPoint.y,
+        };
+        if (this.spatialReference !== undefined) {
+            mapPoint.spatialReference = this.spatialReference;
+        }
+        return mapPoint;
+    }
+    toScreen(mapPoint) {
+        return {
+            x: mapPoint.x,
+            y: mapPoint.y,
+        };
+    }
+    async hitTest(event = {}) {
+        const mapPoint = event.mapPoint ??
+            (typeof event.x === "number" && typeof event.y === "number" ? this.toMap({ x: event.x, y: event.y }) : undefined);
+        return {
+            results: this.popup.features.map((feature) => ({
+                type: "graphic",
+                graphic: feature,
+                layer: extractGraphicLayer(feature),
+                mapPoint,
+            })),
+        };
+    }
+    async goTo(target, options = {}) {
+        const normalizedTarget = normalizeGoToTarget(target);
+        if (normalizedTarget.center !== undefined) {
+            this.setCenter(normalizedTarget.center);
+        }
+        if (normalizedTarget.zoom !== undefined) {
+            this.setZoom(normalizedTarget.zoom);
+        }
+        if (normalizedTarget.scale !== undefined) {
+            this.setScale(normalizedTarget.scale);
+        }
+        if (normalizedTarget.rotation !== undefined) {
+            this.setRotation(normalizedTarget.rotation);
+        }
+        if (normalizedTarget.extent !== undefined) {
+            this.setExtent(normalizedTarget.extent);
+        }
+        const payload = hasGoToOptions(options) ? { target, options } : target;
+        this.eventBus.emit("view.go-to", payload, this);
+        this.emit("go-to", payload);
+        return this;
+    }
+    async takeScreenshot(options = {}) {
+        const width = normalizeScreenshotDimension(options.width, 1024);
+        const height = normalizeScreenshotDimension(options.height, 768);
+        const format = normalizeScreenshotFormat(options.format);
+        const mimeType = format === "jpg" ? "image/jpeg" : "image/png";
+        const result = {
+            data: new Uint8ClampedArray(width * height * 4),
+            dataUrl: `data:${mimeType};base64,`,
+            width,
+            height,
+        };
+        const payload = {
+            width,
+            height,
+            format,
+            quality: options.quality,
+            area: options.area,
+            ignoreBackground: options.ignoreBackground,
+        };
+        this.eventBus.emit("view.screenshot", payload, this);
+        this.emit("take-screenshot", payload);
+        return result;
+    }
+    openPopup(options = {}) {
+        this.popup.open(options);
+    }
+    closePopup() {
+        this.popup.close();
+    }
+    setCenter(center) {
+        this.center = center;
+        this.notifyWatchers("center", this.center);
+        this.eventBus.emit("view.center-changed", { center }, this);
+    }
+    setZoom(zoom) {
+        this.zoom = zoom;
+        this.notifyWatchers("zoom", this.zoom);
+        this.eventBus.emit("view.zoom-changed", { zoom }, this);
+    }
+    setScale(scale) {
+        this.scale = scale;
+        this.notifyWatchers("scale", this.scale);
+        this.eventBus.emit("view.scale-changed", { scale }, this);
+    }
+    setRotation(rotation) {
+        this.rotation = rotation;
+        this.notifyWatchers("rotation", this.rotation);
+        this.eventBus.emit("view.rotation-changed", { rotation }, this);
+    }
+    setExtent(extent) {
+        this.extent = extent;
+        this.notifyWatchers("extent", this.extent);
+        this.eventBus.emit("view.extent-changed", { extent }, this);
+    }
+    setPadding(padding) {
+        this.padding = padding;
+        this.notifyWatchers("padding", this.padding);
+        this.eventBus.emit("view.padding-changed", { padding }, this);
+    }
+    setConstraints(constraints) {
+        this.constraints = constraints;
+        this.notifyWatchers("constraints", this.constraints);
+        this.eventBus.emit("view.constraints-changed", { constraints }, this);
+    }
+    setHighlightOptions(highlightOptions) {
+        this.highlightOptions = highlightOptions;
+        this.notifyWatchers("highlightOptions", this.highlightOptions);
+        this.eventBus.emit("view.highlight-options-changed", { highlightOptions }, this);
+    }
+    setSpatialReference(spatialReference) {
+        this.spatialReference = spatialReference;
+        this.notifyWatchers("spatialReference", this.spatialReference);
+        this.eventBus.emit("view.spatial-reference-changed", { spatialReference }, this);
+    }
+    /** Returns all currently created layer views as a read-only collection. */
+    get allLayerViews() {
+        return Array.from(this.layerViews.values());
+    }
+    /**
+     * Returns an existing layer view for the given layer, or undefined if
+     * whenLayerView has not yet been called for it.
+     */
+    getLayerView(layer) {
+        return this.layerViews.get(layer);
+    }
+    async whenLayerView(layer) {
+        const existing = this.layerViews.get(layer);
+        if (existing) {
+            return existing;
+        }
+        const layerView = new MapViewLayerViewCompat(layer, this.eventBus);
+        this.layerViews.set(layer, layerView);
+        this.notifyWatchers("allLayerViews", this.allLayerViews);
+        this.eventBus.emit("view.layer-view-created", { layer, layerView }, this);
+        this.eventBus.emit("feature-layer.layerview-create", { view: this, layerView }, this);
+        this.emit("layerview-create", { layer, layerView });
+        return layerView;
+    }
+    on(eventName, listener) {
+        let listeners = this.eventListeners.get(eventName);
+        if (!listeners) {
+            listeners = new Set();
+            this.eventListeners.set(eventName, listeners);
+        }
+        listeners.add(listener);
+        return {
+            remove: () => {
+                listeners?.delete(listener);
+            },
+        };
+    }
+    watch(propertyName, listener) {
+        let listeners = this.watchListeners.get(propertyName);
+        if (!listeners) {
+            listeners = new Set();
+            this.watchListeners.set(propertyName, listeners);
+        }
+        listeners.add(listener);
+        return {
+            remove: () => {
+                listeners?.delete(listener);
+            },
+        };
+    }
+    destroy() {
+        this.eventBus.emit("view.destroy", undefined, this);
+        this.emit("destroy", undefined);
+        this.ui.removeAll();
+        for (const layerView of this.layerViews.values()) {
+            layerView.destroy();
+        }
+        this.layerViews.clear();
+        this.notifyWatchers("allLayerViews", this.allLayerViews);
+        this.closePopup();
+        this.map = undefined;
+        this.notifyWatchers("map", this.map);
+        this.container = undefined;
+        this.notifyWatchers("container", this.container);
+        this.center = undefined;
+        this.notifyWatchers("center", this.center);
+        this.zoom = undefined;
+        this.notifyWatchers("zoom", this.zoom);
+        this.scale = undefined;
+        this.notifyWatchers("scale", this.scale);
+        this.rotation = undefined;
+        this.notifyWatchers("rotation", this.rotation);
+        this.extent = undefined;
+        this.notifyWatchers("extent", this.extent);
+        this.constraints = undefined;
+        this.notifyWatchers("constraints", this.constraints);
+        this.padding = undefined;
+        this.notifyWatchers("padding", this.padding);
+        this.highlightOptions = undefined;
+        this.notifyWatchers("highlightOptions", this.highlightOptions);
+        this.spatialReference = undefined;
+        this.notifyWatchers("spatialReference", this.spatialReference);
+        this.loaded = false;
+        this.notifyWatchers("loaded", this.loaded);
+        this.loadStatus = "not-loaded";
+        this.notifyWatchers("loadStatus", this.loadStatus);
+        this.eventListeners.clear();
+        this.watchListeners.clear();
+    }
+    emit(eventName, payload) {
+        const listeners = this.eventListeners.get(eventName);
+        if (!listeners || listeners.size === 0) {
+            return false;
+        }
+        for (const listener of listeners) {
+            safeInvokeListener(() => listener(payload));
+        }
+        return true;
+    }
+    notifyWatchers(propertyName, value) {
+        const listeners = this.watchListeners.get(propertyName);
+        if (!listeners) {
+            return;
+        }
+        for (const listener of listeners) {
+            safeInvokeListener(() => listener(value));
+        }
+    }
+}
+const GEOMETRY_SEQUENCE_KEYS = ["points", "path", "paths", "ring", "rings"];
+function normalizeGoToTarget(target) {
+    const normalized = {};
+    const targetRecord = asRecord(target);
+    if (targetRecord !== undefined) {
+        if ("target" in targetRecord && targetRecord.target !== undefined) {
+            mergeGoToTarget(normalized, normalizeGoToTarget(targetRecord.target));
+        }
+        if (targetRecord.center !== undefined) {
+            normalized.center = targetRecord.center;
+        }
+        const zoom = normalizeFiniteNumber(targetRecord.zoom);
+        if (zoom !== undefined) {
+            normalized.zoom = zoom;
+        }
+        const scale = normalizeFiniteNumber(targetRecord.scale);
+        if (scale !== undefined) {
+            normalized.scale = scale;
+        }
+        const rotation = normalizeFiniteNumber(targetRecord.rotation);
+        if (rotation !== undefined) {
+            normalized.rotation = rotation;
+        }
+        if (targetRecord.extent !== undefined) {
+            normalized.extent = targetRecord.extent;
+        }
+    }
+    if (normalized.center === undefined) {
+        const derivedCenter = extractGoToCenter(target);
+        if (derivedCenter !== undefined) {
+            normalized.center = derivedCenter;
+        }
+    }
+    if (normalized.extent === undefined) {
+        const derivedExtent = extractGoToExtent(target);
+        if (derivedExtent !== undefined) {
+            normalized.extent = derivedExtent;
+        }
+    }
+    if (normalized.center === undefined && normalized.extent !== undefined) {
+        const centerFromExtent = extractExtentCenter(normalized.extent);
+        if (centerFromExtent !== undefined) {
+            normalized.center = centerFromExtent;
+        }
+    }
+    return normalized;
+}
+function mergeGoToTarget(target, source) {
+    if (source.center !== undefined) {
+        target.center = source.center;
+    }
+    if (source.zoom !== undefined) {
+        target.zoom = source.zoom;
+    }
+    if (source.scale !== undefined) {
+        target.scale = source.scale;
+    }
+    if (source.rotation !== undefined) {
+        target.rotation = source.rotation;
+    }
+    if (source.extent !== undefined) {
+        target.extent = source.extent;
+    }
+}
+function hasGoToOptions(options) {
+    return (options.animate !== undefined ||
+        options.duration !== undefined ||
+        options.speedFactor !== undefined ||
+        options.easing !== undefined);
+}
+function extractGoToCenter(value, visited = new Set()) {
+    if (isCoordinatePair(value)) {
+        return [value[0], value[1]];
+    }
+    if (Array.isArray(value)) {
+        return undefined;
+    }
+    if (!isRecord(value)) {
+        return undefined;
+    }
+    if (visited.has(value)) {
+        return undefined;
+    }
+    visited.add(value);
+    if ("target" in value && value.target !== undefined) {
+        const nestedCenter = extractGoToCenter(value.target, visited);
+        if (nestedCenter !== undefined) {
+            return nestedCenter;
+        }
+    }
+    if ("geometry" in value && value.geometry !== undefined) {
+        const nestedCenter = extractGoToCenter(value.geometry, visited);
+        if (nestedCenter !== undefined) {
+            return nestedCenter;
+        }
+    }
+    return extractPointCenterFromRecord(value);
+}
+function extractGoToExtent(value) {
+    if (!shouldDeriveExtentFromTarget(value)) {
+        return undefined;
+    }
+    const bounds = collectBounds(value);
+    return bounds ? toExtentLike(bounds) : undefined;
+}
+function shouldDeriveExtentFromTarget(value, visited = new Set()) {
+    if (isExtentLike(value)) {
+        return true;
+    }
+    if (isCoordinatePair(value)) {
+        return false;
+    }
+    if (Array.isArray(value)) {
+        return value.length > 0;
+    }
+    if (!isRecord(value)) {
+        return false;
+    }
+    if (visited.has(value)) {
+        return false;
+    }
+    visited.add(value);
+    if ("target" in value && value.target !== undefined && shouldDeriveExtentFromTarget(value.target, visited)) {
+        return true;
+    }
+    if ("geometry" in value && value.geometry !== undefined && shouldDeriveExtentFromTarget(value.geometry, visited)) {
+        return true;
+    }
+    return hasCoordinateSequences(value);
+}
+function collectBounds(value, visited = new Set()) {
+    if (isExtentLike(value)) {
+        return {
+            xmin: value.xmin,
+            ymin: value.ymin,
+            xmax: value.xmax,
+            ymax: value.ymax,
+            spatialReference: value.spatialReference,
+        };
+    }
+    if (isCoordinatePair(value)) {
+        return createBoundsFromPoint(value[0], value[1]);
+    }
+    if (Array.isArray(value)) {
+        let bounds;
+        for (const item of value) {
+            bounds = mergeBounds(bounds, collectBounds(item, visited));
+        }
+        return bounds;
+    }
+    if (!isRecord(value)) {
+        return undefined;
+    }
+    if (visited.has(value)) {
+        return undefined;
+    }
+    visited.add(value);
+    let bounds;
+    if ("target" in value && value.target !== undefined) {
+        bounds = mergeBounds(bounds, collectBounds(value.target, visited));
+    }
+    if ("geometry" in value && value.geometry !== undefined) {
+        bounds = mergeBounds(bounds, collectBounds(value.geometry, visited));
+    }
+    const point = extractPointFromRecord(value);
+    if (point !== undefined) {
+        bounds = mergeBounds(bounds, createBoundsFromPoint(point.x, point.y, point.spatialReference));
+    }
+    for (const key of GEOMETRY_SEQUENCE_KEYS) {
+        if (key in value) {
+            bounds = mergeBounds(bounds, collectBounds(value[key], visited));
+        }
+    }
+    return bounds;
+}
+function hasCoordinateSequences(value) {
+    return GEOMETRY_SEQUENCE_KEYS.some((key) => key in value && Array.isArray(value[key]));
+}
+function extractPointCenterFromRecord(value) {
+    const point = extractPointFromRecord(value);
+    if (point === undefined) {
+        return undefined;
+    }
+    return {
+        x: point.x,
+        y: point.y,
+        spatialReference: point.spatialReference,
+    };
+}
+function extractPointFromRecord(value) {
+    const x = normalizeFiniteNumber(value.x);
+    const y = normalizeFiniteNumber(value.y);
+    if (x !== undefined && y !== undefined) {
+        return {
+            x,
+            y,
+            spatialReference: asSpatialReferenceLike(value.spatialReference),
+        };
+    }
+    const longitude = normalizeFiniteNumber(value.longitude);
+    const latitude = normalizeFiniteNumber(value.latitude);
+    if (longitude !== undefined && latitude !== undefined) {
+        return {
+            x: longitude,
+            y: latitude,
+            spatialReference: asSpatialReferenceLike(value.spatialReference),
+        };
+    }
+    return undefined;
+}
+function asSpatialReferenceLike(value) {
+    return isRecord(value) ? value : undefined;
+}
+function normalizeFiniteNumber(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+function normalizeScreenshotDimension(value, fallback) {
+    if (value === undefined || !Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(1, Math.trunc(value));
+}
+function normalizeScreenshotFormat(format) {
+    if (format === "jpg" || format === "jpeg") {
+        return "jpg";
+    }
+    return "png";
+}
+function createBoundsFromPoint(x, y, spatialReference) {
+    return {
+        xmin: x,
+        ymin: y,
+        xmax: x,
+        ymax: y,
+        spatialReference,
+    };
+}
+function mergeBounds(current, next) {
+    if (next === undefined) {
+        return current;
+    }
+    if (current === undefined) {
+        return next;
+    }
+    return {
+        xmin: Math.min(current.xmin, next.xmin),
+        ymin: Math.min(current.ymin, next.ymin),
+        xmax: Math.max(current.xmax, next.xmax),
+        ymax: Math.max(current.ymax, next.ymax),
+        spatialReference: current.spatialReference ?? next.spatialReference,
+    };
+}
+function toExtentLike(bounds) {
+    return {
+        xmin: bounds.xmin,
+        ymin: bounds.ymin,
+        xmax: bounds.xmax,
+        ymax: bounds.ymax,
+        spatialReference: bounds.spatialReference,
+    };
+}
+function extractExtentCenter(extent) {
+    if (!isExtentLike(extent)) {
+        return undefined;
+    }
+    return {
+        x: (extent.xmin + extent.xmax) / 2,
+        y: (extent.ymin + extent.ymax) / 2,
+        spatialReference: extent.spatialReference,
+    };
+}
+function isCoordinatePair(value) {
+    return (Array.isArray(value) &&
+        value.length >= 2 &&
+        typeof value[0] === "number" &&
+        Number.isFinite(value[0]) &&
+        typeof value[1] === "number" &&
+        Number.isFinite(value[1]));
+}
+function isExtentLike(value) {
+    return (isRecord(value) &&
+        typeof value.xmin === "number" &&
+        Number.isFinite(value.xmin) &&
+        typeof value.ymin === "number" &&
+        Number.isFinite(value.ymin) &&
+        typeof value.xmax === "number" &&
+        Number.isFinite(value.xmax) &&
+        typeof value.ymax === "number" &&
+        Number.isFinite(value.ymax));
+}
+function normalizeUiOptions(input) {
+    if (typeof input === "string") {
+        return {
+            position: input,
+            index: Number.NaN,
+        };
+    }
+    const position = typeof input.position === "string" && input.position.length > 0 ? input.position : "manual";
+    const index = typeof input.index === "number" && Number.isFinite(input.index) ? Math.trunc(input.index) : Number.NaN;
+    return {
+        position,
+        index,
+    };
+}
+function normalizeUiIndex(index, length) {
+    if (!Number.isFinite(index)) {
+        return length;
+    }
+    return Math.min(Math.max(index, 0), length);
+}
+function normalizeFeatureIndex(index, length) {
+    if (!Number.isFinite(index)) {
+        return -1;
+    }
+    const normalized = Math.trunc(index);
+    if (normalized < 0 || normalized >= length) {
+        return -1;
+    }
+    return normalized;
+}
+function normalizeHighlightTargets(target) {
+    if (Array.isArray(target)) {
+        return [...target];
+    }
+    return [target];
+}
+function isQueryFeaturesProvider(value) {
+    return (typeof value === "object" && value !== null && "queryFeatures" in value && typeof value.queryFeatures === "function");
+}
+function isQueryFeatureCountProvider(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "queryFeatureCount" in value &&
+        typeof value.queryFeatureCount === "function");
+}
+function isQueryObjectIdsProvider(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "queryObjectIds" in value &&
+        typeof value.queryObjectIds === "function");
+}
+function isFeatureCollection(value) {
+    return typeof value === "object" && value !== null && "features" in value && Array.isArray(value.features);
+}
+function extractObjectId(feature) {
+    if (typeof feature !== "object" || feature === null) {
+        return undefined;
+    }
+    if ("objectId" in feature && typeof feature.objectId === "number") {
+        return feature.objectId;
+    }
+    if ("attributes" in feature && typeof feature.attributes === "object" && feature.attributes !== null) {
+        if ("OBJECTID" in feature.attributes &&
+            typeof feature.attributes.OBJECTID === "number" &&
+            Number.isFinite(feature.attributes.OBJECTID)) {
+            return feature.attributes.OBJECTID;
+        }
+        if ("objectid" in feature.attributes &&
+            typeof feature.attributes.objectid === "number" &&
+            Number.isFinite(feature.attributes.objectid)) {
+            return feature.attributes.objectid;
+        }
+        if ("objectId" in feature.attributes &&
+            typeof feature.attributes.objectId === "number" &&
+            Number.isFinite(feature.attributes.objectId)) {
+            return feature.attributes.objectId;
+        }
+    }
+    return undefined;
+}
+function normalizeCount(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function extractGraphicLayer(value) {
+    if (!("layer" in value) || value.layer === undefined || value.layer === null) {
+        return undefined;
+    }
+    if (typeof value.layer === "object") {
+        return value.layer;
+    }
+    return undefined;
+}
+function safeInvokeListener(invoke) {
+    try {
+        invoke();
+    }
+    catch {
+        // Listener errors should not break compatibility flow.
+    }
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}
+function asRecord(value) {
+    if (!isRecord(value) || Array.isArray(value)) {
+        return undefined;
+    }
+    return value;
+}
+function extractPopupOptions(popup) {
+    if (!isRecord(popup)) {
+        return {};
+    }
+    return {
+        autoOpenEnabled: typeof popup.autoOpenEnabled === "boolean" ? popup.autoOpenEnabled : undefined,
+        dockEnabled: typeof popup.dockEnabled === "boolean" ? popup.dockEnabled : undefined,
+        dockOptions: popup.dockOptions,
+    };
+}