diff options
Diffstat (limited to 'js/dojo-1.7.2/dojox/drawing/ui')
| -rw-r--r-- | js/dojo-1.7.2/dojox/drawing/ui/Button.js | 230 | ||||
| -rw-r--r-- | js/dojo-1.7.2/dojox/drawing/ui/Toolbar.js | 284 | ||||
| -rw-r--r-- | js/dojo-1.7.2/dojox/drawing/ui/Tooltip.js | 119 | ||||
| -rw-r--r-- | js/dojo-1.7.2/dojox/drawing/ui/dom/Pan.js | 213 | ||||
| -rw-r--r-- | js/dojo-1.7.2/dojox/drawing/ui/dom/Toolbar.js | 211 | ||||
| -rw-r--r-- | js/dojo-1.7.2/dojox/drawing/ui/dom/Zoom.js | 134 |
6 files changed, 1191 insertions, 0 deletions
diff --git a/js/dojo-1.7.2/dojox/drawing/ui/Button.js b/js/dojo-1.7.2/dojox/drawing/ui/Button.js new file mode 100644 index 0000000..7407610 --- /dev/null +++ b/js/dojo-1.7.2/dojox/drawing/ui/Button.js @@ -0,0 +1,230 @@ +//>>built +// wrapped by build app +define("dojox/drawing/ui/Button", ["dijit","dojo","dojox"], function(dijit,dojo,dojox){ +dojo.provide("dojox.drawing.ui.Button"); + +dojox.drawing.ui.Button = dojox.drawing.util.oo.declare( + // summary: + // Creates a clickable button in "UI" mode of the drawing. + // description: + // Creates a 4-state button: normal, hover, active, selected. + // Optionally may include button text or an icon. + function(options){ + options.subShape = true; + dojo.mixin(this, options); + //console.log(" button:", this); + this.width = options.data.width || options.data.rx*2; + this.height = options.data.height || options.data.ry*2; + this.y = options.data.y || options.data.cy - options.data.ry; + // + this.id = this.id || this.util.uid(this.type); + this.util.attr(this.container, "id", this.id); + if(this.callback){ + this.hitched = dojo.hitch(this.scope || window, this.callback, this); + } + + // Rectangle itself must be "ui" for radio buttons to work. + // This is a work-around for messy code associated with drawingType; + // see http://www.andestutor.org/bugzilla/show_bug.cgi?id=1745 + options.drawingType="ui"; + // Choose between rectangle and ellipse based on options + if(options.data.width && options.data.height){ + this.shape = new dojox.drawing.stencil.Rect(options); + }else{ + this.shape = new dojox.drawing.stencil.Ellipse(options); + } + + var setGrad = function(s, p, v){ + dojo.forEach(["norm", "over", "down", "selected"], function(nm){ + s[nm].fill[p] = v; + }); + }; + // for button backs, not for icons + setGrad(this.style.button, "y2", this.height + this.y); + setGrad(this.style.button, "y1", this.y); + + if(options.icon && !options.icon.text){ + var constr = this.drawing.getConstructor(options.icon.type); + var o = this.makeOptions(options.icon); + o.data = dojo.mixin(o.data, this.style.button.icon.norm); + + if(o.data && o.data.borderWidth===0){ + o.data.fill = this.style.button.icon.norm.fill = o.data.color; + }else if(options.icon.type=="line" || (options.icon.type=="path" && !options.icon.closePath)){ + this.style.button.icon.selected.color = this.style.button.icon.selected.fill; + }else{ + //o.data.fill = this.style.button.icon.norm.fill = o.data.color; + } + this.icon = new constr(o); + //console.log(" button:", this.toolType, this.style.button.icon) + }else if(options.text || (options.icon && options.icon.text)){ + //console.warn("button text:", options.text || options.icon.text) + o = this.makeOptions(options.text || options.icon.text); + o.data.color = this.style.button.icon.norm.color; //= o.data.fill; + this.style.button.icon.selected.color = this.style.button.icon.selected.fill; + this.icon = new dojox.drawing.stencil.Text(o); + this.icon.attr({ + height: this.icon._lineHeight, + y:((this.height-this.icon._lineHeight)/2)+this.y + }); + } + + var c = this.drawing.getConstructor(this.toolType); + if(c){ + this.drawing.addUI("tooltip", {data:{text:c.setup.tooltip}, button:this}); + } + + this.onOut(); + + },{ + + callback:null, + scope:null, + hitched:null, + toolType:"", + + onClick: function(/*Object*/button){ + // summary: + // Stub to connect. Event is 'this' + // Alternatively can pass in a scope and a callback + // on creation. + }, + + makeOptions: function(/*Object*/d, /*Float*/s){ + + s = s || 1; + d = dojo.clone(d); + var o = { + util: this.util, + mouse: this.mouse, + container: this.container, + subShape:true + }; + + if(typeof(d)=="string"){ + + o.data = { + x:this.data.x - 5, + y: this.data.y + 2, + width:this.data.width, + height:this.data.height, + text:d, + makeFit:true + }; + + }else if(d.points){ + //console.warn("points") + dojo.forEach(d.points, function(pt){ + pt.x = pt.x * this.data.width * .01 * s + this.data.x; + pt.y = pt.y * this.data.height * .01 * s + this.data.y; + }, this); + o.data = {}; + for(var n in d){ + if(n!="points"){ + o.data[n] = d[n]; + } + } + o.points = d.points; + + }else{ + //console.warn("data") + for(n in d){ + if(/x|width/.test(n)){ + d[n] = d[n] * this.data.width * .01 * s; + }else if(/y|height/.test(n)){ + d[n] = d[n] * this.data.height * .01 * s; + } + if(/x/.test(n) && !/r/.test(n)){ + d[n] += this.data.x; + }else if(/y/.test(n) && !/r/.test(n)){ + d[n] += this.data.y; + } + } + delete d.type; + o.data = d; + + } + o.drawingType = "ui"; + return o; + + // do style + if(d.borderWidth!==undefined){ + //console.log(" -------- bw data:", o.data) + o.data.borderWidth = d.borderWidth; + } + + return o; + }, + + enabled:true, + selected:false, + type:"drawing.library.UI.Button", + + // note: + // need to move the Stencil's shape to front, not + // its container. Therefore we can't use the Stencil's + // moveTo.. methods. + select: function(){ + this.selected = true; + if(this.icon){this.icon.attr(this.style.button.icon.selected);} + this._change(this.style.button.selected); + this.shape.shadow && this.shape.shadow.hide(); + }, + deselect: function(){ + this.selected = false; + if(this.icon){this.icon.attr(this.style.button.icon.norm);} + this.shape.shadow && this.shape.shadow.show(); + this._change(this.style.button.norm); + + }, + disable: function(){ + if(!this.enabled){ return; } + this.enabled = false; + this._change(this.style.button.disabled); + this.icon.attr({color:this.style.button.norm.color}); + }, + enable: function(){ + if(this.enabled){ return; } + this.enabled = true; + this._change(this.style.button.norm); + this.icon.attr({color:this.style.button.icon.norm.color}); + }, + + _change: function(/*Object*/sty){ + this.shape.attr(sty); + this.shape.shadow && this.shape.shadow.container.moveToBack(); + if(this.icon){this.icon.shape.moveToFront();}; + }, + onOver: function(){ + //console.log("BUTTON OVER") + if(this.selected || !this.enabled){ return; } + this._change(this.style.button.over); + }, + onOut: function(){ + if(this.selected){ return; } + this._change(this.style.button.norm); + }, + onDown: function(){ + if(this.selected || !this.enabled){ return; } + this._change(this.style.button.selected); + }, + onUp: function(){ + //console.log("BUTTON UP") + if(!this.enabled){ return; } + this._change(this.style.button.over); + if(this.hitched){ + this.hitched(); + } + this.onClick(this); + }, + attr: function(options){ + if(this.icon){this.icon.attr(options);} + } + } + +); + +dojox.drawing.register({ + name:"dojox.drawing.ui.Button" +}, "stencil"); +}); diff --git a/js/dojo-1.7.2/dojox/drawing/ui/Toolbar.js b/js/dojo-1.7.2/dojox/drawing/ui/Toolbar.js new file mode 100644 index 0000000..20bc781 --- /dev/null +++ b/js/dojo-1.7.2/dojox/drawing/ui/Toolbar.js @@ -0,0 +1,284 @@ +//>>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" + // | }); + // | }); + // + // | <div dojoType="dojox.drawing.ui.Toolbar" id="gfxToolbarNode" drawingId="drawingNode" + // | class="gfxToolbar" tools="all" plugs="all" selected="ellipse" orient="H"></div> + // + // + 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); + } + +}); +}); diff --git a/js/dojo-1.7.2/dojox/drawing/ui/Tooltip.js b/js/dojo-1.7.2/dojox/drawing/ui/Tooltip.js new file mode 100644 index 0000000..8a43a78 --- /dev/null +++ b/js/dojo-1.7.2/dojox/drawing/ui/Tooltip.js @@ -0,0 +1,119 @@ +//>>built +// wrapped by build app +define("dojox/drawing/ui/Tooltip", ["dijit","dojo","dojox","dojo/require!dojox/drawing/plugins/_Plugin"], function(dijit,dojo,dojox){ +dojo.provide("dojox.drawing.ui.Tooltip"); +dojo.require("dojox.drawing.plugins._Plugin"); + + +(function(){ + + // summary: + // Used for UI tooltips. Buttons in the toolbar. + // This file is not complete. + // + var master = null; + var MasterC = dojox.drawing.util.oo.declare( + + dojox.drawing.plugins._Plugin, + function(options){ + this.createDom(); + }, + { + show: function(button, text){ + this.domNode.innerHTML = text; + + var dx = 30; + var px = button.data.x + button.data.width; + var py = button.data.y + button.data.height; + var x = px + this.mouse.origin.x + dx; + var y = py + this.mouse.origin.y + dx; + + dojo.style(this.domNode, { + display: "inline", + left:x +"px", + top:y+"px" + }); + + var box = dojo.marginBox(this.domNode); + + this.createShape(x-this.mouse.origin.x, y-this.mouse.origin.y, box.w, box.h); + }, + + + createShape: function(x,y,w,h){ + this.balloon && this.balloon.destroy(); + var r = 5, x2 = x+w, y2 = y+h, points = []; + var add = function(){ + for(var i=0;i<arguments.length;i++){ + points.push(arguments[i]); + } + }; + + add({x:x,y:y+5}, + {t:"Q", x:x,y:y}, + {x:x+r,y:y}); + + add({t:"L", x:x2-r,y:y}); + + add({t:"Q", x:x2,y:y}, + {x:x2,y:y+r}); + + add({t:"L", x:x2,y:y2-r}); + + add({t:"Q", x:x2,y:y2}, + {x:x2-r,y:y2}); + + add({t:"L", x:x+r,y:y2}); + + add({t:"Q", x:x,y:y2}, + {x:x,y:y2-r}); + + add({t:"L", x:x,y:y+r}); + + this.balloon = this.drawing.addUI("path", {points:points}); + }, + + createDom: function(){ + this.domNode = dojo.create('span', {"class":"drawingTooltip"}, document.body); + dojo.style(this.domNode, { + display: "none", + position:"absolute" + }); + } + } + ); + + dojox.drawing.ui.Tooltip = dojox.drawing.util.oo.declare( + + dojox.drawing.plugins._Plugin, + function(options){ + if(!master){ + master = new MasterC(options); + } + if(options.stencil){ + //todo + }else if(this.button){ + this.connect(this.button, "onOver", this, "onOver"); + this.connect(this.button, "onOut", this, "onOut"); + } + + }, + { + width:300, + height:200, + onOver: function(){ + //console.log(" tooltip over", this.data.text) + master.show(this.button, this.data.text); + }, + + onOut: function(){ + //console.log(" tooltip out") + } + } + ); + + dojox.drawing.register({ + name:"dojox.drawing.ui.Tooltip" + }, "stencil"); +})(); +}); diff --git a/js/dojo-1.7.2/dojox/drawing/ui/dom/Pan.js b/js/dojo-1.7.2/dojox/drawing/ui/dom/Pan.js new file mode 100644 index 0000000..5911abc --- /dev/null +++ b/js/dojo-1.7.2/dojox/drawing/ui/dom/Pan.js @@ -0,0 +1,213 @@ +//>>built +// wrapped by build app +define("dojox/drawing/ui/dom/Pan", ["dijit","dojo","dojox","dojo/require!dojox/drawing/plugins/_Plugin"], function(dijit,dojo,dojox){ +dojo.provide("dojox.drawing.ui.dom.Pan"); +dojo.require("dojox.drawing.plugins._Plugin"); +dojo.deprecated("dojox.drawing.ui.dom.Pan", "It may not even make it to the 1.4 release.", 1.4); + +dojox.drawing.ui.dom.Pan = dojox.drawing.util.oo.declare( + // NOTE: + // dojox.drawing.ui.dom.Pan is DEPRECATED. + // This was a temporary DOM solution. Use the non-dom + // tools for Toobar and Plugins. + // + // summary: + // A plugin that allows for a scrolling canvas. An action + // tool is added to the toolbar that allows for panning. Holding + // the space bar is a shortcut to that action. The canvas will + // only pan and scroll if there are objects out of the viewable + // area. + // example: + // | <div dojoType="dojox.drawing.Toolbar" drawingId="drawingNode" class="drawingToolbar vertical"> + // | <div tool="dojox.drawing.tools.Line" selected="true">Line</div> + // | <div plugin="dojox.drawing.ui.dom.Pan" options="{}">Pan</div> + // | </div> + // + dojox.drawing.plugins._Plugin, + function(options){ + + this.domNode = options.node; + var _scrollTimeout; + dojo.connect(this.domNode, "click", this, "onSetPan"); + dojo.connect(this.keys, "onKeyUp", this, "onKeyUp"); + dojo.connect(this.keys, "onKeyDown", this, "onKeyDown"); + dojo.connect(this.anchors, "onAnchorUp", this, "checkBounds"); + dojo.connect(this.stencils, "register", this, "checkBounds"); + dojo.connect(this.canvas, "resize", this, "checkBounds"); + dojo.connect(this.canvas, "setZoom", this, "checkBounds"); + dojo.connect(this.canvas, "onScroll", this, function(){ + if(this._blockScroll){ + this._blockScroll = false; + return; + } + _scrollTimeout && clearTimeout(_scrollTimeout); + _scrollTimeout = setTimeout(dojo.hitch(this, "checkBounds"), 200); + }); + this._mouseHandle = this.mouse.register(this); + // This HAS to be called after setting initial objects or things get screwy. + //this.checkBounds(); + },{ + selected:false, + type:"dojox.drawing.ui.dom.Pan", + + onKeyUp: function(evt){ + if(evt.keyCode == 32){ + this.onSetPan(false); + } + }, + + onKeyDown: function(evt){ + if(evt.keyCode == 32){ + this.onSetPan(true); + } + }, + + onSetPan: function(/*Boolean | Event*/ bool){ + if(bool === true || bool === false){ + this.selected = !bool; + } + if(this.selected){ + this.selected = false; + dojo.removeClass(this.domNode, "selected"); + }else{ + this.selected = true; + dojo.addClass(this.domNode, "selected"); + } + this.mouse.setEventMode(this.selected ? "pan" : ""); + }, + + onPanDrag: function(obj){ + var x = obj.x - obj.last.x; + var y = obj.y - obj.last.y; + this.canvas.domNode.parentNode.scrollTop -= obj.move.y; + this.canvas.domNode.parentNode.scrollLeft -= obj.move.x; + this.canvas.onScroll(); + }, + + onStencilUp: function(obj){ + // this gets called even on click-off because of the + // issues with TextBlock deselection + this.checkBounds(); + }, + onStencilDrag: function(obj){ + // this gets called even on click-off because of the + // issues with TextBlock deselection + //this.checkBounds(); + }, + + checkBounds: function(){ + + //watch("CHECK BOUNDS DISABLED", true); return; + + + // summary: + // Scans all items on the canvas and checks if they are out of + // bounds. If so, a scroll bar (in Canvas) is shown. If the position + // is left or top, the canvas is scrolled all items are relocated + // the distance of the scroll. Ideally, it should look as if the + // items do not move. + + // logging stuff here so it can be turned on and off. This method is + // very high maintenance. + var log = function(){ + ///console.log.apply(console, arguments); + }; + var warn = function(){ + //console.warn.apply(console, arguments); + }; + //console.clear(); + //console.time("check bounds"); + var t=Infinity, r=-Infinity, b=-Infinity, l=Infinity, + sx=0, sy=0, dy=0, dx=0, + mx = this.stencils.group ? this.stencils.group.getTransform() : {dx:0, dy:0}, + sc = this.mouse.scrollOffset(), + // scY, scX: the scrollbar creates the need for extra dimension + scY = sc.left ? 10 : 0, + scX = sc.top ? 10 : 0, + // ch, cw: the current size of the canvas + ch = this.canvas.height, + cw = this.canvas.width, + z = this.canvas.zoom, + // pch, pcw: the normal size of the canvas (not scrolled) + // these could change if the container resizes. + pch = this.canvas.parentHeight, + pcw = this.canvas.parentWidth; + + + this.stencils.withSelected(function(m){ + var o = m.getBounds(); + warn("SEL BOUNDS:", o); + t = Math.min(o.y1 + mx.dy, t); + r = Math.max(o.x2 + mx.dx, r); + b = Math.max(o.y2 + mx.dy, b); + l = Math.min(o.x1 + mx.dx, l); + }); + + this.stencils.withUnselected(function(m){ + var o = m.getBounds(); + warn("UN BOUNDS:", o); + t = Math.min(o.y1, t); + r = Math.max(o.x2, r); + b = Math.max(o.y2, b); + l = Math.min(o.x1, l); + }); + + b *= z; + var xscroll = 0, yscroll = 0; + log("Bottom test", "b:", b, "z:", z, "ch:", ch, "pch:", pch, "top:", sc.top, "sy:", sy); + if(b > pch || sc.top ){ + log("*bottom scroll*"); + // item off bottom + ch = Math.max(b, pch + sc.top); + sy = sc.top; + xscroll += this.canvas.getScrollWidth(); + }else if(!sy && ch>pch){ + log("*bottom remove*"); + // item moved from bottom + ch = pch; + } + + r *= z; + if(r > pcw || sc.left){ + //log("*right scroll*"); + // item off right + cw = Math.max(r, pcw + sc.left); + sx = sc.left; + yscroll += this.canvas.getScrollWidth(); + }else if(!sx && cw>pcw){ + //log("*right remove*"); + // item moved from right + cw = pcw; + } + + // add extra space for scrollbars + // double it to give some breathing room + cw += xscroll*2; + ch += yscroll*2; + + this._blockScroll = true; + + // selected items are not transformed. The selection itself is + // and the items are on de-select + this.stencils.group && this.stencils.group.applyTransform({dx:dx, dy:dy}); + + // non-selected items are transformed + this.stencils.withUnselected(function(m){ + m.transformPoints({dx:dx, dy:dy}); + }); + + this.canvas.setDimensions(cw, ch, sx, sy); + + //console.timeEnd("check bounds"); + } + } +); + +dojox.drawing.ui.dom.Pan.setup = { + name:"dojox.drawing.ui.dom.Pan", + tooltip:"Pan Tool", + iconClass:"iconPan" +}; + +dojox.drawing.register(dojox.drawing.ui.dom.Pan.setup, "plugin"); +}); diff --git a/js/dojo-1.7.2/dojox/drawing/ui/dom/Toolbar.js b/js/dojo-1.7.2/dojox/drawing/ui/dom/Toolbar.js new file mode 100644 index 0000000..d7b0a8c --- /dev/null +++ b/js/dojo-1.7.2/dojox/drawing/ui/dom/Toolbar.js @@ -0,0 +1,211 @@ +//>>built +// wrapped by build app +define("dojox/drawing/ui/dom/Toolbar", ["dijit","dojo","dojox"], function(dijit,dojo,dojox){ +dojo.provide("dojox.drawing.ui.dom.Toolbar"); +dojo.deprecated("dojox.drawing.ui.dom.Toolbar", "It may not even make it to the 1.4 release.", 1.4); + +(function(){ + + dojo.declare("dojox.drawing.ui.dom.Toolbar", [], { + // NOTE: + // dojox.drawing.Toolbar is DEPRECATED. + // The intention never was to use HTML as buttons for a Drawing. + // This was implemented in order to finish the project for which + // Drawing was developed. + // Instead use: drawing/ui/Toolbar.js + // + // summary: + // Creates a Toolbar to be used with a DojoX Drawing. + // description: + // Currently works in markup only. A class is required with + // either horizontal or vertical as a class (IE prevented using + // either as a default). Assign an attribute of 'drawingId' with + // the id of the DojoX Drawing to which this is assigned. + // The node children will be assigned as the Tools in the toolbar. + // Plugins can also be assigned. + // The Toolbar is largely self contained and has no real public + // methods or events. the Drawing object should be used. + // + // example: + // | <div dojoType="dojox.drawing.Toolbar" drawingId="drawing" class="drawingToolbar vertical"> + // | <div tool="dojox.drawing.tools.Line" selected="false"> Line</div> + // | <div tool="dojox.drawing.tools.Rect" selected="true"> Rect</div> + // | <div plugin="dojox.drawing.plugins.tools.Zoom" options="{zoomInc:.1,minZoom:.5,maxZoom:2}">Zoom</div> + // | </div> + // + // TODO: Toolbar works in markup only. Need programmatic. + // NOTE: There are plans to make the toolbar out of dojox.gfx vectors. + // This may change the APIs in the future. + // + // baseClass:String + // The CSS style to apply to the toolbar node + baseClass:"drawingToolbar", + // buttonClass:String + // The CSS style to apply to each button node + buttonClass:"drawingButton", + // iconClass:String + // The CSS style to apply to each button icon node + iconClass:"icon", + // + constructor: function(props, node){ + // props is null from markup + dojo.addOnLoad(this, function(){ + this.domNode = dojo.byId(node); + dojo.addClass(this.domNode, this.baseClass); + this.parse(); + }); + }, + + createIcon: function(/*HTMLNode*/node, /* ? Function*/constr){ + // summary: + // Internal. Creates an icon node for each button. + // arguments: + // node: HTMLNode + // The button node. + // constr: [optional] Function + // Optional. If not supplied, an icon is not created. + // Information for each icon is derived from + // the ToolsSetup object defined at the end + // of each tool. See: stencil._Base + // + var setup = constr && constr.setup ? constr.setup : {}; + if(setup.iconClass){ + var icon = setup.iconClass ? setup.iconClass : "iconNone"; + var tip = setup.tooltip ? setup.tooltip : "Tool"; + + var iNode = dojo.create("div", {title:tip}, node); + dojo.addClass(iNode, this.iconClass); + dojo.addClass(iNode, icon); + + dojo.connect(node, "mouseup", function(evt){ + dojo.stopEvent(evt); + dojo.removeClass(node, "active"); + }); + dojo.connect(node, "mouseover", function(evt){ + dojo.stopEvent(evt); + dojo.addClass(node, "hover"); + }); + dojo.connect(node, "mousedown", this, function(evt){ + dojo.stopEvent(evt); + dojo.addClass(node, "active"); + }); + + dojo.connect(node, "mouseout", this, function(evt){ + dojo.stopEvent(evt); + dojo.removeClass(node, "hover"); + }); + } + }, + + createTool: function(/*HTMLNode*/node){ + // summary: + // Creates a button on the Toolbar that is + // a Tool, not a Plugin. Tools draw Stencils, + // Plugins do actions. + // arguments: + // node: HTMLNode + // The button node. + // + node.innerHTML = ""; + var type = dojo.attr(node, "tool"); + this.toolNodes[type] = node; + dojo.attr(node, "tabIndex", 1); + var constr = dojo.getObject(type); + + this.createIcon(node, constr); + + this.drawing.registerTool(type, constr); + dojo.connect(node, "mouseup", this, function(evt){ + dojo.stopEvent(evt); + dojo.removeClass(node, "active"); + this.onClick(type); + }); + dojo.connect(node, "mouseover", function(evt){ + dojo.stopEvent(evt); + dojo.addClass(node, "hover"); + }); + dojo.connect(node, "mousedown", this, function(evt){ + dojo.stopEvent(evt); + dojo.addClass(node, "active"); + }); + + dojo.connect(node, "mouseout", this, function(evt){ + dojo.stopEvent(evt); + dojo.removeClass(node, "hover"); + }); + }, + + parse: function(){ + // summary: + // Initializing method that reads the dom node and its + // children for tools and plugins. + // + var drawingId = dojo.attr(this.domNode, "drawingId"); + this.drawing = dojox.drawing.util.common.byId(drawingId); + !this.drawing && console.error("Drawing not found based on 'drawingId' in Toolbar. "); + this.toolNodes = {}; + var _sel; + dojo.query(">", this.domNode).forEach(function(node, i){ + node.className = this.buttonClass; + var tool = dojo.attr(node, "tool"); + var action = dojo.attr(node, "action"); + var plugin = dojo.attr(node, "plugin"); + if(tool){ + if(i==0 || dojo.attr(node, "selected")=="true"){ + _sel = tool; + } + this.createTool(node); + + }else if(plugin){ + + + + + var p = {name:plugin, options:{}}, + opt = dojo.attr(node, "options"); + if(opt){ + p.options = eval("("+opt+")"); + } + p.options.node = node; + node.innerHTML = ""; + this.drawing.addPlugin(p); + + + + + + this.createIcon(node, dojo.getObject(dojo.attr(node, "plugin"))); + } + + }, this); + this.drawing.initPlugins(); + dojo.connect(this.drawing, "setTool", this, "onSetTool"); + this.drawing.setTool(_sel); + }, + onClick: function(/*String*/type){ + // summary: + // Event fired from clicking a Tool, not a PLugin. + // Plugin clicks are handled within the plugin's class. + // arguments: + // type: Fully qualified name of class. ex: + // dojox.drawing.tools.Ellipse + // + this.drawing.setTool(type); + }, + onSetTool: function(/*String*/type){ + // summary: + // handles buttons clicks and selects or deselects + for(var n in this.toolNodes){ + if(n == type){ + dojo.addClass(this.toolNodes[type], "selected"); + this.toolNodes[type].blur(); + }else{ + dojo.removeClass(this.toolNodes[n], "selected"); + } + + } + } + }); + +})(); +}); diff --git a/js/dojo-1.7.2/dojox/drawing/ui/dom/Zoom.js b/js/dojo-1.7.2/dojox/drawing/ui/dom/Zoom.js new file mode 100644 index 0000000..39cdab6 --- /dev/null +++ b/js/dojo-1.7.2/dojox/drawing/ui/dom/Zoom.js @@ -0,0 +1,134 @@ +//>>built +// wrapped by build app +define("dojox/drawing/ui/dom/Zoom", ["dijit","dojo","dojox","dojo/require!dojox/drawing/plugins/_Plugin"], function(dijit,dojo,dojox){ +dojo.provide("dojox.drawing.ui.dom.Zoom"); +dojo.require("dojox.drawing.plugins._Plugin"); + +dojox.drawing.ui.dom.Zoom = dojox.drawing.util.oo.declare( + // NOTE: + // dojox.drawing.ui.dom.Zoom is DEPRECATED. + // This was a temporary DOM solution. Use the non-dom + // tools for Toobar and Plugins. + // + // summary: + // A plugin that allows for zooming the canvas in and out. An + // action-tool is added to the toolbar with plus, minus and 100% + // buttons. + // example: + // | <div dojoType="dojox.drawing.Toolbar" drawingId="drawingNode" class="drawingToolbar vertical"> + // | <div tool="dojox.drawing.tools.Line" selected="true">Line</div> + // | <div plugin="dojox.drawing.ui.dom.Zoom" options="{zoomInc:.1,minZoom:.5,maxZoom:2}">Zoom</div> + // | </div> + // + dojox.drawing.plugins._Plugin, + function(options){ + var cls = options.node.className; + var txt = options.node.innerHTML; + this.domNode = dojo.create("div", {id:"btnZoom", "class":"toolCombo"}, options.node, "replace"); + + this.makeButton("ZoomIn", this.topClass); + this.makeButton("Zoom100", this.midClass); + this.makeButton("ZoomOut", this.botClass); + + }, + { + type:"dojox.drawing.ui.dom.Zoom", + // + // zoomInc: Float + // The amount of zoom that will occur upon each click. + zoomInc:.1, + // + // maxZoom: Number + // The maximum the canvas can be zoomed in. 10 = 1000% + maxZoom:10, + // + // minZoom: Float + // The most the canvas can be zoomed out. .1 = 10% + minZoom:.1, + // + // zoomFactor: [readonly] Float + // The current zoom amount + zoomFactor:1, + // + // baseClass: String + // The CSS class added to the Toolbar buttons + baseClass:"drawingButton", + // + // topClass: String + // The CSS class added to the top (or left) Toolbar button + topClass:"toolComboTop", + // + // midClass: String + // The CSS class added to the middle Toolbar button + midClass:"toolComboMid", + // + // botClass: String + // The CSS class added to the bottom (or right) Toolbar button + botClass:"toolComboBot", + // + makeButton: function(name, cls){ + // summary: + // Internal. Creates one of the buttons in the zoom-button set. + // + var node = dojo.create("div", {id:"btn"+name, "class":this.baseClass+" "+cls, + innerHTML:'<div title="Zoom In" class="icon icon'+name+'"></div>'}, this.domNode); + + dojo.connect(document, "mouseup", function(evt){ + dojo.stopEvent(evt); + dojo.removeClass(node, "active"); + }); + dojo.connect(node, "mouseup", this, function(evt){ + dojo.stopEvent(evt); + dojo.removeClass(node, "active"); + this["on"+name](); // this is what calls the methods below + }); + dojo.connect(node, "mouseover", function(evt){ + dojo.stopEvent(evt); + dojo.addClass(node, "hover"); + }); + dojo.connect(node, "mousedown", this, function(evt){ + dojo.stopEvent(evt); + dojo.addClass(node, "active"); + }); + + dojo.connect(node, "mouseout", this, function(evt){ + dojo.stopEvent(evt); + dojo.removeClass(node, "hover"); + }); + + }, + + onZoomIn: function(/*Mouse Event*/evt){ + // summary: + // Handles zoom in. + // + this.zoomFactor += this.zoomInc; + this.zoomFactor = Math.min(this.zoomFactor, this.maxZoom); + this.canvas.setZoom(this.zoomFactor); + this.mouse.setZoom(this.zoomFactor); + }, + onZoom100: function(/*Mouse Event*/evt){ + // summary: + // Zooms to 100% + // + this.zoomFactor = 1; + this.canvas.setZoom(this.zoomFactor); + this.mouse.setZoom(this.zoomFactor); + }, + onZoomOut: function(/*Mouse Event*/evt){ + // summary: + // Handles zoom out. + // + this.zoomFactor -= this.zoomInc; + this.zoomFactor = Math.max(this.zoomFactor, this.minZoom); + this.canvas.setZoom(this.zoomFactor); + this.mouse.setZoom(this.zoomFactor); + } + } +); + + +//dojox.drawing.register(dojox.drawing.plugins.tools.Pan, "plugin"); + + +}); |