Giters

konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Home Page:http://konvajs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Transformer handle drag issue: losing control after dragging and clicking on stage

karl20888 opened this issue · comments

commented

When dragging a Transformer's handle, it is not possible to continue dragging without first clicking on the stage. This behavior causes loss of control over the Transformer. Upon investigation, it appears that the click event on the stage is being triggered instead of the desired handle drag event.

commented

Not sure if it's the same problem, but I have a similar problem: Basic example project can be found in #1727. With Konva 9.3.5 you loose all control over the object after the transformer was used once to rotate or resize the object. I believe this is a bug introduced by the latest performance improvements. However, I'm not sure about this as I'm no JS expert and it could have been introduced by the recent changes in the event order as well.

A demo can be found at https://bliepp.uber.space/demo/konva_lag/9.3.5/

commented

@bliepp oh, that is a bad bug. Thanks for the report.

@karl20888 can you make a demo of your issue?

commented

@bliepp fixed in the last version 9.3.6. Please confirm.

commented

@lavrton same as bliepp's
Thank you so much for fixing this bug! I have confirmed that version 9.3.6 addresses the issue. Your contribution is greatly appreciated!

commented

@lavrton Thanks, I appreciate your commitment to fast paced bug fixes. I can confirm the bug's now gone with 9.3.6.

commented

Hello guys, I've lately upgraded to latest Konva version (9.3.6) and I get this error:

ERROR TypeError: Cannot read properties of undefined (reading 'isDragging')
    at Object.isDragging (Global.js:46:36)
    at Stage._pointerleave (Stage.js:349:46)
    at content.addEventListener.passive (Stage.js:308:33)
    at _ZoneDelegate.invokeTask (zone.umd.js:445:35)
    at core.mjs:10757:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36)
    at _ZoneDelegate.invokeTask (zone.umd.js:444:64)
    at Object.onInvokeTask (core.mjs:11070:33)
    at _ZoneDelegate.invokeTask (zone.umd.js:444:64)
    at Zone.runTask (zone.umd.js:210:51)

Maybe it's related to this issue?

commented

@giovanni-bertoncelli It might be related, but my demo does not throw that error. Does this error show up with any of the other latest realeases (ie. 9.3.5 or 9.3.4)?

commented

I'll check that out... have you tried with pointerleave listener?

commented

No, I have not. My test project can be found in the discussion thread mentioned above. It's basically a minimal HTML file with a single layer with a single rectangle and a transformer attached to it. That's it.

commented

Ok, if you can put your project on something like StackBlitz or CodeSandBox I can try to reproduce my issue

commented

Ok, if you can put your project on something like StackBlitz or CodeSandBox I can try to reproduce my issue

Just have a look at #1727. You can find my code there.

commented

@giovanni-bertoncelli about this issue "Cannot read properties of undefined (reading 'isDragging')". Do you use some kind of minimal bundle of konva library? How do you import it?

commented

@giovanni-bertoncelli at least once somewhere in your code you need to import core of the library

import Konva from 'konva/lib/Core';
commented

@lavrton Oh ok, I didn't know that... I'll give it a try, thank you!