Initial development of Rosetta Diagrams on the web

git-svn-id: https://svn.rosettacommons.org/source/trunk/RosettaDiagrams@53275 6189c7af-7406-0410-a2ce-f22f51069c23

js/backbone/app.js

@@ -0,0 +1,8 @@
+app = app || {};
+
+$(function() {
+
+	// Kick things off by creating the **App**.
+	new app.AppView().render();
+
+});

js/backbone/collections/DiagramConnectionCollection.js

@@ -0,0 +1,10 @@
+var app = app || {};
+
+(function() {
+
+	var DiagramConnectionList = Backbone.Collection.extend({
+		model: app.DiagramConnection
+	});
+
+	app.Connections = new DiagramConnectionList();
+}());

js/backbone/collections/DiagramElementCollection.js

@@ -0,0 +1,22 @@
+var app = app || {};
+
+(function() {
+
+	var DiagramElementList = Backbone.Collection.extend({
+		model: app.DiagramElement,
+
+//		initialize: function() {
+//			this.listenTo(this,'add',this.addModelListener);
+//		},
+//		
+//		addModelListener: function(model,attributes) {
+//			this.listenTo(model,"change",this.invokeChangeEvent);
+//		},
+//		
+//		invokeChangeEvent: function(model,attributes) { 
+//			console.log("The collection recorded a model change" + model);
+//		}
+	});
+
+	app.Elements = new DiagramElementList();
+}());

js/backbone/model/Attribute.js

@@ -0,0 +1,20 @@
+var app = app || {};
+(function() {
+
+	'use strict';
+
+	app.Attribute = Backbone.Model.extend({
+
+		defaults: { 
+			key: 'key',
+			value:'val',
+		}
+
+	});
+
+
+	app.AttributeList = Backbone.Collection.extend({
+		model: app.Attribute
+	});
+}
+());

js/backbone/model/DiagramConnection.js

@@ -0,0 +1,27 @@
+(function() {
+
+	'use strict';
+
+	app.DiagramConnection = Backbone.Model.extend({
+
+		defaults: {
+			source: undefined,
+			target: undefined,
+			type: undefined,
+			jointObj: undefined
+		},
+
+	});
+
+	app.pendingConnection = undefined;
+
+	/*Flow of creating a connection:
+	1)Click on a 'create connection' button turns on a flag on all DiagramElement models to wait for a connection.
+	2)Click on a DiagramElement creates a connection object (temp/adds to a collection?) and assign the source element to it.
+	3)Click on another DiagramElement sets the target element:
+		3.1)Checks if the source element is already set. If it is , set the target element.
+	4)Once the target element is set , the collection listens to this event and adds it to the collection.
+	5)The ConnectionView also listens to the target-set event and shows the connection.
+	*/
+
+}());

js/backbone/model/DiagramElement.js

@@ -0,0 +1,36 @@
+(function() {
+
+	'use strict';
+
+
+	app.DiagramElement = Backbone.Model.extend({
+
+		defaults: {
+			x:0,
+			y:0,
+			name:"New_Element",
+			connectionReady: false,
+			deleteMode: false,
+			jointObj: undefined,
+			attributes: undefined,
+			typeObj: undefined
+		},
+
+		initialize: function() { 
+			var new_attr_list = new app.AttributeList();
+			new_attr_list.add(new app.Attribute({key:'name',value:'element_'+app.elementCounter++}));
+			this.set('attributes', new_attr_list);
+
+			this.listenTo(new_attr_list,"change",this.attributes_changed);
+			this.listenTo(new_attr_list,"add",this.attributes_changed);
+			this.listenTo(new_attr_list,"remove",this.attributes_changed);
+		},
+
+		attributes_changed: function() {
+			console.log("Triggering change event");
+			this.trigger("change");
+		}
+
+	});
+
+}());

js/backbone/model_old.js

@@ -0,0 +1,97 @@
+
+
+var rdiag = rdiag || {};
+
+rdiag.DiagramConnection = Backbone.Model.extend({ 
+	defaults: {
+		source: undefined,
+		target: undefined,
+		type: Joint.dia.uml
+	}
+});
+
+rdiag.DiagramConnectionCollection = Backbone.Collection.extend({
+	model: rdiag.DiagramConnection
+});
+
+
+rdiag.DiagramElement = Backbone.Model.extend({ 
+
+	defaults: {
+		x:0,
+		y:0,
+		name: "NewMover",
+		canvas: undefined,
+		elem: undefined,
+	},	
+
+});
+
+rdiag.MenuItem = Backbone.Model.extend( {
+
+	defaults: { 
+		x: 0,
+		y: 0,
+		action: "DDD",
+		img: undefined,
+		diagramElement: undefined
+	},
+
+});
+
+rdiag.DiagramElementList = Backbone.Collection.extend({
+	model: rdiag.DiagramElement
+});
+
+var MenuItems = Backbone.Collection.extend({
+	model: rdiag.MenuItem
+
+});
+
+var elementsInCanvas = new rdiag.DiagramElementList();
+
+rdiag.createDiagramElement = function(params) { 
+	var d = new rdiag.DiagramElement(params);
+	elementsInCanvas.add(d);
+	return d;
+};
+
+rdiag.createMenuItem = function(params) { 
+	var m = new rdiag.MenuItem(params);
+	return m;
+}
+
+rdiag.Canvas = Backbone.Model.extend( { 
+
+	defaults: { 
+		elements: new rdiag.DiagramElementList(),
+		connections: new rdiag.DiagramConnectionCollection(),
+		menu: rdiag.createMenuItem(),
+	},
+
+});
+
+rdiag.App = Backbone.Model.extend({
+	defaults:{
+		canvas: new rdiag.Canvas(),
+		sourceElement: undefined,
+		targetElement: undefined,
+		connectionMode: false
+	},
+	connectionReady: function() {
+		var s = this.get('sourceElement');
+		return s != undefined;
+
+	},
+
+	resetElements: function() {
+		this.set('sourceElement',undefined);
+		this.set('targetElement',undefined);
+	},
+	isInConnectionMode: function() {
+		return this.get('connectionMode');
+	}
+});
+
+
+

