allow specifying multiple directions (e.g. "up right")

app/src/components/SVGContent.vue

@@ -305,9 +305,13 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
             console.debug(`[SVG/VIDEOSCROLLS] Found video scroll #${el.id}: ${descNode?.textContent}`);
             const [directionString, filesURL] = descNode!.textContent!.split("\n");
 
-            if (!Object.values(VideoScrollDirection).includes(directionString as VideoScrollDirection)) {
+            const directions: VideoScrollDirection[] = directionString.split(" ").map((direction) => {
-              throw new Error("Unknown direction string.");
+              if (!Object.values(VideoScrollDirection).includes(direction as VideoScrollDirection)) {
+                throw new Error(`Unknown direction string: "${direction}"`);
               }
+              return direction as VideoScrollDirection;
+            });
+
 
             console.debug(`[SVG/VIDEOSCROLLS] Fetching ${filesURL}...`);
             const fileFetch = await fetch(`content/${filesURL}`);
@@ -335,7 +339,7 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
               angle,
               width: w * ratio,
               height: h * ratio,
-              direction: directionString as VideoScrollDirection,
+              directions,
               files
             };
           })

app/src/components/VideoScroll.vue

@@ -6,7 +6,7 @@
               top: `${Math.round(definition.top)}px`,
               left: `${Math.round(definition.left)}px`,
               width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
-              height: isHorizontal ? 'auto' : `${Math.round(definition.height)}px`,
+              height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
               rotate: `${definition.angle}deg`
             }"
     />
@@ -14,7 +14,6 @@
     <!--suppress RequiredAttributes -->
     <img v-for="file in dynamicFiles"
          :data-src="file.src"
-         :data-direction="definition.direction"
          :style="{
              top: `${Math.round(file.top)}px`,
              left: `${Math.round(file.left)}px`,
@@ -27,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted, ref} from "vue";
+import {defineComponent} from "vue";
 import {rotate} from "@/utils";
 
 export default defineComponent({
@@ -42,27 +41,31 @@ export default defineComponent({
     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));
+            (this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
         const cx = this.definition.left +
-            (this.isHorizontal ? (this.definition.width * (idx + 1) * this.direction) : 0);
+            (this.isHorizontal ? (this.definition.width * (idx + 1) * this.horizontalDirection) : 0);
         const [left, top] = rotate(cx, cy, this.definition.left, this.definition.top, this.definition.angle);
         return {top, left, src};
       });
     },
     isHorizontal(): boolean {
-      return this.definition.direction === "left" || this.definition.direction === "right";
+      return this.definition.directions.some(
+          (dir: VideoScrollDirection) => dir === VideoScrollDirection.LEFT || dir === VideoScrollDirection.RIGHT
+      );
     },
-    direction(): number {
+    isVertical(): boolean {
-      return (this.definition.direction === "right" || this.definition.direction === "down") ? 1 : -1;
+      return this.definition.directions.some(
+          (dir: VideoScrollDirection) => dir === VideoScrollDirection.UP || dir === VideoScrollDirection.DOWN
+      );
+    },
+    horizontalDirection(): number {
+      return this.definition.directions.includes(VideoScrollDirection.RIGHT) ? 1 : -1;
+    },
+    verticalDirection(): number {
+      return this.definition.directions.includes(VideoScrollDirection.DOWN) ? 1 : -1;
     }
   },
-  setup(props) {
+  mounted() {
-    const root = ref<Element | null>(null);
-
-    console.debug(`[VIDEOSCROLL] Initializing ${props.definition.files[0]}...`);
-    console.debug(props.definition);
-
-    onMounted(() => {
     const observer = new IntersectionObserver((entries, observer) => {
       entries.forEach((entry) => {
         const element = entry.target as HTMLImageElement;
@@ -70,26 +73,21 @@ export default defineComponent({
           if (!element.src) {
             console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
             element.src = element.dataset.src!;
-              if (element.dataset.direction == "left" || element.dataset.direction == "right") {
+            element.onload = () => {
+              element.classList.add("loaded");
+              if (this.isHorizontal) {
                 element.style.height = "auto";
               } else {
                 element.style.width = "auto";
               }
-              element.onload = () => {
-                element.classList.add("loaded");
             };
           }
         }
       });
     });
-      Array.from((root.value as Element).children).forEach((el) => {
+    Array.from((this.$refs.root as Element).children).forEach((el) => {
       observer.observe(el);
     });
-    });
-
-    return {
-      root
-    };
   }
 });
 
@@ -106,7 +104,7 @@ export interface VideoScrollDef {
   angle: number,
   width: number,
   height: number,
-  direction: VideoScrollDirection,
+  directions: VideoScrollDirection[],
   files: string[]
 }