video scrolls

app/.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+public/content

app/src/App.vue

@@ -1,17 +1,15 @@
 <template>
-  <SVGContent id="root" url="intro.svg"/>
+  <SVGContent id="root" url="content/intro.svg"/>
 </template>
 
 <script lang="ts">
 import {defineComponent} from "vue";
 import SVGContent from "@/components/SVGContent.vue";
 import "normalize.css";
-import ZoomPan from "@/components/ZoomPan.vue";
 
 export default defineComponent({
   name: "App",
   components: {
-    ZoomPan,
     SVGContent
   }
 });

app/src/components/SVGContent.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="content" ref="root">
+    <div class="video-scrolls">
+      <VideoScroll v-for="scroll in scrolls" :definition="scroll"/>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import {defineComponent, onMounted, ref} from "vue";
 import createPanZoom, {PanZoom} from "panzoom";
+import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
 
 export default defineComponent({
   name: "SVGContent",
+  components: {VideoScroll},
   props: {
     url: {
       type: String,
@@ -19,6 +24,7 @@ export default defineComponent({
     const root = ref(null);
     const panzoom = ref<null | PanZoom>(null);
     const anchors = ref<SVGRectElement[]>([]);
+    const scrolls = ref<VideoScrollDef[]>([]);
     const panToAnchor = ref();
 
     onMounted(async () => {
@@ -64,13 +70,17 @@ export default defineComponent({
         }
         panToAnchor.value(anchors.value[0]);
       });
+
+      // Videoscrolls
+      scrolls.value = await processScrolls(svg);
     });
 
     return {
       root,
       panzoom,
       anchors,
-      panToAnchor
+      panToAnchor,
+      scrolls
     };
   },
 });
@@ -90,6 +100,32 @@ function processAnchors(document: XMLDocument): SVGRectElement[] {
   return result;
 }
 
+async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
+  const ratio = (svg as any).clientWidth / (svg as any).viewBox.baseVal.width;
+
+  return Promise.all(
+      Array.from(svg.getElementsByTagName("image"))
+          .filter((el) => Array.from(el.children).some((el) => el.tagName == "desc"))
+          .map(async (el) => {
+            const descNode = el.children[0]; // to fix
+            const [directionString, filesURL] = descNode.textContent!.split("\n");
+
+            const fileFetch = await fetch(`content/${filesURL}`);
+            const files = (await fileFetch.text()).split("\n").filter(Boolean).map((str) => `content/${str}`);
+
+            return {
+              top: el.y.baseVal.value * ratio,
+              left: el.x.baseVal.value * ratio,
+              direction: VideoScrollDirection.RIGHT,
+              files,
+              style: {
+                width: `${el.width.baseVal.value * ratio}px`
+              }
+            };
+          })
+  );
+}
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

app/src/components/VideoScroll.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="video-scroll">
+    <img v-for="(file, idx) in definition.files"
+         :src="file"
+         :style="{
+           top: `${Math.round(definition.top)}px`,
+           left: `${Math.round(definition.left) + width * idx}px`,
+           ...definition.style
+         }"
+    />
+
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from "vue";
+
+export default defineComponent({
+  name: "VideoScroll",
+  props: {
+    definition: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    console.debug(props.definition);
+    const width = ref(0);
+    const height = ref(0);
+
+    const definition = props.definition as VideoScrollDef;
+    getMeta(definition.files[0]).then((img) => {
+      width.value = img.width;
+      height.value = img.height;
+    });
+
+    return {
+      width,
+      height
+    };
+
+  }
+});
+
+export enum VideoScrollDirection {
+  RIGHT
+}
+
+export interface VideoScrollDef {
+  top: number,
+  left: number,
+  direction: VideoScrollDirection,
+  files: string[],
+  style?: { [key: string]: string }
+}
+
+function getMeta(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    let img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject();
+    img.src = url;
+  });
+}
+
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.video-scroll img {
+  position: absolute;
+}
+
+.initial {
+  background: red;
+}
+</style>

app/src/components/ZoomPan.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="zoompan" ref="root">
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-import {defineComponent, onMounted, ref, reactive} from "vue";
-import createPanZoom, {PanZoom} from "panzoom";
-
-export default defineComponent({
-  name: "ZoomPan",
-  setup() {
-    const root = ref(null);
-    const bbox = reactive({
-      x: undefined,
-      y: undefined
-    });
-
-    onMounted(async () => {
-      const element = root.value as unknown as HTMLDivElement;
-
-
-
-    });
-    return {
-      root,
-      bbox
-    };
-  }
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.zoompan {
-}
-</style>