muigui 0.0.6 → 0.0.12

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "muigui",
-  "version": "0.0.6",
+  "version": "0.0.12",
   "description": "A Simple GUI",
   "main": "muigui.js",
   "module": "src/muigui.js",
   "type": "module",
   "scripts": {
     "build": "npm run build-normal",
+    "build-ci": "npm run build && node build/prep-for-deploy.js",
     "build-normal": "rollup -c",
     "build-min": "rollup -c",
+    "check-ci": "npm run pre-push",
     "eslint": "eslint \"**/*.js\"",
-    "pre-push": "npm run eslint",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "fix": "eslint --fix",
+    "pre-push": "npm run eslint && npm run build && npm run test",
+    "start": "node build/serve.js",
+    "test": "node test/puppeteer.js",
+    "watch": "npm run start"
   },
   "repository": {
     "type": "git",
@@ -35,10 +40,20 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@tsconfig/recommended": "^1.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "chokidar": "^3.5.3",
     "eslint": "^8.20.0",
     "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-one-variable-per-var": "^0.0.3",
     "eslint-plugin-optional-comma-spacing": "0.0.4",
     "eslint-plugin-require-trailing-comma": "0.0.1",
-    "rollup": "^3.20.2"
+    "puppeteer": "^21.5.2",
+    "rollup": "^3.20.2",
+    "servez": "^2.1.2",
+    "tslib": "^2.6.2",
+    "typescript": "5.2"
   }
 }

package/src/controllers/ColorChooser.js

@@ -1,12 +1,52 @@
+/* eslint-disable no-underscore-dangle */
+import {
+  colorFormatConverters,
+  guessFormat,
+  hasAlpha,
+  hexToUint8RGB,
+  hslToRgbUint8,
+  rgbUint8ToHsl,
+  uint8RGBToHex,
+} from '../libs/color-utils.js';
 import ColorChooserView from '../views/ColorChooserView.js';
 import TextView from '../views/TextView.js';
 import PopDownController from './PopDownController.js';
 
 export default class ColorChooser extends PopDownController {
-  constructor(object, property) {
+  #colorView;
+  #textView;
+  #to;
+  #setKnobHelper;
+
+  constructor(object, property, options = {}) {
     super(object, property, 'muigui-color-chooser');
-    this.addTop(new TextView(this));
-    this.addBottom(new ColorChooserView(this));
+    const format = options.format || guessFormat(this.getValue());
+    const {color, text} = colorFormatConverters[format];
+    this.#to = color.to;
+    this.#textView = new TextView(this, {converters: text, alpha: hasAlpha(format)});
+    this.#colorView = new ColorChooserView(this, {converters: color, alpha: hasAlpha(format)});
+    this.addTop(this.#textView);
+    this.addBottom(this.#colorView);
+    // WTF! FIX!
+    this.#setKnobHelper = () => {
+      if (this.#to) {
+        const hex6Or8 = this.#to(this.getValue());
+        const hsl = rgbUint8ToHsl(hexToUint8RGB(hex6Or8));
+        hsl[2] = (hsl[2] + 50) % 100;
+        const hex = uint8RGBToHex(hslToRgbUint8(hsl));
+        this.setKnobColor(`${hex6Or8.substring(0, 7)}FF`, hex);
+      }
+    };
     this.updateDisplay();
   }
+  updateDisplay() {
+    super.updateDisplay();
+    if (this.#setKnobHelper) {
+      this.#setKnobHelper();
+    }
+  }
+  setOptions(options) {
+    super.setOptions(options);
+    return this;
+  }
 }

package/src/controllers/Container.js

@@ -26,6 +26,12 @@ export default class Container extends Controller {
     }
     return this;
   }
+  updateDisplay() {
+    for (const controller of this.#controllers) {
+      controller.updateDisplay();
+    }
+    return this;
+  }
   remove(controller) {
     const ndx = this.#controllers.indexOf(controller);
     if (ndx >= 0) {
@@ -37,14 +43,14 @@ export default class Container extends Controller {
     }
     return this;
   }
-  _addControllerImpl(controller) {
+  #addControllerImpl(controller) {
     this.domElement.appendChild(controller.domElement);
     this.#controllers.push(controller);
     controller.setParent(this);
     return controller;
   }
   addController(controller) {
-    return this.#childDestController._addControllerImpl(controller);
+    return this.#childDestController.#addControllerImpl(controller);
   }
   pushContainer(container) {
     this.addController(container);

package/src/controllers/Controller.js

@@ -113,6 +113,9 @@ export default class Controller extends View {
       }
     }
   }
+  updateDisplay() {
+    // placeholder. override
+  }
   getColors() {
     const toCamelCase = s => s.replace(/-([a-z])/g, (m, m1) => m1.toUpperCase());
     const keys = [

package/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,22 +26,14 @@ 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;
+  #checkboxElem;
   #bottom;
-  #options = {open: false};
+  #options = {
+    open: false,
+  };
 
   constructor(object, property, options = {}) {
     super(object, property, 'muigui-pop-down-controller');
@@ -58,12 +49,22 @@ export default class PopDownController extends ValueController {
       type: 'checkbox',
       onChange: () => {
         this.#options.open = checkboxElem.checked;
+        this.updateDisplay();
       },
     }));
+    this.#checkboxElem = checkboxElem;
     this.#valuesView = this.#top.add(new ElementView('div', 'muigui-pop-down-values'));
     this.#bottom = this.add(new ElementView('div', 'muigui-pop-down-bottom'));
     this.setOptions(options);
   }
