chore: setup linting

2026-02-02 16:22:14 +01:00
parent 137425b31b
commit 30e897468a
174 changed files with 6043 additions and 5107 deletions
--- a/app/src/lib/graph-interface/node/Node.svelte
+++ b/app/src/lib/graph-interface/node/Node.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { NodeInstance } from "@nodarium/types";
-  import { getGraphState } from "../graph-state.svelte";
-  import { T } from "@threlte/core";
-  import { type Mesh } from "three";
-  import NodeFrag from "./Node.frag";
-  import NodeVert from "./Node.vert";
-  import NodeHtml from "./NodeHTML.svelte";
-  import { colors } from "../graph/colors.svelte";
-  import { appSettings } from "$lib/settings/app-settings.svelte";
+  import { appSettings } from '$lib/settings/app-settings.svelte';
+  import type { NodeInstance } from '@nodarium/types';
+  import { T } from '@threlte/core';
+  import { type Mesh } from 'three';
+  import { getGraphState } from '../graph-state.svelte';
+  import { colors } from '../graph/colors.svelte';
+  import NodeFrag from './Node.frag';
+  import NodeVert from './Node.vert';
+  import NodeHtml from './NodeHTML.svelte';

  const graphState = getGraphState();

@@ -21,12 +21,12 @@
  const isActive = $derived(graphState.activeNodeId === node.id);
  const isSelected = $derived(graphState.selectedNodes.has(node.id));
  const strokeColor = $derived(
-    appSettings.value.theme &&
-      (isSelected
+    appSettings.value.theme
+      && (isSelected
        ? colors.selected
        : isActive
-          ? colors.active
-          : colors.outline),
+        ? colors.active
+        : colors.outline)
  );

  let meshRef: Mesh | undefined = $state();
@@ -55,12 +55,12 @@
    fragmentShader={NodeFrag}
    transparent
    uniforms={{
-      uColorBright: { value: colors["layer-2"] },
-      uColorDark: { value: colors["layer-1"] },
+      uColorBright: { value: colors['layer-2'] },
+      uColorDark: { value: colors['layer-1'] },
      uStrokeColor: { value: colors.outline.clone() },
      uStrokeWidth: { value: 1.0 },
      uWidth: { value: 20 },
-      uHeight: { value: height },
+      uHeight: { value: height }
    }}
    uniforms.uStrokeColor.value={strokeColor.clone()}
    uniforms.uStrokeWidth.value={(7 - z) / 3}
--- a/app/src/lib/graph-interface/node/NodeHTML.svelte
+++ b/app/src/lib/graph-interface/node/NodeHTML.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { NodeInstance } from "@nodarium/types";
-  import NodeHeader from "./NodeHeader.svelte";
-  import NodeParameter from "./NodeParameter.svelte";
-  import { getGraphState } from "../graph-state.svelte";
+  import type { NodeInstance } from '@nodarium/types';
+  import { getGraphState } from '../graph-state.svelte';
+  import NodeHeader from './NodeHeader.svelte';
+  import NodeParameter from './NodeParameter.svelte';

  let ref: HTMLDivElement;

