fix: 添加数据为空时自定义
This commit is contained in:
parent
572876c585
commit
57f54b7164
19
.dumirc.ts
19
.dumirc.ts
@ -9,6 +9,15 @@ export default defineConfig({
|
||||
socialLinks: {
|
||||
gitlab: 'http://10.0.0.88/web-project/zhst-Lambo',
|
||||
},
|
||||
nav: {
|
||||
mode: 'append',
|
||||
value: [
|
||||
{
|
||||
title: '智能柜物料库→',
|
||||
link: 'http://10.0.0.222:30098',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
alias: {
|
||||
'@zhst/hooks': path.join(__dirname, 'packages/hooks/src'),
|
||||
@ -33,14 +42,4 @@ export default defineConfig({
|
||||
srcDir: ['packages', 'src'],
|
||||
peerDeps: true,
|
||||
},
|
||||
extraBabelPlugins: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'antd',
|
||||
libraryDirectory: 'es',
|
||||
style: true,
|
||||
},
|
||||
],
|
||||
],
|
||||
});
|
||||
|
||||
10
.fatherrc.ts
10
.fatherrc.ts
@ -2,14 +2,4 @@ import { defineConfig } from 'father';
|
||||
|
||||
export default defineConfig({
|
||||
// more father config: https://github.com/umijs/father/blob/master/docs/config.md
|
||||
extraBabelPlugins: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'antd',
|
||||
libraryDirectory: 'es',
|
||||
style: true,
|
||||
},
|
||||
],
|
||||
],
|
||||
});
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@umijs/lint": "^4.0.0",
|
||||
"babel-plugin-import": "^1.13.8",
|
||||
"dumi": "^2.2.13",
|
||||
"eslint": "^8.23.0",
|
||||
"father": "^4.1.0",
|
||||
|
||||
@ -1,5 +1,23 @@
|
||||
# @zhst/biz
|
||||
|
||||
## 0.10.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @zhst/meta@0.9.1
|
||||
|
||||
## 0.10.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 修改 metad 大图组建
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @zhst/meta@0.9.0
|
||||
|
||||
## 0.9.8
|
||||
|
||||
### Patch Changes
|
||||
@ -13,6 +31,8 @@
|
||||
### Patch Changes
|
||||
|
||||
- 新增 RealTimeMonitor,VideoPlayerCard,ViewLargerImageModal,WarningRecordCard 组件,优化盒子树创建弹框规则校验
|
||||
- Updated dependencies
|
||||
- @zhst/meta@0.8.5
|
||||
|
||||
## 0.9.6
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@zhst/biz",
|
||||
"version": "0.9.8",
|
||||
"version": "0.10.1",
|
||||
"description": "业务库",
|
||||
"keywords": [
|
||||
"business",
|
||||
@ -35,7 +35,7 @@
|
||||
"registry": "http://10.0.0.77:4874"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/zhst": "workspace:^"
|
||||
"@zhst/types": "workspace:^"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
|
||||
@ -26,15 +26,12 @@ export var formateDuration = function formateDuration(diff) {
|
||||
if (minutes > 0) {
|
||||
returnStr = minutes + '分'; //+ returnStr;
|
||||
}
|
||||
|
||||
if (hours > 0) {
|
||||
returnStr = hours + '小时'; // + returnStr;
|
||||
}
|
||||
|
||||
if (days > 0) {
|
||||
returnStr = days + '天'; //+ returnStr;
|
||||
}
|
||||
|
||||
return returnStr;
|
||||
};
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
||||
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
||||
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
||||
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
||||
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
||||
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
||||
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
||||
import { useLatest } from 'ahooks';
|
||||
import events from 'events';
|
||||
import { get, isArray } from '@zhst/func';
|
||||
|
||||
@ -1,5 +1,24 @@
|
||||
# @zhst/utils
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 添加数据为空时自定义
|
||||
- Updated dependencies
|
||||
- @zhst/meta@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 修改 metad 大图组建
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @zhst/meta@0.9.0
|
||||
|
||||
## 0.8.5
|
||||
|
||||
### Patch Changes
|
||||
@ -7,6 +26,9 @@
|
||||
- @zhst/func@0.7.5
|
||||
- @zhst/hooks@0.8.4
|
||||
- @zhst/meta@0.8.5
|
||||
- 修改大图组组建的手动绘制截图逻辑
|
||||
- Updated dependencies
|
||||
- @zhst/meta@0.8.5
|
||||
|
||||
## 0.8.4
|
||||
|
||||
|
||||
@ -13,10 +13,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
||||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
||||
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
import React, { useEffect, useState, useCallback, useRef, useImperativeHandle } from 'react';
|
||||
import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useLatest } from '@zhst/hooks';
|
||||
import { get, pick, isNull, generateImg, dataURLToBlob, getOdRect, getExtendRect, getTransformRect, getRotateImg, getTransforms, addEventListenerWrapper, getFileByRect } from '@zhst/func';
|
||||
import { get, pick, isNull, generateImg, dataURLToBlob, getTransforms, addEventListenerWrapper, getFileByRect } from '@zhst/func';
|
||||
import Align from 'rc-align';
|
||||
import { Button, Empty } from '..';
|
||||
import Icon from "../iconfont";
|
||||
@ -24,6 +23,7 @@ import { Cropper, Viewer, EVENT_VIEWER_TRANSFORM_CHANGE, EVENT_VIEWER_READY, EVE
|
||||
import BtnGroup from "./components/BtnGroup";
|
||||
import "./index.less";
|
||||
import { defaultAlignOption, CROP_TYPE } from "../utils/constants";
|
||||
import { getOdRect, getExtendRect, getTransformRect, getRotateImg } from "./bigImagePreviewHelper";
|
||||
var componentName = "zhst-image__img-view";
|
||||
var cropBtnDataSource = [{
|
||||
key: 'close',
|
||||
@ -55,7 +55,7 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
var width = props.width,
|
||||
height = props.height,
|
||||
_props$showScore = props.showScore,
|
||||
showScore = _props$showScore === void 0 ? true : _props$showScore,
|
||||
showScore = _props$showScore === void 0 ? false : _props$showScore,
|
||||
data = props.data,
|
||||
_props$showOpt = props.showOpt,
|
||||
showOpt = _props$showOpt === void 0 ? false : _props$showOpt,
|
||||
@ -67,14 +67,21 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
screenshotButtonRender = _props$screenshotButt2 === void 0 ? function () {
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
style: {
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
width: '80px',
|
||||
top: 0,
|
||||
fontSize: 12
|
||||
}
|
||||
}, "\u56DE\u8C03DOM");
|
||||
} : _props$screenshotButt2,
|
||||
_props$hideLeftTopBtn = props.hideLeftTopBtn,
|
||||
hideLeftTopBtn = _props$hideLeftTopBtn === void 0 ? true : _props$hideLeftTopBtn,
|
||||
onDraw = props.onDraw,
|
||||
_props$viewOption = props.viewOption,
|
||||
viewOption = _props$viewOption === void 0 ? {} : _props$viewOption;
|
||||
viewOption = _props$viewOption === void 0 ? {} : _props$viewOption,
|
||||
type = props.type,
|
||||
hideTypeBtns = props.hideTypeBtns,
|
||||
customEmpty = props.customEmpty;
|
||||
var imageKey = data.imageKey,
|
||||
attachImg = data.attachImg,
|
||||
odRect = data.odRect,
|
||||
@ -82,22 +89,15 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
_data$objects = data.objects,
|
||||
objects = _data$objects === void 0 ? [] : _data$objects;
|
||||
var imgContainerRef = React.useRef(null);
|
||||
var _useState = useState(false),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
isReady = _useState2[0],
|
||||
setIsReady = _useState2[1];
|
||||
var init = useCallback(function ($container) {
|
||||
imgContainerRef.current = $container;
|
||||
setIsReady(true);
|
||||
}, []);
|
||||
|
||||
// ============================= viewer =========================
|
||||
var imgInsRef = useRef(null);
|
||||
var _useState3 = useState(false),
|
||||
_useState4 = _slicedToArray(_useState3, 2),
|
||||
isImgReady = _useState4[0],
|
||||
setIsImgReady = _useState4[1];
|
||||
var _useState = useState(false),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
isImgReady = _useState2[0],
|
||||
setIsImgReady = _useState2[1];
|
||||
useEffect(function () {
|
||||
if (!isReady || !(imgContainerRef !== null && imgContainerRef !== void 0 && imgContainerRef.current)) return;
|
||||
if (!(imgContainerRef !== null && imgContainerRef !== void 0 && imgContainerRef.current)) return;
|
||||
var handleReady = addEventListenerWrapper(imgContainerRef.current, EVENT_VIEWER_READY, function () {
|
||||
setIsImgReady(true);
|
||||
});
|
||||
@ -113,7 +113,7 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
imgInsRef === null || imgInsRef === void 0 || (_imgInsRef$current = imgInsRef.current) === null || _imgInsRef$current === void 0 || (_imgInsRef$current$de = _imgInsRef$current.destroy) === null || _imgInsRef$current$de === void 0 || _imgInsRef$current$de.call(_imgInsRef$current);
|
||||
imgInsRef.current = null;
|
||||
};
|
||||
}, [isReady, imageKey]);
|
||||
}, [imageKey]);
|
||||
|
||||
// ============================= viewer操作按钮 =========================
|
||||
var handleOptClick = function handleOptClick(v) {
|
||||
@ -134,42 +134,42 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
// ============================= cropper =========================
|
||||
// 手动截图相关参数
|
||||
var cropInsRef = useRef(null);
|
||||
var _useState5 = useState(showOpt),
|
||||
var _useState3 = useState(showOpt),
|
||||
_useState4 = _slicedToArray(_useState3, 2),
|
||||
showCrop = _useState4[0],
|
||||
setShowCrop = _useState4[1];
|
||||
var _useState5 = useState(type || CROP_TYPE['AUTO']),
|
||||
_useState6 = _slicedToArray(_useState5, 2),
|
||||
showCrop = _useState6[0],
|
||||
setShowCrop = _useState6[1];
|
||||
var _useState7 = useState(CROP_TYPE['AUTO']),
|
||||
_useState8 = _slicedToArray(_useState7, 2),
|
||||
cropType = _useState8[0],
|
||||
setCropType = _useState8[1];
|
||||
cropType = _useState6[0],
|
||||
setCropType = _useState6[1];
|
||||
|
||||
// 自动截图相关参数
|
||||
var _useState7 = useState([]),
|
||||
_useState8 = _slicedToArray(_useState7, 2),
|
||||
odList = _useState8[0],
|
||||
setOdList = _useState8[1];
|
||||
var _useState9 = useState([]),
|
||||
_useState10 = _slicedToArray(_useState9, 2),
|
||||
odList = _useState10[0],
|
||||
setOdList = _useState10[1];
|
||||
var _useState11 = useState([]),
|
||||
extendOdList = _useState10[0],
|
||||
setExtendOdList = _useState10[1];
|
||||
var _useState11 = useState(null),
|
||||
_useState12 = _slicedToArray(_useState11, 2),
|
||||
extendOdList = _useState12[0],
|
||||
setExtendOdList = _useState12[1];
|
||||
var _useState13 = useState(null),
|
||||
_useState14 = _slicedToArray(_useState13, 2),
|
||||
selectRectId = _useState14[0],
|
||||
setSelectRectId = _useState14[1];
|
||||
selectRectId = _useState12[0],
|
||||
setSelectRectId = _useState12[1];
|
||||
|
||||
// 定位按钮相关参数
|
||||
var alginContainerRef = useRef(null);
|
||||
var alignRef = useRef(null);
|
||||
var _useState15 = useState(null),
|
||||
_useState16 = _slicedToArray(_useState15, 2),
|
||||
cropRect = _useState16[0],
|
||||
setCropRect = _useState16[1];
|
||||
var _useState13 = useState(null),
|
||||
_useState14 = _slicedToArray(_useState13, 2),
|
||||
cropRect = _useState14[0],
|
||||
setCropRect = _useState14[1];
|
||||
|
||||
// 选中的版本号
|
||||
var _useState17 = useState(null),
|
||||
_useState18 = _slicedToArray(_useState17, 2),
|
||||
selectAlgorithmVersion = _useState18[0],
|
||||
setSelectAlgorithmVersion = _useState18[1];
|
||||
var _useState15 = useState(null),
|
||||
_useState16 = _slicedToArray(_useState15, 2),
|
||||
selectAlgorithmVersion = _useState16[0],
|
||||
setSelectAlgorithmVersion = _useState16[1];
|
||||
var handlerCropStartRef = useRef(null);
|
||||
var handlerCropEndRef = useRef(null);
|
||||
var handleShapeSelectRef = useRef(null);
|
||||
@ -185,6 +185,8 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
cropInsRef.current = null;
|
||||
};
|
||||
}, [isImgReady, showCrop, cropType, imageKey]);
|
||||
|
||||
// 初始化页面的绘制矩形
|
||||
var initData = function initData(_objects) {
|
||||
var imgIns = imgInsRef.current;
|
||||
var _odRect = odRect;
|
||||
@ -210,7 +212,7 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
var shapeList = odList.map(function (rect) {
|
||||
return _objectSpread(_objectSpread({}, rect), {}, {
|
||||
selectAble: true,
|
||||
id: rect['id'],
|
||||
id: ['id'],
|
||||
algorithmVersion: rect.algorithmVersion
|
||||
});
|
||||
});
|
||||
@ -223,28 +225,49 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
});
|
||||
setExtendOdList(extendRect);
|
||||
imgIns.replaceShape(shapeList);
|
||||
handleShapeSelectRef.current = addEventListenerWrapper(imgContainerRef.current, 'shape-select', function (e) {
|
||||
var id = e.detail;
|
||||
// 框选监听事件
|
||||
handleShapeSelectRef.current = addEventListenerWrapper(imgContainerRef.current, 'shape-select', /*#__PURE__*/function () {
|
||||
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
||||
var id, selectShape, axisRect, _rect2;
|
||||
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
||||
while (1) switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
id = e.detail;
|
||||
setSelectRectId(id);
|
||||
var selectShape = shapeList.find(function (v) {
|
||||
selectShape = shapeList.find(function (v) {
|
||||
return v['id'] === id;
|
||||
});
|
||||
if (selectShape) {
|
||||
setSelectAlgorithmVersion(selectShape['algorithmVersion']);
|
||||
//换算成屏幕坐标
|
||||
var axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape);
|
||||
var _rect = {
|
||||
axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape);
|
||||
_rect2 = {
|
||||
x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
|
||||
y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
|
||||
w: Math.abs(axisRect.x2 - axisRect.x),
|
||||
h: Math.abs(axisRect.y2 - axisRect.y)
|
||||
};
|
||||
setCropRect(_rect);
|
||||
setCropRect(_rect2);
|
||||
onDraw === null || onDraw === void 0 || onDraw({
|
||||
rectList: [_rect2],
|
||||
extendRectList: [_rect2],
|
||||
imgKey: imageKey,
|
||||
selectIndex: id
|
||||
});
|
||||
} else {
|
||||
// @ts-ignore
|
||||
setCropRect(null);
|
||||
}
|
||||
});
|
||||
case 4:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}, _callee);
|
||||
}));
|
||||
return function (_x) {
|
||||
return _ref.apply(this, arguments);
|
||||
};
|
||||
}());
|
||||
};
|
||||
// @ts-ignore
|
||||
var rect = getOdRect({
|
||||
@ -263,18 +286,41 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
setSelectAlgorithmVersion(null);
|
||||
setCropRect(null);
|
||||
});
|
||||
handlerCropEndRef.current = addEventListenerWrapper(imgContainerRef.current, EVENT_CROP_END, function (event) {
|
||||
handlerCropEndRef.current = addEventListenerWrapper(imgContainerRef.current, EVENT_CROP_END, /*#__PURE__*/function () {
|
||||
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
|
||||
var _alignRef$current, _alignRef$current$for;
|
||||
var data = event.detail;
|
||||
var data, _rect, _cropData;
|
||||
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
||||
while (1) switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
data = event.detail;
|
||||
setSelectAlgorithmVersion(null);
|
||||
setCropRect({
|
||||
_rect = {
|
||||
x: data.left,
|
||||
y: data.top,
|
||||
w: data.width,
|
||||
h: data.height
|
||||
};
|
||||
setCropRect(_rect);
|
||||
_context2.next = 6;
|
||||
return getCropInfo({
|
||||
type: cropType,
|
||||
rect: _rect
|
||||
});
|
||||
case 6:
|
||||
_cropData = _context2.sent;
|
||||
onDraw === null || onDraw === void 0 || onDraw(_cropData);
|
||||
alignRef === null || alignRef === void 0 || (_alignRef$current = alignRef.current) === null || _alignRef$current === void 0 || (_alignRef$current$for = _alignRef$current.forceAlign) === null || _alignRef$current$for === void 0 || _alignRef$current$for.call(_alignRef$current);
|
||||
});
|
||||
case 9:
|
||||
case "end":
|
||||
return _context2.stop();
|
||||
}
|
||||
}, _callee2);
|
||||
}));
|
||||
return function (_x2) {
|
||||
return _ref2.apply(this, arguments);
|
||||
};
|
||||
}());
|
||||
cropInsRef.current = new Cropper(imgContainerRef.current, {
|
||||
showMask: true,
|
||||
viewer: imgIns
|
||||
@ -283,26 +329,25 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
};
|
||||
|
||||
// 获取框选的截图框信息
|
||||
var latestCropType = useLatest(cropType);
|
||||
var latestCropRect = useLatest(cropRect);
|
||||
var getCropInfo = /*#__PURE__*/function () {
|
||||
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(cb) {
|
||||
var cropType, cropRect, imgIns, transform, newImgKey, rectList, extendRectList, selectIndex, shapes, shapeIds, newRect, _data;
|
||||
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
||||
while (1) switch (_context3.prev = _context3.next) {
|
||||
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(opt) {
|
||||
var type, rect, cropType, cropRect, imgIns, transform, newImgKey, rectList, extendRectList, selectIndex, shapes, shapeIds, newRect, _data, data;
|
||||
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
|
||||
while (1) switch (_context5.prev = _context5.next) {
|
||||
case 0:
|
||||
cropType = latestCropType.current;
|
||||
cropRect = latestCropRect.current;
|
||||
type = opt.type, rect = opt.rect;
|
||||
cropType = type;
|
||||
cropRect = rect;
|
||||
imgIns = imgInsRef.current;
|
||||
transform = imgIns.targetTransform;
|
||||
newImgKey = imageKey;
|
||||
rectList = [];
|
||||
extendRectList = [];
|
||||
selectIndex = 0;
|
||||
_context3.t0 = cropType;
|
||||
_context3.next = _context3.t0 === CROP_TYPE['AUTO'] ? 11 : 17;
|
||||
_context5.t0 = cropType;
|
||||
_context5.next = _context5.t0 === CROP_TYPE['AUTO'] ? 12 : 18;
|
||||
break;
|
||||
case 11:
|
||||
case 12:
|
||||
shapes = imgIns.getSelectShape();
|
||||
shapeIds = shapes.map(function (v) {
|
||||
return v['id'];
|
||||
@ -331,8 +376,8 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
selectIndex = rectList.findIndex(function (v) {
|
||||
return v['id'] === selectRectId;
|
||||
});
|
||||
return _context3.abrupt("break", 22);
|
||||
case 17:
|
||||
return _context5.abrupt("break", 23);
|
||||
case 18:
|
||||
//获取旋转过的坐标
|
||||
// @ts-ignore
|
||||
newRect = getTransformRect(imgIns.image, transform, cropRect); //判断是不是旋转过
|
||||
@ -342,40 +387,40 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
}
|
||||
rectList.push(newRect);
|
||||
extendRectList.push(newRect);
|
||||
return _context3.abrupt("break", 22);
|
||||
case 22:
|
||||
_context3.next = 24;
|
||||
return _context5.abrupt("break", 23);
|
||||
case 23:
|
||||
_context5.next = 25;
|
||||
return Promise.all(extendRectList.map( /*#__PURE__*/function () {
|
||||
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(rect, index) {
|
||||
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(rect, index) {
|
||||
var file, imgKey;
|
||||
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
||||
while (1) switch (_context.prev = _context.next) {
|
||||
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
||||
while (1) switch (_context3.prev = _context3.next) {
|
||||
case 0:
|
||||
_context.next = 2;
|
||||
_context3.next = 2;
|
||||
return getFileByRect(imgIns.image, rect);
|
||||
case 2:
|
||||
file = _context.sent;
|
||||
file = _context3.sent;
|
||||
imgKey = file;
|
||||
extendRectList[index] = _objectSpread(_objectSpread({}, rect), {}, {
|
||||
imgKey: imgKey
|
||||
});
|
||||
case 5:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
return _context3.stop();
|
||||
}
|
||||
}, _callee);
|
||||
}, _callee3);
|
||||
}));
|
||||
return function (_x2, _x3) {
|
||||
return _ref2.apply(this, arguments);
|
||||
return function (_x4, _x5) {
|
||||
return _ref4.apply(this, arguments);
|
||||
};
|
||||
}()));
|
||||
case 24:
|
||||
_context3.next = 26;
|
||||
case 25:
|
||||
_context5.next = 27;
|
||||
return Promise.all(rectList.map( /*#__PURE__*/function () {
|
||||
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(rect, index) {
|
||||
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(rect, index) {
|
||||
var faceCorrectImage, faceCorrectImageKey, base64, blobData, file, newRect;
|
||||
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
||||
while (1) switch (_context2.prev = _context2.next) {
|
||||
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
||||
while (1) switch (_context4.prev = _context4.next) {
|
||||
case 0:
|
||||
faceCorrectImage = rect['faceCorrectImage'];
|
||||
if (faceCorrectImage) {
|
||||
@ -391,35 +436,30 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
rectList[index] = newRect;
|
||||
case 5:
|
||||
case "end":
|
||||
return _context2.stop();
|
||||
return _context4.stop();
|
||||
}
|
||||
}, _callee2);
|
||||
}, _callee4);
|
||||
}));
|
||||
return function (_x4, _x5) {
|
||||
return _ref3.apply(this, arguments);
|
||||
return function (_x6, _x7) {
|
||||
return _ref5.apply(this, arguments);
|
||||
};
|
||||
}()));
|
||||
case 26:
|
||||
cb === null || cb === void 0 || cb({
|
||||
case 27:
|
||||
data = {
|
||||
rectList: rectList,
|
||||
extendRectList: extendRectList,
|
||||
selectIndex: selectIndex,
|
||||
imgKey: newImgKey
|
||||
});
|
||||
return _context3.abrupt("return", {
|
||||
rectList: rectList,
|
||||
extendRectList: extendRectList,
|
||||
selectIndex: selectIndex,
|
||||
imgKey: newImgKey
|
||||
});
|
||||
case 28:
|
||||
};
|
||||
return _context5.abrupt("return", data);
|
||||
case 29:
|
||||
case "end":
|
||||
return _context3.stop();
|
||||
return _context5.stop();
|
||||
}
|
||||
}, _callee3);
|
||||
}, _callee5);
|
||||
}));
|
||||
return function getCropInfo(_x) {
|
||||
return _ref.apply(this, arguments);
|
||||
return function getCropInfo(_x3) {
|
||||
return _ref3.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
|
||||
@ -439,23 +479,14 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
};
|
||||
|
||||
// ============================= attact img =========================
|
||||
var _useState19 = useState(0),
|
||||
var _useState17 = useState(0),
|
||||
_useState18 = _slicedToArray(_useState17, 2),
|
||||
selectAttachImgIndex = _useState18[0],
|
||||
setSelectAttachImgIndex = _useState18[1];
|
||||
var _useState19 = useState(false),
|
||||
_useState20 = _slicedToArray(_useState19, 2),
|
||||
selectAttachImgIndex = _useState20[0],
|
||||
setSelectAttachImgIndex = _useState20[1];
|
||||
var _useState21 = useState(false),
|
||||
_useState22 = _slicedToArray(_useState21, 2),
|
||||
isZoomin = _useState22[0],
|
||||
setIsZoomin = _useState22[1];
|
||||
|
||||
/**
|
||||
* 修改当前图片预览下标
|
||||
* @param diff 跳转强度 正向后翻、负值向前翻
|
||||
*/
|
||||
var handleChangeIndex = function handleChangeIndex(cb) {
|
||||
if (!imageKey) return;
|
||||
cb === null || cb === void 0 || cb();
|
||||
};
|
||||
isZoomin = _useState20[0],
|
||||
setIsZoomin = _useState20[1];
|
||||
|
||||
// ============================== Ref ===============================
|
||||
useImperativeHandle(ref, function () {
|
||||
@ -463,8 +494,7 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
imgInsRef: imgInsRef,
|
||||
setShowCrop: setShowCrop,
|
||||
initData: initData,
|
||||
getCropInfo: getCropInfo,
|
||||
handleChangeIndex: handleChangeIndex
|
||||
getCropInfo: getCropInfo
|
||||
};
|
||||
});
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
@ -475,13 +505,14 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
}
|
||||
}, imageKey ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
||||
className: classNames("".concat(componentName, "-main"), cropType === CROP_TYPE['AUTO'] && "".concat(componentName, "-main--cursor")),
|
||||
ref: init
|
||||
ref: imgContainerRef
|
||||
// style={{ width: width, height: height }}
|
||||
}), !hideLeftTopBtn && /*#__PURE__*/React.createElement(BtnGroup, {
|
||||
className: classNames("".concat(componentName, "-opt")),
|
||||
dataSource: operateBtnDataSource,
|
||||
onClick: handleOptClick,
|
||||
placement: "left"
|
||||
}), showCrop && /*#__PURE__*/React.createElement(BtnGroup, {
|
||||
}), !hideTypeBtns && showCrop && /*#__PURE__*/React.createElement(BtnGroup, {
|
||||
circle: true,
|
||||
className: classNames("".concat(componentName, "-crop-opt")),
|
||||
dataSource: cropBtnDataSource,
|
||||
@ -515,8 +546,8 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
className: classNames("".concat(componentName, "-attach"), isZoomin && "".concat(componentName, "-attach--zoomin"), "".concat(componentName, "-attach--fixed"), isZoomin && "".concat(componentName, "-attach--zoomin--fixed"))
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
className: classNames("".concat(componentName, "-attach__tab"))
|
||||
}, showAttachImgLabel ? attachImg === null || attachImg === void 0 ? void 0 : attachImg.map(function (_ref4, index) {
|
||||
var label = _ref4.label;
|
||||
}, showAttachImgLabel ? attachImg === null || attachImg === void 0 ? void 0 : attachImg.map(function (_ref6, index) {
|
||||
var label = _ref6.label;
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
key: index,
|
||||
className: classNames("".concat(componentName, "-attach__tab-item"), selectAttachImgIndex === index && "".concat(componentName, "-attach__tab-item--select")),
|
||||
@ -550,15 +581,25 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
|
||||
draggable: "false",
|
||||
className: classNames("".concat(componentName, "-attach__img"), "".concat(componentName, "-attach__img--fixed")),
|
||||
src: get(attachImg, "".concat(selectAttachImgIndex, ".url"), '')
|
||||
})), showScore && /*#__PURE__*/React.createElement("div", {
|
||||
})), (showScore || score) && /*#__PURE__*/React.createElement("div", {
|
||||
style: {
|
||||
bottom: 20
|
||||
},
|
||||
className: classNames("".concat(componentName, "__face-score"))
|
||||
}, "\u4EBA\u8138\u8D28\u91CF\u5206\uFF1A".concat(Number(score).toFixed(2)))) : /*#__PURE__*/React.createElement(Empty, {
|
||||
}, "\u4EBA\u8138\u8D28\u91CF\u5206\uFF1A".concat(Number(score).toFixed(2)))) : /*#__PURE__*/React.createElement("div", {
|
||||
style: {
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
}, customEmpty || /*#__PURE__*/React.createElement(Empty, {
|
||||
style: {
|
||||
margin: 0
|
||||
},
|
||||
image: Empty.PRESENTED_IMAGE_SIMPLE,
|
||||
description: "\u6682\u65E0\u6570\u636E"
|
||||
}));
|
||||
})));
|
||||
});
|
||||
BigImagePreview.displayName = 'BigImagePreview';
|
||||
export default BigImagePreview;
|
||||
@ -0,0 +1,270 @@
|
||||
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
||||
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
||||
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
||||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
||||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
||||
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
||||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
||||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
||||
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
||||
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
||||
import { cloneDeep, dataURLToBlob, get, isNull } from "@zhst/func";
|
||||
var proto = {
|
||||
Common: {
|
||||
AlgorithmVersion: {
|
||||
VERSION_REID_HEAD_ATTR: '形体',
|
||||
VERSION_FACE: '人脸',
|
||||
VERSION_NON_MOTOR_VEHICLE: '非机动车'
|
||||
}
|
||||
}
|
||||
};
|
||||
export var ALGORITHM_VERSION = _defineProperty(_defineProperty(_defineProperty({}, '7', '形体'), '4', '人脸'), '6', '非机动车');
|
||||
export var algorithmVersions = _toConsumableArray(Object.keys(ALGORITHM_VERSION));
|
||||
/**
|
||||
* 格式化工具
|
||||
* @param originData
|
||||
* @returns
|
||||
*/
|
||||
export var getOdRect = function getOdRect(originData) {
|
||||
var data = get(originData, 'objects', []).filter(function (v) {
|
||||
return !isNull(get(v, 'bboxRatio')) || get(v, 'objectIndex.objectId') !== '0';
|
||||
}).map(function (v, index) {
|
||||
var rect = get(v, 'bboxRatio');
|
||||
var extendBox = get(v, 'extendBoxRatio');
|
||||
var frameTimestamp = get(v, 'timestamp'); //时间戳创建档案的时候需要
|
||||
var qualityScore = get(v, 'qualityScore');
|
||||
var algorithmVersion = get(v, 'objectType') === 'OBJECT_TYPE_PEDESTRAIN' ? 'VERSION_REID_HEAD_ATTR' : get(v, 'objectType') === 'OBJECT_TYPE_FACE' ? 'VERSION_FACE' : 'VERSION_REID_HEAD_ATTR';
|
||||
var objectRectIndex = algorithmVersion === 'VERSION_FACE' ? 0 : 1;
|
||||
var objectType = get(v, 'objectType');
|
||||
var objectId = get(v, 'objectIndex.objectId');
|
||||
var sourceObjectId = get(v, 'sourceObjectId');
|
||||
return {
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
w: rect.w,
|
||||
h: rect.h,
|
||||
id: index,
|
||||
qualityScore: qualityScore,
|
||||
algorithmVersion: algorithmVersion,
|
||||
objectRectIndex: objectRectIndex,
|
||||
objectType: objectType,
|
||||
objectId: objectId,
|
||||
frameTimestamp: frameTimestamp,
|
||||
sourceObjectId: sourceObjectId,
|
||||
extendBox: extendBox
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
export var getNormalization = function getNormalization(srcRect, maxW, maxH) {
|
||||
var newRect = _objectSpread({}, srcRect);
|
||||
newRect.x = srcRect.x / maxW;
|
||||
newRect.y = srcRect.y / maxH;
|
||||
newRect.w = srcRect.w / maxW;
|
||||
newRect.h = srcRect.h / maxH;
|
||||
if (newRect.x + newRect.w > 1) {
|
||||
newRect.w = 1 - newRect.x;
|
||||
}
|
||||
if (newRect.y + newRect.h > 1) {
|
||||
newRect.h = 1 - newRect.y;
|
||||
}
|
||||
return newRect;
|
||||
};
|
||||
//传入od框 穿出 od扩展框
|
||||
export var getExtendRect = function getExtendRect(normalizationRect, imgW, imgH, type) {
|
||||
var rect = {
|
||||
x: normalizationRect.x * imgW,
|
||||
y: normalizationRect.y * imgH,
|
||||
w: normalizationRect.w * imgW,
|
||||
h: normalizationRect.h * imgH
|
||||
};
|
||||
var newRect;
|
||||
if (type === proto.Common.AlgorithmVersion.VERSION_NON_MOTOR_VEHICLE) {
|
||||
newRect = getBikeExtendRect(rect, imgW);
|
||||
} else {
|
||||
newRect = getOtherExtendRect(rect, imgW, imgH, type);
|
||||
}
|
||||
newRect = getNormalization(newRect, imgW, imgH);
|
||||
return newRect;
|
||||
};
|
||||
export var getBikeExtendRect = function getBikeExtendRect(rect, maxW) {
|
||||
var newRect = _objectSpread({}, rect);
|
||||
//向上扩大一倍
|
||||
var oldY = cloneDeep(rect.y);
|
||||
newRect.y = newRect.y - newRect.h < 0 ? 0 : newRect.y - newRect.h;
|
||||
newRect.h += oldY - newRect.y;
|
||||
var newX = Math.round(newRect.x - newRect.w * 0.15);
|
||||
if (newX < 0) {
|
||||
newX = 0;
|
||||
}
|
||||
var newW = newRect.x - newX + newRect.w + Math.round(newRect.w * 0.15);
|
||||
if (newX + newW > maxW) {
|
||||
newW = maxW - newX;
|
||||
}
|
||||
newRect.x = newX;
|
||||
newRect.w = newW;
|
||||
return newRect;
|
||||
};
|
||||
export var getOtherExtendRect = function getOtherExtendRect(srcRect, maxW, maxH, type) {
|
||||
var wExtendRadio = 0.25;
|
||||
var upExtendRadio = 0.25;
|
||||
var downExtendRadio = 0.25;
|
||||
var fixPersonExtend = true;
|
||||
var nx = 0;
|
||||
var nw = 0;
|
||||
nx = srcRect.x - Math.round(srcRect.w * wExtendRadio);
|
||||
if (nx < 0) {
|
||||
nx = 0;
|
||||
}
|
||||
nw = srcRect.x - nx + srcRect.w + Math.round(srcRect.w * wExtendRadio);
|
||||
if (nx + nw > maxW) {
|
||||
nw = maxW - nx;
|
||||
}
|
||||
var ny = 0;
|
||||
var nh = 0;
|
||||
ny = srcRect.y - Math.round(upExtendRadio * srcRect.h);
|
||||
if (ny < 0) {
|
||||
ny = 0;
|
||||
}
|
||||
nh = srcRect.y - ny + srcRect.h + Math.round(srcRect.h * downExtendRadio);
|
||||
if (ny + nh > maxH) {
|
||||
nh = maxH - ny;
|
||||
}
|
||||
var newRect = {
|
||||
x: nx,
|
||||
y: ny,
|
||||
w: nw,
|
||||
h: nh
|
||||
};
|
||||
if ((type === proto.Common.AlgorithmVersion.VERSION_REID_HEAD_ATTR || type === proto.Common.AlgorithmVersion.VERSION_FACE) && fixPersonExtend) {
|
||||
var fixW = Math.round(nh * 0.75);
|
||||
if (nw < fixW) {
|
||||
// 应该扩展宽度
|
||||
var newX = nx + Math.round(nw / 2.0 - 0.5 * fixW);
|
||||
if (newX < 0) {
|
||||
newX = 0;
|
||||
}
|
||||
var newW = fixW;
|
||||
if (newW + newX > maxW) {
|
||||
newW = maxW - newX;
|
||||
}
|
||||
newRect = {
|
||||
x: newX,
|
||||
y: ny,
|
||||
w: newW,
|
||||
h: nh
|
||||
};
|
||||
} else if (nw > fixW) {
|
||||
// 应该扩展高度
|
||||
var fixH = Math.round(nw * 1.333);
|
||||
var newY = ny + Math.round(nh / 2.0 - 0.5 * fixH);
|
||||
if (newY < 0) {
|
||||
newY = 0;
|
||||
}
|
||||
var newH = fixH;
|
||||
if (newY + newH > maxH) {
|
||||
newH = maxH - newY;
|
||||
}
|
||||
newRect = {
|
||||
x: nx,
|
||||
y: newY,
|
||||
w: nw,
|
||||
h: newH
|
||||
};
|
||||
}
|
||||
}
|
||||
return newRect;
|
||||
};
|
||||
export var getTransformRect = function getTransformRect(image, transform, rect) {
|
||||
var canvasRect = {
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
x2: rect.x + rect.w,
|
||||
y2: rect.h + rect.y
|
||||
};
|
||||
//1.转成缩放前的坐标
|
||||
var translateX = transform.translateX,
|
||||
translateY = transform.translateY,
|
||||
scale = transform.scale,
|
||||
rotate = transform.rotate;
|
||||
var originAxisRect = {
|
||||
x: (canvasRect.x - translateX) / scale,
|
||||
y: (canvasRect.y - translateY) / scale,
|
||||
x2: (canvasRect.x2 - translateX) / scale,
|
||||
y2: (canvasRect.y2 - translateY) / scale
|
||||
};
|
||||
//2.转成图片坐标
|
||||
//不考虑旋转 图片原点就是坐标原点
|
||||
var imgAxisRect = originAxisRect;
|
||||
//但是旋转90度后图片不在坐标原点 加上这部分diff
|
||||
if (rotate % 180 !== 0) {
|
||||
//90度调整偏移量
|
||||
var offsetX = -(image.height - image.width) / 2;
|
||||
var offsetY = -(image.width - image.height) / 2;
|
||||
imgAxisRect = {
|
||||
x: originAxisRect.x - offsetX,
|
||||
y: originAxisRect.y - offsetY,
|
||||
x2: originAxisRect.x2 - offsetX,
|
||||
y2: originAxisRect.y2 - offsetY
|
||||
};
|
||||
}
|
||||
//3.限制框不要超出图片
|
||||
var imgW = image.width;
|
||||
var imgH = image.height;
|
||||
if (rotate % 180 !== 0) {
|
||||
var _ref = [imgH, imgW];
|
||||
imgW = _ref[0];
|
||||
imgH = _ref[1];
|
||||
}
|
||||
imgAxisRect.x = Math.min(imgW, Math.max(imgAxisRect.x, 0));
|
||||
imgAxisRect.y = Math.min(imgH, Math.max(imgAxisRect.y, 0));
|
||||
imgAxisRect.x2 = Math.min(imgW, Math.max(imgAxisRect.x2, 0));
|
||||
imgAxisRect.y2 = Math.min(imgH, Math.max(imgAxisRect.y2, 0));
|
||||
//获取归一化坐标
|
||||
var endRect = {
|
||||
x: imgAxisRect.x2 > imgAxisRect.x ? imgAxisRect.x : imgAxisRect.x2,
|
||||
y: imgAxisRect.y2 > imgAxisRect.y ? imgAxisRect.y : imgAxisRect.y2,
|
||||
w: Math.abs(imgAxisRect.x2 - imgAxisRect.x),
|
||||
h: Math.abs(imgAxisRect.y2 - imgAxisRect.y)
|
||||
};
|
||||
return getNormalization(endRect, imgW, imgH);
|
||||
};
|
||||
|
||||
//旋转图片后转成file 对象
|
||||
export var getRotateImg = function getRotateImg(image, rotate) {
|
||||
var _commonCanvas$parentN;
|
||||
var imgW = image.width;
|
||||
var imgH = image.height;
|
||||
if (rotate % 180 !== 0) {
|
||||
var _ref2 = [imgH, imgW];
|
||||
imgW = _ref2[0];
|
||||
imgH = _ref2[1];
|
||||
}
|
||||
var commonCanvas = document.createElement('canvas');
|
||||
commonCanvas.width = imgW;
|
||||
commonCanvas.height = imgH;
|
||||
commonCanvas.style.display = 'none';
|
||||
document.body.appendChild(commonCanvas);
|
||||
var commonCtx = commonCanvas.getContext('2d');
|
||||
//移动到图片中心 旋转
|
||||
|
||||
commonCtx === null || commonCtx === void 0 || commonCtx.save();
|
||||
if (rotate % 180 !== 0) {
|
||||
//90度调整偏移量
|
||||
commonCtx === null || commonCtx === void 0 || commonCtx.translate((image.height - image.width) / 2, (image.width - image.height) / 2);
|
||||
}
|
||||
commonCtx === null || commonCtx === void 0 || commonCtx.translate(image.width / 2, image.height / 2);
|
||||
commonCtx === null || commonCtx === void 0 || commonCtx.rotate(rotate / 180 * Math.PI);
|
||||
commonCtx === null || commonCtx === void 0 || commonCtx.translate(-image.width / 2, -image.height / 2);
|
||||
commonCtx === null || commonCtx === void 0 || commonCtx.drawImage(image, 0, 0);
|
||||
commonCtx === null || commonCtx === void 0 || commonCtx.restore();
|
||||
var dataUrl = commonCanvas.toDataURL('image/jpeg');
|
||||
var blobData = dataURLToBlob(dataUrl);
|
||||
var file = new window.File([blobData], "".concat(new Date().getTime()), {
|
||||
type: 'image/jpeg'
|
||||
});
|
||||
(_commonCanvas$parentN = commonCanvas.parentNode) === null || _commonCanvas$parentN === void 0 || _commonCanvas$parentN.removeChild(commonCanvas);
|
||||
return file;
|
||||
};
|
||||
@ -2,6 +2,7 @@
|
||||
position: relative;
|
||||
width: calc(100%);
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
|
||||
&__face-score {
|
||||
position: absolute;
|
||||
@ -62,14 +63,9 @@
|
||||
height: 202px;
|
||||
transition: all 200ms;
|
||||
|
||||
&--fixed {
|
||||
}
|
||||
|
||||
&--zoomin {
|
||||
height: 100%;
|
||||
|
||||
&--fixed {
|
||||
}
|
||||
}
|
||||
|
||||
&__tab {
|
||||
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
try {
|
||||
handler.remove();
|
||||
} catch (error) {
|
||||
warn('CROP:REMOVE_EVENT_FAIL,', error);
|
||||
warn('CROP:REMOVE_EVENT_FAIL: ', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -46,7 +46,9 @@ var VideoPlayer = /*#__PURE__*/forwardRef(function (props, ref) {
|
||||
screenshotButtonRender = _props$screenshotButt2 === void 0 ? function () {
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
style: {
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
width: '80px',
|
||||
top: 0
|
||||
}
|
||||
}, "\u56DE\u8C03DOM");
|
||||
} : _props$screenshotButt2,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export var CROP_TYPE = {
|
||||
CUSTOM: 'CSUTOM',
|
||||
CUSTOM: 'CUSTOM',
|
||||
AUTO: 'AUTO'
|
||||
};
|
||||
export var defaultAlignOption = {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@zhst/meta",
|
||||
"version": "0.8.5",
|
||||
"version": "0.9.1",
|
||||
"description": "原子组件",
|
||||
"keywords": [
|
||||
"meta",
|
||||
|
||||
@ -90,6 +90,15 @@ export interface ImgViewProps extends React.HTMLAttributes<HTMLElement> {
|
||||
}) => void
|
||||
showScore?: boolean // 是否显示相似度
|
||||
viewOption?: ViewOption;
|
||||
onRectSelect?: (data: {
|
||||
rectList: any[];
|
||||
extendRectList: any[];
|
||||
selectIndex: number;
|
||||
imgKey: string;
|
||||
}) => void
|
||||
type?: 'CUSTOM' | 'AUTO'
|
||||
hideTypeBtns?: boolean
|
||||
customEmpty?: any
|
||||
}
|
||||
export interface ImgViewRef {
|
||||
/* 图片实例 */
|
||||
@ -146,7 +155,10 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
screenshotButtonRender = () => <div style={{ color: '#fff', width: '80px', top: 0, fontSize: 12 }}>回调DOM</div>,
|
||||
hideLeftTopBtn = true,
|
||||
onDraw,
|
||||
viewOption = {}
|
||||
viewOption = {},
|
||||
type,
|
||||
hideTypeBtns,
|
||||
customEmpty,
|
||||
} = props;
|
||||
const {
|
||||
imageKey,
|
||||
@ -204,7 +216,7 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
// 手动截图相关参数
|
||||
const cropInsRef: any = useRef(null);
|
||||
const [showCrop, setShowCrop] = useState(showOpt);
|
||||
const [cropType, setCropType] = useState(CROP_TYPE['AUTO']);
|
||||
const [cropType, setCropType] = useState(type || CROP_TYPE['AUTO']);
|
||||
|
||||
// 自动截图相关参数
|
||||
const [odList, setOdList] = useState<any>([]);
|
||||
@ -259,7 +271,8 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
const shapeList = odList.map((rect: { [x: string]: any; algorithmVersion: any; }) => ({
|
||||
...rect,
|
||||
selectAble: true,
|
||||
id: rect['id'],
|
||||
id:
|
||||
['id'],
|
||||
algorithmVersion: rect.algorithmVersion,
|
||||
}));
|
||||
imgIns.replaceShape(shapeList);
|
||||
@ -271,7 +284,8 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
});
|
||||
setExtendOdList(extendRect);
|
||||
imgIns.replaceShape(shapeList);
|
||||
handleShapeSelectRef.current = addEventListenerWrapper(imgContainerRef.current, 'shape-select', (e: { detail: any; }) => {
|
||||
// 框选监听事件
|
||||
handleShapeSelectRef.current = addEventListenerWrapper(imgContainerRef.current, 'shape-select', async (e: { detail: any; }) => {
|
||||
const id = e.detail;
|
||||
setSelectRectId(id);
|
||||
const selectShape = shapeList.find((v: { [x: string]: any; }) => v['id'] === id);
|
||||
@ -286,6 +300,7 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
h: Math.abs(axisRect.y2 - axisRect.y),
|
||||
};
|
||||
setCropRect(rect);
|
||||
onDraw?.({ rectList: [rect], extendRectList: [rect], imgKey: imageKey, selectIndex: id })
|
||||
} else {
|
||||
// @ts-ignore
|
||||
setCropRect(null);
|
||||
@ -457,6 +472,7 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
cropType === CROP_TYPE['AUTO'] && `${componentName}-main--cursor`
|
||||
)}
|
||||
ref={imgContainerRef}
|
||||
// style={{ width: width, height: height }}
|
||||
/>
|
||||
{/* 图片操作 */}
|
||||
{!hideLeftTopBtn && (
|
||||
@ -467,7 +483,7 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
placement="left"
|
||||
/>
|
||||
)}
|
||||
{showCrop && (
|
||||
{!hideTypeBtns && showCrop && (
|
||||
<BtnGroup
|
||||
circle
|
||||
className={classNames(`${componentName}-crop-opt`)}
|
||||
@ -577,7 +593,9 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
|
||||
</div>}
|
||||
</>
|
||||
:
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
|
||||
<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
{customEmpty || <Empty style={{ margin: 0 }} image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { Button, Space } from '@zhst/meta'
|
||||
import { Button, ImgViewRef, Space } from '@zhst/meta'
|
||||
import { BigImagePreview } from '@zhst/meta'
|
||||
|
||||
|
||||
@ -41,18 +41,17 @@ const props = {
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const imgRef = useRef(null)
|
||||
const imgRef = useRef<ImgViewRef>(null)
|
||||
|
||||
return (
|
||||
<Space size={[8, 16]} direction="vertical">
|
||||
<BigImagePreview {...props} ref={imgRef} />
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => imgRef.current?.setShowCrop(true)}>编辑</Button>
|
||||
<Button onClick={() => imgRef.current?.handleChangeIndex(1)}>下一张</Button>
|
||||
<Button onClick={() => imgRef.current?.setShowCrop(false)}>取消</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
|
||||
28
packages/meta/src/BigImagePreview/demo/empty.tsx
Normal file
28
packages/meta/src/BigImagePreview/demo/empty.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { Button, ImgViewRef, Space } from '@zhst/meta'
|
||||
import { BigImagePreview } from '@zhst/meta'
|
||||
|
||||
|
||||
const props = {
|
||||
height: '320px',
|
||||
width: '640px',
|
||||
data: {
|
||||
imageKey: '',
|
||||
},
|
||||
}
|
||||
|
||||
// FIXME：需要优化 props
|
||||
export default () => {
|
||||
const imgRef = useRef<ImgViewRef>(null)
|
||||
|
||||
return (
|
||||
<Space size={[8, 16]} direction="vertical" style={{ border: '1px solid #ccc' }}>
|
||||
<BigImagePreview {...props} type="CUSTOM" hideTypeBtns ref={imgRef} />
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => imgRef.current?.setShowCrop(true)}>编辑</Button>
|
||||
<Button onClick={() => imgRef.current?.setShowCrop(false)}>取消</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
@ -2,10 +2,12 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { Button, Space } from '@zhst/meta'
|
||||
import { BigImagePreview } from '@zhst/meta'
|
||||
import type { ImgViewRef } from '@zhst/meta'
|
||||
|
||||
|
||||
const props = {
|
||||
heigth: '500px',
|
||||
height: '320px',
|
||||
width: '640px',
|
||||
data: {
|
||||
imageKey: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
odRect:{
|
||||
@ -14,18 +16,18 @@ const props = {
|
||||
cameraPosition: 'string', // 摄像头位置
|
||||
time: '2022-01-01', // 摄像头拍摄时间
|
||||
},
|
||||
onDraw: data => console.log('data', data)
|
||||
onDraw: (data: any) => console.log('data', data),
|
||||
hideTypeBtns: true,
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const imgRef = useRef(null)
|
||||
const imgRef = useRef<ImgViewRef>(null)
|
||||
|
||||
return (
|
||||
<Space size={[8, 16]} direction="vertical">
|
||||
<BigImagePreview {...props} ref={imgRef} />
|
||||
<BigImagePreview {...props} type="CUSTOM" ref={imgRef} />
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => imgRef.current?.setShowCrop(true)}>编辑</Button>
|
||||
<Button onClick={() => imgRef.current?.handleChangeIndex(1)}>下一张</Button>
|
||||
<Button onClick={() => imgRef.current?.setShowCrop(false)}>取消</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
|
||||
@ -9,15 +9,59 @@ title: BigImagePreview 大图预览组件
|
||||
|
||||
<code src="./demo/base.tsx">基本</code>
|
||||
<code src="./demo/noAttach.tsx">不展示小图</code>
|
||||
<code src="./demo/empty.tsx">空数据</code>
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| data | 当前组件数据对象 | IData（必填） | - | |
|
||||
| imageKey | 当前大图链接 | string（必填） | - | |
|
||||
| odRect | 圈选矩形参数 | { x: number; y: number; w: number; h: number } | - | |
|
||||
| height | 高度 | number（选填） | - | |
|
||||
| width | 宽度 | number（选填） | - | |
|
||||
|
||||
### IData
|
||||
|
||||
可以通过组件的 props 获取ts 定义：
|
||||
|
||||
```js
|
||||
import type { ImgViewProps } from '@zhst/meta'
|
||||
|
||||
const data: ImgViewProps['data'] = {
|
||||
imageKey: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
odRect:{
|
||||
"x":0.553125,"y":0.29722223,"w":0.048958335,"h":0.2462963
|
||||
},
|
||||
attachImg: [
|
||||
{
|
||||
"url": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png","label": "形体"
|
||||
},{
|
||||
"url": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
|
||||
"label": "人脸"
|
||||
}
|
||||
],
|
||||
score: 0.815207, // 人脸质量分
|
||||
showScore: true, // 人脸质量分
|
||||
cameraPosition: 'string', // 摄像头位置
|
||||
time: '2022-01-01', // 摄像头拍摄时间
|
||||
objects: [
|
||||
{
|
||||
"bboxRatio": {
|
||||
"x": 0.5519352,
|
||||
"y": 0.2965385,
|
||||
"w": 0.05185461,
|
||||
"h": 0.24698898
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| imageKey | 当前大图链接 | string | - | |
|
||||
| odRect | 初始化OD | { x: number; y: number; w: number; h: number } | - | |
|
||||
| attachImg | 缩略图对象 | { url: string; label: string; }[]（选填） | - | |
|
||||
| objects | 多OD状态列表 | IOdRectOrigin[]（选填） | - | |
|
||||
| objects | 多OD状态列表 | IOdRectOrigin[]（选填） | - | |
|
||||
| score | 相似度 | number（选填） | - | |
|
||||
| attachImg | 缩略图 | { url: string; label: string; }[]（选填） | - | |
|
||||
| objects | 编辑状态参数 | IOdRectOrigin[]（选填） | - | |
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
try {
|
||||
handler.remove();
|
||||
} catch (error) {
|
||||
warn('CROP:REMOVE_EVENT_FAIL,', error);
|
||||
warn('CROP:REMOVE_EVENT_FAIL: ', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const CROP_TYPE = {
|
||||
CUSTOM: 'CSUTOM',
|
||||
CUSTOM: 'CUSTOM',
|
||||
AUTO: 'AUTO',
|
||||
};
|
||||
|
||||
|
||||
@ -26,9 +26,6 @@ importers:
|
||||
'@umijs/lint':
|
||||
specifier: ^4.0.0
|
||||
version: 4.1.1(eslint@8.56.0)(stylelint@14.16.1)(typescript@5.3.3)
|
||||
babel-plugin-import:
|
||||
specifier: ^1.13.8
|
||||
version: 1.13.8
|
||||
dumi:
|
||||
specifier: ^2.2.13
|
||||
version: 2.2.17(@babel/core@7.23.7)(@types/node@20.5.1)(@types/react@18.2.48)(eslint@8.56.0)(prettier@2.8.8)(react-dom@18.2.0)(react@18.2.0)(stylelint@14.16.1)(typescript@5.3.3)(webpack@5.89.0)
|
||||
@ -89,13 +86,16 @@ importers:
|
||||
classnames:
|
||||
specifier: ^2.5.1
|
||||
version: 2.5.1
|
||||
dayjs:
|
||||
specifier: ^1.11.10
|
||||
version: 1.11.10
|
||||
rc-util:
|
||||
specifier: ^5.38.1
|
||||
version: 5.38.1(react-dom@18.2.0)(react@18.2.0)
|
||||
devDependencies:
|
||||
'@types/zhst':
|
||||
'@zhst/types':
|
||||
specifier: workspace:^
|
||||
version: link:../zhst-types
|
||||
version: link:../types
|
||||
|
||||
packages/constants: {}
|
||||
|
||||
@ -6715,12 +6715,6 @@ packages:
|
||||
object.assign: 4.1.5
|
||||
dev: true
|
||||
|
||||
/babel-plugin-import@1.13.8:
|
||||
resolution: {integrity: sha512-36babpjra5m3gca44V6tSTomeBlPA7cHUynrE2WiQIm3rEGD9xy28MKsx5IdO45EbnpJY7Jrgd00C6Dwt/l/2Q==}
|
||||
dependencies:
|
||||
'@babel/helper-module-imports': 7.22.15
|
||||
dev: true
|
||||
|
||||
/babel-plugin-istanbul@6.1.1:
|
||||
resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user