Drawing is a project that sits on top of DojoX GFX and uses SVG and VML vector graphics to draw and display.
Drawing is similar to DojoX Sketch, but is designed to be more versatile extendable and customizable. Drawing currently only initiates from HTML although it's technically not a Dijit to keep the file size light. But if Dijit is available, Drawing will register itself with it and can be accessed with registry.byId('myDrawing') (by requiring dijit/registry)
NOTES: Although not Drawing and Toolbar, all other objects are created with a custom declare. See dojox.drawing.util.oo
The files are laid out as such:
Parameter | Type | Description |
---|---|---|
props | Object | |
node | HTMLNode |
See the dojox/drawing/Drawing reference documentation for more information.
<div data-dojo-type="dojox.drawing.Drawing" id="drawing" defaults="myCustom.defaults" plugins="[{'name':'dojox.drawing.plugins.drawing.Grid', 'options':{gap:100}}]"> </div>
<div dojoType="dojox.drawing.Toolbar" drawingId="drawing" class="drawingToolbar vertical"> <div tool="dojox.drawing.tools.Line" selected="false">Line</div> <div tool="dojox.drawing.tools.Rect" selected="false">Rect</div> <div tool="dojox.drawing.tools.Ellipse" selected="false">Ellipse</div> <div tool="dojox.drawing.tools.TextBlock" selected="false">Statement</div> <div tool="dojox.drawing.tools.custom.Equation" selected="false">Equation</div> <div plugin="dojox.drawing.plugins.tools.Pan" options="{}">Pan</div> <div plugin="dojox.drawing.plugins.tools.Zoom" options="{zoomInc:.1,minZoom:.5,maxZoom:2}">Zoom</div> </div>
Whether or not the canvas has been created and Stencils can be added
Add a toolbar plugin object to plugins array to be parsed
Parameter | Type | Description |
---|---|---|
plugin | Object |
Use this method to programmatically add Stencils that display on the canvas.
FIXME: Currently only supports Stencils that have been registered, which is items in the toolbar, and the additional Stencils at the end of onSurfaceReady. This covers all Stencils, but you can't use 'display only' Stencils for Line, Rect, and Ellipse.
Parameter | Type | Description |
---|---|---|
type | String | The final name of the tool, lower case: 'image', 'line', 'textBlock' |
options | Object | The parameters used to draw the object. See stencil._Base and each tool for specific parameters of teh data or points objects. |
Use this method to programmatically add Stencils that display on the canvas.
FIXME: Currently only supports Stencils that have been registered, which is items in the toolbar, and the additional Stencils at the end of onSurfaceReady. This covers all Stencils, but you can't use 'display only' Stencils for Line, Rect, and Ellipse.
Parameter | Type | Description |
---|---|---|
type | String | The final name of the tool, lower case: 'image', 'line', 'textBlock' |
options | Object |
The parameters used to draw the object. See stencil._Base and each tool for specific parameters of teh data or points objects. |
Change the defaults so that all Stencils from this point on will use the newly changed style.
Parameter | Type | Description |
---|---|---|
newStyle | Object | An object that represents one of the objects in drawing.style that will be mixed in. Not all properties are necessary. Only one object may be changed at a time. The object boolean parameter is not required and if not set objects will automatically be changed. Changing non-objects like angleSnap requires value to be true. |
value | Boolean |
myDrawing.changeDefaults({ norm:{ fill:"#0000ff", width:5, color:"#ffff00" } });
Collects all Stencil data and returns an Array of objects.
Returns a Stencil constructor base on abbreviation
Parameter | Type | Description |
---|---|---|
abbr | String |
The common objects that are mixed into a new Stencil. Mostly internal, but could be used.
Parameter | Type | Description |
---|---|---|
data | Object | |
mode | undefined |
Handles an Array of stencil data and imports the objects to the drawing.
Parameter | Type | Description |
---|---|---|
objects | Array |
Called from Toolbar after a plugin has been loaded The call to this coming from toolbar is a bit funky as the timing of IE for canvas load is different than other browsers
Registers a tool that can be accessed. Internal.
Parameter | Type | Description |
---|---|---|
type | String |
Use this method to programmatically remove Stencils from the canvas.
Parameter | Type | Description |
---|---|---|
stencil | Object | The Stencil to be removed |
Resizes the canvas. If within a ContentPane this will get called automatically. Can also be called directly.
Parameter | Type | Description |
---|---|---|
box | Object |
Drawing registers as a widget and needs to support widget's api.
Parameter | Type | Description |
---|---|---|
name | undefined | |
value | undefined |
Sets up a new class to be used to draw. Called from Toolbar, and this class... after a tool is used a new one of the same type is initialized. Could be called externally.
Parameter | Type | Description |
---|---|---|
type | String |
Call a function within all selected Stencils like attr()
Parameter | Type | Description |
---|---|---|
func | String |
myDrawing.toSelected('attr', {x:10})
Event fired from a stencil that has destroyed itself will also be called when it is removed by "removeStencil" or stencils.onDelete.
Parameter | Type | Description |
---|---|---|
stencil | Object |
myDrawing.toSelected('attr', {x:10})
Event that fires when a stencil is drawn. Does not fire from 'addStencil'.
Parameter | Type | Description |
---|---|---|
stencil | Object |
myDrawing.toSelected('attr', {x:10})
Event that to which can be connected. Fired when the canvas is ready and can be drawn to.
myDrawing.toSelected('attr', {x:10})