From da7640ef265a6d33def7b34f9ed8e4d3e3325b51 Mon Sep 17 00:00:00 2001 From: Laurent Hausermann Date: Tue, 9 Dec 2014 16:40:24 +0100 Subject: [PATCH 1/4] Make heartbeat effect smoother --- themes/the-graph-light.css | 90 +++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/themes/the-graph-light.css b/themes/the-graph-light.css index af09de1c..f0b4f605 100644 --- a/themes/the-graph-light.css +++ b/themes/the-graph-light.css @@ -185,75 +185,75 @@ } @-webkit-keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 4px; } } @-moz-keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 4px; } } @-o-keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 10px; } } .the-graph-light .edge.animated .edge-bg { stroke-linecap: round; - stroke-width: 16px; + stroke-width: 4px; stroke: #808080; - -webkit-animation: heartbeats 1s linear infinite; - -moz-animation: heartbeats 1s linear infinite; - -o-animation: heartbeats 1s linear infinite; - animation: heartbeats 1s linear infinite; + -webkit-animation: heartbeats 4s linear infinite; + -moz-animation: heartbeats 4s linear infinite; + -o-animation: heartbeats 4s linear infinite; + animation: heartbeats 4s linear infinite; } .the-graph-light text { font-family: "SourceCodePro", "Source Code Pro", Helvetica, Arial, sans-serif; @@ -752,106 +752,106 @@ } @-moz-keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 4px; } } @-webkit-keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 4px; } } @-o-keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 4px; } } @-ms-keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 4px; } } @keyframes heartbeats { 0% { - stroke-width: 16px; + stroke-width: 4px; } 10% { - stroke-width: 24px; + stroke-width: 10px; } 30% { - stroke-width: 16px; + stroke-width: 4px; } 40% { - stroke-width: 24px; + stroke-width: 10px; } 60% { - stroke-width: 16px; + stroke-width: 4px; } } From f22c4df2ba270c10140d494956b1b32f8b206c97 Mon Sep 17 00:00:00 2001 From: Laurent Hausermann Date: Wed, 10 Dec 2014 11:47:01 +0100 Subject: [PATCH 2/4] Fire a "nodes" event when the selected node change When a external program change the SelectedNode property, we should fire the "nodes" event to permit others watches to be notified. --- the-graph/the-graph.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/the-graph/the-graph.html b/the-graph/the-graph.html index 06193dba..c26c4527 100644 --- a/the-graph/the-graph.html +++ b/the-graph/the-graph.html @@ -161,6 +161,7 @@ selectedNodesHash[this.selectedNodes[i].id] = true; } this.selectedNodesHash = selectedNodesHash; + this.fire('nodes', this.selectedNodes); }, selectedNodesHashChanged: function () { if (!this.graphView) { return; } @@ -173,6 +174,7 @@ selectedEdgesChanged: function () { if (!this.graphView) { return; } this.graphView.setSelectedEdges(this.selectedEdges); + this.fire('edges', this.selectedEdges); }, animatedEdgesChanged: function () { if (!this.graphView) { return; } From 1e7769fe816c45f1dbd8e5fb175219677325511f Mon Sep 17 00:00:00 2001 From: Laurent Hausermann Date: Wed, 31 Dec 2014 16:00:04 +0100 Subject: [PATCH 3/4] Add className to iconSVG ('icon node-icon') --- the-graph/the-graph.js | 1 + 1 file changed, 1 insertion(+) diff --git a/the-graph/the-graph.js b/the-graph/the-graph.js index d56429bc..774d0081 100644 --- a/the-graph/the-graph.js +++ b/the-graph/the-graph.js @@ -290,6 +290,7 @@ html = html +'/>'; return React.DOM.g({ + className: this.props.className, dangerouslySetInnerHTML:{__html: html} }); } From 6cedd5d7bd7556b6951cfa5f9b0faddf5352c0f3 Mon Sep 17 00:00:00 2001 From: Laurent Hausermann Date: Wed, 31 Dec 2014 16:17:31 +0100 Subject: [PATCH 4/4] Finish heartbeat effect cleaning for "animated edges" --- themes/default/the-graph.styl | 50 +++++++++---------- themes/the-graph-dark.css | 90 +++++++++++++++++------------------ themes/the-graph-light.css | 82 +++++++++++++++---------------- 3 files changed, 111 insertions(+), 111 deletions(-) diff --git a/themes/default/the-graph.styl b/themes/default/the-graph.styl index 5b666eea..8307089d 100644 --- a/themes/default/the-graph.styl +++ b/themes/default/the-graph.styl @@ -206,42 +206,42 @@ path { /* marching ants for animated edges */ @-webkit-keyframes heartbeats { - 0% { stroke-width: (var-edge-width * 4); } - 10% { stroke-width: (var-edge-width * 6); } - 30% { stroke-width: (var-edge-width * 4); } - 40% { stroke-width: (var-edge-width * 6); } - 60% { stroke-width: (var-edge-width * 4); } + 0% { stroke-width: (var-edge-width * 2); } + 10% { stroke-width: (var-edge-width * 4); } + 30% { stroke-width: (var-edge-width * 2); } + 40% { stroke-width: (var-edge-width * 4); } + 60% { stroke-width: (var-edge-width * 2); } } @-moz-keyframes heartbeats { - 0% { stroke-width: (var-edge-width * 4); } - 10% { stroke-width: (var-edge-width * 6); } - 30% { stroke-width: (var-edge-width * 4); } - 40% { stroke-width: (var-edge-width * 6); } - 60% { stroke-width: (var-edge-width * 4); } + 0% { stroke-width: (var-edge-width * 2); } + 10% { stroke-width: (var-edge-width * 4); } + 30% { stroke-width: (var-edge-width * 2); } + 40% { stroke-width: (var-edge-width * 4); } + 60% { stroke-width: (var-edge-width * 2); } } @-o-keyframes heartbeats { - 0% { stroke-width: (var-edge-width * 4); } - 10% { stroke-width: (var-edge-width * 6); } - 30% { stroke-width: (var-edge-width * 4); } - 40% { stroke-width: (var-edge-width * 6); } - 60% { stroke-width: (var-edge-width * 4); } + 0% { stroke-width: (var-edge-width * 2); } + 10% { stroke-width: (var-edge-width * 4); } + 30% { stroke-width: (var-edge-width * 2); } + 40% { stroke-width: (var-edge-width * 4); } + 60% { stroke-width: (var-edge-width * 2); } } @keyframes heartbeats { - 0% { stroke-width: (var-edge-width * 4); } - 10% { stroke-width: (var-edge-width * 6); } - 30% { stroke-width: (var-edge-width * 4); } - 40% { stroke-width: (var-edge-width * 6); } - 60% { stroke-width: (var-edge-width * 4); } + 0% { stroke-width: (var-edge-width * 2); } + 10% { stroke-width: (var-edge-width * 4); } + 30% { stroke-width: (var-edge-width * 2); } + 40% { stroke-width: (var-edge-width * 4); } + 60% { stroke-width: (var-edge-width * 2); } } .edge.animated .edge-bg { stroke-linecap: round; - stroke-width: (var-edge-width * 4); + stroke-width: (var-edge-width * 2); stroke: var-selection-box-border; - -webkit-animation: heartbeats 1s linear infinite; - -moz-animation: heartbeats 1s linear infinite; - -o-animation: heartbeats 1s linear infinite; - animation: heartbeats 1s linear infinite; + -webkit-animation: heartbeats 4s linear infinite; + -moz-animation: heartbeats 4s linear infinite; + -o-animation: heartbeats 4s linear infinite; + animation: heartbeats 4s linear infinite; } diff --git a/themes/the-graph-dark.css b/themes/the-graph-dark.css index 556987cb..8c09815d 100644 --- a/themes/the-graph-dark.css +++ b/themes/the-graph-dark.css @@ -185,75 +185,75 @@ } @-webkit-keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } @-moz-keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } @-o-keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } .the-graph-dark .edge.animated .edge-bg { stroke-linecap: round; - stroke-width: 12px; + stroke-width: 6px; stroke: #e6e6e6; - -webkit-animation: heartbeats 1s linear infinite; - -moz-animation: heartbeats 1s linear infinite; - -o-animation: heartbeats 1s linear infinite; - animation: heartbeats 1s linear infinite; + -webkit-animation: heartbeats 4s linear infinite; + -moz-animation: heartbeats 4s linear infinite; + -o-animation: heartbeats 4s linear infinite; + animation: heartbeats 4s linear infinite; } .the-graph-dark text { font-family: "SourceCodePro", "Source Code Pro", Helvetica, Arial, sans-serif; @@ -752,106 +752,106 @@ } @-moz-keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } @-webkit-keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } @-o-keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } @-ms-keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } @keyframes heartbeats { 0% { - stroke-width: 12px; + stroke-width: 6px; } 10% { - stroke-width: 18px; + stroke-width: 12px; } 30% { - stroke-width: 12px; + stroke-width: 6px; } 40% { - stroke-width: 18px; + stroke-width: 12px; } 60% { - stroke-width: 12px; + stroke-width: 6px; } } diff --git a/themes/the-graph-light.css b/themes/the-graph-light.css index f0b4f605..8864ca8d 100644 --- a/themes/the-graph-light.css +++ b/themes/the-graph-light.css @@ -185,70 +185,70 @@ } @-webkit-keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 4px; + stroke-width: 8px; } } @-moz-keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 4px; + stroke-width: 8px; } } @-o-keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 10px; + stroke-width: 8px; } } .the-graph-light .edge.animated .edge-bg { stroke-linecap: round; - stroke-width: 4px; + stroke-width: 8px; stroke: #808080; -webkit-animation: heartbeats 4s linear infinite; -moz-animation: heartbeats 4s linear infinite; @@ -752,106 +752,106 @@ } @-moz-keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 4px; + stroke-width: 8px; } } @-webkit-keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 4px; + stroke-width: 8px; } } @-o-keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 4px; + stroke-width: 8px; } } @-ms-keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 4px; + stroke-width: 8px; } } @keyframes heartbeats { 0% { - stroke-width: 4px; + stroke-width: 8px; } 10% { - stroke-width: 10px; + stroke-width: 16px; } 30% { - stroke-width: 4px; + stroke-width: 8px; } 40% { - stroke-width: 10px; + stroke-width: 16px; } 60% { - stroke-width: 4px; + stroke-width: 8px; } }