From dee938a283e76e456239cd256149abfcb62a269d Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Thu, 8 Feb 2024 09:31:20 +0800
Subject: [PATCH 01/15] DropdownInput support preview

---
 .../node_graph_message_handler/node_properties.rs   |  4 ++--
 .../src/components/floating-menus/MenuList.svelte   |  4 +++-
 frontend/src/components/widgets/WidgetSpan.svelte   | 13 ++++++++++++-
 .../components/widgets/inputs/DropdownInput.svelte  | 12 +++++++++++-
 frontend/wasm/src/editor_api.rs                     |  7 +++++++
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
index 8ce739cebd9..591a6a29cc2 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -908,7 +908,7 @@ pub fn black_and_white_properties(document_node: &DocumentNode, node_id: NodeId,
 pub fn blend_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let backdrop = color_widget(document_node, node_id, 1, "Backdrop", ColorButton::default(), true);
 	let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true);
-	let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().mode_range().min(0.).max(100.).unit("%"), true);
+	let opacity = number_widget(document_node, node_id, 3, "Opac", NumberInput::default().mode_range().min(0.).max(100.).unit("%"), true);
 
 	vec![backdrop, blend_mode, LayoutGroup::Row { widgets: opacity }]
 }
@@ -2289,7 +2289,7 @@ pub fn color_fill_properties(document_node: &DocumentNode, node_id: NodeId, _con
 pub fn color_overlay_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let color = color_widget(document_node, node_id, 1, "Color", ColorButton::default(), true);
 	let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true);
-	let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().percentage(), true);
+	let opacity = number_widget(document_node, node_id, 3, "Opaci", NumberInput::default().percentage(), true);
 
 	vec![color, blend_mode, LayoutGroup::Row { widgets: opacity }]
 }
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 93727bc262c..c97143ad777 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -19,7 +19,7 @@
 	let scroller: LayoutCol | undefined;
 	let searchTextInput: TextInput | undefined;
 
-	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; naturalWidth: number }>();
+	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; menuHoverIn: MenuListEntry; menuHoverOut: undefined; naturalWidth: number }>();
 
 	export let entries: MenuListEntry[][];
 	export let activeEntry: MenuListEntry | undefined = undefined;
@@ -164,6 +164,7 @@
 	}
 
 	function onEntryPointerEnter(menuListEntry: MenuListEntry) {
+		dispatch("menuHoverIn", menuListEntry);
 		if (!menuListEntry.children?.length) return;
 
 		let childReference = getChildReference(menuListEntry);
@@ -174,6 +175,7 @@
 	}
 
 	function onEntryPointerLeave(menuListEntry: MenuListEntry) {
+		dispatch("menuHoverOut");
 		if (!menuListEntry.children?.length) return;
 
 		let childReference = getChildReference(menuListEntry);
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 943e14cb3c9..65f8ef18dea 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -66,9 +66,15 @@
 	}
 
 	function widgetValueCommitAndUpdate(index: number, value: unknown) {
+		console.log("widget value commit and udpdate");
 		editor.instance.widgetValueCommitAndUpdate(layoutTarget, widgets[index].widgetId, value);
 	}
 
