@mapcreator/sdk 0.0.8 → 0.0.9

package/dist/esm/PopupManager.js

@@ -0,0 +1,297 @@
+import { Popup, } from '@mapcreator/maplibre-gl';
+import { buildTemplate, closeButtonHtml, cycleButtonsHtml } from '@/utils/template';
+import { Registry } from '@/Registry';
+import { HighlightManager } from '@/HighlightManager';
+export class PopupManager {
+    map;
+    popupPosition = 'bottomLeft';
+    mapContainer;
+    popupContainer;
+    feature;
+    currentFeatureId;
+    currentModelId;
+    popupElements = [];
+    language = 'en';
+    promoteIdCache = new Map();
+    publication;
+    floatingPopup;
+    registry;
+    highlightManager;
+    mode;
+    restrictMapMovement;
+    center;
+    constructor(map, mode) {
+        this.map = map;
+        this.mode = mode;
+        this.mapContainer = this.map.getContainer();
+        this.popupContainer = document.createElement('div');
+        this.popupContainer.classList.add('popup-container');
+        this.map.on('mousemove', e => this.onMouseMove(e));
+        this.map.on('click', e => this.onClick(e));
+    }
+    setJobObject(jobObject) {
+        this.registry = new Registry(jobObject);
+    }
+    setParams(popupPosition, language, restrictMapMovement, center) {
+        this.popupPosition = popupPosition;
+        this.language = language;
+        this.restrictMapMovement = restrictMapMovement;
+        this.center = center;
+    }
+    setPublication(publication) {
+        this.publication = publication;
+    }
+    setpopupElements() {
+        this.popupElements = this.registry.getPopupElements();
+    }
+    setHighlightManager() {
+        this.highlightManager = new HighlightManager(this.map, this.registry.getPopupElements());
+    }
+    onMouseMove(e) {
+        this.feature = this.getInteractiveFeature(e);
+        if (this.feature) {
+            this.map.getCanvas().style.cursor = 'pointer';
+        }
+        else {
+            this.map.getCanvas().style.cursor = '';
+        }
+    }
+    onClick(e) {
+        this.feature = this.getInteractiveFeature(e);
+        this.currentModelId = this.feature?.properties?.id;
+        if (this.feature &&
+            (!this.mapContainer.contains(this.popupContainer) ||
+                this.feature?.id !== this.currentFeatureId)) {
+            this.addPopup(e);
+            this.highlightManager?.highlight(this.getPopupElementFromFeature(this.feature));
+        }
+        else {
+            this.hidePopup();
+            this.highlightManager?.highlight(undefined);
+        }
+    }
+    getPopupElementFromFeature(feature) {
+        return this.popupElements.find(item => item.modelId === feature.properties.id);
+    }
+    getInteractiveFeature(e) {
+        const features = this.map.queryRenderedFeatures(e.point);
+        return features.find(feature => {
+            // Overlay interactive feature
+            if (Object.keys(feature.layer.metadata ?? {}).some(key => key.startsWith('mc-interactivity-template'))) {
+                return true;
+            }
+            // User-created interactive feature
+            const model = this.registry.getModel(feature);
+            return !!(model?.popup ?? model?.popupMedia);
+        });
+    }
+    addPopup(e) {
+        if (!this.feature) {
+            return;
+        }
+        this.floatingPopup?.remove();
+        const toNumber = Number(this.feature.id);
+        this.currentFeatureId = isNaN(toNumber) ? this.feature.id : toNumber;
+        const template = this.getTemplate(this.feature);
+        if (!template) {
+            return;
+        }
+        if (this.popupPosition === 'mapElement') {
+            if (this.feature.geometry.type === 'Point') {
+                this.addFloatingPopup(template, this.feature.geometry.coordinates);
+            }
+            else {
+                const { lng, lat } = this.map.unproject(e.point);
+                this.addFloatingPopup(template, [lng, lat]);
+            }
+            return;
+        }
+        this.popupContainer.innerHTML = template;
+        const currentPopup = this.popupElements.find(popup => popup.modelId === this.currentModelId);
+        if (currentPopup) {
+            this.addPopupControls();
+        }
+        this.mapContainer.appendChild(this.popupContainer);
+    }
+    addFloatingPopup(template, lngLat) {
+        const anchor = this.restrictMapMovement ? this.getAnchor(lngLat) : undefined;
+        this.floatingPopup = new Popup({
+            maxWidth: 'none',
+            closeButton: false,
+            offset: 20,
+            ...(anchor !== undefined && { anchor }),
+        })
+            .setLngLat(lngLat)
+            .setHTML(template)
+            .addTo(this.map);
+    }
+    getAnchor(lngLat) {
+        const point = this.map.projectWithScaleCorrection(lngLat);
+        const width = this.map.getContainer().clientWidth;
+        const height = this.map.getContainer().clientHeight;
+        let vertical;
+        let horizontal;
+        if (point.y < height * 0.33) {
+            vertical = 'top';
+        }
+        else if (point.y > height * 0.66) {
+            vertical = 'bottom';
+        }
+        else {
+            vertical = 'center';
+        }
+        if (point.x < width * 0.33) {
+            horizontal = 'left';
+        }
+        else if (point.x > width * 0.66) {
+            horizontal = 'right';
+        }
+        else {
+            horizontal = 'center';
+        }
+        if (vertical === 'center' && horizontal === 'center') {
+            return 'bottom';
+        }
+        else if (vertical === 'center') {
+            return horizontal;
+        }
+        else if (horizontal === 'center') {
+            return vertical;
+        }
+        return `${vertical}-${horizontal}`;
+    }
+    hidePopup() {
+        if (this.popupContainer) {
+            this.popupContainer.remove();
+            this.feature = undefined;
+            this.currentFeatureId = undefined;
+        }
+        if (this.restrictMapMovement && this.center) {
+            this.map.easeTo({ center: this.center });
+        }
+    }
+    getTemplate(feature) {
+        const { layer } = feature;
+        let template;
+        const model = this.registry.getModel(feature);
+        const modelTemplate = model?.popup || model?.popupMedia;
+        if (modelTemplate) {
+            template = buildTemplate(model.popup, model.popupMedia, model.dataBindings ?? {}, this.mode);
+        }
+        else {
+            const options = [];
+            if (this.publication) {
+                options.push(`:${this.publication}-${this.language}`);
+                options.push(`:${this.publication}-:en`);
+            }
+            options.push(`:${this.language}`);
+            options.push(`:en`);
+            options.push('');
+            for (const option of options) {
+                const layerTemplate = layer.metadata?.[`mc-interactivity-template${option}`];
+                if (layerTemplate) {
+                    template = this.fillDatalayerTemplate(feature, layerTemplate, option);
+                    break;
+                }
+            }
+            if (template) {
+                template = `
+          <div class="popup-scroll-wrapper">
+            <div class="mc-popup data-layer text-content">${template}</div>
+          </div>
+        `;
+            }
+        }
+        return template;
+    }
+    htmlToElement(html) {
+        const template = document.createElement('template');
+        template.innerHTML = html.trim();
+        return template.content.firstElementChild;
+    }
+    addPopupControls() {
+        const closeButton = this.htmlToElement(closeButtonHtml);
+        if (closeButton) {
+            closeButton.addEventListener('click', () => {
+                this.hidePopup();
+                this.highlightManager.highlight(undefined);
+            });
+            this.popupContainer.appendChild(closeButton);
+        }
+        if (this.popupElements.length < 2) {
+            return;
+        }
+        const cycleButtons = this.htmlToElement(cycleButtonsHtml);
+        if (cycleButtons) {
+            cycleButtons.querySelector('.prev')?.addEventListener('click', () => this.cyclePopups(false));
+            cycleButtons.querySelector('.next')?.addEventListener('click', () => this.cyclePopups());
+            this.popupContainer.appendChild(cycleButtons);
+        }
+    }
+    fillDatalayerTemplate(feature, html, language) {
+        const attr = 'data-mention-id';
+        const dom = new DOMParser().parseFromString(html, 'text/html').body;
+        for (const el of dom.querySelectorAll(`[${attr}]`)) {
+            const value = this.getProperty(feature, el.getAttribute(attr), language);
+            if (value !== undefined) {
+                el.innerText = value;
+            }
+        }
+        return dom.innerHTML;
+    }
+    getProperty(feature, name, language) {
+        if (!name) {
+            return undefined;
+        }
+        const options = name.endsWith(':en') ? [name.replace(':en', language), name] : [name];
+        for (const option of options) {
+            const property = feature.properties[option] ?? this.getVectorProperty(feature, option);
+            if (property !== undefined) {
+                return property;
+            }
+        }
+        return undefined;
+    }
+    getVectorProperty(feature, name) {
+        let promoteId = this.promoteIdCache.get(feature.source);
+        if (promoteId === undefined) {
+            promoteId = (this.map.getSource(feature.source)?.serialize().promoteId || 'id');
+            this.promoteIdCache.set(feature.source, promoteId);
+        }
+        try {
+            const id = feature.properties[promoteId];
+            return feature.layer.metadata.properties[name][id];
+        }
+        catch (e) {
+            return undefined;
+        }
+    }
+    cyclePopups(forward = true) {
+        const index = this.popupElements?.findIndex(model => model.modelId === this.currentModelId);
+        if (index !== -1) {
+            let nextIndex = 0;
+            if (forward) {
+                nextIndex = index === this.popupElements.length - 1 ? 0 : index + 1;
+            }
+            else {
+                nextIndex = index === 0 ? this.popupElements.length - 1 : index - 1;
+            }
+            const next = this.popupElements?.[nextIndex];
+            this.highlightManager.highlight(next);
+            const template = buildTemplate(next.popup, next.popupMedia, next.dataBindings ?? {}, this.mode);
+            const temp = this.popupContainer;
+            this.popupContainer.remove();
+            temp.innerHTML = template;
+            this.mapContainer.appendChild(temp);
+            this.currentModelId = next.modelId;
+            this.addPopupControls();
+            if (forward) {
+                this.popupContainer.querySelector('.mc-popup-button.next')?.focus();
+            }
+            else {
+                this.popupContainer.querySelector('.mc-popup-button.prev')?.focus();
+            }
+            this.currentFeatureId = undefined;
+        }
+    }
+}

