Repository: usememos/memos
File: web/src/components/PreviewImageDialog.tsx (TypeScript)

Code before:
    setImgAngle(curImgAngle);
  };

  const handleImgContainerScroll = (event: React.WheelEvent) => {
    const offsetX = event.nativeEvent.offsetX;
    const offsetY = event.nativeEvent.offsetY;
    setImgTransformOrigin({
      x: offsetX,
      y: offsetY,
    });
    if (event.deltaY < 0 && imgScale < MAX_SCALE) {
      const enlargeRate = imgScale + SCALE_UNIT;
      setImgScale(enlargeRate);
    } else if (event.deltaY > 0 && imgScale > MIN_SCALE) {
      const shrinkRate = imgScale - SCALE_UNIT;
      setImgScale(shrinkRate);
    }
  };

  const getImageRotateClass = () => {
    return imgAngle === 90 ? "rotate-90" : imgAngle === 180 ? "rotate-180" : imgAngle === 270 ? "rotate-270" : "rotate-0";
  };

  const getImageScaleStyle = () => {
    return {
      transform: `scale(${imgScale})`,
      transformOrigin: `${imgTransformOrigin.x}px ${imgTransformOrigin.y}px`,
    };
  };

  return (
    <>
      <div className="btns-container">
        <button className="btn" onClick={handleCloseBtnClick}>
          <Icon.X className="icon-img" />
        </button>
        <button className="btn" onClick={handleDownloadBtnClick}>
          <Icon.Download className="icon-img" />
        </button>
        <button className="btn" onClick={(e) => handleImgRotate(e, -90)}>
          <Icon.RotateCcw className="icon-img" />
        </button>
        <button className="btn" onClick={(e) => handleImgRotate(e, 90)}>
          <Icon.RotateCw className="icon-img" />
        </button>
      </div>
      <div className="img-container" onClick={handleImgContainerClick}>
        <img
          onClick={(e) => e.stopPropagation()}
          src={imgUrls[currentIndex]}
          onWheel={handleImgContainerScroll}

Review comment (suggestion):
```suggestion
      transform: `scale(${imgScale}) rotate(${imgRotate}deg)`,
```

Code after:
      if (currentIndex < imgUrls.length - 1) {
        setCurrentIndex(currentIndex + 1);
      } else {
        destroy();
      }
    }
  };

  const handleImgRotate = (event: React.MouseEvent, angle: number) => {
    const curImgAngle = (state.angle + angle + 360) % 360;
    setState({
      ...state,
      originX: -1,
      originY: -1,
      angle: curImgAngle,
    });
  };

  const handleImgContainerScroll = (event: React.WheelEvent) => {
    const offsetX = event.nativeEvent.offsetX;
    const offsetY = event.nativeEvent.offsetY;
    const sign = event.deltaY < 0 ? 1 : -1;
    const curAngle = Math.max(MIN_SCALE, Math.min(MAX_SCALE, state.scale + sign * SCALE_UNIT));
    setState({
      ...state,
      originX: offsetX,
      originY: offsetY,
      scale: curAngle,
    });
  };

  const getImageComputedStyle = () => {
    return {
      transform: `scale(${state.scale}) rotate(${state.angle}deg)`,
      transformOrigin: `${state.originX === -1 ? "center" : `${state.originX}px`} ${
        state.originY === -1 ? "center" : `${state.originY}px`
      }`,
    };
  };

  return (
    <>
      <div className="btns-container">
        <button className="btn" onClick={handleCloseBtnClick}>
          <Icon.X className="icon-img" />
        </button>
        <button className="btn" onClick={handleDownloadBtnClick}>
          <Icon.Download className="icon-img" />
        </button>
        <button className="btn" onClick={(e) => handleImgRotate(e, -90)}>
          <Icon.RotateCcw className="icon-img" />