62 lines
2.4 KiB
JavaScript
62 lines
2.4 KiB
JavaScript
|
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 });
|