Adding debug tooling for rendering component bounding boxes

This commit is contained in:
Jeff Avallone 2019-01-28 07:18:20 -05:00
parent f71d707e23
commit 6c603b7958

View File

@ -5,19 +5,40 @@ import nodeTypes from 'rendering/types';
import style from './style.module.css';
const debugBox = {
fill: 'transparent',
stroke: 'red',
strokeWidth: '1px',
strokeDasharray: '2,2',
opacity: 0.5
};
const debugPin = {
fill: 'red',
opacity: 0.5
};
// eslint-disable-next-line react/prop-types
const renderDebug = ({ x, y, width, height, axisX1, axisX2, axisY }) => <>
<rect style={ debugBox } x={ x } y={ y } width={ width } height={ height }/>
<circle style={ debugPin } cx={ axisX1 } cy={ axisY } r="3" />
<circle style={ debugPin } cx={ axisX2 } cy={ axisY } r="3" />
</>;
const render = (data, extraProps) => {
if (typeof data === 'string') {
return data;
}
const { type, props } = data;
const { type, props, debug, box } = data;
const children = (data.children || []).map(
(data, key) => render(data, { key }));
return React.createElement(
nodeTypes[type] ? nodeTypes[type].default : type,
{ ...extraProps, ...props },
children.length === 1 ? children[0] : children);
return <>
{ React.createElement(
nodeTypes[type] ? nodeTypes[type].default : type,
{ ...extraProps, ...props },
children.length === 1 ? children[0] : children) }
{ debug && renderDebug(box) }
</>;
};
class Render extends React.PureComponent {