//>>built // wrapped by build app define("dojox/drawing/manager/Canvas", ["dijit","dojo","dojox"], function(dijit,dojo,dojox){ dojo.provide("dojox.drawing.manager.Canvas"); (function(){ dojox.drawing.manager.Canvas = dojox.drawing.util.oo.declare( // summary: // Creates a dojox.gfx.surface to be used for Drawing. Note that // The 'surface' that Drawing uses is actually a dojox.gfx.group. // This allows for more versatility. // // Called internally from a dojox.Drawing. // // Note: Surface creation is asynchrous. Connect to // onSurfaceReady in Drawing. // function(/*Object*/options){ dojo.mixin(this, options); var dim = dojo.contentBox(this.srcRefNode); this.height = this.parentHeight = dim.h; this.width = this.parentWidth = dim.w; this.domNode = dojo.create("div", {id:"canvasNode"}, this.srcRefNode); dojo.style(this.domNode, { width:this.width, height:"auto" }); dojo.setSelectable(this.domNode, false); this.id = this.id || this.util.uid("surface"); console.info("create canvas"); this.gfxSurface = dojox.gfx.createSurface(this.domNode, this.width, this.height); this.gfxSurface.whenLoaded(this, function(){ setTimeout(dojo.hitch(this, function(){ this.surfaceReady = true; if(dojo.isIE){ //this.gfxSurface.rawNode.parentNode.id = this.id; }else if(dojox.gfx.renderer == "silverlight"){ this.id = this.domNode.firstChild.id }else{ //this.gfxSurface.rawNode.id = this.id; } this.underlay = this.gfxSurface.createGroup(); this.surface = this.gfxSurface.createGroup(); this.overlay = this.gfxSurface.createGroup(); this.surface.setTransform({dx:0, dy:0,xx:1,yy:1}); this.gfxSurface.getDimensions = dojo.hitch(this.gfxSurface, "getDimensions"); if(options.callback){ options.callback(this.domNode); } }),500); }); this._mouseHandle = this.mouse.register(this); }, { // zoom: [readonly] Number // The amount the canvas is zoomed zoom:1, useScrollbars: true, baseClass:"drawingCanvas", resize: function(width, height){ // summary: // Method used to change size of canvas. Potentially // called from a container like ContentPane. May be // called directly. // this.parentWidth = width; this.parentHeight = height; this.setDimensions(width, height); }, setDimensions: function(width, height, scrollx, scrolly){ // summary: // Internal. Changes canvas size and sets scroll position. // Do not call this, use resize(). // // changing the size of the surface and setting scroll // if items are off screen var sw = this.getScrollWidth(); //+ 10; this.width = Math.max(width, this.parentWidth); this.height = Math.max(height, this.parentHeight); if(this.height>this.parentHeight){ this.width -= sw; } if(this.width>this.parentWidth){ this.height -= sw; } this.mouse.resize(this.width,this.height); this.gfxSurface.setDimensions(this.width, this.height); this.domNode.parentNode.scrollTop = scrolly || 0; this.domNode.parentNode.scrollLeft = scrollx || 0; if(this.useScrollbars){ //console.info("Set Canvas Scroll", (this.height > this.parentHeight), this.height, this.parentHeight) dojo.style(this.domNode.parentNode, { overflowY: this.height > this.parentHeight ? "scroll" : "hidden", overflowX: this.width > this.parentWidth ? "scroll" : "hidden" }); }else{ dojo.style(this.domNode.parentNode, { overflowY: "hidden", overflowX: "hidden" }); } }, setZoom: function(zoom){ // summary: // Internal. Zooms canvas in and out. this.zoom = zoom; this.surface.setTransform({xx:zoom, yy:zoom}); this.setDimensions(this.width*zoom, this.height*zoom) }, onScroll: function(){ // summary: // Event fires on scroll.NOT IMPLEMENTED }, getScrollOffset: function(){ // summary: // Get the scroll position of the canvas return { top:this.domNode.parentNode.scrollTop, left:this.domNode.parentNode.scrollLeft }; // Object }, getScrollWidth: function(){ // summary: // Special method used to detect the width (and height) // of the browser scrollbars. Becomes memoized. // var p = dojo.create('div'); p.innerHTML = '
'; var div = p.firstChild; dojo.body().appendChild(div); var noscroll = dojo.contentBox(div).h; dojo.style(div, "overflow", "scroll"); var scrollWidth = noscroll - dojo.contentBox(div).h; dojo.destroy(div); this.getScrollWidth = function(){ return scrollWidth; }; return scrollWidth; // Object } } ); })(); });