refactor: cache clip path

src/global.css

@@ -45,7 +45,7 @@
 .ASS-fix-font-size span {
   position: absolute;
 }
-.ASS-fix-objectBoundingBox {
+.ASS-clip-area {
   width: 100%;
   height: 100%;
   position: absolute;

src/index.js

@@ -3,7 +3,7 @@ import { compile } from 'ass-compiler';
 import { setKeyframes } from './renderer/animation.js';
 import { $fixFontSize } from './renderer/font-size.js';
 import { clear, createResize, createPlay, createPause, createSeek } from './internal.js';
-import { createSVGEl, addGlobalStyle } from './utils.js';
+import { createSVGEl, addGlobalStyle, uuid } from './utils.js';
 
 /**
  * @typedef {Object} ASSOption
@@ -26,7 +26,6 @@ export default class ASS {
     video: null,
     /** the box to display subtitles */
     box: document.createElement('div'),
-    // TODO: 是否可以动态添加
     /** use for \clip */
     svg: createSVGEl('svg'),
     /** use for \clip */
@@ -112,6 +111,7 @@ export default class ASS {
     };
     this.#store.styles = styles;
     this.#store.dialogues = dialogues.map((dia) => Object.assign(dia, {
+      id: `ASS-${uuid()}`,
       align: {
         // 0: left, 1: center, 2: right
         h: (dia.alignment + 2) % 3,
@@ -122,7 +122,8 @@ export default class ASS {
 
     container.append($fixFontSize);
 
-    const { svg, defs, box } = this.#store;
+    const { svg, defs, scriptRes, box } = this.#store;
+    svg.setAttributeNS(null, 'viewBox', `0 0 ${scriptRes.width} ${scriptRes.height}`);
 
     svg.append(defs);
     container.append(svg);

src/internal.js

@@ -3,13 +3,10 @@ import { renderer } from './renderer/renderer.js';
 import { batchAnimate } from './utils.js';
 
 export function clear(store) {
-  const { box, defs } = store;
+  const { box } = store;
   while (box.lastChild) {
     box.lastChild.remove();
   }
-  while (defs.lastChild) {
-    defs.lastChild.remove();
-  }
   store.actives = [];
   store.space = [];
 }
@@ -22,7 +19,6 @@ function framing(store) {
     const { end } = dia;
     if (end < vct) {
       dia.$div.remove();
-      dia.$clipPath?.remove();
       actives.splice(i, 1);
     }
   }
@@ -131,7 +127,6 @@ export function createResize(that, store) {
     box.style.cssText = cssText;
     box.style.setProperty('--ass-scale', store.scale);
     svg.style.cssText = cssText;
-    svg.setAttributeNS(null, 'viewBox', `0 0 ${sw} ${sh}`);
 
     createSeek(store)();
   };

src/renderer/clip.js

@@ -1,8 +1,7 @@
-import { createSVGEl, uuid } from '../utils.js';
+import { createSVGEl } from '../utils.js';
 
-export function createClipPath(clip, store) {
-  const sw = store.scriptRes.width;
-  const sh = store.scriptRes.height;
+function addClipPath($defs, clip, id, sw, sh) {
+  if ($defs.querySelector(`#${id}`)) return;
   let d = '';
   if (clip.dots !== null) {
     let { x1, y1, x2, y2 } = clip.dots;
@@ -21,7 +20,6 @@ export function createClipPath(clip, store) {
   if (clip.inverse) {
     d += `M0,0L0,${scale},${scale},${scale},${scale},0,0,0Z`;
   }
-  const id = `ASS-${uuid()}`;
   const $clipPath = createSVGEl('clipPath', [
     ['id', id],
     ['clipPathUnits', 'objectBoundingBox'],
@@ -31,21 +29,18 @@ export function createClipPath(clip, store) {
     ['transform', `scale(${scale})`],
     ['clip-rule', 'evenodd'],
   ]));
-  store.defs.append($clipPath);
-  return {
-    $clipPath,
-    cssText: `clip-path:url(#${id});`,
-  };
+  $defs.append($clipPath);
 }
 
 export function getClipPath(dialogue, store) {
-  if (!dialogue.clip) return {};
-  const $fobb = document.createElement('div');
-  store.box.insertBefore($fobb, dialogue.$div);
-  $fobb.append(dialogue.$div);
-  $fobb.className = 'ASS-fix-objectBoundingBox';
-  const { cssText, $clipPath } = createClipPath(dialogue.clip, store);
-  store.defs.append($clipPath);
-  $fobb.style.cssText = cssText;
-  return { $div: $fobb, $clipPath };
+  const { id, clip } = dialogue;
+  if (!clip) return {};
+  const { width, height } = store.scriptRes;
+  addClipPath(store.defs, clip, id, width, height);
+  const $clipArea = document.createElement('div');
+  store.box.insertBefore($clipArea, dialogue.$div);
+  $clipArea.append(dialogue.$div);
+  $clipArea.className = 'ASS-clip-area';
+  $clipArea.style.clipPath = `url(#${id})`;
+  return { $div: $clipArea };
 }

src/renderer/font-size.js

@@ -10,7 +10,7 @@ const cache = Object.create(null);
 
 export function getRealFontSize(fn, fs) {
   if (!cache[fn]) {
-    $fixFontSize.style.fontFamily = `font-family:"${fn}",Arial;`;
+    $fixFontSize.style.fontFamily = `"${fn}",Arial`;
     cache[fn] = fs * 2048 / $span.clientHeight;
   }
   return cache[fn];