github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 标尺自适应viewportSize

Browse Source
This commit is contained in:
zxc 2024-09-02 23:20:12 +08:00
parent 8f8825327f
commit 0a524410ae
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/Editor/Canvas/Ruler.vue
View File

@ -11,9 +11,10 @@
class="ruler-marker-100" class="ruler-marker-100"
:class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }" :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
v-for="marker in 20" v-for="marker in 20"
:key="`marker-100-${marker}`" :key="`h-marker-100-${marker}`"
:style="{ width: markerSize + 'px' }"
> >
<span>{{ marker * 100 }}</span> <span v-if="marker * 100 <= viewportSize">{{ marker * 100 }}</span>
</div> </div>
<div class="range" <div class="range"
@ -35,10 +36,10 @@
class="ruler-marker-100" class="ruler-marker-100"
:class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }" :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
v-for="marker in 20" v-for="marker in 20"
:key="marker" :key="`v-marker-100-${marker}`"
:style="{ height: markerSize + 'px' }" :style="{ height: markerSize + 'px' }"
> >
<span>{{ marker * 100 }}</span> <span v-if="marker * 100 <= viewportSize * viewportRatio">{{ marker * 100 }}</span>
</div> </div>
<div class="range" <div class="range"
@ -55,7 +56,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { watchEffect, computed, ref } from 'vue' import { watchEffect, computed, ref } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store' import { useMainStore, useSlidesStore } from '@/store'
import { getElementListRange } from '@/utils/element' import { getElementListRange } from '@/utils/element'
import type { PPTElement } from '@/types/slides' import type { PPTElement } from '@/types/slides'
@ -71,7 +72,8 @@ const props = defineProps<{
elementList: PPTElement[] elementList: PPTElement[]
}>() }>()
const { canvasScale, activeElementIdList } = storeToRefs(useMainStore()) const { canvasScale, activeElementIdList, viewportSize } = storeToRefs(useMainStore())
const { viewportRatio } = storeToRefs(useSlidesStore())
const elementListRange = ref<null | ReturnType<typeof getElementListRange>>(null) const elementListRange = ref<null | ReturnType<typeof getElementListRange>>(null)
@ -82,7 +84,7 @@ watchEffect(() => {
}) })
const markerSize = computed(() => { const markerSize = computed(() => {
return props.viewportStyles.width * canvasScale.value / 10 return props.viewportStyles.width * canvasScale.value / (viewportSize.value / 100)
}) })
</script> </script>
@ -111,7 +113,6 @@ const markerSize = computed(() => {
.ruler-marker-100 { .ruler-marker-100 {
height: 100%; height: 100%;
width: 10%;
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
flex-shrink: 0; flex-shrink: 0;