Skip to content

Commit

Permalink
Add diamond shape
Browse files Browse the repository at this point in the history
  • Loading branch information
cpettitt committed Jan 3, 2015
1 parent ef4ec0d commit dbbe66d
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 3 deletions.
4 changes: 3 additions & 1 deletion demo/shapes.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@

.node rect,
.node circle,
.node ellipse {
.node ellipse,
.node polygon {
stroke: #333;
fill: #fff;
stroke-width: 1.5px;
Expand Down Expand Up @@ -42,6 +43,7 @@ <h1>Dagre D3 Demo: Shapes</h1>
g.setNode("rect", { shape: "rect" });
g.setNode("circle", { shape: "circle" });
g.setNode("ellipse", { shape: "ellipse" });
g.setNode("diamond", { shape: "diamond" });

var svg = d3.select("svg"),
inner = svg.select("g");
Expand Down
28 changes: 26 additions & 2 deletions lib/shapes.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@

var intersectRect = require("./intersect/intersect-rect"),
intersectEllipse = require("./intersect/intersect-ellipse"),
intersectCircle = require("./intersect/intersect-circle");
intersectCircle = require("./intersect/intersect-circle"),
intersectPolygon = require("./intersect/intersect-polygon");

module.exports = {
rect: rect,
ellipse: ellipse,
circle: circle
circle: circle,
diamond: diamond
};

function rect(parent, bbox, node) {
Expand Down Expand Up @@ -55,3 +57,25 @@ function circle(parent, bbox, node) {

return shapeSvg;
}

// Circumscribe an ellipse for the bounding box with a diamond shape. I derived
// the function to calculate the diamond shape from:
// http://mathforum.org/kb/message.jspa?messageID=3750236
function diamond(parent, bbox, node) {
var w = (bbox.width * Math.SQRT2) / 2,
h = (bbox.height * Math.SQRT2) / 2,
points = [
{ x: 0, y: -h },
{ x: -w, y: 0 },
{ x: 0, y: h },
{ x: w, y: 0 }
],
shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function(p) { return p.x + "," + p.y; }).join(" "));

node.intersect = function(p) {
return intersectPolygon(node, points, p);
};

return shapeSvg;
}

0 comments on commit dbbe66d

Please sign in to comment.