CODEWITHSUNDEEP
javascriptkonvajs
cdarwin
cdarwin

Reputation: 4301

Dragging a Konva layer from empty areas

I'd like to drag a Konva layer even if empty. I see that I can drag the layer only where objects are present (the code shows that you can drag where the rectangle is but nowhere else).

How can I drag the layer dragging empty parts?

Moreover, I see that also the mouseenter and mousleave aren't respected if you are out of the objects of the layer.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
<script src="js/modulePattern.js"></script>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
 
 
 
 <div id="container"></div>
 <script>
 
 function demo() {
	 
 var stage = new Konva.Stage({
      container: 'container',
      width: 100,
      height: 100
 });

 var layer = new Konva.Layer({draggable: true});
 stage.add(layer);
 
	 layer.on("dragmove", function() {
		console.log(this.x(), this.y())
	 });
 
	layer.on("mouseenter", function() {
		stage.container().style.cursor = 'pointer';
	});

	layer.on("mouseleave", function() {
		stage.container().style.cursor = 'default';
	});
  
var rect = new Konva.Rect({
  width: 50,
  height: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5
});

layer.add(rect);
 
 stage.draw();
 }
 
 demo();
</script>
  
</body>
</html>

Upvotes: 0

Views: 904

Answers (1)

lavrton
lavrton

Reputation: 20373

Konva does not detect events on empty space of layers. And it is unclear how can it do it if you have several layers on the stage.

If you still need to listen on empty layers and make a layer draggable at any space you can:

  1. Make stage draggable instead and listen events on it (click will work on empty space too).

  2. Add a transparent rectangle as a background, so it will be used to listen to events:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
<script src="js/modulePattern.js"></script>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
 
 
 
 <div id="container"></div>
 <script>
 
 function demo() {
	 
 var stage = new Konva.Stage({
      container: 'container',
      width: 300,
      height: 300
 });

 var layer = new Konva.Layer({draggable: true});
 stage.add(layer);

 
	layer.on("mouseenter", function() {
		stage.container().style.cursor = 'pointer';
	});

	layer.on("mouseleave", function() {
		stage.container().style.cursor = 'default';
	});
  
var rect = new Konva.Rect({
  width: 50,
  height: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 5
});

var back = new Konva.Rect({
   fill: 'red',
   width: stage.width(),
   height: stage.height()
})
layer.add(back);

// move rectangle so it always stay on the screen, no matter where layer it
layer.on('dragend', function() {
   back.setAbsolutePosition({x: 0, y: 0});
   layer.draw();
});



layer.add(rect);
 
 stage.draw();
 }
 
 demo();
</script>
  
</body>
</html>

Upvotes: 1

Related Questions