1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40: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 = {
// 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
}
};

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',
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 (

View File

@ -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) => {

View File

@ -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 (
<g transform={`translate(${x}, ${y})`}>
<g transform={'translate(0, 2)'}>
{/*}<StyledInstancesIcon connected={connected} />*}
<StyledInstancesIcon connected={connected} />
</g>
<GraphText
x={23}
@ -41,7 +41,7 @@ const GraphNodeInfo = ({
{`${datacentres} inst.`}
</GraphText>
<g transform={'translate(82, 0)'}>
{/*<StyledDataCentresIcon connected={connected} />*/}
<StyledDataCentresIcon connected={connected} />
</g>
<GraphText
x={96}

View File

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

View File

@ -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)

View File

@ -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()