Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maximum call stack size exceeded when I click transformer's rects without dragging them #1817

Open
maxfrees opened this issue Sep 3, 2024 · 1 comment

Comments

@maxfrees
Copy link

maxfrees commented Sep 3, 2024

When I click on a blank place it shows beyond the stack

chrome_Sz3HBUTvBv.mp4

@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);
    }
@lavrton
Copy link
Member

lavrton commented Sep 3, 2024

Make a demo. From the video, looks like you added a node into transformer. Like tr.add(node). If so, don't do that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants