wuxin/cadeditfronttest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:修复表格不能移动的bug

Browse Source
This commit is contained in:
李进 2025-09-14 15:55:58 +08:00
parent 1bd8f25cdb
commit 1d205a22c5
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/DrawingViewer.js
View File

@ -221,24 +221,31 @@ function DrawingViewer({ drawing, item, items, drawings, template, tablePosition
isDraggingImage.current = false;
draggedImageName.current = null;
const target = e.target;
const hitTable = isInClass(e.target, 'graphical-table');
const hitImage = isInClass(e.target, 'draggable-image');
// 检查是否点击了表格
if (isInClass(e.target, 'graphical-table')) {
if (hitTable) {
isDraggingTable.current = true;
lastMousePos.current = { x: e.clientX, y: e.clientY };
viewerRef.current.style.cursor = 'move';
console.log('开始拖拽表格');
if (viewerRef.current) viewerRef.current.style.cursor = 'move';
try {
if (e.target.setPointerCapture && typeof e.pointerId === 'number') {
e.target.setPointerCapture(e.pointerId);
}
} catch (err) {}
e.stopPropagation();
e.preventDefault();
return;
}
// 检查是否点击了图片
if (isInClass(e.target, 'draggable-image')) {
if (hitImage) {
isDraggingImage.current = true;
draggedImageName.current = e.target.getAttribute('data-image-name');
lastMousePos.current = { x: e.clientX, y: e.clientY };
viewerRef.current.style.cursor = 'move';
console.log('开始拖拽图片:', draggedImageName.current);
if (viewerRef.current) viewerRef.current.style.cursor = 'move';
e.stopPropagation();
e.preventDefault();
return;
@ -247,7 +254,7 @@ function DrawingViewer({ drawing, item, items, drawings, template, tablePosition
// 否则开始画布平移
isPanning.current = true;
lastMousePos.current = { x: e.clientX, y: e.clientY };
viewerRef.current.style.cursor = 'grabbing';
if (viewerRef.current) viewerRef.current.style.cursor = 'grabbing';
e.preventDefault();
};
@ -258,7 +265,6 @@ function DrawingViewer({ drawing, item, items, drawings, template, tablePosition
const dy = (e.clientY - lastMousePos.current.y);
if (isDraggingTable.current) {
console.log('正在拖拽表格', dx, dy);
const tableId = drawing.id;
const defaultPos = (() => {
const img = drawing.images && drawing.images[0];
@ -268,16 +274,14 @@ function DrawingViewer({ drawing, item, items, drawings, template, tablePosition
}
return { x: drawing.maxX - width, y: drawing.minY };
})();
const currentPos = tablePositions[tableId] || defaultPos;
const newPos = {
x: currentPos.x + (dx / viewTransform.scale),
y: currentPos.y - (dy / viewTransform.scale) // Y is inverted in SVG coords
};
console.log('表格新位置:', newPos);
setTablePositions(prev => ({
...prev,
[tableId]: newPos
}));
setTablePositions(prev => {
const base = prev[tableId] || defaultPos;
const updated = {
x: base.x + (dx / viewTransform.scale),
y: base.y + (dy / viewTransform.scale)
};
return { ...prev, [tableId]: updated };
});
} else if (isDraggingImage.current && draggedImageName.current && onUpdateImagePosition) {
// 图片拖拽：直接修改世界坐标
@ -293,9 +297,6 @@ function DrawingViewer({ drawing, item, items, drawings, template, tablePosition
};
const handleMouseUp = (e) => {
if (isDraggingTable.current) {
console.log('停止拖拽表格');
}
isPanning.current = false;
isDraggingTable.current = false;
isDraggingImage.current = false;
@ -553,7 +554,10 @@ function DrawingViewer({ drawing, item, items, drawings, template, tablePosition
className: 'graphical-table',
transform: `translate(${tablePos.x}, ${tablePos.y}) scale(1, -1)`,
style: { cursor: 'move' },
'data-draggable': 'graphical-table'
'data-draggable': 'graphical-table',
onPointerDown: (e) => { handleMouseDown(e); },
onPointerMove: (e) => { if (isDraggingTable.current) { handleMouseMove(e); } },
onPointerUp: (e) => { handleMouseUp(e); }
},
// 背景矩形 - 提供拖拽区域和视觉反馈
React.createElement('rect', {
@ -567,7 +571,10 @@ function DrawingViewer({ drawing, item, items, drawings, template, tablePosition
rx: 3, // 圆角
pointerEvents: 'all',
'data-draggable': 'graphical-table',
style: { cursor: 'move' }
style: { cursor: 'move' },
onPointerDown: (e) => { handleMouseDown(e); },
onPointerMove: (e) => { if (isDraggingTable.current) { handleMouseMove(e); } },
onPointerUp: (e) => { handleMouseUp(e); }
}),
// 表格内容
React.createElement(GraphicalTable, { template, items: displayItems, allItems: items, drawings })