@cloud-app-dev/vidc 3.2.11 → 3.2.13

package/es/Picture/component/DefaultRects/index.less

@@ -0,0 +1,188 @@
+.border-decorator-color-mixin(@color) {
+  .border-top-decorator {
+    &::before {
+      border-top-color: @color;
+      border-left-color: @color;
+    }
+    &::after {
+      border-top-color: @color;
+      border-right-color: @color;
+    }
+  }
+  .border-bottom-decorator {
+    &::before {
+      border-bottom-color: @color;
+      border-left-color: @color;
+    }
+    &::after {
+      border-bottom-color: @color;
+      border-right-color: @color;
+    }
+  }
+}
+
+.rect-item-style-mixin(@color, @lightColor, @shadowColor) {
+  .rect-item {
+    border-color: @lightColor;
+    .border-decorator-color-mixin(@color);
+    &:hover {
+      border-color: @color;
+      box-shadow: inset 0 0 24px 0 @shadowColor;
+    }
+  }
+}
+
+.rect-info-list-mixin(@color, @bgColor, @shadowColor) {
+  .rect-info-list-wrapper {
+    .data-type {
+      .data-tag {
+        border: 1px solid @color;
+        background: @bgColor;
+      }
+    }
+    // border-color: @color;
+    // .rect-card-corner {
+    //   color: @color;
+    // }
+    // .rect-info-list {
+    //   display: block;
+    //   background: @bgColor;
+    //   box-shadow: inset 0 0 8px 0 @shadowColor;
+    // }
+  }
+}
+
+.rect-item-face-wrapper {
+  .rect-item-style-mixin(#ff5f57, rgba(255, 95, 87, 0.6), rgba(255, 95, 87, 0.4));
+  .rect-info-list-mixin(#FF5F57, rgba(255,95,87,0.6), rgba(179,49,43,0.6));
+}
+.rect-item-body-wrapper {
+  .rect-item-style-mixin(#ffbb22, rgba(255, 187, 34, 0.6), rgba(255, 187, 34, 0.4));
+  .rect-info-list-mixin(#FFBB22, rgba(255,187,34,0.6), rgba(176,94,0,0.6));
+}
+.rect-item-vehicle-wrapper {
+  .rect-item-style-mixin(#44aaff, rgba(68, 170, 255, 0.6), rgba(68, 170, 255, 0.4));
+  .rect-info-list-mixin(#44aaff, rgba(68,170,255,0.6), rgba(31,114,183,0.6));
+}
+.rect-item-nonVehicle-wrapper {
+  .rect-item-style-mixin(#50e9b2, rgba(80, 233, 178, 0.6), rgba(80, 233, 178, 0.4));
+  .rect-info-list-mixin(#50e9b2, rgba(80,233,178,0.6), rgba(15,196,132,0.6));
+}
+.rect-item-thing-wrapper {
+  .rect-item-style-mixin(#b946d2, rgba(185, 70, 210, 0.6), rgba(185, 70, 210, 0.4));
+  .rect-info-list-mixin(#b946d2, rgba(185, 70, 210, 0.6), rgba(155, 58, 177, 0.4));
+}
+
+.rect-item {
+  position: absolute;
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  .border-top-decorator,
+  .border-bottom-decorator {
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      border: 2px solid transparent;
+    }
+    &::before {
+      float: left;
+      margin-left: -1px;
+    }
+    &::after {
+      float: right;
+      margin-right: -1px;
+    }
+  }
+  .border-top-decorator {
+    top: 0;
+    &::before,
+    &::after {
+      margin-top: -1px;
+    }
+  }
+  .border-bottom-decorator {
+    bottom: 0;
+    &::before,
+    &::after {
+      margin-bottom: -1px;
+    }
+  }
+  &:hover + .rect-info-list-wrapper {
+    display: block;
+  }
+}
+
+// 结构化窗体
+.rect-info-list-wrapper {
+  display: none;
+  background: rgba(16, 21, 36, 0.8);
+  position: absolute;
+  z-index: 11;
+  border: 1px solid transparent;
+  padding-top: 5px;
+
+  /*高低质量*/
+  .data-type {
+    padding: 0 5px;
+    color: #fff;
+
+    .data-tag {
+      padding: 4px;
+      font-size: 12px;
+      margin-right: 4px;
+
+      .anticon {
+        margin-right: 4px;
+        color: #fff;
+      }
+    }
+  }
+  .rect-card-corner {
+    position: absolute;
+    top: -9px;
+    left: -1px;
+  }
+  .rect-info-arrow {
+    position: absolute;
+    display: block;
+    background: transparent;
+    border-style: solid;
+    border-width: 4px;
+    border-color: rgba(16, 21, 36, 0.8);
+    transform: rotate(45deg);
+    left: -4px;
+    top: 6px;
+  }
+  .rect-info-list {
+    height: 100%;
+    border-radius: 2px;
+    padding: 3px 10px;
+    .info-item {
+      padding: 3px 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 18px;
+      font-size: var(--fs-small);
+      color: #fff;
+      .anticon {
+        position: relative;
+        top: 1px;
+        cursor: default;
+        font-size: 16px;
+        color: #fff;
+        padding-right: 4px;
+      }
+      .item-label {
+        margin: 0 4px;
+      }
+    }
+  }
+}

package/es/Picture/component/DrawRect/index.js

@@ -1,14 +1,24 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React, { useCallback, useMemo } from 'react';
-import RectMenu from '../RectMenu';
-import "./index.css";
+import RectMenu from "../RectMenu";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 function DrawRect(_ref) {
   var _ref$rect = _ref.rect,
-    rect = _ref$rect === void 0 ? [] : _ref$rect,
-    canRenderMenu = _ref.canRenderMenu,
-    containerDom = _ref.containerDom,
-    onMenuClick = _ref.onMenuClick,
-    menus = _ref.menus,
-    getRectImage = _ref.getRectImage;
+      rect = _ref$rect === void 0 ? [] : _ref$rect,
+      canRenderMenu = _ref.canRenderMenu,
+      containerDom = _ref.containerDom,
+      onMenuClick = _ref.onMenuClick,
+      menus = _ref.menus,
+      getRectImage = _ref.getRectImage;
   var x = useMemo(function () {
     return rect[0] + rect[2];
   }, [rect]);
@@ -16,24 +26,27 @@ function DrawRect(_ref) {
     return rect[1] + rect[3];
   }, [rect]);
   var onMenuClickAction = useCallback(function (item) {
-    onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(Object.assign(Object.assign({}, item), {
+    onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(_objectSpread(_objectSpread({}, item), {}, {
       base64: getRectImage(rect)
     }));
   }, [getRectImage, onMenuClick, rect]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "select-rect-layout",
-    style: {
-      left: rect[0],
-      top: rect[1],
-      width: rect[2],
-      height: rect[3]
-    }
-  }), canRenderMenu && /*#__PURE__*/React.createElement(RectMenu, {
-    x: x,
-    y: y,
-    containerDom: containerDom,
-    onMenuClick: onMenuClickAction,
-    menus: menus
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "select-rect-layout",
+      style: {
+        left: rect[0],
+        top: rect[1],
+        width: rect[2],
+        height: rect[3]
+      }
+    }), canRenderMenu && /*#__PURE__*/_jsx(RectMenu, {
+      x: x,
+      y: y,
+      containerDom: containerDom,
+      onMenuClick: onMenuClickAction,
+      menus: menus
+    })]
+  });
 }
+
 export default DrawRect;

package/es/Picture/component/RectMenu/index.js

@@ -1,20 +1,25 @@
 import React, { useCallback, useMemo, useRef, useEffect } from 'react';
-import IconFont from '../../../IconFont';
-import { computedMenuPosition } from './utils';
-import "./index.css";
+import IconFont from "../../../IconFont";
+import { computedMenuPosition } from "./utils";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var MENU_WIDTH = 110;
 var MENU_HEIGHT = 30;
+
 function RectMenu(_ref) {
   var x = _ref.x,
-    y = _ref.y,
-    menus = _ref.menus,
-    containerDom = _ref.containerDom,
-    onMenuClick = _ref.onMenuClick;
+      y = _ref.y,
+      menus = _ref.menus,
+      containerDom = _ref.containerDom,
+      onMenuClick = _ref.onMenuClick;
+
   var _useMemo = useMemo(function () {
-      return containerDom.getBoundingClientRect();
-    }, [containerDom]),
-    width = _useMemo.width,
-    height = _useMemo.height;
+    return containerDom.getBoundingClientRect();
+  }, [containerDom]),
+      width = _useMemo.width,
+      height = _useMemo.height;
+
   var size = useMemo(function () {
     return {
       w: MENU_WIDTH,
@@ -32,15 +37,17 @@ function RectMenu(_ref) {
   var domRef = useRef(null);
   var handleCancelB = useCallback(function (e) {
     return e.stopPropagation();
-  }, []);
-  //防止click事件冒泡到查看器
+  }, []); //防止click事件冒泡到查看器
+
   useEffect(function () {
     var dom = domRef.current;
+
     if (dom) {
       dom.addEventListener('mousedown', handleCancelB, false);
       dom.addEventListener('mousemove', handleCancelB, false);
       dom.addEventListener('mouseup', handleCancelB, false);
     }
+
     return function () {
       if (dom) {
         dom.removeEventListener('mousedown', handleCancelB, false);
@@ -53,23 +60,25 @@ function RectMenu(_ref) {
     e.stopPropagation();
     onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item);
   }, [onMenuClick]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "select-rect-menu-layout",
     style: {
       left: position.x,
       top: position.y
     },
-    ref: domRef
-  }, menus.map(function (v) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "menu-action-item",
-      key: v.pathname,
-      onClick: function onClick(e) {
-        return onClickMenu(e, v);
-      }
-    }, /*#__PURE__*/React.createElement(IconFont, {
-      type: v.icon
-    }), v.title);
-  }));
+    ref: domRef,
+    children: menus.map(function (v) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: "menu-action-item",
+        onClick: function onClick(e) {
+          return onClickMenu(e, v);
+        },
+        children: [/*#__PURE__*/_jsx(IconFont, {
+          type: v.icon
+        }), v.title]
+      }, v.pathname);
+    })
+  });
 }
