public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-16 05:50:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12953 from dataease/pr@dev-v2@fix_rich-text

Browse Source 
fix(仪表板、数据大屏): 修复富文本表格定位拖拽点显示位置有偏移问题
This commit is contained in:
王嘉豪
2024-10-28 22:19:32 +08:00
committed by GitHub
parent 41e1bfcc9b 78339557e9
commit 543bde3e9f
1 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
View File

@@ -191,7 +191,6 @@ const init = ref({
originalHandle.style.display = 'none' // 隐藏原始手柄
// 将克隆手柄添加到原手柄的父元素中
const parentDiv = originalHandle.parentNode // 获取原手柄的父元素
cloneHandle.style.width = `${parentDiv.offsetWidth}px`
parentDiv.appendChild(cloneHandle) // 将克隆手柄添加到父元素中
}
})
@@ -219,25 +218,55 @@ const init = ref({
// 显示原始手柄并移除克隆手柄
originalHandle.style.display = ''
if (cloneHandle) {
originalHandle.parentNode.removeChild(cloneHandle) // 获取原手柄的父元素
cloneHandle.parentNode.removeChild(cloneHandle) // 获取原手柄的父元素
}
cloneHandle = null
originalHandle = null
}
})
})
// 在表格调整大小结束时
// 解决移动表格corner点位resize时因为缩放导致的坐标系放大问题，进而导致移动错位问题
editor.on('ObjectResized', function (e) {
const { target, width, height, origin } = e
if (target.nodeName === 'TABLE' && origin.indexOf('corner') > -1) {
// 将最终调整的宽高根据缩放比例重设
target.style.width = `${width}px`
target.style.height = `${height}px`
} else if (target.nodeName === 'TABLE' && origin.indexOf('bar-col') > -1) {
// do nothing
// 函数：根据缩放比例调整 .mce-resizehandle 的位置和大小
const adjustResizeHandles = (aLeft, aTop) => {
nextTick(() => {
const nodeRt = doc.getElementById('mceResizeHandlene')
const nodeRb = doc.getElementById('mceResizeHandlese')
const nodeLb = doc.getElementById('mceResizeHandlesw')
if (nodeRt) {
nodeRt.style.left = `${aLeft}px`
}
if (nodeRb) {
nodeRb.style.left = `${aLeft}px`
nodeRb.style.top = `${aTop}px`
}
if (nodeLb) {
nodeLb.style.top = `${aTop}px`
}
})
}
// 监听 ObjectSelected 事件，点击表格时触发调整
editor.on('ObjectSelected', event => {
if (event.target.nodeName === 'TABLE') {
adjustResizeHandles(
event.target.offsetWidth + event.target.offsetLeft,
event.target.offsetHeight + event.target.offsetTop
)
}
})
// 监听 ObjectResized 事件，更新调整大小句柄
// 在表格调整大小结束时
// 解决移动表格corner点位resize时因为缩放导致的坐标系放大问题，进而导致移动错位问题
editor.on('ObjectResized', function (e) {
const { target, width, height, origin } = e
if (target.nodeName === 'TABLE' && origin.indexOf('corner') > -1) {
// 将最终调整的宽高根据缩放比例重设
target.style.width = `${width}px`
target.style.height = `${height}px`
} else if (target.nodeName === 'TABLE' && origin.indexOf('bar-col') > -1) {
// do nothing
}
})
})
}
})