diff --git a/src/main/node/app.js b/src/main/node/app.js index 3c65dba..3ad0317 100644 --- a/src/main/node/app.js +++ b/src/main/node/app.js @@ -10,6 +10,7 @@ function createWindow() { height: height, transparent: true, frame: false, + backgroundColor: '#00000000', alwaysOnTop: false, webPreferences: { backgroundThrottling: false @@ -17,6 +18,57 @@ function createWindow() { }); win.loadURL(url); + + win.webContents.on('did-finish-load', () => { + win.webContents.insertCSS(` + html, body { + -webkit-app-region: drag; + user-select: none; + } + + a, button, input, select, textarea, option, [role="button"], [role="textbox"] { + -webkit-app-region: no-drag; + user-select: auto; + } + `); + + win.webContents.executeJavaScript(`(() => { + const overlayId = 'imgfloat-drag-overlay'; + if (!document.getElementById(overlayId)) { + const overlay = document.createElement('div'); + overlay.id = overlayId; + Object.assign(overlay.style, { + position: 'fixed', + inset: '0', + background: 'rgba(0, 0, 0, 0)', + transition: 'background 120ms ease', + pointerEvents: 'none', + zIndex: '2147483647', + webkitAppRegion: 'drag' + }); + document.documentElement.appendChild(overlay); + } + + const overlay = document.getElementById(overlayId); + let timeout; + + window.__imgfloatShowDragOverlay = () => { + if (!overlay) { + return; + } + + overlay.style.background = 'rgba(0, 0, 0, 0.35)'; + clearTimeout(timeout); + timeout = setTimeout(() => { + overlay.style.background = 'rgba(0, 0, 0, 0)'; + }, 150); + }; + })();`); + }); + + win.on('move', () => { + win.webContents.executeJavaScript('window.__imgfloatShowDragOverlay && window.__imgfloatShowDragOverlay();'); + }); } app.whenReady().then(() => { diff --git a/src/main/node/package.json b/src/main/node/package.json index 30f5945..15b31b4 100644 --- a/src/main/node/package.json +++ b/src/main/node/package.json @@ -1,13 +1,8 @@ { "name": "imgfloat-electron", - "version": "0.0.1", + "version": "1.0.0", "description": "Electron wrapper for the Imgfloat overlay", "main": "app.js", - "scripts": { - "dist:linux": "electron-builder --linux AppImage", - "dist:win": "electron-builder --win nsis", - "dist:mac": "electron-builder --mac" - }, "build": { "appId": "dev.kruhlmann.imgfloat.overlay", "productName": "Imgfloat",