Add panning and zooming to SVG map element

This commit adds a dependency on the [`svg-pan-zoom`
package][svg-pan-zoom].

To manage the configuration and execution of that plugin, this commit
introduces `controllers/seats_controller` JavaScript module. [That
module will be instantiated with elements that declare
`data-controller="seats"`][controllers].

Once an element with `data-controller="seats"` exists on the page, the
module's [`connect()` life cycle hook][connect] will be invoked, which
will initiate the `svgPanZoom` plugin configuration, passing a reference
to `this.element` as the DOM Node to attach the map to.

Additionally, This commit wraps the collection of `<use>` elements in an
outer [`<g>` element][g-element] (as suggested by
[aritutta/svg-pan-zoom#146]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[controllers]: https://stimulusjs.org/reference/controllers
[connect]: https://stimulusjs.org/reference/lifecycle-callbacks#connection
[svg-pan-zoom]: https://github.com/ariutta/svg-pan-zoom/tree/3.6.0
[g-element]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
[aritutta/svg-pan-zoom#146]: bumbu/svg-pan-zoom#146

app/javascript/controllers/seats_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "stimulus"
+import svgPanZoom from "svg-pan-zoom"
+
+export default class extends Controller {
+  static targets = [
+    "map",
+  ]
+
+  connect() {
+    this.map = svgPanZoom(this.mapTarget, {
+      center: true,
+      fit: true,
+      zoomEnabled: false,
+      zoomScaleSensitivity: 0.75,
+      minZoom: 1.0,
+      maxZoom: 8,
+    })
+  }
+
+  disconnect() {
+    this.map.destroy()
+  }
+}

app/views/seats/index.html.erb

@@ -7,6 +7,7 @@
 <main class="syos-site-frame__main">
   <section
     class="syos-frame"
+    data-controller="seats"
   >
     <div class="syos-frame__map">
       <nav class="syos-frame__floor-nav syos-floor-nav">
@@ -84,6 +85,7 @@
         width="1600px"
         height="1600px"
         viewBox="0 0 1600 1600"
+        data-target="seats.map"
       >
         <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
 

package.json

@@ -7,6 +7,7 @@
     "breakpoint-sass": "2.7.1",
     "dialog-polyfill": "^0.5.0",
     "stimulus": "^1.1.1",
+    "svg-pan-zoom": "^3.6.0",
     "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",

yarn.lock

@@ -6788,6 +6788,11 @@ supports-color@^7.0.0:
   dependencies:
     has-flag "^4.0.0"
 
+svg-pan-zoom@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.0.tgz#31d8137d7e079e8f059effd85c7605b0567b6e4b"
+  integrity sha512-ZBEL2z/n/W2fLLFzn3NTQgd+7QEfbrKvKmu29U3qvMflmJgLaWkwKbOzWJYESFidTiGYMHkijAKmY6m64moyYg==
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"