VFP.js/test.html at master · bssstudio/VFP.js · 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
89
90
91
92
93
94
95
96
97
<html>

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/box.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

    <script src="js/box.js"></script>

	<script>


    var vfpCanvas0 = {};
    var boxCount = 0;


    function addBox() {

		var	numOfOuts = $('input:radio[name=numOfOut]:checked').val();
    	var hasInput = ($('input:checkbox[name=hasInput]').attr('checked') == "checked");
    	var boxId = "box"+boxCount;

    	vfpCanvas0.addNewBox(boxId,numOfOuts,hasInput,boxId+" title", boxId+" contents");

		boxCount++;
    }


    function serializeBoxes() {

    	var objToSerialize = {};
    	objToSerialize.boxObjs = vfpCanvas0.boxObjs;
    	objToSerialize.connections = vfpCanvas0.connections;

    	var jsonStr = JSON.stringify(objToSerialize);
    	alert(jsonStr);

    }


    $(function() {

    	//function to handle the semantics of adding connections
    	var addFunction = function allowConnection(start,end) {

    		//dummy alert for demo
    		alert("Added connection: "+start+" -> "+end);

    		//check if a connection can be added based
    		//based on the sematics of the app
    		return true;
    	}

    	//function to handle the semantics of removing connections
    	var removeFunction = function allowRemoveConnection(start,end) {

    		//dummy alert for demo
    		alert("Removed connection: "+start+" -> "+end);

    		//check if a connection can be added based
    		//based on the sematics of the app
    		return true;
    	}


    	//initialize the VFP canvas
     	vfpCanvas0 = new vfpCanvas(addFunction,removeFunction);
     	vfpCanvas0.initDraggableBoxes();

    });


    </script>


	<button onClick="addBox();" >Add New Box</button>
	<input type="checkbox" name="hasInput" value="yes" checked> input
	<input type="radio" name="numOfOut"  value="0"> 0 <input type="radio" name="numOfOut"  value="1" checked> 1 <input type="radio" name="numOfOut" value="2" > 2

	<button onClick="serializeBoxes();" >Serialize</button>

	<div id="vfp_root" style="position: absolute; ">
	<canvas id="myCanvasGrid" width="800" height="600"
	style="border:1px solid #000000; position:absolute;">
	</canvas>
	<div style="position: absolute; ">
	<canvas id="myCanvas" width="800" height="600"
	style="border:1px solid #000000; position:absolute;">
	</canvas>
	</div>
	</div>
</html>