How to propagate a click event from a shape in the Upper layer to an image in the Lower Layer using KonvaJS?

Question

Disclaimer: it may be considered this post is a duplicate of this post but I have demonstrated my need specifically.

I have a case in my KonvaJS application where I need to propagate a click event from the Rectangle shape (that is a child of the Upper Layer) to several images that are added to the Lower Layer.

Please note that I have in the Lower layer more than 50 objects between images and shapes, so how can I now what is the target object in the Lower Layer.

Kindly here is an example to demonstrate my need:

 var width = window.innerWidth;
 var height = window.innerHeight;

 var stage = new Konva.Stage({
   container: 'container',
   width: width,
   height: height
 });

 var lowerLayer = new Konva.Layer();
 var upperLayer = new Konva.Layer();

 //lion
 var lionImage = new Image();
 lionImage.onload = function() {

   var lion = new Konva.Image({
     x: 50,
     y: 50,
     image: lionImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(lion);
   stage.draw();

   lion.on("click", function() {
     alert("you clicked the lion");
   });

 };
 lionImage.src = 'http://konvajs.github.io/assets/lion.png';

 //monkey
 var monkeyImage = new Image();
 monkeyImage.onload = function() {

   var monkey = new Konva.Image({
     x: 200,
     y: 50,
     image: monkeyImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(monkey);
   stage.draw();

   monkey.on("click", function() {
     alert("you clicked the monkey");
   });
 };
 monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';

 var upperTransparentBox = new Konva.Rect({
   x: 0,
   y: 0,
   height: stage.height(),
   width: stage.width(),
   fill: 'transparent',
   draggable: false,
   name: 'upperTransparentBox'
 });
 upperTransparentBox.on("click", function() {
   alert("you clicked the upper Transparent Box");
 });
 upperLayer.add(upperTransparentBox);

 // add the layer to the stage
 stage.add(lowerLayer);
 stage.add(upperLayer);

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Image Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>

</html>

lavrton lavrton · Accepted Answer · 2016-07-15T01:26:33

Technically it is possible to manually trigger click event on any node. But I think it is an antipattern. You can just find an intersection with 'getIntersection()' function and do what you need with a node.

 var width = window.innerWidth;
 var height = window.innerHeight;

 var stage = new Konva.Stage({
   container: 'container',
   width: width,
   height: height
 });

 var lowerLayer = new Konva.Layer();
 var upperLayer = new Konva.Layer();

 //lion
 var lionImage = new Image();
 lionImage.onload = function() {

   var lion = new Konva.Image({
     x: 50,
     y: 50,
     name: 'lion',
     image: lionImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(lion);
   stage.draw();

   lion.on("click", function() {
     alert("you clicked the lion");
   });

 };
 lionImage.src = 'http://konvajs.github.io/assets/lion.png';

 //monkey
 var monkeyImage = new Image();
 monkeyImage.onload = function() {

   var monkey = new Konva.Image({
     x: 200,
     y: 50,
     name: 'monkey',
     image: monkeyImage,
     width: 106,
     height: 118
   });

   // add the shape to the layer
   lowerLayer.add(monkey);
   stage.draw();

   monkey.on("click", function() {
     alert("you clicked the monkey");
   });
 };
 monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';

 var upperTransparentBox = new Konva.Rect({
   x: 0,
   y: 0,
   height: stage.height(),
   width: stage.width(),
   fill: 'transparent',
   draggable: false,
   name: 'upperTransparentBox'
 });
 upperTransparentBox.on("click", function() {
   var target = lowerLayer.getIntersection(stage.getPointerPosition());
   if (target) {
      alert('clicked on ' + target.name());
   }
 });
 upperLayer.add(upperTransparentBox);

 // add the layer to the stage
 stage.add(lowerLayer);
 stage.add(upperLayer);

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Image Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>

</html>

How to propagate a click event from a shape in the Upper layer to an image in the Lower Layer using KonvaJS?

1 Answers