wip

greggman · Oct 24, 2023 · bdd8e3f · bdd8e3f
1 parent c11b978
commit bdd8e3f
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 50 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,5 @@
 test/js
 test/mocha.js
-/webgl-lint.js
+/webgl-lint.js
+dist
+examples/3rdParty
diff --git a/examples/custom.html b/examples/custom.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1">
+    <title>muigui - custom</title>
+  </head>
+  <body>
+
+  <script type="module">
+import GUI from '../../src/muigui.js';
+import ColorChooser from '../../src/controllers/ColorChooser.js';
+import Color from '../../src/controllers/Color.js';
+
+class Camera {
+  fov = 45;
+  near = 0.1;
+  far = 1000;
+  constructor() {}
+}
+
+class CameraController extends ComboController {
+  constuctor(camera) {
+    ??? fov, zNear, zFar
+    this.add(camera, 'fov', ...);
+    this.add(camera, 'zNear', ...);
+    this.add(camera, 'zFar', ...);
+  }
+}
+
+const s = {
+  someNumber: 123,
+  someString: "hello",
+  someColor: '#ED3281',
+  someOption: "dog",
+  someFunction: () => console.log('called')
+};
+
+// Questions:
+// * how can we pass more options (listen, name)
+// * is there a point to this?
+const options = new Map([
+  ['someNumber', [1, 200]],   // range 0 to 200
+  ['someOption', [['cat', 'bird', 'dog']]],
+  //someColor: ColorChooser,  // Why doesn't this work?
+  [Camera, CameraController],
+}]);
+
+const gui = new GUI();
+gui.add(s, options);
+//gui.addController(new ColorChooser(s, 'someColor'));
+//gui.addColor(s, 'someColor');
+  </script>
+  </body>
+</html>
diff --git a/examples/js/index.js b/examples/js/index.js
@@ -14,7 +14,7 @@ import ColorChooser from '../../src/controllers/ColorChooser.js';
 import RadioGrid from '../../src/controllers/RadioGrid.js';
 import Slider from '../../src/controllers/Slider.js';
 import Select from '../../src/controllers/Select.js';
-import Range from '../../src/controllers/Range.js';
+// import Range from '../../src/controllers/Range.js';
 import TextNumber from '../../src/controllers/TextNumber.js';
 
 const uiElem = document.querySelector('#ui');
@@ -45,6 +45,7 @@ const updateUIColors = (() => {
 })();
 updateUIColors();
 
+// eslint-disable-next-line no-constant-condition
 if (false) {
   const s = {
     speed: 0.5,
@@ -57,6 +58,7 @@ if (false) {
   gui.addColor(s, 'color');
 }
 
+// eslint-disable-next-line no-constant-condition
 if (true) {
 {
   const s = {
@@ -130,7 +132,7 @@ if (true) {
       unitSize: 30,
       ticksPerUnit: 15,
       thicksColor: 'transparent',
-    }));
+  }));
 
 
     gui.addDivider();
