【PPTist】画布状态管理

ops/2024/12/21 16:26:36/

一、简介

在 PPTist 项目中,画布是指幻灯片编辑区域的主要工作区,具体包括:

  • 基础尺寸
  • 主要功能:显示和编辑幻灯片、元素拖拽和缩放等、网格线和标尺对齐、元素的选择和多选
  • 相关状态:缩放比例、画布能否被拖拽、网格线尺寸等
  • 主要操作:缩放、平移、显示网格线标尺等
  • 组成部分:背景层、内容层、工具层
  • 画布的特点:
    响应式:自适应窗口大小、保持宽高比例、支持缩放适配
    交互性:支持拖拽移动、支持元素选择、支持快捷键操作
    辅助功能:网格对齐、标尺显示、智能参考线

二、基础属性

画布的定义在src/store/main.ts文件,看一下接口定义,包含各个部分的编辑状态、选中状态等等

// 主状态接口定义
export interface MainState {activeElementIdList: string[]      // 被选中的元素ID集合handleElementId: string            // 正在操作的元素ID(如调整大小、旋转等)activeGroupElementId: string       // 组合元素中被选中的子元素IDhiddenElementIdList: string[]      // 被隐藏的元素ID集合canvasPercentage: number          // 画布可视区域百分比canvasScale: number               // 画布缩放比例(基于宽度1000px)canvasDragged: boolean            // 画布是否被拖拽移动thumbnailsFocus: boolean          // 左侧导航缩略图区域是否聚焦editorAreaFocus: boolean          // 编辑区域是否聚焦disableHotkeys: boolean           // 是否禁用快捷键gridLineSize: number              // 网格线尺寸(0表示不显示网格线)showRuler: boolean                // 是否显示标尺creatingElement: CreatingElement | null   // 正在创建的元素信息creatingCustomShape: boolean              // 是否正在绘制自定义形状availableFonts: typeof SYS_FONTS         // 当前环境可用的字体列表toolbarState: ToolbarStates              // 右侧工具栏状态clipingImageElementId: string            // 当前正在裁剪的图片IDisScaling: boolean                       // 是否正在进行元素缩放richTextAttrs: TextAttrs                 // 富文本编辑器属性selectedTableCells: string[]             // 选中的表格单元格selectedSlidesIndex: number[]            // 当前选中的页面索引集合dialogForExport: DialogForExportTypes    // 导出对话框类型databaseId: string                       // 当前应用的indexedDB数据库ID 随机数textFormatPainter: TextFormatPainter | null    // 文字格式刷shapeFormatPainter: ShapeFormatPainter | null  // 形状格式刷showSelectPanel: boolean                 // 是否显示选择面板showSearchPanel: boolean                 // 是否显示查找替换面板showNotesPanel: boolean                  // 是否显示批注面板
}

三、计算属性

// 计算属性
getters: {// 获取当前选中的元素列表activeElementList(state) {const slidesStore = useSlidesStore()const currentSlide = slidesStore.currentSlideif (!currentSlide || !currentSlide.elements) return []return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.id))},// 获取当前操作的元素handleElement(state) {const slidesStore = useSlidesStore()const currentSlide = slidesStore.currentSlideif (!currentSlide || !currentSlide.elements) return nullreturn currentSlide.elements.find(element => state.handleElementId === element.id) || null},
},

四、方法

action 的定义还挺多的,但是里面的实现都比较简单,都是设置状态的值。大家肯定看一眼就明白啦

五、使用

画布状态都在哪里使用,这是一个关键的问题,以后我们在开发新功能的时候,需要知道什么时候要调用这里面的方法。
我们以 setCanvasPercentage 方法为例,这个方法是用来改变画布的缩放的百分比的,在 src/hooks/useScaleCanvas.ts 中使用

/*** 缩放画布百分比* @param command 缩放命令:放大、缩小*/
const scaleCanvas = (command: '+' | '-') => {let percentage = canvasPercentage.valueconst step = 5const max = 200const min = 30if (command === '+' && percentage <= max) percentage += stepif (command === '-' && percentage >= min) percentage -= stepmainStore.setCanvasPercentage(percentage)
}/*** 设置画布缩放比例* 但不是直接设置该值,而是通过设置画布可视区域百分比来动态计算* @param value 目标画布缩放比例*/
const setCanvasScalePercentage = (value: number) => {const percentage = Math.round(value / canvasScale.value * canvasPercentage.value) / 100mainStore.setCanvasPercentage(percentage)
}/*** 重置画布尺寸和位置*/
const resetCanvas = () => {mainStore.setCanvasPercentage(90)if (canvasDragged) mainStore.setCanvasDragged(false)
}

