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

perf: 代码优化，公用逻辑提取

Browse Source
This commit is contained in:
pipipi-pikachu 2021-07-25 13:55:59 +08:00
parent 9d63cb680c
commit 0c96c00885
5 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/hooks/useExport.ts
View File

@ -3,7 +3,7 @@ import { trim } from 'lodash'
import { saveAs } from 'file-saver'
import pptxgen from 'pptxgenjs'
import tinycolor from 'tinycolor2'
import { getElementRange } from '@/utils/element'
import { getElementRange, getLineElementPath } from '@/utils/element'
import { AST, toAST } from '@/utils/htmlParser'
import { SvgPoints, toPoints } from '@/utils/svgPathParser'
import { svg2Base64 } from '@/utils/svg2Base64'
@ -292,19 +292,7 @@ export default () => {
}
}
else if (el.type === 'line') {
let path = ''
const start = el.start.join(',')
const end = el.end.join(',')
if (el.broken) {
const mid = el.broken.join(',')
path = `M${start} L${mid} L${end}`
}
else if (el.curve) {
const mid = el.curve.join(',')
path = `M${start} Q${mid} ${end}`
}
else path = `M${start} L${end}`
const path = getLineElementPath(el)
const points = formatPoints(toPoints(path))
const { minX, maxX, minY, maxY } = getElementRange(el)

37
src/utils/element.ts
View File

@ -1,4 +1,5 @@
import { PPTElement } from '@/types/slides'
import tinycolor from 'tinycolor2'
import { PPTElement, PPTLineElement } from '@/types/slides'
import { createRandomCode } from '@/utils/common'
interface RotatedElementData {
@ -172,4 +173,38 @@ export const createElementIdMap = (elements: PPTElement[]) => {
groupIdMap,
elIdMap,
}
}
/**
* 根据表格的主题色，获取对应用于配色的子颜色
* @param themeColor 主题色
* @returns
*/
export const getTableSubThemeColor = (themeColor: string) => {
const rgba = tinycolor(themeColor).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 }
return [
`rgba(${[subRgba1.r, subRgba1.g, subRgba1.b, subRgba1.a].join(',')})`,
`rgba(${[subRgba2.r, subRgba2.g, subRgba2.b, subRgba2.a].join(',')})`,
]
}
/**
* 获取线条元素路径字符串
* @param element 线条元素
* @returns
*/
export const getLineElementPath = (element: PPTLineElement) => {
const start = element.start.join(',')
const end = element.end.join(',')
if (element.broken) {
const mid = element.broken.join(',')
return `M${start} L${mid} L${end}`
}
if (element.curve) {
const mid = element.curve.join(',')
return `M${start} Q${mid} ${end}`
}
return `M${start} L${end}`
}

13
src/views/components/element/LineElement/BaseLineElement.vue
View File

@ -53,6 +53,7 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { PPTLineElement } from '@/types/slides'
import { getLineElementPath } from '@/utils/element'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
import LinePointMarker from './LinePointMarker.vue'
@ -84,17 +85,7 @@ export default defineComponent({
const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10, 5' : '0, 0')
const path = computed(() => {
const start = props.elementInfo.start.join(',')
const end = props.elementInfo.end.join(',')
if (props.elementInfo.broken) {
const mid = props.elementInfo.broken.join(',')
return `M${start} L${mid} L${end}`
}
if (props.elementInfo.curve) {
const mid = props.elementInfo.curve.join(',')
return `M${start} Q${mid} ${end}`
}
return `M${start} L${end}`
return getLineElementPath(props.elementInfo)
})
return {

13
src/views/components/element/LineElement/index.vue
View File

@ -63,6 +63,7 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { PPTLineElement } from '@/types/slides'
import { getLineElementPath } from '@/utils/element'
import { ContextmenuItem } from '@/components/Contextmenu/types'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
@ -109,17 +110,7 @@ export default defineComponent({
const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10 6' : '0 0')
const path = computed(() => {
const start = props.elementInfo.start.join(',')
const end = props.elementInfo.end.join(',')
if (props.elementInfo.broken) {
const mid = props.elementInfo.broken.join(',')
return `M${start} L${mid} L${end}`
}
if (props.elementInfo.curve) {
const mid = props.elementInfo.curve.join(',')
return `M${start} Q${mid} ${end}`
}
return `M${start} L${end}`
return getLineElementPath(props.elementInfo)
})
return {

10
src/views/components/element/TableElement/useSubThemeColor.ts
View File

@ -1,6 +1,6 @@
import { ref, Ref, watch } from 'vue'
import tinycolor from 'tinycolor2'
import { TableTheme } from '@/types/slides'
import { getTableSubThemeColor } from '@/utils/element'
// 通过表格的主题色计算辅助颜色
@ -8,13 +8,7 @@ export default (theme: Ref<TableTheme | undefined>) => {
const subThemeColor = ref(['', ''])
watch(() => theme.value, () => {
if (theme.value) {
const rgba = tinycolor(theme.value.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 }
subThemeColor.value = [
`rgba(${[subRgba1.r, subRgba1.g, subRgba1.b, subRgba1.a].join(',')})`,
`rgba(${[subRgba2.r, subRgba2.g, subRgba2.b, subRgba2.a].join(',')})`,
]
subThemeColor.value = getTableSubThemeColor(theme.value.color)
}
}, { immediate: true })