90 lines
2.1 KiB
TypeScript
90 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { AvailableContainer } from '../Interfaces/AvailableContainer';
|
|
import { Container } from './Elements/Container';
|
|
import { MainContainer } from './Elements/MainContainer';
|
|
import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
|
|
|
|
interface ISVGProps {
|
|
MainContainer: AvailableContainer
|
|
}
|
|
|
|
interface ISVGState {
|
|
viewBox: number[],
|
|
value: Value,
|
|
tool: Tool
|
|
}
|
|
|
|
export class SVG extends React.Component<ISVGProps> {
|
|
public state: ISVGState;
|
|
public svg: React.RefObject<SVGSVGElement>;
|
|
|
|
constructor(props: ISVGProps) {
|
|
super(props);
|
|
this.state = {
|
|
viewBox: [
|
|
0,
|
|
0,
|
|
window.innerWidth,
|
|
window.innerHeight
|
|
],
|
|
value: {
|
|
viewerWidth: window.innerWidth,
|
|
viewerHeight: window.innerHeight,
|
|
SVGHeight: this.props.MainContainer.Height,
|
|
SVGWidth: this.props.MainContainer.Width
|
|
} as Value,
|
|
tool: TOOL_PAN
|
|
};
|
|
this.svg = React.createRef<SVGSVGElement>();
|
|
}
|
|
|
|
resizeViewBox() {
|
|
this.setState({
|
|
viewBox: [
|
|
0,
|
|
0,
|
|
window.innerWidth,
|
|
window.innerHeight
|
|
]
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener('resize', this.resizeViewBox.bind(this));
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener('resize', this.resizeViewBox.bind(this));
|
|
}
|
|
|
|
render() {
|
|
const xmlns = '<http://www.w3.org/2000/svg>';
|
|
|
|
const properties = {
|
|
viewBox: this.state.viewBox.join(' '),
|
|
xmlns
|
|
};
|
|
|
|
const children: Container[] = [];
|
|
|
|
return (
|
|
<ReactSVGPanZoom
|
|
width={window.innerWidth}
|
|
height={window.innerHeight}
|
|
background={'#ffffff'}
|
|
defaultTool='pan'
|
|
value={this.state.value} onChangeValue={value => this.setState({ value })}
|
|
tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
|
|
>
|
|
<svg ref={this.svg} {...properties}>
|
|
<MainContainer
|
|
width={this.props.MainContainer.Width}
|
|
height={this.props.MainContainer.Height}
|
|
>
|
|
{ children }
|
|
</MainContainer>
|
|
</svg>
|
|
</ReactSVGPanZoom>
|
|
);
|
|
};
|
|
}
|