@cloud-app-dev/vidc 3.0.22 → 3.0.23

package/es/RIO/demo.js

@@ -9,7 +9,9 @@ var App = function App() {
       background: '#999'
     }
   }, /*#__PURE__*/React.createElement(RIO, {
-    debug: true
+    debug: true,
+    isOpen: true,
+    onChange: console.log
   }));
 };
 

package/es/RIO/index.d.ts

@@ -2,7 +2,38 @@ 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;
+    };
 }
-declare function RIO({ children, debug }: IRIOProps): JSX.Element;
 export default RIO;

package/es/RIO/index.js

@@ -1,29 +1,40 @@
-import _useMount from "ahooks/es/useMount";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import React, { useEffect, useRef } from 'react';
 import useDrawRIO from '../useDrawRIO';
 import "./index.css";
-var ROW = 18;
-var ROW_ITEMS = 32;
 
 function RIO(_ref) {
   var children = _ref.children,
-      debug = _ref.debug;
+      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: ROW_ITEMS
+    row: row,
+    rowItems: rowItems
   }),
       open = _useDrawRIO.open,
-      rio = _useDrawRIO.rio;
+      close = _useDrawRIO.close,
+      clear = _useDrawRIO.clear,
+      rio = _useDrawRIO.rio; // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  _useMount(function () {
-    return open();
-  });
 
   useEffect(function () {
-    console.log(rio);
+    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", {
@@ -44,4 +55,8 @@ function RIO(_ref) {
   }));
 }
 
+RIO.defaultProps = {
+  row: 18,
+  rowItems: 32
+};
 export default RIO;

package/es/ScreenPlayer/Record.js

