@prushforth/map 1.0.0-preview.1

package/dist/cjs/map-meta.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var ContextMenu = require('./index-CW_WOSnc.js');
+
+const MapMeta = class {
+    constructor(hostRef) {
+        ContextMenu.registerInstance(this, hostRef);
+    }
+    get el() { return ContextMenu.getElement(this); }
+    name;
+    content;
+    nameChanged(newValue, oldValue) {
+    }
+    contentChanged(newValue, oldValue) {
+    }
+    // Validate 'cs' content
+    set contentValue(val) {
+        if (this.name === 'cs' &&
+            val &&
+            !['tcrs', 'tilematrix', 'pcrs', 'gcrs', 'map', 'tile'].includes(val)) {
+            return;
+        }
+        this.content = val;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    render() {
+        return null;
+    }
+    static get watchers() { return {
+        "name": [{
+                "nameChanged": 0
+            }],
+        "content": [{
+                "contentChanged": 0
+            }]
+    }; }
+};
+
+exports.map_meta = MapMeta;

package/dist/cjs/map-properties.cjs.entry.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var ContextMenu = require('./index-CW_WOSnc.js');
+
+const MapProperties = class {
+    constructor(hostRef) {
+        ContextMenu.registerInstance(this, hostRef);
+    }
+    render() {
+        return null;
+    }
+};
+
+exports.map_properties = MapProperties;

package/dist/cjs/map-select.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var ContextMenu = require('./index-CW_WOSnc.js');
+
+const MapSelect = class {
+    constructor(hostRef) {
+        ContextMenu.registerInstance(this, hostRef);
+    }
+    get el() { return ContextMenu.getElement(this); }
+    name;
+    selectDetails;
+    htmlSelect;
+    connectedCallback() {
+        this._createLayerControlForSelect();
+        // Publish as lowercase to match MapML source compatibility
+        this.el.selectdetails = this.selectDetails;
+        this.el.htmlselect = this.htmlSelect;
+    }
+    disconnectedCallback() { }
+    nameChanged(newValue, oldValue) {
+    }
+    _createLayerControlForSelect() {
+        this.htmlSelect = this.transcribe();
+        const selectdetails = document.createElement('details');
+        selectdetails.className = 'mapml-layer-item-details mapml-control-layers';
+        const selectsummary = document.createElement('summary');
+        const selectSummaryLabel = document.createElement('label');
+        selectSummaryLabel.innerText = this.name || '';
+        if (this.el.hasAttribute('id'))
+            selectSummaryLabel.setAttribute('for', this.el.getAttribute('id'));
+        selectsummary.appendChild(selectSummaryLabel);
+        selectdetails.appendChild(selectsummary);
+        selectdetails.appendChild(this.htmlSelect);
+        this.selectDetails = selectdetails;
+        // Add change event listener to trigger redraw
+        this.htmlSelect.addEventListener('change', () => {
+            this.el.parentElement?._extentLayer?.redraw?.();
+        });
+    }
+    transcribe() {
+        const select = document.createElement('select');
+        const elementAttrNames = this.el.getAttributeNames();
+        for (let i = 0; i < elementAttrNames.length; i++) {
+            select.setAttribute(elementAttrNames[i], this.el.getAttribute(elementAttrNames[i]));
+        }
+        // Use querySelectorAll to get actual DOM children (this.el.children is a FakeNodeList in Stencil)
+        const options = this.el.querySelectorAll('map-option');
+        for (let i = 0; i < options.length; i++) {
+            const option = document.createElement('option');
+            const optionAttrNames = options[i].getAttributeNames();
+            for (let j = 0; j < optionAttrNames.length; j++) {
+                option.setAttribute(optionAttrNames[j], options[i].getAttribute(optionAttrNames[j]));
+            }
+            option.innerHTML = options[i].innerHTML;
+            select.appendChild(option);
+        }
+        return select;
+    }
+    async whenReady() {
+        return new Promise((resolve, reject) => {
+            let interval, failureTimer;
+            if (this.selectDetails) {
+                resolve();
+            }
+            else {
+                const selectElement = this;
+                interval = setInterval(testForSelect, 300, selectElement);
+                failureTimer = setTimeout(selectNotDefined, 10000);
+            }
+            function testForSelect(selectElement) {
+                if (selectElement.selectDetails) {
+                    clearInterval(interval);
+                    clearTimeout(failureTimer);
+                    resolve();
+                }
+                else if (!selectElement.el.isConnected) {
+                    clearInterval(interval);
+                    clearTimeout(failureTimer);
+                    reject('map-select was disconnected while waiting to be ready');
+                }
+            }
+            function selectNotDefined() {
+                clearInterval(interval);
+                clearTimeout(failureTimer);
+                reject('Timeout reached waiting for map-select to be ready');
+            }
+        });
+    }
+    render() {
+        // Render the details/summary/select structure
+        return null;
+    }
+    static get watchers() { return {
+        "name": [{
+                "nameChanged": 0
+            }]
+    }; }
+};
+
+exports.map_select = MapSelect;

package/dist/cjs/map-span.cjs.entry.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var ContextMenu = require('./index-CW_WOSnc.js');
+
+const MapSpan = class {
+    constructor(hostRef) {
+        ContextMenu.registerInstance(this, hostRef);
+    }
+    get el() { return ContextMenu.getElement(this); }
+    connectedCallback() { }
+    disconnectedCallback() { }
+};
+
+exports.map_span = MapSpan;

package/dist/cjs/map-style.cjs.entry.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var ContextMenu = require('./index-CW_WOSnc.js');
+
+const MapStyle = class {
+    constructor(hostRef) {
+        ContextMenu.registerInstance(this, hostRef);
+    }
+    get el() { return ContextMenu.getElement(this); }
+    media;
+    _mql;
+    _changeHandler;
+    _observer;
+    styleElement;
+    _stylesheetHost;
+    async mediaChanged(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            await this._registerMediaQuery(newValue);
+        }
+    }
+    getMapEl() {
+        return window.M?.Util?.getClosest?.(this.el, 'gcds-ext-map') || this.el.closest('gcds-ext-map');
+    }
+    _connect() {
+        this.styleElement = document.createElement('style');
+        this.styleElement.mapStyle = this.el;
+        this.styleElement.textContent = this.el.textContent;
+        this._copyAttributes(this.el, this.styleElement);
+        // Expose styleElement as a public property on the element
+        Object.defineProperty(this.el, 'styleElement', {
+            get: () => this.styleElement,
+            configurable: true,
+            enumerable: true
+        });
+        if (!this._stylesheetHost)
+            return;
+        // Try to render via layer's renderStyles method
+        // Note: If layer is not yet ready, the layer will call renderStyles
+        // on all map-style children when it finishes initialization
+        if (this._stylesheetHost._layer) {
+            this._stylesheetHost._layer.renderStyles?.(this.el);
+        }
+        else if (this._stylesheetHost._templatedLayer) {
+            this._stylesheetHost._templatedLayer.renderStyles?.(this.el);
+        }
+        else if (this._stylesheetHost._extentLayer) {
+            this._stylesheetHost._extentLayer.renderStyles?.(this.el);
+        }
+        this._observer = new MutationObserver(() => {
+            this.styleElement.textContent = this.el.textContent;
+        });
+        this._observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
+    _disconnect() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = undefined;
+        }
+        if (this._stylesheetHost && this.styleElement) {
+            this.styleElement.remove();
+            this.styleElement = undefined;
+        }
+    }
+    _copyAttributes(source, target) {
+        Array.from(source.attributes).forEach((attribute) => {
+            if (attribute.nodeName !== 'media' && attribute.nodeName !== 'data-testid') {
+                target.setAttribute(attribute.nodeName, attribute.nodeValue);
+            }
+        });
+    }
+    async _registerMediaQuery(mq) {
+        if (!this._changeHandler) {
+            this._changeHandler = () => {
+                this._disconnect();
+                if (this._mql && this._mql.matches) {
+                    this._connect();
+                }
+            };
+        }
+        if (mq) {
+            const map = this.getMapEl();
+            if (!map)
+                return;
+            if (typeof map.whenReady === 'function')
+                await map.whenReady();
+            if (this._mql) {
+                this._mql.removeEventListener('change', this._changeHandler);
+            }
+            this._mql = map.matchMedia(mq);
+            this._changeHandler();
+            this._mql.addEventListener('change', this._changeHandler);
+        }
+        else if (this._mql) {
+            this._mql.removeEventListener('change', this._changeHandler);
+            this._mql = undefined;
+            this._disconnect();
+            this._connect();
+        }
+    }
+    async connectedCallback() {
+        this._stylesheetHost = this.el.getRootNode() instanceof ShadowRoot
+            ? this.el.getRootNode().host
+            : this.el.parentElement;
+        if (!this._stylesheetHost)
+            return;
+        if (this.media) {
+            await this._registerMediaQuery(this.media);
+        }
+        else {
+            this._connect();
+        }
+    }
+    disconnectedCallback() {
+        this._disconnect();
+    }
+    static get watchers() { return {
+        "media": [{
+                "mediaChanged": 0
+            }]
+    }; }
+};
+
+exports.map_style = MapStyle;

