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

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;

package/es/Picture/index.js

@@ -0,0 +1,344 @@
+import _resizeObserver from "@cloud-app-dev/utils/es/resizeObserver";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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); }
+
+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; }
+
+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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { __awaiter, __rest } from "tslib";
+import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import MoveContent from './component/MoveContent';
+import { getRectImagePath } from './loadCaptureRectImage';
+import { computedBound } from './dragBound';
+import { customContextMenu, computedRectScale, cloneImageNode } from './utils';
+import useDraw from './useDraw';
+import Tools from './component/Tools';
+import DrawRect from './component/DrawRect';
+import WheelScale from './component/WheelScale';
+import DefaultRects from './component/DefaultRects';
+import { isFunction } from 'lodash';
+import "./index.css";
+
+function Picture(_a) {
+  var _this = this;
+
+  var className = _a.className,
+      width = _a.width,
+      height = _a.height,
+      minHeight = _a.minHeight,
+      disabledDrag = _a.disabledDrag,
+      imagePath = _a.imagePath,
+      rects = _a.rects,
+      isOpenSelect = _a.isOpenSelect,
+      disabledDrawMenu = _a.disabledDrawMenu,
+      menus = _a.menus,
+      hasTool = _a.hasTool,
+      fullScreenEle = _a.fullScreenEle,
+      props = __rest(_a, ["className", "width", "height", "minHeight", "disabledDrag", "imagePath", "rects", "isOpenSelect", "disabledDrawMenu", "menus", "hasTool", "fullScreenEle"]);
+
+  var _useMemo = useMemo(function () {
+    return props;
+  }, [props]),
+      imgDownload = _useMemo.imgDownload,
+      onClickRect = _useMemo.onClickRect,
+      onMenuClick = _useMemo.onMenuClick,
+      children = _useMemo.children;
+
+  var _useState = useState({
+    x: 0,
+    y: 0,
+    rotate: 0,
+    scale: 1,
+    baseXOrY: 'x',
+    forceUpdateKey: Date.now(),
+    fullScreenStatus: false
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var layoutRef = useRef(null);
+  var moveActionRef = useRef(null);
+  var domImgRef = useRef(null);
+  var imageSourceRef = useRef(null);
+
+  var _useDraw = useDraw(layoutRef.current, isOpenSelect),
+      _useDraw2 = _slicedToArray(_useDraw, 2),
+      selectArea = _useDraw2[0],
+      isEnd = _useDraw2[1];
+
+  var loadImageSuccess = useCallback(function (flag) {
+    return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _domImgRef$current, width, height;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return cloneImageNode(domImgRef.current);
+
+            case 2:
+              imageSourceRef.current = _context.sent;
+              _domImgRef$current = domImgRef.current, width = _domImgRef$current.width, height = _domImgRef$current.height;
+              setState(function (old) {
+                return Object.assign(Object.assign({}, old), {
+                  forceUpdateKey: Date.now(),
+                  baseXOrY: width > height ? 'x' : 'y',
+                  fullScreenStatus: !!flag
+                });
+              });
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, []);
+  /**
+   * 设置图片缩放
+   */
+
+  var setScale = useCallback(function (changeValue) {
+    var currentValue = state.scale;
+
+    if (currentValue === 3 && changeValue > 0) {
+      return;
+    }
+
+    if (currentValue === 1 && changeValue < 0) {
+      return;
+    }
+
+    var scale = currentValue + changeValue;
+
+    if (scale > 3) {
+      scale = 3;
+    }
+
+    if (scale < 1) {
+      scale = 1;
+    }
+
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        scale: scale
+      });
+    });
+  }, [state.scale]);
+  /**
+   * 设置图谱旋转
+   */
+
+  var setRotate = useCallback(function (changeValue) {
+    var currentValue = state.rotate;
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        rotate: currentValue + changeValue
+      });
+    });
+  }, [state.rotate]);
+  /**
+   * 重置图片位置
+   */
+
+  var resetPicture = useCallback(function (event) {
+    event.stopPropagation(event);
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        scale: 1,
+        rotate: 0
+      });
+    });
+    moveActionRef.current.updatePosition({
+      x: 0,
+      y: 0
+    });
+  }, []);
+  /**
+   * 拖拽更新位置
+   */
+
+  var onDragChange = useCallback(function (_ref) {
+    var x = _ref.x,
+        y = _ref.y;
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        x: x,
+        y: y
+      });
+    });
+  }, []);
+  /**
+   * 拖拽结束更新位置，计算边界
+   */
+
+  var onDragEnd = useCallback(function (_, currrentPosition) {
+    var scale = state.scale,
+        rotate = state.rotate;
+
+    if (!layoutRef.current) {
+      return;
+    }
+
+    var position = computedBound(layoutRef.current, currrentPosition, scale, rotate);
+
+    if (position) {
+      moveActionRef.current.updatePosition(position);
+    }
+  }, [state]);
+  /**
+   * 获取结构化的小图(base64)
+   */
+
+  var getRectImage = useCallback(function (rect) {
+    var scale = state.scale,
+        rotate = state.rotate,
+        x = state.x,
+        y = state.y;
+    return getRectImagePath(imageSourceRef.current, domImgRef.current, rect, {
+      scale: scale,
+      rotate: rotate,
+      x: x,
+      y: y
+    });
+  }, [state]);
+  useEffect(function () {
+    var timer;
+
+    var fn = function fn() {
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        setState(function (old) {
+          return Object.assign(Object.assign({}, old), {
+            forceUpdateKey: Date.now()
+          });
+        });
+      }, 200);
+    };
+
+    var dom = layoutRef.current;
+
+    _resizeObserver.createResizeObserver(dom, fn);
+
+    return function () {
+      _resizeObserver.unResizeObserver(dom, fn);
+    };
+  }, []); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var scaleRects = useMemo(function () {
+    return computedRectScale({
+      imageSource: imageSourceRef.current,
+      domImg: domImgRef.current,
+      rects: rects
+    });
+  }, [rects, state.forceUpdateKey]);
+  var isEmpty = useMemo(function () {
+    return selectArea.includes(0);
+  }, [selectArea]);
+
+  var _useMemo2 = useMemo(function () {
+    return state;
+  }, [state]),
+      x = _useMemo2.x,
+      y = _useMemo2.y,
+      scale = _useMemo2.scale,
+      rotate = _useMemo2.rotate,
+      baseXOrY = _useMemo2.baseXOrY;
+
+  var renderOptions = {
+    isEnd: isEnd,
+    isOpenSelect: isOpenSelect,
+    selectArea: selectArea,
+    getRectImage: getRectImage,
+    containerEle: layoutRef.current,
+    fullScreenStatus: state.fullScreenStatus
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "picture-view-layout ".concat(className),
+    style: {
+      width: width || '100%',
+      height: height || '100%',
+      minHeight: minHeight
+    },
+    ref: layoutRef,
+    onContextMenu: customContextMenu
+  }, /*#__PURE__*/React.createElement(MoveContent, {
+    className: "picture-move-layout",
+    disabled: isOpenSelect || disabledDrag,
+    position: {
+      x: x,
+      y: y
+    },
+    ref: moveActionRef,
+    onDragChange: onDragChange,
+    onDragEnd: onDragEnd,
+    style: {
+      minHeight: minHeight
+    },
+    size: {
+      width: width ? 'max-content' : '100%',
+      height: height ? 'max-content' : '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "scale(".concat(scale, ") rotate(").concat(rotate, "deg)")
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    ref: domImgRef,
+    crossOrigin: "anonymous",
+    style: {
+      maxWidth: baseXOrY === 'x' ? width || '100%' : 'unset',
+      maxHeight: baseXOrY === 'x' ? 'unset' : height || '100%'
+    },
+    draggable: false,
+    src: imagePath,
+    key: imagePath,
+    onLoad: loadImageSuccess
+  }), !isEmpty ? /*#__PURE__*/React.createElement(DrawRect, {
+    rect: selectArea,
+    onMenuClick: onMenuClick,
+    getRectImage: getRectImage,
+    menus: menus,
+    canRenderMenu: isEnd && !disabledDrawMenu && menus.length > 0,
+    containerDom: layoutRef.current
+  }) : !isOpenSelect ? /*#__PURE__*/React.createElement(DefaultRects, {
+    rects: scaleRects,
+    onClickRect: onClickRect,
+    getRectImage: getRectImage,
+    containerDom: layoutRef.current
+  }) : null)), hasTool && /*#__PURE__*/React.createElement(Tools, {
+    setScale: setScale,
+    setRotate: setRotate,
+    scale: scale,
+    containerEle: fullScreenEle || layoutRef.current,
+    resetPicture: resetPicture,
+    imgDownload: imgDownload,
+    fullScreenChange: loadImageSuccess
+  }), /*#__PURE__*/React.createElement(WheelScale, {
+    setScale: setScale,
+    dom: layoutRef.current
+  })), isFunction(children) && children(renderOptions));
+}
+
+Picture.defaultProps = {
+  className: '',
+  minHeight: 300,
+  disabledDrag: false,
+  isOpenSelect: false,
+  disabledDrawMenu: false,
+  menus: [],
+  rects: [],
+  hasTool: true
+};
+export default Picture;

