mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
docs: 添加注释
This commit is contained in:
parent
f2f5ea67f1
commit
c1e56746f9
@ -16,11 +16,13 @@ export default () => {
|
|||||||
|
|
||||||
const exporting = ref(false)
|
const exporting = ref(false)
|
||||||
|
|
||||||
|
// 导出JSON文件
|
||||||
const exportJSON = () => {
|
const exportJSON = () => {
|
||||||
const blob = new Blob([JSON.stringify(slides.value)], { type: '' })
|
const blob = new Blob([JSON.stringify(slides.value)], { type: '' })
|
||||||
saveAs(blob, 'pptist_slides.json')
|
saveAs(blob, 'pptist_slides.json')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 格式化颜色值为 透明度 + HexString,供pptxgenjs使用
|
||||||
const formatColor = (_color: string) => {
|
const formatColor = (_color: string) => {
|
||||||
const c = tinycolor(_color)
|
const c = tinycolor(_color)
|
||||||
const alpha = c.getAlpha()
|
const alpha = c.getAlpha()
|
||||||
@ -33,6 +35,8 @@ export default () => {
|
|||||||
|
|
||||||
type FormatColor = ReturnType<typeof formatColor>
|
type FormatColor = ReturnType<typeof formatColor>
|
||||||
|
|
||||||
|
// 将HTML字符串格式化为pptxgenjs所需的格式
|
||||||
|
// 核心思路:将HTML字符串按样式分片平铺,每个片段需要继承祖先元素的样式信息,遇到块级元素需要换行
|
||||||
const formatHTML = (html: string) => {
|
const formatHTML = (html: string) => {
|
||||||
const ast = toAST(html)
|
const ast = toAST(html)
|
||||||
|
|
||||||
@ -134,6 +138,8 @@ export default () => {
|
|||||||
| { x: number; y: number; curve: { type: 'cubic'; x1: number; y1: number; x2: number; y2: number } }
|
| { x: number; y: number; curve: { type: 'cubic'; x1: number; y1: number; x2: number; y2: number } }
|
||||||
| { close: true }
|
| { close: true }
|
||||||
>
|
>
|
||||||
|
|
||||||
|
// 将SVG路径信息格式化为pptxgenjs所需要的格式
|
||||||
const formatPoints = (points: SvgPoints, scale = { x: 1, y: 1 }): Points => {
|
const formatPoints = (points: SvgPoints, scale = { x: 1, y: 1 }): Points => {
|
||||||
return points.map(point => {
|
return points.map(point => {
|
||||||
if (point.close !== undefined) {
|
if (point.close !== undefined) {
|
||||||
@ -179,6 +185,7 @@ export default () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 导出PPTX文件
|
||||||
const exportPPTX = () => {
|
const exportPPTX = () => {
|
||||||
exporting.value = true
|
exporting.value = true
|
||||||
const pptx = new pptxgen()
|
const pptx = new pptxgen()
|
||||||
|
@ -157,7 +157,6 @@ export const uniqAlignLines = (lines: AlignLine[]) => {
|
|||||||
* 主要用于复制元素时,维持数据中各处元素ID原有的关系
|
* 主要用于复制元素时,维持数据中各处元素ID原有的关系
|
||||||
* 例如:原本两个组合的元素拥有相同的groupId,复制后依然会拥有另一个相同的groupId
|
* 例如:原本两个组合的元素拥有相同的groupId,复制后依然会拥有另一个相同的groupId
|
||||||
* @param elements 元素列表数据
|
* @param elements 元素列表数据
|
||||||
* @returns
|
|
||||||
*/
|
*/
|
||||||
export const createElementIdMap = (elements: PPTElement[]) => {
|
export const createElementIdMap = (elements: PPTElement[]) => {
|
||||||
const groupIdMap = {}
|
const groupIdMap = {}
|
||||||
@ -178,7 +177,6 @@ export const createElementIdMap = (elements: PPTElement[]) => {
|
|||||||
/**
|
/**
|
||||||
* 根据表格的主题色,获取对应用于配色的子颜色
|
* 根据表格的主题色,获取对应用于配色的子颜色
|
||||||
* @param themeColor 主题色
|
* @param themeColor 主题色
|
||||||
* @returns
|
|
||||||
*/
|
*/
|
||||||
export const getTableSubThemeColor = (themeColor: string) => {
|
export const getTableSubThemeColor = (themeColor: string) => {
|
||||||
const rgba = tinycolor(themeColor).toRgb()
|
const rgba = tinycolor(themeColor).toRgb()
|
||||||
@ -193,7 +191,6 @@ export const getTableSubThemeColor = (themeColor: string) => {
|
|||||||
/**
|
/**
|
||||||
* 获取线条元素路径字符串
|
* 获取线条元素路径字符串
|
||||||
* @param element 线条元素
|
* @param element 线条元素
|
||||||
* @returns
|
|
||||||
*/
|
*/
|
||||||
export const getLineElementPath = (element: PPTLineElement) => {
|
export const getLineElementPath = (element: PPTLineElement) => {
|
||||||
const start = element.start.join(',')
|
const start = element.start.join(',')
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
// https://github.com/scriptex/svg64
|
// svg转base64图片,参考:https://github.com/scriptex/svg64
|
||||||
|
|
||||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
|
||||||
const PREFIX = 'data:image/svg+xml;base64,'
|
const PREFIX = 'data:image/svg+xml;base64,'
|
||||||
|
@ -14,6 +14,10 @@ const typeMap = {
|
|||||||
512: 'A',
|
512: 'A',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 简单解析SVG路径
|
||||||
|
* @param d SVG path d属性
|
||||||
|
*/
|
||||||
export const parseSvgPath = (d: string) => {
|
export const parseSvgPath = (d: string) => {
|
||||||
const pathData = new SVGPathData(d)
|
const pathData = new SVGPathData(d)
|
||||||
|
|
||||||
@ -25,6 +29,10 @@ export const parseSvgPath = (d: string) => {
|
|||||||
|
|
||||||
export type SvgPath = ReturnType<typeof parseSvgPath>
|
export type SvgPath = ReturnType<typeof parseSvgPath>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析SVG路径,并将圆弧(A)类型的路径转为三次贝塞尔(C)类型的路径
|
||||||
|
* @param d SVG path d属性
|
||||||
|
*/
|
||||||
export const toPoints = (d: string) => {
|
export const toPoints = (d: string) => {
|
||||||
const pathData = new SVGPathData(d)
|
const pathData = new SVGPathData(d)
|
||||||
|
|
||||||
|
@ -1,3 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* 将普通文本转为带段落信息的HTML字符串
|
||||||
|
* @param text 文本
|
||||||
|
*/
|
||||||
export const parseText2Paragraphs = (text: string) => {
|
export const parseText2Paragraphs = (text: string) => {
|
||||||
const htmlText = text.replace(/[\n\r]+/g, '<br>')
|
const htmlText = text.replace(/[\n\r]+/g, '<br>')
|
||||||
const paragraphs = htmlText.split('<br>')
|
const paragraphs = htmlText.split('<br>')
|
||||||
|
@ -72,6 +72,7 @@ export default defineComponent({
|
|||||||
return false
|
return false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 打开元素绑定的超链接
|
||||||
const openLink = () => {
|
const openLink = () => {
|
||||||
if (props.elementInfo.link) window.open(props.elementInfo.link)
|
if (props.elementInfo.link) window.open(props.elementInfo.link)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user