external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-13 09:17:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vertical two-up (#100)

Browse Source 
* Fixing bad property name.

* Allowing two-up to work vertically at smaller widths.

* Switching to orientation attr

* Fixing type and getter/setter behaviour
This commit is contained in:
Jake Archibald
2018-07-20 09:32:18 +01:00
committed by GitHub
parent cc9d01a9ab
commit 6e8f8bbe41
4 changed files with 115 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,21 +6,31 @@ import * as style from './style.scss';
import { bind, drawBitmapToCanvas, linkRef } from '../../lib/util';
import { twoUpHandle } from './custom-els/TwoUp/styles.css';
type Props = {
leftImg: ImageBitmap,
rightImg: ImageBitmap,
};
interface Props {
leftImg: ImageBitmap;
rightImg: ImageBitmap;
}
type State = {};
interface State {
verticalTwoUp: boolean;
}
export default class Output extends Component<Props, State> {
state: State = {};
widthQuery = window.matchMedia('(min-width: 500px)');
state: State = {
verticalTwoUp: !this.widthQuery.matches,
};
canvasLeft?: HTMLCanvasElement;
canvasRight?: HTMLCanvasElement;
pinchZoomLeft?: PinchZoom;
pinchZoomRight?: PinchZoom;
retargetedEvents = new WeakSet<Event>();
constructor() {
super();
this.widthQuery.addListener(this.onMobileWidthChange);
}
componentDidMount() {
if (this.canvasLeft) {
drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
@@ -39,8 +49,15 @@ export default class Output extends Component<Props, State> {
}
}
shouldComponentUpdate(nextProps: Props) {
return this.props.leftImg !== nextProps.leftImg || this.props.rightImg !== nextProps.rightImg;
shouldComponentUpdate(nextProps: Props, nextState: State) {
return this.props.leftImg !== nextProps.leftImg ||
this.props.rightImg !== nextProps.rightImg ||
this.state.verticalTwoUp !== nextState.verticalTwoUp;
}
@bind
onMobileWidthChange() {
this.setState({ verticalTwoUp: !this.widthQuery.matches });
}
@bind
@@ -80,10 +97,11 @@ export default class Output extends Component<Props, State> {
this.pinchZoomLeft.dispatchEvent(clonedEvent);
}
render({ leftImg, rightImg }: Props, { }: State) {
render({ leftImg, rightImg }: Props, { verticalTwoUp }: State) {
return (
<div class={style.output}>
<two-up
orientation={verticalTwoUp ? 'vertical' : 'horizontal'}
// Event redirecting. See onRetargetableEvent.
onTouchStartCapture={this.onRetargetableEvent}
onTouchEndCapture={this.onRetargetableEvent}