Move undo/redo functionality into history.js. Started unit test file.

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1864 eee81c28-f429-11dd-99c0-75d572ba1ddd

Makefile

@@ -29,6 +29,7 @@ build/$(PACKAGE):
 	   --js units.js \
 	   --js svgutils.js \
 	   --js sanitize.js \
+	   --js history.js \
 	   --js svgcanvas.js \
 	   --js svg-editor.js \
 	   --js locale/locale.js \

editor/embedapi.js

@@ -72,7 +72,7 @@ function embedded_svg_edit(frame){
   //Newer, well, it extracts things that aren't documented as well. All functions accessible through the normal thingy can now be accessed though the API
   //var l=[];for(var i in svgCanvas){if(typeof svgCanvas[i] == "function"){l.push(i)}};
   //run in svgedit itself
-  var functions = ["updateElementFromJson", "embedImage", "fixOperaXML", "clearSelection", "addToSelection", "removeFromSelection", "addNodeToSelection", "open", "save", "getSvgString", "setSvgString", "createLayer", "deleteCurrentLayer", "getNumLayers", "getLayer", "getCurrentLayer", "setCurrentLayer", "renameCurrentLayer", "setCurrentLayerPosition", "getLayerVisibility", "setLayerVisibility", "moveSelectedToLayer", "getLayerOpacity", "setLayerOpacity", "clear", "clearPath", "getNodePoint", "clonePathNode", "deletePathNode", "getResolution", "getImageTitle", "setImageTitle", "setResolution", "setBBoxZoom", "setZoom", "getMode", "setMode", "getStrokeColor", "setStrokeColor", "getFillColor", "setFillColor", "setStrokePaint", "setFillPaint", "getStrokeWidth", "setStrokeWidth", "getStrokeStyle", "setStrokeStyle", "getOpacity", "setOpacity", "getFillOpacity", "setFillOpacity", "getStrokeOpacity", "setStrokeOpacity", "getTransformList", "getBBox", "getRotationAngle", "setRotationAngle", "each", "bind", "setIdPrefix", "getBold", "setBold", "getItalic", "setItalic", "getFontFamily", "setFontFamily", "getFontSize", "setFontSize", "getText", "setTextContent", "setImageURL", "setRectRadius", "setSegType", "quickClone", "beginUndoableChange", "changeSelectedAttributeNoUndo", "finishUndoableChange", "changeSelectedAttribute", "deleteSelectedElements", "groupSelectedElements", "ungroupSelectedElement", "moveToTopSelectedElement", "moveToBottomSelectedElement", "moveSelectedElements", "getStrokedBBox", "getVisibleElements", "cycleElement", "getUndoStackSize", "getRedoStackSize", "getNextUndoCommandText", "getNextRedoCommandText", "undo", "redo", "cloneSelectedElements", "alignSelectedElements", "getZoom", "getVersion", "setIconSize", "setLang", "setCustomHandlers"]
+  var functions = ["updateElementFromJson", "embedImage", "fixOperaXML", "clearSelection", "addToSelection", "removeFromSelection", "addNodeToSelection", "open", "save", "getSvgString", "setSvgString", "createLayer", "deleteCurrentLayer", "getNumLayers", "getLayer", "getCurrentLayer", "setCurrentLayer", "renameCurrentLayer", "setCurrentLayerPosition", "getLayerVisibility", "setLayerVisibility", "moveSelectedToLayer", "getLayerOpacity", "setLayerOpacity", "clear", "clearPath", "getNodePoint", "clonePathNode", "deletePathNode", "getResolution", "getImageTitle", "setImageTitle", "setResolution", "setBBoxZoom", "setZoom", "getMode", "setMode", "getStrokeColor", "setStrokeColor", "getFillColor", "setFillColor", "setStrokePaint", "setFillPaint", "getStrokeWidth", "setStrokeWidth", "getStrokeStyle", "setStrokeStyle", "getOpacity", "setOpacity", "getFillOpacity", "setFillOpacity", "getStrokeOpacity", "setStrokeOpacity", "getTransformList", "getBBox", "getRotationAngle", "setRotationAngle", "each", "bind", "setIdPrefix", "getBold", "setBold", "getItalic", "setItalic", "getFontFamily", "setFontFamily", "getFontSize", "setFontSize", "getText", "setTextContent", "setImageURL", "setRectRadius", "setSegType", "quickClone", "changeSelectedAttributeNoUndo", "changeSelectedAttribute", "deleteSelectedElements", "groupSelectedElements", "ungroupSelectedElement", "moveToTopSelectedElement", "moveToBottomSelectedElement", "moveSelectedElements", "getStrokedBBox", "getVisibleElements", "cycleElement", "getUndoStackSize", "getRedoStackSize", "getNextUndoCommandText", "getNextRedoCommandText", "undo", "redo", "cloneSelectedElements", "alignSelectedElements", "getZoom", "getVersion", "setIconSize", "setLang", "setCustomHandlers"]
   
   //TODO: rewrite the following, it's pretty scary.
   for(var i = 0; i < functions.length; i++){

editor/history.js

@@ -0,0 +1,497 @@
+/**
+ * Package: svedit.history
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Jeff Schiller
+ */
+
+// Dependencies:
+// 1) jQuery
+// 2) svgtransformlist.js
+// 3) svgutils.js
+
+(function() {
+
+if (!window.svgedit) {
+	window.svgedit = {};
+}
+
+if (!svgedit.history) {
+	svgedit.history = {};
+}
+
+// Group: Undo/Redo history management
+
+
+svgedit.history.HistoryEventTypes = {
+	BEFORE_APPLY: 'before_apply',
+	AFTER_APPLY: 'after_apply',
+	BEFORE_UNAPPLY: 'before_unapply',
+	AFTER_UNAPPLY: 'after_unapply'
+};
+
+var removedElements = {};
+
+/**
+ * Interface: svgedit.history.HistoryCommand
+ * An interface that all command objects must implement.
+ *
+ * interface svgedit.history.HistoryCommand {
+ *   void apply();
+ *   void unapply();
+ *   Element[] elements();
+ *   static type();
+ * }
+ */
+
+// Class: svgedit.history.MoveElementCommand
+// implements svgedit.history.HistoryCommand
+// History command for an element that had its DOM position changed
+//
+// Parameters:
+// elem - The DOM element that was moved
+// oldNextSibling - The element's next sibling before it was moved
+// oldParent - The element's parent before it was moved
+// opt_desc - An optional string visible to user related to this change
+svgedit.history.MoveElementCommand = function(elem, oldNextSibling, oldParent, opt_desc) {
+	this.elem = elem;
+	this.text = text ? ("Move " + elem.tagName + " to " + text) : ("Move " + elem.tagName);
+	this.oldNextSibling = oldNextSibling;
+	this.oldParent = oldParent;
+	this.newNextSibling = elem.nextSibling;
+	this.newParent = elem.parentNode;
+};
+svgedit.history.MoveElementCommand.type = function() { return 'svgedit.history.MoveElementCommand'; }
+svgedit.history.MoveElementCommand.prototype.type = svgedit.history.MoveElementCommand.type;
+
+// Function: svgedit.history.MoveElementCommand.apply
+// Re-positions the element
+svgedit.history.MoveElementCommand.prototype.apply = function() {
+	this.elem = this.newParent.insertBefore(this.elem, this.newNextSibling);
+};
+
+// Function: svgedit.history.MoveElementCommand.unapply
+// Positions the element back to its original location
+svgedit.history.MoveElementCommand.prototype.unapply = function() {
+	this.elem = this.oldParent.insertBefore(this.elem, this.oldNextSibling);
+};
+
+// Function: svgedit.history.MoveElementCommand.elements
+// Returns array with element associated with this command
+svgedit.history.MoveElementCommand.prototype.elements = function() {
+	return [this.elem];
+};
+
+
+// Class: svgedit.history.InsertElementCommand
+// implements svgedit.history.HistoryCommand
+// History command for an element that was added to the DOM
+//
+// Parameters:
+// elem - The newly added DOM element
+// text - An optional string visible to user related to this change
+svgedit.history.InsertElementCommand = function(elem, text) {
+	this.elem = elem;
+	this.text = text || ("Create " + elem.tagName);
+	this.parent = elem.parentNode;
+};
+svgedit.history.InsertElementCommand.type = function() { return 'svgedit.history.InsertElementCommand'; }
+svgedit.history.InsertElementCommand.prototype.type = svgedit.history.InsertElementCommand.type;
+
+// Function: svgedit.history.InsertElementCommand.apply
+// Re-Inserts the new element
+svgedit.history.InsertElementCommand.prototype.apply = function() { 
+	this.elem = this.parent.insertBefore(this.elem, this.elem.nextSibling); 
+};
+
+// Function: svgedit.history.InsertElementCommand.unapply
+// Removes the element
+svgedit.history.InsertElementCommand.prototype.unapply = function() {
+	this.parent = this.elem.parentNode;
+	this.elem = this.elem.parentNode.removeChild(this.elem);
+};
+
+// Function: svgedit.history.InsertElementCommand.elements
+// Returns array with element associated with this command
+svgedit.history.InsertElementCommand.prototype.elements = function() {
+	return [this.elem];
+};
+
+
+// Class: svgedit.history.RemoveElementCommand
+// implements svgedit.history.HistoryCommand
+// History command for an element removed from the DOM
+//
+// Parameters:
+// elem - The removed DOM element
+// parent - The DOM element's parent
+// text - An optional string visible to user related to this change
+svgedit.history.RemoveElementCommand = function(elem, parent, text) {
+	this.elem = elem;
+	this.text = text || ("Delete " + elem.tagName);
+	this.parent = parent;
+
+	// special hack for webkit: remove this element's entry in the svgTransformLists map
+	svgedit.transformlist.removeElementFromListMap(elem);
+};
+svgedit.history.RemoveElementCommand.type = function() { return 'svgedit.history.RemoveElementCommand'; }
+svgedit.history.RemoveElementCommand.prototype.type = svgedit.history.RemoveElementCommand.type;
+
+// Function: RemoveElementCommand.apply
+// Re-removes the new element
+svgedit.history.RemoveElementCommand.prototype.apply = function() {	
+	svgedit.transformlist.removeElementFromListMap(this.elem);
+
+	this.parent = this.elem.parentNode;
+	this.elem = this.parent.removeChild(this.elem);
+};
+
+// Function: RemoveElementCommand.unapply
+// Re-adds the new element
+svgedit.history.RemoveElementCommand.prototype.unapply = function() { 
+	svgedit.transformlist.removeElementFromListMap(this.elem);
+
+	this.parent.insertBefore(this.elem, this.elem.nextSibling);
+};
+
+// Function: RemoveElementCommand.elements
+// Returns array with element associated with this command
+svgedit.history.RemoveElementCommand.prototype.elements = function() {
+	return [this.elem];
+};
+
+
+// Class: svgedit.history.ChangeElementCommand
+// implements svgedit.history.HistoryCommand
+// History command to make a change to an element. 
+// Usually an attribute change, but can also be textcontent.
+//
+// Parameters:
+// elem - The DOM element that was changed
+// attrs - An object with the attributes to be changed and the values they had *before* the change
+// text - An optional string visible to user related to this change
+svgedit.history.ChangeElementCommand = function(elem, attrs, text) {
+	this.elem = elem;
+	this.text = text ? ("Change " + elem.tagName + " " + text) : ("Change " + elem.tagName);
+	this.newValues = {};
+	this.oldValues = attrs;
+	for (var attr in attrs) {
+		if (attr == "#text") this.newValues[attr] = elem.textContent;
+		else if (attr == "#href") this.newValues[attr] = svgedit.utilities.getHref(elem);
+		else this.newValues[attr] = elem.getAttribute(attr);
+	}
+};
+svgedit.history.ChangeElementCommand.type = function() { return 'svgedit.history.ChangeElementCommand'; }
+svgedit.history.ChangeElementCommand.prototype.type = svgedit.history.ChangeElementCommand.type;
+
+// Function: svgedit.history.ChangeElementCommand.apply
+// Performs the stored change action
+svgedit.history.ChangeElementCommand.prototype.apply = function() {
+	var bChangedTransform = false;
+	for(var attr in this.newValues ) {
+		if (this.newValues[attr]) {
+			if (attr == "#text") this.elem.textContent = this.newValues[attr];
+			else if (attr == "#href") svgedit.utilities.setHref(this.elem, this.newValues[attr])
+			else this.elem.setAttribute(attr, this.newValues[attr]);
+		}
+		else {
+			if (attr == "#text") this.elem.textContent = "";
+			else {
+				this.elem.setAttribute(attr, "");
+				this.elem.removeAttribute(attr);
+			}
+		}
+
+		if (attr == "transform") { bChangedTransform = true; }
+	}
+
+	// relocate rotational transform, if necessary
+	if(!bChangedTransform) {
+		var angle = svgedit.utilities.getRotationAngle(this.elem);
+		if (angle) {
+			var bbox = elem.getBBox();
+			var cx = bbox.x + bbox.width/2,
+				cy = bbox.y + bbox.height/2;
+			var rotate = ["rotate(", angle, " ", cx, ",", cy, ")"].join('');
+			if (rotate != elem.getAttribute("transform")) {
+				elem.setAttribute("transform", rotate);
+			}
+		}
+	}
+	return true;
+};
+
+// Function: svgedit.history.ChangeElementCommand.unapply
+// Reverses the stored change action
+svgedit.history.ChangeElementCommand.prototype.unapply = function() {
+	var bChangedTransform = false;
+	for(var attr in this.oldValues ) {
+		if (this.oldValues[attr]) {
+			if (attr == "#text") this.elem.textContent = this.oldValues[attr];
+			else if (attr == "#href") svgedit.utilities.setHref(this.elem, this.oldValues[attr]);
+			else this.elem.setAttribute(attr, this.oldValues[attr]);
+		}
+		else {
+			if (attr == "#text") this.elem.textContent = "";
+			else this.elem.removeAttribute(attr);
+		}
+		if (attr == "transform") { bChangedTransform = true; }
+	}
+	// relocate rotational transform, if necessary
+	if(!bChangedTransform) {
+		var angle = svgedit.utilities.getRotationAngle(this.elem);
+		if (angle) {
+			var bbox = elem.getBBox();
+			var cx = bbox.x + bbox.width/2,
+				cy = bbox.y + bbox.height/2;
+			var rotate = ["rotate(", angle, " ", cx, ",", cy, ")"].join('');
+			if (rotate != elem.getAttribute("transform")) {
+				elem.setAttribute("transform", rotate);
+			}
+		}
+	}
+
+	// Remove transformlist to prevent confusion that causes bugs like 575.
+	svgedit.transformlist.removeElementFromListMap(this.elem);
+
+	return true;
+};
+
+// Function: ChangeElementCommand.elements
+// Returns array with element associated with this command
+svgedit.history.ChangeElementCommand.prototype.elements = function() {
+	return [this.elem];
+};
+
+
+// TODO: create a 'typing' command object that tracks changes in text
+// if a new Typing command is created and the top command on the stack is also a Typing
+// and they both affect the same element, then collapse the two commands into one
+
+
+// Class: svgedit.history.BatchCommand
+// implements svgedit.history.HistoryCommand
+// History command that can contain/execute multiple other commands
+//
+// Parameters:
+// text - An optional string visible to user related to this change
+svgedit.history.BatchCommand = function(text) {
+	this.text = text || "Batch Command";
+	this.stack = [];
+};
+svgedit.history.BatchCommand.type = function() { return 'svgedit.history.BatchCommand'; }
+svgedit.history.BatchCommand.prototype.type = svgedit.history.BatchCommand.type;
+
+// Function: svgedit.history.BatchCommand.apply
+// Runs "apply" on all subcommands
+svgedit.history.BatchCommand.prototype.apply = function() {
+	var len = this.stack.length;
+	for (var i = 0; i < len; ++i) {
+		this.stack[i].apply();
+	}
+};
+
+// Function: svgedit.history.BatchCommand.unapply
+// Runs "unapply" on all subcommands
+svgedit.history.BatchCommand.prototype.unapply = function() {
+	for (var i = this.stack.length-1; i >= 0; i--) {
+		this.stack[i].unapply();
+	}
+};
+
+// Function: svgedit.history.BatchCommand.elements
+// Iterate through all our subcommands and returns all the elements we are changing
+svgedit.history.BatchCommand.prototype.elements = function() {
+	var elems = [];
+	var cmd = this.stack.length;
+	while (cmd--) {
+		var thisElems = this.stack[cmd].elements();
+		var elem = thisElems.length;
+		while (elem--) {
+			if (elems.indexOf(thisElems[elem]) == -1) elems.push(thisElems[elem]);
+		}
+	}
+	return elems;
+};
+
+// Function: svgedit.history.BatchCommand.addSubCommand
+// Adds a given command to the history stack
+//
+// Parameters:
+// cmd - The undo command object to add
+svgedit.history.BatchCommand.prototype.addSubCommand = function(cmd) {
+	this.stack.push(cmd);
+};
+
+// Function: svgedit.history.BatchCommand.isEmpty
+// Returns a boolean indicating whether or not the batch command is empty
+svgedit.history.BatchCommand.prototype.isEmpty = function() {
+	return this.stack.length == 0;
+};
+
+
+/**
+ * Interface: svgedit.history.HistoryEventHandler
+ * An interface for objects that will handle history events.
+ *
+ * interface svgedit.history.HistoryEventHandler {
+ *   void handleHistoryEvent(eventType, command);
+ * }
+ *
+ * eventType is a string conforming to one of the HistoryEvent types (see above).
+ * command is an object fulfilling the HistoryCommand interface (see above).
+ */
+
+// Class: svgedit.history.UndoManager
+// Parameters:
+// historyEventHandler - an object that conforms to the HistoryEventHandler interface
+// (see above)
+svgedit.history.UndoManager = function(historyEventHandler) {
+	this.handler_ = historyEventHandler;
+	this.undoStackPointer = 0;
+	this.undoStack = [];
+
+	// this is the stack that stores the original values, the elements and
+	// the attribute name for begin/finish
+	this.undoChangeStackPointer = -1;
+	this.undoableChangeStack = [];
+};
+	
+// Function: svgedit.history.UndoManager.resetUndoStack
+// Resets the undo stack, effectively clearing the undo/redo history
+svgedit.history.UndoManager.prototype.resetUndoStack = function() {
+	this.undoStack = [];
+	this.undoStackPointer = 0;
+};
+
+// Function: svgedit.history.UndoManager.getUndoStackSize
+// Returns: 
+// Integer with the current size of the undo history stack
+svgedit.history.UndoManager.prototype.getUndoStackSize = function() {
+	return this.undoStackPointer;
+};
+
+// Function: svgedit.history.UndoManager.getRedoStackSize
+// Returns: 
+// Integer with the current size of the redo history stack
+svgedit.history.UndoManager.prototype.getRedoStackSize = function() {
+	return this.undoStack.length - this.undoStackPointer;
+};
+
+// Function: svgedit.history.UndoManager.getNextUndoCommandText
+// Returns: 
+// String associated with the next undo command
+svgedit.history.UndoManager.prototype.getNextUndoCommandText = function() { 
+	return this.undoStackPointer > 0 ? this.undoStack[this.undoStackPointer-1].text : "";
+};
+
+// Function: svgedit.history.UndoManager.getNextRedoCommandText
+// Returns: 
+// String associated with the next redo command
+svgedit.history.UndoManager.prototype.getNextRedoCommandText = function() { 
+	return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].text : "";
+};
+
+// Function: svgedit.history.UndoManager.undo
+// Performs an undo step
+svgedit.history.UndoManager.prototype.undo = function() {
+	if (this.undoStackPointer > 0) {
+		var cmd = this.undoStack[--this.undoStackPointer];
+		
+		this.handler_.handleHistoryEvent(svgedit.history.HistoryEventTypes.BEFORE_UNAPPLY, cmd);
+		
+		cmd.unapply();
+		
+		this.handler_.handleHistoryEvent(svgedit.history.HistoryEventTypes.AFTER_UNAPPLY, cmd);
+	}
+};
+
+// Function: svgedit.history.UndoManager.redo		
+// Performs a redo step
+svgedit.history.UndoManager.prototype.redo = function() {
+	if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {
+		var cmd = this.undoStack[this.undoStackPointer++];
+
+		this.handler_.handleHistoryEvent(svgedit.history.HistoryEventTypes.BEFORE_APPLY, cmd);
+
+		cmd.apply();
+
+		this.handler_.handleHistoryEvent(svgedit.history.HistoryEventTypes.AFTER_APPLY, cmd);
+	}
+};
+	
+// Function: svgedit.history.UndoManager.addCommandToHistory
+// Adds a command object to the undo history stack
+//
+// Parameters: 
+// cmd - The command object to add
+svgedit.history.UndoManager.prototype.addCommandToHistory = function(cmd) {
+	// FIXME: we MUST compress consecutive text changes to the same element
+	// (right now each keystroke is saved as a separate command that includes the
+	// entire text contents of the text element)
+	// TODO: consider limiting the history that we store here (need to do some slicing)
+	
+	// if our stack pointer is not at the end, then we have to remove
+	// all commands after the pointer and insert the new command
+	if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {
+		this.undoStack = this.undoStack.splice(0, this.undoStackPointer);
+	}
+	this.undoStack.push(cmd);
+	this.undoStackPointer = this.undoStack.length;
+};
+
+
+// Function: svgedit.history.UndoManager.beginUndoableChange
+// This function tells the canvas to remember the old values of the 
+// attrName attribute for each element sent in.  The elements and values 
+// are stored on a stack, so the next call to finishUndoableChange() will 
+// pop the elements and old values off the stack, gets the current values
+// from the DOM and uses all of these to construct the undo-able command.
+//
+// Parameters: 
+// attrName - The name of the attribute being changed
+// elems - Array of DOM elements being changed
+svgedit.history.UndoManager.prototype.beginUndoableChange = function(attrName, elems) {
+	var p = ++this.undoChangeStackPointer;
+	var i = elems.length;
+	var oldValues = new Array(i), elements = new Array(i);
+	while (i--) {
+		var elem = elems[i];
+		if (elem == null) continue;
+		elements[i] = elem;
+		oldValues[i] = elem.getAttribute(attrName);
+	}
+	this.undoableChangeStack[p] = {'attrName': attrName,
+							'oldValues': oldValues,
+							'elements': elements};
+};
+
+// Function: svgedit.history.UndoManager.finishUndoableChange
+// This function returns a BatchCommand object which summarizes the
+// change since beginUndoableChange was called.  The command can then
+// be added to the command history
+//
+// Returns: 
+// Batch command object with resulting changes
+svgedit.history.UndoManager.prototype.finishUndoableChange = function() {
+	var p = this.undoChangeStackPointer--;
+	var changeset = this.undoableChangeStack[p];
+	var i = changeset['elements'].length;
+	var attrName = changeset['attrName'];
+	var batchCmd = new svgedit.history.BatchCommand("Change " + attrName);
+	while (i--) {
+		var elem = changeset['elements'][i];
+		if (elem == null) continue;
+		var changes = {};
+		changes[attrName] = changeset['oldValues'][i];
+		if (changes[attrName] != elem.getAttribute(attrName)) {
+			batchCmd.addSubCommand(new svgedit.history.ChangeElementCommand(elem, changes, attrName));
+		}
+	}
+	this.undoableChangeStack[p] = null;
+	return batchCmd;
+};
+
+
+})();

editor/svg-editor.html

@@ -24,6 +24,7 @@
 <script type="text/javascript" src="units.js"></script>
 <script type="text/javascript" src="svgutils.js"></script>
 <script type="text/javascript" src="sanitize.js"></script>
+<script type="text/javascript" src="history.js"></script>
 <script type="text/javascript" src="svgcanvas.js"></script>
 <script type="text/javascript" src="svg-editor.js"></script>
 <script type="text/javascript" src="locale/locale.js"></script>

editor/svgcanvas.js

@@ -17,6 +17,7 @@
 // 5) units.js
 // 6) svgutils.js
 // 7) sanitize.js
+// 8) history.js
 
 if(!window.console) {
 	window.console = {};
@@ -25,7 +26,7 @@ if(!window.console) {
 }
 
 if(window.opera) {
-	window.console.log = function(str) {opera.postError(str);};
+	window.console.log = function(str) { opera.postError(str); };
 	window.console.dir = function(str) {};
 }
 
@@ -118,6 +119,8 @@ if(config) {
 	$.extend(curConfig, config);
 }
 
+var canvas = this;
+
 // "document" element associated with the container (same as window.document using default svg-editor.js)
 var svgdoc = container.ownerDocument;
 
@@ -152,13 +155,13 @@ var getElem = function(id) {
 };
 
 // import svgtransformlist.js
-var getTransformList = this.getTransformList = svgedit.transformlist.getTransformList;
+var getTransformList = canvas.getTransformList = svgedit.transformlist.getTransformList;
 
 // import from math.js.
 var transformPoint = svgedit.math.transformPoint;
-var matrixMultiply = this.matrixMultiply = svgedit.math.matrixMultiply;
+var matrixMultiply = canvas.matrixMultiply = svgedit.math.matrixMultiply;
-var hasMatrixTransform = this.hasMatrixTransform = svgedit.math.hasMatrixTransform;
+var hasMatrixTransform = canvas.hasMatrixTransform = svgedit.math.hasMatrixTransform;
-var transformListToTransform = this.transformListToTransform = svgedit.math.transformListToTransform;
+var transformListToTransform = canvas.transformListToTransform = svgedit.math.transformListToTransform;
 var snapToAngle = svgedit.math.snapToAngle;
 
 // initialize from units.js
@@ -170,19 +173,73 @@ svgedit.units.init({
 	getWidth: function() { return svgcontent.getAttribute("width")/current_zoom; }
 });
 // import from units.js
-var convertToNum = this.convertToNum = svgedit.units.convertToNum;
+var convertToNum = canvas.convertToNum = svgedit.units.convertToNum;
 
 // import from svgutils.js
-var getUrlFromAttr = this.getUrlFromAttr = svgedit.utilities.getUrlFromAttr;
+var getUrlFromAttr = canvas.getUrlFromAttr = svgedit.utilities.getUrlFromAttr;
-var getHref = this.getHref = svgedit.utilities.getHref;
+var getHref = canvas.getHref = svgedit.utilities.getHref;
-var setHref = this.setHref = svgedit.utilities.setHref;
+var setHref = canvas.setHref = svgedit.utilities.setHref;
 var getPathBBox = svgedit.utilities.getPathBBox;
-var getBBox = this.getBBox = svgedit.utilities.getBBox;
+var getBBox = canvas.getBBox = svgedit.utilities.getBBox;
-var getRotationAngle = this.getRotationAngle = svgedit.utilities.getRotationAngle;
+var getRotationAngle = canvas.getRotationAngle = svgedit.utilities.getRotationAngle;
 
 // import from sanitize.js
 var nsMap = svgedit.sanitize.getNSMap();
-var sanitizeSvg = this.sanitizeSvg = svgedit.sanitize.sanitizeSvg;
+var sanitizeSvg = canvas.sanitizeSvg = svgedit.sanitize.sanitizeSvg;
+
+// import from history.js
+var MoveElementCommand = svgedit.history.MoveElementCommand;
+var InsertElementCommand = svgedit.history.InsertElementCommand;
+var RemoveElementCommand = svgedit.history.RemoveElementCommand;
+var ChangeElementCommand = svgedit.history.ChangeElementCommand;
+var BatchCommand = svgedit.history.BatchCommand;
+// Implement the svgedit.history.HistoryEventHandler interface.
+canvas.undoMgr = new svgedit.history.UndoManager({
+	handleHistoryEvent: function(eventType, cmd) {
+		var EventTypes = svgedit.history.HistoryEventTypes;
+		// TODO: handle setBlurOffsets.
+		if (eventType == EventTypes.BEFORE_UNAPPLY || eventType == EventTypes.BEFORE_APPLY) {
+			canvas.clearSelection();
+		} else if (eventType == EventTypes.AFTER_APPLY || eventType == EventTypes.AFTER_UNAPPLY) {
+			var elems = cmd.elements();
+			canvas.pathActions.clear();
+			call("changed", elems);
+			
+			var cmdType = cmd.type();
+			var isApply = eventType == EventTypes.AFTER_APPLY;
+			if (cmdType == MoveElementCommand.type()) {
+				var parent = isApply ? cmd.newParent : cmd.oldParent;
+				if (parent == svgcontent) {
+					canvas.identifyLayers();
+				}
+			} else if (cmdType == InsertElementCommand.type() ||
+					cmdType == RemoveElementCommand.type()) {
+				if (cmd.parent == svgcontent) {
+					canvas.identifyLayers();
+				}
+				if (cmdType == InsertElementCommand.type()) {
+					if (isApply) restoreRefElems(cmd.elem);
+				} else {
+					if (!isApply) restoreRefElems(cmd.elem);
+				}
+			} else if (cmdType == ChangeElementCommand.type()) {
+				// if we are changing layer names, re-identify all layers
+				if (cmd.elem.tagName == "title" && cmd.elem.parentNode.parentNode == svgcontent) {
+					canvas.identifyLayers();
+				}
+				var values = isApply ? cmd.newValues : cmd.oldValues;
+				// If stdDeviation was changed, update the blur.
+				if (values["stdDeviation"]) {
+					canvas.setBlurOffsets(cmd.elem.parentNode, values["stdDeviation"]);
+				}
+			}
+		}
+	}
+});
+var addCommandToHistory = function(cmd) {
+	canvas.undoMgr.addCommandToHistory(cmd);
+};
+
 
 // Function: snapToGrid
 // round value to for snapping
@@ -202,13 +259,9 @@ var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polylin
 var ref_attrs = ["clip-path", "fill", "filter", "marker-end", "marker-mid", "marker-start", "mask", "stroke"];
 
 var elData = $.data;
-	
+
-// TODO: declare the variables and set them as null, then move this setup stuff to
+// nonce to uniquify id's
-// an initialization function - probably just use clear()
+var nonce = Math.floor(Math.random()*100001),
-var canvas = this,
-	
-	// nonce to uniquify id's
-	nonce = Math.floor(Math.random()*100001),
 	
 	// Boolean to indicate whether or not IDs given to elements should be random
 	randomize_ids = false, 
@@ -272,453 +325,7 @@ var restoreRefElems = function(elem) {
 			}
 		}
 	}
