diff --git a/README.md b/README.md index 81afda9f..8bcfb7b6 100644 --- a/README.md +++ b/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 diff --git a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts index 35b51831..c2cb7b95 100644 --- a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts +++ b/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(() => { diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx index 0da8f769..232fe667 100644 --- a/src/client/lazy-app/Compress/index.tsx +++ b/src/client/lazy-app/Compress/index.tsx @@ -604,6 +604,7 @@ export default class Compress extends Component { const resizeState: Partial = { 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, };