subtoolbar out transition and location fix

src/Context.svelte.ts

@@ -10,7 +10,7 @@ export class Context {
 	app: App;
 	view: TaskmapView;
 	nodePositionsCalculator: NodePositionsCalculator;
-	pressedButtonIndex = $state(-1);
+	pressedButtonCode = $state(-1);
 	selectedTaskId = $state(-1);
 	toolbarStatus = $state(StatusCode.DRAFT);
 	projectData: ProjectData;
@@ -139,7 +139,7 @@ export class Context {
 
 	public serializeForDebugging() {
 		return JSON.stringify({
-			pressedButtonIndex: this.pressedButtonIndex,
+			pressedButtonIndex: this.pressedButtonCode,
 			selectedTaskId: this.selectedTaskId,
 			toolbarStatus: this.toolbarStatus,
 			projectData: this.projectData,

src/components/Button.svelte

@@ -12,7 +12,7 @@
 	} = $props();
 
 	let isPressedDown = $state(false);
-	let isPressed=$derived(context.pressedButtonIndex == iconCode);
+	let isPressed=$derived(context.pressedButtonCode == iconCode);
 	
 	const stateful = iconCode != IconCode.FOCUS;
 	
@@ -32,12 +32,12 @@
 		isPressedDown = false;
 		if (isPressed) {
 			isPressed = false;
-			context.pressedButtonIndex = -1;
+			context.pressedButtonCode = -1;
 		} else if (stateful) {
 			isPressed = true;
-			context.pressedButtonIndex = iconCode;
+			context.pressedButtonCode = iconCode;
 		} else {
-			context.pressedButtonIndex = -1;
+			context.pressedButtonCode = -1;
 		}
 		let newStatus: StatusCode | null = null;
 		if (iconCode == IconCode.STATUS_READY) {

src/components/TaskmapContainer.svelte

@@ -109,7 +109,7 @@
 		if (e.button as MouseDown == MouseDown.LEFT) {
 			console.log(`Window clicked + ${context.serializeForDebugging()}`);
 			console.log('selectedTaskId ' + context.selectedTaskId);
-			context.pressedButtonIndex = -1;
+			context.pressedButtonCode = -1;
 			context.setSelectedTaskId(-1);
 			viewportEl!.focus();
 			e.stopPropagation();
@@ -158,11 +158,7 @@
 			{/each}
 
 		</div>
-		{#if context.selectedTaskId !== -1}
-			<Toolbar
-				context={context}
-			/>
-		{/if}
+		<Toolbar context={context}/>
 	</div>
 </div>
 

src/components/Toolbar.svelte

@@ -28,6 +28,7 @@
 
 </script>
 
+{#if context.selectedTaskId !== -1}
 <div
 	class="toolbar"
 	class:no-pan={true}
@@ -49,13 +50,15 @@
 		<Button iconCode={IconCode.STATUS} {context} />
 	{/key}
 </div>
-{#if context.pressedButtonIndex === IconCode.REMOVE}
+{/if}
+
+{#if context.pressedButtonCode === IconCode.REMOVE && context.selectedTaskId !== -1}
 	<div
 		class="subtoolbar"
 		transition:slideCustom={{ duration: 300, easing: quintOut, axis: '-y' }}
 		style="
 			top: {getTop() - 2 * BUTTON_SIZE - TOOLBAR_GAP - 2 * TOOLBAR_PADDING.y - SUBTOOLBAR_SHIFT}px;
-			left: {getLeft()}px;
+			left: {getLeft() - 2}px;
 		"
 	>
 		{#key context.updateOnZoomCounter}
@@ -64,13 +67,14 @@
 		{/key}
 	</div>
 {/if}
-{#if context.pressedButtonIndex === IconCode.STATUS}
+
+{#if context.pressedButtonCode === IconCode.STATUS && context.selectedTaskId !== -1}
 	<div
 		class="subtoolbar"
 		transition:slideCustom={{ duration: 300, easing: quintOut, axis: '-y' }}
 		style="
 			top: {getTop() - 4 * BUTTON_SIZE - 3*TOOLBAR_GAP - 2*TOOLBAR_PADDING.y - SUBTOOLBAR_SHIFT}px;
-			left: {getLeft() + 4 * (BUTTON_SIZE + TOOLBAR_GAP)}px;
+			left: {getLeft() + 4 * (BUTTON_SIZE + TOOLBAR_GAP) - 2}px;
 		"
 	>
 		{#key context.updateOnZoomCounter}
@@ -83,7 +87,6 @@
 {/if}
 
 <style>
-
 	.toolbar {
 		gap: 2px;
 		padding: 2px 2px;