Merge pull request #7239 from ahocevar/linestring-text

Render text along lines

test/rendering/ol/style/text.test.js

@@ -1,7 +1,9 @@
-
-
 goog.require('ol.Feature');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.MultiLineString');
+goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
+goog.require('ol.geom.Polygon');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Vector');
@@ -90,6 +92,54 @@ describe('ol.rendering.style.Text', function() {
       vectorSource.addFeature(feature);
     }
 
+    var nicePath = [
+      20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
+      180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
+    ];
+    var uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
+    var polygon = [151, 17, 163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
+
+    function createLineString(coords, textAlign, maxAngle) {
+      var geom = new ol.geom.LineString();
+      geom.setFlatCoordinates('XY', coords);
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: 'red'
+        }),
+        text: new ol.style.Text({
+          text: 'Hello world',
+          font: 'bold 14px sans-serif',
+          textAlign: textAlign,
+          maxAngle: maxAngle,
+          placement: 'line',
+          stroke: new ol.style.Stroke({
+            color: 'white'
+          })
+        })
+      });
+      var feature = new ol.Feature(geom);
+      feature.setStyle(style);
+      vectorSource.addFeature(feature);
+
+      geom = geom.clone();
+      geom.translate(0, 5);
+      feature = new ol.Feature(geom);
+      style = style.clone();
+      style.getText().setTextBaseline('top');
+      feature.setStyle(style);
+      vectorSource.addFeature(feature);
+
+      geom = geom.clone();
+      geom.translate(0, -10);
+      feature = new ol.Feature(geom);
+      style = style.clone();
+      style.getText().setTextBaseline('bottom');
+      feature.setStyle(style);
+      vectorSource.addFeature(feature);
+
+      map.getView().fit(vectorSource.getExtent());
+    }
+
     it('tests the canvas renderer without rotation', function(done) {
       createMap('canvas');
       createFeatures();
@@ -191,6 +241,136 @@ describe('ol.rendering.style.Text', function() {
       expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 5, done);
     });
 
+    describe('Text along an ugly upside down path, keep text upright', function() {
+
+      it('renders text along a linestring with auto-align', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-auto.png', 3.6, done);
+      });
+
+      it('renders text along a linestring with `textAlign: \'center\'`', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'center');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-center.png', 3.6, done);
+      });
+
+      it('omits text along a linestring with `textAlign: \'left\'` when > maxAngle', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'left');
+        vectorSource.getFeatures()[0].getStyle().getText().setTextAlign('left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-omit.png', IMAGE_TOLERANCE, done);
+      });
+
+      it('omits text along a linestring with `textAlign: \'right\'` when > maxAngle', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'right');
+        vectorSource.getFeatures()[0].getStyle().getText().setTextAlign('left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-omit.png', IMAGE_TOLERANCE, done);
+      });
+
+      it('renders text along a linestring with `textAlign: \'left\'` and no angle limit', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'left', Infinity);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-left.png', 3.5, done);
+      });
+
+    });
+
+    describe('Text along a nice path', function() {
+
+      it('renders text along a linestring', function(done) {
+        createMap('canvas');
+        createLineString(nicePath);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice.png', 2.5, done);
+      });
+
+      it('renders text along a linestring with `textAlign: \'left\'`', function(done) {
+        createMap('canvas');
+        createLineString(nicePath, 'left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice.png', 2.5, done);
+      });
+
+      it('renders text along a rotated linestring', function(done) {
+        createMap('canvas');
+        map.getView().setRotation(Math.PI);
+        createLineString(nicePath);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-rotated.png', 4.5, done);
+      });
+
+      it('renders text along a rotated linestring with `textAlign: \'left\'`', function(done) {
+        createMap('canvas');
+        map.getView().setRotation(Math.PI);
+        createLineString(nicePath, 'left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice-rotated.png', 4.5, done);
+      });
+    });
+
+    it('renders text along a MultiLineString', function(done) {
+      createMap('canvas');
+      var line = new ol.geom.LineString();
+      line.setFlatCoordinates('XY', nicePath);
+      var geom = new ol.geom.MultiLineString(null);
+      geom.appendLineString(line);
+      line.translate(0, 50);
+      geom.appendLineString(line);
+      line.translate(0, -100);
+      geom.appendLineString(line);
+      var feature = new ol.Feature(geom);
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'Hello world',
+          placement: 'line',
+          font: 'bold 30px sans-serif'
+        })
+      }));
+      vectorSource.addFeature(feature);
+      map.getView().fit(vectorSource.getExtent());
+      expectResemble(map, 'rendering/ol/style/expected/text-multilinestring.png', 6.9, done);
+    });
+
+    it('renders text along a Polygon', function(done) {
+      createMap('canvas');
+      var geom = new ol.geom.Polygon(null);
+      geom.setFlatCoordinates('XY', polygon, [polygon.length]);
+      var feature = new ol.Feature(geom);
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'Hello world',
+          font: 'bold 24px sans-serif',
+          placement: 'line',
+          exceedLength: true
+        })
+      }));
+      vectorSource.addFeature(feature);
+      map.getView().fit(vectorSource.getExtent());
+      expectResemble(map, 'rendering/ol/style/expected/text-polygon.png', IMAGE_TOLERANCE, done);
+    });
+
+    it('renders text along a MultiPolygon', function(done) {
+      createMap('canvas');
+      var geom = new ol.geom.Polygon(null);
+      geom.setFlatCoordinates('XY', polygon, [polygon.length]);
+      var multiPolygon = new ol.geom.MultiPolygon(null);
+      multiPolygon.appendPolygon(geom);
+      geom.translate(0, 30);
+      multiPolygon.appendPolygon(geom);
+      geom.translate(0, -60);
+      multiPolygon.appendPolygon(geom);
+      var feature = new ol.Feature(multiPolygon);
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'Hello world',
+          font: 'bold 24px sans-serif',
+          placement: 'line',
+          exceedLength: true
+        })
+      }));
+      vectorSource.addFeature(feature);
+      map.getView().fit(vectorSource.getExtent());
+      expectResemble(map, 'rendering/ol/style/expected/text-multipolygon.png', 4.4, done);
+    });
+
     where('WebGL').it('tests the webgl renderer without rotation', function(done) {
       createMap('webgl');
       createFeatures();

test/spec/ol/geom/flat/straightchunk.test.js

@@ -0,0 +1,58 @@
+goog.require('ol.geom.flat.straightchunk');
+
+
+describe('ol.geom.flat.straightchunk', function() {
+
+  describe('ol.geom.flat.straightchunk.lineString', function() {
+
+    describe('single segment with stride == 3', function() {
+      var flatCoords = [0, 0, 42, 1, 1, 42];
+      var stride = 3;
+
+      it('returns whole line with angle delta', function() {
+        var got = ol.geom.flat.straightchunk.lineString(Math.PI / 4, flatCoords, 0, 6, stride);
+        expect(got).to.eql([0, 6]);
+      });
+
+      it('returns whole line with zero angle delta', function() {
+        var got = ol.geom.flat.straightchunk.lineString(0, flatCoords, 0, 6, stride);
+        expect(got).to.eql([0, 6]);
+      });
+
+    });
+
+    describe('short line string', function() {
+      var flatCoords = [0, 0, 1, 0, 1, 1, 0, 1];
+      var stride = 2;
+
+      it('returns whole line if straight enough', function() {
+        var got = ol.geom.flat.straightchunk.lineString(Math.PI, flatCoords, 0, 8, stride);
+        expect(got).to.eql([0, 8]);
+      });
+
+      it('returns first matching chunk if all chunk lengths are the same', function() {
+        var got = ol.geom.flat.straightchunk.lineString(Math.PI / 4, flatCoords, 0, 8, stride);
+        expect(got).to.eql([0, 4]);
+      });
+
+    });
+
+    describe('longer line string', function() {
+      var flatCoords = [0, 0, 1, 0, 1, 1, 0, 1, 0, -1, -1, -1, -1, 0, -1, 2, -2, 4];
+      var stride = 2;
+
+      it('returns stright chunk from within the linestring', function() {
+        var got = ol.geom.flat.straightchunk.lineString(0, flatCoords, 0, 18, stride);
+        expect(got).to.eql([10, 16]);
+      });
+
+      it('returns long chunk at the end if angle and length within threshold', function() {
+        var got = ol.geom.flat.straightchunk.lineString(Math.PI / 4, flatCoords, 0, 18, stride);
+        expect(got).to.eql([10, 18]);
+      });
+
+    });
+
+  });
+
+});

test/spec/ol/geom/flat/textpath.test.js

@@ -0,0 +1,121 @@
+goog.require('ol.geom.flat.textpath');
+goog.require('ol.geom.flat.length');
+
+describe('textpath', function() {
+
+  var horizontal = [0, 0, 100, 0];
+  var vertical = [0, 0, 0, 100];
+  var diagonal = [0, 0, 100, 100];
+  var reverse = [100, 0, 0, 100];
+  var angled = [0, 0, 100, 100, 200, 0];
+  var reverseangled = [151, 17, 163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
+
+  function measure(text) {
+    return 10 * text.length;
+  }
+
+  it('center-aligns text on a horizontal line', function() {
+    var startM = 50 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        horizontal, 0, horizontal.length, 2, 'foo', measure, startM, Infinity);
+    expect(instructions).to.eql([[40, 0, 0], [50, 0, 0], [60, 0, 0]]);
+  });
+
+  it('left-aligns text on a horizontal line', function() {
+    var instructions = ol.geom.flat.textpath.lineString(
+        horizontal, 0, horizontal.length, 2, 'foo', measure, 0, Infinity);
+    expect(instructions).to.eql([[5, 0, 0], [15, 0, 0], [25, 0, 0]]);
+  });
+
+  it('right-aligns text on a horizontal line', function() {
+    var startM = 100 - 30;
+    var instructions = ol.geom.flat.textpath.lineString(
+        horizontal, 0, horizontal.length, 2, 'foo', measure, startM, Infinity);
+    expect(instructions).to.eql([[75, 0, 0], [85, 0, 0], [95, 0, 0]]);
+  });
+
+  it('draws text on a vertical line', function() {
+    var startM = 50 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        vertical, 0, vertical.length, 2, 'foo', measure, startM, Infinity);
+    var a = 90 * Math.PI / 180;
+    expect(instructions).to.eql([[0, 40, a], [0, 50, a], [0, 60, a]]);
+  });
+
+  it('draws text on a diagonal line', function() {
+    var startM = Math.sqrt(2) * 50 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        diagonal, 0, diagonal.length, 2, 'foo', measure, startM, Infinity);
+    expect(instructions[0][2]).to.be(45 * Math.PI / 180);
+    expect(instructions[0][0]).to.be.lessThan(instructions[2][0]);
+    expect(instructions[0][1]).to.be.lessThan(instructions[2][1]);
+  });
+
+  it('draws reverse text on a diagonal line', function() {
+    var startM = Math.sqrt(2) * 50 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        reverse, 0, reverse.length, 2, 'foo', measure, startM, Infinity);
+    expect(instructions[0][2]).to.be(-45 * Math.PI / 180);
+    expect(instructions[0][0]).to.be.lessThan(instructions[2][0]);
+    expect(instructions[0][1]).to.be.greaterThan(instructions[2][1]);
+  });
+
+  it('renders long text with extrapolation', function() {
+    var startM = 50 - 75;
+    var instructions = ol.geom.flat.textpath.lineString(
+        horizontal, 0, horizontal.length, 2, 'foo-foo-foo-foo', measure, startM, Infinity);
+    expect(instructions[0]).to.eql([-20, 0, 0]);
+    expect(instructions[14]).to.eql([120, 0, 0]);
+  });
+
+  it('renders angled text', function() {
+    var length = ol.geom.flat.length.lineString(angled, 0, angled.length, 2);
+    var startM = length / 2 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        angled, 0, angled.length, 2, 'foo', measure, startM, Infinity);
+    expect(instructions[0][2]).to.be(45 * Math.PI / 180);
+    expect(instructions[2][2]).to.be(-45 * Math.PI / 180);
+  });
+
+  it('respects maxAngle', function() {
+    var length = ol.geom.flat.length.lineString(angled, 0, angled.length, 2);
+    var startM = length / 2 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        angled, 0, angled.length, 2, 'foo', measure, startM, Math.PI / 4);
+    expect(instructions).to.be(null);
+  });
+
+  it('uses the smallest angle for maxAngleDelta', function() {
+    var length = ol.geom.flat.length.lineString(reverseangled, 0, reverseangled.length, 2);
+    var startM = length / 2 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        reverseangled, 0, reverseangled.length, 2, 'foo', measure, startM, Math.PI);
+    expect(instructions).to.not.be(undefined);
+  });
+
+  it('respects the begin option', function() {
+    var length = ol.geom.flat.length.lineString(angled, 2, angled.length, 2);
+    var startM = length / 2 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        angled, 2, angled.length, 2, 'foo', measure, startM, Infinity);
+    expect(instructions[1][0]).to.be(150);
+  });
+
+  it('respects the end option', function() {
+    var length = ol.geom.flat.length.lineString(angled, 0, 4, 2);
+    var startM = length / 2 - 15;
+    var instructions = ol.geom.flat.textpath.lineString(
+        angled, 0, 4, 2, 'foo', measure, startM, Infinity);
+    expect(instructions[1][0]).to.be(50);
+  });
+
+  it('uses the provided result array', function() {
+    var result = [];
+    result[3] = undefined;
+    var startM = 50 - 15;
+    ol.geom.flat.textpath.lineString(
+        horizontal, 0, horizontal.length, 2, 'foo', measure, startM, Infinity, result);
+    expect(result).to.eql([[40, 0, 0], [50, 0, 0], [60, 0, 0], undefined]);
+  });
+
+});

