diff --git a/commitlint.config.js b/.commitlintrc.js similarity index 100% rename from commitlint.config.js rename to .commitlintrc.js diff --git a/.eslintrc.js b/.eslintrc.js index e705203b..58bb8b8b 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/src/components/ColorPicker/Alpha.vue b/src/components/ColorPicker/Alpha.vue index 7c82eea6..a1a42b53 100644 --- a/src/components/ColorPicker/Alpha.vue +++ b/src/components/ColorPicker/Alpha.vue @@ -43,17 +43,17 @@ export default defineComponent({ const alphaRef = ref() 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, diff --git a/src/components/ColorPicker/Checkboard.vue b/src/components/ColorPicker/Checkboard.vue index 3ad340c1..33ea1e04 100644 --- a/src/components/ColorPicker/Checkboard.vue +++ b/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 diff --git a/src/components/ColorPicker/EditableInput.vue b/src/components/ColorPicker/EditableInput.vue index ce2dfc20..73a2eec4 100644 --- a/src/components/ColorPicker/EditableInput.vue +++ b/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 { diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue index a185eb6a..5f443158 100644 --- a/src/components/ColorPicker/Hue.vue +++ b/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() 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, diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue index e338f294..08cd8f0d 100644 --- a/src/components/ColorPicker/Saturation.vue +++ b/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() const handleChange = (e: MouseEvent) => { e.preventDefault() - if(!saturationRef.value) return + if (!saturationRef.value) return const containerWidth = saturationRef.value.clientWidth const containerHeight = saturationRef.value.clientHeight diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue index 4d589c18..0b100fee 100644 --- a/src/components/ColorPicker/index.vue +++ b/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() } diff --git a/src/components/Contextmenu/index.vue b/src/components/Contextmenu/index.vue index 3a088fcc..58b4835b 100644 --- a/src/components/Contextmenu/index.vue +++ b/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() } diff --git a/src/components/FileInput.vue b/src/components/FileInput.vue index fbffd7a2..717016bc 100644 --- a/src/components/FileInput.vue +++ b/src/components/FileInput.vue @@ -27,13 +27,13 @@ export default defineComponent({ const inputRef = ref() 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 { diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue index 5b9a5a4e..ff5aa5a0 100644 --- a/src/components/WritingBoard.vue +++ b/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) } diff --git a/src/hooks/useAlignElementToCanvas.ts b/src/hooks/useAlignElementToCanvas.ts index f9b4fb69..0b023d55 100644 --- a/src/hooks/useAlignElementToCanvas.ts +++ b/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 } diff --git a/src/hooks/useCombineElement.ts b/src/hooks/useCombineElement.ts index 8fd3fb09..12cf3c84 100644 --- a/src/hooks/useCombineElement.ts +++ b/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() diff --git a/src/hooks/useCopyAndPasteElement.ts b/src/hooks/useCopyAndPasteElement.ts index f366c99e..78ffaa1d 100644 --- a/src/hooks/useCopyAndPasteElement.ts +++ b/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', diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index 18dcadc0..ced72ac0 100644 --- a/src/hooks/useCreateElement.ts +++ b/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 } diff --git a/src/hooks/useDeleteElement.ts b/src/hooks/useDeleteElement.ts index a57bcb75..d557342e 100644 --- a/src/hooks/useDeleteElement.ts +++ b/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() diff --git a/src/hooks/useHistorySnapshot.ts b/src/hooks/useHistorySnapshot.ts index 6f851e2d..19b328e6 100644 --- a/src/hooks/useHistorySnapshot.ts +++ b/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 }) diff --git a/src/hooks/useLockElement.ts b/src/hooks/useLockElement.ts index a8aa2674..4d88c241 100644 --- a/src/hooks/useLockElement.ts +++ b/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 } diff --git a/src/hooks/useMoveElement.ts b/src/hooks/useMoveElement.ts index 74fec0c3..80d81a82 100644 --- a/src/hooks/useMoveElement.ts +++ b/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 diff --git a/src/hooks/useOrderElement.ts b/src/hooks/useOrderElement.ts index a09bb021..d4d18038 100644 --- a/src/hooks/useOrderElement.ts +++ b/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() diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts index 755084bd..b6f3ad92 100644 --- a/src/hooks/usePasteTextClipboardData.ts +++ b/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 { diff --git a/src/hooks/useScaleCanvas.ts b/src/hooks/useScaleCanvas.ts index 25dfbb62..fb20db6c 100644 --- a/src/hooks/useScaleCanvas.ts +++ b/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) } diff --git a/src/hooks/useScreening.ts b/src/hooks/useScreening.ts index 1a2d880f..c4fd293c 100644 --- a/src/hooks/useScreening.ts +++ b/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 { diff --git a/src/hooks/useSlideBackgroundStyle.ts b/src/hooks/useSlideBackgroundStyle.ts index 6b05b085..9e227ae6 100644 --- a/src/hooks/useSlideBackgroundStyle.ts +++ b/src/hooks/useSlideBackgroundStyle.ts @@ -3,7 +3,7 @@ import { SlideBackground } from '@/types/slides' export default (background: Ref) => { 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) => { 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) => { 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}` } } diff --git a/src/hooks/useSlideHandler.ts b/src/hooks/useSlideHandler.ts index 5ebbcc99..66fee464 100644 --- a/src/hooks/useSlideHandler.ts +++ b/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() diff --git a/src/plugins/clickOutside.ts b/src/plugins/clickOutside.ts index bd7b0d83..a5bebb4a 100644 --- a/src/plugins/clickOutside.ts +++ b/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] } diff --git a/src/plugins/contextmenu.ts b/src/plugins/contextmenu.ts index 96948dbc..40d3937c 100644 --- a/src/plugins/contextmenu.ts +++ b/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] } diff --git a/src/prosemirror/commands/setTextAlign.ts b/src/prosemirror/commands/setTextAlign.ts index 14768be5..9f1c5c9e 100644 --- a/src/prosemirror/commands/setTextAlign.ts +++ b/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) }) diff --git a/src/prosemirror/commands/toggleList.ts b/src/prosemirror/commands/toggleList.ts index bf2b21e9..3b3eb402 100644 --- a/src/prosemirror/commands/toggleList.ts +++ b/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 } diff --git a/src/prosemirror/schema/marks.ts b/src/prosemirror/schema/marks.ts index 128ba274..1ec28d58 100644 --- a/src/prosemirror/schema/marks.ts +++ b/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] }, } diff --git a/src/prosemirror/schema/nodes.ts b/src/prosemirror/schema/nodes.ts index 16c5a1d2..ee061649 100644 --- a/src/prosemirror/schema/nodes.ts +++ b/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] }, diff --git a/src/prosemirror/utils.ts b/src/prosemirror/utils.ts index 0bfb66ad..4a5ac2c6 100644 --- a/src/prosemirror/utils.ts +++ b/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] } diff --git a/src/store/actions.ts b/src/store/actions.ts index 461e9dd1..ed9ee8e6 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -9,7 +9,7 @@ export const actions: ActionTree = { 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 = { 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 = { 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 = { }, 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 = { }, 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() diff --git a/src/store/getters.ts b/src/store/getters.ts index 088d1624..3148dff9 100644 --- a/src/store/getters.ts +++ b/src/store/getters.ts @@ -8,9 +8,9 @@ export const getters: GetterTree = { 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 = { 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 }, diff --git a/src/store/mutations.ts b/src/store/mutations.ts index a079f8b3..100bb166 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -22,7 +22,7 @@ export const mutations: MutationTree = { // 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 = { [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) diff --git a/src/utils/clipboard.ts b/src/utils/clipboard.ts index 893bfc89..2772936d 100644 --- a/src/utils/clipboard.ts +++ b/src/utils/clipboard.ts @@ -26,9 +26,9 @@ export const copyText = (text: string) => { // 读取剪贴板 export const readClipboard = (): Promise => { 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) }) } diff --git a/src/utils/common.ts b/src/utils/common.ts index 3f20f2ca..257452c9 100644 --- a/src/utils/common.ts +++ b/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] } diff --git a/src/utils/element.ts b/src/utils/element.ts index 63f24d40..567c3516 100644 --- a/src/utils/element.ts +++ b/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]) diff --git a/src/utils/fontFamily.ts b/src/utils/fontFamily.ts index 6e2ae095..a6531405 100644 --- a/src/utils/fontFamily.ts +++ b/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 diff --git a/src/utils/fullscreen.ts b/src/utils/fullscreen.ts index f6c1d016..551fedbe 100644 --- a/src/utils/fullscreen.ts +++ b/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() } // 判断是否全屏 diff --git a/src/views/Editor/Canvas/AlignmentLine.vue b/src/views/Editor/Canvas/AlignmentLine.vue index 39cd5706..dd802d75 100644 --- a/src/views/Editor/Canvas/AlignmentLine.vue +++ b/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' } }) diff --git a/src/views/Editor/Canvas/EditableElement.vue b/src/views/Editor/Canvas/EditableElement.vue index 86617308..937e99d1 100644 --- a/src/views/Editor/Canvas/EditableElement.vue +++ b/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), diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue index 675e507d..0cccc53f 100644 --- a/src/views/Editor/Canvas/ElementCreateSelection.vue +++ b/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 diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue index 186ea5c5..1e29cd39 100644 --- a/src/views/Editor/Canvas/GridLines.vue +++ b/src/views/Editor/Canvas/GridLines.vue @@ -29,7 +29,7 @@ export default defineComponent({ const background = computed(() => 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 diff --git a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue index 02f58386..54294152 100644 --- a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue +++ b/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 diff --git a/src/views/Editor/Canvas/hooks/useDragElement.ts b/src/views/Editor/Canvas/hooks/useDragElement.ts index 8181ab17..d66b6d8b 100644 --- a/src/views/Editor/Canvas/hooks/useDragElement.ts +++ b/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() diff --git a/src/views/Editor/Canvas/hooks/useDragLineElement.ts b/src/views/Editor/Canvas/hooks/useDragLineElement.ts index 6b5b4ae4..1d0f7d54 100644 --- a/src/views/Editor/Canvas/hooks/useDragLineElement.ts +++ b/src/views/Editor/Canvas/hooks/useDragLineElement.ts @@ -26,9 +26,9 @@ export default (elementList: Ref) => { 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) => { } 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) => { // 根据拖拽的点，选择修改起点或终点的位置 // 两点在水平和垂直方向上有对齐吸附 // 靠近其他元素的吸附点有对齐吸附 - 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) => { 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) => { 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) => { 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() diff --git a/src/views/Editor/Canvas/hooks/useDropImageOrText.ts b/src/views/Editor/Canvas/hooks/useDropImageOrText.ts index 97803cae..bdda4316 100644 --- a/src/views/Editor/Canvas/hooks/useDropImageOrText.ts +++ b/src/views/Editor/Canvas/hooks/useDropImageOrText.ts @@ -10,18 +10,18 @@ export default (elementRef: Ref) => { 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, diff --git a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts index d665dce0..da498407 100644 --- a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts +++ b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts @@ -11,7 +11,7 @@ export default (viewportRef: Ref) => { 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) => { 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) => { 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) } diff --git a/src/views/Editor/Canvas/hooks/useMouseSelection.ts b/src/views/Editor/Canvas/hooks/useMouseSelection.ts index b6a5951a..afc8e00c 100644 --- a/src/views/Editor/Canvas/hooks/useMouseSelection.ts +++ b/src/views/Editor/Canvas/hooks/useMouseSelection.ts @@ -17,7 +17,7 @@ export default (elementList: Ref, viewportRef: Ref { - if(!viewportRef.value) return + if (!viewportRef.value) return let isMouseDown = true const viewportRect = viewportRef.value.getBoundingClientRect() @@ -38,7 +38,7 @@ export default (elementList: Ref, viewportRef: Ref { - if(!isMouseDown) return + if (!isMouseDown) return const currentPageX = e.pageX const currentPageY = e.pageY @@ -49,13 +49,13 @@ export default (elementList: Ref, viewportRef: Ref 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, viewportRef: Ref, viewportRef: Ref 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, viewportRef: Ref { - 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, viewportRef: Ref 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 } diff --git a/src/views/Editor/Canvas/hooks/useRotateElement.ts b/src/views/Editor/Canvas/hooks/useRotateElement.ts index f9ef696c..f7c5f551 100644 --- a/src/views/Editor/Canvas/hooks/useRotateElement.ts +++ b/src/views/Editor/Canvas/hooks/useRotateElement.ts @@ -31,11 +31,11 @@ export default (elementList: Ref, viewportRef: Ref { - if(!isMouseDown) return + if (!isMouseDown) return // 计算鼠标基于旋转中心的坐标 const mouseX = (e.pageX - viewportRect.left) / canvasScale.value @@ -47,15 +47,15 @@ export default (elementList: Ref, viewportRef: Ref 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, viewportRef: Ref { - 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() diff --git a/src/views/Editor/Canvas/hooks/useSelectElement.ts b/src/views/Editor/Canvas/hooks/useSelectElement.ts index 8dcadbe4..d55c07bf 100644 --- a/src/views/Editor/Canvas/hooks/useSelectElement.ts +++ b/src/views/Editor/Canvas/hooks/useSelectElement.ts @@ -15,22 +15,22 @@ export default ( const ctrlOrShiftKeyActive = computed(() => 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 = () => { diff --git a/src/views/Editor/Canvas/hooks/useViewportSize.ts b/src/views/Editor/Canvas/hooks/useViewportSize.ts index 912eff29..18808d35 100644 --- a/src/views/Editor/Canvas/hooks/useViewportSize.ts +++ b/src/views/Editor/Canvas/hooks/useViewportSize.ts @@ -10,11 +10,11 @@ export default (canvasRef: Ref) => { 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) => { 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 { diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue index 47fef98b..e84456d8 100644 --- a/src/views/Editor/Canvas/index.vue +++ b/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) diff --git a/src/views/Editor/CanvasTool/TableGenerator.vue b/src/views/Editor/CanvasTool/TableGenerator.vue index f941e64d..e2f1b493 100644 --- a/src/views/Editor/CanvasTool/TableGenerator.vue +++ b/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 } diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue index 26d1d6a9..e2cac522 100644 --- a/src/views/Editor/CanvasTool/index.vue +++ b/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)) } diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue index a7ce9303..d8c1f3f2 100644 --- a/src/views/Editor/Thumbnails/index.vue +++ b/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] diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue index 09e60e4f..27ad86d6 100644 --- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue +++ b/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) diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue index 3d3c4cec..3b4afd6c 100644 --- a/src/views/Editor/Toolbar/ElementPositionPanel.vue +++ b/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 }) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue index 67537746..9ab9926f 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue +++ b/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 } diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue index e5f82d1e..6ce1bafc 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue +++ b/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 diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue index 1c0f1228..8ed0029a 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue @@ -178,9 +178,9 @@ export default defineComponent({ const filterOptions = ref(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, diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue index 364347ce..5098a6e7 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue +++ b/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', diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index 3fe21d94..d19f2c57 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/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([]) 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) => { 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: '' }) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index 06b98cc1..cc3d9df3 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -326,7 +326,7 @@ export default defineComponent({ const wordSpace = ref() 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 diff --git a/src/views/Editor/Toolbar/ElementStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/index.vue index ed4f4eb5..5c9ccdcc 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/index.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/index.vue @@ -26,7 +26,7 @@ export default defineComponent({ const handleElement = computed(() => store.getters.handleElement) const currentPanelComponent = computed(() => { - if(!handleElement.value) return null + if (!handleElement.value) return null const panelMap = { [ElementTypes.TEXT]: TextStylePanel, diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue index 77ee742e..48cf8a0b 100644 --- a/src/views/Editor/Toolbar/MultiPositionPanel.vue +++ b/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 } diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue index 034f1833..d00afe58 100644 --- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue +++ b/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() } diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index 91fad1e7..d5c86fba 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/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 } diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue index a24cabbd..7da270e0 100644 --- a/src/views/Editor/Toolbar/common/ElementOpacity.vue +++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue @@ -29,7 +29,7 @@ export default defineComponent({ const opacity = ref() 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 }) diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue index ecc6bc64..44369d40 100644 --- a/src/views/Editor/Toolbar/common/ElementOutline.vue +++ b/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 }) } diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue index 502064ff..770877be 100644 --- a/src/views/Editor/Toolbar/common/ElementShadow.vue +++ b/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 }) } diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue index 9f75da91..8f325af4 100644 --- a/src/views/Editor/Toolbar/index.vue +++ b/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]) } }) diff --git a/src/views/Editor/useHotkey.ts b/src/views/Editor/useHotkey.ts index 45c06254..b089caf8 100644 --- a/src/views/Editor/useHotkey.ts +++ b/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(() => { diff --git a/src/views/Editor/usePasteEvent.ts b/src/views/Editor/usePasteEvent.ts index a572b351..c88ec231 100644 --- a/src/views/Editor/usePasteEvent.ts +++ b/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)) } } diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue index e6ac44ae..51cc705c 100644 --- a/src/views/Screen/ScreenElement.vue +++ b/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 }) diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue index 9c1f1ae4..be3a6a4c 100644 --- a/src/views/Screen/WritingBoardTool.vue +++ b/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') } diff --git a/src/views/Screen/index.vue b/src/views/Screen/index.vue index 4b164ab1..5cef8d8f 100644 --- a/src/views/Screen/index.vue +++ b/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(() => { diff --git a/src/views/components/element/ChartElement/Chart.vue b/src/views/components/element/ChartElement/Chart.vue index 19165b99..448ea418 100644 --- a/src/views/components/element/ChartElement/Chart.vue +++ b/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([ diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue index ee1ef761..a7ce3a6b 100644 --- a/src/views/components/element/ChartElement/index.vue +++ b/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) diff --git a/src/views/components/element/ImageElement/BaseImageElement.vue b/src/views/components/element/ImageElement/BaseImageElement.vue index 52191599..9392fe69 100644 --- a/src/views/components/element/ImageElement/BaseImageElement.vue +++ b/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 '' }) diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue index 6c6b5d1d..01731b1a 100644 --- a/src/views/components/element/ImageElement/ImageClipHandler.vue +++ b/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 diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue index 2342511c..cd0eb6f3 100644 --- a/src/views/components/element/ImageElement/index.vue +++ b/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 || {} diff --git a/src/views/components/element/LineElement/index.vue b/src/views/components/element/LineElement/index.vue index 233035b9..b8d0189a 100644 --- a/src/views/components/element/LineElement/index.vue +++ b/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) diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue index 81f5c999..9258bb2d 100644 --- a/src/views/components/element/ShapeElement/index.vue +++ b/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) diff --git a/src/views/components/element/TableElement/CustomTextarea.vue b/src/views/components/element/TableElement/CustomTextarea.vue index e960a813..fd47b31a 100644 --- a/src/views/components/element/TableElement/CustomTextarea.vue +++ b/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 { diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue index 9be76f7d..495fda21 100644 --- a/src/views/components/element/TableElement/EditableTable.vue +++ b/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 = [] } diff --git a/src/views/components/element/TableElement/StaticTable.vue b/src/views/components/element/TableElement/StaticTable.vue index 46e4f81f..1a09ebcc 100644 --- a/src/views/components/element/TableElement/StaticTable.vue +++ b/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, diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue index 9279ff32..7c138155 100644 --- a/src/views/components/element/TableElement/index.vue +++ b/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 { diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue index 8fdb806f..4f05b825 100644 --- a/src/views/components/element/TextElement/index.vue +++ b/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() @@ -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)) } diff --git a/src/views/components/element/hooks/useElementShadow.ts b/src/views/components/element/hooks/useElementShadow.ts index 7647cc53..20abbbd9 100644 --- a/src/views/components/element/hooks/useElementShadow.ts +++ b/src/views/components/element/hooks/useElementShadow.ts @@ -5,7 +5,7 @@ export default (shadow: Ref) => { 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}` }