From fede2fa2dfdbb8c609c63f159e358b3081c0b03a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20MAGIS?= Date: Wed, 22 Jul 2015 16:04:19 +1100 Subject: [PATCH] Beautify files (indentation) --- README.md | 26 +- Widget.html | 320 ++-- Widget.js | 2883 ++++++++++++++++++------------------- config.json | 139 +- css/style.css | 262 ++-- manifest.json | 18 +- nls/fr/strings.js | 168 +-- nls/strings.js | 220 +-- setting/Setting.html | 125 +- setting/Setting.js | 998 ++++++------- setting/css/style.css | 82 +- setting/nls/fr/strings.js | 70 +- setting/nls/strings.js | 120 +- 13 files changed, 2729 insertions(+), 2702 deletions(-) diff --git a/README.md b/README.md index c407aaf..46d141b 100644 --- a/README.md +++ b/README.md @@ -10,18 +10,18 @@ http://doc.arcgis.com/en/web-appbuilder/create-apps/widget-draw.htm - on text drawing, no insert if no name. - on modification : enable geometry update (with snapping if wanted : CTRL) and preview symbology changes on the fly - list - - add list of all drawings - - actions on each drawing : modify / delete / up / down / zoom - - all drawings : zoom or delete - - on drawing infowindow -> select drawing in list - - on zoom on a drawing -> select drawing on map (and show infoWindow) + - add list of all drawings + - actions on each drawing : modify / delete / up / down / zoom + - all drawings : zoom or delete + - on drawing infowindow -> select drawing in list + - on zoom on a drawing -> select drawing on map (and show infoWindow) - import/export : allow users to export or import drawings (json format) - localStorage - - dynamic saving on each drawing add/delete/update - - on widget load : load drawings saved in local Storage + - dynamic saving on each drawing add/delete/update + - on widget load : load drawings saved in local Storage - draws plus (from Larry Stout https://geonet.esri.com/people/Larry_Stout) - - preview under mouse when adding text or point - - for text, add font choice, font angle, bold, italic, placement and underline options. + - preview under mouse when adding text or point + - for text, add font choice, font angle, bold, italic, placement and underline options. - checkbox to hide drawing's layer (and therefore widget UI) ## configuration : @@ -30,10 +30,10 @@ http://doc.arcgis.com/en/web-appbuilder/create-apps/widget-draw.htm - Confirm on delete. A confirm dialog when user delete drawing(s) ? - Enable import/export. Let the user import or export drawings ? - Enable local storage. enable auto-saving in local storage and loading saved drawings on widget load. - - Local storage key : let empty or set a name : - - if empty, all apps with eDraw widgets share the same local storage (apps on the same server) - - if not empty, all apps with the same key share the same local storage (apps on the same server) - + - Local storage key : let empty or set a name : + - if empty, all apps with eDraw widgets share the same local storage (apps on the same server) + - if not empty, all apps with the same key share the same local storage (apps on the same server) + ## Installation : Add eDraw folder in your webApp Builder client\stemapp\widgets folder. Download Release here : diff --git a/Widget.html b/Widget.html index 24c3d02..692f2e8 100644 --- a/Widget.html +++ b/Widget.html @@ -1,162 +1,166 @@
-
- - - - -
- - ${nls.hideOption} - +
+ + + + +
+ + ${nls.hideOption} + -
- -
-

${nls.addDrawTitle}

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

${nls.addDrawTitle}

-
- -
- -
- -
- -
-
- - - - - - - - - - - - - - - -
- ${nls.fontName} - -
- Arial - Helvetica - Times New Roman - Courier New -
-
-
${nls.boldCharacter}
-
${nls.italicCharacter}
-
${nls.underlineCharacter}
-
-
- ${nls.textAngle} - - - ${nls.drawSampleRotatedText} -
- ${nls.textPlacement} - -
- • - • - • - • - • - • - • - • - • -
-
- -
- - -

${nls.snappingMessage}.

-
-
-
- - - -
-
- -
-
-
- -
-

${nls.listDrawTitle}

-
- - - - - - - - - - -
${nls.nameField}${nls.symbolField}
-
-
-
-
- ${nls.all} : -   -   -
-
-
-
- -
-

${nls.importExportTitle}

- - - -
-

${nls.exportTitle}

-
- -
-
-

${nls.importTitle}

-
- - -
-
-
-
+
+

${nls.addDrawTitle}

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

${nls.addDrawTitle}

+
+ +
+ +
+ +
+ +
+
+ + + + + + + + + + + + + + + +
+ ${nls.fontName} + +
+ Arial + Helvetica + Times New Roman + Courier New +
+
+
${nls.boldCharacter}
+
${nls.italicCharacter}
+
${nls.underlineCharacter}
+
+
+ ${nls.textAngle} + + + ${nls.drawSampleRotatedText} +
+ ${nls.textPlacement} + +
+ • + • + • + • + • + • + • + • + • +
+
+ +
+ + +

${nls.snappingMessage}.

+
+
+
+ + + +
+
+ +
+
+
+ +
+

${nls.listDrawTitle}

+
+ + + + + + + + + + +
${nls.nameField}${nls.symbolField}
+
+
+
+
+ ${nls.all} : +   +   +
+
+
+
+ +
+

${nls.importExportTitle}

+ + + + + + + +
+

${nls.exportTitle}

+
+ +
+
+

${nls.importTitle}

