Add panning and zooming to SVG map element

For comparison [see this commit][commit]

Nothing exciting here. The ergonomics is similar to the Stimulus version.

[commit]: seanpdoyle@532d02c

app/components/SeatingMap.js

@@ -1,5 +1,5 @@
 import React from 'react'
-
+import svgPanZoom from 'svg-pan-zoom'
 const buildSectionElements = (sections) => {
   return sections.map((section, index) => {
     const seatElements = section.seats.map((seat) => (
@@ -31,6 +31,26 @@ const buildSectionElements = (sections) => {
 }
 
 export default class extends React.Component {
+  constructor(props) {
+    super(props)
+    this.svgRef = React.createRef()
+  }
+
+  componentDidMount() {
+    this.map = svgPanZoom(this.svgRef.current, {
+      center: true,
+      fit: true,
+      zoomEnabled: false,
+      zoomScaleSensitivity: 0.75,
+      minZoom: 1.0,
+      maxZoom: 8,
+    })
+  }
+
+  componentWillUnmount() {
+    this.map.destroy()
+  }
+
   render() {
     const { sections } = this.props
     const sectionElements = buildSectionElements(sections)
@@ -43,6 +63,7 @@ export default class extends React.Component {
         width="1600px"
         height="1600px"
         viewBox="0 0 1600 1600"
+        ref={this.svgRef}
       >
         <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
         <svg style={{display: "none"}}>
@@ -66,7 +87,7 @@ export default class extends React.Component {
           </symbol>
         </svg>
         { sectionElements }
-      </svg>
+       </svg>
     )
   }
 }

package.json

@@ -12,7 +12,8 @@
     "react-dom": "^18.2.0",
     "sass": "^1.69.0",
     "react-inlinesvg": "^4.0.3",
-    "react-redux": "^8.1.2"
+    "react-redux": "^8.1.2",
+    "svg-pan-zoom": "^3.6.1"
   },
   "version": "0.1.0",
   "scripts": {

yarn.lock

@@ -456,6 +456,11 @@ scheduler@^0.23.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+svg-pan-zoom@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz#f880a1bb32d18e9c625d7715350bebc269b450cf"
+  integrity sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"