feat(ui): unselect multiselection on click - WF-148

writer · Dec 19, 2024 · 4cc8151 · 4cc8151
1 parent 21ecc92
commit 4cc8151
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
@@ -251,10 +251,14 @@ function handleRendererClick(ev: PointerEvent): void {
 	ev.preventDefault();
 	ev.stopPropagation();
 
-	if (ev.shiftKey || ev.ctrlKey) {
-		ssbm.appendSelection(targetId, targetInstancePath, "click");
+	if (!ev.shiftKey && !ev.ctrlKey) {
+		return ssbm.setSelection(targetId, targetInstancePath, "click");
+	}
+
+	if (ssbm.isComponentIdSelected(targetId)) {
+		ssbm.removeSelectedComponentId(targetId);
 	} else {
-		ssbm.setSelection(targetId, targetInstancePath, "click");
+		ssbm.appendSelection(targetId, targetInstancePath, "click");
 	}
 }
 

diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
@@ -154,7 +154,7 @@ export function generateBuilderManager() {
 
 	const removeSelectedComponentId = (componentId: string) => {
 		const newSelection = state.value.selection.filter(
-			(c) => c.componentId === componentId,
+			(c) => c.componentId !== componentId,
 		);
 		if (newSelection.length === state.value.selection.length) return;
 		state.value.selection = newSelection;

diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
@@ -149,11 +149,17 @@ const name = computed(() => {
 async function select(ev: MouseEvent | KeyboardEvent) {
 	goToComponentParentPage(props.componentId);
 	await nextTick();
-	if (ev.ctrlKey || ev.shiftKey) {
-		wfbm.appendSelection(props.componentId, undefined, "tree");
+
+	if (!ev.shiftKey && !ev.ctrlKey) {
+		return wfbm.setSelection(props.componentId, undefined, "tree");
+	}
+
+	if (wfbm.isComponentIdSelected(props.componentId)) {
+		wfbm.removeSelectedComponentId(props.componentId);
 	} else {
-		wfbm.setSelection(props.componentId, undefined, "tree");
+		wfbm.appendSelection(props.componentId, undefined, "tree");
 	}
+
 	expand();
 }