Merge pull request #67 from Picorims/17-dev-object-container

17 dev object container

src/src/lib/components/atoms/IconButton.svelte

@@ -17,9 +17,10 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
     */
     export let onClick: () => void = () => {};
+    export let variant: 'primary' | 'secondary' | 'accent' = 'primary';
 </script>
 
-<button on:click={() => onClick()} type="button" class="icon-button">
+<button on:click={() => onClick()} type="button" class={`icon-button ${variant}`}>
     <slot></slot>
 </button>
 
@@ -37,10 +38,22 @@
         transition: g.$anim-fast;
     }
 
+    button.icon-button.accent > :global(svg) {
+        stroke: g.$color-accent;
+    }
+
     button.icon-button:hover > :global(svg) {
-        stroke: g.$color-primary-500;
         transition: g.$anim-fast;
     }
+    button.icon-button.primary:hover > :global(svg) {
+        stroke: g.$color-primary-500;
+    }
+    button.icon-button.secondary:hover > :global(svg) {
+        stroke: g.$color-secondary-500;
+    }
+    button.icon-button.accent:hover > :global(svg) {
+        stroke: g.$color-accent-700;
+    }
 
     button.icon-button:active {
         transform: scale(0.9);

src/src/lib/components/atoms/VisualObjectIcon.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { VisualObject_Type } from '$lib/store/save_structure/save_latest';
+	import { AudioLines, Box, Clock, Shapes, Sparkles, Type } from 'lucide-svelte';
+
+	/*
+    Wav2Bar - Free software for creating audio visualization (motion design) videos
+    Copyright (C) 2024  Picorims <[email protected]>
+    
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    any later version.
+    
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+    */
+
+	export let type: VisualObject_Type;
+</script>
+
+{#if type === 'particle_flow'}
+	<Sparkles />
+{:else if type === 'text'}
+	<Type />
+{:else if type === 'shape'}
+	<Shapes />
+{:else if type === 'timer_straight_bar' || type === 'timer_straight_line_point'}
+	<Clock />
+{:else if type === 'visualizer_circular_bar' || type === 'visualizer_straight_bar' || type === 'visualizer_straight_wave'}
+	<AudioLines />
+{:else}
+	<Box />
+{/if}

src/src/lib/components/panes/ObjectPane.svelte

@@ -1,4 +1,14 @@
 <script lang="ts">
+	import { lang } from '$lib/store/settings';
+	import { PlusCircle, Redo, Undo } from 'lucide-svelte';
+	import IconButton from '../atoms/IconButton.svelte';
+	import {
+		visualObject_types,
+		type VisualObject_Type
+	} from '$lib/store/save_structure/save_latest';
+	import { addObject, saveObjects } from '$lib/store/save';
+	import ObjectPaneItem from './object_pane/ObjectPaneItem.svelte';
+
 	/*
 	Wav2Bar - Free software for creating audio visualization (motion design) videos
 	Copyright (C) 2024  Picorims <[email protected]>
@@ -16,20 +26,85 @@
 	You should have received a copy of the GNU General Public License
 	along with this program.  If not, see <https://www.gnu.org/licenses/>.
 	*/
+
+	function newObj() {
+		/* TODO: proper new obj action */
+		visualObject_types.forEach((type) => {
+			addObject(type as VisualObject_Type);
+		});
+	}
+
+	let listDiv: HTMLDivElement;
+	function enterList(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			(listDiv.children[0] as HTMLDivElement).focus();
+		}
+	}
 </script>
 
-<div class="card"></div>
+<div class="card">
+	<div class="header">
+		<span class="title">{$lang.object_pane.title}</span>
+		<div class="header-buttons">
+			<IconButton onClick={() => alert("coming soon!")}>
+				<Undo />
+			</IconButton>
+			<IconButton onClick={() => alert("coming soon!")}>
+				<Redo />
+			</IconButton>
+			<IconButton variant="accent" onClick={newObj}>
+				<PlusCircle />
+			</IconButton>
+		</div>
+	</div>
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div
+		bind:this={listDiv}
+		class="content"
+		role="list"
+		on:keyup={enterList}
+		tabindex="-1"
+	>
+		<!-- Content -->
+		{#each Object.keys($saveObjects) as k}
+			<ObjectPaneItem uuid={k} />
+		{/each}
+	</div>
+</div>
 
 <style lang="scss">
 	@use '../../../lib/css/globals_forward.scss' as g;
 
-	.card {
+	div.card {
 		display: flex;
 		flex-direction: column;
 		width: calc(100% - g.$spacing-l);
 		height: calc(100% - g.$spacing-l);
+		max-height: calc(100% - g.$spacing-l);
 		@include g.card;
 		margin-top: g.$spacing-l;
 		margin-left: g.$spacing-l;
+		padding: g.$spacing-m;
+	}
+
+	div.header {
+		height: g.$size-m;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid g.$color-background-800;
+	}
+	span.title {
+		@include g.heading-3;
+	}
+	div.header-buttons {
+		display: flex;
+		gap: g.$spacing-s;
+	}
+
+	div.content {
+		height: 100%;
+		overflow-y: scroll;
 	}
 </style>

src/src/lib/components/panes/object_pane/ObjectPaneItem.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import VisualObjectIcon from '$lib/components/atoms/VisualObjectIcon.svelte';
+	import { activeObject, saveObjects } from '$lib/store/save';
+	import type {
+		VisualObjectInterface,
+		VisualObject_Type
+	} from '$lib/store/save_structure/save_latest';
+	import type { JsonLike, UUIDv4 } from '$lib/types/common_types';
+	import { Binary, Icon } from 'lucide-svelte';
+
+	/*
+    Wav2Bar - Free software for creating audio visualization (motion design) videos
+    Copyright (C) 2024  Picorims <[email protected]>
+    
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    any later version.
+    
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+    */
+
+	const handleClick = () => {
+        $activeObject = uuid;
+    };
+
+	export let uuid: UUIDv4;
+	let data: VisualObjectInterface<VisualObject_Type> | null = null;
+	$: data = $saveObjects[uuid] as VisualObjectInterface<VisualObject_Type> | null;
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+	role="listitem"
+    tabindex="0"
+	on:keyup={(e) => {if (e.key === 'Enter') handleClick()}}
+	on:click={handleClick}
+	class="item"
+	class:selected={uuid === $activeObject}
+    on:focus={() => {console.log("focused")}}
+>
+	{#if data}
+		<VisualObjectIcon type={data.visual_object_type} />
+		<span class="name">{data.name}</span>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '../../../css/globals_forward.scss' as g;
+
+	div.item {
+		display: flex;
+		align-items: center;
+		gap: g.$spacing-s;
+		padding: 0 g.$spacing-s;
+		width: 100%;
+		height: g.$size-m;
+		border-radius: g.$border-radius-s;
+		cursor: pointer;
+		color: g.$color-text-800;
+
+		&:hover {
+			background-color: g.$color-background-200;
+		}
+
+		&.selected {
+			background-color: g.$color-background-200;
+			color: g.$color-text;
+		}
+
+		& :global(svg) {
+			color: g.$color-background-800;
+		}
+		&.selected :global(svg) {
+			color: g.$color-primary-600;
+		}
+
+		& > * {
+			flex: 0 0 auto;
+		}
+	}
+	span.name {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

src/src/lib/components/window/App.svelte

@@ -77,6 +77,7 @@
 	div.flex-column {
 		width: 100%;
 		height: 100%;
+		max-height: 100%;
 		display: flex;
 		flex-direction: column;
 	}
@@ -92,6 +93,7 @@
 	div.bottom-pane-container, div.file-and-icons-pane-container {
 		min-height: g.$size-xl;
 	}
-
-
+	div.objects-pane-container {
+		min-height: 0;
+	}
 </style>

src/src/lib/css/mixins.scss

@@ -160,6 +160,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
     font-size: 1rem;
 }
 
+@mixin heading-3 {
+    font-family: "Poppins", sans-serif;
+    font-weight: 600;
+    line-height: 1.2;
+    font-size: 1.25rem;
+}
+
 @mixin heading-2 {
     font-family: "Poppins", sans-serif;
     font-weight: 700;

src/src/lib/css/variables.scss

@@ -85,7 +85,7 @@ $color-accent-950: var(--accent-950);
 
 
 
-
+$border-radius-s: 4px;
 $border-radius-m: 8px;
 
 $spacing-l: 16px;

src/src/lib/lang/en.json

@@ -10,5 +10,8 @@
             "dark": "Dark"
         },
         "close": "OK"
+    },
+    "object_pane": {
+        "title": "Objects"
     }
 }

src/src/lib/store/save.ts

@@ -2,7 +2,7 @@ import { derived, writable } from "svelte/store";
 import type { UUIDv4 } from "$lib/types/common_types";
 import * as zip from "@zip.js/zip.js";
 import { validateAgainstRecord } from "$lib/types/validator";
-import { defaultSaveConfig, saveValidator, type Save } from "./save_structure/save_latest";
+import { defaultSaveConfig, defaultVisualObject, saveValidator, type Save, type VisualObject_Type } from "./save_structure/save_latest";
 import { LiveAudioProvider } from "$lib/engine/audio/live_audio_provider";
 
 export const saveConfig = writable<Omit<Save, "objects">>(defaultSaveConfig());
@@ -12,6 +12,11 @@ export const activeObjectData = derived([saveObjects, activeObject], ([$saveObje
     if ($activeObject === null) return null;
     return $saveObjects[$activeObject];
 });
+export const objectsCount = derived(saveObjects, ($saveObjects) => Object.keys($saveObjects).length);
+export let objectsCountValue = 0;
+objectsCount.subscribe(value => {
+    objectsCountValue = value;
+});
 export const save = derived([saveConfig, saveObjects], ([$saveConfig, $saveObjects]) => {
     return {
         ...$saveConfig,
@@ -57,4 +62,26 @@ export function openSave() {
 
     };
     fileElt.click();
+}
+
+/**
+ * Adds a new object to the save from the given type
+ * with default values
+ * @param type 
+ */
+export function addObject(type: VisualObject_Type) {
+    /* TODO: undo/redo */
+    const uuid: UUIDv4 = self.crypto.randomUUID() as UUIDv4;
+    if (objectsCountValue === 0) {
+        activeObject.set(uuid);
+    }
+    saveObjects.update((objects) => {
+        return {
+            ...objects,
+            [uuid]: {
+                ...defaultVisualObject(type),
+                name: type + "_" + Math.floor(Math.random() * 1000),
+            },
+        }
+    });
 }