From 6db63d5a47511cdc5d77756f636630e7de19eae1 Mon Sep 17 00:00:00 2001 From: Siklos Date: Sun, 31 Jul 2022 17:34:47 +0200 Subject: [PATCH] Replace svg-pan-zoom by react-svg-pan-zoom --- package-lock.json | 80 ++++++++++++++++++------ package.json | 3 +- src/App.tsx | 4 +- src/Components/SVGSidebar/SVGSidebar.tsx | 2 +- src/Components/Sidebar/Sidebar.tsx | 2 +- src/SVG/SVG.tsx | 37 +++++++---- tsconfig.json | 2 +- vite.config.ts | 6 +- 8 files changed, 95 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index e3541a2..0f9edb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,12 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "svg-pan-zoom": "^3.6.1" + "react-svg-pan-zoom": "^3.11.0" }, "devDependencies": { "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@types/react-svg-pan-zoom": "^3.3.5", "@typescript-eslint/eslint-plugin": "^5.31.0", "@typescript-eslint/parser": "^5.31.0", "@vitejs/plugin-react": "^2.0.0", @@ -630,6 +631,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-svg-pan-zoom": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/react-svg-pan-zoom/-/react-svg-pan-zoom-3.3.5.tgz", + "integrity": "sha512-W8GRFCDy7raSDr5OXGjSyvX5KmdWlIQfv0NLa1jfAYVUO4ClVbgorWeAAom7nY3Pl+4h9blXE1Bnu2CW1iMEvQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -3239,7 +3249,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3630,7 +3639,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3704,8 +3712,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.0", @@ -3716,6 +3723,21 @@ "node": ">=0.10.0" } }, + "node_modules/react-svg-pan-zoom": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/react-svg-pan-zoom/-/react-svg-pan-zoom-3.11.0.tgz", + "integrity": "sha512-xK2tpfp4YksHOfyMZH5zXP52ARLSBgkoJgWNJmJ1B+6O1tkuf23TQp7Q4m9GG5IRSK5KWO0JEGEWlNYG9+iiug==", + "dependencies": { + "prop-types": "^15.8.0", + "transformation-matrix": "^2.11.1" + }, + "funding": { + "url": "https://www.paypal.me/chrvadala/25" + }, + "peerDependencies": { + "react": ">=17.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -4064,11 +4086,6 @@ "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", @@ -4142,6 +4159,14 @@ "node": ">=8.0" } }, + "node_modules/transformation-matrix": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/transformation-matrix/-/transformation-matrix-2.12.0.tgz", + "integrity": "sha512-BbzXM7el7rNwIr1s87m8tcffH5qgY+HYROLn3BStRU9Y6vYTL37YZKadfNPEvGbP813iA1h8qflo4pa2TomkyQ==", + "funding": { + "url": "https://www.paypal.me/chrvadala/25" + } + }, "node_modules/tsconfig-paths": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz", @@ -4857,6 +4882,15 @@ "@types/react": "*" } }, + "@types/react-svg-pan-zoom": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/react-svg-pan-zoom/-/react-svg-pan-zoom-3.3.5.tgz", + "integrity": "sha512-W8GRFCDy7raSDr5OXGjSyvX5KmdWlIQfv0NLa1jfAYVUO4ClVbgorWeAAom7nY3Pl+4h9blXE1Bnu2CW1iMEvQ==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -6623,8 +6657,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, "object-hash": { "version": "3.0.0", @@ -6879,7 +6912,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -6924,8 +6956,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-refresh": { "version": "0.14.0", @@ -6933,6 +6964,15 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-svg-pan-zoom": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/react-svg-pan-zoom/-/react-svg-pan-zoom-3.11.0.tgz", + "integrity": "sha512-xK2tpfp4YksHOfyMZH5zXP52ARLSBgkoJgWNJmJ1B+6O1tkuf23TQp7Q4m9GG5IRSK5KWO0JEGEWlNYG9+iiug==", + "requires": { + "prop-types": "^15.8.0", + "transformation-matrix": "^2.11.1" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -7170,11 +7210,6 @@ "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", @@ -7234,6 +7269,11 @@ "is-number": "^7.0.0" } }, + "transformation-matrix": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/transformation-matrix/-/transformation-matrix-2.12.0.tgz", + "integrity": "sha512-BbzXM7el7rNwIr1s87m8tcffH5qgY+HYROLn3BStRU9Y6vYTL37YZKadfNPEvGbP813iA1h8qflo4pa2TomkyQ==" + }, "tsconfig-paths": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz", diff --git a/package.json b/package.json index fa7bf42..f6fc797 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,12 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "svg-pan-zoom": "^3.6.1" + "react-svg-pan-zoom": "^3.11.0" }, "devDependencies": { "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@types/react-svg-pan-zoom": "^3.3.5", "@typescript-eslint/eslint-plugin": "^5.31.0", "@typescript-eslint/parser": "^5.31.0", "@vitejs/plugin-react": "^2.0.0", diff --git a/src/App.tsx b/src/App.tsx index 89fae1a..00b0f4a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -58,9 +58,9 @@ class App extends React.Component { return (
this.ToggleSidebar()} /> - + this.ToggleSVGSidebar()}/> - +
); diff --git a/src/Components/SVGSidebar/SVGSidebar.tsx b/src/Components/SVGSidebar/SVGSidebar.tsx index 2a00072..5d1b184 100644 --- a/src/Components/SVGSidebar/SVGSidebar.tsx +++ b/src/Components/SVGSidebar/SVGSidebar.tsx @@ -9,7 +9,7 @@ export class SVGSidebar extends React.Component { public render() { const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64'; return ( -
+
diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index 41bcd14..8d806a5 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/src/Components/Sidebar/Sidebar.tsx @@ -17,7 +17,7 @@ export default class Sidebar extends React.Component { const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64'; return ( -
+
diff --git a/src/SVG/SVG.tsx b/src/SVG/SVG.tsx index e57d6cb..4591bfc 100644 --- a/src/SVG/SVG.tsx +++ b/src/SVG/SVG.tsx @@ -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 { @@ -24,7 +26,14 @@ export class SVG extends React.Component { 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(); } @@ -41,16 +50,11 @@ export class SVG extends React.Component { } 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 { const children: Container[] = []; return ( + this.setState({ value })} + tool={this.state.tool} onChangeTool={tool => this.setState({ tool })} + > { { children } + ); }; } diff --git a/tsconfig.json b/tsconfig.json index 323bf45..8d355ce 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, + "allowJs": true, "skipLibCheck": true, "esModuleInterop": false, "allowSyntheticDefaultImports": true, diff --git a/vite.config.ts b/vite.config.ts index b1b5f91..6549182 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()] -}) +});