Source: modules/Snapping.js

  1. /**
  2.  * @module modules/Snapping.js
  3.  * @name Snapping
  4.  * @copyright 2023 3Liz
  5.  * @license MPL-2.0
  6.  */
  8. import { mainEventDispatcher } from '../modules/Globals.js';
  9. import Edition from './Edition.js';
  10. import { MapRootState } from './state/MapLayer.js';
  11. import { TreeRootState } from './state/LayerTree.js';
  13. /**
  14.  * @class
  15.  * @name Snapping
  16.  */
  17. export default class Snapping {
  19.     /**
  20.      * Create a snapping instance
  21.      * @param {Edition}       edition      - The edition module
  22.      * @param {MapRootState}  rootMapGroup - Root map group
  23.      * @param {TreeRootState} layerTree    - Root tree layer group
  24.      * @param {object}        lizmap3      - The old lizmap object
  25.      */
  26.     constructor(edition, rootMapGroup, layerTree, lizmap3) {
  28.         this._edition = edition;
  29.         this._rootMapGroup = rootMapGroup;
  30.         this._layerTree = layerTree;
  31.         this._lizmap3 = lizmap3;
  33.         this._active = false;
  34.         this._snapLayersRefreshable = false;
  36.         this._maxFeatures = 1000;
  37.         this._restrictToMapExtent = true;
  38.         this._config = undefined;
  39.         this._snapEnabled = {};
  40.         this._snapToggled = {};
  41.         this._snapLayers = [];
  43.         // Create layer to store snap features
  44.         const snapLayer = new OpenLayers.Layer.Vector('snaplayer', {
  45.             visibility: false,
  46.             styleMap: new OpenLayers.StyleMap({
  47.                 pointRadius: 2,
  48.                 fill: false,
  49.                 stroke: false,
  50.                 strokeWidth: 3,
  51.                 strokeColor: 'red',
  52.                 strokeOpacity: 0.8
  53.             })
  54.         });
  56.         this._lizmap3.map.addLayer(snapLayer);
  58.         const snapControl = new OpenLayers.Control.Snapping({
  59.             layer: this._edition.editLayer,
  60.             targets: [{
  61.                 layer: snapLayer
  62.             }]
  63.         });
  64.         this._lizmap3.map.addControls([snapControl]);
  65.         this._lizmap3.controls['snapControl'] = snapControl;
  67.         this._setSnapLayersRefreshable = () => {
  68.             if(this._active){
  69.                 this.snapLayersRefreshable = true;
  70.             }
  71.         }
  73.         this._setSnapLayersVisibility = () => {
  74.             if(this._active){
  75.                 this._snapLayers.forEach((layer)=>{
  76.                     this._snapEnabled[layer] = this.getLayerTreeVisibility(layer);
  77.                 })
  79.                 this._sortSnapLayers();
  80.                 const config = structuredClone(this._config);
  81.                 config.snap_layers = this._snapLayers;
  82.                 config.snap_enabled = this._snapEnabled;
  84.                 this.config = config;
  85.                 this.snapLayersRefreshable = true;
  87.                 // dispatch an event, it might be useful to know when the list of visible layer for snap changed
  88.                 mainEventDispatcher.dispatch('snapping.layer.visibility.changed');
  89.             }
  90.         }
  92.         this._sortSnapLayers = () => {
  93.             let snapLayers = [...this._snapLayers];
  94.             let visibleLayers = [];
  95.             for (let id in this._snapEnabled) {
  96.                 if(this._snapEnabled[id]){
  97.                     let visibileLayer = snapLayers.splice(snapLayers.indexOf(id),1)
  98.                     visibleLayers = visibleLayers.concat(visibileLayer)
  99.                 }
  100.             }
  101.             visibleLayers.sort();
  102.             snapLayers.sort();
  103.             this._snapLayers = visibleLayers.concat(snapLayers);
  104.         }
  106.         // Activate snap when a layer is edited
  107.         mainEventDispatcher.addListener(
  108.             () => {
  109.                 // Get snapping configuration for edited layer
  110.                 for (const editionLayer in this._lizmap3.config.editionLayers) {
  111.                     if (this._lizmap3.config.editionLayers.hasOwnProperty(editionLayer)) {
  112.                         if (this._lizmap3.config.editionLayers[editionLayer].layerId === this._edition.layerId){
  113.                             const editionLayerConfig = this._lizmap3.config.editionLayers[editionLayer];
  114.                             if (editionLayerConfig.hasOwnProperty('snap_layers') && editionLayerConfig.snap_layers.length > 0){
  116.                                 this._snapLayers = [...editionLayerConfig.snap_layers];
  117.                                 this._snapLayers.forEach((layer)=>{
  118.                                     this._snapEnabled[layer] = this.getLayerTreeVisibility(layer);
  119.                                 })
  120.                                 this._snapLayers.forEach((layer)=>{
  121.                                     // on init enable snap by default on visible layers
  122.                                     this._snapToggled[layer] = this.getLayerTreeVisibility(layer);
  123.                                 })
  125.                                 // sorting of layers by name and put disabled layers on bottom of the list
  126.                                 this._sortSnapLayers();
  128.                                 this.config = {
  129.                                     'snap_layers': this._snapLayers,
  130.                                     'snap_enabled': this._snapEnabled,
  131.                                     'snap_on_layers':this._snapToggled,
  132.                                     'snap_vertices': (editionLayerConfig.hasOwnProperty('snap_vertices') && editionLayerConfig.snap_vertices === 'True') ? true : false,
  133.                                     'snap_segments': (editionLayerConfig.hasOwnProperty('snap_segments') && editionLayerConfig.snap_segments === 'True') ? true : false,
  134.                                     'snap_intersections': (editionLayerConfig.hasOwnProperty('snap_intersections') && editionLayerConfig.snap_intersections === 'True') ? true : false,
  135.                                     'snap_vertices_tolerance': editionLayerConfig.hasOwnProperty('snap_vertices_tolerance') ? editionLayerConfig.snap_vertices_tolerance : 10,
  136.                                     'snap_segments_tolerance': editionLayerConfig.hasOwnProperty('snap_segments_tolerance') ? editionLayerConfig.snap_segments_tolerance : 10,
  137.                                     'snap_intersections_tolerance': editionLayerConfig.hasOwnProperty('snap_intersections_tolerance') ? editionLayerConfig.snap_intersections_tolerance : 10
  138.                                 };
  139.                             }
  140.                         }
  141.                     }
  142.                 }
  144.                 if (this._config !== undefined){
  145.                     // Configure snapping
  146.                     const snapControl = this._lizmap3.controls.snapControl;
  148.                     // Set edition layer as main layer
  149.                     snapControl.setLayer(this._edition.editLayer);
  151.                     snapControl.targets[0].node = this._config.snap_vertices;
  152.                     snapControl.targets[0].vertex = this._config.snap_intersections;
  153.                     snapControl.targets[0].edge = this._config.snap_segments;
  154.                     snapControl.targets[0].nodeTolerance = this._config.snap_vertices_tolerance;
  155.                     snapControl.targets[0].vertexTolerance = this._config.snap_intersections_tolerance;
  156.                     snapControl.targets[0].edgeTolerance = this._config.snap_segments_tolerance;
  158.                     // Listen to moveend event and to layers visibility changes to able data refreshing
  159.                     this._lizmap3.map.events.register('moveend', this, this._setSnapLayersRefreshable);
  160.                     this._rootMapGroup.addListener(
  161.                         this._setSnapLayersVisibility,
  162.                         ['layer.visibility.changed','group.visibility.changed']
  163.                     );
  164.                 }
  165.             },
  166.             'edition.formDisplayed'
  167.         );
  169.         // Clean snap when edition ends
  170.         mainEventDispatcher.addListener(
  171.             () => {
  172.                 this.active = false;
  173.                 this._lizmap3.map.getLayersByName('snaplayer')[0].destroyFeatures();
  174.                 this.config = undefined;
  176.                 // Remove listener to moveend event to layers visibility event
  177.                 this._lizmap3.map.events.unregister('moveend', this, this._setSnapLayersRefreshable);
  178.                 this._rootMapGroup.removeListener(
  179.                     this._setSnapLayersVisibility,
  180.                     ['layer.visibility.changed','group.visibility.changed']
  181.                 )
  182.             },
  183.             'edition.formClosed'
  184.         );
  185.     }
  187.     getSnappingData () {
  188.         // Empty snapping layer first
  189.         this._lizmap3.map.getLayersByName('snaplayer')[0].destroyFeatures();
  191.         // filter only visible layers and toggled layers on the the snap list
  192.         const currentSnapLayers = this._snapLayers.filter(
  193.             (layerId) => this._snapEnabled[layerId] && this._snapToggled[layerId]
  194.         );
  196.         // TODO : group aync calls with Promises
  197.         for (const snapLayer of currentSnapLayers) {
  199.             lizMap.getFeatureData(this._lizmap3.getLayerConfigById(snapLayer)[0], null, null, 'geom', this._restrictToMapExtent, null, this._maxFeatures,
  200.                 (fName, fFilter, fFeatures) => {
  202.                     // Transform features
  203.                     const snapLayerConfig = lizMap.config.layers[fName];
  204.                     let snapLayerCrs = snapLayerConfig['featureCrs'];
  205.                     if (!snapLayerCrs) {
  206.                         snapLayerCrs = snapLayerConfig['crs'];
  207.                     }
  209.                     // TODO : use OL 6 instead ?
  210.                     const gFormat = new OpenLayers.Format.GeoJSON({
  211.                         ignoreExtraDims: true,
  212.                         externalProjection: snapLayerCrs,
  213.                         internalProjection: this._lizmap3.map.getProjection()
  214.                     });
  216.                     const tfeatures = gFormat.read({
  217.                         type: 'FeatureCollection',
  218.                         features: fFeatures
  219.                     });
  221.                     // Add features
  222.                     this._lizmap3.map.getLayersByName('snaplayer')[0].addFeatures(tfeatures);
  223.                 });
  224.         }
  226.         this.snapLayersRefreshable = false;
  227.     }
  229.     toggle(){
  230.         this.active = !this._active;
  231.     }
  232.     /**
  233.      * Getting the layer visibility from the layer tree state
  234.      * @param   {string} layerId - the layer id
  235.      * @returns {boolean} the layer visibility
  236.      */
  237.     getLayerTreeVisibility(layerId){
  238.         let visible = false;
  239.         let layerConfig = this._lizmap3.getLayerConfigById(layerId);
  241.         if(layerConfig && layerConfig[0]) {
  242.             try {
  243.                 visible = this._layerTree.getTreeLayerByName(layerConfig[0]).visibility
  244.             } catch {
  245.                 visible = false
  246.             }
  247.         }
  248.         return visible;
  249.     }
  250.     /**
  251.      * Getting the layer tile or the layer name for snap layers list
  252.      * @param   {string} layerId - the layer id
  253.      * @returns {string} the layer title or layer name
  254.      */
  255.     getLayerTitle(layerId){
  256.         let layerConfig = this._lizmap3.getLayerConfigById(layerId);
  257.         if (layerConfig) {
  258.             return layerConfig[1].title || layerConfig[1].name;
  259.         }
  260.         return "";
  261.     }
  263.     get snapEnabled(){
  264.         return this._snapEnabled;
  265.     }
  267.     set snapToggled(layerId){
  268.         this._snapToggled[layerId] = !this._snapToggled[layerId];
  270.         const config = structuredClone(this._config);
  271.         config.snap_on_layers = this._snapToggled;
  273.         this.config = config;
  274.         this.snapLayersRefreshable = true;
  275.     }
  277.     get snapLayersRefreshable(){
  278.         return this._snapLayersRefreshable;
  279.     }
  281.     set snapLayersRefreshable(refreshable) {
  282.         this._snapLayersRefreshable = refreshable;
  283.         mainEventDispatcher.dispatch('snapping.refreshable');
  284.     }
  286.     get active() {
  287.         return this._active;
  288.     }
  290.     set active(active) {
  291.         this._active = active;
  293.         // (de)activate snap control
  294.         if (this._active) {
  295.             this.getSnappingData();
  296.             this._lizmap3.controls.snapControl.activate();
  297.         } else {
  298.             // Disable refresh button when snapping is inactive
  299.             this.snapLayersRefreshable = false;
  300.             this._lizmap3.controls.snapControl.deactivate();
  301.         }
  303.         // Set snap layer visibility
  304.         this._lizmap3.map.getLayersByName('snaplayer')[0].setVisibility(this._active);
  306.         mainEventDispatcher.dispatch('snapping.active');
  307.     }
  309.     get config() {
  310.         return this._config;
  311.     }
  313.     set config(config) {
  314.         this._config = config;
  316.         mainEventDispatcher.dispatch('snapping.config');
  317.     }
  318. }