@prushforth/map 1.0.0-preview.1

package/dist/collection/components/utils/mapml/elementSupport/extents/createLayerControlForExtent.js

@@ -0,0 +1,259 @@
+import { DomUtil, SVG, DomEvent, stamp } from 'leaflet';
+import { Util } from '../../Util.js';
+
+export var createLayerControlExtentHTML = function () {
+  var extent = DomUtil.create('fieldset', 'mapml-layer-extent'),
+    extentProperties = DomUtil.create(
+      'div',
+      'mapml-layer-item-properties',
+      extent
+    ),
+    extentSettings = DomUtil.create('div', 'mapml-layer-item-settings', extent),
+    extentLabel = DomUtil.create(
+      'label',
+      'mapml-layer-item-toggle',
+      extentProperties
+    ),
+    input = DomUtil.create('input'),
+    svgExtentControlIcon = SVG.create('svg'),
+    extentControlPath1 = SVG.create('path'),
+    extentControlPath2 = SVG.create('path'),
+    extentNameIcon = DomUtil.create('span'),
+    extentItemControls = DomUtil.create(
+      'div',
+      'mapml-layer-item-controls',
+      extentProperties
+    ),
+    opacityControl = DomUtil.create(
+      'details',
+      'mapml-layer-item-details mapml-control-layers',
+      extentSettings
+    ),
+    extentOpacitySummary = DomUtil.create('summary', '', opacityControl),
+    mapEl = this.getMapEl(),
+    layerEl = this.getLayerEl(),
+    opacity = DomUtil.create('input', '', opacityControl);
+  extentSettings.hidden = true;
+  extent.setAttribute('aria-grabbed', 'false');
+
+  // append the svg paths
+  svgExtentControlIcon.setAttribute('viewBox', '0 0 24 24');
+  svgExtentControlIcon.setAttribute('height', '22');
+  svgExtentControlIcon.setAttribute('width', '22');
+  extentControlPath1.setAttribute('d', 'M0 0h24v24H0z');
+  extentControlPath1.setAttribute('fill', 'none');
+  extentControlPath2.setAttribute(
+    'd',
+    'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'
+  );
+  svgExtentControlIcon.appendChild(extentControlPath1);
+  svgExtentControlIcon.appendChild(extentControlPath2);
+
+  let mapSelects = this.el.querySelectorAll('map-select');
+  if (mapSelects.length) {
+    // map-select Stencil components may not have initialized yet;
+    // wait for each to be ready before accessing selectdetails
+    Promise.all(
+      Array.from(mapSelects).map((s) => s.whenReady())
+    ).then(() => {
+      var frag = document.createDocumentFragment();
+      for (var i = 0; i < mapSelects.length; i++) {
+        frag.appendChild(mapSelects[i].selectdetails);
+      }
+      extentSettings.appendChild(frag);
+    });
+  }
+
+  let removeExtentButton = DomUtil.create(
+    'button',
+    'mapml-layer-item-remove-control',
+    extentItemControls
+  );
+  removeExtentButton.type = 'button';
+  removeExtentButton.title = mapEl.locale.lmRemoveExtent;
+  removeExtentButton.innerHTML = "<span aria-hidden='true'>&#10005;</span>";
+  removeExtentButton.classList.add('mapml-button');
+  removeExtentButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.el.remove();
+  });
+
+  let extentsettingsButton = DomUtil.create(
+    'button',
+    'mapml-layer-item-settings-control',
+    extentItemControls
+  );
+  extentsettingsButton.type = 'button';
+  extentsettingsButton.title = mapEl.locale.lmExtentSettings;
+  extentsettingsButton.setAttribute('aria-expanded', false);
+  extentsettingsButton.classList.add('mapml-button');
+  DomEvent.on(
+    extentsettingsButton,
+    'click',
+    (e) => {
+      if (extentSettings.hidden === true) {
+        extentsettingsButton.setAttribute('aria-expanded', true);
+        extentSettings.hidden = false;
+      } else {
+        extentsettingsButton.setAttribute('aria-expanded', false);
+        extentSettings.hidden = true;
+      }
+    },
+    this
+  );
+
+  extentNameIcon.setAttribute('aria-hidden', true);
+  extentLabel.appendChild(input);
+  extentsettingsButton.appendChild(extentNameIcon);
+  extentNameIcon.appendChild(svgExtentControlIcon);
+  extentOpacitySummary.innerText = mapEl.locale.lcOpacity;
+  extentOpacitySummary.id =
+    'mapml-extent-item-opacity-' + stamp(extentOpacitySummary);
+  opacity.setAttribute('type', 'range');
+  opacity.setAttribute('min', '0');
+  opacity.setAttribute('max', '1.0');
+  opacity.setAttribute('step', '0.1');
+  opacity.setAttribute(
+    'aria-labelledby',
+    'mapml-extent-item-opacity-' + stamp(extentOpacitySummary)
+  );
+  const changeOpacity = function (e) {
+    if (e && e.target && e.target.value >= 0 && e.target.value <= 1.0) {
+      this._extentLayer.changeOpacity(e.target.value);
+    }
+  };
+  opacity.setAttribute('value', this.opacity);
+  opacity.value = this._extentLayer._container.style.opacity || '1.0';
+  opacity.addEventListener('change', changeOpacity.bind(this));
+
+  var extentItemNameSpan = DomUtil.create(
+    'span',
+    'mapml-extent-item-name',
+    extentLabel
+  );
+  input.type = 'checkbox';
+  input.defaultChecked = this.checked;
+  extentItemNameSpan.innerHTML = this.label;
+  const changeCheck = function () {
+    this.checked = !this.checked;
+    this.el.dispatchEvent(new CustomEvent('map-change'));
+  };
+  // save for later access by API
+  this._layerControlCheckbox = input;
+  input.addEventListener('change', changeCheck.bind(this));
+  extentItemNameSpan.id =
+    'mapml-extent-item-name-{' + stamp(extentItemNameSpan) + '}';
+  extent.setAttribute('aria-labelledby', extentItemNameSpan.id);
+  extentItemNameSpan.extent = this.el;
+
+  extent.ontouchstart = extent.onmousedown = (downEvent) => {
+    if (
+      (downEvent.target.parentElement.tagName.toLowerCase() === 'label' &&
+        downEvent.target.tagName.toLowerCase() !== 'input') ||
+      downEvent.target.tagName.toLowerCase() === 'label'
+    ) {
+      downEvent.stopPropagation();
+      downEvent =
+        downEvent instanceof TouchEvent ? downEvent.touches[0] : downEvent;
+
+      let control = extent,
+        controls = extent.parentNode,
+        moving = false,
+        yPos = downEvent.clientY,
+        originalPosition = Array.from(
+          extent.parentElement.querySelectorAll('fieldset')
+        ).indexOf(extent);
+
+      document.body.ontouchmove = document.body.onmousemove = (moveEvent) => {
+        moveEvent.preventDefault();
+        moveEvent =
+          moveEvent instanceof TouchEvent ? moveEvent.touches[0] : moveEvent;
+
+        // Fixes flickering by only moving element when there is enough space
+        let offset = moveEvent.clientY - yPos;
+        moving = Math.abs(offset) > 15 || moving;
+        if (
+          (controls && !moving) ||
+          (controls && controls.childElementCount <= 1) ||
+          controls.getBoundingClientRect().top >
+            control.getBoundingClientRect().bottom ||
+          controls.getBoundingClientRect().bottom <
+            control.getBoundingClientRect().top
+        ) {
+          return;
+        }
+
+        controls.classList.add('mapml-draggable');
+        control.style.transform = 'translateY(' + offset + 'px)';
+        control.style.pointerEvents = 'none';
+
+        let x = moveEvent.clientX,
+          y = moveEvent.clientY,
+          root =
+            mapEl.tagName === 'GCDS-EXT-MAP'
+              ? mapEl.shadowRoot
+              : mapEl.querySelector('.mapml-web-map').shadowRoot,
+          elementAt = root.elementFromPoint(x, y),
+          swapControl =
+            !elementAt || !elementAt.closest('fieldset')
+              ? control
+              : elementAt.closest('fieldset');
+
+        swapControl =
+          Math.abs(offset) <= swapControl.offsetHeight ? control : swapControl;
+
+        control.setAttribute('aria-grabbed', 'true');
+        control.setAttribute('aria-dropeffect', 'move');
+        if (swapControl && controls === swapControl.parentNode) {
+          swapControl =
+            swapControl !== control.nextSibling
+              ? swapControl
+              : swapControl.nextSibling;
+          if (control !== swapControl) {
+            yPos = moveEvent.clientY;
+            control.style.transform = null;
+          }
+          controls.insertBefore(control, swapControl);
+        }
+      };
+
+      document.body.ontouchend = document.body.onmouseup = () => {
+        let newPosition = Array.from(
+          extent.parentElement.querySelectorAll('fieldset')
+        ).indexOf(extent);
+        control.setAttribute('aria-grabbed', 'false');
+        control.removeAttribute('aria-dropeffect');
+        control.style.pointerEvents = null;
+        control.style.transform = null;
+        if (originalPosition !== newPosition) {
+          let controlsElems = controls.children,
+            zIndex = 0;
+          for (let c of controlsElems) {
+            let extentEl = c.querySelector('span').extent;
+
+            extentEl.setAttribute('data-moving', '');
+            const node = layerEl.src ? layerEl.shadowRoot : layerEl;
+            node.append(extentEl);
+            extentEl.removeAttribute('data-moving');
+
+            extentEl.extentZIndex = zIndex;
+            extentEl._extentLayer.setZIndex(zIndex);
+            zIndex++;
+          }
+        }
+        controls.classList.remove('mapml-draggable');
+        document.body.ontouchmove =
+          document.body.onmousemove =
+          document.body.ontouchend =
+          document.body.onmouseup =
+            null;
+      };
+    }
+  };
+  this._extentRootFieldset = extent;
+  this._opacitySlider = opacity;
+  this._opacityControl = opacityControl;
+  this._layerControlLabel = extentLabel;
+  return extent;
+};

