update docs, fix fullRule for hit graph, close #1787

CHANGELOG.md

@@ -3,6 +3,8 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+- Support `fillRule` for `Konva.Shape` on hit graph
+
 ### 9.3.13 (2024-07-05)
 
 - Fallback for `Konva.Text.measureSize()` when 2d context doesn't return full data

src/Container.ts

@@ -307,6 +307,7 @@ export abstract class Container<
    * canvas and redraw every shape inside the container, it should only be used for special situations
    * because it performs very poorly.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
    * because it performs much better
+   * nodes with listening set to false will not be detected
    * @method
    * @name Konva.Container#getAllIntersections
    * @param {Object} pos

src/Layer.ts

@@ -309,6 +309,7 @@ export class Layer extends Container<Group | Shape> {
    * get visible intersection shape. This is the preferred
    * method for determining if a point intersects a shape or not
    * also you may pass optional selector parameter to return ancestor of intersected shape
+   * nodes with listening set to false will not be detected
    * @method
    * @name Konva.Layer#getIntersection
    * @param {Object} pos

src/Node.ts

@@ -3155,6 +3155,8 @@ addGetterSetter(Node, 'listening', true, getBooleanValidator());
 /**
  * get/set listening attr.  If you need to determine if a node is listening or not
  *   by taking into account its parents, use the isListening() method
+ *   nodes with listening set to false will not be detected in hit graph
+ *   so they will be ignored in container.getIntersection() method
  * @name Konva.Node#listening
  * @method
  * @param {Boolean} listening Can be true, or false.  The default is true.

src/Shape.ts

@@ -128,8 +128,13 @@ function _fillFunc(this: Node, context) {
 function _strokeFunc(context) {
   context.stroke();
 }
-function _fillFuncHit(context) {
-  context.fill();
+function _fillFuncHit(this: Node, context) {
+  const fillRule = this.attrs.fillRule;
+  if (fillRule) {
+    context.fill(fillRule);
+  } else {
+    context.fill();
+  }
 }
 function _strokeFuncHit(context) {
   context.stroke();

src/Stage.ts

@@ -353,6 +353,7 @@ export class Stage extends Container<Layer> {
   /**
    * get visible intersection shape. This is the preferred
    *  method for determining if a point intersects a shape or not
+   * nodes with listening set to false will not be detected
    * @method
    * @name Konva.Stage#getIntersection
    * @param {Object} pos

test/unit/Shape-test.ts

@@ -2303,4 +2303,36 @@ describe('Shape', function () {
     assert.equal(callCount, 0);
     Konva.Util.warn = oldWarn;
   });
+
+  it('fill rule on hit graph', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var mask = new Konva.Shape({
+      sceneFunc: function (ctx, shape) {
+        ctx.beginPath();
+        ctx.rect(0, 0, 500, 500);
+        ctx.rect(100, 100, 100, 100);
+        ctx.closePath();
+        ctx.fillShape(shape);
+      },
+      draggable: true,
+      fill: 'red',
+      fillRule: 'evenodd',
+    });
+
+    layer.add(mask);
+    layer.draw();
+    const trace = layer.getContext().getTrace();
+
+    assert.equal(
+      trace,
+      'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,500,500);rect(100,100,100,100);closePath();fillStyle=red;fill(evenodd);restore();'
+    );
+
+    const hitShape = layer.getIntersection({ x: 150, y: 150 });
+    assert.equal(hitShape, null);
+  });
 });