+
+ + +
+
+
+
\ No newline at end of file diff --git a/Widget.js b/Widget.js index ba43849..ee2cdfc 100644 --- a/Widget.js +++ b/Widget.js @@ -13,1451 +13,1440 @@ // See the License for the specific language governing permissions and // limitations under the License. /////////////////////////////////////////////////////////////////////////// - define([ - 'dojo/_base/declare', - 'dijit/_WidgetsInTemplateMixin', - 'jimu/BaseWidget', - 'esri/graphic', - 'esri/symbols/SimpleMarkerSymbol', - 'esri/geometry/Polyline', - 'esri/symbols/SimpleLineSymbol', - 'esri/geometry/Polygon', - 'esri/graphicsUtils', - 'esri/symbols/SimpleFillSymbol', - 'esri/symbols/TextSymbol', - 'esri/symbols/Font', - 'esri/units', - "esri/toolbars/edit", - 'esri/geometry/webMercatorUtils', - 'esri/geometry/geodesicUtils', - 'dojo/_base/lang', - 'dojo/on', - 'dojo/_base/html', - 'dojo/sniff', - 'dojo/_base/Color', - 'dojo/_base/array', - 'dojo/dom-construct', - 'dojo/dom', - 'dijit/form/Select', - 'dijit/form/NumberSpinner', - 'jimu/dijit/ViewStack', - 'jimu/dijit/SymbolChooser', - 'jimu/dijit/DrawBox', - 'jimu/dijit/Message', - 'jimu/utils', - 'jimu/symbolUtils', - 'libs/storejs/store', - '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, - Color, array, domConstruct, dom, Select, NumberSpinner, ViewStack, SymbolChooser, - DrawBox, Message, jimuUtils, jimuSymbolUtils, localStore, InfoTemplate, GraphicsLayer) { - - /*jshint unused: false*/ - return declare([BaseWidget, _WidgetsInTemplateMixin], { - name : 'eDraw', - baseClass : 'jimu-widget-edraw', - - -//////////////////////////////////////////// GENERAL METHODS ////////////////////////////////////////////////// - /** - * Set widget mode :add1 (type choice), add2 (symbology and attributes choice), edit, list, importExport - * @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); - this.editorActivateGeometryEdit(false); - this.allowPopup(false); - - switch(name){ - case 'add1': - this.setMenuState('add'); - - this._editorConfig["graphicCurrent"] = false; - - - this.TabViewStack.switchView(this.addSection); - - this.drawBox.deactivate(); - - this.setInfoWindow(false); - this.allowPopup(false); - - break; - case 'add2': - this.setMenuState('add', ['add']); - - this._editorConfig["graphicCurrent"] = false; - - this.editorPrepareForAdd(this._editorConfig["defaultSymbols"][this._editorConfig['commontype']]); - - this.TabViewStack.switchView(this.editorSection); - - this.setInfoWindow(false); - - break; - case 'edit': - this.setMenuState('edit', ['edit']); - if (this._editorConfig["graphicCurrent"]) { - //prepare editor - this.editorPrepareForEdit(this._editorConfig["graphicCurrent"]); - - //Focus - var extent = graphicsUtils.graphicsExtent([this._editorConfig["graphicCurrent"]]); - this.map.setExtent(extent.expand(2), true); - } - - this.TabViewStack.switchView(this.editorSection); - - this.setInfoWindow(false); - - break; - case 'list': - this.setMenuState('list'); - this.allowPopup(true); - - //Generate list and - this.listGenerateDrawTable(); - var nb_draws = this.drawBox.drawLayer.graphics.length; - var display = (nb_draws > 0) ? 'block' : 'none'; - html.setStyle(this.allActionsNode, 'display', display); - this.tableTH.innerHTML = nb_draws + ' ' + this.nls.draws; - - //Other params - this._editorConfig["graphicCurrent"] = false; - - 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; - } - }, - - showMessage : function (msg, type) { - - var class_icon = "message-info-icon"; - switch (type) { - case "error": - class_icon = "message-error-icon"; - break; - case "warning": - class_icon = "message-warning-icon"; - break; - } - - var content = ' ' + msg; - - new Message({ - message : content - }); - }, - - setMenuState : function (active, elements_shown) { - if(!elements_shown){ - elements_shown = ['add', 'list', 'importExport']; - } - 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)) - menu_class = "hidden"; - if(this._menuButtons[button_name]) - this._menuButtons[button_name].className = menu_class; - } - }, - - setInfoWindow : function (graphic) { - if (!this.map.infoWindow) - return false; - - if (!graphic) { - this.map.infoWindow.hide(); - return true; - } - - if(graphic.geometry.x) - var center = graphic.geometry; - else if(graphic.geometry.getCenter) - var center = graphic.geometry.getCenter(); - else if( graphic.geometry.getExtent) - var center = graphic.geometry.getExtent().getCenter(); - else - return false; - - this.map.infoWindow.setFeatures([graphic]); - this.map.infoWindow.show(center); - - }, - - _clickHandler:false, - allowPopup:function(bool){ - this.map.setInfoWindowOnClick(bool); - - if(!bool && this._clickHandler){ - dojo.disconnect(this._clickHandler); - } - else{ - this._clickHandler = this.drawBox.drawLayer.on("click", this._onDrawClick); - } - }, - - saveInLocalStorage : function () { - if (!this.config.allowLocalStorage) - return; - - localStore.set(this._localStorageKey, this.drawingsGetJson()); - }, - - zoomAll : function () { - var graphics = this.drawBox.drawLayer.graphics; - var nb_graphics = graphics.length; - - if (nb_graphics < 1) - return; - - var ext = graphicsUtils.graphicsExtent(this.drawBox.drawLayer.graphics); - - this.map.setExtent(ext, true); - return true; - }, - - clear : function () { - if (!this.config.confirmOnDelete || confirm(this.nls.clear)) { - this.drawBox.drawLayer.clear(); - this.setInfoWindow(false); - this.setMode("list"); - } - }, - - drawingsGetJson : function (asString) { - if (this.drawBox.drawLayer.graphics.length < 1) - return (asString) ? '' : false; - - var content = { - "features" : [], - "displayFieldName" : "", - "fieldAliases" : {}, - "spatialReference" : this.map.spatialReference.toJson(), - "fields" : [] - }; - - for (var i in this.drawBox.drawLayer.graphics) - content["features"].push(this.drawBox.drawLayer.graphics[i].toJson()); - - if (asString) { - content = JSON.stringify(content); - } - return content; - }, - - -///////////////////////// MENU METHODS /////////////////////////////////////////////////////////// - menuOnClickAdd : function () { - this.setMode("add1"); - }, - menuOnClickList : function () { - this.setMode("list"); - }, - menuOnClickImportExport : function () { - this.setMode("importExport"); - }, - - onHideCheckboxClick:function(){ - var display = (this.hideCheckbox.checked) ? 'none' : 'block'; - - this.drawBox.drawLayer.setVisibility(!this.hideCheckbox.checked); - this.menu.style.display = display; - this.settingAllContent.style.display = display; - - if(this.hideCheckbox.checked) - this.onClose(); - else - this.onOpen(); - }, - -///////////////////////// LIST METHODS /////////////////////////////////////////////////////////// - listGenerateDrawTable : function () { - //Generate draw features table - var graphics = this.drawBox.drawLayer.graphics; - var nb_graphics = graphics.length; - - //Table - this.drawsTableBody.innerHTML = ""; - - for (var i = nb_graphics - 1; i >= 0; i--) { - var graphic = graphics[i]; - var num = i + 1; - var symbol = graphic.symbol; - - var selected = (this._editorConfig["graphicCurrent"] && this._editorConfig["graphicCurrent"] == graphic); - - if (symbol.type == "textsymbol") { - var json = symbol.toJson(); - var txt = (json.text.length > 4) ? json.text.substr(0, 4) + "..." : json.text - var font = (json.font.size < 14) ? 'font-size:' + json.font.size + 'px;' : 'font-size:14px; font-weight:bold;'; - var color = (json.color.length == 4) ? 'rgba(' + json.color.join(",") + ')' : 'rgba(' + json.color.join(",") + ')'; - var symbolHtml = '' + txt + ''; - } else { - var symbolNode = jimuSymbolUtils.createSymbolNode(symbol, { - width : 50, - height : 50 - }); - var symbolHtml = symbolNode.innerHTML; - } - var name = (graphic.attributes && graphic.attributes['name']) ? graphic.attributes['name'] : ''; - name = (name.length > 8) ? '' + name.substr(0, 8) + "..." : name; - - var html = '' + name + '' - + '' + symbolHtml + '' - + '' - + ' ' - + ' ' - + '  ' - + ' ' - + ' ' - + '  ' - + ' ' - + ''; - - var tr = domConstruct.create( - "tr", { - id : 'draw-tr--' + i, - innerHTML : html, - className : (selected) ? 'selected' : '' - }, - this.drawsTableBody - ); - - //Bind actions - on(dom.byId('draw-action-edit--' + i), "click", this.listOnActionClick); - on(dom.byId('draw-action-up--' + i), "click", this.listOnActionClick); - on(dom.byId('draw-action-down--' + i), "click", this.listOnActionClick); - on(dom.byId('draw-action-delete--' + i), "click", this.listOnActionClick); - on(dom.byId('draw-action-zoom--' + i), "click", this.listOnActionClick); - } - this.saveInLocalStorage(); - }, - - switch2DrawingGraphics : function (i1, i2) { - var g1 = this.drawBox.drawLayer.graphics[i1]; - var g2 = this.drawBox.drawLayer.graphics[i2]; - - if (!g1 || !g2) - return false; - - //Switch graphics - this.drawBox.drawLayer.graphics[i1] = g2; - this.drawBox.drawLayer.graphics[i2] = g1; - - //Redraw in good order - var nb = this.drawBox.drawLayer.graphics.length; - for (var i =0; i= i1 || i >= i2){ - var shape = g.getShape(); - if(shape) shape.moveToFront(); - } - } - return true; - }, - - listOnActionClick : function (evt) { - if (!evt.target || !evt.target.id) - return; - - var tab = evt.target.id.split('--'); - var type = tab[0]; - var i = parseInt(tab[1]); - - var g = this.drawBox.drawLayer.graphics[i]; - this._editorConfig["graphicCurrent"] = g; - - switch (type) { - case 'draw-action-up': - this.switch2DrawingGraphics(i, i + 1); - this.listGenerateDrawTable(); - break; - case 'draw-action-down': - this.switch2DrawingGraphics(i, i - 1); - 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(); - } - break; - case 'draw-action-edit': - this.setMode("edit"); - break; - case 'draw-action-zoom': - this.setInfoWindow(g); - - var extent = graphicsUtils.graphicsExtent([g]); - this.map.setExtent(extent, true); - this.listGenerateDrawTable(); - - break; - } - }, - - -///////////////////////// SYMBOL EDITOR METHODS /////////////////////////////////////////////////////////// - _editorConfig : { - drawPlus : { - "FontFamily" : false, - "bold" : false, - "italic" : false, - "underline" : false, - "angle" : false, - "placement" : { - "vertical" : "middle", - "horizontal" : "center" - } - }, - phantom : { - "point" : false, - "symbol" : false, - "layer" : false, - "handle" : false - } - }, - - editorPrepareForAdd : function (symbol) { - this.editorSymbolChooserConfigure(symbol); - - this.nameField.value = this.nls.nameFieldDefaultValue; - this.descriptionField.value = ''; - - this.editorTitle.innerHTML = this.nls.addDrawTitle; - this.editorFooterEdit.style.display = 'none'; - this.editorFooterAdd.style.display = 'block'; - this.editorAddMessage.style.display = 'block'; - this.editorEditMessage.style.display = 'none'; - this.editorSnappingMessage.style.display = 'none'; - - var commontype = this._editorConfig['commontype']; - - //Mouse preview - this._editorConfig["phantom"]["symbol"]=symbol; - this.editorEnableMapPreview((commontype == 'point' || commontype == 'text')); - - //If text prepare symbol - if(commontype=="text") - this.editorUpdateTextPlus(); - - this.editorActivateSnapping(true); - }, - - editorPrepareForEdit : function (graphic) { - this.nameField.value = graphic.attributes["name"]; - this.descriptionField.value = graphic.attributes["description"]; - - this.editorActivateGeometryEdit(graphic); - - this.editorSymbolChooserConfigure(graphic.symbol); - - this.editorTitle.innerHTML = this.nls.editDrawTitle; - this.editorFooterEdit.style.display = 'block'; - this.editorFooterAdd.style.display = 'none'; - this.editorAddMessage.style.display = 'none'; - this.editorEditMessage.style.display = 'block'; - this.editorSnappingMessage.style.display = 'block'; - - this.editorEnableMapPreview(false); - this.editorActivateSnapping(true); - }, - - editorSymbolChooserConfigure : function (symbol) { - if (!symbol) - return; - - //Set this symbol in symbol chooser - this.editorSymbolChooser.showBySymbol(symbol); - - var type = symbol.type; - //Draw plus and specific comportment when text symbol. - if (type == "textsymbol") { - //Force editorSymbolChooser _init to walk around jimu.js bug (initTextSection doesn't pass symbol to _initTextSettings) - this.editorSymbolChooser._initTextSettings(symbol); - - //show draw plus - this.editorSymbolTextPlusNode.style.display = 'block'; - - //Hide text label input (use name instead of) - var tr = this._UTIL__getParentByTag(this.editorSymbolChooser.inputText, 'tr'); - if (tr) - tr.style.display = 'none'; - - //Draw plus configuration - 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.editorTextPlusFontFamilyNode.set("value", symbol.font.family); - this.editorTextPlusAngleNode.set("value", symbol.angle); - this._UTIL__enableClass(this.editorTextPlusBoldNode, 'selected', this._editorConfig["drawPlus"]["bold"]); - this._UTIL__enableClass(this.editorTextPlusItalicNode, 'selected', this._editorConfig["drawPlus"]["italic"]); - 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); - this._UTIL__enableClass(this._editorTextPlusPlacements[i], 'selected', selected); - } - } else { - //Hide draw plus - this.editorSymbolTextPlusNode.style.display = 'none'; - } - }, - - editorActivateSnapping:function(bool){ - //If disable - if(!bool){ - this.map.disableSnapping(); - return; - } - - //If enable - this.map.enableSnapping({ - "layerInfos": [{ - "layer" : this.drawBox.drawLayer - }], - "tolerance":20 - }); - }, - - - editorUpdateTextPlus : function () { - //Only if text - if(this.editorSymbolChooser.type != "text"){ - return; - } - - //Get parameters - var text = this.nameField.value; - var family = this.editorTextPlusFontFamilyNode.value; - var angle = this.editorTextPlusAngleNode.value; - var weight = this._editorConfig["drawPlus"]["bold"] ? esri.symbol.Font.WEIGHT_BOLD : esri.symbol.Font.WEIGHT_NORMAL; - var style = this._editorConfig["drawPlus"]["italic"] ? esri.symbol.Font.STYLE_ITALIC : esri.symbol.Font.STYLE_NORMAL; - var decoration = this._editorConfig["drawPlus"]["underline"] ? 'underline' : 'none'; - var horizontal = this._editorConfig["drawPlus"]["placement"]["horizontal"]; - var vertical = this._editorConfig["drawPlus"]["placement"]["vertical"]; - - //Prepare symbol - var symbol = this.editorSymbolChooser.getSymbol(); - this.editorSymbolChooser.inputText.value = text; - symbol.text = text; - symbol.font.setFamily(family); - symbol.setAngle(angle); - symbol.setHorizontalAlignment(horizontal); - symbol.setVerticalAlignment(vertical); - symbol.font.setWeight(weight); - symbol.font.setStyle(style); - symbol.font.setDecoration(decoration); - - //Set in symbol chooser - this.editorSymbolChooser.inputText.value = text; - this.editorSymbolChooser.showBySymbol(symbol); - - //Update in drawBox - this.drawBox.setTextSymbol(symbol); - - //Update preview - this.editorSymbolChooser.textPreview.innerHTML = text; - this.editorSymbolChooser.textPreview.style.fontFamily = family; - this.editorSymbolChooser.textPreview.style['font-style'] = (this._editorConfig["drawPlus"]["italic"]) ? 'italic' : 'normal'; - this.editorSymbolChooser.textPreview.style['font-weight'] = (this._editorConfig["drawPlus"]["bold"]) ? 'bold' : 'normal'; - this.editorSymbolChooser.textPreview.style['text-decoration'] = (this._editorConfig["drawPlus"]["underline"]) ? 'underline' : 'none'; - - //Update angle preview - this.editorTextAnglePreviewNode.style.transform = 'rotate(' + angle + 'deg)'; - this.editorTextAnglePreviewNode.style['-ms-transform'] = 'rotate(' + angle + 'deg)'; - - //Update symbol on map if on modification - if(this._editorConfig["graphicCurrent"]) - this._editorConfig["graphicCurrent"].setSymbol(symbol); - else{ - //Update phantom symbol - this.editorUpdateMapPreview(symbol); - } - }, - - editorSetDefaultSymbols : function () { - var symbol = this.editorSymbolChooser.getSymbol(); - switch (symbol.type.toLowerCase()) { - case "simplemarkersymbol": - this.drawBox.setPointSymbol(symbol); - break; - case "picturemarkersymbol": - this.drawBox.setPointSymbol(symbol); - break; - case "textsymbol": - this.drawBox.setPointSymbol(symbol); - break; - case "simplelinesymbol": - this.drawBox.setLineSymbol(symbol); - break; - case "cartographiclinesymbol": - this.drawBox.setLineSymbol(symbol); - break; - case "simplefillsymbol": - this.drawBox.setPolygonSymbol(symbol); - break; - case "picturefillsymbol": - this.drawBox.setPolygonSymbol(symbol); - break; - } - }, - - -///////////////////////// IMPORT/EXPORT METHODS /////////////////////////////////////////////////////////// - importFile : function () { - if (!window.FileReader) { - this.showMessage(this.nls.importErrorMessageNavigator, 'error'); - return false; - } - - var input = this.importFileInput.files[0]; - - if (!input) { - this.showMessage(this.nls.importErrorWarningSelectFile, 'warning'); - return false; - } - var reader = new FileReader(); - reader.onload = this.importOnFileLoad; - var txt = reader.readAsText(input); - }, - - importJsonContent : function (json, nameField, descriptionField) { - try { - if (typeof json == 'string') { - json = JSON.parse(json); - } - - if (!json.features) { - this.showMessage(this.nls.importErrorFileStructure, 'error'); - return false; - } - - if (json.features.length < 1) { - this.showMessage(this.nls.importWarningNoDrawings, 'warning'); - return false; - } - - if (!nameField) { - var g = json.features[0]; - var fields_possible = ["name", "title", "label"]; - if (g.attributes) { - for (var i in fields_possible) { - if (g.attributes[fields_possible[i]]) { - nameField = fields_possible[i]; - break; - } - } - } - } - - for (var i in json.features) { - var json_feat = json.features[i]; - - var g = new Graphic(json_feat); - - if (!g) - continue; - - if (!g.attributes) - g.attributes = {}; - - g.attributes["name"] = (!nameField || !g.attributes[nameField]) ? 'n°' + (i + 1) : g.attributes[nameField]; - if (g.symbol && g.symbol.type == "textsymbol") - 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 { - var symbol = false; - switch (g.geometry.type) { - case 'point': - var symbol = new SimpleMarkerSymbol(); - break; - case 'polyline': - var symbol = new SimpleLineSymbol(); - break; - case 'polygon': - var symbol = new SimpleFillSymbol(); - break; - } - if (symbol) { - g.setSymbol(symbol); - this.drawBox.drawLayer.add(g); - } - } - } - - this.setMode("list"); - } catch (e) { - this.showMessage(this.nls.importErrorFileStructure, 'error'); - return false; - } - }, - - importOnFileLoad : function (evt) { - var content = evt.target.result; - this.importJsonContent(content); - this.importFileInput.files[0] = ""; - }, - - exportFile : function () { - // Be sure the link will not open if not asked : - this.exportButton.href = "#"; - this.exportButton.target = "_self"; - - // Control if there are drawings - if (this.drawBox.drawLayer.graphics.length < 1) { - this.showMessage(this.nls.importWarningNoExport0Draw, 'warning'); - return false; - } - - var export_name = (this.config.exportFileName) ? (this.config.exportFileName) : 'myDrawings.json'; - - // Case IE with blob support (IE >= 10) : use MS save blob - if(window.navigator && window.navigator.msSaveOrOpenBlob) { - var fileData = [this.drawingsGetJson(true)]; - blobObject = new Blob(fileData, { type: 'application/octet-stream' }); - window.navigator.msSaveOrOpenBlob(blobObject, export_name); - return false; - } - - // Case IE without blob support : write in tab. Doesn't allways work.... - if(has("ie")){ - var exportWin = window.top.open("about:blank", "_blank"); - exportWin.document.write(this.drawingsGetJson(true)); - exportWin.document.close(); - exportWin.focus(); - exportWin.document.execCommand('SaveAs', true, export_name); - exportWin.close(); - return false; - } - - // Case HTML5 (Firefox > 25, Chrome > 30....) : use data link with download attribute - this.exportButton.href = 'data:application/octet-stream;charset=utf-8,' + this.drawingsGetJson(true); - this.exportButton.target = "_blank"; - this.exportButton.download = export_name; - return true; - }, - - -///////////////////////// EDIT METHODS /////////////////////////////////////////////////////////// - editorOnClickEditSaveButon : function () { - if (this.editorSymbolChooser.type == "text") { - this.editorUpdateTextPlus(); - } - - this._editorConfig["graphicCurrent"].attributes["name"] = this.nameField.value; - this._editorConfig["graphicCurrent"].attributes["description"] = this.descriptionField.value; - - this.setMode("list"); - }, - editorOnClickEditCancelButon : function () { - this.editorResetGraphic(); - this.editorActivateGeometryEdit(false); - this.setMode("list"); - }, - editorOnClickResetCancelButon : function () { - this.editorResetGraphic(); - this.setMode("edit"); - }, - - editorResetGraphic : function () { - if (this._editorConfig["graphicSaved"] && this._editorConfig["graphicCurrent"]) { - var g = new Graphic(this._editorConfig["graphicSaved"]); - this._editorConfig["graphicCurrent"].setGeometry(g.geometry); - this._editorConfig["graphicCurrent"].setSymbol(g.symbol); - } - }, - - editorActivateGeometryEdit : function (graphic) { - if(!graphic) - this.editorActivateSnapping(false); - - if (!graphic && this._editorConfig["editToolbar"]) { - this._editorConfig["editToolbar"].deactivate(); - return; - } - - this._editorConfig["graphicSaved"] = graphic.toJson(); - - var tool = 0 | Edit.MOVE; - if (graphic.geometry.type != "point") - tool = tool | Edit.EDIT_VERTICES | Edit.SCALE | Edit.ROTATE; - - var options = { - allowAddVertices : true, - allowDeleteVertices : true, - uniformScaling : true - }; - this._editorConfig["editToolbar"].activate(tool, graphic, options); - }, - - -///////////////////////// ADD METHODS /////////////////////////////////////////////////////////// - drawBoxOnTypeSelected : function (target, geotype, commontype) { - if (!this._editorConfig["defaultSymbols"]) - this._editorConfig["defaultSymbols"] = {}; - this._editorConfig['commontype'] = commontype; - - var symbol = this._editorConfig["defaultSymbols"][commontype]; - if (!symbol) { - switch (commontype) { - case "point": - symbol = new SimpleMarkerSymbol(); - break; - case "polyline": - symbol = new SimpleLineSymbol(); - break; - case "polygon": - symbol = new SimpleFillSymbol(); - break; - case "text": - symbol = new TextSymbol({ - "verticalAlignment": "middle", - "horizontalAlignment": "center" - }); - break; - } - } - - if (symbol) { - this._editorConfig["defaultSymbols"][commontype] = symbol; - this.setMode('add2'); - } - }, - - drawBoxOnDrawEnd : function (graphic, geotype, commontype) { - var geometry = graphic.geometry; - - this.editorEnableMapPreview(false); - - graphic.attributes = { - "name" : this.nameField.value, - "description" : this.descriptionField.value - } - - if (geometry.type === 'extent') { - var a = geometry; - var polygon = new Polygon(a.spatialReference); - var r = [[a.xmin, a.ymin], [a.xmin, a.ymax], [a.xmax, a.ymax], [a.xmax, a.ymin], [a.xmin, a.ymin]]; - polygon.addRing(r); - geometry = polygon; - - graphic.setGeometry(polygon); - var layer = graphic.getLayer(); - layer.remove(graphic); - layer.add(graphic); - - commontype = 'polygon'; - } - if (commontype === 'polyline') { - if (this.showMeasure.checked) { - this._addLineMeasure(geometry); - } - } else if (commontype === 'polygon') { - if (this.showMeasure.checked) { - this._addPolygonMeasure(geometry); - } - } else if (commontype == 'text' && this.editorSymbolChooser.inputText.value.trim() == "") { - //Message - this.showMessage(this.nls.textWarningMessage, 'warning'); - - //Remove empty feature (text symbol without text) - graphic.getLayer().remove(graphic); - } - - this.saveInLocalStorage(); - this._editorConfig["graphicCurrent"] = graphic; - this._editorConfig["defaultSymbols"][this._editorConfig['commontype']] = graphic.symbol; - this.setMode("list"); - }, - - editorEnableMapPreview : function (bool) { - //if deactivate - if (!bool) { - //Hide point - if(this._editorConfig["phantom"]["point"]) - this._editorConfig["phantom"]["point"].hide(); - - this._editorConfig["phantom"]["symbol"] = false; - - //Remove map handlers - if (this._editorConfig["phantom"]["handle"]) { - dojo.disconnect(this._editorConfig["phantom"]["handle"]); - this._editorConfig["phantom"]["handle"] = false; - } - return; - } - - //Create layer if doesn't exist - if (!this._editorConfig["phantom"]["layer"]) { - this._editorConfig["phantom"]["layer"] = new GraphicsLayer({ - id : this.id + "__phantomLayer" - }); - // this._editorConfig["phantom"]["point"] - var center = this.map.extent.getCenter(); - this._editorConfig["phantom"]["point"] = new Graphic(center, this._editorConfig["phantom"]["symbol"], {}); - this._editorConfig["phantom"]["layer"].add(this._editorConfig["phantom"]["point"]); - this._editorConfig["phantom"]["point"].hide(); - - this.map.addLayer(this._editorConfig["phantom"]["layer"]); - } else { - this._editorConfig["phantom"]["point"].setSymbol(this._editorConfig["phantom"]["symbol"]); - } - - //Track mouse on map - if (!this._editorConfig["phantom"]["handle"]) { - this._editorConfig["phantom"]["handle"] = on(this.map, 'mouse-move, mouse-out, mouse-over', lang.hitch(this, function (evt) { - if (this.state === 'opened') { - switch (evt.type) { - case 'mousemove': - if (this._editorConfig["phantom"]["point"]) { - this._editorConfig["phantom"]["point"].setGeometry(evt.mapPoint); - this._editorConfig["phantom"]["point"].show(); - } - break; - case 'mouseout': - if (this._editorConfig["phantom"]["point"]) { - this._editorConfig["phantom"]["point"].hide(); - } - break; - case 'mouseover': - if (this._editorConfig["phantom"]["point"]) { - this._editorConfig["phantom"]["point"].setGeometry(evt.mapPoint); - this._editorConfig["phantom"]["point"].show(); - } - break; - } - } - })); - } - - }, - - editorUpdateMapPreview:function(symbol){ - if(this.editorSymbolChooser.type != "text" && this.editorSymbolChooser.type != "marker"){ - return; - } - - if (this._editorConfig["phantom"]["handle"]&&this._editorConfig["phantom"]["point"]) { - this._editorConfig["phantom"]["symbol"] = symbol; - this._editorConfig["phantom"]["point"].setSymbol(symbol); - } - - }, - - editorOnClickAddCancelButon : function () { - this.setMode("add1"); - }, - - -////////////////////////////////////// Measure methods ////////////////////////////////////////////// - _resetUnitsArrays : function () { - this.defaultDistanceUnits = []; - this.defaultAreaUnits = []; - this.configDistanceUnits = []; - this.configAreaUnits = []; - this.distanceUnits = []; - this.areaUnits = []; - }, - - _getDefaultDistanceUnitInfo : function (unit) { - for (var i = 0; i < this.defaultDistanceUnits.length; i++) { - var unitInfo = this.defaultDistanceUnits[i]; - if (unitInfo.unit === unit) { - return unitInfo; - } - } - return null; - }, - - _getDefaultAreaUnitInfo : function (unit) { - for (var i = 0; i < this.defaultAreaUnits.length; i++) { - var unitInfo = this.defaultAreaUnits[i]; - if (unitInfo.unit === unit) { - return unitInfo; - } - } - return null; - }, - - _getDistanceUnitInfo : function (unit) { - for (var i = 0; i < this.distanceUnits.length; i++) { - var unitInfo = this.distanceUnits[i]; - if (unitInfo.unit === unit) { - return unitInfo; - } - } - return null; - }, - - _getAreaUnitInfo : function (unit) { - for (var i = 0; i < this.areaUnits.length; i++) { - var unitInfo = this.areaUnits[i]; - if (unitInfo.unit === unit) { - return unitInfo; - } - } - return null; - }, - - _setMeasureVisibility : function () { - var display = (this.showMeasure.checked) ? 'block' : 'none'; - html.setStyle(this.areaMeasure, 'display', display); - 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; - - 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 //////////////////////////////////////////////////////////////////////////////////////////////////////// - _bindEvents : function () { - //bind DrawBox - this.own(on(this.drawBox, 'IconSelected', lang.hitch(this, this.drawBoxOnTypeSelected))); - this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this.drawBoxOnDrawEnd))); - - //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(); - } - else if(this._editorConfig["graphicCurrent"]){ - //If in modification, update graphic symbology - this._editorConfig["graphicCurrent"].setSymbol(this.editorSymbolChooser.getSymbol()); - } - - //Phantom for marker - if(this.editorSymbolChooser.type == "marker") - this.editorUpdateMapPreview(this.editorSymbolChooser.getSymbol()); - - }))); - - //bind unit events - this.own(on(this.showMeasure, 'click', lang.hitch(this, this._setMeasureVisibility))); - - //hitch list event - this.listOnActionClick = lang.hitch(this, this.listOnActionClick); - //hitch import file loading - this.importOnFileLoad = lang.hitch(this, this.importOnFileLoad); - - //Bind draw plus event - this.editorUpdateTextPlus = lang.hitch(this, this.editorUpdateTextPlus); - this.editorTextPlusFontFamilyNode.on("change", this.editorUpdateTextPlus); - this.editorTextPlusAngleNode.on("change", this.editorUpdateTextPlus); - on(this.editorTextPlusBoldNode, "click", lang.hitch(this, function (evt) { - this._editorConfig["drawPlus"]["bold"] = !this._editorConfig["drawPlus"]["bold"]; - this._UTIL__enableClass(this.editorTextPlusBoldNode, 'selected', this._editorConfig["drawPlus"]["bold"]); - this.editorUpdateTextPlus(); - })); - on(this.editorTextPlusItalicNode, "click", lang.hitch(this, function (evt) { - this._editorConfig["drawPlus"]["italic"] = !this._editorConfig["drawPlus"]["italic"]; - this._UTIL__enableClass(this.editorTextPlusItalicNode, 'selected', this._editorConfig["drawPlus"]["italic"]); - this.editorUpdateTextPlus(); - })); - on(this.editorTextPlusUnderlineNode, "click", lang.hitch(this, function (evt) { - this._editorConfig["drawPlus"]["underline"] = !this._editorConfig["drawPlus"]["underline"]; - this._UTIL__enableClass(this.editorTextPlusUnderlineNode, 'selected', this._editorConfig["drawPlus"]["underline"]); - this.editorUpdateTextPlus(); - })); - this.onEditorTextPlusPlacementClick=lang.hitch(this, function(evt){ - if(!evt.target) - return; - - var selected = false; - for(var i in this._editorTextPlusPlacements){ - var is_this = (evt.target == this._editorTextPlusPlacements[i]); - - this._UTIL__enableClass(this._editorTextPlusPlacements[i], 'selected', is_this); - - if(is_this) - selected = this._editorTextPlusPlacements[i]; - } - if(!selected.title) - return; - var tab = selected.title.split(" "); - this._editorConfig["drawPlus"]["placement"] = { - "vertical" : tab[0], - "horizontal" : tab[1] - } - this.editorUpdateTextPlus(); - }); - this._editorTextPlusPlacements = [ - this.editorTextPlusPlacementTopLeft, - this.editorTextPlusPlacementTopCenter, - this.editorTextPlusPlacementTopRight, - this.editorTextPlusPlacementMiddleLeft, - this.editorTextPlusPlacementMiddleCenter, - this.editorTextPlusPlacementMiddleRight, - this.editorTextPlusPlacementBottomLeft, - this.editorTextPlusPlacementBottomCenter, - this.editorTextPlusPlacementBottomRight - ]; - for(var i in this._editorTextPlusPlacements) - on(this._editorTextPlusPlacements[i], "click",this.onEditorTextPlusPlacementClick); - - }, - - _menuInit : function () { - this._menuButtons = { - "add" : this.menuAddButton, - "edit" : this.menuEditButton, - "list" : this.menuListButton, - "importExport" : this.menuListImportExport - }; - - 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 - }); - html.place(this.TabViewStack.domNode, this.settingAllContent); - }, - - _initLocalStorage : function () { - if (!this.config.allowLocalStorage) - return; - - this._localStorageKey = - (this.config.localStorageKey) - ? 'WebAppBuilder.2D.eDraw.' + this.config.localStorageKey - : 'WebAppBuilder.2D.eDraw'; - - var content = localStore.get(this._localStorageKey); - - if (!content || !content.features || content.features.length < 1) - return; - - //Closure with timeout to be sure widget is ready - (function (widget) { - setTimeout( - function () { - widget.importJsonContent(content, "name", "description"); - widget.showMessage(widget.nls.localLoading); - }, 200); - })(this); - - }, - - _initDrawingPopupAndClick : function () { - //Set popup template - var infoTemplate = new esri.InfoTemplate("${name}", "${description}"); - this.drawBox.drawLayer.setInfoTemplate(infoTemplate); - - //Set draw click - this._onDrawClick = lang.hitch(this, function (evt) { - if (!evt.graphic) - return; - - this._editorConfig["graphicCurrent"] = evt.graphic; - this.setMode("list"); - }); - - //Allow click - this.allowPopup(true); - - }, - - _initUnitSelect : function () { - this._initDefaultUnits(); - this._initConfigUnits(); - var a = this.configDistanceUnits; - var b = this.defaultDistanceUnits; - this.distanceUnits = a.length > 0 ? a : b; - var c = this.configAreaUnits; - var d = this.defaultAreaUnits; - this.areaUnits = c.length > 0 ? c : d; - array.forEach(this.distanceUnits, lang.hitch(this, function (unitInfo) { - var option = { - value : unitInfo.unit, - label : unitInfo.label - }; - this.distanceUnitSelect.addOption(option); - })); - - array.forEach(this.areaUnits, lang.hitch(this, function (unitInfo) { - var option = { - value : unitInfo.unit, - label : unitInfo.label - }; - this.areaUnitSelect.addOption(option); - })); - }, - - _initDefaultUnits : function () { - this.defaultDistanceUnits = [{ - unit : 'KILOMETERS', - label : this.nls.kilometers - }, { - unit : 'MILES', - label : this.nls.miles - }, { - unit : 'METERS', - label : this.nls.meters - },{ - unit : 'NAUTICAL_MILES', - label : this.nls.nauticals - }, { - unit : 'FEET', - label : this.nls.feet - }, { - unit : 'YARDS', - label : this.nls.yards - } - ]; - - this.defaultAreaUnits = [{ - unit : 'SQUARE_KILOMETERS', - label : this.nls.squareKilometers - }, { - unit : 'SQUARE_MILES', - label : this.nls.squareMiles - }, { - unit : 'ACRES', - label : this.nls.acres - }, { - unit : 'HECTARES', - label : this.nls.hectares - }, { - unit : 'SQUARE_METERS', - label : this.nls.squareMeters - }, { - unit : 'SQUARE_FEET', - label : this.nls.squareFeet - }, { - unit : 'SQUARE_YARDS', - label : this.nls.squareYards - } - ]; - }, - - _initConfigUnits : function () { - array.forEach(this.config.distanceUnits, lang.hitch(this, function (unitInfo) { - var unit = unitInfo.unit; - if (esriUnits[unit]) { - var defaultUnitInfo = this._getDefaultDistanceUnitInfo(unit); - unitInfo.label = defaultUnitInfo.label; - this.configDistanceUnits.push(unitInfo); - } - })); - - array.forEach(this.config.areaUnits, lang.hitch(this, function (unitInfo) { - var unit = unitInfo.unit; - if (esriUnits[unit]) { - var defaultUnitInfo = this._getDefaultAreaUnitInfo(unit); - unitInfo.label = defaultUnitInfo.label; - this.configAreaUnits.push(unitInfo); - } - })); - }, - -//////////////////////////// WIDGET CORE METHODS /////////////////////////////////////////////////////////////////////////////////////// - - postMixInProperties : function () { - this.inherited(arguments); - this._resetUnitsArrays(); - }, - - postCreate : function () { - this.inherited(arguments); - - //Create symbol chooser - this.editorSymbolChooser = new SymbolChooser( - { - "class" : "full-width", - "type" : "text", - "symbol" : new SimpleMarkerSymbol() - }, - this.editorSymbolChooserDiv - ); - - this.drawBox.setMap(this.map); - - //Initialize menu - this._menuInit(); - - //Init measure units - this._initUnitSelect(); - - //Bind and hitch events - this._bindEvents(); - - //Prepare text plus - this._prepareTextPlus(); - - //load if drawings in localStorage - this._initLocalStorage(); - - //Popup or click init - this._initDrawingPopupAndClick(); - - //Create edit dijit - this._editorConfig["editToolbar"] = new Edit(this.map); - }, - - _prepareTextPlus:function(){ - //Select central position in UI (text placement) - this._UTIL__enableClass(this._editorTextPlusPlacements[4], 'selected', true); - - //Manage availaible FontFamily - if(this.config.drawPlus && this.config.drawPlus.fontFamilies){ - if(this.config.drawPlus.fontFamilies.length > 0){ - this.editorTextPlusFontFamilyNode.set("options", this.config.drawPlus.fontFamilies).reset(); - } - } - - }, - - onOpen : function () { - if (this.drawBox.drawLayer.graphics.length > 0) - this.setMode("list"); - else - this.setMode("add1"); - }, - - onClose : function () { - this.editorResetGraphic(); - this.drawBox.deactivate(); - this.setInfoWindow(false); - this.editorEnableMapPreview(false); - this.editorActivateGeometryEdit(false); - this.map.infoWindow.hide(); - this.allowPopup(true); - }, - - destroy : function () { - if (this.drawBox) { - this.drawBox.destroy(); - this.drawBox = null; - } - if (this.editorSymbolChooser) { - this.editorSymbolChooser.destroy(); - this.editorSymbolChooser = null; - } - this.inherited(arguments); - }, - -///////////////////////// UTILS METHODS //////////////////////////////////////////////////////////////////////////// - _UTIL__enableClass : function (elt, className, bool) { - if (elt.classList) { - if (bool) - elt.classList.add(className); - else - elt.classList.remove(className); - return; - } - elt.className = elt.className.replace(className, "").replace(" ", " ").trim(); - if (bool) - elt.className += className; - }, - - _UTIL__getParentByTag : function (el, tagName) { - tagName = tagName.toLowerCase(); - while (el && el.parentNode) { - el = el.parentNode; - if (el.tagName && el.tagName.toLowerCase() == tagName) { - return el; - } - } - return null; - } - - }); -//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -}); + 'dojo/_base/declare', + 'dijit/_WidgetsInTemplateMixin', + 'jimu/BaseWidget', + 'esri/graphic', + 'esri/symbols/SimpleMarkerSymbol', + 'esri/geometry/Polyline', + 'esri/symbols/SimpleLineSymbol', + 'esri/geometry/Polygon', + 'esri/graphicsUtils', + 'esri/symbols/SimpleFillSymbol', + 'esri/symbols/TextSymbol', + 'esri/symbols/Font', + 'esri/units', + "esri/toolbars/edit", + 'esri/geometry/webMercatorUtils', + 'esri/geometry/geodesicUtils', + 'dojo/_base/lang', + 'dojo/on', + 'dojo/_base/html', + 'dojo/sniff', + 'dojo/_base/Color', + 'dojo/_base/array', + 'dojo/dom-construct', + 'dojo/dom', + 'dijit/form/Select', + 'dijit/form/NumberSpinner', + 'jimu/dijit/ViewStack', + 'jimu/dijit/SymbolChooser', + 'jimu/dijit/DrawBox', + 'jimu/dijit/Message', + 'jimu/utils', + 'jimu/symbolUtils', + 'libs/storejs/store', + '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, + Color, array, domConstruct, dom, Select, NumberSpinner, ViewStack, SymbolChooser, + DrawBox, Message, jimuUtils, jimuSymbolUtils, localStore, InfoTemplate, GraphicsLayer) { + + /*jshint unused: false*/ + return declare([BaseWidget, _WidgetsInTemplateMixin], { + name: 'eDraw', + baseClass: 'jimu-widget-edraw', + + + //////////////////////////////////////////// GENERAL METHODS ////////////////////////////////////////////////// + /** + * Set widget mode :add1 (type choice), add2 (symbology and attributes choice), edit, list, importExport + * @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); + this.editorActivateGeometryEdit(false); + this.allowPopup(false); + + switch (name) { + case 'add1': + this.setMenuState('add'); + + this._editorConfig["graphicCurrent"] = false; + + + this.TabViewStack.switchView(this.addSection); + + this.drawBox.deactivate(); + + this.setInfoWindow(false); + this.allowPopup(false); + + break; + case 'add2': + this.setMenuState('add', ['add']); + + this._editorConfig["graphicCurrent"] = false; + + this.editorPrepareForAdd(this._editorConfig["defaultSymbols"][this._editorConfig['commontype']]); + + this.TabViewStack.switchView(this.editorSection); + + this.setInfoWindow(false); + + break; + case 'edit': + this.setMenuState('edit', ['edit']); + if (this._editorConfig["graphicCurrent"]) { + //prepare editor + this.editorPrepareForEdit(this._editorConfig["graphicCurrent"]); + + //Focus + var extent = graphicsUtils.graphicsExtent([this._editorConfig["graphicCurrent"]]); + this.map.setExtent(extent.expand(2), true); + } + + this.TabViewStack.switchView(this.editorSection); + + this.setInfoWindow(false); + + break; + case 'list': + this.setMenuState('list'); + this.allowPopup(true); + + //Generate list and + this.listGenerateDrawTable(); + var nb_draws = this.drawBox.drawLayer.graphics.length; + var display = (nb_draws > 0) ? 'block' : 'none'; + html.setStyle(this.allActionsNode, 'display', display); + this.tableTH.innerHTML = nb_draws + ' ' + this.nls.draws; + + //Other params + this._editorConfig["graphicCurrent"] = false; + + 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; + } + }, + + showMessage: function(msg, type) { + + var class_icon = "message-info-icon"; + switch (type) { + case "error": + class_icon = "message-error-icon"; + break; + case "warning": + class_icon = "message-warning-icon"; + break; + } + + var content = ' ' + msg; + + new Message({ + message: content + }); + }, + + setMenuState: function(active, elements_shown) { + if (!elements_shown) { + elements_shown = ['add', 'list', 'importExport']; + } 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)) + menu_class = "hidden"; + if (this._menuButtons[button_name]) + this._menuButtons[button_name].className = menu_class; + } + }, + + setInfoWindow: function(graphic) { + if (!this.map.infoWindow) + return false; + + if (!graphic) { + this.map.infoWindow.hide(); + return true; + } + + if (graphic.geometry.x) + var center = graphic.geometry; + else if (graphic.geometry.getCenter) + var center = graphic.geometry.getCenter(); + else if (graphic.geometry.getExtent) + var center = graphic.geometry.getExtent().getCenter(); + else + return false; + + this.map.infoWindow.setFeatures([graphic]); + this.map.infoWindow.show(center); + + }, + + _clickHandler: false, + allowPopup: function(bool) { + this.map.setInfoWindowOnClick(bool); + + if (!bool && this._clickHandler) { + dojo.disconnect(this._clickHandler); + } else { + this._clickHandler = this.drawBox.drawLayer.on("click", this._onDrawClick); + } + }, + + saveInLocalStorage: function() { + if (!this.config.allowLocalStorage) + return; + + localStore.set(this._localStorageKey, this.drawingsGetJson()); + }, + + zoomAll: function() { + var graphics = this.drawBox.drawLayer.graphics; + var nb_graphics = graphics.length; + + if (nb_graphics < 1) + return; + + var ext = graphicsUtils.graphicsExtent(this.drawBox.drawLayer.graphics); + + this.map.setExtent(ext, true); + return true; + }, + + clear: function() { + if (!this.config.confirmOnDelete || confirm(this.nls.clear)) { + this.drawBox.drawLayer.clear(); + this.setInfoWindow(false); + this.setMode("list"); + } + }, + + drawingsGetJson: function(asString) { + if (this.drawBox.drawLayer.graphics.length < 1) + return (asString) ? '' : false; + + var content = { + "features": [], + "displayFieldName": "", + "fieldAliases": {}, + "spatialReference": this.map.spatialReference.toJson(), + "fields": [] + }; + + for (var i in this.drawBox.drawLayer.graphics) + content["features"].push(this.drawBox.drawLayer.graphics[i].toJson()); + + if (asString) { + content = JSON.stringify(content); + } + return content; + }, + + + ///////////////////////// MENU METHODS /////////////////////////////////////////////////////////// + menuOnClickAdd: function() { + this.setMode("add1"); + }, + menuOnClickList: function() { + this.setMode("list"); + }, + menuOnClickImportExport: function() { + this.setMode("importExport"); + }, + + onHideCheckboxClick: function() { + var display = (this.hideCheckbox.checked) ? 'none' : 'block'; + + this.drawBox.drawLayer.setVisibility(!this.hideCheckbox.checked); + this.menu.style.display = display; + this.settingAllContent.style.display = display; + + if (this.hideCheckbox.checked) + this.onClose(); + else + this.onOpen(); + }, + + ///////////////////////// LIST METHODS /////////////////////////////////////////////////////////// + listGenerateDrawTable: function() { + //Generate draw features table + var graphics = this.drawBox.drawLayer.graphics; + var nb_graphics = graphics.length; + + //Table + this.drawsTableBody.innerHTML = ""; + + for (var i = nb_graphics - 1; i >= 0; i--) { + var graphic = graphics[i]; + var num = i + 1; + var symbol = graphic.symbol; + + var selected = (this._editorConfig["graphicCurrent"] && this._editorConfig["graphicCurrent"] == graphic); + + if (symbol.type == "textsymbol") { + var json = symbol.toJson(); + var txt = (json.text.length > 4) ? json.text.substr(0, 4) + "..." : json.text + var font = (json.font.size < 14) ? 'font-size:' + json.font.size + 'px;' : 'font-size:14px; font-weight:bold;'; + var color = (json.color.length == 4) ? 'rgba(' + json.color.join(",") + ')' : 'rgba(' + json.color.join(",") + ')'; + var symbolHtml = '' + txt + ''; + } else { + var symbolNode = jimuSymbolUtils.createSymbolNode(symbol, { + width: 50, + height: 50 + }); + var symbolHtml = symbolNode.innerHTML; + } + var name = (graphic.attributes && graphic.attributes['name']) ? graphic.attributes['name'] : ''; + name = (name.length > 8) ? '' + name.substr(0, 8) + "..." : name; + + var html = '' + name + '' + '' + symbolHtml + '' + '' + ' ' + ' ' + '  ' + ' ' + ' ' + '  ' + ' ' + ''; + + var tr = domConstruct.create( + "tr", { + id: 'draw-tr--' + i, + innerHTML: html, + className: (selected) ? 'selected' : '' + }, + this.drawsTableBody + ); + + //Bind actions + on(dom.byId('draw-action-edit--' + i), "click", this.listOnActionClick); + on(dom.byId('draw-action-up--' + i), "click", this.listOnActionClick); + on(dom.byId('draw-action-down--' + i), "click", this.listOnActionClick); + on(dom.byId('draw-action-delete--' + i), "click", this.listOnActionClick); + on(dom.byId('draw-action-zoom--' + i), "click", this.listOnActionClick); + } + this.saveInLocalStorage(); + }, + + switch2DrawingGraphics: function(i1, i2) { + var g1 = this.drawBox.drawLayer.graphics[i1]; + var g2 = this.drawBox.drawLayer.graphics[i2]; + + if (!g1 || !g2) + return false; + + //Switch graphics + this.drawBox.drawLayer.graphics[i1] = g2; + this.drawBox.drawLayer.graphics[i2] = g1; + + //Redraw in good order + var nb = this.drawBox.drawLayer.graphics.length; + for (var i = 0; i < nb; i++) { + var g = this.drawBox.drawLayer.graphics[i]; + + if (i >= i1 || i >= i2) { + var shape = g.getShape(); + if (shape) shape.moveToFront(); + } + } + return true; + }, + + listOnActionClick: function(evt) { + if (!evt.target || !evt.target.id) + return; + + var tab = evt.target.id.split('--'); + var type = tab[0]; + var i = parseInt(tab[1]); + + var g = this.drawBox.drawLayer.graphics[i]; + this._editorConfig["graphicCurrent"] = g; + + switch (type) { + case 'draw-action-up': + this.switch2DrawingGraphics(i, i + 1); + this.listGenerateDrawTable(); + break; + case 'draw-action-down': + this.switch2DrawingGraphics(i, i - 1); + 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(); + } + break; + case 'draw-action-edit': + this.setMode("edit"); + break; + case 'draw-action-zoom': + this.setInfoWindow(g); + + var extent = graphicsUtils.graphicsExtent([g]); + this.map.setExtent(extent, true); + this.listGenerateDrawTable(); + + break; + } + }, + + + ///////////////////////// SYMBOL EDITOR METHODS /////////////////////////////////////////////////////////// + _editorConfig: { + drawPlus: { + "FontFamily": false, + "bold": false, + "italic": false, + "underline": false, + "angle": false, + "placement": { + "vertical": "middle", + "horizontal": "center" + } + }, + phantom: { + "point": false, + "symbol": false, + "layer": false, + "handle": false + } + }, + + editorPrepareForAdd: function(symbol) { + this.editorSymbolChooserConfigure(symbol); + + this.nameField.value = this.nls.nameFieldDefaultValue; + this.descriptionField.value = ''; + + this.editorTitle.innerHTML = this.nls.addDrawTitle; + this.editorFooterEdit.style.display = 'none'; + this.editorFooterAdd.style.display = 'block'; + this.editorAddMessage.style.display = 'block'; + this.editorEditMessage.style.display = 'none'; + this.editorSnappingMessage.style.display = 'none'; + + var commontype = this._editorConfig['commontype']; + + //Mouse preview + this._editorConfig["phantom"]["symbol"] = symbol; + this.editorEnableMapPreview((commontype == 'point' || commontype == 'text')); + + //If text prepare symbol + if (commontype == "text") + this.editorUpdateTextPlus(); + + this.editorActivateSnapping(true); + }, + + editorPrepareForEdit: function(graphic) { + this.nameField.value = graphic.attributes["name"]; + this.descriptionField.value = graphic.attributes["description"]; + + this.editorActivateGeometryEdit(graphic); + + this.editorSymbolChooserConfigure(graphic.symbol); + + this.editorTitle.innerHTML = this.nls.editDrawTitle; + this.editorFooterEdit.style.display = 'block'; + this.editorFooterAdd.style.display = 'none'; + this.editorAddMessage.style.display = 'none'; + this.editorEditMessage.style.display = 'block'; + this.editorSnappingMessage.style.display = 'block'; + + this.editorEnableMapPreview(false); + this.editorActivateSnapping(true); + }, + + editorSymbolChooserConfigure: function(symbol) { + if (!symbol) + return; + + //Set this symbol in symbol chooser + this.editorSymbolChooser.showBySymbol(symbol); + + var type = symbol.type; + //Draw plus and specific comportment when text symbol. + if (type == "textsymbol") { + //Force editorSymbolChooser _init to walk around jimu.js bug (initTextSection doesn't pass symbol to _initTextSettings) + this.editorSymbolChooser._initTextSettings(symbol); + + //show draw plus + this.editorSymbolTextPlusNode.style.display = 'block'; + + //Hide text label input (use name instead of) + var tr = this._UTIL__getParentByTag(this.editorSymbolChooser.inputText, 'tr'); + if (tr) + tr.style.display = 'none'; + + //Draw plus configuration + 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.editorTextPlusFontFamilyNode.set("value", symbol.font.family); + this.editorTextPlusAngleNode.set("value", symbol.angle); + this._UTIL__enableClass(this.editorTextPlusBoldNode, 'selected', this._editorConfig["drawPlus"]["bold"]); + this._UTIL__enableClass(this.editorTextPlusItalicNode, 'selected', this._editorConfig["drawPlus"]["italic"]); + 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); + this._UTIL__enableClass(this._editorTextPlusPlacements[i], 'selected', selected); + } + } else { + //Hide draw plus + this.editorSymbolTextPlusNode.style.display = 'none'; + } + }, + + editorActivateSnapping: function(bool) { + //If disable + if (!bool) { + this.map.disableSnapping(); + return; + } + + //If enable + this.map.enableSnapping({ + "layerInfos": [{ + "layer": this.drawBox.drawLayer + }], + "tolerance": 20 + }); + }, + + + editorUpdateTextPlus: function() { + //Only if text + if (this.editorSymbolChooser.type != "text") { + return; + } + + //Get parameters + var text = this.nameField.value; + var family = this.editorTextPlusFontFamilyNode.value; + var angle = this.editorTextPlusAngleNode.value; + var weight = this._editorConfig["drawPlus"]["bold"] ? esri.symbol.Font.WEIGHT_BOLD : esri.symbol.Font.WEIGHT_NORMAL; + var style = this._editorConfig["drawPlus"]["italic"] ? esri.symbol.Font.STYLE_ITALIC : esri.symbol.Font.STYLE_NORMAL; + var decoration = this._editorConfig["drawPlus"]["underline"] ? 'underline' : 'none'; + var horizontal = this._editorConfig["drawPlus"]["placement"]["horizontal"]; + var vertical = this._editorConfig["drawPlus"]["placement"]["vertical"]; + + //Prepare symbol + var symbol = this.editorSymbolChooser.getSymbol(); + this.editorSymbolChooser.inputText.value = text; + symbol.text = text; + symbol.font.setFamily(family); + symbol.setAngle(angle); + symbol.setHorizontalAlignment(horizontal); + symbol.setVerticalAlignment(vertical); + symbol.font.setWeight(weight); + symbol.font.setStyle(style); + symbol.font.setDecoration(decoration); + + //Set in symbol chooser + this.editorSymbolChooser.inputText.value = text; + this.editorSymbolChooser.showBySymbol(symbol); + + //Update in drawBox + this.drawBox.setTextSymbol(symbol); + + //Update preview + this.editorSymbolChooser.textPreview.innerHTML = text; + this.editorSymbolChooser.textPreview.style.fontFamily = family; + this.editorSymbolChooser.textPreview.style['font-style'] = (this._editorConfig["drawPlus"]["italic"]) ? 'italic' : 'normal'; + this.editorSymbolChooser.textPreview.style['font-weight'] = (this._editorConfig["drawPlus"]["bold"]) ? 'bold' : 'normal'; + this.editorSymbolChooser.textPreview.style['text-decoration'] = (this._editorConfig["drawPlus"]["underline"]) ? 'underline' : 'none'; + + //Update angle preview + this.editorTextAnglePreviewNode.style.transform = 'rotate(' + angle + 'deg)'; + this.editorTextAnglePreviewNode.style['-ms-transform'] = 'rotate(' + angle + 'deg)'; + + //Update symbol on map if on modification + if (this._editorConfig["graphicCurrent"]) + this._editorConfig["graphicCurrent"].setSymbol(symbol); + else { + //Update phantom symbol + this.editorUpdateMapPreview(symbol); + } + }, + + editorSetDefaultSymbols: function() { + var symbol = this.editorSymbolChooser.getSymbol(); + switch (symbol.type.toLowerCase()) { + case "simplemarkersymbol": + this.drawBox.setPointSymbol(symbol); + break; + case "picturemarkersymbol": + this.drawBox.setPointSymbol(symbol); + break; + case "textsymbol": + this.drawBox.setPointSymbol(symbol); + break; + case "simplelinesymbol": + this.drawBox.setLineSymbol(symbol); + break; + case "cartographiclinesymbol": + this.drawBox.setLineSymbol(symbol); + break; + case "simplefillsymbol": + this.drawBox.setPolygonSymbol(symbol); + break; + case "picturefillsymbol": + this.drawBox.setPolygonSymbol(symbol); + break; + } + }, + + + ///////////////////////// IMPORT/EXPORT METHODS /////////////////////////////////////////////////////////// + importFile: function() { + if (!window.FileReader) { + this.showMessage(this.nls.importErrorMessageNavigator, 'error'); + return false; + } + + var input = this.importFileInput.files[0]; + + if (!input) { + this.showMessage(this.nls.importErrorWarningSelectFile, 'warning'); + return false; + } + var reader = new FileReader(); + reader.onload = this.importOnFileLoad; + var txt = reader.readAsText(input); + }, + + importJsonContent: function(json, nameField, descriptionField) { + try { + if (typeof json == 'string') { + json = JSON.parse(json); + } + + if (!json.features) { + this.showMessage(this.nls.importErrorFileStructure, 'error'); + return false; + } + + if (json.features.length < 1) { + this.showMessage(this.nls.importWarningNoDrawings, 'warning'); + return false; + } + + if (!nameField) { + var g = json.features[0]; + var fields_possible = ["name", "title", "label"]; + if (g.attributes) { + for (var i in fields_possible) { + if (g.attributes[fields_possible[i]]) { + nameField = fields_possible[i]; + break; + } + } + } + } + + for (var i in json.features) { + var json_feat = json.features[i]; + + var g = new Graphic(json_feat); + + if (!g) + continue; + + if (!g.attributes) + g.attributes = {}; + + g.attributes["name"] = (!nameField || !g.attributes[nameField]) ? 'n°' + (i + 1) : g.attributes[nameField]; + if (g.symbol && g.symbol.type == "textsymbol") + 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 { + var symbol = false; + switch (g.geometry.type) { + case 'point': + var symbol = new SimpleMarkerSymbol(); + break; + case 'polyline': + var symbol = new SimpleLineSymbol(); + break; + case 'polygon': + var symbol = new SimpleFillSymbol(); + break; + } + if (symbol) { + g.setSymbol(symbol); + this.drawBox.drawLayer.add(g); + } + } + } + + this.setMode("list"); + } catch (e) { + this.showMessage(this.nls.importErrorFileStructure, 'error'); + return false; + } + }, + + importOnFileLoad: function(evt) { + var content = evt.target.result; + this.importJsonContent(content); + this.importFileInput.files[0] = ""; + }, + + exportFile: function() { + // Be sure the link will not open if not asked : + this.exportButton.href = "#"; + this.exportButton.target = "_self"; + + // Control if there are drawings + if (this.drawBox.drawLayer.graphics.length < 1) { + this.showMessage(this.nls.importWarningNoExport0Draw, 'warning'); + return false; + } + + var export_name = (this.config.exportFileName) ? (this.config.exportFileName) : 'myDrawings.json'; + + // Case IE with blob support (IE >= 10) : use MS save blob + if (window.navigator && window.navigator.msSaveOrOpenBlob) { + var fileData = [this.drawingsGetJson(true)]; + blobObject = new Blob(fileData, { + type: 'application/octet-stream' + }); + window.navigator.msSaveOrOpenBlob(blobObject, export_name); + return false; + } + + // Case IE without blob support : write in tab. Doesn't allways work.... + if (has("ie")) { + var exportWin = window.top.open("about:blank", "_blank"); + exportWin.document.write(this.drawingsGetJson(true)); + exportWin.document.close(); + exportWin.focus(); + exportWin.document.execCommand('SaveAs', true, export_name); + exportWin.close(); + return false; + } + + // Case HTML5 (Firefox > 25, Chrome > 30....) : use data link with download attribute + this.exportButton.href = 'data:application/octet-stream;charset=utf-8,' + this.drawingsGetJson(true); + this.exportButton.target = "_blank"; + this.exportButton.download = export_name; + return true; + }, + + + ///////////////////////// EDIT METHODS /////////////////////////////////////////////////////////// + editorOnClickEditSaveButon: function() { + if (this.editorSymbolChooser.type == "text") { + this.editorUpdateTextPlus(); + } + + this._editorConfig["graphicCurrent"].attributes["name"] = this.nameField.value; + this._editorConfig["graphicCurrent"].attributes["description"] = this.descriptionField.value; + + this.setMode("list"); + }, + editorOnClickEditCancelButon: function() { + this.editorResetGraphic(); + this.editorActivateGeometryEdit(false); + this.setMode("list"); + }, + editorOnClickResetCancelButon: function() { + this.editorResetGraphic(); + this.setMode("edit"); + }, + + editorResetGraphic: function() { + if (this._editorConfig["graphicSaved"] && this._editorConfig["graphicCurrent"]) { + var g = new Graphic(this._editorConfig["graphicSaved"]); + this._editorConfig["graphicCurrent"].setGeometry(g.geometry); + this._editorConfig["graphicCurrent"].setSymbol(g.symbol); + } + }, + + editorActivateGeometryEdit: function(graphic) { + if (!graphic) + this.editorActivateSnapping(false); + + if (!graphic && this._editorConfig["editToolbar"]) { + this._editorConfig["editToolbar"].deactivate(); + return; + } + + this._editorConfig["graphicSaved"] = graphic.toJson(); + + var tool = 0 | Edit.MOVE; + if (graphic.geometry.type != "point") + tool = tool | Edit.EDIT_VERTICES | Edit.SCALE | Edit.ROTATE; + + var options = { + allowAddVertices: true, + allowDeleteVertices: true, + uniformScaling: true + }; + this._editorConfig["editToolbar"].activate(tool, graphic, options); + }, + + + ///////////////////////// ADD METHODS /////////////////////////////////////////////////////////// + drawBoxOnTypeSelected: function(target, geotype, commontype) { + if (!this._editorConfig["defaultSymbols"]) + this._editorConfig["defaultSymbols"] = {}; + this._editorConfig['commontype'] = commontype; + + var symbol = this._editorConfig["defaultSymbols"][commontype]; + if (!symbol) { + switch (commontype) { + case "point": + symbol = new SimpleMarkerSymbol(); + break; + case "polyline": + symbol = new SimpleLineSymbol(); + break; + case "polygon": + symbol = new SimpleFillSymbol(); + break; + case "text": + symbol = new TextSymbol({ + "verticalAlignment": "middle", + "horizontalAlignment": "center" + }); + break; + } + } + + if (symbol) { + this._editorConfig["defaultSymbols"][commontype] = symbol; + this.setMode('add2'); + } + }, + + drawBoxOnDrawEnd: function(graphic, geotype, commontype) { + var geometry = graphic.geometry; + + this.editorEnableMapPreview(false); + + graphic.attributes = { + "name": this.nameField.value, + "description": this.descriptionField.value + } + + if (geometry.type === 'extent') { + var a = geometry; + var polygon = new Polygon(a.spatialReference); + var r = [ + [a.xmin, a.ymin], + [a.xmin, a.ymax], + [a.xmax, a.ymax], + [a.xmax, a.ymin], + [a.xmin, a.ymin] + ]; + polygon.addRing(r); + geometry = polygon; + + graphic.setGeometry(polygon); + var layer = graphic.getLayer(); + layer.remove(graphic); + layer.add(graphic); + + commontype = 'polygon'; + } + if (commontype === 'polyline') { + if (this.showMeasure.checked) { + this._addLineMeasure(geometry); + } + } else if (commontype === 'polygon') { + if (this.showMeasure.checked) { + this._addPolygonMeasure(geometry); + } + } else if (commontype == 'text' && this.editorSymbolChooser.inputText.value.trim() == "") { + //Message + this.showMessage(this.nls.textWarningMessage, 'warning'); + + //Remove empty feature (text symbol without text) + graphic.getLayer().remove(graphic); + } + + this.saveInLocalStorage(); + this._editorConfig["graphicCurrent"] = graphic; + this._editorConfig["defaultSymbols"][this._editorConfig['commontype']] = graphic.symbol; + this.setMode("list"); + }, + + editorEnableMapPreview: function(bool) { + //if deactivate + if (!bool) { + //Hide point + if (this._editorConfig["phantom"]["point"]) + this._editorConfig["phantom"]["point"].hide(); + + this._editorConfig["phantom"]["symbol"] = false; + + //Remove map handlers + if (this._editorConfig["phantom"]["handle"]) { + dojo.disconnect(this._editorConfig["phantom"]["handle"]); + this._editorConfig["phantom"]["handle"] = false; + } + return; + } + + //Create layer if doesn't exist + if (!this._editorConfig["phantom"]["layer"]) { + this._editorConfig["phantom"]["layer"] = new GraphicsLayer({ + id: this.id + "__phantomLayer" + }); + // this._editorConfig["phantom"]["point"] + var center = this.map.extent.getCenter(); + this._editorConfig["phantom"]["point"] = new Graphic(center, this._editorConfig["phantom"]["symbol"], {}); + this._editorConfig["phantom"]["layer"].add(this._editorConfig["phantom"]["point"]); + this._editorConfig["phantom"]["point"].hide(); + + this.map.addLayer(this._editorConfig["phantom"]["layer"]); + } else { + this._editorConfig["phantom"]["point"].setSymbol(this._editorConfig["phantom"]["symbol"]); + } + + //Track mouse on map + if (!this._editorConfig["phantom"]["handle"]) { + this._editorConfig["phantom"]["handle"] = on(this.map, 'mouse-move, mouse-out, mouse-over', lang.hitch(this, function(evt) { + if (this.state === 'opened') { + switch (evt.type) { + case 'mousemove': + if (this._editorConfig["phantom"]["point"]) { + this._editorConfig["phantom"]["point"].setGeometry(evt.mapPoint); + this._editorConfig["phantom"]["point"].show(); + } + break; + case 'mouseout': + if (this._editorConfig["phantom"]["point"]) { + this._editorConfig["phantom"]["point"].hide(); + } + break; + case 'mouseover': + if (this._editorConfig["phantom"]["point"]) { + this._editorConfig["phantom"]["point"].setGeometry(evt.mapPoint); + this._editorConfig["phantom"]["point"].show(); + } + break; + } + } + })); + } + + }, + + editorUpdateMapPreview: function(symbol) { + if (this.editorSymbolChooser.type != "text" && this.editorSymbolChooser.type != "marker") { + return; + } + + if (this._editorConfig["phantom"]["handle"] && this._editorConfig["phantom"]["point"]) { + this._editorConfig["phantom"]["symbol"] = symbol; + this._editorConfig["phantom"]["point"].setSymbol(symbol); + } + + }, + + editorOnClickAddCancelButon: function() { + this.setMode("add1"); + }, + + + ////////////////////////////////////// Measure methods ////////////////////////////////////////////// + _resetUnitsArrays: function() { + this.defaultDistanceUnits = []; + this.defaultAreaUnits = []; + this.configDistanceUnits = []; + this.configAreaUnits = []; + this.distanceUnits = []; + this.areaUnits = []; + }, + + _getDefaultDistanceUnitInfo: function(unit) { + for (var i = 0; i < this.defaultDistanceUnits.length; i++) { + var unitInfo = this.defaultDistanceUnits[i]; + if (unitInfo.unit === unit) { + return unitInfo; + } + } + return null; + }, + + _getDefaultAreaUnitInfo: function(unit) { + for (var i = 0; i < this.defaultAreaUnits.length; i++) { + var unitInfo = this.defaultAreaUnits[i]; + if (unitInfo.unit === unit) { + return unitInfo; + } + } + return null; + }, + + _getDistanceUnitInfo: function(unit) { + for (var i = 0; i < this.distanceUnits.length; i++) { + var unitInfo = this.distanceUnits[i]; + if (unitInfo.unit === unit) { + return unitInfo; + } + } + return null; + }, + + _getAreaUnitInfo: function(unit) { + for (var i = 0; i < this.areaUnits.length; i++) { + var unitInfo = this.areaUnits[i]; + if (unitInfo.unit === unit) { + return unitInfo; + } + } + return null; + }, + + _setMeasureVisibility: function() { + var display = (this.showMeasure.checked) ? 'block' : 'none'; + html.setStyle(this.areaMeasure, 'display', display); + 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; + + 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 //////////////////////////////////////////////////////////////////////////////////////////////////////// + _bindEvents: function() { + //bind DrawBox + this.own(on(this.drawBox, 'IconSelected', lang.hitch(this, this.drawBoxOnTypeSelected))); + this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this.drawBoxOnDrawEnd))); + + //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(); + } else if (this._editorConfig["graphicCurrent"]) { + //If in modification, update graphic symbology + this._editorConfig["graphicCurrent"].setSymbol(this.editorSymbolChooser.getSymbol()); + } + + //Phantom for marker + if (this.editorSymbolChooser.type == "marker") + this.editorUpdateMapPreview(this.editorSymbolChooser.getSymbol()); + + }))); + + //bind unit events + this.own(on(this.showMeasure, 'click', lang.hitch(this, this._setMeasureVisibility))); + + //hitch list event + this.listOnActionClick = lang.hitch(this, this.listOnActionClick); + //hitch import file loading + this.importOnFileLoad = lang.hitch(this, this.importOnFileLoad); + + //Bind draw plus event + this.editorUpdateTextPlus = lang.hitch(this, this.editorUpdateTextPlus); + this.editorTextPlusFontFamilyNode.on("change", this.editorUpdateTextPlus); + this.editorTextPlusAngleNode.on("change", this.editorUpdateTextPlus); + on(this.editorTextPlusBoldNode, "click", lang.hitch(this, function(evt) { + this._editorConfig["drawPlus"]["bold"] = !this._editorConfig["drawPlus"]["bold"]; + this._UTIL__enableClass(this.editorTextPlusBoldNode, 'selected', this._editorConfig["drawPlus"]["bold"]); + this.editorUpdateTextPlus(); + })); + on(this.editorTextPlusItalicNode, "click", lang.hitch(this, function(evt) { + this._editorConfig["drawPlus"]["italic"] = !this._editorConfig["drawPlus"]["italic"]; + this._UTIL__enableClass(this.editorTextPlusItalicNode, 'selected', this._editorConfig["drawPlus"]["italic"]); + this.editorUpdateTextPlus(); + })); + on(this.editorTextPlusUnderlineNode, "click", lang.hitch(this, function(evt) { + this._editorConfig["drawPlus"]["underline"] = !this._editorConfig["drawPlus"]["underline"]; + this._UTIL__enableClass(this.editorTextPlusUnderlineNode, 'selected', this._editorConfig["drawPlus"]["underline"]); + this.editorUpdateTextPlus(); + })); + this.onEditorTextPlusPlacementClick = lang.hitch(this, function(evt) { + if (!evt.target) + return; + + var selected = false; + for (var i in this._editorTextPlusPlacements) { + var is_this = (evt.target == this._editorTextPlusPlacements[i]); + + this._UTIL__enableClass(this._editorTextPlusPlacements[i], 'selected', is_this); + + if (is_this) + selected = this._editorTextPlusPlacements[i]; + } + if (!selected.title) + return; + var tab = selected.title.split(" "); + this._editorConfig["drawPlus"]["placement"] = { + "vertical": tab[0], + "horizontal": tab[1] + } + this.editorUpdateTextPlus(); + }); + this._editorTextPlusPlacements = [ + this.editorTextPlusPlacementTopLeft, + this.editorTextPlusPlacementTopCenter, + this.editorTextPlusPlacementTopRight, + this.editorTextPlusPlacementMiddleLeft, + this.editorTextPlusPlacementMiddleCenter, + this.editorTextPlusPlacementMiddleRight, + this.editorTextPlusPlacementBottomLeft, + this.editorTextPlusPlacementBottomCenter, + this.editorTextPlusPlacementBottomRight + ]; + for (var i in this._editorTextPlusPlacements) + on(this._editorTextPlusPlacements[i], "click", this.onEditorTextPlusPlacementClick); + + }, + + _menuInit: function() { + this._menuButtons = { + "add": this.menuAddButton, + "edit": this.menuEditButton, + "list": this.menuListButton, + "importExport": this.menuListImportExport + }; + + 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 + }); + html.place(this.TabViewStack.domNode, this.settingAllContent); + }, + + _initLocalStorage: function() { + if (!this.config.allowLocalStorage) + return; + + this._localStorageKey = + (this.config.localStorageKey) ? 'WebAppBuilder.2D.eDraw.' + this.config.localStorageKey : 'WebAppBuilder.2D.eDraw'; + + var content = localStore.get(this._localStorageKey); + + if (!content || !content.features || content.features.length < 1) + return; + + //Closure with timeout to be sure widget is ready + (function(widget) { + setTimeout( + function() { + widget.importJsonContent(content, "name", "description"); + widget.showMessage(widget.nls.localLoading); + }, 200); + })(this); + + }, + + _initDrawingPopupAndClick: function() { + //Set popup template + var infoTemplate = new esri.InfoTemplate("${name}", "${description}"); + this.drawBox.drawLayer.setInfoTemplate(infoTemplate); + + //Set draw click + this._onDrawClick = lang.hitch(this, function(evt) { + if (!evt.graphic) + return; + + this._editorConfig["graphicCurrent"] = evt.graphic; + this.setMode("list"); + }); + + //Allow click + this.allowPopup(true); + + }, + + _initUnitSelect: function() { + this._initDefaultUnits(); + this._initConfigUnits(); + var a = this.configDistanceUnits; + var b = this.defaultDistanceUnits; + this.distanceUnits = a.length > 0 ? a : b; + var c = this.configAreaUnits; + var d = this.defaultAreaUnits; + this.areaUnits = c.length > 0 ? c : d; + array.forEach(this.distanceUnits, lang.hitch(this, function(unitInfo) { + var option = { + value: unitInfo.unit, + label: unitInfo.label + }; + this.distanceUnitSelect.addOption(option); + })); + + array.forEach(this.areaUnits, lang.hitch(this, function(unitInfo) { + var option = { + value: unitInfo.unit, + label: unitInfo.label + }; + this.areaUnitSelect.addOption(option); + })); + }, + + _initDefaultUnits: function() { + this.defaultDistanceUnits = [{ + unit: 'KILOMETERS', + label: this.nls.kilometers + }, { + unit: 'MILES', + label: this.nls.miles + }, { + unit: 'METERS', + label: this.nls.meters + }, { + unit: 'NAUTICAL_MILES', + label: this.nls.nauticals + }, { + unit: 'FEET', + label: this.nls.feet + }, { + unit: 'YARDS', + label: this.nls.yards + }]; + + this.defaultAreaUnits = [{ + unit: 'SQUARE_KILOMETERS', + label: this.nls.squareKilometers + }, { + unit: 'SQUARE_MILES', + label: this.nls.squareMiles + }, { + unit: 'ACRES', + label: this.nls.acres + }, { + unit: 'HECTARES', + label: this.nls.hectares + }, { + unit: 'SQUARE_METERS', + label: this.nls.squareMeters + }, { + unit: 'SQUARE_FEET', + label: this.nls.squareFeet + }, { + unit: 'SQUARE_YARDS', + label: this.nls.squareYards + }]; + }, + + _initConfigUnits: function() { + array.forEach(this.config.distanceUnits, lang.hitch(this, function(unitInfo) { + var unit = unitInfo.unit; + if (esriUnits[unit]) { + var defaultUnitInfo = this._getDefaultDistanceUnitInfo(unit); + unitInfo.label = defaultUnitInfo.label; + this.configDistanceUnits.push(unitInfo); + } + })); + + array.forEach(this.config.areaUnits, lang.hitch(this, function(unitInfo) { + var unit = unitInfo.unit; + if (esriUnits[unit]) { + var defaultUnitInfo = this._getDefaultAreaUnitInfo(unit); + unitInfo.label = defaultUnitInfo.label; + this.configAreaUnits.push(unitInfo); + } + })); + }, + + //////////////////////////// WIDGET CORE METHODS /////////////////////////////////////////////////////////////////////////////////////// + + postMixInProperties: function() { + this.inherited(arguments); + this._resetUnitsArrays(); + }, + + postCreate: function() { + this.inherited(arguments); + + //Create symbol chooser + this.editorSymbolChooser = new SymbolChooser({ + "class": "full-width", + "type": "text", + "symbol": new SimpleMarkerSymbol() + }, + this.editorSymbolChooserDiv + ); + + this.drawBox.setMap(this.map); + + //Initialize menu + this._menuInit(); + + //Init measure units + this._initUnitSelect(); + + //Bind and hitch events + this._bindEvents(); + + //Prepare text plus + this._prepareTextPlus(); + + //load if drawings in localStorage + this._initLocalStorage(); + + //Popup or click init + this._initDrawingPopupAndClick(); + + //Create edit dijit + this._editorConfig["editToolbar"] = new Edit(this.map); + }, + + _prepareTextPlus: function() { + //Select central position in UI (text placement) + this._UTIL__enableClass(this._editorTextPlusPlacements[4], 'selected', true); + + //Manage availaible FontFamily + if (this.config.drawPlus && this.config.drawPlus.fontFamilies) { + if (this.config.drawPlus.fontFamilies.length > 0) { + this.editorTextPlusFontFamilyNode.set("options", this.config.drawPlus.fontFamilies).reset(); + } + } + + }, + + onOpen: function() { + if (this.drawBox.drawLayer.graphics.length > 0) + this.setMode("list"); + else + this.setMode("add1"); + }, + + onClose: function() { + this.editorResetGraphic(); + this.drawBox.deactivate(); + this.setInfoWindow(false); + this.editorEnableMapPreview(false); + this.editorActivateGeometryEdit(false); + this.map.infoWindow.hide(); + this.allowPopup(true); + }, + + destroy: function() { + if (this.drawBox) { + this.drawBox.destroy(); + this.drawBox = null; + } + if (this.editorSymbolChooser) { + this.editorSymbolChooser.destroy(); + this.editorSymbolChooser = null; + } + this.inherited(arguments); + }, + + ///////////////////////// UTILS METHODS //////////////////////////////////////////////////////////////////////////// + _UTIL__enableClass: function(elt, className, bool) { + if (elt.classList) { + if (bool) + elt.classList.add(className); + else + elt.classList.remove(className); + return; + } + elt.className = elt.className.replace(className, "").replace(" ", " ").trim(); + if (bool) + elt.className += className; + }, + + _UTIL__getParentByTag: function(el, tagName) { + tagName = tagName.toLowerCase(); + while (el && el.parentNode) { + el = el.parentNode; + if (el.tagName && el.tagName.toLowerCase() == tagName) { + return el; + } + } + return null; + } + + }); + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + }); \ No newline at end of file diff --git a/config.json b/config.json index a02983a..3a99e69 100644 --- a/config.json +++ b/config.json @@ -1,58 +1,83 @@ { - "exportFileName" : "myDrawing.json", - "confirmOnDelete" : true, - "allowImportExport" : true, - "allowLocalStorage" : true, - "localStorageKey" : false, - "drawPlus" : { - "fontFamilies" : [ - { "label": "Arial", "value": "Arial" }, - { "label": "Helvetica", "value": "Helvetica" }, - { "label": "Times New Roman", "value": "Times New Roman" }, - { "label": "Courier New", "value": "Courier New" } - ] - }, - "distanceUnits" : [{ - "unit" : "KILOMETERS", - "abbr" : "km" - }, { - "unit" : "MILES", - "abbr" : "mi" - }, { - "unit" : "METERS", - "abbr" : "m" - },{ - "unit" : "NAUTICAL_MILES", - "abbr" : "nm" - }, { - "unit" : "FEET", - "abbr" : "ft" - }, { - "unit" : "YARDS", - "abbr" : "yd" - } - ], - "areaUnits" : [{ - "unit" : "SQUARE_KILOMETERS", - "abbr" : "sq km" - }, { - "unit" : "SQUARE_MILES", - "abbr" : "sq mi" - }, { - "unit" : "ACRES", - "abbr" : "ac" - }, { - "unit" : "HECTARES", - "abbr" : "ha" - }, { - "unit" : "SQUARE_METERS", - "abbr" : "sq m" - }, { - "unit" : "SQUARE_FEET", - "abbr" : "sq ft" - }, { - "unit" : "SQUARE_YARDS", - "abbr" : "sq yd" - } - ] -} + "exportFileName": "myDrawing.json", + "confirmOnDelete": true, + "allowImportExport": true, + "allowLocalStorage": true, + "localStorageKey": false, + "drawPlus": { + "fontFamilies": [ + { + "label": "Arial", + "value": "Arial" + }, + { + "label": "Helvetica", + "value": "Helvetica" + }, + { + "label": "Times New Roman", + "value": "Times New Roman" + }, + { + "label": "Courier New", + "value": "Courier New" + } + ] + }, + "distanceUnits": [ + { + "unit": "KILOMETERS", + "abbr": "km" + }, + { + "unit": "MILES", + "abbr": "mi" + }, + { + "unit": "METERS", + "abbr": "m" + }, + { + "unit": "NAUTICAL_MILES", + "abbr": "nm" + }, + { + "unit": "FEET", + "abbr": "ft" + }, + { + "unit": "YARDS", + "abbr": "yd" + } + ], + "areaUnits": [ + { + "unit": "SQUARE_KILOMETERS", + "abbr": "sq km" + }, + { + "unit": "SQUARE_MILES", + "abbr": "sq mi" + }, + { + "unit": "ACRES", + "abbr": "ac" + }, + { + "unit": "HECTARES", + "abbr": "ha" + }, + { + "unit": "SQUARE_METERS", + "abbr": "sq m" + }, + { + "unit": "SQUARE_FEET", + "abbr": "sq ft" + }, + { + "unit": "SQUARE_YARDS", + "abbr": "sq yd" + } + ] +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index a1346b7..b7eea59 100644 --- a/css/style.css +++ b/css/style.css @@ -8,16 +8,16 @@ .jimu-widget-edraw .full-width { width: 100% !important; } -.jimu-widget-edraw .editor-add-message{ - margin-top:10px; - font-style:italic; +.jimu-widget-edraw .editor-add-message { + margin-top: 10px; + font-style: italic; } .jimu-widget-edraw .measure-section { margin-top: 12px; width: 100%; - margin-bottom: 12px; - padding-right: 3px; - padding-bottom: 10px; + margin-bottom: 12px; + padding-right: 3px; + padding-bottom: 10px; } .jimu-widget-edraw .area-units-tip { height: 30px; @@ -88,17 +88,13 @@ margin-right: 5px; width: 36px; } -.jimu-widget-edraw .menu-item-active:hover { -} - -.jimu-widget-edraw .hide-box{ - float:right; - position:absolute; - right:0; - top:0px; - font-size:1.1em; +.jimu-widget-edraw .menu-item-active:hover {} .jimu-widget-edraw .hide-box { + float: right; + position: absolute; + right: 0; + top: 0px; + font-size: 1.1em; } - .jimu-widget-edraw .hidden { display: none; } @@ -258,11 +254,9 @@ position: absolute; width: calc(100%); } - -.jimu-widget-edraw .bloc{ +.jimu-widget-edraw .bloc { background-color: rgba(78, 130, 138, 0.1); } - .jimu-widget-edraw .content hr { color: rgba(78, 130, 138, 0.6); } @@ -296,143 +290,137 @@ .jimu-widget-edraw .grey-button:hover { background-color: rgba(153, 153, 153, 1); } - -.jimu-widget-edraw .symbol-set-table{ - width:100%; +.jimu-widget-edraw .symbol-set-table { + width: 100%; } - - - .jimu-widget-edraw div.symbol-section.text-symbol-section > table > colgroup > col:nth-child(1) { - width: 80px; + width: 80px; } .jimu-widget-edraw .draw-plus.font-name { - width:145px; - height:30px; - float:left; + width: 145px; + height: 30px; + float: left; } .jimu-widget-edraw .draw-plus.text-angle { - width: 50%; + width: 50%; } .jimu-widget-edraw .draw-plus.text-angle-sample { - position: absolute; - margin-left: 30px; - margin-top: 7px; + position: absolute; + margin-left: 30px; + margin-top: 7px; } .jimu-widget-edraw .draw-plus.text-options { - float:left; - padding:4px; - height:30px; + float: left; + padding: 4px; + height: 30px; } .jimu-widget-edraw .draw-plus.text-option { - width:22px; - height:22px; - line-height: 22px; - text-align: center; - float: left; - border-style: solid; - border-width: 1px; - border-color: #808080; - margin-left: 5px; - font-family: serif; - font-size: 14px; - font-weight: bold; - display: table; + width: 22px; + height: 22px; + line-height: 22px; + text-align: center; + float: left; + border-style: solid; + border-width: 1px; + border-color: #808080; + margin-left: 5px; + font-family: serif; + font-size: 14px; + font-weight: bold; + display: table; } .jimu-widget-edraw .draw-plus.text-option.selected { - background-color: #C0C0C0; - border-width: 2px; - border-radius:2px; + background-color: #C0C0C0; + border-width: 2px; + border-radius: 2px; } -.jimu-widget-edraw .draw-plus.text-option:hover{ - background-color: #D1D1D1; - cursor:pointer; +.jimu-widget-edraw .draw-plus.text-option:hover { + background-color: #D1D1D1; + cursor: pointer; } - .jimu-widget-edraw .draw-plus.text-options div.draw-plus.text-option.text-italic { - font-style: italic; + font-style: italic; } .jimu-widget-edraw .draw-plus.text-options div.draw-plus.text-option.text-underline { - text-decoration: underline; + text-decoration: underline; } - .jimu-widget-edraw .draw-plus.text-place { - position:relative; - width:80px; - height:80px; - border-radius:5px; - border:1px solid lightgrey; -} -.jimu-widget-edraw .draw-plus.text-place span{ - position:absolute; - width:20px; - height:20px; - border-radius:3px; - border:1px solid grey; - background-color: #E4E4E4; - line-height:50%; -} -.jimu-widget-edraw .draw-plus.text-place span.selected{ - background-color: #C0C0C0; -} -.jimu-widget-edraw .draw-plus.text-place span:hover{ - background-color: #C8C8E4; - cursor:pointer; -} -.jimu-widget-edraw .draw-plus.text-place span.selected:hover{ - background-color: #B3B3D9; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-top-left{ - top:55px; - left:55px; - text-align: left; - vertical-align:top; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-top-center{ - top:55px; - left:30px; - text-align: center; - vertical-align:top; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-top-right{ - top:55px; - left:5px; - text-align: right; - vertical-align:top; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-middle-left{ - top:30px; - left:55px; - text-align: left; - line-height:100%; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-middle-center{ - top:30px; - left:30px; - text-align: center; - line-height:100%; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-middle-right{ - top:30px; - left:5px; - text-align: right; - line-height:100%; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-bottom-left{ - top:5px; - left:55px; - text-align: left; - padding-top: 10px; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-bottom-center{ - top:5px; - left:30px; - text-align: center; - padding-top: 10px; -} -.jimu-widget-edraw .draw-plus.text-place .text-place-bottom-right{ - top:5px; - left:5px; - text-align: right; - padding-top: 10px; + position: relative; + width: 80px; + height: 80px; + border-radius: 5px; + border: 1px solid lightgrey; +} +.jimu-widget-edraw .draw-plus.text-place span { + position: absolute; + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px solid grey; + background-color: #E4E4E4; + line-height: 50%; +} +.jimu-widget-edraw .draw-plus.text-place span.selected { + background-color: #C0C0C0; +} +.jimu-widget-edraw .draw-plus.text-place span:hover { + background-color: #C8C8E4; + cursor: pointer; +} +.jimu-widget-edraw .draw-plus.text-place span.selected:hover { + background-color: #B3B3D9; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-top-left { + top: 55px; + left: 55px; + text-align: left; + vertical-align: top; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-top-center { + top: 55px; + left: 30px; + text-align: center; + vertical-align: top; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-top-right { + top: 55px; + left: 5px; + text-align: right; + vertical-align: top; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-middle-left { + top: 30px; + left: 55px; + text-align: left; + line-height: 100%; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-middle-center { + top: 30px; + left: 30px; + text-align: center; + line-height: 100%; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-middle-right { + top: 30px; + left: 5px; + text-align: right; + line-height: 100%; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-bottom-left { + top: 5px; + left: 55px; + text-align: left; + padding-top: 10px; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-bottom-center { + top: 5px; + left: 30px; + text-align: center; + padding-top: 10px; +} +.jimu-widget-edraw .draw-plus.text-place .text-place-bottom-right { + top: 5px; + left: 5px; + text-align: right; + padding-top: 10px; } \ No newline at end of file diff --git a/manifest.json b/manifest.json index b19ce60..d634b24 100644 --- a/manifest.json +++ b/manifest.json @@ -1,10 +1,10 @@ { - "name": "eDraw", - "platform": "HTML", - "version": "1.1.3", - "wabVersion": "1.1", - "author": "Esri R&D Center Beijing modified by MAGIS NC", - "description": "Enhanced draw widget for WebApp Builder for Arcgis.", - "copyright": "", - "license": "http://www.apache.org/licenses/LICENSE-2.0" -} + "name": "eDraw", + "platform": "HTML", + "version": "1.1.3", + "wabVersion": "1.1", + "author": "Esri R&D Center Beijing modified by MAGIS NC", + "description": "Enhanced draw widget for WebApp Builder for Arcgis.", + "copyright": "", + "license": "http://www.apache.org/licenses/LICENSE-2.0" +} \ No newline at end of file diff --git a/nls/fr/strings.js b/nls/fr/strings.js index c2c03ea..2c2205b 100644 --- a/nls/fr/strings.js +++ b/nls/fr/strings.js @@ -1,86 +1,86 @@ define( - ({ - _widgetLabel: "Dessin", - selectDrawMode: "Sélectionner le mode de dessin", - clear: "Effacer", - point: "Point", - line: "Ligne", - polyline: "Polyligne", - freehandPolyline: "Polyligne à main levée", - triangle: "Triangle", - extent: "Enveloppe", - circle: "Cercle", - ellipse: "Ellipse", - polygon: "Polygone", - freehandPolygon: "Polygone à main levée", - text: "Texte", - textWarningMessage:"Le texte doit être saisi avant de placer le point sur la carte.", - style: "Style", - alpha: "Transparence", - width: "Largeur", - size: "Taille", - color: "Couleur", - markerColor: "Couleur du symbole ponctuel", - outlineColor: "Couleur du contour", - lineColor: "Couleur de ligne", - fillColor: "Couleur de remplissage", - showMeasurements: "Afficher les mesures", - areaUnits: "Unités de surface", - distanceUnits: "Unités de distance", - kilometers: "Kilomètres", - miles: "Miles", - meters: "Mètres", - nauticals: "Milles marins", - feet: "Pieds", - yards: "Yards", - squareKilometers: "Kilomètres carrés", - squareMiles: "Miles carrés", - acres: "Acres", - hectares: "Hectares", - squareMeters: "Mètres carrés", - squareFeet: "Pieds carrés", - squareYards: "Yards carrés", - confirmDrawDelete:"Ce dessin va être supprimé", - all:"Tous", - draws:'dessins', - addDrawTitle:'Ajouter un dessin', - editDrawTitle:'Modifier un dessin', - listDrawTitle:'Liste des dessins', - importExportTitle:'Importer ou exporter les dessins', - exportTitle:"Exporter les dessins", - importTitle:"Importer des dessins", - importErrorMessageNavigator:"Votre navigateur ne supporte pas cette fonctionnalité.", - importErrorWarningSelectFile:"Merci de sélectionner un fichier.", - 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).", - nameField:"Nom", - symbolField:"Symbol", - nameFieldDefaultValue:"Mon dessin", - descriptionField:"Description", - localLoading:"Vos derniers dessins ont été automatiquement chargés", - editLabel:"Modifier ce dessin", - deleteLabel:"Supprimer ce dessin", - upLabel:"Monter ce dessin", - downLabel:"Descendre ce dessin", - zoomLabel:"Zoomer sur ce dessin", - zoomAllLabel:"Zoomer sur tous les dessins", - saveButton:"Sauvegarder", - resetButton:"Réinitialiser", - cancelButton:"Annuler", - textAngle: 'Angle', - fontName: 'Police', - drawSampleRotatedText: 'angle', - boldTitle: 'Gras', - boldCharacter: 'B', - italicTitle: 'Italique', - italicCharacter: 'I', - underlineTitle: 'Souligné', - underlineCharacter: 'U', - addMessage:'Vous pouvez maintenant faire votre dessin sur la carte', - 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' - }) + ({ + _widgetLabel: "Dessin", + selectDrawMode: "Sélectionner le mode de dessin", + clear: "Effacer", + point: "Point", + line: "Ligne", + polyline: "Polyligne", + freehandPolyline: "Polyligne à main levée", + triangle: "Triangle", + extent: "Enveloppe", + circle: "Cercle", + ellipse: "Ellipse", + polygon: "Polygone", + freehandPolygon: "Polygone à main levée", + text: "Texte", + textWarningMessage: "Le texte doit être saisi avant de placer le point sur la carte.", + style: "Style", + alpha: "Transparence", + width: "Largeur", + size: "Taille", + color: "Couleur", + markerColor: "Couleur du symbole ponctuel", + outlineColor: "Couleur du contour", + lineColor: "Couleur de ligne", + fillColor: "Couleur de remplissage", + showMeasurements: "Afficher les mesures", + areaUnits: "Unités de surface", + distanceUnits: "Unités de distance", + kilometers: "Kilomètres", + miles: "Miles", + meters: "Mètres", + nauticals: "Milles marins", + feet: "Pieds", + yards: "Yards", + squareKilometers: "Kilomètres carrés", + squareMiles: "Miles carrés", + acres: "Acres", + hectares: "Hectares", + squareMeters: "Mètres carrés", + squareFeet: "Pieds carrés", + squareYards: "Yards carrés", + confirmDrawDelete: "Ce dessin va être supprimé", + all: "Tous", + draws: 'dessins', + addDrawTitle: 'Ajouter un dessin', + editDrawTitle: 'Modifier un dessin', + listDrawTitle: 'Liste des dessins', + importExportTitle: 'Importer ou exporter les dessins', + exportTitle: "Exporter les dessins", + importTitle: "Importer des dessins", + importErrorMessageNavigator: "Votre navigateur ne supporte pas cette fonctionnalité.", + importErrorWarningSelectFile: "Merci de sélectionner un fichier.", + 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).", + nameField: "Nom", + symbolField: "Symbol", + nameFieldDefaultValue: "Mon dessin", + descriptionField: "Description", + localLoading: "Vos derniers dessins ont été automatiquement chargés", + editLabel: "Modifier ce dessin", + deleteLabel: "Supprimer ce dessin", + upLabel: "Monter ce dessin", + downLabel: "Descendre ce dessin", + zoomLabel: "Zoomer sur ce dessin", + zoomAllLabel: "Zoomer sur tous les dessins", + saveButton: "Sauvegarder", + resetButton: "Réinitialiser", + cancelButton: "Annuler", + textAngle: 'Angle', + fontName: 'Police', + drawSampleRotatedText: 'angle', + boldTitle: 'Gras', + boldCharacter: 'B', + italicTitle: 'Italique', + italicCharacter: 'I', + underlineTitle: 'Souligné', + underlineCharacter: 'U', + addMessage: 'Vous pouvez maintenant faire votre dessin sur la carte', + 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' + }) ); \ No newline at end of file diff --git a/nls/strings.js b/nls/strings.js index 7904232..8b973f1 100644 --- a/nls/strings.js +++ b/nls/strings.js @@ -1,112 +1,112 @@ define({ - root: ({ - _widgetLabel: "Draw", - selectDrawMode: "Select drawing mode", - clear: "Clear", - point: "Point", - line: "Line", - polyline: "Polyline", - freehandPolyline: "Freehand Polyline", - triangle: "Triangle", - extent: "Envelope", - circle: "Circle", - ellipse: "Ellipse", - polygon: "Polygon", - freehandPolygon: "Freehand Polygon", - text: "Text", - textWarningMessage:"Text must be written before placing the point on map", - style: "Style", - alpha: "Transparency", - width: "Width", - size: "Size", - color: "Color", - markerColor: "Marker Color", - outlineColor: "Outline Color", - lineColor: "Line Color", - fillColor: "Fill Color", - showMeasurements: "Show Measurements", - areaUnits: "Area Units", - distanceUnits: "Distance Units", - kilometers: "Kilometers", - miles: "Miles", - meters: "Meters", - nauticals: "Nautical miles", - feet: "Feet", - yards: "Yards", - squareKilometers: "Square kilometers", - squareMiles: "Square miles", - acres: "Acres", - hectares: "Hectares", - squareMeters: "Square meters", - squareFeet: "Square feet", - squareYards: "Square yards", - confirmDrawDelete:"This drawing will be deleted", - all:"All", - draws:'drawings', - addDrawTitle:'Add a drawing', - editDrawTitle:'Edit a drawing', - listDrawTitle:'Drawings list', - importExportTitle:'Import or export drawings', - exportTitle:"Export draws", - importTitle:"Import draws", - importErrorMessageNavigator:"Your navigator doesn't support this functionnality.", - importErrorWarningSelectFile:"Please select a file.", - importWarningNoDrawings:"No drawings to load", - importErrorFileStructure:"The file structure doesn't match.", - importWarningNoExport0Draw:"No export of the file (No drawing to export).", - nameField:"Name", - symbolField:"Symbol", - nameFieldDefaultValue:"My drawing", - descriptionField:"Description", - localLoading:"Your last drawings were loaded", - editLabel:"Update this drawing", - deleteLabel:"Delete this drawing", - upLabel:"Move this drawing up", - downLabel:"Move this drawing down", - zoomLabel:"Zoom on this drawing", - zoomAllLabel:"Zoom on all drawings", - saveButton:"Save", - resetButton:"Reset", - cancelButton:"Cancel", - textAngle: 'Text Angle', - fontName: 'Font Name', - drawSampleRotatedText: 'angle', - boldTitle: 'Bold', - boldCharacter: 'B', - italicTitle: 'Italic', - italicCharacter: 'I', - underlineTitle: 'Underline', - underlineCharacter: 'U', - addMessage:'You can now make your drawing on map', - editMessage:'NB : you can modify/moove geometry on map', - snappingMessage:'NB : snapping is allowed (use CTRL)', - hideOption:'Hide drawings', - textPlacement:'Placement' - }), - "ar": 1, - "cs": 1, - "da": 1, - "de": 1, - "es": 1, - "et": 1, - "fi": 1, - "fr": 1, - "he": 1, - "it": 1, - "ja": 1, - "ko": 1, - "lt": 1, - "lv": 1, - "nb": 1, - "nl": 1, - "pl": 1, - "pt-br": 1, - "pt-pt": 1, - "ro": 1, - "ru": 1, - "sv": 1, - "th": 1, - "tr": 1, - "vi": 1, - "zh-cn": 1 + root: ({ + _widgetLabel: "Draw", + selectDrawMode: "Select drawing mode", + clear: "Clear", + point: "Point", + line: "Line", + polyline: "Polyline", + freehandPolyline: "Freehand Polyline", + triangle: "Triangle", + extent: "Envelope", + circle: "Circle", + ellipse: "Ellipse", + polygon: "Polygon", + freehandPolygon: "Freehand Polygon", + text: "Text", + textWarningMessage: "Text must be written before placing the point on map", + style: "Style", + alpha: "Transparency", + width: "Width", + size: "Size", + color: "Color", + markerColor: "Marker Color", + outlineColor: "Outline Color", + lineColor: "Line Color", + fillColor: "Fill Color", + showMeasurements: "Show Measurements", + areaUnits: "Area Units", + distanceUnits: "Distance Units", + kilometers: "Kilometers", + miles: "Miles", + meters: "Meters", + nauticals: "Nautical miles", + feet: "Feet", + yards: "Yards", + squareKilometers: "Square kilometers", + squareMiles: "Square miles", + acres: "Acres", + hectares: "Hectares", + squareMeters: "Square meters", + squareFeet: "Square feet", + squareYards: "Square yards", + confirmDrawDelete: "This drawing will be deleted", + all: "All", + draws: 'drawings', + addDrawTitle: 'Add a drawing', + editDrawTitle: 'Edit a drawing', + listDrawTitle: 'Drawings list', + importExportTitle: 'Import or export drawings', + exportTitle: "Export draws", + importTitle: "Import draws", + importErrorMessageNavigator: "Your navigator doesn't support this functionnality.", + importErrorWarningSelectFile: "Please select a file.", + importWarningNoDrawings: "No drawings to load", + importErrorFileStructure: "The file structure doesn't match.", + importWarningNoExport0Draw: "No export of the file (No drawing to export).", + nameField: "Name", + symbolField: "Symbol", + nameFieldDefaultValue: "My drawing", + descriptionField: "Description", + localLoading: "Your last drawings were loaded", + editLabel: "Update this drawing", + deleteLabel: "Delete this drawing", + upLabel: "Move this drawing up", + downLabel: "Move this drawing down", + zoomLabel: "Zoom on this drawing", + zoomAllLabel: "Zoom on all drawings", + saveButton: "Save", + resetButton: "Reset", + cancelButton: "Cancel", + textAngle: 'Text Angle', + fontName: 'Font Name', + drawSampleRotatedText: 'angle', + boldTitle: 'Bold', + boldCharacter: 'B', + italicTitle: 'Italic', + italicCharacter: 'I', + underlineTitle: 'Underline', + underlineCharacter: 'U', + addMessage: 'You can now make your drawing on map', + editMessage: 'NB : you can modify/moove geometry on map', + snappingMessage: 'NB : snapping is allowed (use CTRL)', + hideOption: 'Hide drawings', + textPlacement: 'Placement' + }), + "ar": 1, + "cs": 1, + "da": 1, + "de": 1, + "es": 1, + "et": 1, + "fi": 1, + "fr": 1, + "he": 1, + "it": 1, + "ja": 1, + "ko": 1, + "lt": 1, + "lv": 1, + "nb": 1, + "nl": 1, + "pl": 1, + "pt-br": 1, + "pt-pt": 1, + "ro": 1, + "ru": 1, + "sv": 1, + "th": 1, + "tr": 1, + "vi": 1, + "zh-cn": 1 }); \ No newline at end of file diff --git a/setting/Setting.html b/setting/Setting.html index 6a7349d..9759458 100644 --- a/setting/Setting.html +++ b/setting/Setting.html @@ -1,69 +1,60 @@
-
    -
  • - - - - ${nls.exportFileName} - -
    • -
  • - - - - ${nls.confirmOnDeleteLabel} - -
    • -
  • - - - - ${nls.allowImportExportLabel} - -
    • -
  • - - - - ${nls.allowLocalStorageLabel} - -
    • -
  • - - - - - ${nls.localStorageKeyLabel} - ? - - -
    • -
