Skip to content

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

publish static version

parent e1a131c1
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 143 deletions
dream/platform/static/dream/Input_viewProductionLine.js
View file @ 2e471357
...@@ -25,13 +25,12 @@ ...@@ -25,13 +25,12 @@
toolbox_gadget.render(); toolbox_gadget.render();
}); });
}).declareMethod("startService", function() { }).declareMethod("startService", function() {
var g = this; var g = this, graph;
return g.getDeclaredGadget("productionline_graph").push(function(graph) { return g.getDeclaredGadget("productionline_graph").push(function(graph_gadget) {
return graph.startService(); graph = graph_gadget;
}).push(function() {
return g.getDeclaredGadget("productionline_toolbox"); return g.getDeclaredGadget("productionline_toolbox");
}).push(function(toolbox) { }).push(function(toolbox) {
return toolbox.startService(); return RSVP.all([ graph.startService(), toolbox.startService() ]);
}); });
}); });
})(window, rJS, RSVP); })(window, rJS, RSVP);
\ No newline at end of file
dream/platform/static/dream/mixin_promise.js
View file @ 2e471357
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/*jslint unparam: true */ /*jslint unparam: true */
(function(window, RSVP, FileReader) { (function(window, RSVP, FileReader) {
"use strict"; "use strict";
window.loopEventListener = function(target, type, useCapture, callback) { window.loopEventListener = function(target, type, useCapture, callback, allowDefault) {
////////////////////////// //////////////////////////
// Infinite event listener (promise is never resolved) // Infinite event listener (promise is never resolved)
// eventListener is removed when promise is cancelled/rejected // eventListener is removed when promise is cancelled/rejected
...@@ -22,7 +22,9 @@ ...@@ -22,7 +22,9 @@
function itsANonResolvableTrap(resolve, reject) { function itsANonResolvableTrap(resolve, reject) {
handle_event_callback = function(evt) { handle_event_callback = function(evt) {
evt.stopPropagation(); evt.stopPropagation();
evt.preventDefault(); if (allowDefault !== true) {
evt.preventDefault();
}
cancelResolver(); cancelResolver();
callback_promise = new RSVP.Queue().push(function() { callback_promise = new RSVP.Queue().push(function() {
return callback(evt); return callback(evt);
......
dream/platform/static/jsplumb/index.html
View file @ 2e471357
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<script src="../lib/renderjs.min.js"></script> <script src="../lib/renderjs.min.js"></script>
<script src="../lib/jquery.jsplumb.min.js"></script> <script src="../lib/jquery.jsplumb.min.js"></script>
<script src="../lib/handlebars.min.js"></script> <script src="../lib/handlebars.min.js"></script>
<script id="node-template" type="text/x-handlebars-template"> <script id="node-template" type="text/x-handlebars-template">
<div class="window {{class}}" <div class="window {{class}}"
id="{{element_id}}" id="{{element_id}}"
...@@ -20,7 +20,10 @@ ...@@ -20,7 +20,10 @@
<div class="ep"></div> <div class="ep"></div>
</div> </div>
</script> </script>
<script src="../dream/mixin_gadget.js"></script>
<script src="../dream/mixin_promise.js"></script>
<script src="jsplumb.js"></script> <script src="jsplumb.js"></script>
</head> </head>
<body> <body>
......
dream/platform/static/jsplumb/jsplumb.js
View file @ 2e471357
...@@ -16,12 +16,13 @@ ...@@ -16,12 +16,13 @@
* 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*/ /*global RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
loopEventListener, DOMParser*/
/*jslint unparam: true */ /*jslint unparam: true */
(function(RSVP, rJS, $, jsPlumb, Handlebars) { (function(RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin, loopEventListener, DOMParser) {
"use strict"; "use strict";
/*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); var gadget_klass = rJS(window), node_template_source = gadget_klass.__template_element.getElementById("node-template").innerHTML, node_template = Handlebars.compile(node_template_source), domParser = new DOMParser();
function getNodeId(node_container, element_id) { function getNodeId(node_container, element_id) {
var node_id; var node_id;
$.each(node_container, function(k, v) { $.each(node_container, function(k, v) {
...@@ -44,42 +45,42 @@ ...@@ -44,42 +45,42 @@
// } // }
// return (option.short_id || element_type) + n; // return (option.short_id || element_type) + n;
// } // }
// function generateElementId(gadget_element) { function generateElementId(gadget_element) {
// var n = 1; var n = 1;
// while ($(gadget_element).find('#DreamNode_' + n).length > 0) { while ($(gadget_element).find("#DreamNode_" + n).length > 0) {
// n += 1; n += 1;
// } }
// return 'DreamNode_' + n; return "DreamNode_" + n;
// } }
function onDataChange() { function onDataChange() {
//$.publish("Dream.Gui.onDataChange", g.private.getData()); //$.publish("Dream.Gui.onDataChange", g.private.getData());
return undefined; return undefined;
} }
function convertToAbsolutePosition(gadget, x, y) { function convertToAbsolutePosition(gadget, x, y) {
var zoom_level = (gadget.private.preference_container.zoom_level || 1) * 1.1111, canvas_size_x = $(gadget.private.element).find("#main").width(), canvas_size_y = $(gadget.private.element).find("#main").height(), size_x = $(gadget.private.element).find(".dummy_window").width() * zoom_level, size_y = $(gadget.private.element).find(".dummy_window").height() * zoom_level, top = Math.floor(y * (canvas_size_y - size_y)) + "px", left = Math.floor(x * (canvas_size_x - size_x)) + "px"; var zoom_level = (gadget.props.preference_container.zoom_level || 1) * 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";
return [ left, top ]; return [ left, top ];
} }
function convertToRelativePosition(gadget, x, y) { function convertToRelativePosition(gadget, x, y) {
var zoom_level = (gadget.private.preference_container.zoom_level || 1) * 1.1111, canvas_size_x = $(gadget.private.element).find("#main").width(), canvas_size_y = $(gadget.private.element).find("#main").height(), size_x = $(gadget.private.element).find(".dummy_window").width() * zoom_level, size_y = $(gadget.private.element).find(".dummy_window").height() * zoom_level, top = Math.max(Math.min(y.replace("px", "") / (canvas_size_y - size_y), 1), 0), left = Math.max(Math.min(x.replace("px", "") / (canvas_size_x - size_x), 1), 0); var zoom_level = (gadget.props.preference_container.zoom_level || 1) * 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);
return [ left, top ]; return [ left, top ];
} }
function updateElementCoordinate(gadget, node_id, coordinate) { function updateElementCoordinate(gadget, node_id, coordinate) {
var element_id = gadget.private.node_container[node_id].element_id, coordinates = gadget.private.preference_container.coordinates || {}, element, relative_position; var element_id = gadget.props.node_container[node_id].element_id, coordinates = gadget.props.preference_container.coordinates || {}, element, relative_position;
if (coordinate === undefined) { if (coordinate === undefined) {
coordinate = {}; coordinate = {};
element = $(gadget.private.element).find("#" + element_id); element = $(gadget.props.element).find("#" + element_id);
relative_position = convertToRelativePosition(gadget, element.css("left"), element.css("top")); relative_position = convertToRelativePosition(gadget, element.css("left"), element.css("top"));
coordinate.top = relative_position[1]; coordinate.top = relative_position[1];
coordinate.left = relative_position[0]; coordinate.left = relative_position[0];
} }
coordinates[node_id] = coordinate; coordinates[node_id] = coordinate;
gadget.private.preference_container.coordinates = coordinates; gadget.props.preference_container.coordinates = coordinates;
onDataChange(); onDataChange();
return coordinate; return coordinate;
} }
function draggable(gadget) { function draggable(gadget) {
var jsplumb_instance = gadget.private.jsplumb_instance, stop = function(element) { var jsplumb_instance = gadget.props.jsplumb_instance, stop = function(element) {
updateElementCoordinate(gadget, getNodeId(gadget.private.node_container, element.target.id)); updateElementCoordinate(gadget, getNodeId(gadget.props.node_container, element.target.id));
}; };
jsplumb_instance.draggable(jsplumb_instance.getSelector(".window"), { jsplumb_instance.draggable(jsplumb_instance.getSelector(".window"), {
containment: "parent", containment: "parent",
...@@ -107,7 +108,7 @@ ...@@ -107,7 +108,7 @@
}); });
} }
function initJsPlumb(gadget) { function initJsPlumb(gadget) {
var jsplumb_instance = gadget.private.jsplumb_instance; var jsplumb_instance = gadget.props.jsplumb_instance;
jsplumb_instance.setRenderMode(jsplumb_instance.SVG); jsplumb_instance.setRenderMode(jsplumb_instance.SVG);
jsplumb_instance.importDefaults({ jsplumb_instance.importDefaults({
HoverPaintStyle: { HoverPaintStyle: {
...@@ -142,11 +143,11 @@ ...@@ -142,11 +143,11 @@
// return undefined; // return undefined;
// }); // });
// split in 2 methods ? one for events one for manip // split in 2 methods ? one for events one for manip
gadget.private.updateConnectionData = function(connection, remove, edge_data) { gadget.props.updateConnectionData = function(connection, remove, edge_data) {
if (remove) { if (remove) {
delete gadget.private.edge_container[connection.id]; delete gadget.props.edge_container[connection.id];
} else { } else {
gadget.private.edge_container[connection.id] = [ getNodeId(gadget.private.node_container, connection.sourceId), getNodeId(gadget.private.node_container, connection.targetId), edge_data || {} ]; gadget.props.edge_container[connection.id] = [ getNodeId(gadget.props.node_container, connection.sourceId), getNodeId(gadget.props.node_container, connection.targetId), edge_data || {} ];
} }
onDataChange(); onDataChange();
}; };
...@@ -154,19 +155,19 @@ ...@@ -154,19 +155,19 @@
// and update the list of connections on screen. // and update the list of connections on screen.
// jsplumb_instance // jsplumb_instance
// .bind("connection", function (info, originalEvent) { // .bind("connection", function (info, originalEvent) {
// gadget.private.updateConnectionData(info.connection); // gadget.props.updateConnectionData(info.connection);
// }); // });
// jsplumb_instance // jsplumb_instance
// .bind("connectionDetached", function (info, originalEvent) { // .bind("connectionDetached", function (info, originalEvent) {
// gadget.private.updateConnectionData(info.connection, true); // gadget.props.updateConnectionData(info.connection, true);
// }); // });
onDataChange(); onDataChange();
draggable(gadget); draggable(gadget);
} }
function updateNodeStyle(gadget, element_id) { function updateNodeStyle(gadget, element_id) {
var zoom_level = (gadget.private.preference_container.zoom_level || 1) * 1.1111, element = $(gadget.private.element).find("#" + element_id), new_value; var zoom_level = (gadget.props.preference_container.zoom_level || 1) * 1.1111, element = $(gadget.props.element).find("#" + element_id), new_value;
$.each(gadget.private.style_attr_list, function(i, j) { $.each(gadget.props.style_attr_list, function(i, j) {
new_value = $(gadget.private.element).find(".dummy_window").css(j).replace("px", "") * zoom_level + "px"; new_value = $(gadget.props.element).find(".dummy_window").css(j).replace("px", "") * zoom_level + "px";
element.css(j, new_value); element.css(j, new_value);
}); });
} }
...@@ -179,16 +180,24 @@ ...@@ -179,16 +180,24 @@
}; };
node_container[element.id] = element_data; node_container[element.id] = element_data;
} }
function redraw(gadget) { // function redraw(gadget) {
var coordinates = gadget.private.preference_container.coordinates || {}, absolute_position, element; // var coordinates = gadget.props.preference_container.coordinates || {},
$.each(coordinates, function(node_id, v) { // absolute_position,
absolute_position = convertToAbsolutePosition(gadget, v.left, v.top); // element;
element = $(gadget.private.element).find("#" + getElementId(gadget.private.node_container, node_id)); // $.each(coordinates, function (node_id, v) {
element.css("top", absolute_position[1]); // absolute_position = convertToAbsolutePosition(
element.css("left", absolute_position[0]); // gadget,
gadget.private.jsplumb_instance.repaint(element); // v.left,
}); // v.top
} // );
// element = $(gadget.props.element).find(
// '#' + getElementId(gadget.props.node_container, node_id)
// );
// element.css('top', absolute_position[1]);
// element.css('left', absolute_position[0]);
// gadget.props.jsplumb_instance.repaint(element);
// });
// }
// function positionGraph(gadget) { // function positionGraph(gadget) {
// $.ajax( // $.ajax(
// '/positionGraph', // '/positionGraph',
...@@ -214,55 +223,55 @@ ...@@ -214,55 +223,55 @@
// ); // );
// } // }
// function setZoom(gadget, zoom_level) { // function setZoom(gadget, zoom_level) {
// $.each(gadget.private.style_attr_list, function (i, j) { // $.each(gadget.props.style_attr_list, function (i, j) {
// var new_value = $(gadget.private.element).find('.dummy_window') // var new_value = $(gadget.props.element).find('.dummy_window')
// .css(j).replace('px', '') * zoom_level + 'px'; // .css(j).replace('px', '') * zoom_level + 'px';
// $(gadget.private.element).find('.window').css(j, new_value); // $(gadget.props.element).find('.window').css(j, new_value);
// }); // });
// } // }
// function zoom_in(gadget) { // function zoom_in(gadget) {
// var zoom_level = (gadget.private.preference_container.zoom_level || 1.0) * // var zoom_level = (gadget.props.preference_container.zoom_level || 1.0) *
// 1.1111; // 1.1111;
// setZoom(gadget, zoom_level); // setZoom(gadget, zoom_level);
// gadget.private.preference_container.zoom_level = zoom_level; // gadget.props.preference_container.zoom_level = zoom_level;
// onDataChange(); // onDataChange();
// redraw(gadget); // redraw(gadget);
// } // }
// function zoom_out(gadget) { // function zoom_out(gadget) {
// var zoom_level = (gadget.private.preference_container.zoom_level || 1.0) * // var zoom_level = (gadget.props.preference_container.zoom_level || 1.0) *
// 0.9; // 0.9;
// setZoom(gadget, zoom_level); // setZoom(gadget, zoom_level);
// gadget.private.preference_container.zoom_level = zoom_level; // gadget.props.preference_container.zoom_level = zoom_level;
// onDataChange(); // onDataChange();
// redraw(gadget); // redraw(gadget);
// } // }
// function removeElement(gadget, node_id) { // function removeElement(gadget, node_id) {
// var element_id = gadget.private.node_container[node_id].element_id; // var element_id = gadget.props.node_container[node_id].element_id;
// gadget.private.jsplumb_instance.removeAllEndpoints( // gadget.props.jsplumb_instance.removeAllEndpoints(
// $(gadget.private.element).find("#" + element_id) // $(gadget.props.element).find("#" + element_id)
// ); // );
// $(gadget.private.element).find("#" + element_id).remove(); // $(gadget.props.element).find("#" + element_id).remove();
// delete gadget.private.node_container[node_id]; // delete gadget.props.node_container[node_id];
// delete gadget.private.preference_container.coordinates[node_id]; // delete gadget.props.preference_container.coordinates[node_id];
// $.each(gadget.private.edge_container, function (k, v) { // $.each(gadget.props.edge_container, function (k, v) {
// if (node_id === v[0] || node_id === v[1]) { // if (node_id === v[0] || node_id === v[1]) {
// delete gadget.private.edge_container[k]; // delete gadget.props.edge_container[k];
// } // }
// }); // });
// onDataChange(); // onDataChange();
// } // }
function updateElementData(gadget, node_id, data) { function updateElementData(gadget, node_id, data) {
var element_id = gadget.private.node_container[node_id].element_id, new_id = data.id; var element_id = gadget.props.node_container[node_id].element_id, new_id = data.id;
if (data.name) { if (data.name) {
$(gadget.private.element).find("#" + element_id).text(data.name).append('<div class="ep"></div></div>'); $(gadget.props.element).find("#" + element_id).text(data.name).append('<div class="ep"></div></div>');
gadget.private.node_container[node_id].name = data.name; gadget.props.node_container[node_id].name = data.name;
} }
delete data.id; delete data.id;
$.extend(gadget.private.node_container[node_id], data.data); $.extend(gadget.props.node_container[node_id], data.data);
if (new_id && new_id !== node_id) { if (new_id && new_id !== node_id) {
gadget.private.node_container[new_id] = gadget.private.node_container[node_id]; gadget.props.node_container[new_id] = gadget.props.node_container[node_id];
delete gadget.private.node_container[node_id]; delete gadget.props.node_container[node_id];
$.each(gadget.private.edge_container, function(k, v) { $.each(gadget.props.edge_container, function(k, v) {
if (v[0] === node_id) { if (v[0] === node_id) {
v[0] = new_id; v[0] = new_id;
} }
...@@ -270,23 +279,23 @@ ...@@ -270,23 +279,23 @@
v[1] = new_id; v[1] = new_id;
} }
}); });
gadget.private.preference_container.coordinates[new_id] = gadget.private.preference_container.coordinates[node_id]; gadget.props.preference_container.coordinates[new_id] = gadget.props.preference_container.coordinates[node_id];
delete gadget.private.preference_container.coordinates[node_id]; delete gadget.props.preference_container.coordinates[node_id];
} }
onDataChange(); onDataChange();
} }
// function clearAll(gadget) { // function clearAll(gadget) {
// $.each(gadget.private.node_container, function (node_id) { // $.each(gadget.props.node_container, function (node_id) {
// removeElement(gadget, node_id); // removeElement(gadget, node_id);
// }); // });
// // delete anything if still remains // // delete anything if still remains
// $(gadget.private.element).find("#main").children().remove(); // $(gadget.props.element).find("#main").children().remove();
// gadget.private.node_container = {}; // gadget.props.node_container = {};
// gadget.private.edge_container = {}; // gadget.props.edge_container = {};
// gadget.private.preference_container = {}; // gadget.props.preference_container = {};
// gadget.private.general_container = {}; // gadget.props.general_container = {};
// gadget.private.initGeneralProperties(); // gadget.props.initGeneralProperties();
// gadget.private.prepareDialogForGeneralProperties(); // gadget.props.prepareDialogForGeneralProperties();
// } // }
function addEdge(gadget, edge_id, edge_data) { function addEdge(gadget, edge_id, edge_data) {
var source_id = edge_data[0], target_id = edge_data[1], data = edge_data[2], overlays = [], connection; var source_id = edge_data[0], target_id = edge_data[1], data = edge_data[2], overlays = [], connection;
...@@ -296,9 +305,9 @@ ...@@ -296,9 +305,9 @@
label: data.title label: data.title
} ] ]; } ] ];
} }
connection = gadget.private.jsplumb_instance.connect({ connection = gadget.props.jsplumb_instance.connect({
source: getElementId(gadget.private.node_container, source_id), source: getElementId(gadget.props.node_container, source_id),
target: getElementId(gadget.private.node_container, target_id), target: getElementId(gadget.props.node_container, target_id),
Connector: [ "Bezier", { Connector: [ "Bezier", {
curviness: 75 curviness: 75
} ], } ],
...@@ -306,28 +315,31 @@ ...@@ -306,28 +315,31 @@
}); });
// call again updateConnectionData to set the connection data that // call again updateConnectionData to set the connection data that
// was not passed to the connection hook // was not passed to the connection hook
gadget.private.updateConnectionData(connection, 0, data); gadget.props.updateConnectionData(connection, 0, data);
} }
// function setPreferences(gadget, preferences) { // function setPreferences(gadget, preferences) {
// gadget.private.preference_container = preferences; // gadget.props.preference_container = preferences;
// var zoom_level = gadget.private.preference_container.zoom_level || 1.0; // var zoom_level = gadget.props.preference_container.zoom_level || 1.0;
// setZoom(gadget, zoom_level); // setZoom(gadget, zoom_level);
// } // }
// function setGeneralProperties(gadget, properties) { // function setGeneralProperties(gadget, properties) {
// gadget.private.general_container = properties; // gadget.props.general_container = properties;
// onDataChange(); // onDataChange();
// } // }
// function updateGeneralProperties(gadget, properties) { // function updateGeneralProperties(gadget, properties) {
// $.extend(gadget.private.general_container, properties); // $.extend(gadget.props.general_container, properties);
// onDataChange(); // onDataChange();
// } // }
function newElement(gadget, element, option) { function newElement(gadget, element, option) {
element.name = element.name || option.name; element.name = element.name || option.name;
addElementToContainer(gadget.private.node_container, element); addElementToContainer(gadget.props.node_container, element);
var render_element = $(gadget.private.element).find("#main"), coordinate = element.coordinate, box, absolute_position; var render_element = $(gadget.props.element).find("#main"), coordinate = element.coordinate, box, absolute_position;
if (coordinate !== undefined) { if (coordinate !== undefined) {
coordinate = updateElementCoordinate(gadget, element.id, coordinate); coordinate = updateElementCoordinate(gadget, element.id, coordinate);
} }
if (element.element_id === undefined) {
element.element_id = generateElementId(gadget.props.element);
}
/*jslint nomen: true*/ /*jslint nomen: true*/
render_element.append(node_template({ render_element.append(node_template({
"class": element._class.replace(".", "-"), "class": element._class.replace(".", "-"),
...@@ -335,7 +347,7 @@ ...@@ -335,7 +347,7 @@
title: element.name || element.id, title: element.name || element.id,
id: element.id id: element.id
})); }));
box = $(gadget.private.element).find("#" + element.element_id); box = $(gadget.props.element).find("#" + element.element_id);
absolute_position = convertToAbsolutePosition(gadget, coordinate.left, coordinate.top); absolute_position = convertToAbsolutePosition(gadget, coordinate.left, coordinate.top);
box.css("top", absolute_position[1]); box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]); box.css("left", absolute_position[0]);
...@@ -343,49 +355,74 @@ ...@@ -343,49 +355,74 @@
draggable(gadget); draggable(gadget);
onDataChange(); onDataChange();
} }
function waitForDragover(gadget) {
return loopEventListener(gadget.props.main, "dragover", false, function() {
return undefined;
});
}
function waitForDrop(gadget) {
var target = gadget.props.element.querySelector("#main"), callback;
function canceller() {
if (callback !== undefined) {
target.removeEventListener("drop", callback, false);
}
}
function nonResolvableTrap(resolve, reject) {
callback = function(evt) {
var element = domParser.parseFromString(evt.dataTransfer.getData("text/html"), "text/html").querySelector(".tool"), offset = $(gadget.props.main).offset(), box_top = evt.clientY - offset.top + "px", box_left = evt.clientX - offset.left + "px", element_class = element.id.replace("-", "."), relative_position = convertToRelativePosition(gadget, box_left, box_top);
newElement(gadget, {
coordinate: {
left: relative_position[0],
top: relative_position[1]
},
_class: element_class,
name: element_class
});
};
target.addEventListener("drop", callback, false);
}
return new RSVP.Promise(nonResolvableTrap, canceller);
}
initGadgetMixin(gadget_klass);
gadget_klass.ready(function(g) { gadget_klass.ready(function(g) {
g.private = { g.props.node_container = {};
node_container: {}, g.props.edge_container = {};
edge_container: {}, g.props.preference_container = {};
preference_container: {}, g.props.style_attr_list = [ "width", "height", "padding-top", "line-height" ];
style_attr_list: [ "width", "height", "padding-top", "line-height" ]
};
}).declareMethod("render", function(data) { }).declareMethod("render", function(data) {
this.private.data = JSON.parse(data); this.props.data = JSON.parse(data);
this.private.jsplumb_instance = jsPlumb.getInstance(); this.props.jsplumb_instance = jsPlumb.getInstance();
}).declareMethod("getData", function() { }).declareMethod("getData", function() {
return JSON.stringify({ return JSON.stringify({
nodes: this.private.node_container, nodes: this.props.node_container,
edges: this.private.edge_container, edges: this.props.edge_container,
preference: this.private.preference_container preference: this.props.preference_container
}); });
}).declareMethod("startService", function() { }).declareMethod("startService", function() {
var gadget = this, preference = gadget.private.data.preference !== undefined ? gadget.private.data.preference : {}, coordinates = preference.coordinates; var g = this, preference = g.props.data.preference !== undefined ? g.props.data.preference : {}, coordinates = preference.coordinates;
return gadget.getElement().then(function(el) { g.props.main = g.props.element.querySelector("#main");
gadget.private.element = el; initJsPlumb(g);
initJsPlumb(gadget); $.each(g.props.data.nodes, function(key, value) {
$.each(gadget.private.data.nodes, function(key, value) { if (coordinates === undefined || coordinates[key] === undefined) {
if (coordinates === undefined || coordinates[key] === undefined) { value.coordinate = {
value.coordinate = { top: 0,
top: 0, left: 0
left: 0 };
}; } else {
} else { value.coordinate = coordinates[key];
value.coordinate = coordinates[key]; }
} value.id = key;
value.id = key; newElement(g, value);
newElement(gadget, value); if (value.data) {
if (value.data) { // backward compatibility
// backward compatibility updateElementData(g, key, {
updateElementData(gadget, key, { data: value.data
data: value.data });
}); }
} });
}); $.each(g.props.data.edges, function(key, value) {
$.each(gadget.private.data.edges, function(key, value) { addEdge(g, key, value);
addEdge(gadget, key, value);
});
redraw(gadget);
}); });
return RSVP.all([ waitForDragover(g), waitForDrop(g) ]);
}); });
})(RSVP, rJS, $, jsPlumb, Handlebars); })(RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin, loopEventListener, DOMParser);
\ No newline at end of file \ No newline at end of file
dream/platform/static/toolbox/index.html
View file @ 2e471357
...@@ -13,12 +13,16 @@ ...@@ -13,12 +13,16 @@
<script id="tool-template" type="text/x-handlebars-template"> <script id="tool-template" type="text/x-handlebars-template">
<div id="{{key}}" <div id="{{key}}"
class="tool {{key}}"> class="tool {{key}}"
draggable="true">
{{name}} {{name}}
<ul/> <ul/>
</div> </div>
</script> </script>
<script src="../dream/mixin_gadget.js"></script>
<script src="../dream/mixin_promise.js"></script>
<script src="toolbox.js"></script> <script src="toolbox.js"></script>
</head> </head>
<body> <body>
......
dream/platform/static/toolbox/toolbox.css
View file @ 2e471357
.tools{border:1px solid #999;margin:20px 0;border-radius:10px;padding-bottom:20px}.tools-container{margin-bottom:4px}.tools .ui-button{margin:4px 0}.tool{border:1px solid #d3d3d3;box-shadow:1px 1px 2px #aaa;min-width:7em;height:3em;z-index:10001;color:gray;font-family:serif;font-style:italic;font-size:.9em;margin:.8em;display:inline-block;border-radius:5px;text-align:center;padding-top:1.3em}.Dream-Source,.Dream-BatchSource{border:1px solid #bbc;background-color:#ffe;background-image:linear-gradient(to bottom,#ffe 0,#dde 100%)}.Dream-Machine,.Dream-MachineJobShop,.Dream-BatchScrapMachine,.Dream-MachineManagedJob,.Dream-MouldAssembly{border:1px solid #cbc;background-color:#fef;background-image:linear-gradient(to bottom,#fef 0,#ede 100%)}.Dream-Queue,.Dream-QueueJobShop,.Dream-LineClearance,.Dream-QueueManagedJob,.Dream-ConditionalBuffer,.Dream-OrderDecomposition,.Dream-MouldAssemblyBuffer{border:1px solid #bcc;background-color:#eff;background-image:linear-gradient(to bottom,#eff 0,#dee 100%)}.Dream-Exit,.Dream-ExitJobShop{border:1px solid #ccb;background-color:#eef;background-image:linear-gradient(to bottom,#eef 0,#dde 100%)}.Dream-EventGenerator{border:1px solid #cba;background-color:#fdc;background-image:linear-gradient(to bottom,#fdc 0,#ecb 100%)}.Dream-BatchDecomposition,.Dream-BatchDecompositionStartTime,.Dream-BatchReassembly{border:1px solid #bcb;background-color:#dfd;background-image:linear-gradient(to bottom,#dfd 0,#cec 100%)}.Dream-Repairman{border:1px solid #cbb;background-color:#fdd;background-image:linear-gradient(to bottom,#fdd 0,#dcc 100%)} .tools{border:1px solid #999;margin:20px 0;border-radius:10px;padding-bottom:20px}.tools-container{margin-bottom:4px}.tools .ui-button{margin:4px 0}.tool{border:1px solid #d3d3d3;box-shadow:1px 1px 2px #aaa;min-width:7em;height:3em;z-index:10001;color:gray;font-family:serif;font-style:italic;font-size:.9em;margin:.8em;display:inline-block;border-radius:5px;text-align:center;padding-top:1.3em;cursor:move}.Dream-Source,.Dream-BatchSource{border:1px solid #bbc;background-color:#ffe;background-image:linear-gradient(to bottom,#ffe 0,#dde 100%)}.Dream-Machine,.Dream-MachineJobShop,.Dream-BatchScrapMachine,.Dream-MachineManagedJob,.Dream-MouldAssembly{border:1px solid #cbc;background-color:#fef;background-image:linear-gradient(to bottom,#fef 0,#ede 100%)}.Dream-Queue,.Dream-QueueJobShop,.Dream-LineClearance,.Dream-QueueManagedJob,.Dream-ConditionalBuffer,.Dream-OrderDecomposition,.Dream-MouldAssemblyBuffer{border:1px solid #bcc;background-color:#eff;background-image:linear-gradient(to bottom,#eff 0,#dee 100%)}.Dream-Exit,.Dream-ExitJobShop{border:1px solid #ccb;background-color:#eef;background-image:linear-gradient(to bottom,#eef 0,#dde 100%)}.Dream-EventGenerator{border:1px solid #cba;background-color:#fdc;background-image:linear-gradient(to bottom,#fdc 0,#ecb 100%)}.Dream-BatchDecomposition,.Dream-BatchDecompositionStartTime,.Dream-BatchReassembly{border:1px solid #bcb;background-color:#dfd;background-image:linear-gradient(to bottom,#dfd 0,#cec 100%)}.Dream-Repairman{border:1px solid #cbb;background-color:#fdd;background-image:linear-gradient(to bottom,#fdd 0,#dcc 100%)}
\ No newline at end of file \ No newline at end of file
dream/platform/static/toolbox/toolbox.js
View file @ 2e471357
/*global window, document, RSVP, rJS, Handlebars*/ /*global window, document, RSVP, rJS, Handlebars, initGadgetMixin*/
(function(window, document, RSVP, rJS, Handlebars) { (function(window, document, RSVP, rJS, Handlebars, initGadgetMixin) {
"use strict"; "use strict";
/*jslint nomen: true*/ /*jslint nomen: true*/
var gadget_klass = rJS(window), tool_template_source = gadget_klass.__template_element.getElementById("tool-template").innerHTML, tool_template = Handlebars.compile(tool_template_source); var gadget_klass = rJS(window), tool_template_source = gadget_klass.__template_element.getElementById("tool-template").innerHTML, tool_template = Handlebars.compile(tool_template_source);
function waitForDragstart(tool) {
/*jslint unparam: true*/
var callback = function(evt) {
evt.dataTransfer.setData("text/html", tool.outerHTML);
};
return new RSVP.Promise(function(resolve, reject) {
tool.addEventListener("dragstart", callback, false);
}, function() {
tool.removeEventListener("dragstart", callback, false);
});
}
initGadgetMixin(gadget_klass);
gadget_klass.declareAcquiredMethod("getConfigurationDict", "getConfigurationDict").declareMethod("render", function() { gadget_klass.declareAcquiredMethod("getConfigurationDict", "getConfigurationDict").declareMethod("render", function() {
var g = this; var g = this;
return new RSVP.Queue().push(function() { return g.getConfigurationDict().push(function(config_dict) {
return g.getConfigurationDict(); var tools_container = document.createElement("div");
}).push(function(config) { tools_container.className = "tools-container";
g.tools_container = document.createElement("div"); Object.keys(config_dict).forEach(function(key) {
g.tools_container.className = "tools-container"; var name = config_dict[key].name || key.split("-")[1];
Object.keys(config).forEach(function(key) {
var name = config[key].name || key.split("-")[1];
if (key !== "Dream-Configuration") { if (key !== "Dream-Configuration") {
g.tools_container.innerHTML += tool_template({ tools_container.innerHTML += tool_template({
key: key, key: key,
name: name name: name
}); });
} }
}); });
g.props.element.querySelector(".tools").appendChild(tools_container);
}); });
}).declareMethod("startService", function() { }).declareMethod("startService", function() {
var g = this; var promiseArray = [];
return g.getElement().then(function(element) { [].forEach.call(this.props.element.querySelectorAll(".tool"), function(tool) {
element.querySelector(".tools").appendChild(g.tools_container); promiseArray.push(waitForDragstart(tool));
}); });
return RSVP.all(promiseArray);
}); });
})(window, document, RSVP, rJS, Handlebars); })(window, document, RSVP, rJS, Handlebars, initGadgetMixin);
\ 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