From 7918938d8a69488889927d99a2a1a00251689ffa Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Mon, 7 Jun 2021 14:59:26 -0400 Subject: [PATCH] Suggestions from code review --- src/client/lazy-app/Compress/CanvasImage.tsx | 2 +- .../Compress/Transform/Cropper/index.tsx | 5 +- .../Compress/Transform/Cropper/style.css | 8 ---- .../lazy-app/Compress/Transform/index.tsx | 47 ------------------- .../lazy-app/Compress/Transform/style.css | 19 -------- src/client/lazy-app/Compress/index.tsx | 12 ++--- 6 files changed, 8 insertions(+), 85 deletions(-) diff --git a/src/client/lazy-app/Compress/CanvasImage.tsx b/src/client/lazy-app/Compress/CanvasImage.tsx index e43b4ba9..86818367 100644 --- a/src/client/lazy-app/Compress/CanvasImage.tsx +++ b/src/client/lazy-app/Compress/CanvasImage.tsx @@ -1,5 +1,5 @@ import { h, Component, createRef } from 'preact'; -import { drawDataToCanvas } from '../util'; +import { drawDataToCanvas } from '../util/canvas'; export interface CanvasImageProps extends h.JSX.HTMLAttributes { diff --git a/src/client/lazy-app/Compress/Transform/Cropper/index.tsx b/src/client/lazy-app/Compress/Transform/Cropper/index.tsx index 98c35c5a..0baf7b9f 100644 --- a/src/client/lazy-app/Compress/Transform/Cropper/index.tsx +++ b/src/client/lazy-app/Compress/Transform/Cropper/index.tsx @@ -67,7 +67,6 @@ export default class Cropper extends Component { componentWillReceiveProps({ crop }: Props, nextState: State) { const current = nextState.crop || this.state.crop; if (crop !== this.props.crop && !shallowEqual(crop, current)) { - // this.setState({ crop: nextProps.crop }); this.setCrop(crop); } } @@ -257,8 +256,8 @@ export default class Cropper extends Component { } componentWillUnmount() { - addEventListener('keydown', this.onKeyDown); - addEventListener('keyup', this.onKeyUp); + removeEventListener('keydown', this.onKeyDown); + removeEventListener('keyup', this.onKeyUp); } render({ size }: Props, { crop, pan }: State) { diff --git a/src/client/lazy-app/Compress/Transform/Cropper/style.css b/src/client/lazy-app/Compress/Transform/Cropper/style.css index 640d71e6..f7ae5981 100644 --- a/src/client/lazy-app/Compress/Transform/Cropper/style.css +++ b/src/client/lazy-app/Compress/Transform/Cropper/style.css @@ -35,15 +35,7 @@ /* Accept pointer input even though this is unpainted transparent */ pointer-events: all; cursor: move; - - /* animation: ants 1s linear forwards infinite; */ } -/* -@keyframes ants { - 0% { stroke-dashoffset: 0; } - 100% { stroke-dashoffset: -12; } -} -*/ .edge { fill: #aaa; diff --git a/src/client/lazy-app/Compress/Transform/index.tsx b/src/client/lazy-app/Compress/Transform/index.tsx index 2bbf461a..dfd53a2b 100644 --- a/src/client/lazy-app/Compress/Transform/index.tsx +++ b/src/client/lazy-app/Compress/Transform/index.tsx @@ -395,7 +395,6 @@ export default class Transform extends Component { onChange={this.onPinchZoomChange} ref={this.pinchZoom} > - {/* */}
void }) => ( ); - -interface BackdropProps { - width: number; - height: number; -} - -/** @TODO this could at least use clip-path. It's too expensive this way. */ -class Backdrop extends Component { - shouldComponentUpdate({ width, height }: BackdropProps) { - return width !== this.props.width || height !== this.props.height; - } - - render({ width, height }: BackdropProps) { - const transform = - `transform-origin: 50% 50%; transform: translate(var(--x), var(--y)) ` + - `translate(-${width / 2}px, -${height / 2}px) ` + - `scale(calc(var(--scale, 1) * 0.99999));`; - return ( - - - - - - - - ); - } -} diff --git a/src/client/lazy-app/Compress/Transform/style.css b/src/client/lazy-app/Compress/Transform/style.css index 3d35282c..85cbeffd 100644 --- a/src/client/lazy-app/Compress/Transform/style.css +++ b/src/client/lazy-app/Compress/Transform/style.css @@ -14,25 +14,6 @@ will-change: initial !important; } -.backdrop { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - transform: none !important; - will-change: initial !important; - contain: strict; - - & * { - contain: strict; - } -} - -.backdropArea { - fill: rgba(0, 0, 0, 0.25); -} - .pinch-zoom { composes: abs-fill from global; outline: none; diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx index 2b6fca8a..4ba6769c 100644 --- a/src/client/lazy-app/Compress/index.tsx +++ b/src/client/lazy-app/Compress/index.tsx @@ -138,7 +138,7 @@ async function preprocessImage( let processedData = data; const { rotate, flip, crop } = preprocessorState; - if (flip && (flip.horizontal || flip.vertical)) { + if (flip.horizontal || flip.vertical) { processedData = await workerBridge.flip(signal, processedData, flip); } @@ -146,7 +146,7 @@ async function preprocessImage( processedData = await workerBridge.rotate(signal, processedData, rotate); } - if (crop && (crop.left || crop.top || crop.right || crop.bottom)) { + if (crop.left || crop.top || crop.right || crop.bottom) { processedData = await workerBridge.crop(signal, processedData, crop); } @@ -292,8 +292,6 @@ export default class Compress extends Component { state: State = { source: undefined, loading: false, - /** @TODO remove this */ - // transform: true, transform: false, preprocessorState: defaultPreprocessorState, sides: [ @@ -393,7 +391,7 @@ export default class Compress extends Component { this.setState({ transform: true }); }; - private onTransformUpdated = ({ + private onTransformCommit = ({ preprocessorState, }: { preprocessorState?: PreprocessorState } = {}) => { if (preprocessorState) { @@ -1000,8 +998,8 @@ export default class Compress extends Component { mobileView={mobileView} source={source!} preprocessorState={preprocessorState!} - onSave={this.onTransformUpdated} - onCancel={this.onTransformUpdated} + onSave={this.onTransformCommit} + onCancel={this.onTransformCommit} /> )}