From 677c80421bc3aa0cce466a2bcd93cff55bf25d41 Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Thu, 2 Mar 2017 18:28:27 +0000 Subject: [PATCH] Ensure arrows and lines are correct for large nodes too --- ui/src/components/topology/constants.js | 14 +++++ .../components/topology/graph-link/index.js | 54 ++++++++++--------- .../components/topology/graph-node/index.js | 16 +++--- ui/src/components/topology/graph-node/info.js | 16 +++--- .../components/topology/graph-node/title.js | 4 +- .../components/topology/graph-simulation.js | 7 ++- ui/src/components/topology/topology-graph.js | 7 --- 7 files changed, 67 insertions(+), 51 deletions(-) diff --git a/ui/src/components/topology/constants.js b/ui/src/components/topology/constants.js index 40d05329..8bc0ae91 100644 --- a/ui/src/components/topology/constants.js +++ b/ui/src/components/topology/constants.js @@ -46,6 +46,7 @@ const Points = { }; const Rects = { + // x, y, width, height buttonRect: { ...Sizes.buttonSize, ...Points.buttonPosition @@ -53,6 +54,19 @@ const Rects = { contentRect: { ...Sizes.contentSize, ...Points.contentPosition + }, + // top, bottom, left, right - from 'centre' + nodeRect: { + left: -Sizes.nodeSize.width/2, + right: Sizes.nodeSize.width/2, + top: -Sizes.nodeSize.height/2, + bottom: Sizes.nodeSize.height/2 + }, + nodeRectWithChildren: { + left: -Sizes.nodeSizeWithChildren.width/2, + right: Sizes.nodeSizeWithChildren.width/2, + top: -Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/2, + bottom: Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/2 } }; diff --git a/ui/src/components/topology/graph-link/index.js b/ui/src/components/topology/graph-link/index.js index 46b560c3..86e4e86a 100644 --- a/ui/src/components/topology/graph-link/index.js +++ b/ui/src/components/topology/graph-link/index.js @@ -27,44 +27,50 @@ const getPosition = (angle, positions, position, noCorners=false) => { }; }; -const getPositions = (halfWidth, halfHeight, halfCorner=0) => ([{ +const getPositions = (rect, halfCorner=0) => ([{ id: 'r', - x: halfWidth, + x: rect.right, y: 0 }, { id: 'br', - x: halfWidth - halfCorner, - y: halfHeight - halfCorner + x: rect.right - halfCorner, + y: rect.bottom - halfCorner }, { id: 'b', x: 0, - y: halfHeight + y: rect.bottom }, { id: 'bl', - x: -halfWidth + halfCorner, - y: halfHeight - halfCorner + x: rect.left + halfCorner, + y: rect.bottom - halfCorner }, { id: 'l', - x: -halfWidth, + x: rect.left, y: 0 }, { id: 'tl', - x: -halfWidth + halfCorner, - y: -halfHeight + halfCorner + x: rect.left + halfCorner, + y: rect.top + halfCorner }, { id: 't', x: 0, - y: -halfHeight + y: rect.top }, { id: 'tr', - x: halfWidth - halfCorner, - y: -halfHeight + halfCorner + x: rect.right- halfCorner, + y: rect.top + halfCorner },{ id: 'r', - x: halfWidth, + x: rect.right, y: 0 }]); +const getRect = (data) => { + return data.children ? + Constants.nodeRectWithChildren : + Constants.nodeRect; +}; + const GraphLink = ({ data, index @@ -77,20 +83,20 @@ const GraphLink = ({ // actually, this will need to be got dynamically, in case them things are different sizes // yeah right, now you'll get to do exactly that - const { - width, - height - } = Constants.nodeSize; - const halfWidth = width/2; - const halfHeight = height/2; + const sourceRect = getRect(source); + const targetRect= getRect(target); + const halfCorner = 2; - const positions = getPositions(halfWidth, halfHeight, halfCorner); + const sourcePositions = getPositions(sourceRect, halfCorner); const sourceAngle = getAngleFromPoints(source, target); - const sourcePosition = getPosition(sourceAngle, positions, source); - const targetAngle = getAngleFromPoints(target, source); - const targetPosition = getPosition(targetAngle, positions, target); //, true); + const sourcePosition = getPosition(sourceAngle, sourcePositions, source); + + const targetPositions = getPositions(targetRect, halfCorner); + const targetAngle = getAngleFromPoints(target, sourcePosition); + const targetPosition = getPosition(targetAngle, targetPositions, target); //, true); + const arrowAngle = getAngleFromPoints(sourcePosition, targetPosition); return ( diff --git a/ui/src/components/topology/graph-node/index.js b/ui/src/components/topology/graph-node/index.js index 95c2700d..3b67d04e 100644 --- a/ui/src/components/topology/graph-node/index.js +++ b/ui/src/components/topology/graph-node/index.js @@ -23,14 +23,18 @@ const GraphNode = ({ Constants.nodeSizeWithChildren : Constants.nodeSize; - const halfWidth = width/2; - const halfHeight = height/2; + const { + left, + top + } = data.children ? + Constants.nodeRectWithChildren : + Constants.nodeRect; - let x = 0; - let y = 0; + let x = data.x; + let y = data.y; if(connected) { - x = data.x-halfWidth; - y = data.y-halfHeight; + x = data.x + left; + y = data.y + top; } const onButtonClick = (evt) => { diff --git a/ui/src/components/topology/graph-node/info.js b/ui/src/components/topology/graph-node/info.js index 242d686d..9bb8149f 100644 --- a/ui/src/components/topology/graph-node/info.js +++ b/ui/src/components/topology/graph-node/info.js @@ -1,19 +1,19 @@ import React from 'react'; -//import styled from 'styled-components'; +import styled from 'styled-components'; import { Baseline } from '../../../shared/composers'; -//import { colors } from '../../../shared/constants'; -//import DataCentresIcon from './icon-data-centers.svg'; -//import InstancesIcon from './icon-instances.svg'; +import { colors } from '../../../shared/constants'; +import DataCentresIcon from './icon-data-centers.svg'; +import InstancesIcon from './icon-instances.svg'; import PropTypes from '../prop-types'; import { GraphText } from './shapes'; -/*const StyledInstancesIcon = styled(InstancesIcon)` +const StyledInstancesIcon = styled(InstancesIcon)` fill: ${props => props.connected ? colors.base.white : colors.base.secondary}; `; const StyledDataCentresIcon = styled(DataCentresIcon)` fill: ${props => props.connected ? colors.base.white : colors.base.secondary}; -`;*/ +`; const GraphNodeInfo = ({ connected, @@ -31,7 +31,7 @@ const GraphNodeInfo = ({ return ( - {/*}*} + - {/**/} + - {/**/} + ); diff --git a/ui/src/components/topology/graph-simulation.js b/ui/src/components/topology/graph-simulation.js index 36c4efe9..2b3957df 100644 --- a/ui/src/components/topology/graph-simulation.js +++ b/ui/src/components/topology/graph-simulation.js @@ -1,4 +1,5 @@ import { forceSimulation, forceLink, forceCollide, forceCenter } from 'd3'; +import Constants from './constants'; const hypotenuse = (a, b) => Math.sqrt(a*a + b*b); @@ -26,7 +27,6 @@ const createLinks = (services) => const createSimulation = ( services, - nodeSize, svgSize, onTick, onEnd @@ -45,7 +45,7 @@ const createSimulation = ( height } = svgSize; - const nodeRadius = rectRadius(nodeSize); + const nodeRadius = rectRadius(Constants.nodeSizeWithChildren); return ({ simulation: forceSimulation(nodes) @@ -65,7 +65,6 @@ const updateSimulation = ( services, simNodes, simLinks, - nodeSize, svgSize, onTick, onEnd @@ -93,7 +92,7 @@ const updateSimulation = ( height } = svgSize; - const nodeRadius = rectRadius(nodeSize); + const nodeRadius = rectRadius(Constants.nodeSizeWithChildren); return ({ simulation: forceSimulation(nodes) diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js index b5a7d743..c264c17c 100644 --- a/ui/src/components/topology/topology-graph.js +++ b/ui/src/components/topology/topology-graph.js @@ -10,11 +10,6 @@ const StyledSvg = styled.svg` height: 860px; `; -const nodeSize = { - width: 180, - height: 156 -}; - const svgSize = { width: 1024, height: 860 @@ -33,7 +28,6 @@ class TopologyGraph extends React.Component { const simulationData = createSimulation( services, - nodeSize, svgSize//, //() => this.forceUpdate(), //() => this.forceUpdate() @@ -76,7 +70,6 @@ class TopologyGraph extends React.Component { services, nodes, links, - nodeSize, svgSize, () => this.forceUpdate(), () => this.forceUpdate()