[Bps-public-commit] rt-extension-lifecycleui branch, master, updated. 9bda424c2f34e273a37391f9c799bee99409bc5c
Shawn Moore
shawn at bestpractical.com
Wed Aug 30 16:11:52 EDT 2017
The branch, master has been updated
via 9bda424c2f34e273a37391f9c799bee99409bc5c (commit)
via 468a4cb894464af6f34969e9b4e9722e9c623b99 (commit)
via 7553b0becc18246221c0c2ff45ac80a4beb11c32 (commit)
via f1ff11f91dbbdefa384ede0b352d35801840fc41 (commit)
via fd5d3da75705517050744e75d691bcf36c962623 (commit)
via b81f3eab7c83a80d1d5f855eef87877b09f6053c (commit)
via c26eede98dfe1299e052b17c1868d33df8bc4f94 (commit)
via 69c77610fb28c8d8cc4a02177d52b349a9f246a5 (commit)
via d58f04bfb8b3b1b74670c183d3a0aeefdc316963 (commit)
via 5eb69bfe5cf81eb0752633d8207fb19aee5d64a8 (commit)
via 40fc676f7fc4a3ff0d83d613bde894aa5c946b15 (commit)
via cd750773330456583630e6e86bf0ee5c61e39efa (commit)
via 14df16f6a5deea074d0b9cdc15425278588c741d (commit)
from cb28ed8d02640a281bbc0cf327da110b019f7e79 (commit)
Summary of changes:
html/Elements/LifecycleInspectorStatus | 14 ++-
html/Elements/LifecycleInspectorText | 2 +-
html/Elements/LifecycleInspectorTransition | 14 ++-
static/css/lifecycleui-display.css | 42 +++++--
static/css/lifecycleui-editor.css | 9 +-
static/js/lifecycleui-editor.js | 195 +++++++++++++++++++++++++----
6 files changed, 235 insertions(+), 41 deletions(-)
- Log -----------------------------------------------------------------
commit 14df16f6a5deea074d0b9cdc15425278588c741d
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 17:20:23 2017 +0000
Use CSS not D3 to animate deletion
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index fdd7f68..2aabbc9 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -34,3 +34,8 @@
border: 1px solid black;
}
+.lifecycle-ui .removing {
+ opacity: 0 !important;
+ transition: opacity .2s;
+}
+
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 5f3343f..48c692b 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -324,8 +324,8 @@ jQuery(function () {
.data(Object.values(state.statusMeta), function (d) { return d._key });
statuses.exit()
- .transition()
- .style("opacity", 1e-6)
+ .classed("removing", true)
+ .transition().duration(200)
.attr("r", STATUS_CIRCLE_RADIUS * .8)
.remove();
@@ -358,8 +358,8 @@ jQuery(function () {
.data(Object.values(state.statusMeta), function (d) { return d._key });
labels.exit()
- .transition()
- .style("opacity", 1e-6)
+ .classed("removing", true)
+ .transition().duration(200)
.remove();
labels.enter().append("text")
@@ -389,8 +389,8 @@ jQuery(function () {
.data(state.transitions, function (d) { return d._key });
paths.exit()
- .transition()
- .style("opacity", 1e-6)
+ .classed("removing", true)
+ .transition().duration(200)
.remove();
paths.enter().append("path")
commit cd750773330456583630e6e86bf0ee5c61e39efa
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 17:35:49 2017 +0000
Add logic to select or add transition
diff --git a/html/Elements/LifecycleInspectorStatus b/html/Elements/LifecycleInspectorStatus
index 50c8772..78613f9 100644
--- a/html/Elements/LifecycleInspectorStatus
+++ b/html/Elements/LifecycleInspectorStatus
@@ -10,8 +10,18 @@
</select><br>
Color: <span class="status-color" title="{{status.color}}" style="background-color: {{status.color}}"> </span> <button class="change-color"><&|/l&>Change</&></button><br>
- Add Transiition:<br>
- Select Transition:<br>
+ Add Transition:
+ <ul>
+ {{#each state.statuses}}
+ <li class="{{#if (canAddTransition ../status.name this ../state)}}{{else}}hidden{{/if}}">{{this}}</li>
+ {{/each}}
+ </ul>
+ Select Transition:
+ <ul>
+ {{#each state.statuses}}
+ <li class="{{#if (canSelectTransition ../status.name this ../state)}}{{else}}hidden{{/if}}">{{this}}</li>
+ {{/each}}
+ </ul>
<button class="delete"><&|/l&>Delete Status</&></button>
</div>
</script>
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 48c692b..722a2af 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -20,6 +20,36 @@ jQuery(function () {
return node.html();
});
+ Handlebars.registerHelper('canAddTransition', function(fromStatus, toStatus, state) {
+ if (fromStatus == toStatus) {
+ return false;
+ }
+
+ var hasTransition = false;
+ jQuery.each(state.transitions, function (i, transition) {
+ if (transition.from == fromStatus && transition.to == toStatus) {
+ hasTransition = true;
+ }
+ });
+
+ return !hasTransition;
+ });
+
+ Handlebars.registerHelper('canSelectTransition', function(fromStatus, toStatus, state) {
+ if (fromStatus == toStatus) {
+ return false;
+ }
+
+ var hasTransition = false;
+ jQuery.each(state.transitions, function (i, transition) {
+ if (transition.from == fromStatus && transition.to == toStatus) {
+ hasTransition = true;
+ }
+ });
+
+ return hasTransition;
+ });
+
var updateStatusName = function (state, oldValue, newValue) {
// statusMeta key
var oldMeta = state.statusMeta[oldValue];
commit 40fc676f7fc4a3ff0d83d613bde894aa5c946b15
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 17:43:16 2017 +0000
Implement adding transitions
diff --git a/html/Elements/LifecycleInspectorStatus b/html/Elements/LifecycleInspectorStatus
index 78613f9..3b6669c 100644
--- a/html/Elements/LifecycleInspectorStatus
+++ b/html/Elements/LifecycleInspectorStatus
@@ -13,13 +13,13 @@
Add Transition:
<ul>
{{#each state.statuses}}
- <li class="{{#if (canAddTransition ../status.name this ../state)}}{{else}}hidden{{/if}}">{{this}}</li>
+ <li class="{{#if (canAddTransition ../status.name this ../state)}}{{else}}hidden{{/if}}"><a href="#" class="add-transition" data-from="{{../status.name}}" data-to="{{this}}">{{this}}</a></li>
{{/each}}
</ul>
Select Transition:
<ul>
{{#each state.statuses}}
- <li class="{{#if (canSelectTransition ../status.name this ../state)}}{{else}}hidden{{/if}}">{{this}}</li>
+ <li class="{{#if (canSelectTransition ../status.name this ../state)}}{{else}}hidden{{/if}}"><a href="#" class="select-transition" data-from="{{../status.name}}" data-to="{{this}}">{{this}}</a></li>
{{/each}}
</ul>
<button class="delete"><&|/l&>Delete Status</&></button>
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 722a2af..4dbd853 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -322,6 +322,27 @@ jQuery(function () {
deselectAll();
refreshDisplay();
});
+
+ inspector.find('a.add-transition').click(function (e) {
+ e.preventDefault();
+ var button = jQuery(this);
+ var fromStatus = button.data('from');
+ var toStatus = button.data('to');
+
+ var transition = {
+ _key : _ELEMENT_KEY_SEQ++,
+ from : fromStatus,
+ to : toStatus
+ };
+ state.transitions.push(transition);
+
+ button.closest('li').addClass('hidden');
+
+ inspector.find('a.select-transition[data-from="'+fromStatus+'"][data-to="'+toStatus+'"]').closest('li').removeClass('hidden');
+
+ refreshDisplay();
+ selectStatus(node.name);
+ });
};
var deselectAll = function () {
commit 5eb69bfe5cf81eb0752633d8207fb19aee5d64a8
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:01:32 2017 +0000
Start fleshing out selected transitions
diff --git a/html/Elements/LifecycleInspectorTransition b/html/Elements/LifecycleInspectorTransition
index 03afcc0..c37d2c7 100644
--- a/html/Elements/LifecycleInspectorTransition
+++ b/html/Elements/LifecycleInspectorTransition
@@ -1,9 +1,9 @@
<script type="text/x-template" class="lifecycle-inspector-template" data-type="transition">
<div class="transition">
- From: x<br>
- To: y<br>
+ From: {{transition.from}}<br>
+ To: {{transition.to}}<br>
Style: solid/dashed/dotted<br>
<br>
- Delete Transition<br>
+ <button class="delete"><&|/l&>Delete Transition</&></button>
</div>
</script>
commit d58f04bfb8b3b1b74670c183d3a0aeefdc316963
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:02:03 2017 +0000
Have deselectAll take a reset-inspector-to-canvas parameter
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 4dbd853..fafffb0 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -319,7 +319,7 @@ jQuery(function () {
deleteStatus(state, node.name);
}
- deselectAll();
+ deselectAll(true);
refreshDisplay();
});
@@ -345,8 +345,11 @@ jQuery(function () {
});
};
- var deselectAll = function () {
- setInspectorContent('canvas');
+ var deselectAll = function (inspectCanvas) {
+ if (inspectCanvas) {
+ setInspectorContent('canvas');
+ }
+
svg.classed('selection', false);
svg.selectAll('.selected').classed('selected', false);
svg.selectAll('.reachable').classed('reachable', false);
@@ -356,8 +359,7 @@ jQuery(function () {
var d = state.statusMeta[name];
setInspectorContent('status', d);
- svg.selectAll('.selected').classed('selected', false);
- svg.selectAll('.reachable').classed('reachable', false);
+ deselectAll(false);
svg.classed('selection', true);
svg.selectAll('circle[data-name="'+name+'"], text[data-name="'+name+'"]').classed('selected', true);
@@ -467,7 +469,7 @@ console.log(state.transitions);
setInspectorContent('canvas');
- svg.on('click', function () { deselectAll() });
+ svg.on('click', function () { deselectAll(true) });
jQuery('form[name=ModifyLifecycle]').submit(function (e) {
var config = exportConfigFromState(state);
commit 69c77610fb28c8d8cc4a02177d52b349a9f246a5
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:03:49 2017 +0000
Implement selecting transitions
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 598c5eb..6715c08 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -20,8 +20,12 @@
.lifecycle-ui .selection circle.reachable,
.lifecycle-ui .selection circle.selected,
+.lifecycle-ui .selection circle.selected-source,
+.lifecycle-ui .selection circle.selected-sink,
.lifecycle-ui .selection text.reachable,
-.lifecycle-ui .selection text.selected {
+.lifecycle-ui .selection text.selected,
+.lifecycle-ui .selection text.selected-source,
+.lifecycle-ui .selection text.selected-sink {
opacity: 1;
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index fafffb0..4d1ecf2 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -343,6 +343,15 @@ jQuery(function () {
refreshDisplay();
selectStatus(node.name);
});
+
+ inspector.find('a.select-transition').click(function (e) {
+ e.preventDefault();
+ var button = jQuery(this);
+ var fromStatus = button.data('from');
+ var toStatus = button.data('to');
+
+ selectTransition(fromStatus, toStatus);
+ });
};
var deselectAll = function (inspectCanvas) {
@@ -352,6 +361,8 @@ jQuery(function () {
svg.classed('selection', false);
svg.selectAll('.selected').classed('selected', false);
+ svg.selectAll('.selected-source').classed('selected-source', false);
+ svg.selectAll('.selected-sink').classed('selected-sink', false);
svg.selectAll('.reachable').classed('reachable', false);
};
@@ -372,6 +383,23 @@ jQuery(function () {
});
};
+ var selectTransition = function (fromStatus, toStatus) {
+ var d;
+ jQuery.each(state.transitions, function (i, transition) {
+ if (transition.from == fromStatus && transition.to == toStatus) {
+ d = transition;
+ }
+ });
+ setInspectorContent('transition', d);
+
+ deselectAll(false);
+
+ svg.classed('selection', true);
+ svg.selectAll('circle[data-name="'+fromStatus+'"], text[data-name="'+fromStatus+'"]').classed('selected-source', true);
+ svg.selectAll('circle[data-name="'+toStatus+'"], text[data-name="'+toStatus+'"]').classed('selected-sink', true);
+ transitionContainer.select('path[data-from="'+fromStatus+'"][data-to="'+toStatus+'"]').classed('selected', true);
+ };
+
var refreshStatusNodes = function () {
var statuses = svg.selectAll("circle")
.data(Object.values(state.statusMeta), function (d) { return d._key });
@@ -447,6 +475,10 @@ jQuery(function () {
.remove();
paths.enter().append("path")
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ selectTransition(d.from, d.to);
+ })
.merge(paths)
.attr("d", linkArc)
.attr("data-from", function (d) { return d.from })
commit c26eede98dfe1299e052b17c1868d33df8bc4f94
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:04:20 2017 +0000
Add dashed and dotted transitions
diff --git a/html/Elements/LifecycleInspectorTransition b/html/Elements/LifecycleInspectorTransition
index c37d2c7..cf4d10f 100644
--- a/html/Elements/LifecycleInspectorTransition
+++ b/html/Elements/LifecycleInspectorTransition
@@ -2,7 +2,13 @@
<div class="transition">
From: {{transition.from}}<br>
To: {{transition.to}}<br>
- Style: solid/dashed/dotted<br>
+ Style: <select name="style">
+ {{#select transition.style}}
+ <option value="solid"><&|/l&>solid</&></option>
+ <option value="dashed"><&|/l&>dashed</&></option>
+ <option value="dotted"><&|/l&>dotted</&></option>
+ {{/select}}
+ </select><br>
<br>
<button class="delete"><&|/l&>Delete Transition</&></button>
</div>
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 6715c08..e8ffa1d 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -47,6 +47,14 @@
opacity: 1;
}
+.lifecycle-ui .transitions path.dotted {
+ stroke-dasharray: 2;
+}
+
+.lifecycle-ui .transitions path.dashed {
+ stroke-dasharray: 5;
+}
+
.lifecycle-ui text {
text-anchor: middle;
alignment-baseline: middle;
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 4d1ecf2..1e02636 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -180,9 +180,10 @@ jQuery(function () {
else {
jQuery.each(toList, function (i, toStatus) {
var transition = {
- _key : _ELEMENT_KEY_SEQ++,
- from : fromStatus,
- to : toStatus
+ _key : _ELEMENT_KEY_SEQ++,
+ from : fromStatus,
+ to : toStatus,
+ style : 'solid'
};
state.transitions.push(transition);
});
@@ -330,9 +331,10 @@ jQuery(function () {
var toStatus = button.data('to');
var transition = {
- _key : _ELEMENT_KEY_SEQ++,
- from : fromStatus,
- to : toStatus
+ _key : _ELEMENT_KEY_SEQ++,
+ from : fromStatus,
+ to : toStatus,
+ style : 'solid'
};
state.transitions.push(transition);
@@ -483,6 +485,8 @@ jQuery(function () {
.attr("d", linkArc)
.attr("data-from", function (d) { return d.from })
.attr("data-to", function (d) { return d.to })
+ .classed("dashed", function (d) { return d.style == 'dashed' })
+ .classed("dotted", function (d) { return d.style == 'dotted' })
};
console.log(state.transitions);
commit b81f3eab7c83a80d1d5f855eef87877b09f6053c
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:04:31 2017 +0000
Tidy
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index e8ffa1d..3f3ce79 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -5,7 +5,6 @@
.lifecycle-ui circle {
stroke: black;
stroke-width: 2px;
- transition: stroke-width .2s;
transition: opacity .2s;
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 1e02636..12d1d9c 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -489,8 +489,6 @@ jQuery(function () {
.classed("dotted", function (d) { return d.style == 'dotted' })
};
-console.log(state.transitions);
-
var refreshDisplay = function () {
refreshTransitions();
refreshStatusNodes();
commit fd5d3da75705517050744e75d691bcf36c962623
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:04:35 2017 +0000
Inspectors, especially with callbacks, may get tall
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index 2aabbc9..d7905d5 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -15,7 +15,7 @@
display: inline-block;
min-width: 100px;
padding: 10px;
- height: 480px;
+ min-height: 480px;
border: 1px solid black;
}
commit f1ff11f91dbbdefa384ede0b352d35801840fc41
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:06:48 2017 +0000
Implement selecting status from transition inspector
diff --git a/html/Elements/LifecycleInspectorTransition b/html/Elements/LifecycleInspectorTransition
index cf4d10f..a9ad438 100644
--- a/html/Elements/LifecycleInspectorTransition
+++ b/html/Elements/LifecycleInspectorTransition
@@ -1,7 +1,7 @@
<script type="text/x-template" class="lifecycle-inspector-template" data-type="transition">
<div class="transition">
- From: {{transition.from}}<br>
- To: {{transition.to}}<br>
+ From: <a href="#" class="select-status" data-name="{{transition.from}}">{{transition.from}}</a><br>
+ To: <a href="#" class="select-status" data-name="{{transition.to}}">{{transition.to}}</a><br>
Style: <select name="style">
{{#select transition.style}}
<option value="solid"><&|/l&>solid</&></option>
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 12d1d9c..31760f5 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -346,6 +346,11 @@ jQuery(function () {
selectStatus(node.name);
});
+ inspector.find('a.select-status').click(function (e) {
+ e.preventDefault();
+ selectStatus(jQuery(this).data('name'));
+ });
+
inspector.find('a.select-transition').click(function (e) {
e.preventDefault();
var button = jQuery(this);
commit 7553b0becc18246221c0c2ff45ac80a4beb11c32
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 18:41:23 2017 +0000
Add a g.statuses
This lets us differentiate status circles & labels from other circle and
text nodes that happen to be in the svg
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 3f3ce79..6b487f2 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -2,29 +2,29 @@
border: 1px solid black;
}
-.lifecycle-ui circle {
+.lifecycle-ui .statuses circle {
stroke: black;
stroke-width: 2px;
transition: opacity .2s;
}
-.lifecycle-ui text {
+.lifecycle-ui .statuses text {
transition: opacity .2s;
}
-.lifecycle-ui .selection circle,
-.lifecycle-ui .selection text {
+.lifecycle-ui .selection .statuses circle,
+.lifecycle-ui .selection .statuses text {
opacity: 0.25;
}
-.lifecycle-ui .selection circle.reachable,
-.lifecycle-ui .selection circle.selected,
-.lifecycle-ui .selection circle.selected-source,
-.lifecycle-ui .selection circle.selected-sink,
-.lifecycle-ui .selection text.reachable,
-.lifecycle-ui .selection text.selected,
-.lifecycle-ui .selection text.selected-source,
-.lifecycle-ui .selection text.selected-sink {
+.lifecycle-ui .selection .statuses circle.reachable,
+.lifecycle-ui .selection .statuses circle.selected,
+.lifecycle-ui .selection .statuses circle.selected-source,
+.lifecycle-ui .selection .statuses circle.selected-sink,
+.lifecycle-ui .selection .statuses text.reachable,
+.lifecycle-ui .selection .statuses text.selected,
+.lifecycle-ui .selection .statuses text.selected-source,
+.lifecycle-ui .selection .statuses text.selected-sink {
opacity: 1;
}
@@ -54,10 +54,12 @@
stroke-dasharray: 5;
}
-.lifecycle-ui text {
+.lifecycle-ui .statuses text {
text-anchor: middle;
alignment-baseline: middle;
+}
+.lifecycle-ui text {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
diff --git a/static/css/lifecycleui-editor.css b/static/css/lifecycleui-editor.css
index d7905d5..8d3b7cd 100644
--- a/static/css/lifecycleui-editor.css
+++ b/static/css/lifecycleui-editor.css
@@ -24,7 +24,7 @@
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
-.lifecycle-ui circle.selected {
+.lifecycle-ui .statuses circle.selected {
stroke-width: 6px;
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 31760f5..ed5ccb1 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -248,6 +248,7 @@ jQuery(function () {
.select('svg');
var transitionContainer = svg.append('g').classed('transitions', true);
+ var statusContainer = svg.append('g').classed('statuses', true);
var width = svg.node().getBoundingClientRect().width;
var height = svg.node().getBoundingClientRect().height;
@@ -380,12 +381,12 @@ jQuery(function () {
deselectAll(false);
svg.classed('selection', true);
- svg.selectAll('circle[data-name="'+name+'"], text[data-name="'+name+'"]').classed('selected', true);
+ statusContainer.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);
+ statusContainer.selectAll('circle[data-name="'+transition.to+'"], text[data-name="'+transition.to+'"]').classed('reachable', true);
}
});
};
@@ -402,14 +403,14 @@ jQuery(function () {
deselectAll(false);
svg.classed('selection', true);
- svg.selectAll('circle[data-name="'+fromStatus+'"], text[data-name="'+fromStatus+'"]').classed('selected-source', true);
- svg.selectAll('circle[data-name="'+toStatus+'"], text[data-name="'+toStatus+'"]').classed('selected-sink', true);
+ statusContainer.selectAll('circle[data-name="'+fromStatus+'"], text[data-name="'+fromStatus+'"]').classed('selected-source', true);
+ statusContainer.selectAll('circle[data-name="'+toStatus+'"], text[data-name="'+toStatus+'"]').classed('selected-sink', true);
transitionContainer.select('path[data-from="'+fromStatus+'"][data-to="'+toStatus+'"]').classed('selected', true);
};
var refreshStatusNodes = function () {
- var statuses = svg.selectAll("circle")
- .data(Object.values(state.statusMeta), function (d) { return d._key });
+ var statuses = statusContainer.selectAll("circle")
+ .data(Object.values(state.statusMeta), function (d) { return d._key });
statuses.exit()
.classed("removing", true)
@@ -442,8 +443,8 @@ jQuery(function () {
};
var refreshStatusLabels = function () {
- var labels = svg.selectAll("text")
- .data(Object.values(state.statusMeta), function (d) { return d._key });
+ var labels = statusContainer.selectAll("text")
+ .data(Object.values(state.statusMeta), function (d) { return d._key });
labels.exit()
.classed("removing", true)
commit 468a4cb894464af6f34969e9b4e9722e9c623b99
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 20:07:15 2017 +0000
Add decorations (specifically textual labels)
diff --git a/html/Elements/LifecycleInspectorText b/html/Elements/LifecycleInspectorText
index d0b66af..7693b14 100644
--- a/html/Elements/LifecycleInspectorText
+++ b/html/Elements/LifecycleInspectorText
@@ -1,6 +1,6 @@
<script type="text/x-template" class="lifecycle-inspector-template" data-type="text">
<div class="text">
- Body: text<br>
+ Body: <input type="text" name="text" value="{{text.text}}" />
Delete Text<br>
</div>
</script>
diff --git a/static/css/lifecycleui-display.css b/static/css/lifecycleui-display.css
index 6b487f2..1622d19 100644
--- a/static/css/lifecycleui-display.css
+++ b/static/css/lifecycleui-display.css
@@ -46,6 +46,15 @@
opacity: 1;
}
+.lifecycle-ui .selection .decorations > * {
+ opacity: .2;
+ transition: opacity .2s;
+}
+
+.lifecycle-ui .selection .decorations > .selected {
+ opacity: 1;
+}
+
.lifecycle-ui .transitions path.dotted {
stroke-dasharray: 2;
}
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index ed5ccb1..320fd09 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -133,6 +133,7 @@ jQuery(function () {
transitions: [],
rights: {},
actions: [],
+ decorations: {},
statusMeta: {}
};
@@ -199,6 +200,12 @@ jQuery(function () {
state.actions = config.actions;
}
+ if (config.decorations) {
+ state.decorations = config.decorations;
+ }
+
+ state.decorations.text = state.decorations.text || [];
+
return state;
};
@@ -249,6 +256,7 @@ jQuery(function () {
var transitionContainer = svg.append('g').classed('transitions', true);
var statusContainer = svg.append('g').classed('statuses', true);
+ var decorationContainer = svg.append('g').classed('decorations', true);
var width = svg.node().getBoundingClientRect().width;
var height = svg.node().getBoundingClientRect().height;
@@ -408,6 +416,27 @@ jQuery(function () {
transitionContainer.select('path[data-from="'+fromStatus+'"][data-to="'+toStatus+'"]').classed('selected', true);
};
+ var selectDecoration = function (type, key) {
+ var d;
+ jQuery.each(state.decorations[type], function (i, node) {
+ if (node._key == key) {
+ d = node;
+ }
+ });
+
+ if (type == 'text') {
+ setInspectorContent('text', d);
+ }
+ else {
+ setInspectorContent('shape', d);
+ }
+
+ deselectAll(false);
+
+ svg.classed('selection', true);
+ decorationContainer.selectAll('*[data-key="'+key+'"]').classed('selected', true);
+ };
+
var refreshStatusNodes = function () {
var statuses = statusContainer.selectAll("circle")
.data(Object.values(state.statusMeta), function (d) { return d._key });
@@ -495,10 +524,36 @@ jQuery(function () {
.classed("dotted", function (d) { return d.style == 'dotted' })
};
+ var refreshTextDecorations = function () {
+ var labels = decorationContainer.selectAll("text")
+ .data(state.decorations.text, function (d) { return d._key });
+
+ labels.exit()
+ .classed("removing", true)
+ .transition().duration(200)
+ .remove();
+
+ labels.enter().append("text")
+ .attr("data-key", function (d) { return d._key })
+ .on("click", function (d) {
+ d3.event.stopPropagation();
+ selectDecoration('text', d._key);
+ })
+ .merge(labels)
+ .attr("x", function (d) { return xScale(d.x) })
+ .attr("y", function (d) { return yScale(d.y) })
+ .text(function (d) { return d.text });
+ };
+
+ var refreshDecorations = function () {
+ refreshTextDecorations();
+ };
+
var refreshDisplay = function () {
refreshTransitions();
refreshStatusNodes();
refreshStatusLabels();
+ refreshDecorations();
};
jQuery('.inspector').on('click', 'a.select-status', function (e) {
commit 9bda424c2f34e273a37391f9c799bee99409bc5c
Author: Shawn M Moore <shawn at bestpractical.com>
Date: Wed Aug 30 20:07:37 2017 +0000
Add data-key to each svg element
diff --git a/static/js/lifecycleui-editor.js b/static/js/lifecycleui-editor.js
index 320fd09..e8d7bdb 100644
--- a/static/js/lifecycleui-editor.js
+++ b/static/js/lifecycleui-editor.js
@@ -449,6 +449,7 @@ jQuery(function () {
statuses.enter().append("circle")
.attr("r", STATUS_CIRCLE_RADIUS)
+ .attr("data-key", function (d) { return d._key })
.on("click", function (d) {
d3.event.stopPropagation();
selectStatus(d.name);
@@ -481,6 +482,7 @@ jQuery(function () {
.remove();
labels.enter().append("text")
+ .attr("data-key", function (d) { return d._key })
.on("click", function (d) {
d3.event.stopPropagation();
selectStatus(d.name);
@@ -512,6 +514,7 @@ jQuery(function () {
.remove();
paths.enter().append("path")
+ .attr("data-key", function (d) { return d._key })
.on("click", function (d) {
d3.event.stopPropagation();
selectTransition(d.from, d.to);
-----------------------------------------------------------------------
More information about the Bps-public-commit
mailing list