Merge pull request #224 from cocopon/2.2.0-beta

2.2.0

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ on:
     branches:
       - main
   release:
-    types: [published]
+    types: [released]
 jobs:
   test:
     runs-on: ubuntu-latest

lib/api/button-test.ts

@@ -5,50 +5,69 @@ import {TestUtil} from '../misc/test-util';
 import {ButtonController} from '../plugin/blade/button/controller/button';
 import {Blade} from '../plugin/blade/common/model/blade';
 import {LabeledController} from '../plugin/blade/labeled/controller';
+import {createViewProps} from '../plugin/common/model/view-props';
 import {ButtonApi} from './button';
 
+function createApi(doc: Document): ButtonApi {
+	const c = new LabeledController(doc, {
+		blade: new Blade(),
+		valueController: new ButtonController(doc, {
+			title: 'Button',
+			viewProps: createViewProps(),
+		}),
+	});
+	return new ButtonApi(c);
+}
+
 describe(ButtonApi.name, () => {
 	it('should listen click event', (done) => {
 		const doc = TestUtil.createWindow().document;
-		const c = new LabeledController(doc, {
-			blade: new Blade(),
-			valueController: new ButtonController(doc, {
-				title: 'Button',
-			}),
-		});
-		const api = new ButtonApi(c);
+		const api = createApi(doc);
 		api.on('click', () => {
 			done();
 		});
-		c.valueController.button.click();
+		api.controller.valueController.button.click();
+	});
+
+	it('should be hidden', () => {
+		const doc = TestUtil.createWindow().document;
+		const api = createApi(doc);
+		assert.isFalse(api.hidden);
+
+		api.hidden = true;
+		assert.isTrue(
+			api.controller.view.element.classList.contains('tp-v-hidden'),
+		);
+	});
+
+	it('should be disabled', () => {
+		const doc = TestUtil.createWindow().document;
+		const api = createApi(doc);
+		const c = api.controller.valueController as ButtonController;
+
+		assert.isFalse(api.disabled);
+		assert.isFalse(c.view.buttonElement.disabled);
+
+		api.disabled = true;
+
+		assert.isTrue(c.view.element.classList.contains('tp-v-disabled'));
+		assert.isTrue(c.view.buttonElement.disabled);
 	});
 
 	it('should have chainable event handling', () => {
 		const doc = TestUtil.createWindow().document;
-		const c = new LabeledController(doc, {
-			blade: new Blade(),
-			valueController: new ButtonController(doc, {
-				title: 'Button',
-			}),
-		});
-		const api = new ButtonApi(c);
+		const api = createApi(doc);
 		const retval = api.on('click', () => {});
 		assert.strictEqual(retval, api);
 	});
 
 	it('should bind `this` within handler to API', (done) => {
 		const doc = TestUtil.createWindow().document;
-		const c = new LabeledController(doc, {
-			blade: new Blade(),
-			valueController: new ButtonController(doc, {
-				title: 'Button',
-			}),
-		});
-		const api = new ButtonApi(c);
+		const api = createApi(doc);
 		api.on('click', function(this: any) {
 			assert.strictEqual(this, api);
 			done();
 		});
-		c.valueController.button.click();
+		api.controller.valueController.button.click();
 	});
 });

lib/api/button.ts

@@ -20,12 +20,20 @@ export class ButtonApi implements BladeApi {
 		this.controller = buttonController;
 	}
 
