react-image-crop - npm Package Compare versions

Comparing version 11.0.1 to 11.0.2

dist/index.js

@@ -8,44 +8,44 @@ import p, { PureComponent as k, createRef as E } from "react";
   unit: "px"
-}, v = (s, t, e) => Math.min(Math.max(s, t), e), S = (...s) => s.filter((t) => t && typeof t == "string").join(" "), Y = (s, t) => s === t || s.width === t.width && s.height === t.height && s.x === t.x && s.y === t.y && s.unit === t.unit;
-function $(s, t, e, h) {
-  const i = y(s, e, h);
-  return s.width && (i.height = i.width / t), s.height && (i.width = i.height * t), i.y + i.height > h && (i.height = h - i.y, i.width = i.height * t), i.x + i.width > e && (i.width = e - i.x, i.height = i.width / t), s.unit === "%" ? D(i, e, h) : i;
+}, v = (o, e, t) => Math.min(Math.max(o, e), t), S = (...o) => o.filter((e) => e && typeof e == "string").join(" "), Y = (o, e) => o === e || o.width === e.width && o.height === e.height && o.x === e.x && o.y === e.y && o.unit === e.unit;
+function H(o, e, t, h) {
+  const i = y(o, t, h);
+  return o.width && (i.height = i.width / e), o.height && (i.width = i.height * e), i.y + i.height > h && (i.height = h - i.y, i.width = i.height * e), i.x + i.width > t && (i.width = t - i.x, i.height = i.width / e), o.unit === "%" ? D(i, t, h) : i;
 }
