root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fleshing out expample render and cleaning up some SVG code

Browse Source
This commit is contained in:
Jeff Avallone 2018-02-16 21:48:01 -05:00
parent 82b780e9c3
commit 6bc4306ca3
8 changed files with 181 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/SVG/Box.js
View File

@ -7,7 +7,8 @@ import style from './style';
/** @extends React.PureComponent */ /** @extends React.PureComponent */
class Box extends Base { class Box extends Base {
static defaultProps = { static defaultProps = {
padding: 5 padding: 5,
radius: 3
} }
preReflow() { preReflow() {
@ -43,11 +44,11 @@ class Box extends Base {
labelRef = label => this.label = label labelRef = label => this.label = label
render() { 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 { width, height, labelTransform, rectTransform, contentTransform } = this.state || {};
const rectProps = { const rectProps = {
style: propStyle, style: type ? style[type] : {},
width, width,
height, height,
rx: radius, rx: radius,
@ -73,12 +74,12 @@ class Box extends Base {
} }
Box.propTypes = { Box.propTypes = {
children: PropTypes.node,
label: PropTypes.string,
padding: PropTypes.number, padding: PropTypes.number,
useAnchors: PropTypes.bool, useAnchors: PropTypes.bool,
style: PropTypes.object,
radius: PropTypes.number, radius: PropTypes.number,
label: PropTypes.string, type: PropTypes.string
children: PropTypes.node
}; };
export default Box; export default Box;

6
src/components/SVG/HorizontalLayout.js
View File

@ -96,12 +96,12 @@ class HorizontalLayout extends Base {
} }
HorizontalLayout.propTypes = { HorizontalLayout.propTypes = {
spacing: PropTypes.number,
withConnectors: PropTypes.bool,
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node), PropTypes.arrayOf(PropTypes.node),
PropTypes.node PropTypes.node
]).isRequired ]).isRequired,
spacing: PropTypes.number,
withConnectors: PropTypes.bool
}; };
export default HorizontalLayout; export default HorizontalLayout;

4
src/components/SVG/Image.js
View File

@ -95,9 +95,9 @@ class Image extends Base {
} }
Image.propTypes = { Image.propTypes = {
children: PropTypes.node,
onRender: PropTypes.func, onRender: PropTypes.func,
padding: PropTypes.number, padding: PropTypes.number
children: PropTypes.node
}; };
export default Image; export default Image;

6
src/components/SVG/Loop.js
View File

@ -134,11 +134,11 @@ class Loop extends Base {
} }
Loop.propTypes = { Loop.propTypes = {
skip: PropTypes.bool, children: PropTypes.node.isRequired,
repeat: PropTypes.bool,
greedy: PropTypes.bool, greedy: PropTypes.bool,
label: PropTypes.string, label: PropTypes.string,
children: PropTypes.node.isRequired skip: PropTypes.bool,
repeat: PropTypes.bool
}; };
export default Loop; export default Loop;

24
src/components/SVG/Text.js
View File

@ -23,29 +23,41 @@ class Text extends Base {
textRef = text => this.text = text textRef = text => this.text = text
renderContent() {
const { children, quoted } = this.props;
if (!quoted) {
return children;
}
return <React.Fragment>
<tspan style={ style.textQuote }>&ldquo;</tspan>
<tspan>{ children }</tspan>
<tspan style={ style.textQuote }>&rdquo;</tspan>
</React.Fragment>;
}
render() { render() {
const { transform } = this.state || {}; const { transform } = this.state || {};
const { style: styleProp, children } = this.props;
const textProps = { const textProps = {
style: { ...style.text, ...styleProp }, style: { ...style.text },
transform, transform,
ref: this.textRef ref: this.textRef
}; };
return <text { ...textProps }> return <text { ...textProps }>
{ children } { this.renderContent() }
</text>; </text>;
} }
} }
Text.propTypes = { Text.propTypes = {
style: PropTypes.object,
transform: PropTypes.string,
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node), PropTypes.arrayOf(PropTypes.node),
PropTypes.node PropTypes.node
]).isRequired ]).isRequired,
quoted: PropTypes.bool,
transform: PropTypes.string
}; };
export default Text; export default Text;

