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

[DOCS] Mouse Events on SVG Elements #42

Open
markwilx opened this issue Mar 11, 2021 · 1 comment
Open

[DOCS] Mouse Events on SVG Elements #42

markwilx opened this issue Mar 11, 2021 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@markwilx
Copy link

markwilx commented Mar 11, 2021

This is a fantastic library. Thank you for contributing it!

Describe the bug
I am attempting to register mouse events on individual SVG elements in order to create click-and-drag function. Mouse events "clickEvent" and "doubleClickEvent" are registering on svg-container but not on individual SVG elements, such as svg-circle.

To Reproduce

  1. Create an svg-circle HTML tag with mouse event listeners, such as the following:
    <svg-circle diameter=25 color="#FF0000" x=450 y=50 [classes]="classesCir"
    (clickEvent)="setToken($event)"
    (doubleClickEvent)="pickupToken($event)"
    ></svg-circle>
  2. Create event listeners, such as the following"
    setToken(evt) {
    const fid = id + "setToken(): ";
    console.log(fid);
    }

    pickupToken(evt) {
    const fid = id + "pickupToken(): " + JSON.stringify(evt);
    console.log(fid);
    }
  3. Execute the code and click on the SVG Circle. Note there is no output in the console.

I expect this may be a documentation error. For svg-circle, the demo and documentation at:
https://vvaldersteins.github.io/ngx-svg/home
indicate that clickEvent and doubleClickEvent are parameters of svg-circle.

But the GitHub documentation at:
https://github.com/vvaldersteins/ngx-svg#circle
does not indicate that clickEvent and doubleClickEvent are parameters of svg-circle.

Expected behavior
Registered mouse events occurring on the individual SVG elements should be handled.

Additional context
From other bug reports, it appears that SVG.js events can be referenced in ngx-sgv, such as these:
https://svgjs.com/docs/3.1/events/
Are these passed through ngx-svg?

Best,
Mark

@markwilx markwilx added the bug Something isn't working label Mar 11, 2021
@markwilx
Copy link
Author

Update: I attempted using Renderer2 to register an event listener with an svg-circle element, following the guidance on this website:
https://www.language-diary.com/2018/02/angular-event-listener-using-renderer2.html
(refer to #2, "Using Renderer2" for details).

I was unable to register an event listener for objects outside the svg-container, but failed to trigger any events on objects inside the svg-container using this method.

Mark

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants