Skip to content

dream
dream
Commit f264bede authored by Jérome Perrin's avatar Jérome Perrin Committed by Sebastien Robin
Browse files
Options

Another format and gui prototype

parent 22be9689
Hide whitespace changes
Inline Side-by-side
Showing with 504 additions and 0 deletions
dream/platform/static/css/dream2.css 0 → 100644
View file @ f264bede
/*
.left, .right { display: block; }
.main_block { display: block; }
@media screen and (max-width:900px) {
.left, .right {
float: none;
}
}
nav { margin: 0; }
.localnav {
margin:0 0 20px 0;
}
.ui-mobile-viewport .localnav li {
float:left;
}
.localnav .ui-btn-inner {
padding: .6em 10px;
font-size:80%;
}
*/
#main {
/* width: 850px; */
border-top: 2px solid #456;
border-left: 2px solid #456;
border-right: 2px solid #456;
border-bottom: 2px solid #456;
height: 600px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color:#eaedef;
}
.graph_node, .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;
}
.graph_node, .window {
border:1px dotted gray;
width:5.7em;
height:4em;
position:absolute;
color:gray;
font-family:serif;
font-style:italic;
padding-top:0.9em;
font-size:0.9em;
}
path, ._jsPlumb_endpoint { cursor:pointer; }
/* z index stuff */
._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:23; }
._jsPlumb_connector._jsPlumb_hover {
z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
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;
}
dream/platform/static/index2.html 0 → 100644
View file @ f264bede
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DREAM</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/dream2.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="lib/jquery.ui.touch-punch.min.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>
<!-- JS plumb -->
<!-- support lib for bezier stuff -->
<script src="lib/jsBezier-0.5.js"></script>
<!-- jsplumb util -->
<script src="lib/jsPlumb/jsPlumb-util.js"></script>
<!-- base DOM adapter -->
<script src="lib/jsPlumb/jsPlumb-dom-adapter.js"></script>
<!-- main jsplumb engine -->
<script src="lib/jsPlumb/jsPlumb.js"></script>
<!-- anchors -->
<script src="lib/jsPlumb/jsPlumb-anchors.js"></script>
<!-- endpoint -->
<script src="lib/jsPlumb/jsPlumb-endpoint.js"></script>
<!-- connection -->
<script src="lib/jsPlumb/jsPlumb-connection.js"></script>
<!-- connector editors -->
<script src="lib/jsPlumb/jsPlumb-connector-editors.js"></script>
<!-- connectors, endpoint and overlays -->
<script src="lib/jsPlumb/jsPlumb-defaults.js"></script>
<!-- state machine connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-flowchart.js"></script>
<!-- SVG renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-svg.js"></script>
<!-- canvas renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-canvas.js"></script>
<!-- vml renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-vml.js"></script>
<!-- jquery jsPlumb adapter -->
<script src="lib/jsPlumb/jquery.jsPlumb.js"></script>
<!-- /JS -->
<script src="http://raw.github.com/DavidDurman/FlexiJsonEditor/master/jquery.jsoneditor.js"></script>
<script src="src/dream2.js"></script>
</head>
<body>
<!--
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>Controls<h3>
<ul data-role="listview" data-theme="c">
<li><a href="menu-general.html">General</a></li>
<li><a href="menu-palette.html">Node</a></li>
<li><a href="menu-runsimulation.html">Run Simulation</a></li>
</ul>
</div>
</div>
-->
<div data-role="page" class="ui-responsive-panel">
<div data-role="header" data-theme="f">
<h1>DREAM</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>
</div><!-- /header -->
<div data-role="content">
<h2>Panel: Menu + form</h2>
<p>This is a typical page that has two buttons in the header bar that open panels. The left button opens a left menu with the reveal display mode. The right button opens a form in a right overlay panel.</p>
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will
wrap
<div id="main"> </div>
</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will
wrap
<div>
<label for="node_id">Node ID:</label>
<input id="node_id"/>
<label for="node_top">Node Top:</label>
<input type="range" name="node_top" id="node_top" value="" min="0" max="100" />
<label for="node_left">Node Left:</label>
<input type="range" name="node_left" id="node_left" value="" min="0" max="100" />
<button id="move_node">Move Node</button>
</div>
<div>
<textarea rows="20" cols="47" id="debug_zone" style="align:left"> </textarea>
<button id="load_json">Load JSON</button>
</div>
</div>
</div><!-- /grid-a -->
<p>Since the panel links are in the top bar, there really isn't a need for the fixed positioning feature on the panel since you will always be scrolled to the top of the page. The fixed positioning impacts animation smoothness so it's off in this demo (<code>data-position-fixed="false"</code>) and the panel will scroll with the page.</p>
<p>To make this responsive, the left panel stays open and causes the page to re-flow at wider widths. This allows both the menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code> class="ui-responsive-panel"</code> to the page container.</p>
</div><!-- /content -->
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
<!-- good style: -->
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>Controls<h3>
<ul data-role="listview" data-theme="c">
<li><a href="menu-general.html">General</a></li>
<li><a href="menu-palette.html">Node</a></li>
<li><a href="menu-runsimulation.html">Run Simulation</a></li>
</ul>
</div>
<!-- from example: -->
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li data-icon="delete" style="background-color:#111;">
<a href="#" data-rel="close">Close menu</a>
</li>
<li data-filtertext="wai-aria voiceover accessibility screen reader">
<a href="../about/accessibility.html">Accessibility</a>
</li>
<li data-filtertext="accordions collapsible set collapsible-set collapsed">
<a href="../content/content-collapsible-set.html">Accordions</a>
</li>
<li data-filtertext="ajax navigation model">
<a href="../pages/page-navmodel.html">Ajax navigation model</a>
</li>
<li data-filtertext="anatomy of page viewport">
<a href="../pages/page-anatomy.html">Anatomy of a page</a>
</li>
<li data-filtertext="events api animationComplete transition css">
<a href="../api/events.html">Animation events</a>
</li>
<li data-filtertext="listview autodivider">
<a href="../lists/lists-autodividers.html">Automatic listview dividers</a>
</li>
<li data-filtertext="button link submit cancel image reset mini buttonmarkup enable disable">
<a href="../buttons/buttons-types.html">Buttons</a>
</li>
<li data-filtertext="button icon">
<a href="../buttons/buttons-icons.html">Button icons</a>
</li>
<li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
<a href="../pages/page-cache.html">Caching pages</a>
</li>
<li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
<a href="../forms/checkboxes/">Checkbox</a>
</li>
<li data-filtertext="button icon">
<a href="buttons/buttons-icons.html">Button icons</a>
</li>
<li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
<a href="../pages/page-cache.html">Caching pages</a>
</li>
<li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
<a href="../forms/checkboxes/">Checkbox</a>
</li>
</ul>
<!-- panel content goes here -->
</div><!-- /panel -->
</div><!-- /page -->
<div data-role="page" data-url="dialog.html" id="dialog">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
</body>
</html>
dream/platform/static/src/dream2.js 0 → 100644
View file @ f264bede
(function($) {
"use strict";
jsPlumb.bind("ready", function() {
/* Initialize jsPlumb defaults
*/
// TODO: default for connections ?
jsPlumb.setRenderMode(jsPlumb.SVG);
jsPlumb.importDefaults({
Endpoint: [ "Dot", {radius: 2} ],
ConnectionOverlays : [
[ "Arrow", { location:1, width:10 } ]
],
Anchor: "Continuous"
});
$.widget("dream.grapheditor", {
options: {
node_class: "graph_node", // CSS class for nodes
node_data_key: "grapheditor_node_data", // Key to store data on nodes using $.data
// XXX is it good idea to use
// $.data ???
draggable_nodes: true, // Can nodes be dragged
},
_create: function() {
this.nodes = {};
this.edges = {};
if (this.options.graph) {
this.graph(this.options.graph);
}
},
destroy: function() {
this.clear();
this._destroy();
},
clear: function() {
this.edges = {};
$.each(this.nodes, $.proxy(function(node_id, node) {
jsPlumb.remove(node);
delete(this["nodes"][node_id]);
}, this));
},
create_node_element: function(node_id, node_data) {
// Create an element for a node, and add it to the main element.
return $('<div>')
.uniqueId()
.addClass(this.options.node_class)
.text(node_data['name'] || node_id)
.appendTo(this.element)
},
add_node: function(node_id, node_data) {
/* add a node */
var element = this.create_node_element(node_id, node_data);
if (this.options.draggable_nodes) {
// make the node draggable
jsPlumb.draggable(element, {
containment: this.element,
stop: $.proxy(function(node_id, event) {
this.node_position(node_id, this.node_position(node_id));
this._trigger("node_moved", event, node_id);
}, this, node_id)
});
}
this.nodes[node_id] = element;
this.node_position(node_id, node_data);
this.node_data(node_id, node_data);
this._trigger('node_added', node_id);
},
create_edge_element: function(edge_id, source_node_id, destination_node_id, edge_data) {
// Create an element for an edge
var edge_label = edge_data['name'] || "";
jsPlumb.connect({
source: this.nodes[source_node_id].attr("id"),
target: this.nodes[destination_node_id].attr("id"),
paintStyle: { lineWidth: 1, strokeStyle: "#000" }, // XXX make this an option
overlays : [["Label", {label: edge_label}]]
});
},
add_edge: function(edge_id, source_node_id, destination_node_id, edge_data) {
/* add an edge */
this.create_edge_element(edge_id, source_node_id, destination_node_id, edge_data);
this.edges[edge_id] = [source_node_id, destination_node_id, edge_data];
this._trigger('edge_added', edge_id);
},
node_data: function(node_id, node_data) {
/* get or set data for a node */
var node = this.nodes[node_id];
if (node_data === undefined) {
return node.data(this.options.node_data_key);
}
this.nodes[node_id].data(this.options.node_data_key, node_data);
this._trigger("node_data_changed", node_id)
return this
},
edge_data: function(edge_id, edge_data) {
/* get or set data for an edge */
var edge = this.edges[edge_id];
if (edge_data === undefined) {
return edge[2]
}
this.edges[edge_id] = [edge[0], edge[1], edge_data]
this._trigger("edge_data_changed", edge_id)
return this
},
node_position: function(node_id, position) {
/* Get or set the position of a node with position given on a 0..1 scale */
var node = this.nodes[node_id],
node_position = node.position(),
element_position = this.element.position();
if (position === undefined) {
return {
"top": (node_position.top - element_position.top)
/ (this.element.height() - node.height()),
"left": (node_position.left - element_position.left)
/ (this.element.width() - node.width())
};
}
node.css({
"top": element_position.top +
Math.floor(position.top * (this.element.height() - node.height())) + "px",
"left": element_position.left +
Math.floor(position.left * (this.element.width() - node.width())) + "px"
});
// update node data with position
this.node_data(node_id, $.extend(this.node_data(node_id),
{top: position.top, left: position.left}));
jsPlumb.repaintEverything();
return this;
},
graph: function(value) {
// get or set the graph data
if ( value === undefined ) {
// get
var graph = {"nodes": {}, "edges": {}};
$.each(this.nodes, $.proxy(function(node_id, node) {
graph["nodes"][node_id] = node.data(this.options.node_data_key);
}, this));
$.each(this.edges, $.proxy(function(edge_id, edge) {
graph["edges"][edge_id] = this.edges[edge_id];
}, this));
return graph;
}
this.clear();
$.each(value.nodes, $.proxy(function(node_id, node) {
this.add_node(node_id, node);
}, this));
$.each(value.edges, $.proxy(function(edge_id, edge) {
this.add_edge(edge_id, edge[0], edge[1], edge[2] || {});
}, this));
return this;
}
});
$.getJSON("JSONInputs/Topology01.json", function(data) {
$("#main").grapheditor({graph: data,
node_moved: function(event, node_id) {
$("#debug_zone").val(JSON.stringify(
$("#main").grapheditor("graph"), undefined, " "));
}
});
// move a node
function move_node() {
$("#main").grapheditor("node_position", $("#node_id").val(), {
top: $("#node_top").val() / 100,
left: $("#node_left").val() / 100});
}
$("#move_node").click(move_node);
$("#node_top").change(move_node);
$("#node_left").change(move_node);
// when node is selected or moved, update the sliders
function updateSliders(node_id) {
var node_pos = grapheditor.node_position(node_id);
$("#node_id").val(node_id);
$("#node_top").val(Math.floor(node_pos.top * 100)).slider("refresh");
$("#node_left").val(Math.floor(node_pos.left * 100)).slider("refresh");
}
// Access the nodes
var grapheditor = $("#main").data("dreamGrapheditor");
$.each(grapheditor.nodes, function(node_id, node) {
node.click(function(e){updateSliders(node_id)});
// test: click to add a property
node.click(function(e){
$.mobile.changePage( "#dialog", { role: "dialog" } );
$("#main").grapheditor("node_data", node_id,
$.extend( $("#main").grapheditor("node_data", node_id),
{"dbclick": 1} ))
});
})
$("#main").on("grapheditornode_moved", function(event, node_id) { updateSliders(node_id) })
// reload from json
$("#load_json").click(function() { $("#main").grapheditor("graph",
JSON.parse($("#debug_zone").val()))});
});
});
})(jQuery);
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