Merge pull request #467 from cocopon/refactor-color-type

Refactor color types, #450

packages/core/src/blade/folder/api/folder-test.ts

@@ -3,7 +3,7 @@ import {describe, it} from 'mocha';
 
 import {ValueMap} from '../../../common/model/value-map';
 import {ViewProps} from '../../../common/model/view-props';
-import {Color} from '../../../input-binding/color/model/color';
+import {IntColor} from '../../../input-binding/color/model/int-color';
 import {createTestWindow} from '../../../misc/dom-test-util';
 import {createDefaultPluginPool} from '../../../plugin/plugins';
 import {testBladeContainer} from '../../common/api/blade-rack-test';
@@ -195,14 +195,14 @@ describe(FolderApi.name, () => {
 			expected: '#224488',
 			params: {
 				propertyValue: '#123',
-				newInternalValue: new Color([0x22, 0x44, 0x88], 'rgb'),
+				newInternalValue: new IntColor([0x22, 0x44, 0x88], 'rgb'),
 			},
 		},
 		{
 			expected: 'rgb(0, 127, 255)',
 			params: {
 				propertyValue: 'rgb(10, 20, 30)',
-				newInternalValue: new Color([0, 127, 255], 'rgb'),
+				newInternalValue: new IntColor([0, 127, 255], 'rgb'),
 			},
 		},
 	].forEach(({expected, params}) => {

packages/core/src/common/converter/parser-test.ts

@@ -0,0 +1,19 @@
+import * as assert from 'assert';
+import {describe, it} from 'mocha';
+
+import {composeParsers} from './parser';
+
+describe(composeParsers.name, () => {
+	it('should use the first parser', () => {
+		const p = composeParsers<number>([
+			(t) => parseInt(t) * 10,
+			(t) => parseInt(t) * 100,
+		]);
+		assert.strictEqual(p('123'), 1230);
+	});
+
+	it('should delegate a value to the next parser', () => {
+		const p = composeParsers<number>([(_) => null, (t) => parseInt(t) * 100]);
+		assert.strictEqual(p('123'), 12300);
+	});
+});

packages/core/src/common/converter/parser.ts

@@ -1 +1,12 @@
 export type Parser<T> = (text: string) => T | null;
+
+export function composeParsers<T>(parsers: Parser<T>[]): Parser<T> {
+	return (text) => {
+		return parsers.reduce((result: T | null, parser) => {
+			if (result !== null) {
+				return result;
+			}
+			return parser(text);
+		}, null);
+	};
+}

packages/core/src/index.ts

@@ -109,6 +109,8 @@ export * from './input-binding/color/controller/color';
 export * from './input-binding/color/converter/color-number';
 export * from './input-binding/color/converter/color-string';
 export * from './input-binding/color/model/color';
+export * from './input-binding/color/model/float-color';
+export * from './input-binding/color/model/int-color';
 export * from './input-binding/color/plugin-number';
 export * from './input-binding/color/plugin-object';
 export * from './input-binding/color/plugin-string';

packages/core/src/input-binding/color/controller/a-palette.ts

@@ -7,20 +7,20 @@ import {
 	PointerHandler,
 	PointerHandlerEvents,
 } from '../../../common/view/pointer-handler';
-import {Color} from '../model/color';
+import {IntColor} from '../model/int-color';
 import {getBaseStepForColor} from '../util';
 import {APaletteView} from '../view/a-palette';
 
 interface Config {
-	value: Value<Color>;
+	value: Value<IntColor>;
 	viewProps: ViewProps;
 }
 
 /**
  * @hidden
  */
 export class APaletteController implements Controller<APaletteView> {
-	public readonly value: Value<Color>;
+	public readonly value: Value<IntColor>;
 	public readonly view: APaletteView;
 	public readonly viewProps: ViewProps;
 	private readonly ptHandler_: PointerHandler;
@@ -58,7 +58,7 @@ export class APaletteController implements Controller<APaletteView> {
 
 		const c = this.value.rawValue;
 		const [h, s, v] = c.getComponents('hsv');
-		this.value.setRawValue(new Color([h, s, v, alpha], 'hsv'), opts);
+		this.value.setRawValue(new IntColor([h, s, v, alpha], 'hsv'), opts);
 	}
 
 	private onPointerDown_(ev: PointerHandlerEvents['down']): void {
@@ -93,7 +93,7 @@ export class APaletteController implements Controller<APaletteView> {
 
 		const c = this.value.rawValue;
 		const [h, s, v, a] = c.getComponents('hsv');
-		this.value.setRawValue(new Color([h, s, v, a + step], 'hsv'), {
+		this.value.setRawValue(new IntColor([h, s, v, a + step], 'hsv'), {
 			forceEmit: false,
 			last: false,
 		});

packages/core/src/input-binding/color/controller/color-picker-test.ts

@@ -5,12 +5,12 @@ import {createValue} from '../../../common/model/values';
 import {ViewProps} from '../../../common/model/view-props';
 import {createTestWindow} from '../../../misc/dom-test-util';
 import {TestUtil} from '../../../misc/test-util';
-import {Color} from '../model/color';
+import {IntColor} from '../model/int-color';
 import {ColorPickerController} from './color-picker';
 
 describe(ColorPickerController.name, () => {
 	it('should set initial color mode', () => {
-		const value = createValue(new Color([0, 0, 0], 'hsv'));
+		const value = createValue(new IntColor([0, 0, 0], 'hsv'));
 		const win = createTestWindow();
 		const doc = win.document;
 		const c = new ColorPickerController(doc, {
@@ -24,7 +24,7 @@ describe(ColorPickerController.name, () => {
 	});
 
 	it('should change hue of black in HSL', () => {
-		const value = createValue(new Color([0, 0, 0], 'rgb'));
+		const value = createValue(new IntColor([0, 0, 0], 'rgb'));
 		const win = createTestWindow();
 		const doc = win.document;
 		const c = new ColorPickerController(doc, {

packages/core/src/input-binding/color/controller/color-picker.ts

@@ -10,8 +10,8 @@ import {connectValues} from '../../../common/model/value-sync';
 import {createValue} from '../../../common/model/values';
 import {ViewProps} from '../../../common/model/view-props';
 import {NumberTextController} from '../../../common/number/controller/number-text';
-import {Color} from '../model/color';
 import {ColorType} from '../model/color-model';
+import {IntColor} from '../model/int-color';
 import {ColorPickerView} from '../view/color-picker';
 import {APaletteController} from './a-palette';
 import {ColorTextController} from './color-text';
@@ -21,15 +21,15 @@ import {SvPaletteController} from './sv-palette';
 interface Config {
 	colorType: ColorType;
 	supportsAlpha: boolean;
-	value: Value<Color>;
+	value: Value<IntColor>;
 	viewProps: ViewProps;
 }
 
 /**
  * @hidden
  */
 export class ColorPickerController implements Controller<ColorPickerView> {
-	public readonly value: Value<Color>;
+	public readonly value: Value<IntColor>;
 	public readonly view: ColorPickerView;
 	public readonly viewProps: ViewProps;
 	private readonly alphaIcs_: {
@@ -82,7 +82,7 @@ export class ColorPickerController implements Controller<ColorPickerView> {
 				backward: (p, s) => {
 					const comps = p.rawValue.getComponents();
 					comps[3] = s.rawValue;
-					return new Color(comps, p.rawValue.mode);
+					return new IntColor(comps, p.rawValue.mode);
 				},
 			});
 		}

packages/core/src/input-binding/color/controller/color-swatch.ts

@@ -1,19 +1,19 @@
 import {Controller} from '../../../common/controller/controller';
 import {Value} from '../../../common/model/value';
 import {ViewProps} from '../../../common/model/view-props';
-import {Color} from '../model/color';
+import {IntColor} from '../model/int-color';
 import {ColorSwatchView} from '../view/color-swatch';
 
 interface Config {
-	value: Value<Color>;
+	value: Value<IntColor>;
 	viewProps: ViewProps;
 }
 
 /**
  * @hidden
  */
 export class ColorSwatchController implements Controller<ColorSwatchView> {
-	public readonly value: Value<Color>;
+	public readonly value: Value<IntColor>;
 	public readonly view: ColorSwatchView;
 	public readonly viewProps: ViewProps;
 

packages/core/src/input-binding/color/controller/color-text-test.ts

@@ -6,8 +6,8 @@ import {createValue} from '../../../common/model/values';
 import {ViewProps} from '../../../common/model/view-props';
 import {createTestWindow} from '../../../misc/dom-test-util';
 import {TestUtil} from '../../../misc/test-util';
-import {Color} from '../model/color';
 import {ColorComponents3} from '../model/color-model';
+import {IntColor} from '../model/int-color';
 import {ColorTextController} from './color-text';
 
 describe(ColorTextController.name, () => {
@@ -42,7 +42,7 @@ describe(ColorTextController.name, () => {
 				testCase.expected,
 			)}`, (done) => {
 				const value = createValue(
-					new Color(testCase.params.components as ColorComponents3, 'rgb'),
+					new IntColor(testCase.params.components as ColorComponents3, 'rgb'),
 				);
 				value.emitter.on('change', () => {
 					assert.deepStrictEqual(
@@ -108,7 +108,7 @@ describe(ColorTextController.name, () => {
 				testCase.expected,
 			)}`, (done) => {
 				const value = createValue(
-					new Color(testCase.params.components as ColorComponents3, 'rgb'),
+					new IntColor(testCase.params.components as ColorComponents3, 'rgb'),
 				);
 				value.emitter.on('change', () => {
 					assert.deepStrictEqual(

packages/core/src/input-binding/color/controller/color-text.ts

@@ -11,21 +11,22 @@ import {createValue} from '../../../common/model/values';
 import {ViewProps} from '../../../common/model/view-props';
 import {NumberTextController} from '../../../common/number/controller/number-text';
 import {Tuple3} from '../../../misc/type-util';
-import {Color} from '../model/color';
 import {
 	appendAlphaComponent,
 	ColorMode,
 	ColorType,
 	getColorMaxComponents,
 	removeAlphaComponent,
 } from '../model/color-model';
+import {createColor, mapColorType} from '../model/colors';
+import {IntColor} from '../model/int-color';
 import {getBaseStepForColor} from '../util';
 import {ColorTextView} from '../view/color-text';
 
 interface Config {
 	colorType: ColorType;
 	parser: Parser<number>;
-	value: Value<Color>;
+	value: Value<IntColor>;
 	viewProps: ViewProps;
 }
 
@@ -75,7 +76,7 @@ function createComponentController(
  */
 export class ColorTextController implements Controller<ColorTextView> {
 	public readonly colorMode: Value<ColorMode>;
-	public readonly value: Value<Color>;
+	public readonly value: Value<IntColor>;
 	public readonly view: ColorTextView;
 	public readonly viewProps: ViewProps;
 	private readonly parser_: Parser<number>;
@@ -123,20 +124,20 @@ export class ColorTextController implements Controller<ColorTextView> {
 				primary: this.value,
 				secondary: cs.value,
 				forward: (p) => {
-					return p.rawValue.getComponents(
-						this.colorMode.rawValue,
-						this.colorType_,
-					)[index];
+					const mc = mapColorType(p.rawValue, this.colorType_);
+					return mc.getComponents(this.colorMode.rawValue)[index];
 				},
 				backward: (p, s) => {
 					const pickedMode = this.colorMode.rawValue;
-					const comps = p.rawValue.getComponents(pickedMode, this.colorType_);
+					const mc = mapColorType(p.rawValue, this.colorType_);
+					const comps = mc.getComponents(pickedMode);
 					comps[index] = s.rawValue;
-					return new Color(
+					const c = createColor(
 						appendAlphaComponent(removeAlphaComponent(comps), comps[3]),
 						pickedMode,
 						this.colorType_,
 					);
+					return mapColorType(c, 'int');
 				},
 			});
 		});

packages/core/src/input-binding/color/controller/color.ts

@@ -11,32 +11,32 @@ import {connectValues} from '../../../common/model/value-sync';
 import {ViewProps} from '../../../common/model/view-props';
 import {PickerLayout} from '../../../common/params';
 import {forceCast} from '../../../misc/type-util';
-import {Color} from '../model/color';
 import {ColorType} from '../model/color-model';
+import {IntColor} from '../model/int-color';
 import {ColorView} from '../view/color';
 import {ColorPickerController} from './color-picker';
 import {ColorSwatchController} from './color-swatch';
 
 interface Config {
 	colorType: ColorType;
 	expanded: boolean;
-	formatter: Formatter<Color>;
-	parser: Parser<Color>;
+	formatter: Formatter<IntColor>;
+	parser: Parser<IntColor>;
 	pickerLayout: PickerLayout;
 	supportsAlpha: boolean;
-	value: Value<Color>;
+	value: Value<IntColor>;
 	viewProps: ViewProps;
 }
 
 /**
  * @hidden
  */
 export class ColorController implements Controller<ColorView> {
-	public readonly value: Value<Color>;
+	public readonly value: Value<IntColor>;
 	public readonly view: ColorView;
 	public readonly viewProps: ViewProps;
 	private readonly swatchC_: ColorSwatchController;
-	private readonly textC_: TextController<Color>;
+	private readonly textC_: TextController<IntColor>;
 	private readonly pickerC_: ColorPickerController;
 	private readonly popC_: PopupController | null;
 	private readonly foldable_: Foldable;
@@ -112,7 +112,7 @@ export class ColorController implements Controller<ColorView> {
 		}
 	}
 
-	get textController(): TextController<Color> {
+	get textController(): TextController<IntColor> {
 		return this.textC_;
 	}
 

packages/core/src/input-binding/color/controller/h-palette.ts

@@ -8,20 +8,20 @@ import {
 	PointerHandler,
 	PointerHandlerEvents,
 } from '../../../common/view/pointer-handler';
-import {Color} from '../model/color';
+import {IntColor} from '../model/int-color';
 import {getBaseStepForColor} from '../util';
 import {HPaletteView} from '../view/h-palette';
 
 interface Config {
-	value: Value<Color>;
+	value: Value<IntColor>;
 	viewProps: ViewProps;
 }
 
 /**
  * @hidden
  */
 export class HPaletteController implements Controller<HPaletteView> {
-	public readonly value: Value<Color>;
+	public readonly value: Value<IntColor>;
 	public readonly view: HPaletteView;
 	public readonly viewProps: ViewProps;
 	private readonly ptHandler_: PointerHandler;
@@ -65,7 +65,7 @@ export class HPaletteController implements Controller<HPaletteView> {
 
 		const c = this.value.rawValue;
 		const [, s, v, a] = c.getComponents('hsv');
-		this.value.setRawValue(new Color([hue, s, v, a], 'hsv'), opts);
+		this.value.setRawValue(new IntColor([hue, s, v, a], 'hsv'), opts);
 	}
 
 	private onPointerDown_(ev: PointerHandlerEvents['down']): void {
@@ -100,7 +100,7 @@ export class HPaletteController implements Controller<HPaletteView> {
 
 		const c = this.value.rawValue;
 		const [h, s, v, a] = c.getComponents('hsv');
-		this.value.setRawValue(new Color([h + step, s, v, a], 'hsv'), {
+		this.value.setRawValue(new IntColor([h + step, s, v, a], 'hsv'), {
 			forceEmit: false,
 			last: false,
 		});