Adding color palette support

package.json

@@ -36,6 +36,7 @@
 	"dependencies": {
 		"rxdb": "^15.24.0",
 		"rxjs": "^7.8.1",
+		"svelte-awesome-color-picker": "^3.1.0",
 		"ts-pattern": "^5.2.0"
 	}
 }

src/lib/components/color-palette.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" context="module">
+	export enum ColorPaletteToolTab {
+		ColorPicker,
+		PalettePicker
+	}
+</script>
+
+<script lang="ts">
+	import { dbInstance } from "$lib/rxdb/database"
+	import type { ColorPalette, ColorPalettes } from "$lib/types/color-palette"
+	import { onMount } from "svelte"
+
+	let palettes: ColorPalettes = []
+	let currentPalette: ColorPalette | undefined
+
+	onMount(async () => {
+		const query = dbInstance.colorPalette.find()
+		palettes = await query.exec()
+
+		query.$.subscribe(changes => {
+			palettes = changes
+		})
+	})
+
+
+</script>
+
+<div class="color-palette-panel">
+</div>
+
+<style>
+	.color-palette-panel {
+		display: flex;
+		flex-direction: row;
+	}
+</style>

src/lib/cqrs/views/project.ts

@@ -9,6 +9,7 @@ import {
 	SetLayerNameEvent,
 	type ProjectEvents,
 } from "$lib/types/commands-events"
