Skip to content

CIRCLE / cloud

Go to a project
Commit 638dba54 by Estók Dániel
Options

dded improved mobile support.

parent c8576bdc
Showing with 470 additions and 265 deletions
circle/setty/static/setty/setty.js
jsPlumb.ready(function(){ (function($){
/**
* Global variables. $.event.special.doubletap = {
*/ bindType: 'touchend',
delegateType: 'touchend',
handle: function(event) {
var handleObj = event.handleObj,
targetData = jQuery.data(event.target),
now = new Date().getTime(),
delta = targetData.lastTouch ? now - targetData.lastTouch : 0,
delay = delay === null ? 300 : delay;
if (delta < delay && delta > 30) {
targetData.lastTouch = null;
event.type = handleObj.origType;
['clientX', 'clientY', 'pageX', 'pageY'].forEach(function(property) {
event[property] = event.originalEvent.changedTouches[0][property];
})
// let jQuery handle the triggering of "doubletap" event handlers
handleObj.handler.apply(this, arguments);
} else {
targetData.lastTouch = now;
}
}
};
})(jQuery);
jsPlumb.ready(function() {
var jsPlumbInstance = jsPlumb.getInstance({ var jsPlumbInstance = jsPlumb.getInstance({
DragOptions: { DragOptions: {
cursor: 'pointer',
zIndex: 2000 zIndex: 2000
}, },
EndpointHoverStyle: { EndpointHoverStyle: {
fillStyle: "green" fillStyle: "green"
}, },
HoverPaintStyle: { HoverPaintStyle: {
strokeStyle: "red" strokeStyle: "green"
}, },
Container: "dropContainer" Container: "dropContainer"
}); });
var jsPlumbEndpoint = { var jsPlumbEndpoint = {
endpoint: ["Dot", { endpoint: ["Dot", {
radius: 10, radius: 10
}], }],
paintStyle: { paintStyle: {
fillStyle: "#9932cc", fillStyle: "#9932cc"
}, },
isSource: true, isSource: true,
isTarget: true, isTarget: true,
...@@ -28,72 +54,184 @@ jsPlumb.ready(function(){ ...@@ -28,72 +54,184 @@ jsPlumb.ready(function(){
zIndex: 20, zIndex: 20,
connectorStyle: { connectorStyle: {
strokeStyle: "#9932cc", strokeStyle: "#9932cc",
lineWidth: 8, lineWidth: 8
}, },
connector: ["Bezier", { connector: ["Bezier", {
curviness: 180, curviness: 180
}], }],
maxConnections: 1, maxConnections: 1,
dropOptions: { dropOptions: {
tolerance: "fit", tolerance: "fit"
}, }
}; };
var elementConnections = []; var elementConnections = [];
var elementIndex = 0; var elementIndex = 0;
var dragContainerScroll = 0; var dragContainerScroll = 0;
var saveWarning = 0; var clickEvent = 0;
var stackIndexer = 0;
var stackSize = 0;
var objectStack = [];
var undoStack = [];
var redoStack = [];
$("#dropContainer").attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
/** setServiceStatus = function(status) {
* Function for updating saved status. if (status == "unsaved") {
*/ $("#serviceStatus").text("Unsaved");
setServiceStatus = function(status){
if(status == "unsaved" && $("#unsavedDiv").length < 1){
$("#serviceName").parent().append('<h3 id="unsavedDiv"> (unsaved)</h3>');
} }
if(status == "saved"){ if (status == "saved") {
$("#unsavedDiv").remove(); $("#serviceStatus").empty();
} }
}; };
addInfo = function(title, info, type, object) {
$("#informationContainer").empty();
/** switch(type){
* Function for displaying information panel content. case "connection":
*/ div =
addInfo = function(title, info, type, element){ '<div class="row">' +
div = '<div class="row"><div class="col-xs-12 text-center"><h3>' + title + '</h3></div></div>&nbsp;<div class="row"><div class="col-xs-12">' + '<textarea class="form-control" rows="30" id="infoInput"' + 'placeholder="Config data"' + (type=="info"?'readonly':'') + '>' + '</textarea></div></div>'; '<div class="col-xs-12 text-center">' +
'<h4>' + title + '</h4>' +
if(type=="element") '</div>' +
div += '&nbsp;<div class="row text-center"><label>Endpoints</label></div><div class="row">' + '<div class="col-xs-6 text-center">' + '<button id="addEndpoint" class="btn btn-success">+</button></div>' + '<div class="col-xs-6 text-center">' + '<button id="removeEndpoint" class="btn btn-danger">-</button></div></div>'; '</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<textarea class="form-control" rows="28" id="infoInput" placeholder="Config data"></textarea>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<button id="removeConnection" class="btn btn-info">Remove connection</button>' +
'</div>' +
'</div>';
break;
case "element":
div =
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<h4>' + title + '</h4>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<textarea class="form-control" rows="24" id="infoInput" placeholder="Config data"></textarea>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row text-center">' +
'<label>Endpoints</label>' +
'</div>' +
'<div class="row">' +
'<div class="col-xs-6 text-center">' +
'<button id="addEndpoint" class="btn btn-success"><i class="fa fa-plus"></i></button>' +
'</div>' +
'<div class="col-xs-6 text-center">' +
'<button id="removeEndpoint" class="btn btn-danger"><i class="fa fa-minus"></i></button>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<button id="removeFromWorkspace" class="btn btn-info">Remove from workspace</button>' +
'</div>' +
'</div>';
break;
case "elementTemplate":
div =
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<h4>' + title + '</h4>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<textarea class="form-control" rows="28" id="infoInput" placeholder="Config data"></textarea>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<button id="addElementToWorkspace" class="btn btn-success">Add to workspace</button>' +
'</div>' +
'</div>';
break;
}
$("#informationContainer").empty().append(div); $("#informationContainer").append(div);
$("#infoInput").val(info).keyup(function(){ $("#infoInput").val(info).keyup(function() {
setServiceStatus("unsaved"); setServiceStatus("unsaved");
newParams = $("#infoInput").val(); newParams = $("#infoInput").val();
if(type=="connection") element.parameters = newParams; if (type == "connection") object.parameters = newParams;
if(type=="element") element.attr("parameters", newParams); if (type == "element") object.attr("parameters", newParams);
}); });
$("#addEndpoint").click(function(){ $("#addEndpoint").click(function() {
addEndpoint(element); addEndpoint(object);
undoStack.splice(stackIndexer, 0, removeEndoint);
redoStack.splice(stackIndexer, 0, addEndpoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
}); });
$("#removeEndpoint").click(function(){ $("#removeEndpoint").click(function() {
removeEndoint(element); removeEndoint(object);
undoStack.splice(stackIndexer, 0, addEndpoint);
redoStack.splice(stackIndexer, 0, removeEndoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
}); });
};
$("#removeFromWorkspace").click(function() {
$('.element').removeClass('elementSelected');
removeElement(object);
/** $("#informationPanel").hide();
* Function for updating connection array whether an event was fired. $("#dragPanel").show();
*/
updateConnections = function(connection, remove){ undoStack.splice(stackIndexer, 0, addElement);
setServiceStatus("unsaved"); redoStack.splice(stackIndexer, 0, removeElement);
if (!remove) objectStack.splice(stackIndexer, 0, object);
stackSize++;
stackIndexer++;
});
$("#removeConnection").click(function() {
jsPlumbInstance.detach(object);
$("#informationPanel").hide();
$("#dragPanel").show();
});
$("#addElementToWorkspace").click(function() {
addElement(object.attr("id"), (++elementIndex) + "_" + object.attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
undoStack.splice(stackIndexer, 0, removeElement);
redoStack.splice(stackIndexer, 0, addElement);
objectStack.splice(stackIndexer, 0, newInstance);
stackSize++;
stackIndexer++;
});
$("#dragPanel").hide();
$("#informationPanel").show();
};
updateConnections = function(connection, remove) {
if (!remove) {
elementConnections.push(connection); elementConnections.push(connection);
else { } else {
index = -1; index = -1;
for (var i = 0; i < elementConnections.length; i++) { for (var i = 0; i < elementConnections.length; i++) {
if (elementConnections[i] == connection) { if (elementConnections[i] == connection) {
...@@ -101,20 +239,27 @@ jsPlumb.ready(function(){ ...@@ -101,20 +239,27 @@ jsPlumb.ready(function(){
break; break;
} }
} }
if (index != -1) if (index != -1) {
elementConnections.splice(index, 1); elementConnections.splice(index, 1);
} }
}
setServiceStatus("unsaved");
}; };
/** checkDuplicateConnection = function(connection) {
* Function for checking and ignoring duplicate connections.
*/
checkDuplicateConnection = function(connection){
for (var i = 0; i < elementConnections.length; i++) { for (var i = 0; i < elementConnections.length; i++) {
if ((elementConnections[i].targetId == connection.targetId && elementConnections[i].sourceId == connection.sourceId) || if (((elementConnections[i].targetId ==
(elementConnections[i].targetId == connection.sourceId && elementConnections[i].sourceId == connection.targetId)) { connection.targetId &&
addMessage("Duplicate connection.", "danger"); elementConnections[i].sourceId ==
connection.sourceId) ||
(elementConnections[i].targetId ==
connection.sourceId &&
elementConnections[i].sourceId ==
connection.targetId)) &&
elementConnections[i] != connection) {
addMessage("Twofold connection is forbidden.", "danger");
return false; return false;
} }
} }
...@@ -122,36 +267,25 @@ jsPlumb.ready(function(){ ...@@ -122,36 +267,25 @@ jsPlumb.ready(function(){
}; };
/** checkCompatibility = function(sourceId, targetId) {
* Function for checking element compatibility.
*/
checkCompatibility = function(sourceId, targetId){
validTargets = $("#" + sourceId).attr("type").split(','); validTargets = $("#" + sourceId).attr("type").split(',');
if (jQuery.inArray(targetId.split('_')[1], validTargets) == -1) { if (jQuery.inArray(targetId.split('_')[1], validTargets) == -1) {
addMessage("Elements are incompatible.", "danger"); addMessage("Connecting incompatible elements is forbidden.", "danger");
return false; return false;
} }
return true; return true;
}; };
checkSourceTargetEquality = function(connection) {
/**
* Function for checking source and target equality.
*/
checkSourceTargetEquality = function(connection){
if (connection.targetId == connection.sourceId) { if (connection.targetId == connection.sourceId) {
addMessage("Source element is the same as target element.", "danger"); addMessage("Connecting element to itself is forbidden.", "danger");
return false; return false;
} }
return true; return true;
}; };
getAnchorCoordinate = function(rate) {
/**
* Function for determining anchor positions for an element.
*/
getAnchorCoordinate = function(rate){
x = Math.cos(2.0 * Math.PI * rate) / 2; x = Math.cos(2.0 * Math.PI * rate) / 2;
y = Math.sin(2.0 * Math.PI * rate) / 2; y = Math.sin(2.0 * Math.PI * rate) / 2;
dx = 0; dx = 0;
...@@ -173,23 +307,21 @@ jsPlumb.ready(function(){ ...@@ -173,23 +307,21 @@ jsPlumb.ready(function(){
x = -0.5; x = -0.5;
dx = -1; dx = -1;
} else { } else {
x = Math.sqrt(2) * Math.cos(2 * Math.PI * rate) / 2; x = Math.sqrt(2) * Math.cos(2 * Math.PI *
y = Math.sqrt(2) * Math.sin(2 * Math.PI * rate) / 2; rate) / 2;
y = Math.sqrt(2) * Math.sin(2 * Math.PI *
rate) / 2;
dx = Math.round(2 * x); dx = Math.round(2 * x);
} }
return [y + 0.5, -x + 0.5, dy, -dx]; return [y + 0.5, -x + 0.5, dy, -dx];
}; };
isConnected = function(anchorId) {
/**
* Check whether an anchor is connected.
*/
isConnected = function(anchorId){
returnValue = false; returnValue = false;
$.each(elementConnections, function(index) { $.each(elementConnections, function(index) {
if(elementConnections[index].endpoints[0].getUuid()==anchorId || if (elementConnections[index].endpoints[0].getUuid() == anchorId ||
elementConnections[index].endpoints[1].getUuid()==anchorId){ elementConnections[index].endpoints[1].getUuid() == anchorId) {
returnValue = true; returnValue = true;
return; return;
} }
...@@ -197,45 +329,38 @@ jsPlumb.ready(function(){ ...@@ -197,45 +329,38 @@ jsPlumb.ready(function(){
return returnValue; return returnValue;
}; };
/** getConnectionparamAndAnchor = function(anchorId) {
* Get connection parameters and other connected anchor concerning an anchor coming from parameters.
*/
getConnectionparamAndAnchor = function(anchorId){
parameters = ""; parameters = "";
otherAnchor = ""; otherAnchor = "";
$.each(elementConnections, function(index) { $.each(elementConnections, function(index) {
if(elementConnections[index].endpoints[0].getUuid()==anchorId) if (elementConnections[index].endpoints[0].getUuid() == anchorId) {
{ parameters = elementConnections[index].parameters;
parameters = elementConnections[index];
otherAnchor = elementConnections[index].endpoints[1].getUuid(); otherAnchor = elementConnections[index].endpoints[1].getUuid();
return; return;
} }
if(elementConnections[index].endpoints[1].getUuid()==anchorId) if (elementConnections[index].endpoints[1].getUuid() == anchorId) {
{
parameters = elementConnections[index].parameters; parameters = elementConnections[index].parameters;
otherAnchor = elementConnections[index].endpoints[0].getUuid(); otherAnchor = elementConnections[index].endpoints[0].getUuid();
return; return;
} }
}); });
return [parameters, otherAnchor];
};
return [otherAnchor, parameters];
};
/** addEndpoint = function(element) {
* Function to add new element to service.
*/
addEndpoint = function(element){
anchors = element.attr("anchors"); anchors = element.attr("anchors");
if(anchors==8) return; if (anchors == 8) return;
anchors++; anchors++;
jsPlumbInstance.addEndpoint(document.getElementById(element.attr("id")), { jsPlumbInstance.addEndpoint(document.getElementById(
anchor: getAnchorCoordinate((anchors-1) / anchors), element.attr("id")), {
uuid: (anchors-1) + "_" + element.attr("id") anchor: getAnchorCoordinate((anchors - 1) / anchors),
uuid: (anchors - 1) + "_" + element.attr("id")
}, },
jsPlumbEndpoint); jsPlumbEndpoint);
...@@ -246,55 +371,74 @@ jsPlumb.ready(function(){ ...@@ -246,55 +371,74 @@ jsPlumb.ready(function(){
jsPlumbInstance.repaintEverything(); jsPlumbInstance.repaintEverything();
}; };
/** removeEndoint = function(element) {
* Function for removing an endpoint of an element.
*/
removeEndoint = function(element){
anchors = element.attr("anchors"); anchors = element.attr("anchors");
if(anchors==4) return; if (anchors == 4) return;
i = anchors-1; i = anchors - 1;
anchors--; anchors--;
while(isConnected(i + "_" + element.attr("id")) && i>=0){ while (isConnected(i + "_" + element.attr("id")) &&
i--; i >= 0) i--;
}
if(i==-1){ if (i == -1) {
addMessage("All the anchors are connected so that removing any is forbidden.", "danger"); addMessage("Removing anchors is obstructed.", "danger");
return; return;
} } else if (i == anchors) {
else if(i==anchors){ jsPlumbInstance.deleteEndpoint(
jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id"))); jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
} } else {
else{
newId = i + "_" + element.attr("id"); newId = i + "_" + element.attr("id");
oldId = anchors + "_" + element.attr("id"); oldId = anchors + "_" + element.attr("id");
data = getConnectionparamAndAnchor(oldId); data = getConnectionparamAndAnchor(oldId);
data.splice(0, 0, newId);
jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(oldId)); jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(oldId));
connectionObject = jsPlumbInstance.connect({ connectEndpoints(data);
uuids: [newId, data[1]]
});
connectionObject.parameters = data[0];
} }
for (i=0;i<anchors;i++) jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors))); for (i = 0; i < anchors; i++) jsPlumbInstance.getEndpoint(
i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
element.attr("anchors", anchors); element.attr("anchors", anchors);
jsPlumbInstance.repaintEverything(); jsPlumbInstance.repaintEverything();
}; };
connectEndpoints = function(data) {
connectionObject =
jsPlumbInstance.connect({
uuids: [data[0], data[1]]
});
connectionObject.parameters = data[2];
/** setServiceStatus("unsaved");
* Function for managing instantiation of new elements based on their templates. };
*/
addElement = function(templateId, newId, newPositionY, endpoints, parameters, newPositionX){ disconnectEndpoints = function(data) {
newInstance = $('#' + templateId) for (var i = 0; i < elementConnections.length; i++) {
if (elementConnections[i].endpoints[0].getUuid() == data[0] &&
elementConnections[i].endpoints[1].getUuid() == data[1]) {
jsPlumbInstance.detach(elementConnections[i]);
return;
}
}
return;
};
addElement = function(idOrInstance, newId, newPositionY, endpoints, parameters, newPositionX) {
newInstance = "";
if (typeof idOrInstance != "string") {
newInstance = idOrInstance;
endpoints = newInstance.attr("anchors");
newInstance.attr("anchors", 0);
} else {
newInstance = $('#' + idOrInstance)
.clone() .clone()
.prop("id", newId) .prop("id", newId)
.prop("title", "Right click to delete") .prop("title", "Right click to delete")
...@@ -304,6 +448,7 @@ jsPlumb.ready(function(){ ...@@ -304,6 +448,7 @@ jsPlumb.ready(function(){
.attr("parameters", parameters) .attr("parameters", parameters)
.css("top", newPositionY) .css("top", newPositionY)
.css("left", newPositionX); .css("left", newPositionX);
}
$("#dropContainer").append(newInstance); $("#dropContainer").append(newInstance);
...@@ -315,16 +460,28 @@ jsPlumb.ready(function(){ ...@@ -315,16 +460,28 @@ jsPlumb.ready(function(){
containment: $("#dropContainer") containment: $("#dropContainer")
}); });
newInstance.mousedown(function(e){ newInstance.on('dblclick doubletap', function() {
if(e.button === 0){
element = $(this); element = $(this);
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
element.addClass("elementSelected");
addInfo(element.attr("alt"), element.attr("parameters"), "element", element); addInfo(element.attr("alt"), element.attr("parameters"), "element", element);
return false; }).mousedown(function(e) {
} if (e.button == 2) {
if(e.button == 2){
setServiceStatus("unsaved"); setServiceStatus("unsaved");
$("#informationContainer").empty(); $("#informationPanel").hide();
jsPlumbInstance.remove($(this).prop("id")); $("#dragPanel").show();
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
removeElement($(this));
undoStack.splice(stackIndexer, 0, addElement);
redoStack.splice(stackIndexer, 0, removeElement);
objectStack.splice(stackIndexer, 0, $(this));
stackSize++;
stackIndexer++;
return false; return false;
} }
return true; return true;
...@@ -335,31 +492,60 @@ jsPlumb.ready(function(){ ...@@ -335,31 +492,60 @@ jsPlumb.ready(function(){
jsPlumbInstance.repaintEverything(); jsPlumbInstance.repaintEverything();
}; };
removeElement = function(object) {
jsPlumbInstance.detachAllConnections(object);
jsPlumbInstance.remove(object.attr("id"));
};
/** jsPlumbInstance.bind("connection", function(info) {
* Handling events on workspace.
*/
jsPlumbInstance.bind("connection", function(info){
updateConnections(info.connection); updateConnections(info.connection);
info.connection.parameters = ""; info.connection.parameters = "";
if (clickEvent === 0) {
undoStack.splice(stackIndexer, 0, disconnectEndpoints);
redoStack.splice(stackIndexer, 0, connectEndpoints);
connectionArray = [];
connectionArray.push(info.connection.endpoints[0].getUuid(),
info.connection.endpoints[1].getUuid(),
info.connection.parameters);
objectStack.splice(stackIndexer, 0, connectionArray);
stackIndexer++;
stackSize++;
}
}); });
jsPlumbInstance.bind("beforeDrop", function(info){ jsPlumbInstance.bind("beforeDrop", function(info) {
return checkDuplicateConnection(info.connection) && return checkDuplicateConnection(info.connection) &&
checkSourceTargetEquality(info.connection) && checkSourceTargetEquality(info.connection) &&
checkCompatibility(info.connection.sourceId, info.connection.targetId); checkCompatibility(info.connection.sourceId, info.connection.targetId);
}); });
jsPlumbInstance.bind("connectionDetached", function(info){ jsPlumbInstance.bind("connectionDetached", function(info) {
updateConnections(info.connection, true); updateConnections(info.connection, true);
if (clickEvent === 0) {
undoStack.splice(stackIndexer, 0, connectEndpoints);
redoStack.splice(stackIndexer, 0, disconnectEndpoints);
connectionArray = [];
connectionArray.push(info.connection.endpoints[0].getUuid(),
info.connection.endpoints[1].getUuid(),
info.connection.parameters);
objectStack.splice(stackIndexer, 0, connectionArray);
stackIndexer++;
stackSize++;
}
}); });
jsPlumbInstance.bind("connectionMoved", function(info){ jsPlumbInstance.bind("connectionMoved", function(info) {
updateConnections(info.connection, true); updateConnections(info.connection, true);
}); });
jsPlumbInstance.bind("contextmenu", function(info){ jsPlumbInstance.bind("contextmenu", function(info) {
jsPlumbInstance.detach(info); jsPlumbInstance.detach(info);
$("#informationContainer").empty(); $("#informationPanel").hide();
}); $("#dragPanel").show();
jsPlumbInstance.bind("click", function(info){ });
addInfo($("#"+info.sourceId.split('_')[1]).attr("alt") + ' - ' + $("#"+info.targetId.split('_')[1]).attr("alt"), jsPlumbInstance.bind("dblclick", function(info) {
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
info.setPaintStyle({strokeStyle:"red", lineWidth: 8});
addInfo($("#" + info.sourceId.split('_')[1]).attr("alt") + ' - ' + $("#" + info.targetId.split('_')[1]).attr("alt"),
info.parameters, info.parameters,
"connection", "connection",
info); info);
...@@ -368,33 +554,26 @@ jsPlumb.ready(function(){ ...@@ -368,33 +554,26 @@ jsPlumb.ready(function(){
containment: $("#dropContainer") containment: $("#dropContainer")
}); });
$(".elementTemplate").click(function() {
addElement($(this).attr("id"), (++elementIndex) + "_" + $(this).attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
/** undoStack.splice(stackIndexer, 0, removeElement);
* Handling click event on elements. redoStack.splice(stackIndexer, 0, addElement);
*/ objectStack.splice(stackIndexer, 0, newInstance);
$(".elementTemplate").click(function(){ stackSize++;
addElement($(this).prop("id"), stackIndexer++;
(++elementIndex) + "_" + $(this).prop("id"),
$(this).position().top,
4,
"");
}); });
$("#closeInfoPanel").click(function(){
/** $('#informationPanel').hide();
* Handling mouse enter event on elementTemplate for diplaying info. $('#dragPanel').show();
*/ $('.element').removeClass('elementSelected');
$(".elementTemplate").mouseenter(function(){ jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
addInfo($(this).attr("alt"), $(this).attr("desc"), "info");
}); });
$("#clearService").click(function() {
/** jsPlumbInstance.detachEveryConnection();
* Handling click event on clear button. jsPlumbInstance.deleteEveryEndpoint();
*/
$("#clearService").click(function(e){
jsPlumbInstance.detachEveryConnection()
.deleteEveryEndpoint();
$(".element").remove(); $(".element").remove();
setServiceStatus("unsaved"); setServiceStatus("unsaved");
...@@ -403,23 +582,40 @@ jsPlumb.ready(function(){ ...@@ -403,23 +582,40 @@ jsPlumb.ready(function(){
elementIndex = 0; elementIndex = 0;
}); });
$("#undoMovement").click(function() {
if (stackIndexer <= 0) return;
stackIndexer--;
clickEvent = 1;
object = objectStack[stackIndexer];
undoStack[stackIndexer](object);
clickEvent = 0;
});
/** $("#redoMovement").click(function() {
* Handling status change in case of renaming service. if (stackIndexer >= stackSize) return;
*/ clickEvent = 1;
$("#serviceName").keydown(function(){ object = objectStack[stackIndexer];
redoStack[stackIndexer++](object);
clickEvent = 0;
});
$(".elementTemplateInfo").click(function() {
id = $(this).attr("element");
addInfo($("#" + id).attr("alt"), $("#" + id).attr("desc"), "elementTemplate", $("#" + id));
});
$("#serviceName").keydown(function() {
setServiceStatus("unsaved"); setServiceStatus("unsaved");
}); });
/** $("#saveService").click(function() {
* Handling click event on save button.
*/
$("#saveService").click(function(){
serviceName = $("#serviceName").text(); serviceName = $("#serviceName").text();
connectionSet = []; connectionSet = [];
instanceSet = []; instanceSet = [];
$.each(elementConnections, function(index){ $.each(elementConnections, function(index) {
connectionSet.push({ connectionSet.push({
"sourceId": elementConnections[index].sourceId, "sourceId": elementConnections[index].sourceId,
"sourceEndpoint": elementConnections[index].endpoints[0].getUuid(), "sourceEndpoint": elementConnections[index].endpoints[0].getUuid(),
...@@ -429,7 +625,7 @@ jsPlumb.ready(function(){ ...@@ -429,7 +625,7 @@ jsPlumb.ready(function(){
}); });
}); });
$.each($(".element"), function(index){ $.each($(".element"), function() {
instanceSet.push({ instanceSet.push({
"displayId": $(this).prop("id"), "displayId": $(this).prop("id"),
"posX": Math.floor($(this).position().left), "posX": Math.floor($(this).position().left),
...@@ -447,66 +643,81 @@ jsPlumb.ready(function(){ ...@@ -447,66 +643,81 @@ jsPlumb.ready(function(){
"elements": instanceSet "elements": instanceSet
}) })
}, function(resultValue) { }, function(resultValue) {
if (window.location.href.indexOf("/create") >= 0) { if (window.location.href.indexOf(
window.location = "../" + resultValue; "/create") >= 0) {
window.location = "../" +
resultValue;
} else { } else {
addMessage("Saved successfully.", "success"); addMessage("Saved successfully.","success");
setServiceStatus("saved"); setServiceStatus("saved");
} }
}); });
}); });
/** $(window).resize(function() {
* Handling window resize event for preventing elements against overflow. $(".element").each(function() {
*/
$(window).resize(function(){
$(".element").each(function(){
if ($(this).position().left + $(this).width() > $("#dropContainer").position().left + $("#dropContainer").width()) { if ($(this).position().left + $(this).width() > $("#dropContainer").position().left + $("#dropContainer").width()) {
$(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() + 4); $(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() +4);
} }
}); });
jsPlumbInstance.repaintEverything(); jsPlumbInstance.repaintEverything();
}); });
/** scrollContainer = function(direction) {
* Handling click events on scroll buttons. dragContainerScroll += direction;
*/
$("#dragContainerScrollUp").click(function(){ if (dragContainerScroll == $(".elementTemplate").length - 2) dragContainerScroll--;
if (dragContainerScroll > 0) dragContainerScroll -= 1; if (dragContainerScroll == -1) dragContainerScroll++;
$("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
$("#dragContainer").scrollTop(
dragContainerScroll * $("#elementTemplatePanel").height()
);
};
mouseScrollContainer = function(ev) {
var e = window.event || ev;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$('body').addClass("noScroll");
scrollContainer(-delta);
$('body').removeClass("noScroll");
};
$("#dragContainerScrollUp").click(function() {
scrollContainer(-1);
}); });
$("#dragContainerScrollDown").click(function(){ $("#dragContainerScrollDown").click(function() {
if (dragContainerScroll < $(".elementTemplate").length - 3) dragContainerScroll += 1; scrollContainer(1);
$("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
}); });
var dragContainer = document.getElementById("dragContainer");
if (dragContainer.addEventListener) {
dragContainer.addEventListener("mousewheel", mouseScrollContainer, false);
dragContainer.addEventListener("DOMMouseScroll", mouseScrollContainer, false);
} else dragContainer.attachEvent("onmousewheel", mouseScrollContainer);
/** $("#searchElementTemplate").keyup(function() {
* Handling search feature. $(".elementTemplate").each(function() {
*/
$("#searchElementTemplate").keyup(function(){
$(".elementTemplate").each(function(){
$(this).parent().parent().hide(); $(this).parent().parent().hide();
if ($(this).attr("alt").toLowerCase() if ($(this).attr("alt").toLowerCase().indexOf($("#searchElementTemplateInput").val().toLowerCase()) >= 0)
.indexOf($("#searchElementTemplateInput")
.val().toLowerCase()) >= 0) {
$(this).parent().parent().show(); $(this).parent().parent().show();
}
}); });
}); });
/** $(document).ready(function() {
* Handling page load event.
*/
$(document).ready(function(){
$.post("", { $.post("", {
event: "loadService" event: "loadService"
}, function(resultValue) { }, function(resultValue) {
if(resultValue === "") return; if (resultValue === "") return;
result = jQuery.parseJSON(resultValue); result = jQuery.parseJSON(resultValue);
$("#serviceName").text(result.serviceName); $("#serviceName").text(result.serviceName);
...@@ -518,18 +729,17 @@ jsPlumb.ready(function(){ ...@@ -518,18 +729,17 @@ jsPlumb.ready(function(){
element.anchors, element.anchors,
element.parameters, element.parameters,
element.posX + "px"); element.posX + "px");
if (elementIndex < element.displayId.split('_')[0]) { if (elementIndex < element.displayId.split('_')[0])
elementIndex = element.displayId.split('_')[0]; elementIndex = element.displayId.split('_')[0];
}
elementIndex++; elementIndex++;
}); });
$.each(result.elementConnections, function(i, connection) { clickEvent = 1;
connectionObject = jsPlumbInstance.connect({ $.each(result.elementConnections,
uuids: [connection.sourceEndpoint, connection.targetEndpoint] function(i, connection) {
}); connectEndpoints([connection.sourceEndpoint, connection.targetEndpoint, connection.parameters]);
connectionObject.parameters = connection.parameters;
}); });
clickEvent = 0;
setServiceStatus("saved"); setServiceStatus("saved");
}); });
}); });
......
circle/setty/templates/setty/index.html
...@@ -10,33 +10,62 @@ ...@@ -10,33 +10,62 @@
<link type="text/css" rel="stylesheet" href="{% static 'setty/style.css' %}"> <link type="text/css" rel="stylesheet" href="{% static 'setty/style.css' %}">
<div class="row" id="workspace"> <div class="row" id="workspace">
<div class="col-xs-2" id="dragPanel"> <div class="col-md-3">
<div class="panel panel-default text-center"> <div class="panel panel-default initHidden" id="informationPanel">
<div class="panel-heading text-center">
<div class="row">
<div class="col-xs-2 text-left">
<button class="btn btn-danger btn-xs" id="closeInfoPanel">
<i class="fa fa-times"></i>
</button>
</div>
<div class="col-xs-8">
<h3 class="no-margin">{% trans 'Information' %}</h3>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<div class="panel-body" id="informationContainer">
</div>
<div class="panel-footer">
<label></label>
</div>
</div>
<div class="panel panel-default text-center" id="dragPanel">
<div class="panel-heading"> <div class="panel-heading">
<div class="row"> <div class="row">
<h3 class="no-margin">{% trans 'Elements' %}</h3> <h3 class="no-margin">{% trans 'Elements' %}</h3>
</div> </div>
</div> </div>
<div class="panel-heading"> <div class="panel-heading text-center">
<div class="row" id="searchElementTemplate"> <div class="row" id="searchElementTemplate">
<div class="col-md-12"> <div class="col-md-12">
<input type="text" class="form-control" id="searchElementTemplateInput" placeholder="{% trans 'Search' %}"/> <input type="text" class="form-control" id="searchElementTemplateInput" placeholder="{% trans 'Search' %}"/>
</div> </div>
&nbsp; &nbsp;
</div>
<div class="row">
<div class="col-md-12"> <div class="col-md-12">
<button class="btn btn-primary btn-xs btn-block" id="dragContainerScrollUp"><i class="fa fa-chevron-up"></i></button> <button class="btn btn-primary btn-xs btn-block" id="dragContainerScrollUp">
<i class="fa fa-chevron-up"></i>
</button>
</div> </div>
</div> </div>
</div> </div>
<div class="panel-body" id="dragContainer"> <div class="panel-body container-fluid" id="dragContainer">
{% for element in elementTemplateList %} {% for element in elementTemplateList %}
<div class="row" id="elementTemplatePanel"> <div class="col-md-12 col-sm-4" id="elementTemplatePanel">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<div class="row text-center">
<div class="col-xs-9 text-center">
<label class="no-margin">{{ element.name }}</label> <label class="no-margin">{{ element.name }}</label>
</div> </div>
<div class="col-xs-3 text-right">
<button class="btn btn-primary btn-xs elementTemplateInfo" element="{{ element.id }}"><i class="fa fa-info"></i></button>
</div>
</div>
</div>
<div class="panel-body"> <div class="panel-body">
<img class="elementTemplate" type="{% for target in element.compatibles.all %}{{ target.id }},{% endfor %}" <img class="elementTemplate" type="{% for target in element.compatibles.all %}{{ target.id }},{% endfor %}"
id="{{ element.id }}" desc="{{ element.description }}" id="{{ element.id }}" desc="{{ element.description }}"
...@@ -57,68 +86,34 @@ ...@@ -57,68 +86,34 @@
</div> </div>
</div> </div>
<div class="col-xs-8"> <div class="col-md-9">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading text-center"> <div class="panel-heading text-center">
<div class="row"> <div class="row">
<div class="col-xs-4"> <div class="col-xs-2">
<button class="btn btn-info btn-xs" id="undoMovement" title="{% trans 'Undo' %}"><i class="fa fa-undo"></i></button>
</div>
<div class="col-xs-2">
<button class="btn btn-info btn-xs" id="redoMovement" title="{% trans 'Redo' %}"><i class="fa fa-repeat"></i></button>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<h3 class="no-margin" id="serviceName" contenteditable="true">Service</h3> <h3 class="no-margin" id="serviceName" contenteditable="true">Service</h3>
</div> </div>
<div class="col-xs-2 text-right"> <div class="col-xs-2 text-right">
<button class="btn btn-info btn-xs" id="clearService">{% trans 'Clear' %}</button> <button class="btn btn-info btn-xs" id="clearService" title="{% trans 'Clear workspace' %}"><i class="fa fa-trash-o"></i></button>
</div> </div>
<div class="col-xs-2 text-right"> <div class="col-xs-2 text-right">
<button class="btn btn-success btn-xs" id="saveService">{% trans 'Save' %}</button> <button class="btn btn-success btn-xs" id="saveService" title="{% trans 'Save workspace' %}"><i class="fa fa-floppy-o"></i></button>
</div> </div>
</div> </div>
</div> </div>
<div class="panel-body" id="dropContainer" oncontextmenu="return false;"></div> <div class="panel-body" id="dropContainer" oncontextmenu="return false;"></div>
<div class="panel-footer"></div> <div class="panel-footer no-margin text-left">
<label class="no-margin" id="serviceStatus"></label>
</div> </div>
</div> </div>
<div class="col-xs-2" id="informationPanel">
<div class="panel panel-default no-margin">
<div class="panel-heading text-center">
<div class="row">
<h3 class="no-margin">{% trans 'Information' %}</h3>
</div>
</div>
<div class="panel-body no-margin" id="informationContainer"></div>
<div class="panel-footer"></div>
</div> </div>
</div>
</div>
<!-- Modal dialogs -->
<div class="modal fade" id="saveWarningDialog" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">{% trans 'Connection info' %}</h4>
</div>
<div class="modal-body">
<textarea id="connectionInfoParameters" class="form-control" rows="3" placeholder="Parameters" style="resize: none;"></textarea>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-2 col-md-push-8">
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="return false;">{% trans 'Return' %}</button>
</div>
<div class="col-md-2 col-md-push-8">
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="return true;">{% trans 'Close' %}</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment