svgedit/editor/extensions/ext-foreignobject.js

/*
 * ext-foreignobject.js
 *
 * Licensed under the Apache License, Version 2
 *
 * Copyright(c) 2010 Jacques Distler 
 * Copyright(c) 2010 Alexis Deveria 
 *
 */

$(function() {
	svgCanvas.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;
			
			
		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 height",
				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") {

					var newText = S.addSvgElementFromJson({
						"element": "foreignObject",
						"attr": {
							"x": opts.start_x,
							"y": opts.start_y,
							"id": S.getNextId(),
							"font-size": 16, //cur_text.font_size,
							"width": "24",
							"height": "24",
							"style": "pointer-events:inherit"
						}
					});
					var m = svgdoc.createElementNS(mathns, 'math');
					m.setAttributeNS(xmlnsns, 'xmlns', mathns);
					m.setAttribute('display', 'inline');
					var mi = svgdoc.createElementNS(mathns, 'mo');
					mi.textContent = "\u03A6";
					m.appendChild(mi);
					newText.appendChild(m);
					return {
						started: true
					}
				}
			},
			mouseUp: function(opts) {
				var e = opts.event;
				
				if(svgCanvas.getMode() == "foreign") {
					var attrs = $(e.target).attr(["width", "height"]);
					keep = (attrs.width != 0 || attrs.height != 0);
					
					svgCanvas.addToSelection([e.target], true);
					return {
						keep: keep,
						element: e.target
					}

				}
				
			},
			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];
			}
		};
	});
});