diff --git a/apps/remix/app/components/general/envelope-editor/canvas/use-envelope-canvas-marquee.ts b/apps/remix/app/components/general/envelope-editor/canvas/use-envelope-canvas-marquee.ts index e7a72feb8..1e683d740 100644 --- a/apps/remix/app/components/general/envelope-editor/canvas/use-envelope-canvas-marquee.ts +++ b/apps/remix/app/components/general/envelope-editor/canvas/use-envelope-canvas-marquee.ts @@ -98,6 +98,14 @@ export const useEnvelopeCanvasMarquee = ({ onSelect, onEmptyClick }: UseEnvelope }); }; + /** + * Whether the pointer was actually dragged, as opposed to a plain click + * which leaves the rectangle without an area. + */ + const isMarqueeDrawn = () => { + return selectionRectangle.visible() && selectionRectangle.width() > 0 && selectionRectangle.height() > 0; + }; + const onWindowPointerUp = () => { stopTrackingWindow(); @@ -111,6 +119,14 @@ export const useEnvelopeCanvasMarquee = ({ onSelect, onEmptyClick }: UseEnvelope selectionRectangle.visible(false); }); + // A plain click is not a selection, the click handler below deals with + // it. Selecting here would also match anything whose bounding box merely + // contains the point (e.g. a diagonal line), and since this runs after + // other window listeners it would override e.g. a content being placed. + if (!isMarqueeDrawn()) { + return; + } + onSelectRef.current(selectionRectangle.getClientRect()); }; @@ -158,7 +174,7 @@ export const useEnvelopeCanvasMarquee = ({ onSelect, onEmptyClick }: UseEnvelope stage.on('click.marquee tap.marquee', (e) => { // A marquee drag just finished, the selection was handled on mouse up. - if (selectionRectangle.visible() && selectionRectangle.width() > 0 && selectionRectangle.height() > 0) { + if (isMarqueeDrawn()) { return; }