@fonixtree/magic-design 1.0.150 → 1.0.152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/es/common/ProductCardModal/index.js +41 -1
  2. package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +1 -1
  3. package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less +1 -1
  4. package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +51 -30
  5. package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less +64 -21
  6. package/es/composite-comp/dito/components/SlideImage/pc/index.js +62 -12
  7. package/lib/common/ProductCardModal/index.js +41 -1
  8. package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +1 -1
  9. package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less +1 -1
  10. package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +51 -30
  11. package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less +64 -21
  12. package/lib/composite-comp/dito/components/SlideImage/pc/index.js +62 -12
  13. package/package.json +2 -1
package/es/common/ProductCardModal/index.js CHANGED
@@ -42,6 +42,8 @@ function ProductCardModal(_a) {
42
42
  loading = _e[0],
43
43
  setLoading = _e[1];
44
44
 
45
+ var flag = true;
46
+
45
47
  var handleNext = function handleNext(e) {
46
48
  e.stopPropagation();
47
49
  setActive(function (prev) {
@@ -64,13 +66,51 @@ function ProductCardModal(_a) {
64
66
  return Math.floor(Math.random() * 21) - 10;
65
67
  };
66
68
 
69
+ var handleScroll = function handleScroll(e) {
70
+ if (flag) {
71
+ flag = false; // 统一处理 delta 值
72
+
73
+ var delta = 0;
74
+
75
+ if (e.deltaY) {
76
+ delta = e.deltaY; // 现代浏览器
77
+ } else if (e.wheelDelta) {
78
+ delta = -e.wheelDelta / 40; // 旧版浏览器，调整方向和数值
79
+ } // 判断方向
80
+
81
+
82
+ if (delta > 0) {
83
+ console.log('向下滚动..');
84
+ handleNext(e);
85
+ } else if (delta < 0) {
86
+ console.log('向上滚动');
87
+ handlePrev(e);
88
+ } // 阻止默认滚动行为（如需要）
89
+
90
+
91
+ e.preventDefault();
92
+ var scrollTimeout_1 = setTimeout(function () {
93
+ flag = true;
94
+ clearTimeout(scrollTimeout_1);
95
+ }, 2000);
96
+ }
97
+ };
98
+
67
99
  (0, _react.useEffect)(function () {
68
100
  if (autoplay) {
69
101
  var interval_1 = setInterval(handleNext, 5000);
70
102
  return function () {
71
103
  return clearInterval(interval_1);
72
104
  };
73
- }
105
+ } // 监听滚轮事件（推荐：现代浏览器）
106
+
107
+
108
+ document.addEventListener('wheel', handleScroll); // 兼容旧版浏览器（如 IE/旧 WebKit）
109
+ // document.addEventListener('mousewheel', handleScroll);
110
+
111
+ return function () {
112
+ document.removeEventListener('wheel', handleScroll); // document.removeEventListener('mousewheel', handleScroll);
113
+ };
74
114
  }, [autoplay]);
75
115
  return /*#__PURE__*/_react["default"].createElement("div", {
76
116
  className: "productCardModalWrap",
package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js CHANGED
@@ -82,7 +82,7 @@ function (_super) {
82
82
  }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
83
83
  data: data
84
84
  }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
85
- className: "img-text",
85
+ className: "text",
86
86
  data: data.groupName,
87
87
  style: {
88
88
  pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less CHANGED
@@ -1,7 +1,7 @@
1
1
  .slide-image-card-item-wrap {
2
2
  cursor: pointer;
3
3
 
4
- .img-text {
4
+ .text {
5
5
  margin-top: 20px;
6
6
  }
7
7
  }
package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js CHANGED
@@ -53,7 +53,8 @@ function (_super) {
53
53
  playing: false,
54
54
  inside: false,
55
55
  isNearCenter: false,
56
- flag: false
56
+ flag: false,
57
+ corner: ''
57
58
  };
58
59
  _this.videoRef = /*#__PURE__*/_react["default"].createRef();
59
60
  _this.cardRef = /*#__PURE__*/_react["default"].createRef();
@@ -94,7 +95,7 @@ function (_super) {
94
95
 
95
96
  _this.checkMouseNearCenter = function (e, radius) {
96
97
  if (radius === void 0) {
97
- radius = 35;
98
+ radius = 20;
98
99
  }
99
100
 
100
101
  var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
@@ -102,6 +103,21 @@ function (_super) {
102
103
 
103
104
  var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
104
105
  return distance <= radius;
106
+ }; // 判断鼠标方位
107
+
108
+
109
+ _this.getMousePos = function (e) {
110
+ var rect = e.target.getBoundingClientRect();
111
+ var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
112
+
113
+ var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
114
+ // 判断区域
115
+
116
+ var isLeft = x < rect.width / 2;
117
+ var isTop = y < rect.height / 2;
118
+ var corner = '';
119
+ if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
120
+ return corner;
105
121
  };
106
122
 
107
123
  _this.handleMouseMove = (0, _lodash["default"])(function (e) {
@@ -116,68 +132,73 @@ function (_super) {
116
132
 
117
133
  var isNear = _this.checkMouseNearCenter(e);
118
134
 
135
+ var corner = _this.getMousePos(e);
136
+
119
137
  if (isNear) _this.setState({
120
138
  flag: true
121
139
  });
122
140
 
123
141
  _this.setState({
124
142
  isNearCenter: isNear,
125
- inside: true
143
+ inside: true,
144
+ corner: corner
126
145
  });
127
146
  });
128
147
 
129
- _this.initAnim = function () {
130
- var dom = _this.cardRef.current;
131
- dom.addEventListener('mousemove', _this.handleMouseMove);
132
- dom.addEventListener('mouseleave', function () {
133
- _this.setState({
134
- inside: false,
135
- flag: false
136
- });
137
- }); // 窗口大小变化时重新计算中心
138
- // window.addEventListener('resize', () => {
139
- // this.setState({
140
- // inside: false,
141
- // });
142
- // });
148
+ _this.handleMouseLeave = function () {
149
+ _this.setState({
150
+ inside: false,
151
+ flag: false,
152
+ corner: ''
153
+ });
143
154
  };
144
155
 
145
156
  return _this;
146
157
  }
147
158
 
148
159
  VideoItem.prototype.componentDidMount = function () {
149
- this.initAnim();
160
+ var dom = this.cardRef.current;
161
+ dom.addEventListener('mousemove', this.handleMouseMove);
162
+ dom.addEventListener('mouseleave', this.handleMouseLeave);
163
+ };
164
+
165
+ VideoItem.prototype.componentWillUnmount = function () {
166
+ var dom = this.cardRef.current;
167
+ dom.removeEventListener('mousemove', this.handleMouseMove);
168
+ dom.removeEventListener('mouseleave', this.handleMouseLeave);
150
169
  };
151
170
 
152
171
  VideoItem.prototype.render = function () {
153
- var _a, _b, _c, _d, _e, _f;
172
+ var _a;
173
+
174
+ var _b, _c, _d, _e, _f;
154
175
 
155
176
  var data = this.props.data;
156
177
  var _g = this.state,
157
178
  playing = _g.playing,
158
179
  inside = _g.inside,
159
180
  isNearCenter = _g.isNearCenter,
160
- flag = _g.flag;
181
+ flag = _g.flag,
182
+ corner = _g.corner;
161
183
  return /*#__PURE__*/_react["default"].createElement("div", {
162
184
  ref: this.cardRef,
163
- className: (0, _classnames["default"])('slide-image-video-wrap', {
164
- hover: inside && !isNearCenter && !flag
165
- }),
185
+ className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
166
186
  onMouseEnter: this.onMouseEnter,
167
187
  onMouseLeave: this.onMouseLeave
168
- }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
188
+ }, ((_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
169
189
  ref: this.videoRef,
170
190
  loop: true,
171
191
  muted: true,
172
- playsinline: true
192
+ playsinline: true,
193
+ style: {
194
+ visibility: playing ? 'visible' : 'hidden'
195
+ }
173
196
  }, /*#__PURE__*/_react["default"].createElement("source", {
174
- src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl,
197
+ src: (_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl,
175
198
  type: "video/mp4"
176
- })), ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
199
+ })), ((_d = data.overilay) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("img", {
177
200
  alt: "",
178
- className: (0, _classnames["default"])('video-img', {
179
- cover: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl
180
- }),
201
+ className: "video-img",
181
202
  src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
182
203
  style: {
183
204
  visibility: playing ? 'hidden' : 'visible'
package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less CHANGED
@@ -1,41 +1,84 @@
1
1
  .slide-image-video-wrap {
2
2
  position: relative;
3
- transition: border-radius 0.1s linear;
3
+ transition: border-radius 0.2s ease;
4
4
  overflow: hidden;
5
+ cursor: pointer;
5
6
  --dx: calc(var(--size) - var(--x));
6
7
  --dy: calc(var(--size) - var(--y));
7
- cursor: pointer;
8
8
 
9
- &.hover {
10
- cursor: pointer;
9
+ // &.hover {
10
+ // border-radius:
11
+ // ~"calc(var(--x)/var(--size)*100%)"
12
+ // ~"calc(var(--dx)/var(--size)*100%)"
13
+ // ~"calc(var(--dx)/var(--size)*100%)"
14
+ // ~"calc(var(--x)/var(--size)*100%) /"
15
+ // ~"calc(var(--y)/var(--size)*100%)"
16
+ // ~"calc(var(--y)/var(--size)*100%)"
17
+ // ~"calc(var(--dy)/var(--size)*100%)"
18
+ // ~"calc(var(--dy)/var(--size)*100%)";
19
+ // }
20
+
21
+ &.topLeft {
11
22
  border-radius:
12
23
  ~"calc(var(--x)/var(--size)*100%)"
13
- ~"calc(var(--dx)/var(--size)*100%)"
14
- ~"calc(var(--dx)/var(--size)*100%)"
15
- ~"calc(var(--x)/var(--size)*100%) /"
24
+ ~"0"
25
+ ~"0"
26
+ ~"0 /"
27
+ ~"calc(var(--y)/var(--size)*100%)"
28
+ ~"0"
29
+ ~"0"
30
+ ~"0";
31
+ }
32
+
33
+ &.topRight {
34
+ border-radius:
35
+ ~"0"
36
+ ~"calc(var(--x)/var(--size)*100%)"
37
+ ~"0"
38
+ ~"0 /"
39
+ ~"0"
16
40
  ~"calc(var(--y)/var(--size)*100%)"
41
+ ~"0"
42
+ ~"0";
43
+ }
44
+
45
+ &.bottomRight {
46
+ border-radius:
47
+ ~"0"
48
+ ~"0"
49
+ ~"calc(var(--x)/var(--size)*100%)"
50
+ ~"0 /"
51
+ ~"0"
52
+ ~"0"
17
53
  ~"calc(var(--y)/var(--size)*100%)"
18
- ~"calc(var(--dy)/var(--size)*100%)"
19
- ~"calc(var(--dy)/var(--size)*100%)";
54
+ ~"0";
55
+ }
56
+
57
+ &.bottomLeft {
58
+ border-radius:
59
+ ~"0"
60
+ ~"0"
61
+ ~"0"
62
+ ~"calc(var(--x)/var(--size)*100%) /"
63
+ ~"0"
64
+ ~"0"
65
+ ~"0"
66
+ ~"calc(var(--y)/var(--size)*100%)";
20
67
  }
21
68
 
22
69
  video {
70
+ position: absolute;
71
+ top: 0;
72
+ right: 0;
73
+ left: 0;
74
+ bottom: 0;
75
+ object-fit: cover;
23
76
  width: 100%;
77
+ height: 100%;
78
+ z-index: 2;
24
79
  }
25
80
 
26
81
  .video-img {
27
82
  width: 100%;
28
-
29
- &.cover {
30
- position: absolute;
31
- top: 0;
32
- right: 0;
33
- left: 0;
34
- bottom: 0;
35
- object-fit: cover;
36
- width: 100%;
37
- height: 100%;
38
- z-index: 0;
39
- }
40
83
  }
41
84
  }
package/es/composite-comp/dito/components/SlideImage/pc/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports["default"] = SlideImagePc;
6
+ exports["default"] = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -13,14 +13,64 @@ var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScrol
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
15
 
16
- function SlideImagePc(props) {
17
- var columnSpace = props.panelProps.spacing.pc.columnSpace;
18
- var lineSpace = props.panelProps.spacing.pc.lineSpace;
19
- return /*#__PURE__*/_react["default"].createElement("div", {
20
- className: "m-slide-image-pc"
21
- }, /*#__PURE__*/_react["default"].createElement(_ParallaxScroll["default"], {
22
- source: props.panelProps.groupSource,
23
- xGap: columnSpace,
24
- yGap: lineSpace
25
- }));
26
- }
16
+ var __extends = void 0 && (void 0).__extends || function () {
17
+ var _extendStatics = function extendStatics(d, b) {
18
+ _extendStatics = Object.setPrototypeOf || {
19
+ __proto__: []
20
+ } instanceof Array && function (d, b) {
21
+ d.__proto__ = b;
22
+ } || function (d, b) {
23
+ for (var p in b) {
24
+ if (b.hasOwnProperty(p)) d[p] = b[p];
25
+ }
26
+ };
27
+
28
+ return _extendStatics(d, b);
29
+ };
30
+
31
+ return function (d, b) {
32
+ _extendStatics(d, b);
33
+
34
+ function __() {
35
+ this.constructor = d;
36
+ }
37
+
38
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
39
+ };
40
+ }();
41
+
42
+ var SlideImagePc =
43
+ /** @class */
44
+ function (_super) {
45
+ __extends(SlideImagePc, _super);
46
+
47
+ function SlideImagePc() {
48
+ var _this = _super !== null && _super.apply(this, arguments) || this;
49
+
50
+ _this.state = {};
51
+ return _this;
52
+ }
53
+
54
+ SlideImagePc.prototype.render = function () {
55
+ var _a = this.props.panelProps,
56
+ spacing = _a.spacing,
57
+ groupSource = _a.groupSource;
58
+ var columnSpace = spacing.pc.columnSpace;
59
+ var lineSpace = spacing.pc.lineSpace;
60
+ return /*#__PURE__*/_react["default"].createElement("div", {
61
+ className: "m-slide-image-pc"
62
+ }, /*#__PURE__*/_react["default"].createElement(_ParallaxScroll["default"], {
63
+ source: groupSource,
64
+ xGap: columnSpace,
65
+ yGap: lineSpace
66
+ }));
67
+ };
68
+
69
+ SlideImagePc.defaultProps = {
70
+ data: {}
71
+ };
72
+ return SlideImagePc;
73
+ }(_react["default"].Component);
74
+
75
+ var _default = SlideImagePc;
76
+ exports["default"] = _default;
package/lib/common/ProductCardModal/index.js CHANGED
@@ -42,6 +42,8 @@ function ProductCardModal(_a) {
42
42
  loading = _e[0],
43
43
  setLoading = _e[1];
44
44
 
45
+ var flag = true;
46
+
45
47
  var handleNext = function handleNext(e) {
46
48
  e.stopPropagation();
47
49
  setActive(function (prev) {
@@ -64,13 +66,51 @@ function ProductCardModal(_a) {
64
66
  return Math.floor(Math.random() * 21) - 10;
65
67
  };
66
68
 
69
+ var handleScroll = function handleScroll(e) {
70
+ if (flag) {
71
+ flag = false; // 统一处理 delta 值
72
+
73
+ var delta = 0;
74
+
75
+ if (e.deltaY) {
76
+ delta = e.deltaY; // 现代浏览器
77
+ } else if (e.wheelDelta) {
78
+ delta = -e.wheelDelta / 40; // 旧版浏览器，调整方向和数值
79
+ } // 判断方向
80
+
81
+
82
+ if (delta > 0) {
83
+ console.log('向下滚动..');
84
+ handleNext(e);
85
+ } else if (delta < 0) {
86
+ console.log('向上滚动');
87
+ handlePrev(e);
88
+ } // 阻止默认滚动行为（如需要）
89
+
90
+
91
+ e.preventDefault();
92
+ var scrollTimeout_1 = setTimeout(function () {
93
+ flag = true;
94
+ clearTimeout(scrollTimeout_1);
95
+ }, 2000);
96
+ }
97
+ };
98
+
67
99
  (0, _react.useEffect)(function () {
68
100
  if (autoplay) {
69
101
  var interval_1 = setInterval(handleNext, 5000);
70
102
  return function () {
71
103
  return clearInterval(interval_1);
72
104
  };
73
- }
105
+ } // 监听滚轮事件（推荐：现代浏览器）
106
+
107
+
108
+ document.addEventListener('wheel', handleScroll); // 兼容旧版浏览器（如 IE/旧 WebKit）
109
+ // document.addEventListener('mousewheel', handleScroll);
110
+
111
+ return function () {
112
+ document.removeEventListener('wheel', handleScroll); // document.removeEventListener('mousewheel', handleScroll);
113
+ };
74
114
  }, [autoplay]);
75
115
  return /*#__PURE__*/_react["default"].createElement("div", {
76
116
  className: "productCardModalWrap",
package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js CHANGED
@@ -82,7 +82,7 @@ function (_super) {
82
82
  }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
83
83
  data: data
84
84
  }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
85
- className: "img-text",
85
+ className: "text",
86
86
  data: data.groupName,
87
87
  style: {
88
88
  pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less CHANGED
@@ -1,7 +1,7 @@
1
1
  .slide-image-card-item-wrap {
2
2
  cursor: pointer;
3
3
 
4
- .img-text {
4
+ .text {
5
5
  margin-top: 20px;
6
6
  }
7
7
  }
package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js CHANGED
@@ -53,7 +53,8 @@ function (_super) {
53
53
  playing: false,
54
54
  inside: false,
55
55
  isNearCenter: false,
56
- flag: false
56
+ flag: false,
57
+ corner: ''
57
58
  };
58
59
  _this.videoRef = /*#__PURE__*/_react["default"].createRef();
59
60
  _this.cardRef = /*#__PURE__*/_react["default"].createRef();
@@ -94,7 +95,7 @@ function (_super) {
94
95
 
95
96
  _this.checkMouseNearCenter = function (e, radius) {
96
97
  if (radius === void 0) {
97
- radius = 35;
98
+ radius = 20;
98
99
  }
99
100
 
100
101
  var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
@@ -102,6 +103,21 @@ function (_super) {
102
103
 
103
104
  var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
104
105
  return distance <= radius;
106
+ }; // 判断鼠标方位
107
+
108
+
109
+ _this.getMousePos = function (e) {
110
+ var rect = e.target.getBoundingClientRect();
111
+ var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
112
+
113
+ var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
114
+ // 判断区域
115
+
116
+ var isLeft = x < rect.width / 2;
117
+ var isTop = y < rect.height / 2;
118
+ var corner = '';
119
+ if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
120
+ return corner;
105
121
  };
106
122
 
107
123
  _this.handleMouseMove = (0, _lodash["default"])(function (e) {
@@ -116,68 +132,73 @@ function (_super) {
116
132
 
117
133
  var isNear = _this.checkMouseNearCenter(e);
118
134
 
135
+ var corner = _this.getMousePos(e);
136
+
119
137
  if (isNear) _this.setState({
120
138
  flag: true
121
139
  });
122
140
 
123
141
  _this.setState({
124
142
  isNearCenter: isNear,
125
- inside: true
143
+ inside: true,
144
+ corner: corner
126
145
  });
127
146
  });
128
147
 
129
- _this.initAnim = function () {
130
- var dom = _this.cardRef.current;
131
- dom.addEventListener('mousemove', _this.handleMouseMove);
132
- dom.addEventListener('mouseleave', function () {
133
- _this.setState({
134
- inside: false,
135
- flag: false
136
- });
137
- }); // 窗口大小变化时重新计算中心
138
- // window.addEventListener('resize', () => {
139
- // this.setState({
140
- // inside: false,
141
- // });
142
- // });
148
+ _this.handleMouseLeave = function () {
149
+ _this.setState({
150
+ inside: false,
151
+ flag: false,
152
+ corner: ''
153
+ });
143
154
  };
144
155
 
145
156
  return _this;
146
157
  }
147
158
 
148
159
  VideoItem.prototype.componentDidMount = function () {
149
- this.initAnim();
160
+ var dom = this.cardRef.current;
161
+ dom.addEventListener('mousemove', this.handleMouseMove);
162
+ dom.addEventListener('mouseleave', this.handleMouseLeave);
163
+ };
164
+
165
+ VideoItem.prototype.componentWillUnmount = function () {
166
+ var dom = this.cardRef.current;
167
+ dom.removeEventListener('mousemove', this.handleMouseMove);
168
+ dom.removeEventListener('mouseleave', this.handleMouseLeave);
150
169
  };
151
170
 
152
171
  VideoItem.prototype.render = function () {
153
- var _a, _b, _c, _d, _e, _f;
172
+ var _a;
173
+
174
+ var _b, _c, _d, _e, _f;
154
175
 
155
176
  var data = this.props.data;
156
177
  var _g = this.state,
157
178
  playing = _g.playing,
158
179
  inside = _g.inside,
159
180
  isNearCenter = _g.isNearCenter,
160
- flag = _g.flag;
181
+ flag = _g.flag,
182
+ corner = _g.corner;
161
183
  return /*#__PURE__*/_react["default"].createElement("div", {
162
184
  ref: this.cardRef,
163
- className: (0, _classnames["default"])('slide-image-video-wrap', {
164
- hover: inside && !isNearCenter && !flag
165
- }),
185
+ className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
166
186
  onMouseEnter: this.onMouseEnter,
167
187
  onMouseLeave: this.onMouseLeave
168
- }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
188
+ }, ((_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
169
189
  ref: this.videoRef,
170
190
  loop: true,
171
191
  muted: true,
172
- playsinline: true
192
+ playsinline: true,
193
+ style: {
194
+ visibility: playing ? 'visible' : 'hidden'
195
+ }
173
196
  }, /*#__PURE__*/_react["default"].createElement("source", {
174
- src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl,
197
+ src: (_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl,
175
198
  type: "video/mp4"
176
- })), ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
199
+ })), ((_d = data.overilay) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("img", {
177
200
  alt: "",
178
- className: (0, _classnames["default"])('video-img', {
179
- cover: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl
180
- }),
201
+ className: "video-img",
181
202
  src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
182
203
  style: {
183
204
  visibility: playing ? 'hidden' : 'visible'
package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less CHANGED
@@ -1,41 +1,84 @@
1
1
  .slide-image-video-wrap {
2
2
  position: relative;
3
- transition: border-radius 0.1s linear;
3
+ transition: border-radius 0.2s ease;
4
4
  overflow: hidden;
5
+ cursor: pointer;
5
6
  --dx: calc(var(--size) - var(--x));
6
7
  --dy: calc(var(--size) - var(--y));
7
- cursor: pointer;
8
8
 
9
- &.hover {
10
- cursor: pointer;
9
+ // &.hover {
10
+ // border-radius:
11
+ // ~"calc(var(--x)/var(--size)*100%)"
12
+ // ~"calc(var(--dx)/var(--size)*100%)"
13
+ // ~"calc(var(--dx)/var(--size)*100%)"
14
+ // ~"calc(var(--x)/var(--size)*100%) /"
15
+ // ~"calc(var(--y)/var(--size)*100%)"
16
+ // ~"calc(var(--y)/var(--size)*100%)"
17
+ // ~"calc(var(--dy)/var(--size)*100%)"
18
+ // ~"calc(var(--dy)/var(--size)*100%)";
19
+ // }
20
+
21
+ &.topLeft {
11
22
  border-radius:
12
23
  ~"calc(var(--x)/var(--size)*100%)"
13
- ~"calc(var(--dx)/var(--size)*100%)"
14
- ~"calc(var(--dx)/var(--size)*100%)"
15
- ~"calc(var(--x)/var(--size)*100%) /"
24
+ ~"0"
25
+ ~"0"
26
+ ~"0 /"
27
+ ~"calc(var(--y)/var(--size)*100%)"
28
+ ~"0"
29
+ ~"0"
30
+ ~"0";
31
+ }
32
+
33
+ &.topRight {
34
+ border-radius:
35
+ ~"0"
36
+ ~"calc(var(--x)/var(--size)*100%)"
37
+ ~"0"
38
+ ~"0 /"
39
+ ~"0"
16
40
  ~"calc(var(--y)/var(--size)*100%)"
41
+ ~"0"
42
+ ~"0";
43
+ }
44
+
45
+ &.bottomRight {
46
+ border-radius:
47
+ ~"0"
48
+ ~"0"
49
+ ~"calc(var(--x)/var(--size)*100%)"
50
+ ~"0 /"
51
+ ~"0"
52
+ ~"0"
17
53
  ~"calc(var(--y)/var(--size)*100%)"
18
- ~"calc(var(--dy)/var(--size)*100%)"
19
- ~"calc(var(--dy)/var(--size)*100%)";
54
+ ~"0";
55
+ }
56
+
57
+ &.bottomLeft {
58
+ border-radius:
59
+ ~"0"
60
+ ~"0"
61
+ ~"0"
62
+ ~"calc(var(--x)/var(--size)*100%) /"
63
+ ~"0"
64
+ ~"0"
65
+ ~"0"
66
+ ~"calc(var(--y)/var(--size)*100%)";
20
67
  }
21
68
 
22
69
  video {
70
+ position: absolute;
71
+ top: 0;
72
+ right: 0;
73
+ left: 0;
74
+ bottom: 0;
75
+ object-fit: cover;
23
76
  width: 100%;
77
+ height: 100%;
78
+ z-index: 2;
24
79
  }
25
80
 
26
81
  .video-img {
27
82
  width: 100%;
28
-
29
- &.cover {
30
- position: absolute;
31
- top: 0;
32
- right: 0;
33
- left: 0;
34
- bottom: 0;
35
- object-fit: cover;
36
- width: 100%;
37
- height: 100%;
38
- z-index: 0;
39
- }
40
83
  }
41
84
  }
package/lib/composite-comp/dito/components/SlideImage/pc/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports["default"] = SlideImagePc;
6
+ exports["default"] = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -13,14 +13,64 @@ var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScrol
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
15
 
16
- function SlideImagePc(props) {
17
- var columnSpace = props.panelProps.spacing.pc.columnSpace;
18
- var lineSpace = props.panelProps.spacing.pc.lineSpace;
19
- return /*#__PURE__*/_react["default"].createElement("div", {
20
- className: "m-slide-image-pc"
21
- }, /*#__PURE__*/_react["default"].createElement(_ParallaxScroll["default"], {
22
- source: props.panelProps.groupSource,
23
- xGap: columnSpace,
24
- yGap: lineSpace
25
- }));
26
- }
16
+ var __extends = void 0 && (void 0).__extends || function () {
17
+ var _extendStatics = function extendStatics(d, b) {
18
+ _extendStatics = Object.setPrototypeOf || {
19
+ __proto__: []
20
+ } instanceof Array && function (d, b) {
21
+ d.__proto__ = b;
22
+ } || function (d, b) {
23
+ for (var p in b) {
24
+ if (b.hasOwnProperty(p)) d[p] = b[p];
25
+ }
26
+ };
27
+
28
+ return _extendStatics(d, b);
29
+ };
30
+
31
+ return function (d, b) {
32
+ _extendStatics(d, b);
33
+
34
+ function __() {
35
+ this.constructor = d;
36
+ }
37
+
38
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
39
+ };
40
+ }();
41
+
42
+ var SlideImagePc =
43
+ /** @class */
44
+ function (_super) {
45
+ __extends(SlideImagePc, _super);
46
+
47
+ function SlideImagePc() {
48
+ var _this = _super !== null && _super.apply(this, arguments) || this;
49
+
50
+ _this.state = {};
51
+ return _this;
52
+ }
53
+
54
+ SlideImagePc.prototype.render = function () {
55
+ var _a = this.props.panelProps,
56
+ spacing = _a.spacing,
57
+ groupSource = _a.groupSource;
58
+ var columnSpace = spacing.pc.columnSpace;
59
+ var lineSpace = spacing.pc.lineSpace;
60
+ return /*#__PURE__*/_react["default"].createElement("div", {
61
+ className: "m-slide-image-pc"
62
+ }, /*#__PURE__*/_react["default"].createElement(_ParallaxScroll["default"], {
63
+ source: groupSource,
64
+ xGap: columnSpace,
65
+ yGap: lineSpace
66
+ }));
67
+ };
68
+
69
+ SlideImagePc.defaultProps = {
70
+ data: {}
71
+ };
72
+ return SlideImagePc;
73
+ }(_react["default"].Component);
74
+
75
+ var _default = SlideImagePc;
76
+ exports["default"] = _default;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "1.0.150",
4
+ "version": "1.0.152",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",
@@ -24,6 +24,7 @@
24
24
  "antd": "4.24.8",
25
25
  "axios": "0.27.2",
26
26
  "framer-motion": "6.x",
27
+ "html2canvas": "^1.4.1",
27
28
  "immutability-helper": "3.1.1",
28
29
  "interactjs": "1.10.17",
29
30
  "lodash": "4.17.21",