@elicdavis/node-flow 0.1.0

package/.github/workflows/deploy.yml

@@ -0,0 +1,57 @@
+name: Deployment
+
+concurrency: production
+
+on:
+  push:
+    branches:
+      - main
+
+permissions: 
+  contents: write
+        
+env:
+  NODE_VERSION: '18.x'                # set this to the node version to use
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm run build --
+        rm -rf node_modules/
+    - name: Upload artifact for deployment job
+      uses: actions/upload-artifact@v4
+      with:
+        name: node-app
+        path: .
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: 'production'
+
+    steps:
+    - name: Download artifact from build job
+      uses: actions/download-artifact@v4
+      with:
+        name: node-app
+
+    - name: Deploy to GitHub Pages
+      uses: crazy-max/ghaction-github-pages@v4
+      with:
+        target_branch: gh-pages
+        build_dir: .
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/README.md

@@ -0,0 +1,159 @@
+# Node Flow
+
+Another Flow-based Node graph Library.
+
+Check it out [here](https://elicdavis.github.io/node-flow/).
+
+![promotional image](./docs/promotional-image.png)
+
+## About
+
+Node Flow is a javascript library that enables developers to build node based tools similar to Unreal Blueprints or Blender Nodes. 
+
+## Features
+
+* Nodes
+* Markdown Notes
+* More Nodes
+
+## Install
+
+Download the latest build [here](https://raw.githubusercontent.com/EliCDavis/node-flow/gh-pages/dist/web/NodeFlow.js).
+
+## Building
+
+If you want to build the library yourself, you can run
+
+```bash
+npm run package
+```
+
+## API
+
+### Graph API
+
+#### Creation
+
+The only requirement for creating a graph is providing it an instance of a [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas).
+
+```javascript
+// Create a canvas to render our graph to
+var canvas = document.createElement("canvas");
+
+// Create our Node Flow Graph
+var graph = new NodeFlowGraph(canvas)
+```
+
+There are a bunch of optional parameters you can provide the graph:
+
+```javascript
+var graph = new NodeFlowGraph(canvas, {
+    // Background color of the graph.
+    backgroundColor: "#FF5500",
+
+    // You can add extra items to the context
+    // menu that pops up when you right click.
+    contextMenu: {
+        subMenus: [
+            {
+                // Text that shows up in the context
+                // menu 
+                name: "Example Context Menu Item",
+                
+                // This is recursive. We can nest as 
+                // many submenus within eachother as
+                // we want. This field is optional.
+                subMenus: [],
+
+                items: [
+                    {
+                        name: "Sub menu Item!!!"
+                    }
+                ]
+            }
+        ],
+
+        // Items that show up at the base of the 
+        // context menu
+        items: [
+            {
+                // Text that shows up in the context
+                // menu 
+                name: "Example Context Menu Item",
+                
+                // Function that get's executed when
+                // Item is clicked.
+                callback: () => {
+                    alert("Example Context Menu Item");
+                }    
+            }
+        ]
+    },
+
+    // Notes we want rendered on the graph.
+    board: {
+        notes: [
+            {
+                // Where to render the note
+                position: { x: 20, y: 20 },
+
+                // Whether or not the note can be 
+                // interacted with on the graph
+                locked: true,
+
+                // Markdown enabled text
+                text: `
+                # My First note!!!
+
+                Not sure what to write here
+                `
+            },  
+        ]
+    },
+});
+```
+
+### Node API
+
+#### Creation
+
+```javascript
+// All nodes require a title. That's about it.
+var node = new FlowNode({ 
+    title: "My First Node!",
+});
+
+// Be sure to add it to the graph so it can be rendered.
+graph.addNode(node);
+```
+
+#### Inputs and Outputs
+
+Create a Add node that takes two numbers and outputs a single number
+
+```javascript
+var node = new FlowNode({ 
+    title: "Add",
+    inputs: [
+        { name: "a", type: "float32" },
+        { name: "b", type: "float32" }
+    ],
+     outputs: [
+        { name: "sum", type: "float32" }
+    ],
+});
+```
+
+You can also add additional inputs and outputs to the node after it's been created
+
+```javascript
+node.addInput({ name: "c", type: "float32" })
+node.addOutput({ name: "sum", type: "float32" })
+```
+
+## Library Development
+
+Just run
+
+```bash
+```npm run watch

package/dev.tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "declaration": true, 
+        "outFile": "./dist/js/NodeFlow.js", 
+        "sourceMap": true, 
+        "strict": true, 
+        "module": "AMD", 
+        "target": "ESNext"
+    },
+
+    "include": [
+        "src/index.ts"
+    ], 
+
+    "exclude": [
+        "node_modules"
+    ] 
+}

package/esbuild.ts

