From c550fe928384efb403772c729e3f0b04e194d682 Mon Sep 17 00:00:00 2001 From: Surma Date: Wed, 1 Aug 2018 12:32:29 +0100 Subject: [PATCH] Refactor preprocessors module --- src/codecs/encoders.ts | 9 ------ src/codecs/imagequant/options.tsx | 20 ++++-------- src/codecs/preprocessors.ts | 15 +++++++++ src/codecs/webp/options.tsx | 52 +++++++++++-------------------- src/components/App/index.tsx | 20 +++++------- src/components/Options/index.tsx | 3 +- src/lib/util.ts | 14 +++++++++ 7 files changed, 63 insertions(+), 70 deletions(-) create mode 100644 src/codecs/preprocessors.ts diff --git a/src/codecs/encoders.ts b/src/codecs/encoders.ts index 6c901fb0..074d06cd 100644 --- a/src/codecs/encoders.ts +++ b/src/codecs/encoders.ts @@ -10,8 +10,6 @@ import * as browserJP2 from './browser-jp2/encoder'; import * as browserBMP from './browser-bmp/encoder'; import * as browserPDF from './browser-pdf/encoder'; -import * as quantizer from './imagequant/quantizer'; - export interface EncoderSupportMap { [key: string]: boolean; } @@ -28,13 +26,6 @@ export type EncoderOptions = browserPDF.EncodeOptions; export type EncoderType = keyof typeof encoderMap; -export interface Enableable { - enabled: boolean; -} -export interface PreprocessorState { - quantizer: Enableable & quantizer.QuantizeOptions; -} - export const encoderMap = { [identity.type]: identity, [mozJPEG.type]: mozJPEG, diff --git a/src/codecs/imagequant/options.tsx b/src/codecs/imagequant/options.tsx index 7dc2cb6f..4be993fd 100644 --- a/src/codecs/imagequant/options.tsx +++ b/src/codecs/imagequant/options.tsx @@ -1,18 +1,10 @@ import { h, Component } from 'preact'; -import { bind } from '../../lib/util'; -// import * as styles from './styles.scss'; +import { bind, inputFieldValueAsNumber } from '../../lib/util'; import { QuantizeOptions } from './quantizer'; -type Props = { - options: QuantizeOptions, - onChange(newOptions: QuantizeOptions): void, -}; - -/** - * @param field An HTMLInputElement, but the casting is done here to tidy up onChange. - */ -function fieldValueAsNumber(field: any): number { - return Number((field as HTMLInputElement).value); +interface Props { + options: QuantizeOptions; + onChange(newOptions: QuantizeOptions): void; } export default class QuantizerOptions extends Component { @@ -21,8 +13,8 @@ export default class QuantizerOptions extends Component { const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement; const options: QuantizeOptions = { - maxNumColors: fieldValueAsNumber(form.maxNumColors), - dither: fieldValueAsNumber(form.dither), + maxNumColors: inputFieldValueAsNumber(form.maxNumColors), + dither: inputFieldValueAsNumber(form.dither), }; this.props.onChange(options); } diff --git a/src/codecs/preprocessors.ts b/src/codecs/preprocessors.ts new file mode 100644 index 00000000..c614aa50 --- /dev/null +++ b/src/codecs/preprocessors.ts @@ -0,0 +1,15 @@ +import { QuantizeOptions, defaultOptions as quantizerDefaultOptions } from './imagequant/quantizer'; + +interface Enableable { + enabled: boolean; +} +export interface PreprocessorState { + quantizer: Enableable & QuantizeOptions; +} + +export const defaultPreprocessorState = { + quantizer: { + enabled: false, + ...quantizerDefaultOptions, + }, +}; diff --git a/src/codecs/webp/options.tsx b/src/codecs/webp/options.tsx index f1eb2fca..f18125fd 100644 --- a/src/codecs/webp/options.tsx +++ b/src/codecs/webp/options.tsx @@ -1,5 +1,5 @@ import { h, Component } from 'preact'; -import { bind } from '../../lib/util'; +import { bind, inputFieldCheckedAsNumber, inputFieldValueAsNumber } from '../../lib/util'; import { EncodeOptions, WebPImageHint } from './encoder'; import * as styles from './styles.scss'; @@ -24,25 +24,11 @@ function determineLosslessQuality(quality: number): number { return losslessPresetDefault; } -/** - * @param field An HTMLInputElement, but the casting is done here to tidy up onChange. - */ -function fieldCheckedAsNumber(field: any): number { - return Number((field as HTMLInputElement).checked); -} - -/** - * @param field An HTMLInputElement, but the casting is done here to tidy up onChange. - */ -function fieldValueAsNumber(field: any): number { - return Number((field as HTMLInputElement).value); -} - export default class WebPEncoderOptions extends Component { @bind onChange(event: Event) { const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement; - const lossless = fieldCheckedAsNumber(form.lossless); + const lossless = inputFieldCheckedAsNumber(form.lossless); const losslessPresetInput = (form.lossless_preset as HTMLInputElement); const options: EncodeOptions = { @@ -54,31 +40,31 @@ export default class WebPEncoderOptions extends Component { // In lossless mode, the quality is derived from the preset. quality: lossless ? losslessPresets[Number(losslessPresetInput.value)][1] : - fieldValueAsNumber(form.quality), + inputFieldValueAsNumber(form.quality), // In lossless mode, the method is derived from the preset. method: lossless ? losslessPresets[Number(losslessPresetInput.value)][0] : - fieldValueAsNumber(form.method_input), + inputFieldValueAsNumber(form.method_input), image_hint: (form.image_hint as HTMLInputElement).checked ? WebPImageHint.WEBP_HINT_GRAPH : WebPImageHint.WEBP_HINT_DEFAULT, // .checked - exact: fieldCheckedAsNumber(form.exact), - alpha_compression: fieldCheckedAsNumber(form.alpha_compression), - autofilter: fieldCheckedAsNumber(form.autofilter), - filter_type: fieldCheckedAsNumber(form.filter_type), - use_sharp_yuv: fieldCheckedAsNumber(form.use_sharp_yuv), + exact: inputFieldCheckedAsNumber(form.exact), + alpha_compression: inputFieldCheckedAsNumber(form.alpha_compression), + autofilter: inputFieldCheckedAsNumber(form.autofilter), + filter_type: inputFieldCheckedAsNumber(form.filter_type), + use_sharp_yuv: inputFieldCheckedAsNumber(form.use_sharp_yuv), // .value - near_lossless: fieldValueAsNumber(form.near_lossless), - alpha_quality: fieldValueAsNumber(form.alpha_quality), - alpha_filtering: fieldValueAsNumber(form.alpha_filtering), - sns_strength: fieldValueAsNumber(form.sns_strength), - filter_strength: fieldValueAsNumber(form.filter_strength), - filter_sharpness: fieldValueAsNumber(form.filter_sharpness), - pass: fieldValueAsNumber(form.pass), - preprocessing: fieldValueAsNumber(form.preprocessing), - segments: fieldValueAsNumber(form.segments), - partitions: fieldValueAsNumber(form.partitions), + near_lossless: inputFieldValueAsNumber(form.near_lossless), + alpha_quality: inputFieldValueAsNumber(form.alpha_quality), + alpha_filtering: inputFieldValueAsNumber(form.alpha_filtering), + sns_strength: inputFieldValueAsNumber(form.sns_strength), + filter_strength: inputFieldValueAsNumber(form.filter_strength), + filter_sharpness: inputFieldValueAsNumber(form.filter_sharpness), + pass: inputFieldValueAsNumber(form.pass), + preprocessing: inputFieldValueAsNumber(form.preprocessing), + segments: inputFieldValueAsNumber(form.segments), + partitions: inputFieldValueAsNumber(form.partitions), }; this.props.onChange(options); } diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index fd153e6c..c1c75c41 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -25,9 +25,13 @@ import { EncoderType, EncoderOptions, encoderMap, - PreprocessorState, } from '../../codecs/encoders'; +import { + PreprocessorState, + defaultPreprocessorState, +} from '../../codecs/preprocessors'; + import { decodeImage } from '../../codecs/decoders'; interface SourceImage { @@ -112,24 +116,14 @@ export default class App extends Component { loading: false, images: [ { - preprocessorState: { - quantizer: { - enabled: false, - ...quantizer.defaultOptions, - }, - }, + preprocessorState: defaultPreprocessorState, encoderState: { type: identity.type, options: identity.defaultOptions }, loadingCounter: 0, loadedCounter: 0, loading: false, }, { - preprocessorState: { - quantizer: { - enabled: false, - ...quantizer.defaultOptions, - }, - }, + preprocessorState: defaultPreprocessorState, encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions }, loadingCounter: 0, loadedCounter: 0, diff --git a/src/components/Options/index.tsx b/src/components/Options/index.tsx index 22a0f42f..348f9245 100644 --- a/src/components/Options/index.tsx +++ b/src/components/Options/index.tsx @@ -26,10 +26,11 @@ import { encoders, encodersSupported, EncoderSupportMap, - PreprocessorState, } from '../../codecs/encoders'; import { QuantizeOptions } from '../../codecs/imagequant/quantizer'; +import { PreprocessorState } from '../../codecs/preprocessors'; + const encoderOptionsComponentMap = { [identity.type]: undefined, [mozJPEG.type]: MozJpegEncoderOptions, diff --git a/src/lib/util.ts b/src/lib/util.ts index fe67df9e..ed79b243 100644 --- a/src/lib/util.ts +++ b/src/lib/util.ts @@ -145,3 +145,17 @@ export async function sniffMimeType(blob: Blob): Promise { export function createImageBitmapPolyfill(blob: Blob): Promise { return createImageBitmap(blob); } + +/** + * @param field An HTMLInputElement, but the casting is done here to tidy up onChange. + */ +export function inputFieldValueAsNumber(field: any): number { + return Number((field as HTMLInputElement).value); +} + +/** + * @param field An HTMLInputElement, but the casting is done here to tidy up onChange. + */ +export function inputFieldCheckedAsNumber(field: any): number { + return Number((field as HTMLInputElement).checked); +}