Skip to content

dream
dream
Commit e3e0d1ac authored by Thibaut Frain's avatar Thibaut Frain Committed by Jérome Perrin
Browse files
Options

Made jsplumb gadget internal methods not redefined at each gadget declarations

parent 69f8884c
Show whitespace changes
Inline Side-by-side
Showing with 465 additions and 465 deletions
dream/platform/src2/jsplumb/jsplumb.js
View file @ e3e0d1ac
......@@ -21,47 +21,141 @@
(function (RSVP, rJS, $, jsPlumb, confirm) {
"use strict";
rJS(window)
.ready(function (g) {
g.private = {
getNodeId: function (element_id) {
function getNodeId(node_container, element_id) {
var node_id;
$.each(g.private.node_container, function (k, v) {
$.each(node_container, function (k, v) {
if (v.element_id === element_id) {
node_id = k;
return false;
}
});
return node_id;
},
}
getElementId: function (node_id) {
return g.private.node_container[node_id].element_id;
},
function getElementId(node_container, node_id) {
return node_container[node_id].element_id;
}
generateNodeId: function (element_type, option) {
var n = 1;
while (g.private.node_container[
((option.short_id || element_type) + n)
] !== undefined) {
n += 1;
// function generateNodeId(node_container, element_type, option) {
// var n = 1;
// while (node_container[
// ((option.short_id || element_type) + n)
// ] !== undefined) {
// n += 1;
// }
// return (option.short_id || element_type) + n;
// }
// function generateElementId(gadget_element) {
// var n = 1;
// while ($(gadget_element).find('#DreamNode_' + n).length > 0) {
// n += 1;
// }
// return 'DreamNode_' + n;
// }
function onDataChange() {
//$.publish("Dream.Gui.onDataChange", g.private.getData());
return undefined;
}
return (option.short_id || element_type) + n;
},
generateElementId: function () {
var n = 1;
while ($(g.private.element).find('#DreamNode_' + n).length > 0) {
n += 1;
function convertToAbsolutePosition(gadget, x, y) {
var zoom_level = (gadget.private.preference_container.zoom_level || 1.0) *
1.1111,
canvas_size_x = $(gadget.private.element).find('#main').width(),
canvas_size_y = $(gadget.private.element).find('#main').height(),
size_x = $(gadget.private.element).find('.dummy_window').width() *
zoom_level,
size_y = $(gadget.private.element).find('.dummy_window').height() *
zoom_level,
top = Math.floor(y * (canvas_size_y - size_y)) + "px",
left = Math.floor(x * (canvas_size_x - size_x)) + "px";
return [left, top];
}
function convertToRelativePosition(gadget, x, y) {
var zoom_level = (gadget.private.preference_container.zoom_level || 1.0) *
1.1111,
canvas_size_x = $(gadget.private.element).find('#main').width(),
canvas_size_y = $(gadget.private.element).find('#main').height(),
size_x = $(gadget.private.element).find('.dummy_window').width() *
zoom_level,
size_y = $(gadget.private.element).find('.dummy_window').height() *
zoom_level,
top = Math.max(Math.min(y.replace('px', '') /
(canvas_size_y - size_y), 1), 0),
left = Math.max(Math.min(x.replace('px', '') /
(canvas_size_x - size_x), 1), 0);
return [left, top];
}
return 'DreamNode_' + n;
},
initJsPlumb: function () {
g.private.jsplumb_instance.setRenderMode(
g.private.jsplumb_instance.SVG
function updateElementCoordinate(gadget, node_id, coordinate) {
var element_id = gadget.private.node_container[node_id].element_id,
coordinates = gadget.private.preference_container.coordinates || {},
element,
relative_position;
if (coordinate === undefined) {
coordinate = {};
element = $(gadget.private.element).find("#" + element_id);
relative_position = convertToRelativePosition(
gadget,
element.css('left'),
element.css('top')
);
g.private.jsplumb_instance.importDefaults({
coordinate.top = relative_position[1];
coordinate.left = relative_position[0];
}
coordinates[node_id] = coordinate;
gadget.private.preference_container.coordinates = coordinates;
onDataChange();
return coordinate;
}
function draggable(gadget) {
var jsplumb_instance = gadget.private.jsplumb_instance,
stop = function (element) {
updateElementCoordinate(gadget, getNodeId(
gadget.private.node_container,
element.target.id
));
};
jsplumb_instance
.draggable(jsplumb_instance.getSelector(".window"), {
containment: 'parent',
grid: [10, 10],
stop: stop // FIXME: we should only accept if dropped in #main
});
jsplumb_instance
.makeSource(jsplumb_instance.getSelector(".window"), {
filter: ".ep",
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 20
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
}
});
jsplumb_instance
.makeTarget(jsplumb_instance.getSelector(".window"), {
dropOptions: {
hoverClass: "dragHover"
},
anchor: "Continuous"
});
}
function initJsPlumb(gadget) {
var jsplumb_instance = gadget.private.jsplumb_instance;
jsplumb_instance.setRenderMode(jsplumb_instance.SVG);
jsplumb_instance.importDefaults({
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
......@@ -82,292 +176,201 @@
// listen for clicks on connections,
// and offer to change values on click.
g.private.jsplumb_instance.bind("click", function (conn) {
g.private.jsplumb_instance.detach(conn);
jsplumb_instance.bind("click", function (conn) {
jsplumb_instance.detach(conn);
});
g.private.jsplumb_instance.bind("beforeDetach", function (conn) {
jsplumb_instance.bind("beforeDetach", function (conn) {
return confirm("Delete connection?");
});
g.private.jsplumb_instance
jsplumb_instance
.bind("connectionDrag", function (connection) {
return undefined;
});
g.private.jsplumb_instance
jsplumb_instance
.bind("connectionDragStop", function (connection) {
return undefined;
});
// split in 2 methods ? one for events one for manip
g.private.updateConnectionData
gadget.private.updateConnectionData
= function (connection, remove, edge_data) {
if (remove) {
delete g.private.edge_container[connection.id];
delete gadget.private.edge_container[connection.id];
} else {
g.private.edge_container[connection.id] = [
g.private.getNodeId(connection.sourceId),
g.private.getNodeId(connection.targetId), edge_data || {}
gadget.private.edge_container[connection.id] = [
getNodeId(gadget.private.node_container, connection.sourceId),
getNodeId(gadget.private.node_container, connection.targetId),
edge_data || {}
];
}
g.private.onDataChange();
onDataChange();
};
// bind to connection/connectionDetached events,
// and update the list of connections on screen.
g.private.jsplumb_instance
jsplumb_instance
.bind("connection", function (info, originalEvent) {
g.private.updateConnectionData(info.connection);
gadget.private.updateConnectionData(info.connection);
});
g.private.jsplumb_instance
jsplumb_instance
.bind("connectionDetached", function (info, originalEvent) {
g.private.updateConnectionData(info.connection, true);
gadget.private.updateConnectionData(info.connection, true);
});
g.private.onDataChange();
g.private.draggable();
},
updateElementCoordinate: function (node_id, coordinate) {
var element_id = g.private.node_container[node_id].element_id,
coordinates = g.private.preference_container.coordinates || {},
element,
relative_position;
if (coordinate === undefined) {
coordinate = {};
element = $(g.private.element).find("#" + element_id);
relative_position = g.private.convertToRelativePosition(
element.css('left'),
element.css('top')
);
coordinate.top = relative_position[1];
coordinate.left = relative_position[0];
onDataChange();
draggable(gadget);
}
coordinates[node_id] = coordinate;
g.private.preference_container.coordinates = coordinates;
g.private.onDataChange();
return coordinate;
},
updateNodeStyle: function (element_id) {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
function updateNodeStyle(gadget, element_id) {
var zoom_level = (gadget.private.preference_container.zoom_level || 1.0) *
1.1111,
element = $(g.private.element).find("#" + element_id),
element = $(gadget.private.element).find("#" + element_id),
new_value;
$.each(g.private.style_attr_list, function (i, j) {
new_value = $(g.private.element).find('.dummy_window').css(j)
$.each(gadget.private.style_attr_list, function (i, j) {
new_value = $(gadget.private.element).find('.dummy_window').css(j)
.replace('px', '') * zoom_level + 'px';
element.css(j, new_value);
});
},
convertToAbsolutePosition: function (x, y) {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
1.1111,
canvas_size_x = $(g.private.element).find('#main').width(),
canvas_size_y = $(g.private.element).find('#main').height(),
size_x = $(g.private.element).find('.dummy_window').width() *
zoom_level,
size_y = $(g.private.element).find('.dummy_window').height() *
zoom_level,
top = Math.floor(y * (canvas_size_y - size_y)) + "px",
left = Math.floor(x * (canvas_size_x - size_x)) + "px";
return [left, top];
},
convertToRelativePosition: function (x, y) {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
1.1111,
canvas_size_x = $(g.private.element).find('#main').width(),
canvas_size_y = $(g.private.element).find('#main').height(),
size_x = $(g.private.element).find('.dummy_window').width() *
zoom_level,
size_y = $(g.private.element).find('.dummy_window').height() *
zoom_level,
top = Math.max(Math.min(y.replace('px', '') /
(canvas_size_y - size_y), 1), 0),
left = Math.max(Math.min(x.replace('px', '') /
(canvas_size_x - size_x), 1), 0);
return [left, top];
},
draggable: function () {
var stop = function (element) {
g.private.updateElementCoordinate(g.private.getNodeId(
element.target.id
));
};
g.private.jsplumb_instance
.draggable(g.private.jsplumb_instance.getSelector(".window"), {
containment: 'parent',
grid: [10, 10],
stop: stop // FIXME: we should only accept if dropped in #main
});
g.private.jsplumb_instance
.makeSource(g.private.jsplumb_instance.getSelector(".window"), {
filter: ".ep",
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 20
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
}
});
g.private.jsplumb_instance
.makeTarget(g.private.jsplumb_instance.getSelector(".window"), {
dropOptions: {
hoverClass: "dragHover"
},
anchor: "Continuous"
});
},
addElementToContainer: function (element) {
function addElementToContainer(node_container, element) {
// Now update the container of elements
/*jslint nomen: true*/
var element_data = {
_class: element._class,
element_id: element.element_id
};
g.private.node_container[element.id] = element_data;
},
onDataChange: function () {
//$.publish("Dream.Gui.onDataChange", g.private.getData());
return undefined;
},
style_attr_list: ['width', 'height', 'padding-top', 'line-height'],
positionGraph: function () {
$.ajax(
'/positionGraph',
{
data: JSON.stringify(g.private.getData()),
contentType: 'application/json',
type: 'POST',
success: function (data, textStatus, jqXHR) {
$.each(data, function (node, pos) {
g.private.convertToAbsolutePosition(
pos.left,
pos.top
);
g.private.updateElementCoordinate(node, {
top: pos.top,
left: pos.left
});
});
g.private.redraw();
node_container[element.id] = element_data;
}
}
);
},
setZoom: function (zoom_level) {
$.each(g.private.style_attr_list, function (i, j) {
var new_value = $(g.private.element).find('.dummy_window')
.css(j).replace('px', '') * zoom_level + 'px';
$(g.private.element).find('.window').css(j, new_value);
});
},
zoom_in: function () {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
1.1111;
g.private.setZoom(zoom_level);
g.private.preference_container.zoom_level = zoom_level;
g.private.onDataChange();
g.private.redraw();
},
zoom_out: function () {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
0.9;
g.private.setZoom(zoom_level);
g.private.preference_container.zoom_level = zoom_level;
g.private.onDataChange();
g.private.redraw();
},
redraw: function () {
var coordinates = g.private.preference_container.coordinates || {},
// function getData(gadget) {
// var data = {
// "nodes": gadget.private.node_container,
// "edges": gadget.private.edge_container,
// "preference": gadget.private.preference_container,
// "general": gadget.private.general_container
// },
// wip_spreadsheet = $(gadget.private.element).find('#wip_spreadsheet'),
// wip_part_spreadsheet = $(gadget.private.element)
// .find('#wip_part_spreadsheet'),
// shift_spreadsheet = $(gadget.private.element)
// .find('#shift_spreadsheet');
// if (wip_spreadsheet.length > 0) {
// data.wip_spreadsheet = wip_spreadsheet.handsontable('getData');
// }
// if (wip_part_spreadsheet.length > 0) {
// data.wip_part_spreadsheet = wip_part_spreadsheet
// .handsontable('getData');
// }
// if (shift_spreadsheet.length > 0) {
// data.shift_spreadsheet = shift_spreadsheet.handsontable('getData');
// }
// return data;
// }
function redraw(gadget) {
var coordinates = gadget.private.preference_container.coordinates || {},
absolute_position,
element;
$.each(coordinates, function (node_id, v) {
absolute_position = g.private.convertToAbsolutePosition(
absolute_position = convertToAbsolutePosition(
gadget,
v.left,
v.top
);
element = $(g.private.element).find('#' + g.private.getElementId(
node_id
));
element = $(gadget.private.element).find(
'#' + getElementId(gadget.private.node_container, node_id)
);
element.css('top', absolute_position[1]);
element.css('left', absolute_position[0]);
g.private.jsplumb_instance.repaint(element);
gadget.private.jsplumb_instance.repaint(element);
});
},
getData: function () {
var data = {
"nodes": g.private.node_container,
"edges": g.private.edge_container,
"preference": g.private.preference_container,
"general": g.private.general_container
},
wip_spreadsheet = $(g.private.element).find('#wip_spreadsheet'),
wip_part_spreadsheet = $(g.private.element)
.find('#wip_part_spreadsheet'),
shift_spreadsheet = $(g.private.element)
.find('#shift_spreadsheet');
if (wip_spreadsheet.length > 0) {
data.wip_spreadsheet = wip_spreadsheet.handsontable('getData');
}
if (wip_part_spreadsheet.length > 0) {
data.wip_part_spreadsheet = wip_part_spreadsheet
.handsontable('getData');
}
if (shift_spreadsheet.length > 0) {
data.shift_spreadsheet = shift_spreadsheet.handsontable('getData');
}
return data;
},
removeElement: function (node_id) {
var element_id = g.private.node_container[node_id].element_id;
g.private.jsplumb_instance.removeAllEndpoints($(g.private.element)
.find("#" + element_id));
$(g.private.element).find("#" + element_id).remove();
delete g.private.node_container[node_id];
delete g.private.preference_container.coordinates[node_id];
$.each(g.private.edge_container, function (k, v) {
if (node_id === v[0] || node_id === v[1]) {
delete g.private.edge_container[k];
}
});
g.private.onDataChange();
},
updateElementData: function (node_id, data) {
var element_id = g.private.node_container[node_id].element_id,
// function positionGraph(gadget) {
// $.ajax(
// '/positionGraph',
// {
// data: JSON.stringify(getData()),
// contentType: 'application/json',
// type: 'POST',
// success: function (data, textStatus, jqXHR) {
// $.each(data, function (node, pos) {
// convertToAbsolutePosition(
// gadget,
// pos.left,
// pos.top
// );
// updateElementCoordinate(gadget, node, {
// top: pos.top,
// left: pos.left
// });
// });
// redraw(gadget);
// }
// }
// );
// }
// function setZoom(gadget, zoom_level) {
// $.each(gadget.private.style_attr_list, function (i, j) {
// var new_value = $(gadget.private.element).find('.dummy_window')
// .css(j).replace('px', '') * zoom_level + 'px';
// $(gadget.private.element).find('.window').css(j, new_value);
// });
// }
// function zoom_in(gadget) {
// var zoom_level = (gadget.private.preference_container.zoom_level || 1.0) *
// 1.1111;
// setZoom(gadget, zoom_level);
// gadget.private.preference_container.zoom_level = zoom_level;
// onDataChange();
// redraw(gadget);
// }
// function zoom_out(gadget) {
// var zoom_level = (gadget.private.preference_container.zoom_level || 1.0) *
// 0.9;
// setZoom(gadget, zoom_level);
// gadget.private.preference_container.zoom_level = zoom_level;
// onDataChange();
// redraw(gadget);
// }
// function removeElement(gadget, node_id) {
// var element_id = gadget.private.node_container[node_id].element_id;
// gadget.private.jsplumb_instance.removeAllEndpoints(
// $(gadget.private.element).find("#" + element_id)
// );
// $(gadget.private.element).find("#" + element_id).remove();
// delete gadget.private.node_container[node_id];
// delete gadget.private.preference_container.coordinates[node_id];
// $.each(gadget.private.edge_container, function (k, v) {
// if (node_id === v[0] || node_id === v[1]) {
// delete gadget.private.edge_container[k];
// }
// });
// onDataChange();
// }
function updateElementData(gadget, node_id, data) {
var element_id = gadget.private.node_container[node_id].element_id,
new_id = data.id;
if (data.name) {
$(g.private.element).find("#" + element_id).text(data.name)
$(gadget.private.element).find("#" + element_id).text(data.name)
.append('<div class="ep"></div></div>');
g.private.node_container[node_id].name = data.name;
gadget.private.node_container[node_id].name = data.name;
}
delete data.id;
$.extend(g.private.node_container[node_id], data.data);
$.extend(gadget.private.node_container[node_id], data.data);
if (new_id && new_id !== node_id) {
g.private.node_container[new_id]
= g.private.node_container[node_id];
delete g.private.node_container[node_id];
$.each(g.private.edge_container, function (k, v) {
gadget.private.node_container[new_id]
= gadget.private.node_container[node_id];
delete gadget.private.node_container[node_id];
$.each(gadget.private.edge_container, function (k, v) {
if (v[0] === node_id) {
v[0] = new_id;
}
......@@ -375,36 +378,28 @@
v[1] = new_id;
}
});
g.private.preference_container.coordinates[new_id]
= g.private.preference_container.coordinates[node_id];
delete g.private.preference_container.coordinates[node_id];
gadget.private.preference_container.coordinates[new_id]
= gadget.private.preference_container.coordinates[node_id];
delete gadget.private.preference_container.coordinates[node_id];
}
onDataChange();
}
g.private.onDataChange();
},
start: function () {
g.private.node_container = {};
g.private.edge_container = {};
g.private.preference_container = {};
g.private.general_container = {};
g.private.initJsPlumb();
},
clearAll: function () {
$.each(g.private.node_container, function (node_id) {
g.private.removeElement(node_id);
});
// delete anything if still remains
$(g.private.element).find("#main").children().remove();
g.private.node_container = {};
g.private.edge_container = {};
g.private.preference_container = {};
g.private.general_container = {};
g.private.initGeneralProperties();
g.private.prepareDialogForGeneralProperties();
},
addEdge: function (edge_id, edge_data) {
// function clearAll(gadget) {
// $.each(gadget.private.node_container, function (node_id) {
// removeElement(gadget, node_id);
// });
// // delete anything if still remains
// $(gadget.private.element).find("#main").children().remove();
// gadget.private.node_container = {};
// gadget.private.edge_container = {};
// gadget.private.preference_container = {};
// gadget.private.general_container = {};
// gadget.private.initGeneralProperties();
// gadget.private.prepareDialogForGeneralProperties();
// }
function addEdge(gadget, edge_id, edge_data) {
var source_id = edge_data[0],
target_id = edge_data[1],
data = edge_data[2],
......@@ -416,43 +411,43 @@
label: data.title
}]];
}
connection = g.private.jsplumb_instance.connect({
source: g.private.getElementId(source_id),
target: g.private.getElementId(target_id),
connection = gadget.private.jsplumb_instance.connect({
source: getElementId(gadget.private.node_container, source_id),
target: getElementId(gadget.private.node_container, target_id),
Connector: [ "Bezier", {curviness: 75} ],
overlays: overlays
});
// call again updateConnectionData to set the connection data that
// was not passed to the connection hook
g.private.updateConnectionData(connection, 0, data);
},
gadget.private.updateConnectionData(connection, 0, data);
}
setPreferences: function (preferences) {
g.private.preference_container = preferences;
var zoom_level = g.private.preference_container.zoom_level || 1.0;
g.private.setZoom(zoom_level);
},
// function setPreferences(gadget, preferences) {
// gadget.private.preference_container = preferences;
// var zoom_level = gadget.private.preference_container.zoom_level || 1.0;
// setZoom(gadget, zoom_level);
// }
setGeneralProperties: function (properties) {
g.private.general_container = properties;
g.private.onDataChange();
},
// function setGeneralProperties(gadget, properties) {
// gadget.private.general_container = properties;
// onDataChange();
// }
updateGeneralProperties: function (properties) {
$.extend(g.private.general_container, properties);
g.private.onDataChange();
},
// function updateGeneralProperties(gadget, properties) {
// $.extend(gadget.private.general_container, properties);
// onDataChange();
// }
newElement: function (element, option) {
function newElement(gadget, element, option) {
element.name = element.name || option.name;
g.private.addElementToContainer(element);
var render_element,
addElementToContainer(gadget.private.node_container, element);
var render_element = $(gadget.private.element).find("#main"),
coordinate = element.coordinate,
box,
absolute_position;
render_element = $(g.private.element).find("#main");
if (coordinate !== undefined) {
coordinate = g.private.updateElementCoordinate(
coordinate = updateElementCoordinate(
gadget,
element.id,
coordinate
);
......@@ -464,25 +459,28 @@
(element.name || element.id) + '">' +
element.id +
'<div class="ep"></div></div>');
box = $(g.private.element).find("#" + element.element_id);
absolute_position = g.private.convertToAbsolutePosition(
box = $(gadget.private.element).find("#" + element.element_id);
absolute_position = convertToAbsolutePosition(
gadget,
coordinate.left,
coordinate.top
);
box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]);
g.private.updateNodeStyle(element.element_id);
g.private.draggable();
g.private.onDataChange();
updateNodeStyle(gadget, element.element_id);
draggable(gadget);
onDataChange();
}
};
})
rJS(window)
.ready(function (g) {
window.g = g;
return g.getElement(function (el) {
g.private.element = el;
});
g.private = {
node_container: {},
edge_container: {},
preference_container: {},
general_container: {},
style_attr_list: ['width', 'height', 'padding-top', 'line-height']
};
})
.declareMethod('render', function (data) {
......@@ -491,15 +489,16 @@
})
.declareMethod('startService', function () {
var g = this;
return this.getElement()
.push(function (element) {
g.private.element = element;
g.private.start();
var preference = g.private.data.preference !== undefined ?
g.private.data.preference : {},
var gadget = this,
preference = gadget.private.data.preference !== undefined ?
gadget.private.data.preference : {},
coordinates = preference.coordinates;
$.each(g.private.data.nodes, function (key, value) {
return gadget.getElement()
.push(function (el) {
gadget.private.element = el;
initJsPlumb(gadget);
$.each(gadget.private.data.nodes, function (key, value) {
if (coordinates === undefined || coordinates[key] === undefined) {
value.coordinate = {
'top': 0.0,
......@@ -509,24 +508,25 @@
value.coordinate = coordinates[key];
}
value.id = key;
g.private.newElement(value);
newElement(gadget, value);
if (value.data) { // backward compatibility
g.private.updateElementData(key, {
updateElementData(gadget, key, {
data: value.data
});
}
});
$.each(g.private.data.edges, function (key, value) {
g.private.addEdge(key, value);
$.each(gadget.private.data.edges, function (key, value) {
addEdge(gadget, key, value);
});
g.private.redraw();
redraw(gadget);
})
.push(function () {
// Infinite wait, until cancelled
return new RSVP.defer().promise;
})
.push(undefined, function (error) {
$(g.private.element).find("#main").html("");
$(gadget.private.element).find("#main").html("");
throw error;
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7