Skip to content

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

use mixin_gadget.js in jsplumb

parent 4801018c
Show whitespace changes
Inline Side-by-side
Showing with 112 additions and 115 deletions
dream/platform/src2/jsplumb/index.html
View file @ 613ea05a
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
</div> </div>
</script> </script>
<script src="../dream/mixin_gadget.js"></script>
<script src="jsplumb.js"></script> <script src="jsplumb.js"></script>
</head> </head>
<body> <body>
......
dream/platform/src2/jsplumb/jsplumb.js
View file @ 613ea05a
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
* 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, DOMParser, initGadgetMixin*/
/*jslint unparam: true */ /*jslint unparam: true */
(function (RSVP, rJS, $, jsPlumb, Handlebars) { (function (RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin) {
"use strict"; "use strict";
/*jslint nomen: true*/ /*jslint nomen: true*/
...@@ -67,13 +67,13 @@ ...@@ -67,13 +67,13 @@
} }
function convertToAbsolutePosition(gadget, x, y) { function convertToAbsolutePosition(gadget, x, y) {
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,
canvas_size_x = $(gadget.private.element).find('#main').width(), canvas_size_x = $(gadget.props.element).find('#main').width(),
canvas_size_y = $(gadget.private.element).find('#main').height(), canvas_size_y = $(gadget.props.element).find('#main').height(),
size_x = $(gadget.private.element).find('.dummy_window').width() * size_x = $(gadget.props.element).find('.dummy_window').width() *
zoom_level, zoom_level,
size_y = $(gadget.private.element).find('.dummy_window').height() * size_y = $(gadget.props.element).find('.dummy_window').height() *
zoom_level, zoom_level,
top = Math.floor(y * (canvas_size_y - size_y)) + "px", top = Math.floor(y * (canvas_size_y - size_y)) + "px",
left = Math.floor(x * (canvas_size_x - size_x)) + "px"; left = Math.floor(x * (canvas_size_x - size_x)) + "px";
...@@ -81,13 +81,13 @@ ...@@ -81,13 +81,13 @@
} }
function convertToRelativePosition(gadget, x, y) { function convertToRelativePosition(gadget, x, y) {
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,
canvas_size_x = $(gadget.private.element).find('#main').width(), canvas_size_x = $(gadget.props.element).find('#main').width(),
canvas_size_y = $(gadget.private.element).find('#main').height(), canvas_size_y = $(gadget.props.element).find('#main').height(),
size_x = $(gadget.private.element).find('.dummy_window').width() * size_x = $(gadget.props.element).find('.dummy_window').width() *
zoom_level, zoom_level,
size_y = $(gadget.private.element).find('.dummy_window').height() * size_y = $(gadget.props.element).find('.dummy_window').height() *
zoom_level, zoom_level,
top = Math.max(Math.min(y.replace('px', '') / top = Math.max(Math.min(y.replace('px', '') /
(canvas_size_y - size_y), 1), 0), (canvas_size_y - size_y), 1), 0),
...@@ -97,13 +97,13 @@ ...@@ -97,13 +97,13 @@
} }
function updateElementCoordinate(gadget, node_id, coordinate) { function updateElementCoordinate(gadget, node_id, coordinate) {
var element_id = gadget.private.node_container[node_id].element_id, var element_id = gadget.props.node_container[node_id].element_id,
coordinates = gadget.private.preference_container.coordinates || {}, coordinates = gadget.props.preference_container.coordinates || {},
element, element,
relative_position; 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( relative_position = convertToRelativePosition(
gadget, gadget,
element.css('left'), element.css('left'),
...@@ -113,16 +113,16 @@ ...@@ -113,16 +113,16 @@
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, var jsplumb_instance = gadget.props.jsplumb_instance,
stop = function (element) { stop = function (element) {
updateElementCoordinate(gadget, getNodeId( updateElementCoordinate(gadget, getNodeId(
gadget.private.node_container, gadget.props.node_container,
element.target.id element.target.id
)); ));
}; };
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,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({
...@@ -201,14 +201,14 @@ ...@@ -201,14 +201,14 @@
// 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 gadget.props.updateConnectionData
= function (connection, remove, edge_data) { = 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] = [ gadget.props.edge_container[connection.id] = [
getNodeId(gadget.private.node_container, connection.sourceId), getNodeId(gadget.props.node_container, connection.sourceId),
getNodeId(gadget.private.node_container, connection.targetId), getNodeId(gadget.props.node_container, connection.targetId),
edge_data || {} edge_data || {}
]; ];
} }
...@@ -219,23 +219,23 @@ ...@@ -219,23 +219,23 @@
// 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.0) * var zoom_level = (gadget.props.preference_container.zoom_level || 1.0) *
1.1111, 1.1111,
element = $(gadget.private.element).find("#" + element_id), element = $(gadget.props.element).find("#" + element_id),
new_value; 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) new_value = $(gadget.props.element).find('.dummy_window').css(j)
.replace('px', '') * zoom_level + 'px'; .replace('px', '') * zoom_level + 'px';
element.css(j, new_value); element.css(j, new_value);
}); });
...@@ -296,63 +296,63 @@ ...@@ -296,63 +296,63 @@
// } // }
// 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, var element_id = gadget.props.node_container[node_id].element_id,
new_id = data.id; new_id = data.id;
if (data.name) { if (data.name) {
$(gadget.private.element).find("#" + element_id).text(data.name) $(gadget.props.element).find("#" + element_id).text(data.name)
.append('<div class="ep"></div></div>'); .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.props.node_container[new_id]
= gadget.private.node_container[node_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;
} }
...@@ -360,25 +360,25 @@ ...@@ -360,25 +360,25 @@
v[1] = new_id; v[1] = new_id;
} }
}); });
gadget.private.preference_container.coordinates[new_id] gadget.props.preference_container.coordinates[new_id]
= gadget.private.preference_container.coordinates[node_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) {
...@@ -393,37 +393,37 @@ ...@@ -393,37 +393,37 @@
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", {curviness: 75} ], Connector: [ "Bezier", {curviness: 75} ],
overlays: overlays overlays: overlays
}); });
// 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"), var render_element = $(gadget.props.element).find("#main"),
coordinate = element.coordinate, coordinate = element.coordinate,
box, box,
absolute_position; absolute_position;
...@@ -441,7 +441,7 @@ ...@@ -441,7 +441,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( absolute_position = convertToAbsolutePosition(
gadget, gadget,
coordinate.left, coordinate.left,
...@@ -456,37 +456,39 @@ ...@@ -456,37 +456,39 @@
gadget_klass gadget_klass
.ready(function (g) { .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 = [
style_attr_list: ['width', 'height', 'padding-top', 'line-height'] '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, var g = this,
preference = gadget.private.data.preference !== undefined ? preference = g.props.data.preference !== undefined ?
gadget.private.data.preference : {}, g.props.data.preference : {},
coordinates = preference.coordinates; 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.0, 'top': 0.0,
...@@ -496,17 +498,10 @@ ...@@ -496,17 +498,10 @@
value.coordinate = coordinates[key]; value.coordinate = coordinates[key];
} }
value.id = key; value.id = key;
newElement(gadget, value); newElement(g, value);
if (value.data) { // backward compatibility if (value.data) { // backward compatibility
updateElementData(gadget, key, { updateElementData(g, key, {
data: value.data data: value.data
}); });
}
});
$.each(gadget.private.data.edges, function (key, value) {
addEdge(gadget, key, value);
});
redraw(gadget);
});
}); });
}(RSVP, rJS, $, jsPlumb, Handlebars)); }(RSVP, rJS, $, jsPlumb, Handlebars, DOMParser, initGadgetMixin));
dream/platform/src2/toolbox/index.html
View file @ 613ea05a
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
</div> </div>
</script> </script>
<script src="../dream/mixin_gadget.js"></script>
<script src="toolbox.js"></script> <script src="toolbox.js"></script>
</head> </head>
<body> <body>
......
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