package/dist/collection/components/utils/mapml/elementSupport/inputs/heightInput.js

@@ -0,0 +1,18 @@
+export class HeightInput {
+    name;
+    layer;
+    constructor(name, layer) {
+        this.name = name;
+        this.layer = layer;
+    }
+    validateInput() {
+        // name is required
+        if (!this.name) {
+            return false;
+        }
+        return true;
+    }
+    getValue() {
+        return this.layer._map.getSize().y;
+    }
+}

package/dist/collection/components/utils/mapml/elementSupport/inputs/hiddenInput.js

@@ -0,0 +1,19 @@
+export class HiddenInput {
+    name;
+    value;
+    constructor(name, value) {
+        this.name = name;
+        this.value = value;
+    }
+    validateInput() {
+        // name is required
+        // value is required
+        if (!this.name || !this.value) {
+            return false;
+        }
+        return true;
+    }
+    getValue() {
+        return this.value;
+    }
+}

package/dist/collection/components/utils/mapml/elementSupport/inputs/locationInput.js

@@ -0,0 +1,127 @@
+import { Point } from "leaflet";
+import { Util } from "../../Util";
+export class LocationInput {
+    name;
+    position;
+    axis;
+    units;
+    min;
+    max;
+    rel;
+    layer;
+    constructor(name, position, axis, units, min, max, rel, layer) {
+        this.name = name;
+        this.position = position;
+        this.axis = axis;
+        // if unit/cs not present, find it
+        if (!units && axis && !['i', 'j'].includes(axis)) {
+            this.units = Util.axisToCS(axis).toLowerCase();
+        }
+        else {
+            this.units = units; // cs
+        }
+        this.min = min;
+        this.max = max;
+        this.rel = rel;
+        this.layer = layer;
+    }
+    validateInput() {
+        // name is required
+        // axis is required
+        if (!this.name || !this.axis) {
+            return false;
+        }
+        // cs/units is only required when the axis is i/j. To differentiate between the units/cs
+        if ((this.axis === 'i' || this.axis === 'j') &&
+            !['map', 'tile'].includes(this.units)) {
+            return false;
+        }
+        // check if axis match the units/cs
+        if (this.units) {
+            let axisCS = Util.axisToCS(this.axis);
+            if (typeof axisCS === 'string' &&
+                axisCS.toUpperCase() !== this.units.toUpperCase()) {
+                return false;
+            }
+        }
+        // position is not required, will default to top-left
+        // min max fallbacks, map-meta -> projection
+        // rel not required, default is image/extent
+        return true;
+    }
+    _TCRSToPCRS(coords, zoom) {
+        // TCRS pixel point to Projected CRS point (in meters, presumably)
+        const map = this.layer._map;
+        const crs = map.options.crs;
+        const loc = crs.transformation.untransform(coords, crs.scale(zoom));
+        return loc;
+    }
+    getValue(zoom, bounds) {
+        // units = cs
+        //<input name="..." units="pcrs" type="location" position="top|bottom-left|right" axis="northing|easting|latitude|longitude">
+        if (zoom === undefined)
+            zoom = this.layer._map.getZoom();
+        if (bounds === undefined)
+            bounds = this.layer._map.getPixelBounds();
+        if (this.units === 'pcrs' || this.units === 'gcrs') {
+            switch (this.axis) {
+                case 'longitude':
+                case 'easting':
+                    if (this.position) {
+                        if (this.position.match(/.*?-left/i)) {
+                            return this._TCRSToPCRS(bounds.min, zoom).x;
+                        }
+                        else if (this.position.match(/.*?-right/i)) {
+                            return this._TCRSToPCRS(bounds.max, zoom).x;
+                        }
+                    }
+                    else {
+                        // position is not required, will default to top-left
+                        return this._TCRSToPCRS(bounds.min, zoom).x;
+                    }
+                    break;
+                case 'latitude':
+                case 'northing':
+                    if (this.position) {
+                        if (this.position.match(/top-.*?/i)) {
+                            return this._TCRSToPCRS(bounds.min, zoom).y;
+                        }
+                        else if (this.position.match(/bottom-.*?/i)) {
+                            return this._TCRSToPCRS(bounds.max, zoom).y;
+                        }
+                    }
+                    else {
+                        // position is not required, will default to top-left
+                        return this._TCRSToPCRS(bounds.min, zoom).y;
+                    }
+                    break;
+            }
+        }
+        else if (this.units === 'tilematrix') {
+            // Value is retrieved from the createTile method of TemplatedTileLayer, on move end.
+            // Different values for each tile when filling in the map tiles on the map.
+            // Currently storing all x,y,z within one object,
+            // TODO: change return value as needed based on usage by map-input
+            // https://github.com/Leaflet/Leaflet/blob/6994baf25f267db1c8b720c28a61e0700d0aa0e8/src/layer/tile/GridLayer.js#L652
+            const center = this.layer._map.getCenter();
+            const templatedTileLayer = this.layer._extentLayer._templates[0].layer;
+            const pixelBounds = templatedTileLayer._getTiledPixelBounds(center);
+            const tileRange = templatedTileLayer._pxBoundsToTileRange(pixelBounds);
+            const obj = [];
+            for (let j = tileRange.min.y; j <= tileRange.max.y; j++) {
+                for (let i = tileRange.min.x; i <= tileRange.max.x; i++) {
+                    const coords = new Point(i, j);
+                    coords.z = templatedTileLayer._tileZoom;
+                    obj.push(coords);
+                }
+            }
+            return obj;
+        }
+        else if (this.units === 'tile' || this.units === 'map') {
+            // used for query handler on map enter or click.
+            // mapi, tilei, mapj, tilej used for query handling, value is derived from the mouse click event
+            // or center of the map when used with keyboard.
+        }
+        return;
+    }
+}

