Fix sending platform-specific shortcut keys to frontend before editor is initialized with the platform set

This commit is contained in:
Keavon Chambers
2025-12-04 15:35:30 -08:00
parent 783ea0b437
commit 2ee8e56cef
12 changed files with 77 additions and 52 deletions
+8 -4
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { getContext, onMount, onDestroy, tick } from "svelte";
import { shortcutAltClick } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import {
patchLayout,
@@ -10,6 +9,7 @@
UpdateLayersPanelControlBarLeftLayout,
UpdateLayersPanelControlBarRightLayout,
UpdateLayersPanelBottomBarLayout,
SendShortcutAltClick,
} from "@graphite/messages";
import type { ActionShortcut, DataBuffer, LayerPanelEntry, Layout } from "@graphite/messages";
import type { NodeGraphState } from "@graphite/state-providers/node-graph";
@@ -73,9 +73,13 @@
let layersPanelControlBarRightLayout: Layout = [];
let layersPanelBottomBarLayout: Layout = [];
const altClickKeys: ActionShortcut = shortcutAltClick();
let altClickShortcut: ActionShortcut | undefined;
onMount(() => {
editor.subscriptions.subscribeJsMessage(SendShortcutAltClick, async (data) => {
altClickShortcut = data.shortcut;
});
editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLeftLayout, (updateLayersPanelControlBarLeftLayout) => {
patchLayout(layersPanelControlBarLeftLayout, updateLayersPanelControlBarLeftLayout);
layersPanelControlBarLeftLayout = layersPanelControlBarLeftLayout;
@@ -624,7 +628,7 @@
? "Hide the layers nested within. (To affect all open descendants, perform the shortcut shown.)"
: "Show the layers nested within. (To affect all closed descendants, perform the shortcut shown.)") +
(listing.entry.ancestorOfSelected && !listing.entry.expanded ? "\n\nNote: a selected layer is currently contained within.\n" : "")}
data-tooltip-shortcut={altClickKeys?.shortcut ? JSON.stringify(altClickKeys.shortcut) : undefined}
data-tooltip-shortcut={altClickShortcut?.shortcut ? JSON.stringify(altClickShortcut.shortcut) : undefined}
on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
tabindex="0"
></button>
@@ -636,7 +640,7 @@
icon="Clipped"
class="clipped-arrow"
tooltipDescription="Clipping mask is active. To release it, perform the shortcut on the layer border."
tooltipShortcut={altClickKeys}
tooltipShortcut={altClickShortcut}
/>
{/if}
<div class="thumbnail">
@@ -21,8 +21,6 @@
patchLayout(welcomePanelButtonsLayout, updateWelcomeScreenButtonsLayout);
welcomePanelButtonsLayout = welcomePanelButtonsLayout;
});
editor.handle.requestWelcomeScreenButtonsLayout();
});
onDestroy(() => {
@@ -1,16 +1,24 @@
<script lang="ts">
import { getContext } from "svelte";
import { getContext, onMount } from "svelte";
import { shortcutF11 } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import type { ActionShortcut } from "@graphite/messages";
import { SendShortcutF11 } from "@graphite/messages";
import type { FullscreenState } from "@graphite/state-providers/fullscreen";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
const fullscreen = getContext<FullscreenState>("fullscreen");
const editor = getContext<Editor>("editor");
const f11Keys: ActionShortcut = shortcutF11();
let f11Shortcut: ActionShortcut | undefined = undefined;
onMount(() => {
editor.subscriptions.subscribeJsMessage(SendShortcutF11, async (data) => {
f11Shortcut = data.shortcut;
});
});
async function handleClick() {
if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
@@ -23,7 +31,7 @@
on:click={handleClick}
tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
tooltipDescription={$fullscreen.keyboardLockApiSupported ? "While fullscreen, keyboard shortcuts normally reserved by the browser become available." : ""}
tooltipShortcut={f11Keys}
tooltipShortcut={f11Shortcut}
>
<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
</LayoutRow>