sketchily 4.0.0 → 4.0.1

data/vendor/assets/{svg-edit-2.6/extensions/ext-connector.js → javascripts/svg-edit-2.6/extensions/ext-connector.js~}

@@ -299,7 +299,7 @@ svgEditor.addExtension("Connector", function(S) {
 	
 	return {
 		name: "Connector",
-		svgicons: "/assets/images/conn.svg",
+		svgicons: "/assets/svg-edit-2.6/images/conn.svg",
 		buttons: [{
 			id: "mode_connect",
 			type: "mode",

data/vendor/assets/javascripts/svg-edit-2.6/extensions/ext-eyedropper.js

@@ -0,0 +1,109 @@
+/*
+ * ext-eyedropper.js
+ *
+ * Licensed under the MIT License
+ *
+ * Copyright(c) 2010 Jeff Schiller
+ *
+ */
+
+// Dependencies:
+// 1) jQuery
+// 2) history.js
+// 3) svg_editor.js
+// 4) svgcanvas.js
+
+svgEditor.addExtension("eyedropper", function(S) {
+		var svgcontent = S.svgcontent,
+			svgns = "http://www.w3.org/2000/svg",
+			svgdoc = S.svgroot.parentNode.ownerDocument,
+			svgCanvas = svgEditor.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 elem = null;
+			var tool = $('#tool_eyedropper');
+			// enable-eye-dropper if one element is selected
+			if (!opts.multiselected && opts.elems[0] &&
+				$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1) 
+			{
+				elem = opts.elems[0];
+				tool.removeClass('disabled');
+				// grab the current style
+				currentStyle.fillPaint = elem.getAttribute("fill") || "black";
+				currentStyle.fillOpacity = elem.getAttribute("fill-opacity") || 1.0;
+				currentStyle.strokePaint = elem.getAttribute("stroke");
+				currentStyle.strokeOpacity = elem.getAttribute("stroke-opacity") || 1.0;
+				currentStyle.strokeWidth = elem.getAttribute("stroke-width");
+				currentStyle.strokeDashArray = elem.getAttribute("stroke-dasharray");
+				currentStyle.strokeLinecap = elem.getAttribute("stroke-linecap");
+				currentStyle.strokeLinejoin = elem.getAttribute("stroke-linejoin");
+				currentStyle.opacity = elem.getAttribute("opacity") || 1.0;
+			}
+			// disable eye-dropper tool
+			else {
+				tool.addClass('disabled');
+			}
+
+		}
+		
+		return {
+			name: "eyedropper",
+			svgicons: "/assets/svg-edit-2.6/extensions/eyedropper-icon.xml",
+			buttons: [{
+				id: "tool_eyedropper",
+				type: "mode",
+				title: "Eye Dropper Tool",
+				key: "I",
+				events: {
+					"click": function() {
+						svgCanvas.setMode("eyedropper");
+					}
+				}
+			}],
+			
+			// if we have selected an element, grab its paint and enable the eye dropper button
+			selectedChanged: getStyle,
+			elementChanged: getStyle,
+			
+			mouseDown: function(opts) {
+				var mode = svgCanvas.getMode();
+				if (mode == "eyedropper") {
+					var e = opts.event;
+					var target = e.target;
+					if ($.inArray(target.nodeName, ['svg', 'g', 'use']) == -1) {
+						var changes = {};
+
+						var change = function(elem, attrname, newvalue) {
+							changes[attrname] = elem.getAttribute(attrname);
+							elem.setAttribute(attrname, newvalue);
+						};
+						
+						if (currentStyle.fillPaint) 		change(target, "fill", currentStyle.fillPaint);
+						if (currentStyle.fillOpacity) 		change(target, "fill-opacity", currentStyle.fillOpacity);
+						if (currentStyle.strokePaint) 		change(target, "stroke", currentStyle.strokePaint);
+						if (currentStyle.strokeOpacity) 	change(target, "stroke-opacity", currentStyle.strokeOpacity);
+						if (currentStyle.strokeWidth) 		change(target, "stroke-width", currentStyle.strokeWidth);
+						if (currentStyle.strokeDashArray) 	change(target, "stroke-dasharray", currentStyle.strokeDashArray);
+						if (currentStyle.opacity) 			change(target, "opacity", currentStyle.opacity);
+						if (currentStyle.strokeLinecap) 	change(target, "stroke-linecap", currentStyle.strokeLinecap);
+						if (currentStyle.strokeLinejoin) 	change(target, "stroke-linejoin", currentStyle.strokeLinejoin);
+						
+						addToHistory(new ChangeElementCommand(target, changes));
+					}
+				}
+			},
+		};
+});

data/vendor/assets/javascripts/svg-edit-2.6/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 
+ *
+ */
+
+svgEditor.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: "/assets/svg-edit-2.6/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/{svg-edit-2.6/extensions/ext-grid.js~ → javascripts/svg-edit-2.6/extensions/ext-grid.js}

@@ -59,7 +59,7 @@ svgEditor.addExtension("view_grid", function(s) {
         });
         
         gridPattern.appendChild(gridimg);
-        $('#svgroot defs').append(gridPattern);
+        $('#canvasGrid').append(gridPattern);
 
         // grid-box
         var gridBox = svgdoc.createElementNS(svgns, "rect");
@@ -151,7 +151,7 @@ svgEditor.addExtension("view_grid", function(s) {
 
     return {
         name: "view_grid",
-        svgicons: "/assets/extensions/grid-icon.xml",
+        svgicons: "/assets/svg-edit-2.6/extensions/grid-icon.xml",
 
         zoomChanged: function(zoom) {
             // update size

data/vendor/assets/javascripts/svg-edit-2.6/extensions/ext-helloworld.js

@@ -0,0 +1,78 @@
+/*
+ * ext-helloworld.js
+ *
+ * Licensed under the MIT License
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+ 
+/* 
+	This is a very basic SVG-Edit extension. It adds a "Hello World" button in
+	the left panel. Clicking on the button, and then the canvas will show the
+ 	user the point on the canvas that was clicked on.
+*/
+ 
+svgEditor.addExtension("Hello World", function() {
+
+		return {
+			name: "Hello World",
+			// For more notes on how to make an icon file, see the source of
+			// the hellorworld-icon.xml
+			svgicons: "/assets/svg-edit-2.6/extensions/helloworld-icon.xml",
+			
+			// Multiple buttons can be added in this array
+			buttons: [{
+				// Must match the icon ID in helloworld-icon.xml
+				id: "hello_world", 
+				
+				// This indicates that the button will be added to the "mode"
+				// button panel on the left side
+				type: "mode", 
+				
+				// Tooltip text
+				title: "Say 'Hello World'", 
+				
+				// Events
+				events: {
+					'click': function() {
+						// The action taken when the button is clicked on.
+						// For "mode" buttons, any other button will 
+						// automatically be de-pressed.
+						svgCanvas.setMode("hello_world");
+					}
+				}
+			}],
+			// This is triggered when the main mouse button is pressed down 
+			// on the editor canvas (not the tool panels)
+			mouseDown: function() {
+				// Check the mode on mousedown
+				if(svgCanvas.getMode() == "hello_world") {
+				
+					// The returned object must include "started" with 
+					// a value of true in order for mouseUp to be triggered
+					return {started: true};
+				}
+			},
+			
+			// This is triggered from anywhere, but "started" must have been set
+			// to true (see above). Note that "opts" is an object with event info
+			mouseUp: function(opts) {
+				// Check the mode on mouseup
+				if(svgCanvas.getMode() == "hello_world") {
+					var zoom = svgCanvas.getZoom();
+					
+					// Get the actual coordinate by dividing by the zoom value
+					var x = opts.mouse_x / zoom;
+					var y = opts.mouse_y / zoom;
+					
+					var text = "Hello World!\n\nYou clicked here: " 
+						+ x + ", " + y;
+						
+					// Show the text using the custom alert function
+					$.alert(text);
+				}
+			}
+		};
+});
+