first
This commit is contained in:
adrianvic
commit
59426d62fb
102 changed files with 42796 additions and 0 deletions
493
Controls/Canvas/Canvas.js
Normal file
493
Controls/Canvas/Canvas.js
Normal file
|
|
@ -0,0 +1,493 @@
|
|||
////////////////////////////////////////////////////////////
|
||||
//// © Microsoft. All rights reserved. ////
|
||||
////////////////////////////////////////////////////////////
|
||||
|
||||
/// <reference path="Paint.js" />
|
||||
/// <reference path="Painter.js" />
|
||||
|
||||
(function (AppNS) {
|
||||
"use strict";
|
||||
var WinUtils = WinJS.Utilities;
|
||||
|
||||
// Enum of pointer event information
|
||||
var pointerInfo = {
|
||||
|
||||
// Pointer type
|
||||
touch: 2,
|
||||
pen: 3,
|
||||
mouse: 4,
|
||||
|
||||
// Button pressed
|
||||
noButtons: 0,
|
||||
leftButton: 1,
|
||||
rightButton: 2,
|
||||
middleButton: 4,
|
||||
};
|
||||
|
||||
var layoutState = Windows.UI.ViewManagement.ApplicationLayoutState;
|
||||
|
||||
function fragmentLoad(root, state) {
|
||||
// Set up canvas dimensions
|
||||
var canvas = root.querySelector("#paintCanvas");
|
||||
canvas.height = state.canvasHeight - state.canvasBorder;
|
||||
canvas.style.height = canvas.height + "px";
|
||||
canvas.width = state.canvasWidth - state.canvasBorder * 2;
|
||||
canvas.style.width = canvas.width + "px";
|
||||
|
||||
var eventHost = document.createElement("div");
|
||||
var pointerDown = [];
|
||||
var Painter = AppNS.Painter;
|
||||
var mainPainter = new Painter.Painter(canvas);
|
||||
var canvasBlocked = false;
|
||||
var classes = { pannable: "pannable" };
|
||||
var undoBlobPrefix = "undoBlob-";
|
||||
|
||||
// Initialize canvas with saved blob
|
||||
if (state.canvasBlobName) {
|
||||
Windows.Storage.ApplicationData.current.localFolder.getFileAsync(state.canvasBlobName)
|
||||
.then(function (file) {
|
||||
var url = URL.createObjectURL(file, false);
|
||||
var img = document.createElement("img");
|
||||
img.addEventListener("load", function () {
|
||||
canvas.getContext("2d").drawImage(img, 0, 0);
|
||||
});
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize undo stack
|
||||
if (state.undoBlobNames) {
|
||||
for (var i = 0, len = state.undoBlobNames.length; i < len; i++) {
|
||||
var blobName = state.undoBlobNames[i];
|
||||
Windows.Storage.ApplicationData.current.localFolder.getFileAsync(blobName)
|
||||
.then(function (file) {
|
||||
var url = URL.createObjectURL(file, false);
|
||||
var img = document.createElement("img");
|
||||
var tempCanvas = document.createElement("canvas");
|
||||
tempCanvas.height = canvas.height;
|
||||
tempCanvas.width = canvas.width;
|
||||
img.addEventListener("load", function () {
|
||||
var context = tempCanvas.getContext("2d");
|
||||
context.drawImage(img, 0, 0);
|
||||
mainPainter.canvas.history.push(context.getImageData(0, 0, mainPainter.canvas.domCanvas.offsetWidth, mainPainter.canvas.domCanvas.offsetHeight));
|
||||
mainPainter.canvas.maxIndex++;
|
||||
mainPainter.canvas.index++;
|
||||
});
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
AppNS.CanvasManager.loadAllTools(mainPainter);
|
||||
|
||||
// Initialize canvas
|
||||
var toolName = state.toolName || AppNS.CanvasManager.ToolNames.Marker;
|
||||
var toolCard = AppNS.CanvasManager.ToolCards[toolName];
|
||||
mainPainter.toolName = toolName;
|
||||
mainPainter.tool.width = state.width || toolCard.supportedSizes[toolCard.defaultSizeIndex];
|
||||
|
||||
if (state.toolOptionValueIndex || state.toolOptionValueIndex === 0) {
|
||||
mainPainter.tool[toolCard.optionKey] = toolCard.optionValues[state.toolOptionValueIndex];
|
||||
}
|
||||
|
||||
function downListener(event) {
|
||||
if (!pointerDown[event.pointerId] && (leftClick(event) || notMouse(event)) && !canvasBlocked) {
|
||||
mainPainter.drawStart(dataFromEvent(event));
|
||||
pointerDown[event.pointerId] = true;
|
||||
}
|
||||
}
|
||||
|
||||
function moveListener(event) {
|
||||
if (pointerDown[event.pointerId] && !canvasBlocked) {
|
||||
mainPainter.draw(dataFromEvent(event));
|
||||
}
|
||||
}
|
||||
|
||||
function upListener(event) {
|
||||
if (pointerDown[event.pointerId] && !canvasBlocked) {
|
||||
mainPainter.drawStop(dataFromEvent(event));
|
||||
AppNS.ToolbarManager.showUndo();
|
||||
pointerDown[event.pointerId] = false;
|
||||
}
|
||||
}
|
||||
|
||||
function dataFromEvent(event) {
|
||||
var data = {};
|
||||
data.x = event.offsetX;
|
||||
data.y = event.offsetY;
|
||||
data.id = event.pointerId;
|
||||
return data;
|
||||
}
|
||||
|
||||
function notMouse(event) {
|
||||
return (event.pointerType !== pointerInfo.mouse);
|
||||
}
|
||||
|
||||
function leftClick(event) {
|
||||
return (event.pointerType === pointerInfo.mouse && event.button === pointerInfo.leftButton);
|
||||
}
|
||||
|
||||
// Event listeners for the canvas
|
||||
canvas.addEventListener("MSPointerDown", downListener);
|
||||
canvas.addEventListener("MSPointerOver", downListener);
|
||||
canvas.addEventListener("MSPointerMove", moveListener);
|
||||
canvas.addEventListener("MSPointerOut", upListener);
|
||||
canvas.addEventListener("MSPointerUp", upListener);
|
||||
|
||||
WinJS.Namespace.defineWithParent(AppNS, "CanvasManager", {
|
||||
color: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Gets the current color string value
|
||||
/// </summary>
|
||||
return mainPainter.color.toString();
|
||||
},
|
||||
|
||||
set: function (newColor) {
|
||||
/// <summary>
|
||||
/// Sets the current color string value
|
||||
/// </summary>
|
||||
/// <param name='newColor'>
|
||||
/// The string value for the color
|
||||
/// </param>
|
||||
var color = new Painter.Graphics.Color();
|
||||
color.fromString(newColor);
|
||||
mainPainter.color = color;
|
||||
}
|
||||
},
|
||||
|
||||
clearCanvas: function () {
|
||||
/// <summary>
|
||||
/// Resets the canvas to a blank state
|
||||
/// </summary>
|
||||
mainPainter.canvas.clear();
|
||||
AppNS.ToolbarManager.showUndo();
|
||||
},
|
||||
|
||||
undoCanvas: function () {
|
||||
/// <summary>
|
||||
/// Undoes the last stroke
|
||||
/// </summary>
|
||||
if (mainPainter.canvas.canUndo()) {
|
||||
mainPainter.canvas.undo();
|
||||
}
|
||||
AppNS.ToolbarManager.hideUndo();
|
||||
},
|
||||
|
||||
canUndo: function () {
|
||||
/// <summary>
|
||||
/// Returns whether or not another undo action can be executed
|
||||
/// </summary>
|
||||
/// <return>
|
||||
/// Boolean representing whether or not another undo action can be executed
|
||||
/// </return>
|
||||
return mainPainter.canvas.canUndo();
|
||||
},
|
||||
|
||||
redoCanvas: function () {
|
||||
/// <summary>
|
||||
/// Redoes the last stroke
|
||||
/// </summary>
|
||||
if (mainPainter.canvas.canRedo()) {
|
||||
mainPainter.canvas.redo();
|
||||
}
|
||||
AppNS.ToolbarManager.showUndo();
|
||||
},
|
||||
|
||||
toolWidth: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Sets current tool
|
||||
/// </summary>
|
||||
/// <param name='newBrush'>
|
||||
/// The string value for the tool
|
||||
/// </param>
|
||||
return mainPainter.tool.width;
|
||||
},
|
||||
|
||||
set: function (newWidth) {
|
||||
/// <summary>
|
||||
/// Sets the current tool width
|
||||
/// </summary>
|
||||
/// <param name='newWidth'>
|
||||
/// The width value in pixels
|
||||
/// </param>
|
||||
mainPainter.tool.width = newWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getToolProperty: function (optionKey) {
|
||||
/// <summary>
|
||||
/// Gets the tool specific property
|
||||
/// </summary>
|
||||
/// <param name='optionKey'>
|
||||
/// The property key to be returned
|
||||
/// </param>
|
||||
/// <return>
|
||||
/// The value currently assigned to the property. Can be any type.
|
||||
/// </return>
|
||||
return mainPainter.tool[optionKey];
|
||||
},
|
||||
|
||||
setToolProperty: function (optionKey, optionValue) {
|
||||
/// <summary>
|
||||
/// Sets the tool specific property
|
||||
/// </summary>
|
||||
/// <param name='optionKey'>
|
||||
/// The property key to be set
|
||||
/// </param>
|
||||
/// <param name='optionValue'>
|
||||
/// The value to be set
|
||||
/// </param>
|
||||
mainPainter.tool[optionKey] = optionValue;
|
||||
},
|
||||
|
||||
tool: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns the current tool
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Tool
|
||||
/// </returns>
|
||||
return mainPainter.tool;
|
||||
},
|
||||
|
||||
set: function (newBrush) {
|
||||
/// <summary>
|
||||
/// Sets current tool
|
||||
/// </summary>
|
||||
/// <param name='newBrush'>
|
||||
/// The string value for the tool
|
||||
/// </param>
|
||||
mainPainter.tool = newBrush;
|
||||
}
|
||||
},
|
||||
|
||||
canvasBitmap: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns the current image data on the canvas
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// ImageData
|
||||
/// </returns>
|
||||
return mainPainter.canvas.context.getImageData(0, 0, mainPainter.canvas.domCanvas.offsetWidth, mainPainter.canvas.domCanvas.offsetHeight);
|
||||
},
|
||||
|
||||
set: function (imageData) {
|
||||
/// <summary>
|
||||
/// Sets the image data displayed on the canvas
|
||||
/// </summary>
|
||||
/// <param name='imageData'>
|
||||
/// ImageData object to be displayed
|
||||
/// </param>
|
||||
mainPainter.canvas.context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
},
|
||||
|
||||
getScaledCanvasBlob: function (height, width) {
|
||||
/// <summary>
|
||||
/// Returns the a scaled canvas blob
|
||||
/// </summary>
|
||||
/// <param name='height'>
|
||||
/// Height of the new canvas blob
|
||||
/// </param>
|
||||
/// <param name='width'>
|
||||
/// Width of the new canvas blob
|
||||
/// </param>
|
||||
/// <returns>
|
||||
/// Blob
|
||||
/// </returns>
|
||||
var newCanvas = document.createElement("canvas");
|
||||
var context = newCanvas.getContext("2d");
|
||||
newCanvas.width = width;
|
||||
newCanvas.height = height;
|
||||
context.drawImage(mainPainter.canvas.domCanvas, 0, 0, width, height);
|
||||
return newCanvas.msToBlob();
|
||||
},
|
||||
|
||||
canvasBlob: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns the current image data on the canvas as a blob
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Blob
|
||||
/// </returns>
|
||||
return mainPainter.canvas.domCanvas.msToBlob();
|
||||
}
|
||||
},
|
||||
|
||||
undoBlobNames: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns an array with the names identifying the undo blobs indexed chronologically
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Array of strings
|
||||
/// </returns>
|
||||
var blobNames = [];
|
||||
for (var i = mainPainter.canvas.minIndex; i < mainPainter.canvas.index; i++) {
|
||||
blobNames.push(undoBlobPrefix + (i - mainPainter.canvas.minIndex));
|
||||
}
|
||||
return blobNames;
|
||||
}
|
||||
},
|
||||
|
||||
undoBlobs: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns an object with the undo stack blobs
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Object in which keys are the blob names strings and values are blobs
|
||||
/// </returns>
|
||||
var blobs = {};
|
||||
for (var i = mainPainter.canvas.minIndex; i < mainPainter.canvas.index; i++) {
|
||||
var tempCanvas = document.createElement("canvas");
|
||||
tempCanvas.height = mainPainter.canvas.domCanvas.height;
|
||||
tempCanvas.width = mainPainter.canvas.domCanvas.width;
|
||||
tempCanvas.getContext("2d").putImageData(mainPainter.canvas.history[i], 0, 0);
|
||||
blobs[undoBlobPrefix + (i - mainPainter.canvas.minIndex)] = tempCanvas.msToBlob();
|
||||
}
|
||||
return blobs;
|
||||
}
|
||||
},
|
||||
|
||||
// Saves the current canvas to a file in the pictures library.
|
||||
// File name will be 'Painting <date>'.
|
||||
saveCanvas: function () {
|
||||
var filename = "Painting.png";
|
||||
AppNS.Utils.writeBlobToPicturesFolderAsync(this.canvasBlob, filename);
|
||||
},
|
||||
|
||||
canvasBlocked: {
|
||||
set: function (cBlocked) {
|
||||
/// <summary>
|
||||
/// Sets whether the drawing on canvas is disabled or enabled
|
||||
/// </summary>
|
||||
/// <param name='cBlocked'>
|
||||
/// Boolean representing wether or not the canvas is blocked
|
||||
/// </param>
|
||||
if (typeof cBlocked === "boolean") {
|
||||
canvasBlocked = cBlocked;
|
||||
}
|
||||
},
|
||||
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns whether the drawing on canvas is disabled or enabled
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Boolean
|
||||
/// </returns>
|
||||
return canvasBlocked;
|
||||
}
|
||||
},
|
||||
|
||||
canvasPannable: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns whether or not the canvas is pannable
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Boolean
|
||||
/// </returns>
|
||||
return root.className.indexOf(classes.pannable) !== -1;
|
||||
},
|
||||
|
||||
set: function (isPannable) {
|
||||
/// <summary>
|
||||
/// Enables or disables panning on the canvas
|
||||
/// </summary>
|
||||
/// <param name='isPannable'>
|
||||
/// Boolean representing wether or not the canvas is pannable
|
||||
/// </param>
|
||||
if (isPannable) {
|
||||
WinUtils.addClass(root, classes.pannable);
|
||||
} else {
|
||||
WinUtils.removeClass(root, classes.pannable);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
changeLayout: function (newLayout) {
|
||||
/// <summary>
|
||||
/// Changes the canvas layout to a specified layout such as snap or fill
|
||||
/// </summary>
|
||||
|
||||
// Reposition scroll for snap and fill view
|
||||
if (newLayout !== layoutState.fullScreen) {
|
||||
root.scrollLeft = (canvas.width - window.innerWidth) / 2;
|
||||
}
|
||||
},
|
||||
|
||||
addEventListener: function (eventName, eventCallback, capture) {
|
||||
/// <summary>
|
||||
/// Registers an event handler for the specified event type
|
||||
/// </summary>
|
||||
/// <param name='eventName'>
|
||||
/// The type of event type to register
|
||||
/// </param>
|
||||
/// <param name='eventCallback'>
|
||||
/// The event handler function to associate with the event
|
||||
/// </param>
|
||||
/// <param name='capture'>
|
||||
/// A Boolean value that specifies the event phase to add the event handler for:
|
||||
/// true
|
||||
/// Register the event handler for the capturing phase
|
||||
/// false
|
||||
/// Register the event handler for the bubbling phase
|
||||
/// </param>
|
||||
/// <returns>
|
||||
/// None
|
||||
/// </returns>
|
||||
|
||||
eventHost.addEventListener(eventName, eventCallback, capture);
|
||||
},
|
||||
|
||||
removeEventListener: function (eventName, eventCallback, capture) {
|
||||
/// <summary>
|
||||
/// Removes an event handler that the addEventListener method registered
|
||||
/// </summary>
|
||||
/// <param name='eventName'>
|
||||
/// The event type that the event handler is registered for
|
||||
/// </param>
|
||||
/// <param name='eventCallback'>
|
||||
/// The event handler function to remove
|
||||
/// </param>
|
||||
/// <param name='capture'>
|
||||
/// A Boolean value that specifies the event phase to add the event handler for:
|
||||
/// true
|
||||
/// Remove the capturing phase event handler
|
||||
/// false
|
||||
/// Remove the bubbling phase event handler
|
||||
/// </param>
|
||||
/// <returns>
|
||||
/// None
|
||||
/// </returns>
|
||||
|
||||
eventHost.removeEventListener(eventName, eventCallback, capture);
|
||||
},
|
||||
|
||||
// Raises an event to listeners
|
||||
_fireEvent: function (eventName, payload) {
|
||||
if (document.createEvent) {
|
||||
var eventObject = document.createEvent("Event");
|
||||
eventObject.initEvent(eventName, true, false);
|
||||
|
||||
if (payload) {
|
||||
eventObject.payload = payload;
|
||||
}
|
||||
|
||||
eventHost.dispatchEvent(eventObject);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
WinJS.Namespace.defineWithParent(AppNS, "CanvasManager", {
|
||||
fragmentLoad: fragmentLoad,
|
||||
});
|
||||
})(Microsoft.Paint);
|
||||
Reference in a new issue