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:
parent
900e9a4369
commit
677c80421b
@ -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
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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 (
|
||||
|
@ -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) => {
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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)
|
||||
|
@ -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()
|
||||
|
Loading…
Reference in New Issue
Block a user