A Visual Layout Designer in JavaScript

The JavaScript code below implements a simple visual layout designer. To see it in action, copy it into an .html file and open that file in a web browser that runs JavaScript.  Or, for an online version, visit http://thiscouldbebetter.neocities.org/layout.html.

The program is simplistic, ugly, and buggy at the moment, but it does allow you to save, load, and create layouts containing a mix of red, green, and blue elements of pre-set sizes, and cyan elements of variable size. The interface also contains checkboxes to allow the user to snap elements to a grid and prevent or allow overlapping elements.

To add an element to the layout, select the desired item in the Add Element select box to create a new instance of that element type, then move the mouse to the desired location and click again to drop the element. If the element has a variable size, it will also be necessary to set the position of the opposite corner and click again.

VisualLayoutDesigner

<html>
<body>
<script type='text/javascript'>

// main

function main()
{
	var colors = Color.Instances;

	var elementDefns = 
	[
		new LayoutElementDefn("Square", colors.Red, new Coords(64, 64)),
		new LayoutElementDefn("Landscape", colors.Green, new Coords(128, 96)),
		new LayoutElementDefn("Portrait", colors.Blue, new Coords(96, 128)),
		new LayoutElementDefn("Variable", colors.Cyan, null),
	];

	var tools = 
	[
		new Tool
		(
			"New",
			function()
			{
				var returnValue = document.createElement("button");

				returnValue.innerHTML = this.name;
				returnValue.style.border = "1px solid";

				returnValue.onclick = function(event)
				{
					var editor = Globals.Instance.layoutEditor;
					editor.layoutNew();
				}

				return returnValue;
			}
		),

		new Tool
		(
			"Save",
			function()
			{
				var returnValue = document.createElement("button");

				returnValue.innerHTML = this.name;
				returnValue.style.border = "1px solid";

				returnValue.onclick = function(event)
				{
					var editor = Globals.Instance.layoutEditor;
					editor.layoutSave();
				}

				return returnValue;
			}
		),

		new Tool
		(
			"Load",
			function()
			{
				var returnValue = document.createElement("div");
				returnValue.style.border = "1px solid";

				var inputFileToLoad = document.createElement("input");
				inputFileToLoad.id = "inputFileToLoad";
				inputFileToLoad.type = "file";
				returnValue.appendChild(inputFileToLoad);

				var buttonLoad = document.createElement("button");
				buttonLoad.innerHTML = "Load";
				buttonLoad.style.border = "1px solid";
				buttonLoad.onclick = function(event)
				{
					var editor = Globals.Instance.layoutEditor;
					editor.layoutLoad();
				}
				returnValue.appendChild(buttonLoad);

				return returnValue;
			}
		),

		new Tool
		(
			"Snap to Grid",
			function()
			{
				var returnValue = document.createElement("div");
				returnValue.style.border = "1px solid";

				var labelSnapToGrid = document.createElement("label");
				labelSnapToGrid.innerHTML = "Snap to Grid";
				returnValue.appendChild(labelSnapToGrid);

				var inputSnapToGrid = document.createElement("input");
				inputSnapToGrid.type = "checkbox";
				inputSnapToGrid.onchange = function(event)
				{
					var editor = Globals.Instance.layoutEditor;
					editor.snapToGrid = event.srcElement.checked;				
				}

				returnValue.appendChild(inputSnapToGrid);

				return returnValue;
			}
		),

		new Tool
		(
			"Allow Overlap",
			function()
			{
				var returnValue = document.createElement("div");
				returnValue.style.border = "1px solid";

				var labelAllowOverlap = document.createElement("label");
				labelAllowOverlap.innerHTML = "Allow Overlap";
				returnValue.appendChild(labelAllowOverlap);

				var inputAllowOverlap = document.createElement("input");
				inputAllowOverlap.type = "checkbox";
				inputAllowOverlap.onchange = function(event)
				{
					var editor = Globals.Instance.layoutEditor;
					editor.allowOverlap = event.srcElement.checked;				
				}

				returnValue.appendChild(inputAllowOverlap);

				return returnValue;
			}
		),

		new Tool
		(
			"Add Element",
			function()
			{
				var returnValue = document.createElement("div");
				returnValue.style.border = "1px solid";

				var labelAddElement = document.createElement("label");
				labelAddElement.innerHTML = "Add Element";
				returnValue.appendChild(labelAddElement);

				var selectElementDefnToAdd = document.createElement("select");

				var optionElementDefnNone = document.createElement("option");
				optionElementDefnNone.innerHTML = "[none]";
				selectElementDefnToAdd.appendChild(optionElementDefnNone)

				for (var i = 0; i < elementDefns.length; i++)
				{
					var elementDefn = elementDefns[i];
					var optionElementDefn = document.createElement("option");
					optionElementDefn.innerHTML = elementDefn.name;
					optionElementDefn.elementDefn = elementDefn;
					selectElementDefnToAdd.appendChild(optionElementDefn);
				}

				selectElementDefnToAdd.onchange = LayoutElementDefn.handleEventSelected;

				returnValue.appendChild(selectElementDefnToAdd);

				return returnValue;
			}
		),

	];

	var toolbox = new Toolbox
	(
		new Coords(480, 120),
		tools,
		elementDefns
	); 

	var layout = new Layout
	(
		"Layout0",
		new Coords(480, 480), 
		// elements
		[
			new LayoutElement("Element0", elementDefns[0].name, new Coords(32, 32), null),
			new LayoutElement("Element1", elementDefns[1].name, new Coords(256, 128), null),
			new LayoutElement("Element2", elementDefns[2].name, new Coords(128, 256), null),
			new LayoutElement("Element3", elementDefns[3].name, new Coords(32, 196), new Coords(68, 207)),

		]
	);

	var layoutEditor = new LayoutEditor
	(
		toolbox,
		layout
	);

	Globals.Instance.initialize(layoutEditor);
}

