65 frontend tools section group5

package.json

@@ -37,6 +37,7 @@
 		"prettier-plugin-svelte": "^3.0.3",
 		"svelte": "^4.2.2",
 		"svelte-check": "^3.5.2",
+		"svooltip": "^0.7.5",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
 		"vite": "^4.5.0",

src/lib/GlobalCssProperties.json

@@ -96,7 +96,20 @@
 				0.43823529411
 			],
 			"--settings-danger-button-color": ["srgb", 0.498, 0.0902, 0.0549],
-			"--settings-safe-button-color": ["srgb", 0.3255, 0.498, 0.2667]
+			"--settings-safe-button-color": ["srgb", 0.3255, 0.498, 0.2667],
+			"--toolbar-icon-color": ["display-p3", 0, 0, 0],
+			"--toolbar-selected-color": [
+				"display-p3",
+				0.3362745098,
+				0.39901960784,
+				0.43823529411
+			],
+			"--toolbar-icon-background-color": [
+				"display-p3",
+				0.93333333333,
+				0.93333333333,
+				0.93333333333
+			]
 		},
 		"fontSize": {
 			"--sidebar-fontsize": [1, "rem"],
@@ -206,6 +219,19 @@
 					0.13490196078,
 					0.14666666666,
 					0.17019607843
+				],
+				"--toolbar-icon-color": ["display-p3", 1, 1, 1],
+				"--toolbar-selected-color": [
+					"display-p3",
+					0.42215686274,
+					0.45176470588,
+					0.45529411764
+				],
+				"--toolbar-icon-background-color": [
+					"display-p3",
+					0.19215686274,
+					0.21176470588,
+					0.23529411764
 				]
 			}
 		},

src/lib/classes/automaton/GlobalDeclarations.ts

