muigui 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muigui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A Simple GUI",
   "main": "muigui.js",
   "module": "src/muigui.js",

package/src/libs/touch.js

@@ -17,7 +17,7 @@ export function computeRelativePosition(elem, event, start) {
 
 export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}) {
   let start;
-  const mouseMove = function(event) {
+  const pointerMove = function(event) {
     const e = {
       type: 'move',
       ...computeRelativePosition(elem, event, start),
@@ -25,15 +25,21 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}
     onMove(e);
   };
 
-  const mouseUp = function() {
-    window.removeEventListener('mousemove', mouseMove);
-    window.removeEventListener('mouseup', mouseUp);
+  const pointerUp = function(event) {
+    elem.releasePointerCapture(event.pointerId);
+    elem.removeEventListener('pointermove', pointerMove);
+    elem.removeEventListener('pointerup', pointerUp);
+ 
+    document.body.style.backgroundColor = '';
+ 
     onUp('up');
   };
 
-  const mouseDown = function(event) {
-    window.addEventListener('mousemove', mouseMove);
-    window.addEventListener('mouseup', mouseUp);
+  const pointerDown = function(event) {
+    elem.addEventListener('pointermove', pointerMove);
+    elem.addEventListener('pointerup', pointerUp);
+    elem.setPointerCapture(event.pointerId);
+
     const rel = computeRelativePosition(elem, event);
     start = [rel.x, rel.y];
     onDown({
@@ -42,9 +48,9 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}
     });
   };
 
-  elem.addEventListener('mousedown', mouseDown);
+  elem.addEventListener('pointerdown', pointerDown);
 
   return function() {
-    elem.removeEventListener('mousedown', mouseDown);
+    elem.removeEventListener('pointerdown', pointerDown);
   };
 }

package/src/styles/muigui.css.js

@@ -41,6 +41,16 @@ const css = `
   box-sizing: inherit;
 }
 
+.muigui-no-scroll {
+  touch-action: none;
+}
+.muigui-no-h-scroll {
+  touch-action: pan-y;
+}
+.muigui-no-v-scroll {
+  touch-action: pan-x;
+}
+
 .muigui-invalid-value {
   background-color: red !important;
   color: white !important;

package/src/views/ColorChooserView.js

@@ -59,6 +59,7 @@ export default class ColorChooserView extends EditView {
   constructor(setter) {
     super(createElem('div', {
       innerHTML: svg,
+      className: 'muigui-no-scroll',
     }));
     this.#satLevelElem = this.domElement.children[0];
     this.#hueUIElem = this.domElement.children[1];

package/src/views/DirectionView.js

@@ -63,7 +63,7 @@ export default class DirectionView extends EditView {
   constructor(setter, options = {}) {
     const wheelHelper = createWheelHelper();
     super(createElem('div', {
-      className: 'muigui-direction',
+      className: 'muigui-direction muigui-no-scroll',
       innerHTML: svg,
       onWheel: e => {
         e.preventDefault();

package/src/views/SliderView.js

@@ -102,6 +102,7 @@ export default class SliderView extends EditView {
     const wheelHelper = createWheelHelper();
     super(createElem('div', {
       innerHTML: svg,
+      className: 'muigui-no-v-scroll',
       onWheel: e => {
         e.preventDefault();
         const {min, max, step} = this.#options;

package/src/views/Vec2View.js

@@ -22,6 +22,7 @@ export default class Vec2View extends EditView {
   constructor(setter) {
     super(createElem('div', {
       innerHTML: svg,
+      className: 'muigui-no-scroll',
     }));
     const onTouch = (e) => {
       const {width, height} = this.#svgElem.getBoundingClientRect();