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

add fps counter (if VUE_APP_DEMO is set), rename svg hidden class

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-10 23:37:03 +01:00
parent 72ecb5d4c2
commit 28b44e262e
4 changed files with 237 additions and 11899 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/.env Normal file
View file

@ -0,0 +1 @@
VUE_APP_DEMO=true

12111
app/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
app/package.json
View file

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

22
app/src/components/SVGContent.vue
View file

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