first commit

svg-events.mjs

@@ -0,0 +1,62 @@
+function getsvg(event) {
+    let t = event.target;
+    while(t && t.tagName.toLowerCase()!='svg') {
+      t = t.parentElement;
+    }
+    return t;
+}
+
+function getcoords(event) {
+    const t = getsvg(event);
+    const point = t.createSVGPoint()
+    point.x = event.clientX
+    point.y = event.clientY
+    const position = point.matrixTransform(t.getScreenCTM().inverse())                
+    return position;
+}
+
+var observer = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+        if (mutation.type === 'childList') {
+            Array
+                .from(mutation.addedNodes)
+                .forEach(function (node) {
+                    if(node.nodeType != document.ELEMENT_NODE || node.tagName.toLowerCase() !== 'svg') {
+                      return;
+                    }
+                    node.addEventListener('pointermove', function (event) {
+                        const t = getsvg(event);
+                        if(!t) {
+                            return;
+                        }
+                        const position = getcoords(event);
+                        const svgMoveEvent = new CustomEvent('svgmove', {
+                            detail: {x: position.x, y: position.y},
+                        });
+                        t.dispatchEvent(svgMoveEvent);
+                    });
+                    function svg_touch_event(name) {
+                        node.addEventListener(name, function(event) {
+                            const t = getsvg(event);
+                            if(!t) {
+                                return;
+                            }
+                            event.preventDefault();
+                            //event.stopPropagation();
+                            const touches = Array.from(event.changedTouches).map(touch => {
+                                const position = getcoords(touch);
+                                return {identifier: touch.identifier, position: position}
+                            });
+                            const touchEvent = new CustomEvent('svg'+name, {
+                                detail: touches
+                            });
+                            t.dispatchEvent(touchEvent);
+                        });
+                    };
+                    ['touchstart','touchmove','touchend'].forEach(svg_touch_event)
+                });
+        }
+    });
+});
+
+observer.observe(document.body, { childList: true, subtree: true });