@cloud-app-dev/vidc 4.0.20 → 4.0.21

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

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

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: any;
+    y: any;
+};

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

@@ -0,0 +1,19 @@
+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.d.ts

@@ -0,0 +1,12 @@
+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;
+}
+declare function Tools({ scale, imgDownload, setScale, setRotate, containerEle, resetPicture }: IToolsProps): React.JSX.Element;
+export default Tools;

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

@@ -0,0 +1,73 @@
+import { Tooltip } from 'antd';
+import React from 'react';
+import FullScreen from "../../../FullScreen";
+import IconFont from "../../../Player/iconfont";
+import "./index.less";
+function Tools(_ref) {
+  var scale = _ref.scale,
+    imgDownload = _ref.imgDownload,
+    setScale = _ref.setScale,
+    setRotate = _ref.setRotate,
+    containerEle = _ref.containerEle,
+    resetPicture = _ref.resetPicture;
+  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: "lm-player-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: "lm-player-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: "lm-player-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: "lm-player-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: "lm-player-S_View_RotateRight"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "picture-actions"
+  }, imgDownload && /*#__PURE__*/React.createElement("div", {
+    onClick: imgDownload
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-S_Edit_LoadDown"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FullScreen, {
+    className: "footer_window",
+    getContainer: function getContainer() {
+      return containerEle;
+    }
+  }))));
+}
+export default Tools;

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

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

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

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

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

@@ -0,0 +1,27 @@
+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 undefined;
+    }
+    dom.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    return function () {
+      return dom.removeEventListener('wheel', onWheel);
+    };
+  }, [dom, onWheel]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+export default WheelScale;

package/es/Picture/demo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function App(): React.JSX.Element;

package/es/Picture/demo.js

@@ -0,0 +1,105 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, ConfigProvider, Modal } from 'antd';
+import React from 'react';
+import Picture from '.';
+import { useSimpleState } from '..';
+export default function App() {
+  var _useSimpleState = useSimpleState({
+      open: false,
+      open2: false
+    }),
+    _useSimpleState2 = _slicedToArray(_useSimpleState, 2),
+    state = _useSimpleState2[0],
+    updateState = _useSimpleState2[1];
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 600,
+      height: 300,
+      background: '#000'
+    }
+  }, /*#__PURE__*/React.createElement(Picture, {
+    onClickRect: console.log,
+    onMenuClick: console.log,
+    menus: [{
+      title: '菜单1',
+      pathname: '/',
+      icon: ''
+    }]
+    // imagePath="http://192.168.100.246:5463/oss/v1/100004008/objects/638da35805f5f0a8101021f9?client_token=100004008_0_1670313176_9a47a8459c120d977904c9feb2354a7e"
+    ,
+    isOpenSelect: state.open,
+    imagePath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F16%2F20150316082631_YZ28f.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674876231&t=0824d5e8365bc9bcbe0484b5dbffff03"
+    // imagePath="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-08-07%2F5b69694c2e398.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674875813&t=f1f2c44a50e5f3ddae91ba223f5eb99b"
+    ,
+    rects: [{
+      type: 'face',
+      rect: [920.0, 843.0, 96.0, 94.0],
+      needExpand: true
+    }]
+  }, function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return updateState({
+          open: true
+        });
+      }
+    }, "\u622A\u56FE");
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 600,
+      background: '#000',
+      marginTop: 40
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return updateState({
+        open2: true
+      });
+    }
+  }, "\u6253\u5F00"), /*#__PURE__*/React.createElement(Modal, {
+    title: "modal",
+    open: state.open2,
+    onCancel: function onCancel() {
+      return updateState({
+        open2: false
+      });
+    },
+    width: 844,
+    destroyOnClose: true,
+    forceRender: true
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 600,
+      backgroundColor: '#000'
+    }
+  }, /*#__PURE__*/React.createElement(Picture, {
+    imagePath: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F09%2F20210609081952_51ef5.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673661389&t=906e24291130712565842eb7cf21e277",
+    isOpenSelect: false,
+    rects: [{
+      type: 'face',
+      rect: [698, 274, 23, 23],
+      needExpand: true
+    }, {
+      type: 'face',
+      rect: [754.0, 268.0, 23.0, 23.0],
+      needExpand: true
+    }, {
+      type: 'face',
+      rect: [430.0, 421.0, 49.0, 49.0],
+      needExpand: true
+    }, {
+      type: 'face',
+      rect: [240.0, 468.0, 41.0, 36.0],
+      needExpand: true
+    }]
+  })))));
+}

package/es/Picture/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IPictureProps } from './interface';
+import './index.less';
+declare function Picture({ className, width, height, minHeight, disabledDrag, imagePath, rects, isOpenSelect, disabledDrawMenu, menus, hasTool, fullScreenEle, ...props }: IPictureProps): React.JSX.Element;
+export default Picture;