Fix stuck svg pan zoom + improve minimap

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<ISVGProps> {
   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<ISVGProps> {
     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(' '),
+      width: this.props.width,
+      height: this.props.height,
       xmlns
     };
 
@@ -79,6 +56,12 @@ export class SVG extends React.Component<ISVGProps> {
         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
+        }}
       >
         <svg ref={this.svg} {...properties}>
           { children }

src/Editor.tsx

@@ -327,11 +327,15 @@ class Editor extends React.Component<IEditorProps> {
             &#9776; History
         </button>
 
-        <SVG selected={current.SelectedContainer}>
+        <SVG
+          width={Number(current.MainContainer?.properties.width)}
+          height={Number(current.MainContainer?.properties.height)}
+          selected={current.SelectedContainer}
+        >
           { current.MainContainer }
         </SVG>
         <button
-          className={`fixed transition-all ${buttonRightOffsetClasses} bottom-10 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
+          className={`fixed transition-all ${buttonRightOffsetClasses} bottom-40 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
           title='Export as JSON'
           onClick={() => this.SaveEditor()}
         >