Source: control/cad.js

  1. import { RegularShape, Style, Fill, Stroke } from 'ol/style';
  2. import { Point, LineString, Polygon, MultiPoint } from 'ol/geom';
  3. import { fromExtent } from 'ol/geom/Polygon';
  4. import Feature from 'ol/Feature';
  5. import Vector from 'ol/layer/Vector';
  6. import VectorSource from 'ol/source/Vector';
  7. import { Pointer, Snap } from 'ol/interaction';
  8. import Control from './control';
  9. import cadSVG from '../../img/cad.svg';
  10. import SnapEvent, { SnapEventType } from '../event/snap-event';
  12. /**
  13.  * Control with snapping functionality for geometry alignment.
  14.  * @extends {ole.Control}
  15.  * @alias ole.CadControl
  16.  */
  17. class CadControl extends Control {
  18.   /**
  19.    * @param {Object} [options] Tool options.
  20.    * @param {Function} [options.filter] Returns an array containing the features
  21.    *   to include for CAD (takes the source as a single argument).
  22.    * @param {Number} [options.snapTolerance] Snap tolerance in pixel
  23.    *   for snap lines. Default is 10.
  24.    * @param {Boolean} [options.showSnapLines] Whether to show
  25.    *   snap lines (default is true).
  26.    * @param {Boolean} [options.showSnapPoints] Whether to show
  27.    *  snap points around the closest feature.
  28.    * @param {Number} [options.snapPointDist] Distance of the
  29.    *   snap points (default is 30).
  30.    * @param {Boolean} [options.useMapUnits] Whether to use map units
  31.    *   as measurement for point snapping. Default is false (pixel are used).
  32.    * @param {ol.style.Style.StyleLike} [options.snapStyle] Style used for the snap layer.
  33.    * @param {ol.style.Style.StyleLike} [options.linesStyle] Style used for the lines layer.
  34.    */
  35.   constructor(options) {
  36.     super({
  37.       title: 'CAD control',
  38.       className: 'ole-control-cad',
  39.       image: cadSVG,
  40.       showSnapPoints: true,
  41.       showSnapLines: false,
  42.       snapPointDist: 10,
  43.       ...options,
  44.     });
  46.     /**
  47.      * Interaction for handling move events.
  48.      * @type {ol.interaction.Pointer}
  49.      * @private
  50.      */
  51.     this.pointerInteraction = new Pointer({
  52.       handleMoveEvent: this.onMove.bind(this),
  53.     });
  55.     /**
  56.      * Layer for drawing snapping geometries.
  57.      * @type {ol.layer.Vector}
  58.      * @private
  59.      */
  60.     this.snapLayer = new Vector({
  61.       source: new VectorSource(),
  62.       style: options.snapStyle || [
  63.         new Style({
  64.           image: new RegularShape({
  65.             fill: new Fill({
  66.               color: '#E8841F',
  67.             }),
  68.             stroke: new Stroke({
  69.               width: 1,
  70.               color: '#618496',
  71.             }),
  72.             points: 4,
  73.             radius: 5,
  74.             radius2: 0,
  75.             angle: Math.PI / 4,
  76.           }),
  77.           stroke: new Stroke({
  78.             width: 1,
  79.             lineDash: [5, 10],
  80.             color: '#618496',
  81.           }),
  82.         }),
  83.       ],
  84.     });
  86.     /**
  87.      * Layer for colored lines indicating
  88.      * intesection point between snapping lines.
  89.      * @type {ol.layer.Vector}
  90.      * @private
  91.      */
  92.     this.linesLayer = new Vector({
  93.       source: new VectorSource(),
  94.       style: options.linesStyle || [
  95.         new Style({
  96.           stroke: new Stroke({
  97.             width: 1,
  98.             lineDash: [5, 10],
  99.             color: '#FF530D',
  100.           }),
  101.         }),
  102.       ],
  103.     });
  105.     /**
  106.      * Snap tolerance in pixel.
  107.      * @type {Number}
  108.      * @private
  109.      */
  110.     this.snapTolerance =
  111.       options.snapTolerance === undefined ? 10 : options.snapTolerance;
  113.     /**
  114.      * Filter the features to snap with.
  115.      * @type {Function}
  116.      * @private
  117.      */
  118.     this.filter = options.filter || null;
  120.     /**
  121.      * Interaction for snapping
  122.      * @type {ol.interaction.Snap}
  123.      * @private
  124.      */
  125.     this.snapInteraction = new Snap({
  126.       pixelTolerance: this.snapTolerance,
  127.       source: this.snapLayer.getSource(),
  128.     });
  130.     this.standalone = false;
  131.   }
  133.   /**
  134.    * @inheritdoc
  135.    */
  136.   getDialogTemplate() {
  137.     const distLabel = this.properties.useMapUnits ? 'map units' : 'px';
  139.     return `
  140.       <div>
  141.         <input
  142.           id="aux-cb"
  143.           type="radio"
  144.           name="radioBtn"
  145.           ${this.properties.showSnapLines ? 'checked' : ''}
  146.         >
  147.         <label>Show snap lines</label>
  148.       </div>
  149.       <div>
  150.         <input
  151.           id="dist-cb"
  152.           type="radio"
  153.           name="radioBtn"
  154.           ${this.properties.showSnapPoints ? 'checked' : ''}
  155.         >
  156.         <label>Show snap points. Distance (${distLabel}):</label>
  157.         <input type="text" id="width-input"
  158.           value="${this.properties.snapPointDist}">
  159.       </div>
  160.     `;
  161.   }
  163.   /**
  164.    * @inheritdoc
  165.    */
  166.   setMap(map) {
  167.     super.setMap(map);
  169.     // Ensure that the snap interaction is at the last position
  170.     // as it must be the first to handle the  pointermove event.
  171.     this.map.getInteractions().on(
  172.       'add',
  173.       ((e) => {
  174.         const pos = e.target.getArray().indexOf(this.snapInteraction);
  176.         if (
  177.           this.snapInteraction.getActive() &&
  178.           pos > -1 &&
  179.           pos !== e.target.getLength() - 1
  180.         ) {
  181.           this.deactivate(true);
  182.           this.activate(true);
  183.         }
  184.         // eslint-disable-next-line no-extra-bind
  185.       }).bind(this),
  186.     );
  187.   }
  189.   /**
  190.    * Handle move event.
  191.    * @private
  192.    * @param {ol.MapBrowserEvent} evt Move event.
  193.    */
  194.   onMove(evt) {
  195.     const features = this.getClosestFeatures(evt.coordinate, 5);
  197.     this.linesLayer.getSource().clear();
  198.     this.snapLayer.getSource().clear();
  200.     this.pointerInteraction.dispatchEvent(
  201.       new SnapEvent(SnapEventType.SNAP, features.length ? features : null, evt),
  202.     );
  204.     if (this.properties.showSnapLines) {
  205.       this.drawSnapLines(features, evt.coordinate);
  206.     }
  208.     if (this.properties.showSnapPoints && features.length) {
  209.       this.drawSnapPoints(evt.coordinate, features[0]);
  210.     }
  211.   }
  213.   /**
  214.    * Returns a list of the {num} closest features
  215.    * to a given coordinate.
  216.    * @private
  217.    * @param {ol.Coordinate} coordinate Coordinate.
  218.    * @param {Number} numFeatures Number of features to search.
  219.    * @returns {Array.<ol.Feature>} List of closest features.
  220.    */
  221.   getClosestFeatures(coordinate, numFeatures) {
  222.     const num = numFeatures || 1;
  223.     const ext = [-Infinity, -Infinity, Infinity, Infinity];
  224.     const featureDict = {};
  226.     const pushSnapFeatures = (f) => {
  227.       const cCoord = f.getGeometry().getClosestPoint(coordinate);
  228.       const dx = cCoord[0] - coordinate[0];
  229.       const dy = cCoord[1] - coordinate[1];
  230.       const dist = dx * dx + dy * dy;
  231.       featureDict[dist] = f;
  232.     };
  234.     this.source.forEachFeatureInExtent(ext, (f) => {
  235.       if (!this.filter || (this.filter && this.filter(f))) {
  236.         pushSnapFeatures(f);
  237.       }
  238.     });
  240.     const dists = Object.keys(featureDict);
  241.     let features = [];
  242.     const count = Math.min(dists.length, num);
  244.     dists.sort((a, b) => a - b);
  246.     for (let i = 0; i < count; i += 1) {
  247.       features.push(featureDict[dists[i]]);
  248.     }
  250.     const drawFeature = this.editor.getDrawFeature();
  251.     if (drawFeature) {
  252.       // Include all but the last vertex (at mouse position) to prevent snapping on mouse cursor node
  253.       const currentDrawFeature = drawFeature.clone();
  254.       currentDrawFeature
  255.         .getGeometry()
  256.         .setCoordinates(
  257.           drawFeature.getGeometry().getCoordinates().slice(0, -1),
  258.         );
  259.       features = [currentDrawFeature, ...features];
  260.     }
  262.     const editFeature = this.editor.getEditFeature();
  263.     if (editFeature && this.editor.modifyStartCoordinate) {
  264.       /* Include all nodes of the edit feature except the node being modified */
  265.       // First exclude the edit feature from snap detection
  266.       if (features.indexOf(editFeature) > -1) {
  267.         features.splice(features.indexOf(editFeature), 1);
  268.       }
  270.       // Convert to MultiPoint and get the node coordinate closest to mouse cursor
  271.       const snapGeom = new MultiPoint(
  272.         editFeature.getGeometry().getCoordinates(),
  273.       );
  274.       const editNodeCoordinate = snapGeom.getClosestPoint(
  275.         this.editor.modifyStartCoordinate,
  276.       );
  278.       // Exclude the node being modified
  279.       snapGeom.setCoordinates(
  280.         snapGeom.getCoordinates().filter((coord) => {
  281.           return coord.toString() !== editNodeCoordinate.toString();
  282.         }),
  283.       );
  285.       // Clone editFeature and apply adjusted snap geometry
  286.       const snapEditFeature = editFeature.clone();
  287.       snapEditFeature.getGeometry().setCoordinates(snapGeom.getCoordinates());
  288.       features = [snapEditFeature, ...features];
  289.     }
  291.     return features;
  292.   }
  294.   /**
  295.    * Draws snap lines by building the extent for
  296.    * a pair of features.
  297.    * @private
  298.    * @param {Array.<ol.Feature>} features List of features.
  299.    * @param {ol.Coordinate} coordinate Mouse pointer coordinate.
  300.    */
  301.   drawSnapLines(features, coordinate) {
  302.     let auxCoords = [];
  304.     for (let i = 0; i < features.length; i += 1) {
  305.       const geom = features[i].getGeometry();
  306.       const featureCoord = geom.getCoordinates();
  308.       if (featureCoord.length) {
  309.         if (geom instanceof Point) {
  310.           auxCoords.push(featureCoord);
  311.         } else {
  312.           // filling snapLayer with features vertex
  313.           if (geom instanceof LineString) {
  314.             for (let j = 0; j < featureCoord.length; j += 1) {
  315.               auxCoords.push(featureCoord[j]);
  316.             }
  317.           } else if (geom instanceof Polygon) {
  318.             for (let j = 0; j < featureCoord[0].length; j += 1) {
  319.               auxCoords.push(featureCoord[0][j]);
  320.             }
  321.           }
  323.           // filling auxCoords
  324.           const coords = fromExtent(geom.getExtent()).getCoordinates()[0];
  325.           auxCoords = auxCoords.concat(coords);
  326.         }
  327.       }
  328.     }
  330.     const px = this.map.getPixelFromCoordinate(coordinate);
  331.     let lineCoords = null;
  333.     for (let i = 0; i < auxCoords.length; i += 1) {
  334.       const tol = this.snapTolerance;
  335.       const auxPx = this.map.getPixelFromCoordinate(auxCoords[i]);
  336.       const drawVLine =
  337.         px[0] > auxPx[0] - this.snapTolerance / 2 &&
  338.         px[0] < auxPx[0] + this.snapTolerance / 2;
  339.       const drawHLine =
  340.         px[1] > auxPx[1] - this.snapTolerance / 2 &&
  341.         px[1] < auxPx[1] + this.snapTolerance / 2;
  343.       if (drawVLine) {
  344.         let newY = px[1];
  345.         newY += px[1] < auxPx[1] ? -tol * 2 : tol * 2;
  346.         const newPt = this.map.getCoordinateFromPixel([auxPx[0], newY]);
  347.         lineCoords = [[auxCoords[i][0], newPt[1]], auxCoords[i]];
  348.       } else if (drawHLine) {
  349.         let newX = px[0];
  350.         newX += px[0] < auxPx[0] ? -tol * 2 : tol * 2;
  351.         const newPt = this.map.getCoordinateFromPixel([newX, auxPx[1]]);
  352.         lineCoords = [[newPt[0], auxCoords[i][1]], auxCoords[i]];
  353.       }
  355.       if (lineCoords) {
  356.         const g = new LineString(lineCoords);
  357.         this.snapLayer.getSource().addFeature(new Feature(g));
  358.       }
  359.     }
  361.     let vertArray = null;
  362.     let horiArray = null;
  363.     const snapFeatures = this.snapLayer.getSource().getFeatures();
  365.     if (snapFeatures.length) {
  366.       snapFeatures.forEach((feature) => {
  367.         const featureCoord = feature.getGeometry().getCoordinates();
  368.         const x0 = featureCoord[0][0];
  369.         const x1 = featureCoord[1][0];
  370.         const y0 = featureCoord[0][1];
  371.         const y1 = featureCoord[1][1];
  373.         if (x0 === x1) {
  374.           vertArray = x0;
  375.         }
  376.         if (y0 === y1) {
  377.           horiArray = y0;
  378.         }
  379.       });
  381.       const snapPt = [];
  383.       if (vertArray && horiArray) {
  384.         snapPt.push(vertArray);
  385.         snapPt.push(horiArray);
  386.         this.linesLayer.getSource().addFeatures(snapFeatures);
  388.         this.snapLayer.getSource().clear();
  389.         const snapGeom = new Point(snapPt);
  390.         this.snapLayer.getSource().addFeature(new Feature(snapGeom));
  391.       }
  392.     }
  393.   }
  395.   /**
  396.    * Adds snap points to the snapping layer.
  397.    * @private
  398.    * @param {ol.Coordinate} coordinateMouse cursor coordinate.
  399.    * @param {ol.eaturee} feature Feature to draw the snap points for.
  400.    */
  401.   drawSnapPoints(coordinate, feature) {
  402.     const featCoord = feature.getGeometry().getClosestPoint(coordinate);
  404.     const px = this.map.getPixelFromCoordinate(featCoord);
  405.     let snapCoords = [];
  407.     if (this.properties.useMapUnits) {
  408.       snapCoords = [
  409.         [featCoord[0] - this.properties.snapPointDist, featCoord[1]],
  410.         [featCoord[0] + this.properties.snapPointDist, featCoord[1]],
  411.         [featCoord[0], featCoord[1] - this.properties.snapPointDist],
  412.         [featCoord[0], featCoord[1] + this.properties.snapPointDist],
  413.       ];
  414.     } else {
  415.       const snapPx = [
  416.         [px[0] - this.properties.snapPointDist, px[1]],
  417.         [px[0] + this.properties.snapPointDist, px[1]],
  418.         [px[0], px[1] - this.properties.snapPointDist],
  419.         [px[0], px[1] + this.properties.snapPointDist],
  420.       ];
  422.       for (let j = 0; j < snapPx.length; j += 1) {
  423.         snapCoords.push(this.map.getCoordinateFromPixel(snapPx[j]));
  424.       }
  425.     }
  427.     const snapGeom = new MultiPoint(snapCoords);
  428.     this.snapLayer.getSource().addFeature(new Feature(snapGeom));
  429.   }
  431.   /**
  432.    * @inheritdoc
  433.    */
  434.   activate(silent) {
  435.     super.activate(silent);
  436.     this.snapLayer.setMap(this.map);
  437.     this.linesLayer.setMap(this.map);
  438.     this.map.addInteraction(this.pointerInteraction);
  439.     this.map.addInteraction(this.snapInteraction);
  441.     document.getElementById('aux-cb').addEventListener('change', (evt) => {
  442.       this.setProperties({
  443.         showSnapLines: evt.target.checked,
  444.         showSnapPoints: !evt.target.checked,
  445.       });
  446.     });
  448.     document.getElementById('dist-cb').addEventListener('change', (evt) => {
  449.       this.setProperties({
  450.         showSnapPoints: evt.target.checked,
  451.         showSnapLines: !evt.target.checked,
  452.       });
  453.     });
  455.     document.getElementById('width-input').addEventListener('keyup', (evt) => {
  456.       const snapPointDist = parseFloat(evt.target.value);
  457.       if (!Number.isNaN(snapPointDist)) {
  458.         this.setProperties({ snapPointDist });
  459.       }
  460.     });
  461.   }
  463.   /**
  464.    * @inheritdoc
  465.    */
  466.   deactivate(silent) {
  467.     super.deactivate(silent);
  468.     this.snapLayer.setMap(null);
  469.     this.linesLayer.setMap(null);
  470.     this.map.removeInteraction(this.pointerInteraction);
  471.     this.map.removeInteraction(this.snapInteraction);
  472.   }
  473. }
  475. export default CadControl;