fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 02:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make the welcome screen not include Alt in Ctrl+Alt+N on desktop

Browse Source
This commit is contained in:
Keavon Chambers
2025-11-17 14:27:15 -08:00
parent 85965c8b6a
commit 12453d2e61
13 changed files with 54 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/window/MainWindow.svelte
View File

@@ -1,18 +1,18 @@
<script lang="ts">
import type { AppWindowPlatform } from "@graphite/messages";
import { getContext } from "svelte";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import StatusBar from "@graphite/components/window/status-bar/StatusBar.svelte";
import TitleBar from "@graphite/components/window/title-bar/TitleBar.svelte";
import Workspace from "@graphite/components/window/workspace/Workspace.svelte";
export let platform: AppWindowPlatform;
export let maximized: boolean;
export let viewportHolePunch: boolean;
const appWindow = getContext<AppWindowState>("appWindow");
</script>
<LayoutCol class="main-window" classes={{ "viewport-hole-punch": viewportHolePunch }}>
<TitleBar {platform} {maximized} />
<LayoutCol class="main-window" classes={{ "viewport-hole-punch": $appWindow.viewportHolePunch }}>
<TitleBar />
<Workspace />

5
frontend/src/components/window/status-bar/StatusBar.svelte
View File

@@ -3,7 +3,7 @@
import type { Editor } from "@graphite/editor";
import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages";
import { platformIsMac } from "@graphite/utility-functions/platform";
import { operatingSystem } from "@graphite/utility-functions/platform";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import Separator from "@graphite/components/widgets/labels/Separator.svelte";
@@ -14,8 +14,7 @@
let hintData: HintData = [];
function inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
return hint.keyGroups;
return operatingSystem() === "Mac" && hint.keyGroupsMac ? hint.keyGroupsMac : hint.keyGroups;
}
onMount(() => {

23
frontend/src/components/window/title-bar/TitleBar.svelte
View File

@@ -2,8 +2,9 @@
import { getContext, onMount } from "svelte";
import type { Editor } from "@graphite/editor";
import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, type AppWindowPlatform, UpdateMenuBarLayout } from "@graphite/messages";
import { platformIsMac } from "@graphite/utility-functions/platform";
import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/messages";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import { operatingSystem } from "@graphite/utility-functions/platform";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
@@ -11,13 +12,11 @@
import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
export let platform: AppWindowPlatform;
export let maximized: boolean;
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
const ACCEL_KEY = platformIsMac() ? "Command" : "Control";
const ACCEL_KEY = operatingSystem() === "Mac" ? "Command" : "Control";
const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
[ACCEL_KEY, "KeyW"],
[ACCEL_KEY, "KeyN"],
@@ -61,7 +60,7 @@
<LayoutRow class="title-bar">
<!-- Menu bar -->
<LayoutRow>
{#if platform !== "Mac"}
{#if $appWindow.platform !== "Mac"}
{#each entries as entry}
<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} flush={true} />
{/each}
@@ -71,12 +70,12 @@
<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
<!-- Window buttons -->
<LayoutRow>
{#if platform === "Web"}
{#if $appWindow.platform === "Web"}
<WindowButtonsWeb />
{:else if platform === "Windows"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Linux"}
<WindowButtonsLinux {maximized} />
{:else if $appWindow.platform === "Windows"}
<WindowButtonsWindows />
{:else if $appWindow.platform === "Linux"}
<WindowButtonsLinux />
{/if}
</LayoutRow>
</LayoutRow>

8
frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
View File

@@ -2,20 +2,20 @@
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let maximized;
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
</script>
<LayoutRow class="window-button linux" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon="WindowButtonWinMinimize" />
</LayoutRow>
<LayoutRow class="window-button linux" tooltip={maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
<LayoutRow class="window-button linux" tooltip={$appWindow.maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow class="window-button linux" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
<IconLabel icon="WindowButtonWinClose" />

8
frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
View File

@@ -2,20 +2,20 @@
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let maximized;
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
</script>
<LayoutRow class="window-button windows" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon="WindowButtonWinMinimize" />
</LayoutRow>
<LayoutRow class="window-button windows" tooltip={maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
<LayoutRow class="window-button windows" tooltip={$appWindow.maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow class="window-button windows" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
<IconLabel icon="WindowButtonWinClose" />

16
frontend/src/components/window/workspace/Panel.svelte
View File

@@ -18,7 +18,8 @@
import type { Editor } from "@graphite/editor";
import { type LayoutKeysGroup, type Key } from "@graphite/messages";
import { platformIsMac, isEventSupported } from "@graphite/utility-functions/platform";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import { operatingSystem, isEventSupported } from "@graphite/utility-functions/platform";
import { extractPixelData } from "@graphite/utility-functions/rasterization";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -32,6 +33,7 @@
const BUTTON_LEFT = 0;
const BUTTON_MIDDLE = 1;
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
export let tabMinWidths = false;
@@ -52,14 +54,18 @@
let tabElements: (LayoutRow | undefined)[] = [];
function platformModifiers(reservedKey: boolean): LayoutKeysGroup {
function platformModifiedAccelKey(browserReservedKey: boolean): LayoutKeysGroup {
// TODO: Remove this by properly feeding these keys from a layout provided by the backend
const ALT: Key = { key: "Alt", label: "Alt" };
const COMMAND: Key = { key: "Command", label: "Command" };
const CONTROL: Key = { key: "Control", label: "Ctrl" };
if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
// Only consider the browser reserved key on web platforms
const reservedKey = $appWindow.platform === "Web" ? browserReservedKey : false;
// Return either Command (Mac) or Control (Windows/Linux), with Alt added if the browser reserves the shortcut
if (operatingSystem() === "Mac") return reservedKey ? [ALT, COMMAND] : [COMMAND];
return reservedKey ? [CONTROL, ALT] : [CONTROL];
}
@@ -179,7 +185,7 @@
<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
<UserInputLabel keysWithLabelsGroups={[[...platformModifiedAccelKey(true), { key: "KeyN", label: "N" }]]} />
</td>
</tr>
<tr>
@@ -187,7 +193,7 @@
<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
<UserInputLabel keysWithLabelsGroups={[[...platformModifiedAccelKey(false), { key: "KeyO", label: "O" }]]} />
</td>
</tr>
<tr>