external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-14 01:37:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Creating fallbacks for all ImageBitmap usage & refactoring. (#175)

Browse Source 
Fixes #173
This commit is contained in:
Jake Archibald
2018-09-27 14:44:54 +01:00
committed by GitHub
parent 1b630a092f
commit c9fe5ffbcf
11 changed files with 2085 additions and 2197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Output/index.tsx
View File

@@ -3,14 +3,14 @@ import PinchZoom, { ScaleToOpts } from './custom-els/PinchZoom';
import './custom-els/PinchZoom';
import './custom-els/TwoUp';
import * as style from './style.scss';
import { bind, shallowEqual, drawBitmapToCanvas, linkRef } from '../../lib/util';
import { bind, shallowEqual, drawDataToCanvas, linkRef } from '../../lib/util';
import { ToggleIcon, AddIcon, RemoveIcon } from '../../lib/icons';
import { twoUpHandle } from './custom-els/TwoUp/styles.css';
interface Props {
orientation: 'horizontal' | 'vertical';
leftImg: ImageBitmap;
rightImg: ImageBitmap;
leftImg: ImageData;
rightImg: ImageData;
imgWidth: number;
imgHeight: number;
leftImgContain: boolean;
@@ -45,19 +45,19 @@ export default class Output extends Component<Props, State> {
componentDidMount() {
if (this.canvasLeft) {
drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
drawDataToCanvas(this.canvasLeft, this.props.leftImg);
}
if (this.canvasRight) {
drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
drawDataToCanvas(this.canvasRight, this.props.rightImg);
}
}
componentDidUpdate(prevProps: Props, prevState: State) {
if (prevProps.leftImg !== this.props.leftImg && this.canvasLeft) {
drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
drawDataToCanvas(this.canvasLeft, this.props.leftImg);
}
if (prevProps.rightImg !== this.props.rightImg && this.canvasRight) {
drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
drawDataToCanvas(this.canvasRight, this.props.rightImg);
}
}
@@ -135,7 +135,7 @@ export default class Output extends Component<Props, State> {
if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
// If the event is on the handle of the two-up, let it through,
// unless it's a wheel event, in which case always let it through.
if (event.type !== 'wheel' && targetEl.closest('.' + twoUpHandle)) return;
if (event.type !== 'wheel' && targetEl.closest(`.${twoUpHandle}`)) return;
// If we've already retargeted this event, let it through.
if (this.retargetedEvents.has(event)) return;
// Stop the event in its tracks.