@fonixtree/magic-design 1.0.150 → 1.0.151

package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js

@@ -81,13 +81,15 @@ function (_super) {
       }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
       data: data
-    }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
-      className: "img-text",
+    }), data.groupName.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "text-perch"
+    }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "canvas-ignore",
       data: data.groupName,
       style: {
         pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
       }
-    })));
+    }))));
   };
 
   CardItem.defaultProps = {

package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less

@@ -1,7 +1,10 @@
 .slide-image-card-item-wrap {
   cursor: pointer;
 
-  .img-text {
+  .video-wrap {}
+
+  .text-perch {
     margin-top: 20px;
+    height: 30px;
   }
 }

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -53,7 +53,8 @@ function (_super) {
       playing: false,
       inside: false,
       isNearCenter: false,
-      flag: false
+      flag: false,
+      corner: ''
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     _this.cardRef = /*#__PURE__*/_react["default"].createRef();
@@ -94,7 +95,7 @@ function (_super) {
 
     _this.checkMouseNearCenter = function (e, radius) {
       if (radius === void 0) {
-        radius = 35;
+        radius = 20;
       }
 
       var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
@@ -102,6 +103,21 @@ function (_super) {
 
       var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
       return distance <= radius;
+    }; // 判断鼠标方位
+
+
+    _this.getMousePos = function (e) {
+      var rect = e.target.getBoundingClientRect();
+      var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
+
+      var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
+      // 判断区域
+
+      var isLeft = x < rect.width / 2;
+      var isTop = y < rect.height / 2;
+      var corner = '';
+      if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
+      return corner;
     };
 
     _this.handleMouseMove = (0, _lodash["default"])(function (e) {
@@ -116,71 +132,78 @@ function (_super) {
 
       var isNear = _this.checkMouseNearCenter(e);
 
+      var corner = _this.getMousePos(e);
+
       if (isNear) _this.setState({
         flag: true
       });
 
       _this.setState({
         isNearCenter: isNear,
-        inside: true
+        inside: true,
+        corner: corner
       });
     });
 
-    _this.initAnim = function () {
-      var dom = _this.cardRef.current;
-      dom.addEventListener('mousemove', _this.handleMouseMove);
-      dom.addEventListener('mouseleave', function () {
-        _this.setState({
-          inside: false,
-          flag: false
-        });
-      }); // 窗口大小变化时重新计算中心
-      // window.addEventListener('resize', () => {
-      //   this.setState({
-      //     inside: false,
-      //   });
-      // });
+    _this.handleMouseLeave = function () {
+      _this.setState({
+        inside: false,
+        flag: false,
+        corner: ''
+      });
     };
 
     return _this;
   }
 
   VideoItem.prototype.componentDidMount = function () {
-    this.initAnim();
+    var dom = this.cardRef.current;
+    dom.addEventListener('mousemove', this.handleMouseMove);
+    dom.addEventListener('mouseleave', this.handleMouseLeave);
+  };
+
+  VideoItem.prototype.componentWillUnmount = function () {
+    var dom = this.cardRef.current;
+    dom.removeEventListener('mousemove', this.handleMouseMove);
+    dom.removeEventListener('mouseleave', this.handleMouseLeave);
   };
 
   VideoItem.prototype.render = function () {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
+
+    var _c, _d, _e, _f, _g, _h, _j;
 
     var data = this.props.data;
-    var _g = this.state,
-        playing = _g.playing,
-        inside = _g.inside,
-        isNearCenter = _g.isNearCenter,
-        flag = _g.flag;
+    var _k = this.state,
+        playing = _k.playing,
+        inside = _k.inside,
+        isNearCenter = _k.isNearCenter,
+        flag = _k.flag,
+        corner = _k.corner;
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.cardRef,
-      className: (0, _classnames["default"])('slide-image-video-wrap', {
-        hover: inside && !isNearCenter && !flag
-      }),
+      className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
-    }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
+    }, ((_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
+      className: "canvas-ignore",
       loop: true,
       muted: true,
-      playsinline: true
+      playsinline: true,
+      style: {
+        visibility: playing ? 'visible' : 'hidden'
+      }
     }, /*#__PURE__*/_react["default"].createElement("source", {
-      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl,
+      src: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl,
       type: "video/mp4"
-    })), ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
+    })), ((_e = data.overilay) === null || _e === void 0 ? void 0 : _e.open) && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: (0, _classnames["default"])('video-img', {
-        cover: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl
-      }),
-      src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
+      className: (0, _classnames["default"])('video-img', (_b = {}, _b['canvas-ignore'] = (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl, _b)),
+      src: (_h = (_g = data.overilay) === null || _g === void 0 ? void 0 : _g.content) === null || _h === void 0 ? void 0 : _h.pcImgSrc,
       style: {
-        visibility: playing ? 'hidden' : 'visible'
+        visibility: playing ? 'hidden' : 'visible',
+        zIndex: ((_j = data.video) === null || _j === void 0 ? void 0 : _j.sourceUrl) ? 3 : 0
       }
     }));
   };

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -1,41 +1,86 @@
 .slide-image-video-wrap {
   position: relative;
-  transition: border-radius 0.1s linear;
+  transition: border-radius 0.2s ease;
   overflow: hidden;
+  cursor: pointer;
   --dx: calc(var(--size) - var(--x));
   --dy: calc(var(--size) - var(--y));
-  cursor: pointer;
 
-  &.hover {
-    cursor: pointer;
+  // &.hover {
+  // border-radius:
+  //   ~"calc(var(--x)/var(--size)*100%)"
+  //   ~"calc(var(--dx)/var(--size)*100%)"
+  //   ~"calc(var(--dx)/var(--size)*100%)"
+  //   ~"calc(var(--x)/var(--size)*100%) /"
+  //   ~"calc(var(--y)/var(--size)*100%)"
+  //   ~"calc(var(--y)/var(--size)*100%)"
+  //   ~"calc(var(--dy)/var(--size)*100%)"
+  //   ~"calc(var(--dy)/var(--size)*100%)";
+  // }
+
+  &.topLeft {
     border-radius:
       ~"calc(var(--x)/var(--size)*100%)"
-      ~"calc(var(--dx)/var(--size)*100%)"
-      ~"calc(var(--dx)/var(--size)*100%)"
-      ~"calc(var(--x)/var(--size)*100%) /"
+      ~"0"
+      ~"0"
+      ~"0 /"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"0"
+      ~"0"
+      ~"0";
+  }
+
+  &.topRight {
+    border-radius:
+      ~"0"
+      ~"calc(var(--x)/var(--size)*100%)"
+      ~"0"
+      ~"0 /"
+      ~"0"
       ~"calc(var(--y)/var(--size)*100%)"
+      ~"0"
+      ~"0";
+  }
+
+  &.bottomRight {
+    border-radius:
+      ~"0"
+      ~"0"
+      ~"calc(var(--x)/var(--size)*100%)"
+      ~"0 /"
+      ~"0"
+      ~"0"
       ~"calc(var(--y)/var(--size)*100%)"
-      ~"calc(var(--dy)/var(--size)*100%)"
-      ~"calc(var(--dy)/var(--size)*100%)";
+      ~"0";
+  }
+
+  &.bottomLeft {
+    border-radius:
+      ~"0"
+      ~"0"
+      ~"0"
+      ~"calc(var(--x)/var(--size)*100%) /"
+      ~"0"
+      ~"0"
+      ~"0"
+      ~"calc(var(--y)/var(--size)*100%)";
   }
 
   video {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    object-fit: cover;
     width: 100%;
+    height: 100%;
+    z-index: 2;
   }
 
   .video-img {
     width: 100%;
-
-    &.cover {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-    }
+    position: relative;
+    z-index: 0;
   }
 }