// classes

function Bounds(min, max)
{
	this.min = min;
	this.max = max;
}
{
	Bounds.prototype.overlapsWithOther = function(other)
	{
		var returnValue = false;

		var bounds = [ this, other ];

		for (var b = 0; b < bounds.length; b++)
		{
			var boundsThis = bounds[b];
			var boundsOther = bounds[1 - b];			

			var doAllDimensionsOverlapSoFar = true;

			for (var d = 0; d < Coords.NumberOfDimensions; d++)
			{
				if 
				(
					boundsThis.max.dimension(d) <= boundsOther.min.dimension(d)
					|| boundsThis.min.dimension(d) >= boundsOther.max.dimension(d)
				)
				{
					doAllDimensionsOverlapSoFar = false;
					break;
				}
			}

			if (doAllDimensionsOverlapSoFar == true)
			{
				returnValue = true;
				break;
			}
		}

		return returnValue;
	}
}

function Color(name, systemColor)
{
	this.name = name;
	this.systemColor = systemColor;
}
{
	function Color_Instances()
	{
		this.Black 	= new Color("Black",	"rgb(0, 0, 0)"		);
		this.Blue 	= new Color("Blue", 	"rgb(0, 0, 255)"	);
		this.Cyan 	= new Color("Cyan", 	"rgb(0, 255, 255)"	);
		this.Gray 	= new Color("Gray", 	"rgb(128, 128, 128)"	);
		this.Green 	= new Color("Green", 	"rgb(0, 255, 0)"	);
		this.Red 	= new Color("Red", 	"rgb(255, 0, 0)"	);
		this.White 	= new Color("White", 	"rgb(255, 255, 255)"	);
	}

	Color.Instances = new Color_Instances();
}

function Coords(x, y)
{
	this.x = x;
	this.y = y;
}
{
	// constants

	Coords.NumberOfDimensions = 2;

	// static methods

	Coords.buildFromObject = function(objectToBuildFrom)
	{
		var returnValue = null;

		if (objectToBuildFrom != null)
		{
			returnValue = new Coords
			(
				objectToBuildFrom.x,
				objectToBuildFrom.y
			);
		}

		return returnValue;
	}

	// instance methods

	Coords.prototype.absolute = function()
	{
		this.x = Math.abs(this.x);
		this.y = Math.abs(this.y);

		return this;
	}

	Coords.prototype.add = function(other)
	{
		this.x += other.x;
		this.y += other.y;

		return this;
	}

	Coords.prototype.addXY = function(x, y)
	{
		this.x += x;
		this.y += y;

		return this;
	}

	Coords.prototype.clone = function()
	{
		return new Coords(this.x, this.y);
	}

	Coords.prototype.dimension = function(dimensionIndex)
	{
		return (dimensionIndex == 0 ? this.x : this.y);
	}

	Coords.prototype.divideScalar = function(scalar)
	{
		this.x /= scalar;
		this.y /= scalar;

		return this;
	}

	Coords.prototype.multiplyScalar = function(scalar)
	{
		this.x *= scalar;
		this.y *= scalar;

		return this;
	}

	Coords.prototype.overwriteWith = function(other)
	{
		this.x = other.x;
		this.y = other.y;

		return this;
	}

	Coords.prototype.round = function()
	{
		this.x = Math.round(this.x);
		this.y = Math.round(this.y);

		return this;
	}

	Coords.prototype.subtract = function(other)
	{
		this.x -= other.x;
		this.y -= other.y;

		return this;
	}
}