package/dist/{Registry.d.ts → esm/Registry.d.ts}

@@ -1,6 +1,6 @@
-import { Position } from './types/geometry';
-import { JobObject, JobObjectArea, JobObjectCircle, JobObjectDot, JobObjectLine, JobObjectMarker, JobObjectPolygon, PopupMedia, JobObjectDataBindings } from './types/jobObject';
-import { LngLat, MapGeoJSONFeature } from '@mapcreator/maplibre-gl';
+import type { Position } from '@/types/geometry';
+import type { JobObject, JobObjectArea, JobObjectCircle, JobObjectDot, JobObjectLine, JobObjectMarker, JobObjectPolygon, PopupMedia, JobObjectDataBindings } from '@/types/jobObject';
+import type { LngLat, MapGeoJSONFeature } from '@mapcreator/maplibre-gl';
 type Model = JobObjectArea | JobObjectCircle | JobObjectDot | JobObjectLine | JobObjectMarker | JobObjectPolygon;
 export type PopupElement = {
     groupId: string;

package/dist/esm/Registry.js

@@ -0,0 +1,74 @@
+const allModelTypes = ['area', 'circle', 'dot', 'line', 'marker', 'polygon'];
+export class Registry {
+    data;
+    customGroupIds;
+    constructor(jobObject) {
+        this.data = {
+            area: {},
+            circle: {},
+            dot: {},
+            line: {},
+            marker: {},
+            polygon: {},
+        };
+        for (const modelType of allModelTypes) {
+            for (const group of jobObject.registry?.models?.[modelType] ?? []) {
+                this.data[modelType][group.id] = {};
+                for (const model of group.models) {
+                    // MC-2870 Convert the old format area without multiple vector-source group support to the new format
+                    if (modelType === 'area') {
+                        const area = model;
+                        if (area.featureId === undefined) {
+                            area.featureId = Number(area.id);
+                            area.id = `${area.vectorUrl}-${area.id}`;
+                        }
+                    }
+                    this.data[modelType][group.id][model.id] = model;
+                }
+            }
+        }
+        const { beforeWaters = [], beforeBoundaries = [], beforeNames = [], beforeNone = [], } = jobObject.registry?.slots ?? {};
+        this.customGroupIds = [...beforeWaters, ...beforeBoundaries, ...beforeNames, ...beforeNone].map(item => item.groupId);
+    }
+    getModel(feature) {
+        let modelId = String(feature.properties?.id);
+        const metadata = feature.layer.metadata;
+        const groupId = metadata?.['mc-group-id'];
+        const modelType = metadata?.['mc-model-type'];
+        const prefix = metadata?.['mc-model-id-prefix'];
+        if (prefix) {
+            modelId = `${prefix}-${modelId}`;
+        }
+        if (groupId === undefined || modelId === undefined || modelType === undefined) {
+            return undefined;
+        }
+        return this.data[modelType]?.[groupId]?.[modelId];
+    }
+    getPopupElements() {
+        const result = [];
+        const elementTypes = ['circle', 'dot', 'line', 'marker', 'polygon'];
+        for (const groupId of this.customGroupIds) {
+            for (const type of elementTypes) {
+                const groupModels = this.data[type]?.[groupId];
+                if (groupModels) {
+                    for (const [modelId, model] of Object.entries(groupModels)) {
+                        if (model.popup || model.popupMedia) {
+                            result.push({
+                                groupId,
+                                modelId,
+                                popup: model.popup,
+                                popupMedia: model.popupMedia,
+                                lngLat: model.lngLat,
+                                center: model.center,
+                                radius: model.radius,
+                                anchorPoints: model.anchorPoints,
+                                dataBindings: model.dataBindings,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return result.reverse();
+    }
+}

package/dist/{adornments → esm/adornments}/categoricalLegend.d.ts

@@ -1,2 +1,2 @@
-import { JobObjectManualLegend } from '../types/jobObject';
+import type { JobObjectManualLegend } from '@/types/jobObject';
 export declare function getCategoricalLegendSvg(legend: JobObjectManualLegend, defaultFont: string): string;

package/dist/esm/adornments/categoricalLegend.js

@@ -0,0 +1,141 @@
+import { escapeXML, measureTextBlock } from '@/utils/svgHelpers';
+export function getCategoricalLegendSvg(legend, defaultFont) {
+    const padding = 15;
+    const swatchSize = 15;
+    const entryMargin = 20;
+    const swatchMargin = 10;
+    const { title = '', titleFontColor = '#000000', titleFont = defaultFont, titleFontSize = 24, entries, entryFontColor = '#000000', entryFont = defaultFont, entryFontSize = 13, entryShape = 'rectangle', layout = 'vertical', background = '#ffffff', showBackground = false, } = legend;
+    const titleBox = measureTextBlock([title], titleFont, titleFontSize);
+    const entryBoxes = entries.map(entry => measureTextBlock([entry.label], entryFont, entryFontSize));
+    const hasTitle = title.trim().length > 0;
+    let width;
+    let height;
+    if (layout === 'vertical') {
+        width =
+            Math.max(titleBox.width, ...entryBoxes.map(b => b.width + swatchSize + swatchMargin)) +
+                padding * 2;
+        height =
+            padding * 2 +
+                (hasTitle ? titleBox.height + entryMargin : 0) +
+                entryBoxes.reduce((sum, box) => sum + box.height, 0) +
+                Math.max(entryBoxes.length - 1, 0) * entryMargin;
+    }
+    else {
+        width = Math.max(titleBox.width + padding * 2, padding * 2 +
+            entryBoxes.reduce((sum, box) => sum + box.width + swatchSize + swatchMargin, 0) +
+            Math.max(entryBoxes.length - 1, 0) * entryMargin);
+        height =
+            padding * 2 +
+                (hasTitle ? titleBox.height + entryMargin : 0) +
+                Math.max(0, ...entryBoxes.map(b => b.height));
+    }
+    const children = [];
+    if (showBackground) {
+        children.push(`
+      <rect
+        x="0"
+        y="0"
+        rx="10"
+        ry="10"
+        width="${width}"
+        height="${height}"
+        fill="${background}"
+      />
+    `);
+    }
+    let x = padding;
+    let y = padding;
+    if (hasTitle) {
+        children.push(`
+      <text
+        x="${x}"
+        y="${y + titleBox.ascent}"
+        font-family="${titleFont}"
+        font-size="${titleFontSize}"
+        fill="${titleFontColor}"
+      >
+        ${escapeXML(title)}
+      </text>
+    `);
+        y += titleBox.height + entryMargin;
+    }
+    for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        const entryBox = entryBoxes[i];
+        if (entryShape === 'rectangle') {
+            children.push(`
+        <rect
+          x="${x}"
+          y="${y + entryBox.height / 2 - swatchSize / 2}"
+          rx="2"
+          ry="2"
+          width="${swatchSize}"
+          height="${swatchSize}"
+          fill="${entry.color}"
+        />
+      `);
+        }
+        else if (entryShape === 'circle') {
+            children.push(`
+        <circle
+          cx="${x + swatchSize / 2}"
+          cy="${y + entryBox.height / 2}"
+          r="${swatchSize / 2}"
+          fill="${entry.color}"
+        />
+      `);
+        }
+        else if (entryShape === 'line') {
+            children.push(`
+        <line
+          x1="${x}"
+          y1="${y + entryBox.height / 2}"
+          x2="${x + swatchSize}"
+          y2="${y + entryBox.height / 2}"
+          stroke="${entry.color}"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      `);
+        }
+        else if (entryShape === 'icon' && entry.svg.length > 0) {
+            const svgEl = new DOMParser()
+                .parseFromString(entry.svg, 'image/svg+xml')
+                .querySelector('svg');
+            if (svgEl) {
+                svgEl.setAttribute('width', String(swatchSize));
+                svgEl.setAttribute('height', String(swatchSize));
+                svgEl.setAttribute('transform', `translate(${x}, ${y + entryBox.height / 2 - swatchSize / 2})`);
+                children.push(svgEl.outerHTML);
+            }
+        }
+        children.push(`
+      <text
+        x="${x + swatchSize + swatchMargin}"
+        y="${y + entryBox.ascent}"
+        font-family="${entryFont}"
+        font-size="${entryFontSize}"
+        fill="${entryFontColor}"
+      >
+        ${escapeXML(entry.label)}
+      </text>
+    `);
+        if (layout === 'vertical') {
+            y += entryBox.height + entryMargin;
+        }
+        else {
+            x += entryBox.width + swatchSize + swatchMargin + entryMargin;
+        }
+    }
+    return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${width}"
+      height="${height}"
+      viewBox="0 0 ${width} ${height}"
+      style="display: block;"
+    >
+      ${children.join('')}
+    </svg>
+  `;
+}

package/dist/{adornments → esm/adornments}/connectedLegend.d.ts

@@ -1,3 +1,3 @@
-import { Map as MapLibre } from '@mapcreator/maplibre-gl';
-import { JobObject, JobObjectConnectedLegend } from '../types/jobObject';
+import type { Map as MapLibre } from '@mapcreator/maplibre-gl';
+import type { JobObject, JobObjectConnectedLegend } from '@/types/jobObject';
 export declare function useConnectedLegend(legend: JobObjectConnectedLegend, jobObject: JobObject, map: MapLibre, vapiUrl: string, accessToken: string): HTMLElement;