1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

Ensure arrows and lines are correct for large nodes too

This commit is contained in:
JUDIT GRESKOVITS 2017-03-02 18:28:27 +00:00 committed by Sérgio Ramos
parent 900e9a4369
commit 677c80421b
7 changed files with 67 additions and 51 deletions

View File

@ -46,6 +46,7 @@ const Points = {
}; };
const Rects = { const Rects = {
// x, y, width, height
buttonRect: { buttonRect: {
...Sizes.buttonSize, ...Sizes.buttonSize,
...Points.buttonPosition ...Points.buttonPosition
@ -53,6 +54,19 @@ const Rects = {
contentRect: { contentRect: {
...Sizes.contentSize, ...Sizes.contentSize,
...Points.contentPosition ...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
} }
}; };

View File

@ -27,44 +27,50 @@ const getPosition = (angle, positions, position, noCorners=false) => {
}; };
}; };
const getPositions = (halfWidth, halfHeight, halfCorner=0) => ([{ const getPositions = (rect, halfCorner=0) => ([{
id: 'r', id: 'r',
x: halfWidth, x: rect.right,
y: 0 y: 0
}, { }, {
id: 'br', id: 'br',
x: halfWidth - halfCorner, x: rect.right - halfCorner,
y: halfHeight - halfCorner y: rect.bottom - halfCorner
}, { }, {
id: 'b', id: 'b',
x: 0, x: 0,
y: halfHeight y: rect.bottom
}, { }, {
id: 'bl', id: 'bl',
x: -halfWidth + halfCorner, x: rect.left + halfCorner,
y: halfHeight - halfCorner y: rect.bottom - halfCorner
}, { }, {
id: 'l', id: 'l',
x: -halfWidth, x: rect.left,
y: 0 y: 0
}, { }, {
id: 'tl', id: 'tl',
x: -halfWidth + halfCorner, x: rect.left + halfCorner,
y: -halfHeight + halfCorner y: rect.top + halfCorner
}, { }, {
id: 't', id: 't',
x: 0, x: 0,
y: -halfHeight y: rect.top
}, { }, {
id: 'tr', id: 'tr',
x: halfWidth - halfCorner, x: rect.right- halfCorner,
y: -halfHeight + halfCorner y: rect.top + halfCorner
},{ },{
id: 'r', id: 'r',
x: halfWidth, x: rect.right,
y: 0 y: 0
}]); }]);
const getRect = (data) => {
return data.children ?
Constants.nodeRectWithChildren :
Constants.nodeRect;
};
const GraphLink = ({ const GraphLink = ({
data, data,
index index
@ -77,20 +83,20 @@ const GraphLink = ({
// actually, this will need to be got dynamically, in case them things are different sizes // 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 // yeah right, now you'll get to do exactly that
const {
width,
height
} = Constants.nodeSize;
const halfWidth = width/2; const sourceRect = getRect(source);
const halfHeight = height/2; const targetRect= getRect(target);
const halfCorner = 2; const halfCorner = 2;
const positions = getPositions(halfWidth, halfHeight, halfCorner); const sourcePositions = getPositions(sourceRect, halfCorner);
const sourceAngle = getAngleFromPoints(source, target); const sourceAngle = getAngleFromPoints(source, target);
const sourcePosition = getPosition(sourceAngle, positions, source); const sourcePosition = getPosition(sourceAngle, sourcePositions, source);
const targetAngle = getAngleFromPoints(target, source);
const targetPosition = getPosition(targetAngle, positions, target); //, true); const targetPositions = getPositions(targetRect, halfCorner);
const targetAngle = getAngleFromPoints(target, sourcePosition);
const targetPosition = getPosition(targetAngle, targetPositions, target); //, true);
const arrowAngle = getAngleFromPoints(sourcePosition, targetPosition); const arrowAngle = getAngleFromPoints(sourcePosition, targetPosition);
return ( return (

View File

@ -23,14 +23,18 @@ const GraphNode = ({
Constants.nodeSizeWithChildren : Constants.nodeSizeWithChildren :
Constants.nodeSize; Constants.nodeSize;
const halfWidth = width/2; const {
const halfHeight = height/2; left,
top
} = data.children ?
Constants.nodeRectWithChildren :
Constants.nodeRect;
let x = 0; let x = data.x;
let y = 0; let y = data.y;
if(connected) { if(connected) {
x = data.x-halfWidth; x = data.x + left;
y = data.y-halfHeight; y = data.y + top;
} }
const onButtonClick = (evt) => { const onButtonClick = (evt) => {

View File

@ -1,19 +1,19 @@
import React from 'react'; import React from 'react';
//import styled from 'styled-components'; import styled from 'styled-components';
import { Baseline } from '../../../shared/composers'; import { Baseline } from '../../../shared/composers';
//import { colors } from '../../../shared/constants'; import { colors } from '../../../shared/constants';
//import DataCentresIcon from './icon-data-centers.svg'; import DataCentresIcon from './icon-data-centers.svg';
//import InstancesIcon from './icon-instances.svg'; import InstancesIcon from './icon-instances.svg';
import PropTypes from '../prop-types'; import PropTypes from '../prop-types';
import { GraphText } from './shapes'; import { GraphText } from './shapes';
/*const StyledInstancesIcon = styled(InstancesIcon)` const StyledInstancesIcon = styled(InstancesIcon)`
fill: ${props => props.connected ? colors.base.white : colors.base.secondary}; fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
`; `;
const StyledDataCentresIcon = styled(DataCentresIcon)` const StyledDataCentresIcon = styled(DataCentresIcon)`
fill: ${props => props.connected ? colors.base.white : colors.base.secondary}; fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
`;*/ `;
const GraphNodeInfo = ({ const GraphNodeInfo = ({
connected, connected,
@ -31,7 +31,7 @@ const GraphNodeInfo = ({
return ( return (
<g transform={`translate(${x}, ${y})`}> <g transform={`translate(${x}, ${y})`}>
<g transform={'translate(0, 2)'}> <g transform={'translate(0, 2)'}>
{/*}<StyledInstancesIcon connected={connected} />*} <StyledInstancesIcon connected={connected} />
</g> </g>
<GraphText <GraphText
x={23} x={23}
@ -41,7 +41,7 @@ const GraphNodeInfo = ({
{`${datacentres} inst.`} {`${datacentres} inst.`}
</GraphText> </GraphText>
<g transform={'translate(82, 0)'}> <g transform={'translate(82, 0)'}>
{/*<StyledDataCentresIcon connected={connected} />*/} <StyledDataCentresIcon connected={connected} />
</g> </g>
<GraphText <GraphText
x={96} x={96}

View File

@ -2,7 +2,7 @@ import React from 'react';
import { Baseline } from '../../../shared/composers'; import { Baseline } from '../../../shared/composers';
import Constants from '../constants'; import Constants from '../constants';
import { GraphTitle, GraphHealthyCircle } from './shapes'; import { GraphTitle, GraphHealthyCircle } from './shapes';
// import HeartIcon from './icon-heart.svg'; import HeartIcon from './icon-heart.svg';
const GraphNodeTitle = ({ const GraphNodeTitle = ({
connected, connected,
@ -24,7 +24,7 @@ const GraphNodeTitle = ({
cy={9} cy={9}
r={9} r={9}
/> />
{/*<HeartIcon />*/} <HeartIcon />
</g> </g>
</g> </g>
); );

View File

@ -1,4 +1,5 @@
import { forceSimulation, forceLink, forceCollide, forceCenter } from 'd3'; import { forceSimulation, forceLink, forceCollide, forceCenter } from 'd3';
import Constants from './constants';
const hypotenuse = (a, b) => const hypotenuse = (a, b) =>
Math.sqrt(a*a + b*b); Math.sqrt(a*a + b*b);
@ -26,7 +27,6 @@ const createLinks = (services) =>
const createSimulation = ( const createSimulation = (
services, services,
nodeSize,
svgSize, svgSize,
onTick, onTick,
onEnd onEnd
@ -45,7 +45,7 @@ const createSimulation = (
height height
} = svgSize; } = svgSize;
const nodeRadius = rectRadius(nodeSize); const nodeRadius = rectRadius(Constants.nodeSizeWithChildren);
return ({ return ({
simulation: forceSimulation(nodes) simulation: forceSimulation(nodes)
@ -65,7 +65,6 @@ const updateSimulation = (
services, services,
simNodes, simNodes,
simLinks, simLinks,
nodeSize,
svgSize, svgSize,
onTick, onTick,
onEnd onEnd
@ -93,7 +92,7 @@ const updateSimulation = (
height height
} = svgSize; } = svgSize;
const nodeRadius = rectRadius(nodeSize); const nodeRadius = rectRadius(Constants.nodeSizeWithChildren);
return ({ return ({
simulation: forceSimulation(nodes) simulation: forceSimulation(nodes)

View File

@ -10,11 +10,6 @@ const StyledSvg = styled.svg`
height: 860px; height: 860px;
`; `;
const nodeSize = {
width: 180,
height: 156
};
const svgSize = { const svgSize = {
width: 1024, width: 1024,
height: 860 height: 860
@ -33,7 +28,6 @@ class TopologyGraph extends React.Component {
const simulationData = createSimulation( const simulationData = createSimulation(
services, services,
nodeSize,
svgSize//, svgSize//,
//() => this.forceUpdate(), //() => this.forceUpdate(),
//() => this.forceUpdate() //() => this.forceUpdate()
@ -76,7 +70,6 @@ class TopologyGraph extends React.Component {
services, services,
nodes, nodes,
links, links,
nodeSize,
svgSize, svgSize,
() => this.forceUpdate(), () => this.forceUpdate(),
() => this.forceUpdate() () => this.forceUpdate()