+	function widgetValueRevert() {
+		console.log("widget value revert");
+		editor.instance.widgetValueRevert();
+	}
+
 	// TODO: This seems to work, but verify the correctness and terseness of this, it's adapted from https://stackoverflow.com/a/67434028/775283
 	function exclude<T extends object>(props: T, additional?: (keyof T)[]): Omit<T, typeof additional extends Array<infer K> ? K : never> {
 		const exclusions = ["kind", ...(additional || [])];
@@ -96,7 +102,12 @@
 		{/if}
 		{@const dropdownInput = narrowWidgetProps(component.props, "DropdownInput")}
 		{#if dropdownInput}
-			<DropdownInput {...exclude(dropdownInput)} on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<DropdownInput
+				{...exclude(dropdownInput)}
+				on:menuHoverIn={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
+				on:menuHoverOut={() => widgetValueRevert()}
+				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
+			/>
 		{/if}
 		{@const fontInput = narrowWidgetProps(component.props, "FontInput")}
 		{#if fontInput}
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 2063be49d08..afe8d80a894 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -10,7 +10,7 @@
 
 	const DASH_ENTRY = { value: "", label: "-" };
 
-	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
+	const dispatch = createEventDispatcher<{ selectedIndex: number; menuHoverIn: number; menuHoverOut: undefined }>();
 
 	let menuList: MenuList | undefined;
 	let self: LayoutRow | undefined;
@@ -45,6 +45,14 @@
 		}
 	}
 
+	function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
+		dispatch("menuHoverIn", entries.flat().indexOf(hoveredEntry));
+	}
+
+	function dispatchHoverOutEntry() {
+		dispatch("menuHoverOut");
+	}
+
 	function makeActiveEntry(): MenuListEntry {
 		const allEntries = entries.flat();
 
@@ -81,6 +89,8 @@
 		on:naturalWidth={({ detail }) => (minWidth = detail)}
 		{activeEntry}
 		on:activeEntry={({ detail }) => (activeEntry = detail)}
+		on:menuHoverIn={({ detail }) => dispatchHoverInEntry(detail)}
+		on:menuHoverOut={() => dispatchHoverOutEntry()}
 		{open}
 		on:open={({ detail }) => (open = detail)}
 		{entries}
diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs
index 99631d04268..b58ae6cb20a 100644
--- a/frontend/wasm/src/editor_api.rs
+++ b/frontend/wasm/src/editor_api.rs
@@ -350,6 +350,13 @@ impl JsEditorHandle {
 		Ok(())
 	}
 
+	/// Update the value of a given UI widget, and commit it to the history
+	#[wasm_bindgen(js_name = widgetValueRevert)]
+	pub fn widget_value_revert(&self) -> Result<(), JsValue> {
+		self.dispatch(DocumentMessage::Undo);
+		Ok(())
+	}
+
 	#[wasm_bindgen(js_name = loadPreferences)]
 	pub fn load_preferences(&self, preferences: String) {
 		let message = PreferencesMessage::Load { preferences };

From 21e7833c1770cb96cbe07ca66bd8bfb83e0ca28a Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Thu, 8 Feb 2024 15:08:45 +0800
Subject: [PATCH 02/15] fix typo and rm logs

---
 .../node_graph/node_graph_message_handler/node_properties.rs  | 4 ++--
 frontend/src/components/widgets/WidgetSpan.svelte             | 2 --
 frontend/src/components/widgets/inputs/TextAreaInput.svelte   | 1 +
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
index 591a6a29cc2..8ce739cebd9 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -908,7 +908,7 @@ pub fn black_and_white_properties(document_node: &DocumentNode, node_id: NodeId,
 pub fn blend_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let backdrop = color_widget(document_node, node_id, 1, "Backdrop", ColorButton::default(), true);
 	let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true);
-	let opacity = number_widget(document_node, node_id, 3, "Opac", NumberInput::default().mode_range().min(0.).max(100.).unit("%"), true);
+	let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().mode_range().min(0.).max(100.).unit("%"), true);
 
 	vec![backdrop, blend_mode, LayoutGroup::Row { widgets: opacity }]
 }
@@ -2289,7 +2289,7 @@ pub fn color_fill_properties(document_node: &DocumentNode, node_id: NodeId, _con
 pub fn color_overlay_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let color = color_widget(document_node, node_id, 1, "Color", ColorButton::default(), true);
 	let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true);
-	let opacity = number_widget(document_node, node_id, 3, "Opaci", NumberInput::default().percentage(), true);
+	let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().percentage(), true);
 
 	vec![color, blend_mode, LayoutGroup::Row { widgets: opacity }]
 }
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 65f8ef18dea..b3e576233e8 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -66,12 +66,10 @@
 	}
 
 	function widgetValueCommitAndUpdate(index: number, value: unknown) {
-		console.log("widget value commit and udpdate");
 		editor.instance.widgetValueCommitAndUpdate(layoutTarget, widgets[index].widgetId, value);
 	}
 
 	function widgetValueRevert() {
-		console.log("widget value revert");
 		editor.instance.widgetValueRevert();
 	}
 
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index 440fb3533c6..ab4e4bb8291 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -20,6 +20,7 @@
 	// Called only when `value` is changed from the <textarea> element via user input and committed, either
 	// via the `change` event or when the <input> element is unfocused (with the `blur` event binding)
 	function onTextChanged() {
+		console.log(222222222);
 		// The `unFocus()` call in `onTextChangeCanceled()` causes itself to be run again, so this if statement skips a second run
 		if (!editing) return;
 

From 5dcba9eb9e7ddd3289bda6e9c3d63bbbfb3ba9b7 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Thu, 8 Feb 2024 20:01:45 +0800
Subject: [PATCH 03/15] Add previewable flag

---
 .../layout/utility_types/widgets/input_widgets.rs |  2 ++
 .../node_graph_message_handler/node_properties.rs |  1 +
 .../src/components/floating-menus/MenuList.svelte |  6 +++---
 frontend/src/components/widgets/WidgetSpan.svelte |  4 ++--
 .../widgets/inputs/DropdownInput.svelte           | 15 ++++++++++-----
 .../widgets/inputs/TextAreaInput.svelte           |  1 -
 6 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
index 109f40e2b5f..aad3e101365 100644
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
@@ -67,6 +67,8 @@ pub struct DropdownInput {
 
 	pub tooltip: String,
 
+	pub previewable: bool,
+
 	#[serde(skip)]
 	pub tooltip_shortcut: Option<ActionKeys>,
 	//
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
index 8ce739cebd9..9cd9eb0869e 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -560,6 +560,7 @@ fn blend_mode(document_node: &DocumentNode, node_id: NodeId, index: usize, name:
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			DropdownInput::new(entries)
 				.selected_index(blend_mode.index_in_list_svg_subset().map(|index| index as u32))
+				.previewable(true)
 				.widget_holder(),
 		]);
 	}
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index c97143ad777..7262cc2a621 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -19,7 +19,7 @@
 	let scroller: LayoutCol | undefined;
 	let searchTextInput: TextInput | undefined;
 
-	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; menuHoverIn: MenuListEntry; menuHoverOut: undefined; naturalWidth: number }>();
+	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; hoverInEntry: MenuListEntry; hoverOutEntry: undefined; naturalWidth: number }>();
 
 	export let entries: MenuListEntry[][];
 	export let activeEntry: MenuListEntry | undefined = undefined;
