Font selection for text layers (#585)

* Add font dropdown * Add fonts * Font tool options * Fix tests * Replace http with https * Add variant selection * Do not embed default font * Use proxied font list API * Change default font to Merriweather * Remove outdated comment * Specify font once & load font into foreignobject * Fix tests * Rename variant to font_style * Change TextAreaInput to use FieldInput (WIP, breaks functionality) * Fix textarea functionality * Fix types * Add weight name mapping * Change labeling of "Italic" * Remove commented HTML node * Rename font "name" to "font_family" and "file" "font_file" * Fix errors * Fix fmt Co-authored-by: Keavon Chambers <keavon@keavon.com>
2026-09-26 04:28:12 +08:00 · 2022-04-21 09:50:44 +01:00
parent 916a575446
commit 239aa03453
36 changed files with 1029 additions and 253 deletions
@@ -0,0 +1,165 @@
+<template>
+	<LayoutRow class="dropdown-input">
+		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+			<span>{{ activeEntry.label }}</span>
+			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
+		</LayoutRow>
+		<MenuList
+			v-model:activeEntry="activeEntry"
+			@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
+			:menuEntries="menuEntries"
+			:direction="'Bottom'"
+			:scrollableY="true"
+			ref="menuList"
+		/>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.dropdown-input {
+	position: relative;
+
+	.dropdown-box {
+		align-items: center;
+		white-space: nowrap;
+		background: var(--color-1-nearblack);
+		height: 24px;
+		border-radius: 2px;
+
+		.dropdown-icon {
+			margin: 4px;
+			flex: 0 0 auto;
+		}
+
+		span {
+			margin: 0;
+			margin-left: 8px;
+			flex: 1 1 100%;
+		}
+
+		.dropdown-icon + span {
+			margin-left: 0;
+		}
+
+		.dropdown-arrow {
+			margin: 6px 2px;
+			flex: 0 0 auto;
+		}
+
+		&:hover,
+		&.open {
+			background: var(--color-6-lowergray);
+
+			span {
+				color: var(--color-f-white);
+			}
+
+			svg {
+				fill: var(--color-f-white);
+			}
+		}
+
+		&.open {
+			border-radius: 2px 2px 0 0;
+		}
+
+		&.disabled {
+			background: var(--color-2-mildblack);
+
+			span {
+				color: var(--color-8-uppergray);
+			}
+
+			svg {
+				fill: var(--color-8-uppergray);
+			}
+		}
+	}
+
+	.menu-list .floating-menu-container .floating-menu-content {
+		max-height: 400px;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { fontNames, getFontFile, getFontStyles } from "@/utilities/fonts";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+
+export default defineComponent({
+	emits: ["update:fontFamily", "update:fontStyle", "changeFont"],
+	props: {
+		fontFamily: { type: String as PropType<string>, required: true },
+		fontStyle: { type: String as PropType<string>, required: true },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		isStyle: { type: Boolean as PropType<boolean>, default: false },
+	},
+	data() {
+		const { menuEntries, activeEntry } = this.updateEntries();
+		return {
+			menuEntries,
+			activeEntry,
+			minWidth: 0,
+		};
+	},
+	methods: {
+		clickDropdownBox() {
+			if (!this.disabled) (this.$refs.menuList as typeof MenuList).setOpen();
+		},
+		selectFont(newName: string) {
+			if (this.isStyle) this.$emit("update:fontStyle", newName);
+			else this.$emit("update:fontFamily", newName);
+
+			{
+				const fontFamily = this.isStyle ? this.fontFamily : newName;
+				const fontStyle = this.isStyle ? newName : getFontStyles(newName)[0];
+				const fontFile = getFontFile(fontFamily, fontStyle);
+				this.$emit("changeFont", { fontFamily, fontStyle, fontFile });
+			}
+		},
+		onWidthChanged(newWidth: number) {
+			this.minWidth = newWidth;
+		},
+		updateEntries(): { menuEntries: SectionsOfMenuListEntries; activeEntry: MenuListEntry } {
+			let selectedIndex = -1;
+			const menuEntries: SectionsOfMenuListEntries = [
+				(this.isStyle ? getFontStyles(this.fontFamily) : fontNames()).map((name, index) => {
+					if (name === (this.isStyle ? this.fontStyle : this.fontFamily)) selectedIndex = index;
+
+					const result: MenuListEntry = {
+						label: name,
+						action: (): void => this.selectFont(name),
+					};
+					return result;
+				}),
+			];
+
+			const activeEntry = selectedIndex < 0 ? { label: "-" } : menuEntries.flat()[selectedIndex];
+
+			return { menuEntries, activeEntry };
+		},
+	},
+	watch: {
+		fontFamily() {
+			const { menuEntries, activeEntry } = this.updateEntries();
+			this.menuEntries = menuEntries;
+			this.activeEntry = activeEntry;
+		},
+		fontStyle() {
+			const { menuEntries, activeEntry } = this.updateEntries();
+			this.menuEntries = menuEntries;
+			this.activeEntry = activeEntry;
+		},
+	},
+	components: {
+		IconLabel,
+		MenuList,
+		LayoutRow,
+	},
+});
+</script>