new charRenderFunc property for Konva.text, clean tests

src/Node.ts

@@ -913,7 +913,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @returns {Array}
    * @example
    * shape.getAncestors().forEach(function(node) {
-   *   console.log(node.getId());
+   *   console.log(node.id());
    * })
    */
   getAncestors() {

src/shapes/Text.ts

@@ -13,6 +13,18 @@ import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface CharRenderProps {
+  char: string;
+  index: number;
+  x: number;
+  y: number;
+  lineIndex: number;
+  column: number;
+  isLastInLine: boolean;
+  width: number;
+  context: Context;
+}
+
 export function stringToArray(string: string): string[] {
   // Use Unicode-aware splitting
   return [...string].reduce((acc, char, index, array) => {
@@ -223,6 +235,7 @@ export class Text extends Shape<TextConfig> {
       align = this.align(),
       totalWidth = this.getWidth(),
       letterSpacing = this.letterSpacing(),
+      charRenderFunc = this.charRenderFunc(),
       fill = this.fill(),
       textDecoration = this.textDecoration(),
       shouldUnderline = textDecoration.indexOf('underline') !== -1,
@@ -318,10 +331,14 @@ export class Text extends Shape<TextConfig> {
         context.stroke();
         context.restore();
       }
+
       // As `letterSpacing` isn't supported on Safari, we use this polyfill.
       // The exception is for RTL text, which we rely on native as it cannot
       // be supported otherwise.
-      if (direction !== RTL && (letterSpacing !== 0 || align === JUSTIFY)) {
+      if (
+        direction !== RTL &&
+        (letterSpacing !== 0 || align === JUSTIFY || charRenderFunc)
+      ) {
         //   var words = text.split(' ');
         const spacesNumber = text.split(' ').length - 1;
         const array = stringToArray(text);
@@ -338,7 +355,31 @@ export class Text extends Shape<TextConfig> {
           this._partialTextX = lineTranslateX;
           this._partialTextY = translateY + lineTranslateY;
           this._partialText = letter;
+
+          if (charRenderFunc) {
+            context.save();
+            const previousLines = textArr.slice(0, n);
+            const previousGraphemes = previousLines.reduce(
+              (acc, line) => acc + stringToArray(line.text).length,
+              0
+            );
+            const charIndex = li + previousGraphemes;
+            charRenderFunc({
+              char: letter,
+              index: charIndex,
+              x: lineTranslateX,
+              y: translateY + lineTranslateY,
+              lineIndex: n,
+              column: li,
+              isLastInLine: lastLine,
+              width: this.measureSize(letter).width,
+              context,
+            });
+          }
           context.fillStrokeShape(this);
+          if (charRenderFunc) {
+            context.restore();
+          }
           lineTranslateX += this.measureSize(letter).width + letterSpacing;
         }
       } else {
@@ -713,6 +754,7 @@ export class Text extends Shape<TextConfig> {
   text: GetSet<string, this>;
   wrap: GetSet<string, this>;
   ellipsis: GetSet<boolean, this>;
+  charRenderFunc: GetSet<null | ((props: CharRenderProps) => void), this>;
 }
 
 Text.prototype._fillFunc = _fillFunc;
@@ -995,3 +1037,21 @@ Factory.addGetterSetter(Text, 'text', '', getStringValidator());
  */
 
 Factory.addGetterSetter(Text, 'textDecoration', '');
+
+/**
+ * get/set per-character render hook. The callback is invoked for each grapheme before drawing.
+ * It can mutate the provided context (e.g. translate, rotate, change styles) and should return void.
+ * Note: per-character rendering may disable native kerning/ligatures.
+ * @name Konva.Text#charRenderFunc
+ * @method
+ * @param {(props: {char: string, index: number, x: number, y: number, lineIndex: number, column: number, isLastInLine: boolean, width: number, context: Konva.Context}) => void} charRenderFunc
+ * @returns {(props: CharRenderProps) => void}
+ * @example
+ * // apply small x-translation to every second character
+ * text.charRenderFunc(function(props) {
+ *   if (props.index % 2 === 1) {
+ *     props.context.translate(2, 0);
+ *   }
+ * });
+ */
+Factory.addGetterSetter(Text, 'charRenderFunc', undefined);

test/sandbox.html

@@ -48,37 +48,40 @@
       var layer = new Konva.Layer();
       stage.add(layer);
 
-      var canvas = document.createElement('canvas');
+      const text = new Konva.Text({
-      // use external library to parse and draw gif animation
+        text: 'Hello, how are you doing today? Would you like to start using konva.js',
-      function onDrawFrame(ctx, frame) {
+        width: 400,
-        // update canvas size
+        fontSize: 50,
-        canvas.width = frame.width;
+        x: 100,
-        canvas.height = frame.height;
+        y: 100,
-        // update canvas that we are using for Konva.Image
+        draggable: true,
-        ctx.drawImage(frame.buffer, 0, 0);
+      });
-        // redraw the layer
+      layer.add(text);
-        layer.draw();
-      }
 
-      gifler('https://konvajs.org/assets/yoda.gif').frames(canvas, onDrawFrame);
+      const anim = new Konva.Animation((frame) => {
-
+        text.charRenderFunc(({ char, index, context }) => {
-      function testKonvaImage() {
+          const animationDuration = 4000;
-        setInterval(() => {
+          const animationTime = frame.time % animationDuration;
-          const image = new Konva.Image({
+          const length = text.text().length;
-            image: canvas,
+          const durationPerChar = animationDuration / length;
-            x: Math.random() * width,
+          const localStartTime = index * durationPerChar;
-            y: Math.random() * height,
+          const localTime = animationTime - localStartTime;
-          });
+          const inAnimation = localTime > 0;
-          layer.add(image);
+          if (!inAnimation) {
-
+            context.setAttr('globalAlpha', 0);
-          setTimeout(() => {
+            return;
-            image.image(canvas);
+          }
-            image.destroy();
+          const afterAnimation = localTime > durationPerChar;
-          }, 500);
+          if (afterAnimation) {
-        }, 10);
+            return;
-      }
+          }
-
+          const animationAlpha = Math.abs(localTime / durationPerChar);
-      testKonvaImage();
+          const oldOpacity = context.globalAlpha;
+          context.setAttr('globalAlpha', oldOpacity * animationAlpha * 0.5);
+          context.translate(0, -15 + (localTime / durationPerChar) * 15);
+        });
+      }, layer);
+      anim.start();
     </script>
   </body>
 </html>

test/unit/Layer-test.ts

@@ -171,9 +171,7 @@ describe('Layer', function () {
 
     circle.colorKey = '#000000';
 
-    circle.on('mouseover', function () {
+    circle.on('mouseover', function () {});
-      console.log('mouseover');
-    });
 
     layer.add(circle);
     stage.add(layer);

test/unit/MouseEvents-test.ts

@@ -2386,9 +2386,7 @@ describe('MouseEvents', function () {
     var layer = new Konva.Layer();
     stage.add(layer);
 
-    stage.on('mousedown mousemove mouseup click', function (e) {
+    stage.on('mousedown mousemove mouseup click', function (e) {});
-      console.log('state', e.type);
-    });
 
     var rect = new Konva.Rect({
       width: 50,
@@ -2402,7 +2400,6 @@ describe('MouseEvents', function () {
 
     var clicks = 0;
     rect.on('click', function () {
-      console.log('click');
       clicks += 1;
       if (clicks === 2) {
         debugger;

test/unit/Node-cache-test.ts

@@ -831,7 +831,6 @@ describe('Caching', function () {
     group.cache();
 
     const canvas = group._cache.get('canvas').scene;
-    console.log(canvas.width / 2);
     assert.equal(canvas.width, 106 * canvas.pixelRatio);
   });
 

test/unit/Node-test.ts

@@ -924,11 +924,11 @@ describe('Node', function () {
     });
 
     circle1.on('mousemove', function () {
-      console.log('mousemove circle1');
+      // console.log('mousemove circle1');
     });
 
     circle2.on('mousemove', function () {
-      console.log('mousemove circle2');
+      // console.log('mousemove circle2');
     });
 
     layer1.add(circle1);
@@ -1101,11 +1101,11 @@ describe('Node', function () {
     });
 
     circle1.on('mousemove', function () {
-      console.log('mousemove circle1');
+      // console.log('mousemove circle1');
     });
 
     circle2.on('mousemove', function () {
-      console.log('mousemove circle2');
+      // console.log('mousemove circle2');
     });
 
     group.add(circle2);
@@ -1887,12 +1887,6 @@ describe('Node', function () {
 
     circle.on('click', function () {
       clicks.push('circle');
-
-      /*
-             var evt = window.event;
-             var rightClick = evt.which ? evt.which == 3 : evt.button == 2;
-             console.log(rightClick);
-             */
     });
     var foo;
     circle.on('customEvent', function (evt) {

test/unit/Path-test.ts

@@ -1186,7 +1186,6 @@ describe('Path', function () {
       SVGPath.setAttribute('d', data);
       for (var i = 0.001; i < path.getLength(); i += 1) {
         var p = path.getPointAtLength(i);
-        console.log(p);
         var circle = new Konva.Circle({
           x: p.x + path.x(),
           y: p.y + path.y(),
@@ -1196,7 +1195,6 @@ describe('Path', function () {
         });
         layer.add(circle);
         const position = SVGPath.getPointAtLength(i);
-        console.log(position);
         assert(Math.abs(p.x - position.x) <= 1);
         assert(Math.abs(p.y - position.y) <= 1);
       }

test/unit/Stage-test.ts

@@ -398,7 +398,7 @@ describe('Stage', function () {
       '17) getAllIntersections should return one shape'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 266, y: 114 })[0].getId(),
+      stage.getAllIntersections({ x: 266, y: 114 })[0].id(),
       'greenCircle',
       '19) first intersection should be greenCircle'
     );
@@ -409,7 +409,7 @@ describe('Stage', function () {
       '18) getAllIntersections should return one shape'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 414, y: 115 })[0].getId(),
+      stage.getAllIntersections({ x: 414, y: 115 })[0].id(),
       'redCircle',
       '20) first intersection should be redCircle'
     );
@@ -420,12 +420,12 @@ describe('Stage', function () {
       '1) getAllIntersections should return two shapes'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[0].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[0].id(),
       'redCircle',
       '2) first intersection should be redCircle'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[1].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[1].id(),
       'greenCircle',
       '3) second intersection should be greenCircle'
     );
@@ -440,7 +440,7 @@ describe('Stage', function () {
       '4) getAllIntersections should return one shape'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[0].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[0].id(),
       'redCircle',
       '5) first intersection should be redCircle'
     );
@@ -455,12 +455,12 @@ describe('Stage', function () {
       '6) getAllIntersections should return two shapes'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[0].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[0].id(),
       'redCircle',
       '7) first intersection should be redCircle'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[1].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[1].id(),
       'greenCircle',
       '8) second intersection should be greenCircle'
     );
@@ -475,7 +475,7 @@ describe('Stage', function () {
       '9) getAllIntersections should return one shape'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[0].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[0].id(),
       'greenCircle',
       '10) first intersection should be greenCircle'
     );
@@ -490,12 +490,12 @@ describe('Stage', function () {
       '11) getAllIntersections should return two shapes'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[0].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[0].id(),
       'redCircle',
       '12) first intersection should be redCircle'
     );
     assert.equal(
-      stage.getAllIntersections({ x: 350, y: 118 })[1].getId(),
+      stage.getAllIntersections({ x: 350, y: 118 })[1].id(),
       'greenCircle',
       '13) second intersection should be greenCircle'
     );
@@ -507,12 +507,12 @@ describe('Stage', function () {
       '14) getAllIntersections should return two shapes'
     );
     assert.equal(
-      layer.getAllIntersections({ x: 350, y: 118 })[0].getId(),
+      layer.getAllIntersections({ x: 350, y: 118 })[0].id(),
       'redCircle',
       '15) first intersection should be redCircle'
     );
     assert.equal(
-      layer.getAllIntersections({ x: 350, y: 118 })[1].getId(),
+      layer.getAllIntersections({ x: 350, y: 118 })[1].id(),
       'greenCircle',
       '16) second intersection should be greenCircle'
     );
@@ -1424,7 +1424,10 @@ describe('Stage', function () {
           mimeType: 'image/jpeg',
           quality: 0.5,
         });
-        assert.isTrue(blob instanceof Blob && blob.type === 'image/jpeg', "can't change type of blob");
+        assert.isTrue(
+          blob instanceof Blob && blob.type === 'image/jpeg',
+          "can't change type of blob"
+        );
       } catch (e) {
         console.error(e);
         assert.fail('error creating blob');

test/unit/Text-test.ts

@@ -215,7 +215,7 @@ describe('Text', function () {
     var canvas = createCanvas();
     var context = canvas.getContext('2d');
     context.textBaseline = 'middle';
-    context.letterSpacing = '10px';
+    (context as any).letterSpacing = '10px';
     context.font = 'normal normal 50px Arial';
     context.fillStyle = 'darkgrey';
     context.fillText('आपकी दौड़ के लिए परफेक्ट जूते!', 10, 10 + 25);
@@ -1625,14 +1625,14 @@ describe('Text', function () {
       ctx.textBaseline = 'middle';
 
       var grd = ctx.createPattern(imageObj, 'repeat');
-      grd.setTransform({
+      (grd as any).setTransform({
         a: 1,
         b: 0,
         c: 0,
         d: 1,
         e: -50,
         f: 0,
-      });
+      } as any);
       ctx.fillStyle = grd;
 
       ctx.fillText(text.text(), 0, 15);
@@ -1668,19 +1668,13 @@ describe('Text', function () {
       ctx.textBaseline = 'middle';
 
       var grd = ctx.createPattern(imageObj, 'repeat');
-      const matrix =
+      // node-canvas expects its own DOMMatrix type; cast to any for cross-env test
-        typeof DOMMatrix === 'undefined'
+      const matrix: any =
-          ? {
+        typeof (global as any).DOMMatrix === 'undefined'
-              a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
+          ? { a: 0.5, b: 0, c: 0, d: 0.5, e: 0, f: 0 }
-              b: 0, // Vertical skewing.
+          : new (global as any).DOMMatrix([0.5, 0, 0, 0.5, 0, 0]);
-              c: 0, // Horizontal skewing.
-              d: 0.5,
-              e: 0, // Horizontal translation (moving).
-              f: 0, // Vertical translation (moving).
-            }
-          : new DOMMatrix([0.5, 0, 0, 0.5, 0, 0]);
 
-      grd.setTransform(matrix);
+      (grd as any).setTransform(matrix);
 
       ctx.fillStyle = grd;
 
@@ -1791,4 +1785,32 @@ describe('Text', function () {
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
+
+  it('charRenderFunc draws per character and can mutate context', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'AB',
+      fontSize: 20,
+      charRenderFunc: function (props) {
+        if (props.index === 1) {
+          // shift only the second character
+          props.context.translate(0, 10);
+        }
+      },
+    });
+    layer.add(text);
+    layer.draw();
+
+    var trace = layer.getContext().getTrace();
+
+    assert.equal(
+      trace,
+      'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 20px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();fillStyle=black;fillText(A,0,10);restore();save();translate(0,10);fillStyle=black;fillText(B,13.34,10);restore();restore();restore();'
+    );
+  });
 });

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "lib",
-    "module": "CommonJS",
+    "module": "ESNext",
     "target": "ES2018",
     // "sourceMap": true,
     "noEmitOnError": true,