+
 export default RectMenu;

package/es/Picture/component/RectMenu/index.less

@@ -0,0 +1,31 @@
+.select-rect-menu-layout {
+  position: absolute;
+  font-size: var(--fs-small);
+  width: 105px;
+  overflow: hidden;
+  .menu-action-item {
+    padding: 4px 10px;
+    background: #ffffff;
+    margin-bottom: 4px;
+    border-radius: 15px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+    color: rgba(0, 0, 0, 0.65);
+    white-space: nowrap;
+    .anticon {
+      padding-right: 2px;
+      font-size: 16px;
+      color: #89b;
+    }
+    &:hover {
+      background: #ffaa00;
+      color: #fff;
+      cursor: pointer;
+      .anticon {
+        color: #fff;
+      }
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/es/Picture/component/RectMenu/utils.js

@@ -1,17 +1,20 @@
 export function computedMenuPosition(_ref) {
   var width = _ref.width,
-    height = _ref.height,
-    position = _ref.position,
-    size = _ref.size;
+      height = _ref.height,
+      position = _ref.position,
+      size = _ref.size;
   var x, y;
   x = position[0];
   y = position[1];
+
   if (width - x < size.w) {
     x = width - size.w;
   }
+
   if (height - y < size.h) {
     y = height - size.h;
   }
+
   return {
     x: x,
     y: y

package/es/Picture/component/Tools/index.js

@@ -1,76 +1,98 @@
 import "antd/lib/tooltip/style";
 import _Tooltip from "antd/lib/tooltip";
 import React from 'react';
-import IconFont from '../../../Player/iconfont';
-import FullScreen from '../../../FullScreen';
-import "./index.css";
+import IconFont from "../../../Player/iconfont";
+import FullScreen from "../../../FullScreen";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
 function Tools(_ref) {
   var scale = _ref.scale,
-    imgDownload = _ref.imgDownload,
-    setScale = _ref.setScale,
-    setRotate = _ref.setRotate,
-    containerEle = _ref.containerEle,
-    resetPicture = _ref.resetPicture,
-    fullScreenChange = _ref.fullScreenChange;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "picture-tools"
-  }, /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "left",
-    title: "\u590D\u4F4D"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: resetPicture
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_RotateMiddle"
-  }))), /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "left",
-    title: "\u653E\u5927"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setScale(0.2);
-    },
-    className: scale === 3 ? 'disabled' : ''
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_ZoomIn"
-  }))), /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "left",
-    title: "\u7F29\u5C0F"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setScale(-0.2);
-    },
-    className: scale === 1 ? 'disabled' : ''
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_ZoomOut"
-  }))), /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "left",
-    title: "\u5411\u5DE6"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setRotate(-90);
-    }
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_RotateLeft"
-  }))), /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "left",
-    title: "\u5411\u53F3"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setRotate(90);
-    }
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_RotateRight"
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "picture-actions"
-  }, imgDownload && /*#__PURE__*/React.createElement("div", {
-    onClick: imgDownload
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_Edit_LoadDown"
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FullScreen, {
-    className: "footer_window",
-    getContainer: function getContainer() {
-      return containerEle;
-    },
-    fullScreenChange: fullScreenChange
-  }))));
+      imgDownload = _ref.imgDownload,
+      setScale = _ref.setScale,
+      setRotate = _ref.setRotate,
+      containerEle = _ref.containerEle,
+      resetPicture = _ref.resetPicture,
+      fullScreenChange = _ref.fullScreenChange;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "picture-tools",
+      children: [/*#__PURE__*/_jsx(_Tooltip, {
+        placement: "left",
+        title: "\u590D\u4F4D",
+        children: /*#__PURE__*/_jsx("div", {
+          onClick: resetPicture,
+          children: /*#__PURE__*/_jsx(IconFont, {
+            type: "lm-player-S_View_RotateMiddle"
+          })
+        })
+      }), /*#__PURE__*/_jsx(_Tooltip, {
+        placement: "left",
+        title: "\u653E\u5927",
+        children: /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return setScale(0.2);
+          },
+          className: scale === 3 ? 'disabled' : '',
+          children: /*#__PURE__*/_jsx(IconFont, {
+            type: "lm-player-S_View_ZoomIn"
+          })
+        })
+      }), /*#__PURE__*/_jsx(_Tooltip, {
+        placement: "left",
+        title: "\u7F29\u5C0F",
+        children: /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return setScale(-0.2);
+          },
+          className: scale === 1 ? 'disabled' : '',
+          children: /*#__PURE__*/_jsx(IconFont, {
+            type: "lm-player-S_View_ZoomOut"
+          })
+        })
+      }), /*#__PURE__*/_jsx(_Tooltip, {
+        placement: "left",
+        title: "\u5411\u5DE6",
+        children: /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return setRotate(-90);
+          },
+          children: /*#__PURE__*/_jsx(IconFont, {
+            type: "lm-player-S_View_RotateLeft"
+          })
+        })
+      }), /*#__PURE__*/_jsx(_Tooltip, {
+        placement: "left",
+        title: "\u5411\u53F3",
+        children: /*#__PURE__*/_jsx("div", {
+          onClick: function onClick() {
+            return setRotate(90);
+          },
+          children: /*#__PURE__*/_jsx(IconFont, {
+            type: "lm-player-S_View_RotateRight"
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "picture-actions",
+      children: [imgDownload && /*#__PURE__*/_jsx("div", {
+        onClick: imgDownload,
+        children: /*#__PURE__*/_jsx(IconFont, {
+          type: "lm-player-S_Edit_LoadDown"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(FullScreen, {
+          className: "footer_window",
+          getContainer: function getContainer() {
+            return containerEle;
+          },
+          fullScreenChange: fullScreenChange
+        })
+      })]
+    })]
+  });
 }
+
 export default Tools;

package/es/Picture/component/Tools/index.less

@@ -0,0 +1,43 @@
+.picture-tools {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background: #fff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+  &.actions-change-rotate {
+    bottom: 150px;
+  }
+  & > div {
+    width: 30px;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    cursor: pointer;
+
+    &.disabled {
+      cursor: not-allowed;
+      color: #999;
+      .anticon {
+        color: #999;
+      }
+    }
+  }
+}
+.picture-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  & > div {
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    background: #fff;
+    float: left;
+    text-align: center;
+    margin-left: 4px;
+    cursor: pointer;
+  }
+  .tools-screen-layer .anticon {
+    padding-right: 0;
+  }
+}

package/es/Picture/component/WheelScale/index.js

@@ -1,19 +1,23 @@
 import React, { useCallback, useEffect } from 'react';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
 function WheelScale(_ref) {
   var dom = _ref.dom,
-    setScale = _ref.setScale;
+      setScale = _ref.setScale;
   var onWheel = useCallback(function (e) {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
       e.stopPropagation();
       setScale(e.deltaY > 0 ? -0.2 : 0.2);
     }
-  }, [setScale]);
-  //滚轮缩放
+  }, [setScale]); //滚轮缩放
+
   useEffect(function () {
     if (!dom) {
       return undefined;
     }
+
     dom.addEventListener('wheel', onWheel, {
       passive: false
     });
@@ -21,6 +25,7 @@ function WheelScale(_ref) {
       return dom.removeEventListener('wheel', onWheel);
     };
   }, [dom, onWheel]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
+  return /*#__PURE__*/_jsx(_Fragment, {});
 }
+
 export default WheelScale;