+	get disabled(): boolean {
+		return this.controller.viewProps.get('disabled');
+	}
+
+	set disabled(disabled: boolean) {
+		this.controller.viewProps.set('disabled', disabled);
+	}
+
 	get hidden(): boolean {
-		return this.controller.blade.hidden;
+		return this.controller.viewProps.get('hidden');
 	}
 
 	set hidden(hidden: boolean) {
-		this.controller.blade.hidden = hidden;
+		this.controller.viewProps.set('hidden', hidden);
 	}
 
 	public dispose(): void {

lib/api/folder-test.ts

@@ -8,6 +8,7 @@ import {Blade} from '../plugin/blade/common/model/blade';
 import {FolderController} from '../plugin/blade/folder/controller';
 import {LabeledController} from '../plugin/blade/labeled/controller';
 import {SeparatorController} from '../plugin/blade/separator/controller';
+import {createViewProps} from '../plugin/common/model/view-props';
 import {Color} from '../plugin/input-bindings/color/model/color';
 import {NumberTextController} from '../plugin/input-bindings/number/controller/number-text';
 import {SingleLogMonitorController} from '../plugin/monitor-bindings/common/controller/single-log';
@@ -21,6 +22,7 @@ function createApi(): FolderApi {
 	const c = new FolderController(doc, {
 		blade: new Blade(),
 		title: 'Folder',
+		viewProps: createViewProps(),
 	});
 	return new FolderApi(c);
 }

lib/api/folder.ts

@@ -8,6 +8,7 @@ import {FolderEvents} from '../plugin/blade/folder/model/folder';
 import {LabeledController} from '../plugin/blade/labeled/controller';
 import {SeparatorController} from '../plugin/blade/separator/controller';
 import {Emitter} from '../plugin/common/model/emitter';
+import {createViewProps} from '../plugin/common/model/view-props';
 import {TpError} from '../plugin/common/tp-error';
 import {BladeApi} from './blade-api';
 import {ButtonApi} from './button';
@@ -80,11 +81,11 @@ export class FolderApi implements BladeApi {
 	}
 
 	get hidden(): boolean {
-		return this.controller.blade.hidden;
+		return this.controller.viewProps.get('hidden');
 	}
 
 	set hidden(hidden: boolean) {
-		this.controller.blade.hidden = hidden;
+		this.controller.viewProps.set('hidden', hidden);
 	}
 
 	public dispose(): void {
@@ -131,6 +132,7 @@ export class FolderApi implements BladeApi {
 		const bc = new FolderController(this.controller.document, {
 			...params,
 			blade: new Blade(),
+			viewProps: createViewProps(),
 		});
 		this.controller.bladeRack.add(bc, params.index);
 
@@ -144,7 +146,12 @@ export class FolderApi implements BladeApi {
 		const bc = new LabeledController(doc, {
 			blade: new Blade(),
 			label: params.label,
-			valueController: new ButtonController(doc, params),
+			valueController: new ButtonController(doc, {
+				...params,
+				viewProps: createViewProps({
+					disabled: params.disabled,
+				}),
+			}),
 		});
 		this.controller.bladeRack.add(bc, params.index);
 
@@ -157,6 +164,7 @@ export class FolderApi implements BladeApi {
 		const params = opt_params || {};
 		const bc = new SeparatorController(this.controller.document, {
 			blade: new Blade(),
+			viewProps: createViewProps(),
 		});
 		this.controller.bladeRack.add(bc, params.index);
 

lib/api/input-binding-test.ts

@@ -12,6 +12,7 @@ import {
 } from '../plugin/common/converter/number';
 import {numberFromUnknown} from '../plugin/common/converter/number';
 import {Value} from '../plugin/common/model/value';
+import {createViewProps} from '../plugin/common/model/view-props';
 import {writePrimitive} from '../plugin/common/primitive';
 import {NumberTextController} from '../plugin/input-bindings/number/controller/number-text';
 import {InputBindingApi} from './input-binding';
@@ -26,6 +27,7 @@ function createApi(target: BindingTarget) {
 		formatter: createNumberFormatter(0),
 		parser: parseNumber,
 		value: value,
+		viewProps: createViewProps(),
 	});
 	const bc = new InputBindingController(doc, {
 		binding: new InputBinding({
@@ -81,7 +83,7 @@ describe(InputBindingApi.name, () => {
 		assert.strictEqual(api.controller.binding.value.rawValue, 123);
 	});
 
-	it('should hide', () => {
+	it('should be hidden', () => {
 		const PARAMS = {
 			foo: 0,
 		};
@@ -93,4 +95,17 @@ describe(InputBindingApi.name, () => {
 			api.controller.view.element.classList.contains('tp-v-hidden'),
 		);
 	});
+
+	it('should be disabled', () => {
+		const PARAMS = {
+			foo: 0,
+		};
+		const api = createApi(new BindingTarget(PARAMS, 'foo'));
+		assert.strictEqual(api.disabled, false);
+
+		api.disabled = true;
+		assert.isTrue(
+			api.controller.view.element.classList.contains('tp-v-disabled'),
+		);
+	});
 });

lib/api/input-binding.ts

@@ -35,12 +35,20 @@ export class InputBindingApi<In, Ex> implements BladeApi {
 		this.controller.binding.emitter.on('change', this.onBindingChange_);
 	}
 
+	get disabled(): boolean {
+		return this.controller.viewProps.get('disabled');
+	}
+
+	set disabled(disabled: boolean) {
+		this.controller.viewProps.set('disabled', disabled);
+	}
+
 	get hidden(): boolean {
-		return this.controller.blade.hidden;
+		return this.controller.viewProps.get('hidden');
 	}
 
 	set hidden(hidden: boolean) {
-		this.controller.blade.hidden = hidden;
+		this.controller.viewProps.set('hidden', hidden);
 	}
 
 	public dispose(): void {

lib/api/monitor-binding-test.ts

@@ -11,6 +11,7 @@ import {createNumberFormatter} from '../plugin/common/converter/number';
 import {numberFromUnknown} from '../plugin/common/converter/number';
 import {Buffer} from '../plugin/common/model/buffered-value';
 import {Value} from '../plugin/common/model/value';
+import {createViewProps} from '../plugin/common/model/view-props';
 import {SingleLogMonitorController} from '../plugin/monitor-bindings/common/controller/single-log';
 import {MonitorBindingApi} from './monitor-binding';
 import {TpUpdateEvent} from './tp-event';
@@ -21,6 +22,7 @@ function createApi(target: BindingTarget) {
 	const mc = new SingleLogMonitorController(doc, {
 		formatter: createNumberFormatter(0),
 		value: value,
+		viewProps: createViewProps(),
 	});
 	const bc = new MonitorBindingController(doc, {
 		binding: new MonitorBinding({

lib/api/monitor-binding.ts

@@ -33,12 +33,20 @@ export class MonitorBindingApi<T> implements BladeApi {
 		this.controller.binding.emitter.on('update', this.onBindingUpdate_);
 	}
 
+	get disabled(): boolean {
+		return this.controller.viewProps.get('disabled');
+	}
+
+	set disabled(disabled: boolean) {
+		this.controller.viewProps.set('disabled', disabled);
+	}
+
 	get hidden(): boolean {
-		return this.controller.blade.hidden;
+		return this.controller.viewProps.get('hidden');
 	}
 
 	set hidden(hidden: boolean) {
-		this.controller.blade.hidden = hidden;
+		this.controller.viewProps.set('hidden', hidden);
 	}
 
 	public dispose(): void {

lib/api/separator-test.ts

@@ -0,0 +1,29 @@
+import {assert} from 'chai';
+import {describe, it} from 'mocha';
+
+import {TestUtil} from '../misc/test-util';
+import {Blade} from '../plugin/blade/common/model/blade';
+import {SeparatorController} from '../plugin/blade/separator/controller';
+import {createViewProps} from '../plugin/common/model/view-props';
+import {SeparatorApi} from './separator';
+
+function createApi(doc: Document): SeparatorApi {
+	const c = new SeparatorController(doc, {
+		blade: new Blade(),
+		viewProps: createViewProps(),
+	});
+	return new SeparatorApi(c);
+}
+
+describe(SeparatorApi.name, () => {
+	it('should hide', () => {
+		const doc = TestUtil.createWindow().document;
+		const api = createApi(doc);
+		assert.strictEqual(api.hidden, false);
+
+		api.hidden = true;
+		assert.isTrue(
+			api.controller.view.element.classList.contains('tp-v-hidden'),
+		);
+	});
+});

lib/api/separator.ts

@@ -15,11 +15,11 @@ export class SeparatorApi implements BladeApi {
 	}
 
 	get hidden(): boolean {
-		return this.controller.blade.hidden;
+		return this.controller.viewProps.get('hidden');
 	}
 
 	set hidden(hidden: boolean) {
-		this.controller.blade.hidden = hidden;
+		this.controller.viewProps.set('hidden', hidden);
 	}
 
 	public dispose(): void {

lib/api/types.ts

@@ -28,6 +28,7 @@ export interface Point2dYParams extends PointDimensionParams {
 }
 
 export interface BaseInputParams extends BaseParams, LabelableParams {
+	disabled?: boolean;
 	presetKey?: string;
 	view?: string;
 }
@@ -82,6 +83,7 @@ export type InputParams =
 
 export interface BaseMonitorParams extends BaseParams, LabelableParams {
 	bufferSize?: number;
+	disabled?: boolean;
 	interval?: number;
 	view?: string;
 }
@@ -108,11 +110,14 @@ export type MonitorParams =
 
 export interface ButtonParams extends BaseParams, LabelableParams {
 	title: string;
+
+	disabled?: boolean;
 }
 
 export interface FolderParams extends BaseParams {
-	expanded?: boolean;
 	title: string;
+
+	expanded?: boolean;
 }
 
 export type SeparatorParams = BaseParams;

lib/index.ts

@@ -5,6 +5,7 @@ import {TweakpaneConfig} from './pane/tweakpane-config';
 import {Blade} from './plugin/blade/common/model/blade';
 import {RootController} from './plugin/blade/folder/root';
 import {getWindowDocument} from './plugin/common/dom-util';
+import {createViewProps} from './plugin/common/model/view-props';
 import {TpError} from './plugin/common/tp-error';
 import {ClassName} from './plugin/common/view/class-name';
 import {InputBindingPlugin} from './plugin/input-binding';
@@ -65,6 +66,7 @@ export default class Tweakpane extends RootApi {
 			expanded: config.expanded,
 			blade: new Blade(),
 			title: config.title,
+			viewProps: createViewProps(),
 		});
 		super(rootController);