Merge branch 'dev' into banding-fix

README.md

@@ -30,7 +30,7 @@ npm run build
 You can run the development server with:
 
 ```sh
-npm start
+npm run dev
 ```
 
 [squoosh]: https://squoosh.app

src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts

@@ -68,6 +68,8 @@ export default class TwoUp extends HTMLElement {
         );
       },
     });
+
+    window.addEventListener('keydown', event => this._onKeyDown(event));
   }
 
   connectedCallback() {
@@ -94,6 +96,29 @@ export default class TwoUp extends HTMLElement {
     }
   }
 
+  // KeyDown event handler
+  private _onKeyDown(event: KeyboardEvent) {
+    if (event.code === 'Digit1' || event.code === 'Numpad1') {
+      this._position = 0;
+      this._relativePosition = 0;
+      this._setPosition();
+    } else if (event.code === 'Digit2' || event.code === 'Numpad2') {
+      const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
+      const bounds = this.getBoundingClientRect();
+
+      this._position = bounds[dimensionAxis] / 2;
+      this._relativePosition = (this._position / bounds[dimensionAxis]) / 2;
+      this._setPosition();
+    } else if (event.code === 'Digit3' || event.code === 'Numpad3') {
+      const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
+      const bounds = this.getBoundingClientRect();
+
+      this._position = bounds[dimensionAxis];
+      this._relativePosition = this._position / bounds[dimensionAxis];
+      this._setPosition();
+    }
+  }
+
   private _resetPosition() {
     // Set the initial position of the handle.
     requestAnimationFrame(() => {

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

@@ -604,6 +604,7 @@ export default class Compress extends Component<Props, State> {
             const resizeState: Partial<ProcessorState['resize']> = {
               width: decoded.width,
               height: decoded.height,
+              method: vectorImage ? 'vector' : 'lanczos3',
               // Disable resizing, to make it clearer to the user that something changed here
               enabled: false,
             };