thm
/
line-and-surface
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects Releases Wiki Activity

add initial loading bar (fix #4)

master
Tomáš Mládek 2021-01-16 14:33:18 +01:00
parent 899c9a1bdd
commit 124ce4779f
3 changed files with 11749 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11721
app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
app/package.json
View File

@ -8,6 +8,7 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"fetch-progress": "^1.3.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"panzoom": "^9.4.1", "panzoom": "^9.4.1",
"stats.js": "^0.17.0", "stats.js": "^0.17.0",

40
app/src/components/SVGContent.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div class="svg-content"> <div class="svg-content">
<div :class="['loading', {loaded: loadedPercent == 100}]">
<div :style="{width: `${loadedPercent}%`}" class="loading-bar"></div>
</div>
<div class="content" ref="root"> <div class="content" ref="root">
<div class="video-scrolls"> <div class="video-scrolls">
<VideoScroll v-for="scroll in scrolls" :definition="scroll"/> <VideoScroll v-for="scroll in scrolls" :definition="scroll"/>
@ -33,6 +36,7 @@ import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/Vi
import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue"; import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
import Stats from "stats.js"; import Stats from "stats.js";
import {rotate} from "@/utils"; import {rotate} from "@/utils";
import fetchProgress from "fetch-progress";
export interface BoundingBox { export interface BoundingBox {
@ -67,6 +71,7 @@ export default defineComponent({
}, },
setup(props, {emit}) { setup(props, {emit}) {
const root = ref<HTMLDivElement | null>(null); const root = ref<HTMLDivElement | null>(null);
const loadedPercent = ref(0);
const panzoom = ref<null | PanZoom>(null); const panzoom = ref<null | PanZoom>(null);
const anchors = ref<SVGRectElement[]>([]); const anchors = ref<SVGRectElement[]>([]);
const scrolls = ref<VideoScrollDef[]>([]); const scrolls = ref<VideoScrollDef[]>([]);
@ -91,10 +96,16 @@ export default defineComponent({
// Fetch & load SVG // Fetch & load SVG
console.info(`[SVG] Fetching "${props.url}..."`); console.info(`[SVG] Fetching "${props.url}..."`);
const fetchResult = await fetch(props.url); const fetchResult = await fetch(props.url).then(
console.debug("[SVG] Fetched, parsing..."); fetchProgress({
onProgress(progress) {
loadedPercent.value = (progress as any).percentage;
},
})
);
const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document; const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
console.debug("[SVG] Parsed."); console.debug("[SVG] Loaded.");
loadedPercent.value = 100;
const svg = element.appendChild(svgParsed.firstElementChild as Element) as any; const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
// Set document background // Set document background
@ -304,6 +315,7 @@ export default defineComponent({
return { return {
root, root,
loadedPercent,
panzoom, panzoom,
anchors, anchors,
panToAnchor, panToAnchor,
@ -433,6 +445,28 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
visibility: hidden; visibility: hidden;
} }
.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: black;
transition: opacity 0.5s;
opacity: 1;
}
.loaded {
opacity: 0 !important;
}
.loading-bar {
height: 6px;
background: white;
margin: 25% auto;
transition: width 0.2s;
}
.devpanel { .devpanel {
position: fixed; position: fixed;
top: 0; top: 0;