Skip to content

Commit

Permalink
Merge pull request #63 from wangyira/master
Browse files Browse the repository at this point in the history 
fixes #62 - allowing user to add arrow description for all 13 example workflows
  • Loading branch information
Amanda Wang authored Mar 25, 2021
2 parents 890695f + 26773f5 commit 44e294d
Show file tree
Hide file tree
Showing 18 changed files with 327 additions and 314 deletions.
482 changes: 246 additions & 236 deletions development/asset.js
View file

Large diffs are not rendered by default.

96 changes: 48 additions & 48 deletions development/edges.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,35 +19,35 @@ var selectedEdge = null;
canvas coordinates go from left to right from up to down
*/
function findDirection (obj1, obj2) {
if(obj1===null || obj2 ===null) {
function findDirection(obj1, obj2) {
if (obj1 === null || obj2 === null) {
return null;
}

var center1 = [(obj1.endX + obj1.startX)/2, (obj1.endY + obj1.startY)/2];
var center2 = [(obj2.endX + obj2.startX)/2, (obj2.endY + obj2.startY)/2];
var center1 = [(obj1.endX + obj1.startX) / 2, (obj1.endY + obj1.startY) / 2];
var center2 = [(obj2.endX + obj2.startX) / 2, (obj2.endY + obj2.startY) / 2];

var displacement = [center2[0] - center1[0], center2[1] - center1[1]];

//console.log(displacement[0]);
//console.log(displacement[1]);
if (displacement[0] > 0) { // if east of
if (displacement[1] > 0) { //if south of
if(displacement[0] - displacement[1] > 0) { //if more east than south
if (displacement[0] - displacement[1] > 0) { //if more east than south
return "E";
} else { // if more South than east
return "S";
return "S";
}
} else { //if north of
if(displacement[0] + displacement[1] > 0) {
if (displacement[0] + displacement[1] > 0) {
return "E";
} else {
return "N";
}
}
} else { //if west of
if (displacement[1] > 0) { //if north of
if(displacement[0] + displacement[1] < 0) {
if (displacement[0] + displacement[1] < 0) {
return "W";
} else {
return "S";
Expand All @@ -72,7 +72,7 @@ function findDirection (obj1, obj2) {
false otherwise
*/
function drawLine (x1 , y1 , x2, y2, ctx, e, isSelected, selectedEdge) {
function drawLine(x1, y1, x2, y2, ctx, e, isSelected, selectedEdge) {
if (isSelected) {
ctx.strokeStyle = "red";
ctx.fillStyle = "red";
Expand All @@ -86,25 +86,25 @@ function drawLine (x1 , y1 , x2, y2, ctx, e, isSelected, selectedEdge) {
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
var linePath = new Path2D();
linePath.moveTo(x1+5,y1-5);
linePath.lineTo(x1-5,y1+5);
linePath.lineTo(x2-5,y2+5);
linePath.lineTo(x2+5,y2-5);
linePath.lineTo(x1+5,y1-5);
linePath.moveTo(x1 + 5, y1 - 5);
linePath.lineTo(x1 - 5, y1 + 5);
linePath.lineTo(x2 - 5, y2 + 5);
linePath.lineTo(x2 + 5, y2 - 5);
linePath.lineTo(x1 + 5, y1 - 5);

if (e != null) {
var rect = canvasElement.getBoundingClientRect();
var x = e.clientX - rect.left;
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
if (ctx.isPointInPath(linePath,x,y)) {
if (ctx.isPointInPath(linePath, x, y)) {
arrowTable.style.display = "block";
arrowInstruction.style.display = "block";

var edgeIdx;
for(var z=0; z<globalJSON.edges.length; z++){
if(globalJSON.edges[z][0] === selectedEdge[0] && globalJSON.edges[z][1] === selectedEdge[1]){
edgeIdx = z;
break;
for (var z = 0; z < globalJSON.edges.length; z++) {
if (globalJSON.edges[z][0] === selectedEdge[0] && globalJSON.edges[z][1] === selectedEdge[1]) {
edgeIdx = z;
break;
}
}

Expand Down Expand Up @@ -155,53 +155,53 @@ function drawEdge(obj1, obj2, e) {
} else {
return;
}
var coordsFrom = getCoords (obj1, direction); //coords from obj1
var coordsFrom = getCoords(obj1, direction); //coords from obj1
var coordsTo = getCoords(obj2, toSide);//coords to obj2
var isSelected = selectedEdge != null && selectedEdge[0] == obj1.id && selectedEdge[1] == obj2.id;
//step 2

var arrowPath = new Path2D();
if( toSide == "W" ) {
if (drawLine (coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x - 10) / currentScale, coordsTo.y / currentScale, ctx, e, isSelected, [obj1.id,obj2.id])) {
selectedEdge = [obj1.id,obj2.id];
if (toSide == "W") {
if (drawLine(coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x - 10) / currentScale, coordsTo.y / currentScale, ctx, e, isSelected, [obj1.id, obj2.id])) {
selectedEdge = [obj1.id, obj2.id];
}
arrowPath.moveTo(coordsTo.x/currentScale, coordsTo.y/currentScale);
arrowPath.lineTo((coordsTo.x - 10)/currentScale, (coordsTo.y - 10)/currentScale);
arrowPath.lineTo((coordsTo.x - 10)/currentScale, (coordsTo.y + 10)/currentScale);
} else if( toSide == "N" ) {
if (drawLine (coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x) / currentScale, (coordsTo.y - 10) / currentScale, ctx, e, isSelected, [obj1.id,obj2.id])) {
selectedEdge = [obj1.id,obj2.id];
arrowPath.moveTo(coordsTo.x / currentScale, coordsTo.y / currentScale);
arrowPath.lineTo((coordsTo.x - 10) / currentScale, (coordsTo.y - 10) / currentScale);
arrowPath.lineTo((coordsTo.x - 10) / currentScale, (coordsTo.y + 10) / currentScale);
} else if (toSide == "N") {
if (drawLine(coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x) / currentScale, (coordsTo.y - 10) / currentScale, ctx, e, isSelected, [obj1.id, obj2.id])) {
selectedEdge = [obj1.id, obj2.id];
}
arrowPath.moveTo(coordsTo.x/currentScale, coordsTo.y/currentScale);
arrowPath.lineTo((coordsTo.x - 10)/currentScale, (coordsTo.y - 10)/currentScale);
arrowPath.lineTo((coordsTo.x + 10)/currentScale, (coordsTo.y - 10)/currentScale);
} else if( toSide == "E" ) {
if (drawLine (coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x + 10) / currentScale, coordsTo.y / currentScale, ctx, e, isSelected, [obj1.id,obj2.id])) {
selectedEdge = [obj1.id,obj2.id];
arrowPath.moveTo(coordsTo.x / currentScale, coordsTo.y / currentScale);
arrowPath.lineTo((coordsTo.x - 10) / currentScale, (coordsTo.y - 10) / currentScale);
arrowPath.lineTo((coordsTo.x + 10) / currentScale, (coordsTo.y - 10) / currentScale);
} else if (toSide == "E") {
if (drawLine(coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x + 10) / currentScale, coordsTo.y / currentScale, ctx, e, isSelected, [obj1.id, obj2.id])) {
selectedEdge = [obj1.id, obj2.id];
}
arrowPath.moveTo(coordsTo.x/currentScale, coordsTo.y/currentScale);
arrowPath.lineTo((coordsTo.x + 10)/currentScale, (coordsTo.y - 10)/currentScale);
arrowPath.lineTo((coordsTo.x + 10)/currentScale, (coordsTo.y + 10)/currentScale);
arrowPath.moveTo(coordsTo.x / currentScale, coordsTo.y / currentScale);
arrowPath.lineTo((coordsTo.x + 10) / currentScale, (coordsTo.y - 10) / currentScale);
arrowPath.lineTo((coordsTo.x + 10) / currentScale, (coordsTo.y + 10) / currentScale);
} else { //south
if (drawLine (coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x) / currentScale, (coordsTo.y + 10) / currentScale, ctx, e, isSelected, [obj1.id,obj2.id])) {
selectedEdge = [obj1.id,obj2.id];
if (drawLine(coordsFrom.x / currentScale, coordsFrom.y / currentScale, (coordsTo.x) / currentScale, (coordsTo.y + 10) / currentScale, ctx, e, isSelected, [obj1.id, obj2.id])) {
selectedEdge = [obj1.id, obj2.id];
}
arrowPath.moveTo(coordsTo.x/currentScale, coordsTo.y/currentScale);
arrowPath.lineTo((coordsTo.x - 10)/currentScale, (coordsTo.y + 10)/currentScale);
arrowPath.lineTo((coordsTo.x + 10)/currentScale, (coordsTo.y + 10)/currentScale);
arrowPath.moveTo(coordsTo.x / currentScale, coordsTo.y / currentScale);
arrowPath.lineTo((coordsTo.x - 10) / currentScale, (coordsTo.y + 10) / currentScale);
arrowPath.lineTo((coordsTo.x + 10) / currentScale, (coordsTo.y + 10) / currentScale);
}
ctx.fill(arrowPath);

} catch(err) {
console.log("Could not draw edge : " + err.message);
} catch (err) {
console.log("Could not draw edge : between ", obj1, " and ", obj2, err.message, err);
}
}

/*
gets the coordinates of element's direction
*/
function getCoords (obj, direction) {
var coords = {"x" : "", "y" : ""};
function getCoords(obj, direction) {
var coords = { "x": "", "y": "" };
if (direction === "N") {
coords.x = (obj.startX + obj.endX) / 2;
coords.y = (obj.startY);
Expand Down
12 changes: 7 additions & 5 deletions development/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
<script type="text/javascript" src="sketches/ex5.js"></script>
<script type="text/javascript" src="sketches/ex6.js"></script>
<script type="text/javascript" src="sketches/ex7.js"></script>
<script type="text/javascript" src="sketches/ex8.js"></script>
<script type="text/javascript" src="sketches/ex9.js"></script>
<script type="text/javascript" src="sketches/ex10.js"></script>
<script type="text/javascript" src="sketches/ex11.js"></script>
Expand All @@ -85,14 +86,15 @@
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card center-align-tabs-content" id="myNavbar">
<a href="https://www.asset-project.info/index.html" target="_blank" class="w3-bar-item w3-button" title="About the ASSET Project">
<a href="https://www.asset-project.info/index.html" target="_blank" class="w3-bar-item w3-button"
title="About the ASSET Project">
<img src="images/asset.png" class="asset-logo-height" alt="ASSET LOGO" />
</a>
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<!-- <a href="#" class="w3-bar-item w3-button">Back to ASSET</a> -->
<a href="about.html" target="_blank" class="w3-bar-item w3-button"> About</a>
<a href="tutorial.html" target="_blank" class="w3-bar-item w3-button"> Tutorial</a>
<!-- <a href="#" class="w3-bar-item w3-button">Back to ASSET</a> -->
<a href="about.html" target="_blank" class="w3-bar-item w3-button"> About</a>
<a href="tutorial.html" target="_blank" class="w3-bar-item w3-button"> Tutorial</a>
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->

Expand Down Expand Up @@ -138,4 +140,4 @@
</script>
</body>

</html>
</html>
2 changes: 1 addition & 1 deletion development/sketches/ex10.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 44e294d

Please sign in to comment.