Open file
<body>
<div id="container">
<div class="undo-redo-buttons">
<button class="undo-button" title="Undo">&#x293A;</button>
<button class="redo-button" title="Redo">&#x293B;</button>
<button class="reload-button" title="Reload this demo">&#x21BB;</button>
</div>
<div class="demo-container">
<div class="demo-editor-canvas">
<script type="text/x-template" id="template-demo-editor-area">
<div class="demo-editor-area" id="demo-editor-area-<%= id %>" style="top:<%= Math.min(startY,endY) %>px; left:<%= Math.min(startX,endX) %>px; width:<%= Math.abs(startX - endX) %>px; height:<%= Math.abs(startY - endY) %>px; z-index: <%= zIndex %>">
<div class="demo-editor-area-content" style="background-color:<%= color %>;"></div>
<div class="demo-editor-handle demo-editor-handle-nw" data-direction="nw"></div>
<div class="demo-editor-handle demo-editor-handle-ne" data-direction="ne"></div>
<div class="demo-editor-handle demo-editor-handle-se" data-direction="se"></div>
<div class="demo-editor-handle demo-editor-handle-sw" data-direction="sw"></div>
</div>
</script>
</div>
<button class="demo-editor-new-area">+</button>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='../js/jquery.min.js'>\x3C/script>")</script>
<script>
(function ($, _) {
$.fn.disable = function () { return this.attr("disabled", "disabled"); }
$.fn.enable = function () { return this.removeAttr("disabled"); }
$.fn.isDisabled = function () { return this.attr("disabled") === "disabled"; }
})(window.jQuery, window._);
</script>
<script src="../js/underscore.js"></script>
<script src="../js/backbone.js"></script>
<script src="../js/Backbone.Undo.js"></script>

<script src="../js/demo-editor.js"></script>
<script>
(function ($, Backbone, _) {
var undoManager = new Backbone.UndoManager({
track: true,
register: window.demoEditor
});

Backbone.UndoManager.removeUndoType("change");

var before;
Backbone.UndoManager.addUndoType("change:isChanging", {
"on": function (model, isChanging, options) {
if (isChanging) {
before = model.toJSON();
} else {
return {
"object": model,
"before": before,
"after": model.toJSON()
}
}
},
"undo": function (model, before, after, options) {
model.set(before);
},
"redo": function (model, before, after, options) {
model.set(after);
}
});

/**
* Undobuttons
*/

var undoButton = $(".undo-button"),
redoButton = $(".redo-button");

undoManager.on("all", function (type) {
switch (type) {
case "undo":
if (!undoManager.isAvailable("undo") && !undoButton.isDisabled()) {
undoButton.disable();
}
if (undoManager.isAvailable("redo") && redoButton.isDisabled()) {
redoButton.enable();
}
break;
case "redo":
if (!undoManager.isAvailable("redo") && !redoButton.isDisabled()) {
redoButton.disable();
}
if (undoManager.isAvailable("undo") && undoButton.isDisabled()) {
undoButton.enable();
}
break;
}
})
undoManager.trigger("undo redo");

undoManager.stack.on("add", function () {
if (undoManager.isAvailable("undo")) {
undoButton.enable();
}
if (!undoManager.isAvailable("redo")) {
redoButton.disable();
}
})

undoButton.click(function () {
undoManager.undo();
})
redoButton.click(function () {
undoManager.redo();
})

$(".reload-button").click(function () {
window.location.reload();
})
})(window.jQuery, window.Backbone, window._);
</script>
</body>