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/wasm-communication/messages.ts

@@ -509,6 +509,15 @@ export class TriggerImaginateGenerate extends JsMessage {
 	@Type(() => ImaginateBaseImage)
 	readonly baseImage!: ImaginateBaseImage | undefined;
 
+	@Type(() => ImaginateBaseImage)
+	readonly maskImage: ImaginateBaseImage | undefined;
+
+	readonly maskPaintMode!: string;
+
+	readonly maskBlurPx!: number;
+
+	readonly maskFillContent!: string;
+
 	readonly hostname!: string;
 
 	readonly refreshFrequency!: number;
@@ -670,7 +679,7 @@ export class UpdateDocumentLayerDetails extends JsMessage {
 export class LayerPanelEntry {
 	name!: string;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 
 	visible!: boolean;
@@ -764,7 +773,7 @@ export class CheckboxInput extends WidgetProps {
 
 	icon!: IconName;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -778,7 +787,7 @@ export class ColorInput extends WidgetProps {
 
 	disabled!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -818,7 +827,7 @@ export class DropdownInput extends WidgetProps {
 
 	disabled!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -831,7 +840,7 @@ export class FontInput extends WidgetProps {
 
 	disabled!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -844,7 +853,7 @@ export class IconButton extends WidgetProps {
 
 	active!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -853,10 +862,28 @@ export class IconLabel extends WidgetProps {
 
 	disabled!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
+export class LayerReferenceInput extends WidgetProps {
+	@Transform(({ value }: { value: BigUint64Array | undefined }) => (value ? String(value) : undefined))
+	value!: string | undefined;
+
+	layerName!: string | undefined;
+
+	layerType!: LayerType | undefined;
+
+	disabled!: boolean;
+
+	@Transform(({ value }: { value: string }) => value || undefined)
+	tooltip!: string | undefined;
+
+	// Styling
+
+	minWidth!: number;
+}
+
 export type NumberInputIncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
 export type NumberInputMode = "Increment" | "Range";
 
@@ -865,7 +892,7 @@ export class NumberInput extends WidgetProps {
 
 	label!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 
 	// Disabled
@@ -914,7 +941,7 @@ export class OptionalInput extends WidgetProps {
 
 	icon!: IconName;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -928,7 +955,7 @@ export class PopoverButton extends WidgetProps {
 
 	text!: string;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -975,7 +1002,7 @@ export class TextAreaInput extends WidgetProps {
 
 	disabled!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -990,7 +1017,7 @@ export class TextButton extends WidgetProps {
 
 	disabled!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -1021,7 +1048,7 @@ export class TextInput extends WidgetProps {
 
 	minWidth!: number;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -1042,7 +1069,7 @@ export class TextLabel extends WidgetProps {
 
 	multiline!: boolean;
 
-	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
+	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 }
 
@@ -1063,6 +1090,7 @@ const widgetSubTypes = [
 	{ value: FontInput, name: "FontInput" },
 	{ value: IconButton, name: "IconButton" },
 	{ value: IconLabel, name: "IconLabel" },
+	{ value: LayerReferenceInput, name: "LayerReferenceInput" },
 	{ value: NumberInput, name: "NumberInput" },
 	{ value: OptionalInput, name: "OptionalInput" },
 	{ value: PopoverButton, name: "PopoverButton" },