Merge pull request #60 from cocopon/toggle-component-visibility

Toggle component visibility

src/doc/js/route/misc.ts

@@ -367,6 +367,27 @@ ${indentedProps}
 				pane.addButton({title: '**Reset**', index: 1});
 			},
 
+			hidden: (container) => {
+				const PARAMS = {
+					seed: 0.1,
+				};
+				const pane = new Tweakpane({
+					container: container,
+				});
+
+				const f = pane.addFolder({title: 'Advanced'});
+				f.addInput(PARAMS, 'seed');
+
+				pane
+					.addButton({
+						index: 0,
+						title: 'Toggle',
+					})
+					.on('click', () => {
+						f.hidden = !f.hidden;
+					});
+			},
+
 			defaultTheme: (container) => {
 				return setUpThemedPane(container);
 			},

src/doc/template/misc.html

@@ -316,6 +316,31 @@ <h3>Refresh manually</h3>
 </div>
 
 
+<h3>Component visibility</h3>
+<p>Toggle <code>hidden</code> property to show/hide components.</p>
+
+<div class="common-main_mediaLayout">
+	<div class="common-demo">
+		<div class="common-demo_codeLayout">
+			<div class="common-codeBlock"><pre><code class="js">const pane = new Tweakpane();
+const f = pane.addFolder({
+  title: 'Advanced',
+});
+// f.addInput(PARAMS, ...);
+
+pane.addButton({title: 'Toggle'})
+  .on('click', () => {
+    f.<strong>hidden</strong> = !f.<strong>hidden</strong>;
+  });
+</code></pre></div>
+		</div>
+		<div class="common-demo_resultLayout">
+			<div class="common-paneContainer common-paneContainer-hidden"></div>
+		</div>
+	</div>
+</div>
+
+
 <h3>Disposing</h3>
 <p>If you want to dispose a pane manually, call <code>dispose()</code> of the pane.</p>
 

src/main/js/api/button-test.ts

@@ -3,14 +3,14 @@ import {describe, it} from 'mocha';
 
 import {ButtonController} from '../controller/button';
 import {TestUtil} from '../misc/test-util';
