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

machine.js

const machine = Machine({
  initial: "start",
  context: {
    selected: [],
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    drag: {
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 0
    },
    grabIndex: undefined,
    stretch: {},
    centers: []
  },
  invoke: [{ src: 'mouseUp$' }, { src: 'mouseMove$' }, { src: 'dispose$' }],
  states: {
    start: {
      invoke: {
        src: 'mouseDown$'
      },
      on: {
        mousedown: {
          target: 'selecting',
          actions: 'startSelection' 
        }
      }
    },
    selecting: {
      invoke: [{ src: 'mouseUp$' }, { src: 'mouseMove$' }],
      on: {
        mouseup: "selected",
        mousemove: {
          target: 'selecting',
          actions: 'updateSelection'
        }
      }
    },
    selected: {
      invoke: [{ src: 'mouseDown$' }, { src: 'mouseMove$' }],
      on: {
        mousedown: {
          target: 'selecting',
          actions: 'startSelection'
        },
        drag: {
          target: 'dragging',
          actions: 'startDrag'
        }
      }
    },
    dragging: {
      on: {
        mousemove: {
          target: 'dragging',
          actions: 'drag'
        },
        mouseup: [
          { target: "selected", cond: 'isNotTrashElement' },
          { target: "disposed", actions: 'showDaysRemoved' }
        ]
      }
    },
    disposed: {
      on: {
        startGrab: {
          target: 'grabbing',
          actions: 'initGrab'
        }
      }
    },
    grabbing: {
      on: {
        mousemove: {
          target: 'grabbing',
          actions: 'updateGrab'
        },
        mouseup: {
          target: 'disposed',
          actions: 'resetGrab'
        }
      }
    }
  }
});