style: eslint规则修改

.eslintrc.js

@@ -49,13 +49,7 @@ module.exports = {
       'named': 'never',
       'asyncArrow': 'always',
     }],
-    'keyword-spacing': ['error', { 'overrides': {
-      'if': { 'after': false },
-      'for': { 'after': false },
-      'while': { 'after': false },
-      'function': { 'after': false },
-      'switch': { 'after': false },
-    }}],
+    'keyword-spacing': ['error'],
     'prefer-const': 'error',
     'no-useless-return': 'error',
     'array-bracket-spacing': 'error',

src/components/ColorPicker/Alpha.vue

@@ -43,17 +43,17 @@ export default defineComponent({
     const alphaRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
-      if(!alphaRef.value) return
+      if (!alphaRef.value) return
       const containerWidth = alphaRef.value.clientWidth
       const xOffset = alphaRef.value.getBoundingClientRect().left + window.pageXOffset
       const left = e.pageX - xOffset
       let a
 
-      if(left < 0) a = 0
-      else if(left > containerWidth) a = 1
+      if (left < 0) a = 0
+      else if (left > containerWidth) a = 1
       else a = Math.round(left * 100 / containerWidth) / 100
 
-      if(color.value.a !== a) {
+      if (color.value.a !== a) {
         emit('colorChange', {
           r: color.value.r,
           g: color.value.g,

src/components/ColorPicker/Checkboard.vue

@@ -11,7 +11,7 @@ const renderCheckboard = (white: string, grey: string, size: number) => {
   canvas.width = canvas.height = size * 2
   const ctx = canvas.getContext('2d')
   
-  if(!ctx) return null
+  if (!ctx) return null
 
   ctx.fillStyle = white
   ctx.fillRect(0, 0, canvas.width, canvas.height)
@@ -24,7 +24,7 @@ const renderCheckboard = (white: string, grey: string, size: number) => {
 
 const getCheckboard = (white: string, grey: string, size: number) => {
   const key = white + ',' + grey + ',' + size
-  if(checkboardCache[key]) return checkboardCache[key]
+  if (checkboardCache[key]) return checkboardCache[key]
   
   const checkboard = renderCheckboard(white, grey, size)
   checkboardCache[key] = checkboard

src/components/ColorPicker/EditableInput.vue

@@ -23,14 +23,14 @@ export default defineComponent({
   setup(props, { emit }) {
     const val = computed(() => {
       let _hex = ''
-      if(props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
+      if (props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
       else _hex = tinycolor(props.value).toHexString().toUpperCase()
       return _hex.replace('#', '')
     })
 
     const handleInput = (e: InputEvent) => {
       const value = (e.target as HTMLInputElement).value
-      if(value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
+      if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
     }
 
     return {

src/components/ColorPicker/Hue.vue

@@ -37,40 +37,40 @@ export default defineComponent({
     
     const color = computed(() => {
       const hsla = tinycolor(props.value).toHsl()
-      if(hsla.s === 0) hsla.h = props.hue
+      if (hsla.s === 0) hsla.h = props.hue
       return hsla
     })
 
     const pointerLeft = computed(() => {
-      if(color.value.h === 0 && pullDirection.value === 'right') return '100%'
+      if (color.value.h === 0 && pullDirection.value === 'right') return '100%'
       return color.value.h * 100 / 360 + '%'
     })
 
     watch(() => props.value, () => {
       const hsla = tinycolor(props.value).toHsl()
       const h = hsla.s === 0 ? props.hue : hsla.h
-      if(h !== 0 && h - oldHue.value > 0) pullDirection.value = 'right'
-      if(h !== 0 && h - oldHue.value < 0) pullDirection.value = 'left'
+      if (h !== 0 && h - oldHue.value > 0) pullDirection.value = 'right'
+      if (h !== 0 && h - oldHue.value < 0) pullDirection.value = 'left'
       oldHue.value = h
     })
 
     const hueRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
-      if(!hueRef.value) return
+      if (!hueRef.value) return
 
       const containerWidth = hueRef.value.clientWidth
       const xOffset = hueRef.value.getBoundingClientRect().left + window.pageXOffset
       const left = e.pageX - xOffset
       let h, percent
       
-      if(left < 0) h = 0
-      else if(left > containerWidth) h = 360
+      if (left < 0) h = 0
+      else if (left > containerWidth) h = 360
       else {
         percent = left * 100 / containerWidth
         h = (360 * percent / 100)
       }
-      if(color.value.h !== h) {
+      if (color.value.h !== h) {
         emit('colorChange', {
           h,
           l: color.value.l,

src/components/ColorPicker/Saturation.vue

@@ -39,7 +39,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const color = computed(() => {
       const hsva = tinycolor(props.value).toHsv()
-      if(hsva.s === 0) hsva.h = props.hue
+      if (hsva.s === 0) hsva.h = props.hue
       return hsva
     })
 
@@ -47,14 +47,14 @@ export default defineComponent({
     const pointerTop = computed(() => (-(color.value.v * 100) + 1) + 100 + '%')
     const pointerLeft = computed(() => color.value.s * 100 + '%')
 
-    const emitChangeEvent = throttle(function(param) {
+    const emitChangeEvent = throttle(function (param) {
       emit('colorChange', param)
     }, 20, { leading: true, trailing: false })
 
     const saturationRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
-      if(!saturationRef.value) return
+      if (!saturationRef.value) return
       
       const containerWidth = saturationRef.value.clientWidth
       const containerHeight = saturationRef.value.clientHeight

src/components/ColorPicker/index.vue

@@ -91,7 +91,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
   const bStep = (_endColor.b - _startColor.b) / step
   const gradientColorArr = []
 
-  for(let i = 0; i < step; i++) {
+  for (let i = 0; i < step; i++) {
     const gradientColor = tinycolor({
       r: _startColor.r + rStep * i,
       g: _startColor.g + gStep * i,
@@ -104,7 +104,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
 
 const getPresetColors = () => {
   const presetColors = []
-  for(const color of presetColorConfig) {
+  for (const color of presetColorConfig) {
     presetColors.push(gradient(color[1], color[0], 5))
   }
   return presetColors
@@ -151,7 +151,7 @@ export default defineComponent({
     }
 
     const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
-      if('h' in value) {
+      if ('h' in value) {
         hue.value = value.h
         color.value = tinycolor(value).toRgb()
       }

src/components/Contextmenu/index.vue

@@ -83,8 +83,8 @@ export default defineComponent({
     })
 
     const handleClickMenuItem = (item: ContextmenuItem) => {
-      if(item.disable || item.children) return
-      if(item.handler) item.handler(props.el)
+      if (item.disable || item.children) return
+      if (item.handler) item.handler(props.el)
       props.removeContextMenu()
     }
 

src/components/FileInput.vue

@@ -27,13 +27,13 @@ export default defineComponent({
     const inputRef = ref<HTMLInputElement>()
 
     const handleClick = () => {
-      if(!inputRef.value) return
+      if (!inputRef.value) return
       inputRef.value.value = ''
       inputRef.value.click()
     }
     const handleChange = (e: InputEvent) => {
       const files = (e.target as HTMLInputElement).files
-      if(files) emit('change', files)
+      if (files) emit('change', files)
     }
 
     return {

src/components/WritingBoard.vue

@@ -68,10 +68,10 @@ export default defineComponent({
     const mouseInCanvas = ref(false)
 
     const initCanvas = () => {
-      if(!canvasRef.value || !writingBoardRef.value) return
+      if (!canvasRef.value || !writingBoardRef.value) return
 
       ctx = canvasRef.value.getContext('2d')
-      if(!ctx) return
+      if (!ctx) return
 
       canvasRef.value.width = writingBoardRef.value.clientWidth
       canvasRef.value.height = writingBoardRef.value.clientHeight
@@ -97,17 +97,17 @@ export default defineComponent({
       const v = s / t
       let lineWidth
 
-      if(v <= minV) lineWidth = maxWidth
-      else if(v >= maxV) lineWidth = minWidth
+      if (v <= minV) lineWidth = maxWidth
+      else if (v >= maxV) lineWidth = minWidth
       else lineWidth = maxWidth - v / maxV * maxWidth
 
-      if(lastLineWidth === -1) return lineWidth
+      if (lastLineWidth === -1) return lineWidth
       return lineWidth * 1 / 3 + lastLineWidth * 2 / 3
     }
 
     // 画笔绘制方法
     const draw = (posX: number, posY: number, lineWidth: number) => {
-      if(!ctx) return
+      if (!ctx) return
 
       const lastPosX = lastPos.x
       const lastPosY = lastPos.y
@@ -123,7 +123,7 @@ export default defineComponent({
 
     // 橡皮擦除方法
     const erase = (posX: number, posY: number) => {
-      if(!ctx || !canvasRef.value) return
+      if (!ctx || !canvasRef.value) return
       const lastPosX = lastPos.x
       const lastPosY = lastPos.y
 
@@ -164,7 +164,7 @@ export default defineComponent({
       const time = new Date().getTime()
 
       // 画笔模式（这里通过绘制速度调节画笔的粗细）
-      if(props.model === 'pen') {
+      if (props.model === 'pen') {
         const s = getDistance(posX, posY)
         const t = time - lastTime
         const lineWidth = getLineWidth(s, t)
@@ -192,18 +192,18 @@ export default defineComponent({
     const handleMousemove = (e: MouseEvent) => {
       updateMousePosition(e)
 
-      if(!isMouseDown) return
+      if (!isMouseDown) return
       startMove(e.offsetX, e.offsetY)
     }
 
     const handleMouseup = () => {
-      if(!isMouseDown) return
+      if (!isMouseDown) return
       isMouseDown = false
     }
 
     // 清空画布
     const clearCanvas = () => {
-      if(!ctx || !canvasRef.value) return
+      if (!ctx || !canvasRef.value) return
       ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
     }
 

src/hooks/useAlignElementToCanvas.ts

@@ -18,31 +18,31 @@ export default () => {
     const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value)
   
     const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
-    for(const element of newElementList) {
-      if(!activeElementIdList.value.includes(element.id)) continue
+    for (const element of newElementList) {
+      if (!activeElementIdList.value.includes(element.id)) continue
       
-      if(command === ElementAlignCommands.TOP) {
+      if (command === ElementAlignCommands.TOP) {
         const offsetY = minY - 0
         element.top = element.top - offsetY            
       }
-      else if(command === ElementAlignCommands.VERTICAL) {
+      else if (command === ElementAlignCommands.VERTICAL) {
         const offsetY = minY + (maxY - minY) / 2 - viewportHeight / 2
         element.top = element.top - offsetY            
       }
-      else if(command === ElementAlignCommands.BOTTOM) {
+      else if (command === ElementAlignCommands.BOTTOM) {
         const offsetY = maxY - viewportHeight
         element.top = element.top - offsetY       
       }
       
-      else if(command === ElementAlignCommands.LEFT) {
+      else if (command === ElementAlignCommands.LEFT) {
         const offsetX = minX - 0
         element.left = element.left - offsetX            
       }
-      else if(command === ElementAlignCommands.HORIZONTAL) {
+      else if (command === ElementAlignCommands.HORIZONTAL) {
         const offsetX = minX + (maxX - minX) / 2 - viewportWidth / 2
         element.left = element.left - offsetX            
       }
-      else if(command === ElementAlignCommands.RIGHT) {
+      else if (command === ElementAlignCommands.RIGHT) {
         const offsetX = maxX - viewportWidth
         element.left = element.left - offsetX            
       }

src/hooks/useCombineElement.ts

@@ -14,14 +14,14 @@ export default () => {
 
   // 组合元素（为当前所有激活元素添加一个相同的groupId）
   const combineElements = () => {
-    if(!activeElementList.value.length) return
+    if (!activeElementList.value.length) return
 
     let newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
     const groupId = createRandomCode()
 
     const combineElementList: PPTElement[] = []
-    for(const element of newElementList) {
-      if(activeElementIdList.value.includes(element.id)) {
+    for (const element of newElementList) {
+      if (activeElementIdList.value.includes(element.id)) {
         element.groupId = groupId
         combineElementList.push(element)
       }
@@ -41,13 +41,13 @@ export default () => {
 
   // 取消组合元素（移除所有被激活元素的groupId）
   const uncombineElements = () => {
-    if(!activeElementList.value.length) return
+    if (!activeElementList.value.length) return
     const hasElementInGroup = activeElementList.value.some(item => item.groupId)
-    if(!hasElementInGroup) return
+    if (!hasElementInGroup) return
     
     const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
-    for(const element of newElementList) {
-      if(activeElementIdList.value.includes(element.id) && element.groupId) delete element.groupId
+    for (const element of newElementList) {
+      if (activeElementIdList.value.includes(element.id) && element.groupId) delete element.groupId
     }
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
     addHistorySnapshot()

src/hooks/useCopyAndPasteElement.ts

@@ -16,7 +16,7 @@ export default () => {
   const { deleteElement } = useDeleteElement()
 
   const copyElement = () => {
-    if(!activeElementIdList.value.length) return
+    if (!activeElementIdList.value.length) return
 
     const text = encrypt(JSON.stringify({
       type: 'elements',

src/hooks/useCreateElement.ts

@@ -39,11 +39,11 @@ export default () => {
     getImageSize(src).then(({ width, height }) => {
       const scale = height / width
   
-      if(scale < VIEWPORT_ASPECT_RATIO && width > VIEWPORT_SIZE) {
+      if (scale < VIEWPORT_ASPECT_RATIO && width > VIEWPORT_SIZE) {
         width = VIEWPORT_SIZE
         height = width * scale
       }
-      else if(height > VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO) {
+      else if (height > VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO) {
         height = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO
         width = height / scale
       }

src/hooks/useDeleteElement.ts

@@ -11,7 +11,7 @@ export default () => {
   const { addHistorySnapshot } = useHistorySnapshot()
 
   const deleteElement = () => {
-    if(!activeElementIdList.value.length) return
+    if (!activeElementIdList.value.length) return
     const newElementList = currentSlide.value.elements.filter(el => !activeElementIdList.value.includes(el.id))
     store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
@@ -19,7 +19,7 @@ export default () => {
   }
 
   const deleteAllElements = () => {
-    if(!currentSlide.value.elements.length) return
+    if (!currentSlide.value.elements.length) return
     store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: [] })
     addHistorySnapshot()

src/hooks/useHistorySnapshot.ts

@@ -5,15 +5,15 @@ import { ActionTypes, useStore } from '@/store'
 export default () => {
   const store = useStore()
 
-  const addHistorySnapshot = debounce(function() {
+  const addHistorySnapshot = debounce(function () {
     store.dispatch(ActionTypes.ADD_SNAPSHOT)
   }, 300, { trailing: true })
 
-  const redo = throttle(function() {
+  const redo = throttle(function () {
     store.dispatch(ActionTypes.RE_DO)
   }, 100, { leading: true, trailing: false })
 
-  const undo = throttle(function() {
+  const undo = throttle(function () {
     store.dispatch(ActionTypes.UN_DO)
   }, 100, { leading: true, trailing: false })
 

src/hooks/useLockElement.ts

@@ -13,8 +13,8 @@ export default () => {
   const lockElement = () => {
     const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
   
-    for(const element of newElementList) {
-      if(activeElementIdList.value.includes(element.id)) element.lock = true
+    for (const element of newElementList) {
+      if (activeElementIdList.value.includes(element.id)) element.lock = true
     }
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
     store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
@@ -24,15 +24,15 @@ export default () => {
   const unlockElement = (handleElement: PPTElement) => {
     const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
 
-    if(handleElement.groupId) {
-      for(const element of newElementList) {
-        if(element.groupId === handleElement.groupId) element.lock = false
+    if (handleElement.groupId) {
+      for (const element of newElementList) {
+        if (element.groupId === handleElement.groupId) element.lock = false
       }
       return newElementList
     }
     
-    for(const element of newElementList) {
-      if(element.id === handleElement.id) {
+    for (const element of newElementList) {
+      if (element.id === handleElement.id) {
         element.lock = false
         break
       }

src/hooks/useMoveElement.ts

@@ -13,9 +13,9 @@ export default () => {
 
   const moveElement = (command: string) => {
     const newElementList = currentSlide.value.elements.map(el => {
-      if(activeElementIdList.value.includes(el.id)) {
+      if (activeElementIdList.value.includes(el.id)) {
         let { left, top } = el
-        switch(command) {
+        switch (command) {
           case KEYS.LEFT: 
             left = left - 1
             break

src/hooks/useOrderElement.ts

@@ -22,14 +22,14 @@ export default () => {
     const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
 
     // 被操作的元素是组合元素成员
-    if(element.groupId) {
+    if (element.groupId) {
 
       // 获取该组合元素全部成员，以及组合元素层级范围
       const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
       const { minIndex, maxIndex } = getCombineElementIndexRange(elementList, combineElementList)
 
       // 无法移动（已经处在顶层）
-      if(maxIndex === elementList.length - 1) return null
+      if (maxIndex === elementList.length - 1) return null
 
       // 该组合元素上一层的元素，以下简称为【元素next】
       const nextElement = copyOfElementList[maxIndex + 1]
@@ -39,7 +39,7 @@ export default () => {
 
       // 如果【元素next】也是组合元素成员（另一个组合，不是上面被移除的那一组，以下简称为【组合next】）
       // 需要获取【组合next】全部成员的长度，将上面移除的组合元素全部成员添加到【组合next】全部成员的上方
-      if(nextElement.groupId) {
+      if (nextElement.groupId) {
         const nextCombineElementList = copyOfElementList.filter(_element => _element.groupId === nextElement.groupId)
         copyOfElementList.splice(minIndex + nextCombineElementList.length, 0, ...movedElementList)
       }
@@ -55,7 +55,7 @@ export default () => {
       const elementIndex = elementList.findIndex(item => item.id === element.id)
 
       // 无法移动（已经处在顶层）
-      if(elementIndex === elementList.length - 1) return null
+      if (elementIndex === elementList.length - 1) return null
 
       // 上一层的元素，以下简称为【元素next】
       const nextElement = copyOfElementList[elementIndex + 1]
@@ -65,7 +65,7 @@ export default () => {
 
       // 如果【元素next】是组合元素成员
       // 需要获取该组合全部成员的长度，将上面移除的元素添加到该组合全部成员的上方
-      if(nextElement.groupId) {
+      if (nextElement.groupId) {
         const combineElementList = copyOfElementList.filter(_element => _element.groupId === nextElement.groupId)
         copyOfElementList.splice(elementIndex + combineElementList.length, 0, movedElement)
       }
@@ -81,13 +81,13 @@ export default () => {
   const moveDownElement = (elementList: PPTElement[], element: PPTElement) => {
     const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
 
-    if(element.groupId) {
+    if (element.groupId) {
       const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
       const { minIndex } = getCombineElementIndexRange(elementList, combineElementList)
-      if(minIndex === 0) return null
+      if (minIndex === 0) return null
       const prevElement = copyOfElementList[minIndex - 1]
       const movedElementList = copyOfElementList.splice(minIndex, combineElementList.length)
-      if(prevElement.groupId) {
+      if (prevElement.groupId) {
         const prevCombineElementList = copyOfElementList.filter(_element => _element.groupId === prevElement.groupId)
         copyOfElementList.splice(minIndex - prevCombineElementList.length, 0, ...movedElementList)
       }
@@ -96,10 +96,10 @@ export default () => {
 
     else {
       const elementIndex = elementList.findIndex(item => item.id === element.id)
-      if(elementIndex === 0) return null
+      if (elementIndex === 0) return null
       const prevElement = copyOfElementList[elementIndex - 1]
       const movedElement = copyOfElementList.splice(elementIndex, 1)[0]
-      if(prevElement.groupId) {
+      if (prevElement.groupId) {
         const combineElementList = copyOfElementList.filter(_element => _element.groupId === prevElement.groupId)
         copyOfElementList.splice(elementIndex - combineElementList.length, 0, movedElement)
       }
@@ -114,14 +114,14 @@ export default () => {
     const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
 
     // 被操作的元素是组合元素成员
-    if(element.groupId) {
+    if (element.groupId) {
 
       // 获取该组合元素全部成员，以及组合元素层级范围
       const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
       const { minIndex, maxIndex } = getCombineElementIndexRange(elementList, combineElementList)
 
       // 无法移动（已经处在顶层）
-      if(maxIndex === elementList.length - 1) return null
+      if (maxIndex === elementList.length - 1) return null
 
       // 从元素列表中移除该组合元素全部成员，然后添加到元素列表最上方
       const movedElementList = copyOfElementList.splice(minIndex, combineElementList.length)
@@ -135,7 +135,7 @@ export default () => {
       const elementIndex = elementList.findIndex(item => item.id === element.id)
 
       // 无法移动（已经处在顶层）
-      if(elementIndex === elementList.length - 1) return null
+      if (elementIndex === elementList.length - 1) return null
 
       // 从元素列表中移除该元素，然后添加到元素列表最上方
       copyOfElementList.splice(elementIndex, 1)
@@ -149,17 +149,17 @@ export default () => {
   const moveBottomElement = (elementList: PPTElement[], element: PPTElement) => {
     const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
 
-    if(element.groupId) {
+    if (element.groupId) {
       const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
       const { minIndex } = getCombineElementIndexRange(elementList, combineElementList)
-      if(minIndex === 0) return null
+      if (minIndex === 0) return null
       const movedElementList = copyOfElementList.splice(minIndex, combineElementList.length)
       copyOfElementList.unshift(...movedElementList)
     }
 
     else {
       const elementIndex = elementList.findIndex(item => item.id === element.id)
-      if(elementIndex === 0) return null
+      if (elementIndex === 0) return null
       copyOfElementList.splice(elementIndex, 1)
       copyOfElementList.unshift(element)
     }
@@ -170,12 +170,12 @@ export default () => {
   const orderElement = (element: PPTElement, command: ElementOrderCommand) => {
     let newElementList = null
     
-    if(command === ElementOrderCommands.UP) newElementList = moveUpElement(currentSlide.value.elements, element)
-    else if(command === ElementOrderCommands.DOWN) newElementList = moveDownElement(currentSlide.value.elements, element)
-    else if(command === ElementOrderCommands.TOP) newElementList = moveTopElement(currentSlide.value.elements, element)
-    else if(command === ElementOrderCommands.BOTTOM) newElementList = moveBottomElement(currentSlide.value.elements, element)
+    if (command === ElementOrderCommands.UP) newElementList = moveUpElement(currentSlide.value.elements, element)
+    else if (command === ElementOrderCommands.DOWN) newElementList = moveDownElement(currentSlide.value.elements, element)
+    else if (command === ElementOrderCommands.TOP) newElementList = moveTopElement(currentSlide.value.elements, element)
+    else if (command === ElementOrderCommands.BOTTOM) newElementList = moveBottomElement(currentSlide.value.elements, element)
 
-    if(!newElementList) return
+    if (!newElementList) return
 
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
     addHistorySnapshot()

src/hooks/usePasteTextClipboardData.ts

@@ -21,26 +21,26 @@ export default () => {
   const pasteElement = (elements: PPTElement[]) => {
     const groupIdMap = {}
     const elIdMap = {}
-    for(const element of elements) {
+    for (const element of elements) {
       const groupId = element.groupId
-      if(groupId && !groupIdMap[groupId]) {
+      if (groupId && !groupIdMap[groupId]) {
         groupIdMap[groupId] = createRandomCode()
       }
       elIdMap[element.id] = createRandomCode()
     }
     const currentSlideElementIdList = currentSlide.value.elements.map(el => el.id)
     
-    for(const element of elements) {
+    for (const element of elements) {
       const inCurrentSlide = currentSlideElementIdList.includes(element.id)
       
       element.id = elIdMap[element.id]
 
-      if(inCurrentSlide) {
+      if (inCurrentSlide) {
         element.left = element.left + 10
         element.top = element.top + 10
       }
 
-      if(element.groupId) element.groupId = groupIdMap[element.groupId]
+      if (element.groupId) element.groupId = groupIdMap[element.groupId]
     }
     store.commit(MutationTypes.ADD_ELEMENT, elements)
     store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, Object.values(elIdMap))
@@ -77,15 +77,15 @@ export default () => {
     }
 
     // 粘贴自定义元素或页面
-    if(typeof clipboardData === 'object') {
+    if (typeof clipboardData === 'object') {
       const { type, data } = clipboardData
 
-      if(type === 'elements' && !onlySlide) pasteElement(data)
-      else if(type === 'slide' && !onlyElements) pasteSlide(data)
+      if (type === 'elements' && !onlySlide) pasteElement(data)
+      else if (type === 'slide' && !onlyElements) pasteSlide(data)
     }
 
     // 粘贴普通文本
-    else if(!onlyElements && !onlySlide) pasteText(clipboardData)
+    else if (!onlyElements && !onlySlide) pasteText(clipboardData)
   }
 
   return {

src/hooks/useScaleCanvas.ts

@@ -10,8 +10,8 @@ export default () => {
     const step = 5
     const max = 120
     const min = 60
-    if(command === '+' && percentage <= max) percentage += step
-    if(command === '-' && percentage >= min) percentage -= step
+    if (command === '+' && percentage <= max) percentage += step
+    if (command === '-' && percentage >= min) percentage -= step
     
     store.commit(MutationTypes.SET_CANVAS_PERCENTAGE, percentage)
   }

src/hooks/useScreening.ts

@@ -16,7 +16,7 @@ export default () => {
 
   const exitScreening = () => {
     store.commit(MutationTypes.SET_SCREENING, false)
-    if(isFullscreen()) exitFullscreen()
+    if (isFullscreen()) exitFullscreen()
   }
 
   return {

src/hooks/useSlideBackgroundStyle.ts

@@ -3,7 +3,7 @@ import { SlideBackground } from '@/types/slides'
 
 export default (background: Ref<SlideBackground | undefined>) => {
   const backgroundStyle = computed(() => {
-    if(!background.value) return { backgroundColor: '#fff' }
+    if (!background.value) return { backgroundColor: '#fff' }
 
     const {
       type,
@@ -15,10 +15,10 @@ export default (background: Ref<SlideBackground | undefined>) => {
       gradientType,
     } = background.value
 
-    if(type === 'solid') return { backgroundColor: color }
-    else if(type === 'image') {
-      if(!image) return { backgroundColor: '#fff' }
-      if(imageSize === 'repeat') {
+    if (type === 'solid') return { backgroundColor: color }
+    else if (type === 'image') {
+      if (!image) return { backgroundColor: '#fff' }
+      if (imageSize === 'repeat') {
         return {
           backgroundImage: `url(${image}`,
           backgroundRepeat: 'repeat',
@@ -31,12 +31,12 @@ export default (background: Ref<SlideBackground | undefined>) => {
         backgroundSize: imageSize || 'cover',
       }
     }
-    else if(type === 'gradient') {
+    else if (type === 'gradient') {
       const rotate = gradientRotate || 0
       const color1 = gradientColor ? gradientColor[0] : '#fff'
       const color2 = gradientColor ? gradientColor[1] : '#fff'
       
-      if(gradientType === 'radial') return { backgroundImage: `radial-gradient(${color1}, ${color2}` }
+      if (gradientType === 'radial') return { backgroundImage: `radial-gradient(${color1}, ${color2}` }
       return { backgroundImage: `linear-gradient(${rotate}deg, ${color1}, ${color2}` }
     }
 

src/hooks/useSlideHandler.ts

@@ -21,10 +21,10 @@ export default () => {
 
   const updateSlideIndex = (command: string) => {
     let targetIndex = 0
-    if(command === KEYS.UP && slideIndex.value > 0) {
+    if (command === KEYS.UP && slideIndex.value > 0) {
       targetIndex = slideIndex.value - 1
     }
-    else if(command === KEYS.DOWN && slideIndex.value < slidesLength.value - 1) {
+    else if (command === KEYS.DOWN && slideIndex.value < slidesLength.value - 1) {
       targetIndex = slideIndex.value + 1
     }
     store.commit(MutationTypes.UPDATE_SLIDE_INDEX, targetIndex)
@@ -69,7 +69,7 @@ export default () => {
   }
 
   const deleteSlide = () => {
-    if(slidesLength.value === 1) return message.warning('无法继续删除')
+    if (slidesLength.value === 1) return message.warning('无法继续删除')
     
     store.commit(MutationTypes.DELETE_SLIDE, currentSlide.value.id)
     addHistorySnapshot()

src/plugins/clickOutside.ts

@@ -8,7 +8,7 @@ const clickListener = (el: HTMLElement, event: MouseEvent, binding: DirectiveBin
   const path = event.composedPath()
   const isClickOutside = path ? path.indexOf(el) < 0 : !el.contains(event.target as HTMLElement)
 
-  if(!isClickOutside) return
+  if (!isClickOutside) return
   handler(event)
 }
 
@@ -21,7 +21,7 @@ const ClickOutsideDirective: Directive = {
   },
   
   unmounted(el: HTMLElement) {
-    if(el[CTX_CLICK_OUTSIDE_HANDLER]) {
+    if (el[CTX_CLICK_OUTSIDE_HANDLER]) {
       document.removeEventListener('click', el[CTX_CLICK_OUTSIDE_HANDLER])
       delete el[CTX_CLICK_OUTSIDE_HANDLER]
     }

src/plugins/contextmenu.ts

@@ -8,12 +8,12 @@ const contextmenuListener = (el: HTMLElement, event: MouseEvent, binding: Direct
   event.preventDefault()
 
   const menus = binding.value(el)
-  if(!menus) return
+  if (!menus) return
 
   let container: HTMLDivElement | null = null
 
   const removeContextMenu = () => {
-    if(container) {
+    if (container) {
       document.body.removeChild(container)
       container = null
     }
@@ -46,7 +46,7 @@ const ContextmenuDirective: Directive = {
   },
 
   unmounted(el: HTMLElement) {
-    if(el && el[CTX_CONTEXTMENU_HANDLER]) {
+    if (el && el[CTX_CONTEXTMENU_HANDLER]) {
       el.removeEventListener('contextmenu', el[CTX_CONTEXTMENU_HANDLER])
       delete el[CTX_CONTEXTMENU_HANDLER]
     }

src/prosemirror/commands/setTextAlign.ts

@@ -4,7 +4,7 @@ import { EditorView } from 'prosemirror-view'
 
 export const setTextAlign = (tr: Transaction, schema: Schema, alignment: string) => {
   const { selection, doc } = tr
-  if(!selection || !doc) return tr
+  if (!selection || !doc) return tr
 
   const { from, to } = selection
   const { nodes } = schema
@@ -27,7 +27,7 @@ export const setTextAlign = (tr: Transaction, schema: Schema, alignment: string)
   doc.nodesBetween(from, to, (node, pos) => {
     const nodeType = node.type
     const align = node.attrs.align || ''
-    if(align !== alignment && allowedNodeTypes.has(nodeType)) {
+    if (align !== alignment && allowedNodeTypes.has(nodeType)) {
       tasks.push({
         node,
         pos,
@@ -37,12 +37,12 @@ export const setTextAlign = (tr: Transaction, schema: Schema, alignment: string)
     return true
   })
 
-  if(!tasks.length) return tr
+  if (!tasks.length) return tr
 
   tasks.forEach(task => {
     const { node, pos, nodeType } = task
     let { attrs } = node
-    if(alignment) attrs = { ...attrs, align: alignment }
+    if (alignment) attrs = { ...attrs, align: alignment }
     else attrs = { ...attrs, align: null }
     tr = tr.setNodeMarkup(pos, nodeType, attrs, node.marks)
   })

src/prosemirror/commands/toggleList.ts

@@ -16,20 +16,20 @@ export const toggleList = (listType: NodeType, itemType: NodeType) => {
     const { $from, $to } = selection
     const range = $from.blockRange($to)
 
-    if(!range) return false
+    if (!range) return false
 
     const parentList = findParentNode((node: Node) => isList(node, schema))(selection)
 
-    if(range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
-      if(parentList.node.type === listType) {
+    if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
+      if (parentList.node.type === listType) {
         return liftListItem(itemType)(state, dispatch)
       }
 
-      if(isList(parentList.node, schema) && listType.validContent(parentList.node.content)) {
+      if (isList(parentList.node, schema) && listType.validContent(parentList.node.content)) {
         const { tr } = state
         tr.setNodeMarkup(parentList.pos, listType)
 
-        if(dispatch) dispatch(tr)
+        if (dispatch) dispatch(tr)
 
         return false
       }

src/prosemirror/schema/marks.ts

@@ -68,7 +68,7 @@ const forecolor: MarkSpec = {
   toDOM: mark => {
     const { color } = mark.attrs
     let style = ''
-    if(color) style += `color: ${color};`
+    if (color) style += `color: ${color};`
     return ['span', { style }, 0]
   },
 }
@@ -88,7 +88,7 @@ const backcolor: MarkSpec = {
   toDOM: mark => {
     const { backcolor } = mark.attrs
     let style = ''
-    if(backcolor) style += `background-color: ${backcolor};`
+    if (backcolor) style += `background-color: ${backcolor};`
     return ['span', { style }, 0]
   },
 }
@@ -108,7 +108,7 @@ const fontsize: MarkSpec = {
   toDOM: mark => {
     const { fontsize } = mark.attrs
     let style = ''
-    if(fontsize) style += `font-size: ${fontsize}`
+    if (fontsize) style += `font-size: ${fontsize}`
     return ['span', { style }, 0]
   },
 }
@@ -130,7 +130,7 @@ const fontname: MarkSpec = {
   toDOM: mark => {
     const { fontname } = mark.attrs
     let style = ''
-    if(fontname) style += `font-family: ${fontname}`
+    if (fontname) style += `font-family: ${fontname}`
     return ['span', { style }, 0]
   },
 }

src/prosemirror/schema/nodes.ts

@@ -43,7 +43,7 @@ const paragraph: NodeSpec = {
   toDOM: (node: Node) => {
     const { align } = node.attrs
     let style = ''
-    if(align && align !== 'left') style += `text-align: ${align};`
+    if (align && align !== 'left') style += `text-align: ${align};`
 
     return ['p', { style }, 0]
   },

src/prosemirror/utils.ts

@@ -7,9 +7,9 @@ const equalNodeType = (nodeType: NodeType, node: Node) => {
 }
 
 const findParentNodeClosestToPos = ($pos: ResolvedPos, predicate: (node: Node) => boolean) => {
-  for(let i = $pos.depth; i > 0; i--) {
+  for (let i = $pos.depth; i > 0; i--) {
     const node = $pos.node(i)
-    if(predicate(node)) {
+    if (predicate(node)) {
       return {
         pos: i > 0 ? $pos.before(i) : 0,
         start: $pos.start(i),
@@ -46,16 +46,16 @@ export const getMarkAttrs = (view: EditorView) => {
 
 export const getAttrValue = (view: EditorView, markType: string, attr: string) => {
   const marks = getMarkAttrs(view)
-  for(const mark of marks) {
-    if(mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr]
+  for (const mark of marks) {
+    if (mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr]
   }
   return null
 }
 
 export const isActiveMark = (view: EditorView, markType: string) => {
   const marks = getMarkAttrs(view)
-  for(const mark of marks) {
-    if(mark.type.name === markType) return true
+  for (const mark of marks) {
+    if (mark.type.name === markType) return true
   }
   return false
 }
@@ -67,7 +67,7 @@ export const getAttrValueInSelection = (view: EditorView, attr: string) => {
   let keepChecking = true
   let value = ''
   doc.nodesBetween(from, to, node => {
-    if(keepChecking && node.attrs[attr]) {
+    if (keepChecking && node.attrs[attr]) {
       keepChecking = false
       value = node.attrs[attr]
     }

src/store/actions.ts

@@ -9,7 +9,7 @@ export const actions: ActionTree<State, State> = {
     const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
     const lastSnapshot = snapshots.slice(-1)[0]
 
-    if(lastSnapshot) {
+    if (lastSnapshot) {
       db.snapshots.clear()
     }
 
@@ -27,7 +27,7 @@ export const actions: ActionTree<State, State> = {
 
     let needDeleteKeys: IndexableTypeArray = []
 
-    if(state.snapshotCursor >= 0 && state.snapshotCursor < allKeys.length - 1) {
+    if (state.snapshotCursor >= 0 && state.snapshotCursor < allKeys.length - 1) {
       needDeleteKeys = allKeys.slice(state.snapshotCursor + 1)
     }
 
@@ -39,11 +39,11 @@ export const actions: ActionTree<State, State> = {
 
     let snapshotLength = allKeys.length - needDeleteKeys.length + 1
 
-    if(snapshotLength > 20) {
+    if (snapshotLength > 20) {
       needDeleteKeys.push(allKeys[0])
       snapshotLength--
     }
-    if(snapshotLength >= 2) {
+    if (snapshotLength >= 2) {
       db.snapshots.update(allKeys[snapshotLength - 2] as number, { index: state.slideIndex })
     }
 
@@ -54,7 +54,7 @@ export const actions: ActionTree<State, State> = {
   },
 
   async [ActionTypes.UN_DO]({ state, commit }) {
-    if(state.snapshotCursor <= 0) return
+    if (state.snapshotCursor <= 0) return
 
     const snapshotCursor = state.snapshotCursor - 1
     const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
@@ -68,7 +68,7 @@ export const actions: ActionTree<State, State> = {
   },
 
   async [ActionTypes.RE_DO]({ state, commit }) {
-    if(state.snapshotCursor >= state.snapshotLength - 1) return
+    if (state.snapshotCursor >= state.snapshotLength - 1) return
 
     const snapshotCursor = state.snapshotCursor + 1
     const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()

src/store/getters.ts

@@ -8,9 +8,9 @@ export const getters: GetterTree<State, State> = {
 
   currentSlideAnimations(state) {
     const currentSlide = state.slides[state.slideIndex]
-    if(!currentSlide) return null
+    if (!currentSlide) return null
     const animations = currentSlide.animations
-    if(!animations) return null
+    if (!animations) return null
 
     const els = currentSlide.elements
     const elIds = els.map(el => el.id)
@@ -19,13 +19,13 @@ export const getters: GetterTree<State, State> = {
 
   activeElementList(state) {
     const currentSlide = state.slides[state.slideIndex]
-    if(!currentSlide || !currentSlide.elements) return []
+    if (!currentSlide || !currentSlide.elements) return []
     return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.id))
   },
 
   handleElement(state) {
     const currentSlide = state.slides[state.slideIndex]
-    if(!currentSlide || !currentSlide.elements) return null
+    if (!currentSlide || !currentSlide.elements) return null
     return currentSlide.elements.find(element => state.handleElementId === element.id) || null
   },
 

src/store/mutations.ts

@@ -22,7 +22,7 @@ export const mutations: MutationTree<State> = {
   // editor
 
   [MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST](state, activeElementIdList: string[]) {
-    if(activeElementIdList.length === 1) state.handleElementId = activeElementIdList[0]
+    if (activeElementIdList.length === 1) state.handleElementId = activeElementIdList[0]
     else state.handleElementId = ''
     
     state.activeElementIdList = activeElementIdList
@@ -96,7 +96,7 @@ export const mutations: MutationTree<State> = {
   [MutationTypes.DELETE_SLIDE](state, slideId: string) {
     const deleteIndex = state.slides.findIndex(item => item.id === slideId)
 
-    if(deleteIndex === state.slides.length - 1) {
+    if (deleteIndex === state.slides.length - 1) {
       state.slideIndex = deleteIndex - 1
     }
     state.slides.splice(deleteIndex, 1)

src/utils/clipboard.ts

@@ -26,9 +26,9 @@ export const copyText = (text: string) => {
 // 读取剪贴板
 export const readClipboard = (): Promise<string> => {
   return new Promise((resolve, reject) => {
-    if(navigator.clipboard) {
+    if (navigator.clipboard) {
       navigator.clipboard.readText().then(text => {
-        if(!text) reject('剪贴板为空或者不包含文本')
+        if (!text) reject('剪贴板为空或者不包含文本')
         return resolve(text)
       })
     }

src/utils/common.ts

@@ -5,7 +5,7 @@ export const createRandomCode = (len = 6) => {
   const charset = `_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
   const maxLen = charset.length
   let ret = ''
-  for(let i = 0; i < len; i++) {
+  for (let i = 0; i < len; i++) {
     const randomIndex = Math.floor(Math.random() * maxLen)
     ret += charset[randomIndex]
   }

src/utils/element.ts

@@ -46,13 +46,13 @@ export const getRectRotatedRange = (element: RotatedElementData) => {
 export const getElementRange = (element: PPTElement) => {
   let minX, maxX, minY, maxY
 
-  if(element.type === 'line') {
+  if (element.type === 'line') {
     minX = element.left
     maxX = element.left + Math.max(element.start[0], element.end[0])
     minY = element.top
     maxY = element.top + Math.max(element.start[1], element.end[1])
   }
-  else if('rotate' in element && element.rotate) {
+  else if ('rotate' in element && element.rotate) {
     const { left, top, width, height, rotate } = element
     const { xRange, yRange } = getRectRotatedRange({ left, top, width, height, rotate })
     minX = xRange[0]
@@ -102,7 +102,7 @@ export const uniqAlignLines = (lines: AlignLine[]) => {
   const uniqLines: AlignLine[] = []
   lines.forEach(line => {
     const index = uniqLines.findIndex(_line => _line.value === line.value)
-    if(index === -1) uniqLines.push(line)
+    if (index === -1) uniqLines.push(line)
     else {
       const uniqLine = uniqLines[index]
       const rangeMin = Math.min(uniqLine.range[0], line.range[0])

src/utils/fontFamily.ts

@@ -1,8 +1,8 @@
 // 判断用户的操作系统是否安装了某字体
 export const isSupportFontFamily = (fontFamily: string) => {
-  if(typeof fontFamily !== 'string') return false
+  if (typeof fontFamily !== 'string') return false
   const arial = 'Arial'
-  if(fontFamily.toLowerCase() === arial.toLowerCase()) return true
+  if (fontFamily.toLowerCase() === arial.toLowerCase()) return true
   const a = 'a'
   const size = 100
   const width = 100
@@ -11,7 +11,7 @@ export const isSupportFontFamily = (fontFamily: string) => {
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d')
 
-  if(!ctx) return false
+  if (!ctx) return false
 
   canvas.width = width
   canvas.height = height

src/utils/fullscreen.ts

@@ -1,16 +1,16 @@
 // 进入全屏
 export const enterFullscreen = () => {
   const docElm = document.documentElement
-  if(docElm.requestFullscreen) docElm.requestFullscreen() 
-  else if(docElm.mozRequestFullScreen) docElm.mozRequestFullScreen() 
-  else if(docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen()
+  if (docElm.requestFullscreen) docElm.requestFullscreen() 
+  else if (docElm.mozRequestFullScreen) docElm.mozRequestFullScreen() 
+  else if (docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen()
 }
 
 // 退出全屏
 export const exitFullscreen = () => {
-  if(document.exitFullscreen) document.exitFullscreen()
-  else if(document.mozCancelFullScreen) document.mozCancelFullScreen()
-  else if(document.webkitCancelFullScreen) document.webkitCancelFullScreen()
+  if (document.exitFullscreen) document.exitFullscreen()
+  else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
+  else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()
 }
 
 // 判断是否全屏

src/views/Editor/Canvas/AlignmentLine.vue

@@ -33,7 +33,7 @@ export default defineComponent({
     const top = computed(() => props.axis.y * canvasScale.value + 'px')
 
     const sizeStyle = computed(() => {
-      if(props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
+      if (props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
       return { width: props.length * canvasScale.value + 'px' }
     })
 

src/views/Editor/Canvas/EditableElement.vue

@@ -84,7 +84,7 @@ export default defineComponent({
     const { copyElement, cutElement } = useCopyAndPasteElement()
 
     const contextmenus = (): ContextmenuItem[] => {
-      if(props.elementInfo.lock) {
+      if (props.elementInfo.lock) {
         return [{
           text: '解锁', 
           handler: () => unlockElement(props.elementInfo),

src/views/Editor/Canvas/ElementCreateSelection.vue

@@ -47,7 +47,7 @@ export default defineComponent({
       y: 0,
     })
     onMounted(() => {
-      if(!selectionRef.value) return
+      if (!selectionRef.value) return
       const { x, y } = selectionRef.value.getBoundingClientRect()
       offset.x = x
       offset.y = y
@@ -61,23 +61,23 @@ export default defineComponent({
       start.value = [startPageX, startPageY]
 
       document.onmousemove = e => {
-        if(!creatingElement.value || !isMouseDown) return
+        if (!creatingElement.value || !isMouseDown) return
 
         let currentPageX = e.pageX
         let currentPageY = e.pageY
 
-        if(ctrlOrShiftKeyActive.value) {
+        if (ctrlOrShiftKeyActive.value) {
           const moveX = currentPageX - startPageX
           const moveY = currentPageY - startPageY
 
           const absX = Math.abs(moveX)
           const absY = Math.abs(moveY)
 
-          if(creatingElement.value.type === 'shape') {
+          if (creatingElement.value.type === 'shape') {
             // moveX和moveY一正一负
             const isOpposite = (moveY > 0 && moveX < 0) || (moveY < 0 && moveX > 0)
 
-            if(absX > absY) {
+            if (absX > absY) {
               currentPageY = isOpposite ? startPageY - moveX : startPageY + moveX
             }
             else {
@@ -85,8 +85,8 @@ export default defineComponent({
             }
           }
 
-          else if(creatingElement.value.type === 'line') {
-            if(absX > absY) currentPageY = startPageY
+          else if (creatingElement.value.type === 'line') {
+            if (absX > absY) currentPageY = startPageY
             else currentPageX = startPageX
           }
         }
@@ -104,7 +104,7 @@ export default defineComponent({
 
         const minSize = 30
 
-        if(Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize) {
+        if (Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize) {
           emit('created', {
             start: start.value,
             end: end.value,
@@ -115,8 +115,8 @@ export default defineComponent({
     }
 
     const lineData = computed(() => {
-      if(!start.value || !end.value) return null
-      if(!creatingElement.value || creatingElement.value.type !== 'line') return null
+      if (!start.value || !end.value) return null
+      if (!creatingElement.value || creatingElement.value.type !== 'line') return null
 
       const [_startX, _startY] = start.value
       const [_endX, _endY] = end.value
@@ -147,7 +147,7 @@ export default defineComponent({
     })
 
     const position = computed(() => {
-      if(!start.value || !end.value) return {}
+      if (!start.value || !end.value) return {}
 
       const [startX, startY] = start.value
       const [endX, endY] = end.value

src/views/Editor/Canvas/GridLines.vue

@@ -29,7 +29,7 @@ export default defineComponent({
     const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide?.background)
 
     const gridColor = computed(() => {
-      if(!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
+      if (!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
       const color = background.value.color
       const rgba = tinycolor(color).toRgb()
       const newRgba = {
@@ -48,10 +48,10 @@ export default defineComponent({
       const maxY = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO
 
       let path = ''
-      for(let i = 0; i <= Math.floor(maxY / gridSize); i++) {
+      for (let i = 0; i <= Math.floor(maxY / gridSize); i++) {
         path += `M0 ${i * gridSize}, L${maxX} ${i * gridSize}`
       }
-      for(let i = 0; i <= Math.floor(maxX / gridSize); i++) {
+      for (let i = 0; i <= Math.floor(maxX / gridSize); i++) {
         path += `M${i * gridSize} 0, L${i * gridSize} ${maxY}`
       }
       return path

src/views/Editor/Canvas/Operate/MultiSelectOperate.vue

@@ -66,7 +66,7 @@ export default defineComponent({
 
     const disableResize = computed(() => {
       return localActiveElementList.value.some(item => {
-        if(
+        if (
           (item.type === 'image' || item.type === 'shape') && 
           !item.rotate
         ) return false

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

@@ -18,7 +18,7 @@ export default (
   const { addHistorySnapshot } = useHistorySnapshot()
 
   const dragElement = (e: MouseEvent, element: PPTElement) => {
-    if(!activeElementIdList.value.includes(element.id)) return
+    if (!activeElementIdList.value.includes(element.id)) return
     let isMouseDown = true
 
     // 可视范围宽高，用于边缘对齐吸附
@@ -47,13 +47,13 @@ export default (
     let verticalLines: AlignLine[] = []
 
     // 元素在页面内水平和垂直方向的范围和中心位置（需要特殊计算线条和被旋转的元素）
-    for(const el of elementList.value) {
-      if(el.type === 'line') continue
-      if(isActiveGroupElement && el.id === element.id) continue
-      if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
+    for (const el of elementList.value) {
+      if (el.type === 'line') continue
+      if (isActiveGroupElement && el.id === element.id) continue
+      if (!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
 
       let left, top, width, height
-      if('rotate' in el && el.rotate) {
+      if ('rotate' in el && el.rotate) {
         const { xRange, yRange } = getRectRotatedRange({
           left: el.left,
           top: el.top,
@@ -111,11 +111,11 @@ export default (
       // 对于鼠标第一次滑动距离过小的操作判定为误操作
       // 这里仅在误操作标记未被赋值（null，第一次触发移动），以及被标记为误操作时（true，当前处于误操作范围，但可能会脱离该范围转变成正常操作），才会去计算
       // 已经被标记为非误操作时（false），不需要再次计算（因为不可能从非误操作转变成误操作）
-      if(isMisoperation !== false) {
+      if (isMisoperation !== false) {
         isMisoperation = Math.abs(startPageX - currentPageX) < sorptionRange && 
                          Math.abs(startPageY - currentPageY) < sorptionRange
       }
-      if(!isMouseDown || isMisoperation) return
+      if (!isMouseDown || isMisoperation) return
 
       // 鼠标按下后移动的距离
       const moveX = (currentPageX - startPageX) / canvasScale.value
@@ -130,8 +130,8 @@ export default (
       // 注意这里需要用元素的原始信息结合移动信息来计算
       let targetMinX: number, targetMaxX: number, targetMinY: number, targetMaxY: number
 
-      if(activeElementIdList.value.length === 1 || isActiveGroupElement) {
-        if(elOriginRotate) {
+      if (activeElementIdList.value.length === 1 || isActiveGroupElement) {
+        if (elOriginRotate) {
           const { xRange, yRange } = getRectRotatedRange({
             left: targetLeft,
             top: targetTop,
@@ -144,7 +144,7 @@ export default (
           targetMinY = yRange[0]
           targetMaxY = yRange[1]
         }
-        else if(element.type === 'line') {
+        else if (element.type === 'line') {
           targetMinX = targetLeft
           targetMaxX = targetLeft + Math.max(element.start[0], element.end[0])
           targetMinY = targetTop
@@ -163,7 +163,7 @@ export default (
         const rightValues = []
         const bottomValues = []
         
-        for(let i = 0; i < originActiveElementList.length; i++) {
+        for (let i = 0; i < originActiveElementList.length; i++) {
           const element = originActiveElementList[i]
           const left = element.left + moveX
           const top = element.top + moveY
@@ -171,14 +171,14 @@ export default (
           const height = ('height' in element && element.height) ? element.height : 0
           const rotate = ('rotate' in element && element.rotate) ? element.rotate : 0
 
-          if('rotate' in element && element.rotate) {
+          if ('rotate' in element && element.rotate) {
             const { xRange, yRange } = getRectRotatedRange({ left, top, width, height, rotate })
             leftValues.push(xRange[0])
             topValues.push(yRange[0])
             rightValues.push(xRange[1])
             bottomValues.push(yRange[1])
           }
-          else if(element.type === 'line') {
+          else if (element.type === 'line') {
             leftValues.push(left)
             topValues.push(top)
             rightValues.push(left + Math.max(element.start[0], element.end[0]))
@@ -205,43 +205,43 @@ export default (
       const _alignmentLines: AlignmentLineProps[] = []
       let isVerticalAdsorbed = false
       let isHorizontalAdsorbed = false
-      for(let i = 0; i < horizontalLines.length; i++) {
+      for (let i = 0; i < horizontalLines.length; i++) {
         const { value, range } = horizontalLines[i]
         const min = Math.min(...range, targetMinX, targetMaxX)
         const max = Math.max(...range, targetMinX, targetMaxX)
         
-        if(Math.abs(targetMinY - value) < sorptionRange && !isHorizontalAdsorbed) {
+        if (Math.abs(targetMinY - value) < sorptionRange && !isHorizontalAdsorbed) {
           targetTop = targetTop - (targetMinY - value)
           isHorizontalAdsorbed = true
           _alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
         }
-        if(Math.abs(targetMaxY - value) < sorptionRange && !isHorizontalAdsorbed) {
+        if (Math.abs(targetMaxY - value) < sorptionRange && !isHorizontalAdsorbed) {
           targetTop = targetTop - (targetMaxY - value)
           isHorizontalAdsorbed = true
           _alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
         }
-        if(Math.abs(targetCenterY - value) < sorptionRange && !isHorizontalAdsorbed) {
+        if (Math.abs(targetCenterY - value) < sorptionRange && !isHorizontalAdsorbed) {
           targetTop = targetTop - (targetCenterY - value)
           isHorizontalAdsorbed = true
           _alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
         }
       }
-      for(let i = 0; i < verticalLines.length; i++) {
+      for (let i = 0; i < verticalLines.length; i++) {
         const { value, range } = verticalLines[i]
         const min = Math.min(...range, targetMinY, targetMaxY)
         const max = Math.max(...range, targetMinY, targetMaxY)
 
-        if(Math.abs(targetMinX - value) < sorptionRange && !isVerticalAdsorbed) {
+        if (Math.abs(targetMinX - value) < sorptionRange && !isVerticalAdsorbed) {
           targetLeft = targetLeft - (targetMinX - value)
           isVerticalAdsorbed = true
           _alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
         }
-        if(Math.abs(targetMaxX - value) < sorptionRange && !isVerticalAdsorbed) {
+        if (Math.abs(targetMaxX - value) < sorptionRange && !isVerticalAdsorbed) {
           targetLeft = targetLeft - (targetMaxX - value)
           isVerticalAdsorbed = true
           _alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
         }
-        if(Math.abs(targetCenterX - value) < sorptionRange && !isVerticalAdsorbed) {
+        if (Math.abs(targetCenterX - value) < sorptionRange && !isVerticalAdsorbed) {
           targetLeft = targetLeft - (targetCenterX - value)
           isVerticalAdsorbed = true
           _alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
@@ -250,7 +250,7 @@ export default (
       alignmentLines.value = _alignmentLines
       
       // 非多选，或者当前操作的元素时激活的组合元素
-      if(activeElementIdList.value.length === 1 || isActiveGroupElement) {
+      if (activeElementIdList.value.length === 1 || isActiveGroupElement) {
         elementList.value = elementList.value.map(el => {
           return el.id === element.id ? { ...el, left: targetLeft, top: targetTop } : el
         })
@@ -260,11 +260,11 @@ export default (
       // 那么其他非操作元素要移动的位置通过操作元素的移动偏移量计算
       else {
         const handleElement = elementList.value.find(el => el.id === element.id)
-        if(!handleElement) return
+        if (!handleElement) return
 
         elementList.value = elementList.value.map(el => {
-          if(activeElementIdList.value.includes(el.id)) {
-            if(el.id === element.id) {
+          if (activeElementIdList.value.includes(el.id)) {
+            if (el.id === element.id) {
               return {
                 ...el,
                 left: targetLeft,
@@ -292,7 +292,7 @@ export default (
       const currentPageY = e.pageY
 
       // 对比初始位置，没有实际的位移不更新数据
-      if(startPageX === currentPageX && startPageY === currentPageY) return
+      if (startPageX === currentPageX && startPageY === currentPageY) return
 
       store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
       addHistorySnapshot()

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

@@ -26,9 +26,9 @@ export default (elementList: Ref<PPTElement[]>) => {
     const adsorptionPoints: AdsorptionPoint[] = []
 
     // 获取全部非线条且未旋转元素的8个点作为吸附点
-    for(let i = 0; i < elementList.value.length; i++) {
+    for (let i = 0; i < elementList.value.length; i++) {
       const _element = elementList.value[i]
-      if(_element.type === 'line' || ('rotate' in _element && _element.rotate)) continue
+      if (_element.type === 'line' || ('rotate' in _element && _element.rotate)) continue
 
       const left = _element.left
       const top = _element.top
@@ -63,7 +63,7 @@ export default (elementList: Ref<PPTElement[]>) => {
     }
 
     document.onmousemove = e => {
-      if(!isMouseDown) return
+      if (!isMouseDown) return
 
       const currentPageX = e.pageX
       const currentPageY = e.pageY
@@ -81,16 +81,16 @@ export default (elementList: Ref<PPTElement[]>) => {
       // 根据拖拽的点，选择修改起点或终点的位置
       // 两点在水平和垂直方向上有对齐吸附
       // 靠近其他元素的吸附点有对齐吸附
-      if(command === OperateLineHandlers.START) {
+      if (command === OperateLineHandlers.START) {
         startX = startX + moveX
         startY = startY + moveY
 
-        if(Math.abs(startX - endX) < sorptionRange) startX = endX
-        if(Math.abs(startY - endY) < sorptionRange) startY = endY
+        if (Math.abs(startX - endX) < sorptionRange) startX = endX
+        if (Math.abs(startY - endY) < sorptionRange) startY = endY
 
-        for(const adsorptionPoint of adsorptionPoints) {
+        for (const adsorptionPoint of adsorptionPoints) {
           const { x, y } = adsorptionPoint
-          if(Math.abs(x - startX) < sorptionRange && Math.abs(y - startY) < sorptionRange) {
+          if (Math.abs(x - startX) < sorptionRange && Math.abs(y - startY) < sorptionRange) {
             startX = x
             startY = y
             break
@@ -101,12 +101,12 @@ export default (elementList: Ref<PPTElement[]>) => {
         endX = endX + moveX
         endY = endY + moveY
 
-        if(Math.abs(startX - endX) < sorptionRange) endX = startX
-        if(Math.abs(startY - endY) < sorptionRange) endY = startY
+        if (Math.abs(startX - endX) < sorptionRange) endX = startX
+        if (Math.abs(startY - endY) < sorptionRange) endY = startY
 
-        for(const adsorptionPoint of adsorptionPoints) {
+        for (const adsorptionPoint of adsorptionPoints) {
           const { x, y } = adsorptionPoint
-          if(Math.abs(x - endX) < sorptionRange && Math.abs(y - endY) < sorptionRange) {
+          if (Math.abs(x - endX) < sorptionRange && Math.abs(y - endY) < sorptionRange) {
             endX = x
             endY = y
             break
@@ -122,18 +122,18 @@ export default (elementList: Ref<PPTElement[]>) => {
 
       const start: [number, number] = [0, 0]
       const end: [number, number] = [maxX - minX, maxY - minY]
-      if(startX > endX) {
+      if (startX > endX) {
         start[0] = maxX - minX
         end[0] = 0
       }
-      if(startY > endY) {
+      if (startY > endY) {
         start[1] = maxY - minY
         end[1] = 0
       }
 
       // 修改线条的位置和两点的坐标
       elementList.value = elementList.value.map(el => {
-        if(el.id === element.id) {
+        if (el.id === element.id) {
           return {
             ...el,
             left: minX,
@@ -155,7 +155,7 @@ export default (elementList: Ref<PPTElement[]>) => {
       const currentPageY = e.pageY
 
       // 对比原始鼠标位置，没有实际的位移不更新数据
-      if(startPageX === currentPageX && startPageY === currentPageY) return
+      if (startPageX === currentPageX && startPageY === currentPageY) return
 
       store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
       addHistorySnapshot()

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

@@ -10,18 +10,18 @@ export default (elementRef: Ref<HTMLElement | undefined>) => {
   const { createImageElement, createTextElement } = useCreateElement()
 
   const handleDrop = (e: DragEvent) => {
-    if(!e.dataTransfer) return
+    if (!e.dataTransfer) return
     const dataTransferItem = e.dataTransfer.items[0]
 
-    if(dataTransferItem.kind === 'file' && dataTransferItem.type.indexOf('image') !== -1) {
+    if (dataTransferItem.kind === 'file' && dataTransferItem.type.indexOf('image') !== -1) {
       const imageFile = dataTransferItem.getAsFile()
-      if(imageFile) {
+      if (imageFile) {
         getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
       }
     }
-    else if(dataTransferItem.kind === 'string' && dataTransferItem.type === 'text/plain') {
+    else if (dataTransferItem.kind === 'string' && dataTransferItem.type === 'text/plain') {
       dataTransferItem.getAsString(text => {
-        if(disableHotkeys.value) return
+        if (disableHotkeys.value) return
         createTextElement({
           left: 0,
           top: 0,

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

@@ -11,7 +11,7 @@ export default (viewportRef: Ref<HTMLElement | undefined>) => {
   const formatCreateSelection = (selectionData: CreateElementSelectionData) => {
     const { start, end } = selectionData
 
-    if(!viewportRef.value) return
+    if (!viewportRef.value) return
     const viewportRect = viewportRef.value.getBoundingClientRect()
 
     const [startX, startY] = start
@@ -32,7 +32,7 @@ export default (viewportRef: Ref<HTMLElement | undefined>) => {
   const formatCreateSelectionForLine = (selectionData: CreateElementSelectionData) => {
     const { start, end } = selectionData
 
-    if(!viewportRef.value) return
+    if (!viewportRef.value) return
     const viewportRect = viewportRef.value.getBoundingClientRect()
 
     const [startX, startY] = start
@@ -67,18 +67,18 @@ export default (viewportRef: Ref<HTMLElement | undefined>) => {
   const { createTextElement, createShapeElement, createLineElement } = useCreateElement()
 
   const insertElementFromCreateSelection = (selectionData: CreateElementSelectionData) => {
-    if(!creatingElement.value) return
+    if (!creatingElement.value) return
 
     const type = creatingElement.value.type
-    if(type === 'text') {
+    if (type === 'text') {
       const position = formatCreateSelection(selectionData)
       position && createTextElement(position)
     }
-    else if(type === 'shape') {
+    else if (type === 'shape') {
       const position = formatCreateSelection(selectionData)
       position && createShapeElement(position, (creatingElement.value as CreatingShapeElement).data)
     }
-    else if(type === 'line') {
+    else if (type === 'line') {
       const position = formatCreateSelectionForLine(selectionData)
       position && createLineElement(position, (creatingElement.value as CreatingLineElement).data)
     }

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

@@ -17,7 +17,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
   })
 
   const updateMouseSelection = (e: MouseEvent) => {
-    if(!viewportRef.value) return
+    if (!viewportRef.value) return
 
     let isMouseDown = true
     const viewportRect = viewportRef.value.getBoundingClientRect()
@@ -38,7 +38,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
     mouseSelectionState.height = 0
 
     document.onmousemove = e => {
-      if(!isMouseDown) return
+      if (!isMouseDown) return
 
       const currentPageX = e.pageX
       const currentPageY = e.pageY
@@ -49,13 +49,13 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
       const width = Math.abs(offsetWidth)
       const height = Math.abs(offsetHeight)
 
-      if( width < minSelectionRange || height < minSelectionRange ) return
+      if ( width < minSelectionRange || height < minSelectionRange ) return
       
       let quadrant = 0
-      if( offsetWidth > 0 && offsetHeight > 0 ) quadrant = 4
-      else if( offsetWidth < 0 && offsetHeight < 0 ) quadrant = 1
-      else if( offsetWidth > 0 && offsetHeight < 0 ) quadrant = 2
-      else if( offsetWidth < 0 && offsetHeight > 0 ) quadrant = 3
+      if ( offsetWidth > 0 && offsetHeight > 0 ) quadrant = 4
+      else if ( offsetWidth < 0 && offsetHeight < 0 ) quadrant = 1
+      else if ( offsetWidth > 0 && offsetHeight < 0 ) quadrant = 2
+      else if ( offsetWidth < 0 && offsetHeight > 0 ) quadrant = 3
 
       mouseSelectionState.isShow = true
       mouseSelectionState.quadrant = quadrant
@@ -71,7 +71,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
       // 计算当前页面中的每一个元素是否处在鼠标选择范围中（必须完全包裹）
       // 将选择范围中的元素添加为激活元素
       let inRangeElementList: PPTElement[] = []
-      for(let i = 0; i < elementList.value.length; i++) {
+      for (let i = 0; i < elementList.value.length; i++) {
         const element = elementList.value[i]
         const mouseSelectionLeft = mouseSelectionState.left
         const mouseSelectionTop = mouseSelectionState.top
@@ -83,25 +83,25 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
         const { minX, maxX, minY, maxY } = getElementRange(element)
 
         let isInclude = false
-        if(quadrant === 4) {
+        if (quadrant === 4) {
           isInclude = minX > mouseSelectionLeft && 
                       maxX < mouseSelectionLeft + mouseSelectionWidth && 
                       minY > mouseSelectionTop && 
                       maxY < mouseSelectionTop + mouseSelectionHeight
         }
-        else if(quadrant === 1) {
+        else if (quadrant === 1) {
           isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) && 
                       maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth && 
                       minY > (mouseSelectionTop - mouseSelectionHeight) && 
                       maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
         }
-        else if(quadrant === 2) {
+        else if (quadrant === 2) {
           isInclude = minX > mouseSelectionLeft && 
                       maxX < mouseSelectionLeft + mouseSelectionWidth && 
                       minY > (mouseSelectionTop - mouseSelectionHeight) && 
                       maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
         }
-        else if(quadrant === 3) {
+        else if (quadrant === 3) {
           isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) && 
                       maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth && 
                       minY > mouseSelectionTop && 
@@ -109,12 +109,12 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
         }
 
         // 被锁定的元素除外
-        if(isInclude && !element.lock) inRangeElementList.push(element)
+        if (isInclude && !element.lock) inRangeElementList.push(element)
       }
 
       // 对于组合元素成员，必须所有成员都在选择范围中才算被选中
       inRangeElementList = inRangeElementList.filter(inRangeElement => {
-        if(inRangeElement.groupId) {
+        if (inRangeElement.groupId) {
           const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id)
           const groupElementList = elementList.value.filter(element => element.groupId === inRangeElement.groupId)
           return groupElementList.every(groupElement => inRangeElementIdList.includes(groupElement.id))
@@ -122,7 +122,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
         return true
       })
       const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id)
-      if(inRangeElementIdList.length) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, inRangeElementIdList)
+      if (inRangeElementIdList.length) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, inRangeElementIdList)
 
       mouseSelectionState.isShow = false
     }

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

@@ -31,11 +31,11 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
     const centerX = elLeft + elWidth / 2
     const centerY = elTop + elHeight / 2
 
-    if(!viewportRef.value) return
+    if (!viewportRef.value) return
     const viewportRect = viewportRef.value.getBoundingClientRect()
 
     document.onmousemove = e => {
-      if(!isMouseDown) return
+      if (!isMouseDown) return
       
       // 计算鼠标基于旋转中心的坐标
       const mouseX = (e.pageX - viewportRect.left) / canvasScale.value
@@ -47,15 +47,15 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
 
       // 45°的倍数位置有吸附效果
       const sorptionRange = 5
-      if( Math.abs(angle) <= sorptionRange ) angle = 0
-      else if( angle > 0 && Math.abs(angle - 45) <= sorptionRange ) angle -= (angle - 45)
-      else if( angle < 0 && Math.abs(angle + 45) <= sorptionRange ) angle -= (angle + 45)
-      else if( angle > 0 && Math.abs(angle - 90) <= sorptionRange ) angle -= (angle - 90)
-      else if( angle < 0 && Math.abs(angle + 90) <= sorptionRange ) angle -= (angle + 90)
-      else if( angle > 0 && Math.abs(angle - 135) <= sorptionRange ) angle -= (angle - 135)
-      else if( angle < 0 && Math.abs(angle + 135) <= sorptionRange ) angle -= (angle + 135)
-      else if( angle > 0 && Math.abs(angle - 180) <= sorptionRange ) angle -= (angle - 180)
-      else if( angle < 0 && Math.abs(angle + 180) <= sorptionRange ) angle -= (angle + 180)
+      if ( Math.abs(angle) <= sorptionRange ) angle = 0
+      else if ( angle > 0 && Math.abs(angle - 45) <= sorptionRange ) angle -= (angle - 45)
+      else if ( angle < 0 && Math.abs(angle + 45) <= sorptionRange ) angle -= (angle + 45)
+      else if ( angle > 0 && Math.abs(angle - 90) <= sorptionRange ) angle -= (angle - 90)
+      else if ( angle < 0 && Math.abs(angle + 90) <= sorptionRange ) angle -= (angle + 90)
+      else if ( angle > 0 && Math.abs(angle - 135) <= sorptionRange ) angle -= (angle - 135)
+      else if ( angle < 0 && Math.abs(angle + 135) <= sorptionRange ) angle -= (angle + 135)
+      else if ( angle > 0 && Math.abs(angle - 180) <= sorptionRange ) angle -= (angle - 180)
+      else if ( angle < 0 && Math.abs(angle + 180) <= sorptionRange ) angle -= (angle + 180)
 
       // 修改元素角度
       elementList.value = elementList.value.map(el => element.id === el.id ? { ...el, rotate: angle } : el)
@@ -66,7 +66,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
       document.onmousemove = null
       document.onmouseup = null
 
-      if(elOriginRotate === angle) return
+      if (elOriginRotate === angle) return
 
       store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
       addHistorySnapshot()

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

@@ -122,7 +122,7 @@ export default (
     let horizontalLines: AlignLine[] = []
     let verticalLines: AlignLine[] = []
 
-    if('rotate' in element && element.rotate) {
+    if ('rotate' in element && element.rotate) {
       // 元素旋转后的各点坐标以及对角坐标
       const { left, top, width, height } = element
       points = getRotateElementPoints({ left, top, width, height }, elRotate)
@@ -137,11 +137,11 @@ export default (
       const edgeHeight = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO
       const isActiveGroupElement = element.id === activeGroupElementId.value
       
-      for(const el of elementList.value) {
-        if('rotate' in el && el.rotate) continue
-        if(el.type === 'line') continue
-        if(isActiveGroupElement && el.id === element.id) continue
-        if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
+      for (const el of elementList.value) {
+        if ('rotate' in el && el.rotate) continue
+        if (el.type === 'line') continue
+        if (isActiveGroupElement && el.id === element.id) continue
+        if (!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
 
         const left = el.left
         const top = el.top
@@ -183,26 +183,26 @@ export default (
       let isHorizontalAdsorbed = false
       const correctionVal = { offsetX: 0, offsetY: 0 }
       
-      if(currentY || currentY === 0) {
-        for(let i = 0; i < horizontalLines.length; i++) {
+      if (currentY || currentY === 0) {
+        for (let i = 0; i < horizontalLines.length; i++) {
           const { value, range } = horizontalLines[i]
           const min = Math.min(...range, currentX || 0)
           const max = Math.max(...range, currentX || 0)
           
-          if(Math.abs(currentY - value) < sorptionRange && !isHorizontalAdsorbed) {
+          if (Math.abs(currentY - value) < sorptionRange && !isHorizontalAdsorbed) {
             correctionVal.offsetY = currentY - value
             isHorizontalAdsorbed = true
             _alignmentLines.push({ type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100 })
           }
         }
       }
-      if(currentX || currentX === 0) {
-        for(let i = 0; i < verticalLines.length; i++) {
+      if (currentX || currentX === 0) {
+        for (let i = 0; i < verticalLines.length; i++) {
           const { value, range } = verticalLines[i]
           const min = Math.min(...range, (currentY || 0))
           const max = Math.max(...range, (currentY || 0))
 
-          if(Math.abs(currentX - value) < sorptionRange && !isVerticalAdsorbed) {
+          if (Math.abs(currentX - value) < sorptionRange && !isVerticalAdsorbed) {
             correctionVal.offsetX = currentX - value
             isVerticalAdsorbed = true
             _alignmentLines.push({ type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100 })
@@ -214,7 +214,7 @@ export default (
     }
 
     document.onmousemove = e => {
-      if(!isMouseDown) return
+      if (!isMouseDown) return
 
       const currentPageX = e.pageX
       const currentPageY = e.pageY
@@ -228,52 +228,52 @@ export default (
       let top = elOriginTop
       
       // 元素被旋转的情况下
-      if(elRotate) {
+      if (elRotate) {
         // 根据元素旋转的角度，修正鼠标按下后移动的距离（因为拖动的方向发生了改变）
         const revisedX = (Math.cos(rotateRadian) * x + Math.sin(rotateRadian) * y) / canvasScale.value
         let revisedY = (Math.cos(rotateRadian) * y - Math.sin(rotateRadian) * x) / canvasScale.value
 
         // 锁定宽高比例
-        if(fixedRatio) {
-          if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) revisedY = revisedX / aspectRatio
-          if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) revisedY = -revisedX / aspectRatio
+        if (fixedRatio) {
+          if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) revisedY = revisedX / aspectRatio
+          if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) revisedY = -revisedX / aspectRatio
         }
 
         // 根据不同的操作点分别计算元素缩放后的大小和位置
         // 这里计算的位置是错误的，因为旋转后缩放实际上也改变了元素的位置，需要在后面进行矫正
         // 这里计算的大小是正确的，因为上面修正鼠标按下后移动的距离时其实已经进行过了矫正
-        if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
+        if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
           width = getSizeWithinRange(elOriginWidth + revisedX)
           height = getSizeWithinRange(elOriginHeight + revisedY)
         }
-        else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
+        else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
           width = getSizeWithinRange(elOriginWidth - revisedX)
           height = getSizeWithinRange(elOriginHeight + revisedY)
           left = elOriginLeft - (width - elOriginWidth)
         }
-        else if(command === OperateResizeHandlers.LEFT_TOP) {
+        else if (command === OperateResizeHandlers.LEFT_TOP) {
           width = getSizeWithinRange(elOriginWidth - revisedX)
           height = getSizeWithinRange(elOriginHeight - revisedY)
           left = elOriginLeft - (width - elOriginWidth)
           top = elOriginTop - (height - elOriginHeight)
         }
-        else if(command === OperateResizeHandlers.RIGHT_TOP) {
+        else if (command === OperateResizeHandlers.RIGHT_TOP) {
           width = getSizeWithinRange(elOriginWidth + revisedX)
           height = getSizeWithinRange(elOriginHeight - revisedY)
           top = elOriginTop - (height - elOriginHeight)
         }
-        else if(command === OperateResizeHandlers.TOP) {
+        else if (command === OperateResizeHandlers.TOP) {
           height = getSizeWithinRange(elOriginHeight - revisedY)
           top = elOriginTop - (height - elOriginHeight)
         }
-        else if(command === OperateResizeHandlers.BOTTOM) {
+        else if (command === OperateResizeHandlers.BOTTOM) {
           height = getSizeWithinRange(elOriginHeight + revisedY)
         }
-        else if(command === OperateResizeHandlers.LEFT) {
+        else if (command === OperateResizeHandlers.LEFT) {
           width = getSizeWithinRange(elOriginWidth - revisedX)
           left = elOriginLeft - (width - elOriginWidth)
         }
-        else if(command === OperateResizeHandlers.RIGHT) {
+        else if (command === OperateResizeHandlers.RIGHT) {
           width = getSizeWithinRange(elOriginWidth + revisedX)
         }
 
@@ -295,40 +295,40 @@ export default (
         let moveX = x / canvasScale.value
         let moveY = y / canvasScale.value
 
-        if(fixedRatio) {
-          if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
-          if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
+        if (fixedRatio) {
+          if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
+          if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
         }
 
-        if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
+        if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
           const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + elOriginHeight + moveY)
           moveX = moveX - offsetX
           moveY = moveY - offsetY
-          if(fixedRatio) {
-            if(offsetY) moveX = moveY * aspectRatio
+          if (fixedRatio) {
+            if (offsetY) moveX = moveY * aspectRatio
             else moveY = moveX / aspectRatio
           }
           width = getSizeWithinRange(elOriginWidth + moveX)
           height = getSizeWithinRange(elOriginHeight + moveY)
         }
-        else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
+        else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
           const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY)
           moveX = moveX - offsetX
           moveY = moveY - offsetY
-          if(fixedRatio) {
-            if(offsetY) moveX = -moveY * aspectRatio
+          if (fixedRatio) {
+            if (offsetY) moveX = -moveY * aspectRatio
             else moveY = -moveX / aspectRatio
           }
           width = getSizeWithinRange(elOriginWidth - moveX)
           height = getSizeWithinRange(elOriginHeight + moveY)
           left = elOriginLeft - (width - elOriginWidth)
         }
-        else if(command === OperateResizeHandlers.LEFT_TOP) {
+        else if (command === OperateResizeHandlers.LEFT_TOP) {
           const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + moveY)
           moveX = moveX - offsetX
           moveY = moveY - offsetY
-          if(fixedRatio) {
-            if(offsetY) moveX = moveY * aspectRatio
+          if (fixedRatio) {
+            if (offsetY) moveX = moveY * aspectRatio
             else moveY = moveX / aspectRatio
           }
           width = getSizeWithinRange(elOriginWidth - moveX)
@@ -336,36 +336,36 @@ export default (
           left = elOriginLeft - (width - elOriginWidth)
           top = elOriginTop - (height - elOriginHeight)
         }
-        else if(command === OperateResizeHandlers.RIGHT_TOP) {
+        else if (command === OperateResizeHandlers.RIGHT_TOP) {
           const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + moveY)
           moveX = moveX - offsetX
           moveY = moveY - offsetY
-          if(fixedRatio) {
-            if(offsetY) moveX = -moveY * aspectRatio
+          if (fixedRatio) {
+            if (offsetY) moveX = -moveY * aspectRatio
             else moveY = -moveX / aspectRatio
           }
           width = getSizeWithinRange(elOriginWidth + moveX)
           height = getSizeWithinRange(elOriginHeight - moveY)
           top = elOriginTop - (height - elOriginHeight)
         }
-        else if(command === OperateResizeHandlers.LEFT) {
+        else if (command === OperateResizeHandlers.LEFT) {
           const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null)
           moveX = moveX - offsetX
           width = getSizeWithinRange(elOriginWidth - moveX)
           left = elOriginLeft - (width - elOriginWidth)
         }
-        else if(command === OperateResizeHandlers.RIGHT) {
+        else if (command === OperateResizeHandlers.RIGHT) {
           const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null)
           moveX = moveX - offsetX
           width = getSizeWithinRange(elOriginWidth + moveX)
         }
-        else if(command === OperateResizeHandlers.TOP) {
+        else if (command === OperateResizeHandlers.TOP) {
           const { offsetY } = alignedAdsorption(null, elOriginTop + moveY)
           moveY = moveY - offsetY
           height = getSizeWithinRange(elOriginHeight - moveY)
           top = elOriginTop - (height - elOriginHeight)
         }
-        else if(command === OperateResizeHandlers.BOTTOM) {
+        else if (command === OperateResizeHandlers.BOTTOM) {
           const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY)
           moveY = moveY - offsetY
           height = getSizeWithinRange(elOriginHeight + moveY)
@@ -381,7 +381,7 @@ export default (
       document.onmouseup = null
       alignmentLines.value = []
       
-      if(startPageX === e.pageX && startPageY === e.pageY) return
+      if (startPageX === e.pageX && startPageY === e.pageY) return
       
       store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
       emitter.emit(EmitterEvents.SCALE_ELEMENT_STATE, false)
@@ -404,7 +404,7 @@ export default (
     const originElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList.value))
 
     document.onmousemove = e => {
-      if(!isMouseDown) return
+      if (!isMouseDown) return
       
       const currentPageX = e.pageX
       const currentPageY = e.pageY
@@ -414,9 +414,9 @@ export default (
       let y = (currentPageY - startPageY) / canvasScale.value
 
       // 锁定宽高比例
-      if(ctrlOrShiftKeyActive.value) {
-        if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) y = x / aspectRatio
-        if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) y = -x / aspectRatio
+      if (ctrlOrShiftKeyActive.value) {
+        if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) y = x / aspectRatio
+        if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) y = -x / aspectRatio
       }
 
       // 获取鼠标缩放时当前所有激活元素的范围
@@ -425,32 +425,32 @@ export default (
       let currentMinY = minY
       let currentMaxY = maxY
 
-      if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
+      if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
         currentMaxX = maxX + x
         currentMaxY = maxY + y
       }
-      else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
+      else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
         currentMinX = minX + x
         currentMaxY = maxY + y
       }
-      else if(command === OperateResizeHandlers.LEFT_TOP) {
+      else if (command === OperateResizeHandlers.LEFT_TOP) {
         currentMinX = minX + x
         currentMinY = minY + y
       }
-      else if(command === OperateResizeHandlers.RIGHT_TOP) {
+      else if (command === OperateResizeHandlers.RIGHT_TOP) {
         currentMaxX = maxX + x
         currentMinY = minY + y
       }
-      else if(command === OperateResizeHandlers.TOP) {
+      else if (command === OperateResizeHandlers.TOP) {
         currentMinY = minY + y
       }
-      else if(command === OperateResizeHandlers.BOTTOM) {
+      else if (command === OperateResizeHandlers.BOTTOM) {
         currentMaxY = maxY + y
       }
-      else if(command === OperateResizeHandlers.LEFT) {
+      else if (command === OperateResizeHandlers.LEFT) {
         currentMinX = minX + x
       }
-      else if(command === OperateResizeHandlers.RIGHT) {
+      else if (command === OperateResizeHandlers.RIGHT) {
         currentMaxX = maxX + x
       }
 
@@ -462,13 +462,13 @@ export default (
       let widthScale = currentOppositeWidth / operateWidth
       let heightScale = currentOppositeHeight / operateHeight
 
-      if(widthScale <= 0) widthScale = 0
-      if(heightScale <= 0) heightScale = 0
+      if (widthScale <= 0) widthScale = 0
+      if (heightScale <= 0) heightScale = 0
       
       // 根据上面计算的比例，修改所有被激活元素的位置大小
       // 宽高通过乘以对应的比例得到，位置通过将被操作元素在所有元素整体中的相对位置乘以对应比例获得
       elementList.value = elementList.value.map(el => {
-        if((el.type === 'image' || el.type === 'shape') && activeElementIdList.value.includes(el.id)) {
+        if ((el.type === 'image' || el.type === 'shape') && activeElementIdList.value.includes(el.id)) {
           const originElement = originElementList.find(originEl => originEl.id === el.id) as PPTImageElement | PPTShapeElement
           return {
             ...el,
@@ -487,7 +487,7 @@ export default (
       document.onmousemove = null
       document.onmouseup = null
 
-      if(startPageX === e.pageX && startPageY === e.pageY) return
+      if (startPageX === e.pageX && startPageY === e.pageY) return
 
       store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
       addHistorySnapshot()

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

@@ -15,22 +15,22 @@ export default (
   const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
 
   const selectElement = (e: MouseEvent, element: PPTElement, canMove = true) => {
-    if(!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
+    if (!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
 
     // 如果被点击的元素处于未激活状态，则将他设置为激活元素（单选），或者加入到激活元素中（多选）
-    if(!activeElementIdList.value.includes(element.id)) {
+    if (!activeElementIdList.value.includes(element.id)) {
       let newActiveIdList: string[] = []
 
-      if(ctrlOrShiftKeyActive.value) {
+      if (ctrlOrShiftKeyActive.value) {
         newActiveIdList = [...activeElementIdList.value, element.id]
       }
       else newActiveIdList = [element.id]
       
       // 同时如果该元素是分组成员，需要将和他同组的元素一起激活
-      if(element.groupId) {
+      if (element.groupId) {
         const groupMembersId: string[] = []
         elementList.value.forEach((el: PPTElement) => {
-          if(el.groupId === element.groupId) groupMembersId.push(el.id)
+          if (el.groupId === element.groupId) groupMembersId.push(el.id)
         })
         newActiveIdList = [...newActiveIdList, ...groupMembersId]
       }
@@ -40,14 +40,14 @@ export default (
     }
 
     // 如果被点击的元素已激活，且按下了多选按钮，则取消其激活状态（除非该元素或分组是最后的一个激活元素）
-    else if(ctrlOrShiftKeyActive.value) {
+    else if (ctrlOrShiftKeyActive.value) {
       let newActiveIdList: string[] = []
 
       // 同时如果该元素是分组成员，需要将和他同组的元素一起取消
-      if(element.groupId) {
+      if (element.groupId) {
         const groupMembersId: string[] = []
         elementList.value.forEach((el: PPTElement) => {
-          if(el.groupId === element.groupId) groupMembersId.push(el.id)
+          if (el.groupId === element.groupId) groupMembersId.push(el.id)
         })
         newActiveIdList = activeElementIdList.value.filter(id => !groupMembersId.includes(id))
       }
@@ -55,18 +55,18 @@ export default (
         newActiveIdList = activeElementIdList.value.filter(id => id !== element.id)
       }
 
-      if(newActiveIdList.length > 0) {
+      if (newActiveIdList.length > 0) {
         store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, newActiveIdList)
       }
     }
 
     // 如果被点击的元素已激活，且没有按下多选按钮，且该元素不是当前操作元素，则将其设置为当前操作元素
-    else if(handleElementId.value !== element.id) {
+    else if (handleElementId.value !== element.id) {
       store.commit(MutationTypes.SET_HANDLE_ELEMENT_ID, element.id)
     }
 
     // 如果被点击的元素是当前操作元素，且没有按下多选按钮，则该元素下次保持该状态再次被点击时，将被设置为多选元素中的激活成员
-    else if(activeGroupElementId.value !== element.id) {
+    else if (activeGroupElementId.value !== element.id) {
       const startPageX = e.pageX
       const startPageY = e.pageY
 
@@ -74,14 +74,14 @@ export default (
         const currentPageX = e.pageX
         const currentPageY = e.pageY
 
-        if(startPageX === currentPageX && startPageY === currentPageY) {
+        if (startPageX === currentPageX && startPageY === currentPageY) {
           activeGroupElementId.value = element.id
           ;(e.target as HTMLElement).onmouseup = null
         }
       }
     }
 
-    if(canMove) moveElement(e, element)
+    if (canMove) moveElement(e, element)
   }
 
   const selectAllElement = () => {

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

@@ -10,11 +10,11 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
   const canvasPercentage = computed(() => store.state.canvasPercentage)
 
   const setViewportSize = () => {
-    if(!canvasRef.value) return
+    if (!canvasRef.value) return
     const canvasWidth = canvasRef.value.clientWidth
     const canvasHeight = canvasRef.value.clientHeight
 
-    if(canvasHeight / canvasWidth > VIEWPORT_ASPECT_RATIO) {
+    if (canvasHeight / canvasWidth > VIEWPORT_ASPECT_RATIO) {
       const viewportActualWidth = canvasWidth * (canvasPercentage.value / 100)
       store.commit(MutationTypes.SET_CANVAS_SCALE, viewportActualWidth / VIEWPORT_SIZE)
       viewportLeft.value = (canvasWidth - viewportActualWidth) / 2
@@ -40,10 +40,10 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
   const resizeObserver = new ResizeObserver(setViewportSize)
 
   onMounted(() => {
-    if(canvasRef.value) resizeObserver.observe(canvasRef.value)
+    if (canvasRef.value) resizeObserver.observe(canvasRef.value)
   })
   onUnmounted(() => {
-    if(canvasRef.value) resizeObserver.unobserve(canvasRef.value)
+    if (canvasRef.value) resizeObserver.unobserve(canvasRef.value)
   })
 
   return {

src/views/Editor/Canvas/index.vue

@@ -159,24 +159,24 @@ export default defineComponent({
 
     const handleClickBlankArea = (e: MouseEvent) => {
       store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
-      if(!ctrlOrShiftKeyActive.value) updateMouseSelection(e)
-      if(!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
+      if (!ctrlOrShiftKeyActive.value) updateMouseSelection(e)
+      if (!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
       removeAllRanges()
     }
 
     const removeEditorAreaFocus = () => {
-      if(editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, false)
+      if (editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, false)
     }
 
     const { scaleCanvas } = useScaleCanvas()
     const throttleScaleCanvas = throttle(scaleCanvas, 100, { leading: true, trailing: false })
 
     const mousewheelScaleCanvas = (e: WheelEvent) => {
-      if(!ctrlKeyState.value) return
+      if (!ctrlKeyState.value) return
 
       e.preventDefault()
-      if(e.deltaY > 0) throttleScaleCanvas('-')
-      else if(e.deltaY < 0) throttleScaleCanvas('+')
+      if (e.deltaY > 0) throttleScaleCanvas('-')
+      else if (e.deltaY < 0) throttleScaleCanvas('+')
     }
 
     const showGridLines = computed(() => store.state.showGridLines)

src/views/Editor/CanvasTool/TableGenerator.vue

@@ -65,14 +65,14 @@ export default defineComponent({
     const isCustom = ref(false)
 
     const handleClickTable = () => {
-      if(!endCell.value.length) return
+      if (!endCell.value.length) return
       const [row, col] = endCell.value
       emit('insert', { row, col })
     }
 
     const insertCustomTable = () => {
-      if(customRow.value < 1 || customRow.value > 20) return message.warning('行数/列数必须在0~20之间！')
-      if(customCol.value < 1 || customCol.value > 20) return message.warning('行数/列数必须在0~20之间！')
+      if (customRow.value < 1 || customRow.value > 20) return message.warning('行数/列数必须在0~20之间！')
+      if (customCol.value < 1 || customCol.value > 20) return message.warning('行数/列数必须在0~20之间！')
       emit('insert', { row: customRow.value, col: customCol.value })
       isCustom.value = false
     }

src/views/Editor/CanvasTool/index.vue

@@ -104,7 +104,7 @@ export default defineComponent({
 
     const insertImageElement = (files: File[]) => {
       const imageFile = files[0]
-      if(!imageFile) return
+      if (!imageFile) return
       getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
     }
 

src/views/Editor/Thumbnails/index.vue

@@ -66,20 +66,20 @@ export default defineComponent({
     const changSlideIndex = (index: number) => {
       store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
 
-      if(slideIndex.value === index) return
+      if (slideIndex.value === index) return
       store.commit(MutationTypes.UPDATE_SLIDE_INDEX, index)
     }
 
     const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
 
     const setThumbnailsFocus = (focus: boolean) => {
-      if(thumbnailsFocus.value === focus) return
+      if (thumbnailsFocus.value === focus) return
       store.commit(MutationTypes.SET_THUMBNAILS_FOCUS, focus)
     }
 
     const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
       const { newIndex, oldIndex } = eventData
-      if(oldIndex === newIndex) return
+      if (oldIndex === newIndex) return
 
       const _slides = JSON.parse(JSON.stringify(slides.value))
       const _slide = _slides[oldIndex]

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -77,8 +77,8 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import Draggable from 'vuedraggable'
 
 const animationTypes: { [key: string]: string } = {}
-for(const type of ANIMATIONS) {
-  for(const animation of type.children) {
+for (const type of ANIMATIONS) {
+  for (const animation of type.children) {
     animationTypes[animation.value] = animation.name
   }
 }
@@ -102,11 +102,11 @@ export default defineComponent({
     const animations = ANIMATIONS
 
     const animationSequence = computed(() => {
-      if(!currentSlideAnimations.value) return []
+      if (!currentSlideAnimations.value) return []
       const animationSequence = []
-      for(const animation of currentSlideAnimations.value) {
+      for (const animation of currentSlideAnimations.value) {
         const el = currentSlide.value.elements.find(el => el.id === animation.elId)
-        if(!el) continue
+        if (!el) continue
         const elType = ELEMENT_TYPE_ZH[el.type]
         const animationType = animationTypes[animation.type]
 
@@ -120,16 +120,16 @@ export default defineComponent({
     })
 
     const handleElementAnimation = computed(() => {
-      if(!handleElement.value) return null
+      if (!handleElement.value) return null
       const animations = currentSlideAnimations.value || []
       const animation = animations.find(item => item.elId === handleElement.value.id)
-      if(!animation) return null
+      if (!animation) return null
       return animationTypes[animation.type]
     })
 
     const updateElementAnimation = (type: string) => {
       const animations = (currentSlideAnimations.value as PPTAnimation[]).map(item => {
-        if(item.elId === handleElement.value.id) return { ...item, type }
+        if (item.elId === handleElement.value.id) return { ...item, type }
         return item
       })
       store.commit(MutationTypes.UPDATE_SLIDE, { animations })
@@ -138,7 +138,7 @@ export default defineComponent({
     }
 
     const addAnimation = (type: string) => {
-      if(handleElementAnimation.value) {
+      if (handleElementAnimation.value) {
         updateElementAnimation(type)
         return
       }
@@ -161,7 +161,7 @@ export default defineComponent({
 
     const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
       const { newIndex, oldIndex } = eventData
-      if(oldIndex === newIndex) return
+      if (oldIndex === newIndex) return
 
       const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
       const animation = animations[oldIndex]
@@ -175,7 +175,7 @@ export default defineComponent({
     const runAnimation = (elId: string, animationType: string) => {
       const prefix = 'animate__'
       const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`)
-      if(elRef) {
+      if (elRef) {
         const animationName = `${prefix}${animationType}`
         elRef.classList.add(`${prefix}animated`, animationName)
 

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -156,19 +156,19 @@ export default defineComponent({
     const fixedRatio = ref(false)
 
     const minSize = computed(() => {
-      if(!handleElement.value) return 20
+      if (!handleElement.value) return 20
       return MIN_SIZE[handleElement.value.type] || 20
     })
 
     watch(handleElement, () => {
-      if(!handleElement.value) return
+      if (!handleElement.value) return
 
       left.value = round(handleElement.value.left, 1)
       top.value = round(handleElement.value.top, 1)
 
       fixedRatio.value = 'fixedRatio' in handleElement.value && !!handleElement.value.fixedRatio
 
-      if(handleElement.value.type !== 'line') {
+      if (handleElement.value.type !== 'line') {
         width.value = round(handleElement.value.width, 1)
         height.value = round(handleElement.value.height, 1)
         rotate.value = 'rotate' in handleElement.value && handleElement.value.rotate !== undefined ? round(handleElement.value.rotate, 1) : 0
@@ -212,11 +212,11 @@ export default defineComponent({
     }
     const updateRotate45 = (command: '+' | '-') => {
       let _rotate = Math.floor(rotate.value / 45) * 45
-      if(command === '+') _rotate = _rotate + 45
-      else if(command === '-') _rotate = _rotate - 45
+      if (command === '+') _rotate = _rotate + 45
+      else if (command === '-') _rotate = _rotate - 45
 
-      if(_rotate < -180) _rotate = -180
-      if(_rotate > 180) _rotate = 180
+      if (_rotate < -180) _rotate = -180
+      if (_rotate > 180) _rotate = 180
 
       const props = { rotate: _rotate }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue

@@ -86,18 +86,18 @@ export default defineComponent({
       const rowCount = labels.length
       const colCount = series.length
 
-      for(let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+      for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
         const row = [labels[rowIndex]]
-        for(let colIndex = 0; colIndex < colCount; colIndex++) {
+        for (let colIndex = 0; colIndex < colCount; colIndex++) {
           row.push(series[colIndex][rowIndex] + '')
         }
         _data.push(row)
       }
 
-      for(let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-        for(let colIndex = 0; colIndex < colCount + 1; colIndex++) {
+      for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+        for (let colIndex = 0; colIndex < colCount + 1; colIndex++) {
           const inputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
-          if(!inputRef) continue
+          if (!inputRef) continue
           inputRef.value = _data[rowIndex][colIndex] + ''
         }
       }
@@ -113,19 +113,19 @@ export default defineComponent({
       const labels: string[] = []
       const series: number[][] = []
 
-      for(let rowIndex = 0; rowIndex < row; rowIndex++) {
+      for (let rowIndex = 0; rowIndex < row; rowIndex++) {
         let labelsItem = `类别${rowIndex + 1}`
         const labelInputRef = document.querySelector(`#cell-${rowIndex}-0`) as HTMLInputElement
-        if(labelInputRef && labelInputRef.value) labelsItem = labelInputRef.value
+        if (labelInputRef && labelInputRef.value) labelsItem = labelInputRef.value
         labels.push(labelsItem)
       }
 
-      for(let colIndex = 1; colIndex < col; colIndex++) {
+      for (let colIndex = 1; colIndex < col; colIndex++) {
         const seriesItem = []
-        for(let rowIndex = 0; rowIndex < row; rowIndex++) {
+        for (let rowIndex = 0; rowIndex < row; rowIndex++) {
           const valueInputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
           let value = 0
-          if(valueInputRef && valueInputRef.value && !!(+valueInputRef.value)) {
+          if (valueInputRef && valueInputRef.value && !!(+valueInputRef.value)) {
             value = +valueInputRef.value
           }
           seriesItem.push(value)
@@ -148,7 +148,7 @@ export default defineComponent({
       const originHeight = selectedRange.value[1] * CELL_HEIGHT
 
       document.onmousemove = e => {
-        if(!isMouseDown) return
+        if (!isMouseDown) return
 
         const currentPageX = e.pageX
         const currentPageY = e.pageY
@@ -170,18 +170,18 @@ export default defineComponent({
         const endPageX = e.pageX
         const endPageY = e.pageY
 
-        if(startPageX === endPageX && startPageY === endPageY) return
+        if (startPageX === endPageX && startPageY === endPageY) return
 
         let width = tempRangeSize.value.width
         let height = tempRangeSize.value.height
-        if(width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
-        if(height % CELL_HEIGHT > CELL_HEIGHT * 0.5) height = height + (CELL_HEIGHT - height % CELL_HEIGHT)
+        if (width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
+        if (height % CELL_HEIGHT > CELL_HEIGHT * 0.5) height = height + (CELL_HEIGHT - height % CELL_HEIGHT)
 
         let row = Math.round(height / CELL_HEIGHT)
         let col = Math.round(width / CELL_WIDTH)
 
-        if(row < 3) row = 3
-        if(col < 2) col = 2
+        if (row < 3) row = 3
+        if (col < 2) col = 2
 
         selectedRange.value = [col, row]
         tempRangeSize.value = { width: 0, height: 0 }

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -136,10 +136,10 @@ export default defineComponent({
     const donut = ref(false)
 
     watch(handleElement, () => {
-      if(!handleElement.value || handleElement.value.type !== 'chart') return
+      if (!handleElement.value || handleElement.value.type !== 'chart') return
       fill.value = handleElement.value.fill || '#000'
 
-      if(handleElement.value.options) {
+      if (handleElement.value.options) {
         const {
           lineSmooth: _lineSmooth,
           showLine: _showLine,
@@ -148,11 +148,11 @@ export default defineComponent({
           donut: _donut,
         } = handleElement.value.options
 
-        if(_lineSmooth !== undefined) lineSmooth.value = _lineSmooth
-        if(_showLine !== undefined) showLine.value = _showLine
-        if(_showArea !== undefined) showArea.value = _showArea
-        if(_horizontalBars !== undefined) horizontalBars.value = _horizontalBars
-        if(_donut !== undefined) donut.value = _donut
+        if (_lineSmooth !== undefined) lineSmooth.value = _lineSmooth
+        if (_showLine !== undefined) showLine.value = _showLine
+        if (_showArea !== undefined) showArea.value = _showArea
+        if (_horizontalBars !== undefined) horizontalBars.value = _horizontalBars
+        if (_donut !== undefined) donut.value = _donut
       }
 
       themeColor.value = handleElement.value.themeColor

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -178,9 +178,9 @@ export default defineComponent({
     const filterOptions = ref<FilterOption[]>(JSON.parse(JSON.stringify(defaultFilters)))
 
     watch(handleElement, () => {
-      if(!handleElement.value || handleElement.value.type !== 'image') return
+      if (!handleElement.value || handleElement.value.type !== 'image') return
 
-      if(handleElement.value.flip) {
+      if (handleElement.value.flip) {
         flip.value = {
           x: handleElement.value.flip.x || 0,
           y: handleElement.value.flip.y || 0,
@@ -189,9 +189,9 @@ export default defineComponent({
       else flip.value = { x: 0, y: 0 }
 
       const filters = handleElement.value.filters
-      if(filters) {
+      if (filters) {
         filterOptions.value = defaultFilters.map(item => {
-          if(filters[item.key] !== undefined) return { ...item, value: parseInt(filters[item.key]) }
+          if (filters[item.key] !== undefined) return { ...item, value: parseInt(filters[item.key]) }
           return item
         })
       }
@@ -251,14 +251,14 @@ export default defineComponent({
       } = getImageElementDataBeforeClip()
       
       // 设置形状和纵横比
-      if(ratio) {
+      if (ratio) {
         const imageRatio = originHeight / originWidth
 
         const min = 0
         const max = 100
         let range
 
-        if(imageRatio > ratio) {
+        if (imageRatio > ratio) {
           const distance = ((1 - ratio / imageRatio) / 2) * 100
           range = [[min, distance], [max, max - distance]]
         }
@@ -292,7 +292,7 @@ export default defineComponent({
 
     const replaceImage = (files: File[]) => {
       const imageFile = files[0]
-      if(!imageFile) return
+      if (!imageFile) return
       getImageDataURL(imageFile).then(dataURL => {
         const props = { src: dataURL }
         store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
@@ -301,7 +301,7 @@ export default defineComponent({
     }
 
     const resetImage = () => {
-      if(handleElement.value.clip) {
+      if (handleElement.value.clip) {
         const {
           originWidth,
           originHeight,

src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue

@@ -105,7 +105,7 @@ export default defineComponent({
     const fillType = ref('fill')
 
     watch(handleElement, () => {
-      if(!handleElement.value || handleElement.value.type !== 'shape') return
+      if (!handleElement.value || handleElement.value.type !== 'shape') return
       fill.value = handleElement.value.fill || '#000'
 
       gradient.value = handleElement.value.gradient || { type: 'linear', rotate: 0, color: [fill.value, '#fff'] }
@@ -116,7 +116,7 @@ export default defineComponent({
     const { addHistorySnapshot } = useHistorySnapshot()
 
     const updateFillType = (type: 'gradient' | 'fill') => {
-      if(type === 'fill') {
+      if (type === 'fill') {
         store.commit(MutationTypes.REMOVE_ELEMENT_PROPS, {
           id: handleElement.value.id,
           propName: 'gradient',

src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue

@@ -227,7 +227,7 @@ export default defineComponent({
     const minColCount = ref(0)
 
     watch(handleElement, () => {
-      if(!handleElement.value || handleElement.value.type !== 'table') return
+      if (!handleElement.value || handleElement.value.type !== 'table') return
       
       theme.value = handleElement.value.theme
       hasTheme.value = !!theme.value
@@ -242,18 +242,18 @@ export default defineComponent({
     const selectedCells = ref<string[]>([])
 
     const updateTextAttrState = () => {
-      if(!handleElement.value) return
+      if (!handleElement.value) return
 
       let rowIndex = 0
       let colIndex = 0
-      if(selectedCells.value.length) {
+      if (selectedCells.value.length) {
         const selectedCell = selectedCells.value[0]
         rowIndex = +selectedCell.split('_')[0]
         colIndex = +selectedCell.split('_')[1]
       }
       const style = handleElement.value.data[rowIndex][colIndex].style
 
-      if(!style) {
+      if (!style) {
         textAttrs.value = {
           bold: false,
           em: false,
@@ -301,9 +301,9 @@ export default defineComponent({
     const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
       const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
 
-      for(let i = 0; i < data.length; i++) {
-        for(let j = 0; j < data[i].length; j++) {
-          if(!selectedCells.value.length || selectedCells.value.includes(`${i}_${j}`)) {
+      for (let i = 0; i < data.length; i++) {
+        for (let j = 0; j < data[i].length; j++) {
+          if (!selectedCells.value.length || selectedCells.value.includes(`${i}_${j}`)) {
             const style = data[i][j].style || {}
             data[i][j].style = { ...style, ...textAttrProp }
           }
@@ -324,7 +324,7 @@ export default defineComponent({
     }
 
     const toggleTheme = (checked: boolean) => {
-      if(checked) {
+      if (checked) {
         const props = {
           theme: {
             color: '#d14424',
@@ -346,8 +346,8 @@ export default defineComponent({
       const value = +(e.target as HTMLInputElement).value
       const rowCount = handleElement.value.data.length
 
-      if(value === rowCount) return
-      if(value < rowCount) return message.warning('设置行数不能少于当前值')
+      if (value === rowCount) return
+      if (value < rowCount) return message.warning('设置行数不能少于当前值')
 
       const rowCells: TableCell[] = new Array(colCount.value).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
       const newTableCells: TableCell[][] = new Array(value - rowCount).fill(rowCells)
@@ -364,8 +364,8 @@ export default defineComponent({
       const value = +(e.target as HTMLInputElement).value
       const colCount = handleElement.value.data[0].length
 
-      if(value === colCount) return
-      if(value < colCount) return message.warning('设置列数不能少于当前值')
+      if (value === colCount) return
+      if (value < colCount) return message.warning('设置列数不能少于当前值')
 
       const tableCells = handleElement.value.data.map(item => {
         const cells: TableCell[] = new Array(value - colCount).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -326,7 +326,7 @@ export default defineComponent({
     const wordSpace = ref<number>()
 
     watch(handleElement, () => {
-      if(!handleElement.value || handleElement.value.type !== 'text') return
+      if (!handleElement.value || handleElement.value.type !== 'text') return
 
       fill.value = handleElement.value.fill || '#000'
       lineHeight.value = handleElement.value.lineHeight || 1.5

src/views/Editor/Toolbar/ElementStylePanel/index.vue

@@ -26,7 +26,7 @@ export default defineComponent({
     const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const currentPanelComponent = computed(() => {
-      if(!handleElement.value) return null
+      if (!handleElement.value) return null
       
       const panelMap = {
         [ElementTypes.TEXT]: TextStylePanel,

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -54,7 +54,7 @@ export default defineComponent({
 
     const canCombine = computed(() => {
       const firstGroupId = activeElementList.value[0].groupId
-      if(!firstGroupId) return true
+      if (!firstGroupId) return true
 
       const inSameGroup = activeElementList.value.every(el => (el.groupId && el.groupId) === firstGroupId)
       return !inSameGroup
@@ -66,17 +66,17 @@ export default defineComponent({
 
       // 获取每一个组合的宽高位置
       const groupElementRangeMap = {}
-      for(const activeElement of activeElementList.value) {
-        if(activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) {
+      for (const activeElement of activeElementList.value) {
+        if (activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) {
           const groupElements = activeElementList.value.filter(item => item.groupId === activeElement.groupId)
           groupElementRangeMap[activeElement.groupId] = getElementListRange(groupElements)
         }
       }
 
-      if(command === ElementAlignCommands.LEFT) {
+      if (command === ElementAlignCommands.LEFT) {
         elementList.forEach(element => {
-          if(activeElementIdList.value.includes(element.id)) {
-            if(!element.groupId) element.left = minX
+          if (activeElementIdList.value.includes(element.id)) {
+            if (!element.groupId) element.left = minX
             else {
               const range = groupElementRangeMap[element.groupId]
               const offset = range.minX - minX
@@ -85,10 +85,10 @@ export default defineComponent({
           }
         })
       }
-      else if(command === ElementAlignCommands.RIGHT) {
+      else if (command === ElementAlignCommands.RIGHT) {
         elementList.forEach(element => {
-          if(activeElementIdList.value.includes(element.id)) {
-            if(!element.groupId) {
+          if (activeElementIdList.value.includes(element.id)) {
+            if (!element.groupId) {
               const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
               element.left = maxX - elWidth
             }
@@ -100,10 +100,10 @@ export default defineComponent({
           }
         })
       }
-      else if(command === ElementAlignCommands.TOP) {
+      else if (command === ElementAlignCommands.TOP) {
         elementList.forEach(element => {
-          if(activeElementIdList.value.includes(element.id)) {
-            if(!element.groupId) element.top = minY
+          if (activeElementIdList.value.includes(element.id)) {
+            if (!element.groupId) element.top = minY
             else {
               const range = groupElementRangeMap[element.groupId]
               const offset = range.minY - minY
@@ -112,10 +112,10 @@ export default defineComponent({
           }
         })
       }
-      else if(command === ElementAlignCommands.BOTTOM) {
+      else if (command === ElementAlignCommands.BOTTOM) {
         elementList.forEach(element => {
-          if(activeElementIdList.value.includes(element.id)) {
-            if(!element.groupId) {
+          if (activeElementIdList.value.includes(element.id)) {
+            if (!element.groupId) {
               const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
               element.top = maxY - elHeight
             }
@@ -127,11 +127,11 @@ export default defineComponent({
           }
         })
       }
-      else if(command === ElementAlignCommands.HORIZONTAL) {
+      else if (command === ElementAlignCommands.HORIZONTAL) {
         const horizontalCenter = (minX + maxX) / 2
         elementList.forEach(element => {
-          if(activeElementIdList.value.includes(element.id)) {
-            if(!element.groupId) {
+          if (activeElementIdList.value.includes(element.id)) {
+            if (!element.groupId) {
               const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
               element.left = horizontalCenter - elWidth / 2
             }
@@ -144,11 +144,11 @@ export default defineComponent({
           }
         })
       }
-      else if(command === ElementAlignCommands.VERTICAL) {
+      else if (command === ElementAlignCommands.VERTICAL) {
         const verticalCenter = (minY + maxY) / 2
         elementList.forEach(element => {
-          if(activeElementIdList.value.includes(element.id)) {
-            if(!element.groupId) {
+          if (activeElementIdList.value.includes(element.id)) {
+            if (!element.groupId) {
               const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
               element.top = verticalCenter - elHeight / 2
             }

src/views/Editor/Toolbar/SlideAnimationPanel.vue

@@ -41,7 +41,7 @@ export default defineComponent({
     const { addHistorySnapshot } = useHistorySnapshot()
 
     const updateTurningMode = (mode: string) => {
-      if(mode === currentTurningMode.value) return
+      if (mode === currentTurningMode.value) return
       store.commit(MutationTypes.UPDATE_SLIDE, { turningMode: mode })
       addHistorySnapshot()
     }

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -206,7 +206,7 @@ export default defineComponent({
     const availableFonts = computed(() => store.state.availableFonts)
 
     const background = computed(() => {
-      if(!currentSlide.value.background) {
+      if (!currentSlide.value.background) {
         return {
           type: 'solid',
           value: '#fff',
@@ -218,7 +218,7 @@ export default defineComponent({
     const { addHistorySnapshot } = useHistorySnapshot()
 
     const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => {
-      if(type === 'solid') {
+      if (type === 'solid') {
         const newBackground: SlideBackground = {
           ...background.value,
           type: 'solid',
@@ -226,7 +226,7 @@ export default defineComponent({
         }
         store.commit(MutationTypes.UPDATE_SLIDE, { background: newBackground })
       }
-      else if(type === 'image') {
+      else if (type === 'image') {
         const newBackground: SlideBackground = {
           ...background.value,
           type: 'image',
@@ -255,7 +255,7 @@ export default defineComponent({
 
     const uploadBackgroundImage = (files: File[]) => {
       const imageFile = files[0]
-      if(!imageFile) return
+      if (!imageFile) return
       getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL }))
     }
 
@@ -278,8 +278,8 @@ export default defineComponent({
       const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
       const { themeColor, backgroundColor, fontColor } = theme.value
 
-      for(const slide of newSlides) {
-        if(!slide.background || slide.background.type !== 'image') {
+      for (const slide of newSlides) {
+        if (!slide.background || slide.background.type !== 'image') {
           slide.background = {
             ...slide.background,
             type: 'solid',
@@ -288,16 +288,16 @@ export default defineComponent({
         }
 
         const elements = slide.elements
-        for(const el of elements) {
-          if(el.type === 'shape') el.fill = themeColor
-          else if(el.type === 'line') el.color = themeColor
-          else if(el.type === 'text') {
-            if(el.fill) el.fill = themeColor
+        for (const el of elements) {
+          if (el.type === 'shape') el.fill = themeColor
+          else if (el.type === 'line') el.color = themeColor
+          else if (el.type === 'text') {
+            if (el.fill) el.fill = themeColor
           }
-          else if(el.type === 'table') {
-            if(el.theme) el.theme.color = themeColor
+          else if (el.type === 'table') {
+            if (el.theme) el.theme.color = themeColor
           }
-          else if(el.type === 'chart') {
+          else if (el.type === 'chart') {
             el.themeColor = themeColor
             el.gridColor = fontColor
           }

src/views/Editor/Toolbar/common/ElementOpacity.vue

@@ -29,7 +29,7 @@ export default defineComponent({
     const opacity = ref<number>()
 
     watch(handleElement, () => {
-      if(!handleElement.value) return
+      if (!handleElement.value) return
       opacity.value = 'opacity' in handleElement.value && handleElement.value.opacity !== undefined ? handleElement.value.opacity : 1
     }, { deep: true, immediate: true })
 

src/views/Editor/Toolbar/common/ElementOutline.vue

@@ -72,7 +72,7 @@ export default defineComponent({
     const hasOutline = ref(false)
 
     watch(handleElement, () => {
-      if(!handleElement.value) return
+      if (!handleElement.value) return
       outline.value = 'outline' in handleElement.value ? handleElement.value.outline : undefined
       hasOutline.value = !!outline.value
     }, { deep: true, immediate: true })
@@ -86,7 +86,7 @@ export default defineComponent({
     }
 
     const toggleOutline = (checked: boolean) => {
-      if(checked) {
+      if (checked) {
         const props = { outline: { width: 2, color: '#000', style: 'solid' } }
         store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       }

src/views/Editor/Toolbar/common/ElementShadow.vue

@@ -77,7 +77,7 @@ export default defineComponent({
     const hasShadow = ref(false)
 
     watch(handleElement, () => {
-      if(!handleElement.value) return
+      if (!handleElement.value) return
       shadow.value = 'shadow' in handleElement.value ? handleElement.value.shadow : undefined
       hasShadow.value = !!shadow.value
     }, { deep: true, immediate: true })
@@ -91,7 +91,7 @@ export default defineComponent({
     }
 
     const toggleShadow = (checked: boolean) => {
-      if(checked) {
+      if (checked) {
         const props = { shadow: { h: 1, v: 1, blur: 2, color: '#000' } }
         store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       }

src/views/Editor/Toolbar/index.vue

@@ -54,14 +54,14 @@ export default defineComponent({
 
     const activeElementIdList = computed(() => store.state.activeElementIdList)
     const currentTabs = computed(() => {
-      if(!activeElementIdList.value.length) return slideTabs
-      else if(activeElementIdList.value.length > 1) return multiSelectTabs
+      if (!activeElementIdList.value.length) return slideTabs
+      else if (activeElementIdList.value.length > 1) return multiSelectTabs
       return elementTabs
     })
 
     watch(currentTabs, () => {
       const currentTabsValue = currentTabs.value.map(tab => tab.value)
-      if(!currentTabsValue.includes(toolbarState.value)) {
+      if (!currentTabsValue.includes(toolbarState.value)) {
         store.commit(MutationTypes.SET_TOOLBAR_STATE, currentTabsValue[0])
       }
     })

src/views/Editor/useHotkey.ts

@@ -49,56 +49,56 @@ export default () => {
   const { scaleCanvas, setCanvasPercentage } = useScaleCanvas()
 
   const copy = () => {
-    if(activeElementIdList.value.length) copyElement()
-    else if(thumbnailsFocus.value) copySlide()
+    if (activeElementIdList.value.length) copyElement()
+    else if (thumbnailsFocus.value) copySlide()
   }
 
   const cut = () => {
-    if(activeElementIdList.value.length) cutElement()
-    else if(thumbnailsFocus.value) cutSlide()
+    if (activeElementIdList.value.length) cutElement()
+    else if (thumbnailsFocus.value) cutSlide()
   }
 
   const quickCopy = () => {
-    if(activeElementIdList.value.length) quickCopyElement()
-    else if(thumbnailsFocus.value) copyAndPasteSlide()
+    if (activeElementIdList.value.length) quickCopyElement()
+    else if (thumbnailsFocus.value) copyAndPasteSlide()
   }
 
   const selectAll = () => {
-    if(!editorAreaFocus.value) return
+    if (!editorAreaFocus.value) return
     selectAllElement()
   }
 
   const lock = () => {
-    if(!editorAreaFocus.value) return
+    if (!editorAreaFocus.value) return
     lockElement()
   }
   const combine = () => {
-    if(!editorAreaFocus.value) return
+    if (!editorAreaFocus.value) return
     combineElements()
   }
 
   const uncombine = () => {
-    if(!editorAreaFocus.value) return
+    if (!editorAreaFocus.value) return
     uncombineElements()
   }
 
   const remove = () => {
-    if(activeElementIdList.value.length) deleteElement()
-    else if(thumbnailsFocus.value) deleteSlide()
+    if (activeElementIdList.value.length) deleteElement()
+    else if (thumbnailsFocus.value) deleteSlide()
   }
 
   const move = (key: string) => {
-    if(activeElementIdList.value.length) moveElement(key)
-    else if(key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key)
+    if (activeElementIdList.value.length) moveElement(key)
+    else if (key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key)
   }
 
   const order = (command: ElementOrderCommand) => {
-    if(!handleElement.value) return
+    if (!handleElement.value) return
     orderElement(handleElement.value, command)
   }
 
   const create = () => {
-    if(!thumbnailsFocus.value) return
+    if (!thumbnailsFocus.value) return
     createSlide()
   }
 
@@ -107,122 +107,122 @@ export default () => {
 
     const key = e.key.toUpperCase()
 
-    if(ctrlKey && !ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, true)
-    if(shiftKey && !shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, true)
+    if (ctrlKey && !ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, true)
+    if (shiftKey && !shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, true)
 
-    if(ctrlKey && key === KEYS.F) {
+    if (ctrlKey && key === KEYS.F) {
       e.preventDefault()
       enterScreening()
       store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
     }
     
-    if(!editorAreaFocus.value && !thumbnailsFocus.value) return      
+    if (!editorAreaFocus.value && !thumbnailsFocus.value) return      
 
-    if((ctrlKey || metaKey) && key === KEYS.C) {
-      if(disableHotkeys.value) return
+    if ((ctrlKey || metaKey) && key === KEYS.C) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       copy()
     }
-    if(ctrlKey && key === KEYS.X) {
-      if(disableHotkeys.value) return
+    if (ctrlKey && key === KEYS.X) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       cut()
     }
-    if(ctrlKey && key === KEYS.D) {
-      if(disableHotkeys.value) return
+    if (ctrlKey && key === KEYS.D) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       quickCopy()
     }
-    if(ctrlKey && key === KEYS.Z) {
-      if(disableHotkeys.value) return
+    if (ctrlKey && key === KEYS.Z) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       undo()
     }
-    if(ctrlKey && key === KEYS.Y) {
-      if(disableHotkeys.value) return
+    if (ctrlKey && key === KEYS.Y) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       redo()
     }
-    if(ctrlKey && key === KEYS.A) {
-      if(disableHotkeys.value) return
+    if (ctrlKey && key === KEYS.A) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       selectAll()
     }
-    if(ctrlKey && key === KEYS.L) {
-      if(disableHotkeys.value) return
+    if (ctrlKey && key === KEYS.L) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       lock()
     }
-    if(!shiftKey && ctrlKey && key === KEYS.G) {
-      if(disableHotkeys.value) return
+    if (!shiftKey && ctrlKey && key === KEYS.G) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       combine()
     }
-    if(shiftKey && ctrlKey && key === KEYS.G) {
-      if(disableHotkeys.value) return
+    if (shiftKey && ctrlKey && key === KEYS.G) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       uncombine()
     }
-    if(altKey && key === KEYS.F) {
-      if(disableHotkeys.value) return
+    if (altKey && key === KEYS.F) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       order(ElementOrderCommands.TOP)
     }
-    if(altKey && key === KEYS.B) {
-      if(disableHotkeys.value) return
+    if (altKey && key === KEYS.B) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       order(ElementOrderCommands.BOTTOM)
     }
-    if(key === KEYS.DELETE) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.DELETE) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       remove()
     }
-    if(key === KEYS.UP) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.UP) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       move(KEYS.UP)
     }
-    if(key === KEYS.DOWN) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.DOWN) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       move(KEYS.DOWN)
     }
-    if(key === KEYS.LEFT) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.LEFT) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       move(KEYS.LEFT)
     }
-    if(key === KEYS.RIGHT) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.RIGHT) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       move(KEYS.RIGHT)
     }
-    if(key === KEYS.ENTER) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.ENTER) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       create()
     }
-    if(key === KEYS.MINUS) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.MINUS) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       scaleCanvas('-')
     }
-    if(key === KEYS.EQUAL) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.EQUAL) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       scaleCanvas('+')
     }
-    if(key === KEYS.DIGIT_0) {
-      if(disableHotkeys.value) return
+    if (key === KEYS.DIGIT_0) {
+      if (disableHotkeys.value) return
       e.preventDefault()
       setCanvasPercentage(90)
     }
   }
   
   const keyupListener = () => {
-    if(ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
-    if(shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, false)
+    if (ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
+    if (shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, false)
   }
 
   onMounted(() => {

src/views/Editor/usePasteEvent.ts

@@ -18,25 +18,25 @@ export default () => {
   }
 
   const pasteListener = (e: ClipboardEvent) => {
-    if(!editorAreaFocus.value && !thumbnailsFocus.value) return
-    if(disableHotkeys.value) return
+    if (!editorAreaFocus.value && !thumbnailsFocus.value) return
+    if (disableHotkeys.value) return
 
-    if(!e.clipboardData) return
+    if (!e.clipboardData) return
 
     const clipboardDataItems = e.clipboardData.items
     const clipboardDataFirstItem = clipboardDataItems[0]
 
-    if(!clipboardDataFirstItem) return
+    if (!clipboardDataFirstItem) return
 
-    for(const item of clipboardDataItems) {
-      if(item.kind === 'file' && item.type.indexOf('image') !== -1) {
+    for (const item of clipboardDataItems) {
+      if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
         const imageFile = item.getAsFile()
-        if(imageFile) pasteImageFile(imageFile)
+        if (imageFile) pasteImageFile(imageFile)
         return
       }
     }
 
-    if(clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
+    if (clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
       clipboardDataFirstItem.getAsString(text => pasteTextClipboardData(text))
     }
   }

src/views/Screen/ScreenElement.vue

@@ -63,7 +63,7 @@ export default defineComponent({
     const needWaitAnimation = computed(() => {
       const animations = currentSlide.value.animations || []
       const elementIndexInAnimation = animations.findIndex(animation => animation.elId === props.elementInfo.id)
-      if(elementIndexInAnimation !== -1 && elementIndexInAnimation >= props.animationIndex) return true
+      if (elementIndexInAnimation !== -1 && elementIndexInAnimation >= props.animationIndex) return true
       return false      
     })
 

src/views/Screen/WritingBoardTool.vue

@@ -48,7 +48,7 @@ export default defineComponent({
     const writingBoardModel = ref('pen')
 
     const changePen = () => {
-      if(!writingBoardVisible.value) writingBoardVisible.value = true
+      if (!writingBoardVisible.value) writingBoardVisible.value = true
       writingBoardModel.value = 'pen'
       emit('close')
     }
@@ -64,7 +64,7 @@ export default defineComponent({
     }
 
     const changeColor = (color: string) => {
-      if(writingBoardModel.value !== 'pen') writingBoardModel.value = 'pen'
+      if (writingBoardModel.value !== 'pen') writingBoardModel.value = 'pen'
       writingBoardColor.value = color
       emit('close')
     }

src/views/Screen/index.vue

@@ -101,11 +101,11 @@ export default defineComponent({
       const winHeight = document.body.clientHeight
       let width, height
 
-      if(winHeight / winWidth === VIEWPORT_ASPECT_RATIO) {
+      if (winHeight / winWidth === VIEWPORT_ASPECT_RATIO) {
         width = winWidth
         height = winHeight
       }
-      else if(winHeight / winWidth > VIEWPORT_ASPECT_RATIO) {
+      else if (winHeight / winWidth > VIEWPORT_ASPECT_RATIO) {
         width = winWidth
         height = winWidth * VIEWPORT_ASPECT_RATIO
       }
@@ -121,7 +121,7 @@ export default defineComponent({
 
     const windowResizeListener = () => {
       setSlideContentSize()
-      if(!isFullscreen()) exitScreening()
+      if (!isFullscreen()) exitScreening()
     }
 
     const animationIndex = ref(0)
@@ -133,7 +133,7 @@ export default defineComponent({
       animationIndex.value += 1
 
       const elRef = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
-      if(elRef) {
+      if (elRef) {
         const animationName = `${prefix}${animation.type}`
         elRef.classList.add(`${prefix}animated`, animationName)
 
@@ -145,20 +145,20 @@ export default defineComponent({
     }
 
     const execPrev = () => {
-      if(animations.value.length && animationIndex.value > 0) {
+      if (animations.value.length && animationIndex.value > 0) {
         animationIndex.value -= 1
       }
-      else if(slideIndex.value > 0) {
+      else if (slideIndex.value > 0) {
         store.commit(MutationTypes.UPDATE_SLIDE_INDEX, slideIndex.value - 1)
         const lastIndex = animations.value ? animations.value.length : 0
         animationIndex.value = lastIndex
       }
     }
     const execNext = () => {
-      if(animations.value.length && animationIndex.value < animations.value.length) {
+      if (animations.value.length && animationIndex.value < animations.value.length) {
         runAnimation()
       }
-      else if(slideIndex.value < slides.value.length - 1) {
+      else if (slideIndex.value < slides.value.length - 1) {
         store.commit(MutationTypes.UPDATE_SLIDE_INDEX, slideIndex.value + 1)
         animationIndex.value = 0
       }
@@ -166,8 +166,8 @@ export default defineComponent({
 
     const keydownListener = (e: KeyboardEvent) => {
       const key = e.key.toUpperCase()
-      if(key === KEYS.UP || key === KEYS.LEFT) execPrev()
-      else if(
+      if (key === KEYS.UP || key === KEYS.LEFT) execPrev()
+      else if (
         key === KEYS.DOWN || 
         key === KEYS.RIGHT ||
         key === KEYS.SPACE || 
@@ -175,9 +175,9 @@ export default defineComponent({
       ) execNext()
     }
 
-    const mousewheelListener = throttle(function(e: WheelEvent) {
-      if(e.deltaY < 0) execPrev()
-      else if(e.deltaY > 0) execNext()
+    const mousewheelListener = throttle(function (e: WheelEvent) {
+      if (e.deltaY < 0) execPrev()
+      else if (e.deltaY > 0) execNext()
     }, 500, { leading: true, trailing: false })
 
     onMounted(() => {

src/views/components/element/ChartElement/Chart.vue

@@ -76,7 +76,7 @@ export default defineComponent({
     }
 
     const renderChart = () => {
-      if(!chartRef.value) return
+      if (!chartRef.value) return
 
       const type = upperFirst(props.type)
       const { data, options } = getDataAndOptions()
@@ -84,7 +84,7 @@ export default defineComponent({
     }
 
     const updateChart = () => {
-      if(!chart) {
+      if (!chart) {
         renderChart()
         return
       }
@@ -102,13 +102,13 @@ export default defineComponent({
     onMounted(renderChart)
 
     const updateTheme = () => {
-      if(!chartRef.value) return
+      if (!chartRef.value) return
 
       const hsla = tinycolor(props.themeColor).toHsl()
 
-      for(let i = 0; i < 10; i++) {
+      for (let i = 0; i < 10; i++) {
         let h = hsla.h + i * 36
-        if(h > 360) h = h - 360
+        if (h > 360) h = h - 360
 
         const _hsla = {
           ...hsla,
@@ -117,7 +117,7 @@ export default defineComponent({
         chartRef.value.style.setProperty(`--theme-color-${i + 1}`, tinycolor(_hsla).toRgbString())
       }
 
-      if(props.gridColor) chartRef.value.style.setProperty(`--grid-color`, props.gridColor)
+      if (props.gridColor) chartRef.value.style.setProperty(`--grid-color`, props.gridColor)
     }
 
     watch([

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

@@ -63,7 +63,7 @@ export default defineComponent({
   },
   setup(props) {
     const handleSelectElement = (e: MouseEvent) => {
-      if(props.elementInfo.lock) return
+      if (props.elementInfo.lock) return
       e.stopPropagation()
 
       props.selectElement(e, props.elementInfo)

src/views/components/element/ImageElement/BaseImageElement.vue

@@ -82,7 +82,7 @@ export default defineComponent({
   },
   setup(props) {
     const imgPosition = computed(() => {
-      if(!props.elementInfo || !props.elementInfo.clip) {
+      if (!props.elementInfo || !props.elementInfo.clip) {
         return {
           top: '0',
           left: '0',
@@ -107,27 +107,27 @@ export default defineComponent({
     })
 
     const clipShape = computed(() => {
-      if(!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
+      if (!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
       const shape = props.elementInfo.clip.shape || ClipPathTypes.RECT
 
       return CLIPPATHS[shape]
     })
 
     const filter = computed(() => {
-      if(!props.elementInfo.filters) return ''
+      if (!props.elementInfo.filters) return ''
       let filter = ''
-      for(const key of Object.keys(props.elementInfo.filters)) {
+      for (const key of Object.keys(props.elementInfo.filters)) {
         filter += `${key}(${props.elementInfo.filters[key]}) `
       }
       return filter
     })
 
     const flip = computed(() => {
-      if(!props.elementInfo.flip) return ''
+      if (!props.elementInfo.flip) return ''
       const { x, y } = props.elementInfo.flip
-      if(x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
-      else if(x) return `rotateX(${x}deg)`
-      else if(y) return `rotateY(${y}deg)`
+      if (x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
+      else if (x) return `rotateX(${x}deg)`
+      else if (y) return `rotateY(${y}deg)`
       return ''
     })
 

src/views/components/element/ImageElement/ImageClipHandler.vue

@@ -175,9 +175,9 @@ export default defineComponent({
     }
 
     const handleClip = () => {
-      if(isSettingClipRange.value) return
+      if (isSettingClipRange.value) return
 
-      if(!currentRange.value) {
+      if (!currentRange.value) {
         emit('clip', null)
         return
       }
@@ -200,7 +200,7 @@ export default defineComponent({
 
     const keyboardClip = (e: KeyboardEvent) => {
       const key = e.key.toUpperCase()
-      if(key === KEYS.ENTER) handleClip()
+      if (key === KEYS.ENTER) handleClip()
     }
 
     onMounted(() => {
@@ -249,7 +249,7 @@ export default defineComponent({
       }
 
       document.onmousemove = e => {
-        if(!isMouseDown) return
+        if (!isMouseDown) return
 
         const currentPageX = e.pageX
         const currentPageY = e.pageY
@@ -261,12 +261,12 @@ export default defineComponent({
         let targetTop = originPositopn.top + moveY
 
         // 范围限制
-        if(targetLeft < 0) targetLeft = 0
-        else if(targetLeft + originPositopn.width > bottomPosition.width) {
+        if (targetLeft < 0) targetLeft = 0
+        else if (targetLeft + originPositopn.width > bottomPosition.width) {
           targetLeft = bottomPosition.width - originPositopn.width
         }
-        if(targetTop < 0) targetTop = 0
-        else if(targetTop + originPositopn.height > bottomPosition.height) {
+        if (targetTop < 0) targetTop = 0
+        else if (targetTop + originPositopn.height > bottomPosition.height) {
           targetTop = bottomPosition.height - originPositopn.height
         }
         
@@ -305,7 +305,7 @@ export default defineComponent({
       }
 
       document.onmousemove = e => {
-        if(!isMouseDown) return
+        if (!isMouseDown) return
 
         const currentPageX = e.pageX
         const currentPageY = e.pageY
@@ -316,17 +316,17 @@ export default defineComponent({
         let targetLeft, targetTop, targetWidth, targetHeight
 
         // 根据不同缩放点，计算目标大小和位置，同时做大小和范围的限制
-        if(type === 't-l') {
-          if(originPositopn.left + moveX < 0) {
+        if (type === 't-l') {
+          if (originPositopn.left + moveX < 0) {
             moveX = -originPositopn.left
           }
-          if(originPositopn.top + moveY < 0) {
+          if (originPositopn.top + moveY < 0) {
             moveY = -originPositopn.top
           }
-          if(originPositopn.width - moveX < minWidth) {
+          if (originPositopn.width - moveX < minWidth) {
             moveX = originPositopn.width - minWidth
           }
-          if(originPositopn.height - moveY < minHeight) {
+          if (originPositopn.height - moveY < minHeight) {
             moveY = originPositopn.height - minHeight
           }
           targetWidth = originPositopn.width - moveX
@@ -334,17 +334,17 @@ export default defineComponent({
           targetLeft = originPositopn.left + moveX
           targetTop = originPositopn.top + moveY
         }
-        else if(type === 't-r') {
-          if(originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
+        else if (type === 't-r') {
+          if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
             moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
           }
-          if(originPositopn.top + moveY < 0) {
+          if (originPositopn.top + moveY < 0) {
             moveY = -originPositopn.top
           }
-          if(originPositopn.width + moveX < minWidth) {
+          if (originPositopn.width + moveX < minWidth) {
             moveX = minWidth - originPositopn.width
           }
-          if(originPositopn.height - moveY < minHeight) {
+          if (originPositopn.height - moveY < minHeight) {
             moveY = originPositopn.height - minHeight
           }
           targetWidth = originPositopn.width + moveX
@@ -352,17 +352,17 @@ export default defineComponent({
           targetLeft = originPositopn.left
           targetTop = originPositopn.top + moveY
         }
-        else if(type === 'b-l') {
-          if(originPositopn.left + moveX < 0) {
+        else if (type === 'b-l') {
+          if (originPositopn.left + moveX < 0) {
             moveX = -originPositopn.left
           }
-          if(originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
+          if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
             moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
           }
-          if(originPositopn.width - moveX < minWidth) {
+          if (originPositopn.width - moveX < minWidth) {
             moveX = originPositopn.width - minWidth
           }
-          if(originPositopn.height + moveY < minHeight) {
+          if (originPositopn.height + moveY < minHeight) {
             moveY = minHeight - originPositopn.height
           }
           targetWidth = originPositopn.width - moveX
@@ -371,16 +371,16 @@ export default defineComponent({
           targetTop = originPositopn.top
         }
         else {
-          if(originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
+          if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
             moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
           }
-          if(originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
+          if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
             moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
           }
-          if(originPositopn.width + moveX < minWidth) {
+          if (originPositopn.width + moveX < minWidth) {
             moveX = minWidth - originPositopn.width
           }
-          if(originPositopn.height + moveY < minHeight) {
+          if (originPositopn.height + moveY < minHeight) {
             moveY = minHeight - originPositopn.height
           }
           targetWidth = originPositopn.width + moveX

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

@@ -114,19 +114,19 @@ export default defineComponent({
     const { shadowStyle } = useElementShadow(shadow)
 
     const handleSelectElement = (e: MouseEvent) => {
-      if(props.elementInfo.lock) return
+      if (props.elementInfo.lock) return
       e.stopPropagation()
       props.selectElement(e, props.elementInfo)
     }
     const clipShape = computed(() => {
-      if(!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
+      if (!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
       const shape = props.elementInfo.clip.shape || ClipPathTypes.RECT
 
       return CLIPPATHS[shape]
     })
 
     const imgPosition = computed(() => {
-      if(!props.elementInfo || !props.elementInfo.clip) {
+      if (!props.elementInfo || !props.elementInfo.clip) {
         return {
           top: '0',
           left: '0',
@@ -151,27 +151,27 @@ export default defineComponent({
     })
 
     const filter = computed(() => {
-      if(!props.elementInfo.filters) return ''
+      if (!props.elementInfo.filters) return ''
       let filter = ''
-      for(const key of Object.keys(props.elementInfo.filters)) {
+      for (const key of Object.keys(props.elementInfo.filters)) {
         filter += `${key}(${props.elementInfo.filters[key]}) `
       }
       return filter
     })
 
     const flip = computed(() => {
-      if(!props.elementInfo.flip) return ''
+      if (!props.elementInfo.flip) return ''
       const { x, y } = props.elementInfo.flip
-      if(x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
-      else if(x) return `rotateX(${x}deg)`
-      else if(y) return `rotateY(${y}deg)`
+      if (x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
+      else if (x) return `rotateX(${x}deg)`
+      else if (y) return `rotateY(${y}deg)`
       return ''
     })
 
     const clip = (data: ImageClipedEmitData) => {
       store.commit(MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID, '')
       
-      if(!data) return
+      if (!data) return
 
       const { range, position } = data
       const originClip = props.elementInfo.clip || {}

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

@@ -88,7 +88,7 @@ export default defineComponent({
   },
   setup(props) {
     const handleSelectElement = (e: MouseEvent) => {
-      if(props.elementInfo.lock) return
+      if (props.elementInfo.lock) return
       e.stopPropagation()
 
       props.selectElement(e, props.elementInfo)

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

@@ -82,7 +82,7 @@ export default defineComponent({
   },
   setup(props) {
     const handleSelectElement = (e: MouseEvent) => {
-      if(props.elementInfo.lock) return
+      if (props.elementInfo.lock) return
       e.stopPropagation()
 
       props.selectElement(e, props.elementInfo)

src/views/components/element/TableElement/CustomTextarea.vue

@@ -31,13 +31,13 @@ export default defineComponent({
     const isFocus = ref(false)
 
     watch(() => props.modelValue, () => {
-      if(isFocus.value) return
+      if (isFocus.value) return
       text.value = props.modelValue
-      if(textareaRef.value) textareaRef.value.innerHTML = props.modelValue
+      if (textareaRef.value) textareaRef.value.innerHTML = props.modelValue
     }, { immediate: true })
 
     const handleInput = () => {
-      if(!textareaRef.value) return
+      if (!textareaRef.value) return
       const text = textareaRef.value.innerHTML
       emit('update:modelValue', text)
     }
@@ -45,14 +45,14 @@ export default defineComponent({
     const handleFocus = () => {
       isFocus.value = true
 
-      if(!textareaRef.value) return
+      if (!textareaRef.value) return
       textareaRef.value.onpaste = (e: ClipboardEvent) => {
         e.preventDefault()
-        if(!e.clipboardData) return
+        if (!e.clipboardData) return
 
         const clipboardDataFirstItem = e.clipboardData.items[0]
 
-        if(clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
+        if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
           clipboardDataFirstItem.getAsString(text => emit('update:modelValue', text))
         }
       }
@@ -60,11 +60,11 @@ export default defineComponent({
 
     const handleBlur = () => {
       isFocus.value = false
-      if(textareaRef.value) textareaRef.value.onpaste = null
+      if (textareaRef.value) textareaRef.value.onpaste = null
     }
 
     onUnmounted(() => {
-      if(textareaRef.value) textareaRef.value.onpaste = null
+      if (textareaRef.value) textareaRef.value.onpaste = null
     })
 
     return {

src/views/components/element/TableElement/EditableTable.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 
     const subThemeColor = ref(['', ''])
     watch(() => props.theme, () => {
-      if(props.theme) {
+      if (props.theme) {
         const rgba = tinycolor(props.theme.color).toRgb()
         const subRgba1 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.3 }
         const subRgba2 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.1 }
@@ -155,12 +155,12 @@ export default defineComponent({
     }
 
     watch(() => props.editable, () => {
-      if(!props.editable) removeSelectedCells()
+      if (!props.editable) removeSelectedCells()
     })
 
     const dragLinePosition = computed(() => {
       const dragLinePosition: number[] = []
-      for(let i = 1; i < colSizeList.value.length + 1; i++) {
+      for (let i = 1; i < colSizeList.value.length + 1; i++) {
         const pos = colSizeList.value.slice(0, i).reduce((a, b) => (a + b))
         dragLinePosition.push(pos)
       }
@@ -170,15 +170,15 @@ export default defineComponent({
     const hideCells = computed(() => {
       const hideCells = []
       
-      for(let i = 0; i < tableCells.value.length; i++) {
+      for (let i = 0; i < tableCells.value.length; i++) {
         const rowCells = tableCells.value[i]
 
-        for(let j = 0; j < rowCells.length; j++) {
+        for (let j = 0; j < rowCells.length; j++) {
           const cell = rowCells[j]
           
-          if(cell.colspan > 1 || cell.rowspan > 1) {
-            for(let row = i; row < i + cell.rowspan; row++) {
-              for(let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
+          if (cell.colspan > 1 || cell.rowspan > 1) {
+            for (let row = i; row < i + cell.rowspan; row++) {
+              for (let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
                 hideCells.push(`${row}_${col}`)
               }
             }
@@ -189,13 +189,13 @@ export default defineComponent({
     })
 
     const selectedCells = computed(() => {
-      if(!startCell.value.length) return []
+      if (!startCell.value.length) return []
       const [startX, startY] = startCell.value
 
-      if(!endCell.value.length) return [`${startX}_${startY}`]
+      if (!endCell.value.length) return [`${startX}_${startY}`]
       const [endX, endY] = endCell.value
 
-      if(startX === endX && startY === endY) return [`${startX}_${startY}`]
+      if (startX === endX && startY === endY) return [`${startX}_${startY}`]
 
       const selectedCells = []
 
@@ -204,10 +204,10 @@ export default defineComponent({
       const maxX = Math.max(startX, endX)
       const maxY = Math.max(startY, endY)
 
-      for(let i = 0; i < tableCells.value.length; i++) {
+      for (let i = 0; i < tableCells.value.length; i++) {
         const rowCells = tableCells.value[i]
-        for(let j = 0; j < rowCells.length; j++) {
-          if(i >= minX && i <= maxX && j >= minY && j <= maxY) selectedCells.push(`${i}_${j}`)
+        for (let j = 0; j < rowCells.length; j++) {
+          if (i >= minX && i <= maxX && j >= minY && j <= maxY) selectedCells.push(`${i}_${j}`)
         }
       }
       return selectedCells
@@ -218,18 +218,18 @@ export default defineComponent({
     })
 
     const activedCell = computed(() => {
-      if(selectedCells.value.length > 1) return null
+      if (selectedCells.value.length > 1) return null
       return selectedCells.value[0]
     })
 
     const selectedRange = computed(() => {
-      if(!startCell.value.length) return null
+      if (!startCell.value.length) return null
       const [startX, startY] = startCell.value
 
-      if(!endCell.value.length) return { row: [startX, startX], col: [startY, startY] }
+      if (!endCell.value.length) return { row: [startX, startX], col: [startY, startY] }
       const [endX, endY] = endCell.value
 
-      if(startX === endX && startY === endY) return { row: [startX, startX], col: [startY, startY] }
+      if (startX === endX && startY === endY) return { row: [startX, startX], col: [startY, startY] }
 
       const minX = Math.min(startX, endX)
       const minY = Math.min(startY, endY)
@@ -245,7 +245,7 @@ export default defineComponent({
     const handleMouseup = () => isStartSelect.value = false
 
     const handleCellMousedown = (e: MouseEvent, rowIndex: number, colIndex: number) => {
-      if(e.button === 0) {
+      if (e.button === 0) {
         endCell.value = []
         isStartSelect.value = true
         startCell.value = [rowIndex, colIndex]
@@ -253,7 +253,7 @@ export default defineComponent({
     }
 
     const handleCellMouseenter = (rowIndex: number, colIndex: number) => {
-      if(!isStartSelect.value) return
+      if (!isStartSelect.value) return
       endCell.value = [rowIndex, colIndex]
     }
 
@@ -290,13 +290,13 @@ export default defineComponent({
 
       const targetCells = tableCells.value[rowIndex]
       const hideCellsPos = []
-      for(let i = 0; i < targetCells.length; i++) {
-        if(isHideCell(rowIndex, i)) hideCellsPos.push(i)
+      for (let i = 0; i < targetCells.length; i++) {
+        if (isHideCell(rowIndex, i)) hideCellsPos.push(i)
       }
       
-      for(const pos of hideCellsPos) {
-        for(let i = rowIndex; i >= 0; i--) {
-          if(!isHideCell(i, pos)) {
+      for (const pos of hideCellsPos) {
+        for (let i = rowIndex; i >= 0; i--) {
+          if (!isHideCell(i, pos)) {
             _tableCells[i][pos].rowspan = _tableCells[i][pos].rowspan - 1
             break
           }
@@ -311,13 +311,13 @@ export default defineComponent({
       const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
 
       const hideCellsPos = []
-      for(let i = 0; i < tableCells.value.length; i++) {
-        if(isHideCell(i, colIndex)) hideCellsPos.push(i)
+      for (let i = 0; i < tableCells.value.length; i++) {
+        if (isHideCell(i, colIndex)) hideCellsPos.push(i)
       }
 
-      for(const pos of hideCellsPos) {
-        for(let i = colIndex; i >= 0; i--) {
-          if(!isHideCell(pos, i)) {
+      for (const pos of hideCellsPos) {
+        for (let i = colIndex; i >= 0; i--) {
+          if (!isHideCell(pos, i)) {
             _tableCells[pos][i].colspan = _tableCells[pos][i].colspan - 1
             break
           }
@@ -336,7 +336,7 @@ export default defineComponent({
       const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
 
       const rowCells: TableCell[] = []
-      for(let i = 0; i < _tableCells[0].length; i++) {
+      for (let i = 0; i < _tableCells[0].length; i++) {
         rowCells.push({
           colspan: 1,
           rowspan: 1,
@@ -401,7 +401,7 @@ export default defineComponent({
       const minWidth = 50
 
       document.onmousemove = e => {
-        if(!isMouseDown) return
+        if (!isMouseDown) return
         
         const moveX = (e.pageX - startPageX) / canvasScale.value
         const width = originWidth + moveX < minWidth ? minWidth : Math.round(originWidth + moveX)
@@ -420,9 +420,9 @@ export default defineComponent({
     const clearSelectedCellText = () => {
       const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
 
-      for(let i = 0; i < _tableCells.length; i++) {
-        for(let j = 0; j < _tableCells[i].length; j++) {
-          if(selectedCells.value.includes(`${i}_${j}`)) {
+      for (let i = 0; i < _tableCells.length; i++) {
+        for (let j = 0; j < _tableCells[i].length; j++) {
+          if (selectedCells.value.includes(`${i}_${j}`)) {
             _tableCells[i][j].text = ''
           }
         }
@@ -432,9 +432,9 @@ export default defineComponent({
 
     const tabActiveCell = () => {
       const getNextCell = (i: number, j: number): [number, number] | null => {
-        if(!tableCells.value[i]) return null
-        if(!tableCells.value[i][j]) return getNextCell(i + 1, 0)
-        if(isHideCell(i, j)) return getNextCell(i, j + 1)
+        if (!tableCells.value[i]) return null
+        if (!tableCells.value[i][j]) return getNextCell(i + 1, 0)
+        if (isHideCell(i, j)) return getNextCell(i, j + 1)
         return [i, j]
       }
 
@@ -444,7 +444,7 @@ export default defineComponent({
       const nextCol = startCell.value[1] + 1
 
       const nextCell = getNextCell(nextRow, nextCol)
-      if(!nextCell) {
+      if (!nextCell) {
         insertRow(nextRow + 1)
         startCell.value = [nextRow + 1, 0]
       }
@@ -452,41 +452,41 @@ export default defineComponent({
 
       nextTick(() => {
         const textRef = document.querySelector('.cell-text.active') as HTMLInputElement
-        if(textRef) textRef.focus()
+        if (textRef) textRef.focus()
       })
     }
 
     const keydownListener = (e: KeyboardEvent) => {
-      if(!props.editable || !selectedCells.value.length) return
+      if (!props.editable || !selectedCells.value.length) return
 
       const key = e.key.toUpperCase()
-      if(selectedCells.value.length < 2) {
-        if(key === KEYS.TAB) {
+      if (selectedCells.value.length < 2) {
+        if (key === KEYS.TAB) {
           e.preventDefault()
           tabActiveCell()
         }
-        if(e.ctrlKey && key === KEYS.UP) {
+        if (e.ctrlKey && key === KEYS.UP) {
           e.preventDefault()
           const rowIndex = +selectedCells.value[0].split('_')[0]
           insertRow(rowIndex)
         }
-        if(e.ctrlKey && key === KEYS.DOWN) {
+        if (e.ctrlKey && key === KEYS.DOWN) {
           e.preventDefault()
           const rowIndex = +selectedCells.value[0].split('_')[0]
           insertRow(rowIndex + 1)
         }
-        if(e.ctrlKey && key === KEYS.LEFT) {
+        if (e.ctrlKey && key === KEYS.LEFT) {
           e.preventDefault()
           const colIndex = +selectedCells.value[0].split('_')[1]
           insertCol(colIndex)
         }
-        if(e.ctrlKey && key === KEYS.RIGHT) {
+        if (e.ctrlKey && key === KEYS.RIGHT) {
           e.preventDefault()
           const colIndex = +selectedCells.value[0].split('_')[1]
           insertCol(colIndex + 1)
         }
       }
-      else if(key === KEYS.DELETE) {
+      else if (key === KEYS.DELETE) {
         clearSelectedCellText()
       }
     }
@@ -499,7 +499,7 @@ export default defineComponent({
     })
 
     const getTextStyle = (style?: TableCellStyle) => {
-      if(!style) return {}
+      if (!style) return {}
       const {
         bold,
         em,
@@ -524,20 +524,20 @@ export default defineComponent({
       }
     }
 
-    const handleInput = debounce(function() {
+    const handleInput = debounce(function () {
       emit('change', tableCells.value)
     }, 300, { trailing: true })
 
     const getEffectiveTableCells = () => {
       const effectiveTableCells = []
 
-      for(let i = 0; i < tableCells.value.length; i++) {
+      for (let i = 0; i < tableCells.value.length; i++) {
         const rowCells = tableCells.value[i]
         const _rowCells = []
-        for(let j = 0; j < rowCells.length; j++) {
-          if(!isHideCell(i, j)) _rowCells.push(rowCells[j])
+        for (let j = 0; j < rowCells.length; j++) {
+          if (!isHideCell(i, j)) _rowCells.push(rowCells[j])
         }
-        if(_rowCells.length) effectiveTableCells.push(_rowCells)
+        if (_rowCells.length) effectiveTableCells.push(_rowCells)
       }
 
       return effectiveTableCells
@@ -566,7 +566,7 @@ export default defineComponent({
       const rowIndex = +cellIndex.split('_')[0]
       const colIndex = +cellIndex.split('_')[1]
 
-      if(!selectedCells.value.includes(`${rowIndex}_${colIndex}`)) {
+      if (!selectedCells.value.includes(`${rowIndex}_${colIndex}`)) {
         startCell.value = [rowIndex, colIndex]
         endCell.value = []
       }

src/views/components/element/TableElement/StaticTable.vue

@@ -89,15 +89,15 @@ export default defineComponent({
     const hideCells = computed(() => {
       const hideCells = []
       
-      for(let i = 0; i < props.data.length; i++) {
+      for (let i = 0; i < props.data.length; i++) {
         const rowCells = props.data[i]
 
-        for(let j = 0; j < rowCells.length; j++) {
+        for (let j = 0; j < rowCells.length; j++) {
           const cell = rowCells[j]
           
-          if(cell.colspan > 1 || cell.rowspan > 1) {
-            for(let row = i; row < i + cell.rowspan; row++) {
-              for(let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
+          if (cell.colspan > 1 || cell.rowspan > 1) {
+            for (let row = i; row < i + cell.rowspan; row++) {
+              for (let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
                 hideCells.push(`${row}_${col}`)
               }
             }
@@ -109,7 +109,7 @@ export default defineComponent({
 
     const subThemeColor = ref(['', ''])
     watch(() => props.theme, () => {
-      if(props.theme) {
+      if (props.theme) {
         const rgba = tinycolor(props.theme.color).toRgb()
         const subRgba1 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.3 }
         const subRgba2 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.1 }
@@ -121,7 +121,7 @@ export default defineComponent({
     }, { immediate: true })
 
     const getTextStyle = (style?: TableCellStyle) => {
-      if(!style) return {}
+      if (!style) return {}
       const {
         bold,
         em,

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

@@ -73,7 +73,7 @@ export default defineComponent({
     const { addHistorySnapshot } = useHistorySnapshot()
 
     const handleSelectElement = (e: MouseEvent) => {
-      if(props.elementInfo.lock) return
+      if (props.elementInfo.lock) return
       e.stopPropagation()
 
       props.selectElement(e, props.elementInfo)
@@ -82,7 +82,7 @@ export default defineComponent({
     const handleElementId = computed(() => store.state.handleElementId)
 
     watch(handleElementId, () => {
-      if(handleElementId.value !== props.elementInfo.id) editable.value = false
+      if (handleElementId.value !== props.elementInfo.id) editable.value = false
     })
 
     watch(editable, () => {
@@ -97,9 +97,9 @@ export default defineComponent({
     const scaleElementStateListener = (state: boolean) => {
       isScaling.value = state
 
-      if(state) editable.value = false
+      if (state) editable.value = false
 
-      if(!state && realHeightCache.value !== -1) {
+      if (!state && realHeightCache.value !== -1) {
         store.commit(MutationTypes.UPDATE_ELEMENT, {
           id: props.elementInfo.id,
           props: { height: realHeightCache.value },
@@ -115,12 +115,12 @@ export default defineComponent({
 
     const updateTableElementHeight = (entries: ResizeObserverEntry[]) => {
       const contentRect = entries[0].contentRect
-      if(!elementRef.value) return
+      if (!elementRef.value) return
 
       const realHeight = contentRect.height
 
-      if(props.elementInfo.height !== realHeight) {
-        if(!isScaling.value) {
+      if (props.elementInfo.height !== realHeight) {
+        if (!isScaling.value) {
           store.commit(MutationTypes.UPDATE_ELEMENT, {
             id: props.elementInfo.id,
             props: { height: realHeight },
@@ -133,10 +133,10 @@ export default defineComponent({
     const resizeObserver = new ResizeObserver(updateTableElementHeight)
 
     onMounted(() => {
-      if(elementRef.value) resizeObserver.observe(elementRef.value)
+      if (elementRef.value) resizeObserver.observe(elementRef.value)
     })
     onUnmounted(() => {
-      if(elementRef.value) resizeObserver.unobserve(elementRef.value)
+      if (elementRef.value) resizeObserver.unobserve(elementRef.value)
     })
 
     const updateTableCells = (data: TableCell[][]) => {
@@ -162,7 +162,7 @@ export default defineComponent({
     }
 
     const startEdit = () => {
-      if(!props.elementInfo.lock) editable.value = true
+      if (!props.elementInfo.lock) editable.value = true
     }
 
     return {

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

@@ -89,7 +89,7 @@ export default defineComponent({
     const scaleElementStateListener = (state: boolean) => {
       isScaling.value = state
 
-      if(!state && realHeightCache.value !== -1) {
+      if (!state && realHeightCache.value !== -1) {
         store.commit(MutationTypes.UPDATE_ELEMENT, {
           id: props.elementInfo.id,
           props: { height: realHeightCache.value },
@@ -105,12 +105,12 @@ export default defineComponent({
 
     const updateTextElementHeight = (entries: ResizeObserverEntry[]) => {
       const contentRect = entries[0].contentRect
-      if(!elementRef.value) return
+      if (!elementRef.value) return
 
       const realHeight = contentRect.height
 
-      if(props.elementInfo.height !== realHeight) {
-        if(!isScaling.value) {
+      if (props.elementInfo.height !== realHeight) {
+        if (!isScaling.value) {
           store.commit(MutationTypes.UPDATE_ELEMENT, {
             id: props.elementInfo.id,
             props: { height: realHeight },
@@ -122,10 +122,10 @@ export default defineComponent({
     const resizeObserver = new ResizeObserver(updateTextElementHeight)
 
     onMounted(() => {
-      if(elementRef.value) resizeObserver.observe(elementRef.value)
+      if (elementRef.value) resizeObserver.observe(elementRef.value)
     })
     onUnmounted(() => {
-      if(elementRef.value) resizeObserver.unobserve(elementRef.value)
+      if (elementRef.value) resizeObserver.unobserve(elementRef.value)
     })
     
     const editorViewRef = ref<HTMLElement>()
@@ -137,7 +137,7 @@ export default defineComponent({
     const handleBlur = () => {
       store.commit(MutationTypes.SET_DISABLE_HOTKEYS_STATE, false)
     }
-    const handleInput = debounce(function() {
+    const handleInput = debounce(function () {
       store.commit(MutationTypes.UPDATE_ELEMENT, {
         id: props.elementInfo.id, 
         props: { content: editorView.dom.innerHTML },
@@ -145,7 +145,7 @@ export default defineComponent({
       addHistorySnapshot()
     }, 300, { trailing: true })
 
-    const handleClick = debounce(function() {
+    const handleClick = debounce(function () {
       const attr = getTextAttrs(editorView)
       emitter.emit(EmitterEvents.UPDATE_TEXT_STATE, attr)
     }, 30, { trailing: true })
@@ -157,8 +157,8 @@ export default defineComponent({
 
     const textContent = computed(() => props.elementInfo.content)
     watch(textContent, () => {
-      if(!editorView) return
-      if(editorView.hasFocus()) return
+      if (!editorView) return
+      if (editorView.hasFocus()) return
       editorView.dom.innerHTML = textContent.value
     })
 
@@ -183,7 +183,7 @@ export default defineComponent({
     })
 
     const handleSelectElement = (e: MouseEvent, canMove = true) => {
-      if(props.elementInfo.lock) return
+      if (props.elementInfo.lock) return
       e.stopPropagation()
 
       props.selectElement(e, props.elementInfo, canMove)
@@ -195,85 +195,85 @@ export default defineComponent({
     const handleElementId = computed(() => store.state.handleElementId)
     
     const execCommand = (payload: CommandPayload | CommandPayload[]) => {
-      if(handleElementId.value !== props.elementInfo.id) return
+      if (handleElementId.value !== props.elementInfo.id) return
 
       const commands = ('command' in payload) ? [payload] : payload
 
-      for(const item of commands) {
-        if(item.command === 'fontname' && item.value) {
+      for (const item of commands) {
+        if (item.command === 'fontname' && item.value) {
           const mark = editorView.state.schema.marks.fontname.create({ fontname: item.value })
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           const { $from, $to } = editorView.state.selection
           editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
         }
-        else if(item.command === 'fontsize' && item.value) {
+        else if (item.command === 'fontsize' && item.value) {
           const mark = editorView.state.schema.marks.fontsize.create({ fontsize: item.value })
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           const { $from, $to } = editorView.state.selection
           editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
         }
-        else if(item.command === 'color' && item.value) {
+        else if (item.command === 'color' && item.value) {
           const mark = editorView.state.schema.marks.forecolor.create({ color: item.value })
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           const { $from, $to } = editorView.state.selection
           editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
         }
-        else if(item.command === 'backcolor' && item.value) {
+        else if (item.command === 'backcolor' && item.value) {
           const mark = editorView.state.schema.marks.backcolor.create({ backcolor: item.value })
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           const { $from, $to } = editorView.state.selection
           editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
         }
-        else if(item.command === 'bold') {
+        else if (item.command === 'bold') {
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           toggleMark(editorView.state.schema.marks.strong)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'em') {
+        else if (item.command === 'em') {
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           toggleMark(editorView.state.schema.marks.em)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'underline') {
+        else if (item.command === 'underline') {
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           toggleMark(editorView.state.schema.marks.underline)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'strikethrough') {
+        else if (item.command === 'strikethrough') {
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           toggleMark(editorView.state.schema.marks.strikethrough)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'subscript') {
+        else if (item.command === 'subscript') {
           toggleMark(editorView.state.schema.marks.subscript)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'superscript') {
+        else if (item.command === 'superscript') {
           toggleMark(editorView.state.schema.marks.superscript)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'blockquote') {
+        else if (item.command === 'blockquote') {
           wrapIn(editorView.state.schema.nodes.blockquote)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'code') {
+        else if (item.command === 'code') {
           toggleMark(editorView.state.schema.marks.code)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'align' && item.value) {
+        else if (item.command === 'align' && item.value) {
           alignmentCommand(editorView, item.value)
         }
-        else if(item.command === 'bulletList') {
+        else if (item.command === 'bulletList') {
           const { bullet_list: bulletList, list_item: listItem } = editorView.state.schema.nodes
           toggleList(bulletList, listItem)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'orderedList') {
+        else if (item.command === 'orderedList') {
           const { ordered_list: orderedList, list_item: listItem } = editorView.state.schema.nodes
           toggleList(orderedList, listItem)(editorView.state, editorView.dispatch)
         }
-        else if(item.command === 'clear') {
+        else if (item.command === 'clear') {
           const { empty } = editorView.state.selection
-          if(empty) selectAll(editorView.state, editorView.dispatch)
+          if (empty) selectAll(editorView.state, editorView.dispatch)
           const { $from, $to } = editorView.state.selection
           editorView.dispatch(editorView.state.tr.removeMark($from.pos, $to.pos))
         }

src/views/components/element/hooks/useElementShadow.ts

@@ -5,7 +5,7 @@ export default (shadow: Ref<PPTElementShadow | undefined>) => {
   const shadowStyle = ref('')
 
   watchEffect(() => {
-    if(shadow.value) {
+    if (shadow.value) {
       const { h, v, blur, color } = shadow.value
       shadowStyle.value = `${h}px ${v}px ${blur}px ${color}`
     }