Merge branch 'master' of https://github.com/rfestag/konva into rfestag-master

src/Context.ts

@@ -327,8 +327,8 @@ export class Context {
   isPointInPath(x, y) {
     return this._context.isPointInPath(x, y);
   }
-  fill() {
-    this._context.fill();
+  fill(rule) {
+    this._context.fill(rule);
   }
   fillRect(x, y, width, height) {
     this._context.fillRect(x, y, width, height);

src/Shape.ts

@@ -38,6 +38,7 @@ export interface ShapeConfig extends NodeConfig {
   fillLinearGradientEndPointX?: number;
   fillLinearGradientEndPointY?: number;
   fillLinearGradientColorStops?: Array<number | string>;
+  fillRule?: string;
   fillRadialGradientStartPoint?: Vector2d;
   fillRadialGradientStartPointX?: number;
   fillRadialGradientStartPointY?: number;
@@ -96,13 +97,13 @@ export const shapes = {};
 // what color to use for hit test?
 
 function _fillFunc(context) {
-  context.fill();
+  context.fill(this.attrs.fillRule);
 }
 function _strokeFunc(context) {
   context.stroke();
 }
 function _fillFuncHit(context) {
-  context.fill();
+  context.fill(this.attrs.fillRule);
 }
 function _strokeFuncHit(context) {
   context.stroke();
@@ -731,6 +732,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
   fillLinearRadialEndPoint: GetSet<Vector2d, this>;
   fillLinearRadialEndPointX: GetSet<number, this>;
   fillLinearRadialEndPointY: GetSet<number, this>;
+  fillRule: GetSet<string, this>;
   fillPatternImage: GetSet<HTMLImageElement, this>;
   fillRadialGradientStartRadius: GetSet<number, this>;
   fillRadialGradientEndRadius: GetSet<number, this>;
@@ -1231,6 +1233,22 @@ Factory.addGetterSetter(Shape, 'fillLinearGradientColorStops');
  * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
  */
 
+Factory.addGetterSetter(Shape, 'fillRule');
+
+/**
+ * get/set fill method
+ * @name Konva.Shape#fillRule
+ * @method
+ * @param {string} fillRule. Must be 'nonzero', 'evenodd', or undefined. Default is undefined, which behaves like 'nonzero'
+ * @returns {string} fillRule
+ * @example
+ * // get fill rule. Undefined by default will use browser default (generally meaning 'nonzero')
+ * var colorStops = shape.fillRule();
+ *
+ * // change the fill rule (generally using 'evenodd'). Use this if you specify a shape that intersects with itself, and want the intersection area to be a hole. You can also use evenodd if you specify a single hole in a closed Line, and not worry about the winding direction.
+ * shape.fillRule('evenodd');
+ */
+
 Factory.addGetterSetter(Shape, 'strokeLinearGradientColorStops');
 
 /**

src/Util.ts

@@ -594,7 +594,7 @@ export const Util = {
       if (util._isNumber(val)) {
         val = Math.round(val * 1000) / 1000;
       } else if (!util._isString(val)) {
-        val = val.toString();
+        val = val !== undefined ? val.toString() : undefined;
       }
 
       retArr.push(val);

src/Validators.ts

@@ -123,6 +123,26 @@ export function getNumberArrayValidator() {
     };
   }
 }
+export function getNumberArrayArrayValidator() {
+  if (Konva.isUnminified) {
+    return function(val, attr) {
+      var numberArrayValidator = getNumberArrayValidator();
+      if (!Util._isArray(val)) {
+        Util.warn(
+          _formatValue(val) +
+            ' is a not valid value for "' +
+            attr +
+            '" attribute. The value should be a array of numbers.'
+        );
+      } else {
+        val.forEach(function(item) {
+          numberArrayValidator(item, attr)
+        });
+      }
+      return val;
+    };
+  }
+}
 export function getBooleanValidator() {
   if (Konva.isUnminified) {
     return function(val: any, attr: string) {

src/shapes/Line.ts

@@ -1,13 +1,14 @@
 import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
 import { Shape, ShapeConfig } from '../Shape';
-import { getNumberValidator, getNumberArrayValidator } from '../Validators';
+import { getNumberValidator, getNumberArrayValidator, getNumberArrayArrayValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
 export interface LineConfig extends ShapeConfig {
   points: number[];
+  holes: number[][];
   tension?: number;
   closed?: boolean;
   bezier?: boolean;
@@ -21,6 +22,7 @@ export interface LineConfig extends ShapeConfig {
  * @augments Konva.Shape
  * @param {Object} config
  * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
+ * @param {Array} config.holes Nested array of array of hole coordinates. Each array of coordinates is a different hole, and should be wound in the opposite direction as the containing points array. You should define them as [[x1, y1, x2, y2, x3, y3]].
  * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
  *   The default is 0
  * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob
@@ -50,9 +52,8 @@ export class Line<Config extends LineConfig = LineConfig> extends Shape<
     );
   }
 
-  _sceneFunc(context) {
-    var points = this.points(),
-      length = points.length,
+  _drawLine(points, context) {
+    var length = points.length,
       tension = this.tension(),
       closed = this.closed(),
       bezier = this.bezier(),
@@ -64,7 +65,6 @@ export class Line<Config extends LineConfig = LineConfig> extends Shape<
       return;
     }
 
-    context.beginPath();
     context.moveTo(points[0], points[1]);
 
     // tension
@@ -116,10 +116,29 @@ export class Line<Config extends LineConfig = LineConfig> extends Shape<
         context.lineTo(points[n], points[n + 1]);
       }
     }
+  }
+  _sceneFunc(context) {
+    var points = this.points(),
+      holes = this.holes(),
+      closed = this.closed(),
+      h;
+
+    if (!points.length) {
+      return;
+    }
+
+    context.beginPath();
+    this._drawLine(points, context);
 
     // closed e.g. polygons and blobs
     if (closed) {
       context.closePath();
+      if (holes && holes.length) {
+        for (h = 0; h < holes.length; h++) {
+          this._drawLine(holes[h], context);
+          context.closePath();
+        }
+      }
       context.fillStrokeShape(this);
     } else {
       // open e.g. lines and splines
@@ -215,6 +234,7 @@ export class Line<Config extends LineConfig = LineConfig> extends Shape<
   bezier: GetSet<boolean, this>;
   tension: GetSet<number, this>;
   points: GetSet<number[], this>;
+  holes: GetSet<number[][], this>;
 }
 
 Line.prototype.className = 'Line';
@@ -291,4 +311,20 @@ Factory.addGetterSetter(Line, 'points', [], getNumberArrayValidator());
  * line.points(line.points().concat([70, 80]));
  */
 
+Factory.addGetterSetter(Line, 'holes', [], getNumberArrayArrayValidator());
+/**
+ * get/set holes array. Holes is a nested array of arrays [[x1, y1, x2, y2]]. It is nested to allow for multiple holes to be defined. They must be wound in opposite direcetions of the points array (i.e., if the points are defined clockwise, holes must all be defined counter-clockwise. You can ignore winding if you only have one hole, and you specify an 'evenodd' fillRule.
+ * @name Konva.Line#holes
+ * @method
+ * @param {Array} holes
+ * @returns {Array}
+ * @example
+ * // get points
+ * var holes = line.holes();
+ *
+ * // set holes
+ * line.holes([[10, 20, 30, 40, 50, 60]]);
+ *
+ */
+
 Collection.mapMethods(Line);

test/manual/manual-test.js

@@ -34,7 +34,7 @@ suite('Manual', function() {
 
     var anim = new Konva.Animation(function(frame) {
       hexagon.setX(
-        amplitude * Math.sin(new Date().getTime() * 2 * Math.PI / period) +
+        amplitude * Math.sin((new Date().getTime() * 2 * Math.PI) / period) +
           centerX
       );
     }, layer);
@@ -67,7 +67,7 @@ suite('Manual', function() {
     var velocity = 360; // 1 rev per second
 
     var anim = new Konva.Animation(function(frame) {
-      layer.find('Rect').rotate(velocity * frame.timeDiff / 1000);
+      layer.find('Rect').rotate((velocity * frame.timeDiff) / 1000);
     }, layer);
 
     anim.start();
@@ -407,4 +407,57 @@ suite('Manual', function() {
 
     showHit(layer);
   });
+
+  // ======================================================
+  test.only('closed shape with holes (opposite direction)', function(done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      fill: 'red',
+      x: 150,
+      y: 150,
+      radius: 100
+    });
+    var line = new Konva.Line({
+      fill: 'blue',
+      closed: true,
+      stroke: 'black'
+    });
+    //In this example, we explicitly list holes, allowing for
+    //multiple holes to be specified. This depends on the
+    //coordinates to be wound in opposite orders (i.e, outer
+    //polygon is clockwise, inner polygons are counter-clockwise)
+    line.points([0, 0, 300, 0, 300, 300, 0, 300]);
+    line.holes([
+      [50, 50, 50, 100, 100, 100, 100, 50],
+      [200, 50, 400, 100, 250, 100, 250, 50]
+    ]);
+    layer.add(circle);
+    layer.add(line);
+    stage.add(layer);
+    done();
+  });
+
+  // ======================================================
+  test.only('closed shape with holes (evenodd)', function(done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      fill: 'red',
+      x: 150,
+      y: 150,
+      radius: 100
+    });
+    var line = new Konva.Line({
+      fill: 'blue',
+      closed: true
+    });
+    line.fillRule('evenodd');
+    //In this example, the points cross each other to create a hole in the middle
+    line.points([30, 90, 110, 20, 240, 130, 60, 130, 190, 20, 270, 90]);
+    layer.add(circle);
+    layer.add(line);
+    stage.add(layer);
+    done();
+  });
 });