DOM

source/Renderer.js

@@ -193,7 +193,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();
 	}
 };

source/Trenette.js

@@ -18,3 +18,4 @@ export {Circle} from "./objects/Circle.js";
 export {Line} from "./objects/Line.js";
 export {Text} from "./objects/Text.js";
 export {Image} from "./objects/Image.js";
+export {DOM} from "./objects/DOM.js";

source/objects/Box.js

@@ -36,7 +36,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;
 

source/objects/DOM.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import {Object2D} from "../Object2D.js";
+import {Vector2} from "../math/Vector2.js";
+
+/**
+ * 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);
+
+	this.element = document.createElement("div");
+	this.element.style.position = "absolute";
+	this.element.style.width = "100px";
+	this.element.style.height = "100px";
+	this.element.style.backgroundColor = "#FF0000";
+	this.element.style.transformStyle = "preserve-3d";
+	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 {DOM};