getKerning TextPath API is deprecated. Use "kerningFunc" instead.

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Changed
+
+* getKerning TextPath API is deprecated. Use "kerningFunc" instead.
+
 ## [2.5.1][2018-11-08]
 
 ### Changed

konva.d.ts

@@ -12,9 +12,7 @@ declare namespace Konva {
     cancelBubble: boolean;
   }
 
-  type HandlerFunc<E = Event> = (
+  type HandlerFunc<E = Event> = (e: KonvaEventObject<E>) => void;
-    e: KonvaEventObject<E>
-  ) => void;
 
   enum KonvaNodeEvent {
     mouseover = 'mouseover',
@@ -93,8 +91,20 @@ declare namespace Konva {
     static getRGB(color: string): string;
   }
 
-  type EasingFn = (elapsed: number, startValue: number, diff: number, duration: number) => number;
+  type EasingFn = (
-  type ElasticEasingFn = (elapsed: number, startValue: number, diff: number, duration: number, a?: number, p?: number) => number;
+    elapsed: number,
+    startValue: number,
+    diff: number,
+    duration: number
+  ) => number;
+  type ElasticEasingFn = (
+    elapsed: number,
+    startValue: number,
+    diff: number,
+    duration: number,
+    a?: number,
+    p?: number
+  ) => number;
 
   export class Easings {
     static BackEaseIn: EasingFn;
@@ -368,9 +378,7 @@ declare namespace Konva {
     offsetY(offsetY: number): this;
     on<K extends keyof KonvaNodeEventMap>(
       evtStr: K,
-      handler: (
+      handler: (e: KonvaEventObject<KonvaNodeEventMap[K]>) => void
-        e: KonvaEventObject<KonvaNodeEventMap[K]>
-      ) => void
     ): this;
     on(evtStr: KonvaEventString, handler: HandlerFunc): this;
     opacity(): number;
@@ -461,7 +469,9 @@ declare namespace Konva {
     clipFunc(): (ctx: CanvasRenderingContext2D) => void;
     clipFunc(clipFunc: (ctx: CanvasRenderingContext2D) => void): void;
     destroyChildren(): void;
-    find<T extends Node = Node>(selector?: string | ((node: Node) => boolean)): Collection<T>;
+    find<T extends Node = Node>(
+      selector?: string | ((node: Node) => boolean)
+    ): Collection<T>;
     findOne<T extends Node>(selector: string | ((node: Node) => boolean)): T;
     getAllIntersections(pos: Vector2d): Shape[];
     hasChildren(): boolean;

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.5.1
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Thu Nov 08 2018
+ * Date: Sat Nov 17 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -17656,6 +17656,7 @@
    * @param {String} config.text
    * @param {String} config.data SVG data string
    * @param {Function} config.getKerning a getter for kerning values for the specified characters
+   * @param {Function} config.kerningFunc a getter for kerning values for the specified characters
    * @param {String} [config.fill] fill color
      * @param {Image} [config.fillPatternImage] fill pattern image
      * @param {Number} [config.fillPatternX]
@@ -17749,7 +17750,7 @@
    *   fontFamily: 'Arial',
    *   text: 'All the world\'s a stage, and all the men and women merely players.',
    *   data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
-   *   getKerning: function(leftChar, rightChar) {
+   *   kerningFunc: function(leftChar, rightChar) {
    *     return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
    *   }
    * });
@@ -17770,7 +17771,6 @@
       var that = this;
       this.dummyCanvas = Konva.Util.createCanvasElement();
       this.dataArray = [];
-      this.getKerning = config && config.getKerning;
 
       // call super constructor
       Konva.Shape.call(this, config);
@@ -17792,9 +17792,17 @@
 
       // update text data for certain attr changes
       this.on(
-        'textChange.konva alignChange.konva letterSpacingChange.konva',
+        'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva',
         that._setTextData
       );
+
+      if (config && config.getKerning) {
+        Konva.Util.warn(
+          'getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'
+        );
+        this.setKerningFunc(config.getKerning);
+      }
+
       that._setTextData();
       this.sceneFunc(this._sceneFunc);
       this.hitFunc(this._hitFunc);
@@ -17913,6 +17921,7 @@
       var size = this._getTextSize(this.attrs.text);
       var letterSpacing = this.getLetterSpacing();
       var align = this.align();
+      var kerningFunc = this.getKerningFunc();
 
       this.textWidth = size.width;
       this.textHeight = size.height;
@@ -18044,9 +18053,9 @@
                 currentT = start + 0.00000001;
               } else if (glyphWidth > currLen) {
                 // Just in case start is 0
-                currentT += Math.PI / 180.0 * dTheta / Math.abs(dTheta);
+                currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);
               } else {
-                currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta);
+                currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);
               }
 
               // Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249
@@ -18155,11 +18164,10 @@
         var width = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
 
         var kern = 0;