-}
+};
-
-
-// Group: Undo/Redo history management
-
-this.undoCmd = {};
-
-// Function: ChangeElementCommand
-// History command to make a change to an element. 
-// Usually an attribute change, but can also be textcontent.
-//
-// Parameters:
-// elem - The DOM element that was changed
-// attrs - An object with the attributes to be changed and the values they had *before* the change
-// text - An optional string visible to user related to this change
-var ChangeElementCommand = this.undoCmd.changeElement = function(elem, attrs, text) {
-	this.elem = elem;
-	this.text = text ? ("Change " + elem.tagName + " " + text) : ("Change " + elem.tagName);
-	this.newValues = {};
-	this.oldValues = attrs;
-	for (var attr in attrs) {
-		if (attr == "#text") this.newValues[attr] = elem.textContent;
-		else if (attr == "#href") this.newValues[attr] = svgedit.utilities.getHref(elem);
-		else this.newValues[attr] = elem.getAttribute(attr);
-	}
-
-	// Function: ChangeElementCommand.apply
-	// Performs the stored change action
-	this.apply = function() {
-		var bChangedTransform = false;
-		for(var attr in this.newValues ) {
-			if (this.newValues[attr]) {
-				if (attr == "#text") this.elem.textContent = this.newValues[attr];
-				else if (attr == "#href") svgedit.utilities.setHref(this.elem, this.newValues[attr])
-				else this.elem.setAttribute(attr, this.newValues[attr]);
-			}
-			else {
-				if (attr == "#text") this.elem.textContent = "";
-				else {
-					this.elem.setAttribute(attr, "");
-					this.elem.removeAttribute(attr);
-				}
-			}
-			
-			if (attr == "transform") { bChangedTransform = true; }
-			else if (attr == "stdDeviation") { canvas.setBlurOffsets(this.elem.parentNode, this.newValues[attr]); }
-			
-		}
-		// relocate rotational transform, if necessary
-		if(!bChangedTransform) {
-			var angle = svgedit.utilities.getRotationAngle(elem);
-			if (angle) {
-				var bbox = elem.getBBox();
-				var cx = bbox.x + bbox.width/2,
-					cy = bbox.y + bbox.height/2;
-				var rotate = ["rotate(", angle, " ", cx, ",", cy, ")"].join('');
-				if (rotate != elem.getAttribute("transform")) {
-					elem.setAttribute("transform", rotate);
-				}
-			}
-		}
-		// if we are changing layer names, re-identify all layers
-		if (this.elem.tagName == "title" && this.elem.parentNode.parentNode == svgcontent) {
-			identifyLayers();
-		}		
-		return true;
-	};
-
-	// Function: ChangeElementCommand.unapply
-	// Reverses the stored change action
-	this.unapply = function() {
-		var bChangedTransform = false;
-		for(var attr in this.oldValues ) {
-			if (this.oldValues[attr]) {
-				if (attr == "#text") this.elem.textContent = this.oldValues[attr];
-				else if (attr == "#href") svgedit.utilities.setHref(this.elem, this.oldValues[attr]);
-				else this.elem.setAttribute(attr, this.oldValues[attr]);
-				
-				if (attr == "stdDeviation") canvas.setBlurOffsets(this.elem.parentNode, this.oldValues[attr]);
-			}
-			else {
-				if (attr == "#text") this.elem.textContent = "";
-				else this.elem.removeAttribute(attr);
-			}
-			if (attr == "transform") { bChangedTransform = true; }
-		}
-		// relocate rotational transform, if necessary
-		if(!bChangedTransform) {
-			var angle = svgedit.utilities.getRotationAngle(elem);
-			if (angle) {
-				var bbox = elem.getBBox();
-				var cx = bbox.x + bbox.width/2,
-					cy = bbox.y + bbox.height/2;
-				var rotate = ["rotate(", angle, " ", cx, ",", cy, ")"].join('');
-				if (rotate != elem.getAttribute("transform")) {
-					elem.setAttribute("transform", rotate);
-				}
-			}
-		}
-		// if we are changing layer names, re-identify all layers
-		if (this.elem.tagName == "title" && this.elem.parentNode.parentNode == svgcontent) {
-			identifyLayers();
-		}		
-		
-		// Remove transformlist to prevent confusion that causes bugs like 575.
-		svgedit.transformlist.removeElementFromListMap(this.elem);
-		
-		return true;
-	};
-
-	// Function: ChangeElementCommand.elements
-	// Returns array with element associated with this command
-	this.elements = function() { return [this.elem]; }
-}
-
-// Function: InsertElementCommand
-// History command for an element that was added to the DOM
-//
-// Parameters:
-// elem - The newly added DOM element
-// text - An optional string visible to user related to this change
-var InsertElementCommand = this.undoCmd.insertElement = function(elem, text) {
-	this.elem = elem;
-	this.text = text || ("Create " + elem.tagName);
-	this.parent = elem.parentNode;
-	
-	// Function: InsertElementCommand.apply
-	// Re-Inserts the new element
-	this.apply = function() { 
-		this.elem = this.parent.insertBefore(this.elem, this.elem.nextSibling); 
-		
-		restoreRefElems(this.elem);
-		
-		if (this.parent == svgcontent) {
-			identifyLayers();
-		}		
-	};
-
-	// Function: InsertElementCommand.unapply
-	// Removes the element
-	this.unapply = function() {
-		this.parent = this.elem.parentNode;
-		this.elem = this.elem.parentNode.removeChild(this.elem);
-		if (this.parent == svgcontent) {
-			identifyLayers();
-		}		
-	};
-
-	// Function: InsertElementCommand.elements
-	// Returns array with element associated with this command
-	this.elements = function() { return [this.elem]; };
-}
-
-// Function: RemoveElementCommand
-// History command for an element removed from the DOM
-//
-// Parameters:
-// elem - The removed DOM element
-// parent - The DOM element's parent
-// text - An optional string visible to user related to this change
-var RemoveElementCommand = this.undoCmd.removeElement = function(elem, parent, text) {
-	this.elem = elem;
-	this.text = text || ("Delete " + elem.tagName);
-	this.parent = parent;
-
-	// Function: RemoveElementCommand.apply
-	// Re-removes the new element
-	this.apply = function() {	
-		svgedit.transformlist.removeElementFromListMap(this.elem);
-	
-		this.parent = this.elem.parentNode;
-		this.elem = this.parent.removeChild(this.elem);
-		if (this.parent == svgcontent) {
-			identifyLayers();
-		}		
-	};
-
-	// Function: RemoveElementCommand.unapply
-	// Re-adds the new element
-	this.unapply = function() { 
-		svgedit.transformlist.removeElementFromListMap(this.elem);
-
-		this.parent.insertBefore(this.elem, this.elem.nextSibling);
-		
-		restoreRefElems(this.elem);
-		
-		if (this.parent === svgcontent) {
-			identifyLayers();
-		}		
-	};
-
-	// Function: RemoveElementCommand.elements
-	// Returns array with element associated with this command
-	this.elements = function() { return [this.elem]; };
-	
-	// special hack for webkit: remove this element's entry in the svgTransformLists map
-	svgedit.transformlist.removeElementFromListMap(elem);
-}
-
-// Function: MoveElementCommand
-// History command for an element that had its DOM position changed
-//
-// Parameters:
-// elem - The DOM element that was moved
-// oldNextSibling - The element's next sibling before it was moved
-// oldParent - The element's parent before it was moved
-// text - An optional string visible to user related to this change
-var MoveElementCommand = this.undoCmd.moveElement = function(elem, oldNextSibling, oldParent, text) {
-	this.elem = elem;
-	this.text = text ? ("Move " + elem.tagName + " to " + text) : ("Move " + elem.tagName);
-	this.oldNextSibling = oldNextSibling;
-	this.oldParent = oldParent;
-	this.newNextSibling = elem.nextSibling;
-	this.newParent = elem.parentNode;
-
-	// Function: MoveElementCommand.unapply
-	// Re-positions the element
-	this.apply = function() {
-		this.elem = this.newParent.insertBefore(this.elem, this.newNextSibling);
-		if (this.newParent == svgcontent) {
-			identifyLayers();
-		}
-	};
-
-	// Function: MoveElementCommand.unapply
-	// Positions the element back to its original location
-	this.unapply = function() {
-		this.elem = this.oldParent.insertBefore(this.elem, this.oldNextSibling);
-		if (this.oldParent == svgcontent) {
-			identifyLayers();
-		}
-	};
-
-	// Function: MoveElementCommand.elements
-	// Returns array with element associated with this command
-	this.elements = function() { return [this.elem]; };
-}
-
-// TODO: create a 'typing' command object that tracks changes in text
-// if a new Typing command is created and the top command on the stack is also a Typing
-// and they both affect the same element, then collapse the two commands into one
-
-// Function: BatchCommand
-// History command that can contain/execute multiple other commands
-//
-// Parameters:
-// text - An optional string visible to user related to this change
-var BatchCommand = this.undoCmd.batch = function(text) {
-	this.text = text || "Batch Command";
-	this.stack = [];
-
-	// Function: BatchCommand.apply
-	// Runs "apply" on all subcommands
-	this.apply = function() {
-		var len = this.stack.length;
-		for (var i = 0; i < len; ++i) {
-			this.stack[i].apply();
-		}
-	};
-
-	// Function: BatchCommand.unapply
-	// Runs "unapply" on all subcommands
-	this.unapply = function() {
-		for (var i = this.stack.length-1; i >= 0; i--) {
-			this.stack[i].unapply();
-		}
-	};
-
-	// Function: BatchCommand.elements
-	// Iterate through all our subcommands and returns all the elements we are changing
-	this.elements = function() {
-		var elems = [];
-		var cmd = this.stack.length;
-		while (cmd--) {
-			var thisElems = this.stack[cmd].elements();
-			var elem = thisElems.length;
-			while (elem--) {
-				if (elems.indexOf(thisElems[elem]) == -1) elems.push(thisElems[elem]);
-			}
-		}
-		return elems; 
-	};
-
-	// Function: BatchCommand.addSubCommand
-	// Adds a given command to the history stack
-	//
-	// Parameters:
-	// cmd - The undo command object to add
-	this.addSubCommand = function(cmd) { this.stack.push(cmd); };
-
-	// Function: BatchCommand.isEmpty
-	// Returns a boolean indicating whether or not the batch command is empty
-	this.isEmpty = function() { return this.stack.length == 0; };
-}
-
-// Set scope for addCommandToHistory
-var addCommandToHistory;
-
-// Undo/redo stack related functions
-(function(c) {
-	var undoStackPointer = 0, 
-		undoStack = [];
-	
-	c.undoMgr = {
-		// Function: undoMgr.resetUndoStack
-		// Resets the undo stack, effectively clearing the undo/redo history
-		resetUndoStack: function() {
-			undoStack = [];
-			undoStackPointer = 0;
-		},
-	
-		// Function: undoMgr.getUndoStackSize
-		// Returns: 
-		// Integer with the current size of the undo history stack
-		getUndoStackSize: function() { return undoStackPointer; },
-		
-		// Function: undoMgr.getRedoStackSize
-		// Returns: 
-		// Integer with the current size of the redo history stack
-		getRedoStackSize: function() { return undoStack.length - undoStackPointer; },
-		
-		// Function: undoMgr.getNextUndoCommandText
-		// Returns: 
-		// String associated with the next undo command
-		getNextUndoCommandText: function() { 
-			if (undoStackPointer > 0) 
-				return undoStack[undoStackPointer-1].text;
-			return "";
-		},
-		
-		// Function: undoMgr.getNextRedoCommandText
-		// Returns: 
-		// String associated with the next redo command
-		getNextRedoCommandText: function() { 
-			if (undoStackPointer < undoStack.length) 
-				return undoStack[undoStackPointer].text;
-			return "";
-		},
-		
-		// Function: undoMgr.undo
-		// Performs an undo step
-		undo: function() {
-			if (undoStackPointer > 0) {
-				c.clearSelection();
-				var cmd = undoStack[--undoStackPointer];
-				cmd.unapply();
-				pathActions.clear();
-				call("changed", cmd.elements());
-			}
-		},
-
-		// Function: undoMgr.redo		
-		// Performs a redo step
-		redo: function() {
-			if (undoStackPointer < undoStack.length && undoStack.length > 0) {
-				c.clearSelection();
-				var cmd = undoStack[undoStackPointer++];
-				cmd.apply();
-				pathActions.clear();
-				call("changed", cmd.elements());
-			}
-		}
-	};
-	
-	// Function: addCommandToHistory
-	// Adds a command object to the undo history stack
-	//
-	// Parameters: 
-	// cmd - The command object to add
-	addCommandToHistory = c.undoCmd.add = function(cmd) {
-	// FIXME: we MUST compress consecutive text changes to the same element
-	// (right now each keystroke is saved as a separate command that includes the
-	// entire text contents of the text element)
-	// TODO: consider limiting the history that we store here (need to do some slicing)
-	
-		// if our stack pointer is not at the end, then we have to remove
-		// all commands after the pointer and insert the new command
-		if (undoStackPointer < undoStack.length && undoStack.length > 0) {
-			undoStack = undoStack.splice(0, undoStackPointer);
-		}
-		undoStack.push(cmd);
-		undoStackPointer = undoStack.length;
-	};
-	
-}(canvas));
-
-(function(c) {
-
-	// New functions for refactoring of Undo/Redo
-	
-	// this is the stack that stores the original values, the elements and
-	// the attribute name for begin/finish
-	var undoChangeStackPointer = -1;
-	var undoableChangeStack = [];
-	
-	// Function: beginUndoableChange
-	// This function tells the canvas to remember the old values of the 
-	// attrName attribute for each element sent in.  The elements and values 
-	// are stored on a stack, so the next call to finishUndoableChange() will 
-	// pop the elements and old values off the stack, gets the current values
-	// from the DOM and uses all of these to construct the undo-able command.
-	//
-	// Parameters: 
-	// attrName - The name of the attribute being changed
-	// elems - Array of DOM elements being changed
-	c.beginUndoableChange = function(attrName, elems) {
-		var p = ++undoChangeStackPointer;
-		var i = elems.length;
-		var oldValues = new Array(i), elements = new Array(i);
-		while (i--) {
-			var elem = elems[i];
-			if (elem == null) continue;
-			elements[i] = elem;
-			oldValues[i] = elem.getAttribute(attrName);
-		}
-		undoableChangeStack[p] = {'attrName': attrName,
-								'oldValues': oldValues,
-								'elements': elements};
-	};
-	
-	// Function: finishUndoableChange
-	// This function returns a BatchCommand object which summarizes the
-	// change since beginUndoableChange was called.  The command can then
-	// be added to the command history
-	//
-	// Returns: 
-	// Batch command object with resulting changes
-	c.finishUndoableChange = function() {
-		var p = undoChangeStackPointer--;
-		var changeset = undoableChangeStack[p];
-		var i = changeset['elements'].length;
-		var attrName = changeset['attrName'];
-		var batchCmd = new BatchCommand("Change " + attrName);
-		while (i--) {
-			var elem = changeset['elements'][i];
-			if (elem == null) continue;
-			var changes = {};
-			changes[attrName] = changeset['oldValues'][i];
-			if (changes[attrName] != elem.getAttribute(attrName)) {
-				batchCmd.addSubCommand(new ChangeElementCommand(elem, changes, attrName));
-			}
-		}
-		undoableChangeStack[p] = null;
-		return batchCmd;
-	};
-
-}(canvas));
 
 // Put SelectorManager in this scope
 var SelectorManager;
