@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,151 lines (1,150 loc) • 39.6 kB
JavaScript
import { inject as Ae, ref as h, onMounted as Te, onUnmounted as rt, watch as K, defineComponent as Se, createVNode as A, withModifiers as q } from "vue";
import { isPlainObject as Me, cloneDeep as ze } from "lodash-es";
const ke = {}, Be = {};
function ve(e) {
const { properties: i, title: n, ignore: d } = e, s = d && Array.isArray(d), t = Object.keys(i).reduce((f, g) => ((!s || !d.find((M) => M === g)) && (f[g] = i[g].type === "object" && i[g].properties ? ve(i[g]) : ze(i[g].default)), f), {});
if (n && (!s || !d.find((f) => f === "id"))) {
const f = n.toLowerCase().replace(/-/g, "_");
t.id = `${f}_${Math.random().toString().slice(2, 6)}`;
}
return t;
}
function ot(e) {
const { properties: i, title: n, required: d } = e;
if (d && Array.isArray(d)) {
const s = d.reduce((t, f) => (t[f] = i[f].type === "object" && i[f].properties ? ve(i[f]) : ze(i[f].default), t), {});
if (n && d.find((t) => t === "id")) {
const t = n.toLowerCase().replace(/-/g, "_");
s.id = `${t}_${Math.random().toString().slice(2, 6)}`;
}
return s;
}
return {
type: n
};
}
function De(e, i = {}, n) {
const d = ke[e];
if (d) {
let s = ot(d);
const t = Be[e];
return s = t ? t({ getSchemaByType: De }, s, i, n) : s, s;
}
return null;
}
function st(e, i) {
const n = ve(i);
return Object.keys(n).reduce((d, s) => (Object.prototype.hasOwnProperty.call(e, s) && (d[s] && Me(d[s]) && Me(e[s] || !e[s]) ? Object.assign(d[s], e[s] || {}) : d[s] = e[s]), d), n), n;
}
function Ee(e, i) {
return Object.keys(e).filter((d) => e[d] != null).reduce((d, s) => {
if (i.has(s)) {
const t = i.get(s);
if (typeof t == "string")
d[t] = e[s];
else {
const f = t(s, e[s], e);
Object.assign(d, f);
}
} else
d[s] = e[s];
return d;
}, {});
}
function ct(e, i, n = /* @__PURE__ */ new Map()) {
const d = st(e, i);
return Ee(d, n);
}
function ft(e = {}) {
function i(o, y, m, l) {
if (typeof m == "number")
return l[o].length === m;
if (typeof m == "object") {
const r = Object.keys(m)[0], w = m[r];
if (r === "not")
return Number(l[o].length) !== Number(w);
if (r === "moreThan")
return Number(l[o].length) >= Number(w);
if (r === "lessThan")
return Number(l[o].length) <= Number(w);
}
return !1;
}
function n(o, y, m, l) {
return l[o] && l[o].propertyValue && String(l[o].propertyValue.value) === String(m);
}
const d = /* @__PURE__ */ new Map([
["length", i],
["getProperty", n]
]);
Object.keys(e).reduce((o, y) => (o.set(y, e[y]), o), d);
function s(o, y) {
const m = o;
return typeof y == "number" ? [{ target: m, operator: "length", param: null, value: Number(y) }] : typeof y == "boolean" ? [{ target: m, operator: "getProperty", param: o, value: !!y }] : typeof y == "object" ? Object.keys(y).map((l) => {
if (l === "length")
return { target: m, operator: "length", param: null, value: y[l] };
const r = l, w = y[l];
return { target: m, operator: "getProperty", param: r, value: w };
}) : [];
}
function t(o) {
return Object.keys(o).reduce((m, l) => {
const r = s(l, o[l]);
return m.push(...r), m;
}, []);
}
function f(o, y) {
if (d.has(o.operator)) {
const m = d.get(o.operator);
return m && m(o.target, o.param, o.value, y) || !1;
}
return !1;
}
function g(o, y) {
return t(o).reduce((r, w) => r && f(w, y), !0);
}
function M(o, y) {
const m = Object.keys(o), l = m.includes("allOf"), r = m.includes("anyOf"), w = l || r, W = (w ? o[w ? l ? "allOf" : "anyOf" : "allOf"] : [o]).map((P) => g(P, y));
return l ? !W.includes(!1) : W.includes(!0);
}
return { parseValueSchema: M };
}
const vt = {}, ht = {};
ft();
function dt(e, i, n = /* @__PURE__ */ new Map(), d = (f, g, M, o) => g, s = {}, t = (f) => f) {
return ke[i.title] = i, Be[i.title] = d, vt[i.title] = s, ht[i.title] = t, (f = {}, g = !0) => {
if (!g)
return Ee(f, n);
const M = ct(f, i, n), o = Object.keys(e).reduce((y, m) => (y[m] = e[m].default, y), {});
return Object.assign(o, M);
};
}
function gt(e, i) {
return { customClass: i.class, customStyle: i.style };
}
function mt(e, i, n) {
return i;
}
const pt = /* @__PURE__ */ new Map([
["appearance", gt]
]), 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", kt = "A Farris Component", Bt = "object", Dt = {
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"
}
}
}
}, Et = {
title: zt,
description: kt,
type: Bt,
categories: Dt
}, 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
}
}
}, we = dt(he, St, pt, mt, Et);
var ae = /* @__PURE__ */ ((e) => (e.Move = "move", e.Resize = "resize", e))(ae || {});
function Ct() {
function e(s) {
switch (typeof s == "string" && (s = i(s)), s) {
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(s) {
const t = new DataView(n(s));
if (t.getUint16(0, !1) !== 65496)
return -2;
const f = t.byteLength;
let g = 2;
for (; g < f; ) {
if (t.getUint16(g + 2, !1) <= 8)
return -1;
const M = t.getUint16(g, !1);
if (g += 2, M === 65505) {
if (t.getUint32(g += 2, !1) !== 1165519206)
return -1;
const o = t.getUint16(g += 6, !1) === 18761;
g += t.getUint32(g + 4, o);
const y = t.getUint16(g, o);
g += 2;
for (let m = 0; m < y; m++)
if (t.getUint16(g + m * 12, o) === 274)
return t.getUint16(g + m * 12 + 8, o);
} else {
if ((M & 65280) !== 65280)
break;
g += t.getUint16(g, !1);
}
}
return -1;
}
function n(s) {
s = s.replace(/^data:([^;]+);base64,/gmi, "");
const t = atob(s), f = t.length, g = new Uint8Array(f);
for (let M = 0; M < f; M++)
g[M] = t.charCodeAt(M);
return g.buffer;
}
function d(s, t, f) {
const g = s.width, M = s.height;
t = Math.round(t), f = Math.round(f);
const o = g / t, y = M / f, m = Math.ceil(o / 2), l = Math.ceil(y / 2), r = s.getContext("2d");
if (r) {
const w = r.getImageData(0, 0, g, M), b = r.createImageData(t, f), { data: _ } = w, W = b.data;
for (let $ = 0; $ < f; $++)
for (let P = 0; P < t; P++) {
const F = (P + $ * t) * 4, C = $ * y;
let D = 0, c = 0, p = 0, S = 0, E = 0, T = 0, k = 0;
const j = Math.floor(P * o), L = Math.floor($ * y);
let Q = Math.ceil((P + 1) * o), J = Math.ceil(($ + 1) * y);
Q = Math.min(Q, g), J = Math.min(J, M);
for (let R = L; R < J; R++) {
const z = Math.abs(C - R) / l, ie = P * o, ee = z * z;
for (let N = j; N < Q; N++) {
const O = Math.abs(ie - N) / m, H = Math.sqrt(ee + O * O);
if (H >= 1)
continue;
D = 2 * H * H * H - 3 * H * H + 1;
const V = 4 * (N + R * g);
k += D * _[V + 3], p += D, _[V + 3] < 255 && (D = D * _[V + 3] / 250), S += D * _[V], E += D * _[V + 1], T += D * _[V + 2], c += D;
}
}
W[F] = S / c, W[F + 1] = E / c, W[F + 2] = T / c, W[F + 3] = k / p;
}
s.width = t, s.height = f, r.putImageData(b, 0, 0);
}
}
return {
resizeCanvas: d,
getTransformationsFromExifData: e
};
}
function Pt(e, i, n, d) {
function s(l, r) {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * n.value, l = Math.max(e.value.x2 - i.value.width, 0), r = Math.max(0 - e.value.y1, 0), (l > 0 || r > 0) && (e.value.x2 -= r * n.value > l ? r * n.value : l, e.value.y1 += r * n.value > l ? r : l / n.value);
}
function t(l, r) {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * n.value, l = Math.max(e.value.x2 - i.value.width, 0), r = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || r > 0) && (e.value.x2 -= r * n.value > l ? r * n.value : l, e.value.y2 -= r * n.value > l ? r : l / n.value);
}
function f(l, r) {
e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / n.value, l = Math.max(0 - e.value.x1, 0), r = Math.max(0 - e.value.y1, 0), (l > 0 || r > 0) && (e.value.x1 += r * n.value > l ? r * n.value : l, e.value.y1 += r * n.value > l ? r : l / n.value);
}
function g(l, r) {
e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / n.value, l = Math.max(e.value.x2 - i.value.width, 0), r = Math.max(0 - e.value.y1, 0), (l > 0 || r > 0) && (e.value.x2 -= r * n.value > l ? r * n.value : l, e.value.y1 += r * n.value > l ? r : l / n.value);
}
function M(l, r) {
e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / n.value, l = Math.max(e.value.x2 - i.value.width, 0), r = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || r > 0) && (e.value.x2 -= r * n.value > l ? r * n.value : l, e.value.y2 -= r * n.value > l ? r : l / n.value);
}
function o(l, r) {
e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / n.value, l = Math.max(0 - e.value.x1, 0), r = Math.max(e.value.y2 - i.value.height, 0), (l > 0 || r > 0) && (e.value.x1 += r * n.value > l ? r * n.value : l, e.value.y2 -= r * n.value > l ? r : l / n.value);
}
function y() {
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), r = Math.max(e.value.x2 - i.value.width, 0), w = Math.max(e.value.y2 - i.value.height, 0), b = Math.max(0 - e.value.y1, 0);
(l > 0 || r > 0 || w > 0 || b > 0) && (e.value.x1 += w * n.value > l ? w * n.value : l, e.value.x2 -= b * n.value > r ? b * n.value : r, e.value.y1 += b * n.value > r ? b : r / n.value, e.value.y2 -= w * n.value > l ? w : l / n.value);
}
function m() {
if (i.value.width && i.value.height)
switch (d.position) {
case "top":
s(0, 0);
break;
case "bottom":
t(0, 0);
break;
case "topleft":
f(0, 0);
break;
case "topright":
g(0, 0);
break;
case "right":
case "bottomright":
M(0, 0);
break;
case "left":
case "bottomleft":
o(0, 0);
break;
case "center":
y();
break;
}
}
return { checkAspectRatio: m };
}
function Ce(e, i) {
const { resizeCanvas: n, getTransformationsFromExifData: d } = Ct(), s = Ae("NotifyService"), t = h(e.cropper), f = h(e.transform), g = h(e.cropperMinWidth), M = h(e.maintainAspectRatio), o = h(e.aspectRatio), y = h(e.autoCrop), m = h(e.backgroundColor), l = h(e.resizeToWidth), r = h(e.onlyScaleDown), w = h(e.containWithinAspectRatio), b = h(e.canvasRotation), _ = h(e.format), W = h(e.imageQuality), $ = h(e.resizeToHeight), P = h(e.cropperMinHeight), F = h(""), C = h(!0), D = h(!0);
let c, p, S = 0, E, T, k;
const j = h(null), L = h(""), Q = h(""), J = h("0px"), R = h(), z = h({ width: 100, height: 100 }), ie = ae;
let ee, N = 20, O = 20, H = !1, V = { rotate: 0, flip: !1 }, x = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
const de = h(e.imageChangedEvent), le = h(e.imageURL), Pe = h(e.imageBase64), Le = h(e.imageFile);
function We() {
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 Y() {
D.value = !1, R.value = null, F.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", x = {
active: !1,
type: null,
position: null,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
clientX: 0,
clientY: 0
}, z.value = {
width: 0,
height: 0
}, c = {
width: 0,
height: 0
}, p = {
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 (b.value += V.rotate, w.value && c.width && c.height) {
if (b.value % 2) {
const v = c.width * o.value, B = c.height / o.value;
return {
width: Math.max(c.height, v),
height: Math.max(c.width, B)
};
}
const a = c.height * o.value, u = c.width / o.value;
return {
width: Math.max(c.width, a),
height: Math.max(c.height, u)
};
}
return b.value % 2 ? {
height: c.width,
width: c.height
} : {
width: c.width,
height: c.height
};
}
function $e() {
b.value += V.rotate;
const a = _e(), u = document.createElement("canvas");
a.width && a.height && (u.width = a.width, u.height = a.height);
const v = u.getContext("2d");
return c.width && c.height && k && (v == null || v.setTransform(V.flip ? -1 : 1, 0, 0, 1, u.width / 2, u.height / 2), v == null || v.rotate(Math.PI * (b.value / 2)), v == null || v.drawImage(k, -c.width / 2, -c.height / 2)), u.toDataURL();
}
function He(a) {
return new Promise((u) => {
ee = a, F.value = a, R.value = new Image(), R.value.onload = () => {
var v, B;
p.width = (v = R.value) == null ? void 0 : v.naturalWidth, p.height = (B = R.value) == null ? void 0 : B.naturalHeight, u();
}, R.value.src = ee;
});
}
function ge() {
if (!k || !k.complete || !V)
return Promise.reject(new Error("No image loaded"));
const a = $e();
return He(a);
}
function ne(a) {
const u = (v) => {
s.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片上传错误，请重试" }]
}), C.value = !1, H = !0, i.emit("loadImageFailed"), k = null, L.value = "";
};
k = new Image(), k.onload = () => {
L.value = a, V = d(a), c.width = k == null ? void 0 : k.naturalWidth, c.height = k == null ? void 0 : k.naturalHeight, ge().then(() => {
H = !1;
}).catch(u);
}, k.onerror = u, k.src = a;
}
function Ue(a, u) {
Re(u) ? (H = !1, ne(a)) : (s.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片类型不正确,请重试" }]
}), C.value = !1, H = !0, i.emit("loadImageFailed"));
}
function me(a) {
const u = new FileReader();
u.onload = (v) => Ue(v.target.result, a.type), u.readAsDataURL(a);
}
function pe(a) {
const u = new Image();
u.onerror = () => {
s.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片加载错误，请重试" }]
}), C.value = !1, H = !0, i.emit("loadImageFailed");
}, u.onload = () => {
H = !1;
const v = document.createElement("canvas"), B = v.getContext("2d");
v.width = u.width, v.height = u.height, B == null || B.drawImage(u, 0, 0), ne(v.toDataURL());
}, u.crossOrigin = "anonymous", u.src = a;
}
function je() {
return j.value && j.value && j.value.offsetWidth > 0;
}
function ue() {
if (j.value) {
const a = j.value;
z.value.width = a.offsetWidth, z.value.height = a.offsetHeight, J.value = "calc(50% - " + z.value.width / 2 + "px)";
}
}
function Ne() {
R.value && z.value.width && (N = g.value > 0 ? Math.max(20, g.value / R.value.width * z.value.width) : 20);
}
function Oe() {
M.value ? O = Math.max(20, N / o.value) : P.value > 0 && R.value && z.value.height ? O = Math.max(20, P.value / R.value.height * z.value.height) : O = 20;
}
function re() {
R.value ? (Ne(), Oe()) : (N = 20, O = 20);
}
function Fe() {
const a = j.value, u = h({ x1: 0, x2: 0, y1: 0, y2: 0 });
if (a && p.width && p.height) {
const v = p.width / a.offsetWidth;
u.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)
}, w.value || (u.value.x1 = Math.max(u.value.x1, 0), u.value.y1 = Math.max(u.value.y1, 0), u.value.x2 = Math.min(u.value.x2, p.width), u.value.y2 = Math.min(u.value.y2, p.height));
}
return u.value;
}
function Ve() {
b.value += V.rotate;
const a = j.value, u = h({ x1: 0, x2: 0, y1: 0, y2: 0 });
if (a && p.height && p.width && c.height && c.width) {
const v = p.width / a.offsetWidth;
let B, U;
b.value % 2 ? (B = (p.width - c.height) / 2, U = (p.height - c.width) / 2) : (B = (p.width - c.width) / 2, U = (p.height - c.height) / 2), u.value = {
x1: Math.round(t.value.x1 * v) - B,
y1: Math.round(t.value.y1 * v) - U,
x2: Math.round(t.value.x2 * v) - B,
y2: Math.round(t.value.y2 * v) - U
}, w.value || (u.value.x1 = Math.max(u.value.x1, 0), u.value.y1 = Math.max(u.value.y1, 0), u.value.x2 = Math.min(u.value.x2, p.width), u.value.y2 = Math.min(u.value.y2, p.height));
}
return u.value;
}
function qe(a, u) {
if (l.value > 0) {
if (!r.value || a > l.value)
return l.value / a;
} else if ($.value > 0 && (!r.value || u > $.value))
return $.value / u;
return 1;
}
function Ie() {
return Math.min(1, Math.max(0, W.value / 100));
}
function Qe(a) {
return a.toDataURL("image/" + _.value, Ie());
}
function Ge() {
if (j.value && j.value && R.value != null) {
const a = Fe(), u = a.x2 - a.x1, v = a.y2 - a.y1, B = document.createElement("canvas");
B.width = u, B.height = v;
const U = B.getContext("2d");
if (U) {
m.value != null && (U.fillStyle = m.value, U.fillRect(0, 0, u, v));
const G = (f.value.scale || 1) * (f.value.flipH ? -1 : 1), Z = (f.value.scale || 1) * (f.value.flipV ? -1 : 1);
p.width && p.height && (U.setTransform(G, 0, 0, Z, p.width / 2, p.height / 2), U.translate(-a.x1 / G, -a.y1 / Z), U.rotate((f.value.rotate || 0) * Math.PI / 180), U.drawImage(R.value, -p.width / 2, -p.height / 2));
const I = {
width: u,
height: v,
imagePosition: a,
cropperPosition: { ...t.value }
};
w.value && (I.offsetImagePosition = Ve());
const X = qe(u, v);
return X !== 1 && (I.width = Math.round(u * X), I.height = M.value ? Math.round(I.width / o.value) : Math.round(v * X), n(B, I.width, I.height)), I.base64 = Qe(B), i.emit("imageCropped", I), I;
}
}
return null;
}
function te() {
y.value && Ge();
}
function ye() {
const a = j.value;
if (a) {
if (!M.value)
t.value.x1 = 0, t.value.x2 = a.offsetWidth, t.value.y1 = 0, t.value.y2 = a.offsetHeight;
else if (a.offsetWidth / o.value < a.offsetHeight) {
t.value.x1 = 0, t.value.x2 = a.offsetWidth;
const u = a.offsetWidth / o.value;
t.value.y1 = (a.offsetHeight - u) / 2, t.value.y2 = t.value.y1 + u;
} else {
t.value.y1 = 0, t.value.y2 = a.offsetHeight;
const u = a.offsetHeight * o.value;
t.value.x1 = (a.offsetWidth - u) / 2, t.value.x2 = t.value.x1 + u;
}
te(), D.value = !0;
}
}
function xe() {
S > 40 ? (s.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片加载超时，请重试" }]
}), H = !0, C.value = !1, i.emit("loadImageFailed")) : je() ? (H = !1, ue(), re(), ye(), i.emit("cropperReady", { ...z.value })) : (S++, setTimeout(() => xe(), 50));
}
function Je() {
R.value != null && (C.value = !1, i.emit("imageLoaded"), S = 0, setTimeout(() => xe()));
}
function Ze() {
const a = j.value;
(z.value.width !== (a == null ? void 0 : a.offsetWidth) || z.value.height !== (a == null ? void 0 : a.offsetHeight)) && z.value.width && z.value.height && a && (t.value.x1 = t.value.x1 * a.offsetWidth / z.value.width, t.value.x2 = t.value.x2 * a.offsetWidth / z.value.width, t.value.y1 = t.value.y1 * a.offsetHeight / z.value.height, t.value.y2 = t.value.y2 * a.offsetHeight / z.value.height);
}
const Ye = () => {
Ze(), ue(), re();
}, be = () => {
clearTimeout(T), T = setTimeout(Ye, 300);
};
Te(() => {
window.addEventListener("resize", be), le.value && (Y(), C.value = !0, pe(le.value));
}), rt(() => {
window.removeEventListener("resize", be);
});
function Xe() {
x.active && (x.active = !1, te());
}
function oe(a) {
return (a.touches && a.touches[0] ? a.touches[0].clientX : a.clientX) || 0;
}
function se(a) {
return (a.touches && a.touches[0] ? a.touches[0].clientY : a.clientY) || 0;
}
function Ke(a, u, v = null) {
x && x.active || (a.preventDefault && a.preventDefault(), x = {
active: !0,
type: u,
position: v,
clientX: oe(a),
clientY: se(a),
...t.value
});
}
function ce(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 > z.value.width && (t.value.x1 -= a ? t.value.x2 - z.value.width : 0, t.value.x2 = z.value.width), t.value.y2 > z.value.height && (t.value.y1 -= a ? t.value.y2 - z.value.height : 0, t.value.y2 = z.value.height);
}
function et(a) {
const u = oe(a) - x.clientX, v = se(a) - x.clientY;
t.value.x1 = x.x1 + u, t.value.y1 = x.y1 + v, t.value.x2 = x.x2 + u, t.value.y2 = x.y2 + v;
}
const { checkAspectRatio: tt } = Pt(t, z, o, x);
function at(a) {
const u = oe(a) - x.clientX, v = se(a) - x.clientY;
switch (x.position) {
case "left":
t.value.x1 = Math.min(x.x1 + u, t.value.x2 - N);
break;
case "topleft":
t.value.x1 = Math.min(x.x1 + u, t.value.x2 - N), t.value.y1 = Math.min(x.y1 + v, t.value.y2 - O);
break;
case "top":
t.value.y1 = Math.min(x.y1 + v, t.value.y2 - O);
break;
case "topright":
t.value.x2 = Math.max(x.x2 + u, t.value.x1 + N), t.value.y1 = Math.min(x.y1 + v, t.value.y2 - O);
break;
case "right":
t.value.x2 = Math.max(x.x2 + u, t.value.x1 + N);
break;
case "bottomright":
t.value.x2 = Math.max(x.x2 + u, t.value.x1 + N), t.value.y2 = Math.max(x.y2 + v, t.value.y1 + O);
break;
case "bottom":
t.value.y2 = Math.max(x.y2 + v, t.value.y1 + O);
break;
case "bottomleft":
t.value.x1 = Math.min(x.x1 + u, t.value.x2 - N), t.value.y2 = Math.max(x.y2 + v, t.value.y1 + O);
break;
case "center":
const { scale: B } = a, U = Math.abs(x.x2 - x.x1) * B, G = Math.abs(x.y2 - x.y1) * B, { x1: Z } = t.value, { y1: I } = t.value;
t.value.x1 = Math.min(x.clientX - U / 2, t.value.x2 - N), t.value.y1 = Math.min(x.clientY - G / 2, t.value.y2 - O), t.value.x2 = Math.max(x.clientX + U / 2, Z + N), t.value.y2 = Math.max(x.clientY + G / 2, I + O);
break;
}
M.value && tt();
}
function it(a) {
x && x.active && (a.stopPropagation && a.stopPropagation(), a.preventDefault && a.preventDefault(), clearTimeout(E), E = setTimeout(() => {
x.type === ae.Move ? (et(a), ce(!0)) : x.type === ae.Resize && (at(a), ce(!1));
}, 300));
}
return K(de, (a) => {
Y(), a && a.target && a.target.files && a.target.files.length > 0 && (C.value = !0, me(a.target.files[0]));
}), K(le, (a) => {
a ? (Y(), C.value = !0, pe(a)) : (s.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片路径为空" }]
}), C.value = !1, H = !0);
}), K(Pe, (a) => {
Y(), C.value = !0, ne(a);
}), K(Le, (a) => {
Y(), a && (C.value = !0, me(a));
}), K(
() => [
e.containWithinAspectRatio,
e.canvasRotation,
e.cropper,
e.aspectRatio,
e.transform,
e.imageChangedEvent
],
([a, u, v, B, U, G], [Z, I, X, lt, nt, ut]) => {
k && k.complete && V && (a !== Z || u !== I) && ge(), v !== X && (ue(), re(), ce(!1), te()), B !== lt && D.value && ye(), U !== nt && (We(), te()), G !== ut && (de.value = G);
}
), {
uploadError: H,
imageVisible: D,
backgroundColor: m,
sourceImage: j,
safeImgDataUrl: F,
safeTransformStyle: Q,
maxSize: z,
cropper: t,
marginLeft: J,
moveTypes: ie,
isLoading: C,
startMove: Ke,
imageLoadedInView: Je,
moveStop: Xe,
moveImg: it
};
}
const fe = /* @__PURE__ */ Se({
name: "FImageCropper",
props: he,
emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
setup(e, i) {
const n = h(e.alignImage), d = h(e.roundCropper), s = h(e.hideResizeSquares), t = h(e.loadImageErrorText), f = h(e.disabled), g = h(null), {
uploadError: M,
imageVisible: o,
backgroundColor: y,
sourceImage: m,
safeImgDataUrl: l,
safeTransformStyle: r,
maxSize: w,
cropper: b,
marginLeft: _,
moveTypes: W,
isLoading: $,
startMove: P,
imageLoadedInView: F,
moveStop: C,
moveImg: D
} = Ce(e, i);
function c(T) {
return A("span", {
class: `farris-image-cropper-resize-bar ${T}`,
onMousedown: q((k) => P(k, W.Resize, T), ["prevent"])
}, null);
}
function p(T) {
return A("div", null, [A("span", {
class: `farris-image-cropper-resize-bar ${T}`,
onMousedown: q((k) => P(k, W.Resize, T), ["prevent"])
}, [A("span", {
class: "farris-image-cropper-square"
}, null)]), A("span", {
class: "farris-image-cropper-resize top"
}, [A("span", {
class: "farris-image-cropper-square"
}, null)])]);
}
const S = ["top", "right", "bottom", "left"].map((T) => c(T)), E = ["topleft", "topright", "bottomright", "bottomleft"].map((T) => p(T));
return () => A("div", {
class: ["farris-image-cropper-frame", {
"farris-image-cropper-disabled": f.value
}],
style: {
"text-align": n.value
},
onMousemove: q((T) => D(T), ["prevent"]),
onTouchmove: q((T) => D(T), ["prevent"]),
onMouseup: q(() => C(), ["prevent"]),
onTouchend: q(() => C(), ["prevent"])
}, [!M && A("div", {
ref: g,
class: "farris-image-cropper",
style: [{
background: o.value ? y.value : ""
}]
}, [l.value && A("img", {
title: "farris-source-image",
ref: m,
class: "farris-source-image",
style: [{
visibility: o.value ? "visible" : "hidden"
}, {
transform: r.value
}],
src: l.value,
onLoad: () => F()
}, null), w.value && A("div", {
class: "farris-image-overlay",
style: [{
width: `${w.value.width || 0}px`
}, {
height: `${w.value.height || 0}px`
}, {
"margin-left": n.value === "center" ? _.value : ""
}]
}, null), o.value && A("div", {
class: ["farris-image-cropper-wrapper", {
"farris-image-cropper-rounded": d.value
}],
style: [{
top: `${b.value.y1}px`
}, {
left: `${b.value.x1}px`
}, {
width: `${b.value.x2 - b.value.x1}px`
}, {
height: `${b.value.y2 - b.value.y1}px`
}, {
visibility: o.value ? "visible" : "hidden"
}, {
"margin-left": n.value === "center" ? _.value : ""
}],
tabindex: "0"
}, [A("div", {
class: "farris-image-cropper-move",
onMousedown: q((T) => P(T, W.Move, "topleft"), ["prevent"])
}, null), !s.value && A("div", null, [E, S])])]), $.value && A("div", {
class: "farris-image-cropper-loading"
}, [A("div", {
class: "farris-image-cropper-loading-spinner"
}, null)]), M && A("div", {
class: "farris-image-cropper-error"
}, [t.value])]);
}
});
function Lt(e, i, n) {
var D;
const d = "", s = "", t = h();
function f() {
return (i == null ? void 0 : i.schema.componentType) !== "frame";
}
function g() {
return !1;
}
function M() {
return (i == null ? void 0 : i.schema.componentType) !== "frame";
}
function o() {
return (i == null ? void 0 : i.schema.componentType) === "frame";
}
function y(c) {
if (!c || !c.value)
return null;
if (c.value.schema && c.value.schema.type === "component")
return c.value;
const p = h(c == null ? void 0 : c.value.parent), S = y(p);
return S || null;
}
function m(c = i) {
var T;
const { componentInstance: p, designerItemElementRef: S } = c;
if (!p || !p.value)
return null;
const { getCustomButtons: E } = p.value;
return p.value.canMove || E && ((T = E()) != null && T.length) ? S : m(c.parent);
}
function l(c) {
return !!n;
}
function r() {
return (i == null ? void 0 : i.schema.label) || (i == null ? void 0 : i.schema.title) || (i == null ? void 0 : i.schema.name);
}
function w() {
}
function b(c, p) {
var S;
!c || !p || (S = i == null ? void 0 : i.setupContext) == null || S.emit("dragEnd");
}
function _(c, p) {
const { componentType: S } = c;
let E = De(S, c, p);
const T = S.toLowerCase().replace(/-/g, "_");
return E && !E.id && E.type === S && (E.id = `${T}_${Math.random().toString().slice(2, 6)}`), E;
}
function W(c) {
}
function $(...c) {
}
function P() {
i != null && i.schema.contents && i.schema.contents.map((c) => {
let p = c.id;
c.type === "component-ref" && (p = c.component);
const S = e.value.querySelectorAll(`#${p}-design-item`);
S != null && S.length && Array.from(S).map((E) => {
var T;
(T = E == null ? void 0 : E.componentInstance) != null && T.value.onRemoveComponent && E.componentInstance.value.onRemoveComponent();
});
});
}
function F() {
}
function C(c) {
}
return t.value = {
canMove: f(),
canSelectParent: g(),
canDelete: M(),
canNested: !o(),
contents: i == null ? void 0 : i.schema.contents,
elementRef: e,
parent: (D = i == null ? void 0 : i.parent) == null ? void 0 : D.componentInstance,
schema: i == null ? void 0 : i.schema,
styles: d,
designerClass: s,
canAccepts: l,
getBelongedComponentInstance: y,
getDraggableDesignItemElement: m,
getDraggingDisplayText: r,
getPropConfig: $,
getDragScopeElement: w,
onAcceptMovedChildElement: b,
onChildElementMovedOut: W,
addNewChildComponentSchema: _,
triggerBelongedComponentToMoveWhenMoved: h(!1),
triggerBelongedComponentToDeleteWhenDeleted: h(!1),
onRemoveComponent: P,
getCustomButtons: F,
onPropertyChanged: C
}, t;
}
const Wt = /* @__PURE__ */ Se({
name: "FImageCropperDesign",
props: he,
emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
setup(e, i) {
const n = h(e.alignImage), d = h(e.roundCropper), s = h(e.hideResizeSquares), t = h(e.loadImageErrorText), f = h(e.disabled), g = h(null), {
uploadError: M,
imageVisible: o,
backgroundColor: y,
sourceImage: m,
safeImgDataUrl: l,
safeTransformStyle: r,
maxSize: w,
cropper: b,
marginLeft: _,
moveTypes: W,
isLoading: $,
startMove: P,
imageLoadedInView: F,
moveStop: C,
moveImg: D
} = Ce(e, i), c = h(), p = Ae("design-item-context"), S = Lt(c, p);
Te(() => {
c.value.componentInstance = S;
}), i.expose(S.value);
function E(L) {
return A("span", {
class: `farris-image-cropper-resize-bar ${L}`,
onMousedown: q((Q) => P(Q, W.Resize, L), ["prevent"])
}, null);
}
function T(L) {
return A("div", null, [A("span", {
class: `farris-image-cropper-resize-bar ${L}`,
onMousedown: q((Q) => P(Q, W.Resize, L), ["prevent"])
}, [A("span", {
class: "farris-image-cropper-square"
}, null)]), A("span", {
class: "farris-image-cropper-resize top"
}, [A("span", {
class: "farris-image-cropper-square"
}, null)])]);
}
const k = ["top", "right", "bottom", "left"].map((L) => E(L)), j = ["topleft", "topright", "bottomright", "bottomleft"].map((L) => T(L));
return () => A("div", {
ref: c,
class: ["farris-image-cropper-frame", {
"farris-image-cropper-disabled": f.value
}],
style: {
"text-align": n.value
},
onMousemove: q((L) => D(L), ["prevent"]),
onTouchmove: q((L) => D(L), ["prevent"]),
onMouseup: q(() => C(), ["prevent"]),
onTouchend: q(() => C(), ["prevent"])
}, [!M && A("div", {
ref: g,
class: "farris-image-cropper",
style: [{
background: o.value ? y.value : ""
}]
}, [l.value && A("img", {
title: "farris-source-image",
ref: m,
class: "farris-source-image",
style: [{
visibility: o.value ? "visible" : "hidden"
}, {
transform: r.value
}],
src: l.value,
onLoad: () => F()
}, null), w.value && A("div", {
class: "farris-image-overlay",
style: [{
width: `${w.value.width || 0}px`
}, {
height: `${w.value.height || 0}px`
}, {
"margin-left": n.value === "center" ? _.value : ""
}]
}, null), o.value && A("div", {
class: ["farris-image-cropper-wrapper", {
"farris-image-cropper-rounded": d.value
}],
style: [{
top: `${b.value.y1}px`
}, {
left: `${b.value.x1}px`
}, {
width: `${b.value.x2 - b.value.x1}px`
}, {
height: `${b.value.y2 - b.value.y1}px`
}, {
visibility: o.value ? "visible" : "hidden"
}, {
"margin-left": n.value === "center" ? _.value : ""
}],
tabindex: "0"
}, [A("div", {
class: "farris-image-cropper-move",
onMousedown: q((L) => P(L, W.Move, "topleft"), ["prevent"])
}, null), !s.value && A("div", null, [j, k])])]), $.value && A("div", {
class: "farris-image-cropper-loading"
}, [A("div", {
class: "farris-image-cropper-loading-spinner"
}, null)]), M && A("div", {
class: "farris-image-cropper-error"
}, [t.value])]);
}
}), $t = {
install(e) {
e.component(fe.name, fe);
},
register(e, i, n, d) {
e["image-cropper"] = fe, i["image-cropper"] = we;
},
registerDesigner(e, i, n) {
e["image-cropper"] = Wt, i["image-cropper"] = we;
}
};
export {
fe as ImageCropper,
$t as default,
he as imageCropperProps,
we as propsResolver
};