diff options
Diffstat (limited to 'js/dojo/dojox/drawing/ui/dom')
| -rw-r--r-- | js/dojo/dojox/drawing/ui/dom/Pan.js | 213 | ||||
| -rw-r--r-- | js/dojo/dojox/drawing/ui/dom/Toolbar.js | 211 | ||||
| -rw-r--r-- | js/dojo/dojox/drawing/ui/dom/Zoom.js | 134 |
3 files changed, 558 insertions, 0 deletions
diff --git a/js/dojo/dojox/drawing/ui/dom/Pan.js b/js/dojo/dojox/drawing/ui/dom/Pan.js new file mode 100644 index 0000000..5911abc --- /dev/null +++ b/js/dojo/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/dojox/drawing/ui/dom/Toolbar.js b/js/dojo/dojox/drawing/ui/dom/Toolbar.js new file mode 100644 index 0000000..d7b0a8c --- /dev/null +++ b/js/dojo/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/dojox/drawing/ui/dom/Zoom.js b/js/dojo/dojox/drawing/ui/dom/Zoom.js new file mode 100644 index 0000000..39cdab6 --- /dev/null +++ b/js/dojo/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"); + + +}); |