Craft.js 从 0.1.x 迁移到 0.2.x 的多选功能升级指南

Craft.js 从 0.1.x 迁移到 0.2.x 的多选功能升级指南

前言

Craft.js 是一个强大的 React 页面构建框架，在 0.2.x 版本中引入了令人期待的多选功能（Multiselect）。这一重大更新带来了更强大的交互能力，但同时也需要对现有代码进行一些必要的调整。本文将详细介绍从 0.1.x 迁移到 0.2.x 版本时需要注意的关键变更点。

多选功能概述

多选功能允许用户同时选择多个节点进行批量操作，这大大提升了编辑效率。为了实现这一功能，Craft.js 对核心数据结构进行了调整，主要涉及 EditorState 中的 events 属性以及相关的组件规则。

核心变更点

1. EditorState 事件类型变更

在 0.1.x 版本中，events 属性存储的是单个 NodeId，而在 0.2.x 中变更为 Set<NodeId> 类型，以支持多选功能。

// 0.1.x 版本
type EditorState = {
  events: NodeId; // 单个节点ID
}

// 0.2.x 版本
type EditorState = {
  events: Set<NodeId>; // 节点ID集合
}

2. 状态收集代码更新

使用 useEditor hook 收集状态时，需要调整判断逻辑，从简单的相等比较改为使用 Set 的 has 方法。

// 0.1.x 版本写法
const { selected } = useEditor(state => ({
    selected: state.events.selected === 'some-node-id'
}))

// 0.2.x 版本写法
const { selected } = useEditor(state => ({
    selected: state.events.selected.has('some-node-id')
}))

3. 用户组件规则变更

用户组件的 canMoveIn 和 canMoveOut 规则现在接收节点数组而非单个节点作为参数，以适应多选场景下的批量操作。

// 0.1.x 版本规则
Button.craft = {
    rules: {
        canMoveIn: (incomingNode: Node) => {
            return incomingNode.data.name === 'Text';
        }
    }
}

// 0.2.x 版本规则
Button.craft = {
    rules: {
        canMoveIn: (incomingNodes: Node[]) => {
            return incomingNodes.every(node => node.data.name === 'Text')
        }
    }
}

迁移建议

1. 全面检查事件处理：项目中所有访问 state.events 的地方都需要检查并更新
2. 组件规则重构：重新评估组件移动规则的业务逻辑，确保适应多节点场景
3. 测试覆盖：特别关注多选操作下的边界情况测试
4. 渐进式迁移：可以在项目中逐步应用这些变更，不必一次性全部修改

结语

多选功能的引入显著提升了 Craft.js 的编辑体验，虽然迁移需要一些工作，但带来的价值是显而易见的。理解这些变更背后的设计理念，将帮助你更好地利用新版本的功能特性。如果在迁移过程中遇到任何问题，建议仔细查阅官方文档或社区讨论。