From e359aea2e0ac93a0472e0e10030fb7f536c007ba Mon Sep 17 00:00:00 2001
From: weizhenye <weizhenye@gmail.com>
Date: Sun, 4 Aug 2024 22:30:54 +0800
Subject: [PATCH] fix: origin for animation

---
 src/global.css            |  2 ++
 src/renderer/dom.js       |  4 ++--
 src/renderer/position.js  |  5 ++++-
 src/renderer/renderer.js  |  2 +-
 src/renderer/transform.js | 14 ++++----------
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/global.css b/src/global.css
index 08e6236..24e4f36 100644
--- a/src/global.css
+++ b/src/global.css
@@ -6,8 +6,10 @@
 }
 .ASS-dialogue {
   font-size: 0;
+  width: max-content;
   position: absolute;
   z-index: 0;
+  transform: translate(calc(var(--ass-align-h) * -1), calc(var(--ass-align-v) * -1));
 }
 .ASS-dialogue span {
   display: inline-block;
diff --git a/src/renderer/dom.js b/src/renderer/dom.js
index 2c408a1..d06c114 100644
--- a/src/renderer/dom.js
+++ b/src/renderer/dom.js
@@ -18,8 +18,8 @@ export function createDialogue(dialogue, store) {
   const df = document.createDocumentFragment();
   const { align, slices, start, end } = dialogue;
   [
-    ['--ass-align-h', ['left', 'center', 'right'][align.h]],
-    ['--ass-align-v', ['bottom', 'center', 'top'][align.v]],
+    ['--ass-align-h', ['0%', '50%', '100%'][align.h]],
+    ['--ass-align-v', ['100%', '50%', '0%'][align.v]],
   ].forEach(([k, v]) => {
     $div.style.setProperty(k, v);
   });
diff --git a/src/renderer/position.js b/src/renderer/position.js
index 186f28c..232596a 100644
--- a/src/renderer/position.js
+++ b/src/renderer/position.js
@@ -109,5 +109,8 @@ export function getPosition(dialogue, store) {
       : allocate(dialogue, store);
   }
   // TODO: use % for x and y
-  return { x, y };
+  return {
+    x: x + [0, width / 2, width][align.h],
+    y: y + [height, height / 2, 0][align.v],
+  };
 }
diff --git a/src/renderer/renderer.js b/src/renderer/renderer.js
index 636dc94..4687464 100644
--- a/src/renderer/renderer.js
+++ b/src/renderer/renderer.js
@@ -17,7 +17,7 @@ export function renderer(dialogue, store) {
   Object.assign(dialogue, { height });
   const { x, y } = getPosition(dialogue, store);
   Object.assign(dialogue, { x, y });
-  $div.style.cssText += `width:${width}px;height:${height}px;left:${x}px;top:${y}px;`;
+  $div.style.cssText += `left:${x}px;top:${y}px;`;
   setTransformOrigin(dialogue, store.scale);
   Object.assign(dialogue, getClipPath(dialogue, store));
   if (dialogue.effect?.name?.startsWith('scroll')) {
diff --git a/src/renderer/transform.js b/src/renderer/transform.js
index 506244d..11395bc 100644
--- a/src/renderer/transform.js
+++ b/src/renderer/transform.js
@@ -30,20 +30,14 @@ export function createTransform(tag) {
 
 export function setTransformOrigin(dialogue, scale) {
   const { align, width, height, x, y, $div } = dialogue;
-  const org = {};
-  if (dialogue.org) {
-    org.x = dialogue.org.x * scale;
-    org.y = dialogue.org.y * scale;
-  } else {
-    org.x = [x, x + width / 2, x + width][align.h];
-    org.y = [y + height, y + height / 2, y][align.v];
-  }
+  const orgX = (dialogue.org ? dialogue.org.x * scale : x) + [0, width / 2, width][align.h];
+  const orgY = (dialogue.org ? dialogue.org.y * scale : y) + [height, height / 2, 0][align.v];
   for (let i = $div.childNodes.length - 1; i >= 0; i -= 1) {
     const node = $div.childNodes[i];
     if (node.dataset.rotate === '') {
       // It's not extremely precise for offsets are round the value to an integer.
-      const tox = org.x - x - node.offsetLeft;
-      const toy = org.y - y - node.offsetTop;
+      const tox = orgX - x - node.offsetLeft;
+      const toy = orgY - y - node.offsetTop;
       node.style.cssText += `transform-origin:${tox}px ${toy}px;`;
     }
   }