WorkflowAnalysis/index.html at master · BaptisteHiggs/WorkflowAnalysis · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

<!--
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
<body>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="white" stroke-width="3" fill=#BBBBBB />
</svg>
<div>
<img src="building.png">
</div>

<div id="mydiv">
  <!--Include a header DIV with the same name as the draggable DIV, followed by "header":
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>

</body>
-->


<!-- THIS IS THE STUFF SAVED FOR THE dragTest.html FILE -->


<!DOCTYPE html>
<html>
<style>
@font-face {
	font-family: 'BlenderBold';
    src: url(Blender-Bold.ttf) format("truetype");
}

@font-face {
	font-family: 'BlenderReg';
    src: url(Blender-Book.ttf) format("truetype");
}

#mydiv {
    position: absolute;
    z-index: 9;
    text-align: center;
}

body {
	color: #FFFFFF;
    background: url(dotgrid.png)
}

circle:hover {
	opacity: 0.5;
}

</style>
<body>

<h1>Workflow Analysis</h1>

<p>Very early stages of workflow analysis tool</p>

<svg class='circle' height=100% width=100%>
  <circle id="circle" cx="50" cy="50" r="40" stroke="white" stroke-width="3" fill=#BBBBBB />
</svg>

<script>
//Make the DIV element draggagle:

dragElement(document.getElementById("circle"));

function dragElement(elmnt) {
  elmnt.onmousedown = dragMouseDown;
  /*
  alert("hey")
  var elmnt = circleClass[0];
  document.onmousedown = elementDecide;

  function elementDecide(e) {
    e = e || window.event;

	// Save current mouse location
	var currentMouseX = e.clientX;
	var currentMouseY = e.clientY;
	alert()

    // Decide which circle is being selected
	for (i = 0; i < circleClass.length; i++) {
	  elmnt = circleClass[i]
	  var distanceX = (elmnt.getAttribute("cx") - currentMouseX)*(elmnt.getAttribute("cx") - currentMouseX)
	  var distanceY = (elmnt.getAttribute("cy") - currentMouseY)*(elmnt.getAttribute("cy") - currentMouseY)
	  if (distanceX + distanceY < 1601) {
	    dragMouseDown;
		break;
	  }
	}
  }
  */
  function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    // set the element's new position:
	/*
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	*/
	elmnt.setAttribute("cx", e.clientX - 10)
	elmnt.setAttribute("cy", e.clientY - 110)
  }

  function closeDragElement(e) {
    e = e || window.event;
    /* stop moving when mouse button is released:*/
	/*window.alert((elmnt.attr(cx))*/
	var diameter = elmnt.getAttribute("r")*2;
	if (((e.clientX - 10) % diameter > 0) || ((e.clientY - 110) % diameter > 0)){
		// move to better spot
		elmnt.setAttribute("cx", (Math.round((e.clientX - 10)/diameter)*diameter));
		elmnt.setAttribute("cy", (Math.round((e.clientY - 110)/diameter)*diameter));
	}
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>