@prushforth/map 1.0.0-preview.1

package/dist/collection/components/utils/mapml/features/featureRenderer.js

@@ -0,0 +1,342 @@
+import { SVG, DomUtil, stamp } from 'leaflet';
+
+import { Util } from '../Util.js';
+/**
+ * Returns a new Feature Renderer
+ * @param {Object} options - Options for the renderer
+ * @returns {*}
+ */
+export var FeatureRenderer = SVG.extend({
+  /**
+   * Override method of same name from SVG, use the this._container property
+   * to set up the role="none presentation" on featureGroupu container,
+   * per this recommendation:
+   * https://github.com/Maps4HTML/MapMjs/pull/471#issuecomment-845192246
+   * @private overrides ancestor method so that we have a _container to work with
+   */
+  _initContainer: function () {
+    // call the method we're overriding, per https://leafletjs.com/examples/extending/extending-1-classes.html#methods-of-the-parent-class
+    // note you have to pass 'this' as the first arg
+    SVG.prototype._initContainer.call(this);
+    // knowing that the previous method call creates the this._container, we
+    // access it and set the role="none presetation" which suppresses the
+    // announcement of "Graphic" on each feature focus.
+    this._container.setAttribute('role', 'none presentation');
+  },
+
+  /**
+   * Creates all the appropriate path elements for a M.Path
+   * @param {M.Path} layer - The M.Path that needs paths generated
+   * @param {boolean} stampLayer - Whether or not a layer should be stamped and stored in the renderer layers
+   * @private
+   */
+  _initPath: function (layer, stampLayer = true) {
+    if (layer._outline) {
+      let outlinePath = SVG.create('path');
+      if (layer.options.className)
+        DomUtil.addClass(
+          outlinePath,
+          layer.featureAttributes.class || layer.options.className
+        );
+      DomUtil.addClass(outlinePath, 'mapml-feature-outline');
+      outlinePath.style.fill = 'none';
+      layer.outlinePath = outlinePath;
+    }
+
+    //creates the main parts and sub parts paths
+    for (let p of layer._parts) {
+      if (p.rings) {
+        this._createPath(
+          p,
+          layer.options.className,
+          layer.featureAttributes['aria-label'],
+          layer.options.interactive,
+          layer.featureAttributes
+        );
+        if (layer.outlinePath) p.path.style.stroke = 'none';
+      }
+      if (p.subrings) {
+        for (let r of p.subrings) {
+          this._createPath(
+            r,
+            layer.options.className,
+            r.attr['aria-label'],
+            r.link !== undefined,
+            r.attr
+          );
+        }
+      }
+      this._updateStyle(layer);
+    }
+    if (stampLayer) {
+      let s = stamp(layer);
+      this._layers[s] = layer;
+    }
+  },
+
+  /**
+   * Creates paths for either mainParts, subParts or outline of a feature
+   * @param {Object} ring - The ring the current path is being generated for
+   * @param {string} title - The accessible aria-label of a path
+   * @param {string} cls - The class of the path
+   * @param {boolean} interactive - The boolean representing whether a feature is interactive or not
+   * @param {Object} attr - Attributes map
+   * @private
+   */
+  _createPath: function (
+    ring,
+    cls,
+    title,
+    interactive = false,
+    attr = undefined
+  ) {
+    let p = SVG.create('path');
+    ring.path = p;
+    if (!attr) {
+      if (title) p.setAttribute('aria-label', title);
+    } else {
+      for (let [name, value] of Object.entries(attr)) {
+        if (name === 'id' || name === 'tabindex') continue;
+        p.setAttribute(name, value);
+      }
+    }
+    if (ring.cls || cls) {
+      DomUtil.addClass(p, ring.cls || cls);
+    }
+    if (interactive) {
+      DomUtil.addClass(p, 'leaflet-interactive');
+    }
+  },
+
+  /**
+   * Adds all the paths needed for a feature
+   * @param {M.Path} layer - The feature that needs it's paths added
+   * @param {HTMLElement} container - The location the paths need to be added to
+   * @param {boolean} interactive - Whether a feature is interactive or not
+   * @private
+   */
+  _addPath: function (layer, container = undefined, interactive = true) {
+    if (!this._rootGroup && !container) {
+      this._initContainer();
+    }
+    let c = container || this._rootGroup,
+      outlineAdded = false;
+    if (interactive) {
+      layer.addInteractiveTarget(layer.group);
+    }
+    for (let p of layer._parts) {
+      if (p.path) layer.group.appendChild(p.path);
+      if (interactive) {
+        if (layer.options.link)
+          layer.attachLinkHandler(
+            p.path,
+            layer.options.link,
+            layer.options._leafletLayer
+          );
+        layer.addInteractiveTarget(p.path);
+      }
+
+      if (!outlineAdded && layer.pixelOutline) {
+        layer.group.appendChild(layer.outlinePath);
+        outlineAdded = true;
+      }
+
+      for (let subP of p.subrings) {
+        if (subP.path) {
+          if (subP.link) {
+            layer.attachLinkHandler(
+              subP.path,
+              subP.link,
+              layer.options._leafletLayer
+            );
+            layer.addInteractiveTarget(subP.path);
+          }
+          layer.group.appendChild(subP.path);
+        }
+      }
+    }
+    c.appendChild(layer.group);
+  },
+
+  /**
+   * Removes all the paths related to a feature
+   * @param {M.Path} layer - The feature who's paths need to be removed
+   * @private
+   */
+  _removePath: function (layer) {
+    for (let p of layer._parts) {
+      if (p.path) {
+        layer.removeInteractiveTarget(p.path);
+        DomUtil.remove(p.path);
+      }
+      for (let subP of p.subrings) {
+        if (subP.path) DomUtil.remove(subP.path);
+      }
+    }
+    if (layer.outlinePath) DomUtil.remove(layer.outlinePath);
+    layer.removeInteractiveTarget(layer.group);
+    DomUtil.remove(layer.group);
+    delete this._layers[stamp(layer)];
+  },
+
+  /**
+   * Updates the d attribute of all paths of a feature
+   * @param {M.Path} layer - The Feature that needs updating
+   * @private
+   */
+  _updateFeature: function (layer) {
+    if (layer.pixelOutline)
+      this._setPath(
+        layer.outlinePath,
+        this.geometryToPath(layer.pixelOutline, false)
+      );
+    for (let p of layer._parts) {
+      this._setPath(p.path, this.geometryToPath(p.pixelRings, layer.isClosed));
+      for (let subP of p.subrings) {
+        this._setPath(
+          subP.path,
+          this.geometryToPath(subP.pixelSubrings, false)
+        );
+      }
+    }
+  },
+
+  /**
+   * Generates the marker d attribute for a given point
+   * @param {Point} p - The point of the marker
+   * @returns {string}
+   * @private
+   */
+  _pointToMarker: function (p) {
+    return `M${p.x} ${p.y} L${p.x - 12.5} ${p.y - 30} C${p.x - 12.5} ${
+      p.y - 50
+    }, ${p.x + 12.5} ${p.y - 50}, ${p.x + 12.5} ${p.y - 30} L${p.x} ${p.y}z`;
+  },
+
+  /**
+   * Updates the styles of all paths of a feature
+   * @param {M.Path} layer - The feature that needs styles updated
+   * @private
+   */
+  _updateStyle: function (layer) {
+    this._updatePathStyle(layer.outlinePath, layer, false, true);
+    for (let p of layer._parts) {
+      if (p.path) {
+        this._updatePathStyle(p.path, layer, true);
+      }
+      for (let subP of p.subrings) {
+        if (subP.path) this._updatePathStyle(subP.path, layer);
+      }
+    }
+  },
+
+  /**
+   * Updates the style of a single path
+   * @param {HTMLElement} path - The path that needs updating
+   * @param {M.Path} layer - The feature layer
+   * @param {boolean} isMain - Whether it's the main parts or not
+   * @param {boolean} isOutline - Whether a path is an outline or not
+   * @private
+   */
+  _updatePathStyle: function (path, layer, isMain = false, isOutline = false) {
+    if (!path || !layer) {
+      return;
+    }
+    let options = layer.options,
+      isClosed = layer.isClosed;
+    if (
+      (options.stroke && (!isClosed || isOutline)) ||
+      (isMain && !layer.outlinePath)
+    ) {
+      path.setAttribute('stroke', options.color);
+      path.setAttribute('stroke-opacity', options.opacity);
+      path.setAttribute('stroke-width', options.weight);
+      path.setAttribute('stroke-linecap', options.lineCap);
+      path.setAttribute('stroke-linejoin', options.lineJoin);
+
+      if (options.dashArray) {
+        path.setAttribute('stroke-dasharray', options.dashArray);
+      } else {
+        path.removeAttribute('stroke-dasharray');
+      }
+
+      if (options.dashOffset) {
+        path.setAttribute('stroke-dashoffset', options.dashOffset);
+      } else {
+        path.removeAttribute('stroke-dashoffset');
+      }
+
+      if (options.link) {
+        path.setAttribute(
+          'stroke',
+          options.link.visited ? '#6c00a2' : '#0000EE'
+        );
+        path.setAttribute('stroke-opacity', '1');
+        path.setAttribute('stroke-width', '1px');
+        path.setAttribute('stroke-dasharray', 'none');
+      }
+    } else {
+      path.setAttribute('stroke', 'none');
+    }
+
+    if (isClosed && !isOutline) {
+      if (!options.fill) {
+        path.setAttribute('fill', options.fillColor || options.color);
+        path.setAttribute('fill-opacity', options.fillOpacity);
+        path.setAttribute('fill-rule', options.fillRule || 'evenodd');
+      } else {
+        path.setAttribute('fill', options.color);
+      }
+    } else {
+      path.setAttribute('fill', 'none');
+    }
+  },
+
+  /**
+   * Sets the d attribute of a path
+   * @param {HTMLElement} path - The path that is being updated
+   * @param {string} def - The new d attribute of the path
+   * @private
+   */
+  _setPath: function (path, def) {
+    path.setAttribute('d', def);
+  },
+
+  /**
+   * Generates the d string of a feature part
+   * @param {Point[]} rings - The points making up a given part of a feature
+   * @param {boolean} closed - Whether a feature is closed or not
+   * @returns {string}
+   */
+  geometryToPath: function (rings, closed) {
+    let str = '',
+      i,
+      j,
+      len,
+      len2,
+      points,
+      p;
+
+    for (i = 0, len = rings.length; i < len; i++) {
+      points = rings[i];
+      if (points.length === 1) {
+        return this._pointToMarker(points[0]);
+      }
+      for (j = 0, len2 = points.length; j < len2; j++) {
+        p = points[j];
+        str += (j ? 'L' : 'M') + p.x + ' ' + p.y;
+      }
+      str += closed ? 'z' : '';
+    }
+    return str || 'M0 0';
+  }
+});
+
+/**
+ * Returns new FeatureRenderer
+ * @param {Object} options - Options for the renderer
+ * @returns {FeatureRenderer}
+ */
+export var featureRenderer = function (options) {
+  return new FeatureRenderer(options);
+};

