diff --git a/extensions/ext-arrows.js b/extensions/ext-arrows.js index 9ca573f8..42b75312 100644 --- a/extensions/ext-arrows.js +++ b/extensions/ext-arrows.js @@ -16,12 +16,10 @@ $(function() { var lang_list = { "en":[ - {"id": "arrow_none", "textContent": "No arrow" }, - {"id": "arrow_arrow", "textContent": "Arrow" } + {"id": "arrow_none", "textContent": "No arrow" } ], "fr":[ - {"id": "arrow_none", "textContent": "Sans flèche" }, - {"id": "arrow_arrow", "textContent": "Flèche" } + {"id": "arrow_none", "textContent": "Sans flèche" } ] }; @@ -35,18 +33,34 @@ $(function() { } } - function addArrow() { - var defs = S.findDefs(); - var m_id = "se_arrow"; - var marker = getElem(m_id); + function resetMarker() { + var el = selElems[0]; + el.removeAttribute("marker-start"); + el.removeAttribute("marker-mid"); + el.removeAttribute("marker-end"); + } + + function addMarker(id, type) { + // TODO: Make marker (or use?) per arrow type, since refX can be different + var marker = getElem(id); + + var pathdata = { + se_arrow_fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:10}, + se_arrow_bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:0} + } + var data = pathdata[id]; + + if(type == "mid") { + data.refx = 5; + } + if(!marker) { marker = addElem({ "element": "marker", "attr": { "viewBox": "0 0 10 10", - "id": m_id, - "refX": 10, + "id": id, "refY": 5, "markerUnits": "strokeWidth", "markerWidth": 5, @@ -57,39 +71,64 @@ $(function() { var arrow = addElem({ "element": "path", "attr": { - "d": "m0,0l10,5l-10,5l5,-5l-5,-5z", + "d": data.d, "fill": "#000" } }); - marker.appendChild(arrow); - defs.appendChild(marker); - } + S.findDefs().appendChild(marker); + } + + marker.setAttribute('refX', data.refx); - selElems[0].setAttribute("marker-end", "url(#" + m_id + ")"); - } - - function remArrow() { - selElems[0].removeAttribute("marker-end"); } + function setArrow(type) { + resetMarker(); + + if(type == "none") { + return; + } + + var fw_id = "se_arrow_fw"; + var bk_id = "se_arrow_bk"; + + + // Set marker on element + var id = fw_id; + if(type == "mid_bk") { + type = "mid"; + id = bk_id; + } else if(type == "both") { + addMarker(bk_id, type); + selElems[0].setAttribute("marker-start", "url(#" + bk_id + ")"); + type = "end"; + id = fw_id; + } else if (type == "start") { + id = bk_id; + } + + addMarker(id, type); + selElems[0].setAttribute("marker-"+type, "url(#" + id + ")"); + + + + + } // Init code (function() { var conn_tools = $('
\
"').hide().appendTo("#tools_top"); $('#arrow_list').change(function() { - switch ( this.value ) { - case "arrow": - addArrow(); - break; - case "none": - remArrow(); - break; - } + setArrow(this.value); }); }());