55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
|
|
import { Container } from './Elements/Container';
|
|
import { ContainerModel } from '../../Interfaces/ContainerModel';
|
|
import { Selector } from './Elements/Selector';
|
|
|
|
interface ISVGProps {
|
|
width: number
|
|
height: number
|
|
children: ContainerModel | ContainerModel[] | null
|
|
selected: ContainerModel | null
|
|
}
|
|
|
|
export class SVG extends React.PureComponent<ISVGProps> {
|
|
public static ID = 'svg';
|
|
|
|
render(): JSX.Element {
|
|
const xmlns = '<http://www.w3.org/2000/svg>';
|
|
|
|
const properties = {
|
|
width: this.props.width,
|
|
height: this.props.height,
|
|
xmlns
|
|
};
|
|
|
|
let children: React.ReactNode | React.ReactNode[] = [];
|
|
if (Array.isArray(this.props.children)) {
|
|
children = this.props.children.map(child => <Container key={`container-${child.properties.id}`} model={child}/>);
|
|
} else if (this.props.children !== null) {
|
|
children = <Container key={`container-${this.props.children.properties.id}`} model={this.props.children}/>;
|
|
}
|
|
|
|
return (
|
|
<div id={SVG.ID}>
|
|
<UncontrolledReactSVGPanZoom
|
|
width={window.innerWidth}
|
|
height={window.innerHeight}
|
|
background={'#ffffff'}
|
|
defaultTool='pan'
|
|
miniatureProps={{
|
|
position: 'left',
|
|
background: '#616264',
|
|
width: window.innerWidth - 12,
|
|
height: 120
|
|
}}
|
|
>
|
|
<svg {...properties}>
|
|
{ children }
|
|
<Selector selected={this.props.selected} />
|
|
</svg>
|
|
</UncontrolledReactSVGPanZoom>
|
|
</div>
|
|
);
|
|
};
|
|
}
|