Source: control/cad.js

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