Context Navigation

source: Dev/trunk/src/client/dojox/charting/action2d/TouchZoomAndPan.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
Property svn:executable set to ``*
File size: 9.9 KB

Rev	Line
[483]	1	define(["dojo/_base/lang", "dojo/_base/declare", "dojo/_base/event", "dojo/sniff",
	2	"./ChartAction", "../Element", "dojo/touch", "../plot2d/common", "dojo/has!dojo-bidi?../bidi/action2d/ZoomAndPan"],
	3	function(lang, declare, eventUtil, has, ChartAction, Element, touch, common, BidiTouchZoomAndPan){
	4	var GlassView = declare(Element, {
	5	// summary:
	6	// Private internal class used by TouchZoomAndPan actions.
	7	// tags:
	8	// private
	9	constructor: function(chart){
	10	},
	11	render: function(){
	12	if(!this.isDirty()){
	13	return;
	14	}
	15	this.cleanGroup();
	16	this.group.createRect({width: this.chart.dim.width, height: this.chart.dim.height}).setFill("rgba(0,0,0,0)");
	17	},
	18	clear: function(){
	19	// summary:
	20	// Clear out any parameters set on this plot.
	21	// returns: GlassView
	22	// The reference to this plot for functional chaining.
	23	this.dirty = true;
	24	// glass view needs to be above
	25	if(this.chart.stack[0] != this){
	26	this.chart.movePlotToFront(this.name);
	27	}
	28	return this; // GlassView
	29	},
	30	getSeriesStats: function(){
	31	// summary:
	32	// Returns default stats (irrelevant for this type of plot).
	33	// returns: Object
	34	// {hmin, hmax, vmin, vmax} min/max in both directions.
	35	return lang.delegate(common.defaultStats);
	36	},
	37	initializeScalers: function(){
	38	// summary:
	39	// Does nothing (irrelevant for this type of plot).
	40	return this;
	41	},
	42	isDirty: function(){
	43	// summary:
	44	// Return whether or not this plot needs to be redrawn.
	45	// returns: Boolean
	46	// If this plot needs to be rendered, this will return true.
	47	return this.dirty;
	48	}
	49	});
	50
	51	/*=====
	52	var __TouchZoomAndPanCtorArgs = {
	53	// summary:
	54	// Additional arguments for touch zoom and pan actions.
	55	// axis: String?
	56	// Target axis name for this action. Default is "x".
	57	// scaleFactor: Number?
	58	// The scale factor applied on mouse wheel zoom. Default is 1.2.
	59	// maxScale: Number?
	60	// The max scale factor accepted by this chart action. Default is 100.
	61	// enableScroll: Boolean?
	62	// Whether touch drag gesture should scroll the chart. Default is true.
	63	// enableZoom: Boolean?
	64	// Whether touch pinch and spread gesture should zoom out or in the chart. Default is true.
	65	};
	66	=====*/
	67
	68	var TouchZoomAndPan = declare(has("dojo-bidi")? "dojox.charting.action2d.NonBidiTouchZoomAndPan" : "dojox.charting.action2d.TouchZoomAndPan", ChartAction, {
	69	// summary:
	70	// Create a touch zoom and pan action.
	71	// You can zoom out or in the data window with pinch and spread gestures except on Android 2.x and WP8 devices.
	72	// You can scroll using drag gesture.
	73	// Finally this is possible to navigate between a fit window and a zoom one using double tap gesture.
	74
	75	// the data description block for the widget parser
	76	defaultParams: {
	77	axis: "x",
	78	scaleFactor: 1.2,
	79	maxScale: 100,
	80	enableScroll: true,
	81	enableZoom: true
	82	},
	83	optionalParams: {}, // no optional parameters
	84
	85	constructor: function(chart, plot, kwArgs){
	86	// summary:
	87	// Create a new touch zoom and pan action and connect it.
	88	// chart: dojox/charting/Chart
	89	// The chart this action applies to.
	90	// kwArgs: __TouchZoomAndPanCtorArgs?
	91	// Optional arguments for the action.
	92	this._listeners = [
	93	{eventName: touch.press, methodName: "onTouchStart"},
	94	{eventName: touch.move, methodName: "onTouchMove"},
	95	{eventName: touch.release, methodName: "onTouchEnd"}
	96	];
	97	if(!kwArgs){ kwArgs = {}; }
	98	this.axis = kwArgs.axis ? kwArgs.axis : "x";
	99	this.scaleFactor = kwArgs.scaleFactor ? kwArgs.scaleFactor : 1.2;
	100	this.maxScale = kwArgs.maxScale ? kwArgs.maxScale : 100;
	101	this.enableScroll = kwArgs.enableScroll != undefined ? kwArgs.enableScroll : true;
	102	this.enableZoom = kwArgs.enableScroll != undefined ? kwArgs.enableZoom : true;
	103	this._uName = "touchZoomPan"+this.axis;
	104	this.connect();
	105	},
	106
	107	connect: function(){
	108	// summary:
	109	// Connect this action to the chart. On iOS this adds a new glass view plot
	110	// to the chart that's why Chart.render() must be called after connect.
	111	this.inherited(arguments);
	112	// this is needed to workaround issue on iOS Safari + SVG, because a touch start action
	113	// started above a item that is removed during the touch action will stop
	114	// dispatching touch events!
	115	if(this.chart.surface.declaredClass.indexOf("svg")!=-1){
	116	this.chart.addPlot(this._uName, {type: GlassView});
	117	}
	118	},
	119
	120	disconnect: function(){
	121	// summary:
	122	// Disconnect this action from the chart.
	123	if(this.chart.surface.declaredClass.indexOf("svg")!=-1){
	124	this.chart.removePlot(this._uName);
	125	}
	126	this.inherited(arguments);
	127	},
	128
	129	onTouchStart: function(event){
	130	// summary:
	131	// Called when touch is started on the chart.
	132
	133	// we always want to be above regular plots and not clipped
	134	var chart = this.chart, axis = chart.getAxis(this.axis);
	135	var length = event.touches ? event.touches.length : 1;
	136	var coord = event.touches ? event.touches[0] : event;
	137	// in case we have a double tap register previous coord
	138	var prevPageCoord = this._startPageCoord;
	139	this._startPageCoord = {x: coord.pageX, y: coord.pageY};
	140	if((this.enableZoom \|\| this.enableScroll) && chart._delayedRenderHandle){
	141	// we have pending rendering from a scroll, let's sync
	142	chart.render();
	143	}
	144	if(this.enableZoom && length >= 2){
	145	// we reset double tap
	146	this._startTime = 0;
	147	this._endPageCoord = {x: event.touches[1].pageX, y: event.touches[1].pageY};
	148	var middlePageCoord = {x: (this._startPageCoord.x + this._endPageCoord.x) / 2,
	149	y: (this._startPageCoord.y + this._endPageCoord.y) / 2};
	150	var scaler = axis.getScaler();
	151	this._initScale = axis.getWindowScale();
	152	var t = this._initData = this.plot.toData();
	153	this._middleCoord = t(middlePageCoord)[this.axis];
	154	this._startCoord = scaler.bounds.from;
	155	this._endCoord = scaler.bounds.to;
	156	}else{
	157	// double tap is only for single touch
	158	if(!event.touches \|\| event.touches.length == 1){
	159	if(!this._startTime){
	160	this._startTime = new Date().getTime();
	161	}else if((new Date().getTime() - this._startTime) < 250 &&
	162	Math.abs(this._startPageCoord.x - prevPageCoord.x) < 30 &&
	163	Math.abs(this._startPageCoord.y - prevPageCoord.y) < 30){
	164	this._startTime = 0;
	165	this.onDoubleTap(event);
	166	}else{
	167	// we missed the doubletap, we need to re-init for next time
	168	this._startTime = 0;
	169	}
	170	}else{
	171	// we missed the doubletap, we need to re-init for next time
	172	this._startTime = 0;
	173	}
	174	if(this.enableScroll){
	175	this._startScroll(axis);
	176	// needed for Android, otherwise will get a touch cancel while swiping
	177	eventUtil.stop(event);
	178	}
	179	}
	180	},
	181
	182	onTouchMove: function(event){
	183	// summary:
	184	// Called when touch is moved on the chart.
	185	var chart = this.chart, axis = chart.getAxis(this.axis);
	186	var length = event.touches ? event.touches.length : 1;
	187	var pAttr = axis.vertical?"pageY":"pageX",
	188	attr = axis.vertical?"y":"x";
	189	// any move action cancel double tap
	190	this._startTime = 0;
	191	if(this.enableZoom && length >= 2){
	192	var newMiddlePageCoord = {x: (event.touches[1].pageX + event.touches[0].pageX) / 2,
	193	y: (event.touches[1].pageY + event.touches[0].pageY) / 2};
	194	var scale = (this._endPageCoord[attr] - this._startPageCoord[attr]) /
	195	(event.touches[1][pAttr] - event.touches[0][pAttr]);
	196
	197	if(this._initScale / scale > this.maxScale){
	198	return;
	199	}
	200
	201	var newMiddleCoord = this._initData(newMiddlePageCoord)[this.axis];
	202
	203	var newStart = scale * (this._startCoord - newMiddleCoord) + this._middleCoord,
	204	newEnd = scale * (this._endCoord - newMiddleCoord) + this._middleCoord;
	205	chart.zoomIn(this.axis, [newStart, newEnd]);
	206	// avoid browser pan
	207	eventUtil.stop(event);
	208	}else if(this.enableScroll){
	209	var delta = this._getDelta(event);
	210	chart.setAxisWindow(this.axis, this._lastScale, this._initOffset - delta / this._lastFactor / this._lastScale);
	211	chart.delayedRender();
	212	// avoid browser pan
	213	eventUtil.stop(event);
	214	}
	215	},
	216
	217	onTouchEnd: function(event){
	218	// summary:
	219	// Called when touch is ended on the chart.
	220	var chart = this.chart, axis = chart.getAxis(this.axis);
	221	if((!event.touches \|\| event.touches.length == 1) && this.enableScroll){
	222	// still one touch available, let's start back from here for
	223	// potential pan
	224	var coord = event.touches ? event.touches[0] : event;
	225	this._startPageCoord = {x: coord.pageX, y: coord.pageY};
	226	this._startScroll(axis);
	227	}
	228	},
	229
	230	_startScroll: function(axis){
	231	var bounds = axis.getScaler().bounds;
	232	this._initOffset = axis.getWindowOffset();
	233	// we keep it because of delay rendering we might now always have access to the
	234	// information to compute it
	235	this._lastScale = axis.getWindowScale();
	236	this._lastFactor = bounds.span / (bounds.upper - bounds.lower);
	237	},
	238
	239	onDoubleTap: function(event){
	240	// summary:
	241	// Called when double tap is performed on the chart.
	242	var chart = this.chart, axis = chart.getAxis(this.axis);
	243	var scale = 1 / this.scaleFactor;
	244	// are we fit?
	245	if(axis.getWindowScale()==1){
	246	// fit => zoom
	247	var scaler = axis.getScaler(), start = scaler.bounds.from, end = scaler.bounds.to,
	248	oldMiddle = (start + end) / 2, newMiddle = this.plot.toData(this._startPageCoord)[this.axis],
	249	newStart = scale * (start - oldMiddle) + newMiddle, newEnd = scale * (end - oldMiddle) + newMiddle;
	250	chart.zoomIn(this.axis, [newStart, newEnd]);
	251	}else{
	252	// non fit => fit
	253	chart.setAxisWindow(this.axis, 1, 0);
	254	chart.render();
	255	}
	256	eventUtil.stop(event);
	257	},
	258
	259	_getDelta: function(event){
	260	var axis = this.chart.getAxis(this.axis),
	261	pAttr = axis.vertical?"pageY":"pageX",
	262	attr = axis.vertical?"y":"x";
	263	var coord = event.touches?event.touches[0]:event;
	264	return axis.vertical?(this._startPageCoord[attr] - coord[pAttr]):
	265	(coord[pAttr] - this._startPageCoord[attr]);
	266	}
	267	});
	268	return has("dojo-bidi")? declare("dojox.charting.action2d.TouchZoomAndPan", [TouchZoomAndPan, BidiTouchZoomAndPan]) : TouchZoomAndPan;
	269	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: