Fleshing out expample render and cleaning up some SVG code
This commit is contained in:
parent
82b780e9c3
commit
6bc4306ca3
@ -7,7 +7,8 @@ import style from './style';
|
||||
/** @extends React.PureComponent */
|
||||
class Box extends Base {
|
||||
static defaultProps = {
|
||||
padding: 5
|
||||
padding: 5,
|
||||
radius: 3
|
||||
}
|
||||
|
||||
preReflow() {
|
||||
@ -43,11 +44,11 @@ class Box extends Base {
|
||||
labelRef = label => this.label = label
|
||||
|
||||
render() {
|
||||
const { style: propStyle, radius, label, children } = this.props;
|
||||
const { type, radius, label, children } = this.props;
|
||||
const { width, height, labelTransform, rectTransform, contentTransform } = this.state || {};
|
||||
|
||||
const rectProps = {
|
||||
style: propStyle,
|
||||
style: type ? style[type] : {},
|
||||
width,
|
||||
height,
|
||||
rx: radius,
|
||||
@ -73,12 +74,12 @@ class Box extends Base {
|
||||
}
|
||||
|
||||
Box.propTypes = {
|
||||
children: PropTypes.node,
|
||||
label: PropTypes.string,
|
||||
padding: PropTypes.number,
|
||||
useAnchors: PropTypes.bool,
|
||||
style: PropTypes.object,
|
||||
radius: PropTypes.number,
|
||||
label: PropTypes.string,
|
||||
children: PropTypes.node
|
||||
type: PropTypes.string
|
||||
};
|
||||
|
||||
export default Box;
|
||||
|
@ -96,12 +96,12 @@ class HorizontalLayout extends Base {
|
||||
}
|
||||
|
||||
HorizontalLayout.propTypes = {
|
||||
spacing: PropTypes.number,
|
||||
withConnectors: PropTypes.bool,
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.node),
|
||||
PropTypes.node
|
||||
]).isRequired
|
||||
]).isRequired,
|
||||
spacing: PropTypes.number,
|
||||
withConnectors: PropTypes.bool
|
||||
};
|
||||
|
||||
export default HorizontalLayout;
|
||||
|
@ -95,9 +95,9 @@ class Image extends Base {
|
||||
}
|
||||
|
||||
Image.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onRender: PropTypes.func,
|
||||
padding: PropTypes.number,
|
||||
children: PropTypes.node
|
||||
padding: PropTypes.number
|
||||
};
|
||||
|
||||
export default Image;
|
||||
|
@ -134,11 +134,11 @@ class Loop extends Base {
|
||||
}
|
||||
|
||||
Loop.propTypes = {
|
||||
skip: PropTypes.bool,
|
||||
repeat: PropTypes.bool,
|
||||
children: PropTypes.node.isRequired,
|
||||
greedy: PropTypes.bool,
|
||||
label: PropTypes.string,
|
||||
children: PropTypes.node.isRequired
|
||||
skip: PropTypes.bool,
|
||||
repeat: PropTypes.bool
|
||||
};
|
||||
|
||||
export default Loop;
|
||||
|
@ -23,29 +23,41 @@ class Text extends Base {
|
||||
|
||||
textRef = text => this.text = text
|
||||
|
||||
renderContent() {
|
||||
const { children, quoted } = this.props;
|
||||
if (!quoted) {
|
||||
return children;
|
||||
}
|
||||
|
||||
return <React.Fragment>
|
||||
<tspan style={ style.textQuote }>“</tspan>
|
||||
<tspan>{ children }</tspan>
|
||||
<tspan style={ style.textQuote }>”</tspan>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { transform } = this.state || {};
|
||||
const { style: styleProp, children } = this.props;
|
||||
|
||||
const textProps = {
|
||||
style: { ...style.text, ...styleProp },
|
||||
style: { ...style.text },
|
||||
transform,
|
||||
ref: this.textRef
|
||||
};
|
||||
|
||||
return <text { ...textProps }>
|
||||
{ children }
|
||||
{ this.renderContent() }
|
||||
</text>;
|
||||
}
|
||||
}
|
||||
|
||||
Text.propTypes = {
|
||||
style: PropTypes.object,
|
||||
transform: PropTypes.string,
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.node),
|
||||
PropTypes.node
|
||||
]).isRequired
|
||||
]).isRequired,
|
||||
quoted: PropTypes.bool,
|
||||
transform: PropTypes.string
|
||||
};
|
||||
|
||||
export default Text;
|
||||
|
@ -138,12 +138,12 @@ class VerticalLayout extends Base {
|
||||
}
|
||||
|
||||
VerticalLayout.propTypes = {
|
||||
spacing: PropTypes.number,
|
||||
withConnectors: PropTypes.bool,
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.node),
|
||||
PropTypes.node
|
||||
]).isRequired
|
||||
]).isRequired,
|
||||
spacing: PropTypes.number,
|
||||
withConnectors: PropTypes.bool
|
||||
};
|
||||
|
||||
export default VerticalLayout;
|
||||
|
@ -2,13 +2,13 @@
|
||||
// instead of served as a CSS file. This is so styles are included in
|
||||
// downloaded SVG files.
|
||||
|
||||
//const green = '#bada55';
|
||||
const green = '#bada55';
|
||||
const brown = '#6b6659';
|
||||
//const tan = '#cbcbba';
|
||||
const tan = '#cbcbba';
|
||||
const black = '#000';
|
||||
const grey = '#908c83';
|
||||
const white = '#fff';
|
||||
//const red = '#b3151a';
|
||||
//const orange = '#fa0';
|
||||
const blue = '#dae9e5';
|
||||
|
||||
const fontFamily = 'Arial';
|
||||
const fontSize = '16px';
|
||||
@ -31,6 +31,9 @@ export default {
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
textQuote: {
|
||||
fill: grey
|
||||
},
|
||||
infoText: {
|
||||
fontSize: fontSizeSmall,
|
||||
fontFamily: fontFamily,
|
||||
@ -39,5 +42,24 @@ export default {
|
||||
pin: {
|
||||
fill: brown,
|
||||
...strokeBase
|
||||
},
|
||||
literalBox: {
|
||||
fill: blue,
|
||||
strokeWidth: '1px',
|
||||
stroke: black
|
||||
},
|
||||
escapeBox: {
|
||||
fill: green,
|
||||
strokeWidth: '1px',
|
||||
stroke: black
|
||||
},
|
||||
charClassBox: {
|
||||
fill: tan
|
||||
},
|
||||
captureBox: {
|
||||
fillOpacity: 0,
|
||||
...strokeBase,
|
||||
stroke: grey,
|
||||
strokeDasharray: '6,2'
|
||||
}
|
||||
};
|
||||
|
162
src/devel.js
162
src/devel.js
@ -18,104 +18,180 @@ const demoImage = {
|
||||
{
|
||||
type: 'Pin'
|
||||
},
|
||||
// Literal
|
||||
{
|
||||
type: 'VerticalLayout',
|
||||
type: 'Box',
|
||||
props: {
|
||||
withConnectors: true
|
||||
type: 'literalBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Loop',
|
||||
type: 'Text',
|
||||
props: {
|
||||
skip: false,
|
||||
repeat: true
|
||||
quoted: true
|
||||
},
|
||||
children: [
|
||||
'Literal'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Escape sequence
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
type: 'escapeBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Text',
|
||||
children: [
|
||||
'Escape'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Character class
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
type: 'charClassBox',
|
||||
label: 'Label',
|
||||
padding: 10
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'VerticalLayout',
|
||||
children: [
|
||||
{
|
||||
type: 'HorizontalLayout',
|
||||
props: {
|
||||
spacing: 5
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
type: 'literalBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Text',
|
||||
props: {
|
||||
quoted: true
|
||||
},
|
||||
children: [
|
||||
'a'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Text',
|
||||
children: [
|
||||
'-'
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
type: 'literalBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Text',
|
||||
props: {
|
||||
quoted: true
|
||||
},
|
||||
children: [
|
||||
'z'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
style: { fill: '#bada55' },
|
||||
radius: 3
|
||||
type: 'escapeBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Text',
|
||||
children: [
|
||||
'Demo Text'
|
||||
'Escape'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
// Capture group
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
type: 'captureBox',
|
||||
label: 'group #1',
|
||||
useAnchors: true,
|
||||
padding: 10
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Loop',
|
||||
type: 'VerticalLayout',
|
||||
props: {
|
||||
skip: true,
|
||||
repeat: false
|
||||
withConnectors: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
style: { fill: '#bada55' },
|
||||
radius: 3
|
||||
type: 'literalBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Text',
|
||||
props: {
|
||||
quoted: true
|
||||
},
|
||||
children: [
|
||||
'Demo Text'
|
||||
'a'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Loop',
|
||||
props: {
|
||||
skip: true,
|
||||
repeat: true,
|
||||
greedy: true
|
||||
},
|
||||
children: [
|
||||
},
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
style: { fill: '#bada55' },
|
||||
radius: 3
|
||||
type: 'literalBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Text',
|
||||
props: {
|
||||
quoted: true
|
||||
},
|
||||
children: [
|
||||
'Demo Text'
|
||||
'b'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Loop',
|
||||
props: {
|
||||
skip: true,
|
||||
repeat: true,
|
||||
label: 'Loop label'
|
||||
},
|
||||
children: [
|
||||
},
|
||||
{
|
||||
type: 'Box',
|
||||
props: {
|
||||
style: { fill: '#bada55' },
|
||||
radius: 3
|
||||
type: 'literalBox'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'Text',
|
||||
props: {
|
||||
quoted: true
|
||||
},
|
||||
children: [
|
||||
'Demo Text'
|
||||
'c'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user