From 6bc4306ca3d14a1447cd67961b77b8211d39f68b Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Fri, 16 Feb 2018 21:48:01 -0500 Subject: [PATCH] Fleshing out expample render and cleaning up some SVG code --- src/components/SVG/Box.js | 13 +- src/components/SVG/HorizontalLayout.js | 6 +- src/components/SVG/Image.js | 4 +- src/components/SVG/Loop.js | 6 +- src/components/SVG/Text.js | 24 +++- src/components/SVG/VerticalLayout.js | 6 +- src/components/SVG/style.js | 30 ++++- src/devel.js | 162 ++++++++++++++++++------- 8 files changed, 181 insertions(+), 70 deletions(-) diff --git a/src/components/SVG/Box.js b/src/components/SVG/Box.js index a3bd49f..5f2dec7 100644 --- a/src/components/SVG/Box.js +++ b/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, - children: PropTypes.node + type: PropTypes.string }; export default Box; diff --git a/src/components/SVG/HorizontalLayout.js b/src/components/SVG/HorizontalLayout.js index 1d89bc2..615a62a 100644 --- a/src/components/SVG/HorizontalLayout.js +++ b/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; diff --git a/src/components/SVG/Image.js b/src/components/SVG/Image.js index 58af442..32aa994 100644 --- a/src/components/SVG/Image.js +++ b/src/components/SVG/Image.js @@ -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; diff --git a/src/components/SVG/Loop.js b/src/components/SVG/Loop.js index fc82b2a..6ad5a9f 100644 --- a/src/components/SVG/Loop.js +++ b/src/components/SVG/Loop.js @@ -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; diff --git a/src/components/SVG/Text.js b/src/components/SVG/Text.js index 516014a..05353c0 100644 --- a/src/components/SVG/Text.js +++ b/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 + “ + { children } + ” + ; + } + 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 - { children } + { this.renderContent() } ; } } 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; diff --git a/src/components/SVG/VerticalLayout.js b/src/components/SVG/VerticalLayout.js index f092fbd..a59890f 100644 --- a/src/components/SVG/VerticalLayout.js +++ b/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; diff --git a/src/components/SVG/style.js b/src/components/SVG/style.js index e55de45..3f5517d 100644 --- a/src/components/SVG/style.js +++ b/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 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' } }; diff --git a/src/devel.js b/src/devel.js index 3171ca3..3682843 100644 --- a/src/devel.js +++ b/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' ] } ]