Location: A review of cardiac cellular electrophysiology models @ c47db6b2fedb / dojo-presentation / js / dojo / dojox / image / Magnifier.js

Author:
David Nickerson <david.nickerson@gmail.com>
Date:
2021-09-17 15:39:51+12:00
Desc:
tweak html formatting
Permanent Source URI:
https://models.fieldml.org/workspace/a1/rawfile/c47db6b2fedb368422c7f4d5191aeb9f319ad684/dojo-presentation/js/dojo/dojox/image/Magnifier.js
Compare... Download Source 

dojo.provide("dojox.image.Magnifier");

dojo.require("dojox.gfx");
dojo.require("dojox.image.MagnifierLite");

dojo.declare("dojox.image.Magnifier",
	[dojox.image.MagnifierLite],{
	// summary:	Adds magnification on a portion of an image element, using dojox.gfx
	//
	// description: An unobtrusive way to add an unstyled overlay
	// 		above the srcNode image element. The overlay/glass is a 
	//		scaled version of the src image (so larger images sized down
	//		are clearer).
	//
	//		over-ride the _createGlass method to create your custom surface,
	//		being sure to create an img node on that surface.

	_createGlass: function(){
		// summary: create the glassNode, and an img on a dojox.gfx surface

		// images are hard to make into workable templates, so just add outer overlay
		// and skip using dijit._Templated
		this.glassNode = dojo.doc.createElement('div');
		this.surfaceNode = this.glassNode.appendChild(dojo.doc.createElement('div'));

		dojo.addClass(this.glassNode,"glassNode");
		dojo.body().appendChild(this.glassNode);

		with(this.glassNode.style){
			height = this.glassSize + "px";
			width = this.glassSize + "px";
		}
		
		this.surface = dojox.gfx.createSurface(this.surfaceNode, this.glassSize, this.glassSize);
		this.img = this.surface.createImage({
		   src:this.domNode.src,
		   width:this._zoomSize.w,
		   height:this._zoomSize.h
		});

	},

	_placeGlass: function(e){
		// summary: position the overlay centered under the cursor
		var x = e.pageX - 2;
		var y = e.pageY - 2 ;
		var xMax = this.offset.x + this.offset.w + 2;
		var yMax = this.offset.y + this.offset.h + 2;
		
		// with svg, our mouseout connection to the image surface doesn't
		// fire, so we'r have to manually calculate offsets	
		if(x<this.offset.x || y<this.offset.y || x>xMax || y>yMax){
			this._hideGlass();
		}else{
			this.inherited(arguments);
		}
	},

	_setImage: function(e){
		// summary: set the image's offset in the clipping window relative to the mouse position

		var xOff = (e.pageX - this.offset.l) / this.offset.w;
		var yOff = (e.pageY - this.offset.t) / this.offset.h;
		var x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff);
		var y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff);
		// set the image offset
		this.img.setShape({ x: x, y:y });	

	}

});