@cloud-app-dev/vidc 3.0.21 → 3.0.23

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MzQwNTM5ODYzOCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MzE0NjE5ODYzOH0.EPh_1eNPNFl-fmLODbHo0mu5R_1kKdt3UUu_0qfBGFY';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MzkyNzM5NjQzMCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MzY2ODE5NjQzMH0.bJbtN-QjTUGGSIJRfR1ycjhtGt6UCEsrS29CYN-AAfw';
 
 export default defineConfig({
   title: 'CloudApp VIDC',

package/es/RIO/demo.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => JSX.Element;
+export default App;

package/es/RIO/demo.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import RIO from './index';
+
+var App = function App() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 600,
+      height: 400,
+      background: '#999'
+    }
+  }, /*#__PURE__*/React.createElement(RIO, {
+    debug: true,
+    isOpen: true,
+    onChange: console.log
+  }));
+};
+
+export default App;

package/es/RIO/index.css

@@ -0,0 +1,29 @@
+.rio-layout {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.rio-layout canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.rio-layout .rio-debug-box {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.rio-layout .rio-debug-box > div {
+  display: flex;
+  flex: 1;
+}
+.rio-layout .rio-debug-box > div span {
+  flex: 1;
+  border: 1px solid #eee;
+}

package/es/RIO/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import './index.less';
+interface IRIOProps {
+    children?: React.ReactNode;
+    /**
+     * 调试模式，开启回绘制具体网格
+     */
+    debug?: boolean;
+    /**
+     * 绘制数据变化
+     */
+    onChange?: (rio: number[][]) => void;
+    /**
+     * 开启/关闭 标识
+     */
+    isOpen?: boolean;
+    /**
+     * key变化回清楚画布
+     */
+    renderKey?: React.Key;
+    /**
+     * rio共多少行
+     * @default 18
+     */
+    row?: number;
+    /**
+     * rio 一行有多少个位置
+     * @default 32
+     */
+    rowItems?: number;
+}
+declare function RIO({ children, debug, renderKey, onChange, isOpen, row, rowItems }: IRIOProps): JSX.Element;
+declare namespace RIO {
+    var defaultProps: {
+        row: number;
+        rowItems: number;
+    };
+}
+export default RIO;

package/es/RIO/index.js

@@ -0,0 +1,62 @@
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import React, { useEffect, useRef } from 'react';
+import useDrawRIO from '../useDrawRIO';
+import "./index.css";
+
+function RIO(_ref) {
+  var children = _ref.children,
+      debug = _ref.debug,
+      renderKey = _ref.renderKey,
+      onChange = _ref.onChange,
+      isOpen = _ref.isOpen,
+      row = _ref.row,
+      rowItems = _ref.rowItems;
+  var ref = useRef(null);
+
+  var _useDrawRIO = useDrawRIO(ref, {
+    row: row,
+    rowItems: rowItems
+  }),
+      open = _useDrawRIO.open,
+      close = _useDrawRIO.close,
+      clear = _useDrawRIO.clear,
+      rio = _useDrawRIO.rio; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  useEffect(function () {
+    return isOpen ? open() : close();
+  }, [isOpen]);
+
+  _useUpdateEffect(function () {
+    return clear();
+  }, [renderKey]);
+
+  _useUpdateEffect(function () {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(rio);
+  }, [rio]);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "rio-layout"
+  }, children, debug && /*#__PURE__*/React.createElement("div", {
+    className: "rio-debug-box"
+  }, rio.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "row-".concat(index)
+    }, item.map(function (n, i) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: "item-".concat(i),
+        style: {
+          backgroundColor: n === 1 ? 'rgba(0,0,0,0.5)' : 'transparent'
+        }
+      });
+    }));
+  })), /*#__PURE__*/React.createElement("canvas", {
+    ref: ref
+  }));
+}
+
+RIO.defaultProps = {
+  row: 18,
+  rowItems: 32
+};
+export default RIO;

package/es/RIO/utils.d.ts

