External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 23:07:42 -02:30
Code Issues Packages Projects Releases Wiki Activity

Implement basic zoom/pan on workflow graph

Browse Source
This commit is contained in:
Michael Abashian
2016-11-15 17:50:26 -05:00
parent 929528b9cc
commit af9e303641
2 changed files with 118 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
View File

@@ -1,10 +1,10 @@
@import "./client/src/shared/branding/colors.default.less"; @import "./client/src/shared/branding/colors.default.less";
.nodeConnector circle, .nodeConnector .linkCross, .node .addCircle, .node .removeCircle, .node .WorkflowChart-hoverPath { .link circle, .link .linkCross, .node .addCircle, .node .removeCircle, .node .WorkflowChart-hoverPath {
opacity: 0; opacity: 0;
} }
.node .addCircle, .nodeConnector .addCircle { .node .addCircle, .link .addCircle {
fill: @default-succ; fill: @default-succ;
} }

60
awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
View File

@@ -30,7 +30,8 @@ export default [
rectW = 120, rectW = 120,
rectH = 60, rectH = 60,
rootW = 60, rootW = 60,
rootH = 40; rootH = 40,
m = [40, 240, 40, 240];
let tree = d3.layout.tree() let tree = d3.layout.tree()
.size([height, width]); .size([height, width]);
@@ -71,21 +72,44 @@ export default [
} }
} }
let svg = d3.select(element[0]).append("svg") let baseSvg = d3.select(element[0]).append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.attr("class", "WorkflowChart-svg") .attr("class", "WorkflowChart-svg")
.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); .call(d3.behavior.zoom()
.scaleExtent([0.5, 5])
.on("zoom", zoom)
);
let node = svg.selectAll(".node"), let svgGroup = baseSvg.append("g");
link = svg.selectAll(".link");
function zoom() {
let scale = d3.event.scale,
translation = d3.event.translate,
tbound = -height * scale,
bbound = height * scale,
lbound = (-width + m[1]) * scale,
rbound = (width - m[3]) * scale;
// limit translation to thresholds
translation = [
Math.max(Math.min(translation[0], rbound), lbound),
Math.max(Math.min(translation[1], bbound), tbound)
];
svgGroup.attr("transform", "translate(" + translation + ")scale(" + scale + ")");
}
function update() { function update() {
// Declare the nodes // Declare the nodes
let nodes = tree.nodes(scope.treeData); let nodes = tree.nodes(scope.treeData),
node = node.data(nodes, function(d) { d.y = d.depth * 180; return d.id || (d.id = ++i); }); links = tree.links(nodes);
link = link.data(tree.links(nodes), function(d) { return d.source.id + "-" + d.target.id; }); let node = svgGroup.selectAll("g.node")
.data(nodes, function(d) {
d.y = d.depth * 180;
return d.id || (d.id = ++i);
});
let nodeEnter = node.enter().append("g") let nodeEnter = node.enter().append("g")
.attr("class", "node") .attr("class", "node")
@@ -263,14 +287,19 @@ export default [
node.exit().remove(); node.exit().remove();
let link = svgGroup.selectAll("g.link")
.data(links, function(d) {
return d.target.id;
});
let linkEnter = link.enter().append("g") let linkEnter = link.enter().append("g")
.attr("class", "nodeConnector") .attr("class", "link")
.attr("id", function(d){return "link-" + d.source.id + "-" + d.target.id;}); .attr("id", function(d){return "link-" + d.source.id + "-" + d.target.id;});
// Add entering links in the parent’s old position. // Add entering links in the parent’s old position.
linkEnter.insert("path", ".node") linkEnter.insert("path", "g")
.attr("class", function(d) { .attr("class", function(d) {
return (d.source.placeholder || d.target.placeholder) ? "link placeholder" : "link"; return (d.source.placeholder || d.target.placeholder) ? "linkPath placeholder" : "linkPath";
}) })
.attr("d", lineData) .attr("d", lineData)
.attr('stroke', function(d) { .attr('stroke', function(d) {
@@ -341,7 +370,7 @@ export default [
link.exit().remove(); link.exit().remove();
// Transition nodes and links to their new positions. // Transition nodes and links to their new positions.
let t = svg.transition(); let t = baseSvg.transition();
t.selectAll(".nodeCircle") t.selectAll(".nodeCircle")
.style("display", function(d) { return d.placeholder || scope.canAddWorkflowJobTemplate === false ? "none" : null; }); .style("display", function(d) { return d.placeholder || scope.canAddWorkflowJobTemplate === false ? "none" : null; });
@@ -355,9 +384,9 @@ export default [
t.selectAll(".nodeRemoveCross") t.selectAll(".nodeRemoveCross")
.style("display", function(d) { return (d.canDelete === false || d.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; }); .style("display", function(d) { return (d.canDelete === false || d.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; });
t.selectAll(".link") t.selectAll(".linkPath")
.attr("class", function(d) { .attr("class", function(d) {
return (d.source.placeholder || d.target.placeholder) ? "link placeholder" : "link"; return (d.source.placeholder || d.target.placeholder) ? "linkPath placeholder" : "linkPath";
}) })
.attr("d", lineData) .attr("d", lineData)
.attr('stroke', function(d) { .attr('stroke', function(d) {
@@ -413,7 +442,6 @@ export default [
return (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update")) ? "P" : (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? "I" : ""); return (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update")) ? "P" : (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? "I" : "");
}) })
.style("display", function(d) { return d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update" || d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? null : "none"; }); .style("display", function(d) { return d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update" || d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? null : "none"; });
} }
function add_node() { function add_node() {