dlclick on Transformer give me a stack error: Maximum call stack size exceed

Asked

Viewed 49 times

0

I’m creating a website with konva.js, in it is possible to resize the "rects" of the screen. However, when I click dblclick on the transformer I get the error:

Uncaught RangeError: tamanho máximo da pilha de chamadas excedido

This completely blocks the screen and prevents me from dragging, resizing what is on it.

basically without if (true) {return;} the transformer makes no mistake, but in that case it would be necessary to make some checks with the transformer. The error occurs only with dblclick at one of the transformer vertices.

I would like to know if it is possible to resolve or I should check elsewhere.

I have tried to put the new/old Boundbox, but the error continues.

<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Select and Transform Demo</title>
<style>
	body {
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #f0f0f0;
	}
</style>
</head>

<body>
<div id="container"></div>
<script>
	var width = window.innerWidth;
	var height = window.innerHeight;

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

	var layer = new Konva.Layer();
	stage.add(layer);

	var rect1 = new Konva.Rect({
		x: 60,
		y: 60,
		width: 100,
		height: 90,
		fill: 'red',
		name: 'rect',
		draggable: true
	});
	layer.add(rect1);

	var rect2 = new Konva.Rect({
		x: 250,
		y: 100,
		width: 150,
		height: 90,
		fill: 'green',
		name: 'rect',
		draggable: true
	});
	layer.add(rect2);
	layer.draw();

	stage.on('click tap', function (e) {
		// if click on empty area - remove all transformers
		if (e.target === stage) {
			stage.find('Transformer').destroy();
			layer.draw();
			return;
		}
		// do nothing if clicked NOT on our rectangles
		if (!e.target.hasName('rect')) {
			return;
		}
		// remove old transformers
		// TODO: we can skip it if current rect is already selected
		stage.find('Transformer').destroy();

		// create new transformer
		var tr = new Konva.Transformer({
			isTransformer: true,
			rotateEnabled: false,
			ignoreStroke: true,
			boundBoxFunc: function (oldBoundBox, newBoundBox) {
				if (true){
					return ;
				}
				return newBoundBox;
			}
		});
		layer.add(tr);
		tr.attachTo(e.target);
		layer.draw();
	});
</script>
</body>

</html>

javascript

1 answer

1

You see, when you use a structure that demands a Boolean conditional control and you set the control to 100% of the time be true (which is the case with your if (true) { // ... }) you are not creating a conditional, but an absolute structure, 100% of the time true will be passed and if will be executed by running "Return", "Return" will cause the boundBoxFunc function to be terminated and its new/old boundBox parameter will never be returned as a result.

I believe that this failure in the logic results in the working lock because when firing the event this function will be called and as the return of it was Undefined the library will try to call it again until it gets a valid value to proceed, resulting in the error "Maximum call stack size exceed" because realize that this will generate an infinite sequence of calls without any purpose and to avoid an infinite loop and a down of your machine the engine takes care of ending this failure.

  • Well, I believe my example was flawed. Not true step as something absolute but rather as a variable, in case would be checking whether certain condition would be true or not, the check works the only problem is if the user gives dblclick on the transformer :(

  • It would be a structure like if (foo = true){return}

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.