refactor(av-canvas): adjust ctrlSize and optimize imports

Author: hughfenghen

packages/av-canvas/src/av-canvas.ts

@@ -1,17 +1,18 @@
 import {
-  Log,
   Combinator,
+  ICombinatorOpts,
+  Log,
+  MediaStreamClip,
   OffscreenSprite,
+  Rect,
   VisibleSprite,
-  MediaStreamClip,
-  ICombinatorOpts,
 } from '@webav/av-cliper';
+import { EventTool, workerTimer } from '@webav/internal-utils';
 import { renderCtrls } from './sprites/render-ctrl';
 import { ESpriteManagerEvt, SpriteManager } from './sprites/sprite-manager';
 import { activeSprite, draggabelSprite } from './sprites/sprite-op';
 import { IResolution } from './types';
-import { createEl } from './utils';
-import { workerTimer, EventTool } from '@webav/internal-utils';
+import { createEl, getRectCtrls } from './utils';
 
 /**
  * 默认的音频设置，⚠️ 不要变更它的值 ⚠️
@@ -109,6 +110,10 @@ export class AVCanvas {
 
     createEmptyOscillatorNode(this.#audioCtx).connect(this.#captureAudioDest);
 
+    // 创建 this.#cvsEl 时自动设置 ctrlSize 初始值
+    // 避免首次渲染时 ctrls 节点大小不符合期望，所以这里不需要它的返回值
+    getRectCtrls(this.#cvsEl, { x: 0, y: 0, w: 0, h: 0 } as Rect);
+
     this.#spriteManager = new SpriteManager();
 
     this.#clears.push(

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

@@ -1,6 +1,6 @@
+import { VisibleSprite } from '@webav/av-cliper';
 import { CTRL_KEYS, TCtrlKey } from '../types';
 import { createEl, getCvsRatio, getRectCtrls } from '../utils';
-import { VisibleSprite } from '@webav/av-cliper';
 import { ESpriteManagerEvt, SpriteManager } from './sprite-manager';
 
 export function renderCtrls(

packages/av-canvas/src/utils.ts

@@ -18,7 +18,7 @@ export function getRectCtrls(cvsEl: HTMLCanvasElement, rect: Rect) {
     return rectGetterCache.get(cvsEl)!(rect);
   }
 
-  let ctrlSize = 16;
+  let ctrlSize = 10;
   const cvsResizeOb = new ResizeObserver((entries) => {
     const fisrtEntry = entries[0];
     if (fisrtEntry == null) return;