aur-openlayers 19.6.10 → 19.6.12

package/fesm2022/aur-openlayers.mjs

@@ -211,6 +211,114 @@ function collectLayersExtent(layers, layerIds) {
     return isEmpty(extent) ? null : extent;
 }
 
+/**
+ * Композитит canvas'ы ОДНОГО viewport карты в офскрин-canvas заданного размера.
+ *
+ * Берёт только `.ol-layer canvas` внутри переданного `viewport` (а не из всего
+ * документа), применяя per-canvas `opacity` родителя и матрицу `style.transform`
+ * по образцу официального примера экспорта OpenLayers. Размер результата всегда
+ * равен `[width, height]`; high-DPR backing слоёв ужимается в него через матрицу.
+ */
+function compositeViewport(viewport, [width, height], opts = {}) {
+    const out = document.createElement('canvas');
+    out.width = width;
+    out.height = height;
+    const ctx = out.getContext('2d');
+    if (opts.background) {
+        ctx.fillStyle = opts.background;
+        ctx.fillRect(0, 0, width, height);
+    }
+    const canvases = viewport.querySelectorAll('.ol-layer canvas, canvas.ol-layer');
+    canvases.forEach((canvas) => {
+        if (canvas.width === 0 || canvas.height === 0)
+            return;
+        const parent = canvas.parentNode;
+        const opacity = parent?.style.opacity || canvas.style.opacity;
+        ctx.globalAlpha = opacity === '' ? 1 : Number(opacity);
+        const transform = canvas.style.transform;
+        const match = transform ? transform.match(/^matrix\(([^)]+)\)$/) : null;
+        const matrix = match
+            ? match[1].split(',').map(Number)
+            : [
+                (parseFloat(canvas.style.width) || canvas.width) / canvas.width,
+                0,
+                0,
+                (parseFloat(canvas.style.height) || canvas.height) / canvas.height,
+                0,
+                0,
+            ];
+        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        const bgColor = parent?.style.backgroundColor;
+        if (bgColor) {
+            ctx.fillStyle = bgColor;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        ctx.drawImage(canvas, 0, 0);
+    });
+    ctx.globalAlpha = 1;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    return out;
+}
+
+/**
+ * Создаёт функцию `exportImage` для конкретной карты.
+ *
+ * Параллельные вызовы сериализуются (общий мутируемый `map`): каждый следующий
+ * экспорт стартует только после завершения предыдущего. Цикл одного экспорта:
+ * snapshot → setSize → fit → ожидание `rendercomplete` → композит → restore.
+ *
+ * Инвариант: подписка `map.once('rendercomplete')` и последующие
+ * `setSize`/`fit`/`render` выполняются синхронно (никаких `await` до подписки),
+ * иначе следующий экспорт мог бы поймать `rendercomplete` от restore-рендера
+ * предыдущего.
+ */
+function createExportImage(map) {
+    let tail = Promise.resolve();
+    const doExport = async (options) => {
+        const view = map.getView();
+        const size0 = map.getSize();
+        if (!size0) {
+            throw new Error('exportImage: map has no size yet (is it added to the DOM?)');
+        }
+        const resolution0 = view.getResolution();
+        const center0 = view.getCenter();
+        const extent0 = view.calculateExtent(size0);
+        const { size, format = 'image/png', quality = 0.92, background, fit = 'currentExtent', } = options;
+        try {
+            const rendered = new Promise((resolve) => {
+                map.once('rendercomplete', () => resolve());
+            });
+            map.setSize(size);
+            if (fit === 'currentExtent') {
+                view.fit(extent0, { size });
+            }
+            else {
+                if (resolution0 != null)
+                    view.setResolution(resolution0);
+                if (center0)
+                    view.setCenter(center0);
+            }
+            map.render(); // гарантия кадра даже при size === size0
+            await rendered;
+            const canvas = compositeViewport(map.getViewport(), size, { background });
+            return canvas.toDataURL(format, quality);
+        }
+        finally {
+            map.setSize(size0);
+            if (resolution0 != null)
+                view.setResolution(resolution0);
+            if (center0)
+                view.setCenter(center0);
+            map.render();
+        }
+    };
+    return (options) => {
+        const run = tail.then(() => doExport(options));
+        tail = run.catch(() => { }); // очередь переживает ошибку одного экспорта
+        return run;
+    };
+}
+
 const createMapContext = (map, layers, popupHost, scheduler = new FlushScheduler()) => {
     return {
         map,
@@ -227,6 +335,7 @@ const createMapContext = (map, layers, popupHost, scheduler = new FlushScheduler
             if (extent)
                 map.getView().fit(extent, toOlFitOptions(opts, map));
         },
+        exportImage: createExportImage(map),
     };
 };
 
