Commit d4047ea2 authored by Jérome Perrin's avatar Jérome Perrin

lots of cleanups

parent 2b526d46
......@@ -3,9 +3,9 @@
"use strict";
var gadget_klass = rJS(window);
// TODO: save on parent gadget
function saveGraph(evt) {
var gadget = this,
graph_data;
var gadget = this;
return new RSVP.Queue()
.push(function () {
// Prevent double click
......@@ -18,11 +18,10 @@
return graph_gadget.getContent();
})
.push(function (body) {
console.log("saving", JSON.parse(body));
return gadget.aq_putAttachment({
"_id": gadget.props.jio_key,
"_attachment": "body.json",
"_data": body, //JSON.stringify(data, null, 2),
"_data": JSON.stringify(JSON.parse(body), null, 2),
"_mimetype": "application/json"
});
})
......@@ -44,6 +43,7 @@
gadget_klass
// TODO Mixin
.ready(function (g) {
g.props = {};
})
......
......@@ -17,15 +17,17 @@
initGadgetMixin(gadget_klass);
gadget_klass
.declareMethod("render", function (property_list, data, key) {
.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,
value,
property;
gadget.key = key; // used for recursive fieldsets
gadget.props.key = options.key; // used for recursive fieldsets
gadget.props.field_gadget_list = [];
function addField(property, value) {
function addField(property_id, property_definition, value) {
var sub_gadget;
queue
.push(function () {
......@@ -34,39 +36,29 @@
gadget.props.element.insertAdjacentHTML(
'beforeend',
label_template({
"for": property.id,
"name": (property.name || property.id)
"for": property_id,
"name": (property_definition.name || property_id)
})
);
if (property._class === "Dream.PropertyList") {
if (property_definition.type === "object") {
// Create a recursive fieldset for this key.
return gadget.declareGadget("../fieldset/index.html");
}
if (property.type === "number") {
if (property_definition.type === "number") {
return gadget.declareGadget("../number_field/index.html");
}
if (property.choice) {
if (property_definition.enum) {
return gadget.declareGadget("../list_field/index.html");
}
return gadget.declareGadget("../string_field/index.html");
})
.push(function (gg) {
sub_gadget = gg;
var choice = property.choice || [],
default_opt = choice[0] ? [choice[0][1]] : [""];
value = (data[property.id] === undefined ?
value : data[property.id]);
if (gg.__title === 'Fieldset') {
// XXX there must be a better way instead of using __title ?
return gg.render(property.property_list, value, property.id);
}
return sub_gadget.render({field_json: {
title: (property.description || ''),
key: property.id,
return sub_gadget.render({
key: property_id,
value: value,
items: choice,
default: default_opt
}});
property_definition: property_definition
});
})
.push(function () {
return sub_gadget.getElement();
......@@ -79,13 +71,21 @@
queue = new RSVP.Queue()
.push(function () {
Object.keys(property_list).forEach(function (i) {
property = property_list[i];
value = property._default === undefined ? "" : property._default;
addField(property, value);
if (node_id) {
addField('id', {'type': 'string'}, node_id);
}
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];
// XXX some properties are not editable
if (property_name !== 'coordinate' && property_name !== '_class') {
addField(property_name, property_definition, value);
}
});
});
return queue;
})
......@@ -99,8 +99,8 @@
.push(function () { return RSVP.all(promise_list); })
.push(function (result_list) {
var name, result = {}, content = result;
if (gadget.key) {
content = result[gadget.key] = {};
if (gadget.props.key) {
content = result[gadget.props.key] = {};
}
for (i = 0; i < result_list.length; i += 1) {
for (name in result_list[i]) {
......
......@@ -19,16 +19,15 @@
/*global RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
loopEventListener, promiseEventListener, DOMParser, confirm */
/*jslint unparam: true */
/*jslint unparam: true todo: true */
(function (RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
loopEventListener, promiseEventListener, DOMParser) {
"use strict";
/*jslint nomen: true */
/* TODO:
* - make node edit a gadget ?
* - add function to turn event handlers in promise. Or just use event
* handlers ? XXX understand the diff with example
* - make node edition popup a gadget ?
* - add function to turn event handlers in promise ?
*
* tests:
* - loading
......@@ -67,7 +66,8 @@
}
cancelResolver();
}
function itsANonResolvableTrap(resolve, reject) {
function resolver(resolve, reject) {
handle_event_callback = function () {
var args = arguments;
......@@ -86,13 +86,14 @@
jsplumb_instance.bind(type, handle_event_callback);
}
return new RSVP.Promise(itsANonResolvableTrap, canceller);
return new RSVP.Promise(resolver, canceller);
}
function getNodeId(node_container, element_id) {
function getNodeId(gadget, element_id) {
// returns the ID of the node in the graph from its DOM element id
var node_id;
$.each(node_container, function (k, v) {
if (v.element_id === element_id) {
$.each(gadget.props.node_id_to_dom_element_id, function (k, v) {
if (v === element_id) {
node_id = k;
return false;
}
......@@ -100,23 +101,19 @@
return node_id;
}
function getElementId(gadget, node_id) {
// TODO: inline
return gadget.props.dom_element_id_container[node_id];
}
function generateNodeId(gadget, element) {
// Generate a node id
var n = 1,
class_def = gadget.props.data.class_definition[element._class],
id = class_def.short_id || element._class;
console.log("gni", element, class_def);
while (gadget.props.node_container[id + n] !== undefined) {
n += 1;
}
return id + n;
}
function generateElementId(gadget_element) {
function generateDomElementId(gadget_element) {
// Generate a probably unique DOM element ID.
var n = 1;
while ($(gadget_element).find('#DreamNode_' + n).length > 0) {
n += 1;
......@@ -129,10 +126,8 @@
delete gadget.props.data.graph.main_graph.edge[connection.id];
} else {
edge_data = edge_data || {'_class': 'Dream.Edge'};
edge_data.source = getNodeId(gadget.props.node_container,
connection.sourceId);
edge_data.destination = getNodeId(gadget.props.node_container,
connection.targetId);
edge_data.source = getNodeId(gadget, connection.sourceId);
edge_data.destination = getNodeId(gadget, connection.targetId);
gadget.props.data.graph.main_graph.edge[connection.id] = edge_data;
}
gadget.notifyDataChanged();
......@@ -192,21 +187,23 @@
}
function updateElementCoordinate(gadget, node_id, coordinate) {
var element_id = gadget.props.dom_element_id_container[node_id],
var element_id = gadget.props.node_id_to_dom_element_id[node_id],
element,
relative_position;
if (coordinate === undefined) {
coordinate = {};
element = $(gadget.props.element).find("#" + element_id);
relative_position = convertToRelativePosition(
gadget,
element.css('left'),
element.css('top')
);
coordinate.top = relative_position[1];
coordinate.left = relative_position[0];
coordinate = {
left: relative_position[0],
top: relative_position[1]
};
}
console.log("uec", node_id, gadget.props.node_container);
gadget.props.node_container[node_id].coordinate = coordinate;
gadget.notifyDataChanged();
return coordinate;
......@@ -215,10 +212,7 @@
function draggable(gadget) {
var jsplumb_instance = gadget.props.jsplumb_instance,
stop = function (element) {
updateElementCoordinate(gadget, getNodeId(
gadget.props.node_container,
element.target.id
));
updateElementCoordinate(gadget, getNodeId(gadget, element.target.id));
};
jsplumb_instance
......@@ -294,6 +288,8 @@
}
function updateNodeStyle(gadget, element_id) {
// Update node size according to the zoom level
// XXX does nothing for now
var zoom_level = gadget.props.zoom_level * 1.1111,
element = $(gadget.props.element).find("#" + element_id),
new_value;
......@@ -304,22 +300,6 @@
});
}
function addElementToContainer(node_container, element) {
// Now update the container of elements
/*jslint nomen: true*/
var element_data = {
_class: element._class,
name: element.name,
element_id: element.element_id
};
Object.keys(element).forEach(function (k) {
if (k !== '_class' && k !== 'name' && k !== 'element_id') {
element_data[k] = element[k];
}
});
node_container[element.id] = element_data;
}
// function redraw(gadget) {
// var coordinates = gadget.props.preference_container.coordinates || {},
// absolute_position,
......@@ -331,7 +311,7 @@
// v.top
// );
// element = $(gadget.props.element).find(
// '#' + getElementId(gadget.props.node_container, node_id)
// '#' + gadget.props.node_id_to_dom_element_id[node_id];
// );
// element.css('top', absolute_position[1]);
// element.css('left', absolute_position[0]);
......@@ -381,8 +361,10 @@
}
function updateElementData(gadget, node_id, data) {
var element_id = gadget.props.dom_element_id_container[node_id];
// XXX should probably not use data.data
var element_id = gadget.props.node_id_to_dom_element_id[node_id],
new_id = data.id;
console.log('ued', node_id, data);
if (data.data.name) {
$(gadget.props.element).find("#" + element_id).text(data.data.name)
.append('<div class="ep"></div></div>');
......@@ -419,8 +401,8 @@
}
connection = gadget.props.jsplumb_instance.connect({
source: getElementId(gadget, edge_data.source),
target: getElementId(gadget, edge_data.destination),
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
});
......@@ -428,12 +410,38 @@
connection.id = edge_id;
}
function openNodeDialog(gadget, element, config_dict) {
var node_id = getNodeId(gadget.props.node_container, element.id),
function expandSchema(class_definition, full_schema) {
// minimal expanding of json schema, supports merging allOf and $ref
// references
var name, property, referenced, i,
expanded_class_definition = {properties:
class_definition.properties || {}};
if (class_definition.allOf) {
for (i = 0; i < class_definition.allOf.length; i += 1) {
referenced = class_definition.allOf[i];
if (referenced.$ref) {
referenced = expandSchema(
full_schema.class_definition[
referenced.$ref.substr(1, referenced.$ref.length)
],
full_schema);
}
for (property in (referenced.properties || [])) {
if (referenced.properties[property].type) {
expanded_class_definition.properties[property]
= referenced.properties[property];
}
}
}
}
return expanded_class_definition;
}
function openNodeDialog(gadget, element, class_definition) {
var node_id = getNodeId(gadget, element.id),
node_data = gadget.props.node_container[node_id],
element_type = node_data._class.replace('.', '-'),
property_list = config_dict[element_type].property_list || [],
node_edit_popup = $(gadget.props.element).find('#popup-edit-template'),
schema = expandSchema(class_definition, gadget.props.data),
fieldset_element,
delete_promise;
......@@ -450,23 +458,7 @@
fieldset_element = node_edit_popup.find('fieldset')[0];
node_edit_popup.popup();
node_data.id = node_id;
if (property_list.length === 0 || property_list[0].id !== "id") {
// XXX name & id should not be handled differently in form.
property_list.unshift({
"_class": "Dream.Property",
"id": "name",
"name": "Name",
"type": "string"
});
property_list.unshift({
"_class": "Dream.Property",
"id": 'id',
"name": "ID",
"type": "string"
});
}
node_data.id = node_id; // XXX
function save_promise(fieldset_gadget, node_id) {
return RSVP.Queue()
......@@ -509,7 +501,9 @@
.push(function (fieldset_gadget) {
// XXX those promises can probably be merged
return RSVP.all([fieldset_gadget,
fieldset_gadget.render(property_list, node_data)]);
fieldset_gadget.render({value: node_data,
property_definition: schema},
node_id)]);
})
.push(function (fieldset_gadget) {
node_edit_popup.enhanceWithin();
......@@ -541,20 +535,16 @@
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("adding", node_id, gadget.props.dom_element_id_container);
gadget.props.dom_element_id_container[node_id] =
generateElementId(gadget.props.element);
/*
if (!element.id) {
element.id = generateNodeId(gadget, element);
}
*/
// element.name = element.name || element.class_definition.name;
dom_element_id = generateDomElementId(gadget.props.element);
gadget.props.node_id_to_dom_element_id[node_id] = dom_element_id;
node_data.name = node_data.name || class_definition.name;
addElementToContainer(gadget.props.node_container, node_data);
gadget.props.node_container[node_id] = node_data;
if (coordinate !== undefined) {
node_data.coordinate = updateElementCoordinate(
......@@ -564,12 +554,12 @@
);
}
// XXX stop using handlebars
// XXX make this an option, or use CSS from class_definition
/*jslint nomen: true*/
domElement = domParser.parseFromString(
node_template({
"class": node_data._class.replace('.', '-'),
"element_id": node_data.element_id,
"element_id": dom_element_id,
"title": node_data.name || node_data.id,
"name": node_data.name || node_data.id
}),
......@@ -578,7 +568,8 @@
render_element.append(domElement);
waitForNodeClick(gadget, domElement, class_definition);
box = $(gadget.props.element).find("#" + node_data.element_id);
box = $(gadget.props.element).find("#" + dom_element_id);
absolute_position = convertToAbsolutePosition(
gadget,
coordinate.left,
......@@ -586,7 +577,7 @@
);
box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]);
updateNodeStyle(gadget, node_data.element_id);
updateNodeStyle(gadget, dom_element_id);
draggable(gadget);
gadget.notifyDataChanged();
}
......@@ -603,32 +594,25 @@
function waitForDrop(gadget) {
var callback;
function canceller() {
if (callback !== undefined) {
gadget.props.main.removeEventListener('drop', callback, false);
}
}
/*jslint unparam: true*/
function itsANonResolvableTrap(resolve, reject) {
function resolver(resolve, reject) {
// XXX name this function seriously
callback = function (evt) {
try {
var class_name_and_class_definition = JSON.parse(
var class_name = JSON.parse(
evt.dataTransfer.getData('application/json')
),
class_name = class_name_and_class_definition[0],
class_definition = class_name_and_class_definition[1],
offset = $(gadget.props.main).offset(),
box_top = evt.clientY - offset.top + "px",
box_left = evt.clientX - offset.left + "px",
relative_position = convertToRelativePosition(
gadget,
box_left,
box_top
evt.clientX - offset.left + "px",
evt.clientY - offset.top + "px"
);
addNode(gadget,
generateNodeId(gadget, {_class: class_name}),
{
......@@ -646,18 +630,17 @@
gadget.props.main.addEventListener('drop', callback, false);
}
return new RSVP.Promise(itsANonResolvableTrap, canceller);
return new RSVP.Promise(resolver, canceller);
}
initGadgetMixin(gadget_klass);
gadget_klass
.declareAcquiredMethod('getConfigurationDict', 'getConfigurationDict')
.declareAcquiredMethod('notifyDataChanged', 'notifyDataChanged')
.ready(function (g) {
g.props.edge_container = {};
g.props.dom_element_id_container = {};
g.props.edge_container = {}; // XXX remove
g.props.node_id_to_dom_element_id = {};
g.props.zoom_level = 1.0;
g.props.style_attr_list = [
'width',
......@@ -669,13 +652,12 @@
.declareMethod('render', function (data) {
this.props.data = JSON.parse(data);
console.log("render", this.props.data);
this.props.node_container = this.props.data.graph.main_graph.node;
this.props.jsplumb_instance = jsPlumb.getInstance();
})
.declareMethod('getContent', function () {
return JSON.stringify(this.props.data)
return JSON.stringify(this.props.data);
})
.declareMethod('startService', function () {
......
......@@ -28,18 +28,18 @@
var select = this.element.getElementsByTagName('select')[0],
i,
template,
field_json = options.field_json,
tmp = '';
select.setAttribute('name', field_json.key);
for (i = 0; i < field_json.items.length; i += 1) {
if (field_json.items[i][1] === field_json.value) {
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: field_json.items[i][1],
text: field_json.items[i][0]
value: options.property_definition.enum[i],
text: options.property_definition.enum[i]
});
}
select.innerHTML += tmp;
......
......@@ -10,11 +10,10 @@
});
})
.declareMethod('render', function (options) {
var input = this.element.querySelector('input'),
field_json = options.field_json || {};
input.setAttribute('value', field_json.value);
input.setAttribute('name', field_json.key);
input.setAttribute('title', field_json.title);
var input = this.element.querySelector('input');
input.setAttribute('value', options.value);
input.setAttribute('name', options.key);
input.setAttribute('title', options.title || options.key);
})
.declareMethod('getContent', function () {
......
......@@ -10,11 +10,10 @@
});
})
.declareMethod('render', function (options) {
var input = this.element.querySelector('input'),
field_json = options.field_json || {};
input.setAttribute('value', field_json.value || "");
input.setAttribute('name', field_json.key);
input.setAttribute('title', field_json.title);
var input = this.element.querySelector('input');
input.setAttribute('value', options.value || "");
input.setAttribute('name', options.key);
input.setAttribute('title', options.title || options.key);
})
.declareMethod('getContent', function () {
......
......@@ -2,7 +2,6 @@
(function (window, document, RSVP, rJS, initGadgetMixin) {
"use strict";
// XXX use a renderjs utility function for that
/*jslint nomen: true*/
var gadget_klass = rJS(window);
function waitForDragstart(tool) {
......@@ -19,7 +18,7 @@
callback = function (evt) {
try {
evt.dataTransfer.setData('application/json',
tool.dataset.class_definition);
tool.dataset.class_name);
} catch (e) {
reject(e);
}
......@@ -49,7 +48,7 @@
tool.className = "tool " + key;
tool.textContent = _class.name || key;
tool.draggable = true;
tool.dataset.class_definition = JSON.stringify([key, _class]);
tool.dataset.class_name = JSON.stringify(key);
Object.keys(_class.css || {}).forEach(function (k) {
tool.style[k] = _class.css[k];
});
......
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