+  setKnobColor(bgCssColor/*, fgCssColor*/) {
+    if (this.#checkboxElem) {
+      this.#checkboxElem.style = `
+        --range-color: ${bgCssColor};
+        --value-bg-color: ${bgCssColor};
+      `;
+    }
+  }
   updateDisplay() {
     super.updateDisplay();
     const {open} = this.#options;

package/src/controllers/ValueController.js

@@ -34,31 +34,39 @@ export default class ValueController extends LabelController {
     return view;
   }
   #setValueImpl(v, ignoreCache) {
+    let isDifferent = false;
     if (typeof v === 'object') {
       const dst = this.#object[this.#property];
       // don't replace objects, just their values.
-      if (Array.isArray(v)) {
+      if (Array.isArray(v) || isTypedArray(v)) {
         for (let i = 0; i < v.length; ++i) {
+          isDifferent ||= dst[i] !== v[i];
           dst[i] = v[i];
         }
-      } else if (isTypedArray(v)) {
-        dst.set(v);
       } else {
+        for (const key of Object.keys(v)) {
+          isDifferent ||= dst[key] !== v[key];
+        }
         Object.assign(dst, v);
       }
     } else {
+      isDifferent = this.#object[this.#property] !== v;
       this.#object[this.#property] = v;
     }
     this.updateDisplay(ignoreCache);
-    this.emitChange(this.getValue(), this.#object, this.#property);
-    return this;
+    if (isDifferent) {
+      this.emitChange(this.getValue(), this.#object, this.#property);
+    }
+    return isDifferent;
   }
   setValue(v) {
     this.#setValueImpl(v);
   }
   setFinalValue(v) {
-    this.#setValueImpl(v, true);
-    this.emitFinalChange(this.getValue(), this.#object, this.#property);
+    const isDifferent = this.#setValueImpl(v, true);
+    if (isDifferent) {
+      this.emitFinalChange(this.getValue(), this.#object, this.#property);
+    }
     return this;
   }
   updateDisplay(ignoreCache) {

package/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';

package/src/layout/Layout.js

@@ -3,7 +3,6 @@ import View from '../views/View.js';
 
 function showCSS(ob) {
   if (ob.prototype.css) {
-    console.log(ob.prototype.css);
     showCSS(ob.prototype);
   }
 }