RubyGems - method_draw - Versions diffs - 0.0.1 - Mend

method_draw 0.0.1

Files changed (389) hide show

data/vendor/assets/javascripts/method-draw-js/embedapi.html ADDED

@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" >
+<head>
+<title></title>
+</head>
+<body>
+<script type="text/javascript" src="embedapi.js"></script>
+<script type="text/javascript">
+var svgCanvas = null;
+function init_embed() {
+  var frame = document.getElementById('svgedit');
+  svgCanvas = new embedded_svg_edit(frame);
+  // Hide main button, as we will be controlling new/load/save etc from the host document
+  var doc;
+  doc = frame.contentDocument;
+  if (!doc)
+  {
+    doc = frame.contentWindow.document;
+  }
+  var mainButton = doc.getElementById('main_button');
+  mainButton.style.display = 'none';
+}
+function handleSvgData(data, error) {
+  if (error)
+  {
+    alert('error ' + error);
+  }
+  else
+  {
+    alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
+  }
+}
+function loadSvg() {
+  var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/></g></svg>';
+  svgCanvas.setSvgString(svgexample);
+}
+function saveSvg() {
+  svgCanvas.getSvgString()(handleSvgData);
+}
+</script>
+<button onclick="loadSvg();">Load example</button>
+<button onclick="saveSvg();">Save data</button>
+<br/>
+<iframe src="index.html" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>
+</body>
+</html>

data/vendor/assets/javascripts/method-draw-js/extensions/closepath_icons.svg ADDED

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<g id="tool_closepath">
+<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g>
+  <title>Layer 1</title>
+  <path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m121.5,40l-84,106l27,115l166,2l29,-111"/>
+  <line x1="240" y1="136" x2="169.5" y2="74" stroke="#A00" stroke-width="25" fill="none"/>
+  <path stroke="none" fill ="#A00" d="m158,65l31,74l-3,-50l51,-3z"/>
+  <g stroke-width="15" stroke="#00f" fill="#0ff">
+  <circle r="30" cy="41" cx="123"/>
+  <circle r="30" cy="146" cx="40"/>
+  <circle r="30" cy="260" cx="69"/>
+  <circle r="30" cy="260" cx="228"/>
+  <circle r="30" cy="148" cx="260"/>
+  </g>
+ </g>
+</svg>
+</g>
+<g id="tool_openpath">
+<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g>
+  <title>Layer 1</title>
+  <path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
+  <line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
+  <g stroke-width="15" stroke="#00f" fill="#0ff">
+   <circle r="30" cy="41" cx="123"/>
+   <circle r="30" cy="146" cx="40"/>
+   <circle r="30" cy="260" cx="69"/>
+   <circle r="30" cy="260" cx="228"/>
+   <circle r="30" cy="148" cx="260"/>
+  </g>
+  <g  stroke="#A00" stroke-width="15" fill="none">
+   <line x1="168" y1="24" x2="210" y2="150"/>
+   <line x1="210" y1="24" x2="168" y2="150"/>
+  </g>
+ </g>
+</svg>
+</g>
+<g id="svg_eof"/>
+</svg>

data/vendor/assets/javascripts/method-draw-js/extensions/ext-arrows.js ADDED

