Migrating from 0.1.x

Multiselect#

In version 0.2.x, we introduced Multiselect which required us to change the EditorState.

With multi-select, the events property from the EditorState is now Set<NodeId> rather than NodeId:

// 0.1.x
type EditorState = {
  ... // same as before
  events: NodeId;
}

// 0.2.x
type EditorState = {
  ... // same as before
  events: Set<NodeId>;
}

Update collected state values#

Therefore, you'll need to update any existing code that accesses the events property. For example, any state values collected via the useEditor hook:

// 0.1.x
const { selected, hovered, dragged } = useEditor(state => ({
    selected: state.events.selected === 'some-node-id',
    hovered: state.events.hovered === 'some-node-id',
    dragged: state.events.dragged === 'some-node-id',
}))

// 0.2.x
const { selected, hovered, dragged } = useEditor(state => ({
    selected: state.events.selected.has('some-node-id'),
    hovered: state.events.hovered.has('some-node-id'),
    dragged: state.events.dragged.has('some-node-id')
}))

Update User Component rules#

Additionally, User Component canMoveIn and canMoveOut rules now accepts Node[] rather than Node as their first parameter. So, you may have to be update these rules for your components as well:

const Button = () => {
    return (...)
}

// 0.1.x
Button.craft = {
    rules: {
        canMoveIn: (incomingNode: Node, currentNode: Node, helpers: NodeHelpers) => {
            return incomingNode.data.name === 'Text';
        },
        canMoveOut: (outgoingNode: Node, currentNode: Node, helpers: NodeHelpers) => {
            return outgoingNode.data.name === 'Text';
        }
    }
}


// 0.2.x
Button.craft = {
    rules: {
        canMoveIn: (incomingNodes: Node[], currentNode: Node, helpers: NodeHelpers) => {
            return incomingNodes.every(incomingNode => incomingNode.data.name === 'Text')
        },
        canMoveOut: (outgoingNodes: Node[], currentNOde: Node, helpers: NodeHelpers) => {
            return outgoingNodes.every(outgoingNode => outgoingNode.data.name === 'Text')
        }
    }
}