@cloud-app-dev/vidc 1.0.50 → 2.0.0-alpha.3

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;

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

@@ -0,0 +1,83 @@
+import "antd/lib/tooltip/style";
+import _Tooltip from "antd/lib/tooltip";
+import React from 'react';
+import IconFont from '../../../IconFont';
+import FullScreen from '../../../FullScreen';
+import "./index.css";
+
+function Tools(_ref) {
+  var scale = _ref.scale,
+      imgDownload = _ref.imgDownload,
+      setScale = _ref.setScale,
+      setRotate = _ref.setRotate,
+      containerEle = _ref.containerEle,
+      resetPicture = _ref.resetPicture,
+      fullScreenChange = _ref.fullScreenChange;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "picture-tools"
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "left",
+    title: "\u590D\u4F4D"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: resetPicture
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-S_View_RotateMiddle"
+  }))), /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "left",
+    title: "\u653E\u5927"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setScale(0.2);
+    },
+    className: scale === 3 ? 'disabled' : ''
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-S_View_ZoomIn"
+  }))), /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "left",
+    title: "\u7F29\u5C0F"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setScale(-0.2);
+    },
+    className: scale === 1 ? 'disabled' : ''
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-S_View_ZoomOut"
+  }))), /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "left",
+    title: "\u5411\u5DE6"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setRotate(-90);
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-S_View_RotateLeft"
+  }))), /*#__PURE__*/React.createElement(_Tooltip, {
+    placement: "left",
+    title: "\u5411\u53F3"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setRotate(90);
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-S_View_RotateRight"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "picture-actions"
+  }, imgDownload && /*#__PURE__*/React.createElement("div", {
+    onClick: imgDownload
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-S_Edit_LoadDown"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FullScreen, {
+    className: "footer_window",
+    getContainer: function getContainer() {
+      return containerEle;
+    },
+    fullScreenChange: fullScreenChange
+  }, function (isFullscreen) {
+    return /*#__PURE__*/React.createElement(IconFont, {
+      title: !isFullscreen ? '全屏' : '退出全屏',
+      type: !isFullscreen ? 'icon-S_View_ScreenViewFull' : 'icon-S_View_ScreenViewExit'
+    });
+  }))));
+}
+
+export default Tools;

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

@@ -0,0 +1,6 @@
+interface IWheelScaleProps {
+    dom: HTMLElement;
+    setScale: (scale: number) => void;
+}
+declare function WheelScale({ dom, setScale }: IWheelScaleProps): JSX.Element;
+export default WheelScale;

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

@@ -0,0 +1,29 @@
+import React, { useCallback, useEffect } from 'react';
+
+function WheelScale(_ref) {
+  var dom = _ref.dom,
+      setScale = _ref.setScale;
+  var onWheel = useCallback(function (e) {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      setScale(e.deltaY > 0 ? -0.2 : 0.2);
+    }
+  }, [setScale]); //滚轮缩放
+
+  useEffect(function () {
+    if (!dom) {
+      return null;
+    }
+
+    dom.addEventListener('mousewheel', onWheel, {
+      passive: false
+    });
+    return function () {
+      return dom.removeEventListener('mousewheel', onWheel);
+    };
+  }, [dom, onWheel]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+
+export default WheelScale;

package/es/Picture/dragBound.d.ts

@@ -0,0 +1,5 @@
+import { PositionType } from './interface';
+export declare function computedBound(ele: HTMLElement, currentPosition: PositionType, scale: number, rotate: number): {
+    x: number;
+    y: number;
+};

package/es/Picture/dragBound.js

@@ -0,0 +1,77 @@
+export function computedBound(ele, currentPosition, scale, rotate) {
+  var data = currentPosition;
+  var eleRect = ele.getBoundingClientRect();
+  var isHorizontal = Math.abs(rotate) % 180 === 0;
+  var w = eleRect.width;
+  var h = eleRect.height;
+  var lx = 0,
+      ly = 0;
+
+  if (scale === 1 && isHorizontal) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  if (scale === 1 && !isHorizontal) {
+    lx = 0;
+    ly = (w - h) / 2;
+  } else {
+    //TODO 这是限制x区域，应该是使用原来高度的缩放大小来计算，
+    if (h * scale < w && !isHorizontal) {
+      //TODO 放大后竖向是 h*scale<w是 x = 0，
+      lx = 0;
+    } else {
+      //TODO 得到缩放后可移动区域 在减去误差 (w - h) / 2
+      lx = !isHorizontal ? Math.round(h * (scale - 1) / 2 - (w - h) / 2) : Math.round(w * (scale - 1) / 2);
+    } //TODO y的限制区域应该是原来宽度的限制区域计算后还要加上原始的（w-h）/2
+
+
+    ly = !isHorizontal ? Math.round(w * (scale - 1) / 2 + (w - h) / 2) : Math.round(h * (scale - 1) / 2);
+  }
+
+  var x = 0,
+      y = 0;
+
+  if (data.x >= 0 && data.x > lx) {
+    x = lx;
+  }
+
+  if (data.x >= 0 && data.x < lx) {
+    x = data.x;
+  }
+
+  if (data.x < 0 && data.x < -lx) {
+    x = -lx;
+  }
+
+  if (data.x < 0 && data.x > -lx) {
+    x = data.x;
+  }
+
+  if (data.y >= 0 && data.y > ly) {
+    y = ly;
+  }
+
+  if (data.y >= 0 && data.y < ly) {
+    y = data.y;
+  }
+
+  if (data.y < 0 && data.y < -ly) {
+    y = -ly;
+  }
+
+  if (data.y < 0 && data.y > -ly) {
+    y = data.y;
+  }
+
+  if (x !== data.x || y !== data.y) {
+    return {
+      x: x,
+      y: y
+    };
+  } else {
+    return undefined;
+  }
+}