@@ -158,18 +160,20 @@ if (true) {
     f.add(s, 'hobby').onFinishChange(e => log(new Date(), e.value));
     f.add(s, 'propertyWithLongName', ['longNamedEnumThatWillPushSizeTooFar']);
     f.addController(new Direction(s, 'direction')).listen();
-    f.addController(new Direction(s, 'hour', {step: 360 / 12, conversion: {
-      to: v => {
-        const newV = (v - 3) * 360 / 12;
-        console.log('to:', v, newV);
-        return newV;
-      },
-      from: v => {
-        const newV = v * 12 / 360 + 3;
-        console.log('from:', v, newV);
-        return [true, newV];
+    f.addController(new Direction(s, 'hour', {
+      step: 360 / 12, conversion: {
+        to: v => {
+          const newV = (v - 3) * 360 / 12;
+          console.log('to:', v, newV);
+          return newV;
+        },
+        from: v => {
+          const newV = v * 12 / 360 + 3;
+          console.log('from:', v, newV);
+          return [true, newV];
+        },
       },
-    }})).listen();
+    })).listen();
     f.addController(new Vec2(s, 'vec', {range: 100})).listen();
     f.addController(new ColorChooser(s, 'c2')).listen();
 
@@ -185,7 +189,7 @@ if (true) {
       lTime2 += elapsedTime * s.period2;
       const res = 2;
       resizeCanvasToDisplaySize(ctx.canvas, res);
-      
+
       const width = ctx.canvas.width;
       const height = ctx.canvas.height;
       if (width && height) {
@@ -488,12 +492,6 @@ if (true) {
 }
 
 const updateAppearance = function() {
-
-  const themeElem = document.createElement('style');
-  document.head.appendChild(themeElem);
-  const styleElem = document.createElement('style');
-  document.head.appendChild(styleElem);
-
   const themes = {
     default: '',
     'default-mono': `
@@ -577,8 +575,9 @@ const updateAppearance = function() {
   uiElem.appendChild(div);
   const gui = new GUI(div).name('Appearance');
   gui.addController(new Select({theme: 'default'}, 'theme', {keyValues: [...Object.keys(themes)]})).onChange(v => {
-    themeElem.textContent = themes[v];
-    styleElem.textContent = '';
+//    themeElem.textContent = themes[v];
+//    styleElem.textContent = '';
+    GUI.setStyles(themes[v]);
     updateAppearance();
   });
 
@@ -594,16 +593,16 @@ const updateAppearance = function() {
   };
 
   const folder = gui.addFolder('Style');
-  const rule = getCSSRulesBySelector('.muigui')[0];  // assuming the first one
+  const rule = getCSSRulesBySelector('.muigui', GUI.getStyleSheet())[0];  // assuming the first one
   const varNames = Object.values(rule.style).filter(s => s.startsWith('--'));
   const obj = {};
   const controllersByKey = {};
 
   const updateStyles = () => {
-    styleElem.textContent = `.muigui {\n${
+    GUI.setStyles(`.muigui {\n${
       [...Object.entries(obj)].map(([key, value]) => {
         return `${key}: ${value};`;
-      }).join('\n')}\n}`;
+      }).join('\n')}\n}`);
     updateUIColors();
   };
 
@@ -626,7 +625,7 @@ const updateAppearance = function() {
 
   return function() {
     const map = new Map();
-    for (const rule of getCSSRulesBySelector('.muigui')) {
+    for (const rule of getCSSRulesBySelector('.muigui', GUI.getStyleSheet())) {
       const varNames = Object.values(rule.style).filter(s => s.startsWith('--'));
       for (const key of varNames) {
         const value = rule.style.getPropertyValue(key).trim();

diff --git a/examples/layout/layout.js b/examples/layout/layout.js
@@ -27,3 +27,5 @@ const botRow = root.add(new Row());
 topRow.add(new Frame({size: [1, 1]}));
 topRow.add(new Frame({size: [1, 1]}));
 head.add(new )
+
+*/
diff --git a/src/controllers/PopDownController.js b/src/controllers/PopDownController.js
@@ -1,6 +1,5 @@
 import ElementView from '../views/ElementView.js';
 import ValueController from './ValueController.js';
-import CheckboxView from '../views/CheckboxView.js';
 import { copyExistingProperties } from '../libs/utils.js';
 import { createElem } from '../libs/elem.js';
 /*
@@ -27,17 +26,6 @@ pc.addBottom
 
 */
 
-function makeSetter(object, property) {
-  return {
-    setValue(v) {
-      object[property] = v;
-    },
-    setFinalValue(v) {
-      this.setValue(v);
-    },
-  };
-}
-
 export default class PopDownController extends ValueController {
   #top;
   #valuesView;

diff --git a/src/controllers/Vec2.js b/src/controllers/Vec2.js
@@ -1,4 +1,3 @@
-import GridView from '../views/GridView.js';
 import NumberView from '../views/NumberView.js';
 import Vec2View from '../views/Vec2View.js';
 import PopDownController from './PopDownController.js';

diff --git a/src/libs/touch.js b/src/libs/touch.js
@@ -29,9 +29,9 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}
     elem.releasePointerCapture(event.pointerId);
     elem.removeEventListener('pointermove', pointerMove);
     elem.removeEventListener('pointerup', pointerUp);
- 
+
     document.body.style.backgroundColor = '';
- 
+
     onUp('up');
   };
 

diff --git a/src/muigui.js b/src/muigui.js
@@ -55,11 +55,11 @@ export class GUIFolder extends Folder {
 class MuiguiElement extends HTMLElement {
   constructor() {
     super();
-    this.shadow = this.attachShadow({mode: 'open'})
+    this.shadow = this.attachShadow({mode: 'open'});
   }
 }
 
-customElements.define("muigui-element", MuiguiElement);
+customElements.define('muigui-element', MuiguiElement);
 
 const baseStyleSheet = new CSSStyleSheet();
 baseStyleSheet.replaceSync(css);
@@ -100,7 +100,7 @@ export class GUI extends GUIFolder {
     let {
       parent,
     } = options;
-    
+
     if (width) {
       this.domElement.style.width = /^\d+$/.test(width) ? `${width}px` : width;
     }

diff --git a/src/views/ColorChooserView.js b/src/views/ColorChooserView.js
@@ -3,14 +3,10 @@ import { addTouchEvents } from '../libs/touch.js';
 import { clamp } from '../libs/utils.js';
 import EditView from './EditView.js';
 import {
-  hexToUint8RGB,
   hexToFloatRGB,
-  hslToRgbUint8,
   hsv01ToRGBFloat,
   rgbFloatToHSV01,
-  rgbUint8ToHsl,
   floatRGBToHex,
-  uint8RGBToHex,
 } from '../libs/color-utils.js';
 
 const svg = `

diff --git a/test/assert.js b/test/assert.js
@@ -1,6 +1,6 @@
 export const config = {};
 
-const isArrayLike = v => Array.isArray(v) || 
+const isArrayLike = v => Array.isArray(v) ||
     (v.buffer instanceof ArrayBuffer && typeof v.length === 'number' && v.byteLength === 'number');
 
 export function setConfig(options) {