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 bubbleMachine = Machine({
  id: "bubble",
  initial: "initial",
  context: {
    x: 0,
    y: 0,
    r: 0,
    name: "",
    id: ""
  },
  states: {
    initial: {
      on: {
        MOUSE_ENTER: {
          target: "hovered",
          actions: [
            sendParent(ctx => ({ type: "BUBBLE.MOUSE_ENTER", bubble: ctx }))
          ]
        }
      }
    },
    hovered: {
      on: {
        MOUSE_LEAVE: {
          target: "initial",
          actions: [
            sendParent(ctx => ({ type: "BUBBLE.MOUSE_LEAVE", bubble: ctx }))
          ]
        },
        CLICK: "pinned"
      }
    },
    pinned: {
      on: {
        CLICK: {
          target: "hovered",
          actions: [sendParent(ctx => ({ type: "BUBBLE.CLICK", bubble: ctx }))]
        },
        MOUSE_LEAVE: {}
      }
    }
  }
});