javascript
/
tentone.escher.js
mirror of https://github.com/tentone/escher.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Equation Editor</title>
</head>
<body style="font-size:30px; font-family: Arial;">
	<!-- Page -->
	<div style="position:absolute; width:100%; height:100%; top:0px; left:0px; overflow: hidden;">
		<!-- Canvas -->
		<canvas id="canvas" style="position:absolute; width:100%; height:100%; top:0px; left:0px;"></canvas>

		<!-- Buttons -->
		<div style="position:absolute; width:60px; height:50px; top:0px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('+');">+</div>
		<div style="position:absolute; width:60px; height:50px; top:50px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('-');">-</div>
		<div style="position:absolute; width:60px; height:50px; top:100px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('*');">x</div>
		<div style="position:absolute; width:60px; height:50px; top:150px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('/');">/</div>
		<div style="position:absolute; width:60px; height:50px; top:200px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addInputBlock();">Num</div>
	</div>

	<!-- Code -->
	<script type="text/javascript" src="../build/escher.js"></script>
	<script type="text/javascript">
		// Canvas
		var canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		// Prevent context menu events
		document.body.oncontextmenu = function(event)
		{
			event.preventDefault();
			return false;
		};

		// Resize canvas on window resize
		window.onresize = function()
		{
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		};

		window.addOperatorBlock = function(symbol)
		{
			graph.addNode(new OperationNode(symbol));
		};


		window.addInputBlock = function(symbol)
		{
			graph.addNode(new NumberInputNode());
		};

		class OperationNode extends Escher.Node
		{
			constructor(operation)
			{
				super();

				this.operation = operation;

				this.text = new Escher.Text();
				this.text.text = operation;
				this.text.font = "35px Arial";
				this.text.layer = 2;

				this.add(this.text);
			}

			registerSockets()
			{
				this.addInput("number", "a");
				this.addInput("number", "b");
				this.addOutput("number", "r");
			}
		}

		class NumberInputNode extends Escher.Node
		{
			constructor()
			{
				super();

				this.div = new Escher.DOM(canvas.parentElement, "input");
				this.div.size.set(70, 20);
				this.div.origin.set(35, 10);
				this.div.element.style.pointerEvents = "auto";
				this.div.element.type = "number";
				this.div.element.style.fontFamily = "Arial";
				this.div.element.style.textAlign = "center";
				this.add(this.div);
			}

			registerSockets()
			{
				this.addOutput("number", "v");
			}
		}

		// Group to store other objects
		var graph = new Escher.NodeGraph();

		var a = graph.addNode(new Escher.Node());
		a.addInput("test", "a");
		var aa = a.addOutput("test", "a");

		var b = graph.addNode(new Escher.Node());
		var bb = b.addInput("test", "a");
		b.addInput("test", "b");
		b.addInput("test", "c");
		b.addOutput("test", "a");
		bb.connectTo(aa);

		// Viewport
		var viewport = new Escher.Viewport(canvas);

		// Renderer
		var renderer = new Escher.Renderer(canvas);
		renderer.createRenderLoop(graph, viewport);
	</script>
</body>
</html>