Editor Commands

The ESD/SPD Web editor supports a wide variety of commands. These commands perform operations like zooming the editor window, initiating draw operations and interacting with the clipboard. If your application relies on the editor's build-in toolbar, the toolbar will execute commands in response to user interactions and will ensure that the appearance of each toolbar UI element is consistent with the editor's current state. If you choose to disable the editor's build-in toolbar and implement your own toolbar, your application will use the executeCommand method to issue editor commands, and the commandBegin, commandEnd and commandEnable events to manage your toolbar's visual state.

The tables below lists the commands supported by the executeCommand method. UI update notifications for these events can be handled using the commandBegin, commandEnd and commandEnable events. In your toolbar implementation you may wish to show a command's toolbar button "pressed" between the commandBegin and commandEnd notifications for long running commands (Yes in the Long Running column). Commands that are not long running will still call the commandBegin and commandEnd handlers - with minimal delay between. The lifecycle of a toolbar command is:

Editor command lifecycle

Attachment Commands
Command Name Description Parameters Long
Running
addDocumentAttachmentSymbol Adds a Document Attachment symbol The unique ID of an document attachment and its text label. No
addImageAttachmentSymbol Adds an Image Attachment symbol The unique ID of an image attachment and its text label. No
Example: 
						// example assumes editor is an initialized ESDWeb object

						// place a camera symbol in the diagram - representing an attached crash debris photo
						editor.executeCommand('addImageAttachmentSymbol', 'Photo1', 'crash debris');

Clipboard Commands
Command Name Description Parameters Long
Running
copy Copies the selected items to the clipboard None No
cut Cuts the selected items to the clipboard None No
paste Pastes shape(s) or image from the clipboard into the diagram None No
Examples: 
							// example assumes editor is an initialized ESDWeb object

							// tell the editor to cut currently selected shape(s) to the clipboard
							editor.executeCommand('cut');

Diagram Management Commands
Command Name Description Parameters Long
Running
enableGrid Hides or shows the grid A boolean value: true to show the grid, false to hide the grid. No
eraseAndStartOver Erases everything in the diagram None No
saveDiagram Saves the diagram currently in the editor An options object. The saveDiagram command supports the same option settings as the store method. No
printDiagram Prints the diagram currently in the editor An options object. The printDiagram command supports the same option settings as the store method. If a viewKey property is not provided then the entire diagram will be printed. No
exportImage Exports the diagram as an image. An options object. The exportImage command supports the same option settings as the store method. If a viewKey property is not provided then the entire diagram will be exported. No
undo Undoes the last edit operation None No
redo Redoes the last undone edit operation None No
zoomIn Zooms in None No
zoomOut Zooms out None No
zoomToFit Zooms to fit the entire diagram None No
Examples: 
						// examples assumes editor is an initialized ESDWeb object

						// register an event handler for the commandEnable event (only need to do this once)
						editor.on('commandEnable', function(cmdName, enable) {
							// enable/disable our zoom buttons as directed by the editor -
							// this assumes zoom buttons with IDs btnZoomIn, btnZoomOut, btnZoomToFit
							switch (cmdName) {
							case 'zoomIn':		$('#btnZoomIn').disabled = !enable;		break;
							case 'zoomOut': 	$('#btnZoomOut').disabled = !enable;	break;
							case 'zoomToFit':	$('#btnZoomToFit').disabled = !enable;	break;
							}
						});

						$('btnZoomIn').onclick=function() { editor.executeCommand('zoomIn') };
						$('btnZoomOut').onclick=function() { editor.executeCommand('zoomOut') };
						$('btnZoomToFit').onclick=function() { editor.executeCommand('zoomToFit') };

						// show the grid
						editor.executeCommand('enableGrid', true);

						// print the diagram
						editor.executeCommand('printDiagram', {includeStructureDimensions: true});

