SliderEditor.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import { ButtonInput, SliderInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
  2. import { BaseNode } from '../core/BaseNode.js';
  3. import { UniformNode } from 'three/nodes';
  4. export class SliderEditor extends BaseNode {
  5. constructor() {
  6. const node = new UniformNode( 0 );
  7. super( 'Slider', 1, node );
  8. this.collapse = true;
  9. const field = new SliderInput( 0, 0, 1 ).onChange( () => {
  10. node.value = field.getValue();
  11. } );
  12. const updateRange = () => {
  13. const min = minInput.getValue();
  14. const max = maxInput.getValue();
  15. if ( min <= max ) {
  16. field.setRange( min, max );
  17. } else {
  18. maxInput.setValue( min );
  19. }
  20. };
  21. const minInput = new NumberInput().onChange( updateRange );
  22. const maxInput = new NumberInput( 1 ).onChange( updateRange );
  23. const minElement = new LabelElement( 'Min.' ).add( minInput ).setVisible( false );
  24. const maxElement = new LabelElement( 'Max.' ).add( maxInput ).setVisible( false );
  25. const moreElement = new Element().add( new ButtonInput( 'More' ).onClick( () => {
  26. minElement.setVisible( true );
  27. maxElement.setVisible( true );
  28. moreElement.setVisible( false );
  29. } ) ).setSerializable( false );
  30. this.add( new Element().add( field ) )
  31. .add( minElement )
  32. .add( maxElement )
  33. .add( moreElement );
  34. this.onBlur( () => {
  35. minElement.setVisible( false );
  36. maxElement.setVisible( false );
  37. moreElement.setVisible( true );
  38. } );
  39. }
  40. }