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

Add font menu previews and virtual scrolling (#650)

Browse Source 
* Keyboard menu navigation

* Fix dropdown keyboard navigation

* Fix merge error

* Some code review

* Interactive dropdowns

* Query by data attr not class name

* Add locking behaviour

* Add font prieviews

* Remove blank line in css

* Use default for interactive in struct

* Use menulist for fontinput

* Polish

* Rename state -> manager

* Code review

* Cleanup fontinput

* More cleanup

* Make fonts.ts an empty state

* Fix regression

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-06-10 15:21:10 -07:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent be717b3bd4
commit 42dbed9315
4 changed files with 151 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/state-providers/fonts.ts
+17 -12
View File
@@ -1,17 +1,27 @@
import { reactive, readonly } from "vue";
import { reactive } from "vue";
import { Editor } from "@/wasm-communication/editor";
import { TriggerFontLoad } from "@/wasm-communication/messages";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createFontsState(editor: Editor) {
const state = reactive({
fontNames: [] as string[],
});
const state = reactive({});
async function getFontStyles(fontFamily: string): Promise<string[]> {
function createURL(font: string): URL {
const url = new URL("https://fonts.googleapis.com/css2");
url.searchParams.set("display", "swap");
url.searchParams.set("family", font);
url.searchParams.set("text", font);
return url;
}
async function fontNames(): Promise<{ name: string; url: URL | undefined }[]> {
return (await fontList).map((font) => ({ name: font.family, url: createURL(font.family) }));
}
async function getFontStyles(fontFamily: string): Promise<{ name: string; url: URL | undefined }[]> {
const font = (await fontList).find((value) => value.family === fontFamily);
return font?.variants || [];
return font?.variants.map((variant) => ({ name: variant, url: undefined })) || [];
}
async function getFontFileUrl(fontFamily: string, fontStyle: string): Promise<string | undefined> {
@@ -58,17 +68,12 @@ export function createFontsState(editor: Editor) {
const files = new Map(font.variants.map((x) => [formatFontStyleName(x), font.files[x]]));
return { family, variants, files };
});
state.fontNames = result.map((value) => value.family);
resolve(result);
});
});
return {
state: readonly(state) as typeof state,
getFontStyles,
getFontFileUrl,
};
return { state, fontNames, getFontStyles, getFontFileUrl };
}
export type FontsState = ReturnType<typeof createFontsState>;