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]: bumbu/svg-pan-zoom#146 [destroy]: https://github.com/ariutta/svg-pan-zoom/tree/3.6.0#public-api [disconnect]: https://stimulusjs.org/reference/lifecycle-callbacks#disconnection
seanpdoyle · Jun 1, 2019 · f40540c · f40540c
1 parent ae71db5
commit f40540c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 25 deletions.
diff --git 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", "section", "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")
   }
@@ -46,4 +62,12 @@ export default class extends Controller {
         section.removeAttribute("aria-hidden")
       })
   }
+
+  zoomIn() {
+    this.map.zoomIn()
+  }
+
+  zoomOut() {
+    this.map.zoomOut()
+  }
 }
diff --git a/app/views/seats/_frame.html.erb b/app/views/seats/_frame.html.erb
@@ -91,36 +91,39 @@
             </symbol>
           </svg>
 
-          <% sections.each do |section| %>
-            <g
-              data-target="seats.section"
-              data-price="<%= section.price %>"
-              data-included-opacity="1.0"
-              data-excluded-opacity="0.3"
-            >
-              <% section.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"
-                  >
-                  </use>
-                </a>
-              <% end %>
-            </g>
-          <% end %>
+          <g id="map-viewport">
+            <% sections.each do |section| %>
+              <g
+                data-target="seats.section"
+                data-price="<%= section.price %>"
+                data-included-opacity="1.0"
+                data-excluded-opacity="0.3"
+              >
+                <% section.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"
+                    >
+                    </use>
+                  </a>
+                <% end %>
+              </g>
+            <% 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",
@@ -132,6 +135,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
@@ -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
@@ -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"