full displays overlay (#730)

src/main.js

@@ -437,12 +437,15 @@ function updateOverlayVisibility() {
     clearTimeout(overlayHideTimeout);
     overlayHideTimeout = undefined;
 
-    const { bounds } =
-      electron.screen
-        .getAllDisplays()
-        .find(d => d.id == settings.overlay_display) ||
-      electron.screen.getPrimaryDisplay();
-    overlay.setBounds(bounds);
+    const newBounds = { x: 0, y: 0, width: 0, height: 0 };
+    electron.screen.getAllDisplays().forEach(display => {
+      newBounds.x = Math.min(newBounds.x, display.bounds.x);
+      newBounds.y = Math.min(newBounds.y, display.bounds.y);
+      newBounds.width += display.bounds.width;
+      newBounds.height = Math.max(newBounds.height, display.bounds.height);
+    });
+
+    overlay.setBounds(newBounds);
     overlay.show();
   }
 }

src/overlay/overlayUtil.tsx

@@ -116,29 +116,10 @@ export function useEditModeOnRef(
   containerRef: React.MutableRefObject<any>,
   uiScaleFactor: number
 ): void {
-  const bounds = remote.getCurrentWindow().getBounds();
-  const scaledBounds = {
-    x: (bounds.x * 100) / uiScaleFactor,
-    y: (bounds.y * 100) / uiScaleFactor,
-    width: (bounds.width * 100) / uiScaleFactor,
-    height: (bounds.height * 100) / uiScaleFactor
-  };
-  const outerBounds = {
-    left: scaledBounds.x,
-    right: scaledBounds.x + scaledBounds.width,
-    bottom: scaledBounds.y + scaledBounds.height,
-    top: scaledBounds.y
-  };
   const restrictDragBounds: any =
     interact.modifiers &&
     interact.modifiers.restrict({
-      elementRect: { left: 0, right: 1, top: 0, bottom: 1 } as any,
-      restriction: scaledBounds as any
-    });
-  const restrictMaxEdges: any =
-    interact.modifiers &&
-    interact.modifiers.restrictEdges({
-      outer: outerBounds as any
+      elementRect: { left: 0, right: 1, top: 0, bottom: 1 } as any
     });
   useEffect(() => {
     const container = containerRef.current;
@@ -155,7 +136,7 @@ export function useEditModeOnRef(
           })
           .resizable({
             edges: { left: true, right: true, bottom: true, top: true },
-            modifiers: [restrictMinSize, restrictMaxEdges],
+            modifiers: [restrictMinSize],
             inertia: true
           } as any)
           .on("resizemove", function(event) {

src/window_main/settings.js

@@ -502,6 +502,7 @@ function appendOverlay(section) {
   editModeButton.addEventListener("click", function() {
     ipcSend("toggle_edit_mode");
   });
+  /*
   displayControls.appendChild(editModeButton);
   // Set Overlay Display Screen
   const overlayDisplay = pd.settings.overlay_display
@@ -528,6 +529,7 @@ function appendOverlay(section) {
   displaySelect.style.marginLeft = "32px";
   displayControls.appendChild(label);
   section.appendChild(displayControls);
+  */
 
   const sliderScale = createDiv(["slidecontainer_settings"]);
   const sliderScaleLabel = createLabel(