js/backbone/view/AttributeView.js

@@ -0,0 +1,45 @@
+var app = app || {};
+$(function() {
+
+	app.AttributeView = Backbone.View.extend({
+
+		tagName: 'li',
+		template: undefined,
+
+		events: {
+			"focusout #attr_key" : "update_model",
+			"focusout #attr_value" : "update_model",
+			"keypress #attr_key": "update_model_keypressed",
+			"keypress #attr_value": "update_model_keypressed",
+			"click #deleteBtn": "destroy_attribute"
+		},
+
+		initialize: function() { 
+			this.template = _.template( $('#attribute_template').html() );
+		},
+
+		destroy_attribute: function() { 
+			this.model.destroy();
+			this.remove();
+		},
+
+		render: function() {
+			this.$el.html( this.template( this.model.toJSON() ) );
+			return this;
+		},
+
+		update_model:function() { 
+			var key = this.$('#attr_key').val();
+			var value = this.$('#attr_value').val();
+			this.model.set('key',key);
+			this.model.set('value',value);
+		},
+
+		update_model_keypressed: function(e) { 
+			if ( e.which == ENTER_KEY ) {
+				this.update_model();
+			}
+		}
+
+	});
+});

js/backbone/view/CodeView.js

@@ -0,0 +1,51 @@
+var app = app || {};
+$(function() {
+
+	app.CodeView = Backbone.View.extend({
+		el:'#code',
+
+		initialize: function() {
+			this.listenTo(app.Elements,'change',this.render);
+			this.listenTo(app.Connections,'change',this.render);
+		},
+
+		render: function() { 
+			console.log("rendering code ... ");
+			this.$('#xml_movers').empty();
+			this.$('#xml_filters').empty();
+			app.Elements.each( function(element) {
+				var codeView = new app.XMLMoversView({model: element});
+				var htmlCode = codeView.render().el;
+				var typeObj = element.get('typeObj');
+				this.$(typeObj.codeTemplate).append(htmlCode);
+			});
+			this.renderConnections();
+			//formatXml is located in the utils.js file. it formats the XML file to have better indentation
+			var xml = vkbeautify.xml(this.$el.text());
+			$('#display_code').text(xml);
+			prettyPrint();
+		},
+
+		renderConnections: function() {
+			var order=[];
+			this.$('#xml_protocols').empty();
+			app.Connections.each(function(con){
+				for(var i=0; i<order.length; ++i ){
+					if (order[i]==con.get('source')){
+						order[i+1] = con.get('target');
+						return;
+					}
+				}
+
+				order[0]=con.get('source');
+				order[1]=con.get('target');
+			});
+			for(var i=0; i<order.length; ++i){ 
+				var protocolView = new app.XMLProtocolView({model: order[i]});
+				var htmlCode = protocolView.render().el;
+				this.$('#xml_protocols').append(htmlCode);
+			}
+		}
+
+	});
+});

js/backbone/view/DiagramConnectionView.js

@@ -0,0 +1,41 @@
+var app = app || {};
+$(function() {
+
+	app.DiagramConnectionView = Backbone.View.extend({
+
+		initialize: function() {
+			var model = this.model;
+			var source = model.get('source');
+			var target =  model.get('target').get('jointObj');
+			var jointObj = source.get('jointObj').joint(target,Joint.dia.uml);
+
+			model.set('jointObj',jointObj);
+
+			var obj = this;
+			jointObj.registerCallback("justConnected",function(side) {
+				var rawElement = this.wholeShape;
+				obj.changeConnectedElement(side,rawElement);
+			});
+		},
+
+		changeConnectedElement: function(side,rawElement) { 
+			var foundElement = undefined;
+			app.Elements.each(
+					function(element) {
+						var jointObj = element.get('jointObj');  
+						if ( jointObj == rawElement ) {
+							console.log("Element connection is changed to "+element);
+							foundElement = element; 
+						}
+					}
+			);
+			if ( side == "end" ) {
+				this.model.set("target",foundElement);
+			}else { 
+				this.model.set("source",foundElement);
+			}
+		}
+
+	});
+
+});