Fix svg viewer position
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
Siklos 2022-08-08 11:31:33 +02:00
parent a42ac77d33
commit 6fe4025a58
2 changed files with 9 additions and 6 deletions

View file

@ -11,6 +11,8 @@ interface IBarProps {
ToggleTimeline: () => void ToggleTimeline: () => void
} }
export const BAR_WIDTH = 64; // 4rem
export const Bar: React.FC<IBarProps> = (props) => { export const Bar: React.FC<IBarProps> = (props) => {
return ( return (
<div className='fixed z-20 flex flex-col top-0 left-0 h-screen w-16 bg-slate-100'> <div className='fixed z-20 flex flex-col top-0 left-0 h-screen w-16 bg-slate-100'>

View file

@ -3,6 +3,7 @@ import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
import { Container } from './Elements/Container'; import { Container } from './Elements/Container';
import { ContainerModel } from '../../Interfaces/ContainerModel'; import { ContainerModel } from '../../Interfaces/ContainerModel';
import { Selector } from './Elements/Selector'; import { Selector } from './Elements/Selector';
import { BAR_WIDTH } from '../Bar/Bar';
interface ISVGProps { interface ISVGProps {
width: number width: number
@ -12,8 +13,8 @@ interface ISVGProps {
} }
interface ISVGState { interface ISVGState {
viewerWidth: number, viewerWidth: number
viewerHeight: number, viewerHeight: number
} }
export class SVG extends React.PureComponent<ISVGProps> { export class SVG extends React.PureComponent<ISVGProps> {
@ -23,14 +24,14 @@ export class SVG extends React.PureComponent<ISVGProps> {
constructor(props: ISVGProps) { constructor(props: ISVGProps) {
super(props); super(props);
this.state = { this.state = {
viewerWidth: window.innerWidth, viewerWidth: window.innerWidth - BAR_WIDTH,
viewerHeight: window.innerHeight viewerHeight: window.innerHeight
}; };
} }
resizeViewBox(): void { resizeViewBox(): void {
this.setState({ this.setState({
viewerWidth: window.innerWidth, viewerWidth: window.innerWidth - BAR_WIDTH,
viewerHeight: window.innerHeight viewerHeight: window.innerHeight
}); });
} }
@ -60,7 +61,7 @@ export class SVG extends React.PureComponent<ISVGProps> {
} }
return ( return (
<div id={SVG.ID}> <div id={SVG.ID} className='ml-16'>
<UncontrolledReactSVGPanZoom <UncontrolledReactSVGPanZoom
width={this.state.viewerWidth} width={this.state.viewerWidth}
height={this.state.viewerHeight} height={this.state.viewerHeight}
@ -69,7 +70,7 @@ export class SVG extends React.PureComponent<ISVGProps> {
miniatureProps={{ miniatureProps={{
position: 'left', position: 'left',
background: '#616264', background: '#616264',
width: window.innerWidth - 12, width: window.innerWidth - 12 - BAR_WIDTH,
height: 120 height: 120
}} }}
> >