From fc403293a01602bbeee7b0d8e3de480b2b7b36a7 Mon Sep 17 00:00:00 2001 From: Sean Doyle 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]. 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 `` elements in an outer [`` 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]: https://github.com/ariutta/svg-pan-zoom/issues/146 --- .../controllers/hello_controller.js | 18 ------ .../controllers/seats_controller.js | 24 +++++++ app/views/seats/index.html.erb | 62 ++++++++++--------- package.json | 1 + yarn.lock | 5 ++ 5 files changed, 63 insertions(+), 47 deletions(-) delete mode 100644 app/javascript/controllers/hello_controller.js create mode 100644 app/javascript/controllers/seats_controller.js diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js deleted file mode 100644 index 28fdb137..00000000 --- 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: -// -//
-//

-//
- -import { Controller } from "stimulus" - -export default class extends Controller { - static targets = [ "output" ] - - connect() { - this.outputTarget.textContent = 'Hello, Stimulus!' - } -} diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js new file mode 100644 index 00000000..974b16f7 --- /dev/null +++ b/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() + } +} diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb index e697a911..ff613008 100644 --- a/app/views/seats/index.html.erb +++ b/app/views/seats/index.html.erb @@ -7,6 +7,7 @@
diff --git a/package.json b/package.json index 8dbf5289..7aacfb39 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", diff --git a/yarn.lock b/yarn.lock index c3c792f5..0fc29e12 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"