From 572876c585d071ab0e53c1de9f86f18bf8fee913 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B1=9F=E5=BF=97=E9=9B=84?= Date: Thu, 14 Mar 2024 10:47:05 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9biz=E7=9B=92=E5=AD=90?= =?UTF-8?q?=E6=A0=91=E7=BB=84=E4=BB=B6=E6=A0=A1=E9=AA=8C=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dumirc.ts | 2 - packages/biz/CHANGELOG.md | 14 + packages/biz/es/index.d.ts | 7 +- packages/biz/es/index.js | 5 +- packages/biz/lib/index.d.ts | 7 +- packages/biz/lib/index.js | 15 +- packages/biz/package.json | 2 +- .../components/boxPanel/index.tsx | 6 + .../biz/src/boxSelectTree/demo/extraBtns.tsx | 1 - packages/biz/src/index.tsx | 1 - packages/func/CHANGELOG.md | 7 + packages/func/es/math/index.js | 359 +----------------- packages/func/package.json | 2 +- packages/func/src/math/index.ts | 243 +----------- packages/hooks/CHANGELOG.md | 6 + packages/hooks/package.json | 2 +- packages/meta/CHANGELOG.md | 8 + packages/meta/package.json | 2 +- .../src/BigImagePreview/BigImagePreview.tsx | 34 +- .../BigImagePreview/bigImagePreviewHelper.ts | 244 +++++++++++- .../src/BigImagePreview/demo/noAttach.tsx | 12 +- packages/request/CHANGELOG.md | 6 + packages/request/package.json | 2 +- 23 files changed, 350 insertions(+), 637 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index 36d1e9e..9de9ea5 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,8 +1,6 @@ import { defineConfig } from 'dumi'; import path from 'path'; -console.log(path.join(__dirname, 'packages/hooks/src')); - export default defineConfig({ logo: '/logo.jpg', favicons: ['/logo.jpg'], diff --git a/packages/biz/CHANGELOG.md b/packages/biz/CHANGELOG.md index a5f4767..c999c2d 100644 --- a/packages/biz/CHANGELOG.md +++ b/packages/biz/CHANGELOG.md @@ -1,5 +1,19 @@ # @zhst/biz +## 0.9.8 + +### Patch Changes + +- @zhst/func@0.7.5 +- @zhst/hooks@0.8.4 +- @zhst/meta@0.8.5 + +## 0.9.7 + +### Patch Changes + +- 新增 RealTimeMonitor,VideoPlayerCard,ViewLargerImageModal,WarningRecordCard 组件,优化盒子树创建弹框规则校验 + ## 0.9.6 ### Patch Changes diff --git a/packages/biz/es/index.d.ts b/packages/biz/es/index.d.ts index f170490..743bed4 100644 --- a/packages/biz/es/index.d.ts +++ b/packages/biz/es/index.d.ts @@ -9,4 +9,9 @@ export type { TreeTransferProps } from './treeTransfer'; export { default as TreeTransferModal } from './treeTransferModal'; export type { TreeTransferModalProps } from './treeTransferModal'; export { default as WarningRecordCard } from './WarningRecordCard'; -export type { WarningRecordCardProps, IRecord } from './WarningRecordCard'; +export type { IRecord, WarningRecordCardProps } from './WarningRecordCard'; +export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewLargerImageModal'; +export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'; +export type { VideoPlayerCardProps } from './VideoPlayerCard'; +export { default as VideoPlayerCard } from './VideoPlayerCard'; +export { default as RealTimeMonitor } from './RealTimeMonitor'; diff --git a/packages/biz/es/index.js b/packages/biz/es/index.js index 7e9350e..d340720 100644 --- a/packages/biz/es/index.js +++ b/packages/biz/es/index.js @@ -3,4 +3,7 @@ export { default as BoxSelectTree } from "./boxSelectTree"; export { default as Tree } from "./tree"; export { default as TreeTransfer } from "./treeTransfer"; export { default as TreeTransferModal } from "./treeTransferModal"; -export { default as WarningRecordCard } from "./WarningRecordCard"; \ No newline at end of file +export { default as WarningRecordCard } from "./WarningRecordCard"; +export { default as ViewLargerImageModal, useViewLargerImageModal } from "./ViewLargerImageModal"; +export { default as VideoPlayerCard } from "./VideoPlayerCard"; +export { default as RealTimeMonitor } from "./RealTimeMonitor"; \ No newline at end of file diff --git a/packages/biz/lib/index.d.ts b/packages/biz/lib/index.d.ts index f170490..743bed4 100644 --- a/packages/biz/lib/index.d.ts +++ b/packages/biz/lib/index.d.ts @@ -9,4 +9,9 @@ export type { TreeTransferProps } from './treeTransfer'; export { default as TreeTransferModal } from './treeTransferModal'; export type { TreeTransferModalProps } from './treeTransferModal'; export { default as WarningRecordCard } from './WarningRecordCard'; -export type { WarningRecordCardProps, IRecord } from './WarningRecordCard'; +export type { IRecord, WarningRecordCardProps } from './WarningRecordCard'; +export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewLargerImageModal'; +export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'; +export type { VideoPlayerCardProps } from './VideoPlayerCard'; +export { default as VideoPlayerCard } from './VideoPlayerCard'; +export { default as RealTimeMonitor } from './RealTimeMonitor'; diff --git a/packages/biz/lib/index.js b/packages/biz/lib/index.js index 82e9b73..435cd59 100644 --- a/packages/biz/lib/index.js +++ b/packages/biz/lib/index.js @@ -31,10 +31,14 @@ var src_exports = {}; __export(src_exports, { BigImageModal: () => import_BigImageModal.default, BoxSelectTree: () => import_boxSelectTree.default, + RealTimeMonitor: () => import_RealTimeMonitor.default, Tree: () => import_tree.default, TreeTransfer: () => import_treeTransfer.default, TreeTransferModal: () => import_treeTransferModal.default, - WarningRecordCard: () => import_WarningRecordCard.default + VideoPlayerCard: () => import_VideoPlayerCard.default, + ViewLargerImageModal: () => import_ViewLargerImageModal.default, + WarningRecordCard: () => import_WarningRecordCard.default, + useViewLargerImageModal: () => import_ViewLargerImageModal.useViewLargerImageModal }); module.exports = __toCommonJS(src_exports); var import_BigImageModal = __toESM(require("./BigImageModal")); @@ -43,12 +47,19 @@ var import_tree = __toESM(require("./tree")); var import_treeTransfer = __toESM(require("./treeTransfer")); var import_treeTransferModal = __toESM(require("./treeTransferModal")); var import_WarningRecordCard = __toESM(require("./WarningRecordCard")); +var import_ViewLargerImageModal = __toESM(require("./ViewLargerImageModal")); +var import_VideoPlayerCard = __toESM(require("./VideoPlayerCard")); +var import_RealTimeMonitor = __toESM(require("./RealTimeMonitor")); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { BigImageModal, BoxSelectTree, + RealTimeMonitor, Tree, TreeTransfer, TreeTransferModal, - WarningRecordCard + VideoPlayerCard, + ViewLargerImageModal, + WarningRecordCard, + useViewLargerImageModal }); diff --git a/packages/biz/package.json b/packages/biz/package.json index a4e27f2..d78ea3e 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/biz", - "version": "0.9.6", + "version": "0.9.8", "description": "业务库", "keywords": [ "business", diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx index bf62d74..2699227 100644 --- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx +++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx @@ -164,8 +164,14 @@ const BoxPanel: FC = (props) => { rules={[ { required: true, + max: 20, }, + { + pattern: /^[^\s]*$/g, + message: '禁止输入空格' + } ]} + fieldProps={{ showCount: true }} width="md" name="name" label="盒子组名称" diff --git a/packages/biz/src/boxSelectTree/demo/extraBtns.tsx b/packages/biz/src/boxSelectTree/demo/extraBtns.tsx index e398407..d889b8b 100644 --- a/packages/biz/src/boxSelectTree/demo/extraBtns.tsx +++ b/packages/biz/src/boxSelectTree/demo/extraBtns.tsx @@ -7,7 +7,6 @@ const demo = () => { const [activeKey, setActiveKey] = useState('1') const [checkedKeys, setCheckedKeys] = useState([]); - return (
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(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); } -import { cloneDeep, get, isNull } from 'lodash-es'; -import { dataURLToBlob } from "../file"; -var proto = { - Common: { - AlgorithmVersion: { - VERSION_REID_HEAD_ATTR: '形体', - VERSION_FACE: '人脸', - VERSION_NON_MOTOR_VEHICLE: '非机动车' - } - } -}; -export var ALGORITHM_VERSION = (_ALGORITHM_VERSION = {}, _defineProperty(_ALGORITHM_VERSION, '7', '形体'), _defineProperty(_ALGORITHM_VERSION, '4', '人脸'), _defineProperty(_ALGORITHM_VERSION, '6', '非机动车'), _ALGORITHM_VERSION); -export var algorithmVersions = _toConsumableArray(Object.keys(ALGORITHM_VERSION)); -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 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 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; -}; - -/** - * 格式化工具 - * @param originData - * @returns - */ -export var getOdRect = function getOdRect(originData) { - var data = get(originData, 'objects', []).filter(function (v) { - return !isNull(get(v, 'infoOnSource.bboxInFrame.bboxRatio')); - }).map(function (v, index) { - // objectId==0 特征没有提取到过滤1掉 - var rect = get(v, 'infoOnSource.bboxInFrame.bboxRatio'); - var extendBox = get(v, 'infoOnSource.bboxInFrame.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 featureData = get(v, 'feature', []).filter(function (v) { - return v.type === 'FEATURE_TYPE_BYTE'; - }); - 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, - // faceCorrectImage: faceCorrectImage, - id: index, - qualityScore: qualityScore, - algorithmVersion: algorithmVersion, - featureData: get(featureData, '0.featureByte'), - objectRectIndex: objectRectIndex, - objectType: objectType, - objectId: objectId, - frameTimestamp: frameTimestamp, - sourceObjectId: sourceObjectId, - extendBox: extendBox - }; - }); - if (data.length > 0) { - data = data.filter(function (v) { - return v.objectId !== '0'; - }); - } else { - throw new Error('empty'); - } - return data; -}; - -//档案库od -export var getOdRectV2 = function getOdRectV2(originData) { - var resp = originData.odv2Result[0]; - var subObjects = []; //形体 - var data = get(resp, 'objects', []).filter(function (v) { - return !isNull(get(v, 'subObjects[0].infoOnSource.bboxInFrame.bboxRatio')); - }).map(function (v, index) { - var rect = get(v, 'infoOnSource.bboxInFrame.bboxRatio'); - var qualityScore = get(v, 'qualityScore'); - var algorithmVersion = get(v, 'objectType'); - var featrueData = get(v, 'feature', []).filter(function (v) { - return v.name === 'feature-body' || v.name === 'feature-face'; - }); - var objectRectIndex = algorithmVersion === 'OBJECT_TYPE_FACE' ? 0 : 1; - var objectType = get(v, 'objectType'); - var objectId = get(v, 'objectIndex.objectId'); - //如果存在subObjects的数组不为null表示形体里面带人脸，人脸的od框也要显示出来 - if (get(v, 'subObjects', []).length) { - get(v, 'subObjects', []).forEach(function (e) { - var rect = get(e, 'infoOnSource.bboxInFrame.bboxRatio'); - var qualityScore = get(e, 'qualityScore'); - var algorithmVersion = get(e, 'objectType'); - var featrueData = get(e, 'feature', []).filter(function (v) { - return v.name === 'feature-body' || v.name === 'feature-face'; - }); - var objectRectIndex = algorithmVersion === 'OBJECT_TYPE_FACE' ? 0 : 1; - var objectType = get(e, 'objectType'); - var objectId = get(e, 'objectIndex.objectId'); - subObjects.push({ - x: rect.x, - y: rect.y, - w: rect.w, - h: rect.h, - id: index, - qualityScore: qualityScore, - algorithmVersion: algorithmVersion, - featrueData: featrueData.length ? featrueData[0].featureByte : '', - objectRectIndex: objectRectIndex, - objectType: objectType, - objectId: objectId - }); - }); - } - return { - x: rect.x, - y: rect.y, - w: rect.w, - h: rect.h, - id: index, - qualityScore: qualityScore, - algorithmVersion: algorithmVersion, - featrueData: featrueData[0].featureByte, - objectRectIndex: objectRectIndex, - objectType: objectType, - objectId: objectId - }; - }); - var brr = data.concat(subObjects).map(function (v, vs) { - if (String(v.id)) { - v.id = vs; - } - return v; - }); - if (brr.length > 0) { - console.log(brr, 'data111'); - } else { - throw new Error('empty'); - } - console.log(brr); - return brr; -}; \ No newline at end of file +export default {}; \ No newline at end of file diff --git a/packages/func/package.json b/packages/func/package.json index a6a8980..d2ff344 100644 --- a/packages/func/package.json +++ b/packages/func/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/func", - "version": "0.7.4", + "version": "0.7.5", "description": "函数合集", "keywords": [ "hooks" diff --git a/packages/func/src/math/index.ts b/packages/func/src/math/index.ts index 398ecf2..b1c6ea4 100644 --- a/packages/func/src/math/index.ts +++ b/packages/func/src/math/index.ts @@ -1,242 +1 @@ -import { cloneDeep, get, isNull } from 'lodash-es'; -import { dataURLToBlob } from '../file'; -import { IOdRectOrigin, Rect } from '@zhst/types'; - -const proto = { - Common: { - AlgorithmVersion: { - VERSION_REID_HEAD_ATTR: '形体', - VERSION_FACE: '人脸', - VERSION_NON_MOTOR_VEHICLE: '非机动车', - }, - }, -}; -export const ALGORITHM_VERSION = { - ['7']: '形体', - ['4']: '人脸', - ['6']: '非机动车', -}; - -export const algorithmVersions = [...Object.keys(ALGORITHM_VERSION)] - -export const getBikeExtendRect = (rect: Rect, maxW: number) => { - const newRect = { ...rect }; - //向上扩大一倍 - const oldY = cloneDeep(rect.y); - newRect.y = newRect.y - newRect.h < 0 ? 0 : newRect.y - newRect.h; - newRect.h += oldY - newRect.y; - - let newX = Math.round(newRect.x - newRect.w * 0.15); - if (newX < 0) { - newX = 0; - } - let 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 const getOtherExtendRect = (srcRect: Rect, maxW: number, maxH: number, type: string) => { - const wExtendRadio = 0.25; - const upExtendRadio = 0.25; - const downExtendRadio = 0.25; - const fixPersonExtend = true; - - let nx = 0; - let 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; - } - - let ny = 0; - let 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; - } - - let 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 - ) { - const fixW = Math.round(nh * 0.75); - if (nw < fixW) { - // 应该扩展宽度 - let newX = nx + Math.round(nw / 2.0 - 0.5 * fixW); - if (newX < 0) { - newX = 0; - } - let newW = fixW; - if (newW + newX > maxW) { - newW = maxW - newX; - } - - newRect = { - x: newX, - y: ny, - w: newW, - h: nh, - }; - } else if (nw > fixW) { - // 应该扩展高度 - const fixH = Math.round(nw * 1.333); - let newY = ny + Math.round(nh / 2.0 - 0.5 * fixH); - if (newY < 0) { - newY = 0; - } - let newH = fixH; - if (newY + newH > maxH) { - newH = maxH - newY; - } - newRect = { - x: nx, - y: newY, - w: nw, - h: newH, - }; - } - } - return newRect; -}; - -export const getNormalization = (srcRect: Rect, maxW: number, maxH: number) => { - const newRect = { - ...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 const getExtendRect = (normalizationRect: Rect, imgW: number, imgH: number, type: string) => { - const rect = { - x: normalizationRect.x * imgW, - y: normalizationRect.y * imgH, - w: normalizationRect.w * imgW, - h: normalizationRect.h * imgH, - }; - - let 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 const getTransformRect = (image: { height: number; width: number; }, transform: { translateX: any; translateY: any; scale: any; rotate: any; }, rect: Rect) => { - const canvasRect = { - x: rect.x, - y: rect.y, - x2: rect.x + rect.w, - y2: rect.h + rect.y, - }; - //1.转成缩放前的坐标 - const { translateX, translateY, scale, rotate } = transform; - const originAxisRect = { - x: (canvasRect.x - translateX) / scale, - y: (canvasRect.y - translateY) / scale, - x2: (canvasRect.x2 - translateX) / scale, - y2: (canvasRect.y2 - translateY) / scale, - }; - //2.转成图片坐标 - //不考虑旋转 图片原点就是坐标原点 - let imgAxisRect = originAxisRect; - //但是旋转90度后图片不在坐标原点 加上这部分diff - if (rotate % 180 !== 0) { - //90度调整偏移量 - const offsetX = -(image.height - image.width) / 2; - const offsetY = -(image.width - image.height) / 2; - imgAxisRect = { - x: originAxisRect.x - offsetX, - y: originAxisRect.y - offsetY, - x2: originAxisRect.x2 - offsetX, - y2: originAxisRect.y2 - offsetY, - }; - } - //3.限制框不要超出图片 - let imgW = image.width; - let imgH = image.height; - if (rotate % 180 !== 0) { - [imgW, imgH] = [imgH, imgW]; - } - 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)); - //获取归一化坐标 - const 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 const getRotateImg = (image: HTMLImageElement, rotate: number) => { - let imgW = image.width; - let imgH = image.height; - if (rotate % 180 !== 0) { - [imgW, imgH] = [imgH, imgW]; - } - const commonCanvas = document.createElement('canvas'); - commonCanvas.width = imgW; - commonCanvas.height = imgH; - commonCanvas.style.display = 'none'; - document.body.appendChild(commonCanvas); - const commonCtx = commonCanvas.getContext('2d'); - //移动到图片中心 旋转 - - commonCtx?.save(); - if (rotate % 180 !== 0) { - //90度调整偏移量 - commonCtx?.translate((image.height - image.width) / 2, (image.width - image.height) / 2); - } - commonCtx?.translate(image.width / 2, image.height / 2); - commonCtx?.rotate((rotate / 180) * Math.PI); - commonCtx?.translate(-image.width / 2, -image.height / 2); - commonCtx?.drawImage(image, 0, 0); - commonCtx?.restore(); - - const dataUrl = commonCanvas.toDataURL('image/jpeg'); - const blobData = dataURLToBlob(dataUrl); - const file = new window.File([blobData], `${new Date().getTime()}`, { - type: 'image/jpeg', - }); - commonCanvas.parentNode?.removeChild(commonCanvas); - return file; -}; +export default {} diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md index 8ef5dbb..88e0890 100644 --- a/packages/hooks/CHANGELOG.md +++ b/packages/hooks/CHANGELOG.md @@ -1,5 +1,11 @@ # @zhst/hooks +## 0.8.4 + +### Patch Changes + +- @zhst/func@0.7.5 + ## 0.8.3 ### Patch Changes diff --git a/packages/hooks/package.json b/packages/hooks/package.json index e66f7c4..768c890 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/hooks", - "version": "0.8.3", + "version": "0.8.4", "description": "hooks合集", "keywords": [ "hooks" diff --git a/packages/meta/CHANGELOG.md b/packages/meta/CHANGELOG.md index 4ff7367..6c2e5c8 100644 --- a/packages/meta/CHANGELOG.md +++ b/packages/meta/CHANGELOG.md @@ -1,5 +1,13 @@ # @zhst/utils +## 0.8.5 + +### Patch Changes + +- @zhst/func@0.7.5 +- @zhst/hooks@0.8.4 +- @zhst/meta@0.8.5 + ## 0.8.4 ### Patch Changes diff --git a/packages/meta/package.json b/packages/meta/package.json index 39b65d7..b495f36 100644 --- a/packages/meta/package.json +++ b/packages/meta/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/meta", - "version": "0.8.4", + "version": "0.8.5", "description": "原子组件", "keywords": [ "meta", diff --git a/packages/meta/src/BigImagePreview/BigImagePreview.tsx b/packages/meta/src/BigImagePreview/BigImagePreview.tsx index 30cefc8..c04928f 100644 --- a/packages/meta/src/BigImagePreview/BigImagePreview.tsx +++ b/packages/meta/src/BigImagePreview/BigImagePreview.tsx @@ -1,15 +1,11 @@ -import React, { useEffect, ReactElement, useState, useCallback, useRef, useImperativeHandle } from 'react'; +import React, { useEffect, ReactElement, useState, useRef, useImperativeHandle } from 'react'; import classNames from 'classnames'; -import { useLatest } from '@zhst/hooks'; import { get, pick, isNull, generateImg, dataURLToBlob, - getExtendRect, - getTransformRect, - getRotateImg, getTransforms, addEventListenerWrapper, getFileByRect @@ -29,7 +25,12 @@ import { import BtnGroup from './components/BtnGroup'; import './index.less' import { defaultAlignOption, CROP_TYPE } from '../utils/constants' -import { getOdRect, IOdObject } from './bigImagePreviewHelper' +import { + getOdRect, + IOdObject, + getExtendRect, + getTransformRect, + getRotateImg, } from './bigImagePreviewHelper' const componentName = `zhst-image__img-view`; @@ -76,7 +77,17 @@ export interface ImgViewProps extends React.HTMLAttributes { screenshotButtonAlign?: AlignType; screenshotButtonRender?: (screenshotButtonProp: IScreenshotButtonProp) => ReactElement; hideLeftTopBtn?: boolean; - onRectSelect?: (obj: IOdObject) => void + onDraw?: (obj: { + rectList: any; + extendRectList: { + x: number; + y: number; + w: number; + h: number; + }[]; + selectIndex: number; + imgKey: string; + }) => void showScore?: boolean // 是否显示相似度 viewOption?: ViewOption; } @@ -132,8 +143,9 @@ export const BigImagePreview = React.forwardRef((props showOpt = false, showAttachImgLabel = true, screenshotButtonAlign = defaultAlignOption, - screenshotButtonRender = () =>
回调DOM
, + screenshotButtonRender = () =>
回调DOM
, hideLeftTopBtn = true, + onDraw, viewOption = {} } = props; const { @@ -294,7 +306,7 @@ export const BigImagePreview = React.forwardRef((props setSelectAlgorithmVersion(null); setCropRect(null); }); - handlerCropEndRef.current = addEventListenerWrapper(imgContainerRef.current, EVENT_CROP_END, (event: { detail: any; }) => { + handlerCropEndRef.current = addEventListenerWrapper(imgContainerRef.current, EVENT_CROP_END, async (event: { detail: any; }) => { const data = event.detail; setSelectAlgorithmVersion(null); const _rect = { @@ -304,8 +316,8 @@ export const BigImagePreview = React.forwardRef((props h: data.height, } setCropRect(_rect); - const p = getCropInfo({ type: cropType, rect: _rect }) - console.log('p', p) + const _cropData = await getCropInfo({ type: cropType, rect: _rect }) + onDraw?.(_cropData) alignRef?.current?.forceAlign?.(); }); cropInsRef.current = new Cropper(imgContainerRef.current, { diff --git a/packages/meta/src/BigImagePreview/bigImagePreviewHelper.ts b/packages/meta/src/BigImagePreview/bigImagePreviewHelper.ts index bdc6992..653dec6 100644 --- a/packages/meta/src/BigImagePreview/bigImagePreviewHelper.ts +++ b/packages/meta/src/BigImagePreview/bigImagePreviewHelper.ts @@ -1,6 +1,24 @@ -import { get, isNull } from "@zhst/func"; +import { cloneDeep, dataURLToBlob, get, isNull } from "@zhst/func"; import { ObjectType, Rect } from "@zhst/types"; +const proto = { + Common: { + AlgorithmVersion: { + VERSION_REID_HEAD_ATTR: '形体', + VERSION_FACE: '人脸', + VERSION_NON_MOTOR_VEHICLE: '非机动车', + }, + }, +}; +export const ALGORITHM_VERSION = { + ['7']: '形体', + ['4']: '人脸', + ['6']: '非机动车', +}; + +export const algorithmVersions = [...Object.keys(ALGORITHM_VERSION)] + + export interface IOdObject { objects: { bboxRatio: Rect @@ -56,3 +74,227 @@ export const getOdRect = (originData: IOdObject) => { }); return data; }; + +export const getNormalization = (srcRect: Rect, maxW: number, maxH: number) => { + const newRect = { + ...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 const getExtendRect = (normalizationRect: Rect, imgW: number, imgH: number, type: string) => { + const rect = { + x: normalizationRect.x * imgW, + y: normalizationRect.y * imgH, + w: normalizationRect.w * imgW, + h: normalizationRect.h * imgH, + }; + + let 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 const getBikeExtendRect = (rect: Rect, maxW: number) => { + const newRect = { ...rect }; + //向上扩大一倍 + const oldY = cloneDeep(rect.y); + newRect.y = newRect.y - newRect.h < 0 ? 0 : newRect.y - newRect.h; + newRect.h += oldY - newRect.y; + + let newX = Math.round(newRect.x - newRect.w * 0.15); + if (newX < 0) { + newX = 0; + } + let 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 const getOtherExtendRect = (srcRect: Rect, maxW: number, maxH: number, type: string) => { + const wExtendRadio = 0.25; + const upExtendRadio = 0.25; + const downExtendRadio = 0.25; + const fixPersonExtend = true; + + let nx = 0; + let 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; + } + + let ny = 0; + let 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; + } + + let 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 + ) { + const fixW = Math.round(nh * 0.75); + if (nw < fixW) { + // 应该扩展宽度 + let newX = nx + Math.round(nw / 2.0 - 0.5 * fixW); + if (newX < 0) { + newX = 0; + } + let newW = fixW; + if (newW + newX > maxW) { + newW = maxW - newX; + } + + newRect = { + x: newX, + y: ny, + w: newW, + h: nh, + }; + } else if (nw > fixW) { + // 应该扩展高度 + const fixH = Math.round(nw * 1.333); + let newY = ny + Math.round(nh / 2.0 - 0.5 * fixH); + if (newY < 0) { + newY = 0; + } + let newH = fixH; + if (newY + newH > maxH) { + newH = maxH - newY; + } + newRect = { + x: nx, + y: newY, + w: nw, + h: newH, + }; + } + } + return newRect; +}; + + +export const getTransformRect = (image: { height: number; width: number; }, transform: { translateX: any; translateY: any; scale: any; rotate: any; }, rect: Rect) => { + const canvasRect = { + x: rect.x, + y: rect.y, + x2: rect.x + rect.w, + y2: rect.h + rect.y, + }; + //1.转成缩放前的坐标 + const { translateX, translateY, scale, rotate } = transform; + const originAxisRect = { + x: (canvasRect.x - translateX) / scale, + y: (canvasRect.y - translateY) / scale, + x2: (canvasRect.x2 - translateX) / scale, + y2: (canvasRect.y2 - translateY) / scale, + }; + //2.转成图片坐标 + //不考虑旋转 图片原点就是坐标原点 + let imgAxisRect = originAxisRect; + //但是旋转90度后图片不在坐标原点 加上这部分diff + if (rotate % 180 !== 0) { + //90度调整偏移量 + const offsetX = -(image.height - image.width) / 2; + const offsetY = -(image.width - image.height) / 2; + imgAxisRect = { + x: originAxisRect.x - offsetX, + y: originAxisRect.y - offsetY, + x2: originAxisRect.x2 - offsetX, + y2: originAxisRect.y2 - offsetY, + }; + } + //3.限制框不要超出图片 + let imgW = image.width; + let imgH = image.height; + if (rotate % 180 !== 0) { + [imgW, imgH] = [imgH, imgW]; + } + 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)); + //获取归一化坐标 + const 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 const getRotateImg = (image: HTMLImageElement, rotate: number) => { + let imgW = image.width; + let imgH = image.height; + if (rotate % 180 !== 0) { + [imgW, imgH] = [imgH, imgW]; + } + const commonCanvas = document.createElement('canvas'); + commonCanvas.width = imgW; + commonCanvas.height = imgH; + commonCanvas.style.display = 'none'; + document.body.appendChild(commonCanvas); + const commonCtx = commonCanvas.getContext('2d'); + //移动到图片中心 旋转 + + commonCtx?.save(); + if (rotate % 180 !== 0) { + //90度调整偏移量 + commonCtx?.translate((image.height - image.width) / 2, (image.width - image.height) / 2); + } + commonCtx?.translate(image.width / 2, image.height / 2); + commonCtx?.rotate((rotate / 180) * Math.PI); + commonCtx?.translate(-image.width / 2, -image.height / 2); + commonCtx?.drawImage(image, 0, 0); + commonCtx?.restore(); + + const dataUrl = commonCanvas.toDataURL('image/jpeg'); + const blobData = dataURLToBlob(dataUrl); + const file = new window.File([blobData], `${new Date().getTime()}`, { + type: 'image/jpeg', + }); + commonCanvas.parentNode?.removeChild(commonCanvas); + return file; +}; diff --git a/packages/meta/src/BigImagePreview/demo/noAttach.tsx b/packages/meta/src/BigImagePreview/demo/noAttach.tsx index b75fb7b..d89a855 100644 --- a/packages/meta/src/BigImagePreview/demo/noAttach.tsx +++ b/packages/meta/src/BigImagePreview/demo/noAttach.tsx @@ -13,18 +13,8 @@ const props = { }, cameraPosition: 'string', // 摄像头位置 time: '2022-01-01', // 摄像头拍摄时间 - objects: [ - { - "bboxRatio": { - "x": 0.5519352, - "y": 0.2965385, - "w": 0.05185461, - "h": 0.24698898 - }, - }, - ] }, - onRectSelect: data => console.log('data', data) + onDraw: data => console.log('data', data) } export default () => { diff --git a/packages/request/CHANGELOG.md b/packages/request/CHANGELOG.md index 0cf2e9f..cf1e6f1 100644 --- a/packages/request/CHANGELOG.md +++ b/packages/request/CHANGELOG.md @@ -1,5 +1,11 @@ # @zhst/request +## 0.8.4 + +### Patch Changes + +- test + ## 0.8.3 ### Patch Changes diff --git a/packages/request/package.json b/packages/request/package.json index 009afad..0c22940 100644 --- a/packages/request/package.json +++ b/packages/request/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/request", - "version": "0.8.3", + "version": "0.8.4", "description": "请求库", "keywords": [ "request",