Merge pull request #47 from cocopon/fix-event-handler-args

Fix event handler arguments

package.json

@@ -24,15 +24,15 @@
     "coverage": "run-s coverage:report coverage:coveralls",
     "coverage:coveralls": "mkdir -p test/coverage && nyc report --reporter=text-lcov > test/coverage/lcov.info",
     "coverage:report": "run-p coverage:report:*",
-		"coverage:report:xml": "TS_NODE_PROJECT='src/main/tsconfig.json' nyc --reporter=none --extension '.ts' --exclude '**/*-test.ts' mocha --require ts-node/register --reporter mocha-junit-reporter --reporter-options mochaFile=./test/results/results.xml 'src/main/js/**/*-test.ts'",
+    "coverage:report:xml": "TS_NODE_PROJECT='src/main/tsconfig.json' nyc --reporter=none --extension '.ts' --exclude '**/*-test.ts' mocha --require ts-node/register --reporter mocha-junit-reporter --reporter-options mochaFile=./test/results/results.xml 'src/main/js/**/*-test.ts'",
     "coverage:report:html": "nyc report --reporter=html --reporter=text --reporter=lcovonly --report-dir=test/coverage",
     "format": "run-p main:format doc:format",
     "doc:build": "run-p doc:build:*",
     "doc:build:scss": "mkdir -p docs/assets && node-sass src/doc/sass/bundle.scss | postcss --config postcss.config.js > docs/assets/bundle.css",
     "doc:build:html": "node project/render-html-templates.js",
     "doc:build:img": "mkdir -p docs/assets && cp -r src/doc/img/* docs/assets",
     "doc:build:ts": "webpack --config webpack-doc.config.js",
-    "doc:build:refs": "typedoc --exclude 'src/main/js/misc/**/*' --mode file --module es5 --tsconfig src/main/tsconfig.json --out docs/api --readme none --excludeNotExported src/main/js/api/root.ts src/main/js/tweakpane-config.ts",
+    "doc:build:refs": "typedoc --exclude 'src/main/js/misc/**/*' --mode file --module es6 --tsconfig src/main/tsconfig.json --out docs/api --readme none --excludeNotExported src/main/js/api/root.ts src/main/js/tweakpane-config.ts",
     "doc:format": "run-p doc:format:*",
     "doc:format:scss": "prettier --parser scss --write 'src/doc/sass/**/*.scss'",
     "doc:format:ts": "eslint --ext .ts --fix 'src/doc/js/**/*'",
@@ -51,13 +51,13 @@
     "main:format": "run-p main:format:*",
     "main:format:scss": "prettier --parser scss --write 'src/main/sass/**/*.scss'",
     "main:format:ts": "eslint --ext .ts --fix 'src/main/js/**/*'",
-		"main:prepare": "npm-run-all main:build --serial package:dist",
+    "main:prepare": "npm-run-all main:build --serial package:dist",
     "main:test": "run-s main:test:scss main:test:ts",
     "main:test:scss": "prettier --parser scss --list-different 'src/main/sass/**/*.scss'",
-		"main:test:ts": "run-p main:test:ts:*",
+    "main:test:ts": "run-p main:test:ts:*",
     "main:test:ts:dynamic": "TS_NODE_PROJECT='src/main/tsconfig.json' nyc --extension '.ts' --exclude '**/*-test.ts' mocha --require ts-node/register 'src/main/js/**/*-test.ts'",
     "main:test:ts:require": "npm run main:prepare && (cd test-require && npm install && npm run try)",
-		"main:test:ts:static": "eslint --ext .ts 'src/main/js/**/*'",
+    "main:test:ts:static": "eslint --ext .ts 'src/main/js/**/*'",
     "main:watch": "webpack --mode development --watch",
     "package": "npm-run-all clean main:build --serial package:dist package:version package:zip",
     "package:dist": "mkdir -p dist && cp docs/assets/tweakpane*.js dist",
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.1.7",
-    "@types/jsdom": "^12.2.0",
+    "@types/jsdom": "^16.2.3",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.12.18",
     "@types/pixi.js": "^4.8.6",
@@ -98,8 +98,8 @@
     "prettier": "^1.15.3",
     "sass-loader": "^7.1.0",
     "ts-node": "^7.0.1",
-    "typedoc": "^0.14.2",
-    "typescript": "^3.2.2",
+    "typedoc": "^0.17.7",
+    "typescript": "^3.9.3",
     "webpack": "^4.23.1",
     "webpack-cli": "^3.1.2"
   },

src/doc/js/route/misc.ts

