| | |
| | | * |
| | | */ |
| | | |
| | | |
| | | |
| | | 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); |
| | | } |
| | | |
| | | |
| | | } |
| | | }; |
| | | }); |