@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,159 lines (1,158 loc) • 39.9 kB
JavaScript
import { inject as we, ref as h, onMounted as Ae, onUnmounted as ut, watch as ee, defineComponent as Te, createVNode as S, withModifiers as q } from "vue";
import { isPlainObject as Me, cloneDeep as Se } from "lodash-es";
const ze = {}, Ee = {};
function ve(e) {
const { properties: i, title: n, ignore: g } = e, o = g && Array.isArray(g), t = Object.keys(i).reduce((f, d) => ((!o || !g.find((A) => A === d)) && (f[d] = i[d].type === "object" && i[d].properties ? ve(i[d]) : Se(i[d].default)), f), {});
if (n && (!o || !g.find((f) => f === "id"))) {
const f = n.toLowerCase().replace(/-/g, "_");
t.id = `${f}_${Math.random().toString().slice(2, 6)}`;
}
return t;
}
function st(e) {
const { properties: i, title: n, required: g } = e;
if (g && Array.isArray(g)) {
const o = g.reduce((t, f) => (t[f] = i[f].type === "object" && i[f].properties ? ve(i[f]) : Se(i[f].default), t), {});
if (n && g.find((t) => t === "id")) {
const t = n.toLowerCase().replace(/-/g, "_");
o.id = `${t}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
return {
type: n
};
}
function ke(e, i = {}, n) {
const g = ze[e];
if (g) {
let o = st(g);
const t = Ee[e];
return o = t ? t({ getSchemaByType: ke }, o, i, n) : o, o;
}
return null;
}
function ot(e, i) {
const n = ve(i);
return Object.keys(n).reduce((g, o) => (Object.prototype.hasOwnProperty.call(e, o) && (g[o] && Me(g[o]) && Me(e[o] || !e[o]) ? Object.assign(g[o], e[o] || {}) : g[o] = e[o]), g), n), n;
}
function Be(e, i) {
return Object.keys(e).filter((g) => e[g] != null).reduce((g, o) => {
if (i.has(o)) {
const t = i.get(o);
if (typeof t == "string")
g[t] = e[o];
else {
const f = t(o, e[o], e);
Object.assign(g, f);
}
} else
g[o] = e[o];
return g;
}, {});
}
function ct(e, i, n = /* @__PURE__ */ new Map()) {
const g = ot(e, i);
return Be(g, n);
}
function ft(e = {}) {
function i(s, p, m, l) {
if (typeof m == "number")
return l[s].length === m;
if (typeof m == "object") {
const u = Object.keys(m)[0], T = m[u];
if (u === "not")
return Number(l[s].length) !== Number(T);
if (u === "moreThan")
return Number(l[s].length) >= Number(T);
if (u === "lessThan")
return Number(l[s].length) <= Number(T);
}
return !1;
}
function n(s, p, m, l) {
return l[s] && l[s].propertyValue && String(l[s].propertyValue.value) === String(m);
}
const g = /* @__PURE__ */ new Map([
["length", i],
["getProperty", n]
]);
Object.keys(e).reduce((s, p) => (s.set(p, e[p]), s), g);
function o(s, p) {
const m = s;
return typeof p == "number" ? [{ target: m, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: m, operator: "getProperty", param: s, value: !!p }] : typeof p == "object" ? Object.keys(p).map((l) => {
if (l === "length")
return { target: m, operator: "length", param: null, value: p[l] };
const u = l, T = p[l];
return { target: m, operator: "getProperty", param: u, value: T };
}) : [];
}
function t(s) {
return Object.keys(s).reduce((m, l) => {
const u = o(l, s[l]);
return m.push(...u), m;
}, []);
}
function f(s, p) {
if (g.has(s.operator)) {
const m = g.get(s.operator);
return m && m(s.target, s.param, s.value, p) || !1;
}
return !1;
}
function d(s, p) {
return t(s).reduce((u, T) => u && f(T, p), !0);
}
function A(s, p) {
const m = Object.keys(s), l = m.includes("allOf"), u = m.includes("anyOf"), T = l || u, C = (T ? s[T ? l ? "allOf" : "anyOf" : "allOf"] : [s]).map((L) => d(L, p));
return l ? !C.includes(!1) : C.includes(!0);
}
return { parseValueSchema: A };
}
const vt = {}, ht = {};
ft();
function gt(e, i, n = /* @__PURE__ */ new Map(), g = (f, d, A, s) => d, o = {}, t = (f) => f) {
return ze[i.title] = i, Ee[i.title] = g, vt[i.title] = o, ht[i.title] = t, (f = {}, d = !0) => {
if (!d)
return Be(f, n);
const A = ct(f, i, n), s = Object.keys(e).reduce((p, m) => (p[m] = e[m].default, p), {});
return Object.assign(s, A);
};
}
function dt(e, i) {
return { customClass: i.class, customStyle: i.style };
}
function mt(e, i, n) {
return i;
}
const pt = /* @__PURE__ */ new Map([
["appearance", dt]
]), yt = "https://json-schema.org/draft/2020-12/schema", xt = "https://farris-design.gitee.io/image-cropper.schema.json", bt = "image-cropper", Mt = "A Farris Component", wt = "object", At = {
id: {
description: "The unique identifier for image-cropper",
type: "string"
},
type: {
description: "The type string of image-cropper",
type: "string",
default: "image-cropper"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, Tt = [
"id",
"type"
], St = {
$schema: yt,
$id: xt,
title: bt,
description: Mt,
type: wt,
properties: At,
required: Tt
}, zt = "image-cropper", Et = "A Farris Component", kt = "object", Bt = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
},
behavior: {
description: "Basic Infomation",
title: "行为",
properties: {
readonly: {
description: "",
title: "只读",
type: "string"
},
required: {
description: "",
title: "必填",
type: "boolean"
},
visible: {
description: "",
title: "可见",
type: "boolean"
},
placeholder: {
description: "",
title: "提示文本",
type: "string"
},
tabindex: {
description: "",
title: "tab索引",
type: "number"
}
}
}
}, Dt = {
title: zt,
description: Et,
type: kt,
categories: Bt
}, he = {
/** 输出图片格式 */
format: { type: String, default: "png" },
/** 保持长宽比例 */
maintainAspectRatio: { type: Boolean, default: !0 },
/** scale缩放 rotate旋转 flipH横向反转 flipV垂直翻转 执行变化 */
transform: { type: Object, default: { scale: 0, rotate: 0, flipH: !1, flipV: !1 } },
/** 宽高比例 width/height */
aspectRatio: { type: Number, default: 1 },
/** 裁剪后图片被调整为的宽度 */
resizeToWidth: { type: Number, default: 0 },
/** 裁剪后图片被调整为的高度 */
resizeToHeight: { type: Number, default: 0 },
/** 裁剪最小宽度 */
cropperMinWidth: { type: Number, default: 0 },
/** 裁剪最小高度 */
cropperMinHeight: { type: Number, default: 0 },
/** 旋转画布 1 = 90deg */
canvasRotation: { type: Number, default: 0 },
/** 裁剪形状是否为圆形 */
roundCropper: { type: Boolean, default: !0 },
/** 启用这个选项将确保较小的图像不会被放大 */
onlyScaleDown: { type: Boolean, default: !1 },
/** 适用于使用jpeg或webp作为输出格式时。输入0到100之间的数字将决定输出图像的质量 */
imageQuality: { type: Number, default: 92 },
/** 是否每次修改cropper的位置或大小时，cropper都会发出一个图像 */
autoCrop: { type: Boolean, default: !0 },
/** 背景色 */
backgroundColor: { type: String, default: "" },
/** 是否在图像周围添加填充以使其适合长宽比 */
containWithinAspectRatio: { type: Boolean, default: !1 },
/** 隐藏 */
hideResizeSquares: { type: Boolean, default: !1 },
/** 图片加载错误的提示 */
loadImageErrorText: { type: String, default: "图片加载错误" },
/** 图片居中 */
alignImage: { type: String, default: "center" },
/** 是否禁用 */
disabled: { type: Boolean, default: !1 },
/** 图片路径 */
imageURL: { type: String, default: "./src/assets/image01.png" },
/** 图片事件变化 */
imageChangedEvent: { type: Object, default: null },
/** imageBase64 */
imageBase64: { type: String, default: "" },
/** imageFile */
imageFile: { type: Object, default: null },
/** 裁剪的坐标 */
cropper: {
type: Object,
default: {
x1: -100,
y1: -100,
x2: 1e4,
y2: 1e4
}
}
}, De = gt(he, St, pt, mt, Dt);
var ie = /* @__PURE__ */ ((e) => (e.Move = "move", e.Resize = "resize", e))(ie || {});
function Pt() {
function e(o) {
switch (typeof o == "string" && (o = i(o)), o) {
case 2:
return { rotate: 0, flip: !0 };
case 3:
return { rotate: 2, flip: !1 };
case 4:
return { rotate: 2, flip: !0 };
case 5:
return { rotate: 1, flip: !0 };
case 6:
return { rotate: 1, flip: !1 };
case 7:
return { rotate: 3, flip: !0 };
case 8:
return { rotate: 3, flip: !1 };
default:
return { rotate: 0, flip: !1 };
}
}
function i(o) {
const t = new DataView(n(o));
if (t.getUint16(0, !1) !== 65496)
return -2;
const f = t.byteLength;
let d = 2;
for (; d < f; ) {
if (t.getUint16(d + 2, !1) <= 8)
return -1;
const A = t.getUint16(d, !1);
if (d += 2, A === 65505) {
if (t.getUint32(d += 2, !1) !== 1165519206)
return -1;
const s = t.getUint16(d += 6, !1) === 18761;
d += t.getUint32(d + 4, s);
const p = t.getUint16(d, s);
d += 2;
for (let m = 0; m < p; m++)
if (t.getUint16(d + m * 12, s) === 274)
return t.getUint16(d + m * 12 + 8, s);
} else {
if ((A & 65280) !== 65280)
break;
d += t.getUint16(d, !1);
}
}
return -1;
}
function n(o) {
o = o.replace(/^data:([^;]+);base64,/gmi, "");
const t = atob(o), f = t.length, d = new Uint8Array(f);
for (let A = 0; A < f; A++)
d[A] = t.charCodeAt(A);
return d.buffer;
}
function g(o, t, f) {
const d = o.width, A = o.height;
t = Math.round(t), f = Math.round(f);
const s = d / t, p = A / f, m = Math.ceil(s / 2), l = Math.ceil(p / 2), u = o.getContext("2d");
if (u) {
const T = u.getImageData(0, 0, d, A), w = u.createImageData(t, f), { data: $ } = T, C = w.data;
for (let U = 0; U < f; U++)
for (let L = 0; L < t; L++) {
const F = (L + U * t) * 4, D = U * p;
let P = 0, y = 0, c = 0, z = 0, E = 0, x = 0, M = 0;
const R = Math.floor(L * s), W = Math.floor(U * p);
let Q = Math.ceil((L + 1) * s), J = Math.ceil((U + 1) * p);
Q = Math.min(Q, d), J = Math.min(J, A);
for (let _ = W; _ < J; _++) {
const k = Math.abs(D - _) / l, le = L * s, te = k * k;
for (let N = R; N < Q; N++) {
const O = Math.abs(le - N) / m, H = Math.sqrt(te + O * O);
if (H >= 1)
continue;
P = 2 * H * H * H - 3 * H * H + 1;
const V = 4 * (N + _ * d);
M += P * $[V + 3], c += P, $[V + 3] < 255 && (P = P * $[V + 3] / 250), z += P * $[V], E += P * $[V + 1], x += P * $[V + 2], y += P;
}
}
C[F] = z / y, C[F + 1] = E / y, C[F + 2] = x / y, C[F + 3] = M / c;
}
o.width = t, o.height = f, u.putImageData(w, 0, 0);
}
}
return {
resizeCanvas: g,
getTransformationsFromExifData: e
};
}
function Lt(e, i, n, g) {
function o(l, u) {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * n.value, l = Math.max(e.value.x2 - i.value.width, 0), u = Math.max(0 - e.value.y1, 0), (l > 0 || u > 0) && (e.value.x2 -= u * n.value > l ? u * n.value : l, e.value.y1 += u * n.value > l ? u : l / n.value);
}
function t(l, u) {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * n.value, l = Math.max(e.value.x2 - i.value.width, 0), u = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || u > 0) && (e.value.x2 -= u * n.value > l ? u * n.value : l, e.value.y2 -= u * n.value > l ? u : l / n.value);
}
function f(l, u) {
e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / n.value, l = Math.max(0 - e.value.x1, 0), u = Math.max(0 - e.value.y1, 0), (l > 0 || u > 0) && (e.value.x1 += u * n.value > l ? u * n.value : l, e.value.y1 += u * n.value > l ? u : l / n.value);
}
function d(l, u) {
e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / n.value, l = Math.max(e.value.x2 - i.value.width, 0), u = Math.max(0 - e.value.y1, 0), (l > 0 || u > 0) && (e.value.x2 -= u * n.value > l ? u * n.value : l, e.value.y1 += u * n.value > l ? u : l / n.value);
}
function A(l, u) {
e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / n.value, l = Math.max(e.value.x2 - i.value.width, 0), u = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || u > 0) && (e.value.x2 -= u * n.value > l ? u * n.value : l, e.value.y2 -= u * n.value > l ? u : l / n.value);
}
function s(l, u) {
e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / n.value, l = Math.max(0 - e.value.x1, 0), u = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || u > 0) && (e.value.x1 += u * n.value > l ? u * n.value : l, e.value.y2 -= u * n.value > l ? u : l / n.value);
}
function p() {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * n.value, e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / n.value;
const l = Math.max(0 - e.value.x1, 0), u = Math.max(e.value.x2 - i.value.width, 0), T = Math.max(e.value.y2 - i.value.height, 0), w = Math.max(0 - e.value.y1, 0);
(l > 0 || u > 0 || T > 0 || w > 0) && (e.value.x1 += T * n.value > l ? T * n.value : l, e.value.x2 -= w * n.value > u ? w * n.value : u, e.value.y1 += w * n.value > u ? w : u / n.value, e.value.y2 -= T * n.value > l ? T : l / n.value);
}
function m() {
if (i.value.width && i.value.height)
switch (g.position) {
case "top":
o(0, 0);
break;
case "bottom":
t(0, 0);
break;
case "topleft":
f(0, 0);
break;
case "topright":
d(0, 0);
break;
case "right":
case "bottomright":
A(0, 0);
break;
case "left":
case "bottomleft":
s(0, 0);
break;
case "center":
p();
break;
}
}
return { checkAspectRatio: m };
}
function Pe(e, i) {
const { resizeCanvas: n, getTransformationsFromExifData: g } = Pt(), o = we("NotifyService"), t = h(e.cropper), f = h(e.transform), d = h(e.cropperMinWidth), A = h(e.maintainAspectRatio), s = h(e.aspectRatio), p = h(e.autoCrop), m = h(e.backgroundColor), l = h(e.resizeToWidth), u = h(e.onlyScaleDown), T = h(e.containWithinAspectRatio), w = h(e.canvasRotation), $ = h(e.format), C = h(e.imageQuality), U = h(e.resizeToHeight), L = h(e.cropperMinHeight), F = h(""), D = h(!0), P = h(!0);
let y, c, z = 0, E, x, M;
const R = h(null), W = h(""), Q = h(""), J = h("0px"), _ = h(), k = h({ width: 100, height: 100 }), le = ie;
let te, N = 20, O = 20, H = !1, V = { rotate: 0, flip: !1 }, b = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
const ge = h(e.imageChangedEvent), ne = h(e.imageURL), Le = h(e.imageBase64), We = h(e.imageFile);
function Ce() {
Q.value = "scaleX(" + (f.value.scale || 1) * (f.value.flipH ? -1 : 1) + ")scaleY(" + (f.value.scale || 1) * (f.value.flipV ? -1 : 1) + ")rotate(" + (f.value.rotate || 0) + "deg)";
}
function X() {
P.value = !1, _.value = null, F.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", b = {
active: !1,
type: null,
position: null,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
clientX: 0,
clientY: 0
}, k.value = {
width: 0,
height: 0
}, y = {
width: 0,
height: 0
}, c = {
width: 0,
height: 0
}, t.value.x1 = -100, t.value.y1 = -100, t.value.x2 = 1e4, t.value.y2 = 1e4;
}
function Re(a) {
return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(a);
}
function _e() {
if (w.value += V.rotate, T.value && y.width && y.height) {
if (w.value % 2) {
const v = y.width * s.value, B = y.height / s.value;
return {
width: Math.max(y.height, v),
height: Math.max(y.width, B)
};
}
const a = y.height * s.value, r = y.width / s.value;
return {
width: Math.max(y.width, a),
height: Math.max(y.height, r)
};
}
return w.value % 2 ? {
height: y.width,
width: y.height
} : {
width: y.width,
height: y.height
};
}
function $e() {
w.value += V.rotate;
const a = _e(), r = document.createElement("canvas");
a.width && a.height && (r.width = a.width, r.height = a.height);
const v = r.getContext("2d");
return y.width && y.height && M && (v == null || v.setTransform(V.flip ? -1 : 1, 0, 0, 1, r.width / 2, r.height / 2), v == null || v.rotate(Math.PI * (w.value / 2)), v == null || v.drawImage(M, -y.width / 2, -y.height / 2)), r.toDataURL();
}
function Ue(a) {
return new Promise((r) => {
te = a, F.value = a, _.value = new Image(), _.value.onload = () => {
var v, B;
c.width = (v = _.value) == null ? void 0 : v.naturalWidth, c.height = (B = _.value) == null ? void 0 : B.naturalHeight, r();
}, _.value.src = te;
});
}
function de() {
if (!M || !M.complete || !V)
return Promise.reject(new Error("No image loaded"));
const a = $e();
return Ue(a);
}
function re(a) {
const r = (v) => {
o.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片上传错误，请重试" }]
}), D.value = !1, H = !0, i.emit("loadImageFailed"), M = null, W.value = "";
};
M = new Image(), M.onload = () => {
W.value = a, V = g(a), y.width = M == null ? void 0 : M.naturalWidth, y.height = M == null ? void 0 : M.naturalHeight, de().then(() => {
H = !1;
}).catch(r);
}, M.onerror = r, M.src = a;
}
function He(a, r) {
Re(r) ? (H = !1, re(a)) : (o.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片类型不正确,请重试" }]
}), D.value = !1, H = !0, i.emit("loadImageFailed"));
}
function me(a) {
const r = new FileReader();
r.onload = (v) => He(v.target.result, a.type), r.readAsDataURL(a);
}
function pe(a) {
const r = new Image();
r.onerror = () => {
o.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片加载错误，请重试" }]
}), D.value = !1, H = !0, i.emit("loadImageFailed");
}, r.onload = () => {
H = !1;
const v = document.createElement("canvas"), B = v.getContext("2d");
v.width = r.width, v.height = r.height, B == null || B.drawImage(r, 0, 0), re(v.toDataURL());
}, r.crossOrigin = "anonymous", r.src = a;
}
function je() {
return R.value && R.value && R.value.offsetWidth > 0;
}
function ue() {
if (R.value) {
const a = R.value;
k.value.width = a.offsetWidth, k.value.height = a.offsetHeight, J.value = "calc(50% - " + k.value.width / 2 + "px)";
}
}
function Ne() {
_.value && k.value.width && (N = d.value > 0 ? Math.max(20, d.value / _.value.width * k.value.width) : 20);
}
function Oe() {
A.value ? O = Math.max(20, N / s.value) : L.value > 0 && _.value && k.value.height ? O = Math.max(20, L.value / _.value.height * k.value.height) : O = 20;
}
function se() {
_.value ? (Ne(), Oe()) : (N = 20, O = 20);
}
function Fe() {
const a = R.value, r = h({ x1: 0, x2: 0, y1: 0, y2: 0 });
if (a && c.width && c.height) {
const v = c.width / a.offsetWidth;
r.value = {
x1: Math.round(t.value.x1 * v),
y1: Math.round(t.value.y1 * v),
x2: Math.round(t.value.x2 * v),
y2: Math.round(t.value.y2 * v)
}, T.value || (r.value.x1 = Math.max(r.value.x1, 0), r.value.y1 = Math.max(r.value.y1, 0), r.value.x2 = Math.min(r.value.x2, c.width), r.value.y2 = Math.min(r.value.y2, c.height));
}
return r.value;
}
function Ve() {
w.value += V.rotate;
const a = R.value, r = h({ x1: 0, x2: 0, y1: 0, y2: 0 });
if (a && c.height && c.width && y.height && y.width) {
const v = c.width / a.offsetWidth;
let B, j;
w.value % 2 ? (B = (c.width - y.height) / 2, j = (c.height - y.width) / 2) : (B = (c.width - y.width) / 2, j = (c.height - y.height) / 2), r.value = {
x1: Math.round(t.value.x1 * v) - B,
y1: Math.round(t.value.y1 * v) - j,
x2: Math.round(t.value.x2 * v) - B,
y2: Math.round(t.value.y2 * v) - j
}, T.value || (r.value.x1 = Math.max(r.value.x1, 0), r.value.y1 = Math.max(r.value.y1, 0), r.value.x2 = Math.min(r.value.x2, c.width), r.value.y2 = Math.min(r.value.y2, c.height));
}
return r.value;
}
function qe(a, r) {
if (l.value > 0) {
if (!u.value || a > l.value)
return l.value / a;
} else if (U.value > 0 && (!u.value || r > U.value))
return U.value / r;
return 1;
}
function Ie() {
return Math.min(1, Math.max(0, C.value / 100));
}
function Qe(a) {
return a.toDataURL("image/" + $.value, Ie());
}
function Ge() {
if (R.value && R.value && _.value != null) {
const a = Fe(), r = a.x2 - a.x1, v = a.y2 - a.y1, B = document.createElement("canvas");
B.width = r, B.height = v;
const j = B.getContext("2d");
if (j) {
m.value != null && (j.fillStyle = m.value, j.fillRect(0, 0, r, v));
const G = (f.value.scale || 1) * (f.value.flipH ? -1 : 1), Z = (f.value.scale || 1) * (f.value.flipV ? -1 : 1);
c.width && c.height && (j.setTransform(G, 0, 0, Z, c.width / 2, c.height / 2), j.translate(-a.x1 / G, -a.y1 / Z), j.rotate((f.value.rotate || 0) * Math.PI / 180), j.drawImage(_.value, -c.width / 2, -c.height / 2));
const I = {
width: r,
height: v,
imagePosition: a,
cropperPosition: { ...t.value }
};
T.value && (I.offsetImagePosition = Ve());
const K = qe(r, v);
return K !== 1 && (I.width = Math.round(r * K), I.height = A.value ? Math.round(I.width / s.value) : Math.round(v * K), n(B, I.width, I.height)), I.base64 = Qe(B), i.emit("imageCropped", I), I;
}
}
return null;
}
function ae() {
p.value && Ge();
}
function ye() {
const a = R.value;
if (a) {
if (!A.value)
t.value.x1 = 0, t.value.x2 = a.offsetWidth, t.value.y1 = 0, t.value.y2 = a.offsetHeight;
else if (a.offsetWidth / s.value < a.offsetHeight) {
t.value.x1 = 0, t.value.x2 = a.offsetWidth;
const r = a.offsetWidth / s.value;
t.value.y1 = (a.offsetHeight - r) / 2, t.value.y2 = t.value.y1 + r;
} else {
t.value.y1 = 0, t.value.y2 = a.offsetHeight;
const r = a.offsetHeight * s.value;
t.value.x1 = (a.offsetWidth - r) / 2, t.value.x2 = t.value.x1 + r;
}
ae(), P.value = !0;
}
}
function xe() {
z > 40 ? (o.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片加载超时，请重试" }]
}), H = !0, D.value = !1, i.emit("loadImageFailed")) : je() ? (H = !1, ue(), se(), ye(), i.emit("cropperReady", { ...k.value })) : (z++, setTimeout(() => xe(), 50));
}
function Je() {
_.value != null && (D.value = !1, i.emit("imageLoaded"), z = 0, setTimeout(() => xe()));
}
function Ze() {
const a = R.value;
(k.value.width !== (a == null ? void 0 : a.offsetWidth) || k.value.height !== (a == null ? void 0 : a.offsetHeight)) && k.value.width && k.value.height && a && (t.value.x1 = t.value.x1 * a.offsetWidth / k.value.width, t.value.x2 = t.value.x2 * a.offsetWidth / k.value.width, t.value.y1 = t.value.y1 * a.offsetHeight / k.value.height, t.value.y2 = t.value.y2 * a.offsetHeight / k.value.height);
}
const Ye = () => {
Ze(), ue(), se();
}, be = () => {
clearTimeout(x), x = setTimeout(Ye, 300);
};
Ae(() => {
window.addEventListener("resize", be), ne.value && (X(), D.value = !0, pe(ne.value));
}), ut(() => {
window.removeEventListener("resize", be);
});
function Xe() {
b.active && (b.active = !1, ae());
}
function oe(a) {
return (a.touches && a.touches[0] ? a.touches[0].clientX : a.clientX) || 0;
}
function ce(a) {
return (a.touches && a.touches[0] ? a.touches[0].clientY : a.clientY) || 0;
}
function Ke(a, r, v = null) {
b && b.active || (a.preventDefault && a.preventDefault(), b = {
active: !0,
type: r,
position: v,
clientX: oe(a),
clientY: ce(a),
...t.value
});
}
function fe(a = !1) {
t.value.x1 < 0 && (t.value.x2 -= a ? t.value.x1 : 0, t.value.x1 = 0), t.value.y1 < 0 && (t.value.y2 -= a ? t.value.y1 : 0, t.value.y1 = 0), t.value.x2 > k.value.width && (t.value.x1 -= a ? t.value.x2 - k.value.width : 0, t.value.x2 = k.value.width), t.value.y2 > k.value.height && (t.value.y1 -= a ? t.value.y2 - k.value.height : 0, t.value.y2 = k.value.height);
}
function et(a) {
const r = oe(a) - b.clientX, v = ce(a) - b.clientY;
t.value.x1 = b.x1 + r, t.value.y1 = b.y1 + v, t.value.x2 = b.x2 + r, t.value.y2 = b.y2 + v;
}
const { checkAspectRatio: tt } = Lt(t, k, s, b);
function at(a) {
const r = oe(a) - b.clientX, v = ce(a) - b.clientY;
switch (b.position) {
case "left":
t.value.x1 = Math.min(b.x1 + r, t.value.x2 - N);
break;
case "topleft":
t.value.x1 = Math.min(b.x1 + r, t.value.x2 - N), t.value.y1 = Math.min(b.y1 + v, t.value.y2 - O);
break;
case "top":
t.value.y1 = Math.min(b.y1 + v, t.value.y2 - O);
break;
case "topright":
t.value.x2 = Math.max(b.x2 + r, t.value.x1 + N), t.value.y1 = Math.min(b.y1 + v, t.value.y2 - O);
break;
case "right":
t.value.x2 = Math.max(b.x2 + r, t.value.x1 + N);
break;
case "bottomright":
t.value.x2 = Math.max(b.x2 + r, t.value.x1 + N), t.value.y2 = Math.max(b.y2 + v, t.value.y1 + O);
break;
case "bottom":
t.value.y2 = Math.max(b.y2 + v, t.value.y1 + O);
break;
case "bottomleft":
t.value.x1 = Math.min(b.x1 + r, t.value.x2 - N), t.value.y2 = Math.max(b.y2 + v, t.value.y1 + O);
break;
case "center":
const { scale: B } = a, j = Math.abs(b.x2 - b.x1) * B, G = Math.abs(b.y2 - b.y1) * B, { x1: Z } = t.value, { y1: I } = t.value;
t.value.x1 = Math.min(b.clientX - j / 2, t.value.x2 - N), t.value.y1 = Math.min(b.clientY - G / 2, t.value.y2 - O), t.value.x2 = Math.max(b.clientX + j / 2, Z + N), t.value.y2 = Math.max(b.clientY + G / 2, I + O);
break;
}
A.value && tt();
}
function it(a) {
b && b.active && (a.stopPropagation && a.stopPropagation(), a.preventDefault && a.preventDefault(), clearTimeout(E), E = setTimeout(() => {
b.type === ie.Move ? (et(a), fe(!0)) : b.type === ie.Resize && (at(a), fe(!1));
}, 300));
}
return ee(ge, (a) => {
X(), a && a.target && a.target.files && a.target.files.length > 0 && (D.value = !0, me(a.target.files[0]));
}), ee(ne, (a) => {
a ? (X(), D.value = !0, pe(a)) : (o.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片路径为空" }]
}), D.value = !1, H = !0);
}), ee(Le, (a) => {
X(), D.value = !0, re(a);
}), ee(We, (a) => {
X(), a && (D.value = !0, me(a));
}), ee(
() => [
e.containWithinAspectRatio,
e.canvasRotation,
e.cropper,
e.aspectRatio,
e.transform,
e.imageChangedEvent
],
([a, r, v, B, j, G], [Z, I, K, lt, nt, rt]) => {
M && M.complete && V && (a !== Z || r !== I) && de(), v !== K && (ue(), se(), fe(!1), ae()), B !== lt && P.value && ye(), j !== nt && (Ce(), ae()), G !== rt && (ge.value = G);
}
), {
uploadError: H,
imageVisible: P,
backgroundColor: m,
sourceImage: R,
safeImgDataUrl: F,
safeTransformStyle: Q,
maxSize: k,
cropper: t,
marginLeft: J,
moveTypes: le,
isLoading: D,
startMove: Ke,
imageLoadedInView: Je,
moveStop: Xe,
moveImg: it
};
}
const Y = /* @__PURE__ */ Te({
name: "FImageCropper",
props: he,
emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
setup(e, i) {
const n = h(e.alignImage), g = h(e.roundCropper), o = h(e.hideResizeSquares), t = h(e.loadImageErrorText), f = h(e.disabled), d = h(null), {
uploadError: A,
imageVisible: s,
backgroundColor: p,
sourceImage: m,
safeImgDataUrl: l,
safeTransformStyle: u,
maxSize: T,
cropper: w,
marginLeft: $,
moveTypes: C,
isLoading: U,
startMove: L,
imageLoadedInView: F,
moveStop: D,
moveImg: P
} = Pe(e, i);
function y(x) {
return S("span", {
class: `farris-image-cropper-resize-bar ${x}`,
onMousedown: q((M) => L(M, C.Resize, x), ["prevent"])
}, null);
}
function c(x) {
return S("div", null, [S("span", {
class: `farris-image-cropper-resize-bar ${x}`,
onMousedown: q((M) => L(M, C.Resize, x), ["prevent"])
}, [S("span", {
class: "farris-image-cropper-square"
}, null)]), S("span", {
class: "farris-image-cropper-resize top"
}, [S("span", {
class: "farris-image-cropper-square"
}, null)])]);
}
const z = ["top", "right", "bottom", "left"].map((x) => y(x)), E = ["topleft", "topright", "bottomright", "bottomleft"].map((x) => c(x));
return () => S("div", {
class: ["farris-image-cropper-frame", {
"farris-image-cropper-disabled": f.value
}],
style: {
"text-align": n.value
},
onMousemove: q((x) => P(x), ["prevent"]),
onTouchmove: q((x) => P(x), ["prevent"]),
onMouseup: q(() => D(), ["prevent"]),
onTouchend: q(() => D(), ["prevent"])
}, [!A && S("div", {
ref: d,
class: "farris-image-cropper",
style: [{
background: s.value ? p.value : ""
}]
}, [l.value && S("img", {
title: "farris-source-image",
ref: m,
class: "farris-source-image",
style: [{
visibility: s.value ? "visible" : "hidden"
}, {
transform: u.value
}],
src: l.value,
onLoad: () => F()
}, null), T.value && S("div", {
class: "farris-image-overlay",
style: [{
width: `${T.value.width || 0}px`
}, {
height: `${T.value.height || 0}px`
}, {
"margin-left": n.value === "center" ? $.value : ""
}]
}, null), s.value && S("div", {
class: ["farris-image-cropper-wrapper", {
"farris-image-cropper-rounded": g.value
}],
style: [{
top: `${w.value.y1}px`
}, {
left: `${w.value.x1}px`
}, {
width: `${w.value.x2 - w.value.x1}px`
}, {
height: `${w.value.y2 - w.value.y1}px`
}, {
visibility: s.value ? "visible" : "hidden"
}, {
"margin-left": n.value === "center" ? $.value : ""
}],
tabindex: "0"
}, [S("div", {
class: "farris-image-cropper-move",
onMousedown: q((x) => L(x, C.Move, "topleft"), ["prevent"])
}, null), !o.value && S("div", null, [E, z])])]), U.value && S("div", {
class: "farris-image-cropper-loading"
}, [S("div", {
class: "farris-image-cropper-loading-spinner"
}, null)]), A && S("div", {
class: "farris-image-cropper-error"
}, [t.value])]);
}
});
function Wt(e, i, n) {
var y;
const g = "", o = "", t = h();
function f() {
return (i == null ? void 0 : i.schema.componentType) !== "frame";
}
function d() {
return !1;
}
function A() {
return (i == null ? void 0 : i.schema.componentType) !== "frame";
}
function s() {
return (i == null ? void 0 : i.schema.componentType) === "frame";
}
function p(c) {
if (!c || !c.value)
return null;
if (c.value.schema && c.value.schema.type === "component")
return c.value;
const z = h(c == null ? void 0 : c.value.parent), E = p(z);
return E || null;
}
function m(c = i) {
var M;
const { componentInstance: z, designerItemElementRef: E } = c;
if (!z || !z.value)
return null;
const { getCustomButtons: x } = z.value;
return z.value.canMove || x && ((M = x()) != null && M.length) ? E : m(c.parent);
}
function l(c) {
return !!n;
}
function u() {
return (i == null ? void 0 : i.schema.label) || (i == null ? void 0 : i.schema.title) || (i == null ? void 0 : i.schema.name);
}
function T() {
}
function w(c, z) {
var E;
!c || !z || (E = i == null ? void 0 : i.setupContext) == null || E.emit("dragEnd");
}
function $(c, z) {
const { componentType: E } = c;
let x = ke(E, c, z);
const M = E.toLowerCase().replace(/-/g, "_");
return x && !x.id && x.type === E && (x.id = `${M}_${Math.random().toString().slice(2, 6)}`), x;
}
function C(c) {
}
function U(...c) {
}
function L(c) {
if (!c)
return;
const z = i == null ? void 0 : i.schema, { formSchemaUtils: E } = c;
if (z && E.getExpressions().length) {
const x = E.getExpressions().findIndex((M) => M.target === z.id);
x > -1 && E.getExpressions().splice(x, 1);
}
}
function F(c) {
L(c), i != null && i.schema.contents && i.schema.contents.map((z) => {
let E = z.id;
z.type === "component-ref" && (E = z.component);
const x = e.value.querySelectorAll(`#${E}-design-item`);
x != null && x.length && Array.from(x).map((M) => {
var R;
(R = M == null ? void 0 : M.componentInstance) != null && R.value.onRemoveComponent && M.componentInstance.value.onRemoveComponent(c);
});
});
}
function D() {
}
function P(c) {
}
return t.value = {
canMove: f(),
canSelectParent: d(),
canDelete: A(),
canNested: !s(),
contents: i == null ? void 0 : i.schema.contents,
elementRef: e,
parent: (y = i == null ? void 0 : i.parent) == null ? void 0 : y.componentInstance,
schema: i == null ? void 0 : i.schema,
styles: g,
designerClass: o,
canAccepts: l,
getBelongedComponentInstance: p,
getDraggableDesignItemElement: m,
getDraggingDisplayText: u,
getPropConfig: U,
getDragScopeElement: T,
onAcceptMovedChildElement: w,
onChildElementMovedOut: C,
addNewChildComponentSchema: $,
triggerBelongedComponentToMoveWhenMoved: h(!1),
triggerBelongedComponentToDeleteWhenDeleted: h(!1),
onRemoveComponent: F,
getCustomButtons: D,
onPropertyChanged: P
}, t;
}
const Ct = /* @__PURE__ */ Te({
name: "FImageCropperDesign",
props: he,
emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
setup(e, i) {
const n = h(e.alignImage), g = h(e.roundCropper), o = h(e.hideResizeSquares), t = h(e.loadImageErrorText), f = h(e.disabled), d = h(null), {
uploadError: A,
imageVisible: s,
backgroundColor: p,
sourceImage: m,
safeImgDataUrl: l,
safeTransformStyle: u,
maxSize: T,
cropper: w,
marginLeft: $,
moveTypes: C,
isLoading: U,
startMove: L,
imageLoadedInView: F,
moveStop: D,
moveImg: P
} = Pe(e, i), y = h(), c = we("design-item-context"), z = Wt(y, c);
Ae(() => {
y.value.componentInstance = z;
}), i.expose(z.value);
function E(W) {
return S("span", {
class: `farris-image-cropper-resize-bar ${W}`,
onMousedown: q((Q) => L(Q, C.Resize, W), ["prevent"])
}, null);
}
function x(W) {
return S("div", null, [S("span", {
class: `farris-image-cropper-resize-bar ${W}`,
onMousedown: q((Q) => L(Q, C.Resize, W), ["prevent"])
}, [S("span", {
class: "farris-image-cropper-square"
}, null)]), S("span", {
class: "farris-image-cropper-resize top"
}, [S("span", {
class: "farris-image-cropper-square"
}, null)])]);
}
const M = ["top", "right", "bottom", "left"].map((W) => E(W)), R = ["topleft", "topright", "bottomright", "bottomleft"].map((W) => x(W));
return () => S("div", {
ref: y,
class: ["farris-image-cropper-frame", {
"farris-image-cropper-disabled": f.value
}],
style: {
"text-align": n.value
},
onMousemove: q((W) => P(W), ["prevent"]),
onTouchmove: q((W) => P(W), ["prevent"]),
onMouseup: q(() => D(), ["prevent"]),
onTouchend: q(() => D(), ["prevent"])
}, [!A && S("div", {
ref: d,
class: "farris-image-cropper",
style: [{
background: s.value ? p.value : ""
}]
}, [l.value && S("img", {
title: "farris-source-image",
ref: m,
class: "farris-source-image",
style: [{
visibility: s.value ? "visible" : "hidden"
}, {
transform: u.value
}],
src: l.value,
onLoad: () => F()
}, null), T.value && S("div", {
class: "farris-image-overlay",
style: [{
width: `${T.value.width || 0}px`
}, {
height: `${T.value.height || 0}px`
}, {
"margin-left": n.value === "center" ? $.value : ""
}]
}, null), s.value && S("div", {
class: ["farris-image-cropper-wrapper", {
"farris-image-cropper-rounded": g.value
}],
style: [{
top: `${w.value.y1}px`
}, {
left: `${w.value.x1}px`
}, {
width: `${w.value.x2 - w.value.x1}px`
}, {
height: `${w.value.y2 - w.value.y1}px`
}, {
visibility: s.value ? "visible" : "hidden"
}, {
"margin-left": n.value === "center" ? $.value : ""
}],
tabindex: "0"
}, [S("div", {
class: "farris-image-cropper-move",
onMousedown: q((W) => L(W, C.Move, "topleft"), ["prevent"])
}, null), !o.value && S("div", null, [R, M])])]), U.value && S("div", {
class: "farris-image-cropper-loading"
}, [S("div", {
class: "farris-image-cropper-loading-spinner"
}, null)]), A && S("div", {
class: "farris-image-cropper-error"
}, [t.value])]);
}
});
Y.install = (e) => {
e.component(Y.name, Y);
};
Y.register = (e, i, n, g) => {
e["image-cropper"] = Y, i["image-cropper"] = De;
};
Y.registerDesigner = (e, i, n) => {
e["image-cropper"] = Ct, i["image-cropper"] = De;
};
export {
Y as ImageCropper,
Y as default,
he as imageCropperProps,
De as propsResolver
};