method_draw 0.0.1

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

@@ -0,0 +1,135 @@
+/*
+ * ext-eyedropper.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Jeff Schiller
+ *
+ */
+
+// Dependencies:
+// 1) jQuery
+// 2) history.js
+// 3) svg_editor.js
+// 4) svgcanvas.js
+
+methodDraw.addExtension("eyedropper", function(S) {
+		var svgcontent = S.svgcontent,
+			svgns = "http://www.w3.org/2000/svg",
+			svgdoc = S.svgroot.parentNode.ownerDocument,
+			svgCanvas = methodDraw.canvas,
+			ChangeElementCommand = svgedit.history.ChangeElementCommand,
+			addToHistory = function(cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); },
+			currentStyle = {fillPaint: "red", fillOpacity: 1.0,
+							strokePaint: "black", strokeOpacity: 1.0, 
+							strokeWidth: 5, strokeDashArray: null,
+							opacity: 1.0,
+							strokeLinecap: 'butt',
+							strokeLinejoin: 'miter'
+							};
+		function getStyle(opts) {
+			// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
+			var mode = svgCanvas.getMode();
+			if (mode == "eyedropper") return;
+			var tool = $('#tool_eyedropper');
+
+		}
+		
+		var getPaint = function(color, opac, type) {
+			// update the editor's fill paint
+			var opts = null;
+			if (color.indexOf("url(#") === 0) {
+				var refElem = svgCanvas.getRefElem(color);
+				if(refElem) {
+					refElem = refElem.cloneNode(true);
+				} else {
+					refElem =  $("#" + type + "_color defs *")[0];
+				}
+
+				opts = { alpha: opac };
+				opts[refElem.tagName] = refElem;
+			} 
+			else if (color.indexOf("#") === 0) {
+				opts = {
+					alpha: opac,
+					solidColor: color.substr(1)
+				};
+			}
+			else {
+				opts = {
+					alpha: opac,
+					solidColor: 'none'
+				};
+			}
+			return new $.jGraduate.Paint(opts);
+		};
+		
+		return {
+			name: "eyedropper",
+			svgicons: "extensions/eyedropper-icon.xml",
+			buttons: [{
+				id: "tool_eyedropper",
+				type: "mode",
+				title: "Eye Dropper Tool",
+				position: 8,
+				key: "I",
+				icon: "extensions/eyedropper.png",
+				events: {
+					"click": function() {
+						svgCanvas.setMode("eyedropper");
+					}
+				}
+			}],
+			
+			mouseDown: function(opts) {
+				var mode = svgCanvas.getMode();
+				var e = opts.event;
+				var target = (e.target.id === "svgroot") ? document.getElementById('canvas_background') : e.target;
+				if (mode == "eyedropper" && target) {
+					currentStyle.fillPaint = target.getAttribute("fill") || "white";
+  				currentStyle.fillOpacity = target.getAttribute("fill-opacity") || 1.0;
+  				currentStyle.strokePaint = target.getAttribute("stroke") || 'none';
+  				currentStyle.strokeOpacity = target.getAttribute("stroke-opacity") || 1.0;
+  				currentStyle.strokeWidth = target.getAttribute("stroke-width");
+  				currentStyle.strokeDashArray = target.getAttribute("stroke-dasharray");
+  				currentStyle.strokeLinecap = target.getAttribute("stroke-linecap");
+  				currentStyle.strokeLinejoin = target.getAttribute("stroke-linejoin");
+  				currentStyle.opacity = target.getAttribute("opacity") || 1.0;
+  				opts.selectedElements = opts.selectedElements.filter(Boolean)
+				  if (!opts.selectedElements.length) { //nothing selected, just update colors
+  			    var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill");
+  					var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke");
+  					methodDraw.paintBox.fill.setPaint(fill)
+  					methodDraw.paintBox.stroke.setPaint(stroke)
+  			    return;
+  			  }
+					if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) {
+						var changes = {};
+						var change = function(elem, attrname, newvalue) {
+							changes[attrname] = elem.getAttribute(attrname);
+							elem.setAttribute(attrname, newvalue);
+						};
+						var batchCmd = new S.BatchCommand();
+						opts.selectedElements.forEach(function(element){
+						  if (currentStyle.fillPaint) 		  change(element, "fill", currentStyle.fillPaint);
+  						if (currentStyle.fillOpacity) 		change(element, "fill-opacity", currentStyle.fillOpacity);
+  						if (currentStyle.strokePaint) 		change(element, "stroke", currentStyle.strokePaint);
+  						if (currentStyle.strokeOpacity) 	change(element, "stroke-opacity", currentStyle.strokeOpacity);
+  						if (currentStyle.strokeWidth) 		change(element, "stroke-width", currentStyle.strokeWidth);
+  						if (currentStyle.strokeDashArray) change(element, "stroke-dasharray", currentStyle.strokeDashArray);
+  						if (currentStyle.opacity) 			  change(element, "opacity", currentStyle.opacity);
+  						if (currentStyle.strokeLinecap) 	change(element, "stroke-linecap", currentStyle.strokeLinecap);
+  						if (currentStyle.strokeLinejoin) 	change(element, "stroke-linejoin", currentStyle.strokeLinejoin);
+  						batchCmd.addSubCommand(new ChangeElementCommand(element, changes));
+  						changes = {};
+						});
+						var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill")
+						var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke")
+						methodDraw.paintBox.fill.update(true)
+						methodDraw.paintBox.stroke.update(true)
+						addToHistory(batchCmd);
+					}
+				}
+			}
+		};
+});

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

