formdesigner.js

its a varypowrerfull javascript tool

/*
 *  $Id: formdesigner.js,v 1.1 2006/08/07 10:41:25 source Exp $
 *
 *  This file is part of the OpenLink Software Ajax Toolkit (OAT) project.
 *
 *  Copyright (C) 2006 Ondrej Zara and OpenLink Software
 *
 *  See LICENSE file for details.
 */

/*
	new FormDesigner(parent)
	FormDesigner.setBase(baseElement)
	FormDesigner.clear()
	FormDesigner.addObject(formIndex,type,x,y)
*/


var FormDesigner = function(parent) {

	/* basic properties */
	var self = this;
	this.base = false; /* root element */
	this.capture = false; /* yellow select rectangle */

	this.forms = [];
	this.objects = [];
	this.gd = new OAT.GhostDrag();

	this.selObjs = []; /* selected objects */

	this.parent = $(parent); /* place for supplementary windows, toolbox etc */

	/* columns */
	this.columns = new Columns(self);
	this.parent.appendChild(this.columns.win.div);
	OAT.Layers.addLayer(this.columns.win.div);
	
	/* palette */
	this.palette = new Palette(self);
	this.parent.appendChild(this.palette.win.div);
	OAT.Layers.addLayer(this.palette.win.div);
	
	/* toolbox */
	this.toolbox = new Toolbox(self);
	this.parent.appendChild(this.toolbox.win.div);
	OAT.Layers.addLayer(this.toolbox.win.div);
	
	/* --------- available objects ----------- */ 
	this.palette.addObject("label");
	this.palette.addObject("input");
	this.palette.addObject("textarea");
	this.palette.addObject("checkbox");
	this.palette.addObject("line");
	this.palette.addObject("url");
	this.palette.addObject("map");
	this.palette.addObject("grid");
	this.palette.addObject("barchart");
	this.palette.addObject("pivot");
	this.palette.addObject("image");
	this.palette.addObject("imagelist");
	this.palette.addObject("twostate");
	this.palette.addObject("timeline");
	this.palette.addObject("nav");
	this.palette.addObject("gem");
	/* --------------------------------------- */

	/* methods */
	
	this.init = function(base) {
		self.base = $(base);
		OAT.Dom.attach(this.base,"mousedown",self.startCapture);
		OAT.Dom.attach(this.base,"mouseup",self.stopCapture);
		OAT.Dom.attach(this.base,"mousemove",self.processCapture);
		var obj = new OAT.Form(self);
		obj.name = "Main Form";
		obj.div = self.base;
		var pos = OAT.Dom.position(self.base);
		var dim = OAT.Dom.getWH(self.base);
		self.addObject(obj,"nav",pos[0],pos[1]+dim[1]-30);
		self.forms.push(obj);
		self.formEvents(obj);
		self.selectForm(obj);
	}
	
	this.selectForm = function(form) {
		self.deselectAll();
		self.gd.clearSources();
		self.gd.clearTargets();
		self.gd.addTarget(form.div);
		self.palette.createDrags(form);
		self.columns.createColumns(form,form.outputFields);
		self.toolbox.showForm(form);
		for (var i=1;i<self.forms.length;i++) {
			self.forms[i].div.className = "form";
		}
		if (form.div != self.base) { form.div.className = "form form_selected"; }
	}
	
	this.formEvents = function(form) { /* manage clicking on form */
		var div = form.div;
		var callback = function(event) {
			var src = OAT.Dom.source(event);
			if (src != div) { return; } /* only when form is directly clicked */
			self.selectForm(form);
		}
		OAT.Dom.attach(div,"click",callback);
	}
	
	this.addForm = function(optObj) { /* new subform */
		var div = OAT.Dom.create("div",{position:"absolute",left:"10px",top:"10px",width:"300px",height:"200px"});
		div.className = "form";
		self.base.appendChild(div);
		var obj = new OAT.Form(self); 
		obj.div = div;
		if (optObj.addNav) {
			var pos = OAT.Dom.position(div);
			var dim = OAT.Dom.getWH(div);
			self.addObject(obj,"nav",pos[0],pos[1]+dim[1]-30);
		}
		OAT.Drag.create(div,div);
		self.forms.push(obj);
		self.formEvents(obj);
		self.selectForm(obj);
		
		var resizer = OAT.Dom.create("div",{position:"absolute",width:"10px",height:"10px",bottom:"-5px",right:"-5px"});
		div.appendChild(resizer);
		OAT.Resize.create(resizer,div,OAT.Resize.TYPE_XY);
		
		return obj;
	}
	
	this.delForm = function(form) {
		OAT.Dom.unlink(form.div);
		/* all subforms that use this form... */
		for (var i=0;i<self.forms.length;i++) {
			var f = self.forms[i];
			var indexesToRemove = [];
			for (var j=0;j<f.masterForms.length;j++) {
				if (f.masterForms[j] == form) { indexesToRemove.push(j); }
			}
			for (var j=indexesToRemove.length-1;j>=0;j--) {
				f.masterForms.splice(indexesToRemove[j],1);
				f.masterCols.splice(indexesToRemove[j],1);
				f.selfCols.splice(indexesToRemove[j],1);
			}
		}
		var index = self.forms.find(form);
		self.forms.splice(index,1);
		var tmp = []; /* all objects on this form */
		for (var i=0;i<self.objects.length;i++) {
			if (self.objects[i].form == f) { tmp.push(i); }
		}
		for (var i=tmp.length;i>0;i--) {
			self.objects.splice(tmp[i-1],1);
		}
		self.toolbox.showForm(self.forms[0]); /* show form */

	}
	
	this.clear = function(optObj) { /* remove everything from this design */
		OAT.Dom.clear(this.base); 
		while (self.forms.length > 1) {
			self.forms.splice(1,1);
		}
		this.gd.clearSources();
		this.gd.clearTargets();
		this.objects = []; 
		var obj = self.forms[0];
		obj.clear();
		obj.name = "Main Form";

		if (optObj.addNav) {
			var pos = OAT.Dom.position(self.base);
			var dim = OAT.Dom.getWH(self.base);
			self.addObject(self.forms[0],"nav",pos[0],pos[1]+dim[1]-30);
		}
		
		self.selectForm(self.forms[0]);
	}
	
	this.startCapture = function(event) { /* selecting multiple objects */
		var src = OAT.Dom.source(event);
		if (src != self.base) { return; }
		self.capture = OAT.Dom.create("div",{position:"absolute",border:"2px solid #ff0",width:"0px",height:"0px",zIndex:"3"});
		OAT.Dom.attach(self.capture,"mouseup",self.stopCapture);
		OAT.Dom.attach(self.capture,"mousemove",self.processCapture);
		self.base.appendChild(self.capture);
		var coords = OAT.Dom.position(self.base);
		self.capture.parentCoords = coords;
		var exact = OAT.Dom.eventPos(event);
		self.capture.style.left = (exact[0] - coords[0]) + "px";
		self.capture.style.top = (exact[1] - coords[1]) + "px";
	} /* FormDesigner::startCapture() */
	
	this.processCapture = function(event) {
		if (!self.capture) { return; }
		var x = parseInt(self.capture.style.left);
		var y = parseInt(self.capture.style.top);
		var exact = OAT.Dom.eventPos(event);
		var end_x = exact[0] - self.capture.parentCoords[0];
		var end_y = exact[1] - self.capture.parentCoords[1];
		self.capture.style.width = (end_x - x) + "px";
		self.capture.style.height = (end_y - y) + "px";
	} /* FormDesigner::processCapture() */
	
	this.stopCapture = function(event) {
		if (!self.capture) { return; }
		var x = parseInt(self.capture.style.left);
		var y = parseInt(self.capture.style.top);
		var w = parseInt(self.capture.style.width);
		var h = parseInt(self.capture.style.height);
		self.deselectAll();
		var numSelected = 0;
		var lastObj = false;
		for (var i=0;i<self.objects.length;i++) {
			/* old problem - are two rectangles overlapping ? */
			var o = self.objects[i];
			var x2 = o.elm.offsetLeft + o.form.div.offsetLeft;
			var y2 = o.elm.offsetTop + o.form.div.offsetTop;
			var w2 = o.elm.offsetWidth;
			var h2 = o.elm.offsetHeight;
			var bad_x = ( (x < x2 && x+w < x2) || (x > x2+w2) );
			var bad_y = ( (y < y2 && y+h < y2) || (y > y2+h2) );
			if (!bad_x && !bad_y) { 
				o.select();
				lastObj = o;
				numSelected++;
			}
		}
		self.createDrags();
		switch (numSelected) {
			case 0: self.selectForm(self.forms[0]);	break;
			case 1: self.toolbox.showObject(lastObj); break;
			default: self.toolbox.showMulti(); break;
		}
		
		OAT.Dom.unlink(self.capture);
		self.capture = false;
	} /* FormDesigner::stopCapture() */
	
	this.createDrags = function() { /* mark selected elements draggable */
		this.selObjs = [];
		for (var i=0;i<self.objects.length;i++) {
			OAT.Drag.removeAll(self.objects[i].elm);
			if (self.objects[i].selected) { this.selObjs.push(self.objects[i]); }
		}
		for (var i=0;i<this.selObjs.length;i++) {
			for (var j=0;j<this.selObjs.length;j++) {
				OAT.Drag.create(this.selObjs[i].elm,this.selObjs[j].elm);