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)
  
Machine({
   initial: "idle",
  context: {
    x: 0,
    y: 0,
    dx: 0,
    dy: 0,
    pointerx: 0,
    pointery: 0,
  },
  states: {
    idle: {
      id: "idle",
      entry: assign({
        pointerx: 0,
        pointery: 0,
        dx: 0,
        dy: 0,
      }),
      on: {
        mousedown: {
          target: "dragging",
          actions: assign((context, event) => {
            return {
              ...context,
              pointerx: event.clientX,
              pointery: event.clientY,
            }
          }),
        },
      },
    },
    dragging: {
      initial: "outside",
      states: {
        outside: {
          on: {
            mouseenter: "inside",
            mouseup: {
              target: "#idle",
            },
          },
        },
        inside: {
          on: {
            mouseleave: "outside",
            mouseup: {
              target: "#dropped",
            },
          },
        },
      },
      on: {
        mousemove: {
          internal: true,
          actions: assign((context, event) => {
            return {
              ...context,
              dx: event.clientX - context.pointerx,
              dy: event.clientY - context.pointery,
            }
          }),
        },
      },
    },
    dropped: {
      id: "dropped",
      on: {
        reset: "idle",
      },
      after: {
        1000: "idle",
      },
    },
  },
  });