small refactoring

README.md

@@ -61,6 +61,12 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github
 </script>
 ```
 
+# Browsers support
+
+Konva works in all modern mobile and desktop browsers. A browser need to be capable to run javascript code from ES2015 spec. For older browsers you may need polyfills for missing functions.
+
+At the current moment `Konva` doesn't work in IE11 directly. To make it work you just need to provide some polyfills such as `Array.prototype.find`, `String.prototype.trimLeft` and `String.prototype.trimRight`.
+
 # Loading and installing Konva
 
 Konva supports UMD loading. So you can use all possible variants to load the framework into your project:
@@ -118,6 +124,8 @@ var shape = new Konva.Rect();
 import { Blur } from 'konva/lib/filters/Blur';
 ```
 
+
+
 ### 5 NodeJS
 
 We are using [node-canvas](https://github.com/Automattic/node-canvas) to create canvas element.

src/shapes/Text.ts

@@ -466,7 +466,7 @@ export class Text extends Shape<TextConfig> {
               }
             }
             // if (align === 'right') {
-            match = trimRight.call(match);
+            match = match.trimRight();
             // }
             this._addTextLine(match);
             textWidth = Math.max(textWidth, matchWidth);

test/functional/MouseEvents-test.js

@@ -2071,7 +2071,7 @@ suite('MouseEvents', function() {
     layer.draw();
 
     var mousemove = 0;
-    rect.on('mousemove', () => {
+    rect.on('mousemove', function() {
       mousemove += 1;
     });
 

test/functional/TouchEvents-test.js

@@ -532,12 +532,12 @@ suite('TouchEvents', function() {
     var tap = 0;
     var dbltap = 0;
 
-    stage.on('tap', e => {
+    stage.on('tap', function(e) {
       assert.equal(e.target, circle1);
       tap += 1;
     });
 
-    stage.on('dbltap', e => {
+    stage.on('dbltap', function(e) {
       assert.equal(e.target, circle1);
       dbltap += 1;
     });
@@ -584,16 +584,16 @@ suite('TouchEvents', function() {
     var dbltap = 0;
     var dragmove = 0;
 
-    stage.on('tap', e => {
+    stage.on('tap', function(e) {
       assert.equal(e.target, circle1);
       tap += 1;
     });
 
-    stage.on('dbltap', e => {
+    stage.on('dbltap', function(e) {
       dbltap += 1;
     });
 
-    stage.on('dragmove', e => {
+    stage.on('dragmove', function(e) {
       dragmove += 1;
     });
 
@@ -645,14 +645,14 @@ suite('TouchEvents', function() {
     var tap = 0;
     var click = 0;
 
-    stage.on('tap', e => {
+    stage.on('tap', function(e) {
       assert.equal(e.target, circle1);
       assert.equal(stage.getPointerPosition().x, 100);
       assert.equal(stage.getPointerPosition().y, 100);
       tap += 1;
     });
 
-    stage.on('click', e => {
+    stage.on('click', function(e) {
       click += 1;
     });
 

test/runner.js

@@ -89,7 +89,7 @@ function addStats() {
 
 function addStage(attrs) {
   var container = document.createElement('div');
-  const props = Object.assign(
+  const props = Konva.Util._assign(
     {
       container: container,
       width: 578,
@@ -292,16 +292,20 @@ Konva.Stage.prototype.simulateTouchStart = function(pos, changed) {
   var touches;
   var changedTouches;
   if (Array.isArray(pos)) {
-    touches = pos.map(touch => ({
-      identifier: touch.id,
-      clientX: touch.x,
-      clientY: touch.y + top
-    }));
-    changedTouches = (changed || pos).map(touch => ({
-      identifier: touch.id,
-      clientX: touch.x,
-      clientY: touch.y + top
-    }));
+    touches = pos.map(function(touch) {
+      return {
+        identifier: touch.id,
+        clientX: touch.x,
+        clientY: touch.y + top
+      }
+    });
+    changedTouches = (changed || pos).map(function(touch) {
+      return {
+        identifier: touch.id,
+        clientX: touch.x,
+        clientY: touch.y + top
+      }
+    });
   } else {
     changedTouches = touches = [
       {
@@ -325,16 +329,20 @@ Konva.Stage.prototype.simulateTouchMove = function(pos, changed) {
   var touches;
   var changedTouches;
   if (Array.isArray(pos)) {
-    touches = pos.map(touch => ({
-      identifier: touch.id,
-      clientX: touch.x,
-      clientY: touch.y + top
-    }));
-    changedTouches = (changed || pos).map(touch => ({
-      identifier: touch.id,
-      clientX: touch.x,
-      clientY: touch.y + top
-    }));
+    touches = pos.map(function(touch) {
+      return {
+        identifier: touch.id,
+        clientX: touch.x,
+        clientY: touch.y + top
+      }
+    });
+    changedTouches = (changed || pos).map(function(touch) {
+      return {
+        identifier: touch.id,
+        clientX: touch.x,
+        clientY: touch.y + top
+      }
+    });
   } else {
     changedTouches = touches = [
       {
@@ -359,16 +367,20 @@ Konva.Stage.prototype.simulateTouchEnd = function(pos, changed) {
   var touches;
   var changedTouches;
   if (Array.isArray(pos)) {
-    touches = pos.map(touch => ({
-      identifier: touch.id,
-      clientX: touch.x,
-      clientY: touch.y + top
-    }));
-    changedTouches = (changed || pos).map(touch => ({
-      identifier: touch.id,
-      clientX: touch.x,
-      clientY: touch.y + top
-    }));
+    touches = pos.map(function(touch) {
+      return {
+        identifier: touch.id,
+        clientX: touch.x,
+        clientY: touch.y + top
+      }
+    });
+    changedTouches = (changed || pos).map(function(touch) {
+      return {
+        identifier: touch.id,
+        clientX: touch.x,
+        clientY: touch.y + top
+      }
+    });
   } else {
     changedTouches = touches = [
       {
@@ -429,3 +441,60 @@ Konva.Stage.prototype.simulatePointerUp = function(pos) {
 };
 
 init();
+
+
+// polyfills
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+
+
+String.prototype.trimRight = String.prototype.trimRight || function polyfill() {
+  return this.replace(/[\s\xa0]+$/, '');
+}
+
+String.prototype.trimLeft = String.prototype.trimLeft || function polyfill() {
+  return this.replace(/^\s+/, '');
+}

test/unit/DragAndDrop-test.js

@@ -1072,7 +1072,7 @@ suite('DragAndDrop', function() {
       strokeWidth: 4,
       name: 'myCircle',
       draggable: true,
-      dragBoundFunc: () => {}
+      dragBoundFunc: function() {}
     });
 
     layer.add(circle);

test/unit/Node-cache-test.js

@@ -1235,13 +1235,13 @@ suite('Caching', function() {
     var layer = new Konva.Layer({});
     stage.add(layer);
 
-    Konva.Image.fromURL('./assets/lion.png', lion => {
+    Konva.Image.fromURL('./assets/lion.png', function(lion) {
       lion.name('lion');
       lion.cache();
       lion.drawHitFromCache();
       layer.add(lion);
 
-      Konva.Image.fromURL('./assets/lion.png', lion2 => {
+      Konva.Image.fromURL('./assets/lion.png', function(lion2) {
         lion2.position({
           x: 50,
           y: 50

test/unit/Stage-test.js

@@ -545,7 +545,7 @@ suite('Stage', function() {
   test('Should not throw on clip for stage', function() {
     // no asserts, because we check throw
     var stage = addStage({
-      clipFunc: () => {}
+      clipFunc: function(){}
     });
     var layer = new Konva.Layer();
 

test/unit/shapes/Line-test.js

@@ -303,7 +303,7 @@ suite('Line', function() {
     layer.add(line);
 
     var client = line.getClientRect();
-    var rect = new Konva.Rect(Object.assign({ stroke: 'red' }, client));
+    var rect = new Konva.Rect(Konva.Util._assign({ stroke: 'red' }, client));
     layer.add(rect);
 
     stage.add(layer);

test/unit/shapes/Sprite-test.js

@@ -384,7 +384,7 @@ suite('Sprite', function() {
       stage.add(layer);
 
       var counter = 0;
-      sprite.on('frameIndexChange.konva', event => {
+      sprite.on('frameIndexChange.konva', function(event) {
         counter += 1;
       });
 

test/unit/shapes/Text-test.js

@@ -13,6 +13,22 @@ suite('Text', function() {
     layer.draw();
   });
 
+  // ======================================================
+  test('check text with FALSY values', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    stage.add(layer);
+    var text = new Konva.Text();
+
+    layer.add(text);
+    layer.draw();
+
+
+    text.text(0);
+    assert.equal(text.text(), '0');
+  });
+
   // ======================================================
   test('text with undefined text property should not throw an error', function() {
     var stage = addStage();

test/unit/shapes/TextPath-test.js

@@ -546,7 +546,7 @@ suite('TextPath', function() {
     layer.draw();
 
     var called = false;
-    kernedText.kerningFunc(() => {
+    kernedText.kerningFunc(function() {
       called = true;
       return 1;
     });

test/unit/shapes/Transformer-test.js

@@ -1716,7 +1716,7 @@ suite('Transformer', function() {
     });
     layer.add(tr);
 
-    tests.forEach(test => {
+    tests.forEach(function(test) {
       rect.setAttrs({
         x: 0,
         y: 0,
@@ -1781,7 +1781,7 @@ suite('Transformer', function() {
     });
     layer.add(tr);
 
-    tests.forEach(test => {
+    tests.forEach(function(test) {
       rect.setAttrs({
         x: 0,
         y: 0,
@@ -2027,12 +2027,12 @@ suite('Transformer', function() {
     shape.outerRadius(100);
 
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
     shape.innerRadius(200);
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
@@ -2065,13 +2065,13 @@ suite('Transformer', function() {
     layer.draw();
 
     shape.points([10, 10, 100, 10]);
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     layer.draw();
     assert.deepEqual(shape.getClientRect(), rect);
 
     shape.strokeWidth(10);
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     layer.draw();
     assert.deepEqual(shape.getClientRect(), rect);
@@ -2099,7 +2099,7 @@ suite('Transformer', function() {
 
     shape.radius(100);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
   });
@@ -2130,12 +2130,12 @@ suite('Transformer', function() {
     shape.radiusX(120);
 
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
     shape.radiusY(100);
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
@@ -2166,12 +2166,12 @@ suite('Transformer', function() {
     shape.width(120);
 
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
     shape.height(110);
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
@@ -2200,7 +2200,7 @@ suite('Transformer', function() {
     shape.data('M200,100h100v50z');
     layer.draw();
 
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
   });
@@ -2229,7 +2229,7 @@ suite('Transformer', function() {
     shape.radius(100);
     layer.draw();
 
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
   });
@@ -2258,12 +2258,12 @@ suite('Transformer', function() {
     shape.outerRadius(100);
 
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
     shape.innerRadius(200);
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
@@ -2295,12 +2295,12 @@ suite('Transformer', function() {
     shape.outerRadius(100);
 
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
     shape.innerRadius(200);
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
 
@@ -2330,7 +2330,7 @@ suite('Transformer', function() {
 
     shape.radius(100);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect);
   });
@@ -2357,37 +2357,37 @@ suite('Transformer', function() {
 
     shape.text('Simple');
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect, 'change text');
 
     shape.fontSize(30);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect, 'change font size');
 
     shape.padding(10);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect, 'change padding');
 
     shape.lineHeight(2);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect, 'change line height');
 
     shape.width(30);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect), 'change width';
 
     shape.height(30);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect, 'change height');
   });
@@ -2416,19 +2416,19 @@ suite('Transformer', function() {
 
     shape.text('Simple');
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect, 'change text');
 
     shape.fontSize(30);
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect, 'change font size');
 
     shape.data('M10,10 C0,0 10,150 100,100 S300,150 400,50');
     layer.draw();
-    var rect = Object.assign({}, tr._getNodeRect());
+    var rect = Konva.Util._assign({}, tr._getNodeRect());
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect), 'change data';
   });