muigui 0.0.3 → 0.0.5

package/package.json

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

package/src/esm.js

@@ -0,0 +1,12 @@
+import GUI from './muigui.js';
+
+export { default as ColorChooser } from './controllers/ColorChooser.js';
+export { default as Direction } from './controllers/Direction.js';
+export { default as RadioGrid } from './controllers/RadioGrid.js';
+export { default as Range } from './controllers/Range.js';
+export { default as Select } from './controllers/Select.js';
+export { default as Slider } from './controllers/Slider.js';
+export { default as TextNumber } from './controllers/TextNumber.js';
+export { default as Vec2 } from './controllers/Vec2.js';
+
+export default GUI;

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/umd.js

@@ -1,3 +1,21 @@
 import GUI from './muigui.js';
 
+import ColorChooser from './controllers/ColorChooser.js';
+import Direction from './controllers/Direction.js';
+import RadioGrid from './controllers/RadioGrid.js';
+import Range from './controllers/Range.js';
+import Select from './controllers/Select.js';
+import Slider from './controllers/Slider.js';
+import TextNumber from './controllers/TextNumber.js';
+import Vec2 from './controllers/Vec2.js';
+
+GUI.ColorChooser = ColorChooser;
+GUI.Direction = Direction;
+GUI.RadioGrid = RadioGrid;
+GUI.Range = Range;
+GUI.Select = Select;
+GUI.Slider = Slider;
+GUI.TextNumber = TextNumber;
+GUI.Vec2 = Vec2;
+
 export default GUI;

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();