@cloud-app-dev/vidc 4.0.1 → 4.0.2
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/es/AppContext/index.js +20 -61
- package/es/AutoExit/index.js +5 -9
- package/es/Config/index.js +0 -5
- package/es/Config/utils.js +7 -27
- package/es/ConfigContext/index.d.ts +1 -1
- package/es/ConfigContext/index.js +1 -3
- package/es/CustomRenderSelect/index.js +19 -39
- package/es/DynamicGridList/index.js +16 -28
- package/es/FullScreen/index.js +10 -21
- package/es/GridList/hook.js +36 -67
- package/es/GridList/index.d.ts +1 -1
- package/es/GridList/index.js +1 -1
- package/es/ImageView/index.js +16 -31
- package/es/LabelValue/index.d.ts +0 -8
- package/es/LabelValue/index.js +11 -16
- package/es/List/index.js +5 -7
- package/es/ListWithSizeAnimate/demo.js +3 -15
- package/es/LoaderScript/utils.js +100 -153
- package/es/Map/InfoWindow/MakerLikeWindow.js +35 -29
- package/es/Map/InfoWindow/demo.js +17 -29
- package/es/Picture/component/Tools/index.js +5 -7
- package/es/Picture/demo.js +15 -19
- package/es/Picture/index.js +70 -104
- package/es/Picture/utils.js +14 -28
- package/es/Player/api/index.js +26 -94
- package/es/Player/contraller_bar/right_bar.js +12 -23
- package/es/Player/demo.js +47 -62
- package/es/Player/event/errorEvent.js +15 -40
- package/es/Player/fps_play.js +12 -28
- package/es/Player/frontend_timeline.js +28 -48
- package/es/Player/player.d.ts +2 -1
- package/es/Player/segment_timeline.js +45 -69
- package/es/Player/single_player.js +101 -109
- package/es/Player/util.js +8 -27
- package/es/Progress/index.js +5 -16
- package/es/ROI/index.d.ts +0 -6
- package/es/ROI/index.js +17 -26
- package/es/RefDrawer/Footer.js +3 -5
- package/es/RefDrawer/demo.js +0 -3
- package/es/RefDrawer/index.js +17 -27
- package/es/RefModal/demo.js +0 -3
- package/es/RefModal/index.js +27 -27
- package/es/ScreenPlayer/Live.d.ts +1 -1
- package/es/ScreenPlayer/Live.js +36 -70
- package/es/ScreenPlayer/LiveTools.js +20 -39
- package/es/ScreenPlayer/PlayerWithExt.js +48 -85
- package/es/ScreenPlayer/RecordTools.d.ts +1 -1
- package/es/ScreenPlayer/RecordTools.js +27 -53
- package/es/ScreenPlayer/SegmentTimeLine.js +8 -13
- package/es/ScreenPlayer/TimeSelect.js +9 -24
- package/es/ScreenPlayer/demo.js +1 -1
- package/es/ScreenPlayer/demo2.js +76 -108
- package/es/ScreenPlayer/useTimeSlider.js +63 -141
- package/es/Service/http.js +14 -34
- package/es/TableLayout/index.js +6 -10
- package/es/ThemeAntd/index.js +0 -1
- package/es/Timeout/index.js +16 -31
- package/es/VList/index.d.ts +1 -9
- package/es/VList/index.js +18 -30
- package/es/typings.d.ts +1 -0
- package/es/useDrawROI/index.js +61 -115
- package/es/useInfiniteScroll/index.js +24 -45
- package/es/utils.js +18 -42
- package/package.json +4 -5
- package/es/ROI/utils.d.ts +0 -1
- package/es/ROI/utils.js +0 -1
- package/es/ThemeAntd/demo.html +0 -32
package/es/Picture/demo.js
CHANGED
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
2
|
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."); }
|
|
4
|
-
|
|
5
3
|
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); }
|
|
6
|
-
|
|
7
|
-
function
|
|
8
|
-
|
|
9
|
-
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; }
|
|
10
|
-
|
|
4
|
+
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; }
|
|
5
|
+
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
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
7
|
import { Button, ConfigProvider, Modal } from 'antd';
|
|
14
8
|
import React from 'react';
|
|
15
9
|
import Picture from '.';
|
|
@@ -18,19 +12,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
18
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
13
|
export default function App() {
|
|
20
14
|
var _useSimpleState = useSimpleState({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
open: false,
|
|
16
|
+
open2: false
|
|
17
|
+
}),
|
|
18
|
+
_useSimpleState2 = _slicedToArray(_useSimpleState, 2),
|
|
19
|
+
state = _useSimpleState2[0],
|
|
20
|
+
updateState = _useSimpleState2[1];
|
|
28
21
|
return /*#__PURE__*/_jsxs(ConfigProvider, {
|
|
29
22
|
prefixCls: "cloudapp",
|
|
30
23
|
children: [/*#__PURE__*/_jsx("div", {
|
|
31
24
|
style: {
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
25
|
+
width: 600,
|
|
26
|
+
height: 300,
|
|
34
27
|
background: '#000'
|
|
35
28
|
},
|
|
36
29
|
children: /*#__PURE__*/_jsx(Picture, {
|
|
@@ -40,10 +33,13 @@ export default function App() {
|
|
|
40
33
|
title: '菜单1',
|
|
41
34
|
pathname: '/',
|
|
42
35
|
icon: ''
|
|
43
|
-
}]
|
|
36
|
+
}]
|
|
37
|
+
// imagePath="http://192.168.100.246:5463/oss/v1/100004008/objects/638da35805f5f0a8101021f9?client_token=100004008_0_1670313176_9a47a8459c120d977904c9feb2354a7e"
|
|
44
38
|
,
|
|
45
39
|
isOpenSelect: state.open,
|
|
46
|
-
imagePath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%
|
|
40
|
+
imagePath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F16%2F20150316082631_YZ28f.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674876231&t=0824d5e8365bc9bcbe0484b5dbffff03"
|
|
41
|
+
// imagePath="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-08-07%2F5b69694c2e398.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674875813&t=f1f2c44a50e5f3ddae91ba223f5eb99b"
|
|
42
|
+
,
|
|
47
43
|
rects: [{
|
|
48
44
|
type: 'face',
|
|
49
45
|
rect: [920.0, 843.0, 96.0, 94.0],
|
package/es/Picture/index.js
CHANGED
|
@@ -1,31 +1,22 @@
|
|
|
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); }
|
|
1
2
|
import _useUpdateEffect from "ahooks/es/useUpdateEffect";
|
|
2
3
|
import _useUpdateLayoutEffect from "ahooks/es/useUpdateLayoutEffect";
|
|
3
4
|
import _useMemoizedFn from "ahooks/es/useMemoizedFn";
|
|
4
5
|
import _useSize from "ahooks/es/useSize";
|
|
5
6
|
var _excluded = ["className", "width", "height", "minHeight", "disabledDrag", "imagePath", "rects", "isOpenSelect", "disabledDrawMenu", "menus", "hasTool", "fullScreenEle"];
|
|
6
|
-
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
|
-
|
|
9
8
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
10
|
-
|
|
11
|
-
function
|
|
12
|
-
|
|
9
|
+
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; }
|
|
10
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
11
|
+
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); }
|
|
13
12
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
14
|
-
|
|
15
13
|
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."); }
|
|
16
|
-
|
|
17
14
|
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); }
|
|
18
|
-
|
|
19
|
-
function
|
|
20
|
-
|
|
21
|
-
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; }
|
|
22
|
-
|
|
15
|
+
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; }
|
|
16
|
+
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; } }
|
|
23
17
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
24
|
-
|
|
25
18
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
26
|
-
|
|
27
19
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
28
|
-
|
|
29
20
|
import React, { useEffect, useMemo, useRef } from 'react';
|
|
30
21
|
import DomMove from "../DomMove";
|
|
31
22
|
import useSimpleState from "../useSimpleState";
|
|
@@ -40,61 +31,53 @@ import "./index.less";
|
|
|
40
31
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
41
32
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
42
33
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
43
|
-
|
|
44
34
|
function Picture(_ref) {
|
|
45
35
|
var _layoutRef$current;
|
|
46
|
-
|
|
47
36
|
var className = _ref.className,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
37
|
+
width = _ref.width,
|
|
38
|
+
height = _ref.height,
|
|
39
|
+
minHeight = _ref.minHeight,
|
|
40
|
+
disabledDrag = _ref.disabledDrag,
|
|
41
|
+
imagePath = _ref.imagePath,
|
|
42
|
+
rects = _ref.rects,
|
|
43
|
+
isOpenSelect = _ref.isOpenSelect,
|
|
44
|
+
disabledDrawMenu = _ref.disabledDrawMenu,
|
|
45
|
+
menus = _ref.menus,
|
|
46
|
+
hasTool = _ref.hasTool,
|
|
47
|
+
fullScreenEle = _ref.fullScreenEle,
|
|
48
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
61
49
|
var _useMemo = useMemo(function () {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
50
|
+
return props;
|
|
51
|
+
}, [props]),
|
|
52
|
+
imgDownload = _useMemo.imgDownload,
|
|
53
|
+
onClickRect = _useMemo.onClickRect,
|
|
54
|
+
onMenuClick = _useMemo.onMenuClick,
|
|
55
|
+
children = _useMemo.children;
|
|
69
56
|
var _useSimpleState = useSimpleState({
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
57
|
+
x: 0,
|
|
58
|
+
y: 0,
|
|
59
|
+
rotate: 0,
|
|
60
|
+
scale: 1,
|
|
61
|
+
baseXOrY: 'x',
|
|
62
|
+
forceUpdateKey: Date.now(),
|
|
63
|
+
loadedTime: 0,
|
|
64
|
+
fullScreenStatus: false,
|
|
65
|
+
localUrl: '',
|
|
66
|
+
offset: [0, 0],
|
|
67
|
+
size: ['auto', 'auto']
|
|
68
|
+
}),
|
|
69
|
+
_useSimpleState2 = _slicedToArray(_useSimpleState, 3),
|
|
70
|
+
state = _useSimpleState2[0],
|
|
71
|
+
updateState = _useSimpleState2[1],
|
|
72
|
+
setState = _useSimpleState2[2];
|
|
87
73
|
var layoutRef = useRef(null);
|
|
88
74
|
var moveActionRef = useRef(null);
|
|
89
75
|
var domImgRef = useRef(null);
|
|
90
|
-
|
|
91
76
|
var size = _useSize(layoutRef);
|
|
92
|
-
|
|
93
77
|
useEffect(function () {
|
|
94
78
|
if (!imagePath) {
|
|
95
79
|
return undefined;
|
|
96
80
|
}
|
|
97
|
-
|
|
98
81
|
var localUrl;
|
|
99
82
|
fetch(imagePath).then(function (res) {
|
|
100
83
|
return res.blob();
|
|
@@ -109,25 +92,24 @@ function Picture(_ref) {
|
|
|
109
92
|
return function () {
|
|
110
93
|
return URL.revokeObjectURL(localUrl);
|
|
111
94
|
};
|
|
112
|
-
}, [imagePath]);
|
|
95
|
+
}, [imagePath]);
|
|
113
96
|
|
|
97
|
+
// draw hooks
|
|
114
98
|
var _useDraw = useDraw((_layoutRef$current = layoutRef.current) === null || _layoutRef$current === void 0 ? void 0 : _layoutRef$current.querySelector('.picture-overlay'), isOpenSelect),
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
99
|
+
_useDraw2 = _slicedToArray(_useDraw, 2),
|
|
100
|
+
selectArea = _useDraw2[0],
|
|
101
|
+
isEnd = _useDraw2[1];
|
|
119
102
|
|
|
103
|
+
// init loaded
|
|
120
104
|
var loadImageSuccess = _useMemoizedFn(function () {
|
|
121
105
|
if (!state.localUrl || !layoutRef.current || !domImgRef.current) {
|
|
122
106
|
return;
|
|
123
107
|
}
|
|
124
|
-
|
|
125
108
|
var _getImgSize = getImgSize(layoutRef.current, domImgRef.current),
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
109
|
+
x = _getImgSize.x,
|
|
110
|
+
y = _getImgSize.y,
|
|
111
|
+
size = _getImgSize.size,
|
|
112
|
+
baseXOrY = _getImgSize.baseXOrY;
|
|
131
113
|
var moveObj = moveActionRef.current;
|
|
132
114
|
moveObj.updatePosition({
|
|
133
115
|
x: x,
|
|
@@ -143,57 +125,49 @@ function Picture(_ref) {
|
|
|
143
125
|
loadedTime: Date.now()
|
|
144
126
|
});
|
|
145
127
|
});
|
|
146
|
-
});
|
|
147
|
-
|
|
128
|
+
});
|
|
148
129
|
|
|
130
|
+
// 更新重绘
|
|
149
131
|
_useUpdateLayoutEffect(function () {
|
|
150
132
|
loadImageSuccess();
|
|
151
|
-
}, [size]);
|
|
152
|
-
|
|
133
|
+
}, [size]);
|
|
153
134
|
|
|
135
|
+
// 更新重绘
|
|
154
136
|
_useUpdateLayoutEffect(function () {
|
|
155
137
|
// Rects重新计算
|
|
156
138
|
updateState({
|
|
157
139
|
forceUpdateKey: Date.now()
|
|
158
140
|
});
|
|
159
141
|
}, [state.loadedTime]);
|
|
142
|
+
|
|
160
143
|
/**
|
|
161
144
|
* 设置图片缩放
|
|
162
145
|
*/
|
|
163
|
-
|
|
164
|
-
|
|
165
146
|
var setScale = _useMemoizedFn(function (changeValue) {
|
|
166
147
|
var currentValue = state.scale;
|
|
167
|
-
|
|
168
148
|
if (currentValue === 3 && changeValue > 0) {
|
|
169
149
|
return;
|
|
170
150
|
}
|
|
171
|
-
|
|
172
151
|
if (currentValue === 1 && changeValue < 0) {
|
|
173
152
|
return;
|
|
174
153
|
}
|
|
175
|
-
|
|
176
154
|
var scale = currentValue + changeValue;
|
|
177
|
-
|
|
178
155
|
if (scale > 3) {
|
|
179
156
|
scale = 3;
|
|
180
157
|
}
|
|
181
|
-
|
|
182
158
|
if (scale < 1) {
|
|
183
159
|
scale = 1;
|
|
184
160
|
}
|
|
185
|
-
|
|
186
161
|
setState(function (old) {
|
|
187
162
|
return _objectSpread(_objectSpread({}, old), {}, {
|
|
188
163
|
scale: scale
|
|
189
164
|
});
|
|
190
165
|
});
|
|
191
166
|
});
|
|
167
|
+
|
|
192
168
|
/**
|
|
193
169
|
* 设置图谱旋转
|
|
194
170
|
*/
|
|
195
|
-
|
|
196
|
-
|
|
197
171
|
var setRotate = _useMemoizedFn(function (changeValue) {
|
|
198
172
|
var currentValue = state.rotate;
|
|
199
173
|
setState(function (old) {
|
|
@@ -202,11 +176,10 @@ function Picture(_ref) {
|
|
|
202
176
|
});
|
|
203
177
|
});
|
|
204
178
|
});
|
|
179
|
+
|
|
205
180
|
/**
|
|
206
181
|
* 重置图片位置
|
|
207
182
|
*/
|
|
208
|
-
|
|
209
|
-
|
|
210
183
|
var resetPicture = _useMemoizedFn(function (event) {
|
|
211
184
|
event.stopPropagation();
|
|
212
185
|
var moveObj = moveActionRef.current;
|
|
@@ -221,14 +194,13 @@ function Picture(_ref) {
|
|
|
221
194
|
y: state.offset[1]
|
|
222
195
|
});
|
|
223
196
|
});
|
|
197
|
+
|
|
224
198
|
/**
|
|
225
199
|
* 拖拽更新位置
|
|
226
200
|
*/
|
|
227
|
-
|
|
228
|
-
|
|
229
201
|
var onDragChange = _useMemoizedFn(function (_ref2) {
|
|
230
202
|
var x = _ref2.x,
|
|
231
|
-
|
|
203
|
+
y = _ref2.y;
|
|
232
204
|
return setState(function (old) {
|
|
233
205
|
return _objectSpread(_objectSpread({}, old), {}, {
|
|
234
206
|
x: x,
|
|
@@ -236,28 +208,26 @@ function Picture(_ref) {
|
|
|
236
208
|
});
|
|
237
209
|
});
|
|
238
210
|
});
|
|
211
|
+
|
|
239
212
|
/**
|
|
240
213
|
* 拖拽结束更新位置,计算边界
|
|
241
214
|
*/
|
|
242
|
-
|
|
243
|
-
|
|
244
215
|
var onDragEnd = _useMemoizedFn(function (_, currrentPosition) {
|
|
245
216
|
if (!layoutRef.current || !domImgRef.current) {
|
|
246
217
|
return undefined;
|
|
247
218
|
}
|
|
248
|
-
|
|
249
219
|
var _ref3 = size || {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
220
|
+
width: 0,
|
|
221
|
+
height: 0
|
|
222
|
+
},
|
|
223
|
+
width = _ref3.width,
|
|
224
|
+
height = _ref3.height;
|
|
256
225
|
var imgw = domImgRef.current.width * state.scale;
|
|
257
226
|
var imgh = domImgRef.current.height * state.scale;
|
|
258
227
|
var scaleW = imgw - domImgRef.current.width;
|
|
259
|
-
var scaleH = imgh - domImgRef.current.height;
|
|
228
|
+
var scaleH = imgh - domImgRef.current.height;
|
|
260
229
|
|
|
230
|
+
// 校验x,y范围,超出回弹
|
|
261
231
|
var maxX = imgw < width ? width - imgw + scaleW / 2 : scaleW / 2;
|
|
262
232
|
var maxY = imgh < height ? height - imgh + scaleH / 2 : scaleH / 2;
|
|
263
233
|
var minX = imgw < width ? scaleW / 2 : -(imgw - width) / 2 + state.offset[0];
|
|
@@ -270,16 +240,15 @@ function Picture(_ref) {
|
|
|
270
240
|
y: y
|
|
271
241
|
});
|
|
272
242
|
});
|
|
243
|
+
|
|
273
244
|
/**
|
|
274
245
|
* 获取结构化的小图(base64)
|
|
275
246
|
*/
|
|
276
|
-
|
|
277
|
-
|
|
278
247
|
var getRectImage = _useMemoizedFn(function (rect) {
|
|
279
248
|
return getRectImagePath(domImgRef.current, rect);
|
|
280
|
-
});
|
|
281
|
-
|
|
249
|
+
});
|
|
282
250
|
|
|
251
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
283
252
|
var scaleRects = useMemo(function () {
|
|
284
253
|
return computedRectScale({
|
|
285
254
|
domImg: domImgRef.current,
|
|
@@ -296,7 +265,6 @@ function Picture(_ref) {
|
|
|
296
265
|
getRectImage: getRectImage,
|
|
297
266
|
containerEle: layoutRef.current
|
|
298
267
|
};
|
|
299
|
-
|
|
300
268
|
_useUpdateEffect(function () {
|
|
301
269
|
if (isOpenSelect) {
|
|
302
270
|
var moveObj = moveActionRef.current;
|
|
@@ -312,7 +280,6 @@ function Picture(_ref) {
|
|
|
312
280
|
});
|
|
313
281
|
}
|
|
314
282
|
}, [isOpenSelect]);
|
|
315
|
-
|
|
316
283
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
317
284
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
318
285
|
className: "picture-view-layout ".concat(className),
|
|
@@ -372,7 +339,6 @@ function Picture(_ref) {
|
|
|
372
339
|
}), children === null || children === void 0 ? void 0 : children(renderOptions)]
|
|
373
340
|
});
|
|
374
341
|
}
|
|
375
|
-
|
|
376
342
|
Picture.defaultProps = {
|
|
377
343
|
width: '100%',
|
|
378
344
|
height: '100%',
|
package/es/Picture/utils.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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); }
|
|
1
2
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function
|
|
6
|
-
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
+
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); }
|
|
7
7
|
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
|
8
8
|
import { cloneDeep } from 'lodash-es';
|
|
9
9
|
export function customContextMenu(e) {
|
|
@@ -14,7 +14,6 @@ export function cloneImageNode(image) {
|
|
|
14
14
|
if (!image) {
|
|
15
15
|
return Promise.reject();
|
|
16
16
|
}
|
|
17
|
-
|
|
18
17
|
var newImage = image.cloneNode();
|
|
19
18
|
return new Promise(function (resolve, reject) {
|
|
20
19
|
newImage.addEventListener('load', function () {
|
|
@@ -27,14 +26,11 @@ export function cloneImageNode(image) {
|
|
|
27
26
|
}
|
|
28
27
|
export function getCaptureRect(rect, type) {
|
|
29
28
|
var rectArea = rect;
|
|
30
|
-
|
|
31
29
|
if (rectArea.length !== 4) {
|
|
32
30
|
console.error('区域有误 rect = "[x,y,w,h]"! ', rect);
|
|
33
31
|
return [0, 0, 0, 0];
|
|
34
32
|
}
|
|
35
|
-
|
|
36
33
|
var x, y, w, h;
|
|
37
|
-
|
|
38
34
|
switch (type) {
|
|
39
35
|
case 'body':
|
|
40
36
|
x = rectArea[0] - rectArea[2] * 0.2;
|
|
@@ -42,7 +38,6 @@ export function getCaptureRect(rect, type) {
|
|
|
42
38
|
w = rectArea[2] * 1.4;
|
|
43
39
|
h = rectArea[3] * 1.4;
|
|
44
40
|
break;
|
|
45
|
-
|
|
46
41
|
case 'nonVehicle':
|
|
47
42
|
case 'vehicle':
|
|
48
43
|
case 'thing':
|
|
@@ -51,7 +46,6 @@ export function getCaptureRect(rect, type) {
|
|
|
51
46
|
w = rectArea[2];
|
|
52
47
|
h = rectArea[3];
|
|
53
48
|
break;
|
|
54
|
-
|
|
55
49
|
default:
|
|
56
50
|
// face
|
|
57
51
|
x = rectArea[0] - rectArea[2] * 0.8;
|
|
@@ -60,27 +54,21 @@ export function getCaptureRect(rect, type) {
|
|
|
60
54
|
h = rectArea[3] * 3.2;
|
|
61
55
|
break;
|
|
62
56
|
}
|
|
63
|
-
|
|
64
57
|
return [x, y, w, h];
|
|
65
58
|
}
|
|
66
59
|
export function computedRectScale(_ref) {
|
|
67
60
|
var _ref2, _ref3;
|
|
68
|
-
|
|
69
61
|
var domImg = _ref.domImg,
|
|
70
|
-
|
|
71
|
-
|
|
62
|
+
rects = _ref.rects;
|
|
72
63
|
if (!domImg) {
|
|
73
64
|
return [];
|
|
74
65
|
}
|
|
75
|
-
|
|
76
66
|
if (domImg.naturalWidth === 0 || domImg.naturalHeight === 0) {
|
|
77
67
|
return [];
|
|
78
68
|
}
|
|
79
|
-
|
|
80
69
|
var _domImg$getBoundingCl = domImg.getBoundingClientRect(),
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
70
|
+
width = _domImg$getBoundingCl.width,
|
|
71
|
+
height = _domImg$getBoundingCl.height;
|
|
84
72
|
var scaleOptions = {
|
|
85
73
|
scaleX: (_ref2 = width / domImg.naturalWidth) !== null && _ref2 !== void 0 ? _ref2 : 1,
|
|
86
74
|
scaleY: (_ref3 = height / domImg.naturalHeight) !== null && _ref3 !== void 0 ? _ref3 : 1
|
|
@@ -104,29 +92,29 @@ export function computedRectScale(_ref) {
|
|
|
104
92
|
}
|
|
105
93
|
export function getImgSize(dom, img) {
|
|
106
94
|
var _layoutRect$width, _layoutRect$height;
|
|
107
|
-
|
|
108
95
|
var naturalWidth = img.naturalWidth,
|
|
109
|
-
|
|
96
|
+
naturalHeight = img.naturalHeight;
|
|
110
97
|
var layoutRect = dom.getBoundingClientRect();
|
|
111
98
|
var w = (_layoutRect$width = layoutRect === null || layoutRect === void 0 ? void 0 : layoutRect.width) !== null && _layoutRect$width !== void 0 ? _layoutRect$width : 0;
|
|
112
99
|
var h = (_layoutRect$height = layoutRect === null || layoutRect === void 0 ? void 0 : layoutRect.height) !== null && _layoutRect$height !== void 0 ? _layoutRect$height : 0;
|
|
113
100
|
var baseXOrY = naturalWidth > naturalHeight ? 'x' : 'y';
|
|
114
101
|
var x = 0;
|
|
115
102
|
var y = 0;
|
|
116
|
-
var size = [];
|
|
103
|
+
var size = [];
|
|
117
104
|
|
|
105
|
+
// 横图
|
|
118
106
|
if (baseXOrY === 'x') {
|
|
119
107
|
if (naturalWidth < w) {
|
|
120
108
|
// 图片小于容器
|
|
121
109
|
size[0] = naturalWidth;
|
|
122
110
|
size[1] = naturalHeight;
|
|
123
111
|
x = (w - naturalWidth) / 2;
|
|
124
|
-
y =
|
|
112
|
+
y = (h - naturalHeight) / 2;
|
|
125
113
|
} else {
|
|
126
114
|
// 图片大于容器
|
|
127
115
|
var imagescale = w / naturalWidth;
|
|
128
116
|
var imgHeight = imagescale * naturalHeight;
|
|
129
|
-
y =
|
|
117
|
+
y = (h - imgHeight) / 2;
|
|
130
118
|
size[0] = w;
|
|
131
119
|
size[1] = imgHeight;
|
|
132
120
|
}
|
|
@@ -135,19 +123,17 @@ export function getImgSize(dom, img) {
|
|
|
135
123
|
// 图片小于容器
|
|
136
124
|
size[0] = naturalWidth;
|
|
137
125
|
size[1] = naturalHeight;
|
|
138
|
-
x =
|
|
126
|
+
x = (w - naturalWidth) / 2;
|
|
139
127
|
y = (h - naturalHeight) / 2;
|
|
140
128
|
} else {
|
|
141
129
|
// 图片大于容器
|
|
142
130
|
var _imagescale = h / naturalHeight;
|
|
143
|
-
|
|
144
131
|
var imgWidth = _imagescale * naturalWidth;
|
|
145
|
-
x =
|
|
132
|
+
x = (w - imgWidth) / 2;
|
|
146
133
|
size[0] = imgWidth;
|
|
147
134
|
size[1] = h;
|
|
148
135
|
}
|
|
149
136
|
}
|
|
150
|
-
|
|
151
137
|
return {
|
|
152
138
|
x: x,
|
|
153
139
|
y: y,
|