@@ -0,0 +1 @@
+export declare function drawMark(ctx: CanvasRenderingContext2D, x: number, y: number): void;

package/es/RIO/utils.js

@@ -0,0 +1 @@
+export function drawMark(ctx, x, y) {}

package/es/ScreenPlayer/Record.js

@@ -15,6 +15,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -140,35 +142,47 @@ function RecordPlayer(_a) {
       return;
     }
 
-    var diffIndexs = differenceWithIndexs(listKey.split('-'), prevListKey.split('-')).filter(function (v) {
-      return v.value !== FILTER_KEY;
-    });
+    var diffIndexs = differenceWithIndexs(listKey.split('-'), prevListKey.split('-'));
 
     if (diffIndexs.length === 0) {
       return;
     }
 
-    var i = diffIndexs[0].idx; // 变化索引
-
     setState(function (old) {
       var mergeList = old.mergeSegments;
-      var times = old.currentTimes;
-      var item = list[i];
-
-      if (!item) {
-        return old;
-      }
-
-      if (!mergeList[i]) {
-        mergeList[i] = {};
+      var times = old.currentTimes; // 批量更新调整
+
+      var _iterator = _createForOfIteratorHelper(diffIndexs),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var dif = _step.value;
+          var i = dif.idx;
+          var item = list[i];
+
+          if (!item) {
+            // 可能是外部的关闭动作关闭
+            mergeList[i] = undefined;
+          } else {
+            if (!mergeList[i]) {
+              mergeList[i] = {};
+            }
+
+            mergeList[i].date = item.date;
+            mergeList[i].segments = mergeList[i].cid !== item.cid ? [] : mergeList[i].segments;
+            mergeList[i].cid = item.cid;
+            mergeList[i].recordType = item.recordType; // 更新变化的currentTime
+
+            times[i] = list[i].date;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
 
-      mergeList[i].date = item.date;
-      mergeList[i].segments = mergeList[i].cid !== item.cid ? [] : mergeList[i].segments;
-      mergeList[i].cid = item.cid;
-      mergeList[i].recordType = item.recordType; // 更新变化的currentTime
-
-      times[i] = list[i].date;
       return Object.assign(Object.assign({}, old), {
         mergeSegments: _toConsumableArray(mergeList),
         currentTimes: _toConsumableArray(times)
@@ -432,7 +446,9 @@ function RecordPlayer(_a) {
     snapshot: snapshot,
     oneWinExtTools: oneWinExtTools,
     allWinExtTools: allWinExtTools
-  }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
+  })), /*#__PURE__*/React.createElement(DisableMark, {
+    disabled: !segmentItem.cid
+  }, /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: timeBegin,
     updateState: updateState,
     segments: segmentItem.segments,

package/es/ScreenPlayer/demo2.js

@@ -28,7 +28,7 @@ import RecordPlayer from './Record';
 import moment from 'moment';
 import Service from '../Service';
 import { completionSegments } from './utils';
-var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MzQwNTM5ODYzOCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MzE0NjE5ODYzOH0.EPh_1eNPNFl-fmLODbHo0mu5R_1kKdt3UUu_0qfBGFY";
+var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MzkyNzM5NjQzMCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MzY2ODE5NjQzMH0.bJbtN-QjTUGGSIJRfR1ycjhtGt6UCEsrS29CYN-AAfw";
 var cids = ['538509097', '539172446'];
 
 var query = function query(_ref) {
@@ -148,6 +148,22 @@ export default function App() {
           idx: idx
         });
       });
+    },
+    onClose: function onClose() {
+      var list = state.list;
+      list[state.idx] = undefined;
+      setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          list: _toConsumableArray(list)
+        });
+      });
+    },
+    onCloseAll: function onCloseAll() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          list: []
+        });
+      });
     }
   }))));
 }

package/es/ScreenPlayer/interface.d.ts

