GregVido / mica-electron

Library to add mica effect of windows 11 in electron app
Apache License 2.0
126 stars 7 forks source link

[BUG] MicaBrowserWindow dose not work properly when 'Display > Scale' is enabled. #25

Open SolomonLeon opened 11 months ago

SolomonLeon commented 11 months ago

OS information

WindowsProductName WindowsVersion OsHardwareAbstractionLayer
Windows 10 Home 2009 10.0.22621.1413

Using the following code, when the scale function in the display settings is turned on, the height and width of the window cannot be set normally. The same code with electron's native BrowserWindow can work properly (replace const scaleFactor = display.scaleFactor with const scaleFactor = 1)

screenshot
const { app, ipcMain, screen } = require('electron');
const { PARAMS, VALUE, MicaBrowserWindow, IS_WINDOWS_11, WIN10 } = require('mica-electron');
const path = require('path');
const WINUI_CONSTANT = {
    padding: 12,
    border: 1,
    width: 358,
}

function getWindowPosition(display) {
    const scaleFactor = display.scaleFactor
    const displayWidth = display.workAreaSize.width * scaleFactor
    const displayHeight = display.workAreaSize.height * scaleFactor
    return {
        x: parseInt(displayWidth - WINUI_CONSTANT.width * scaleFactor - WINUI_CONSTANT.padding * scaleFactor - WINUI_CONSTANT.border * scaleFactor * 2),
        y: parseInt(WINUI_CONSTANT.padding * scaleFactor + WINUI_CONSTANT.border * scaleFactor),
        width: parseInt(WINUI_CONSTANT.width * scaleFactor),
        height: parseInt(displayHeight * scaleFactor - WINUI_CONSTANT.padding * scaleFactor * 2 - WINUI_CONSTANT.border * scaleFactor * 2)
    }
}

app.on('ready', () => {
    const primaryDisplay = screen.getPrimaryDisplay()
    const {x, y, width, height} = getWindowPosition(primaryDisplay)
    const win = new MicaBrowserWindow({
        width: width,
        height: height,
        autoHideMenuBar: true,
        show: false,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        },
        frame: false,
        titleBarStyle: "hidden",
        transparent: true,
        alwaysOnTop: true,
        minimizable: false,
        x: x,
        y: y,
    });

    win.setLightTheme();

    if (IS_WINDOWS_11)
        win.setMicaAcrylicEffect();

    else
        win.setCustomEffect(WIN10.ACRYLIC, '#401896', .2);

    win.loadFile(path.join(__dirname, 'app', 'index.html'));
    win.webContents.openDevTools()

    win.webContents.once('dom-ready', () => {
        win.show();
    });

    // ......
});