@@ -28,7 +28,7 @@ export class GlobalDeclarations extends Declarations<
 			: {
 					name: this.type,
 					declarations: this.declarations,
-			  };
+				};
 	}
 
 	/**

src/lib/classes/automaton/SystemDeclarations.ts

@@ -28,7 +28,7 @@ export class SystemDeclarations extends Declarations<
 			: {
 					name: this.type,
 					declarations: this.declarations,
-			  };
+				};
 	}
 
 	/**

src/lib/classes/automaton/component/Location.ts

@@ -139,12 +139,12 @@ export class Location extends AutomatonClass<RawLocation> {
 			typeof raw.nickname === "string"
 				? Nickname.fromRaw(raw as { nickname: string }, {
 						positionReference: position,
-				  })
+					})
 				: undefined,
 			typeof raw.invariant === "string"
 				? Invariant.fromRaw(raw as { invariant: string }, {
 						positionReference: position,
-				  })
+					})
 				: undefined,
 		);
 	};

src/lib/classes/styling/ZodSchemas/CSSVariables.ts

@@ -34,6 +34,9 @@ export const ColorVariables = z
 		"--sidebar-text-color": ColorAttribute,
 		"--sidebar-element-color": ColorAttribute,
 		"--sidebar-element-hover-color": ColorAttribute,
+		"--toolbar-icon-color": ColorAttribute,
+		"--toolbar-selected-color": ColorAttribute,
+		"--toolbar-icon-background-color": ColorAttribute,
 		"--settings-danger-button-color": ColorAttribute,
 		"--settings-safe-button-color": ColorAttribute,
 	})

src/lib/components/sidePanel/SidePanel.svelte

@@ -67,6 +67,9 @@
 	/>
 {/if}
 <div class="side-panel" style="flex-basis: {panelWidth}px">
+	{#if panelSide === SidePanelEnum.Left}
+		<slot name="toolbar" />
+	{/if}
 	<nav class="inner-nav">
 		<slot name="nav" />
 	</nav>

src/lib/components/toolBar/ToolBar.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import ToolbarItem from "./ToolBarItem.svelte";
+	import {
+		Content_cut,
+		Arrow_downward,
+		Arrow_right,
+	} from "svelte-google-materialdesign-icons";
+	import SvgButton from "../buttons/SvgButton.svelte";
+	import EcdarConsole from "$lib/classes/console/Console";
+
+	export let collapsed: boolean = false;
+	let collapsedSize: string = "0em";
+	let toolbarSize = collapsedSize;
+
+	/**
+	 * Collapses or expands the toolbar
+	 */
+	function collapseOrExpand() {
+		if (collapsed) {
+			toolbarSize = "0";
+			collapsed = false;
+		} else {
+			toolbarSize = "fit-content";
+			collapsed = true;
+		}
+	}
+</script>
+
+<nav>
+	<div id="tools-nav">
+		<div>
+			<h1>Tools</h1>
+		</div>
+		<button class="collapsible unselectable">
+			<SvgButton
+				icon={collapsed ? Arrow_downward : Arrow_right}
+				click={collapseOrExpand}
+				id="toolbar-collapse-expand"
+				color="white"
+			/>
+		</button>
+	</div>
+</nav>
+
+<div class="tool-bar-style" style="height: {toolbarSize}" data-testid="toolbar">
+	<!-- Add ToolBarItems here, containing name, icon, onClick and description -->
+	<ToolbarItem
+		name="Cut"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut pressed!");
+		}}
+		description="This is a testfunction for cut"
+	/>
+	<ToolbarItem
+		name="Cut2"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 2 pressed!");
+		}}
+		description="This is a testfunction for cut 2"
+	/>
+	<ToolbarItem
+		name="Cut3"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 3 pressed!");
+		}}
+		description="This is a testfunction for cut 3"
+	/>
+	<ToolbarItem
+		name="Cut4"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 4 pressed!");
+		}}
+		description="This is a testfunction for cut 4"
+	/>
+	<ToolbarItem
+		name="Cut5"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 5 pressed!");
+		}}
+		description="This is a testfunction for cut 5"
+	/>
+	<ToolbarItem
+		name="Cut6"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 6 pressed!");
+		}}
+		description="This is a testfunction for cut 6"
+	/>
+	<ToolbarItem
+		name="Cut7"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 7 pressed!");
+		}}
+		description="This is a testfunction for cut 7"
+	/>
+	<ToolbarItem
+		name="Cut8"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 8 pressed!");
+		}}
+		description="This is a testfunction for cut 8"
+	/>
+	<ToolbarItem
+		name="Cut9"
+		icon={Content_cut}
+		onClick={() => {
+			// Your custom logic here
+			EcdarConsole.writeLineFrontend("Cut 9 pressed!");
+		}}
+		description="This is a testfunction for cut 9"
+	/>
+</div>
+
+<style>
+	.tool-bar-style {
+		font-size: 0; /* This removes the space between buttons*/
+		margin-right: -2px;
+		margin-bottom: 0px;
+	}
+	nav {
+		background-color: var(--main-navigationbar-color);
+		color: var(--navigationbar-text-color);
+		height: 5em;
+		flex-shrink: 0;
+	}
+	#tools-nav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 100%;
+		padding: 0 1em;
+		margin-bottom: 0px;
+	}
+	.collapsible {
+		background-color: var(--console-topbar-background-color);
+		float: right;
+		background: none;
+		border: none;
+		display: flex;
+	}
+</style>

