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

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;
+};

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

@@ -0,0 +1,19 @@
+export function getPosition(obj) {
+  //获取某元素以浏览器左上角为原点的坐标
+  var t = obj.offsetTop; //获取该元素对应父容器的上边距
+
+  var l = obj.offsetLeft; //对应父容器的上边距
+  //判断是否有父容器，如果存在则累加其边距
+
+  while (obj = obj.offsetParent) {
+    //等效 obj = obj.offsetParent;while (obj != undefined)
+    t += obj.offsetTop; //叠加父容器的上边距
+
+    l += obj.offsetLeft; //叠加父容器的左边距
+  }
+
+  return {
+    left: l,
+    top: t
+  };
+}

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

@@ -0,0 +1,31 @@
+.select-rect-menu-layout {
+  position: absolute;
+  font-size: var(--fs-small);
+  width: 105px;
+  overflow: hidden;
+}
+.select-rect-menu-layout .menu-action-item {
+  padding: 4px 10px;
+  background: #ffffff;
+  margin-bottom: 4px;
+  border-radius: 15px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.65);
+  white-space: nowrap;
+}
+.select-rect-menu-layout .menu-action-item .anticon {
+  padding-right: 2px;
+  font-size: 16px;
+  color: #89b;
+}
+.select-rect-menu-layout .menu-action-item:hover {
+  background: #ffaa00;
+  color: #fff;
+  cursor: pointer;
+}
+.select-rect-menu-layout .menu-action-item:hover .anticon {
+  color: #fff;
+}
+.select-rect-menu-layout .menu-action-item:last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,13 @@
+import './index.less';
+import { MenuRectType } from 'src/Picture/interface';
+interface IRectMenuProps {
+    x: number;
+    y: number;
+    menus: MenuRectType[];
+    containerDom: HTMLDivElement;
+    onMenuClick: (options: MenuRectType & {
+        base64: string;
+    }) => void;
+}
+declare function RectMenu({ x, y, menus, containerDom, onMenuClick }: IRectMenuProps): JSX.Element;
+export default RectMenu;

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

@@ -0,0 +1,81 @@
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
+import IconFont from '../../../IconFont';
+import { computedMenuPosition } from './utils';
+import "./index.css";
+var MENU_WIDTH = 110;
+var MENU_HEIGHT = 30;
+
+function RectMenu(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      menus = _ref.menus,
+      containerDom = _ref.containerDom,
+      onMenuClick = _ref.onMenuClick;
+
+  var _useMemo = useMemo(function () {
+    return containerDom.getBoundingClientRect();
+  }, [containerDom]),
+      width = _useMemo.width,
+      height = _useMemo.height;
+
+  var size = useMemo(function () {
+    return {
+      w: MENU_WIDTH,
+      h: MENU_HEIGHT * menus.length
+    };
+  }, [menus.length]);
+  var position = useMemo(function () {
+    return computedMenuPosition({
+      width: width,
+      height: height,
+      size: size,
+      position: [x, y]
+    });
+  }, [height, size, width, x, y]);
+  var domRef = useRef(null);
+  var handleCancelB = useCallback(function (e) {
+    return e.stopPropagation();
+  }, []); //防止click事件冒泡到查看器
+
+  useEffect(function () {
+    var dom = domRef.current;
+
+    if (dom) {
+      dom.addEventListener('mousedown', handleCancelB, false);
+      dom.addEventListener('mousemove', handleCancelB, false);
+      dom.addEventListener('mouseup', handleCancelB, false);
+    }
+
+    return function () {
+      if (dom) {
+        dom.removeEventListener('mousedown', handleCancelB, false);
+        dom.removeEventListener('mousemove', handleCancelB, false);
+        dom.removeEventListener('mouseup', handleCancelB, false);
+      }
+    };
+  }, [handleCancelB]);
+  var onClickMenu = useCallback(function (e, item) {
+    e.stopPropagation();
+    onMenuClick && onMenuClick(item);
+  }, [onMenuClick]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "select-rect-menu-layout",
+    style: {
+      left: position.x,
+      top: position.y
+    },
+    ref: domRef
+  }, menus.map(function (v) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "menu-action-item",
+      key: v.pathname,
+      onClick: function onClick(e) {
+        return onClickMenu(e, v);
+      }
+    }, /*#__PURE__*/React.createElement(IconFont, {
+      type: v.icon
+    }), v.title);
+  }));
+}
+
+export default RectMenu;

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

@@ -0,0 +1,12 @@
+export declare function computedMenuPosition({ width, height, position, size }: {
+    width: number;
+    height: number;
+    position: number[];
+    size: {
+        w: number;
+        h: number;
+    };
+}): {
+    x: number;
+    y: number;
+};

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

@@ -0,0 +1,22 @@
+export function computedMenuPosition(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      position = _ref.position,
+      size = _ref.size;
+  var x, y;
+  x = position[0];
+  y = position[1];
+
+  if (width - x < size.w) {
+    x = width - size.w;
+  }
+
+  if (height - y < size.h) {
+    y = height - size.h;
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+}

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

@@ -0,0 +1,42 @@
+.picture-tools {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background: #fff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+}
+.picture-tools.actions-change-rotate {
+  bottom: 150px;
+}
+.picture-tools > div {
+  width: 30px;
+  height: 25px;
+  line-height: 25px;
+  text-align: center;
+  cursor: pointer;
+}
+.picture-tools > div.disabled {
+  cursor: not-allowed;
+  color: #999;
+}
+.picture-tools > div.disabled .anticon {
+  color: #999;
+}
+.picture-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+.picture-actions > div {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  background: #fff;
+  float: left;
+  text-align: center;
+  margin-left: 4px;
+  cursor: pointer;
+}
+.picture-actions .tools-screen-layer .anticon {
+  padding-right: 0;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+interface IToolsProps {
+    scale: number;
+    imgDownload: () => void;
+    setScale: (scale: number) => void;
+    setRotate: (rotate: number) => void;
+    containerEle: HTMLDivElement;
+    resetPicture: (event: React.MouseEvent) => void;
+    fullScreenChange: (flag: boolean) => void;
+}
+declare function Tools({ scale, imgDownload, setScale, setRotate, containerEle, resetPicture, fullScreenChange }: IToolsProps): JSX.Element;
+export default Tools;