Options UI (#39)

* Initial work to add Options config

* Use a single encoder instance and retry up to 10 times on failure.

* Switch both sides to allow encoding from the source image, add options configuration for each.

* Styling for options (and a few tweaks for the app)

* Dep updates.

* Remove commented out code.

* Fix Encoder typing

* Fix lint issues

* Apparently I didnt have tslint autofix enabled on the chromebook

* Attempt to fix layout/panning issues

* Fix missing custom element import!

* Fix variable naming, remove dynamic encoder names, remove retry, allow encoders to return ImageData.

* Refactor state management to use an Array of objects and immutable updates instead of relying on explicit update notifications.

* Add Identity encoder, which is a passthrough encoder that handles the "original" view.

* Drop comlink-loader into the project and add ".worker" to the jpeg encoder filename so it runs in a worker (🦄)

* lint fixes.

* cleanup

* smaller PR feedback fixes

* rename "jpeg" codec to "MozJpeg"

* Formatting fixes for Options

* Colocate codecs and their options UIs in src/codecs, and standardize the namings

* Handle canvas errors

* Throw if quality is undefined, add default quality

* add note about temp styles

* add note about temp styles [2]

* Renaming updateOption

* Clarify option input bindings

* Move updateCanvas() to util and rename to drawBitmapToCanvas

* use generics to pass through encoder options

* Remove unused dependencies

* fix options type

* const

* Use `Array.prototype.some()` for image loading check

* Display encoding errors in the UI.

* I fought typescript and I think I won

* This doesn't need to be optional

* Quality isn't optional

* Simplifying comlink casting

* Splitting counters into loading and displaying

* Still loading if the loading counter isn't equal.

src/components/app/index.tsx

@@ -2,56 +2,200 @@ import { h, Component } from 'preact';
 import { bind, bitmapToImageData } from '../../lib/util';
 import * as style from './style.scss';
 import Output from '../output';
+import Options from '../options';
 
-import {MozJpegEncoder} from '../../lib/codec-wrappers/mozjpeg-enc';
+import * as mozJPEG from '../../codecs/mozjpeg/encoder';
+import * as identity from '../../codecs/identity/encoder';
+import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
 
-type Props = {};
+interface SourceImage {
+  file: File;
+  bmp: ImageBitmap;
+  data: ImageData;
+}
 
-type State = {
-  img?: ImageBitmap
-};
+interface EncodedImage {
+  encoderState: EncoderState;
+  bmp?: ImageBitmap;
+  loading: boolean;
+  /** Counter of the latest bmp currently encoding */
+  loadingCounter: number;
+  /** Counter of the latest bmp encoded */
+  loadedCounter: number;
+}
+
+interface Props {}
+
+interface State {
+  source?: SourceImage;
+  images: [EncodedImage, EncodedImage];
+  loading: boolean;
+  error?: string;
+}
 
 export default class App extends Component<Props, State> {
-  state: State = {};
+  state: State = {
+    loading: false,
+    images: [
+      {
+        encoderState: { type: identity.type, options: identity.defaultOptions },
+        loadingCounter: 0,
+        loadedCounter: 0,
+        loading: false
+      },
+      {
+        encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
+        loadingCounter: 0,
+        loadedCounter: 0,
+        loading: false
+      }
+    ]
+  };
 
   constructor() {
     super();
     // In development, persist application state across hot reloads:
     if (process.env.NODE_ENV === 'development') {
       this.setState(window.STATE);
-      this.componentDidUpdate = () => {
+      const oldCDU = this.componentDidUpdate;
+      this.componentDidUpdate = (props, state) => {
+        if (oldCDU) oldCDU.call(this, props, state);
         window.STATE = this.state;
       };
     }
   }
 
-  @bind
-  async onFileChange(event: Event) {
-    const fileInput = event.target as HTMLInputElement;
-    if (!fileInput.files || !fileInput.files[0]) return;
-    // TODO: handle decode error
-    const bitmap = await createImageBitmap(fileInput.files[0]);
-    const data = await bitmapToImageData(bitmap);
-    const encoder = new MozJpegEncoder();
-    const compressedData = await encoder.encode(data);
-    const blob = new Blob([compressedData], {type: 'image/jpeg'});
-    const compressedImage = await createImageBitmap(blob);
-    this.setState({ img: compressedImage });
+  onEncoderChange(index: 0 | 1, type: EncoderType, options?: EncoderOptions): void {
+    const images = this.state.images.slice() as [EncodedImage, EncodedImage];
+    const image = images[index];
+
+    // Some type cheating here.
+    // encoderMap[type].defaultOptions is always safe.
+    // options should always be correct for the type, but TypeScript isn't smart enough.
+    const encoderState: EncoderState = {
+      type,
+      options: options ? options : encoderMap[type].defaultOptions
+    } as EncoderState;
+
+    images[index] = {
+      ...image,
+      encoderState,
+    };
+
+    this.setState({ images });
   }
 
-  render({ }: Props, { img }: State) {
+  onOptionsChange(index: 0 | 1, options: EncoderOptions): void {
+    this.onEncoderChange(index, this.state.images[index].encoderState.type, options);
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State): void {
+    const { source, images } = this.state;
+
+    for (const [i, image] of images.entries()) {
+      if (source !== prevState.source || image !== prevState.images[i]) {
+        this.updateImage(i);
+      }
+    }
+  }
+
+  @bind
+  async onFileChange(event: Event): Promise<void> {
+    const fileInput = event.target as HTMLInputElement;
+    const file = fileInput.files && fileInput.files[0];
+    if (!file) return;
+    this.setState({ loading: true });
+    try {
+      const bmp = await createImageBitmap(file);
+      // compute the corresponding ImageData once since it only changes when the file changes:
+      const data = await bitmapToImageData(bmp);
+      this.setState({
+        source: { data, bmp, file },
+        error: undefined,
+        loading: false
+      });
+    } catch (err) {
+      this.setState({ error: 'IMAGE_INVALID', loading: false });
+    }
+  }
+
+  async updateImage(index: number): Promise<void> {
+    const { source, images } = this.state;
+    if (!source) return;
+    let image = images[index];
+
+    // Each time we trigger an async encode, the ID changes.
+    image.loadingCounter = image.loadingCounter + 1;
+    const loadingCounter = image.loadingCounter;
+
+    image.loading = true;
+    this.setState({ });
+
+    const result = await this.updateCompressedImage(source, image.encoderState);
+
+    image = this.state.images[index];
+    // If a later encode has landed before this one, return.
+    if (loadingCounter < image.loadedCounter) return;
+    image.bmp = result;
+    image.loading = image.loadingCounter !== loadingCounter;
+    image.loadedCounter = loadingCounter;
+    this.setState({ });
+  }
+
+  async updateCompressedImage(source: SourceImage, encodeData: EncoderState): Promise<ImageBitmap> {
+    // Special case for identity
+    if (encodeData.type === identity.type) return source.bmp;
+
+    try {
+      const compressedData = await (() => {
+        switch (encodeData.type) {
+          case mozJPEG.type: return mozJPEG.encode(source.data, encodeData.options);
+          default: throw Error(`Unexpected encoder name`);
+        }
+      })();
+
+      const blob = new Blob([compressedData], {
+        type: encoderMap[encodeData.type].mimeType
+      });
+
+      const bitmap = await createImageBitmap(blob);
+      this.setState({ error: '' });
+      return bitmap;
+    } catch (err) {
+      this.setState({ error: `Encoding error (type=${encodeData.type}): ${err}` });
+      throw err;
+    }
+  }
+
+  render({ }: Props, { loading, error, images, source }: State) {
+    const [leftImageBmp, rightImageBmp] = images.map(i => i.bmp);
+
+    loading = loading || images.some(image => image.loading);
+
     return (
       <div id="app" class={style.app}>
-        {img ?
-          <Output img={img} />
-          :
-          <div>
+        {(leftImageBmp && rightImageBmp) ? (
+          <Output leftImg={leftImageBmp} rightImg={rightImageBmp} />
+        ) : (
+          <div class={style.welcome}>
             <h1>Select an image</h1>
             <input type="file" onChange={this.onFileChange} />
           </div>
-        }
+        )}
+        {images.map((image, index) => (
+          <span class={index ? style.rightLabel : style.leftLabel}>{encoderMap[image.encoderState.type].label}</span>
+        ))}
+        {images.map((image, index) => (
+          <Options
+            class={index ? style.rightOptions : style.leftOptions}
+            encoderState={image.encoderState}
+            onTypeChange={this.onEncoderChange.bind(this, index)}
+            onOptionsChange={this.onOptionsChange.bind(this, index)}
+          />
+        ))}
+        {loading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}
+        {error && <span style={{ position: 'fixed', top: 0, left: 0 }}>Error: {error}</span>}
       </div>
     );
   }
 }
-

src/components/app/style.scss

@@ -1,3 +1,62 @@
-.app h1 {
-  color: green;
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
+.app {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+
+  .leftLabel,
+  .rightLabel {
+    position: fixed;
+    bottom: 0;
+    padding: 5px 10px;
+    background: rgba(0,0,0,0.5);
+    color: #fff;
+  }
+
+  .leftLabel { left: 0; }
+  .rightLabel { right: 0; }
+
+  .leftOptions,
+  .rightOptions {
+    position: fixed;
+    bottom: 40px;
+  }
+
+  .leftOptions { left: 10px; }
+  .rightOptions { right: 10px; }
+}
+
+.welcome {
+  position: absolute;
+  display: inline-block;
+  left: 50%;
+  top: 50%;
+  padding: 20px;
+  transform: translate(-50%, -50%);
+
+  h1 {
+    font-weight: inherit;
+    font-size: 150%;
+    text-align: center;
+  }
+
+  input {
+    display: inline-block;
+    width: 16em;
+    padding: 5px;
+    margin: 0 auto;
+    -webkit-appearance: none;
+    border: 1px solid #b68c86;
+    background: #f0d3cf;
+    box-shadow: inset 0 0 1px #fff;
+    border-radius: 3px;
+    cursor: pointer;
+  }
 }

src/components/options/index.tsx

@@ -0,0 +1,63 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import { bind } from '../../lib/util';
+import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
+
+import { type as mozJPEGType } from '../../codecs/mozjpeg/encoder';
+import { type as identityType } from '../../codecs/identity/encoder';
+import { EncoderState, EncoderType, EncoderOptions, encoders } from '../../codecs/encoders';
+
+const encoderOptionsComponentMap = {
+  [mozJPEGType]: MozJpegEncoderOptions,
+  [identityType]: undefined
+};
+
+interface Props {
+  class?: string;
+  encoderState: EncoderState;
+  onTypeChange(newType: EncoderType): void;
+  onOptionsChange(newOptions: EncoderOptions): void;
+}
+
+interface State {}
+
+export default class Options extends Component<Props, State> {
+  typeSelect?: HTMLSelectElement;
+
+  @bind
+  onTypeChange(event: Event) {
+    const el = event.currentTarget as HTMLSelectElement;
+
+    // The select element only has values matching encoder types,
+    // so 'as' is safe here.
+    const type = el.value as EncoderType;
+    this.props.onTypeChange(type);
+  }
+
+  render({ class: className, encoderState, onOptionsChange }: Props) {
+    const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
+
+    return (
+      <div class={`${style.options}${className ? (' ' + className) : ''}`}>
+        <label>
+          Mode:
+          <select value={encoderState.type} onChange={this.onTypeChange}>
+            {encoders.map(encoder => (
+              <option value={encoder.type}>{encoder.label}</option>
+            ))}
+          </select>
+        </label>
+        {EncoderOptionComponent &&
+          <EncoderOptionComponent
+            options={
+              // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures the correct type,
+              // but typescript isn't smart enough.
+              encoderState.options as typeof EncoderOptionComponent['prototype']['props']['options']
+            }
+            onChange={onOptionsChange}
+          />
+        }
+      </div>
+    );
+  }
+}

src/components/options/style.scss

@@ -0,0 +1,38 @@
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
+.options {
+    width: 180px;
+    padding: 10px;
+    background: rgba(50,50,50,0.8);
+    border: 1px solid #222;
+    box-shadow: inset 0 0 1px #fff, 0 0 1px #fff;
+    border-radius: 3px;
+    color: #eee;
+    overflow: auto;
+    z-index: 1;
+    transition: opacity 300ms ease;
+
+    &:not(:hover) {
+        opacity: .6;
+    }
+
+    label {
+        display: block;
+        padding: 5px;
+        font-weight: bold;
+
+        select {
+            margin-left: 5px;
+        }
+
+        input {
+            vertical-align: middle;
+        }
+    }
+
+    pre {
+        font-size: 10px;
+    }
+}

src/components/output/custom-els/PinchZoom/index.ts

@@ -62,7 +62,7 @@ export default class PinchZoom extends HTMLElement {
   // Current transform.
   private _transform: SVGMatrix = createMatrix();
 
-  constructor () {
+  constructor() {
     super();
 
     // Watch for children changes.
@@ -87,26 +87,26 @@ export default class PinchZoom extends HTMLElement {
     this.addEventListener('wheel', event => this._onWheel(event));
   }
 
-  connectedCallback () {
+  connectedCallback() {
     this._stageElChange();
   }
 
-  get x () {
+  get x() {
     return this._transform.e;
   }
 
-  get y () {
+  get y() {
     return this._transform.f;
   }
 
-  get scale () {
+  get scale() {
     return this._transform.a;
   }
 
   /**
    * Update the stage with a given scale/x/y.
    */
-  setTransform (opts: SetTransformOpts = {}) {
+  setTransform(opts: SetTransformOpts = {}) {
     const {
       scale = this.scale,
       allowChangeEvent = false,
@@ -174,7 +174,7 @@ export default class PinchZoom extends HTMLElement {
   /**
    * Update transform values without checking bounds. This is only called in setTransform.
    */
-  _updateTransform (scale: number, x: number, y: number, allowChangeEvent: boolean) {
+  _updateTransform(scale: number, x: number, y: number, allowChangeEvent: boolean) {
     // Return if there's no change
     if (
       scale === this.scale &&
@@ -202,7 +202,7 @@ export default class PinchZoom extends HTMLElement {
    * require a single element to be the child of <pinch-zoom>, and
    * that's the element we pan/scale.
    */
-  private _stageElChange () {
+  private _stageElChange() {
     this._positioningEl = undefined;
 
     if (this.children.length === 0) {
@@ -220,7 +220,7 @@ export default class PinchZoom extends HTMLElement {
     this.setTransform();
   }
 
-  private _onWheel (event: WheelEvent) {
+  private _onWheel(event: WheelEvent) {
     event.preventDefault();
 
     const thisRect = this.getBoundingClientRect();
@@ -243,7 +243,7 @@ export default class PinchZoom extends HTMLElement {
     });
   }
 
-  private _onPointerMove (previousPointers: Pointer[], currentPointers: Pointer[]) {
+  private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) {
     // Combine next points with previous points
     const thisRect = this.getBoundingClientRect();
 
@@ -268,7 +268,7 @@ export default class PinchZoom extends HTMLElement {
   }
 
   /** Transform the view & fire a change event */
-  private _applyChange (opts: ApplyChangeOpts = {}) {
+  private _applyChange(opts: ApplyChangeOpts = {}) {
     const {
       panX = 0, panY = 0,
       originX = 0, originY = 0,

src/components/output/index.tsx

@@ -3,16 +3,17 @@ import PinchZoom from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.scss';
-import { bind } from '../../lib/util';
+import { bind, drawBitmapToCanvas } from '../../lib/util';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 
 type Props = {
-  img: ImageBitmap
+  leftImg: ImageBitmap,
+  rightImg: ImageBitmap
 };
 
 type State = {};
 
-export default class App extends Component<Props, State> {
+export default class Output extends Component<Props, State> {
   state: State = {};
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
@@ -20,26 +21,22 @@ export default class App extends Component<Props, State> {
   pinchZoomRight?: PinchZoom;
   retargetedEvents = new WeakSet<Event>();
 
-  updateCanvases(img: ImageBitmap) {
-    for (const [i, canvas] of [this.canvasLeft, this.canvasRight].entries()) {
-      if (!canvas) throw Error('Missing canvas');
-      const ctx = canvas.getContext('2d');
-      if (!ctx) throw Error('Expected 2d canvas context');
-      if (i === 1) {
-        // This is temporary, to show the images are different
-        ctx.filter = 'hue-rotate(180deg)';
-      }
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
+  componentDidMount() {
+    if (this.canvasLeft) {
+      drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
+    }
+    if (this.canvasRight) {
+      drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
     }
   }
 
-  componentDidMount() {
-    this.updateCanvases(this.props.img);
-  }
-
-  componentDidUpdate({ img }: Props) {
-    if (img !== this.props.img) this.updateCanvases(this.props.img);
+  componentWillReceiveProps({ leftImg, rightImg }: Props) {
+    if (leftImg !== this.props.leftImg && this.canvasLeft) {
+      drawBitmapToCanvas(this.canvasLeft, leftImg);
+    }
+    if (rightImg !== this.props.rightImg && this.canvasRight) {
+      drawBitmapToCanvas(this.canvasRight, rightImg);
+    }
   }
 
   @bind
@@ -78,9 +75,9 @@ export default class App extends Component<Props, State> {
     this.pinchZoomLeft.dispatchEvent(clonedEvent);
   }
 
-  render({ img }: Props, { }: State) {
+  render({ leftImg, rightImg }: Props, { }: State) {
     return (
-      <div>
+      <div class={style.output}>
         <two-up
           // Event redirecting. See onRetargetableEvent.
           onTouchStartCapture={this.onRetargetableEvent}
@@ -91,13 +88,12 @@ export default class App extends Component<Props, State> {
           onWheelCapture={this.onRetargetableEvent}
         >
           <pinch-zoom onChange={this.onPinchZoomLeftChange} ref={p => this.pinchZoomLeft = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={img.width} height={img.height} />
+            <canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={leftImg.width} height={leftImg.height} />
           </pinch-zoom>
           <pinch-zoom ref={p => this.pinchZoomRight = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={img.width} height={img.height} />
+            <canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={rightImg.width} height={rightImg.height} />
           </pinch-zoom>
         </two-up>
-        <p>And that's all the app does so far!</p>
       </div>
     );
   }

src/components/output/style.scss

@@ -1,3 +1,29 @@
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
+%fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+}
+
+.output {
+  @extend %fill;
+
+  > two-up {
+    @extend %fill;
+
+    > pinch-zoom {
+      @extend %fill;
+    }
+  }
+}
+
 .outputCanvas {
   image-rendering: pixelated;
 }