-        if (this.getKerning) {
+        if (kerningFunc) {
           try {
             // getKerning is a user provided getter. Make sure it never breaks our logic
-            kern =
+            kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();
-              this.getKerning(charArr[i - 1], charArr[i]) * this.fontSize();
           } catch (e) {
             kern = 0;
           }
@@ -18392,6 +18400,25 @@
    * text.textDecoration('underline');
    */
 
+  Konva.Factory.addGetterSetter(Konva.TextPath, 'kerningFunc', null);
+
+  /**
+   * get/set kerning function.
+   * @name kerningFunc
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} kerningFunc
+   * @returns {String}
+   * @example
+   * // get text decoration
+   * var kerningFunc = text.kerningFunc();
+   *
+   * // center text
+   * text.kerningFunc(function(leftChar, rightChar) {
+   *   return 1;
+   * });
+   */
+
   Konva.Collection.mapMethods(Konva.TextPath);
 })();
 

src/shapes/TextPath.js

@@ -18,6 +18,7 @@
    * @param {String} config.text
    * @param {String} config.data SVG data string
    * @param {Function} config.getKerning a getter for kerning values for the specified characters
+   * @param {Function} config.kerningFunc a getter for kerning values for the specified characters
    * @@shapeParams
    * @@nodeParams
    * @example
@@ -42,7 +43,7 @@
    *   fontFamily: 'Arial',
    *   text: 'All the world\'s a stage, and all the men and women merely players.',
    *   data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
-   *   getKerning: function(leftChar, rightChar) {
+   *   kerningFunc: function(leftChar, rightChar) {
    *     return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
    *   }
    * });
@@ -63,7 +64,6 @@
       var that = this;
       this.dummyCanvas = Konva.Util.createCanvasElement();
       this.dataArray = [];
-      this.getKerning = config && config.getKerning;
 
       // call super constructor
       Konva.Shape.call(this, config);
@@ -85,9 +85,17 @@
 
       // update text data for certain attr changes
       this.on(
-        'textChange.konva alignChange.konva letterSpacingChange.konva',
+        'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva',
         that._setTextData
       );
+
+      if (config && config.getKerning) {
+        Konva.Util.warn(
+          'getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'
+        );
+        this.setKerningFunc(config.getKerning);
+      }
+
       that._setTextData();
       this.sceneFunc(this._sceneFunc);
       this.hitFunc(this._hitFunc);
@@ -206,6 +214,7 @@
       var size = this._getTextSize(this.attrs.text);
       var letterSpacing = this.getLetterSpacing();
       var align = this.align();
+      var kerningFunc = this.getKerningFunc();
 
       this.textWidth = size.width;
       this.textHeight = size.height;
@@ -337,9 +346,9 @@
                 currentT = start + 0.00000001;
               } else if (glyphWidth > currLen) {
                 // Just in case start is 0
-                currentT += Math.PI / 180.0 * dTheta / Math.abs(dTheta);
+                currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);
               } else {
-                currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta);
+                currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);
               }
 
               // Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249
@@ -448,11 +457,10 @@
         var width = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
 
         var kern = 0;
-        if (this.getKerning) {
+        if (kerningFunc) {
           try {
             // getKerning is a user provided getter. Make sure it never breaks our logic
-            kern =
+            kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();
-              this.getKerning(charArr[i - 1], charArr[i]) * this.fontSize();
           } catch (e) {
             kern = 0;
           }
@@ -685,5 +693,24 @@
    * text.textDecoration('underline');
    */
 
+  Konva.Factory.addGetterSetter(Konva.TextPath, 'kerningFunc', null);
+
+  /**
+   * get/set kerning function.
+   * @name kerningFunc
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} kerningFunc
+   * @returns {String}
+   * @example
+   * // get text decoration
+   * var kerningFunc = text.kerningFunc();
+   *
+   * // center text
+   * text.kerningFunc(function(leftChar, rightChar) {
+   *   return 1;
+   * });
+   */
+
   Konva.Collection.mapMethods(Konva.TextPath);
 })();

test/unit/shapes/TextPath-test.js

@@ -485,4 +485,34 @@ suite('TextPath', function() {
       'should gracefully fallback to unkerned text'
     );
   });
+
+  test('can set kerning after initialization', function() {
+    var stage = addStage();
+
+    // simulate lack of kerning support
+    stage.getContainer().style.fontKerning = 'none';
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    const kernedText = new Konva.TextPath({
+      x: 0,
+      y: 30,
+      fill: 'black',
+      text: 'AV',
+      fontSize: 60,
+      data: 'M0,0 L200,0'
+    });
+    layer.add(kernedText);
+    layer.draw();
+
+    var called = false;
+    kernedText.kerningFunc(() => {
+      called = true;
+      return 1;
+    });
+
+    layer.draw();
+    assert.equal(called, true);
+  });
 });