Add inpainting and outpainting to Imaginate (#864)

* Do not select layer immediatly on drag

* Add LayerReferenceInput MVP widget

* Properties Panel

* Fix dragging marker flicker

* Change mask shape to outline

* Add mask rendering

* Simplify select code

* Remove colours

* Fix inpaint/outpaint and rearrage widget UX

* Add mask blur and mask starting fill parameters

* Guard for the case when the layer is missing

* Add icon to LayerReferenceInput to finalize its UI

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/panels/LayerTree.vue

@@ -1,5 +1,5 @@
 <template>
-	<LayoutCol class="layer-tree">
+	<LayoutCol class="layer-tree" @dragleave="dragInPanel = false">
 		<LayoutRow class="options-bar" :scrollableX="true">
 			<WidgetLayout :layout="layerTreeOptionsLayout" />
 		</LayoutRow>
@@ -31,7 +31,8 @@
 					></button>
 					<LayoutRow
 						class="layer"
-						:class="{ selected: listing.entry.layerMetadata.selected }"
+						:class="{ selected: fakeHighlight ? fakeHighlight.includes(listing.entry.path) : listing.entry.layerMetadata.selected }"
+						:data-layer="String(listing.entry.path)"
 						:data-index="index"
 						:title="listing.entry.tooltip"
 						:draggable="draggable"
@@ -65,7 +66,11 @@
 					</LayoutRow>
 				</LayoutRow>
 			</LayoutCol>
-			<div class="insert-mark" v-if="draggingData && !draggingData.highlightFolder" :style="{ left: markIndent(draggingData.insertFolder), top: markTopOffset(draggingData.markerHeight) }"></div>
+			<div
+				class="insert-mark"
+				v-if="draggingData && !draggingData.highlightFolder && dragInPanel"
+				:style="{ left: markIndent(draggingData.insertFolder), top: markTopOffset(draggingData.markerHeight) }"
+			></div>
 		</LayoutRow>
 	</LayoutCol>
 </template>
@@ -258,6 +263,7 @@
 			margin-top: -2px;
 			height: 5px;
 			z-index: 1;
+			pointer-events: none;
 		}
 	}
 }
@@ -266,6 +272,7 @@
 <script lang="ts">
 import { defineComponent, nextTick } from "vue";
 
