Skip to content

Commit

Permalink
TextPlus : add placement support
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcornet
jcornet committed May 17, 2015
1 parent 4e09b7a commit 1b7970e
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 36 deletions.
25 changes: 19 additions & 6 deletions Widget.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,28 @@ <h2 data-dojo-attach-point="editorTitle">${nls.addDrawTitle}</h2>
<span>${nls.textAngle}</span>
</td>
<td>
<input data-dojo-attach-point="editorTextPlusAngleNode" data-dojo-type="dijit/form/NumberSpinner" data-dojo-props="value:0,smallDelta:5,constraints:{min:-90,max:90},intermediateChanges:true" class="draw-plus text-angle"></input>
<input data-dojo-attach-point="editorTextPlusAngleNode" data-dojo-type="dijit/form/NumberSpinner" data-dojo-props="value:0,smallDelta:5,constraints:{min:-180,max:180},intermediateChanges:true" class="draw-plus text-angle"></input>
<span data-dojo-attach-point="editorTextAnglePreviewNode" class="draw-plus text-angle-sample">${nls.drawSampleRotatedText}</span>
</td>
</tr>
</tr>
<tr>
<td>
<span>${nls.textPlacement}</span>
</td>
<td>
<div class="draw-plus text-place">
<span data-dojo-attach-point="editorTextPlusPlacementTopLeft" class="text-place-top-left" title="top left">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementTopCenter" class="text-place-top-center" title="top center">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementTopRight"class="text-place-top-right" title="top right">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementMiddleLeft" class="text-place-middle-left" title="middle left">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementMiddleCenter" class="text-place-middle-center selected" title="middle center">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementMiddleRight" class="text-place-middle-right" title="middle right">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementBottomLeft" class="text-place-bottom-left" title="bottom left">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementBottomCenter" class="text-place-bottom-center" title="bottom center">•</span>
<span data-dojo-attach-point="editorTextPlusPlacementBottomRight" class="text-place-bottom-right" title="bottom right">•</span>
</div>
</td>
</tr>
</tbody>
</table>

Expand Down Expand Up @@ -131,16 +148,12 @@ <h2>${nls.importExportTitle}</h2>
<tr><td>
<h4 class="title">${nls.exportTitle}</h4>
<div class="list-draw-actions">
<a data-dojo-attach-point="exportButton" target="_BLANK" data-dojo-attach-event="ondijitclick:export" download="myDraw.json" href="#"><span class="export blue-button"></span></a>
<iframe data-dojo-attach-point="exportIframeForIE" style="display:none;"></iframe>
<a data-dojo-attach-point="exportButton" target="_BLANK" data-dojo-attach-event="ondijitclick:exportFile" download="myDraw.json" href="#"><span class="export blue-button"></span></a>
</div>
</td></tr>
<tr><td>
<h4 class="title">${nls.importTitle}</h4>
<div class="draw-import list-draw-actions">
<input class="file" value="" type="file" data-dojo-attach-point="importFile" />
<a data-dojo-attach-point="importButton" data-dojo-attach-event="ondijitclick:import"><span class="import blue-button"></span></a>
<input class="file" value="" type="file" data-dojo-attach-point="importFileInput" />
<a data-dojo-attach-point="importButton" data-dojo-attach-event="ondijitclick:importFile"><span class="import blue-button"></span></a>
</div>
Expand Down
115 changes: 87 additions & 28 deletions Widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,11 @@ define([
"bold" : false,
"italic" : false,
"underline" : false,
"angle" : false
"angle" : false,
"placement" : {
"vertical" : "middle",
"horizontal" : "center"
}
},
phantom : {
"point" : false,
Expand Down Expand Up @@ -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';

Expand All @@ -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();
Expand Down Expand Up @@ -555,37 +567,46 @@ 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;
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';
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 () {
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -1297,7 +1356,7 @@ define([
//Create symbol chooser
this.editorSymbolChooser = new SymbolChooser(
{
class : "full-width",
"class" : "full-width",
"type" : "text",
"symbol" : new SimpleMarkerSymbol()
},
Expand Down
81 changes: 81 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 2 additions & 1 deletion nls/fr/strings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
);
3 changes: 2 additions & 1 deletion nls/strings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 1b7970e

Please sign in to comment.