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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const boundaries = {
  initial: 'noBoundary',
  states: {
    noBoundary: {
      on: {
        MOUSE_MOVE: [
          { target: 'topBoundary', cond: 'isAgainstTopBoundary' },
          { target: 'leftBoundary', cond: 'isAgainstLeftBoundary' },
          { target: 'rightBoundary', cond: 'isAgainstRightBoundary' },
          { target: 'bottomBoundary', cond: 'isAgainstBottomBoundary' },
        ]
      }
    },
    topBoundary: {
      onEntry: ['onHitTopBoundary'],
      on: {
        MOUSE_MOVE: { target: 'noBoundary', cond: 'isAwayTopBoundary' },
      }
    },
    leftBoundary: {
      onEntry: ['onHitLeftBoundary'],
      on: {
        MOUSE_MOVE: { target: 'noBoundary', cond: 'isAwayLeftBoundary' },
      }
    },
    rightBoundary: {
      onEntry: ['onHitRightBoundary'],
      on: {
        MOUSE_MOVE: { target: 'noBoundary', cond: 'isAwayRightBoundary' },
      }
    },
    bottomBoundary: {
      onEntry: ['onHitBottomBoundary'],
      on: {
        MOUSE_MOVE: { target: 'noBoundary', cond: 'isAwayBottomBoundary' },
      }
    },
  }
}

const snap = {
  initial: 'noSnap',
  states: {
    noSnap: {
      on: {
        MOUSE_MOVE: [
          { target: 'snapX', cond: 'isInsideSnapXArea' },
          { target: 'snapY', cond: 'isInsideSnapYArea' },
        ]
      }
    },
    snapX: {
      onEntry: ['onSnapX'],
      on: {
        MOUSE_MOVE: { target: 'noSnap', cond: 'isOutsideSnapXArea' },
      }
    },
    snapY: {
      onEntry: ['onSnapY'],
      on: {
        MOUSE_MOVE: { target: 'noSnap', cond: 'isOutsideSnapYArea' },
      }
    },
  }
}

const containerScroll = {
  initial: 'noScroll',
  states: {
    noScroll: {
      on: {
        MOUSE_MOVE: [
          { target: 'scrollTop', cond: 'isInsideTopScrollArea' },
          { target: 'scrollLeft', cond: 'isInsideLeftScrollArea' },
          { target: 'scrollRight', cond: 'isInsideRightScrollArea' },
          { target: 'scrollBottom', cond: 'isInsideBottomScrollArea' },
        ]
      }
    },
    scrollTop: {
      activities: ['scrollingTop'], // this will trigger onContainerTopScroll
      onEntry: ['onContainerTopScrollStart'],
      onExit: ['onContainerTopScrollEnd'],
      on: {
        MOUSE_MOVE: { target: 'noScroll', cond: 'isOutsideTopScrollArea' },
      }
    },
    scrollLeft: {
      activities: ['scrollingLeft'], // this will trigger onContainerLeftScroll
      onEntry: ['onContainerLeftScrollStart'],
      onExit: ['onContainerLeftScrollEnd'],
      on: {
        MOUSE_MOVE: { target: 'noScroll', cond: 'isOutsideLeftScrollArea' },
      }
    },
    scrollRight: {
      activities: ['scrollingRight'], // this will trigger onContainerRightScroll
      onEntry: ['onContainerRightScrollStart'],
      onExit: ['onContainerRightScrollEnd'],
      on: {
        MOUSE_MOVE: { target: 'noScroll', cond: 'isOutsideRightScrollArea' },
      }
    },
    scrollBottom: {
      activities: ['scrollingBottom'], // this will trigger onContainerBottomScroll
      onEntry: ['onContainerBottomScrollStart'],
      onExit: ['onContainerBottomScrollEnd'],
      on: {
        MOUSE_MOVE: { target: 'noScroll', cond: 'isOutsideBottomScrollArea' },
      }
    },
  }
}

const fetchMachine = Machine({
  id: 'drag-and-drop',
  initial: 'idle',
  states: {
    idle: {
      onEntry: 'resetContext',
      on: {
        MOUSE_DOWN: {
          target: 'thresholdChecking',
          actions: ['setBoundingBoxes', 'setStart', 'setTargetOffset'],
        },
      },
    },
    thresholdChecking: {
      on: {
        MOUSE_MOVE: { target: 'dragging', cond: 'isOverThreshold' },
        MOUSE_UP: { target: 'idle', actions: ['onClick'] },
      },
    },
    dragging: {
      onEntry: ['onDragStart'],
      onExit: ['onDrop'],
      on: {
        MOUSE_MOVE: { actions: ['onDrag'] },
        MOUSE_UP: { target: 'idle' },
      },
      type: 'parallel',
      states: {
        containerScroll,
        snap,
        boundaries,
      }
    },
  },
}, {
  guards: {
    isOverThreshold: () => true
  }
})