Bunch of note utils

README.md

@@ -81,23 +81,25 @@ var graph = new NodeFlowGraph(canvas, {
     },
 
     // Notes we want rendered on the graph.
-    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
-            `
-        },  
-    ],
+    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
+                `
+            },  
+        ]
+    },
 });
 ```
 

index.html

@@ -124,9 +124,10 @@
                     },
                 },
             },
-            notes: [
-                {
-                    text: `
+            board: {
+                notes: [
+                    {
+                        text: `
 # Notes
 
 This is an example of a *note* written in **markdown**.
@@ -146,19 +147,19 @@
 * Unordered Lists
 * Code blocks
 `,
-                    position: {
-                        x: 2300,
-                        y: 20
-                    },
-                    locked: true,
-                },
-                {
-                    position: {
-                        x: 20,
-                        y: 20
+                        position: {
+                            x: 2300,
+                            y: 20
+                        },
+                        locked: true,
                     },
-                    locked: true,
-                    text: `
+                    {
+                        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. 
@@ -175,9 +176,10 @@
 var graph = new NodeFlowGraph(canvas)
 \`\`\`
 `
-                },
+                    },
 
-            ]
+                ]
+            }
         });
 
         graph.addNote(new FlowNote({
@@ -268,10 +270,7 @@
             ]
         })
 
-        graph.addNode(sumNode)
-        graph.addNode(aNode)
-        graph.addNode(bNode)
-        graph.addNode(new FlowNode({
+        const arrNode = new FlowNode({
             position: {
                 x: 1050,
                 y: 600
@@ -283,11 +282,19 @@
             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>
 

src/graph.ts

@@ -8,8 +8,8 @@ import { CursorStyle } from "./styles/cursor";
 import { CopyVector2, Vector2, Zero } from './types/vector2';
 import { Clamp01 } from "./utils/math";
 import { GraphSubsystem, RenderResults } from './graphSubsystem';
-import { FlowNote, FlowNoteConfig } from "./notes/note";
-import { NoteSubsystem } from "./notes/subsystem";
+import { FlowNote } from "./notes/note";
+import { NoteAddedCallback, NoteDragStartCallback, NoteDragStopCallback, NoteSubsystem, NoteSubsystemConfig } from "./notes/subsystem";
 import { ConnectionRendererConfiguration, NodeAddedCallback, NodeSubsystem } from "./nodes/subsystem";
 import { Connection } from './connection';
 import { Publisher } from './nodes/publisher';
@@ -52,7 +52,7 @@ export interface FlowNodeGraphConfiguration {
     idleConnection?: ConnectionRendererConfiguration
     contextMenu?: ContextMenuConfig
     nodes?: NodeFactoryConfig
-    notes?: Array<FlowNoteConfig>
+    board?: NoteSubsystemConfig
 }
 
 interface OpenContextMenu {
@@ -165,7 +165,7 @@ export class NodeFlowGraph {
             idleConnection: config?.idleConnection
         });
 
-        this.#mainNoteSubsystem = new NoteSubsystem(config?.notes);
+        this.#mainNoteSubsystem = new NoteSubsystem(config?.board);
 
         this.#views = [
             new GraphView([
@@ -255,6 +255,19 @@ export class NodeFlowGraph {
         }));
     }
 
+    public addNoteAddedListener(callback: NoteAddedCallback): void {
+        this.#mainNoteSubsystem.addNoteAddedListener(callback);
+    }
+
+    public addNoteDragStartListener(callback: NoteDragStartCallback): void {
+        this.#mainNoteSubsystem.addNoteDragStartListener(callback);
+    }
+
+    public addNoteDragStopListener(callback: NoteDragStopCallback): void {
+        this.#mainNoteSubsystem.addNoteDragStopListener(callback);
+    }
+
+
     zoom(amount: number): void {
 
         let oldPos: Vector2 | undefined = undefined;

src/node.ts

@@ -71,6 +71,7 @@ export interface FlowNodeConfig {
     onRelease?: () => void;
     onSelect?: () => void;
     onUnselect?: () => void;
+    onDragStop?: (FlowNode) => void;
     onFileDrop?: (file: File) => void;
 
     // Widgets
@@ -128,6 +129,8 @@ export class FlowNode {
 
     #onFiledrop: Array<(file: File) => void>;
 
+    #onDragStop: Array<(node: FlowNode) => void>;
+
     // Styling ================================================================
 
     #titleColor: string;
@@ -175,9 +178,10 @@ export class FlowNode {
         this.#metadata = config?.metadata;
 
         this.#selected = false;
-        this.#onSelect = new Array<() => void>;
-        this.#onUnselect = new Array<() => void>;
-        this.#onFiledrop = new Array<(file: File) => void>;
+        this.#onSelect = new Array<() => void>();
+        this.#onUnselect = new Array<() => void>();
+        this.#onFiledrop = new Array<(file: File) => void>();
+        this.#onDragStop = new Array<() => void>();
 
         if (config?.onSelect) {
             this.#onSelect.push(config?.onSelect);
@@ -191,6 +195,10 @@ export class FlowNode {
             this.#onFiledrop.push(config?.onFileDrop);
         }
 
+        if (config?.onDragStop) {
+            this.#onDragStop.push(config.onDragStop);
+        }
+
         this.#position = config?.position === undefined ? { x: 0, y: 0 } : config.position;
         this.#title = new Text(
             config?.title === undefined ? "" : config.title,
@@ -275,6 +283,18 @@ export class FlowNode {
         }
     }
 
+    public raiseDragStoppedEvent() {
+        for (let i = 0; i < this.#onDragStop.length; i++) {
+            this.#onDragStop[i](this);
+        }
+    }
+
+    public addDragStoppedListener(callback: (node: FlowNode) => void): void {
+        if (callback === undefined || callback === null) {
+        }
+        this.#onDragStop.push(callback);
+    }
+
     public addAnyPropertyChangeListener(callback: AnyPropertyChangeCallback): void {
         if (callback === undefined || callback === null) {
         }
@@ -587,6 +607,10 @@ export class FlowNode {
         CopyVector2(this.#position, position);
     }
 
+    public getPosition(): Vector2 {
+        return this.#position;
+    }
+
     // #measureTitleText(ctx: CanvasRenderingContext2D, scale: number): Vector2 {
     //     return this.#titleTextStyle.measure(ctx, scale, this.#title);
     // }
@@ -643,7 +667,7 @@ export class FlowNode {
     }
 
     addInput(config: PortConfig): Port {
-        const port = new Port(this, config.array? PortType.InputArray : PortType.Input, config);
+        const port = new Port(this, config.array ? PortType.InputArray : PortType.Input, config);
         this.#input.push(port);
         return port;
     }

src/nodes/subsystem.ts

@@ -231,6 +231,11 @@ export class NodeSubsystem {
     }
 
     clickEnd(): void {
+
+        for(let i = 0; i < this.#nodesGrabbed.Count(); i ++) {
+            const node = this.#nodes[this.#nodesGrabbed.At(i)];
+            node.raiseDragStoppedEvent();
+        }
         this.#nodesGrabbed.Clear();
 
         if (this.#boxSelect) {