设置完了之后呢,canvasPercentage这个属性在哪里使用呢?
是在 src/views/Editor/Canvas/hooks/useViewportSize.ts 这个文件中

  // 可视区域缩放或比例变化时,重置/更新可视区域的位置watch(canvasPercentage, setViewportPosition)

监听到这个属性变化之后,会计算出画布的位置,然后执行

  // 画布可视区域位置和大小的样式
const viewportStyles = computed(() => ({width: VIEWPORT_SIZE,height: VIEWPORT_SIZE * viewportRatio.value,left: viewportLeft.value,top: viewportTop.value,
}))

viewportStyles 这个属性又在 src/views/Editor/Canvas/index.vue 文件中使用

<div class="viewport-wrapper":style="{width: viewportStyles.width * canvasScale + 'px',height: viewportStyles.height * canvasScale + 'px',left: viewportStyles.left + 'px',top: viewportStyles.top + 'px',}"
>

viewport-wrapper 这个元素我们看一下是谁,就是这个编辑区域
在这里插入图片描述
可以看出,项目的源码分工还是很细的
如果我们要在编辑区域增加一个新的属性,就需要把属性定义到src/store/main.ts 文件中,然后通过 src/hooks/useXXX.ts 文件进行修改,并且导出模版中需要使用的属性,然后在模版中使用。


http://www.ppmy.cn/ops/143803.html

相关文章

linux 安装redis

下载地址 通过网盘分享的文件&#xff1a;redis-7.2.3.tar.gz 链接: https://pan.baidu.com/s/1KjGJB1IRIr9ehGRKBLgp4w?pwd0012 提取码: 0012 解压 tar -zxvf redis-7.2.3.tar.gz mv redis-7.2.3 /usr/local/ cd /usr/local/redis-7.2.3 安装 make install 修改配置文件 /搜索…

如何制造生产电控超表面

引言 本文是一篇经验分享,内容涉及如何将已设计完成的电控超表面投入生产,如果你没有PCB电路设计生产的经验,此文可以作为超表面生产的简单说明。 所谓电控超表面就是贴装了集总元件的超表面,通过控制这些原件的电压,电流实现器件的功能,特性改变。 无源部分 !注:本…

Vue.js前端框架教程12:Vue表单验证rules和form.validate

文章目录 表单验证:rulesformRef.value.validate 表单验证 在 Vue 中&#xff0c;:rules 和 formRef.value.validate 通常用于表单验证。:rules 是一个对象&#xff0c;定义了表单字段的验证规则&#xff0c;而 formRef.value.validate 是一个方法&#xff0c;用于触发表单验证…

声乐基础课之气息

见一个爱一个&#xff0c;练一个废一个 我五音不全——唱歌好帅——我想唱得好——所以学唱歌&#xff08;包“三段论“逻辑的啊&#xff09; 目前在看的视频&#xff1a;【零基础学唱歌】腹式呼吸如何带入到歌曲_哔哩哔哩_bilibili 你会呼吸吗&#xff1f; 唱歌要用气息&am…

腾讯云云开发 Copilot 深度探索与实战分享

个人主页&#xff1a;♡喜欢做梦 欢迎 &#x1f44d;点赞 ➕关注 ❤️收藏 &#x1f4ac;评论 目录 一、引言 二、产品介绍 三、产品体验过程 四、整体总结 五、给开发者的复用建议 六、对 AI 辅助开发的前景展望 一、引言 在当今数字化转型加速的时代&#xff0c;…

【NLP】第七章:Transformer原理及实操

七、Transformer 看本文前一定一定要先看注意力机制篇章&#xff1a;【NLP】第五章&#xff1a;注意力机制Attention-CSDN博客 和位置编码偏置&#xff1a;【NLP】第六章&#xff1a;位置编码Positional Encoding-CSDN博客 本文对这俩部分的讲解是掠过的&#xff01;因为注意力…

linux-多线程

目录 ​编辑 一、线程 1.线程定义 2.线程的优点: 3.线程的缺点 4.线程异常&#xff1a; 5.线程用途&#xff1a; 6.Linux进程VS线程 linux线程控制 创建线程: 线程终止: 线程等待 分离线程 Linux线程互斥 互斥量mutex 互斥量的接口 初始化互斥量 销毁互斥量 阻…

关于如何做技术文档

在技术的浩瀚海洋中&#xff0c;一份优秀的技术文档宛如精准的航海图。它是知识传承的载体&#xff0c;是团队协作的桥梁&#xff0c;更是产品成功的幕后英雄。然而&#xff0c;打造这样一份出色的技术文档并非易事。你是否在为如何清晰阐释复杂技术而苦恼&#xff1f;是否纠结…