Merge pull request #9 from BLaZeKiLL/wip/virtual-list

Virtual lists
BLaZeKiLL · Feb 13, 2024 · f3fc093 · f3fc093
2 parents 294ffb7 + 977187f
commit f3fc093
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
 		"@skeletonlabs/tw-plugin": "^0.3.1",
 		"@sveltejs/adapter-static": "2.0.3",
 		"@sveltejs/kit": "^1.27.4",
+		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@tailwindcss/forms": "^0.5.7",
 		"@types/node": "^20.11.5",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",

diff --git a/src/lib/components/data/WebrayListDataView.svelte b/src/lib/components/data/WebrayListDataView.svelte
@@ -3,25 +3,29 @@
 	import scene from '../../store/scene.store';
 	import WebrayIcon from '../ui/WebrayIcon.svelte';
 	import { ID, WebrayEditor } from '../../editor';
+	import VirtualList from '@sveltejs/svelte-virtual-list';
 
 	export let data_type: string;
 	export let bind_path: string;
 
 	$: store = scene.derived<any[]>(bind_path);
 </script>
 
-<!-- TODO: Need a virtual scroll view for performance reasons -->
-{#each $store as item (item.id)}
-	<WebrayDataView {data_type} bind_path={`${bind_path}[${item.id}]`}>
-		<span slot="header" class="flex flex-row items-center">
-			<h4 class="h4 text-surface-200">ID: {item.id}</h4>
-			<span class="grow"></span>
-			<button
-				on:click={() =>
-					WebrayEditor.invokeAction(ID.a_del_list_item, { bind_path: `${bind_path}[${item.id}]` })}
-			>
-				<WebrayIcon icon="i_delete_item" tooltip="Delete item" css="text-error-400" />
-			</button>
-		</span>
-	</WebrayDataView>
-{/each}
+<VirtualList items={$store} let:item>
+	<div class="mb-2">
+		<WebrayDataView {data_type} bind_path={`${bind_path}[${item.id}]`}>
+			<span slot="header" class="flex flex-row items-center">
+				<h4 class="h4 text-surface-200">ID: {item.id}</h4>
+				<span class="grow"></span>
+				<button
+					on:click={() =>
+						WebrayEditor.invokeAction(ID.a_del_list_item, {
+							bind_path: `${bind_path}[${item.id}]`
+						})}
+				>
+					<WebrayIcon icon="i_delete_item" tooltip="Delete item" css="text-error-400" />
+				</button>
+			</span>
+		</WebrayDataView>
+	</div>
+</VirtualList>
diff --git a/src/lib/components/layout/WebrayFooter.svelte b/src/lib/components/layout/WebrayFooter.svelte
@@ -4,63 +4,74 @@
 	import MdiYoutube from '~icons/mdi/youtube';
 	import MdiLinkedin from '~icons/mdi/linkedin';
 	import MdiInstagram from '~icons/mdi/instagram';
-    import MaterialSymbolsInfo from '~icons/material-symbols/info';
+	import MaterialSymbolsInfo from '~icons/material-symbols/info';
 </script>
 
 <div class="flex h-full w-full flex-col border-t border-surface-600">
 	<span class="grow"></span>
 	<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
 		<svelte:fragment slot="lead">
-			<span class="flex flex-row gap-1 items-center font-bold">
-                <h3 class="h3">&lbrace;</h3>
-                <h4 class="h4 cb-c">C</h4>
-                <h4 class="h4 cb-b">B</h4>
-                <h3 class="h3">&rbrace;</h3>
-            </span>
+			<span class="flex flex-row items-center gap-1 font-bold">
+				<h3 class="h3">&lbrace;</h3>
+				<h4 class="cb-c h4">C</h4>
+				<h4 class="cb-b h4">B</h4>
+				<h3 class="h3">&rbrace;</h3>
+			</span>
 		</svelte:fragment>
 
-        <h3 class="h3 font-extrabold">WebRay</h3>
+		<h3 class="h3 font-extrabold">WebRay</h3>
 
 		<svelte:fragment slot="trail">
-            <a href="https://github.com/BLaZeKiLL/webray?tab=readme-ov-file#editor-documentation"
-                target="_blank" rel="noopener noreferrer"
-                class="btn-icon hover:variant-soft-primary">
-                <MaterialSymbolsInfo style="font-size: 1.5rem" />
-            </a>
+			<a
+				href="https://github.com/BLaZeKiLL/webray?tab=readme-ov-file#editor-documentation"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="btn-icon hover:variant-soft-primary"
+			>
+				<MaterialSymbolsInfo style="font-size: 1.5rem" />
+			</a>
 			<a
 				href="https://www.linkedin.com/in/devashish-lal-096868176/"
-                target="_blank" rel="noopener noreferrer"
+				target="_blank"
+				rel="noopener noreferrer"
 				class="btn-icon hover:variant-soft-primary"
 			>
 				<MdiLinkedin style="font-size: 1.5rem" />
 			</a>
 			<a
 				href="https://www.youtube.com/channel/UC_qfPIYfXOvg0SDAc8Z68WA"
-                target="_blank" rel="noopener noreferrer"
+				target="_blank"
+				rel="noopener noreferrer"
 				class="btn-icon hover:variant-soft-primary"
 			>
 				<MdiYoutube style="font-size: 1.5rem" />
 			</a>
 			<a
 				href="https://www.instagram.com/code.blaze/?igshid=MmIzYWVlNDQ5Yg%3D%3D"
-                target="_blank" rel="noopener noreferrer"
+				target="_blank"
+				rel="noopener noreferrer"
 				class="btn-icon hover:variant-soft-primary"
 			>
 				<MdiInstagram style="font-size: 1.5rem" />
 			</a>
-			<a href="https://github.com/BLaZeKiLL" target="_blank" rel="noopener noreferrer" class="btn-icon hover:variant-soft-primary">
+			<a
+				href="https://github.com/BLaZeKiLL"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="btn-icon hover:variant-soft-primary"
+			>
 				<MdiGithub style="font-size: 1.5rem" />
 			</a>
 		</svelte:fragment>
 	</AppBar>
 </div>
 
 <style>
-    .cb-c {
-        color: #C02A01;
-    }
+	.cb-c {
+		color: #c02a01;
+	}
 
-    .cb-b {
-        color: #F8A905;
-    }
-</style>
+	.cb-b {
+		color: #f8a905;
+	}
+</style>
diff --git a/src/lib/components/ui/WebrayIcon.svelte b/src/lib/components/ui/WebrayIcon.svelte
@@ -20,6 +20,6 @@
 	<svelte:component this={_icon} class={css} style="font-size: 1.5rem" />
 </span>
 
-<div class="card variant-filled-secondary p-1" data-popup={target}>
+<div class="card variant-filled-secondary z-50 p-1" data-popup={target}>
 	{tooltip}
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -42,8 +42,8 @@
 	<!-- Router Slot -->
 	<span
 		class:fullscreen={$editorStore.output_view === OutputView.FULLSCREEN}
-
-	 	class="overflow-y-auto h-full flex flex-col items-center justify-center bg-gray-950">
+		class="flex h-full flex-col items-center justify-center overflow-y-auto bg-gray-950"
+	>
 		<slot />
 	</span>
 	<!-- ---- / ---- -->
@@ -62,4 +62,4 @@
 		bottom: 0;
 		z-index: 10;
 	}
-</style>
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -30,7 +30,9 @@
 		<ProgressRadial meter="stroke-primary-500" track="stroke-primary-500/30" />
 	</div>
 {:else if $editorStore.kernel_state === KernelState.INITIAL}
-	<div class="max-h-full flex flex-row items-center gap-2 h4">Press <WebrayIcon icon="i_render" tooltip="" /> to render an image</div>
+	<div class="h4 flex max-h-full flex-row items-center gap-2">
+		Press <WebrayIcon icon="i_render" tooltip="" /> to render an image
+	</div>
 {/if}
 
 {#if $editorStore.output_view === OutputView.FULLSCREEN}

diff --git a/yarn.lock b/yarn.lock
@@ -559,6 +559,11 @@
     tiny-glob "^0.2.9"
     undici "~5.26.2"
 
+"@sveltejs/svelte-virtual-list@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz#3784d6426508836b4471bba8ba293430e73717d8"
+  integrity sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==
+
 "@sveltejs/vite-plugin-svelte-inspector@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz#c99fcb73aaa845a3e2c0563409aeb3ee0b863add"