mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
feat: 添加多种网格线尺寸
This commit is contained in:
parent
4f192edc59
commit
e3c1994996
@ -19,7 +19,7 @@ export interface MainState {
|
||||
thumbnailsFocus: boolean
|
||||
editorAreaFocus: boolean
|
||||
disableHotkeys: boolean
|
||||
showGridLines: boolean
|
||||
gridLineSize: number
|
||||
showRuler: boolean
|
||||
creatingElement: CreatingElement | null
|
||||
availableFonts: typeof SYS_FONTS
|
||||
@ -47,7 +47,7 @@ export const useMainStore = defineStore('main', {
|
||||
thumbnailsFocus: false, // 左侧导航缩略图区域聚焦
|
||||
editorAreaFocus: false, // 编辑区域聚焦
|
||||
disableHotkeys: false, // 禁用快捷键
|
||||
showGridLines: false, // 显示网格线
|
||||
gridLineSize: 0, // 网格线尺寸(0表示不显示网格线)
|
||||
showRuler: false, // 显示标尺
|
||||
creatingElement: null, // 正在插入的元素信息,需要通过绘制插入的元素(文字、形状、线条)
|
||||
availableFonts: SYS_FONTS, // 当前环境可用字体
|
||||
@ -117,8 +117,8 @@ export const useMainStore = defineStore('main', {
|
||||
this.disableHotkeys = disable
|
||||
},
|
||||
|
||||
setGridLinesState(show: boolean) {
|
||||
this.showGridLines = show
|
||||
setGridLineSize(size: number) {
|
||||
this.gridLineSize = size
|
||||
},
|
||||
|
||||
setRulerState(show: boolean) {
|
||||
|
@ -21,7 +21,7 @@ import { useMainStore, useSlidesStore } from '@/store'
|
||||
import { VIEWPORT_SIZE } from '@/configs/canvas'
|
||||
import { SlideBackground } from '@/types/slides'
|
||||
|
||||
const { canvasScale } = storeToRefs(useMainStore())
|
||||
const { canvasScale, gridLineSize } = storeToRefs(useMainStore())
|
||||
const { currentSlide, viewportRatio } = storeToRefs(useSlidesStore())
|
||||
|
||||
const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
|
||||
@ -33,24 +33,20 @@ const gridColor = computed(() => {
|
||||
return tinycolor.mostReadable(bgColor, colorList, { includeFallbackColors: true }).setAlpha(.5).toRgbString()
|
||||
})
|
||||
|
||||
const gridSize = 50
|
||||
|
||||
// 计算网格路径
|
||||
const getPath = () => {
|
||||
// 网格路径
|
||||
const path = computed(() => {
|
||||
const maxX = VIEWPORT_SIZE
|
||||
const maxY = VIEWPORT_SIZE * viewportRatio.value
|
||||
|
||||
let path = ''
|
||||
for (let i = 0; i <= Math.floor(maxY / gridSize); i++) {
|
||||
path += `M0 ${i * gridSize} L${maxX} ${i * gridSize} `
|
||||
let p = ''
|
||||
for (let i = 0; i <= Math.floor(maxY / gridLineSize.value); i++) {
|
||||
p += `M0 ${i * gridLineSize.value} L${maxX} ${i * gridLineSize.value} `
|
||||
}
|
||||
for (let i = 0; i <= Math.floor(maxX / gridSize); i++) {
|
||||
path += `M${i * gridSize} 0 L${i * gridSize} ${maxY} `
|
||||
for (let i = 0; i <= Math.floor(maxX / gridLineSize.value); i++) {
|
||||
p += `M${i * gridLineSize.value} 0 L${i * gridLineSize.value} ${maxY} `
|
||||
}
|
||||
return path
|
||||
}
|
||||
|
||||
const path = getPath()
|
||||
return p
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -3,7 +3,7 @@
|
||||
class="viewport-background"
|
||||
:style="backgroundStyle"
|
||||
>
|
||||
<GridLines v-if="showGridLines" />
|
||||
<GridLines v-if="gridLineSize" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -15,7 +15,7 @@ import { SlideBackground } from '@/types/slides'
|
||||
import GridLines from './GridLines.vue'
|
||||
import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
|
||||
|
||||
const { showGridLines } = storeToRefs(useMainStore())
|
||||
const { gridLineSize } = storeToRefs(useMainStore())
|
||||
const { currentSlide } = storeToRefs(useSlidesStore())
|
||||
const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
|
||||
|
||||
|
@ -138,7 +138,7 @@ const {
|
||||
activeGroupElementId,
|
||||
handleElementId,
|
||||
editorAreaFocus,
|
||||
showGridLines,
|
||||
gridLineSize,
|
||||
showRuler,
|
||||
creatingElement,
|
||||
canvasScale,
|
||||
@ -224,11 +224,6 @@ const handleMousewheelCanvas = (e: WheelEvent) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 开关网格线
|
||||
const toggleGridLines = () => {
|
||||
mainStore.setGridLinesState(!showGridLines.value)
|
||||
}
|
||||
|
||||
// 开关标尺
|
||||
const toggleRuler = () => {
|
||||
mainStore.setRulerState(!showRuler.value)
|
||||
@ -249,16 +244,37 @@ const contextmenus = (): ContextmenuItem[] => {
|
||||
subText: 'Ctrl + A',
|
||||
handler: selectAllElement,
|
||||
},
|
||||
{
|
||||
text: '网格线',
|
||||
subText: showGridLines.value ? '√' : '',
|
||||
handler: toggleGridLines,
|
||||
},
|
||||
{
|
||||
text: '标尺',
|
||||
subText: showRuler.value ? '√' : '',
|
||||
handler: toggleRuler,
|
||||
},
|
||||
{
|
||||
text: '网格线',
|
||||
handler: () => mainStore.setGridLineSize(gridLineSize.value ? 0 : 50),
|
||||
children: [
|
||||
{
|
||||
text: '无',
|
||||
subText: gridLineSize.value === 0 ? '√' : '',
|
||||
handler: () => mainStore.setGridLineSize(0),
|
||||
},
|
||||
{
|
||||
text: '小',
|
||||
subText: gridLineSize.value === 25 ? '√' : '',
|
||||
handler: () => mainStore.setGridLineSize(25),
|
||||
},
|
||||
{
|
||||
text: '中',
|
||||
subText: gridLineSize.value === 50 ? '√' : '',
|
||||
handler: () => mainStore.setGridLineSize(50),
|
||||
},
|
||||
{
|
||||
text: '大',
|
||||
subText: gridLineSize.value === 100 ? '√' : '',
|
||||
handler: () => mainStore.setGridLineSize(100),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '重置当前页',
|
||||
handler: deleteAllElements,
|
||||
|
@ -24,7 +24,7 @@
|
||||
<MenuItem @click="redo()">重做</MenuItem>
|
||||
<MenuItem @click="createSlide()">添加页面</MenuItem>
|
||||
<MenuItem @click="deleteSlide()">删除页面</MenuItem>
|
||||
<MenuItem @click="toggleGridLines()">{{ showGridLines ? '关闭网格线' : '打开网格线' }}</MenuItem>
|
||||
<MenuItem @click="toggleGridLines()">{{ gridLineSize ? '关闭网格线' : '打开网格线' }}</MenuItem>
|
||||
<MenuItem @click="toggleRuler()">{{ showRuler ? '关闭标尺' : '打开标尺' }}</MenuItem>
|
||||
<MenuItem @click="resetSlides()">重置幻灯片</MenuItem>
|
||||
</Menu>
|
||||
@ -90,7 +90,7 @@ import useExport from '@/hooks/useExport'
|
||||
import HotkeyDoc from './HotkeyDoc.vue'
|
||||
|
||||
const mainStore = useMainStore()
|
||||
const { showGridLines, showRuler } = storeToRefs(mainStore)
|
||||
const { gridLineSize, showRuler } = storeToRefs(mainStore)
|
||||
|
||||
const { enterScreening, enterScreeningFromStart } = useScreening()
|
||||
const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
|
||||
@ -100,7 +100,7 @@ const { importSpecificFile } = useExport()
|
||||
const setDialogForExport = mainStore.setDialogForExport
|
||||
|
||||
const toggleGridLines = () => {
|
||||
mainStore.setGridLinesState(!showGridLines.value)
|
||||
mainStore.setGridLineSize(gridLineSize.value ? 0 : 50)
|
||||
}
|
||||
|
||||
const toggleRuler = () => {
|
||||
|
Loading…
x
Reference in New Issue
Block a user