🐛 修复图片节点双击预览功能

关键修复:
- 恢复双击图片节点的预览功能
- 双击图片元素触发showImagePreview事件
- 双击包含原生图片的节点触发showImagePreview事件
- 保持富文本节点的编辑功能

交互逻辑:
- 双击图片 → 预览图片
- 双击包含原生图片的节点 → 预览图片
- 双击富文本节点 → 编辑内容
- 双击表格节点 → 编辑表格
- 右键节点 → 显示菜单(包含预览和编辑选项)

技术实现:
- 在mouse.ts中区分不同类型的双击事件
- 优先处理图片预览,再处理富文本编辑
- 保持原有的表格编辑功能

现在图片预览功能已经恢复正常。
This commit is contained in:
lixinran 2025-10-11 15:09:29 +08:00
parent 642b12c217
commit 4f072de2ee
2 changed files with 13 additions and 9 deletions

Binary file not shown.

View File

@ -54,14 +54,10 @@ export default function (mind: MindElixirInstance) {
const imageUrl = img.src
const altText = img.alt || img.title || ''
console.log('🖼️ 双击图片节点,准备编辑:', { imageUrl, altText })
console.log('🖼️ 触发showImageEditor事件')
console.log('🖼️ 双击图片节点,准备预览:', { imageUrl, altText })
// 触发富文本编辑事件
const topicElement = target.closest('.me-tpc') as Topic
if (topicElement) {
mind.bus.fire('showRichTextEditor', topicElement.nodeObj, topicElement)
}
// 双击图片触发预览事件
mind.bus.fire('showImagePreview', imageUrl, altText)
return
}
@ -78,8 +74,16 @@ export default function (mind: MindElixirInstance) {
return
}
// 检查节点是否有图片或富文本内容(但不包括表格)
if (topic.nodeObj?.image || (topic.nodeObj?.dangerouslySetInnerHTML && !topic.innerHTML.includes('<table')) || topic.querySelector('img')) {
// 检查节点是否有MindElixir原生图片
if (topic.nodeObj?.image) {
const imageUrl = typeof topic.nodeObj.image === 'string' ? topic.nodeObj.image : topic.nodeObj.image.url
console.log('🖼️ 双击包含原生图片的节点,准备预览:', imageUrl)
mind.bus.fire('showImagePreview', imageUrl, topic.nodeObj.topic || '')
return
}
// 检查节点是否有富文本内容(但不包括表格)
if (topic.nodeObj?.dangerouslySetInnerHTML && !topic.innerHTML.includes('<table')) {
console.log('📝 双击富文本节点,准备编辑:', topic.nodeObj?.topic || '')
mind.bus.fire('showRichTextEditor', topic.nodeObj, topic)
return