Drawing Commands
Command Name Description Parameters Long
Running
abortCurrentDraw Aborts the current draw operation None No
draw_arc Starts drawing a new arc None Yes
draw_callout Starts drawing a new callout None Yes
draw_circle Starts drawing a new circle None Yes
draw_closedPolyArc Starts drawing a new closed shape None Yes
draw_counterTop Starts drawing a new countertop None Yes
draw_crosswalk Starts drawing a new crosswalk None Yes
draw_dimensionLine Starts drawing a new dimension line None Yes
draw_ellipse Starts drawing a new ellipse None Yes
draw_freeStripe Starts drawing a new free stripe None Yes
draw_lasso Starts drawing a new lasso rectangle None Yes
draw_line Starts drawing a new line None Yes
draw_parkingStalls Starts drawing a new parking stalls shape None Yes
draw_polyArc Starts drawing a connected line shape None Yes
draw_rect Starts drawing a new rectangle None Yes
draw_square Starts drawing a new square None Yes
draw_stairs Starts drawing a new stairway shape None Yes
draw_streetStraight Starts drawing a new street None Yes
draw_streetRoundabout Starts drawing a new street based on a circle (roundabout) None Yes
draw_streetCurved Starts drawing a new street based on a connected line shape None Yes
draw_streetClosed Starts drawing a new street based on a closed shape None Yes
draw_stripeEraser Activates the stripe eraser None Yes
draw_structure Starts drawing a structure None Yes
draw_selectRectangle Starts drawing a selection rectangle None Yes
draw_textBox Starts drawing a new text box None Yes
draw_zoomToSelectRectangle Starts drawing a "zoom to" rectangle None Yes
imageImport Imports an image into the diagram The image data as a base64 encoded image URL, the image width in pixels, and the image height in pixels. No
Examples: 
							// examples assumes editor is an initialized ESDWeb object

							// register event handlers for the commandBegin and commandEnd events (only need to do this once)
							editor.on('commandBegin', function(command) {
								if ('draw_streetStraight' === command) {
									// while the street is being drawn show the street toolbar button pressed
									$("#streetTool").pressed=true;
								}
							);
							editor.on('commandEnd', function(command) {
								if ('draw_streetStraight' === command) {
									$("#streetTool").pressed=false;
								}
							);

							// start to draw a street:
							editor.executeCommand('draw_streetStraight');

Map Service Commands
Command Name Description Parameters Long
Running
configureMapService If the current map service has a configuration dialog, triggers the dialog by calling the map service's configure method. None No
refreshMap Refreshes the current map image None No
removeMap Removes the current map None No
requestLocation Requests a location from the current location service by calling its requestLocation method. None No
setLocation Sets the geographic location associated with the current viewport center point Location object of the format
{
latitude: number,
longitude: number,
description: string
} 		No
setMapOpacity Sets the opacity of the current map image The desired opacity as a floating point value (0.0-1.0) No
setMapService Sets the current map service An integer value indicating the zero-based index of the desired map service No
Example: 
							// example assumes editor is an initialized ESDWeb object

							// set the map's opacity
							editor.executeCommand('setMapOpacity', 0.75);

Shape Manipulation Commands
Command Name Description Parameters Long
Running
align_Bottom Aligns the bottom edge of the selected items None No
align_Center Aligns the horizontal mid-points of the selected items None No
align_Left Aligns the left edge of the selected items None No
align_Middle Aligns the vertical mid-points of the selected items None No
align_Right Aligns the right edge of the selected items None No
align_Top Aligns the top edge of the selected items None No
bringToFront Brings the selected items to the front of the layer None No
delete Deletes the selected items None No
editProperties Edits the properties of the selected shapes None Yes
editText Edits the text associated with the selected shape None Yes
flipHorizontal Flips the selected shape horizontally None No
flipVertical Flips the selected shape vertically None No
group Groups the selected items together into a single item None No
rotate Rotates the selected shapes by the degrees provided. Positive values rotate counter-clockwise, negative rotate clockwise. Numeric value of degrees to rotate No
rotateClockwise Rotates the selected shapes clockwise 15 degrees None No
rotateCounterClockwise Rotates the selected shapes counter clockwise 15 degrees None No
selectAll Selects all shapes in the active layer None No
sendToBack Sends the selected items to the back of the layer None No
textLarger Makes text in the diagram larger None No
textSmaller Makes text in the diagram smaller None No
toggleResizing For the selected shape, enables or disables resizing None No
toggleStretching For the selected articulating shape, enables or disables the stretching of components None No
ungroup Breaks the selected item apart into its component items None No
Example: 
							// example assumes editor is an initialized ESDWeb object

							// group selected shapes
							editor.executeCommand('group');

Template Commands
Command Name Description Parameters Long
Running
applyTemplate Loads a template into the editor An SVG string which is the template content and an optional numeric rotation value No
refreshTemplateManager Refreshes the currently selected group in the template manager None No
Example: 
							// example assumes editor is an initialized ESDWeb object

							// load a template
							editor.executeCommand('applyTemplate', templateSvg);

View Commands
Command Name Description Parameters Long
Running
deleteView Deletes a View Key value of the view to be deleted No
deactivateView Deactivates the currently active view None No
activateView Activates the specified view Key value of the view to be activated No
Example: 
							// example assumes editor is an initialized ESDWeb object

							editor.executeCommand('deleteView', viewKey);