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

refactor: 类型安全的provide/inject

Browse Source
This commit is contained in:
pipipi-pikachu 2022-04-09 13:37:58 +08:00
parent c0d860ae27
commit 73061c0e65
8 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/types/injectKey.ts Normal file
View File

@ -0,0 +1,7 @@
import { InjectionKey, Ref } from 'vue'
export type SlideScale = Ref<number>
export type SlideId = Ref<string>
export const injectKeySlideScale: InjectionKey<SlideScale> = Symbol()
export const injectKeySlideId: InjectionKey<SlideId> = Symbol()

3
src/views/Editor/Canvas/index.vue
View File

@ -94,6 +94,7 @@ import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
import { ContextmenuItem } from '@/components/Contextmenu/types'
import { PPTElement } from '@/types/slides'
import { AlignmentLineProps } from '@/types/edit'
import { injectKeySlideScale } from '@/types/injectKey'
import { removeAllRanges } from '@/utils/selection'
import { KEYS } from '@/configs/hotkey'
@ -255,7 +256,7 @@ export default defineComponent({
]
}
provide('slideScale', canvasScale)
provide(injectKeySlideScale, canvasScale)
return {
elementList,

3
src/views/Screen/ScreenSlide.vue
View File

@ -25,6 +25,7 @@ import { computed, PropType, defineComponent, provide } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { Slide } from '@/types/slides'
import { injectKeySlideId } from '@/types/injectKey'
import { VIEWPORT_SIZE } from '@/configs/canvas'
import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@ -64,7 +65,7 @@ export default defineComponent({
const { backgroundStyle } = useSlideBackgroundStyle(background)
const slideId = computed(() => props.slide.id)
provide('slideId', slideId)
provide(injectKeySlideId, slideId)
return {
backgroundStyle,

3
src/views/Screen/ScreenSlideList.vue
View File

@ -38,6 +38,7 @@
import { computed, defineComponent, PropType, provide } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { injectKeySlideScale } from '@/types/injectKey'
import { VIEWPORT_SIZE } from '@/configs/canvas'
import ScreenSlide from './ScreenSlide.vue'
@ -73,7 +74,7 @@ export default defineComponent({
const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore())
const scale = computed(() => props.slideWidth / VIEWPORT_SIZE)
provide('slideScale', scale)
provide(injectKeySlideScale, scale)
return {
slides,

3
src/views/components/ThumbnailSlide/index.vue
View File

@ -31,6 +31,7 @@ import { computed, PropType, defineComponent, provide } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { Slide } from '@/types/slides'
import { injectKeySlideScale } from '@/types/injectKey'
import { VIEWPORT_SIZE } from '@/configs/canvas'
import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@ -62,7 +63,7 @@ export default defineComponent({
const { backgroundStyle } = useSlideBackgroundStyle(background)
const scale = computed(() => props.size / VIEWPORT_SIZE)
provide('slideScale', scale)
provide(injectKeySlideScale, scale)
return {
scale,

7
src/views/components/element/AudioElement/ScreenAudioElement.vue
View File

@ -36,10 +36,11 @@
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, ref, Ref } from 'vue'
import { computed, defineComponent, inject, PropType, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { PPTAudioElement } from '@/types/slides'
import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
import { VIEWPORT_SIZE } from '@/configs/canvas'
import AudioPlayer from './AudioPlayer.vue'
@ -58,8 +59,8 @@ export default defineComponent({
setup(props) {
const { viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
const scale: Ref<number> = inject('slideScale') || ref(1)
const slideId: Ref<string> = inject('slideId') || ref('')
const scale = inject(injectKeySlideScale) || ref(1)
const slideId = inject(injectKeySlideId) || ref('')
const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)

5
src/views/components/element/ChartElement/Chart.vue
View File

@ -27,7 +27,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, inject, onMounted, PropType, ref, Ref, watch } from 'vue'
import { computed, defineComponent, inject, onMounted, PropType, ref, watch } from 'vue'
import { upperFirst } from 'lodash'
import tinycolor from 'tinycolor2'
import Chartist, {
@ -39,6 +39,7 @@ import Chartist, {
IPieChartOptions,
} from 'chartist'
import { ChartData, ChartType } from '@/types/slides'
import { injectKeySlideScale } from '@/types/injectKey'
import 'chartist/dist/scss/chartist.scss'
@ -81,7 +82,7 @@ export default defineComponent({
},
setup(props) {
const chartRef = ref<HTMLElement>()
const slideScale: Ref<number> = inject('slideScale') || ref(1)
const slideScale = inject(injectKeySlideScale) || ref(1)
let chart: IChartistLineChart | IChartistBarChart | IChartistPieChart | undefined

5
src/views/components/element/VideoElement/ScreenVideoElement.vue
View File

@ -30,6 +30,7 @@ import { computed, defineComponent, inject, PropType, Ref, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { PPTVideoElement } from '@/types/slides'
import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
import VideoPlayer from './VideoPlayer/index.vue'
@ -47,8 +48,8 @@ export default defineComponent({
setup() {
const { currentSlide } = storeToRefs(useSlidesStore())
const scale: Ref<number> = inject('slideScale') || ref(1)
const slideId: Ref<string> = inject('slideId') || ref('')
const scale = inject(injectKeySlideScale) || ref(1)
const slideId = inject(injectKeySlideId) || ref('')
const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)