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

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

package/es/Picture/index.css

@@ -0,0 +1,12 @@
+.picture-view-layout {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  min-height: 300px;
+}
+.picture-view-layout .picture-move-layout > div {
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s;
+  overflow: hidden;
+}

package/es/Picture/index.d.ts

@@ -0,0 +1,16 @@
+import { IPictureProps } from './interface';
+import './index.less';
+declare function Picture({ className, width, height, minHeight, disabledDrag, imagePath, rects, isOpenSelect, disabledDrawMenu, menus, hasTool, fullScreenEle, ...props }: IPictureProps): JSX.Element;
+declare namespace Picture {
+    var defaultProps: {
+        className: string;
+        minHeight: number;
+        disabledDrag: boolean;
+        isOpenSelect: boolean;
+        disabledDrawMenu: boolean;
+        menus: any[];
+        rects: any[];
+        hasTool: boolean;
+    };
+}
+export default Picture;