@@ -10,7 +10,7 @@

  type Props = {
    node: NodeInstance;
-    position?: "absolute" | "fixed" | "relative";
+    position?: 'absolute' | 'fixed' | 'relative';
    isActive?: boolean;
    isSelected?: boolean;
    inView?: boolean;
@@ -19,11 +19,11 @@

  let {
    node = $bindable(),
-    position = "absolute",
+    position = 'absolute',
    isActive = false,
    isSelected = false,
    inView = true,
-    z = 2,
+    z = 2
  }: Props = $props();

  // If we dont have a random offset, all nodes becom visible at the same zoom level -> stuttering
@@ -31,12 +31,11 @@
  const zLimit = 2 - zOffset;

  const parameters = Object.entries(node.state?.type?.inputs || {}).filter(
-    (p) =>
-      p[1].type !== "seed" && !("setting" in p[1]) && p[1]?.hidden !== true,
+    (p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true
  );

  $effect(() => {
-    if ("state" in node && !node.state.ref) {
+    if ('state' in node && !node.state.ref) {
      node.state.ref = ref;
      graphState?.updateNodePosition(node);
    }
@@ -47,7 +46,7 @@
  class="node {position}"
  class:active={isActive}
  style:--cz={z + zOffset}
-  style:display={inView && z > zLimit ? "block" : "none"}
+  style:display={inView && z > zLimit ? 'block' : 'none'}
  class:selected={isSelected}
  class:out-of-view={!inView}
  data-node-id={node.id}
@@ -56,7 +55,7 @@
 >
  <NodeHeader {node} />

-  {#each parameters as [key, value], i}
+  {#each parameters as [key, value], i (key)}
    <NodeParameter
      bind:node
      id={key}
--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getGraphState } from "../graph-state.svelte";
-  import { createNodePath } from "../helpers/index.js";
-  import type { NodeInstance } from "@nodarium/types";
+  import type { NodeInstance } from '@nodarium/types';
+  import { getGraphState } from '../graph-state.svelte';
+  import { createNodePath } from '../helpers/index.js';

  const graphState = getGraphState();

@@ -10,47 +10,52 @@
  function handleMouseDown(event: MouseEvent) {
    event.stopPropagation();
    event.preventDefault();
-    if ("state" in node) {
+    if ('state' in node) {
      graphState.setDownSocket?.({
        node,
        index: 0,
-        position: graphState.getSocketPosition?.(node, 0),
+        position: graphState.getSocketPosition?.(node, 0)
      });
    }
  }

  const cornerTop = 10;
-  const rightBump = !!node?.state?.type?.outputs?.length;
+  const rightBump = $derived(!!node?.state?.type?.outputs?.length);
  const aspectRatio = 0.25;

-  const path = createNodePath({
-    depth: 5.5,
-    height: 34,
-    y: 49,
-    cornerTop,
-    rightBump,
-    aspectRatio,
-  });
-  const pathHover = createNodePath({
-    depth: 8.5,
-    height: 50,
-    y: 49,
-    cornerTop,
-    rightBump,
-    aspectRatio,
-  });
+  const path = $derived(
+    createNodePath({
+      depth: 5.5,
+      height: 34,
+      y: 49,
+      cornerTop,
+      rightBump,
+      aspectRatio
+    })
+  );
+  const pathHover = $derived(
+    createNodePath({
+      depth: 8.5,
+      height: 50,
+      y: 49,
+      cornerTop,
+      rightBump,
+      aspectRatio
+    })
+  );
 </script>

 <div class="wrapper" data-node-id={node.id} data-node-type={node.type}>
  <div class="content">
-    {node.type.split("/").pop()}
+    {node.type.split('/').pop()}
  </div>
  <div
    class="click-target"
    role="button"
    tabindex="0"
    onmousedown={handleMouseDown}
-  ></div>
+  >
+  </div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
@@ -62,8 +67,7 @@
      --hover-path: path("${pathHover}");
    `}
  >
-    <path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"
-    ></path>
+    <path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"></path>
  </svg>
 </div>

@@ -104,9 +108,7 @@

  svg path {
    stroke-width: 0.2px;
-    transition:
-      d 0.3s ease,
-      fill 0.3s ease;
+    transition: d 0.3s ease, fill 0.3s ease;
    fill: var(--layer-2);
    stroke: var(--stroke);
    stroke-width: var(--stroke-width);
--- a/app/src/lib/graph-interface/node/NodeInput.svelte
+++ b/app/src/lib/graph-interface/node/NodeInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { NodeInstance, NodeInput } from "@nodarium/types";
-  import { Input } from "@nodarium/ui";
-  import type { GraphManager } from "../graph-manager.svelte";
+  import type { NodeInput, NodeInstance } from '@nodarium/types';
+  import { Input } from '@nodarium/ui';
+  import type { GraphManager } from '../graph-manager.svelte';

  type Props = {
    node: NodeInstance;
@@ -16,17 +16,18 @@
    input,
    id,
    elementId = `input-${Math.random().toString(36).substring(7)}`,
-    graph,
+    graph
  }: Props = $props();

  function getDefaultValue() {
    if (node?.props?.[id] !== undefined) return node?.props?.[id] as number;
-    if ("value" in input && input?.value !== undefined)
+    if ('value' in input && input?.value !== undefined) {
      return input?.value as number;
-    if (input.type === "boolean") return 0;
-    if (input.type === "float") return 0.5;
-    if (input.type === "integer") return 0;
-    if (input.type === "select") return 0;
+    }
+    if (input.type === 'boolean') return 0;
+    if (input.type === 'float') return 0.5;
+    if (input.type === 'integer') return 0;
+    if (input.type === 'select') return 0;
    return 0;
  }

--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { NodeInput, NodeInstance } from "@nodarium/types";
-  import { createNodePath } from "../helpers";
-  import NodeInputEl from "./NodeInput.svelte";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
+  import type { NodeInput, NodeInstance } from '@nodarium/types';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';
+  import { createNodePath } from '../helpers';
+  import NodeInputEl from './NodeInput.svelte';

  type Props = {
    node: NodeInstance;
@@ -15,9 +15,9 @@

  let { node = $bindable(), input, id, isLast }: Props = $props();

-  const inputType = node?.state?.type?.inputs?.[id]!;
+  const inputType = $derived(node?.state?.type?.inputs?.[id]);

-  const socketId = `${node.id}-${id}`;
+  const socketId = $derived(`${node.id}-${id}`);

  const graphState = getGraphState();
  const graphId = graph?.id;
@@ -30,38 +30,44 @@
    graphState.setDownSocket({
      node,
      index: id,
-      position: graphState.getSocketPosition?.(node, id),
+      position: graphState.getSocketPosition?.(node, id)
    });
  }

-  const leftBump = node.state?.type?.inputs?.[id].internal !== true;
-  const cornerBottom = isLast ? 5 : 0;
+  const leftBump = $derived(node.state?.type?.inputs?.[id].internal !== true);
+  const cornerBottom = $derived(isLast ? 5 : 0);
  const aspectRatio = 0.5;

-  const path = createNodePath({
-    depth: 7,
-    height: 20,
-    y: 50.5,
-    cornerBottom,
-    leftBump,
-    aspectRatio,
-  });
-  const pathDisabled = createNodePath({
-    depth: 6,
-    height: 18,
-    y: 50.5,
-    cornerBottom,
-    leftBump,
-    aspectRatio,
-  });
-  const pathHover = createNodePath({
-    depth: 8,
-    height: 25,
-    y: 50.5,
-    cornerBottom,
-    leftBump,
-    aspectRatio,
-  });
+  const path = $derived(
+    createNodePath({
+      depth: 7,
+      height: 20,
+      y: 50.5,
+      cornerBottom,
+      leftBump,
+      aspectRatio
+    })
+  );
+  const pathDisabled = $derived(
+    createNodePath({
+      depth: 6,
+      height: 18,
+      y: 50.5,
+      cornerBottom,
+      leftBump,
+      aspectRatio
+    })
+  );
+  const pathHover = $derived(
+    createNodePath({
+      depth: 8,
+      height: 25,
+      y: 50.5,
+      cornerBottom,
+      leftBump,
+      aspectRatio
+    })
+  );
 </script>

 <div
@@ -72,16 +78,14 @@
 >
  {#key id && graphId}
    <div class="content" class:disabled={graph?.inputSockets?.has(socketId)}>
-      {#if inputType.label !== ""}
-        <label for={elementId} title={input.description}
-          >{input.label || id}</label
-        >
+      {#if inputType?.label !== ''}
+        <label for={elementId} title={input.description}>{input.label || id}</label>
      {/if}
      <span
        class="absolute i-[tabler--help-circle] size-4 block top-2 right-2 opacity-30"
        title={JSON.stringify(input, null, 2)}
      ></span>
-      {#if inputType.external !== true}
+      {#if inputType?.external !== true}
        <NodeInputEl {graph} {elementId} bind:node {input} {id} />
      {/if}
    </div>
@@ -94,7 +98,8 @@
        onmousedown={handleMouseDown}
        role="button"
        tabindex="0"
-      ></div>
+      >
+      </div>
    {/if}
  {/key}

@@ -169,9 +174,7 @@
  }

  svg path {
-    transition:
-      d 0.3s ease,
-      fill 0.3s ease;
+    transition: d 0.3s ease, fill 0.3s ease;
    fill: var(--layer-1);
    stroke: var(--stroke);
    stroke-width: var(--stroke-width);