@mapcreator/sdk 0.0.9 → 0.0.10

package/dist/esm/PopupManager.js

@@ -1,297 +0,0 @@
-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/esm/Registry.js

@@ -1,74 +0,0 @@
-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/esm/adornments/categoricalLegend.js

@@ -1,141 +0,0 @@
-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>
-  `;
-}