carto: refactor carto editor using new primitives

app/javascript/old_design/carto.js

@@ -1,48 +1,20 @@
 import L from 'leaflet';
-import area from '@turf/area';
-import FreeDraw, { NONE, EDIT, CREATE, DELETE } from 'leaflet-freedraw';
-import $ from 'jquery';
+
+import FreeDraw, { NONE, CREATE } from 'leaflet-freedraw';
+import { fire, on, getJSON } from '@utils';
 
 import { getData } from '../shared/data';
-import { DEFAULT_POSITION, LAT, LON } from '../shared/carto';
-import { qpActive, displayQP, getQP } from './carto/qp';
-import { cadastreActive, displayCadastre, getCadastre } from './carto/cadastre';
+import { initMap } from '../shared/carto';
+
+import polygonArea from './carto/polygon_area';
+import drawFactory from './carto/draw';
 
 function initialize() {
-  if ($('#map').length > 0) {
-    getPosition(getData('carto').dossierId).then(
-      position => initializeWithPosition(position),
-      () => initializeWithPosition(DEFAULT_POSITION)
-    );
-  }
-}
-
-addEventListener('turbolinks:load', initialize);
-
-function initializeWithPosition(position) {
-  const OSM = L.tileLayer(
-    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-    {
-      attribution:
-        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    }
-  );
-
-  const map = L.map('map', {
-    center: new L.LatLng(position.lat, position.lon),
-    zoom: position.zoom,
-    layers: [OSM],
-    scrollWheelZoom: false
-  });
-
-  if (qpActive()) {
-    displayQP(map, getJsonValue('#quartier_prioritaires'));
-  }
-
-  if (cadastreActive()) {
-    displayCadastre(map, getJsonValue('#cadastres'));
-  }
+  if (document.getElementById('map')) {
+    const data = getData('carto');
+    const position = data.position;
 
+    const map = initMap(position);
     const freeDraw = new FreeDraw({
       mode: NONE,
       smoothFactor: 4,
@@ -51,92 +23,47 @@ function initializeWithPosition(position) {
 
     map.addLayer(freeDraw);
 
-  const latLngs = getJsonValue('#json_latlngs');
-
-  if (latLngs.length) {
-    map.setZoom(18);
-
-    for (let polygon of latLngs) {
-      freeDraw.createPolygon(polygon);
-    }
-
-    map.fitBounds(freeDraw.polygons[0].getBounds());
-  } else if (position.lat == LAT && position.lon == LON) {
-    map.setView(new L.LatLng(position.lat, position.lon), position.zoom);
-  }
-
-  addEventFreeDraw(map, freeDraw);
+    addEventFreeDraw(freeDraw);
     addEventSearchAddress(map);
-}
 
-function getExternalData(map, latLngs) {
-  const { dossierId } = getData('carto');
+    const cartoDrawZones = drawFactory(map, freeDraw);
+    window.DS = { cartoDrawZones };
 
-  if (qpActive()) {
-    getQP(dossierId, latLngs).then(qps => displayQP(map, qps));
-  }
+    cartoDrawZones(data);
 
-  if (cadastreActive()) {
-    const polygons = { type: 'FeatureCollection', features: [] };
-
-    for (let i = 0; i < latLngs.length; i++) {
-      polygons.features.push(featurePolygonLatLngs(latLngs[i]));
-    }
-
-    if (area(polygons) < 300000) {
-      getCadastre(dossierId, latLngs).then(cadastres =>
-        displayCadastre(map, cadastres)
-      );
-    } else {
-      displayCadastre(map, [{ zoom_error: true }]);
+    if (freeDraw.polygons[0]) {
+      map.setZoom(18);
+      map.fitBounds(freeDraw.polygons[0].getBounds());
     }
   }
 }
 
-function featurePolygonLatLngs(coordinates) {
-  return {
-    type: 'Feature',
-    properties: {},
-    geometry: {
-      type: 'Polygon',
-      coordinates: [JSON.parse(getJsonPolygons([coordinates]))['latLngs']]
-    }
-  };
-}
+addEventListener('turbolinks:load', initialize);
 
-function addEventFreeDraw(map, freeDraw) {
+function addEventFreeDraw(freeDraw) {
   freeDraw.on('markers', ({ latLngs }) => {
-    $('#json_latlngs').val(JSON.stringify(latLngs));
+    const input = document.querySelector('input[name=selection]');
 
-    addEventEdit(freeDraw);
+    if (polygonArea(latLngs) < 300000) {
+      input.value = JSON.stringify(latLngs);
+    } else {
+      input.value = '{ "error": "TooManyPolygons" }';
+    }
 
-    getExternalData(map, latLngs);
+    fire(input, 'change');
   });
 
-  $('#map').on('click', () => {
+  on('#map', 'click', () => {
     freeDraw.mode(NONE);
   });
 
-  $('#new').on('click', () => {
+  on('#new', 'click', () => {
     freeDraw.mode(CREATE);
   });
 }
 
-function addEventEdit(freeDraw) {
-  $('.leaflet-container svg').removeAttr('pointer-events');
-  $('.leaflet-container g path').on('click', () => {
-    setTimeout(function() {
-      freeDraw.mode(EDIT | DELETE);
-    }, 50);
-  });
-}
-
-function getPosition(dossierId) {
-  return $.getJSON(`/users/dossiers/${dossierId}/carte/position`);
-}
-
 function getAddressPoint(map, request) {
-  $.get('/ban/address_point', { request }).then(data => {
+  getJSON('/ban/address_point', { request }).then(data => {
     if (data.lat !== null) {
       map.setView(new L.LatLng(data.lat, data.lon), data.zoom);
     }
@@ -144,34 +71,11 @@ function getAddressPoint(map, request) {
 }
 
 function addEventSearchAddress(map) {
-  $("#search-by-address input[type='address']").on(
+  on(
+    '#search-by-address input[type=address]',
     'autocomplete:select',
     (_, seggestion) => {
       getAddressPoint(map, seggestion['label']);
     }
   );
 }
-
-function getJsonValue(selector) {
-  let data = document.querySelector(selector).value;
-  if (data && data !== '[]') {
-    return JSON.parse(data);
-  }
-  return [];
-}
-
-function getJsonPolygons(latLngGroups) {
-  var groups = [];
-
-  latLngGroups.forEach(function forEach(latLngs) {
-    var group = [];
-
-    latLngs.forEach(function forEach(latLng) {
-      group.push('[' + latLng.lng + ', ' + latLng.lat + ']');
-    });
-
-    groups.push('{ "latLngs": [' + group.join(', ') + '] }');
-  });
-
-  return groups;
-}