Merge branch 'kudlajz-master'

CHANGELOG.md

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Not released][Not released]
 
+## Added
+- `textDecoration` of `Konva.Text` now supports `line-through`
+
 ## [1.3.0][2017-01-10]
 
 ## Added

konva.js

@@ -3,7 +3,7 @@
  * Konva JavaScript Framework v1.3.0
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Tue Jan 10 2017
+ * Date: Tue Feb 07 2017
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -13148,14 +13148,24 @@
                     context.translate((totalWidth - width - p * 2) / 2, 0);
                 }
 
-                if (textDecoration === 'underline') {
+                if (textDecoration.indexOf('underline') !== -1) {
                   context.save();
                   context.beginPath();
                   context.moveTo(0, Math.round(lineHeightPx / 2));
                   context.lineTo(Math.round(width), Math.round(lineHeightPx / 2));
                   // TODO: I have no idea what is real ratio
                   // just /20 looks good enough
-                  context.lineWidth = fontSize / 20;
+                  context.lineWidth = fontSize / 15;
+                  context.strokeStyle = fill;
+                  context.stroke();
+                  context.restore();
+                }
+                if (textDecoration.indexOf('line-through') !== -1) {
+                  context.save();
+                  context.beginPath();
+                  context.moveTo(0, 0);
+                  context.lineTo(Math.round(width), 0);
+                  context.lineWidth = fontSize / 15;
                   context.strokeStyle = fill;
                   context.stroke();
                   context.restore();
@@ -13568,10 +13578,10 @@
      * text.text('Hello world!');
      */
 
-     Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', null);
+     Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING);
 
      /**
-      * get/set text decoration of a text.  Can be '' or 'underline'
+      * get/set text decoration of a text.  Possible values are 'underline', 'line-through' or combination of these values separated by space
       * @name textDecoration
       * @method
       * @memberof Konva.Text.prototype
@@ -13581,8 +13591,14 @@
       * // get text decoration
       * var textDecoration = text.textDecoration();
       *
-      * // center text
+      * // underline text
       * text.textDecoration('underline');
+      *
+      * // strike text
+      * text.textDecoration('line-through');
+      *
+      * // underline and strike text
+      * text.textDecoration('underline line-through');
       */
 
     Konva.Collection.mapMethods(Konva.Text);

src/shapes/Text.js

@@ -141,14 +141,24 @@
                     context.translate((totalWidth - width - p * 2) / 2, 0);
                 }
 
