Better TextPath hit function

CHANGELOG.md

@@ -4,6 +4,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Not released][Not released]
 
+## [1.1.2][2016-09-12]
+
+### Changed
+- Better hit function for `TextPath`.
+- Validation of `Shape` filters.
+
 ## [1.1.2][2016-09-10]
 
 ### Fixed

konva.js

@@ -15013,6 +15013,7 @@
             this.dataArray = Konva.Path.parsePathData(this.attrs.data);
             this.on('dataChange.konva', function() {
                 that.dataArray = Konva.Path.parsePathData(this.attrs.data);
+                that._setTextData();
             });
 
             // update text data for certain attr changes
@@ -15102,7 +15103,7 @@
 
             this.glyphInfo = [];
 
-            var charArr = this.attrs.text.split('');
+            var charArr = this.getText().split('');
 
             var p0, p1, pathCmd;
 

src/shapes/TextPath.js

@@ -62,12 +62,14 @@
             this.dataArray = Konva.Path.parsePathData(this.attrs.data);
             this.on('dataChange.konva', function() {
                 that.dataArray = Konva.Path.parsePathData(this.attrs.data);
+                that._setTextData();
             });
 
             // update text data for certain attr changes
             this.on('textChange.konva textStroke.konva textStrokeWidth.konva', that._setTextData);
             that._setTextData();
             this.sceneFunc(this._sceneFunc);
+            this.hitFunc(this._hitFunc);
         },
         _sceneFunc: function(context) {
             context.setAttr('font', this._getContextFont());
@@ -101,6 +103,22 @@
             }
             context.restore();
         },
+        _hitFunc: function(context) {
+          context.beginPath();
+
+          var glyphInfo = this.glyphInfo;
+          if (glyphInfo.length >= 1) {
+            var p0 = glyphInfo[0].p0;
+            context.moveTo(p0.x, p0.y);
+          }
+          for(var i = 0; i < glyphInfo.length; i++) {
+              var p1 = glyphInfo[i].p1;
+              context.lineTo(p1.x, p1.y);
+          }
+          context.setAttr('lineWidth', this.getFontSize());
+          context.setAttr('strokeStyle', this.colorKey);
+          context.stroke();
+        },
         /**
          * get text width in pixels
          * @method
@@ -151,7 +169,7 @@
 
             this.glyphInfo = [];
 
-            var charArr = this.attrs.text.split('');
+            var charArr = this.getText().split('');
 
             var p0, p1, pathCmd;
 

test/unit/shapes/TextPath-test.js

@@ -24,11 +24,11 @@ suite('TextPath', function() {
         });
 		textpath.on('mouseover', function() { this.setFill('blue'); layer.drawScene(); });
 		textpath.on('mouseout', function() { this.setFill('orange'); layer.drawScene(); });
-		
+
         layer.add(textpath);
         stage.add(layer);
 		showHit(layer);
-        
+
         assert.equal(textpath.getClassName(), 'TextPath', 'getClassName should be TextPath');
 
         var trace = layer.getContext().getTrace(true);
@@ -41,7 +41,7 @@ suite('TextPath', function() {
         var stage = addStage();
         var layer = new Konva.Layer();
 
-        var c = "M 50 50 a 150 50 0 0 1 250 50 l 50 0"; 
+        var c = "M 50 50 a 150 50 0 0 1 250 50 l 50 0";
         var path = new Konva.Path({
             stroke: 'red',
             strokeWidth: 1,
@@ -58,9 +58,9 @@ suite('TextPath', function() {
         });
 
         layer.add(textpath);
-        stage.add(layer);   
+        stage.add(layer);
     });
-    
+
     // ======================================================
     test('Render Text Along Vertical Line', function() {
         var stage = addStage();
@@ -88,8 +88,8 @@ suite('TextPath', function() {
         });
 
         layer.add(textpath);
-                
+
-                
+
         // Bottom up
         c = "M 150,150 150,10";
 
@@ -110,12 +110,12 @@ suite('TextPath', function() {
             text: 'The quick brown fox jumped over the lazy dog\'s back',
             data: c
         });
-        
+
         layer.add(textpath);
         stage.add(layer);
-        
+
     });
-    
+
     // ======================================================
     test('Render Text Along two connected Bezier', function() {
         var stage = addStage();
@@ -144,7 +144,7 @@ suite('TextPath', function() {
         stage.add(layer);
 
     });
-    
+
     // ======================================================
     test('Render Text Along Elliptical Arc', function() {
         var stage = addStage();
@@ -169,7 +169,7 @@ suite('TextPath', function() {
         layer.add(textpath);
         stage.add(layer);
     });
-    
+
     // ======================================================
     test('Render Text Along complex path', function() {
         var stage = addStage();
@@ -190,7 +190,7 @@ suite('TextPath', function() {
     });
 
     // ======================================================
-    test('Render Text Along complex path cached', function() {
+    test.only('Render Text Along complex path cached', function() {
         var stage = addStage();
         var layer = new Konva.Layer();
 
@@ -215,4 +215,4 @@ suite('TextPath', function() {
         cloneAndCompareLayer(layer,50);
         showHit(layer);
     });
-});
+});