function Globals()
{}
{
	Globals.Instance = new Globals();

	Globals.prototype.initialize = function(layoutEditor)
	{
		this.layoutEditor = layoutEditor;
		document.body.appendChild
		(
			this.layoutEditor.htmlElementBuild()
		);
	}
}

function Layout(name, sizeInPixels, elements)
{
	this.name = name;
	this.sizeInPixels = sizeInPixels;
	this.elements = elements;
}
{
	// static methods

	Layout.buildFromObject = function(objectToBuildFrom)
	{
		var returnValue = new Layout
		(
			objectToBuildFrom.name,
			Coords.buildFromObject(objectToBuildFrom.sizeInPixels),
			LayoutElement.buildManyFromObjects(objectToBuildFrom.elements)
		);

		return returnValue;
	}

	// instance methods

	Layout.prototype.clone = function()
	{
		var returnValue = new Layout
		(
			this.name,
			this.sizeInPixels.clone(),
			LayoutElement.cloneMany(this.elements)
		);

		return returnValue;
	}

	// events

	Layout.prototype.handleEventMouseDown = function(event)
	{
		var layoutEditor = Globals.Instance.layoutEditor;

		var elementSelected = layoutEditor.elementSelected;

		if (elementSelected != null)
		{
			var elementSelectedSizeInPixels = elementSelected.sizeInPixels();
			var elementDefnSizeInPixels = elementSelected.defn().sizeInPixels;
			var isElementSizeVariable = (elementDefnSizeInPixels == null);
			var havePositionAndSizeBeenSpecified;

			if (isElementSizeVariable == true)
			{
				if (elementSelected.isPositionRatherThanSizeBeingAdjusted() == true)
				{
					elementSelected._sizeInPixels = elementSelectedSizeInPixels.clone();
				}
				else
				{
					havePositionAndSizeBeenSpecified = true;
				}			
			}
			else
			{
				havePositionAndSizeBeenSpecified = true;
			}

			if (havePositionAndSizeBeenSpecified == true)
			{
				elementSelected.pos.addXY 
				(
					(elementSelectedSizeInPixels.x >= 0 ? 0 : elementSelectedSizeInPixels.x),
					(elementSelectedSizeInPixels.y >= 0 ? 0 : elementSelectedSizeInPixels.y)
				);
				elementSelectedSizeInPixels.absolute();

				layoutEditor.elementSelected = null;

				var toolAddElement = layoutEditor.toolbox.tools["Add Element"];
				var selectElementToAdd = toolAddElement.htmlElement.getElementsByTagName("select")[0];
				selectElementToAdd.selectedIndex = 0;
			}	
		}
	}

	Layout.prototype.handleEventMouseMove = function(event)
	{
		var layoutEditor = Globals.Instance.layoutEditor;

		var elementSelected = layoutEditor.elementSelected;

		if (elementSelected != null)
		{
			var isPositionRatherThanSizeBeingAdjusted = elementSelected.isPositionRatherThanSizeBeingAdjusted();

			var posPrev;
			var posNext;

			if (isPositionRatherThanSizeBeingAdjusted == true)
			{
				posPrev = elementSelected.pos.clone();
				posNext = elementSelected.pos;				
			}
			else
			{
				posPrev = elementSelected.pos.clone().add
				(
					elementSelected.sizeInPixels()
				);
				posNext = posPrev.clone();
			}

			var offset = new Coords(event.offsetX, event.offsetY);

			var sourceElement = event.srcElement;
			var elementForLayout = Globals.Instance.layoutEditor.layout.htmlElement;

			while (sourceElement != elementForLayout)
			{
				offset.addXY
				(
					parseInt(sourceElement.style.left),
					parseInt(sourceElement.style.top)
				);
				sourceElement = sourceElement.parentElement;
			}

			posNext.overwriteWith(offset);

			if (layoutEditor.snapToGrid == true)
			{
				var gridSizeInPixels = layoutEditor.gridSizeInPixels;

				posNext.divideScalar
				(
					gridSizeInPixels
				).round().multiplyScalar
				(
					gridSizeInPixels
				);
			}

			if (isPositionRatherThanSizeBeingAdjusted == false)
			{
				var sizeInPixels = elementSelected._sizeInPixels;

				sizeInPixels.overwriteWith
				(
					posNext
				).subtract
				(
					elementSelected.pos
				);
			}

			var canElementBePlacedHere;

			if (layoutEditor.allowOverlap == true)
			{
				canElementBePlacedHere = true;	
			}
			else
			{
				canElementBePlacedHere = true;

				for (var i = 0; i < this.elements.length; i++)
				{
					var elementOther = this.elements[i];

					if (elementOther != elementSelected)
					{
						var doBoundsOverlap = elementSelected.doBoundsOverlapWithOther
						(
							elementOther
						);

						if (doBoundsOverlap == true)
						{
							canElementBePlacedHere = false;
							break;
						}
					}
				}
			}

			if (canElementBePlacedHere == false)
			{
				posNext.overwriteWith(posPrev);

				if (isPositionRatherThanSizeBeingAdjusted == false)
				{
					elementSelected._sizeInPixels.overwriteWith
					(
						posNext
					).subtract
					(
						elementSelected.pos
					);
				}
			}

			elementSelected.htmlElementUpdate();
		}
	}

	// html

	Layout.prototype.htmlElementBuild = function()
	{
		var returnValue = document.createElement("div");

		var style = returnValue.style;
		style.border = "1px solid";
		style.width = this.sizeInPixels.x;
		style.height = this.sizeInPixels.y;
		style.position = "absolute";

		returnValue.onmousedown = this.handleEventMouseDown.bind(this);
		returnValue.onmousemove = this.handleEventMouseMove.bind(this);

		this.htmlElement = returnValue;

		for (var i = 0; i < this.elements.length; i++)
		{
			var element = this.elements[i];
			this.htmlElement.appendChild(element.htmlElementBuild());
		}

		return returnValue;
	}
}

