Fix viewer not resizing on window resize
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
a059a3d710
commit
e120072cd9
1 changed files with 31 additions and 2 deletions
|
@ -11,8 +11,37 @@ interface ISVGProps {
|
||||||
selected: ContainerModel | null
|
selected: ContainerModel | null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ISVGState {
|
||||||
|
viewerWidth: number,
|
||||||
|
viewerHeight: number,
|
||||||
|
}
|
||||||
|
|
||||||
export class SVG extends React.PureComponent<ISVGProps> {
|
export class SVG extends React.PureComponent<ISVGProps> {
|
||||||
public static ID = 'svg';
|
public static ID = 'svg';
|
||||||
|
public state: ISVGState;
|
||||||
|
|
||||||
|
constructor(props: ISVGProps) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
viewerWidth: window.innerWidth,
|
||||||
|
viewerHeight: window.innerHeight
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeViewBox(): void {
|
||||||
|
this.setState({
|
||||||
|
viewerWidth: window.innerWidth,
|
||||||
|
viewerHeight: window.innerHeight
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(): void {
|
||||||
|
window.addEventListener('resize', this.resizeViewBox.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount(): void {
|
||||||
|
window.removeEventListener('resize', this.resizeViewBox.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
render(): JSX.Element {
|
render(): JSX.Element {
|
||||||
const xmlns = '<http://www.w3.org/2000/svg>';
|
const xmlns = '<http://www.w3.org/2000/svg>';
|
||||||
|
@ -33,8 +62,8 @@ export class SVG extends React.PureComponent<ISVGProps> {
|
||||||
return (
|
return (
|
||||||
<div id={SVG.ID}>
|
<div id={SVG.ID}>
|
||||||
<UncontrolledReactSVGPanZoom
|
<UncontrolledReactSVGPanZoom
|
||||||
width={window.innerWidth}
|
width={this.state.viewerWidth}
|
||||||
height={window.innerHeight}
|
height={this.state.viewerHeight}
|
||||||
background={'#ffffff'}
|
background={'#ffffff'}
|
||||||
defaultTool='pan'
|
defaultTool='pan'
|
||||||
miniatureProps={{
|
miniatureProps={{
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue