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

Add svgpanzoom

Browse source
This commit is contained in:
Siklos 2022-07-31 14:35:41 +02:00
parent c8c135fa7c
commit 3dc67f88c9
4 changed files with 28 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

13
package-lock.json generated
View file

@ -9,7 +9,8 @@
"version": "0.0.0",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"svg-pan-zoom": "^3.6.1"
},
"devDependencies": {
"@types/react": "^18.0.15",
@ -4063,6 +4064,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/svg-pan-zoom": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz",
"integrity": "sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g=="
},
"node_modules/tailwindcss": {
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz",
@ -7164,6 +7170,11 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true
},
"svg-pan-zoom": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz",
"integrity": "sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g=="
},
"tailwindcss": {
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz",

3
package.json
View file

@ -10,7 +10,8 @@
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"svg-pan-zoom": "^3.6.1"
},
"devDependencies": {
"@types/react": "^18.0.15",

4
src/App.scss
View file

@ -1,5 +1,7 @@
html,
body,
#root {
#root,
svg {
height: 100%;
width: 100%;
}

15
src/SVG/SVG.tsx
View file

@ -2,6 +2,7 @@ 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';
interface ISVGProps {
MainContainer: AvailableContainer
@ -13,6 +14,7 @@ interface ISVGState {
export class SVG extends React.Component<ISVGProps> {
public state: ISVGState;
public svg: React.RefObject<SVGSVGElement>;
constructor(props: ISVGProps) {
super(props);
@ -24,9 +26,10 @@ export class SVG extends React.Component<ISVGProps> {
window.innerHeight
]
};
this.svg = React.createRef<SVGSVGElement>();
}
updateViewBox() {
resizeViewBox() {
this.setState({
viewBox: [
0,
@ -38,11 +41,13 @@ export class SVG extends React.Component<ISVGProps> {
}
componentDidMount() {
window.addEventListener('resize', this.updateViewBox.bind(this));
if (this.svg === null ||
this.svg === undefined ||
this.svg.current === null) {
return;
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateViewBox.bind(this));
svgPanZoom(this.svg.current);
}
render() {
@ -56,7 +61,7 @@ export class SVG extends React.Component<ISVGProps> {
const children: Container[] = [];
return (
<svg {...properties}>
<svg ref={this.svg} {...properties}>
<MainContainer
width={this.props.MainContainer.Width}
height={this.props.MainContainer.Height}