Create form framework + visualization settings

Created by: bartwesselink

This pull request contains a framework for the visualization settings. I created a Form api, such that visualizations can easily add their settings to the settings form. A quick overview of the changeset (example provided in the Generalized Pythagoras Tree class)

• Two new methods have been added to the Visualizer interface (those need to be implemented). Namely: getForm(formFactory: FormFactory) and applySettings(settings: object). A form factory has to be injected into a component, which I already have done for the window component, meaning that visualizations have nothing to do with injecting it. Using the form factory, one can create a form builder (formFactory.createFormBuilder()).
• Using the form builder form fields of certain types can be added, like this: addTextField(name: string, defaultValue: string, options: BaseFormOptions): FormBuilder addNumberField(name: string, defaultValue: number, options: BaseFormOptions): FormBuilder addChoiceField(name: string, defaultValue: string, options: ChoiceFormOptions): FormBuilder addToggleField(name: string, defaultValue: boolean, options: BaseFormOptions): FormBuilder
• When the form has been created, formBuilder.getForm() has to be called. This is the value that should be returned getForm(formFactory: FormFactory) in the visualization interface.
• The form can be provided to app-form. Again, this has already been done for the window-component, thus visualizations have nothing to do with this.
• The app-form provides an output event (valueChanges). This value contains an object (key/value), where key is the name of the field, and the value is the value provided by the user. Again, the visualizations have nothing to do with this, because they have to implement applySettings(settings: object) which contains the same object.
• At this moment, the debounce time is 500 ms. This means that before the event is fired, the system waits for 500 ms to check if the user is still typing e.g.

Sample for visualizations:

public getForm(formFactory: FormFactory): Form|null {
        return formFactory.createFormBuilder()
            .addTextField('test1', 'TestValue', { label: 'Test label' })
            .addNumberField('test2', 8, { label: 'Test label' })
            .addToggleField('test3', false, { label: 'Test label' })
            .addChoiceField('test4', 'test', { label: 'Test label', expanded: false, choices: { test: 'test' } })
            .addChoiceField('test5', 'test', { label: 'Test label', expanded: true, choices: { test: 'test' } })
            .getForm();
}

public applySettings(settings: object): void {
       console.log(settings);
}

Which results in:

I'd like to hear what you guys think of this implementation, if it is good DX.