@@ -2665,6 +2774,117 @@ class BufferDecorationManager {
     }
 }
 
+/** Creates a point Feature at `coord` with the given style and id. */
+function makePoint(coord, style, id) {
+    const f = new Feature({ geometry: new Point(coord) });
+    f.setId(id);
+    f.setStyle(Array.isArray(style) ? style : [style]);
+    return f;
+}
+class StartFinishDecorationManager {
+    source = new VectorSource();
+    layer;
+    config;
+    map;
+    parentLayer;
+    parentApi;
+    moveEndKey;
+    visibilityKey;
+    unsubCollection;
+    unsubChanges;
+    rafId = null;
+    constructor(options) {
+        this.config = options.config;
+        this.map = options.map;
+        this.parentLayer = options.parentLayer;
+        this.parentApi = options.parentApi;
+        const parentZ = this.parentLayer.getZIndex() ?? 0; // ?? 0 mirrors BufferDecorationManager: layers without explicit zIndex default to 0, so decoration sits at parentZ + 3
+        this.layer = new VectorLayer({
+            source: this.source,
+            zIndex: parentZ + 3,
+        });
+        this.layer.set('id', '__decoration_start_finish');
+        this.map.addLayer(this.layer);
+        this.syncVisibility();
+        this.syncOpacity();
+        this.visibilityKey = this.parentLayer.on('change:visible', () => {
+            this.syncVisibility();
+            if (this.parentLayer.getVisible()) {
+                this.scheduleUpdate();
+            }
+        });
+        this.moveEndKey = this.map.on('moveend', () => this.scheduleUpdate());
+        this.unsubCollection = this.parentApi.onModelsCollectionChanged(() => this.scheduleUpdate());
+        this.unsubChanges = this.parentApi.onModelsChanged?.(() => this.scheduleUpdate());
+    }
+    scheduleUpdate() {
+        if (this.rafId !== null)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.rebuild();
+        });
+    }
+    rebuild() {
+        this.syncVisibility();
+        this.syncOpacity();
+        if (!this.parentLayer.getVisible()) {
+            this.source.clear();
+            return;
+        }
+        const parentSource = this.parentLayer.getSource();
+        if (!parentSource) {
+            this.source.clear();
+            return;
+        }
+        const { start, finish, collapsed } = this.config;
+        const features = [];
+        parentSource.getFeatures().forEach((feature, i) => {
+            const geom = feature.getGeometry();
+            if (!geom)
+                return;
+            if (!(geom instanceof LineString) && !(geom instanceof MultiLineString))
+                return;
+            const first = geom.getFirstCoordinate();
+            const last = geom.getLastCoordinate();
+            if (!first || !last || first.length < 2 || last.length < 2)
+                return;
+            const isCollapsed = first[0] === last[0] && first[1] === last[1];
+            if (isCollapsed) {
+                const style = collapsed ?? start ?? finish;
+                if (style)
+                    features.push(makePoint(first, style, `__startfinish_collapsed_${i}`));
+                return;
+            }
+            if (start)
+                features.push(makePoint(first, start, `__startfinish_start_${i}`));
+            if (finish)
+                features.push(makePoint(last, finish, `__startfinish_finish_${i}`));
+        });
+        this.source.clear();
+        if (features.length > 0) {
+            this.source.addFeatures(features);
+        }
+    }
+    syncVisibility() {
+        this.layer.setVisible(this.parentLayer.getVisible());
+    }
+    syncOpacity() {
+        this.layer.setOpacity(this.parentLayer.getOpacity());
+    }
+    dispose() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        unByKey(this.moveEndKey);
+        unByKey(this.visibilityKey);
+        this.unsubCollection();
+        this.unsubChanges?.();
+        this.map.removeLayer(this.layer);
+    }
+}
+
 class LayerManager {
     map;
     layers = {};
@@ -2740,6 +2960,17 @@ class LayerManager {
                 });
                 this.decorationManagers.push(decorationManager);
             }
+            if (descriptor.feature.decorations?.startFinish) {
+                const sf = descriptor.feature.decorations.startFinish;
+                if (sf.start || sf.finish || sf.collapsed) {
+                    this.decorationManagers.push(new StartFinishDecorationManager({
+                        map: this.map,
+                        parentLayer: layer,
+                        parentApi: api,
+                        config: sf,
+                    }));
+                }
+            }
         });
         this.interactions = new InteractionManager({
             ctx,