Hide edit text symbol editor

VygintasCesnauskas · ‎10-03-2014

Is it possible to hide the pop-up dialog that appears when editToolbar.activate(Edit.EDIT_TEXT...) is activated?

Vara_PrasadM_S · ‎10-13-2014

Hi Vygintas,

There is a property "textSymbolEditorHolder", which can be set in "options" list of parameters in the constructor of Edit Tool bar.

1. Include one div element in your html and set display as none for style, as below.

2. Then, specify the id of this div element as value for the property "textSymbolEditorHolder", as below

var options = {

allowAddVertices: registry.byId("vtx_ca").checked,

allowDeleteVertices: registry.byId("vtx_cd").checked,

uniformScaling: registry.byId("uniform_scaling").checked,

textSymbolEditorHolder: "txtSymbolEditorHolder"

};

Then, the symbol editor will not be displayed. below is the updated code of the sampe you mentioned which does not display the symbol editor.

======================================================================================

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>

Edit Tools

</title>

<style>

html, body, #mainWindow {

font-family: sans-serif;

height: 100%;

width: 100%;

}

html, body {

margin: 0;

padding: 0;

}

#mainWindow {

visibility: hidden;

}

</style>

var map, editToolbar;

require([

"esri/map",

"esri/toolbars/edit",

"esri/graphic",

"esri/geometry/Point",

"esri/geometry/Polyline",

"esri/geometry/Polygon",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/TextSymbol",

"dojo/_base/event",

"dojo/parser",

"dojo/dom",

"dojo/dom-style",

"dijit/registry",

"dijit/Menu",

"dijit/form/ToggleButton",

"dijit/form/DropDownButton",

"dijit/CheckedMenuItem",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

], function (

Map, Edit, Graphic,

Point, Polyline, Polygon,

SimpleLineSymbol, SimpleFillSymbol, TextSymbol,

event, parser, dom, domStyle, registry, Menu

) {

parser.parse();

domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");

map = new Map("map", {

basemap: "streets",

center: [3.955, 59.338],

zoom: 3

});

map.on("load", createToolbar);

function createToolbar() {

addGraphics();

editToolbar = new Edit(map);

//Activate the toolbar when you click on a graphic

map.graphics.on("click", function (evt) {

event.stop(evt);

activateToolbar(evt.graphic);

});

//deactivate the toolbar when you click outside a graphic

map.on("click", function (evt) {

editToolbar.deactivate();

});

}

function addGraphics() {

//add pre-defined geometries to map

var polygonSymbol = new SimpleFillSymbol();

var polylineSymbol = new SimpleLineSymbol();

var text = new TextSymbol("Editable Text");

text.font.setSize("20pt");

var polyline = new Polyline({

"paths": [

[

[-12484306, 7244028],

[-7318386, 10061803],

[-3013453, 10727111]

]

], "spatialReference": {

"wkid": 102100

}

});

var polygon = new Polygon({

"rings": [

[

[-4226661, 8496372],

[-3835304, 8731187],

[-2269873, 9005137],

[-1213208, 8613780],

[-1017529, 8065879],

[-1213208, 7478843],

[-2230738, 6891806],

[-2935181, 6735263],

[-3522218, 6891806],

[-3952711, 7165757],

[-4265797, 7283164],

[-4304933, 7635386],

[-4304933, 7674521],

[-4226661, 8496372]

]

],

"spatialReference": {

"wkid": 102100

}

});

var arrow = new Polygon({

"rings": [

[

[9862211, 6617856],

[8922952, 5522055],

[8922952, 5991684],

[6105178, 5991684],

[6105178, 7087485],

[8922952, 7087485],

[8922952, 7557114],

[9862211, 6617856]

]

],

"spatialReference": {

"wkid": 102100

}

});

var triangle = new Polygon({

"rings": [

[

[2426417, 8535508],

[4304933, 12292541],

[6183449, 8535508],

[2426417, 8535508]

]

],

"spatialReference": {

"wkid": 102100

}

});

var point = new Point(-40, 35);

map.graphics.add(new Graphic(polyline, polylineSymbol));

map.graphics.add(new Graphic(polygon, polygonSymbol));

map.graphics.add(new Graphic(arrow, polygonSymbol));

map.graphics.add(new Graphic(triangle, polygonSymbol));

map.graphics.add(new Graphic(point, text));

}

function activateToolbar(graphic) {

var tool = 0;

if (registry.byId("tool_move").checked) {

tool = tool | Edit.MOVE;

}

if (registry.byId("tool_vertices").checked) {

tool = tool | Edit.EDIT_VERTICES;

}

if (registry.byId("tool_scale").checked) {

tool = tool | Edit.SCALE;

}

if (registry.byId("tool_rotate").checked) {

tool = tool | Edit.ROTATE;

}

// enable text editing if a graphic uses a text symbol

if (graphic.symbol.declaredClass === "esri.symbol.TextSymbol") {

tool = tool | Edit.EDIT_TEXT;

}

//specify toolbar options

var options = {

allowAddVertices: registry.byId("vtx_ca").checked,

allowDeleteVertices: registry.byId("vtx_cd").checked,

uniformScaling: registry.byId("uniform_scaling").checked,

textSymbolEditorHolder: "txtSymbolEditorHolder"

};

editToolbar.activate(tool, graphic, options);

}

});

