dojox/drawing/ui/Toolbar.js

  • Provides:

    • dojox.drawing.ui.Toolbar
  • Requires:

    • dojox.drawing.library.icons in common
  • dojox.drawing.ui.Toolbar

    • type
      Function
    • 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"
      		});
      	});
      
       <div dojoType="dojox.drawing.ui.Toolbar" id="gfxToolbarNode" drawingId="drawingNode"
      		class="gfxToolbar" tools="all" plugs="all" selected="ellipse" orient="H"></div>
    • parameters:
      • props: (typeof )
      • node: (typeof )
    • source: [view]
      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');
           });
          }
         });
        }
  • dojox.drawing.ui.Toolbar.padding

    • type
      Number
    • summary
      The amount of spce between the top and left of the toolbar and the buttons.
  • dojox.drawing.ui.Toolbar.margin

    • type
      Number
    • summary
      The space between each button.
  • dojox.drawing.ui.Toolbar.size

    • type
      Number
    • summary
      The width and height of the button
  • dojox.drawing.ui.Toolbar.radius

    • type
      Number
    • summary
      The size of the button's rounded corner
  • dojox.drawing.ui.Toolbar.toolPlugGap

    • type
      number
    • summary
      The distnce between the tool buttons and plug buttons
      
      
      strSlelected | selected: String
      The button that should be selected at startup.
      
      strTools | tools: String
      A comma delineated list of the Stencil-tools to include in the Toolbar.
      If &quot;all&quot; is used, all registered tools are included.
      
      strPlugs | plugs: String
      A comma delineated list of the plugins to include in the Toolbar.
      If &quot;all&quot; is used, all registered plugins are included.
  • dojox.drawing.ui.Toolbar.strSelected

    • summary
  • dojox.drawing.ui.Toolbar.strTools

    • summary
  • dojox.drawing.ui.Toolbar.strPlugs

    • summary
  • dojox.drawing.ui.Toolbar.makeButtons

    • type
      Function
    • source: [view]
        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");
    • summary
      Internal. create buttons.
  • dojox.drawing.ui.Toolbar.onRenderStencil

    • type
      Function
    • parameters:
      • stencil: (typeof Object)
    • source: [view]
        if(this.drawing.defaults.clickMode){
         this.drawing.mouse.setCursor("default");
         this.selected && this.selected.deselect();
         this.selected = null;
        }
    • summary
      Stencil render event.
  • dojox.drawing.ui.Toolbar.addTool

    • type
      Function
    • source: [view]
      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
    • summary
  • dojox.drawing.ui.Toolbar.addPlugin

    • type
      Function
    • source: [view]
      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
       },

       
       addPlugin: function(){
        // TODO: add button here
    • summary
  • dojox.drawing.ui.Toolbar.addBack

    • type
      Function
    • source: [view]
        this.toolDrawing.addUI("rect", {data:{x:0, y:0, width:this.width, height:this.size + (this.padding*2), fill:"#ffffff", borderWidth:0}});
    • summary
      Internal. Adds the back, behind the toolbar.
  • dojox.drawing.ui.Toolbar.onToolClick

    • type
      Function
    • parameters:
      • button: (typeof Object)
    • source: [view]
        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)
    • summary
      Tool click event. May be connected to.
  • dojox.drawing.ui.Toolbar.onPlugClick

    • type
      Function
    • parameters:
      • button: (typeof Object)
    • source: [view]
        // summary:
        //  Plugin click event. May be connected to.
    • summary
      Plugin click event. May be connected to.
  • dojox.drawing.ui.Toolbar._mixprops

    • type
      Function
    • parameters:
      • props: (typeof Array)
      • objNode: (typeof Object | Node)
    • source: [view]
        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);
    • summary
      Internally used for mixing in props from an object or
      from a dom node.
  • dojox.drawing.ui.Toolbar.buttons

    • summary
  • dojox.drawing.ui.Toolbar.plugins

    • summary
  • dojox.drawing.ui.Toolbar.selected

    • summary
  • dojox.drawing.ui.Toolbar.util

    • summary
  • dojox.drawing.ui.Toolbar.toolDrawing

    • summary
  • dojox.drawing.ui.Toolbar.drawing

    • summary
  • dojox.drawing.ui.Toolbar.width

    • summary
  • dojox.drawing.ui.Toolbar.height

    • summary
  • dojox.drawing.ui.Toolbar.orient

    • summary
  • dojox.drawing.ui.Toolbar.horizontal

    • summary
  • dojox.drawing.ui

    • type
      Object
    • summary
  • dojox.drawing

    • type
      Object
    • summary
  • dojox

    • type
      Object
    • summary