function LayoutEditor(toolbox, layout)
{	
	this.toolbox = toolbox;
	this.layout = layout;

	this.elementSelected = null;

	this.gridSizeInPixels = 32;
}
{
	LayoutEditor.prototype.layoutLoad = function()
	{
		// todo

		var fileToLoad = document.getElementById("inputFileToLoad").files[0];

		var fileReader = new FileReader();
		fileReader.onload = function(fileLoadedEvent) 
		{
			var textFromFileLoaded = fileLoadedEvent.target.result;
			var layoutLoadedAsObject = JSON.parse(textFromFileLoaded);
			var layoutLoaded = Layout.buildFromObject(layoutLoadedAsObject);
			var editor = Globals.Instance.layoutEditor;
			editor.htmlElement.removeChild(editor.layout.htmlElement);
			editor.layout = layoutLoaded;
			editor.htmlElement.appendChild(editor.layout.htmlElementBuild());
		};
		fileReader.readAsText(fileToLoad, "UTF-8");
	}

	LayoutEditor.prototype.layoutNew = function()
	{
		var editor = Globals.Instance.layoutEditor;

		var layoutNew = new Layout
		(
			"[Untitled]",
			editor.layout.sizeInPixels.clone(),
			// elements
			[]			
		);

		editor.htmlElement.removeChild(editor.layout.htmlElement);
		editor.layout = layoutNew;
		editor.htmlElement.appendChild(editor.layout.htmlElementBuild());
	}

	LayoutEditor.prototype.layoutSave = function()
	{
		var layoutCloned = this.layout.clone();
		var layoutAsStringJSON = JSON.stringify(layoutCloned);
		var layoutAsBlob = new Blob([layoutAsStringJSON], {type:'text/plain'});
		var fileNameToSaveAs = "Layout.json";

		var downloadLink = document.createElement("a");
		downloadLink.download = fileNameToSaveAs;
		downloadLink.innerHTML = "Download File";
		if (window.webkitURL != null)
		{
			// Chrome allows the link to be clicked
			// without actually adding it to the DOM.
			downloadLink.href = window.webkitURL.createObjectURL(layoutAsBlob);
			downloadLink.click();
		}
		else
		{
			// Firefox requires the link to be added to the DOM
			// before it can be clicked.
			downloadLink.href = window.URL.createObjectURL(layoutAsBlob);
			downloadLink.onclick = destroyClickedElement;
			downloadLink.style.display = "none";
			document.body.appendChild(downloadLink);
			downloadLink.click();
			document.body.removeChild(downloadLink);
		}
	}

	// html

	LayoutEditor.prototype.htmlElementBuild = function()
	{
		var returnValue = document.createElement("div");
		returnValue.style.position = "absolute";

		returnValue.appendChild(this.toolbox.htmlElementBuild());

		returnValue.appendChild(this.layout.htmlElementBuild());

		this.htmlElement = returnValue;

		return returnValue;
	}

	LayoutEditor.prototype.htmlElementUpdate = function()
	{
		// todo
	}
}

