@cloud-app-dev/vidc 2.0.0-alpha.1 → 2.0.0-alpha.2

package/es/Picture/component/DefaultRects/index.css

@@ -0,0 +1,247 @@
+.rect-item-face-wrapper .rect-item {
+  border-color: rgba(255, 95, 87, 0.6);
+}
+.rect-item-face-wrapper .rect-item .border-top-decorator::before {
+  border-top-color: #ff5f57;
+  border-left-color: #ff5f57;
+}
+.rect-item-face-wrapper .rect-item .border-top-decorator::after {
+  border-top-color: #ff5f57;
+  border-right-color: #ff5f57;
+}
+.rect-item-face-wrapper .rect-item .border-bottom-decorator::before {
+  border-bottom-color: #ff5f57;
+  border-left-color: #ff5f57;
+}
+.rect-item-face-wrapper .rect-item .border-bottom-decorator::after {
+  border-bottom-color: #ff5f57;
+  border-right-color: #ff5f57;
+}
+.rect-item-face-wrapper .rect-item:hover {
+  border-color: #ff5f57;
+  box-shadow: inset 0 0 24px 0 rgba(255, 95, 87, 0.4);
+}
+.rect-item-face-wrapper .rect-info-list-wrapper .data-type .data-tag {
+  border: 1px solid #FF5F57;
+  background: rgba(255, 95, 87, 0.6);
+}
+.rect-item-body-wrapper .rect-item {
+  border-color: rgba(255, 187, 34, 0.6);
+}
+.rect-item-body-wrapper .rect-item .border-top-decorator::before {
+  border-top-color: #ffbb22;
+  border-left-color: #ffbb22;
+}
+.rect-item-body-wrapper .rect-item .border-top-decorator::after {
+  border-top-color: #ffbb22;
+  border-right-color: #ffbb22;
+}
+.rect-item-body-wrapper .rect-item .border-bottom-decorator::before {
+  border-bottom-color: #ffbb22;
+  border-left-color: #ffbb22;
+}
+.rect-item-body-wrapper .rect-item .border-bottom-decorator::after {
+  border-bottom-color: #ffbb22;
+  border-right-color: #ffbb22;
+}
+.rect-item-body-wrapper .rect-item:hover {
+  border-color: #ffbb22;
+  box-shadow: inset 0 0 24px 0 rgba(255, 187, 34, 0.4);
+}
+.rect-item-body-wrapper .rect-info-list-wrapper .data-type .data-tag {
+  border: 1px solid #FFBB22;
+  background: rgba(255, 187, 34, 0.6);
+}
+.rect-item-vehicle-wrapper .rect-item {
+  border-color: rgba(68, 170, 255, 0.6);
+}
+.rect-item-vehicle-wrapper .rect-item .border-top-decorator::before {
+  border-top-color: #44aaff;
+  border-left-color: #44aaff;
+}
+.rect-item-vehicle-wrapper .rect-item .border-top-decorator::after {
+  border-top-color: #44aaff;
+  border-right-color: #44aaff;
+}
+.rect-item-vehicle-wrapper .rect-item .border-bottom-decorator::before {
+  border-bottom-color: #44aaff;
+  border-left-color: #44aaff;
+}
+.rect-item-vehicle-wrapper .rect-item .border-bottom-decorator::after {
+  border-bottom-color: #44aaff;
+  border-right-color: #44aaff;
+}
+.rect-item-vehicle-wrapper .rect-item:hover {
+  border-color: #44aaff;
+  box-shadow: inset 0 0 24px 0 rgba(68, 170, 255, 0.4);
+}
+.rect-item-vehicle-wrapper .rect-info-list-wrapper .data-type .data-tag {
+  border: 1px solid #44aaff;
+  background: rgba(68, 170, 255, 0.6);
+}
+.rect-item-nonVehicle-wrapper .rect-item {
+  border-color: rgba(80, 233, 178, 0.6);
+}
+.rect-item-nonVehicle-wrapper .rect-item .border-top-decorator::before {
+  border-top-color: #50e9b2;
+  border-left-color: #50e9b2;
+}
+.rect-item-nonVehicle-wrapper .rect-item .border-top-decorator::after {
+  border-top-color: #50e9b2;
+  border-right-color: #50e9b2;
+}
+.rect-item-nonVehicle-wrapper .rect-item .border-bottom-decorator::before {
+  border-bottom-color: #50e9b2;
+  border-left-color: #50e9b2;
+}
+.rect-item-nonVehicle-wrapper .rect-item .border-bottom-decorator::after {
+  border-bottom-color: #50e9b2;
+  border-right-color: #50e9b2;
+}
+.rect-item-nonVehicle-wrapper .rect-item:hover {
+  border-color: #50e9b2;
+  box-shadow: inset 0 0 24px 0 rgba(80, 233, 178, 0.4);
+}
+.rect-item-nonVehicle-wrapper .rect-info-list-wrapper .data-type .data-tag {
+  border: 1px solid #50e9b2;
+  background: rgba(80, 233, 178, 0.6);
+}
+.rect-item-thing-wrapper .rect-item {
+  border-color: rgba(185, 70, 210, 0.6);
+}
+.rect-item-thing-wrapper .rect-item .border-top-decorator::before {
+  border-top-color: #b946d2;
+  border-left-color: #b946d2;
+}
+.rect-item-thing-wrapper .rect-item .border-top-decorator::after {
+  border-top-color: #b946d2;
+  border-right-color: #b946d2;
+}
+.rect-item-thing-wrapper .rect-item .border-bottom-decorator::before {
+  border-bottom-color: #b946d2;
+  border-left-color: #b946d2;
+}
+.rect-item-thing-wrapper .rect-item .border-bottom-decorator::after {
+  border-bottom-color: #b946d2;
+  border-right-color: #b946d2;
+}
+.rect-item-thing-wrapper .rect-item:hover {
+  border-color: #b946d2;
+  box-shadow: inset 0 0 24px 0 rgba(185, 70, 210, 0.4);
+}
+.rect-item-thing-wrapper .rect-info-list-wrapper .data-type .data-tag {
+  border: 1px solid #b946d2;
+  background: rgba(185, 70, 210, 0.6);
+}
+.rect-item {
+  position: absolute;
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+}
+.rect-item .border-top-decorator,
+.rect-item .border-bottom-decorator {
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+}
+.rect-item .border-top-decorator::before,
+.rect-item .border-bottom-decorator::before,
+.rect-item .border-top-decorator::after,
+.rect-item .border-bottom-decorator::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  border: 2px solid transparent;
+}
+.rect-item .border-top-decorator::before,
+.rect-item .border-bottom-decorator::before {
+  float: left;
+  margin-left: -1px;
+}
+.rect-item .border-top-decorator::after,
+.rect-item .border-bottom-decorator::after {
+  float: right;
+  margin-right: -1px;
+}
+.rect-item .border-top-decorator {
+  top: 0;
+}
+.rect-item .border-top-decorator::before,
+.rect-item .border-top-decorator::after {
+  margin-top: -1px;
+}
+.rect-item .border-bottom-decorator {
+  bottom: 0;
+}
+.rect-item .border-bottom-decorator::before,
+.rect-item .border-bottom-decorator::after {
+  margin-bottom: -1px;
+}
+.rect-item:hover + .rect-info-list-wrapper {
+  display: block;
+}
+.rect-info-list-wrapper {
+  display: none;
+  background: rgba(16, 21, 36, 0.8);
+  position: absolute;
+  z-index: 11;
+  border: 1px solid transparent;
+  padding-top: 5px;
+  /*高低质量*/
+}
+.rect-info-list-wrapper .data-type {
+  padding: 0 5px;
+  color: #fff;
+}
+.rect-info-list-wrapper .data-type .data-tag {
+  padding: 4px;
+  font-size: 12px;
+  margin-right: 4px;
+}
+.rect-info-list-wrapper .data-type .data-tag .anticon {
+  margin-right: 4px;
+  color: #fff;
+}
+.rect-info-list-wrapper .rect-card-corner {
+  position: absolute;
+  top: -9px;
+  left: -1px;
+}
+.rect-info-list-wrapper .rect-info-arrow {
+  position: absolute;
+  display: block;
+  background: transparent;
+  border-style: solid;
+  border-width: 4px;
+  border-color: rgba(16, 21, 36, 0.8);
+  transform: rotate(45deg);
+  left: -4px;
+  top: 6px;
+}
+.rect-info-list-wrapper .rect-info-list {
+  height: 100%;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
+.rect-info-list-wrapper .rect-info-list .info-item {
+  padding: 3px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 18px;
+  font-size: var(--fs-small);
+  color: #fff;
+}
+.rect-info-list-wrapper .rect-info-list .info-item .anticon {
+  position: relative;
+  top: 1px;
+  cursor: default;
+  font-size: 16px;
+  color: #fff;
+  padding-right: 4px;
+}
+.rect-info-list-wrapper .rect-info-list .info-item .item-label {
+  margin: 0 4px;
+}

package/es/Picture/component/DefaultRects/index.d.ts

@@ -0,0 +1,12 @@
+import { RectType } from '../../interface';
+import './index.less';
+interface IDefaultRectsProps {
+    rects: RectType[];
+    containerDom: HTMLDivElement;
+    onClickRect?: (item: RectType & {
+        base64: string;
+    }) => void;
+    getRectImage: (rect: number[]) => void;
+}
+declare function DefaultRects({ rects, containerDom, onClickRect, getRectImage }: IDefaultRectsProps): JSX.Element;
+export default DefaultRects;

package/es/Picture/component/DefaultRects/index.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useMemo } from 'react';
+import RectInfo from './RectInfo';
+import { computedZIndex } from './utils';
+import "./index.css";
+
+function DefaultRects(_ref) {
+  var rects = _ref.rects,
+      containerDom = _ref.containerDom,
+      onClickRect = _ref.onClickRect,
+      getRectImage = _ref.getRectImage;
+  var renderRects = useMemo(function () {
+    return computedZIndex(rects);
+  }, [rects]);
+  var rectClick = useCallback(function (e, item) {
+    e.stopPropagation();
+    onClickRect && onClickRect(Object.assign(Object.assign({}, item), {
+      base64: getRectImage(item.rect)
+    }));
+  }, [getRectImage, onClickRect]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRects.map(function (v, k) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "rect-item-wrapper rect-item-".concat(v.type, "-wrapper"),
+      key: k
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'rect-item',
+      onDoubleClick: function onDoubleClick(e) {
+        return rectClick(e, v);
+      },
+      style: {
+        left: v.rect[0],
+        top: v.rect[1],
+        width: v.rect[2],
+        height: v.rect[3],
+        zIndex: k
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "border-top-decorator"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "border-bottom-decorator"
+    })), Array.isArray(v.tags) && v.tags.length > 0 && /*#__PURE__*/React.createElement(RectInfo, {
+      item: v,
+      containerDom: containerDom
+    }));
+  }));
+}
+
+export default DefaultRects;

