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 */
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;

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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 }>&ldquo;</tspan>
<tspan>{ children }</tspan>
<tspan style={ style.textQuote }>&rdquo;</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;

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

@ -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;

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
// 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'
}
};

200
src/devel.js
View File

@ -18,104 +18,180 @@ const demoImage = {
{
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',
props: {
withConnectors: true
},
children: [
{
type: 'Loop',
props: {
skip: false,
repeat: true
},
children: [
{
type: 'Box',
props: {
style: { fill: '#bada55' },
radius: 3
type: 'literalBox'
},
children: [
{
type: 'Text',
children: [
'Demo Text'
]
}
]
}
]
},
{
type: 'Loop',
props: {
skip: true,
repeat: false
quoted: true
},
children: [
'a'
]
}
]
},
{
type: 'Box',
props: {
style: { fill: '#bada55' },
radius: 3
type: 'literalBox'
},
children: [
{
type: 'Text',
children: [
'Demo Text'
]
}
]
}
]
},
{
type: 'Loop',
props: {
skip: true,
repeat: true,
greedy: true
quoted: true
},
children: [
'b'
]
}
]
},
{
type: 'Box',
props: {
style: { fill: '#bada55' },
radius: 3
type: 'literalBox'
},
children: [
{
type: 'Text',
children: [
'Demo Text'
]
}
]
}
]
},
{
type: 'Loop',
props: {
skip: true,
repeat: true,
label: 'Loop label'
quoted: true
},
children: [
{
type: 'Box',
props: {
style: { fill: '#bada55' },
radius: 3
},
children: [
{
type: 'Text',
children: [
'Demo Text'
'c'
]
}
]