feat(av-cliper): add actable prop for VisibleSprite

[QAQCup]

给VisibleSprite添加了actable属性，默认为true，当设置为false时，在AVCanvas上点击这个VisibleSprite不会被选中。
这样可以将这个VisibleSprite当做AVCanvas的背景使用，也可以实现简单的元素锁定功能。

[hughfenghen]

目前可以通过以下代码避免 sprite 被选中然后进行交互。

avCvs.on('activeSpriteChange', (spr) => {
  // 禁止底层的视频被选中
  if (spr === this.#sprite) avCvs.activeSprite = null;
});

有考虑过开放新的 API （与你的类似），让调用方更简单地实现该功能，但 API 还没想好。
直接禁止交互不提示，还是显示一个边框（类似于很多工具的 locked ），在 UI 上做一些提醒会更好？

[QAQCup]

我现在也是通过监听activeSpriteChange方法控制选中的，但是由于设置avCvs.activeSprite = null会再次触发该监听方法，就需要写一堆逻辑判断是什么情况下触发的选中值是null，做不同的处理，挺麻烦的，所以想直接加个属性值，避免多次触发监听。

如果想在UI上做提醒的话，那是不是可以把属性值改成三个值，比如0是正常（有选中边框和操作点），1是锁定（有选中边框但无操作点），2是无提示（没有选中边框和操作点），这样？

[hughfenghen]

我现在也是通过监听activeSpriteChange方法控制选中的，但是由于设置avCvs.activeSprite = null会再次触发该监听方法，就需要写一堆逻辑判断是什么情况下触发的选中值是null，做不同的处理，挺麻烦的，所以想直接加个属性值，避免多次触发监听。

如果想在UI上做提醒的话，那是不是可以把属性值改成三个值，比如0是正常（有选中边框和操作点），1是锁定（有选中边框但无操作点），2是无提示（没有选中边框和操作点），这样？

赞同，这是 API 设计：

export class VisibleSprite extends BaseSprite {
  // ... 其他属性

  /**
    * 控制 Sprite 的交互状态
    * - 'interactive': 可选中，可进行移动、缩放、旋转等所有交互
    * - 'selectable': 仅可选中，但不可进行移动、缩放、旋转等交互
    * - 'disabled': 不可选中，也不可交互
    * @default 'interactive'
    */
   interactable: 'interactive' | 'selectable' | 'disabled' = 'interactive';

   copyStateTo<T extends BaseSprite>(target: T): void {
     super.copyStateTo(target);
     if (target instanceof VisibleSprite) {
       target.visible = this.visible;
       // 复制新属性的状态
       target.interactable = this.interactable;
     }
   }
 
   // ... 其他方法
 }

这是期望的样式，把八个控制点改成 ‘x’

勇士有时间实现这个效果吗？

[QAQCup]

我试试研究一下

[QAQCup]

改完了，大佬看看？

[hughfenghen]

请在 av-canvas 目录下 运行 pnpm dev
然后访问 http://localhost:6066/video-editor.html 进行测试， 如果能编写对应的单测用例那就更好了；

目前添加的视频图片素材都不可移动、缩放了，也没有 close icon。

[QAQCup]

我本地用 http://localhost:6066/video-editor.html 这个页调试过好使才提交的…… 刚又重新跑了一遍还是好使……
如下，代码设置的视频是selectable，文字是disabled，图片未设置
https://github.com/user-attachments/assets/379e7450-fde0-4c9c-932a-afefa3b96d0a

emmm…… 大佬，你那有什么报错什么的吗？不知道怎么查了……

[hughfenghen]

Sry, 我的问题。 因为改动了 av-cliper， 所以需要构建整个项目。

[hughfenghen]

🫡 感谢勇士的贡献
发布至 v1.2.0