Refactoring

src/components/admin/App.svelte

@@ -63,5 +63,5 @@
 </script>
 
 <main class="dark:bg-gray-900 min-w-full min-h-screen text-gray-900 dark:text-gray-300">
-    <Router {routes} on:conditionsFailed={conditionsFailed}/>
+    <Router {routes} on:conditionsFailed={conditionsFailed} />
 </main>

src/components/publics/PublicPreview.svelte

@@ -22,8 +22,9 @@
     import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
     import { OrbitControls } from "three/addons/controls/OrbitControls.js";
     import {onDestroy, onMount} from "svelte";
+    import { CollectionEntry } from "astro:content";
 
-    export let file: string;
+    export let pub: CollectionEntry<"publics">;
     export let fov: number = 60;
     export let near: number = 1
     export let far: number = 1000;
@@ -40,6 +41,10 @@
     let observer: ResizeObserver;
 
     onMount(() => {
+        if (!pub.data["3d"]) {
+            return;
+        }
+
         scene = new THREE.Scene();
         scene.background = new THREE.Color(0x171717);
         camera = new THREE.PerspectiveCamera(fov, 1, near, far);
@@ -52,8 +57,8 @@
 
         const loader = new GLTFLoader();
 
-        loader.load(`/3d/${file}.glb`, (gltf) => {
-            let s = scene.add(gltf.scene);
+        loader.load(`/3d/${pub.id}.glb`, (gltf) => {
+            scene.add(gltf.scene);
 
             let cube_bbox = new THREE.Box3();
             cube_bbox.setFromObject(gltf.scene);
@@ -64,7 +69,9 @@
             camera.position.set(0, center.y, distance);
 
             controls.update();
-        }, undefined, console.log);
+        }, undefined, (e) => {
+            console.error(e);
+        });
 
         div.append(renderer.domElement);
 

src/components/publics/XRayPreview.svelte

@@ -20,29 +20,19 @@
 <script lang="ts">
     let xray: HTMLDivElement;
 
-    let size = 100;
-
     function mouseMove(e: MouseEvent) {
         let x = e.offsetX;
         let y = e.offsetY;
 
-        xray.style.clipPath = `circle(${size}px at ${x}px ${y}px)`;
+        xray.style.clipPath = `circle(100px at ${x}px ${y}px)`;
     }
 
     function reset() {
         xray.style.clipPath = 'circle(0px at 0 0)';
     }
-
-    function handleScroll(e: WheelEvent) {
-        size += e.deltaY / -20;
-        if (size < 20) {
-            size = 20;
-        }
-        mouseMove(e);
-    }
 </script>
 
-<div class="relative overflow-hidden rounded-xl" on:mousemove={mouseMove} on:mousewheel|preventDefault={handleScroll} on:mouseleave={reset} role="img">
+<div class="relative overflow-hidden rounded-xl" on:mousemove={mouseMove} on:mouseleave={reset} role="img">
     <slot name="normal"></slot>
     <div bind:this={xray} class="absolute top-0 left-0 right-0 bottom-0 xray" style="clip-path: circle(0px at 0 0);">
         <slot name="xray">