shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Add 20px margin to the base workflow graph

Browse Source
This commit is contained in:
Michael Abashian 2016-12-13 15:13:13 -05:00
parent f6a7b4c673
commit 7e87f5031a
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@ export default [ '$state',
let margin = {top: 20, right: 20, bottom: 20, left: 20}, let margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 950, width = 950,
height = 590 - margin.top - margin.bottom, height = 550,
i = 0, i = 0,
rectW = 120, rectW = 120,
rectH = 60, rectH = 60,
@ -39,15 +39,15 @@ export default [ '$state',
let zoomObj = d3.behavior.zoom().scaleExtent([0.5, 2]); let zoomObj = d3.behavior.zoom().scaleExtent([0.5, 2]);
let baseSvg = d3.select(element[0]).append("svg") let baseSvg = d3.select(element[0]).append("svg")
.attr("width", width) .attr("width", width - margin.right - margin.left)
.attr("height", height) .attr("height", height - margin.top - margin.bottom)
.attr("class", "WorkflowChart-svg") .attr("class", "WorkflowChart-svg")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoomObj .call(zoomObj
.on("zoom", naturalZoom) .on("zoom", naturalZoom)
); );
let svgGroup = baseSvg.append("g"); let svgGroup = baseSvg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function lineData(d){ function lineData(d){
@ -108,6 +108,8 @@ export default [ '$state',
let scale = d3.event.scale, let scale = d3.event.scale,
translation = d3.event.translate; translation = d3.event.translate;
translation = [translation[0] + (margin.left*scale), translation[1] + (margin.top*scale)];
svgGroup.attr("transform", "translate(" + translation + ")scale(" + scale + ")"); svgGroup.attr("transform", "translate(" + translation + ")scale(" + scale + ")");
scope.workflowZoomed({ scope.workflowZoomed({
@ -125,7 +127,7 @@ export default [ '$state',
translateX = unscaledOffsetX*scale - ((scale*width)-width)/2, translateX = unscaledOffsetX*scale - ((scale*width)-width)/2,
translateY = unscaledOffsetY*scale - ((scale*height)-height)/2; translateY = unscaledOffsetY*scale - ((scale*height)-height)/2;
svgGroup.attr("transform", "translate(" + [translateX, translateY] + ")scale(" + scale + ")"); svgGroup.attr("transform", "translate(" + [translateX + (margin.left*scale), translateY + (margin.top*scale)] + ")scale(" + scale + ")");
zoomObj.scale(scale); zoomObj.scale(scale);
zoomObj.translate([translateX, translateY]); zoomObj.translate([translateX, translateY]);
} }
@ -148,7 +150,7 @@ export default [ '$state',
} }
function resetZoomAndPan() { function resetZoomAndPan() {
svgGroup.attr("transform", "translate(" + 0 + "," + 0 + ")scale(" + 1 + ")"); svgGroup.attr("transform", "translate(" + margin.left + "," + margin.top + ")scale(" + 1 + ")");
// Update the zoomObj // Update the zoomObj
zoomObj.scale(1); zoomObj.scale(1);
zoomObj.translate([0,0]); zoomObj.translate([0,0]);