test/spec/ol/render/webgl/textreplay.test.js

@@ -1,6 +1,5 @@
-
-
 goog.require('ol.dom');
+goog.require('ol.geom.Point');
 goog.require('ol.render.webgl.TextReplay');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
@@ -127,19 +126,19 @@ describe('ol.render.webgl.TextReplay', function() {
       var point;
 
       point = [1000, 2000];
-      replay.drawText(point, 0, 2, 2, null, null);
+      replay.drawText(new ol.geom.Point(point), null);
       expect(replay.vertices).to.have.length(256);
       expect(replay.indices).to.have.length(48);
 
       point = [2000, 3000];
-      replay.drawText(point, 0, 2, 2, null, null);
+      replay.drawText(new ol.geom.Point(point), null);
       expect(replay.vertices).to.have.length(512);
       expect(replay.indices).to.have.length(96);
     });
 
     it('sets part of its state during drawing', function() {
       var point = [1000, 2000];
-      replay.drawText(point, 0, 2, 2, null, null);
+      replay.drawText(new ol.geom.Point(point), null);
 
       var height = replay.currAtlas_.height;
       var widths = replay.currAtlas_.width;
@@ -163,7 +162,7 @@ describe('ol.render.webgl.TextReplay', function() {
       var point;
 
       point = [1000, 2000];
-      replay.drawText(point, 0, 2, 2, null, null);
+      replay.drawText(new ol.geom.Point(point), null);
       expect(replay.vertices).to.have.length(0);
       expect(replay.indices).to.have.length(0);
     });