feat: 添加多种网格线尺寸

This commit is contained in:
pipipi-pikachu 2022-07-16 10:25:04 +08:00
parent 4f192edc59
commit e3c1994996
5 changed files with 46 additions and 34 deletions

View File

@ -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) {

View File

@ -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>

View File

@ -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)

View File

@ -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,

View File

@ -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 = () => {