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