//>>built // wrapped by build app define("dojox/drawing/ui/Toolbar", ["dijit","dojo","dojox","dojo/require!dojox/drawing/library/icons"], function(dijit,dojo,dojox){ 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" // | }); // | }); // // |
// // 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 }, addPlugin: function(){ // TODO: add button here }, addBack: function(){ // summary: // Internal. Adds the back, behind the toolbar. this.toolDrawing.addUI("rect", {data:{x:0, y:0, width:this.width, height:this.size + (this.padding*2), fill:"#ffffff", borderWidth:0}}); }, onToolClick: function(/*Object*/button){ // summary: // Tool click event. May be connected to. // if(this.drawing.defaults.clickMode){ this.drawing.mouse.setCursor("crosshair"); } dojo.forEach(this.buttons, function(b){ if(b.id==button.id){ b.select(); this.selected = b; this.drawing.setTool(button.toolType) }else{ if(!b.secondary){ b.deselect(); } } },this) }, onPlugClick: function(/*Object*/button){ // summary: // Plugin click event. May be connected to. }, _mixprops: function(/*Array*/props, /*Object | Node*/objNode){ // summary: // Internally used for mixing in props from an object or // from a dom node. dojo.forEach(props, function(p){ this[p] = objNode.tagName ? dojo.attr(objNode, p)===null ? this[p] : dojo.attr(objNode, p) : objNode[p]===undefined ? this[p] : objNode[p]; }, this); } }); });