a couple more fixes from CR

Flyouts

cli/src/index.js

@@ -75,7 +75,9 @@ async function getInputFiles(paths) {
 
   for (const inputPath of paths) {
     const files = (await fsp.lstat(inputPath)).isDirectory()
-      ? (await fsp.readdir(inputPath, {withFileTypes: true})).filter(dirent => dirent.isFile()).map(dirent => path.join(inputPath, dirent.name))
+      ? (await fsp.readdir(inputPath, { withFileTypes: true }))
+          .filter((dirent) => dirent.isFile())
+          .map((dirent) => path.join(inputPath, dirent.name))
       : [inputPath];
     for (const file of files) {
       try {

lib/entry-data-plugin.js

@@ -77,7 +77,9 @@ export default function entryDataPlugin() {
             }
 
             return JSON.stringify(
-              getDependencies(chunks, chunk).map((filename) => fileNameToURL(filename)),
+              getDependencies(chunks, chunk).map((filename) =>
+                fileNameToURL(filename),
+              ),
             );
           },
         );

package-lock.json

@@ -6203,9 +6203,9 @@
       "dev": true
     },
     "preact": {
-      "version": "10.5.5",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.5.tgz",
-      "integrity": "sha512-5ONLNH1SXMzzbQoExZX4TELemNt+TEDb622xXFNfZngjjM9qtrzseJt+EfiUu4TZ6EJ95X5sE1ES4yqHFSIdhg==",
+      "version": "10.5.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.7.tgz",
+      "integrity": "sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==",
       "dev": true
     },
     "preact-render-to-string": {

package.json

@@ -38,7 +38,7 @@
     "postcss-nested": "^4.2.3",
     "postcss-simple-vars": "^5.0.2",
     "postcss-url": "^8.0.0",
-    "preact": "^10.5.5",
+    "preact": "^10.5.7",
     "preact-render-to-string": "^5.1.11",
     "prettier": "^2.1.2",
     "rollup": "^2.38.0",

src/client/lazy-app/Compress/CanvasImage.tsx

@@ -0,0 +1,37 @@
+import { h, Component, createRef } from 'preact';
+import { drawDataToCanvas } from '../util/canvas';
+
+export interface CanvasImageProps
+  extends h.JSX.HTMLAttributes<HTMLCanvasElement> {
+  image?: ImageData;
+}
+
+export default class CanvasImage extends Component<CanvasImageProps> {
+  canvas = createRef<HTMLCanvasElement>();
+  componentDidUpdate(prevProps: CanvasImageProps) {
+    if (this.props.image !== prevProps.image) {
+      this.draw(this.props.image);
+    }
+  }
+  componentDidMount() {
+    if (this.props.image) {
+      this.draw(this.props.image);
+    }
+  }
+  draw(image?: ImageData) {
+    const canvas = this.canvas.current;
+    if (!canvas) return;
+    if (!image) canvas.getContext('2d');
+    else drawDataToCanvas(canvas, image);
+  }
+  render({ image, ...props }: CanvasImageProps) {
+    return (
+      <canvas
+        ref={this.canvas}
+        width={image?.width}
+        height={image?.height}
+        {...props}
+      />
+    );
+  }
+}

src/client/lazy-app/Compress/ClickOutsideDetector.tsx

@@ -0,0 +1,54 @@
+import {
+  Component,
+  cloneElement,
+  createRef,
+  toChildArray,
+  ComponentChildren,
+  RefObject,
+} from 'preact';
+
+interface Props {
+  children: ComponentChildren;
+  onClick?(e: MouseEvent | KeyboardEvent): void;
+}
+
+export class ClickOutsideDetector extends Component<Props> {
+  private _roots: RefObject<Element>[] = [];
+
+  private handleClick = (e: MouseEvent) => {
+    let target = e.target as Node;
+    // check if the click came from within any of our child elements:
+    for (const { current: root } of this._roots) {
+      if (root && (root === target || root.contains(target))) return;
+    }
+    const { onClick } = this.props;
+    if (onClick) onClick(e);
+  };
+
+  private handleKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      const { onClick } = this.props;
+      if (onClick) onClick(e);
+    }
+  };
+
+  componentDidMount() {
+    addEventListener('click', this.handleClick, { passive: true });
+    addEventListener('keydown', this.handleKey, { passive: true });
+  }
+
+  componentWillUnmount() {
+    removeEventListener('click', this.handleClick);
+    removeEventListener('keydown', this.handleKey);
+  }
+
+  render({ children }: Props) {
+    this._roots = [];
+    return toChildArray(children).map((child) => {
+      if (typeof child !== 'object') return child;
+      const ref = createRef();
+      this._roots.push(ref);
+      return cloneElement(child, { ref });
+    });
+  }
+}

src/client/lazy-app/Compress/Flyout/index.tsx

@@ -0,0 +1,210 @@
+import {
+  h,
+  cloneElement,
+  Component,
+  VNode,
+  createRef,
+  ComponentChildren,
+  ComponentProps,
+  Fragment,
+  render,
+} from 'preact';
+import * as style from './style.css';
+import 'add-css:./style.css';
+
+type Anchor = 'left' | 'right' | 'top' | 'bottom';
+type Direction = 'left' | 'right' | 'up' | 'down';
+
+const has = (haystack: string | string[] | undefined, needle: string) =>
+  Array.isArray(haystack) ? haystack.includes(needle) : haystack === needle;
+
+interface Props extends Omit<ComponentProps<'aside'>, 'ref'> {
+  showing?: boolean;
+  direction?: Direction | Direction[];
+  anchor?: Anchor;
+  toggle?: VNode;
+  children?: ComponentChildren;
+}
+
+interface State {
+  showing: boolean;
+  hasShown: boolean;
+}
+
+export default class Flyout extends Component<Props, State> {
+  state = {
+    showing: this.props.showing === true,
+    hasShown: this.props.showing === true,
+  };
+
+  private wrap = createRef<HTMLElement>();
+
+  private menu = createRef<HTMLElement>();
+
+  private resizeObserver?: ResizeObserver;
+
+  private shown?: number;
+
+  private dismiss = (event: Event) => {
+    if (this.menu.current && this.menu.current.contains(event.target as Node))
+      return;
+    // prevent toggle buttons from immediately dismissing:
+    if (this.shown && Date.now() - this.shown < 10) return;
+    this.setShowing(false);
+  };
+
+  hide = () => {
+    this.setShowing(false);
+  };
+
+  show = () => {
+    this.setShowing(true);
+  };
+
+  toggle = () => {
+    this.setShowing(!this.state.showing);
+  };
+
+  private setShowing = (showing?: boolean) => {
+    this.shown = Date.now();
+    if (showing) this.setState({ showing: true, hasShown: true });
+    else this.setState({ showing: false });
+  };
+
+  private reposition = () => {
+    const menu = this.menu.current;
+    const wrap = this.wrap.current;
+    if (!menu || !wrap || !this.state.showing) return;
+    const bbox = wrap.getBoundingClientRect();
+
+    const { direction = 'down', anchor = 'right' } = this.props;
+    const { innerWidth, innerHeight } = window;
+
+    const anchorX = has(anchor, 'left') ? bbox.left : bbox.right;
+
+    menu.style.left = menu.style.right = menu.style.top = menu.style.bottom =
+      '';
+
+    if (has(direction, 'left')) {
+      menu.style.right = innerWidth - anchorX + 'px';
+    } else {
+      menu.style.left = anchorX + 'px';
+    }
+    if (has(direction, 'up')) {
+      const anchorY = has(anchor, 'bottom') ? bbox.bottom : bbox.top;
+      menu.style.bottom = innerHeight - anchorY + 'px';
+    } else {
+      const anchorY = has(anchor, 'top') ? bbox.top : bbox.bottom;
+      menu.style.top = anchorY + 'px';
+    }
+  };
+
+  componentWillReceiveProps({ showing }: Props) {
+    if (showing !== this.props.showing) {
+      this.setShowing(showing);
+    }
+  }
+
+  componentDidMount() {
+    addEventListener('click', this.dismiss, { passive: true });
+    addEventListener('resize', this.reposition, { passive: true });
+    if (typeof ResizeObserver === 'function' && this.wrap.current) {
+      this.resizeObserver = new ResizeObserver(this.reposition);
+      this.resizeObserver.observe(this.wrap.current);
+    }
+    if (this.props.showing) this.setShowing(true);
+  }
+
+  componentWillUnmount() {
+    removeEventListener('click', this.dismiss);
+    removeEventListener('resize', this.reposition);
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (this.state.showing && !prevState.showing) {
+      const menu = this.menu.current;
+      if (menu) {
+        this.reposition();
+
+        let toFocus = menu.firstElementChild;
+        for (let child of menu.children) {
+          if (child.hasAttribute('autofocus')) {
+            toFocus = child;
+            break;
+          }
+        }
+        // @ts-ignore-next
+        if (toFocus) toFocus.focus();
+      }
+    }
+  }
+
+  render(
+    { direction, anchor, toggle, children, ...props }: Props,
+    { showing }: State,
+  ) {
+    const toggleProps = {
+      flyoutOpen: showing,
+      onClick: this.toggle,
+    };
+
+    const directionText = Array.isArray(direction)
+      ? direction.join(' ')
+      : direction;
+    const anchorText = Array.isArray(anchor) ? anchor.join(' ') : anchor;
+
+    return (
+      <span
+        class={style.wrap}
+        ref={this.wrap}
+        data-flyout-open={showing ? '' : undefined}
+      >
+        {toggle && cloneElement(toggle, toggleProps)}
+
+        {showing &&
+          createPortal(
+            <aside
+              {...props}
+              class={`${style.flyout} ${props.class || props.className || ''}`}
+              ref={this.menu}
+              data-anchor={anchorText}
+              data-direction={directionText}
+            >
+              {children}
+            </aside>,
+            document.body,
+          )}
+      </span>
+    );
+  }
+}
+
+// not worth pulling in compat
+function createPortal(children: ComponentChildren, parent: Element) {
+  return <Portal parent={parent}>{children}</Portal>;
+}
+// this is probably overly careful, since it works directly rendering into parent
+function createPersistentFragment(parent: Element) {
+  const frag = {
+    nodeType: 11,
+    childNodes: [],
+    appendChild: parent.appendChild.bind(parent),
+    insertBefore: parent.insertBefore.bind(parent),
+    removeChild: parent.removeChild.bind(parent),
+  };
+  return (frag as unknown) as Element;
+}
+class Portal extends Component<{
+  children: ComponentChildren;
+  parent: Element;
+}> {
+  root = createPersistentFragment(this.props.parent);
+  componentWillUnmount() {
+    render(null, this.root);
+  }
+  render() {
+    render(<Fragment>{this.props.children}</Fragment>, this.root);
+    return null;
+  }
+}

