69 create systems comps (#102)

* Add systems and components * Maybe this way to rename? * Moved handler so can click if there is no text For example if user names it whitespace it can be hard to rename * Sveltify and add description * Color options Systems and Components files are almost identical * Type * Merge components and systems into 1 file * Drop down menu for project items * Delete ComponentDropDownMenu.svelte * Update ProjectItemDropDownMenu.svelte * Fix periodic check binding in ProjectItems and add dynamic class to ProjectItem * 40 Implemented dynamic global css variables (#89) * Implemented everything I made a huge mistake and merge comitted the branch linked to issue #50 into my original CSS branch. This included every individual commits from the other branch into my CSS branch. I tried to revert it but failed and was therefore forced to use this solution. * Added dark mode color to edges * Created a CSS variable support check This makes sure that no unsupported CSS variables are used. The supported CSS variables are specified in CSSVariables.ts * Changed resizer size * Removed unnecessary media schemes * Removed mediaFeature check * Corrrect the parsed error type * Removed the passing of the global window variable * Removed the need for range checking by using zod * Improved the zod schemes The zod schemes now enforce: - The color value range - That the "default" mediascheme contains a specification of all specified CSS variables and more... * Fix typo * Did some color styling to the navbar * Add IDs to add component and add system buttons in ProjectNav component * css variables * Update project item and dropdown menu components Co-authored-by: Nyby <[email protected]> * Remove unused imports and clean up code. * Fix tests and add new ones Co-authored-by: Nyby <[email protected]> * lint --------- Co-authored-by: Skrome <[email protected]> Co-authored-by: Nyby <[email protected]> Co-authored-by: Bastian Brix <[email protected]> Co-authored-by: Nyby <[email protected]>
Ecdar · Nov 10, 2023 · df1616e · df1616e
1 parent c576b2f
commit df1616e
Show file tree

Hide file tree

Showing 13 changed files with 479 additions and 189 deletions.
diff --git a/src/lib/classes/automaton/Component.ts b/src/lib/classes/automaton/Component.ts
@@ -1,7 +1,5 @@
 import { Point, Dimensions } from "$lib/classes/draw";
-
 import { Edge, Location, type Named, Raw } from "../automaton";
-import {} from "./raw/RawComponent";
 
 /**
  * # An Ecdar component

diff --git a/src/lib/components/overlayMenu/OverlayMenu.svelte b/src/lib/components/overlayMenu/OverlayMenu.svelte
@@ -170,7 +170,7 @@
 		background-color: #fff;
 		border-radius: 0.75em;
 		margin: 0;
-		padding: 0.2em;
+		padding: 0.5em;
 
 		position: fixed;
 		display: flex;

diff --git a/src/lib/components/overlayMenu/elements/Button.svelte b/src/lib/components/overlayMenu/elements/Button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComponentType } from "svelte";
 
-	export let click: () => void;
+	export let click: (event: MouseEvent) => void;
 
 	export let icon: ComponentType;
 

diff --git a/src/lib/components/project/ProjectItem.svelte b/src/lib/components/project/ProjectItem.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import {
+		Folder_special,
+		Request_page,
+	} from "svelte-google-materialdesign-icons";
+	import ProjectItemDropDownMenu from "./ProjectItemDropDownMenu.svelte";
+
+	export let name: string;
+	export let description: string;
+	export let color: string;
+	export let includeInPeriodicCheck: boolean = false;
+	export let index: number;
+	export let itemType: "system" | "component";
+
+	function handleDoubleClick() {
+		name = prompt("New name:", name) || name;
+	}
+</script>
+
+<div class="project-item {itemType}" id="{itemType}-{index}">
+	<div
+		class="left"
+		on:dblclick={handleDoubleClick}
+		role="button"
+		tabindex="-1"
+	>
+		<div class="circle" style="background-color: {color}">
+			<div class="icon">
+				{#if itemType === "component"}
+					<Folder_special size="100%" />
+				{:else}
+					<Request_page size="100%" />
+				{/if}
+			</div>
+		</div>
+		<p>{name}</p>
+	</div>
+	<div>
+		{#if itemType === "component"}
+			<ProjectItemDropDownMenu
+				bind:description
+				bind:color
+				bind:includeInPeriodicCheck
+				{index}
+				{itemType}
+			/>
+		{:else}
+			<ProjectItemDropDownMenu
+				bind:description
+				bind:color
+				{index}
+				{itemType}
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.left {
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.project-item {
+		background-color: var(--sidebar-element-color);
+		cursor: pointer;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 10px;
+		border-bottom: 1px solid black;
+		transition: background-color 200ms;
+	}
+
+	.project-item:hover {
+		background-color: var(--sidebar-element-hover-color);
+	}
+
+	.icon {
+		display: flex;
+		vertical-align: middle;
+		padding: 15%;
+	}
+
+	.circle {
+		margin-right: 10px;
+		display: flex;
+		height: 50px;
+		width: 50px;
+		min-width: 50px;
+		border-radius: 70px;
+		justify-content: center;
+	}
+</style>
diff --git a/src/lib/components/project/ProjectItemDropDownMenu.svelte b/src/lib/components/project/ProjectItemDropDownMenu.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+	import {
+		More_vert,
+		Delete,
+		Check_box,
+		Check_box_outline_blank,
+	} from "svelte-google-materialdesign-icons";
+	import { systems, components } from "$lib/globalState/activeProject";
+	import OverlayMenu from "$lib/components/overlayMenu/OverlayMenu.svelte";
+	import Panel from "$lib/components/overlayMenu/Panel.svelte";
+	import Button from "$lib/components/overlayMenu/elements/Button.svelte";
+
+	export let description: string;
+	export let color: string;
+	export let includeInPeriodicCheck: boolean = false;
+	export let index: number;
+	export let itemType: "system" | "component";
+
+	const colorOptions = [
+		"grey",
+		"orange",
+		"red",
+		"pink",
+		"purple",
+		"blue",
+		"skyblue",
+		"cyan",
+		"green",
+		"brown",
+	];
+
+	const menuId = `${itemType}-menu-${index}`;
+	let button: HTMLElement;
+
+	function togglePeriodicCheck(event: MouseEvent) {
+		event.stopPropagation();
+		includeInPeriodicCheck = !includeInPeriodicCheck;
+	}
+</script>
+
+<button
+	class="dropdown"
+	bind:this={button}
+	popovertarget={menuId}
+	id={`${itemType}-button-${index}`}
+>
+	<More_vert />
+</button>
+<OverlayMenu anchor={button} id={menuId}>
+	{#if itemType === "component"}
+		<Panel>
+			<p>Configuration</p>
+			{#if includeInPeriodicCheck}
+				<Button
+					icon={Check_box}
+					text="Include in periodic check"
+					click={togglePeriodicCheck}
+				/>
+			{:else}
+				<Button
+					icon={Check_box_outline_blank}
+					text="Include in periodic check"
+					click={togglePeriodicCheck}
+				/>
+			{/if}
+		</Panel>
+	{/if}
+	<Panel>
+		<p>Description</p>
+		<input type="text" bind:value={description} on:click|stopPropagation />
+	</Panel>
+	<Panel>
+		<div class="colors">
+			{#each colorOptions as colorOption}
+				<button
+					style="background-color: {colorOption}"
+					class="color"
+					on:click={() => {
+						color = colorOption;
+					}}
+				/>
+			{/each}
+		</div>
+	</Panel>
+	<Panel>
+		<Button
+			icon={Delete}
+			text="Delete"
+			click={() => {
+				// this is switch because it will support more than 2 in the future
+				switch (itemType) {
+					case "system":
+						$systems?.splice(index, 1);
+						$systems = $systems;
+						break;
+					case "component":
+						$components?.splice(index, 1);
+						$components = $components;
+						break;
+					default:
+						break;
+				}
+			}}
+		/>
+	</Panel>
+</OverlayMenu>
+
+<style>
+	button {
+		color: var(--sidebar-text-color);
+		padding: 0;
+	}
+
+	p {
+		margin: 0.5em 0;
+	}
+
+	.dropdown {
+		background: none;
+		border: none;
+		cursor: pointer;
+	}
+
+	.colors {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
+	}
+
+	.color {
+		display: inline-block;
+		border: none;
+		height: 2em;
+		width: 2em;
+		border-radius: 100%;
+	}
+</style>
diff --git a/src/lib/components/project/ProjectItems.svelte b/src/lib/components/project/ProjectItems.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import ProjectItem from "./ProjectItem.svelte";
+	import { systems, components } from "$lib/globalState/activeProject";
+</script>
+
+{#each $components || [] as component, index}
+	<ProjectItem
+		bind:name={component.name}
+		bind:description={component.description}
+		bind:color={component.color}
+		bind:includeInPeriodicCheck={component.includeInPeriodicCheck}
+		itemType="component"
+		{index}
+	/>
+{/each}
+{#each $systems || [] as system, index}
+	<ProjectItem
+		bind:name={system.name}
+		bind:description={system.description}
+		bind:color={system.color}
+		itemType="system"
+		{index}
+	/>
+{/each}
diff --git a/src/lib/components/project/ProjectNav.svelte b/src/lib/components/project/ProjectNav.svelte
@@ -3,12 +3,24 @@
 		Note_add,
 		Create_new_folder,
 	} from "svelte-google-materialdesign-icons";
+	import { components, systems } from "$lib/globalState/activeProject";
+	import { Component } from "$lib/classes/automaton/Component";
+	import { System } from "$lib/classes/automaton/System";
+
 	function addComponent() {
-		console.log("Add component");
+		const newComponent = new Component("New Component");
+		newComponent.color = "grey";
+		newComponent.description = "This is a description.";
+		$components?.push(newComponent);
+		$components = $components;
 	}
 
 	function addSystem() {
-		console.log("Add system");
+		const newSystem = new System("New System");
+		newSystem.color = "lightgrey";
+		newSystem.description = "This is a description.";
+		$systems?.push(newSystem);
+		$systems = $systems;
 	}
 </script>
 
@@ -17,8 +29,8 @@
 		<h1>Project</h1>
 	</div>
 	<div>
-		<Create_new_folder on:click={addSystem} />
-		<Note_add on:click={addComponent} />
+		<Create_new_folder on:click={addComponent} id="add-component" />
+		<Note_add on:click={addSystem} id="add-system" />
 	</div>
 </div>
 

diff --git a/src/lib/components/project/component/Component.svelte b/src/lib/components/project/component/Component.svelte