Merge branch 'main' into 81-feature-frontend-for-engine-configuration…

…-group5

src/lib/components/contextMenu/contentTypes/locationMenu/LocationMenu.svelte

@@ -23,11 +23,23 @@
 		icon={Delete}
 		text="Delete"
 		click={() => {
-			location.remove();
+			// TODO: implement
+		}}
+	/>
+	<Button
+		icon={Warning}
+		text="Deattach"
+		click={() => {
+			// TODO: implement
+		}}
+	/>
+	<Button
+		icon={Star}
+		text="Star"
+		click={() => {
+			// TODO: implement
 		}}
 	/>
-	<Button icon={Warning} text="Deattach" click={() => {}} />
-	<Button icon={Star} text="Star" click={() => {}} />
 </Panel>
 <Panel>
 	<p>Color</p>

src/lib/components/engineUI/showEngineUI.ts

@@ -0,0 +1,3 @@
+
+
+

src/lib/components/modal/Modal.svelte

@@ -1,62 +1,66 @@
 <script lang="ts">
-	let dialogContainer: HTMLDialogElement;
-	export let ModalCloseOnBackdrop: boolean = false;
+	let dialog: HTMLDialogElement | undefined;
 
 	/**
-	 * Function for showing the current modal
+	 * Allows the user to close the modal by clicking outside it.
 	 */
-	export function showModal() {
-		dialogContainer.showModal();
-	}
+	export let closeOnBackdrop: boolean = false;
 
 	/**
-	 * Function for closing the current modal
+	 * Whether or not the modal is open or closed.
 	 */