-import {Disposable} from '../model/disposable';
+import {ViewModel} from '../model/view-model';
 import {ButtonApi} from './button';
 
 describe(ButtonApi.name, () => {
 	it('should listen click event', (done) => {
 		const c = new ButtonController(TestUtil.createWindow().document, {
-			disposable: new Disposable(),
 			title: 'Button',
+			viewModel: new ViewModel(),
 		});
 		const api = new ButtonApi(c);
 		api.on('click', () => {
@@ -21,7 +21,7 @@ describe(ButtonApi.name, () => {
 
 	it('should have chainable event handling', () => {
 		const c = new ButtonController(TestUtil.createWindow().document, {
-			disposable: new Disposable(),
+			viewModel: new ViewModel(),
 			title: 'Button',
 		});
 		const api = new ButtonApi(c);

src/main/js/api/button.ts

@@ -17,8 +17,16 @@ export class ButtonApi {
 		this.controller = buttonController;
 	}
 
+	get hidden(): boolean {
+		return this.controller.viewModel.hidden;
+	}
+
+	set hidden(hidden: boolean) {
+		this.controller.viewModel.hidden = hidden;
+	}
+
 	public dispose(): void {
-		this.controller.disposable.dispose();
+		this.controller.viewModel.dispose();
 	}
 
 	public on<EventName extends keyof ButtonApiEventHandlers>(

src/main/js/api/folder-test.ts

@@ -10,13 +10,13 @@ import {SingleLogMonitorController} from '../controller/monitor/single-log';
 import {SeparatorController} from '../controller/separator';
 import {TestUtil} from '../misc/test-util';
 import {Color} from '../model/color';
-import {Disposable} from '../model/disposable';
+import {ViewModel} from '../model/view-model';
 import {FolderApi} from './folder';
 import {SeparatorApi} from './separator';
 
 function createApi(): FolderApi {
 	const c = new FolderController(TestUtil.createWindow().document, {
-		disposable: new Disposable(),
+		viewModel: new ViewModel(),
 		title: 'Folder',
 	});
 	return new FolderApi(c);
@@ -44,7 +44,17 @@ describe(FolderApi.name, () => {
 	it('should dispose', () => {
 		const api = createApi();
 		api.dispose();
-		assert.strictEqual(api.controller.disposable.disposed, true);
+		assert.strictEqual(api.controller.viewModel.disposed, true);
+	});
+
+	it('should hide', () => {
+		const api = createApi();
+		assert.strictEqual(api.hidden, false);
+
+		api.hidden = true;
+		assert.isTrue(
+			api.controller.view.element.classList.contains('tp-v-hidden'),
+		);
 	});
 
 	it('should add button', () => {

src/main/js/api/folder.ts

@@ -3,8 +3,8 @@ import * as MonitorBindingControllerCreators from '../controller/binding-creator
 import {ButtonController} from '../controller/button';
 import {FolderController} from '../controller/folder';
 import {SeparatorController} from '../controller/separator';
-import {Disposable} from '../model/disposable';
 import {Target} from '../model/target';
+import {ViewModel} from '../model/view-model';
 import {ButtonApi} from './button';
 import * as EventHandlerAdapters from './event-handler-adapters';
 import {InputBindingApi} from './input-binding';
@@ -44,8 +44,16 @@ export class FolderApi {
 		this.controller.folder.expanded = expanded;
 	}
 
+	get hidden(): boolean {
+		return this.controller.viewModel.hidden;
+	}
+
+	set hidden(hidden: boolean) {
+		this.controller.viewModel.hidden = hidden;
+	}
+
 	public dispose(): void {
-		this.controller.disposable.dispose();
+		this.controller.viewModel.dispose();
 	}
 
 	public addInput(object: object, key: string, opt_params?: InputParams) {
@@ -78,7 +86,7 @@ export class FolderApi {
 	public addButton(params: ButtonParams): ButtonApi {
 		const uc = new ButtonController(this.controller.document, {
 			...params,
-			disposable: new Disposable(),
+			viewModel: new ViewModel(),
 		});
 		this.controller.uiControllerList.add(uc, params.index);
 		return new ButtonApi(uc);
@@ -87,7 +95,7 @@ export class FolderApi {
 	public addSeparator(opt_params?: SeparatorParams): SeparatorApi {
 		const params = opt_params || {};
 		const uc = new SeparatorController(this.controller.document, {
-			disposable: new Disposable(),
+			viewModel: new ViewModel(),
 		});
 		this.controller.uiControllerList.add(uc, params.index);
 		return new SeparatorApi(uc);

src/main/js/api/input-binding-test.ts

@@ -7,17 +7,17 @@ import {NumberTextInputController} from '../controller/input/number-text';
 import * as NumberConverter from '../converter/number';
 import {NumberFormatter} from '../formatter/number';
 import {TestUtil} from '../misc/test-util';
-import {Disposable} from '../model/disposable';
 import {InputValue} from '../model/input-value';
 import {Target} from '../model/target';
+import {ViewModel} from '../model/view-model';
 import {StringNumberParser} from '../parser/string-number';
 import {InputBindingApi} from './input-binding';
 
 function createApi(target: Target) {
 	const doc = TestUtil.createWindow().document;
 	const value = new InputValue(0);
 	const ic = new NumberTextInputController(doc, {
-		disposable: new Disposable(),
+		viewModel: new ViewModel(),
 		formatter: new NumberFormatter(0),
 		parser: StringNumberParser,
 		value: value,
@@ -30,8 +30,8 @@ function createApi(target: Target) {
 			writer: (v) => v,
 		}),
 		controller: ic,
-		disposable: ic.disposable,
 		label: 'label',
+		viewModel: ic.viewModel,
 	});
 	return new InputBindingApi(bc);
 }
@@ -60,4 +60,17 @@ describe(InputBindingApi.name, () => {
 
 		assert.strictEqual(api.controller.binding.value.rawValue, 123);
 	});
+
+	it('should hide', () => {
+		const PARAMS = {
+			foo: 0,
+		};
+		const api = createApi(new Target(PARAMS, 'foo'));
+		assert.strictEqual(api.hidden, false);
+
+		api.hidden = true;
+		assert.isTrue(
+			api.controller.view.element.classList.contains('tp-v-hidden'),
+		);
+	});
 });

src/main/js/api/input-binding.ts

@@ -23,6 +23,14 @@ export class InputBindingApi<In, Out> {
 		this.controller = bindingController;
 	}
 
+	get hidden(): boolean {
+		return this.controller.viewModel.hidden;
+	}
+
+	set hidden(hidden: boolean) {
+		this.controller.viewModel.hidden = hidden;
+	}
+
 	public on<EventName extends keyof InputBindingApiEventHandlers>(
 		eventName: EventName,
 		handler: InputBindingApiEventHandlers[EventName],

src/main/js/api/monitor-binding-test.ts

@@ -8,16 +8,16 @@ import * as NumberConverter from '../converter/number';
 import {NumberFormatter} from '../formatter/number';
 import {TestUtil} from '../misc/test-util';
 import {ManualTicker} from '../misc/ticker/manual';
-import {Disposable} from '../model/disposable';
 import {MonitorValue} from '../model/monitor-value';
 import {Target} from '../model/target';
+import {ViewModel} from '../model/view-model';
 import {MonitorBindingApi} from './monitor-binding';
 
 function createApi(target: Target) {
 	const doc = TestUtil.createWindow().document;
 	const value = new MonitorValue(1);
 	const mc = new SingleLogMonitorController(doc, {
-		disposable: new Disposable(),
+		viewModel: new ViewModel(),
 		formatter: new NumberFormatter(0),
 		value: value,
 	});
@@ -29,8 +29,8 @@ function createApi(target: Target) {
 			value: value,
 		}),
 		controller: mc,
-		disposable: mc.disposable,
 		label: 'label',
+		viewModel: mc.viewModel,
 	});
 	return new MonitorBindingApi(bc);
 }
@@ -65,4 +65,17 @@ describe(MonitorBindingApi.name, () => {
 
 		assert.strictEqual(api.controller.binding.value.rawValues[0], 123);
 	});
+
+	it('should hide', () => {
+		const PARAMS = {
+			foo: 0,
+		};
+		const api = createApi(new Target(PARAMS, 'foo'));
+		assert.strictEqual(api.hidden, false);
+
+		api.hidden = true;
+		assert.isTrue(
+			api.controller.view.element.classList.contains('tp-v-hidden'),
+		);
+	});
 });

src/main/js/api/monitor-binding.ts

@@ -21,8 +21,16 @@ export class MonitorBindingApi<In> {
 		this.controller = bindingController;
 	}
 
+	get hidden(): boolean {
+		return this.controller.viewModel.hidden;
+	}
+
+	set hidden(hidden: boolean) {
+		this.controller.viewModel.hidden = hidden;
+	}
+
 	public dispose(): void {
-		this.controller.controller.disposable.dispose();
+		this.controller.controller.viewModel.dispose();
 	}
 
 	public on<EventName extends keyof MonitorBindingApiEventHandlers>(

src/main/js/api/root-boolean-input-test.ts

@@ -5,12 +5,12 @@ import {CheckboxInputController} from '../controller/input/checkbox';
 import {ListInputController} from '../controller/input/list';
 import {RootController} from '../controller/root';
 import {TestUtil} from '../misc/test-util';
-import {Disposable} from '../model/disposable';
+import {ViewModel} from '../model/view-model';
 import {RootApi} from './root';
 
 function createApi(): RootApi {
 	const c = new RootController(TestUtil.createWindow().document, {
-		disposable: new Disposable(),
+		viewModel: new ViewModel(),
 	});
 	return new RootApi(c);
 }

src/main/js/api/root-boolean-monitor-test.ts

@@ -7,12 +7,12 @@ import {SingleLogMonitorController} from '../controller/monitor/single-log';
 import {RootController} from '../controller/root';
 import {TestUtil} from '../misc/test-util';
 import {IntervalTicker} from '../misc/ticker/interval';
-import {Disposable} from '../model/disposable';
+import {ViewModel} from '../model/view-model';
 import {RootApi} from './root';
 
 function createApi(): RootApi {
 	const c = new RootController(TestUtil.createWindow().document, {
-		disposable: new Disposable(),
+		viewModel: new ViewModel(),
 	});
 	return new RootApi(c);
 }

src/main/js/api/root-color-input-test.ts

@@ -7,14 +7,14 @@ import {RootController} from '../controller/root';
 import {TestUtil} from '../misc/test-util';
 import {Class} from '../misc/type-util';
 import {Color} from '../model/color';
-import {Disposable} from '../model/disposable';
+import {ViewModel} from '../model/view-model';
 import {ColorSwatchTextInputView} from '../view/input/color-swatch-text';
 import {RootApi} from './root';
 import {InputParams} from './types';
 
 function createApi(): RootApi {
 	const c = new RootController(TestUtil.createWindow().document, {
-		disposable: new Disposable(),
+		viewModel: new ViewModel(),
 	});
 	return new RootApi(c);
 }

src/main/js/api/root-event-test.ts

@@ -2,13 +2,13 @@ import {describe, it} from 'mocha';
 
 import {RootController} from '../controller/root';
 import {TestUtil} from '../misc/test-util';
-import {Disposable} from '../model/disposable';
+import {ViewModel} from '../model/view-model';
 import {RootApi} from './root';
 
 function createApi(): RootApi {
 	const c = new RootController(TestUtil.createWindow().document, {
-		disposable: new Disposable(),
 		title: 'Title',
+		viewModel: new ViewModel(),
 	});
 	return new RootApi(c);
 }

src/main/js/api/root-input-test.ts

@@ -5,12 +5,12 @@ import {RootController} from '../controller/root';
 import {PaneError} from '../misc/pane-error';
 import {TestUtil} from '../misc/test-util';
 import {Color} from '../model/color';
-import {Disposable} from '../model/disposable';
+import {ViewModel} from '../model/view-model';
 import {RootApi} from './root';
 
 function createApi(): RootApi {
 	const c = new RootController(TestUtil.createWindow().document, {
-		disposable: new Disposable(),
+		viewModel: new ViewModel(),
 	});
 	return new RootApi(c);
 }