source: Dev/trunk/src/client/dojox/drawing/ui/Toolbar.js @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 8.5 KB
Line 
1define(["dojo", "../library/icons", "../util/common", "../Drawing", "../manager/_registry"],
2function(dojo, icons, utilCommon, Drawing, registry){
3
4return dojo.declare("dojox.drawing.ui.Toolbar", [], {
5        // summary:
6        //              A Toolbar used for holding buttons; typically representing the Stencils
7        //              used for a DojoX Drawing.
8        // description:
9        //              Creates a GFX-based toolbar that holds GFX-based buttons. Can be either created
10        //              within the actual drawing or within a separate DOM element. When within the
11        //              drawing, the toolbar will cover a portion of the drawing; hence the option.
12        //
13        //              A Toolbar can be created programmatically or in markup. Currently markup is as
14        //              a separate DOM element and programmatic is within the drawing.
15        // example:
16        //              |       dojo.connect(myDrawing, "onSurfaceReady", function(){
17        //              |               new dojox.drawing.ui.Toolbar({
18        //              |                       drawing:myDrawing,
19        //              |                       tools:"all",
20        //              |                       plugs:"all",
21        //              |                       selected:"ellipse"
22        //              |               });
23        //              |       });
24        //
25        //              | <div dojoType="dojox.drawing.ui.Toolbar" id="gfxToolbarNode" drawingId="drawingNode"
26        //              |               class="gfxToolbar" tools="all" plugs="all" selected="ellipse" orient="H"></div>
27
28
29        constructor: function(props, node){
30                //console.warn("GFX Toolbar:", props, node)
31               
32                // no mixin. painful.
33                if(props.drawing){
34                        // programmatic
35                        this.toolDrawing = props.drawing;
36                        this.drawing = this.toolDrawing;
37                        this.width = this.toolDrawing.width;
38                        this.height = this.toolDrawing.height;
39                        this.strSelected = props.selected;
40                        this.strTools = props.tools;
41                        this.strPlugs = props.plugs;
42                        this._mixprops(["padding", "margin", "size", "radius"], props);
43                        this.addBack();
44                        this.orient = props.orient ? props.orient : false;
45                }else{
46                        // markup
47                        var box = dojo.marginBox(node);
48                        this.width = box.w;
49                        this.height = box.h;
50                        this.strSelected = dojo.attr(node, "selected");
51                        this.strTools = dojo.attr(node, "tools");
52                        this.strPlugs = dojo.attr(node, "plugs");
53                        this._mixprops(["padding", "margin", "size", "radius"], node);
54                        this.toolDrawing = new Drawing({mode:"ui"}, node);
55                        this.orient = dojo.attr(node, "orient");
56                }
57               
58                this.horizontal = this.orient ? this.orient == "H" : this.width > this.height;
59                console.log("this.hor: ",this.horizontal," orient: ",this.orient);
60                if(this.toolDrawing.ready){
61                        this.makeButtons();
62                        if(!this.strSelected && this.drawing.defaults.clickMode){ this.drawing.mouse.setCursor('default'); };
63                }else{
64                        var c = dojo.connect(this.toolDrawing, "onSurfaceReady", this, function(){
65                                //console.log("TB built")
66                                dojo.disconnect(c);
67                                this.drawing = registry.getRegistered("drawing", dojo.attr(node, "drawingId"));
68                                this.makeButtons();
69                                if(!this.strSelected && this.drawing.defaults.clickMode){
70                                        var c = dojo.connect(this.drawing, "onSurfaceReady", this, function(){
71                                        dojo.disconnect(c);
72                                        this.drawing.mouse.setCursor('default');
73                                        });
74                                }
75                        });
76                }
77               
78        },
79       
80        // padding:Number
81        //              The amount of spce between the top and left of the toolbar and the buttons.
82        padding:10,
83        // margin: Number
84        //              The space between each button.
85        margin:5,
86        // size: Number
87        //              The width and height of the button
88        size:30,
89        // radius: Number
90        //              The size of the button's rounded corner
91        radius:3,
92
93        // toolPlugGap: number
94        //              The distance between the tool buttons and plug buttons
95        toolPlugGap:20,
96       
97        // strSelected: String
98        //              The button that should be selected at startup.
99        strSelected:"",
100
101        // strTools: String
102        //              A comma delineated list of the Stencil-tools to include in the Toolbar.
103        //              If "all" is used, all registered tools are included.
104        strTools:"",
105
106        // strPlugs: String
107        //              A comma delineated list of the plugins to include in the Toolbar.
108        //              If "all" is used, all registered plugins are included.
109        strPlugs:"",
110       
111        makeButtons: function(){
112                // summary:
113                //              Internal. create buttons.
114                this.buttons = [];
115                this.plugins = [];
116       
117                var x = this.padding, y = this.padding, w = this.size, h = this.size, r = this.radius, g = this.margin,
118                                 sym = icons,
119                                 s = {place:"BR", size:2, mult:4};
120                                 
121                if(this.strTools){
122                        var toolAr = [];
123                        var tools = registry.getRegistered("tool");
124                        var toolMap = {};
125                        for(var nm in tools){
126                                var tool = utilCommon.abbr(nm);
127                                toolMap[tool] = tools[nm];
128                                if(this.strTools=="all"){
129                                        toolAr.push(tool);
130                                        var details = registry.getRegistered("tool",nm);
131                                        if(details.secondary){
132                                                toolAr.push(details.secondary.name);
133                                        }
134                                }
135                        }
136                        if(this.strTools!="all"){
137                                var toolTmp = this.strTools.split(",");
138                                dojo.forEach(toolTmp, function(tool){
139                                        tool = dojo.trim(tool);
140                                        toolAr.push(tool);
141                                        var details = registry.getRegistered("tool",toolMap[tool].name);
142                                        if(details.secondary){
143                                                toolAr.push(details.secondary.name);
144                                        }
145                                }, this);
146                                //dojo.map(toolAr, function(t){ return dojo.trim(t); });
147                        }
148                       
149                        dojo.forEach(toolAr, function(t){
150                                t = dojo.trim(t);
151                                var secondary = false;
152                                if(t.indexOf("Secondary")>-1){
153                                        var prim = t.substring(0,t.indexOf("Secondary"));
154                                        var sec = registry.getRegistered("tool",toolMap[prim].name).secondary;
155                                        var label = sec.label;
156                                        this[t] = sec.funct;
157                                        if(sec.setup){ dojo.hitch(this, sec.setup)(); };
158                                        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]});
159                                        if(sec.postSetup){ dojo.hitch(this, sec.postSetup, btn)(); };
160                                        secondary = true;
161                                } else {
162                                        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"});
163                                }
164                                registry.register(btn, "button");
165                                this.buttons.push(btn);
166                                if(this.strSelected==t){
167                                        btn.select();
168                                        this.selected = btn;
169                                        this.drawing.setTool(btn.toolType);
170                                }
171                                if(this.horizontal){
172                                        x += h + g;
173                                }else{
174                                        var space = secondary ? h/2 + g : h + g;
175                                        y += space;
176                                }
177                        }, this);
178                }
179               
180                if(this.horizontal){
181                        x += this.toolPlugGap;
182                }else{
183                        y += this.toolPlugGap;
184                }
185               
186                if(this.strPlugs){
187                        var plugAr = [];
188                        var plugs = registry.getRegistered("plugin");
189                        var plugMap = {};
190                        for(var nm in plugs){
191                                var abbr = utilCommon.abbr(nm);
192                                plugMap[abbr] = plugs[nm];
193                                if(this.strPlugs=="all"){ plugAr.push(abbr); }
194                        }
195                        if(this.strPlugs!="all"){
196                                plugAr = this.strPlugs.split(",");
197                                dojo.map(plugAr, function(p){ return dojo.trim(p); });
198                        }
199                       
200                        dojo.forEach(plugAr, function(p){
201                                var t = dojo.trim(p);
202                                //console.log("   plugin:", p);
203                                if(plugMap[p].button != false){
204                                        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"});
205                                        registry.register(btn, "button");
206                                        this.plugins.push(btn);
207                                       
208                                        if(this.horizontal){
209                                                x += h + g;
210                                        }else{
211                                                y += h + g;
212                                        }
213                                }
214                               
215                                var addPlug = {}
216                                plugMap[p].button == false ? addPlug = {name:this.drawing.stencilTypeMap[p]} : addPlug = {name:this.drawing.stencilTypeMap[p], options:{button:btn}};
217                                this.drawing.addPlugin(addPlug);
218                        }, this);
219                }
220               
221                dojo.connect(this.drawing, "onRenderStencil", this, "onRenderStencil");
222        },
223       
224        onRenderStencil: function(/* Object */stencil){
225                // summary:
226                //              Stencil render event.
227                if(this.drawing.defaults.clickMode){
228                        this.drawing.mouse.setCursor("default");
229                        this.selected && this.selected.deselect();
230                        this.selected = null;
231                }
232
233        },
234       
235        addTool: function(){
236                // TODO: add button here
237        },
238       
239        addPlugin: function(){
240                // TODO: add button here
241        },
242       
243        addBack: function(){
244                // summary:
245                //              Internal. Adds the back, behind the toolbar.
246                this.toolDrawing.addUI("rect", {data:{x:0, y:0, width:this.width, height:this.size + (this.padding*2), fill:"#ffffff", borderWidth:0}});
247        },
248       
249        onToolClick: function(/*Object*/button){
250                // summary:
251                //              Tool click event. May be connected to.
252
253                if(this.drawing.defaults.clickMode){ this.drawing.mouse.setCursor("crosshair"); }
254                dojo.forEach(this.buttons, function(b){
255                        if(b.id==button.id){
256                                b.select();
257                                this.selected = b;
258                                this.drawing.setTool(button.toolType)
259                        }else{
260                                if(!b.secondary){ b.deselect(); }
261                        }
262                },this)
263        },
264       
265        onPlugClick: function(/*Object*/button){
266                // summary:
267                //              Plugin click event. May be connected to.
268        },
269       
270        _mixprops: function(/*Array*/ props, /*Object|Node*/ objNode){
271                // summary:
272                //              Internally used for mixing in props from an object or
273                //              from a dom node.
274                dojo.forEach(props, function(p){
275                        this[p] = objNode.tagName
276                                ? dojo.attr(objNode, p)===null ? this[p] : dojo.attr(objNode, p)
277                                : objNode[p]===undefined ? this[p] : objNode[p];
278                }, this);
279        }
280       
281});
282});
Note: See TracBrowser for help on using the repository browser.