-	export function closeModal() {
-		dialogContainer.close();
+	export let show: boolean = false;
+
+	/**
+	 * Ensures that the real DOM element is opened or closed when the svelte value changes.
+	 */
+	$: if (dialog && show) {
+		dialog.showModal();
+	} else {
+		dialog?.close();
 	}
 
 	/**
-	 * Function for closing the current modal when the backdrop is clicked if
-	 * ModalCloseOnBackdrop is true
+	 * Closes the modal if the user clicks outside it
+	 * Only works if closeOnBackdrop is true
 	 */
-	function closeModalOnBackdropClick() {
-		if (ModalCloseOnBackdrop) {
-			dialogContainer.close();
+	function closeOnBackdropClick(event: MouseEvent) {
+		if (!closeOnBackdrop) return;
+		if (!dialog) {
+			throw new TypeError("Dialog should always be defined on mount");
+		}
+		/**
+		 * TODO: Is there really no better way to check if the user clicked outside?
+		 */
+		const rect = dialog.getBoundingClientRect();
+		const clickIsOnDialog =
+			rect.top <= event.clientY &&
+			event.clientY <= rect.top + rect.height &&
+			rect.left <= event.clientX &&
+			event.clientX <= rect.left + rect.width;
+		if (!clickIsOnDialog) {
+			show = false;
 		}
 	}
 </script>
 
 <!--TODO: Remove this when supported by Svelte-->
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 <dialog
-	bind:this={dialogContainer}
-	on:click|self={() => {
-		closeModalOnBackdropClick();
+	bind:this={dialog}
+	on:click|self={(event) => {
+		closeOnBackdropClick(event);
 	}}
 >
-	<div class="box">
-		<slot />
-	</div>
+	<slot />
 </dialog>
 
 <style>
-	.box {
-		max-width: 100vw;
-		display: block;
-		position: fixed;
-		background-color: var(--modal-background-color);
-		z-index: 100;
-		transform: translate(-50%, -50%);
-		top: 50%;
-		left: 50%;
-	}
-
 	dialog {
-		max-width: 100vw;
-		width: 100vw;
-		max-height: 100vh;
-		height: 100vh;
-		background-color: rgba(0, 0, 0, 0.2);
+		color: var(--text-color);
+		background-color: var(--background-color);
+	}
+	dialog::backdrop {
+		background-color: var(--modal-background-color);
 	}
 </style>

src/lib/components/settings/SettingsView.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import Tabs from "$lib/components/tabs/Tabs.svelte";
 	import type { Tab } from "$lib/components/tabs/Tab";
 	import ColorSettings from "$lib/components/settings/ColorSettings.svelte";
 	import FontSettings from "$lib/components/settings/FontSettings.svelte";
-
-	const dispatch = createEventDispatcher();
+	import Modal from "../modal/Modal.svelte";
+	import { showSettings } from "./showSettings";
 
 	const settingTabs: Tab[] = [
 		{
@@ -19,17 +18,19 @@
 	];
 </script>
 
-<div id="setting-tabs-container">
-	<Tabs tabs={settingTabs} />
-</div>
+<Modal show={$showSettings}>
+	<div id="setting-tabs-container">
+		<Tabs tabs={settingTabs} />
+	</div>
 
-<button
-	on:click={() => {
-		dispatch("toggleSettings");
-	}}
->
-	<p>Close Settings</p>
-</button>
+	<button
+		on:click={() => {
+			$showSettings = false;
+		}}
+	>
+		<p>Close Settings</p>
+	</button>
+</Modal>
 
 <style>
 	button {

src/lib/components/settings/showSettings.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const showSettings = writable(false);

src/lib/components/topBar/TopBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import type { projectHandler as ProjectHandler } from "$lib/classes/projectHandler/ProjectHandler";
 	import TopBarButton from "$lib/components/topBar/TopBarButton.svelte";
 	import DropDownButton from "$lib/components/topBar/DropDownButton.svelte";
@@ -19,8 +19,9 @@
 		Help,
 		Error,
 	} from "svelte-google-materialdesign-icons";
+	import SettingsView from "$lib/components/settings/SettingsView.svelte";
+	import { showSettings } from "$lib/components/settings/showSettings";
 
-	const dispatch = createEventDispatcher();
 	let projectHandler: typeof ProjectHandler;
 
 	onMount(async () => {
@@ -220,7 +221,7 @@
 			icon={Settings}
 			name="Settings"
 			on:click={() => {
-				dispatch("toggleSettings");
+				$showSettings = true;
 			}}
 		/>
 	</TopBarButton>
@@ -246,6 +247,8 @@
 	</TopBarButton>
 </div>
 
+<SettingsView />
+
 <style>
 	div {
 		height: 100%;

src/lib/globalState/activeProject.ts

@@ -250,6 +250,6 @@ function closeActiveViewIfDeleted() {
 			activeViewValue,
 		)
 	) {
-		activeViewValue = undefined;
+		activeView.set(undefined);
 	}
 }

src/routes/+page.svelte

@@ -9,31 +9,13 @@
 	import ProjectNav from "$lib/components/project/ProjectNav.svelte";
 	import GlobalDeclaration from "$lib/components/project/globalDeclaration/GlobalDeclaration.svelte";
 	import Queries from "$lib/components/query/Queries.svelte";
-	import type IEngineUIComponent from "$lib/interfaces/IEngineUIComponent";
-	import EngineUi from "$lib/components/engineUI/EngineUI.svelte";
 	import QueryNav from "$lib/components/query/QueryNav.svelte";
 	import ProjectItems from "$lib/components/project/ProjectItems.svelte";
-	import Settings from "$lib/components/settings/SettingsView.svelte";
-
-	let engineUIContainer: EngineUi & IEngineUIComponent;
-
-	function openEngineUI() {
-		engineUIContainer.showEngineUI();
-	}
-
-	let showSettings: boolean = false;
-	function toggleSettings() {
-		showSettings = !showSettings;
-	}
 </script>
 
 <!-- Top navigation Panel -->
-<EngineUi bind:this={engineUIContainer} />
 <nav id="main-nav">
-	<TopBar
-		on:toggleSettings={toggleSettings}
-		on:toggleEngineUI={openEngineUI}
-	/>
+	<TopBar />
 </nav>
 <main>
 	{#if $project === undefined}
@@ -51,11 +33,7 @@
 		<div class="canvas">
 			<nav class="inner-nav2">Nav 2</nav>
 			<!-- Replace Settings with a modal or new window instead of replacing the SVG View -->
-			{#if showSettings}
-				<Settings on:toggleSettings={toggleSettings} />
-			{:else}
-				<SvgView />
-			{/if}
+			<SvgView />
 		</div>
 		<!-- Right side -->
 		<SidePanel panelSide={SidePanelEnum.Right}>

tests/lib/components/settings/settings.test.ts

@@ -81,48 +81,3 @@ test("change to color tab", async ({ page }) => {
 	await expect(buttons[0]).toHaveClass(/active/);
 	await expect(buttons[1]).not.toHaveClass(/active/);
 });
-
-test("returns to svg-view when closing through top navbar", async ({
-	page,
-}) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the setting button in the nav-bar again
-	await page
-		.getByRole("button", { name: "settings Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-});
-
-test("returns to svg-view when closing through button", async ({ page }) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the close button in setting view
-	await page
-		.getByRole("button", { name: "Close Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-});
-
-test("can reopen settings after closing", async ({ page }) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the close button in setting view
-	await page
-		.getByRole("button", { name: "Close Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-
-	// Click the open settings button to reopen
-	await page.getByRole("button", { name: "Options", exact: true }).hover();
-	await page
-		.getByRole("button", { name: "settings Settings", exact: true })
-		.click();
-
-	// Check if the tab buttons are visible
-	const buttons = await getTabButtons(page);
-	expect(buttons).toHaveLength(2);
-});