fix: 解决Drag组件拖拽后会在原地留一个遮挡元素问题+解决weapp/taro-h5多个demo拖拽位置不正确问题 #2330
Conversation
Walkthrough本次更改主要涉及为多个组件添加新的 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DragComponent
participant getRectByTaro
User ->> DragComponent: Initialize
DragComponent ->> getRectByTaro: Get element dimensions
getRectByTaro -->> DragComponent: Return width and height
DragComponent ->> DragComponent: Calculate new positions
DragComponent -->> User: Render updated positions
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files ignored due to path filters (1)
Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (2)
src/packages/drag/drag.tsx (1)
Line range hint
89-89: useEffect钩子中缺少依赖项getInfo，应将其添加到依赖数组中以避免潜在的bug。- }, [myDrag]) + }, [myDrag, getInfo])src/packages/drag/drag.taro.tsx (1)
Line range hint
125-125: useEffect钩子中缺少依赖项getInfo，应将其添加到依赖数组中以避免潜在的bug。- }, []) + }, [getInfo])
| const { offsetTop, offsetLeft } = el | ||
| const { offsetWidth, offsetHeight } = el.querySelector( | ||
| `.${classPrefix}-inner` | ||
| ) as HTMLDivElement |
There was a problem hiding this comment.
更改元素尺寸获取方式，使用特定类选择器。建议添加错误处理以防元素未找到。
- const { offsetWidth, offsetHeight } = el.querySelector(`.${classPrefix}-inner`) as HTMLDivElement
+ const element = el.querySelector(`.${classPrefix}-inner`) as HTMLDivElement
+ if (!element) {
+ throw new Error('Element not found')
+ }
+ const { offsetWidth, offsetHeight } = elementCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const { offsetTop, offsetLeft } = el | |
| const { offsetWidth, offsetHeight } = el.querySelector( | |
| `.${classPrefix}-inner` | |
| ) as HTMLDivElement | |
| const { offsetTop, offsetLeft } = el | |
| const element = el.querySelector(`.${classPrefix}-inner`) as HTMLDivElement | |
| if (!element) { | |
| throw new Error('Element not found') | |
| } | |
| const { offsetWidth, offsetHeight } = element |
src/packages/drag/drag.taro.tsx
Outdated
| const getInfo = async () => { | ||
| const el = myDrag.current | ||
| if (el) { | ||
| const { top, left, bottom, right } = boundary | ||
| const { screenWidth, windowHeight } = getSystemInfoSync() | ||
|
|
||
| const { width, height } = await getRectByTaro(dragRef.current) | ||
| dragRef.current && dragRef.current.getBoundingClientRect() | ||
|
|
||
| console.log('width', width, 'height', height) | ||
| createSelectorQuery() | ||
| .select(`.${className}`) | ||
| .boundingClientRect((rec: any) => { | ||
| setBoundaryState({ | ||
| top: -rec.top + top, | ||
| left: -rec.left + left, | ||
| bottom: windowHeight - rec.height - rec.top - bottom, | ||
| right: screenWidth - rec.width - rec.left - right, | ||
| bottom: windowHeight - rec.top - bottom - Math.ceil(height), | ||
| right: screenWidth - rec.left - right - Math.ceil(width), |
There was a problem hiding this comment.
将getInfo函数改为异步以处理尺寸获取，看起来很合理。建议在调用getBoundingClientRect时使用可选链增加代码的健壮性。
- dragRef.current && dragRef.current.getBoundingClientRect()
+ dragRef.current?.getBoundingClientRect()Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const getInfo = async () => { | |
| const el = myDrag.current | |
| if (el) { | |
| const { top, left, bottom, right } = boundary | |
| const { screenWidth, windowHeight } = getSystemInfoSync() | |
| const { width, height } = await getRectByTaro(dragRef.current) | |
| dragRef.current && dragRef.current.getBoundingClientRect() | |
| console.log('width', width, 'height', height) | |
| createSelectorQuery() | |
| .select(`.${className}`) | |
| .boundingClientRect((rec: any) => { | |
| setBoundaryState({ | |
| top: -rec.top + top, | |
| left: -rec.left + left, | |
| bottom: windowHeight - rec.height - rec.top - bottom, | |
| right: screenWidth - rec.width - rec.left - right, | |
| bottom: windowHeight - rec.top - bottom - Math.ceil(height), | |
| right: screenWidth - rec.left - right - Math.ceil(width), | |
| const getInfo = async () => { | |
| const el = myDrag.current | |
| if (el) { | |
| const { top, left, bottom, right } = boundary | |
| const { screenWidth, windowHeight } = getSystemInfoSync() | |
| const { width, height } = await getRectByTaro(dragRef.current) | |
| dragRef.current?.getBoundingClientRect() | |
| console.log('width', width, 'height', height) | |
| createSelectorQuery() | |
| .select(`.${className}`) | |
| .boundingClientRect((rec: any) => { | |
| setBoundaryState({ | |
| top: -rec.top + top, | |
| left: -rec.left + left, | |
| bottom: windowHeight - rec.top - bottom - Math.ceil(height), | |
| right: screenWidth - rec.left - right - Math.ceil(width), |
Tools
Biome
[error] 56-56: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2330 +/- ##
=======================================
Coverage 85.87% 85.87%
=======================================
Files 217 217
Lines 22811 22818 +7
Branches 2494 2494
=======================================
+ Hits 19589 19596 +7
Misses 3217 3217
Partials 5 5 ☔ View full report in Codecov by Sentry. |
|
这个改造把初始位置改的有问题了，辛苦检查一下。具体的表现我在commit里边评论了 |
#2328
Summary by CodeRabbit
新功能
getRectByTaro获取元素的宽度和高度，并相应地更新bottom和right位置的计算。样式
.nut-drag类的display、width和height属性，并添加了嵌套的&-inner类以应用特定样式。修复
className属性，改进了样式应用和组件的可读性。