Skip to content

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

Enable drag and drop from toolbox to jsplumb graph

parent 613ea05a
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 61 deletions
dream/platform/src2/dream/Input_viewProductionLine.js
View file @ 7327a128
......@@ -41,16 +41,18 @@
})
.declareMethod("startService", function () {
var g = this;
var g = this,
graph;
return g.getDeclaredGadget("productionline_graph")
.push(function (graph) {
return graph.startService();
})
.push(function () {
return g.getDeclaredGadget("productionline_toolbox");
.push(function (graph_gadget) {
graph = graph_gadget;
return g.getDeclaredGadget('productionline_toolbox');
})
.push(function (toolbox) {
return toolbox.startService();
return RSVP.all([
graph.startService(),
toolbox.startService()
]);
});
});
}(window, rJS, RSVP));
dream/platform/src2/dream/mixin_promise.js
View file @ 7327a128
......@@ -3,7 +3,8 @@
(function (window, RSVP, FileReader) {
"use strict";
window.loopEventListener = function (target, type, useCapture, callback) {
window.loopEventListener = function (target, type, useCapture, callback,
allowDefault) {
//////////////////////////
// Infinite event listener (promise is never resolved)
// eventListener is removed when promise is cancelled/rejected
......@@ -28,7 +29,9 @@
handle_event_callback = function (evt) {
evt.stopPropagation();
evt.preventDefault();
if (allowDefault !== true) {
evt.preventDefault();
}
cancelResolver();
callback_promise = new RSVP.Queue()
.push(function () {
......
dream/platform/src2/jsplumb/index.html
View file @ 7327a128
......@@ -11,7 +11,7 @@
<script src="../<%= copy.renderjs.relative_dest %>"></script>
<script src="../<%= curl.jsplumbjs.relative_dest %>"></script>
<script src="../<%= copy.handlebars.relative_dest %>"></script>
<script id="node-template" type="text/x-handlebars-template">
<div class="window {{class}}"
id="{{element_id}}"
......@@ -20,8 +20,10 @@
<div class="ep"></div>
</div>
</script>
<script src="../dream/mixin_gadget.js"></script>
<script src="../dream/mixin_promise.js"></script>
<script src="jsplumb.js"></script>
</head>
<body>
......
dream/platform/src2/jsplumb/jsplumb.js
View file @ 7327a128
......@@ -17,16 +17,19 @@
* along with DREAM. If not, see <http://www.gnu.org/licenses/>.
* ==========================================================================*/
/*global RSVP, rJS, $, jsPlumb, Handlebars, DOMParser, initGadgetMixin*/
/*global RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
loopEventListener, DOMParser*/
/*jslint unparam: true */
(function (RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin) {
(function (RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
loopEventListener, DOMParser) {
"use strict";
/*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);
node_template = Handlebars.compile(node_template_source),
domParser = new DOMParser();
function getNodeId(node_container, element_id) {
var node_id;
......@@ -53,13 +56,13 @@
// return (option.short_id || element_type) + n;
// }
// function generateElementId(gadget_element) {
// var n = 1;
// while ($(gadget_element).find('#DreamNode_' + n).length > 0) {
// n += 1;
// }
// return 'DreamNode_' + n;
// }
function generateElementId(gadget_element) {
var n = 1;
while ($(gadget_element).find('#DreamNode_' + n).length > 0) {
n += 1;
}
return 'DreamNode_' + n;
}
function onDataChange() {
//$.publish("Dream.Gui.onDataChange", g.private.getData());
......@@ -251,24 +254,24 @@
node_container[element.id] = element_data;
}
function redraw(gadget) {
var coordinates = gadget.private.preference_container.coordinates || {},
absolute_position,
element;
$.each(coordinates, function (node_id, v) {
absolute_position = convertToAbsolutePosition(
gadget,
v.left,
v.top
);
element = $(gadget.private.element).find(
'#' + getElementId(gadget.private.node_container, node_id)
);
element.css('top', absolute_position[1]);
element.css('left', absolute_position[0]);
gadget.private.jsplumb_instance.repaint(element);
});
}
// function redraw(gadget) {
// var coordinates = gadget.props.preference_container.coordinates || {},
// absolute_position,
// element;
// $.each(coordinates, function (node_id, v) {
// absolute_position = convertToAbsolutePosition(
// gadget,
// 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) {
// $.ajax(
......@@ -434,6 +437,9 @@
coordinate
);
}
if (element.element_id === undefined) {
element.element_id = generateElementId(gadget.props.element);
}
/*jslint nomen: true*/
render_element.append(node_template({
"class": element._class.replace('.', '-'),
......@@ -454,6 +460,60 @@
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) {
g.props.node_container = {};
......@@ -503,5 +563,15 @@
updateElementData(g, key, {
data: value.data
});
}
});
$.each(g.props.data.edges, function (key, value) {
addEdge(g, key, value);
});
return RSVP.all([
waitForDragover(g),
waitForDrop(g)
]);
});
}(RSVP, rJS, $, jsPlumb, Handlebars, DOMParser, initGadgetMixin));
}(RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
loopEventListener, DOMParser));
dream/platform/src2/toolbox/index.html
View file @ 7327a128
......@@ -13,13 +13,16 @@
<script id="tool-template" type="text/x-handlebars-template">
<div id="{{key}}"
class="tool {{key}}">
class="tool {{key}}"
draggable="true">
{{name}}
<ul/>
</div>
</script>
<script src="../dream/mixin_gadget.js"></script>
<script src="../dream/mixin_promise.js"></script>
<script src="toolbox.js"></script>
</head>
<body>
......
dream/platform/src2/toolbox/toolbox.css
View file @ 7327a128
......@@ -28,6 +28,7 @@
border-radius: 5px;
text-align: center;
padding-top: 1.3em;
cursor: move;
}
.Dream-Source, .Dream-BatchSource {
......
dream/platform/src2/toolbox/toolbox.js
View file @ 7327a128
/*global window, document, RSVP, rJS, Handlebars*/
(function (window, document, RSVP, rJS, Handlebars) {
/*global window, document, RSVP, rJS, Handlebars, initGadgetMixin*/
(function (window, document, RSVP, rJS, Handlebars, initGadgetMixin) {
"use strict";
/*jslint nomen: true*/
var gadget_klass = rJS(window),
......@@ -7,38 +7,50 @@
.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 () {
var g = this;
return new RSVP.Queue()
.push(function () {
return g.getConfigurationDict();
})
.push(function (config) {
g.tools_container = document.createElement('div');
g.tools_container.className = 'tools-container';
Object.keys(config).forEach(function (key) {
var name = config[key].name || key.split('-')[1];
return g.getConfigurationDict()
.push(function (config_dict) {
var tools_container = document.createElement('div');
tools_container.className = 'tools-container';
Object.keys(config_dict).forEach(function (key) {
var name = config_dict[key].name || key.split('-')[1];
if (key !== 'Dream-Configuration') {
g.tools_container.innerHTML += tool_template({
tools_container.innerHTML += tool_template({
key: key,
name: name
});
}
});
g.props.element.querySelector('.tools')
.appendChild(tools_container);
});
})
.declareMethod('startService', function () {
var g = this;
return g.getElement().then(function (element) {
element.querySelector('.tools')
.appendChild(g.tools_container);
});
var promiseArray = [];
[].forEach
.call(this.props.element.querySelectorAll('.tool'), function (tool) {
promiseArray.push(waitForDragstart(tool));
});
return RSVP.all(promiseArray);
});
}(window, document, RSVP, rJS, Handlebars));
}(window, document, RSVP, rJS, Handlebars, initGadgetMixin));
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