@egjs/axes
Version:
A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.
127 lines (121 loc) • 3.76 kB
HTML
<style>
html, body {
position: relative;
margin: 0;
height: 100%;
}
p {
margin: 1px;
}
#div {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="div"></div>x
</body>
<script src="../../dist/axes.pkgd.min.js"></script>
<script>
// window.addEventListener("touchstart", e => {
// div.innerHTML += `<p>start: ${e.touches[0].clientX}</p>`;
// });
// window.addEventListener("scroll", e => {
// div.innerHTML += `<p>scroll</p>`;
// });
// window.addEventListener("touchmove", e => {
// const touch = e.touches[0];
// div.innerHTML += `<p>move: ${e.touches[0].clientX}</p>`;
// });
div.innerHTML += `<p>WID: ${ window.innerWidth}</p>`;
div.addEventListener("pointerdown", e => {
console.log("P", e);
// div.innerHTML += `<p>end: ${e.changedTouches[0].clientX}</p>`;
});
div.addEventListener("touchstart", e => {
console.log(e.touches.length, e.changedTouches.length);
div.innerHTML += `<p>end: ${e.changedTouches[0].clientX}</p>`;
});
window.addEventListener("touchend", e => {
console.log(e);
div.innerHTML += `<p>end: ${e.changedTouches[0].clientX}</p>`;
});
window.addEventListener("touchcancel", e => {
div.innerHTML += `<p>c: ${e.changedTouches[0].clientX}</p>`;
});
document.addEventListener("touchend", e => {
console.log(e);
div.innerHTML += `<p>en: ${e.changedTouches[0].clientX}</p>`;
});
document.addEventListener("mouseleave", e => {
div.innerHTML += `<p>leave</p>`;
});
window.addEventListener("mouseleave", e => {
div.innerHTML += `<p>mouseleave</p>`;
});
document.addEventListener("focusout", e => {
div.innerHTML += `<p>focusout</p>`;
});
window.addEventListener("focusout", e => {
div.innerHTML += `<p>focusout</p>`;
});
window.addEventListener("resize", () => {
div.innerHTML += `<p>re</p>`;
});
window.addEventListener("blur", () => {
div.innerHTML += `<p>bl</p>`;
});
window.addEventListener("gesturechange", () => {
div.innerHTML += `<p>gesturechange</p>`;
});
window.addEventListener("drag", () => {
div.innerHTML += `<p>drag</p>`;
});
window.addEventListener("orientationchange", () => {
div.innerHTML += `<p>orientationchange</p>`;
});
// window.addEventListener("mousemove", () => {
// div.innerHTML += `<p>mousemove</p>`;
// });
window.addEventListener("pagehide", () => {
div.innerHTML += `<p>pagehide</p>`;
});
window.addEventListener("pageshow", () => {
div.innerHTML += `<p>pageshow</p>`;
});
window.addEventListener("abort", () => {
div.innerHTML += `<p>abort</p>`;
});
document.addEventListener("gesturestart", e => {
div.innerHTML += `<p>gs</p>`;
});
const axes = new eg.Axes({
"x": {
range: [0, Infinity],
},
"y": {
range: [0, Infinity],
},
});
axes.on({
"change": evt => {
console.log(evt.inputEvent);
div.innerHTML += `<p>axes: ${evt.inputEvent.center.x}</p>`;
},
"release": e => {
console.log(e.inputEvent);
div.innerHTML += `<p>release</p>`;
e.stop();
},
"animationStart": e => {
e.stop();
}
});
const panInput = new eg.Axes.PanInput("#div", {
inputType: ["mouse", "touch"],
});
axes.connect("x y", panInput);
</script>