|
| 1 | +--- |
| 2 | +id: migrating-0.1.x |
| 3 | +title: Migrating from 0.1.x |
| 4 | +--- |
| 5 | + |
| 6 | +import {Image} from "@site/src/components"; |
| 7 | + |
| 8 | +## Multiselect |
| 9 | + |
| 10 | +In version 0.2.x, we introduced Multiselect which required us to change the `EditorState`. |
| 11 | + |
| 12 | +<Image src="https://user-images.githubusercontent.com/16416929/141787974-563e0864-d229-466e-8c62-3262987fef22.gif" /> |
| 13 | + |
| 14 | + |
| 15 | +With multi-select, the `events` property from the `EditorState` is now `Set<NodeId>` rather than `NodeId`: |
| 16 | + |
| 17 | +```tsx |
| 18 | +// 0.1.x |
| 19 | +type EditorState = { |
| 20 | + ... // same as before |
| 21 | + events: NodeId; |
| 22 | +} |
| 23 | + |
| 24 | +// 0.2.x |
| 25 | +type EditorState = { |
| 26 | + ... // same as before |
| 27 | + events: Set<NodeId>; |
| 28 | +} |
| 29 | +``` |
| 30 | +
|
| 31 | +### Update collected state values |
| 32 | +Therefore, you'll need to update any existing code that accesses the `events` property. For example, any state values collected via the `useEditor` hook: |
| 33 | +```tsx |
| 34 | +// 0.1.x |
| 35 | +const { selected, hovered, dragged } = useEditor(state => ({ |
| 36 | + selected: state.events.selected === 'some-node-id', |
| 37 | + hovered: state.events.hovered === 'some-node-id', |
| 38 | + dragged: state.events.dragged === 'some-node-id', |
| 39 | +})) |
| 40 | + |
| 41 | +// 0.2.x |
| 42 | +const { selected, hovered, dragged } = useEditor(state => ({ |
| 43 | + selected: state.events.selected.has('some-node-id'), |
| 44 | + hovered: state.events.hovered.has('some-node-id'), |
| 45 | + dragged: state.events.dragged.has('some-node-id') |
| 46 | +})) |
| 47 | +``` |
| 48 | + |
| 49 | +### Update User Component rules |
| 50 | +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: |
| 51 | + |
| 52 | +```tsx |
| 53 | +const Button = () => { |
| 54 | + return (...) |
| 55 | +} |
| 56 | + |
| 57 | +// 0.1.x |
| 58 | +Button.craft = { |
| 59 | + rules: { |
| 60 | + canMoveIn: (incomingNode: Node, currentNode: Node, helpers: NodeHelpers) => { |
| 61 | + return incomingNode.data.name === 'Text'; |
| 62 | + }, |
| 63 | + canMoveOut: (outgoingNode: Node, currentNode: Node, helpers: NodeHelpers) => { |
| 64 | + return outgoingNode.data.name === 'Text'; |
| 65 | + } |
| 66 | + } |
| 67 | +} |
| 68 | + |
| 69 | + |
| 70 | +// 0.2.x |
| 71 | +Button.craft = { |
| 72 | + rules: { |
| 73 | + canMoveIn: (incomingNodes: Node[], currentNode: Node, helpers: NodeHelpers) => { |
| 74 | + return incomingNodes.every(incomingNode => incomingNode.data.name === 'Text') |
| 75 | + }, |
| 76 | + canMoveOut: (outgoingNodes: Node[], currentNOde: Node, helpers: NodeHelpers) => { |
| 77 | + return outgoingNodes.every(outgoingNode => outgoingNode.data.name === 'Text') |
| 78 | + } |
| 79 | + } |
| 80 | +} |
0 commit comments