logical nodes / functions / if / var declaration and assignment / Swizzle node / and a bunch of other stuff like... formatting everything with prettier......

Author: bandinopla

.devcontainer/devcontainer.json

@@ -1,25 +1,29 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "Node.js & TypeScript",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
-	"features": {
-		"ghcr.io/devcontainers-extra/features/pnpm:2": {}
-	}
+    "name": "Node.js & TypeScript",
+    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+    "features": {
+        "ghcr.io/devcontainers-extra/features/pnpm:2": {}
+    },
 
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
+    // Features to add to the dev container. More info: https://containers.dev/features.
+    // "features": {},
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
+    // Use 'forwardPorts' to make a list of ports inside the container available locally.
+    // "forwardPorts": [],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
+    // Use 'postCreateCommand' to run commands after the container is created.
+    // "postCreateCommand": "yarn install",
 
-	// Configure tool-specific properties.
-	// "customizations": {},
+    // Configure tool-specific properties.
+    "customizations": {
+        "vscode": {
+            "extensions": ["esbenp.prettier-vscode"]
+        }
+    }
 
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
+    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+    // "remoteUser": "root"
 }

.gitignore

@@ -26,4 +26,5 @@ dist-ssr
 _*
 /layout*.js
 /assets
-test*
+test*
+TODO

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "printWidth": 100
+}

README.md

@@ -1,8 +1,10 @@
 # three.js TSL Visual Node Editor
 
-### :rocket: [Launch Editor](https://bandinopla.github.io/three.js-visual-node-editor/) :rocket:
+### :rocket: [Launch Editor (Alpha)](https://bandinopla.github.io/three.js-visual-node-editor/) :rocket:
+*remember it is in alpha state, errors might occur, check the console and report if you can*
 
