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

add small dev panel

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-11 00:06:13 +01:00
parent 28b44e262e
commit 70a09e9eec
1 changed files with 61 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,29 @@
<template>
<div class="content" ref="root">
<div class="video-scrolls">
<VideoScroll v-for="scroll in scrolls" :definition="scroll"/>
<div class="svg-content">
<div class="content" ref="root">
<div class="video-scrolls">
<VideoScroll v-for="scroll in scrolls" :definition="scroll"/>
</div>
</div>
<AudioArea v-for="audio in audioAreas" :definition="audio" :bbox="bbox"/>
<div class="devpanel">
<div>
Current position: {{ Math.round(bbox.x) }}x{{ Math.round(bbox.y) }}
</div>
<div>
Zoom level: {{ currentTransform ? (Math.round(currentTransform.scale * 1000) / 1000) : '???' }}
</div>
<label>
<input v-model="showInternal" type="checkbox">
<label>Show internal elements</label>
</label>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, ref} from "vue";
import createPanZoom, {PanZoom} from "panzoom";
import createPanZoom, {PanZoom, Transform} from "panzoom";
import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
import Stats from "stats.js";
@ -23,13 +37,26 @@ export default defineComponent({
required: true
}
},
data() {
return {
showInternal: false
};
},
watch: {
showInternal(value) {
Array.from(this.root!.getElementsByClassName("internal")).forEach((el) => {
(el as SVGElement).style.visibility = value ? "visible" : "hidden";
});
}
},
setup(props, {emit}) {
const root = ref(null);
const root = ref<HTMLDivElement | null>(null);
const panzoom = ref<null | PanZoom>(null);
const anchors = ref<SVGRectElement[]>([]);
const scrolls = ref<VideoScrollDef[]>([]);
const panToAnchor = ref();
const audioAreas = ref<AudioAreaDef[]>([]);
const currentTransform = ref<Transform | null>(null);
const bbox = reactive({
x: ref(0),
y: ref(0),
@ -69,6 +96,20 @@ export default defineComponent({
}
});
panzoom.value = pz;
currentTransform.value = pz.getTransform();
// Calculate SVG-unit bounding box, update transform
pz.on("transform", function (_) {
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
bbox.x = transform.x / currentRatio * -1;
bbox.y = transform.y / currentRatio * -1;
bbox.w = window.innerWidth / currentRatio;
bbox.h = window.innerHeight / currentRatio;
currentTransform.value = transform;
});
function panToElement(element: SVGRectElement, smooth: boolean) {
const transform = pz.getTransform();
@ -103,17 +144,6 @@ export default defineComponent({
panToElement(start, false);
}
// Calculate SVG-unit bounding box
pz.on("transform", function (_) {
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
bbox.x = transform.x / currentRatio * -1;
bbox.y = transform.y / currentRatio * -1;
bbox.w = window.innerWidth / currentRatio;
bbox.h = window.innerHeight / currentRatio;
});
// Edge scrolling
const MOVE_EDGE = 75;
const MAX_SPEED = 20;
@ -194,7 +224,8 @@ export default defineComponent({
panToAnchor,
scrolls,
audioAreas,
bbox
bbox,
currentTransform
};
},
});
@ -279,4 +310,17 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
svg .internal {
visibility: hidden;
}
.devpanel {
position: fixed;
top: 0;
right: 0;
z-index: 999;
color: white;
background: #000000aa;
border: 2px solid white;
font-family: monospace;
padding: 1em 2em;
}
</style>