sykpcomposer 0.0.191 → 0.0.192

package/dist/{ImageComponent-ea1adbce.js → ImageComponent-d49dd9f8.js}

@@ -1,5 +1,5 @@
-import { j as v, u as he, d as U, w as G, x as J, $ as Q, a as te, b as ce, c as de, e as le, C as I, f as ge, k as ue, g as pe, I as we, r as me, h as xe, i as fe, l as ye, t as Ce } from "./index-b2431ded.js";
-import { u as ve, d as De, L as be, P as Re } from "./Placeholder-433b48ba.js";
+import { j as v, u as he, d as U, w as G, x as J, $ as Q, a as te, b as ce, c as de, e as le, C as I, f as ge, k as ue, g as pe, I as we, r as me, h as xe, i as fe, l as ye, t as Ce } from "./index-60b4a632.js";
+import { u as ve, d as De, L as be, P as Re } from "./Placeholder-ed3bc9f3.js";
 import f, { useRef as Y, PureComponent as Ee, createRef as ne, useState as O, useCallback as F, useEffect as ee, Suspense as Me } from "react";
 import "react-dom";
 function Z(g, t, e) {
@@ -19,7 +19,7 @@ function Pe({
   maxWidth: n,
   editor: i,
   showCaption: h,
-  setShowCaption: u,
+  setShowCaption: p,
   captionsEnabled: s
 }) {
   const r = Y(null), a = Y({
@@ -35,8 +35,8 @@ function Pe({
     startWidth: 0,
     startX: 0,
     startY: 0
-  }), l = i.getRootElement(), c = l !== null ? l.getBoundingClientRect().width - 20 : 100, C = l !== null ? l.getBoundingClientRect().height - 20 : 100, M = 100, x = 100, z = (p) => {
-    const w = p === y.east || p === y.west, m = p === y.north || p === y.south, N = p & y.north && p & y.west || p & y.south && p & y.east, $ = w ? "ew" : m ? "ns" : N ? "nwse" : "nesw";
+  }), l = i.getRootElement(), c = l !== null ? l.getBoundingClientRect().width - 20 : 100, C = l !== null ? l.getBoundingClientRect().height - 20 : 100, M = 100, x = 100, z = (u) => {
+    const w = u === y.east || u === y.west, m = u === y.north || u === y.south, N = u & y.north && u & y.west || u & y.south && u & y.east, $ = w ? "ew" : m ? "ns" : N ? "nwse" : "nesw";
     l !== null && l.style.setProperty(
       "cursor",
       `${$}-resize`,
@@ -60,20 +60,20 @@ function Pe({
       a.current.value,
       a.current.priority
     ));
-  }, H = (p, w) => {
+  }, H = (u, w) => {
     if (!i.isEditable())
       return;
     const m = o.current, N = r.current;
     if (m !== null && N !== null) {
-      p.preventDefault();
+      u.preventDefault();
       const { width: $, height: D } = m.getBoundingClientRect(), b = d.current;
-      b.startWidth = $, b.startHeight = D, b.ratio = $ / D, b.currentWidth = $, b.currentHeight = D, b.startX = p.clientX, b.startY = p.clientY, b.isResizing = !0, b.direction = w, z(w), g(), N.classList.add("image-control-wrapper--resizing"), m.style.height = `${D}px`, m.style.width = `${$}px`, document.addEventListener("pointermove", L), document.addEventListener("pointerup", R);
+      b.startWidth = $, b.startHeight = D, b.ratio = $ / D, b.currentWidth = $, b.currentHeight = D, b.startX = u.clientX, b.startY = u.clientY, b.isResizing = !0, b.direction = w, z(w), g(), N.classList.add("image-control-wrapper--resizing"), m.style.height = `${D}px`, m.style.width = `${$}px`, document.addEventListener("pointermove", L), document.addEventListener("pointerup", R);
     }
-  }, L = (p) => {
+  }, L = (u) => {
     const w = o.current, m = d.current, N = m.direction & (y.east | y.west), $ = m.direction & (y.south | y.north);
     if (w !== null && m.isResizing) {
       if (N && $) {
-        let D = Math.floor(m.startX - p.clientX);
+        let D = Math.floor(m.startX - u.clientX);
         D = m.direction & y.east ? -D : D;
         const b = Z(
           m.startWidth + D,
@@ -82,7 +82,7 @@ function Pe({
         ), T = b / m.ratio;
         w.style.width = `${b}px`, w.style.height = `${T}px`, m.currentHeight = T, m.currentWidth = b;
       } else if ($) {
-        let D = Math.floor(m.startY - p.clientY);
+        let D = Math.floor(m.startY - u.clientY);
         D = m.direction & y.south ? -D : D;
         const b = Z(
           m.startHeight + D,
@@ -91,7 +91,7 @@ function Pe({
         );
         w.style.height = `${b}px`, w.style.maxHeight = `${b}px`, m.currentHeight = b;
       } else {
-        let D = Math.floor(m.startX - p.clientX);
+        let D = Math.floor(m.startX - u.clientX);
         D = m.direction & y.east ? -D : D;
         const b = Z(
           m.startWidth + D,
@@ -103,8 +103,8 @@ function Pe({
       w && (w.setAttribute("width", `${m.currentWidth}`), w.setAttribute("height", `${m.currentHeight}`));
     }
   }, R = () => {
-    const p = o.current, w = d.current, m = r.current;
-    if (p !== null && m !== null && w.isResizing) {
+    const u = o.current, w = d.current, m = r.current;
+    if (u !== null && m !== null && w.isResizing) {
       const N = w.currentWidth, $ = w.currentHeight;
       w.startWidth = 0, w.startHeight = 0, w.ratio = 0, w.startX = 0, w.startY = 0, w.currentWidth = 0, w.currentHeight = 0, w.isResizing = !1, m.classList.remove("image-control-wrapper--resizing"), W(), t(N, $), document.removeEventListener("pointermove", L), document.removeEventListener("pointerup", R);
     }
@@ -114,8 +114,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-n",
-        onPointerDown: (p) => {
-          H(p, y.north);
+        onPointerDown: (u) => {
+          H(u, y.north);
         }
       }
     ),
@@ -123,8 +123,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-ne",
-        onPointerDown: (p) => {
-          H(p, y.north | y.east);
+        onPointerDown: (u) => {
+          H(u, y.north | y.east);
         }
       }
     ),
@@ -132,8 +132,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-e",
-        onPointerDown: (p) => {
-          H(p, y.east);
+        onPointerDown: (u) => {
+          H(u, y.east);
         }
       }
     ),
@@ -141,8 +141,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-se",
-        onPointerDown: (p) => {
-          H(p, y.south | y.east);
+        onPointerDown: (u) => {
+          H(u, y.south | y.east);
         }
       }
     ),
@@ -150,8 +150,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-s",
-        onPointerDown: (p) => {
-          H(p, y.south);
+        onPointerDown: (u) => {
+          H(u, y.south);
         }
       }
     ),
@@ -159,8 +159,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-sw",
-        onPointerDown: (p) => {
-          H(p, y.south | y.west);
+        onPointerDown: (u) => {
+          H(u, y.south | y.west);
         }
       }
     ),
@@ -168,8 +168,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-w",
-        onPointerDown: (p) => {
-          H(p, y.west);
+        onPointerDown: (u) => {
+          H(u, y.west);
         }
       }
     ),
@@ -177,8 +177,8 @@ function Pe({
       "div",
       {
         className: "image-resizer image-resizer-nw",
-        onPointerDown: (p) => {
-          H(p, y.north | y.west);
+        onPointerDown: (u) => {
+          H(u, y.north | y.west);
         }
       }
     )
@@ -209,10 +209,10 @@ function _(g, t, e) {
     height: g.height ? g.height * e / 100 : 0
   } : { ...V, ...g, unit: "px" };
 }
-function re(g, t, e, o, n, i = 0, h = 0, u = o, s = n) {
+function re(g, t, e, o, n, i = 0, h = 0, p = o, s = n) {
   const r = { ...g };
-  let a = Math.min(i, o), d = Math.min(h, n), l = Math.min(u, o), c = Math.min(s, n);
-  t && (t > 1 ? (a = h ? h * t : a, d = a / t, l = u * t) : (d = i ? i / t : d, a = d * t, c = s / 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, a), r.x = 0);
+  let a = Math.min(i, o), d = Math.min(h, n), l = Math.min(p, o), c = Math.min(s, n);
+  t && (t > 1 ? (a = h ? h * t : a, d = a / t, l = p * t) : (d = i ? i / t : d, a = d * t, c = s / 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, a), r.x = 0);
   const C = o - (r.x + r.width);
   C < 0 && (r.x = Math.min(r.x, o - a), r.width += C);
   const M = n - (r.y + r.height);
@@ -255,7 +255,7 @@ const X = class S extends Ee {
       if (o)
         return;
       t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
-      const h = t.target.dataset.ord, u = !!h;
+      const h = t.target.dataset.ord, p = !!h;
       let s = t.clientX, r = t.clientY, a = i.x, d = i.y;
       if (h) {
         const l = t.clientX - n.x, c = t.clientY - n.y;
@@ -269,15 +269,15 @@ const X = class S extends Ee {
         startCropY: d,
         clientX: t.clientX,
         clientY: t.clientY,
-        isResize: u,
+        isResize: p,
         ord: h
       }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
     }, this.onComponentPointerDown = (t) => {
-      const { crop: e, disabled: o, locked: n, keepSelection: i, onChange: h } = this.props, u = this.getBox();
+      const { crop: e, disabled: o, locked: n, keepSelection: i, onChange: h } = this.props, p = this.getBox();
       if (o || n || i && e)
         return;
       t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
-      const s = t.clientX - u.x, r = t.clientY - u.y, a = {
+      const s = t.clientX - p.x, r = t.clientY - p.y, a = {
         unit: "px",
         x: s,
         y: r,
@@ -292,16 +292,16 @@ const X = class S extends Ee {
         clientX: t.clientX,
         clientY: t.clientY,
         isResize: !0
-      }, this.mouseDownOnCrop = !0, h(_(a, u.width, u.height), A(a, u.width, u.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+      }, this.mouseDownOnCrop = !0, h(_(a, p.width, p.height), A(a, p.width, p.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
     }, this.onDocPointerMove = (t) => {
       const { crop: e, disabled: o, onChange: n, onDragStart: i } = this.props, h = this.getBox();
       if (o || !e || !this.mouseDownOnCrop)
         return;
       t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, i && i(t));
-      const { evData: u } = this;
-      u.clientX = t.clientX, u.clientY = t.clientY;
+      const { evData: p } = this;
+      p.clientX = t.clientX, p.clientY = t.clientY;
       let s;
-      u.isResize ? s = this.resizeCrop() : s = this.dragCrop(), ie(e, s) || n(
+      p.isResize ? s = this.resizeCrop() : s = this.dragCrop(), ie(e, s) || n(
         _(s, h.width, h.height),
         A(s, h.width, h.height)
       );
@@ -310,11 +310,11 @@ const X = class S extends Ee {
       if (o)
         return;
       const h = t.key;
-      let u = !1;
+      let p = !1;
       if (!e)
         return;
       const s = this.getBox(), r = this.makePixelCrop(s), a = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep;
-      if (h === "ArrowLeft" ? (r.x -= a, u = !0) : h === "ArrowRight" ? (r.x += a, u = !0) : h === "ArrowUp" ? (r.y -= a, u = !0) : h === "ArrowDown" && (r.y += a, u = !0), u) {
+      if (h === "ArrowLeft" ? (r.x -= a, p = !0) : h === "ArrowRight" ? (r.x += a, p = !0) : h === "ArrowUp" ? (r.y -= a, p = !0) : h === "ArrowDown" && (r.y += a, p = !0), p) {
         t.cancelable && t.preventDefault(), r.x = j(r.x, 0, s.width - r.width), r.y = j(r.y, 0, s.height - r.height);
         const d = _(r, s.width, s.height), l = A(r, s.width, s.height);
         n(d, l), i && i(d, l);
@@ -325,7 +325,7 @@ const X = class S extends Ee {
         crop: n,
         disabled: i,
         minWidth: h = 0,
-        minHeight: u = 0,
+        minHeight: p = 0,
         maxWidth: s,
         maxHeight: r,
         onChange: a,
@@ -344,7 +344,7 @@ const X = class S extends Ee {
         l.width,
         l.height,
         h,
-        u,
+        p,
         s,
         r
       );
@@ -403,9 +403,9 @@ const X = class S extends Ee {
     return o.x = j(t.startCropX + n, 0, e.width - o.width), o.y = j(t.startCropY + i, 0, e.height - o.height), o;
   }
   getPointRegion(t, e, o, n) {
-    const { evData: i } = this, h = i.clientX - t.x, u = i.clientY - t.y;
+    const { evData: i } = this, h = i.clientX - t.x, p = i.clientY - t.y;
     let s;
-    n && e ? s = e === "nw" || e === "n" || e === "ne" : s = u < i.startCropY;
+    n && e ? s = e === "nw" || e === "n" || e === "ne" : s = p < i.startCropY;
     let r;
     return o && e ? r = e === "nw" || e === "w" || e === "sw" : r = h < i.startCropX, r ? s ? "nw" : "sw" : s ? "ne" : "se";
   }
@@ -414,11 +414,11 @@ const X = class S extends Ee {
     return !e || !i && !h ? [i, h] : e > 1 ? i ? [i, i / e] : [h * e, h] : h ? [h * e, h] : [i, i / e];
   }
   resizeCrop() {
-    const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: n } = this.props, i = this.getBox(), [h, u] = this.resolveMinDimensions(i, e, this.props.minWidth, this.props.minHeight);
+    const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: n } = this.props, i = this.getBox(), [h, p] = this.resolveMinDimensions(i, e, this.props.minWidth, this.props.minHeight);
     let s = this.makePixelCrop(i);
-    const r = this.getPointRegion(i, t.ord, h, u), a = t.ord || r;
+    const r = this.getPointRegion(i, t.ord, h, p), a = t.ord || r;
     let d = t.clientX - t.startClientX, l = t.clientY - t.startClientY;
-    (h && a === "nw" || a === "w" || a === "sw") && (d = Math.min(d, -h)), (u && a === "nw" || a === "n" || a === "ne") && (l = Math.min(l, -u));
+    (h && a === "nw" || a === "w" || a === "sw") && (d = Math.min(d, -h)), (p && a === "nw" || a === "n" || a === "ne") && (l = Math.min(l, -p));
     const c = {
       unit: "px",
       x: 0,
@@ -434,7 +434,7 @@ const X = class S extends Ee {
       i.width,
       i.height,
       h,
-      u,
+      p,
       o,
       n
     );
@@ -448,12 +448,12 @@ const X = class S extends Ee {
       renderSelectionAddon: n,
       ruleOfThirds: i,
       crop: h
-    } = this.props, u = this.getCropStyle();
+    } = this.props, p = this.getCropStyle();
     if (h)
       return /* @__PURE__ */ f.createElement(
         "div",
         {
-          style: u,
+          style: p,
           className: "ReactCrop__crop-selection",
           onPointerDown: this.onCropPointerDown,
           "aria-label": t.cropArea,
@@ -551,12 +551,12 @@ const X = class S extends Ee {
     return _(e, t.width, t.height);
   }
   render() {
-    const { aspect: t, children: e, circularCrop: o, className: n, crop: i, disabled: h, locked: u, style: s, ruleOfThirds: r } = this.props, { cropIsActive: a, newCropIsBeingDrawn: d } = this.state, l = i ? this.renderCropSelection() : null, c = He(
+    const { aspect: t, children: e, circularCrop: o, className: n, crop: i, disabled: h, locked: p, style: s, ruleOfThirds: r } = this.props, { cropIsActive: a, newCropIsBeingDrawn: d } = this.state, l = i ? this.renderCropSelection() : null, c = He(
       "ReactCrop",
       n,
       a && "ReactCrop--active",
       h && "ReactCrop--disabled",
-      u && "ReactCrop--locked",
+      p && "ReactCrop--locked",
       d && "ReactCrop--new-crop",
       i && t && "ReactCrop--fixed-aspect",
       i && o && "ReactCrop--circular-crop",
@@ -608,37 +608,38 @@ function ke({
   height: n,
   maxWidth: i,
   imageRef: h,
-  startCrop: u,
+  startCrop: p,
   setStartCrop: s,
   isFocused: r
 }) {
   const [a, d] = O(null), [l, c] = O(null), [C, M] = O({
     //@ts-ignore
-    aspect: 1,
-    x: 0,
-    y: 0,
-    width: 100,
-    height: 100
+    unit: "px",
+    // Can be 'px' or '%'
+    x: 25,
+    y: 25,
+    width: 50,
+    height: 50
   }), x = () => {
     if (a) {
       const R = h.current;
       if (!R || !a)
         return;
-      const p = R.naturalWidth / R.width, w = R.naturalHeight / R.height, m = new OffscreenCanvas(
-        a.width * p,
+      const u = R.naturalWidth / R.width, w = R.naturalHeight / R.height, m = new OffscreenCanvas(
+        a.width * u,
         a.height * w
       ), N = m.getContext("2d");
       if (!N)
         throw new Error("No 2D context available");
       N.drawImage(
         R,
-        a.x * p,
+        a.x * u,
         a.y * w,
-        a.width * p,
+        a.width * u,
         a.height * w,
         0,
         0,
-        a.width * p,
+        a.width * u,
         a.height * w
       ), m.convertToBlob({ type: "image/png" }).then(($) => {
         const D = URL.createObjectURL($);
@@ -646,7 +647,20 @@ function ke({
       });
     }
   }, z = () => {
-    u || s((R) => (R === !1 && M({ aspect: 1, x: 0, y: 0, width: 100, height: 100 }), !R));
+    p || s((R) => {
+      if (R === !1) {
+        const u = h.current;
+        M({
+          unit: "px",
+          // Can be 'px' or '%'
+          x: 0,
+          y: 0,
+          width: u.width,
+          height: u.height
+        });
+      }
+      return !R;
+    });
   }, W = Y(null), H = Y(null);
   ee(() => {
     a && (W.current = a);
@@ -666,7 +680,7 @@ function ke({
         children: "Crop"
       }
     ),
-    u && /* @__PURE__ */ v.jsx(
+    p && /* @__PURE__ */ v.jsx(
       "button",
       {
         style: { zIndex: 999 },
@@ -675,7 +689,7 @@ function ke({
         children: "Apply Crop"
       }
     ),
-    u ? /* @__PURE__ */ v.jsx(
+    p ? /* @__PURE__ */ v.jsx(
       Ne,
       {
         crop: C,
@@ -725,10 +739,10 @@ function Ye({
   height: n,
   maxWidth: i,
   resizable: h,
-  showCaption: u,
+  showCaption: p,
   caption: s
 }) {
-  const r = Y(null), a = Y(null), [d, l, c] = ve(e), [C, M] = O(!1), [x] = he(), [z, W] = O(null), [H, L] = O(!1), R = Y(null), p = F(
+  const r = Y(null), a = Y(null), [d, l, c] = ve(e), [C, M] = O(!1), [x] = he(), [z, W] = O(null), [H, L] = O(!1), R = Y(null), u = F(
     (P) => {
       if (d && U(G())) {
         P.preventDefault();
@@ -743,14 +757,14 @@ function Ye({
     (P) => {
       const E = G(), k = a.current;
       if (d && U(E) && E.getNodes().length === 1) {
-        if (u)
+        if (p)
           return te(null), P.preventDefault(), s.focus(), !0;
         if (k !== null && k !== document.activeElement)
           return P.preventDefault(), k.focus(), !0;
       }
       return !1;
     },
-    [s, d, u]
+    [s, d, p]
   ), m = F(
     (P) => R.current === s || a.current === P.target ? (te(null), x.update(() => {
       l(!0);
@@ -804,12 +818,12 @@ function Ye({
       ),
       x.registerCommand(
         pe,
-        p,
+        u,
         I
       ),
       x.registerCommand(
         ue,
-        p,
+        u,
         I
       ),
       x.registerCommand(ge, w, I),
@@ -824,7 +838,7 @@ function Ye({
     C,
     d,
     e,
-    p,
+    u,
     w,
     m,
     N,
@@ -862,7 +876,7 @@ function Ye({
         isFocused: q
       }
     ) }),
-    u && /* @__PURE__ */ v.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ v.jsx(De, { initialEditor: s, children: /* @__PURE__ */ v.jsx(
+    p && /* @__PURE__ */ v.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ v.jsx(De, { initialEditor: s, children: /* @__PURE__ */ v.jsx(
       fe,
       {
         contentEditable: /* @__PURE__ */ v.jsx(be, { className: "ImageNode__contentEditable" }),
@@ -873,7 +887,7 @@ function Ye({
     !H && h && U(z) && q && /* @__PURE__ */ v.jsx(
       Pe,
       {
-        showCaption: u,
+        showCaption: p,
         setShowCaption: D,
         editor: x,
         buttonRef: a,
@@ -892,4 +906,4 @@ export {
   oe as RIGHT_CLICK_IMAGE_COMMAND,
   Ye as default
 };
-//# sourceMappingURL=ImageComponent-ea1adbce.js.map
+//# sourceMappingURL=ImageComponent-d49dd9f8.js.map