Skip to content

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

Refactored jsPlumb gadget (works with one instance of jsPlumb per gadget)

parent c7ccdf82
Hide whitespace changes
Inline Side-by-side
Showing with 626 additions and 825 deletions
Gruntfile.js
View file @ 614256b8
......@@ -66,7 +66,9 @@ module.exports = function (grunt) {
},
files: {
"<%= global_config.dest %>/dream/index.css":
"<%= global_config.src %>/dream/index.less"
"<%= global_config.src %>/dream/index.less",
"<%= global_config.dest %>/jsplumb/jsplumb.css":
"<%= global_config.src %>/jsplumb/jsplumb.css"
}
}
},
......
dream/platform/src2/dream/Input_viewProductionLine.js
View file @ 614256b8
/*global window, rJS, RSVP, initDocumentPageMixin */
/*jslint nomen: true */
/*global console, rJS, RSVP, initDocumentPageMixin */
(function (window, rJS, RSVP, initDocumentPageMixin) {
"use strict";
var gadget_klass = rJS(window);
initDocumentPageMixin(gadget_klass);
gadget_klass
.ready(function (g) {
g.props = {};
})
.ready(function (g) {
return g.getElement()
.push(function (element) {
g.props.element = element;
});
})
.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment")
.declareMethod("render", function (options) {
var jio_key = options.id, gadget = this;
gadget.props.jio_key = jio_key;
return new RSVP.Queue()
.push(function () {
/*jslint nomen: true*/
return RSVP.all([
gadget.aq_getAttachment({
_id: jio_key,
_attachment: "body.json"
}),
gadget.getDeclaredGadget("productionline")
]);
}).push(function (result_list) {
}), gadget.getDeclaredGadget("productionline") ]);
})
.push(function (result_list) {
console.log(result_list);
console.log(result_list[0]);
console.log(result_list[1]);
console.log(result_list.length);
window.r = result_list[1];
return result_list[1].render(result_list[0]);
});
})
.declareMethod("startService", function () {
return this.getDeclaredGadget("productionline")
.push(function (productionline) {
......
dream/platform/src2/jsplumb/index.html
View file @ 614256b8
......@@ -2,13 +2,14 @@
<html>
<head>
<meta charset="utf-8">
<!--link rel="stylesheet" href="<%= curl.jqueryuicss.relative_dest %>"-->
<!--script src="curl.jquery.relative_dest %>"></script-->
<!--script src="curl.jqueryuijs.relative_dest %>"></script-->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jsplumbjs.relative_dest %>" type="text/javascript"></script>
<link rel="stylesheet" href="../<%= curl.jqueryuicss.relative_dest %>">
<link rel="stylesheet" href="jsplumb.css">
<script src="../<%= curl.jquery.relative_dest %>"></script>
<script src="../<%= curl.jqueryuijs.relative_dest %>"></script>
<script src="../<%= copy.rsvp.relative_dest %>"></script>
<script src="../<%= copy.renderjs.relative_dest %>"></script>
<script src="../<%= curl.jsplumbjs.relative_dest %>"></script>
<script src="jsplumb.js"></script>
</head>
......
dream/platform/src2/jsplumb/jsplumb.css
View file @ 614256b8
/* /\* body { *\/ */
/* /\* padding:0; *\/ */
/* /\* margin:0; *\/ */
/* /\* background-color:white; *\/ */
/* /\* font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; *\/ */
/* /\* text-align:center; *\/ */
/* /\* } *\/ */
/* /\* #headerWrapper { *\/ */
/* /\* display:none; *\/ */
/* /\* width:100%; *\/ */
/* /\* background-color:black; *\/ */
/* /\* position:fixed; *\/ */
/* /\* top:0; *\/ */
/* /\* left:0; *\/ */
/* /\* height:44px; *\/ */
/* /\* padding:0; *\/ */
/* /\* border-bottom:1px solid #999; *\/ */
/* /\* box-shadow: 0px 2px 19px #aaa; *\/ */
/* /\* -o-box-shadow: 0px 2px 19px #aaa; *\/ */
/* /\* -webkit-box-shadow: 0px 2px 19px #aaa; *\/ */
/* /\* -moz-box-shadow: 0px 2px 19px #aaa; *\/ */
/* /\* opacity:0.8; *\/ */
/* /\* } *\/ */
/* #intro { */
/* margin-top:59px; */
/* } */
#main {
/* these two margins settings are here just to ensure that jsPlumb handles
margins properly.*/
position: relative;
margin:20px auto;
font-size: 80%;
border: 1px solid #999;
width: 100%;
height: 600px;
overflow: hidden;
border-radius: 10px;
background-color:#eaedef;
text-align: center;
/* these two margins settings are here just to ensure that jsPlumb handles
margins properly.*/
position: relative;
margin:20px auto;
font-size: 80%;
border: 1px solid #999;
width: 100%;
height: 600px;
overflow: hidden;
border-radius: 10px;
background-color:#eaedef;
text-align: center;
}
/* /\* Setting for dialog *\/ */
/* label, input { */
/* display:block; */
/* } */
/* input.text, select { */
/* margin:4px; */
/* padding:0; */
/* width:95%; */
/* } */
/* fieldset { */
/* padding:0; */
/* border:0; */
/* margin-top:25px; */
/* } */
h1 {
font-size: 1.2em;
margin: .6em 0;
}
/* div#users-contain { */
/* width: 350px; */
/* margin: 20px 0; */
/* } */
/* div#users-contain table { */
/* margin: 1em 0; */
/* border-collapse: collapse; */
/* width: 100%; */
/* } */
/* div#users-contain table td, div#users-contain table th { */
/* border: 1px solid #eee; */
/* padding: .6em 10px; */
/* text-align: left; */
/* } */
/* .ui-dialog .ui-state-error { */
/* padding: .3em; */
/* } */
/* .validateTips { */
/* border: 1px solid transparent; */
/* padding: 0.3em; */
/* } */
/* /\* End of dialog setting *\/ */
/* #main li { */
/* margin: 3px; */
/* /\*padding: 1px;*\/ */
/* /\*text-align: -webkit-match-parent;*\/ */
/* background: #e6e6e6; */
/* border: 1px solid #d3d3d3; */
/* list-style-type: none; */
/* width: 120px; */
/* } */
/* #sidebar { */
/* font-size:13px; */
/* } */
/* /\* demo elements *\/ */
/* .menu, #explanation { */
/* background-color:#fff; */
/* } */
/* .menu { */
/* height: 15px; */
/* float:right; */
/* padding-top:1em; */
/* padding-bottom:0.4em; */
/* background-color: transparent; */
/* margin-right:30px; */
/* } */
/* .otherLibraries { */
/* display:inline; */
/* } */
/* a, a:visited { */
/* text-decoration:none; */
/* color:#01a3c6; */
/* font-family:helvetica; */
/* padding:0.3em; */
/* border-radius:0.2em; */
/* } */
/* a:hover { */
/* color:#1b911b; */
/* } */
.selected {
color:rgb(189, 11, 11) !important;
color:rgb(189, 11, 11) !important;
}
.window, .label {
background-color:white;
text-align:center;
z-index:23;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
background-color:white;
text-align:center;
z-index:23;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
}
path, ._jsPlumb_endpoint {
cursor:pointer;
cursor:pointer;
}
._jsPlumb_endpoint_drop_allowed {
border: 4px solid #123456;
box-shadow: 6px 6px 19px #444;
-o-box-shadow: 6px 6px 19px #444;
-webkit-box-shadow: 6px 6px 19px #444;
-moz-box-shadow: 6px 6px 19px #444;
border: 4px solid #123456;
box-shadow: 6px 6px 19px #444;
-o-box-shadow: 6px 6px 19px #444;
-webkit-box-shadow: 6px 6px 19px #444;
-moz-box-shadow: 6px 6px 19px #444;
}
/* z index stuff */
._jsPlumb_connector {
z-index:18;
z-index:18;
}
._jsPlumb_endpoint {
z-index:19;
z-index:19;
}
._jsPlumb_overlay {
z-index:23;
z-index:23;
}
._jsPlumb_connector._jsPlumb_hover {
z-index:21 !important;
z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
z-index:22 !important;
z-index:22 !important;
}
._jsPlumb_overlay {
border:1px solid #346789;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
font-family:helvetica;
padding:0.5em;
border:1px solid #346789;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
font-family:helvetica;
padding:0.5em;
}
/* /\* DREAM specific css *\/ */
/* #available { */
/* position: absolute; */
/* width: 200px; */
/* height: 200px; */
/* border: 2px solid; */
/* margin-top: 350px; */
/* margin-left: 150px; */
/* border-radius: 10px; */
/* } */
/* #tools { */
/* /\* position: absolute; */
/* width: 200px; */
/* height: 400px; *\/ */
/* width: 100%; */
/* border: 1px solid #999; */
/* margin: 20px 0; */
/* border-radius: 10px; */
/* padding-bottom: 20px; */
/* } */
/* #tools-container { */
/* margin-bottom: 4px; */
/* } */
/* #simulation_controls { */
/* /\* position: absolute; */
/* width: 200px; */
/* height: 300px; */
/* margin-top: 550px; */
/* margin-left: 35px; */
/* font-size:13px; *\/ */
/* width: 100%; */
/* border: 1px solid #999; */
/* border-radius: 10px; */
/* } */
/* .tool { */
/* border: 1px solid lightgray; */
/* box-shadow: 1px 1px 2px #aaa; */
/* /\*margin-top: 20px; */
/* margin-left: 35px;*\/ */
/* min-width:7em; */
/* height:2em; */
/* z-index: 10001; */
/* color: gray; */
/* font-family:serif; */
/* font-style:italic; */
/* padding-top:0.9em; */
/* font-size:0.9em; */
/* margin:0.5em; */
/* display: inline-block; */
/* border-radius: 5px; */
/* } */
/* #graph { */
/* width: 70%; */
/* height: 250px; */
/* text-align: center; */
/* margin-left:auto; */
/* margin-right:auto; */
/* padding-top:2px; */
/* margin-top:0px; */
/* } */
/* #queue_stat_graph { */
/* width: 70%; */
/* height: 250px; */
/* text-align: center; */
/* margin-left:auto; */
/* margin-right:auto; */
/* padding-top:2px; */
/* margin-top:0px; */
/* } */
/* #tools .ui-button { */
/* width:80%; */
/* margin:4px 0; */
/* } */
.Dream-Source, .Dream-BatchSource {
border: 1px solid #bbc;
background-color:#ffe;
background-image: linear-gradient(to bottom, #ffe 0%, #dde 100%);
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%);
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%);
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%);
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%);
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%);
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%);
border: 1px solid #cbb;
background-color:#fdd;
background-image: linear-gradient(to bottom, #fdd 0%, #dcc 100%);
}
/* #exit_stat { */
/* display: inline-block; */
/* } */
/* #exit_stat table, #exit_stat td { */
/* border: 1px solid black; */
/* } */
.window, .dummy_window {
border:1px solid lightgray;
width:100px;
height:64px;
position:absolute;
color:black;
font-family:serif;
font-style:italic;
padding-top:0.9em;
font-size:0.9em;
cursor:move;
font-size:11px;
-webkit-transition:background-color 0.1s ease-in;
-moz-transition:background-color 0.1s ease-in;
transition:background-color 0.1s ease-in;
border-radius: 5px;
border:1px solid lightgray;
width:100px;
height:64px;
position:absolute;
color:black;
font-family:serif;
font-style:italic;
padding-top:0.9em;
font-size:0.9em;
cursor:move;
font-size:11px;
-webkit-transition:background-color 0.1s ease-in;
-moz-transition:background-color 0.1s ease-in;
transition:background-color 0.1s ease-in;
border-radius: 5px;
}
.window:hover {
background-color: #5c96bc;
background-image: none;
color:white;
background-color: #5c96bc;
background-image: none;
color:white;
}
.dummy_window {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
/* #debug_json textarea { */
/* width:95%; */
/* } */
/* #error{ */
/* text-align: left; */
/* } */
.ep {
position:absolute;
bottom:37%;
right:5px;
width:1em;
height:1em;
background-color:orange;
cursor:pointer;
box-shadow: 0px 0px 2px black;
-webkit-transition:-webkit-box-shadow 0.25s ease-in;
-moz-transition:-moz-box-shadow 0.25s ease-in;
transition:box-shadow 0.25s ease-in;
position:absolute;
bottom:37%;
right:5px;
width:1em;
height:1em;
background-color:orange;
cursor:pointer;
box-shadow: 0px 0px 2px black;
-webkit-transition:-webkit-box-shadow 0.25s ease-in;
-moz-transition:-moz-box-shadow 0.25s ease-in;
transition:box-shadow 0.25s ease-in;
}
._jsPlumb_source_hover, ._jsPlumb_target_hover, .dragHover {
background-color:#1e8151;
background-image: none;
color:white;
background-color:#1e8151;
background-image: none;
color:white;
}
path {
cursor:pointer;
cursor:pointer;
}
/* #spreadsheet_output { */
/* margin: 20px 0; */
/* } */
/* #gantt_output { */
/* height: 400px; */
/* margin: 20px 0; */
/* } */
/* .sub_task { */
/* background-color: #3DD388; */
/* border-color: #28B06C; */
/* } */
/* li.result { */
/* width: 100%; */
/* text-align: left; */
/* cursor:pointer; */
/* } */
/* li.result.active { */
/* background:#fcc; */
/* } */
dream/platform/src2/jsplumb/jsplumb.js
View file @ 614256b8
......@@ -15,484 +15,520 @@
*
* You should have received a copy of the GNU Lesser General Public License
* along with DREAM. If not, see <http://www.gnu.org/licenses/>.
* ======================================================================== */
* ==========================================================================*/
/*global jsPlumb, rJS, RSVP */
/*jslint maxlen: 200 */
(function (jsPlumb, rJS, RSVP) {
/*global RSVP, rJS, $, jsPlumb, console, confirm*/
(function ($, jsPlumb, console) {
"use strict";
// var that = {}, priv = {}, gadget_element;
//
// that.getNodeId = function (element_id) {
// var node_id;
// $.each(priv.node_container, function (k, v) {
// if (v.element_id === element_id) {
// node_id = k;
// return false;
// }
// });
// return node_id;
// };
//
// that.getElementId = function (node_id) {
// return priv.node_container[node_id].element_id;
// };
//
// that.generateNodeId = function (element_type, option) {
// var n = 1;
// while (((option.short_id || element_type) + n) in priv.node_container) {
// n += 1;
// }
// return (option.short_id || element_type) + n;
// };
//
// that.generateElementId = function () {
// var n = 1;
// while ($(gadget_element).find('#DreamNode_' + n).length > 0) {
// n += 1;
// }
// return 'DreamNode_' + n;
// };
//
// priv.initJsPlumb = function () {
// jsPlumb.setRenderMode(jsPlumb.SVG);
// jsPlumb.importDefaults({
// HoverPaintStyle: {
// strokeStyle: "#1e8151",
// lineWidth: 2
// },
// Endpoint: ["Dot", {
// radius: 2
// }],
// ConnectionOverlays: [
// ["Arrow", {
// location: 1,
// id: "arrow",
// length: 14,
// foldback: 0.8
// }]
// ],
// Container: "main"
// });
// // listen for clicks on connections, and offer to change values on click.
// jsPlumb.bind("click", function (conn) {
// jsPlumb.detach(conn);
// });
//
// jsPlumb.bind("beforeDetach", function (conn) {
// return confirm("Delete connection?");
// });
//
// jsPlumb.bind("connectionDrag", function (connection) {});
//
// jsPlumb.bind("connectionDragStop", function (connection) {});
// // split in 2 methods ? one for events one for manip
// that.updateConnectionData = function (connection, remove, edge_data) {
// if (remove) {
// delete(priv.edge_container[connection.id]);
// } else {
// priv.edge_container[connection.id] = [
// that.getNodeId(connection.sourceId),
// that.getNodeId(connection.targetId), edge_data || {}
// ];
// }
// priv.onDataChange();
// };
//
// // bind to connection/connectionDetached events, and update the list of connections on screen.
// jsPlumb.bind("connection", function (info, originalEvent) {
// that.updateConnectionData(info.connection);
// });
// jsPlumb.bind("connectionDetached", function (info, originalEvent) {
// that.updateConnectionData(info.connection, true);
// });
// priv.onDataChange();
// priv.draggable();
// };
//
// priv.updateElementCoordinate = function (node_id, coordinate) {
// var element_id = priv.node_container[node_id].element_id;
// var coordinates = priv.preference_container['coordinates'] || {}, element;
// if (coordinate === undefined) {
// coordinate = {};
// element = $(gadget_element).find("#" + element_id);
// var relative_position = that.convertToRelativePosition(
// element.css('left'), element.css('top'));
// coordinate.top = relative_position[1];
// coordinate.left = relative_position[0];
// }
// coordinates[node_id] = coordinate;
// priv.preference_container['coordinates'] = coordinates;
// priv.onDataChange();
// return coordinate;
// };
//
// priv.updateNodeStyle = function (element_id) {
// var zoom_level = (priv.preference_container['zoom_level'] || 1.0) * 1.1111;
// var element = $(gadget_element).find("#" + element_id);
// console.log(gadget_element);
// $.each(priv.style_attr_list, function (i, j) {
// var new_value = $(gadget_element).find('.dummy_window').css(j).replace('px', '') * zoom_level + 'px';
// element.css(j, new_value);
// });
// };
//
// priv.convertToAbsolutePosition = function (x, y) {
// var zoom_level = (priv.preference_container['zoom_level'] || 1.0) * 1.1111;
// var canvas_size_x = $(gadget_element).find('#main').width();
// var canvas_size_y = $(gadget_element).find('#main').height();
// var size_x = $(gadget_element).find('.dummy_window').width() * zoom_level;
// var size_y = $(gadget_element).find('.dummy_window').height() * zoom_level;
// var top = Math.floor(y * (canvas_size_y - size_y)) + "px";
// var left = Math.floor(x * (canvas_size_x - size_x)) + "px";
// return [left, top];
// };
//
// that.convertToRelativePosition = function (x, y) {
// var zoom_level = (priv.preference_container['zoom_level'] || 1.0) * 1.1111;
// var canvas_size_x = $(gadget_element).find('#main').width();
// var canvas_size_y = $(gadget_element).find('#main').height();
// var size_x = $(gadget_element).find('.dummy_window').width() * zoom_level;
// var size_y = $(gadget_element).find('.dummy_window').height() * zoom_level;
// var top = Math.max(Math.min(y.replace('px', '') / (canvas_size_y - size_y), 1), 0);
// var left = Math.max(Math.min(x.replace('px', '') / (canvas_size_x - size_x), 1), 0);
// return [left, top];
// };
// priv.draggable = function () {
// var stop = function (element) {
// priv.updateElementCoordinate(that.getNodeId(element.target.id));
// };
//
// jsPlumb.draggable(jsPlumb.getSelector(".window"), {
// containment: 'parent',
// grid: [10, 10],
// stop: stop // FIXME: we should only accept if dropped in #main
// });
//
// jsPlumb.makeSource(jsPlumb.getSelector(".window"), {
// filter: ".ep",
// anchor: "Continuous",
// connector: ["StateMachine", {
// curviness: 20
// }],
// connectorStyle: {
// strokeStyle: "#5c96bc",
// lineWidth: 2,
// outlineColor: "transparent",
// outlineWidth: 4
// }
// });
//
// jsPlumb.makeTarget(jsPlumb.getSelector(".window"), {
// dropOptions: {
// hoverClass: "dragHover"
// },
// anchor: "Continuous"
// });
//
// };
// priv.addElementToContainer = function (element) {
// // Now update the container of elements
// var element_data = {
// _class: element._class,
// element_id: element.element_id,
// };
// priv.node_container[element.id] = element_data;
// };
// priv.onDataChange = function () {
// //$.publish("Dream.Gui.onDataChange", priv.getData());
// };
// priv.style_attr_list = ['width', 'height', 'padding-top', 'line-height'];
// that.positionGraph = function () {
// $.ajax(
// '/positionGraph', {
// data: JSON.stringify(priv.getData()),
// contentType: 'application/json',
// type: 'POST',
// success: function (data, textStatus, jqXHR) {
// $.each(data, function (node, pos) {
// var absolute_position = priv.convertToAbsolutePosition(
// pos.left, pos.top);
// priv.updateElementCoordinate(node, {
// top: pos.top,
// left: pos.left
// });
// });
// that.redraw();
// }
// });
//
// };
// that.setZoom = function (zoom_level) {
// $.each(priv.style_attr_list, function (i, j) {
// var new_value = $(gadget_element).find('.dummy_window').css(j).replace('px', '') * zoom_level + 'px';
// $(gadget_element).find('.window').css(j, new_value);
// });
// };
//
// that.zoom_in = function () {
// var zoom_level = (priv.preference_container['zoom_level'] || 1.0) * 1.1111;
// that.setZoom(zoom_level);
// priv.preference_container['zoom_level'] = zoom_level;
// priv.onDataChange();
// that.redraw();
// };
//
// that.zoom_out = function () {
// var zoom_level = (priv.preference_container['zoom_level'] || 1.0) * 0.9;
// that.setZoom(zoom_level);
// priv.preference_container['zoom_level'] = zoom_level;
// priv.onDataChange();
// that.redraw();
// };
//
// that.redraw = function () {
// var coordinates = priv.preference_container['coordinates'] || {};
// $.each(coordinates, function (node_id, v) {
// var absolute_position = priv.convertToAbsolutePosition(
// v['left'], v['top']);
// var element = $(gadget_element).find('#' + that.getElementId(node_id));
// element.css('top', absolute_position[1]);
// element.css('left', absolute_position[0]);
// jsPlumb.repaint(element);
// });
// };
//
// priv.getData = function () {
// var data = {
// "nodes": priv.node_container,
// "edges": priv.edge_container,
// "preference": priv.preference_container,
// "general": priv.general_container
// };
// var wip_spreadsheet = $(gadget_element).find('#wip_spreadsheet');
// if (wip_spreadsheet.length > 0) {
// data['wip_spreadsheet'] = wip_spreadsheet.handsontable('getData');
// }
// var wip_part_spreadsheet = $(gadget_element).find('#wip_part_spreadsheet');
// if (wip_part_spreadsheet.length > 0) {
// data['wip_part_spreadsheet'] = wip_part_spreadsheet.handsontable('getData');
// }
// var shift_spreadsheet = $(gadget_element).find('#shift_spreadsheet');
// if (shift_spreadsheet.length > 0) {
// data['shift_spreadsheet'] = shift_spreadsheet.handsontable('getData');
// }
// return data;
// };
// priv.removeElement = function (node_id) {
// var element_id = priv.node_container[node_id].element_id;
// jsPlumb.removeAllEndpoints($(gadget_element).find("#" + element_id));
// $(gadget_element).find("#" + element_id).remove();
// delete(priv.node_container[node_id]);
// delete(priv.preference_container['coordinates'][node_id]);
// $.each(priv.edge_container, function (k, v) {
// if (node_id == v[0] || node_id == v[1]) {
// delete(priv.edge_container[k]);
// }
// });
// priv.onDataChange();
// };
//
// that.updateElementData = function (node_id, data) {
// var element_id = priv.node_container[node_id].element_id;
// if (data['name']) {
// $(gadget_element).find("#" + element_id).text(data["name"]).append('<div class="ep"></div></div>');
// priv.node_container[node_id].name = data['name'];
// }
// var new_id = data['id'];
// delete(data['id']);
// $.extend(priv.node_container[node_id], data.data);
// if (new_id && new_id !== node_id) {
// priv.node_container[new_id] = priv.node_container[node_id];
// delete(priv.node_container[node_id]);
// $.each(priv.edge_container, function (k, v) {
// if (v[0] === node_id) {
// v[0] = new_id;
// }
// if (v[1] === node_id) {
// v[1] = new_id;
// }
// });
// priv.preference_container['coordinates'][new_id] = priv.preference_container['coordinates'][node_id];
// delete(priv.preference_container['coordinates'][node_id]);
// }
// priv.onDataChange();
// };
//
// that.removeElement = function (node_id) {
// priv.removeElement(node_id);
// };
//
// that.getData = function () {
// return priv.getData();
// };
//
// that.clearAll = function () {
// $.each(priv.node_container, function (node_id) {
// priv.removeElement(node_id);
// });
// // delete anything if still remains
// $(gadget_element).find("#main").children().remove();
// priv.node_container = {};
// priv.edge_container = {};
// priv.preference_container = {};
// priv.general_container = {};
// that.initGeneralProperties();
// that.prepareDialogForGeneralProperties();
// };
// that.addEdge = function (edge_id, edge_data) {
// var source_id = edge_data[0],
// target_id = edge_data[1],
// data = edge_data[2],
// overlays = []
//
// if (data && data.title){
// overlays = [ ["Label", { cssClass:"l1 component label",
// label: data.title,
// }] ]
//
// }
// var connection = jsPlumb.connect({
// source: that.getElementId(source_id),
// target: that.getElementId(target_id),
// Connector: [ "Bezier", { curviness:75 } ],
// overlays:overlays
//
// });
// // call again updateConnectionData to set the connection data that
// // was not passed to the connection hook
// that.updateConnectionData(connection, 0, data)
// };
//
// that.setPreferences = function (preferences) {
// priv.preference_container = preferences;
// var zoom_level = priv.preference_container['zoom_level'] || 1.0;
// that.setZoom(zoom_level);
// };
// that.setGeneralProperties = function (properties) {
// priv.general_container = properties;
// priv.onDataChange();
// };
//
// that.updateGeneralProperties = function (properties) {
// $.extend(priv.general_container, properties);
// priv.onDataChange();
// };
// that.newElement = function (element, option) {
// element.name = element.name || option.name;
// priv.addElementToContainer(element);
// var render_element, style_string = "",
// coordinate = element.coordinate,
// box;
// render_element = $(gadget_element).find("#main");
// if (coordinate !== undefined) {
// coordinate = priv.updateElementCoordinate(element.id, coordinate);
// }
// render_element.append('<div class="window ' + element._class.replace('.', '-') + '" id="' +
// element.element_id + '" title="' + (element.name || element.id) + '">' + element.id + '<div class="ep"></div></div>');
// box = $(gadget_element).find("#" + element.element_id);
// var absolute_position = priv.convertToAbsolutePosition(
// coordinate.left, coordinate.top);
// box.css("top", absolute_position[1]);
// box.css("left", absolute_position[0]);
// priv.updateNodeStyle(element.element_id);
// priv.draggable();
// priv.onDataChange();
// };
function initJsPlumb(container) {
var j = jsPlumb.getInstance({
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
},
Endpoint: ["Dot", {
radius: 2
}],
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}]
],
Container: container
});
j.setRenderMode(jsPlumb.SVG);
return j;
}
rJS(window)
.ready(function (g) {
g.props = {
node_container: {},
edge_container: {},
preference_container: {},
general_container: {}
};
return g.getElement()
.push(function (element) {
g.props.element = element;
});
})
g.private = {
getNodeId: function (element_id) {
var node_id;
$.each(g.private.node_container, function (k, v) {
if (v.element_id === element_id) {
node_id = k;
return false;
}
});
return node_id;
},
.declareMethod('render', function (data) {
this.props.data = JSON.parse(data);
})
getElementId: function (node_id) {
return g.private.node_container[node_id].element_id;
},
.declareMethod('startService', function () {
var gadget = this,
// Create jsPlumb instance
// jsplumb = initJsPlumb(gadget.props.element),
preference = gadget.props.data.preference || {},
coordinates = preference.coordinates,
key,
value;
initJsPlumb(gadget.props.element);
for (key in gadget.props.data.nodes) {
if (gadget.props.data.nodes.hasOwnProperty(key)) {
value = gadget.props.data.nodes[key];
if (coordinates === undefined || coordinates[key] === undefined) {
value.coordinate = {
'top': 0.0,
'left': 0.0
generateNodeId: function (element_type, option) {
var n = 1;
while (g.private.node_container[
((option.short_id || element_type) + n)
] !== undefined) {
n += 1;
}
return (option.short_id || element_type) + n;
},
generateElementId: function () {
var n = 1;
while ($(g.private.element).find('#DreamNode_' + n).length > 0) {
n += 1;
}
return 'DreamNode_' + n;
},
initJsPlumb: function () {
g.private.jsplumb_instance.setRenderMode(
g.private.jsplumb_instance.SVG
);
g.private.jsplumb_instance.importDefaults({
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
},
Endpoint: ["Dot", {
radius: 2
}],
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}]
],
Container: "main"
});
// listen for clicks on connections,
// and offer to change values on click.
g.private.jsplumb_instance.bind("click", function (conn) {
g.private.jsplumb_instance.detach(conn);
});
g.private.jsplumb_instance.bind("beforeDetach", function (conn) {
return confirm("Delete connection?");
});
g.private.jsplumb_instance
.bind("connectionDrag", function (connection) {
return undefined;
});
g.private.jsplumb_instance
.bind("connectionDragStop", function (connection) {
return undefined;
});
// split in 2 methods ? one for events one for manip
g.private.updateConnectionData
= function (connection, remove, edge_data) {
if (remove) {
delete g.private.edge_container[connection.id];
} else {
g.private.edge_container[connection.id] = [
g.private.getNodeId(connection.sourceId),
g.private.getNodeId(connection.targetId), edge_data || {}
];
}
g.private.onDataChange();
};
} else {
value.coordinate = coordinates[key];
// bind to connection/connectionDetached events,
// and update the list of connections on screen.
g.private.jsplumb_instance
.bind("connection", function (info, originalEvent) {
g.private.updateConnectionData(info.connection);
});
g.private.jsplumb_instance
.bind("connectionDetached", function (info, originalEvent) {
g.private.updateConnectionData(info.connection, true);
});
g.private.onDataChange();
g.private.draggable();
},
updateElementCoordinate: function (node_id, coordinate) {
var element_id = g.private.node_container[node_id].element_id,
coordinates = g.private.preference_container.coordinates || {},
element,
relative_position;
if (coordinate === undefined) {
coordinate = {};
element = $(g.private.element).find("#" + element_id);
relative_position = g.private.convertToRelativePosition(
element.css('left'),
element.css('top')
);
coordinate.top = relative_position[1];
coordinate.left = relative_position[0];
}
value.id = key;
// that.newElement(value);
// if (value.data) { // backward compatibility
// that.updateElementData(key, {
// data: value.data
// });
// }
coordinates[node_id] = coordinate;
g.private.preference_container.coordinates = coordinates;
g.private.onDataChange();
return coordinate;
},
}
}
updateNodeStyle: function (element_id) {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
1.1111,
element = $(g.private.element).find("#" + element_id),
new_value;
console.log(g.private.element);
$.each(g.private.style_attr_list, function (i, j) {
new_value = $(g.private.element).find('.dummy_window').css(j)
.replace('px', '') * zoom_level + 'px';
element.css(j, new_value);
});
},
convertToAbsolutePosition: function (x, y) {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
1.1111,
canvas_size_x = $(g.private.element).find('#main').width(),
canvas_size_y = $(g.private.element).find('#main').height(),
size_x = $(g.private.element).find('.dummy_window').width() *
zoom_level,
size_y = $(g.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";
return [left, top];
},
convertToRelativePosition: function (x, y) {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
1.1111,
canvas_size_x = $(g.private.element).find('#main').width(),
canvas_size_y = $(g.private.element).find('#main').height(),
size_x = $(g.private.element).find('.dummy_window').width() *
zoom_level,
size_y = $(g.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);
return [left, top];
},
draggable: function () {
var stop = function (element) {
g.private.updateElementCoordinate(g.private.getNodeId(
element.target.id
));
};
g.private.jsplumb_instance
.draggable(g.private.jsplumb_instance.getSelector(".window"), {
containment: 'parent',
grid: [10, 10],
stop: stop // FIXME: we should only accept if dropped in #main
});
g.private.jsplumb_instance
.makeSource(g.private.jsplumb_instance.getSelector(".window"), {
filter: ".ep",
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 20
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
}
});
g.private.jsplumb_instance
.makeTarget(g.private.jsplumb_instance.getSelector(".window"), {
dropOptions: {
hoverClass: "dragHover"
},
anchor: "Continuous"
});
},
addElementToContainer: function (element) {
// Now update the container of elements
/*jslint nomen: true*/
var element_data = {
_class: element._class,
element_id: element.element_id
};
g.private.node_container[element.id] = element_data;
},
onDataChange: function () {
//$.publish("Dream.Gui.onDataChange", g.private.getData());
return undefined;
},
style_attr_list: ['width', 'height', 'padding-top', 'line-height'],
positionGraph: function () {
$.ajax(
'/positionGraph',
{
data: JSON.stringify(g.private.getData()),
contentType: 'application/json',
type: 'POST',
success: function (data, textStatus, jqXHR) {
$.each(data, function (node, pos) {
g.private.convertToAbsolutePosition(
pos.left,
pos.top
);
g.private.updateElementCoordinate(node, {
top: pos.top,
left: pos.left
});
});
g.private.redraw();
}
}
);
},
for (key in gadget.props.data.edges) {
if (gadget.props.data.edges.hasOwnProperty(key)) {
value = gadget.props.data.edges[key];
// that.addEdge(key, value);
setZoom: function (zoom_level) {
$.each(g.private.style_attr_list, function (i, j) {
var new_value = $(g.private.element).find('.dummy_window')
.css(j).replace('px', '') * zoom_level + 'px';
$(g.private.element).find('.window').css(j, new_value);
});
},
zoom_in: function () {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
1.1111;
g.private.setZoom(zoom_level);
g.private.preference_container.zoom_level = zoom_level;
g.private.onDataChange();
g.private.redraw();
},
zoom_out: function () {
var zoom_level = (g.private.preference_container.zoom_level || 1.0) *
0.9;
g.private.setZoom(zoom_level);
g.private.preference_container.zoom_level = zoom_level;
g.private.onDataChange();
g.private.redraw();
},
redraw: function () {
var coordinates = g.private.preference_container.coordinates || {},
absolute_position,
element;
$.each(coordinates, function (node_id, v) {
absolute_position = g.private.convertToAbsolutePosition(
v.left,
v.top
);
element = $(g.private.element).find('#' + g.private.getElementId(
node_id
));
element.css('top', absolute_position[1]);
element.css('left', absolute_position[0]);
g.private.jsplumb_instance.repaint(element);
});
},
getData: function () {
var data = {
"nodes": g.private.node_container,
"edges": g.private.edge_container,
"preference": g.private.preference_container,
"general": g.private.general_container
},
wip_spreadsheet = $(g.private.element).find('#wip_spreadsheet'),
wip_part_spreadsheet = $(g.private.element)
.find('#wip_part_spreadsheet'),
shift_spreadsheet = $(g.private.element)
.find('#shift_spreadsheet');
if (wip_spreadsheet.length > 0) {
data.wip_spreadsheet = wip_spreadsheet.handsontable('getData');
}
if (wip_part_spreadsheet.length > 0) {
data.wip_part_spreadsheet = wip_part_spreadsheet
.handsontable('getData');
}
if (shift_spreadsheet.length > 0) {
data.shift_spreadsheet = shift_spreadsheet.handsontable('getData');
}
return data;
},
removeElement: function (node_id) {
var element_id = g.private.node_container[node_id].element_id;
g.private.jsplumb_instance.removeAllEndpoints($(g.private.element)
.find("#" + element_id));
$(g.private.element).find("#" + element_id).remove();
delete g.private.node_container[node_id];
delete g.private.preference_container.coordinates[node_id];
$.each(g.private.edge_container, function (k, v) {
if (node_id === v[0] || node_id === v[1]) {
delete g.private.edge_container[k];
}
});
g.private.onDataChange();
},
updateElementData: function (node_id, data) {
var element_id = g.private.node_container[node_id].element_id,
new_id = data.id;
if (data.name) {
$(g.private.element).find("#" + element_id).text(data.name)
.append('<div class="ep"></div></div>');
g.private.node_container[node_id].name = data.name;
}
delete data.id;
$.extend(g.private.node_container[node_id], data.data);
if (new_id && new_id !== node_id) {
g.private.node_container[new_id]
= g.private.node_container[node_id];
delete g.private.node_container[node_id];
$.each(g.private.edge_container, function (k, v) {
if (v[0] === node_id) {
v[0] = new_id;
}
if (v[1] === node_id) {
v[1] = new_id;
}
});
g.private.preference_container.coordinates[new_id]
= g.private.preference_container.coordinates[node_id];
delete g.private.preference_container.coordinates[node_id];
}
g.private.onDataChange();
},
start: function () {
g.private.node_container = {};
g.private.edge_container = {};
g.private.preference_container = {};
g.private.general_container = {};
g.private.initJsPlumb();
},
clearAll: function () {
$.each(g.private.node_container, function (node_id) {
g.private.removeElement(node_id);
});
// delete anything if still remains
$(g.private.element).find("#main").children().remove();
g.private.node_container = {};
g.private.edge_container = {};
g.private.preference_container = {};
g.private.general_container = {};
g.private.initGeneralProperties();
g.private.prepareDialogForGeneralProperties();
},
addEdge: function (edge_id, edge_data) {
var source_id = edge_data[0],
target_id = edge_data[1],
data = edge_data[2],
overlays = [],
connection;
if (data && data.title) {
overlays = [["Label", {
cssClass: "l1 component label",
label: data.title
}]];
}
connection = g.private.jsplumb_instance.connect({
source: g.private.getElementId(source_id),
target: g.private.getElementId(target_id),
Connector: [ "Bezier", {curviness: 75} ],
overlays: overlays
});
// call again updateConnectionData to set the connection data that
// was not passed to the connection hook
g.private.updateConnectionData(connection, 0, data);
},
setPreferences: function (preferences) {
g.private.preference_container = preferences;
var zoom_level = g.private.preference_container.zoom_level || 1.0;
g.private.setZoom(zoom_level);
},
setGeneralProperties: function (properties) {
g.private.general_container = properties;
g.private.onDataChange();
},
updateGeneralProperties: function (properties) {
$.extend(g.private.general_container, properties);
g.private.onDataChange();
},
newElement: function (element, option) {
element.name = element.name || option.name;
g.private.addElementToContainer(element);
var render_element,
coordinate = element.coordinate,
box,
absolute_position;
render_element = $(g.private.element).find("#main");
if (coordinate !== undefined) {
coordinate = g.private.updateElementCoordinate(
element.id,
coordinate
);
}
/*jslint nomen: true*/
render_element.append('<div class="window ' + element._class
.replace('.', '-') + '" id="' +
element.element_id + '" title="' +
(element.name || element.id) + '">' +
element.id +
'<div class="ep"></div></div>');
box = $(g.private.element).find("#" + element.element_id);
absolute_position = g.private.convertToAbsolutePosition(
coordinate.left,
coordinate.top
);
box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]);
g.private.updateNodeStyle(element.element_id);
g.private.draggable();
g.private.onDataChange();
}
}
};
})
// that.redraw();
.ready(function (g) {
window.g = g;
return g.getElement(function (el) {
g.private.element = el;
});
})
.declareMethod('render', function (data) {
this.private.data = JSON.parse(data);
this.private.jsplumb_instance = jsPlumb.getInstance();
})
.declareMethod('startService', function () {
var g = this;
return this.getElement()
.push(function (element) {
g.private.element = element;
g.private.start();
var preference = g.private.data.preference !== undefined ?
g.private.data.preference : {},
coordinates = preference.coordinates;
$.each(g.private.data.nodes, function (key, value) {
if (coordinates === undefined || coordinates[key] === undefined) {
value.coordinate = {
'top': 0.0,
'left': 0.0
};
} else {
value.coordinate = coordinates[key];
}
value.id = key;
g.private.newElement(value);
if (value.data) { // backward compatibility
g.private.updateElementData(key, {
data: value.data
});
}
});
$.each(g.private.data.edges, function (key, value) {
g.private.addEdge(key, value);
});
g.private.redraw();
})
.push(function () {
// Infinite wait, until cancelled
return new RSVP.defer().promise;
})
.push(undefined, function (error) {
$(g.private.element).find("#main").html("");
throw error;
});
});
}(jsPlumb, rJS, RSVP));
}($, jsPlumb, console));
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