[Bps-public-commit] rt-extension-lifecycleui branch, master, updated. cb28ed8d02640a281bbc0cf327da110b019f7e79
Shawn Moore
shawn at bestpractical.com
Tue Aug 29 15:46:09 EDT 2017
The branch, master has been updated
via cb28ed8d02640a281bbc0cf327da110b019f7e79 (commit)
via c4095defe9a5ecfd628aaa08ba34b88359a9a3d6 (commit)
via 94da4e603ff3f59fbbbd0ca3e9ec4e3472c962ec (commit)
via 42605cb719cfa373d517dda1e4350dbc649044cf (commit)
via d6e2606e896245f02732d08515b3bcf9450b8db6 (commit)
via 10ff392f41217675bf8714bcdbf8e10689915644 (commit)
from 9deb6bd86fa7462b1d70ed0d95496a46ae7503c6 (commit)
Summary of changes:
static/css/lifecycleui-display.css | 39 ++++++++++++++++
static/js/lifecycleui-editor.js | 96 ++++++++++++++++++++++++++++++++++----
2 files changed, 127 insertions(+), 8 deletions(-)
- Log -----------------------------------------------------------------
commit 10ff392f41217675bf8714bcdbf8e10689915644
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 18:30:38 2017 +0000
Add transitions
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 01b8b24..004c253 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -7,6 +7,11 @@
stroke-width: 2px;
}
+.lifecycle-ui line {
+ stroke: black;
+ stroke-width: 1px;
+}
+
.lifecycle-ui text {
cursor: default;
-webkit-user-select: none;
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 884e7b3..57349ba 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -40,6 +40,14 @@ jQuery(function () {
// actions
// transitions
+ jQuery.each(state.transitions, function (i, transition) {
+ if (transition.from == oldValue) {
+ transition.from = newValue;
+ }
+ if (transition.to == oldValue) {
+ transition.to = newValue;
+ }
+ });
// rights
};
@@ -62,6 +70,12 @@ jQuery(function () {
// actions
// transitions
+ state.transitions = jQuery.grep(state.transitions, function (transition) {
+ if (transition.from == statusName || transition.to == statusName) {
+ return false;
+ }
+ return true;
+ });
// rights
};
@@ -86,7 +100,7 @@ jQuery(function () {
return {
statuses: [],
defaults: {},
- transitions: {},
+ transitions: [],
rights: {},
actions: [],
@@ -130,7 +144,20 @@ jQuery(function () {
}
if (config.transitions) {
- state.transitions = config.transitions;
+ jQuery.each(config.transitions, function (fromStatus, toList) {
+ if (fromStatus == "") {
+ }
+ else {
+ jQuery.each(toList, function (i, toStatus) {
+ var transition = {
+ _key : _STATUS_KEY_SEQ++,
+ from : fromStatus,
+ to : toStatus
+ };
+ state.transitions.push(transition);
+ });
+ }
+ });
}
if (config.rights) {
@@ -160,6 +187,17 @@ jQuery(function () {
config[statusType].push(statusName);
});
+ var transitions = {};
+ jQuery.each(state.transitions, function (i, transition) {
+ var from = transition.from;
+ var to = transition.to;
+ if (!transitions[from]) {
+ transitions[from] = [];
+ }
+ transitions[from].push(to);
+ config.transitions = transitions;
+ });
+
return config;
};
@@ -323,7 +361,27 @@ jQuery(function () {
.text(function (d) { return d.name }).each(truncateLabel)
};
+ var refreshTransitions = function () {
+ var lines = svg.selectAll("line")
+ .data(state.transitions, function (d) { return d._key });
+
+ lines.exit()
+ .transition()
+ .style("opacity", 1e-6)
+ .remove();
+
+ lines.enter().append("line")
+ .merge(lines)
+ .attr("x1", function (d) { return xScale(state.statusMeta[d.from].x) })
+ .attr("y1", function (d) { return yScale(state.statusMeta[d.from].y) })
+ .attr("x2", function (d) { return xScale(state.statusMeta[d.to].x) })
+ .attr("y2", function (d) { return yScale(state.statusMeta[d.to].y) })
+ };
+
+console.log(state.transitions);
+
var refreshDisplay = function () {
+ refreshTransitions();
refreshStatusNodes();
refreshStatusLabels();
};
commit d6e2606e896245f02732d08515b3bcf9450b8db6
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 18:34:36 2017 +0000
Move text properties from js to css
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 004c253..3dd883f 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -13,6 +13,9 @@
}
.lifecycle-ui text {
+ text-anchor: middle;
+ alignment-baseline: middle;
+
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 57349ba..212b90c 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -348,8 +348,6 @@ jQuery(function () {
.remove();
labels.enter().append("text")
- .attr("text-anchor", "middle")
- .attr("alignment-baseline", "middle")
.on("click", function (d) {
d3.event.stopPropagation();
selectStatus(d.name);
commit 42605cb719cfa373d517dda1e4350dbc649044cf
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 18:43:58 2017 +0000
Add arrowhead marker to lines
The refX change has the arrow stops just short at the edge of each
status node circle, rather than being obscured in the center, rendered
below the circle itself
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 3dd883f..0ee8fae 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -9,7 +9,9 @@
.lifecycle-ui line {
stroke: black;
- stroke-width: 1px;
+ stroke-width: 2px;
+ opacity: .15;
+ marker-end: url(#marker_arrowhead);
}
.lifecycle-ui text {
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 212b90c..c061a3a 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -88,7 +88,7 @@ jQuery(function () {
.attr('markerWidth', 5)
.attr('markerUnits', 'strokeWidth')
.attr('orient', 'auto')
- .attr('refX', 0)
+ .attr('refX', STATUS_CIRCLE_RADIUS + 5)
.attr('refY', 0)
.attr('viewBox', '-5 -5 10 10')
.append('path')
commit 94da4e603ff3f59fbbbd0ca3e9ec4e3472c962ec
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 19:17:37 2017 +0000
Switch transitions from lines to slightly curved arcs
That way it's much easier to distinguish bidirectional transitions
The formula for dr:
Math.abs(dx*6) + Math.abs(dy*6)
was chosen by experimentation. The usual formula is:
Math.sqrt(dx * dx + dy * dy)
which produces way-too-curved lines.
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 0ee8fae..a0543d9 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -7,9 +7,10 @@
stroke-width: 2px;
}
-.lifecycle-ui line {
+.lifecycle-ui .transitions path {
stroke: black;
stroke-width: 2px;
+ fill: none;
opacity: .15;
marker-end: url(#marker_arrowhead);
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index c061a3a..f9ba2f5 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -216,6 +216,8 @@ jQuery(function () {
var svg = d3.select(node)
.select('svg');
+ var transitionContainer = svg.append('g').classed('transitions', true);
+
var width = svg.node().getBoundingClientRect().width;
var height = svg.node().getBoundingClientRect().height;
@@ -359,21 +361,27 @@ jQuery(function () {
.text(function (d) { return d.name }).each(truncateLabel)
};
+ var linkArc = function (d) {
+ var from = state.statusMeta[d.from];
+ var to = state.statusMeta[d.to];
+ var dx = xScale(to.x - from.x),
+ dy = yScale(to.y - from.y),
+ dr = Math.abs(dx*6) + Math.abs(dy*6);
+ return "M" + xScale(from.x) + "," + yScale(from.y) + "A" + dr + "," + dr + " 0 0,1 " + xScale(to.x) + "," + yScale(to.y);
+ };
+
var refreshTransitions = function () {
- var lines = svg.selectAll("line")
+ var paths = transitionContainer.selectAll("path")
.data(state.transitions, function (d) { return d._key });
- lines.exit()
+ paths.exit()
.transition()
.style("opacity", 1e-6)
.remove();
- lines.enter().append("line")
- .merge(lines)
- .attr("x1", function (d) { return xScale(state.statusMeta[d.from].x) })
- .attr("y1", function (d) { return yScale(state.statusMeta[d.from].y) })
- .attr("x2", function (d) { return xScale(state.statusMeta[d.to].x) })
- .attr("y2", function (d) { return yScale(state.statusMeta[d.to].y) })
+ paths.enter().append("path")
+ .merge(paths)
+ .attr("d", linkArc);
};
console.log(state.transitions);
commit c4095defe9a5ecfd628aaa08ba34b88359a9a3d6
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 19:38:56 2017 +0000
When a status is selected, focus on the valid transitions
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index a0543d9..598c5eb 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -5,6 +5,24 @@
.lifecycle-ui circle {
stroke: black;
stroke-width: 2px;
+ transition: stroke-width .2s;
+ transition: opacity .2s;
+}
+
+.lifecycle-ui text {
+ transition: opacity .2s;
+}
+
+.lifecycle-ui .selection circle,
+.lifecycle-ui .selection text {
+ opacity: 0.25;
+}
+
+.lifecycle-ui .selection circle.reachable,
+.lifecycle-ui .selection circle.selected,
+.lifecycle-ui .selection text.reachable,
+.lifecycle-ui .selection text.selected {
+ opacity: 1;
}
.lifecycle-ui .transitions path {
@@ -13,6 +31,16 @@
fill: none;
opacity: .15;
marker-end: url(#marker_arrowhead);
+
+ transition: opacity .2s;
+}
+
+.lifecycle-ui .selection .transitions path {
+ opacity: 0;
+}
+
+.lifecycle-ui .selection .transitions path.selected {
+ opacity: 1;
}
.lifecycle-ui text {
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index f9ba2f5..132e7b0 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -296,14 +296,27 @@ jQuery(function () {
var deselectAll = function () {
setInspectorContent('canvas');
+ svg.classed('selection', false);
svg.selectAll('.selected').classed('selected', false);
+ svg.selectAll('.reachable').classed('reachable', false);
};
var selectStatus = function (name) {
var d = state.statusMeta[name];
setInspectorContent('status', d);
+
svg.selectAll('.selected').classed('selected', false);
- svg.select('circle[data-name="'+name+'"]').classed('selected', true);
+ svg.selectAll('.reachable').classed('reachable', false);
+
+ svg.classed('selection', true);
+ svg.selectAll('circle[data-name="'+name+'"], text[data-name="'+name+'"]').classed('selected', true);
+ transitionContainer.selectAll('path[data-from="'+name+'"]').classed('selected', true);
+
+ jQuery.each(state.transitions, function (i, transition) {
+ if (transition.from == name) {
+ svg.selectAll('circle[data-name="'+transition.to+'"], text[data-name="'+transition.to+'"]').classed('reachable', true);
+ }
+ });
};
var refreshStatusNodes = function () {
@@ -358,6 +371,7 @@ jQuery(function () {
.attr("x", function (d) { return xScale(d.x) })
.attr("y", function (d) { return yScale(d.y) })
.attr("fill", function (d) { return d3.hsl(d.color).l > 0.35 ? '#000' : '#fff' })
+ .attr("data-name", function (d) { return d.name })
.text(function (d) { return d.name }).each(truncateLabel)
};
@@ -381,7 +395,9 @@ jQuery(function () {
paths.enter().append("path")
.merge(paths)
- .attr("d", linkArc);
+ .attr("d", linkArc)
+ .attr("data-from", function (d) { return d.from })
+ .attr("data-to", function (d) { return d.to })
};
console.log(state.transitions);
commit cb28ed8d02640a281bbc0cf327da110b019f7e79
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Tue Aug 29 19:40:16 2017 +0000
Generalize STATUS_KEY_SEQ since it's for all nodes
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 132e7b0..5f3343f 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -1,7 +1,7 @@
jQuery(function () {
var STATUS_CIRCLE_RADIUS = 35;
- var _STATUS_KEY_SEQ = 0;
+ var _ELEMENT_KEY_SEQ = 0;
var defaultColors = d3.scaleOrdinal(d3.schemeCategory10);
@@ -116,7 +116,7 @@ jQuery(function () {
state.statuses = state.statuses.concat(config[type]);
jQuery.each(config[type], function (j, statusName) {
state.statusMeta[statusName] = {
- _key: _STATUS_KEY_SEQ++,
+ _key: _ELEMENT_KEY_SEQ++,
name: statusName,
type: type
};
@@ -150,7 +150,7 @@ jQuery(function () {
else {
jQuery.each(toList, function (i, toStatus) {
var transition = {
- _key : _STATUS_KEY_SEQ++,
+ _key : _ELEMENT_KEY_SEQ++,
from : fromStatus,
to : toStatus
};
-----------------------------------------------------------------------
More information about the Bps-public-commit
mailing list