sykpcomposer 0.0.234 → 0.0.237
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{ImageComponent-14a99b51.js → ImageComponent-7dd445e0.js} +214 -207
- package/dist/ImageComponent-7dd445e0.js.map +1 -0
- package/dist/{InlineImageComponent-cb417251.js → InlineImageComponent-ff54a10a.js} +3 -3
- package/dist/{InlineImageComponent-cb417251.js.map → InlineImageComponent-ff54a10a.js.map} +1 -1
- package/dist/{Placeholder-8fc2a26a.js → Placeholder-9d1fd3df.js} +2 -2
- package/dist/{Placeholder-8fc2a26a.js.map → Placeholder-9d1fd3df.js.map} +1 -1
- package/dist/{index-50fb6c9a.js → index-0822510c.js} +8566 -8538
- package/dist/index-0822510c.js.map +1 -0
- package/dist/index.es.js +1 -1
- package/dist/index.umd.js +91 -91
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/dist/ImageComponent-14a99b51.js.map +0 -1
- package/dist/index-50fb6c9a.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { d as De, L as be, P as Re } from "./Placeholder-
|
|
3
|
-
import f, { useRef as Y, PureComponent as Ee, createRef as
|
|
1
|
+
import { j as D, u as ce, a as ae, d as G, w as q, x as J, $ as Q, b as ne, c as de, e as le, f as ge, C as I, g as ue, k as pe, h as we, I as me, r as xe, i as fe, l as ye, m as Ce, t as ve } from "./index-0822510c.js";
|
|
2
|
+
import { d as De, L as be, P as Re } from "./Placeholder-9d1fd3df.js";
|
|
3
|
+
import f, { useRef as Y, PureComponent as Ee, createRef as re, useState as U, useCallback as V, useEffect as te, Suspense as Me } from "react";
|
|
4
4
|
import "react-dom";
|
|
5
5
|
function ee(l, t, e) {
|
|
6
6
|
return Math.min(Math.max(l, t), e);
|
|
@@ -17,12 +17,12 @@ function Pe({
|
|
|
17
17
|
buttonRef: e,
|
|
18
18
|
imageRef: o,
|
|
19
19
|
maxWidth: n,
|
|
20
|
-
editor:
|
|
20
|
+
editor: r,
|
|
21
21
|
showCaption: h,
|
|
22
22
|
setShowCaption: p,
|
|
23
23
|
captionsEnabled: s
|
|
24
24
|
}) {
|
|
25
|
-
const
|
|
25
|
+
const i = Y(null), d = Y({
|
|
26
26
|
priority: "",
|
|
27
27
|
value: "default"
|
|
28
28
|
}), a = Y({
|
|
@@ -35,15 +35,15 @@ function Pe({
|
|
|
35
35
|
startWidth: 0,
|
|
36
36
|
startX: 0,
|
|
37
37
|
startY: 0
|
|
38
|
-
}), g =
|
|
39
|
-
const u = w === y.east || w === y.west, m = w === y.north || w === y.south, H = w & y.north && w & y.west || w & y.south && w & y.east,
|
|
38
|
+
}), g = r.getRootElement(), c = g !== null ? g.getBoundingClientRect().width - 20 : 100, C = g !== null ? g.getBoundingClientRect().height - 20 : 100, P = 100, x = 100, $ = (w) => {
|
|
39
|
+
const u = w === y.east || w === y.west, m = w === y.north || w === y.south, H = w & y.north && w & y.west || w & y.south && w & y.east, M = u ? "ew" : m ? "ns" : H ? "nwse" : "nesw";
|
|
40
40
|
g !== null && g.style.setProperty(
|
|
41
41
|
"cursor",
|
|
42
|
-
`${
|
|
42
|
+
`${M}-resize`,
|
|
43
43
|
"important"
|
|
44
44
|
), document.body !== null && (document.body.style.setProperty(
|
|
45
45
|
"cursor",
|
|
46
|
-
`${
|
|
46
|
+
`${M}-resize`,
|
|
47
47
|
"important"
|
|
48
48
|
), d.current.value = document.body.style.getPropertyValue(
|
|
49
49
|
"-webkit-user-select"
|
|
@@ -54,63 +54,63 @@ function Pe({
|
|
|
54
54
|
"none",
|
|
55
55
|
"important"
|
|
56
56
|
));
|
|
57
|
-
},
|
|
57
|
+
}, F = () => {
|
|
58
58
|
g !== null && g.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
|
|
59
59
|
"-webkit-user-select",
|
|
60
60
|
d.current.value,
|
|
61
61
|
d.current.priority
|
|
62
62
|
));
|
|
63
63
|
}, z = (w, u) => {
|
|
64
|
-
if (!
|
|
64
|
+
if (!r.isEditable())
|
|
65
65
|
return;
|
|
66
|
-
const m = o.current, H =
|
|
66
|
+
const m = o.current, H = i.current;
|
|
67
67
|
if (m !== null && H !== null) {
|
|
68
68
|
w.preventDefault();
|
|
69
|
-
const { width:
|
|
70
|
-
|
|
69
|
+
const { width: M, height: b } = m.getBoundingClientRect(), v = a.current;
|
|
70
|
+
v.startWidth = M, v.startHeight = b, v.ratio = M / b, v.currentWidth = M, v.currentHeight = b, v.startX = w.clientX, v.startY = w.clientY, v.isResizing = !0, v.direction = u, $(u), l(), H.classList.add("image-control-wrapper--resizing"), m.style.height = `${b}px`, m.style.width = `${M}px`, document.addEventListener("pointermove", L), document.addEventListener("pointerup", k);
|
|
71
71
|
}
|
|
72
|
-
},
|
|
73
|
-
const u = o.current, m = a.current, H = m.direction & (y.east | y.west),
|
|
72
|
+
}, L = (w) => {
|
|
73
|
+
const u = o.current, m = a.current, H = m.direction & (y.east | y.west), M = m.direction & (y.south | y.north);
|
|
74
74
|
if (u !== null && m.isResizing) {
|
|
75
|
-
if (H &&
|
|
75
|
+
if (H && M) {
|
|
76
76
|
let b = Math.floor(m.startX - w.clientX);
|
|
77
77
|
b = m.direction & y.east ? -b : b;
|
|
78
|
-
const
|
|
78
|
+
const v = ee(
|
|
79
79
|
m.startWidth + b,
|
|
80
80
|
P,
|
|
81
81
|
c
|
|
82
|
-
),
|
|
83
|
-
u.style.width = `${
|
|
84
|
-
} else if (
|
|
82
|
+
), j = v / m.ratio;
|
|
83
|
+
u.style.width = `${v}px`, u.style.height = `${j}px`, m.currentHeight = j, m.currentWidth = v;
|
|
84
|
+
} else if (M) {
|
|
85
85
|
let b = Math.floor(m.startY - w.clientY);
|
|
86
86
|
b = m.direction & y.south ? -b : b;
|
|
87
|
-
const
|
|
87
|
+
const v = ee(
|
|
88
88
|
m.startHeight + b,
|
|
89
89
|
x,
|
|
90
90
|
C
|
|
91
91
|
);
|
|
92
|
-
u.style.height = `${
|
|
92
|
+
u.style.height = `${v}px`, u.style.maxHeight = `${v}px`, m.currentHeight = v;
|
|
93
93
|
} else {
|
|
94
94
|
let b = Math.floor(m.startX - w.clientX);
|
|
95
95
|
b = m.direction & y.east ? -b : b;
|
|
96
|
-
const
|
|
96
|
+
const v = ee(
|
|
97
97
|
m.startWidth + b,
|
|
98
98
|
P,
|
|
99
99
|
c
|
|
100
100
|
);
|
|
101
|
-
u.style.width = `${
|
|
101
|
+
u.style.width = `${v}px`, u.style.maxWidth = `${v}px`, m.currentWidth = v;
|
|
102
102
|
}
|
|
103
103
|
u && (u.setAttribute("width", `${m.currentWidth}`), u.setAttribute("height", `${m.currentHeight}`));
|
|
104
104
|
}
|
|
105
105
|
}, k = () => {
|
|
106
|
-
const w = o.current, u = a.current, m =
|
|
106
|
+
const w = o.current, u = a.current, m = i.current;
|
|
107
107
|
if (w !== null && m !== null && u.isResizing) {
|
|
108
|
-
const H = u.currentWidth,
|
|
109
|
-
u.startWidth = 0, u.startHeight = 0, u.ratio = 0, u.startX = 0, u.startY = 0, u.currentWidth = 0, u.currentHeight = 0, u.isResizing = !1, m.classList.remove("image-control-wrapper--resizing"),
|
|
108
|
+
const H = u.currentWidth, M = u.currentHeight;
|
|
109
|
+
u.startWidth = 0, u.startHeight = 0, u.ratio = 0, u.startX = 0, u.startY = 0, u.currentWidth = 0, u.currentHeight = 0, u.isResizing = !1, m.classList.remove("image-control-wrapper--resizing"), F(), t(H, M), document.removeEventListener("pointermove", L), document.removeEventListener("pointerup", k);
|
|
110
110
|
}
|
|
111
111
|
};
|
|
112
|
-
return /* @__PURE__ */
|
|
113
|
-
/* @__PURE__ */
|
|
112
|
+
return /* @__PURE__ */ D.jsxs("div", { ref: i, children: [
|
|
113
|
+
/* @__PURE__ */ D.jsx(
|
|
114
114
|
"div",
|
|
115
115
|
{
|
|
116
116
|
className: "image-resizer image-resizer-n",
|
|
@@ -119,7 +119,7 @@ function Pe({
|
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
),
|
|
122
|
-
/* @__PURE__ */
|
|
122
|
+
/* @__PURE__ */ D.jsx(
|
|
123
123
|
"div",
|
|
124
124
|
{
|
|
125
125
|
className: "image-resizer image-resizer-ne",
|
|
@@ -128,7 +128,7 @@ function Pe({
|
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
),
|
|
131
|
-
/* @__PURE__ */
|
|
131
|
+
/* @__PURE__ */ D.jsx(
|
|
132
132
|
"div",
|
|
133
133
|
{
|
|
134
134
|
className: "image-resizer image-resizer-e",
|
|
@@ -137,7 +137,7 @@ function Pe({
|
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
),
|
|
140
|
-
/* @__PURE__ */
|
|
140
|
+
/* @__PURE__ */ D.jsx(
|
|
141
141
|
"div",
|
|
142
142
|
{
|
|
143
143
|
className: "image-resizer image-resizer-se",
|
|
@@ -146,7 +146,7 @@ function Pe({
|
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
),
|
|
149
|
-
/* @__PURE__ */
|
|
149
|
+
/* @__PURE__ */ D.jsx(
|
|
150
150
|
"div",
|
|
151
151
|
{
|
|
152
152
|
className: "image-resizer image-resizer-s",
|
|
@@ -155,7 +155,7 @@ function Pe({
|
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
157
|
),
|
|
158
|
-
/* @__PURE__ */
|
|
158
|
+
/* @__PURE__ */ D.jsx(
|
|
159
159
|
"div",
|
|
160
160
|
{
|
|
161
161
|
className: "image-resizer image-resizer-sw",
|
|
@@ -164,7 +164,7 @@ function Pe({
|
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
166
|
),
|
|
167
|
-
/* @__PURE__ */
|
|
167
|
+
/* @__PURE__ */ D.jsx(
|
|
168
168
|
"div",
|
|
169
169
|
{
|
|
170
170
|
className: "image-resizer image-resizer-w",
|
|
@@ -173,7 +173,7 @@ function Pe({
|
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
),
|
|
176
|
-
/* @__PURE__ */
|
|
176
|
+
/* @__PURE__ */ D.jsx(
|
|
177
177
|
"div",
|
|
178
178
|
{
|
|
179
179
|
className: "image-resizer image-resizer-nw",
|
|
@@ -184,15 +184,15 @@ function Pe({
|
|
|
184
184
|
)
|
|
185
185
|
] });
|
|
186
186
|
}
|
|
187
|
-
const
|
|
187
|
+
const Z = {
|
|
188
188
|
x: 0,
|
|
189
189
|
y: 0,
|
|
190
190
|
width: 0,
|
|
191
191
|
height: 0,
|
|
192
192
|
unit: "px"
|
|
193
|
-
},
|
|
194
|
-
function
|
|
195
|
-
return l.unit === "%" ? { ...
|
|
193
|
+
}, O = (l, t, e) => Math.min(Math.max(l, t), e), He = (...l) => l.filter((t) => t && typeof t == "string").join(" "), ie = (l, t) => l === t || l.width === t.width && l.height === t.height && l.x === t.x && l.y === t.y && l.unit === t.unit;
|
|
194
|
+
function W(l, t, e) {
|
|
195
|
+
return l.unit === "%" ? { ...Z, ...l, unit: "%" } : {
|
|
196
196
|
unit: "%",
|
|
197
197
|
x: l.x ? l.x / t * 100 : 0,
|
|
198
198
|
y: l.y ? l.y / e * 100 : 0,
|
|
@@ -201,38 +201,38 @@ function B(l, t, e) {
|
|
|
201
201
|
};
|
|
202
202
|
}
|
|
203
203
|
function _(l, t, e) {
|
|
204
|
-
return l.unit ? l.unit === "px" ? { ...
|
|
204
|
+
return l.unit ? l.unit === "px" ? { ...Z, ...l, unit: "px" } : {
|
|
205
205
|
unit: "px",
|
|
206
206
|
x: l.x ? l.x * t / 100 : 0,
|
|
207
207
|
y: l.y ? l.y * e / 100 : 0,
|
|
208
208
|
width: l.width ? l.width * t / 100 : 0,
|
|
209
209
|
height: l.height ? l.height * e / 100 : 0
|
|
210
|
-
} : { ...
|
|
210
|
+
} : { ...Z, ...l, unit: "px" };
|
|
211
211
|
}
|
|
212
|
-
function oe(l, t, e, o, n,
|
|
213
|
-
const
|
|
214
|
-
let d = Math.min(
|
|
215
|
-
t && (t > 1 ? (d = h ? h * t : d, a = d / t, g = p * t) : (a =
|
|
216
|
-
const C = o - (
|
|
217
|
-
C < 0 && (
|
|
218
|
-
const P = n - (
|
|
219
|
-
if (P < 0 && (
|
|
220
|
-
const x =
|
|
212
|
+
function oe(l, t, e, o, n, r = 0, h = 0, p = o, s = n) {
|
|
213
|
+
const i = { ...l };
|
|
214
|
+
let d = Math.min(r, o), a = Math.min(h, n), g = Math.min(p, o), c = Math.min(s, n);
|
|
215
|
+
t && (t > 1 ? (d = h ? h * t : d, a = d / t, g = p * t) : (a = r ? r / t : a, d = a * t, c = s / t)), i.y < 0 && (i.height = Math.max(i.height + i.y, a), i.y = 0), i.x < 0 && (i.width = Math.max(i.width + i.x, d), i.x = 0);
|
|
216
|
+
const C = o - (i.x + i.width);
|
|
217
|
+
C < 0 && (i.x = Math.min(i.x, o - d), i.width += C);
|
|
218
|
+
const P = n - (i.y + i.height);
|
|
219
|
+
if (P < 0 && (i.y = Math.min(i.y, n - a), i.height += P), i.width < d && ((e === "sw" || e == "nw") && (i.x -= d - i.width), i.width = d), i.height < a && ((e === "nw" || e == "ne") && (i.y -= a - i.height), i.height = a), i.width > g && ((e === "sw" || e == "nw") && (i.x -= g - i.width), i.width = g), i.height > c && ((e === "nw" || e == "ne") && (i.y -= c - i.height), i.height = c), t) {
|
|
220
|
+
const x = i.width / i.height;
|
|
221
221
|
if (x < t) {
|
|
222
|
-
const $ = Math.max(
|
|
223
|
-
(e === "nw" || e == "ne") && (
|
|
222
|
+
const $ = Math.max(i.width / t, a);
|
|
223
|
+
(e === "nw" || e == "ne") && (i.y -= $ - i.height), i.height = $;
|
|
224
224
|
} else if (x > t) {
|
|
225
|
-
const $ = Math.max(
|
|
226
|
-
(e === "sw" || e == "nw") && (
|
|
225
|
+
const $ = Math.max(i.height * t, d);
|
|
226
|
+
(e === "sw" || e == "nw") && (i.x -= $ - i.width), i.width = $;
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
|
-
return
|
|
229
|
+
return i;
|
|
230
230
|
}
|
|
231
231
|
function $e(l, t, e, o) {
|
|
232
232
|
const n = { ...l };
|
|
233
233
|
return t === "ArrowLeft" ? o === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : o === "w" ? (n.x -= e, n.width += e) : o === "sw" ? (n.x -= e, n.width += e, n.height += e) : o === "ne" ? (n.y += e, n.width -= e, n.height -= e) : o === "e" ? n.width -= e : o === "se" && (n.width -= e, n.height -= e) : t === "ArrowRight" && (o === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : o === "w" ? (n.x += e, n.width -= e) : o === "sw" ? (n.x += e, n.width -= e, n.height -= e) : o === "ne" ? (n.y -= e, n.width += e, n.height += e) : o === "e" ? n.width += e : o === "se" && (n.width += e, n.height += e)), t === "ArrowUp" ? o === "nw" ? (n.x -= e, n.y -= e, n.width += e, n.height += e) : o === "n" ? (n.y -= e, n.height += e) : o === "ne" ? (n.y -= e, n.width += e, n.height += e) : o === "sw" ? (n.x += e, n.width -= e, n.height -= e) : o === "s" ? n.height -= e : o === "se" && (n.width -= e, n.height -= e) : t === "ArrowDown" && (o === "nw" ? (n.x += e, n.y += e, n.width -= e, n.height -= e) : o === "n" ? (n.y += e, n.height -= e) : o === "ne" ? (n.y += e, n.width -= e, n.height -= e) : o === "sw" ? (n.x -= e, n.width += e, n.height += e) : o === "s" ? n.height += e : o === "se" && (n.width += e, n.height += e)), n;
|
|
234
234
|
}
|
|
235
|
-
const
|
|
235
|
+
const K = { capture: !0, passive: !1 };
|
|
236
236
|
let ze = 0;
|
|
237
237
|
const X = class S extends Ee {
|
|
238
238
|
constructor() {
|
|
@@ -244,27 +244,27 @@ const X = class S extends Ee {
|
|
|
244
244
|
clientX: 0,
|
|
245
245
|
clientY: 0,
|
|
246
246
|
isResize: !0
|
|
247
|
-
}, this.componentRef =
|
|
247
|
+
}, this.componentRef = re(), this.mediaRef = re(), this.initChangeCalled = !1, this.instanceId = `rc-${ze++}`, this.state = {
|
|
248
248
|
cropIsActive: !1,
|
|
249
249
|
newCropIsBeingDrawn: !1
|
|
250
250
|
}, this.onCropPointerDown = (t) => {
|
|
251
251
|
const { crop: e, disabled: o } = this.props, n = this.getBox();
|
|
252
252
|
if (!e)
|
|
253
253
|
return;
|
|
254
|
-
const
|
|
254
|
+
const r = _(e, n.width, n.height);
|
|
255
255
|
if (o)
|
|
256
256
|
return;
|
|
257
257
|
t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
|
|
258
258
|
const h = t.target.dataset.ord, p = !!h;
|
|
259
|
-
let s = t.clientX,
|
|
259
|
+
let s = t.clientX, i = t.clientY, d = r.x, a = r.y;
|
|
260
260
|
if (h) {
|
|
261
261
|
const g = t.clientX - n.x, c = t.clientY - n.y;
|
|
262
262
|
let C = 0, P = 0;
|
|
263
|
-
h === "ne" || h == "e" ? (C = g - (
|
|
263
|
+
h === "ne" || h == "e" ? (C = g - (r.x + r.width), P = c - r.y, d = r.x, a = r.y + r.height) : h === "se" || h === "s" ? (C = g - (r.x + r.width), P = c - (r.y + r.height), d = r.x, a = r.y) : h === "sw" || h == "w" ? (C = g - r.x, P = c - (r.y + r.height), d = r.x + r.width, a = r.y) : (h === "nw" || h == "n") && (C = g - r.x, P = c - r.y, d = r.x + r.width, a = r.y + r.height), s = d + n.x + C, i = a + n.y + P;
|
|
264
264
|
}
|
|
265
265
|
this.evData = {
|
|
266
266
|
startClientX: s,
|
|
267
|
-
startClientY:
|
|
267
|
+
startClientY: i,
|
|
268
268
|
startCropX: d,
|
|
269
269
|
startCropY: a,
|
|
270
270
|
clientX: t.clientX,
|
|
@@ -273,14 +273,14 @@ const X = class S extends Ee {
|
|
|
273
273
|
ord: h
|
|
274
274
|
}, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
|
|
275
275
|
}, this.onComponentPointerDown = (t) => {
|
|
276
|
-
const { crop: e, disabled: o, locked: n, keepSelection:
|
|
277
|
-
if (o || n ||
|
|
276
|
+
const { crop: e, disabled: o, locked: n, keepSelection: r, onChange: h } = this.props, p = this.getBox();
|
|
277
|
+
if (o || n || r && e)
|
|
278
278
|
return;
|
|
279
279
|
t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
|
|
280
|
-
const s = t.clientX - p.x,
|
|
280
|
+
const s = t.clientX - p.x, i = t.clientY - p.y, d = {
|
|
281
281
|
unit: "px",
|
|
282
282
|
x: s,
|
|
283
|
-
y:
|
|
283
|
+
y: i,
|
|
284
284
|
width: 0,
|
|
285
285
|
height: 0
|
|
286
286
|
};
|
|
@@ -288,50 +288,50 @@ const X = class S extends Ee {
|
|
|
288
288
|
startClientX: t.clientX,
|
|
289
289
|
startClientY: t.clientY,
|
|
290
290
|
startCropX: s,
|
|
291
|
-
startCropY:
|
|
291
|
+
startCropY: i,
|
|
292
292
|
clientX: t.clientX,
|
|
293
293
|
clientY: t.clientY,
|
|
294
294
|
isResize: !0
|
|
295
|
-
}, this.mouseDownOnCrop = !0, h(_(d, p.width, p.height),
|
|
295
|
+
}, this.mouseDownOnCrop = !0, h(_(d, p.width, p.height), W(d, p.width, p.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
|
|
296
296
|
}, this.onDocPointerMove = (t) => {
|
|
297
|
-
const { crop: e, disabled: o, onChange: n, onDragStart:
|
|
297
|
+
const { crop: e, disabled: o, onChange: n, onDragStart: r } = this.props, h = this.getBox();
|
|
298
298
|
if (o || !e || !this.mouseDownOnCrop)
|
|
299
299
|
return;
|
|
300
|
-
t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0,
|
|
300
|
+
t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, r && r(t));
|
|
301
301
|
const { evData: p } = this;
|
|
302
302
|
p.clientX = t.clientX, p.clientY = t.clientY;
|
|
303
303
|
let s;
|
|
304
|
-
p.isResize ? s = this.resizeCrop() : s = this.dragCrop(),
|
|
304
|
+
p.isResize ? s = this.resizeCrop() : s = this.dragCrop(), ie(e, s) || n(
|
|
305
305
|
_(s, h.width, h.height),
|
|
306
|
-
|
|
306
|
+
W(s, h.width, h.height)
|
|
307
307
|
);
|
|
308
308
|
}, this.onComponentKeyDown = (t) => {
|
|
309
|
-
const { crop: e, disabled: o, onChange: n, onComplete:
|
|
309
|
+
const { crop: e, disabled: o, onChange: n, onComplete: r } = this.props;
|
|
310
310
|
if (o)
|
|
311
311
|
return;
|
|
312
312
|
const h = t.key;
|
|
313
313
|
let p = !1;
|
|
314
314
|
if (!e)
|
|
315
315
|
return;
|
|
316
|
-
const s = this.getBox(),
|
|
317
|
-
if (h === "ArrowLeft" ? (
|
|
318
|
-
t.cancelable && t.preventDefault(),
|
|
319
|
-
const a = _(
|
|
320
|
-
n(a, g),
|
|
316
|
+
const s = this.getBox(), i = this.makePixelCrop(s), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? S.nudgeStepLarge : t.shiftKey ? S.nudgeStepMedium : S.nudgeStep;
|
|
317
|
+
if (h === "ArrowLeft" ? (i.x -= d, p = !0) : h === "ArrowRight" ? (i.x += d, p = !0) : h === "ArrowUp" ? (i.y -= d, p = !0) : h === "ArrowDown" && (i.y += d, p = !0), p) {
|
|
318
|
+
t.cancelable && t.preventDefault(), i.x = O(i.x, 0, s.width - i.width), i.y = O(i.y, 0, s.height - i.height);
|
|
319
|
+
const a = _(i, s.width, s.height), g = W(i, s.width, s.height);
|
|
320
|
+
n(a, g), r && r(a, g);
|
|
321
321
|
}
|
|
322
322
|
}, this.onHandlerKeyDown = (t, e) => {
|
|
323
323
|
const {
|
|
324
324
|
aspect: o = 0,
|
|
325
325
|
crop: n,
|
|
326
|
-
disabled:
|
|
326
|
+
disabled: r,
|
|
327
327
|
minWidth: h = 0,
|
|
328
328
|
minHeight: p = 0,
|
|
329
329
|
maxWidth: s,
|
|
330
|
-
maxHeight:
|
|
330
|
+
maxHeight: i,
|
|
331
331
|
onChange: d,
|
|
332
332
|
onComplete: a
|
|
333
333
|
} = this.props, g = this.getBox();
|
|
334
|
-
if (
|
|
334
|
+
if (r || !n)
|
|
335
335
|
return;
|
|
336
336
|
if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight")
|
|
337
337
|
t.stopPropagation(), t.preventDefault();
|
|
@@ -346,15 +346,15 @@ const X = class S extends Ee {
|
|
|
346
346
|
h,
|
|
347
347
|
p,
|
|
348
348
|
s,
|
|
349
|
-
|
|
349
|
+
i
|
|
350
350
|
);
|
|
351
|
-
if (!
|
|
352
|
-
const $ =
|
|
351
|
+
if (!ie(n, x)) {
|
|
352
|
+
const $ = W(x, g.width, g.height);
|
|
353
353
|
d(x, $), a && a(x, $);
|
|
354
354
|
}
|
|
355
355
|
}, this.onDocPointerDone = (t) => {
|
|
356
|
-
const { crop: e, disabled: o, onComplete: n, onDragEnd:
|
|
357
|
-
this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1,
|
|
356
|
+
const { crop: e, disabled: o, onComplete: n, onDragEnd: r } = this.props, h = this.getBox();
|
|
357
|
+
this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, r && r(t), n && n(_(e, h.width, h.height), W(e, h.width, h.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
|
|
358
358
|
}, this.onDragFocus = () => {
|
|
359
359
|
var t;
|
|
360
360
|
(t = this.componentRef.current) == null || t.scrollTo(0, 0);
|
|
@@ -369,24 +369,24 @@ const X = class S extends Ee {
|
|
|
369
369
|
const t = this.mediaRef.current;
|
|
370
370
|
if (!t)
|
|
371
371
|
return { x: 0, y: 0, width: 0, height: 0 };
|
|
372
|
-
const { x: e, y: o, width: n, height:
|
|
373
|
-
return { x: e, y: o, width: n, height:
|
|
372
|
+
const { x: e, y: o, width: n, height: r } = t.getBoundingClientRect();
|
|
373
|
+
return { x: e, y: o, width: n, height: r };
|
|
374
374
|
}
|
|
375
375
|
componentDidUpdate(t) {
|
|
376
376
|
const { crop: e, onComplete: o } = this.props;
|
|
377
377
|
if (o && !t.crop && e) {
|
|
378
|
-
const { width: n, height:
|
|
379
|
-
n &&
|
|
378
|
+
const { width: n, height: r } = this.getBox();
|
|
379
|
+
n && r && o(_(e, n, r), W(e, n, r));
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
382
|
componentWillUnmount() {
|
|
383
383
|
this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
|
|
384
384
|
}
|
|
385
385
|
bindDocMove() {
|
|
386
|
-
this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove,
|
|
386
|
+
this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, K), this.document.addEventListener("pointerup", this.onDocPointerDone, K), this.document.addEventListener("pointercancel", this.onDocPointerDone, K), this.docMoveBound = !0);
|
|
387
387
|
}
|
|
388
388
|
unbindDocMove() {
|
|
389
|
-
this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove,
|
|
389
|
+
this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, K), this.document.removeEventListener("pointerup", this.onDocPointerDone, K), this.document.removeEventListener("pointercancel", this.onDocPointerDone, K), this.docMoveBound = !1);
|
|
390
390
|
}
|
|
391
391
|
getCropStyle() {
|
|
392
392
|
const { crop: t } = this.props;
|
|
@@ -399,24 +399,24 @@ const X = class S extends Ee {
|
|
|
399
399
|
};
|
|
400
400
|
}
|
|
401
401
|
dragCrop() {
|
|
402
|
-
const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), n = t.clientX - t.startClientX,
|
|
403
|
-
return o.x =
|
|
402
|
+
const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), n = t.clientX - t.startClientX, r = t.clientY - t.startClientY;
|
|
403
|
+
return o.x = O(t.startCropX + n, 0, e.width - o.width), o.y = O(t.startCropY + r, 0, e.height - o.height), o;
|
|
404
404
|
}
|
|
405
405
|
getPointRegion(t, e, o, n) {
|
|
406
|
-
const { evData:
|
|
406
|
+
const { evData: r } = this, h = r.clientX - t.x, p = r.clientY - t.y;
|
|
407
407
|
let s;
|
|
408
|
-
n && e ? s = e === "nw" || e === "n" || e === "ne" : s = p <
|
|
409
|
-
let
|
|
410
|
-
return o && e ?
|
|
408
|
+
n && e ? s = e === "nw" || e === "n" || e === "ne" : s = p < r.startCropY;
|
|
409
|
+
let i;
|
|
410
|
+
return o && e ? i = e === "nw" || e === "w" || e === "sw" : i = h < r.startCropX, i ? s ? "nw" : "sw" : s ? "ne" : "se";
|
|
411
411
|
}
|
|
412
412
|
resolveMinDimensions(t, e, o = 0, n = 0) {
|
|
413
|
-
const
|
|
414
|
-
return !e || !
|
|
413
|
+
const r = Math.min(o, t.width), h = Math.min(n, t.height);
|
|
414
|
+
return !e || !r && !h ? [r, h] : e > 1 ? r ? [r, r / e] : [h * e, h] : h ? [h * e, h] : [r, r / e];
|
|
415
415
|
}
|
|
416
416
|
resizeCrop() {
|
|
417
|
-
const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: n } = this.props,
|
|
418
|
-
let s = this.makePixelCrop(
|
|
419
|
-
const
|
|
417
|
+
const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: n } = this.props, r = this.getBox(), [h, p] = this.resolveMinDimensions(r, e, this.props.minWidth, this.props.minHeight);
|
|
418
|
+
let s = this.makePixelCrop(r);
|
|
419
|
+
const i = this.getPointRegion(r, t.ord, h, p), d = t.ord || i;
|
|
420
420
|
let a = t.clientX - t.startClientX, g = t.clientY - t.startClientY;
|
|
421
421
|
(h && d === "nw" || d === "w" || d === "sw") && (a = Math.min(a, -h)), (p && d === "nw" || d === "n" || d === "ne") && (g = Math.min(g, -p));
|
|
422
422
|
const c = {
|
|
@@ -426,19 +426,19 @@ const X = class S extends Ee {
|
|
|
426
426
|
width: 0,
|
|
427
427
|
height: 0
|
|
428
428
|
};
|
|
429
|
-
|
|
429
|
+
i === "ne" ? (c.x = t.startCropX, c.width = a, e ? (c.height = c.width / e, c.y = t.startCropY - c.height) : (c.height = Math.abs(g), c.y = t.startCropY - c.height)) : i === "se" ? (c.x = t.startCropX, c.y = t.startCropY, c.width = a, e ? c.height = c.width / e : c.height = g) : i === "sw" ? (c.x = t.startCropX + a, c.y = t.startCropY, c.width = Math.abs(a), e ? c.height = c.width / e : c.height = g) : i === "nw" && (c.x = t.startCropX + a, c.width = Math.abs(a), e ? (c.height = c.width / e, c.y = t.startCropY - c.height) : (c.height = Math.abs(g), c.y = t.startCropY + g));
|
|
430
430
|
const C = oe(
|
|
431
431
|
c,
|
|
432
432
|
e,
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
433
|
+
i,
|
|
434
|
+
r.width,
|
|
435
|
+
r.height,
|
|
436
436
|
h,
|
|
437
437
|
p,
|
|
438
438
|
o,
|
|
439
439
|
n
|
|
440
440
|
);
|
|
441
|
-
return e || S.xyOrds.indexOf(d) > -1 ? s = C : S.xOrds.indexOf(d) > -1 ? (s.x = C.x, s.width = C.width) : S.yOrds.indexOf(d) > -1 && (s.y = C.y, s.height = C.height), s.x =
|
|
441
|
+
return e || S.xyOrds.indexOf(d) > -1 ? s = C : S.xOrds.indexOf(d) > -1 ? (s.x = C.x, s.width = C.width) : S.yOrds.indexOf(d) > -1 && (s.y = C.y, s.height = C.height), s.x = O(s.x, 0, r.width - s.width), s.y = O(s.y, 0, r.height - s.height), s;
|
|
442
442
|
}
|
|
443
443
|
renderCropSelection() {
|
|
444
444
|
const {
|
|
@@ -446,7 +446,7 @@ const X = class S extends Ee {
|
|
|
446
446
|
disabled: e,
|
|
447
447
|
locked: o,
|
|
448
448
|
renderSelectionAddon: n,
|
|
449
|
-
ruleOfThirds:
|
|
449
|
+
ruleOfThirds: r,
|
|
450
450
|
crop: h
|
|
451
451
|
} = this.props, p = this.getCropStyle();
|
|
452
452
|
if (h)
|
|
@@ -543,43 +543,43 @@ const X = class S extends Ee {
|
|
|
543
543
|
}
|
|
544
544
|
)),
|
|
545
545
|
n && /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__selection-addon", onPointerDown: (s) => s.stopPropagation() }, n(this.state)),
|
|
546
|
-
|
|
546
|
+
r && /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ f.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
|
|
547
547
|
);
|
|
548
548
|
}
|
|
549
549
|
makePixelCrop(t) {
|
|
550
|
-
const e = { ...
|
|
550
|
+
const e = { ...Z, ...this.props.crop || {} };
|
|
551
551
|
return _(e, t.width, t.height);
|
|
552
552
|
}
|
|
553
553
|
render() {
|
|
554
|
-
const { aspect: t, children: e, circularCrop: o, className: n, crop:
|
|
554
|
+
const { aspect: t, children: e, circularCrop: o, className: n, crop: r, disabled: h, locked: p, style: s, ruleOfThirds: i } = this.props, { cropIsActive: d, newCropIsBeingDrawn: a } = this.state, g = r ? this.renderCropSelection() : null, c = He(
|
|
555
555
|
"ReactCrop",
|
|
556
556
|
n,
|
|
557
557
|
d && "ReactCrop--active",
|
|
558
558
|
h && "ReactCrop--disabled",
|
|
559
559
|
p && "ReactCrop--locked",
|
|
560
560
|
a && "ReactCrop--new-crop",
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
!this.dragStarted &&
|
|
561
|
+
r && t && "ReactCrop--fixed-aspect",
|
|
562
|
+
r && o && "ReactCrop--circular-crop",
|
|
563
|
+
r && i && "ReactCrop--rule-of-thirds",
|
|
564
|
+
!this.dragStarted && r && !r.width && !r.height && "ReactCrop--invisible-crop",
|
|
565
565
|
o && "ReactCrop--no-animate"
|
|
566
566
|
);
|
|
567
|
-
return /* @__PURE__ */ f.createElement("div", { ref: this.componentRef, className: c, style: s }, /* @__PURE__ */ f.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e),
|
|
567
|
+
return /* @__PURE__ */ f.createElement("div", { ref: this.componentRef, className: c, style: s }, /* @__PURE__ */ f.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), r ? /* @__PURE__ */ f.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ f.createElement("defs", null, /* @__PURE__ */ f.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ f.createElement("rect", { width: "100%", height: "100%", fill: "white" }), o ? /* @__PURE__ */ f.createElement(
|
|
568
568
|
"ellipse",
|
|
569
569
|
{
|
|
570
|
-
cx: `${
|
|
571
|
-
cy: `${
|
|
572
|
-
rx: `${
|
|
573
|
-
ry: `${
|
|
570
|
+
cx: `${r.x + r.width / 2}${r.unit}`,
|
|
571
|
+
cy: `${r.y + r.height / 2}${r.unit}`,
|
|
572
|
+
rx: `${r.width / 2}${r.unit}`,
|
|
573
|
+
ry: `${r.height / 2}${r.unit}`,
|
|
574
574
|
fill: "black"
|
|
575
575
|
}
|
|
576
576
|
) : /* @__PURE__ */ f.createElement(
|
|
577
577
|
"rect",
|
|
578
578
|
{
|
|
579
|
-
x: `${
|
|
580
|
-
y: `${
|
|
581
|
-
width: `${
|
|
582
|
-
height: `${
|
|
579
|
+
x: `${r.x}${r.unit}`,
|
|
580
|
+
y: `${r.y}${r.unit}`,
|
|
581
|
+
width: `${r.width}${r.unit}`,
|
|
582
|
+
height: `${r.height}${r.unit}`,
|
|
583
583
|
fill: "black"
|
|
584
584
|
}
|
|
585
585
|
))), /* @__PURE__ */ f.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, g);
|
|
@@ -606,14 +606,14 @@ function Se({
|
|
|
606
606
|
src: e,
|
|
607
607
|
width: o,
|
|
608
608
|
height: n,
|
|
609
|
-
maxWidth:
|
|
609
|
+
maxWidth: r,
|
|
610
610
|
imageRef: h,
|
|
611
611
|
startCrop: p,
|
|
612
612
|
setStartCrop: s,
|
|
613
|
-
isFocused:
|
|
613
|
+
isFocused: i,
|
|
614
614
|
nodeKey: d
|
|
615
615
|
}) {
|
|
616
|
-
const [a, g] =
|
|
616
|
+
const [a, g] = U(null), [c, C] = U(null), [P, x] = U({
|
|
617
617
|
//@ts-ignore
|
|
618
618
|
unit: "px",
|
|
619
619
|
// Can be 'px' or '%'
|
|
@@ -621,15 +621,15 @@ function Se({
|
|
|
621
621
|
y: 25,
|
|
622
622
|
width: 50,
|
|
623
623
|
height: 50
|
|
624
|
-
}), [$] = ae(),
|
|
624
|
+
}), [$] = ae(), F = () => {
|
|
625
625
|
if (a) {
|
|
626
626
|
const u = h.current;
|
|
627
627
|
if (!u || !a)
|
|
628
628
|
return;
|
|
629
|
-
const m = u.naturalWidth / u.width, H = u.naturalHeight / u.height,
|
|
629
|
+
const m = u.naturalWidth / u.width, H = u.naturalHeight / u.height, M = new OffscreenCanvas(
|
|
630
630
|
a.width * m,
|
|
631
631
|
a.height * H
|
|
632
|
-
), b =
|
|
632
|
+
), b = M.getContext("2d");
|
|
633
633
|
if (!b)
|
|
634
634
|
throw new Error("No 2D context available");
|
|
635
635
|
b.drawImage(
|
|
@@ -642,12 +642,19 @@ function Se({
|
|
|
642
642
|
0,
|
|
643
643
|
a.width * m,
|
|
644
644
|
a.height * H
|
|
645
|
-
),
|
|
646
|
-
const
|
|
647
|
-
C(
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
645
|
+
), M.convertToBlob({ type: "image/png" }).then((v) => {
|
|
646
|
+
const j = URL.createObjectURL(v);
|
|
647
|
+
C(j), s(!1);
|
|
648
|
+
const A = new FileReader();
|
|
649
|
+
A.onload = () => {
|
|
650
|
+
const B = A.result;
|
|
651
|
+
$.update(() => {
|
|
652
|
+
const R = J(d);
|
|
653
|
+
Q(R) && B && R.setSrc(B);
|
|
654
|
+
});
|
|
655
|
+
}, A.onerror = () => {
|
|
656
|
+
console.log("error");
|
|
657
|
+
}, A.readAsDataURL(v);
|
|
651
658
|
});
|
|
652
659
|
}
|
|
653
660
|
}, z = () => {
|
|
@@ -665,17 +672,17 @@ function Se({
|
|
|
665
672
|
}
|
|
666
673
|
return !u;
|
|
667
674
|
});
|
|
668
|
-
},
|
|
675
|
+
}, L = Y(null), k = Y(null);
|
|
669
676
|
te(() => {
|
|
670
|
-
a && (
|
|
677
|
+
a && (L.current = a);
|
|
671
678
|
}, [a]);
|
|
672
679
|
const w = (u) => {
|
|
673
680
|
k.current && !k.current.contains(u.target) && s(!1);
|
|
674
681
|
};
|
|
675
682
|
return te(() => (document.addEventListener("mousedown", w), () => {
|
|
676
683
|
document.removeEventListener("mousedown", w);
|
|
677
|
-
}), []), /* @__PURE__ */
|
|
678
|
-
|
|
684
|
+
}), []), /* @__PURE__ */ D.jsxs("div", { ref: k, children: [
|
|
685
|
+
i && /* @__PURE__ */ D.jsx(
|
|
679
686
|
"button",
|
|
680
687
|
{
|
|
681
688
|
style: { zIndex: 999 },
|
|
@@ -684,22 +691,22 @@ function Se({
|
|
|
684
691
|
children: "Crop"
|
|
685
692
|
}
|
|
686
693
|
),
|
|
687
|
-
p && /* @__PURE__ */
|
|
694
|
+
p && /* @__PURE__ */ D.jsx(
|
|
688
695
|
"button",
|
|
689
696
|
{
|
|
690
697
|
style: { zIndex: 999 },
|
|
691
698
|
className: "image-caption-button",
|
|
692
|
-
onClick: () =>
|
|
699
|
+
onClick: () => F(),
|
|
693
700
|
children: "Apply Crop"
|
|
694
701
|
}
|
|
695
702
|
),
|
|
696
|
-
p ? /* @__PURE__ */
|
|
703
|
+
p ? /* @__PURE__ */ D.jsx(
|
|
697
704
|
Ne,
|
|
698
705
|
{
|
|
699
706
|
crop: P,
|
|
700
707
|
onChange: (u) => x(u),
|
|
701
708
|
onComplete: (u) => g(u),
|
|
702
|
-
children: /* @__PURE__ */
|
|
709
|
+
children: /* @__PURE__ */ D.jsx(
|
|
703
710
|
"img",
|
|
704
711
|
{
|
|
705
712
|
className: t || void 0,
|
|
@@ -708,7 +715,7 @@ function Se({
|
|
|
708
715
|
ref: h,
|
|
709
716
|
style: {
|
|
710
717
|
height: n,
|
|
711
|
-
maxWidth:
|
|
718
|
+
maxWidth: r,
|
|
712
719
|
width: o
|
|
713
720
|
},
|
|
714
721
|
draggable: "false"
|
|
@@ -717,7 +724,7 @@ function Se({
|
|
|
717
724
|
}
|
|
718
725
|
) : (
|
|
719
726
|
// When startCrop is false, show the cropped image or original image
|
|
720
|
-
/* @__PURE__ */
|
|
727
|
+
/* @__PURE__ */ D.jsx(
|
|
721
728
|
"img",
|
|
722
729
|
{
|
|
723
730
|
className: t || void 0,
|
|
@@ -726,7 +733,7 @@ function Se({
|
|
|
726
733
|
ref: h,
|
|
727
734
|
style: {
|
|
728
735
|
height: n,
|
|
729
|
-
maxWidth:
|
|
736
|
+
maxWidth: r,
|
|
730
737
|
width: o
|
|
731
738
|
},
|
|
732
739
|
draggable: "false"
|
|
@@ -741,68 +748,68 @@ function Ye({
|
|
|
741
748
|
nodeKey: e,
|
|
742
749
|
width: o,
|
|
743
750
|
height: n,
|
|
744
|
-
maxWidth:
|
|
751
|
+
maxWidth: r,
|
|
745
752
|
resizable: h,
|
|
746
753
|
showCaption: p,
|
|
747
754
|
caption: s
|
|
748
755
|
}) {
|
|
749
|
-
const
|
|
750
|
-
(
|
|
751
|
-
if (a &&
|
|
752
|
-
|
|
753
|
-
const N =
|
|
754
|
-
if (
|
|
756
|
+
const i = Y(null), d = Y(null), [a, g, c] = ce(e), [C, P] = U(!1), [x] = ae(), [$, F] = U(null), [z, L] = U(!1), k = Y(null), w = V(
|
|
757
|
+
(R) => {
|
|
758
|
+
if (a && G(q())) {
|
|
759
|
+
R.preventDefault();
|
|
760
|
+
const N = J(e);
|
|
761
|
+
if (Q(N))
|
|
755
762
|
return N.remove(), !0;
|
|
756
763
|
}
|
|
757
764
|
return !1;
|
|
758
765
|
},
|
|
759
766
|
[a, e]
|
|
760
|
-
), u =
|
|
761
|
-
(
|
|
762
|
-
const
|
|
763
|
-
if (a &&
|
|
767
|
+
), u = V(
|
|
768
|
+
(R) => {
|
|
769
|
+
const E = q(), N = d.current;
|
|
770
|
+
if (a && G(E) && E.getNodes().length === 1) {
|
|
764
771
|
if (p)
|
|
765
|
-
return ne(null),
|
|
772
|
+
return ne(null), R.preventDefault(), s.focus(), !0;
|
|
766
773
|
if (N !== null && N !== document.activeElement)
|
|
767
|
-
return
|
|
774
|
+
return R.preventDefault(), N.focus(), !0;
|
|
768
775
|
}
|
|
769
776
|
return !1;
|
|
770
777
|
},
|
|
771
778
|
[s, a, p]
|
|
772
|
-
), m =
|
|
773
|
-
(
|
|
779
|
+
), m = V(
|
|
780
|
+
(R) => k.current === s || d.current === R.target ? (ne(null), x.update(() => {
|
|
774
781
|
g(!0);
|
|
775
|
-
const
|
|
776
|
-
|
|
782
|
+
const E = x.getRootElement();
|
|
783
|
+
E !== null && E.focus();
|
|
777
784
|
}), !0) : !1,
|
|
778
785
|
[s, x, g]
|
|
779
|
-
), H =
|
|
780
|
-
(
|
|
781
|
-
const
|
|
782
|
-
return C ? !0 :
|
|
786
|
+
), H = V(
|
|
787
|
+
(R) => {
|
|
788
|
+
const E = R;
|
|
789
|
+
return C ? !0 : E.target === i.current ? (E.shiftKey ? g(!a) : (c(), g(!0)), !0) : !1;
|
|
783
790
|
},
|
|
784
791
|
[C, a, g, c]
|
|
785
|
-
),
|
|
786
|
-
(
|
|
792
|
+
), M = V(
|
|
793
|
+
(R) => {
|
|
787
794
|
x.getEditorState().read(() => {
|
|
788
|
-
const
|
|
789
|
-
|
|
795
|
+
const E = q();
|
|
796
|
+
R.target.tagName === "IMG" && de(E) && E.getNodes().length === 1 && x.dispatchCommand(
|
|
790
797
|
se,
|
|
791
|
-
|
|
798
|
+
R
|
|
792
799
|
);
|
|
793
800
|
});
|
|
794
801
|
},
|
|
795
802
|
[x]
|
|
796
803
|
);
|
|
797
804
|
te(() => {
|
|
798
|
-
let
|
|
799
|
-
const
|
|
800
|
-
x.registerUpdateListener(({ editorState:
|
|
801
|
-
|
|
805
|
+
let R = !0;
|
|
806
|
+
const E = x.getRootElement(), N = le(
|
|
807
|
+
x.registerUpdateListener(({ editorState: T }) => {
|
|
808
|
+
R && F(T.read(() => q()));
|
|
802
809
|
}),
|
|
803
810
|
x.registerCommand(
|
|
804
811
|
fe,
|
|
805
|
-
(
|
|
812
|
+
(T, he) => (k.current = he, !1),
|
|
806
813
|
I
|
|
807
814
|
),
|
|
808
815
|
x.registerCommand(
|
|
@@ -817,7 +824,7 @@ function Ye({
|
|
|
817
824
|
),
|
|
818
825
|
x.registerCommand(
|
|
819
826
|
me,
|
|
820
|
-
(
|
|
827
|
+
(T) => T.target === i.current ? (T.preventDefault(), !0) : !1,
|
|
821
828
|
I
|
|
822
829
|
),
|
|
823
830
|
x.registerCommand(
|
|
@@ -833,8 +840,8 @@ function Ye({
|
|
|
833
840
|
x.registerCommand(ue, u, I),
|
|
834
841
|
x.registerCommand(ge, m, I)
|
|
835
842
|
);
|
|
836
|
-
return
|
|
837
|
-
|
|
843
|
+
return E == null || E.addEventListener("contextmenu", M), () => {
|
|
844
|
+
R = !1, N(), E == null || E.removeEventListener("contextmenu", M);
|
|
838
845
|
};
|
|
839
846
|
}, [
|
|
840
847
|
c,
|
|
@@ -846,63 +853,63 @@ function Ye({
|
|
|
846
853
|
u,
|
|
847
854
|
m,
|
|
848
855
|
H,
|
|
849
|
-
|
|
856
|
+
M,
|
|
850
857
|
g
|
|
851
858
|
]);
|
|
852
859
|
const b = () => {
|
|
853
860
|
x.update(() => {
|
|
854
|
-
const
|
|
855
|
-
|
|
861
|
+
const R = J(e);
|
|
862
|
+
Q(R) && R.setShowCaption(!0);
|
|
856
863
|
});
|
|
857
|
-
},
|
|
864
|
+
}, v = (R, E) => {
|
|
858
865
|
setTimeout(() => {
|
|
859
866
|
P(!1);
|
|
860
867
|
}, 200), x.update(() => {
|
|
861
|
-
const N =
|
|
862
|
-
console.log(N, "node"),
|
|
868
|
+
const N = J(e);
|
|
869
|
+
console.log(N, "node"), Q(N) && N.setWidthAndHeight(R, E);
|
|
863
870
|
});
|
|
864
|
-
},
|
|
871
|
+
}, j = () => {
|
|
865
872
|
z || P(!0);
|
|
866
|
-
},
|
|
867
|
-
return /* @__PURE__ */
|
|
868
|
-
/* @__PURE__ */
|
|
873
|
+
}, A = a && G($) && !C, B = a || C;
|
|
874
|
+
return /* @__PURE__ */ D.jsx(Me, { fallback: null, children: /* @__PURE__ */ D.jsxs(D.Fragment, { children: [
|
|
875
|
+
/* @__PURE__ */ D.jsx("div", { draggable: A, children: /* @__PURE__ */ D.jsx(
|
|
869
876
|
Se,
|
|
870
877
|
{
|
|
871
|
-
className:
|
|
878
|
+
className: B ? `focused ${G($) ? "draggable" : ""}` : null,
|
|
872
879
|
src: l,
|
|
873
880
|
altText: t,
|
|
874
881
|
width: o,
|
|
875
882
|
height: n,
|
|
876
|
-
maxWidth:
|
|
877
|
-
imageRef:
|
|
883
|
+
maxWidth: r,
|
|
884
|
+
imageRef: i,
|
|
878
885
|
startCrop: z,
|
|
879
|
-
setStartCrop:
|
|
880
|
-
isFocused:
|
|
886
|
+
setStartCrop: L,
|
|
887
|
+
isFocused: B,
|
|
881
888
|
nodeKey: e
|
|
882
889
|
}
|
|
883
890
|
) }),
|
|
884
|
-
p && /* @__PURE__ */
|
|
891
|
+
p && /* @__PURE__ */ D.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ D.jsx(De, { initialEditor: s, children: /* @__PURE__ */ D.jsx(
|
|
885
892
|
ye,
|
|
886
893
|
{
|
|
887
|
-
contentEditable: /* @__PURE__ */
|
|
888
|
-
placeholder: /* @__PURE__ */
|
|
894
|
+
contentEditable: /* @__PURE__ */ D.jsx(be, { className: "ImageNode__contentEditable" }),
|
|
895
|
+
placeholder: /* @__PURE__ */ D.jsx(Re, { className: "ImageNode__placeholder", children: "Enter a caption..." }),
|
|
889
896
|
ErrorBoundary: Ce
|
|
890
897
|
}
|
|
891
898
|
) }) }),
|
|
892
|
-
!z && h &&
|
|
899
|
+
!z && h && G($) && B && /* @__PURE__ */ D.jsx(
|
|
893
900
|
Pe,
|
|
894
901
|
{
|
|
895
902
|
showCaption: p,
|
|
896
903
|
setShowCaption: b,
|
|
897
904
|
editor: x,
|
|
898
905
|
buttonRef: d,
|
|
899
|
-
maxWidth:
|
|
906
|
+
maxWidth: r,
|
|
900
907
|
onResizeStart: z ? () => {
|
|
901
|
-
} :
|
|
908
|
+
} : j,
|
|
902
909
|
onResizeEnd: z ? () => {
|
|
903
|
-
} :
|
|
910
|
+
} : v,
|
|
904
911
|
captionsEnabled: !1,
|
|
905
|
-
imageRef:
|
|
912
|
+
imageRef: i
|
|
906
913
|
}
|
|
907
914
|
)
|
|
908
915
|
] }) });
|
|
@@ -911,4 +918,4 @@ export {
|
|
|
911
918
|
se as RIGHT_CLICK_IMAGE_COMMAND,
|
|
912
919
|
Ye as default
|
|
913
920
|
};
|
|
914
|
-
//# sourceMappingURL=ImageComponent-
|
|
921
|
+
//# sourceMappingURL=ImageComponent-7dd445e0.js.map
|