@@ -0,0 +1,298 @@
+/*
+ * ext-arrows.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+methodDraw.addExtension("Arrows", function(S) {
+		var svgcontent = S.svgcontent,
+			addElem = S.addSvgElementFromJson,
+			nonce = S.nonce,
+			randomize_ids = S.randomize_ids,
+			selElems;
+		svgCanvas.bind('setnonce', setArrowNonce);
+		svgCanvas.bind('unsetnonce', unsetArrowNonce);
+		var lang_list = {
+			"en":[
+				{"id": "arrow_none", "textContent": "No arrow" }
+			],
+			"fr":[
+				{"id": "arrow_none", "textContent": "Sans flèche" }
+			]
+		};
+		var prefix = 'se_arrow_';
+		if (randomize_ids) {
+		  var arrowprefix = prefix + nonce + '_';
+		} else {
+		  var arrowprefix = prefix;
+		}
+		var pathdata = {
+			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 + '_';
+ 			pathdata.fw.id = arrowprefix + 'fw';
+			pathdata.bk.id = arrowprefix + 'bk';
+		}
+		function unsetArrowNonce(window) {
+		    randomize_ids = false;
+		    arrowprefix = prefix;
+ 			pathdata.fw.id = arrowprefix + 'fw';
+			pathdata.bk.id = arrowprefix + 'bk';
+		}
+		function getLinked(elem, attr) {
+			var str = elem.getAttribute(attr);
+			if(!str) return null;
+			var m = str.match(/\(\#(.*)\)/);
+			if(!m || m.length !== 2) {
+				return null;
+			}
+			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 = "end";
+				} else if(start) {
+					val = "start";
+				} else if(mid) {
+					val = "mid";
+					if(mid.indexOf("bk") != -1) {
+						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;
+			}
+			if(!marker) {
+				marker = addElem({
+					"element": "marker",
+					"attr": {
+						"viewBox": "0 0 10 10",
+						"id": id,
+						"refY": 5,
+						"markerUnits": "strokeWidth",
+						"markerWidth": 5,
+						"markerHeight": 5,
+						"orient": "auto",
+						"style": "pointer-events:none" // Currently needed for Opera
+					}
+				});
+				var arrow = addElem({
+					"element": "path",
+					"attr": {
+						"d": data.d,
+						"fill": "#000000"
+					}
+				});
+				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") {
+				type = "mid";
+				dir = "bk";
+			} else if(type == "both") {
+				addMarker("bk", type);
+				svgCanvas.changeSelectedAttribute("marker-start", "url(#" + pathdata.bk.id + ")");
+				type = "end";
+				dir = "fw";
+			} 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() {
+					var attrs = $(this).children().attr(['fill', 'd']);
+					if(attrs.fill === color && attrs.d === cur_d) {
+						// Found another marker with this color and this path
+						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() {
+					var elem = this;
+					$.each(mtypes, function(j, mtype) {
+						if($(elem).attr('marker-' + mtype) === "url(#" + marker.id + ")") {
+							return remove = false;
+						}
+					});
+					if(!remove) return false;
+				});
+				// Not found, so can safely remove
+				if(remove) {
+					$(marker).remove();
+				}
+			});
+		}
+		return {
+			name: "Arrows",
+			context_tools: [{
+				type: "select",
+				panel: "arrow_panel",
+				title: "Select arrow type",
+				id: "arrow_list",
+				options: {
+					none: "No arrow",
+					end: "----&gt;",
+					start: "&lt;----",
+					both: "&lt;---&gt;",
+					mid: "--&gt;--",
+					mid_bk: "--&lt;--"
+				},
+				defval: "none",
+				events: {
+					change: setArrow
+				}
+			}],
+			callback: function() {
+				$('#arrow_panel').hide();
+				// Set ID so it can be translated in locale file
+				$('#arrow_list option')[0].id = 'connector_no_arrow';
+			},
+			addLangData: function(lang) {
+				return {
+					data: lang_list[lang]
+				};
+			},
+			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) {
+						if(opts.selectedElement && !opts.multiselected) {
+							showPanel(true);
+						} else {
+							showPanel(false);
+						}
+					} else {
+						showPanel(false);
+					}
+				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+				if(elem && (
+					elem.getAttribute("marker-start") ||
+					elem.getAttribute("marker-mid") ||
+					elem.getAttribute("marker-end")
+				)) {
+	// 								var start = elem.getAttribute("marker-start");
+	// 								var mid = elem.getAttribute("marker-mid");
+	// 								var end = elem.getAttribute("marker-end");
+					// Has marker, so see if it should match color
+					colorChanged(elem);
+				}
+			}
+		};
+});

data/vendor/assets/javascripts/method-draw-js/extensions/ext-closepath.js ADDED

@@ -0,0 +1,92 @@
+/*
+ * ext-closepath.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Jeff Schiller
+ *
+ */
+// This extension adds a simple button to the contextual panel for paths
+// The button toggles whether the path is open or closed
+methodDraw.addExtension("ClosePath", function(S) {
+		var selElems,
+			updateButton = function(path) {
+				var seglist = path.pathSegList,
+					closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType==1,
+					showbutton = closed ? '#tool_openpath' : '#tool_closepath',
+					hidebutton = closed ? '#tool_closepath' : '#tool_openpath';
+					$(hidebutton).hide();
+					$(showbutton).show();
+			},
+			showPanel = function(on) {
+				$('#closepath_panel').toggle(on);
+				if (on) {
+					var path = selElems[0];
+					if (path) updateButton(path);
+				}
+			},
+			toggleClosed = function() {
+				var path = selElems[0];
+				if (path) {
+					var seglist = path.pathSegList,
+						last = seglist.numberOfItems - 1;
+					// is closed
+					if(seglist.getItem(last).pathSegType == 1) {
+						seglist.removeItem(last);
+					}
+					else {
+						seglist.appendItem(path.createSVGPathSegClosePath());
+					}
+					updateButton(path);
+				}
+			};
+		return {
+			name: "ClosePath",
+			svgicons: "extensions/closepath_icons.svg",
+			buttons: [{
+				id: "tool_openpath",
+				type: "context",
+				panel: "closepath_panel",
+				title: "Open path",
+				events: {
+					'click': function() {
+						toggleClosed();
+					}
+				}
+			},
+			{
+				id: "tool_closepath",
+				type: "context",
+				panel: "closepath_panel",
+				title: "Close path",
+				events: {
+					'click': function() {
+						toggleClosed();
+					}
+				}
+			}],
+			callback: function() {
+				$('#closepath_panel').hide();
+			},
+			selectedChanged: function(opts) {
+				selElems = opts.elems;
+				var i = selElems.length;
+				while(i--) {
+					var elem = selElems[i];
+					if(elem && elem.tagName == 'path') {
+						if(opts.selectedElement && !opts.multiselected) {
+							showPanel(true);
+						} else {
+							showPanel(false);
+						}
+					} else {
+						showPanel(false);
+					}
+				}
+			}
+		};
+});