Skip to content

Instantly share code, notes, and snippets.

@mistic100
Last active July 27, 2024 17:14
Show Gist options
  • Save mistic100/2ccdc808962d67adc8d81a15323e817c to your computer and use it in GitHub Desktop.
Save mistic100/2ccdc808962d67adc8d81a15323e817c to your computer and use it in GitHub Desktop.
Use jscolor.js library inside lil-gui
import { GUI, Controller } from 'lil-gui';
import '@eastdesire/jscolor';
export class ColorController extends Controller {
private $input: HTMLInputElement;
private picker: any;
constructor(parent: GUI, object: object, property: string, alpha: boolean | 'auto' = 'auto') {
super(parent, object, property, 'color');
this.$input = document.createElement('input');
this.$input.setAttribute('aria-labelledby', this.$name.id);
this.$input.value = this.getValue();
this.$widget.appendChild(this.$input);
this.picker = new (window as any).jscolor(this.$input, {
preset: 'dark',
format: 'any',
alphaChannel: alpha,
borderRadius: 0,
borderWidth: 0,
height: 100,
width: 150,
sliderSize: 10,
previewSize: 20,
previewPadding: 3,
});
this.picker.onInput = () => {
this.setValue(this.picker.toString());
};
}
}
export function addColorPicker(gui: GUI, object: object, property: string, alpha?: boolean | 'auto') {
return new ColorController(gui, object, property, alpha);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment