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

51
components/DrawingViewer.js
View File

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