Merged PR 203: Improve responsive design and refactor layout

src/Components/SVG/Elements/Container.tsx

@@ -9,6 +9,7 @@ interface IContainerProps {
   model: IContainerModel
   depth: number
   scale: number
+  selectContainer: (containerId: string) => void
 }
 
 /**
@@ -22,6 +23,7 @@ export function Container(props: IContainerProps): JSX.Element {
       model={child}
       depth={props.depth + 1}
       scale={props.scale}
+      selectContainer={props.selectContainer}
     />);
 
   const width: number = props.model.properties.width;
@@ -54,6 +56,7 @@ export function Container(props: IContainerProps): JSX.Element {
       width={width}
       height={height}
       style={style}
+      onClick={() => props.selectContainer(props.model.properties.id)}
     >
     </rect>);
 

src/Components/SVG/SVG.scss

@@ -1,12 +0,0 @@
-text {
-  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 18px;
-  //font-weight: 800;
-  //fill: #fff;
-  fill-opacity: 1;
-  //stroke: #ffffff;
-  stroke-width: 1px;
-  stroke-linecap: butt;
-  stroke-linejoin: miter;
-  stroke-opacity: 1;
-}

src/Components/SVG/SVG.tsx

@@ -1,10 +1,8 @@
-import './SVG.scss';
 import * as React from 'react';
 import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { Selector } from './Elements/Selector/Selector';
-import { BAR_WIDTH } from '../Bar/Bar';
 import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
 import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
 import { SymbolLayer } from './Elements/SymbolLayer';
@@ -12,11 +10,15 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { DimensionLayer } from './Elements/DimensionLayer';
 
 interface ISVGProps {
+  className?: string
+  viewerWidth: number
+  viewerHeight: number
   width: number
   height: number
   children: ContainerModel
   selected?: ContainerModel
   symbols: Map<string, ISymbolModel>
+  selectContainer: (containerId: string) => void
 }
 
 interface Viewer {
@@ -26,29 +28,7 @@ interface Viewer {
 
 export const ID = 'svg';
 
-function UseSVGAutoResizer(
-  setViewer: React.Dispatch<React.SetStateAction<Viewer>>
-): void {
-  React.useEffect(() => {
-    function OnResize(): void {
-      setViewer({
-        viewerWidth: window.innerWidth - BAR_WIDTH,
-        viewerHeight: window.innerHeight
-      });
-    }
-    window.addEventListener('resize', OnResize);
-
-    return () => {
-      window.removeEventListener('resize', OnResize);
-    };
-  });
-}
-
 export function SVG(props: ISVGProps): JSX.Element {
-  const [viewer, setViewer] = React.useState<Viewer>({
-    viewerWidth: window.innerWidth - BAR_WIDTH,
-    viewerHeight: window.innerHeight
-  });
   const [tool, setTool] = React.useState<Tool>(TOOL_PAN);
   const [value, setValue] = React.useState<Value>({} as Value);
   const [scale, setScale] = React.useState<number>(value.a ?? 1);
@@ -63,7 +43,6 @@ export function SVG(props: ISVGProps): JSX.Element {
   // const startTimer = React.useRef(Date.now());
   // console.log(renderCounter.current / ((Date.now() - startTimer.current) / 1000));
 
-  UseSVGAutoResizer(setViewer);
   UseFitOnce(svgViewer, props.width, props.height);
 
   const xmlns = '<http://www.w3.org/2000/svg>';
@@ -79,14 +58,15 @@ export function SVG(props: ISVGProps): JSX.Element {
     model={props.children}
     depth={0}
     scale={scale}
+    selectContainer={props.selectContainer}
   />;
 
   return (
-    <div id={ID} className='ml-16'>
+    <div id={ID} className={props.className}>
       <ReactSVGPanZoom
         ref={svgViewer}
-        width={viewer.viewerWidth}
-        height={viewer.viewerHeight}
+        width={props.viewerWidth}
+        height={props.viewerHeight}
         tool={tool} onChangeTool={setTool}
         value={value} onChangeValue={(value: Value) => {
           // Framerate limiter