165 lines
11 KiB
JavaScript
165 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/ImagePreview/index.tsx
|
|
var ImagePreview_exports = {};
|
|
__export(ImagePreview_exports, {
|
|
default: () => ImagePreview_default
|
|
});
|
|
module.exports = __toCommonJS(ImagePreview_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 componentName = `zhst-image__compater-view`;
|
|
var CompaterImage = (props) => {
|
|
const { url, label, openRoll = false, urls = [], score } = props;
|
|
const imgContainerRef = (0, import_react.useRef)(null);
|
|
const imgInsRef = (0, import_react.useRef)(null);
|
|
const [scale, setScale] = (0, import_react.useState)(0);
|
|
const [showUrl, setShowUrl] = (0, import_react.useState)((0, import_func.generateImg)(url));
|
|
(0, import_hooks.useUpdateEffect)(() => {
|
|
var _a;
|
|
setShowUrl((0, import_func.generateImg)(url));
|
|
if (imgInsRef.current) {
|
|
(_a = imgInsRef.current) == null ? void 0 : _a.refleshImage({
|
|
image: (0, import_func.generateImg)(url)
|
|
});
|
|
}
|
|
}, [url]);
|
|
(0, import_react.useEffect)(() => {
|
|
setShowUrl(url);
|
|
const handleTransformChange = (0, import_func.addEventListener)(
|
|
imgContainerRef.current,
|
|
"viewer-transform-change",
|
|
(event) => {
|
|
const data = event.detail;
|
|
setScale((0, import_func.get)(data, "scale", 0));
|
|
}
|
|
);
|
|
imgInsRef.current = new import_viewer.default(imgContainerRef.current, {
|
|
image: (0, import_func.generateImg)(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;
|
|
};
|
|
}, []);
|
|
const handlePre = (0, import_react.useCallback)(() => {
|
|
var _a;
|
|
const index = urls.findIndex((v) => v === showUrl);
|
|
if (index > 0) {
|
|
const newUrl = urls[index - 1];
|
|
setShowUrl(newUrl);
|
|
(_a = imgInsRef.current) == null ? void 0 : _a.refleshImage({
|
|
image: newUrl
|
|
});
|
|
}
|
|
}, [showUrl, urls]);
|
|
const handleNext = (0, import_react.useCallback)(() => {
|
|
var _a;
|
|
const index = urls.findIndex((v) => v === showUrl);
|
|
if (index >= 0 && !!urls[index + 1]) {
|
|
const newUrl = urls[index + 1];
|
|
setShowUrl(newUrl);
|
|
(_a = imgInsRef.current) == null ? void 0 : _a.refleshImage({
|
|
image: newUrl
|
|
});
|
|
}
|
|
}, [showUrl, urls]);
|
|
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`) }), !url && /* @__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`) }, "暂无匹配数据")), !!url && 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: !urls[urls.findIndex((v) => v === showUrl) - 1],
|
|
onClick: () => {
|
|
handlePre();
|
|
}
|
|
},
|
|
/* @__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: !urls[urls.findIndex((v) => v === showUrl) + 1],
|
|
onClick: () => {
|
|
handleNext();
|
|
}
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { icon: "icon-qiehuanyou", size: 40 })
|
|
)), !!score && /* @__PURE__ */ import_react.default.createElement(import_CornerScore.default, { scoreTxt: 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 ImagePreview_default = CompaterImage;
|