@cloud-app-dev/vidc 3.0.19 → 3.0.21

package/es/Map/AMap.d.ts

@@ -6914,6 +6914,10 @@ declare global {
       static post(path: string, params: any, callback: (status: string, data: any) => void): void;
     }
 
+    export class MouseTool {
+      constructor(map: AMap.Map);
+    }
+
     /**
      * 图块切片加载完成事件
      * @event complete

package/es/Map/ClusterLayer/index.js

@@ -25,7 +25,7 @@ function ClusterLayer(_ref) {
       cluster.setData([]);
       cluster.setData(markers);
     }
-  }, [markers]);
+  }, [cluster, markers, type.AMap, type.leaflet]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }
 

package/es/Map/MapDrawSelect/demo.d.ts

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

package/es/Map/MapDrawSelect/demo.js

@@ -0,0 +1,58 @@
+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 React, { useState } from 'react';
+import MapDrawSelect from './index';
+import deviceList from '../points.json';
+
+var App = function App() {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      type = _useState2[0],
+      setType = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: 800
+    }
+  }, /*#__PURE__*/React.createElement(MapDrawSelect, {
+    points: deviceList,
+    drawEnd: console.log,
+    drawType: type,
+    drawUi: /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        right: 20,
+        top: 120
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setType(type === 'rect' ? 'close' : 'rect');
+      }
+    }, "\u77E9\u5F62"), /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setType(type === 'polygon' ? 'close' : 'polygon');
+      }
+    }, "\u591A\u8FB9\u5F62"), /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setType(type === 'circle' ? 'close' : 'circle');
+      }
+    }, "\u5706\u5F27"), /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setType('clear');
+      }
+    }, "\u6E05\u9664"))
+  }));
+};
+
+export default App;

package/es/Map/MapDrawSelect/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DrawType, MapPoint } from '../interface';
+import './index.less';
+export interface IMapDrawSelectProps {
+    center?: [number, number];
+    zoom?: number;
+    points: MapPoint[];
+    children?: React.ReactNode;
+    drawUi?: React.ReactNode;
+    drawType?: DrawType | 'clear' | 'close';
+    drawEnd?: (points: MapPoint[]) => void;
+}
+declare const _default: (props: IMapDrawSelectProps) => JSX.Element;
+export default _default;

package/es/Map/MapDrawSelect/index.js

@@ -0,0 +1,49 @@
+import _useMount from "ahooks/es/useMount";
+import React, { useCallback, useContext, useMemo } from 'react';
+import ClusterLayer from '../ClusterLayer';
+import ResetTools from '../ResetTools';
+import withMap from '../withMap';
+import { mapContext } from '../Context';
+import MouseTool from '../MouseTool';
+import "./index.css";
+
+function MapDrawSelect(_ref) {
+  var center = _ref.center,
+      zoom = _ref.zoom,
+      points = _ref.points,
+      children = _ref.children,
+      drawUi = _ref.drawUi,
+      drawType = _ref.drawType,
+      drawEnd = _ref.drawEnd;
+
+  var _useContext = useContext(mapContext),
+      instance = _useContext.instance;
+
+  var defaultCenter = useMemo(function () {
+    return center || instance.config.center;
+  }, [center, instance]);
+  var defaultZoom = useMemo(function () {
+    return zoom || instance.config.zoom;
+  }, [zoom, instance]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var mapRest = useCallback(function () {
+    return instance.setZoomAndCenter(defaultZoom, defaultCenter);
+  }, [defaultZoom, defaultCenter]);
+
+  _useMount(function () {
+    return mapRest();
+  });
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClusterLayer, {
+    points: points
+  }), /*#__PURE__*/React.createElement(ResetTools, {
+    onMapReset: mapRest
+  }), /*#__PURE__*/React.createElement(MouseTool, {
+    ui: drawUi,
+    drawType: drawType,
+    drawEnd: drawEnd,
+    points: points
+  }), children);
+}
+
+export default withMap(MapDrawSelect, 'map-draw-select-container');

package/es/Map/MouseTool/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DrawType, MapPoint } from '../interface';
+interface IMouseTool {
+    ui: React.ReactNode;
+    drawType?: DrawType | 'clear' | 'close';
+    drawEnd?: (points: MapPoint[]) => void;
+    points?: MapPoint[];
+}
+declare function MouseTool({ ui, drawType, points, drawEnd }: IMouseTool): JSX.Element;
+export default MouseTool;

