Explorar o código

Experimenting

tentone %!s(int64=6) %!d(string=hai) anos
pai
achega
541ebb0432
Modificáronse 6 ficheiros con 109 adicións e 11 borrados
  1. 48 3
      build/trenette.js
  2. 0 0
      build/trenette.min.js
  3. 48 4
      build/trenette.module.js
  4. 6 2
      examples/diagram.html
  5. 0 1
      source/math/Matrix.js
  6. 7 1
      source/objects/DOM.js

+ 48 - 3
build/trenette.js

@@ -1445,7 +1445,7 @@
 			{
 				var matrix = viewport.inverseMatrix.clone();
 				matrix.multiply(child.inverseGlobalMatrix);
-				matrix.setPosition(0, 0);
+				//matrix.setPosition(0, 0);
 
 				var delta = matrix.transformPoint(pointer.delta);
 				child.position.add(delta);
@@ -1486,7 +1486,7 @@
 		{
 			context.save();
 			objects[i].globalMatrix.tranformContext(context);
-			objects[i].draw(context);
+			objects[i].draw(context, viewport);
 			context.restore();
 		}
 	};
@@ -1836,7 +1836,12 @@
 
 	Box.prototype = Object.create(Object2D.prototype);
 
-	Box.prototype.createResizeHelpers = function(first_argument)
+	/**
+	 * Create some resize helper to change the size of the box.
+	 *
+	 * Each helper is positioned on one corner of the box.
+	 */
+	Box.prototype.createResizeHelpers = function()
 	{
 		var self = this;
 
@@ -2004,9 +2009,49 @@
 		context.drawImage(this.image, 0, 0);
 	};
 
+	/**
+	 * A DOM object transformed using CSS3D to ver included in the graph.
+	 *
+	 * DOM objects always stay on top of everything else, mouse events are not supported for these.
+	 *
+	 * Use the normal DOM events for interaction.
+	 *
+	 * @param parent Parent DOM element that contains the drawing canvas.
+	 * @param type Type of the DOM element (e.g. "div", "p", ...)
+	 */
+	function DOM(parent, type)
+	{
+		Object2D.call(this);
+
+		/**
+		 * DOM element contained by this object.
+		 */
+		this.element = document.createElement("div");
+		this.element.style.position = "absolute";
+		this.element.style.top = "0px";
+		this.element.style.bottom = "0px";
+		this.element.style.width = "100px";
+		this.element.style.transformStyle = "preserve-3d";
+		this.element.style.height = "100px";
+		this.element.style.backgroundColor = "#FF0000";
+		this.element.style.transformOrigin = "0px 0px";
+		parent.appendChild(this.element);
+	}
+
+	DOM.prototype = Object.create(Object2D.prototype);
+
+	DOM.prototype.draw = function(context, viewport)
+	{
+		var projection = viewport.matrix.clone();
+		projection.multiply(this.globalMatrix);
+
+		this.element.style.transform = projection.cssTransform();
+	};
+
 	exports.Box = Box;
 	exports.Box2 = Box2;
 	exports.Circle = Circle;
+	exports.DOM = DOM;
 	exports.EventManager = EventManager;
 	exports.Image = Image;
 	exports.Key = Key;

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 0 - 0
build/trenette.min.js


+ 48 - 4
build/trenette.module.js

@@ -1439,7 +1439,7 @@ Renderer.prototype.update = function(object, viewport)
 		{
 			var matrix = viewport.inverseMatrix.clone();
 			matrix.multiply(child.inverseGlobalMatrix);
-			matrix.setPosition(0, 0);
+			//matrix.setPosition(0, 0);
 
 			var delta = matrix.transformPoint(pointer.delta);
 			child.position.add(delta);
@@ -1480,7 +1480,7 @@ Renderer.prototype.update = function(object, viewport)
 	{
 		context.save();
 		objects[i].globalMatrix.tranformContext(context);
-		objects[i].draw(context);
+		objects[i].draw(context, viewport);
 		context.restore();
 	}
 };
@@ -1830,7 +1830,12 @@ function Box(resizable)
 
 Box.prototype = Object.create(Object2D.prototype);
 