package/es/Picture/interface.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+export type MenuRectType = {
+  pathname: string;
+  title: string;
+  icon: string;
+};
+
+export type TagItemType = {
+  value: string;
+  label: string;
+  icon: string;
+  tagLabel?: string;
+};
+
+export type ImageType = 'face' | 'body' | 'nonVehicle' | 'vehicle' | 'thing';
+
+export type RectType = {
+  rect: Array<number>;
+  type: ImageType;
+  needExpand?: boolean;
+  imgId?: string;
+  area?: number;
+  tags?: TagItemType[];
+  imgUrl?: string;
+  smId?: string;
+  isDefault?: boolean;
+  feature?: string;
+  dupId?: string;
+  lowQuality?: boolean;
+};
+
+export type PositionType = {
+  x: number;
+  y: number;
+};
+
+export type DeviationType = {
+  offsetX: number;
+  offsetY: number;
+  width: number | string;
+  height: number | string;
+};
+
+export type SizeType = {
+  width: number | string;
+  height: number | string;
+};
+
+export interface IPictureProps {
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+  minHeight?: number | string;
+  disabledDrag?: false;
+  imagePath: string;
+  rects?: RectType[];
+  isOpenSelect?: false;
+  disabledDrawMenu?: false;
+  menus?: MenuRectType[];
+  imgDownload?: () => void;
+  onClickRect?: (item: RectType & { base64: string }) => void;
+  onMenuClick?: (item: MenuRectType & { base64: string }) => void;
+  children?: (option: any) => void;
+  hasTool?: boolean;
+  fullScreenEle?: Element;
+}

package/es/Picture/loadCaptureRectImage.d.ts

@@ -0,0 +1,8 @@
+import { ImageType } from './interface';
+export declare function loadCaptureRectImage(image: HTMLImageElement, rect: number[], imageType: ImageType): Promise<string>;
+export declare function getRectImagePath(sourceImage: HTMLImageElement, cuurentImage: HTMLImageElement, rect: number[], options?: {
+    scale: number;
+    rotate: number;
+    x: number;
+    y: number;
+}): string;