ChartIQ SDK Legacy Documentation -

Class: DrawingToolbar

STX. DrawingToolbar

new DrawingToolbar(htmlElement, stx [, callback])

This class is maintained for legacy implementations only (not using web components). New implementations should use functionality included in the web components (stxUI.js)
The drawing toolbar is dynamic, displaying various configuration options depending on the tool that is enabled. This object manages the drawing toolbar.

Parameters:
Name Type Argument Description
htmlElement HTMLElement

The toolbar htmlElement
stx STXChart

STXChart object associated with this toolbar.
callback function <optional>

Set this to receive a notification whenever a change is made to the toolbar. Examine stx.currentVectorParameters for the change.

Members

<static> configurator :Object

This object determines which toolbar configuration widgets are available for any given drawing type. The default settings can be found in stx.js, and they can be changed by overriding these defaults on your own files. When adding a new drawing type, set it to false for any given widget to disable the widget for that drawing.

Type:
  • Object
Example
STX.DrawingToolbar.configurator={
			".stxToolbarFill":{			"measure":false, "line":false, "ray":false, "segment":false, "annotation":false, "horizontal":false, "vertical":false,									   "continuous":false 					},
			".stxToolbarLine":{},
			".stxToolbarLinePicker":{																 "annotation":false,																							   "fibonacci":false},
			".stxToolbarNone":{			"measure":false, "line":false, "ray":false, "segment":false, "annotation":false, "horizontal":false, "vertical":false,									   "continuous":false, "fibonacci":false},
			".stxToolbarDotted":{},
			".stxToolbarDashed":{},
			".stxToolbarAxisLabel":{	"measure":false, "line":false, "ray":false, "segment":false, "annotation":false,				 					   "rectangle":false, "ellipse":false, "continuous":false, "fibonacci":false},
			".stxToolbarAnnotation":{	"measure":false, "line":false, "ray":false, "segment":false, 					 "horizontal":false, "vertical":false, "rectangle":false, "ellipse":false, "continuous":false, "fibonacci":false},
			".stxToolbarStylePicker":{  "measure":false, "line":false, "ray":false, "segment":false, "annotation":false, "horizontal":false, "vertical":false, "rectangle":false, "ellipse":false, "continuous":false                   },
			"#stx-toolbar-settings":{	"measure":false, "line":false, "ray":false, "segment":false, "annotation":false, "horizontal":false, "vertical":false, "rectangle":false, "ellipse":false, "continuous":false 					}
		};

Methods

<static> setCrosshairs(state, div)

Turns crosshairs on or off. Note that crosshairs can be turned on or off anytime by simply setting stx.layout.crosshair to true or false.

Parameters:
Name Type Description
state boolean

True if the crosshairs should be on, otherwise false
div HTMLElement

The HTMLElement comtaining the toolbar

<static> setDrawingType(vectorType, div)

Changes the currently selected drawing type. The drawing type should match the name of the Drawing object.

Requires an html node with ID of "toolSelection" to display the currently selected drawing tool. Defaults to "Select Tool".
Example: <span id="toolSelection"></span>

Parameters:
Name Type Description
vectorType string

The drawing type
div HTMLElement

The HTMLElement comtaining the toolbar

<static> setFont(div, txt)

Sets the font from the drawing toolbar.

Parameters:
Name Type Description
div HTMLElement

The HTMLElement comtaining the toolbar
txt string

A valid font name or font family, size ( "12px", for example), "italic, "bold" or "Default".

<static> setLine(width, pattern, div)

Sets the line type (STXChart.currentVectorParameters) from the toolbar selections.

Parameters:
Name Type Description
width Number

The width of the line
pattern string

The type of line ("solid","dotted","dashed" or "none")
div HTMLElement

The HTMLElement comtaining the toolbar

<static> toggleAxisLabel(div)

Toggles the axis label from the drawing toolbar.

Parameters:
Name Type Description
div HTMLElement

The HTMLElement comtaining the toolbar

initialize(htmlElement)

Initializes the drawing toolbar. It finds the toolbar through class stx-toolbar. Be sure to copy that HTML verbatim into your project if you aren't using the demo as a starting point. Call this function when you initialize your UI. Automatically called when a new STX.DrawingToolbar(htmlElement, stx, callback); is instantiated.

Parameters:
Name Type Description
htmlElement HTMLElement

The toolbar htmlElement

setLineColor(stx)

Sets the current drawing line color based on what is picked in the toolbar

Parameters:
Name Type Description
stx STXChart

STXChart object associated with this toolbar.