refactor editor.js, allow adding holes to polygons, various fixes

src/c3nav/editor/static/editor/js/editor.js

@@ -18,35 +18,6 @@ editor = {
         editor.get_packages();
         editor.get_sources();
         editor.get_levels();
-
-        $('#mapeditdetail').on('click', '#btn_abort', function () {
-            if (editor._adding !== null) {
-                editor._adding.remove();
-                editor._adding = null;
-                editor._drawing = null;
-                $('#mapeditcontrols').removeClass('detail').addClass('list');
-                $('#mapeditdetail').html('');
-                $('.start-drawing').prop('disabled', false);
-            }
-        }).on('submit', 'form', function (e) {
-            e.preventDefault();
-            var data = $(this).serialize();
-            var action = $(this).attr('action');
-            $('#mapeditcontrols').removeClass('detail');
-            $('#mapeditdetail').html('');
-            $.post(action, data, function (data) {
-                var content = $(data);
-                if ($('<div>').append(content).find('form').length > 0) {
-                    $('#mapeditdetail').html(content);
-                    $('#mapeditcontrols').addClass('detail');
-                } else {
-                    editor._adding = null;
-                    editor._drawing = null;
-                    $('.start-drawing').prop('disabled', false);
-                    $('#mapeditcontrols').addClass('list');
-                }
-            });
-        });
     },
 
     get_feature_types: function () {
@@ -125,7 +96,7 @@ editor = {
 
             $('.leaflet-levels').on('click', 'a', function (e) {
                 e.preventDefault();
-                if (editor._drawing !== null || editor._adding !== null) return;
+                if (editor._creating !== null || editor._editing !== null) return;
                 editor.level_layers[editor._level].remove();
                 editor._level = $(this).attr('name');
                 editor.level_layers[editor._level].addTo(editor.map);
@@ -148,8 +119,8 @@ editor = {
 
     init_drawing: function () {
         // Add drawing new features
-        editor._drawing = null;
+        editor._creating = null;
-        editor._adding = null;
+        editor._editing = null;
 
         L.DrawControl = L.Control.extend({
             options: {
@@ -163,7 +134,7 @@ editor = {
                     name: ''
                 }).on('click', function (e) {
                     e.preventDefault();
-                    editor.cancel_drawing();
+                    editor.cancel_creating();
                 });
                 return container;
             }
@@ -171,34 +142,25 @@ editor = {
         editor.map.addControl(new L.DrawControl());
 
         $('#mapeditlist').on('click', '.start-drawing', function () {
-            console.log($(this).closest('fieldset'));
+            editor.start_creating($(this).closest('fieldset').attr('name'));
-            editor.start_drawing($(this).closest('fieldset').attr('name'));
         });
 
-        editor.map.on('editable:drawing:commit', function (e) {
+        editor.map.on('editable:drawing:commit', editor.done_creating);
-            editor._adding = e.layer;
+        editor.map.on('editable:editing', editor.update_editing);
+        editor.map.on('editable:drawing:cancel', editor._canceled_creating);
 
-            e.layer.disableEdit();
+        $('#mapeditdetail').on('click', '#btn_editing_cancel', editor.cancel_editing)
-            $('.leaflet-drawbar').hide();
+                           .on('submit', 'form', editor.submit_editing);
-            var path = '/editor/features/' + editor._drawing + '/add';
-            $('#mapeditcontrols').removeClass('list');
-            $('#mapeditdetail').load(path, function () {
-                $('#mapeditcontrols').addClass('detail');
-                $('#id_level').val(editor._level);
-                $('#id_geometry').val(JSON.stringify(editor._adding.toGeoJSON().geometry));
-            });
-
-        }).on('editable:drawing:cancel', function (e) {
-            if (editor._drawing !== null && editor._adding === null) {
-                e.layer.remove();
-                $('.start-drawing').prop('disabled', false);
-            }
-        });
     },
 
-    start_drawing: function (feature_type) {
+    reload_features: function (feature_type) {
-        if (editor._drawing !== null || editor._adding !== null) return;
+        $('.start-drawing').prop('disabled', false);
-        editor._drawing = feature_type;
+        $('#mapeditcontrols').addClass('list');
+    },
+
+    start_creating: function (feature_type) {
+        if (editor._creating !== null || editor._editing !== null) return;
+        editor._creating = feature_type;
         var options = editor.feature_types[feature_type];
         if (options.geomtype == 'polygon') {
             editor.map.editTools.startPolygon(null, options);
@@ -208,11 +170,79 @@ editor = {
         $('.leaflet-drawbar').show();
         $('.start-drawing').prop('disabled', true);
     },
-    cancel_drawing: function () {
+    cancel_creating: function () {
-        if (editor._drawing === null || editor._adding !== null) return;
+        if (editor._creating === null || editor._editing !== null) return;
         editor.map.editTools.stopDrawing();
-        editor._drawing = null;
+        editor._creating = null;
         $('.leaflet-drawbar').hide();
+    },
+    _canceled_creating: function (e) {
+        if (editor._creating !== null && editor._editing === null) {
+            e.layer.remove();
+            $('.start-drawing').prop('disabled', false);
+        }
+    },
+    done_creating: function(e) {
+        if (editor._creating !== null && editor._editing === null) {
+            editor._editing = e.layer;
+            editor._editing.disableEdit();
+            editor.map.fitBounds(editor._editing.getBounds());
+
+            $('.leaflet-drawbar').hide();
+            var path = '/editor/features/' + editor._creating + '/add/';
+            $('#mapeditcontrols').removeClass('list');
+            $('#mapeditdetail').load(path, editor.edit_form_loaded);
+        }
+    },
+
+    start_editing: function () {
+        // todo
+    },
+    edit_form_loaded: function() {
+        $('#mapeditcontrols').addClass('detail');
+        $('#id_level').val(editor._level);
+        $('#id_geometry').val(JSON.stringify(editor._editing.toGeoJSON().geometry));
+        editor._editing.enableEdit();
+        if (editor._editing.options.geomtype == 'polygon') {
+            editor._editing.on('click', function (e) {
+                if ((e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.editEnabled()) {
+                    this.editor.newHole(e.latlng);
+                }
+            });
+        }
+    },
+    update_editing: function () {
+        if (editor._editing !== null) {
+            $('#id_geometry').val(JSON.stringify(editor._editing.toGeoJSON().geometry));
+        }
+    },
+    cancel_editing: function() {
+        if (editor._editing !== null) {
+            editor._editing.remove();
+            editor._editing = null;
+            editor._creating = null;
+            $('#mapeditcontrols').removeClass('detail');
+            $('#mapeditdetail').html('');
+            editor.reload_features();
+        }
+    },
+    submit_editing: function(e) {
+        e.preventDefault();
+        var data = $(this).serialize();
+        var action = $(this).attr('action');
+        $('#mapeditcontrols').removeClass('detail');
+        $('#mapeditdetail').html('');
+        $.post(action, data, function (data) {
+            var content = $(data);
+            if ($('<div>').append(content).find('form').length > 0) {
+                $('#mapeditdetail').html(content);
+                $('#mapeditcontrols').addClass('detail');
+            } else {
+                editor._editing = null;
+                editor._creating = null;
+                editor.reload_features();
+            }
+        });
     }
 };
 

src/c3nav/editor/templates/editor/feature.html

@@ -5,7 +5,7 @@
     {% csrf_token %}
     {% bootstrap_form form %}
     {% buttons %}
-    <button type="button" id="btn_abort" class="btn btn-danger">
+    <button type="button" id="btn_editing_cancel" class="btn btn-danger">
         Cancel
     </button>
     <button type="submit" class="btn btn-primary pull-right">