-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
82 lines (75 loc) · 3.11 KB
/
index.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<title>SVG Editor</title>
<link rel="stylesheet" href="css/diagramEditor.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/jquery.svg.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.svg.min.js"></script>
<script type="text/javascript" src="js/diagramEditor.js"></script>
<script type="text/javascript" src="js/gizmoBehaviors.js"></script>
<script type="text/javascript" src="js/tool.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var controlHTML = "<form id='tools_palette_form' runat='server'>" +
"<div id='tools_palette' style='height:150px;'>" +
"<asp:ImageButton ID='ImageButton1' runat='server' />" +
"<asp:DropDownList ID='DropDownList1' runat='server'/>" +
"<asp:TextBox runat='server'/>" +
"<asp:CheckBox ID='CheckBox1' runat='server' />" +
"<asp:BulletedList ID='BulletedList1' runat='server'/>" +
"</div>" +
"</form>";
controlHTML = "<form id='tools_palette_form' runat='server'>" +
"<div id='tools_palette' style='height:150px;position:relative;bottom: 0px;'>" +
"<input type=image src='svg/move.svg' width='50px'>" +
"<select>" +
"<option value='volvo'>Volvo</option>" +
"<option value='saab'>Saab</option>" +
"<option value='mercedes'>Mercedes</option>" +
"<option value='audi'>Audi</option>" +
"</select>" +
"<input id='postButton' type=button value='sendToServer'>" +
"</div>" +
"</form>";
controlHTML = "";
$("#editor").SVGDiagram({controlHTML: controlHTML});
$("#postButton").click(function() {
//Get diagram json data.
var diagramData = $("#editor").SVGDiagram("save");
//Custom your own json to send to backend.
var yourData = {
youParameter1: "value1",
youParameter2: "value2",
youParameter3: "value3",
diagramData: diagramData
};
$.ajax({
url: 'yourPostUrl',
data: yourData,
success: function(data) {
//data is returend from backend.
}
});
})
$(window).resize(function() {
$("#editor").width($(window).width()).height($(window).height());
$("#editor").SVGDiagram("resize");
})
$("#saveBtn").click(function() {
$("#editor").SVGDiagram("save");
})
$("#loadBtn").click(function() {
$("#editor").SVGDiagram("load", "loadid");
})
})
</script>
</head>
<body>
<div class="testButtonBar"><input type="button" id="saveBtn" value="saveDiagram"/><input type="button" id="loadBtn" value="loadDiagram"/></div>
<div id="editor">
</div>
</body>
</html>