@cloud-app-dev/vidc 3.2.35 → 3.2.37

package/es/DomMove/index.js

@@ -149,8 +149,8 @@ function DomMove(_ref) {
 DomMove.defaultProps = {
   className: '',
   size: {
-    width: 'max-content',
-    height: 'max-content'
+    width: '100%',
+    height: '100%'
   }
 };
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {

package/es/Picture/demo.js

@@ -17,19 +17,21 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React from 'react';
 import Picture from '.';
-import { useSimpleState } from '..';
+import { Modal, useSimpleState } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function App() {
   var _useSimpleState = useSimpleState({
-    open: false
+    open: false,
+    open2: false
   }),
       _useSimpleState2 = _slicedToArray(_useSimpleState, 2),
       state = _useSimpleState2[0],
       updateState = _useSimpleState2[1];
 
-  return /*#__PURE__*/_jsx(_ConfigProvider, {
+  return /*#__PURE__*/_jsxs(_ConfigProvider, {
     prefixCls: "cloudapp",
-    children: /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       style: {
         width: 800,
         height: 600,
@@ -43,23 +45,23 @@ export default function App() {
           pathname: '/',
           icon: ''
         }],
-        imagePath: "http://192.168.100.246:1443/image/v1/100005251/objects/63882cf105f5f58310107e95/1669910400.jpg?signature=ad407ae3019acb29b14b4ed2817ad12f&watermark=m_61646D696E0A323032323132303154313332373434&expires=1669910400",
+        imagePath: "http://192.168.100.246:5463/oss/v1/100004008/objects/638da35805f5f0a8101021f9?client_token=100004008_0_1670313176_9a47a8459c120d977904c9feb2354a7e",
         isOpenSelect: state.open,
         rects: [{
           type: 'face',
-          rect: [698, 274, 23, 23],
+          rect: [10, 20, 23, 23],
           needExpand: true
         }, {
           type: 'face',
-          rect: [754.0, 268.0, 23.0, 23.0],
+          rect: [20, 25, 23.0, 23.0],
           needExpand: true
         }, {
           type: 'face',
-          rect: [430.0, 421.0, 49.0, 49.0],
+          rect: [40, 20.0, 49.0, 49.0],
           needExpand: true
         }, {
           type: 'face',
-          rect: [240.0, 468.0, 41.0, 36.0],
+          rect: [35.0, 70.0, 41.0, 36.0],
           needExpand: true
         }],
         children: function children() {
@@ -73,6 +75,57 @@ export default function App() {
           });
         }
       })
-    })
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        width: 800,
+        height: 600,
+        background: '#000',
+        marginTop: 40
+      },
+      children: [/*#__PURE__*/_jsx(_Button, {
+        onClick: function onClick() {
+          return updateState({
+            open2: true
+          });
+        },
+        children: "\u6253\u5F00"
+      }), /*#__PURE__*/_jsx(Modal, {
+        title: "modal",
+        open: state.open2,
+        onCancel: function onCancel() {
+          return updateState({
+            open2: false
+          });
+        },
+        width: 844,
+        children: /*#__PURE__*/_jsx("div", {
+          style: {
+            width: 800,
+            height: 600
+          },
+          children: /*#__PURE__*/_jsx(Picture, {
+            imagePath: "http://192.168.100.246:5463/oss/v1/100004008/objects/638da35805f5f0a8101021f9?client_token=100004008_0_1670313176_9a47a8459c120d977904c9feb2354a7e",
+            isOpenSelect: false,
+            rects: [{
+              type: 'face',
+              rect: [698, 274, 23, 23],
+              needExpand: true
+            }, {
+              type: 'face',
+              rect: [754.0, 268.0, 23.0, 23.0],
+              needExpand: true
+            }, {
+              type: 'face',
+              rect: [430.0, 421.0, 49.0, 49.0],
+              needExpand: true
+            }, {
+              type: 'face',
+              rect: [240.0, 468.0, 41.0, 36.0],
+              needExpand: true
+            }]
+          })
+        })
+      })]
+    })]
   });
 }

package/es/Picture/index.js

@@ -82,7 +82,8 @@ function Picture(_ref) {
     forceUpdateKey: Date.now(),
     fullScreenStatus: false,
     localUrl: '',
-    offset: [0, 0]
+    offset: [0, 0],
+    size: ['auto', 'auto']
   }),
       _useSimpleState2 = _slicedToArray(_useSimpleState, 3),
       state = _useSimpleState2[0],
