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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!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 style="position:absolute; width:60px; height:50px; bottom:50px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.loadFile();">Load</div>
		<div style="position:absolute; width:60px; height:50px; bottom:0px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.saveFile();">Save</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());
		};

		window.loadFile = function()
		{
			Escher.FileUtils.select(function(files)
			{
				if(files.length > 0)
				{
					var reader = new FileReader();
					reader.onload = function()
					{
						var text = reader.result;
						var data = JSON.parse(text);
						graph = Escher.Object2D.parse(data);
					};
					reader.readAsText(files[0]);
				}
			}, ".json");
		};

		window.saveFile = function()
		{
			var data = graph.serialize(true);
			var text = JSON.stringify(data, null, "\t");
			Escher.FileUtils.write("object.json", text);
		};

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

				this.type = "OperationNode";

				this.operation = operation;

				this.box.set(new Escher.Vector2(-50, -40), new Escher.Vector2(50, 40));

				this.text = new Escher.Text();
				this.text.serializable = false;
				this.text.text = operation;
				this.text.font = "25px Arial";
				this.text.layer = 2;
				this.add(this.text);
			}

			registerSockets()
			{
				this.a = this.addInput("string", "a");
				this.b = this.addInput("string", "b");

				this.r = this.addOutput("string", "r");
				this.r.getValue = () =>
				{
					return "(" + this.a.getValue() + this.operation + this.b.getValue() + ")";
				};
			}

			serialize(recursive)
			{
				var data = super.serialize(recursive);
				data.operation = this.operation;
				return data;
			}

			parse(data, root)
			{
				super.parse(data, root);
				this.operation = data.operation;
				this.text.text = data.operation;
			}
		}


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

				this.type = "NumberInputNode";

				this.box.set(new Escher.Vector2(-50, -30), new Escher.Vector2(50, 30));

				this.div = new Escher.DOM("input");
				this.div.serializable = false;
				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.div.element.style.border = "1px";
				this.div.element.style.borderStyle = "solid";
				this.div.element.style.borderColor = "#000000";
				this.div.element.style.padding = "0px";
				this.add(this.div);
			}

			registerSockets()
			{
				this.out = this.addOutput("string", "v");
				this.out.getValue = () =>
				{
					return this.div.element.value;
				};
			}

			serialize(recursive)
			{
				var data = super.serialize(recursive);
				data.value = this.div.element.value;
				return data;
			}

			parse(data, root)
			{
				super.parse(data, root);
				this.div.element.value = data.value;
			}
		}

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

				this.type = "ResultNode";

				this.box.set(new Escher.Vector2(-100, -20), new Escher.Vector2(100, 20));

				this.text = new Escher.Text();
				this.text.serializable = false;
				this.text.text = "";
				this.text.font = "12px Arial";
				this.text.layer = 2;
				this.add(this.text);
			}

			registerSockets()
			{
				this.r = this.addInput("string", "r");
			}

			onUpdate()
			{
				super.onUpdate();

				try
				{
					var value = this.r.getValue();
					this.text.text = value + " = " + eval(value);
				}
				catch(e)
				{
					this.text.text = "NaN";
				}
			}
		}

		Escher.Object2D.register(OperationNode, "OperationNode");
		Escher.Object2D.register(NumberInputNode, "NumberInputNode");
		Escher.Object2D.register(ResultNode, "ResultNode");

		var graph = new Escher.NodeGraph();

		var result = new ResultNode();
		graph.addNode(result);

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

		// Renderer
		var renderer = new Escher.Renderer(canvas);

		// Render loop
		var controls = new Escher.ViewportControls(viewport);
		function loop()
		{
			controls.update(renderer.pointer);
			renderer.update(graph, viewport);
			requestAnimationFrame(loop);
		}
		loop();

	</script>
</body>
</html>