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

Fix Firefox, remove dead code.

Browse Source
This commit is contained in:
Jason Miller
2020-12-11 12:55:14 -05:00
parent 37f4d753f9
commit 82914f9cde
4 changed files with 23 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/client/lazy-app/Compress/Transform/Cropper/index.tsx
View File

@@ -1,4 +1,4 @@
import { h, Component, ComponentChildren } from 'preact';
import { h, Component, ComponentChildren, createRef } from 'preact';
import * as style from './style.css';
import 'add-css:./style.css';
import { shallowEqual } from 'client/lazy-app/util';
@@ -43,6 +43,8 @@ export default class Cropper extends Component<Props, State> {
pan: false,
};
private root = createRef<SVGSVGElement>();
shouldComponentUpdate(nextProps: Props, nextState: State) {
if (!shallowEqual(nextState, this.state)) return true;
const { size, scale, lockAspect, crop } = this.props;
@@ -55,6 +57,13 @@ export default class Cropper extends Component<Props, State> {
);
}
componentDidUpdate() {
requestAnimationFrame(() => {
if (!this.root.current) return;
getComputedStyle(this.root.current);
});
}
componentWillReceiveProps({ crop }: Props, nextState: State) {
const current = nextState.crop || this.state.crop;
if (crop !== this.props.crop && !shallowEqual(crop, current)) {
@@ -252,13 +261,13 @@ export default class Cropper extends Component<Props, State> {
addEventListener('keyup', this.onKeyUp);
}
render({ size, scale }: Props, { crop, pan }: State) {
render({ size }: Props, { crop, pan }: State) {
const x = crop.left;
const y = crop.top;
const width = size.width - crop.left - crop.right;
const height = size.height - crop.top - crop.bottom;
const s = (x: number) => x / (scale || 1);
const s = (x: number) => x.toFixed(3);
const clip = `polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, ${s(x)}px ${s(
y,
@@ -268,14 +277,11 @@ export default class Cropper extends Component<Props, State> {
return (
<svg
ref={this.root}
class={`${style.cropper} ${pan ? style.pan : ''}`}
width={size.width + 20}
height={size.height + 20}
viewBox={`-10 -10 ${size.width + 20} ${size.height + 20}`}
style={{
// this is hack to force style invalidation in Chrome
zoom: (scale || 1).toFixed(3),
}}
onPointerDown={this.onPointerDown}
onPointerMove={this.onPointerMove}
onPointerUp={this.onPointerUp}

20
src/client/lazy-app/Compress/Transform/Cropper/style.css
View File

@@ -1,15 +1,12 @@
.cropper {
position: absolute;
left: calc(-10px / var(--scale, 1));
top: calc(-10px / var(--scale, 1));
right: calc(-10px / var(--scale, 1));
bottom: calc(-10px / var(--scale, 1));
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
shape-rendering: crispedges;
overflow: hidden;
contain: strict;
transform-origin: 0 0;
transform: scale(calc(1 / var(--scale))) !important;
zoom: var(--scale, 1);
overflow: visible;
contain: layout size;
&.pan {
cursor: grabbing;
@@ -19,11 +16,8 @@
}
& > svg {
margin: -10px;
padding: 10px;
overflow: visible;
contain: strict;
/* overflow: visible; */
contain: layout size;
}
}