function LayoutElement(name, defnName, pos, sizeInPixels)
{
	this.name = name;
	this.defnName = defnName;
	this.pos = pos;
	this._sizeInPixels = sizeInPixels;
}
{
	// constants

	LayoutElement.StartingSizeForVariableSizedElements = new Coords(32, 32);

	// static methods

	LayoutElement.buildFromObject = function(objectToBuildFrom)
	{
		return new LayoutElement
		(
			objectToBuildFrom.name,
			objectToBuildFrom.defnName,
			Coords.buildFromObject(objectToBuildFrom.pos),
			Coords.buildFromObject(objectToBuildFrom._sizeInPixels)
		);
	}

	LayoutElement.buildManyFromObjects = function(objectsToBuildFrom)
	{
		var returnValues = [];

		for (var i = 0; i < objectsToBuildFrom.length; i++)
		{
			returnValues.push
			(
				LayoutElement.buildFromObject
				(
					objectsToBuildFrom[i]
				)
			);
		}

		return returnValues;
	}

	LayoutElement.cloneMany = function(elementsToClone)
	{
		var returnValues = [];

		for (var i = 0; i < elementsToClone.length; i++)
		{
			var elementToClone = elementsToClone[i];

			returnValues.push(elementToClone.clone());
		}

		return returnValues;
	}

	// instance methods

	LayoutElement.prototype.bounds = function()
	{
		var sizeInPixels = this.sizeInPixels();

		var returnValue = new Bounds
		(
			new Coords
			(
				this.pos.x + (sizeInPixels.x >= 0 ? 0 : sizeInPixels.x),
				this.pos.y + (sizeInPixels.y >= 0 ? 0 : sizeInPixels.y)
			),
			new Coords
			(
				this.pos.x + (sizeInPixels.x >= 0 ? sizeInPixels.x : 0),
				this.pos.y + (sizeInPixels.y >= 0 ? sizeInPixels.y : 0)
			)
		);

		return returnValue;
	}

	LayoutElement.prototype.clone = function()
	{
		return new LayoutElement
		(
			this.name,
			this.defnName,
			this.pos.clone(),
			(this._sizeInPixels == null ? null : this._sizeInPixels.clone())
		);
	}

	LayoutElement.prototype.defn = function()
	{
		return Globals.Instance.layoutEditor.toolbox.elementDefns[this.defnName];
	}

	LayoutElement.prototype.doBoundsOverlapWithOther = function(other)
	{
		return this.bounds().overlapsWithOther(other.bounds());
	}

	LayoutElement.prototype.isPositionRatherThanSizeBeingAdjusted = function()
	{
		var isPositionRatherThanSizeBeingAdjusted;

		var elementDefnSizeInPixels = this.defn().sizeInPixels;

		var isElementSizeVariable = (elementDefnSizeInPixels == null);

		if (isElementSizeVariable == true)
		{
			var elementSizeInPixels = this.sizeInPixels();

			var hasElementPositionBeenSpecified = (elementSizeInPixels != LayoutElement.StartingSizeForVariableSizedElements);
			if (hasElementPositionBeenSpecified == true)
			{
				isPositionRatherThanSizeBeingAdjusted = false;
			}
			else
			{
				isPositionRatherThanSizeBeingAdjusted = true;			
			}
		}
		else
		{
			isPositionRatherThanSizeBeingAdjusted = true;
		}

		return isPositionRatherThanSizeBeingAdjusted;
	}

	LayoutElement.prototype.sizeInPixels = function()
	{
		var returnValue;

		var defnSizeInPixels = this.defn().sizeInPixels;

		if (defnSizeInPixels == null)
		{
			if (this._sizeInPixels == null)
			{
				returnValue = LayoutElement.StartingSizeForVariableSizedElements;
			}
			else
			{
				returnValue = this._sizeInPixels;
			}
		}
		else
		{
			returnValue = defnSizeInPixels;
		}

		return returnValue;
	}

	// events

	LayoutElement.prototype.handleEventMouseDown = function(event)
	{
		// todo

		var layoutEditor = Globals.Instance.layoutEditor;
	}

	// html

	LayoutElement.prototype.htmlElementBuild = function()
	{
		var returnValue = document.createElement("div");

		returnValue.innerHTML = this.defnName;

		var defn = this.defn();

		var style = returnValue.style;
		style.backgroundColor = defn.color.systemColor;
		style.border = "1px solid";

		style.position = "absolute";

		returnValue.onclick = this.handleEventMouseDown.bind(this);

		this.htmlElement = returnValue;

		this.htmlElementUpdate();

		return returnValue;
	}

	LayoutElement.prototype.htmlElementUpdate = function()	
	{
		var style = this.htmlElement.style;

		var sizeInPixels = this.sizeInPixels();

		style.width = Math.abs(sizeInPixels.x);
		style.height = Math.abs(sizeInPixels.y);

		style.left = this.pos.x + (sizeInPixels.x >= 0 ? 0 : sizeInPixels.x);
		style.top = this.pos.y + (sizeInPixels.y >= 0 ? 0 : sizeInPixels.y);
	}
}

