0

Estou criando um site com konva.js, nele é possível redimensionar os "rects" da tela. No entanto, quando eu clico em dblclick no transformador recebo o erro:

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

Isso bloqueia completamente a tela e me impede de arrastar, redimensionar o que está nela.

basicamente sem if (true) {return;} o transformador não comete erro, mas nesse caso seria necessário fazer algumas verificações com o transformador. O erro ocorre apenas com dblclick em um dos vértices do transformador.

Gostaria de saber se é possível resolver ou devo verificar em outro local.

Já tentei colocar o return new / old BoundBox, mas o erro continua.

<!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>

1 Resposta 1

1

Veja bem, quando você utiliza uma estrutura que demanda um controle condicional booleano e você define o controle para 100% das vezes ser true(que é o caso do seu if (true) { // ... }) você não está criando uma condicional, mas sim uma estrutura absoluta, em 100% das vezes o true será passado e o if vai ser executado rodando o "return", o "return" fará com que a função de boundBoxFunc seja finalizada e o seu parâmetro new/old boundBox nunca seja retornado como resultado.

Acredito que essa falha na lógica resulte no bloqueio de funcionamento pois ao disparar o evento essa função será chamada e como o retorno dela foi undefined a biblioteca vai tentar chama-la novamente até obter um valor válido para prosseguir, resultando no erro "maximum call stack size exceed" pois perceba que isso vai gerar uma sequência infinita de chamadas sem propósito algum e para evitar um loop infinito e um down de sua máquina o motor se encarrega de finalizar essa falha.

2
  • Bom, acredito que meu exemplo tenha sido falho. Não passo true como algo absoluto mas sim como uma variável, no caso estaria verificando se determinada condição seria ou não verdadeira, a verificação funciona o único problema é caso o usuário dê dblclick no transformador :( Commented 20/05/2019 às 12:19
  • Seria uma estrutura como if (foo = true){return} Commented 20/05/2019 às 12:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .