First commit

GraphExplorer.js

@@ -0,0 +1,778 @@
+
+
+if( typeof document != "undefined" ) {
+
+	document.nodes = { };
+
+}
+
+
+const colors  = {
+	background:         "#222",
+	gridLine:           "#444",
+	connectionWire:     "#00aaff",
+	nodeBackground:     "#2d2d2d",
+	nodeBorder:         "#777",
+	nodeNameBackground: "#2d2d2d",
+	nodeNameText:       "#fff",
+	inputPortFill:      "#aaa",
+	outputPortFill:     "#00aaff",
+};
+
+export class Node {
+	name          = "";
+	
+	x             = 0;
+
+	y             = 0;
+
+	inputs        = new Array();
+
+	outputs       = new Array();
+
+	width         = 0;
+
+	cornerRadius  = 10;
+
+	constructor(name, x, y, inputs, outputs) {
+		this.name    = name;
+		this.x       = x;
+		this.y       = y;
+		this.inputs  = inputs;
+		this.outputs = outputs;
+	}
+
+	getHeight() {
+		return 40 + Math.max(this.inputs.length, this.outputs.length) * 20;
+	}
+
+	updateWidth(ctx) {
+
+		const textWidth = ctx.measureText(this.name).width;
+
+		this.width = Math.max(200, textWidth + 40);
+
+	}
+
+	roundRect(ctx, x, y, w, h, r) {
+		ctx.beginPath();
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + w - r, y);
+		ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+		ctx.lineTo(x + w, y + h - r);
+		ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+		ctx.lineTo(x + r, y + h);
+		ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+		ctx.closePath();
+	}
+
+	draw( ctx ) {
+
+		const nodeHeight = this.getHeight();
+
+		if( typeof document != "undefined" ) {
+
+			document.nodes[ this.name ] = { x:this.x, y: this.y };
+
+		}
+
+		this.roundRect(ctx, this.x, this.y, this.width, nodeHeight, this.cornerRadius);
+		ctx.fillStyle = colors.nodeBackground;
+		ctx.fill();
+
+		ctx.strokeStyle = colors.nodeBorder;
+		ctx.lineWidth = 2;
+		this.roundRect(ctx, this.x, this.y, this.width, nodeHeight, this.cornerRadius);
+		ctx.stroke();
+
+		ctx.fillStyle = colors.nodeNameText;
+		ctx.fillText(this.name, this.x + 20, this.y + 20);
+
+		ctx.fillStyle = colors.inputPortFill;
+		for (let i = 0; i < this.inputs.length; i++) {
+			const pos = this.getInputPos(i);
+			ctx.beginPath();
+			ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2);
+			ctx.fill();
+			ctx.fillText(this.inputs[i], pos.x + 12, pos.y);
+		}
+
+		ctx.fillStyle = colors.outputPortFill;
+		for (let i = 0; i < this.outputs.length; i++) {
+			const pos = this.getOutputPos(i);
+			ctx.beginPath();
+			ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2);
+			ctx.fill();
+
+			const label       = this.outputs[i];
+			const labelWidth  = ctx.measureText(label).width;
+			ctx.fillText(label, pos.x - 12 - labelWidth, pos.y);
+		}
+	}
+
+	getInputPos(index) {
+		return { x: this.x, y: this.y + 40 + index * 20 };
+	}
+
+	getOutputPos(index) {
+		return { x: this.x + this.width, y: this.y + 40 + index * 20 };
+	}
+
+	containsPoint(x, y) {
+		const nodeHeight = this.getHeight();
+		return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + nodeHeight;
+	}
+}
+
+export class Edge {
+	fromNode    = null;
+	fromIndex   = 0;
+	toNode      = null;
+	toIndex     = 0;
+	toPos       = null;
+
+	constructor(fromNode, fromIndex, toNode = null, toIndex = null, toPos = null) {
+		this.fromNode  = fromNode;
+		this.fromIndex = fromIndex;
+		this.toNode    = toNode;
+		this.toIndex   = toIndex;
+		this.toPos     = toPos;
+	}
+
+	draw(ctx) {
+		const fromPos = this.fromNode.getOutputPos(this.fromIndex);
+
+		let toPos;
+
+		if (this.toNode !== null && this.toIndex !== null) {
+			toPos = this.toNode.getInputPos(this.toIndex);
+		} else if (this.toPos !== null) {
+			toPos = this.toPos;
+		} else {
+			return;
+		}
+
+		const cp1 = { x: fromPos.x + 50, y: fromPos.y };
+		const cp2 = { x: toPos.x - 50, y: toPos.y };
+
+		ctx.beginPath();
+		ctx.moveTo(fromPos.x, fromPos.y);
+		ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, toPos.x, toPos.y);
+		ctx.stroke();
+	}
+
+
+	distance(a, b) {
+		return Math.hypot(a.x - b.x, a.y - b.y);
+	}
+
+	pointNear(pt, tolerance) {
+		const fromPos = this.fromNode.getOutputPos(this.fromIndex);
+
+		let toPos;
+
+		if (this.toNode !== null && this.toIndex !== null) {
+			toPos = this.toNode.getInputPos(this.toIndex);
+		} else if (this.toPos !== null) {
+			toPos = this.toPos;
+		} else {
+			return false;
+		}
+
+		const cp1 = { x: fromPos.x + 50, y: fromPos.y };
+		const cp2 = { x: toPos.x - 50, y: toPos.y };
+
+		const samples = 20;
+		for (let i = 0; i <= samples; i++) {
+			const t = i / samples;
+
+			const x =
+				Math.pow(1 - t, 3) * fromPos.x +
+				3 * Math.pow(1 - t, 2) * t * cp1.x +
+				3 * (1 - t) * Math.pow(t, 2) * cp2.x +
+				Math.pow(t, 3) * toPos.x;
+
+			const y =
+				Math.pow(1 - t, 3) * fromPos.y +
+				3 * Math.pow(1 - t, 2) * t * cp1.y +
+				3 * (1 - t) * Math.pow(t, 2) * cp2.y +
+				Math.pow(t, 3) * toPos.y;
+
+			if (this.distance(pt, { x, y }) < tolerance) {
+				return true;
+			}
+		}
+		return false;
+	}
+}
+
+
+export class GraphExplorer {
+
+	isPanning      	 	= false;
+
+	dragNode        	= null;
+
+	isDrawScheduled 	= false;
+
+	dragOffsetX     	= 0;
+
+	dragOffsetY     	= 0;
+
+	nodes				= new Array();
+
+	edges				= new Array();
+
+	dragWire        	= null;
+
+	lastMousePos    	= null;
+
+	panX            	= 40;
+
+	panY            	= 20;
+
+
+	panStartMouse   	= null;
+
+	panStartOffsetX 	= 0;
+
+	panStartOffsetY 	= 0;
+
+	// Inertia variables
+	velocityX       	= 0;
+
+	velocityY       	= 0;
+
+	friction     		= 0.93;
+
+	velocityThreshold 	= 0.1;
+
+
+	zoom 				= 1.;
+
+	minZoom 			= 0.1;
+
+	maxZoom 			= 4;
+
+	canvas;
+
+	context;
+
+	requestDraw() {
+
+		if ( this.isDrawScheduled ) {
+
+			return;
+
+		} 
+
+		this.isDrawScheduled = true;
+
+		requestAnimationFrame(() => {
+
+			this.isDrawScheduled = false;
+
+			this.draw();
+
+		});
+	}
+
+	draw( clear = true  ) {
+
+		this.context.setTransform(1, 0, 0, 1, 0, 0);
+
+		if( clear ){
+
+			this.context.clearRect(0, 0, this.width, this.height);
+
+		}
+		
+
+		this.context.save();
+
+		this.context.translate(this.panX, this.panY);
+
+		this.context.scale(this.zoom, this.zoom);
+
+		this.drawGrid(this.context);
+
+		for (const node of this.nodes) {
+
+			node.updateWidth(this.context);
+
+			node.draw(this.context);
+
+		}
+
+		for (const edge of this.edges) {
+
+			edge.draw(this.context);
+
+		}
+
+		this.context.restore();
+	}
+
+	screenToWorld(x, y) {
+		return {
+			x: (x - this.panX) / this.zoom,
+			y: (y - this.panY) / this.zoom,
+		};
+	}
+
+	worldToScreen(x, y) {
+		return {
+			x: x * this.zoom + this.panX,
+			y: y * this.zoom + this.panY,
+		};
+	}
+
+	getNodeAtPoint(x, y) {
+
+		const pt = this.screenToWorld(x, y);
+
+		for (let i = this.nodes.length - 1; i >= 0; i--) {
+			if ( this.nodes[i].containsPoint(pt.x, pt.y) ) {
+				return this.nodes[i];
+			}
+		}
+
+		return null;
+
+	}
+
+	getWireAtPoint(x, y) {
+
+		const pt = this.screenToWorld(x, y);
+
+		for (let i = this.edges.length - 1; i >= 0; i--) {
+			if (this.edges[i].pointNear(pt, 10 / this.zoom)) {
+				return this.edges[i];
+			}
+		}
+
+		return null;
+
+	}
+
+	drawGrid( context ) {
+
+		const gridSpacing = 50;
+
+		const panWorldX = -this.panX / this.zoom;
+		const panWorldY = -this.panY / this.zoom;
+
+		const widthWorld  = this.context.canvas.width / this.zoom;
+		const heightWorld = this.context.canvas.height / this.zoom;
+
+		const startX = Math.floor(panWorldX / gridSpacing) * gridSpacing;
+		const endX   = panWorldX + widthWorld;
+
+		const startY = Math.floor(panWorldY / gridSpacing) * gridSpacing;
+		const endY   = panWorldY + heightWorld;
+
+		this.context.strokeStyle = "#282727";
+		this.context.lineWidth = 1 / this.zoom;
+
+		this.context.beginPath();
+
+		// Draw vertical lines within viewport
+		for (let x = startX; x <= endX; x += gridSpacing) {
+			this.context.moveTo(x, panWorldY);
+			this.context.lineTo(x, panWorldY + heightWorld);
+		}
+
+		// Draw horizontal lines within viewport
+		for (let y = startY; y <= endY; y += gridSpacing) {
+			this.context.moveTo(panWorldX, y);
+			this.context.lineTo(panWorldX + widthWorld, y);
+		}
+
+		this.context.stroke();
+	}
+
+	getMousePos( e ) {
+
+		const rect = this.canvas.getBoundingClientRect();
+
+		return {
+			x: (e.clientX - rect.left),
+			y: (e.clientY - rect.top),
+		};
+
+	}
+
+
+	setup( canvas ) {
+
+		this.canvas 	= canvas;
+
+		this.context	= canvas.getContext("2d");
+
+		this.canvas.addEventListener("mousedown", this.onMouseDown.bind( this ) );
+
+		this.canvas.addEventListener("mousemove", this.onMouseMove.bind( this ) );
+
+		this.canvas.addEventListener("mouseup", this.onMouseUp.bind( this ) );
+
+		this.canvas.addEventListener("contextmenu", this.onContextMenu.bind( this ) );
+
+		window.addEventListener("resize", this.onResize.bind( this ) );
+
+		document.addEventListener("click", this.onClick.bind( this ) );
+
+		document.getElementById("deleteNodeBtn").addEventListener("click", this.deleteNodeClick.bind(this) );
+
+		document.getElementById("deleteWireBtn").addEventListener("click", this.deleteWireButton.bind( this ) );
+
+		canvas.addEventListener("wheel", this.onWheel.bind( this ) );
+
+	}
+	async wait( milliseconds ) {
+
+		return new Promise(function( resolve ) {
+
+			setTimeout( resolve, milliseconds );
+
+		});
+
+	}
+
+	async onResize( windowWidth, windowHeight ) {
+
+		const devicePixelRatio = window.devicePixelRatio || 1;
+
+		this.width  				= windowWidth;
+		this.height 				= windowHeight;
+
+		this.canvas.width  			= this.width * devicePixelRatio;
+		this.canvas.height 			= this.height * devicePixelRatio;
+
+		this.canvas.style.width  	= this.width + "px";
+		this.canvas.style.height 	= this.height + "px";
+
+		this.context.setTransform( 1, 0, 0, 1, 0, 0 );
+		this.context.scale( devicePixelRatio, devicePixelRatio );
+
+		//await this.wait(100)
+
+		this.draw( false );
+
+	}
+
+	onMouseDown( e ) {
+
+		const pos 		= this.getMousePos(e);
+
+		const worldPos 	= this.screenToWorld( pos.x, pos.y );
+
+		if (e.button === 0) {
+
+			const node = this.getNodeAtPoint( pos.x, pos.y );
+
+			if (node) {
+				// Check if clicked on output port to start wire drag
+				for (let i = 0; i < node.outputs.length; i++) {
+
+					const outputPos = node.getOutputPos(i);
+
+					const dist = Math.hypot(worldPos.x - outputPos.x, worldPos.y - outputPos.y);
+
+					if (dist < 10) {  // 10 is port radius threshold
+						this.dragWire = new Edge(node, i, null, null, worldPos);
+						this.edges.push(this.dragWire);
+						this.requestDraw();
+						return; // Early return to prevent node dragging start
+					}
+				}
+
+				// Otherwise start dragging node
+				this.dragNode = node;
+				this.dragOffsetX = worldPos.x - node.x;
+				this.dragOffsetY = worldPos.y - node.y;
+
+				this.velocityX = 0;
+				this.velocityY = 0;
+
+			} else {
+				// Start panning canvas if clicked empty background
+				this.isPanning = true;
+				this.panStartMouse = { x: pos.x, y: pos.y };
+				this.panStartOffsetX = this.panX;
+				this.panStartOffsetY = this.panY;
+
+				this.velocityX = 0;
+				this.velocityY = 0;
+			}
+		}
+
+		this.lastMousePos = pos;
+
+		this.requestDraw();
+	}
+
+	onMouseMove( e ) {
+
+		console.log("test");
+
+		const pos 		= this.getMousePos(e);
+		const worldPos 	= this.screenToWorld(pos.x, pos.y);
+
+		if (this.dragWire) {
+			// Update wire temporary end point in world coordinates
+
+			this.dragWire.toPos = worldPos;
+
+			this.requestDraw();
+
+		} else if (this.dragNode) {
+
+			const prevX = this.dragNode.x;
+			const prevY = this.dragNode.y;
+
+			this.dragNode.x = worldPos.x - this.dragOffsetX;
+			this.dragNode.y = worldPos.y - this.dragOffsetY;
+
+			this.velocityX = (this.dragNode.x - prevX) / (e.movementX || 1);
+			this.velocityY = (this.dragNode.y - prevY) / (e.movementY || 1);
+
+			this.requestDraw();
+
+		} else if (this.isPanning) {
+			const dx = pos.x - this.panStartMouse.x;
+			const dy = pos.y - this.panStartMouse.y;
+
+			const prevPanX = this.panX;
+			const prevPanY = this.panY;
+
+			this.panX = this.panStartOffsetX + dx;
+			this.panY = this.panStartOffsetY + dy;
+
+			this.velocityX = this.panX - prevPanX;
+			this.velocityY = this.panY - prevPanY;
+
+			this.requestDraw();
+		}
+
+		this.lastMousePos = pos;
+
+	}
+
+	onMouseUp( e ) {
+
+		if ( e.button === 0) {
+
+			if ( this.dragWire ) {
+
+				const pos 		= this.getMousePos( e );
+
+				const worldPos 	= this.screenToWorld( pos.x, pos.y );
+
+				// Try to attach to input port of a node
+				let connected = false;
+
+				for (const node of this.nodes) {
+
+					for (let i = 0; i < node.inputs.length; i++) {
+
+						const inputPos = node.getInputPos( i );
+
+						const dist = Math.hypot( worldPos.x - inputPos.x, worldPos.y - inputPos.y );
+
+						if (dist < 10) {
+							// Attach wire end to this input port
+							this.dragWire.toNode = node;
+							this.dragWire.toIndex = i;
+							this.dragWire.toPos = null;
+							connected = true;
+							break;
+						}
+					}
+					if (connected) break;
+				}
+
+				if (!connected) {
+					// Remove the wire if not connected
+					const idx = this.edges.indexOf(this.dragWire);
+					if (idx >= 0) this.edges.splice(idx, 1);
+				}
+
+				this.dragWire = null;
+
+				this.requestDraw();
+
+			} else if (this.dragNode) {
+				this.dragNode = null;
+			} else if (this.isPanning) {
+				this.isPanning = false;
+			}
+
+		}
+
+	}
+
+	onContextMenu(e) {
+
+		const wireMenu = document.getElementById("wireMenu");
+		const nodeMenu = document.getElementById("nodeMenu");
+
+		e.preventDefault();
+
+		const pos = this.getMousePos( e );
+		const worldPos = this.screenToWorld( pos.x, pos.y );
+
+		// Hide both menus by default
+		wireMenu.style.display = "none";
+		nodeMenu.style.display = "none";
+
+		const node = this.getNodeAtPoint( pos.x, pos.y );
+
+		if (node) {
+			// Show node context menu
+			nodeMenu.style.left = e.clientX + "px";
+			nodeMenu.style.top = e.clientY + "px";
+			nodeMenu.style.display = "block";
+
+			// Store clicked node reference for later use (e.g., deletion)
+			nodeMenu.currentNode = node;
+
+		} else {
+			const wire = this.getWireAtPoint( pos.x, pos.y );
+
+			if (wire) {
+				// Show wire context menu
+				wireMenu.style.left = e.clientX + "px";
+				wireMenu.style.top = e.clientY + "px";
+				wireMenu.style.display = "block";
+
+				// Store clicked wire reference for later use
+				wireMenu.currentWire = wire;
+			}
+		}
+	}
+
+	onClick( e ) {
+
+		const wireMenu = document.getElementById("wireMenu");
+		const nodeMenu = document.getElementById("nodeMenu");
+
+		// Hide context menus on any click outside them
+		if (e.target !== nodeMenu && !nodeMenu.contains(e.target)) {
+			nodeMenu.style.display = "none";
+			nodeMenu.currentNode = null;
+		}
+		if (e.target !== wireMenu && !wireMenu.contains(e.target)) {
+			wireMenu.style.display = "none";
+			wireMenu.currentWire = null;
+		}
+	}
+
+	deleteNodeClick() {
+
+		const wireMenu = document.getElementById("wireMenu");
+		const nodeMenu = document.getElementById("nodeMenu");
+
+
+		if (nodeMenu.currentNode) {
+			const index = this.nodes.indexOf(nodeMenu.currentNode);
+			if (index !== -1) {
+				// Remove edges connected to this node
+				for (let i = this.edges.length - 1; i >= 0; i--) {
+					if (this.edges[i].fromNode === nodeMenu.currentNode || this.edges[i].toNode === nodeMenu.currentNode) {
+						this.edges.splice(i, 1);
+					}
+				}
+
+				this.nodes.splice(index, 1);
+			}
+
+			nodeMenu.style.display = "none";
+
+			nodeMenu.currentNode = null;
+
+			this.requestDraw();
+		}
+	}
+
+	deleteWireButton() {
+
+		const wireMenu = document.getElementById("wireMenu");
+
+		if (wireMenu.currentWire) {
+			const index = this.edges.indexOf(wireMenu.currentWire);
+			if (index !== -1) {
+				this.edges.splice(index, 1);
+			}
+
+			wireMenu.style.display = "none";
+			wireMenu.currentWire = null;
+			
+			this.requestDraw();
+		}
+
+	}
+
+	onWheel( event ) {
+
+		event.preventDefault();
+
+		const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9;
+
+		this.zoomAtCenter( zoomFactor, this.canvas.width, this.canvas.height);
+
+		this.requestDraw();
+
+	}
+
+	zoomAtCenter( zoomDelta, canvasWidth, canvasHeight ) {
+
+		const oldZoom 	= this.zoom;
+
+		const centerX 	= canvasWidth / 2;
+
+		const centerY 	= canvasHeight / 2;
+
+		// Clamp new this.zoom
+		this.zoom = Math.min(this.maxZoom, Math.max(this.minZoom, this.zoom * zoomDelta));
+		
+		// Adjust pan so this.zoom happens at canvas center (keep world pos under center fixed)
+		this.panX = centerX - (centerX - this.panX) * (this.zoom / oldZoom);
+		this.panY = centerY - (centerY - this.panY) * (this.zoom / oldZoom);
+
+	}
+
+	inertiaLoop() {
+		if (!this.isPanning && !this.dragNode) {
+			// Apply this.friction
+			this.velocityX *= this.friction;
+			this.velocityY *= this.friction;
+
+			this.panX += this.velocityX;
+			this.panY += this.velocityY;
+
+			if (Math.abs(this.velocityX) > this.velocityThreshold || Math.abs(this.velocityY) > this.velocityThreshold) {
+				this.draw();
+				requestAnimationFrame(this.inertiaLoop.bind(this));
+			}
+		}
+		else {
+			requestAnimationFrame(this.inertiaLoop.bind(this));
+		}
+
+	}
+
+	addNode( node ) {
+
+		this.nodes.push( node );
+
+	}
+
+	addEdge( edge ) {
+
+		this.edges.push( edge );
+
+	}
+
+}