package/es/Picture/component/DefaultRects/utils.d.ts

@@ -0,0 +1,2 @@
+import { RectType } from '../../interface';
+export declare function computedZIndex(rects: RectType[]): RectType[];

package/es/Picture/component/DefaultRects/utils.js

@@ -0,0 +1,11 @@
+export function computedZIndex(rects) {
+  var areas = rects.map(function (v) {
+    var width = v.rect[2];
+    var height = v.rect[3];
+    v.area = width * height;
+    return v;
+  });
+  return areas.sort(function (a, b) {
+    return b.area - a.area;
+  });
+}

package/es/Picture/component/DrawRect/index.css

@@ -0,0 +1,8 @@
+.select-rect-layout {
+  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.4);
+  border: 1px solid;
+  border-image-source: url('data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==');
+  border-image-repeat: repeat;
+  border-image-slice: 1;
+  position: absolute;
+}

package/es/Picture/component/DrawRect/index.d.ts

@@ -0,0 +1,14 @@
+import { MenuRectType } from '../../interface';
+import './index.less';
+interface IDrawRectProps {
+    rect: number[];
+    canRenderMenu?: boolean;
+    containerDom: HTMLDivElement;
+    onMenuClick: (options: MenuRectType & {
+        base64: string;
+    }) => void;
+    menus: MenuRectType[];
+    getRectImage: (rect: number[]) => void;
+}
+declare function DrawRect({ rect, canRenderMenu, containerDom, onMenuClick, menus, getRectImage }: IDrawRectProps): JSX.Element;
+export default DrawRect;

