const DivStyled = styled.div`
overflow-x: scroll;
+ display: flex;
width: 100%;
height: 100%;
`
-const emptySvg = (<svg> <text x="20" y="40">No LOOP (SVG)</text> </svg>);
+const emptySvg = (<svg> <text x="60" y="40">No LOOP (SVG)</text> </svg>);
class SvgGenerator extends React.Component {
boxWidth = 200;
}
handleSvgClick(event) {
- if (this.state.clickable) {
- console.debug("svg click event received");
- var elementName = event.target.parentNode.getAttribute('policyId');
- console.info("SVG element clicked", elementName);
- if (elementName !== null) {
- this.props.history.push("/policyModal/"+event.target.parentNode.getAttribute('policyType')+"/"+elementName);
- }
+ console.debug("svg click event received");
+ if (this.state.clickable) {
+ var elementName = event.target.parentNode.getAttribute('policyId');
+ console.info("SVG element clicked", elementName);
+ // Only allow movement to policy editing IF there busyLoadingCOunt is 0,
+ // meaning we are not waiting for refreshStatus to complete, for example
+ if (elementName !== null && !this.props.isBusyLoading()) {
+ this.props.history.push("/policyModal/"+event.target.parentNode.getAttribute('policyType')+"/"+elementName);
+ }
}
}
render() {
var allTheElements = this.renderSvg();
var svgWidth = this.boxWidth*allTheElements.length;
- var svgHeight = this.boxHeight+100;
+ var svgHeight = this.boxHeight+50;
return (
+
<DivStyled onClick={this.handleSvgClick} >
- <svg height={svgHeight} width={svgWidth} preserveAspectRatio="none">
+ <svg height={svgHeight} width={svgWidth} viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
+ <svg x="-50" y="25">
{allTheElements}
+ </svg>
</svg>
</DivStyled>
);