Skip to content

dream
dream
Commit 2ec8c5b0 authored by Sebastien Robin's avatar Sebastien Robin
Browse files
Options

extend prototype : allow to build a schema with machines, queues, etc

parent 2b3df904
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 147 deletions
DREAM/dream/dream/platform/static/css/demo-new.css
View file @ 2ec8c5b0
......@@ -66,56 +66,6 @@ body {
background-color:#eaedef;
}
#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: 500px;
border: 2px solid;
margin-top: 20px;
margin-left: 35px;
border-radius: 10px;
}
#not_available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 500px;
border-radius: 10px;
}
#total_workers {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 80px;
margin-left: 720px;
border-radius: 10px;
}
#total_throughput {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 200px;
margin-left: 720px;
border-radius: 10px;
}
/* Setting for dialog */
label, input { display:block; }
......@@ -238,3 +188,74 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
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: 500px;
border: 2px solid;
margin-top: 20px;
margin-left: 35px;
border-radius: 10px;
}
.tool {
border: 1px dotted gray;
/*margin-top: 20px;
margin-left: 35px;*/
width:4em;
height:2em;
z-index: 10001;
border-radius: 10px;
color: gray;
font-family:serif;
font-style:italic;
padding-top:0.9em;
font-size:0.9em;
margin-top: 1em;
margin-left: 1em;
}
#not_available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 500px;
border-radius: 10px;
}
#total_workers {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 80px;
margin-left: 720px;
border-radius: 10px;
}
#total_throughput {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 200px;
margin-left: 720px;
border-radius: 10px;
}
DREAM/dream/dream/platform/static/css/flowchartDemo.css
View file @ 2ec8c5b0
.window { border:1px solid #346789;
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;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
width:5em; height:5em;
/*line-height:5em;*/
text-align:center;
z-index:20; position:absolute;
background-color:#eeeeef;
color:black;
font-family:helvetica;padding:0.5em;
font-size:0.9em;}
.window:hover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity:0.6;
filter:alpha(opacity=60);
#window1 { top:6em;left:15%; }
#window2 { top:6em; right:25%; }
#window3 { top:30em; left:15%; }
#window4 { top:30em; right:25%}
.window {
border:1px dotted gray;
width:9.7em;
height:8em;
position:absolute;
color:gray;
font-family:serif;
font-style:italic;
padding-top:0.9em;
font-size:0.9em;
}
.demo { position:relative; }
.drag-locked { border:1px solid red; }
.active {
border:1px dotted green;
}
.hover {
border:1px dotted red;
}
.dragActive { border:2px dotted orange; }
.dropHover { border:1px dotted red; }
._jsPlumb_connector { z-index:3; }
._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; }
.hl { border:3px solid red; }
#debug { position:absolute; background-color:black; color:red; z-index:5000 }
/*
._jsPlumb_endpoint._jsPlumb_dragging { border:2px solid green; }
._jsPlumb_endpoint_full { border:3px solid #606; }
._jsPlumb_endpoint_connected { border:4px solid black; }
._jsPlumb_endpoint_drop_allowed { border:5px solid #935; }
._jsPlumb_endpoint_drop_forbidden { border:5px solid #539; }
*/
.aLabel {
background-color:white;
padding:0.4em;
font:12px sans-serif;
color:#444;
z-index:10;
border:1px dotted gray;
opacity:0.8;
filter:alpha(opacity=80);
}
\ No newline at end of file
.cmdLink { font-size:0.80em;}
#clear { padding:0.3em; }
#clear:hover { background-color:yellow; }
#list {
text-align:center;
display:none;
font-size:90%;
position:absolute;
width:250px;
left:30%;
top:100px;
background-color:white;
padding:5px;
border:1px solid #456;
opacity:0.8;
}
#list table { width:100%; text-align:left;}
#explanation { text-align:center; }
\ No newline at end of file
DREAM/dream/dream/platform/static/index.html
View file @ 2ec8c5b0
......@@ -11,29 +11,29 @@
<div id="headerWrapper"><div id="header"></div></div>
<div id="tools">
Tools
<div id="Dream.Source" class="tool">
Source
<ul>
</ul>
</div>
<div id="main">
<div id="render"></div>
<div id="available">
Available
<div id="Dream.Machine" class="tool">
Machine
<ul>
</ul>
</div>
<div id="not_available">
Not Available
<div id="Dream.Queue" class="tool">
Queue
<ul>
</ul>
</div>
<div id="total_workers">
Workers
<h2>0</h2>
<div id="Dream.Exit" class="tool">
Exit
<ul>
</ul>
</div>
<div id="total_throughput">
Throughput
<h2></h2>
</div>
<div id="main">
<div id="render"></div>
</div>
<div id="sidebar">
<div id="explanation">
......
DREAM/dream/dream/platform/static/src/dream_launcher.js
View file @ 2ec8c5b0
......@@ -20,45 +20,38 @@
//dream_instance = DREAM.newDream(graph_data);
//dream_instance.start();
dream_instance = jsonPlumb.newJsonPlumb();
dream_instance.newElement({id : 'foo'})
//Fill list of people
people_list = ["Worker1", "Worker2", "Worker3", "Worker4", "Worker5", "Worker6", "Worker7", "Worker8"];
i_length = people_list.length;
for (i = 0; i < i_length; i++) {
$("#not_available ul").append('<li class="ui-state-default">' + people_list[i] + "</li>");
}
updateWorkerCount = function () {
var available_worker_length = 0,
available_worker_values = _.values(available_people);
_.each(available_worker_values, function(value) {
if (value === true) {
available_worker_length += 1;
}
});
$("#total_workers h2").text(available_worker_length.toString());
var main_div_offset = $("#main").offset();
var window_id = 1;
var element_id;
var id_container = {};
$( ".tool" ).draggable({ opacity: 0.7, helper: "clone",
stop: function(tool) {
console.log("stop event of tool", tool);
console.log("target id", tool.target.id);
var box_top, box_left;
console.log("tool.clientX", tool.clientX);
console.log("main_div_offset.left", main_div_offset.left);
console.log("tool.clientY", tool.clientY);
console.log("main_div_offset.top", main_div_offset.top);
box_top = (tool.clientY - main_div_offset.top);
box_left = (tool.clientX - main_div_offset.left);
console.log("top, left", box_top, box_left);
console.log("id_container before", id_container);
console.log("id_container target before", id_container[tool.target.id]);
id_container[tool.target.id] = (id_container[tool.target.id] || 0) + 1
console.log("id_container target after", id_container[tool.target.id]);
console.log("id_container after", id_container);
dream_instance.newElement({id : tool.target.id.split(".")[1] + "_" + id_container[tool.target.id],
coordinate: {top: box_top, left: box_left},
class: tool.target.id,
});
window_id += 1;
},
}
);
dream_instance = jsonPlumb.newJsonPlumb();
dream_instance.start();
// Make list of people draggable, update list of people depending
// to make them available or not
$("#available li").draggable({appendTo: "body"});
$("#not_available li").draggable({appendTo: "body"});
$("#available").droppable({
drop: function(event, ui) {
available_people[ui.draggable.text()] = true;
dream_instance.setSimulationParameters(available_people);
updateWorkerCount();
}
});
$("#not_available").droppable({
drop: function(event, ui) {
available_people[ui.draggable.text()] = false;
dream_instance.setSimulationParameters(available_people);
updateWorkerCount();
}
});
})
})(jQuery, _);
DREAM/dream/dream/platform/static/src/jsonPlumb.js
View file @ 2ec8c5b0
......@@ -61,6 +61,15 @@
anchor:"Continuous"
});
// bind to connection/connectionDetached events, and update the list of connections on screen.
jsPlumb.bind("connection", function(info, originalEvent) {
updateConnectionData(info.connection);
});
jsPlumb.bind("connectionDetached", function(info, originalEvent) {
updateConnectionData(info.connection, true);
});
};
Object.defineProperty(that, "start", {
......@@ -70,6 +79,7 @@
value: function () {
//priv.setModel();
priv.element_list = [];
priv.graph_data = {};
priv.initJsPlumb();
//priv.initDialog();
//priv.displayGraph();
......@@ -82,12 +92,52 @@
enumerable: false,
writable: false,
value: function (element) {
var render_element, style_string;
var render_element, style_string="";
render_element = $("[id=render]");
if (element.coordinate !== undefined) {
_.each(element.coordinate, function(value, key, list) {
style_string = style_string + key + ':' + value + 'px;';
})
}
if (style_string.length > 0) {
style_string = 'style="' + style_string + '"';
}
render_element.append('<div class="window" id="' +
element.id + '" ' + style_string + '">'
+ '</div>');
+ element.id + '</div>');
priv.element_list.push(element);
// Initial DEMO code : make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
// Add endPoint to allow drawing connections
var color = "#00f";
var endpoint = {
endpoint: "Rectangle",
paintStyle:{ width:25, height:21, fillStyle:color },
isSource:true,
scope:"blue rectangle",
connectorStyle : {
gradient:{stops:[[0, color], [0.5, "#09098e"], [1, color]]},
lineWidth:5,
strokeStyle:color,
dashstyle:"2 2"
},
//connector: ["Bezier", { curviness:63 } ],
maxConnections:3,
isTarget:true,
//dropOptions : exampleDropOptions
};
var right_end_point_list = ["Dream.Machine", "Dream.Queue", "Dream.Source"];
if (right_end_point_list.indexOf(element.class) !== -1) {
jsPlumb.addEndpoint(element.id, { anchor: "RightMiddle" }, endpoint);
}
var left_end_point_list = ["Dream.Machine", "Dream.Queue", "Dream.Exit"];
if (left_end_point_list.indexOf(element.class) !== -1) {
jsPlumb.addEndpoint(element.id, { anchor: "LeftMiddle" }, endpoint);
}
}
});
......
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