Canvas-Editor项目中控件删除异常问题的技术解析

问题背景

在Canvas-Editor项目中，开发者在使用executeInsertElementList方法插入多个相邻控件时，发现执行删除操作会一次性删除多个控件，而非预期的每次只删除一个控件。这一行为影响了编辑器的用户体验和操作逻辑。

问题重现

开发者通过以下代码片段插入多个相邻控件：

instance.command.executeInsertElementList([
  {
    type: ElementType.CONTROL,
    value: '',
    controlId: 'ctrl_1',  // 注意这里所有控件使用相同的ID
    control: {
      type: ControlType.TEXT,
      value: null,
      placeholder: '控件1',
      prefix: '\u200c',
      postfix: '\u200c',
      disabled: true,
    }
  },
  // 更多类似结构的控件...
]);

当执行删除操作时，所有使用相同controlId的相邻控件会被一次性删除。

技术原理分析

Canvas-Editor在处理控件删除时，会依据控件的唯一标识符controlId来确定操作范围。当多个相邻控件使用相同的controlId时，编辑器会将这些控件视为逻辑上的同一组控件，因此在执行删除操作时会一并处理。

解决方案

根据项目维护者的回复，正确的做法是确保每个控件的controlId保持唯一性：

instance.command.executeInsertElementList([
  {
    type: ElementType.CONTROL,
    value: '',
    controlId: 'ctrl_1',  // 每个控件应有唯一ID
    // 其他属性...
  },
  {
    type: ElementType.CONTROL,
    value: '',
    controlId: 'ctrl_2',  // 不同控件使用不同ID
    // 其他属性...
  }
  // 更多控件...
]);

最佳实践建议

1. 唯一标识原则：为每个控件分配唯一的controlId，这是确保操作独立性的基础
2. ID生成策略：可以采用UUID或自增序列等方式生成唯一ID
3. 概念ID分离：虽然控件ID需要唯一，但可以保留概念上的相同标识（如相同类型的控件可以共享某些逻辑属性）
4. 边界测试：在开发过程中，应测试相邻控件的独立操作能力

总结

Canvas-Editor中控件的删除行为依赖于控件的唯一标识符。开发者需要理解这一设计原则，确保为每个控件分配不同的controlId，才能实现预期的独立删除功能。这一机制既保证了编辑器的灵活性，又为复杂场景下的控件管理提供了基础支持。