Skip to content

Commit

Permalink
Changed styling. Fixed wiring so it looks like real bent wires instea…
Browse files Browse the repository at this point in the history 
…d of boxes. Fixed tooltips to give results over outputs.
  • Loading branch information
@MalcolmDwyer
MalcolmDwyer committed Aug 25, 2012
1 parent b74ae27 commit 76a44b6
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 38 deletions.
88 changes: 51 additions & 37 deletions jquery.ui.nodeEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@ $.widget("ui.nodeEditor", {

resultDeferred.done(function(result) {
console.log('Computed result for output, notifying: ' + result);
that._updateTip(output, node, result);
outD.notify(result);
});
});
Expand All @@ -224,21 +225,27 @@ $.widget("ui.nodeEditor", {
//console.groupEnd();
},

_updateTip: function(element, node) {
console.log('updateTip()');
_updateTip: function(element, node, result) {
//console.log('updateTip()');
var tipString;
tipString = '[' + node.label + ']';
for (input in node.state.inputs) {
tipString += ' ' + input + ': ' + node.state.inputs[input];
};

if (node.label && node.state) {
tipString = '[' + node.label + ']';
for (input in node.state.inputs) {
tipString += ' ' + input + ': ' + node.state.inputs[input];
};
}
if (result) {
tipString += ' => ' + result;
}
$(element).attr('title', tipString);
},

_setupEvents: function() {
this._setupConnectorEvents();
this._setupWireEvents();
},

_setupConnectorEvents: function() {
_setupWireEvents: function() {
var that = this;

this.nodeField.on('mousedown', '.ui-nodeEditor-nodeConnector', function(ev) {
Expand All @@ -249,17 +256,16 @@ $.widget("ui.nodeEditor", {
'left': ev.pageX - editorPosition.left
}

var connectorBox = $('<div class="ui-nodeEditor-wire"></div>')
.attr('id', 'ui-nodeEditor-activeConnector')
var wireBox = $('<div class="ui-nodeEditor-wire"><div class="wire1" /><div class="wire2"/></div>')
.attr('id', 'ui-nodeEditor-activeWire')
.data({
'clickStartPosition': pos,
'clickStartConnector': $(this)
})
.css({
'top': pos.top,
'left': pos.left,
'background-color': '#fcc',

'left': pos.left
//'background-color': '#fcc',
})
.appendTo(that.nodeField);

Expand All @@ -268,52 +274,60 @@ $.widget("ui.nodeEditor", {
});

this.nodeField.on('mousemove', function(ev) {
if ($('#ui-nodeEditor-activeConnector').length) {
var connector = $('#ui-nodeEditor-activeConnector');
var connectorPosition = connector.data('clickStartPosition');
if ($('#ui-nodeEditor-activeWire').length) {
var wire = $('#ui-nodeEditor-activeWire');
var wirePosition = wire.data('clickStartPosition');

var position = connector.position();
var position = wire.position();
var editorPosition = $(that.element).offset();

var connectorPageX = connectorPosition.left + editorPosition.left;
var connectorPageY = connectorPosition.top + editorPosition.top;
var wirePageX = wirePosition.left + editorPosition.left;
var wirePageY = wirePosition.top + editorPosition.top;

connector.css({
wire.css({
'width': ev.pageX - editorPosition.left - position.left,
'top': connectorPosition.top,
'left': connectorPosition.left,
'height': ev.pageY - editorPosition.top - position.top,
'background-color': '#fcc'
'top': wirePosition.top,
'left': wirePosition.left,
'height': ev.pageY - editorPosition.top - position.top
//'background-color': '#fcc'
});

if (ev.pageX < connectorPageX) {
if (ev.pageX < wirePageX) {
//console.log('left of start');
connector.css({
wire.css({
'left': ev.pageX - editorPosition.left,
'width': connectorPageX - ev.pageX,
'background-color': '#cfc'
'width': wirePageX - ev.pageX
//'background-color': '#cfc'
});
wire.children().addClass('flip');
}
else {
wire.children().removeClass('flip');
}

if (ev.pageY < connectorPageY) {
if (ev.pageY < wirePageY) {
//console.log('above start');
connector.css({
wire.css({
'top': ev.pageY - editorPosition.top,
'height': connectorPageY - ev.pageY,
'background-color': '#ccf'
'height': wirePageY - ev.pageY
//'background-color': '#ccf'
});
wire.addClass('flip');
}
else {
wire.removeClass('flip');
}

}
});

this.nodeField.on('mouseup', '.ui-nodeEditor-nodeConnector', function(ev) {

if ($('#ui-nodeEditor-activeConnector').length) {
if ($('#ui-nodeEditor-activeWire').length) {
ev.stopPropagation();
console.log('making connection!');

var wire = $('#ui-nodeEditor-activeConnector');
var wire = $('#ui-nodeEditor-activeWire');
var wireOrigin = wire.data('clickStartConnector');

wire.attr('id', '');
Expand Down Expand Up @@ -353,10 +367,10 @@ $.widget("ui.nodeEditor", {
});

this.nodeField.on('mouseup', function() {
if ($('#ui-nodeEditor-activeConnector').length) {
console.log('releasing connector');
if ($('#ui-nodeEditor-activeWire').length) {
console.log('releasing wire');

$('#ui-nodeEditor-activeConnector').empty().remove();
$('#ui-nodeEditor-activeWire').empty().remove();
}
});

Expand Down
102 changes: 101 additions & 1 deletion nodeEditor-default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ http://opensource.org/licenses/mit-license.php/
border-left: solid 1px #111;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border: 1px solid white;
/*
background-color: white;
background-image: -webkit-linear-gradient(
top,
Expand All @@ -40,20 +42,40 @@ http://opensource.org/licenses/mit-license.php/
rgba(0,0,0,.2) 95%,
rgba(0,0,0,.2)
);
*/
background-color: #111;
background-image: -webkit-linear-gradient(
top,
transparent 95%,
rgba(255,255,255,.2) 95%,
rgba(255,255,255,.2)
), -webkit-linear-gradient(
left,
transparent 95%,
rgba(255,255,255,.2) 95%,
rgba(255,255,255,.2)
);
background-size: 20px 20px, 20px 20px;
height: 100%;
box-sizing: border-box;
cursor: default;
-webkit-user-select: none;
}

.ui-nodeEditor-Node {
background-color: #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
box-sizing: border-box;
border: solid 1px #222;
/*border: solid 1px #222;*/
width: 80px;
/*height: 90px;*/
margin-bottom: 10px;
cursor: default;

-moz-box-shadow: 1px 1px 9px black;
-webkit-box-shadow: 1px 1px 9px black;
box-shadow: 1px 1px 9px black;
}

.ui-nodeEditor-Menu .ui-nodeEditor-Node {
Expand All @@ -75,6 +97,7 @@ http://opensource.org/licenses/mit-license.php/
margin-bottom: 5px;
cursor: move;
-webkit-user-select: none;
border: solid 1px #eee;
}

.ui-nodeEditor-nodeInput {
Expand All @@ -101,6 +124,7 @@ http://opensource.org/licenses/mit-license.php/
box-sizing: border-box;
margin-left: 2px;
margin-right: 2px;
cursor: default;
}

.ui-nodeEditor-nodeInputLabel, .ui-nodeEditor-nodeOutputLabel {
Expand All @@ -119,3 +143,79 @@ border-width: 5px 5px 0px 0px;
border-radius: 0px 186px 0px 0px;
*/
}

/* lower right */
.ui-nodeEditor-wire > .wire1 {
position: absolute;
width: 50%;
height: 50%;
border-width: 3px 3px 0px 0px;
border-style: solid;
border-color: #fa4;
border-top-right-radius: 50%;
}

.ui-nodeEditor-wire > .wire2 {
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
border-width: 0px 0px 3px 3px;
border-style: solid;
border-color: #fa4;
border-bottom-left-radius: 50%;
}

/* upper right */
.ui-nodeEditor-wire.flip > .wire1 {
top: 50%;
left: 0;
border-width: 0px 3px 3px 0px;
border-top-right-radius: 0;
border-bottom-right-radius: 50%;
}

.ui-nodeEditor-wire.flip > .wire2 {
top: 0;
left: 50%;
border-width: 3px 0px 0px 3px;
border-bottom-left-radius: 0;
border-top-left-radius: 50%;
}

/* lower left */
.ui-nodeEditor-wire > .wire1.flip {
border-radius: 0;
border-width: 0px 3px 3px 0px;
border-bottom-right-radius: 50%;
top: 50%;
left: 0;
}

.ui-nodeEditor-wire > .wire2.flip {
border-radius: 0;
border-width: 3px 0px 0px 3px;
border-top-left-radius: 50%;
top: 0;
left: 50%;
}

/* upper left */
.ui-nodeEditor-wire.flip > .wire1.flip {
border-width: 3px 3px 0px 0px;
border-radius: 0;
border-top-right-radius: 50%;
top: 0px;
left: 0px;
}

.ui-nodeEditor-wire.flip > .wire2.flip {
border-width: 0px 0px 3px 3px;
border-radius: 0;
border-bottom-left-radius: 50%;
top: 50%;
left: 50%;
}


0 comments on commit 76a44b6

Please sign in to comment.