diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 9583571..c5404a2 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -5,12 +5,13 @@ import { ContainerModel } from './Elements/ContainerModel'; import { Selector } from './Elements/Selector'; interface ISVGProps { + width: number, + height: number, children: ContainerModel | ContainerModel[] | null, selected: ContainerModel | null } interface ISVGState { - viewBox: number[], value: Value, tool: Tool } @@ -22,12 +23,6 @@ export class SVG extends React.Component { constructor(props: ISVGProps) { super(props); this.state = { - viewBox: [ - 0, - 0, - window.innerWidth, - window.innerHeight - ], value: { viewerWidth: window.innerWidth, viewerHeight: window.innerHeight @@ -37,30 +32,12 @@ export class SVG extends React.Component { this.svg = React.createRef(); } - 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 = ''; const properties = { - viewBox: this.state.viewBox.join(' '), + width: this.props.width, + height: this.props.height, xmlns }; @@ -79,6 +56,12 @@ export class SVG extends React.Component { defaultTool='pan' value={this.state.value} onChangeValue={value => this.setState({ value })} tool={this.state.tool} onChangeTool={tool => this.setState({ tool })} + miniatureProps={{ + position: 'left', + background: '#616264', + width: window.innerWidth - 12, + height: 120 + }} > { children } diff --git a/src/Editor.tsx b/src/Editor.tsx index 5e24be6..3834f42 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -327,11 +327,15 @@ class Editor extends React.Component { ☰ History - + { current.MainContainer }