From 11d64e5a569eceda6eef4ffe993bbe27da752552 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Sun, 26 May 2019 22:12:01 -0400
Subject: [PATCH] Add panning and zooming to SVG map element

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

The plus and minus buttons introduced in the previous commit are
decorated with `data-action` declarations which route `click` events to
the `seats#zoomIn` and `seats#zoomOut` actions, respectively.

When navigating to other floors (i.e. navigations that trigger
`seats#discardMap`), [destroy the `svg-pan-zoom` provided instance]
during Stimulus' [`disconnect` lifecycle method][disconnect], which is
invoked during Turbolinks-initiated page visits, even for elements
annotated with `data-turbolinks-permanent`.

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

[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]: https://github.com/ariutta/svg-pan-zoom/issues/146
[destroy]: https://github.com/ariutta/svg-pan-zoom/tree/3.6.0#public-api
[disconnect]: https://stimulusjs.org/reference/lifecycle-callbacks#disconnection
---
 .../controllers/seats_controller.js           | 24 ++++++++++++
 app/views/seats/_frame.html.erb               | 38 ++++++++++---------
 package.json                                  |  1 +
 yarn.lock                                     |  5 +++
 4 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js
index e855d915..2b4c96ae 100644
--- a/app/javascript/controllers/seats_controller.js
+++ b/app/javascript/controllers/seats_controller.js
@@ -1,12 +1,28 @@
 import { Controller } from "stimulus"
+import svgPanZoom from "svg-pan-zoom"
 
 export default class extends Controller {
   static targets = [ "map", "seat", "selection" ]
 
   connect() {
+    this.map = svgPanZoom(this.mapTarget, {
+      viewportSelector: "#map-viewport",
+      center: true,
+      fit: true,
+      zoomEnabled: false,
+      zoomScaleSensitivity: 0.75,
+      minZoom: 1.0,
+      maxZoom: 8,
+    })
     this.selectSeats()
   }
 
+  disconnect() {
+    if (!this.mapTarget.hasAttribute("data-turbolinks-permanent")) {
+      this.map.destroy()
+    }
+  }
+
   discardMap() {
     this.mapTarget.removeAttribute("data-turbolinks-permanent")
   }
@@ -42,4 +58,12 @@ export default class extends Controller {
         seat.setAttribute("aria-hidden", false)
       })
   }
+
+  zoomIn() {
+    this.map.zoomIn()
+  }
+
+  zoomOut() {
+    this.map.zoomOut()
+  }
 }
diff --git a/app/views/seats/_frame.html.erb b/app/views/seats/_frame.html.erb
index 60800c9b..0104c841 100644
--- a/app/views/seats/_frame.html.erb
+++ b/app/views/seats/_frame.html.erb
@@ -91,28 +91,31 @@
             </symbol>
           </svg>
 
-          <% seats.each do |seat| %>
-            <a href="<%= venue_floor_seat_path(venue, floor, seat) %>" aria-label="<%= seat.row_number %>">
-              <use
-                xlink:href="#seat-icon-unselected"
-                width="12px"
-                height="12px"
-                x="<%= seat.x %>"
-                y="<%= seat.y %>"
-                data-target="seats.seat"
-                data-seat-id="<%= seat.id %>"
-                data-selected-icon="#seat-icon-selected"
-                data-unselected-icon="#seat-icon-unselected"
-                data-price="<%= seat.price %>"
-              >
-              </use>
-            </a>
-          <% end %>
+          <g id="map-viewport">
+            <% seats.each do |seat| %>
+              <a href="<%= venue_floor_seat_path(venue, floor, seat) %>" aria-label="<%= seat.row_number %>">
+                <use
+                  xlink:href="#seat-icon-unselected"
+                  width="12px"
+                  height="12px"
+                  x="<%= seat.x %>"
+                  y="<%= seat.y %>"
+                  data-target="seats.seat"
+                  data-seat-id="<%= seat.id %>"
+                  data-selected-icon="#seat-icon-selected"
+                  data-unselected-icon="#seat-icon-unselected"
+                  data-price="<%= seat.price %>"
+                >
+                </use>
+              </a>
+            <% end %>
+          </g>
         </svg>
 
         <div class="syos-frame__map-zoom syos-control-zoom">
           <button
             class="syos-button syos-button--transparent syos-control-zoom__button"
+            data-action="click->seats#zoomIn"
           >
             <%= inline_svg(
               "icons/plus.svg",
@@ -124,6 +127,7 @@
 
           <button
             class="syos-button syos-button--transparent syos-control-zoom__button"
+            data-action="click->seats#zoomOut"
           >
             <%= inline_svg(
               "icons/minus.svg",
diff --git a/package.json b/package.json
index 8301f98b..7e407286 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@rails/webpacker": "^4.0.2",
     "breakpoint-sass": "2.7.1",
     "stimulus": "^1.1.1",
+    "svg-pan-zoom": "^3.6.0",
     "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",
diff --git a/yarn.lock b/yarn.lock
index 1fe4a8f8..38e7cfeb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6396,6 +6396,11 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.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.2.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.2.2.tgz#0253d34eccf2aed4ad4f283e11ee75198f9d7316"