From 8b3d6619b0def3eaec09f16b14e92c9bd9b59772 Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Fri, 26 Feb 2016 00:30:51 +0100 Subject: Workon polygon edition widget. --- chimere/static/chimere/js/jquery.chimere.js | 94 ++++++++++++++++------ chimere/templates/chimere/blocks/polygon_edit.html | 46 +++++++++++ chimere/templatetags/unescape.py | 26 ++++++ chimere/widgets.py | 25 +++++- 4 files changed, 165 insertions(+), 26 deletions(-) create mode 100644 chimere/templates/chimere/blocks/polygon_edit.html diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index 9927f9b..a94670c 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -16,6 +16,8 @@ along with this program. If not, see . See the file COPYING for details. */ +var extra_url; + function transformExtent(extent) { return ol.proj.transformExtent( extent, EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION); @@ -99,7 +101,7 @@ function transform(obj) { itinerary_step_number:0, // current step number icon_offset: [0, 0], edition: false, // edition mode - edition_type_is_route: false, // route or POI edition + edition_type: 'marker', // marker, route or polygon edition //default_icon: new OpenLayers.Icon( // 'http://www.openlayers.org/dev/img/marker-green.png', // new OpenLayers.Size(21, 25), @@ -156,7 +158,7 @@ function transform(obj) { new OpenLayers.Pixel(0, -32)); } */ - if (defaults.map_layers == null || defaults.map_layers == []){ + if (defaults.map_layers == null || ! defaults.map_layers.length){ defaults.map_layers = [ new ol.layer.Tile({ style: 'Road', @@ -352,21 +354,23 @@ function transform(obj) { } ); settings.current_feature = feature; - if (feature) { - $(settings.popup_item).popover('destroy'); - var coords = feature.getGeometry().getCoordinates(); - settings.popup.setPosition(coords); - settings.popup.setOffset([feature.get('popup_offset_x'), - -feature.get('popup_offset_y')]); - $(settings.popup_item).popover({ - 'placement': 'top', - 'html': true, - 'content': feature.get('name') - }); - $(settings.popup_item).popover('show'); - methods.display_feature_detail(feature.get('pk')); - } else { - $(settings.popup_item).popover('destroy'); + if (!settings.edition){ + if (feature) { + $(settings.popup_item).popover('destroy'); + var coords = feature.getGeometry().getCoordinates(); + settings.popup.setPosition(coords); + settings.popup.setOffset([feature.get('popup_offset_x'), + -feature.get('popup_offset_y')]); + $(settings.popup_item).popover({ + 'placement': 'top', + 'html': true, + 'content': feature.get('name') + }); + $(settings.popup_item).popover('show'); + methods.display_feature_detail(feature.get('pk')); + } else { + $(settings.popup_item).popover('destroy'); + } } }); @@ -383,6 +387,39 @@ function transform(obj) { /* Vectors layer */ settings.layerVectors = new ol.layer.Vector(); settings.map.addLayer(settings.layerVectors); + if (settings.edition && (settings.edition_type == 'polygon' + || settings.edition_type == 'route')){ + settings.editionSource = new ol.source.Vector({wrapX: false}); + settings.editionVector = new ol.layer.Vector({ + source: settings.editionSource, + style: new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(180, 180, 180, 0.3)' + }), + stroke: new ol.style.Stroke({ + color: '#ffcc33', + width: 2 + }), + image: new ol.style.Circle({ + radius: 7, + fill: new ol.style.Fill({ + color: '#ffcc33' + }) + }) + }) + }); + + settings.map.addLayer(settings.editionVector); + + var edition_type; + if (settings.edition_type == 'route') edition_type = 'LineString'; + if (settings.edition_type == 'polygon') edition_type = 'Polygon'; + + settings.draw = new ol.interaction.Draw({ + source: settings.editionSource, + type: (edition_type), + }); + } // OL3-deprecated settings.layerVectors.setOpacity(0.8); /* OL3-deprecated-routing if (settings.edition_type_is_route){ @@ -532,10 +569,12 @@ function transform(obj) { // methods.activateContextMenu() } else { /// OL3-TODO - if (!settings.edition_type_is_route){ - methods.activateMarkerEdit(); - } else { + if (settings.edition_type == 'route'){ methods.activateRouteEdit(); + } else if (settings.edition_type == 'polygon'){ + methods.activatePolygonEdit(); + } else { + methods.activateMarkerEdit(); } } return; @@ -625,7 +664,13 @@ function transform(obj) { methods.displayMapMenu); }, + activatePolygonEdit: function(){ + // TODO OL3 + return; + }, activateRouteEdit: function(){ + // TODO OL3 + return; settings.edition_type_is_route = true; methods.cleanMarker(); settings.map.events.unregister('click', settings.map, @@ -783,9 +828,6 @@ function transform(obj) { }, error: function (data, textStatus, errorThrown) { settings.markers.clear(); - alert(data); - alert(textStatus); - alert(errorThrown); /// OL3-TODO //settings.layerVectors.removeAllFeatures(); //if (settings.enable_clustering){ @@ -989,6 +1031,12 @@ function transform(obj) { } } }, + activateDraw: function (){ + settings.map.addInteraction(settings.draw); + }, + deactivateDraw: function (){ + settings.map.removeInteraction(settings.draw); + }, /* * Put a marker on the map */ diff --git a/chimere/templates/chimere/blocks/polygon_edit.html b/chimere/templates/chimere/blocks/polygon_edit.html new file mode 100644 index 0000000..7c773b4 --- /dev/null +++ b/chimere/templates/chimere/blocks/polygon_edit.html @@ -0,0 +1,46 @@ +{% load unescape i18n %} + + + + + + + + diff --git a/chimere/templatetags/unescape.py b/chimere/templatetags/unescape.py index 59809a3..18bdf86 100644 --- a/chimere/templatetags/unescape.py +++ b/chimere/templatetags/unescape.py @@ -6,6 +6,7 @@ import HTMLParser register = template.Library() + def unescape(value): parser = HTMLParser.HTMLParser() return parser.unescape(value) @@ -13,3 +14,28 @@ def unescape(value): register.filter(unescape) +def raw(parser, token): + # Whatever is between {% raw %} and {% endraw %} will be preserved as + # raw, unrendered template code. + text = [] + parse_until = 'endraw' + tag_mapping = { + template.TOKEN_TEXT: ('', ''), + template.TOKEN_VAR: ('{{', '}}'), + template.TOKEN_BLOCK: ('{%', '%}'), + template.TOKEN_COMMENT: ('{#', '#}'), + } + # By the time this template tag is called, the template system has already + # lexed the template into tokens. Here, we loop over the tokens until + # {% endraw %} and parse them to TextNodes. We have to add the start and + # end bits (e.g. "{{" for variables) because those have already been + # stripped off in a previous part of the template-parsing process. + while parser.tokens: + token = parser.next_token() + if token.token_type == template.TOKEN_BLOCK and \ + token.contents == parse_until: + return template.TextNode(u''.join(text)) + start, end = tag_mapping[token.token_type] + text.append(u'%s%s%s' % (start, token.contents, end)) + parser.unclosed_block_tag(parse_until) +raw = register.tag(raw) diff --git a/chimere/widgets.py b/chimere/widgets.py index bffd42f..5795b77 100644 --- a/chimere/widgets.py +++ b/chimere/widgets.py @@ -614,8 +614,27 @@ class PolygonChooserWidget(forms.TextInput): ["%schimere/js/jquery.chimere.js" % settings.STATIC_URL] def render(self, name, value, attrs=None, area_name='', initialized=True): - # To be done - return super(PolygonChooserWidget, self).render(name, value, attrs) + val = '' + if value: + val = str(value) + map_layers, default_area = get_map_layers(area_name) + map_layers = [js for n, js, default in map_layers + if 'OpenLayers' not in js] + tpl = render_to_string( + 'chimere/blocks/polygon_edit.html', + {'name': name, 'val': val, 'initialized': initialized, + 'isvalue': bool(value), + 'default_area': "true" if default_area else "false"} + ) + # TODO: manage area + return mark_safe(tpl.format( + static_url=settings.STATIC_URL, + display_projection=settings.CHIMERE_EPSG_DISPLAY_PROJECTION, + projection=settings.CHIMERE_EPSG_PROJECTION, + center=list(settings.CHIMERE_DEFAULT_CENTER), + zoom=settings.CHIMERE_DEFAULT_ZOOM, + map_layers=", ".join(map_layers) + )) class PolygonField(models.PolygonField): @@ -623,7 +642,7 @@ class PolygonField(models.PolygonField): Set the widget for the form field ''' def formfield(self, **keys): - defaults = {'widget': RouteChooserWidget} + defaults = {'widget': PolygonChooserWidget} keys.update(defaults) return super(PolygonField, self).formfield(**keys) -- cgit v1.2.3