diff --git a/Changelog.md b/Changelog.md index aeb48d4..8031743 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,12 @@ +# 0.14.0 + +29.04kb, 8.31kb gzipped + +- Added `gui.onFinishChange` for symmetry with `gui.onChange`. +- Added a `d.ts` file for TypeScript users. +- Fixed a bug that stopped iOS users from typing negative numbers. ([Note](https://github.com/georgealways/lil-gui/pull/16)) +- Minor CSS fixes. + # 0.13.0 28.56kb, 8.24kb gzipped diff --git a/Guide.md b/Guide.md index c6ec886..3fcfd73 100644 --- a/Guide.md +++ b/Guide.md @@ -23,14 +23,14 @@ For quick sketches, you can import lil-gui directly from a CDN. ```html ``` The library is also available in UMD format under the namespace `lil`. ```html - + @@ -202,6 +202,8 @@ gui.onChange( event => { `GUI.onChange` events bubble upward. A handler applied to the root GUI will fire after every change. Handlers applied to folders will only be called after changes to that folder or its descendents. +`GUI.onFinishChange` works just like `GUI.onChange`, but it only fires at the end of change events. + ### Listening and Updating If a value controlled by the GUI is changed in code anywhere outside of the GUI, the new value won't diff --git a/TODO b/TODO index 22cbc4f..7166e08 100644 --- a/TODO +++ b/TODO @@ -1,11 +1,21 @@ 0.14 -[ ] GUI.onFinishChange (branch: undo) -[ ] ios negative numbers (branch: typenumber) +[x] GUI.onFinishChange (branch: undo) +[x] ios negative numbers (branch: typenumber) the spec for inputmode=decimal doesn't mandate a negative sign only way to default to a keyboard with numbers, decimals and a negative sign on ios is with input[type=number]. i hate unstyling that thing +[-] -webkit-tap-highlight is still on boolean and option + but there's no :active style on either without it (branch: mobileactivestates) + +[-] button text-transform: none + this was there to compensate for a very broad css selector in the three.js + examples while developing, shouldn't be there. + well, in truth there's a bunch of 'resets' in the .lil-gui { selector too + +[-] move --string-color and --number-color to inputs.scss + 0.13 [-] test color malform/edge cases diff --git a/examples/kitchen-sink/index.html b/examples/kitchen-sink/index.html index 7b39534..3bdf3f2 100644 --- a/examples/kitchen-sink/index.html +++ b/examples/kitchen-sink/index.html @@ -308,6 +308,10 @@ gui.addColor( { Color: 0xaa00ff }, 'Color' ).onChange( change ).onFinishChange( finishChange ); + gui.onFinishChange( e => { + console.log( 'gui.onFinishChange', e ); + } ); + } ); make( { title: 'Customization' }, gui => { diff --git a/package-lock.json b/package-lock.json index 3f432e9..db856d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "lil-gui", - "version": "0.13.0", + "version": "0.14.0-dev", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "lil-gui", - "version": "0.13.0", + "version": "0.14.0-dev", "license": "MIT", "devDependencies": { "browser-sync": "^2.27.7", @@ -19,9 +19,11 @@ "jsdoc-api": "^5.0.2", "markdown-it": "^9.1.0", "onchange": "^6.0.0", + "rimraf": "^3.0.2", "rollup": "^1.17.0", "sass": "^1.22.10", "terser": "^4.3.8", + "typescript": "^4.5.2", "webfont": "^11.2.26" } }, @@ -4547,6 +4549,19 @@ "node": ">=8" } }, + "node_modules/typescript": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.2.tgz", + "integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/typical": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/typical/-/typical-2.6.1.tgz", @@ -8570,6 +8585,12 @@ "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", "dev": true }, + "typescript": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.2.tgz", + "integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==", + "dev": true + }, "typical": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/typical/-/typical-2.6.1.tgz", diff --git a/package.json b/package.json index 6d0cf0d..56b5523 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lil-gui", - "version": "0.13.0", + "version": "0.14.0-dev", "author": { "name": "George Michael Brower" }, @@ -8,6 +8,7 @@ "homepage": "https://lil-gui.georgealways.com", "module": "dist/lil-gui.esm.js", "main": "dist/lil-gui.umd.js", + "types": "dist/lil-gui.esm.d.ts", "config": { "style": "dist/lil-gui.css", "styleMin": "dist/lil-gui.min.css" @@ -15,17 +16,19 @@ "scripts": { "build": "npm run icons && npm run sass && npm run sass:min && npm run rollup", "build:all": "npm run build && npm run api && npm run homepage", - "sass": "sass style/index.scss $npm_package_config_style --no-source-map --no-charset", - "sass:min": "sass style/index.scss $npm_package_config_styleMin --no-charset --no-source-map --style=compressed", + "sass": "sass style/index.scss dist/lil-gui.css --no-charset --no-source-map", + "sass:min": "sass style/index.scss dist/lil-gui.min.css --no-charset --no-source-map --style=compressed", "rollup": "rollup -c", "lint": "eslint .", "icons": "node -r esm scripts/icons.js", "test": "node -r esm tests/utils/runner.js", "api": "node -r esm scripts/api.js --write", + "types": "tsc dist/lil-gui.esm.js --declaration --allowJs --emitDeclarationOnly --outDir dist", "homepage": "node -r esm scripts/homepage.js", - "server": "browser-sync start -s -f '$npm_package_main' 'index.html' 'examples' --no-open --no-notify --no-ui --no-ghost-mode --no-inject-changes", + "server": "browser-sync start -s -f 'dist' 'index.html' 'examples' --no-open --no-notify --no-ui --no-ghost-mode --no-inject-changes", + "clean": "rimraf -rf dist/*", "preversion": "npm run build && npm test", - "prepublishOnly": "npm run build && npm test", + "prepublishOnly": "npm run clean && npm run build && npm run types && npm test", "dev": "npm run build:all && node -r esm scripts/dev.js" }, "files": [ @@ -43,9 +46,11 @@ "jsdoc-api": "^5.0.2", "markdown-it": "^9.1.0", "onchange": "^6.0.0", + "rimraf": "^3.0.2", "rollup": "^1.17.0", "sass": "^1.22.10", "terser": "^4.3.8", + "typescript": "^4.5.2", "webfont": "^11.2.26" }, "eslintIgnore": [ diff --git a/scripts/api.js b/scripts/api.js index fee3d84..3428fa6 100644 --- a/scripts/api.js +++ b/scripts/api.js @@ -254,7 +254,7 @@ function paramsToSignature( params ) { .map( singleParamToSignature ) .join( ', ' ); - return `( ${paramList} )`; + return `( ${paramList} )`; } diff --git a/scripts/homepage.hbs.html b/scripts/homepage.hbs.html index 3b79cb2..bc60038 100644 --- a/scripts/homepage.hbs.html +++ b/scripts/homepage.hbs.html @@ -22,10 +22,10 @@ --link: #005dcc; --pre-code: #d1d0cc; --inline-code: #926501; - --code-number: #73c6ee; - --code-string: #a3c04a; - --code-literal: #db80c7; - --code-special: #6ed3d3; + --code-number: #6cb2e3; + --code-string: #a6bf5c; + --code-literal: #bd75cb; + --code-special: #80d3c7; --code-comment: #84858a; --pre-background: #372d39; --toc-width: 210px; @@ -972,7 +972,7 @@