-[![cover](/public/cover.png)](https://bandinopla.github.io/three.js-visual-node-editor/)
+
+[![cover](/git-cover.png)](https://bandinopla.github.io/three.js-visual-node-editor/)
 
 ## **[!] Work in progress | Alpha state** <br/>
 Visual node editor, inspired by [Blender's shader editor](https://www.blender.org/), is a tool to visually build [Three.js](https://threejs.org/) materials using [Three.js-Shading-Language](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language).  The socket proximity detection was inspired by [Kennedy Richard](https://x.com/KennedyRichard)'s [Nodezator's node editor](https://x.com/KennedyRichard/status/1823905562192449762)
@@ -23,8 +25,14 @@ You can also fix bugs or improve the code/interface. Just clone and do a pull re
 ### TSL to Visual Nodes:
 - :white_check_mark: UV Channel
 - :warning: Preview
-- :no_entry: Function
+- :warning: Functions
 - :warning: Uniform
+- Conditional / Logic
+    - :warning: If
+    - :warning: Declare & Assign variables
+    - :no_entry: Ternary
+    - :no_entry: Loop
+    - :warning: Swizzle
 - NodeMaterial
     - :no_entry: fragmentNode
     - :no_entry: vertexNode
@@ -85,7 +93,7 @@ You can also fix bugs or improve the code/interface. Just clone and do a pull re
 
 
 - :white_check_mark: Image texture node
-- :white_check_mark: Operators
+- :warning: Operators (not fully tested)
     - :white_check_mark: add
     - :white_check_mark: sub
     - :white_check_mark: mul
@@ -109,6 +117,7 @@ You can also fix bugs or improve the code/interface. Just clone and do a pull re
     - :white_check_mark: shiftLeft
     - :white_check_mark: shiftRight
 - Math
+    - :white_check_mark: mx_noise_float
     - :white_check_mark: abs  
     - :white_check_mark: acos  
     - :white_check_mark: all  
@@ -261,8 +270,4 @@ You can also fix bugs or improve the code/interface. Just clone and do a pull re
     - :no_entry: oscSawtooth
 - Packing
     - :no_entry: directionToColor
-    - :no_entry: colorToDirection
-- Conditional / Logic
-    - :no_entry: If
-    - :no_entry: Ternary
-    - :no_entry: Loop
+    - :no_entry: colorToDirection

eslint.config.js

@@ -0,0 +1,16 @@
+// eslint.config.js
+import eslintPluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    eslintPluginJs.configs.recommended,
+    tseslint.configs.recommended,
+    {
+        rules: {
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-empty-object-type": "off",
+            "@typescript-eslint/no-this-alias": "off",
+            "@typescript-eslint/ban-ts-comment":"off"
+        },
+    }
+);

git-cover.png

@@ -1,26 +1,31 @@
 <!doctype html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <link rel="shortcut icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@bandinopla">
     <meta name="twitter:title" content="Three.js - TSL Visual Node Editor">
-    <meta property="og:image" content="https://github.com/bandinopla/three.js-visual-node-editor/raw/main/public/cover.png">
+    <meta property="og:image"
+        content="https://github.com/bandinopla/three.js-visual-node-editor/raw/main/public/cover.png">
     <title>Three.js - TSL Visual Node Editor </title>
     <style>
-        html, body {
-             padding: 0px;
-             margin: 0px;
-             overflow: hidden;
+        html,
+        body {
+            padding: 0px;
+            margin: 0px;
+            overflow: hidden;
         }
-        canvas { 
+
+        canvas {
             border: 0px;
             position: absolute;
-            top:0px;
+            top: 0px;
             left: 0px;
         }
+
         .controls {
             position: fixed;
             bottom: 10px;
@@ -30,10 +35,18 @@
             z-index: 99;
         }
     </style>
-  </head>
-  <body> 
-    <div class="controls"><strong>ALPHA RELEASE v%APP_VERSION%</strong> | MMB: Click and drag to pan | DOUBLE CLICK: add new node | SHIFT+A : open | SHIFT+S : save | <a href="https://github.com/bandinopla/three.js-visual-node-editor" target="_blank">Github Page</a></div>
+</head>
+
+<body>
+    <div style="position: fixed; top:0px; left:0px; right:0px; z-index: 999; background-color: darkblue; color:white">
+        Work in progress (check console for errors, some might require reload...). <a
+            href="https://github.com/bandinopla/three.js-visual-node-editor/issues" target="_blank">Report errors
+            here</a></div>
+    <div class="controls"><strong>ALPHA RELEASE v%APP_VERSION%</strong> | MMB: Click and drag to pan | DOUBLE CLICK: add
+        new node | SHIFT+A : open | SHIFT+S : save | <a href="https://github.com/bandinopla/three.js-visual-node-editor"
+            target="_blank">Github Page</a></div>
     <canvas id="app" width="1024" height="1024"></canvas>
     <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+</body>
+
+</html>

index.html

@@ -1,46 +1,54 @@
 {
-  "name": "tsl-nodes",
-  "private": true,
-  "version": "0.0.5",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "hhttps://github.com/bandinopla/three.js-visual-node-editor"
-  },
-  "bugs": {
-    "url": "https://github.com/bandinopla/three.js-visual-node-editor/issues"
-  },
-  "author": "bandinopla",
-  "license": "MIT",
-
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "keywords": [
-    "three",
-    "three.js",
-    "javascript",
-    "typescript",
-    "3d",
-    "nodes",
-    "shader",
-    "shader-editor",
-    "webgl",
-    "webgl2",
-    "webgpu",
-    "webxr",
-    "canvas",
-    "svg",
-    "html5"
-  ], 
-  "devDependencies": {
-    "typescript": "~5.7.2",
-    "vite": "^6.2.0"
-  },
-  "dependencies": {
-    "@types/three": "^0.174.0",
-    "three": "^0.174.0"
-  }
+    "name": "tsl-visual-nodes-editor",
+    "private": true,
+    "version": "0.0.6",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/bandinopla/three.js-visual-node-editor"
+    },
+    "bugs": {
+        "url": "https://github.com/bandinopla/three.js-visual-node-editor/issues"
+    },
+    "author": "bandinopla",
+    "license": "MIT",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "lint": "eslint src --ext .ts,.tsx",
+        "format": "prettier --write src"
+    },
+    "keywords": [
+        "three",
+        "three.js",
+        "javascript",
+        "typescript",
+        "3d",
+        "nodes",
+        "shader",
+        "shader-editor",
+        "webgl",
+        "webgl2",
+        "webgpu",
+        "webxr",
+        "canvas",
+        "svg",
+        "html5"
+    ],
+    "devDependencies": {
+        "@eslint/js": "^9.24.0",
+        "@typescript-eslint/eslint-plugin": "^8.29.1",
+        "@typescript-eslint/parser": "^8.29.1",
+        "eslint": "^9.24.0",
+        "eslint-config-prettier": "^10.1.2",
+        "prettier": "^3.5.3",
+        "typescript": "~5.7.2",
+        "typescript-eslint": "^8.29.1",
+        "vite": "^6.2.0"
+    },
+    "dependencies": {
+        "@types/three": "^0.174.0",
+        "three": "^0.174.0"
+    }
 }