[OpenLayers-Commits] r10885 - in sandbox/elemoine/kinetic: examples
lib lib/OpenLayers lib/OpenLayers/Control lib/OpenLayers/Handler
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Wed Nov 10 15:55:05 EST 2010
Author: erilem
Date: 2010-11-10 12:55:05 -0800 (Wed, 10 Nov 2010)
New Revision: 10885
Added:
sandbox/elemoine/kinetic/examples/kinetic.html
sandbox/elemoine/kinetic/lib/OpenLayers/Kinetic.js
Modified:
sandbox/elemoine/kinetic/lib/OpenLayers.js
sandbox/elemoine/kinetic/lib/OpenLayers/Control/DragPan.js
sandbox/elemoine/kinetic/lib/OpenLayers/Handler/Drag.js
Log:
first Kinetic Dragging bits
Added: sandbox/elemoine/kinetic/examples/kinetic.html
===================================================================
--- sandbox/elemoine/kinetic/examples/kinetic.html (rev 0)
+++ sandbox/elemoine/kinetic/examples/kinetic.html 2010-11-10 20:55:05 UTC (rev 10885)
@@ -0,0 +1,68 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>OpenLayers Kinetic Scrolling Example</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <style type="text/css">
+ #map {
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+ var map, layer;
+ function init(){
+ map = new OpenLayers.Map({
+ div: "map",
+ resolutions: [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125],
+ panDuration: 100,
+ controls: [
+ new OpenLayers.Control.Navigation(
+ {dragPanOptions: {kineticDragging: true}}
+ )
+ ]
+ });
+ layer = new OpenLayers.Layer.TileCache("TileCache Layer",
+ ["http://c0.tilecache.osgeo.org/wms-c/cache/",
+ "http://c1.tilecache.osgeo.org/wms-c/cache/",
+ "http://c2.tilecache.osgeo.org/wms-c/cache/",
+ "http://c3.tilecache.osgeo.org/wms-c/cache/",
+ "http://c4.tilecache.osgeo.org/wms-c/cache/"],
+ "basic",
+ {
+ serverResolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625,
+ 0.0439453125, 0.02197265625, 0.010986328125,
+ 0.0054931640625, 0.00274658203125, 0.001373291015625,
+ 0.0006866455078125, 0.00034332275390625, 0.000171661376953125,
+ 0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625],
+ buffer: 4
+ }
+ );
+ map.addLayer(layer);
+ map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">TileCache Example</h1>
+
+ <div id="tags">
+ tile, cache, tilecache, wmsc, wms-c
+ </div>
+
+ <p id="shortdesc">
+ Demonstrates a TileCache layer that loads tiles from from a web
+ accessible disk-based cache only.
+ </p>
+
+ <div id="map" class="smallmap"></div>
+
+ <div id="docs">
+ This layer should be used for web accessible disk-based caches only.
+ It is not used to request new tiles from TileCache. Note that you
+ should specify resolutions explicitly on this layer so that they match
+ your TileCache configuration.
+ </div>
+ </body>
+</html>
Modified: sandbox/elemoine/kinetic/lib/OpenLayers/Control/DragPan.js
===================================================================
--- sandbox/elemoine/kinetic/lib/OpenLayers/Control/DragPan.js 2010-11-10 19:11:40 UTC (rev 10884)
+++ sandbox/elemoine/kinetic/lib/OpenLayers/Control/DragPan.js 2010-11-10 20:55:05 UTC (rev 10885)
@@ -43,8 +43,15 @@
* mouse cursor leaves the map viewport. Default is false.
*/
documentDrag: false,
-
+
/**
+ * APIProperty: kineticDragging
+ * {Boolean} Set to true to enable "kinetic scrolling" (a.k.a "inertia
+ * scrolling" when dragging. Default is false.
+ */
+ kineticDragging: false,
+
+ /**
* Method: draw
* Creates a Drag handler, using <panMap> and
* <panMapDone> as callbacks.
@@ -55,7 +62,8 @@
"done": this.panMapDone
}, {
interval: this.interval,
- documentDrag: this.documentDrag
+ documentDrag: this.documentDrag,
+ kineticDragging: this.kineticDragging
}
);
},
@@ -66,12 +74,12 @@
* Parameters:
* xy - {<OpenLayers.Pixel>} Pixel of the mouse position
*/
- panMap: function(xy) {
+ panMap: function(xy, animate) {
this.panned = true;
this.map.pan(
this.handler.last.x - xy.x,
this.handler.last.y - xy.y,
- {dragging: this.handler.dragging, animate: false}
+ {dragging: this.handler.dragging, animate: !!animate}
);
},
@@ -83,9 +91,15 @@
* Parameters:
* xy - {<OpenLayers.Pixel>} Pixel of the mouse position
*/
- panMapDone: function(xy) {
+ panMapDone: function(xy, delta) {
if(this.panned) {
this.panMap(xy);
+ // we receive a delta if kineticDragging is set
+ if(delta) {
+ this.handler.last.x = xy.x;
+ this.handler.last.y = xy.y;
+ this.panMap(xy.add(delta.x, delta.y), true);
+ }
this.panned = false;
}
},
Modified: sandbox/elemoine/kinetic/lib/OpenLayers/Handler/Drag.js
===================================================================
--- sandbox/elemoine/kinetic/lib/OpenLayers/Handler/Drag.js 2010-11-10 19:11:40 UTC (rev 10884)
+++ sandbox/elemoine/kinetic/lib/OpenLayers/Handler/Drag.js 2010-11-10 20:55:05 UTC (rev 10885)
@@ -100,6 +100,13 @@
documentEvents: null,
/**
+ * APIProperty: kineticDragging
+ * {Boolean} Set to true to enable "kinetic scrolling" (a.k.a "inertia
+ * scrolling" when dragging. Default is false.
+ */
+ kineticDragging: false,
+
+ /**
* Constructor: OpenLayers.Handler.Drag
* Returns OpenLayers.Handler.Drag
*
@@ -120,6 +127,16 @@
},
/**
+ *
+ */
+ setMap: function(map) {
+ OpenLayers.Handler.prototype.setMap.apply(this, arguments);
+ if(this.kineticDragging) {
+ this.kinetic = new OpenLayers.Kinetic({map: map});
+ }
+ },
+
+ /**
* The four methods below (down, move, up, and out) are used by subclasses
* to do their own processing related to these mouse events.
*/
@@ -192,6 +209,9 @@
this.started = true;
this.start = evt.xy;
this.last = evt.xy;
+ if(this.kineticDragging) {
+ this.kinetic.begin();
+ }
OpenLayers.Element.addClass(
this.map.viewPortDiv, "olDragDown"
);
@@ -224,19 +244,24 @@
* {Boolean} Let the event propagate.
*/
mousemove: function (evt) {
- if (this.started && !this.timeoutId && (evt.xy.x != this.last.x || evt.xy.y != this.last.y)) {
+ if(this.started && !this.timeoutId && (evt.xy.x != this.last.x || evt.xy.y != this.last.y)) {
+ if(this.kineticDragging) {
+ this.kinetic.update(evt.xy);
+ }
if(this.documentDrag === true && this.documentEvents) {
if(evt.element === document) {
this.adjustXY(evt);
- // do setEvent manually because the documentEvents are not
- // registered with the map
+ // do setEvent manually because the documentEvents are
+ // not registered with the map
this.setEvent(evt);
} else {
this.destroyDocumentEvents();
}
}
if (this.interval > 0) {
- this.timeoutId = setTimeout(OpenLayers.Function.bind(this.removeTimeout, this), this.interval);
+ this.timeoutId = setTimeout(
+ OpenLayers.Function.bind(this.removeTimeout, this),
+ this.interval);
}
this.dragging = true;
this.move(evt);
@@ -283,7 +308,11 @@
this.up(evt);
this.callback("up", [evt.xy]);
if(dragged) {
- this.callback("done", [evt.xy]);
+ var delta;
+ if(this.kineticDragging) {
+ delta = this.kinetic.end(evt.xy);
+ }
+ this.callback("done", [evt.xy, delta]);
}
document.onselectstart = this.oldOnselectstart;
}
Added: sandbox/elemoine/kinetic/lib/OpenLayers/Kinetic.js
===================================================================
--- sandbox/elemoine/kinetic/lib/OpenLayers/Kinetic.js (rev 0)
+++ sandbox/elemoine/kinetic/lib/OpenLayers/Kinetic.js 2010-11-10 20:55:05 UTC (rev 10885)
@@ -0,0 +1,92 @@
+OpenLayers.Kinetic = OpenLayers.Class({
+ /**
+ *
+ */
+ map: null,
+
+ /**
+ * In most cases changing the threshold isn't needed.
+ * px/ms
+ */
+ threshold: 0,
+
+ /**
+ *
+ */
+ points: undefined,
+
+ /**
+ *
+ */
+ initialize: function(options) {
+ OpenLayers.Util.extend(this, options);
+ },
+
+ /**
+ *
+ */
+ begin: function() {
+ this.points = [];
+ },
+
+ /**
+ *
+ */
+ update: function(xy) {
+ this.points.unshift({xy: xy, tick: new Date().getTime()});
+ if(this.points.length > 100) {
+ this.points.pop();
+ }
+ },
+
+ /**
+ *
+ */
+ end: function(xy) {
+ var map = this.map;
+ // FIXME map.panTween isn't set yet
+ //if(!map || !map.panTween ||
+ //map.panTween.easing != OpenLayers.Easing.Linear.easeOut) {
+ //return;
+ //}
+ var last, now = new Date().getTime();
+ for(var i=0, points=this.points, l=points.length, point; i<l; i++) {
+ point = points[i];
+ if(now - point.tick > 200) { // FIXME 200
+ break;
+ }
+ last = point;
+ }
+ if(!last) {
+ return;
+ }
+ var time = new Date().getTime() - last.tick;
+ var dist = Math.sqrt(Math.pow(xy.x - last.xy.x, 2) +
+ Math.pow(xy.y - last.xy.y, 2));
+ var speed = dist / time;
+ if(speed == 0 || speed < this.threshold) {
+ return;
+ }
+ var theta = Math.asin((xy.y - last.xy.y) / dist);
+ if(last.xy.x <= xy.x) {
+ theta = Math.PI - theta;
+ }
+ return this.getDelta(speed, xy, theta);
+ },
+
+ /**
+ *
+ */
+ getDelta: function(speed, curr, theta) {
+ var dist = speed * 10; /*this.map.panTween.INTERVAL */
+ var vect = {x: Math.cos(theta) * -dist,
+ y: Math.sin(theta) * dist};
+ // the following calculation corresponds to Linear.easeOut
+ //return {x: vect.x * this.map.panDuration,
+ //y: vect.y * this.map.panDuration};
+ return {x: vect.x / (-Math.pow(2, -10 * 1/this.map.panDuration) + 1),
+ y: vect.y / (-Math.pow(2, -10 * 1/this.map.panDuration) + 1)};
+ },
+
+ CLASS_NAME: "OpenLayers.Kinetic"
+});
Modified: sandbox/elemoine/kinetic/lib/OpenLayers.js
===================================================================
--- sandbox/elemoine/kinetic/lib/OpenLayers.js 2010-11-10 19:11:40 UTC (rev 10884)
+++ sandbox/elemoine/kinetic/lib/OpenLayers.js 2010-11-10 20:55:05 UTC (rev 10885)
@@ -82,6 +82,7 @@
"OpenLayers/BaseTypes/Size.js",
"OpenLayers/Console.js",
"OpenLayers/Tween.js",
+ "OpenLayers/Kinetic.js",
"Rico/Corner.js",
"Rico/Color.js",
"OpenLayers/Ajax.js",
More information about the Commits
mailing list