mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-02 10:18:11 +08:00
Fix frontend HMR so the page doesn't break upon saving TS files and restructure frontend architecture (#3871)
* Clean up component setup/tear-down side effects * Clean up more component setup/tear-down side effects * Remove nonfunctional debouncer * Clean up even more component setup/tear-down side effects * Reuse backend state * Fix HMR for IO Managers and for State Providers * Rename IO Managers -> Managers and State Providers -> Stores * Restructure and partially flatten managers/stores * Code review fixes * Review fixes
This commit is contained in:
Keavon Chambers
@@ -0,0 +1,83 @@
|
||||
import { writable } from "svelte/store";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
import type { AppWindowPlatform } from "@graphite/../wasm/pkg/graphite_wasm";
|
||||
import type { Editor } from "@graphite/editor";
|
||||
|
||||
type AppWindowStoreState = {
|
||||
platform: AppWindowPlatform;
|
||||
maximized: boolean;
|
||||
fullscreen: boolean;
|
||||
viewportHolePunch: boolean;
|
||||
uiScale: number;
|
||||
};
|
||||
const initialState: AppWindowStoreState = {
|
||||
platform: "Web",
|
||||
maximized: false,
|
||||
fullscreen: false,
|
||||
viewportHolePunch: false,
|
||||
uiScale: 1,
|
||||
};
|
||||
|
||||
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
|
||||
const store: Writable<AppWindowStoreState> = import.meta.hot?.data?.store || writable<AppWindowStoreState>(initialState);
|
||||
if (import.meta.hot) import.meta.hot.data.store = store;
|
||||
const { subscribe, update } = store;
|
||||
|
||||
export function createAppWindowStore(editor: Editor) {
|
||||
// Set up message subscriptions on creation
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdatePlatform", (data) => {
|
||||
update((state) => {
|
||||
state.platform = data.platform;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateMaximized", (data) => {
|
||||
update((state) => {
|
||||
state.maximized = data.maximized;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateFullscreen", (data) => {
|
||||
update((state) => {
|
||||
state.fullscreen = data.fullscreen;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateViewportHolePunch", (data) => {
|
||||
update((state) => {
|
||||
state.viewportHolePunch = data.active;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateUIScale", (data) => {
|
||||
update((state) => {
|
||||
state.uiScale = data.scale;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
|
||||
|
||||
// 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?.createAppWindowStore(...currentArgs);
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
import { tick } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { IconName } from "@graphite/icons";
|
||||
import { patchLayout } from "@graphite/utility-functions/widgets";
|
||||
|
||||
type DialogStoreState = {
|
||||
visible: boolean;
|
||||
title: string;
|
||||
icon: IconName | undefined;
|
||||
buttons: Layout;
|
||||
column1: Layout;
|
||||
column2: Layout;
|
||||
panicDetails: string;
|
||||
};
|
||||
const initialState: DialogStoreState = {
|
||||
visible: false,
|
||||
title: "",
|
||||
icon: undefined,
|
||||
buttons: [],
|
||||
column1: [],
|
||||
column2: [],
|
||||
// Special case for the crash dialog because we cannot handle button widget callbacks from Rust once the editor has panicked
|
||||
panicDetails: "",
|
||||
};
|
||||
|
||||
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
|
||||
const store: Writable<DialogStoreState> = import.meta.hot?.data?.store || writable<DialogStoreState>(initialState);
|
||||
if (import.meta.hot) import.meta.hot.data.store = store;
|
||||
const { subscribe, update } = store;
|
||||
|
||||
export function createDialogStore(editor: Editor) {
|
||||
// Subscribe to process backend events
|
||||
editor.subscriptions.subscribeFrontendMessage("DisplayDialog", (data) => {
|
||||
update((state) => {
|
||||
state.visible = true;
|
||||
|
||||
state.title = data.title;
|
||||
state.icon = data.icon;
|
||||
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("DialogButtons", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.buttons, data);
|
||||
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("DialogColumn1", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.column1, data);
|
||||
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("DialogColumn2", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.column2, data);
|
||||
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("DialogClose", () => {
|
||||
update((state) => {
|
||||
// Disallow dismissing the crash dialog since it should remain as the final notification
|
||||
if (state.panicDetails === "") state.visible = false;
|
||||
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog", async () => {
|
||||
const BACKUP_URL = "https://editor.graphite.art/third-party-licenses.txt";
|
||||
let licenseText = `Content was not able to load. Please check your network connection and try again.\n\nOr visit ${BACKUP_URL} for the license notices.`;
|
||||
|
||||
try {
|
||||
const response = await fetch("/third-party-licenses.txt");
|
||||
if (response.ok && response.headers.get("Content-Type")?.includes("text/plain")) licenseText = await response.text();
|
||||
} catch {
|
||||
// Do nothing on network error
|
||||
}
|
||||
|
||||
editor.handle.requestLicensesThirdPartyDialogWithLicenseText(licenseText);
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
export type DialogStore = ReturnType<typeof createDialogStore>;
|
||||
|
||||
// Creates a crash dialog from JS once the editor has panicked.
|
||||
// Normal dialogs are created in the Rust backend, but for the crash dialog, the editor has panicked so it cannot respond to widget callbacks.
|
||||
export function createCrashDialog(panicDetails: string) {
|
||||
update((state) => {
|
||||
state.visible = true;
|
||||
|
||||
state.icon = "Failure";
|
||||
state.title = "Crash";
|
||||
state.panicDetails = panicDetails;
|
||||
|
||||
state.column1 = [];
|
||||
state.column2 = [];
|
||||
state.buttons = [];
|
||||
|
||||
return state;
|
||||
});
|
||||
}
|
||||
|
||||
// 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?.createDialogStore(...currentArgs);
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
import { tick } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import { patchLayout } from "@graphite/utility-functions/widgets";
|
||||
|
||||
type DocumentStoreState = {
|
||||
toolOptionsLayout: Layout;
|
||||
documentBarLayout: Layout;
|
||||
toolShelfLayout: Layout;
|
||||
workingColorsLayout: Layout;
|
||||
nodeGraphControlBarLayout: Layout;
|
||||
graphViewOverlayOpen: boolean;
|
||||
fadeArtwork: number;
|
||||
};
|
||||
const initialState: DocumentStoreState = {
|
||||
toolOptionsLayout: [],
|
||||
documentBarLayout: [],
|
||||
toolShelfLayout: [],
|
||||
workingColorsLayout: [],
|
||||
nodeGraphControlBarLayout: [],
|
||||
graphViewOverlayOpen: false,
|
||||
fadeArtwork: 100,
|
||||
};
|
||||
|
||||
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
|
||||
const store: Writable<DocumentStoreState> = import.meta.hot?.data?.store || writable<DocumentStoreState>(initialState);
|
||||
if (import.meta.hot) import.meta.hot.data.store = store;
|
||||
const { subscribe, update } = store;
|
||||
|
||||
export function createDocumentStore(editor: Editor) {
|
||||
// Update layouts
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateGraphFadeArtwork", (data) => {
|
||||
update((state) => {
|
||||
state.fadeArtwork = data.percentage;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("ToolOptions", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.toolOptionsLayout, data);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("DocumentBar", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.documentBarLayout, data);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("ToolShelf", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.toolShelfLayout, data);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("WorkingColors", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.workingColorsLayout, data);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeLayoutUpdate("NodeGraphControlBar", async (data) => {
|
||||
await tick();
|
||||
|
||||
update((state) => {
|
||||
patchLayout(state.nodeGraphControlBarLayout, data);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
// Show or hide the graph view overlay
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateGraphViewOverlay", (data) => {
|
||||
update((state) => {
|
||||
state.graphViewOverlayOpen = data.open;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphFadeArtwork");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphViewOverlay");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("ToolOptions");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("DocumentBar");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("ToolShelf");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("WorkingColors");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
export type DocumentStore = ReturnType<typeof createDocumentStore>;
|
||||
|
||||
// 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?.createDocumentStore(...currentArgs);
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
import { get, writable } from "svelte/store";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
|
||||
type FullscreenStoreState = {
|
||||
windowFullscreen: boolean;
|
||||
keyboardLocked: boolean;
|
||||
};
|
||||
const initialState: FullscreenStoreState = {
|
||||
windowFullscreen: false,
|
||||
keyboardLocked: false,
|
||||
};
|
||||
|
||||
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
|
||||
const store: Writable<FullscreenStoreState> = import.meta.hot?.data?.store || writable<FullscreenStoreState>(initialState);
|
||||
if (import.meta.hot) import.meta.hot.data.store = store;
|
||||
const { subscribe, update } = store;
|
||||
|
||||
export function createFullscreenStore(editor: Editor) {
|
||||
editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
|
||||
toggleFullscreen();
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
|
||||
|
||||
export function fullscreenModeChanged() {
|
||||
update((state) => {
|
||||
state.windowFullscreen = Boolean(document.fullscreenElement);
|
||||
if (!state.windowFullscreen) state.keyboardLocked = false;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
|
||||
export async function enterFullscreen() {
|
||||
await document.documentElement.requestFullscreen();
|
||||
|
||||
const keyboardLockApiSupported = navigator.keyboard !== undefined && "lock" in navigator.keyboard;
|
||||
|
||||
if (keyboardLockApiSupported && navigator.keyboard) {
|
||||
await navigator.keyboard.lock(["ControlLeft", "ControlRight"]);
|
||||
|
||||
update((state) => {
|
||||
state.keyboardLocked = true;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export async function exitFullscreen() {
|
||||
await document.exitFullscreen();
|
||||
}
|
||||
|
||||
export async function toggleFullscreen() {
|
||||
const state = get(store);
|
||||
if (state.windowFullscreen) await exitFullscreen();
|
||||
else await enterFullscreen();
|
||||
}
|
||||
|
||||
// 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?.createFullscreenStore(...currentArgs);
|
||||
});
|
||||
@@ -0,0 +1,231 @@
|
||||
import { writable } from "svelte/store";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
import type { NodeGraphErrorDiagnostic, BoxSelection, FrontendClickTargets, ContextMenuInformation, FrontendNode, FrontendNodeType, WirePath } from "@graphite/../wasm/pkg/graphite_wasm";
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { MessageBody } from "@graphite/subscription-router";
|
||||
|
||||
type NodeGraphStoreState = {
|
||||
box: BoxSelection | undefined;
|
||||
clickTargets: FrontendClickTargets | undefined;
|
||||
contextMenuInformation: ContextMenuInformation | undefined;
|
||||
error: NodeGraphErrorDiagnostic | undefined;
|
||||
layerWidths: Map<bigint, number>;
|
||||
chainWidths: Map<bigint, number>;
|
||||
hasLeftInputWire: Map<bigint, boolean>;
|
||||
updateImportsExports: MessageBody<"UpdateImportsExports"> | undefined;
|
||||
nodes: Map<bigint, FrontendNode>;
|
||||
visibleNodes: Set<bigint>;
|
||||
/// The index is the exposed input index. The exports have a first key value of u32::MAX.
|
||||
wires: Map<bigint, Map<number, WirePath>>;
|
||||
wirePathInProgress: WirePath | undefined;
|
||||
nodeDescriptions: Map<string, string>;
|
||||
nodeTypes: FrontendNodeType[];
|
||||
thumbnails: Map<bigint, string>;
|
||||
selected: bigint[];
|
||||
transform: { scale: number; x: number; y: number };
|
||||
inSelectedNetwork: boolean;
|
||||
reorderImportIndex: number | undefined;
|
||||
reorderExportIndex: number | undefined;
|
||||
};
|
||||
const initialState: NodeGraphStoreState = {
|
||||
box: undefined,
|
||||
clickTargets: undefined,
|
||||
contextMenuInformation: undefined,
|
||||
error: undefined,
|
||||
layerWidths: new Map(),
|
||||
chainWidths: new Map(),
|
||||
hasLeftInputWire: new Map(),
|
||||
updateImportsExports: undefined,
|
||||
nodes: new Map(),
|
||||
visibleNodes: new Set(),
|
||||
wires: new Map(),
|
||||
wirePathInProgress: undefined,
|
||||
nodeDescriptions: new Map(),
|
||||
nodeTypes: [],
|
||||
thumbnails: new Map(),
|
||||
selected: [],
|
||||
transform: { scale: 1, x: 0, y: 0 },
|
||||
inSelectedNetwork: true,
|
||||
reorderImportIndex: undefined,
|
||||
reorderExportIndex: undefined,
|
||||
};
|
||||
|
||||
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
|
||||
const store: Writable<NodeGraphStoreState> = import.meta.hot?.data?.store || writable<NodeGraphStoreState>(initialState);
|
||||
if (import.meta.hot) import.meta.hot.data.store = store;
|
||||
const { subscribe, update } = store;
|
||||
|
||||
export function createNodeGraphStore(editor: Editor) {
|
||||
// Set up message subscriptions on creation
|
||||
editor.subscriptions.subscribeFrontendMessage("SendUIMetadata", (data) => {
|
||||
update((state) => {
|
||||
state.nodeDescriptions = new Map(data.nodeDescriptions);
|
||||
state.nodeTypes = data.nodeTypes;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateBox", (data) => {
|
||||
update((state) => {
|
||||
state.box = data.box;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateClickTargets", (data) => {
|
||||
update((state) => {
|
||||
state.clickTargets = data.clickTargets;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateContextMenuInformation", (data) => {
|
||||
update((state) => {
|
||||
state.contextMenuInformation = data.contextMenuInformation;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateImportReorderIndex", (data) => {
|
||||
update((state) => {
|
||||
state.reorderImportIndex = data.importIndex;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateExportReorderIndex", (data) => {
|
||||
update((state) => {
|
||||
state.reorderExportIndex = data.exportIndex;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateImportsExports", (data) => {
|
||||
update((state) => {
|
||||
state.updateImportsExports = data;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateInSelectedNetwork", (data) => {
|
||||
update((state) => {
|
||||
state.inSelectedNetwork = data.inSelectedNetwork;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateLayerWidths", (data) => {
|
||||
update((state) => {
|
||||
state.layerWidths = data.layerWidths;
|
||||
state.chainWidths = data.chainWidths;
|
||||
state.hasLeftInputWire = data.hasLeftInputWire;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphNodes", (data) => {
|
||||
update((state) => {
|
||||
state.nodes.clear();
|
||||
data.nodes.forEach((node) => {
|
||||
state.nodes.set(node.id, node);
|
||||
});
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic", (data) => {
|
||||
update((state) => {
|
||||
state.error = data.error;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateVisibleNodes", (data) => {
|
||||
update((state) => {
|
||||
state.visibleNodes = new Set<bigint>(data.nodes);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphWires", (data) => {
|
||||
update((state) => {
|
||||
data.wires.forEach((wireUpdate) => {
|
||||
let inputMap = state.wires.get(wireUpdate.id);
|
||||
// If it doesn't exist, create it and set it in the outer map
|
||||
if (!inputMap) {
|
||||
inputMap = new Map();
|
||||
state.wires.set(wireUpdate.id, inputMap);
|
||||
}
|
||||
if (wireUpdate.wirePathUpdate !== undefined) {
|
||||
inputMap.set(wireUpdate.inputIndex, wireUpdate.wirePathUpdate);
|
||||
} else {
|
||||
inputMap.delete(wireUpdate.inputIndex);
|
||||
}
|
||||
});
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("ClearAllNodeGraphWires", () => {
|
||||
update((state) => {
|
||||
state.wires.clear();
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphSelection", (data) => {
|
||||
update((state) => {
|
||||
state.selected = data.selected;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphTransform", (data) => {
|
||||
update((state) => {
|
||||
state.transform = { scale: data.scale, x: data.translation[0], y: data.translation[1] };
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeThumbnail", (data) => {
|
||||
update((state) => {
|
||||
state.thumbnails.set(data.id, data.value);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateWirePathInProgress", (data) => {
|
||||
update((state) => {
|
||||
state.wirePathInProgress = data.wirePath;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateBox");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
|
||||
|
||||
export function closeContextMenu() {
|
||||
update((state) => {
|
||||
state.contextMenuInformation = undefined;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
|
||||
// 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?.createNodeGraphStore(...currentArgs);
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
import { writable } from "svelte/store";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
import type { OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
|
||||
import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
|
||||
|
||||
type PortfolioStoreState = {
|
||||
unsaved: boolean;
|
||||
documents: OpenDocument[];
|
||||
activeDocumentIndex: number;
|
||||
dataPanelOpen: boolean;
|
||||
propertiesPanelOpen: boolean;
|
||||
layersPanelOpen: boolean;
|
||||
};
|
||||
const initialState: PortfolioStoreState = {
|
||||
unsaved: false,
|
||||
documents: [],
|
||||
activeDocumentIndex: 0,
|
||||
dataPanelOpen: false,
|
||||
propertiesPanelOpen: true,
|
||||
layersPanelOpen: true,
|
||||
};
|
||||
|
||||
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
|
||||
const store: Writable<PortfolioStoreState> = import.meta.hot?.data?.store || writable<PortfolioStoreState>(initialState);
|
||||
if (import.meta.hot) import.meta.hot.data.store = store;
|
||||
const { subscribe, update } = store;
|
||||
|
||||
export function createPortfolioStore(editor: Editor) {
|
||||
// Set up message subscriptions on creation
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
|
||||
update((state) => {
|
||||
state.documents = data.openDocuments;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateActiveDocument", (data) => {
|
||||
update((state) => {
|
||||
// Assume we receive a correct document id
|
||||
const activeId = state.documents.findIndex((doc) => doc.id === data.documentId);
|
||||
state.activeDocumentIndex = activeId;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
|
||||
try {
|
||||
const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
|
||||
const response = await fetch(url);
|
||||
editor.handle.openFile(data.filename, await response.bytes());
|
||||
} catch {
|
||||
// Needs to be delayed until the end of the current call stack so the existing demo artwork dialog can be closed first, otherwise this dialog won't show
|
||||
setTimeout(() => {
|
||||
editor.handle.errorDialog("Failed to open document", "The file could not be reached over the internet. You may be offline, or it may be missing.");
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerOpen", async () => {
|
||||
const data = await upload(`image/*,.${editor.handle.fileExtension()}`, "data");
|
||||
editor.handle.openFile(data.filename, data.content);
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerImport", async () => {
|
||||
// TODO: Use the same `accept` string as in the `TriggerOpen` handler once importing Graphite documents as nodes is supported
|
||||
const data = await upload("image/*", "data");
|
||||
editor.handle.importFile(data.filename, data.content);
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerSaveDocument", (data) => {
|
||||
downloadFile(data.name, data.content);
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerSaveFile", (data) => {
|
||||
downloadFile(data.name, data.content);
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
|
||||
const { svg, name, mime, size } = data;
|
||||
|
||||
// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)
|
||||
const backgroundColor = mime.endsWith("jpeg") ? "white" : undefined;
|
||||
|
||||
// Rasterize the SVG to an image file
|
||||
try {
|
||||
const blob = await rasterizeSVG(svg, size[0], size[1], mime, backgroundColor);
|
||||
|
||||
// Have the browser download the file to the user's disk
|
||||
downloadFileBlob(name, blob);
|
||||
} catch {
|
||||
// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
|
||||
}
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateDataPanelState", async (data) => {
|
||||
update((state) => {
|
||||
state.dataPanelOpen = data.open;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdatePropertiesPanelState", async (data) => {
|
||||
update((state) => {
|
||||
state.propertiesPanelOpen = data.open;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateLayersPanelState", async (data) => {
|
||||
update((state) => {
|
||||
state.layersPanelOpen = data.open;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateOpenDocumentsList");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateActiveDocument");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerFetchAndOpenDocument");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerOpen");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerImport");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveDocument");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveFile");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerExportImage");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateDataPanelState");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdatePropertiesPanelState");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateLayersPanelState");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
|
||||
|
||||
// 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?.createPortfolioStore(...currentArgs);
|
||||
});
|
||||
@@ -0,0 +1,143 @@
|
||||
import { writable } from "svelte/store";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import { operatingSystem } from "@graphite/utility-functions/platform";
|
||||
|
||||
const SHOW_TOOLTIP_DELAY_MS = 500;
|
||||
|
||||
type TooltipStoreState = {
|
||||
visible: boolean;
|
||||
element: Element | undefined;
|
||||
position: { x: number; y: number };
|
||||
shiftClickShortcut: ActionShortcut | undefined;
|
||||
altClickShortcut: ActionShortcut | undefined;
|
||||
fullscreenShortcut: ActionShortcut | undefined;
|
||||
};
|
||||
const initialState: TooltipStoreState = {
|
||||
visible: false,
|
||||
element: undefined,
|
||||
position: { x: 0, y: 0 },
|
||||
shiftClickShortcut: undefined,
|
||||
altClickShortcut: undefined,
|
||||
fullscreenShortcut: 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");
|
||||
}
|
||||
|
||||
document.addEventListener("mouseover", onMouseOver);
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseleave", onMouseLeave);
|
||||
document.addEventListener("mousedown", closeTooltip);
|
||||
document.addEventListener("keydown", closeTooltip);
|
||||
document.addEventListener("wheel", closeTooltip);
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("SendShortcutShiftClick", async (data) => {
|
||||
update((state) => {
|
||||
state.shiftClickShortcut = data.shortcut;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("SendShortcutAltClick", async (data) => {
|
||||
update((state) => {
|
||||
state.altClickShortcut = data.shortcut;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
editor.subscriptions.subscribeFrontendMessage("SendShortcutFullscreen", async (data) => {
|
||||
update((state) => {
|
||||
state.fullscreenShortcut = operatingSystem() === "Mac" ? data.shortcutMac : data.shortcut;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
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);
|
||||
});
|
||||
Reference in New Issue
Block a user