react-konva-utils
react-konva-utils copied to clipboard
konvajs
Feat/html inherit listen
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.
Is it the same as this?
<Html>
<div style={{ width: '200px', height: '200px', pointerEvents: 'none' }}>
<input type="number" style={{ pointerEvents: 'auto' }} />
</div>
</Html>
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>