Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Slow performance (and crashes) for large SVG files #146

Closed
haykpetros opened this issue Sep 3, 2015 · 7 comments
Closed

Slow performance (and crashes) for large SVG files #146

haykpetros opened this issue Sep 3, 2015 · 7 comments
Labels
question

Comments

@haykpetros
Copy link

Currently one can use Init custom events handler to be notified when plugin is done initializing. But for large documents this can take a while, so it will be great if another event (maybe progress?) is added that will be raised on each step to make initialization process more interactive for end user.
@bumbu
Copy link
Owner

bumbu commented Sep 4, 2015

Library initializes very fast. There are no expensive steps in it. The only thing that may take time is SVG preload (that should be done outside of the library). So if we would add multiple initialization events, they would fire all at once. So there is no real use for this (except maybe debugging).

This could be a useful feature for the plugin system discussed in here #98.

@bumbu bumbu closed this as completed Sep 4, 2015
@haykpetros
Copy link
Author

Actually I did that already and still after SVG is loaded it takes significant amount of time to initialize plugin. May I ask what exactly is happening during that process?

@bumbu
Copy link
Owner

bumbu commented Sep 4, 2015

Can you please post an example so that it will get easier to debug.

There are not many things happening at initialization time, but you see that for yourself as the code is open source.

@haykpetros
Copy link
Author

Please use following link:

http://codepen.io/anon/pen/OyPwpb?editors=101.

You will see that document will load just fine. Then uncomment Line 25 in JS window and observe browser crashing:

  // useSvgPanZoom($svg.get(0));

You will need to enable Cross Origin Resource Sharing (CORS) in case you run into problems.

@bumbu
Copy link
Owner

bumbu commented Sep 4, 2015

I thought that you're talking about plugin being slow. For crashing you opened #145

There is one thing that is actually taking a lot of time. Zooming and panning is done by updating transform attribute of a g element. In your SVG you don't have a parent g element, instead it has ~70k rectangles. You can see here that if an SVG doesn't have a viewport then it will create a top-level g element and will copy all other elements into it. That's what takes so much time.

The solution is simple: add a parent g element into your SVG and insert all elements into it. You may also have multiple groups and use zooming and panning only for one of them (you can read more about that in documentation).

@haykpetros
Copy link
Author

Very interesting, thanks for pointing that out. Any idea why it is fine with 50K elements, but then suddenly crashes with 70K elements?

@bumbu
Copy link
Owner

bumbu commented Sep 5, 2015

It didn't crash for me, just took a while. So probably it depends on your computer resources (like memory and CPU)

@bumbu bumbu changed the title Add additional events that will notify user on initialization progress Slow performance (and crashes) for large SVG files Sep 6, 2015
@bumbu bumbu mentioned this issue Sep 6, 2015
Closed
@bumbu bumbu mentioned this issue Dec 10, 2017
Closed
@bumbu bumbu mentioned this issue Jan 14, 2018
Open
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue May 28, 2019
@seanpdoyle
WIP- add <g> bumbu/svg-pan-zoom#146
1536864
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue May 28, 2019
@seanpdoyle
Add panning and zooming to SVG map element
d0b61e8 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue May 28, 2019
@seanpdoyle
Add panning and zooming to SVG map element
df89be8 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue May 29, 2019
@seanpdoyle
Add panning and zooming to SVG map element
11d64e5 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
7207fee 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
46eec68 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
f40540c 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
17b3743 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
7e2acff 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
00cc2ed 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
ff89102 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
9459800 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jun 1, 2019
@seanpdoyle
Add panning and zooming to SVG map element
a884b89 
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 added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 20, 2020
@seanpdoyle
Add panning and zooming to SVG map element
e7050a6 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 20, 2020
@seanpdoyle
Add panning and zooming to SVG map element
71cd348 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 20, 2020
@seanpdoyle
Add panning and zooming to SVG map element
7c65d11 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 21, 2020
@seanpdoyle
Add panning and zooming to SVG map element
ed75604 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 21, 2020
@seanpdoyle
Add panning and zooming to SVG map element
f85bd4e 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 21, 2020
@seanpdoyle
Add panning and zooming to SVG map element
669863a 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
041c233 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
fca7ae5 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
eebe531 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
c1dbe61 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
a863af0 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
720209c 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
fc40329 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
f88fee3 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
05726b6 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
8de6d97 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
d2ac6f1 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
cd15bea 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
76b51ab 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
76222a5 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
4881b60 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 22, 2020
@seanpdoyle
Add panning and zooming to SVG map element
16ae736 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 23, 2020
@seanpdoyle
Add panning and zooming to SVG map element
3fb8612 
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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 24, 2020
@seanpdoyle
Add panning and zooming to SVG map element
f2137a7 
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]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 24, 2020
@seanpdoyle
Add panning and zooming to SVG map element
b59569d 
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]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 24, 2020
@seanpdoyle
Add panning and zooming to SVG map element
20d3bec 
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]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Mar 24, 2020
@seanpdoyle
Add panning and zooming to SVG map element
2c209e5 
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]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Apr 19, 2020
@seanpdoyle
Add panning and zooming to SVG map element
1a21d40 
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]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue May 29, 2020
@seanpdoyle
Add panning and zooming to SVG map element
532d02c 
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]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[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
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue Jul 17, 2020
@seanpdoyle
Add panning and zooming to SVG map element
9b4a4f6 
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]).

Desktop
---

![panning-zooming-click](https://user-images.githubusercontent.com/2575027/77386342-fa309f80-6d60-11ea-84b5-8b1e49386809.gif)

[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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bumbu @haykpetros