Context Navigation

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

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 8.5 KB

Rev	Line
[483]	1	define(["dojo", "../library/icons", "../util/common", "../Drawing", "../manager/_registry"],
	2	function(dojo, icons, utilCommon, Drawing, registry){
	3
	4	return 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.

Download in other formats: