From c7b44679c12e9b796ef1f97f7ba6bfa58f7bfbe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Westr=C3=B6m?= Date: Thu, 27 Nov 2014 09:00:25 +0100 Subject: [PATCH 1/2] Added shapes Added UTF-8 tag to test webpage Added tests for shapes on test webpage Added odd shape Added circle shape Modified diamond shape to always use right angles --- src/main.js | 40 ++++++++++++++++++++++++++++++++++------ test/web.html | 12 ++++++++++++ 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/src/main.js b/src/main.js index 512ffc62d2..8396fe912d 100644 --- a/src/main.js +++ b/src/main.js @@ -73,7 +73,10 @@ var addVertices = function (vert, g) { _shape = 'question'; break; case 'odd': - _shape = 'question'; + _shape = 'rect_left_inv_arrow'; + break; + case 'circle': + _shape = 'circle'; break; } @@ -180,12 +183,13 @@ var draw = function (text, id) { // Add custom shape for rhombus type of boc (decision) render.shapes().question = function (parent, bbox, node) { var w = bbox.width, - h = bbox.height * 3, + h = bbox.height, + s = (w + h) * 0.8, points = [ - {x: w / 2, y: 0}, - {x: w, y: -h / 2}, - {x: w / 2, y: -h}, - {x: 0, y: -h / 2} + {x: s / 2, y: 0}, + {x: s, y: -s / 2}, + {x: s / 2, y: -s}, + {x: 0, y: -s / 2} ]; shapeSvg = parent.insert("polygon", ":first-child") .attr("points", points.map(function (d) { @@ -195,6 +199,30 @@ var draw = function (text, id) { .style("stroke", "#333") .attr("rx", 5) .attr("ry", 5) + .attr("transform", "translate(" + (-s / 2) + "," + (s * 2 / 4) + ")"); + node.intersect = function (point) { + return dagreD3.intersect.polygon(node, points, point); + }; + return shapeSvg; + }; + + // Add custom shape for box with inverted arrow on left side + render.shapes().rect_left_inv_arrow = function (parent, bbox, node) { + var w = bbox.width, + h = bbox.height, + points = [ + {x: -h/2, y: 0}, + {x: w, y: 0}, + {x: w, y: -h}, + {x: -h/2, y: -h}, + {x: 0, y: -h/2}, + ]; + shapeSvg = parent.insert("polygon", ":first-child") + .attr("points", points.map(function (d) { + return d.x + "," + d.y; + }).join(" ")) + .style("fill", "#fff") + .style("stroke", "#333") .attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")"); node.intersect = function (point) { return dagreD3.intersect.polygon(node, points, point); diff --git a/test/web.html b/test/web.html index 926ad6bb7d..6f92dcdb08 100644 --- a/test/web.html +++ b/test/web.html @@ -1,6 +1,7 @@ +