@@ -204,13 +204,18 @@ ${indentedProps}
 
 			globalEvent: (container) => {
 				const PARAMS = {
-					log: '',
+					boolean: true,
+					color: '#0080ff',
 					number: 0,
 					string: 'text',
+
+					log: '',
 				};
 				const pane = new Tweakpane({
 					container: container,
 				});
+				pane.addInput(PARAMS, 'boolean');
+				pane.addInput(PARAMS, 'color');
 				pane.addInput(PARAMS, 'number', {
 					max: 100,
 					min: 0,

src/main/js/api/event-handler-adapters.ts

@@ -0,0 +1,92 @@
+import {InputBinding} from '../binding/input';
+import {MonitorBinding} from '../binding/monitor';
+import {UiMonitorBinding} from '../controller/ui';
+import {Handler} from '../misc/emitter';
+import {Folder} from '../model/folder';
+import {UiControllerList} from '../model/ui-controller-list';
+
+export type InputEventName = 'change';
+export type MonitorEventName = 'update';
+export type FolderEventName = InputEventName | MonitorEventName | 'fold';
+
+/**
+ * @hidden
+ */
+export function input<In, Out>({
+	binding,
+	eventName,
+	handler,
+}: {
+	binding: InputBinding<In, Out>;
+	eventName: InputEventName;
+	handler: Handler;
+}) {
+	if (eventName === 'change') {
+		const emitter = binding.emitter;
+		emitter.on('change', (inputBinding: InputBinding<In, Out>, value: any) => {
+			handler(inputBinding.getValueToWrite(value));
+		});
+	}
+}
+
+/**
+ * @hidden
+ */
+export function monitor<In>({
+	binding,
+	eventName,
+	handler,
+}: {
+	binding: MonitorBinding<In>;
+	eventName: MonitorEventName;
+	handler: Handler;
+}) {
+	if (eventName === 'update') {
+		const emitter = binding.emitter;
+		emitter.on('update', (monitorBinding: MonitorBinding<In>) => {
+			handler(monitorBinding.target.read());
+		});
+	}
+}
+
+/**
+ * @hidden
+ */
+export function folder({
+	eventName,
+	folder,
+	handler,
+	uiControllerList,
+}: {
+	eventName: FolderEventName;
+	folder: Folder | null;
+	handler: Handler;
+	uiControllerList: UiControllerList;
+}) {
+	if (eventName === 'change') {
+		const emitter = uiControllerList.emitter;
+		emitter.on(
+			'inputchange',
+			(_: UiControllerList, inputBinding: any, value: any) => {
+				handler(inputBinding.getValueToWrite(value));
+			},
+		);
+	}
+	if (eventName === 'update') {
+		const emitter = uiControllerList.emitter;
+		emitter.on(
+			'monitorupdate',
+			(_: UiControllerList, monitorBinding: UiMonitorBinding) => {
+				handler(monitorBinding.target.read());
+			},
+		);
+	}
+	if (eventName === 'fold') {
+		uiControllerList.emitter.on('fold', () => {
+			handler();
+		});
+		folder?.emitter.on('change', () => {
+			handler();
+		});
+	}
+}

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

@@ -9,6 +9,7 @@ import {MonitorBindingController} from '../controller/monitor-binding';
 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 {FolderApi} from './folder';
 
@@ -136,4 +137,61 @@ describe(FolderApi.name, () => {
 			});
 		});
 	});
+
+	[
+		{
+			expected: 456,
+			params: {
+				propertyValue: 123,
+				newInternalValue: 456,
+			},
+		},
+		{
+			expected: 'changed',
+			params: {
+				propertyValue: 'text',
+				newInternalValue: 'changed',
+			},
+		},
+		{
+			expected: true,
+			params: {
+				propertyValue: false,
+				newInternalValue: true,
+			},
+		},
+		{
+			expected: '#224488',
+			params: {
+				propertyValue: '#123',
+				newInternalValue: new Color([0x22, 0x44, 0x88], 'rgb'),
+			},
+		},
+	].forEach(({expected, params}) => {
+		context(`when ${JSON.stringify(params)}`, () => {
+			it('should pass right first argument for change event (local)', (done) => {
+				const api = createApi();
+				const obj = {foo: params.propertyValue};
+				const bapi = api.addInput(obj, 'foo');
+
+				bapi.on('change', (value) => {
+					assert.strictEqual(value, expected);
+					done();
+				});
+				bapi.controller.binding.value.rawValue = params.newInternalValue;
+			});
+
+			it('should pass right first argument for change event (global)', (done) => {
+				const api = createApi();
+				const obj = {foo: params.propertyValue};
+				const bapi = api.addInput(obj, 'foo');
+
+				api.on('change', (value) => {
+					assert.strictEqual(value, expected);
+					done();
+				});
+				bapi.controller.binding.value.rawValue = params.newInternalValue;
+			});
+		});
+	});
 });

