//>>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: // |
// |
Line
// |
Pan
// |
// 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"); });