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]).

[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,24 @@
+import { Controller } from "stimulus"
+import svgPanZoom from "svg-pan-zoom"
+
+export default class extends Controller {
+  static targets = [
+    "map",
+  ]
+
+  connect() {
+    this.map = svgPanZoom(this.mapTarget, {
+      viewportSelector: "#map-viewport",
+      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>
 
@@ -108,36 +110,38 @@
           </symbol>
         </svg>
 
-        <% sections.each do |section| %>
-          <g
-            <% if params.fetch(:maximum, Float::INFINITY).to_f >= section.price %>
-              opacity="1.0"
-            <% else %>
-              opacity="0.3"
-              aria-hidden="true"
-            <% end %>
-          >
-            <% section.seats.each do |seat| %>
-              <a
-                href="<%= venue_floor_seat_path(venue, floor, seat.row_number) %>"
-                aria-label="<%= seat.row_number %>"
-              >
-                <use
-                  <% if Current.cart.include?(seat) %>
-                    xlink:href="#seat-icon-selected"
-                  <% else %>
-                    xlink:href="#seat-icon-unselected"
-                  <% end %>
-                  width="12px"
-                  height="12px"
-                  x="<%= seat.x %>"
-                  y="<%= seat.y %>"
+        <g id="map-viewport">
+          <% sections.each do |section| %>
+            <g
+              <% if params.fetch(:maximum, Float::INFINITY).to_f >= section.price %>
+                opacity="1.0"
+              <% else %>
+                opacity="0.3"
+                aria-hidden="true"
+              <% end %>
+            >
+              <% section.seats.each do |seat| %>
+                <a
+                  href="<%= venue_floor_seat_path(venue, floor, seat.row_number) %>"
+                  aria-label="<%= seat.row_number %>"
                 >
-                </use>
-              </a>
-            <% end %>
-          </g>
-        <% end %>
+                  <use
+                    <% if Current.cart.include?(seat) %>
+                      xlink:href="#seat-icon-selected"
+                    <% else %>
+                      xlink:href="#seat-icon-unselected"
+                    <% end %>
+                    width="12px"
+                    height="12px"
+                    x="<%= seat.x %>"
+                    y="<%= seat.y %>"
+                  >
+                  </use>
+                </a>
+              <% end %>
+            </g>
+          <% end %>
+        </g>
       </svg>
     </div>
 

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"