Cytoscape Machine

cytoscapeMachine.js

const options = {
  guards: {
    isValidElement: () => true
  }
}

Machine({
  id: 'canvas',
  initial: 'pendingInstance',
  context: {
    getInstance: null
  },
  states: {
    pendingInstance: {
      on: {
        INSTANCE_CREATED: {
          actions: ['registerInstance'],
          target: 'pendingSetupListeners'
        }
      }
    },
    pendingSetupListeners: {
      on: {
        ALL_LISTENERS_SETTED: 'loadingElements'
      }
    },
    loadingElements: {
      entry: ['loadElements'],
      on: {
        NODE_ADDED: {
          actions: ['configureElementMenu']
        },
        EDGE_ADDED: {
          actions: ['configureElementMenu']
        },
        NEXT: 'settingPlugins'
      },
    },
    settingPlugins: {
      entry: ['setupPlugins'],
      on: {
        NEXT: 'initialized'
      }
    },
    initialized: {
      entry: ['emitInit'],
      on: {
        NEXT: 'layouting'
      }
    },
    layouting: {
      entry: ['runLayout'],
      always: 'idle',
      on: {
        NEXT: 'idle'
      }
    },
    idle: {
      on: {
        NODE_ADDED: { target: 'configuringElementMenu', cond: 'isValidElement' },
        EDGE_ADDED: { target: 'configuringElementMenu', cond: 'isValidElement' },
        EDGE_CONNECTION_COMPLETE: { actions: ['referenceCompoundProxyNode'] },
        NODE_TAPPED: { target: 'clicked', cond: 'isValidElement' },
        EDGE_TAPPED: { target: 'emittingClick', cond: 'isValidElement' },
        NODE_DOUBLE_TAPPED: { target: 'emittingDoubleClick', cond: 'isValidElement' },
        EDGE_DOUBLE_TAPPED: { target: 'emittingDoubleClick', cond: 'isValidElement' },
        REMOVE_NODE: 'idle',
        NODE_EXPANDED: 'layouting',
        NODE_COLLAPSED: 'layouting',
        RUN_LAYOUT: 'layouting',
        // DRAG: 'dragging'
      }
    },
    configuringElementMenu: {
      entry: ['configureElementMenu'],
      always: 'emittingAdd',
      on: {
        NEXT: 'emittingAdd'
      }
    },
    clicked: {
      after: {
        10000: 'emittingClick'
      },
      on: {
        NODE_TAPPED: 'emittingDoubleClick'
      }
    },
    emittingClick: {
      entry: ['emitClick'],
      always: 'idle',
      on: {
        NEXT: 'idle'
      },
    },
    emittingDoubleClick: {
      entry: ['emitDoubleClick'],
      always: 'idle',
      on: {
        NEXT: 'idle'
      }
    },
    emittingAdd: {
      entry: ['emitAdd'],
      always: 'idle',
      on: {
        NEXT: 'idle'
      }
    },
    // dragging: {
    //   on: {
    //     NODE_FREED: 'idle'
    //   }
    // }
  },
}, options)