diff --git a/Widget.html b/Widget.html index 08638eb..a3d8fba 100644 --- a/Widget.html +++ b/Widget.html @@ -74,11 +74,28 @@

${nls.addDrawTitle}

${nls.textAngle} - ${nls.drawSampleRotatedText} - + + + + ${nls.textPlacement} + + +
+ + + + + + + + + +
+ + @@ -131,16 +148,12 @@

${nls.importExportTitle}

${nls.exportTitle}

- -

${nls.importTitle}

- -
diff --git a/Widget.js b/Widget.js index 94737d9..5af2c3e 100644 --- a/Widget.js +++ b/Widget.js @@ -435,7 +435,11 @@ define([ "bold" : false, "italic" : false, "underline" : false, - "angle" : false + "angle" : false, + "placement" : { + "vertical" : "middle", + "horizontal" : "center" + } }, phantom : { "point" : false, @@ -500,6 +504,9 @@ define([ 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'; @@ -512,20 +519,25 @@ define([ this._editorConfig["drawPlus"]["bold"] = (symbol.font.weight == esri.symbol.Font.WEIGHT_BOLD); this._editorConfig["drawPlus"]["italic"] = (symbol.font.style == esri.symbol.Font.STYLE_ITALIC); this._editorConfig["drawPlus"]["underline"] = (symbol.font.decoration == 'underline'); + this._editorConfig["drawPlus"]["placement"]["horizontal"] = symbol.horizontalAlignment; + this._editorConfig["drawPlus"]["placement"]["vertical"] = symbol.verticalAlignment; this.editorTextPlusPoliceNode.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){ - console.log("Snapping : " + bool); - + editorActivateSnapping:function(bool){ //If disable if(!bool){ this.map.disableSnapping(); @@ -555,18 +567,27 @@ define([ 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.symbol.text = text; - this.editorSymbolChooser.symbol.font.setFamily(family); - this.editorSymbolChooser.symbol.setAngle(angle); - this.editorSymbolChooser.symbol.font.setWeight(weight); - this.editorSymbolChooser.symbol.font.setStyle(style); - this.editorSymbolChooser.symbol.font.setDecoration(decoration); + this.editorSymbolChooser.showBySymbol(symbol); //Update in drawBox - this.drawBox.setTextSymbol(this.editorSymbolChooser.symbol); + this.drawBox.setTextSymbol(symbol); //Update preview this.editorSymbolChooser.textPreview.innerHTML = text; @@ -574,18 +595,18 @@ define([ 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'; - this.editorSymbolChooser.textPreview.style.transform = 'rotate(' + angle + 'deg)'; - this.editorSymbolChooser.textPreview.style['-ms-transform'] = 'rotate(' + angle + 'deg)'; //Update angle preview - this.editorTextAnglePreviewNode.style['font-style'] = (this._editorConfig["drawPlus"]["italic"]) ? 'italic' : 'normal'; - this.editorTextAnglePreviewNode.style['font-weight'] = (this._editorConfig["drawPlus"]["bold"]) ? 'bold' : 'normal'; - this.editorTextAnglePreviewNode.style['text-decoration'] = (this._editorConfig["drawPlus"]["underline"]) ? 'underline' : 'none'; this.editorTextAnglePreviewNode.style.transform = 'rotate(' + angle + 'deg)'; this.editorTextAnglePreviewNode.style['-ms-transform'] = 'rotate(' + angle + 'deg)'; - //Update phantom symbol - this.editorUpdateMapPreview(this.editorSymbolChooser.symbol); + //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 () { @@ -762,7 +783,7 @@ define([ this._editorConfig["graphicCurrent"].attributes["name"] = this.nameField.value; this._editorConfig["graphicCurrent"].attributes["description"] = this.descriptionField.value; - this._editorConfig["graphicCurrent"].setSymbol(this.editorSymbolChooser.symbol); + this.setMode("list"); }, editorOnClickEditCancelButon : function () { @@ -1084,17 +1105,20 @@ define([ //Bind symbol chooser change this.own(on(this.editorSymbolChooser, 'change', lang.hitch(this, function () { this.editorSetDefaultSymbols(); - //Text plus - if(this.editorSymbolChooser.type == "text") + + //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 - else if(this.editorSymbolChooser.type == "marker") + if(this.editorSymbolChooser.type == "marker") this.editorUpdateMapPreview(this.editorSymbolChooser.getSymbol()); - //If in modification, update graphic symbology - if(this._editorConfig["graphicCurrent"]) - this._editorConfig["graphicCurrent"].setSymbol(this.editorSymbolChooser.getSymbol()); - }))); //bind unit events @@ -1124,7 +1148,42 @@ define([ 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 () { @@ -1297,7 +1356,7 @@ define([ //Create symbol chooser this.editorSymbolChooser = new SymbolChooser( { - class : "full-width", + "class" : "full-width", "type" : "text", "symbol" : new SimpleMarkerSymbol() }, diff --git a/css/style.css b/css/style.css index 38be715..6d22547 100644 --- a/css/style.css +++ b/css/style.css @@ -354,4 +354,85 @@ } .jimu-widget-edraw .draw-plus.text-options div.draw-plus.text-option.text-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: right; + 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/nls/fr/strings.js b/nls/fr/strings.js index 5b96ee2..7efd92e 100644 --- a/nls/fr/strings.js +++ b/nls/fr/strings.js @@ -79,6 +79,7 @@ define( 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' + hideOption:'Cacher les dessins', + textPlacement:'Placement' }) ); \ No newline at end of file diff --git a/nls/strings.js b/nls/strings.js index d9ee686..311f4e2 100644 --- a/nls/strings.js +++ b/nls/strings.js @@ -79,7 +79,8 @@ define({ 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' + hideOption:'Hide drawings', + textPlacement:'Placement' }), "ar": 1, "cs": 1,