package/es/Picture/component/DrawRect/index.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useMemo } from 'react';
+import RectMenu from '../RectMenu';
+import "./index.css";
+
+function DrawRect(_ref) {
+  var _ref$rect = _ref.rect,
+      rect = _ref$rect === void 0 ? [] : _ref$rect,
+      canRenderMenu = _ref.canRenderMenu,
+      containerDom = _ref.containerDom,
+      onMenuClick = _ref.onMenuClick,
+      menus = _ref.menus,
+      getRectImage = _ref.getRectImage;
+  var x = useMemo(function () {
+    return rect[0] + rect[2];
+  }, [rect]);
+  var y = useMemo(function () {
+    return rect[1] + rect[3];
+  }, [rect]);
+  var onMenuClickAction = useCallback(function (item) {
+    onMenuClick && onMenuClick(Object.assign(Object.assign({}, item), {
+      base64: getRectImage(rect)
+    }));
+  }, [getRectImage, onMenuClick, rect]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "select-rect-layout",
+    style: {
+      left: rect[0],
+      top: rect[1],
+      width: rect[2],
+      height: rect[3]
+    }
+  }), canRenderMenu && /*#__PURE__*/React.createElement(RectMenu, {
+    x: x,
+    y: y,
+    containerDom: containerDom,
+    onMenuClick: onMenuClickAction,
+    menus: menus
+  }));
+}
+
+export default DrawRect;