+import type { ColorPalettes } from "$lib/types/color-palette"
 
 class Layer {
 	id: string
@@ -29,6 +30,7 @@ class ProjectView extends View {
 	public name?: string | null
 	public layers: Layer[]
 	public members: string[]
+	public colorPalettes: ColorPalettes
 
 	constructor(name?: string | null, id?: string | null) {
 		super()
@@ -37,6 +39,7 @@ class ProjectView extends View {
 		this.name = name
 		this.layers = []
 		this.members = []
+		this.colorPalettes = []
 	}
 
 	public handle_event(event: ProjectEvents): ProjectView {

src/lib/ecs/systems/canvas-tools/pointer-tool.ts

@@ -0,0 +1,41 @@
+import type { System } from "$lib/ecs/abstracts"
+import { CanvasPointComponent } from "$lib/ecs/components/canvas-point"
+import { RasterizedImageComponent } from "$lib/ecs/components/rasterized-image"
+import type { Entity } from "$lib/ecs/entity"
+import { ToolboxTool, ToolboxToolBase } from "$lib/types/toolbox"
+
+export class PointerTool extends ToolboxToolBase implements System {
+	constructor() {
+		super()
+		this.type = ToolboxTool.PointerTool
+		this.name = "Pointer"
+		this.icon = "pointer"
+		this.description = "Select elements"
+		this.tutorial = "Move the cursor over an element and click/tap to select it."
+	}
+
+	update(entity: Entity): void {
+		const position = entity.getComponent(CanvasPointComponent)
+		const icon = entity.getComponent(RasterizedImageComponent)
+
+		if (!position) {
+			console.warn("Couldn't get position for rectangle selection.")
+			return
+		}
+
+		if (!icon) {
+			console.warn("Didn't find an icon for the cursor.")
+			return
+		}
+
+		icon!.point = position!.point!
+	}
+
+	accepts(component: IComponent): boolean {
+		return match(component)
+			.with(P.instanceOf(RasterizedImageComponent), () => true)
+			.with(P.instanceOf(CanvasPointComponent), () => true)
+			.otherwise(() => false)
+	}
+}
+

src/lib/ecs/systems/canvas-tools/rectangle-select.ts

@@ -0,0 +1,38 @@
+import type { System } from "$lib/ecs/abstracts"
+import { CanvasPointComponent } from "$lib/ecs/components/canvas-point"
+import type { Vector } from "$lib/ecs/components/drawings"
+import type { Entity } from "$lib/ecs/entity"
+import { ToolboxTool, ToolboxToolBase } from "$lib/types/toolbox"
+
+export class RectangleSelection extends ToolboxToolBase implements System {
+	start?: Vector
+	end?: Vector
+
+	constructor(start?: Vector) {
+		super()
+		this.type = ToolboxTool.RectangleSelection
+		this.name = "Rectangle Selection"
+		this.icon = "rectangle"
+		this.description = "Select a rectangle on the canvas."
+		this.tutorial = "Click and drag to create a rectangle."
+
+		this.start = start
+	}
+
+	update(entity: Entity): void {
+		const position = entity.getComponent(CanvasPointComponent)
+
+		if (!position) {
+			console.warn("Couldn't get position for rectangle selection.")
+		}
+
+		console.log(position)
+	}
+
+	accepts(component: IComponent): boolean {
+		return match(component)
+			.with(P.instanceOf(CanvasPointComponent), () => true)
+			.otherwise(() => false)
+	}
+}
+

src/lib/rxdb/collections/colors.ts

@@ -0,0 +1,45 @@
+import { type RxCollection, type RxJsonSchema } from "rxdb"
+import type { ColorPalette as ColorPaletteType } from "$lib/types/color-palette"
+
+const ColorPalette: RxJsonSchema<ColorPaletteType> = {
+	version: 0,
+	title: "color_palette",
+	description: "Application config.",
+	primaryKey: "id",
+	type: "object",
+	keyCompression: true,
+	required: ["id", "name", "colors"],
+	properties: {
+		id: {
+			type: "string",
+			maxLength: 255,
+		},
+		name: {
+			type: "string",
+		},
+		colors: {
+			type: "array",
+			items: {
+				type: "object",
+				properties: {
+					x: {
+						type: "string",
+					},
+					y: {
+						type: "string",
+					},
+					z: {
+						type: "string",
+					},
+				},
+				required: ["x", "y", "z"],
+				additionalProperties: false,
+			}
+		},
+	},
+} as const
+
+type ColorPaletteCollection = RxCollection<ColorPaletteType>
+
+export { ColorPalette, type ColorPaletteCollection }
+

src/lib/rxdb/collections/config.ts

@@ -3,7 +3,7 @@ import { type PersistableThemeBundle } from "$lib/app-config"
 
 const Config: RxJsonSchema<PersistableThemeBundle> = {
 	version: 0,
-	title: "projects",
+	title: "config",
 	description: "Application config.",
 	primaryKey: "bundleName",
 	type: "object",

src/lib/rxdb/collections/projects.ts

@@ -32,6 +32,42 @@ const Projects: RxJsonSchema<ProjectView> = {
 		handle_event: {
 			type: "null",
 		},
+		colorPalettes: {
+			type: "array",
+			items: {
+				type: "object",
+				properties: {
+					id: {
+						type: "string",
+						maxLength: 255,
+					},
+					name: {
+						type: "string",
+					},
+					colors: {
+						type: "array",
+						items: {
+							type: "object",
+							properties: {
+								x: {
+									type: "string",
+								},
+								y: {
+									type: "string",
+								},
+								z: {
+									type: "string",
+								},
+							},
+							required: ["x", "y", "z"],
+							additionalProperties: false,
+						}
+					},
+				},
+				required: ["id", "name", "colors"],
+				additionalProperties: false,
+			}
+		}
 	},
 } as const
 

src/lib/rxdb/database.ts

@@ -8,12 +8,14 @@ import { getRxStorageDexie } from "rxdb/plugins/storage-dexie"
 import { Events, type EventsCollection } from "./collections/events"
 import { Projects, type ProjectsCollection } from "./collections/projects"
 import { Config, type ConfigCollection } from "./collections/config"
+import { ColorPalette, type ColorPaletteCollection } from "./collections/colors"
 import { browser } from "$app/environment"
 
 type DatabaseType = {
 	events: EventsCollection
 	projects: ProjectsCollection
 	config: ConfigCollection
+	colorPalette: ColorPaletteCollection
 }
 
 /**
@@ -54,6 +56,9 @@ async function getDatabase(): Promise<RxDatabase<DatabaseType>> {
 		config: {
 			schema: Config,
 		},
+		color_palette: {
+			schema: ColorPalette,
+		}
 	})
 
 	await db.waitForLeadership()

src/lib/types/color-palette.ts

@@ -0,0 +1,14 @@
+import type { Vector } from "$lib/ecs/components/drawings"
+
+interface ColorPalette {
+	id: string
+	name?: string
+	colors: Vector[]
+}
+
+type ColorPalettes = ColorPalette[]
+
+export {
+	type ColorPalette,
+	type ColorPalettes,
+}

src/lib/types/toolbox.ts

@@ -1,10 +1,3 @@
-import { P, match } from "ts-pattern"
-import type { IComponent, System } from "$lib/ecs/abstracts"
-import { CanvasPointComponent } from "$lib/ecs/components/canvas-point"
-import type { Vector } from "$lib/ecs/components/drawings"
-import type { Entity } from "$lib/ecs/entity"
-import { RasterizedImageComponent } from "$lib/ecs/components/rasterized-image"
-
 enum ToolboxTool {
 	PointerTool,
 	RectangleSelection,
@@ -22,74 +15,9 @@ class ToolboxToolBase {
 	description?: string
 	tutorial?: string
 
-	constructor() {}
-}
-
-class PointerTool extends ToolboxToolBase implements System {
-	constructor() {
-		super()
-		this.type = ToolboxTool.PointerTool
-		this.name = "Pointer"
-		this.icon = "pointer"
-		this.description = "Select elements"
-		this.tutorial = "Move the cursor over an element and click/tap to select it."
-	}
-
-	update(entity: Entity): void {
-		const position = entity.getComponent(CanvasPointComponent)
-		const icon = entity.getComponent(RasterizedImageComponent)
-
-		if (!position) {
-			console.warn("Couldn't get position for rectangle selection.")
-			return
-		}
-
-		if (!icon) {
-			console.warn("Didn't find an icon for the cursor.")
-			return
-		}
-
-		icon!.point = position!.point!
-	}
-
-	accepts(component: IComponent): boolean {
-		return match(component)
-			.with(P.instanceOf(RasterizedImageComponent), () => true)
-			.with(P.instanceOf(CanvasPointComponent), () => true)
-			.otherwise(() => false)
-	}
+	constructor() { }
 }
 
-class RectangleSelection extends ToolboxToolBase implements System {
-	start?: Vector
-	end?: Vector
-
-	constructor(start?: Vector) {
-		super()
-		this.type = ToolboxTool.RectangleSelection
-		this.name = "Rectangle Selection"
-		this.icon = "rectangle"
-		this.description = "Select a rectangle on the canvas."
-		this.tutorial = "Click and drag to create a rectangle."
-
-		this.start = start
-	}
-
-	update(entity: Entity): void {
-		const position = entity.getComponent(CanvasPointComponent)
 
-		if (!position) {
-			console.warn("Couldn't get position for rectangle selection.")
-		}
-
-		console.log(position)
-	}
-
-	accepts(component: IComponent): boolean {
-		return match(component)
-			.with(P.instanceOf(CanvasPointComponent), () => true)
-			.otherwise(() => false)
-	}
-}
 
-export { ToolboxTool, ToolboxToolBase, RectangleSelection, PointerTool }
+export { ToolboxTool, ToolboxToolBase }