Merge pull request #1839 from fredj/text-offset

Add offsetX and offsetY properties to ol.style.Text

src/objectliterals.jsdoc

@@ -1021,6 +1021,10 @@
 /**
  * @typedef {Object} olx.style.TextOptions
  * @property {string|undefined} font Font.
+ * @property {number|undefined} offsetX Horizontal text offset in pixels.
+ *     A positive will shift the text right. Default is `0`.
+ * @property {number|undefined} offsetY Vertical text offset in pixels.
+ *     A positive will shift the text down. Default is `0`.
  * @property {number|undefined} scale Scale.
  * @property {number|undefined} rotation Rotation.
  * @property {string|undefined} text Text.

src/ol/render/canvas/canvasimmediate.js

@@ -164,6 +164,18 @@ ol.render.canvas.Immediate =
    */
   this.text_ = '';
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textOffsetX_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textOffsetY_ = 0;
+
   /**
    * @private
    * @type {number}
@@ -293,8 +305,8 @@ ol.render.canvas.Immediate.prototype.drawText_ =
       flatCoordinates, stride, this.transform_, this.pixelCoordinates_);
   var context = this.context_;
   for (; offset < end; offset += stride) {
-    var x = pixelCoordinates[offset];
-    var y = pixelCoordinates[offset + 1];
+    var x = pixelCoordinates[offset] + this.textOffsetX_;
+    var y = pixelCoordinates[offset + 1] + this.textOffsetY_;
     if (this.textRotation_ !== 0 || this.textScale_ != 1) {
       var localTransform = ol.vec.Mat4.makeTransform2D(this.tmpLocalTransform_,
           x, y, this.textScale_, this.textScale_, this.textRotation_, -x, -y);
@@ -932,6 +944,8 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
       };
     }
     var textFont = textStyle.getFont();
+    var textOffsetX = textStyle.getOffsetX();
+    var textOffsetY = textStyle.getOffsetY();
     var textRotation = textStyle.getRotation();
     var textScale = textStyle.getScale();
     var textText = textStyle.getText();
@@ -946,6 +960,8 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
           textTextBaseline : ol.render.canvas.defaultTextBaseline
     };
     this.text_ = goog.isDef(textText) ? textText : '';
+    this.textOffsetX_ = goog.isDef(textOffsetX) ? textOffsetX : 0;
+    this.textOffsetY_ = goog.isDef(textOffsetY) ? textOffsetY : 0;
     this.textRotation_ = goog.isDef(textRotation) ? textRotation : 0;
     this.textScale_ = this.pixelRatio_ * (goog.isDef(textScale) ?
         textScale : 1);

src/ol/render/canvas/canvasreplay.js

@@ -325,16 +325,20 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         goog.asserts.assert(goog.isString(instruction[3]));
         text = /** @type {string} */ (instruction[3]);
         goog.asserts.assert(goog.isNumber(instruction[4]));
-        rotation = /** @type {number} */ (instruction[4]);
+        var offsetX = /** @type {number} */ (instruction[4]);
         goog.asserts.assert(goog.isNumber(instruction[5]));
-        scale = /** @type {number} */ (instruction[5]) * pixelRatio;
-        goog.asserts.assert(goog.isBoolean(instruction[6]));
-        fill = /** @type {boolean} */ (instruction[6]);
-        goog.asserts.assert(goog.isBoolean(instruction[7]));
-        stroke = /** @type {boolean} */ (instruction[7]);
+        var offsetY = /** @type {number} */ (instruction[5]);
+        goog.asserts.assert(goog.isNumber(instruction[6]));
+        rotation = /** @type {number} */ (instruction[6]);
+        goog.asserts.assert(goog.isNumber(instruction[7]));
+        scale = /** @type {number} */ (instruction[7]) * pixelRatio;
+        goog.asserts.assert(goog.isBoolean(instruction[8]));
+        fill = /** @type {boolean} */ (instruction[8]);
+        goog.asserts.assert(goog.isBoolean(instruction[9]));
+        stroke = /** @type {boolean} */ (instruction[9]);
         for (; d < dd; d += 2) {
-          x = pixelCoordinates[d];
-          y = pixelCoordinates[d + 1];
+          x = pixelCoordinates[d] + offsetX;
+          y = pixelCoordinates[d + 1] + offsetY;
           if (scale != 1 || rotation !== 0) {
             ol.vec.Mat4.makeTransform2D(
                 localTransform, x, y, scale, scale, rotation, -x, -y);
@@ -1437,6 +1441,18 @@ ol.render.canvas.TextReplay = function(tolerance, maxExtent) {
    */
   this.text_ = '';
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textOffsetX_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textOffsetY_ = 0;
+
   /**
    * @private
    * @type {number}
@@ -1499,7 +1515,8 @@ ol.render.canvas.TextReplay.prototype.drawText =
   var stroke = !goog.isNull(this.textStrokeState_);
   var drawTextInstruction = [
     ol.render.canvas.Instruction.DRAW_TEXT, myBegin, myEnd, this.text_,
-    this.textRotation_, this.textScale_, fill, stroke];
+    this.textOffsetX_, this.textOffsetY_, this.textRotation_, this.textScale_,
+    fill, stroke];
   this.instructions.push(drawTextInstruction);
   this.hitDetectionInstructions.push(drawTextInstruction);
   this.endGeometry(geometry, data);
@@ -1670,6 +1687,8 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
       }
     }
     var textFont = textStyle.getFont();
+    var textOffsetX = textStyle.getOffsetX();
+    var textOffsetY = textStyle.getOffsetY();
     var textRotation = textStyle.getRotation();
     var textScale = textStyle.getScale();
     var textText = textStyle.getText();
@@ -1694,6 +1713,8 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
       textState.textBaseline = textBaseline;
     }
     this.text_ = goog.isDef(textText) ? textText : '';
+    this.textOffsetX_ = goog.isDef(textOffsetX) ? textOffsetX : 0;
+    this.textOffsetY_ = goog.isDef(textOffsetY) ? textOffsetY : 0;
     this.textRotation_ = goog.isDef(textRotation) ? textRotation : 0;
     this.textScale_ = goog.isDef(textScale) ? textScale : 1;
   }

src/ol/style/textstyle.js

@@ -57,6 +57,18 @@ ol.style.Text = function(opt_options) {
    * @type {ol.style.Stroke}
    */
   this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.offsetX_ = goog.isDef(options.offsetX) ? options.offsetX : 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.offsetY_ = goog.isDef(options.offsetY) ? options.offsetY : 0;
 };
 
 
@@ -68,6 +80,22 @@ ol.style.Text.prototype.getFont = function() {
 };
 
 
+/**
+ * @return {number} Horizontal text offset.
+ */
+ol.style.Text.prototype.getOffsetX = function() {
+  return this.offsetX_;
+};
+
+
+/**
+ * @return {number} Vertical text offset.
+ */
+ol.style.Text.prototype.getOffsetY = function() {
+  return this.offsetY_;
+};
+
+
 /**
  * @return {ol.style.Fill} Fill style.
  */