+import { beginDraggingElement } from "@/io-managers/drag";
 import { platformIsMac } from "@/utility-functions/platform";
 import {
 	type LayerType,
@@ -291,7 +298,7 @@ const LAYER_INDENT = 16;
 const INSERT_MARK_MARGIN_LEFT = 4 + 32 + LAYER_INDENT;
 const INSERT_MARK_OFFSET = 2;
 
-type DraggingData = { insertFolder: BigUint64Array; insertIndex: number; highlightFolder: boolean; markerHeight: number };
+type DraggingData = { select?: () => void; insertFolder: BigUint64Array; insertIndex: number; highlightFolder: boolean; markerHeight: number };
 
 export default defineComponent({
 	inject: ["editor"],
@@ -304,6 +311,8 @@ export default defineComponent({
 			// Interactive dragging
 			draggable: true,
 			draggingData: undefined as undefined | DraggingData,
+			fakeHighlight: undefined as undefined | BigUint64Array[],
+			dragInPanel: false,
 
 			// Layouts
 			layerTreeOptionsLayout: defaultWidgetLayout(),
@@ -371,7 +380,7 @@ export default defineComponent({
 		async deselectAllLayers() {
 			this.editor.instance.deselectAllLayers();
 		},
-		calculateDragIndex(tree: HTMLDivElement, clientY: number): DraggingData {
+		calculateDragIndex(tree: HTMLDivElement, clientY: number, select?: () => void): DraggingData {
 			const treeChildren = tree.children;
 			const treeOffset = tree.getBoundingClientRect().top;
 
@@ -430,11 +439,21 @@ export default defineComponent({
 
 			markerHeight -= treeOffset;
 
-			return { insertFolder, insertIndex, highlightFolder, markerHeight };
+			return { select, insertFolder, insertIndex, highlightFolder, markerHeight };
 		},
 		async dragStart(event: DragEvent, listing: LayerListingInfo) {
 			const layer = listing.entry;
-			if (!layer.layerMetadata.selected) this.selectLayer(event.ctrlKey, event.metaKey, event.shiftKey, listing, event);
+			this.dragInPanel = true;
+			if (!layer.layerMetadata.selected) {
+				this.fakeHighlight = [layer.path];
+			}
+			const select = (): void => {
+				if (!layer.layerMetadata.selected) this.selectLayer(false, false, false, listing, event);
+			};
+
+			const target = (event.target || undefined) as HTMLElement | undefined;
+			const draggingELement = (target?.closest("[data-layer]") || undefined) as HTMLElement | undefined;
+			if (draggingELement) beginDraggingElement(draggingELement);
 
 			// Set style of cursor for drag
 			if (event.dataTransfer) {
@@ -443,23 +462,26 @@ export default defineComponent({
 			}
 
 			const tree: HTMLDivElement | undefined = (this.$refs.list as typeof LayoutCol | undefined)?.$el;
-			if (tree) this.draggingData = this.calculateDragIndex(tree, event.clientY);
+			if (tree) this.draggingData = this.calculateDragIndex(tree, event.clientY, select);
 		},
 		updateInsertLine(event: DragEvent) {
 			// Stop the drag from being shown as cancelled
 			event.preventDefault();
+			this.dragInPanel = true;
 
 			const tree: HTMLDivElement | undefined = (this.$refs.list as typeof LayoutCol | undefined)?.$el;
-			if (tree) this.draggingData = this.calculateDragIndex(tree, event.clientY);
+			if (tree) this.draggingData = this.calculateDragIndex(tree, event.clientY, this.draggingData?.select);
 		},
 		async drop() {
-			if (this.draggingData) {
-				const { insertFolder, insertIndex } = this.draggingData;
+			if (this.draggingData && this.dragInPanel) {
+				const { select, insertFolder, insertIndex } = this.draggingData;
 
+				select?.();
 				this.editor.instance.moveLayerInTree(insertFolder, insertIndex);
-
-				this.draggingData = undefined;
 			}
+			this.draggingData = undefined;
+			this.fakeHighlight = undefined;
+			this.dragInPanel = false;
 		},
 		rebuildLayerTree(updateDocumentLayerTreeStructure: UpdateDocumentLayerTreeStructure) {
 			const layerWithNameBeingEdited = this.layers.find((layer: LayerListingInfo) => layer.editingName);
@@ -494,7 +516,7 @@ export default defineComponent({
 			recurse(updateDocumentLayerTreeStructure, this.layers, this.layerCache);
 		},
 		layerTypeData(layerType: LayerType): LayerTypeData {
-			return layerTypeData(layerType) || { name: "Error", icon: "NodeText" };
+			return layerTypeData(layerType) || { name: "Error", icon: "Info" };
 		},
 	},
 	mounted() {

frontend/src/components/widgets/WidgetRow.vue

@@ -28,6 +28,7 @@
 			/>
 			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
 			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
+			<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(component.widgetId, value)" />
 			<NumberInput
 				v-if="component.props.kind === 'NumberInput'"
 				v-bind="component.props"
@@ -109,6 +110,7 @@ import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import ColorInput from "@/components/widgets/inputs/ColorInput.vue";
 import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
 import FontInput from "@/components/widgets/inputs/FontInput.vue";
+import LayerReferenceInput from "@/components/widgets/inputs/LayerReferenceInput.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
 import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
@@ -170,6 +172,7 @@ export default defineComponent({
 		FontInput,
 		IconButton,
 		IconLabel,
+		LayerReferenceInput,
 		NumberInput,
 		OptionalInput,
 		PivotAssist,

frontend/src/components/widgets/inputs/LayerReferenceInput.vue

@@ -0,0 +1,160 @@
+<template>
+	<LayoutRow
+		class="layer-reference-input"
+		:class="{ disabled, droppable, 'sharp-right-corners': sharpRightCorners }"
+		:title="tooltip"
+		@dragover="(e: DragEvent) => !disabled && dragOver(e)"
+		@dragleave="() => !disabled && dragLeave()"
+		@drop="(e: DragEvent) => !disabled && drop(e)"
+	>
+		<template v-if="value === undefined || droppable">
+			<LayoutRow class="drop-zone"></LayoutRow>
+			<TextLabel :italic="true">{{ droppable ? "Drop" : "Drag" }} Layer Here</TextLabel>
+		</template>
+		<template v-if="value !== undefined && !droppable">
+			<IconLabel v-if="layerName !== undefined && layerType" :icon="layerTypeData(layerType).icon" class="layer-icon" />
+			<TextLabel v-if="layerName !== undefined && layerType" :italic="layerName === ''" class="layer-name">{{ layerName || layerTypeData(layerType).name }}</TextLabel>
+			<TextLabel :bold="true" :italic="true" v-else class="missing">Layer Missing</TextLabel>
+		</template>
+		<IconButton v-if="value !== undefined && !droppable" :icon="'CloseX'" :size="16" :disabled="disabled" :action="() => clearLayer()" />
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.layer-reference-input {
+	position: relative;
+	flex: 1 0 auto;
+	height: 24px;
+	border-radius: 2px;
+	background: var(--color-1-nearblack);
+
+	.drop-zone {
+		pointer-events: none;
+		border: 1px dashed var(--color-5-dullgray);
+		border-radius: 1px;
+		position: absolute;
+		top: 2px;
+		bottom: 2px;
+		left: 2px;
+		right: 2px;
+	}
+
+	&.droppable .drop-zone {
+		border: 1px dashed var(--color-e-nearwhite);
+	}
+
+	.layer-icon {
+		margin: 4px 8px;
+
+		+ .text-label {
+			padding-left: 0;
+		}
+	}
+
+	.text-label {
+		line-height: 18px;
+		padding: 3px calc(8px + 2px);
+		width: 100%;
+		text-align: center;
+
+		&.missing {
+			color: var(--color-data-unused1);
+		}
+
+		&.layer-name {
+			text-align: left;
+		}
+	}
+
+	.icon-button {
+		margin: 4px;
+		margin-left: 0;
+	}
+
+	&.disabled {
+		background: var(--color-2-mildblack);
+
+		.drop-zone {
+			border: 1px dashed var(--color-4-dimgray);
+		}
+
+		.text-label {
+			color: var(--color-8-uppergray);
+		}
+
+		.icon-label svg {
+			fill: var(--color-8-uppergray);
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { currentDraggingElement } from "@/io-managers/drag";
+
+import type { LayerType, LayerTypeData } from "@/wasm-communication/messages";
+import { layerTypeData } from "@/wasm-communication/messages";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+
+export default defineComponent({
+	emits: ["update:value"],
+	props: {
+		value: { type: String as PropType<string | undefined>, required: false },
+		layerName: { type: String as PropType<string | undefined>, required: false },
+		layerType: { type: String as PropType<LayerType | undefined>, required: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+	},
+	data() {
+		return {
+			hoveringDrop: false,
+		};
+	},
+	computed: {
+		droppable() {
+			return this.hoveringDrop && currentDraggingElement();
+		},
+	},
+	methods: {
+		dragOver(e: DragEvent): void {
+			this.hoveringDrop = true;
+
+			e.preventDefault();
+		},
+		dragLeave(): void {
+			this.hoveringDrop = false;
+		},
+		drop(e: DragEvent): void {
+			this.hoveringDrop = false;
+
+			const element = currentDraggingElement();
+			const layerPath = element?.getAttribute("data-layer") || undefined;
+
+			if (layerPath) {
+				e.preventDefault();
+
+				this.$emit("update:value", layerPath);
+			}
+		},
+		clearLayer(): void {
+			this.$emit("update:value", undefined);
+		},
+		layerTypeData(layerType: LayerType): LayerTypeData {
+			return layerTypeData(layerType) || { name: "Error", icon: "Info" };
+		},
+	},
+	components: {
+		IconButton,
+		IconLabel,
+		LayoutRow,
+		TextLabel,
+	},
+});
+</script>

frontend/src/components/widgets/inputs/OptionalInput.vue

@@ -1,5 +1,5 @@
 <template>
-	<LayoutRow class="optional-input">
+	<LayoutRow class="optional-input" :class="disabled">
 		<CheckboxInput :checked="checked" :disabled="disabled" @input="(e: Event) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
 	</LayoutRow>
 </template>
@@ -18,6 +18,10 @@
 		border-radius: 2px 0 0 2px;
 		box-sizing: border-box;
 	}
+
+	&.disabled label {
+		border: 1px solid var(--color-4-dimgray);
+	}
 }
 </style>