Merge pull request #259 from PRIME-TU-Delft/storybook-svelte-5

HOTFIX
PRIME-TU-Delft · Sep 20, 2024 · b09a20a · b09a20a
2 parents 6c074da + 6f7686f
commit b09a20a
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 110 deletions.
diff --git a/src/lib/components/Scene.svelte b/src/lib/components/Scene.svelte
@@ -6,21 +6,21 @@
     showFormulasDefault?: boolean;
     draggables?: Draggable[];
     title?: string;
-    children?: Snippet;
+    sceneChildren?: Snippet<[number, number]>;
   };
 </script>
 
 <script lang="ts">
+  import { dev } from '$app/environment';
   import type { Controller, Controls } from '$lib/controls/Controls';
+  import type { Draggable } from '$lib/controls/Draggables.svelte';
   import { activityState } from '$lib/stores/activity.svelte';
   import { globalState } from '$lib/stores/globalState.svelte';
   import type { Formula } from '$lib/utils/Formulas';
-  import { onMount, type Snippet } from 'svelte';
+  import { onMount, type Snippet, tick } from 'svelte';
   import ActionButtonsAndFormula from './ActionButtonsAndFormula.svelte';
   import ActivityPanel from './ActivityPanel.svelte';
   import ControllerAndActivityPanel from './ControllerAndActivityPanel.svelte';
-  import type { Draggable } from '$lib/controls/Draggables.svelte';
-  import { dev } from '$app/environment';
 
   let {
     controls = undefined,
@@ -29,7 +29,7 @@
     showFormulasDefault = false,
     draggables = [],
     title,
-    children
+    sceneChildren
   }: SceneProps = $props();
 
   let height = $state(500);
@@ -83,20 +83,8 @@
     // if and only if the global title is not set
     if (!globalState.title) globalState.title = title || '';
   });
-
-  onMount(() => {
-    globalState.height = height;
-    globalState.width = width;
-  });
 </script>
 
-<svelte:window
-  onresize={() => {
-    globalState.height = height;
-    globalState.width = width;
-  }}
-/>
-
 <div
   class="outerWrapper overflow-hidden h-full bg-gradient-to-bl transition-all duration-500 from-white to-white p-2"
   class:active={activityState.isActive}
@@ -120,8 +108,8 @@
   >
     <!-- MARK: THRELTE/D3 SCENE (centre) -->
     <div class="flex w-full h-full divide-x-2 divide-slate-400 gap-3 bg-white">
-      {#if children}
-        {@render children()}
+      {#if sceneChildren}
+        {@render sceneChildren(width, height)}
       {:else}
         <p class="m-4">Please enter some content using the Canvas2D or Canvas3D components</p>
       {/if}

diff --git a/src/lib/d3/Canvas2D.svelte b/src/lib/d3/Canvas2D.svelte
@@ -33,8 +33,8 @@
     formulas,
     controls,
     splitFormulas,
-    splitCanvas2DProps = {},
-    splitCanvas3DProps = {},
+    splitCanvas2DProps,
+    splitCanvas3DProps,
     children,
     splitCanvas2DChildren,
     splitCanvas3DChildren,
@@ -48,10 +48,8 @@
     draggables = []
   }: CanvasProps = $props();
 
-  const canvasWidth = $derived(
-    hasProps(splitCanvas2DProps) || hasProps(splitCanvas3DProps)
-      ? globalState.width / 2
-      : globalState.width
+  const hasSplitCanvas = $derived(
+    splitCanvas2DChildren != undefined || splitCanvas3DChildren != undefined
   );
 
   // Concat all draggables and pass them to the Scene component to be able to reset them
@@ -73,17 +71,17 @@
     if (urlProps.params2D.zoom2D) cameraZoom = urlProps.params2D.zoom2D;
 
     // 2d split props
-    if (urlProps.paramsSplit2D.position2D)
+    if (splitCanvas2DProps && urlProps.paramsSplit2D.position2D)
       splitCanvas2DProps.cameraPosition = urlProps.paramsSplit2D.position2D;
 
-    if (urlProps.paramsSplit2D.zoom2D)
+    if (splitCanvas2DProps && urlProps.paramsSplit2D.zoom2D)
       splitCanvas2DProps.cameraZoom = urlProps.paramsSplit2D.zoom2D;
 
     // 3d split props
-    if (urlProps.paramsSplit3D.position3D)
+    if (splitCanvas3DProps && urlProps.paramsSplit3D.position3D)
       splitCanvas3DProps.cameraPosition = urlProps.paramsSplit3D.position3D;
 
-    if (urlProps.paramsSplit3D.zoom3D)
+    if (splitCanvas3DProps && urlProps.paramsSplit3D.zoom3D)
       splitCanvas3DProps.cameraZoom = urlProps.paramsSplit3D.zoom3D;
   });
 </script>
@@ -131,36 +129,40 @@
   {formulas}
   {splitFormulas}
 >
