Permalink
Browse files

Nodes are selectable

  • Loading branch information...
1 parent 87a5caf commit adcf958333d355e49e072974dbc9a4b452e4c3f9 @sroucheray committed Jan 16, 2012
View
@@ -3,6 +3,11 @@ html, body {
overflow: hidden;
}
+#littleboxes{
+ width:100%;
+ height:100%;
+}
+
#svgarrows{
width:100%;
height:100%;
@@ -19,10 +24,10 @@ svg line{
height:100%;
position:relative;
- /*-moz-user-select: none;
+ -moz-user-select: none;
-webkit-user-select: none;
user-select: none;
- */
+
background-color:white;
background-image:
linear-gradient(white 2px, transparent 2px),
@@ -48,7 +53,9 @@ svg line{
-webkit-linear-gradient(rgba(204,204,204,.3) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(204,204,204,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
- background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
+ background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
+
+ z-index: 0;
}
#viewportContainer.draggable{
@@ -128,8 +135,11 @@ svg line{
transition-duration: 0.2s;
}
+.node-content.selected{
+ border: 1px dashed;
+}
.node-content:hover{
- border: 1px solid rgba(0, 0, 0, 0.6);
+ /*border: 1px solid rgba(0, 0, 0, 0.6);*/
}
.node.dragging .node-content{
@@ -150,6 +160,10 @@ svg line{
cursor:-webkit-grab;*/
}
+.node-header.selectable{
+ cursor: pointer;
+}
+
.node-header h3{
font-size:12px;
line-height: 30px;
@@ -158,7 +172,6 @@ svg line{
.node-body{
position: absolute;
- width: 100%;
text-align: center;
}
@@ -220,8 +233,11 @@ svg line{
transition-duration: 0.2s;
}
+.node-content.selected .node-io .connector{
+ border: 1px dashed rgba(0, 0, 0, 0.6);
+}
.node-content:hover .node-io .connector{
- border: 1px solid rgba(0, 0, 0, 0.6);
+ /*border: 1px solid rgba(0, 0, 0, 0.6);*/
}
.node-io .connector:hover{
@@ -273,11 +289,11 @@ svg line{
transition-duration: 0.2s;
}
-.node-in .connector, .node-in .connector:hover, .node-in .connector.over, .node-content:hover .node-in .connector{
+.node-in .connector, .node-in .connector:hover, .node-in .connector.over, .node-content:hover .node-in .connector, .node-content.selected.node-in .connector{
border-right : none;
}
-.node-out .connector, .node-out .connector:hover, .node-out .connector.over, .node-content:hover .node-out .connector{
+.node-out .connector, .node-out .connector:hover, .node-out .connector.over, .node-content:hover .node-out .connector, .node-content.selected .node-out .connector{
border-left : none;
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
}
@@ -303,15 +319,25 @@ svg line{
width:240px;
height:100%;
position : absolute;
- left:100px;
+ background-color: rgba(245, 245, 245, 0.9);
+ z-index:1;
+
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
+ margin-bottom: 20px;
+ min-height: 20px;
+ padding: 19px;
}
-#selector ul{
+#selector .nodelist{
+ height:100%;
+ overflow:hidden;
+ padding-right:20px;
}
-#selector ul li{
- float: left;
- margin: 0 2px;
+#selector .nodelist.tooHigh:hover{
+ height:100%;
+ overflow: auto;
+ padding-right:0;
}
#selector span.protonode{
View
@@ -1,3 +1,30 @@
.show-show{
text-align:center;
+}
+
+#player{
+ padding: 0 40px 0 0;
+ width: 100px;
+}
+a.start, a.pause, a.stop{
+ opacity: 0.3;
+ display: inline-block;
+ height: 29px;
+ width: 29px;
+ text-indent: -99999px;
+ cursor: pointer;
+}
+a.start{
+ background: url('gfx/pictodeck.003.png') no-repeat scroll -762px -525px transparent;
+ width: 13px;
+ margin-left: 10px;
+}
+
+a.pause{
+ background: url('gfx/pictodeck.003.png') no-repeat scroll -625px -525px transparent;
+}
+
+a.stop{
+ background: url('gfx/pictodeck.003.png') no-repeat scroll -881px -525px transparent;
+ margin-right: 10px;
}
View
@@ -14,10 +14,12 @@
<script src=js/libs/backbone/backbone.js></script>
<script src=js/libs/require/require.js data-main=js/bootstrap.js></script>
- <section id=viewportContainer>
- <section id=viewport><div id=svgarrows></div></section>
-
- </section>
+ <div id=littleboxes>
+ <div id=selector></div>
+ <div id=viewportContainer>
+ <div id=viewport><div id=svgarrows></div></div>
+ </div>
+ </div>
</head>
<body>
</body>
View
@@ -18,35 +18,33 @@
require([
// Load our app module and pass it to our definition function
- 'models/graph',
+ 'views/graph',
+ 'models/selector',
'models/node/group'
// Some plugins have to be loaded in order due to there non AMD compliance
// Because these scripts are not "modules" they do not pass any values to the definition function below
- ], function (Graph, Group) {
+ ], function (GraphView, Selector, Group) {
- var graph = new Graph(),
- group = new Group();
- graph.createView(function(graphView){
- /*nodes.bind('startLinkCreation', function(params){
- graph.set({
- dynamicArrow : {
- x1 : params.sourceX,
- y1 : params.sourceY,
- x2 : params.mouseX,
- y2 : params.mouseY
- }
- });
- });*/
+ var graph = new GraphView(),
+ group = new Group(),
+ selector = new Selector();
+
+ selector.createView(function(view){
+ view.render();
+ });
+
+ selector.bind('create:node', function(data){
+ group.addNode('models/node/' + data.path, data);
});
-
- group.addNode('models/node/timer/timer');
+
+ /*group.addNode('models/node/timer/timer');
group.addNode('models/node/console/console');
group.addNode('models/node/show/show');
group.addNode('models/node/show/show');
group.addNode('models/node/maths/addition');
group.addNode('models/node/maths/substraction');
- group.addNode('models/node/maths/multiplication');
+ group.addNode('models/node/maths/multiplication');*/
});
}());
View
@@ -3,42 +3,8 @@ define(['models/node/node', 'views/link'], function (Node, LinkView) {
return Backbone.Collection.extend({
model : Node,
- createNode : function(nodePath){
- var coll = this;
- require([nodePath], function(NodeModel, viewParams){
- var aNode = new NodeModel(),
- nodeViewTargetLink;
-
- coll.add(aNode);
-
- aNode.createView(function(aNodeView){
- aNodeView.render();
-
- aNodeView.bind('linkFrom', function(params){
- linkFrom = params;
- });
-
- aNodeView.bind('linkTo', function(linkTo){
- var aLink,
- linkedNodes = {};
-
- if(linkFrom){
- linkedNodes.from = linkFrom.connectorType === 'from' ? linkFrom : linkTo;
- linkedNodes.to = linkedNodes.from === linkFrom ? linkTo : linkFrom;
-
- coll.get(linkedNodes.from.nodeId).linkTo(linkedNodes.from, coll.get(linkedNodes.to.nodeId), linkedNodes.to);
- }
- });
-
- aNodeView.bind('cancelLink', function(params){
- LinkView.renderDynamicArrow();
- });
-
- aNodeView.bind('startLinkCreation', function(params){
- LinkView.renderDynamicArrow(params);
- });
- });
- });
+ add : function(nodes, options){
+ Backbone.Collection.prototype.add.call(this, nodes, options);
}
});
});
View
@@ -10,11 +10,10 @@ define(['models/node/node', 'collections/nodes', 'views/link'], function (Node,
canResize : false,
coll : new NodesCollection()
},
- addNode : function(nodePath){
+ addNode : function(nodePath, data){
var coll = this.get('coll');
require([nodePath], function(NodeModel){
- var nodeModel = new NodeModel();
-
+ var nodeModel = new NodeModel(data);
coll.add(nodeModel);
require([nodeModel.get('viewPath')], function(NodeView){
@@ -32,8 +31,6 @@ define(['models/node/node', 'collections/nodes', 'views/link'], function (Node,
nodeModel.bind('change:model', nodeView.updateFromModel, nodeView);
}
- nodeView.render();
-
nodeView.bind('linkFrom', function(params){
linkFrom = params;
});
View
@@ -38,14 +38,15 @@ define(['views/link'], function (LinkView) {
'default' : null
}
],
- canResize : false
+ canResize : false,
+ selected : false
};
},
mergeDefaults : function(newDefaults){
_.defaults(newDefaults, NodeModel.prototype.defaults());
return newDefaults;
},
- initialize : function(){
+ initialize : function(params){
_.each(this.get('inputs'), function(input){
if(!input.hasOwnProperty('id')){
input.id = _.uniqueId('input');
Oops, something went wrong.

0 comments on commit adcf958

Please sign in to comment.