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: 代码优化、UI调整

Browse Source
This commit is contained in:
pipipi-pikachu 2024-03-10 13:44:59 +08:00
parent aba93ce0ed
commit c60208a117
9 changed files with 96 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ColorPicker/index.vue
View File

@ -215,7 +215,7 @@ const openEyeDropper = () => {
// 原生取色吸管
const browserEyeDropper = () => {
message.success('按 ESC 键关闭取色吸管')
message.success('按 ESC 键关闭取色吸管', { duration: 0 })
// eslint-disable-next-line
const eyeDropper = new (window as any).EyeDropper()
@ -226,7 +226,7 @@ const browserEyeDropper = () => {
updateRecentColorsCache()
}).catch(() => {
message.success('关闭取色吸管')
message.closeAll()
})
}

6
src/hooks/useGlobalHotkey.ts
View File

@ -9,7 +9,7 @@ import useLockElement from './useLockElement'
import useDeleteElement from './useDeleteElement'
import useCombineElement from './useCombineElement'
import useCopyAndPasteElement from './useCopyAndPasteElement'
import useSelectAllElement from './useSelectAllElement'
import useSelectElement from './useSelectElement'
import useMoveElement from './useMoveElement'
import useOrderElement from './useOrderElement'
import useHistorySnapshot from './useHistorySnapshot'
@ -45,7 +45,7 @@ export default () => {
const { deleteElement } = useDeleteElement()
const { lockElement } = useLockElement()
const { copyElement, cutElement, quickCopyElement } = useCopyAndPasteElement()
const { selectAllElement } = useSelectAllElement()
const { selectAllElements } = useSelectElement()
const { moveElement } = useMoveElement()
const { orderElement } = useOrderElement()
const { redo, undo } = useHistorySnapshot()
@ -68,7 +68,7 @@ export default () => {
}
const selectAll = () => {
if (editorAreaFocus.value) selectAllElement()
if (editorAreaFocus.value) selectAllElements()
if (thumbnailsFocus.value) selectAllSlide()
}

35
src/hooks/useHideElement.ts Normal file
View File

@ -0,0 +1,35 @@
import { storeToRefs } from 'pinia'
import { useSlidesStore, useMainStore } from '@/store'
export default () => {
const slidesStore = useSlidesStore()
const mainStore = useMainStore()
const { currentSlide } = storeToRefs(slidesStore)
const { activeElementIdList, hiddenElementIdList } = storeToRefs(mainStore)
const toggleHideElement = (id: string) => {
if (hiddenElementIdList.value.includes(id)) {
mainStore.setHiddenElementIdList(hiddenElementIdList.value.filter(item => item !== id))
}
else mainStore.setHiddenElementIdList([...hiddenElementIdList.value, id])
if (activeElementIdList.value.includes(id)) mainStore.setActiveElementIdList([])
}
const showAllElements = () => {
const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
const needHiddenElementIdList = hiddenElementIdList.value.filter(item => !currentSlideElIdList.includes(item))
mainStore.setHiddenElementIdList(needHiddenElementIdList)
}
const hideAllElements = () => {
const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
mainStore.setHiddenElementIdList([...hiddenElementIdList.value, ...currentSlideElIdList])
if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
}
return {
toggleHideElement,
showAllElements,
hideAllElements,
}
}

48
src/hooks/useSelectAllElement.ts → src/hooks/useSelectElement.ts
View File

@ -1,19 +1,31 @@
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
export default () => {
const mainStore = useMainStore()
const { currentSlide } = storeToRefs(useSlidesStore())
const { hiddenElementIdList } = storeToRefs(mainStore)
// 将当前页面全部元素设置为被选择状态
const selectAllElement = () => {
const unlockedElements = currentSlide.value.elements.filter(el => !el.lock && !hiddenElementIdList.value.includes(el.id))
const newActiveElementIdList = unlockedElements.map(el => el.id)
mainStore.setActiveElementIdList(newActiveElementIdList)
}
return {
selectAllElement,
}
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
export default () => {
const mainStore = useMainStore()
const { currentSlide } = storeToRefs(useSlidesStore())
const { hiddenElementIdList, handleElementId } = storeToRefs(mainStore)
// 将当前页面全部元素设置为被选择状态
const selectAllElements = () => {
const unlockedElements = currentSlide.value.elements.filter(el => !el.lock && !hiddenElementIdList.value.includes(el.id))
const newActiveElementIdList = unlockedElements.map(el => el.id)
mainStore.setActiveElementIdList(newActiveElementIdList)
}
// 将指定元素设置为被选择状态
const selectElement = (id: string) => {
if (handleElementId.value === id) return
if (hiddenElementIdList.value.includes(id)) return
const lockedElements = currentSlide.value.elements.filter(el => el.lock)
if (lockedElements.some(el => el.id === id)) return
mainStore.setActiveElementIdList([id])
}
return {
selectAllElements,
selectElement,
}
}

6
src/views/Editor/Canvas/EditableElement.vue
View File

@ -27,7 +27,7 @@ import useCombineElement from '@/hooks/useCombineElement'
import useOrderElement from '@/hooks/useOrderElement'
import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
import useSelectAllElement from '@/hooks/useSelectAllElement'
import useSelectElement from '@/hooks/useSelectElement'
import { ElementOrderCommands, ElementAlignCommands } from '@/types/edit'
@ -70,7 +70,7 @@ const { combineElements, uncombineElements } = useCombineElement()
const { deleteElement } = useDeleteElement()
const { lockElement, unlockElement } = useLockElement()
const { copyElement, pasteElement, cutElement } = useCopyAndPasteElement()
const { selectAllElement } = useSelectAllElement()
const { selectAllElements } = useSelectElement()
const contextmenus = (): ContextmenuItem[] => {
if (props.elementInfo.lock) {
@ -150,7 +150,7 @@ const contextmenus = (): ContextmenuItem[] => {
{
text: '全选',
subText: 'Ctrl + A',
handler: selectAllElement,
handler: selectAllElements,
},
{
text: '锁定',

7
src/views/Editor/Canvas/ShapeCreateCanvas.vue
View File

@ -166,11 +166,14 @@ const keydownListener = (e: KeyboardEvent) => {
}
onMounted(() => {
message.success('点击绘制任意形状，首尾闭合完成绘制，按 ESC 键或鼠标右键取消，按 ENTER 键提前完成', {
duration: 5000,
duration: 0,
})
document.addEventListener('keydown', keydownListener)
})
onUnmounted(() => document.removeEventListener('keydown', keydownListener))
onUnmounted(() => {
document.removeEventListener('keydown', keydownListener)
message.closeAll()
})
</script>
<style lang="scss" scoped>

10
src/views/Editor/Canvas/index.vue
View File

@ -113,7 +113,7 @@ import useMouseSelection from './hooks/useMouseSelection'
import useDropImageOrText from './hooks/useDropImageOrText'
import useRotateElement from './hooks/useRotateElement'
import useScaleElement from './hooks/useScaleElement'
import useSelectElement from './hooks/useSelectElement'
import useSelectAndMoveElement from './hooks/useSelectElement'
import useDragElement from './hooks/useDragElement'
import useDragLineElement from './hooks/useDragLineElement'
import useMoveShapeKeypoint from './hooks/useMoveShapeKeypoint'
@ -121,7 +121,7 @@ import useInsertFromCreateSelection from './hooks/useInsertFromCreateSelection'
import useDeleteElement from '@/hooks/useDeleteElement'
import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
import useSelectAllElement from '@/hooks/useSelectAllElement'
import useSelectElement from '@/hooks/useSelectElement'
import useScaleCanvas from '@/hooks/useScaleCanvas'
import useScreening from '@/hooks/useScreening'
import useSlideHandler from '@/hooks/useSlideHandler'
@ -181,12 +181,12 @@ const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMou
const { dragElement } = useDragElement(elementList, alignmentLines, canvasScale)
const { dragLineElement } = useDragLineElement(elementList)
const { selectElement } = useSelectElement(elementList, dragElement)
const { selectElement } = useSelectAndMoveElement(elementList, dragElement)
const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines, canvasScale)
const { rotateElement } = useRotateElement(elementList, viewportRef, canvasScale)
const { moveShapeKeypoint } = useMoveShapeKeypoint(elementList, canvasScale)
const { selectAllElement } = useSelectAllElement()
const { selectAllElements } = useSelectElement()
const { deleteAllElements } = useDeleteElement()
const { pasteElement } = useCopyAndPasteElement()
const { enterScreeningFromStart } = useScreening()
@ -297,7 +297,7 @@ const contextmenus = (): ContextmenuItem[] => {
{
text: '全选',
subText: 'Ctrl + A',
handler: selectAllElement,
handler: selectAllElements,
},
{
text: '标尺',

4
src/views/Editor/NotesPanel.vue
View File

@ -311,11 +311,11 @@ const close = () => {
.footer {
margin-top: 5px;
margin-top: 10px;
display: flex;
.btn + .btn {
margin-left: 5px;
margin-left: 8px;
flex-shrink: 0;
}
}

45
src/views/Editor/SelectPanel.vue
View File

@ -10,8 +10,8 @@
>
<div class="handler" v-if="elements.length">
<div class="btns">
<Button size="small" style="margin-right: 5px;" @click="showAll()">全部显示</Button>
<Button size="small" @click="hideAll()">全部隐藏</Button>
<Button size="small" style="margin-right: 5px;" @click="showAllElements()">全部显示</Button>
<Button size="small" @click="hideAllElements()">全部隐藏</Button>
</div>
<div class="icon-btns" v-if="handleElement">
<IconDown class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.UP)" />
@ -44,8 +44,8 @@
>
<div v-else class="name">{{groupItem.name || ELEMENT_TYPE_ZH[groupItem.type]}}</div>
<div class="icons">
<IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-if="hiddenElementIdList.includes(groupItem.id)" />
<IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-else />
<IconPreviewClose style="font-size: 17px;" @click.stop="toggleHideElement(groupItem.id)" v-if="hiddenElementIdList.includes(groupItem.id)" />
<IconPreviewOpen style="font-size: 17px;" @click.stop="toggleHideElement(groupItem.id)" v-else />
</div>
</div>
</div>
@ -53,7 +53,7 @@
class="item"
:class="{ 'active': activeElementIdList.includes(item.id) }"
v-else
@click="selectEl(item.id)"
@click="selectElement(item.id)"
@dblclick="enterEdit(item.id)"
>
<input
@ -67,8 +67,8 @@
>
<div v-else class="name">{{item.name || ELEMENT_TYPE_ZH[item.type]}}</div>
<div class="icons">
<IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(item.id)" v-if="hiddenElementIdList.includes(item.id)" />
<IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(item.id)" v-else />
<IconPreviewClose style="font-size: 17px;" @click.stop="toggleHideElement(item.id)" v-if="hiddenElementIdList.includes(item.id)" />
<IconPreviewOpen style="font-size: 17px;" @click.stop="toggleHideElement(item.id)" v-else />
</div>
</div>
</template>
@ -83,6 +83,8 @@ import { useSlidesStore, useMainStore } from '@/store'
import type { PPTElement } from '@/types/slides'
import { ELEMENT_TYPE_ZH } from '@/configs/element'
import useOrderElement from '@/hooks/useOrderElement'
import useHideElement from '@/hooks/useHideElement'
import useSelectElement from '@/hooks/useSelectElement'
import { ElementOrderCommands } from '@/types/edit'
import MoveablePanel from '@/components/MoveablePanel.vue'
@ -94,6 +96,8 @@ const { currentSlide } = storeToRefs(slidesStore)
const { handleElement, handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
const { orderElement } = useOrderElement()
const { selectElement } = useSelectElement()
const { toggleHideElement, showAllElements, hideAllElements } = useHideElement()
interface GroupElements {
type: 'group'
@ -130,33 +134,6 @@ const selectGroupEl = (item: GroupElements, id: string) => {
nextTick(() => mainStore.setActiveGroupElementId(id))
}
const selectEl = (id: string) => {
if (handleElementId.value === id) return
if (hiddenElementIdList.value.includes(id)) return
mainStore.setActiveElementIdList([id])
}
const hideElement = (id: string) => {
if (hiddenElementIdList.value.includes(id)) {
mainStore.setHiddenElementIdList(hiddenElementIdList.value.filter(item => item !== id))
}
else mainStore.setHiddenElementIdList([...hiddenElementIdList.value, id])
if (activeElementIdList.value.includes(id)) mainStore.setActiveElementIdList([])
}
const showAll = () => {
const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
const needHiddenElementIdList = hiddenElementIdList.value.filter(item => !currentSlideElIdList.includes(item))
mainStore.setHiddenElementIdList(needHiddenElementIdList)
}
const hideAll = () => {
const currentSlideElIdList = currentSlide.value.elements.map(item => item.id)
mainStore.setHiddenElementIdList([...hiddenElementIdList.value, ...currentSlideElIdList])
if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
}
const editingElId = ref('')
const saveElementName = (e: FocusEvent | KeyboardEvent, id: string) => {