- var dx = to_x - from_x;
- var dy = to_y - from_y;
- var len = Math.sqrt(dx * dx + dy * dy);
- dx /= len;
- dy /= len;
- var pos = $(".square-a8").position();
- $("#" + arrow.s1).css({ top: pos.top + from_y + (0.5 * arrow_size) * dy, left: pos.left + from_x + (0.5 * arrow_size) * dx });
- $("#" + arrow.d1).css({ top: pos.top + to_y - (0.5 * arrow_size) * dy, left: pos.left + to_x - (0.5 * arrow_size) * dx });
- $("#" + arrow.s1v).css({ top: pos.top + from_y - 0 * dy, left: pos.left + from_x - 0 * dx });
- $("#" + arrow.d1v).css({ top: pos.top + to_y + 0 * dy, left: pos.left + to_x + 0 * dx });
-
- 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 SVG_NS = "http://www.w3.org/2000/svg";
+ var XHTML_NS = "http://www.w3.org/1999/xhtml";
+ var svg = document.createElementNS(SVG_NS, "svg");
+ svg.setAttribute("width", /** @type{number} */ ($("#board").width()));
+ svg.setAttribute("height", /** @type{number} */ ($("#board").height()));
+ svg.setAttribute("style", "position: absolute");
+ svg.setAttribute("position", "absolute");
+ svg.setAttribute("version", "1.1");
+ svg.setAttribute("class", "c1");
+ svg.setAttribute("xmlns", XHTML_NS);
+
+ 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;