mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 23:46:21 +08:00
2967 lines
91 KiB
Plaintext
2967 lines
91 KiB
Plaintext
|
|
|
|
//************************************
|
|
// CONSTANTS
|
|
//************************************
|
|
|
|
var DRAG_INVALID = 0;
|
|
var DRAG_MOUSE = 1;
|
|
var DRAG_TOUCH = 2;
|
|
|
|
// This JS code also contains some .css styling instructions.
|
|
// Those defaults are used in code where there is a "CSS_STYLE" comment.
|
|
var DEFAULT_ENDPOINT_STYLE = "Blank";
|
|
var DEFAULT_CONNECTION_HOVER_STYLE =
|
|
{
|
|
lineWidth: 5
|
|
};
|
|
var DEFAULT_CONNECTION_OVERLAY_STYLE =
|
|
[ "Arrow", {
|
|
location: 1,
|
|
id: "arrow",
|
|
length: 12,
|
|
width: 10,
|
|
foldback: 1
|
|
} ];
|
|
var DEFAULT_CONNECTION_LABEL_STYLE =
|
|
{
|
|
label: "x",
|
|
id: "label",
|
|
cssClass: "connLabel"
|
|
};
|
|
var DEFAULT_ANCHOR_STYLE = "Continuous";
|
|
var DEFAULT_CONNECTOR_STYLE =
|
|
[ "Straight", {
|
|
gap: 2
|
|
} ];
|
|
var DEFAULT_CONNECTOR_STYLE_2 =
|
|
{
|
|
strokeStyle: '<%= Constants::COLOR_WHITE %>',
|
|
lineWidth: 1.5,
|
|
outlineColor: "transparent",
|
|
outlineWidth: 0
|
|
};
|
|
|
|
// Zoom-level specific variables
|
|
//var GRID_DIST_EDIT_X = 300;
|
|
//var GRID_DIST_EDIT_Y = 140; //135
|
|
var GRID_DIST_EDIT_X = 10;
|
|
var GRID_DIST_EDIT_Y = 10;
|
|
var GRID_DIST_EDIT_STEP_X = 10;
|
|
var GRID_DIST_EDIT_STEP_Y = 10;
|
|
var EDIT_ENDPOINT_STYLE =
|
|
[ "Dot", {
|
|
radius: 4,
|
|
cssClass: "ep-normal",
|
|
hoverClass: "ep-hover"
|
|
} ];
|
|
var EDIT_CONNECTOR_STYLE_2 =
|
|
{
|
|
strokeStyle: '<%= Constants::COLOR_WHITE %>',
|
|
lineWidth: 3,
|
|
outlineColor: "transparent",
|
|
outlineWidth: 0
|
|
};
|
|
/*
|
|
var GRID_DIST_FULL_X = 340;
|
|
var GRID_DIST_FULL_Y = 201;
|
|
var GRID_DIST_MEDIUM_X = 250;
|
|
var GRID_DIST_MEDIUM_Y = 88;
|
|
var GRID_DIST_SMALL_X = 100;
|
|
var GRID_DIST_SMALL_Y = 100;
|
|
*/
|
|
/*
|
|
Migrations: multiply my_modules (x by 32, y by 16)
|
|
UPDATE my_modules SET x=x*32, y=y*16
|
|
themodel.connection.execute("UPDATE my_modules SET x=x*32, y=y*16")
|
|
*/
|
|
var GRID_DIST_FULL_X = 10;
|
|
var GRID_DIST_FULL_Y = 10;
|
|
var GRID_DIST_MEDIUM_X = 7.3;
|
|
var GRID_DIST_MEDIUM_Y = 4;
|
|
var GRID_DIST_SMALL_X = 2.4;
|
|
var GRID_DIST_SMALL_Y = 5;
|
|
var SUBMIT_FORM_NAME_SEPARATOR = "|";
|
|
|
|
//************************************
|
|
// GLOBAL VARIABLES
|
|
//************************************
|
|
|
|
// Current GUI mode
|
|
var currentMode = "full_zoom";
|
|
|
|
// JSNetworkX graph structure, used for graph analysis
|
|
var graph;
|
|
|
|
// Instance of jsPlumb, a library for canvas manipulation
|
|
var instance;
|
|
|
|
// ID "generator" for new modules
|
|
var newModuleIndex = 0;
|
|
|
|
// Global variables for module dragging
|
|
var leftInitial = 0, topInitial = 0, collided = false;
|
|
|
|
// Global variables for canvas dragging
|
|
var x_start = 0, y_start = 0;
|
|
var drag_type = DRAG_INVALID;
|
|
var draggable = null;
|
|
|
|
// Draggable position (initial values specified here)
|
|
var draggableLeft = 0.5;
|
|
var draggableTop = 0.5;
|
|
|
|
var ignoreUnsavedWorkAlert;
|
|
|
|
// Global variable for hammer js
|
|
var hammertime;
|
|
|
|
/*
|
|
* As a guideline, all module elements should contain
|
|
* the following attributes:
|
|
*
|
|
* id - ID of the module.
|
|
* data-module-name - Name of the module.
|
|
* data-module-id - ID of the module.
|
|
* data-module-group - ID of the group the module belongs to (if it exists).
|
|
* data-module-x - X position of the module (integer).
|
|
* data-module-y - Y position of the module (integer).
|
|
* data-module-conns - List of module IDs this module is connected
|
|
* to (outbound connections).
|
|
*/
|
|
|
|
//************************************
|
|
// DEFAULT INITIALIZATION CODE
|
|
//************************************
|
|
|
|
/**
|
|
* Initializes page
|
|
*/
|
|
function init() {
|
|
if($('#module-archive').length) {
|
|
bindFullZoomAjaxTabs();
|
|
bindEditTagsAjax($("div.module-large"));
|
|
} else {
|
|
bindModeChange();
|
|
bindAjax();
|
|
bindWindowResizeEvent();
|
|
initializeGraph(".diagram .module-large");
|
|
initializeFullZoom();
|
|
}
|
|
}
|
|
|
|
jsPlumb.ready(function () {
|
|
init();
|
|
});
|
|
|
|
//************************************
|
|
// INDIVIDUAL ACTION INIT & DESTROY
|
|
//************************************
|
|
|
|
function initializeEdit() {
|
|
newModuleIndex = 0;
|
|
ignoreUnsavedWorkAlert = false;
|
|
|
|
// Read permissions from the data attributes of the form
|
|
var canEditModules = _.isEqual($("#update-canvas").data("can-edit-modules"), "yes");
|
|
var canCreateModules = _.isEqual($("#update-canvas").data("can-create-modules"), "yes");
|
|
var canCloneModules = _.isEqual($("#update-canvas").data("can-clone-modules"), "yes");
|
|
var canMoveModules = _.isEqual($("#update-canvas").data("can-move-modules"), "yes");
|
|
var canDeleteModules = _.isEqual($("#update-canvas").data("can-delete-modules"), "yes");
|
|
var canDragModules = _.isEqual($("#update-canvas").data("can-reposition-modules"), "yes");
|
|
var canEditConnections = _.isEqual($("#update-canvas").data("can-edit-connections"), "yes");
|
|
|
|
$("#canvas-container").addClass("canvas-container-edit-mode");
|
|
|
|
// Hide sidebar & also its toggle button
|
|
$(".sidebar-container").addClass("collapsed");
|
|
$("#wrapper").css("paddingLeft", "0");
|
|
$(".navbar-secondary").addClass("navbar-without-sidebar");
|
|
$(".show-sidebar").addClass("invisible");
|
|
|
|
// Also, hide zoom levels button group
|
|
$("#diagram-buttons").hide();
|
|
|
|
// Resize container
|
|
resizeContainer();
|
|
|
|
positionModules(".diagram .module", GRID_DIST_EDIT_X, GRID_DIST_EDIT_Y);
|
|
initJsPlumb(
|
|
"#diagram-container",
|
|
"#diagram",
|
|
"div.module",
|
|
{
|
|
scrollEnabled: true,
|
|
gridDistX: GRID_DIST_EDIT_STEP_X,
|
|
gridDistY: GRID_DIST_EDIT_STEP_Y,
|
|
endpointStyle: EDIT_ENDPOINT_STYLE,
|
|
connectorStyle2: EDIT_CONNECTOR_STYLE_2,
|
|
zoomEnabled: true,
|
|
modulesDraggable: canDragModules,
|
|
connectionsEditable: canEditConnections
|
|
}
|
|
);
|
|
bindEditModeDropdownHandlers();
|
|
if (canCreateModules) {
|
|
bindNewModuleAction(GRID_DIST_EDIT_X, GRID_DIST_EDIT_Y);
|
|
}
|
|
bindEditFormSubmission(GRID_DIST_EDIT_X, GRID_DIST_EDIT_Y);
|
|
|
|
if (canEditModules) {
|
|
initEditModules();
|
|
$(".edit-module").on("click touchstart", editModuleHandler);
|
|
}
|
|
|
|
if (canCloneModules) {
|
|
bindCloneModuleAction(
|
|
$(".module-options a.clone-module"),
|
|
".diagram .module",
|
|
GRID_DIST_EDIT_X,
|
|
GRID_DIST_EDIT_Y);
|
|
bindCloneModuleGroupAction(
|
|
$(".module-options a.clone-module-group"),
|
|
".diagram .module",
|
|
GRID_DIST_EDIT_X,
|
|
GRID_DIST_EDIT_Y);
|
|
}
|
|
if (canMoveModules) {
|
|
initMoveModules();
|
|
$(".move-module").on("click touchstart", moveModuleHandler);
|
|
|
|
initMoveModuleGroups();
|
|
$(".move-module-group").on("click touchstart", moveModuleGroupHandler);
|
|
}
|
|
if (canDeleteModules) {
|
|
bindDeleteModuleAction();
|
|
bindDeleteModuleGroupAction();
|
|
}
|
|
|
|
bindEditModeCloseWindow();
|
|
bindTouchDropdowns($(".dropdown-toggle"));
|
|
|
|
// Restore draggable position
|
|
restoreDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
|
|
preventCanvasReloadOnSave();
|
|
$("#canvas-container").submit(function (){
|
|
animateSpinner(
|
|
this,
|
|
true,
|
|
{ color: 'white', shadow: true }
|
|
);
|
|
});
|
|
}
|
|
|
|
function destroyEdit() {
|
|
// Read permissions from the data attributes of the form
|
|
var canCreateModules = _.isEqual($("#update-canvas").data("can-create-modules"), "yes");
|
|
var canCloneModules = _.isEqual($("#update-canvas").data("can-clone-modules"), "yes");
|
|
var canMoveModules = _.isEqual($("#update-canvas").data("can-move-modules"), "yes");
|
|
var canDeleteModules = _.isEqual($("#update-canvas").data("can-delete-modules"), "yes");
|
|
|
|
instance.cleanupListeners();
|
|
$(".dropdown").off("show.bs.dropdown hide.bs.dropdown");
|
|
$("#diagram-container").off("mousewheel mousedown mouseup mousemove");
|
|
hammertime.off('pinch');
|
|
$("form#update-canvas").off("submit");
|
|
if (canDeleteModules) {
|
|
$(".delete-container a").off("click");
|
|
$("#modal-delete-module").off("show.bs.modal hide.bs.modal");
|
|
$("#modal-delete-module").find("button[data-action='confirm']").off("click");
|
|
|
|
$(".buttons-container a.delete-module").off("click touchstart");
|
|
$(".buttons-container a.delete-module-group").off("click touchstart");
|
|
$("#modal-delete-module-group").off("show.bs.modal hide.bs.modal");
|
|
$("#modal-delete-module-group").find("button[data-action='confirm']").off("click");
|
|
}
|
|
if (canCreateModules) {
|
|
$("#modal-new-module").off("show.bs.modal shown.bs.modal hide.bs.modal");
|
|
$("#modal-new-module").find("button[data-action='confirm']").off("click");
|
|
$("#canvas-new-module").draggable("destroy");
|
|
$("#canvas-new-module").off("click");
|
|
}
|
|
if (canCloneModules) {
|
|
$(".buttons-container a.clone-module").off("click touchstart");
|
|
$(".buttons-container a.clone-module-group").off("click touchstart");
|
|
}
|
|
if (canMoveModules) {
|
|
$(".move-module").off("click touchstart");
|
|
$(".move-module-group").off("click touchstart");
|
|
}
|
|
|
|
$("#update-canvas .cancel-edit-canvas").off("click");
|
|
$(window).off("beforeunload");
|
|
$(document).off("page:before-change");
|
|
$(".dropdown-toggle").off("touchstart");
|
|
|
|
// Remember the draggable position
|
|
rememberDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
}
|
|
|
|
function initializeFullZoom() {
|
|
// Resize container
|
|
resizeContainer();
|
|
|
|
positionModules(".diagram .module-large", GRID_DIST_FULL_X, GRID_DIST_FULL_Y);
|
|
initJsPlumb(
|
|
"#diagram-container",
|
|
"#diagram",
|
|
"div.module-large",
|
|
{
|
|
scrollEnabled: true,
|
|
gridDistX: GRID_DIST_FULL_X,
|
|
gridDistY: GRID_DIST_FULL_Y
|
|
});
|
|
bindEditDueDateAjax();
|
|
bindEditTagsAjax($("div.module-large"));
|
|
bindFullZoomAjaxTabs();
|
|
initModulesHover($("div.module-large"), $("#sidebar-wrapper"));
|
|
initSidebarClicks($("div.module-large"), $("#sidebar-wrapper"), $("#diagram"), $("#canvas-container"), 20);
|
|
|
|
// Restore draggable position
|
|
restoreDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
|
|
// Initialize comments
|
|
Comments.init()
|
|
|
|
$('#diagram-container').on('shown.bs.dropdown', '.dropdown-comment', function() {
|
|
var commentMenu = $(this).find('.dropdown-menu-fixed');
|
|
commentMenu.position({ top: $(this).parent().position().top });
|
|
commentMenu.offset({ top: $(this).parent().offset().top + <%= Constants::DROPDOWN_TOP_OFFSET_PX %> });
|
|
});
|
|
}
|
|
|
|
function destroyFullZoom() {
|
|
instance.cleanupListeners();
|
|
$("#diagram-container").off("mousedown mouseup mousemove");
|
|
$(".module-large .buttons-container [role=tab]").off("ajax:before ajax:success ajax:error");
|
|
$("div.module-large").off("mouseenter mouseleave");
|
|
$("div.module-large a.due-date-link").off("ajax:success ajax:error");
|
|
$("#manage-module-due-date-modal [data-action='submit']").off("click");
|
|
$("div.module-large a.edit-tags-link").off("ajax:before ajax:success");
|
|
$("li[data-module-group]").off("mouseenter mouseleave");
|
|
$("li[data-module-group] > span > a.canvas-center-on").off("click");
|
|
$("li[data-module-id]").off("mouseenter mouseleave");
|
|
$("li[data-module-id] > span > a.canvas-center-on").off("click");
|
|
|
|
// Clean up comments listeners
|
|
$(document).off("scroll");
|
|
$(".panel.module-large .tab-content")
|
|
.off("click", "[data-action=edit-comment]");
|
|
$(".panel.module-large .tab-content")
|
|
.off("click", "[data-action=delete-comment]");
|
|
|
|
// Remember the draggable position
|
|
rememberDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
}
|
|
|
|
function initializeMediumZoom() {
|
|
// Resize container
|
|
resizeContainer();
|
|
|
|
positionModules(".diagram .module-medium", GRID_DIST_MEDIUM_X, GRID_DIST_MEDIUM_Y);
|
|
initJsPlumb("#diagram-container", "#diagram", "div.module-medium", { scrollEnabled: true, gridDistX: GRID_DIST_MEDIUM_X, gridDistY: GRID_DIST_MEDIUM_Y });
|
|
bindEditTagsAjax($("div.module-medium"));
|
|
initModulesHover($("div.module-medium"), $("#sidebar-wrapper"));
|
|
initSidebarClicks($("div.module-medium"), $("#sidebar-wrapper"), $("#diagram"), $("#canvas-container"), 20);
|
|
|
|
// Restore draggable position
|
|
restoreDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
}
|
|
|
|
function destroyMediumZoom() {
|
|
instance.cleanupListeners();
|
|
$("#diagram-container").off("mousedown mouseup mousemove");
|
|
$("div.module-medium").off("mouseenter mouseleave");
|
|
$("div.module-medium a.edit-tags-link").off("ajax:before ajax:success");
|
|
$("li[data-module-group]").off("mouseenter mouseleave");
|
|
$("li[data-module-group] > span > a.canvas-center-on").off("click");
|
|
$("li[data-module-id]").off("mouseenter mouseleave");
|
|
$("li[data-module-id] > span > a.canvas-center-on").off("click");
|
|
|
|
// Remember the draggable position
|
|
rememberDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
}
|
|
|
|
function initializeSmallZoom() {
|
|
// Resize container
|
|
resizeContainer();
|
|
|
|
positionModules(".diagram .module-small", GRID_DIST_SMALL_X, GRID_DIST_SMALL_Y);
|
|
initJsPlumb("#diagram-container", "#diagram", "div.module-small", { scrollEnabled: true, gridDistX: GRID_DIST_SMALL_X, gridDistY: GRID_DIST_SMALL_Y });
|
|
initModulesHover($("div.module-small"), $("#sidebar-wrapper"));
|
|
initSidebarClicks($("div.module-small"), $("#sidebar-wrapper"), $("#diagram"), $("#canvas-container"), 20);
|
|
|
|
// Restore draggable position
|
|
restoreDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
}
|
|
|
|
function destroySmallZoom() {
|
|
instance.cleanupListeners();
|
|
$("#diagram-container").off("mousedown mouseup mousemove");
|
|
$("div.module-small").off("mouseenter mouseleave");
|
|
$("li[data-module-group]").off("mouseenter mouseleave");
|
|
$("li[data-module-group] > span > a.canvas-center-on").off("click");
|
|
$("li[data-module-id]").off("mouseenter mouseleave");
|
|
$("li[data-module-id] > span > a.canvas-center-on").off("click");
|
|
|
|
// Remember the draggable position
|
|
rememberDraggablePosition($("#diagram"), $("#canvas-container"));
|
|
}
|
|
|
|
//************************************
|
|
// FUNCTIONS
|
|
//************************************
|
|
|
|
/**
|
|
* Enable/disable canvas events (related to dragging, zooming, ...).
|
|
* @param activate - True to activate events; false
|
|
* to deactivate them.
|
|
*/
|
|
|
|
var canHammer = function(recognizer, event) {
|
|
event = event || window.event;
|
|
if (event==null) {
|
|
return false;
|
|
}
|
|
var result = (event.target instanceof HTMLInputElement && event.target.type == 'text');
|
|
return !result;
|
|
}
|
|
|
|
|
|
function toggleCanvasEvents(activate) {
|
|
var cmd = "pause";
|
|
if (activate) {
|
|
cmd = "active";
|
|
}
|
|
$("#diagram-container").eventPause(cmd,
|
|
"mousedown mouseup mouseout mousewheel touchstart touchend touchcancel touchmove");
|
|
hammertime.get('pinch').set({ enable: canHammer });
|
|
}
|
|
|
|
/**
|
|
* Gets or sets the left CSS position of the element.
|
|
* @param el - The element.
|
|
* @param newVal - The new left CSS value, if setting value.
|
|
* @return The new float value of the element's left CSS position.
|
|
*/
|
|
function elLeft(el, newVal) {
|
|
if (_.isUndefined(newVal)) {
|
|
return parseFloat($(el).css("left").replace("px", ""));
|
|
} else {
|
|
$(el).css("left", newVal + "px");
|
|
return newVal;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets or sets the top CSS position of the element.
|
|
* @param el - The element.
|
|
* @param newVal - The new top CSS value, if setting value.
|
|
* @return The new float value of the element's top CSS position.
|
|
*/
|
|
function elTop(el, newVal) {
|
|
if (_.isUndefined(newVal)) {
|
|
return parseFloat($(el).css("top").replace("px", ""));
|
|
} else {
|
|
$(el).css("top", newVal + "px");
|
|
return newVal;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Animate the reposition of the specified element.
|
|
* @param el - The element to be repositioned.
|
|
* @param left - The new left CSS property.
|
|
* @param top - The new top CSS property.
|
|
*/
|
|
function animateReposition(el, left, top) {
|
|
var leftMove, topMove, leftDir, topDir;
|
|
if (_.isUndefined($(el).css("left"))) {
|
|
leftMove = left;
|
|
} else {
|
|
leftMove = (-parseInt($(el).css("left").replace("px", ""), 10) + left);
|
|
}
|
|
if (_.isUndefined($(el).css("top"))) {
|
|
topMove = top;
|
|
} else {
|
|
topMove = (-parseInt($(el).css("top").replace("px", ""), 10) + top);
|
|
}
|
|
leftDir = leftMove >=0 ? "+=" : "-=";
|
|
topDir = topMove >=0 ? "+=" : "-=";
|
|
el.animate({
|
|
left: leftDir + Math.abs(leftMove) + "px",
|
|
top: topDir + Math.abs(topMove) + "px"
|
|
}, 300);
|
|
}
|
|
|
|
/**
|
|
* Bind the change of the canvas mode.
|
|
*/
|
|
function bindModeChange() {
|
|
var buttons = $('#diagram-buttons').find("a[type='button']");
|
|
|
|
$('.change-canvas-view').off().on('click', '.sci-toggle-item', function() {
|
|
$(this).next().click();
|
|
})
|
|
|
|
buttons.on('click', function() {
|
|
var action = $(this).data("action");
|
|
|
|
// Ignore clicks on the currently active button
|
|
if (_.isEqual(action, currentMode)) {
|
|
return false;
|
|
}
|
|
|
|
// Else, call destroy action function
|
|
switch (action) {
|
|
case "edit":
|
|
destroyEdit();
|
|
break;
|
|
case "full_zoom":
|
|
destroyFullZoom();
|
|
break;
|
|
case "medium_zoom":
|
|
destroyMediumZoom();
|
|
break;
|
|
case "small_zoom":
|
|
destroySmallZoom();
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
function bindTouchDropdowns(selector) {
|
|
selector.on("touchstart", function(event) {
|
|
event.stopPropagation();
|
|
});
|
|
}
|
|
|
|
function bindEditModeCloseWindow() {
|
|
var alertText = $("#update-canvas").attr("data-unsaved-work-text");
|
|
|
|
$("#update-canvas .cancel-edit-canvas").click(function(ev) {
|
|
ignoreUnsavedWorkAlert = true;
|
|
});
|
|
$(window).on("beforeunload", function(ev) {
|
|
if (ignoreUnsavedWorkAlert) {
|
|
// Remove unload listeners
|
|
$(window).off("beforeunload");
|
|
$(document).off("page:before-change");
|
|
|
|
ev.returnValue = undefined;
|
|
return undefined;
|
|
} else {
|
|
return alertText;
|
|
}
|
|
});
|
|
$(document).on("page:before-change", function(ev) {
|
|
var exit;
|
|
if (ignoreUnsavedWorkAlert) {
|
|
exit = true;
|
|
} else {
|
|
exit = confirm(alertText);
|
|
}
|
|
|
|
if (exit) {
|
|
// Remove unload listeners
|
|
$(window).off("beforeunload");
|
|
$(document).off("page:before-change");
|
|
}
|
|
|
|
return exit;
|
|
});
|
|
}
|
|
|
|
function bindEditModeDropdownHandlers(node) {
|
|
// When "module clone/delete" dropdowns are opened,
|
|
// module needs to increase z-index in order for the dropdown
|
|
// menu to be above connections etc.
|
|
$(".dropdown", node).on("show.bs.dropdown", function(event) {
|
|
$(this).parents(".module").css("z-index", "30");
|
|
});
|
|
$(".dropdown", node).on("hide.bs.dropdown", function(event) {
|
|
$(this).parents(".module").css("z-index", "20");
|
|
});
|
|
}
|
|
|
|
function resizeContainer() {
|
|
// Resize diagram container
|
|
var cont = $("#diagram-container");
|
|
|
|
if (cont.length > 0) {
|
|
cont.css(
|
|
"height",
|
|
($(window).height() - cont.offset().top - 15) + "px"
|
|
);
|
|
}
|
|
}
|
|
|
|
function bindWindowResizeEvent() {
|
|
$(window).resize(function() {
|
|
resizeContainer();
|
|
});
|
|
}
|
|
|
|
function bindFullZoomAjaxTabs() {
|
|
var manageUsersModal = null;
|
|
var manageUsersModalBody = null;
|
|
|
|
// Initialize users editing modal remote loading.
|
|
function initUsersEditLink($el) {
|
|
$el.find(".manage-users-link")
|
|
.on("ajax:before", function () {
|
|
var moduleId = $(this).closest(".panel-default").attr("data-module-id");
|
|
manageUsersModal.attr("data-module-id", moduleId);
|
|
manageUsersModal.modal('show');
|
|
})
|
|
.on("ajax:success", function (e, data) {
|
|
$("#manage-module-users-modal-module").text(data.my_module.name);
|
|
initUsersModalBody(data);
|
|
});
|
|
}
|
|
|
|
// Initialize reloading manage user modal content after posting new
|
|
// user.
|
|
function initAddUserForm() {
|
|
manageUsersModalBody.find(".add-user-form")
|
|
.on("ajax:success", function (e, data) {
|
|
initUsersModalBody(data);
|
|
});
|
|
}
|
|
|
|
// Initialize remove user from my_module links.
|
|
function initRemoveUserLinks() {
|
|
manageUsersModalBody.find(".remove-user-link")
|
|
.on("ajax:success", function (e, data) {
|
|
initUsersModalBody(data);
|
|
});
|
|
}
|
|
|
|
// Initialize ajax listeners and elements style on modal body. This
|
|
// function must be called when modal body is changed.
|
|
function initUsersModalBody(data) {
|
|
manageUsersModalBody.html(data.html);
|
|
manageUsersModalBody.find(".selectpicker").selectpicker();
|
|
initAddUserForm();
|
|
initRemoveUserLinks();
|
|
}
|
|
|
|
manageUsersModal = $("#manage-module-users-modal");
|
|
manageUsersModalBody = manageUsersModal.find(".modal-body");
|
|
|
|
// Reload users tab HTML element when modal is closed
|
|
manageUsersModal.on("hide.bs.modal", function () {
|
|
var moduleEl = $("div[data-module-id='" +
|
|
$(this).attr("data-module-id") + "']");
|
|
// Load HTML to refresh users list
|
|
$.ajax({
|
|
url: moduleEl.attr("data-module-users-tab-url"),
|
|
type: "GET",
|
|
dataType: "json",
|
|
success: function (data) {
|
|
moduleEl.find("#" + moduleEl.attr("data-module-id") + "_users").html(data.html);
|
|
CounterBadge.updateCounterBadge(data.counter,
|
|
data.my_module_id, 'users');
|
|
initUsersEditLink(moduleEl);
|
|
},
|
|
error: function (data) {
|
|
// TODO
|
|
}
|
|
});
|
|
});
|
|
|
|
// Remove users modal content when modal window is closed.
|
|
manageUsersModal.on("hidden.bs.modal", function () {
|
|
manageUsersModalBody.html("");
|
|
});
|
|
|
|
// initialize my_module tab remote loading
|
|
var elements = $(".module-large .buttons-container [role=tab]");
|
|
elements.on("ajax:before", function (e) {
|
|
var $this = $(this);
|
|
var parentNode = $this.parents("li");
|
|
var targetId = $this.attr("aria-controls");
|
|
|
|
if (parentNode.hasClass("active")) {
|
|
parentNode.removeClass("active");
|
|
$("#" + targetId).removeClass("active");
|
|
$this.parents(".module-large").addClass("expanded");
|
|
return false;
|
|
}
|
|
})
|
|
.on("ajax:success", function (e, data, status, xhr) {
|
|
|
|
// Hide all potentially shown tabs
|
|
elements.parents("li").removeClass("active");
|
|
$(".tab-content").children().removeClass("active");
|
|
$(".module-large").removeClass("expanded");
|
|
|
|
var $this = $(this);
|
|
var targetId = $this.attr("aria-controls");
|
|
var target = $("#" + targetId);
|
|
var targetContents = target.attr("data-contents");
|
|
var parentNode = $this.parents("ul").parent();
|
|
|
|
target.html(data.html);
|
|
if (targetContents === "info") {
|
|
initEditDescription(parentNode);
|
|
} else if (targetContents === "users") {
|
|
initUsersEditLink(parentNode);
|
|
} else if (targetContents === "comments") {
|
|
|
|
}
|
|
|
|
$this.parents("ul").parent().find(".active").removeClass("active");
|
|
$this.parents("li").addClass("active");
|
|
target.addClass("active");
|
|
$this.parents(".module-large").addClass("expanded");
|
|
|
|
// Add class to bring it in front on archived tasks page (hover other cards when open comments/users)
|
|
$this.parents('#module-archive').find('.module-container').removeClass('active-card');
|
|
$this.parents('.module-container').addClass('active-card');
|
|
|
|
// Call scrollBotton after the comments are displayed
|
|
// so that the scrollHight can be calculated
|
|
if ( targetContents === 'comments' ) {
|
|
Comments.init('simple')
|
|
}
|
|
})
|
|
.on("ajax:error", function (e, xhr, status, error) {
|
|
// TODO
|
|
});
|
|
}
|
|
|
|
function bindEditDueDateAjax() {
|
|
var editDueDateModal = null;
|
|
var editDueDateModalBody = null;
|
|
var editDueDateModalTitle = null;
|
|
var editDueDateModalSubmitBtn = null;
|
|
|
|
editDueDateModal = $("#manage-module-due-date-modal");
|
|
editDueDateModalBody = editDueDateModal.find(".modal-body");
|
|
editDueDateModalTitle = editDueDateModal.find("#manage-module-due-date-modal-label");
|
|
editDueDateModalSubmitBtn = editDueDateModal.find("[data-action='submit']");
|
|
|
|
$("div.module-large .panel-body .due-date-link")
|
|
.on("ajax:success", function(ev, data, status) {
|
|
var dueDateLink = $(this);
|
|
if (!dueDateLink.hasClass("due-date-refresh")) {
|
|
dueDateLink = dueDateLink.parent().next().find(".due-date-refresh");
|
|
}
|
|
var moduleEl = dueDateLink.closest("div.module-large");
|
|
|
|
// Load contents
|
|
editDueDateModalBody.html(data.html);
|
|
editDueDateModalTitle.text(data.title);
|
|
|
|
// Add listener to form inside modal
|
|
editDueDateModalBody.find("form")
|
|
.on("ajax:success", function(ev2, data2, status2) {
|
|
// Update module's due date
|
|
dueDateLink.html(data2.card_due_date_label);
|
|
|
|
// Update module's classes if needed
|
|
moduleEl
|
|
.removeClass("alert-red")
|
|
.removeClass("alert-yellow");
|
|
_.each(data2.alerts, function(alert) {
|
|
moduleEl.addClass(alert);
|
|
});
|
|
|
|
// Close modal
|
|
editDueDateModal.modal("hide");
|
|
})
|
|
.on("ajax:error", function(ev2, data2, status2) {
|
|
// Display errors if needed
|
|
$(this).renderFormErrors("my_module", data2.responseJSON);
|
|
});
|
|
|
|
// Disable canvas dragging events
|
|
toggleCanvasEvents(false);
|
|
|
|
// Open modal
|
|
editDueDateModal.modal("show");
|
|
})
|
|
.on("ajax:error", function(ev, data, status) {
|
|
// TODO
|
|
});
|
|
|
|
editDueDateModalSubmitBtn.on("click", function() {
|
|
// Submit the form inside the modal
|
|
editDueDateModalBody.find("form").submit();
|
|
});
|
|
|
|
editDueDateModal.on("hidden.bs.modal", function() {
|
|
editDueDateModalBody.find("form").off("ajax:success ajax:error");
|
|
editDueDateModalBody.html("");
|
|
|
|
// Re-activate canvas dragging events
|
|
toggleCanvasEvents(true);
|
|
});
|
|
}
|
|
|
|
function bindEditTagsAjax(elements) {
|
|
var manageTagsModal = null;
|
|
var manageTagsModalBody = null;
|
|
|
|
// Initialize reloading of manage tags modal content after posting new
|
|
// tag.
|
|
function initAddTagForm() {
|
|
manageTagsModalBody.find(".add-tag-form")
|
|
.submit(function() {
|
|
var selectOptions = manageTagsModalBody.find('#new_my_module_tag .dropdown-menu li').length;
|
|
if (selectOptions === 0 && this.id == 'new_my_module_tag') return false;
|
|
return true;
|
|
})
|
|
.on("ajax:success", function (e, data) {
|
|
initTagsModalBody(data);
|
|
});
|
|
}
|
|
|
|
// Initialize edit tag & remove tag functionality from my_module links.
|
|
function initTagRowLinks() {
|
|
manageTagsModalBody.find(".edit-tag-link")
|
|
.on("click", function (e) {
|
|
var $this = $(this);
|
|
var li = $this.parents("li.list-group-item");
|
|
var editDiv = $(li.find("div.tag-edit"));
|
|
|
|
// Revert all rows to their original states
|
|
manageTagsModalBody.find("li.list-group-item").each(function(){
|
|
var li = $(this);
|
|
li.css("background-color", li.data("color"));
|
|
li.find(".edit-tag-form").clearFormErrors();
|
|
li.find("input[type=text]").val(li.data("name"));
|
|
});
|
|
|
|
// Hide all other edit divs, show all show divs
|
|
manageTagsModalBody.find("div.tag-edit").hide();
|
|
manageTagsModalBody.find("div.tag-show").show();
|
|
|
|
editDiv.find("input[type=text]").val(li.data("name"));
|
|
editDiv.find('.edit-tag-color').colorselector('setColor', li.data("color"));
|
|
|
|
li.find("div.tag-show").hide();
|
|
editDiv.show();
|
|
});
|
|
manageTagsModalBody.find("div.tag-edit .dropdown-colorselector > .dropdown-menu li a")
|
|
.on("click", function (e) {
|
|
// Change background of the <li>
|
|
var $this = $(this);
|
|
var li = $this.parents("li.list-group-item");
|
|
li.css("background-color", $this.data("value"));
|
|
});
|
|
manageTagsModalBody.find(".remove-tag-link")
|
|
.on("ajax:success", function (e, data) {
|
|
initTagsModalBody(data);
|
|
});
|
|
manageTagsModalBody.find(".delete-tag-form")
|
|
.on("ajax:success", function (e, data) {
|
|
initTagsModalBody(data);
|
|
});
|
|
manageTagsModalBody.find(".edit-tag-form")
|
|
.on("ajax:success", function (e, data) {
|
|
if (data.my_module) initTagsModalBody(data);
|
|
})
|
|
.on("ajax:error", function (e, data) {
|
|
$(this).renderFormErrors("tag", data.responseJSON);
|
|
});
|
|
manageTagsModalBody.find(".cancel-tag-link")
|
|
.on("click", function (e, data) {
|
|
var $this = $(this);
|
|
var li = $this.parents("li.list-group-item");
|
|
|
|
li.css("background-color", li.data("color"));
|
|
li.find(".edit-tag-form").clearFormErrors();
|
|
|
|
li.find("div.tag-edit").hide();
|
|
li.find("div.tag-show").show();
|
|
});
|
|
}
|
|
|
|
// Initialize ajax listeners and elements style on modal body. This
|
|
// function must be called when modal body is changed.
|
|
function initTagsModalBody(data) {
|
|
manageTagsModal.data('module-id', data.my_module.id)
|
|
manageTagsModalBody.html(data.html);
|
|
manageTagsModalBody.find(".selectpicker").selectpicker();
|
|
initAddTagForm();
|
|
initTagRowLinks();
|
|
}
|
|
|
|
manageTagsModal = $("#manage-module-tags-modal");
|
|
manageTagsModalBody = manageTagsModal.find(".modal-body");
|
|
|
|
// Reload tags HTML element when modal is closed
|
|
manageTagsModal.off().on("hide.bs.modal", function(){
|
|
var task = $("div.panel[data-module-id='" +
|
|
manageTagsModal.data('module-id') + "']");
|
|
|
|
// Load HTML
|
|
$.ajax({
|
|
url: $('#canvas-container').attr('data-module-tags-url'),
|
|
type: "GET",
|
|
dataType: "json",
|
|
success: function(data) {
|
|
$.each(data.my_modules, function(index, my_module){
|
|
$('div.panel[data-module-id=' + my_module.id + ']')
|
|
.find(".edit-tags-link")
|
|
.html(my_module.tags_html);
|
|
});
|
|
},
|
|
error: function(data){
|
|
// TODO
|
|
}
|
|
});
|
|
});
|
|
|
|
// Remove modal content when modal window is closed.
|
|
manageTagsModal.on("hidden.bs.modal", function () {
|
|
manageTagsModalBody.html("");
|
|
});
|
|
|
|
// initialize my_module tab remote loading
|
|
$(elements).find("a.edit-tags-link")
|
|
.on("ajax:before", function () {
|
|
var moduleId = $(this).closest(".panel-default").attr("data-module-id");
|
|
manageTagsModal.attr("data-module-id", moduleId);
|
|
manageTagsModal.modal('show');
|
|
})
|
|
.on("ajax:success", function (e, data) {
|
|
$("#manage-module-tags-modal-module").text(data.my_module.name);
|
|
initTagsModalBody(data);
|
|
})
|
|
.on('click', function(){
|
|
$(this).addClass('updated-module-tags');
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Bind change of GUI buttons to Ajax success callback.
|
|
*/
|
|
function bindAjax() {
|
|
$('#diagram-buttons .ajax').on('ajax:success', function(evt, data) {
|
|
// Set toggled button state
|
|
$("#diagram-buttons a").removeClass("active");
|
|
$("#diagram-buttons a").removeAttr("aria-pressed");
|
|
$("#diagram-buttons a").removeData("toggle");
|
|
$(evt.target).addClass("active");
|
|
$(evt.target).attr("aria-pressed", true);
|
|
$(evt.target).data("toggle", "button");
|
|
|
|
// Fill contents of container with AJAX content
|
|
var target = $('#canvas-container');
|
|
$(target).html(data);
|
|
|
|
// Re-run canvas GUI initialization code
|
|
var action = $(evt.target).data("action");
|
|
switch (action) {
|
|
case "edit":
|
|
initializeEdit();
|
|
break;
|
|
case "full_zoom":
|
|
initializeFullZoom();
|
|
break;
|
|
case "medium_zoom":
|
|
initializeMediumZoom();
|
|
break;
|
|
case "small_zoom":
|
|
initializeSmallZoom();
|
|
break;
|
|
}
|
|
|
|
currentMode = action;
|
|
});
|
|
$('#diagram-buttons .ajax').on('ajax:error', function(evt, data) {
|
|
// Redirect to provided URL
|
|
var json = $.parseJSON(data.responseText);
|
|
$(location).attr('href', json.redirect_url);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Add a new node to the graph.
|
|
* @param moduleId - The ID of the module to add.
|
|
* @param module - The module jQuery element.
|
|
*/
|
|
function addNode(moduleId, module) {
|
|
var connsAttr = module.attr("data-module-conns");
|
|
var conns = _.isUndefined(connsAttr) ? [] : connsAttr.split(", ");
|
|
graph.addNode(
|
|
moduleId,
|
|
{
|
|
name: module.data["module-name"],
|
|
x: module.data["module-x"],
|
|
y: module.data["module-y"],
|
|
conns: conns
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Initialize the global graph variable from modules.
|
|
* @param modulesSel - The jQuery selector text of module elements.
|
|
*/
|
|
function initializeGraph(modulesSel) {
|
|
var modules = $(modulesSel);
|
|
|
|
graph = new jsnx.DiGraph();
|
|
|
|
var module, moduleId;
|
|
_.each(modules, function(m) {
|
|
module = $(m);
|
|
moduleId = module.attr("data-module-id");
|
|
if (!graph.hasNode(moduleId)) {
|
|
addNode(moduleId, module);
|
|
}
|
|
var outs = module.attr("data-module-conns").split(", ");
|
|
_.each(outs, function(targetId) {
|
|
if (targetId === "") {
|
|
return;
|
|
}
|
|
if (!graph.hasNode(targetId)) {
|
|
addNode(targetId, $(".diagram .module[data-module-id=" + targetId + "]"));
|
|
}
|
|
|
|
graph.addEdge(module.attr("data-module-id"), targetId);
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get the connected components of a specified graph and module. Alas, this
|
|
* function doesn't exist in jsnetworkx.
|
|
* @param graph - The graph instance.
|
|
* @param moduleId - We're only interested in the connected component in which
|
|
* the specified module is located.
|
|
* @return A list of node IDs representing a connected component.
|
|
*/
|
|
function connectedComponents(graph, moduleId) {
|
|
function getNeighbors(graph, node, visited) {
|
|
visited.push(node);
|
|
var neighbours = _.union(graph.predecessors(node), graph.successors(node));
|
|
var unvisitedNeighbors = _.filter(neighbours, function(n) {
|
|
return !_.contains(visited, n);
|
|
});
|
|
var result = _.flatten(_.map(unvisitedNeighbors, function(neighbour) {
|
|
nodes = getNeighbors(graph, neighbour, visited);
|
|
_.each(nodes, function(n) {
|
|
if (!_.contains(visited, n)) {
|
|
visited.push(n);
|
|
}
|
|
});
|
|
return nodes;
|
|
}));
|
|
result.push(node);
|
|
return result;
|
|
}
|
|
|
|
return _.uniq(getNeighbors(graph, moduleId, []));
|
|
}
|
|
|
|
/**
|
|
* Create a virtual new module (without links & functionality).
|
|
* @param event - The event, can be null.
|
|
*/
|
|
function createVirtualModule(event) {
|
|
// Generate new module div
|
|
var newModule = document.createElement("div");
|
|
$(newModule)
|
|
.addClass("panel panel-default module new")
|
|
.css("z-index", "900")
|
|
.attr("data-module-name", "")
|
|
.attr("data-module-group-name","")
|
|
.attr("data-module-x", "")
|
|
.attr("data-module-y", "")
|
|
.attr("data-module-conns", "")
|
|
.appendTo(draggable);
|
|
|
|
var panelHeading = document.createElement("div");
|
|
$(panelHeading)
|
|
.addClass("panel-heading")
|
|
.appendTo($(newModule));
|
|
|
|
var panelTitle = document.createElement("div");
|
|
$(panelTitle)
|
|
.addClass("panel-title")
|
|
.html("")
|
|
.appendTo($(panelHeading));
|
|
|
|
if (_.isEqual($("#update-canvas").data("can-edit-connections"), "yes")) {
|
|
var panelBody = document.createElement("div");
|
|
$(panelBody)
|
|
.addClass("panel-body ep")
|
|
.appendTo($(newModule));
|
|
}
|
|
|
|
var overlayContainer = document.createElement("div");
|
|
$(overlayContainer)
|
|
.addClass("overlay")
|
|
.appendTo($(newModule));
|
|
|
|
return $(newModule);
|
|
}
|
|
|
|
/**
|
|
* Update a previously created virtual module with HTML elements.
|
|
* @param module - The jQuery module selector.
|
|
* @param id - The new module id.
|
|
* @param name - The module name.
|
|
* @param gridDistX - The grid distance in X direction.
|
|
* @param gridDistY - The grid distance in Y direction.
|
|
* @return The updated module.
|
|
*/
|
|
function updateModuleHtml(module, id, name, gridDistX, gridDistY) {
|
|
// Update some stuff inside the module
|
|
module
|
|
.attr("id", id)
|
|
.attr("data-module-id", id)
|
|
.attr("data-module-name", name)
|
|
.css("z-index", 20);
|
|
|
|
var panelHeading = module.find(".panel-heading");
|
|
|
|
module.find(".panel-title").html(name);
|
|
|
|
module.find(".ep").html($("#drag-connections-placeholder").text().trim());
|
|
|
|
// Add dropdown
|
|
var dropdown = document.createElement("div");
|
|
$(dropdown)
|
|
.addClass("dropdown pull-right module-options")
|
|
.appendTo($(panelHeading));
|
|
|
|
var dropdownToggle = document.createElement("a");
|
|
$(dropdownToggle)
|
|
.addClass("dropdown-toggle")
|
|
.attr("id", id + "_options")
|
|
.attr("data-toggle", "dropdown")
|
|
.attr("aria-haspopup", "true")
|
|
.attr("aria-expanded", "true")
|
|
.appendTo(dropdown);
|
|
|
|
var toggleIcon = document.createElement("span");
|
|
$(toggleIcon)
|
|
.addClass("fas")
|
|
.addClass("fa-caret-down")
|
|
.attr("aria-hidden", "true")
|
|
.appendTo(dropdownToggle);
|
|
|
|
var dropdownMenu = document.createElement("ul");
|
|
$(dropdownMenu)
|
|
.addClass("dropdown-menu")
|
|
.addClass("custom-dropdown-menu")
|
|
.addClass("no-scale")
|
|
.attr("aria-labelledby", id + "_options")
|
|
.appendTo(dropdown);
|
|
|
|
var dropdownMenuHeader = document.createElement("li");
|
|
$(dropdownMenuHeader)
|
|
.addClass("dropdown-header")
|
|
.html($("#dropdown-header-placeholder").text().trim())
|
|
.appendTo(dropdownMenu);
|
|
|
|
// Add edit links if neccesary
|
|
if (_.isEqual($("#update-canvas").data("can-edit-modules"), "yes")) {
|
|
var editModuleItem = document.createElement("li");
|
|
$(editModuleItem).appendTo(dropdownMenu);
|
|
|
|
var editModuleLink = document.createElement("a");
|
|
$(editModuleLink)
|
|
.attr("href", "")
|
|
.attr("data-module-id", id)
|
|
.addClass("edit-module")
|
|
.html($("#edit-link-placeholder").text().trim())
|
|
.appendTo(editModuleItem);
|
|
|
|
// Add click handler for the edit module
|
|
$(editModuleLink).on("click touchstart", editModuleHandler);
|
|
}
|
|
|
|
// Add clone links if neccesary
|
|
if (_.isEqual($("#update-canvas").data("can-clone-modules"), "yes")) {
|
|
var cloneModuleItem = document.createElement("li");
|
|
$(cloneModuleItem).appendTo(dropdownMenu);
|
|
|
|
var cloneModuleLink = document.createElement("a");
|
|
$(cloneModuleLink)
|
|
.attr("href", "")
|
|
.attr("data-module-id", id)
|
|
.addClass("clone-module")
|
|
.html($("#clone-link-placeholder").text().trim())
|
|
.appendTo(cloneModuleItem);
|
|
|
|
// Add clone click handler for the new module
|
|
bindCloneModuleAction($(cloneModuleLink), ".diagram .module", gridDistX, gridDistY);
|
|
|
|
var cloneModuleGroupItem = document.createElement("li");
|
|
$(cloneModuleGroupItem).appendTo(dropdownMenu);
|
|
$(cloneModuleGroupItem).hide();
|
|
|
|
var cloneModuleGroupLink = document.createElement("a");
|
|
$(cloneModuleGroupLink)
|
|
.attr("href", "")
|
|
.attr("data-module-id", id)
|
|
.addClass("clone-module-group")
|
|
.html($("#clone-group-link-placeholder").text().trim())
|
|
.appendTo(cloneModuleGroupItem);
|
|
|
|
// Add clone click handler for the new module
|
|
bindCloneModuleGroupAction($(cloneModuleGroupLink), ".diagram .module", gridDistX, gridDistY);
|
|
|
|
bindEditModeDropdownHandlers(module);
|
|
}
|
|
|
|
// Add move links if neccesary
|
|
if (_.isEqual($("#update-canvas").data("can-move-modules"), "yes")) {
|
|
var moveModuleItem = document.createElement("li");
|
|
$(moveModuleItem).appendTo(dropdownMenu);
|
|
|
|
var moveModuleLink = document.createElement("a");
|
|
$(moveModuleLink)
|
|
.attr("href", "")
|
|
.attr("data-module-id", id)
|
|
.addClass("move-module")
|
|
.html($("#move-link-placeholder").text().trim())
|
|
.appendTo(moveModuleItem);
|
|
|
|
// Add clone click handler for the new module
|
|
$(moveModuleLink).on("click touchstart", moveModuleHandler);
|
|
|
|
// Add buttons for module groups
|
|
var moveModuleGroupItem = document.createElement("li");
|
|
$(moveModuleGroupItem).appendTo(dropdownMenu);
|
|
$(moveModuleGroupItem).hide();
|
|
|
|
var moveModuleGroupLink = document.createElement("a");
|
|
$(moveModuleGroupLink)
|
|
.attr("href", "")
|
|
.attr("data-module-id", id)
|
|
.addClass("move-module-group")
|
|
.html($("#move-group-link-placeholder").text().trim())
|
|
.appendTo(moveModuleGroupItem);
|
|
|
|
$(moveModuleGroupLink).on("click touchstart", moveModuleGroupHandler);
|
|
}
|
|
|
|
// Add delete links if neccesary
|
|
if (_.isEqual($("#update-canvas").data("can-delete-modules"), "yes")) {
|
|
var deleteModuleItem = document.createElement("li");
|
|
$(deleteModuleItem).appendTo(dropdownMenu);
|
|
|
|
var deleteModuleLink = document.createElement("a");
|
|
$(deleteModuleLink)
|
|
.attr("href", "")
|
|
.attr("data-module-id", id)
|
|
.addClass("delete-module")
|
|
.html($("#delete-link-placeholder").text().trim())
|
|
.appendTo(deleteModuleItem);
|
|
|
|
// Add delete click handler for the new module
|
|
$(deleteModuleLink).on("click touchstart", deleteModuleHandler);
|
|
|
|
var deleteModuleGroupItem = document.createElement("li");
|
|
$(deleteModuleGroupItem).appendTo(dropdownMenu);
|
|
$(deleteModuleGroupItem).hide();
|
|
|
|
var deleteModuleGroupLink = document.createElement("a");
|
|
$(deleteModuleGroupLink)
|
|
.attr("href", "")
|
|
.attr("data-module-id", id)
|
|
.addClass("delete-module-group")
|
|
.html($("#delete-group-link-placeholder").text().trim())
|
|
.appendTo(deleteModuleGroupItem);
|
|
|
|
// Add delete click handler for the new module
|
|
$(deleteModuleGroupLink).on("click touchstart", deleteModuleGroupHandler);
|
|
}
|
|
|
|
// Set it up for jsPlumb, depending on permissions
|
|
if (_.isEqual($("#update-canvas").data("can-reposition-modules"), "yes")) {
|
|
addDraggablesToInstance(module, gridDistX, gridDistY);
|
|
}
|
|
|
|
if (_.isEqual($("#update-canvas").data("can-edit-connections"), "yes")) {
|
|
setElementsAsDropTargets(module);
|
|
setElementsAsDragSources(module, null, null, EDIT_CONNECTOR_STYLE_2);
|
|
}
|
|
|
|
|
|
// Add dropdown touch support
|
|
bindTouchDropdowns($(dropdownToggle));
|
|
|
|
// Re-zoom dropdown menu, so the new module's no-scale dropdown gets
|
|
// rescaled
|
|
$(dropdownMenu).css("transform", "scale(" + (1.0 / instance.getZoom()) + ")");
|
|
$(dropdownMenu).css("transform-origin", "0 0");
|
|
|
|
// Add IDs to the form
|
|
var formAddInput = $('#update-canvas form input#add');
|
|
var formAddNameInput = $('#update-canvas form input#add-names');
|
|
var inputVal = formAddInput.attr("value");
|
|
var inputNameVal = formAddNameInput.attr("value");
|
|
if (_.isUndefined(inputVal) || inputVal === "") {
|
|
formAddInput.attr("value", id);
|
|
formAddNameInput.attr("value", name);
|
|
} else {
|
|
formAddInput.attr("value", inputVal + "," + id);
|
|
formAddNameInput.attr("value", inputNameVal + SUBMIT_FORM_NAME_SEPARATOR + name);
|
|
}
|
|
|
|
return module;
|
|
}
|
|
|
|
/**
|
|
* Bind the new module button action.
|
|
* @param gridDistX - The canvas grid distance in X direction.
|
|
* @param gridDistY - The canvas grid distance in Y direction.
|
|
*/
|
|
function bindNewModuleAction(gridDistX, gridDistY) {
|
|
function handleDragStart(event, ui) {
|
|
collided = false;
|
|
}
|
|
|
|
function handleDrag(event, ui) {
|
|
// Custom grid implementation is needed
|
|
// (so the new module snaps on the same grid offset
|
|
// as the other modules)
|
|
var l = ui.position.left;
|
|
var t = ui.position.top;
|
|
var gdx = gridDistX;
|
|
var gdy = gridDistY;
|
|
var z = instance.getZoom();
|
|
|
|
ui.position.left = Math.floor(l / (gdx * z)) * gdx;
|
|
ui.position.top = Math.floor(t / (gdy * z)) * gdy;
|
|
|
|
// Check if collision occured
|
|
var modules = $(".module");
|
|
var module;
|
|
for (var i = 0; i < modules.length; i++) {
|
|
module = $(modules[i]);
|
|
if (module.hasClass("new")) {
|
|
continue;
|
|
}
|
|
|
|
if (_.isEqual(ui.helper.position(), module.position())) {
|
|
// Collision!
|
|
collided = true;
|
|
break;
|
|
} else {
|
|
collided = false;
|
|
}
|
|
}
|
|
|
|
if (collided) {
|
|
ui.helper.addClass("collided");
|
|
} else {
|
|
ui.helper.removeClass("collided");
|
|
}
|
|
}
|
|
|
|
function handleDragStop(event, ui) {
|
|
if (!collided) {
|
|
// Disable scroll on canvas temporarily, as it can be
|
|
// dragged from modal area
|
|
toggleCanvasEvents(false);
|
|
|
|
// Copy the ui.helper, since it's gonna vanish soon!
|
|
var clone = ui.helper.clone(true, true);
|
|
clone.appendTo(draggable);
|
|
clone.css("z-index", "20");
|
|
|
|
// Open modal window
|
|
$("#modal-new-module").modal({
|
|
"backdrop": "static"
|
|
});
|
|
}
|
|
|
|
collided = false;
|
|
}
|
|
|
|
function handleNewNameConfirm(ev) {
|
|
var input = $("#new-module-name-input");
|
|
// Validate module name
|
|
var moduleNameValid = textValidator(ev, input,
|
|
<%= Constants::NAME_MIN_LENGTH %>, <%= Constants::NAME_MAX_LENGTH %>,
|
|
true);
|
|
if (moduleNameValid) {
|
|
// Set the "clicked" property to true
|
|
modal.data("submit", "true");
|
|
}
|
|
return moduleNameValid;
|
|
}
|
|
|
|
var newModuleBtn = $("#canvas-new-module");
|
|
var modal = $("#modal-new-module");
|
|
|
|
newModuleBtn.draggable({
|
|
cursor: "move",
|
|
helper: createVirtualModule,
|
|
start: handleDragStart,
|
|
drag: handleDrag,
|
|
stop: handleDragStop
|
|
});
|
|
|
|
// Prevent "new module" button from submitting form
|
|
newModuleBtn.click(function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
});
|
|
|
|
// Bind the confirm button on modal
|
|
modal.find("button[data-action='confirm']").on("click", function(ev) {
|
|
handleNewNameConfirm(ev);
|
|
});
|
|
|
|
// Also, bind on modal window open & close
|
|
modal.on("show.bs.modal", function(ev) {
|
|
// Clear input
|
|
$(this).removeData("submit");
|
|
$(this).find("#new-module-name-input").val("");
|
|
|
|
// Remove potential error classes from form
|
|
$(this).find("#new-module-name-input").parent().removeClass("has-error");
|
|
$(this).find("span.help-block").remove();
|
|
|
|
// Bind onto input keypress (to prevent form from being submitted)
|
|
$(this).find("#new-module-name-input").keydown(function(ev) {
|
|
if (ev.keyCode == 13) {
|
|
if (handleNewNameConfirm(ev)) {
|
|
// Close modal
|
|
modal.modal("hide");
|
|
}
|
|
|
|
// In any case, prevent form submission
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
|
|
modal.on("shown.bs.modal", function(event) {
|
|
// Focus the text element
|
|
$(this).find("#new-module-name-input").focus();
|
|
});
|
|
|
|
modal.on("hide.bs.modal", function (event) {
|
|
var newModule = $(".module.new");
|
|
|
|
$(this).find("#new-module-name-input").off("keydown");
|
|
|
|
if (_.isEqual($(event.target).data("submit"), "true")) {
|
|
// If modal was successfully submitted, generate the module
|
|
var id = "n" + newModuleIndex++;
|
|
graph.addNode(id);
|
|
var name = $(this).find("#new-module-name-input").val();
|
|
updateModuleHtml(newModule, id, name, gridDistX, gridDistY);
|
|
newModule.removeClass("new");
|
|
} else {
|
|
// Else, remove the element
|
|
newModule.remove();
|
|
}
|
|
|
|
// In any case, enable scrolling on edit screen again
|
|
toggleCanvasEvents(true);
|
|
});
|
|
}
|
|
|
|
function initEditModules() {
|
|
|
|
function handleRenameConfirm(modal, ev) {
|
|
var input = modal.find("#edit-module-name-input");
|
|
// Validate module name
|
|
var moduleNameValid = textValidator(ev, input,
|
|
<%= Constants::NAME_MIN_LENGTH %>, <%= Constants::NAME_MAX_LENGTH %>,
|
|
true);
|
|
if (moduleNameValid) {
|
|
var newName = input.val();
|
|
var moduleId = modal.attr("data-module-id");
|
|
var moduleEl = $("#" + moduleId);
|
|
// Update the module's name in GUI
|
|
moduleEl.attr("data-module-name", newName);
|
|
moduleEl.find(".panel-heading .panel-title").html(newName);
|
|
|
|
// Add this information to form
|
|
var formAddInput = $('#update-canvas form input#add');
|
|
var formAddNameInput = $('#update-canvas form input#add-names');
|
|
var formRenameInput = $("#update-canvas form input#rename");
|
|
var addedIds = formAddInput.attr("value").split(",");
|
|
var existingIndex = _.indexOf(addedIds, moduleEl.attr("data-module-id"));
|
|
if (existingIndex === -1) {
|
|
// Actually rename an existing module
|
|
var renameVal = JSON.parse(formRenameInput.attr("value"));
|
|
renameVal[moduleEl.attr("data-module-id")] = newName;
|
|
formRenameInput.attr("value", JSON.stringify(renameVal));
|
|
} else {
|
|
// Just rename the add-name entry
|
|
var addedNames = formAddNameInput.attr("value").split(SUBMIT_FORM_NAME_SEPARATOR);
|
|
addedNames[existingIndex] = newName;
|
|
formAddNameInput.attr("value", addedNames.join(SUBMIT_FORM_NAME_SEPARATOR));
|
|
}
|
|
|
|
// Hide modal
|
|
modal.modal("hide");
|
|
}
|
|
}
|
|
|
|
$("#modal-edit-module")
|
|
.on("show.bs.modal", function (event) {
|
|
var modal = $(this);
|
|
var moduleId = modal.attr("data-module-id");
|
|
var moduleEl = $("#" + moduleId);
|
|
var input = modal.find("#edit-module-name-input");
|
|
|
|
// Set the input to the current module's name
|
|
input.attr("value", moduleEl.attr("data-module-name"));
|
|
input.val(moduleEl.attr("data-module-name"));
|
|
|
|
// Bind on enter button
|
|
input.keydown(function(ev) {
|
|
if (ev.keyCode == 13) {
|
|
// "Submit" modal
|
|
handleRenameConfirm(modal, ev);
|
|
|
|
// In any case, prevent form submission
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
});
|
|
})
|
|
.on("shown.bs.modal", function(event) {
|
|
// Focus the text element
|
|
$(this).find("#edit-module-name-input").focus();
|
|
})
|
|
.on("hide.bs.modal", function (event) {
|
|
// Remove potential error classes
|
|
$(this).find("#edit-module-name-input").parent().removeClass("has-error");
|
|
$(this).find("span.help-block").remove();
|
|
|
|
$(this).find("#edit-module-name-input").off("keydown");
|
|
|
|
// When hiding modal, re-enable events
|
|
toggleCanvasEvents(true);
|
|
});
|
|
|
|
// Bind the confirm button on modal
|
|
$("#modal-edit-module").find("button[data-action='confirm']").on("click", function(ev) {
|
|
var modal = $(this).closest(".modal");
|
|
handleRenameConfirm(modal, ev);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handler when editing a specific module.
|
|
*/
|
|
editModuleHandler = function(ev) {
|
|
var modal = $("#modal-edit-module");
|
|
var moduleEl = $(this).closest(".module");
|
|
|
|
// Set modal's module id
|
|
modal.attr("data-module-id", moduleEl.attr("data-module-id"));
|
|
|
|
// Disable dragging & zooming events on canvas temporarily
|
|
toggleCanvasEvents(false);
|
|
|
|
// Show modal
|
|
modal.modal("show");
|
|
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Initialize editing of module groups.
|
|
*/
|
|
|
|
|
|
/**
|
|
* Handler when editing a module group.
|
|
*/
|
|
|
|
function initMoveModules() {
|
|
function handleMoveConfirm(modal) {
|
|
var moduleId = modal.attr("data-module-id");
|
|
var moduleEl = $("#" + moduleId);
|
|
var input = modal.find('.selectpicker');
|
|
var moveToExperimentId = input.val();
|
|
|
|
// Add this information to form
|
|
var formMoveInput = $("#update-canvas form input#move");
|
|
|
|
// Save mapping to input
|
|
var moveVal = JSON.parse(formMoveInput.attr("value"));
|
|
moveVal[moduleEl.attr("data-module-id")] = moveToExperimentId;
|
|
formMoveInput.attr("value", JSON.stringify(moveVal));
|
|
|
|
updateFormWithModulesData(moduleEl, '', GRID_DIST_EDIT_X, GRID_DIST_EDIT_Y);
|
|
|
|
// Delete module from canvas
|
|
deleteModule(moduleEl.attr("data-module-id"), true);
|
|
|
|
// Hide modal
|
|
modal.modal("hide");
|
|
}
|
|
|
|
$("#modal-move-module")
|
|
.on("show.bs.modal", function (event) {
|
|
var modal = $(this);
|
|
var moduleId = modal.attr("data-module-id");
|
|
var moduleEl = $("#" + moduleId);
|
|
var input = modal.find('.selectpicker');
|
|
|
|
// Bind on enter button
|
|
input.keydown(function(ev) {
|
|
if (ev.keyCode == 13) {
|
|
// "Submit" modal
|
|
handleMoveConfirm(modal);
|
|
|
|
// In any case, prevent form submission
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
});
|
|
})
|
|
.on("shown.bs.modal", function(event) {
|
|
// Focus the text element
|
|
$(this).find(".selectpicker").selectpicker().focus();
|
|
})
|
|
.on("hide.bs.modal", function (event) {
|
|
// When hiding modal, re-enable events
|
|
toggleCanvasEvents(true);
|
|
});
|
|
|
|
// Bind the confirm button on modal
|
|
$("#modal-move-module").find("button[data-action='confirm']").on("click", function(event) {
|
|
var modal = $(this).closest(".modal");
|
|
handleMoveConfirm(modal);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handler when trying to move a specific module.
|
|
*/
|
|
moveModuleHandler = function(ev) {
|
|
var modal = $("#modal-move-module");
|
|
var moduleEl = $(this).closest(".module");
|
|
|
|
// Set modal's module id
|
|
modal.attr("data-module-id", moduleEl.attr("data-module-id"));
|
|
|
|
// Disable dragging & zooming events on canvas temporarily
|
|
toggleCanvasEvents(false);
|
|
|
|
// Show modal
|
|
modal.modal("show");
|
|
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
};
|
|
|
|
|
|
/**
|
|
* Initialize editing of module groups.
|
|
*/
|
|
function initMoveModuleGroups() {
|
|
function handleMoveModuleGroupConfirm(modal) {
|
|
var moduleId = modal.attr("data-module-id");
|
|
var moduleEl = $("#" + moduleId);
|
|
var input = modal.find('.selectpicker');
|
|
var moveToExperimentId = input.val();
|
|
|
|
// Retrieve all modules in this module group
|
|
var components = connectedComponents(graph, moduleId.toString());
|
|
var group = _.map(components, function(id) { return $("#" + id); });
|
|
|
|
var conns = _.filter(graph.edges(), function(conn) {
|
|
return _.contains(components, conn[0]) || _.contains(components, conn[1]);
|
|
});
|
|
|
|
updateFormWithModulesData(group, conns.toString(), GRID_DIST_EDIT_X, GRID_DIST_EDIT_Y);
|
|
|
|
// Add move information to form
|
|
var formMoveInput = $("#update-canvas form input#move");
|
|
|
|
moveModules = [];
|
|
_.each(group, function(m) {
|
|
moveModules.push(m.attr("data-module-id"));
|
|
});
|
|
|
|
// Put the array into input
|
|
var moveVal = JSON.parse(formMoveInput.attr("value"));
|
|
moveVal[moveModules] = moveToExperimentId;
|
|
formMoveInput.attr("value", JSON.stringify(moveVal));
|
|
|
|
_.each(group, function(m) {
|
|
deleteModule(m.attr("data-module-id"));
|
|
});
|
|
|
|
// Hide modal
|
|
modal.modal("hide");
|
|
}
|
|
|
|
$("#modal-move-module-group")
|
|
.on("show.bs.modal", function (event) {
|
|
var modal = $(this);
|
|
var moduleId = modal.attr("data-module-id");
|
|
var moduleEl = $("#" + moduleId);
|
|
var input = modal.find('.selectpicker');
|
|
|
|
// Bind on enter button
|
|
input.keydown(function(ev) {
|
|
if (ev.keyCode == 13) {
|
|
// "Submit" modal
|
|
handleMoveConfirm(modal);
|
|
|
|
// In any case, prevent form submission
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
});
|
|
})
|
|
.on("shown.bs.modal", function(event) {
|
|
// Focus the text element
|
|
$(this).find(".selectpicker").selectpicker().focus();
|
|
})
|
|
.on("hide.bs.modal", function (event) {
|
|
// When hiding modal, re-enable events
|
|
toggleCanvasEvents(true);
|
|
});
|
|
|
|
// Bind the confirm button on modal
|
|
$("#modal-move-module-group").find("button[data-action='confirm']").on("click", function(event) {
|
|
var modal = $(this).closest(".modal");
|
|
handleMoveModuleGroupConfirm(modal);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handler when editing a module group.
|
|
*/
|
|
moveModuleGroupHandler = function(ev) {
|
|
var modal = $("#modal-move-module-group");
|
|
var moduleEl = $(this).closest(".module");
|
|
|
|
// Set modal's module id
|
|
modal.attr("data-module-id", moduleEl.attr("data-module-id"));
|
|
|
|
// Disable dragging & zooming events on canvas temporarily
|
|
toggleCanvasEvents(false);
|
|
|
|
// Show modal
|
|
modal.modal("show");
|
|
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Bind the delete module buttons actions.
|
|
*/
|
|
function bindDeleteModuleAction() {
|
|
// First, bind the delete module handler onto all "delete module" links
|
|
$(".module-options a.delete-module").on("click touchstart", deleteModuleHandler);
|
|
|
|
// Then, bind on modal events
|
|
var modal = $("#modal-delete-module");
|
|
|
|
// Bind the confirm button on modal
|
|
modal.find("button[data-action='confirm']").on("click", function(event) {
|
|
// Set the "clicked" property to true
|
|
modal.data("submit", "true");
|
|
});
|
|
|
|
// Also, bind on modal window open & close
|
|
modal.on("show.bs.modal", function(event) {
|
|
// Remove submit flag
|
|
$(this).removeData("submit");
|
|
|
|
// Disable dragging & zooming events on canvas temporarily
|
|
toggleCanvasEvents(false);
|
|
});
|
|
|
|
modal.on("hide.bs.modal", function (event) {
|
|
if (_.isEqual($(event.target).data("submit"), "true")) {
|
|
// If modal was successfully submitted, delete the module
|
|
var id = $(event.target).data("module-id");
|
|
|
|
deleteModule(id.toString(), true);
|
|
}
|
|
|
|
// In any case, re-enable events on canvas
|
|
toggleCanvasEvents(true);
|
|
});
|
|
}
|
|
|
|
function deleteModule(id, linkConnections) {
|
|
var ins = graph.inEdges(id);
|
|
var outs = graph.outEdges(id);
|
|
var tempModuleEl;
|
|
|
|
// Remove id from the graph structure, along with all connections
|
|
if (graph.hasNode(id)) {
|
|
graph.removeNode(id);
|
|
}
|
|
|
|
// Remove the module <div>, along with all connections
|
|
instance.remove($("#" + id));
|
|
|
|
// Connect the sources to destinations
|
|
if (linkConnections) {
|
|
_.each(ins, function(inEdge) {
|
|
_.each(outs, function(outEdge) {
|
|
// Only connect 2 nodes if
|
|
// such a connection doesn't exist already
|
|
if (!graph.hasEdge(inEdge[0], outEdge[1])) {
|
|
graph.addEdge(inEdge[0], outEdge[1]);
|
|
instance.connect({
|
|
source: $("#" + inEdge[0]),
|
|
target: $("#" + outEdge[1])
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
//Hide module group options for unconnected modules
|
|
if (outs.length === 0) { // If node is sink
|
|
_.each (ins, function(inEdge) {
|
|
if (graph.degree(inEdge[0]) === 0) {
|
|
tempModuleEl = $("#" + inEdge[0]);
|
|
tempModuleEl.find(".clone-module-group").parents("li").hide();
|
|
tempModuleEl.find(".move-module-group").parents("li").hide();
|
|
tempModuleEl.find(".delete-module-group").parents("li").hide();
|
|
}
|
|
});
|
|
}
|
|
if (ins.length === 0) { // If node is source
|
|
_.each (outs, function(outEdge) {
|
|
if (graph.degree(outEdge[1]) === 0) {
|
|
tempModuleEl = $("#" + outEdge[1]);
|
|
tempModuleEl.find(".clone-module-group").parents("li").hide();
|
|
tempModuleEl.find(".move-module-group").parents("li").hide();
|
|
tempModuleEl.find(".delete-module-group").parents("li").hide();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Add ID to the form
|
|
var formAddInput = $('#update-canvas form input#add');
|
|
var formAddNamesInput = $('#update-canvas form input#add-names');
|
|
var formClonedInput = $('#update-canvas form input#cloned');
|
|
var formRemoveInput = $('#update-canvas form input#remove');
|
|
var formMoveInput = $('#update-canvas form input#move');
|
|
var inputVal, newVal;
|
|
var vals, idx;
|
|
var addToRemoveList = true;
|
|
|
|
// If the module was moved, we don't need to do anything with it
|
|
inputVal = formMoveInput.attr("value");
|
|
if (!_.isUndefined(inputVal) && inputVal !== "") {
|
|
moved = [];
|
|
$.each(JSON.parse(formMoveInput.val()), function(key, value) {
|
|
if (key.match(/.*,.*/))
|
|
moved = moved.concat(key.split(','));
|
|
else
|
|
moved.push(key);
|
|
});
|
|
|
|
if (_.contains(moved, id)) {
|
|
addToRemoveList = false;
|
|
return;
|
|
}
|
|
}
|
|
|
|
// If the module we are deleting was added via JS
|
|
// (and hasn't been saved yet), we don't need to "add" it
|
|
// neither "remove" it, it simply ceases to exist
|
|
inputVal = formAddInput.attr("value");
|
|
if (!_.isUndefined(inputVal) && inputVal !== "") {
|
|
vals = inputVal.split(",");
|
|
if (_.contains(vals, id)) {
|
|
addToRemoveList = false;
|
|
idx = vals.indexOf(id);
|
|
vals.splice(idx, 1);
|
|
formAddInput.attr("value", vals.join());
|
|
vals = formAddNamesInput.attr("value").split(SUBMIT_FORM_NAME_SEPARATOR);
|
|
vals.splice(idx, 1);
|
|
formAddNamesInput.attr("value", vals.join(SUBMIT_FORM_NAME_SEPARATOR));
|
|
}
|
|
}
|
|
|
|
// Okay, the module was not created, but it might be cloned,
|
|
// so we need to check that as well
|
|
if (!addToRemoveList) {
|
|
inputVal = formClonedInput.attr("value");
|
|
if (!_.isUndefined(inputVal) && inputVal !== "") {
|
|
vals = _.map(inputVal.split(";"), function(val) {
|
|
return val.split(",")[1];
|
|
});
|
|
if (_.contains(vals, id)) {
|
|
addToRemoveList = false;
|
|
|
|
// Remove the cloned module from the cloned list
|
|
newVal = "";
|
|
_.each(inputVal.split(";"), function(val) {
|
|
if (!_.isEqual(val.split(",")[1], id)) {
|
|
newVal = (newVal === "" ? "" : (newVal + ";")) + val;
|
|
}
|
|
});
|
|
formClonedInput.attr("value", newVal);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (addToRemoveList) {
|
|
inputVal = formRemoveInput.attr("value");
|
|
if (_.isUndefined(inputVal) || inputVal === "") {
|
|
formRemoveInput.attr("value", id);
|
|
} else {
|
|
formRemoveInput.attr("value", inputVal + "," + id);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handler function when deleting a single module.
|
|
*/
|
|
deleteModuleHandler =function() {
|
|
var id = $(this).data("module-id");
|
|
var modal = $("#modal-delete-module");
|
|
|
|
var name = $(".module#" + id).data("module-name");
|
|
var template = modal.find("#message-template").text().trim();
|
|
|
|
// Set the modal message
|
|
modal.find("#delete-message").text(template.replace("%{module}", name));
|
|
|
|
// Send module id to modal
|
|
modal.data("module-id", id);
|
|
|
|
// Display delete modal
|
|
modal.modal({
|
|
"backdrop": "static"
|
|
});
|
|
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Bind the delete module group buttons actions.
|
|
*/
|
|
function bindDeleteModuleGroupAction() {
|
|
// First, bind the delete module group handler onto all
|
|
// "delete module group" links
|
|
$(".module-options a.delete-module-group").on("click touchstart", deleteModuleGroupHandler);
|
|
|
|
// Then, bind on modal events
|
|
var modal = $("#modal-delete-module-group");
|
|
|
|
// Bind the confirm button on modal
|
|
modal.find("button[data-action='confirm']").on("click", function(event) {
|
|
// Set the "clicked" property to true
|
|
modal.data("submit", "true");
|
|
});
|
|
|
|
// Also, bind on modal window open & close
|
|
modal.on("show.bs.modal", function(event) {
|
|
// Remove submit flag
|
|
$(this).removeData("submit");
|
|
|
|
// Disable dragging & zooming events on canvas temporarily
|
|
toggleCanvasEvents(false);
|
|
});
|
|
|
|
modal.on("hide.bs.modal", function (event) {
|
|
if (_.isEqual($(event.target).data("submit"), "true")) {
|
|
// If modal was successfully submitted, delete the module
|
|
var id = $(event.target).data("module-id");
|
|
|
|
// Find all modules in the connected component
|
|
var modules = connectedComponents(graph, id.toString());
|
|
|
|
// Delete all modules of the module group
|
|
_.each(modules, function(moduleId) {
|
|
deleteModule(moduleId, false);
|
|
});
|
|
}
|
|
|
|
// In any case, re-enable events on canvas
|
|
toggleCanvasEvents(true);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handler function when deleting module group.
|
|
*/
|
|
deleteModuleGroupHandler = function() {
|
|
var id = $(this).data("module-id");
|
|
var modal = $("#modal-delete-module-group");
|
|
|
|
var name = $(".module#" + id).data("module-name");
|
|
var template = modal.find("#message-template").text().trim();
|
|
|
|
// Set the modal message
|
|
modal.find("#delete-message").text(template.replace("%{module}", name));
|
|
|
|
// Send module id to modal
|
|
modal.data("module-id", id);
|
|
|
|
// Display delete modal
|
|
modal.modal({
|
|
"backdrop": "static"
|
|
});
|
|
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Bind the clone module action.
|
|
* @param element - jQUery selector for the element on which the click action will run.
|
|
* @param modulesSel - The selector string for all modules.
|
|
* @param gridDistX - The grid distance in X direction.
|
|
* @param gridDistY - The grid distance in Y direction.
|
|
*/
|
|
function bindCloneModuleAction(element, modulesSel, gridDistX, gridDistY) {
|
|
element.on("click touchstart", function(event) {
|
|
cloneModuleHandler($(this).data("module-id"), modulesSel, gridDistX, gridDistY);
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handler function when cloning a single module.
|
|
* @param moduleId - The ID of the original module.
|
|
* @param modulesSel - The selector string for all modules.
|
|
* @param gridDistX - The grid distance in X direction.
|
|
* @param gridDistY - The grid distance in Y direction.
|
|
*/
|
|
cloneModuleHandler = function(moduleId, modulesSel, gridDistX, gridDistY) {
|
|
var modules = $(modulesSel);
|
|
var module = modules.filter("#" + moduleId);
|
|
|
|
// Position for the cloned module
|
|
var top = elTop(module) + (3 * gridDistY);
|
|
var left = elLeft(module) + (3 * gridDistX);
|
|
|
|
cloneModule(module, gridDistX, gridDistY, left, top);
|
|
|
|
// Hide all open dropdowns
|
|
$(".module-options").removeClass("open");
|
|
module.css("z-index", 20);
|
|
};
|
|
|
|
/**
|
|
* Clone the original module.
|
|
* @param originalModule - The jQuery original module selector.
|
|
* @param gridDistX - The grid distance in X direction.
|
|
* @param gridDistY - The grid distance in Y direction.
|
|
* @param left - The left position of the new module.
|
|
* @param top - The top position of the new module.
|
|
* @return The new module.
|
|
*/
|
|
function cloneModule(originalModule, gridDistX, gridDistY, left, top) {
|
|
var moduleId = originalModule.data("module-id");
|
|
|
|
// Create new module element
|
|
var id = "n" + newModuleIndex++;
|
|
graph.addNode(id);
|
|
var newModule = createVirtualModule();
|
|
elLeft(newModule, left);
|
|
elTop(newModule, top);
|
|
updateModuleHtml(newModule, id, originalModule.data("module-name"), gridDistX, gridDistY);
|
|
newModule.removeClass("new");
|
|
|
|
// Add the cloned module id into the hidden input field
|
|
var formAddInput = $('#update-canvas form input#add');
|
|
var formAddNamesInput = $('#update-canvas form input#add-names');
|
|
var formClonedInput = $('#update-canvas form input#cloned');
|
|
var inputVal, inputNameVal;
|
|
|
|
// If we cloned a module with virtual id, there are 2 possibilities:
|
|
// 1. Original module is newly created, which means that our cloned
|
|
// module can also simply be treated as a new module;
|
|
// 2. Original module is a cloned module, which means we want to extend
|
|
// original module's original module into this new module
|
|
var originalId = moduleId;
|
|
var originalWasCloned = false;
|
|
var fillClonedInput = true;
|
|
|
|
if (_.isEqual(moduleId.toString().charAt(0), "n")) {
|
|
// Find the original module's "original module", and retrieve its id
|
|
// If such ID cannot be found, original module was not cloned
|
|
fillClonedInput = false;
|
|
inputVal = formClonedInput.attr("value");
|
|
_.each(inputVal.split(";"), function(val) {
|
|
var val2 = val.split(",");
|
|
if (_.isEqual(val2[1], moduleId)) {
|
|
originalId = val2[0];
|
|
fillClonedInput = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (fillClonedInput) {
|
|
inputVal = formClonedInput.attr("value");
|
|
if (_.isUndefined(inputVal) || inputVal === "") {
|
|
formClonedInput.attr("value", originalId + "," + id);
|
|
} else {
|
|
formClonedInput.attr("value", inputVal + ";" + originalId + "," + id);
|
|
}
|
|
}
|
|
|
|
instance.repaintEverything();
|
|
|
|
return newModule;
|
|
}
|
|
|
|
/**
|
|
* Bind the clone module group action.
|
|
* @param element - jQUery selector for the element on which the click action will run.
|
|
* @param modulesSel - The selector string for all modules.
|
|
* @param gridDistX - The grid distance in X direction.
|
|
* @param gridDistY - The grid distance in Y direction.
|
|
*/
|
|
function bindCloneModuleGroupAction(element, modulesSel, gridDistX, gridDistY) {
|
|
element.on("click touchstart", function(event) {
|
|
cloneModuleGroupHandler($(this).data("module-id"), modulesSel, gridDistX, gridDistY);
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handler function when cloning a module group.
|
|
* @param moduleId - The ID of the original module.
|
|
* @param modulesSel - The selector string for all modules.
|
|
* @param gridDistX - The grid distance in X direction.
|
|
* @param gridDistY - The grid distance in Y direction.
|
|
*/
|
|
cloneModuleGroupHandler = function(moduleId, modulesSel, gridDistX, gridDistY) {
|
|
var modules = $(modulesSel);
|
|
|
|
// Retrieve all modules in this module group
|
|
var components = connectedComponents(graph, moduleId.toString());
|
|
var group = _.map(components, function(id) { return $("#" + id); });
|
|
|
|
// Calculate the size of the rectangle containing the whole workflow
|
|
var width, height;
|
|
var minX = Number.MAX_VALUE, maxX = -Number.MAX_VALUE;
|
|
var minY = Number.MAX_VALUE, maxY = -Number.MAX_VALUE;
|
|
|
|
_.each(group, function(m) {
|
|
var l = elLeft(m);
|
|
var t = elTop(m);
|
|
if (l < minX) { minX = l; }
|
|
if (l > maxX) { maxX = l; }
|
|
if (t < minY) { minY = t; }
|
|
if (t > maxY) { maxY = t; }
|
|
});
|
|
m_width = modules.first().width();
|
|
m_height = modules.first().height();
|
|
width = maxX - minX + m_width + (3 * gridDistX);
|
|
height = maxY - minY + m_height + (3 * gridDistY);
|
|
|
|
// Find the appropriate "free space"
|
|
var left = minX != Number.MAX_VALUE ? minX : 0;
|
|
var top = maxY != -Number.MAX_VALUE ? maxY : 0;
|
|
var offset = 0;
|
|
var moduleContained;
|
|
|
|
while (true) {
|
|
moduleContained = false;
|
|
for (var i = 0; i < modules.length; i++) {
|
|
var module = $(modules[i]);
|
|
|
|
// Skip modules from the module group
|
|
if (_.contains(components, module.data("module-id").toString())) {
|
|
continue;
|
|
}
|
|
|
|
var ml = elLeft(module);
|
|
var mt = elTop(module);
|
|
|
|
if (ml >= left &&
|
|
ml <= left + width - gridDistX &&
|
|
mt >= top + offset &&
|
|
mt <= top + offset + height - gridDistY) {
|
|
moduleContained = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// If no module contained, exit
|
|
if (!moduleContained) {
|
|
break;
|
|
}
|
|
|
|
offset += gridDistY;
|
|
}
|
|
|
|
// Alright, clone all modules from the group and
|
|
// move them by the vertical offset
|
|
clones = {};
|
|
_.each(group, function(m) {
|
|
var nm = cloneModule(m, gridDistX, gridDistY, elLeft(m), elTop(m) + height + offset - gridDistY);
|
|
|
|
//Show module group options
|
|
nm.find(".clone-module-group").parents("li").show();
|
|
nm.find(".move-module-group").parents("li").show();
|
|
nm.find(".delete-module-group").parents("li").show();
|
|
|
|
clones[m.attr("data-module-id")] = nm.attr("data-module-id");
|
|
});
|
|
|
|
// Also, copy the outbound connections
|
|
_.each(_.keys(clones), function(originalId) {
|
|
var clonedId = clones[originalId];
|
|
|
|
_.each(graph.successors(originalId), function(outNode) {
|
|
graph.addEdge(clonedId, clones[outNode]);
|
|
instance.connect({
|
|
source: $("#" + clonedId),
|
|
target: $("#" + clones[outNode])
|
|
});
|
|
});
|
|
});
|
|
|
|
// Hide all open dropdowns
|
|
$(".module-options").removeClass("open");
|
|
$("#" + moduleId.toString()).css("z-index", 20);
|
|
|
|
// Repainting is needed twice (weird, huh)
|
|
instance.repaintEverything();
|
|
instance.repaintEverything();
|
|
};
|
|
|
|
/**
|
|
* Before submission, graph & module group info needs to be
|
|
* copied into hidden input fields via form
|
|
* submission callback.
|
|
* @param gridDistX - The canvas grid distance in X direction.
|
|
* @param gridDistY - The canvas grid distance in Y direction.
|
|
*/
|
|
function bindEditFormSubmission(gridDistX, gridDistY) {
|
|
$('#update-canvas form').submit(function(){
|
|
var modules = $(".diagram .module");
|
|
|
|
updateFormWithModulesData(modules, graph.edges().toString(), gridDistX, gridDistY)
|
|
|
|
ignoreUnsavedWorkAlert = true;
|
|
return true;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Update form with given modules position and connections.
|
|
* @param modules - Modules, which should be inserted into form
|
|
* @param connections- Connections, which should be inserted into form (empty if
|
|
* no connections)
|
|
* @param gridDistX - The canvas grid distance in X direction.
|
|
* @param gridDistY - The canvas grid distance in Y direction.
|
|
*/
|
|
function updateFormWithModulesData(modules, connections, gridDistX, gridDistY) {
|
|
var connectionsDiv = $('#update-canvas form input#connections');
|
|
var positionsDiv = $('#update-canvas form input#positions');
|
|
var moduleNamesDiv = $('#update-canvas form input#module-groups');
|
|
|
|
// Connections are easy, just copy graph data
|
|
if (connections) {
|
|
if (connectionsDiv.val())
|
|
connectionsDiv.attr("value", connectionsDiv.val() + ',' + connections.toString());
|
|
else
|
|
connectionsDiv.attr("value", connections.toString());
|
|
}
|
|
|
|
// Positions are a bit more tricky, but still pretty straightforward
|
|
var moduleGroupNames = {};
|
|
var positionsVal = "";
|
|
var module, id, x, y;
|
|
_.each(modules, function(m) {
|
|
module = $(m);
|
|
id = module.attr("data-module-id");
|
|
x = elLeft(module) / gridDistX;
|
|
y = elTop(module) / gridDistY;
|
|
positionsVal += id + "," + x + "," + y + ";";
|
|
moduleGroupNames[id] = module.attr("data-module-group-name");
|
|
});
|
|
positionsDiv.attr("value", positionsVal + positionsDiv.val());
|
|
|
|
if (moduleNamesDiv.val())
|
|
moduleNamesDiv.attr("value", JSON.stringify($.extend(JSON.parse(moduleNamesDiv.val()),
|
|
moduleGroupNames)));
|
|
else
|
|
moduleNamesDiv.attr("value", JSON.stringify(moduleGroupNames));
|
|
}
|
|
|
|
/**
|
|
* Position the modules onto the canvas.
|
|
* @param modulesSel - The jQuery selector text of module elements.
|
|
* @param gridDistX - The X canvas grid distance.
|
|
* @param gridDistY - The Y canvas grid distance.
|
|
*/
|
|
function positionModules(modulesSel, gridDistX, gridDistY) {
|
|
var modules = $(modulesSel);
|
|
|
|
var module, x, y;
|
|
_.each(modules, function(m) {
|
|
module = $(m);
|
|
x = module.data("module-x");
|
|
y = module.data("module-y");
|
|
elLeft(module, x * gridDistX);
|
|
elTop(module, y * gridDistY);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Add draggable element/s to the jsPlumb instance.
|
|
* @param elements - The elements selector.
|
|
* @param gridDistX - The grid distance in X direction.
|
|
* @param gridDistY - The grid distance in Y direction.
|
|
*/
|
|
function addDraggablesToInstance(elements, gridDistX, gridDistY) {
|
|
function handleDragStart(event, ui) {
|
|
var draggedModule = $(event.el);
|
|
|
|
leftInitial = elLeft(draggedModule);
|
|
topInitial = elTop(draggedModule);
|
|
collided = false;
|
|
|
|
draggedModule
|
|
.css("z-index", "25")
|
|
.addClass("dragged");
|
|
}
|
|
|
|
function handleDrag(event, ui) {
|
|
var draggedModule = $(event.el);
|
|
var modules = $(".module");
|
|
|
|
// Check if collision occured
|
|
var module;
|
|
for (var i = 0; i < modules.length; i++) {
|
|
module = $(modules[i]);
|
|
if (_.isEqual(module, draggedModule)) {
|
|
continue;
|
|
}
|
|
|
|
if (_.isEqual(draggedModule.position(), module.position())) {
|
|
// Collision!
|
|
collided = true;
|
|
break;
|
|
} else {
|
|
collided = false;
|
|
}
|
|
}
|
|
|
|
if (collided) {
|
|
draggedModule.addClass("collided");
|
|
} else {
|
|
draggedModule.removeClass("collided");
|
|
}
|
|
}
|
|
|
|
function handleDragStop(event, ui) {
|
|
var draggedModule = $(event.el);
|
|
|
|
draggedModule
|
|
.css("z-index", "20")
|
|
.removeClass("dragged");
|
|
|
|
// Reposition element to back where it was
|
|
if (collided) {
|
|
draggedModule.removeClass("collided");
|
|
elLeft(draggedModule, leftInitial);
|
|
elTop(draggedModule, topInitial);
|
|
instance.revalidate(draggedModule);
|
|
instance.repaintEverything();
|
|
}
|
|
|
|
collided = false;
|
|
}
|
|
|
|
instance.draggable(elements, {
|
|
snapThreshold: Math.max(gridDistX, gridDistY),
|
|
grid: [gridDistX, gridDistY],
|
|
start: handleDragStart,
|
|
drag: handleDrag,
|
|
stop: handleDragStop
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Set the specified elements as drop targets in jsPlumb instance.
|
|
* @param elements - The elements to be used as drop targets.
|
|
*/
|
|
function setElementsAsDropTargets(elements) {
|
|
instance.makeTarget(elements, {
|
|
dropOptions: { hoverClass: "dragHover" },
|
|
anchor: "AutoDefault",
|
|
allowLoopback: false
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Set the specified elements as drag sources in jsPlumb instance.
|
|
* @param elements - The elements to be used as drag sources.
|
|
* @param anchorStyle - Anchor style.
|
|
* @param connectorStyle - Connector style.
|
|
* @param connectorStyle2 - Connector style 2.
|
|
*/
|
|
function setElementsAsDragSources(elements, anchorStyle, connectorStyle, connectorStyle2) {
|
|
// CSS_STYLE
|
|
var newAnchorStyle = anchorStyle || DEFAULT_ANCHOR_STYLE;
|
|
var newConnectorStyle = connectorStyle || DEFAULT_CONNECTOR_STYLE;
|
|
var newConnectorStyle2 = connectorStyle2 || DEFAULT_CONNECTOR_STYLE_2;
|
|
|
|
instance.makeSource(elements, {
|
|
filter: ".ep",
|
|
anchor: newAnchorStyle,
|
|
connector: newConnectorStyle,
|
|
allowLoopback: false,
|
|
connectorStyle: newConnectorStyle2,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Zooms the specified instance element, while retaining
|
|
* the non-zoomable children.
|
|
* @param zoomableElement - The element to be zoomed.
|
|
* @param zoom - The zoom level (value between 0 and 1).
|
|
* @param origin - The zoom origin, can be null.
|
|
*/
|
|
function zoomInstance(zoomableElement, zoom, origin) {
|
|
zoomableElement.css("transform", "scale(" + zoom + ")");
|
|
|
|
if (!_.isUndefined(origin)) {
|
|
zoomableElement.css("transform-origin", origin);
|
|
}
|
|
|
|
instance.setZoom(zoom);
|
|
|
|
// Make sure the no-scale elements are kept on original scale:
|
|
var noscale = zoomableElement.find(".no-scale");
|
|
noscale.css("transform", "scale(" + (1.0 / zoom) + ")");
|
|
noscale.css("transform-origin", "0 0");
|
|
}
|
|
|
|
/**
|
|
* Calculates the draggable element's size.
|
|
* @param draggable - The draggable element.
|
|
* @return - An object {width: <width>, height: <height>}.
|
|
*/
|
|
function calculateDraggableSize(draggable) {
|
|
// Since draggable's width & height is usually 0,
|
|
// we need to calculate its actual width & height
|
|
// by extracting positions of its children (e.g. modules)
|
|
var minX = Number.MAX_VALUE, maxX = -Number.MAX_VALUE;
|
|
var minY = Number.MAX_VALUE, maxY = -Number.MAX_VALUE;
|
|
var child, left, top, right, bottom;
|
|
_.each(draggable.children(), function(c) {
|
|
child = $(c);
|
|
left = elLeft(child);
|
|
top = elTop(child);
|
|
right = left + child.width();
|
|
bottom = top + child.height();
|
|
if (left < minX) { minX = left; }
|
|
if (right > maxX) { maxX = right; }
|
|
if (top < minY) { minY = top; }
|
|
if (bottom > maxY) { maxY = bottom; }
|
|
});
|
|
if (minX === Number.MAX_VALUE) { minX = -1; }
|
|
if (maxX === -Number.MAX_VALUE) { maxX = 1; }
|
|
if (minY === Number.MAX_VALUE) { minY = -1; }
|
|
if (maxY === -Number.MAX_VALUE) { maxY = 1; }
|
|
|
|
return { width: maxX - minX, height: maxY - minY };
|
|
}
|
|
|
|
/**
|
|
* Remembers the draggable element's position.
|
|
* @param draggable - The draggable element.
|
|
* @param parent - The parent element to which the draggable element
|
|
* is relative to.
|
|
*/
|
|
function rememberDraggablePosition(draggable, parent) {
|
|
// Calculate the center of the draggable's parent X & Y
|
|
var centerX = parent.width() / 2 - elLeft(draggable);
|
|
var centerY = parent.height() / 2 - elTop(draggable);
|
|
|
|
var draggableSize = calculateDraggableSize(draggable);
|
|
|
|
draggableLeft = centerX / draggableSize.width;
|
|
draggableTop = centerY / draggableSize.height;
|
|
}
|
|
|
|
/**
|
|
* Restores the draggable element's position.
|
|
* @param draggable - The draggable element.
|
|
*/
|
|
function restoreDraggablePosition(draggable, parent) {
|
|
// Calculate the center of the draggable's parent X & Y
|
|
var centerX = parent.width() / 2;
|
|
var centerY = parent.height() / 2;
|
|
|
|
var draggableSize = calculateDraggableSize(draggable);
|
|
|
|
var left = draggableLeft * draggableSize.width;
|
|
var top = draggableTop * draggableSize.height;
|
|
|
|
elLeft(draggable, centerX - left);
|
|
elTop(draggable, centerY - top);
|
|
}
|
|
|
|
/**
|
|
* Initialize the modules hover animation.
|
|
* @param modules - The modules jQuery selector.
|
|
* @param sidebar - The sidebar jQuery selector.
|
|
*/
|
|
function initModulesHover(modules, sidebar) {
|
|
function handlerIn() {
|
|
var moduleId = $(this).data("module-id");
|
|
if (!_.isUndefined(moduleId)) {
|
|
var currentModule = modules.filter("[data-module-id='" + moduleId + "']");
|
|
var currentMenu = sidebar.find("[data-module-id='" + moduleId + "']");
|
|
currentModule.addClass("module-hover");
|
|
currentMenu.addClass("module-hover");
|
|
}
|
|
}
|
|
function handlerOut() {
|
|
var moduleId = $(this).data("module-id");
|
|
if (!_.isUndefined(moduleId)) {
|
|
var currentModule = modules.filter("[data-module-id='" + moduleId + "']");
|
|
var currentMenu = sidebar.find("[data-module-id='" + moduleId + "']");
|
|
currentModule.removeClass("module-hover");
|
|
currentMenu.removeClass("module-hover");
|
|
}
|
|
}
|
|
modules.hover(handlerIn, handlerOut);
|
|
sidebar.find("[data-module-id]").hover(handlerIn, handlerOut);
|
|
}
|
|
|
|
/**
|
|
* Calculates the specified module group size.
|
|
* @param modules - The modules belonging to this module group.
|
|
* @return - An object {width: <width>, height: <height>}.
|
|
*/
|
|
function calculateModuleGroupSize(modules) {
|
|
var minX = Number.MAX_VALUE, maxX = -Number.MAX_VALUE;
|
|
var minY = Number.MAX_VALUE, maxY = -Number.MAX_VALUE;
|
|
var module, left, top, right, bottom;
|
|
_.each(modules, function(m) {
|
|
module = $(m);
|
|
left = elLeft(module);
|
|
top = elTop(module);
|
|
right = left + module.width();
|
|
bottom = top + module.height();
|
|
if (left < minX) { minX = left; }
|
|
if (right > maxX) { maxX = right; }
|
|
if (top < minY) { minY = top; }
|
|
if (bottom > maxY) { maxY = bottom; }
|
|
});
|
|
if (minX === Number.MAX_VALUE) { minX = -1; }
|
|
if (maxX === -Number.MAX_VALUE) { maxX = 1; }
|
|
if (minY === Number.MAX_VALUE) { minY = -1; }
|
|
if (maxY === -Number.MAX_VALUE) { maxY = 1; }
|
|
|
|
return {
|
|
left: minX,
|
|
top: minY,
|
|
width: maxX - minX,
|
|
height: maxY - minY
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Initialize the modules click action on sidebar
|
|
* so the modules are then centered in canvas.
|
|
* @param modules - The modules jQuery selector.
|
|
* @param sidebar - The sidebar jQuery selector.
|
|
* @param draggable - The canvas draggable jQuery selector.
|
|
* @param parent - The parent of the draggable element.
|
|
* @param modulePadding - The top-left padding form module display.
|
|
*/
|
|
function initSidebarClicks(modules, sidebar, draggable, parent, modulePadding) {
|
|
function moduleHandler(event) {
|
|
var moduleId = $(this).data("module-id");
|
|
var module = modules.filter("[data-module-id='" + moduleId + "']");
|
|
var centerX = parent.width() / 2;
|
|
var centerY = parent.height() / 2;
|
|
var left = centerX - elLeft(module) - (module.width() / 2);
|
|
var top = centerY - elTop(module) - (module.height() / 2);
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
animateReposition(draggable, left, top);
|
|
return false;
|
|
}
|
|
sidebar.find(".canvas-center-on").click(moduleHandler);
|
|
}
|
|
|
|
/**
|
|
* Initialize the jsPlumb by creating a new jsPlumb instance
|
|
* (overrides the currently set global variable 'instance').
|
|
* @param containerSel - The jQuery selector text of the canvas container.
|
|
* @param containerChildSel - The jQuery selector text of the canvas container child.
|
|
* @param modulesSel - The jQuery selector text of module elements.
|
|
* @param params - Various parameters:
|
|
* @param params.gridDistX - Grid distance between modules in X direction.
|
|
* @param params.gridDistY - Grid distance between modules in Y direction.
|
|
* @param params.modulesDraggable - True if modules are draggable.
|
|
* @param params.connectionsEditable - True if connections can be created/edited/removed.
|
|
* @param params.zoomEnabled - True if zooming in/out is enabled.
|
|
* @param params.zoomMin - The minimum zoom level (0. or greater, 1.0 is no zoom).
|
|
* @param params.zoomMax - The maximum zoom level (0. or greater, 1.0 is no zoom).
|
|
* @param params.zoomDist - The distance to travel towards mouse position on zoom.
|
|
* @param params.scrollEnabled - True if dragging/scrolling of content is enabled.
|
|
* @param params.endpointStyle - jsPlumb endpoint style.
|
|
* @param params.connectionHoverStyle - jsPlumb style.
|
|
* @param params.connectionOverlayStyle - jsPlumb style.
|
|
* @param params.connectionLabelStyle - jsPlumb style.
|
|
* @param params.anchorStyle - jsPlumb anchor style.
|
|
* @param params.connectorStyle - jsPlumb endpoint style.
|
|
* @param params.connectorStyle2 - jsPlumb endpoint style.
|
|
*/
|
|
function initJsPlumb(containerSel, containerChildSel, modulesSel, params) {
|
|
// Functions used for scrolling
|
|
function mouseUp(event) {
|
|
container.off("mousemove touchmove");
|
|
}
|
|
function mouseDown(event) {
|
|
var source = $(event.target);
|
|
if (!$(modulesSel).is(source) &&
|
|
$(modulesSel).has(source).length === 0 &&
|
|
source.is($(container))) {
|
|
// Only do drag & drop if it doesn't
|
|
// origin from module element
|
|
drag_type = DRAG_INVALID;
|
|
if (event.type == "mousedown" && (event.which || event.button) == 1) {
|
|
drag_type = DRAG_MOUSE;
|
|
} else if (event.type == "touchstart" && event.originalEvent.touches.length == 1) {
|
|
drag_type = DRAG_TOUCH;
|
|
}
|
|
if (drag_type > 0) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
x_start = calcOffsetX(event);
|
|
y_start = calcOffsetY(event);
|
|
container.on("mousemove touchmove", moveDiagram);
|
|
}
|
|
}
|
|
function moveDiagram(event, x_offset, y_offset) {
|
|
// This function is invoked on mousemove
|
|
var x_pos = 0, y_pos = 0, x_el = 0, y_el = 0;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
x_el = draggable.offset().left - draggable.parent().offset().left;
|
|
y_el = draggable.offset().top - draggable.parent().offset().top;
|
|
// Scale offset for X
|
|
// (otherwise, this function only works on scale = 1.0)
|
|
x_so = draggable.parent().width() / 2 * (1 - instance.getZoom());
|
|
|
|
var fastOffsetX = calcOffsetX(event);
|
|
var fastOffsetY = calcOffsetY(event);
|
|
|
|
x_pos = x_el - x_so + (fastOffsetX - x_start);
|
|
y_pos = y_el + (fastOffsetY - y_start);
|
|
x_start = fastOffsetX;
|
|
y_start = fastOffsetY;
|
|
if (draggable !== null) {
|
|
elLeft(draggable, x_pos);
|
|
elTop(draggable, y_pos);
|
|
}
|
|
}
|
|
}
|
|
// This needs to be here due to Firefox
|
|
function calcOffsetX(e) {
|
|
return (drag_type == DRAG_TOUCH ?
|
|
(e.originalEvent.touches[0].offsetX || e.originalEvent.touches[0].pageX) :
|
|
(e.offsetX || e.pageX)
|
|
) - $(e.target).offset().left;
|
|
}
|
|
function calcOffsetY(e) {
|
|
return (drag_type == DRAG_TOUCH ?
|
|
(e.originalEvent.touches[0].offsetY || e.originalEvent.touches[0].pageY) :
|
|
(e.offsetY || e.pageY)
|
|
) - $(e.target).offset().top;
|
|
}
|
|
|
|
// Default parameter values
|
|
var params2 = params ? params : {};
|
|
var gridDistX = params2.gridDistX || 350;
|
|
var gridDistY = params2.gridDistY || 350;
|
|
var modulesDraggable = params2.modulesDraggable || false;
|
|
var connectionsEditable = params2.connectionsEditable || false;
|
|
var zoomEnabled = params2.zoomEnabled || false;
|
|
var zoomMin = params2.zoomMin || 0.3;
|
|
var zoomMax = params2.zoomMax || 1.0;
|
|
var zoomDist = params2.zoomDist || 150;
|
|
var scrollEnabled = params2.scrollEnabled || true;
|
|
|
|
// CSS_STYLE
|
|
var endpointStyle = params2.endpointStyle || DEFAULT_ENDPOINT_STYLE;
|
|
var connectionHoverStyle = params2.connectionHoverStyle || DEFAULT_CONNECTION_HOVER_STYLE;
|
|
var connectionOverlayStyle = params2.connectionOverlayStyle || DEFAULT_CONNECTION_OVERLAY_STYLE;
|
|
var connectionLabelStyle = params2.connectionLabelStyle || DEFAULT_CONNECTION_LABEL_STYLE;
|
|
var anchorStyle = params2.anchorStyle || null;
|
|
var connectorStyle = params2.connectorStyle || null;
|
|
var connectorStyle2 = params2.connectorStyle2 || null;
|
|
|
|
// End of parameters block
|
|
|
|
var container = $(containerSel);
|
|
var containerChild = $(containerChildSel);
|
|
|
|
// Script for multitouch events
|
|
hammertime = new Hammer(document.getElementById("canvas-container"));
|
|
hammertime.get('pinch').set({ enable: canHammer });
|
|
|
|
function hammerZoom (event) {
|
|
zoom = instance.getZoom() * event.scale;
|
|
if (zoom < zoomMin)
|
|
zoom = zoomMin;
|
|
else if (zoom > zoomMax)
|
|
zoom = zoomMax;
|
|
zoomInstance(containerChild, zoom);
|
|
}
|
|
|
|
// Setup some styling defaults for jsPlumb
|
|
instance = jsPlumb.getInstance({
|
|
Endpoint: endpointStyle,
|
|
ConnectionOverlays: [ connectionOverlayStyle ],
|
|
Container: containerChild
|
|
});
|
|
|
|
window.jsp = instance;
|
|
var modules = $(modulesSel);
|
|
var jsp_modules = jsPlumb.getSelector(modulesSel);
|
|
draggable = $(containerChildSel);
|
|
|
|
if (modulesDraggable) {
|
|
// Initialize draggable elements
|
|
addDraggablesToInstance(jsp_modules, gridDistX, gridDistY);
|
|
}
|
|
|
|
if (connectionsEditable) {
|
|
instance.bind("beforeDetach", function(connection) {
|
|
});
|
|
|
|
// Prevent a connection to be made if it already exists between 2 modules
|
|
instance.bind("beforeDrop", function(info) {
|
|
var newConnection = info.connection;
|
|
var allConnections = instance.getAllConnections();
|
|
var conn;
|
|
for (var i = 0; i < allConnections.length; i++) {
|
|
conn = allConnections[i];
|
|
if (_.isEqual(conn.source, newConnection.source) &&
|
|
_.isEqual(conn.target, newConnection.target)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Now, check if we created a cycle
|
|
var srcNode = $(newConnection.source).attr("data-module-id");
|
|
var targetNode = $(newConnection.target).attr("data-module-id");
|
|
graph.addEdge(srcNode, targetNode);
|
|
if (!jsnx.isDirectedAcyclicGraph(graph)) {
|
|
graph.removeEdge(srcNode, targetNode);
|
|
return false;
|
|
}
|
|
|
|
var srcModuleEl = $("#" + srcNode);
|
|
var targetModuleEl = $("#" + targetNode);
|
|
|
|
//Modules should belong to module group now
|
|
//Show module group options for target and source
|
|
|
|
srcModuleEl.find(".clone-module-group").parents("li").show();
|
|
srcModuleEl.find(".move-module-group").parents("li").show();
|
|
srcModuleEl.find(".delete-module-group").parents("li").show();
|
|
|
|
targetModuleEl.find(".clone-module-group").parents("li").show();
|
|
targetModuleEl.find(".move-module-group").parents("li").show();
|
|
targetModuleEl.find(".delete-module-group").parents("li").show();
|
|
return true;
|
|
});
|
|
|
|
// Bind a connection listener. Note that the parameter passed to this function contains more than
|
|
// just the new connection - see the documentation for a full list of what is included in 'info'.
|
|
// this listener sets the connection's internal
|
|
// id as the label overlay's text.
|
|
instance.bind("connection", function (info) {
|
|
_.each(instance.getAllConnections(), function(conn) {
|
|
conn.endpoints[0].setEnabled(false);
|
|
conn.endpoints[1].setEnabled(false);
|
|
});
|
|
});
|
|
|
|
// Bind a click listener to each connection
|
|
instance.bind("click", function (c) {
|
|
// Remove the edge from our graph data structure
|
|
graph.removeEdge(c.sourceId, c.targetId);
|
|
|
|
// Remove edge from GUI
|
|
instance.detach(c);
|
|
|
|
// Hide module group options if source or target module
|
|
// is not part of a module group anymore
|
|
|
|
var srcModuleEl = $("#" + c.sourceId);
|
|
var targetModuleEl = $("#" + c.targetId);
|
|
//First source
|
|
if (graph.degree(c.sourceId) === 0) {
|
|
srcModuleEl.find(".clone-module-group").parents("li").hide();
|
|
srcModuleEl.find(".move-module-group").parents("li").hide();
|
|
srcModuleEl.find(".delete-module-group").parents("li").hide();
|
|
}
|
|
if (graph.degree(c.targetId) === 0) {
|
|
targetModuleEl.find(".clone-module-group").parents("li").hide();
|
|
targetModuleEl.find(".move-module-group").parents("li").hide();
|
|
targetModuleEl.find(".delete-module-group").parents("li").hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Suspend drawing and initialize
|
|
if (modules.length > 0) {
|
|
instance.batch(function () {
|
|
// Set elements as connection sources
|
|
setElementsAsDragSources(jsp_modules, anchorStyle, connectorStyle, connectorStyle2);
|
|
|
|
// Initialise all elements as connection targets
|
|
setElementsAsDropTargets(jsp_modules);
|
|
|
|
// Initialize module connections
|
|
var module, outs;
|
|
_.each(modules, function(m) {
|
|
module = $(m);
|
|
outs = graph.successors(module.attr("data-module-id"));
|
|
_.each(outs, function(out) {
|
|
instance.connect({source: module, target: $("div[data-module-id=" + out + "]")})
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Enable/disable connection endpoints
|
|
/*
|
|
_.each(instance.getAllConnections(), function(conn) {
|
|
conn.endpoints[0].setEnabled(connectionsEditable);
|
|
conn.endpoints[1].setEnabled(connectionsEditable);
|
|
});
|
|
*/
|
|
_.each(instance.getAllConnections(), function(conn) {
|
|
conn.endpoints[0].setEnabled(false);
|
|
conn.endpoints[1].setEnabled(false);
|
|
});
|
|
// Update style on existing connections
|
|
if (connectionsEditable) {
|
|
_.each(instance.getAllConnections(), function(conn) {
|
|
conn.setHoverPaintStyle(connectionHoverStyle);
|
|
conn.setLabel(connectionLabelStyle);
|
|
});
|
|
}
|
|
|
|
// Make sure the new connections will have same style
|
|
if (connectionsEditable) {
|
|
instance.importDefaults({
|
|
HoverPaintStyle: connectionHoverStyle,
|
|
ConnectionOverlays: [
|
|
connectionOverlayStyle,
|
|
[ "Label", connectionLabelStyle ]
|
|
]
|
|
});
|
|
} else {
|
|
instance.importDefaults({
|
|
HoverPaintStyle: connectionHoverStyle,
|
|
ConnectionOverlays: [ connectionOverlayStyle ]
|
|
});
|
|
}
|
|
|
|
// Enable / disable instance configs
|
|
if (modules.length > 0) {
|
|
instance.setDraggable(jsp_modules, modulesDraggable);
|
|
instance.setSourceEnabled(jsp_modules, connectionsEditable);
|
|
instance.setTargetEnabled(jsp_modules, connectionsEditable);
|
|
}
|
|
|
|
// Bind the mouse scroll event to scaling
|
|
if (zoomEnabled) {
|
|
container.mousewheel(function(event) {
|
|
zoom = instance.getZoom() + (event.deltaY / 20);
|
|
if (zoom < zoomMin || zoom > zoomMax) {
|
|
return;
|
|
}
|
|
zoomInstance(containerChild, zoom);
|
|
});
|
|
|
|
hammertime.on('pinch', hammerZoom);
|
|
}
|
|
|
|
if (scrollEnabled) {
|
|
// Make the jsPlumb container movable/draggable for "google maps" effect
|
|
container.on("mousedown touchstart", mouseDown);
|
|
container.on("mouseup mouseout touchend", mouseUp);
|
|
}
|
|
|
|
// If this is not triggered, dropdown in edit mode
|
|
// don't work on Firefox prior to zooming the canvas
|
|
zoomInstance(containerChild, 1.0);
|
|
|
|
jsPlumb.fire("jsPlumbLoaded", instance);
|
|
}
|
|
|
|
// Opens edit mode if redirected from empty experiment
|
|
(function noWorkflowimgEditMode(){
|
|
if( getParam('editMode') ){
|
|
$("#edit-canvas-button").click();
|
|
}
|
|
})();
|
|
|
|
/** prevent reload page */
|
|
var preventCanvasReloadOnSave = (function() {
|
|
'use strict';
|
|
|
|
function confirmReload() {
|
|
if( confirm(I18n.t('experiments.canvas.reload_on_submit')) ) {
|
|
return true;
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
function preventCanvasReload() {
|
|
document.onkeydown = function(){
|
|
switch (event.keyCode){
|
|
case 116:
|
|
event.returnValue = false;
|
|
return confirmReload();
|
|
case 82:
|
|
if (event.ctrlKey){
|
|
event.returnValue = false;
|
|
return confirmReload();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function bindToCanvasSave(fun) {
|
|
$('#canvas-save').on('click', function() {
|
|
fun();
|
|
})
|
|
}
|
|
|
|
return function() { bindToCanvasSave(preventCanvasReload) };
|
|
})();
|