source: Dev/branches/rest-dojo-ui/client/dojox/drawing/ui/Toolbar.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

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