Skip to content

dream
dream
Commit de830a0b authored by Ioannis Papagiannopoulos's avatar Ioannis Papagiannopoulos Committed by Jérome Perrin
Browse files
Options

static update

parent 2bca127c
Hide whitespace changes
Inline Side-by-side
Showing with 546 additions and 162 deletions
dream/platform/static/dream/Input_viewSimulation.js
View file @ de830a0b
...@@ -84,20 +84,22 @@ ...@@ -84,20 +84,22 @@
// Precompile the templates while loading the first gadget instance // Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window); var gadget_klass = rJS(window);
initGadgetMixin(gadget_klass); initGadgetMixin(gadget_klass);
gadget_klass.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment").declareAcquiredMethod("aq_putAttachment", "jio_putAttachment").declareAcquiredMethod("aq_ajax", "jio_ajax").declareAcquiredMethod("aq_getConfigurationDict", "getConfigurationDict").declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash").declareAcquiredMethod("whoWantsToDisplayThisDocument", "whoWantsToDisplayThisDocument").declareMethod("render", function(options) { gadget_klass.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment").declareAcquiredMethod("aq_putAttachment", "jio_putAttachment").declareAcquiredMethod("aq_ajax", "jio_ajax").declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash").declareAcquiredMethod("whoWantsToDisplayThisDocument", "whoWantsToDisplayThisDocument").declareMethod("render", function(options) {
var gadget = this, property_list, data; var gadget = this, data;
this.props.jio_key = options.id; this.props.jio_key = options.id;
return gadget.aq_getAttachment({ return gadget.aq_getAttachment({
_id: gadget.props.jio_key, _id: gadget.props.jio_key,
_attachment: "body.json" _attachment: "body.json"
}).push(function(json) { }).push(function(json) {
data = JSON.parse(json).general; var application_configuration = {};
return gadget.aq_getConfigurationDict(); data = JSON.parse(json);
}).push(function(configuration_dict) { application_configuration = data.application_configuration.general || {};
property_list = configuration_dict["Dream-Configuration"].property_list; return gadget.getDeclaredGadget("fieldset").push(function(fieldset_gadget) {
return gadget.getDeclaredGadget("fieldset"); return fieldset_gadget.render({
}).push(function(fieldset_gadget) { value: data.general,
return fieldset_gadget.render(property_list, data); property_definition: application_configuration
});
});
}); });
}).declareMethod("startService", function() { }).declareMethod("startService", function() {
return waitForRunSimulation(this); return waitForRunSimulation(this);
......
dream/platform/static/dream/index.js
View file @ de830a0b
...@@ -303,15 +303,10 @@ ...@@ -303,15 +303,10 @@
$(panel).trigger("create"); $(panel).trigger("create");
}); });
}).ready(function(g) { }).ready(function(g) {
var jio_gadget;
//console.log('@@@@@@@@@@@@@@@getting DeclalredGadget@@@@@@@@@@@@@@@'); //console.log('@@@@@@@@@@@@@@@getting DeclalredGadget@@@@@@@@@@@@@@@');
//console.log(g); //console.log(g);
return g.getDeclaredGadget("jio").push(function(gadget) { return g.getDeclaredGadget("jio").push(function(gadget) {
jio_gadget = gadget; return gadget.createJio({
//console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
//console.log(jio_gadget);
//console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
return jio_gadget.createJio({
type: "local", type: "local",
username: "dream", username: "dream",
applicationname: "dream" applicationname: "dream"
...@@ -354,7 +349,28 @@ ...@@ -354,7 +349,28 @@
console.log(portal_type); console.log(portal_type);
console.log(options); console.log(options);
console.log(portal_types[portal_type]); console.log(portal_types[portal_type]);
// Get the action information /*return gadget.getDeclaredGadget("jio")
.push(function(jio_gadget) {
if (options.id) {
return jio_gadget.getAttachment({
"_id": options.id,
"_attachment": "body.json"
});
}
})
.push(function(result) {
var data;
if (result) {
data = JSON.parse(result);
gadget.props.data = data;
portal_types.Input = data.application_configuration.input;
portal_types.Output = data.application_configuration.output;
}
// Get the action information
return gadget.declareGadget(
portal_types[portal_type][options.action].gadget + ".html"
);
})*/
return gadget.declareGadget(portal_types[portal_type][options.action].gadget + ".html").push(function(g) { return gadget.declareGadget(portal_types[portal_type][options.action].gadget + ".html").push(function(g) {
page_gadget = g; page_gadget = g;
if (page_gadget.render !== undefined) { if (page_gadget.render !== undefined) {
......
dream/platform/static/dream/inputModule_viewAddInstanceDefinitionDialog.js
View file @ de830a0b
...@@ -152,8 +152,6 @@ ...@@ -152,8 +152,6 @@
var gadget, doc_list, innerHTML; var gadget, doc_list, innerHTML;
gadget = this; gadget = this;
doc_list = gadget.props.element.querySelector(".document_list"); doc_list = gadget.props.element.querySelector(".document_list");
console.log("list created? 1");
console.log(doc_list);
// helper: add options to selects // helper: add options to selects
function makeListItems(row_list) { function makeListItems(row_list) {
console.log("MAKEDOCUMENTLIST 1"); console.log("MAKEDOCUMENTLIST 1");
...@@ -202,9 +200,7 @@ ...@@ -202,9 +200,7 @@
form = e.target; form = e.target;
element = form.querySelector("div.ui-focus"); element = form.querySelector("div.ui-focus");
if (element === null || element === "undefined") { if (element === null || element === "undefined") {
console.log(0);
element = form.querySelector("input.ui-state-focus"); element = form.querySelector("input.ui-state-focus");
console.log(element);
id = element.name.replace("record_", ""); id = element.name.replace("record_", "");
} else { } else {
id = element.childNodes[1].name.replace("record_", ""); id = element.childNodes[1].name.replace("record_", "");
...@@ -242,14 +238,11 @@ ...@@ -242,14 +238,11 @@
form = e.target; form = e.target;
promise_list = []; promise_list = [];
element_list = form.querySelectorAll("label.ui-checkbox-on"); element_list = form.querySelectorAll("label.ui-checkbox-on");
console.log(element_list);
if (element_list) { if (element_list) {
for (i = 0, len = element_list.length; i < len; i += 1) { for (i = 0, len = element_list.length; i < len; i += 1) {
element = element_list[i].nextSibling; element = element_list[i].nextSibling;
id = element.name.replace("record_", ""); id = element.name.replace("record_", "");
console.log(id);
list_element = element.parentNode.parentNode.parentNode; list_element = element.parentNode.parentNode.parentNode;
console.log(list_element);
list_element.parentNode.removeChild(list_element); list_element.parentNode.removeChild(list_element);
if (form.querySelector("ul").children.length === 0) { if (form.querySelector("ul").children.length === 0) {
fragment = document.createElement("li"); fragment = document.createElement("li");
...@@ -267,8 +260,6 @@ ...@@ -267,8 +260,6 @@
} }
} }
console.log("HANDLING DELETE 2"); console.log("HANDLING DELETE 2");
console.log("list created? 1");
console.log(doc_list);
return RSVP.all(promise_list); return RSVP.all(promise_list);
} }
return gadget.aq_allDocs({ return gadget.aq_allDocs({
...@@ -290,8 +281,6 @@ ...@@ -290,8 +281,6 @@
while (doc_list.firstChild) { while (doc_list.firstChild) {
doc_list.removeChild(doc_list.firstChild); doc_list.removeChild(doc_list.firstChild);
} }
console.log("list created? last");
console.log(doc_list);
doc_list.innerHTML = innerHTML; doc_list.innerHTML = innerHTML;
// enhance/refresh // enhance/refresh
$doc = $(doc_list); $doc = $(doc_list);
...@@ -310,10 +299,8 @@ ...@@ -310,10 +299,8 @@
console.log("VIEWADDINSTANCE STARTSERVICE 1"); console.log("VIEWADDINSTANCE STARTSERVICE 1");
var gadget = this; var gadget = this;
return new RSVP.Queue().push(function() { return new RSVP.Queue().push(function() {
console.log("VIEWADDINSTANCE STARTSERVICE 2");
return RSVP.any([ waitForImport(gadget), waitForDefault(gadget) ]); return RSVP.any([ waitForImport(gadget), waitForDefault(gadget) ]);
}).push(function(result) { }).push(function(result) {
console.log("VIEWADDINSTANCE STARTSERVICE 3");
return gadget.whoWantsToDisplayThisDocument(result[0].id); return gadget.whoWantsToDisplayThisDocument(result[0].id);
}).push(function(url) { }).push(function(url) {
console.log("VIEWADDINSTANCE STARTSERVICE 4"); console.log("VIEWADDINSTANCE STARTSERVICE 4");
......
dream/platform/static/expandable_field/expandablefield.js 0 → 100644
View file @ de830a0b
/*global rJS, RSVP, jQuery, Handlebars,
promiseEventListener, initGadgetMixin, console */
/*jslint nomen: true */
(function(window, rJS, RSVP, Handlebars, initGadgetMixin) {
"use strict";
/////////////////////////////////////////////////////////////////
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window), label_source = gadget_klass.__template_element.getElementById("expand-label-template").innerHTML, label_template = Handlebars.compile(label_source), option_source = gadget_klass.__template_element.getElementById("expand-option-template").innerHTML, option_template = Handlebars.compile(option_source), selected_option_source = gadget_klass.__template_element.getElementById("selected-expand-option-template").innerHTML, selected_option_template = Handlebars.compile(selected_option_source);
initGadgetMixin(gadget_klass);
gadget_klass.declareMethod("render", function(options, node_id) {
// XXX node_id is added like a property so that one can change the node
// id
var gadget = this, queue, index, len, ind, oneOf, value, prop_name, prop_definition, string_value;
console.log("EXPANDABLEFIELDSET RENDER 1");
console.log(options);
gadget.props.key = options.key;
// used for recursive fieldsets
gadget.props.field_gadget_list = [];
function addField(property_id, property_definition, value) {
console.log("ADDFIELD EXPANDABLEFIELDSET 1");
var sub_gadget;
try {
queue.push(function() {
// XXX this is incorrect for recursive fieldsets.
// we should use nested fieldset with legend
console.log("EXPANDABLE insertingAdjacentHTML for:" + property_id);
gadget.props.element.insertAdjacentHTML("beforeend", label_template({
"for": property_id,
name: property_definition.name || property_id
}));
if (property_definition.type === "object") {
// Create a recursive fieldset for this key.
return gadget.declareGadget("../fieldset/index.html");
}
if (property_definition.type === "number") {
return gadget.declareGadget("../number_field/index.html");
}
if (property_definition.enum) {
return gadget.declareGadget("../list_field/index.html");
}
return gadget.declareGadget("../string_field/index.html");
}).push(function(gg) {
sub_gadget = gg;
return sub_gadget.render({
key: property_id,
value: value,
property_definition: property_definition
});
}).push(function() {
return sub_gadget.getElement();
}).push(function(sub_element) {
gadget.props.element.appendChild(sub_element);
gadget.props.field_gadget_list.push(sub_gadget);
});
} catch (e) {
new RSVP.Queue().push(function() {
// XXX this is incorrect for recursive fieldsets.
// we should use nested fieldset with legend
console.log("EXPANDABLE insertingAdjacentHTML for:" + property_id);
gadget.props.element.insertAdjacentHTML("beforeend", label_template({
"for": property_id,
name: property_definition.name || property_id
}));
if (property_definition.type === "object") {
// Create a recursive fieldset for this key.
return gadget.declareGadget("../fieldset/index.html");
}
if (property_definition.type === "number") {
return gadget.declareGadget("../number_field/index.html");
}
if (property_definition.enum) {
return gadget.declareGadget("../list_field/index.html");
}
return gadget.declareGadget("../string_field/index.html");
}).push(function(gg) {
sub_gadget = gg;
return sub_gadget.render({
key: property_id,
value: value,
property_definition: property_definition
});
}).push(function() {
return sub_gadget.getElement();
}).push(function(sub_element) {
gadget.props.element.appendChild(sub_element);
gadget.props.field_gadget_list.push(sub_gadget);
});
}
}
function updateFieldSet(gadget) {
var select = gadget.props.element.getElementsByTagName("select")[0], update_value = select.options[select.selectedIndex].value, i, select_index, child;
for (select_index = 0; select_index <= gadget.props.element.childNodes.length - 1; select_index += 1) {
child = gadget.props.element.childNodes[select_index];
if (child.className === "ui-select") {
select_index += 1;
break;
}
}
for (i = 0; i <= select_index; i += 1) {
gadget.props.element.removeChild(gadget.props.element.lastChild);
}
for (index = 0; index <= options.property_definition.allOf.length - 1; index += 1) {
if (options.property_definition.allOf[index].oneOf) {
break;
}
}
console.log(options.property_definition.allOf[index]);
for (i = 0; i <= options.property_definition.allOf[index].oneOf.length - 1; i += 1) {
if (options.property_definition.allOf[index].oneOf[i].title === update_value) {
addField(options.property_definition.allOf[index].oneOf[i].title, options.property_definition.allOf[index].oneOf[i], options.property_definition.allOf[index].oneOf[i].default);
break;
}
}
}
function addListField(options) {
console.log("ADDLISTFIELD EXPANDABLEFIELDSET 1");
var select = gadget.props.element.getElementsByTagName("select")[0], i, template, tmp = "";
select.setAttribute("name", options.key);
for (i = 0; i < options.property_definition.enum.length; i += 1) {
if (options.property_definition.enum[i] === options.value) {
template = selected_option_template;
} else {
template = option_template;
}
// XXX value and text are always same in json schema
tmp += template({
value: options.property_definition.enum[i],
text: options.property_definition.enum[i]
});
}
select.innerHTML += tmp;
console.log("printing SELECT FIELD LIST");
select.onchange = function() {
updateFieldSet(gadget);
};
console.log(select);
}
queue = new RSVP.Queue().push(function() {
if (node_id) {
addField("id", {
type: "string"
}, node_id);
}
if (!options.property_definition.allOf) {
console.log("allOf must be used for expandable fields");
}
len = options.property_definition.allOf.length;
for (index = 0; index <= len - 1; index += 1) {
console.log("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=");
console.log(options.property_definition.allOf[index]);
if (options.property_definition.allOf[index].oneOf) {
// XXX adding various hidden list fields
oneOf = options.property_definition.allOf[index].oneOf;
// XX consider initiating only the one store ind option values
for (ind = 0; ind <= oneOf.length - 1; ind += 1) {
if (oneOf[ind].title === string_value) {
value = (options.value || {})[oneOf[ind].title] === undefined ? oneOf[ind].default : options.value[oneOf[ind].title];
addField(oneOf[ind].title, oneOf[ind], value);
}
}
} else {
// XXX add a listfield
if (Object.keys(options.property_definition.allOf[index].properties).length !== 1) {
console.log("the expandable property must be defined" + "as a string with single string property");
}
prop_name = Object.keys(options.property_definition.allOf[index].properties)[0];
prop_definition = options.property_definition.allOf[index].properties[prop_name];
string_value = (options.value || {})[prop_name] === undefined ? prop_definition.default : options.value[prop_name];
addListField({
key: prop_name,
value: string_value,
property_definition: prop_definition
});
}
}
});
return queue;
}).declareMethod("getContent", function() {
console.log("GETCONTENT EXPANDABLEFIELDSET 1");
var i, promise_list = [], gadget = this, select = gadget.props.element.getElementsByTagName("select")[0];
for (i = 0; i < this.props.field_gadget_list.length; i += 1) {
promise_list.push(this.props.field_gadget_list[i].getContent());
}
return RSVP.Queue().push(function() {
return RSVP.all(promise_list);
}).push(function(result_list) {
var name, result = {}, content = result;
if (gadget.props.key) {
content = result[gadget.props.key] = {};
}
for (i = 0; i < result_list.length; i += 1) {
for (name in result_list[i]) {
if (result_list[i].hasOwnProperty(name)) {
content[name] = result_list[i][name];
}
}
}
return result;
}).push(function(results) {
var keys, index;
if (Object.keys(results).length !== 1) {
console.log("the expandable property results must contain" + "a single key of an object that can contain detailed results");
}
results[Object.keys(results)[0]][select.getAttribute("name")] = select.options[select.selectedIndex].value;
keys = Object.keys(results[Object.keys(results)[0]]);
for (index = 0; index <= keys.length - 1; index += 1) {
if (keys[index] !== select.options[select.selectedIndex].value && keys[index] !== select.getAttribute("name")) {
delete results[Object.keys(results)[0]][keys[index]];
break;
}
}
return results;
});
});
})(window, rJS, RSVP, Handlebars, initGadgetMixin);
\ No newline at end of file
dream/platform/static/expandable_field/index.html 0 → 100644
View file @ de830a0b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fieldset</title>
<script src="../lib/rsvp.min.js" type="text/javascript"></script>
<script src="../lib/renderjs.min.js" type="text/javascript"></script>
<script src="../lib/handlebars.min.js" type="text/javascript"></script>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquerymobile.js" type="text/javascript"></script>
<script id="expand-label-template" type="text/x-handlebars-template">
<label for="{{for}}">{{name}}</label>
</script>
<script id="expand-option-template" type="text/x-handlebars-template">
<option value="{{value}}">{{text}}</option>
</script>
<script id="selected-expand-option-template" type="text/x-handlebars-template">
<option selected="selected" value="{{value}}">{{text}}</option>
</script>
<script src="../dream/mixin_gadget.js" type="text/javascript"></script>
<script src="expandablefield.js" type="text/javascript"></script>
</head>
<body>
<select />
</body>
</html>
dream/platform/static/fieldset/fieldset.js
View file @ de830a0b
/*global rJS, RSVP, jQuery, Handlebars, /*global rJS, RSVP, jQuery, Handlebars,
promiseEventListener, initGadgetMixin*/ promiseEventListener, initGadgetMixin, console */
/*jslint nomen: true */ /*jslint nomen: true */
(function(window, rJS, RSVP, Handlebars, initGadgetMixin) { (function(window, rJS, RSVP, Handlebars, initGadgetMixin) {
"use strict"; "use strict";
...@@ -13,6 +13,9 @@ ...@@ -13,6 +13,9 @@
// XXX node_id is added like a property so that one can change the node // XXX node_id is added like a property so that one can change the node
// id // id
var gadget = this, queue; var gadget = this, queue;
console.log("FIELDSET RENDER 1");
console.log(options);
console.log(node_id);
gadget.props.key = options.key; gadget.props.key = options.key;
// used for recursive fieldsets // used for recursive fieldsets
gadget.props.field_gadget_list = []; gadget.props.field_gadget_list = [];
...@@ -21,10 +24,23 @@ ...@@ -21,10 +24,23 @@
queue.push(function() { queue.push(function() {
// XXX this is incorrect for recursive fieldsets. // XXX this is incorrect for recursive fieldsets.
// we should use nested fieldset with legend // we should use nested fieldset with legend
console.log("insertingAdjacentHTML for:" + property_id);
gadget.props.element.insertAdjacentHTML("beforeend", label_template({ gadget.props.element.insertAdjacentHTML("beforeend", label_template({
"for": property_id, "for": property_id,
name: property_definition.name || property_id name: property_definition.name || property_id
})); }));
console.log("....................");
console.log(property_id);
console.log(property_definition);
console.log(value);
// XXX maybe type should be used instead
if (property_definition.allOf) {
// if there is type property then remove it
if (property_definition.allOf[0].type) {
delete property_definition.allOf[0].type;
}
return gadget.declareGadget("../expandable_field/index.html");
}
if (property_definition.type === "object") { if (property_definition.type === "object") {
// Create a recursive fieldset for this key. // Create a recursive fieldset for this key.
return gadget.declareGadget("../fieldset/index.html"); return gadget.declareGadget("../fieldset/index.html");
...@@ -57,9 +73,27 @@ ...@@ -57,9 +73,27 @@
}, node_id); }, node_id);
} }
Object.keys(options.property_definition.properties).forEach(function(property_name) { Object.keys(options.property_definition.properties).forEach(function(property_name) {
var property_definition = options.property_definition.properties[property_name], value = (options.value || {})[property_name] === undefined ? property_definition._default : options.value[property_name]; var property_definition = options.property_definition.properties[property_name], value = property_definition.default, i = 0, property;
// XXX some properties are not editable if (property_definition.allOf) {
if (property_name !== "coordinate" && property_name !== "_class") { if (property_definition.allOf[0].properties) {
for (property in property_definition.allOf[0].properties) {
if (property_definition.allOf[0].properties.hasOwnProperty(property)) {
i += 1;
if (i > 1) {
console.log("something is wrong!");
}
value = property_definition.allOf[0].properties[property].default;
}
}
}
}
console.log("TRYING TO FIND A VALUE!!!!");
console.log(options);
console.log(options.value);
console.log(property_name);
value = (options.value || {})[property_name] === undefined ? value : options.value[property_name];
if (property_name !== "coordinate" && property_name !== "_class" && property_name !== "id") {
console.log("ADDING FIELD FOR " + property_name + "!!!!!!!");
addField(property_name, property_definition, value); addField(property_name, property_definition, value);
} }
}); });
......
dream/platform/static/jsplumb/jsplumb.js
View file @ de830a0b
...@@ -16,11 +16,24 @@ ...@@ -16,11 +16,24 @@
* You should have received a copy of the GNU Lesser General Public License * You should have received a copy of the GNU Lesser General Public License
* along with DREAM. If not, see <http://www.gnu.org/licenses/>. * along with DREAM. If not, see <http://www.gnu.org/licenses/>.
* ==========================================================================*/ * ==========================================================================*/
/*global RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin, /*global RSVP, rJS, $, jsPlumb, Handlebars,
loopEventListener, promiseEventListener, DOMParser, confirm, console*/ loopEventListener, promiseEventListener, DOMParser, confirm, console*/
/*jslint unparam: true todo: true */ /*jslint unparam: true todo: true */
(function(RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin, loopEventListener, promiseEventListener, DOMParser) { (function(RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser) {
"use strict"; "use strict";
/* TODO:
* use services
* drop jquery ui dependency
* less dependancies ( promise event listner ? )
* document exposed css / jsplumb config
* no more handlebars
* accept ERP5 format
* auto springy layout
* drop zoom level
* edge edit popup on click
* rename draggable()
* somehow choose edge class on connect
*/
/*jslint nomen: true */ /*jslint nomen: true */
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(); 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();
function loopJsplumbBind(gadget, type, callback) { function loopJsplumbBind(gadget, type, callback) {
...@@ -62,27 +75,20 @@ ...@@ -62,27 +75,20 @@
// returns the ID of the node in the graph from its DOM element id // returns the ID of the node in the graph from its DOM element id
var node_id; var node_id;
$.each(gadget.props.node_id_to_dom_element_id, function(k, v) { $.each(gadget.props.node_id_to_dom_element_id, function(k, v) {
console.log(k);
console.log(v);
console.log(element_id);
if (v === element_id) { if (v === element_id) {
node_id = k; node_id = k;
return false; return false;
} }
}); });
console.log("getNODEID 2");
console.log(node_id);
console.log(gadget.props.data.graph.main_graph.node);
return node_id; return node_id;
} }
function generateNodeId(gadget, element) { function generateNodeId(gadget, element) {
console.log("generateNODEID 1"); console.log("generateNODEID 1");
// Generate a node id // Generate a node id
var n = 1, class_def = gadget.props.data.class_definition[element._class], id = class_def.allOf[1].properties.id._default || element._class; var n = 1, class_def = gadget.props.data.class_definition[element._class], id = class_def.allOf[1].properties.id.default || element._class;
while (gadget.props.data.graph.main_graph.node[id + n] !== undefined) { while (gadget.props.data.graph.node[id + n] !== undefined) {
n += 1; n += 1;
} }
console.log("generateNODEID 2");
return id + n; return id + n;
} }
function generateDomElementId(gadget_element) { function generateDomElementId(gadget_element) {
...@@ -95,19 +101,17 @@ ...@@ -95,19 +101,17 @@
} }
function updateConnectionData(gadget, connection, remove, edge_data) { function updateConnectionData(gadget, connection, remove, edge_data) {
if (remove) { if (remove) {
delete gadget.props.data.graph.main_graph.edge[connection.id]; delete gadget.props.data.graph.edge[connection.id];
} else { } else {
edge_data = edge_data || { edge_data = edge_data || {
_class: "Dream.Edge" _class: "Dream.Edge"
}; };
edge_data.source = getNodeId(gadget, connection.sourceId); edge_data.source = getNodeId(gadget, connection.sourceId);
edge_data.destination = getNodeId(gadget, connection.targetId); edge_data.destination = getNodeId(gadget, connection.targetId);
gadget.props.data.graph.main_graph.edge[connection.id] = edge_data; gadget.props.data.graph.edge[connection.id] = edge_data;
} }
gadget.notifyDataChanged(); gadget.notifyDataChanged();
} }
// bind to connection/connectionDetached events,
// and update the list of connections on screen.
function waitForConnection(gadget) { function waitForConnection(gadget) {
loopJsplumbBind(gadget, "connection", function(info, originalEvent) { loopJsplumbBind(gadget, "connection", function(info, originalEvent) {
updateConnectionData(gadget, info.connection); updateConnectionData(gadget, info.connection);
...@@ -127,36 +131,38 @@ ...@@ -127,36 +131,38 @@
}); });
} }
function convertToAbsolutePosition(gadget, x, y) { function convertToAbsolutePosition(gadget, x, y) {
var zoom_level = gadget.props.zoom_level * 1.1111, canvas_size_x = $(gadget.props.element).find("#main").width(), canvas_size_y = $(gadget.props.element).find("#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"; var zoom_level = gadget.props.zoom_level * 1.1111, canvas_size_x = $(gadget.props.main).width(), canvas_size_y = $(gadget.props.main).height(), //canvas_size_x = $(gadget.props.element).find('#main').width(),
//canvas_size_y = $(gadget.props.element).find('#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";
return [ left, top ]; return [ left, top ];
} }
function convertToRelativePosition(gadget, x, y) { function convertToRelativePosition(gadget, x, y) {
var zoom_level = gadget.props.zoom_level * 1.1111, canvas_size_x = $(gadget.props.element).find("#main").width(), canvas_size_y = $(gadget.props.element).find("#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.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); var zoom_level = gadget.props.zoom_level * 1.1111, canvas_size_x = $(gadget.props.main).width(), canvas_size_y = $(gadget.props.main).height(), //canvas_size_x = $(gadget.props.element).find('#main').width(),
//canvas_size_y = $(gadget.props.element).find('#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.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 [ left, top ];
} }
function updateElementCoordinate(gadget, node_id, coordinate) { function updateElementCoordinate(gadget, node_id, coordinate) {
console.log("updateELEMENTCOORDINATE 1"); console.log("updateELEMENTCOORDINATE 1");
var element_id = gadget.props.node_id_to_dom_element_id[node_id], element, relative_position; var element_id = gadget.props.node_id_to_dom_element_id[node_id], element, relative_position;
console.log("updateELEMENTCOORDINATE 2");
if (coordinate === undefined) { if (coordinate === undefined) {
element = $(gadget.props.element).find("#" + element_id); element = $(gadget.props.element).find("#" + element_id);
console.log("updateELEMENTCOORDINATE 3");
relative_position = convertToRelativePosition(gadget, element.css("left"), element.css("top")); relative_position = convertToRelativePosition(gadget, element.css("left"), element.css("top"));
coordinate = { coordinate = {
left: relative_position[0], left: relative_position[0],
top: relative_position[1] top: relative_position[1]
}; };
console.log("updateELEMENTCOORDINATE 4");
} }
gadget.props.data.graph.main_graph.node[node_id].coordinate = coordinate; //gadget.props.data.graph.main_graph.node[node_id].coordinate = coordinate;
gadget.props.data.graph.node[node_id].coordinate = coordinate;
gadget.notifyDataChanged(); gadget.notifyDataChanged();
console.log("updateELEMENTCOORDINATE 5");
return coordinate; return coordinate;
} }
function draggable(gadget) { function draggable(gadget) {
var jsplumb_instance = gadget.props.jsplumb_instance, stop = function(element) { var jsplumb_instance = gadget.props.jsplumb_instance, stop = function(element) {
updateElementCoordinate(gadget, getNodeId(gadget, element.target.id)); updateElementCoordinate(gadget, getNodeId(gadget, element.target.id));
}; };
// XXX This function should only touch the node element that we just added.
jsplumb_instance.draggable(jsplumb_instance.getSelector(".window"), { jsplumb_instance.draggable(jsplumb_instance.getSelector(".window"), {
containment: "parent", containment: "parent",
grid: [ 10, 10 ], grid: [ 10, 10 ],
...@@ -182,39 +188,6 @@ ...@@ -182,39 +188,6 @@
anchor: "Continuous" anchor: "Continuous"
}); });
} }
function initJsPlumb(gadget) {
var jsplumb_instance = gadget.props.jsplumb_instance;
jsplumb_instance.setRenderMode(jsplumb_instance.SVG);
jsplumb_instance.importDefaults({
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
},
Endpoint: [ "Dot", {
radius: 2
} ],
ConnectionOverlays: [ [ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: .8
} ] ],
Container: "main"
});
// listen for clicks on connections,
// and offer to change values on click.
// jsplumb_instance
// .bind("connectionDrag", function (connection) {
// return undefined;
// });
// jsplumb_instance
// .bind("connectionDragStop", function (connection) {
// return undefined;
// });
// split in 2 methods ? one for events one for manip
gadget.notifyDataChanged();
draggable(gadget);
}
function updateNodeStyle(gadget, element_id) { function updateNodeStyle(gadget, element_id) {
// Update node size according to the zoom level // Update node size according to the zoom level
// XXX does nothing for now // XXX does nothing for now
...@@ -270,14 +243,14 @@ ...@@ -270,14 +243,14 @@
console.log("removeELEMENT 1"); console.log("removeELEMENT 1");
var element_id = gadget.props.node_id_to_dom_element_id[node_id]; var element_id = gadget.props.node_id_to_dom_element_id[node_id];
gadget.props.jsplumb_instance.removeAllEndpoints($(gadget.props.element).find("#" + element_id)); gadget.props.jsplumb_instance.removeAllEndpoints($(gadget.props.element).find("#" + element_id));
console.log("removeELEMENT 2");
$(gadget.props.element).find("#" + element_id).remove(); $(gadget.props.element).find("#" + element_id).remove();
delete gadget.props.data.graph.main_graph.node[node_id]; delete gadget.props.data.graph.node[node_id];
//delete gadget.props.data.graph.main_graph.node[node_id];
delete gadget.props.node_id_to_dom_element_id[node_id]; delete gadget.props.node_id_to_dom_element_id[node_id];
console.log("removeELEMENT 3"); //$.each(gadget.props.data.graph.main_graph.node, function (k, v) {
$.each(gadget.props.data.graph.main_graph.edge, function(k, v) { $.each(gadget.props.data.graph.edge, function(k, v) {
if (node_id === v.source || node_id === v.destination) { if (node_id === v.source || node_id === v.destination) {
delete gadget.props.data.graph.main_graph.edge[k]; delete gadget.props.data.graph.edge[k];
} }
}); });
gadget.notifyDataChanged(); gadget.notifyDataChanged();
...@@ -288,20 +261,24 @@ ...@@ -288,20 +261,24 @@
var element_id = gadget.props.node_id_to_dom_element_id[node_id], new_id = data.id; var element_id = gadget.props.node_id_to_dom_element_id[node_id], new_id = data.id;
if (data.data.name) { if (data.data.name) {
$(gadget.props.element).find("#" + element_id).text(data.data.name).attr("title", data.data.name).append('<div class="ep"></div></div>'); $(gadget.props.element).find("#" + element_id).text(data.data.name).attr("title", data.data.name).append('<div class="ep"></div></div>');
gadget.props.data.graph.main_graph.node[node_id].name = data.data.name; //gadget.props.data.graph.main_graph.node[node_id].name = data.data.name;
gadget.props.data.graph.node[node_id].name = data.data.name;
} }
console.log("updateELEMENTDATA 2");
delete data.id; delete data.id;
$.extend(gadget.props.data.graph.main_graph.node[node_id], data.data); //$.extend(gadget.props.data.graph.main_graph.node[node_id], data.data);
console.log("updateELEMENTDATA 3"); $.extend(gadget.props.data.graph.node[node_id], data.data);
if (new_id && new_id !== node_id) { if (new_id && new_id !== node_id) {
gadget.props.data.graph.main_graph.node[new_id] = gadget.props.data.graph.main_graph.node[node_id]; //gadget.props.data.graph.main_graph.node[new_id]
delete gadget.props.data.graph.main_graph.node[node_id]; // = gadget.props.data.graph.main_graph.node[node_id];
//delete gadget.props.data.graph.main_graph.node[node_id];
gadget.props.data.graph.node[new_id] = gadget.props.data.graph.node[node_id];
delete gadget.props.data.graph.node[node_id];
gadget.props.node_id_to_dom_element_id[new_id] = gadget.props.node_id_to_dom_element_id[node_id]; gadget.props.node_id_to_dom_element_id[new_id] = gadget.props.node_id_to_dom_element_id[node_id];
delete gadget.props.node_id_to_dom_element_id[node_id]; delete gadget.props.node_id_to_dom_element_id[node_id];
console.log("updateELEMENTDATA 5"); //delete gadget.props.data.graph.main_graph.node[new_id].id;
delete gadget.props.data.graph.main_graph.node[new_id].id; //$.each(gadget.props.data.graph.main_graph.node, function (k, v) {
$.each(gadget.props.data.graph.main_graph.edge, function(k, v) { delete gadget.props.data.graph.node[new_id].id;
$.each(gadget.props.data.graph.edge, function(k, v) {
if (v.source === node_id) { if (v.source === node_id) {
v.source = new_id; v.source = new_id;
} }
...@@ -309,7 +286,6 @@ ...@@ -309,7 +286,6 @@
v.destination = new_id; v.destination = new_id;
} }
}); });
console.log("updateELEMENTDATA 6");
} }
console.log("updateELEMENTDATA 7"); console.log("updateELEMENTDATA 7");
gadget.notifyDataChanged(); gadget.notifyDataChanged();
...@@ -322,25 +298,49 @@ ...@@ -322,25 +298,49 @@
label: edge_data.name label: edge_data.name
} ] ]; } ] ];
} }
connection = gadget.props.jsplumb_instance.connect({ if (gadget.props.data.graph.node[edge_data.source] === undefined) {
source: gadget.props.node_id_to_dom_element_id[edge_data.source], throw new Error("Edge Source " + edge_data.source + " does not exist");
target: gadget.props.node_id_to_dom_element_id[edge_data.destination], }
Connector: [ "Bezier", { if (gadget.props.data.graph.node[edge_data.source] === undefined) {
curviness: 75 throw new Error("Edge Destination " + edge_data.source + " does not exist");
} ], }
overlays: overlays // If an edge has this data:
}); // { _class: 'Edge',
// source: 'N1',
// destination: 'N2',
// jsplumb_source_endpoint: 'BottomCenter',
// jsplumb_destination_endpoint: 'LeftMiddle',
// jsplumb_connector: 'Flowchart' }
// Then it is rendered using a flowchart connector. The difficulty is that
// jsplumb does not let you configure the connector type on the edge, but
// on the source endpoint. One solution seem to create all types of
// endpoints on nodes.
if (edge_data.jsplumb_connector === "Flowchart") {
connection = gadget.props.jsplumb_instance.connect({
uuids: [ edge_data.source + ".flowChart" + edge_data.jsplumb_source_endpoint, edge_data.destination + ".flowChart" + edge_data.jsplumb_destination_endpoint ],
overlays: overlays
});
} else {
connection = gadget.props.jsplumb_instance.connect({
source: gadget.props.node_id_to_dom_element_id[edge_data.source],
target: gadget.props.node_id_to_dom_element_id[edge_data.destination],
Connector: [ "Bezier", {
curviness: 75
} ],
overlays: overlays
});
}
// jsplumb assigned an id, but we are controlling ids ourselves. // jsplumb assigned an id, but we are controlling ids ourselves.
connection.id = edge_id; connection.id = edge_id;
} }
function expandSchema(class_definition, full_schema) { function expandSchema(class_definition, full_schema) {
// minimal expanding of json schema, supports merging allOf and $ref // minimal expanding of json schema, supports merging allOf and $ref
// references // references
// TODO: check for a library with full support // TODO: check for a library that would provide full support
console.log("expandSCHEMA 1"); console.log("expandSCHEMA 1");
var property, referenced, i, expanded_class_definition = { var property, referenced, i, j, len, expanded_class_definition = {
properties: class_definition.properties || {} properties: class_definition.properties || {}
}, ref_word_list, ref_word; }, ref_word_list, ref_word, ref_definition_list, ref_definition_word, ref_definition, sub_ref_def, sub_ref_def_list, sub_ref_def_word, sub_ref_def_root;
if (class_definition.allOf) { if (class_definition.allOf) {
for (i = 0; i < class_definition.allOf.length; i += 1) { for (i = 0; i < class_definition.allOf.length; i += 1) {
referenced = class_definition.allOf[i]; referenced = class_definition.allOf[i];
...@@ -349,49 +349,82 @@ ...@@ -349,49 +349,82 @@
ref_word = ref_word_list[ref_word_list.length - 1]; ref_word = ref_word_list[ref_word_list.length - 1];
referenced = expandSchema(full_schema.class_definition[ref_word], full_schema); referenced = expandSchema(full_schema.class_definition[ref_word], full_schema);
} }
// console.log(full_schema.class_definition.definitions);
if (referenced.properties) { if (referenced.properties) {
// console.log("[[[[[[[[[[]]]]]]]]]]");
// console.log(referenced.properties);
for (property in referenced.properties) { for (property in referenced.properties) {
if (referenced.properties.hasOwnProperty(property)) { if (referenced.properties.hasOwnProperty(property)) {
if (referenced.properties[property].type) { if (referenced.properties[property].type || referenced.properties[property].$ref) {
expanded_class_definition.properties[property] = referenced.properties[property]; // console.log("..");
// console.log(property);
if (referenced.properties[property].$ref) {
ref_definition_list = referenced.properties[property].$ref.split("/");
ref_definition_word = ref_definition_list[ref_definition_list.length - 1];
ref_definition = full_schema.class_definition.definitions[ref_definition_word];
// console.log("(((((((())))))))");
// console.log(ref_definition);
if (ref_definition.allOf) {
if (ref_definition.allOf[1].oneOf) {
len = ref_definition.allOf[1].oneOf.length - 1;
for (j = 0; j <= len; j += 1) {
// console.log("--------- " + j);
// console.log(ref_definition.allOf[1].oneOf[j]);
if (ref_definition.allOf[1].oneOf[j].$ref) {
sub_ref_def_list = ref_definition.allOf[1].oneOf[j].$ref.split("/");
// console.log(">>>>>>");
sub_ref_def_word = sub_ref_def_list[sub_ref_def_list.length - 1];
sub_ref_def_root = sub_ref_def_list[sub_ref_def_list.length - 2];
sub_ref_def = full_schema.class_definition.definitions[sub_ref_def_root][sub_ref_def_word];
// console.log(sub_ref_def);
ref_definition.allOf[1].oneOf[j] = sub_ref_def;
}
}
}
}
expanded_class_definition.properties[property] = ref_definition;
} else {
expanded_class_definition.properties[property] = referenced.properties[property];
}
} }
} }
} }
} }
} }
} }
console.log("expandSCHEMA 1"); // console.log("expandSCHEMA 2");
// console.log(expanded_class_definition);
return expanded_class_definition; return expanded_class_definition;
} }
// TODO: remove class_definition from this function and callees signature function openNodeDialog(gadget, element) {
function openNodeDialog(gadget, element, class_definition) { // TODO: remove class_definition from this function and callees signature
//function openNodeDialog(gadget, element, class_definition) {
console.log("openNODEDIALOG 1"); console.log("openNODEDIALOG 1");
console.log(class_definition); var node_id = getNodeId(gadget, element.id), //node_data = gadget.props.data.graph.main_graph.node[node_id],
var node_id = getNodeId(gadget, element.id), node_data = gadget.props.data.graph.main_graph.node[node_id], node_edit_popup = $(gadget.props.element).find("#popup-edit-template"), schema = expandSchema(class_definition, gadget.props.data), fieldset_element, delete_promise; node_data = gadget.props.data.graph.node[node_id], node_edit_popup = $(gadget.props.element).find("#popup-edit-template"), schema, fieldset_element, delete_promise;
console.log("openNODEDIALOG 1.1"); // If we have no definition for this, we do not allow edition.
//TODO: node_data._class may not exist
if (gadget.props.data.class_definition[node_data._class] === undefined) {
return;
}
schema = expandSchema(gadget.props.data.class_definition[node_data._class], gadget.props.data);
if (node_edit_popup.length !== 0) { if (node_edit_popup.length !== 0) {
node_edit_popup.remove(); node_edit_popup.remove();
} }
console.log("openNODEDIALOG 1.2");
gadget.props.element.appendChild(document.importNode(popup_edit_template.content, true).children[0]); gadget.props.element.appendChild(document.importNode(popup_edit_template.content, true).children[0]);
console.log("openNODEDIALOG 1.3");
node_edit_popup = $(gadget.props.element).find("#node-edit-popup"); node_edit_popup = $(gadget.props.element).find("#node-edit-popup");
console.log("openNODEDIALOG 1.35"); console.log("openNODEDIALOG 1.35");
console.log(node_edit_popup); console.log(node_edit_popup);
console.log(node_edit_popup.find(".node_class")); console.log(node_edit_popup.find(".node_class"));
console.log(gadget.props.data.graph.main_graph.node); console.log(gadget.props.data.graph.node);
console.log(node_data); console.log(node_data);
console.log(node_edit_popup.find(".node_class").text(node_data._class)); console.log(node_edit_popup.find(".node_class").text(node_data._class));
// Set the name of the popup to the node class // Set the name of the popup to the node class
node_edit_popup.find(".node_class").text(node_data._class); node_edit_popup.find(".node_class").text(node_data._class);
console.log("openNODEDIALOG 1.4");
fieldset_element = node_edit_popup.find("fieldset")[0]; fieldset_element = node_edit_popup.find("fieldset")[0];
console.log("openNODEDIALOG 1.5");
node_edit_popup.popup(); node_edit_popup.popup();
console.log("openNODEDIALOG 1.6");
node_data.id = node_id; node_data.id = node_id;
// XXX // XXX
console.log("openNODEDIALOG 2");
function save_promise(fieldset_gadget, node_id) { function save_promise(fieldset_gadget, node_id) {
return RSVP.Queue().push(function() { return RSVP.Queue().push(function() {
return promiseEventListener(node_edit_popup.find("form")[0], "submit", false); return promiseEventListener(node_edit_popup.find("form")[0], "submit", false);
...@@ -402,6 +435,13 @@ ...@@ -402,6 +435,13 @@
data: {} data: {}
}; };
return fieldset_gadget.getContent().then(function(r) { return fieldset_gadget.getContent().then(function(r) {
console.log("******");
console.log("******");
console.log("******");
console.log(r);
console.log("******");
console.log("******");
console.log("******");
$.extend(data.data, r); $.extend(data.data, r);
updateElementData(gadget, node_id, data); updateElementData(gadget, node_id, data);
}); });
...@@ -418,6 +458,13 @@ ...@@ -418,6 +458,13 @@
element: fieldset_element, element: fieldset_element,
scope: "fieldset" scope: "fieldset"
}).push(function(fieldset_gadget) { }).push(function(fieldset_gadget) {
console.log("^^^^^^^^^^^^^^^^^^^");
console.log("^^^^^^^^^^^^^^^^^^^");
console.log("^^^^^^^^^^^^^^^^^^^");
console.log(fieldset_gadget);
console.log("^^^^^^^^^^^^^^^^^^^");
console.log("^^^^^^^^^^^^^^^^^^^");
console.log("^^^^^^^^^^^^^^^^^^^");
return RSVP.all([ fieldset_gadget, fieldset_gadget.render({ return RSVP.all([ fieldset_gadget, fieldset_gadget.render({
value: node_data, value: node_data,
property_definition: schema property_definition: schema
...@@ -429,8 +476,14 @@ ...@@ -429,8 +476,14 @@
}).push(function(fieldset_gadget) { }).push(function(fieldset_gadget) {
// Expose the dialog handling promise so that we can wait for it in // Expose the dialog handling promise so that we can wait for it in
// test. // test.
gadget.props.dialog_promise = RSVP.any([ // TODO: why different signature ? console.log(":::::::::::::::::::2");
save_promise(fieldset_gadget, node_id), delete_promise ]); console.log(":::::::::::::::::::2");
console.log(":::::::::::::::::::2");
console.log(fieldset_gadget);
console.log(":::::::::::::::::::2");
console.log(":::::::::::::::::::2");
console.log(":::::::::::::::::::2");
gadget.props.dialog_promise = RSVP.any([ save_promise(fieldset_gadget, node_id), delete_promise ]);
return gadget.props.dialog_promise; return gadget.props.dialog_promise;
}).push(function() { }).push(function() {
node_edit_popup.popup("close"); node_edit_popup.popup("close");
...@@ -438,32 +491,26 @@ ...@@ -438,32 +491,26 @@
delete gadget.props.dialog_promise; delete gadget.props.dialog_promise;
}); });
} }
function waitForNodeClick(gadget, node, config_dict) { //function waitForNodeClick(gadget, node, config_dict) {
function waitForNodeClick(gadget, node) {
console.log("waitFORNODEclick 1"); console.log("waitFORNODEclick 1");
gadget.props.nodes_click_monitor.monitor(loopEventListener(node, "dblclick", false, openNodeDialog.bind(null, gadget, node, config_dict))); gadget.props.nodes_click_monitor.monitor(loopEventListener(node, "dblclick", false, openNodeDialog.bind(null, gadget, node)));
} }
function addNode(gadget, node_id, node_data) { function addNode(gadget, node_id, node_data) {
console.log("addNODE 0"); console.log("addNODE 0");
console.log(node_data); 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;
var render_element = $(gadget.props.element).find("#main"), class_definition = gadget.props.data.class_definition[node_data._class], coordinate = node_data.coordinate, dom_element_id, box, absolute_position, domElement;
console.log("addNODE 1");
dom_element_id = generateDomElementId(gadget.props.element); dom_element_id = generateDomElementId(gadget.props.element);
gadget.props.node_id_to_dom_element_id[node_id] = dom_element_id; gadget.props.node_id_to_dom_element_id[node_id] = dom_element_id;
console.log("addNODE 2");
node_data.name = node_data.name || class_definition.name; node_data.name = node_data.name || class_definition.name;
console.log("addNODE 2.5"); //gadget.props.data.graph.main_graph.node[node_id] = node_data;
gadget.props.data.graph.main_graph.node[node_id] = node_data; gadget.props.data.graph.node[node_id] = node_data;
console.log("addNODE 3");
if (coordinate === undefined) { if (coordinate === undefined) {
coordinate = { coordinate = {
top: 0, top: 0,
left: 0 left: 0
}; };
} }
console.log("addNODE 4");
node_data.coordinate = updateElementCoordinate(gadget, node_id, coordinate); node_data.coordinate = updateElementCoordinate(gadget, node_id, coordinate);
console.log("addNODE 4.5");
console.log(node_data);
// XXX make node template an option, or use CSS from class_definition // XXX make node template an option, or use CSS from class_definition
/*jslint nomen: true*/ /*jslint nomen: true*/
domElement = domParser.parseFromString(node_template({ domElement = domParser.parseFromString(node_template({
...@@ -473,15 +520,37 @@ ...@@ -473,15 +520,37 @@
name: node_data.name || node_data.id name: node_data.name || node_data.id
}), "text/html").querySelector(".window"); }), "text/html").querySelector(".window");
render_element.append(domElement); render_element.append(domElement);
console.log("addNODE 5"); waitForNodeClick(gadget, domElement);
waitForNodeClick(gadget, domElement, class_definition); //waitForNodeClick(gadget, domElement, class_definition);
box = $(gadget.props.element).find("#" + dom_element_id); box = $(gadget.props.element).find("#" + dom_element_id);
absolute_position = convertToAbsolutePosition(gadget, coordinate.left, coordinate.top); absolute_position = convertToAbsolutePosition(gadget, coordinate.left, coordinate.top);
console.log("addNODE 6");
box.css("top", absolute_position[1]); box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]); box.css("left", absolute_position[0]);
updateNodeStyle(gadget, dom_element_id); updateNodeStyle(gadget, dom_element_id);
draggable(gadget); draggable(gadget);
// XXX make only this element draggable.
// Add some flowchart endpoints
// TODO: add them all !
gadget.props.jsplumb_instance.addEndpoint(dom_element_id, {
isSource: true,
maxConnections: -1,
connector: [ "Flowchart", {
stub: [ 40, 60 ],
gap: 10,
cornerRadius: 5,
alwaysRespectStubs: true
} ]
}, {
anchor: "BottomCenter",
uuid: node_id + ".flowchartBottomCenter"
});
gadget.props.jsplumb_instance.addEndpoint(dom_element_id, {
isTarget: true,
maxConnections: -1
}, {
anchor: "LeftMiddle",
uuid: node_id + ".flowChartLeftMiddle"
});
gadget.notifyDataChanged(); gadget.notifyDataChanged();
console.log("addNODE 7"); console.log("addNODE 7");
} }
...@@ -499,14 +568,8 @@ ...@@ -499,14 +568,8 @@
function resolver(resolve, reject) { function resolver(resolve, reject) {
console.log("wait for DROP resolver1"); console.log("wait for DROP resolver1");
callback = function(evt) { callback = function(evt) {
console.log("wait for DROP resolver2");
try { try {
console.log("wait for DROP resolver3");
var class_name = JSON.parse(evt.dataTransfer.getData("application/json")), offset = $(gadget.props.main).offset(), relative_position = convertToRelativePosition(gadget, evt.clientX - offset.left + "px", evt.clientY - offset.top + "px"); var class_name = JSON.parse(evt.dataTransfer.getData("application/json")), offset = $(gadget.props.main).offset(), relative_position = convertToRelativePosition(gadget, evt.clientX - offset.left + "px", evt.clientY - offset.top + "px");
console.log("wait for DROP resolver4");
console.log(class_name);
console.log(offset);
console.log(relative_position);
addNode(gadget, generateNodeId(gadget, { addNode(gadget, generateNodeId(gadget, {
_class: class_name _class: class_name
}), { }), {
...@@ -516,7 +579,6 @@ ...@@ -516,7 +579,6 @@
}, },
_class: class_name _class: class_name
}); });
console.log("wait for DROP resolver5");
} catch (e) { } catch (e) {
console.log("wait for DROP resolver100"); console.log("wait for DROP resolver100");
reject(e); reject(e);
...@@ -531,31 +593,66 @@ ...@@ -531,31 +593,66 @@
return undefined; return undefined;
}), RSVP.Promise(resolver, canceller) ]); }), RSVP.Promise(resolver, canceller) ]);
} }
initGadgetMixin(gadget_klass); //initGadgetMixin(gadget_klass);
gadget_klass.declareAcquiredMethod("notifyDataChanged", "notifyDataChanged").ready(function(g) { gadget_klass.ready(function(g) {
g.props = {};
g.props.node_id_to_dom_element_id = {}; g.props.node_id_to_dom_element_id = {};
g.props.zoom_level = 1; g.props.zoom_level = 1;
g.props.style_attr_list = [ "width", "height", "padding-top", "line-height" ]; g.props.style_attr_list = [ "width", "height", "padding-top", "line-height" ];
}).declareMethod("render", function(data) { g.getElement().then(function(element) {
g.props.element = element;
});
}).declareAcquiredMethod("notifyDataChanged", "notifyDataChanged").declareMethod("render", function(data) {
// var gadget = this;
console.log("RENDEERING WORKFLOW EDITOR1"); console.log("RENDEERING WORKFLOW EDITOR1");
this.props.data = JSON.parse(data); this.props.data = JSON.parse(data);
this.props.jsplumb_instance = jsPlumb.getInstance(); this.props.jsplumb_instance = jsPlumb.getInstance();
console.log(this.props.data);
console.log("RENDEERING WORKFLOW EDITOR3"); console.log("RENDEERING WORKFLOW EDITOR3");
}).declareMethod("getContent", function() { }).declareMethod("getContent", function() {
console.log("£££££££");
console.log("£££££££");
console.log("£££££££");
console.log(this.props.data);
console.log("£££££££");
console.log("£££££££");
console.log("£££££££");
return JSON.stringify(this.props.data); return JSON.stringify(this.props.data);
}).declareMethod("startService", function() { }).declareMethod("startService", function() {
console.log("startservice WORKFLOW EDITOR1"); console.log("startservice WORKFLOW EDITOR1");
var gadget = this; var gadget = this, jsplumb_instance = gadget.props.jsplumb_instance;
this.props.main = this.props.element.querySelector("#main"); this.props.main = this.props.element.querySelector("#main");
initJsPlumb(this); jsplumb_instance.setRenderMode(jsplumb_instance.SVG);
jsplumb_instance.importDefaults({
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
},
Endpoint: [ "Dot", {
radius: 2
} ],
ConnectionOverlays: [ [ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: .8
} ] ],
Container: this.props.main
});
console.log("startservice WORKFLOW EDITOR2");
draggable(gadget);
this.props.nodes_click_monitor = RSVP.Monitor(); this.props.nodes_click_monitor = RSVP.Monitor();
$.each(this.props.data.graph.main_graph.node, function(key, value) { // load the data
//$.each(this.props.data.graph.main_graph.node, function (key, value) {
$.each(this.props.data.graph.node, function(key, value) {
addNode(gadget, key, value); addNode(gadget, key, value);
}); });
$.each(this.props.data.graph.main_graph.edge, function(key, value) { console.log("startservice WORKFLOW EDITOR3");
//$.each(this.props.data.graph.main_graph.edge, function (key, value) {
$.each(this.props.data.graph.edge, function(key, value) {
addEdge(gadget, key, value); addEdge(gadget, key, value);
}); });
console.log("startservice WORKFLOW EDITOR2"); console.log("startservice WORKFLOW EDITOR4");
return RSVP.all([ waitForDrop(gadget), waitForConnection(gadget), waitForConnectionDetached(gadget), waitForConnectionClick(gadget), gadget.props.nodes_click_monitor ]); return RSVP.all([ waitForDrop(gadget), waitForConnection(gadget), waitForConnectionDetached(gadget), waitForConnectionClick(gadget), gadget.props.nodes_click_monitor ]);
}); });
})(RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin, loopEventListener, promiseEventListener, DOMParser); })(RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser);
\ No newline at end of file \ No newline at end of file
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