@@ -13,7 +13,10 @@ export type RecordItem = {
 };
 
 export interface IRecordPlayerProps {
-  list?: Omit<RecordItem, 'segments'>[];
+  /**
+   * 播放对象
+   */
+  list?: Omit<RecordItem, 'segments' | 'url'>[];
   children?: JSX.Element;
 
   /**

package/es/ScreenPlayer/useRecordList.js

@@ -13,6 +13,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -51,14 +53,13 @@ export default function useRecordList(list, queryRecord) {
 
   _useAsyncEffect(function () {
     return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var diffIndexs, index, item, record, segments, type;
+      var diffIndexs, arr, _iterator, _step, dif, index, item, record, segments, _segments, _segments2, _segments3;
+
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              diffIndexs = differenceWithIndexs(listKey ? listKey.split('-') : [], prevListKey ? prevListKey.split('-') : []).filter(function (v) {
-                return v.value !== FILTER_KEY;
-              });
+              diffIndexs = differenceWithIndexs(listKey ? listKey.split('-') : [], prevListKey ? prevListKey.split('-') : []);
 
               if (!(diffIndexs.length === 0)) {
                 _context.next = 3;
@@ -68,137 +69,214 @@ export default function useRecordList(list, queryRecord) {
               return _context.abrupt("return");
 
             case 3:
-              index = diffIndexs[0].idx; // 一次变化理论上只有一个
+              arr = []; // 存在披露更新的情况
+
+              _iterator = _createForOfIteratorHelper(diffIndexs);
+              _context.prev = 5;
+
+              _iterator.s();
+
+            case 7:
+              if ((_step = _iterator.n()).done) {
+                _context.next = 41;
+                break;
+              }
+
+              dif = _step.value;
+              index = dif.idx;
+              item = list[index]; // 当前外部传入的对象
 
-              item = list[index];
-              record = state.cidSegments[index];
+              record = state.cidSegments[index]; //当前转换的播放对象
 
+              if (item) {
+                _context.next = 16;
+                break;
+              }
+
+              // 这里可能原来是空，也可能是外部删除
+              arr.push({
+                idx: index,
+                type: 'delete',
+                segments: []
+              });
+              _context.next = 39;
+              break;
+
+            case 16:
               if (!(item.cid && item.date)) {
-                _context.next = 30;
+                _context.next = 39;
                 break;
               }
 
               if (record) {
-                _context.next = 14;
+                _context.next = 24;
                 break;
               }
 
-              // 首次直接查询
-              type = 'add';
-              _context.next = 11;
+              _context.next = 20;
               return queryRecord({
                 cid: item.cid,
                 date: item.date,
                 recordType: item.recordType
               });
 
-            case 11:
+            case 20:
               segments = _context.sent;
-              _context.next = 29;
+              arr.push({
+                idx: index,
+                type: 'add',
+                segments: segments
+              });
+              _context.next = 39;
               break;
 
-            case 14:
+            case 24:
               if (!(record.cid !== item.cid || record.recordType !== item.recordType)) {
-                _context.next = 21;
+                _context.next = 31;
                 break;
               }
 
-              // cid变化，录像类型变化重新请求
-              type = 'add';
-              _context.next = 18;
+              _context.next = 27;
               return queryRecord({
                 cid: item.cid,
                 date: item.date,
                 recordType: item.recordType
               });
 
-            case 18:
-              segments = _context.sent;
-              _context.next = 29;
+            case 27:
+              _segments = _context.sent;
+              arr.push({
+                idx: index,
+                type: 'add',
+                segments: _segments
+              });
+              _context.next = 39;
               break;
 
-            case 21:
+            case 31:
               if (!(record.date !== item.date)) {
-                _context.next = 28;
+                _context.next = 38;
                 break;
               }
 
-              // 上层日期变化更新，追加
-              type = 'modify';
-              _context.next = 25;
+              _context.next = 34;
               return queryRecord({
                 cid: item.cid,
                 date: item.date,
                 recordType: item.recordType
               });
 
-            case 25:
-              segments = _context.sent;
-              _context.next = 29;
+            case 34:
+              _segments2 = _context.sent;
+              arr.push({
+                idx: index,
+                type: 'modify',
+                segments: _segments2
+              });
+              _context.next = 39;
               break;
 
-            case 28:
+            case 38:
               if (Array.isArray(item.segments) && item.segments.length > 0) {
                 // 时间轴更新
-                type = 'modify';
-                segments = item.segments;
+                _segments3 = item.segments;
+                arr.push({
+                  idx: index,
+                  type: 'modify',
+                  segments: _segments3
+                });
               } else {
                 console.debug('无变化！跳过～');
               }
 
-            case 29:
+            case 39:
+              _context.next = 7;
+              break;
+
+            case 41:
+              _context.next = 46;
+              break;
+
+            case 43:
+              _context.prev = 43;
+              _context.t0 = _context["catch"](5);
+
+              _iterator.e(_context.t0);
+
+            case 46:
+              _context.prev = 46;
+
+              _iterator.f();
+
+              return _context.finish(46);
+
+            case 49:
               setState(function (old) {
                 var flag = false; //标记是否更新
 
                 var cidSegments = state.cidSegments;
-
-                switch (type) {
-                  case 'add':
-                    flag = true;
-                    var arr1 = item.segments ? [].concat(item.segments, segments) : segments;
-                    arr1 = arr1.map(function (v) {
-                      return Object.assign(Object.assign({}, v), {
-                        id: "".concat(v.beginTime, "-").concat(v.endTime)
-                      });
-                    });
-                    cidSegments[index] = Object.assign(Object.assign({}, item), {
-                      segments: orderBy(uniqBy(arr1, 'id'), 'beginTime', 'asc')
-                    });
-                    break;
-
-                  case 'modify':
-                    flag = true;
-                    cidSegments[index].date = item.date;
-                    cidSegments[index].recordType = item.recordType;
-                    var dif = differenceBy(cidSegments[index].segments, segments, 'beginTime');
-
-                    if (dif.length === 0) {
-                      flag = false;
-                    } else {
-                      var arr2 = [].concat(cidSegments[index].segments, segments);
-                      arr2 = arr2.map(function (v) {
+                arr.forEach(function (_ref) {
+                  var type = _ref.type,
+                      segments = _ref.segments,
+                      idx = _ref.idx;
+                  var index = idx;
+                  var item = list[index];
+
+                  switch (type) {
+                    case 'add':
+                      // 这里重置播放对象
+                      flag = true;
+                      var arr1 = item.segments ? [].concat(item.segments, segments) : segments;
+                      arr1 = arr1.map(function (v) {
                         return Object.assign(Object.assign({}, v), {
                           id: "".concat(v.beginTime, "-").concat(v.endTime)
                         });
                       });
-                      arr2 = uniqBy(arr2, 'id');
-                      cidSegments[index].segments = orderBy(arr2, 'beginTime', 'asc');
-                    }
-
-                    break;
-                }
+                      cidSegments[index] = Object.assign(Object.assign({}, item), {
+                        segments: orderBy(uniqBy(arr1, 'id'), 'beginTime', 'asc')
+                      });
+                      break;
+
+                    case 'delete':
+                      // 这里一是保持无播放对象，二是删除当前播放对象
+                      flag = true;
+                      cidSegments[index] = undefined;
+                      break;
+
+                    case 'modify':
+                      // 这里属于相同的播放对象，需要追加播放片断
+                      flag = true;
+                      cidSegments[index].date = item.date;
+                      cidSegments[index].recordType = item.recordType;
+                      var dif = differenceBy(cidSegments[index].segments, segments, 'beginTime');
+
+                      if (dif.length === 0) {
+                        flag = false;
+                      } else {
+                        var arr2 = [].concat(cidSegments[index].segments, segments);
+                        arr2 = arr2.map(function (v) {
+                          return Object.assign(Object.assign({}, v), {
+                            id: "".concat(v.beginTime, "-").concat(v.endTime)
+                          });
+                        });
+                        arr2 = uniqBy(arr2, 'id');
+                        cidSegments[index].segments = orderBy(arr2, 'beginTime', 'asc');
+                      }
 
+                      break;
+                  }
+                });
                 return Object.assign(Object.assign({}, old), {
                   cidSegments: flag ? _toConsumableArray(cidSegments) : cidSegments
                 });
               });
 
-            case 30:
+            case 50:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee);
+      }, _callee, null, [[5, 43, 46, 49]]);
     }));
   }, [list, listKey, prevListKey]);
 

package/es/ScreenPlayer/useTimeSlider.js

@@ -285,22 +285,7 @@ function useTimeSlider(canvasRef, _ref2) {
 
 
   var get_cursor_x_position = function get_cursor_x_position(e) {
-    var posx = 0;
-
-    var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-        left = _canvas$getBoundingCl.left;
-
-    if (!e) {
-      e = window.event;
-    }
-
-    if (e.pageX || e.pageY) {
-      posx = e.pageX - left;
-    } else if (e.clientX || e.clientY) {
-      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-    }
-
-    return posx;
+    return e.offsetX;
   };
   /**
    * 更新画布大小

package/es/index.d.ts

@@ -29,6 +29,7 @@ export { default as Picture } from './Picture';
 export { default as Player } from './Player';
 export { default as PlayerExt } from './PlayerExt';
 export { default as Progress } from './Progress';
+export { default as RIO } from './RIO';
 export { default as ScreenPlayer } from './ScreenPlayer';
 export { default as SegmentPlayer } from './SegmentPlayer';
 export { default as Service } from './Service';
@@ -36,6 +37,7 @@ export { default as TableLayout } from './TableLayout';
 export { default as ThemeAntd } from './ThemeAntd';
 export { default as Timeout } from './Timeout';
 export { default as Tree } from './Tree';
+export { default as useDrawRIO } from './useDrawRIO';
 export { default as useFullscreen } from './useFullscreen';
 export { default as useHistory } from './useHistory';
 export { default as useInfiniteScroll } from './useInfiniteScroll';

package/es/index.js

@@ -29,6 +29,7 @@ export { default as Picture } from './Picture';
 export { default as Player } from './Player';
 export { default as PlayerExt } from './PlayerExt';
 export { default as Progress } from './Progress';
+export { default as RIO } from './RIO';
 export { default as ScreenPlayer } from './ScreenPlayer';
 export { default as SegmentPlayer } from './SegmentPlayer';
 export { default as Service } from './Service';
@@ -36,6 +37,7 @@ export { default as TableLayout } from './TableLayout';
 export { default as ThemeAntd } from './ThemeAntd';
 export { default as Timeout } from './Timeout';
 export { default as Tree } from './Tree';
+export { default as useDrawRIO } from './useDrawRIO';
 export { default as useFullscreen } from './useFullscreen';
 export { default as useHistory } from './useHistory';
 export { default as useInfiniteScroll } from './useInfiniteScroll';

package/es/useDrawRIO/index.d.ts

@@ -0,0 +1,13 @@
+import { BasicTarget } from 'ahooks/lib/utils/domTarget';
+interface RIOOptions {
+    row: number;
+    rowItems: number;
+}
+declare function useDrawRIO(target: BasicTarget<HTMLCanvasElement>, { row, rowItems }: RIOOptions): {
+    open: () => void;
+    close: () => void;
+    clear: () => void;
+    rio: number[][];
+    status: string;
+};
+export default useDrawRIO;

package/es/useDrawRIO/index.js

@@ -0,0 +1,312 @@
+import _useEventListener from "ahooks/es/useEventListener";
+import _useMount from "ahooks/es/useMount";
+import _useLatest from "ahooks/es/useLatest";
+
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
+
+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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { getTargetElement } from 'ahooks/lib/utils/domTarget';
+import { useEffect, useMemo, useState } from 'react';
+import { lineString } from '@turf/helpers';
+import lineToPolygon from '@turf/line-to-polygon';
+import booleanDisjoint from '@turf/boolean-disjoint';
+
+function useDrawRIO(target, _ref) {
+  var row = _ref.row,
+      rowItems = _ref.rowItems;
+
+  var _useState = useState({
+    pos: [],
+    tempPos: [],
+    saveArea: [],
+    isOpen: false
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var isOpenRef = _useLatest(state.isOpen);
+
+  _useMount(function () {
+    var canvas = getTargetElement(target);
+
+    var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+        width = _canvas$getBoundingCl.width,
+        height = _canvas$getBoundingCl.height;
+
+    canvas.width = width;
+    canvas.height = height;
+  });
+
+  _useEventListener('click', function (event) {
+    if (!isOpenRef.current) {
+      return;
+    }
+
+    var p_x = event.offsetX;
+    var p_y = event.offsetY;
+    setState(function (old) {
+      var pos = old.pos; // 去掉重复点位,dbclick导致重复触发
+
+      if (!pos.find(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+            x = _ref3[0],
+            y = _ref3[1];
+
+        return x === p_x && y === p_y;
+      })) {
+        pos = [].concat(_toConsumableArray(pos), [[p_x, p_y]]);
+      }
+
+      return Object.assign(Object.assign({}, old), {
+        pos: pos
+      });
+    });
+  }, {
+    target: target
+  });
+
+  _useEventListener('dblclick', function (event) {
+    var p_x = event.offsetX;
+    var p_y = event.offsetY;
+    setState(function (old) {
+      var saveArea = old.saveArea;
+      var pos = old.pos;
+      var tempPos = old.tempPos;
+
+      if (pos.length > 2) {
+        // 去掉重复点位
+        if (!pos.find(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+              x = _ref5[0],
+              y = _ref5[1];
+
+          return x === p_x && y === p_y;
+        })) {
+          pos = [].concat(_toConsumableArray(pos), [[p_x, p_y]]);
+        }
+
+        saveArea = [].concat(_toConsumableArray(saveArea), [pos]);
+        pos = [];
+        tempPos = [];
+      }
+
+      return Object.assign(Object.assign({}, old), {
+        pos: pos,
+        saveArea: saveArea,
+        tempPos: tempPos
+      });
+    });
+  }, {
+    target: target
+  });
+
+  _useEventListener('mousemove', function (event) {
+    if (!isOpenRef.current || state.pos.length === 0) {
+      return;
+    }
+
+    var p_x = event.offsetX;
+    var p_y = event.offsetY;
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        tempPos: [p_x, p_y]
+      });
+    });
+  }, {
+    target: target
+  });
+
+  var clearCanvas = function clearCanvas() {
+    var canvas = getTargetElement(target);
+    var ctx = canvas.getContext('2d'); // 重置画布
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+
+  var drawSavaArea = function drawSavaArea(area) {
+    var canvas = getTargetElement(target);
+    var ctx = canvas.getContext('2d'); // 绘制已完成的图形
+
+    area.forEach(function (item) {
+      // 绘制坐标线
+      var _item = _toArray(item),
+          startPos = _item[0],
+          pos = _item.slice(1);
+
+      ctx.beginPath();
+      ctx.moveTo.apply(ctx, _toConsumableArray(startPos));
+      pos.forEach(function (_ref6) {
+        var _ref7 = _slicedToArray(_ref6, 2),
+            x = _ref7[0],
+            y = _ref7[1];
+
+        return ctx.lineTo(x, y);
+      });
+      ctx.lineTo.apply(ctx, _toConsumableArray(startPos));
+      ctx.strokeStyle = '#f32d37';
+      ctx.lineWidth = 2;
+      ctx.fillStyle = 'rgba(243,45,55,0.5)';
+      ctx.fill();
+      ctx.stroke();
+    });
+  };
+
+  var canvasRendering = function canvasRendering(points, tempPos) {
+    if (points.length === 0) {
+      return;
+    }
+
+    var canvas = getTargetElement(target);
+    var ctx = canvas.getContext('2d'); // 绘制坐标点
+
+    points.forEach(function (_ref8) {
+      var _ref9 = _slicedToArray(_ref8, 2),
+          x = _ref9[0],
+          y = _ref9[1];
+
+      ctx.beginPath();
+      ctx.arc(x, y, 4, 0, 2 * Math.PI);
+      ctx.fillStyle = 'red';
+      ctx.fill();
+    }); // 绘制坐标线
+
+    var _points = _toArray(points),
+        startPos = _points[0],
+        pos = _points.slice(1);
+
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, _toConsumableArray(startPos));
+    pos.forEach(function (_ref10) {
+      var _ref11 = _slicedToArray(_ref10, 2),
+          x = _ref11[0],
+          y = _ref11[1];
+
+      return ctx.lineTo(x, y);
+    });
+
+    var _tempPos = _slicedToArray(tempPos, 2),
+        x = _tempPos[0],
+        y = _tempPos[1];
+
+    if (typeof x === 'number' && typeof y === 'number') {
+      ctx.lineTo(x, y);
+    }
+
+    ctx.lineTo.apply(ctx, _toConsumableArray(startPos));
+    ctx.strokeStyle = '#f32d37';
+    ctx.lineWidth = 2;
+    ctx.fillStyle = 'rgba(243,45,55,0.5)';
+    ctx.fill();
+    ctx.stroke();
+  }; //绘制hook
+
+
+  useEffect(function () {
+    clearCanvas();
+    drawSavaArea(state.saveArea);
+    canvasRendering(state.pos, state.tempPos); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.pos, state.saveArea, state.tempPos]);
+  var status = useMemo(function () {
+    return state.isOpen ? 'open' : 'close';
+  }, [state.isOpen]);
+
+  var open = function open() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        isOpen: true
+      });
+    });
+  };
+
+  var close = function close() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        isOpen: false
+      });
+    });
+  };
+
+  var clear = function clear() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        pos: [],
+        saveArea: [],
+        tempPos: []
+      });
+    });
+  };
+
+  var rio = useMemo(function () {
+    var rioArr = [];
+    var canvas = getTargetElement(target);
+
+    if (!canvas) {
+      rioArr = new Array(row).fill(new Array(rowItems).fill(0));
+      return rioArr;
+    }
+
+    var _canvas$getBoundingCl2 = canvas.getBoundingClientRect(),
+        width = _canvas$getBoundingCl2.width,
+        height = _canvas$getBoundingCl2.height;
+
+    var itemWidth = width / rowItems;
+    var itemHeight = height / row; // 转换当前绘制完成的区域为多边形
+
+    var areas = state.saveArea.map(function (item) {
+      return lineToPolygon(lineString(item));
+    });
+
+    for (var i = 0; i < row; i++) {
+      var arr = [];
+
+      var _loop = function _loop(k) {
+        // x表示当地的纬度，y表示当地的经度
+        var lines = lineString([[k * itemWidth, i * itemHeight], [(k + 1) * itemWidth, i * itemHeight], [(k + 1) * itemWidth, (i + 1) * itemHeight], [k * itemWidth, (i + 1) * itemHeight], [k * itemWidth, i * itemHeight]]); // 转换每格为多边形
+
+        var rect = lineToPolygon(lines); //标记当前rect 是否与绘制的图形相交
+
+        var flag = areas.findIndex(function (area) {
+          return !booleanDisjoint(rect, area);
+        }) > -1;
+        arr.push(flag ? 1 : 0);
+      };
+
+      for (var k = 0; k < rowItems; k++) {
+        _loop(k);
+      }
+
+      rioArr.push(arr);
+    }
+
+    return rioArr;
+  }, [row, rowItems, state.saveArea, target]);
+  return {
+    open: open,
+    close: close,
+    clear: clear,
+    rio: rio,
+    status: status
+  };
+}
+
+export default useDrawRIO;

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.21",
+  "version": "3.0.23",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -31,6 +31,9 @@
   },
   "dependencies": {
     "@cloud-app-dev/flv.js": "^1.0.3",
+    "@turf/boolean-disjoint": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
+    "@turf/line-to-polygon": "^6.5.0",
     "ahooks": "^3.7.0",
     "axios": "^0.27.2",
     "hls.js": "^1.2.1",