@@ -0,0 +1,32 @@
+import { build, serve, BuildOptions } from 'esbuild';
+
+const buildOptsWeb: BuildOptions = {
+  entryPoints: ['./src/index.ts'],
+  outfile: './dist/web/NodeFlow.js',
+  platform: 'browser',
+  target: ['esNext'],
+  //   format: 'cjs',
+  bundle: true,
+  sourcemap: true,
+  minify: true,
+  treeShaking: true,
+};
+
+const serveOpts = { servedir: './' };
+const flags = process.argv.filter(arg => /--[^=].*/.test(arg));
+const enableWatch = (flags.includes('--watch'));
+
+if (enableWatch) {
+  buildOptsWeb.watch = {
+    onRebuild: (error, result) => {
+      if (error) { console.error('watch web development build failed:', error); }
+      else { console.log('watch web development build succeeded:', result); }
+    }
+  };
+
+  serve(serveOpts, {}).then((result) => {
+    console.log(`serving extension from "${serveOpts.servedir}" at "http://${result.host}:${result.port}"`);
+  });
+}
+
+build(buildOptsWeb).then(() => enableWatch ? console.log("watching web development build...") : null);

package/index.html

@@ -0,0 +1,311 @@
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>Node Flow Demo</title>
+    <link rel="shortcut icon" href="#" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+        }
+
+        canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+    </style>
+
+    <script src="./dist/index.mjs" type="module"></script>
+</head>
+
+<body>
+    <canvas id="canvas"></canvas>
+    <script type="module">
+        import { Theme, FlowNode, NodeFlowGraph, FlowNote } from "./dist/index.mjs";
+
+        const canvas = document.getElementById("canvas");
+        Theme.FontFamily = "Source Code Pro";
+
+        const node3 = new FlowNode({
+            title: "Node 3",
+            position: { x: 850, y: 150 },
+            inputs: [
+                { name: "test input 1", type: "int" }
+            ],
+            outputs: [
+                { name: "float", type: "float32" }
+            ],
+            widgets: [
+                {
+                    type: "slider",
+                    config: {
+                        min: 0,
+                        max: 5,
+                        value: 2.5,
+                        snapIncrement: .25
+                    }
+                }
+            ]
+        });
+
+        const graph = new NodeFlowGraph(canvas, {
+            nodes: {
+                publishers: {
+                    "example": {
+                        name: "Example",
+                        description: "Bunch of example nodes",
+                        version: "v1.0.0",
+                        nodes: {
+                            "empty": {
+                                title: "Empty Node",
+                                canEditTitle: true,
+                                canEditPorts: true,
+                                canEditInfo: true
+                            },
+                            "widgets/slider": {
+                                title: "Slider Node",
+                                widgets: [
+                                    {
+                                        type: "slider",
+                                        config: {
+                                            value: 0.5,
+                                        }
+                                    }
+                                ],
+                                outputs: [
+                                    {
+                                        name: "out",
+                                        type: "float32"
+                                    }
+                                ]
+                            },
+                            "widgets/color": {
+                                title: "Color Node",
+                                widgets: [
+                                    {
+                                        type: "color",
+                                        config: {
+                                        }
+                                    }
+                                ],
+                                outputs: [
+                                    {
+                                        name: "out",
+                                        type: "color"
+                                    }
+                                ]
+                            },
+                            "widgets/text": {
+                                title: "Text Node",
+                                widgets: [
+                                    {
+                                        type: "text",
+                                        config: {
+                                            value: "Arbitrary Text"
+                                        }
+                                    }
+                                ],
+                                outputs: [
+                                    {
+                                        name: "out",
+                                        type: "color"
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                },
+            },
+            board: {
+                notes: [
+                    {
+                        text: `
+# Notes
+
+This is an example of a *note* written in **markdown**.
+
+You can place notes around your graph to help explain your graph to other users.
+
+## Editting
+
+*Right-click* on this note and select "Edit Note" to put your text here!
+
+## Support
+
+This is a minimal implementation with graph-specific functionality. Currently implemented features are:
+
+* H1, H2, and H3
+* Bold and Italic
+* Unordered Lists
+* Code blocks
+`,
+                        position: {
+                            x: 2300,
+                            y: 20
+                        },
+                        locked: true,
+                    },
+                    {
+                        position: {
+                            x: 20,
+                            y: 20
+                        },
+                        locked: true,
+                        text: `
+# Node Flow
+
+Node Flow is a javascript library that enables developers to build node based tools similar to Unreal Blueprints or Blender Nodes. 
+
+## Example
+
+Scattered across this graph contains code snippets on how to accomplish different things within the library.
+
+\`\`\`
+// Create a canvas to render our graph to
+let canvas = document.createElement("canvas");
+
+// Create our Node Flow Graph
+let graph = new NodeFlowGraph(canvas)
+\`\`\`
+`
+                    },
+
+                ]
+            }
+        });
+
+        graph.addNote(new FlowNote({
+            position: { x: 800, y: 20 },
+            locked: true,
+            text: `
+## Inputs and Outputs
+
+Create a Add node that takes two numbers and outputs a single number
+
+\`\`\`
+let node = new FlowNode({ 
+    title: "Add",
+    info:  "I add two numbers",
+    inputs: [
+        { name: "a", type: "float32" },
+        { name: "b", type: "float32" }
+    ],
+     outputs: [
+        { name: "sum", type: "float32" }
+    ],
+});
+graph.addNode(node);
+\`\`\`
+
+You can also add additional inputs and outputs to the node after it's been created
+
+\`\`\`
+node.addInput({ name: "c", type: "float32" })
+node.addOutput({ name: "sum", type: "float32" })
+\`\`\`
+`        }));
+
+
+
+        var sumNode = new FlowNode({
+            position: {
+                x: 850,
+                y: 600
+            },
+            title: "Add",
+            info: "I add two numbers",
+            inputs: [
+                { name: "a", type: "float32" },
+                { name: "b", type: "float32" }
+            ],
+            outputs: [
+                { name: "sum", type: "float32" }
+            ],
+        });
+
+
+        var aNode = new FlowNode({
+            position: {
+                x: 550,
+                y: 500
+            },
+            title: "Number",
+            info: "I'm a node with a number widget",
+            outputs: [
+                { name: "value", type: "float32" }
+            ],
+            widgets: [
+                {
+                    type: "number",
+                    config: { value: 1 }
+                }
+            ]
+        });
+
+        var bNode = new FlowNode({
+            position: {
+                x: 550,
+                y: 650
+            },
+            title: "Number",
+            info: "I'm a node with both a number and image widget on it",
+            outputs: [
+                { name: "value", type: "float32" }
+            ],
+            widgets: [
+                {
+                    type: "number",
+                    config: { value: 2 }
+                },
+                {
+                    type: "image",
+                    config: {
+                        image: "https://i.imgur.com/qRZgWC0.jpeg"
+                    }
+                }
+            ]
+        })
+
+        const arrNode = new FlowNode({
+            position: {
+                x: 1050,
+                y: 600
+            },
+            title: "Add",
+            subTitle: "Array Inputs",
+            info: "This node contains a port that can take multiple input nodes at once, which can be useful for operations that can operate on [0,n] data sizes",
+            inputs: [
+                { name: "numbers", type: "float32", array: true },
+            ],
+            outputs: [
+                { name: "sum", type: "float32" }
+            ],
+        });
+
+        graph.addNode(sumNode)
+        graph.addNode(aNode)
+        graph.addNode(bNode)
+        graph.addNode(arrNode)
+
+        graph.connectNodes(aNode, 0, sumNode, 0)
+        graph.connectNodes(bNode, 0, sumNode, 1)
+
+        graph.connectNodes(aNode, 0, arrNode, 0)
+        graph.connectNodes(bNode, 0, arrNode, 0)
+
+    </script>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@elicdavis/node-flow",
+  "description": "build node graphs",
+  "author": "Eli C Davis",
+  "version": "0.1.0",
+  "license": "MIT",
+  "keywords": [
+    "nodes",
+    "node-flow",
+    "graph"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "ts-node ./esbuild.ts",
+    "watch": "npm run build -- --watch",
+    "package": "tsup"
+  },
+  "homepage": "https://github.com/EliCDavis/node-flow",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EliCDavis/node-flow.git"
+  },
+  "bugs": {
+    "url": "https://github.com/EliCDavis/node-flow/issues"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@types/glob": "^7.2.0",
+    "@types/mocha": "^9.1.1",
+    "@types/node": "16.x",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "abort-controller": "^3.0.0",
+    "esbuild": "^0.15.11",
+    "eslint": "^8.20.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "glob": "^8.0.3",
+    "mocha": "^10.0.0",
+    "stream-browserify": "^3.0.0",
+    "ts-node": "^10.9.1",
+    "tsup": "^8.4.0",
+    "typescript": "^4.7.4"
+  }
+}

package/src/camera.ts

@@ -0,0 +1,30 @@
+import { Vector2, Zero } from "./types/vector2";
+
+export class Camera {
+
+    zoom: number;
+
+    position: Vector2;
+
+    constructor() {
+        this.zoom = 1;
+        this.position = Zero();
+    }
+
+    screenSpaceToGraphSpace(screenPosition: Vector2, out: Vector2): void {
+        const scale = this.zoom;
+        out.x = (screenPosition.x / scale) - (this.position.x / scale);
+        out.y = (screenPosition.y / scale) - (this.position.y / scale);
+    }
+
+    graphSpaceToScreenSpace(graphPosition: Vector2, out: Vector2): void {
+        out.x = this.position.x + (graphPosition.x * this.zoom);
+        out.y = this.position.y + (graphPosition.y * this.zoom);
+    }
+
+    reset(): void {
+        this.zoom = 1;
+        this.position.x = 0;
+        this.position.y = 0;
+    }
+}