6
src/components/SVG/VerticalLayout.js
View File

@ -138,12 +138,12 @@ class VerticalLayout extends Base {
} }
VerticalLayout.propTypes = { VerticalLayout.propTypes = {
spacing: PropTypes.number,
withConnectors: PropTypes.bool,
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node), PropTypes.arrayOf(PropTypes.node),
PropTypes.node PropTypes.node
]).isRequired ]).isRequired,
spacing: PropTypes.number,
withConnectors: PropTypes.bool
}; };
export default VerticalLayout; export default VerticalLayout;

30
src/components/SVG/style.js
View File

@ -2,13 +2,13 @@
// instead of served as a CSS file. This is so styles are included in // instead of served as a CSS file. This is so styles are included in
// downloaded SVG files. // downloaded SVG files.
//const green = '#bada55'; const green = '#bada55';
const brown = '#6b6659'; const brown = '#6b6659';
//const tan = '#cbcbba'; const tan = '#cbcbba';
const black = '#000'; const black = '#000';
const grey = '#908c83';
const white = '#fff'; const white = '#fff';
//const red = '#b3151a'; const blue = '#dae9e5';
//const orange = '#fa0';
const fontFamily = 'Arial'; const fontFamily = 'Arial';
const fontSize = '16px'; const fontSize = '16px';
@ -31,6 +31,9 @@ export default {
fontSize: fontSize, fontSize: fontSize,
fontFamily: fontFamily fontFamily: fontFamily
}, },
textQuote: {
fill: grey
},
infoText: { infoText: {
fontSize: fontSizeSmall, fontSize: fontSizeSmall,
fontFamily: fontFamily, fontFamily: fontFamily,
@ -39,5 +42,24 @@ export default {
pin: { pin: {
fill: brown, fill: brown,
...strokeBase ...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'
} }
}; };

200
src/devel.js
View File

@ -18,104 +18,180 @@ const demoImage = {
{ {
type: 'Pin' type: 'Pin'
}, },
// Literal
{
type: 'Box',
props: {
type: 'literalBox'
},
children: [
{
type: 'Text',
props: {
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: {
type: 'escapeBox'
},
children: [
{
type: 'Text',
children: [
'Escape'
]
}
]
}
]
}
]
},
// Capture group
{
type: 'Box',
props: {
type: 'captureBox',
label: 'group #1',
useAnchors: true,
padding: 10
},
children: [
{ {
type: 'VerticalLayout', type: 'VerticalLayout',
props: { props: {
withConnectors: true withConnectors: true
}, },
children: [
{
type: 'Loop',
props: {
skip: false,
repeat: true
},
children: [ children: [
{ {
type: 'Box', type: 'Box',
props: { props: {
style: { fill: '#bada55' }, type: 'literalBox'
radius: 3
}, },
children: [ children: [
{ {
type: 'Text', type: 'Text',
children: [
'Demo Text'
]
}
]
}
]
},
{
type: 'Loop',
props: { props: {
skip: true, quoted: true
repeat: false
}, },
children: [ children: [
'a'
]
}
]
},
{ {
type: 'Box', type: 'Box',
props: { props: {
style: { fill: '#bada55' }, type: 'literalBox'
radius: 3
}, },
children: [ children: [
{ {
type: 'Text', type: 'Text',
children: [
'Demo Text'
]
}
]
}
]
},
{
type: 'Loop',
props: { props: {
skip: true, quoted: true
repeat: true,
greedy: true
}, },
children: [ children: [
'b'
]
}
]
},
{ {
type: 'Box', type: 'Box',
props: { props: {
style: { fill: '#bada55' }, type: 'literalBox'
radius: 3
}, },
children: [ children: [
{ {
type: 'Text', type: 'Text',
children: [
'Demo Text'
]
}
]
}
]
},
{
type: 'Loop',
props: { props: {
skip: true, quoted: true
repeat: true,
label: 'Loop label'
}, },
children: [ children: [
{ 'c'
type: 'Box',
props: {
style: { fill: '#bada55' },
radius: 3
},
children: [
{
type: 'Text',
children: [
'Demo Text'
] ]
} }
] ]