How to use the xstate/lib/graph.getEdges function in xstate

To help you get started, we’ve selected a few xstate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github davidkpiano / xviz / src / xviz.ts View on Github external
})

    this.parent.innerHTML += `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${
      this.bounds.width
    } ${this.bounds.height}" height="100%" width="100%" style="position:absolute;top:0;left:0;">
    ${els.join('\n')}
    </svg>
    `
  }
}

;(window as any).Graph = Graph

console.log(
  utils.getEdges(lightMachine).map(edge =&gt; ({
    source: edge.source.id,
    target: edge.target.id
  }))
)

const g = new Graph(
  {},
  utils.getEdges(lightMachine).map(edge =&gt; ({
    source: edge.source.id,
    target: edge.target.id
  }))
)
g.render()
console.log(g)
github davidkpiano / xviz / client / src / App.tsx View on Github external
},
          node.onEntry.length || node.onExit.length
            ? {
                data: {
                  id: node.id + ':actions',
                  label: entryLabel + exitLabel,
                  parent: node.id
                },
                classes: 'actions'
              }
            : false
        ];
      })
      .reduce((a, b) => a.concat(b), []);

    const edges = utils.getEdges(machine);

    console.log(edges);

    const graphEdges: object[] = edges.map(edge => ({
      data: {
        id: `${edge.source.id}:${edge.target.id}::${edge.event}`,
        source: edge.source.id,
        target: edge.target.id,
        event: edge.event,
        label:
          edge.event +
          (edge.cond
            ? ` [${typeof edge.cond === 'function' ? edge.cond.name : edge.cond.toString()}]`
            : '') +
          (edge.actions.length ? `\n / ${edge.actions.join(', ')}` : '')
      }
github davidkpiano / xviz / src / StateChart.tsx View on Github external
render() {
    const { current, preview, previewEvent, machine } = this.state;

    const edges = getEdges(machine);

    const stateNodes = machine.getStateNodes(current);
    const events = new Set();

    stateNodes.forEach(stateNode => {
      const potentialEvents = Object.keys(stateNode.on);

      potentialEvents.forEach(event => {
        const transitions = stateNode.on[event];

        transitions.forEach(transition => {
          if (transition.target !== undefined) {
            events.add(event);
          }
        });
      });