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

Restructure frontend TS files so managers/stores export destructors instead of returning them from their constructors (#3919)

Browse Source 
* Replace parameter passing with getContext and extract destroy functions to module-level exports

* Resend layouts from Rust when editor is re-mounted on HMR

* Code review
This commit is contained in:
Keavon Chambers
2026-03-19 18:25:34 -07:00
committed by GitHub
parent 124b17f609
commit 2e2c4fe180
21 changed files with 983 additions and 897 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/stores/tooltip.ts
+77 -82
View File
@@ -5,8 +5,12 @@ import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import { operatingSystem } from "@graphite/utility-functions/platform";
export type TooltipStore = ReturnType<typeof createTooltipStore>;
const SHOW_TOOLTIP_DELAY_MS = 500;
let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
type TooltipStoreState = {
visible: boolean;
element: Element | undefined;
@@ -24,80 +28,15 @@ const initialState: TooltipStoreState = {
fullscreenShortcut: undefined,
};
let editorRef: Editor | undefined = undefined;
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
const store: Writable<TooltipStoreState> = import.meta.hot?.data?.store || writable<TooltipStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createTooltipStore(editor: Editor) {
let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
const onMouseOver = (e: MouseEvent) => {
const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
update((state) => {
state.visible = false;
state.element = element;
return state;
});
};
// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
const onMouseMove = (e: MouseEvent) => {
// Hide the tooltip now that the cursor has moved
update((state) => {
state.visible = false;
return state;
});
// Before we schedule a new future tooltip appearance, we clear the existing one
if (tooltipTimeout) clearTimeout(tooltipTimeout);
// Don't show tooltips while mouse buttons are pressed
if (e.buttons !== 0) return;
// Schedule the tooltip to appear at this cursor position after a delay
tooltipTimeout = setTimeout(() => {
update((state) => {
if (state.element) {
state.visible = true;
state.position = { x: e.clientX, y: e.clientY };
}
return state;
});
}, SHOW_TOOLTIP_DELAY_MS);
};
// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
const onMouseLeave = () => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
closeTooltip();
};
// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
function closeTooltip() {
update((state) => {
state.visible = false;
state.element = undefined;
return state;
});
}
function destroy() {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
document.removeEventListener("mouseover", onMouseOver);
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseleave", onMouseLeave);
document.removeEventListener("mousedown", closeTooltip);
document.removeEventListener("keydown", closeTooltip);
document.removeEventListener("wheel", closeTooltip);
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
}
editorRef = editor;
document.addEventListener("mouseover", onMouseOver);
document.addEventListener("mousemove", onMouseMove);
@@ -125,19 +64,75 @@ export function createTooltipStore(editor: Editor) {
});
});
currentCleanup = destroy;
currentArgs = [editor];
return {
subscribe,
destroy,
};
return { subscribe };
}
export type TooltipStore = ReturnType<typeof createTooltipStore>;
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
let currentCleanup: (() => void) | undefined;
let currentArgs: [Editor] | undefined;
import.meta.hot?.accept((newModule) => {
currentCleanup?.();
if (currentArgs) newModule?.createTooltipStore(...currentArgs);
});
export function destroyTooltipStore() {
const editor = editorRef;
if (!editor) return;
if (tooltipTimeout) clearTimeout(tooltipTimeout);
document.removeEventListener("mouseover", onMouseOver);
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseleave", onMouseLeave);
document.removeEventListener("mousedown", closeTooltip);
document.removeEventListener("keydown", closeTooltip);
document.removeEventListener("wheel", closeTooltip);
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
}
// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
function onMouseOver(e: MouseEvent) {
const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
update((state) => {
state.visible = false;
state.element = element;
return state;
});
}
// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
function onMouseMove(e: MouseEvent) {
// Hide the tooltip now that the cursor has moved
update((state) => {
state.visible = false;
return state;
});
// Before we schedule a new future tooltip appearance, we clear the existing one
if (tooltipTimeout) clearTimeout(tooltipTimeout);
// Don't show tooltips while mouse buttons are pressed
if (e.buttons !== 0) return;
// Schedule the tooltip to appear at this cursor position after a delay
tooltipTimeout = setTimeout(() => {
update((state) => {
if (state.element) {
state.visible = true;
state.position = { x: e.clientX, y: e.clientY };
}
return state;
});
}, SHOW_TOOLTIP_DELAY_MS);
}
// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
function onMouseLeave() {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
closeTooltip();
}
// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
function closeTooltip() {
update((state) => {
state.visible = false;
state.element = undefined;
return state;
});
}