158 lines
11 KiB
JavaScript
158 lines
11 KiB
JavaScript
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/CompareImage/CompareImage.tsx
|
|
var CompareImage_exports = {};
|
|
__export(CompareImage_exports, {
|
|
default: () => CompareImage_default
|
|
});
|
|
module.exports = __toCommonJS(CompareImage_exports);
|
|
var import_react = __toESM(require("react"));
|
|
var import_func = require("@zhst/func");
|
|
var import_hooks = require("@zhst/hooks");
|
|
var import_antd = require("antd");
|
|
var import_classnames = __toESM(require("classnames"));
|
|
var import_viewer = __toESM(require("../ImageEditor/viewer"));
|
|
var import_iconfont = __toESM(require("../iconfont"));
|
|
var import_CornerScore = __toESM(require("./components/CornerScore"));
|
|
var import_index = require("./index.less");
|
|
var componentName = `zhst-image__compater-view`;
|
|
var CompareImage = (0, import_react.forwardRef)((props, ref) => {
|
|
const { label, openRoll = false, dataSource = [], showScore = true, current = 0 } = props;
|
|
const imgContainerRef = (0, import_react.useRef)(null);
|
|
const imgInsRef = (0, import_react.useRef)(null);
|
|
const [scale, setScale] = (0, import_react.useState)(0);
|
|
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(current);
|
|
(0, import_react.useEffect)(() => {
|
|
const handleTransformChange = (0, import_func.addEventListenerWrapper)(
|
|
imgContainerRef.current,
|
|
"viewer-transform-change",
|
|
(event) => {
|
|
const data = event.detail;
|
|
setScale((0, import_func.get)(data, "scale", 0));
|
|
}
|
|
);
|
|
if ((0, import_func.generateImg)(dataSource[currentIndex].url)) {
|
|
imgInsRef.current = new import_viewer.default(imgContainerRef.current, {
|
|
image: (0, import_func.generateImg)(dataSource[currentIndex].url)
|
|
});
|
|
}
|
|
return () => {
|
|
var _a, _b;
|
|
handleTransformChange == null ? void 0 : handleTransformChange.remove();
|
|
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.destroy) == null ? void 0 : _b.call(_a);
|
|
imgInsRef.current = null;
|
|
};
|
|
}, []);
|
|
(0, import_hooks.useUpdateEffect)(() => {
|
|
var _a;
|
|
if (imgInsRef.current) {
|
|
(_a = imgInsRef.current) == null ? void 0 : _a.refleshImage({
|
|
image: (0, import_func.generateImg)(dataSource[currentIndex].url)
|
|
});
|
|
}
|
|
}, [currentIndex]);
|
|
const handleIndexChange = (changeVal) => {
|
|
var _a, _b;
|
|
const _index = currentIndex + changeVal;
|
|
if (!((_a = dataSource == null ? void 0 : dataSource[_index]) == null ? void 0 : _a.url))
|
|
return;
|
|
(_b = imgInsRef.current) == null ? void 0 : _b.refleshImage({
|
|
image: (0, import_func.generateImg)(dataSource[_index].url)
|
|
});
|
|
setCurrentIndex(_index);
|
|
};
|
|
(0, import_react.useImperativeHandle)(ref, () => ({
|
|
imgInsRef,
|
|
handleIndexChange
|
|
}));
|
|
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__container`) }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__label`) }, label), /* @__PURE__ */ import_react.default.createElement("div", { ref: imgContainerRef, className: (0, import_classnames.default)(`${componentName}__view`) }), !dataSource.length && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__empty`) }, /* @__PURE__ */ import_react.default.createElement(
|
|
"img",
|
|
{
|
|
src: "data:image/png;base64,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",
|
|
title: "暂无数据"
|
|
}
|
|
), /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${componentName}__empty--text`) }, "暂无匹配数据")), !!dataSource.length && openRoll && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__scoll-module`) }, /* @__PURE__ */ import_react.default.createElement(
|
|
import_antd.Button,
|
|
{
|
|
type: "default",
|
|
className: (0, import_classnames.default)(`${componentName}__scoll-module__btn`),
|
|
disabled: currentIndex <= 0,
|
|
onClick: () => {
|
|
handleIndexChange(-1);
|
|
}
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { icon: "icon-qiehuanzuo", size: 40 })
|
|
), /* @__PURE__ */ import_react.default.createElement(
|
|
import_antd.Button,
|
|
{
|
|
type: "default",
|
|
className: (0, import_classnames.default)(`${componentName}__scoll-module__btn`),
|
|
disabled: currentIndex >= dataSource.length - 1,
|
|
onClick: () => {
|
|
handleIndexChange(1);
|
|
}
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { icon: "icon-qiehuanyou", size: 40 })
|
|
)), showScore && /* @__PURE__ */ import_react.default.createElement(import_CornerScore.default, { scoreTxt: dataSource[currentIndex].score }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__tool`) }, /* @__PURE__ */ import_react.default.createElement(
|
|
import_antd.Button,
|
|
{
|
|
type: "text",
|
|
onClick: () => {
|
|
var _a, _b;
|
|
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.scaleTo) == null ? void 0 : _b.call(_a, 0.1);
|
|
}
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { size: 16, icon: "icon-fangda" }),
|
|
/* @__PURE__ */ import_react.default.createElement("span", null, "放大")
|
|
), /* @__PURE__ */ import_react.default.createElement(
|
|
import_antd.Button,
|
|
{
|
|
type: "text",
|
|
onClick: () => {
|
|
var _a, _b;
|
|
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.scaleTo) == null ? void 0 : _b.call(_a, -0.1);
|
|
}
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { size: 16, icon: "icon-suoxiao" }),
|
|
/* @__PURE__ */ import_react.default.createElement("span", null, "缩小")
|
|
), /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${componentName}__tool__scale`) }, Math.round(scale * 100) + "%"), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__tool__line`) }), /* @__PURE__ */ import_react.default.createElement(
|
|
import_antd.Button,
|
|
{
|
|
type: "text",
|
|
onClick: () => {
|
|
var _a, _b;
|
|
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.reset) == null ? void 0 : _b.call(_a);
|
|
}
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { size: 16, icon: "icon-zhongzhi3" }),
|
|
/* @__PURE__ */ import_react.default.createElement("span", null, "重置")
|
|
)));
|
|
});
|
|
var CompareImage_default = CompareImage;
|