package/es/Map/MouseTool/index.js

@@ -0,0 +1,50 @@
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _nextTick from "@cloud-app-dev/utils/es/nextTick";
+import React from 'react';
+import useMouseTools from './useMouseTools';
+
+function MouseTool(_ref) {
+  var ui = _ref.ui,
+      drawType = _ref.drawType,
+      _ref$points = _ref.points,
+      points = _ref$points === void 0 ? [] : _ref$points,
+      drawEnd = _ref.drawEnd;
+
+  var _useMouseTools = useMouseTools(function (obj) {
+    var selectPoints = [];
+
+    for (var i = 0; i < points.length; i++) {
+      var item = points[i];
+
+      if (item.longitude && item.latitude && obj.contains([item.longitude, item.latitude])) {
+        selectPoints.push(item);
+      }
+    }
+
+    _nextTick(function () {
+      return drawEnd === null || drawEnd === void 0 ? void 0 : drawEnd(selectPoints);
+    });
+  }),
+      draw = _useMouseTools.draw,
+      close = _useMouseTools.close;
+
+  _useUpdateEffect(function () {
+    switch (drawType) {
+      case 'clear':
+        close(true);
+        break;
+
+      case 'close':
+        close();
+        break;
+
+      default:
+        draw(drawType);
+        break;
+    }
+  }, [drawType]);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, ui);
+}
+
+export default MouseTool;

package/es/Map/MouseTool/useMouseTools.d.ts

@@ -0,0 +1,7 @@
+import { DrawType } from '../interface';
+declare function useMouseTools(onDrawEnd?: (obj: any) => void): {
+    clear: (objs: any[]) => void;
+    draw: (type: DrawType) => void;
+    close: (ifClear?: boolean) => void;
+};
+export default useMouseTools;

package/es/Map/MouseTool/useMouseTools.js

@@ -0,0 +1,63 @@
+import _useMount from "ahooks/es/useMount";
+import { useContext, useRef } from 'react';
+import { mapContext } from '../Context';
+
+function useMouseTools(onDrawEnd) {
+  var _useContext = useContext(mapContext),
+      instance = _useContext.instance;
+
+  var overlayersRef = useRef([]);
+  var mouseRef = useRef(null);
+
+  _useMount(function () {
+    var map = instance.map;
+    AMap.plugin(['AMap.MouseTool'], function () {
+      mouseRef.current = new AMap.MouseTool(map);
+      mouseRef.current.on('draw', function (e) {
+        overlayersRef.current.push(e.obj);
+        onDrawEnd === null || onDrawEnd === void 0 ? void 0 : onDrawEnd(e.obj);
+      });
+    });
+  });
+
+  var draw = function draw(type) {
+    if (!mouseRef.current) {
+      return;
+    }
+
+    switch (type) {
+      case 'rect':
+        mouseRef.current.rectangle();
+        break;
+
+      case 'polygon':
+        mouseRef.current.polygon();
+        break;
+
+      case 'circle':
+        mouseRef.current.circle();
+    }
+  };
+
+  var clear = function clear(objs) {
+    objs.forEach(function (obj) {
+      instance.map.remove(obj);
+    });
+  };
+
+  var close = function close(ifClear) {
+    if (!mouseRef.current) {
+      return;
+    }
+
+    mouseRef.current.close(ifClear);
+  };
+
+  return {
+    clear: clear,
+    draw: draw,
+    close: close
+  };
+}
+
+export default useMouseTools;

package/es/Map/interface.d.ts

@@ -56,3 +56,5 @@ export interface LClusterInterface {
   getLayers(): Marker[];
   clearLayers(): void;
 }
+
+export type DrawType = 'rect' | 'polygon' | 'circle' | 'clear' | 'close';

package/es/ScreenPlayer/index.css

@@ -139,8 +139,8 @@
   color: var(--gray1);
 }
 .cloudapp-select.time-mode-select .cloudapp-select-selector {
-  background-color: transparent;
-  border-radius: var(--radius1);
+  background-color: transparent !important;
+  border-radius: var(--radius1) !important;
 }
 .cloudapp-select.time-mode-select .anticon {
   color: var(--gray1);

package/package.json

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