muigui 0.0.2 → 0.0.4

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "muigui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A Simple GUI",
   "main": "muigui.js",
   "module": "src/muigui.js",
+  "type": "module",
   "scripts": {
-    "build": "npm run build-min",
+    "build": "npm run build-normal",
     "build-normal": "rollup -c",
     "build-min": "rollup -c",
     "eslint": "eslint \"**/*.js\"",
@@ -35,9 +36,9 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "eslint": "^8.20.0",
-    "eslint-plugin-html": "^6.2.0",
+    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-optional-comma-spacing": "0.0.4",
     "eslint-plugin-require-trailing-comma": "0.0.1",
-    "rollup": "^2.77.0"
+    "rollup": "^3.20.2"
   }
 }

package/src/controllers/create-controller.js

@@ -28,6 +28,12 @@ export function createController(object, property, ...args) {
   const t = typeof object[property];
   switch (t) {
     case 'number':
+      if (typeof args[0] === 'number' && typeof args[1] === 'number') {
+        const min = args[0];
+        const max = args[1];
+        const step = args[2];
+        return new Range(object, property, {min, max, ...(step && {step})});
+      }
       return args.length === 0
           ? new TextNumber(object, property, ...args)
           : new Range(object, property, ...args);

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

@@ -2,6 +2,7 @@ const css = `
 .muigui {
   --width: 250px;
   --label-width: 45%;
+  --number-width: 40%;
 
   --bg-color: #222222;
   --color: #dddddd;
@@ -40,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;
@@ -182,10 +193,10 @@ const css = `
   min-width: 0;
 }
 .muigui-value>*:nth-child(1) {
-  flex: 1 1 60%;
+  flex: 1 1 calc(100% - var(--number-width));
 }
 .muigui-value>*:nth-child(2) {
-  flex: 1 1 40%;
+  flex: 1 1 var(--number-width);
   margin-left: 0.2em;
 }
 

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

@@ -17,7 +17,7 @@ export default class RadioGridView extends EditView {
           value: ndx,
           onChange: function() {
             if (this.checked) {
-              setter.setFinalValue(that._values[this.value]);
+              setter.setFinalValue(that.#values[this.value]);
             }
           },
         }),

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