Merge branch 'master' of github.com:konvajs/konva into master

src/Node.ts

@@ -323,6 +323,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *  region for debugging purposes
    * @param {Number} [config.pixelRatio] change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.
    * @param {Boolean} [config.imageSmoothingEnabled] control imageSmoothingEnabled property of created canvas for cache
+   * @param {Number} [config.hitCanvasPixelRatio] change quality (or pixel ratio) of cached hit canvas.
    * @returns {Konva.Node}
    * @example
    * // cache a shape with the x,y position of the bounding box at the center and
@@ -358,6 +359,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     offset?: number;
     pixelRatio?: number;
     imageSmoothingEnabled?: boolean;
+    hitCanvasPixelRatio?: number;
   }) {
     var conf = config || {};
     var rect = {} as IRect;
@@ -381,7 +383,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       x = conf.x === undefined ? rect.x : conf.x,
       y = conf.y === undefined ? rect.y : conf.y,
       offset = conf.offset || 0,
-      drawBorder = conf.drawBorder || false;
+      drawBorder = conf.drawBorder || false,
+      hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
 
     if (!width || !height) {
       Util.error(
@@ -407,7 +410,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
         height: 0,
       }),
       cachedHitCanvas = new HitCanvas({
-        pixelRatio: 1,
+        pixelRatio: hitCanvasPixelRatio,
         width: width,
         height: height,
       }),
@@ -417,7 +420,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     cachedHitCanvas.isCache = true;
     cachedSceneCanvas.isCache = true;
 
-    this._cache.delete('canvas');
+    this._cache.delete(CANVAS);
     this._filterUpToDate = false;
 
     if (conf.imageSmoothingEnabled === false) {
@@ -476,7 +479,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @returns {Boolean}
    */
   isCached() {
-    return this._cache.has('canvas');
+    return this._cache.has(CANVAS);
   }
 
   abstract drawScene(canvas?: Canvas, top?: Node): void;
@@ -579,7 +582,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       hitCanvas = canvasCache.hit;
     context.save();
     context.translate(canvasCache.x, canvasCache.y);
-    context.drawImage(hitCanvas._canvas, 0, 0);
+    context.drawImage(
+      hitCanvas._canvas,
+      0,
+      0,
+      hitCanvas.width / hitCanvas.pixelRatio,
+      hitCanvas.height / hitCanvas.pixelRatio,
+    );
     context.restore();
   }
   _getCachedSceneCanvas() {

src/index-types.d.ts

@@ -33,6 +33,7 @@ declare namespace Konva {
   export let dragDistance: number;
   export let angleDeg: boolean;
   export let showWarnings: boolean;
+  export let captureTouchEventsEnabled: boolean;
   export let dragButtons: Array<number>;
   export let hitOnDragEnabled: boolean;
   export const isDragging: () => boolean;

src/shapes/Arrow.ts

@@ -11,6 +11,7 @@ export interface ArrowConfig extends LineConfig {
   pointerLength?: number;
   pointerWidth?: number;
   pointerAtBeginning?: boolean;
+  pointerAtEnding?: boolean;
 }
 
 /**
@@ -24,7 +25,8 @@ export interface ArrowConfig extends LineConfig {
  *   The default is 0
  * @param {Number} config.pointerLength Arrow pointer length. Default value is 10.
  * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10.
- * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on both sides?. Default false.
+ * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on beginning position?. Default false.
+ * @param {Boolean} config.pointerAtEnding Do we need to draw pointer on ending position?. Default true.
  * @@shapeParams
  * @@nodeParams
  * @example
@@ -63,15 +65,17 @@ export class Arrow extends Line<ArrowConfig> {
     var length = this.pointerLength();
     var width = this.pointerWidth();
 
-    ctx.save();
+    if (this.pointerAtEnding()) {
-    ctx.beginPath();
+      ctx.save();
-    ctx.translate(points[n - 2], points[n - 1]);
+      ctx.beginPath();
-    ctx.rotate(radians);
+      ctx.translate(points[n - 2], points[n - 1]);
-    ctx.moveTo(0, 0);
+      ctx.rotate(radians);
-    ctx.lineTo(-length, width / 2);
+      ctx.moveTo(0, 0);
-    ctx.lineTo(-length, -width / 2);
+      ctx.lineTo(-length, width / 2);
-    ctx.closePath();
+      ctx.lineTo(-length, -width / 2);
-    ctx.restore();
+      ctx.closePath();
+      ctx.restore();
+    }
 
     if (this.pointerAtBeginning()) {
       ctx.save();
@@ -124,6 +128,7 @@ export class Arrow extends Line<ArrowConfig> {
 
   pointerLength: GetSet<number, this>;
   pointerWidth: GetSet<number, this>;
+  pointerAtEnding: GetSet<boolean, this>;
   pointerAtBeginning: GetSet<boolean, this>;
 }
 
@@ -176,3 +181,18 @@ Factory.addGetterSetter(Arrow, 'pointerWidth', 10, getNumberValidator());
  */
 
 Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false);
+/**
+ * get/set pointerAtEnding
+ * @name Konva.Arrow#pointerAtEnding
+ * @method
+ * @param {Number} Should pointer displayed at ending of arrow. The default is true.
+ * @returns {Boolean}
+ * @example
+ * // get value
+ * var pointerAtEnding = line.pointerAtEnding();
+ *
+ * // set value
+ * line.pointerAtEnding(false);
+ */
+
+Factory.addGetterSetter(Arrow, 'pointerAtEnding', true);

test/unit/Node-cache-test.ts

@@ -1474,4 +1474,42 @@ describe('Caching', function () {
       done();
     });
   });
+
+  test('hit from cache with custom pixelRatio', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 50,
+      width: 100,
+      height: 100,
+      fill: 'green',
+    });
+
+    layer.add(rect);
+    stage.add(layer);
+
+    rect.cache({
+      hitCanvasPixelRatio: 0.2,
+    });
+    layer.draw();
+
+    var hitCanvas = rect._cache.get("canvas").hit;
+    assert.equal(hitCanvas._canvas.width, rect.width() * 0.2);
+    assert.equal(hitCanvas._canvas.height, rect.height() * 0.2);
+    assert.equal(hitCanvas.pixelRatio, 0.2);
+
+    var canvas = createCanvas();
+    var context = canvas.getContext('2d');
+    context.beginPath();
+    context.rect(100, 50, 100, 100);
+    context.closePath();
+    context.fillStyle = 'green';
+    context.fill();
+    showHit(layer);
+    compareLayerAndCanvas(layer, canvas, 5);
+    assert.equal(stage.getIntersection({ x: 150, y: 100 }), rect);
+  });
 });