import React from 'react';
import styled from 'styled-components';
import LoopCache from '../../../api/LoopCache';
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
import LoopService from '../../../api/LoopService';
import LoopComponentConverter from './LoopComponentConverter';
-const LoopViewSvgDivStyled = styled.div`
- overflow: hidden;
+const LoopViewSvgDivStyled = styled.svg`
+ display: flex;
+ flex-direction: row;
+ overflow-x: scroll;
background-color: ${props => (props.theme.loopViewerBackgroundColor)};
border: 1px solid;
border-color: ${props => (props.theme.loopViewerHeaderColor)};
+ margin-top: 1em;
margin-left: auto;
margin-right:auto;
- text-align: center;
+ margin-bottom: -3em;
+ align-items: center;
+ height: 100%;
+ width: 100%;
`
state = {
svgContent: LoopViewSvg.emptySvg,
loopCache: new LoopCache({}),
- componentModalMapping: new Map([]),
+ componentModalMapping: new Map([])
}
constructor(props) {
}
componentWillReceiveProps(newProps) {
- this.setState({
- loopCache: newProps.loopCache,
- componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache),
-
- });
- this.getSvg(newProps.loopCache.getLoopName());
+ if (this.state.loopCache !== newProps.loopCache) {
+ this.setState({
+ loopCache: newProps.loopCache,
+ componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache)
+ });
+ this.getSvg(newProps.loopCache.getLoopName());
+ }
}
getSvg(loopName) {
this.setState({ svgContent: LoopViewSvg.emptySvg })
}
});
+ } else {
+ this.setState({ svgContent: LoopViewSvg.emptySvg })
}
}
}
}
-export default withRouter(LoopViewSvg);
\ No newline at end of file
+export default withRouter(LoopViewSvg);