src/main/js/api/folder.ts

@@ -2,12 +2,12 @@ import * as InputBindingControllerCreators from '../controller/binding-creators/
 import * as MonitorBindingControllerCreators from '../controller/binding-creators/monitor';
 import {ButtonController} from '../controller/button';
 import {FolderController} from '../controller/folder';
-import {EventName as InternalEventName} from '../controller/folder';
 import {SeparatorController} from '../controller/separator';
 import {Handler} from '../misc/emitter';
 import {Disposable} from '../model/disposable';
 import {Target} from '../model/target';
 import {ButtonApi} from './button';
+import * as EventHandlerAdapters from './event-handler-adapters';
 import {InputBindingApi} from './input-binding';
 import {MonitorBindingApi} from './monitor-binding';
 import {
@@ -17,16 +17,6 @@ import {
 	SeparatorParams,
 } from './types';
 
-type EventName = 'change' | 'fold' | 'update';
-
-const TO_INTERNAL_EVENT_NAME_MAP: {
-	[eventName in EventName]: InternalEventName;
-} = {
-	change: 'inputchange',
-	fold: 'fold',
-	update: 'monitorupdate',
-};
-
 export class FolderApi {
 	/**
 	 * @hidden
@@ -96,12 +86,16 @@ export class FolderApi {
 		this.controller.uiControllerList.add(uc, params.index);
 	}
 
-	public on(eventName: EventName, handler: Handler): FolderApi {
-		const internalEventName = TO_INTERNAL_EVENT_NAME_MAP[eventName];
-		if (internalEventName) {
-			const emitter = this.controller.emitter;
-			emitter.on(internalEventName, handler);
-		}
+	public on(
+		eventName: EventHandlerAdapters.FolderEventName,
+		handler: Handler,
+	): FolderApi {
+		EventHandlerAdapters.folder({
+			eventName: eventName,
+			folder: this.controller.folder,
+			handler: handler,
+			uiControllerList: this.controller.uiControllerList,
+		});
 		return this;
 	}
 }

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

@@ -1,5 +1,6 @@
 import {InputBindingController} from '../controller/input-binding';
 import {Handler} from '../misc/emitter';
+import * as HandlerAdapters from './event-handler-adapters';
 
 type EventName = 'change';
 
@@ -22,8 +23,11 @@ export class InputBindingApi<In, Out> {
 	}
 
 	public on(eventName: EventName, handler: Handler): InputBindingApi<In, Out> {
-		const emitter = this.controller.binding.value.emitter;
-		emitter.on(eventName, handler);
+		HandlerAdapters.input({
+			binding: this.controller.binding,
+			eventName: eventName,
+			handler: handler,
+		});
 		return this;
 	}
 

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

@@ -1,5 +1,6 @@
 import {MonitorBindingController} from '../controller/monitor-binding';
 import {Handler} from '../misc/emitter';
+import * as EventHandlerAdapters from './event-handler-adapters';
 
 type EventName = 'update';
 
@@ -24,8 +25,11 @@ export class MonitorBindingApi<In> {
 	}
 
 	public on(eventName: EventName, handler: Handler): MonitorBindingApi<In> {
-		const emitter = this.controller.binding.value.emitter;
-		emitter.on(eventName, handler);
+		EventHandlerAdapters.monitor({
+			binding: this.controller.binding,
+			eventName: eventName,
+			handler: handler,
+		});
 		return this;
 	}
 

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

@@ -82,14 +82,14 @@ describe(RootApi.name, () => {
 		},
 	].forEach((testCase) => {
 		context(`when params = ${JSON.stringify(testCase.params)}`, () => {
-			it(`should be hoge ${testCase.expected.inputValue}`, () => {
+			it(`should have right input value ${testCase.expected.inputValue}`, () => {
 				const api = createApi();
 				const obj = {foo: testCase.params.input};
 				const bapi = api.addInput(obj, 'foo');
 
 				const view = bapi.controller.controller.view;
 				if (!(view instanceof ColorSwatchTextInputView)) {
-					throw new Error('hoge');
+					throw new Error('Unexpected view');
 				}
 
 				const inputElem = view.textInputView.inputElement;