fix: move traffic lights based on zoom level (#6201)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/f75d1f6f-18f4-4dff-8174-67223f5f9807.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/f75d1f6f-18f4-4dff-8174-67223f5f9807.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/f75d1f6f-18f4-4dff-8174-67223f5f9807.mp4">Kapture 2024-03-19 at 18.05.20.mp4</video>
This commit is contained in:
pengx17 2024-03-21 02:00:35 +00:00
parent e1cfa1071e
commit 8b2b2646bc
No known key found for this signature in database
GPG Key ID: 23F23D9E8B3971ED
3 changed files with 27 additions and 5 deletions

View File

@ -4,6 +4,7 @@ import './edgeless-template';
import { apis, events } from '@affine/electron-api';
import { setupGlobal } from '@affine/env/global';
import * as Sentry from '@sentry/react';
import { debounce } from 'lodash-es';
import { useEffect } from 'react';
import {
createRoutesFromChildren,
@ -61,6 +62,11 @@ export function setup() {
};
apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
events?.ui.onMaximized(handleMaximized);
const handleResize = debounce(() => {
apis?.ui.handleWindowResize().catch(console.error);
}, 50);
window.addEventListener('resize', handleResize);
}
performanceSetupLogger.info('done');

View File

@ -53,7 +53,6 @@ async function createWindow(additionalArguments: string[]) {
: isWindows()
? 'hidden'
: 'default',
trafficLightPosition: { x: 20, y: 16 },
x: mainWindowState.x,
y: mainWindowState.y,
width: mainWindowState.width,
@ -100,6 +99,8 @@ async function createWindow(additionalArguments: string[]) {
if (browserWindow.isMaximized() || browserWindow.isFullScreen()) {
uiSubjects.onMaximized.next(true);
}
handleWebContentsResize().catch(logger.error);
});
browserWindow.on('close', e => {
@ -135,18 +136,15 @@ async function createWindow(additionalArguments: string[]) {
browserWindow.on('maximize', () => {
uiSubjects.onMaximized.next(true);
browserWindow.setBackgroundMaterial('none');
});
// full-screen == maximized in UI on windows
browserWindow.on('enter-full-screen', () => {
uiSubjects.onMaximized.next(true);
browserWindow.setBackgroundMaterial('none');
});
browserWindow.on('unmaximize', () => {
uiSubjects.onMaximized.next(false);
browserWindow.setBackgroundMaterial('none');
});
/**
@ -274,3 +272,14 @@ export async function getCookie(url?: string, name?: string) {
});
return cookies;
}
// there is no proper way to listen to webContents resize event
// we will rely on window.resize event in renderer instead
export async function handleWebContentsResize() {
// right now when window is resized, we will relocate the traffic light positions
if (isMacOS()) {
const window = await getMainWindow();
const factor = window?.webContents.getZoomFactor() || 1;
window?.setWindowButtonPosition({ x: 20 * factor, y: 24 * factor - 6 });
}
}

View File

@ -4,7 +4,11 @@ import { getLinkPreview } from 'link-preview-js';
import { isMacOS } from '../../shared/utils';
import { persistentConfig } from '../config-storage/persist';
import { logger } from '../logger';
import { getMainWindow, initAndShowMainWindow } from '../main-window';
import {
getMainWindow,
handleWebContentsResize,
initAndShowMainWindow,
} from '../main-window';
import { getOnboardingWindow } from '../onboarding';
import type { NamespaceHandlers } from '../type';
import { launchStage } from '../windows-manager/stage';
@ -44,6 +48,9 @@ export const uiHandlers = {
window.maximize();
}
},
handleWindowResize: async () => {
await handleWebContentsResize();
},
handleCloseApp: async () => {
app.quit();
},