</script>

</head>

<span>Specify options then click a graphic to edit the shape. Click outside the graphic to deactivate the toolbar.</span><br />

<div id="tool_vertices" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Edit Vertices</div>

<div id="tool_scale" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Scale</div>

<div id="tool_rotate" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Rotate</div>

<span>Options</span>

<div id="vtx_ca" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Allow Add Vertices</div>

<div id="vtx_cd" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Allow Delete Vertices</div>

<div id="uniform_scaling" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Uniform Scaling when Resizing</div>

</div>

</button>

</div>

</div>

</body>

</html>

========================================================================================

Please let me know if it helped.

Thanks & Regards,

Vara Prasad.

View solution in original post

Vara_PrasadM_S · ‎10-03-2014

Hi Vygintas,

Is it possible for you to provide any sample application?

Thanks & Regards,

Vara Prasad.

VygintasCesnauskas · ‎10-06-2014

Hi Vara,

This sample has the above mentioned functionality https://developers.arcgis.com/javascript/jssamples/toolbar_edit.html

Vara_PrasadM_S · ‎10-13-2014

Hi Vygintas,

There is a property "textSymbolEditorHolder", which can be set in "options" list of parameters in the constructor of Edit Tool bar.

1. Include one div element in your html and set display as none for style, as below.

2. Then, specify the id of this div element as value for the property "textSymbolEditorHolder", as below

var options = {

allowAddVertices: registry.byId("vtx_ca").checked,

allowDeleteVertices: registry.byId("vtx_cd").checked,

uniformScaling: registry.byId("uniform_scaling").checked,

textSymbolEditorHolder: "txtSymbolEditorHolder"

};

Then, the symbol editor will not be displayed. below is the updated code of the sampe you mentioned which does not display the symbol editor.

======================================================================================

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>

Edit Tools

</title>

<style>

html, body, #mainWindow {

font-family: sans-serif;

height: 100%;

width: 100%;

}

html, body {

margin: 0;

padding: 0;

}

#mainWindow {

visibility: hidden;

}

</style>

var map, editToolbar;

