Main application structure (#21)

* Implemented the sidebars and made them resizable Co-Authored-By: Nyby <[email protected]> * Implemented navigation bars Created the skeleton of the navigation bars and made the sidebars and canvas resizable. Big thanks to @NybyDK! Without their knowledge this would not be possible! Co-Authored-By: Nyby <[email protected]> * Optimized the adding and removing of eventlisteners * Uncommented the outdated tests and cleaned up * Fixed the GUI test * Simplify resize event It only runs when `currentSide` has a value, otherwise it is unregistered. * Prevent default on click This ensures that text is not selected when moving the bar around * Capture the pointer This fixes a lot of edge case behavior. For example, minimize the browser, start dragging the bar, and then move the cursor outside of the browser. The bar will stop dragging (bug!). Then release the mouse outside of the window and move the cursor back into the browser. The bar will now start following the cursor again, even though it is not dragging (bug!). Capturing the pointer solves both of these issues. * Listen for pointer cancel If we don't listen for this, there can be edge cases where we never stop listening for a cursor that no longer exists. For example if the mouse loses connection while dragging. * Clarified some function and variable names and wrote some comments Co-Authored-By: Nyby <[email protected]> * Attempted to streamline the variable, function and Enum name * Implemented a more scalable solution Implemented a more scalable solution to the sidepanels, top- and bottom navbars. * Discarded the percentage solution * Removed unused import --------- Co-authored-by: Nyby <[email protected]> Co-authored-by: Anton <[email protected]>
Ecdar · Sep 28, 2023 · 5f2f356 · 5f2f356
1 parent 1e92d14
commit 5f2f356
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 11 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,19 @@
-
 <svelte:head>
 	<title>Ecdar</title>
 </svelte:head>
 
-<slot></slot>
+<slot />
+
+<style>
+	:global(*) {
+		box-sizing: border-box;
+	}
+
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		height: 100vh;
+		display: flex;
+		flex-flow: column;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,11 +1,139 @@
 <script lang="ts">
-	import { Hiking } from 'svelte-google-materialdesign-icons';
+	enum SidePanel {
+		Left,
+		Right,
+		Neither
+	}
+
+	let currentResizablePanel: SidePanel = SidePanel.Neither;
+	let leftSidePanelWidth: number = 300;
+	let rightSidePanelWidth: number = 300;
+	let mainContainer: HTMLElement;
+
+	/**
+	 * Function for resizing a sidepanel
+	 * @param event
+	 */
+	function resizeSidePanel(event: MouseEvent) {
+		event.preventDefault();
+		if (currentResizablePanel === SidePanel.Left) {
+			leftSidePanelWidth = event.x;
+		} else {
+			rightSidePanelWidth = window.innerWidth - event.x;
+		}
+	}
+
+	/**
+	 * Function for starting resizing a side panel
+	 * @param event
+	 * @param side
+	 */
+	function startResizingSidePanel(event: PointerEvent, side: SidePanel) {
+		event.preventDefault();
+		currentResizablePanel = side;
+		mainContainer.setPointerCapture(event.pointerId);
+		mainContainer.addEventListener('pointermove', resizeSidePanel);
+		mainContainer.addEventListener('pointerup', stopResizingSidePanel);
+		mainContainer.addEventListener('pointercancel', stopResizingSidePanel);
+	}
+
+	/**
+	 * Function for stopping resizing a sid panel
+	 * @param event
+	 */
+	function stopResizingSidePanel(event: PointerEvent) {
+		currentResizablePanel = SidePanel.Neither;
+		mainContainer.releasePointerCapture(event.pointerId);
+		mainContainer.removeEventListener('pointermove', resizeSidePanel);
+		mainContainer.removeEventListener('pointerup', stopResizingSidePanel);
+		mainContainer.removeEventListener('pointercancel', stopResizingSidePanel);
+	}
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<!-- Top navigation Panel -->
+<nav id="main-nav"></nav>
+<main bind:this={mainContainer}>
+	<!-- Left side Panel -->
+	<div class="sidePanel" style="flex-basis: {leftSidePanelWidth}px">
+		<nav class="inner-nav1">Nav 1</nav>
+		<p>Left</p>
+	</div>
+	<!-- Left resize Panel -->
+	<div
+		role="button"
+		id="leftresizer"
+		class="resizer"
+		tabindex="-1"
+		on:pointerdown={(event) => {
+			startResizingSidePanel(event, SidePanel.Left);
+		}}
+	/>
+	<!-- Canvas -->
+	<div class="canvas">
+		<nav class="inner-nav2">Nav 2</nav>
+		<p>Canvas</p>
+	</div>
+	<!-- Right resize Panel -->
+	<div
+		role="button"
+		id="leftresizer"
+		class="resizer"
+		tabindex="-1"
+		on:pointerdown={(event) => {
+			startResizingSidePanel(event, SidePanel.Right);
+		}}
+	/>
+	<!-- Right side Panel -->
+	<div class="sidePanel" style="flex-basis: {rightSidePanelWidth}px">
+		<nav class="inner-nav3">Nav 3</nav>
+		<p>Right</p>
+	</div>
+</main>
+<!-- Footer component -->
+<footer>Footer/Console</footer>
+
+<style>
+	nav {
+		height: 5em;
+		background-color: slategrey;
+	}
+
+	#main-nav {
+		height: 2.5em;
+	}
+
+	main {
+		display: flex;
+		height: 100%;
+	}
+
+	.inner-nav1,
+	.inner-nav3 {
+		background-color: slategrey;
+	}
+
+	.inner-nav2 {
+		background-color: lightslategrey;
+	}
+
+	.sidePanel {
+		background-color: whitesmoke;
+		flex-basis: 10em;
+	}
+
+	.resizer {
+		background-color: black;
+		flex-basis: 0.3em;
+		cursor: col-resize;
+	}
+
+	.canvas {
+		background-color: whitesmoke;
+		flex-grow: 1;
+	}
 
-<p>
-	Example of using svelte material icons: <Hiking /> all available icons can be found at
-	<a href="https://pictogrammers.com/library/mdi/">https://pictogrammers.com/library/mdi/</a>
-</p>
+	footer {
+		height: 2.5em;
+		background-color: slategrey;
+	}
+</style>
diff --git a/tests/test.ts b/tests/test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-test('index page has expected h1', async ({ page }) => {
+test('page title is ecdar', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+	await expect(page).toHaveTitle(/Ecdar/);
 });