Merge pull request #23 from cocopon/support-various-color-notations

Adding support for various color notations

src/doc/js/route/input.ts

@@ -164,13 +164,31 @@ export const InputRoute = {
 					label: 'hidden',
 				});
 			},
-			color: (container) => {
-				const PARAMS = {value: '#ff8800'};
+			objectColor: (container) => {
+				const PARAMS = {tint: {r: 255, g: 127, b: 0}};
 				const pane = new Tweakpane({
 					container: container,
 				});
-				pane.addInput(PARAMS, 'value', {
-					label: 'color',
+				pane.addInput(PARAMS, 'tint');
+			},
+			stringColor: (container) => {
+				const PARAMS = {
+					tint: '#8df',
+				};
+				const pane = new Tweakpane({
+					container: container,
+				});
+				pane.addInput(PARAMS, 'tint');
+			},
+			numberColor: (container) => {
+				const PARAMS = {
+					tint: 0x0088ff,
+				};
+				const pane = new Tweakpane({
+					container: container,
+				});
+				pane.addInput(PARAMS, 'tint', {
+					input: 'color',
 				});
 			},
 			point2d: (container) => {

src/doc/js/route/monitor.ts

@@ -52,7 +52,7 @@ export const MonitorRoute = {
 					label: 'graph',
 					max: +1,
 					min: -1,
-					type: 'graph',
+					view: 'graph',
 				});
 				nf.addMonitor(SHARED_PARAMS, 'positive', {
 					label: 'positive',
@@ -97,7 +97,7 @@ export const MonitorRoute = {
 				pane.addMonitor(SHARED_PARAMS, 'wave', {
 					max: +1,
 					min: -1,
-					type: 'graph',
+					view: 'graph',
 				});
 			},
 		};

src/doc/template/input.html

@@ -182,20 +182,58 @@ <h2 id="boolean">Boolean</h2>
 
 
 <h2 id="color">Color</h2>
-<p>For string parameters that can be parsed as a color, text field with a color swatch will be provided. You can choose a color from a color picker by clicking the swatch.</p>
+<p>For object parameters that have components key <code>r</code>, <code>g</code>, and <code>b</code>, text field with a color swatch will be provided. You can choose a color from a color picker by clicking the swatch.</p>
 
 <div class="common-main_mediaLayout">
 	<div class="common-demo">
 		<div class="common-demo_codeLayout">
 			<div class="common-codeBlock"><pre><code class="js">const PARAMS = {
-  color: '#ff8800',
+  tint: {r: 255, g: 127, b: 0},
 };
 
 const pane = new Tweakpane();
-pane.addInput(PARAMS, 'color');</code></pre></div>
+pane.addInput(PARAMS, 'tint');</code></pre></div>
 		</div>
 		<div class="common-demo_resultLayout">
-			<div class="common-paneContainer common-paneContainer-color"></div>
+			<div class="common-paneContainer common-paneContainer-objectColor"></div>
+		</div>
+	</div>
+</div>
+
+<p>This field will also provide for string parameters that can be parsed as a color.</p>
+
+<div class="common-main_mediaLayout">
+	<div class="common-demo">
+		<div class="common-demo_codeLayout">
+			<div class="common-codeBlock"><pre><code class="js">const PARAMS = {
+  tint: '#8df',
+};
+
+const pane = new Tweakpane();
+pane.addInput(PARAMS, 'tint');</code></pre></div>
+		</div>
+		<div class="common-demo_resultLayout">
+			<div class="common-paneContainer common-paneContainer-stringColor"></div>
+		</div>
+	</div>
+</div>
+
+<p>If you want to regard a hex number (like <code>0x0088ff</code>) as a color, specify <code>{input: 'color'}</code> option.</p>
+
+<div class="common-main_mediaLayout">
+	<div class="common-demo">
+		<div class="common-demo_codeLayout">
+			<div class="common-codeBlock"><pre><code class="js">const PARAMS = {
+  tint: 0x0088ff,
+};
+
+const pane = new Tweakpane();
+pane.addInput(PARAMS, 'tint', {
+  input: 'color',
+});</code></pre></div>
+		</div>
+		<div class="common-demo_resultLayout">
+			<div class="common-paneContainer common-paneContainer-numberColor"></div>
 		</div>
 	</div>
 </div>

src/doc/template/monitor.html

@@ -73,14 +73,14 @@ <h2 id="interval">Interval</h2>
 
 
 <h2 id="graph">Graph</h2>
-<p><code>{type: 'graph'}</code> option for number parameters provides a graph component. Pass <code>min</code> and <code>max</code> for value range.</p>
+<p><code>{view: 'graph'}</code> option for number parameters provides a graph component. Pass <code>min</code> and <code>max</code> for value range.</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();
 pane.addMonitor(PARAMS, 'wave', {
-  type: 'graph',
+  view: 'graph',
   min: -1,
   max: +1,
 });</code></pre></div>

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

@@ -2,23 +2,53 @@ import {assert} from 'chai';
 import {describe, describe as context, it} from 'mocha';
 
 import {ColorSwatchTextInputController} from '../controller/input/color-swatch-text';
+import {InputController} from '../controller/input/input';
 import {RootController} from '../controller/root';
 import {TestUtil} from '../misc/test-util';
+import {Class} from '../misc/type-util';
+import {Color} from '../model/color';
 import {RootApi} from './root';
+import {InputParams} from './types';
 
 function createApi(): RootApi {
 	const c = new RootController(TestUtil.createWindow().document, {});
 	return new RootApi(c);
 }
 
+interface TestCase {
+	expectedClass: Class<InputController<Color>>;
+	params: InputParams;
+	value: unknown;
+}
+
 describe(RootApi.name, () => {
-	[
+	const testCases: TestCase[] = [
 		{
 			expectedClass: ColorSwatchTextInputController,
 			params: {},
 			value: '#00ff00',
 		},
-	].forEach((testCase) => {
+		{
+			expectedClass: ColorSwatchTextInputController,
+			params: {
+				input: 'color',
+			},
+			value: 0x112233,
+		},
+		{
+			expectedClass: ColorSwatchTextInputController,
+			params: {
+				input: 'color.rgb',
+			},
+			value: 0x112233,
+		},
+		{
+			expectedClass: ColorSwatchTextInputController,
+			params: {},
+			value: {r: 0, g: 127, b: 255},
+		},
+	];
+	testCases.forEach((testCase) => {
 		context(`when params = ${JSON.stringify(testCase.params)}`, () => {
 			it(`should return class ${testCase.expectedClass.name}`, () => {
 				const api = createApi();

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

@@ -52,7 +52,10 @@ describe(RootApi.name, () => {
 		{
 			expectedClass: ListInputController,
 			params: {
-				options: [{text: 'foo', value: 0}, {text: 'bar', value: 1}],
+				options: [
+					{text: 'foo', value: 0},
+					{text: 'bar', value: 1},
+				],
 			},
 			value: 3.14,
 		},

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

@@ -32,7 +32,7 @@ describe(RootApi.name, () => {
 		{
 			expectedClass: GraphMonitorController,
 			params: {
-				type: 'graph',
+				view: 'graph',
 			},
 			value: 123,
 		},

src/main/js/api/types.ts

@@ -22,7 +22,10 @@ interface BooleanInputParams extends BaseInputParams {
 	options?: InputParamsOption<unknown>[] | InputParamsOptionDictionary<unknown>;
 }
 
+type NumberInputType = 'color' | 'color.rgb';
+
 interface NumberInputParams extends BaseInputParams {
+	input?: NumberInputType;
 	max?: number;
 	min?: number;
 	options?: InputParamsOption<unknown>[] | InputParamsOptionDictionary<unknown>;
@@ -53,10 +56,12 @@ interface BaseMonitorParams {
 
 type BooleanMonitorParams = BaseMonitorParams;
 
+type NumberMonitorViewType = 'graph';
+
 interface NumberMonitorParams extends BaseMonitorParams {
 	max?: number;
 	min?: number;
-	type?: string;
+	view?: NumberMonitorViewType;
 }
 
 interface StringMonitorParams extends BaseMonitorParams {

src/main/js/controller/binding-creators/color-input.ts

@@ -2,17 +2,18 @@ import {InputParams} from '../../api/types';
 import {InputBinding} from '../../binding/input';
 import * as ColorConverter from '../../converter/color';
 import {ColorFormatter} from '../../formatter/color';
-import {Color} from '../../model/color';
+import {Color, RgbColorObject} from '../../model/color';
 import {InputValue} from '../../model/input-value';
 import {Target} from '../../model/target';
+import {NumberColorParser} from '../../parser/number-color';
 import {StringColorParser} from '../../parser/string-color';
 import {InputBindingController} from '../input-binding';
 import {ColorSwatchTextInputController} from '../input/color-swatch-text';
 
 /**
  * @hidden
  */
-export function create(
+export function createWithString(
 	document: Document,
 	target: Target,
 	params: InputParams,
@@ -21,7 +22,6 @@ export function create(
 	if (typeof initialValue !== 'string') {
 		return null;
 	}
-
 	const color = StringColorParser(initialValue);
 	if (!color) {
 		return null;
@@ -43,3 +43,74 @@ export function create(
 		label: params.label || target.key,
 	});
 }
+
+/**
+ * @hidden
+ */
+export function createWithNumber(
+	document: Document,
+	target: Target,
+	params: InputParams,
+): InputBindingController<Color, number> | null {
+	const initialValue = target.read();
+	if (typeof initialValue !== 'number') {
+		return null;
+	}
+	if (!('input' in params)) {
+		return null;
+	}
+	if (params.input !== 'color' && params.input !== 'color.rgb') {
+		return null;
+	}
+	const color = NumberColorParser(initialValue);
+	if (!color) {
+		return null;
+	}
+
+	const value = new InputValue(color);
+	return new InputBindingController(document, {
+		binding: new InputBinding({
+			reader: ColorConverter.fromMixed,
+			target: target,
+			value: value,
+			writer: ColorConverter.toNumber,
+		}),
+		controller: new ColorSwatchTextInputController(document, {
+			formatter: new ColorFormatter(),
+			parser: StringColorParser,
+			value: value,
+		}),
+		label: params.label || target.key,
+	});
+}
+
+/**
+ * @hidden
+ */
+export function createWithObject(
+	document: Document,
+	target: Target,
+	params: InputParams,
+): InputBindingController<Color, RgbColorObject> | null {
+	const initialValue = target.read();
+	if (!Color.isRgbColorObject(initialValue)) {
+		return null;
+	}
+
+	const color = Color.fromRgbObject(initialValue);
+	const value = new InputValue(color);
+	return new InputBindingController(document, {
+		binding: new InputBinding({
+			reader: ColorConverter.fromMixed,
+			target: target,
+			value: value,
+			writer: Color.toRgbObject,
+		}),
+		controller: new ColorSwatchTextInputController(document, {
+			formatter: new ColorFormatter(),
+			parser: StringColorParser,
+			value: value,
+		}),
+		label: params.label || target.key,
+	});
+}

src/main/js/controller/binding-creators/input.ts

@@ -1,7 +1,7 @@
 import {InputParams} from '../../api/types';
 import {PaneError} from '../../misc/pane-error';
 import {TypeUtil} from '../../misc/type-util';
-import {Color} from '../../model/color';
+import {Color, RgbColorObject} from '../../model/color';
 import {Point2d, Point2dObject} from '../../model/point-2d';
 import {Target} from '../../model/target';
 import * as BooleanInputBindingControllerCreators from './boolean-input';
@@ -11,7 +11,12 @@ import * as Point2dInputBindingControllerCreators from './point-2d-input';
 import * as StringInputBindingControllerCreators from './string-input';
 
 export type InputtableInType = boolean | number | string | Color | Point2d;
-export type InputtableOutType = boolean | number | string | Point2dObject;
+export type InputtableOutType =
+	| boolean
+	| number
+	| string
+	| Point2dObject
+	| RgbColorObject;
 
 /**
  * @hidden
@@ -34,8 +39,10 @@ export function create(
 
 	const bc = [
 		BooleanInputBindingControllerCreators.create,
+		ColorInputBindingControllerCreators.createWithNumber,
+		ColorInputBindingControllerCreators.createWithObject,
+		ColorInputBindingControllerCreators.createWithString,
 		NumberInputBindingControllerCreators.create,
-		ColorInputBindingControllerCreators.create,
 		StringInputBindingControllerCreators.create,
 		Point2dInputBindingControllerCreators.create,
 	].reduce(

src/main/js/controller/binding-creators/number-monitor.ts

@@ -104,7 +104,7 @@ export function create(
 		return null;
 	}
 
-	if ('type' in params && params.type === 'graph') {
+	if ('view' in params && params.view === 'graph') {
 		return createGraphMonitor(document, target, params);
 	}
 

src/main/js/controller/input/list.ts

@@ -11,7 +11,7 @@ interface Config<T> {
 	value: InputValue<T>;
 }
 
-function findListItems<T>(value: InputValue<T>): (ListItem<T>[]) | null {
+function findListItems<T>(value: InputValue<T>): ListItem<T>[] | null {
 	const c = value.constraint
 		? ConstraintUtil.findConstraint<ListConstraint<T>>(
 				value.constraint,