[Bps-public-commit] rt-extension-lifecycleui branch, master, updated. e0d6f9d71579551dc89a37b69d499be7ff85fbd5
Shawn Moore
shawn at bestpractical.com
Mon Sep 25 12:16:46 EDT 2017
The branch, master has been updated
via e0d6f9d71579551dc89a37b69d499be7ff85fbd5 (commit)
via 8871c5154503d1cd9ddef6379d68052d43780416 (commit)
via 054d77f22c13aba70aebbb96793e5480ea783657 (commit)
via 228960e43ad16b6fc7d45de83d7ee6895d738991 (commit)
from fbe75c4506224d65d69b175d3ce1bd595fcdcd12 (commit)
Summary of changes:
html/Elements/LifecycleGraphExtras | 2 +-
static/css/lifecycleui-editor.css | 6 +-----
static/js/lifecycleui-viewer.js | 41 ++++++++++++++++++++++++++++----------
3 files changed, 33 insertions(+), 16 deletions(-)
- Log -----------------------------------------------------------------
commit 228960e43ad16b6fc7d45de83d7ee6895d738991
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Mon Sep 25 14:46:29 2017 +0000
Improve animation for removing transitions
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index 7126115..4cf2c54 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -44,11 +44,7 @@
}
.lifecycle-ui .removing {
- opacity: 0 !important;
-}
-
-.lifecycle-ui .transitions path.removing {
- opacity: 1 !important;
+ opacity: 0;
}
.lifecycle-ui .has-focus .point-handle {
commit 054d77f22c13aba70aebbb96793e5480ea783657
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Mon Sep 25 15:15:31 2017 +0000
Handle transition arrows as if they ended at circle edge
They currently don't, but once they do we'll need to come back and make
this cleanup anyway
diff --git a/html/Elements/LifecycleGraphExtras b/html/Elements/LifecycleGraphExtras
index ad954b0..836e6c1 100644
--- a/html/Elements/LifecycleGraphExtras
+++ b/html/Elements/LifecycleGraphExtras
@@ -1,5 +1,5 @@
<defs>
- <marker id="transition_arrowhead" markerHeight=5 markerWidth=5 markerUnits="strokeWidth" orient="auto" refX=40 refY=0 viewBox="-5 -5 10 10">
+ <marker id="transition_arrowhead" markerHeight=5 markerWidth=5 markerUnits="strokeWidth" orient="auto" refX=0 refY=0 viewBox="-5 -5 10 10">
<path d="M 0,0 m -5,-5 L 5,0 L -5,5 Z" fill="black" />
</marker>
<marker id="line_marker_arrowhead" markerHeight=5 markerWidth=5 markerUnits="strokeWidth" orient="auto" refX=0 refY=0 viewBox="-5 -5 10 10">
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index a0751a2..7b095fd 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -149,10 +149,10 @@ jQuery(function () {
var length = this.getTotalLength();
var path = d3.select(this);
path.attr("stroke-dasharray", length + " " + length)
- .attr("stroke-dashoffset", self.statusCircleRadius)
+ .attr("stroke-dashoffset", 0)
.style("marker-end", "none")
.transition().duration(200*self.animationFactor).ease(d3.easeLinear)
- .attr("stroke-dashoffset", length - self.statusCircleRadius)
+ .attr("stroke-dashoffset", length)
.remove();
});
@@ -177,10 +177,10 @@ jQuery(function () {
var length = this.getTotalLength();
var path = d3.select(this);
path.attr("stroke-dasharray", length + " " + length)
- .attr("stroke-dashoffset", length - self.statusCircleRadius)
+ .attr("stroke-dashoffset", length)
.style("marker-end", "none")
.transition().duration(200*self.animationFactor).ease(d3.easeLinear)
- .attr("stroke-dashoffset", self.statusCircleRadius)
+ .attr("stroke-dashoffset", 0)
.on("end", function () {
d3.select(this)
.attr("stroke-dasharray", undefined)
commit 8871c5154503d1cd9ddef6379d68052d43780416
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Mon Sep 25 15:54:59 2017 +0000
Implement trigonometry to draw transitions from circle edge to circle edge
This removes a couple of small rendering imperfections, such as any
transparency removing the illusion of the transition being rendered
correctly.
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 7b095fd..6ea3a19 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -3,6 +3,7 @@ jQuery(function () {
this.width = 809;
this.height = 500;
this.statusCircleRadius = 35;
+ this.statusCircleRadiusFudge = 4; // required to give room for the arrowhead
this.gridSize = 10;
this.padding = this.statusCircleRadius * 2;
this.animationFactor = 1; // bump this to 10 debug JS animations
@@ -131,12 +132,32 @@ jQuery(function () {
};
Viewer.prototype.transitionArc = function (d) {
- var from = this.lifecycle.statusObjectForName(d.from);
- var to = this.lifecycle.statusObjectForName(d.to);
- var dx = this.xScale(to.x - from.x),
- dy = this.yScale(to.y - from.y),
- dr = Math.abs(dx*6) + Math.abs(dy*6);
- return "M" + this.xScale(from.x) + "," + this.yScale(from.y) + "A" + dr + "," + dr + " 0 0,1 " + this.xScale(to.x) + "," + this.yScale(to.y);
+ // c* variables are circle centers
+ // a* variables are for the arc path which is from circle edge to circle edge
+ var from = this.lifecycle.statusObjectForName(d.from),
+ to = this.lifecycle.statusObjectForName(d.to),
+ cx0 = this.xScale(from.x),
+ cx1 = this.xScale(to.x),
+ cy0 = this.yScale(from.y),
+ cy1 = this.yScale(to.y),
+ cdx = cx1 - cx0,
+ cdy = cy1 - cy0;
+
+ // the circles on top of each other would calculate atan2(0,0) which is
+ // undefined and a little nonsensical
+ if (cdx == 0 && cdy == 0) {
+ return null;
+ }
+
+ var theta = Math.atan2(cdy, cdx),
+ r = this.statusCircleRadius,
+ ax0 = cx0 + r * Math.cos(theta),
+ ay0 = cy0 + r * Math.sin(theta),
+ ax1 = cx1 - (r + this.statusCircleRadiusFudge) * Math.cos(theta),
+ ay1 = cy1 - (r + this.statusCircleRadiusFudge) * Math.sin(theta),
+ dr = Math.abs((ax1-ax0)*4) + Math.abs((ay1-ay0)*4);
+
+ return "M" + ax0 + "," + ay0 + " A" + dr + "," + dr + " 0 0,1 " + ax1 + "," + ay1;
};
Viewer.prototype.renderTransitions = function (initial) {
commit e0d6f9d71579551dc89a37b69d499be7ff85fbd5
Merge: 228960e 8871c51
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Mon Sep 25 15:57:01 2017 +0000
Merge branch 'trig'
-----------------------------------------------------------------------
More information about the Bps-public-commit
mailing list