[Bug]: 当使用自定义脑图时，给当前节点加一个可编辑功能，使用创建html的方式，html内的输入框无法输入,

[woderlili]

Describe the bug / 问题描述

自定义drawEditorShape 方法是绑定的监听事件无法触发到 handleRestart绑定到window也无法触发

// 创建一个html 的文本输入框 
  getEditorStyle(attributes) {
    const { color = '#000000', size } = attributes
    const node = this.nodeData[0]
    if (!node?.states?.includes('selected')) return false
    const isRoot = node.depth === 0
    const [width, height] = size
    return {
      size: size, // 宽高与节点一致，确保完全覆盖
      dx: -width / 2,
      dy: -height / 2,
      // 自定义 HTML 内容，按需求调整样式
      innerHTML: `
      <div style="
      width: ${width}px; 
      height:${height}px; 
      background: ${color};
      text-align: center;
      border-radius: 8px;
      padding:8px 12px"
      contenteditable="true" 
       onclick="handleRestart('${node}')">  
        <span style=" font-size:${isRoot ? 24 : 16}px; font-weight: ${node?.depth > 1 ? 400 : 600};">    
          ${node.data.text}
        </span>
      </div>
    `,
      // 层级：设为 10 确保在节点其他元素之上
      zIndex: 10,
    }


  }

  drawEditorShape(attributes, container) {
    const editorStyle: any = this.getEditorStyle(attributes)
    const { x, y, width = 0, height = 0 } = editorStyle
    const bounds = this.upsert('key-container', Rect, { x, y, width, height, opacity: 0 }, container)!
    const btn = this.upsert('editor', GHTML, editorStyle, bounds)
    this.forwardEvent(btn, CommonEvent.CLICK, (event) => {
      console.log('editor', event)
      event.stopPropagation()
      this.context.graph.emit(TreeEvent.EDIT_NODE, {
        id: this.id,
        direction: attributes.direction,
      })
    })
  }

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@woderlili 您好！以下是关于您问题的自动回复：

🏷️ Issue 说明

你在 G6 自定义脑图节点时，为节点添加了可编辑功能（用 innerHTML 创建输入框），但出现了输入框无法输入、事件无法触发等问题。你尝试的事件绑定（如 handleRestart）无效，且监听事件在绑定到 window 时也无法生效。

---

🔍 问题分析

1. G6 节点 HTML 渲染机制

• G6 的 type: 'html' 节点是通过 GHTML 元素渲染原生 HTML，但其事件系统与原生 DOM 有区别。
• 直接在 innerHTML 写 onclick="..." 等原生事件，不会被 G6 的事件捕获机制支持，也不推荐这样做。

2. 输入框无法输入原因

• 很可能是节点或容器的 pointer-events 被设置为 none 或其它值，导致 HTML 输入框不响应鼠标和键盘事件。
• 也可能是由于行为（behaviors）或自定义节点样式冲突，导致事件被拦截或阻止。

3. 事件绑定建议

• G6 推荐使用 graph.on 或通过 forwardEvent 绑定事件到 GHTML 元素。
• 如果你要处理输入框的内容变更，应通过监听 input 或 change 等事件，而非点击事件。

---

✅ 解决方案与建议

1. 正确渲染可输入 HTML 元素

• 使用 G6 html 节点类型，在 innerHTML 返回函数中动态生成 HTML。
• 参考官方文档：G6 HTML 节点示例

node: {
  type: 'html',
  style: {
    size: [240, 80],
    dx: -120,
    dy: -40,
    innerHTML: (d) => `
      <input type="text" value="${d.data.text}" style="width:90%;height:32px;"/>
    `,
  },
},

2. 允许 HTML 输入框正常响应事件

• 检查节点和容器的 pointerEvents 样式，确保不是 none，也不要限制为 stroke。
• 推荐设置：

node: {
  style: {
    pointerEvents: 'all', // 默认即可，允许交互
  },
},

3. 绑定输入框事件到 G6 节点

• 用 forwardEvent 可以将 HTML 元素的事件转发给 G6 节点，或直接用原生 JS 绑定事件。
• 推荐：在 drawEditorShape 里获取 input 元素，绑定事件。

示例：

drawEditorShape(attributes, container) {
  const editorStyle = this.getEditorStyle(attributes);
  const btn = this.upsert('editor', GHTML, editorStyle, container);

  // 获取真实 DOM 元素
  setTimeout(() => {
    const input = btn.getDom().querySelector('input');
    if (input) {
      input.oninput = (e) => {
        // 处理输入
        this.context.graph.emit(TreeEvent.EDIT_NODE, {
          id: this.id,
          text: e.target.value
        });
      };
    }
  });
}

• 若要让节点状态（如 selected）控制编辑器显示，需确保 FixElementSize 行为已启用。

行为配置：

behaviors: [
  {
    type: 'fix-element-size',
    enable: true,
    state: 'selected',
    reset: true,
  },
],

4. 其它建议

• 不要用 onclick="..." 这种方式，改用 JS 事件绑定。
• 检查所有行为和样式是否有冲突，避免阻止事件。
• 如需输入框只在特定状态显示，确保节点状态切换逻辑正确。

---

📝 参考文档

• G6 HTML 节点官方文档
• FixElementSize 行为说明
• 事件绑定API

---

🎯 总结

你应该：

• 使用 G6 的 html 节点和 GHTML 元素渲染输入框
• 用 JS 事件绑定，不用 inline onclick
• 检查和修正节点行为配置和样式，确保 pointer-events 正确
• 推荐用 fix-element-size 行为保证编辑器可用

如仍有问题，建议贴出你的 G6 配置和 behaviors 相关代码，便于进一步定位。

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[woderlili]

已解决