-function H(s, t, e) {
-  const h = y(s, t, e);
-  return h.x = (t - h.width) / 2, h.y = (e - h.height) / 2, s.unit === "%" ? D(h, t, e) : h;
+function I(o, e, t) {
+  const h = y(o, e, t);
+  return h.x = (e - h.width) / 2, h.y = (t - h.height) / 2, o.unit === "%" ? D(h, e, t) : h;
 }
-function D(s, t, e) {
-  return s.unit === "%" ? { ...M, ...s, unit: "%" } : {
+function D(o, e, t) {
+  return o.unit === "%" ? { ...M, ...o, unit: "%" } : {
     unit: "%",
-    x: s.x ? s.x / t * 100 : 0,
-    y: s.y ? s.y / e * 100 : 0,
-    width: s.width ? s.width / t * 100 : 0,
-    height: s.height ? s.height / e * 100 : 0
+    x: o.x ? o.x / e * 100 : 0,
+    y: o.y ? o.y / t * 100 : 0,
+    width: o.width ? o.width / e * 100 : 0,
+    height: o.height ? o.height / t * 100 : 0
   };
 }
-function y(s, t, e) {
-  return s.unit ? s.unit === "px" ? { ...M, ...s, unit: "px" } : {
+function y(o, e, t) {
+  return o.unit ? o.unit === "px" ? { ...M, ...o, unit: "px" } : {
     unit: "px",
-    x: s.x ? s.x * t / 100 : 0,
-    y: s.y ? s.y * e / 100 : 0,
-    width: s.width ? s.width * t / 100 : 0,
-    height: s.height ? s.height * e / 100 : 0
-  } : { ...M, ...s, unit: "px" };
+    x: o.x ? o.x * e / 100 : 0,
+    y: o.y ? o.y * t / 100 : 0,
+    width: o.width ? o.width * e / 100 : 0,
+    height: o.height ? o.height * t / 100 : 0
+  } : { ...M, ...o, unit: "px" };
 }
-function P(s, t, e, h, i, n = 0, o = 0, w = h, a = i) {
-  const r = { ...s };
-  let c = Math.min(n, h), d = Math.min(o, i), g = Math.min(w, h), l = Math.min(a, i);
-  t && (t > 1 ? (c = o ? o * t : c, d = c / t, g = w * t) : (d = n ? n / t : d, c = d * t, l = a / t)), r.y < 0 && (r.height = Math.max(r.height + r.y, d), r.y = 0), r.x < 0 && (r.width = Math.max(r.width + r.x, c), r.x = 0);
+function P(o, e, t, h, i, n = 0, s = 0, w = h, a = i) {
+  const r = { ...o };
+  let c = Math.min(n, h), d = Math.min(s, i), g = Math.min(w, h), l = Math.min(a, i);
+  e && (e > 1 ? (c = s ? s * e : c, d = c / e, g = w * e) : (d = n ? n / e : d, c = d * e, l = a / e)), r.y < 0 && (r.height = Math.max(r.height + r.y, d), r.y = 0), r.x < 0 && (r.width = Math.max(r.width + r.x, c), r.x = 0);
   const m = h - (r.x + r.width);
   m < 0 && (r.x = Math.min(r.x, h - c), r.width += m);
   const x = i - (r.y + r.height);
-  if (x < 0 && (r.y = Math.min(r.y, i - d), r.height += x), r.width < c && ((e === "sw" || e == "nw") && (r.x -= c - r.width), r.width = c), r.height < d && ((e === "nw" || e == "ne") && (r.y -= d - r.height), r.height = d), r.width > g && ((e === "sw" || e == "nw") && (r.x -= g - r.width), r.width = g), r.height > l && ((e === "nw" || e == "ne") && (r.y -= l - r.height), r.height = l), t) {
+  if (x < 0 && (r.y = Math.min(r.y, i - d), r.height += x), r.width < c && ((t === "sw" || t == "nw") && (r.x -= c - r.width), r.width = c), r.height < d && ((t === "nw" || t == "ne") && (r.y -= d - r.height), r.height = d), r.width > g && ((t === "sw" || t == "nw") && (r.x -= g - r.width), r.width = g), r.height > l && ((t === "nw" || t == "ne") && (r.y -= l - r.height), r.height = l), e) {
     const b = r.width / r.height;
-    if (b < t) {
-      const C = Math.max(r.width / t, d);
-      (e === "nw" || e == "ne") && (r.y -= C - r.height), r.height = C;
-    } else if (b > t) {
-      const C = Math.max(r.height * t, c);
-      (e === "sw" || e == "nw") && (r.x -= C - r.width), r.width = C;
+    if (b < e) {
+      const C = Math.max(r.width / e, d);
+      (t === "nw" || t == "ne") && (r.y -= C - r.height), r.height = C;
+    } else if (b > e) {
+      const C = Math.max(r.height * e, c);
+      (t === "sw" || t == "nw") && (r.x -= C - r.width), r.width = C;
     }
@@ -55,7 +55,9 @@ }
 }
-function _(s, t, e, h) {
-  const i = { ...s };
-  return t === "ArrowLeft" ? h === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : h === "w" ? (i.x -= e, i.width += e) : h === "sw" ? (i.x -= e, i.width += e, i.height += e) : h === "ne" ? (i.y += e, i.width -= e, i.height -= e) : h === "e" ? i.width -= e : h === "se" && (i.width -= e, i.height -= e) : t === "ArrowRight" && (h === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : h === "w" ? (i.x += e, i.width -= e) : h === "sw" ? (i.x += e, i.width -= e, i.height -= e) : h === "ne" ? (i.y -= e, i.width += e, i.height += e) : h === "e" ? i.width += e : h === "se" && (i.width += e, i.height += e)), t === "ArrowUp" ? h === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : h === "n" ? (i.y -= e, i.height += e) : h === "ne" ? (i.y -= e, i.width += e, i.height += e) : h === "sw" ? (i.x += e, i.width -= e, i.height -= e) : h === "s" ? i.height -= e : h === "se" && (i.width -= e, i.height -= e) : t === "ArrowDown" && (h === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : h === "n" ? (i.y += e, i.height -= e) : h === "ne" ? (i.y += e, i.width -= e, i.height -= e) : h === "sw" ? (i.x -= e, i.width += e, i.height += e) : h === "s" ? i.height += e : h === "se" && (i.width += e, i.height += e)), i;
+function _(o, e, t, h) {
+  const i = { ...o };
+  return e === "ArrowLeft" ? h === "nw" ? (i.x -= t, i.y -= t, i.width += t, i.height += t) : h === "w" ? (i.x -= t, i.width += t) : h === "sw" ? (i.x -= t, i.width += t, i.height += t) : h === "ne" ? (i.y += t, i.width -= t, i.height -= t) : h === "e" ? i.width -= t : h === "se" && (i.width -= t, i.height -= t) : e === "ArrowRight" && (h === "nw" ? (i.x += t, i.y += t, i.width -= t, i.height -= t) : h === "w" ? (i.x += t, i.width -= t) : h === "sw" ? (i.x += t, i.width -= t, i.height -= t) : h === "ne" ? (i.y -= t, i.width += t, i.height += t) : h === "e" ? i.width += t : h === "se" && (i.width += t, i.height += t)), e === "ArrowUp" ? h === "nw" ? (i.x -= t, i.y -= t, i.width += t, i.height += t) : h === "n" ? (i.y -= t, i.height += t) : h === "ne" ? (i.y -= t, i.width += t, i.height += t) : h === "sw" ? (i.x += t, i.width -= t, i.height -= t) : h === "s" ? i.height -= t : h === "se" && (i.width -= t, i.height -= t) : e === "ArrowDown" && (h === "nw" ? (i.x += t, i.y += t, i.width -= t, i.height -= t) : h === "n" ? (i.y += t, i.height -= t) : h === "ne" ? (i.y += t, i.width -= t, i.height -= t) : h === "sw" ? (i.x -= t, i.width += t, i.height += t) : h === "s" ? i.height += t : h === "se" && (i.width += t, i.height += t)), i;
 }
-const f = { capture: !0, passive: !1 }, u = class u extends k {
+const f = { capture: !0, passive: !1 };
+let $ = 0;
+const u = class u extends k {
   constructor() {
@@ -70,19 +72,19 @@ super(...arguments), this.docMoveBound = !1, this.mouseDownOnCrop = !1, this.dragStarted = !1, this.evData = {
       isResize: !0
-    }, this.componentRef = E(), this.mediaRef = E(), this.initChangeCalled = !1, this.state = {
+    }, this.componentRef = E(), this.mediaRef = E(), this.initChangeCalled = !1, this.instanceId = `rc-${$++}`, this.state = {
       cropIsActive: !1,
       newCropIsBeingDrawn: !1
-    }, this.onCropPointerDown = (t) => {
-      const { crop: e, disabled: h } = this.props, i = this.getBox();
-      if (!e)
+    }, this.onCropPointerDown = (e) => {
+      const { crop: t, disabled: h } = this.props, i = this.getBox();
+      if (!t)
         return;
-      const n = y(e, i.width, i.height);
+      const n = y(t, i.width, i.height);
       if (h)
         return;
-      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
-      const o = t.target.dataset.ord, w = !!o;
-      let a = t.clientX, r = t.clientY, c = n.x, d = n.y;
-      if (o) {
-        const g = t.clientX - i.x, l = t.clientY - i.y;
+      e.cancelable && e.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const s = e.target.dataset.ord, w = !!s;
+      let a = e.clientX, r = e.clientY, c = n.x, d = n.y;
+      if (s) {
+        const g = e.clientX - i.x, l = e.clientY - i.y;
         let m = 0, x = 0;
-        o === "ne" || o == "e" ? (m = g - (n.x + n.width), x = l - n.y, c = n.x, d = n.y + n.height) : o === "se" || o === "s" ? (m = g - (n.x + n.width), x = l - (n.y + n.height), c = n.x, d = n.y) : o === "sw" || o == "w" ? (m = g - n.x, x = l - (n.y + n.height), c = n.x + n.width, d = n.y) : (o === "nw" || o == "n") && (m = g - n.x, x = l - n.y, c = n.x + n.width, d = n.y + n.height), a = c + i.x + m, r = d + i.y + x;
+        s === "ne" || s == "e" ? (m = g - (n.x + n.width), x = l - n.y, c = n.x, d = n.y + n.height) : s === "se" || s === "s" ? (m = g - (n.x + n.width), x = l - (n.y + n.height), c = n.x, d = n.y) : s === "sw" || s == "w" ? (m = g - n.x, x = l - (n.y + n.height), c = n.x + n.width, d = n.y) : (s === "nw" || s == "n") && (m = g - n.x, x = l - n.y, c = n.x + n.width, d = n.y + n.height), a = c + i.x + m, r = d + i.y + x;
       }
@@ -94,13 +96,13 @@ this.evData = {
         startCropY: d,
-        clientX: t.clientX,
-        clientY: t.clientY,
+        clientX: e.clientX,
+        clientY: e.clientY,
         isResize: w,
-        ord: o
+        ord: s
       }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
-    }, this.onComponentPointerDown = (t) => {
-      const { crop: e, disabled: h, locked: i, keepSelection: n, onChange: o } = this.props, w = this.getBox();
-      if (h || i || n && e)
+    }, this.onComponentPointerDown = (e) => {
+      const { crop: t, disabled: h, locked: i, keepSelection: n, onChange: s } = this.props, w = this.getBox();
+      if (h || i || n && t)
         return;
-      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
-      const a = t.clientX - w.x, r = t.clientY - w.y, c = {
+      e.cancelable && e.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const a = e.clientX - w.x, r = e.clientY - w.y, c = {
         unit: "px",
@@ -113,37 +115,37 @@ x: a,
       this.evData = {
-        startClientX: t.clientX,
-        startClientY: t.clientY,
+        startClientX: e.clientX,
+        startClientY: e.clientY,
         startCropX: a,
         startCropY: r,
-        clientX: t.clientX,
-        clientY: t.clientY,
+        clientX: e.clientX,
+        clientY: e.clientY,
         isResize: !0
-      }, this.mouseDownOnCrop = !0, o(y(c, w.width, w.height), D(c, w.width, w.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
-    }, this.onDocPointerMove = (t) => {
-      const { crop: e, disabled: h, onChange: i, onDragStart: n } = this.props, o = this.getBox();
-      if (h || !e || !this.mouseDownOnCrop)
+      }, this.mouseDownOnCrop = !0, s(y(c, w.width, w.height), D(c, w.width, w.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+    }, this.onDocPointerMove = (e) => {
+      const { crop: t, disabled: h, onChange: i, onDragStart: n } = this.props, s = this.getBox();
+      if (h || !t || !this.mouseDownOnCrop)
         return;
-      t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, n && n(t));
+      e.cancelable && e.preventDefault(), this.dragStarted || (this.dragStarted = !0, n && n(e));
       const { evData: w } = this;
-      w.clientX = t.clientX, w.clientY = t.clientY;
+      w.clientX = e.clientX, w.clientY = e.clientY;
       let a;
-      w.isResize ? a = this.resizeCrop() : a = this.dragCrop(), Y(e, a) || i(
-        y(a, o.width, o.height),
-        D(a, o.width, o.height)
+      w.isResize ? a = this.resizeCrop() : a = this.dragCrop(), Y(t, a) || i(
+        y(a, s.width, s.height),
+        D(a, s.width, s.height)
       );
-    }, this.onComponentKeyDown = (t) => {
-      const { crop: e, disabled: h, onChange: i, onComplete: n } = this.props;
+    }, this.onComponentKeyDown = (e) => {
+      const { crop: t, disabled: h, onChange: i, onComplete: n } = this.props;
       if (h)
         return;
-      const o = t.key;
+      const s = e.key;
       let w = !1;
-      if (!e)
+      if (!t)
         return;
-      const a = this.getBox(), r = this.makePixelCrop(a), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? u.nudgeStepLarge : t.shiftKey ? u.nudgeStepMedium : u.nudgeStep;
-      if (o === "ArrowLeft" ? (r.x -= d, w = !0) : o === "ArrowRight" ? (r.x += d, w = !0) : o === "ArrowUp" ? (r.y -= d, w = !0) : o === "ArrowDown" && (r.y += d, w = !0), w) {
-        t.cancelable && t.preventDefault(), r.x = v(r.x, 0, a.width - r.width), r.y = v(r.y, 0, a.height - r.height);
+      const a = this.getBox(), r = this.makePixelCrop(a), d = (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ? u.nudgeStepLarge : e.shiftKey ? u.nudgeStepMedium : u.nudgeStep;
+      if (s === "ArrowLeft" ? (r.x -= d, w = !0) : s === "ArrowRight" ? (r.x += d, w = !0) : s === "ArrowUp" ? (r.y -= d, w = !0) : s === "ArrowDown" && (r.y += d, w = !0), w) {
+        e.cancelable && e.preventDefault(), r.x = v(r.x, 0, a.width - r.width), r.y = v(r.y, 0, a.height - r.height);
         const g = y(r, a.width, a.height), l = D(r, a.width, a.height);
         i(g, l), n && n(g, l);
       }
-    }, this.onHandlerKeyDown = (t, e) => {
+    }, this.onHandlerKeyDown = (e, t) => {
       const {
@@ -153,3 +155,3 @@ aspect: h = 0,
         disabled: n,
-        minWidth: o = 0,
+        minWidth: s = 0,
         minHeight: w = 0,
@@ -163,13 +165,13 @@ maxWidth: a,
         return;
-      if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight")
-        t.stopPropagation(), t.preventDefault();
+      if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")
+        e.stopPropagation(), e.preventDefault();
       else
         return;
-      const m = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? u.nudgeStepLarge : t.shiftKey ? u.nudgeStepMedium : u.nudgeStep, x = y(i, g.width, g.height), b = _(x, t.key, m, e), C = P(
+      const m = (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ? u.nudgeStepLarge : e.shiftKey ? u.nudgeStepMedium : u.nudgeStep, x = y(i, g.width, g.height), b = _(x, e.key, m, t), C = P(
         b,
         h,
-        e,
+        t,
         g.width,
         g.height,
-        o,
+        s,
         w,
@@ -183,6 +185,6 @@ a,
       }
-    }, this.onDocPointerDone = (t) => {
-      const { crop: e, disabled: h, onComplete: i, onDragEnd: n } = this.props, o = this.getBox();
-      this.unbindDocMove(), !(h || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, n && n(t), i && i(y(e, o.width, o.height), D(e, o.width, o.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
-    }, this.onDragFocus = (t) => {
+    }, this.onDocPointerDone = (e) => {
+      const { crop: t, disabled: h, onComplete: i, onDragEnd: n } = this.props, s = this.getBox();
+      this.unbindDocMove(), !(h || !t) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, n && n(e), i && i(y(t, s.width, s.height), D(t, s.width, s.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
+    }, this.onDragFocus = () => {
       var e;
@@ -198,13 +200,13 @@ (e = this.componentRef.current) == null || e.scrollTo(0, 0);
   getBox() {
-    const t = this.mediaRef.current;
-    if (!t)
+    const e = this.mediaRef.current;
+    if (!e)
       return { x: 0, y: 0, width: 0, height: 0 };
-    const { x: e, y: h, width: i, height: n } = t.getBoundingClientRect();
-    return { x: e, y: h, width: i, height: n };
+    const { x: t, y: h, width: i, height: n } = e.getBoundingClientRect();
+    return { x: t, y: h, width: i, height: n };
   }
-  componentDidUpdate(t) {
-    const { crop: e, onComplete: h } = this.props;
-    if (h && !t.crop && e) {
+  componentDidUpdate(e) {
+    const { crop: t, onComplete: h } = this.props;
+    if (h && !e.crop && t) {
       const { width: i, height: n } = this.getBox();
-      i && n && h(y(e, i, n), D(e, i, n));
+      i && n && h(y(t, i, n), D(t, i, n));
     }
@@ -222,32 +224,32 @@ }
   getCropStyle() {
-    const { crop: t } = this.props;
-    if (t)
+    const { crop: e } = this.props;
+    if (e)
       return {
-        top: `${t.y}${t.unit}`,
-        left: `${t.x}${t.unit}`,
-        width: `${t.width}${t.unit}`,
-        height: `${t.height}${t.unit}`
+        top: `${e.y}${e.unit}`,
+        left: `${e.x}${e.unit}`,
+        width: `${e.width}${e.unit}`,
+        height: `${e.height}${e.unit}`
       };
   }
   dragCrop() {
-    const { evData: t } = this, e = this.getBox(), h = this.makePixelCrop(e), i = t.clientX - t.startClientX, n = t.clientY - t.startClientY;
-    return h.x = v(t.startCropX + i, 0, e.width - h.width), h.y = v(t.startCropY + n, 0, e.height - h.height), h;
+    const { evData: e } = this, t = this.getBox(), h = this.makePixelCrop(t), i = e.clientX - e.startClientX, n = e.clientY - e.startClientY;
+    return h.x = v(e.startCropX + i, 0, t.width - h.width), h.y = v(e.startCropY + n, 0, t.height - h.height), h;
   }
-  getPointRegion(t, e, h, i) {
-    const { evData: n } = this, o = n.clientX - t.x, w = n.clientY - t.y;
+  getPointRegion(e, t, h, i) {
+    const { evData: n } = this, s = n.clientX - e.x, w = n.clientY - e.y;
     let a;
-    i && e ? a = e === "nw" || e === "n" || e === "ne" : a = w < n.startCropY;
+    i && t ? a = t === "nw" || t === "n" || t === "ne" : a = w < n.startCropY;
     let r;
-    return h && e ? r = e === "nw" || e === "w" || e === "sw" : r = o < n.startCropX, r ? a ? "nw" : "sw" : a ? "ne" : "se";
+    return h && t ? r = t === "nw" || t === "w" || t === "sw" : r = s < n.startCropX, r ? a ? "nw" : "sw" : a ? "ne" : "se";
   }
-  resolveMinDimensions(t, e, h = 0, i = 0) {
-    let n = Math.min(h, t.width), o = Math.min(i, t.height);
-    return !e || !n && !o ? [n, o] : e > 1 ? n ? [n, n / e] : [o * e, o] : o ? [o * e, o] : [n, n / e];
+  resolveMinDimensions(e, t, h = 0, i = 0) {
+    const n = Math.min(h, e.width), s = Math.min(i, e.height);
+    return !t || !n && !s ? [n, s] : t > 1 ? n ? [n, n / t] : [s * t, s] : s ? [s * t, s] : [n, n / t];
   }
   resizeCrop() {
-    const { evData: t } = this, { aspect: e = 0, maxWidth: h, maxHeight: i } = this.props, n = this.getBox(), [o, w] = this.resolveMinDimensions(n, e, this.props.minWidth, this.props.minHeight);
-    let a = this.makePixelCrop(n), r = this.getPointRegion(n, t.ord, o, w);
-    const c = t.ord || r;
-    let d = t.clientX - t.startClientX, g = t.clientY - t.startClientY;
-    (o && c === "nw" || c === "w" || c === "sw") && (d = Math.min(d, -o)), (w && c === "nw" || c === "n" || c === "ne") && (g = Math.min(g, -w));
+    const { evData: e } = this, { aspect: t = 0, maxWidth: h, maxHeight: i } = this.props, n = this.getBox(), [s, w] = this.resolveMinDimensions(n, t, this.props.minWidth, this.props.minHeight);
+    let a = this.makePixelCrop(n);
+    const r = this.getPointRegion(n, e.ord, s, w), c = e.ord || r;
+    let d = e.clientX - e.startClientX, g = e.clientY - e.startClientY;
+    (s && c === "nw" || c === "w" || c === "sw") && (d = Math.min(d, -s)), (w && c === "nw" || c === "n" || c === "ne") && (g = Math.min(g, -w));
     const l = {
@@ -260,10 +262,10 @@ unit: "px",
     };
-    r === "ne" ? (l.x = t.startCropX, l.width = d, e ? (l.height = l.width / e, l.y = t.startCropY - l.height) : (l.height = Math.abs(g), l.y = t.startCropY - l.height)) : r === "se" ? (l.x = t.startCropX, l.y = t.startCropY, l.width = d, e ? l.height = l.width / e : l.height = g) : r === "sw" ? (l.x = t.startCropX + d, l.y = t.startCropY, l.width = Math.abs(d), e ? l.height = l.width / e : l.height = g) : r === "nw" && (l.x = t.startCropX + d, l.width = Math.abs(d), e ? (l.height = l.width / e, l.y = t.startCropY - l.height) : (l.height = Math.abs(g), l.y = t.startCropY + g));
+    r === "ne" ? (l.x = e.startCropX, l.width = d, t ? (l.height = l.width / t, l.y = e.startCropY - l.height) : (l.height = Math.abs(g), l.y = e.startCropY - l.height)) : r === "se" ? (l.x = e.startCropX, l.y = e.startCropY, l.width = d, t ? l.height = l.width / t : l.height = g) : r === "sw" ? (l.x = e.startCropX + d, l.y = e.startCropY, l.width = Math.abs(d), t ? l.height = l.width / t : l.height = g) : r === "nw" && (l.x = e.startCropX + d, l.width = Math.abs(d), t ? (l.height = l.width / t, l.y = e.startCropY - l.height) : (l.height = Math.abs(g), l.y = e.startCropY + g));
     const m = P(
       l,
-      e,
+      t,
       r,
       n.width,
       n.height,
-      o,
+      s,
       w,
@@ -273,14 +275,14 @@ h,
     );
-    return e || u.xyOrds.indexOf(c) > -1 ? a = m : u.xOrds.indexOf(c) > -1 ? (a.x = m.x, a.width = m.width) : u.yOrds.indexOf(c) > -1 && (a.y = m.y, a.height = m.height), a.x = v(a.x, 0, n.width - a.width), a.y = v(a.y, 0, n.height - a.height), a;
+    return t || u.xyOrds.indexOf(c) > -1 ? a = m : u.xOrds.indexOf(c) > -1 ? (a.x = m.x, a.width = m.width) : u.yOrds.indexOf(c) > -1 && (a.y = m.y, a.height = m.height), a.x = v(a.x, 0, n.width - a.width), a.y = v(a.y, 0, n.height - a.height), a;
   }
   renderCropSelection() {
     const {
-      ariaLabels: t = u.defaultProps.ariaLabels,
-      disabled: e,
+      ariaLabels: e = u.defaultProps.ariaLabels,
+      disabled: t,
       locked: h,
       renderSelectionAddon: i,
       ruleOfThirds: n,
-      crop: o
+      crop: s
     } = this.props, w = this.getCropStyle();
-    if (o)
+    if (s)
       return /* @__PURE__ */ p.createElement(
@@ -292,3 +294,3 @@ "div",
           onPointerDown: this.onCropPointerDown,
-          "aria-label": t.cropArea,
+          "aria-label": e.cropArea,
           tabIndex: 0,
@@ -298,3 +300,3 @@ onKeyDown: this.onComponentKeyDown,
         },
-        !e && !h && /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ p.createElement(
+        !t && !h && /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ p.createElement(
           "div",
@@ -305,3 +307,3 @@ {
             tabIndex: 0,
-            "aria-label": t.nwDragHandle,
+            "aria-label": e.nwDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "nw"),
@@ -316,3 +318,3 @@ role: "button"
             tabIndex: 0,
-            "aria-label": t.nDragHandle,
+            "aria-label": e.nDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "n"),
@@ -327,3 +329,3 @@ role: "button"
             tabIndex: 0,
-            "aria-label": t.neDragHandle,
+            "aria-label": e.neDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "ne"),
@@ -338,3 +340,3 @@ role: "button"
             tabIndex: 0,
-            "aria-label": t.eDragHandle,
+            "aria-label": e.eDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "e"),
@@ -349,3 +351,3 @@ role: "button"
             tabIndex: 0,
-            "aria-label": t.seDragHandle,
+            "aria-label": e.seDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "se"),
@@ -360,3 +362,3 @@ role: "button"
             tabIndex: 0,
-            "aria-label": t.sDragHandle,
+            "aria-label": e.sDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "s"),
@@ -371,3 +373,3 @@ role: "button"
             tabIndex: 0,
-            "aria-label": t.swDragHandle,
+            "aria-label": e.swDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "sw"),
@@ -382,3 +384,3 @@ role: "button"
             tabIndex: 0,
-            "aria-label": t.wDragHandle,
+            "aria-label": e.wDragHandle,
             onKeyDown: (a) => this.onHandlerKeyDown(a, "w"),
@@ -392,15 +394,15 @@ role: "button"
   }
-  makePixelCrop(t) {
-    const e = { ...M, ...this.props.crop || {} };
-    return y(e, t.width, t.height);
+  makePixelCrop(e) {
+    const t = { ...M, ...this.props.crop || {} };
+    return y(t, e.width, e.height);
   }
   render() {
-    const { aspect: t, children: e, circularCrop: h, className: i, crop: n, disabled: o, locked: w, style: a, ruleOfThirds: r } = this.props, { cropIsActive: c, newCropIsBeingDrawn: d } = this.state, g = n ? this.renderCropSelection() : null, l = S(
+    const { aspect: e, children: t, circularCrop: h, className: i, crop: n, disabled: s, locked: w, style: a, ruleOfThirds: r } = this.props, { cropIsActive: c, newCropIsBeingDrawn: d } = this.state, g = n ? this.renderCropSelection() : null, l = S(
       "ReactCrop",
       i,
       c && "ReactCrop--active",
-      o && "ReactCrop--disabled",
+      s && "ReactCrop--disabled",
       w && "ReactCrop--locked",
       d && "ReactCrop--new-crop",
-      n && t && "ReactCrop--fixed-aspect",
+      n && e && "ReactCrop--fixed-aspect",
       n && h && "ReactCrop--circular-crop",
@@ -411,3 +413,3 @@ n && r && "ReactCrop--rule-of-thirds",
     );
-    return /* @__PURE__ */ p.createElement("div", { ref: this.componentRef, className: l, style: a }, /* @__PURE__ */ p.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), n ? /* @__PURE__ */ p.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ p.createElement("defs", null, /* @__PURE__ */ p.createElement("mask", { id: "hole" }, /* @__PURE__ */ p.createElement("rect", { width: "100%", height: "100%", fill: "white" }), h ? /* @__PURE__ */ p.createElement(
+    return /* @__PURE__ */ p.createElement("div", { ref: this.componentRef, className: l, style: a }, /* @__PURE__ */ p.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, t), n ? /* @__PURE__ */ p.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ p.createElement("defs", null, /* @__PURE__ */ p.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ p.createElement("rect", { width: "100%", height: "100%", fill: "white" }), h ? /* @__PURE__ */ p.createElement(
       "ellipse",
@@ -430,3 +432,3 @@ {
       }
-    ))), /* @__PURE__ */ p.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: "url(#hole)" })) : void 0, g);
+    ))), /* @__PURE__ */ p.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, g);
   }
@@ -452,3 +454,3 @@ };
   Y as areCropsEqual,
-  H as centerCrop,
+  I as centerCrop,
   v as clamp,
@@ -461,4 +463,4 @@ S as cls,
   M as defaultCrop,
-  $ as makeAspectCrop,
+  H as makeAspectCrop,
   _ as nudgeCrop
 };

dist/ReactCrop.d.ts

@@ -105,2 +105,3 @@ import React, { PureComponent } from 'react';
     initChangeCalled: boolean;
+    instanceId: string;
     state: ReactCropState;
@@ -118,3 +119,3 @@ getBox(): Rectangle;
     onDocPointerDone: (e: PointerEvent) => void;
-    onDragFocus: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
+    onDragFocus: () => void;
     getCropStyle(): {
@@ -121,0 +122,0 @@ top: string;

package.json

 {
   "name": "react-image-crop",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "description": "A responsive image cropping tool for React",
@@ -25,9 +25,2 @@ "repository": "https://github.com/DominicTobias/react-image-crop",
   "style": "dist/ReactCrop.css",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "prepare": "npm run build"
-  },
   "author": "Dominic Tobias (https://github.com/DominicTobias/)",
@@ -43,20 +36,26 @@ "keywords": [
   "devDependencies": {
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.54.0",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.5",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.4",
-    "vite-plugin-dts": "^3.6.4"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.7.0"
   },
   "peerDependencies": {
     "react": ">=16.13.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   }
-}
+}

README.md

@@ -268,4 +268,6 @@ # React Image Crop
 
+And your `aspect` crop should be set to the same aspect: `<ReactCrop aspect={16 / 9} ... />`.
+
 ## Contributing / Developing
 
-To develop run `pnpm install && pnpm dev` and open the localhost server in your browser. Update code and it will reload. When you're ready open a pull request.
+To develop run `pnpm install && pnpm dev` and open the localhost server in your browser. Update code and it will reload. When you're ready, open a pull request.

No alert changes

Improved metrics

Total package byte prevSize

110232

increased by0.27%

Lines of code

1997

increased by0.25%

Number of lines in readme file

273

increased by0.74%

No dependency changes