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

Author: QAQCup

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

@@ -3,6 +3,12 @@ import { CTRL_KEYS, TCtrlKey } from '../types';
 import { createEl, getCvsRatio, getRectCtrls } from '../utils';
 import { ESpriteManagerEvt, SpriteManager } from './sprite-manager';
 
+const CloseSvg = `
+<svg t="1756779136804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1456" width="16" height="16">
+<path d="M1022.793875 170.063604L852.730271 0 511.396938 341.333333 170.063604 0 0 170.063604l341.333333 341.333334L0 852.730271l170.063604 170.063604 341.333334-340.127208 341.333333 340.127208 170.063604-170.063604-340.127208-341.333333 340.127208-341.333334z" fill="#bfbfbf" p-id="1457"></path>
+</svg>
+`;
+
 export function renderCtrls(
   container: HTMLElement,
   cvsEl: HTMLCanvasElement,
@@ -75,7 +81,8 @@ function createRectAndCtrlEl(container: HTMLElement): {
       d.style.cssText = `
         display: none;
         position: absolute;
-        border: 1px solid #3ee; border-radius: 50%;
+        border: 1px solid #3ee;
+        border-radius: 50%;
         box-sizing: border-box;
         background-color: #fff;
         pointer-events: auto;
@@ -111,15 +118,44 @@ function syncCtrlElPos(
   });
   Object.entries(getRectCtrls(cvsEl, s.rect)).forEach(([k, { x, y, w, h }]) => {
     // ctrl 是相对中心点定位的
-    Object.assign(ctrlsEl[k as TCtrlKey].style, {
-      display: s.interactable === 'interactive' ? 'block' : 'none',
+    const baseStyle = {
       left: '50%',
       top: '50%',
       width: `${w * cvsRatio.w}px`,
       height: `${h * cvsRatio.h}px`,
-      // border 1px, 所以要 -1
       transform: `translate(${x * cvsRatio.w}px, ${y * cvsRatio.h}px)`,
-    });
+    };
+    ctrlsEl[k as TCtrlKey].innerHTML = '';
+    if (k === 'rotate') {
+      Object.assign(ctrlsEl[k as TCtrlKey].style, {
+        display: s.interactable === 'interactive' ? 'block' : 'none',
+        ...baseStyle,
+      });
+    } else {
+      if (s.interactable === 'interactive') {
+        Object.assign(ctrlsEl[k as TCtrlKey].style, {
+          display: 'block',
+          backgroundColor: '#fff',
+          border: '1px solid #3ee',
+          ...baseStyle,
+        });
+      } else if (s.interactable === 'selectable') {
+        Object.assign(ctrlsEl[k as TCtrlKey].style, {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'transparent',
+          border: 'none',
+          ...baseStyle,
+        });
+        ctrlsEl[k as TCtrlKey].innerHTML = CloseSvg;
+      } else {
+        Object.assign(ctrlsEl[k as TCtrlKey].style, {
+          display: 'none',
+          ...baseStyle,
+        });
+      }
+    }
   });
   if (s.interactable === 'disabled') {
     rectEl.style.display = 'none';