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

feat: 元素选择面板支持调整层级

Browse Source
This commit is contained in:
pipipi-pikachu 2022-09-28 22:14:07 +08:00
parent cd786f3465
commit f35b96b48b
6 changed files with 57 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -40,7 +40,7 @@
"svg-pathdata": "^6.0.0",
"tinycolor2": "^1.4.2",
"vue": "^3.2.37",
"vuedraggable": "^4.0.1"
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@commitlint/cli": "^12.0.0",

2
package.json
View File

@ -41,7 +41,7 @@
"svg-pathdata": "^6.0.0",
"tinycolor2": "^1.4.2",
"vue": "^3.2.37",
"vuedraggable": "^4.0.1"
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@commitlint/cli": "^12.0.0",

2
src/plugins/icon.ts
View File

@ -48,6 +48,7 @@ import {
Tailoring,
Effects,
ColorFilter,
Up,
Down,
Plus,
Minus,
@ -159,6 +160,7 @@ export const icons = {
IconTailoring: Tailoring,
IconEffects: Effects,
IconColorFilter: ColorFilter,
IconUp: Up,
IconDown: Down,
IconPlus: Plus,
IconMinus: Minus,

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

@ -143,6 +143,7 @@ const {
editorAreaFocus,
gridLineSize,
showRuler,
showSelectPanel,
creatingElement,
canvasScale,
textFormatPainter,
@ -287,6 +288,13 @@ const contextmenus = (): ContextmenuItem[] => {
},
],
},
{
text: showSelectPanel.value ? '关闭选择面板' : '打开选择面板',
handler: () => {
if (!showSelectPanel.value) mainStore.setSelectPanelState(true)
else mainStore.setSelectPanelState(false)
},
},
{
text: '重置当前页',
handler: deleteAllElements,

7
src/views/Editor/EditorHeader/index.vue
View File

@ -27,7 +27,7 @@
<MenuItem @click="toggleGridLines()">{{ gridLineSize ? '关闭网格线' : '打开网格线' }}</MenuItem>
<MenuItem @click="toggleRuler()">{{ showRuler ? '关闭标尺' : '打开标尺' }}</MenuItem>
<MenuItem @click="resetSlides()">重置幻灯片</MenuItem>
<MenuItem @click="openSelectPanel()">打开选择面板</MenuItem>
<MenuItem @click="openSelectPanel()">{{ showSelectPanel ? '关闭选择面板' : '打开选择面板' }}</MenuItem>
</Menu>
</template>
</Dropdown>
@ -91,7 +91,7 @@ import useExport from '@/hooks/useExport'
import HotkeyDoc from './HotkeyDoc.vue'
const mainStore = useMainStore()
const { gridLineSize, showRuler } = storeToRefs(mainStore)
const { gridLineSize, showRuler, showSelectPanel } = storeToRefs(mainStore)
const { enterScreening, enterScreeningFromStart } = useScreening()
const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
@ -109,7 +109,8 @@ const toggleRuler = () => {
}
const openSelectPanel = () => {
mainStore.setSelectPanelState(true)
if (!showSelectPanel.value) mainStore.setSelectPanelState(true)
else mainStore.setSelectPanelState(false)
}
const hotkeyDrawerVisible = ref(false)

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

@ -8,9 +8,15 @@
:top="90"
@close="close()"
>
<div class="btns" v-if="elements.length">
<Button size="small" style="margin-right: 5px;" @click="showAll()">全部显示</Button>
<Button size="small" @click="hideAll()">全部隐藏</Button>
<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>
</div>
<div class="icon-btns" v-if="handleElement">
<IconDown class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.UP)" />
<IconUp class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)" />
</div>
</div>
<div class="element-list">
<template v-for="item in elements" :key="item.id">
@ -76,11 +82,15 @@ import { storeToRefs } from 'pinia'
import { useSlidesStore, useMainStore } from '@/store'
import { PPTElement } from '@/types/slides'
import { ELEMENT_TYPE_ZH } from '@/configs/element'
import useOrderElement from '@/hooks/useOrderElement'
import { ElementOrderCommands } from '@/types/edit'
const slidesStore = useSlidesStore()
const mainStore = useMainStore()
const { currentSlide } = storeToRefs(slidesStore)
const { handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
const { handleElement, handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
const { orderElement } = useOrderElement()
interface GroupElements {
type: 'group'
@ -168,11 +178,35 @@ const close = () => {
font-size: 12px;
user-select: none;
}
.btns {
margin-bottom: 6px;
.handler {
height: 24px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
.icon-btns {
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.icon-btn {
width: 16px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
color: $themeColor;
}
}
}
.element-list {
height: calc(100% - 30px);
height: calc(100% - 32px);
padding-right: 10px;
margin-right: -10px;
overflow: auto;