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", "core-js": "^3.6.5",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"panzoom": "^9.4.1", "panzoom": "^9.4.1",
"stats.js": "^0.17.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vuex": "^4.0.0-0" "vuex": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {
"@types/stats.js": "^0.17.0",
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~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 createPanZoom, {PanZoom} from "panzoom";
import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue"; import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue"; import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
import Stats from "stats.js";
export default defineComponent({ export default defineComponent({
name: "SVGContent", 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 { return {
root, root,
panzoom, panzoom,
@ -193,7 +207,7 @@ function processAnchors(document: XMLDocument): SVGRectElement[] {
if (anchor === null) { if (anchor === null) {
break; break;
} }
anchor.classList.add("hidden"); anchor.classList.add("internal");
result.push(anchor); result.push(anchor);
i++; i++;
} }
@ -236,7 +250,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
return Array.from(svg.getElementsByTagName("circle")) return Array.from(svg.getElementsByTagName("circle"))
.filter((el) => Array.from(el.children).some((el) => el.tagName == "desc")) .filter((el) => Array.from(el.children).some((el) => el.tagName == "desc"))
.map((el) => { .map((el) => {
el.classList.add("hidden"); el.classList.add("internal");
const descNode = el.children[0]; // to fix const descNode = el.children[0]; // to fix
const audioSrc = descNode.textContent!.trim(); const audioSrc = descNode.textContent!.trim();
@ -253,7 +267,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
function processStart(svg: XMLDocument): SVGRectElement | null { function processStart(svg: XMLDocument): SVGRectElement | null {
const start = svg.getElementById("start"); const start = svg.getElementById("start");
if (start) { if (start) {
start.classList.add("hidden"); start.classList.add("internal");
} }
return start as (SVGRectElement | null); 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 --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style> <style>
.hidden { svg .internal {
visibility: hidden; visibility: hidden;
} }
</style> </style>