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

machine.js

const machine = Machine({
 id: 'labelEditing',
  initial: 'idle',
  states: {
    idle: {
      on: {
        ADD_LAYER: {
          target: 'selection',
          actions: 'addLayer',
        },
        DRAG_START: {
          target: 'dragging',
          actions: 'dragStart',
        },
        EDIT_START: {
          target: 'editing',
          actions: 'writeSelection',
        },
        SELECT_LAYER: {
          target: 'selection',
          actions: 'writeSelection',
        },
        UPDATE_VARIABLES: {
          target: 'idle',
          actions: 'writeVariables',
        },
        UPDATE_LABEL_STRING_VALUE: {
          target: 'idle',
          actions: 'updateLabelValue',
        },
      },
    },
    dragging: {
      on: {
        MOUSE_UP: {
          target: 'selection',
          actions: 'dragEnd',
        },
        MOUSE_MOVE: {
          target: 'dragging',
          actions: 'drag',
        },
      },
    },
    editing: {
      on: {
        ADD_VARIABLE: {target: 'editing', actions: 'addVariable'},
        REGISTER_EDITOR: {target: 'editing', actions: 'registerEditor'},
        UPDATE_TEXT: {
          target: 'selection',
          actions: ['updateText', 'clearEditor'],
        },
        UPDATE_LAYER_FONT: {target: 'editing', actions: 'updateLayerValue'},
        UPDATE_LAYER_NUMBER_VALUE: {
          target: 'editing',
          actions: 'updateLayerValue',
        },
        UPDATE_LAYER_TEXT_ALIGN: {
          target: 'editing',
          actions: 'updateLayerValue',
        },
      },
    },
    resizing: {
      on: {
        MOUSE_UP: {target: 'selection', actions: 'resizeEnd'},
        MOUSE_MOVE: {
          target: 'resizing',
          actions: 'resize',
        },
      },
    },
    selection: {
      on: {
        ADD_LAYER: {
          target: 'selection',
          actions: 'addLayer',
        },
        ARROW_KEY: {
          target: 'selection',
          actions: 'arrowKey',
        },
        ADD_VARIABLE: {target: 'selection', actions: 'addVariable'},
        CANCEL: {target: 'idle', actions: 'clearContext'},
        DELETE_LAYER: {
          target: 'idle',
          actions: ['deleteLayer', 'clearContext'],
        },
        DUPLICATE_LAYER: {
          target: 'selection',
          actions: ['duplicateLayer'],
        },
        DRAG_START: {
          target: 'dragging',
          actions: 'dragStart',
        },
        EDIT_START: {
          target: 'editing',
          actions: 'editStart',
        },
        RESIZE_START: {target: 'resizing', actions: 'resizeStart'},
        SELECT_LAYER: {
          target: 'selection',
          actions: 'writeSelection',
        },
        UPDATE_LAYER_FONT: {target: 'selection', actions: 'updateLayerValue'},
        UPDATE_LAYER_NUMBER_VALUE: {
          target: 'selection',
          actions: 'updateLayerValue',
        },
        UPDATE_LAYER_TEXT_ALIGN: {
          target: 'selection',
          actions: 'updateLayerValue',
        },
      },
    },
  },
  
})