package/dist/cjs/map-tile.cjs.entry.js

@@ -0,0 +1,274 @@
+'use strict';
+
+var ContextMenu = require('./index-CW_WOSnc.js');
+var MapTileLayer = require('./MapTileLayer-D4vp8bR4.js');
+var calculatePosition = require('./calculatePosition-CDcdNl7C.js');
+
+const MapTile = class {
+    constructor(hostRef) {
+        ContextMenu.registerInstance(this, hostRef);
+    }
+    get el() { return ContextMenu.getElement(this); }
+    // "Set once" properties - these are set once at connection and never change
+    row;
+    col;
+    zoom;
+    src;
+    _parentEl;
+    _tileLayer;
+    _extent;
+    // Store initial values to prevent changes after connection
+    _initialRow;
+    _initialCol;
+    _initialZoom;
+    _hasConnected = false;
+    srcChanged(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            if (this._extent)
+                this._calculateExtent();
+            if (this._tileLayer) {
+                this._tileLayer.removeMapTile(this.el);
+                this._tileLayer.addMapTile(this.el);
+            }
+        }
+    }
+    connectedCallback() {
+        // Capture initial values before anything else - these won't change
+        // Read from attributes first, then fall back to props
+        this._initialRow = this.el.hasAttribute('row') ? +this.el.getAttribute('row') : (this.row ?? 0);
+        this._initialCol = this.el.hasAttribute('col') ? +this.el.getAttribute('col') : (this.col ?? 0);
+        // For zoom, check: explicit attribute -> prop -> map-meta value -> map zoom -> 0
+        let zoomValue = 0;
+        if (this.el.hasAttribute('zoom')) {
+            zoomValue = +this.el.getAttribute('zoom');
+        }
+        else if (this.zoom !== undefined) {
+            zoomValue = this.zoom;
+        }
+        else {
+            // Try to get zoom from map-meta element
+            const metaZoom = this._getMetaZoomValue();
+            if (metaZoom !== null) {
+                zoomValue = metaZoom;
+            }
+            else {
+                zoomValue = this.getMapEl()?.zoom || 0;
+            }
+        }
+        this._initialZoom = zoomValue;
+        this._hasConnected = true;
+        // Override getAttribute/setAttribute on the element to prevent row/col/zoom changes
+        const originalGetAttribute = this.el.getAttribute.bind(this.el);
+        const originalSetAttribute = this.el.setAttribute.bind(this.el);
+        this.el.getAttribute = (name) => {
+            if (this._hasConnected) {
+                switch (name) {
+                    case 'row':
+                        return String(this._initialRow);
+                    case 'col':
+                        return String(this._initialCol);
+                    case 'zoom':
+                        return String(this._initialZoom);
+                }
+            }
+            return originalGetAttribute(name);
+        };
+        this.el.setAttribute = (name, value) => {
+            if (this._hasConnected) {
+                switch (name) {
+                    case 'row':
+                    case 'col':
+                    case 'zoom':
+                        return; // Ignore changes to these after connection
+                }
+            }
+            originalSetAttribute(name, value);
+        };
+        // Override property accessors on the element to return initial values
+        Object.defineProperties(this.el, {
+            row: {
+                get: () => this._initialRow,
+                configurable: true
+            },
+            col: {
+                get: () => this._initialCol,
+                configurable: true
+            },
+            zoom: {
+                get: () => this._initialZoom,
+                configurable: true
+            }
+        });
+        // Find parent element (handle shadow DOM)
+        const parentNode = this.el.parentNode;
+        this._parentEl =
+            parentNode.nodeName === 'MAP-LAYER' ||
+                parentNode.nodeName === 'LAYER-' ||
+                parentNode.nodeName === 'MAP-LINK'
+                ? parentNode
+                : parentNode.host;
+        // Preload image
+        const imgObj = new Image();
+        imgObj.src = this.src || '';
+        this._createOrGetTileLayer();
+    }
+    disconnectedCallback() {
+        if (this._tileLayer) {
+            this._tileLayer.removeMapTile(this.el);
+            if (this._tileLayer._mapTiles && this._tileLayer._mapTiles.length === 0) {
+                this._tileLayer.remove();
+                this._tileLayer = null;
+                delete this._tileLayer;
+                const entry = this?._parentEl?._layerRegistry?.get(this.position);
+                if (entry) {
+                    entry.count--;
+                    if (entry.count === 0) {
+                        this._parentEl._layerRegistry.delete(this.position);
+                    }
+                }
+            }
+        }
+    }
+    // "Set once" property pattern for row, col, zoom
+    // After connection, always return the initial values
+    get rowValue() {
+        return this._hasConnected ? this._initialRow : +this.row;
+    }
+    get colValue() {
+        return this._hasConnected ? this._initialCol : +this.col;
+    }
+    get zoomValue() {
+        return this._hasConnected ? this._initialZoom : +this.zoom;
+    }
+    get extent() {
+        if (!this._extent)
+            this._calculateExtent();
+        return this._extent;
+    }
+    get position() {
+        return calculatePosition.calculatePosition(this.el);
+    }
+    isFirst() {
+        return !this._parentEl._layerRegistry.has(this.position);
+    }
+    getPrevious() {
+        if (this.isFirst())
+            return null;
+        return this.el.previousElementSibling;
+    }
+    async zoomTo() {
+        const extent = this.extent;
+        const map = this.getMapEl()?._map;
+        if (!extent || !map)
+            return;
+        const xmin = extent.topLeft.pcrs.horizontal, xmax = extent.bottomRight.pcrs.horizontal, ymin = extent.bottomRight.pcrs.vertical, ymax = extent.topLeft.pcrs.vertical, bounds = window.L.bounds(window.L.point(xmin, ymin), window.L.point(xmax, ymax)), center = map.options.crs.unproject(bounds.getCenter(true)), maxZoom = extent.zoom.maxZoom, minZoom = extent.zoom.minZoom;
+        map.setView(center, ContextMenu.Util.getMaxZoom(bounds, map, minZoom, maxZoom), { animate: false });
+    }
+    getMapEl() {
+        return ContextMenu.Util.getClosest(this.el, 'gcds-ext-map');
+    }
+    getLayerEl() {
+        return ContextMenu.Util.getClosest(this.el, 'map-layer,layer-');
+    }
+    _getMetaZoomValue() {
+        // Look for <map-meta name="zoom" content="...value=N..."> in parent layer
+        const layerEl = this.getLayerEl();
+        if (!layerEl)
+            return null;
+        const metaZoom = layerEl.querySelector('map-meta[name="zoom"][content]');
+        if (!metaZoom)
+            return null;
+        const content = metaZoom.getAttribute('content');
+        if (!content)
+            return null;
+        // Parse content like "min=1,max=4,value=2"
+        const valueMatch = content.match(/value=(\d+)/);
+        if (valueMatch && valueMatch[1]) {
+            return parseInt(valueMatch[1], 10);
+        }
+        return null;
+    }
+    getMeta(metaName) {
+        const name = metaName.toLowerCase();
+        if (name !== 'cs' && name !== 'zoom' && name !== 'projection')
+            return;
+        const sdMeta = this._parentEl?.shadowRoot?.querySelector(`map-meta[name=${name}][content]`);
+        if (this._parentEl?.nodeName === 'MAP-LINK') {
+            return sdMeta || this._parentEl.parentElement?.getMeta(metaName);
+        }
+        else {
+            return this._parentEl?.src
+                ? this._parentEl.shadowRoot?.querySelector(`map-meta[name=${name}][content]`)
+                : this._parentEl.querySelector(`map-meta[name=${name}][content]`);
+        }
+    }
+    async _createOrGetTileLayer() {
+        if (!this._parentEl?.whenReady)
+            return;
+        await this._parentEl.whenReady();
+        const parentElement = this._parentEl;
+        if (this.isFirst()) {
+            this._tileLayer = MapTileLayer.mapTileLayer({
+                projection: this.getMapEl()?.projection,
+                opacity: 1,
+                pane: parentElement._templatedLayer?.getContainer?.() ||
+                    parentElement._layer?.getContainer?.(),
+                zIndex: this.position
+            });
+            this._tileLayer.addMapTile(this.el);
+            if (parentElement._templatedLayer?.addLayer) {
+                parentElement._templatedLayer.addLayer(this._tileLayer);
+            }
+            else {
+                parentElement._layer?.addLayer?.(this._tileLayer);
+            }
+            // Publish _tileLayer on the element for test access
+            this.el._tileLayer = this._tileLayer;
+            // Add this position to the parent's _layerRegistry with layer reference and count = 1
+            parentElement._layerRegistry.set(this.position, { layer: this._tileLayer, count: 1 });
+        }
+        else {
+            // get the previously registered TileLayer for this position
+            const entry = parentElement._layerRegistry.get(this.position);
+            this._tileLayer = entry?.layer;
+            if (entry) {
+                entry.count++;
+            }
+            if (this._tileLayer) {
+                this._tileLayer.addMapTile(this.el);
+                // Publish _tileLayer on the element for test access
+                this.el._tileLayer = this._tileLayer;
+            }
+        }
+    }
+    _calculateExtent() {
+        const mapEl = this.getMapEl();
+        if (!mapEl || !mapEl._map)
+            return;
+        const map = mapEl._map;
+        const projection = map.options.projection;
+        const tileSize = window.M[projection].options.crs.tile.bounds.max.x;
+        const pixelX = this.colValue * tileSize;
+        const pixelY = this.rowValue * tileSize;
+        const pixelBounds = window.L.bounds(window.L.point(pixelX, pixelY), window.L.point(pixelX + tileSize, pixelY + tileSize));
+        const pcrsBounds = ContextMenu.Util.pixelToPCRSBounds(pixelBounds, this.zoomValue, projection);
+        this._extent = ContextMenu.Util._convertAndFormatPCRS(pcrsBounds, map.options.crs, projection);
+        this._extent.zoom = {
+            minZoom: this.zoomValue,
+            maxZoom: this.zoomValue,
+            minNativeZoom: this.zoomValue,
+            maxNativeZoom: this.zoomValue
+        };
+    }
+    render() {
+        // This component does not render any visible DOM
+        return null;
+    }
+    static get watchers() { return {
+        "src": [{
+                "srcChanged": 0
+            }]
+    }; }
+};
+
+exports.map_tile = MapTile;