@@ -122,7 +123,7 @@ function Picture(_ref) {
   var loadImageSuccess = _useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _layoutRef$current2, _layoutRect$width, _layoutRect$height;
 
-    var img, naturalWidth, naturalHeight, layoutRect, w, h, baseXOrY, x, y, imagescale, imgHeight, _imagescale, imgWidth, moveObj;
+    var img, naturalWidth, naturalHeight, layoutRect, w, h, baseXOrY, x, y, size, imagescale, imgHeight, _imagescale, imgWidth, moveObj;
 
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) {
@@ -144,17 +145,38 @@ function Picture(_ref) {
             baseXOrY = naturalWidth > naturalHeight ? 'x' : 'y';
             x = 0;
             y = 0;
+            size = []; // 横图
 
             if (baseXOrY === 'x') {
-              imagescale = w / naturalWidth;
-              imgHeight = imagescale * naturalHeight;
-              y = Math.abs((imgHeight - h) / 2);
-              img.width = w;
+              if (naturalWidth < w) {
+                // 图片小于容器
+                size[0] = naturalWidth;
+                size[1] = naturalHeight;
+                x = (w - naturalWidth) / 2;
+                y = Math.abs((h - naturalHeight) / 2);
+              } else {
+                // 图片大于容器
+                imagescale = w / naturalWidth;
+                imgHeight = imagescale * naturalHeight;
+                y = Math.abs((imgHeight - h) / 2);
+                size[0] = w;
+                size[1] = imgHeight;
+              }
             } else {
-              _imagescale = h / naturalHeight;
-              imgWidth = _imagescale * naturalWidth;
-              x = Math.abs((imgWidth - w) / 2);
-              img.height = h;
+              if (naturalHeight < h) {
+                // 图片小于容器
+                size[0] = naturalWidth;
+                size[1] = naturalHeight;
+                x = Math.abs(w - naturalWidth) / 2;
+                y = (h - naturalHeight) / 2;
+              } else {
+                // 图片大于容器
+                _imagescale = h / naturalHeight;
+                imgWidth = _imagescale * naturalWidth;
+                x = Math.abs((imgWidth - w) / 2);
+                size[0] = imgWidth;
+                size[1] = h;
+              }
             }
 
             moveObj = moveActionRef.current;
@@ -168,11 +190,12 @@ function Picture(_ref) {
                 y: y,
                 offset: [x, y],
                 forceUpdateKey: Date.now(),
-                baseXOrY: baseXOrY
+                baseXOrY: baseXOrY,
+                size: size
               });
             });
 
-          case 14:
+          case 15:
           case "end":
             return _context.stop();
         }
@@ -364,6 +387,10 @@ function Picture(_ref) {
             ref: domImgRef,
             draggable: false,
             src: state.localUrl,
+            style: {
+              width: state.size[0],
+              height: state.size[1]
+            },
             "data-src": imagePath,
             onLoad: loadImageSuccess
           }), !isEmpty ? /*#__PURE__*/_jsx(DrawRect, {

package/es/Picture/utils.js

@@ -87,13 +87,13 @@ export function computedRectScale(_ref) {
     var rect = item.needExpand ? getCaptureRect(cloneDeep(item.rect), item.type) : cloneDeep(item.rect);
     rect[0] = Math.round(rect[0] * scaleOptions.scaleX);
     rect[0] < 0 && (rect[0] = 0);
-    rect[2] = Math.round(rect[2] * scaleOptions.scaleX);
-    rect[2] < 0 && (rect[2] = 0);
     rect[1] = Math.round(rect[1] * scaleOptions.scaleY);
     rect[1] < 0 && (rect[1] = 0);
+    rect[2] = Math.round(rect[2] * scaleOptions.scaleX);
+    rect[2] < 0 && (rect[2] = 0);
+    rect[2] > width - rect[0] && (rect[2] = width - rect[0]);
     rect[3] = Math.round(rect[3] * scaleOptions.scaleY);
     rect[3] < 0 && (rect[3] = 0);
-    rect[2] > width - rect[0] && (rect[2] = width - rect[0]);
     rect[3] > height - rect[1] && (rect[3] = height - rect[1]);
     return _objectSpread(_objectSpread({}, item), {}, {
       rect: rect

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.2.35",
+  "version": "3.2.37",
   "scripts": {
     "docs:deploy": "gh-pages -d docs-dist",
     "build": "npm run entry && father build",
@@ -66,7 +66,7 @@
     "@types/react-dom": "^18.0.6",
     "antd": "^4.22.6",
     "babel-plugin-import": "^1.13.5",
-    "dumi": "^2.0.10",
+    "dumi": "^2.0.11",
     "gh-pages": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",