Custom Elements: Extend SVG - Real coordinates on mouse events

Learn
4

Thanks, I did not know that I could fire Custom events and listen to them in Elm.

Using the same logic as for the port, but now listening for Events.on “mousemoveWithCoordinates” in Elm:

        let svg = document.getElementsByTagName('svg')[0]
        if (svg) {
            let point, position
            svg.addEventListener('mousemove', (e) => {
                point = svg.createSVGPoint()
                point.x = e.clientX
                point.y = e.clientY
                position = point.matrixTransform(svg.getScreenCTM().inverse())

                let event = new CustomEvent("mousemoveWithCoordinates", { detail: position })
                svg.dispatchEvent(event)
            })
        }
2 Likes