FlowJS/index.html at master · DanieLeeuwner/FlowJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
  <title>FlowJS</title>

<style type="text/css">
  #container {
    position: absolute;
    width: 900px;
    height: 600px;
    border: 2px solid black;
  }
</style>

</head>
<body>

  <div id="container"></div>

  <script type="text/javascript" src="dist/flow.js"></script>

  <script type="text/javascript">

    var exportedData = {

    }

    var flo = new Designer({
      container: container,
      scale: 0.8,
      theme: FlowJS.Theme.Dark,
      //import: exportedData,
      callbacks: {
        linkCreated: (e) => { console.log('Link created'); console.log(e); },
        linkDeleted: (e) => { console.log('Link deleted'); console.log(e); },
        nodeSelected: (e) => { console.log('Node selected'); console.log(e); },
        nodeUnselected: (e) => { console.log('Node unselected'); console.log(e); },
        nodeOpened: (e) => { console.log('Node opened'); console.log(e); },
        nodeDeleted: (e) => { console.log('Node deleted'); console.log(e); },
        nodeMoved: (e) => { console.log('Node moved'); console.log(e); },
      },
      validation: {
        linkCreate: validationCallback,
        linkDelete: validationCallback,
        nodeDelete: validationCallback,
      }
    });

    var lastCallback = undefined;

    function validationCallback(e, callback) {
      console.log('validation request');
      console.log(e);

      lastCallback = callback;
    }

    function renderTestNode(inputCount, outputCount) {
      var inputs = [];
      var outputs = [];

      for (var i = 0; i < inputCount; i++) {
        inputs.push(new Connector({
          name: 'I:' + (i + 1)
        }));
      }

      for (var i = 0; i < outputCount; i++) {
        outputs.push(new Connector({
          name: 'O:' + (i + 1)
        }));
      }

      flo.createNode({
        x: 60,
        y: 60,
        name: `Test node`,
        description: `inputs: ${inputCount}, outputs: ${outputCount}`,
        inputs: inputs,
        outputs: outputs
      });

    }

  </script>

</body>
</html>