src/lib/components/toolBar/ToolBarItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { setContext, type ComponentType } from "svelte";
+	import { tooltip } from "svooltip";
+	import "svooltip/styles.css"; // Include default styling
+	import selectedItem from "$lib/globalState/toolbarState";
+
+	export let icon: ComponentType;
+	export let name: string;
+	export let onClick: () => void;
+	export let description: string;
+
+	/**
+	 * Calls the on:Click function on the button
+	 */
+	function handleClick() {
+		onClick();
+		$selectedItem = name;
+	}
+
+	const iconCtx = {
+		strokeWidth: "1.5",
+		size: "100%",
+		variation: "filled",
+	};
+	setContext("iconCtx", iconCtx);
+
+	const slugify = (str = "") =>
+		str.toLowerCase().replace(/ /g, "-").replace(/\./g, "");
+</script>
+
+<label
+	class="tool-bar-item"
+	for={slugify(name)}
+	use:tooltip={{ content: description }}
+>
+	<input
+		type="radio"
+		name="tools"
+		id={slugify(name)}
+		value={name}
+		on:click={handleClick}
+		style="display: none;"
+	/>
+	<svelte:component this={icon} style={"color: var(--toolbar-icon-color)"}
+	></svelte:component>
+</label>
+
+<style>
+	.tool-bar-item {
+		display: inline-flex;
+		align-items: left;
+		justify-content: space-evenly;
+		width: calc(
+			100% / 9
+		); /* adjusts the space evenly to the tools. In this case 9 buttons*/
+		border: var(--main-innernavigationbar-border);
+		cursor: pointer;
+		margin-bottom: -2px;
+		background-color: var(--toolbar-icon-background-color);
+	}
+	label:has(input[type="radio"]:checked) {
+		background-color: var(--toolbar-selected-color);
+	}
+</style>

src/lib/globalState/toolbarState.ts

@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+
+const selectedItem = writable("");
+
+export default selectedItem;

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { project } from "$lib/globalState/activeProject";
 	import StartScreen from "$lib/components/startScreen/StartScreen.svelte";
+	import Toolbar from "$lib/components/toolBar/ToolBar.svelte";
 	import TopBar from "$lib/components/topBar/TopBar.svelte";
 	import SidePanel from "$lib/components/sidePanel/SidePanel.svelte";
 	import { SidePanelEnum } from "$lib/components/sidePanel/SidePanelEnum";
@@ -29,6 +30,7 @@
 	{:else}
 		<!-- Left side -->
 		<SidePanel panelSide={SidePanelEnum.Left}>
+			<Toolbar slot="toolbar" />
 			<ProjectNav slot="nav" />
 			<div slot="content">
 				<GlobalDeclaration />

tests/lib/components/toolbar/toolbar.test.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+	await page.waitForLoadState();
+	await page.click("#start-new-project");
+});
+
+test("toolbar collapses and extends", async ({ page }) => {
+	let toolbar = await page.getByTestId("toolbar").boundingBox();
+	expect(toolbar?.height).toEqual(0);
+	await page.locator("#tools-nav").getByRole("button").nth(1).click();
+	toolbar = await page.getByTestId("toolbar").boundingBox();
+	expect(toolbar?.height).toBeGreaterThan(0);
+	await page.locator("#tools-nav").getByRole("button").nth(1).click();
+	toolbar = await page.getByTestId("toolbar").boundingBox();
+	expect(toolbar?.height).toEqual(0);
+});

tests/lib/components/toolbar/toolbarItem.test.ts

@@ -0,0 +1,32 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+	await page.waitForLoadState();
+	await page.click("#start-new-project");
+});
+
+test("selected button lights up correctly", async ({ page }) => {
+	await page.locator("#tools-nav").getByRole("button").nth(1).click();
+	const firstTool = page.locator(".tool-bar-item").first();
+	const unSelectedcolor = await firstTool.evaluate((el) => {
+		return window.getComputedStyle(el).getPropertyValue("background-color");
+	});
+
+	await page.locator(".tool-bar-item > svg").first().click();
+
+	const Selectedcolor = await firstTool.evaluate((el) => {
+		return window.getComputedStyle(el).getPropertyValue("background-color");
+	});
+	await page.locator("label:nth-child(2) > svg").click();
+
+	expect(Selectedcolor).not.toBe(unSelectedcolor);
+
+	const secondTool = page.locator(".tool-bar-item").nth(1);
+
+	const secondToolSelectedcolor = await secondTool.evaluate((el) => {
+		return window.getComputedStyle(el).getPropertyValue("background-color");
+	});
+
+	expect(Selectedcolor).toBe(secondToolSelectedcolor);
+});