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

machine.js

  const editorMachine = Machine({
    id: 'editor',
    type: 'parallel',
    states: {
      editor: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              NODE_MDOWN: 'checkNodeMove',
              LINE_MDOWN: 'checkLineMove',
              AREA_MDOWN: 'checkAreaMove',
            }
          },
          checkNodeMove: {
            on: {
              NODE_MMOVE: 'draggingNode',
              NODE_CLICK: 'idle'
            }
          },
          draggingNode: {
            on: {
              NODE_MUP: 'idle'
            }
          },
          checkLineMove: {
            on: {
              LINE_MMOVE: 'draggingLine',
              LINE_CLICK: 'idle'
            }
          },
          draggingLine: {
            on: {
              LINE_MUP: 'idle'
            }
          },
          checkAreaMove: {
            on: {
              AREA_MMOVE: 'draggingArea',
              AREA_CLICK: 'idle'
            }
          },
          draggingArea: {
            on: {
              AREA_MUP: 'idle'
            }
          },
          
        }
      },
    
      inspector: {
        initial: 'none',
        states: {
          none: {
            on: {
              NODE_CLICK: 'nodeSelect'
            }
          },
          nodeSelect: {
            on: {
              CHOICE_SEL: 'choiceSelect',
              AREA_CLICK: 'none'
            }
          },
          choiceSelect: {
            on: {
              CLOSE: 'nodeSelect',
              AREA_CLICK: 'none'
            }
          }
        }
      }
    }
  });