dojo.provide("dojox.drawing.Drawing");
(function(){
var _plugsInitialized = false;
dojo.declare("dojox.drawing.Drawing", [], {
// summary:
// Drawing is a project that sits on top of DojoX GFX and uses SVG and
// VML vector graphics to draw and display.
// description:
// 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 dijit.byId('myDrawing')
//
// 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:
// - Drawing
// The master class. More than one instance of a Drawing can be placed
// on a page at one time (although this has not yet been tested). Plugins
// can be added in markup.
// - Toolbar
// Like Drawing, Toolbar is a psudeo Dijit that does not need Dijit. It is
// optional. It can be oriented horizontal or vertical by placing one of
// those params in the class (at least one is required). Plugins
// can be added in markup. A drawingId is required to point toolbar to
// the drawing.
// - defaults
// Contains the default styles and dimensions for Stencils. An individual
// Stencil can be changed by calling stencil.att({color obj}); To change
// all styles, a custom defaults file should be used.
// -Stencils
// Drawing uses a concept of 'Stencils' to avoid confusion between a
// Dojox Shape and a Drawing Shape. The classes in the 'stencils' package
// are display only, they are not used for actually drawing (see 'tools').
// This package contains _Base from which stencils inherit most of their
// methods.(Path and Image are display only and not found in Tools)
// - Tools
// The Tools package contains Stencils that are attached to mouse events
// and can be used for drawing. Items in this package can also be selected
// and modified.
// - Tools / Custom
// Holds tools that do not directly extend Stencil base classes and often
// have very custom code.
// - Library (not implemented)
// The Library package, which is not yet implemented, will be the place to
// hold stencils that have very specific data points that result in a picture.
// Flag-like-banners, fancy borders, or other complex shapes would go here.
// - Annotations
// Annotations 'decorate' and attach to other Stencils, such as a 'Label'
// that can show text on a stencil, or an 'Angle' that shows while dragging
// or modifying a Vector, or an Arrow head that is attached to the beginning
// or end of a line.
// - Manager
// Contains classes that control functionality of a Drawing.
// - Plugins
// Contains optional classes that are 'plugged into' a Drawing. There are two
// types: 'drawing' plugins that modify the canvas, and 'tools' which would
// show in the toolbar.
// - Util
// A collection of common tasks.
//
// example:
// |
// | plugins="[{'name':'dojox.drawing.plugins.drawing.Grid', 'options':{gap:100}}]">
// |
//
// example:
// |
//
//
// ready: Boolean
// Whether or not the canvas has been created and Stencils can be added
ready:false,
// mode: [optional] String
// Changes the functionality of the drawing
mode: "",
// width: Number
// Width of the canvas
width:0,
//
// height: Number
// Height of the canvas
height:0,
//
// defaults : Object
// Optional replacements for native defaults.
// plugins: Object
// Key values of plugins that apply to canvas.
//
constructor: function(/* Object */props, /* HTMLNode */node){
// summary:
// Drawing is not a Dijit. This is the master method.
// NOTE:
// props is always null since this is not a real widget
// Will change when Drawing can be created programmatically.
//
var def = dojo.attr(node, "defaults");
if(def){
dojox.drawing.defaults = dojo.getObject(def);
}
this.defaults = dojox.drawing.defaults;
this.id = node.id;
dojox.drawing.register(this, "drawing");
this.mode = (props.mode || dojo.attr(node, "mode") || "").toLowerCase();
var box = dojo.contentBox(node);
this.width = box.w;
this.height = box.h;
this.util = dojox.drawing.util.common;
this.util.register(this); // So Toolbar can find this Drawing DEPRECATED
this.keys = dojox.drawing.manager.keys;
this.mouse = new dojox.drawing.manager.Mouse({util:this.util, keys:this.keys, id:this.mode=="ui"?"MUI":"mse"});
this.mouse.setEventMode(this.mode);
this.tools = {};
this.stencilTypes = {};
this.stencilTypeMap = {};
this.srcRefNode = node; // need this?
this.domNode = node;
var str = dojo.attr(node, "plugins"); // FIXME: get this from props if available
if(str){
this.plugins = eval(str);
}else{
this.plugins = [];
}
this.widgetId = this.id;
dojo.attr(this.domNode, "widgetId", this.widgetId);
// If Dijit is available in the page, register with it
if(dijit && dijit.registry){
dijit.registry.add(this);
console.log("using dijit")
}else{
// else fake dijit.byId
// FIXME: This seems pretty hacky.
// Maybe should just encourage jsId
dijit.registry = {
objs:{},
add:function(obj){
this.objs[obj.id] = obj;
}
};
dijit.byId = function(id){
return dijit.registry.objs[id];
};
dijit.registry.add(this);
}
var stencils = dojox.drawing.getRegistered("stencil");
for(var nm in stencils){
this.registerTool(stencils[nm].name);
}
var tools = dojox.drawing.getRegistered("tool");
for(nm in tools){
this.registerTool(tools[nm].name);
}
var plugs = dojox.drawing.getRegistered("plugin");
for(nm in plugs){
this.registerTool(plugs[nm].name);
}
this._createCanvas();
},
_createCanvas: function(){
console.info("drawing create canvas...");
this.canvas = new dojox.drawing.manager.Canvas({
srcRefNode:this.domNode,
util:this.util,
mouse:this.mouse,
callback: dojo.hitch(this, "onSurfaceReady")
});
this.initPlugins();
},
resize: function(/* Object */box){
// summary:
// Resizes the canvas.
// If within a ContentPane this will get called automatically.
// Can also be called directly.
//
box && dojo.style(this.domNode, {
width:box.w+"px",
height:box.h+"px"
});
if(!this.canvas){
this._createCanvas();
}else if(box){
this.canvas.resize(box.w, box.h);
}
},
startup: function(){
//console.info("drawing startup")