muigui 0.0.5 → 0.0.6

package/package.json

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

package/src/controllers/create-controller.js

@@ -43,6 +43,8 @@ export function createController(object, property, ...args) {
       return new Button(object, property, ...args);
     case 'string':
       return new Text(object, property, ...args);
+    case 'undefined':
+      throw new Error(`no property named ${property}`);
     default:
       throw new Error(`unhandled type ${t} for property ${property}`);
   }

package/src/libs/conversions.js

@@ -1,3 +1,7 @@
+import {
+  makeRangeConverters,
+} from './utils.js';
+
 export const identity = {
   to: v => v,
   from: v => [true, v],
@@ -12,3 +16,7 @@ export const strToNumber = {
     return [!Number.isNaN(newV), newV];
   },
 };
+
+export const converters = {
+  radToDeg: makeRangeConverters({to: [0, 180], from: [0, Math.PI]}),
+};

package/src/libs/utils.js

@@ -52,4 +52,23 @@ export function copyExistingProperties(dst, src) {
     }
   }
   return dst;
-}
+}
+
+export const mapRange = (v, inMin, inMax, outMin, outMax) => (v - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+
+export const makeRangeConverters = ({from, to}) => {
+  return {
+    to: v => mapRange(v, ...from, ...to),
+    from: v => [true, mapRange(v, ...to, ...from)],
+  };
+};
+
+export const makeRangeOptions = ({from, to, step}) => {
+  return {
+    min: to[0],
+    max: to[1],
+    ...(step && {step}),
+    converters: makeRangeConverters({from, to}),
+  };
+};
+

package/src/muigui.js

@@ -1,6 +1,14 @@
 import css from './styles/muigui.css.js';
 import {createElem} from './libs/elem.js';
 import {createController} from './controllers/create-controller.js';
+import {
+  mapRange,
+  makeRangeConverters,
+  makeRangeOptions,
+} from './libs/utils.js';
+import {
+  converters
+} from './libs/conversions.js';
 import Canvas from './controllers/Canvas.js';
 import Color from './controllers/Color.js';
 import Divider from './controllers/Divider.js';
@@ -48,6 +56,11 @@ export class GUIFolder extends Folder {
 }
 
 export class GUI extends GUIFolder {
+  static converters = converters;
+  static mapRange = mapRange;
+  static makeRangeConverters = makeRangeConverters;
+  static makeRangeOptions = makeRangeOptions;
+
   constructor(options = {}) {
     super('Controls', 'muigui-root');
     if (options instanceof HTMLElement) {
@@ -80,7 +93,7 @@ export class GUI extends GUIFolder {
     if (title) {
       this.title(title);
     }
-    this.domElement.classList.add('muigui');
+    this.domElement.classList.add('muigui', 'muigui-colors');
   }
 }
 

package/src/styles/muigui.css.js

@@ -1,41 +1,73 @@
-const css = `
+export default `
+.muigui-colors {
+  --bg-color: #ddd;
+  --color: #222;
+  --value-color: #145 ;
+  --value-bg-color: #eeee;
+  --disabled-color: #999;
+  --menu-bg-color: #f8f8f8;
+  --menu-sep-color: #bbb;
+  --hover-bg-color: #999;
+  --focus-color: #68C;
+  --range-color: #888888;
+  --invalid-color: #FF0000;
+  --selected-color: rgb(255, 255, 255, 0.9);
+
+  --button-bg-color: var(--value-bg-color);
+
+  --range-left-color: var(--value-color);
+  --range-right-color: var(--value-bg-color); 
+  --range-right-hover-color: var(--hover-bg-color);
+
+  color: var(--color);
+  background-color: var(--bg-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  .muigui-colors {
+    --bg-color: #222222;
+    --color: #dddddd;
+    --value-color: #43e5f7;
+    --value-bg-color: #444444;
+    --disabled-color: #666666;
+    --menu-bg-color: #080808;
+    --menu-sep-color: #444444;
+    --hover-bg-color: #666666;
+    --focus-color: #88AAFF;
+    --range-color: #888888;
+    --invalid-color: #FF6666;
+    --selected-color: rgba(255, 255, 255, 0.3);
+
+    --button-bg-color: var(--value-bg-color);
+
+    --range-left-color: var(--value-color);
+    --range-right-color: var(--value-bg-color); 
+    --range-right-hover-color: var(--hover-bg-color);
+
+    color: var(--color);
+    background-color: var(--bg-color);
+  }
+}
+
 .muigui {
   --width: 250px;
   --label-width: 45%;
   --number-width: 40%;
 
-  --bg-color: #222222;
-  --color: #dddddd;
-  --value-color: #43e5f7;
-  --value-bg-color: #444444;
-  --disabled-color: #666666;
-  --menu-bg-color: #000000;
-  --menu-sep-color: #444444;
-  --hover-bg-color: #666666;
-  --focus-color: #88AAFF;
-  --range-color: #888888;
-  --invalid-color: #FF6666;
-  --selected-color: rgba(255, 255, 255, 0.3);
-
-  --button-bg-color: var(--value-bg-color);
 
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
   --font-size: 11px;
   --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;
   --font-size-mono: 11px;
 
-  --range-left-color: var(--value-color);
-  --range-right-color: var(--value-bg-color);
-  --range-right-hover-color: var(--hover-bg-color);
   --line-height: 1.7em;
   --border-radius: 0px;
 
   width: var(--width);
-  color: var(--color);
-  background-color: var(--bg-color);
   font-family: var(--font-family);
   font-size: var(--font-size);
   box-sizing: border-box;
+  line-height: 100%;
 }
 .muigui * {
   box-sizing: inherit;
@@ -647,5 +679,4 @@ const css = `
 }
 
 `;
-export default css;
 

package/src/views/CheckboxView.js

@@ -7,10 +7,10 @@ export default class CheckboxView extends EditView {
       type: 'checkbox',
       id,
       onInput: () => {
-        setter.setValue(this.domElement.checked);
+        setter.setValue(checkboxElem.checked);
       },
       onChange: () => {
-        setter.setFinalValue(this.domElement.checked);
+        setter.setFinalValue(checkboxElem.checked);
       },
     });
     super(createElem('label', {}, [checkboxElem]));