prevent hover indicator from showing when pointer isn't over the canvas (#2023)
Before the geometry change, we'd rely on the browser to tell us which element was hovered, which meant that when the pointer left the canvas we'd automatically clear the hovered shape. Currently, we don't know whether the pointer is over the canvas or not - so we keep showing the hover indicator for the last shape you had your pointer over. This diff adds an `isHoveringCanvas` prop to the instance state (true, false, or null if the current pointer doesn't support hovering) that we can use to track this and disable the hover indicator appropriately.  ### Change Type - [x] `minor` — New feature ### Test Plan 1. Create some shapes that go below the UI 2. Move the mouse from the shape to the UI 3. Hover indicator should disappear
This commit is contained in:
parent
e2a6f3ed40
commit
a007c66b78
5 changed files with 57 additions and 2 deletions
|
@ -74,6 +74,20 @@ export function useCanvasEvents() {
|
|||
})
|
||||
}
|
||||
|
||||
function onPointerEnter(e: React.PointerEvent) {
|
||||
if ((e as any).isKilled) return
|
||||
if (editor.instanceState.isPenMode && e.pointerType !== 'pen') return
|
||||
const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
|
||||
editor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })
|
||||
}
|
||||
|
||||
function onPointerLeave(e: React.PointerEvent) {
|
||||
if ((e as any).isKilled) return
|
||||
if (editor.instanceState.isPenMode && e.pointerType !== 'pen') return
|
||||
const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
|
||||
editor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })
|
||||
}
|
||||
|
||||
function onTouchStart(e: React.TouchEvent) {
|
||||
;(e as any).isKilled = true
|
||||
// todo: investigate whether this effects keyboard shortcuts
|
||||
|
@ -118,6 +132,8 @@ export function useCanvasEvents() {
|
|||
onPointerDown,
|
||||
onPointerMove,
|
||||
onPointerUp,
|
||||
onPointerEnter,
|
||||
onPointerLeave,
|
||||
onDragOver,
|
||||
onDrop,
|
||||
onTouchStart,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue