support rotation, refactor VideoScroll.vue

app/src/components/SVGContent.vue

@@ -27,6 +27,7 @@ import createPanZoom, {PanZoom} from "panzoom";
 import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
 import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
 import Stats from "stats.js";
+import {rotate} from "@/utils";
 
 export default defineComponent({
   name: "SVGContent",
@@ -264,11 +265,27 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
             const preURL = fileFetch.url.replace(/\/files.lst$/, "");
             const files = (await fileFetch.text()).split("\n").filter(Boolean).map((str) => `${preURL}/${str}`);
 
+            let x = el.x.baseVal.value;
+            let y = el.y.baseVal.value;
+            let w = el.width.baseVal.value;
+            let h = el.height.baseVal.value;
+            let angle = 0;
+
+            const transform = el.attributes.getNamedItem("transform");
+            const rotateResult = /rotate\((-?[0-9.]+)\)/.exec(transform?.value || "");
+            if (rotateResult) {
+              angle = parseFloat(rotateResult[1]);
+              const [ncx, ncy] = rotate(x + w / 2, y + h / 2, 0, 0, angle);
+              x = ncx - w / 2;
+              y = ncy - h / 2;
+            }
+
             return {
-              top: el.y.baseVal.value * ratio,
-              left: el.x.baseVal.value * ratio,
-              width: el.width.baseVal.value * ratio,
-              height: el.height.baseVal.value * ratio,
+              top: y * ratio,
+              left: x * ratio,
+              angle,
+              width: w * ratio,
+              height: h * ratio,
               direction: directionString as VideoScrollDirection,
               files
             };

app/src/components/VideoScroll.vue

@@ -5,22 +5,22 @@
          :style="{
               top: `${Math.round(definition.top)}px`,
               left: `${Math.round(definition.left)}px`,
-              width: isHorizontal(definition) ? `${Math.round(definition.width)}px` : 'auto',
-              height: isHorizontal(definition) ? 'auto' : `${Math.round(definition.height)}px`,
+              width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
+              height: isHorizontal ? 'auto' : `${Math.round(definition.height)}px`,
+              rotate: `${definition.angle}deg`
             }"
     />
 
     <!--suppress RequiredAttributes -->
-    <img v-for="(file, idx) in definition.files.slice(1)"
-         :data-src="file"
+    <img v-for="file in dynamicFiles"
+         :data-src="file.src"
          :data-direction="definition.direction"
          :style="{
-             top: `${Math.round(definition.top) +
-                   (isHorizontal(definition) ? 0 : (definition.height * (idx + 1) * directionSign))}px`,
-             left: `${Math.round(definition.left) +
-                   (isHorizontal(definition) ? (definition.width * (idx + 1) * directionSign) : 0)}px`,
+             top: `${Math.round(file.top)}px`,
+             left: `${Math.round(file.left)}px`,
              width: `${Math.round(definition.width)}px`,
              height: `${Math.round(definition.height)}px`,
+             rotate: `${definition.angle}deg`
            }"
     />
   </div>
@@ -28,6 +28,7 @@
 
 <script lang="ts">
 import {defineComponent, onMounted, ref} from "vue";
+import {rotate} from "@/utils";
 
 export default defineComponent({
   name: "VideoScroll",
@@ -38,18 +39,21 @@ export default defineComponent({
     }
   },
   computed: {
-    directionSign() {
-      if (this.definition.direction == VideoScrollDirection.RIGHT ||
-          this.definition.direction == VideoScrollDirection.DOWN) {
-        return 1;
-      } else {
-        return -1;
-      }
-    }
+    dynamicFiles(): { [key: string]: string } {
+      return this.definition.files.slice(1).map((src: string, idx: number) => {
+        const cy = this.definition.top +
+            (this.isHorizontal ? 0 : (this.definition.height * (idx + 1) * this.direction));
+        const cx = this.definition.left +
+            (this.isHorizontal ? (this.definition.width * (idx + 1) * this.direction) : 0);
+        const [left, top] = rotate(cx, cy, this.definition.left, this.definition.top, this.definition.angle);
+        return {top, left, src};
+      });
     },
-  methods: {
-    isHorizontal(definition: VideoScrollDef): boolean {
-      return definition.direction === "left" || definition.direction === "right";
+    isHorizontal(): boolean {
+      return this.definition.direction === "left" || this.definition.direction === "right";
+    },
+    direction(): number {
+      return (this.definition.direction === "right" || this.definition.direction === "down") ? 1 : -1;
     }
   },
   setup(props) {
@@ -95,6 +99,7 @@ export enum VideoScrollDirection {
 export interface VideoScrollDef {
   top: number,
   left: number,
+  angle: number,
   width: number,
   height: number,
   direction: VideoScrollDirection,

app/src/utils.ts

@@ -0,0 +1,8 @@
+export function rotate(x: number, y: number, cx: number, cy: number, angleDegrees: number): [number, number] {
+    const angleRad = (Math.PI / 180) * angleDegrees * -1;
+    const cos = Math.cos(angleRad);
+    const sin = Math.sin(angleRad);
+    const nx = (cos * (x - cx)) + (sin * (y - cy)) + cx;
+    const ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
+    return [nx, ny];
+}