From 205dc93e65631bff6574f4f02cd7692beddee212 Mon Sep 17 00:00:00 2001 From: mabashian Date: Fri, 8 Feb 2019 16:42:40 -0500 Subject: [PATCH] Dynamically place link hover tooltip based on its size --- .../workflow-chart.directive.js | 117 ++++++++++-------- 1 file changed, 62 insertions(+), 55 deletions(-) diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js index 0486731a89..aef206d5c9 100644 --- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js +++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js @@ -4,8 +4,8 @@ * All Rights Reserved *************************************************/ -export default ['$state','moment', '$timeout', '$window', '$filter', 'Rest', 'GetBasePath', 'ProcessErrors', 'TemplatesStrings', - function($state, moment, $timeout, $window, $filter, Rest, GetBasePath, ProcessErrors, TemplatesStrings) { +export default ['moment', '$timeout', '$window', '$filter', 'TemplatesStrings', + function(moment, $timeout, $window, $filter, TemplatesStrings) { return { scope: { @@ -206,50 +206,8 @@ export default ['$state','moment', '$timeout', '$window', '$filter', 'Rest', 'Ge const updateGraph = () => { if(scope.dimensionsSet) { const buildLinkTooltip = (d) => { - let sourceNode = d3.select(`#node-${d.source.id}`); - const sourceNodeX = d3.transform(sourceNode.attr("transform")).translate[0]; - const sourceNodeY = d3.transform(sourceNode.attr("transform")).translate[1]; - let targetNode = d3.select(`#node-${d.target.id}`); - const targetNodeX = d3.transform(targetNode.attr("transform")).translate[0]; - const targetNodeY = d3.transform(targetNode.attr("transform")).translate[1]; - let xPos, yPos, arrowPoints; - if (nodePositionMap[d.source.id].y === nodePositionMap[d.target.id].y) { - xPos = (sourceNodeX + nodeW + targetNodeX)/2 - 50; - yPos = (sourceNodeY + nodeH + targetNodeY)/2 - 70; - arrowPoints = { - pt1: { - x: xPos + 40, - y: yPos + 47 - }, - pt2: { - x: xPos + 60, - y: yPos + 47 - }, - pt3: { - x: xPos + 50, - y: yPos + 57 - } - }; - } else { - xPos = (sourceNodeX + nodeW + targetNodeX)/2 - 120; - yPos = (sourceNodeY + nodeH + targetNodeY)/2 - 30; - arrowPoints = { - pt1: { - x: xPos + 100, - y: yPos + 17 - }, - pt2: { - x: xPos + 100, - y: yPos + 33 - }, - pt3: { - x: xPos + 110, - y: yPos + 25 - } - }; - } - let edgeTypeLabel; - switch(d.edgeType) { + let edgeTypeLabel; + switch(d.edgeType) { case "always": edgeTypeLabel = TemplatesStrings.get('workflow_maker.ALWAYS'); break; @@ -260,24 +218,73 @@ export default ['$state','moment', '$timeout', '$window', '$filter', 'Rest', 'Ge edgeTypeLabel = TemplatesStrings.get('workflow_maker.ON_FAILURE'); break; } - let linkInstructionText = !scope.readOnly ? TemplatesStrings.get('workflow_maker.EDIT_LINK_TOOLTIP') : TemplatesStrings.get('workflow_maker.VIEW_LINK_TOOLTIP'); - let linkTooltip = svgGroup.append("g") - .attr("class", "WorkflowChart-tooltip"); - linkTooltip.append("foreignObject") - .attr("transform", `translate(${xPos},${yPos})`) + let linkInstructionText = !scope.readOnly ? TemplatesStrings.get('workflow_maker.EDIT_LINK_TOOLTIP') : TemplatesStrings.get('workflow_maker.VIEW_LINK_TOOLTIP'); + let linkTooltip = svgGroup.append("g") + .attr("class", "WorkflowChart-tooltip"); + const tipRef = linkTooltip.append("foreignObject") + // In order for this to work in FF a height of at least 1 must be present .attr("width", 100) - .attr("height", 50) + .attr("height", 1) .html(function(){ return `
-
${TemplatesStrings.get('workflow_maker.RUN')}: ${edgeTypeLabel}
-
${linkInstructionText}
+
${TemplatesStrings.get('workflow_maker.RUN')}: ${edgeTypeLabel}
+
${linkInstructionText}
`; }); - linkTooltip.append("polygon") + const tipDimensions = tipRef.select('.WorkflowChart-tooltipContents').node().getBoundingClientRect(); + let sourceNode = d3.select(`#node-${d.source.id}`); + const sourceNodeX = d3.transform(sourceNode.attr("transform")).translate[0]; + const sourceNodeY = d3.transform(sourceNode.attr("transform")).translate[1]; + let targetNode = d3.select(`#node-${d.target.id}`); + const targetNodeX = d3.transform(targetNode.attr("transform")).translate[0]; + const targetNodeY = d3.transform(targetNode.attr("transform")).translate[1]; + let xPos, yPos, arrowPoints; + const scaledHeight = tipDimensions.height/zoomObj.scale(); + + if (nodePositionMap[d.source.id].y === nodePositionMap[d.target.id].y) { + xPos = (sourceNodeX + nodeW + targetNodeX)/2 - 50; + yPos = sourceNodeY + nodeH/2 - scaledHeight - 20; + arrowPoints = { + pt1: { + x: xPos + 40, + y: yPos + scaledHeight + }, + pt2: { + x: xPos + 60, + y: yPos + scaledHeight + }, + pt3: { + x: xPos + 50, + y: yPos + scaledHeight + 10 + } + }; + } else { + xPos = (sourceNodeX + nodeW + targetNodeX)/2 - 120; + yPos = (sourceNodeY + (nodeH/2) + targetNodeY + (nodeH/2))/2 - (scaledHeight/2); + arrowPoints = { + pt1: { + x: xPos + 100, + y: yPos + (scaledHeight/2) - 10 + }, + pt2: { + x: xPos + 100, + y: yPos + (scaledHeight/2) + 10 + }, + pt3: { + x: xPos + 110, + y: yPos + (scaledHeight/2) + } + }; + } + + linkTooltip.append("polygon") .attr("class", "WorkflowChart-tooltipArrow") .attr("points", function() { return `${arrowPoints.pt1.x},${arrowPoints.pt1.y} ${arrowPoints.pt2.x},${arrowPoints.pt2.y} ${arrowPoints.pt3.x},${arrowPoints.pt3.y}`; }); + + tipRef.attr('height', tipDimensions.height); + tipRef.attr("transform", `translate(${xPos},${yPos})`) }; let g = new dagre.graphlib.Graph();