Skip to content

Commit c7c2db0

Browse files
mantheymanthey
committed
Merge branch 'master' into line-rendering
2 parents b8c9e26 + f55e449 commit c7c2db0

File tree

13 files changed

+111
-67
lines changed

13 files changed

+111
-67
lines changed

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,15 @@
6262
"karma-sourcemap-loader": "^0.3.7",
6363
"karma-webpack": "^1.7.0",
6464
"mousetrap": "^1.6.0",
65+
"nib": "^1.1.2",
6566
"node-resemble": "^1.1.3",
6667
"phantomjs-prebuilt": "^2.1.5",
6768
"proj4": "^2.3.14",
6869
"raw-body": "^2.1.6",
6970
"sinon": "1.17.3",
7071
"style-loader": "^0.13.1",
72+
"stylus": "^0.54.5",
73+
"stylus-loader": "^2.4.0",
7174
"url-loader": "^0.5.7",
7275
"vgl": "0.3.10",
7376
"webpack": "^1.12.14",

‎src/annotationLayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,7 @@ var annotationLayer = function (args) {
326326
var createAnnotation, actions,
327327
mapNode = m_this.map().node(), oldMode = m_mode;
328328
m_mode = arg;
329-
mapNode.css('cursor', m_mode ? 'crosshair' : '');
329+
mapNode.toggleClass('annotation-input', !!m_mode);
330330
if (m_mode) {
331331
Mousetrap(mapNode[0]).bind('esc', function () { m_this.mode(null); });
332332
} else {

‎src/canvas/canvasRenderer.js‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ var canvasRenderer = function (arg) {
2424
renderer.call(this, arg);
2525

2626
var m_this = this,
27-
m_renderAnimFrameRef = null,
2827
m_clearCanvas = true,
2928
s_init = this._init,
3029
s_exit = this._exit;
@@ -57,8 +56,7 @@ var canvasRenderer = function (arg) {
5756
var canvas = $(document.createElement('canvas'));
5857
m_this.context2d = canvas[0].getContext('2d');
5958

60-
canvas.attr('class', 'canvas-canvas');
61-
canvas.css('display', 'block');
59+
canvas.addClass('canvas-canvas');
6260
$(m_this.layer().node().get(0)).append(canvas);
6361

6462
m_this.canvas(canvas);
@@ -89,32 +87,35 @@ var canvasRenderer = function (arg) {
8987
*/
9088
////////////////////////////////////////////////////////////////////////////
9189
this._render = function () {
92-
if (m_renderAnimFrameRef === null) {
93-
m_renderAnimFrameRef = window.requestAnimationFrame(function () {
94-
m_renderAnimFrameRef = null;
95-
96-
var layer = m_this.layer(),
97-
map = layer.map(),
98-
camera = map.camera(),
99-
viewport = camera._viewport;
100-
101-
// Clear the canvas.
102-
if (m_clearCanvas) {
103-
m_this.context2d.setTransform(1, 0, 0, 1, 0, 0);
104-
m_this.context2d.clearRect(0, 0, viewport.width, viewport.height);
105-
}
106-
107-
var features = layer.features();
108-
for (var i = 0; i < features.length; i += 1) {
109-
if (features[i].visible()) {
110-
features[i]._renderOnCanvas(m_this.context2d, map);
111-
}
112-
}
113-
});
114-
}
90+
m_this.layer().map().scheduleAnimationFrame(this._renderFrame);
11591
return m_this;
11692
};
11793

94+
////////////////////////////////////////////////////////////////////////////
95+
/**
96+
* Render during an animation frame callback.
97+
*/
98+
////////////////////////////////////////////////////////////////////////////
99+
this._renderFrame = function () {
100+
var layer = m_this.layer(),
101+
map = layer.map(),
102+
camera = map.camera(),
103+
viewport = camera._viewport;
104+
105+
// Clear the canvas.
106+
if (m_clearCanvas) {
107+
m_this.context2d.setTransform(1, 0, 0, 1, 0, 0);
108+
m_this.context2d.clearRect(0, 0, viewport.width, viewport.height);
109+
}
110+
111+
var features = layer.features();
112+
for (var i = 0; i < features.length; i += 1) {
113+
if (features[i].visible()) {
114+
features[i]._renderOnCanvas(m_this.context2d, map);
115+
}
116+
}
117+
};
118+
118119
////////////////////////////////////////////////////////////////////////////
119120
/**
120121
* Exit

‎src/canvas/heatmapFeature.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ var canvas_heatmapFeature = function (arg) {
3838
m_typedClampedBuffer,
3939
m_typedBufferData,
4040
m_heatMapPosition,
41+
m_heatMapTransform,
4142
s_exit = this._exit,
4243
s_init = this._init,
4344
s_update = this._update,
@@ -349,7 +350,9 @@ var canvas_heatmapFeature = function (arg) {
349350

350351
context2d.setTransform(1, 0, 0, 1, 0, 0);
351352
context2d.clearRect(0, 0, viewport.width, viewport.height);
352-
layer.canvas().css({transform: '', 'transform-origin': '0px 0px'});
353+
m_heatMapTransform = '';
354+
map.scheduleAnimationFrame(m_this._setTransform, false);
355+
layer.canvas().css({transform: ''});
353356

354357
m_this._createCircle();
355358
m_this._computeGradient();
@@ -408,6 +411,16 @@ var canvas_heatmapFeature = function (arg) {
408411
return m_this;
409412
};
410413

414+
////////////////////////////////////////////////////////////////////////////
415+
/**
416+
* Update the css transform for the layer as part of an animation frame.
417+
* @protected
418+
*/
419+
////////////////////////////////////////////////////////////////////////////
420+
this._setTransform = function () {
421+
m_this.layer().canvas()[0].style.transform = m_heatMapTransform;
422+
};
423+
411424
////////////////////////////////////////////////////////////////////////////
412425
/**
413426
* Animate pan (and zoom)
@@ -434,8 +447,9 @@ var canvas_heatmapFeature = function (arg) {
434447
' scale(' + scale + ')' +
435448
' rotate(' + ((rotation - m_heatMapPosition.rotation) * 180 / Math.PI) + 'deg)';
436449

437-
m_this.layer().canvas()[0].style.transform = transform;
450+
map.scheduleAnimationFrame(m_this._setTransform);
438451

452+
m_heatMapTransform = transform;
439453
m_heatMapPosition.lastScale = scale;
440454
m_heatMapPosition.lastOrigin.x = origin.x;
441455
m_heatMapPosition.lastOrigin.y = origin.y;

‎src/gl/vglRenderer.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,7 @@ var vglRenderer = function (arg) {
8787
s_init.call(m_this);
8888

8989
var canvas = $(document.createElement('canvas'));
90-
canvas.attr('class', 'webgl-canvas');
91-
canvas.css('display', 'block');
90+
canvas.addClass('webgl-canvas');
9291
$(m_this.layer().node().get(0)).append(canvas);
9392

9493
if (window.contextPreserveDrawingBuffer) {

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
var $ = require('jquery');
3131
require('./polyfills');
3232

33+
require('./main.styl');
34+
3335
module.exports = $.extend({
3436
annotation: require('./annotation'),
3537
annotationLayer: require('./annotationLayer'),

‎src/layer.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -386,9 +386,7 @@ var layer = function (arg) {
386386
m_canvas = m_renderer.canvas();
387387
}
388388

389-
if (!m_this.active()) {
390-
m_node.css('pointerEvents', 'none');
391-
}
389+
m_node.toggleClass('active', m_this.active());
392390

393391
m_initialized = true;
394392

@@ -481,10 +479,8 @@ var layer = function (arg) {
481479

482480
// Create top level div for the layer
483481
m_node = $(document.createElement('div'));
482+
m_node.addClass('geojs-layer');
484483
m_node.attr('id', m_name);
485-
m_node.css('position', 'absolute');
486-
m_node.css('width', '100%');
487-
m_node.css('height', '100%');
488484
m_this.opacity(m_opacity);
489485

490486
// set the z-index

‎src/main.styl‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@import '~nib/index.styl'
2+
3+
.geojs-map
4+
position relative
5+
6+
.geo-attribution
7+
position absolute
8+
right 0px
9+
bottom 0px
10+
padding-right 5px
11+
cursor auto
12+
font 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif
13+
z-index 1001
14+
background rgba(255,255,255,0.7)
15+
clear both
16+
display block
17+
pointer-events auto
18+
19+
.geo-attribution-layer
20+
padding-left 5px
21+
22+
.canvas-canvas
23+
display block
24+
transform-origin 0px 0px
25+
.webgl-canvas
26+
display block
27+
28+
.geojs-layer
29+
position absolute
30+
width 100%
31+
height 100%
32+
pointer-events none
33+
&.active
34+
pointer-events auto
35+
36+
.geo-tile-layer
37+
transform-origin 0px 0px
38+
line-height 0
39+
font-size 0
40+
41+
&.annotation-input
42+
cursor crosshair
43+
44+
.geo-tile-container
45+
position absolute
46+
&.crop
47+
overflow hidden

‎src/map.js‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -894,7 +894,7 @@ var map = function (arg) {
894894
throw 'Map require DIV node';
895895
}
896896

897-
m_node.css('position', 'relative');
897+
m_node.addClass('geojs-map');
898898
return m_this;
899899
};
900900

@@ -1518,19 +1518,7 @@ var map = function (arg) {
15181518
// generate a new attribution node
15191519
var $a = $('<div/>')
15201520
.addClass('geo-attribution')
1521-
.css({
1522-
position: 'absolute',
1523-
right: '0px',
1524-
bottom: '0px',
1525-
'padding-right': '5px',
1526-
cursor: 'auto',
1527-
font: '11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif',
1528-
'z-index': '1001',
1529-
background: 'rgba(255,255,255,0.7)',
1530-
clear: 'both',
1531-
display: 'block',
1532-
'pointer-events': 'auto'
1533-
}).on('mousedown', function (evt) {
1521+
.on('mousedown', function (evt) {
15341522
evt.stopPropagation();
15351523
});
15361524

@@ -1540,9 +1528,6 @@ var map = function (arg) {
15401528
if (content) {
15411529
$('<span/>')
15421530
.addClass('geo-attribution-layer')
1543-
.css({
1544-
'padding-left': '5px'
1545-
})
15461531
.html(content)
15471532
.appendTo($a);
15481533
}

‎src/tileLayer.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -779,17 +779,15 @@ module.exports = (function () {
779779
// apply a transform to place the image correctly
780780
container.append(tile.image);
781781
container.css({
782-
position: 'absolute',
783782
left: (bounds.left - parseInt(div.attr('offsetx') || 0, 10)) + 'px',
784783
top: (bounds.top - parseInt(div.attr('offsety') || 0, 10)) + 'px'
785784
});
786785

787786
crop = this.tileCropFromBounds(tile);
788787
if (crop) {
789-
container.css({
788+
container.addClass('crop').css({
790789
width: crop.x + 'px',
791-
height: crop.y + 'px',
792-
overflow: 'hidden'
790+
height: crop.y + 'px'
793791
});
794792
}
795793

@@ -1005,11 +1003,7 @@ module.exports = (function () {
10051003
if (!node) {
10061004
node = $(
10071005
'<div class=geo-tile-layer data-tile-layer="' + level.toFixed() + '"/>'
1008-
).css({
1009-
'transform-origin': '0px 0px',
1010-
'line-height': 0,
1011-
'font-size': 0
1012-
}).get(0);
1006+
).get(0);
10131007
this.canvas().append(node);
10141008
}
10151009
return node;

0 commit comments

Comments
 (0)