Source: control/cad.js

  1. import { Style, Stroke } from 'ol/style';
  2. import { Point, LineString, Polygon, MultiPoint, Circle } from 'ol/geom';
  3. import Feature from 'ol/Feature';
  4. import Vector from 'ol/layer/Vector';
  5. import VectorSource from 'ol/source/Vector';
  6. import { Pointer, Snap } from 'ol/interaction';
  7. import { OverlayOp } from 'jsts/org/locationtech/jts/operation/overlay';
  8. import { getUid } from 'ol/util';
  9. import Control from './control';
  10. import cadSVG from '../../img/cad.svg';
  11. import { SnapEvent, SnapEventType } from '../event';
  12. import {
  13.   parser,
  14.   getProjectedPoint,
  15.   getEquationOfLine,
  16.   getShiftedMultiPoint,
  17.   getIntersectedLinesAndPoint,
  18.   isSameLines,
  19.   defaultSnapStyles,
  20.   VH_LINE_KEY,
  21.   SNAP_POINT_KEY,
  22.   SNAP_FEATURE_TYPE_PROPERTY,
  23.   SEGMENT_LINE_KEY,
  24.   ORTHO_LINE_KEY,
  25.   CUSTOM_LINE_KEY,
  26. } from '../helper';
  28. /**
  29.  * Control with snapping functionality for geometry alignment.
  30.  * @extends {Control}
  31.  * @alias ole.CadControl
  32.  */
  33. class CadControl extends Control {
  34.   /**
  35.    * @param {Object} [options] Tool options.
  36.    * @param {Function} [options.drawCustomSnapLines] Allow to draw more snapping lines using selected coordinates.
  37.    * @param {Function} [options.filter] Returns an array containing the features
  38.    *   to include for CAD (takes the source as a single argument).
  39.    * @param {Function} [options.extentFilter] An optional spatial filter for the features to snap with. Returns an ol.Extent which will be used by the source.getFeaturesinExtent method.
  40.    * @param {Function} [options.lineFilter] An optional filter for the generated snapping lines
  41.    *   array (takes the lines and cursor coordinate as arguments and returns the new line array)
  42.    * @param {Number} [options.nbClosestFeatures] Number of features to use for snapping (closest first). Default is 5.
  43.    * @param {Number} [options.snapTolerance] Snap tolerance in pixel
  44.    *   for snap lines. Default is 10.
  45.    * @param {Boolean} [options.showSnapLines] Whether to show
  46.    *   snap lines (default is true).
  47.    * @param {Boolean} [options.showSnapPoints] Whether to show
  48.    *  snap points around the closest feature.
  49.    * @param {Boolean} [options.showOrthoLines] Whether to show
  50.    *   snap lines that arae perpendicular to segment (default is true).
  51.    * @param {Boolean} [options.showSegmentLines] Whether to show
  52.    *   snap lines that extends a segment (default is true).
  53.    * @param {Boolean} [options.showVerticalAndHorizontalLines] Whether to show vertical
  54.    *   and horizontal lines for each snappable point (default is true).
  55.    * @param {Boolean} [options.snapLinesOrder] Define order of display of snap lines,
  56.    *   must be an array containing the following values 'ortho', 'segment', 'vh'. Default is ['ortho', 'segment', 'vh', 'custom'].
  57.    * @param {Number} [options.snapPointDist] Distance of the
  58.    *   snap points (default is 30).
  59.    * @param {Boolean} [options.useMapUnits] Whether to use map units
  60.    *   as measurement for point snapping. Default is false (pixel are used).
  61.    * @param {ol.VectorSource} [options.source] The vector source to retrieve the snappable features from.
  62.    * @param {ol.style.Style.StyleLike} [options.snapStyle] Style used for the snap layer.
  63.    * @param {ol.style.Style.StyleLike} [options.linesStyle] Style used for the lines layer.
  64.    *
  65.    */
  66.   constructor(options = {}) {
  67.     super({
  68.       title: 'CAD control',
  69.       className: 'ole-control-cad',
  70.       image: cadSVG,
  71.       showSnapPoints: true,
  72.       showSnapLines: false,
  73.       showOrthoLines: true,
  74.       showSegmentLines: true,
  75.       showVerticalAndHorizontalLines: true,
  76.       snapPointDist: 10,
  77.       snapLinesOrder: ['ortho', 'segment', 'vh'],
  78.       ...options,
  79.     });
  81.     /**
  82.      * Interaction for handling move events.
  83.      * @type {ol.interaction.Pointer}
  84.      * @private
  85.      */
  86.     this.pointerInteraction = new Pointer({
  87.       handleMoveEvent: this.onMove.bind(this),
  88.     });
  90.     /**
  91.      * Layer for drawing snapping geometries.
  92.      * @type {ol.layer.Vector}
  93.      * @private
  94.      */
  95.     this.snapLayer = new Vector({
  96.       source: new VectorSource(),
  97.       style: options.snapStyle || [
  98.         defaultSnapStyles[VH_LINE_KEY],
  99.         defaultSnapStyles[SNAP_POINT_KEY],
  100.       ],
  101.     });
  103.     /**
  104.      * Layer for colored lines indicating
  105.      * intersection point between snapping lines.
  106.      * @type {ol.layer.Vector}
  107.      * @private
  108.      */
  109.     this.linesLayer = new Vector({
  110.       source: new VectorSource(),
  111.       style: options.linesStyle || [
  112.         new Style({
  113.           stroke: new Stroke({
  114.             width: 1,
  115.             lineDash: [5, 10],
  116.             color: '#FF530D',
  117.           }),
  118.         }),
  119.       ],
  120.     });
  122.     /**
  123.      * Function to draw more snapping lines.
  124.      * @type {Function}
  125.      * @private
  126.      */
  127.     this.drawCustomSnapLines = options.drawCustomSnapLines;
  129.     /**
  130.      * Number of features to use for snapping (closest first). Default is 5.
  131.      * @type {Number}
  132.      * @private
  133.      */
  134.     this.nbClosestFeatures =
  135.       options.nbClosestFeatures === undefined ? 5 : options.nbClosestFeatures;
  137.     /**
  138.      * Snap tolerance in pixel.
  139.      * @type {Number}
  140.      * @private
  141.      */
  142.     this.snapTolerance =
  143.       options.snapTolerance === undefined ? 10 : options.snapTolerance;
  145.     /**
  146.      * Filter the features to snap with.
  147.      * @type {Function}
  148.      * @private
  149.      */
  150.     this.filter = options.filter || (() => true);
  152.     /**
  153.      * Filter the features spatially.
  154.      */
  155.     this.extentFilter =
  156.       options.extentFilter ||
  157.       (() => [-Infinity, -Infinity, Infinity, Infinity]);
  159.     /**
  160.      * Filter the generated line list
  161.      */
  162.     this.lineFilter = options.lineFilter;
  164.     /**
  165.      * Interaction for snapping
  166.      * @type {ol.interaction.Snap}
  167.      * @private
  168.      */
  169.     this.snapInteraction = new Snap({
  170.       pixelTolerance: this.snapTolerance,
  171.       source: this.snapLayer.getSource(),
  172.     });
  174.     this.standalone = false;
  176.     this.handleInteractionAdd = this.handleInteractionAdd.bind(this);
  177.   }
  179.   /**
  180.    * @inheritdoc
  181.    */
  182.   getDialogTemplate() {
  183.     const distLabel = this.properties.useMapUnits ? 'map units' : 'px';
  185.     return `
  186.       <div>
  187.         <input
  188.           id="aux-cb"
  189.           type="radio"
  190.           name="radioBtn"
  191.           ${this.properties.showSnapLines ? 'checked' : ''}
  192.         >
  193.         <label>Show snap lines</label>
  194.       </div>
  195.       <div>
  196.         <input
  197.           id="dist-cb"
  198.           type="radio"
  199.           name="radioBtn"
  200.           ${this.properties.showSnapPoints ? 'checked' : ''}
  201.         >
  202.         <label>Show snap points. Distance (${distLabel}):</label>
  203.         <input type="text" id="width-input"
  204.           value="${this.properties.snapPointDist}">
  205.       </div>
  206.     `;
  207.   }
  209.   handleInteractionAdd(evt) {
  210.     const pos = evt.target.getArray().indexOf(this.snapInteraction);
  212.     if (
  213.       this.snapInteraction.getActive() &&
  214.       pos > -1 &&
  215.       pos !== evt.target.getLength() - 1
  216.     ) {
  217.       this.deactivate(true);
  218.       this.activate(true);
  219.     }
  220.   }
  222.   /**
  223.    * @inheritdoc
  224.    */
  225.   setMap(map) {
  226.     if (this.map) {
  227.       this.map.getInteractions().un('add', this.handleInteractionAdd);
  228.     }
  230.     super.setMap(map);
  232.     // Ensure that the snap interaction is at the last position
  233.     // as it must be the first to handle the  pointermove event.
  234.     if (this.map) {
  235.       this.map.getInteractions().on('add', this.handleInteractionAdd);
  236.     }
  237.   }
  239.   /**
  240.    * Handle move event.
  241.    * @private
  242.    * @param {ol.MapBrowserEvent} evt Move event.
  243.    */
  244.   onMove(evt) {
  245.     const features = this.getClosestFeatures(
  246.       evt.coordinate,
  247.       this.nbClosestFeatures,
  248.     );
  250.     this.linesLayer.getSource().clear();
  251.     this.snapLayer.getSource().clear();
  253.     this.pointerInteraction.dispatchEvent(
  254.       new SnapEvent(SnapEventType.SNAP, features.length ? features : null, evt),
  255.     );
  257.     if (this.properties.showSnapLines) {
  258.       this.drawSnapLines(evt.coordinate, features);
  259.     }
  261.     if (this.properties.showSnapPoints && features.length) {
  262.       this.drawSnapPoints(evt.coordinate, features[0]);
  263.     }
  264.   }
  266.   /**
  267.    * Returns a list of the {num} closest features
  268.    * to a given coordinate.
  269.    * @private
  270.    * @param {ol.Coordinate} coordinate Coordinate.
  271.    * @param {Number} nbFeatures Number of features to search.
  272.    * @returns {Array.<ol.Feature>} List of closest features.
  273.    */
  274.   getClosestFeatures(coordinate, nbFeatures = 1) {
  275.     const editFeature = this.editor.getEditFeature();
  276.     const drawFeature = this.editor.getDrawFeature();
  277.     const currentFeatures = [editFeature, drawFeature].filter((f) => !!f);
  279.     const cacheDist = {};
  280.     const dist = (f) => {
  281.       const uid = getUid(f);
  282.       if (!cacheDist[uid]) {
  283.         const cCoord = f.getGeometry().getClosestPoint(coordinate);
  284.         const dx = cCoord[0] - coordinate[0];
  285.         const dy = cCoord[1] - coordinate[1];
  286.         cacheDist[uid] = dx * dx + dy * dy;
  287.       }
  288.       return cacheDist[uid];
  289.     };
  290.     const sortByDistance = (a, b) => dist(a) - dist(b);
  292.     let features = this.source
  293.       .getFeaturesInExtent(this.extentFilter())
  294.       .filter(
  295.         (feature) => this.filter(feature) && !currentFeatures.includes(feature),
  296.       )
  297.       .sort(sortByDistance)
  298.       .slice(0, nbFeatures);
  300.     // When using showSnapPoints, return all features except edit/draw features
  301.     if (this.properties.showSnapPoints) {
  302.       return features;
  303.     }
  305.     // When using showSnapLines, return all features but edit/draw features are
  306.     // cloned to remove the node at the mouse position.
  307.     currentFeatures.filter(this.filter).forEach((feature) => {
  308.       const geom = feature.getGeometry();
  310.       if (!(geom instanceof Circle) && !(geom instanceof Point)) {
  311.         const snapGeom = getShiftedMultiPoint(geom, coordinate);
  312.         const isPolygon = geom instanceof Polygon;
  313.         const snapFeature = feature.clone();
  314.         snapFeature
  315.           .getGeometry()
  316.           .setCoordinates(
  317.             isPolygon ? [snapGeom.getCoordinates()] : snapGeom.getCoordinates(),
  318.           );
  319.         features = [snapFeature, ...features];
  320.       }
  321.     });
  323.     return features;
  324.   }
  326.   /**
  327.    * Returns an extent array, considers the map rotation.
  328.    * @private
  329.    * @param {ol.Geometry} geometry An OL geometry.
  330.    * @returns {Array.<number>} extent array.
  331.    */
  332.   getRotatedExtent(geometry, coordinate) {
  333.     const coordinates =
  334.       geometry instanceof Polygon
  335.         ? geometry.getCoordinates()[0]
  336.         : geometry.getCoordinates();
  338.     if (!coordinates.length) {
  339.       // Polygons initially return a geometry with an empty coordinate array, so we need to catch it
  340.       return [coordinate];
  341.     }
  343.     // Get the extreme X and Y using pixel values so the rotation is considered
  344.     const xMin = coordinates.reduce((finalMin, coord) => {
  345.       const pixelCurrent = this.map.getPixelFromCoordinate(coord);
  346.       const pixelFinal = this.map.getPixelFromCoordinate(
  347.         finalMin || coordinates[0],
  348.       );
  349.       return pixelCurrent[0] <= pixelFinal[0] ? coord : finalMin;
  350.     });
  351.     const xMax = coordinates.reduce((finalMax, coord) => {
  352.       const pixelCurrent = this.map.getPixelFromCoordinate(coord);
  353.       const pixelFinal = this.map.getPixelFromCoordinate(
  354.         finalMax || coordinates[0],
  355.       );
  356.       return pixelCurrent[0] >= pixelFinal[0] ? coord : finalMax;
  357.     });
  358.     const yMin = coordinates.reduce((finalMin, coord) => {
  359.       const pixelCurrent = this.map.getPixelFromCoordinate(coord);
  360.       const pixelFinal = this.map.getPixelFromCoordinate(
  361.         finalMin || coordinates[0],
  362.       );
  363.       return pixelCurrent[1] <= pixelFinal[1] ? coord : finalMin;
  364.     });
  365.     const yMax = coordinates.reduce((finalMax, coord) => {
  366.       const pixelCurrent = this.map.getPixelFromCoordinate(coord);
  367.       const pixelFinal = this.map.getPixelFromCoordinate(
  368.         finalMax || coordinates[0],
  369.       );
  370.       return pixelCurrent[1] >= pixelFinal[1] ? coord : finalMax;
  371.     });
  373.     // Create four infinite lines through the extremes X and Y and rotate them
  374.     const minVertLine = new LineString([
  375.       [xMin[0], -20037508.342789],
  376.       [xMin[0], 20037508.342789],
  377.     ]);
  378.     minVertLine.rotate(this.map.getView().getRotation(), xMin);
  379.     const maxVertLine = new LineString([
  380.       [xMax[0], -20037508.342789],
  381.       [xMax[0], 20037508.342789],
  382.     ]);
  383.     maxVertLine.rotate(this.map.getView().getRotation(), xMax);
  384.     const minHoriLine = new LineString([
  385.       [-20037508.342789, yMin[1]],
  386.       [20037508.342789, yMin[1]],
  387.     ]);
  388.     minHoriLine.rotate(this.map.getView().getRotation(), yMin);
  389.     const maxHoriLine = new LineString([
  390.       [-20037508.342789, yMax[1]],
  391.       [20037508.342789, yMax[1]],
  392.     ]);
  393.     maxHoriLine.rotate(this.map.getView().getRotation(), yMax);
  395.     // Use intersection points of the four lines to get the extent
  396.     const intersectTopLeft = OverlayOp.intersection(
  397.       parser.read(minVertLine),
  398.       parser.read(minHoriLine),
  399.     );
  400.     const intersectBottomLeft = OverlayOp.intersection(
  401.       parser.read(minVertLine),
  402.       parser.read(maxHoriLine),
  403.     );
  404.     const intersectTopRight = OverlayOp.intersection(
  405.       parser.read(maxVertLine),
  406.       parser.read(minHoriLine),
  407.     );
  408.     const intersectBottomRight = OverlayOp.intersection(
  409.       parser.read(maxVertLine),
  410.       parser.read(maxHoriLine),
  411.     );
  413.     return [
  414.       [intersectTopLeft.getCoordinate().x, intersectTopLeft.getCoordinate().y],
  415.       [
  416.         intersectBottomLeft.getCoordinate().x,
  417.         intersectBottomLeft.getCoordinate().y,
  418.       ],
  419.       [
  420.         intersectTopRight.getCoordinate().x,
  421.         intersectTopRight.getCoordinate().y,
  422.       ],
  423.       [
  424.         intersectBottomRight.getCoordinate().x,
  425.         intersectBottomRight.getCoordinate().y,
  426.       ],
  427.     ];
  428.   }
  430.   // Calculate lines that are vertical or horizontal to a coordinate.
  431.   getVerticalAndHorizontalLines(coordinate, snapCoords) {
  432.     // Draw snaplines when cursor vertically or horizontally aligns with a snap feature.
  433.     // We draw only on vertical and one horizontal line to avoid crowded lines when polygons or lines have a lot of coordinates.
  434.     const halfTol = this.snapTolerance / 2;
  435.     const doubleTol = this.snapTolerance * 2;
  436.     const mousePx = this.map.getPixelFromCoordinate(coordinate);
  437.     const [mouseX, mouseY] = mousePx;
  438.     let vLine;
  439.     let hLine;
  440.     let closerDistanceWithVLine = Infinity;
  441.     let closerDistanceWithHLine = Infinity;
  442.     for (let i = 0; i < snapCoords.length; i += 1) {
  443.       const snapCoord = snapCoords[i];
  444.       const snapPx = this.map.getPixelFromCoordinate(snapCoords[i]);
  445.       const [snapX, snapY] = snapPx;
  446.       const drawVLine = mouseX > snapX - halfTol && mouseX < snapX + halfTol;
  447.       const drawHLine = mouseY > snapY - halfTol && mouseY < snapY + halfTol;
  449.       const distanceWithVLine = Math.abs(mouseX - snapX);
  450.       const distanceWithHLine = Math.abs(mouseY - snapY);
  452.       if (
  453.         (drawVLine && distanceWithVLine > closerDistanceWithVLine) ||
  454.         (drawHLine && distanceWithHLine > closerDistanceWithHLine)
  455.       ) {
  456.         // eslint-disable-next-line no-continue
  457.         continue;
  458.       }
  460.       let newPt;
  462.       if (drawVLine) {
  463.         closerDistanceWithVLine = distanceWithVLine;
  464.         const newY = mouseY + (mouseY < snapY ? -doubleTol : doubleTol);
  465.         newPt = this.map.getCoordinateFromPixel([snapX, newY]);
  466.       } else if (drawHLine) {
  467.         closerDistanceWithHLine = distanceWithHLine;
  468.         const newX = mouseX + (mouseX < snapX ? -doubleTol : doubleTol);
  469.         newPt = this.map.getCoordinateFromPixel([newX, snapY]);
  470.       }
  472.       if (newPt) {
  473.         const lineCoords = [newPt, snapCoord];
  474.         const geom = new LineString(lineCoords);
  475.         const feature = new Feature(geom);
  477.         feature.set(SNAP_FEATURE_TYPE_PROPERTY, VH_LINE_KEY);
  479.         if (drawVLine) {
  480.           vLine = feature;
  481.         }
  483.         if (drawHLine) {
  484.           hLine = feature;
  485.         }
  486.       }
  487.     }
  489.     const lines = [];
  491.     if (hLine) {
  492.       lines.push(hLine);
  493.     }
  495.     if (vLine && vLine !== hLine) {
  496.       lines.push(vLine);
  497.     }
  499.     return lines;
  500.   }
  502.   /**
  503.    * For each segment, we calculate lines that extends it.
  504.    */
  505.   getSegmentLines(coordinate, snapCoords, snapCoordsBefore) {
  506.     const mousePx = this.map.getPixelFromCoordinate(coordinate);
  507.     const doubleTol = this.snapTolerance * 2;
  508.     const [mouseX, mouseY] = mousePx;
  509.     const lines = [];
  511.     for (let i = 0; i < snapCoords.length; i += 1) {
  512.       if (!snapCoordsBefore[i]) {
  513.         // eslint-disable-next-line no-continue
  514.         continue;
  515.       }
  516.       const snapCoordBefore = snapCoordsBefore[i];
  517.       const snapCoord = snapCoords[i];
  518.       const snapPxBefore = this.map.getPixelFromCoordinate(snapCoordBefore);
  519.       const snapPx = this.map.getPixelFromCoordinate(snapCoord);
  521.       const [snapX] = snapPx;
  523.       // Calculate projected point
  524.       const projMousePx = getProjectedPoint(mousePx, snapPxBefore, snapPx);
  525.       const [projMouseX, projMouseY] = projMousePx;
  526.       const distance = Math.sqrt(
  527.         (projMouseX - mouseX) ** 2 + (projMouseY - mouseY) ** 2,
  528.       );
  529.       let newPt;
  531.       if (distance <= this.snapTolerance) {
  532.         // lineFunc is undefined when it's a vertical line
  533.         const lineFunc = getEquationOfLine(snapPxBefore, snapPx);
  534.         const newX = projMouseX + (projMouseX < snapX ? -doubleTol : doubleTol);
  535.         if (lineFunc) {
  536.           newPt = this.map.getCoordinateFromPixel([
  537.             newX,
  538.             lineFunc ? lineFunc(newX) : projMouseY,
  539.           ]);
  540.         }
  541.       }
  543.       if (newPt) {
  544.         const lineCoords = [snapCoordBefore, snapCoord, newPt];
  545.         const geom = new LineString(lineCoords);
  546.         const feature = new Feature(geom);
  547.         feature.set(SNAP_FEATURE_TYPE_PROPERTY, SEGMENT_LINE_KEY);
  548.         lines.push(feature);
  549.       }
  550.     }
  551.     return lines;
  552.   }
  554.   /**
  555.    * For each segment, we calculate lines that are perpendicular.
  556.    */
  557.   getOrthoLines(coordinate, snapCoords, snapCoordsBefore) {
  558.     const mousePx = this.map.getPixelFromCoordinate(coordinate);
  559.     const doubleTol = this.snapTolerance * 2;
  560.     const [mouseX, mouseY] = mousePx;
  561.     const lines = [];
  563.     for (let i = 0; i < snapCoords.length; i += 1) {
  564.       if (!snapCoordsBefore[i]) {
  565.         // eslint-disable-next-line no-continue
  566.         continue;
  567.       }
  568.       const snapCoordBefore = snapCoordsBefore[i];
  569.       const snapCoord = snapCoords[i];
  570.       const snapPxBefore = this.map.getPixelFromCoordinate(snapCoordBefore);
  571.       const snapPx = this.map.getPixelFromCoordinate(snapCoord);
  573.       const orthoLine1 = new LineString([snapPxBefore, snapPx]);
  574.       orthoLine1.rotate((90 * Math.PI) / 180, snapPxBefore);
  576.       const orthoLine2 = new LineString([snapPx, snapPxBefore]);
  577.       orthoLine2.rotate((90 * Math.PI) / 180, snapPx);
  579.       [orthoLine1, orthoLine2].forEach((line) => {
  580.         const [anchorPx, last] = line.getCoordinates();
  581.         const projMousePx = getProjectedPoint(mousePx, anchorPx, last);
  582.         const [projMouseX, projMouseY] = projMousePx;
  583.         const distance = Math.sqrt(
  584.           (projMouseX - mouseX) ** 2 + (projMouseY - mouseY) ** 2,
  585.         );
  587.         let newPt;
  588.         if (distance <= this.snapTolerance) {
  589.           // lineFunc is undefined when it's a vertical line
  590.           const lineFunc = getEquationOfLine(anchorPx, projMousePx);
  591.           const newX =
  592.             projMouseX + (projMouseX < anchorPx[0] ? -doubleTol : doubleTol);
  593.           if (lineFunc) {
  594.             newPt = this.map.getCoordinateFromPixel([
  595.               newX,
  596.               lineFunc ? lineFunc(newX) : projMouseY,
  597.             ]);
  598.           }
  599.         }
  601.         if (newPt) {
  602.           const coords = [this.map.getCoordinateFromPixel(anchorPx), newPt];
  603.           const geom = new LineString(coords);
  604.           const feature = new Feature(geom);
  605.           feature.set(SNAP_FEATURE_TYPE_PROPERTY, ORTHO_LINE_KEY);
  606.           lines.push(feature);
  607.         }
  608.       });
  609.     }
  610.     return lines;
  611.   }
  613.   /**
  614.    * Draws snap lines by building the extent for
  615.    * a pair of features.
  616.    * @private
  617.    * @param {ol.Coordinate} coordinate Mouse pointer coordinate.
  618.    * @param {Array.<ol.Feature>} features List of features.
  619.    */
  620.   drawSnapLines(coordinate, features) {
  621.     // First get all snap points: neighbouring feature vertices and extent corners
  622.     const snapCoordsBefore = []; // store the direct before point in the coordinate array
  623.     const snapCoords = [];
  624.     const snapCoordsAfter = []; // store the direct next point in the coordinate array
  626.     for (let i = 0; i < features.length; i += 1) {
  627.       const geom = features[i].getGeometry();
  628.       let featureCoord = geom.getCoordinates();
  630.       if (!featureCoord && geom instanceof Circle) {
  631.         featureCoord = geom.getCenter();
  632.       }
  634.       // Polygons initially return a geometry with an empty coordinate array, so we need to catch it
  635.       if (featureCoord?.length) {
  636.         if (geom instanceof Point || geom instanceof Circle) {
  637.           snapCoordsBefore.push();
  638.           snapCoords.push(featureCoord);
  639.           snapCoordsAfter.push();
  640.         } else {
  641.           // Add feature vertices
  642.           // eslint-disable-next-line no-lonely-if
  643.           if (geom instanceof LineString) {
  644.             for (let j = 0; j < featureCoord.length; j += 1) {
  645.               snapCoordsBefore.push(featureCoord[j - 1]);
  646.               snapCoords.push(featureCoord[j]);
  647.               snapCoordsAfter.push(featureCoord[j + 1]);
  648.             }
  649.           } else if (geom instanceof Polygon) {
  650.             for (let j = 0; j < featureCoord[0].length; j += 1) {
  651.               snapCoordsBefore.push(featureCoord[0][j - 1]);
  652.               snapCoords.push(featureCoord[0][j]);
  653.               snapCoordsAfter.push(featureCoord[0][j + 1]);
  654.             }
  655.           }
  657.           // Add extent vertices
  658.           // const coords = this.getRotatedExtent(geom, coordinate);
  659.           // for (let j = 0; j < coords.length; j += 1) {
  660.           //   snapCoordsBefore.push();
  661.           //   snapCoords.push(coords[j]);
  662.           //   snapCoordsNext.push();
  663.           // }
  664.         }
  665.       }
  666.     }
  668.     const {
  669.       showVerticalAndHorizontalLines,
  670.       showOrthoLines,
  671.       showSegmentLines,
  672.       snapLinesOrder,
  673.     } = this.properties;
  675.     let lines = [];
  676.     const helpLinesOrdered = [];
  677.     const helpLines = {
  678.       [ORTHO_LINE_KEY]: [],
  679.       [SEGMENT_LINE_KEY]: [],
  680.       [VH_LINE_KEY]: [],
  681.       [CUSTOM_LINE_KEY]: [],
  682.     };
  684.     if (showOrthoLines) {
  685.       helpLines[ORTHO_LINE_KEY] =
  686.         this.getOrthoLines(coordinate, snapCoords, snapCoordsBefore) || [];
  687.     }
  689.     if (showSegmentLines) {
  690.       helpLines[SEGMENT_LINE_KEY] =
  691.         this.getSegmentLines(coordinate, snapCoords, snapCoordsBefore) || [];
  692.     }
  694.     if (showVerticalAndHorizontalLines) {
  695.       helpLines[VH_LINE_KEY] =
  696.         this.getVerticalAndHorizontalLines(coordinate, snapCoords) || [];
  697.     }
  699.     // Add custom lines
  700.     if (this.drawCustomSnapLines) {
  701.       helpLines[CUSTOM_LINE_KEY] =
  702.         this.drawCustomSnapLines(
  703.           coordinate,
  704.           snapCoords,
  705.           snapCoordsBefore,
  706.           snapCoordsAfter,
  707.         ) || [];
  708.     }
  710.     // Add help lines in a defined order.
  711.     snapLinesOrder.forEach((lineType) => {
  712.       helpLinesOrdered.push(...(helpLines[lineType] || []));
  713.     });
  715.     // Remove duplicated lines, comparing their equation using pixels.
  716.     helpLinesOrdered.forEach((lineA) => {
  717.       if (
  718.         !lines.length ||
  719.         !lines.find((lineB) => isSameLines(lineA, lineB, this.map))
  720.       ) {
  721.         lines.push(lineA);
  722.       }
  723.     });
  725.     if (this.lineFilter) {
  726.       lines = this.lineFilter(lines, coordinate);
  727.     }
  729.     // We snap on intersections of lines (distance < this.snapTolerance) or on all the help lines.
  730.     const intersectFeatures = getIntersectedLinesAndPoint(
  731.       coordinate,
  732.       lines,
  733.       this.map,
  734.       this.snapTolerance,
  735.     );
  737.     if (intersectFeatures?.length) {
  738.       intersectFeatures.forEach((feature) => {
  739.         if (feature.getGeometry().getType() === 'Point') {
  740.           this.snapLayer.getSource().addFeature(feature);
  741.         } else {
  742.           this.linesLayer.getSource().addFeature(feature);
  743.         }
  744.       });
  745.     } else {
  746.       this.snapLayer.getSource().addFeatures(lines);
  747.     }
  748.   }
  750.   /**
  751.    * Adds snap points to the snapping layer.
  752.    * @private
  753.    * @param {ol.Coordinate} coordinate cursor coordinate.
  754.    * @param {ol.eaturee} feature Feature to draw the snap points for.
  755.    */
  756.   drawSnapPoints(coordinate, feature) {
  757.     const featCoord = feature.getGeometry().getClosestPoint(coordinate);
  759.     const px = this.map.getPixelFromCoordinate(featCoord);
  760.     let snapCoords = [];
  762.     if (this.properties.useMapUnits) {
  763.       snapCoords = [
  764.         [featCoord[0] - this.properties.snapPointDist, featCoord[1]],
  765.         [featCoord[0] + this.properties.snapPointDist, featCoord[1]],
  766.         [featCoord[0], featCoord[1] - this.properties.snapPointDist],
  767.         [featCoord[0], featCoord[1] + this.properties.snapPointDist],
  768.       ];
  769.     } else {
  770.       const snapPx = [
  771.         [px[0] - this.properties.snapPointDist, px[1]],
  772.         [px[0] + this.properties.snapPointDist, px[1]],
  773.         [px[0], px[1] - this.properties.snapPointDist],
  774.         [px[0], px[1] + this.properties.snapPointDist],
  775.       ];
  777.       for (let j = 0; j < snapPx.length; j += 1) {
  778.         snapCoords.push(this.map.getCoordinateFromPixel(snapPx[j]));
  779.       }
  780.     }
  782.     const snapGeom = new MultiPoint(snapCoords);
  783.     this.snapLayer.getSource().addFeature(new Feature(snapGeom));
  784.   }
  786.   /**
  787.    * @inheritdoc
  788.    */
  789.   activate(silent) {
  790.     super.activate(silent);
  791.     this.snapLayer.setMap(this.map);
  792.     this.linesLayer.setMap(this.map);
  793.     this.map?.addInteraction(this.pointerInteraction);
  794.     this.map?.addInteraction(this.snapInteraction);
  796.     document.getElementById('aux-cb')?.addEventListener('change', (evt) => {
  797.       this.setProperties({
  798.         showSnapLines: evt.target.checked,
  799.         showSnapPoints: !evt.target.checked,
  800.       });
  801.     });
  803.     document.getElementById('dist-cb')?.addEventListener('change', (evt) => {
  804.       this.setProperties({
  805.         showSnapPoints: evt.target.checked,
  806.         showSnapLines: !evt.target.checked,
  807.       });
  808.     });
  810.     document.getElementById('width-input')?.addEventListener('keyup', (evt) => {
  811.       const snapPointDist = parseFloat(evt.target.value);
  812.       if (!Number.isNaN(snapPointDist)) {
  813.         this.setProperties({ snapPointDist });
  814.       }
  815.     });
  816.   }
  818.   /**
  819.    * @inheritdoc
  820.    */
  821.   deactivate(silent) {
  822.     super.deactivate(silent);
  823.     this.snapLayer.setMap(null);
  824.     this.linesLayer.setMap(null);
  825.     this.map?.removeInteraction(this.pointerInteraction);
  826.     this.map?.removeInteraction(this.snapInteraction);
  827.   }
  828. }
  830. export default CadControl;