Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Replace svg-pan-zoom by react-svg-pan-zoom

Browse source
This commit is contained in:
Siklos 2022-07-31 17:34:47 +02:00
parent d4a89f7f9d
commit 6db63d5a47
8 changed files with 95 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.tsx
View file

@ -58,9 +58,9 @@ class App extends React.Component<IAppProps> {
return (
<div className="App font-sans h-full">
<Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleSidebar()} />
<button className='fixed z-0 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
<button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
<SVGSidebar isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
<button className='fixed z-0 top-4 right-4 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>&#9776; Menu</button>
<button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>&#9776; Menu</button>
<SVG MainContainer={this.state.configuration.MainContainer} />
</div>
);

2
src/Components/SVGSidebar/SVGSidebar.tsx
View file

@ -9,7 +9,7 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
public render() {
const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
return (
<div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-10 ${isOpenClasses}`}>
<div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className='w-full h-auto p-4 flex justify-start' onClick={this.props.onClick}>
<button className='text-lg'>&times;</button>
</div>

2
src/Components/Sidebar/Sidebar.tsx
View file

@ -17,7 +17,7 @@ export default class Sidebar extends React.Component<ISidebarProps> {
const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64';
return (
<div className={`fixed bg-blue-500 dark:bg-blue-500 text-white transition-all h-screen w-64 overflow-y-auto z-10 ${isOpenClasses}`}>
<div className={`fixed bg-blue-500 dark:bg-blue-500 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className='w-full h-auto p-4 flex justify-end' onClick={this.props.onClick}>
<button className='text-lg'>&times;</button>
</div>

37
src/SVG/SVG.tsx
View file

@ -2,14 +2,16 @@ import * as React from 'react';
import { AvailableContainer } from '../Interfaces/AvailableContainer';
import { Container } from './Elements/Container';
import { MainContainer } from './Elements/MainContainer';
import * as SvgPanZoom from 'svg-pan-zoom';
import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
interface ISVGProps {
MainContainer: AvailableContainer
}
interface ISVGState {
viewBox: number[]
viewBox: number[],
value: Value,
tool: Tool
}
export class SVG extends React.Component<ISVGProps> {
@ -24,7 +26,14 @@ export class SVG extends React.Component<ISVGProps> {
0,
window.innerWidth,
window.innerHeight
]
],
value: {
viewerWidth: window.innerWidth,
viewerHeight: window.innerHeight,
SVGHeight: this.props.MainContainer.Height,
SVGWidth: this.props.MainContainer.Width
} as Value,
tool: TOOL_PAN
};
this.svg = React.createRef<SVGSVGElement>();
}
@ -41,16 +50,11 @@ export class SVG extends React.Component<ISVGProps> {
}
componentDidMount() {
if (this.svg === null ||
this.svg === undefined ||
this.svg.current === null) {
return;
}
const settings: SvgPanZoom.Options = {
zoomScaleSensitivity: 1
};
window.addEventListener('resize', this.resizeViewBox.bind(this));
}
SvgPanZoom(this.svg.current, settings);
componentWillUnmount() {
window.removeEventListener('resize', this.resizeViewBox.bind(this));
}
render() {
@ -64,6 +68,14 @@ export class SVG extends React.Component<ISVGProps> {
const children: Container[] = [];
return (
<ReactSVGPanZoom
width={window.innerWidth}
height={window.innerHeight}
background={'#ffffff'}
defaultTool='pan'
value={this.state.value} onChangeValue={value => this.setState({ value })}
tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
>
<svg ref={this.svg} {...properties}>
<MainContainer
width={this.props.MainContainer.Width}
@ -72,6 +84,7 @@ export class SVG extends React.Component<ISVGProps> {
{ children }
</MainContainer>
</svg>
</ReactSVGPanZoom>
);
};
}