Adding Box rendering component

This commit is contained in:
Jeff Avallone 2019-01-27 11:11:22 -05:00
parent a118519c3a
commit fe714f2363
5 changed files with 148 additions and 7 deletions

View File

@ -0,0 +1,85 @@
import React from 'react';
import PropTypes from 'prop-types';
import { getBBox } from 'layout';
import * as style from './style';
const Box = ({
theme,
radius,
label,
width,
height,
rectTransform,
labelTransform,
contentTransform,
children
}) => {
const rectProps = {
style: style[theme],
width,
height,
rx: radius,
ry: radius,
transform: rectTransform
};
const textProps = {
transform: labelTransform,
style: style.infoText
};
return <>
<rect { ...rectProps }></rect>
{ label && <text { ...textProps }>{ label }</text> }
<g transform={ contentTransform}>
{ children }
</g>
</>;
};
Box.defaultProps = {
padding: 5,
radius: 3
};
Box.propTypes = {
theme: PropTypes.string,
radius: PropTypes.number,
padding: PropTypes.number,
label: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
rectTransform: PropTypes.string,
labelTransform: PropTypes.string,
contentTransform: PropTypes.string,
children: PropTypes.node
};
const layout = data => {
const { label, padding } = {
...Box.defaultProps,
...data.props
};
const childBox = data.children[0].box;
const labelBox = label ?
getBBox(<text style={ style.infoText }>{ label }</text>) :
{ width: 0, height: 0 };
data.box = {
width: Math.max(childBox.width + 2 * padding, labelBox.width),
height: childBox.height + 2 * padding + labelBox.height
};
data.props = {
...data.props,
width: data.box.width,
height: childBox.height + 2 * padding,
rectTransform: `translate(0 ${ labelBox.height })`,
labelTransform: `translate(0 ${ labelBox.height })`,
contentTransform: `translate(${ padding } ${ padding + labelBox.height })`
};
return data;
};
export default Box;
export { layout };

View File

@ -0,0 +1,38 @@
import {
green,
brown,
tan,
grey,
blue,
fontFamily,
fontSizeSmall,
strokeBase
} from 'rendering/style';
export const literal = {
fill: blue,
strokeWidth: '1px',
stroke: brown
};
export const escape = {
fill: green,
strokeWidth: '1px',
stroke: brown
};
export const charClass = {
fill: tan
};
export const capture = {
fillOpacity: 0,
...strokeBase,
stroke: grey,
strokeDasharray: '6,2'
};
export const anchor = {
fill: brown
};
export const infoText = {
fontSize: fontSizeSmall,
fontFamily: fontFamily,
dominantBaseline: 'text-after-edge'
};

View File

@ -1,7 +1,9 @@
import * as SVG from 'rendering/SVG'; import * as SVG from 'rendering/SVG';
import * as Text from 'rendering/Text'; import * as Text from 'rendering/Text';
import * as Box from 'rendering/Box';
export default { export default {
SVG, SVG,
Text Text,
Box
}; };

View File

@ -4,6 +4,12 @@ import layout from 'layout';
const parse = expr => { const parse = expr => {
return { return {
type: 'SVG', type: 'SVG',
children: [
{
type: 'Box',
props: {
theme: 'literal'
},
children: [ children: [
{ {
type: 'Text', type: 'Text',
@ -15,6 +21,8 @@ const parse = expr => {
] ]
} }
] ]
}
]
}; };
}; };

View File

@ -4,6 +4,12 @@ import layout from 'layout';
const parse = expr => { const parse = expr => {
return { return {
type: 'SVG', type: 'SVG',
children: [
{
type: 'Box',
props: {
theme: 'literal'
},
children: [ children: [
{ {
type: 'Text', type: 'Text',
@ -15,6 +21,8 @@ const parse = expr => {
] ]
} }
] ]
}
]
}; };
}; };