Add panning and zooming to SVG map element

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

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".

Once an element with data-controller="seats" exists on the page, the module’s connect() life cycle hook 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 (as suggested by aritutta/svg-pan-zoom#146).

Desktop

panning-zooming-click


      app/javascript/controllers/hello_controller.js

diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js
deleted file mode 100644
index 28fdb13..0000000
--- a/app/javascript/controllers/hello_controller.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// Visit The Stimulus Handbook for more details 
-// https://stimulusjs.org/handbook/introduction
-// 
-// This example controller works with specially annotated HTML like:
-//
-// <div data-controller="hello">
-//   <h1 data-target="hello.output"></h1>
-// </div>
-
-import { Controller } from "stimulus"
-
-export default class extends Controller {
-  static targets = [ "output" ]
-
-  connect() {
-    this.outputTarget.textContent = 'Hello, Stimulus!'
-  }
-}


      app/javascript/controllers/seats_controller.js

diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js
new file mode 100644
index 0000000..17ea6df
--- /dev/null
+++ b/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

diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 5e31d3c..eac56a5 100644
--- a/app/views/seats/index.html.erb
+++ b/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

diff --git a/package.json b/package.json
index 8dbf528..7aacfb3 100644
--- a/package.json
+++ b/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

diff --git a/yarn.lock b/yarn.lock
index c3c792f..0fc29e1 100644
--- a/yarn.lock
+++ b/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"