Skip to content
This repository has been archived by the owner on Aug 23, 2018. It is now read-only.

Commit

Permalink
Pointer events in the view now bubble up
Browse files Browse the repository at this point in the history
  • Loading branch information
@DamonOehlman
DamonOehlman committed Sep 23, 2011
1 parent dd306f8 commit bcf1f37
Show file tree
Hide file tree
Showing 5 changed files with 398 additions and 261 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ apidoc
*.patch *.patch
test/qunit test/qunit
.DS_Store .DS_Store
closed-* closed-*
node_modules
214 changes: 128 additions & 86 deletions dist/tile5.cloudmade.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -86,6 +86,29 @@


reDelimitedSplit = /[\,\s]+/; reDelimitedSplit = /[\,\s]+/;



function ActivityLog() {
this.entries = [];

this._startTick = new Date().getTime();
this._lastTick = this._startTick;
};

ActivityLog.prototype.entry = function(text) {
var tick = new Date().getTime();

// add an entry
this.entries.push({
text: text,
elapsed: tick - this._lastTick,
total: tick - this._startTick
});

// update the last tick
this._lastTick = tick;
};


/** /**
# GeoJS.Pos # GeoJS.Pos
Expand Down Expand Up @@ -150,6 +173,11 @@
return (brng * RADIANS_TO_DEGREES + 360) % 360; return (brng * RADIANS_TO_DEGREES + 360) % 360;
}, },


// return the serializable clean version of the data
clean: function() {
return this.toString();
},

copy: function() { copy: function() {
return new Pos(this.lat, this.lon); return new Pos(this.lat, this.lon);
}, },
Expand Down Expand Up @@ -854,6 +882,8 @@




var GeoJS = this.GeoJS = { var GeoJS = this.GeoJS = {
ActivityLog: ActivityLog,

Pos: Pos, Pos: Pos,
Line: Line, Line: Line,
BBox: BBox, BBox: BBox,
Expand Down Expand Up @@ -3070,7 +3100,7 @@


// create a slice of the points for the visible points // create a slice of the points for the visible points
// including one point either side // including one point either side
return points.slice(max(firstIdx - 1, 0), min(lastIdx + 1, points.length)); return points.slice(max(firstIdx - 2, 0), min(lastIdx + 2, points.length));
} // if } // if


// otherwise just return the array // otherwise just return the array
Expand Down Expand Up @@ -3545,7 +3575,8 @@
// otherwise, create and load the image // otherwise, create and load the image
else { else {
var imageToLoad = new Image(); var imageToLoad = new Image();


// initialise the id
imageToLoad.id = '_ldimg' + (++imageCount); imageToLoad.id = '_ldimg' + (++imageCount);


// add the image to the loading data // add the image to the loading data
Expand All @@ -3563,6 +3594,19 @@
} // if..else } // if..else
} // loadImage } // loadImage


function resetLoadingState(imageUrl) {
// remove from the cache
delete loadingData[imageUrl];

// iterate through the loading urls and locate the url
for (var ii = loadingUrls.length; ii--; ) {
if (loadingUrls[ii] === imageUrl) {
loadingUrls.splice(ii, 1);
break;
}
} // for
} // resetLoadingState

// check for image loads every 5 seconds // check for image loads every 5 seconds
Animator.attach(checkImageLoads, 250); Animator.attach(checkImageLoads, 250);


Expand Down Expand Up @@ -3621,7 +3665,7 @@
tile.image = image; tile.image = image;


if (callback) { if (callback) {
callback(); callback(tile);
} // if } // if
}); });
} }
Expand Down Expand Up @@ -3824,6 +3868,8 @@
// initialise the context // initialise the context
context = null; context = null;
} // if } // if

return canvas;
} // createCanvas } // createCanvas


function getPreviousStyle(canvasId) { function getPreviousStyle(canvasId) {
Expand Down Expand Up @@ -4163,36 +4209,38 @@
checkBrokenPointInPath(); checkBrokenPointInPath();
} // if } // if


var _this = baseRenderer;

// create the canvas // create the canvas
createCanvas(); if (createCanvas()) {
_this = _extend(baseRenderer, {
applyStyle: applyStyle,
applyTransform: applyTransform,


var _this = _extend(baseRenderer, { drawTiles: drawTiles,
applyStyle: applyStyle,
applyTransform: applyTransform, prepArc: prepArc,

prepImage: prepImage,
drawTiles: drawTiles, prepMarker: prepMarker,

prepPoly: prepPoly,
prepArc: prepArc,
prepImage: prepImage, getCanvas: function() {
prepMarker: prepMarker, return canvas;
prepPoly: prepPoly, },


getCanvas: function() { getContext: function() {
return canvas; return context;
}, }

});
getContext: function() {
return context; // load the styles
} loadStyles();
});

// handle detaching
// load the styles _this.bind('predraw', handlePredraw);
loadStyles(); _this.bind('detach', handleDetach);

_this.bind('resize', handleResize);
// handle detaching } // if
_this.bind('predraw', handlePredraw);
_this.bind('detach', handleDetach);
_this.bind('resize', handleResize);


return _this; return _this;
}); });
Expand All @@ -4208,7 +4256,8 @@
PREFIX_LENGTH = ID_PREFIX.length, PREFIX_LENGTH = ID_PREFIX.length,
imageDiv = null, imageDiv = null,
activeTiles = {}, activeTiles = {},
currentTiles = {}; currentTiles = {},
offsetX = 0, offsetY = 0;


function createImageContainer() { function createImageContainer() {
imageDiv = DOM.create('div', 't5-tiles', DOM.styles({ imageDiv = DOM.create('div', 't5-tiles', DOM.styles({
Expand All @@ -4227,35 +4276,6 @@
view.attachFrame(imageDiv); view.attachFrame(imageDiv);
} // createImageContainer } // createImageContainer


function createTileImage(tile) {
// create the image
var image = tile.image = new Image();

// save to the tile cache so we can remove it once no longer needed
activeTiles[tile.id] = tile;

// set the image load handler
image.onload = function() {
if (currentTiles[tile.id]) {
// check that this image is still valid (it will be in the tile cache)
imageDiv.appendChild(this);
}
// otherwise, reset the image
else {
tile.image = null;
} // if..else
};

// initialise the image source
image.src = tile.url;

// initialise the image style
image.style.cssText = '-webkit-user-select: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute;';

// return the image
return image;
}

function handleDetach() { function handleDetach() {
// remove the image div from the panFrame // remove the image div from the panFrame
panFrame.removeChild(imageDiv); panFrame.removeChild(imageDiv);
Expand All @@ -4267,6 +4287,20 @@
currentTiles = {}; currentTiles = {};
} // handlePredraw } // handlePredraw


function handleTileLoad(tile) {
var image = activeTiles[tile.id] = tile.image;

// initialise the image style
image.style.cssText = '-webkit-user-select: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute;';

// add to the images div
DOM.move(image, tile.x - offsetX, tile.y - offsetY);
imageDiv.appendChild(image);

// invalidate the view
view.invalidate();
} // handleTileLoad

function handleReset(evt) { function handleReset(evt) {
removeOldObjects(activeTiles, currentTiles = {}); removeOldObjects(activeTiles, currentTiles = {});


Expand All @@ -4287,15 +4321,13 @@


// if the object is not in the current objects, remove from the scene // if the object is not in the current objects, remove from the scene
if (inactive) { if (inactive) {
if (item.image && item.image.parentNode) { if (item && item.parentNode) {
// reset the image src // TODO: investigate releasing image effectively
item.image.src = ''; // other mapping libraries have implemented techniques, but then removed them
// based on unpredicatable behaviour in some mobile browsers


// remove the image from the dom // remove the image from the dom
imageDiv.removeChild(item.image); imageDiv.removeChild(item);

// reset to null
item.image = null;
} // if } // if


// add to the deleted keys // add to the deleted keys
Expand All @@ -4313,26 +4345,26 @@


function drawTiles(viewport, tiles, okToLoad) { function drawTiles(viewport, tiles, okToLoad) {
var tile, var tile,
image, image;
offsetX = viewport.x,
offsetY = viewport.y; // save the x and y offset
offsetX = viewport.x;
offsetY = viewport.y;


// draw the tiles // draw the tiles
for (var ii = tiles.length; ii--; ) { for (var ii = tiles.length; ii--; ) {
tile = tiles[ii]; tile = tiles[ii];
image = activeTiles[tile.id];


if (tile.url) { if (image) {
// get the tile image DOM.move(image, tile.x - offsetX, tile.y - offsetY);
image = tile.image || (okToLoad ? createTileImage(tile) : null); }

else if (okToLoad && (! (tile.loaded || tile.loading))) {
// if we have an image, then move it tile.load(handleTileLoad);
if (image) {
DOM.move(image, tile.x - offsetX, tile.y - offsetY);
} // if

// flag the tile as current
currentTiles[tile.id] = tile;
} // if } // if

// flag the tile as current
currentTiles[tile.id] = tile;
} // for } // for
} // drawTiles } // drawTiles


Expand Down Expand Up @@ -4614,6 +4646,9 @@


// initialise the hit data // initialise the hit data
initHitData('down', absXY, relXY); initHitData('down', absXY, relXY);

// bubble the event up
_this.trigger('pointerDown', absXY, relXY);
} // handlePointerDown } // handlePointerDown


function handlePointerHover(evt, absXY, relXY) { function handlePointerHover(evt, absXY, relXY) {
Expand All @@ -4629,11 +4664,17 @@
dx += deltaXY.x; dx += deltaXY.x;
dy += deltaXY.y; dy += deltaXY.y;
} // if } // if

// bubble the event up
_this.trigger('pointerMove', absXY, relXY, deltaXY);
} // handlePointerMove } // handlePointerMove


function handlePointerUp(evt, absXY, relXY) { function handlePointerUp(evt, absXY, relXY) {
dragSelected(absXY, relXY, true); dragSelected(absXY, relXY, true);
pointerDown = false; pointerDown = false;

// bubble the event up
_this.trigger('pointerUp', absXY, relXY);
} // handlePointerUp } // handlePointerUp


function handleResize(evt) { function handleResize(evt) {
Expand Down Expand Up @@ -4881,6 +4922,7 @@
if (DOM) { if (DOM) {
// get the outer element // get the outer element
outer = document.getElementById(value); outer = document.getElementById(value);

if (outer) { if (outer) {
initContainer(outer); initContainer(outer);


Expand Down Expand Up @@ -5657,13 +5699,13 @@
offset: offset, offset: offset,
viewport: viewport viewport: viewport
}; };

// make the view observable // make the view observable
_observable(_this); _observable(_this);


// handle the view being resynced // handle the view being resynced
_this.bind('resize', handleResize); _this.bind('resize', handleResize);

// route auto configuration methods // route auto configuration methods
_configurable(_this, params, { _configurable(_this, params, {
container: updateContainer, container: updateContainer,
Expand Down Expand Up @@ -5714,7 +5756,7 @@


zoombar: {} zoombar: {}
}, params); }, params);

/* internals */ /* internals */


var lastBoundsChangeOffset = new GeoXY(), var lastBoundsChangeOffset = new GeoXY(),
Expand Down Expand Up @@ -5828,7 +5870,7 @@
else { else {
return zoomLevel; return zoomLevel;
} // if..else } // if..else
} // zoom } // zoom


var _self = _extend(new View(container, params), { var _self = _extend(new View(container, params), {
XY: GeoXY, XY: GeoXY,
Expand Down
Loading

0 comments on commit bcf1f37

Please sign in to comment.