Integrate Stable Diffusion with the Imaginate layer (#784)

* Add AI Artist layer * WIP add a button to download the rendered folder under an AI Artist layer * Successfully download the correct image * Break out image downloading JS into helper function * Change file download from using data URLs to blob URLs * WIP rasterize to blob * Remove dimensions from AI Artist layer * Successfully draw rasterized image on layer after calculation * Working txt2img generation based on user prompt * Add img2img and the main parameters * Fix ability to rasterize multi-depth documents with blob URL images by switching them to base64 * Fix test * Rasterize with artboard background color * Allow aspect ratio stretch of AI Artist images * Add automatic resolution choosing * Add a terminate button, and make the lifecycle more robust * Add negative prompt * Add range bounds for parameter inputs * Add seed * Add tiling and restore faces * Add server status check, server hostname customization, and resizing layer to fit AI Artist resolution * Fix background color of infinite canvas rasterization * Escape prompt text sent in the JSON * Revoke blob URLs when cleared/replaced to reduce memory leak * Fix welcome screen logo color * Add PreferencesMessageHandler * Add persistent storage of preferences * Fix crash introduced in previous commit when moving mouse on page load * Add tooltips to the AI Artist layer properties * Integrate AI Artist tool into the raster section of the tool shelf * Add a refresh button to the connection status * Fix crash when generating and switching to a different document tab * Add persistent image storage to AI Artist layers and fix duplication bugs * Add a generate with random seed button * Simplify and standardize message names * Majorly improve robustness of networking code * Fix race condition causing default server hostname to show disconnected when app loads with AI Artist layer selected (probably, not confirmed fixed) * Clean up messages and function calls by changing arguments into structs * Update API to more recent server commit * Add support for picking the sampling method * Add machinery for filtering selected layers with type * Replace placeholder button icons * Improve the random icon by tilting the dice * Use selected_layers() instead of repeating that code * Fix borrow error * Change message flow in progress towards fixing #797 * Allow loading image on non-active document (fixes #797) * Reduce code duplication with rasterization * Add AI Artist tool and layer icons, and remove ugly node layer icon style * Rename "AI Artist" codename to "Imaginate" feature name Co-authored-by: otdavies <oliver@psyfer.io> Co-authored-by: 0hypercube <0hypercube@gmail.com>
2026-09-19 10:58:04 +08:00 · 2022-10-18 22:33:27 -07:00
parent 06acd45a81
commit 30719bdc72
118 changed files with 3767 additions and 678 deletions
--- a/frontend/src/components/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -22,6 +22,7 @@
 					class="row"
 					:class="{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: entry.disabled }"
 					:style="{ height: virtualScrollingEntryHeight || '20px' }"
+					:title="tooltip"
 					@click="() => !entry.disabled && onEntryClick(entry)"
 					@pointerenter="() => !entry.disabled && onEntryPointerEnter(entry)"
 					@pointerleave="() => !entry.disabled && onEntryPointerLeave(entry)"
@@ -184,6 +185,7 @@ const MenuList = defineComponent({
 		interactive: { type: Boolean as PropType<boolean>, default: false },
 		scrollableY: { type: Boolean as PropType<boolean>, default: false },
 		virtualScrollingEntryHeight: { type: Number as PropType<number>, default: 0 },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	data() {
 		return {
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -45,17 +45,14 @@
 						@click.alt="(e: MouseEvent) => e.stopPropagation()"
 					>
 						<LayoutRow class="layer-type-icon">
-							<IconLabel v-if="listing.entry.layerType === 'Folder'" :icon="'NodeFolder'" :iconStyle="'Node'" title="Folder" />
-							<IconLabel v-else-if="listing.entry.layerType === 'Image'" :icon="'NodeImage'" :iconStyle="'Node'" title="Image" />
-							<IconLabel v-else-if="listing.entry.layerType === 'Shape'" :icon="'NodeShape'" :iconStyle="'Node'" title="Shape" />
-							<IconLabel v-else-if="listing.entry.layerType === 'Text'" :icon="'NodeText'" :iconStyle="'Node'" title="Path" />
+							<IconLabel :icon="layerTypeData(listing.entry.layerType).icon" :title="layerTypeData(listing.entry.layerType).name" />
 						</LayoutRow>
 						<LayoutRow class="layer-name" @dblclick="() => onEditLayerName(listing)">
 							<input
 								data-text-input
 								type="text"
 								:value="listing.entry.name"
-								:placeholder="listing.entry.layerType"
+								:placeholder="layerTypeData(listing.entry.layerType).name"
 								:disabled="!listing.editingName"
 								@blur="() => onEditLayerNameDeselect(listing)"
 								@keydown.esc="onEditLayerNameDeselect(listing)"
@@ -268,7 +265,16 @@
 import { defineComponent, nextTick } from "vue";

 import { platformIsMac } from "@/utility-functions/platform";
-import { type LayerPanelEntry, defaultWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerTreeStructure, UpdateLayerTreeOptionsLayout } from "@/wasm-communication/messages";
+import {
+	type LayerType,
+	type LayerTypeData,
+	type LayerPanelEntry,
+	defaultWidgetLayout,
+	UpdateDocumentLayerDetails,
+	UpdateDocumentLayerTreeStructure,
+	UpdateLayerTreeOptionsLayout,
+	layerTypeData,
+} from "@/wasm-communication/messages";

 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -484,6 +490,9 @@ export default defineComponent({

 			recurse(updateDocumentLayerTreeStructure, this.layers, this.layerCache);
 		},
+		layerTypeData(layerType: LayerType): LayerTypeData {
+			return layerTypeData(layerType) || { name: "Error", icon: "NodeText" };
+		},
 	},
 	mounted() {
 		this.editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerTreeStructure, (updateDocumentLayerTreeStructure) => {
--- a/frontend/src/components/panels/NodeGraph.vue
+++ b/frontend/src/components/panels/NodeGraph.vue
@@ -28,7 +28,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeImage'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeImage'" />
 						<TextLabel>Image</TextLabel>
 					</div>
 				</div>
@@ -42,7 +42,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeMask'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeMask'" />
 						<TextLabel>Mask</TextLabel>
 					</div>
 					<div class="arguments">
@@ -69,7 +69,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeTransform'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeTransform'" />
 						<TextLabel>Transform</TextLabel>
 					</div>
 				</div>
@@ -83,7 +83,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeMotionBlur'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeMotionBlur'" />
 						<TextLabel>Motion Blur</TextLabel>
 					</div>
 					<div class="arguments">
@@ -110,7 +110,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeShape'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeShape'" />
 						<TextLabel>Shape</TextLabel>
 					</div>
 				</div>
@@ -124,7 +124,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeBrushwork'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeBrushwork'" />
 						<TextLabel>Brushwork</TextLabel>
 					</div>
 				</div>
@@ -138,7 +138,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeBlur'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeBlur'" />
 						<TextLabel>Blur</TextLabel>
 					</div>
 				</div>
@@ -152,7 +152,7 @@
 								<div></div>
 							</div>
 						</div>
-						<IconLabel :icon="'NodeGradient'" :iconStyle="'Node'" />
+						<IconLabel :icon="'NodeGradient'" />
 						<TextLabel>Gradient</TextLabel>
 					</div>
 				</div>
--- a/frontend/src/components/panels/Properties.vue
+++ b/frontend/src/components/panels/Properties.vue
@@ -21,12 +21,6 @@
 	.options-bar {
 		height: 32px;
 		flex: 0 0 auto;
-
-		.widget-row > .icon-label:first-of-type {
-			border-radius: 2px;
-			background: var(--color-node-background);
-			fill: var(--color-node-icon);
-		}
 	}

 	.sections {
--- a/frontend/src/components/widgets/buttons/PopoverButton.vue
+++ b/frontend/src/components/widgets/buttons/PopoverButton.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="popover-button">
-		<IconButton :action="() => onClick()" :icon="icon" :size="16" data-hover-menu-spawner />
+		<IconButton :action="() => onClick()" :icon="icon" :size="16" data-hover-menu-spawner :tooltip="tooltip" />
 		<FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'">
 			<slot></slot>
 		</FloatingMenu>
@@ -58,6 +58,7 @@ import IconButton from "@/components/widgets/buttons/IconButton.vue";
 export default defineComponent({
 	props: {
 		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
+		tooltip: { type: String as PropType<string | undefined>, required: false },

 		// Callbacks
 		action: { type: Function as PropType<() => void>, required: false },
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/frontend/src/components/widgets/buttons/TextButton.vue
@@ -5,6 +5,7 @@
 		:data-emphasized="emphasized || undefined"
 		:data-disabled="disabled || undefined"
 		data-text-button
+		:title="tooltip"
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@click="(e: MouseEvent) => action(e)"
 	>
@@ -71,23 +72,6 @@ import { type IconName } from "@/utility-functions/icons";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";

-export type TextButtonWidget = {
-	tooltip?: string;
-	message?: string | object;
-	callback?: () => void;
-	props: {
-		kind: "TextButton";
-		label: string;
-		icon?: string;
-		emphasized?: boolean;
-		minWidth?: number;
-		disabled?: boolean;
-
-		// Callbacks
-		// `action` is used via `IconButtonWidget.callback`
-	};
-};
-
 export default defineComponent({
 	props: {
 		label: { type: String as PropType<string>, required: true },
@@ -95,6 +79,7 @@ export default defineComponent({
 		emphasized: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },

 		// Callbacks
 		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
--- a/frontend/src/components/widgets/groups/WidgetSection.vue
+++ b/frontend/src/components/widgets/groups/WidgetSection.vue
@@ -61,10 +61,14 @@
 	.body {
 		margin: 0 4px;

-		.text-label {
+		.text-label:first-of-type {
 			flex: 0 0 30%;
 			text-align: right;
 		}
+
+		.text-button {
+			flex-grow: 1;
+		}
 	}
 }
 </style>
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -4,6 +4,7 @@
 			class="dropdown-box"
 			:class="{ disabled, open }"
 			:style="{ minWidth: `${minWidth}px` }"
+			:title="tooltip"
 			@click="() => !disabled && (open = true)"
 			@blur="(e: FocusEvent) => blur(e)"
 			@keydown="(e: KeyboardEvent) => keydown(e)"
@@ -115,6 +116,7 @@ export default defineComponent({
 		drawIcon: { type: Boolean as PropType<boolean>, default: false },
 		interactive: { type: Boolean as PropType<boolean>, default: true },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	data() {
 		return {
--- a/frontend/src/components/widgets/inputs/FieldInput.vue
+++ b/frontend/src/components/widgets/inputs/FieldInput.vue
@@ -10,6 +10,7 @@
 			v-model="inputValue"
 			:spellcheck="spellcheck"
 			:disabled="disabled"
+			:title="tooltip"
 			@focus="() => $emit('textFocused')"
 			@blur="() => $emit('textChanged')"
 			@change="() => $emit('textChanged')"
@@ -26,6 +27,7 @@
 			v-model="inputValue"
 			:spellcheck="spellcheck"
 			:disabled="disabled"
+			:title="tooltip"
 			@focus="() => $emit('textFocused')"
 			@blur="() => $emit('textChanged')"
 			@change="() => $emit('textChanged')"
@@ -55,6 +57,7 @@
 		padding: 3px 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		white-space: nowrap;
 	}

 	&:not(.disabled) label {
@@ -129,6 +132,7 @@ export default defineComponent({
 		spellcheck: { type: Boolean as PropType<boolean>, default: false },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 		textarea: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	data() {
 		return {
--- a/frontend/src/components/widgets/inputs/FontInput.vue
+++ b/frontend/src/components/widgets/inputs/FontInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="font-input">
-		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" tabindex="0" @click="toggleOpen" @keydown="keydown" data-hover-menu-spawner>
+		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" :title="tooltip" tabindex="0" @click="toggleOpen" @keydown="keydown" data-hover-menu-spawner>
 			<span>{{ activeEntry?.value || "" }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
 		</LayoutRow>
@@ -87,6 +87,7 @@ export default defineComponent({
 		fontStyle: { type: String as PropType<string>, required: true },
 		isStyle: { type: Boolean as PropType<boolean>, default: false },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	data() {
 		return {
--- a/frontend/src/components/widgets/inputs/NumberInput.vue
+++ b/frontend/src/components/widgets/inputs/NumberInput.vue
@@ -5,6 +5,8 @@
 		:label="label"
 		:spellcheck="false"
 		:disabled="disabled"
+		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
+		:tooltip="tooltip"
 		@textFocused="() => onTextFocused()"
 		@textChanged="() => onTextChanged()"
 		@cancelTextChange="() => onCancelTextChange()"
@@ -107,6 +109,8 @@ export default defineComponent({
 		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: "Add" },
 		incrementFactor: { type: Number as PropType<number>, default: 1 },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		tooltip: { type: String as PropType<string | undefined>, required: false },

 		// Callbacks
 		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },
@@ -122,7 +126,7 @@ export default defineComponent({
 		onTextFocused() {
 			if (this.value === undefined) this.text = "";
 			else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`;
-			else this.text = `${this.value}${this.unit}`;
+			else this.text = `${this.value}${unPluralize(this.unit, this.value)}`;

 			this.editing = true;

@@ -201,7 +205,7 @@ export default defineComponent({

 			const displayValue = Math.round(value * roundingPower) / roundingPower;

-			return `${displayValue}${this.unit}`;
+			return `${displayValue}${unPluralize(this.unit, value)}`;
 		},
 	},
 	watch: {
@@ -222,4 +226,9 @@ export default defineComponent({
 	},
 	components: { FieldInput },
 });
+
+function unPluralize(unit: string, value: number): string {
+	if (value === 1 && unit.endsWith("s")) return unit.slice(0, -1);
+	return unit;
+}
 </script>
--- a/frontend/src/components/widgets/inputs/TextAreaInput.vue
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.vue
@@ -3,10 +3,11 @@
 		:textarea="true"
 		class="text-area-input"
 		:class="{ 'has-label': label }"
-		v-model:value="inputValue"
 		:label="label"
 		:spellcheck="true"
 		:disabled="disabled"
+		:tooltip="tooltip"
+		v-model:value="inputValue"
 		@textFocused="() => onTextFocused()"
 		@textChanged="() => onTextChanged()"
 		@cancelTextChange="() => onCancelTextChange()"
@@ -27,6 +28,7 @@ export default defineComponent({
 		value: { type: String as PropType<string>, required: true },
 		label: { type: String as PropType<string>, required: false },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	data() {
 		return {
--- a/frontend/src/components/widgets/inputs/TextInput.vue
+++ b/frontend/src/components/widgets/inputs/TextInput.vue
@@ -5,6 +5,8 @@
 		:label="label"
 		:spellcheck="true"
 		:disabled="disabled"
+		:tooltip="tooltip"
+		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@textFocused="() => onTextFocused()"
 		@textChanged="() => onTextChanged()"
 		@cancelTextChange="() => onCancelTextChange()"
@@ -31,6 +33,8 @@ export default defineComponent({
 		value: { type: String as PropType<string>, required: true },
 		label: { type: String as PropType<string>, required: false },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	data() {
 		return {
--- a/frontend/src/components/widgets/labels/IconLabel.vue
+++ b/frontend/src/components/widgets/labels/IconLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<LayoutRow :class="['icon-label', iconSizeClass, iconStyleClass]">
+	<LayoutRow :class="['icon-label', iconSizeClass]" :title="tooltip">
 		<component :is="icon" />
 	</LayoutRow>
 </template>
@@ -23,35 +23,25 @@
 		width: 24px;
 		height: 24px;
 	}
-
-	&.node-style {
-		border-radius: 2px;
-		background: var(--color-node-background);
-		fill: var(--color-node-icon);
-	}
 }
 </style>

 <script lang="ts">
 import { defineComponent, type PropType } from "vue";

-import { type IconName, type IconStyle, ICONS, ICON_COMPONENTS } from "@/utility-functions/icons";
+import { type IconName, ICONS, ICON_COMPONENTS } from "@/utility-functions/icons";

 import LayoutRow from "@/components/layout/LayoutRow.vue";

 export default defineComponent({
 	props: {
 		icon: { type: String as PropType<IconName>, required: true },
-		iconStyle: { type: String as PropType<IconStyle | undefined>, required: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 	computed: {
 		iconSizeClass(): string {
 			return `size-${ICONS[this.icon].size}`;
 		},
-		iconStyleClass(): string {
-			if (!this.iconStyle || this.iconStyle === "Normal") return "";
-			return `${this.iconStyle.toLowerCase()}-style`;
-		},
 	},
 	components: {
 		LayoutRow,
--- a/frontend/src/components/widgets/labels/TextLabel.vue
+++ b/frontend/src/components/widgets/labels/TextLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<span class="text-label" :class="{ bold, italic, multiline, 'table-align': tableAlign }">
+	<span class="text-label" :class="{ bold, italic, multiline, 'table-align': tableAlign }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" :title="tooltip">
 		<slot></slot>
 	</span>
 </template>
@@ -37,7 +37,9 @@ export default defineComponent({
 		bold: { type: Boolean as PropType<boolean>, default: false },
 		italic: { type: Boolean as PropType<boolean>, default: false },
 		tableAlign: { type: Boolean as PropType<boolean>, default: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
 		multiline: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 });
 </script>
--- a/frontend/src/components/window/workspace/Panel.vue
+++ b/frontend/src/components/window/workspace/Panel.vue
@@ -3,15 +3,16 @@
 		<LayoutRow class="tab-bar" data-tab-bar :class="{ 'min-widths': tabMinWidths }">
 			<LayoutRow class="tab-group" :scrollableX="true">
 				<LayoutRow
-					class="tab"
-					:class="{ active: tabIndex === tabActiveIndex }"
-					data-tab
 					v-for="(tabLabel, tabIndex) in tabLabels"
 					:key="tabIndex"
+					class="tab"
+					:class="{ active: tabIndex === tabActiveIndex }"
+					:title="tabLabel.tooltip || null"
 					@click="(e: MouseEvent) => (e?.stopPropagation(), clickAction?.(tabIndex))"
 					@click.middle="(e: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))"
+					data-tab
 				>
-					<span>{{ tabLabel }}</span>
+					<span>{{ tabLabel.name }}</span>
 					<IconButton :action="(e: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</LayoutRow>
 			</LayoutRow>
@@ -31,7 +32,7 @@
 						<table>
 							<tr>
 								<td>
-									<TextButton :label="'New Document:'" :icon="'File'" :action="() => newDocument()" />
+									<TextButton :label="'New Document'" :icon="'File'" :action="() => newDocument()" />
 								</td>
 								<td>
 									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(true), { key: 'KeyN', label: 'N' }]]" />
@@ -39,7 +40,7 @@
 							</tr>
 							<tr>
 								<td>
-									<TextButton :label="'Open Document:'" :icon="'Folder'" :action="() => openDocument()" />
+									<TextButton :label="'Open Document'" :icon="'Folder'" :action="() => openDocument()" />
 								</td>
 								<td>
 									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(false), { key: 'KeyO', label: 'O' }]]" />
@@ -244,7 +245,7 @@ export default defineComponent({
 	props: {
 		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
 		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
-		tabLabels: { type: Array as PropType<string[]>, required: true },
+		tabLabels: { type: Array as PropType<{ name: string; tooltip?: string }[]>, required: true },
 		tabActiveIndex: { type: Number as PropType<number>, required: true },
 		panelType: { type: String as PropType<PanelTypes>, required: false },
 		clickAction: { type: Function as PropType<(index: number) => void>, required: false },
--- a/frontend/src/components/window/workspace/Workspace.vue
+++ b/frontend/src/components/window/workspace/Workspace.vue
@@ -7,7 +7,7 @@
 						:panelType="portfolio.state.documents.length > 0 ? 'Document' : undefined"
 						:tabCloseButtons="true"
 						:tabMinWidths="true"
-						:tabLabels="portfolio.state.documents.map((doc) => doc.displayName)"
+						:tabLabels="portfolio.state.documents.map((doc) => ({ name: doc.displayName, tooltip: doc.id }))"
 						:clickAction="(tabIndex: number) => editor.instance.selectDocument(portfolio.state.documents[tabIndex].id)"
 						:closeAction="(tabIndex: number) => editor.instance.closeDocumentWithConfirmation(portfolio.state.documents[tabIndex].id)"
 						:tabActiveIndex="portfolio.state.activeDocumentIndex"
@@ -16,17 +16,17 @@
 				</LayoutRow>
 				<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="(e: PointerEvent) => resizePanel(e)" v-if="nodeGraphVisible"></LayoutRow>
 				<LayoutRow class="workspace-grid-subdivision" v-if="nodeGraphVisible">
-					<Panel :panelType="'NodeGraph'" :tabLabels="['Node Graph']" :tabActiveIndex="0" />
+					<Panel :panelType="'NodeGraph'" :tabLabels="[{ name: 'Node Graph' }]" :tabActiveIndex="0" />
 				</LayoutRow>
 			</LayoutCol>
 			<LayoutCol class="workspace-grid-resize-gutter" @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutCol>
-			<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17">
+			<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.2">
 				<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
-					<Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" />
+					<Panel :panelType="'Properties'" :tabLabels="[{ name: 'Properties' }]" :tabActiveIndex="0" />
 				</LayoutRow>
 				<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutRow>
 				<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
-					<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
+					<Panel :panelType="'LayerTree'" :tabLabels="[{ name: 'Layer Tree' }]" :tabActiveIndex="0" />
 				</LayoutRow>
 			</LayoutCol>
 		</LayoutRow>