图层设置需求分析

图层锁定和隐藏/显示以及点击选中

  • 点击锁定后、不可编辑
  • 点击隐藏后、画布上不可见该元素

  • 点击该图层、画布被选中、高亮

    图层名称编辑

  • 添加更多属性 - layerName

  • 点击图层名称的时候，在 input 和普通标签之间切换。
  • 添加按钮响应 - 对于 esc 和 enter 键的响应
    • 可能抽象一个通用的 hooks 函数 - useKeyPress

  • 点击到 input 外部区域的响应

    • 可能抽象一个通用的 hooks 函数 - useClickOutside

      拖动改变顺序

  • 拖动可以改变图层的顺序

  • 最终目的其实就是改变 store 中 components 数组的顺序