Skip to content

dream
dream
Commit 8c64377d authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki
Browse files
Options

Merge branch 'master' into jerome_jqs_for_wip 

Conflicts:
	dream/platform/static/index.html
	dream/platform/static/src/dream_launcher.js
parents 5cc2cfc6 f3d4ab48
Hide whitespace changes
Inline Side-by-side
Showing with 326 additions and 211 deletions
dream/platform/static/css/demo-new.css
View file @ 8c64377d
...@@ -242,20 +242,20 @@ path, ._jsPlumb_endpoint { cursor:pointer; } ...@@ -242,20 +242,20 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
background-color:#ffe; background-color:#ffe;
} }
.Dream-Machine { .Dream-Machine, .Dream-MachineJobShop {
background-color:#fef; background-color:#fef;
} }
.Dream-Queue { .Dream-Queue, .Dream-QueueJobShop {
background-color:#eff; background-color:#eff;
} }
.Dream-Exit { .Dream-Exit, .Dream-ExitJobShop {
background-color:#fee; background-color:#eef;
} }
.Dream-Repairman { .Dream-Repairman {
background-color:#eef; background-color:#fdd;
} }
.window { .window {
...@@ -269,3 +269,7 @@ path, ._jsPlumb_endpoint { cursor:pointer; } ...@@ -269,3 +269,7 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
padding-top:0.9em; padding-top:0.9em;
font-size:0.9em; font-size:0.9em;
} }
#debug textarea {
width:100%;
}
dream/platform/static/index.html
View file @ 8c64377d
...@@ -12,106 +12,102 @@ ...@@ -12,106 +12,102 @@
</head> </head>
<body data-demo-id="flowchartConnectorsDemo" data-library="jquery"> <body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
<div class="container"> <div class="container">
<div id="headerWrapper"> <div id="headerWrapper">
<div id="header"></div> <div id="header"></div>
</div> </div>
<div class="four columns">
<div id="tools">
<h4>Tools</h4>
<div id="tools-container"></div>
<a id="clear_all">Clear All</a>
<a id="layout_graph">Layout Graph</a>
<a id="zoom_in">Zoom +</a>
<a id="zoom_out">Zoom -</a>
</div>
</div>
<div class="twelve columns">
<div id="main">
<div id="render"></div>
</div>
</div>
</div> <div class="four columns">
<div class="container"> <div id="tools">
<h4>Tools</h4>
<div id="tools-container"></div>
<a id="clear_all">Clear All</a>
<a id="layout_graph">Layout Graph</a>
<a id="zoom_in">Zoom +</a>
<a id="zoom_out">Zoom -</a>
</div>
</div>
<div class="four columns"> <div class="twelve columns">
<div id="simulation_controls"> <div id="main">
<h4>Simulation Parameters</h4> <div id="render"></div>
<div title="Configure"> </div>
<form>
<fieldset id="general-fieldset">
</fieldset>
<a id="run_simulation">Run Simulation</a>
</form>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="twelve columns">
<div id="graph_zone">
<div>Stations Utilization</div>
<div id="graph"></div>
</div>
<div id="debug"> <div class="four columns">
<div class="five columns"> <div id="simulation_controls">
<div>Input</div> <h4>Simulation Parameters</h4>
<textarea rows="20" cols="47" id="json_output" style="align:left; width:100%"> <div title="Configure">
</textarea> <form>
<fieldset id="general-fieldset">
</fieldset>
<a id="run_simulation">Run Simulation</a>
</form>
</div>
</div> </div>
</div> </div>
<div class="five columns"> <div class="twelve columns">
<div>Result</div> <div id="graph_zone">
<textarea rows="20" cols="47" id="json_result" style="align:left; width:100%"> <div>Stations Utilization</div>
</textarea> <div id="graph"></div>
<td></td> </div>
<div id="debug">
<div class="six columns alpha">
<div>Input</div>
<textarea rows="20" cols="47" id="json_output"></textarea>
<a id="load_json">Load JSON</a>
</div>
<div class="six columns alpha">
<div>Result</div>
<textarea rows="20" cols="47" id="json_result"></textarea>
</div>
</div> </div>
</div> </div>
</div> <div class="twelve columns">
</div> <div id="wip">
<h4>WIP</h4>
<div class="jQuerySheet"></div>
</div>
</div>
<div class="twelve columns"> <!-- DEP -->
<div id="wip"> <script type="text/javascript" src="lib/jquery-1.8.1-min.js"></script>
<h4>WIP</h4> <script type="text/javascript" src="lib/jquery-ui-1.8.23-min.js"></script>
<div class="jQuerySheet"></div> <script type="text/javascript" src="lib/jquery.ui.touch-punch.min.js"></script>
</div> <script type="text/javascript" src="lib/md5.js"></script>
</div> <script type="text/javascript" src="lib/jio.js"></script>
<script type="text/javascript" src="lib/jio.localstorage.js"></script>
<script type="text/javascript" src="lib/pubsub.js"></script>
<script type="text/javascript" src="lib/jquery.jsPlumb-1.5.4-min.js"></script>
<!-- /DEP -->
<!-- DEP --> <!-- flot -->
<script type="text/javascript" src="lib/jquery-1.8.1-min.js"></script> <script type="text/javascript" src="lib/jquery.flot.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.23-min.js"></script> <script type="text/javascript" src="lib/jquery.flot.stack.js"></script>
<script type="text/javascript" src="lib/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript" src="lib/jquery.jsoneditor.js"></script>
<script type="text/javascript" src="lib/md5.js"></script>
<script type="text/javascript" src="lib/jio.js"></script>
<script type="text/javascript" src="lib/jio.localstorage.js"></script>
<script type="text/javascript" src="lib/pubsub.js"></script>
<script type="text/javascript" src="lib/jquery.jsPlumb-1.5.4-min.js"></script>
<!-- /DEP -->
<!-- flot --> <!-- jqs -->
<script type="text/javascript" src="lib/jquery.flot.js"></script> <script type="text/javascript" src="lib/jquery.sheet-2.0.0/parser.js""></script>
<script type="text/javascript" src="lib/jquery.flot.stack.js"></script> <script type="text/javascript" src="lib/jquery.sheet-2.0.0/jquery.sheet.min.js""></script>
<script type="text/javascript" src="lib/jquery.jsoneditor.js"></script>
<!-- jqs --> <div id="dialog-form" title="Configure">
<script type="text/javascript" src="lib/jquery.sheet-2.0.0/parser.js""></script> <form>
<script type="text/javascript" src="lib/jquery.sheet-2.0.0/jquery.sheet.min.js""></script> <fieldset id="dialog-fieldset">
</fieldset>
</form>
</div>
<div id="dialog-form" title="Configure"> <!-- demo code -->
<form> <script type="text/javascript" src="src/dream.js"></script>
<fieldset id="dialog-fieldset"> <script type="text/javascript" src="src/jsonPlumb.js"></script>
</fieldset> <script type="text/javascript" src="src/dream_launcher.js"></script>
</form>
</div> </div>
<!-- demo code -->
<script type="text/javascript" src="src/dream.js"></script>
<script type="text/javascript" src="src/jsonPlumb.js"></script>
<script type="text/javascript" src="src/dream_launcher.js"></script>
</div>
</body> </body>
</html> </html>
dream/platform/static/src/dream.js
View file @ 8c64377d
...@@ -25,29 +25,8 @@ ...@@ -25,29 +25,8 @@
var that = jsonPlumb(), var that = jsonPlumb(),
priv = {}; priv = {};
// Utility function to update the style of a box
priv.updateBoxStyle = function (box_id, style) {
var box;
box = $("#" + box_id);
$.each(style, function (key, value) {
box.css(key, value);
});
};
// Utility function to update the content of the box
priv.updateBoxContent = function (box_id, title, throughput, worker) {
var box, html_string;
box = $("#" + box_id);
html_string = "<strong>" + title + "</strong>";
if (worker !== undefined && worker !== null) {
html_string += "<br> (" + worker + ")";
}
html_string += "<br><strong>througput: " + throughput + "</strong>";
box.html(html_string);
};
priv.displayTool = function () { priv.displayTool = function () {
var render_element = $("[id=tools-container]"); var render_element = $("#tools-container");
for (var key in configuration) { for (var key in configuration) {
if (key !== 'Dream-Configuration') { if (key !== 'Dream-Configuration') {
render_element.append('<div id="' + key + '" class="tool ' + key + '">' + render_element.append('<div id="' + key + '" class="tool ' + key + '">' +
...@@ -98,11 +77,14 @@ ...@@ -98,11 +77,14 @@
// Render fields for that particular element // Render fields for that particular element
var fieldset = $("#dialog-fieldset"); var fieldset = $("#dialog-fieldset");
$("#dialog-fieldset").children().remove();
var element_id_prefix = element_id.split("_")[0];
var property_list = configuration[element_id_prefix].property_list || [];
var previous_data = that.getData()["nodes"]; var previous_data = that.getData()["nodes"];
$("#dialog-fieldset").children().remove();
var element_type = previous_data[element_id]._class.replace('.', '-');
var property_list = configuration[element_type].property_list || [];
fieldset.append(
'<label>ID</label><input type="text" name="id" id="id" value="' +
element_id + '" class="text ui-widget-content ui-corner-all"/>');
var element_name = previous_data[element_id]['name'] || element_id; var element_name = previous_data[element_id]['name'] || element_id;
fieldset.append( fieldset.append(
'<label>Name</label><input type="text" name="name" id="name" value="' + '<label>Name</label><input type="text" name="name" id="name" value="' +
...@@ -138,7 +120,6 @@ ...@@ -138,7 +120,6 @@
$("#dialog-form").dialog({ $("#dialog-form").dialog({
autoOpen: false, autoOpen: false,
height: 300,
width: 350, width: 350,
modal: true, modal: true,
title: title || "", title: title || "",
...@@ -154,6 +135,11 @@ ...@@ -154,6 +135,11 @@
$(this).dialog("close"); $(this).dialog("close");
}, },
Validate: function () { Validate: function () {
var new_id = $("#id").val();
if (new_id !== element_id && $('#' + new_id).length > 0) {
alert('This ID is already used.');
return;
};
var data = {}, prefixed_property_id, property_element; var data = {}, prefixed_property_id, property_element;
var updateDataPropertyList = function (property_list, data, var updateDataPropertyList = function (property_list, data,
prefix) { prefix) {
...@@ -178,7 +164,8 @@ ...@@ -178,7 +164,8 @@
updateDataPropertyList(property_list, data); updateDataPropertyList(property_list, data);
that.updateElementData(element_id, { that.updateElementData(element_id, {
data: data, data: data,
name: $("#name").val() || element_id name: $("#name").val() || element_id,
id: $("#id").val() || element_id
}); });
$(this).dialog("close"); $(this).dialog("close");
...@@ -192,15 +179,15 @@ ...@@ -192,15 +179,15 @@
priv.super_newElement = that.newElement; priv.super_newElement = that.newElement;
that.newElement = function (element) { that.newElement = function (element) {
var element_prefix = element.id.split('_')[0]; var element_type = element._class.replace('.', '-');
priv.super_newElement(element, configuration[element_prefix]); priv.super_newElement(element, configuration[element_type]);
$("#" + element.id).bind('click', function () { $("#" + element.id).bind('click', function () {
$("#dialog-form").dialog("destroy"); $("#dialog-form").dialog("destroy");
priv.prepareDialogForElement(element.id, element.id); priv.prepareDialogForElement(element.id, element.id);
$("#dialog-form").dialog("open"); $("#dialog-form").dialog("open");
}); });
// Store default values // Store default values
var data = {}, property_list = configuration[element_prefix][ var data = {}, property_list = configuration[element_type][
"property_list" "property_list"
] || []; ] || [];
var updateDefaultData = function (data, property_list) { var updateDefaultData = function (data, property_list) {
......
dream/platform/static/src/dream_launcher.js
View file @ 8c64377d
...@@ -27,7 +27,6 @@ ...@@ -27,7 +27,6 @@
applicationname: "dream" applicationname: "dream"
}); });
var window_id = 1;
var id_container = {}; // to allow generating next ids, like Machine_1, Machine_2, etc var id_container = {}; // to allow generating next ids, like Machine_1, Machine_2, etc
var property_container = { var property_container = {
entity: { entity: {
...@@ -190,6 +189,33 @@ ...@@ -190,6 +189,33 @@
}, },
_class: 'Dream.Exit' _class: 'Dream.Exit'
}, },
"Dream-MachineJobShop": {
anchor: {
RightMiddle: {},
LeftMiddle: {},
TopCenter: {},
BottomCenter: {}
},
property_list: [property_container["processingTime"],
property_container["failures"]
],
_class: 'Dream.MachineJobShop'
},
"Dream-QueueJobShop": {
anchor: {
RightMiddle: {},
LeftMiddle: {}
},
property_list: [property_container["capacity"], property_container[
"isDummy"]],
_class: 'Dream.QueueJobShop'
},
"Dream-ExitJobShop": {
anchor: {
LeftMiddle: {}
},
_class: 'Dream.ExitJobShop'
},
"Dream-Repairman": { "Dream-Repairman": {
anchor: { anchor: {
TopCenter: {}, TopCenter: {},
...@@ -215,65 +241,74 @@ ...@@ -215,65 +241,74 @@
helper: "clone", helper: "clone",
stop: function (tool) { stop: function (tool) {
var box_top, box_left, _class; var box_top, box_left, _class;
var offset = $("[id=render]").offset(); var offset = $("#render").offset();
box_top = tool.clientY - offset.top + "px"; box_top = tool.clientY - offset.top + "px";
box_left = tool.clientX - offset.left + "px"; box_left = tool.clientX - offset.left + "px";
var relative_position = dream_instance.convertToRelativePosition(
box_left, box_top);
id_container[tool.target.id] = (id_container[tool.target.id] || 0) + id_container[tool.target.id] = (id_container[tool.target.id] || 0) +
1; 1;
_class = tool.target.id.replace('-', '.'); // XXX - vs . _class = tool.target.id.replace('-', '.'); // XXX - vs .
dream_instance.newElement({ dream_instance.newElement({
id: tool.target.id + "_" + id_container[tool.target.id], id: tool.target.id + "_" + id_container[tool.target.id],
coordinate: { coordinate: {
top: box_top, top: relative_position[1],
left: box_left left: relative_position[0]
}, },
_class: _class _class: _class
}); });
window_id += 1;
} }
}); });
var loadData = function(data) {
var preference = data.preference !== undefined ?
data.preference : {};
dream_instance.setPreferences(preference);
// Add all elements
$.each(data.nodes, function (key, value) {
var coordinates = preference['coordinates'] || {};
var coordinate = coordinates[key] || {};
value['coordinate'] = {};
$.each(coordinate || {}, function (k, v) {
value['coordinate'][k] = v;
});
dream_instance.newElement(value);
dream_instance.updateElementData(key, {
data: value.data || {}
});
});
$.each(data.edges, function (key, value) {
dream_instance.connect(value[0], value[1]);
});
// Now update id_container
$.each(data.nodes, function (key, value) {
var element_id = value.id,
prefix, suffix, splitted_element_id;
splitted_element_id = element_id.split("_");
prefix = splitted_element_id[0];
suffix = splitted_element_id[1];
id_container[prefix] = Math.max((id_container[prefix] || 0),
parseInt(suffix, 10));
});
dream_instance.setGeneralProperties(data.general);
dream_instance.initGeneralProperties(); // XXX
dream_instance.redraw()
$("#json_output").val(JSON.stringify(dream_instance.getData(),
undefined, " "));
};
// Check if there is already data when we first load the page, if yes, then build graph from it // Check if there is already data when we first load the page, if yes, then build graph from it
jio.get({ jio.get({
_id: "dream_demo" _id: "dream_demo"
}, function (err, response) { }, function (err, response) {
if (response !== undefined && response.data !== undefined) { if (response !== undefined && response.data !== undefined) {
// Add all elements loadData(response.data);
$.each(response.data.nodes, function (key, value) {
var preference_data = response.data.preference !== undefined ?
response.data.preference[key] : {};
$.each(preference_data, function (preference_key,
preference_value) {
value[preference_key] = preference_value;
});
dream_instance.newElement(value);
dream_instance.updateElementData(key, {
data: value.data || {}
});
});
$.each(response.data.edges, function (key, value) {
dream_instance.connect(value[0], value[1]);
});
// Now update id_container
$.each(response.data.nodes, function (key, value) {
var element_id = value.id,
prefix, suffix, splitted_element_id;
splitted_element_id = element_id.split("_");
prefix = splitted_element_id[0];
suffix = splitted_element_id[1];
id_container[prefix] = Math.max((id_container[prefix] || 0),
parseInt(suffix, 10));
});
dream_instance.setGeneralProperties(response.data.general);
dream_instance.initGeneralProperties(); // XXX
$("#json_output").text(JSON.stringify(dream_instance.getData(),
undefined, " "));
} }
// once the data is read, we can subscribe to every changes // once the data is read, we can subscribe to every changes
$.subscribe("Dream.Gui.onDataChange", function (event, data) { $.subscribe("Dream.Gui.onDataChange", function (event, data) {
$("#json_output").text(JSON.stringify(data, undefined, " ")); $("#json_output").val(JSON.stringify(data, undefined, " "));
jio.put({ jio.put({
_id: "dream_demo", _id: "dream_demo",
data: data data: data
...@@ -295,7 +330,7 @@ ...@@ -295,7 +330,7 @@
dream_instance.runSimulation( dream_instance.runSimulation(
function (data) { function (data) {
if (data['success']) { if (data['success']) {
$("#json_result").text(JSON.stringify(data['success'], $("#json_result").val(JSON.stringify(data['success'],
undefined, " ")); undefined, " "));
// display demo graph. // display demo graph.
...@@ -370,7 +405,7 @@ ...@@ -370,7 +405,7 @@
$.plot("#graph", series, options); $.plot("#graph", series, options);
} else { } else {
$("#json_result").effect('shake', 50).text(data['error']); $("#json_result").effect('shake', 50).val(data['error']);
} }
}); });
e.preventDefault(); e.preventDefault();
...@@ -404,8 +439,22 @@ ...@@ -404,8 +439,22 @@
dream_instance.zoom_out(); dream_instance.zoom_out();
}); });
// Redraw if the graph area or the window is resized
$('#main').resizable().resize(function () {
dream_instance.redraw();
});
$(window).resize(function () {
dream_instance.redraw();
});
// Load JSON button for debugging
$("#load_json").button().click(function () {
dream_instance.clearAll();
loadData(JSON.parse($("#json_output").val()));
});
$("#graph_zone").hide(); $("#graph_zone").hide();
// spreadsheet // spreadsheet
var default_config = { var default_config = {
id: "jquerysheet-div", id: "jquerysheet-div",
......
dream/platform/static/src/jsonPlumb.js
View file @ 8c64377d
...@@ -19,13 +19,12 @@ ...@@ -19,13 +19,12 @@
(function (scope, $, jsPlumb, console) { (function (scope, $, jsPlumb, console) {
"use strict"; "use strict";
scope.jsonPlumb = function (model) { scope.jsonPlumb = function () {
var that = {}, priv = {}; var that = {}, priv = {};
priv.initJsPlumb = function () { priv.initJsPlumb = function () {
jsPlumb.setRenderMode(jsPlumb.SVG); jsPlumb.setRenderMode(jsPlumb.SVG);
var color = "#00f"; var color = "#00f";
var gradient_color = "#09098e";
jsPlumb.importDefaults({ jsPlumb.importDefaults({
// default drag options // default drag options
DragOptions: { DragOptions: {
...@@ -50,18 +49,12 @@ ...@@ -50,18 +49,12 @@
location: 1, location: 1,
id: "arrow", id: "arrow",
length: 14, length: 14,
width: 12,
foldback: 0.8 foldback: 0.8
}] }]
], ],
PaintStyle: { PaintStyle: {
gradient: { lineWidth: 2,
stops: [
[0, color],
[0.5, gradient_color],
[1, color]
]
},
lineWidth: 5,
strokeStyle: color strokeStyle: color
}, },
Anchor: "Continuous", Anchor: "Continuous",
...@@ -115,27 +108,78 @@ ...@@ -115,27 +108,78 @@
}; };
priv.updateElementCoordinate = function (element_id, coordinate) { priv.updateElementCoordinate = function (element_id, coordinate) {
var preference = priv.preference_container[element_id] || {}, element; var coordinates = priv.preference_container['coordinates'] || {}, element;
if (coordinate === undefined) { if (coordinate === undefined) {
coordinate = {}; coordinate = {};
element = $("#" + element_id); element = $("#" + element_id);
coordinate.top = element.css("top"); var relative_position = that.convertToRelativePosition(
coordinate.left = element.css("left"); element.css('left'), element.css('top'));
coordinate.top = relative_position[1];
coordinate.left = relative_position[0];
} }
preference["coordinate"] = coordinate; coordinates[element_id] = coordinate;
priv.preference_container[element_id] = preference; priv.preference_container['coordinates'] = coordinates;
priv.onDataChange(); priv.onDataChange();
return coordinate; return coordinate;
}; };
priv.updateNodeStyle = function (element_id) {
var node_style = priv.preference_container['node_style'];
var element = $("#" + element_id);
if (node_style !== undefined) {
element.css(node_style);
} else {
var style_dict = {};
$.each(priv.style_attr_list, function (i, j) {
style_dict[j] = $('.window').css(j);
});
priv.saveNodeStyle(style_dict);
}
};
priv.convertToAbsolutePosition = function(x, y) {
var canvas_size_x = $('#main').width();
var canvas_size_y = $('#main').height();
var node_style = priv.preference_container['node_style'];
var size_x, size_y;
if (node_style === undefined) {
size_x = $('.window').css('width').replace('px', '');
size_y = $('.window').css('height').replace('px', '');
} else {
size_x = node_style['width'].replace('px', '');
size_y = node_style['height'].replace('px', '');
}
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 canvas_size_x = $('#main').width();
var canvas_size_y = $('#main').height();
var size_x = $('.window').width();
var size_y = $('.window').height();
var top = y.replace('px', '') / (canvas_size_y - size_y);
var left = x.replace('px', '') / (canvas_size_y - size_y);
return [left, top];
};
priv.saveNodeStyle = function (style_dict) {
var node_style = priv.preference_container['node_style'] || {};
$.each(style_dict, function (k, v) {
node_style[k] = v;
});
priv.preference_container['node_style'] = node_style;
priv.onDataChange();
};
priv.draggable = function () { priv.draggable = function () {
// make all the window divs draggable // make all the window divs draggable
var stop = function (el) { var stop = function (element) {
var element_id = el.target.id; priv.updateElementCoordinate(element.target.id);
priv.updateElementCoordinate(element_id);
}; };
jsPlumb.draggable(jsPlumb.getSelector(".window"), { jsPlumb.draggable(jsPlumb.getSelector(".window"), {
grid: [20, 20], grid: [10, 10],
stop: stop stop: stop
}); });
}; };
...@@ -144,7 +188,7 @@ ...@@ -144,7 +188,7 @@
var element_data = { var element_data = {
_class: element._class, _class: element._class,
id: element.id, id: element.id,
name: element.id name: element.name
}; };
priv.node_container[element.id] = element_data; priv.node_container[element.id] = element_data;
priv.onDataChange(); priv.onDataChange();
...@@ -154,6 +198,8 @@ ...@@ -154,6 +198,8 @@
$.publish("Dream.Gui.onDataChange", priv.getData()); $.publish("Dream.Gui.onDataChange", priv.getData());
}; };
priv.style_attr_list = ['width', 'height', 'font-size', 'padding-top',
'line-height'];
that.positionGraph = function () { that.positionGraph = function () {
$.ajax( $.ajax(
...@@ -162,42 +208,50 @@ ...@@ -162,42 +208,50 @@
contentType: 'application/json', contentType: 'application/json',
type: 'POST', type: 'POST',
success: function (data, textStatus, jqXHR) { success: function (data, textStatus, jqXHR) {
var canvas_size_x = $('#main').width();
var canvas_size_y = $('#main').height();
var size_x = $('.window').width();
var size_y = $('.window').height();
$.each(data, function (node, pos) { $.each(data, function (node, pos) {
var top = Math.floor(pos.top * (canvas_size_y - size_y)) + "px"; var absolute_position = priv.convertToAbsolutePosition(
var left = Math.floor(pos.left * (canvas_size_x - size_x)) + "px"; pos.left, pos.top);
priv.updateElementCoordinate(node, { priv.updateElementCoordinate(node, {
top: top, top: pos.top,
left: left, left: pos.left
}); });
$('#'+node).css('top', top);
$('#'+node).css('left', left);
}); });
jsPlumb.repaintEverything(); that.redraw();
} }
}); });
}; };
that.zoom_in = function () { that.zoom_in = function () {
var attr_list = ['width', 'height', 'font-size', 'padding-top', var style_dict = {};
'line-height'] $.each(priv.style_attr_list, function (i, j) {
$.each(attr_list, function (i, j) { var new_value = $('.window').css(j).replace('px', '') * 1.1111 + 'px';
$('.window').css(j, $('.window').css(j, new_value);
$('.window').css(j).replace('px', '') * 1.1111 + 'px'); style_dict[j] = new_value;
}); });
jsPlumb.repaintEverything(); priv.saveNodeStyle(style_dict);
that.redraw();
}; };
that.zoom_out = function () { that.zoom_out = function () {
var attr_list = ['width', 'height', 'font-size', 'padding-top', var style_dict = {};
'line-height'] $.each(priv.style_attr_list, function (i, j) {
$.each(attr_list, function (i, j) { var new_value = $('.window').css(j).replace('px', '') * 0.9 + 'px';
$('.window').css(j, $('.window').css(j, new_value);
$('.window').css(j).replace('px', '') * 0.9 + 'px'); style_dict[j] = new_value;
});
priv.saveNodeStyle(style_dict);
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 = $('#' + node_id);
element.css('top', absolute_position[1]);
element.css('left', absolute_position[0]);
}); });
jsPlumb.repaintEverything(); jsPlumb.repaintEverything();
}; };
...@@ -215,7 +269,12 @@ ...@@ -215,7 +269,12 @@
jsPlumb.removeAllEndpoints($("#" + element_id)); jsPlumb.removeAllEndpoints($("#" + element_id));
$("#" + element_id).remove(); $("#" + element_id).remove();
delete(priv.node_container[element_id]); delete(priv.node_container[element_id]);
delete(priv.preference_container[element_id]); delete(priv.preference_container['coordinates'][element_id]);
$.each(priv.edge_container, function (k, v) {
if (element_id == v[0] || element_id == v[1]) {
delete(priv.edge_container[k]);
}
});
priv.onDataChange(); priv.onDataChange();
}; };
...@@ -224,6 +283,22 @@ ...@@ -224,6 +283,22 @@
if (data['name']) { if (data['name']) {
$("#" + element_id).text(data["name"]); $("#" + element_id).text(data["name"]);
} }
var new_id = data['id'];
if (new_id && new_id !== element_id) {
priv.node_container[new_id] = priv.node_container[element_id];
priv.node_container[new_id]['id'] = new_id;
delete(priv.node_container[element_id]);
$.each(priv.edge_container, function (k, v) {
if (v[0] === element_id) {
v[0] = new_id;
}
if (v[1] === element_id) {
v[1] = new_id;
}
});
priv.preference_container['coordinates'][new_id] = priv.preference_container['coordinates'][element_id];
delete(priv.preference_container['coordinates'][element_id]);
}
priv.onDataChange(); priv.onDataChange();
}; };
...@@ -244,7 +319,7 @@ ...@@ -244,7 +319,7 @@
}; };
that.clearAll = function () { that.clearAll = function () {
$("[id=render]").children().remove(); $("#render").children().remove();
$.each(priv.node_container, function (element_id) { $.each(priv.node_container, function (element_id) {
priv.removeElement(element_id); priv.removeElement(element_id);
}); });
...@@ -257,6 +332,10 @@ ...@@ -257,6 +332,10 @@
}); });
}; };
that.setPreferences = function (preferences) {
priv.preference_container = preferences;
};
that.setGeneralProperties = function (properties) { that.setGeneralProperties = function (properties) {
priv.general_container = properties; priv.general_container = properties;
priv.onDataChange(); priv.onDataChange();
...@@ -266,26 +345,27 @@ ...@@ -266,26 +345,27 @@
var render_element, style_string = "", var render_element, style_string = "",
coordinate = element.coordinate, coordinate = element.coordinate,
box; box;
render_element = $("[id=render]"); render_element = $("#render");
if (coordinate !== undefined) { if (coordinate !== undefined) {
coordinate = priv.updateElementCoordinate(element.id, coordinate); coordinate = priv.updateElementCoordinate(element.id, coordinate);
} }
render_element.append('<div class="window ' + element._class.replace('.', '-') + '" id="' + render_element.append('<div class="window ' + element._class.replace('.', '-') + '" id="' +
element.id + '">' + element.id + '</div>'); element.id + '">' + (element.name || element.id) + '</div>');
box = $("#" + element.id); box = $("#" + element.id);
box.css("top", coordinate.top); var absolute_position = priv.convertToAbsolutePosition(
box.css("left", coordinate.left); coordinate.left, coordinate.top);
box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]);
priv.updateNodeStyle(element.id);
// Initial DEMO code : make all the window divs draggable // Initial DEMO code : make all the window divs draggable
priv.draggable(); priv.draggable();
// Add endPoint to allow drawing connections // Add endPoint to allow drawing connections
var color = "#00f"; var color = "#00f";
var gradient_color = "#09098e";
// Different endpoint color for Repairman // Different endpoint color for Repairman
if (element._class === "Dream.Repairman") { if (element._class === "Dream.Repairman") {
color = "rgb(189,11,11)"; color = "rgb(189,11,11)";
gradient_color = "rgb(255,0,0)";
} }
var endpoint = { var endpoint = {
endpoint: "Rectangle", endpoint: "Rectangle",
...@@ -296,7 +376,6 @@ ...@@ -296,7 +376,6 @@
}, },
isSource: true, isSource: true,
scope: "blue rectangle", scope: "blue rectangle",
maxConnections: 3,
isTarget: true isTarget: true
}; };
for (var key in option.anchor) { for (var key in option.anchor) {
......
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