package/dist/collection/components/utils/mapml/elementSupport/inputs/widthInput.js

@@ -0,0 +1,18 @@
+export class WidthInput {
+    name;
+    layer;
+    constructor(name, layer) {
+        this.name = name;
+        this.layer = layer;
+    }
+    validateInput() {
+        // name is required
+        if (!this.name) {
+            return false;
+        }
+        return true;
+    }
+    getValue() {
+        return this.layer._map.getSize().x;
+    }
+}

package/dist/collection/components/utils/mapml/elementSupport/inputs/zoomInput.js

@@ -0,0 +1,30 @@
+export class ZoomInput {
+    name;
+    min;
+    max;
+    value;
+    step;
+    layer;
+    constructor(name, min, max, value, step, layer) {
+        this.name = name;
+        this.min = min;
+        this.max = max;
+        this.value = value;
+        this.step = step;
+        this.layer = layer;
+    }
+    validateInput() {
+        // name is required
+        if (!this.name) {
+            return false;
+        }
+        // min and max can not be present
+        // fallback would be layer's meta, -> projection min, max
+        // don't need value, map-meta max value, -> fallback is max zoom of projection
+        // don't need step, defaults to 1
+        return true;
+    }
+    getValue() {
+        return this.layer._map.options.mapEl.zoom;
+    }
+}

