Fix ShortcutLabel drawing of consecutive key labels

Author: Keavon

.gitignore

@@ -9,5 +9,6 @@ profile.json.gz
 flamegraph.svg
 .idea/
 .direnv
+.DS_Store
 hierarchical_message_system_tree.txt
 hierarchical_message_system_tree.html

editor/src/messages/input_mapper/input_mappings.rs

@@ -411,6 +411,7 @@ pub fn input_mappings() -> Mapping {
 		entry!(KeyDown(Equal); modifiers=[Accel], action_dispatch=NavigationMessage::CanvasZoomIncrease { center_on_mouse: false }),
 		entry!(KeyDown(Minus); modifiers=[Accel], action_dispatch=NavigationMessage::CanvasZoomDecrease { center_on_mouse: false }),
 		entry!(WheelScroll; modifiers=[Control], action_dispatch=NavigationMessage::CanvasZoomMouseWheel),
+		entry!(WheelScroll; modifiers=[Command], action_dispatch=NavigationMessage::CanvasZoomMouseWheel),
 		entry!(WheelScroll; modifiers=[Shift], action_dispatch=NavigationMessage::CanvasPanMouseWheel { use_y_as_x: true }),
 		entry!(WheelScroll; action_dispatch=NavigationMessage::CanvasPanMouseWheel { use_y_as_x: false }),
 		entry!(KeyDown(PageUp); modifiers=[Shift], action_dispatch=NavigationMessage::CanvasPanByViewportFraction { delta: DVec2::new(1., 0.) }),

frontend/src/components/widgets/labels/ShortcutLabel.svelte

@@ -9,8 +9,8 @@
 
 	export let shortcut: ActionShortcut;
 
-	function keyTextOrIconList(keyGroup: LabeledShortcut): { label?: string; icon?: IconName; mouseMotion?: MouseMotion }[] {
-		const list = keyGroup.map((labeledKeyOrMouseMotion) => {
+	function keyTextOrIconList(keyGroup: LabeledShortcut): ({ label?: string; icon?: IconName }[] | { mouseMotion?: MouseMotion }[])[] {
+		const list = keyGroup.map((labeledKeyOrMouseMotion): { label?: string; icon?: IconName; mouseMotion?: MouseMotion } => {
 			// Use a mouse icon if it's a mouse motion instead of a key
 			if (typeof labeledKeyOrMouseMotion === "string") return { mouseMotion: labeledKeyOrMouseMotion };
 
@@ -33,11 +33,25 @@
 		});
 
 		// Consolidate consecutive labels into a concatenated single label
-		const consolidatedList: typeof list = [];
-		list.forEach((item) => {
-			const lastItem = consolidatedList[consolidatedList.length - 1];
-			if (item.label && lastItem?.label) lastItem.label += " " + item.label;
-			else consolidatedList.push(item);
+		const consolidatedList: ReturnType<typeof keyTextOrIconList> = [];
+		list.forEach((currentItem) => {
+			const lastGroup = consolidatedList.length > 0 ? consolidatedList[consolidatedList.length - 1] : undefined;
+			const lastItem = lastGroup !== undefined ? lastGroup[lastGroup.length - 1] : undefined;
+
+			// If current and last are both labels, concatenate both within their existing label
+			if (currentItem.label && lastItem && "label" in lastItem && lastItem.label) {
+				lastItem.label += " " + currentItem.label;
+				return;
+			}
+
+			// If current and last are both of the same group type (both icons/labels, or both mouseMotion), join them within their existing
+			if (lastItem && (((currentItem.label || currentItem.icon) && ("label" in lastItem || "icon" in lastItem)) || (currentItem.mouseMotion && "mouseMotion" in lastItem))) {
+				lastGroup?.push(currentItem);
+				return;
+			}
+
+			// Otherwise, start a new group with the first item of its group type
+			consolidatedList.push([currentItem]);
 		});
 		return consolidatedList;
 	}
@@ -73,32 +87,38 @@
 		}
 	}
 
-	function mouseHintIcon(input?: MouseMotion): IconName {
+	function mouseHintIcon(input: MouseMotion): IconName {
 		return `MouseHint${input}` as IconName;
 	}
 </script>
 
 <LayoutRow class="shortcut-label">
-	{#each keyTextOrIconList(shortcut.shortcut) as { label, icon, mouseMotion }}
-		{#if label}
+	{#each keyTextOrIconList(shortcut.shortcut) as group}
+		{#if "label" in group[0] || "icon" in group[0]}
 			<div class="key-label">
-				<TextLabel>{label}</TextLabel>
-			</div>
-		{:else if icon}
-			<div class="key-icon">
-				<IconLabel {icon} />
-			</div>
-		{:else if mouseMotion}
-			<div class="mouse-icon">
-				<IconLabel icon={mouseHintIcon(mouseMotion)} />
+				{#each group as item}
+					{#if "label" in item && item.label}
+						<TextLabel>{item.label}</TextLabel>
+					{:else if "icon" in item && item.icon}
+						<IconLabel icon={item.icon} />
+					{/if}
+				{/each}
 			</div>
 		{/if}
+		{#if "mouseMotion" in group[0]}
+			{#each group as item}
+				{#if "mouseMotion" in item && item.mouseMotion}
+					<div class="mouse-icon">
+						<IconLabel icon={mouseHintIcon(item.mouseMotion)} />
+					</div>
+				{/if}
+			{/each}
+		{/if}
 	{/each}
 </LayoutRow>
 
 <style lang="scss" global>
 	.shortcut-label {
-		.key-icon,
 		.key-label {
 			display: flex;
 			align-items: center;
@@ -108,6 +128,10 @@
 			background: var(--color-3-darkgray);
 			color: var(--color-b-lightgray);
 			fill: var(--color-b-lightgray);
+
+			* + * {
+				margin-left: 4px;
+			}
 		}
 
 		svg {
@@ -120,7 +144,6 @@
 
 		.floating-menu-content .row > & {
 			.key-label,
-			.key-icon,
 			.mouse-icon {
 				color: var(--color-8-uppergray);
 				background: none;
@@ -134,7 +157,7 @@
 				}
 			}
 
-			.key-icon svg {
+			.key-label svg {
 				fill: var(--color-8-uppergray);
 			}
 

frontend/src/components/window/workspace/Panel.svelte

@@ -33,7 +33,7 @@
 
 	export let tabMinWidths = false;
 	export let tabCloseButtons = false;
-	export let tabLabels: { name: string; unsaved?: boolean; tooltipDescription?: string; tooltipShortcut?: string }[];
+	export let tabLabels: { name: string; unsaved?: boolean; tooltipLabel?: string; tooltipDescription?: string; tooltipShortcut?: string }[];
 	export let tabActiveIndex: number;
 	export let panelType: PanelType | undefined = undefined;
 	export let clickAction: ((index: number) => void) | undefined = undefined;
@@ -67,7 +67,7 @@
 				<LayoutRow
 					class="tab"
 					classes={{ active: tabIndex === tabActiveIndex }}
-					tooltipLabel={tabLabel.name}
+					tooltipLabel={tabLabel.tooltipLabel}
 					tooltipDescription={tabLabel.tooltipDescription}
 					on:click={(e) => {
 						e.stopPropagation();

frontend/src/components/window/workspace/Workspace.svelte

@@ -33,7 +33,7 @@
 		if (!editor.handle.inDevelopmentMode()) return { name, unsaved };
 
 		const tooltipDescription = `Document ID: ${doc.id}`;
-		return { name, unsaved, tooltipDescription };
+		return { name, unsaved, tooltipLabel: name, tooltipDescription };
 	});
 
 	const editor = getContext<Editor>("editor");