@@ -164,7 +164,7 @@
 	}
 
 	function onEntryPointerEnter(menuListEntry: MenuListEntry) {
-		dispatch("menuHoverIn", menuListEntry);
+		dispatch("hoverInEntry", menuListEntry);
 		if (!menuListEntry.children?.length) return;
 
 		let childReference = getChildReference(menuListEntry);
@@ -175,7 +175,7 @@
 	}
 
 	function onEntryPointerLeave(menuListEntry: MenuListEntry) {
-		dispatch("menuHoverOut");
+		dispatch("hoverOutEntry");
 		if (!menuListEntry.children?.length) return;
 
 		let childReference = getChildReference(menuListEntry);
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index b3e576233e8..1a075c549c9 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -102,8 +102,8 @@
 		{#if dropdownInput}
 			<DropdownInput
 				{...exclude(dropdownInput)}
-				on:menuHoverIn={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
-				on:menuHoverOut={() => widgetValueRevert()}
+				on:hoverInEntry={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
+				on:hoverOutEntry={() => widgetValueRevert()}
 				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
 			/>
 		{/if}
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index afe8d80a894..c09bf702ada 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -10,7 +10,7 @@
 
 	const DASH_ENTRY = { value: "", label: "-" };
 
-	const dispatch = createEventDispatcher<{ selectedIndex: number; menuHoverIn: number; menuHoverOut: undefined }>();
+	const dispatch = createEventDispatcher<{ selectedIndex: number; hoverInEntry: number; hoverOutEntry: undefined }>();
 
 	let menuList: MenuList | undefined;
 	let self: LayoutRow | undefined;
@@ -21,6 +21,7 @@
 	export let interactive = true;
 	export let disabled = false;
 	export let tooltip: string | undefined = undefined;
+	export let previewable = false;
 
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;
@@ -46,11 +47,15 @@
 	}
 
 	function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
-		dispatch("menuHoverIn", entries.flat().indexOf(hoveredEntry));
+		if (previewable) {
+			dispatch("hoverInEntry", entries.flat().indexOf(hoveredEntry));
+		}
 	}
 
 	function dispatchHoverOutEntry() {
-		dispatch("menuHoverOut");
+		if (previewable) {
+			dispatch("hoverOutEntry");
+		}
 	}
 
 	function makeActiveEntry(): MenuListEntry {
@@ -89,8 +94,8 @@
 		on:naturalWidth={({ detail }) => (minWidth = detail)}
 		{activeEntry}
 		on:activeEntry={({ detail }) => (activeEntry = detail)}
-		on:menuHoverIn={({ detail }) => dispatchHoverInEntry(detail)}
-		on:menuHoverOut={() => dispatchHoverOutEntry()}
+		on:hoverInEntry={({ detail }) => dispatchHoverInEntry(detail)}
+		on:hoverOutEntry={() => dispatchHoverOutEntry()}
 		{open}
 		on:open={({ detail }) => (open = detail)}
 		{entries}
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index ab4e4bb8291..440fb3533c6 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -20,7 +20,6 @@
 	// Called only when `value` is changed from the <textarea> element via user input and committed, either
 	// via the `change` event or when the <input> element is unfocused (with the `blur` event binding)
 	function onTextChanged() {
-		console.log(222222222);
 		// The `unFocus()` call in `onTextChangeCanceled()` causes itself to be run again, so this if statement skips a second run
 		if (!editing) return;
 

From 89f8ce08539fde484312127bfa7439f8dd1c17d7 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Thu, 8 Feb 2024 20:50:24 +0800
Subject: [PATCH 04/15] fix cr typos

---
 frontend/src/components/floating-menus/ColorPicker.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 470049733ae..d60f947d144 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -31,7 +31,7 @@
 
 	const editor = getContext<Editor>("editor");
 
-	const dispatch = createEventDispatcher<{ color: Color; start: undefined }>();
+	const dispatch = createEventDispatcher<{ color: Color; startHistoryTransaction: undefined }>();
 
 	export let color: Color;
 	export let allowNone = false;
@@ -150,7 +150,7 @@
 		document.addEventListener("pointermove", onPointerMove);
 		document.addEventListener("pointerup", onPointerUp);
 
-		dispatch("start");
+		dispatch("startHistoryTransaction");
 	}
 
 	function removeEvents() {

From 140b4ec3140dcf925530c9de7956b90d0289572c Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Fri, 9 Feb 2024 00:19:39 +0800
Subject: [PATCH 05/15] Improve color button history

---
 .../components/floating-menus/ColorPicker.svelte   | 14 +++++++++++++-
 .../components/widgets/inputs/NumberInput.svelte   |  7 +++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index d60f947d144..1bd68cdeb6a 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -314,7 +314,10 @@
 				<LayoutRow>
 					<TextInput
 						value={newColor.toHexOptionalAlpha() || "-"}
-						on:commitText={({ detail }) => setColorCode(detail)}
+						on:commitText={({ detail }) => {
+							dispatch("startHistoryTransaction");
+							setColorCode(detail);
+						}}
 						centered={true}
 						tooltip={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."}
 						bind:this={hexCodeInputWidget}
@@ -335,6 +338,9 @@
 								strength = detail;
 								setColorRGB(channel, detail);
 							}}
+							on:startHistoryTransaction={() => {
+								dispatch("startHistoryTransaction");
+							}}
 							min={0}
 							max={255}
 							minWidth={56}
@@ -359,6 +365,9 @@
 								strength = detail;
 								setColorHSV(channel, detail);
 							}}
+							on:startHistoryTransaction={() => {
+								dispatch("startHistoryTransaction");
+							}}
 							min={0}
 							max={channel === "h" ? 360 : 100}
 							unit={channel === "h" ? "°" : "%"}
@@ -379,6 +388,9 @@
 					if (detail !== undefined) alpha = detail / 100;
 					setColorAlphaPercent(detail);
 				}}
+				on:startHistoryTransaction={() => {
+					dispatch("startHistoryTransaction");
+				}}
 				min={0}
 				max={100}
 				rangeMin={0}
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 3a6e686beae..30e1e7c147e 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -194,6 +194,13 @@
 
 		let newValue = evaluateMathExpression(textWithLeadingZeroes);
 		if (newValue !== undefined && isNaN(newValue)) newValue = undefined; // Rejects `sqrt(-1)`
+
+		if (newValue !== undefined) {
+			const oldValue = value !== undefined && isInteger ? Math.round(value) : value;
+			if (newValue !== oldValue) {
+				dispatch("startHistoryTransaction");
+			}
+		}
 		updateValue(newValue);
 
 		editing = false;

From 0d3e3fc6c0eb44820c7d2f8efb938622ecde5242 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Fri, 9 Feb 2024 00:51:25 +0800
Subject: [PATCH 06/15] rename

---
 .../messages/layout/utility_types/widgets/input_widgets.rs  | 4 +++-
 .../node_graph_message_handler/node_properties.rs           | 2 +-
 frontend/src/components/widgets/inputs/DropdownInput.svelte | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