package/dist/collection/components/utils/mapml/elementSupport/layers/calculatePosition.js

@@ -0,0 +1,88 @@
+/**
+ * Calculate the sequence position for map elements based on their position in a
+ * sequence of target elements (map-tile, map-feature, map-extent).
+ * - map-extent: Each element gets its own unique position (each is its own MapExtentLayer)
+ * - map-tile/map-feature: Adjacent elements of same type share the same position (they share a MapTileLayer/MapFeatureLayer)
+ * - used to set the zIndex for the LayerGroup's _container (rendering).
+ *
+ * @param {HTMLElement} element - The element to calculate position for (map-tile, map-extent, or map-feature)
+ * @returns {number} The position of this element's LayerGroup
+ */
+export function calculatePosition(element) {
+  const tagName = element.tagName.toLowerCase();
+  const validTags = ['map-tile', 'map-extent', 'map-feature'];
+
+  // Validate element type
+  if (!validTags.includes(tagName)) {
+    console.warn(`calculatePosition: Invalid element type ${tagName}`);
+    return 0;
+  }
+
+  // Get parent - could be Element or ShadowRoot
+  const parent = element.parentNode;
+  if (!parent) return 1;
+
+  // Get children - works for both Element and ShadowRoot
+  // For ShadowRoot, we need to filter to get only element nodes
+  const children =
+    parent.children ||
+    Array.from(parent.childNodes).filter(
+      (node) => node.nodeType === Node.ELEMENT_NODE
+    );
+
+  if (!children || children.length === 0) return 1;
+
+  let position = 0;
+  let lastTag = null;
+  let foundTarget = false;
+
+  // Iterate through all child elements
+  for (const child of children) {
+    // Skip non-element nodes (shouldn't happen with .children, but safe for childNodes)
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+
+    const childTag = child.tagName.toLowerCase();
+
+    // Skip non-map elements
+    if (!validTags.includes(childTag)) continue;
+
+    // Check if we've reached our target element
+    if (child === element) {
+      foundTarget = true;
+
+      // map-extent always needs a new z-index
+      if (childTag === 'map-extent') {
+        position++;
+        return position;
+      }
+
+      // For map-tile and map-feature:
+      // If this element continues a sequence of the same type, return the current z-index
+      if (lastTag === childTag) {
+        return position;
+      }
+
+      // This element starts a new layer group
+      position++;
+      return position;
+    }
+
+    // Before reaching target, count layer group transitions
+    if (!foundTarget) {
+      if (childTag === 'map-extent') {
+        // Each map-extent increments z-index
+        position++;
+      } else if (lastTag !== null && lastTag !== childTag) {
+        // Transition between different types (excluding map-extent)
+        position++;
+      } else if (lastTag === null) {
+        // First valid element starts at z-index 1
+        position = 1;
+      }
+
+      lastTag = childTag;
+    }
+  }
+  // Element not found (shouldn't happen in normal usage)
+  return 0;
+}