diff --git a/src/firefly/html/firefly.html b/src/firefly/html/firefly.html index fd4904e36..ae30bb049 100644 --- a/src/firefly/html/firefly.html +++ b/src/firefly/html/firefly.html @@ -41,7 +41,7 @@ -
+
diff --git a/src/firefly/html/hydra.html b/src/firefly/html/hydra.html index 7abe3359d..bc997cba9 100644 --- a/src/firefly/html/hydra.html +++ b/src/firefly/html/hydra.html @@ -25,7 +25,7 @@ -
+
diff --git a/src/firefly/html/slate.html b/src/firefly/html/slate.html index ac0266d1d..1f67f737f 100644 --- a/src/firefly/html/slate.html +++ b/src/firefly/html/slate.html @@ -36,7 +36,7 @@ -
+
diff --git a/src/firefly/html/ts.html b/src/firefly/html/ts.html index 75d3ad70f..6143f8904 100644 --- a/src/firefly/html/ts.html +++ b/src/firefly/html/ts.html @@ -32,7 +32,7 @@ -
+
diff --git a/src/firefly/js/ui/Menu.jsx b/src/firefly/js/ui/Menu.jsx index c229bb3ba..0fd66ecf3 100644 --- a/src/firefly/js/ui/Menu.jsx +++ b/src/firefly/js/ui/Menu.jsx @@ -217,6 +217,7 @@ function MenuTabBar({menuTabItems=[], size, selected, displayMask, setElement}) const tabSelected= selected || ResultCmd; const variant='soft'; const color='primary'; + const adjustedDisplayMask= displayMask?.slice(1); const tabItems= [ setElement('results-tab ', el)}}/>, @@ -233,7 +234,7 @@ function MenuTabBar({menuTabItems=[], size, selected, displayMask, setElement}) return tip ? {tab} : tab; } ) - .filter((item,idx) => displayMask ? displayMask[idx] : true) + .filter((item,idx) => adjustedDisplayMask?.[idx] ?? true) ]; return ( @@ -288,7 +289,8 @@ function updateMenu(appTitle, menu) { function getTabBarRealWidth(tabBarElement) { const {left: tabBarLeft, width: tabBarWidth} = tabBarElement.getBoundingClientRect() ?? {width: 0, left: 0}; - const tabBarRealWidth = (window.innerWidth < (tabBarLeft + tabBarWidth)) ? window.innerWidth - tabBarLeft : tabBarWidth; + const docWidth= Math.min(document.documentElement.clientWidth, window.innerWidth); + const tabBarRealWidth = (docWidth < (tabBarLeft + tabBarWidth)) ? docWidth - tabBarLeft : tabBarWidth; return tabBarRealWidth; } diff --git a/src/firefly/js/visualize/ImageViewerLayout.jsx b/src/firefly/js/visualize/ImageViewerLayout.jsx index 15263e173..002bfded9 100644 --- a/src/firefly/js/visualize/ImageViewerLayout.jsx +++ b/src/firefly/js/visualize/ImageViewerLayout.jsx @@ -91,7 +91,7 @@ export const ImageViewerLayout= memo(({ plotView, drawLayersAry, width, height, const eventCB= (eventPlotId,mouseState,screenPt,screenX,screenY,nativeEv) => { const {DOWN,MOVE}= MouseState; const shiftDown= nativeEv.shiftKey; - const mouseStatePayload= makeMouseStatePayload(eventPlotId,mouseState,screenPt,screenX,screenY, {shiftDown}); + const mouseStatePayload= makeMouseStatePayload(eventPlotId,mouseState,screenPt,screenX,screenY, nativeEv.type, {shiftDown}); const list= drawLayersAry.filter( (dl) => dl.visiblePlotIdAry.includes(plotId) && dl.mouseEventMap?.[mouseState.key] ); @@ -104,6 +104,11 @@ export const ImageViewerLayout= memo(({ plotView, drawLayersAry, width, height, handleScrollWheelEvent(plotView,mouseState,screenPt,nativeEv); return; } + else if (isPinch(mouseState)) { + if (!isActivePlotView(visRoot(),eventPlotId)) return; + handlePinchEvent(plotView,mouseState,screenPt,nativeEv); + return; + } else { const ownerCandidate= !shiftDown && findMouseOwner(list,plot,screenPt); // see if anyone can own that mouse eRef.mouseOwnerLayerId = DOWN.is(mouseState) && ownerCandidate ? ownerCandidate.drawLayerId : null; // can only happen on mouseDown @@ -140,6 +145,7 @@ const draggingOrReleasing = (ms) => ms===MouseState.DRAG || ms===MouseState.DRAG ms===MouseState.UP || ms===MouseState.EXIT || ms===MouseState.ENTER; const isWheel= (mouseState) => mouseState===MouseState.WHEEL_DOWN || mouseState===MouseState.WHEEL_UP; +const isPinch= (mouseState) => mouseState===MouseState.PINCH_IN || mouseState===MouseState.PINCH_OUT; const zoomThrottle= throttle( (params) => { dispatchZoom(params); @@ -309,14 +315,32 @@ function makeScroll() { } +function handlePinchEvent(plotView, mouseState, screenPt, nativeEv) { + if (!plotView) return; + const userZoomType= mouseState===MouseState.PINCH_OUT ? UserZoomTypes.UP : UserZoomTypes.DOWN; + const plot= primePlot(plotView) ?? {}; + const devicePt= CCUtil.getDeviceCoords(plot,screenPt); + const {screenSize:{width,height}}= plot; + if (mouseState===MouseState.PINCH_IN && width<100 && height<100) return; + dispatchZoom( + { + plotId:plotView.plotId, + userZoomType, + devicePt, + upDownPercent:Math.abs(nativeEv.wheelDeltaY)%120===0?1: isHiPS(plot)? .2 : .4 + } ); + +} + function makeHandleScrollWheelEvent() { let mouseWheelDevicePt= undefined; let mouseWheelTimeoutId= undefined; const handleScrollWheelEvent= (plotView, mouseState, screenPt, nativeEv) => { + const plot= primePlot(plotView) ?? {}; if (!mouseWheelDevicePt) { - mouseWheelDevicePt= CCUtil.getDeviceCoords(primePlot(plotView),screenPt); + mouseWheelDevicePt= CCUtil.getDeviceCoords(plot,screenPt); mouseWheelTimeoutId= setTimeout(() => { mouseWheelDevicePt= undefined; }, 200); @@ -330,7 +354,6 @@ function makeHandleScrollWheelEvent() { const userZoomType= mouseState===MouseState.WHEEL_DOWN ? UserZoomTypes.UP : UserZoomTypes.DOWN; nativeEv.preventDefault(); - const plot= primePlot(plotView) ?? {}; const {screenSize}= plot; const {viewDim}= plotView ?? {}; const smallImage= diff --git a/src/firefly/js/visualize/VisMouseSync.js b/src/firefly/js/visualize/VisMouseSync.js index a42f9d79c..91e8cf372 100644 --- a/src/firefly/js/visualize/VisMouseSync.js +++ b/src/firefly/js/visualize/VisMouseSync.js @@ -15,23 +15,25 @@ import {STANDARD_READOUT} from './MouseReadoutCntlr'; /** * @typedef MouseState - * @prop NONE, - * @prop ENTER, - * @prop EXIT, - * @prop DOWN, - * @prop UP, - * @prop DRAG_COMPONENT, - * @prop DRAG, - * @prop MOVE, - * @prop CLICK, - * @prop WHEEL_UP, - * @prop WHEEL_DOWN, - * @prop DOUBLE_CLICK, - * @type {Enum} + * @prop NONE + * @prop ENTER + * @prop EXIT + * @prop DOWN + * @prop UP + * @prop DRAG_COMPONENT + * @prop DRAG + * @prop MOVE + * @prop PINCH_IN + * @prop PINCH_OUT + * @prop CLICK + * @prop WHEEL_UP + * @prop WHEEL_DOWN + * @prop DOUBLE_CLICK */ + /** @type MouseState */ export const MouseState= new Enum(['NONE', 'ENTER', 'EXIT', 'DOWN', 'UP', - 'DRAG_COMPONENT', 'DRAG', 'MOVE', 'CLICK', 'WHEEL_UP', 'WHEEL_DOWN', + 'DRAG_COMPONENT', 'DRAG', 'MOVE', 'CLICK', 'WHEEL_UP', 'WHEEL_DOWN', 'PINCH_IN', 'PINCH_OUT', 'DOUBLE_CLICK']); var lastCtx = { @@ -110,9 +112,9 @@ export function fireMouseReadoutChange({readoutType= STANDARD_READOUT, plotId, r * @param kState.metaDown * @return {{plotId: string, mouseState: Enum, screenPt: object, imagePt: object, worldPt: object, screenX: number, screenY: number}} */ -export function makeMouseStatePayload(plotId,mouseState,screenPt,screenX,screenY, +export function makeMouseStatePayload(plotId,mouseState,screenPt,screenX,screenY,eventType='', {shiftDown,controlDown,metaDown}= {}) { - const payload={mouseState,screenPt,screenX,screenY, shiftDown,controlDown,metaDown}; + const payload={mouseState,screenPt,screenX,screenY, shiftDown,controlDown,metaDown,eventType}; const plot= primePlot(visRoot(),plotId); const cc= CysConverter.make(plot); if (!plotId || !plot) return payload; diff --git a/src/firefly/js/visualize/iv/EventLayer.jsx b/src/firefly/js/visualize/iv/EventLayer.jsx index 224238523..3dfe923b8 100644 --- a/src/firefly/js/visualize/iv/EventLayer.jsx +++ b/src/firefly/js/visualize/iv/EventLayer.jsx @@ -3,23 +3,53 @@ */ import React, {memo, useRef, useEffect} from 'react'; import {func,string,object} from 'prop-types'; +import {checkProps} from '../../ui/SimpleComponent'; +import {CCUtil} from '../CsysConverter'; +import {visRoot} from '../ImagePlotCntlr'; +import {primePlot} from '../PlotViewUtil'; import {makeScreenPt} from '../Point.js'; import {MouseState} from '../VisMouseSync.js'; import {Matrix} from '../../externalSource/transformation-matrix-js/matrix'; +import {computeSimpleDistance} from '../VisUtil'; +import {isHiPS} from '../WebPlot'; + + +function fireEvent(inEvent, transform, plotId, mouseState, eventCallback, doPreventDefault= true, doStopPropagation= true) { + if (doPreventDefault) inEvent.preventDefault(); + if (doStopPropagation) inEvent.stopPropagation(); + const ev= inEvent.nativeEvent ?? inEvent; + const {screenX, screenY}= ev.touches?.[0] + ?ev.touches?.[0] + :ev; + let {offsetX, offsetY}= ev; + if (ev.touches?.[0]) { + const rect= ev.target.getBoundingClientRect(); + offsetX = ev.touches?.[0].clientX - rect.left; + offsetY = ev.touches?.[0].clientY - rect.top; + } + + const spt= createScreenPt(transform,offsetX,offsetY); + eventCallback(plotId,mouseState,spt,screenX,screenY,ev); +} + -const style={left:0,top:0,right:0, bottom:0,position:'absolute'}; +function firePinchEvent(inEvent, transform, plotId, originalCenterPt, mouseState, eventCallback) { + const ev= inEvent.nativeEvent ?? inEvent; + ev.preventDefault(); + ev.stopPropagation(); + const plot= primePlot(visRoot(), plotId); + const spt= CCUtil.getScreenCoords(plot,originalCenterPt); + eventCallback(plotId,mouseState,spt,spt.x,spt.y,ev); +} -function fireEvent(ev,transform, plotId,mouseState, eventCallback, doPreventDefault= true, doStopPropagation= true) { - if (doPreventDefault) ev.preventDefault(); - if (doStopPropagation) ev.stopPropagation(); - const nativeEvent= ev.nativeEvent ? ev.nativeEvent : ev; - const {screenX, screenY, offsetX, offsetY}= nativeEvent; +function createScreenPt(transform,x,y) { const trans= Matrix.from(transform).inverse(); - const tmpScreenPt= trans.applyToPoint(offsetX,offsetY); - const spt= makeScreenPt(tmpScreenPt.x,tmpScreenPt.y); - eventCallback(plotId,mouseState,spt,screenX,screenY,nativeEvent); + const tmpScreenPt= trans.applyToPoint(x,y); + return makeScreenPt(tmpScreenPt.x,tmpScreenPt.y); } + + function fireDocEvent(element, nativeEv,transform, plotId,mouseState, eventCallback) { nativeEv.preventDefault(); nativeEv.stopPropagation(); @@ -28,9 +58,8 @@ function fireDocEvent(element, nativeEv,transform, plotId,mouseState, eventCallb const {left, top}= element.getBoundingClientRect(); const compOffX= x-left-window.scrollX; const compOffY= y-top-window.scrollY; - const trans= Matrix.from(transform).inverse(); - const tmpScreenPt= trans.applyToPoint(compOffX, compOffY); - const spt= makeScreenPt(tmpScreenPt.x,tmpScreenPt.y); + + const spt= createScreenPt(transform,compOffX,compOffY); eventCallback(plotId,mouseState,spt,screenX,screenY,nativeEv); } @@ -48,12 +77,51 @@ function addDocListeners (eRef,onDocumentMouseMove,onDocumentMouseUp) { document.addEventListener('mouseup', eRef.mouseUpDocListener); } +const screenPtFromTouch= (touchEntry) => makeScreenPt(touchEntry.clientX,touchEntry.clientY); + +function makeTouchCenterPt(ev,transform,plotId) { + if (ev.touches.length!==2) return; + const touchPt0= screenPtFromTouch(ev.touches[0]); + const touchPt1= screenPtFromTouch(ev.touches[1]); + const x= (touchPt0.x + touchPt1.x) /2; + const y= (touchPt0.y + touchPt1.y) /2; + const rect= ev.target.getBoundingClientRect(); + const offsetX= x - rect.left; + const offsetY= y - rect.top; + const spt= createScreenPt(transform,offsetX,offsetY); + const plot= primePlot(visRoot(), plotId); + return {touchPt0, touchPt1, + centerPt: isHiPS(plot) ? CCUtil.getWorldCoords(plot,spt) : CCUtil.getImageCoords(plot,spt) + }; +} + +function startTouch(ev,transform,plotId) { + const {touchPt0, touchPt1, centerPt:originalCenterPt}= makeTouchCenterPt(ev,transform,plotId); + return { touchPt0, touchPt1, originalCenterPt}; +} + +function getTouchPinchDir(ev, touchPt0,touchPt1,moveTouchPt0, moveTouchPt1) { + if (ev.touches.length!==2) return; + const distMove= computeSimpleDistance(moveTouchPt0, moveTouchPt1); + const distStart= computeSimpleDistance(touchPt0, touchPt1); + const change= distMove - distStart; + if (Math.abs(change)>.01) { + return change < 0 ? MouseState.PINCH_IN : MouseState.PINCH_OUT; + } +} + -export const EventLayer = memo( ({transform,plotId, eventCallback}) => { + +export const EventLayer = memo( (props) => { + checkProps(props,EventLayer); + const {transform, plotId, eventCallback}= props; const {current:eRef}= useRef({ - mouseDown:false, element: undefined, mouseMoveDocListener: undefined, mouseUpDocListener: undefined}); + mouseDown:false, touch: undefined, element: undefined, + mouseMoveDocListener: undefined, mouseUpDocListener: undefined, + }); - useEffect(() => () => clearDocListeners(eRef) ,[]); // make sure clearDocListeners is when component goes away + //clear Doc Listeners is when component goes away + useEffect(() => () => clearDocListeners(eRef) ,[]); // eslint-disable-line react-hooks/exhaustive-deps const onDocumentMouseMove= (nativeEv) => eRef.mouseDown && fireDocEvent(eRef.element, nativeEv,transform,plotId,MouseState.DRAG, eventCallback); @@ -74,52 +142,82 @@ export const EventLayer = memo( ({transform,plotId, eventCallback}) => { fireEvent(ev,transform,plotId,MouseState.DOUBLE_CLICK, eventCallback); }; - const onMouseDown= (ev) => { + const onMouseDownCapture= (ev) => { eRef.mouseDown= true; fireEvent(ev,transform,plotId,MouseState.DOWN, eventCallback,true,false); addDocListeners(eRef,onDocumentMouseMove,onDocumentMouseUp); }; - const onMouseMove= (ev) => !eRef.mouseDown && fireEvent(ev,transform,plotId,MouseState.MOVE, eventCallback, true, false); + const onMouseMoveCapture= (ev) => !eRef.mouseDown && fireEvent(ev,transform,plotId,MouseState.MOVE, eventCallback, true, false); const onMouseLeave= (ev) => fireEvent(ev,transform,plotId,MouseState.EXIT, eventCallback); const onMouseEnter= (ev) => fireEvent(ev,transform,plotId,MouseState.ENTER, eventCallback); - const onTouchCancel= (ev) => { - eRef.mouseDown= false; - fireEvent(ev,transform,plotId,MouseState.UP, eventCallback,true,false); - }; - - const onTouchEnd= (ev) => { - eRef.mouseDown= false; - fireEvent(ev,transform,plotId,MouseState.UP, eventCallback); - }; - - const onTouchMove= (ev) => fireEvent(ev,transform,plotId,MouseState.DRAG, eventCallback); - - const onTouchStart= (ev) => { - eRef.mouseDown= true; - fireEvent(ev,transform,plotId,MouseState.DOWN, eventCallback,true,false); - }; - - const onWheel= (ev) => { - if (!ev.deltaY) return; - fireEvent(ev,transform,plotId,ev.deltaY>0 ? MouseState.WHEEL_UP : MouseState.WHEEL_DOWN, eventCallback, false); - }; useEffect( () => { - eRef.element?.addEventListener('wheel', onWheel, {passive:false}); - return () => eRef.element?.removeEventListener('wheel', onWheel); - }, [eRef.element, transform, plotId, eventCallback]); + + if (!eRef?.element) return; + + const onWheel= (ev) => { + if (!ev.deltaY) return; + fireEvent(ev,transform,plotId,ev.deltaY>0 ? MouseState.WHEEL_UP : MouseState.WHEEL_DOWN, eventCallback, false); + }; + const onTouchCancelOrEnd= (ev) => { + eRef.mouseDown= false; + eRef.touch= undefined; + fireEvent(ev,transform,plotId,MouseState.UP, eventCallback); + }; + + const onTouchStart= (ev) => { + if (ev.touches.length===2) { + eRef.touch= startTouch(ev,transform,plotId); + } + else if (ev.touches.length===1){ + eRef.mouseDown= true; + eRef.touch=undefined; + fireEvent(ev,transform,plotId,MouseState.DOWN, eventCallback); + } + }; + + const onTouchMove= (ev) => { + if (ev.touches.length===2) { + const {touchPt0, touchPt1, originalCenterPt } = eRef.touch ?? {}; + if (!touchPt0 || !touchPt1) { + eRef.touch= startTouch(ev,transform,plotId); + return; + } + const moveTouchPt0= screenPtFromTouch(ev.touches[0]); + const moveTouchPt1= screenPtFromTouch(ev.touches[1]); + eRef.touch= { touchPt0: moveTouchPt0, touchPt1: moveTouchPt1, originalCenterPt }; + const ms= getTouchPinchDir(ev,touchPt0,touchPt1, moveTouchPt0, moveTouchPt1); + if (ms) firePinchEvent(ev,transform,plotId,originalCenterPt, ms,eventCallback); + } else if (ev.touches.length===1){ + fireEvent(ev,transform,plotId,MouseState.DRAG, eventCallback); + eRef.touch=undefined; + } + }; + + const nonPassiveEvents= [ + ['wheel', onWheel], ['touchmove', onTouchMove], ['touchstart', onTouchStart], + ['touchend', onTouchCancelOrEnd], ['touchcancel', onTouchCancelOrEnd], + ]; + + nonPassiveEvents.forEach( ([ev,cb]) => eRef.element.addEventListener(ev, cb, {passive:false})); + return () => { + nonPassiveEvents.forEach( ([ev,cb]) => eRef?.element.removeEventListener(ev, cb)); + }; + }, [transform, plotId, eventCallback]); // eslint-disable-line react-hooks/exhaustive-deps return ( -
eRef.element=c, - onClick, onDoubleClick, onMouseDownCapture:onMouseDown, onMouseEnter, onMouseLeave, - onMouseMoveCapture:onMouseMove, onTouchCancel, onTouchEnd, onTouchMove, onTouchStart }} /> - ); +
eRef.element=c, + onClick, onDoubleClick, onMouseDownCapture, onMouseEnter, onMouseLeave, onMouseMoveCapture + } }/> ); }); EventLayer.propTypes= { eventCallback : func.isRequired, plotId : string, transform : object.isRequired -}; +}; \ No newline at end of file diff --git a/src/firefly/js/visualize/saga/MouseReadoutWatch.js b/src/firefly/js/visualize/saga/MouseReadoutWatch.js index c3e4995a4..d55f13149 100644 --- a/src/firefly/js/visualize/saga/MouseReadoutWatch.js +++ b/src/firefly/js/visualize/saga/MouseReadoutWatch.js @@ -27,6 +27,7 @@ import {getFluxRadix} from 'firefly/visualize/ui/MouseReadoutUIUtil'; const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const PAUSE_DELAY= 30; +const igoreEvTypes= ['touchend']; /** @@ -49,6 +50,7 @@ export function* watchReadout() { let savedWP; yield call(mouseUpdatePromise); + mouseCtx = yield call(mouseUpdatePromise); while (true) { @@ -56,35 +58,41 @@ export function* watchReadout() { let getNextWithWithAsync= false; const lockByClick= isLockByClick(readoutRoot()); let {worldPt,screenPt,imagePt}= mouseCtx; - const {plotId,mouseState, healpixPixel, norder, shiftDown}= mouseCtx; - if (!lockByClick) savedWP= undefined; - if (lockByClick && worldPt && !shiftDown && mouseState===MouseState.CLICK) savedWP= worldPt; + const {plotId,mouseState, healpixPixel, norder, shiftDown,eventType}= mouseCtx; + const useEv= !igoreEvTypes.includes(eventType); + + if (!useEv) { + if (!lockByClick) savedWP= undefined; + if (lockByClick && worldPt && !shiftDown && mouseState===MouseState.CLICK) savedWP= worldPt; + } const plotView= getPlotViewById(visRoot(), plotId); const plot= primePlot(plotView); const threeColor= plot?.plotState?.threeColor; - if (plot && lockByClick && savedWP && shiftDown && mouseState===MouseState.CLICK) { - worldPt= savedWP; - const cc= CsysConverter.make(plot); - imagePt= cc.getImageCoords(savedWP); - screenPt= cc.getScreenCoords(imagePt); - } + if (useEv) { + if (plot && lockByClick && savedWP && shiftDown && mouseState===MouseState.CLICK) { + worldPt= savedWP; + const cc= CsysConverter.make(plot); + imagePt= cc.getImageCoords(savedWP); + screenPt= cc.getScreenCoords(imagePt); + } - if (isPayloadNeeded(mouseState,lockByClick)) { - if (plot) { - const readoutItems= makeImmediateReadout(plot, worldPt, screenPt, imagePt, threeColor, healpixPixel, norder); - fireMouseReadoutChange({plotId, readoutItems, threeColor, readoutType:getReadoutKey(plot)}); - getNextWithWithAsync= hasAsyncReadout(plot); + if (isPayloadNeeded(mouseState,lockByClick)) { + if (plot) { + const readoutItems= makeImmediateReadout(plot, worldPt, screenPt, imagePt, threeColor, healpixPixel, norder); + fireMouseReadoutChange({plotId, readoutItems, threeColor, readoutType:getReadoutKey(plot)}); + getNextWithWithAsync= hasAsyncReadout(plot); + } + } + else if (!lockByClick) { + fireMouseReadoutChange({plotId, readoutItems:{}, readoutType:getReadoutKey(plot)}); } - } - else if (!lockByClick) { - fireMouseReadoutChange({plotId, readoutItems:{}, readoutType:getReadoutKey(plot)}); } - if (getNextWithWithAsync) { // get the next mouse event or the flux - mouseCtx= lockByClick ? + if (useEv && getNextWithWithAsync) { // get the next mouse event or the flux + mouseCtx= lockByClick || eventType=== 'touchstart' ? yield call(processAsyncDataImmediate,plotView, worldPt, screenPt, imagePt, threeColor, healpixPixel, norder) : yield call(processAsyncDataDelayed,plotView, worldPt, screenPt, imagePt, threeColor, healpixPixel, norder); } @@ -144,7 +152,7 @@ function* processAsyncDataDelayed(plotView, worldPt, screenPt, imagePt, threeCol function isPayloadNeeded(mouseState, lockByClick) { if (lockByClick) { - return mouseState===MouseState.CLICK; + return mouseState===MouseState.CLICK || mouseState.eventType==='touchstart'; } else { return mouseState!==MouseState.EXIT; diff --git a/src/firefly/js/visualize/ui/VisInlineToolbarView.jsx b/src/firefly/js/visualize/ui/VisInlineToolbarView.jsx index 989dfc5fe..c6176ec19 100644 --- a/src/firefly/js/visualize/ui/VisInlineToolbarView.jsx +++ b/src/firefly/js/visualize/ui/VisInlineToolbarView.jsx @@ -20,7 +20,7 @@ export const VisInlineToolbarView = memo( (props) => { const {pv, showDelete,deleteVisible, topOffset=0}= props; if (!pv) return undefined; const deleteClick= () => { - const mouseStatePayload= makeMouseStatePayload(undefined,MouseState.EXIT,undefined,0,0); + const mouseStatePayload= makeMouseStatePayload(undefined,MouseState.EXIT,undefined,0,0,''); fireMouseCtxChange(mouseStatePayload); // this for anyone listening directly to the mouse dispatchDeletePlotView({plotId:pv.plotId}); };