API

{{{ readme }}} Built Source • - Minified = {{ sizeMin }}kb, {{ sizeGzip }}kb gzipped + Minified = {{ sizeMin }}kb, {{ sizeGzip }}kb gzipped @@ -987,7 +987,7 @@

Examples

Hot Swap - Replaces dat.gui across all three.js example pages. Except for a few, this was done just by replacing the import URL.
  • PixiJS Filters Demo Hot Swap - - Replacing a very long dat.gui.
    • + Replaces a very long dat.gui. diff --git a/scripts/homepage.js b/scripts/homepage.js index 5c2b4e8..b1aca5b 100644 --- a/scripts/homepage.js +++ b/scripts/homepage.js @@ -47,8 +47,8 @@ guide = guide.replace( /^## ([\s\S]*?)$/gm, function( _, heading ) { } ); -// include version in CDN examples, bad form to use bare/latest -guide = guide.replace( /@VERSION/g, '@' + pkg.version ); +// include major & minor version in CDN examples, bad form to use bare/latest +guide = guide.replace( /@VERSION/g, '@' + pkg.version.substring( 0, pkg.version.lastIndexOf( '.' ) ) ); // API.md // ----------------------------------------------------------------------------- diff --git a/src/Controller.js b/src/Controller.js index efbefd5..d033a3e 100644 --- a/src/Controller.js +++ b/src/Controller.js @@ -166,8 +166,14 @@ export default class Controller { */ _callOnFinishChange() { - if ( this._changed && this._onFinishChange !== undefined ) { - this._onFinishChange.call( this, this.getValue() ); + if ( this._changed ) { + + this.parent._callOnFinishChange( this ); + + if ( this._onFinishChange !== undefined ) { + this._onFinishChange.call( this, this.getValue() ); + } + } this._changed = false; diff --git a/src/GUI.js b/src/GUI.js index d0e6a1d..1b02014 100644 --- a/src/GUI.js +++ b/src/GUI.js @@ -488,6 +488,39 @@ export default class GUI { } } + /** + * Pass a function to be called whenever a controller in this GUI has finished changing. + * @param {function({object:object, property:string, value:any, controller:Controller})} callback + * @returns {this} + * @example + * gui.onFinishChange( event => { + * event.object // object that was modified + * event.property // string, name of property + * event.value // new value of controller + * event.controller // controller that was modified + * } ); + */ + onFinishChange( callback ) { + this._onFinishChange = callback; + return this; + } + + _callOnFinishChange( controller ) { + + if ( this.parent ) { + this.parent._callOnFinishChange( controller ); + } + + if ( this._onFinishChange !== undefined ) { + this._onFinishChange.call( this, { + object: controller.object, + property: controller.property, + value: controller.getValue(), + controller + } ); + } + } + /** * Destroys all DOM elements and event listeners associated with this GUI */ diff --git a/src/NumberController.js b/src/NumberController.js index 98a8352..0aecef3 100644 --- a/src/NumberController.js +++ b/src/NumberController.js @@ -56,8 +56,8 @@ export default class NumberController extends Controller { _initInput() { this.$input = document.createElement( 'input' ); - this.$input.setAttribute( 'type', 'text' ); - this.$input.setAttribute( 'inputmode', 'decimal' ); + this.$input.setAttribute( 'type', 'number' ); + this.$input.setAttribute( 'step', 'any' ); this.$input.setAttribute( 'aria-labelledby', this.$name.id ); this.$widget.appendChild( this.$input ); diff --git a/style/controllers.scss b/style/controllers.scss index 426d8ef..c6adab6 100644 --- a/style/controllers.scss +++ b/style/controllers.scss @@ -14,7 +14,9 @@ } } - .name { + // > is used here to avoid styling FunctionController's .name, + // which gets put inside of its widget. + > .name { min-width: var(--name-width); flex-shrink: 0; white-space: pre; @@ -31,11 +33,6 @@ } } - .controller.function .name { - line-height: unset; - padding: 0; - } - .controller.string input { color: var(--string-color); } @@ -57,10 +54,7 @@ position: absolute; border-radius: var(--widget-border-radius); border: 1px solid #fff9; - left: 0; - right: 0; - top: 0; - bottom: 0; + inset: 0; } } } @@ -114,9 +108,7 @@ font-family: 'lil-gui'; content: '↕'; position: absolute; - top: 0; - right: 0; - bottom: 0; + inset: 0 0 0 auto; padding-right: 0.375em; } } diff --git a/style/icons/u2195-dropdown.svg b/style/icons/u2195-dropdown.svg index bd9005f..cdeba84 100644 --- a/style/icons/u2195-dropdown.svg +++ b/style/icons/u2195-dropdown.svg @@ -3,7 +3,7 @@ - - + + diff --git a/style/inputs.scss b/style/inputs.scss index b5394f8..5fc020d 100644 --- a/style/inputs.scss +++ b/style/inputs.scss @@ -21,15 +21,31 @@ background: var(--focus-color); } } + &:disabled { + opacity: 1; // override default iOS style, we already dim .controller + } } - input[type='text'] { + input[type='text'], + input[type='number'] { padding: var(--widget-padding); &:focus { background: var(--focus-color); } } + // Hide number spinners + + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + input[type='number'] { + -moz-appearance: textfield; + } + input[type='checkbox'] { appearance: none; -webkit-appearance: none; @@ -37,6 +53,7 @@ width: var(--checkbox-size); border-radius: var(--widget-border-radius); text-align: center; + cursor: pointer; &:checked:before { font-family: 'lil-gui'; content: '✓'; @@ -49,7 +66,6 @@ box-shadow: inset 0 0 0 1px var(--focus-color); } } - } button { @@ -73,10 +89,7 @@ text-align: center; - // tried to center vertically via flex, didn't work... - // shouldn't this just be 1? focus border makes this weird - // .725 seemed to line up for mobile & desktop - line-height: calc(var(--widget-height) * 0.725); + line-height: calc(var(--widget-height) - 4px); @include can-hover { &:hover {