@@ -1607,8 +1214,8 @@ var getStrokedBBox = this.getStrokedBBox = function(elems) {
 			console.log(elem, e);
 			return null;
 		} 
+	};
 
-	}
 	var full_bb;
 	$.each(elems, function() {
 		if(full_bb) return;
@@ -1804,7 +1411,7 @@ var getId, getNextId, call;
 	// arg - Argument to pass through to the callback function
 	call = c.call = function(event, arg) {
 		if (events[event]) {
-			return events[event](this,arg);
+			return events[event](this, arg);
 		}
 	};
 	
@@ -3598,7 +3205,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 			case "rotate":
 				started = true;
 				// we are starting an undoable change (a drag-rotation)
-				canvas.beginUndoableChange("transform", selectedElements);
+				canvas.undoMgr.beginUndoableChange("transform", selectedElements);
 				break;
 			default:
 				// This could occur in an extension
@@ -4224,7 +3831,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 				keep = true;
 				element = null;
 				current_mode = "select";
-				var batchCmd = canvas.finishUndoableChange();
+				var batchCmd = canvas.undoMgr.finishUndoableChange();
 				if (!batchCmd.isEmpty()) { 
 					addCommandToHistory(batchCmd);
 				}
@@ -4793,7 +4400,7 @@ var textActions = canvas.textActions = function() {
 
 // Group: Path edit functions
 // Functions relating to editing path elements
-var pathActions = this.pathActions = function() {
+var pathActions = canvas.pathActions = function() {
 	
 	var subpath = false;
 	var pathData = {};
@@ -7683,7 +7290,7 @@ this.importSvgString = function(xmlString) {
 
 // Function: identifyLayers
 // Updates layer system
-var identifyLayers = function() {
+var identifyLayers = canvas.identifyLayers = function() {
 	all_layers = [];
 	leaveContext();
 	var numchildren = svgcontent.childNodes.length;
@@ -8947,7 +8554,7 @@ this.getBlur = function(elem) {
 	}
 	
 	function finishChange() {
-		var bCmd = canvas.finishUndoableChange();
+		var bCmd = canvas.undoMgr.finishUndoableChange();
 		cur_command.addSubCommand(bCmd);
 		addCommandToHistory(cur_command);
 		cur_command = null;	
@@ -9043,7 +8650,7 @@ this.getBlur = function(elem) {
 		}
 		
 		cur_command = batchCmd;
-		canvas.beginUndoableChange("stdDeviation", [filter?filter.firstChild:null]);
+		canvas.undoMgr.beginUndoableChange("stdDeviation", [filter?filter.firstChild:null]);
 		if(complete) {
 			canvas.setBlurNoUndo(val);
 			finishChange();
@@ -9564,12 +9171,12 @@ var changeSelectedAttributeNoUndo = function(attr, newValue, elems) {
 // elems - The DOM elements to apply the change to
 var changeSelectedAttribute = this.changeSelectedAttribute = function(attr, val, elems) {
 	var elems = elems || selectedElements;
-	canvas.beginUndoableChange(attr, elems);
+	canvas.undoMgr.beginUndoableChange(attr, elems);
 	var i = elems.length;
 
 	changeSelectedAttributeNoUndo(attr, val, elems);
 
-	var batchCmd = canvas.finishUndoableChange();
+	var batchCmd = canvas.undoMgr.finishUndoableChange();
 	if (!batchCmd.isEmpty()) { 
 		addCommandToHistory(batchCmd);
 	}

editor/svgutils.js

@@ -175,8 +175,7 @@ svgedit.utilities.convertToXMLReferences = function(input) {
 		var c = input.charCodeAt(n);
 		if (c < 128) {
 			output += input[n];
-		}
+		} else if(c > 127) {
-		else if(c > 127) {
 			output += ("&#" + c + ";");
 		}
 	}

test/all_tests.html

@@ -7,8 +7,9 @@
   <h1>All SVG-edit Tests</h1>
   <p>This file frames all SVG-edit test pages.  This should only include tests known to work.  These tests are known to pass 100% in the following:  Firefox 3.6, Chrome 7, IE9 Preview 6 (1.9.8006.6000), Opera 10.63.  If a test is broken in this page, it is possible that <em>YOU</em> broke it.  Please do not submit code that breaks any of these tests.</p>
   <iframe src='svgtransformlist_test.html' width='100%' height='300'></iframe>
-  <iframe src='svgutils_test.html' width='100%' height='300'></iframe>
   <iframe src='math_test.html' width='100%' height='300'></iframe>
+  <iframe src='svgutils_test.html' width='100%' height='300'></iframe>
+  <iframe src='history_test.html' width='100%' height='300'></iframe>
 </body>
 <script>
 window.setTimeout(function() {

test/history_test.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
+  <script src='../editor/jquery.js'></script>
+  <script type='text/javascript' src='../editor/svgtransformlist.js'></script>
+  <script type='text/javascript' src='../editor/history.js'></script>
+  <script type='text/javascript' src='../editor/svgutils.js'></script>
+  <script type='text/javascript' src='qunit/qunit.js'></script>  
+  <script type='text/javascript'>
+  $(function() {
+  	// log function
+  	QUnit.log = function(result, message) {
+		if (window.console && window.console.log) {
+			window.console.log(result +' :: '+ message);
+		}
+	};
+
+	var svgns = 'http://www.w3.org/2000/svg';
+	var svg = document.createElementNS(svgns, 'svg');
+
+	module('svgedit.history Module');
+
+	test('Test svgedit.history package', function() {
+		expect(13);
+		
+		ok(svgedit.history);
+		ok(svgedit.history.MoveElementCommand);
+		ok(svgedit.history.InsertElementCommand);
+		ok(svgedit.history.ChangeElementCommand);
+		ok(svgedit.history.RemoveElementCommand);
+		ok(svgedit.history.BatchCommand);
+		ok(svgedit.history.UndoManager);
+		equals(typeof svgedit.history.MoveElementCommand, typeof function(){});
+		equals(typeof svgedit.history.InsertElementCommand, typeof function(){});
+		equals(typeof svgedit.history.ChangeElementCommand, typeof function(){});
+		equals(typeof svgedit.history.RemoveElementCommand, typeof function(){});
+		equals(typeof svgedit.history.BatchCommand, typeof function(){});
+		equals(typeof svgedit.history.UndoManager, typeof function(){});
+	});
+  });
+  </script>
+</head>  
+<body>  
+  <h1 id='qunit-header'>Unit Tests for history.js</h1>
+  <h2 id='qunit-banner'></h2>
+  <h2 id='qunit-userAgent'></h2>
+  <ol id='qunit-tests'>
+  </ol>
+</body>  
+</html>

test/svgutils_test.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html>  
+<html>
-<head>  
+<head>
-  <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>  
+  <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
   <script src='../editor/jquery.js'></script>
   <!-- svgutils.js depends on these two... mock out? -->
   <script type='text/javascript' src='../editor/browsersupport.js'></script>
@@ -80,7 +80,6 @@
 		var convert = svgedit.utilities.convertToXMLReferences;
 		equals(convert('ABC'), 'ABC');
 //		equals(convert('ÀBC'), '&#192;BC');
-//		alert(convert('ÿBC', true));
 	});
 
 	test('Test svgedit.utilities.bboxToObj() function', function() {
@@ -101,6 +100,16 @@
 		equals(obj.height, 4);
 	});
 
+	
+	test("Test getUrlFromAttr", function() {
+		expect(4);
+		
+		equal(svgedit.utilities.getUrlFromAttr("url(#foo)"), "#foo");
+		equal(svgedit.utilities.getUrlFromAttr("url(somefile.svg#foo)"), "somefile.svg#foo");
+		equal(svgedit.utilities.getUrlFromAttr("url('#foo')"), "#foo");
+		equal(svgedit.utilities.getUrlFromAttr('url("#foo")'), "#foo");
+	});
+
   }); 
   </script>  
 </head>  

test/test1.html

@@ -11,6 +11,7 @@
   <script type="text/javascript" src="../editor/units.js"></script>
   <script type="text/javascript" src="../editor/svgutils.js"></script>
   <script type="text/javascript" src="../editor/sanitize.js"></script>
+  <script type="text/javascript" src="../editor/history.js"></script>
   <script type="text/javascript" src="../editor/svgcanvas.js"></script>
   <script type="text/javascript" src="qunit/qunit.js"></script>  
   <script type="text/javascript">
@@ -128,15 +129,6 @@
 		equal(nfu, null, "Removed <use> element that had no href");
 	});
 	
-	test("Test getUrlFromAttr", function() {
-		expect(4);
-		
-		equal(svgCanvas.getUrlFromAttr("url(#foo)"), "#foo");
-		equal(svgCanvas.getUrlFromAttr("url(somefile.svg#foo)"), "somefile.svg#foo");
-		equal(svgCanvas.getUrlFromAttr("url('#foo')"), "#foo");
-		equal(svgCanvas.getUrlFromAttr('url("#foo")'), "#foo");
-	});
-	
 	// This test shows that an element with an invalid attribute is still parsed in properly
 	// and only the attribute is not imported
 	test("Test invalid attribute", function() {