"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/image-editor/use-transform-image.js
var use_transform_image_exports = {};
__export(use_transform_image_exports, {
  default: () => useTransformImage
});
module.exports = __toCommonJS(use_transform_image_exports);
var import_element = require("@wordpress/element");
var import_hooks = require("@wordpress/hooks");
function useTransformImage({
  url,
  naturalWidth,
  naturalHeight
}) {
  const [editedUrl, setEditedUrl] = (0, import_element.useState)();
  const [crop, setCrop] = (0, import_element.useState)();
  const [position, setPosition] = (0, import_element.useState)({ x: 0, y: 0 });
  const [zoom, setZoom] = (0, import_element.useState)(100);
  const [rotation, setRotation] = (0, import_element.useState)(0);
  const defaultAspect = naturalWidth / naturalHeight;
  const [aspect, setAspect] = (0, import_element.useState)(defaultAspect);
  const rotateClockwise = (0, import_element.useCallback)(() => {
    const angle = (rotation + 90) % 360;
    let naturalAspectRatio = defaultAspect;
    if (rotation % 180 === 90) {
      naturalAspectRatio = 1 / defaultAspect;
    }
    if (angle === 0) {
      setEditedUrl();
      setRotation(angle);
      setAspect(defaultAspect);
      setPosition((prevPosition) => ({
        x: -(prevPosition.y * naturalAspectRatio),
        y: prevPosition.x * naturalAspectRatio
      }));
      return;
    }
    function editImage(event) {
      const canvas = document.createElement("canvas");
      let translateX = 0;
      let translateY = 0;
      if (angle % 180) {
        canvas.width = event.target.height;
        canvas.height = event.target.width;
      } else {
        canvas.width = event.target.width;
        canvas.height = event.target.height;
      }
      if (angle === 90 || angle === 180) {
        translateX = canvas.width;
      }
      if (angle === 270 || angle === 180) {
        translateY = canvas.height;
      }
      const context = canvas.getContext("2d");
      context.translate(translateX, translateY);
      context.rotate(angle * Math.PI / 180);
      context.drawImage(event.target, 0, 0);
      canvas.toBlob((blob) => {
        setEditedUrl(URL.createObjectURL(blob));
        setRotation(angle);
        setAspect(canvas.width / canvas.height);
        setPosition((prevPosition) => ({
          x: -(prevPosition.y * naturalAspectRatio),
          y: prevPosition.x * naturalAspectRatio
        }));
      });
    }
    const el = new window.Image();
    el.src = url;
    el.onload = editImage;
    const imgCrossOrigin = (0, import_hooks.applyFilters)(
      "media.crossOrigin",
      void 0,
      url
    );
    if (typeof imgCrossOrigin === "string") {
      el.crossOrigin = imgCrossOrigin;
    }
  }, [rotation, defaultAspect, url]);
  return (0, import_element.useMemo)(
    () => ({
      editedUrl,
      setEditedUrl,
      crop,
      setCrop,
      position,
      setPosition,
      zoom,
      setZoom,
      rotation,
      setRotation,
      rotateClockwise,
      aspect,
      setAspect,
      defaultAspect
    }),
    [
      editedUrl,
      crop,
      position,
      zoom,
      rotation,
      rotateClockwise,
      aspect,
      defaultAspect
    ]
  );
}
//# sourceMappingURL=use-transform-image.js.map
