Fix/iframe panel interactions

packages/EdgeTranslate/src/background/background.js

@@ -17,6 +17,7 @@ import {
     setDefaultSettings,
 } from "common/scripts/settings.js";
 import { resolveContextMenuSelection } from "./library/context_menu.js";
+import { registerSubframePointerDownForwarder } from "./library/frame_events.js";
 import "./library/pdf_file_access.js";
 
 if (typeof BUILD_ENV !== "undefined" && BUILD_ENV === "development") {
@@ -183,7 +184,7 @@ function showUpdateNotification() {
 /**
  * Create communication channel.
  */
-const channel = new Channel();
+const channel = registerSubframePointerDownForwarder(new Channel());
 
 /**
  * Create translator manager and register event listeners and service providers.

packages/EdgeTranslate/src/background/library/frame_events.js

@@ -0,0 +1,27 @@
+import {
+    SUBFRAME_POINTER_DOWN_EVENT,
+    TOP_FRAME_POINTER_DOWN_EVENT,
+} from "common/scripts/frame_events.js";
+
+export function registerSubframePointerDownForwarder(channel) {
+    channel.on(SUBFRAME_POINTER_DOWN_EVENT, (_detail, sender) => {
+        forwardSubframePointerDown(sender);
+    });
+    return channel;
+}
+
+export function forwardSubframePointerDown(sender) {
+    const tabId = sender.tab?.id;
+    if (!Number.isInteger(tabId) || !Number.isInteger(sender.frameId) || sender.frameId <= 0) {
+        return false;
+    }
+
+    const message = JSON.stringify({
+        type: "event",
+        event: TOP_FRAME_POINTER_DOWN_EVENT,
+    });
+    chrome.tabs.sendMessage(tabId, message, { frameId: 0 }, () => {
+        void chrome.runtime.lastError;
+    });
+    return true;
+}

packages/EdgeTranslate/src/common/scripts/frame_events.js

@@ -0,0 +1,2 @@
+export const SUBFRAME_POINTER_DOWN_EVENT = "subframe_pointer_down";
+export const TOP_FRAME_POINTER_DOWN_EVENT = "top_frame_pointer_down";

packages/EdgeTranslate/src/content/display/library/moveable/draggable.js

@@ -28,6 +28,7 @@ export default class draggable {
      * 2. add mouse down event listener to the target draggable element
      */
     dragInitiate() {
+        this.dragCancelHandler = () => this.finishDrag(undefined, true);
         this.dragEnd();
         this.setBounds(this.options.bounds);
         // wrap a drag start event handler
@@ -112,6 +113,7 @@ export default class draggable {
         if (this.dragging) {
             e.preventDefault();
             this.options.container.addEventListener("mousemove", this.dragHandler);
+            window.addEventListener("blur", this.dragCancelHandler, { once: true });
         }
     }
 
@@ -203,18 +205,25 @@ export default class draggable {
      */
     dragEnd() {
         this.options.container.addEventListener("mouseup", (e) => {
-            if (this.dragging) {
-                this.dragging = false;
-                this.options.container.removeEventListener("mousemove", this.dragHandler);
-                if (this.handlers.dragEnd)
-                    this.handlers.dragEnd({
-                        inputEvent: e,
-                        translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]],
-                    }); // deep copy
-            }
+            this.finishDrag(e);
         });
     }
 
+    finishDrag(inputEvent, canceled = false) {
+        if (!this.dragging) return false;
+        this.dragging = false;
+        this.bounding = false;
+        this.options.container.removeEventListener("mousemove", this.dragHandler);
+        window.removeEventListener("blur", this.dragCancelHandler);
+        if (this.handlers.dragEnd)
+            this.handlers.dragEnd({
+                inputEvent,
+                canceled,
+                translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]],
+            }); // deep copy
+        return true;
+    }
+
     /**
      * the event handler when target element start to exceed the boundary
      * @param {string} direction in which direction the element exceeds the boundary

packages/EdgeTranslate/src/content/display/library/moveable/resizable.js

@@ -39,6 +39,7 @@ export default class resizable {
      * 3. add mouse down event listener to the resizable div element
      */
     resizeInitiate() {
+        this.resizeCancelHandler = () => this.finishResize(undefined, true);
         this.resizeEnd();
         // wrap a resize start event handler
         this.resizeStartHandler = (e) => {
@@ -177,6 +178,7 @@ export default class resizable {
         /* call the drag start handler written by the user */
         this.handlers.resizeStart &&
             this.handlers.resizeStart({
+                inputEvent: e,
                 // set the start position
                 set: (position) => {
                     this.store.startTranslate = [position[0], position[1]]; // deep copy
@@ -198,6 +200,7 @@ export default class resizable {
         if (this.resizing) {
             e.preventDefault();
             this.options.container.addEventListener("mousemove", this.resizeHandler);
+            window.addEventListener("blur", this.resizeCancelHandler, { once: true });
         }
     }
 
@@ -304,21 +307,27 @@ export default class resizable {
      */
     resizeEnd() {
         this.options.container.addEventListener("mouseup", (e) => {
-            if (this.resizing) {
-                this.resizing = false;
-                this.options.container.removeEventListener("mousemove", this.resizeHandler);
-                if (this.handlers.resizeEnd)
-                    this.handlers.resizeEnd({
-                        target: this.targetElement,
-                        inputEvent: e,
-                        translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]], // deep copy
-                        width: this.store.currentSize[0],
-                        height: this.store.currentSize[1],
-                    });
-            }
+            this.finishResize(e);
         });
     }
 
+    finishResize(inputEvent, canceled = false) {
+        if (!this.resizing) return false;
+        this.resizing = false;
+        this.options.container.removeEventListener("mousemove", this.resizeHandler);
+        window.removeEventListener("blur", this.resizeCancelHandler);
+        if (this.handlers.resizeEnd)
+            this.handlers.resizeEnd({
+                target: this.targetElement,
+                inputEvent,
+                canceled,
+                translate: [this.store.currentTranslate[0], this.store.currentTranslate[1]], // deep copy
+                width: this.store.currentSize[0],
+                height: this.store.currentSize[1],
+            });
+        return true;
+    }
+
     /**
      * resize the target resizable element to the request size
      * @param {Object} resizeParameter {width: resize to the ${width} value, height: resize to the ${height} value}

packages/EdgeTranslate/src/content/display/panel/PanelView.jsx

@@ -13,6 +13,7 @@ import CloseIcon from "../icons/close.svg";
 import {
     MaxZIndex,
     GlobalStyle,
+    DragShield,
     Panel,
     Head,
     HeadIcons,
@@ -39,6 +40,7 @@ export default function PanelView(props) {
             <StyleSheetManager disableCSSOMInjection>
                 <Fragment>
                     <GlobalStyle />
+                    <DragShield ref={props.dragShieldElRef} aria-hidden="true" />
                     <Panel ref={props.onDisplayStatusChange} displayType={props.displayType}>
                         {props.moveableReady && <PanelContent {...props} />}
                     </Panel>

packages/EdgeTranslate/src/content/display/panel/panel_drag_shield.js

@@ -0,0 +1,40 @@
+export function createPanelDragShieldController(dragShieldElRef) {
+    let active = false;
+
+    return {
+        activate(inputEvent, cursor) {
+            if (!inputEvent) return false;
+            active = true;
+            activatePanelDragShield(dragShieldElRef, inputEvent, cursor);
+            return true;
+        },
+        deactivate(inputEvent, canceled = false) {
+            if (!active || (!inputEvent && !canceled)) return false;
+            active = false;
+            setPanelDragShield(dragShieldElRef, false);
+            return true;
+        },
+    };
+}
+
+export function activatePanelDragShield(dragShieldElRef, inputEvent, cursor) {
+    if (!inputEvent) return;
+    setPanelDragShield(
+        dragShieldElRef,
+        true,
+        cursor || getInteractionCursor(inputEvent, "default")
+    );
+}
+
+export function setPanelDragShield(dragShieldElRef, active, cursor = "") {
+    const dragShield = dragShieldElRef?.current;
+    if (!dragShield) return;
+
+    dragShield.style.pointerEvents = active ? "auto" : "none";
+    dragShield.style.cursor = active ? cursor : "";
+}
+
+function getInteractionCursor(inputEvent, fallback) {
+    if (!inputEvent.target) return fallback;
+    return window.getComputedStyle(inputEvent.target).cursor || fallback;
+}

packages/EdgeTranslate/src/content/display/panel/panel_handlers.js

@@ -2,6 +2,7 @@ import { DEFAULT_SETTINGS, getOrSetDefaultSettings } from "common/scripts/settin
 import { isChromePDFViewer } from "../../common.js";
 import { panelChannel, checkTimestamp } from "./panel_shared.js";
 import { createMoveablePanel, attachDragHandlers, attachResizeHandlers } from "./panel_runtime.js";
+import { setPanelDragShield } from "./panel_drag_shield.js";
 import { isAutoClosePanelOnPageScrollEnabled } from "./panel_scroll.js";
 
 export function createDefaultDisplaySetting() {
@@ -157,10 +158,17 @@ export function togglePin(model) {
     chrome.storage.sync.set({ fixSetting: !model.panelFix });
 }
 
+export function closeUnfixedPanel(model) {
+    if (!model.open || model.panelFix) return false;
+    model.setOpen(false);
+    return true;
+}
+
 export function createPanelViewModel(model) {
     return {
         open: model.open,
         containerElRef: model.containerElRef,
+        dragShieldElRef: model.dragShieldElRef,
         containerStyle: getContainerStyle(model.usePDFMaskLayer),
         onDisplayStatusChange: model.onDisplayStatusChange,
         displayType: model.displayType,
@@ -182,6 +190,7 @@ export function createPanelViewModel(model) {
 }
 
 export function handlePanelClosed(model, removeFixedPanel) {
+    setPanelDragShield(model.dragShieldElRef, false);
     model.moveablePanelRef.current = null;
     model.setMoveableReady(false);
     window.isDisplayingResult = false;
@@ -205,6 +214,7 @@ export function handlePanelOpened(args) {
     model.moveablePanelRef.current = createMoveablePanel(panelEl);
     attachDragHandlers({
         moveablePanel: model.moveablePanelRef.current,
+        dragShieldElRef: model.dragShieldElRef,
         headElRef: model.headElRef,
         displaySettingRef: model.displaySettingRef,
         setUsePDFMaskLayer: model.setUsePDFMaskLayer,
@@ -216,6 +226,7 @@ export function handlePanelOpened(args) {
     });
     attachResizeHandlers({
         moveablePanel: model.moveablePanelRef.current,
+        dragShieldElRef: model.dragShieldElRef,
         displaySettingRef: model.displaySettingRef,
         resizePageFlag: model.resizePageFlag,
         setUsePDFMaskLayer: model.setUsePDFMaskLayer,

packages/EdgeTranslate/src/content/display/panel/panel_runtime.js

@@ -2,6 +2,7 @@ import Moveable from "../library/moveable/moveable.js";
 import { delayPromise } from "common/scripts/promise.js";
 import { DEFAULT_SETTINGS, getOrSetDefaultSettings } from "common/scripts/settings.js";
 import { isChromePDFViewer } from "../../common.js";
+import { createPanelDragShieldController } from "./panel_drag_shield.js";
 
 const transitionDuration = 500;
 
@@ -34,6 +35,7 @@ export function createMoveablePanel(panelEl) {
 
 export function attachDragHandlers({
     moveablePanel,
+    dragShieldElRef,
     headElRef,
     displaySettingRef,
     setUsePDFMaskLayer,
@@ -46,6 +48,7 @@ export function attachDragHandlers({
     let startTranslate = [0, 0];
     let floatingToFixed = false;
     let fixedDirection = "";
+    const dragShield = createPanelDragShieldController(dragShieldElRef);
 
     moveablePanel
         .on("dragStart", ({ set, stop, inputEvent }) => {
@@ -55,22 +58,25 @@ export function attachDragHandlers({
             }
             startTranslate = getCurrentTranslate(moveablePanel.targetElement);
             set(startTranslate);
-            if (isChromePDFViewer()) setUsePDFMaskLayer(true);
+            const userDragStarted = dragShield.activate(inputEvent, "grabbing");
+            if (userDragStarted && isChromePDFViewer()) setUsePDFMaskLayer(true);
         })
         .on("drag", ({ target, translate }) => {
             startTranslate = translate;
             target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
         })
-        .on("dragEnd", ({ translate, inputEvent }) => {
+        .on("dragEnd", ({ translate, inputEvent, canceled }) => {
+            if (dragShield.deactivate(inputEvent, canceled)) setUsePDFMaskLayer(false);
             startTranslate = translate;
+            if (canceled && floatingToFixed) resetHighlight(setHighlight);
+            if (canceled) floatingToFixed = false;
             if (shouldFixPanel(inputEvent, displaySettingRef.current.type, floatingToFixed)) {
                 displaySettingRef.current.fixedData.position = fixedDirection;
                 displaySettingRef.current.type = "fixed";
                 resetHighlight(setHighlight);
                 showFixedPanel();
                 updateDisplaySetting();
             }
-            setUsePDFMaskLayer(false);
         })
         .on("bound", ({ direction, distance }) => {
             if (!shouldShowFixedHighlight(displaySettingRef.current.type, direction, distance)) {
@@ -94,18 +100,21 @@ export function attachDragHandlers({
 
 export function attachResizeHandlers({
     moveablePanel,
+    dragShieldElRef,
     displaySettingRef,
     resizePageFlag,
     setUsePDFMaskLayer,
     updateDisplaySetting,
 }) {
     let startTranslate = [0, 0];
+    const dragShield = createPanelDragShieldController(dragShieldElRef);
 
     moveablePanel
-        .on("resizeStart", ({ set }) => {
+        .on("resizeStart", ({ set, inputEvent }) => {
             startTranslate = getCurrentTranslate(moveablePanel.targetElement);
             set(startTranslate);
-            if (isChromePDFViewer()) setUsePDFMaskLayer(true);
+            const userResizeStarted = dragShield.activate(inputEvent);
+            if (userResizeStarted && isChromePDFViewer()) setUsePDFMaskLayer(true);
         })
         .on("resize", ({ target, width, height, translate, inputEvent }) => {
             startTranslate = translate;
@@ -116,14 +125,14 @@ export function attachResizeHandlers({
                 document.body.style.width = `${(1 - width / window.innerWidth) * 100}%`;
             }
         })
-        .on("resizeEnd", ({ width, height, translate, inputEvent, target }) => {
+        .on("resizeEnd", ({ width, height, translate, inputEvent, target, canceled }) => {
+            if (dragShield.deactivate(inputEvent, canceled)) setUsePDFMaskLayer(false);
             startTranslate = translate;
             target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
             if (inputEvent) {
                 updateResizedDisplayData(displaySettingRef.current, width, height);
                 updateDisplaySetting();
             }
-            setUsePDFMaskLayer(false);
         });
 }
 

packages/EdgeTranslate/src/content/display/panel/panel_styles.js

@@ -101,6 +101,19 @@ export const Panel = styled.div`
     }
 `;
 
+export const DragShield = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: ${MaxZIndex - 1};
+    background: transparent;
+    pointer-events: none;
+    user-select: none;
+    touch-action: none;
+`;
+
 export const Head = styled.div`
     padding: 4px;
     display: flex;