@@ -164,9 +164,7 @@ function RecordPlayer(_a) {
           if (!item) {
             // 可能是外部的关闭动作关闭
             mergeList[i] = undefined;
-          }
-
-          if (item) {
+          } else {
             if (!mergeList[i]) {
               mergeList[i] = {};
             }

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

@@ -78,97 +78,105 @@ export default function useRecordList(list, queryRecord) {
 
             case 7:
               if ((_step = _iterator.n()).done) {
-                _context.next = 38;
+                _context.next = 41;
                 break;
               }
 
               dif = _step.value;
               index = dif.idx;
-              item = list[index];
-              record = state.cidSegments[index];
+              item = list[index]; // 当前外部传入的对象
 
-              if (!item) {
-                arr.push({
-                  idx: index,
-                  type: 'delete',
-                  segments: []
-                });
+              record = state.cidSegments[index]; //当前转换的播放对象
+
+              if (item) {
+                _context.next = 16;
+                break;
               }
 
-              if (!(item && item.cid && item.date)) {
-                _context.next = 36;
+              // 这里可能原来是空，也可能是外部删除
+              arr.push({
+                idx: index,
+                type: 'delete',
+                segments: []
+              });
+              _context.next = 39;
+              break;
+
+            case 16:
+              if (!(item.cid && item.date)) {
+                _context.next = 39;
                 break;
               }
 
               if (record) {
-                _context.next = 21;
+                _context.next = 24;
                 break;
               }
 
-              _context.next = 17;
+              _context.next = 20;
               return queryRecord({
                 cid: item.cid,
                 date: item.date,
                 recordType: item.recordType
               });
 
-            case 17:
+            case 20:
               segments = _context.sent;
               arr.push({
                 idx: index,
                 type: 'add',
                 segments: segments
               });
-              _context.next = 36;
+              _context.next = 39;
               break;
 
-            case 21:
+            case 24:
               if (!(record.cid !== item.cid || record.recordType !== item.recordType)) {
-                _context.next = 28;
+                _context.next = 31;
                 break;
               }
 
-              _context.next = 24;
+              _context.next = 27;
               return queryRecord({
                 cid: item.cid,
                 date: item.date,
                 recordType: item.recordType
               });
 
-            case 24:
+            case 27:
               _segments = _context.sent;
               arr.push({
                 idx: index,
                 type: 'add',
                 segments: _segments
               });
-              _context.next = 36;
+              _context.next = 39;
               break;
 
-            case 28:
+            case 31:
               if (!(record.date !== item.date)) {
-                _context.next = 35;
+                _context.next = 38;
                 break;
               }
 
-              _context.next = 31;
+              _context.next = 34;
               return queryRecord({
                 cid: item.cid,
                 date: item.date,
                 recordType: item.recordType
               });
 
-            case 31:
+            case 34:
               _segments2 = _context.sent;
               arr.push({
                 idx: index,
                 type: 'modify',
                 segments: _segments2
               });
-              _context.next = 36;
+              _context.next = 39;
               break;
 
-            case 35:
+            case 38:
               if (Array.isArray(item.segments) && item.segments.length > 0) {
                 // 时间轴更新
                 _segments3 = item.segments;
@@ -181,28 +189,28 @@ export default function useRecordList(list, queryRecord) {
                 console.debug('无变化！跳过～');
               }
 
-            case 36:
+            case 39:
               _context.next = 7;
               break;
 
-            case 38:
-              _context.next = 43;
+            case 41:
+              _context.next = 46;
               break;
 
-            case 40:
-              _context.prev = 40;
+            case 43:
+              _context.prev = 43;
               _context.t0 = _context["catch"](5);
 
               _iterator.e(_context.t0);
 
-            case 43:
-              _context.prev = 43;
+            case 46:
+              _context.prev = 46;
 
               _iterator.f();
 
-              return _context.finish(43);
+              return _context.finish(46);
 
-            case 46:
+            case 49:
               setState(function (old) {
                 var flag = false; //标记是否更新
 
@@ -216,6 +224,7 @@ export default function useRecordList(list, queryRecord) {
 
                   switch (type) {
                     case 'add':
+                      // 这里重置播放对象
                       flag = true;
                       var arr1 = item.segments ? [].concat(item.segments, segments) : segments;
                       arr1 = arr1.map(function (v) {
@@ -229,11 +238,13 @@ export default function useRecordList(list, queryRecord) {
                       break;
 
                     case 'delete':
+                      // 这里一是保持无播放对象，二是删除当前播放对象
                       flag = true;
                       cidSegments[index] = undefined;
                       break;
 
                     case 'modify':
+                      // 这里属于相同的播放对象，需要追加播放片断
                       flag = true;
                       cidSegments[index].date = item.date;
                       cidSegments[index].recordType = item.recordType;
@@ -260,12 +271,12 @@ export default function useRecordList(list, queryRecord) {
                 });
               });
 
-            case 47:
+            case 50:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[5, 40, 43, 46]]);
+      }, _callee, null, [[5, 43, 46, 49]]);
     }));
   }, [list, listKey, prevListKey]);
 

package/es/useDrawRIO/index.d.ts

@@ -6,6 +6,7 @@ interface RIOOptions {
 declare function useDrawRIO(target: BasicTarget<HTMLCanvasElement>, { row, rowItems }: RIOOptions): {
     open: () => void;
     close: () => void;
+    clear: () => void;
     rio: number[][];
     status: string;
 };

package/es/useDrawRIO/index.js

@@ -136,13 +136,18 @@ function useDrawRIO(target, _ref) {
     target: target
   });
 
-  useEffect(function () {
+  var clearCanvas = function clearCanvas() {
     var canvas = getTargetElement(target);
     var ctx = canvas.getContext('2d'); // 重置画布
 
-    ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制已完成的图形
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+
+  var drawSavaArea = function drawSavaArea(area) {
+    var canvas = getTargetElement(target);
+    var ctx = canvas.getContext('2d'); // 绘制已完成的图形
 
-    state.saveArea.forEach(function (item) {
+    area.forEach(function (item) {
       // 绘制坐标线
       var _item = _toArray(item),
           startPos = _item[0],
@@ -164,13 +169,17 @@ function useDrawRIO(target, _ref) {
       ctx.fill();
       ctx.stroke();
     });
+  };
 
-    if (state.pos.length === 0) {
-      return undefined;
-    } // 绘制坐标点
+  var canvasRendering = function canvasRendering(points, tempPos) {
+    if (points.length === 0) {
+      return;
+    }
 
+    var canvas = getTargetElement(target);
+    var ctx = canvas.getContext('2d'); // 绘制坐标点
 
-    state.pos.forEach(function (_ref8) {
+    points.forEach(function (_ref8) {
       var _ref9 = _slicedToArray(_ref8, 2),
           x = _ref9[0],
           y = _ref9[1];
@@ -181,9 +190,9 @@ function useDrawRIO(target, _ref) {
       ctx.fill();
     }); // 绘制坐标线
 
-    var _state$pos = _toArray(state.pos),
-        startPos = _state$pos[0],
-        pos = _state$pos.slice(1);
+    var _points = _toArray(points),
+        startPos = _points[0],
+        pos = _points.slice(1);
 
     ctx.beginPath();
     ctx.moveTo.apply(ctx, _toConsumableArray(startPos));
@@ -195,9 +204,9 @@ function useDrawRIO(target, _ref) {
       return ctx.lineTo(x, y);
     });
 
-    var _state$tempPos = _slicedToArray(state.tempPos, 2),
-        x = _state$tempPos[0],
-        y = _state$tempPos[1];
+    var _tempPos = _slicedToArray(tempPos, 2),
+        x = _tempPos[0],
+        y = _tempPos[1];
 
     if (typeof x === 'number' && typeof y === 'number') {
       ctx.lineTo(x, y);
@@ -209,7 +218,14 @@ function useDrawRIO(target, _ref) {
     ctx.fillStyle = 'rgba(243,45,55,0.5)';
     ctx.fill();
     ctx.stroke();
-  }, [state.pos, state.saveArea, state.tempPos, target]);
+  }; //绘制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]);
@@ -230,11 +246,23 @@ function useDrawRIO(target, _ref) {
     });
   };
 
+  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) {
-      return new Array(row).fill(new Array(rowItems).fill(0));
+      rioArr = new Array(row).fill(new Array(rowItems).fill(0));
+      return rioArr;
     }
 
     var _canvas$getBoundingCl2 = canvas.getBoundingClientRect(),
@@ -242,38 +270,40 @@ function useDrawRIO(target, _ref) {
         height = _canvas$getBoundingCl2.height;
 
     var itemWidth = width / rowItems;
-    var itemHeight = height / row;
-    var rio = [];
+    var itemHeight = height / row; // 转换当前绘制完成的区域为多边形
+
+    var areas = state.saveArea.map(function (item) {
+      return lineToPolygon(lineString(item));
+    });
 
     for (var i = 0; i < row; i++) {
       var arr = [];
 
-      for (var k = 0; k < rowItems; k++) {
-        var flag = false; // x表示当地的纬度，y表示当地的经度
-
-        var rect = lineToPolygon(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]]));
-
-        for (var j = 0; j < state.saveArea.length; j++) {
-          var item = state.saveArea[j];
-          var area = lineToPolygon(lineString(item));
-          flag = !booleanDisjoint(rect, area);
+      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]]); // 转换每格为多边形
 
-          if (flag === true) {
-            break;
-          }
-        }
+        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);
       }
 
-      rio.push(arr);
+      rioArr.push(arr);
     }
 
-    return rio;
+    return rioArr;
   }, [row, rowItems, state.saveArea, target]);
   return {
     open: open,
     close: close,
+    clear: clear,
     rio: rio,
     status: status
   };

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.22",
+  "version": "3.0.23",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",