package/es/Picture/component/MoveContent/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { DeviationType, PositionType, SizeType } from '../../interface';
+import './index.less';
+interface MoveContentProps {
+    children: React.ReactNode;
+    onDrag?: (e: React.MouseEvent, position: PositionType) => void;
+    onDragChange?: (position: PositionType) => void;
+    onDragEnd?: (e: React.MouseEvent, position: PositionType) => void;
+    position?: PositionType;
+    size?: SizeType;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare class MoveContentView extends React.Component<MoveContentProps> {
+    position: PositionType;
+    DA: PositionType;
+    moveEvents: any[];
+    isDrag: boolean;
+    dragRef: React.RefObject<HTMLElement>;
+    deviation: DeviationType;
+    constructor(props: MoveContentProps);
+    componentDidMount(): void;
+    initDomInfo(info?: SizeType): void;
+    componentWillUnmount(): void;
+    bindMoveEvent(): void;
+    removeMoveEvent(): void;
+    onMouseMove: (event: React.MouseEvent) => void;
+    updatePosition: ({ x, y }: PositionType) => void;
+    updateSize: ({ width, height }: SizeType) => void;
+    onMouseUp: (event: React.MouseEvent) => void;
+    onMouseDown(event: React.MouseEvent): void;
+    getMouseXY(e: MouseEvent): {
+        x: number;
+        y: number;
+    };
+    render(): JSX.Element;
+}
+export default MoveContentView;

package/es/Picture/component/MoveContent/index.js

@@ -0,0 +1,240 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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); }; }
+
+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); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+import React from 'react';
+import addEventListener from 'add-dom-event-listener';
+import { getPosition } from './utils';
+import "./index.css";
+
+var MoveContentView = /*#__PURE__*/function (_React$Component) {
+  _inherits(MoveContentView, _React$Component);
+
+  var _super = _createSuper(MoveContentView);
+
+  function MoveContentView(props) {
+    var _this;
+
+    _classCallCheck(this, MoveContentView);
+
+    _this = _super.call(this, props);
+    _this.dragRef = /*#__PURE__*/React.createRef();
+
+    _this.onMouseMove = function (event) {
+      if (_this.isDrag) {
+        // let maxX, maxY;
+        var moveX, moveY;
+
+        var _this$getMouseXY = _this.getMouseXY(event),
+            x = _this$getMouseXY.x,
+            y = _this$getMouseXY.y;
+
+        moveX = x - _this.deviation.offsetX;
+        moveY = y - _this.deviation.offsetY; // 计算可移动位置的大小， 保证元素不会超过可移动范围
+        // maxX = document.documentElement.clientWidth - this.deviation.width;
+        // maxY = document.documentElement.clientHeight - this.deviation.height;
+        // min方法保证不会超过右边界，max保证不会超过左边界
+        // moveX = Math.min(Math.max(0, moveX), maxX);
+        // moveY = Math.min(Math.max(0, moveY), maxY);
+
+        var position = {
+          x: moveX,
+          y: moveY
+        };
+
+        if (_this.props.onDrag) {
+          _this.props.onDrag(event, position);
+        } else {
+          _this.updatePosition(position);
+        }
+      }
+    };
+
+    _this.updatePosition = function (_ref) {
+      var x = _ref.x,
+          y = _ref.y;
+      _this.position = {
+        x: x,
+        y: y
+      };
+
+      _this.forceUpdate();
+
+      _this.props.onDragChange && _this.props.onDragChange({
+        x: x,
+        y: y
+      });
+    };
+
+    _this.updateSize = function (_ref2) {
+      var width = _ref2.width,
+          height = _ref2.height;
+
+      _this.initDomInfo({
+        width: width,
+        height: height
+      });
+    };
+
+    _this.onMouseUp = function (event) {
+      _this.isDrag = false;
+
+      _this.removeMoveEvent();
+
+      if (_this.props.onDragEnd) {
+        _this.props.onDragEnd(event, _this.position);
+      }
+    };
+
+    _this.isDrag = false;
+    _this.DA = {
+      x: 0,
+      y: 0
+    };
+    _this.moveEvents = [];
+    _this.deviation = {
+      offsetX: 0,
+      offsetY: 0,
+      width: 0,
+      height: 0
+    };
+    return _this;
+  }
+
+  _createClass(MoveContentView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.initDomInfo();
+    }
+  }, {
+    key: "initDomInfo",
+    value: function initDomInfo(info) {
+      var _a;
+
+      var offset = getPosition((_a = this.dragRef) === null || _a === void 0 ? void 0 : _a.current);
+      var size = this.dragRef.current.getBoundingClientRect();
+      this.deviation = {
+        offsetX: offset.left,
+        offsetY: offset.top,
+        width: info ? info.width : size.width,
+        height: info ? info.height : size.height
+      };
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.removeMoveEvent();
+      this.isDrag = null;
+      this.dragRef = null;
+      this.moveEvents = null;
+      this.deviation = null;
+      this.moveEvents = null;
+    }
+  }, {
+    key: "bindMoveEvent",
+    value: function bindMoveEvent() {
+      this.moveEvents = [addEventListener(document.body, 'mousemove', this.onMouseMove), addEventListener(document.body, 'mouseup', this.onMouseUp)];
+    }
+  }, {
+    key: "removeMoveEvent",
+    value: function removeMoveEvent() {
+      this.moveEvents && this.moveEvents.forEach(function (v) {
+        v.remove && v.remove();
+      });
+      this.moveEvents = [];
+    }
+  }, {
+    key: "onMouseDown",
+    value: function onMouseDown(event) {
+      var _this$getMouseXY2 = this.getMouseXY(event.nativeEvent),
+          x = _this$getMouseXY2.x,
+          y = _this$getMouseXY2.y;
+
+      this.deviation.offsetX = x - this.position.x;
+      this.deviation.offsetY = y - this.position.y;
+      this.isDrag = true;
+      this.bindMoveEvent();
+    } // 函数用于获取鼠标的位置
+
+  }, {
+    key: "getMouseXY",
+    value: function getMouseXY(e) {
+      var x = 0,
+          y = 0;
+      e = e || window.event;
+
+      if (e.pageX) {
+        x = e.pageX;
+        y = e.pageY;
+      } else {
+        x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
+        y = e.clientY + document.body.scrollTop - document.body.clientTop;
+      }
+
+      return {
+        x: x,
+        y: y
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var x, y;
+
+      if (this.props.onDrag) {
+        x = this.props.position.x;
+        y = this.props.position.y;
+      } else {
+        x = this.position.x;
+        y = this.position.y;
+      }
+
+      var _this$props = this.props,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? '' : _this$props$className,
+          _this$props$disabled = _this$props.disabled,
+          disabled = _this$props$disabled === void 0 ? false : _this$props$disabled,
+          _this$props$size = _this$props.size,
+          size = _this$props$size === void 0 ? {
+        width: '100%',
+        height: '100%'
+      } : _this$props$size;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: this.dragRef,
+        className: "drag-move-Content ".concat(className),
+        style: {
+          transform: "translate(".concat(x, "px,").concat(y, "px)"),
+          width: size.width,
+          height: size.height
+        },
+        onMouseDown: function onMouseDown(event) {
+          return !disabled && _this2.onMouseDown(event);
+        }
+      }, this.props.children);
+    }
+  }]);
+
+  return MoveContentView;
+}(React.Component);
+
+export default MoveContentView;

package/es/Picture/component/MoveContent/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getPosition(obj: any): {
+    left: any;
+    top: any;
+};