From 57f54b7164a4012d3b93731051eabe7e761d3f4d Mon Sep 17 00:00:00 2001 From: jiangzhixiong <710328466@qq.com> Date: Fri, 15 Mar 2024 17:27:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E4=B8=BA=E7=A9=BA=E6=97=B6=E8=87=AA=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dumirc.ts | 19 +- .fatherrc.ts | 10 - package.json | 1 - packages/biz/CHANGELOG.md | 20 + packages/biz/package.json | 4 +- packages/func/es/time/index.js | 3 - packages/hooks/es/useJump/index.js | 4 +- packages/meta/CHANGELOG.md | 22 ++ .../es/BigImagePreview/BigImagePreview.js | 345 ++++++++++-------- .../BigImagePreview/bigImagePreviewHelper.js | 270 ++++++++++++++ packages/meta/es/BigImagePreview/index.less | 6 +- packages/meta/es/ImageEditor/cropper/event.js | 2 +- packages/meta/es/VideoPlayer/VideoPlayer.js | 4 +- packages/meta/es/utils/constants.js | 2 +- packages/meta/package.json | 2 +- .../src/BigImagePreview/BigImagePreview.tsx | 30 +- .../meta/src/BigImagePreview/demo/base.tsx | 7 +- .../meta/src/BigImagePreview/demo/empty.tsx | 28 ++ .../src/BigImagePreview/demo/noAttach.tsx | 12 +- packages/meta/src/BigImagePreview/index.md | 50 ++- .../meta/src/ImageEditor/cropper/event.ts | 2 +- packages/meta/src/utils/constants.ts | 2 +- pnpm-lock.yaml | 16 +- 23 files changed, 641 insertions(+), 220 deletions(-) create mode 100644 packages/meta/src/BigImagePreview/demo/empty.tsx diff --git a/.dumirc.ts b/.dumirc.ts index 9de9ea5..445c479 100644 --- a/.dumirc.ts +++ b/.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, - }, - ], - ], }); diff --git a/.fatherrc.ts b/.fatherrc.ts index 0e503e9..db700bd 100644 --- a/.fatherrc.ts +++ b/.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, - }, - ], - ], }); diff --git a/package.json b/package.json index 738ca88..a5e95c5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/biz/CHANGELOG.md b/packages/biz/CHANGELOG.md index c999c2d..b14b8d6 100644 --- a/packages/biz/CHANGELOG.md +++ b/packages/biz/CHANGELOG.md @@ -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 diff --git a/packages/biz/package.json b/packages/biz/package.json index d78ea3e..87a6497 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -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", diff --git a/packages/func/es/time/index.js b/packages/func/es/time/index.js index b60c8aa..2ea21b7 100644 --- a/packages/func/es/time/index.js +++ b/packages/func/es/time/index.js @@ -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; }; diff --git a/packages/hooks/es/useJump/index.js b/packages/hooks/es/useJump/index.js index 251687b..086b027 100644 --- a/packages/hooks/es/useJump/index.js +++ b/packages/hooks/es/useJump/index.js @@ -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'; diff --git a/packages/meta/CHANGELOG.md b/packages/meta/CHANGELOG.md index 6c2e5c8..e471c8a 100644 --- a/packages/meta/CHANGELOG.md +++ b/packages/meta/CHANGELOG.md @@ -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 diff --git a/packages/meta/es/BigImagePreview/BigImagePreview.js b/packages/meta/es/BigImagePreview/BigImagePreview.js index 6aad87f..a7b5d37 100644 --- a/packages/meta/es/BigImagePreview/BigImagePreview.js +++ b/packages/meta/es/BigImagePreview/BigImagePreview.js @@ -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; - setSelectRectId(id); - var selectShape = shapeList.find(function (v) { - return v['id'] === id; - }); - if (selectShape) { - setSelectAlgorithmVersion(selectShape['algorithmVersion']); - //换算成屏幕坐标 - var axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape); - var _rect = { - 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); - } else { - // @ts-ignore - setCropRect(null); - } - }); + // 框选监听事件 + 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); + selectShape = shapeList.find(function (v) { + return v['id'] === id; + }); + if (selectShape) { + setSelectAlgorithmVersion(selectShape['algorithmVersion']); + //换算成屏幕坐标 + 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(_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) { - var _alignRef$current, _alignRef$current$for; - var data = event.detail; - setSelectAlgorithmVersion(null); - setCropRect({ - x: data.left, - y: data.top, - w: data.width, - h: data.height - }); - 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); - }); + 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, _rect, _cropData; + return _regeneratorRuntime().wrap(function _callee2$(_context2) { + while (1) switch (_context2.prev = _context2.next) { + case 0: + data = event.detail; + setSelectAlgorithmVersion(null); + _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; \ No newline at end of file diff --git a/packages/meta/es/BigImagePreview/bigImagePreviewHelper.js b/packages/meta/es/BigImagePreview/bigImagePreviewHelper.js index e69de29..05600e3 100644 --- a/packages/meta/es/BigImagePreview/bigImagePreviewHelper.js +++ b/packages/meta/es/BigImagePreview/bigImagePreviewHelper.js @@ -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; +}; \ No newline at end of file diff --git a/packages/meta/es/BigImagePreview/index.less b/packages/meta/es/BigImagePreview/index.less index 829ebe1..7c8f030 100644 --- a/packages/meta/es/BigImagePreview/index.less +++ b/packages/meta/es/BigImagePreview/index.less @@ -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 { diff --git a/packages/meta/es/ImageEditor/cropper/event.js b/packages/meta/es/ImageEditor/cropper/event.js index bd8219c..3d3893a 100644 --- a/packages/meta/es/ImageEditor/cropper/event.js +++ b/packages/meta/es/ImageEditor/cropper/event.js @@ -34,7 +34,7 @@ export default { try { handler.remove(); } catch (error) { - warn('CROP:REMOVE_EVENT_FAIL,', error); + warn('CROP:REMOVE_EVENT_FAIL: ', error); } } }, diff --git a/packages/meta/es/VideoPlayer/VideoPlayer.js b/packages/meta/es/VideoPlayer/VideoPlayer.js index cc67c55..efae045 100644 --- a/packages/meta/es/VideoPlayer/VideoPlayer.js +++ b/packages/meta/es/VideoPlayer/VideoPlayer.js @@ -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, diff --git a/packages/meta/es/utils/constants.js b/packages/meta/es/utils/constants.js index e2357aa..af17f9b 100644 --- a/packages/meta/es/utils/constants.js +++ b/packages/meta/es/utils/constants.js @@ -1,5 +1,5 @@ export var CROP_TYPE = { - CUSTOM: 'CSUTOM', + CUSTOM: 'CUSTOM', AUTO: 'AUTO' }; export var defaultAlignOption = { diff --git a/packages/meta/package.json b/packages/meta/package.json index b495f36..7d9cae3 100644 --- a/packages/meta/package.json +++ b/packages/meta/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/meta", - "version": "0.8.5", + "version": "0.9.1", "description": "原子组件", "keywords": [ "meta", diff --git a/packages/meta/src/BigImagePreview/BigImagePreview.tsx b/packages/meta/src/BigImagePreview/BigImagePreview.tsx index c04928f..b531541 100644 --- a/packages/meta/src/BigImagePreview/BigImagePreview.tsx +++ b/packages/meta/src/BigImagePreview/BigImagePreview.tsx @@ -90,6 +90,15 @@ export interface ImgViewProps extends React.HTMLAttributes { }) => 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((props screenshotButtonRender = () =>
回调DOM
, hideLeftTopBtn = true, onDraw, - viewOption = {} + viewOption = {}, + type, + hideTypeBtns, + customEmpty, } = props; const { imageKey, @@ -204,7 +216,7 @@ export const BigImagePreview = React.forwardRef((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([]); @@ -259,7 +271,8 @@ export const BigImagePreview = React.forwardRef((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((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((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((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((props placement="left" /> )} - {showCrop && ( + {!hideTypeBtns && showCrop && ( ((props } : - +
+ {customEmpty || } +
} ); diff --git a/packages/meta/src/BigImagePreview/demo/base.tsx b/packages/meta/src/BigImagePreview/demo/base.tsx index 2b1181b..75197ad 100644 --- a/packages/meta/src/BigImagePreview/demo/base.tsx +++ b/packages/meta/src/BigImagePreview/demo/base.tsx @@ -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(null) return ( - diff --git a/packages/meta/src/BigImagePreview/demo/empty.tsx b/packages/meta/src/BigImagePreview/demo/empty.tsx new file mode 100644 index 0000000..3f83414 --- /dev/null +++ b/packages/meta/src/BigImagePreview/demo/empty.tsx @@ -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(null) + + return ( + + + + + + + + ) +} diff --git a/packages/meta/src/BigImagePreview/demo/noAttach.tsx b/packages/meta/src/BigImagePreview/demo/noAttach.tsx index d89a855..f5f6244 100644 --- a/packages/meta/src/BigImagePreview/demo/noAttach.tsx +++ b/packages/meta/src/BigImagePreview/demo/noAttach.tsx @@ -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(null) return ( - + - diff --git a/packages/meta/src/BigImagePreview/index.md b/packages/meta/src/BigImagePreview/index.md index 8e07732..9667973 100644 --- a/packages/meta/src/BigImagePreview/index.md +++ b/packages/meta/src/BigImagePreview/index.md @@ -9,15 +9,59 @@ title: BigImagePreview 大图预览组件 基本 不展示小图 +空数据 ## 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[]（选填） | - | | diff --git a/packages/meta/src/ImageEditor/cropper/event.ts b/packages/meta/src/ImageEditor/cropper/event.ts index 09b4cd6..0d75383 100644 --- a/packages/meta/src/ImageEditor/cropper/event.ts +++ b/packages/meta/src/ImageEditor/cropper/event.ts @@ -66,7 +66,7 @@ export default { try { handler.remove(); } catch (error) { - warn('CROP:REMOVE_EVENT_FAIL,', error); + warn('CROP:REMOVE_EVENT_FAIL: ', error); } } }, diff --git a/packages/meta/src/utils/constants.ts b/packages/meta/src/utils/constants.ts index 3e90a79..a10b628 100644 --- a/packages/meta/src/utils/constants.ts +++ b/packages/meta/src/utils/constants.ts @@ -1,5 +1,5 @@ export const CROP_TYPE = { - CUSTOM: 'CSUTOM', + CUSTOM: 'CUSTOM', AUTO: 'AUTO', }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aaba8b1..19154b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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'}