Vue initialization and FloatingMenu codebase refactoring and cleanup (#649)

* Clean up Vue initialization-related code * Rename folder: dispatcher -> interop * Rename folder: state -> providers * Comments and clarification * Rename JS dispatcher to subscription router * Assorted cleanup and renaming * Rename: js-messages.ts -> messages.ts * Comments * Remove unused Vue component injects * Clean up coming soon and add warning about freezing the app * Further cleanup * Dangerous changes * Simplify App.vue code * Move more disparate init code from components into managers * Rename folder: providers -> state-providers * Other * Move Document panel options bar separator to backend * Add destructors to managers to fix HMR * Comments and code style * Rename variable: font -> font_file_url * Fix async font loading; refactor janky floating menu openness and min-width measurement; fix Vetur errors * Fix misaligned canvas in viewport until panning on page (re)load * Add Vue bidirectional props documentation * More folder renaming for better terminology; add some documentation
2026-09-25 19:28:12 +08:00 · 2022-05-21 19:46:15 -07:00
parent 4c3c925c2c
commit fc2d983bd7
73 changed files with 1572 additions and 1462 deletions
@@ -0,0 +1,161 @@
+import { TextButtonWidget } from "@/components/widgets/buttons/TextButton";
+import { DialogState } from "@/state-providers/dialog";
+import { IconName } from "@/utility-functions/icons";
+import { stripIndents } from "@/utility-functions/strip-indents";
+import { Editor } from "@/wasm-communication/editor";
+import { DisplayDialogPanic, WidgetLayout } from "@/wasm-communication/messages";
+
+export function createPanicManager(editor: Editor, dialogState: DialogState): void {
+	// Code panic dialog and console error
+	editor.subscriptions.subscribeJsMessage(DisplayDialogPanic, (displayDialogPanic) => {
+		// `Error.stackTraceLimit` is only available in V8/Chromium
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(Error as any).stackTraceLimit = Infinity;
+		const stackTrace = new Error().stack || "";
+		const panicDetails = `${displayDialogPanic.panic_info}${stackTrace ? `\n\n${stackTrace}` : ""}`;
+
+		// eslint-disable-next-line no-console
+		console.error(panicDetails);
+
+		const panicDialog = preparePanicDialog(displayDialogPanic.title, displayDialogPanic.description, panicDetails);
+		dialogState.createPanicDialog(...panicDialog);
+	});
+}
+
+function preparePanicDialog(title: string, details: string, panicDetails: string): [IconName, WidgetLayout, TextButtonWidget[]] {
+	const widgets: WidgetLayout = {
+		layout: [
+			{
+				rowWidgets: [
+					{
+						kind: "TextLabel",
+						props: { value: title, bold: true },
+						// eslint-disable-next-line camelcase
+						widget_id: 0n,
+					},
+				],
+			},
+			{
+				rowWidgets: [
+					{
+						kind: "TextLabel",
+						props: { value: details, multiline: true },
+						// eslint-disable-next-line camelcase
+						widget_id: 0n,
+					},
+				],
+			},
+		],
+		// eslint-disable-next-line camelcase
+		layout_target: null,
+	};
+
+	const reloadButton: TextButtonWidget = {
+		kind: "TextButton",
+		callback: async () => window.location.reload(),
+		props: { label: "Reload", emphasized: true, minWidth: 96 },
+	};
+	const copyErrorLogButton: TextButtonWidget = {
+		kind: "TextButton",
+		callback: async () => navigator.clipboard.writeText(panicDetails),
+		props: { label: "Copy Error Log", emphasized: false, minWidth: 96 },
+	};
+	const reportOnGithubButton: TextButtonWidget = {
+		kind: "TextButton",
+		callback: async () => window.open(githubUrl(panicDetails), "_blank"),
+		props: { label: "Report Bug", emphasized: false, minWidth: 96 },
+	};
+	const jsCallbackBasedButtons = [reloadButton, copyErrorLogButton, reportOnGithubButton];
+
+	return ["Warning", widgets, jsCallbackBasedButtons];
+}
+
+function githubUrl(panicDetails: string): string {
+	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");
+
+	let body = stripIndents`
+		**Describe the Crash**
+		Explain clearly what you were doing when the crash occurred.
+
+		**Steps To Reproduce**
+		Describe precisely how the crash occurred, step by step, starting with a new editor window.
+		1. Open the Graphite Editor at https://editor.graphite.rs
+		2. 
+		3. 
+		4. 
+		5. 
+
+		**Additional Details**
+		Provide any further information or context that you think would be helpful in fixing the issue. Screenshots or video can be linked or attached to this issue.
+
+		**Browser and OS**
+		${browserVersion()}, ${operatingSystem()}
+
+		**Stack Trace**
+		Copied from the crash dialog in the Graphite Editor:
+	`;
+
+	body += "\n\n```\n";
+	body += panicDetails.trimEnd();
+	body += "\n```";
+
+	const fields = {
+		title: "[Crash Report] ",
+		body,
+		labels: ["Crash"].join(","),
+		projects: [].join(","),
+		milestone: "",
+		assignee: "",
+		template: "",
+	};
+
+	Object.entries(fields).forEach(([field, value]) => {
+		if (value) url.searchParams.set(field, value);
+	});
+
+	return url.toString();
+}
+
+function browserVersion(): string {
+	const agent = window.navigator.userAgent;
+	let match = agent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+
+	if (/trident/i.test(match[1])) {
+		const browser = /\brv[ :]+(\d+)/g.exec(agent) || [];
+		return `IE ${browser[1] || ""}`.trim();
+	}
+
+	if (match[1] === "Chrome") {
+		let browser = agent.match(/\bEdg\/(\d+)/);
+		if (browser !== null) return `Edge (Chromium) ${browser[1]}`;
+
+		browser = agent.match(/\bOPR\/(\d+)/);
+		if (browser !== null) return `Opera ${browser[1]}`;
+	}
+
+	match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, "-?"];
+
+	const browser = agent.match(/version\/(\d+)/i);
+	if (browser !== null) match.splice(1, 1, browser[1]);
+
+	return `${match[0]} ${match[1]}`;
+}
+
+function operatingSystem(): string {
+	const osTable: Record<string, string> = {
+		"Windows NT 10": "Windows 10 or 11",
+		"Windows NT 6.3": "Windows 8.1",
+		"Windows NT 6.2": "Windows 8",
+		"Windows NT 6.1": "Windows 7",
+		"Windows NT 6.0": "Windows Vista",
+		"Windows NT 5.1": "Windows XP",
+		"Windows NT 5.0": "Windows 2000",
+		Mac: "Mac",
+		X11: "Unix",
+		Linux: "Linux",
+		Unknown: "YOUR OPERATING SYSTEM",
+	};
+
+	const userAgentOS = Object.keys(osTable).find((key) => window.navigator.userAgent.includes(key));
+	return osTable[userAgentOS || "Unknown"];
+}