src/client/lazy-app/Compress/Flyout/style.css

@@ -0,0 +1,41 @@
+.wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}
+
+.flyout {
+  display: inline-block;
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: visible;
+  outline: none;
+  will-change: transform, opacity;
+  animation: menuOpen 350ms ease forwards 1;
+  --flyout-offset-y: -20px;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &[data-direction*='left'] {
+    align-items: flex-end;
+  }
+
+  &[data-direction*='up'] {
+    --flyout-offset-y: 20px;
+    flex-direction: column-reverse;
+  }
+}
+
+@keyframes menuOpen {
+  0% {
+    transform: translateY(var(--flyout-offset-y, 0));
+    opacity: 0;
+  }
+}

src/client/lazy-app/Compress/Options/index.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 import * as style from './style.css';
 import 'add-css:./style.css';
@@ -15,9 +15,10 @@ import {
 import Expander from './Expander';
 import Toggle from './Toggle';
 import Select from './Select';
+import Flyout from '../Flyout';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-import { CLIIcon, SwapIcon } from 'client/lazy-app/icons';
+import { CLIIcon, MoreIcon, SwapIcon } from 'client/lazy-app/icons';
 
 interface Props {
   index: 0 | 1;
@@ -64,6 +65,8 @@ export default class Options extends Component<Props, State> {
     supportedEncoderMap: undefined,
   };
 
+  menu = createRef<Flyout>();
+
   constructor() {
     super();
     supportedEncoderMapP.then((supportedEncoderMap) =>
@@ -110,10 +113,12 @@ export default class Options extends Component<Props, State> {
 
   private onCopyCliClick = () => {
     this.props.onCopyCliClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   private onCopyToOtherSideClick = () => {
     this.props.onCopyToOtherSideClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   render(
@@ -136,23 +141,33 @@ export default class Options extends Component<Props, State> {
           {!encoderState ? null : (
             <div>
               <h3 class={style.optionsTitle}>
-                <div class={style.titleAndButtons}>
-                  Edit
+                Edit
+                <Flyout
+                  ref={this.menu}
+                  class={style.menu}
+                  direction={['up', 'left']}
+                  anchor="right"
+                  toggle={
+                    <button class={style.titleButton}>
+                      <MoreIcon />
+                    </button>
+                  }
+                >
                   <button
-                    class={style.cliButton}
-                    title="Copy npx command"
+                    class={style.menuButton}
                     onClick={this.onCopyCliClick}
                   >
                     <CLIIcon />
+                    Copy npx command
                   </button>
                   <button
-                    class={style.copyOverButton}
-                    title="Copy settings to other side"
+                    class={style.menuButton}
                     onClick={this.onCopyToOtherSideClick}
                   >
                     <SwapIcon />
+                    Copy settings to other side
                   </button>
-                </div>
+                </Flyout>
               </h3>
               <label class={style.sectionEnabler}>
                 Resize

src/client/lazy-app/Compress/Options/style.css

@@ -14,13 +14,21 @@
   background-color: var(--main-theme-color);
   color: var(--header-text-color);
   margin: 0;
-  padding: 10px var(--horizontal-padding);
+  height: 38px;
+  padding: 0 var(--horizontal-padding);
   font-weight: bold;
   font-size: 1.4rem;
   border-bottom: 1px solid var(--off-black);
   transition: all 300ms ease-in-out;
   transition-property: background-color, color;
 
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  gap: 0.8rem 0;
+
   position: sticky;
   top: 0;
   z-index: 1;
@@ -82,36 +90,63 @@
   border-radius: 4px;
 }
 
-.title-and-buttons {
-  grid-template-columns: 1fr;
-  grid-auto-columns: max-content;
-  grid-auto-flow: column;
-  display: grid;
-  gap: 0.8rem;
+.menu {
+  transform: translateY(-10px);
 }
 
 .title-button {
+  position: relative;
+  left: 10px;
   composes: unbutton from global;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0);
+
+  &:hover,
+  &:active {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
   svg {
-    --size: 20px;
+    --size: 24px;
+    fill: var(--header-text-color);
     display: block;
     width: var(--size);
     height: var(--size);
+    padding: 5px;
   }
 }
 
-.cli-button {
-  composes: title-button;
+.menu-button {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 8px 0;
+  background-color: rgba(29, 29, 29, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.67);
+  border-radius: 2rem;
+  line-height: 1.1;
+  white-space: nowrap;
+  height: 39px;
+  padding: 0 16px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: #fff;
 
-  svg {
-    stroke: var(--header-text-color);
-  }
-}
-
-.copy-over-button {
-  composes: title-button;
-
-  svg {
-    fill: var(--header-text-color);
+  &:hover {
+    background: rgba(50, 50, 50, 0.92);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px #fff;
+    outline: none;
+    z-index: 1;
+  }
+
+  & > svg {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+    color: var(--main-theme-color);
   }
 }

src/client/lazy-app/Compress/Output/index.tsx

@@ -1,4 +1,4 @@
-import { h, Component, Fragment } from 'preact';
+import { h, createRef, Component, Fragment } from 'preact';
 import type PinchZoom from './custom-els/PinchZoom';
 import type { ScaleToOpts } from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
@@ -10,31 +10,38 @@ import {
   ToggleBackgroundIcon,
   AddIcon,
   RemoveIcon,
-  ToggleBackgroundActiveIcon,
   RotateIcon,
+  MoreIcon,
 } from '../../icons';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 import type { PreprocessorState } from '../../feature-meta';
 import { cleanSet } from '../../util/clean-modify';
 import type { SourceImage } from '../../Compress';
 import { linkRef } from 'shared/prerendered-app/util';
+import Flyout from '../Flyout';
 import { drawDataToCanvas } from 'client/lazy-app/util/canvas';
 
 interface Props {
   source?: SourceImage;
   preprocessorState?: PreprocessorState;
+  hidden?: boolean;
   mobileView: boolean;
   leftCompressed?: ImageData;
   rightCompressed?: ImageData;
   leftImgContain: boolean;
   rightImgContain: boolean;
-  onPreprocessorChange: (newState: PreprocessorState) => void;
+  onPreprocessorChange?: (newState: PreprocessorState) => void;
+  onShowPreprocessorTransforms?: () => void;
+  onToggleBackground?: () => void;
 }
 
 interface State {
   scale: number;
   editingScale: boolean;
   altBackground: boolean;
+  transform: boolean;
+  menuOpen: boolean;
+  smallControls: boolean;
 }
 
 const scaleToOpts: ScaleToOpts = {
@@ -49,12 +56,18 @@ export default class Output extends Component<Props, State> {
     scale: 1,
     editingScale: false,
     altBackground: false,
+    transform: false,
+    menuOpen: false,
+    smallControls:
+      typeof matchMedia === 'function' &&
+      matchMedia('(max-width: 859px)').matches,
   };
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
   pinchZoomLeft?: PinchZoom;
   pinchZoomRight?: PinchZoom;
   scaleInput?: HTMLInputElement;
+  flyout = createRef<Flyout>();
   retargetedEvents = new WeakSet<Event>();
 
   componentDidMount() {
@@ -76,6 +89,12 @@ export default class Output extends Component<Props, State> {
     if (this.canvasRight && rightDraw) {
       drawDataToCanvas(this.canvasRight, rightDraw);
     }
+
+    if (typeof matchMedia === 'function') {
+      matchMedia('(max-width: 859px)').addEventListener('change', (e) =>
+        this.setState({ smallControls: e.matches }),
+      );
+    }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -145,12 +164,6 @@ export default class Output extends Component<Props, State> {
     return props.rightCompressed || (props.source && props.source.preprocessed);
   }
 
-  private toggleBackground = () => {
-    this.setState({
-      altBackground: !this.state.altBackground,
-    });
-  };
-
   private zoomIn = () => {
     if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
     this.pinchZoomLeft.scaleTo(this.state.scale * 1.25, scaleToOpts);
@@ -161,17 +174,30 @@ export default class Output extends Component<Props, State> {
     this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
   };
 
-  private onRotateClick = () => {
-    const { preprocessorState: inputProcessorState } = this.props;
-    if (!inputProcessorState) return;
-
-    const newState = cleanSet(
-      inputProcessorState,
-      'rotate.rotate',
-      (inputProcessorState.rotate.rotate + 90) % 360,
+  private fitToViewport = () => {
+    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
+    const img = this.props.source?.preprocessed;
+    if (!img) return;
+    const scale = Number(
+      Math.min(
+        (window.innerWidth - 20) / img.width,
+        (window.innerHeight - 20) / img.height,
+      ).toFixed(2),
     );
+    this.pinchZoomLeft.scaleTo(Number(scale.toFixed(2)), scaleToOpts);
+    this.recenter();
+    // this.hideMenu();
+  };
 
-    this.props.onPreprocessorChange(newState);
+  private recenter = () => {
+    const img = this.props.source?.preprocessed;
+    if (!img || !this.pinchZoomLeft) return;
+    let scale = this.pinchZoomLeft.scale;
+    this.pinchZoomLeft.setTransform({
+      x: (img.width - img.width * scale) / 2,
+      y: (img.height - img.height * scale) / 2,
+      allowChangeEvent: true,
+    });
   };
 
   private onScaleValueFocus = () => {
@@ -254,8 +280,16 @@ export default class Output extends Component<Props, State> {
   };
 
   render(
-    { mobileView, leftImgContain, rightImgContain, source }: Props,
-    { scale, editingScale, altBackground }: State,
+    {
+      source,
+      mobileView,
+      hidden,
+      leftImgContain,
+      rightImgContain,
+      onShowPreprocessorTransforms,
+      onToggleBackground,
+    }: Props,
+    { scale, editingScale, smallControls }: State,
   ) {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
@@ -264,9 +298,7 @@ export default class Output extends Component<Props, State> {
 
     return (
       <Fragment>
-        <div
-          class={`${style.output} ${altBackground ? style.altBackground : ''}`}
-        >
+        <div class={style.output} hidden={hidden}>
           <two-up
             legacy-clip-compat
             class={style.twoUp}
@@ -292,7 +324,7 @@ export default class Output extends Component<Props, State> {
                 style={{
                   width: originalImage ? originalImage.width : '',
                   height: originalImage ? originalImage.height : '',
-                  objectFit: leftImgContain ? 'contain' : '',
+                  objectFit: leftImgContain ? 'contain' : undefined,
                 }}
               />
             </pinch-zoom>
@@ -308,15 +340,16 @@ export default class Output extends Component<Props, State> {
                 style={{
                   width: originalImage ? originalImage.width : '',
                   height: originalImage ? originalImage.height : '',
-                  objectFit: rightImgContain ? 'contain' : '',
+                  objectFit: rightImgContain ? 'contain' : undefined,
                 }}
               />
             </pinch-zoom>
           </two-up>
         </div>
-        <div class={style.controls}>
+
+        <div class={style.controls} hidden={hidden}>
           <div class={style.buttonGroup}>
-            <button class={style.firstButton} onClick={this.zoomOut}>
+            <button class={style.button} onClick={this.zoomOut}>
               <RemoveIcon />
             </button>
             {editingScale ? (
@@ -343,18 +376,34 @@ export default class Output extends Component<Props, State> {
             <button class={style.lastButton} onClick={this.zoomIn}>
               <AddIcon />
             </button>
-          </div>
-          <div class={style.buttonGroup}>
-            <button class={style.firstButton} onClick={this.onRotateClick}>
-              <RotateIcon />
-            </button>
-            <button class={style.lastButton} onClick={this.toggleBackground}>
-              {altBackground ? (
-                <ToggleBackgroundActiveIcon />
-              ) : (
-                <ToggleBackgroundIcon />
-              )}
-            </button>
+
+            <Flyout
+              class={style.menu}
+              showing={hidden ? false : undefined}
+              anchor="right"
+              direction={smallControls ? ['down', 'left'] : 'up'}
+              toggle={
+                <button class={`${style.button} ${style.moreButton}`}>
+                  <MoreIcon />
+                </button>
+              }
+            >
+              <button
+                class={style.button}
+                onClick={onShowPreprocessorTransforms}
+              >
+                <RotateIcon /> Rotate & Transform
+              </button>
+              <button class={style.button} onClick={this.fitToViewport}>
+                Fit to viewport
+              </button>
+              <button class={style.button} onClick={this.recenter}>
+                Re-center
+              </button>
+              <button class={style.button} onClick={onToggleBackground}>
+                <ToggleBackgroundIcon /> Change canvas color
+              </button>
+            </Flyout>
           </div>
         </div>
       </Fragment>

src/client/lazy-app/Compress/Output/style.css

@@ -1,20 +1,8 @@
 .output {
   display: contents;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #000;
-    opacity: 0.8;
-    transition: opacity 500ms ease;
-  }
-
-  &.alt-background::before {
-    opacity: 0;
+  &[hidden] {
+    display: none;
   }
 }
 
@@ -42,16 +30,21 @@
 .controls {
   display: flex;
   justify-content: center;
-  overflow: hidden;
   flex-wrap: wrap;
-  contain: content;
   grid-area: header;
   align-self: center;
   padding: 9px 66px;
   position: relative;
+  /* Had to disable containment because of the overflow menu. */
+  /*
+  contain: content;
+  overflow: hidden;
+  */
+  transition: transform 500ms ease;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
+
   & > * {
     pointer-events: auto;
   }
@@ -62,13 +55,34 @@
     grid-area: viewportOpts;
     align-self: end;
   }
+
+  &[hidden] {
+    visibility: visible;
+    transform: translateY(-200%);
+
+    @media (min-width: 860px) {
+      transform: translateY(200%);
+    }
+  }
 }
 
 .button-group {
   display: flex;
   position: relative;
   z-index: 100;
-  margin: 0 3px;
+
+  & > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: 0;
+  }
+
+  & > :not(:nth-last-child(2)) {
+    margin-right: 0;
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 }
 
 .button,
@@ -76,9 +90,10 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
+  margin: 4px;
   background-color: rgba(29, 29, 29, 0.92);
   border: 1px solid rgba(0, 0, 0, 0.67);
-  border-width: 1px 0 1px 1px;
+  border-radius: 6px;
   line-height: 1.1;
   white-space: nowrap;
   height: 39px;
@@ -161,3 +176,64 @@ input.zoom {
     pointer-events: auto;
   }
 }
+
+/** Three-dot menu */
+.moreButton {
+  padding: 0 4px;
+
+  & > svg {
+    transform-origin: center;
+    transition: transform 200ms ease;
+  }
+}
+
+.controls [data-flyout-open] {
+  .moreButton {
+    background: rgba(82, 82, 82, 0.92);
+
+    & > svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:before {
+    content: '';
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(50, 50, 50, 0.4);
+    backdrop-filter: blur(2px) contrast(70%);
+    animation: menuShimFadeIn 350ms ease forwards 1;
+    will-change: opacity;
+    z-index: -1;
+  }
+}
+
+@keyframes menuShimFadeIn {
+  0% {
+    opacity: 0;
+  }
+}
+
+.menu {
+  button {
+    margin: 8px 0;
+    border-radius: 2rem;
+    padding: 0 16px;
+
+    & > svg {
+      position: relative;
+      left: -6px;
+    }
+  }
+
+  h5 {
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    color: #fff;
+    margin: 8px 4px;
+    padding: 10px 0 0;
+  }
+}

src/client/lazy-app/Compress/Transform/Cropper/index.tsx

@@ -0,0 +1,335 @@
+import { h, Component, ComponentChildren, createRef } from 'preact';
+import * as style from './style.css';
+import 'add-css:./style.css';
+import { shallowEqual } from 'client/lazy-app/util';
+
+export interface CropBox {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+// Minimum CropBox size
+const MIN_SIZE = 2;
+
+export interface Props {
+  size: { width: number; height: number };
+  scale?: number;
+  lockAspect?: boolean;
+  crop: CropBox;
+  onChange?(crop: CropBox): void;
+}
+
+type Edge = keyof CropBox;
+
+interface PointerTrack {
+  x: number;
+  y: number;
+  edges: { edge: Edge; value: number }[];
+  aspect: number | undefined;
+}
+
+interface State {
+  crop: CropBox;
+  pan: boolean;
+}
+
+export default class Cropper extends Component<Props, State> {
+  private pointers = new Map<number, PointerTrack>();
+
+  state = {
+    crop: this.normalizeCrop({ ...this.props.crop }),
+    pan: false,
+  };
+
+  private root = createRef<SVGSVGElement>();
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    if (!shallowEqual(nextState, this.state)) return true;
+    const { size, scale, lockAspect, crop } = this.props;
+    return (
+      size.width !== nextProps.size.width ||
+      size.height !== nextProps.size.height ||
+      scale !== nextProps.scale ||
+      lockAspect !== nextProps.lockAspect ||
+      !shallowEqual(crop, nextProps.crop)
+    );
+  }
+
+  componentDidUpdate() {
+    requestAnimationFrame(() => {
+      if (!this.root.current) return;
+      getComputedStyle(this.root.current);
+    });
+  }
+
+  componentWillReceiveProps({ crop }: Props, nextState: State) {
+    const current = nextState.crop || this.state.crop;
+    if (crop !== this.props.crop && !shallowEqual(crop, current)) {
+      this.setCrop(crop);
+    }
+  }
+
+  private normalizeCrop(crop: CropBox) {
+    crop.left = Math.round(Math.max(0, crop.left));
+    crop.top = Math.round(Math.max(0, crop.top));
+    crop.right = Math.round(Math.max(0, crop.right));
+    crop.bottom = Math.round(Math.max(0, crop.bottom));
+    return crop;
+  }
+
+  private setCrop(cropUpdate: Partial<CropBox>) {
+    const crop = this.normalizeCrop({ ...this.state.crop, ...cropUpdate });
+    // ignore crop updates that normalize to the same values
+    const old = this.state.crop;
+    if (
+      crop.left === old.left &&
+      crop.right === old.right &&
+      crop.top === old.top &&
+      crop.bottom === old.bottom
+    ) {
+      return;
+    }
+    this.setState({ crop });
+    if (this.props.onChange) {
+      this.props.onChange(crop);
+    }
+  }
+
+  private onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0 || this.state.pan) return;
+
+    const target = event.target as SVGElement;
+    const edgeAttr = target.getAttribute('data-edge');
+    if (edgeAttr) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      let aspect;
+      const edges = edgeAttr.split(/ *, */) as Edge[];
+      if (this.props.lockAspect) {
+        if (edges.length === 1) return;
+        const { size } = this.props;
+        const oldCrop = this.state.crop;
+        aspect =
+          (size.width - oldCrop.left - oldCrop.right) /
+          (size.height - oldCrop.top - oldCrop.bottom);
+      }
+
+      this.pointers.set(event.pointerId, {
+        x: event.x,
+        y: event.y,
+        edges: edges.map((edge) => ({ edge, value: this.state.crop[edge] })),
+        aspect,
+      });
+      target.setPointerCapture(event.pointerId);
+    }
+  };
+
+  private onPointerMove = (event: PointerEvent) => {
+    const target = event.target as SVGElement;
+    const down = this.pointers.get(event.pointerId);
+    if (down && target.hasPointerCapture(event.pointerId)) {
+      const { size } = this.props;
+      const oldCrop = this.state.crop;
+      const scale = this.props.scale || 1;
+      let dx = (event.x - down.x) / scale;
+      let dy = (event.y - down.y) / scale;
+
+      if (down.aspect && down.edges.length === 2) {
+        const dir = (dx + dy) / 2;
+        dx = dir * down.aspect;
+        dy = dir / down.aspect;
+      }
+      const crop: Partial<CropBox> = {};
+      for (const { edge, value } of down.edges) {
+        let edgeValue = value;
+        switch (edge) {
+          case 'left':
+            edgeValue += dx;
+            break;
+          case 'right':
+            edgeValue -= dx;
+            break;
+          case 'top':
+            edgeValue += dy;
+            break;
+          case 'bottom':
+            edgeValue -= dy;
+            break;
+        }
+        crop[edge] = edgeValue;
+      }
+
+      // Prevent MOVE from resizing the cropbox:
+      if (crop.left && crop.right) {
+        if (crop.left < 0) crop.right += crop.left;
+        if (crop.right < 0) crop.left += crop.right;
+      } else {
+        // enforce minimum 1px cropbox width
+        if (crop.left) {
+          if (down.aspect) crop.left = Math.max(0, crop.left);
+          else
+            crop.left = Math.min(
+              crop.left,
+              size.width - oldCrop.right - MIN_SIZE,
+            );
+        }
+        if (crop.right) {
+          if (down.aspect) crop.right = Math.max(0, crop.right);
+          crop.right = Math.min(
+            crop.right,
+            size.width - oldCrop.left - MIN_SIZE,
+          );
+        }
+
+        if (
+          down.aspect &&
+          (crop.left ?? oldCrop.left) + (crop.right ?? oldCrop.right) >
+            size.width
+        )
+          return;
+      }
+      if (crop.top && crop.bottom) {
+        if (crop.top < 0) crop.bottom += crop.top;
+        if (crop.bottom < 0) crop.top += crop.bottom;
+      } else {
+        // enforce minimum 1px cropbox height
+        if (crop.top) {
+          if (down.aspect) crop.top = Math.max(0, crop.top);
+          crop.top = Math.min(
+            crop.top,
+            size.height - oldCrop.bottom - MIN_SIZE,
+          );
+        }
+        if (crop.bottom) {
+          if (down.aspect) crop.bottom = Math.max(0, crop.bottom);
+          crop.bottom = Math.min(
+            crop.bottom,
+            size.height - oldCrop.top - MIN_SIZE,
+          );
+        }
+
+        if (
+          down.aspect &&
+          (crop.top ?? oldCrop.top) + (crop.bottom ?? oldCrop.bottom) >
+            size.height
+        )
+          return;
+      }
+
+      this.setCrop(crop);
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  private onPointerUp = (event: PointerEvent) => {
+    const target = event.target as SVGElement;
+    const down = this.pointers.get(event.pointerId);
+    if (down && target.hasPointerCapture(event.pointerId)) {
+      this.onPointerMove(event);
+      target.releasePointerCapture(event.pointerId);
+      event.stopPropagation();
+      event.preventDefault();
+      this.pointers.delete(event.pointerId);
+    }
+  };
+
+  private onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === ' ') {
+      if (!this.state.pan) {
+        this.setState({ pan: true });
+      }
+      event.preventDefault();
+    }
+  };
+
+  private onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === ' ') this.setState({ pan: false });
+  };
+
+  componentDidMount() {
+    addEventListener('keydown', this.onKeyDown);
+    addEventListener('keyup', this.onKeyUp);
+  }
+
+  componentWillUnmount() {
+    removeEventListener('keydown', this.onKeyDown);
+    removeEventListener('keyup', this.onKeyUp);
+  }
+
+  render({ size }: Props, { crop, pan }: State) {
+    const x = crop.left;
+    const y = crop.top;
+    const width = size.width - crop.left - crop.right;
+    const height = size.height - crop.top - crop.bottom;
+
+    const s = (x: number) => x.toFixed(3);
+
+    const clip = `polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, ${s(x)}px ${s(
+      y,
+    )}px, ${s(x + width)}px ${s(y)}px, ${s(x + width)}px ${s(
+      y + height,
+    )}px, ${s(x)}px ${s(y + height)}px, ${s(x)}px ${s(y)}px)`;
+
+    return (
+      <svg
+        ref={this.root}
+        class={`${style.cropper} ${pan ? style.pan : ''}`}
+        width={size.width + 20}
+        height={size.height + 20}
+        viewBox={`-10 -10 ${size.width + 20} ${size.height + 20}`}
+        onPointerDown={this.onPointerDown}
+        onPointerMove={this.onPointerMove}
+        onPointerUp={this.onPointerUp}
+      >
+        <rect
+          class={style.background}
+          width={size.width}
+          height={size.height}
+          clip-path={clip}
+        />
+        <svg x={x} y={y} width={width} height={height}>
+          <Freezer>
+            <rect
+              id="box"
+              class={style.cropbox}
+              data-edge="left,right,top,bottom"
+              width="100%"
+              height="100%"
+            />
+
+            <rect class={style.edge} data-edge="top" width="100%" />
+            <rect class={style.edge} data-edge="bottom" width="100%" y="100%" />
+            <rect class={style.edge} data-edge="left" height="100%" />
+            <rect class={style.edge} data-edge="right" height="100%" x="100%" />
+
+            <circle class={style.corner} data-edge="left,top" />
+            <circle class={style.corner} data-edge="right,top" cx="100%" />
+            <circle
+              class={style.corner}
+              data-edge="right,bottom"
+              cx="100%"
+              cy="100%"
+            />
+            <circle class={style.corner} data-edge="left,bottom" cy="100%" />
+          </Freezer>
+        </svg>
+      </svg>
+    );
+  }
+}
+
+interface FreezerProps {
+  children: ComponentChildren;
+}
+class Freezer extends Component<FreezerProps> {
+  shouldComponentUpdate() {
+    return false;
+  }
+  render({ children }: FreezerProps) {
+    return children;
+  }
+}

src/client/lazy-app/Compress/Transform/Cropper/style.css

@@ -0,0 +1,105 @@
+.cropper {
+  position: absolute;
+  left: -10px;
+  top: -10px;
+  right: -10px;
+  bottom: -10px;
+  shape-rendering: crispedges;
+  overflow: visible;
+  contain: layout size;
+
+  &.pan {
+    cursor: grabbing;
+    & * {
+      pointer-events: none;
+    }
+  }
+
+  & > svg {
+    overflow: visible;
+    contain: layout size;
+  }
+}
+
+.background {
+  pointer-events: none;
+  fill: rgba(0, 0, 0, 0.25);
+}
+
+.cropbox {
+  fill: none;
+  stroke: white;
+  stroke-width: calc(1.5px / var(--scale, 1));
+  stroke-dasharray: calc(5px / var(--scale, 1)), calc(5px / var(--scale, 1));
+  stroke-dashoffset: 50%;
+  /* Accept pointer input even though this is unpainted transparent */
+  pointer-events: all;
+  cursor: move;
+}
+
+.edge {
+  fill: #aaa;
+  opacity: 0;
+  transition: opacity 250ms ease;
+  z-index: 2;
+  pointer-events: all;
+  --edge-width: calc(10px / var(--scale, 1));
+
+  @media (max-width: 779px) {
+    --edge-width: calc(20px / var(--scale, 1));
+    fill: rgba(0, 0, 0, 0.01);
+  }
+
+  &[data-edge='left'],
+  &[data-edge='right'] {
+    cursor: ew-resize;
+    transform: translate(calc(var(--edge-width, 10px) / -2), 0);
+    width: var(--edge-width, 10px);
+  }
+  &[data-edge='top'],
+  &[data-edge='bottom'] {
+    cursor: ns-resize;
+    transform: translate(0, calc(var(--edge-width, 10px) / -2));
+    height: var(--edge-width, 10px);
+  }
+
+  &:hover,
+  &:active {
+    opacity: 0.1;
+    transition: none;
+  }
+}
+
+.corner {
+  r: calc(4px / var(--scale, 1));
+  stroke-width: calc(4px / var(--scale, 1));
+  stroke: rgba(225, 225, 225, 0.01);
+  fill: white;
+  shape-rendering: geometricprecision;
+  pointer-events: all;
+  transition: fill 250ms ease, stroke 250ms ease;
+
+  &:hover,
+  &:active {
+    stroke: rgba(225, 225, 225, 0.5);
+    transition: none;
+  }
+
+  @media (max-width: 779px) {
+    r: calc(10 / var(--scale, 1));
+    stroke-width: calc(2 / var(--scale, 1));
+  }
+
+  &[data-edge='left,top'] {
+    cursor: nw-resize;
+  }
+  &[data-edge='right,top'] {
+    cursor: ne-resize;
+  }
+  &[data-edge='right,bottom'] {
+    cursor: se-resize;
+  }
+  &[data-edge='left,bottom'] {
+    cursor: sw-resize;
+  }
+}

src/client/lazy-app/Compress/Transform/index.tsx

@@ -0,0 +1,553 @@
+import { h, Component, Fragment, createRef } from 'preact';
+import type {
+  default as PinchZoom,
+  ScaleToOpts,
+} from '../Output/custom-els/PinchZoom';
+import '../Output/custom-els/PinchZoom';
+import * as style from './style.css';
+import 'add-css:./style.css';
+import {
+  AddIcon,
+  CheckmarkIcon,
+  CompareIcon,
+  FlipHorizontallyIcon,
+  FlipVerticallyIcon,
+  RemoveIcon,
+  RotateClockwiseIcon,
+  RotateCounterClockwiseIcon,
+  SwapIcon,
+} from '../../icons';
+import { cleanSet } from '../../util/clean-modify';
+import type { SourceImage } from '../../Compress';
+import { PreprocessorState } from 'client/lazy-app/feature-meta';
+import Cropper, { CropBox } from './Cropper';
+import CanvasImage from '../CanvasImage';
+import Select from '../Options/Select';
+import Checkbox from '../Options/Checkbox';
+
+const ROTATE_ORIENTATIONS = [0, 90, 180, 270] as const;
+
+const cropPresets = {
+  square: {
+    name: 'Square',
+    ratio: 1,
+  },
+  '4:3': {
+    name: '4:3',
+    ratio: 4 / 3,
+  },
+  '16:9': {
+    name: '16:9',
+    ratio: 16 / 9,
+  },
+  '16:10': {
+    name: '16:10',
+    ratio: 16 / 10,
+  },
+};
+
+type CropPresetId = keyof typeof cropPresets;
+
+interface Props {
+  source: SourceImage;
+  preprocessorState: PreprocessorState;
+  mobileView: boolean;
+  onCancel?(): void;
+  onSave?(e: { preprocessorState: PreprocessorState }): void;
+}
+
+interface State {
+  scale: number;
+  editingScale: boolean;
+  rotate: typeof ROTATE_ORIENTATIONS[number];
+  crop: CropBox;
+  cropPreset: keyof typeof cropPresets | undefined;
+  lockAspect: boolean;
+  flip: PreprocessorState['flip'];
+}
+
+const scaleToOpts: ScaleToOpts = {
+  originX: '50%',
+  originY: '50%',
+  relativeTo: 'container',
+  allowChangeEvent: true,
+};
+
+export default class Transform extends Component<Props, State> {
+  state: State = {
+    scale: 1,
+    editingScale: false,
+    cropPreset: undefined,
+    lockAspect: false,
+    ...this.fromPreprocessorState(this.props.preprocessorState),
+  };
+  pinchZoom = createRef<PinchZoom>();
+  scaleInput = createRef<HTMLInputElement>();
+
+  componentWillReceiveProps(
+    { source, preprocessorState }: Props,
+    { crop, cropPreset }: State,
+  ) {
+    if (preprocessorState !== this.props.preprocessorState) {
+      this.setState(this.fromPreprocessorState(preprocessorState));
+    }
+    const { width, height } = source.decoded;
+    if (crop) {
+      const cropWidth = width - crop.left - crop.right;
+      const cropHeight = height - crop.top - crop.bottom;
+      for (const [id, preset] of Object.entries(cropPresets)) {
+        if (cropHeight * preset.ratio === cropWidth) {
+          if (cropPreset !== id) {
+            this.setState({ cropPreset: id as CropPresetId });
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  private fromPreprocessorState(preprocessorState?: PreprocessorState) {
+    const state: Pick<State, 'rotate' | 'crop' | 'flip'> = {
+      rotate: preprocessorState ? preprocessorState.rotate.rotate : 0,
+      crop: Object.assign(
+        {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+        (preprocessorState && preprocessorState.crop) || {},
+      ),
+      flip: Object.assign(
+        {
+          horizontal: false,
+          vertical: false,
+        },
+        (preprocessorState && preprocessorState.flip) || {},
+      ),
+    };
+    return state;
+  }
+
+  private save = () => {
+    const { preprocessorState, onSave } = this.props;
+    const { rotate, crop, flip } = this.state;
+
+    let newState = cleanSet(preprocessorState, 'rotate.rotate', rotate);
+    newState = cleanSet(newState, 'crop', crop);
+    newState = cleanSet(newState, 'flip', flip);
+
+    if (onSave) onSave({ preprocessorState: newState });
+  };
+
+  private cancel = () => {
+    const { onCancel, onSave } = this.props;
+    if (onCancel) onCancel();
+    else if (onSave)
+      onSave({ preprocessorState: this.props.preprocessorState });
+  };
+
+  private zoomIn = () => {
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+    this.pinchZoom.current.scaleTo(this.state.scale * 1.25, scaleToOpts);
+  };
+
+  private zoomOut = () => {
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+    this.pinchZoom.current.scaleTo(this.state.scale / 1.25, scaleToOpts);
+  };
+
+  private onScaleValueFocus = () => {
+    this.setState({ editingScale: true }, () => {
+      if (this.scaleInput.current) {
+        // Firefox unfocuses the input straight away unless I force a style
+        // calculation here. I have no idea why, but it's late and I'm quite
+        // tired.
+        getComputedStyle(this.scaleInput.current).transform;
+        this.scaleInput.current.focus();
+      }
+    });
+  };
+
+  private onScaleInputBlur = () => {
+    this.setState({ editingScale: false });
+  };
+
+  private onScaleInputChanged = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const percent = parseFloat(target.value);
+    if (isNaN(percent)) return;
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+
+    this.pinchZoom.current.scaleTo(percent / 100, scaleToOpts);
+  };
+
+  private onPinchZoomChange = () => {
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+    this.setState({
+      scale: this.pinchZoom.current.scale,
+    });
+  };
+
+  private onCropChange = (crop: CropBox) => {
+    this.setState({ crop });
+  };
+
+  private onCropPresetChange = (event: Event) => {
+    const { value } = event.target as HTMLSelectElement;
+    const cropPreset = value ? (value as keyof typeof cropPresets) : undefined;
+    const crop = { ...this.state.crop };
+    if (cropPreset) {
+      const preset = cropPresets[cropPreset];
+      const { width, height } = this.props.source.decoded;
+      const w = width - crop.left - crop.right;
+      const h = w / preset.ratio;
+      crop.bottom = height - crop.top - h;
+      if (crop.bottom < 0) {
+        crop.top += crop.bottom;
+        crop.bottom = 0;
+      }
+    }
+    this.setState({
+      crop,
+      cropPreset,
+      lockAspect: !!cropPreset,
+    });
+  };
+
+  private swapCropDimensions = () => {
+    const { width, height } = this.props.source.decoded;
+    let { left, right, top, bottom } = this.state.crop;
+    const cropWidth = width - left - right;
+    const cropHeight = height - top - bottom;
+    const centerX = left - right;
+    const centerY = top - bottom;
+    const crop = {
+      top: (width - cropWidth) / 2 + centerY / 2,
+      bottom: (width - cropWidth) / 2 - centerY / 2,
+      left: (height - cropHeight) / 2 + centerX / 2,
+      right: (height - cropHeight) / 2 - centerX / 2,
+    };
+    this.setCrop(crop);
+  };
+
+  private setCrop(crop: CropBox) {
+    if (crop.top < 0) {
+      crop.bottom += crop.top;
+      crop.top = 0;
+    }
+    if (crop.bottom < 0) {
+      crop.top += crop.bottom;
+      crop.bottom = 0;
+    }
+    if (crop.left < 0) {
+      crop.right += crop.left;
+      crop.left = 0;
+    }
+    if (crop.right < 0) {
+      crop.left += crop.right;
+      crop.right = 0;
+    }
+    if (crop.left < 0 || crop.right < 0) crop.left = crop.right = 0;
+    if (crop.top < 0 || crop.bottom < 0) crop.top = crop.bottom = 0;
+    this.setState({ crop });
+  }
+
+  private adjustOffsetAfterRotation = (wideToTall: boolean) => {
+    const image = this.props.source.decoded;
+    let { x, y } = this.pinchZoom.current!;
+    let { width, height } = image;
+    if (wideToTall) {
+      [width, height] = [height, width];
+    }
+    x += (width - height) / 2;
+    y += (height - width) / 2;
+    this.pinchZoom.current!.setTransform({ x, y });
+  };
+
+  private rotateClockwise = () => {
+    let { rotate, crop } = this.state;
+    this.setState(
+      {
+        rotate: ((rotate + 90) % 360) as typeof ROTATE_ORIENTATIONS[number],
+      },
+      () => {
+        this.adjustOffsetAfterRotation(rotate === 0 || rotate === 180);
+      },
+    );
+    this.setCrop({
+      top: crop.left,
+      left: crop.bottom,
+      bottom: crop.right,
+      right: crop.top,
+    });
+  };
+
+  private rotateCounterClockwise = () => {
+    let { rotate, crop } = this.state;
+    this.setState(
+      {
+        rotate: (rotate
+          ? rotate - 90
+          : 270) as typeof ROTATE_ORIENTATIONS[number],
+      },
+      () => {
+        this.adjustOffsetAfterRotation(rotate === 0 || rotate === 180);
+      },
+    );
+    this.setCrop({
+      top: crop.right,
+      right: crop.bottom,
+      bottom: crop.left,
+      left: crop.top,
+    });
+  };
+
+  private flipHorizontally = () => {
+    const { horizontal, vertical } = this.state.flip;
+    this.setState({ flip: { horizontal: !horizontal, vertical } });
+  };
+
+  private flipVertically = () => {
+    const { horizontal, vertical } = this.state.flip;
+    this.setState({ flip: { horizontal, vertical: !vertical } });
+  };
+
+  private toggleLockAspect = () => {
+    this.setState({ lockAspect: !this.state.lockAspect });
+  };
+
+  private setCropWidth = (
+    event: preact.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => {
+    const { width, height } = this.props.source.decoded;
+    const newWidth = Math.min(width, parseInt(event.currentTarget.value, 10));
+    let { top, right, bottom, left } = this.state.crop;
+    const aspect = (width - left - right) / (height - top - bottom);
+    right = width - newWidth - left;
+    if (this.state.lockAspect) {
+      const newHeight = newWidth / aspect;
+      if (newHeight > height) return;
+      bottom = height - newHeight - top;
+    }
+    this.setCrop({ top, right, bottom, left });
+  };
+
+  private setCropHeight = (
+    event: preact.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => {
+    const { width, height } = this.props.source.decoded;
+    const newHeight = Math.min(height, parseInt(event.currentTarget.value, 10));
+    let { top, right, bottom, left } = this.state.crop;
+    const aspect = (width - left - right) / (height - top - bottom);
+    bottom = height - newHeight - top;
+    if (this.state.lockAspect) {
+      const newWidth = newHeight * aspect;
+      if (newWidth > width) return;
+      right = width - newWidth - left;
+    }
+    this.setCrop({ top, right, bottom, left });
+  };
+
+  render(
+    { mobileView, source }: Props,
+    { scale, editingScale, rotate, flip, crop, cropPreset, lockAspect }: State,
+  ) {
+    const image = source.decoded;
+    const rotated = rotate === 90 || rotate === 270;
+
+    const displayWidth = rotated ? image.height : image.width;
+    const displayHeight = rotated ? image.width : image.height;
+
+    const width = displayWidth - crop.left - crop.right;
+    const height = displayHeight - crop.top - crop.bottom;
+
+    let transform =
+      `translate(-50%, -50%) ` +
+      `rotate(${rotate}deg) ` +
+      `scale(${flip.horizontal ? -1 : 1}, ${flip.vertical ? -1 : 1})`;
+
+    return (
+      <Fragment>
+        <CancelButton onClick={this.cancel} />
+        <SaveButton onClick={this.save} />
+
+        <div class={style.transform}>
+          <pinch-zoom
+            class={style.pinchZoom}
+            onChange={this.onPinchZoomChange}
+            ref={this.pinchZoom}
+          >
+            <div
+              class={style.wrap}
+              style={{
+                width: displayWidth,
+                height: displayHeight,
+              }}
+            >
+              <CanvasImage
+                class={style.pinchTarget}
+                image={image}
+                style={{ transform }}
+              />
+              {crop && (
+                <Cropper
+                  size={{ width: displayWidth, height: displayHeight }}
+                  scale={scale}
+                  lockAspect={lockAspect}
+                  crop={crop}
+                  onChange={this.onCropChange}
+                />
+              )}
+            </div>
+          </pinch-zoom>
+        </div>
+
+        <div class={style.controls}>
+          <div class={style.zoomControls}>
+            <button class={style.button} onClick={this.zoomOut}>
+              <RemoveIcon />
+            </button>
+            {editingScale ? (
+              <input
+                type="number"
+                step="1"
+                min="1"
+                max="1000000"
+                ref={this.scaleInput}
+                class={style.zoom}
+                value={Math.round(scale * 100)}
+                onInput={this.onScaleInputChanged}
+                onBlur={this.onScaleInputBlur}
+              />
+            ) : (
+              <span
+                class={style.zoom}
+                tabIndex={0}
+                onFocus={this.onScaleValueFocus}
+              >
+                <span class={style.zoomValue}>{Math.round(scale * 100)}</span>%
+              </span>
+            )}
+            <button class={style.button} onClick={this.zoomIn}>
+              <AddIcon />
+            </button>
+          </div>
+        </div>
+
+        <div class={style.options}>
+          <h3 class={style.optionsTitle}>Modify Source</h3>
+
+          <div class={style.optionsSection}>
+            <h4 class={style.optionsSectionTitle}>Crop</h4>
+            <div class={style.optionOneCell}>
+              <Select
+                large
+                value={cropPreset}
+                onChange={this.onCropPresetChange}
+              >
+                <option value="">Custom</option>
+                {Object.entries(cropPresets).map(([type, preset]) => (
+                  <option value={type}>{preset.name}</option>
+                ))}
+              </Select>
+            </div>
+            <label class={style.optionCheckbox}>
+              <Checkbox checked={lockAspect} onClick={this.toggleLockAspect} />
+              Lock aspect-ratio
+            </label>
+            <div class={style.optionsDimensions}>
+              <input
+                type="number"
+                name="width"
+                value={width}
+                title="Crop width"
+                onInput={this.setCropWidth}
+              />
+              <button
+                class={style.optionsButton}
+                title="swap"
+                onClick={this.swapCropDimensions}
+              >
+                <SwapIcon />
+              </button>
+              <input
+                type="number"
+                name="height"
+                value={height}
+                title="Crop height"
+                onInput={this.setCropHeight}
+              />
+            </div>
+
+            <div class={style.optionButtonRow}>
+              Flip
+              <button
+                class={style.optionsButton}
+                data-active={flip.vertical}
+                title="Flip vertically"
+                onClick={this.flipVertically}
+              >
+                <FlipVerticallyIcon />
+              </button>
+              <button
+                class={style.optionsButton}
+                data-active={flip.horizontal}
+                title="Flip horizontally"
+                onClick={this.flipHorizontally}
+              >
+                <FlipHorizontallyIcon />
+              </button>
+            </div>
+
+            <div class={style.optionButtonRow}>
+              Rotate
+              <button
+                class={style.optionsButton}
+                title="Rotate clockwise"
+                onClick={this.rotateClockwise}
+              >
+                <RotateClockwiseIcon />
+              </button>
+              <button
+                class={style.optionsButton}
+                title="Rotate counter-clockwise"
+                onClick={this.rotateCounterClockwise}
+              >
+                <RotateCounterClockwiseIcon />
+              </button>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+const CancelButton = ({ onClick }: { onClick: () => void }) => (
+  <button class={style.cancel} onClick={onClick}>
+    <svg viewBox="0 0 80 80" width="80" height="80">
+      <path d="M8.06 40.98c-.53-7.1 4.05-14.52 9.98-19.1s13.32-6.35 22.13-6.43c8.84-.12 19.12 1.51 24.4 7.97s5.6 17.74 1.68 26.97c-3.89 9.26-11.97 16.45-20.46 18-8.43 1.55-17.28-2.62-24.5-8.08S8.54 48.08 8.07 40.98z" />
+    </svg>
+    <CompareIcon class={style.icon} />
+    <span>Cancel</span>
+  </button>
+);
+
+const SaveButton = ({ onClick }: { onClick: () => void }) => (
+  <button class={style.save} onClick={onClick}>
+    <svg viewBox="0 0 89 87" width="89" height="87">
+      <path
+        fill="#0c99ff"
+        opacity=".7"
+        d="M27.3 71.9c-8-4-15.6-12.3-16.9-21-1.2-8.7 4-17.8 10.5-26s14.4-15.6 24-16 21.2 6 28.6 16.5c7.4 10.5 10.8 25 6.6 34S64.1 71.7 54 73.5c-10.2 2-18.7 2.3-26.7-1.6z"
+      />
+      <path
+        fill="#0c99ff"
+        opacity=".7"
+        d="M14.6 24.8c4.3-7.8 13-15 21.8-15.7 8.7-.8 17.5 4.8 25.4 11.8 7.8 6.9 14.8 15.2 14.8 24.9s-7.2 20.7-18 27.6c-10.9 6.8-25.6 9.5-34.3 4.8S13 61.6 11.6 51.4c-1.3-10.3-1.3-18.8 3-26.6z"
+      />
+    </svg>
+    <CheckmarkIcon class={style.icon} />
+  </button>
+);

src/client/lazy-app/Compress/Transform/style.css

@@ -0,0 +1,335 @@
+.transform {
+  display: block;
+}
+
+.wrap {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  /** can't use transform-origin here, pinch-zoom relies on 0,0 */
+  transform: translate(-50%, -50%) translate(var(--x), var(--y))
+    scale(var(--scale));
+  overflow: visible;
+  contain: layout;
+  will-change: initial !important;
+}
+
+.pinch-zoom {
+  composes: abs-fill from global;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pinch-target {
+  /* This fixes a severe painting bug in Chrome.
+   * We should try to remove this once the issue is fixed.
+   * https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10 */
+  will-change: auto;
+  /* Prevent the image becoming misshapen due to default flexbox layout. */
+  flex-shrink: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: 50% 50%;
+}
+
+.cancel,
+.save {
+  composes: unbutton from global;
+  position: absolute;
+  padding: 0;
+  z-index: 2;
+}
+
+.save {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+
+  & > * {
+    grid-area: 1/1/1/1;
+    fill: #fff;
+  }
+}
+
+/* @TODO use grid */
+.cancel {
+  fill: rgba(0, 0, 0, 0.7);
+
+  & > svg:not(.icon) {
+    display: block;
+    margin: -8px 0;
+    width: 80px;
+    height: 80px;
+  }
+
+  & > .icon {
+    position: absolute;
+    left: 28px;
+    top: 22px;
+    fill: #fff;
+  }
+
+  & > span {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 1rem;
+    background: rgba(0, 0, 0, 0.7);
+    font-size: 80%;
+    color: #fff;
+  }
+
+  &:hover,
+  &:focus {
+    fill: rgba(0, 0, 0, 0.9);
+
+    & > span {
+      background: rgba(0, 0, 0, 0.9);
+    }
+  }
+}
+
+.options {
+  position: fixed;
+  right: 0;
+  bottom: 78px;
+  color: #fff;
+  font-size: 1.2rem;
+  display: flex;
+  flex-flow: column;
+  max-width: 250px;
+  margin: 0;
+  width: calc(100% - 60px);
+  max-height: 100%;
+  overflow: hidden;
+  align-self: end;
+  border-radius: var(--options-radius) 0 0 var(--options-radius);
+  animation: slideInFromRight 500ms ease-out forwards 1;
+  --horizontal-padding: 15px;
+  --main-theme-color: var(--blue);
+
+  /* Hide on mobile (for now) */
+  @media (max-width: 599px) {
+    display: none;
+  }
+}
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+  }
+}
+
+.options-title {
+  background-color: var(--main-theme-color);
+  color: var(--dark-text);
+  margin: 0;
+  padding: 10px var(--horizontal-padding);
+  font-weight: bold;
+  font-size: 1.4rem;
+  border-bottom: 1px solid var(--off-black);
+}
+
+.options-section {
+  padding: 5px 0;
+  background: var(--off-black);
+}
+
+.options-section-title {
+  font: inherit;
+  margin: 0;
+  padding: 5px var(--horizontal-padding);
+}
+
+.option-base {
+  display: grid;
+  gap: 0.7em;
+  align-items: center;
+  padding: 5px var(--horizontal-padding);
+}
+
+.options-button {
+  composes: unbutton from global;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid var(--dark-gray);
+  color: var(--white);
+
+  &:hover,
+  &:focus {
+    background-color: var(--off-black);
+    border-color: var(--med-gray);
+  }
+
+  &[data-active] {
+    background-color: var(--dark-gray);
+    border-color: var(--med-gray);
+  }
+}
+
+.options-dimensions {
+  composes: option-base;
+  grid-template-columns: 1fr 0fr 1fr;
+
+  input {
+    background: var(--white);
+    color: var(--black);
+    font: inherit;
+    border: none;
+    width: 100%;
+    padding: 4px;
+    box-sizing: border-box;
+    border-radius: 4px;
+  }
+}
+
+.option-one-cell {
+  composes: option-base;
+  grid-template-columns: 1fr;
+}
+
+.option-button-row {
+  composes: option-base;
+  grid-template-columns: 1fr auto auto;
+}
+
+.option-checkbox {
+  composes: option-base;
+  grid-template-columns: auto 1fr;
+}
+
+/** Zoom controls */
+.controls {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 9px 84px;
+  flex-wrap: wrap;
+
+  /* Allow clicks to fall through to the pinch zoom area */
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+
+  @media (min-width: 860px) {
+    padding: 9px;
+    top: auto;
+    left: 320px;
+    right: 320px;
+    bottom: 0;
+    flex-wrap: wrap-reverse;
+  }
+}
+
+.zoom-controls {
+  display: flex;
+  position: relative;
+  z-index: 100;
+
+  & > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: 0;
+  }
+
+  & > :not(:last-child) {
+    margin-right: 0;
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.button,
+.zoom {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 4px;
+  background-color: rgba(29, 29, 29, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.67);
+  border-radius: 6px;
+  line-height: 1.1;
+  white-space: nowrap;
+  height: 39px;
+  padding: 0 8px;
+  font-size: 1.2rem;
+  cursor: pointer;
+
+  &:focus {
+    box-shadow: 0 0 0 2px #fff;
+    outline: none;
+    z-index: 1;
+  }
+}
+
+.button {
+  color: #fff;
+
+  &:hover {
+    background: rgba(50, 50, 50, 0.92);
+  }
+
+  &.active {
+    background: rgba(72, 72, 72, 0.92);
+    color: #fff;
+  }
+}
+
+.zoom {
+  cursor: text;
+  width: 7rem;
+  font: inherit;
+  text-align: center;
+  justify-content: center;
+
+  &:focus {
+    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff;
+  }
+}
+span.zoom {
+  color: #939393;
+  font-size: 0.8rem;
+  line-height: 1.2;
+  font-weight: 100;
+}
+input.zoom {
+  font-size: 1.2rem;
+  letter-spacing: 0.05rem;
+  font-weight: 700;
+  text-indent: 3px;
+  color: #fff;
+}
+
+.zoom-value {
+  margin: 0 3px 0 0;
+  padding: 0 2px;
+  font-size: 1.2rem;
+  letter-spacing: 0.05rem;
+  font-weight: 700;
+  color: #fff;
+  border-bottom: 1px dashed #999;
+}
+
+.buttons-no-wrap {
+  display: flex;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}

src/client/lazy-app/Compress/index.tsx

@@ -10,6 +10,7 @@ import {
   canDecodeImageType,
   abortable,
   assertSignal,
+  shallowEqual,
   ImageMimeTypes,
 } from '../util';
 import {
@@ -31,6 +32,7 @@ import Results from './Results';
 import WorkerBridge from '../worker-bridge';
 import { resize } from 'features/processors/resize/client';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
+import Transform from './Transform';
 import { generateCliInvocation } from '../util/cli';
 import { drawableToImageData } from '../util/canvas';
 
@@ -69,7 +71,11 @@ interface State {
   sides: [Side, Side];
   /** Source image load */
   loading: boolean;
+  /** Showing preprocessor transformations modal */
+  transform: boolean;
+  error?: string;
   mobileView: boolean;
+  altBackground: boolean;
   preprocessorState: PreprocessorState;
   encodedPreprocessorState?: PreprocessorState;
 }
@@ -130,13 +136,18 @@ async function preprocessImage(
 ): Promise<ImageData> {
   assertSignal(signal);
   let processedData = data;
+  const { rotate, flip, crop } = preprocessorState;
 
-  if (preprocessorState.rotate.rotate !== 0) {
-    processedData = await workerBridge.rotate(
-      signal,
-      processedData,
-      preprocessorState.rotate,
-    );
+  if (flip.horizontal || flip.vertical) {
+    processedData = await workerBridge.flip(signal, processedData, flip);
+  }
+
+  if (rotate.rotate !== 0) {
+    processedData = await workerBridge.rotate(signal, processedData, rotate);
+  }
+
+  if (crop.left || crop.top || crop.right || crop.bottom) {
+    processedData = await workerBridge.crop(signal, processedData, crop);
   }
 
   return processedData;
@@ -281,6 +292,7 @@ export default class Compress extends Component<Props, State> {
   state: State = {
     source: undefined,
     loading: false,
+    transform: false,
     preprocessorState: defaultPreprocessorState,
     sides: [
       {
@@ -302,6 +314,7 @@ export default class Compress extends Component<Props, State> {
       },
     ],
     mobileView: this.widthQuery.matches,
+    altBackground: false,
   };
 
   private readonly encodeCache = new ResultCache();
@@ -327,6 +340,12 @@ export default class Compress extends Component<Props, State> {
     this.setState({ mobileView: this.widthQuery.matches });
   };
 
+  private toggleBackground = () => {
+    this.setState({
+      altBackground: !this.state.altBackground,
+    });
+  };
+
   private onEncoderTypeChange = (index: 0 | 1, newType: OutputType): void => {
     this.setState({
       sides: cleanSet(
@@ -368,6 +387,19 @@ export default class Compress extends Component<Props, State> {
     });
   };
 
+  private showPreprocessorTransforms = () => {
+    this.setState({ transform: true });
+  };
+
+  private onTransformCommit = ({
+    preprocessorState,
+  }: { preprocessorState?: PreprocessorState } = {}) => {
+    if (preprocessorState) {
+      this.onPreprocessorChange(preprocessorState);
+    }
+    this.setState({ transform: false });
+  };
+
   componentWillReceiveProps(nextProps: Props): void {
     if (nextProps.file !== this.props.file) {
       this.sourceFile = nextProps.file;
@@ -439,25 +471,38 @@ export default class Compress extends Component<Props, State> {
     const newRotate = preprocessorState.rotate.rotate;
     const orientationChanged = oldRotate % 180 !== newRotate % 180;
 
+    const { crop } = preprocessorState;
+    const cropChanged = !shallowEqual(crop, this.state.preprocessorState.crop);
+
     this.setState((state) => ({
       loading: true,
       preprocessorState,
       // Flip resize values if orientation has changed
-      sides: !orientationChanged
-        ? state.sides
-        : (state.sides.map((side) => {
-            const currentResizeSettings =
-              side.latestSettings.processorState.resize;
-            const resizeSettings: Partial<ProcessorState['resize']> = {
-              width: currentResizeSettings.height,
-              height: currentResizeSettings.width,
-            };
-            return cleanMerge(
-              side,
-              'latestSettings.processorState.resize',
-              resizeSettings,
-            );
-          }) as [Side, Side]),
+      sides:
+        !orientationChanged && !cropChanged
+          ? state.sides
+          : (state.sides.map((side) => {
+              const currentResizeSettings =
+                side.latestSettings.processorState.resize;
+              let resizeSettings: Partial<ProcessorState['resize']>;
+              if (cropChanged) {
+                const img = state.source?.decoded;
+                resizeSettings = {
+                  width: img ? img.width - crop.left - crop.right : undefined,
+                  height: img ? img.height - crop.top - crop.bottom : undefined,
+                };
+              } else {
+                resizeSettings = {
+                  width: currentResizeSettings.height,
+                  height: currentResizeSettings.width,
+                };
+              }
+              return cleanMerge(
+                side,
+                'latestSettings.processorState.resize',
+                resizeSettings,
+              );
+            }) as [Side, Side]),
     }));
   };
 
@@ -835,12 +880,22 @@ export default class Compress extends Component<Props, State> {
   }
 
   render(
-    { onBack }: Props,
-    { loading, sides, source, mobileView, preprocessorState }: State,
+    { onBack, showSnack }: Props,
+    {
+      loading,
+      sides,
+      source,
+      mobileView,
+      altBackground,
+      transform,
+      preprocessorState,
+    }: State,
   ) {
     const [leftSide, rightSide] = sides;
     const [leftImageData, rightImageData] = sides.map((i) => i.data);
 
+    transform = (source && source.decoded && transform) || false;
+
     const options = sides.map((side, index) => (
       <Options
         index={index as 0 | 1}
@@ -885,8 +940,13 @@ export default class Compress extends Component<Props, State> {
       rightDisplaySettings.processorState.resize.fitMethod === 'contain';
 
     return (
-      <div class={style.compress}>
+      <div
+        class={`${style.compress} ${transform ? style.transforming : ''} ${
+          altBackground ? style.altBackground : ''
+        }`}
+      >
         <Output
+          hidden={transform}
           source={source}
           mobileView={mobileView}
           leftCompressed={leftImageData}
@@ -895,6 +955,8 @@ export default class Compress extends Component<Props, State> {
           rightImgContain={rightImgContain}
           preprocessorState={preprocessorState}
           onPreprocessorChange={this.onPreprocessorChange}
+          onShowPreprocessorTransforms={this.showPreprocessorTransforms}
+          onToggleBackground={this.toggleBackground}
         />
         <button class={style.back} onClick={onBack}>
           <svg viewBox="0 0 61 53.3">
@@ -930,6 +992,16 @@ export default class Compress extends Component<Props, State> {
             </div>,
           ]
         )}
+
+        {transform && (
+          <Transform
+            mobileView={mobileView}
+            source={source!}
+            preprocessorState={preprocessorState!}
+            onSave={this.onTransformCommit}
+            onCancel={this.onTransformCommit}
+          />
+        )}
       </div>
     );
   }

src/client/lazy-app/Compress/style.css

@@ -17,6 +17,47 @@
       'header header header'
       'optsLeft viewportOpts optsRight';
   }
+
+  /* darker squares background */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0.8;
+    transition: opacity 500ms ease;
+  }
+
+  &.alt-background::before {
+    opacity: 0;
+  }
+
+  /* transformation is modal and we sweep away the comparison UI */
+  &.transforming {
+    & > .options {
+      transform: translateX(-100%);
+    }
+    & > .options + .options {
+      transform: translateX(100%);
+    }
+
+    @media (max-width: 599px) {
+      & > .options {
+        display: none;
+      }
+    }
+
+    & > .back {
+      display: none;
+    }
+
+    & > :first-child {
+      display: none;
+    }
+  }
 }
 
 .options {
@@ -33,6 +74,7 @@
   grid-template-rows: 1fr max-content;
   align-content: end;
   align-self: end;
+  transition: transform 500ms ease;
 
   @media (min-width: 600px) {
     width: 300px;

src/client/lazy-app/icons/index.tsx

@@ -1,61 +1,124 @@
 import { h } from 'preact';
 
-const Icon = (props: preact.JSX.HTMLAttributes) => (
-  // @ts-ignore - TS bug https://github.com/microsoft/TypeScript/issues/16019
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    {...props}
-  />
+interface IconProps extends preact.JSX.SVGAttributes {
+  transform?: string;
+}
+
+const Icon = ({ transform, children, ...props }: IconProps) => {
+  if (transform) {
+    children = (
+      <g style={{ transformOrigin: 'center', transform }}>{children}</g>
+    );
+  }
+  return (
+    // @ts-ignore - TS bug https://github.com/microsoft/TypeScript/issues/16019
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+};
+
+export const CLIIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M1 2.7H23v18.5H1zm5.5 13l3.7-3.7-3.7-3.7m5.5 7.4h5.6" />
+  </Icon>
 );
 
-export const ToggleBackgroundIcon = (props: preact.JSX.HTMLAttributes) => (
+export const SwapIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M8.5 8.6v6.8L5.1 12l3.4-3.4M10 5l-7 7 7 7V5zm4 0v14l7-7-7-7z" />
+  </Icon>
+);
+
+export const FlipVerticallyIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M21 9V7h-2v2zM9 5V3H7v2zM5 21h14a2 2 0 002-2v-4h-2v4H5v-4H3v4a2 2 0 002 2zM3 5h2V3a2 2 0 00-2 2zm20 8v-2H1v2zm-6-8V3h-2v2zM5 9V7H3v2zm8-4V3h-2v2zm8 0a2 2 0 00-2-2v2z" />
+  </Icon>
+);
+
+export const FlipHorizontallyIcon = (props: IconProps) => (
+  <FlipVerticallyIcon {...props} transform="rotate(90deg)" />
+);
+
+export const RotateClockwiseIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M16.05 5.34l-5.2-5.2v3.5a9.12 9.12 0 000 18.1v-2.3a6.84 6.84 0 010-13.5v4.47zm5 6.22a9.03 9.03 0 00-1.85-4.44l-1.62 1.62a6.63 6.63 0 011.16 2.82zm-7.91 7.87v2.31a9.05 9.05 0 004.45-1.84l-1.64-1.64a6.6 6.6 0 01-2.81 1.18zm4.44-2.76l1.62 1.61a9.03 9.03 0 001.85-4.44h-2.3a6.73 6.73 0 01-1.17 2.83z" />
+  </Icon>
+);
+
+export const RotateCounterClockwiseIcon = (props: IconProps) => (
+  <RotateClockwiseIcon {...props} transform="scaleX(-1)" />
+);
+
+export const CheckmarkIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M9.76 17.56l-4.55-4.55-1.52 1.52 6.07 6.08 13-13.02-1.51-1.52z" />
+  </Icon>
+);
+
+export const CompareIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M9.77 1.94h-5.6a2.24 2.24 0 00-2.22 2.25v15.65a2.24 2.24 0 002.24 2.23h5.59v2.24h2.23V-.31H9.78zm0 16.77h-5.6l5.6-6.7zM19.83 1.94h-5.6v2.25h5.6v14.53l-5.6-6.7v10.05h5.6a2.24 2.24 0 002.23-2.23V4.18a2.24 2.24 0 00-2.23-2.24z" />
+  </Icon>
+);
+
+export const ToggleBackgroundIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
   </Icon>
 );
 
-export const ToggleBackgroundActiveIcon = (
-  props: preact.JSX.HTMLAttributes,
-) => (
+export const ToggleBackgroundActiveIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8a2 2 0 0 0-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2a2 2 0 0 0-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.9 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8a2 2 0 0 0 2-2h-2v2zM5 7H3v12c0 1.1.9 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z" />
   </Icon>
 );
 
-export const RotateIcon = (props: preact.JSX.HTMLAttributes) => (
+export const RotateIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M15.6 5.5L11 1v3a8 8 0 0 0 0 16v-2a6 6 0 0 1 0-12v4l4.5-4.5zm4.3 5.5a8 8 0 0 0-1.6-3.9L17 8.5c.5.8.9 1.6 1 2.5h2zM13 17.9v2a8 8 0 0 0 3.9-1.6L15.5 17c-.8.5-1.6.9-2.5 1zm3.9-2.4l1.4 1.4A8 8 0 0 0 20 13h-2c-.1.9-.5 1.7-1 2.5z" />
   </Icon>
 );
 
-export const AddIcon = (props: preact.JSX.HTMLAttributes) => (
+export const MoreIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="12" cy="6" r="2" />
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="12" cy="18" r="2" />
+  </Icon>
+);
+
+export const AddIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
   </Icon>
 );
 
-export const RemoveIcon = (props: preact.JSX.HTMLAttributes) => (
+export const RemoveIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M19 13H5v-2h14v2z" />
   </Icon>
 );
 
-export const UncheckedIcon = (props: preact.JSX.HTMLAttributes) => (
+export const UncheckedIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M21.3 2.7v18.6H2.7V2.7h18.6m0-2.7H2.7A2.7 2.7 0 0 0 0 2.7v18.6A2.7 2.7 0 0 0 2.7 24h18.6a2.7 2.7 0 0 0 2.7-2.7V2.7A2.7 2.7 0 0 0 21.3 0z" />
   </Icon>
 );
 
-export const CheckedIcon = (props: preact.JSX.HTMLAttributes) => (
+export const CheckedIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M21.3 0H2.7A2.7 2.7 0 0 0 0 2.7v18.6A2.7 2.7 0 0 0 2.7 24h18.6a2.7 2.7 0 0 0 2.7-2.7V2.7A2.7 2.7 0 0 0 21.3 0zm-12 18.7L2.7 12l1.8-1.9L9.3 15 19.5 4.8l1.8 1.9z" />
   </Icon>
 );
 
-export const ExpandIcon = (props: preact.JSX.HTMLAttributes) => (
+export const ExpandIcon = (props: IconProps) => (
   <Icon {...props}>
     <path d="M16.6 8.6L12 13.2 7.4 8.6 6 10l6 6 6-6z" />
   </Icon>
@@ -72,20 +135,3 @@ export const DownloadIcon = () => (
     <path d="M6.6 2.7h-4v13.2h2.7A2.7 2.7 0 018 18.6a2.7 2.7 0 002.6 2.6h2.7a2.7 2.7 0 002.6-2.6 2.7 2.7 0 012.7-2.7h2.6V2.7h-4a1.3 1.3 0 110-2.7h4A2.7 2.7 0 0124 2.7v18.5a2.7 2.7 0 01-2.7 2.7H2.7A2.7 2.7 0 010 21.2V2.7A2.7 2.7 0 012.7 0h4a1.3 1.3 0 010 2.7zm4 7.4V1.3a1.3 1.3 0 112.7 0v8.8L15 8.4a1.3 1.3 0 011.9 1.8l-4 4a1.3 1.3 0 01-1.9 0l-4-4A1.3 1.3 0 019 8.4z" />
   </svg>
 );
-
-export const CLIIcon = () => (
-  <svg viewBox="0 0 81.3 68.8">
-    <path
-      fill="none"
-      stroke-miterlimit="15.6"
-      stroke-width="6.3"
-      d="M3.1 3.1h75v62.5h-75zm18.8 43.8l12.5-12.5-12.5-12.5m18.7 25h18.8"
-    />
-  </svg>
-);
-
-export const SwapIcon = () => (
-  <svg viewBox="0 0 18 14">
-    <path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
-  </svg>
-);

src/features/preprocessors/crop/shared/meta.ts

@@ -10,4 +10,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference path="../../../../../missing-types.d.ts" />
+export interface Options {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export const defaultOptions: Options = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};

src/features/preprocessors/crop/worker/crop.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Options } from '../shared/meta';
+
+export default async function crop(
+  { data, width, height }: ImageData,
+  { top, right, bottom, left }: Options,
+): Promise<ImageData> {
+  const newWidth = width - left - right;
+  const newHeight = height - top - bottom;
+
+  const cols = width * 4;
+  const newCols = newWidth * 4;
+
+  const pixels = new Uint8ClampedArray(newHeight * newCols);
+  for (let y = 0; y < newHeight; y++) {
+    const x = left * 4;
+    const row = new Uint8ClampedArray(
+      data.buffer,
+      (top + y) * cols + x,
+      newCols,
+    );
+    pixels.set(row, y * newCols);
+  }
+
+  return new ImageData(pixels, newWidth, newHeight);
+}

src/features/preprocessors/flip/shared/meta.ts

@@ -10,4 +10,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference path="../../../../../missing-types.d.ts" />
+export interface Options {
+  horizontal: boolean;
+  vertical: boolean;
+}
+
+export const defaultOptions: Options = {
+  horizontal: false,
+  vertical: false,
+};

src/features/preprocessors/flip/worker/flip.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Options } from '../shared/meta';
+
+export default async function flip(
+  data: ImageData,
+  opts: Options,
+): Promise<ImageData> {
+  const { vertical, horizontal } = opts;
+  const source = data.data;
+  const len = source.length;
+  const pixels = new Uint8ClampedArray(len);
+  const { width, height } = data;
+
+  let i = 0;
+  let x = 0;
+  let y = 0;
+  const cols = width * 4;
+  while (i < len) {
+    let from = vertical ? (height - y) * cols + x * 4 : i;
+    if (horizontal) from = from - x * 4 + cols - x * 4;
+
+    pixels[i++] = source[from++];
+    pixels[i++] = source[from++];
+    pixels[i++] = source[from++];
+    pixels[i++] = source[from];
+
+    if (++x === width) {
+      x = 0;
+      y++;
+    }
+  }
+
+  return new ImageData(pixels, data.width, data.height);
+}

src/shared/prerendered-app/Intro/index.tsx

@@ -273,7 +273,7 @@ export default class Intro extends Component<Props, State> {
             )}
             <div
               class={style.loadImgContent}
-              style={{ visibility: __PRERENDER__ ? 'hidden' : '' }}
+              style={{ visibility: __PRERENDER__ ? 'hidden' : undefined }}
             >
               <button class={style.loadBtn} onClick={this.onOpenClick}>
                 <svg viewBox="0 0 24 24" class={style.loadIcon}>

src/shared/prerendered-app/colors.css

@@ -11,6 +11,7 @@ html {
   --less-light-gray: #bcbcbc;
   --medium-light-gray: #d1d1d1;
   --light-gray: #eaeaea;
+  --med-gray: #555;
   --dark-gray: #333;
   --dim-text: #343a3e;
   --dark-text: #142630;