@cloud-app-dev/vidc 4.0.3 → 4.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.dumirc.ts +17 -4
- package/es/LabelPlayer/111.png +0 -0
- package/es/LabelPlayer/demo.d.ts +2 -0
- package/es/LabelPlayer/demo.js +123 -0
- package/es/LabelPlayer/index.d.ts +21 -0
- package/es/LabelPlayer/index.js +169 -0
- package/es/LabelPlayer/index.less +24 -0
- package/es/LoaderScript/utils.js +3 -3
- package/es/Map/BasicMap/index.js +17 -41
- package/es/Map/ClusterLayer/demo.d.ts +3 -0
- package/es/Map/ClusterLayer/demo.js +22 -0
- package/es/Map/Config/index.d.ts +1 -1
- package/es/Map/InfoWindow/index.d.ts +2 -1
- package/es/Map/InfoWindow/index.js +19 -32
- package/es/Map/SinglePoint/demo.d.ts +3 -0
- package/es/Map/SinglePoint/demo.js +16 -0
- package/es/Map/index.d.ts +1 -1
- package/es/Map/index.js +1 -1
- package/es/Map3D/demo.d.ts +3 -0
- package/es/Map3D/demo.js +13 -0
- package/es/Map3D/index.d.ts +4 -0
- package/es/Map3D/index.js +84 -0
- package/es/Map3D/index.less +4 -0
- package/es/Player/api/index.js +53 -18
- package/es/Player/util.js +42 -15
- package/es/ScreenPlayer/Live.js +18 -14
- package/es/ScreenPlayer/PlayerWithExt.d.ts +1 -1
- package/es/ScreenPlayer/Record.js +127 -186
- package/es/ScreenPlayer/ScreenSelect.js +63 -35
- package/es/ScreenPlayer/index.less +163 -1
- package/es/ScreenPlayer/interface.d.ts +1 -0
- package/es/ScreenPlayer/utils.js +21 -11
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -0
- package/es/utils.d.ts +5 -5
- package/es/utils.js +32 -35
- package/package.json +2 -2
package/.dumirc.ts
CHANGED
|
@@ -7,9 +7,9 @@ export default defineConfig({
|
|
|
7
7
|
favicons: ['https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png'],
|
|
8
8
|
outputPath: 'docs-dist',
|
|
9
9
|
targets: { chrome: 60 },
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
apiParser: {
|
|
11
|
+
unpkgHost: 'https://unpkg.zhimg.com',
|
|
12
|
+
},
|
|
13
13
|
resolve: {
|
|
14
14
|
// 配置入口文件路径,API 解析将从这里开始
|
|
15
15
|
entryFile: './src/index.ts',
|
|
@@ -59,8 +59,21 @@ export default defineConfig({
|
|
|
59
59
|
target: 'https://jxsr-eye.antelopecloud.cn/',
|
|
60
60
|
changeOrigin: true,
|
|
61
61
|
},
|
|
62
|
+
'/twinmapdataservice': {
|
|
63
|
+
target: 'http://192.168.101.38:8888',
|
|
64
|
+
changeOrigin: true,
|
|
65
|
+
pathRewrite: { twinmapdataservice: 'twinmap' },
|
|
66
|
+
},
|
|
67
|
+
'/twinmap': {
|
|
68
|
+
target: 'http://192.168.101.38:8888',
|
|
69
|
+
changeOrigin: true,
|
|
70
|
+
},
|
|
62
71
|
},
|
|
63
|
-
scripts: [
|
|
72
|
+
scripts: [
|
|
73
|
+
'//at.alicdn.com/t/font_1724012_972m5d05cou.js',
|
|
74
|
+
'http://192.168.101.38:8888/twinmap/resources/TwinMap3D/lib/Cesium/Cesium.js',
|
|
75
|
+
'http://192.168.101.38:8888/twinmap/resources/TwinMap3D/TwinMap3D.js',
|
|
76
|
+
],
|
|
64
77
|
styles: [themeConfig],
|
|
65
78
|
|
|
66
79
|
// more config: https://d.umijs.org/config
|
|
Binary file
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import _useFullscreen3 from "ahooks/es/useFullscreen";
|
|
2
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
|
+
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."); }
|
|
4
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
7
|
+
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."); }
|
|
8
|
+
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); }
|
|
9
|
+
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; }
|
|
10
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
11
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
import React, { useRef, useState } from 'react';
|
|
13
|
+
import LabelPlayer from '.';
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
+
var base64 = 'data:image/png;base64,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';
|
|
17
|
+
export default function App() {
|
|
18
|
+
var ref = useRef(null);
|
|
19
|
+
var _useFullscreen = _useFullscreen3(ref),
|
|
20
|
+
_useFullscreen2 = _slicedToArray(_useFullscreen, 2),
|
|
21
|
+
flag = _useFullscreen2[0],
|
|
22
|
+
toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
|
|
23
|
+
var _useState = useState([{
|
|
24
|
+
id: '132132122',
|
|
25
|
+
x: 1000,
|
|
26
|
+
y: 200
|
|
27
|
+
}, {
|
|
28
|
+
id: '453254323',
|
|
29
|
+
x: 800,
|
|
30
|
+
y: 400
|
|
31
|
+
}, {
|
|
32
|
+
id: '321432143',
|
|
33
|
+
x: 900,
|
|
34
|
+
y: 500
|
|
35
|
+
}, {
|
|
36
|
+
id: '543254345',
|
|
37
|
+
x: 1000,
|
|
38
|
+
y: 600
|
|
39
|
+
}, {
|
|
40
|
+
id: '5434354345',
|
|
41
|
+
x: 1100,
|
|
42
|
+
y: 600
|
|
43
|
+
}, {
|
|
44
|
+
id: '5454325345',
|
|
45
|
+
x: 1200,
|
|
46
|
+
y: 550
|
|
47
|
+
}, {
|
|
48
|
+
id: '543245354345',
|
|
49
|
+
x: 1000,
|
|
50
|
+
y: 450
|
|
51
|
+
}]),
|
|
52
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
53
|
+
state = _useState2[0],
|
|
54
|
+
updateState = _useState2[1];
|
|
55
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
56
|
+
children: [/*#__PURE__*/_jsx("button", {
|
|
57
|
+
type: "button",
|
|
58
|
+
onClick: toggleFullscreen,
|
|
59
|
+
children: flag + ''
|
|
60
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
61
|
+
children: /*#__PURE__*/_jsx("img", {
|
|
62
|
+
style: {
|
|
63
|
+
cursor: 'pointer'
|
|
64
|
+
},
|
|
65
|
+
width: 40,
|
|
66
|
+
src: base64,
|
|
67
|
+
draggable: true,
|
|
68
|
+
onDragStart: function onDragStart(e) {
|
|
69
|
+
e.dataTransfer.setData('DATA', JSON.stringify({
|
|
70
|
+
id: Math.random() + ''
|
|
71
|
+
}));
|
|
72
|
+
}
|
|
73
|
+
})
|
|
74
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
75
|
+
style: {
|
|
76
|
+
width: 1000,
|
|
77
|
+
height: 300
|
|
78
|
+
},
|
|
79
|
+
ref: ref,
|
|
80
|
+
children: /*#__PURE__*/_jsx(LabelPlayer, {
|
|
81
|
+
labels: state,
|
|
82
|
+
openDrop: true,
|
|
83
|
+
renderLabel: function renderLabel(item) {
|
|
84
|
+
return /*#__PURE__*/_jsx("img", {
|
|
85
|
+
style: {
|
|
86
|
+
cursor: 'pointer'
|
|
87
|
+
},
|
|
88
|
+
width: 40,
|
|
89
|
+
src: base64,
|
|
90
|
+
onClick: function onClick() {
|
|
91
|
+
return alert(item.id);
|
|
92
|
+
},
|
|
93
|
+
onDragStart: function onDragStart(e) {
|
|
94
|
+
e.dataTransfer.setData('DATA', JSON.stringify({
|
|
95
|
+
id: item.id
|
|
96
|
+
}));
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
},
|
|
100
|
+
onLabelMoveChange: function onLabelMoveChange(res) {
|
|
101
|
+
var data = JSON.parse(res.data);
|
|
102
|
+
updateState(function (old) {
|
|
103
|
+
var indx = old.findIndex(function (v) {
|
|
104
|
+
return v.id === data.id;
|
|
105
|
+
});
|
|
106
|
+
if (indx > -1 && old[indx]) {
|
|
107
|
+
old[indx].x = res.x - 20;
|
|
108
|
+
old[indx].y = res.y - 20;
|
|
109
|
+
} else {
|
|
110
|
+
old.push({
|
|
111
|
+
x: res.x - 20,
|
|
112
|
+
y: res.y - 20,
|
|
113
|
+
id: data.id
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
return _toConsumableArray(old);
|
|
117
|
+
});
|
|
118
|
+
},
|
|
119
|
+
url: "http://192.168.101.252:22094/fmp4/live/2b9d2390500c02c65_2/1.mp4?origin_url=sdk%3A%2F%2Fadmin%3Ahpg12345%40192.168.14.64%3A8000%2Fcam%2Frealmonitor%3Ffactory%3Dhikvision%26channel%3D2%26subType%3D0"
|
|
120
|
+
})
|
|
121
|
+
})]
|
|
122
|
+
});
|
|
123
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import './index.less';
|
|
3
|
+
export declare type PositionType = {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
};
|
|
7
|
+
export interface LabelType {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
id?: string;
|
|
11
|
+
[key: string]: any;
|
|
12
|
+
}
|
|
13
|
+
interface ILabelPlayerProps {
|
|
14
|
+
url?: string;
|
|
15
|
+
labels?: LabelType[];
|
|
16
|
+
renderLabel?: (item: LabelType) => JSX.Element;
|
|
17
|
+
onLabelMoveChange?: (item: LabelType) => void;
|
|
18
|
+
openDrop?: boolean;
|
|
19
|
+
}
|
|
20
|
+
declare function LabelPlayer({ url, labels, renderLabel, onLabelMoveChange, openDrop }: ILabelPlayerProps): JSX.Element;
|
|
21
|
+
export default LabelPlayer;
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import _useMemoizedFn from "ahooks/es/useMemoizedFn";
|
|
2
|
+
import _useSize from "ahooks/es/useSize";
|
|
3
|
+
import _useEventListener from "ahooks/es/useEventListener";
|
|
4
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
5
|
+
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."); }
|
|
6
|
+
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); }
|
|
7
|
+
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; }
|
|
8
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
9
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
10
|
+
import React, { useEffect, useMemo, useRef } from 'react';
|
|
11
|
+
import DomMove from "../DomMove";
|
|
12
|
+
import useSimpleState from "../useSimpleState";
|
|
13
|
+
import "./index.less";
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
+
function LabelItem(_ref) {
|
|
17
|
+
var children = _ref.children,
|
|
18
|
+
style = _ref.style;
|
|
19
|
+
var ref = useRef(null);
|
|
20
|
+
_useEventListener('mousedown', function (event) {
|
|
21
|
+
return event.stopPropagation();
|
|
22
|
+
}, {
|
|
23
|
+
target: ref
|
|
24
|
+
});
|
|
25
|
+
return /*#__PURE__*/_jsx("div", {
|
|
26
|
+
className: "video-label",
|
|
27
|
+
ref: ref,
|
|
28
|
+
style: style,
|
|
29
|
+
onMouseDown: function onMouseDown(event) {
|
|
30
|
+
return event.stopPropagation();
|
|
31
|
+
},
|
|
32
|
+
children: children
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function LabelPlayer(_ref2) {
|
|
36
|
+
var url = _ref2.url,
|
|
37
|
+
_ref2$labels = _ref2.labels,
|
|
38
|
+
labels = _ref2$labels === void 0 ? [] : _ref2$labels,
|
|
39
|
+
renderLabel = _ref2.renderLabel,
|
|
40
|
+
onLabelMoveChange = _ref2.onLabelMoveChange,
|
|
41
|
+
openDrop = _ref2.openDrop;
|
|
42
|
+
var _useSimpleState = useSimpleState({
|
|
43
|
+
x: 0,
|
|
44
|
+
y: 0
|
|
45
|
+
}),
|
|
46
|
+
_useSimpleState2 = _slicedToArray(_useSimpleState, 2),
|
|
47
|
+
state = _useSimpleState2[0],
|
|
48
|
+
setState = _useSimpleState2[1];
|
|
49
|
+
var containerRef = useRef(null);
|
|
50
|
+
var videoRef = useRef(null);
|
|
51
|
+
var videoSize = _useSize(videoRef);
|
|
52
|
+
var containerSize = _useSize(containerRef);
|
|
53
|
+
var moveActionRef = useRef();
|
|
54
|
+
var _useMemo = useMemo(function () {
|
|
55
|
+
var _videoSize$width, _containerSize$width, _videoSize$height, _containerSize$height;
|
|
56
|
+
return {
|
|
57
|
+
videoWidth: (_videoSize$width = videoSize === null || videoSize === void 0 ? void 0 : videoSize.width) !== null && _videoSize$width !== void 0 ? _videoSize$width : 0,
|
|
58
|
+
containerWidth: (_containerSize$width = containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== null && _containerSize$width !== void 0 ? _containerSize$width : 0,
|
|
59
|
+
videoHeight: (_videoSize$height = videoSize === null || videoSize === void 0 ? void 0 : videoSize.height) !== null && _videoSize$height !== void 0 ? _videoSize$height : 0,
|
|
60
|
+
containerHeight: (_containerSize$height = containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) !== null && _containerSize$height !== void 0 ? _containerSize$height : 0
|
|
61
|
+
};
|
|
62
|
+
}, [containerSize, videoSize]),
|
|
63
|
+
videoWidth = _useMemo.videoWidth,
|
|
64
|
+
containerWidth = _useMemo.containerWidth,
|
|
65
|
+
videoHeight = _useMemo.videoHeight,
|
|
66
|
+
containerHeight = _useMemo.containerHeight;
|
|
67
|
+
var onDragChange = _useMemoizedFn(function (_ref3) {
|
|
68
|
+
var x = _ref3.x,
|
|
69
|
+
y = _ref3.y;
|
|
70
|
+
return setState({
|
|
71
|
+
x: x,
|
|
72
|
+
y: y
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
var onDragEnd = function onDragEnd(_, position) {
|
|
76
|
+
var _moveActionRef$curren;
|
|
77
|
+
var diffWidth = videoWidth - containerWidth;
|
|
78
|
+
var diffHeight = videoHeight - containerHeight;
|
|
79
|
+
var x = position.x;
|
|
80
|
+
var y = position.y;
|
|
81
|
+
if (position.x > 0) {
|
|
82
|
+
x = 0;
|
|
83
|
+
}
|
|
84
|
+
if (position.x < -diffWidth) {
|
|
85
|
+
x = -diffWidth;
|
|
86
|
+
}
|
|
87
|
+
if (position.y > 0) {
|
|
88
|
+
y = 0;
|
|
89
|
+
}
|
|
90
|
+
if (position.y < -diffHeight) {
|
|
91
|
+
y = -diffHeight;
|
|
92
|
+
}
|
|
93
|
+
if (containerWidth > videoWidth) {
|
|
94
|
+
x = (containerWidth - videoWidth) / 2;
|
|
95
|
+
}
|
|
96
|
+
if (containerHeight > videoHeight) {
|
|
97
|
+
y = (containerHeight - videoHeight) / 2;
|
|
98
|
+
}
|
|
99
|
+
(_moveActionRef$curren = moveActionRef.current) === null || _moveActionRef$curren === void 0 ? void 0 : _moveActionRef$curren.updatePosition({
|
|
100
|
+
x: x,
|
|
101
|
+
y: y
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
var onDrop = function onDrop(event) {
|
|
105
|
+
var _containerRef$current;
|
|
106
|
+
if (!openDrop) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
var rect = ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect()) || {};
|
|
110
|
+
var left = event.clientX - rect.x;
|
|
111
|
+
var top = event.clientY - rect.y;
|
|
112
|
+
var data = event.dataTransfer.getData('DATA');
|
|
113
|
+
var flag1 = videoWidth > containerWidth;
|
|
114
|
+
var flag2 = videoHeight > containerHeight;
|
|
115
|
+
var diffHeight = videoHeight - containerHeight;
|
|
116
|
+
var diffWidth = videoWidth - containerWidth;
|
|
117
|
+
onLabelMoveChange === null || onLabelMoveChange === void 0 ? void 0 : onLabelMoveChange({
|
|
118
|
+
x: left + Math.abs(state.x) + (flag1 ? 0 : diffWidth),
|
|
119
|
+
y: top + Math.abs(state.y) + (flag2 ? 0 : diffHeight),
|
|
120
|
+
data: data
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
useEffect(function () {
|
|
124
|
+
var _moveActionRef$curren2;
|
|
125
|
+
if (!videoSize || !containerSize) {
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
var diffWidth = videoWidth - containerWidth;
|
|
129
|
+
var diffHeight = videoHeight - containerHeight;
|
|
130
|
+
(_moveActionRef$curren2 = moveActionRef.current) === null || _moveActionRef$curren2 === void 0 ? void 0 : _moveActionRef$curren2.updatePosition({
|
|
131
|
+
x: -diffWidth / 2,
|
|
132
|
+
y: -diffHeight / 2
|
|
133
|
+
});
|
|
134
|
+
}, [videoSize, containerSize]);
|
|
135
|
+
return /*#__PURE__*/_jsx("div", {
|
|
136
|
+
className: "label-player-container",
|
|
137
|
+
ref: containerRef,
|
|
138
|
+
onDrop: onDrop,
|
|
139
|
+
onDragOver: function onDragOver(e) {
|
|
140
|
+
return e.preventDefault();
|
|
141
|
+
},
|
|
142
|
+
children: /*#__PURE__*/_jsx(DomMove, {
|
|
143
|
+
ref: moveActionRef,
|
|
144
|
+
onDragChange: onDragChange,
|
|
145
|
+
onDragEnd: onDragEnd,
|
|
146
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
147
|
+
className: "video-container",
|
|
148
|
+
children: [/*#__PURE__*/_jsx("video", {
|
|
149
|
+
src: url,
|
|
150
|
+
autoPlay: true,
|
|
151
|
+
ref: videoRef,
|
|
152
|
+
muted: true
|
|
153
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
154
|
+
className: "video-label-box",
|
|
155
|
+
children: labels.map(function (label) {
|
|
156
|
+
return /*#__PURE__*/_jsx(LabelItem, {
|
|
157
|
+
style: {
|
|
158
|
+
left: label.x,
|
|
159
|
+
top: label.y
|
|
160
|
+
},
|
|
161
|
+
children: renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(label)
|
|
162
|
+
}, label.id);
|
|
163
|
+
})
|
|
164
|
+
})]
|
|
165
|
+
})
|
|
166
|
+
})
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
export default LabelPlayer;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.label-player-container {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
background-color: #000;
|
|
6
|
+
user-select: none;
|
|
7
|
+
|
|
8
|
+
.video-container {
|
|
9
|
+
position: relative;
|
|
10
|
+
width: max-content;
|
|
11
|
+
height: max-content;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
video {
|
|
15
|
+
width: 2048px;
|
|
16
|
+
min-height: 300px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.video-label-box {
|
|
20
|
+
.video-label {
|
|
21
|
+
position: absolute;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
package/es/LoaderScript/utils.js
CHANGED
|
@@ -14,18 +14,18 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
|
|
|
14
14
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
15
15
|
function _asyncIterator(iterable) { var method, async, sync, retry = 2; for ("undefined" != typeof Symbol && (async = Symbol.asyncIterator, sync = Symbol.iterator); retry--;) { if (async && null != (method = iterable[async])) return method.call(iterable); if (sync && null != (method = iterable[sync])) return new AsyncFromSyncIterator(method.call(iterable)); async = "@@asyncIterator", sync = "@@iterator"; } throw new TypeError("Object is not async iterable"); }
|
|
16
16
|
function AsyncFromSyncIterator(s) { function AsyncFromSyncIteratorContinuation(r) { if (Object(r) !== r) return Promise.reject(new TypeError(r + " is not an object.")); var done = r.done; return Promise.resolve(r.value).then(function (value) { return { value: value, done: done }; }); } return AsyncFromSyncIterator = function AsyncFromSyncIterator(s) { this.s = s, this.n = s.next; }, AsyncFromSyncIterator.prototype = { s: null, n: null, next: function next() { return AsyncFromSyncIteratorContinuation(this.n.apply(this.s, arguments)); }, return: function _return(value) { var ret = this.s.return; return void 0 === ret ? Promise.resolve({ value: value, done: !0 }) : AsyncFromSyncIteratorContinuation(ret.apply(this.s, arguments)); }, throw: function _throw(value) { var thr = this.s.return; return void 0 === thr ? Promise.reject(value) : AsyncFromSyncIteratorContinuation(thr.apply(this.s, arguments)); } }, new AsyncFromSyncIterator(s); }
|
|
17
|
-
import {
|
|
17
|
+
import { likeGo } from "../utils";
|
|
18
18
|
var global = window;
|
|
19
19
|
if (!global._LOADER_SCRIPT_URL) {
|
|
20
20
|
global._LOADER_SCRIPT_URL = {};
|
|
21
21
|
}
|
|
22
22
|
export var loadScript = function loadScript(url) {
|
|
23
|
-
console.log(url);
|
|
24
23
|
return new Promise(function (resolve, reject) {
|
|
25
24
|
if (global._LOADER_SCRIPT_URL[url]) {
|
|
26
25
|
resolve(null);
|
|
27
26
|
}
|
|
28
27
|
var script = document.createElement('script');
|
|
28
|
+
script.crossOrigin = 'anonymous';
|
|
29
29
|
script.type = 'text/javascript';
|
|
30
30
|
script.onload = function () {
|
|
31
31
|
global._LOADER_SCRIPT_URL[url] = true;
|
|
@@ -115,7 +115,7 @@ export function createAsyncIterable(options) {
|
|
|
115
115
|
});
|
|
116
116
|
}
|
|
117
117
|
export function runAsyncIterable(Iterables, runtime, callback) {
|
|
118
|
-
|
|
118
|
+
likeGo( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
119
119
|
var _iteratorAbruptCompletion, _didIteratorError, _iteratorError, _iterator, _step, x;
|
|
120
120
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
121
121
|
while (1) switch (_context2.prev = _context2.next) {
|
package/es/Map/BasicMap/index.js
CHANGED
|
@@ -1,69 +1,48 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
|
|
3
2
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
4
|
-
|
|
5
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
6
|
-
|
|
3
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
7
4
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
8
|
-
|
|
9
5
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
10
|
-
|
|
11
6
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
12
|
-
|
|
13
7
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
14
|
-
|
|
15
8
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
16
|
-
|
|
17
9
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
18
|
-
|
|
19
10
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
20
|
-
|
|
21
11
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
22
|
-
|
|
23
|
-
function
|
|
24
|
-
|
|
12
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
13
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
14
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
25
15
|
import React from 'react';
|
|
26
|
-
import LoaderMap from "../LoaderMap";
|
|
27
|
-
import { Provider } from "../Context";
|
|
28
|
-
import LeafletInstance from "./LeafletInstance";
|
|
29
|
-
import AMapInstance from "./AMapInstance";
|
|
30
|
-
import Config from "../Config";
|
|
31
16
|
import { withErrorBoundary } from 'react-error-boundary';
|
|
32
17
|
import { errorBoundaryOptions } from "../../ErrorFallback";
|
|
18
|
+
import Config from "../Config";
|
|
19
|
+
import { Provider } from "../Context";
|
|
20
|
+
import LoaderMap from "../LoaderMap";
|
|
21
|
+
import AMapInstance from "./AMapInstance";
|
|
33
22
|
import "./index.less";
|
|
23
|
+
import LeafletInstance from "./LeafletInstance";
|
|
34
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
35
25
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
36
|
-
|
|
37
26
|
var Map = /*#__PURE__*/function (_React$Component) {
|
|
38
27
|
_inherits(Map, _React$Component);
|
|
39
|
-
|
|
40
28
|
var _super = _createSuper(Map);
|
|
41
|
-
|
|
42
29
|
function Map() {
|
|
43
30
|
var _this;
|
|
44
|
-
|
|
45
31
|
_classCallCheck(this, Map);
|
|
46
|
-
|
|
47
32
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
48
33
|
args[_key] = arguments[_key];
|
|
49
34
|
}
|
|
50
|
-
|
|
51
35
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
52
|
-
|
|
53
36
|
_defineProperty(_assertThisInitialized(_this), "domRef", /*#__PURE__*/React.createRef());
|
|
54
|
-
|
|
55
37
|
_defineProperty(_assertThisInitialized(_this), "mapInstance", void 0);
|
|
56
|
-
|
|
57
38
|
return _this;
|
|
58
39
|
}
|
|
59
|
-
|
|
60
40
|
_createClass(Map, [{
|
|
61
41
|
key: "componentDidMount",
|
|
62
42
|
value: function componentDidMount() {
|
|
63
43
|
if (!this.domRef.current) {
|
|
64
44
|
return;
|
|
65
45
|
}
|
|
66
|
-
|
|
67
46
|
var mapOptions = this.props.config;
|
|
68
47
|
var instance = this.props.isL ? LeafletInstance : AMapInstance;
|
|
69
48
|
this.mapInstance = new instance(this.domRef.current, mapOptions);
|
|
@@ -73,16 +52,17 @@ var Map = /*#__PURE__*/function (_React$Component) {
|
|
|
73
52
|
}, {
|
|
74
53
|
key: "componentWillUnmount",
|
|
75
54
|
value: function componentWillUnmount() {
|
|
76
|
-
|
|
55
|
+
var _this$mapInstance;
|
|
56
|
+
(_this$mapInstance = this.mapInstance) === null || _this$mapInstance === void 0 ? void 0 : _this$mapInstance.destoryMap();
|
|
77
57
|
}
|
|
78
58
|
}, {
|
|
79
59
|
key: "render",
|
|
80
60
|
value: function render() {
|
|
81
61
|
var _this$props = this.props,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
62
|
+
children = _this$props.children,
|
|
63
|
+
_this$props$className = _this$props.className,
|
|
64
|
+
className = _this$props$className === void 0 ? '' : _this$props$className,
|
|
65
|
+
glaobalKey = _this$props.glaobalKey;
|
|
86
66
|
return /*#__PURE__*/_jsx(Provider, {
|
|
87
67
|
value: {
|
|
88
68
|
instance: this.mapInstance,
|
|
@@ -97,17 +77,14 @@ var Map = /*#__PURE__*/function (_React$Component) {
|
|
|
97
77
|
});
|
|
98
78
|
}
|
|
99
79
|
}]);
|
|
100
|
-
|
|
101
80
|
return Map;
|
|
102
81
|
}(React.Component);
|
|
103
|
-
|
|
104
82
|
var MapViewType = withErrorBoundary(Map, errorBoundaryOptions);
|
|
105
83
|
var MapView = MapViewType;
|
|
106
|
-
|
|
107
84
|
function WithLoaderMap(_ref) {
|
|
108
85
|
var MAP_GLABAL_KEY = _ref.MAP_GLABAL_KEY,
|
|
109
|
-
|
|
110
|
-
|
|
86
|
+
children = _ref.children,
|
|
87
|
+
className = _ref.className;
|
|
111
88
|
return /*#__PURE__*/_jsx(LoaderMap, {
|
|
112
89
|
MAP_GLABAL_KEY: MAP_GLABAL_KEY,
|
|
113
90
|
children: /*#__PURE__*/_jsx(Config, {
|
|
@@ -118,5 +95,4 @@ function WithLoaderMap(_ref) {
|
|
|
118
95
|
})
|
|
119
96
|
});
|
|
120
97
|
}
|
|
121
|
-
|
|
122
98
|
export default WithLoaderMap;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Map from "../BasicMap";
|
|
3
|
+
import deviceList from "../points.json";
|
|
4
|
+
import ClusterLayer from "./index";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
var App = function App() {
|
|
7
|
+
return /*#__PURE__*/_jsx("div", {
|
|
8
|
+
style: {
|
|
9
|
+
width: '100%',
|
|
10
|
+
height: 800
|
|
11
|
+
},
|
|
12
|
+
children: /*#__PURE__*/_jsx(Map, {
|
|
13
|
+
children: /*#__PURE__*/_jsx(ClusterLayer, {
|
|
14
|
+
points: deviceList,
|
|
15
|
+
onPointClick: function onPointClick(point) {
|
|
16
|
+
return alert(point.deviceName);
|
|
17
|
+
}
|
|
18
|
+
})
|
|
19
|
+
})
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
export default App;
|
package/es/Map/Config/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { customConfigProps } from '../interface';
|
|
3
3
|
interface IConfigProps {
|
|
4
4
|
children: React.ReactElement;
|
|
5
|
-
MAP_GLABAL_KEY
|
|
5
|
+
MAP_GLABAL_KEY?: 'L' | 'AMap';
|
|
6
6
|
customConfig?: customConfigProps;
|
|
7
7
|
}
|
|
8
8
|
declare function Config({ children, MAP_GLABAL_KEY, customConfig, ...props }: IConfigProps): JSX.Element;
|
|
@@ -7,4 +7,5 @@ export interface InfoWindowProps {
|
|
|
7
7
|
width: number;
|
|
8
8
|
height: number;
|
|
9
9
|
}
|
|
10
|
-
|
|
10
|
+
declare function InfoWindow({ children, visible, center, width, height }: InfoWindowProps): JSX.Element;
|
|
11
|
+
export default InfoWindow;
|