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

Author: QAQCup

packages/av-canvas/src/sprites/render-ctrl.ts

@@ -43,7 +43,6 @@ export function renderCtrls(
     lastActSprEvtClear = s.on('propsChange', () => {
       syncCtrlElPos(s, cvsEl, rectEl, ctrlsEl);
     });
-    rectEl.style.display = '';
   });
 
   return () => {
@@ -113,7 +112,7 @@ function syncCtrlElPos(
   Object.entries(getRectCtrls(cvsEl, s.rect)).forEach(([k, { x, y, w, h }]) => {
     // ctrl 是相对中心点定位的
     Object.assign(ctrlsEl[k as TCtrlKey].style, {
-      display: 'block',
+      display: s.interactable === 'interactive' ? 'block' : 'none',
       left: '50%',
       top: '50%',
       width: `${w * cvsRatio.w}px`,
@@ -122,4 +121,9 @@ function syncCtrlElPos(
       transform: `translate(${x * cvsRatio.w}px, ${y * cvsRatio.h}px)`,
     });
   });
+  if (s.interactable === 'disabled') {
+    rectEl.style.display = 'none';
+  } else {
+    rectEl.style.display = '';
+  }
 }

packages/av-canvas/src/sprites/sprite-manager.ts

@@ -23,7 +23,7 @@ export class SpriteManager {
   }
   set activeSprite(s: VisibleSprite | null) {
     if (s === this.#activeSprite) return;
-    if (s && !s.actable) return;
+    if (s && s.interactable === 'disabled') return;
     this.#activeSprite = s;
     this.#evtTool.emit(ESpriteManagerEvt.ActiveSpriteChange, s);
   }
@@ -33,7 +33,10 @@ export class SpriteManager {
       this.getSprites()
         // 排在后面的层级更高
         .reverse()
-        .find((s) => s.visible && s.actable && s.rect.checkHit(x, y)) ?? null;
+        .find(
+          (s) =>
+            s.visible && s.interactable !== 'disabled' && s.rect.checkHit(x, y),
+        ) ?? null;
   }
 
   async addSprite(vs: VisibleSprite): Promise<void> {

packages/av-canvas/src/sprites/sprite-op.ts

@@ -51,9 +51,14 @@ export function draggabelSprite(
 
   // 移动sprite的处理函数
   const onRectMouseDown = (evt: MouseEvent): void => {
-    if (evt.button !== 0 || sprMng.activeSprite == null) return;
-
     const hitSpr = sprMng.activeSprite;
+    if (
+      evt.button !== 0 ||
+      hitSpr == null ||
+      hitSpr.interactable !== 'interactive'
+    )
+      return;
+
     const { clientX, clientY } = evt;
 
     startRect = hitSpr.rect.clone();
@@ -69,16 +74,22 @@ export function draggabelSprite(
 
   const cvsRatio = getCvsRatio(cvsEl);
   const onMouseMove = (evt: MouseEvent): void => {
-    if (sprMng.activeSprite == null || startRect == null) return;
+    const hitSpr = sprMng.activeSprite;
+    if (
+      hitSpr == null ||
+      hitSpr.interactable !== 'interactive' ||
+      startRect == null
+    )
+      return;
 
     const { clientX, clientY } = evt;
     let expectX = startRect.x + (clientX - startX) / cvsRatio.w;
     let expectY = startRect.y + (clientY - startY) / cvsRatio.h;
 
     updateRectWithSafeMargin(
-      sprMng.activeSprite.rect,
+      hitSpr.rect,
       cvsEl,
-      refline.magneticEffect(expectX, expectY, sprMng.activeSprite.rect),
+      refline.magneticEffect(expectX, expectY, hitSpr.rect),
     );
   };
 
@@ -116,18 +127,24 @@ function setupCtrlEvents(
   ctrlElements.forEach((ctrlEl, index) => {
     const ctrlKey = CTRL_KEYS[index];
     ctrlEl.addEventListener('pointerdown', (evt: MouseEvent) => {
-      if (evt.button !== 0 || sprMng.activeSprite == null) return;
+      const hitSpr = sprMng.activeSprite;
+      if (
+        evt.button !== 0 ||
+        hitSpr == null ||
+        hitSpr.interactable !== 'interactive'
+      )
+        return;
 
       const { clientX, clientY } = evt;
 
       if (ctrlKey === 'rotate') {
         rotateRect(
-          sprMng.activeSprite.rect,
-          cntMap2Outer(sprMng.activeSprite.rect.center, cvsRatio, cvsEl),
+          hitSpr.rect,
+          cntMap2Outer(hitSpr.rect.center, cvsRatio, cvsEl),
         );
       } else {
         scaleRect({
-          sprRect: sprMng.activeSprite.rect,
+          sprRect: hitSpr.rect,
           ctrlKey,
           startX: clientX,
           startY: clientY,

packages/av-cliper/src/sprite/visible-sprite.ts

@@ -31,9 +31,13 @@ export class VisibleSprite extends BaseSprite {
   visible = true;
 
   /**
-   * 元素是否可选中，用于设置元素是否响应画布的选中事件，设置为 false 时不可选中，默认为 true 可选中
+   * 控制 Sprite 的交互状态
+   * - 'interactive': 可选中，可进行移动、缩放、旋转等所有交互
+   * - 'selectable': 仅可选中，但不可进行移动、缩放、旋转等交互
+   * - 'disabled': 不可选中，也不可交互
+   * @default 'interactive'
    */
-  actable = true;
+  interactable: 'interactive' | 'selectable' | 'disabled' = 'interactive';
 
   constructor(clip: IClip) {
     super();
@@ -113,7 +117,7 @@ export class VisibleSprite extends BaseSprite {
     super.copyStateTo(target);
     if (target instanceof VisibleSprite) {
       target.visible = this.visible;
-      target.actable = this.actable;
+      target.interactable = this.interactable;
     }
   }