diff --git a/x-pack/plugins/canvas/public/components/workpad_page/event_handlers.js b/x-pack/plugins/canvas/public/components/workpad_page/event_handlers.js index 6d95194e7af6..4771221f8b16 100644 --- a/x-pack/plugins/canvas/public/components/workpad_page/event_handlers.js +++ b/x-pack/plugins/canvas/public/components/workpad_page/event_handlers.js @@ -57,6 +57,19 @@ const handleMouseMove = ( } }; +const handleWheel = ( + commit, + { target, clientX, clientY, altKey, metaKey, shiftKey, ctrlKey }, + isEditable +) => { + // new mouse position must be registered when page scrolls + if (isEditable) { + const { x, y } = localMousePosition(target, clientX, clientY); + setupHandler(commit, target); + commit('cursorPosition', { x, y, altKey, metaKey, shiftKey, ctrlKey }); + } +}; + const handleMouseDown = (commit, e, isEditable) => { e.stopPropagation(); const { target, clientX, clientY, button, altKey, metaKey, shiftKey, ctrlKey } = e; @@ -129,5 +142,6 @@ export const withEventHandlers = withHandlers({ onMouseMove: props => e => handleMouseMove(props.commit, e, props.isEditable), onKeyDown: props => e => handleKeyDown(props.commit, e, props.isEditable, props.remove), onKeyUp: props => e => handleKeyUp(props.commit, e, props.isEditable), + onWheel: props => e => handleWheel(props.commit, e, props.isEditable), resetHandler: () => () => resetHandler(), }); diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_page.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_page.js index 12d4deca8442..3ee13a4070b7 100644 --- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_page.js +++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_page.js @@ -70,6 +70,7 @@ export class WorkpadPage extends PureComponent { onMouseMove, onMouseUp, onAnimationEnd, + onWheel, copyElements, cutElements, pasteElements, @@ -110,6 +111,7 @@ export class WorkpadPage extends PureComponent { onKeyUp={onKeyUp} onDoubleClick={onDoubleClick} onAnimationEnd={onAnimationEnd} + onWheel={onWheel} tabIndex={0} // needed to capture keyboard events; focusing is also needed but React apparently does so implicitly > {isEditable && (