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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Diagram</title>
</head>
<body>
	<script type="text/javascript" src="../build/escher.js"></script>
	<script type="text/javascript" src="./lib/pdf.js"></script>
	<script type="text/javascript">

		// Division
		var division = document.createElement("div");
		division.style.position = "absolute";
		division.style.width = "100%";
		division.style.height = "100%";
		division.style.top = "0px";
		division.style.left = "0px";
		division.style.overflow = "hidden";
		document.body.appendChild(division);

		// Canvas
		var canvas = document.createElement("canvas");
		canvas.style.position = "absolute";
		canvas.style.width = "100%";
		canvas.style.height = "100%";
		canvas.style.top = "0px";
		canvas.style.left = "0px";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		division.appendChild(canvas);

		// 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;
		};

		// Box index
		var boxIndex = 0;

		// Create boxes on double click
		canvas.ondblclick = function(event)
		{
			var p = new Escher.Vector2(event.clientX, event.clientY);
			p = viewport.inverseMatrix.transformPoint(p);

			var box = new Escher.Box();
			box.position.copy(p);
			box.draggable = true;
			boxes.add(box);

			var text = new Escher.Text();
			text.text = "Box " + boxIndex++;
			box.add(text);

			if(boxes.children.length > 1)
			{
				var line = new Escher.Line();
				line.layer = -1;
				line.from = boxes.children[boxes.children.length - 1].position;
				line.to = boxes.children[boxes.children.length - 2].position;
				group.add(line);
			}
		};

		/*
		window.onkeydown = function(event)
		{
			if(selected !== null && event.keyCode === 46)
			{
				selected.parent.remove(selected);
			}
		};

		var selected = null;
		var selectObject = function(object)
		{
			this.strokeStyle = "#0000FF";
			selected = this;
		};
		*/


		// Group to store other objects
		var group = new Escher.Object2D();
			
		// Customized box object
		var object = new Escher.Box();
		object.draggable = true;
		object.layer = 2;
		object.draw = function(context, viewport, canvas)
		{
			// Create gradient
			var gradient = context.createLinearGradient(this.box.min.x, 0, this.box.max.x, 0);
			gradient.addColorStop(0, "#FF0000");
			gradient.addColorStop(0.5, "#00FF00");
			gradient.addColorStop(1, "#0000FF");

			// Box property has the min and max points of the object.
			var size = this.box.getSize();

			// Fill with gradient
			context.fillStyle = gradient;
			context.fillRect(this.box.min.x, this.box.min.y, size.x , size.y);
		};
		group.add(object);

		Escher.Helpers.boxResizeTool(object);

		// Pattern image object
		var image = new Escher.Pattern("images/grid.png");
		image.position.set(-300, -400);
		image.layer = 5;
		image.draggable = true;
		group.add(image);

		var gauge = new Escher.Gauge();
		gauge.position.set(500, 700);
		gauge.layer = 5;
		gauge.draggable = true;
		group.add(gauge);

		var graph = new Escher.Graph();
		graph.box.min.set(-500, -50);
		graph.box.max.set(500, 50);
		graph.position.set(-300, -400);
		graph.layer = 5;
		graph.draggable = true;
		group.add(graph);

		Escher.Helpers.boxResizeTool(graph);
		for(var i = 0; i < 300; i++)
		{
			graph.data.push(Math.random() * 9 + 1);
		}

		function cycleGraph()
		{
			graph.data.push(graph.data.shift());
			
			requestAnimationFrame(cycleGraph);
		}
		cycleGraph();


		// Image object
		var background = new Escher.Image("images/hexagon.jpg");
		background.position.set(-300, -400);
		background.layer = -2;
		background.draggable = true;
		group.add(background);

		// Box
		var boxA = new Escher.Box();
		boxA.draggable = true;
		boxA.position.set(-50, -100);
		group.add(boxA);
		Escher.Helpers.boxResizeTool(boxA);

		// DOM
		var div = new Escher.DOM();
		div.size.set(100, 50);
		div.origin.set(50, 25);
		boxA.add(div);

		var text = document.createElement("div");
		text.style.fontFamily = "Arial";
		text.style.textAlign = "center";
		text.innerHTML = "DOM text!";
		div.element.appendChild(text);

		// DOM Fixed
		var div = new Escher.DOM();
		div.size.set(100, 50);
		div.origin.set(50, 25);
		div.position.set(200, 200);
		boxA.add(div);

		var text = document.createElement("div");
		text.style.fontFamily = "Arial";
		text.style.textAlign = "center";
		text.innerHTML = "DOM Derp!";
		div.element.appendChild(text);

		group.add(div);

		// Box
		var boxB = new Escher.Box();
		boxB.position.set(100, 100);
		boxB.draggable = true;
		group.add(boxB);
		
		// DOM
		var div = new Escher.DOM();
		div.size.set(100, 50);
		div.origin.set(50, 25);
		boxB.add(div);

		var text = document.createElement("div");
		text.style.fontFamily = "Arial";
		text.style.textAlign = "center";
		text.innerHTML = "Double click to add box!";
		div.element.appendChild(text);

		// Circle
		var circle = new Escher.Circle();
		circle.radius = 60;
		circle.position.set(300, 0);
		circle.draggable = true;
		circle.onDoubleClick = function()
		{
			viewport.centerObject(circle, canvas);
		}
		group.add(circle);

		var text = new Escher.Text();
		text.text = "Canvas Text";
		circle.add(text);

		var text = new Escher.Text();
		text.text = "Double-click to center!";
		text.font = "30px Comic Sans MS";
		text.position.set(0, -75);
		text.strokeStyle = new Escher.ColorStyle("#000000");
		text.fillStyle = new Escher.ColorStyle("#FFFFFF");
		circle.add(text);

		// Line (connection)
		var line = new Escher.Line();
		line.from = boxA.position;
		line.to = boxB.position;
		line.layer = -1;
		line.dashPattern = [];
		group.add(line);

		// Line (connection)
		var line = new Escher.Line();
		line.from = boxA.position;
		line.to = circle.position;
		line.layer = -1;
		line.dashPattern = [];
		line.lineWidth = 2;
		group.add(line);

		// Line (connection)
		var line = new Escher.BezierCurve();
		line.from = boxB.position;
		line.to = circle.position;
		line.layer = -1;
		group.add(line);
		Escher.BezierCurve.curveHelper(line);

		// Line (connection)
		var line = new Escher.QuadraticCurve();
		line.from = boxA.position;
		line.to.set(-100, -300);
		line.controlPoint.set(-100, -200);
		line.layer = -1;
		group.add(line);
		Escher.QuadraticCurve.curveHelper(line);

		var multiline = new Escher.MultiLineText();
		multiline.position.set(-500, -400);
		multiline.text = "This is a multiline text!\n\nvar line = new Escher.QuadraticCurve();\n" +
		"\t\tline.from = boxA.position;\n" +
		"\t\tline.to.set(-100, -300);\n" +
		"\t\tline.controlPoint.set(-100, -200);\n" +
		"\t\tline.layer = -1;\n" +
		"\t\tgroup.add(line);\n" +
		"\t\tEscher.QuadraticCurve.curveHelper(line);";
		multiline.fillStyle = new Escher.LinearGradientStyle();
		multiline.fillStyle.start.set(-500, 0);
		multiline.fillStyle.end.set(-300, 0);
		multiline.fillStyle.addColorStop(0, "#e5ff50");
		multiline.fillStyle.addColorStop(0.5, "#50ff67");
		multiline.fillStyle.addColorStop(1, "#32adff");
		group.add(multiline);

		// Boxes group
		var boxes = new Escher.Object2D();
		group.add(boxes);

		// Viewport
		var viewport = new Escher.Viewport(canvas);
		viewport.center.set(500, 500);

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