From 528177a008d0b970e94baa607db62db7b6149c0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20MAGIS?= Date: Mon, 21 Sep 2015 17:40:19 +1100 Subject: [PATCH 01/10] Measurement mechanism update : - use of mechanism from Draw's widget of WAB 1.2 instead of mechanism from WAB 1.0 one - add support in code for use of esri.geometry.geometryEngine (client side) instead of geometry service (client side) - add in setting's UI for setting geometry service and activate (default) the geometryEngine --- Widget.js | 510 +++++++++++++++++++++++++++++------------- config.json | 4 +- manifest.json | 2 +- setting/Setting.html | 15 ++ setting/Setting.js | 10 +- setting/css/style.css | 4 + 6 files changed, 390 insertions(+), 155 deletions(-) diff --git a/Widget.js b/Widget.js index cbbfcc0..b1c9cd8 100644 --- a/Widget.js +++ b/Widget.js @@ -17,6 +17,8 @@ define([ 'dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', + 'esri/config', + 'dojo/Deferred', 'esri/graphic', 'esri/symbols/SimpleMarkerSymbol', 'esri/geometry/Polyline', @@ -29,7 +31,12 @@ define([ 'esri/units', "esri/toolbars/edit", 'esri/geometry/webMercatorUtils', + 'esri/tasks/GeometryService', + 'esri/tasks/AreasAndLengthsParameters', + 'esri/tasks/LengthsParameters', + 'jimu/SpatialReference/wkidUtils', 'esri/geometry/geodesicUtils', + 'esri/geometry/geometryEngine', 'dojo/_base/lang', 'dojo/on', 'dojo/_base/html', @@ -50,8 +57,8 @@ define([ 'esri/InfoTemplate', 'esri/layers/GraphicsLayer' ], - function (declare, _WidgetsInTemplateMixin, BaseWidget, Graphic, SimpleMarkerSymbol, Polyline, SimpleLineSymbol, Polygon, graphicsUtils, SimpleFillSymbol, - TextSymbol, Font, esriUnits, Edit, webMercatorUtils, geodesicUtils, lang, on, html, has, + function (declare, _WidgetsInTemplateMixin, BaseWidget, esriConfig, Deferred, Graphic, SimpleMarkerSymbol, Polyline, SimpleLineSymbol, Polygon, graphicsUtils, SimpleFillSymbol, + TextSymbol, Font, esriUnits, Edit, webMercatorUtils, GeometryService, AreasAndLengthsParameters, LengthsParameters, wkidUtils, geodesicUtils, geometryEngine, lang, on, html, has, Color, array, domConstruct, dom, Select, NumberSpinner, ViewStack, SymbolChooser, DrawBox, Message, jimuUtils, jimuSymbolUtils, localStore, InfoTemplate, GraphicsLayer) { @@ -60,6 +67,9 @@ define([ name : 'eDraw', baseClass : 'jimu-widget-edraw', + _gs : null, + _defaultGsUrl : '//tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer', + //////////////////////////////////////////// GENERAL METHODS ////////////////////////////////////////////////// /** * Set widget mode :add1 (type choice), add2 (symbology and attributes choice), edit, list, importExport @@ -223,18 +233,18 @@ define([ localStore.set(this._localStorageKey, this.drawingsGetJson()); }, - - getCheckedGraphics:function(returnAllIfNoneChecked){ + + getCheckedGraphics : function (returnAllIfNoneChecked) { var graphics = []; - for(var i=0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++) - if(this.drawBox.drawLayer.graphics[i].checked) + for (var i = 0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++) + if (this.drawBox.drawLayer.graphics[i].checked) graphics.push(this.drawBox.drawLayer.graphics[i]); - - if(returnAllIfNoneChecked && graphics.length==0) + + if (returnAllIfNoneChecked && graphics.length == 0) return this.drawBox.drawLayer.graphics; return graphics; }, - + zoomAll : function () { var graphics = this.getCheckedGraphics(true); var nb_graphics = graphics.length; @@ -251,15 +261,15 @@ define([ clear : function () { var graphics = this.getCheckedGraphics(false); var nb = graphics.length; - - if(nb==0){ + + if (nb == 0) { this.showMessage(this.nls.noSelection, 'error'); return false; } - + if (!this.config.confirmOnDelete || confirm(this.nls.clear)) { // this.drawBox.drawLayer.clear(); - for(var i = 0; i < nb; i++) + for (var i = 0; i < nb; i++) this.drawBox.drawLayer.remove(graphics[i]); this.setInfoWindow(false); this.setMode("list"); @@ -268,7 +278,7 @@ define([ drawingsGetJson : function (asString, onlyChecked) { var graphics = (onlyChecked) ? this.getCheckedGraphics(false) : this.drawBox.drawLayer.graphics; - + if (graphics.length < 1) return (asString) ? '' : false; @@ -321,9 +331,9 @@ define([ //Table this.drawsTableBody.innerHTML = ""; - + var name_max_len = (this.config.listShowUpAndDownButtons) ? 8 : 16; - + for (var i = nb_graphics - 1; i >= 0; i--) { var graphic = graphics[i]; var num = i + 1; @@ -346,38 +356,37 @@ define([ } var name = (graphic.attributes && graphic.attributes['name']) ? graphic.attributes['name'] : ''; name = (name.length > name_max_len) ? '' + name.substr(0, name_max_len) + "..." : name; - + var actions = ' ' - + ' '; + + ' '; var actions_class = "list-draw-actions light"; - if(this.config.listShowUpAndDownButtons){ + if (this.config.listShowUpAndDownButtons) { actions += ' ' - + ' '; + + ' '; actions_class = "list-draw-actions"; } actions += ' '; - + var checked = (graphic.checked) ? ' checked="checked"' : ''; - - var html = '' - + '' + name + '' - + '' + symbolHtml + '' - + '' + actions + ''; + + var html = '' + + '' + name + '' + + '' + symbolHtml + '' + + '' + actions + ''; var tr = domConstruct.create( "tr", { id : 'draw-tr--' + i, innerHTML : html, className : (selected) ? 'selected' : '', - draggable:"true" + draggable : "true" }, - this.drawsTableBody - ); + this.drawsTableBody); //Bind actions on(dom.byId('draw-action-edit--' + i), "click", this.listOnActionClick); on(dom.byId('draw-action-delete--' + i), "click", this.listOnActionClick); on(dom.byId('draw-action-zoom--' + i), "click", this.listOnActionClick); - if(this.config.listShowUpAndDownButtons){ + if (this.config.listShowUpAndDownButtons) { on(dom.byId('draw-action-up--' + i), "click", this.listOnActionClick); on(dom.byId('draw-action-down--' + i), "click", this.listOnActionClick); } @@ -387,39 +396,36 @@ define([ this.saveInLocalStorage(); this.listUpdateAllCheckbox(); }, - - _listOnDrop:function(evt){ + + _listOnDrop : function (evt) { evt.preventDefault(); var tr_id = evt.dataTransfer.getData("edraw-list-tr-id"); - + var target = (evt.target) ? evt.target : evt.originalTarget; var target_tr = this._UTIL__getParentByTag(target, "tr"); - + //If dropped on same tr, exit ! - if(!target_tr || target_tr.id == tr_id){ + if (!target_tr || target_tr.id == tr_id) { return false; } - - + //get positions from id var from_i = tr_id.split("--")[tr_id.split("--").length - 1]; var to_i = target_tr.id.split("--")[target_tr.id.split("--").length - 1]; - - // @TODO Know if drop in top (down target) or bottom (under target) of row - + //Switch the 2 rows this.moveDrawingGraphic(from_i, to_i); this.listGenerateDrawTable(); }, - - _listOnDragOver:function(evt){ + + _listOnDragOver : function (evt) { evt.preventDefault(); }, - - _listOnDragStart:function(evt){ + + _listOnDragStart : function (evt) { evt.dataTransfer.setData("edraw-list-tr-id", evt.target.id); }, - + switch2DrawingGraphics : function (i1, i2) { var g1 = this.drawBox.drawLayer.graphics[i1]; var g2 = this.drawBox.drawLayer.graphics[i2]; @@ -436,38 +442,37 @@ define([ this._redrawGraphics(start_i); return true; }, - - moveDrawingGraphic:function(from_i, to_i){ + + moveDrawingGraphic : function (from_i, to_i) { from_i = parseInt(from_i); to_i = parseInt(to_i); - - if(from_i == to_i) + + if (from_i == to_i) return; - + //get from graphic var from_graphic = this.drawBox.drawLayer.graphics[from_i]; - + //Move graphics up or down - if(from_i < to_i){ - for(var i=from_i, nb=this.drawBox.drawLayer.graphics.length; i < to_i && i < nb; i++) - this.drawBox.drawLayer.graphics[i] = this.drawBox.drawLayer.graphics[i+1]; - } - else{ - for(var i=from_i, nb=this.drawBox.drawLayer.graphics.length; i > to_i && i > 0; i--) - this.drawBox.drawLayer.graphics[i] = this.drawBox.drawLayer.graphics[i-1]; + if (from_i < to_i) { + for (var i = from_i, nb = this.drawBox.drawLayer.graphics.length; i < to_i && i < nb; i++) + this.drawBox.drawLayer.graphics[i] = this.drawBox.drawLayer.graphics[i + 1]; + } else { + for (var i = from_i, nb = this.drawBox.drawLayer.graphics.length; i > to_i && i > 0; i--) + this.drawBox.drawLayer.graphics[i] = this.drawBox.drawLayer.graphics[i - 1]; } - + //Copy from graphic in destination this.drawBox.drawLayer.graphics[to_i] = from_graphic; - + //Redraw in good order var start_i = (from_i < to_i) ? from_i : to_i; this._redrawGraphics(start_i); return true; }, - - _redrawGraphics:function(start_i){ - if(!start_i) + + _redrawGraphics : function (start_i) { + if (!start_i) start_i = 0; var nb = this.drawBox.drawLayer.graphics.length; for (var i = 0; i < nb; i++) { @@ -478,48 +483,46 @@ define([ shape.moveToFront(); } } - + }, - - listUpdateAllCheckbox:function(evt){ + + listUpdateAllCheckbox : function (evt) { //Not called by event ! - if(evt===undefined){ + if (evt === undefined) { var all_checked = true; var all_unchecked = true; - - for(var i=0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++){ - if(this.drawBox.drawLayer.graphics[i].checked) + + for (var i = 0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++) { + if (this.drawBox.drawLayer.graphics[i].checked) all_unchecked = false; else all_checked = false; } - - if(all_checked){ + + if (all_checked) { this.listCheckboxAll.checked = true; - this.listCheckboxAll.indeterminate = false; + this.listCheckboxAll.indeterminate = false; this.listCheckboxAll2.checked = true; - this.listCheckboxAll2.indeterminate = false; - } - else if(all_unchecked){ + this.listCheckboxAll2.indeterminate = false; + } else if (all_unchecked) { this.listCheckboxAll.checked = false; - this.listCheckboxAll.indeterminate = false; + this.listCheckboxAll.indeterminate = false; this.listCheckboxAll2.checked = false; - this.listCheckboxAll2.indeterminate = false; - } - else{ + this.listCheckboxAll2.indeterminate = false; + } else { this.listCheckboxAll.checked = true; - this.listCheckboxAll.indeterminate = true; + this.listCheckboxAll.indeterminate = true; this.listCheckboxAll2.checked = true; - this.listCheckboxAll2.indeterminate = true; + this.listCheckboxAll2.indeterminate = true; } return } - + //Event click on checkbox! var cb = evt.target; var check = evt.target.checked; - - for(var i=0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++){ + + for (var i = 0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++) { this.drawBox.drawLayer.graphics[i].checked = check; dom.byId('draw-action-checkclick--' + i).checked = check; } @@ -528,7 +531,7 @@ define([ this.listCheckboxAll2.checked = check; this.listCheckboxAll2.indeterminate = false; }, - + listOnActionClick : function (evt) { if (!evt.target || !evt.target.id) return; @@ -883,20 +886,20 @@ define([ exportInFile : function () { this.launchExport(this.exportButton, false); }, - + exportSelectionInFile : function () { this.launchExport(this.exportSelectionButton, true); }, - - launchExport:function(link, only_graphics_checked){ + + launchExport : function (link, only_graphics_checked) { // Be sure the link will not open if not asked : link.href = "#"; link.target = "_self"; - + var drawing_json = this.drawingsGetJson(true, only_graphics_checked); - + // Control if there are drawings - if (drawing_json=='') { + if (drawing_json == '') { this.showMessage(this.nls.importWarningNoExport0Draw, 'warning'); return false; } @@ -1048,11 +1051,11 @@ define([ } if (commontype === 'polyline') { if (this.showMeasure.checked) { - this._addLineMeasure(geometry); + this._addLineMeasure(geometry, graphic); } } else if (commontype === 'polygon') { if (this.showMeasure.checked) { - this._addPolygonMeasure(geometry); + this._addPolygonMeasure(geometry, graphic); } } else if (commontype == 'text' && this.editorSymbolChooser.inputText.value.trim() == "") { //Message @@ -1148,6 +1151,202 @@ define([ }, ////////////////////////////////////// Measure methods ////////////////////////////////////////////// + _getGeometryService : function () { + if (!this._gs || this._gs == null) { + if (this.config.geometryService) + this._gs = new GeometryService(this.config.geometryService); + else if (esriConfig.defaults.geometryService) + this._gs = esriConfig.defaults.geometryService; + else + this._gs = new GeometryService(this._defaultGsUrl); + } + + return this._gs; + }, + + _getLengthAndArea : function (geometry, isPolygon) { + var def = new Deferred(); + var defResult = { + length : null, + area : null + }; + var wkid = geometry.spatialReference.wkid; + var areaUnit = this.areaUnitSelect.value; + var esriAreaUnit = esriUnits[areaUnit]; + var lengthUnit = this.distanceUnitSelect.value; + var esriLengthUnit = esriUnits[lengthUnit]; + if (this.config.useGeometryEngine) { + defResult = this._getLengthAndAreaGeometryEngine(geometry, isPolygon, areaUnit, lengthUnit, wkid); + def.resolve(defResult); + } else if (wkidUtils.isWebMercator(wkid)) { + defResult = this._getLengthAndArea3857(geometry, isPolygon, esriAreaUnit, esriLengthUnit); + def.resolve(defResult); + } else if (wkid === 4326) { + defResult = this._getLengthAndArea4326(geometry, isPolygon, esriAreaUnit, esriLengthUnit); + def.resolve(defResult); + } else { + def = this._getLengthAndAreaByGS(geometry, isPolygon, esriAreaUnit, esriLengthUnit); + } + return def; + }, + + _getLengthAndAreaGeometryEngine : function (geometry, isPolygon, areaUnit, lengthUnit, wkid) { + areaUnit = areaUnit.toLowerCase().replace("_","-"); + lengthUnit = lengthUnit.toLowerCase().replace("_","-"); + + var result = { + area : null, + length : null + }; + + if (isPolygon) { + result.area = (wkid == 4326 || wkid == 3857) ? geometryEngine.geodesicArea(geometry, areaUnit) : geometryEngine.planarArea(geometry, areaUnit); + var polyline = this._getPolylineOfPolygon(geometry); + result.length = (wkid == 4326 || wkid == 3857) ? geometryEngine.geodesicLength(polyline, lengthUnit) : geometryEngine.planarLength(polyline, lengthUnit); + } else { + result.length = (wkid == 4326 || wkid == 3857) ? geometryEngine.geodesicLength(geometry, lengthUnit) : geometryEngine.planarLength(geometry, lengthUnit); + } + + return result; + }, + + _getLengthAndArea4326 : function (geometry, isPolygon, esriAreaUnit, esriLengthUnit) { + var result = { + area : null, + length : null + }; + + var lengths = null; + + if (isPolygon) { + var areas = geodesicUtils.geodesicAreas([geometry], esriAreaUnit); + var polyline = this._getPolylineOfPolygon(geometry); + lengths = geodesicUtils.geodesicLengths([polyline], esriLengthUnit); + result.area = areas[0]; + result.length = lengths[0]; + } else { + lengths = geodesicUtils.geodesicLengths([geometry], esriLengthUnit); + result.length = lengths[0]; + } + + return result; + }, + + _getLengthAndArea3857 : function (geometry3857, isPolygon, esriAreaUnit, esriLengthUnit) { + var geometry4326 = webMercatorUtils.webMercatorToGeographic(geometry3857); + var result = this._getLengthAndArea4326(geometry4326, + isPolygon, + esriAreaUnit, + esriLengthUnit); + return result; + }, + + _getLengthAndAreaByGS : function (geometry, isPolygon, esriAreaUnit, esriLengthUnit) { + this._getGeometryService(); + + var def = new Deferred(); + var defResult = { + area : null, + length : null + }; + var gsAreaUnit = this._getGeometryServiceUnitByEsriUnit(esriAreaUnit); + var gsLengthUnit = this._getGeometryServiceUnitByEsriUnit(esriLengthUnit); + if (isPolygon) { + var areasAndLengthParams = new AreasAndLengthsParameters(); + areasAndLengthParams.lengthUnit = gsLengthUnit; + areasAndLengthParams.areaUnit = gsAreaUnit; + this._gs.simplify([geometry]).then(lang.hitch(this, function (simplifiedGeometries) { + if (!this.domNode) { + return; + } + areasAndLengthParams.polygons = simplifiedGeometries; + this._gs.areasAndLengths(areasAndLengthParams).then(lang.hitch(this, function (result) { + if (!this.domNode) { + return; + } + defResult.area = result.areas[0]; + defResult.length = result.lengths[0]; + def.resolve(defResult); + }), lang.hitch(this, function (err) { + def.reject(err); + })); + }), lang.hitch(this, function (err) { + def.reject(err); + })); + } else { + var lengthParams = new LengthsParameters(); + lengthParams.polylines = [geometry]; + lengthParams.lengthUnit = gsLengthUnit; + lengthParams.geodesic = true; + this._gs.lengths(lengthParams).then(lang.hitch(this, function (result) { + if (!this.domNode) { + return; + } + defResult.length = result.lengths[0]; + def.resolve(defResult); + }), lang.hitch(this, function (err) { + console.error(err); + def.reject(err); + })); + } + + return def; + }, + + _getGeometryServiceUnitByEsriUnit : function (unit) { + var gsUnit = -1; + switch (unit) { + case esriUnits.KILOMETERS: + gsUnit = GeometryService.UNIT_KILOMETER; + break; + case esriUnits.MILES: + gsUnit = GeometryService.UNIT_STATUTE_MILE; + break; + case esriUnits.METERS: + gsUnit = GeometryService.UNIT_METER; + break; + case esriUnits.FEET: + gsUnit = GeometryService.UNIT_FOOT; + break; + case esriUnits.YARDS: + gsUnit = GeometryService.UNIT_INTERNATIONAL_YARD; + break; + case esriUnits.SQUARE_KILOMETERS: + gsUnit = GeometryService.UNIT_SQUARE_KILOMETERS; + break; + case esriUnits.SQUARE_MILES: + gsUnit = GeometryService.UNIT_SQUARE_MILES; + break; + case esriUnits.NAUTICAL_MILES: + gsUnit = GeometryService.UNIT_NAUTICAL_MILE; + break; + case esriUnits.ACRES: + gsUnit = GeometryService.UNIT_ACRES; + break; + case esriUnits.HECTARES: + gsUnit = GeometryService.UNIT_HECTARES; + break; + case esriUnits.SQUARE_METERS: + gsUnit = GeometryService.UNIT_SQUARE_METERS; + break; + case esriUnits.SQUARE_FEET: + gsUnit = GeometryService.UNIT_SQUARE_FEET; + break; + case esriUnits.SQUARE_YARDS: + gsUnit = GeometryService.UNIT_SQUARE_YARDS; + break; + } + return gsUnit; + }, + + _getPolylineOfPolygon : function (polygon) { + var polyline = new Polyline(polygon.spatialReference); + var points = polygon.rings[0]; + points = points.slice(0, points.length - 1); + polyline.addPath(points); + return polyline; + }, + _resetUnitsArrays : function () { this.defaultDistanceUnits = []; this.defaultAreaUnits = []; @@ -1203,61 +1402,68 @@ define([ html.setStyle(this.distanceMeasure, 'display', display); }, - _addLineMeasure : function (geometry) { - var a = Font.STYLE_ITALIC; - var b = Font.VARIANT_NORMAL; - var c = Font.WEIGHT_BOLD; - var symbolFont = new Font("16px", a, b, c, "Courier"); - var fontColor = new Color([0, 0, 0, 1]); - var ext = geometry.getExtent(); - var center = ext.getCenter(); - var geoLine = webMercatorUtils.webMercatorToGeographic(geometry); - var unit = this.distanceUnitSelect.value; - var lengths = geodesicUtils.geodesicLengths([geoLine], esriUnits[unit]); - var abbr = this._getDistanceUnitInfo(unit).label; - var localeLength = jimuUtils.localizeNumber(lengths[0].toFixed(1)); - var length = localeLength + " " + abbr; - var textSymbol = new TextSymbol(length, symbolFont, fontColor); - var labelGraphic = new Graphic(center, textSymbol, { - "name" : textSymbol.text, - "description" : "" - }, null); - this.drawBox.drawLayer.add(labelGraphic); - }, - - _addPolygonMeasure : function (geometry) { - var a = Font.STYLE_ITALIC; - var b = Font.VARIANT_NORMAL; - var c = Font.WEIGHT_BOLD; - var symbolFont = new Font("16px", a, b, c, "Courier"); - var fontColor = new Color([0, 0, 0, 1]); - var ext = geometry.getExtent(); - var center = ext.getCenter(); - var geoPolygon = webMercatorUtils.webMercatorToGeographic(geometry); - var areaUnit = this.areaUnitSelect.value; - var areaAbbr = this._getAreaUnitInfo(areaUnit).label; - var areas = geodesicUtils.geodesicAreas([geoPolygon], esriUnits[areaUnit]); - var localeArea = jimuUtils.localizeNumber(areas[0].toFixed(1)); - var area = localeArea + " " + areaAbbr; - - var polyline = new Polyline(geometry.spatialReference); - var points = geometry.rings[0]; - points = points.slice(0, points.length - 1); - polyline.addPath(points); - var geoPolyline = webMercatorUtils.webMercatorToGeographic(polyline); - var lengthUnit = this.distanceUnitSelect.value; - var lengthAbbr = this._getDistanceUnitInfo(lengthUnit).label; - var lengths = geodesicUtils.geodesicLengths([geoPolyline], esriUnits[lengthUnit]); - var localeLength = jimuUtils.localizeNumber(lengths[0].toFixed(1)); - var length = localeLength + " " + lengthAbbr; - var text = area + " " + length; + _addLineMeasure : function (geometry, graphic) { + this._getLengthAndArea(geometry, false).then(lang.hitch(this, function (result) { + if (!this.domNode) { + return; + } + var length = result.length; + var a = Font.STYLE_ITALIC; + var b = Font.VARIANT_NORMAL; + var c = Font.WEIGHT_BOLD; + var symbolFont = new Font("16px", a, b, c, "Courier"); + var fontColor = new Color([0, 0, 0, 1]); + var ext = geometry.getExtent(); + var center = ext.getCenter(); + + var unit = this.distanceUnitSelect.value; + var abbr = this._getDistanceUnitInfo(unit).label; + var localeLength = jimuUtils.localizeNumber(length.toFixed(1)); + var lengthText = localeLength + " " + abbr; + + var textSymbol = new TextSymbol(lengthText, symbolFont, fontColor); + var labelGraphic = new Graphic(center, textSymbol, { + "name" : textSymbol.text, + "description" : "" + }, null); + this.drawBox.drawLayer.add(labelGraphic); + })); + }, - var textSymbol = new TextSymbol(text, symbolFont, fontColor); - var labelGraphic = new Graphic(center, textSymbol, { - "name" : textSymbol.text, - "description" : "" - }, null); - this.drawBox.drawLayer.add(labelGraphic); + _addPolygonMeasure : function (geometry, graphic) { + this._getLengthAndArea(geometry, true).then(lang.hitch(this, function (result) { + if (!this.domNode) { + return; + } + var length = result.length; + var area = result.area; + + var a = Font.STYLE_ITALIC; + var b = Font.VARIANT_NORMAL; + var c = Font.WEIGHT_BOLD; + var symbolFont = new Font("16px", a, b, c, "Courier"); + var fontColor = new Color([0, 0, 0, 1]); + var ext = geometry.getExtent(); + var center = ext.getCenter(); + + var areaUnit = this.areaUnitSelect.value; + var areaAbbr = this._getAreaUnitInfo(areaUnit).label; + var localeArea = jimuUtils.localizeNumber(area.toFixed(1)); + var areaText = localeArea + " " + areaAbbr; + + var lengthUnit = this.distanceUnitSelect.value; + var lengthAbbr = this._getDistanceUnitInfo(lengthUnit).label; + var localeLength = jimuUtils.localizeNumber(length.toFixed(1)); + var lengthText = localeLength + " " + lengthAbbr; + + var text = areaText + " " + lengthText; + var textSymbol = new TextSymbol(text, symbolFont, fontColor); + var labelGraphic = new Graphic(center, textSymbol, { + "name" : textSymbol.text, + "description" : "" + }, null); + this.drawBox.drawLayer.add(labelGraphic); + })); }, //////// INIT METHODS //////////////////////////////////////////////////////////////////////////////////////////////////////// @@ -1413,12 +1619,12 @@ define([ this.allowPopup(true); }, - - _initListDragAndDrop:function(){ + + _initListDragAndDrop : function () { this._listOnDragOver = lang.hitch(this, this._listOnDragOver); this._listOnDragStart = lang.hitch(this, this._listOnDragStart); this._listOnDrop = lang.hitch(this, this._listOnDrop); - + //Bind actions on(this.drawsTableBody, "dragover", this._listOnDragOver); on(this.drawsTableBody, "drop", this._listOnDrop); @@ -1557,7 +1763,7 @@ define([ //Create edit dijit this._editorConfig["editToolbar"] = new Edit(this.map); - + //Init list Drag & Drop this._initListDragAndDrop(); }, diff --git a/config.json b/config.json index bc258fe..b3461a0 100644 --- a/config.json +++ b/config.json @@ -62,5 +62,7 @@ "unit" : "SQUARE_YARDS", "abbr" : "sq yd" } - ] + ], + "useGeometryEngine":true, + "geometryService":"//tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer" } diff --git a/manifest.json b/manifest.json index 4e274e9..5976bcd 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "eDraw", "platform": "HTML", - "version": "1.3.2", + "version": "1.3.3", "wabVersion": "1.3", "author" : "Esri R&D Center Beijing modified by MAGIS NC", "description": "Enhanced draw widget for WebApp Builder for Arcgis.", diff --git a/setting/Setting.html b/setting/Setting.html index ea9a8a9..7f302ac 100644 --- a/setting/Setting.html +++ b/setting/Setting.html @@ -64,5 +64,20 @@
+ +
\ No newline at end of file diff --git a/setting/Setting.js b/setting/Setting.js index b38fb6b..dd05c69 100644 --- a/setting/Setting.js +++ b/setting/Setting.js @@ -209,6 +209,10 @@ define([ //Text plus FontFamily this._setTextPlusFontFamilyTable(config); + + //Measure Geometry engine or service + this.useGeometryEngineInput.checked = (config.useGeometryEngine); + this.geometryServiceInput.value = (config.geometryService && config.geometryService.trim() != "") ? config.geometryService.trim() : ""; }, _setTextPlusFontFamilyTable : function (config) { @@ -285,7 +289,11 @@ define([ } })); config["drawPlus"]["fontFamilies"] = FontFamilyOptions; - + + //Measure Geometry engine or service + config.useGeometryEngine = this.useGeometryEngineInput.checked; + config.geometryService = (this.geometryServiceInput.value && this.geometryServiceInput.value.trim() != "") ? this.geometryServiceInput.value.trim() : false; + return config; }, diff --git a/setting/css/style.css b/setting/css/style.css index 16f606f..563b773 100644 --- a/setting/css/style.css +++ b/setting/css/style.css @@ -33,6 +33,7 @@ .jimu-widget-draw-setting .settings { list-style-type: none; display: table; + width: 98%; } .jimu-widget-draw-setting .settings li { display: table-row; @@ -47,4 +48,7 @@ width: 49%; text-align: left; padding-left: 10px; +} +.jimu-widget-draw-setting .settings .jimu-input{ + width:100%; } \ No newline at end of file From 43e83cca1e2a37ba0234a5d6ecb82414e02ff764 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20MAGIS?= Date: Fri, 25 Sep 2015 17:06:09 +1100 Subject: [PATCH 02/10] Modify preference order for area or length calculation (list bellow in order of preference) : - if wkid 4326 (WGS84), internal method (with esri/geometry/geodesicUtils) - if webMercator, internal method (with esri/geometry/webMercatorUtils to pass in 4326 and then esri/geometry/geodesicUtils) - if geometryEngine enabled, use geometryEngine methods - else, use geometryService (the one specified in config or if none, the esri.defaults' one e.g. the portal's on online's one) --- Widget.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Widget.js b/Widget.js index b1c9cd8..bdcb877 100644 --- a/Widget.js +++ b/Widget.js @@ -1175,14 +1175,15 @@ define([ var esriAreaUnit = esriUnits[areaUnit]; var lengthUnit = this.distanceUnitSelect.value; var esriLengthUnit = esriUnits[lengthUnit]; - if (this.config.useGeometryEngine) { - defResult = this._getLengthAndAreaGeometryEngine(geometry, isPolygon, areaUnit, lengthUnit, wkid); + + if (wkid === 4326) { + defResult = this._getLengthAndArea4326(geometry, isPolygon, esriAreaUnit, esriLengthUnit); def.resolve(defResult); - } else if (wkidUtils.isWebMercator(wkid)) { + }else if (wkidUtils.isWebMercator(wkid)) { defResult = this._getLengthAndArea3857(geometry, isPolygon, esriAreaUnit, esriLengthUnit); def.resolve(defResult); - } else if (wkid === 4326) { - defResult = this._getLengthAndArea4326(geometry, isPolygon, esriAreaUnit, esriLengthUnit); + } else if (this.config.useGeometryEngine) { + defResult = this._getLengthAndAreaGeometryEngine(geometry, isPolygon, areaUnit, lengthUnit, wkid); def.resolve(defResult); } else { def = this._getLengthAndAreaByGS(geometry, isPolygon, esriAreaUnit, esriLengthUnit); From 7af93111aca93005e78a57b11963422bfc578a13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Wed, 21 Oct 2015 23:47:23 +1100 Subject: [PATCH 03/10] Measure's refactoring --- Widget.html | 50 +++++++------- Widget.js | 155 +++++++++++++++++++++++++++++++++++++++---- config.json | 5 +- nls/fr/strings.js | 3 +- nls/strings.js | 5 +- setting/Setting.html | 22 +++++- setting/Setting.js | 8 ++- 7 files changed, 204 insertions(+), 44 deletions(-) diff --git a/Widget.html b/Widget.html index dfac445..848d15e 100644 --- a/Widget.html +++ b/Widget.html @@ -17,34 +17,22 @@

${nls.addDrawTitle}

- -
-
- - -
-
-
${nls.areaUnits}
- -
-
-
${nls.distanceUnits}
- -
-

${nls.addDrawTitle}

- -
- -
- -
- +
+ +
+ +
+ +
+ +
+
@@ -96,8 +84,22 @@

${nls.addDrawTitle}

- -
+
+
+
+ + +
+
+
${nls.areaUnits}
+ +
+
+
${nls.distanceUnits}
+ +
+
+

${nls.snappingMessage}.

diff --git a/Widget.js b/Widget.js index bdcb877..c8985aa 100644 --- a/Widget.js +++ b/Widget.js @@ -58,9 +58,8 @@ define([ 'esri/layers/GraphicsLayer' ], function (declare, _WidgetsInTemplateMixin, BaseWidget, esriConfig, Deferred, Graphic, SimpleMarkerSymbol, Polyline, SimpleLineSymbol, Polygon, graphicsUtils, SimpleFillSymbol, - TextSymbol, Font, esriUnits, Edit, webMercatorUtils, GeometryService, AreasAndLengthsParameters, LengthsParameters, wkidUtils, geodesicUtils, geometryEngine, lang, on, html, has, - Color, array, domConstruct, dom, Select, NumberSpinner, ViewStack, SymbolChooser, - DrawBox, Message, jimuUtils, jimuSymbolUtils, localStore, InfoTemplate, GraphicsLayer) { + TextSymbol, Font, esriUnits, Edit, webMercatorUtils, GeometryService, AreasAndLengthsParameters, LengthsParameters, wkidUtils, geodesicUtils, geometryEngine, lang, on, + html, has, Color, array, domConstruct, dom, Select, NumberSpinner, ViewStack, SymbolChooser, DrawBox, Message, jimuUtils, jimuSymbolUtils, localStore, InfoTemplate, GraphicsLayer) { /*jshint unused: false*/ return declare([BaseWidget, _WidgetsInTemplateMixin], { @@ -290,8 +289,35 @@ define([ "fields" : [] }; - for (var i in graphics) - content["features"].push(graphics[i].toJson()); + var features_with_measure = []; + var nb_graphics_ok = 0; + for (var i = 0; i < nb_graphics; i++) { + var g = graphics[i]; + if(g){ + var json = g.toJson(); + //If with measure + if (g.measure && g.measure.graphic) { + features_with_measure.push(nb_graphics_ok); + } + content["features"].push(json); + nb_graphics_ok++; + } + } + + //Replace references for measure's graphic by index + for (var k = 0, nb = features_with_measure.length; k < nb; k++) { + var i = features_with_measure[k]; + for (var l = 0, nb_g = graphics.length; l < nb_g; l++) { + if (graphics[l] == graphics[i].measure.graphic) { + content["features"][i]["measure"] = { + "areaUnit" : graphics[i].measure.areaUnit, + "lengthUnit" : graphics[i].measure.lengthUnit, + "graphic" : l + }; + break; + } + } + } if (asString) { content = JSON.stringify(content); @@ -599,6 +625,8 @@ define([ }, editorPrepareForAdd : function (symbol) { + this._editorConfig["graphicCurrent"] = false; + this.editorSymbolChooserConfigure(symbol); this.nameField.value = this.nls.nameFieldDefaultValue; @@ -622,9 +650,14 @@ define([ this.editorUpdateTextPlus(); this.editorActivateSnapping(true); + + //Prepare measure section + this.editorMeasureConfigure(false, commontype); }, editorPrepareForEdit : function (graphic) { + this._editorConfig["graphicCurrent"] = graphic; + this.nameField.value = graphic.attributes["name"]; this.descriptionField.value = graphic.attributes["description"]; @@ -641,6 +674,8 @@ define([ this.editorEnableMapPreview(false); this.editorActivateSnapping(true); + + this.editorMeasureConfigure(graphic, false); }, editorSymbolChooserConfigure : function (symbol) { @@ -649,6 +684,7 @@ define([ //Set this symbol in symbol chooser this.editorSymbolChooser.showBySymbol(symbol); + this._editorConfig['symboltype'] = this.editorSymbolChooser.type; var type = symbol.type; //Draw plus and specific comportment when text symbol. @@ -758,6 +794,63 @@ define([ } }, + editorMeasureConfigure : function (graphicIfUpdate, commonTypeIfAdd) { + this.measureSection.style.display = 'block'; + + //Manage if fields are shown or not + if (graphicIfUpdate && graphicIfUpdate.measureParent) { + this.fieldsDiv.style.display = 'none'; + this.isMeasureSpan.style.display = 'block'; + } else { + this.fieldsDiv.style.display = 'block'; + this.isMeasureSpan.style.display = 'none'; + } + + //add Mode + if (commonTypeIfAdd) { + //No measure supported for this types + if (commonTypeIfAdd == "text" || commonTypeIfAdd == "point") { + this.measureSection.style.display = 'none'; + return; + } + + this.distanceUnitSelect.set('value', this.configDistanceUnits[0]['unit']); + this.areaUnitSelect.set('value', this.configAreaUnits[0]['unit']); + + this.showMeasure.checked = (this.config.measureEnabledByDefault); + this._setMeasureVisibility(); + + return; + } + + //edit mode + if (!graphicIfUpdate) { + this.measureSection.style.display = 'none'; + return; + } + + var geom_type = graphicIfUpdate.geometry.type; + + //If no measure for this type of graphic + if (geom_type == "point") { + this.measureSection.style.display = 'none'; + return; + } + + var checked = (graphicIfUpdate.measure); + + var lengthUnit = (graphicIfUpdate.measure && graphicIfUpdate.measure.lengthUnit) ? graphicIfUpdate.measure.lengthUnit : this.configDistanceUnits[0]['unit']; + this.distanceUnitSelect.set('value', lengthUnit); + + if (geom_type == "polygon") { + var areaUnit = (graphicIfUpdate.measure && graphicIfUpdate.measure.areaUnit) ? graphicIfUpdate.measure.areaUnit : this.configAreaUnits[0]['unit']; + this.areaUnitSelect.set('value', areaUnit); + } + + this.showMeasure.checked = checked; + this._setMeasureVisibility(); + }, + editorSetDefaultSymbols : function () { var symbol = this.editorSymbolChooser.getSymbol(); switch (symbol.type.toLowerCase()) { @@ -865,11 +958,38 @@ define([ } if (symbol) { g.setSymbol(symbol); - this.drawBox.drawLayer.add(g); } } + + //If is with measure + if (json_feat.measure) { + g.measure = json_feat.measure; + measure_features_i.push(i); + } + graphics.push(g); + } + + //Treat measures + for (var k in measure_features_i) { + var i = measure_features_i[k]; //Indice to treat + var label_graphic = (graphics[i].measure && graphics[i].measure.graphic && graphics[graphics[i].measure.graphic]) + ? graphics[graphics[i].measure.graphic] : + false; + if (label_graphic) { + graphics[i].measure.graphic = label_graphic + label_graphic.measureParent = graphics[i]; + } else { + graphics[i].measure = false; + } + } + + //Add graphics + for (var i=0, nb = graphics.length; i < nb; i++){ + if(graphics[i]) + this.drawBox.drawLayer.add(graphics[i]); } + //Show list this.setMode("list"); } catch (e) { this.showMessage(this.nls.importErrorFileStructure, 'error'); @@ -943,6 +1063,14 @@ define([ this._editorConfig["graphicCurrent"].attributes["name"] = this.nameField.value; this._editorConfig["graphicCurrent"].attributes["description"] = this.descriptionField.value; + var geom = this._editorConfig["graphicCurrent"].geometry; + if (geom.type == "polyline" || geom.type == "polygon") { + if (geom.type == "polyline") + this._addLineMeasure(geom, this._editorConfig["graphicCurrent"]); + else + this._addPolygonMeasure(geom, this._editorConfig["graphicCurrent"]); + } + this.setMode("list"); }, editorOnClickEditCancelButon : function () { @@ -1043,6 +1171,7 @@ define([ geometry = polygon; graphic.setGeometry(polygon); + var layer = graphic.getLayer(); layer.remove(graphic); layer.add(graphic); @@ -1175,11 +1304,11 @@ define([ var esriAreaUnit = esriUnits[areaUnit]; var lengthUnit = this.distanceUnitSelect.value; var esriLengthUnit = esriUnits[lengthUnit]; - + if (wkid === 4326) { defResult = this._getLengthAndArea4326(geometry, isPolygon, esriAreaUnit, esriLengthUnit); def.resolve(defResult); - }else if (wkidUtils.isWebMercator(wkid)) { + } else if (wkidUtils.isWebMercator(wkid)) { defResult = this._getLengthAndArea3857(geometry, isPolygon, esriAreaUnit, esriLengthUnit); def.resolve(defResult); } else if (this.config.useGeometryEngine) { @@ -1192,9 +1321,9 @@ define([ }, _getLengthAndAreaGeometryEngine : function (geometry, isPolygon, areaUnit, lengthUnit, wkid) { - areaUnit = areaUnit.toLowerCase().replace("_","-"); - lengthUnit = lengthUnit.toLowerCase().replace("_","-"); - + areaUnit = areaUnit.toLowerCase().replace("_", "-"); + lengthUnit = lengthUnit.toLowerCase().replace("_", "-"); + var result = { area : null, length : null @@ -1207,7 +1336,7 @@ define([ } else { result.length = (wkid == 4326 || wkid == 3857) ? geometryEngine.geodesicLength(geometry, lengthUnit) : geometryEngine.planarLength(geometry, lengthUnit); } - + return result; }, @@ -1239,6 +1368,7 @@ define([ isPolygon, esriAreaUnit, esriLengthUnit); + return result; }, @@ -1290,7 +1420,6 @@ define([ def.reject(err); })); } - return def; }, diff --git a/config.json b/config.json index b3461a0..d9eb1d7 100644 --- a/config.json +++ b/config.json @@ -64,5 +64,8 @@ } ], "useGeometryEngine":true, - "geometryService":"//tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer" + "geometryService":"//tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer", + "measureEnabledByDefault" : false, + "measurePolygonLabel" : "{{area}} {{areaUnit}} {{length}} {{lengthUnit}}", + "measurePolylineLabel" : "{{length}} {{lengthUnit}}", } diff --git a/nls/fr/strings.js b/nls/fr/strings.js index 0d83672..55fdfb6 100644 --- a/nls/fr/strings.js +++ b/nls/fr/strings.js @@ -84,5 +84,6 @@ define( editMessage : 'NB : vous pouvez modifier/déplacer la géométrie sur la carte', snappingMessage : 'NB : l\'accrochage est possible (utiliser la touche CTRL)', hideOption : 'Cacher les dessins', - textPlacement : 'Placement' + textPlacement : 'Placement', + isMeasureMessage:'Cette étiquette est une mesure' })); diff --git a/nls/strings.js b/nls/strings.js index 85de0a9..3133753 100644 --- a/nls/strings.js +++ b/nls/strings.js @@ -81,10 +81,11 @@ define({ underlineTitle : 'Underline', underlineCharacter : 'U', addMessage : 'You can now make your drawing on map', - editMessage : 'NB : you can modify/moove geometry on map', + editMessage : 'NB : you can modify/move geometry on map', snappingMessage : 'NB : snapping is allowed (use CTRL)', hideOption : 'Hide drawings', - textPlacement : 'Placement' + textPlacement : 'Placement', + isMeasureMessage:'This label is a measure' }), "ar" : 1, "cs" : 1, diff --git a/setting/Setting.html b/setting/Setting.html index 7f302ac..8a19371 100644 --- a/setting/Setting.html +++ b/setting/Setting.html @@ -66,6 +66,12 @@
  • + + + + Use Geometry Engine ? (if yes, the Geometry Service will not be used !) +
    • +
  • @@ -73,9 +79,21 @@
  • - + + + Enable measure by default ? (when adding, the measure checkbox will be checked by default) +
    • +
  • + + + + Measure label for polyline +
    • +
  • + + - Use Geometry Engine ? + Measure label for polygon
diff --git a/setting/Setting.js b/setting/Setting.js index dd05c69..c76723a 100644 --- a/setting/Setting.js +++ b/setting/Setting.js @@ -211,8 +211,11 @@ define([ this._setTextPlusFontFamilyTable(config); //Measure Geometry engine or service + this.measureEnabledByDefaultInput.checked = (config.measureEnabledByDefault); this.useGeometryEngineInput.checked = (config.useGeometryEngine); this.geometryServiceInput.value = (config.geometryService && config.geometryService.trim() != "") ? config.geometryService.trim() : ""; + this.measurePolylineLabelInput.value = (config.measurePolylineLabel && config.measurePolylineLabel.trim() != "") ? config.measurePolylineLabel.trim() : "{{length}} {{lengthUnit}}"; + this.measurePolygonLabelInput.value = (config.measurePolygonLabel && config.measurePolygonLabel.trim() != "") ? config.measurePolygonLabel.trim() : "{{area}} {{areaUnit}} {{length}} {{lengthUnit}}"; }, _setTextPlusFontFamilyTable : function (config) { @@ -291,9 +294,12 @@ define([ config["drawPlus"]["fontFamilies"] = FontFamilyOptions; //Measure Geometry engine or service + config.measureEnabledByDefault = this.measureEnabledByDefaultInput.checked; config.useGeometryEngine = this.useGeometryEngineInput.checked; config.geometryService = (this.geometryServiceInput.value && this.geometryServiceInput.value.trim() != "") ? this.geometryServiceInput.value.trim() : false; - + config.measurePolylineLabel = (this.measurePolylineLabelInput.value && this.measurePolylineLabelInput.value.trim() != "") ? this.measurePolylineLabelInput.value : false; + config.measurePolygonLabel = (this.measurePolygonLabelInput.value && this.measurePolygonLabelInput.value.trim() != "") ? this.measurePolygonLabelInput.value : false; + return config; }, From 07fcdec2c3eb4cc9fe763f47ab803e176d7503be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Wed, 21 Oct 2015 23:50:47 +1100 Subject: [PATCH 04/10] New feature : icon for copy of checked graphics --- Widget.html | 1 + Widget.js | 20 ++++++++++++++++++++ css/images/copy.png | Bin 0 -> 366 bytes css/style.css | 3 +++ nls/fr/strings.js | 2 ++ nls/strings.js | 2 ++ 6 files changed, 28 insertions(+) create mode 100644 css/images/copy.png diff --git a/Widget.html b/Widget.html index 848d15e..251a9a4 100644 --- a/Widget.html +++ b/Widget.html @@ -138,6 +138,7 @@

${nls.listDrawTitle}

  +       diff --git a/Widget.js b/Widget.js index c8985aa..25f1ec0 100644 --- a/Widget.js +++ b/Widget.js @@ -256,7 +256,27 @@ define([ this.map.setExtent(ext, true); return true; }, + + copy:function(){ + var graphics = this.getCheckedGraphics(false); + var nb = graphics.length; + if (nb == 0) { + this.showMessage(this.nls.noSelection, 'error'); + return false; + } + + for(var i=0;i<>v^@kjropvbGx&7eVcmo`9JlA_*^p2}+QipCYl8 zZ?mn(wjSHB4TK?>5YbVVd-?!mTyf7S3bIqX4UA}^SM`*SivhUd3|MgxUO5a;0PIdj zjHmMh^A zaqM5Y<30gUG;KuuqWzR%g#Z8m literal 0 HcmV?d00001 diff --git a/css/style.css b/css/style.css index 769d102..2b6ece0 100644 --- a/css/style.css +++ b/css/style.css @@ -168,6 +168,9 @@ .jimu-widget-edraw .list-draw-actions span.edit { background-image: url("images/edit.png"); } +.jimu-widget-edraw .list-draw-actions span.copy { + background-image: url("images/copy.png"); +} .jimu-widget-edraw .list-draw-actions span.zoom { background-image: url("images/zoom.png"); } diff --git a/nls/fr/strings.js b/nls/fr/strings.js index 55fdfb6..9d490cb 100644 --- a/nls/fr/strings.js +++ b/nls/fr/strings.js @@ -65,6 +65,8 @@ define( downLabel : "Descendre ce dessin", zoomLabel : "Zoomer sur ce dessin", zoomAllLabel : "Zoomer sur les dessins sélectionnés", + copyLabel : "Copier les dessins sélectionnés", + copySuffix : " (copie)", deleteAllLabel : "Supprimer les dessins sélectionnés", exportLabel : "Exporter les dessins sélectionnés", noSelection : "Aucun dessin sélectionné", diff --git a/nls/strings.js b/nls/strings.js index 3133753..19a90e9 100644 --- a/nls/strings.js +++ b/nls/strings.js @@ -65,6 +65,8 @@ define({ downLabel : "Move this drawing down", zoomLabel : "Zoom on this drawing", zoomAllLabel : "Zoom on selected drawings", + copyLabel : "Copy selected drawings", + copySuffix : " (copy)", deleteAllLabel : "Delete selected drawings", exportLabel : "Export selected drawings", noSelection : "No drawings selected", From 1cc898daf528834b3291c4487cbf92afcf33d0f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Wed, 21 Oct 2015 23:53:17 +1100 Subject: [PATCH 05/10] Debug : SymbolChoose. Draw plus. alignment was'nt detected in some cases --- Widget.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/Widget.js b/Widget.js index 25f1ec0..f7e9397 100644 --- a/Widget.js +++ b/Widget.js @@ -724,8 +724,8 @@ define([ this._editorConfig["drawPlus"]["bold"] = (symbol.font.weight == esri.symbol.Font.WEIGHT_BOLD); this._editorConfig["drawPlus"]["italic"] = (symbol.font.style == esri.symbol.Font.STYLE_ITALIC); this._editorConfig["drawPlus"]["underline"] = (symbol.font.decoration == 'underline'); - this._editorConfig["drawPlus"]["placement"]["horizontal"] = symbol.horizontalAlignment; - this._editorConfig["drawPlus"]["placement"]["vertical"] = symbol.verticalAlignment; + this._editorConfig["drawPlus"]["placement"]["horizontal"] = (symbol.horizontalAlignment) ? symbol.horizontalAlignment : "center"; + this._editorConfig["drawPlus"]["placement"]["vertical"] = (symbol.verticalAlignment) ? symbol.verticalAlignment : "middle"; this.editorTextPlusFontFamilyNode.set("value", symbol.font.family); this.editorTextPlusAngleNode.set("value", symbol.angle); this._UTIL__enableClass(this.editorTextPlusBoldNode, 'selected', this._editorConfig["drawPlus"]["bold"]); @@ -733,7 +733,11 @@ define([ this._UTIL__enableClass(this.editorTextPlusUnderlineNode, 'selected', this._editorConfig["drawPlus"]["underline"]); for (var i in this._editorTextPlusPlacements) { var title_tab = this._editorTextPlusPlacements[i].title.split(" "); - var selected = (title_tab[0] == symbol.verticalAlignment && title_tab[1] == symbol.horizontalAlignment); + var selected = + ( + title_tab[0] == this._editorConfig["drawPlus"]["placement"]["vertical"] + && title_tab[1] == this._editorConfig["drawPlus"]["placement"]["horizontal"] + ); this._UTIL__enableClass(this._editorTextPlusPlacements[i], 'selected', selected); } } else { From bbc005e9c148fddee4c293d7e6eb176b011ca596 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Wed, 21 Oct 2015 23:57:13 +1100 Subject: [PATCH 06/10] Debug : export was removing spaces on HTML5 browsers (non IE) --- Widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Widget.js b/Widget.js index f7e9397..392d2c3 100644 --- a/Widget.js +++ b/Widget.js @@ -1072,7 +1072,7 @@ define([ } // Case HTML5 (Firefox > 25, Chrome > 30....) : use data link with download attribute - link.href = 'data:application/octet-stream;charset=utf-8,' + drawing_json; + link.href = 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(drawing_json); link.target = "_blank"; link.download = export_name; return true; From 99575bff06c8dcc82de0fd56c03a138ea958ae9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Wed, 21 Oct 2015 23:59:18 +1100 Subject: [PATCH 07/10] New Feature : default symbols could be specified in config --- Widget.js | 27 ++++++++++++++++++++------- config.json | 6 ++++++ 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/Widget.js b/Widget.js index 392d2c3..460685d 100644 --- a/Widget.js +++ b/Widget.js @@ -1148,19 +1148,32 @@ define([ if (!symbol) { switch (commontype) { case "point": - symbol = new SimpleMarkerSymbol(); + var options = + (this.config.defaultSymbols && this.config.defaultSymbols.SimpleMarkerSymbol) + ? this.config.defaultSymbols.SimpleMarkerSymbol + : null; + symbol = new SimpleMarkerSymbol(options); break; case "polyline": - symbol = new SimpleLineSymbol(); + var options = + (this.config.defaultSymbols && this.config.defaultSymbols.SimpleLineSymbol) + ? this.config.defaultSymbols.SimpleLineSymbol + : null; + symbol = new SimpleLineSymbol(options); break; case "polygon": - symbol = new SimpleFillSymbol(); + var options = + (this.config.defaultSymbols && this.config.defaultSymbols.SimpleFillSymbol) + ? this.config.defaultSymbols.SimpleFillSymbol + : null; + symbol = new SimpleFillSymbol(options); break; case "text": - symbol = new TextSymbol({ - "verticalAlignment" : "middle", - "horizontalAlignment" : "center" - }); + var options = + (this.config.defaultSymbols && this.config.defaultSymbols.TextSymbol) + ? this.config.defaultSymbols.TextSymbol + : {"verticalAlignment": "middle", "horizontalAlignment": "center"}; + symbol = new TextSymbol(options); break; } } diff --git a/config.json b/config.json index d9eb1d7..0b38156 100644 --- a/config.json +++ b/config.json @@ -68,4 +68,10 @@ "measureEnabledByDefault" : false, "measurePolygonLabel" : "{{area}} {{areaUnit}} {{length}} {{lengthUnit}}", "measurePolylineLabel" : "{{length}} {{lengthUnit}}", + "defaultSymbols":{ + "SimpleMarkerSymbol":{"color":[255,199,198,148],"size":15,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle","outline":{"color":[207,101,99,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"}}, + "SimpleLineSymbol": {"color":[207,101,99,255],"width":1.5,"type":"esriSLS","style":"esriSLSSolid"}, + "SimpleFillSymbol": {"color":[255,199,198,148],"outline":{"color":[207,101,99,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}, + "TextSymbol":false + } } From 6f06ccf54ea8034df6df8776b0e0dbfb525b0903 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Thu, 22 Oct 2015 00:13:19 +1100 Subject: [PATCH 08/10] Import refactoring : - remove import/export tab - add an import button on the list bottom-right corner. This button show a pop-up where you can set (input file) or drag&drop the file to import --- Widget.html | 33 ++-------- Widget.js | 126 +++++++++++++++++++++++++------------- config.json | 1 - css/style.css | 36 +++++++++++ nls/fr/strings.js | 2 + nls/strings.js | 2 + setting/Setting.html | 6 -- setting/Setting.js | 2 - setting/nls/fr/strings.js | 1 - setting/nls/strings.js | 1 - 10 files changed, 129 insertions(+), 81 deletions(-) diff --git a/Widget.html b/Widget.html index 251a9a4..235f1a7 100644 --- a/Widget.html +++ b/Widget.html @@ -3,7 +3,6 @@ -
${nls.hideOption} @@ -132,42 +131,20 @@

${nls.listDrawTitle}

-
-
+
+
  -   +   +   -  
+  
- -
-

${nls.importExportTitle}

- - - - - - - -
-

${nls.exportTitle}

-
- -
-
-

${nls.importTitle}

-
- - -
-
-
\ No newline at end of file diff --git a/Widget.js b/Widget.js index 460685d..161f271 100644 --- a/Widget.js +++ b/Widget.js @@ -71,13 +71,12 @@ define([ //////////////////////////////////////////// GENERAL METHODS ////////////////////////////////////////////////// /** - * Set widget mode :add1 (type choice), add2 (symbology and attributes choice), edit, list, importExport + * Set widget mode :add1 (type choice), add2 (symbology and attributes choice), edit, list * @param name string Mode * - add1 : Add drawing (type choice and measure option) * - add2 : Add drawing (attributes and symbol chooser) * - edit : Edit drawing (geometry, attributes and symbol chooser) * - list : List drawings - * - importExport : */ setMode : function (name) { this.editorEnableMapPreview(false); @@ -142,18 +141,6 @@ define([ this.TabViewStack.switchView(this.listSection); - break; - case 'importExport': - this.setMenuState('importExport'); - this.allowPopup(true); - - //Other params - this._editorConfig["graphicCurrent"] = false; - - this.TabViewStack.switchView(this.importExportSection); - - this.setInfoWindow(false); - break; } }, @@ -179,13 +166,13 @@ define([ setMenuState : function (active, elements_shown) { if (!elements_shown) { - elements_shown = ['add', 'list', 'importExport']; + elements_shown = ['add', 'list']; } else if (elements_shown.indexOf(active) < 0) elements_shown.push(active); for (var button_name in this._menuButtons) { var menu_class = (button_name == active) ? 'menu-item-active' : 'menu-item'; - if (elements_shown.indexOf(button_name) < 0 || (button_name == "importExport" && !this.config.allowImportExport)) + if (elements_shown.indexOf(button_name) < 0) menu_class = "hidden"; if (this._menuButtons[button_name]) this._menuButtons[button_name].className = menu_class; @@ -229,7 +216,6 @@ define([ saveInLocalStorage : function () { if (!this.config.allowLocalStorage) return; - localStore.set(this._localStorageKey, this.drawingsGetJson()); }, @@ -352,9 +338,6 @@ define([ menuOnClickList : function () { this.setMode("list"); }, - menuOnClickImportExport : function () { - this.setMode("importExport"); - }, onHideCheckboxClick : function () { var display = (this.hideCheckbox.checked) ? 'none' : 'block'; @@ -903,21 +886,75 @@ define([ }, ///////////////////////// IMPORT/EXPORT METHODS /////////////////////////////////////////////////////////// - importFile : function () { + importMessage:false, + importInput:false, + launchImportFile:function(){ if (!window.FileReader) { this.showMessage(this.nls.importErrorMessageNavigator, 'error'); return false; } - - var input = this.importFileInput.files[0]; - - if (!input) { + + // var dragAndDropSupport = () + + var content = '
' + + '' + + '
'+this.nls.importDragAndDropMessage+'
' + + '
'; + this.importMessage = new Message({ + message : content, + titleLabel:this.nls.importTitle, + buttons:[{ + label:this.nls.importCloseButton + }] + }); + this.importInput = dojo.byId(this.id+'___input_file_import'); + + //Init file's choice up watching + on(this.importInput, "change", this.importFile); + + //Init drag & drop + var div_message = dojo.byId(this.id+'___div_import_message'); + on(div_message, "dragover", function(e){ + e.stopPropagation(); + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + console.log("over !"); + }); + on(div_message, "drop", lang.hitch(this, function(e){ + e.stopPropagation(); + e.preventDefault(); + var files = e.dataTransfer.files; + + if(!files[0]) + return; + var reader = new FileReader(); + reader.onload = this.importOnFileLoad; + var txt = reader.readAsText(files[0]); + })); + }, + + importFile : function () { + if(!this.importInput){ + this.showMessage(this.nls.importErrorWarningSelectFile, 'warning'); + if(this.importMessage) + this.importMessage.close(); + return false; + } + + var input_file = this.importInput.files[0]; + if (!input_file) { this.showMessage(this.nls.importErrorWarningSelectFile, 'warning'); return false; } var reader = new FileReader(); reader.onload = this.importOnFileLoad; - var txt = reader.readAsText(input); + var txt = reader.readAsText(input_file); + }, + + importOnFileLoad : function (evt) { + var content = evt.target.result; + this.importJsonContent(content); + this.importMessage.close(); }, importJsonContent : function (json, nameField, descriptionField) { @@ -948,7 +985,21 @@ define([ } } } + if (!descriptionField) { + var g = json.features[0]; + var fields_possible = ["description", "descript", "desc","comment","comm"]; + if (g.attributes) { + for (var i in fields_possible) { + if (g.attributes[fields_possible[i]]) { + descriptionField = fields_possible[i]; + break; + } + } + } + } + var measure_features_i = []; + var graphics = []; for (var i in json.features) { var json_feat = json.features[i]; @@ -965,9 +1016,7 @@ define([ g.attributes["name"] = g.symbol.text; g.attributes["description"] = (!descriptionField || !g.attributes[descriptionField]) ? '' : g.attributes[descriptionField]; - if (g.symbol) { - this.drawBox.drawLayer.add(g); - } else { + if (!g.symbol) { var symbol = false; switch (g.geometry.type) { case 'point': @@ -1021,12 +1070,6 @@ define([ } }, - importOnFileLoad : function (evt) { - var content = evt.target.result; - this.importJsonContent(content); - this.importFileInput.files[0] = ""; - }, - exportInFile : function () { this.launchExport(this.exportButton, false); }, @@ -1642,7 +1685,7 @@ define([ //Bind symbol chooser change this.own(on(this.editorSymbolChooser, 'change', lang.hitch(this, function () { this.editorSetDefaultSymbols(); - + //If text plus if (this.editorSymbolChooser.type == "text") { this.editorUpdateTextPlus(); @@ -1663,7 +1706,12 @@ define([ //hitch list event this.listOnActionClick = lang.hitch(this, this.listOnActionClick); //hitch import file loading + this.importFile = lang.hitch(this, this.importFile); this.importOnFileLoad = lang.hitch(this, this.importOnFileLoad); + + //Bind delete method + this._removeGraphics = lang.hitch(this, this._removeGraphics); + this._removeClickedGraphic = lang.hitch(this, this._removeClickedGraphic); //Bind draw plus event this.editorUpdateTextPlus = lang.hitch(this, this.editorUpdateTextPlus); @@ -1732,12 +1780,6 @@ define([ var views = [this.addSection, this.editorSection, this.listSection]; - if (this.config.allowImportExport) { - views.push(this.importExportSection); - } else { - this.menuListImportExport.style.display = 'none'; - } - this.TabViewStack = new ViewStack({ viewType : 'dom', views : views diff --git a/config.json b/config.json index 0b38156..b94c3e1 100644 --- a/config.json +++ b/config.json @@ -1,7 +1,6 @@ { "exportFileName" : "myDrawing.json", "confirmOnDelete" : true, - "allowImportExport" : true, "allowLocalStorage" : true, "localStorageKey" : false, "drawPlus" : { diff --git a/css/style.css b/css/style.css index 2b6ece0..8f10b9a 100644 --- a/css/style.css +++ b/css/style.css @@ -240,6 +240,25 @@ height: 50px; width: 100%; } +.jimu-widget-edraw .import-button{ + border-radius: 5px; + color: #FFF; + display: block; + float: right; + font-size: 1.5em; + font-weight: bold; + height: 30px; + min-height: 30px; + text-align: center; + vertical-align: middle; + width: 30px; + background-image: url("images/upload.png"); + margin-top: 4px; +} +.jimu-widget-edraw .import-button:hover{ + cursor:pointer; + border:0.5px solid black; +} .jimu-widget-edraw .draw-import .file { background-color: rgba(255, 255, 255, 0.5); border-radius: 5px; @@ -439,4 +458,21 @@ left: 5px; text-align: right; padding-top: 10px; +} +.eDraw-import-message{ + height:100%; + width:100%; + min-height:150px; + border-radius:10px; + padding:10px; + border:1px solid black; +} +.eDraw-import-message .eDraw-import-draganddrop-message{ + display:none; +} +.eDraw-import-message:hover{ + background-color:#E2E2E2; +} +.eDraw-import-message:hover .eDraw-import-draganddrop-message{ + display:block; } \ No newline at end of file diff --git a/nls/fr/strings.js b/nls/fr/strings.js index 9d490cb..8fabe1b 100644 --- a/nls/fr/strings.js +++ b/nls/fr/strings.js @@ -51,9 +51,11 @@ define( importTitle : "Importer des dessins", importErrorMessageNavigator : "Votre navigateur ne supporte pas cette fonctionnalité.", importErrorWarningSelectFile : "Merci de sélectionner un fichier.", + importDragAndDropMessage : "Sélectionnez un fichier ou glissez/déplacez en un dans cette zone.", importWarningNoDrawings : "Pas de dessins à charger", importErrorFileStructure : "Impossible d'importer les dessins, la structure du fichier n'est pas bonne.", importWarningNoExport0Draw : "Pas d'export (aucun dessin à exporter).", + importCloseButton:"Fermer", nameField : "Nom", symbolField : "Symbol", nameFieldDefaultValue : "Mon dessin", diff --git a/nls/strings.js b/nls/strings.js index 19a90e9..b18c6de 100644 --- a/nls/strings.js +++ b/nls/strings.js @@ -51,9 +51,11 @@ define({ importTitle : "Import draws", importErrorMessageNavigator : "Your navigator doesn't support this functionnality.", importErrorWarningSelectFile : "Please select a file.", + importDragAndDropMessage : "Select a file in input or drag and drop a file in this area.", importWarningNoDrawings : "No drawings to load", importErrorFileStructure : "The file structure doesn't match.", importWarningNoExport0Draw : "No export of the file (No drawing to export).", + importCloseButton:"Close", nameField : "Name", symbolField : "Symbol", nameFieldDefaultValue : "My drawing", diff --git a/setting/Setting.html b/setting/Setting.html index 8a19371..739e27b 100644 --- a/setting/Setting.html +++ b/setting/Setting.html @@ -12,12 +12,6 @@ ${nls.confirmOnDeleteLabel} -
  • - - - - ${nls.allowImportExportLabel} -
  • diff --git a/setting/Setting.js b/setting/Setting.js index c76723a..dd9c511 100644 --- a/setting/Setting.js +++ b/setting/Setting.js @@ -202,7 +202,6 @@ define([ this.exportFileNameInput.value = (config.exportFileName) ? config.exportFileName : this.nls.exportFileName; this.confirmOnDeleteInput.checked = (config.confirmOnDelete) ? true : false; - this.allowImportExportInput.checked = (config.allowImportExport) ? true : false; this.listShowUpAndDownButtons.checked = (config.listShowUpAndDownButtons) ? true : false; this.allowLocalStorageInput.checked = (config.allowLocalStorage) ? true : false; this.localStorageKeyInput.value = (config.localStorageKey) ? config.localStorageKey : ''; @@ -276,7 +275,6 @@ define([ config.exportFileName = (this.exportFileNameInput.value.trim() != "") ? this.exportFileNameInput.value.trim() : this.nls.exportFileName; config.confirmOnDelete = this.confirmOnDeleteInput.checked; - config.allowImportExport = this.allowImportExportInput.checked; config.listShowUpAndDownButtons = this.listShowUpAndDownButtons.checked; config.allowLocalStorage = this.allowLocalStorageInput.checked; var key = this.localStorageKeyInput.value.trim(); diff --git a/setting/nls/fr/strings.js b/setting/nls/fr/strings.js index 4843984..2a51c1e 100644 --- a/setting/nls/fr/strings.js +++ b/setting/nls/fr/strings.js @@ -27,7 +27,6 @@ define( distance: "Distances", area: "Surfaces", confirmOnDeleteLabel: "Demander confirmation à l'utilisateur avant une suppression", - allowImportExportLabel: "Activer l'import et l'export", listShowUpAndDownButtons : "Montrer les bouttons haut/bas dans la liste ?", allowLocalStorageLabel: "Utiliser local storage", localStorageKeyLabel: "Clé Local storage", diff --git a/setting/nls/strings.js b/setting/nls/strings.js index fbc8f7a..246ab46 100644 --- a/setting/nls/strings.js +++ b/setting/nls/strings.js @@ -26,7 +26,6 @@ define({ distance : "Distances", area : "Areas", confirmOnDeleteLabel : "Ask for confirmation before deleting ?", - allowImportExportLabel : "Allow import & export ?", listShowUpAndDownButtons : "Show up & down buttons in list?", allowLocalStorageLabel : "Use local storage ?", localStorageKeyLabel : "Local storage key", From 51f32471a93b44d93a1a3ec481887a2968cdf3a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Thu, 22 Oct 2015 00:15:20 +1100 Subject: [PATCH 09/10] Replace standard JavaScript Confirm with WAB dijit/Message on delete --- Widget.js | 96 +++++++++++++++++++++++++++++++++++++++++------ nls/fr/strings.js | 5 ++- nls/strings.js | 6 ++- 3 files changed, 93 insertions(+), 14 deletions(-) diff --git a/Widget.js b/Widget.js index 161f271..8613a69 100644 --- a/Widget.js +++ b/Widget.js @@ -271,20 +271,80 @@ define([ this.showMessage(this.nls.noSelection, 'error'); return false; } + + if(this.config.confirmOnDelete){ + this._confirmDeleteMessage = new Message({ + message : ' ' + this.nls.confirmDrawCheckedDelete, + buttons:[ + { + label:this.nls.yes, + onClick:this._removeGraphics + },{ + label:this.nls.no + } + ] + }); + } + else{ + this._removeGraphics(graphics); + } + }, + + _removeClickedGraphic:function(){ + if(!this._clickedGraphic) + return false; + + this._removeGraphic(this._clickedGraphic); + this._editorConfig["graphicCurrent"] = false; + this.listGenerateDrawTable(); + + this._clickedGraphic = false; + + if(this._confirmDeleteMessage && this._confirmDeleteMessage.close){ + this._confirmDeleteMessage.close(); + this._confirmDeleteMessage = false; + } + }, + + _removeGraphics:function(graphicsOrEvent){ + if(graphicsOrEvent.target) + graphics = this.getCheckedGraphics(false); + else + graphics = graphicsOrEvent; + + - if (!this.config.confirmOnDelete || confirm(this.nls.clear)) { - // this.drawBox.drawLayer.clear(); - for (var i = 0; i < nb; i++) - this.drawBox.drawLayer.remove(graphics[i]); - this.setInfoWindow(false); - this.setMode("list"); + var nb = graphics.length; + console.log(graphics); + for (var i = 0; i < nb; i++) { + this._removeGraphic(graphics[i]); + } + + if(this._confirmDeleteMessage && this._confirmDeleteMessage.close){ + this._confirmDeleteMessage.close(); + this._confirmDeleteMessage = false; } + + this.setInfoWindow(false); + this.setMode("list"); + }, + + _removeGraphic : function (graphic) { + if (graphic.measure && graphic.measure.graphic) { + // graphic.measure.graphic.measureParent = false; //Remove link between graphic and it's measure label + this.drawBox.drawLayer.remove(graphic.measure.graphic); //Delete measure label + } else if (graphic.measureParent) { + graphic.measureParent.measure = false; + } + this.drawBox.drawLayer.remove(graphic); }, drawingsGetJson : function (asString, onlyChecked) { var graphics = (onlyChecked) ? this.getCheckedGraphics(false) : this.drawBox.drawLayer.graphics; - - if (graphics.length < 1) + + var nb_graphics = graphics.length; + + if (nb_graphics < 1) return (asString) ? '' : false; var content = { @@ -582,10 +642,22 @@ define([ this.listGenerateDrawTable(); break; case 'draw-action-delete': - if (!this.config.confirmOnDelete || confirm(this.nls.confirmDrawDelete + ".")) { - g.getLayer().remove(g); - this._editorConfig["graphicCurrent"] = false; - this.listGenerateDrawTable(); + this._clickedGraphic = g; + if(this.config.confirmOnDelete){ + this._confirmDeleteMessage = new Message({ + message : ' ' + this.nls.confirmDrawDelete, + buttons:[ + { + label:this.nls.yes, + onClick:this._removeClickedGraphic + },{ + label:this.nls.no + } + ] + }); + } + else{ + this._removeClickedGraphic(); } break; case 'draw-action-edit': diff --git a/nls/fr/strings.js b/nls/fr/strings.js index 8fabe1b..4690401 100644 --- a/nls/fr/strings.js +++ b/nls/fr/strings.js @@ -1,6 +1,8 @@ define( ({ _widgetLabel : "Dessin", + yes:"Oui", + no:"Non", selectDrawMode : "Sélectionner le mode de dessin", clear : "Effacer", point : "Point", @@ -40,7 +42,8 @@ define( squareMeters : "Mètres carrés", squareFeet : "Pieds carrés", squareYards : "Yards carrés", - confirmDrawDelete : "Ce dessin va être supprimé", + confirmDrawDelete : "Supprimer ce dessin ?", + confirmDrawCheckedDelete : "Supprimer les dessins sélectionnés ?", all : "Tous", draws : 'dessins', addDrawTitle : 'Ajouter un dessin', diff --git a/nls/strings.js b/nls/strings.js index b18c6de..9cb0674 100644 --- a/nls/strings.js +++ b/nls/strings.js @@ -1,6 +1,9 @@ define({ root : ({ _widgetLabel : "Draw", + yes:"Yes", + yes:"Yes", + no:"No", selectDrawMode : "Select drawing mode", clear : "Clear", point : "Point", @@ -40,7 +43,8 @@ define({ squareMeters : "Square meters", squareFeet : "Square feet", squareYards : "Square yards", - confirmDrawDelete : "This drawing will be deleted", + confirmDrawDelete : "Delete this drawing ?", + confirmDrawCheckedDelete : "Delete checked drawing ?", all : "All", draws : 'drawings', addDrawTitle : 'Add a drawing', From 2fea3db3880be3bec5290fcec6692cfd191fba48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Cornet?= Date: Thu, 22 Oct 2015 00:17:06 +1100 Subject: [PATCH 10/10] Measure's refactoring complement commit --- Widget.js | 175 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 124 insertions(+), 51 deletions(-) diff --git a/Widget.js b/Widget.js index 8613a69..4472b7e 100644 --- a/Widget.js +++ b/Widget.js @@ -1679,9 +1679,126 @@ define([ }, _setMeasureVisibility : function () { - var display = (this.showMeasure.checked) ? 'block' : 'none'; - html.setStyle(this.areaMeasure, 'display', display); - html.setStyle(this.distanceMeasure, 'display', display); + var hideArea = (this._editorConfig["graphicCurrent"] && this._editorConfig["graphicCurrent"].geometry.type == "polyline") || (this._editorConfig['symboltype'] == 'line'); + + var display_line = (this.showMeasure.checked) ? 'block' : 'none'; + var display_area = (this.showMeasure.checked && !hideArea) ? 'block' : 'none'; + + html.setStyle(this.distanceMeasure, 'display', display_line); + html.setStyle(this.areaMeasure, 'display', display_area); + }, + + _getGraphicIndex : function (g) { + for (var i = 0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++) { + if (this.drawBox.drawLayer.graphics[i] == g) + return parseInt(i); + } + return false; + }, + + _setMeasureTextGraphic : function (graphic, result, existingMeasureGraphic) { + var length = result.length; + var area = result.area; + + var geometry = graphic.geometry; + + //If no measure + if (!this.showMeasure.checked) { + if (graphic.measure && graphic.measure && graphic.measure.graphic) { + this.drawBox.drawLayer.remove(graphic.measure.graphic) //Remove measure's label + } + graphic.measure = false; + return false; + } + + var polygonPattern = (this.config.measurePolygonLabel) ? this.config.measurePolygonLabel : "{{area}} {{areaUnit}} {{length}} {{lengthUnit}}"; + var polylinePattern = (this.config.measurePolylineLabel) ? this.config.measurePolylineLabel : "{{length}} {{lengthUnit}}"; + + //Prepare text + var localeLength = jimuUtils.localizeNumber(length.toFixed(1)); + var lengthUnit = this.distanceUnitSelect.value; + var localeLengthUnit = this._getDistanceUnitInfo(lengthUnit).label; + if (area) { + var areaUnit = this.areaUnitSelect.value; + var localeAreaUnit = this._getAreaUnitInfo(areaUnit).label; + var localeArea = jimuUtils.localizeNumber(area.toFixed(1)); + var text = polygonPattern + .replace("{{length}}", localeLength).replace("{{lengthUnit}}", localeLengthUnit) + .replace("{{area}}", localeArea).replace("{{areaUnit}}", localeAreaUnit); + }else{ + var text = polylinePattern + .replace("{{length}}", localeLength).replace("{{lengthUnit}}", localeLengthUnit); + } + + //Get label point + var point = this._getLabelPoint(geometry); + + //Prepare symbol + if (existingMeasureGraphic) { + var labelGraphic = existingMeasureGraphic; + labelGraphic.symbol.setText(text); + labelGraphic.attributes["name"] = text; + labelGraphic.geometry.update(point.x, point.y); + labelGraphic.draw(); + } else { + var a = Font.STYLE_ITALIC; + var b = Font.VARIANT_NORMAL; + var c = Font.WEIGHT_BOLD; + var symbolFont = new Font("16px", a, b, c, "Courier"); + var fontColor = new Color([0, 0, 0, 1]); + var textSymbol = new TextSymbol(text, symbolFont, fontColor); + + var labelGraphic = new Graphic(point, textSymbol, { + "name" : text, + "description" : "" + }, null); + this.drawBox.drawLayer.add(labelGraphic); + + //Replace measure label on top of measured graphic + var measure_index = this._getGraphicIndex(graphic); + var label_index = this.drawBox.drawLayer.graphics.length - 1; + if (label_index > (measure_index+1)) + this.moveDrawingGraphic(label_index, measure_index + 1); + } + + //Reference + labelGraphic.measureParent = graphic; + graphic.measure = { + "graphic" : labelGraphic, + "lengthUnit" : areaUnit, + "areaUnit" : areaUnit + }; + return labelGraphic; + }, + + _getLabelPoint : function (geometry) { + //Point + if (geometry.x) + return geometry; + + //Polygon + if (geometry.getCendroid) + return geometry.getCendroid(); + + //Polyline + if (geometry.getExtent) { + var extent_center = geometry.getExtent().getCenter(); + + //If geometryEngine, replace point (extent center) on geometry + if (this.config.useGeometryEngine) { + var res = geometryEngine.nearestCoordinate(geometry, extent_center); + if (res && res.coordinate) + return res.coordinate; + } + + return extent_center; + } + + //Extent + if (geometry.getCenter) + return geometry.getCenter(); + + return false; }, _addLineMeasure : function (geometry, graphic) { @@ -1689,26 +1806,8 @@ define([ if (!this.domNode) { return; } - var length = result.length; - var a = Font.STYLE_ITALIC; - var b = Font.VARIANT_NORMAL; - var c = Font.WEIGHT_BOLD; - var symbolFont = new Font("16px", a, b, c, "Courier"); - var fontColor = new Color([0, 0, 0, 1]); - var ext = geometry.getExtent(); - var center = ext.getCenter(); - - var unit = this.distanceUnitSelect.value; - var abbr = this._getDistanceUnitInfo(unit).label; - var localeLength = jimuUtils.localizeNumber(length.toFixed(1)); - var lengthText = localeLength + " " + abbr; - - var textSymbol = new TextSymbol(lengthText, symbolFont, fontColor); - var labelGraphic = new Graphic(center, textSymbol, { - "name" : textSymbol.text, - "description" : "" - }, null); - this.drawBox.drawLayer.add(labelGraphic); + var existingMeasureGraphic = (graphic.measure && graphic.measure.graphic && graphic.measure.graphic.measureParent) ? graphic.measure.graphic : false; + this._setMeasureTextGraphic(graphic, result, existingMeasureGraphic); })); }, @@ -1717,34 +1816,8 @@ define([ if (!this.domNode) { return; } - var length = result.length; - var area = result.area; - - var a = Font.STYLE_ITALIC; - var b = Font.VARIANT_NORMAL; - var c = Font.WEIGHT_BOLD; - var symbolFont = new Font("16px", a, b, c, "Courier"); - var fontColor = new Color([0, 0, 0, 1]); - var ext = geometry.getExtent(); - var center = ext.getCenter(); - - var areaUnit = this.areaUnitSelect.value; - var areaAbbr = this._getAreaUnitInfo(areaUnit).label; - var localeArea = jimuUtils.localizeNumber(area.toFixed(1)); - var areaText = localeArea + " " + areaAbbr; - - var lengthUnit = this.distanceUnitSelect.value; - var lengthAbbr = this._getDistanceUnitInfo(lengthUnit).label; - var localeLength = jimuUtils.localizeNumber(length.toFixed(1)); - var lengthText = localeLength + " " + lengthAbbr; - - var text = areaText + " " + lengthText; - var textSymbol = new TextSymbol(text, symbolFont, fontColor); - var labelGraphic = new Graphic(center, textSymbol, { - "name" : textSymbol.text, - "description" : "" - }, null); - this.drawBox.drawLayer.add(labelGraphic); + var existingMeasureGraphic = (graphic.measure && graphic.measure.graphic) ? graphic.measure.graphic : false; + this._setMeasureTextGraphic(graphic, result, existingMeasureGraphic) })); },