-  <CanvasD3
-    width={canvasWidth}
-    {cameraPosition}
-    {cameraZoom}
-    {tickLength}
-    {showAxisNumbers}
-    {enablePan}
-    {draggables}
-  >
-    {@render children()}
-  </CanvasD3>
-
-  {#if splitCanvas2DChildren}
-    <CanvasD3 width={canvasWidth} {...splitCanvas2DProps} isSplit>
-      {@render splitCanvas2DChildren()}
+  {#snippet sceneChildren(width, height)}
+    {@const canvasWidth = hasSplitCanvas ? width / 2 : width}
+    <CanvasD3
+      width={canvasWidth}
+      {height}
+      {cameraPosition}
+      {cameraZoom}
+      {tickLength}
+      {showAxisNumbers}
+      {enablePan}
+      {draggables}
+    >
+      {@render children()}
     </CanvasD3>
-  {:else if splitCanvas3DChildren}
-    <Confetti isSplit />
-    <div style="width: {canvasWidth}px" class="overflow-hidden">
-      <Canvas {renderMode} toneMapping={NoToneMapping}>
-        <Camera3D {...splitCanvas3DProps} isSplit />
-
-        {@render splitCanvas3DChildren()}
-
-        {#if enableEasterEgg}
-          <CustomRenderer />
-        {/if}
-      </Canvas>
-    </div>
-  {/if}
+
+    {#if splitCanvas2DChildren}
+      <CanvasD3 {height} width={canvasWidth} {...splitCanvas2DProps} isSplit>
+        {@render splitCanvas2DChildren()}
+      </CanvasD3>
+    {:else if splitCanvas3DChildren}
+      <Confetti isSplit />
+      <div style="width: {canvasWidth}px" class="overflow-hidden">
+        <Canvas {renderMode} toneMapping={NoToneMapping}>
+          <Camera3D {...splitCanvas3DProps} isSplit />
+
+          {@render splitCanvas3DChildren()}
+
+          {#if enableEasterEgg}
+            <CustomRenderer />
+          {/if}
+        </Canvas>
+      </div>
+    {/if}
+  {/snippet}
 </Scene>
 
 <Konami onKonami={() => (enableEasterEgg = !enableEasterEgg)} />
diff --git a/src/lib/d3/CanvasD3.svelte b/src/lib/d3/CanvasD3.svelte
@@ -8,6 +8,7 @@
     tickLength?: number; // TODO: move axis to separate component
     showAxisNumbers?: boolean;
     width: number;
+    height: number;
     enablePan?: boolean;
     draggables?: Draggable[];
     isSplit?: boolean;
@@ -42,6 +43,7 @@
     tickLength,
     showAxisNumbers,
     width,
+    height,
     enablePan = true,
     draggables = [],
     isSplit = false,
@@ -50,8 +52,6 @@
 
   let id = 'canvas-' + generateUUID();
 
-  let height = $derived(globalState.height);
-
   function update2DCamera(transform2d: Transform2D) {
     // Update camera
     if (isSplit) cameraState.splitCamera2D = Camera2D.new(transform2d, enablePan);
@@ -65,6 +65,8 @@
    * @param transform {x: number, y: number, k: number} - k is zoom
    */
   function transformScene(transform: Transform2D) {
+    if (!transform.k) return;
+
     if (enablePan) {
       select(`#${id} g`).attr('transform', transform).attr('transform-origin', '0 0');
     } else {

diff --git a/src/lib/stores/globalState.svelte.ts b/src/lib/stores/globalState.svelte.ts
@@ -35,18 +35,6 @@ class GlobalState {
    */
   title = $state('');
 
-  /**
-   * Represents the width of the application.
-   * @type {number}
-   */
-  width = $state(0);
-
-  /**
-   * Represents the height of the application.
-   * @type {number}
-   */
-  height = $state(0);
-
   /**
    * Represents when the application should be reset.
    */

diff --git a/src/lib/stories/Canvas2D.stories.svelte b/src/lib/stories/Canvas2D.stories.svelte
@@ -47,7 +47,14 @@
 </script>
 
 <script>
+  import { onDestroy } from 'svelte';
+  import { globalState } from '$lib/stores/globalState.svelte';
+
   setTemplate(template);
+
+  onDestroy(() => {
+    globalState.title = '';
+  });
 </script>
 
 {#snippet template(args)}

diff --git a/src/lib/stories/Canvas3D.stories.svelte b/src/lib/stories/Canvas3D.stories.svelte
@@ -31,10 +31,16 @@
 </script>
 
 <script>
+  import { globalState } from '$lib/stores/globalState.svelte';
   import Axis3D from '$lib/threlte/Axis3D.svelte';
+  import { onDestroy } from 'svelte';
   import { Vector3 } from 'three';
 
   setTemplate(template);
+
+  onDestroy(() => {
+    globalState.title = '';
+  });
 </script>
 
 {#snippet template(args)}

diff --git a/src/lib/threlte/Camera3D.svelte b/src/lib/threlte/Camera3D.svelte
@@ -92,8 +92,6 @@
   // Function that changes the camera State for 3D camera
   // Updates when the camera "changes"
   function handleCameraChange() {
-    console.log('update');
-
     const cam = $camera as OrthographicCamera;
 
     const splitCamera3D = new Camera3D(cam);

diff --git a/src/lib/threlte/Canvas3D.svelte b/src/lib/threlte/Canvas3D.svelte
@@ -34,8 +34,8 @@
     formulas,
     controls,
     splitFormulas,
-    splitCanvas2DProps = {},
-    splitCanvas3DProps = {},
+    splitCanvas2DProps,
+    splitCanvas3DProps,
     children,
     splitCanvas2DChildren,
     splitCanvas3DChildren,
@@ -46,10 +46,8 @@
     enablePan = false
   }: CanvasProps = $props();
 
-  const canvasWidth = $derived(
-    hasProps(splitCanvas2DProps) || hasProps(splitCanvas3DProps)
-      ? globalState.width / 2
-      : globalState.width
+  const hasSplitCanvas = $derived(
+    splitCanvas2DChildren != undefined || splitCanvas3DChildren != undefined
   );
 
   // Concat all draggables and pass them to the Scene component to be able to reset them
@@ -71,17 +69,17 @@
     if (urlProps.params3D.zoom3D) cameraZoom = urlProps.params3D.zoom3D;
 
     // 2d split props
-    if (urlProps.paramsSplit2D.position2D)
+    if (splitCanvas2DProps && urlProps.paramsSplit2D.position2D)
       splitCanvas2DProps.cameraPosition = urlProps.paramsSplit2D.position2D;
 
-    if (urlProps.paramsSplit2D.zoom2D)
+    if (splitCanvas2DProps && urlProps.paramsSplit2D.zoom2D)
       splitCanvas2DProps.cameraZoom = urlProps.paramsSplit2D.zoom2D;
 
     // 3d split props
-    if (urlProps.paramsSplit3D.position3D)
+    if (splitCanvas3DProps && urlProps.paramsSplit3D.position3D)
       splitCanvas3DProps.cameraPosition = urlProps.paramsSplit3D.position3D;
 
-    if (urlProps.paramsSplit3D.zoom3D)
+    if (splitCanvas3DProps && urlProps.paramsSplit3D.zoom3D)
       splitCanvas3DProps.cameraZoom = urlProps.paramsSplit3D.zoom3D;
   });
 </script>
@@ -117,41 +115,44 @@
   {formulas}
   {splitFormulas}
 >
-  <div style="width: {canvasWidth}px" class="overflow">
-    {#if confettiState.side === 'left' || confettiState.side === 'center'}
-      <Confetti isSplit={false} />
-    {/if}
-    <Canvas {renderMode} toneMapping={NoToneMapping}>
-      <Camera3D {cameraPosition} {cameraZoom} {enablePan} />
-
-      {@render children()}
-
-      {#if enableEasterEgg}
-        <CustomRenderer />
-      {/if}
-    </Canvas>
-  </div>
-
-  {#if splitCanvas2DChildren}
-    <CanvasD3 width={canvasWidth} {...splitCanvas2DProps}>
-      {@render splitCanvas2DChildren()}
-    </CanvasD3>
-  {:else if splitCanvas3DChildren}
-    <div style="width: {canvasWidth}px" class="overflow-hidden">
-      {#if confettiState.side === 'right'}
-        <Confetti isSplit={true} />
+  {#snippet sceneChildren(width, height)}
+    {@const canvasWidth = hasSplitCanvas ? width / 2 : width}
+    <div style="width: {canvasWidth}px" class="overflow">
+      {#if confettiState.side === 'left' || confettiState.side === 'center'}
+        <Confetti isSplit={false} />
       {/if}
       <Canvas {renderMode} toneMapping={NoToneMapping}>
-        <Camera3D {...splitCanvas3DProps} isSplit />
+        <Camera3D {cameraPosition} {cameraZoom} {enablePan} />
 
-        {@render splitCanvas3DChildren()}
+        {@render children()}
 
         {#if enableEasterEgg}
           <CustomRenderer />
         {/if}
       </Canvas>
     </div>
-  {/if}
+
+    {#if splitCanvas2DChildren}
+      <CanvasD3 {height} width={canvasWidth} {...splitCanvas2DProps}>
+        {@render splitCanvas2DChildren()}
+      </CanvasD3>
+    {:else if splitCanvas3DChildren}
+      <div style="width: {canvasWidth}px" class="overflow-hidden">
+        {#if confettiState.side === 'right'}
+          <Confetti isSplit={true} />
+        {/if}
+        <Canvas {renderMode} toneMapping={NoToneMapping}>
+          <Camera3D {...splitCanvas3DProps} isSplit />
+
+          {@render splitCanvas3DChildren()}
+
+          {#if enableEasterEgg}
+            <CustomRenderer />
+          {/if}
+        </Canvas>
+      </div>
+    {/if}
+  {/snippet}
 </Scene>
 
 <Konami onKonami={() => (enableEasterEgg = !enableEasterEgg)} />