diff --git a/.eslintignore b/.eslintignore index 5df886e..a9aab6c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,5 @@ test/js test/mocha.js -/webgl-lint.js \ No newline at end of file +/webgl-lint.js +dist +examples/3rdParty diff --git a/examples/custom.html b/examples/custom.html new file mode 100644 index 0000000..211af9f --- /dev/null +++ b/examples/custom.html @@ -0,0 +1,55 @@ + + + + + + muigui - custom + + + + + + \ No newline at end of file diff --git a/examples/js/index.js b/examples/js/index.js index 1b33699..e8170ad 100644 --- 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 index d5b6f8d..4c7ac32 100644 --- 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 index 2de7a97..cdf8407 100644 --- 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 index 1bea796..6573db5 100644 --- 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 index ecabc2c..010d7c6 100644 --- 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 index 96f6fcc..a5d51af 100644 --- 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 index 2036a59..c803029 100644 --- 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 index b40f43f..d99b3bd 100644 --- 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) {