Customcontroller

[anhr]

For resolving of issue, described in .add( controller ) #4
Now you can use gui.add(...) for adding of custom controller
Example

[donmccurdy]

Thanks!

Could you omit the build/* and package-lock.json files from this? An easy way to revert that would be:

git checkout master -- build

[donmccurdy]

Let's not assign this to the GUI object. Instead we can export CustomController from the module, so it can be used as:

import { GUI, controllers } from 'dat.gui';

class FooController extends controllers.CustomController {}

See https://github.com/dataarts/dat.gui/blob/master/src/dat/index.js.

[anhr]

Sorry I don't understand you. I can not include
import { GUI, controllers } from 'dat.gui';
line into webgl_custom_controller.html file.

[donmccurdy]

If you aren't using ES modules, it would just be: dat.controllers.CustomController in this case.

[anhr]

Thanks. Now I want to continue researching of your replies and want to rewrite my code

[anhr]

I have removed GUI.CustomController. See Remove GUI.CustomController.
I want to continue researching of your replies and want to rewrite my code

[donmccurdy]

I'm not sure what this line is doing?

[anhr]

My current version of the CustomController class:

/**
 * @class Represents a custom controller.
 * @param {init} callback function for adding of elements into this.domElement
 */
class CustomController extends Controller{
    constructor(init) {
    super({});

    init( this );
    this.custom = true;
  }
}

I have created my own ES module for testing and use it in my Example . The code below is example of user's custom controller class.

import { GUI, controllers } from '../../dat.gui';

export class KnobController extends controllers.CustomController {
	constructor( a, b ) {
		super(function (controller) {

			var button = document.createElement('span');
			button.innerHTML = 'Knob Controller';
			button.title = 'Please press knob';
			button.style.cursor = 'pointer';
			button.style.margin = '0px 2px';
			button.onclick = function (value) {

				alert('Knob Controller ' + ( knobController.a + knobController.b ));

			}
			controller.domElement.appendChild(button);

		});
		this.a = a;
		this.b = b;
		var knobController = this;

	}
}

[donmccurdy]

Do we need the custom: true parameter, if we can already check that the object is an instance of CustomController?

[anhr]

Yes. I have removed it

[donmccurdy]

To keep this simple, maybe let's only support gui.add( controller ) for now?

[anhr]

The addCustomController function is the easiest way of using of custom controller. It is ready and I do not want to remove it.

[donmccurdy]

See #232 (comment) – I think that add can be just as easy, but if not could you share examples showing how to use them both? It doesn't seem to me like we need both, if add can be simplified.

[anhr]

I have removed addCustomController from my code

[donmccurdy]

Did you mean to add this?

[anhr]

Currently I am looking for a job. Do you want to remove it from README.md? Do you have a job for me?

[donmccurdy]

Unfortunately this project is not the right place to put an available-for-hire post, sorry!

[anhr]

ok

[donmccurdy]

Could you omit all changes to build/* from this PR? One way to do that would be:

git checkout master -- build

[anhr]

You have asked me to do it twice. I did it twice. I am not sure, I understand you. Is issue resolved now?

[donmccurdy]

If you look at the top of the PR, you'll see that it removes 8,800 lines of code from the project – most files in build/* would be deleted if I merged this. Instead, the files in build/* should be left unchanged.

[anhr]

I see

[donmccurdy]

From your example –

var controllerPlayRate1 = folder1.add( new dat.controllers.CustomController( function ( controller ) {

  controllerPlay( controller, buttons1 );

} ),
{

  playRate: 1,

}, 'playRate', 1, 25, 1 ).onChange( function ( value ) {

  onChangePlayRate( value );

} );

I'd rather have an API where custom controllers can be used more similarly to the builtin controller types. Users would not instantiate CustomController directly (i.e. it's an "abstract" class) but would instantiate subtypes. For example, they should do this:

class KnobController extends CustomController {
  constructor ( object, name, ...opts ) {
    super( object, name );
    // ... set up options if needed
  }
}

const api = {
  color: '#ffffff',
  value: 0.5
};

const gui = new dat.GUI();
gui.add( api, 'color' );
gui.add( new KnobController( api, 'value' ) );

I believe that can be implemented without requiring an init callback, and without needing a addCustomController method (since add works just as well).

[anhr]

Please see my new version of the CustomController.js as you asked me. I have rewired my own ES module for testing and use it in my example.