electrobun 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electrobun",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Build ultra fast, tiny, and cross-platform desktop apps with Typescript.",
   "license": "MIT",
   "author": "Blackboard Technologies Inc.",

package/src/browser/index.ts

@@ -45,6 +45,7 @@ type WebviewTagHandlers = RPCSchema<{
         width: number;
         height: number;
       };
+      masks: string;
     };
     webviewTagUpdateSrc: {
       id: number;
@@ -77,6 +78,10 @@ type WebviewTagHandlers = RPCSchema<{
       id: number;
       transparent: boolean;
     };
+    webviewTagToggleMirroring: {
+      id: number;
+      enable: boolean;
+    };
     webviewTagSetPassthrough: {
       id: number;
       enablePassthrough: boolean;

package/src/browser/webviewtag.ts

@@ -4,6 +4,8 @@ type WebviewEventTypes =
   | "did-commit-navigation"
   | "dom-ready";
 
+type Rect = { x: number; y: number; width: number; height: number };
+
 const ConfigureWebviewTags = (
   enableWebviewTags: boolean,
   zigRpc: (params: any) => any,
@@ -24,6 +26,10 @@ const ConfigureWebviewTags = (
     zigRpc: any;
     syncRpc: any;
 
+    // querySelectors for elements that you want to appear
+    // in front of the webview.
+    maskSelectors: Set<string> = new Set();
+
     // observers
     resizeObserver?: ResizeObserver;
     // intersectionObserver?: IntersectionObserver;
@@ -39,12 +45,16 @@ const ConfigureWebviewTags = (
       height: 0,
     };
 
+    lastMasksJSON: string = "";
+    lastMasks: Rect[] = [];
+
     transparent: boolean = false;
     passthroughEnabled: boolean = false;
     hidden: boolean = false;
     delegateMode: boolean = false;
     hiddenMirrorMode: boolean = false;
     wasZeroRect: boolean = false;
+    isMirroring: boolean = false;
 
     partition: string | null = null;
 
@@ -59,6 +69,16 @@ const ConfigureWebviewTags = (
       });
     }
 
+    addMaskSelector(selector: string) {
+      this.maskSelectors.add(selector);
+      this.syncDimensions();
+    }
+
+    removeMaskSelector(selector: string) {
+      this.maskSelectors.delete(selector);
+      this.syncDimensions();
+    }
+
     initWebview() {
       const rect = this.getBoundingClientRect();
       this.lastRect = rect;
@@ -206,6 +226,10 @@ const ConfigureWebviewTags = (
     // know that they're chaning something in order to eliminate the lag that the
     // catch all loop will catch
     syncDimensions(force: boolean = false) {
+      if (!force && this.hidden) {
+        return;
+      }
+
       const rect = this.getBoundingClientRect();
       const { x, y, width, height } =
         this.adjustDimensionsForHiddenMirrorMode(rect);
@@ -220,19 +244,45 @@ const ConfigureWebviewTags = (
         return;
       }
 
+      const masks: Rect[] = [];
+      this.maskSelectors.forEach((selector) => {
+        const els = document.querySelectorAll(selector);
+
+        for (let i = 0; i < els.length; i++) {
+          const el = els[i];
+
+          if (el) {
+            const maskRect = el.getBoundingClientRect();
+
+            masks.push({
+              // reposition the bounding rect to be relative to the webview rect
+              // so objc can apply the mask correctly and handle the actual overlap
+              x: maskRect.x - x,
+              y: maskRect.y - y,
+              width: maskRect.width,
+              height: maskRect.height,
+            });
+          }
+        }
+      });
+
+      // store jsonStringified last masks value to compare
+      const masksJson = masks.length ? JSON.stringify(masks) : "";
+
       if (
         force ||
         lastRect.x !== x ||
         lastRect.y !== y ||
         lastRect.width !== width ||
-        lastRect.height !== height
+        lastRect.height !== height ||
+        this.lastMasksJSON !== masksJson
       ) {
-        // if we're not already in an accelerated loop then accelerate it
-        if (!this.positionCheckLoopReset) {
-          this.setPositionCheckLoop(true);
-        }
+        // let it know we're still accelerating
+        this.setPositionCheckLoop(true);
 
         this.lastRect = rect;
+        this.lastMasks = masks;
+        this.lastMasksJSON = masksJson;
 
         this.zigRpc.send.webviewTagResize({
           id: this.webviewId,
@@ -242,6 +292,7 @@ const ConfigureWebviewTags = (
             x: x,
             y: y,
           },
+          masks: masksJson,
         });
       }
 
@@ -265,13 +316,12 @@ const ConfigureWebviewTags = (
         this.positionCheckLoopReset = undefined;
       }
 
-      const delay = accelerate ? 100 : 400;
+      const delay = accelerate ? 0 : 300;
 
       if (accelerate) {
-        clearTimeout(this.positionCheckLoopReset);
         this.positionCheckLoopReset = setTimeout(() => {
           this.setPositionCheckLoop(false);
-        }, 600);
+        }, 2000);
       }
       // Note: Since there's not catch all way to listen for x/y changes
       // we have a 400ms interval to check
@@ -288,6 +338,59 @@ const ConfigureWebviewTags = (
       this.positionCheckLoop = setInterval(() => this.syncDimensions(), delay);
     }
 
+    // The global document mousemove will fire even when the mouse is over
+    // an OOPIF that's layered above this host webview. The two edge cases we
+    // solve for are:
+    // 1. dragging an element on the host over or dropping on the webview anchor
+    // 2. clicking on an element that's "layered over" the OOPIF visually but really uses a
+    // mask to make a section transparent. We want the underlying overlay UI to be
+    // interactive not the OOPIF.
+    //
+    // Solution: Have mirroing on by default.
+    // 1. mouse move events don't fire during drag. So the OOPIF remains non-interactive
+    // and effectively passes through to the host's anchor element underneath letting you
+    // react to drag events on the host as needed.
+    // 2. Detect when the mouse is moving over the anchor and turn mirroring off to make
+    // it interactive. Unless the mouse is over a masked area in which case we want to
+    // keep it non-interactive and pass through to the host "overylay UI".
+    handleDocumentMouseMove(e: MouseEvent) {
+      if (this.hidden) {
+        return;
+      }
+
+      const isInBounds =
+        e.clientX >= this.lastRect.x &&
+        e.clientX <= this.lastRect.x + this.lastRect.width &&
+        e.clientY >= this.lastRect.y &&
+        e.clientY <= this.lastRect.y + this.lastRect.height;
+
+      if (isInBounds) {
+        const isInMaskBounds = this.lastMasks.find((mask) => {
+          // we send relative x/y to objc but here we need the clientX/Y
+          // to compare against. consider doing the opposite or storing both.
+          const clientX = this.lastRect.x + mask.x;
+          const clientY = this.lastRect.y + mask.y;
+          const isInMaskBounds =
+            e.clientX >= clientX &&
+            e.clientX <= clientX + mask.width &&
+            e.clientY <= clientY + mask.height &&
+            e.clientY >= clientY;
+
+          return isInMaskBounds;
+        });
+        if (isInMaskBounds) {
+          this.startMirroring();
+        } else {
+          this.stopMirroring();
+        }
+      } else {
+        this.startMirroring();
+      }
+    }
+
+    boundhandleDocumentMouseMove = (e: MouseEvent) =>
+      this.handleDocumentMouseMove(e);
+
     connectedCallback() {
       this.setPositionCheckLoop();
 
@@ -300,8 +403,14 @@ const ConfigureWebviewTags = (
       // we still need to send it to objc to calculate from its bottom left position
       // otherwise it'll move around unexpectedly.
       window.addEventListener("resize", this.boundForceSyncDimensions);
-
       window.addEventListener("scroll", this.boundSyncDimensions);
+      // Note: mousemove won't fire during a drag so we get that behaviour
+      // for free without doing calculations.
+      document.addEventListener(
+        "mousemove",
+        this.boundhandleDocumentMouseMove,
+        true
+      );
 
       // todo: For chromium webviews (windows native or chromium bundled)
       // should be able to use performanceObservers on layout-shift to
@@ -318,6 +427,10 @@ const ConfigureWebviewTags = (
       // this.mutationObserver?.disconnect();
       window.removeEventListener("resize", this.boundForceSyncDimensions);
       window.removeEventListener("scroll", this.boundSyncDimensions);
+      document.removeEventListener(
+        "mousemove",
+        this.boundhandleDocumentMouseMove
+      );
       this.zigRpc.send.webviewTagRemove({ id: this.webviewId });
     }
 
@@ -407,9 +520,8 @@ const ConfigureWebviewTags = (
     DEFAULT_FRAME_RATE = Math.round(1000 / 30); // 30fps
     streamScreenInterval?: Timer;
 
-    // todo: add a flag to disable automirroring since it's cpu intensive and
-    // developers may want to disable it in specific cases
-    startMirroring(frameRate: number = this.DEFAULT_FRAME_RATE) {
+    // NOTE: This is very cpu intensive, Prefer startMirroring where possible
+    startMirroringToDom(frameRate: number = this.DEFAULT_FRAME_RATE) {
       if (this.streamScreenInterval) {
         clearInterval(this.streamScreenInterval);
       }
@@ -419,13 +531,33 @@ const ConfigureWebviewTags = (
       }, frameRate);
     }
 
-    stopMirroring() {
+    stopMirroringToDom() {
       if (this.streamScreenInterval) {
         clearInterval(this.streamScreenInterval);
         this.streamScreenInterval = undefined;
       }
     }
 
+    startMirroring() {
+      if (this.isMirroring === false) {
+        this.isMirroring = true;
+        this.zigRpc.send.webviewTagToggleMirroring({
+          id: this.webviewId,
+          enable: true,
+        });
+      }
+    }
+
+    stopMirroring() {
+      if (this.isMirroring === true) {
+        this.isMirroring = false;
+        this.zigRpc.send.webviewTagToggleMirroring({
+          id: this.webviewId,
+          enable: false,
+        });
+      }
+    }
+
     clearScreenImage() {
       this.style.backgroundImage = "";
     }
@@ -503,11 +635,11 @@ const ConfigureWebviewTags = (
         this.syncScreenshot(() => {
           this.delegateMode = true;
           this.toggleTransparent(true, true);
-          this.startMirroring();
+          this.startMirroringToDom();
         });
       } else {
         this.delegateMode = false;
-        this.stopMirroring();
+        this.stopMirroringToDom();
         this.toggleTransparent(this.transparent);
         this.tryClearScreenImage();
       }
@@ -527,10 +659,10 @@ const ConfigureWebviewTags = (
           this.hiddenMirrorMode = true;
           this.toggleHidden(true, true);
           this.togglePassthrough(true, true);
-          this.startMirroring();
+          this.startMirroringToDom();
         });
       } else {
-        this.stopMirroring();
+        this.stopMirroringToDom();
         this.toggleHidden(this.hidden);
         this.togglePassthrough(this.passthroughEnabled);
         this.tryClearScreenImage();

package/src/bun/core/BrowserView.ts

@@ -32,6 +32,7 @@ type BrowserViewOptions<T = undefined> = {
   rpc: T;
   syncRpc: { [method: string]: (params: any) => any };
   hostWebviewId: number;
+  autoResize: boolean;
 };
 
 interface ElectrobunWebviewRPCSChema {
@@ -68,6 +69,7 @@ const internalSyncRpcHandlers = {
       partition,
       frame,
       hostWebviewId,
+      autoResize: false,
     });
 
     // Note: we have to give it a couple of ticks to fully create the browserview
@@ -104,6 +106,7 @@ export class BrowserView<T> {
   html: string | null = null;
   preload: string | null = null;
   partition: string | null = null;
+  autoResize: boolean = true;
   frame: {
     x: number;
     y: number;
@@ -135,6 +138,7 @@ export class BrowserView<T> {
     // file exists first
     this.pipePrefix = `/private/tmp/electrobun_ipc_pipe_${hash}_${randomId}_${this.id}`;
     this.hostWebviewId = options.hostWebviewId;
+    this.autoResize = options.autoResize === false ? false : true;
 
     this.init();
   }
@@ -158,7 +162,7 @@ export class BrowserView<T> {
         x: this.frame.x,
         y: this.frame.y,
       },
-      //   autoResize: true,
+      autoResize: this.autoResize,
     });
 
     this.createStreams();

package/src/bun/proc/zig.ts

@@ -192,6 +192,7 @@ type ZigHandlers = RPCSchema<{
           width: number;
           height: number;
         };
+        autoResize: boolean;
       };
       response: void;
     };