Editior machine - for statechart visualizer

machine.js

Machine({
  id: 'editor',
  type: 'parallel',
  states: {
    selection: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            SELECT: {
              target: 'selected',
              cond: 'selectionIncludesCells'
            }
          }
        },
        selected: {
          on: {
            SELECT: [
              { 
                target: 'selected',
                cond: 'selectionIncludesCells'
                
              },
              {
                target: 'idle'
              }
            ]
          },
          MOVE_SELECTION: {
            actions: ['moveCells']
          },
          DELETE_SELECTION: {
            actions: ['deleteCells']
          },
        }
      }
    },
    // what interactions are possible atm
    // this most likely depends on the thing we 
    // selected
    interaction: {
      initial: 'none',
      states: {
        none: {},
        state: {
          on: {
            MOVE: {},
            COLLAPSE: {}
          }
        },
        states: {
          on: {
            MOVE: {},
          }
        },
        event: {
          on: {
            DELETE: {},
            CONNECT: {}
          }
        }
      },
    },
    zoom: {
      initial: 'active',
      states: {
        active: {
          on: {
            PAN_ZOOM: {},
            RESET_ZOOM: {}
          }

        }
      }

    }
  }
})