Generated by XState Viz: https://xstate.js.org/viz

machine.js

const fetchMachine = Machine({
  initial: 'idle',
  context: {
    cursorStart: {
      x: 0,
      y: 0
    },
    item: null,
    siblingAbove: null,
    siblingBelow: null,
    transactions: []
  },
  states: {
    idle: {
      entry: 'resetContext',
      on: {
        dragstart: {
          cond: 'isFrameLayoutParent',
          target: 'dragging',
          actions: 'setContext'
        }
      }
    },
    dragging: {
      on: {
        drag: [
          {
            cond: 'collideSiblingAbove',
            target: 'swapping',
            actions: 'swapWithSiblingAbove'
          },
          {
            cond: 'collideSiblingBelow',
            target: 'swapping',
            actions: 'swapWithSiblingBelow'
          }
        ],
        dragend: {
          target: 'idle'
        }
      }
    },
    swapping: {
      on: {
        drag: {
          target: 'dragging',
          actions: 'setContext'
        },
        dragend: 'idle'
      }
    }
  }
}, {
  guards: {
    isFrameLayoutParent: () => true,
    collideSiblingAbove: () => true,
    collideSiblingBelow: () => true
  }
});