Added toolbox over lunch

davemackintosh · Jun 20, 2024 · 1f075a4 · 1f075a4
1 parent ae63797
commit 1f075a4
Show file tree

Hide file tree

Showing 8 changed files with 329 additions and 261 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -12,30 +12,30 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.4.0",
-		"@sveltejs/adapter-auto": "^3.2.1",
-		"@sveltejs/kit": "^2.5.10",
+		"@eslint/js": "^9.5.0",
+		"@sveltejs/adapter-auto": "^3.2.2",
+		"@sveltejs/kit": "^2.5.17",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@types/eslint": "^8.56.10",
-		"eslint": "^9.4.0",
+		"eslint": "^9.5.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-svelte": "^2.39.3",
-		"globals": "^15.4.0",
+		"eslint-plugin-svelte": "^2.40.0",
+		"globals": "^15.6.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
 		"svelte": "^4.2.18",
-		"svelte-check": "^3.8.0",
+		"svelte-check": "^3.8.1",
 		"tslib": "^2.6.3",
 		"typescript": "^5.4.5",
-		"typescript-eslint": "^7.13.0",
-		"vite": "^5.2.13"
+		"typescript-eslint": "^7.13.1",
+		"vite": "^5.3.1"
 	},
 	"type": "module",
 	"packageManager": "yarn@4.3.0",
 	"dependencies": {
 		"rxdb": "^15.24.0",
 		"rxjs": "^7.8.1",
-		"ts-pattern": "^5.1.2"
+		"ts-pattern": "^5.2.0"
 	}
 }
diff --git a/src/app.html b/src/app.html
@@ -1,23 +1,30 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-		<style>
-			html,
-			body {
-				margin: 0;
-				padding: 0;
-				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-					sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-			}
-		</style>
-	</head>
 
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+	<style>
+		html,
+		body {
+			margin: 0;
+			padding: 0;
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+				sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+			overflow: hidden;
+		}
+
+		* {
+			color: inherit;
+		}
+	</style>
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
 </html>
diff --git a/src/lib/app-config/index.ts b/src/lib/app-config/index.ts
@@ -9,7 +9,6 @@ interface AppThemeProperties {
 interface PersistableThemeBundle {
 	readonly bundleName: string
 	currentThemeKey: string
-	readonly themes: Record<string, AppThemeProperties>
 }
 
 interface AppTheme extends PersistableThemeBundle {

diff --git a/src/lib/app-config/themes/default.ts b/src/lib/app-config/themes/default.ts
@@ -19,7 +19,7 @@ export class DefaultTheme implements AppTheme {
 		}
 	}
 
-	private static DEFAULT_THEME_KEY = "dark"
+	private static DEFAULT_THEME_KEY = "light"
 
 	constructor(bundleName?: string, currentThemeKey?: string) {
 		this.bundleName = bundleName ?? "com.novum.norrsken-theme"

diff --git a/src/lib/components/toolbox.svelte b/src/lib/components/toolbox.svelte
@@ -0,0 +1,56 @@
+<script lang="ts" context="module">
+	export enum AvailableTools {
+		Pointer,
+		RectangleSelector,
+		Paintbrush,
+	}
+
+	export interface ToolDescriptor {
+		name: string
+		icon: string
+		description: string
+	}
+</script>
+
+<script lang="ts">
+	const toolbelt: Record<AvailableTools, ToolDescriptor> = {
+		[AvailableTools.Pointer]: {
+			name: "Pointer",
+			icon: "/theme/cursor-dark.png",
+			description: "Pointer",
+		},
+		[AvailableTools.RectangleSelector]: {
+			name: "RectangleSelector",
+			icon: "/theme/cursor-dark.png",
+			description: "RectangleSelector",
+		},
+		[AvailableTools.Paintbrush]: {
+			name: "Paintbrush",
+			icon: "/theme/cursor-dark.png",
+			description: "Paintbrush",
+		},
+	}
+</script>
+
+<ul class="toolbox">
+	{#each Object.values(toolbelt) as tool}
+		<li>
+			<button type="button" title={tool.name}>
+				<img src={tool.icon} alt={tool.description} width="16" height="16" />
+			</button>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.toolbox {
+		margin: 0;
+		padding: 0;
+	}
+
+	.toolbox li {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+</style>
diff --git a/src/routes/project/[id]/+page.svelte b/src/routes/project/[id]/+page.svelte
@@ -18,6 +18,7 @@
 	import { CanvasPointComponent } from "$lib/ecs/components/canvas-point"
 	import { CanvasPointsSystem } from "$lib/ecs/systems/canvas-points"
 	import { appTheme } from "$lib/stores/app-config"
+	import Toolbox from "$lib/components/toolbox.svelte"
 
 	let canvas: HTMLCanvasElement | null
 	let currentLayer: Layer | null = null
@@ -164,6 +165,7 @@
 					{/each}
 				</ol>
 			</div>
+			<Toolbox />
 		</aside>
 		<canvas
 			bind:this={canvas}
@@ -199,7 +201,6 @@
 		right: 0;
 		bottom: 0;
 		z-index: 0;
-		cursor: none;
 	}
 
 	ol {
@@ -229,4 +230,9 @@
 	.layers button:hover {
 		cursor: pointer;
 	}
+
+	.project-meta {
+		display: flex;
+		flex-direction: row;
+	}
 </style>