- if (arrow.connection1) {
- jsPlumb.detach(arrow.connection1);
- }
- if (arrow.connection2) {
- jsPlumb.detach(arrow.connection2);
- }
- if (current_display_line !== null) {
- delete arrow.connection1;
- delete arrow.connection2;
- return;
- }
- arrow.connection1 = jsPlumb.connect({
- source: arrow.s1,
- target: arrow.d1,
- connector:["Straight"],
- cssClass:"c1",
- endpoint:"Blank",
- endpointClass:"c1Endpoint",
- anchor:"Continuous",
- paintStyle:{
- lineWidth:line_width,
- strokeStyle:arrow.fg_color,
- outlineWidth:1,
- outlineColor:"#666",
- opacity:"60%"
- }
- });
- arrow.connection2 = jsPlumb.connect({
- source: arrow.s1v,
- target: arrow.d1v,
- connector:["Straight"],
- cssClass:"vir",
- endpoint:"Blank",
- endpointClass:"c1Endpoint",
- anchor:"Continuous",
- paintStyle:{
- lineWidth:0,
- strokeStyle:arrow.fg_color,
- outlineWidth:0,
- outlineColor:"#666",
- },
- overlays : [
- ["Arrow", {
- cssClass:"l1arrow",
- location:1.0,
- width: arrow_size,
- length: arrow_size,
- paintStyle: {
- lineWidth:line_width,
- strokeStyle:"#000",
- },
- }]
- ]
- });
+ var x1 = from_x;
+ var y1 = from_y;
+ var x2 = to_x;
+ var y2 = to_y;
+
+ // Draw the line.
+ var outline = document.createElementNS(SVG_NS, "path");
+ outline.setAttribute("d", "M " + point_from_start(x1, y1, x2, y2, arrow_size / 2, 0) + " L " + point_from_end(x1, y1, x2, y2, -arrow_size / 2, 0));
+ outline.setAttribute("xmlns", XHTML_NS);
+ outline.setAttribute("stroke", "#666");
+ outline.setAttribute("stroke-width", line_width + 2);
+ outline.setAttribute("fill", "none");
+ svg.appendChild(outline);
+
+ var path = document.createElementNS(SVG_NS, "path");
+ path.setAttribute("d", "M " + point_from_start(x1, y1, x2, y2, arrow_size / 2, 0) + " L " + point_from_end(x1, y1, x2, y2, -arrow_size / 2, 0));
+ path.setAttribute("xmlns", XHTML_NS);
+ path.setAttribute("stroke", arrow.fg_color);
+ path.setAttribute("stroke-width", line_width);
+ path.setAttribute("fill", "none");
+ svg.appendChild(path);
+
+ // Then the arrow head.
+ var head = document.createElementNS(SVG_NS, "path");
+ head.setAttribute("d",
+ "M " + point_from_end(x1, y1, x2, y2, 0, 0) +
+ " L " + point_from_end(x1, y1, x2, y2, -arrow_size, -arrow_size / 2) +
+ " L " + point_from_end(x1, y1, x2, y2, -arrow_size * .623, 0.0) +
+ " L " + point_from_end(x1, y1, x2, y2, -arrow_size, arrow_size / 2) +
+ " L " + point_from_end(x1, y1, x2, y2, 0, 0));
+ head.setAttribute("xmlns", XHTML_NS);
+ head.setAttribute("stroke", "#000");
+ head.setAttribute("stroke-width", "1");
+ head.setAttribute("fill", arrow.fg_color);
+ svg.appendChild(head);
+
+ $(svg).css({ top: pos.top, left: pos.left });
+ document.body.appendChild(svg);
+ arrow.svg = svg;