Commit 564116c2 authored by Jérome Perrin's avatar Jérome Perrin

update to new jsplumb gadget from DREAM (without patches)

parent 5f06ae20
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>_EtagSupport__etag</string> </key> <key> <string>_EtagSupport__etag</string> </key>
<value> <string>ts17764628.88</string> </value> <value> <string>ts18282338.36</string> </value>
</item> </item>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
...@@ -41,28 +41,25 @@ ...@@ -41,28 +41,25 @@
* along with DREAM. If not, see <http://www.gnu.org/licenses/>.\n * along with DREAM. If not, see <http://www.gnu.org/licenses/>.\n
* ==========================================================================*/\n * ==========================================================================*/\n
/*global RSVP, rJS, $, jsPlumb, Handlebars,\n /*global RSVP, rJS, $, jsPlumb, Handlebars,\n
loopEventListener, promiseEventListener, DOMParser, confirm */\n loopEventListener, promiseEventListener, DOMParser */\n
/*jslint unparam: true todo: true */\n /*jslint unparam: true todo: true */\n
(function(RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser) {\n (function(RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser) {\n
"use strict";\n "use strict";\n
/* TODO:\n /* TODO:\n
* use services\n
* drop jquery ui dependency\n * drop jquery ui dependency\n
* less dependancies ( promise event listner ? )\n * less dependancies ( promise event listner ? )\n
* document exposed css / jsplumb config\n * document exposed css / jsplumb config\n
* no more handlebars\n * no more handlebars\n
* accept ERP5 format\n
* auto springy layout\n * auto springy layout\n
* drop zoom level\n * drop zoom level\n
* edge edit popup on click\n
* rename draggable()\n * rename draggable()\n
* somehow choose edge class on connect\n * allow changing node and edge class\n
* factorize node & edge popup edition\n
*/\n */\n
/*jslint nomen: true */\n /*jslint nomen: true */\n
var gadget_klass = rJS(window),\n var gadget_klass = rJS(window), node_template_source = gadget_klass.__template_element.getElementById("node-template").innerHTML, node_template = Handlebars.compile(node_template_source), popup_edit_template = gadget_klass.__template_element.getElementById("popup-edit-template"), domParser = new DOMParser();\n
domParser = new DOMParser(),\n
node_template_source = gadget_klass.__template_element.getElementById("node-template").innerHTML,\n
node_template = Handlebars.compile(node_template_source),\n
popup_edit_template = gadget_klass.__template_element.getElementById("popup-edit-template");\n
\n
function loopJsplumbBind(gadget, type, callback) {\n function loopJsplumbBind(gadget, type, callback) {\n
//////////////////////////\n //////////////////////////\n
// Infinite event listener (promise is never resolved)\n // Infinite event listener (promise is never resolved)\n
...@@ -92,6 +89,7 @@ ...@@ -92,6 +89,7 @@
reject(error);\n reject(error);\n
}\n }\n
});\n });\n
return callback_promise;\n
};\n };\n
jsplumb_instance.bind(type, handle_event_callback);\n jsplumb_instance.bind(type, handle_event_callback);\n
}\n }\n
...@@ -124,12 +122,21 @@ ...@@ -124,12 +122,21 @@
}\n }\n
return "DreamNode_" + n;\n return "DreamNode_" + n;\n
}\n }\n
function updateConnectionData(gadget, connection, remove, edge_data) {\n function getDefaultEdgeClass(gadget) {\n
// TODO: use first edge class available in class_definition\n
return "Dream.Edge";\n
}\n
function updateConnectionData(gadget, connection, remove) {\n
if (connection.ignoreEvent) {\n
// this hack is for edge edition. Maybe there I missed one thing and\n
// there is a better way.\n
return;\n
}\n
if (remove) {\n if (remove) {\n
delete gadget.props.data.graph.edge[connection.id];\n delete gadget.props.data.graph.edge[connection.id];\n
} else {\n } else {\n
edge_data = edge_data || gadget.props.data.graph.edge[connection.id] || {\n var edge_data = gadget.props.data.graph.edge[connection.id] || {\n
_class: "Dream.Edge"\n _class: getDefaultEdgeClass(gadget)\n
};\n };\n
edge_data.source = getNodeId(gadget, connection.sourceId);\n edge_data.source = getNodeId(gadget, connection.sourceId);\n
edge_data.destination = getNodeId(gadget, connection.targetId);\n edge_data.destination = getNodeId(gadget, connection.targetId);\n
...@@ -137,23 +144,6 @@ ...@@ -137,23 +144,6 @@
}\n }\n
gadget.notifyDataChanged();\n gadget.notifyDataChanged();\n
}\n }\n
function waitForConnection(gadget) {\n
loopJsplumbBind(gadget, "connection", function(info, originalEvent) {\n
updateConnectionData(gadget, info.connection);\n
});\n
}\n
function waitForConnectionDetached(gadget) {\n
loopJsplumbBind(gadget, "connectionDetached", function(info, originalEvent) {\n
updateConnectionData(gadget, info.connection, true);\n
});\n
}\n
function waitForConnectionClick(gadget) {\n
// TODO: dialog to edit connection properties\n
// XXX error in this function are silently ignored !!!\n
loopJsplumbBind(gadget, "dblclick", function(connection) {\n
return window.location.replace(gadget.props.data.graph.edge[connection.id].business_link_url);\n
});\n
}\n
function convertToAbsolutePosition(gadget, x, y) {\n function convertToAbsolutePosition(gadget, x, y) {\n
var zoom_level = gadget.props.zoom_level * 1.1111, canvas_size_x = $(gadget.props.main).width(), canvas_size_y = $(gadget.props.main).height(), size_x = $(gadget.props.element).find(".dummy_window").width() * zoom_level, size_y = $(gadget.props.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";\n var zoom_level = gadget.props.zoom_level * 1.1111, canvas_size_x = $(gadget.props.main).width(), canvas_size_y = $(gadget.props.main).height(), size_x = $(gadget.props.element).find(".dummy_window").width() * zoom_level, size_y = $(gadget.props.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";\n
return [ left, top ];\n return [ left, top ];\n
...@@ -215,24 +205,6 @@ ...@@ -215,24 +205,6 @@
element.css(j, new_value);\n element.css(j, new_value);\n
});\n });\n
}\n }\n
// function redraw(gadget) {\n
// var coordinates = gadget.props.preference_container.coordinates || {},\n
// absolute_position,\n
// element;\n
// $.each(coordinates, function (node_id, v) {\n
// absolute_position = convertToAbsolutePosition(\n
// gadget,\n
// v.left,\n
// v.top\n
// );\n
// element = $(gadget.props.element).find(\n
// \'#\' + gadget.props.node_id_to_dom_element_id[node_id];\n
// );\n
// element.css(\'top\', absolute_position[1]);\n
// element.css(\'left\', absolute_position[0]);\n
// gadget.props.jsplumb_instance.repaint(element);\n
// });\n
// }\n
// function positionGraph(gadget) {\n // function positionGraph(gadget) {\n
// $.ajax(\n // $.ajax(\n
// \'/positionGraph\',\n // \'/positionGraph\',\n
...@@ -262,6 +234,7 @@ ...@@ -262,6 +234,7 @@
gadget.props.jsplumb_instance.removeAllEndpoints($(gadget.props.element).find("#" + element_id));\n gadget.props.jsplumb_instance.removeAllEndpoints($(gadget.props.element).find("#" + element_id));\n
$(gadget.props.element).find("#" + element_id).remove();\n $(gadget.props.element).find("#" + element_id).remove();\n
delete gadget.props.data.graph.node[node_id];\n delete gadget.props.data.graph.node[node_id];\n
delete gadget.props.node_id_to_dom_element_id[node_id];\n
$.each(gadget.props.data.graph.edge, function(k, v) {\n $.each(gadget.props.data.graph.edge, function(k, v) {\n
if (node_id === v.source || node_id === v.destination) {\n if (node_id === v.source || node_id === v.destination) {\n
delete gadget.props.data.graph.edge[k];\n delete gadget.props.data.graph.edge[k];\n
...@@ -269,6 +242,7 @@ ...@@ -269,6 +242,7 @@
});\n });\n
gadget.notifyDataChanged();\n gadget.notifyDataChanged();\n
}\n }\n
// TODO: rename updateNodeData\n
function updateElementData(gadget, node_id, data) {\n function updateElementData(gadget, node_id, data) {\n
var element_id = gadget.props.node_id_to_dom_element_id[node_id], new_id = data.id;\n var element_id = gadget.props.node_id_to_dom_element_id[node_id], new_id = data.id;\n
if (data.data.name) {\n if (data.data.name) {\n
...@@ -334,6 +308,8 @@ ...@@ -334,6 +308,8 @@
overlays: overlays\n overlays: overlays\n
});\n });\n
}\n }\n
// set data for \'connection\' event that will be called "later"\n
gadget.props.data.graph.edge[edge_id] = edge_data;\n
// jsplumb assigned an id, but we are controlling ids ourselves.\n // jsplumb assigned an id, but we are controlling ids ourselves.\n
connection.id = edge_id;\n connection.id = edge_id;\n
}\n }\n
...@@ -348,7 +324,8 @@ ...@@ -348,7 +324,8 @@
for (i = 0; i < class_definition.allOf.length; i += 1) {\n for (i = 0; i < class_definition.allOf.length; i += 1) {\n
referenced = class_definition.allOf[i];\n referenced = class_definition.allOf[i];\n
if (referenced.$ref) {\n if (referenced.$ref) {\n
referenced = expandSchema(full_schema.class_definition[referenced.$ref.substr(1, referenced.$ref.length)], full_schema);\n referenced = expandSchema(full_schema.class_definition[// 2 here is for #/\n
referenced.$ref.substr(2, referenced.$ref.length)], full_schema);\n
}\n }\n
if (referenced.properties) {\n if (referenced.properties) {\n
for (property in referenced.properties) {\n for (property in referenced.properties) {\n
...@@ -363,9 +340,73 @@ ...@@ -363,9 +340,73 @@
}\n }\n
return expanded_class_definition;\n return expanded_class_definition;\n
}\n }\n
function openNodeDialog(gadget, element) {\n function openEdgeEditionDialog(gadget, connection) {\n
var edge_id = connection.id, edge_data = gadget.props.data.graph.edge[edge_id], edit_popup = $(gadget.props.element).find("#popup-edit-template"), schema, fieldset_element, delete_promise;\n
schema = expandSchema(gadget.props.data.class_definition[edge_data._class], gadget.props.data);\n
// We do not edit source & destination on edge this way.\n
delete schema.properties.source;\n
delete schema.properties.destination;\n
gadget.props.element.appendChild(document.importNode(popup_edit_template.content, true).children[0]);\n
edit_popup = $(gadget.props.element).find("#edit-popup");\n
edit_popup.find(".node_class").text(connection._class);\n
fieldset_element = edit_popup.find("fieldset")[0];\n
edit_popup.popup();\n
edit_popup.show();\n
function save_promise(fieldset_gadget, edge_id) {\n
return RSVP.Queue().push(function() {\n
return promiseEventListener(edit_popup.find("form")[0], "submit", false);\n
}).push(function(evt) {\n
var data = {\n
id: $(evt.target[1]).val(),\n
data: {}\n
};\n
return fieldset_gadget.getContent().then(function(r) {\n
$.extend(data.data, gadget.props.data.graph.edge[connection.id]);\n
$.extend(data.data, r);\n
// to redraw, we remove the edge and add again.\n
// but we want to disable events on connection, since event\n
// handling promise are executed asynchronously in undefined order,\n
// we cannot just remove and /then/ add, because the new edge is\n
// added before the old is removed.\n
connection.ignoreEvent = true;\n
gadget.props.jsplumb_instance.detach(connection);\n
addEdge(gadget, r.id, data.data);\n
});\n
});\n
}\n
delete_promise = new RSVP.Queue().push(function() {\n
return promiseEventListener(edit_popup.find("form [type=\'button\']")[0], "click", false);\n
}).push(function() {\n
// connectionDetached event will remove the edge from data\n
gadget.props.jsplumb_instance.detach(connection);\n
});\n
return gadget.declareGadget("../fieldset/index.html", {\n
element: fieldset_element,\n
scope: "fieldset"\n
}).push(function(fieldset_gadget) {\n
return RSVP.all([ fieldset_gadget, fieldset_gadget.render({\n
value: edge_data,\n
property_definition: schema\n
}, edge_id) ]);\n
}).push(function(fieldset_gadget) {\n
edit_popup.enhanceWithin();\n
edit_popup.popup("open");\n
return fieldset_gadget[0];\n
}).push(function(fieldset_gadget) {\n
// Expose the dialog handling promise so that we can wait for it in\n
// test.\n
gadget.props.dialog_promise = RSVP.any([ save_promise(fieldset_gadget, edge_id), delete_promise ]);\n
return gadget.props.dialog_promise;\n
}).push(function() {\n
edit_popup.popup("close");\n
edit_popup.remove();\n
delete gadget.props.dialog_promise;\n
});\n
}\n
function openNodeEditionDialog(gadget, element) {\n
var node_id = getNodeId(gadget, element.id), node_data = gadget.props.data.graph.node[node_id], node_edit_popup = $(gadget.props.element).find("#popup-edit-template"), schema, fieldset_element, delete_promise;\n var node_id = getNodeId(gadget, element.id), node_data = gadget.props.data.graph.node[node_id], node_edit_popup = $(gadget.props.element).find("#popup-edit-template"), schema, fieldset_element, delete_promise;\n
// If we have no definition for this, we do not allow edition.\n // If we have no definition for this, we do not allow edition.\n
// XXX wrong we need to be able to delete\n
if (gadget.props.data.class_definition[node_data._class] === undefined) {\n if (gadget.props.data.class_definition[node_data._class] === undefined) {\n
return;\n return;\n
}\n }\n
...@@ -374,7 +415,7 @@ ...@@ -374,7 +415,7 @@
node_edit_popup.remove();\n node_edit_popup.remove();\n
}\n }\n
gadget.props.element.appendChild(document.importNode(popup_edit_template.content, true).children[0]);\n gadget.props.element.appendChild(document.importNode(popup_edit_template.content, true).children[0]);\n
node_edit_popup = $(gadget.props.element).find("#node-edit-popup");\n node_edit_popup = $(gadget.props.element).find("#edit-popup");\n
// Set the name of the popup to the node class\n // Set the name of the popup to the node class\n
node_edit_popup.find(".node_class").text(node_data._class);\n node_edit_popup.find(".node_class").text(node_data._class);\n
fieldset_element = node_edit_popup.find("fieldset")[0];\n fieldset_element = node_edit_popup.find("fieldset")[0];\n
...@@ -386,7 +427,6 @@ ...@@ -386,7 +427,6 @@
return promiseEventListener(node_edit_popup.find("form")[0], "submit", false);\n return promiseEventListener(node_edit_popup.find("form")[0], "submit", false);\n
}).push(function(evt) {\n }).push(function(evt) {\n
var data = {\n var data = {\n
// XXX id should not be handled differently ...\n
id: $(evt.target[1]).val(),\n id: $(evt.target[1]).val(),\n
data: {}\n data: {}\n
};\n };\n
...@@ -425,7 +465,22 @@ ...@@ -425,7 +465,22 @@
});\n });\n
}\n }\n
function waitForNodeClick(gadget, node) {\n function waitForNodeClick(gadget, node) {\n
gadget.props.nodes_click_monitor.monitor(loopEventListener(node, "dblclick", false, openNodeDialog.bind(null, gadget, node)));\n gadget.props.nodes_click_monitor.monitor(loopEventListener(node, "dblclick", false, openNodeEditionDialog.bind(null, gadget, node)));\n
}\n
function waitForConnection(gadget) {\n
return loopJsplumbBind(gadget, "connection", function(info, originalEvent) {\n
updateConnectionData(gadget, info.connection, false);\n
});\n
}\n
function waitForConnectionDetached(gadget) {\n
return loopJsplumbBind(gadget, "connectionDetached", function(info, originalEvent) {\n
updateConnectionData(gadget, info.connection, true);\n
});\n
}\n
function waitForConnectionClick(gadget) {\n
return loopJsplumbBind(gadget, "click", function(connection) {\n
return openEdgeEditionDialog(gadget, connection);\n
});\n
}\n }\n
function addNode(gadget, node_id, node_data) {\n function addNode(gadget, node_id, node_data) {\n
var render_element = $(gadget.props.main), class_definition = gadget.props.data.class_definition[node_data._class], coordinate = node_data.coordinate, dom_element_id, box, absolute_position, domElement;\n var render_element = $(gadget.props.main), class_definition = gadget.props.data.class_definition[node_data._class], coordinate = node_data.coordinate, dom_element_id, box, absolute_position, domElement;\n
...@@ -523,39 +578,13 @@ ...@@ -523,39 +578,13 @@
g.props.element = element;\n g.props.element = element;\n
});\n });\n
}).declareAcquiredMethod("notifyDataChanged", "notifyDataChanged").declareMethod("render", function(data) {\n }).declareAcquiredMethod("notifyDataChanged", "notifyDataChanged").declareMethod("render", function(data) {\n
var gadget = this;\n // var gadget = this;\n
this.props.data = {};\n
if (data.value) {\n
// Gadget embedded in ERP5\n
this.props.erp5_key = data.key;\n
data = data.value;\n
}\n
\n
if (data) {\n
this.props.data = JSON.parse(data);\n this.props.data = JSON.parse(data);\n
// load the data\n
$.each(this.props.data.graph.node, function(key, value) {\n
addNode(gadget, key, value);\n
});\n
$.each(this.props.data.graph.edge, function(key, value) {\n
addEdge(gadget, key, value);\n
});\n
}\n
this.props.jsplumb_instance = jsPlumb.getInstance();\n this.props.jsplumb_instance = jsPlumb.getInstance();\n
}).declareMethod("getContent", function() {\n }).declareMethod("getContent", function() {\n
var ret = {};\n
if (this.props.erp5_key) {\n
// ERP5\n
ret[this.props.erp5_key] = JSON.stringify(this.props.data);\n
return ret;\n
}\n
return JSON.stringify(this.props.data);\n return JSON.stringify(this.props.data);\n
}).declareMethod("startService", function() {\n }).declareMethod("startService", function() {\n
// no more needed, see below\n var gadget = this, jsplumb_instance = gadget.props.jsplumb_instance;\n
}).declareService(function() {\n
var gadget = this, jsplumb_instance;\n
this.props.jsplumb_instance = jsPlumb.getInstance();\n
jsplumb_instance= gadget.props.jsplumb_instance;\n
this.props.main = this.props.element.querySelector("#main");\n this.props.main = this.props.element.querySelector("#main");\n
jsplumb_instance.setRenderMode(jsplumb_instance.SVG);\n jsplumb_instance.setRenderMode(jsplumb_instance.SVG);\n
jsplumb_instance.importDefaults({\n jsplumb_instance.importDefaults({\n
...@@ -576,7 +605,6 @@ ...@@ -576,7 +605,6 @@
});\n });\n
draggable(gadget);\n draggable(gadget);\n
this.props.nodes_click_monitor = RSVP.Monitor();\n this.props.nodes_click_monitor = RSVP.Monitor();\n
if (this.props.data) {\n
// load the data\n // load the data\n
$.each(this.props.data.graph.node, function(key, value) {\n $.each(this.props.data.graph.node, function(key, value) {\n
addNode(gadget, key, value);\n addNode(gadget, key, value);\n
...@@ -584,7 +612,6 @@ ...@@ -584,7 +612,6 @@
$.each(this.props.data.graph.edge, function(key, value) {\n $.each(this.props.data.graph.edge, function(key, value) {\n
addEdge(gadget, key, value);\n addEdge(gadget, key, value);\n
});\n });\n
}\n
return RSVP.all([ waitForDrop(gadget), waitForConnection(gadget), waitForConnectionDetached(gadget), waitForConnectionClick(gadget), gadget.props.nodes_click_monitor ]);\n return RSVP.all([ waitForDrop(gadget), waitForConnection(gadget), waitForConnectionDetached(gadget), waitForConnectionClick(gadget), gadget.props.nodes_click_monitor ]);\n
});\n });\n
})(RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser); })(RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser);
...@@ -597,7 +624,7 @@ ...@@ -597,7 +624,7 @@
</item> </item>
<item> <item>
<key> <string>size</string> </key> <key> <string>size</string> </key>
<value> <int>25483</int> </value> <value> <int>27792</int> </value>
</item> </item>
<item> <item>
<key> <string>title</string> </key> <key> <string>title</string> </key>
......
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