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

Feat/html inherit listen #31

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

vantaboard
Copy link

These changes allow you to have a draggable group with an inner Html element that can have internal pointer events.

Small example:

<Group draggable>
  <Html selectors="input">
    <div style={{ width: '200px', height: '200px' }}>
        <input type="number" />
    </div>
  </Html>
</Group>

You can now drag the div and use the input field simultaneously without having to add extra css to specify the pointer events everywhere. Furthermore, the pointer events on the input can be disabled based on whether or not the parent is listening. I think this behavior is more in line with what we expect from Konva when used with HTML.

@lavrton
Copy link
Member

lavrton commented Sep 11, 2023

Is it the same as this?

<Html>
    <div style={{ width: '200px', height: '200px', pointerEvents: 'none' }}>
        <input type="number" style={{ pointerEvents: 'auto' }} />
    </div>
  </Html>

@vantaboard
Copy link
Author

vantaboard commented Sep 14, 2023

Yeah, that's correct. That is how I had been doing it. It is annoying to set pointer-events to auto for every interactable element because it ends up being nested deeply and makes it difficult to include other components that weren't designed with being used like that in mind like Material UI, Ant Design, or Fluent UI React components.

Is it the same as this?

<Html>
    <div style={{ width: '200px', height: '200px', pointerEvents: 'none' }}>
        <input type="number" style={{ pointerEvents: 'auto' }} />
    </div>
  </Html>

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

Successfully merging this pull request may close these issues.

2 participants