package/dist/collection/components/utils/mapml/features/geometry.js

@@ -0,0 +1,268 @@
+import { FeatureGroup, DomUtil, DomEvent, bounds } from 'leaflet';
+
+import { Path, path } from './path.js';
+
+export var Geometry = FeatureGroup.extend({
+  /**
+   * Initialize the feature group
+   * @param {M.Path[]} layers
+   * @param {Object} options
+   */
+  initialize: function (layers, options) {
+    if (options.wrappers && options.wrappers.length > 0)
+      options = Object.assign(
+        Path.prototype._convertWrappers(options.wrappers),
+        options
+      );
+
+    FeatureGroup.prototype.initialize.call(this, layers, options);
+    this._featureEl = this.options.mapmlFeature;
+
+    this.layerBounds = options.layerBounds;
+    this.zoomBounds = options.zoomBounds;
+
+    let firstLayer = layers[Object.keys(layers)[0]];
+    if (layers.length === 1 && firstLayer.options.link)
+      this.options.link = firstLayer.options.link;
+    if (
+      (this.options.onEachFeature && this.options.properties) ||
+      this.options.link
+    ) {
+      DomUtil.addClass(this.options.group, 'leaflet-interactive');
+      if (this.options.link) {
+        Path.prototype.attachLinkHandler.call(
+          this,
+          this.options.group,
+          this.options.link,
+          this.options._leafletLayer
+        );
+        this.options.group.setAttribute('role', 'link');
+      } else {
+        this.options.group.setAttribute('aria-expanded', 'false');
+        this.options.group.setAttribute('role', 'button');
+        this.options.onEachFeature(this.options.properties, this);
+        this.off('click', this._openPopup);
+      }
+    }
+
+    DomEvent.on(this.options.group, 'keyup keydown', this._handleFocus, this);
+    this.options.group.setAttribute('aria-label', this.options.accessibleTitle);
+    if (this.options.featureID)
+      this.options.group.setAttribute('data-fid', this.options.featureID);
+    for (let feature of layers) {
+      feature._groupLayer = this;
+    }
+  },
+
+  onAdd: function (map) {
+    FeatureGroup.prototype.onAdd.call(this, map);
+    this.updateInteraction();
+  },
+
+  updateInteraction: function () {
+    let map = this._map || this.options._leafletLayer._map;
+    if (this.options.onEachFeature || this.options.link)
+      map.featureIndex.addToIndex(
+        this,
+        this.getPCRSCenter(),
+        this.options.group
+      );
+
+    for (let layerID in this._layers) {
+      let layer = this._layers[layerID];
+      for (let part of layer._parts) {
+        if (layer.featureAttributes && layer.featureAttributes.tabindex)
+          map.featureIndex.addToIndex(layer, layer.getPCRSCenter(), part.path);
+        for (let subPart of part.subrings) {
+          if (subPart.attr && subPart.attr.tabindex)
+            map.featureIndex.addToIndex(layer, subPart.center, subPart.path);
+        }
+      }
+    }
+  },
+
+  /**
+   * Check whether the feature group should be rendered at current map zoom level
+   * @param {Number} zoom - current map zoom
+   * @param {Object} vectorMinZoom - the minimum zoom bound of vector layer
+   * @param {Object} vectorMaxZoom - the maximum zoom bound of vector layer
+   * @returns {Boolean}
+   * @private
+   */
+  _checkRender: function (zoom, vectorMinZoom, vectorMaxZoom) {
+    let minZoom = this._featureEl.min,
+      maxZoom = this._featureEl.max;
+    // if the current map zoom falls below/above the zoom bounds of the vector layer
+    if (zoom > vectorMaxZoom || zoom < vectorMinZoom) return false;
+    // if the current map zoom falls below/above the [min, max] range
+    if (
+      (minZoom !== null && zoom < +minZoom) ||
+      (maxZoom !== null && zoom > +maxZoom)
+    ) {
+      return false;
+    }
+    return true;
+  },
+
+  /**
+   * Handler for focus events
+   * @param {DOMEvent} e - Event that occurred
+   * @private
+   */
+  _handleFocus: function (e) {
+    // tab, shift, cr, esc, up, left, down, right,
+    if (
+      [9, 16, 27, 37, 38, 39, 40].includes(e.keyCode) &&
+      e.type === 'keydown'
+    ) {
+      let index = this._map.featureIndex.currentIndex;
+      // Down/right arrow keys replicate tabbing through the feature index
+      // Up/left arrow keys replicate shift-tabbing through the feature index
+      if (e.keyCode === 37 || e.keyCode === 38) {
+        DomEvent.stop(e);
+        this._map.featureIndex.inBoundFeatures[index].path.setAttribute(
+          'tabindex',
+          -1
+        );
+        if (index === 0) {
+          this._map.featureIndex.inBoundFeatures[
+            this._map.featureIndex.inBoundFeatures.length - 1
+          ].path.focus();
+          this._map.featureIndex.currentIndex =
+            this._map.featureIndex.inBoundFeatures.length - 1;
+        } else {
+          this._map.featureIndex.inBoundFeatures[index - 1].path.focus();
+          this._map.featureIndex.currentIndex--;
+        }
+      } else if (e.keyCode === 39 || e.keyCode === 40) {
+        DomEvent.stop(e);
+        this._map.featureIndex.inBoundFeatures[index].path.setAttribute(
+          'tabindex',
+          -1
+        );
+        if (index === this._map.featureIndex.inBoundFeatures.length - 1) {
+          this._map.featureIndex.inBoundFeatures[0].path.focus();
+          this._map.featureIndex.currentIndex = 0;
+        } else {
+          this._map.featureIndex.inBoundFeatures[index + 1].path.focus();
+          this._map.featureIndex.currentIndex++;
+        }
+      } else if (e.keyCode === 27) {
+        let shadowRoot = this._map.options.mapEl.shadowRoot
+          ? this._map.options.mapEl.shadowRoot
+          : this._map.options.mapEl.querySelector('.mapml-web-map').shadowRoot;
+        if (shadowRoot.activeElement.nodeName !== 'g') return;
+        this._map._container.focus();
+      } else if (e.keyCode === 9) {
+        let obj = this;
+        setTimeout(function () {
+          obj._map.featureIndex.inBoundFeatures[0].path.setAttribute(
+            'tabindex',
+            0
+          );
+        }, 0);
+      }
+      // tab, shift, cr, esc, right, left, up, down,
+      // 1, 2, 3, 4, 5, 6, 7 (featureIndexOverlay available index items
+      // [8, 9] being allocated to next, previous menu items).
+    } else if (
+      ![9, 16, 13, 27, 37, 38, 39, 40, 49, 50, 51, 52, 53, 54, 55].includes(
+        e.keyCode
+      )
+    ) {
+      this._map.featureIndex.currentIndex = 0;
+      this._map.featureIndex.inBoundFeatures[0].path.focus();
+    }
+
+    // 27 added so that the tooltip opens when dismissing popup with 'esc' key
+    if (e.target.tagName.toUpperCase() !== 'G') return;
+    if (
+      [9, 13, 16, 37, 38, 39, 40, 49, 50, 51, 52, 53, 54, 55, 27].includes(
+        e.keyCode
+      ) &&
+      e.type === 'keyup'
+    ) {
+      this.openTooltip();
+    } else if (e.keyCode === 13 || e.keyCode === 32) {
+      this.closeTooltip();
+      if (!this.options.link && this.options.onEachFeature) {
+        DomEvent.stop(e);
+        this.openPopup();
+      }
+    } else {
+      this.closeTooltip();
+    }
+  },
+
+  /**
+   * Add a Path to the Geometry
+   * @param layer
+   */
+  addLayer: function (layer) {
+    if (!layer.options.link && layer.options.interactive) {
+      this.options.onEachFeature(this.options.properties, layer);
+    }
+    FeatureGroup.prototype.addLayer.call(this, layer);
+  },
+
+  /**
+   * Focuses the previous function in the sequence on previous button press
+   * @param e
+   * @private
+   */
+  _previousFeature: function (e) {
+    DomEvent.stop(e);
+    this._map.featureIndex.currentIndex = Math.max(
+      this._map.featureIndex.currentIndex - 1,
+      0
+    );
+    let prevFocus =
+      this._map.featureIndex.inBoundFeatures[
+        this._map.featureIndex.currentIndex
+      ];
+    prevFocus.path.focus();
+    this._map.closePopup();
+  },
+
+  /**
+   * Focuses next feature in sequence
+   * @param e
+   * @private
+   */
+  _nextFeature: function (e) {
+    DomEvent.stop(e);
+    this._map.featureIndex.currentIndex = Math.min(
+      this._map.featureIndex.currentIndex + 1,
+      this._map.featureIndex.inBoundFeatures.length - 1
+    );
+    let nextFocus =
+      this._map.featureIndex.inBoundFeatures[
+        this._map.featureIndex.currentIndex
+      ];
+    nextFocus.path.focus();
+    this._map.closePopup();
+  },
+
+  getPCRSCenter: function () {
+    let bnds;
+    for (let l in this._layers) {
+      let layer = this._layers[l];
+      if (!bnds) {
+        bnds = bounds(layer.getPCRSCenter(), layer.getPCRSCenter());
+      } else {
+        bnds.extend(layer.getPCRSCenter());
+      }
+    }
+    return bnds.getCenter();
+  }
+});
+
+/**
+ * Returns new Geometry
+ * @param {M.Path[]} layers - Layers belonging to feature group
+ * @param {Object} options - Options for the feature group
+ * @returns {Geometry}
+ */
+export var geometry = function (layers, options) {
+  return new Geometry(layers, options);
+};