-                if (textDecoration === 'underline') {
+                if (textDecoration.indexOf('underline') !== -1) {
                   context.save();
                   context.beginPath();
                   context.moveTo(0, Math.round(lineHeightPx / 2));
                   context.lineTo(Math.round(width), Math.round(lineHeightPx / 2));
                   // TODO: I have no idea what is real ratio
                   // just /20 looks good enough
-                  context.lineWidth = fontSize / 20;
+                  context.lineWidth = fontSize / 15;
+                  context.strokeStyle = fill;
+                  context.stroke();
+                  context.restore();
+                }
+                if (textDecoration.indexOf('line-through') !== -1) {
+                  context.save();
+                  context.beginPath();
+                  context.moveTo(0, 0);
+                  context.lineTo(Math.round(width), 0);
+                  context.lineWidth = fontSize / 15;
                   context.strokeStyle = fill;
                   context.stroke();
                   context.restore();
@@ -561,10 +571,10 @@
      * text.text('Hello world!');
      */
 
-     Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', null);
+     Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING);
 
      /**
-      * get/set text decoration of a text.  Can be '' or 'underline'
+      * get/set text decoration of a text.  Possible values are 'underline', 'line-through' or combination of these values separated by space
       * @name textDecoration
       * @method
       * @memberof Konva.Text.prototype
@@ -574,8 +584,14 @@
       * // get text decoration
       * var textDecoration = text.textDecoration();
       *
-      * // center text
+      * // underline text
       * text.textDecoration('underline');
+      *
+      * // strike text
+      * text.textDecoration('line-through');
+      *
+      * // underline and strike text
+      * text.textDecoration('underline line-through');
       */
 
     Konva.Collection.mapMethods(Konva.Text);

test/unit/shapes/Text-test.js

@@ -1,6 +1,6 @@
 'use strict';
 
-suite('Text', function(){
+suite('Text', function() {
   // ======================================================
   test('text with empty config is allowed', function() {
     var stage = addStage();
@@ -14,18 +14,21 @@ suite('Text', function(){
   });
 
   // ======================================================
-    test('text with undefined text property should not throw an error', function() {
+  test(
+    'text with undefined text property should not throw an error',
+    function() {
       var stage = addStage();
       var layer = new Konva.Layer();
 
       stage.add(layer);
-        var text = new Konva.Text({text: undefined});
+      var text = new Konva.Text({ text: undefined });
 
       layer.add(text);
       layer.draw();
 
       assert.equal(text.getWidth(), 0);
-    });
+    }
+  );
 
   test('add text with shadows', function() {
     var stage = addStage();
@@ -79,7 +82,7 @@ suite('Text', function(){
     layer.add(group);
     stage.add(layer);
 
-        assert.equal(text.getClassName(),'Text', 'getClassName should be Text');
+    assert.equal(text.getClassName(), 'Text', 'getClassName should be Text');
   });
 
   test.skip('text with fill and shadow', function() {
@@ -98,24 +101,21 @@ suite('Text', function(){
       shadowBlur: 0
     });
 
-
     layer.add(text);
     stage.add(layer);
 
     var canvas = createCanvas();
     var context = canvas.getContext('2d');
     context.textBaseline = 'middle';
-        context.font = "normal normal 50px Arial";
+    context.font = 'normal normal 50px Arial';
     context.fillStyle = 'darkgrey';
     context.fillText('Hello World!', 10, 10 + 50 + 25);
     context.fillStyle = 'black';
     context.fillText('Hello World!', 10, 10 + 25);
 
-
     compareLayerAndCanvas(layer, canvas, 254);
   });
 
-
   test('text cache with fill and shadow', function() {
     var stage = addStage();
     var layer1 = new Konva.Layer();
@@ -140,7 +140,7 @@ suite('Text', function(){
     var layer2 = new Konva.Layer();
     layer2.getCanvas().setPixelRatio(1);
 
-        layer2.add(text1.clone().cache({pixelRatio: 2}));
+    layer2.add(text1.clone().cache({ pixelRatio: 2 }));
     stage.add(layer1, layer2);
 
     if (!window.isPhantomJS) {
@@ -181,7 +181,7 @@ suite('Text', function(){
     group.add(text2);
 
     text2.cache();
-        group.scale({ x: 2, y: 2});
+    group.scale({ x: 2, y: 2 });
 
     stage.draw();
 
@@ -303,7 +303,6 @@ suite('Text', function(){
 
     //layer.setListening(false);
     layer.drawHit();
-
   });
 
   // ======================================================
@@ -342,7 +341,7 @@ suite('Text', function(){
     var text = new Konva.Text({
       x: 10,
       y: 10,
-            text: 'HEADING\n\nAll the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
+      text: "HEADING\n\nAll the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
       //text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
       fontSize: 14,
       fontFamily: 'Calibri',
@@ -368,7 +367,6 @@ suite('Text', function(){
     assert.equal(text.getLineHeight(), 20);
   });
 
-
   // ======================================================
   test('text multi line with justify align', function() {
     var stage = addStage();
@@ -385,7 +383,7 @@ suite('Text', function(){
     var text = new Konva.Text({
       x: 10,
       y: 10,
-            text: 'HEADING\n\n    All the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
+      text: "HEADING\n\n    All the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
       fontSize: 14,
       fontFamily: 'Calibri',
       fontStyle: 'normal',
@@ -399,7 +397,6 @@ suite('Text', function(){
     rect.height(text.getHeight());
     layer.add(rect).add(text);
 
-
     // var text2 = new Konva.Text({
     //     x: 10,
     //     y: 110,
@@ -417,8 +414,6 @@ suite('Text', function(){
 
     stage.add(layer);
 
-        
-
     var trace = 'fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();save();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();restore();restore();';
 
     assert.equal(layer.getContext().getTrace(true), trace);
@@ -434,7 +429,7 @@ suite('Text', function(){
       y: 10,
       //stroke: '#555',
       //strokeWidth: 5,
-            text: 'HEADING\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
+      text: "HEADING\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.",
       //text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
       fontSize: 16,
       fontFamily: 'Calibri',
@@ -454,16 +449,13 @@ suite('Text', function(){
 
     layer.add(text);
     stage.add(layer);
-
     //console.log(layer.getContext().getTrace());
-
   });
 
-
   // ======================================================
   // skiping this test for now. It fails on travis. WHYYY??!?!?!
   // TODO: restore it
-    test.skip('text multi line with textDecoration and spacing', function() {
+  test.skip('text multi line with underline and spacing', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
 
@@ -483,9 +475,50 @@ suite('Text', function(){
 
     var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 15px Arial;textBaseline=middle;textAlign=left;save();translate(0,7.5);save();save();beginPath();moveTo(0,8);lineTo(52,8);stroke();restore();fillStyle=red;fillText(h,0,0);translate(13,0);fillStyle=red;fillText(e,0,0);translate(13,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(o,0,0);translate(13,0);restore();translate(0,15);save();save();beginPath();moveTo(0,8);lineTo(56,8);stroke();restore();fillStyle=red;fillText(w,0,0);translate(16,0);fillStyle=red;fillText(o,0,0);translate(13,0);fillStyle=red;fillText(r,0,0);translate(10,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(d,0,0);translate(13,0);restore();translate(0,15);restore();restore();';
 
+    assert.equal(layer.getContext().getTrace(), trace);
+  });
+
+  test('text multi line with strike', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'hello\nworld',
+      fontSize: 80,
+      fill: 'red',
+      textDecoration: 'line-through'
+    });
+
+    layer.add(text);
+    stage.add(layer);
+    // TODO
+
+    var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;save();translate(0,40);save();save();beginPath();moveTo(0,0);lineTo(169,0);stroke();restore();fillStyle=red;fillText(hello,0,0);restore();translate(0,80);save();save();beginPath();moveTo(0,0);lineTo(191,0);stroke();restore();fillStyle=red;fillText(world,0,0);restore();translate(0,80);restore();restore();';
+    // console.log(layer.getContext().getTrace());
+    assert.equal(layer.getContext().getTrace(), trace);
+  });
+
+  test('text multi line with underline and strike', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'hello\nworld',
+      fontSize: 80,
+      fill: 'red',
+      textDecoration: 'underline line-through'
+    });
+
+    layer.add(text);
+    stage.add(layer);
+
+    var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;save();translate(0,40);save();save();beginPath();moveTo(0,40);lineTo(169,40);stroke();restore();save();beginPath();moveTo(0,0);lineTo(169,0);stroke();restore();fillStyle=red;fillText(hello,0,0);restore();translate(0,80);save();save();beginPath();moveTo(0,40);lineTo(191,40);stroke();restore();save();beginPath();moveTo(0,0);lineTo(191,0);stroke();restore();fillStyle=red;fillText(world,0,0);restore();translate(0,80);restore();restore();';
 
     assert.equal(layer.getContext().getTrace(), trace);
-
   });
 
   // ======================================================
@@ -509,8 +542,6 @@ suite('Text', function(){
     var width = text.getWidth();
     var height = text.getHeight();
 
-
-
     layer.add(text);
     stage.add(layer);
 
@@ -521,22 +552,20 @@ suite('Text', function(){
 
     assert(text.getWidth() > width, 'width should have increased');
     assert(text.getHeight() > height, 'height should have increased');
-
   });
   test('get text width', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
     var text = new Konva.Text({
-            text : 'hello asd fasdf asdf asd fasdf asdfasd fa sds helloo',
-            fill : 'black',
+      text: 'hello asd fasdf asdf asd fasdf asdfasd fa sds helloo',
+      fill: 'black',
       width: 100
     });
 
     layer.add(text);
     layer.draw();
     assert.equal(text.getTextWidth() > 0 && text.getTextWidth() < 100, true);
-
   });
 
   test('default text color should be black', function() {
@@ -550,14 +579,14 @@ suite('Text', function(){
 
     var text = new Konva.Text({
       fontSize: 50,
-            y : 50,
-            x : 50,
+      y: 50,
+      x: 50,
       fill: 'black',
       text: 'text',
-            stroke : 'red',
+      stroke: 'red',
       strokeScaleEnabled: false,
-            strokeWidth:2,
-            scaleX : 2
+      strokeWidth: 2,
+      scaleX: 2
     });
     layer.add(text);
     stage.add(layer);
@@ -581,8 +610,8 @@ suite('Text', function(){
 
     var text = new Konva.Text({
       fontSize: 50,
-            y : 50,
-            x : 50,
+      y: 50,
+      x: 50,
       fill: 'black',
       text: 'text'
     });
@@ -593,7 +622,10 @@ suite('Text', function(){
     var rect = text.getSelfRect();
 
     assert.deepEqual(rect, {
-            x : 0,y : 0, width : text.width(), height : 50
+      x: 0,
+      y: 0,
+      width: text.width(),
+      height: 50
     });
   });
 
@@ -603,11 +635,11 @@ suite('Text', function(){
 
     var text = new Konva.Text({
       fontSize: 20,
-            y : 50,
-            x : 50,
+      y: 50,
+      x: 50,
       fill: 'black',
       text: 'Hello world with cache!\nHow are you?',
-            draggable : true
+      draggable: true
     });
 
     text.cache();
@@ -615,11 +647,11 @@ suite('Text', function(){
 
     var text2 = new Konva.Text({
       fontSize: 20,
-            y : 50,
-            x : 260,
+      y: 50,
+      x: 260,
       fill: 'black',
       text: 'Hello world without cache!\nHow are you?',
-            draggable : true
+      draggable: true
     });
 
     layer.add(text2);
@@ -627,19 +659,19 @@ suite('Text', function(){
     stage.add(layer);
   });
 
-    test('gradient', function(){
+  test('gradient', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
 
     var text = new Konva.Text({
       fontSize: 100,
-            y : 10,
-            x : 10,
-            fillLinearGradientStartPoint: { x : -50, y : -50},
-            fillLinearGradientEndPoint: { x : 50, y : 50},
+      y: 10,
+      x: 10,
+      fillLinearGradientStartPoint: { x: -50, y: -50 },
+      fillLinearGradientEndPoint: { x: 50, y: 50 },
       fillLinearGradientColorStops: [0, 'yellow', 1, 'yellow'],
       text: 'Text with gradient!!',
-            draggable : true
+      draggable: true
     });
     layer.add(text);
     stage.add(layer);
@@ -653,5 +685,4 @@ suite('Text', function(){
     assert.equal(data[2], 0, 'no blue');
     assert.equal(data[3], 255, '255 alpha - fully visible');
   });
-
 });