@@ -0,0 +1,277 @@
+/*
+ * ext-foreignobject.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Jacques Distler 
+ * Copyright(c) 2010 Alexis Deveria 
+ *
+ */
+
+methodDraw.addExtension("foreignObject", function(S) {
+		var svgcontent = S.svgcontent,
+			addElem = S.addSvgElementFromJson,
+			selElems,
+			svgns = "http://www.w3.org/2000/svg",
+			xlinkns = "http://www.w3.org/1999/xlink",
+			xmlns = "http://www.w3.org/XML/1998/namespace",
+			xmlnsns = "http://www.w3.org/2000/xmlns/",
+			se_ns = "http://svg-edit.googlecode.com",
+			htmlns = "http://www.w3.org/1999/xhtml",
+			mathns = "http://www.w3.org/1998/Math/MathML",
+			editingforeign = false,
+			svgdoc = S.svgroot.parentNode.ownerDocument,
+			started,
+			newFO;
+			
+			
+		var properlySourceSizeTextArea = function(){
+			// TODO: remove magic numbers here and get values from CSS
+			var height = $('#svg_source_container').height() - 80;
+			$('#svg_source_textarea').css('height', height);
+		};
+
+		function showPanel(on) {
+			var fc_rules = $('#fc_rules');
+			if(!fc_rules.length) {
+				fc_rules = $('<style id="fc_rules"><\/style>').appendTo('head');
+			} 
+			fc_rules.text(!on?"":" #tool_topath { display: none !important; }");
+			$('#foreignObject_panel').toggle(on);
+		}
+
+		function toggleSourceButtons(on) {
+			$('#tool_source_save, #tool_source_cancel').toggle(!on);
+			$('#foreign_save, #foreign_cancel').toggle(on);
+		}
+		
+			
+		// Function: setForeignString(xmlString, elt)
+		// This function sets the content of element elt to the input XML.
+		//
+		// Parameters:
+		// xmlString - The XML text.
+		// elt - the parent element to append to
+		//
+		// Returns:
+		// This function returns false if the set was unsuccessful, true otherwise.
+		function setForeignString(xmlString) {
+			var elt = selElems[0];
+			try {
+				// convert string into XML document
+				var newDoc = Utils.text2xml('<svg xmlns="'+svgns+'" xmlns:xlink="'+xlinkns+'">'+xmlString+'</svg>');
+				// run it through our sanitizer to remove anything we do not support
+				S.sanitizeSvg(newDoc.documentElement);
+				elt.parentNode.replaceChild(svgdoc.importNode(newDoc.documentElement.firstChild, true), elt);
+				S.call("changed", [elt]);
+				svgCanvas.clearSelection();
+			} catch(e) {
+				console.log(e);
+				return false;
+			}
+	
+			return true;
+		};
+
+		function showForeignEditor() {
+			var elt = selElems[0];
+			if (!elt || editingforeign) return;
+			editingforeign = true;
+			toggleSourceButtons(true);
+			elt.removeAttribute('fill');
+
+			var str = S.svgToString(elt, 0);
+			$('#svg_source_textarea').val(str);
+			$('#svg_source_editor').fadeIn();
+			properlySourceSizeTextArea();
+			$('#svg_source_textarea').focus();
+		}
+		
+		function setAttr(attr, val) {
+			svgCanvas.changeSelectedAttribute(attr, val);
+			S.call("changed", selElems);
+		}
+		
+		
+		return {
+			name: "foreignObject",
+			svgicons: "extensions/foreignobject-icons.xml",
+			buttons: [{
+				id: "tool_foreign",
+				type: "mode",
+				title: "Foreign Object Tool",
+				events: {
+					'click': function() {
+						svgCanvas.setMode('foreign')
+					}
+				}
+			},{
+				id: "edit_foreign",
+				type: "context",
+				panel: "foreignObject_panel",
+				title: "Edit ForeignObject Content",
+				events: {
+					'click': function() {
+						showForeignEditor();
+					}
+				}
+			}],
+			
+			context_tools: [{
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's width",
+				id: "foreign_width",
+				label: "w",
+				size: 3,
+				events: {
+					change: function() {
+						setAttr('width', this.value);
+					}
+				}
+			},{
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's height",
+				id: "foreign_height",
+				label: "h",
+				events: {
+					change: function() {
+						setAttr('height', this.value);
+					}
+				}
+			}, {
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's font size",
+				id: "foreign_font_size",
+				label: "font-size",
+				size: 2,
+				defval: 16,
+				events: {
+					change: function() {
+						setAttr('font-size', this.value);
+					}
+				}
+			}
+			
+			
+			],
+			callback: function() {
+				$('#foreignObject_panel').hide();
+
+				var endChanges = function() {
+					$('#svg_source_editor').hide();
+					editingforeign = false;
+					$('#svg_source_textarea').blur();
+					toggleSourceButtons(false);
+				}
+
+				// TODO: Needs to be done after orig icon loads
+				setTimeout(function() {				
+					// Create source save/cancel buttons
+					var save = $('#tool_source_save').clone()
+						.hide().attr('id', 'foreign_save').unbind()
+						.appendTo("#tool_source_back").click(function() {
+							
+							if (!editingforeign) return;
+
+							if (!setForeignString($('#svg_source_textarea').val())) {
+								$.confirm("Errors found. Revert to original?", function(ok) {
+									if(!ok) return false;
+									endChanges();
+								});
+							} else {
+								endChanges();
+							}
+							// setSelectMode();	
+						});
+						
+					var cancel = $('#tool_source_cancel').clone()
+						.hide().attr('id', 'foreign_cancel').unbind()
+						.appendTo("#tool_source_back").click(function() {
+							endChanges();
+						});
+					
+				}, 3000);
+			},
+			mouseDown: function(opts) {
+				var e = opts.event;
+				
+				if(svgCanvas.getMode() == "foreign") {
+
+					started = true;
+					newFO = S.addSvgElementFromJson({
+						"element": "foreignObject",
+						"attr": {
+							"x": opts.start_x,
+							"y": opts.start_y,
+							"id": S.getNextId(),
+							"font-size": 16, //cur_text.font_size,
+							"width": "48",
+							"height": "20",
+							"style": "pointer-events:inherit"
+						}
+					});
+					var m = svgdoc.createElementNS(mathns, 'math');
+					m.setAttributeNS(xmlnsns, 'xmlns', mathns);
+					m.setAttribute('display', 'inline');
+					var mi = svgdoc.createElementNS(mathns, 'mi');
+					mi.setAttribute('mathvariant', 'normal');
+					mi.textContent = "\u03A6";
+					var mo = svgdoc.createElementNS(mathns, 'mo');
+					mo.textContent = "\u222A";
+					var mi2 = svgdoc.createElementNS(mathns, 'mi');
+					mi2.textContent = "\u2133";
+					m.appendChild(mi);
+					m.appendChild(mo);
+					m.appendChild(mi2);
+					newFO.appendChild(m);
+					return {
+						started: true
+					}
+				}
+			},
+			mouseUp: function(opts) {
+				var e = opts.event;
+				if(svgCanvas.getMode() == "foreign" && started) {
+					var attrs = $(newFO).attr(["width", "height"]);
+					keep = (attrs.width != 0 || attrs.height != 0);
+					svgCanvas.addToSelection([newFO], true);
+
+					return {
+						keep: keep,
+						element: newFO
+					}
+
+				}
+				
+			},
+			selectedChanged: function(opts) {
+				// Use this to update the current selected elements
+				selElems = opts.elems;
+				
+				var i = selElems.length;
+				
+				while(i--) {
+					var elem = selElems[i];
+					if(elem && elem.tagName == "foreignObject") {
+						if(opts.selectedElement && !opts.multiselected) {
+							$('#foreign_font_size').val(elem.getAttribute("font-size"));
+							$('#foreign_width').val(elem.getAttribute("width"));
+							$('#foreign_height').val(elem.getAttribute("height"));
+						
+							showPanel(true);
+						} else {
+							showPanel(false);
+						}
+					} else {
+						showPanel(false);
+					}
+				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+			}
+		};
+});

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

@@ -0,0 +1,186 @@
+/*
+ * ext-grid.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Redou Mine
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+
+// Dependencies:
+// 1) units.js
+// 2) everything else
+
+methodDraw.addExtension("view_grid", function(s) {
+    if (!document.getElementById("canvasGrid")){
+    var svgdoc = document.getElementById("svgcanvas").ownerDocument,
+			svgns = "http://www.w3.org/2000/svg",
+			dims = methodDraw.curConfig.dimensions,
+			svgroot = s.svgroot;
+    var svgCanvas = methodDraw.canvas;
+	var showGrid = false;
+    var assignAttributes = s.assignAttributes;
+    
+    var hcanvas = document.createElement('canvas');
+    $(hcanvas).hide().appendTo('body');
+
+    var canvasgrid = svgdoc.createElementNS(svgns, "g");
+    assignAttributes(canvasgrid, {
+        'id': 'canvasGrid',
+        'width': '100%',
+        'height': '100%',
+        'x': 0,
+        'y': 0,
+        'overflow': 'visible',
+        'display': 'none'
+    });
+    
+    var canvBG = $('#canvas_background');
+    canvBG.after(canvasgrid);
+    
+    
+
+        // grid-pattern
+        var gridPattern = svgdoc.createElementNS(svgns, "pattern");
+        assignAttributes(gridPattern, {
+            'id': 'gridpattern',
+            'patternUnits': 'userSpaceOnUse',
+            'x': 0, //-(value.strokeWidth / 2), // position for strokewidth
+            'y': 0, //-(value.strokeWidth / 2), // position for strokewidth
+            'width': 100,
+            'height': 100
+        });
+        
+        var gridimg = svgdoc.createElementNS(svgns, "image");
+        assignAttributes(gridimg, {
+            'x': 0,
+            'y': 0,
+            'width': 100,
+            'height': 100
+        });
+        
+        gridPattern.appendChild(gridimg);
+        $('#svgroot defs').append(gridPattern);
+
+        // grid-box
+        var gridBox = svgdoc.createElementNS(svgns, "rect");
+        assignAttributes(gridBox, {
+            'width': '100%',
+            'height': '100%',
+            'x': 0,
+            'y': 0,
+            'stroke-width': 0,
+            'stroke': 'none',
+            'fill': 'url(#gridpattern)',
+            'style': 'pointer-events: none; display:visible;'
+        });
+        $('#canvasGrid').append(gridBox);
+        }
+//     });
+
+	function updateGrid(zoom) {
+		// TODO: Try this with <line> elements, then compare performance difference
+	
+		var bgwidth = +canvBG.attr('width');
+		var bgheight = +canvBG.attr('height');
+		
+		var units = svgedit.units.getTypeMap();
+		var unit = units[methodDraw.curConfig.baseUnit]; // 1 = 1px
+		var r_intervals = [.01, .1, 1, 10, 100, 1000];
+	
+		var d = 0;
+		var is_x = (d === 0);
+		var dim = is_x ? 'x' : 'y';
+		var lentype = is_x?'width':'height';
+		var c_elem = svgCanvas.getContentElem();
+		var content_d = c_elem.getAttribute(dim)-0;
+		
+		var hcanv = hcanvas;
+		
+		var u_multi = unit * zoom;
+		
+		// Calculate the main number interval
+		var raw_m = 100 / u_multi;
+		var multi = 1;
+		for(var i = 0; i < r_intervals.length; i++) {
+			var num = r_intervals[i];
+			multi = num;
+			if(raw_m <= num) {
+				break;
+			}
+		}
+		
+		var big_int = multi * u_multi;
+
+		// Set the canvas size to the width of the container
+		hcanv.width = big_int;
+		hcanv.height = big_int;
+		var ctx = hcanv.getContext("2d");
+
+		var ruler_d = 0; 
+		var cur_d = .5;
+		
+		var part = big_int / 10;
+
+		ctx.globalAlpha = 0.2;
+		ctx.strokeStyle = "#000";
+		for(var i = 1; i < 10; i++) {
+			var sub_d = Math.round(part * i) + .5;
+// 					var line_num = (i % 2)?12:10;
+			var line_num = 0;
+			ctx.moveTo(sub_d, big_int);
+			ctx.lineTo(sub_d, line_num);
+			ctx.moveTo(big_int, sub_d);
+			ctx.lineTo(line_num ,sub_d);
+		}
+		ctx.stroke();
+		ctx.beginPath();  
+		ctx.globalAlpha = 0.5;
+		ctx.moveTo(cur_d, big_int);
+		ctx.lineTo(cur_d, 0);
+
+		ctx.moveTo(big_int, cur_d);
+		ctx.lineTo(0, cur_d);
+		ctx.stroke();
+
+		var datauri = hcanv.toDataURL('image/png');
+		gridimg.setAttribute('width', big_int);
+		gridimg.setAttribute('height', big_int);
+		gridimg.parentNode.setAttribute('width', big_int);
+		gridimg.parentNode.setAttribute('height', big_int);
+		svgCanvas.setHref(gridimg, datauri);
+	}
+
+    return {
+        name: "view_grid",
+        zoomChanged: function(zoom) {
+            // update size
+            if(showGrid) updateGrid(zoom);
+        },
+
+        buttons: [{
+            id: "view_grid",
+            type: "menu",
+            after: "tool_wireframe",
+            panel: "view_menu",
+            title: "View Grid",
+            events: {
+                'click': function() {
+                    var gr = !$('#view_grid').hasClass('push_button_pressed');
+                    if (gr) {
+                        methodDraw.curConfig.showGrid = showGrid = true;
+                        $('#view_grid').addClass('push_button_pressed');
+                        $('#canvasGrid').attr('display', 'inline');
+                        updateGrid(svgCanvas.getZoom());
+                    }
+                    else {
+                        methodDraw.curConfig.showGrid = showGrid = false;
+                        $('#view_grid').removeClass('push_button_pressed');
+                        $('#canvasGrid').attr('display', 'none');
+                    }
+                }
+            }
+}]
+        };
+    });