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

3
package.json
View file

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

4
src/App.scss
View file

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

17
src/SVG/SVG.tsx
View file

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