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>