index aad3e101365..8c2517a3558 100644
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
@@ -67,7 +67,9 @@ pub struct DropdownInput {
 
 	pub tooltip: String,
 
-	pub previewable: bool,
+	#[derivative(Default(value = "true"))]
+	#[serde(rename = "previewOnHover")]
+	pub preview_on_hover: bool,
 
 	#[serde(skip)]
 	pub tooltip_shortcut: Option<ActionKeys>,
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
index 9cd9eb0869e..95c6865724c 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -560,7 +560,7 @@ fn blend_mode(document_node: &DocumentNode, node_id: NodeId, index: usize, name:
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			DropdownInput::new(entries)
 				.selected_index(blend_mode.index_in_list_svg_subset().map(|index| index as u32))
-				.previewable(true)
+				.preview_on_hover(true)
 				.widget_holder(),
 		]);
 	}
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index c09bf702ada..1a20f64f1fe 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -21,7 +21,7 @@
 	export let interactive = true;
 	export let disabled = false;
 	export let tooltip: string | undefined = undefined;
-	export let previewable = false;
+	export let previewOnHover = false;
 
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;
@@ -47,13 +47,13 @@
 	}
 
 	function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
-		if (previewable) {
+		if (previewOnHover) {
 			dispatch("hoverInEntry", entries.flat().indexOf(hoveredEntry));
 		}
 	}
 
 	function dispatchHoverOutEntry() {
-		if (previewable) {
+		if (previewOnHover) {
 			dispatch("hoverOutEntry");
 		}
 	}

From 014179a383b35349511ee4d6ec489e5d254e2f6d Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Fri, 9 Feb 2024 09:52:48 +0800
Subject: [PATCH 07/15] update dropdown preview behaviour

---
 .../layout/utility_types/widgets/input_widgets.rs    |  2 +-
 .../portfolio/document/document_message_handler.rs   |  5 +++--
 .../src/components/floating-menus/MenuList.svelte    | 12 ++++++++----
 .../components/widgets/inputs/DropdownInput.svelte   |  3 ++-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
index 8c2517a3558..26f0b8f54c7 100644
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
@@ -67,7 +67,7 @@ pub struct DropdownInput {
 
 	pub tooltip: String,
 
-	#[derivative(Default(value = "true"))]
+	#[derivative(Default(value = "false"))]
 	#[serde(rename = "previewOnHover")]
 	pub preview_on_hover: bool,
 
diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index ef30e1bb512..375e3ecbe5c 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -1237,8 +1237,8 @@ impl DocumentMessageHandler {
 							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()),
 					]])
 					.selected_index(Some(self.document_mode as u32))
-					.draw_icon( true)
-					.interactive( false) // TODO: set to true when dialogs are not spawned
+					.draw_icon(true)
+					.interactive(false) // TODO: set to true when dialogs are not spawned
 					.widget_holder(),
 				Separator::new(SeparatorType::Section).widget_holder(),
 			],
@@ -1483,6 +1483,7 @@ impl DocumentMessageHandler {
 					.selected_index(blend_mode.and_then(|blend_mode| blend_mode.index_in_list_svg_subset()).map(|index| index as u32))
 					.disabled(disabled)
 					.draw_icon(false)
+					.preview_on_hover(true)
 					.widget_holder(),
 				Separator::new(SeparatorType::Related).widget_holder(),
 				NumberInput::new(opacity)
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 7262cc2a621..9e26ea44106 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -164,8 +164,10 @@
 	}
 
 	function onEntryPointerEnter(menuListEntry: MenuListEntry) {
-		dispatch("hoverInEntry", menuListEntry);
-		if (!menuListEntry.children?.length) return;
+		if (!menuListEntry.children?.length) {
+			dispatch("hoverInEntry", menuListEntry);
+			return;
+		}
 
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
@@ -175,8 +177,10 @@
 	}
 
 	function onEntryPointerLeave(menuListEntry: MenuListEntry) {
-		dispatch("hoverOutEntry");
-		if (!menuListEntry.children?.length) return;
+		if (!menuListEntry.children?.length) {
+			dispatch("hoverOutEntry");
+			return;
+		}
 
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 1a20f64f1fe..5d55cfc26e4 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -41,7 +41,8 @@
 	function watchActiveEntry(activeEntry: MenuListEntry) {
 		if (activeEntrySkipWatcher) {
 			activeEntrySkipWatcher = false;
-		} else if (activeEntry !== DASH_ENTRY) {
+		} else if (activeEntry !== DASH_ENTRY && !previewOnHover) {
+			// when previewOnHover is enabled, do not dispatch selectedIndex, because hoverInEntry is dispatched yet.
 			dispatch("selectedIndex", entries.flat().indexOf(activeEntry));
 		}
 	}

From faab09e76960fffca2507b2f084e2d22140a4009 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Fri, 9 Feb 2024 10:02:13 +0800
Subject: [PATCH 08/15] Color picker preset color

---
 frontend/src/components/floating-menus/ColorPicker.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 1bd68cdeb6a..576635f2e75 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -219,6 +219,7 @@
 	}
 
 	function setColorPreset(preset: PresetColors) {
+		dispatch("startHistoryTransaction");
 		if (preset === "none") {
 			setNewHSVA(0, 0, 0, 1, true);
 			setColor(new Color("none"));
@@ -259,6 +260,7 @@
 		try {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			const result = await new (window as any).EyeDropper().open();
+			dispatch("startHistoryTransaction");
 			setColorCode(result.sRGBHex);
 		} catch {
 			// Do nothing

From c494b9052c840d670698ea4bab6c841899e55f48 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Sun, 17 Mar 2024 19:13:28 +0800
Subject: [PATCH 09/15] Another way to handle blend mode preview

---
 .../utility_types/widgets/input_widgets.rs    |  4 ---
 .../document/document_message_handler.rs      |  4 +--
 .../node_properties.rs                        |  1 -
 .../src/components/widgets/WidgetSpan.svelte  |  8 ++----
 .../widgets/inputs/DropdownInput.svelte       | 26 ++++++++++++-------
 frontend/wasm/src/editor_api.rs               |  7 -----
 6 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
index 26f0b8f54c7..109f40e2b5f 100644
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
@@ -67,10 +67,6 @@ pub struct DropdownInput {
 
 	pub tooltip: String,
 
-	#[derivative(Default(value = "false"))]
-	#[serde(rename = "previewOnHover")]
-	pub preview_on_hover: bool,
-
 	#[serde(skip)]
 	pub tooltip_shortcut: Option<ActionKeys>,
 	//
diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index 375e3ecbe5c..908efc6100a 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -801,7 +801,6 @@ impl MessageHandler<DocumentMessage, DocumentInputs<'_>> for DocumentMessageHand
 				}
 			}
 			SetBlendModeForSelectedLayers { blend_mode } => {
-				self.backup(responses);
 				for layer in self.selected_nodes.selected_layers_except_artboards(self.metadata()) {
 					responses.add(GraphOperationMessage::BlendModeSet { layer, blend_mode });
 				}
@@ -1097,6 +1096,7 @@ impl DocumentMessageHandler {
 
 	/// Copies the entire document into the history system
 	pub fn backup(&mut self, responses: &mut VecDeque<Message>) {
+		debug!("start transaction");
 		self.backup_with_document(self.network.clone(), responses);
 	}
 
@@ -1472,6 +1472,7 @@ impl DocumentMessageHandler {
 						MenuListEntry::new(format!("{blend_mode:?}"))
 							.label(blend_mode.to_string())
 							.on_update(move |_| DocumentMessage::SetBlendModeForSelectedLayers { blend_mode }.into())
+							.on_commit(|_| DocumentMessage::StartTransaction.into())
 					})
 					.collect()
 			})
@@ -1483,7 +1484,6 @@ impl DocumentMessageHandler {
 					.selected_index(blend_mode.and_then(|blend_mode| blend_mode.index_in_list_svg_subset()).map(|index| index as u32))
 					.disabled(disabled)
 					.draw_icon(false)
-					.preview_on_hover(true)
 					.widget_holder(),
 				Separator::new(SeparatorType::Related).widget_holder(),
 				NumberInput::new(opacity)
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
index 95c6865724c..8ce739cebd9 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -560,7 +560,6 @@ fn blend_mode(document_node: &DocumentNode, node_id: NodeId, index: usize, name:
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			DropdownInput::new(entries)
 				.selected_index(blend_mode.index_in_list_svg_subset().map(|index| index as u32))
-				.preview_on_hover(true)
 				.widget_holder(),
 		]);
 	}
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 1a075c549c9..54cacd0b11a 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -69,10 +69,6 @@
 		editor.instance.widgetValueCommitAndUpdate(layoutTarget, widgets[index].widgetId, value);
 	}
 
