Fix Firefox, remove dead code.

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

@@ -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}

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

@@ -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;
   }
 }
 

src/client/lazy-app/Compress/Transform/style.css

@@ -4,12 +4,8 @@
 
 .wrap {
   overflow: visible;
-
-  /*
-  & > canvas {
-    transition: transform 150ms ease;
-  }
-  */
+  contain: size layout;
+  will-change: initial !important;
 }
 
 .backdrop {
@@ -25,7 +21,6 @@
   & * {
     contain: strict;
   }
-  /* background: rgba(255, 0, 0, 0.5); */
 }
 
 .backdropArea {
@@ -283,15 +278,7 @@
   font-size: 1.2rem;
   cursor: pointer;
 
-  /*
-  @media (min-width: 600px) {
-    height: 39px;
-    padding: 0 16px;
-  }
-  */
-
   &:focus {
-    /* box-shadow: 0 0 0 2px var(--hot-pink); */
     box-shadow: 0 0 0 2px #fff;
     outline: none;
     z-index: 1;

src/features/preprocessors/flip/worker/flip.ts

@@ -28,7 +28,7 @@ export default async function flip(
   const cols = width * 4;
   while (i < len) {
     let from = vertical ? (height - y) * cols + x * 4 : i;
-    if (horizontal) from = from - x * 4 + cols - x * 4; // todo: reduce
+    if (horizontal) from = from - x * 4 + cols - x * 4;
 
     pixels[i++] = source[from++];
     pixels[i++] = source[from++];
@@ -41,28 +41,5 @@ export default async function flip(
     }
   }
 
-  /*
-  function swap(a: number, b: number) {
-    let tmp = pixels[a];
-    pixels[a] = pixels[b];
-    pixels[b] = tmp;
-  }
-  function swapRgba(a: number, b: number) {
-    swap(a, b);
-    swap(a+1, b+1);
-    swap(a+2, b+2);
-    swap(a+3, b+3);
-  }
-  const COLS = data.width * 4;
-  // for (let y = 0, y2 = (data.height - 1); y < y2; y+=4, y2-=4) {
-  for (let y = 0; y < data.height; y++) {
-    for (let x = 0, x2 = COLS - 4; x < x2; x+=4, x2-=4) {
-      const offsetX = y * COLS;
-      const offsetY = (opts.vertical ? (data.height - y) : y) * COLS;
-      const flippedX = opts.horizontal ? x2 : x;
-      swapRgba(offsetX + x, offsetY + x2);
-    }
-  }
-  */
   return new ImageData(pixels, data.width, data.height);
 }