konva
konva copied to clipboard
Maximum call stack size exceeded when I click transformer's rects without dragging them
When I click on a blank place it shows beyond the stack
https://github.com/user-attachments/assets/6da7ca8a-ce53-4fd2-a1f1-339f96a7c58c
@lavrton
selecting = false;
if (!selectionRectangle.visible()) {
return;
}
e.evt.preventDefault();
selectionRectangle.visible(false);
const shapes = stage.find('.rects');
const box = selectionRectangle.getClientRect();
const selected = shapes.filter(shape => Konva.Util.haveIntersection(box, shape.getClientRect()));
transformer.nodes(selected);
transformer = new Konva.Transformer({ shouldOverdrawWholeArea: true });
stage.add(layer);
layer.add(transformer);
stage.container().addEventListener('dragover', e => e.preventDefault());
stage.container().addEventListener('drop', onDrop);
const { selectionRectangle, startSelection, moveSelection, endSelection } = useSelection({ stage, transformer });
layer.add(selectionRectangle);
layer.draw();
stage.on('mousedown touchstart', startSelection);
stage.on('mousemove touchmove', moveSelection);
stage.on('mouseup touchend', endSelection);
// window.addEventListener('keydown', handleKeyDown);
stage.on('click tap', e => handleOnClickStage(e, selectionRectangle));
const rect = new Konva.Rect({
x: dropX,
y: dropY,
width: rectWidth,
height: rectHeight,
fill: 'red',
name: 'rects',
draggable: true
});
layer.add(rect);
layer.draw();
if (selectionRectangle.visible()) {
return;
}
if (e.target === stage) {
transformer.nodes([]);
return;
}
const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
const isSelected = transformer.nodes().includes(e.target);
if (!metaPressed && !isSelected) {
transformer.nodes([e.target]);
} else if (metaPressed && isSelected) {
const nodes = transformer.nodes().slice();
nodes.splice(nodes.indexOf(e.target), 1);
transformer.nodes(nodes);
} else if (metaPressed && !isSelected) {
const nodes = transformer.nodes().concat([e.target]);
transformer.nodes(nodes);
}