这是我参与「第四届青训营 」笔记创作活动的第6天

本文主要讲述低代码入门知识📖 本期讨论组件的撤销重做和调整层级操作

撤销、重做

📸无论是撤销还是重做，都依赖于快照数据

用一个数组snapshotData来保存编辑器的快照数据 🤔说白了就是实时记录componentData 以便可以实现撤销、重做等功能

用snapshotIdx来记录快照数组的索引,初始值为-1, 🤔说白了就是记录当前状态所对应的componentData 在快照中所对应的索引

当在画布中 添加组件、删除组件、改变图层层级、移动组件 都会保存快照

保存快照即 push当前的componentData

保存快照核心代码

recordSnapshot(state) {
    // 添加新的快照
    state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
    // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
    if (state.snapshotIndex < state.snapshotData.length - 1) {
        state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)
    }
},

撤销（相当于回退）

💡 把索引-1 然后把对应的快照数据同步给画布

👨‍🏫 若此时快照数组有五个数据 索引为4 把索引-1 即为3 此时索引3对应的快照数据即为上一步的操作后的数据 （从0开始算🧠）

🤔 若在撤销后，添加了新的操作 要怎么处理呢

✔ 常见的方案为: 插入新的快照的同时 把后面的顶掉 利用splice截断数组即可

undo(state) {
    if (state.snapshotIndex >= 0) {
        state.snapshotIndex--
        store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
    }
},

重做（相当于前进）

redo(state) {
    if (state.snapshotIndex < state.snapshotData.length - 1) {
        state.snapshotIndex++
        store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
    }
},

💡 把索引+1 然后把对应的快照数据同步给画布

其中 setComponentData 即 设置componentData

setComponentData(state, componentData = []) {
    Vue.set(state, 'componentData', componentData)
},

层级

💭按照正常逻辑 后拖入的组件 应该层级更高

控制层级也很简单 利用z-index属性即可

📚z-index

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

因此我们只要使得后生成的z-index较大即可 🔎查阅一些资料后考虑使用componentData的索引来作为z-index的值 即 后push的z-index大

这样也有一个好处 那就是方便改变层级

🆙调整层级

改变层级要做的就是改变索引 —— 经典的数组swap🔀

//将1和3交换位置
const arr = [1,2,3,4]
const tmp = arr[1]
arr[1] = arr[3]
arr[3] = tmp

💭💭💭

记录低代码项目中的小问题📜
若本文对你有帮助 欢迎点赞收藏👍
若有纰漏，敬请包涵，评论区欢迎指正👂