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

Refactor font loading from per-document to the portfolio (#659)

Browse Source 
* Cleanup default font loading

* Refactor fonts

* Fix menulist mouse navigation

* Format

* Formatting

* Move default font into consts.rs

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-05-27 00:27:33 +01:00
committed by Keavon Chambers
parent d4539bc304
commit 8923b68e30
60 changed files with 835 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/widgets/inputs/DropdownInput.vue
View File

@@ -1,12 +1,12 @@
<template>
<LayoutRow class="dropdown-input">
<LayoutRow class="dropdown-input" data-dropdown-input>
<LayoutRow
class="dropdown-box"
:class="{ disabled }"
:class="{ disabled, open }"
:style="{ minWidth: `${minWidth}px` }"
tabindex="0"
@click="() => !disabled && (open = true)"
@blur="() => (open = false)"
@blur="(e: FocusEvent) => blur(e)"
@keydown="(e) => keydown(e)"
ref="dropdownBox"
data-hover-menu-spawner
@@ -145,6 +145,9 @@ export default defineComponent({
keydown(e: KeyboardEvent) {
(this.$refs.menuList as typeof MenuList).keydown(e, false);
},
blur(e: FocusEvent) {
if ((e.target as HTMLElement).closest("[data-dropdown-input]") !== this.$el) this.open = false;
},
},
components: {
IconLabel,

10
frontend/src/components/widgets/inputs/MenuBarInput.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="menu-bar-input">
<div class="menu-bar-input" data-menu-bar-input>
<div class="entry-container">
<button @click="() => visitWebsite('https://graphite.rs')" class="entry">
<IconLabel :icon="'GraphiteLogo'" />
@@ -8,11 +8,11 @@
<div class="entry-container" v-for="(entry, index) in entries" :key="index">
<div
@click="(e) => onClick(entry, e.target)"
@blur="() => close(entry)"
tabindex="0"
@blur="(e: FocusEvent) => blur(e,entry)"
@keydown="entry.ref?.keydown"
class="entry"
:class="{ open: entry.ref?.open }"
:class="{ open: entry.ref?.isOpen }"
data-hover-menu-spawner
>
<IconLabel v-if="entry.icon" :icon="entry.icon" />
@@ -225,8 +225,8 @@ export default defineComponent({
if (menuEntry.ref) menuEntry.ref.isOpen = true;
else throw new Error("The menu bar floating menu has no associated ref");
},
close(menuEntry: MenuListEntry) {
if (menuEntry.ref) menuEntry.ref.isOpen = false;
blur(e: FocusEvent, menuEntry: MenuListEntry) {
if ((e.target as HTMLElement).closest("[data-menu-bar-input]") !== this.$el && menuEntry.ref) menuEntry.ref.isOpen = false;
},
// TODO: Move to backend
visitWebsite(url: string) {

22
frontend/src/state-providers/fonts.ts
View File

@@ -1,10 +1,7 @@
import { reactive, readonly } from "vue";
import { Editor } from "@/wasm-communication/editor";
import { TriggerFontLoad, TriggerFontLoadDefault } from "@/wasm-communication/messages";
const DEFAULT_FONT = "Merriweather";
const DEFAULT_FONT_STYLE = "Normal (400)";
import { TriggerFontLoad } from "@/wasm-communication/messages";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createFontsState(editor: Editor) {
@@ -40,17 +37,14 @@ export function createFontsState(editor: Editor) {
}
// Subscribe to process backend events
editor.subscriptions.subscribeJsMessage(TriggerFontLoadDefault, async (): Promise<void> => {
const fontFileUrl = await getFontFileUrl(DEFAULT_FONT, DEFAULT_FONT_STYLE);
if (!fontFileUrl) return;
const response = await fetch(fontFileUrl);
const responseBuffer = await response.arrayBuffer();
editor.instance.on_font_load(fontFileUrl, new Uint8Array(responseBuffer), true);
});
editor.subscriptions.subscribeJsMessage(TriggerFontLoad, async (triggerFontLoad) => {
const response = await (await fetch(triggerFontLoad.font_file_url)).arrayBuffer();
editor.instance.on_font_load(triggerFontLoad.font_file_url, new Uint8Array(response), false);
const url = await getFontFileUrl(triggerFontLoad.font.font_family, triggerFontLoad.font.font_style);
if (url) {
const response = await (await fetch(url)).arrayBuffer();
editor.instance.on_font_load(triggerFontLoad.font.font_family, triggerFontLoad.font.font_style, url, new Uint8Array(response), triggerFontLoad.is_default);
} else {
editor.instance.error_dialog("Failed to load font", `The font ${triggerFontLoad.font.font_family} with style ${triggerFontLoad.font.font_style} does not exist`);
}
});
const fontList: Promise<{ family: string; variants: string[]; files: Map<string, string> }[]> = new Promise((resolve) => {

14
frontend/src/wasm-communication/messages.ts
View File

@@ -352,11 +352,18 @@ export class TriggerIndexedDbRemoveDocument extends JsMessage {
document_id!: string;
}
export class TriggerFontLoad extends JsMessage {
font_file_url!: string;
export class Font {
font_family!: string;
font_style!: string;
}
export class TriggerFontLoadDefault extends JsMessage {}
export class TriggerFontLoad extends JsMessage {
@Type(() => Font)
font!: Font;
is_default!: boolean;
}
export class TriggerVisitLink extends JsMessage {
url!: string;
@@ -545,7 +552,6 @@ export const messageMakers: Record<string, MessageMaker> = {
TriggerFileUpload,
TriggerIndexedDbRemoveDocument,
TriggerFontLoad,
TriggerFontLoadDefault,
TriggerIndexedDbWriteDocument,
TriggerRasterDownload,
TriggerTextCommit,