Preventing form defaults. Fixes #294.

Downgrade node-sass (fixes #319)

.babelrc

@@ -1,13 +0,0 @@
-{
-  "plugins": [
-    "transform-class-properties",
-    "transform-react-constant-elements",
-    "transform-react-remove-prop-types",
-    [
-      "transform-react-jsx",
-      {
-        "pragma": "h"
-      }
-    ]
-  ]
-}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Something is not working as expected
+labels: 
+
+---
+
+**Before you start**
+Please take a look at the [FAQ](https://github.com/GoogleChromeLabs/squoosh/wiki/FAQ) as well as the already opened issues! If nothing fits your problem, go ahead and fill out the following template:
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Version:**
+ - OS w/ version: [e.g. iOS 12]
+ - Browser w/ version [e.g. Chrome 70]
+ - Node version: [e.g. 10.11.0]
+ - npm version: [e.g. 6.4.1]
+
+**Is your issue related to the quality of image compression?**
+Please attach original and output images (you can drag & drop to attach). 
+- Original image 
+- Output image from Squoosh
+
+**Additional context, screenshots, screencasts**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,18 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+labels: 
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Does other service/app have this feature?**
+Add any service you know/use that has this feature (We want to know for research)
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.travis.yml

@@ -1,5 +1,7 @@
 language: node_js
 node_js:
 - node
+- 10
+- 8
 cache: npm
 script: npm run build || npm run build # scss ts definitions need to be generated before an actual build

README.md

@@ -1,5 +1,34 @@
-# Squoosh!
+# [Squoosh]!
 
-Squoosh will be an image compression web app that allows you to dive into the
+[Squoosh] is an image compression web app that allows you to dive into the advanced options provided
-advanced options provided by various image compressors.
+by various image compressors.
 
+# Privacy
+
+Google Analytics is used to record the following:
+
+* [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
+* Before and after image size once an image is downloaded. These values are rounded to the nearest
+  kilobyte.
+
+Image compression is handled locally; no additional data is sent to the server.
+
+# Building locally
+
+Clone the repo, and:
+
+```sh
+npm install
+npm run build
+```
+
+You'll get an error on first build because of [a stupid bug we haven't fixed
+yet](https://github.com/GoogleChromeLabs/squoosh/issues/251).
+
+You can run the development server with:
+
+```sh
+npm start
+```
+
+[Squoosh]: https://squoosh.app

codecs/README.md

@@ -11,6 +11,6 @@ $ npm install
 $ npm run build
 ```
 
-This will build two files: `<codec name>_<enc or dec>.js` and `<codec name>_<enc or dec>.wasm`. It will most likely be necessary to set [`Module["locateFile"]`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html#affecting-execution) to sucessfully load the `.wasm` file. When the `.js` file is loaded, a global `<codec name>_<enc or dec>` is created with the same API as an [Emscripten `Module`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html).
+This will build two files: `<codec name>_<enc or dec>.js` and `<codec name>_<enc or dec>.wasm`. It will most likely be necessary to set [`Module["locateFile"]`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html#affecting-execution) to successfully load the `.wasm` file. When the `.js` file is loaded, a global `<codec name>_<enc or dec>` is created with the same API as an [Emscripten `Module`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html).
 
 Each codec will document its API in its README.

global.d.ts

@@ -6,7 +6,8 @@ declare interface NodeModule {
 }
 
 declare interface Window {
-  STATE: any
+  STATE: any;
+  ga: typeof ga;
 }
 
 declare namespace JSX {

package.json

@@ -1,13 +1,13 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "0.1.0",
+  "version": "1.0.2",
   "license": "apache-2.0",
   "scripts": {
-    "start": "webpack serve --host 0.0.0.0 --hot",
+    "start": "webpack-dev-server --host 0.0.0.0 --hot",
     "build": "webpack -p",
-    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
+    "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
-    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
+    "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
   },
   "husky": {
     "hooks": {
@@ -15,43 +15,32 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^9.6.35",
+    "@types/node": "^10.12.6",
     "@types/pretty-bytes": "^5.1.0",
     "@types/webassembly-js-api": "0.0.1",
     "@webcomponents/custom-elements": "^1.2.1",
+    "@webpack-cli/serve": "^0.1.2",
     "assets-webpack-plugin": "^3.9.7",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-constant-elements": "^6.23.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
-    "babel-preset-env": "^1.7.0",
-    "babel-register": "^6.26.0",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^0.1.19",
+    "clean-webpack-plugin": "^1.0.0",
     "comlink": "^3.0.3",
-    "copy-webpack-plugin": "^4.5.3",
+    "copy-webpack-plugin": "^4.6.0",
     "critters-webpack-plugin": "^2.0.1",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.1",
     "ejs": "^2.6.1",
     "exports-loader": "^0.7.0",
     "file-drop-element": "^0.0.9",
-    "file-loader": "^1.1.11",
+    "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.1.2",
+    "husky": "^1.1.4",
     "idb-keyval": "^3.1.0",
     "if-env": "^1.0.4",
     "linkstate": "^1.1.1",
     "loader-utils": "^1.1.0",
     "mini-css-extract-plugin": "^0.4.4",
     "minimatch": "^3.0.4",
-    "node-sass": "^4.9.4",
+    "node-sass": "^4.9.0",
-    "optimize-css-assets-webpack-plugin": "^4.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "pinch-zoom-element": "^1.0.0",
     "pointer-tracker": "^2.0.3",
     "preact": "^8.3.1",
     "prerender-loader": "^1.2.0",
@@ -59,21 +48,22 @@
     "progress-bar-webpack-plugin": "^1.11.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^7.1.0",
-    "script-ext-html-webpack-plugin": "^2.0.1",
+    "script-ext-html-webpack-plugin": "^2.1.3",
-    "source-map-loader": "^0.2.3",
+    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.22.1",
+    "style-loader": "^0.23.1",
-    "ts-loader": "^4.4.2",
+    "terser-webpack-plugin": "^1.1.0",
+    "ts-loader": "^5.3.0",
     "tslint": "^5.11.0",
-    "tslint-config-airbnb": "^5.9.2",
+    "tslint-config-airbnb": "^5.11.0",
     "tslint-config-semistandard": "^7.0.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^2.9.2",
+    "typescript": "^3.1.6",
     "typings-for-css-modules-loader": "^1.7.0",
     "url-loader": "^1.1.2",
-    "webpack": "^4.19.1",
+    "webpack": "^4.25.1",
-    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^2.1.5",
+    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.5",
+    "webpack-dev-server": "^3.1.10",
     "worker-plugin": "^1.1.1"
   }
 }

src/codecs/imagequant/options.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, konami } from '../../lib/util';
+import { inputFieldValueAsNumber, konami, preventDefault } from '../../lib/util';
 import { QuantizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Expander from '../../components/expander';
@@ -42,7 +42,7 @@ export default class QuantizerOptions extends Component<Props, State> {
 
   render({ options }: Props, { extendedSettings }: State) {
     return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
         <Expander>
           {extendedSettings ?
             <label class={style.optionTextFirst}>

src/codecs/mozjpeg/options.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
+import { inputFieldChecked, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@@ -58,7 +58,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, State> {
     // I'm rendering both lossy and lossless forms, as it becomes much easier when
     // gathering the data.
     return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
         <div class={style.optionOneCell}>
           <Range
             name="quality"

src/codecs/optipng/options.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldValueAsNumber } from '../../lib/util';
+import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions } from './encoder-meta';
 import Range from '../../components/range';
 import * as style from '../../components/Options/style.scss';
@@ -23,7 +23,7 @@ export default class OptiPNGEncoderOptions extends Component<Props, {}> {
 
   render({ options }: Props) {
     return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
         <div class={style.optionOneCell}>
           <Range
             name="level"

src/codecs/resize/options.tsx

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
 import { bind, linkRef } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, inputFieldValue } from '../../lib/util';
+import { inputFieldValueAsNumber, inputFieldValue, preventDefault } from '../../lib/util';
 import { ResizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@@ -78,7 +78,7 @@ export default class ResizerOptions extends Component<Props, State> {
 
   render({ options, isVector }: Props, { maintainAspect }: State) {
     return (
-      <form ref={linkRef(this, 'form')} class={style.optionsSection}>
+      <form ref={linkRef(this, 'form')} class={style.optionsSection} onSubmit={preventDefault}>
         <label class={style.optionTextFirst}>
           Method:
           <Select

src/codecs/webp/options.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldCheckedAsNumber, inputFieldValueAsNumber } from '../../lib/util';
+import { inputFieldCheckedAsNumber, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions, WebPImageHint } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@@ -319,7 +319,7 @@ export default class WebPEncoderOptions extends Component<Props, State> {
     // I'm rendering both lossy and lossless forms, as it becomes much easier when
     // gathering the data.
     return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
         <label class={style.optionInputFirst}>
           <Checkbox
             name="lossless"

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

@@ -0,0 +1,374 @@
+import PointerTracker, { Pointer } from 'pointer-tracker';
+import './styles.css';
+
+interface Point {
+  clientX: number;
+  clientY: number;
+}
+
+interface ChangeOptions {
+  /**
+   * Fire a 'change' event if values are different to current values
+   */
+  allowChangeEvent?: boolean;
+}
+
+interface ApplyChangeOpts extends ChangeOptions {
+  panX?: number;
+  panY?: number;
+  scaleDiff?: number;
+  originX?: number;
+  originY?: number;
+}
+
+interface SetTransformOpts extends ChangeOptions {
+  scale?: number;
+  x?: number;
+  y?: number;
+}
+
+type ScaleRelativeToValues = 'container' | 'content';
+
+export interface ScaleToOpts extends ChangeOptions {
+  /** Transform origin. Can be a number, or string percent, eg "50%" */
+  originX?: number | string;
+  /** Transform origin. Can be a number, or string percent, eg "50%" */
+  originY?: number | string;
+  /** Should the transform origin be relative to the container, or content? */
+  relativeTo?: ScaleRelativeToValues;
+}
+
+function getDistance(a: Point, b?: Point): number {
+  if (!b) return 0;
+  return Math.sqrt((b.clientX - a.clientX) ** 2 + (b.clientY - a.clientY) ** 2);
+}
+
+function getMidpoint(a: Point, b?: Point): Point {
+  if (!b) return a;
+
+  return {
+    clientX: (a.clientX + b.clientX) / 2,
+    clientY: (a.clientY + b.clientY) / 2,
+  };
+}
+
+function getAbsoluteValue(value: string | number, max: number): number {
+  if (typeof value === 'number') return value;
+
+  if (value.trimRight().endsWith('%')) {
+    return max * parseFloat(value) / 100;
+  }
+  return parseFloat(value);
+}
+
+// I'd rather use DOMMatrix/DOMPoint here, but the browser support isn't good enough.
+// Given that, better to use something everything supports.
+let cachedSvg: SVGSVGElement;
+
+function getSVG(): SVGSVGElement {
+  return cachedSvg || (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
+}
+
+function createMatrix(): SVGMatrix {
+  return getSVG().createSVGMatrix();
+}
+
+function createPoint(): SVGPoint {
+  return getSVG().createSVGPoint();
+}
+
+const MIN_SCALE = 0.01;
+
+export default class PinchZoom extends HTMLElement {
+  // The element that we'll transform.
+  // Ideally this would be shadow DOM, but we don't have the browser
+  // support yet.
+  private _positioningEl?: Element;
+  // Current transform.
+  private _transform: SVGMatrix = createMatrix();
+
+  constructor() {
+    super();
+
+    // Watch for children changes.
+    // Note this won't fire for initial contents,
+    // so _stageElChange is also called in connectedCallback.
+    new MutationObserver(() => this._stageElChange())
+      .observe(this, { childList: true });
+
+    // Watch for pointers
+    const pointerTracker: PointerTracker = new PointerTracker(this, {
+      start: (pointer, event) => {
+        // We only want to track 2 pointers at most
+        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl) return false;
+        event.preventDefault();
+        return true;
+      },
+      move: (previousPointers) => {
+        this._onPointerMove(previousPointers, pointerTracker.currentPointers);
+      },
+    });
+
+    this.addEventListener('wheel', event => this._onWheel(event));
+  }
+
+  connectedCallback() {
+    this._stageElChange();
+  }
+
+  get x() {
+    return this._transform.e;
+  }
+
+  get y() {
+    return this._transform.f;
+  }
+
+  get scale() {
+    return this._transform.a;
+  }
+
+  /**
+   * Change the scale, adjusting x/y by a given transform origin.
+   */
+  scaleTo(scale: number, opts: ScaleToOpts = {}) {
+    let {
+      originX = 0,
+      originY = 0,
+    } = opts;
+
+    const {
+      relativeTo = 'content',
+      allowChangeEvent = false,
+    } = opts;
+
+    const relativeToEl = (relativeTo === 'content' ? this._positioningEl : this);
+
+    // No content element? Fall back to just setting scale
+    if (!relativeToEl || !this._positioningEl) {
+      this.setTransform({ scale, allowChangeEvent });
+      return;
+    }
+
+    const rect = relativeToEl.getBoundingClientRect();
+    originX = getAbsoluteValue(originX, rect.width);
+    originY = getAbsoluteValue(originY, rect.height);
+
+    if (relativeTo === 'content') {
+      originX += this.x;
+      originY += this.y;
+    } else {
+      const currentRect = this._positioningEl.getBoundingClientRect();
+      originX -= currentRect.left;
+      originY -= currentRect.top;
+    }
+
+    this._applyChange({
+      allowChangeEvent,
+      originX,
+      originY,
+      scaleDiff: scale / this.scale,
+    });
+  }
+
+  /**
+   * Update the stage with a given scale/x/y.
+   */
+  setTransform(opts: SetTransformOpts = {}) {
+    const {
+      scale = this.scale,
+      allowChangeEvent = false,
+    } = opts;
+
+    let {
+      x = this.x,
+      y = this.y,
+    } = opts;
+
+    // If we don't have an element to position, just set the value as given.
+    // We'll check bounds later.
+    if (!this._positioningEl) {
+      this._updateTransform(scale, x, y, allowChangeEvent);
+      return;
+    }
+
+    // Get current layout
+    const thisBounds = this.getBoundingClientRect();
+    const positioningElBounds = this._positioningEl.getBoundingClientRect();
+
+    // Not displayed. May be disconnected or display:none.
+    // Just take the values, and we'll check bounds later.
+    if (!thisBounds.width || !thisBounds.height) {
+      this._updateTransform(scale, x, y, allowChangeEvent);
+      return;
+    }
+
+    // Create points for _positioningEl.
+    let topLeft = createPoint();
+    topLeft.x = positioningElBounds.left - thisBounds.left;
+    topLeft.y = positioningElBounds.top - thisBounds.top;
+    let bottomRight = createPoint();
+    bottomRight.x = positioningElBounds.width + topLeft.x;
+    bottomRight.y = positioningElBounds.height + topLeft.y;
+
+    // Calculate the intended position of _positioningEl.
+    const matrix = createMatrix()
+      .translate(x, y)
+      .scale(scale)
+      // Undo current transform
+      .multiply(this._transform.inverse());
+
+    topLeft = topLeft.matrixTransform(matrix);
+    bottomRight = bottomRight.matrixTransform(matrix);
+
+    // Ensure _positioningEl can't move beyond out-of-bounds.
+    // Correct for x
+    if (topLeft.x > thisBounds.width) {
+      x += thisBounds.width - topLeft.x;
+    } else if (bottomRight.x < 0) {
+      x += -bottomRight.x;
+    }
+
+    // Correct for y
+    if (topLeft.y > thisBounds.height) {
+      y += thisBounds.height - topLeft.y;
+    } else if (bottomRight.y < 0) {
+      y += -bottomRight.y;
+    }
+
+    this._updateTransform(scale, x, y, allowChangeEvent);
+  }
+
+  /**
+   * Update transform values without checking bounds. This is only called in setTransform.
+   */
+  private _updateTransform(scale: number, x: number, y: number, allowChangeEvent: boolean) {
+    // Avoid scaling to zero
+    if (scale < MIN_SCALE) return;
+
+    // Return if there's no change
+    if (
+      scale === this.scale &&
+      x === this.x &&
+      y === this.y
+    ) return;
+
+    this._transform.e = x;
+    this._transform.f = y;
+    this._transform.d = this._transform.a = scale;
+
+    this.style.setProperty('--x', this.x + 'px');
+    this.style.setProperty('--y', this.y + 'px');
+    this.style.setProperty('--scale', this.scale + '');
+
+    if (allowChangeEvent) {
+      const event = new Event('change', { bubbles: true });
+      this.dispatchEvent(event);
+    }
+  }
+
+  /**
+   * Called when the direct children of this element change.
+   * Until we have have shadow dom support across the board, we
+   * require a single element to be the child of <pinch-zoom>, and
+   * that's the element we pan/scale.
+   */
+  private _stageElChange() {
+    this._positioningEl = undefined;
+
+    if (this.children.length === 0) return;
+
+    this._positioningEl = this.children[0];
+
+    if (this.children.length > 1) {
+      console.warn('<pinch-zoom> must not have more than one child.');
+    }
+
+    // Do a bounds check
+    this.setTransform({ allowChangeEvent: true });
+  }
+
+  private _onWheel(event: WheelEvent) {
+    if (!this._positioningEl) return;
+    event.preventDefault();
+
+    const currentRect = this._positioningEl.getBoundingClientRect();
+    let { deltaY } = event;
+    const { ctrlKey, deltaMode } = event;
+
+    if (deltaMode === 1) { // 1 is "lines", 0 is "pixels"
+      // Firefox uses "lines" for some types of mouse
+      deltaY *= 15;
+    }
+
+    // ctrlKey is true when pinch-zooming on a trackpad.
+    const divisor = ctrlKey ? 100 : 300;
+    const scaleDiff = 1 - deltaY / divisor;
+
+    this._applyChange({
+      scaleDiff,
+      originX: event.clientX - currentRect.left,
+      originY: event.clientY - currentRect.top,
+      allowChangeEvent: true,
+    });
+  }
+
+  private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) {
+    if (!this._positioningEl) return;
+
+    // Combine next points with previous points
+    const currentRect = this._positioningEl.getBoundingClientRect();
+
+    // For calculating panning movement
+    const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]);
+    const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]);
+
+    // Midpoint within the element
+    const originX = prevMidpoint.clientX - currentRect.left;
+    const originY = prevMidpoint.clientY - currentRect.top;
+
+    // Calculate the desired change in scale
+    const prevDistance = getDistance(previousPointers[0], previousPointers[1]);
+    const newDistance = getDistance(currentPointers[0], currentPointers[1]);
+    const scaleDiff = prevDistance ? newDistance / prevDistance : 1;
+
+    this._applyChange({
+      originX, originY, scaleDiff,
+      panX: newMidpoint.clientX - prevMidpoint.clientX,
+      panY: newMidpoint.clientY - prevMidpoint.clientY,
+      allowChangeEvent: true,
+    });
+  }
+
+  /** Transform the view & fire a change event */
+  private _applyChange(opts: ApplyChangeOpts = {}) {
+    const {
+      panX = 0, panY = 0,
+      originX = 0, originY = 0,
+      scaleDiff = 1,
+      allowChangeEvent = false,
+    } = opts;
+
+    const matrix = createMatrix()
+      // Translate according to panning.
+      .translate(panX, panY)
+      // Scale about the origin.
+      .translate(originX, originY)
+      // Apply current translate
+      .translate(this.x, this.y)
+      .scale(scaleDiff)
+      .translate(-originX, -originY)
+      // Apply current scale.
+      .scale(this.scale);
+
+    // Convert the transform into basic translate & scale.
+    this.setTransform({
+      allowChangeEvent,
+      scale: matrix.a,
+      x: matrix.e,
+      y: matrix.f,
+    });
+  }
+}
+
+customElements.define('pinch-zoom', PinchZoom);

src/components/Output/custom-els/PinchZoom/missing-types.d.ts

@@ -0,0 +1,16 @@
+declare interface CSSStyleDeclaration {
+  willChange: string | null;
+}
+
+// TypeScript, you make me sad.
+// https://github.com/Microsoft/TypeScript/issues/18756
+interface Window {
+  PointerEvent: typeof PointerEvent;
+  Touch: typeof Touch;
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'pinch-zoom': HTMLAttributes;
+  }
+}

src/components/Output/custom-els/PinchZoom/styles.css

@@ -0,0 +1,14 @@
+pinch-zoom {
+  display: block;
+  overflow: hidden;
+  touch-action: none;
+  --scale: 1;
+  --x: 0;
+  --y: 0;
+}
+
+pinch-zoom > * {
+  transform: translate(var(--x), var(--y)) scale(var(--scale));
+  transform-origin: 0 0;
+  will-change: transform;
+}

src/components/Output/index.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
-import PinchZoom, { ScaleToOpts } from 'pinch-zoom-element/lib';
+import PinchZoom, { ScaleToOpts } from './custom-els/PinchZoom';
-import 'pinch-zoom-element/lib';
+import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.scss';
 import { bind, linkRef } from '../../lib/initial-util';
@@ -48,6 +48,15 @@ export default class Output extends Component<Props, State> {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
 
+    // Reset the pinch zoom, which may have an position set from the previous view, after pressing
+    // the back button.
+    this.pinchZoomLeft!.setTransform({
+      allowChangeEvent: true,
+      x: 0,
+      y: 0,
+      scale: 1,
+    });
+
     if (this.canvasLeft && leftDraw) {
       drawDataToCanvas(this.canvasLeft, leftDraw);
     }

src/components/Output/missing-types.d.ts

@@ -1,5 +0,0 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    'pinch-zoom': HTMLAttributes;
-  }
-}

src/components/compress/custom-els/MultiPanel/index.ts

@@ -103,7 +103,7 @@ export default class MultiPanel extends HTMLElement {
 
   // KeyDown event handler
   private _onKeyDown(event: KeyboardEvent) {
-    const selectedEl = document.activeElement;
+    const selectedEl = document.activeElement!;
     const heading = getClosestHeading(selectedEl);
 
     // if keydown event is not on heading element, ignore
@@ -252,8 +252,8 @@ export default class MultiPanel extends HTMLElement {
       return this.firstElementChild as HTMLElement;
     }
     // previous Element of active Element is previous Content,
-    // previous Element of previous Content  is previousHeading
+    // previous Element of previous Content is previousHeading
-    const previousContent = document.activeElement.previousElementSibling;
+    const previousContent = document.activeElement!.previousElementSibling;
     if (previousContent) {
       return previousContent.previousElementSibling as HTMLElement;
     }
@@ -263,7 +263,7 @@ export default class MultiPanel extends HTMLElement {
   private _nextHeading() {
     // activeElement would be the currently selected heading
     // 2 elemements after that would be the next heading.
-    const nextContent = document.activeElement.nextElementSibling;
+    const nextContent = document.activeElement!.nextElementSibling;
     if (nextContent) {
       return nextContent.nextElementSibling as HTMLElement;
     }

src/components/intro/index.tsx

@@ -129,6 +129,11 @@ export default class Intro extends Component<Props, State> {
         <ul class={style.relatedLinks}>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/">View the code</a></li>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/issues">Report a bug</a></li>
+          <li>
+            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/master/README.md#privacy">
+              Privacy
+            </a>
+          </li>
         </ul>
       </div>
     );

src/components/intro/style.scss

@@ -48,6 +48,7 @@
 
 .logo {
   composes: abs-fill from '../../lib/util.scss';
+  pointer-events: none;
 }
 
 .open-image-guide {
@@ -144,6 +145,7 @@
 
 .demo-icon {
   composes: abs-fill from '../../lib/util.scss';
+  pointer-events: none;
 }
 
 .demo-description {

src/components/range/index.tsx

@@ -13,6 +13,8 @@ export default class Range extends Component<Props, State> {
   @bind
   private onTextInput(event: Event) {
     const input = event.target as HTMLInputElement;
+    const value = input.value.trim();
+    if (!value) return;
     this.rangeWc!.value = input.value;
     const { onInput } = this.props;
     if (onInput) onInput(event);

src/components/results/index.tsx

@@ -60,11 +60,16 @@ export default class Results extends Component<Props, State> {
 
   @bind
   onDownload() {
+    // GA can’t do floats. So we round to ints. We're deliberately rounding to nearest kilobyte to
+    // avoid cases where exact image sizes leak something interesting about the user.
+    const before = Math.round(this.props.source!.file.size / 1024);
+    const after = Math.round(this.props.imageFile!.size / 1024);
+    const change = Math.round(after / before * 1000);
+
     ga('send', 'event', 'compression', 'download', {
-      // GA can’t do floats. So we round to ints.
+      metric1: before,
-      metric1: Math.floor(this.props.source!.file.size),
+      metric2: after,
-      metric2: Math.floor(this.props.imageFile!.size),
+      metric3: change,
-      metric3: Math.floor(this.props.imageFile!.size / this.props.source!.file.size * 1000),
     });
   }
 

src/index.ts

@@ -13,11 +13,13 @@ if (!('customElements' in self)) {
   init();
 }
 
-window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
+if (typeof PRERENDER === 'undefined') {
-ga('create', 'UA-128752250-1', 'auto');
+  window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
-ga('set', 'transport', 'beacon');
+  ga('create', 'UA-128752250-1', 'auto');
-ga('send', 'pageview');
+  ga('set', 'transport', 'beacon');
-  // Load the GA script
+  ga('send', 'pageview');
-const s = document.createElement('script');
+    // Load the GA script
-s.src = 'https://www.google-analytics.com/analytics.js';
+  const s = document.createElement('script');
-document.head!.appendChild(s);
+  s.src = 'https://www.google-analytics.com/analytics.js';
+  document.head!.appendChild(s);
+}

src/lib/offliner.ts

@@ -63,6 +63,10 @@ export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
     location.reload();
   });
 
+  // If we don't have a controller, we don't need to check for updates – we've just loaded from the
+  // network.
+  if (!hasController) return;
+
   const reg = await navigator.serviceWorker.getRegistration();
   // Service worker not registered yet.
   if (!reg) return;

src/lib/util.ts

@@ -297,3 +297,10 @@ export async function transitionHeight(el: HTMLElement, opts: TransitionOptions)
     el.addEventListener('transitioncancel', listener);
   });
 }
+
+/**
+ * Simple event listener that prevents the default.
+ */
+export function preventDefault(event: Event) {
+  event.preventDefault();
+}

src/manifest.json

@@ -3,7 +3,7 @@
   "short_name": "Squoosh",
   "start_url": "/",
   "display": "standalone",
-  "orientation": "portrait",
+  "orientation": "any",
   "background_color": "#fff",
   "theme_color": "#f78f21",
   "icons": [

src/missing-types.d.ts

@@ -39,7 +39,3 @@ declare var ga: {
   (...args: any[]): void;
   q: any[];
 };
-
-interface Window {
-  ga: typeof ga;
-}

webpack.config.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const CleanPlugin = require('clean-webpack-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -141,8 +141,8 @@ module.exports = function (_, env) {
         },
         {
           test: /\.tsx?$/,
-          loader: 'ts-loader',
+          exclude: nodeModules,
-          options: { allowTsInNodeModules: true }
+          loader: 'ts-loader'
         },
         {
           // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
@@ -226,7 +226,7 @@ module.exports = function (_, env) {
       // For now we're not doing SSR.
       new HtmlPlugin({
         filename: path.join(__dirname, 'build/index.html'),
-        template: '!!prerender-loader?string!src/index.html',
+        template: isProd ? '!!prerender-loader?string!src/index.html' : 'src/index.html',
         minify: isProd && {
           collapseWhitespace: true,
           removeScriptTypeAttributes: true,
@@ -290,12 +290,10 @@ module.exports = function (_, env) {
 
     optimization: {
       minimizer: [
-        new UglifyJsPlugin({
+        new TerserPlugin({
           sourceMap: isProd,
-          extractComments: {
+          extractComments: 'build/licenses.txt',
-            file: 'build/licenses.txt'
+          terserOptions: {
-          },
-          uglifyOptions: {
             compress: {
               inline: 1
             },