-Box.prototype.createResizeHelpers = function(first_argument)
+/**
+ * Create some resize helper to change the size of the box.
+ *
+ * Each helper is positioned on one corner of the box.
+ */
+Box.prototype.createResizeHelpers = function()
 {
 	var self = this;
 
@@ -1998,4 +2003,43 @@ Image.prototype.draw = function(context)
 	context.drawImage(this.image, 0, 0);
 };
 
-export { Box, Box2, Circle, EventManager, Image, Key, Line, Matrix, Object2D, Pointer, Renderer, Text, UUID, Vector2, Viewport };
+/**
+ * A DOM object transformed using CSS3D to ver included in the graph.
+ *
+ * DOM objects always stay on top of everything else, mouse events are not supported for these.
+ *
+ * Use the normal DOM events for interaction.
+ *
+ * @param parent Parent DOM element that contains the drawing canvas.
+ * @param type Type of the DOM element (e.g. "div", "p", ...)
+ */
+function DOM(parent, type)
+{
+	Object2D.call(this);
+
+	/**
+	 * DOM element contained by this object.
+	 */
+	this.element = document.createElement("div");
+	this.element.style.position = "absolute";
+	this.element.style.top = "0px";
+	this.element.style.bottom = "0px";
+	this.element.style.width = "100px";
+	this.element.style.transformStyle = "preserve-3d";
+	this.element.style.height = "100px";
+	this.element.style.backgroundColor = "#FF0000";
+	this.element.style.transformOrigin = "0px 0px";
+	parent.appendChild(this.element);
+}
+
+DOM.prototype = Object.create(Object2D.prototype);
+
+DOM.prototype.draw = function(context, viewport)
+{
+	var projection = viewport.matrix.clone();
+	projection.multiply(this.globalMatrix);
+
+	this.element.style.transform = projection.cssTransform();
+};
+
+export { Box, Box2, Circle, DOM, EventManager, Image, Key, Line, Matrix, Object2D, Pointer, Renderer, Text, UUID, Vector2, Viewport };

+ 6 - 2
examples/diagram.html

@@ -55,9 +55,13 @@
 
 		var div = document.createElement("div");
 		div.style.position = "absolute";
+		div.style.top = "0px";
+		div.style.bottom = "0px";
 		div.style.width = "100px";
+		div.style.transformStyle = "preserve-3d";
 		div.style.height = "100px";
 		div.style.backgroundColor = "#FF0000";
+		div.style.transformOrigin = "0px 0px";
 		division.appendChild(div);
 
 		// Create the diagram
@@ -117,15 +121,15 @@
 		function loop()
 		{	
 			//group.rotation += 0.001;
+			boxA.rotation += 0.01;
 			image.rotation += 0.01;
 
 			renderer.update(group, viewport);
 
 			var projection = viewport.matrix.clone();
 			projection.multiply(boxA.globalMatrix);
-
 			div.style.transform = projection.cssTransform();
-			div.style.transformStyle = "preserve-3d";
+			//
 			
 			requestAnimationFrame(loop);
 		}

+ 0 - 1
source/math/Matrix.js

@@ -215,5 +215,4 @@ Matrix.prototype.cssTransform = function()
 	return "matrix(" + this.m[0] + "," + this.m[1] + "," + this.m[2] + "," + this.m[3] + "," + this.m[4] + "," + this.m[5] + ")";
 };
 
-
 export {Matrix};

+ 7 - 1
source/objects/DOM.js

@@ -17,12 +17,18 @@ function DOM(parent, type)
 {
 	Object2D.call(this);
 
+	/**
+	 * DOM element contained by this object.
+	 */
 	this.element = document.createElement("div");
 	this.element.style.position = "absolute";
+	this.element.style.top = "0px";
+	this.element.style.bottom = "0px";
 	this.element.style.width = "100px";
+	this.element.style.transformStyle = "preserve-3d";
 	this.element.style.height = "100px";
 	this.element.style.backgroundColor = "#FF0000";
-	this.element.style.transformStyle = "preserve-3d";
+	this.element.style.transformOrigin = "0px 0px";
 	parent.appendChild(this.element);
 }
 

Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio