From cf5b36490f72bafe7b9ebe1214cbc7638f52e027 Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Fri, 3 May 2024 01:33:55 +0200
Subject: [PATCH] feat: some tweaks

---
 app/src/lib/graph-interface/graph-manager.ts  |   4 +-
 app/src/lib/helpers/index.ts                  |  52 ++++
 app/src/lib/node-store/DraggableNode.svelte   |   2 -
 .../lib/performance/PerformanceViewer.svelte  | 230 +++++++++---------
 .../lib/settings/panels/ExportSettings.svelte |  40 +--
 app/src/routes/+page.svelte                   |  99 +++-----
 nodes/max/plantarium/rotate/src/input.json    |  14 +-
 nodes/max/plantarium/rotate/src/lib.rs        |   5 +-
 8 files changed, 235 insertions(+), 211 deletions(-)

diff --git a/app/src/lib/graph-interface/graph-manager.ts b/app/src/lib/graph-interface/graph-manager.ts
index 42a4bdb..6a5c19e 100644
--- a/app/src/lib/graph-interface/graph-manager.ts
+++ b/app/src/lib/graph-interface/graph-manager.ts
@@ -11,6 +11,8 @@ const logger = createLogger("graph-manager");
 
 logger.mute();
 
+const clone = "structuredClone" in self ? self.structuredClone : (args: any) => JSON.parse(JSON.stringify(args));
+
 function areSocketsCompatible(output: string | undefined, inputs: string | string[] | undefined) {
   if (Array.isArray(inputs) && output) {
     return inputs.includes(output);
@@ -67,7 +69,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
     const serialized = { id: this.graph.id, settings: this.settings, nodes, edges };
     logger.groupEnd();
 
-    return serialized;
+    return clone(serialized);
   }
 
 
diff --git a/app/src/lib/helpers/index.ts b/app/src/lib/helpers/index.ts
index 974ab54..6dc0b71 100644
--- a/app/src/lib/helpers/index.ts
+++ b/app/src/lib/helpers/index.ts
@@ -155,3 +155,55 @@ export function humanizeDuration(durationInMilliseconds: number) {
 
   return durationString.trim();
 }
+export function debounceAsyncFunction<T extends any[], R>(func: (...args: T) => Promise<R>): (...args: T) => Promise<R> {
+  let currentPromise: Promise<R> | null = null;
+  let nextArgs: T | null = null;
+  let resolveNext: ((result: R) => void) | null = null;
+
+  const debouncedFunction = async (...args: T): Promise<R> => {
+    if (currentPromise) {
+      // Store the latest arguments and create a new promise to resolve them later
+      nextArgs = args;
+      return new Promise<R>((resolve) => {
+        resolveNext = resolve;
+      });
+    } else {
+      // Execute the function immediately
+      try {
+        currentPromise = func(...args);
+        const result = await currentPromise;
+        return result;
+      } finally {
+        currentPromise = null;
+        // If there are stored arguments, call the function again with the latest arguments
+        if (nextArgs) {
+          const argsToUse = nextArgs;
+          const resolver = resolveNext;
+          nextArgs = null;
+          resolveNext = null;
+          resolver!(await debouncedFunction(...argsToUse));
+        }
+      }
+    }
+  };
+
+  return debouncedFunction;
+}
+
+export function withArgsChangeOnly<T extends any[], R>(func: (...args: T) => R): (...args: T) => R {
+  let lastArgs: T | undefined = undefined;
+  let lastResult: R;
+
+  return (...args: T): R => {
+    // Check if arguments are the same as last call
+    if (lastArgs && args.length === lastArgs.length && args.every((val, index) => val === lastArgs?.[index])) {
+      return lastResult; // Return cached result if arguments haven't changed
+    }
+
+    // Call the function with new arguments
+    lastResult = func(...args);
+    lastArgs = args; // Update stored arguments
+    return lastResult; // Return new result
+  };
+}
+
diff --git a/app/src/lib/node-store/DraggableNode.svelte b/app/src/lib/node-store/DraggableNode.svelte
index 804f7d0..82fa680 100644
--- a/app/src/lib/node-store/DraggableNode.svelte
+++ b/app/src/lib/node-store/DraggableNode.svelte
@@ -4,8 +4,6 @@
 
   export let node: NodeDefinition;
 
-  $: console.log({ node });
-
   let dragging = false;
 
   let nodeData = {
diff --git a/app/src/lib/performance/PerformanceViewer.svelte b/app/src/lib/performance/PerformanceViewer.svelte
index 5fcc674..83fa37e 100644
--- a/app/src/lib/performance/PerformanceViewer.svelte
+++ b/app/src/lib/performance/PerformanceViewer.svelte
@@ -176,7 +176,7 @@
   }
 </script>
 
-{#key $activeType}
+{#key $activeType && data}
   {#if $activeType === "cache-hit"}
     <Monitor
       title="Cache Hits"
@@ -191,121 +191,123 @@
       points={constructPoints($activeType)}
     />
   {/if}
-{/key}
 
-<div class="p-4 performance-tabler">
-  <div class="flex items-center gap-2">
-    <Checkbox id="show-total" bind:value={showAverage} />
-    <label for="show-total">Show Average</label>
+  <div class="p-4 performance-tabler">
+    <div class="flex items-center gap-2">
+      <Checkbox id="show-total" bind:value={showAverage} />
+      <label for="show-total">Show Average</label>
+    </div>
+
+    {#if data.length !== 0}
+      <BarSplit
+        labels={["worker-transfer", "runtime", "update-geometries"]}
+        values={getSplitValues()}
+      />
+
+      <h3>General</h3>
+
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              {round(getTotalPerformance(!showAverage))}<span>ms</span>
+            </td>
+            <td
+              class:active={$activeType === "total"}
+              on:click={() => ($activeType = "total")}
+            >
+              total<span
+                >({Math.floor(
+                  1000 / getTotalPerformance(showAverage),
+                )}fps)</span
+              >
+            </td>
+          </tr>
+          {#each getPerformanceData(!showAverage) as [key, value]}
+            <tr>
+              <td>
+                {round(value)}<span>ms</span>
+              </td>
+              <td
+                class:active={$activeType === key}
+                on:click={() => ($activeType = key)}
+              >
+                {key}
+              </td>
+            </tr>
+          {/each}
+
+          <tr>
+            <td>{data.length}</td>
+            <td>Samples</td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <h3>Nodes</h3>
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
+            <td
+              class:active={$activeType === "cache-hit"}
+              on:click={() => ($activeType = "cache-hit")}>cache hits</td
+            >
+          </tr>
+          {#each getNodePerformanceData(!showAverage) as [key, value]}
+            <tr>
+              <td>
+                {round(value)}<span>ms</span>
+              </td>
+
+              <td
+                class:active={$activeType === key}
+                on:click={() => ($activeType = key)}
+              >
+                {key.split("/").slice(-1).join("/")}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <h3>Viewer</h3>
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>{humanizeNumber(getLast("total-vertices"))}</td>
+            <td>Vertices</td>
+          </tr>
+          <tr>
+            <td>{humanizeNumber(getLast("total-faces"))}</td>
+            <td>Faces</td>
+          </tr>
+          {#each getViewerPerformanceData(!showAverage) as [key, value]}
+            <tr>
+              <td>
+                {round(value)}<span>ms</span>
+              </td>
+              <td
+                class:active={$activeType === key}
+                on:click={() => ($activeType = key)}
+              >
+                {key.split("/").slice(-1).join("/")}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    {:else}
+      <p>No runs available</p>
+    {/if}
   </div>
-
-  {#if data.length !== 0}
-    <BarSplit
-      labels={["worker-transfer", "runtime", "update-geometries"]}
-      values={getSplitValues()}
-    />
-
-    <h3>General</h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <td>
-            {round(getTotalPerformance(!showAverage))}<span>ms</span>
-          </td>
-          <td
-            class:active={$activeType === "total"}
-            on:click={() => ($activeType = "total")}
-          >
-            total<span
-              >({Math.floor(1000 / getTotalPerformance(showAverage))}fps)</span
-            >
-          </td>
-        </tr>
-        {#each getPerformanceData(!showAverage) as [key, value]}
-          <tr>
-            <td>
-              {round(value)}<span>ms</span>
-            </td>
-            <td
-              class:active={$activeType === key}
-              on:click={() => ($activeType = key)}
-            >
-              {key}
-            </td>
-          </tr>
-        {/each}
-
-        <tr>
-          <td>{data.length}</td>
-          <td>Samples</td>
-        </tr>
-      </tbody>
-      <tbody>
-        <tr>
-          <td>
-            <h3>Nodes</h3>
-          </td>
-        </tr>
-      </tbody>
-      <tbody>
-        <tr>
-          <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
-          <td
-            class:active={$activeType === "cache-hit"}
-            on:click={() => ($activeType = "cache-hit")}>cache hits</td
-          >
-        </tr>
-        {#each getNodePerformanceData(!showAverage) as [key, value]}
-          <tr>
-            <td>
-              {round(value)}<span>ms</span>
-            </td>
-
-            <td
-              class:active={$activeType === key}
-              on:click={() => ($activeType = key)}
-            >
-              {key.split("/").slice(-1).join("/")}
-            </td>
-          </tr>
-        {/each}
-      </tbody>
-      <tbody>
-        <tr>
-          <td>
-            <h3>Viewer</h3>
-          </td>
-        </tr>
-      </tbody>
-      <tbody>
-        <tr>
-          <td>{humanizeNumber(getLast("total-vertices"))}</td>
-          <td>Vertices</td>
-        </tr>
-        <tr>
-          <td>{humanizeNumber(getLast("total-faces"))}</td>
-          <td>Faces</td>
-        </tr>
-        {#each getViewerPerformanceData(!showAverage) as [key, value]}
-          <tr>
-            <td>
-              {round(value)}<span>ms</span>
-            </td>
-            <td
-              class:active={$activeType === key}
-              on:click={() => ($activeType = key)}
-            >
-              {key.split("/").slice(-1).join("/")}
-            </td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  {:else}
-    <p>No runs available</p>
-  {/if}
-</div>
+{/key}
 
 <style>
   h3 {
diff --git a/app/src/lib/settings/panels/ExportSettings.svelte b/app/src/lib/settings/panels/ExportSettings.svelte
index 2217ac1..13ffaad 100644
--- a/app/src/lib/settings/panels/ExportSettings.svelte
+++ b/app/src/lib/settings/panels/ExportSettings.svelte
@@ -1,37 +1,36 @@
 <script lang="ts">
-  import type { Scene } from "three";
-  import { OBJExporter } from "three/addons/exporters/OBJExporter.js";
-  import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
+  import type { Group } from "three";
+  import type { OBJExporter } from "three/addons/exporters/OBJExporter.js";
+  import type { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
   import FileSaver from "file-saver";
 
   // Download
   const download = (
-    data: string,
+    data: ArrayBuffer | string,
     name: string,
     mimetype: string,
     extension: string,
   ) => {
-    if (typeof data !== "string") data = JSON.stringify(data);
     const blob = new Blob([data], { type: mimetype + ";charset=utf-8" });
     FileSaver.saveAs(blob, name + "." + extension);
   };
 
-  // export const json = (data, name = 'default') => {
-  //   download(JSON.stringify(data), name, 'application/json', 'json');
-  // };
-  //
-  // export const obj = (data, name = 'default') => {
-  // };
+  export let scene: Group;
 
-  export let scene: Scene;
+  let gltfExporter: GLTFExporter;
+  async function exportGltf() {
+    const exporter =
+      gltfExporter ||
+      (await import("three/addons/exporters/GLTFExporter.js").then((m) => {
+        gltfExporter = new m.GLTFExporter();
+        return gltfExporter;
+      }));
 
-  function exportGltf() {
-    const exporter = new GLTFExporter();
     exporter.parse(
       scene,
       (gltf) => {
         // download .gltf file
-        download(gltf, "plant", "text/plain", "gltf");
+        download(gltf as ArrayBuffer, "plant", "text/plain", "gltf");
       },
       (err) => {
         console.log(err);
@@ -39,8 +38,15 @@
     );
   }
 
-  function exportObj() {
-    const exporter = new OBJExporter();
+  let objExporter: OBJExporter;
+
+  async function exportObj() {
+    const exporter =
+      objExporter ||
+      (await import("three/addons/exporters/OBJExporter.js").then((m) => {
+        objExporter = new m.OBJExporter();
+        return objExporter;
+      }));
     const result = exporter.parse(scene);
     // download .obj file
     download(result, "plant", "text/plain", "obj");
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 932d312..ddac23e 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -19,7 +19,7 @@
   import GraphSettings from "$lib/settings/panels/GraphSettings.svelte";
   import NestedSettings from "$lib/settings/panels/NestedSettings.svelte";
   import { createPerformanceStore } from "$lib/performance";
-  import type { Scene } from "three";
+  import type { Group, Scene } from "three";
   import ExportSettings from "$lib/settings/panels/ExportSettings.svelte";
   import {
     MemoryRuntimeCache,
@@ -28,6 +28,7 @@
   import { IndexDBCache } from "$lib/node-registry-cache";
   import { decodeNestedArray, fastHashString } from "@nodes/utils";
   import BenchmarkPanel from "$lib/settings/panels/BenchmarkPanel.svelte";
+  import { debounceAsyncFunction, withArgsChangeOnly } from "$lib/helpers";
 
   let performanceStore = createPerformanceStore("page");
 
@@ -53,7 +54,7 @@
   $: runtime = $AppSettings.useWorker ? workerRuntime : memoryRuntime;
 
   let activeNode: Node | undefined;
-  let scene: Scene;
+  let scene: Group;
   let updateViewerResult: (result: Int32Array) => void;
 
   let graph = localStorage.getItem("graph")
@@ -69,8 +70,7 @@
   async function randomGenerate() {
     const g = manager.serialize();
     const s = { ...$graphSettings, randomSeed: true };
-    const res = await handleResult(g, s);
-    return res;
+    await handleUpdate(g, s);
   }
 
   let keymap: ReturnType<typeof createKeyMap>;
@@ -84,71 +84,36 @@
   let graphSettings = writable<Record<string, any>>({});
   let graphSettingTypes = {};
 
-  let isWorking = false;
+  const handleUpdate = debounceAsyncFunction(
+    async (g: Graph, s: Record<string, any>) => {
+      performanceStore.startRun();
+      try {
+        let a = performance.now();
+        const graphResult = await runtime.execute(g, s);
+        let b = performance.now();
 
-  let unfinished:
-    | {
-        graph: Graph;
-        settings: Record<string, any>;
-        hash: number;
-      }
-    | undefined;
-
-  async function handleResult(_graph: Graph, _settings: Record<string, any>) {
-    if (!_settings) return;
-    if ($managerStatus !== "idle") return;
-    const inputHash = fastHashString(
-      JSON.stringify(_graph) + JSON.stringify(_settings),
-    );
-    if (isWorking) {
-      unfinished = {
-        graph: _graph,
-        settings: _settings,
-        hash: inputHash,
-      };
-      return false;
-    }
-    isWorking = true;
-    performanceStore.startRun();
-    try {
-      let a = performance.now();
-      const graphResult = await runtime.execute(_graph, _settings);
-      let b = performance.now();
-
-      if ($AppSettings.useWorker) {
-        let perfData = await runtime.getPerformanceData();
-        let lastRun = perfData?.at(-1);
-        if (lastRun?.total) {
-          lastRun.runtime = lastRun.total;
-          delete lastRun.total;
-          performanceStore.mergeData(lastRun);
-          performanceStore.addPoint(
-            "worker-transfer",
-            b - a - lastRun.runtime[0],
-          );
+        if ($AppSettings.useWorker) {
+          let perfData = await runtime.getPerformanceData();
+          let lastRun = perfData?.at(-1);
+          if (lastRun?.total) {
+            lastRun.runtime = lastRun.total;
+            delete lastRun.total;
+            performanceStore.mergeData(lastRun);
+            performanceStore.addPoint(
+              "worker-transfer",
+              b - a - lastRun.runtime[0],
+            );
+          }
         }
+
+        updateViewerResult(graphResult);
+      } catch (error) {
+        console.log("errors", error);
+      } finally {
+        performanceStore.stopRun();
       }
-
-      updateViewerResult(graphResult);
-    } catch (error) {
-      console.log("errors", error);
-    } finally {
-      performanceStore.stopRun();
-      isWorking = false;
-    }
-
-    if (unfinished && unfinished.hash === inputHash) {
-      let d = unfinished;
-      unfinished = undefined;
-      await handleResult(d.graph, d.settings);
-    }
-
-    return true;
-  }
-
-  $: if ($managerStatus === "idle") {
-    handleResult(manager.serialize(), $graphSettings);
-  }
+    },
+  );
 
   $: if (AppSettings) {
     //@ts-ignore
@@ -203,7 +168,7 @@
           bind:showHelp={$AppSettings.showHelp}
           bind:settings={graphSettings}
           bind:settingTypes={graphSettingTypes}
-          on:result={(ev) => handleResult(ev.detail, $graphSettings)}
+          on:result={(ev) => handleUpdate(ev.detail, $graphSettings)}
           on:save={handleSave}
         />
         <Settings>
diff --git a/nodes/max/plantarium/rotate/src/input.json b/nodes/max/plantarium/rotate/src/input.json
index 919f59b..73101d9 100644
--- a/nodes/max/plantarium/rotate/src/input.json
+++ b/nodes/max/plantarium/rotate/src/input.json
@@ -17,13 +17,6 @@
       "options": ["x", "y", "z"],
       "description": "Along which axis should we rotate?"
     },
-    "spread": {
-      "type": "boolean",
-      "internal": true,
-      "hidden": true,
-      "value": true,
-      "description": "If multiple objects are connected, should we rotate them as one or spread them?"
-    },
     "angle": {
       "type": "float",
       "min": 0,
@@ -31,6 +24,13 @@
       "step": 0.05,
       "value": 0,
       "description": "Rotation angle"
+    },
+    "spread": {
+      "type": "boolean",
+      "internal": true,
+      "hidden": true,
+      "value": true,
+      "description": "If multiple objects are connected, should we rotate them as one or spread them?"
     }
   }
 }
diff --git a/nodes/max/plantarium/rotate/src/lib.rs b/nodes/max/plantarium/rotate/src/lib.rs
index e9bdc45..f9ca31f 100644
--- a/nodes/max/plantarium/rotate/src/lib.rs
+++ b/nodes/max/plantarium/rotate/src/lib.rs
@@ -18,8 +18,7 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
     let plants = split_args(args[0]);
     let axis = evaluate_int(args[1]); // 0 =x, 1 = y, 2 = z
-    let spread = evaluate_int(args[2]);
-    let angle = evaluate_float(args[3]);
+    let spread = evaluate_int(args[3]);
 
     let output: Vec<Vec<i32>> = plants
         .iter()
@@ -34,7 +33,7 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
             let path = wrap_path_mut(&mut path_data);
 
-            let length = path.get_length() as f64;
+            let angle = evaluate_float(args[2]);
 
             let origin = [path.points[0], path.points[1], path.points[2]];