优化模板引用声明

src/components/Chart.vue

@@ -57,7 +57,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const chartRef = ref<HTMLElement | null>(null)
+    const chartRef = ref<HTMLElement>()
     const slideScale: Ref<number> = inject('slideScale') || ref(1)
 
     let chart: IChartistLineChart | IChartistBarChart | IChartistPieChart | undefined

src/components/ColorPicker/Alpha.vue

@@ -40,7 +40,7 @@ export default defineComponent({
       return `linear-gradient(to right, rgba(${rgbaStr}, 0) 0%, rgba(${rgbaStr}, 1) 100%)`
     })
 
-    const alphaRef = ref<HTMLElement | null>(null)
+    const alphaRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
       if(!alphaRef.value) return

src/components/ColorPicker/Hue.vue

@@ -54,7 +54,7 @@ export default defineComponent({
       oldHue.value = h
     })
 
-    const hueRef = ref<HTMLElement | null>(null)
+    const hueRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
       if(!hueRef.value) return

src/components/ColorPicker/Saturation.vue

@@ -51,7 +51,7 @@ export default defineComponent({
       emit('change', param)
     }, 20, { leading: true, trailing: false })
 
-    const saturationRef = ref<HTMLElement | null>(null)
+    const saturationRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
       if(!saturationRef.value) return

src/components/FileInput.vue

@@ -24,7 +24,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const inputRef = ref<HTMLInputElement | null>(null)
+    const inputRef = ref<HTMLInputElement>()
 
     const handleClick = () => {
       if(!inputRef.value) return

src/components/WritingBoard.vue

@@ -51,8 +51,8 @@ export default defineComponent({
   },
   setup(props) {
     let ctx: CanvasRenderingContext2D | null = null
-    const writingBoardRef = ref<HTMLElement | null>(null)
+    const writingBoardRef = ref<HTMLElement>()
-    const canvasRef = ref<HTMLCanvasElement | null>(null)
+    const canvasRef = ref<HTMLCanvasElement>()
     let lastPos = {
       x: 0,
       y: 0,

src/views/Editor/Canvas/ElementCreateSelection.vue

@@ -42,7 +42,7 @@ export default defineComponent({
     const start = ref<[number, number] | null>(null)
     const end = ref<[number, number] | null>(null)
 
-    const selectionRef = ref<HTMLElement | null>(null)
+    const selectionRef = ref<HTMLElement>()
     const offset = reactive({
       x: 0,
       y: 0,

src/views/Editor/Canvas/hooks/useDropImageOrText.ts

@@ -4,7 +4,7 @@ import { State } from '@/store'
 import { getImageDataURL } from '@/utils/image'
 import useCreateElement from '@/hooks/useCreateElement'
 
-export default (elementRef: Ref<HTMLElement | null>) => {
+export default (elementRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const disableHotkeys = computed(() => store.state.disableHotkeys)
 

src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts

@@ -4,7 +4,7 @@ import { MutationTypes, State } from '@/store'
 import { CreateElementSelectionData, CreatingLineElement, CreatingShapeElement } from '@/types/edit'
 import useCreateElement from '@/hooks/useCreateElement'
 
-export default (viewportRef: Ref<HTMLElement | null>) => {
+export default (viewportRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const canvasScale = computed(() => store.state.canvasScale)
   const creatingElement = computed(() => store.state.creatingElement)

src/views/Editor/Canvas/hooks/useMouseSelection.ts

@@ -4,7 +4,7 @@ import { State, MutationTypes } from '@/store'
 import { PPTElement } from '@/types/slides'
 import { getElementRange } from '@/utils/element'
 
-export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | null>) => {
+export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const canvasScale = computed(() => store.state.canvasScale)
 

src/views/Editor/Canvas/hooks/useRotateElement.ts

@@ -13,7 +13,7 @@ const getAngleFromCoordinate = (x: number, y: number) => {
   return angle
 }
 
-export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | null>) => {
+export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const canvasScale = computed(() => store.state.canvasScale)
 

src/views/Editor/Canvas/hooks/useViewportSize.ts

@@ -3,7 +3,7 @@ import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 
-export default (canvasRef: Ref<HTMLElement | null>) => {
+export default (canvasRef: Ref<HTMLElement | undefined>) => {
   const viewportLeft = ref(0)
   const viewportTop = ref(0)
 

src/views/Editor/Canvas/index.vue

@@ -127,7 +127,7 @@ export default defineComponent({
     const ctrlKeyState = computed(() => store.state.ctrlKeyState)
     const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)
 
-    const viewportRef = ref<HTMLElement | null>(null)
+    const viewportRef = ref<HTMLElement>()
     const isShowGridLines = ref(false)
     const alignmentLines = ref<AlignmentLineProps[]>([])
 
@@ -143,7 +143,7 @@ export default defineComponent({
 
     useDropImageOrText(viewportRef)
 
-    const canvasRef = ref<HTMLElement | null>(null)
+    const canvasRef = ref<HTMLElement>()
     const canvasScale = computed(() => store.state.canvasScale)
     const { viewportStyles } = useViewportSize(canvasRef)
 

src/views/components/element/TextElement/index.vue

@@ -82,7 +82,7 @@ export default defineComponent({
     const store = useStore<State>()
     const { addHistorySnapshot } = useHistorySnapshot()
 
-    const elementRef = ref<HTMLElement | null>(null)
+    const elementRef = ref<HTMLElement>()
 
     const isScaling = ref(false)
     const realHeightCache = ref(-1)
@@ -129,7 +129,7 @@ export default defineComponent({
       if(elementRef.value) resizeObserver.unobserve(elementRef.value)
     })
     
-    const editorViewRef = ref<Element | null>(null)
+    const editorViewRef = ref<HTMLElement>()
     let editorView: EditorView
 
     const handleFocus = () => {