[Bps-public-commit] rt-extension-lifecycleui branch, master, updated. ff59436438f799b87f03ecfaa8f971b92c107ee4
Shawn Moore
shawn at bestpractical.com
Thu Sep 21 13:01:06 EDT 2017
The branch, master has been updated
via ff59436438f799b87f03ecfaa8f971b92c107ee4 (commit)
via 163b51f971cba70aaf634af2826c904e1ef29dbd (commit)
via e01c277ff137ae2986feb017f228281755cdd5cb (commit)
via 021cd936516f295478f1c1a292a4bc2e05933f3b (commit)
via 28c556546edb7560c4dfcbe27005e365d25ea80b (commit)
via 61a4300cefa487d868af3b54d35b2838881189bc (commit)
via 5a8f545e3a7519489bdd44fcbf145b84a4c3e6a3 (commit)
via 112696641c0a2243a8b1a7a8586bcb216e4b65a0 (commit)
via 1f716b486fa88de6adb08e2b998f45c5519f6ce7 (commit)
from 2e19ec3a31397c76b7034983b8d8b8ffab8fe9c4 (commit)
Summary of changes:
static/css/lifecycleui-editor.css | 4 +
static/js/lifecycleui-editor.js | 44 +++++---
static/js/lifecycleui-model.js | 6 +-
static/js/lifecycleui-viewer.js | 222 ++++++++++++++++++++++++++------------
4 files changed, 188 insertions(+), 88 deletions(-)
- Log -----------------------------------------------------------------
commit 1f716b486fa88de6adb08e2b998f45c5519f6ce7
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 15:38:38 2017 +0000
Switch random colors for new statuses to RT blue
diff --git a/static/js/lifecycleui-model.js b/static/js/lifecycleui-model.js
index c9511e9..86974b8 100644
--- a/static/js/lifecycleui-model.js
+++ b/static/js/lifecycleui-model.js
@@ -1,6 +1,5 @@
jQuery(function () {
var _ELEMENT_KEY_SEQ = 0;
- var defaultColors = d3.scaleOrdinal(d3.schemeCategory10);
function Lifecycle (name) {
this.name = name;
@@ -11,6 +10,7 @@ jQuery(function () {
this.transitions = [];
this.decorations = {};
+ this.defaultColor = '#547CCC';
this._undoState = { undoStack: [], redoStack: [] };
this._keyMap = {};
this._statusMeta = {};
@@ -78,7 +78,7 @@ jQuery(function () {
};
if (!meta.color) {
- meta.color = defaultColors(meta._key);
+ meta.color = self.defaultColor;
};
});
@@ -576,7 +576,7 @@ jQuery(function () {
x: x,
y: y
};
- item.color = defaultColors(item._key);
+ item.color = this.defaultColor;
this._statusMeta[name] = item;
this._keyMap[item._key] = item;
commit 112696641c0a2243a8b1a7a8586bcb216e4b65a0
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 15:54:09 2017 +0000
Factor out the newly-added selection items into a variable
This is necessary for the commit that follows this one, since D3 does
not like this construction…
statuses.enter().append("circle")
.attr("r", self.statusCircleRadius)
…
.transition().duration(200)
…
.merge(statuses)
.attr("cx", function (d) { return self.xScale(d.x) })
…
…because the .transition() call changes the object on which we're
chaining method calls. Instead, we have to capture the result of the
.enter().append() calls (into a variable such as "newStatuses"). Then we
can call newStatuses.transition() and newStatuses.merge() separately, so
that .merge() is called on the result of .enter().append(), not
.transition().
If D3 were to have something like a .pop() or .endTransition() similar
to jQuery's .end(), we could use that instead, but I haven't found such.
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 53af54f..9c31563 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -382,15 +382,16 @@ jQuery(function () {
.transition().duration(200)
.remove();
- rects.enter().insert("rect", ":first-child")
+ var newRects = rects.enter().insert("rect", ":first-child")
.attr("data-key", function (d) { return d._key })
.classed("text-background", true)
.on("click", function (d) {
d3.event.stopPropagation();
self.clickedDecoration(d);
})
- .call(function (rects) { self.didEnterTextDecorations(rects) })
- .merge(rects)
+ .call(function (rects) { self.didEnterTextDecorations(rects) });
+
+ newRects.merge(rects)
.classed("focus", function (d) { return self.isFocused(d) })
.each(function (d) {
var rect = d3.select(this);
@@ -417,16 +418,17 @@ jQuery(function () {
handles.exit()
.remove();
- handles.enter().append("circle")
- .classed("point-handle", true)
- .attr("r", self.pointHandleRadius)
- .call(d3.drag()
- .subject(function (d) { return { x: self.xScaleZero(d.x), y : self.yScaleZero(d.y) } })
- .on("start", function (d) { self.didBeginDrag(d, this) })
- .on("drag", function (d) { self.didDragPointHandle(d) })
- .on("end", function (d) { self.didEndDrag(d, this) })
- )
- .merge(handles)
+ var newHandles = handles.enter().append("circle")
+ .classed("point-handle", true)
+ .attr("r", self.pointHandleRadius)
+ .call(d3.drag()
+ .subject(function (d) { return { x: self.xScaleZero(d.x), y : self.yScaleZero(d.y) } })
+ .on("start", function (d) { self.didBeginDrag(d, this) })
+ .on("drag", function (d) { self.didDragPointHandle(d) })
+ .on("end", function (d) { self.didEndDrag(d, this) })
+ );
+
+ newHandles.merge(handles)
.attr("transform", function (d) {
var x = self.xScale(self.inspectorNode.x);
var y = self.yScale(self.inspectorNode.y);
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 1b60a60..00a4d9f 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -77,15 +77,16 @@ jQuery(function () {
.attr("r", self.statusCircleRadius * .8)
.remove();
- statuses.enter().append("circle")
- .attr("r", self.statusCircleRadius)
- .attr("data-key", function (d) { return d._key })
- .on("click", function (d) {
- d3.event.stopPropagation();
- self.clickedStatus(d);
- })
- .call(function (statuses) { self.didEnterStatusNodes(statuses) })
- .merge(statuses)
+ var newStatuses = statuses.enter().append("circle")
+ .attr("r", self.statusCircleRadius)
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedStatus(d);
+ })
+ .call(function (statuses) { self.didEnterStatusNodes(statuses) });
+
+ newStatuses.merge(statuses)
.attr("cx", function (d) { return self.xScale(d.x) })
.attr("cy", function (d) { return self.yScale(d.y) })
.attr("fill", function (d) { return d.color })
@@ -119,14 +120,15 @@ jQuery(function () {
.transition().duration(200)
.remove();
- labels.enter().append("text")
- .attr("data-key", function (d) { return d._key })
- .on("click", function (d) {
- d3.event.stopPropagation();
- self.clickedStatus(d);
- })
- .call(function (labels) { self.didEnterStatusLabels(labels) })
- .merge(labels)
+ var newLabels = labels.enter().append("text")
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedStatus(d);
+ })
+ .call(function (labels) { self.didEnterStatusLabels(labels) });
+
+ newLabels.merge(labels)
.attr("x", function (d) { return self.xScale(d.x) })
.attr("y", function (d) { return self.yScale(d.y) })
.attr("fill", function (d) { return d3.hsl(d.color).l > 0.35 ? '#000' : '#fff' })
@@ -155,14 +157,15 @@ jQuery(function () {
.transition().duration(200)
.remove();
- paths.enter().append("path")
- .attr("data-key", function (d) { return d._key })
- .on("click", function (d) {
- d3.event.stopPropagation();
- self.clickedTransition(d);
- })
- .call(function (paths) { self.didEnterTransitions(paths) })
- .merge(paths)
+ var newPaths = paths.enter().append("path")
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedTransition(d);
+ })
+ .call(function (paths) { self.didEnterTransitions(paths) });
+
+ newPaths.merge(paths)
.attr("d", function (d) { return self.transitionArc(d) })
.classed("dashed", function (d) { return d.style == 'dashed' })
.classed("dotted", function (d) { return d.style == 'dotted' })
@@ -199,14 +202,15 @@ jQuery(function () {
.transition().duration(200)
.remove();
- labels.enter().append("text")
- .attr("data-key", function (d) { return d._key })
- .on("click", function (d) {
- d3.event.stopPropagation();
- self.clickedDecoration(d);
- })
- .call(function (labels) { self.didEnterTextDecorations(labels) })
- .merge(labels)
+ var newLabels = labels.enter().append("text")
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedDecoration(d);
+ })
+ .call(function (labels) { self.didEnterTextDecorations(labels) });
+
+ newLabels.merge(labels)
.attr("x", function (d) { return self.xScale(d.x) })
.attr("y", function (d) { return self.yScale(d.y) })
.classed("bold", function (d) { return d.bold })
@@ -228,14 +232,15 @@ jQuery(function () {
.transition().duration(200)
.remove();
- polygons.enter().append("polygon")
- .attr("data-key", function (d) { return d._key })
- .on("click", function (d) {
- d3.event.stopPropagation();
- self.clickedDecoration(d);
- })
- .call(function (polygons) { self.didEnterPolygonDecorations(polygons) })
- .merge(polygons)
+ var newPolygons = polygons.enter().append("polygon")
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedDecoration(d);
+ })
+ .call(function (polygons) { self.didEnterPolygonDecorations(polygons) });
+
+ newPolygons.merge(polygons)
.attr("stroke", function (d) { return d.renderStroke ? d.stroke : 'none' })
.classed("dashed", function (d) { return d.strokeStyle == 'dashed' })
.classed("dotted", function (d) { return d.strokeStyle == 'dotted' })
@@ -259,15 +264,16 @@ jQuery(function () {
.transition().duration(200)
.remove();
- circles.enter().append("circle")
- .classed("decoration", true)
- .attr("data-key", function (d) { return d._key })
- .on("click", function (d) {
- d3.event.stopPropagation();
- self.clickedDecoration(d);
- })
- .call(function (circles) { self.didEnterCircleDecorations(circles) })
- .merge(circles)
+ var newCircles = circles.enter().append("circle")
+ .classed("decoration", true)
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedDecoration(d);
+ })
+ .call(function (circles) { self.didEnterCircleDecorations(circles) });
+
+ newCircles.merge(circles)
.attr("stroke", function (d) { return d.renderStroke ? d.stroke : 'none' })
.classed("dashed", function (d) { return d.strokeStyle == 'dashed' })
.classed("dotted", function (d) { return d.strokeStyle == 'dotted' })
@@ -288,14 +294,15 @@ jQuery(function () {
.transition().duration(200)
.remove();
- lines.enter().append("line")
- .attr("data-key", function (d) { return d._key })
- .on("click", function (d) {
- d3.event.stopPropagation();
- self.clickedDecoration(d);
- })
- .call(function (lines) { self.didEnterLineDecorations(lines) })
- .merge(lines)
+ var newLines = lines.enter().append("line")
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ self.clickedDecoration(d);
+ })
+ .call(function (lines) { self.didEnterLineDecorations(lines) });
+
+ newLines.merge(lines)
.classed("dashed", function (d) { return d.style == 'dashed' })
.classed("dotted", function (d) { return d.style == 'dotted' })
.attr("transform", function (d) { return "translate(" + self.xScale(d.x) + ", " + self.yScale(d.y) + ")" })
commit 5a8f545e3a7519489bdd44fcbf145b84a4c3e6a3
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 16:01:02 2017 +0000
Animate new status nodes into the scene
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 00a4d9f..8523c89 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -78,7 +78,7 @@ jQuery(function () {
.remove();
var newStatuses = statuses.enter().append("circle")
- .attr("r", self.statusCircleRadius)
+ .attr("r", initial ? self.statusCircleRadius : self.statusCircleRadius * .8)
.attr("data-key", function (d) { return d._key })
.on("click", function (d) {
d3.event.stopPropagation();
@@ -86,6 +86,11 @@ jQuery(function () {
})
.call(function (statuses) { self.didEnterStatusNodes(statuses) });
+ if (!initial) {
+ newStatuses.transition().duration(200)
+ .attr("r", self.statusCircleRadius)
+ }
+
newStatuses.merge(statuses)
.attr("cx", function (d) { return self.xScale(d.x) })
.attr("cy", function (d) { return self.yScale(d.y) })
commit 61a4300cefa487d868af3b54d35b2838881189bc
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 16:09:40 2017 +0000
Animate in new label decorations
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 9c31563..c62ff52 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -391,6 +391,13 @@ jQuery(function () {
})
.call(function (rects) { self.didEnterTextDecorations(rects) });
+ if (!initial) {
+ newRects.style("opacity", 0.15)
+ .transition().duration(200)
+ .style("opacity", 1)
+ .on("end", function () { d3.select(this).style("opacity", undefined) });
+ }
+
newRects.merge(rects)
.classed("focus", function (d) { return self.isFocused(d) })
.each(function (d) {
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 8523c89..6c3e488 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -215,6 +215,13 @@ jQuery(function () {
})
.call(function (labels) { self.didEnterTextDecorations(labels) });
+ if (!initial) {
+ newLabels.style("opacity", 0.15)
+ .transition().duration(200)
+ .style("opacity", 1)
+ .on("end", function () { d3.select(this).style("opacity", undefined) });
+ }
+
newLabels.merge(labels)
.attr("x", function (d) { return self.xScale(d.x) })
.attr("y", function (d) { return self.yScale(d.y) })
commit 28c556546edb7560c4dfcbe27005e365d25ea80b
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 16:25:00 2017 +0000
Animate in new transitions by drawing them from status to status
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 6c3e488..cc52473 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -177,6 +177,25 @@ jQuery(function () {
.classed("focus", function (d) { return self.isFocused(d) })
.classed("focus-from", function (d) { return self.isFocusedTransition(d, true) })
.classed("focus-to", function (d) { return self.isFocusedTransition(d, false) });
+
+ if (!initial) {
+ newPaths.each(function (d) {
+ var length = this.getTotalLength();
+ var path = d3.select(this);
+ path.attr("stroke-dasharray", length + " " + length)
+ .attr("stroke-dashoffset", length - self.statusCircleRadius)
+ .style("marker-end", "none")
+ .transition().duration(200).ease(d3.easeLinear)
+ .attr("stroke-dashoffset", self.statusCircleRadius)
+ .on("end", function () {
+ d3.select(this)
+ .attr("stroke-dasharray", undefined)
+ .attr("stroke-offset", undefined)
+ .style("marker-end", undefined)
+ })
+ });
+ }
+
};
Viewer.prototype._wrapTextDecoration = function (node, text) {
commit 021cd936516f295478f1c1a292a4bc2e05933f3b
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 16:31:47 2017 +0000
Add animationFactor debug aid to slow down JS animations
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index c62ff52..25aad9a 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -379,7 +379,7 @@ jQuery(function () {
rects.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.remove();
var newRects = rects.enter().insert("rect", ":first-child")
@@ -393,7 +393,7 @@ jQuery(function () {
if (!initial) {
newRects.style("opacity", 0.15)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.style("opacity", 1)
.on("end", function () { d3.select(this).style("opacity", undefined) });
}
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index cc52473..1dc3b1a 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -5,6 +5,7 @@ jQuery(function () {
this.statusCircleRadius = 35;
this.gridSize = 10;
this.padding = this.statusCircleRadius * 2;
+ this.animationFactor = 1; // bump this to 10 debug JS animations
};
Viewer.prototype.createScale = function (size, padding) {
@@ -39,7 +40,7 @@ jQuery(function () {
Viewer.prototype.zoomScale = function (scaleBy, animated) {
if (animated) {
this.svg.transition()
- .duration(350)
+ .duration(350*this.animationFactor)
.call(this._zoom.scaleBy, scaleBy);
}
else {
@@ -50,7 +51,7 @@ jQuery(function () {
Viewer.prototype.resetZoom = function (animated) {
if (animated) {
this.svg.transition()
- .duration(750)
+ .duration(750*this.animationFactor)
.call(this._zoom.transform, this._zoomIdentity);
}
else {
@@ -73,7 +74,7 @@ jQuery(function () {
statuses.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.attr("r", self.statusCircleRadius * .8)
.remove();
@@ -87,7 +88,7 @@ jQuery(function () {
.call(function (statuses) { self.didEnterStatusNodes(statuses) });
if (!initial) {
- newStatuses.transition().duration(200)
+ newStatuses.transition().duration(200*self.animationFactor)
.attr("r", self.statusCircleRadius)
}
@@ -122,7 +123,7 @@ jQuery(function () {
labels.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.remove();
var newLabels = labels.enter().append("text")
@@ -159,7 +160,7 @@ jQuery(function () {
paths.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.remove();
var newPaths = paths.enter().append("path")
@@ -185,7 +186,7 @@ jQuery(function () {
path.attr("stroke-dasharray", length + " " + length)
.attr("stroke-dashoffset", length - self.statusCircleRadius)
.style("marker-end", "none")
- .transition().duration(200).ease(d3.easeLinear)
+ .transition().duration(200*self.animationFactor).ease(d3.easeLinear)
.attr("stroke-dashoffset", self.statusCircleRadius)
.on("end", function () {
d3.select(this)
@@ -223,7 +224,7 @@ jQuery(function () {
labels.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.remove();
var newLabels = labels.enter().append("text")
@@ -236,7 +237,7 @@ jQuery(function () {
if (!initial) {
newLabels.style("opacity", 0.15)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.style("opacity", 1)
.on("end", function () { d3.select(this).style("opacity", undefined) });
}
@@ -260,7 +261,7 @@ jQuery(function () {
polygons.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.remove();
var newPolygons = polygons.enter().append("polygon")
@@ -292,7 +293,7 @@ jQuery(function () {
circles.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.remove();
var newCircles = circles.enter().append("circle")
@@ -322,7 +323,7 @@ jQuery(function () {
lines.exit()
.classed("removing", true)
- .transition().duration(200)
+ .transition().duration(200*self.animationFactor)
.remove();
var newLines = lines.enter().append("line")
commit e01c277ff137ae2986feb017f228281755cdd5cb
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 16:48:56 2017 +0000
Animate in polygons with opacity
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 25aad9a..63348fa 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -435,6 +435,13 @@ jQuery(function () {
.on("end", function (d) { self.didEndDrag(d, this) })
);
+ if (!initial) {
+ newHandles.style("opacity", 0.15)
+ .transition().duration(200*self.animationFactor)
+ .style("opacity", 1)
+ .on("end", function () { d3.select(this).style("opacity", undefined) });
+ }
+
newHandles.merge(handles)
.attr("transform", function (d) {
var x = self.xScale(self.inspectorNode.x);
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 1dc3b1a..67e1944 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -272,6 +272,13 @@ jQuery(function () {
})
.call(function (polygons) { self.didEnterPolygonDecorations(polygons) });
+ if (!initial) {
+ newPolygons.style("opacity", 0.15)
+ .transition().duration(200*self.animationFactor)
+ .style("opacity", 1)
+ .on("end", function () { d3.select(this).style("opacity", undefined) });
+ }
+
newPolygons.merge(polygons)
.attr("stroke", function (d) { return d.renderStroke ? d.stroke : 'none' })
.classed("dashed", function (d) { return d.strokeStyle == 'dashed' })
@@ -305,6 +312,13 @@ jQuery(function () {
})
.call(function (circles) { self.didEnterCircleDecorations(circles) });
+ if (!initial) {
+ newCircles.style("opacity", 0.15)
+ .transition().duration(200*self.animationFactor)
+ .style("opacity", 1)
+ .on("end", function () { d3.select(this).style("opacity", undefined) });
+ }
+
newCircles.merge(circles)
.attr("stroke", function (d) { return d.renderStroke ? d.stroke : 'none' })
.classed("dashed", function (d) { return d.strokeStyle == 'dashed' })
commit 163b51f971cba70aaf634af2826c904e1ef29dbd
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 16:49:03 2017 +0000
Animate in new line decorations by drawing them like transitions
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 67e1944..50c5113 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -348,6 +348,26 @@ jQuery(function () {
})
.call(function (lines) { self.didEnterLineDecorations(lines) });
+ if (!initial) {
+ newLines.each(function (d) {
+ var length = Math.sqrt((d.points[1].x-d.points[0].x)**2 + (d.points[1].y-d.points[0].y)**2);
+ var path = d3.select(this);
+ path.attr("stroke-dasharray", length + " " + length)
+ .attr("stroke-dashoffset", length)
+ .style("marker-start", "none")
+ .style("marker-end", "none")
+ .transition().duration(200*self.animationFactor).ease(d3.easeLinear)
+ .attr("stroke-dashoffset", 0)
+ .on("end", function () {
+ d3.select(this)
+ .attr("stroke-dasharray", undefined)
+ .attr("stroke-offset", undefined)
+ .style("marker-start", undefined)
+ .style("marker-end", undefined)
+ })
+ });
+ }
+
newLines.merge(lines)
.classed("dashed", function (d) { return d.style == 'dashed' })
.classed("dotted", function (d) { return d.style == 'dotted' })
commit ff59436438f799b87f03ecfaa8f971b92c107ee4
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Thu Sep 21 16:59:37 2017 +0000
Animate removing transitions
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index 0df6e6c..57c35b7 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -47,6 +47,10 @@
opacity: 0 !important;
}
+.lifecycle-ui .transitions path.removing {
+ opacity: 1 !important;
+}
+
.lifecycle-ui .has-focus .point-handle {
stroke: black;
fill: steelblue;
diff --git a/static/js/lifecycleui-viewer.js b/static/js/lifecycleui-viewer.js
index 50c5113..c57b755 100644
--- a/static/js/lifecycleui-viewer.js
+++ b/static/js/lifecycleui-viewer.js
@@ -158,10 +158,17 @@ jQuery(function () {
var paths = self.transitionContainer.selectAll("path")
.data(self.lifecycle.transitions, function (d) { return d._key });
- paths.exit()
- .classed("removing", true)
- .transition().duration(200*self.animationFactor)
- .remove();
+ paths.exit().classed("removing", true)
+ .each(function (d) {
+ var length = this.getTotalLength();
+ var path = d3.select(this);
+ path.attr("stroke-dasharray", length + " " + length)
+ .attr("stroke-dashoffset", self.statusCircleRadius)
+ .style("marker-end", "none")
+ .transition().duration(200*self.animationFactor).ease(d3.easeLinear)
+ .attr("stroke-dashoffset", length - self.statusCircleRadius)
+ .remove();
+ });
var newPaths = paths.enter().append("path")
.attr("data-key", function (d) { return d._key })
-----------------------------------------------------------------------
More information about the Bps-public-commit
mailing list