first

Controls/Paint/Graphics/Canvas.js

@@ -0,0 +1,104 @@
+////////////////////////////////////////////////////////////
+////   © Microsoft. All rights reserved.                ////
+////////////////////////////////////////////////////////////
+
+(function (AppNS) {
+    'use strict';
+
+    var Canvas = WinJS.Class.define(
+
+        // Constructor
+        function (domCanvas) {
+            this.domCanvas = domCanvas;
+            this.context = domCanvas.getContext("2d");
+            this.depth = 10;
+            this.history = [];
+            this.index = 0;
+            this.minIndex = 0;
+            this.maxIndex = 0;
+            this.history[this.index] = this.context.getImageData(0, 0, this.domCanvas.width, this.domCanvas.height);
+        },
+
+        // Variables and Methods
+        {
+            // Returns the color of the pixel at the given position
+            getColorAt: function (color, x, y) {
+                var imgData = this.context.getImageData(x, y, 1, 1);
+                color.fromData(imgData.data);
+            },
+
+            // Draws a circle using the current fill style at the given position with
+            // the given radius.
+            drawCircle: function (x, y, r) {
+                this.context.beginPath();
+                this.context.arc(x, y, r, 0, Math.PI * 2, true);
+                this.context.closePath();
+                this.context.fill();
+            },
+
+            // Saves the current state of the canvas, deleting all previously undone (future or forward) state.
+            saveState: function () {
+                this.index++;
+                this.maxIndex = this.index;
+                if (this.maxIndex - this.minIndex > this.depth) {
+                    this.history[this.minIndex] = null;
+                    this.minIndex = this.maxIndex - this.depth;
+                }
+                this.history[this.index] = this.context.getImageData(0, 0, this.domCanvas.width, this.domCanvas.height);
+            },
+
+            // Loads the state stored at the given index into the canvas
+            loadState: function (i) {
+                if (i >= this.minIndex && i <= this.maxIndex) {
+                    this.index = i;
+                    this.context.putImageData(this.history[this.index], 0, 0);
+                } else {
+                    throw new Error("PaintPlay - Error: Index out of bounds");
+                }
+            },
+
+            // Returns true if able to undo (still some past actions)
+            canUndo: function () { 
+                return this.index > this.minIndex; 
+            },
+
+            // Returns true if able to redo (still some future actions)
+            canRedo: function () { 
+                return this.index < this.maxIndex; 
+            },
+
+            // Undoes the last action (goes back one step in state history)
+            undo: function () {
+                if (this.canUndo()) {
+                    this.loadState(this.index - 1);
+                }
+            },
+
+            // Redoes the next action (goes forward one step in state history)
+            redo: function () {
+                if (this.canRedo()) {
+                    this.loadState(this.index + 1);
+                }
+            },
+
+            // Clears the canvas.
+            clear: function () {
+                this.context.clearRect(0, 0, this.domCanvas.width, this.domCanvas.height);
+                this.saveState();
+            },
+
+            // Returns an image object containing the current state of the canvas.
+            getImage: function () {
+                var img = new Image();
+                var imgSrc = this.domCanvas.toDataURL("image/png");
+                img.src = imgSrc;
+                return img;
+            },
+        }
+    );
+
+    WinJS.Namespace.defineWithParent(AppNS, "Painter.Graphics", {
+        Canvas: Canvas
+    });
+
+})(Microsoft.Paint);