Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scion/5.0.4/scxml.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scion/5.0.4/schviz.js"></script>
</head>
<body>
    <div id="viz1"></div>
    <script>
let doc1 = `
<scxml 
    datamodel="ecmascript"
    xmlns="http://www.w3.org/2005/07/scxml"
    version="1.0">
    <parallel id="p">
        <state id="1">
        <invoke id="session_1">
            <content>
            <scxml 
              datamodel="ecmascript"
              xmlns="http://www.w3.org/2005/07/scxml"
              version="1.0">
                <state id="session-1-foo">
                  <onentry>
                    <log label="here1"/>
                    <send event="ping-from-1" delay="2s" target="#_session_2"/>
                  </onentry>
                  <transition event="ping-from-2" target="session-1-bar"/>
                </state>
                <state id="session-1-bar">
                  <onentry>
                    <log label="here3"/>
                    <send event="pong-from-1" delay="2s"  target="#_session_2"/>
                  </onentry>    
                  <transition event="pong-from-2" target="session-1-foo"/>    
                </state>              
            </scxml>
          </content>
        </invoke>
      </state>
      <state id="2">
        <invoke id="session_2">
            <content>
            <scxml 
              datamodel="ecmascript"
              xmlns="http://www.w3.org/2005/07/scxml"
              version="1.0">
                <state id="session-2-foo">
                  <onentry>
                    <log label="here2"/>
                    <send event="ping-from-2" delay="2s" target="#_session_1"/>
                  </onentry>
                  <transition event="ping-from-1" target="session-2-bar"/>
                </state>
                <state id="session-2-bar">
                  <onentry>
                    <log label="here4"/>
                    <send event="pong-from-2" delay="2s"  target="#_session_1"/>
                  </onentry>    
                  <transition event="pong-from-1" target="session-2-foo"/>    
                </state>              
            </scxml>
          </content>
        </invoke>      
      </state>
    </parallel>
</scxml>
`
scion.scxml.documentStringToModel(null, doc1,function(err,model){
  if(err) throw err;
  model.prepare(function(err, fnModel) {
    if(err) throw err;
    //instantiate the interpreter
    let sc1 = new scion.core.Statechart(fnModel);
    let app = ReactDOM.render(
       React.createElement(scion.schviz, { 
         scxmlDocumentString: doc1
       }),
       document.querySelector('#viz1')
    );
        let allInterpreters = []
    handle(sc1);
    sc1.on('onInvokedSessionInitialized', function(invokedInterpreter){
      invokedInterpreter._scriptingContext = sc1._scriptingContext; //FIXME: workaround for bug in inter-session communication: https://gitlab.com/scion-scxml/scion/issues/3
      handle(invokedInterpreter)
    });
    
    function handle(interpreter){
        allInterpreters.push(interpreter);
        interpreter.on('onBigStepEnd',() => {
        app.setState({
            configuration : allInterpreters.map( int => int.getConfiguration() ).reduce( (a,b) => a.concat(b),[])
        });
            })
    
    }
        sc1.start();    
    
  });
})
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jbeard4pro
0viewers