|  |  | 
 |  |  |  * | 
 |  |  |  */ | 
 |  |  |  | 
 |  |  |   | 
 |  |  |  | 
 |  |  | methodDraw.addExtension("Arrows", function(S) { | 
 |  |  |     var svgcontent = S.svgcontent, | 
 |  |  |       addElem = S.addSvgElementFromJson, | 
 |  |  | 
 |  |  |  | 
 |  |  |     svgCanvas.bind('setnonce', setArrowNonce); | 
 |  |  |     svgCanvas.bind('unsetnonce', unsetArrowNonce); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |     var lang_list = { | 
 |  |  |       "en":[ | 
 |  |  |         {"id": "arrow_none", "textContent": "No arrow" } | 
 |  |  | 
 |  |  |         {"id": "arrow_none", "textContent": "Sans flèche" } | 
 |  |  |       ] | 
 |  |  |     }; | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     var prefix = 'se_arrow_'; | 
 |  |  |     if (randomize_ids) { | 
 |  |  |       var arrowprefix = prefix + nonce + '_'; | 
 |  |  | 
 |  |  |       fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:8,  id: arrowprefix + 'fw'}, | 
 |  |  |       bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:2, id: arrowprefix + 'bk'} | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     function setArrowNonce(window, n) { | 
 |  |  |         randomize_ids = true; | 
 |  |  |         arrowprefix = prefix + n + '_'; | 
 |  |  | 
 |  |  |       } | 
 |  |  |       return S.getElem(m[1]); | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     function showPanel(on) { | 
 |  |  |       $('#arrow_panel').toggle(on); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       if(on) { | 
 |  |  |         var el = selElems[0]; | 
 |  |  |         var end = el.getAttribute("marker-end"); | 
 |  |  |         var start = el.getAttribute("marker-start"); | 
 |  |  |         var mid = el.getAttribute("marker-mid"); | 
 |  |  |         var val; | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         if(end && start) { | 
 |  |  |           val = "both"; | 
 |  |  |         } else if(end) { | 
 |  |  | 
 |  |  |             val = "mid_bk"; | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         if(!start && !mid && !end) { | 
 |  |  |           val = "none"; | 
 |  |  |         } | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         $("#arrow_list").val(val); | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     function resetMarker() { | 
 |  |  |       var el = selElems[0]; | 
 |  |  |       el.removeAttribute("marker-start"); | 
 |  |  |       el.removeAttribute("marker-mid"); | 
 |  |  |       el.removeAttribute("marker-end"); | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     function addMarker(dir, type, id) { | 
 |  |  |       // TODO: Make marker (or use?) per arrow type, since refX can be different | 
 |  |  |       id = id || arrowprefix + dir; | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       var marker = S.getElem(id); | 
 |  |  |  | 
 |  |  |       var data = pathdata[dir]; | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       if(type == "mid") { | 
 |  |  |         data.refx = 5; | 
 |  |  |       } | 
 |  |  | 
 |  |  |         }); | 
 |  |  |         marker.appendChild(arrow); | 
 |  |  |         S.findDefs().appendChild(marker); | 
 |  |  |       }  | 
 |  |  |        | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       marker.setAttribute('refX', data.refx); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       return marker; | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     function setArrow() { | 
 |  |  |       var type = this.value; | 
 |  |  |       resetMarker(); | 
 |  |  |      | 
 |  |  |  | 
 |  |  |       if(type == "none") { | 
 |  |  |         return; | 
 |  |  |       } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |       // Set marker on element | 
 |  |  |       var dir = "fw"; | 
 |  |  |       if(type == "mid_bk") { | 
 |  |  | 
 |  |  |       } else if (type == "start") { | 
 |  |  |         dir = "bk"; | 
 |  |  |       } | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       addMarker(dir, type); | 
 |  |  |       svgCanvas.changeSelectedAttribute("marker-"+type, "url(#" + pathdata[dir].id + ")"); | 
 |  |  |       S.call("changed", selElems); | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     function colorChanged(elem) { | 
 |  |  |       var color = elem.getAttribute('stroke'); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       var mtypes = ['start','mid','end']; | 
 |  |  |       var defs = S.findDefs(); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       $.each(mtypes, function(i, type) { | 
 |  |  |         var marker = getLinked(elem, 'marker-'+type); | 
 |  |  |         if(!marker) return; | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         var cur_color = $(marker).children().attr('fill'); | 
 |  |  |         var cur_d = $(marker).children().attr('d'); | 
 |  |  |         var new_marker = null; | 
 |  |  |         if(cur_color === color) return; | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         var all_markers = $(defs).find('marker'); | 
 |  |  |         // Different color, check if already made | 
 |  |  |         all_markers.each(function() { | 
 |  |  | 
 |  |  |             new_marker = this; | 
 |  |  |           } | 
 |  |  |         }); | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         if(!new_marker) { | 
 |  |  |           // Create a new marker with this color | 
 |  |  |           var last_id = marker.id; | 
 |  |  |           var dir = last_id.indexOf('_fw') !== -1?'fw':'bk'; | 
 |  |  |            | 
 |  |  |  | 
 |  |  |           new_marker = addMarker(dir, type, arrowprefix + dir + all_markers.length); | 
 |  |  |  | 
 |  |  |           $(new_marker).children().attr('fill', color); | 
 |  |  |         } | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         $(elem).attr('marker-'+type, "url(#" + new_marker.id + ")"); | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         // Check if last marker can be removed | 
 |  |  |         var remove = true; | 
 |  |  |         $(S.svgcontent).find('line, polyline, path, polygon').each(function() { | 
 |  |  | 
 |  |  |           }); | 
 |  |  |           if(!remove) return false; | 
 |  |  |         }); | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         // Not found, so can safely remove | 
 |  |  |         if(remove) { | 
 |  |  |           $(marker).remove(); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |       }); | 
 |  |  |        | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |  | 
 |  |  |     return { | 
 |  |  |       name: "Arrows", | 
 |  |  |       context_tools: [{ | 
 |  |  | 
 |  |  |         }; | 
 |  |  |       }, | 
 |  |  |       selectedChanged: function(opts) { | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         // Use this to update the current selected elements | 
 |  |  |         selElems = opts.elems; | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         var i = selElems.length; | 
 |  |  |         var marker_elems = ['line','path','polyline','polygon']; | 
 |  |  |          | 
 |  |  |  | 
 |  |  |         while(i--) { | 
 |  |  |           var elem = selElems[i]; | 
 |  |  |           if(elem && $.inArray(elem.tagName, marker_elems) != -1) { | 
 |  |  | 
 |  |  |           // Has marker, so see if it should match color | 
 |  |  |           colorChanged(elem); | 
 |  |  |         } | 
 |  |  |          | 
 |  |  |  | 
 |  |  |       } | 
 |  |  |     }; | 
 |  |  | }); |