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.

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

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

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.

@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 Dec 10, 2017
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue May 28, 2019
seanpdoyle added a commit to seanpdoyle/select-your-own-seat that referenced this issue May 28, 2019
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Labels
Projects
None yet
Development

No branches or pull requests

2 participants