refactor editor controls

src/c3nav/editor/static/editor/css/editor.css

@@ -13,12 +13,40 @@
     top:2px;
 }
 
-.leaflet-editbar a {
+.leaflet-drawbar {
-    font-size: 14px;
+    display:none;
+}
+.leaflet-drawbar a, .leaflet-drawbar a:hover {
+    font-size: 13px;
+    width:auto;
+    padding:0 6px;
+}
+
+.leaflet-editbar a, .leaflet-editbar a:hover {
+    font-size: 13px;
+    width:auto;
+    min-width:50px;
+    text-align:left;
+    padding:0 6px;
+    display:none;
 }
 .leaflet-editbar a.current {
-    background-color:#FFFFDD;
+    display:block;
+    font-weight:bold;
 }
+.leaflet-editbar.usable:hover a {
+    width:80px;
+    display:block;
+}
+.leaflet-editbar:not(.usable) a.current, .leaflet-editbar:not(:hover) a.current, .leaflet-drawbar a {
+    border-radius:4px;
+    border:0;
+}
+.leaflet-editbar:not(.usable) a.current:hover {
+    background-color:#FFFFFF;
+    cursor:default;
+}
+
 .leaflet-levels a {
     font-size:16px;
     color:#333333;

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

@@ -0,0 +1,219 @@
+editor = {
+    feature_types: {
+        bounds: {
+            type: 'polygon',
+            color: '#FFFFFF',
+        },
+        building: {
+            type: 'polygon',
+            color: '#CCCCCC',
+        },
+        wall: {
+            type: 'polygon',
+            color: '#333333',
+        },
+        obstacle: {
+            type: 'polygon',
+            color: '#999999',
+        },
+        door: {
+            type: 'polygon',
+            color: '#FF00FF',
+        },
+        step: {
+            type: 'polyline',
+            color: '#FF0000',
+        },
+        elevator: {
+            type: 'polygon',
+            color: '#99CC00',
+        },
+    },
+
+    init: function() {
+        // Init Map
+        editor.map = L.map('mapeditor', {
+            zoom: 2,
+            maxZoom: 10,
+            minZoom: 1,
+            crs: L.CRS.Simple,
+            editable: true,
+            closePopupOnClick: false,
+        });
+
+        L.control.scale({imperial: false}).addTo(editor.map);
+
+        editor.get_packages();
+        editor.init_features();
+    },
+
+    init_features: function() {
+        editor._feature_type = null;
+        L.FeatureLayerControl = L.Control.extend({
+            options: {
+                position: 'topleft'
+            },
+            onAdd: function (map) {
+                var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-editbar usable');
+                $('<a href="#" class="current">').appendTo(container).html('').attr({
+                    href: '#',
+                    title: 'disable editing',
+                    name: 'null'
+                }).on('click', function() {
+                    editor.set_feature_type(null);
+                });
+                var plural;
+                for (var feature_type in editor.feature_types) {
+                    $('<a href="#">').appendTo(container).text(feature_type+((feature_type.substr(-1) != 's')?'s':'')).attr({
+                        href: '#',
+                        title: 'edit '+feature_type+' layer',
+                        name: feature_type
+                    }).on('click', editor._layer_button_click);
+                }
+                return container;
+            }
+        });
+        editor.map.addControl(new L.FeatureLayerControl());
+
+        // Add drawing new features
+        editor._drawing = null;
+        editor._adding = null;
+
+        L.DrawControl = L.Control.extend({
+            options: {
+                position: 'topleft'
+            },
+            onAdd: function (map) {
+                var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-drawbar');
+                $('<a href="#" id="drawstart">').appendTo(container).text('start drawing').attr({
+                    href: '#',
+                    title: 'start drawing',
+                    name: ''
+                }).on('click', function(e) {
+                    e.preventDefault();
+                    editor.start_drawing();
+                });
+
+                $('<a href="#" id="drawcancel">').appendTo(container).text('cancel').attr({
+                    href: '#',
+                    title: 'cancel drawing',
+                    name: ''
+                }).on('click', function(e) {
+                    e.preventDefault();
+                    editor.cancel_drawing();
+                });
+                return container;
+            }
+        });
+        editor.map.addControl(new L.DrawControl());
+        $('#drawcancel').hide();
+
+        editor.map.on('editable:drawing:commit', function (e) {
+            editor._drawing = null;
+            editor._adding = e.layer;
+
+            e.layer.disableEdit();
+            L.popup({
+                closeButton: false,
+                autoClose: false,
+            }).setContent('<img src="/static/img/loader.gif">').setLatLng(e.layer.getCenter()).openOn(editor.map);
+            console.log(e.layer.toGeoJSON());
+        }).on('editable:drawing:cancel', function (e) {
+            if (editor._drawing !== null && editor._adding === null) {
+                e.layer.remove();
+            }
+        });
+    },
+
+    _layer_button_click: function(e) {
+        e.preventDefault();
+        editor.set_feature_type($(this).attr('name'));
+    },
+
+    set_feature_type: function(feature_type) {
+        if (editor._drawing !== null || editor._adding !== null) return;
+
+        $('.leaflet-editbar .current').removeClass('current');
+        $('.leaflet-editbar [name='+feature_type+']').addClass('current');
+        editor._feature_type = feature_type;
+
+        $('.leaflet-drawbar').toggle(feature_type !== null);
+        $('#drawstart').text('add '+feature_type);
+    },
+    start_drawing: function() {
+        if (editor._feature_type === null) return;
+
+        editor._drawing = editor._feature_type;
+        var options = editor.feature_types[editor._drawing];
+        if (options.type == 'polygon') {
+            editor.map.editTools.startPolygon(null, options);
+        } else if (options.type == 'polyline') {
+            editor.map.editTools.startPolyline(null, options);
+        }
+        $('.leaflet-editbar').toggleClass('usable', false);
+        $('#drawstart').hide();
+        $('#drawcancel').show();
+    },
+    cancel_drawing: function() {
+        if (editor._drawing === null || editor._adding !== null) return;
+        editor.map.editTools.stopDrawing();
+        editor._drawing = null;
+        $('.leaflet-editbar').toggleClass('usable', true);
+        $('#drawcancel').hide();
+        $('#drawstart').show();
+    },
+
+    get_packages: function() {
+        $.getJSON('/api/v1/packages/', function(packages) {
+            var bounds = [[0, 0], [0, 0]];
+            var pkg;
+            for(var i=0;i<packages.length;i++) {
+                pkg = packages[i];
+                if (pkg.bounds === null) continue;
+                bounds = [[Math.min(bounds[0][0], pkg.bounds[0][0]), Math.min(bounds[0][1], pkg.bounds[0][1])],
+                          [Math.max(bounds[1][0], pkg.bounds[1][0]), Math.max(bounds[1][1], pkg.bounds[1][1])]];
+            }
+            editor.map.setMaxBounds(bounds);
+            editor.map.fitBounds(bounds, {padding: [30, 50]});
+
+            editor.get_sources();
+            editor.get_levels();
+        });
+    },
+    get_sources: function() {
+        $.getJSON('/api/v1/sources/', function(sources) {
+            var layers = {};
+            var source;
+            for(var i=0;i<sources.length;i++) {
+                source = sources[i];
+                layers[source.name] = L.imageOverlay('/api/v1/sources/'+source.name+'/image/', source.bounds);
+            }
+            L.control.layers([], layers).addTo(editor.map);
+        });
+    },
+    get_levels: function() {
+        $.getJSON('/api/v1/levels/?ordering=-altitude', function(levels) {
+            L.LevelControl = L.Control.extend({
+                options: {
+                    position: 'bottomright'
+                },
+                onAdd: function (map) {
+                    var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-levels'), link;
+                    var level;
+                    for(var i=0;i<levels.length;i++) {
+                        level = levels[i];
+                        link = L.DomUtil.create('a', (i == levels.length-1) ? 'current' : '', container);
+                        link.innerHTML = level.name;
+                    }
+                    return container;
+                }
+            });
+            editor.map.addControl(new L.LevelControl());
+        });
+    },
+};
+
+
+if ($('#mapeditor').length) {
+    editor.init();
+}

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

@@ -1,155 +0,0 @@
-function add_edit_button(map, container, type, icon, callback) {
-    $('<a href="#">').appendTo(container).text(icon).attr({
-        href: '#',
-        title: 'add '+name,
-        name: type
-    }).on('click', function(e) {
-        e.preventDefault();
-
-        // If we are currently adding a feature, don't start drawing another.
-        if (currently_adding !== null) {
-            return;
-        }
-
-        // If we are currently drawing a feature, don't start drawing another.
-        if (currently_drawing !== null) {
-            // If it is a feature of the same type, cancel it.
-            if (currently_drawing === type) {
-                $('.leaflet-editbar .current').removeClass('current');
-                currently_drawing = null;
-                map.editTools.stopDrawing();
-            }
-            return;
-        }
-
-        currently_drawing = type;
-        console.log(type);
-        $('.leaflet-editbar .current').removeClass('current');
-        $('.leaflet-editbar [name='+type+']').addClass('current');
-        options = feature_types[type];
-        if (options.type == 'polygon') {
-            map.editTools.startPolygon(null, options);
-        } else if (options.type == 'polyline') {
-            map.editTools.startPolyline(null, options);
-        }
-    });
-}
-
-if ($('#mapeditor').length) {
-    // Init Map
-    var map = L.map('mapeditor', {
-        zoom: 2,
-        maxZoom: 10,
-        minZoom: 1,
-        crs: L.CRS.Simple,
-        editable: true,
-        closePopupOnClick: false,
-    });
-
-    $.getJSON('/api/v1/packages/', function(packages) {
-        var bounds = [[0, 0], [0, 0]];
-        var pkg;
-        for(var i=0;i<packages.length;i++) {
-            pkg = packages[i];
-            if (pkg.bounds === null) continue;
-            bounds = [[Math.min(bounds[0][0], pkg.bounds[0][0]), Math.min(bounds[0][1], pkg.bounds[0][1])],
-                      [Math.max(bounds[1][0], pkg.bounds[1][0]), Math.max(bounds[1][1], pkg.bounds[1][1])]];
-        }
-        map.setMaxBounds(bounds);
-        map.fitBounds(bounds, {padding: [30, 50]});
-
-        $.getJSON('/api/v1/sources/', function(sources) {
-            var layers = {};
-            var source;
-            for(var i=0;i<sources.length;i++) {
-                source = sources[i];
-                layers[source.name] = L.imageOverlay('/api/v1/sources/'+source.name+'/image/', source.bounds);
-            }
-            L.control.layers([], layers).addTo(map);
-        });
-
-        $.getJSON('/api/v1/levels/?ordering=-altitude', function(levels) {
-            L.LevelControl = L.Control.extend({
-                options: {
-                    position: 'bottomright'
-                },
-                onAdd: function (map) {
-                    var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-levels'), link;
-                    var level;
-                    for(var i=0;i<levels.length;i++) {
-                        level = levels[i];
-                        link = L.DomUtil.create('a', (i == levels.length-1) ? 'current' : '', container);
-                        link.innerHTML = level.name;
-                    }
-                    return container;
-                }
-            });
-            map.addControl(new L.LevelControl());
-        });
-    });
-
-    // Default styles:
-    feature_types = {
-        building: {
-            type: 'polygon',
-            color: '#000000',
-        },
-        room: {
-            type: 'polygon',
-            color: '#CCCCCC',
-        },
-        obstacle: {
-            type: 'polygon',
-            color: '#999999',
-        },
-        door: {
-            type: 'polygon',
-            color: '#FF00FF',
-        },
-        step: {
-            type: 'polyline',
-            color: '#FF0000',
-        },
-        elevator: {
-            type: 'polygon',
-            color: '#99CC00',
-        },
-    };
-
-    // Add drawing new features
-    currently_drawing = null;
-    currently_adding = null;
-    L.DrawControl = L.Control.extend({
-        options: {
-            position: 'topleft'
-        },
-        onAdd: function (map) {
-            var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-editbar');
-            add_edit_button(map, container, 'building', '🏠');
-            add_edit_button(map, container, 'room', '⬠');
-            add_edit_button(map, container, 'obstacle', '⬟');
-            add_edit_button(map, container, 'door', '🚪');
-            add_edit_button(map, container, 'step', '┌┘');
-            add_edit_button(map, container, 'elevator', '▴▾');
-            return container;
-        }
-    });
-    map.addControl(new L.DrawControl());
-    map.on('editable:drawing:commit', function (e) {
-        currently_drawing = null;
-        currently_adding = e.layer;
-        $('.leaflet-editbar .current').removeClass('current');
-        e.layer.disableEdit();
-        L.popup({
-            closeButton: false,
-            autoClose: false,
-        }).setContent('<img src="/static/img/loader.gif">').setLatLng(e.layer.getCenter()).openOn(map);
-        console.log(e.layer.toGeoJSON());
-    }).on('editable:drawing:cancel', function (e) {
-        if (currently_drawing === null && currently_adding === null) {
-            e.layer.remove();
-        }
-    });
-
-    L.control.scale({imperial: false}).addTo(map);
-}

src/c3nav/editor/templates/editor/base.html

@@ -51,7 +51,7 @@
     <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
     <script type="text/javascript" src="{% static 'leaflet/leaflet.js' %}"></script>
     <script type="text/javascript" src="{% static 'leaflet/leaflet.editable.js' %}"></script>
-    <script type="text/javascript" src="{% static 'editor/js/map.js' %}"></script>
+    <script type="text/javascript" src="{% static 'editor/js/editor.js' %}"></script>
     {% endcompress %}
   </body>
 </html>