Fleshing out expample render and cleaning up some SVG code

src/components/SVG/Box.js

@@ -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,
+  type: PropTypes.string
-  children: PropTypes.node
 };
 
 export default Box;

src/components/SVG/HorizontalLayout.js

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

src/components/SVG/Image.js

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

src/components/SVG/Loop.js

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

src/components/SVG/Text.js

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

src/components/SVG/VerticalLayout.js

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

src/components/SVG/style.js

@@ -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 blue = '#dae9e5';
-//const orange = '#fa0';
 
 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'
   }
 };

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,
+                quoted: true
-                repeat: 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' },
+                    type: 'escapeBox'
-                    radius: 3
                   },
                   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,
+                withConnectors: true
-                repeat: false
               },
               children: [
                 {
                   type: 'Box',
                   props: {
-                    style: { fill: '#bada55' },
+                    type: 'literalBox'
-                    radius: 3
                   },
                   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' },
+                    type: 'literalBox'
-                    radius: 3
                   },
                   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' },
+                    type: 'literalBox'
-                    radius: 3
                   },
                   children: [
                     {
                       type: 'Text',
+                      props: {
+                        quoted: true
+                      },
                       children: [
-                        'Demo Text'
+                        'c'
                       ]
                     }
                   ]