dojo.provide("dojox.drawing.ui.Toolbar");
dojo.require("dojox.drawing.library.icons");
dojo.declare("dojox.drawing.ui.Toolbar", [], {
// summary:
// A Toolbar used for holding buttons; typically representing the Stencils
// used for a DojoX Drawing.
// description:
// Creates a GFX-based toobar that holds GFX-based buttons. Can be either created
// within the actual drawing or within a seperate DOM element. When within the
// drawing, the toolbar will cover a portion of the drawing; hence the option.
//
// A Toolbar can be created programmtically or in markup. Currently markup is as
// a separate DOM element and programmtic is within the drawing.
// examples:
// | dojo.connect(myDrawing, "onSurfaceReady", function(){
// | new dojox.drawing.ui.Toolbar({
// | drawing:myDrawing,
// | tools:"all",
// | plugs:"all",
// | selected:"ellipse"
// | });
// | });
//
// |
// | class="gfxToolbar" tools="all" plugs="all" selected="ellipse" orient="H">
//
//
constructor: function(props, node){
//console.warn("GFX Toolbar:", props, node)
this.util = dojox.drawing.util.common;
// no mixin. painful.
if(props.drawing){
// programmatic
this.toolDrawing = props.drawing;
this.drawing = this.toolDrawing;
this.width = this.toolDrawing.width;
this.height = this.toolDrawing.height;
this.strSelected = props.selected;
this.strTools = props.tools;
this.strPlugs = props.plugs;
this._mixprops(["padding", "margin", "size", "radius"], props);
this.addBack();
this.orient = props.orient ? props.orient : false;
}else{
// markup
var box = dojo.marginBox(node);
this.width = box.w;
this.height = box.h;
this.strSelected = dojo.attr(node, "selected");
this.strTools = dojo.attr(node, "tools");
this.strPlugs = dojo.attr(node, "plugs");
this._mixprops(["padding", "margin", "size", "radius"], node);
this.toolDrawing = new dojox.drawing.Drawing({mode:"ui"}, node);
this.orient = dojo.attr(node, "orient");
}
this.horizontal = this.orient ? this.orient == "H" : this.width > this.height;
console.log("this.hor: ",this.horizontal," orient: ",this.orient);
if(this.toolDrawing.ready){
this.makeButtons();
if(!this.strSelected && this.drawing.defaults.clickMode){ this.drawing.mouse.setCursor('default'); };
}else{
var c = dojo.connect(this.toolDrawing, "onSurfaceReady", this, function(){
//console.log("TB built")
dojo.disconnect(c);
this.drawing = dojox.drawing.getRegistered("drawing", dojo.attr(node, "drawingId")); //
this.makeButtons();
if(!this.strSelected && this.drawing.defaults.clickMode){
var c = dojo.connect(this.drawing, "onSurfaceReady", this, function(){
dojo.disconnect(c);
this.drawing.mouse.setCursor('default');
});
}
});
}
},
// padding:Number
// The amount of spce between the top and left of the toolbar and the buttons.
padding:10,
// margin: Number
// The space between each button.
margin:5,
// size: Number
// The width and height of the button
size:30,
// radius: Number
// The size of the button's rounded corner
radius:3,
//
// toolPlugGap: number
// The distnce between the tool buttons and plug buttons
toolPlugGap:20,
// strSlelected | selected: String
// The button that should be selected at startup.
strSelected:"",
// strTools | tools: String
// A comma delineated list of the Stencil-tools to include in the Toolbar.
// If "all" is used, all registered tools are included.
strTools:"",
// strPlugs | plugs: String
// A comma delineated list of the plugins to include in the Toolbar.
// If "all" is used, all registered plugins are included.
strPlugs:"",
makeButtons: function(){
// summary:
// Internal. create buttons.
this.buttons = [];
this.plugins = [];
var x = this.padding, y = this.padding, w = this.size, h = this.size, r = this.radius, g = this.margin,
sym = dojox.drawing.library.icons,
s = {place:"BR", size:2, mult:4};
if(this.strTools){
var toolAr = [];
var tools = dojox.drawing.getRegistered("tool");
var toolMap = {};
for(var nm in tools){
var tool = this.util.abbr(nm);
toolMap[tool] = tools[nm];
if(this.strTools=="all"){
toolAr.push(tool);
var details = dojox.drawing.getRegistered("tool",nm);
if(details.secondary){
toolAr.push(details.secondary.name);
}
}
}
if(this.strTools!="all"){
var toolTmp = this.strTools.split(",");
dojo.forEach(toolTmp, function(tool){
tool = dojo.trim(tool);
toolAr.push(tool);
var details = dojox.drawing.getRegistered("tool",toolMap[tool].name);
if(details.secondary){
toolAr.push(details.secondary.name);
}
}, this);
//dojo.map(toolAr, function(t){ return dojo.trim(t); });
}
dojo.forEach(toolAr, function(t){
t = dojo.trim(t);
var secondary = false;
if(t.indexOf("Secondary")>-1){
var prim = t.substring(0,t.indexOf("Secondary"));
var sec = dojox.drawing.getRegistered("tool",toolMap[prim].name).secondary;
var label = sec.label;
this[t] = sec.funct;
if(sec.setup){ dojo.hitch(this, sec.setup)(); };
var btn = this.toolDrawing.addUI("button", {data:{x:x, y:y, width:w, height:h/2, r:r}, toolType:t, secondary:true, text:label, shadow:s, scope:this, callback:this[t]});
if(sec.postSetup){ dojo.hitch(this, sec.postSetup, btn)(); };
secondary = true;
} else {
var btn = this.toolDrawing.addUI("button", {data:{x:x, y:y, width:w, height:h, r:r}, toolType:t, icon:sym[t], shadow:s, scope:this, callback:"onToolClick"});
}
dojox.drawing.register(btn, "button");
this.buttons.push(btn);
if(this.strSelected==t){
btn.select();
this.selected = btn;
this.drawing.setTool(btn.toolType);
}
if(this.horizontal){
x += h + g;
}else{
var space = secondary ? h/2 + g : h + g;
y += space;
}
}, this);
}
if(this.horizontal){
x += this.toolPlugGap;
}else{
y += this.toolPlugGap;
}
if(this.strPlugs){
var plugAr = [];
var plugs = dojox.drawing.getRegistered("plugin");
var plugMap = {};
for(var nm in plugs){
var abbr = this.util.abbr(nm);
plugMap[abbr] = plugs[nm];
if(this.strPlugs=="all"){ plugAr.push(abbr); }
}
if(this.strPlugs!="all"){
plugAr = this.strPlugs.split(",");
dojo.map(plugAr, function(p){ return dojo.trim(p); });
}
dojo.forEach(plugAr, function(p){
var t = dojo.trim(p);
//console.log(" plugin:", p);
if(plugMap[p].button != false){
var btn = this.toolDrawing.addUI("button", {data:{x:x, y:y, width:w, height:h, r:r}, toolType:t, icon:sym[t], shadow:s, scope:this, callback:"onPlugClick"});
dojox.drawing.register(btn, "button");
this.plugins.push(btn);
if(this.horizontal){
x += h + g;
}else{
y += h + g;
}
}
var addPlug = {}
plugMap[p].button == false ? addPlug = {name:this.drawing.stencilTypeMap[p]} : addPlug = {name:this.drawing.stencilTypeMap[p], options:{button:btn}};
this.drawing.addPlugin(addPlug);
}, this);
}
dojo.connect(this.drawing, "onRenderStencil", this, "onRenderStencil");
},
onRenderStencil: function(/* Object */stencil){
// summary:
// Stencil render event.
if(this.drawing.defaults.clickMode){
this.drawing.mouse.setCursor("default");
this.selected && this.selected.deselect();
this.selected = null;
}
},
addTool: function(){
// TODO: add button here