Suggestions from code review

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<HTMLCanvasElement> {

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

@@ -67,7 +67,6 @@ export default class Cropper extends Component<Props, State> {
   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<Props, State> {
   }
 
   componentWillUnmount() {
-    addEventListener('keydown', this.onKeyDown);
+    removeEventListener('keydown', this.onKeyDown);
-    addEventListener('keyup', this.onKeyUp);
+    removeEventListener('keyup', this.onKeyUp);
   }
 
   render({ size }: Props, { crop, pan }: State) {

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;

src/client/lazy-app/Compress/Transform/index.tsx

@@ -395,7 +395,6 @@ export default class Transform extends Component<Props, State> {
             onChange={this.onPinchZoomChange}
             ref={this.pinchZoom}
           >
-            {/* <Backdrop width={displayWidth} height={displayHeight} /> */}
             <div
               class={style.wrap}
               style={{
@@ -569,49 +568,3 @@ const SaveButton = ({ onClick }: { onClick: () => void }) => (
     <CheckmarkIcon class={style.icon} />
   </button>
 );
-
-interface BackdropProps {
-  width: number;
-  height: number;
-}
-
-/** @TODO this could at least use clip-path. It's too expensive this way. */
-class Backdrop extends Component<BackdropProps> {
-  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 (
-      <svg
-        class={style.backdrop}
-        preserveAspectRatio="xMidYMid meet"
-        width="100%"
-        height="100%"
-        shape-rendering="optimizeSpeed"
-      >
-        <mask id="bgmask">
-          <rect width="100%" height="100%" fill="white" />
-          <rect
-            style={transform}
-            width={width}
-            height={height}
-            x="50%"
-            y="50%"
-            fill="black"
-          />
-        </mask>
-        <rect
-          class={style.backdropArea}
-          width="100%"
-          height="100%"
-          mask="url(#bgmask)"
-        />
-      </svg>
-    );
-  }
-}

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;

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<Props, State> {
   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<Props, State> {
     this.setState({ transform: true });
   };
 
-  private onTransformUpdated = ({
+  private onTransformCommit = ({
     preprocessorState,
   }: { preprocessorState?: PreprocessorState } = {}) => {
     if (preprocessorState) {
@@ -1000,8 +998,8 @@ export default class Compress extends Component<Props, State> {
             mobileView={mobileView}
             source={source!}
             preprocessorState={preprocessorState!}
-            onSave={this.onTransformUpdated}
+            onSave={this.onTransformCommit}
-            onCancel={this.onTransformUpdated}
+            onCancel={this.onTransformCommit}
           />
         )}
       </div>