-	function widgetValueRevert() {
-		editor.instance.widgetValueRevert();
-	}
-
 	// TODO: This seems to work, but verify the correctness and terseness of this, it's adapted from https://stackoverflow.com/a/67434028/775283
 	function exclude<T extends object>(props: T, additional?: (keyof T)[]): Omit<T, typeof additional extends Array<infer K> ? K : never> {
 		const exclusions = ["kind", ...(additional || [])];
@@ -102,8 +98,8 @@
 		{#if dropdownInput}
 			<DropdownInput
 				{...exclude(dropdownInput)}
-				on:hoverInEntry={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
-				on:hoverOutEntry={() => widgetValueRevert()}
+				on:hoverInEntry={({ detail }) => widgetValueUpdate(index, detail)}
+				on:hoverOutEntry={({ detail }) => widgetValueUpdate(index, detail)}
 				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
 			/>
 		{/if}
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 5d55cfc26e4..886f6c2df84 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -10,7 +10,7 @@
 
 	const DASH_ENTRY = { value: "", label: "-" };
 
-	const dispatch = createEventDispatcher<{ selectedIndex: number; hoverInEntry: number; hoverOutEntry: undefined }>();
+	const dispatch = createEventDispatcher<{ selectedIndex: number; hoverInEntry: number; hoverOutEntry: number }>();
 
 	let menuList: MenuList | undefined;
 	let self: LayoutRow | undefined;
@@ -21,15 +21,24 @@
 	export let interactive = true;
 	export let disabled = false;
 	export let tooltip: string | undefined = undefined;
-	export let previewOnHover = false;
 
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;
+	let initialSelectedIndex: number | undefined = undefined;
 	let open = false;
 	let minWidth = 0;
 
 	$: watchSelectedIndex(selectedIndex);
 	$: watchActiveEntry(activeEntry);
+	$: watchOpen(open);
+
+	function watchOpen(open: boolean) {
+		if (open) {
+			initialSelectedIndex = selectedIndex;
+		} else {
+			initialSelectedIndex = undefined;
+		}
+	}
 
 	// Called only when `selectedIndex` is changed from outside this component
 	function watchSelectedIndex(_?: number) {
@@ -41,22 +50,19 @@
 	function watchActiveEntry(activeEntry: MenuListEntry) {
 		if (activeEntrySkipWatcher) {
 			activeEntrySkipWatcher = false;
-		} else if (activeEntry !== DASH_ENTRY && !previewOnHover) {
-			// when previewOnHover is enabled, do not dispatch selectedIndex, because hoverInEntry is dispatched yet.
+		} else if (activeEntry !== DASH_ENTRY) {
+			// We need to set to the initial value first to track a right history step, as if we hover in initial selection.
+			dispatch("hoverInEntry", initialSelectedIndex);
 			dispatch("selectedIndex", entries.flat().indexOf(activeEntry));
 		}
 	}
 
 	function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
-		if (previewOnHover) {
-			dispatch("hoverInEntry", entries.flat().indexOf(hoveredEntry));
-		}
+		dispatch("hoverInEntry", entries.flat().indexOf(hoveredEntry));
 	}
 
 	function dispatchHoverOutEntry() {
-		if (previewOnHover) {
-			dispatch("hoverOutEntry");
-		}
+		dispatch("hoverOutEntry", initialSelectedIndex);
 	}
 
 	function makeActiveEntry(): MenuListEntry {
diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs
index b58ae6cb20a..99631d04268 100644
--- a/frontend/wasm/src/editor_api.rs
+++ b/frontend/wasm/src/editor_api.rs
@@ -350,13 +350,6 @@ impl JsEditorHandle {
 		Ok(())
 	}
 
-	/// Update the value of a given UI widget, and commit it to the history
-	#[wasm_bindgen(js_name = widgetValueRevert)]
-	pub fn widget_value_revert(&self) -> Result<(), JsValue> {
-		self.dispatch(DocumentMessage::Undo);
-		Ok(())
-	}
-
 	#[wasm_bindgen(js_name = loadPreferences)]
 	pub fn load_preferences(&self, preferences: String) {
 		let message = PreferencesMessage::Load { preferences };

From a8deee07b272da744d00ba672c1d3a34f1f3c766 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 17 Mar 2024 20:42:54 -0700
Subject: [PATCH 10/15] Apply suggestions from code review

---
 .../messages/portfolio/document/document_message_handler.rs | 1 -
 frontend/src/components/widgets/inputs/DropdownInput.svelte | 6 +-----
 frontend/src/components/widgets/inputs/NumberInput.svelte   | 4 +---
 3 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index 908efc6100a..551cd0a8ca0 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -1096,7 +1096,6 @@ impl DocumentMessageHandler {
 
 	/// Copies the entire document into the history system
 	pub fn backup(&mut self, responses: &mut VecDeque<Message>) {
-		debug!("start transaction");
 		self.backup_with_document(self.network.clone(), responses);
 	}
 
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 886f6c2df84..5b1fe474687 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -33,11 +33,7 @@
 	$: watchOpen(open);
 
 	function watchOpen(open: boolean) {
-		if (open) {
-			initialSelectedIndex = selectedIndex;
-		} else {
-			initialSelectedIndex = undefined;
-		}
+		initialSelectedIndex = open ? selectedIndex : undefined;
 	}
 
 	// Called only when `selectedIndex` is changed from outside this component
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 30e1e7c147e..ba39b8e542f 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -197,9 +197,7 @@
 
 		if (newValue !== undefined) {
 			const oldValue = value !== undefined && isInteger ? Math.round(value) : value;
-			if (newValue !== oldValue) {
-				dispatch("startHistoryTransaction");
-			}
+			if (newValue !== oldValue) dispatch("startHistoryTransaction");
 		}
 		updateValue(newValue);
 

From 41e842fdc858a9261b87fbbcca307edbef945446 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 17 Mar 2024 21:25:11 -0700
Subject: [PATCH 11/15] Use on_commit instead of on_update for some dropdowns

---
 .../export_dialog_message_handler.rs          |  2 +-
 .../messages/layout/layout_message_handler.rs | 42 ++++++++-----------
 .../document/document_message_handler.rs      |  4 +-
 .../node_properties.rs                        | 12 +++---
 .../messages/tool/tool_messages/brush_tool.rs |  2 +-
 .../tool/tool_messages/select_tool.rs         |  2 +-
 6 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs b/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs
index 63afee10483..eefe047aae4 100644
--- a/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs
+++ b/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs
@@ -97,7 +97,7 @@ impl LayoutHolder for ExportDialogMessageHandler {
 			.map(|(val, name, disabled)| {
 				MenuListEntry::new(format!("{val:?}"))
 					.label(name)
-					.on_update(move |_| ExportDialogMessage::ExportBounds(val).into())
+					.on_commit(move |_| ExportDialogMessage::ExportBounds(val).into())
 					.disabled(disabled)
 			})
 			.collect()];
diff --git a/editor/src/messages/layout/layout_message_handler.rs b/editor/src/messages/layout/layout_message_handler.rs
index 4dabbfafc3b..42c61b375c5 100644
--- a/editor/src/messages/layout/layout_message_handler.rs
+++ b/editor/src/messages/layout/layout_message_handler.rs
@@ -174,32 +174,26 @@ impl LayoutMessageHandler {
 
 				responses.add(callback_message);
 			}
-			Widget::NumberInput(number_input) => {
-				match action {
-					WidgetValueAction::Commit => {
-						let callback_message = (number_input.on_commit.callback)(&());
+			Widget::NumberInput(number_input) => match action {
+				WidgetValueAction::Commit => {
+					let callback_message = (number_input.on_commit.callback)(&());
+					responses.add(callback_message);
+				}
+				WidgetValueAction::Update => match value {
+					Value::Number(num) => {
+						let update_value = num.as_f64().unwrap();
+						number_input.value = Some(update_value);
+						let callback_message = (number_input.on_update.callback)(number_input);
 						responses.add(callback_message);
 					}
-					WidgetValueAction::Update => {
-						match value {
-							Value::Number(num) => {
-								let update_value = num.as_f64().unwrap();
-								number_input.value = Some(update_value);
-								let callback_message = (number_input.on_update.callback)(number_input);
-								responses.add(callback_message);
-							}
-							Value::String(str) => match str.as_str() {
-								"Increment" => responses.add((number_input.increment_callback_increase.callback)(number_input)),
-								"Decrement" => responses.add((number_input.increment_callback_decrease.callback)(number_input)),
-								_ => {
-									panic!("Invalid string found when updating `NumberInput`")
-								}
-							},
-							_ => {} // If it's some other type we could just ignore it and leave the value as is
-						}
-					}
-				}
-			}
+					Value::String(str) => match str.as_str() {
+						"Increment" => responses.add((number_input.increment_callback_increase.callback)(number_input)),
+						"Decrement" => responses.add((number_input.increment_callback_decrease.callback)(number_input)),
+						_ => panic!("Invalid string found when updating `NumberInput`"),
+					},
+					_ => {}
+				},
+			},
 			Widget::ParameterExposeButton(parameter_expose_button) => {
 				let callback_message = match action {
 					WidgetValueAction::Commit => (parameter_expose_button.on_commit.callback)(&()),
diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index 551cd0a8ca0..888eac65053 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -1229,11 +1229,11 @@ impl DocumentMessageHandler {
 						MenuListEntry::new(format!("{:?}", DocumentMode::SelectMode))
 							.label(DocumentMode::SelectMode.to_string())
 							.icon(DocumentMode::SelectMode.icon_name())
-							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(330) }.into()),
+							.on_commit(|_| DialogMessage::RequestComingSoonDialog { issue: Some(330) }.into()),
 						MenuListEntry::new(format!("{:?}", DocumentMode::GuideMode))
 							.label(DocumentMode::GuideMode.to_string())
 							.icon(DocumentMode::GuideMode.icon_name())
-							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()),
+							.on_commit(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()),
 					]])
 					.selected_index(Some(self.document_mode as u32))
 					.draw_icon(true)
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
index 8ce739cebd9..91bb7182566 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -372,7 +372,7 @@ fn number_widget(document_node: &DocumentNode, node_id: NodeId, index: usize, na
 	widgets
 }
 
-//TODO Generalize this instead of using a separate function per dropdown menu enum
+// TODO: Generalize this instead of using a separate function per dropdown menu enum
 fn color_channel(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
 	if let &NodeInput::Value {
@@ -400,7 +400,7 @@ fn color_channel(document_node: &DocumentNode, node_id: NodeId, index: usize, na
 	LayoutGroup::Row { widgets }.with_tooltip("Color Channel")
 }
 
-// TODO Generalize this instead of using a separate function per dropdown menu enum
+// TODO: Generalize this instead of using a separate function per dropdown menu enum
 fn noise_type(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
 	if let &NodeInput::Value {
@@ -426,7 +426,7 @@ fn noise_type(document_node: &DocumentNode, node_id: NodeId, index: usize, name:
 	LayoutGroup::Row { widgets }.with_tooltip("Style of noise pattern")
 }
 
-// TODO Generalize this instead of using a separate function per dropdown menu enum
+// TODO: Generalize this instead of using a separate function per dropdown menu enum
 fn fractal_type(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool, disabled: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
 	if let &NodeInput::Value {
@@ -452,7 +452,7 @@ fn fractal_type(document_node: &DocumentNode, node_id: NodeId, index: usize, nam
 	LayoutGroup::Row { widgets }.with_tooltip("Style of layered levels of the noise pattern")
 }
 
-// TODO Generalize this instead of using a separate function per dropdown menu enum
+// TODO: Generalize this instead of using a separate function per dropdown menu enum
 fn cellular_distance_function(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool, disabled: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
 	if let &NodeInput::Value {
@@ -481,7 +481,7 @@ fn cellular_distance_function(document_node: &DocumentNode, node_id: NodeId, ind
 	LayoutGroup::Row { widgets }.with_tooltip("Distance function used by the cellular noise")
 }
 
-// TODO Generalize this instead of using a separate function per dropdown menu enum
+// TODO: Generalize this instead of using a separate function per dropdown menu enum
 fn cellular_return_type(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool, disabled: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
 	if let &NodeInput::Value {
@@ -507,7 +507,7 @@ fn cellular_return_type(document_node: &DocumentNode, node_id: NodeId, index: us
 	LayoutGroup::Row { widgets }.with_tooltip("Return type of the cellular noise")
 }
 
-// TODO Generalize this instead of using a separate function per dropdown menu enum
+// TODO: Generalize this instead of using a separate function per dropdown menu enum
 fn domain_warp_type(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool, disabled: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
 	if let &NodeInput::Value {
diff --git a/editor/src/messages/tool/tool_messages/brush_tool.rs b/editor/src/messages/tool/tool_messages/brush_tool.rs
index ac8990b7af6..9fa11499e46 100644
--- a/editor/src/messages/tool/tool_messages/brush_tool.rs
+++ b/editor/src/messages/tool/tool_messages/brush_tool.rs
@@ -165,7 +165,7 @@ impl LayoutHolder for BrushTool {
 					.map(|blend_mode| {
 						MenuListEntry::new(format!("{blend_mode:?}"))
 							.label(blend_mode.to_string())
-							.on_update(|_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::BlendMode(*blend_mode)).into())
+							.on_commit(|_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::BlendMode(*blend_mode)).into())
 					})
 					.collect()
 			})
diff --git a/editor/src/messages/tool/tool_messages/select_tool.rs b/editor/src/messages/tool/tool_messages/select_tool.rs
index 59907d157ea..9020a08c8a1 100644
--- a/editor/src/messages/tool/tool_messages/select_tool.rs
+++ b/editor/src/messages/tool/tool_messages/select_tool.rs
@@ -97,7 +97,7 @@ impl SelectTool {
 			.map(|mode| {
 				MenuListEntry::new(format!("{mode:?}"))
 					.label(mode.to_string())
-					.on_update(move |_| SelectToolMessage::SelectOptions(SelectOptionsUpdate::NestedSelectionBehavior(*mode)).into())
+					.on_commit(move |_| SelectToolMessage::SelectOptions(SelectOptionsUpdate::NestedSelectionBehavior(*mode)).into())
 			})
 			.collect();
 

From 0e8d5f2540530260b60c6df04b5f944a18c2b181 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 17 Mar 2024 22:01:06 -0700
Subject: [PATCH 12/15] Debugging progress

---
 editor/src/messages/layout/layout_message_handler.rs |  4 ++--
 frontend/src/components/widgets/WidgetSpan.svelte    | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/editor/src/messages/layout/layout_message_handler.rs b/editor/src/messages/layout/layout_message_handler.rs
index 42c61b375c5..558c704d3cc 100644
--- a/editor/src/messages/layout/layout_message_handler.rs
+++ b/editor/src/messages/layout/layout_message_handler.rs
@@ -121,11 +121,11 @@ impl LayoutMessageHandler {
 			Widget::DropdownInput(dropdown_input) => {
 				let callback_message = match action {
 					WidgetValueAction::Commit => {
-						let update_value = value.as_u64().expect("DropdownInput commit was not of type: u64");
+						let update_value = value.as_u64().expect(&format!("DropdownInput commit was not of type `u64`, found {value:?}"));
 						(dropdown_input.entries.iter().flatten().nth(update_value as usize).unwrap().on_commit.callback)(&())
 					}
 					WidgetValueAction::Update => {
-						let update_value = value.as_u64().expect("DropdownInput update was not of type: u64");
+						let update_value = value.as_u64().expect(&format!("DropdownInput update was not of type `u64`, found {value:?}"));
 						dropdown_input.selected_index = Some(update_value as u32);
 						(dropdown_input.entries.iter().flatten().nth(update_value as usize).unwrap().on_update.callback)(&())
 					}
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 54cacd0b11a..19b2e0bc994 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -98,8 +98,14 @@
 		{#if dropdownInput}
 			<DropdownInput
 				{...exclude(dropdownInput)}
-				on:hoverInEntry={({ detail }) => widgetValueUpdate(index, detail)}
-				on:hoverOutEntry={({ detail }) => widgetValueUpdate(index, detail)}
+				on:hoverInEntry={({ detail }) => {
+					console.log(index, detail);
+					return widgetValueUpdate(index, detail);
+				}}
+				on:hoverOutEntry={({ detail }) => {
+					console.log(index, detail);
+					return widgetValueUpdate(index, detail);
+				}}
 				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
 			/>
 		{/if}

From d6e357f5bd0d37103034ec7f1043f977fd815621 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Wed, 20 Mar 2024 14:33:21 +0800
Subject: [PATCH 13/15] add debug

---
 .../components/floating-menus/MenuList.svelte | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 9e26ea44106..ea2cf4c811e 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -43,7 +43,7 @@
 	$: watchOpen(open);
 	$: watchEntries(entries);
 	$: watchRemeasureWidth(filteredEntries, drawIcon);
-	$: watchHighlightedWithSearch(filteredEntries, open);
+	// $: watchHighlightedWithSearch(filteredEntries, open);
 
 	$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
 	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
@@ -69,17 +69,17 @@
 	}
 
 	// Required to keep the highlighted item centered and to find a new highlighted item if necessary
-	async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][], open: boolean) {
-		if (highlighted && open) {
-			// Allows the scrollable area to expand if necessary
-			await tick();
-
-			const flattened = filteredEntries.flat();
-			const highlightedFound = highlighted?.label && flattened.map((entry) => entry.label).includes(highlighted.label);
-			const newHighlighted = highlightedFound ? highlighted : flattened[0];
-			setHighlighted(newHighlighted);
-		}
-	}
+	// async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][], open: boolean) {
+	// 	if (highlighted && open) {
+	// 		// Allows the scrollable area to expand if necessary
+	// 		await tick();
+
+	// 		const flattened = filteredEntries.flat();
+	// 		const highlightedFound = highlighted?.label && flattened.map((entry) => entry.label).includes(highlighted.label);
+	// 		const newHighlighted = highlightedFound ? highlighted : flattened[0];
+	// 		setHighlighted(newHighlighted);
+	// 	}
+	// }
 
 	// Detect when the user types, which creates a search box
 	async function startSearch(e: KeyboardEvent) {

From 290e7550bb3d8671e4d1a5874a37eb18b7f978a9 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Fri, 29 Mar 2024 22:58:12 +0800
Subject: [PATCH 14/15] active not equal to highlight in some cases

---
 .../components/floating-menus/MenuList.svelte | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index ea2cf4c811e..3f8a4b7601e 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -43,7 +43,7 @@
 	$: watchOpen(open);
 	$: watchEntries(entries);
 	$: watchRemeasureWidth(filteredEntries, drawIcon);
-	// $: watchHighlightedWithSearch(filteredEntries, open);
+	$: watchHighlightedWithSearch(filteredEntries, open);
 
 	$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
 	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
@@ -69,17 +69,17 @@
 	}
 
 	// Required to keep the highlighted item centered and to find a new highlighted item if necessary
-	// async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][], open: boolean) {
-	// 	if (highlighted && open) {
-	// 		// Allows the scrollable area to expand if necessary
-	// 		await tick();
-
-	// 		const flattened = filteredEntries.flat();
-	// 		const highlightedFound = highlighted?.label && flattened.map((entry) => entry.label).includes(highlighted.label);
-	// 		const newHighlighted = highlightedFound ? highlighted : flattened[0];
-	// 		setHighlighted(newHighlighted);
-	// 	}
-	// }
+	async function watchHighlightedWithSearch(filteredEntries: MenuListEntry[][], open: boolean) {
+		if (highlighted && open) {
+			// Allows the scrollable area to expand if necessary
+			await tick();
+
+			const flattened = filteredEntries.flat();
+			const highlightedFound = highlighted?.label && flattened.map((entry) => entry.label).includes(highlighted.label);
+			const newHighlighted = highlightedFound ? highlighted : flattened[0];
+			setHighlighted(newHighlighted);
+		}
+	}
 
 	// Detect when the user types, which creates a search box
 	async function startSearch(e: KeyboardEvent) {
@@ -352,9 +352,9 @@
 		highlighted = newHighlight;
 
 		// Interactive menus should keep the active entry the same as the highlighted one
-		if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) {
-			dispatch("activeEntry", newHighlight);
-		}
+		// if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) {
+		// 	dispatch("activeEntry", newHighlight);
+		// }
 
 		// Scroll into view
 		let container = scroller?.div?.();

From 6c30fabe9ab2aeba06e95cf92140ea00df9a1ea3 Mon Sep 17 00:00:00 2001
From: zhiyuang <zyguo1230@126.com>
Date: Fri, 29 Mar 2024 22:59:31 +0800
Subject: [PATCH 15/15] rm logs

---
 frontend/src/components/widgets/WidgetSpan.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 19b2e0bc994..d12926cca62 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -99,11 +99,9 @@
 			<DropdownInput
 				{...exclude(dropdownInput)}
 				on:hoverInEntry={({ detail }) => {
-					console.log(index, detail);
 					return widgetValueUpdate(index, detail);
 				}}
 				on:hoverOutEntry={({ detail }) => {
-					console.log(index, detail);
 					return widgetValueUpdate(index, detail);
 				}}
 				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}