125 lines
2.8 KiB
JavaScript
125 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Constants from '../constants';
|
|
import { getContentRect } from '../functions';
|
|
import GraphNodeTitle from './title';
|
|
import GraphNodeButton from './button';
|
|
import GraphNodeContent from './content';
|
|
import { GraphNodeRect, GraphShadowRect } from './shapes';
|
|
import Baseline from '../../baseline';
|
|
|
|
const GraphNode = ({
|
|
data,
|
|
index,
|
|
onDragStart,
|
|
onNodeTitleClick,
|
|
onQuickActions
|
|
}) => {
|
|
const { left, top, width, height } = data.nodeRect;
|
|
const { connected, id, children, instancesActive, isConsul } = data;
|
|
|
|
let x = data.x;
|
|
let y = data.y;
|
|
|
|
if (connected) {
|
|
x = data.x + left;
|
|
y = data.y + top;
|
|
}
|
|
|
|
const onButtonClick = evt => {
|
|
const tooltipPosition = {
|
|
x: data.x + Constants.buttonRect.x + Constants.buttonRect.width / 2,
|
|
y: data.y + Constants.buttonRect.y + Constants.buttonRect.height
|
|
};
|
|
|
|
if (connected) {
|
|
tooltipPosition.x += left;
|
|
tooltipPosition.y += top;
|
|
}
|
|
|
|
const d = {
|
|
service: data,
|
|
position: {
|
|
left: tooltipPosition.x,
|
|
top: tooltipPosition.y
|
|
}
|
|
};
|
|
|
|
onQuickActions(evt, d);
|
|
};
|
|
|
|
const onTitleClick = evt => onNodeTitleClick(evt, { service: data });
|
|
|
|
const onStart = evt => {
|
|
evt.preventDefault();
|
|
onDragStart(evt, id);
|
|
};
|
|
|
|
const nodeRectEvents = connected
|
|
? {
|
|
onMouseDown: onStart,
|
|
onTouchStart: onStart
|
|
}
|
|
: {};
|
|
|
|
const nodeContent = children ? (
|
|
children.reduce(
|
|
(acc, d, i) => {
|
|
acc.children.push(
|
|
<GraphNodeContent key={i} child data={d} index={i} y={acc.y} />
|
|
);
|
|
acc.y += getContentRect(d, true).height;
|
|
return acc;
|
|
},
|
|
{ y: Constants.contentRect.y, children: [] }
|
|
).children
|
|
) : (
|
|
<GraphNodeContent data={data} />
|
|
);
|
|
|
|
const nodeShadow = instancesActive ? (
|
|
<GraphShadowRect
|
|
x={0}
|
|
y={3}
|
|
width={width}
|
|
height={height}
|
|
consul={isConsul}
|
|
active={instancesActive}
|
|
/>
|
|
) : null;
|
|
|
|
return (
|
|
<g transform={`translate(${x}, ${y})`}>
|
|
{nodeShadow}
|
|
<GraphNodeRect
|
|
x={0}
|
|
y={0}
|
|
width={width}
|
|
height={height}
|
|
consul={isConsul}
|
|
active={instancesActive}
|
|
connected={connected}
|
|
{...nodeRectEvents}
|
|
/>
|
|
<GraphNodeTitle data={data} onNodeTitleClick={onTitleClick} />
|
|
<GraphNodeButton
|
|
index={index}
|
|
onButtonClick={onButtonClick}
|
|
isConsul={isConsul}
|
|
instancesActive={instancesActive}
|
|
/>
|
|
{nodeContent}
|
|
</g>
|
|
);
|
|
};
|
|
|
|
GraphNode.propTypes = {
|
|
data: PropTypes.object.isRequired,
|
|
index: PropTypes.number.isRequired,
|
|
onDragStart: PropTypes.func,
|
|
onNodeTitleClick: PropTypes.func,
|
|
onQuickActions: PropTypes.func
|
|
};
|
|
|
|
export default Baseline(GraphNode);
|