Rotate (#322)

* Basic rotate & flip

* Flipping resize when orientation changes

* Hack around critters issue.

* Removing generator. Huge perf boost.

* Stable positioning

* Creating input processors

* Allowing rotation to be changed

* Reverting old change

* Adding tooltips

* No more flip

* Removing need for wrapper element boxing

* Adding comment

* Addressing nits

* Bleh

src/codecs/input-processors.ts

@@ -0,0 +1,9 @@
+import { defaultOptions as rotateDefaultOptions } from './rotate/processor-meta';
+
+export interface InputProcessorState {
+  rotate: import('./rotate/processor-meta').RotateOptions;
+}
+
+export const defaultInputProcessorState: InputProcessorState = {
+  rotate: rotateDefaultOptions,
+};

src/codecs/processor-worker/index.ts

@@ -1,11 +1,7 @@
 import { expose } from 'comlink';
-import { EncodeOptions as MozJPEGEncoderOptions } from '../mozjpeg/encoder-meta';
-import { QuantizeOptions } from '../imagequant/processor-meta';
-import { EncodeOptions as OptiPNGEncoderOptions } from '../optipng/encoder-meta';
-import { EncodeOptions as WebPEncoderOptions } from '../webp/encoder-meta';
 
 async function mozjpegEncode(
-  data: ImageData, options: MozJPEGEncoderOptions,
+  data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
   const { encode } = await import(
     /* webpackChunkName: "process-mozjpeg-enc" */
@@ -14,7 +10,9 @@ async function mozjpegEncode(
   return encode(data, options);
 }
 
-async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
+async function quantize(
+  data: ImageData, opts: import('../imagequant/processor-meta').QuantizeOptions,
+): Promise<ImageData> {
   const { process } = await import(
     /* webpackChunkName: "process-imagequant" */
     '../imagequant/processor',
@@ -22,8 +20,19 @@ async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageDa
   return process(data, opts);
 }
 
+async function rotate(
+  data: ImageData, opts: import('../rotate/processor-meta').RotateOptions,
+): Promise<ImageData> {
+  const { rotate } = await import(
+    /* webpackChunkName: "process-rotate" */
+    '../rotate/processor',
+  );
+
+  return rotate(data, opts);
+}
+
 async function optiPngEncode(
-  data: BufferSource, options: OptiPNGEncoderOptions,
+  data: BufferSource, options: import('../optipng/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
   const { compress } = await import(
     /* webpackChunkName: "process-optipng" */
@@ -33,7 +42,7 @@ async function optiPngEncode(
 }
 
 async function webpEncode(
-  data: ImageData, options: WebPEncoderOptions,
+  data: ImageData, options: import('../webp/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
   const { encode } = await import(
     /* webpackChunkName: "process-webp-enc" */
@@ -50,7 +59,7 @@ async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
   return decode(data);
 }
 
-const exports = { mozjpegEncode, quantize, optiPngEncode, webpEncode, webpDecode };
+const exports = { mozjpegEncode, quantize, rotate, optiPngEncode, webpEncode, webpDecode };
 export type ProcessorWorkerApi = typeof exports;
 
 expose(exports, self);

src/codecs/processor.ts

@@ -118,12 +118,18 @@ export default class Processor {
   }
 
   // Off main thread jobs:
-
   @Processor._processingJob({ needsWorker: true })
   imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
     return this._workerApi!.quantize(data, opts);
   }
 
+  @Processor._processingJob({ needsWorker: true })
+  rotate(
+    data: ImageData, opts: import('./rotate/processor-meta').RotateOptions,
+  ): Promise<ImageData> {
+    return this._workerApi!.rotate(data, opts);
+  }
+
   @Processor._processingJob({ needsWorker: true })
   mozjpegEncode(
     data: ImageData, opts: MozJPEGEncoderOptions,

src/codecs/resize/options.tsx

@@ -135,7 +135,7 @@ export default class ResizerOptions extends Component<Props, State> {
                 onChange={this.onChange}
               >
                 <option value="stretch">Stretch</option>
-                <option value="cover">Cover</option>
+                <option value="contain">Contain</option>
               </Select>
             </label>
           }

src/codecs/resize/processor-meta.ts

@@ -4,7 +4,7 @@ export interface ResizeOptions {
   width: number;
   height: number;
   method: 'vector' | BitmapResizeMethods;
-  fitMethod: 'stretch' | 'cover';
+  fitMethod: 'stretch' | 'contain';
 }
 
 export interface BitmapResizeOptions extends ResizeOptions {

src/codecs/resize/processor.ts

@@ -1,7 +1,7 @@
 import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
 import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';
 
-function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
+function getContainOffsets(sw: number, sh: number, dw: number, dh: number) {
   const currentAspect = sw / sh;
   const endAspect = dw / dh;
 
@@ -22,8 +22,8 @@ export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
   let sw = data.width;
   let sh = data.height;
 
-  if (opts.fitMethod === 'cover') {
-    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'contain') {
+    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
   }
 
   return nativeResize(
@@ -38,8 +38,8 @@ export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions):
   let sw = data.width;
   let sh = data.height;
 
-  if (opts.fitMethod === 'cover') {
-    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'contain') {
+    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
   }
 
   return drawableToImageData(data, {

src/codecs/rotate/processor-meta.ts

@@ -0,0 +1,5 @@
+export interface RotateOptions {
+  rotate: 0 | 90 | 180 | 270;
+}
+
+export const defaultOptions: RotateOptions = { rotate: 0 };

src/codecs/rotate/processor.ts

@@ -0,0 +1,80 @@
+import { RotateOptions } from './processor-meta';
+
+const bpp = 4;
+
+export function rotate(data: ImageData, opts: RotateOptions): ImageData {
+  const { rotate } = opts;
+
+  // Early exit if there's no transform.
+  if (rotate === 0) return data;
+
+  const flipDimensions = rotate % 180 !== 0;
+  const { width: inputWidth, height: inputHeight } = data;
+  const outputWidth = flipDimensions ? inputHeight : inputWidth;
+  const outputHeight = flipDimensions ? inputWidth : inputHeight;
+  const out = new ImageData(outputWidth, outputHeight);
+  let i = 0;
+
+  // In the straight-copy case, d1 is x, d2 is y.
+  // x starts at 0 and increases.
+  // y starts at 0 and increases.
+  let d1Start = 0;
+  let d1Limit = inputWidth;
+  let d1Advance = 1;
+  let d1Multiplier = 1;
+  let d2Start = 0;
+  let d2Limit = inputHeight;
+  let d2Advance = 1;
+  let d2Multiplier = inputWidth;
+
+  if (rotate === 90) {
+    // d1 is y, d2 is x.
+    // y starts at its max value and decreases.
+    // x starts at 0 and increases.
+    d1Start = inputHeight - 1;
+    d1Limit = inputHeight;
+    d1Advance = -1;
+    d1Multiplier = inputWidth;
+    d2Start = 0;
+    d2Limit = inputWidth;
+    d2Advance = 1;
+    d2Multiplier = 1;
+  } else if (rotate === 180) {
+    // d1 is x, d2 is y.
+    // x starts at its max and decreases.
+    // y starts at its max and decreases.
+    d1Start = inputWidth - 1;
+    d1Limit = inputWidth;
+    d1Advance = -1;
+    d1Multiplier = 1;
+    d2Start = inputHeight - 1;
+    d2Limit = inputHeight;
+    d2Advance = -1;
+    d2Multiplier = inputWidth;
+  } else if (rotate === 270) {
+    // d1 is y, d2 is x.
+    // y starts at 0 and increases.
+    // x starts at its max and decreases.
+    d1Start = 0;
+    d1Limit = inputHeight;
+    d1Advance = 1;
+    d1Multiplier = inputWidth;
+    d2Start = inputWidth - 1;
+    d2Limit = inputWidth;
+    d2Advance = -1;
+    d2Multiplier = 1;
+  }
+
+  for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
+    for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
+      // Iterate over channels:
+      const start = ((d1 * d1Multiplier) + (d2 * d2Multiplier)) * bpp;
+      for (let j = 0; j < bpp; j += 1) {
+        out.data[i] = data.data[start + j];
+        i += 1;
+      }
+    }
+  }
+
+  return out;
+}