improve devpanel (cursor position, styling)

This commit is contained in:
Tomáš Mládek 2021-01-11 22:47:36 +01:00
parent bb085c174e
commit 3ee9ae83ca

View file

@ -8,10 +8,15 @@
<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) }}
<span>Current viewport position:</span>
<span>{{ Math.round(bbox.x) }}x{{ Math.round(bbox.y) }}</span>
</div>
<div>
Zoom level: {{ (Math.round(bbox.z * 1000) / 1000) }}
<span>Current cursor position:</span>
<span>{{ Math.round(mousePosition.x) }}x{{ Math.round(mousePosition.y) }}</span>
</div>
<div>
<span>Zoom level:</span><span>{{ (Math.round(bbox.z * 1000) / 1000) }}</span>
</div>
<label>
<input v-model="showInternal" type="checkbox">
@ -64,6 +69,10 @@ export default defineComponent({
h: ref(0),
z: ref(1)
});
const mousePosition = reactive({
x: ref(0),
y: ref(0)
});
onMounted(async () => {
const element = root.value as unknown as HTMLDivElement;
@ -181,6 +190,10 @@ export default defineComponent({
let mouse: MouseEvent | undefined;
window.addEventListener("mousemove", (ev) => {
mouse = ev;
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
mousePosition.x = (mouse.clientX - transform.x) / currentRatio;
mousePosition.y = (mouse.clientY - transform.y) / currentRatio;
});
function animate() {
@ -241,7 +254,8 @@ export default defineComponent({
panToAnchor,
scrolls,
audioAreas,
bbox
bbox,
mousePosition
};
},
});
@ -359,4 +373,17 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
font-family: monospace;
padding: 1em 2em;
}
.devpanel div {
display: flex;
justify-content: space-between;
}
.devpanel label {
float: right;
}
.devpanel div span {
margin: 0 .5em;
}
</style>