- -
- -
- - ${nls.addFontFamily} -
-
- -
- -
-
-
- - ${nls.addDistance} -
-
-
-
-
- - ${nls.addArea} -
-
-
-
+
    +
  • + + + + ${nls.exportFileName} +
    • +
  • + + + + ${nls.confirmOnDeleteLabel} +
    • +
  • + + + + ${nls.allowImportExportLabel} +
    • +
  • + + + + ${nls.allowLocalStorageLabel} +
    • +
  • + + + + + ${nls.localStorageKeyLabel} + ? + +
    • +
+
+
+ + ${nls.addFontFamily} +
+
+
+
+
+
+ + ${nls.addDistance} +
+
+
+
+
+ + ${nls.addArea} +
+
+
+
\ No newline at end of file diff --git a/setting/Setting.js b/setting/Setting.js index 4cf1b76..29b24a3 100644 --- a/setting/Setting.js +++ b/setting/Setting.js @@ -13,486 +13,520 @@ // See the License for the specific language governing permissions and // limitations under the License. /////////////////////////////////////////////////////////////////////////// - define([ - 'dojo/_base/declare', - 'dojo/_base/lang', - 'dojo/_base/array', - 'dojo/_base/html', - 'dojo/_base/query', - 'dojo/on', - 'dijit/_WidgetsInTemplateMixin', - 'jimu/BaseWidgetSetting', - 'jimu/dijit/TabContainer', - 'jimu/dijit/SimpleTable', - 'jimu/dijit/Message', - 'jimu/utils', - 'dijit/form/Select' - ], - function(declare, lang, array, html, query, on, _WidgetsInTemplateMixin, BaseWidgetSetting, - TabContainer, SimpleTable,Message, jimuUtils, Select) { - return declare([BaseWidgetSetting, _WidgetsInTemplateMixin], { - baseClass: 'jimu-widget-draw-setting', - distanceUnits:null, - areaUnits:null, - - localStorageKeyMessage:function(){ - new Message({message:this.nls.localStorageKeyInfo}); - - }, - - postMixInProperties:function(){ - this.inherited(arguments); - - this.distanceUnits = [{ - value: 'KILOMETERS', - label: this.nls.kilometers, - abbr: this.nls.kilometersAbbreviation||'km', - conversion: jimuUtils.localizeNumber(0.001, {places: 3}) - }, { - value: 'MILES', - label: this.nls.miles, - abbr: this.nls.milesAbbreviation||'mi', - conversion: jimuUtils.localizeNumber(0.000621, {places: 6}) - }, { - value: 'METERS', - label: this.nls.meters, - abbr: this.nls.metersAbbreviation||'m', - conversion: jimuUtils.localizeNumber(1) - }, { - value: 'NAUTICAL_MILES', - label: this.nls.nauticals, - abbr: this.nls.nauticalsAbbreviation||'nm', - conversion: jimuUtils.localizeNumber(0.00053957, {places: 7}) - }, { - value: 'FEET', - label: this.nls.feet, - abbr: this.nls.feetAbbreviation||'ft', - conversion: jimuUtils.localizeNumber(3.2808, {places: 4}) - }, { - value: 'YARDS', - label: this.nls.yards, - abbr: this.nls.yardsAbbreviation||'yd', - conversion: jimuUtils.localizeNumber(1.0936133, {places: 7}) - }]; - - this.areaUnits = [{ - value: 'SQUARE_KILOMETERS', - label: this.nls.squareKilometers, - abbr: this.nls.squareKilometersAbbreviation||'sq km', - conversion: jimuUtils.localizeNumber(0.000001, {places: 6}) - }, { - value: 'SQUARE_MILES', - label: this.nls.squareMiles, - abbr: this.nls.squareMilesAbbreviation||'sq mi', - conversion: jimuUtils.localizeNumber(3.861021, {places: 6}) + 'e-7' - //0.0000003861021 - }, { - value: 'ACRES', - label: this.nls.acres, - abbr: this.nls.acresAbbreviation||'ac', - conversion: jimuUtils.localizeNumber(0.00024710538147, {places: 14}) - }, { - value: 'HECTARES', - label: this.nls.hectares, - abbr: this.nls.hectaresAbbreviation||'ha', - conversion: jimuUtils.localizeNumber(0.0001, {places: 4}) - }, { - value: 'SQUARE_METERS', - label: this.nls.squareMeters, - abbr: this.nls.squareMetersAbbreviation||'sq m', - conversion: jimuUtils.localizeNumber(1) - }, { - value: 'SQUARE_FEET', - label: this.nls.squareFeet, - abbr: this.nls.squareFeetAbbreviation||'sq ft', - conversion: jimuUtils.localizeNumber(10.763910417, {places: 9}) - }, { - value: 'SQUARE_YARDS', - label: this.nls.squareYards, - abbr: this.nls.squareYardsAbbreviation||'sq yd', - conversion: jimuUtils.localizeNumber(1.19599005, {places: 8}) - }]; - }, - - postCreate: function() { - this.inherited(arguments); - this.own(on(this.btnAddDistance,'click',lang.hitch(this,this._addDistance))); - this.own(on(this.btnAddArea,'click',lang.hitch(this,this._addArea))); - this.own(on(this.btnAddFontFamily,'click',lang.hitch(this,this._addFontFamily))); - this.own(on(this.distanceTable,'row-delete',lang.hitch(this,function(tr){ - if(tr.select){ - tr.select.destroy(); - delete tr.select; - } - this._resetDistanceSelectOptions(); - }))); - this.own(on(this.areaTable,'row-delete',lang.hitch(this,function(tr){ - if(tr.select){ - tr.select.destroy(); - delete tr.select; - } - this._resetAreaSelectOptions(); - }))); - this.setConfig(this.config); - }, - - startup: function() { - this.inherited(arguments); - - this.tabContainer = new TabContainer({ - tabs: [{ - title: this.nls.distance, - content: this.distanceTabNode - }, { - title: this.nls.area, - content: this.areaTabNode - }], - isNested: true - }, this.content); - this.tabContainer.startup(); - }, - - setConfig: function(config) { - this.config = config; - this._setDistanceTable(this.config.distanceUnits); - this._setAreaTable(this.config.areaUnits); - this._setTextPlusFontFamilyTable(this.config); - - 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.allowLocalStorageInput.checked = (config.allowLocalStorage) ? true : false; - this.localStorageKeyInput.value = (config.localStorageKey) ? config.localStorageKey : ''; - - //Text plus FontFamily - this._setTextPlusFontFamilyTable(config); - }, - - _setTextPlusFontFamilyTable:function(config){ - var options = - (config.drawPlus && config.drawPlus.fontFamilies && config.drawPlus.fontFamilies.length > 0) - ? config.drawPlus.fontFamilies - : [ - { "label": "Arial", "value": "Arial" }, - { "label": "Helvetica", "value": "Helvetica" }, - { "label": "Times New Roman", "value": "Times New Roman" }, - { "label": "Courier New", "value": "Courier New" } - ]; - - this.textPlusFontFamilyTable.clear(); - for(var i in options) - this.textPlusFontFamilyTable.addRow(options[i]); - }, - - _setDistanceTable:function(distanceUnits){ - this.distanceTable.clear(); - array.forEach(distanceUnits,lang.hitch(this,function(item){ - var defaultUnitInfo = this._getDistanceUnitInfo(item.unit); - if(!defaultUnitInfo){ - return; - } - defaultUnitInfo.abbr = item.abbr; - this._addDistanceUnitRow(defaultUnitInfo); - })); - }, - - _setAreaTable:function(areaUnits){ - this.areaTable.clear(); - array.forEach(areaUnits,lang.hitch(this,function(item){ - var defaultUnitInfo = this._getAreaUnitInfo(item.unit); - if(!defaultUnitInfo){ - return; - } - defaultUnitInfo.abbr = item.abbr; - this._addAreaUnitRow(defaultUnitInfo); - })); - }, - - getConfig: function() { - var config = { - distanceUnits:[], - areaUnits:[] - }; - config.distanceUnits = this._getDistanceConfig(); - config.areaUnits = this._getAreaConfig(); - - config.exportFileName = (this.exportFileNameInput.value.trim() != "") ? this.exportFileNameInput.value.trim() : this.nls.exportFileName; - config.confirmOnDelete = this.confirmOnDeleteInput.checked; - config.allowImportExport = this.allowImportExportInput.checked; - config.allowLocalStorage = this.allowLocalStorageInput.checked; - var key = this.localStorageKeyInput.value.trim(); - config.localStorageKey = (key=="") ? false : key; - - if(!config["drawPlus"]) - config["drawPlus"] = {}; - var FontFamilyOptions = array.map(this.textPlusFontFamilyTable.getRows(),lang.hitch(this,function(tr){ - var data = this.textPlusFontFamilyTable.getRowData(tr); - return { - "value":data.value, - "label":data.label - } - })); - config["drawPlus"]["fontFamilies"] = FontFamilyOptions; - - return config; - }, - - _getDistanceConfig:function(){ - var result = []; - var trs = this.distanceTable.getRows(); - result = array.map(trs,lang.hitch(this,function(tr){ - var data = this.distanceTable.getRowData(tr); - var select = tr.select; - var unitInfo = { - unit:select.get('value'), - abbr:data.abbr - }; - return unitInfo; - })); - return result; - }, - - _getAreaConfig:function(){ - var result = []; - var trs = this.areaTable.getRows(); - result = array.map(trs,lang.hitch(this,function(tr){ - var data = this.areaTable.getRowData(tr); - var select = tr.select; - var unitInfo = { - unit:select.get('value'), - abbr:data.abbr - }; - return unitInfo; - })); - return result; - }, - - _getAllDistanceUnitValues:function(){ - var distanceUnitValues = array.map(this.distanceUnits,lang.hitch(this,function(item){ - return item.value; - })); - return distanceUnitValues; - }, - - _getUsedDistanceUnitValues:function(){ - var trs = this.distanceTable.getRows(); - var usedDistanceUnitValues = array.map(trs,lang.hitch(this,function(tr){ - return tr.select.get('value'); - })); - return usedDistanceUnitValues; - }, - - _getNotUsedDistanceUnitValues:function(){ - var allValues = this._getAllDistanceUnitValues(); - var usedValues = this._getUsedDistanceUnitValues(); - var notUsedValues = array.filter(allValues,lang.hitch(this,function(item){ - return array.indexOf(usedValues,item) < 0; - })); - return notUsedValues; - }, - - _getDistanceUnitInfo:function(value){ - var result = null; - var units = array.filter(this.distanceUnits,lang.hitch(this,function(unit){ - return unit.value === value; - })); - if(units.length > 0){ - result = lang.mixin({},units[0]); - } - return result; - }, - - _addFontFamily:function(){ - console.log("Add font family"); - var data = {"label": "New font family", "value": "New font family" }; - var result = this.textPlusFontFamilyTable.addRow(data); - if(result) - this.textPlusFontFamilyTable.editRow(result.tr, data); - }, - - _addDistance:function(){ - var notUsedValues = this._getNotUsedDistanceUnitValues(); - if(notUsedValues.length === 0){ - return; - } - var value = notUsedValues[0]; - var unitInfo = this._getDistanceUnitInfo(value); - this._addDistanceUnitRow(unitInfo); - }, - - _addDistanceUnitRow:function(unitInfo){ - var rowData = { - abbr:unitInfo.abbr, - conversion:unitInfo.conversion - }; - var result = this.distanceTable.addRow(rowData); - if(result.success && result.tr){ - var tr = result.tr; - var td = query('.simple-table-td',tr)[0]; - html.setStyle(td,"verticalAlign","middle"); - var select = new Select({style:{ - width:"100%", - height:"30px" - }}); - select.placeAt(td); - select.startup(); - select.addOption({ - value:unitInfo.value, - label:unitInfo.label, - selected:true - }); - this.own(on(select,'change',lang.hitch(this,this._resetDistanceSelectOptions))); - tr.select = select; - } - this._resetDistanceSelectOptions(); - }, - - _showCorrectDistanceInfoBySelectedOption:function(tr){ - var select = tr.select; - var unitInfo = this._getDistanceUnitInfo(select.value); - var rowData = { - abbr:unitInfo.abbr, - conversion:unitInfo.conversion - }; - this.distanceTable.editRow(tr,rowData); - }, - - _resetDistanceSelectOptions:function(){ - var trs = this.distanceTable.getRows(); - var selects = array.map(trs,lang.hitch(this,function(tr){ - return tr.select; - })); - var notUsedValues = this._getNotUsedDistanceUnitValues(); - var notUsedUnitsInfo = array.map(notUsedValues,lang.hitch(this,function(value){ - return this._getDistanceUnitInfo(value); - })); - array.forEach(selects,lang.hitch(this,function(select,index){ - var currentValue = select.get('value'); - var notSelectedOptions=array.filter(select.getOptions(),lang.hitch(this,function(option){ - return option.value !== currentValue; - })); - select.removeOption(notSelectedOptions); - array.forEach(notUsedUnitsInfo,lang.hitch(this,function(unitInfo){ - select.addOption({ - value:unitInfo.value, - label:unitInfo.label - }); - })); - select.set('value',currentValue); - var tr = trs[index]; - this._showCorrectDistanceInfoBySelectedOption(tr); - })); - }, - - _getAllAreaUnitValues:function(){ - var areaUnitValues = array.map(this.areaUnits,lang.hitch(this,function(item){ - return item.value; - })); - return areaUnitValues; - }, - - _getUsedAreaUnitValues:function(){ - var trs = this.areaTable.getRows(); - var usedAreaUnitValues = array.map(trs,lang.hitch(this,function(tr){ - return tr.select.get('value'); - })); - return usedAreaUnitValues; - }, - - _getNotUsedAreaUnitValues:function(){ - var allValues = this._getAllAreaUnitValues(); - var usedValues = this._getUsedAreaUnitValues(); - var notUsedValues = array.filter(allValues,lang.hitch(this,function(item){ - return array.indexOf(usedValues,item) < 0; - })); - return notUsedValues; - }, - - _getAreaUnitInfo:function(value){ - var result = null; - var units = array.filter(this.areaUnits,lang.hitch(this,function(unit){ - return unit.value === value; - })); - if(units.length > 0){ - result = lang.mixin({},units[0]); - } - return result; - }, - - _addArea:function(){ - var notUsedValues = this._getNotUsedAreaUnitValues(); - if(notUsedValues.length === 0){ - return; - } - var value = notUsedValues[0]; - var unitInfo = this._getAreaUnitInfo(value); - this._addAreaUnitRow(unitInfo); - }, - - _addAreaUnitRow:function(unitInfo){ - var rowData = { - abbr:unitInfo.abbr, - conversion:unitInfo.conversion - }; - var result = this.areaTable.addRow(rowData); - if(result.success && result.tr){ - var tr = result.tr; - var td = query('.simple-table-td',tr)[0]; - html.setStyle(td,"verticalAlign","middle"); - var select = new Select({style:{ - width:"100%", - height:"30px" - }}); - select.placeAt(td); - select.startup(); - select.addOption({ - value:unitInfo.value, - label:unitInfo.label, - selected:true - }); - this.own(on(select,'change',lang.hitch(this,this._resetAreaSelectOptions))); - tr.select = select; - } - this._resetAreaSelectOptions(); - }, - - _showCorrectAreaInfoBySelectedOption:function(tr){ - var select = tr.select; - var unitInfo = this._getAreaUnitInfo(select.value); - var rowData = { - abbr:unitInfo.abbr, - conversion:unitInfo.conversion - }; - this.areaTable.editRow(tr,rowData); - }, - - _resetAreaSelectOptions:function(){ - var trs = this.areaTable.getRows(); - var selects = array.map(trs,lang.hitch(this,function(tr){ - return tr.select; - })); - var notUsedValues = this._getNotUsedAreaUnitValues(); - var notUsedUnitsInfo = array.map(notUsedValues,lang.hitch(this,function(value){ - return this._getAreaUnitInfo(value); - })); - array.forEach(selects,lang.hitch(this,function(select,index){ - var currentValue = select.get('value'); - var notSelectedOptions=array.filter(select.getOptions(),lang.hitch(this,function(option){ - return option.value !== currentValue; - })); - select.removeOption(notSelectedOptions); - array.forEach(notUsedUnitsInfo,lang.hitch(this,function(unitInfo){ - select.addOption({ - value:unitInfo.value, - label:unitInfo.label - }); - })); - select.set('value',currentValue); - var tr = trs[index]; - this._showCorrectAreaInfoBySelectedOption(tr); - })); - } - - }); - }); \ No newline at end of file + 'dojo/_base/declare', + 'dojo/_base/lang', + 'dojo/_base/array', + 'dojo/_base/html', + 'dojo/_base/query', + 'dojo/on', + 'dijit/_WidgetsInTemplateMixin', + 'jimu/BaseWidgetSetting', + 'jimu/dijit/TabContainer', + 'jimu/dijit/SimpleTable', + 'jimu/dijit/Message', + 'jimu/utils', + 'dijit/form/Select' + ], + function(declare, lang, array, html, query, on, _WidgetsInTemplateMixin, BaseWidgetSetting, TabContainer, SimpleTable, Message, jimuUtils, Select) { + return declare([BaseWidgetSetting, _WidgetsInTemplateMixin], { + baseClass: 'jimu-widget-draw-setting', + distanceUnits: null, + areaUnits: null, + + localStorageKeyMessage: function() { + new Message({ + message: this.nls.localStorageKeyInfo + }); + + }, + + postMixInProperties: function() { + this.inherited(arguments); + + this.distanceUnits = [{ + value: 'KILOMETERS', + label: this.nls.kilometers, + abbr: this.nls.kilometersAbbreviation || 'km', + conversion: jimuUtils.localizeNumber(0.001, { + places: 3 + }) + }, { + value: 'MILES', + label: this.nls.miles, + abbr: this.nls.milesAbbreviation || 'mi', + conversion: jimuUtils.localizeNumber(0.000621, { + places: 6 + }) + }, { + value: 'METERS', + label: this.nls.meters, + abbr: this.nls.metersAbbreviation || 'm', + conversion: jimuUtils.localizeNumber(1) + }, { + value: 'NAUTICAL_MILES', + label: this.nls.nauticals, + abbr: this.nls.nauticalsAbbreviation || 'nm', + conversion: jimuUtils.localizeNumber(0.00053957, { + places: 7 + }) + }, { + value: 'FEET', + label: this.nls.feet, + abbr: this.nls.feetAbbreviation || 'ft', + conversion: jimuUtils.localizeNumber(3.2808, { + places: 4 + }) + }, { + value: 'YARDS', + label: this.nls.yards, + abbr: this.nls.yardsAbbreviation || 'yd', + conversion: jimuUtils.localizeNumber(1.0936133, { + places: 7 + }) + }]; + + this.areaUnits = [{ + value: 'SQUARE_KILOMETERS', + label: this.nls.squareKilometers, + abbr: this.nls.squareKilometersAbbreviation || 'sq km', + conversion: jimuUtils.localizeNumber(0.000001, { + places: 6 + }) + }, { + value: 'SQUARE_MILES', + label: this.nls.squareMiles, + abbr: this.nls.squareMilesAbbreviation || 'sq mi', + conversion: jimuUtils.localizeNumber(3.861021, { + places: 6 + }) + 'e-7' + //0.0000003861021 + }, { + value: 'ACRES', + label: this.nls.acres, + abbr: this.nls.acresAbbreviation || 'ac', + conversion: jimuUtils.localizeNumber(0.00024710538147, { + places: 14 + }) + }, { + value: 'HECTARES', + label: this.nls.hectares, + abbr: this.nls.hectaresAbbreviation || 'ha', + conversion: jimuUtils.localizeNumber(0.0001, { + places: 4 + }) + }, { + value: 'SQUARE_METERS', + label: this.nls.squareMeters, + abbr: this.nls.squareMetersAbbreviation || 'sq m', + conversion: jimuUtils.localizeNumber(1) + }, { + value: 'SQUARE_FEET', + label: this.nls.squareFeet, + abbr: this.nls.squareFeetAbbreviation || 'sq ft', + conversion: jimuUtils.localizeNumber(10.763910417, { + places: 9 + }) + }, { + value: 'SQUARE_YARDS', + label: this.nls.squareYards, + abbr: this.nls.squareYardsAbbreviation || 'sq yd', + conversion: jimuUtils.localizeNumber(1.19599005, { + places: 8 + }) + }]; + }, + + postCreate: function() { + this.inherited(arguments); + this.own(on(this.btnAddDistance, 'click', lang.hitch(this, this._addDistance))); + this.own(on(this.btnAddArea, 'click', lang.hitch(this, this._addArea))); + this.own(on(this.btnAddFontFamily, 'click', lang.hitch(this, this._addFontFamily))); + this.own(on(this.distanceTable, 'row-delete', lang.hitch(this, function(tr) { + if (tr.select) { + tr.select.destroy(); + delete tr.select; + } + this._resetDistanceSelectOptions(); + }))); + this.own(on(this.areaTable, 'row-delete', lang.hitch(this, function(tr) { + if (tr.select) { + tr.select.destroy(); + delete tr.select; + } + this._resetAreaSelectOptions(); + }))); + this.setConfig(this.config); + }, + + startup: function() { + this.inherited(arguments); + + this.tabContainer = new TabContainer({ + tabs: [{ + title: this.nls.distance, + content: this.distanceTabNode + }, { + title: this.nls.area, + content: this.areaTabNode + }], + isNested: true + }, this.content); + this.tabContainer.startup(); + }, + + setConfig: function(config) { + this.config = config; + this._setDistanceTable(this.config.distanceUnits); + this._setAreaTable(this.config.areaUnits); + this._setTextPlusFontFamilyTable(this.config); + + 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.allowLocalStorageInput.checked = (config.allowLocalStorage) ? true : false; + this.localStorageKeyInput.value = (config.localStorageKey) ? config.localStorageKey : ''; + + //Text plus FontFamily + this._setTextPlusFontFamilyTable(config); + }, + + _setTextPlusFontFamilyTable: function(config) { + var options = + (config.drawPlus && config.drawPlus.fontFamilies && config.drawPlus.fontFamilies.length > 0) ? config.drawPlus.fontFamilies : [{ + "label": "Arial", + "value": "Arial" + }, { + "label": "Helvetica", + "value": "Helvetica" + }, { + "label": "Times New Roman", + "value": "Times New Roman" + }, { + "label": "Courier New", + "value": "Courier New" + }]; + + this.textPlusFontFamilyTable.clear(); + for (var i in options) + this.textPlusFontFamilyTable.addRow(options[i]); + }, + + _setDistanceTable: function(distanceUnits) { + this.distanceTable.clear(); + array.forEach(distanceUnits, lang.hitch(this, function(item) { + var defaultUnitInfo = this._getDistanceUnitInfo(item.unit); + if (!defaultUnitInfo) { + return; + } + defaultUnitInfo.abbr = item.abbr; + this._addDistanceUnitRow(defaultUnitInfo); + })); + }, + + _setAreaTable: function(areaUnits) { + this.areaTable.clear(); + array.forEach(areaUnits, lang.hitch(this, function(item) { + var defaultUnitInfo = this._getAreaUnitInfo(item.unit); + if (!defaultUnitInfo) { + return; + } + defaultUnitInfo.abbr = item.abbr; + this._addAreaUnitRow(defaultUnitInfo); + })); + }, + + getConfig: function() { + var config = { + distanceUnits: [], + areaUnits: [] + }; + config.distanceUnits = this._getDistanceConfig(); + config.areaUnits = this._getAreaConfig(); + + config.exportFileName = (this.exportFileNameInput.value.trim() != "") ? this.exportFileNameInput.value.trim() : this.nls.exportFileName; + config.confirmOnDelete = this.confirmOnDeleteInput.checked; + config.allowImportExport = this.allowImportExportInput.checked; + config.allowLocalStorage = this.allowLocalStorageInput.checked; + var key = this.localStorageKeyInput.value.trim(); + config.localStorageKey = (key == "") ? false : key; + + if (!config["drawPlus"]) + config["drawPlus"] = {}; + var FontFamilyOptions = array.map(this.textPlusFontFamilyTable.getRows(), lang.hitch(this, function(tr) { + var data = this.textPlusFontFamilyTable.getRowData(tr); + return { + "value": data.value, + "label": data.label + } + })); + config["drawPlus"]["fontFamilies"] = FontFamilyOptions; + + return config; + }, + + _getDistanceConfig: function() { + var result = []; + var trs = this.distanceTable.getRows(); + result = array.map(trs, lang.hitch(this, function(tr) { + var data = this.distanceTable.getRowData(tr); + var select = tr.select; + var unitInfo = { + unit: select.get('value'), + abbr: data.abbr + }; + return unitInfo; + })); + return result; + }, + + _getAreaConfig: function() { + var result = []; + var trs = this.areaTable.getRows(); + result = array.map(trs, lang.hitch(this, function(tr) { + var data = this.areaTable.getRowData(tr); + var select = tr.select; + var unitInfo = { + unit: select.get('value'), + abbr: data.abbr + }; + return unitInfo; + })); + return result; + }, + + _getAllDistanceUnitValues: function() { + var distanceUnitValues = array.map(this.distanceUnits, lang.hitch(this, function(item) { + return item.value; + })); + return distanceUnitValues; + }, + + _getUsedDistanceUnitValues: function() { + var trs = this.distanceTable.getRows(); + var usedDistanceUnitValues = array.map(trs, lang.hitch(this, function(tr) { + return tr.select.get('value'); + })); + return usedDistanceUnitValues; + }, + + _getNotUsedDistanceUnitValues: function() { + var allValues = this._getAllDistanceUnitValues(); + var usedValues = this._getUsedDistanceUnitValues(); + var notUsedValues = array.filter(allValues, lang.hitch(this, function(item) { + return array.indexOf(usedValues, item) < 0; + })); + return notUsedValues; + }, + + _getDistanceUnitInfo: function(value) { + var result = null; + var units = array.filter(this.distanceUnits, lang.hitch(this, function(unit) { + return unit.value === value; + })); + if (units.length > 0) { + result = lang.mixin({}, units[0]); + } + return result; + }, + + _addFontFamily: function() { + console.log("Add font family"); + var data = { + "label": "New font family", + "value": "New font family" + }; + var result = this.textPlusFontFamilyTable.addRow(data); + if (result) + this.textPlusFontFamilyTable.editRow(result.tr, data); + }, + + _addDistance: function() { + var notUsedValues = this._getNotUsedDistanceUnitValues(); + if (notUsedValues.length === 0) { + return; + } + var value = notUsedValues[0]; + var unitInfo = this._getDistanceUnitInfo(value); + this._addDistanceUnitRow(unitInfo); + }, + + _addDistanceUnitRow: function(unitInfo) { + var rowData = { + abbr: unitInfo.abbr, + conversion: unitInfo.conversion + }; + var result = this.distanceTable.addRow(rowData); + if (result.success && result.tr) { + var tr = result.tr; + var td = query('.simple-table-td', tr)[0]; + html.setStyle(td, "verticalAlign", "middle"); + var select = new Select({ + style: { + width: "100%", + height: "30px" + } + }); + select.placeAt(td); + select.startup(); + select.addOption({ + value: unitInfo.value, + label: unitInfo.label, + selected: true + }); + this.own(on(select, 'change', lang.hitch(this, this._resetDistanceSelectOptions))); + tr.select = select; + } + this._resetDistanceSelectOptions(); + }, + + _showCorrectDistanceInfoBySelectedOption: function(tr) { + var select = tr.select; + var unitInfo = this._getDistanceUnitInfo(select.value); + var rowData = { + abbr: unitInfo.abbr, + conversion: unitInfo.conversion + }; + this.distanceTable.editRow(tr, rowData); + }, + + _resetDistanceSelectOptions: function() { + var trs = this.distanceTable.getRows(); + var selects = array.map(trs, lang.hitch(this, function(tr) { + return tr.select; + })); + var notUsedValues = this._getNotUsedDistanceUnitValues(); + var notUsedUnitsInfo = array.map(notUsedValues, lang.hitch(this, function(value) { + return this._getDistanceUnitInfo(value); + })); + array.forEach(selects, lang.hitch(this, function(select, index) { + var currentValue = select.get('value'); + var notSelectedOptions = array.filter(select.getOptions(), lang.hitch(this, function(option) { + return option.value !== currentValue; + })); + select.removeOption(notSelectedOptions); + array.forEach(notUsedUnitsInfo, lang.hitch(this, function(unitInfo) { + select.addOption({ + value: unitInfo.value, + label: unitInfo.label + }); + })); + select.set('value', currentValue); + var tr = trs[index]; + this._showCorrectDistanceInfoBySelectedOption(tr); + })); + }, + + _getAllAreaUnitValues: function() { + var areaUnitValues = array.map(this.areaUnits, lang.hitch(this, function(item) { + return item.value; + })); + return areaUnitValues; + }, + + _getUsedAreaUnitValues: function() { + var trs = this.areaTable.getRows(); + var usedAreaUnitValues = array.map(trs, lang.hitch(this, function(tr) { + return tr.select.get('value'); + })); + return usedAreaUnitValues; + }, + + _getNotUsedAreaUnitValues: function() { + var allValues = this._getAllAreaUnitValues(); + var usedValues = this._getUsedAreaUnitValues(); + var notUsedValues = array.filter(allValues, lang.hitch(this, function(item) { + return array.indexOf(usedValues, item) < 0; + })); + return notUsedValues; + }, + + _getAreaUnitInfo: function(value) { + var result = null; + var units = array.filter(this.areaUnits, lang.hitch(this, function(unit) { + return unit.value === value; + })); + if (units.length > 0) { + result = lang.mixin({}, units[0]); + } + return result; + }, + + _addArea: function() { + var notUsedValues = this._getNotUsedAreaUnitValues(); + if (notUsedValues.length === 0) { + return; + } + var value = notUsedValues[0]; + var unitInfo = this._getAreaUnitInfo(value); + this._addAreaUnitRow(unitInfo); + }, + + _addAreaUnitRow: function(unitInfo) { + var rowData = { + abbr: unitInfo.abbr, + conversion: unitInfo.conversion + }; + var result = this.areaTable.addRow(rowData); + if (result.success && result.tr) { + var tr = result.tr; + var td = query('.simple-table-td', tr)[0]; + html.setStyle(td, "verticalAlign", "middle"); + var select = new Select({ + style: { + width: "100%", + height: "30px" + } + }); + select.placeAt(td); + select.startup(); + select.addOption({ + value: unitInfo.value, + label: unitInfo.label, + selected: true + }); + this.own(on(select, 'change', lang.hitch(this, this._resetAreaSelectOptions))); + tr.select = select; + } + this._resetAreaSelectOptions(); + }, + + _showCorrectAreaInfoBySelectedOption: function(tr) { + var select = tr.select; + var unitInfo = this._getAreaUnitInfo(select.value); + var rowData = { + abbr: unitInfo.abbr, + conversion: unitInfo.conversion + }; + this.areaTable.editRow(tr, rowData); + }, + + _resetAreaSelectOptions: function() { + var trs = this.areaTable.getRows(); + var selects = array.map(trs, lang.hitch(this, function(tr) { + return tr.select; + })); + var notUsedValues = this._getNotUsedAreaUnitValues(); + var notUsedUnitsInfo = array.map(notUsedValues, lang.hitch(this, function(value) { + return this._getAreaUnitInfo(value); + })); + array.forEach(selects, lang.hitch(this, function(select, index) { + var currentValue = select.get('value'); + var notSelectedOptions = array.filter(select.getOptions(), lang.hitch(this, function(option) { + return option.value !== currentValue; + })); + select.removeOption(notSelectedOptions); + array.forEach(notUsedUnitsInfo, lang.hitch(this, function(unitInfo) { + select.addOption({ + value: unitInfo.value, + label: unitInfo.label + }); + })); + select.set('value', currentValue); + var tr = trs[index]; + this._showCorrectAreaInfoBySelectedOption(tr); + })); + } + + }); + }); \ No newline at end of file diff --git a/setting/css/style.css b/setting/css/style.css index d4f6681..57e033e 100644 --- a/setting/css/style.css +++ b/setting/css/style.css @@ -1,51 +1,47 @@ -.jimu-widget-draw-setting .btn-add-section{ - display:inline-block; - overflow:hidden; - height:24px; - margin-left:1px; - margin-bottom:3px; - cursor:pointer; - font-size:13px; - color:#538ec8; - margin-top:8px; +.jimu-widget-draw-setting .btn-add-section { + display: inline-block; + overflow: hidden; + height: 24px; + margin-left: 1px; + margin-bottom: 3px; + cursor: pointer; + font-size: 13px; + color: #538ec8; + margin-top: 8px; } - -.jimu-widget-draw-setting .btn-add-section .btn-add-icon{ - height:100%; - width:14px; - background-repeat: no-repeat; - background-position: center center; - background-image: url(images/add.png); +.jimu-widget-draw-setting .btn-add-section .btn-add-icon { + height: 100%; + width: 14px; + background-repeat: no-repeat; + background-position: center center; + background-image: url(images/add.png); } - -.jimu-widget-draw-setting .btn-add-section .btn-add-label{ - height:100%; - line-height:24px; - vertical-align:middle; - margin-left:7px; - text-decoration: underline; +.jimu-widget-draw-setting .btn-add-section .btn-add-label { + height: 100%; + line-height: 24px; + vertical-align: middle; + margin-left: 7px; + text-decoration: underline; } - -.jimu-rtl .jimu-widget-draw-setting .btn-add-section .btn-add-label{ - margin-left: 0; - margin-right: 7px; +.jimu-rtl .jimu-widget-draw-setting .btn-add-section .btn-add-label { + margin-left: 0; + margin-right: 7px; } - -.jimu-widget-draw-setting .settings{ - list-style-type:none; - display:table; +.jimu-widget-draw-setting .settings { + list-style-type: none; + display: table; } -.jimu-widget-draw-setting .settings li{ - display:table-row; +.jimu-widget-draw-setting .settings li { + display: table-row; } -.jimu-widget-draw-setting .settings .input{ - display:table-cell; - width:49%; - text-align:right; +.jimu-widget-draw-setting .settings .input { + display: table-cell; + width: 49%; + text-align: right; } -.jimu-widget-draw-setting .settings .label{ - display:table-cell; - width:49%; - text-align:left; - padding-left:10px; +.jimu-widget-draw-setting .settings .label { + display: table-cell; + width: 49%; + text-align: left; + padding-left: 10px; } \ No newline at end of file diff --git a/setting/nls/fr/strings.js b/setting/nls/fr/strings.js index 022be72..c79b2c6 100644 --- a/setting/nls/fr/strings.js +++ b/setting/nls/fr/strings.js @@ -1,37 +1,37 @@ define( - ({ - addDistance: "Ajouter une unité de longueur", - addArea: "Ajouter une unité de surface", - addFontFamily: "Ajouter une police de caractères", - label: "Etiquette", - value: "Valeur", - abbr: "Abréviation", - conversion: "Conversion", - actions: "Actions", - areaUnits: "Unités de surface", - distanceUnits: "Unités de longueur", - kilometers: "Kilomètres", - miles: "Miles", - meters: "Mètres", - meters: "Mètres", - nauticals: "Milles marins", - feet: "Pieds", - yards: "Yards", - squareKilometers: "Kilomètres carrés", - squareMiles: "Miles carrés", - acres: "Acres", - hectares: "Hectares", - squareMeters: "Mètres carrés", - squareFeet: "Pieds carrés", - squareYards: "Yards carrés", - distance: "Distances", - area: "Surfaces", - confirmOnDeleteLabel:"Demander confirmation à l'utilisateur avant une suppression", - allowImportExportLabel:"Activer l'import et l'export", - allowLocalStorageLabel:"Utiliser local storage", - localStorageKeyLabel:"Clé Local storage", - localStorageKeyInfo:"Si vide, toutes les applications partageront le même storage. Sinon, les applications avec la même clé partageront le même storage.", - exportFileName:"Nom du fichier exporté", - exportFileNameValue:"mesDessins.json" - }) + ({ + addDistance: "Ajouter une unité de longueur", + addArea: "Ajouter une unité de surface", + addFontFamily: "Ajouter une police de caractères", + label: "Etiquette", + value: "Valeur", + abbr: "Abréviation", + conversion: "Conversion", + actions: "Actions", + areaUnits: "Unités de surface", + distanceUnits: "Unités de longueur", + kilometers: "Kilomètres", + miles: "Miles", + meters: "Mètres", + meters: "Mètres", + nauticals: "Milles marins", + feet: "Pieds", + yards: "Yards", + squareKilometers: "Kilomètres carrés", + squareMiles: "Miles carrés", + acres: "Acres", + hectares: "Hectares", + squareMeters: "Mètres carrés", + squareFeet: "Pieds carrés", + squareYards: "Yards carrés", + distance: "Distances", + area: "Surfaces", + confirmOnDeleteLabel: "Demander confirmation à l'utilisateur avant une suppression", + allowImportExportLabel: "Activer l'import et l'export", + allowLocalStorageLabel: "Utiliser local storage", + localStorageKeyLabel: "Clé Local storage", + localStorageKeyInfo: "Si vide, toutes les applications partageront le même storage. Sinon, les applications avec la même clé partageront le même storage.", + exportFileName: "Nom du fichier exporté", + exportFileNameValue: "mesDessins.json" + }) ); \ No newline at end of file diff --git a/setting/nls/strings.js b/setting/nls/strings.js index 78a927f..ef824df 100644 --- a/setting/nls/strings.js +++ b/setting/nls/strings.js @@ -1,62 +1,62 @@ define({ - root: ({ - addDistance: "Add Length Unit", - addArea: "Add Area Unit", - addFontFamily: "Add a font family", - label: "Label", - value: "Value", - abbr: "Abbreviation", - conversion: "Conversion", - actions: "Actions", - areaUnits: "Area Units", - distanceUnits: "Length Units", - kilometers: "Kilometers", - miles: "Miles", - meters: "Meters", - nauticals: "Nautical miles", - feet: "Feet", - yards: "Yards", - squareKilometers: "Square kilometers", - squareMiles: "Square miles", - acres: "Acres", - hectares: "Hectares", - squareMeters: "Square meters", - squareFeet: "Square feet", - squareYards: "Square yards", - distance: "Distances", - area: "Areas", - confirmOnDeleteLabel:"Ask for confirmation before deleting ?", - allowImportExportLabel:"Allow import & export ?", - allowLocalStorageLabel:"Use local storage ?", - localStorageKeyLabel:"Local storage key", - localStorageKeyInfo:"If not empty, applications with same key (and same server) will share the same storage. If empty, all will share same storage.", - exportFileName:"Export file name", - exportFileNameValue:"myDrawing.json" - }), - "ar": 1, - "cs": 1, - "da": 1, - "de": 1, - "es": 1, - "et": 1, - "fi": 1, - "fr": 1, - "he": 1, - "it": 1, - "ja": 1, - "ko": 1, - "lt": 1, - "lv": 1, - "nb": 1, - "nl": 1, - "pl": 1, - "pt-br": 1, - "pt-pt": 1, - "ro": 1, - "ru": 1, - "sv": 1, - "th": 1, - "tr": 1, - "vi": 1, - "zh-cn": 1 + root: ({ + addDistance: "Add Length Unit", + addArea: "Add Area Unit", + addFontFamily: "Add a font family", + label: "Label", + value: "Value", + abbr: "Abbreviation", + conversion: "Conversion", + actions: "Actions", + areaUnits: "Area Units", + distanceUnits: "Length Units", + kilometers: "Kilometers", + miles: "Miles", + meters: "Meters", + nauticals: "Nautical miles", + feet: "Feet", + yards: "Yards", + squareKilometers: "Square kilometers", + squareMiles: "Square miles", + acres: "Acres", + hectares: "Hectares", + squareMeters: "Square meters", + squareFeet: "Square feet", + squareYards: "Square yards", + distance: "Distances", + area: "Areas", + confirmOnDeleteLabel: "Ask for confirmation before deleting ?", + allowImportExportLabel: "Allow import & export ?", + allowLocalStorageLabel: "Use local storage ?", + localStorageKeyLabel: "Local storage key", + localStorageKeyInfo: "If not empty, applications with same key (and same server) will share the same storage. If empty, all will share same storage.", + exportFileName: "Export file name", + exportFileNameValue: "myDrawing.json" + }), + "ar": 1, + "cs": 1, + "da": 1, + "de": 1, + "es": 1, + "et": 1, + "fi": 1, + "fr": 1, + "he": 1, + "it": 1, + "ja": 1, + "ko": 1, + "lt": 1, + "lv": 1, + "nb": 1, + "nl": 1, + "pl": 1, + "pt-br": 1, + "pt-pt": 1, + "ro": 1, + "ru": 1, + "sv": 1, + "th": 1, + "tr": 1, + "vi": 1, + "zh-cn": 1 }); \ No newline at end of file