From d82641503fdd8f81adbaec1307015759f5bd9bd2 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Sun, 14 Feb 2021 12:24:25 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Editor/Toolbar/ElementAnimationPanel.vue | 7 +++++++ src/views/Editor/Toolbar/ElementPositionPanel.vue | 7 +++++++ src/views/Editor/Toolbar/MultiPositionPanel.vue | 5 ++++- src/views/Editor/Toolbar/SlideAnimationPanel.vue | 2 ++ src/views/Editor/Toolbar/SlideStylePanel.vue | 6 ++++++ 5 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue index 6cfdafe4..ea46ee97 100644 --- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue +++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue @@ -101,6 +101,7 @@ export default defineComponent({ const animations = ANIMATIONS + // 当前页面的动画列表 const animationSequence = computed(() => { if (!currentSlideAnimations.value) return [] const animationSequence = [] @@ -119,6 +120,7 @@ export default defineComponent({ return animationSequence }) + // 当前选中元素的入场动画信息 const handleElementAnimation = computed(() => { if (!handleElement.value) return null const animations = currentSlideAnimations.value || [] @@ -127,12 +129,14 @@ export default defineComponent({ return animationTypes[animation.type] }) + // 删除元素入场动画 const deleteAnimation = (elId: string) => { const animations = (currentSlideAnimations.value as PPTAnimation[]).filter(item => item.elId !== elId) store.commit(MutationTypes.UPDATE_SLIDE, { animations }) addHistorySnapshot() } + // 拖拽修改入场动画顺序后同步数据 const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => { const { newIndex, oldIndex } = eventData if (oldIndex === newIndex) return @@ -146,6 +150,7 @@ export default defineComponent({ addHistorySnapshot() } + // 执行入场动画预览 const runAnimation = (elId: string, animationType: string) => { const prefix = 'animate__' const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`) @@ -160,6 +165,7 @@ export default defineComponent({ } } + // 修改元素入场动画，并执行一次预览 const updateElementAnimation = (type: string) => { const animations = (currentSlideAnimations.value as PPTAnimation[]).map(item => { if (item.elId === handleElement.value.id) return { ...item, type } @@ -172,6 +178,7 @@ export default defineComponent({ runAnimation(handleElement.value.id, type) } + // 添加元素入场动画，并执行一次预览 const addAnimation = (type: string) => { if (handleElementAnimation.value) { updateElementAnimation(type) diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue index 3b4afd6c..0bb39871 100644 --- a/src/views/Editor/Toolbar/ElementPositionPanel.vue +++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue @@ -180,6 +180,7 @@ export default defineComponent({ const { addHistorySnapshot } = useHistorySnapshot() + // 设置元素位置 const updateLeft = (value: number) => { const props = { left: value } store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) @@ -190,6 +191,8 @@ export default defineComponent({ store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) addHistorySnapshot() } + + // 设置元素宽度、高度、旋转角度 const updateWidth = (value: number) => { const props = { width: value } store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) @@ -205,11 +208,15 @@ export default defineComponent({ store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) addHistorySnapshot() } + + // 固定元素的宽高比 const updateFixedRatio = (value: boolean) => { const props = { fixedRatio: value } store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) addHistorySnapshot() } + + // 将元素旋转45度（顺时针或逆时针） const updateRotate45 = (command: '+' | '-') => { let _rotate = Math.floor(rotate.value / 45) * 45 if (command === '+') _rotate = _rotate + 45 diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue index 48cf8a0b..5f8bf9b7 100644 --- a/src/views/Editor/Toolbar/MultiPositionPanel.vue +++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue @@ -52,6 +52,7 @@ export default defineComponent({ const { addHistorySnapshot } = useHistorySnapshot() const { combineElements, uncombineElements } = useCombineElement() + // 判断当前多选的几个元素是否可以组合 const canCombine = computed(() => { const firstGroupId = activeElementList.value[0].groupId if (!firstGroupId) return true @@ -60,11 +61,12 @@ export default defineComponent({ return !inSameGroup }) + // 对齐选中的元素 const alignActiveElement = (command: ElementAlignCommand) => { const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value) const elementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements)) - // 获取每一个组合的宽高位置 + // 如果所选择的元素为组合元素的成员，需要计算该组合的整体范围 const groupElementRangeMap = {} for (const activeElement of activeElementList.value) { if (activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) { @@ -73,6 +75,7 @@ export default defineComponent({ } } + // 根据不同的命令，计算对齐的位置 if (command === ElementAlignCommands.LEFT) { elementList.forEach(element => { if (activeElementIdList.value.includes(element.id)) { diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue index d00afe58..2dab9a47 100644 --- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue +++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue @@ -40,12 +40,14 @@ export default defineComponent({ const { addHistorySnapshot } = useHistorySnapshot() + // 修改播放时的切换页面方式 const updateTurningMode = (mode: string) => { if (mode === currentTurningMode.value) return store.commit(MutationTypes.UPDATE_SLIDE, { turningMode: mode }) addHistorySnapshot() } + // 将当前页的切换页面方式应用到全部页面 const applyAllSlide = () => { const newSlides = slides.value.map(slide => { return { diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index 5904e9e7..6df07d79 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/src/views/Editor/Toolbar/SlideStylePanel.vue @@ -217,6 +217,7 @@ export default defineComponent({ const { addHistorySnapshot } = useHistorySnapshot() + // 设置背景模式：纯色、图片、渐变色 const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => { if (type === 'solid') { const newBackground: SlideBackground = { @@ -248,17 +249,20 @@ export default defineComponent({ addHistorySnapshot() } + // 设置背景图片 const updateBackground = (props: Partial) => { store.commit(MutationTypes.UPDATE_SLIDE, { background: { ...background.value, ...props } }) addHistorySnapshot() } + // 上传背景图片 const uploadBackgroundImage = (files: File[]) => { const imageFile = files[0] if (!imageFile) return getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL })) } + // 应用当前页背景到全部页面 const applyBackgroundAllSlide = () => { const newSlides = slides.value.map(slide => { return { @@ -270,10 +274,12 @@ export default defineComponent({ addHistorySnapshot() } + // 设置主题 const updateTheme = (themeProps: Partial) => { store.commit(MutationTypes.SET_THEME, themeProps) } + // 将当前主题应用到全部页面 const applyThemeAllSlide = () => { const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value)) const { themeColor, backgroundColor, fontColor } = theme.value