diff --git a/demo/shapes.html b/demo/shapes.html index e7805de7..c2d7a2ee 100644 --- a/demo/shapes.html +++ b/demo/shapes.html @@ -14,7 +14,8 @@ .node rect, .node circle, -.node ellipse { +.node ellipse, +.node polygon { stroke: #333; fill: #fff; stroke-width: 1.5px; @@ -42,6 +43,7 @@

Dagre D3 Demo: Shapes

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"); diff --git a/lib/shapes.js b/lib/shapes.js index 5de7e5f8..556c4e0c 100644 --- a/lib/shapes.js +++ b/lib/shapes.js @@ -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) { @@ -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; +}