video scrolls

This commit is contained in:
Tomáš Mládek 2021-01-09 20:36:20 +01:00
parent 1ce3b244f0
commit 22ee6f50cf
5 changed files with 118 additions and 42 deletions

2
app/.gitignore vendored
View file

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

View file

@ -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
}
});

View file

@ -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 -->

View file

@ -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>

View file

@ -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>