function LayoutElementDefn(name, color, sizeInPixels)
{
	this.name = name;
	this.color = color;
	this.sizeInPixels = sizeInPixels;
}
{
	// events

	LayoutElementDefn.handleEventSelected = function(event)
	{
		var layoutEditor = Globals.Instance.layoutEditor;

		var elementDefnSelected = event.srcElement.selectedOptions[0].elementDefn;

		if (elementDefnSelected != null)
		{
			var elementNew = new LayoutElement
			(
				"[NewElement]", 
				elementDefnSelected.name, 
				new Coords(0, 0)
			);

			layoutEditor.layout.elements.push(elementNew);

			layoutEditor.layout.htmlElement.appendChild
			(
				elementNew.htmlElementBuild()
			);

			layoutEditor.elementSelected = elementNew;
		}
	}

	// html

	LayoutElementDefn.prototype.htmlElementBuild = function()
	{
		var returnValue = document.createElement("div");

		returnValue.innerHTML = this.name;
		returnValue.style.backgroundColor = this.color.systemColor;
		returnValue.style.border = "1px solid";
		returnValue.style.width = this.sizeInPixels.x;
		returnValue.style.height = this.sizeInPixels.y;

		returnValue.onclick = this.handleEventMouseDown.bind(this);

		// This leads to a circular reference during save.
		//this.htmlElement = returnValue;

		return returnValue;
	}
}

function Tool(name, htmlElementBuild)
{
	this.name = name;
	this.htmlElementBuild = htmlElementBuild;
}
{
	// html

	Tool.prototype.htmlElementBuild = function()
	{
		var returnValue = this.htmlElementBuild.call(this);

		this.htmlElement = returnValue;

		return returnValue;
	}
}

function Toolbox(sizeInPixels, tools, elementDefns)
{
	this.sizeInPixels = sizeInPixels;
	this.tools = tools;
	this.elementDefns = elementDefns;	

	for (var i = 0; i < this.tools.length; i++)
	{
		var tool = this.tools[i];
		this.tools[tool.name] = tool;
	}

	for (var i = 0; i < this.elementDefns.length; i++)
	{
		var elementDefn = this.elementDefns[i];
		this.elementDefns[elementDefn.name] = elementDefn;
	}
}
{
	Toolbox.prototype.htmlElementBuild = function()
	{
		var returnValue = document.createElement("table");

		returnValue.style.border = "1px solid";
		returnValue.style.backgroundColor = Color.Instances.Gray.systemColor;
		returnValue.style.width = this.sizeInPixels.x;
		returnValue.style.height = this.sizeInPixels.y;

		var tr = document.createElement("tr");

		for (var i = 0; i < this.tools.length; i++)
		{
			var tool = this.tools[i];

			tool.htmlElement = tool.htmlElementBuild();

			var td = document.createElement("td");
			td.appendChild
			(
				tool.htmlElement
			);
			tr.appendChild(td);

			tool.htmlElement.tool = tool;
		}

		returnValue.appendChild(tr);

		this.htmlElement = returnValue;

		return returnValue;
	}
}

// run

main();

</script>
</body>
</html>
Advertisements
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s