Mjs.Views.MainView = function() {
};
Mjs.Views.MainView.prototype = {
init: function(connectorCollection, codelineCollection) {
this.connectorCollection = connectorCollection;
this.codelineCollection = codelineCollection;
var notify = Mjs.notify;
notify.subscribe(this.codelineCollection.MESSAGE_CODELINE_CREATED,
_.bind(this.handleCodelineCreated, this));
notify.subscribe(this.codelineCollection.MESSAGE_CODELINE_DELETED,
_.bind(this.handleCodelineDeleted, this));
notify.subscribe(this.connectorCollection.MESSAGE_CONNECTOR_CREATED,
_.bind(this.handleConnectorCreated,this));
notify.subscribe(this.connectorCollection.MESSAGE_CONNECTOR_DELETED,
_.bind(this.handleConnectorDeleted,this));
},
initPage : function() {
$('body').layout({
west__size: 250,
//east__size: 250,
// RESIZE Accordion widget when panes resize
west__onresize: $.layout.callbacks.resizePaneAccordions,
//east__onresize: $.layout.callbacks.resizePaneAccordions,
//east__initClosed: true
});
// ACCORDION - in the West pane
$("#accordion1").accordion({
fillSpace: true
, active: 0
});
// // ACCORDION - in the East pane
// $("#accordion2").accordion({
// fillSpace: true
// , active: 0
// });
// load last saved graph - from localStorage or have
// an open saved graph function?
// setup jsPlumb
jsPlumb.bind("ready", function() {
// chrome fix.
document.onselectstart = function () { return false; };
jsPlumb.setRenderMode(jsPlumb.SVG);
Mjs.jsPlumbDiagram.init();
});
// accordion and upper level buttons
$( "#export-graph" )
.button()
.click(function() {
Mjs.Dialogs.ExportGraph.open();
});
$( "#import-graph" )
.button()
.click(function() {
Mjs.Dialogs.ImportGraph.open();
});
$( "#clear-graph" )
.button()
.click(function() {
Mjs.Dialogs.ClearGraph.open();
});
// $( "#refresh-graph" )
// .button()
// .click(function() {
// $( "#dialog-export-graph" ).dialog( "open" );
// });
$( "#create-devel" )
.button({ icons: {primary:'ui-icon-devel'} })
.click(function() {
Mjs.Dialogs.CreateCodeline.open('development','css/images/branch_dev.png' );
});
$( "#create-main" )
.button({ icons: {primary:'ui-icon-main'} })
.click(function() {
Mjs.Dialogs.CreateCodeline.open('main','css/images/branch_main.png' );
});
$( "#create-release" )
.button({ icons: {primary:'ui-icon-rel'} })
.click(function() {
Mjs.Dialogs.CreateCodeline.open('release','css/images/branch_release.png' );
});
// $( "#create-branch" )
// .button({ icons: {primary:'ui-icon-branch'} })
// .click(function() {
// Mjs.Dialogs.CreateConnector.open();
// });
// $( "#create-path" )
// .button({ icons: {primary:'ui-icon-path'} })
// .click(function() {
// Mjs.Dialogs.CreateConnector.open();
// });
},
handleCodelineDeleted : function(messageName, data) {
var codeline = data.codeline;
var element_id = codeline.domId();
var src_conn =
jsPlumb.getConnections({source: element_id});
var tar_conn =
jsPlumb.getConnections({target: element_id});
// Does the element have connections to be
// deleted? First, delete all connections
// when element is a source
if (src_conn.length > 0) {
$.each(src_conn, function(n, conn) {
Mjs.Collections.connectorCollection.removeById(conn.targetId);
});
}
// Second, delete all connections when element
// is a target
if (tar_conn.length > 0) {
$.each(tar_conn, function(n, conn) {
Mjs.Collections.connectorCollection.removeById(conn.sourceId);
});
}
$('#' + element_id).remove();
},
handleCodelineCreated : function(messageName, data) {
var codeline = data.codeline;
if (!codeline) {return;}
var codeTag = codeline.htmlTag();
// create should publish a message, which should trigger a
// view update
// this is view specific code
$( "#JSPlumbDiagram" ).append( codeTag );
var coEl = $('#' + codeline.id);
// TODO: find some way to
if (codeline.x && codeline.y) {
coEl.css({position: 'absolute', top: codeline.y + 'px',
left:codeline.x + 'px'});
}
console.log(codeTag);
$(".ex", coEl).unbind("click")
.click(function(){
Mjs.Dialogs.ConfirmDelete.open(codeline);
});
jsPlumb.draggable(jsPlumb.getSelector(".w"));
Mjs.jsPlumbDiagram.initEndpoints();
},
handleConnectorCreated: function(messageName, data) {
this.drawConnection(data.connector);
},
handleConnectorDeleted: function(messageName, data) {
var domId = data.connector.domId();
var elem = $('#' + domId);
jsPlumb.removeAllEndpoints(domId);
elem.remove();
},
endConnector : function(numOfChangelists, cssConnClass) {
var endConnector = {
connector:"StateMachine",
paintStyle:{lineWidth:1,strokeStyle:"black"},
anchor:"Continuous",
overlays: [["Arrow", {location:1, width:10, length:10} ],
[ "Label", { label: numOfChangelists.toString(),
id:"label",
cssClass: cssConnClass }]]
};
return endConnector;
},
drawConnection: function(connector) {
if (!connector) {return;}
var source = connector.source;
var target = connector.target;
var conn_tag = connector.htmlTag();
$( "#JSPlumbDiagram" ).append( conn_tag );
console.log(conn_tag);
$(".cex").unbind("click")
.click(function(){
Mjs.Dialogs.ConfirmDelete.open(connector);
});
// This calculates the offset to draw the connector
// between the source and the target
var offset_s = $("#" + source).offset();
var offset_t = $("#" + target).offset();
var conn_top = (offset_s.top + offset_t.top) / 2;
var conn_left =(offset_s.left + offset_t.left) / 2;
$("#" + connector.id).offset({ top: conn_top , left: conn_left});
var sourceNumCL = connector.sourceNumCL;
var targetNumCL = connector.targetNumCL;
var direction = connector.direction;
var beginConnector = {
connector:"StateMachine",
paintStyle:{lineWidth:1,strokeStyle:"black"},
anchor:"Continuous",
};
var targetEndConnector = null;
if (targetNumCL != null) {
targetEndConnector =
this.endConnector(targetNumCL, targetNumCL == 0 ?
"connNoInteg":"connInteg");
}
var sourceEndConnector = null;
if (sourceNumCL != null) {
sourceEndConnector =
this.endConnector(sourceNumCL, sourceNumCL == 0 ?
"connNoInteg":"connInteg");
}
if (direction === "target") {
jsPlumb.connect({
source:source,
target:connector.id},
beginConnector);
jsPlumb.connect({
source:connector.id,
target:target},
targetEndConnector);
}
if (direction === "source") {
jsPlumb.connect({
target:source,
source:connector.id},
sourceEndConnector);
jsPlumb.connect({
source:connector.id,
target:target},
beginConnector);
}
if (direction === "both") {
jsPlumb.connect({
target:source,
source:connector.id},
sourceEndConnector);
jsPlumb.connect({
source:connector.id,
target:target},
targetEndConnector);
}
jsPlumb.draggable(jsPlumb.getSelector(".c"));
}
};
Mjs.Views.mainView = new Mjs.Views.MainView();