Merge pull request #660 from OpenGeoscience/css-file

Use a css file rather than inline styles.

examples/common/css/examples.css

@@ -16,4 +16,5 @@ html, body {
 #map {
  width: 100%;
  height: calc(100% - 60px);
+ overflow: hidden;
 }

package.json

@@ -62,12 +62,15 @@
  "karma-webpack": "^1.7.0",
  "mousetrap": "^1.6.0",
  "node-fs-extra": "^0.8.1",
+ "nib": "^1.1.2",
  "node-resemble": "^1.1.3",
  "phantomjs-prebuilt": "^2.1.5",
  "proj4": "^2.3.14",
  "raw-body": "^2.1.6",
  "sinon": "1.17.3",
  "style-loader": "^0.13.1",
+ "stylus": "^0.54.5",
+ "stylus-loader": "^2.4.0",
  "url-loader": "^0.5.7",
  "vgl": "0.3.10",
  "webpack": "^1.12.14",

src/annotationLayer.js

@@ -326,7 +326,7 @@ var annotationLayer = function (args) {
  var createAnnotation, actions,
  mapNode = m_this.map().node(), oldMode = m_mode;
  m_mode = arg;
- mapNode.css('cursor', m_mode ? 'crosshair' : '');
+ mapNode.toggleClass('annotation-input', !!m_mode);
  if (m_mode) {
  Mousetrap(mapNode[0]).bind('esc', function () { m_this.mode(null); });
  } else {

src/canvas/canvasRenderer.js

@@ -24,7 +24,6 @@ var canvasRenderer = function (arg) {
  renderer.call(this, arg);
 
  var m_this = this,
- m_renderAnimFrameRef = null,
  m_clearCanvas = true,
  s_init = this._init,
  s_exit = this._exit;
@@ -57,8 +56,7 @@ var canvasRenderer = function (arg) {
  var canvas = $(document.createElement('canvas'));
  m_this.context2d = canvas[0].getContext('2d');
 
- canvas.attr('class', 'canvas-canvas');
- canvas.css('display', 'block');
+ canvas.addClass('canvas-canvas');
  $(m_this.layer().node().get(0)).append(canvas);
 
  m_this.canvas(canvas);
@@ -89,32 +87,35 @@ var canvasRenderer = function (arg) {
  */
  ////////////////////////////////////////////////////////////////////////////
  this._render = function () {
- if (m_renderAnimFrameRef === null) {
- m_renderAnimFrameRef = window.requestAnimationFrame(function () {
- m_renderAnimFrameRef = null;
-
- var layer = m_this.layer(),
- map = layer.map(),
- camera = map.camera(),
- viewport = camera._viewport;
-
- // Clear the canvas.
- if (m_clearCanvas) {
- m_this.context2d.setTransform(1, 0, 0, 1, 0, 0);
- m_this.context2d.clearRect(0, 0, viewport.width, viewport.height);
- }
-
- var features = layer.features();
- for (var i = 0; i < features.length; i += 1) {
- if (features[i].visible()) {
- features[i]._renderOnCanvas(m_this.context2d, map);
- }
- }
- });
- }
+ m_this.layer().map().scheduleAnimationFrame(this._renderFrame);
  return m_this;
  };
 
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Render during an animation frame callback.
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._renderFrame = function () {
+ var layer = m_this.layer(),
+ map = layer.map(),
+ camera = map.camera(),
+ viewport = camera._viewport;
+
+ // Clear the canvas.
+ if (m_clearCanvas) {
+ m_this.context2d.setTransform(1, 0, 0, 1, 0, 0);
+ m_this.context2d.clearRect(0, 0, viewport.width, viewport.height);
+ }
+
+ var features = layer.features();
+ for (var i = 0; i < features.length; i += 1) {
+ if (features[i].visible()) {
+ features[i]._renderOnCanvas(m_this.context2d, map);
+ }
+ }
+ };
+
  ////////////////////////////////////////////////////////////////////////////
  /**
  * Exit

src/canvas/heatmapFeature.js

@@ -38,6 +38,7 @@ var canvas_heatmapFeature = function (arg) {
  m_typedClampedBuffer,
  m_typedBufferData,
  m_heatMapPosition,
+ m_heatMapTransform,
  s_exit = this._exit,
  s_init = this._init,
  s_update = this._update,
@@ -349,7 +350,9 @@ var canvas_heatmapFeature = function (arg) {
 
  context2d.setTransform(1, 0, 0, 1, 0, 0);
  context2d.clearRect(0, 0, viewport.width, viewport.height);
- layer.canvas().css({transform: '', 'transform-origin': '0px 0px'});
+ m_heatMapTransform = '';
+ map.scheduleAnimationFrame(m_this._setTransform, false);
+ layer.canvas().css({transform: ''});
 
  m_this._createCircle();
  m_this._computeGradient();
@@ -408,6 +411,16 @@ var canvas_heatmapFeature = function (arg) {
  return m_this;
  };
 
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Update the css transform for the layer as part of an animation frame.
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._setTransform = function () {
+ m_this.layer().canvas()[0].style.transform = m_heatMapTransform;
+ };
+
  ////////////////////////////////////////////////////////////////////////////
  /**
  * Animate pan (and zoom)
@@ -434,8 +447,9 @@ var canvas_heatmapFeature = function (arg) {
  ' scale(' + scale + ')' +
  ' rotate(' + ((rotation - m_heatMapPosition.rotation) * 180 / Math.PI) + 'deg)';
 
- m_this.layer().canvas()[0].style.transform = transform;
+ map.scheduleAnimationFrame(m_this._setTransform);
 
+ m_heatMapTransform = transform;
  m_heatMapPosition.lastScale = scale;
  m_heatMapPosition.lastOrigin.x = origin.x;
  m_heatMapPosition.lastOrigin.y = origin.y;

src/gl/vglRenderer.js

@@ -87,8 +87,7 @@ var vglRenderer = function (arg) {
  s_init.call(m_this);
 
  var canvas = $(document.createElement('canvas'));
- canvas.attr('class', 'webgl-canvas');
- canvas.css('display', 'block');
+ canvas.addClass('webgl-canvas');
  $(m_this.layer().node().get(0)).append(canvas);
 
  if (window.contextPreserveDrawingBuffer) {

src/index.js

@@ -30,6 +30,8 @@
 var $ = require('jquery');
 require('./polyfills');
 
+require('./main.styl');
+
 module.exports = $.extend({
  annotation: require('./annotation'),
  annotationLayer: require('./annotationLayer'),

src/layer.js

@@ -386,9 +386,7 @@ var layer = function (arg) {
  m_canvas = m_renderer.canvas();
  }
 
- if (!m_this.active()) {
- m_node.css('pointerEvents', 'none');
- }
+ m_node.toggleClass('active', m_this.active());
 
  m_initialized = true;
 
@@ -481,10 +479,8 @@ var layer = function (arg) {
 
  // Create top level div for the layer
  m_node = $(document.createElement('div'));
+ m_node.addClass('geojs-layer');
  m_node.attr('id', m_name);
- m_node.css('position', 'absolute');
- m_node.css('width', '100%');
- m_node.css('height', '100%');
  m_this.opacity(m_opacity);
 
  // set the z-index

src/main.styl

@@ -0,0 +1,47 @@
+@import '~nib/index.styl'
+
+.geojs-map
+ position relative
+
+ .geo-attribution
+ position absolute
+ right 0px
+ bottom 0px
+ padding-right 5px
+ cursor auto
+ font 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif
+ z-index 1001
+ background rgba(255,255,255,0.7)
+ clear both
+ display block
+ pointer-events auto
+
+ .geo-attribution-layer
+ padding-left 5px
+
+ .canvas-canvas
+ display block
+ transform-origin 0px 0px
+ .webgl-canvas
+ display block
+
+ .geojs-layer
+ position absolute
+ width 100%
+ height 100%
+ pointer-events none
+ &.active
+ pointer-events auto
+
+ .geo-tile-layer
+ transform-origin 0px 0px
+ line-height 0
+ font-size 0
+
+ &.annotation-input
+ cursor crosshair
+
+.geo-tile-container
+ position absolute
+ &.crop
+ overflow hidden

src/map.js

@@ -894,7 +894,7 @@ var map = function (arg) {
  throw 'Map require DIV node';
  }
 
- m_node.css('position', 'relative');
+ m_node.addClass('geojs-map');
  return m_this;
  };
 
@@ -1518,19 +1518,7 @@ var map = function (arg) {
  // generate a new attribution node
  var $a = $('<div/>')
  .addClass('geo-attribution')
- .css({
- position: 'absolute',
- right: '0px',
- bottom: '0px',
- 'padding-right': '5px',
- cursor: 'auto',
- font: '11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif',
- 'z-index': '1001',
- background: 'rgba(255,255,255,0.7)',
- clear: 'both',
- display: 'block',
- 'pointer-events': 'auto'
- }).on('mousedown', function (evt) {
+ .on('mousedown', function (evt) {
  evt.stopPropagation();
  });
 
@@ -1540,9 +1528,6 @@ var map = function (arg) {
  if (content) {
  $('<span/>')
  .addClass('geo-attribution-layer')
- .css({
- 'padding-left': '5px'
- })
  .html(content)
  .appendTo($a);
  }

src/tileLayer.js

@@ -779,17 +779,15 @@ module.exports = (function () {
  // apply a transform to place the image correctly
  container.append(tile.image);
  container.css({
- position: 'absolute',
  left: (bounds.left - parseInt(div.attr('offsetx') || 0, 10)) + 'px',
  top: (bounds.top - parseInt(div.attr('offsety') || 0, 10)) + 'px'
  });
 
  crop = this.tileCropFromBounds(tile);
  if (crop) {
- container.css({
+ container.addClass('crop').css({
  width: crop.x + 'px',
- height: crop.y + 'px',
- overflow: 'hidden'
+ height: crop.y + 'px'
  });
  }
 
@@ -1005,11 +1003,7 @@ module.exports = (function () {
  if (!node) {
  node = $(
  '<div class=geo-tile-layer data-tile-layer="' + level.toFixed() + '"/>'
- ).css({
- 'transform-origin': '0px 0px',
- 'line-height': 0,
- 'font-size': 0
- }).get(0);
+ ).get(0);
  this.canvas().append(node);
  }
  return node;

tests/cases/tileLayer.js

@@ -1332,7 +1332,7 @@ describe('geo.tileLayer', function () {
  });
  });
 
- describe('HTML renderering', function () {
+ describe('HTML rendering', function () {
  function layer_html(opts) {
  var node = $('<div class="geo-test-container" style="display: none"/>'), m, l;
  opts = opts || {};

webpack-examples.config.js

@@ -6,9 +6,6 @@ var external = require('./external.config');
 require('./examples/build');
 
 var loaders = base.module.loaders.concat([{
- test: /\.css$/,
- loader: 'style-loader!css-loader'
-}, {
  test: /\.jade$/,
  loader: 'jade'
 }, {

webpack.config.js

@@ -55,6 +55,12 @@ module.exports = {
  loaders: [{
  test: /\.json$/,
  loader: 'json-loader'
+ }, {
+ test: /\.styl$/,
+ loader: 'style-loader!css-loader!stylus-loader'
+ }, {
+ test: /\.css$/,
+ loader: 'style-loader!css-loader'
  }, {
  test: /vgl\.js$/,
  loader: 'expose?vgl!imports?mat4=gl-mat4,vec4=gl-vec4,vec3=gl-vec3,vec2=gl-vec2,$=jquery'