package/dist/cjs/renderStyles-yOMXvf12.js

@@ -0,0 +1,59 @@
+'use strict';
+
+function renderStyles(mapStyleOrLink) {
+  let e = mapStyleOrLink.link || mapStyleOrLink.styleElement;
+  if (e === undefined) return;
+
+  const getStylePositionAndNode = (styleOrLink) => {
+    // Get all already rendered <style> or <link> elements in the shadow DOM container
+    const renderedSiblingStyles = Array.from(
+      this._container.querySelectorAll(':scope > style, :scope > link[rel="stylesheet"]')
+    );
+
+    // If there are no rendered styles or links yet, insert before any content
+    if (renderedSiblingStyles.length === 0) {
+      const lastChild = this._container.lastChild;
+      if (!lastChild) {
+        return { position: 'afterbegin', node: this._container };
+      }
+      
+      const isSVG = lastChild.nodeName === 'SVG';
+      const isContainer = lastChild.classList?.contains('mapml-vector-container') ||
+                          lastChild.classList?.contains('mapml-extentlayer-container');
+      
+      return (isSVG || isContainer)
+        ? { position: 'beforebegin', node: lastChild }
+        : { position: 'afterend', node: lastChild };
+    }
+
+    // Peek into the light DOM context for comparison
+    const mapStyleOrLinkLightDOMElement =
+      styleOrLink.mapStyle || styleOrLink.mapLink;
+
+    // Traverse the rendered siblings in the shadow DOM
+    for (let i = 0; i < renderedSiblingStyles.length; i++) {
+      const rendered = renderedSiblingStyles[i];
+      const siblingMapStyleOrLinkLightDOMElement =
+        rendered.mapStyle || rendered.mapLink;
+
+      // Compare the light DOM order
+      if (
+        siblingMapStyleOrLinkLightDOMElement &&
+        mapStyleOrLinkLightDOMElement.compareDocumentPosition(
+          siblingMapStyleOrLinkLightDOMElement
+        ) & Node.DOCUMENT_POSITION_FOLLOWING
+      ) {
+        // Insert the new style or link before the already-rendered sibling element
+        return { position: 'beforebegin', node: rendered };
+      }
+    }
+
+    // If no preceding sibling was found, insert after the last rendered element
+    return { position: 'afterend', node: renderedSiblingStyles.at(-1) };
+  };
+
+  let positionAndNode = getStylePositionAndNode(e);
+  positionAndNode.node.insertAdjacentElement(positionAndNode.position, e);
+}
+
+exports.renderStyles = renderStyles;