From ca516c3895b302cdb29d2916bf970c6024f0d601 Mon Sep 17 00:00:00 2001
From: Johny Ho <johny@thoughtbot.com>
Date: Fri, 15 May 2020 16:44:54 -0400
Subject: [PATCH] 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]: https://github.com/seanpdoyle/select-your-own-seat/commit/532d02c1e7c30c48c7e1deaa1f373cd5dda0ddb0
---
 app/components/SeatingMap.js | 25 +++++++++++++++++++++++--
 package.json                 |  3 ++-
 yarn.lock                    |  5 +++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/app/components/SeatingMap.js b/app/components/SeatingMap.js
index 828af8f..229d901 100644
--- a/app/components/SeatingMap.js
+++ b/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>
     )
   }
 }
diff --git a/package.json b/package.json
index 0b322f2..be5a9f4 100644
--- a/package.json
+++ b/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": {
diff --git a/yarn.lock b/yarn.lock
index 579293f..003e04d 100644
--- a/yarn.lock
+++ b/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"