add fps counter (if VUE_APP_DEMO is set), rename svg hidden class
This commit is contained in:
parent
72ecb5d4c2
commit
28b44e262e
4 changed files with 237 additions and 11899 deletions
1
app/.env
Normal file
1
app/.env
Normal file
|
@ -0,0 +1 @@
|
|||
VUE_APP_DEMO=true
|
12111
app/package-lock.json
generated
12111
app/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -10,10 +10,12 @@
|
|||
"core-js": "^3.6.5",
|
||||
"normalize.css": "^8.0.1",
|
||||
"panzoom": "^9.4.1",
|
||||
"stats.js": "^0.17.0",
|
||||
"vue": "^3.0.0",
|
||||
"vuex": "^4.0.0-0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/stats.js": "^0.17.0",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-typescript": "~4.5.0",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
|
|
|
@ -12,6 +12,7 @@ import {defineComponent, onMounted, reactive, ref} from "vue";
|
|||
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";
|
||||
|
||||
export default defineComponent({
|
||||
name: "SVGContent",
|
||||
|
@ -173,6 +174,19 @@ export default defineComponent({
|
|||
});
|
||||
});
|
||||
|
||||
if (process.env.VUE_APP_DEMO) {
|
||||
const stats = new Stats();
|
||||
document.body.appendChild(stats.dom);
|
||||
|
||||
function noop() {
|
||||
stats.begin();
|
||||
stats.end();
|
||||
requestAnimationFrame(noop);
|
||||
}
|
||||
|
||||
requestAnimationFrame(noop);
|
||||
}
|
||||
|
||||
return {
|
||||
root,
|
||||
panzoom,
|
||||
|
@ -193,7 +207,7 @@ function processAnchors(document: XMLDocument): SVGRectElement[] {
|
|||
if (anchor === null) {
|
||||
break;
|
||||
}
|
||||
anchor.classList.add("hidden");
|
||||
anchor.classList.add("internal");
|
||||
result.push(anchor);
|
||||
i++;
|
||||
}
|
||||
|
@ -236,7 +250,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
|
|||
return Array.from(svg.getElementsByTagName("circle"))
|
||||
.filter((el) => Array.from(el.children).some((el) => el.tagName == "desc"))
|
||||
.map((el) => {
|
||||
el.classList.add("hidden");
|
||||
el.classList.add("internal");
|
||||
|
||||
const descNode = el.children[0]; // to fix
|
||||
const audioSrc = descNode.textContent!.trim();
|
||||
|
@ -253,7 +267,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
|
|||
function processStart(svg: XMLDocument): SVGRectElement | null {
|
||||
const start = svg.getElementById("start");
|
||||
if (start) {
|
||||
start.classList.add("hidden");
|
||||
start.classList.add("internal");
|
||||
}
|
||||
return start as (SVGRectElement | null);
|
||||
}
|
||||
|
@ -262,7 +276,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
|
|||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style>
|
||||
.hidden {
|
||||
svg .internal {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue