Desktop: Add support for UI scaling (#3310)

* desktop support ui scaling

* fix some warnings

* use browser zoom if needed

* fix infinite footprint size

* fix web canvas scale

* always set zoom

* use only zoom for scaling

* prevent user zoom

* remove mouse position scaling
This commit is contained in:
Timon
2025-11-08 11:32:04 +00:00
committed by GitHub
parent 7254c470ef
commit f02f834097
25 changed files with 286 additions and 162 deletions

View File

@@ -59,26 +59,26 @@
</script>
<LayoutRow class="title-bar">
{#if platform !== "Mac"}
<!-- Menu bar -->
<LayoutRow>
<!-- Menu bar -->
<LayoutRow>
{#if platform !== "Mac"}
{#each entries as entry}
<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} flush={true} />
{/each}
</LayoutRow>
<!-- Spacer -->
<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
<!-- Window buttons -->
<LayoutRow>
{#if platform === "Web"}
<WindowButtonsWeb />
{:else if platform === "Windows"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Linux"}
<WindowButtonsLinux {maximized} />
{/if}
</LayoutRow>
{/if}
{/if}
</LayoutRow>
<!-- Spacer -->
<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
<!-- Window buttons -->
<LayoutRow>
{#if platform === "Web"}
<WindowButtonsWeb />
{:else if platform === "Windows"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Linux"}
<WindowButtonsLinux {maximized} />
{/if}
</LayoutRow>
</LayoutRow>
<style lang="scss" global>

View File

@@ -258,6 +258,11 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
const { target } = e;
const isTargetingCanvas = target instanceof Element && target.closest("[data-viewport], [data-viewport-container], [data-node-graph]");
// Prevent zooming the entire page when using Ctrl + scroll wheel outside of the viewport
if (e.ctrlKey && !isTargetingCanvas) {
e.preventDefault();
}
// Redirect vertical scroll wheel movement into a horizontal scroll on a horizontally scrollable element
// There seems to be no possible way to properly employ the browser's smooth scrolling interpolation
const horizontalScrollableElement = target instanceof Element && target.closest("[data-scrollable-x]");