-
-
Notifications
You must be signed in to change notification settings - Fork 107
/
Background.vue
34 lines (30 loc) · 1.23 KB
/
Background.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
<div class="background" :style="styles" />
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useGraph, useViewModel } from "../utility";
export default defineComponent({
setup() {
const { viewModel } = useViewModel();
const { graph } = useGraph();
const styles = computed(() => {
const config = viewModel.value.settings.background;
const positionLeft = graph.value.panning.x * graph.value.scaling;
const positionTop = graph.value.panning.y * graph.value.scaling;
const size = graph.value.scaling * config.gridSize;
const subSize = size / config.gridDivision;
const backgroundSize = `${size}px ${size}px, ${size}px ${size}px`;
const subGridBackgroundSize =
graph.value.scaling > config.subGridVisibleThreshold
? `, ${subSize}px ${subSize}px, ${subSize}px ${subSize}px`
: "";
return {
backgroundPosition: `left ${positionLeft}px top ${positionTop}px`,
backgroundSize: `${backgroundSize} ${subGridBackgroundSize}`,
};
});
return { styles };
},
});
</script>