require([

"esri/map",

"esri/toolbars/edit",

"esri/graphic",

"esri/geometry/Point",

"esri/geometry/Polyline",

"esri/geometry/Polygon",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/TextSymbol",

"dojo/_base/event",

"dojo/parser",

"dojo/dom",

"dojo/dom-style",

"dijit/registry",

"dijit/Menu",

"dijit/form/ToggleButton",

"dijit/form/DropDownButton",

"dijit/CheckedMenuItem",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

], function (

Map, Edit, Graphic,

Point, Polyline, Polygon,

SimpleLineSymbol, SimpleFillSymbol, TextSymbol,

event, parser, dom, domStyle, registry, Menu

) {

parser.parse();

domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");

map = new Map("map", {

basemap: "streets",

center: [3.955, 59.338],

zoom: 3

});

map.on("load", createToolbar);

function createToolbar() {

addGraphics();

editToolbar = new Edit(map);

//Activate the toolbar when you click on a graphic

map.graphics.on("click", function (evt) {

event.stop(evt);

activateToolbar(evt.graphic);

});

//deactivate the toolbar when you click outside a graphic

map.on("click", function (evt) {

editToolbar.deactivate();

});

}

function addGraphics() {

//add pre-defined geometries to map

var polygonSymbol = new SimpleFillSymbol();

var polylineSymbol = new SimpleLineSymbol();

var text = new TextSymbol("Editable Text");

text.font.setSize("20pt");

var polyline = new Polyline({

"paths": [

[

[-12484306, 7244028],

[-7318386, 10061803],

[-3013453, 10727111]

]

], "spatialReference": {

"wkid": 102100

}

});

var polygon = new Polygon({

"rings": [

[

[-4226661, 8496372],

[-3835304, 8731187],

[-2269873, 9005137],

[-1213208, 8613780],

[-1017529, 8065879],

[-1213208, 7478843],

[-2230738, 6891806],

[-2935181, 6735263],

[-3522218, 6891806],

[-3952711, 7165757],

[-4265797, 7283164],

[-4304933, 7635386],

[-4304933, 7674521],

[-4226661, 8496372]

]

],

"spatialReference": {

"wkid": 102100

}

});

var arrow = new Polygon({

"rings": [

[

[9862211, 6617856],

[8922952, 5522055],

[8922952, 5991684],

[6105178, 5991684],

[6105178, 7087485],

[8922952, 7087485],

[8922952, 7557114],

[9862211, 6617856]

]

],

"spatialReference": {

"wkid": 102100

}

});

var triangle = new Polygon({

"rings": [

[

[2426417, 8535508],

[4304933, 12292541],

[6183449, 8535508],

[2426417, 8535508]

]

],

"spatialReference": {

"wkid": 102100

}

});

var point = new Point(-40, 35);

map.graphics.add(new Graphic(polyline, polylineSymbol));

map.graphics.add(new Graphic(polygon, polygonSymbol));

map.graphics.add(new Graphic(arrow, polygonSymbol));

map.graphics.add(new Graphic(triangle, polygonSymbol));

map.graphics.add(new Graphic(point, text));

}

function activateToolbar(graphic) {

var tool = 0;

if (registry.byId("tool_move").checked) {

tool = tool | Edit.MOVE;

}

if (registry.byId("tool_vertices").checked) {

tool = tool | Edit.EDIT_VERTICES;

}

if (registry.byId("tool_scale").checked) {

tool = tool | Edit.SCALE;

}

if (registry.byId("tool_rotate").checked) {

tool = tool | Edit.ROTATE;

}

// enable text editing if a graphic uses a text symbol

if (graphic.symbol.declaredClass === "esri.symbol.TextSymbol") {

tool = tool | Edit.EDIT_TEXT;

}

//specify toolbar options

var options = {

allowAddVertices: registry.byId("vtx_ca").checked,

allowDeleteVertices: registry.byId("vtx_cd").checked,

uniformScaling: registry.byId("uniform_scaling").checked,

textSymbolEditorHolder: "txtSymbolEditorHolder"

};

editToolbar.activate(tool, graphic, options);

}

});

</script>

</head>

<span>Specify options then click a graphic to edit the shape. Click outside the graphic to deactivate the toolbar.</span><br />

<div id="tool_vertices" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Edit Vertices</div>

<div id="tool_scale" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Scale</div>

<div id="tool_rotate" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="checked:'true', iconClass:'dijitCheckBoxIcon'">Rotate</div>

<span>Options</span>

<div id="vtx_ca" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Allow Add Vertices</div>

<div id="vtx_cd" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Allow Delete Vertices</div>

<div id="uniform_scaling" data-dojo-type="dijit/CheckedMenuItem" data-dojo-props="checked:'true'">Uniform Scaling when Resizing</div>

</div>

</button>

</div>

</div>

</body>

</html>

========================================================================================

Please let me know if it helped.

Thanks & Regards,

Vara Prasad.