Skip to content

Commit

Permalink
Reverted connector symbols to squares and connection arrows to right …
Browse files Browse the repository at this point in the history 
…angles
  • Loading branch information
@tadkollar
tadkollar committed Jun 8, 2020
1 parent 91665f4 commit fbafa28
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 33 deletions.
5 changes: 4 additions & 1 deletion openmdao/visualization/n2_viewer/index.html
View file
Expand Up @@ -115,9 +115,12 @@
<clipPath id="solverTreeClip">
<rect id="solver-clip-rect" x="0" y="0" width="1200" height="600" />
</clipPath>
<g id='matrix-connector' width='10' height='10'>
<g id='matrix-connector-arrow' width='10' height='10'>
<path d='M0,3 h2 q5,0 5,5 h1 l-3,2 l-3,-2 h1 q0,-1 -1,-1 h-2 z'></path>
</g>
<g id='matrix-connector-square' width='10' height='10'>
<rect x='2' y='2' width='6' height='6'></rect>
</g>
</defs>
<g id='tree' clip-path='url(#partitionTreeClip)'></g>
<g id='highlight-bar'></g>
Expand Down
47 changes: 39 additions & 8 deletions openmdao/visualization/n2_viewer/src/N2Arrow.js
View file
Expand Up @@ -24,6 +24,7 @@ class N2Arrow {
this.elementsGrp = n2Groups.elements;
this.nodeSize = nodeSize;
this.attribs = attribs;
this._genPath = this._angledPath;
}

get offsetAbsX() {
Expand Down Expand Up @@ -72,8 +73,8 @@ class N2BentArrow extends N2Arrow {

this.offsetX = (this.start.col < this.end.col) ? offsetAbsX : -offsetAbsX; // Left-to-Right : Right-to-Left
this.pts.start.x = this.nodeSize.width * this.start.col + this.nodeSize.width * .5 + this.offsetX;
// this.pts.mid.x = this.nodeSize.width * this.middle.col + this.nodeSize.width * .5;
this.pts.mid.x = (this.offsetX > 0)? this.nodeSize.width * this.middle.col : this.nodeSize.width * (this.middle.col + 1);
this.pts.mid.x = this.nodeSize.width * this.middle.col + this.nodeSize.width * .5;
// this.pts.mid.x = (this.offsetX > 0)? this.nodeSize.width * this.middle.col : this.nodeSize.width * (this.middle.col + 1);
this.pts.end.x = this.nodeSize.width * this.end.col + this.nodeSize.width * .5;

let offsetY = (this.start.row < this.end.row) ? -offsetAbsY : offsetAbsY; // Down : Up
Expand All @@ -82,21 +83,51 @@ class N2BentArrow extends N2Arrow {
this.pts.end.y = this.nodeSize.height * this.end.row + this.nodeSize.height * .5 + offsetY;
}

/** Use SVG to draw the line segments and an arrow at the end-point. */
draw() {
/** Create a path string with a quadratic curve at the bend. */
_curvedPath() {
const dir = (this.offsetX > 0)? 1 : -1;
const s = this.nodeSize.width * .5 * dir;

return "M" + this.pts.start.x + " " + this.pts.start.y +
" L" + this.pts.mid.x + " " + this.pts.mid.y +
` q${s} 0 ${s} ${s}` +
" L" + this.pts.end.x + " " + this.pts.end.y;
}

/** Generate a path with a 90-degree angle at the bend. */
_angledPath() {
return "M" + this.pts.start.x + " " + this.pts.start.y +
" L" + this.pts.mid.x + " " + this.pts.mid.y +
" L" + this.pts.end.x + " " + this.pts.end.y;
}

/** Use SVG to draw the line segments and an arrow at the end-point. */
draw() {
this.path = this.arrowsGrp.insert("path")
.attr("class", "n2_hover_elements")
.attr("marker-end", "url(#arrow)")
.attr("d", "M" + this.pts.start.x + " " + this.pts.start.y +
" L" + this.pts.mid.x + " " + this.pts.mid.y +
` q${s} 0 ${s} ${s}` +
" L" + this.pts.end.x + " " + this.pts.end.y)
.attr("d", this._genPath())
.attr("fill", "none")
.style("stroke-width", this.width)
.style("stroke", this.color);

this.dotsGrp.append("circle")
.attr("class", "n2_hover_elements")
.attr("cx", this.pts.mid.x)
.attr("cy", this.pts.mid.y)
.attr("r", this.width * 1.0)
.style("stroke-width", 0)
.style("fill-opacity", 1)
.style("fill", N2Style.color.connection);

this.dotsGrp.append("circle")
.attr("class", "n2_hover_elements")
.attr("cx", this.pts.mid.x)
.attr("cy", this.pts.mid.y)
.attr("r", this.width * 1.0)
.style("stroke-width", 0)
.style("fill-opacity", .75)
.style("fill", this.color);
}
}

Expand Down
23 changes: 0 additions & 23 deletions openmdao/visualization/n2_viewer/src/N2Matrix.js
View file
Expand Up @@ -307,26 +307,6 @@ class N2Matrix {
}
}

/**
* Draw a rectangle at the specified locate to bring attention to
* a variable name.
* @param {Number} x Upper-left corner X-coordinate in px.
* @param {Number} y Upper-left corner Y-coordinate in px.
* @param {Number} width Rectangle width in px.
* @param {Number} height Rectangle height in px.
* @param {string} fill Fill color.
*/
highlight(x, y, width, height, fill) {
this.n2Groups.highlights.insert("rect")
.attr("class", "n2_hover_elements")
.attr("y", y)
.attr("x", x)
.attr("width", width)
.attr("height", height)
.attr("fill", fill)
.attr("fill-opacity", "1");
}

/**
* Create an SVG group for each visible element, and have the element
* render its shape in it. Move the groups around to their correct
Expand Down Expand Up @@ -810,9 +790,6 @@ class N2Matrix {
}
}

let leftTextWidthR = this.layout.visibleNodes[cell.row].nameWidthPx,
leftTextWidthC = this.layout.visibleNodes[cell.col].nameWidthPx;

cell.highlight('source', 'input');
cell.highlight('target', 'output');
}
Expand Down
2 changes: 1 addition & 1 deletion openmdao/visualization/n2_viewer/src/N2MatrixCell.js
View file
Expand Up @@ -225,7 +225,7 @@ class N2Connector extends N2CellRenderer {
.style("fill", this.color)
.attr("x", -5)
.attr("y", -5)
.attr("xlink:href", "#matrix-connector")
.attr("xlink:href", "#matrix-connector-square")

return this.update(svgGroup, dims, d3Elem);
}
Expand Down

0 comments on commit fbafa28

Please sign in to comment.