tenkuma/PaintPlay
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first

Browse source
This commit is contained in:
adrianvic 2023-12-21 14:33:34 -03:00
commit 59426d62fb
102 changed files with 42796 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

173
JS/CommandBar/CommandBar.css Normal file
View file

@ -0,0 +1,173 @@
.win-commandBar-horiz
{
font-size: 10pt;
margin: 0px 36px 0px 36px;
}
.win-commandBar-horiz[appLayout='0']
{
margin: 0px;
}
.win-commandBar-stack-vert button
{
width: 100%;
}
.win-commandBar-stack-horiz[stack='left']
{
float: left;
}
.win-commandBar-stack-horiz[stack='right']
{
float: right;
}
.win-commandBar-stack-test
{
position: absolute;
visibility: hidden;
}
.win-commandBar-group-horiz
{
display: inline;
}
.minimized *[data-win-minimize]
{
display: none !important;
}
.win-commandBar-command-horiz
{
background-color: transparent;
border: none;
color: #FFFFFF;
height: 88px;
margin: 0px;
padding: 14px 0px 10px 0px !important;
text-align: center;
width: 100px;
}
.win-commandBar-command-horiz div.commandLabel
{
display: inline-block;
font-family: Segoe UI;
font-size: 10pt;
margin-top: 5px;
padding: 0px;
text-align: center;
width: 88px;
}
.win-commandBar-command-horiz img.commandIcon
{
height: 40px;
width: 40px;
}
.win-commandBar-command-vert
{
display: block;
float: none !important;
}
.win-commandBar-hostedCommand-horiz
{
display: inline;
}
.minimized .win-commandBar-rule-horiz
{
margin-bottom: 0px;
}
.win-commandBar-rule-vert
{
background-color: #707070;
height: 1px;
width: 100%;
}
.win-commandBar-rule-horiz
{
background-color: #707070;
border: 0px;
display: inline-block;
height: 40px;
margin: 10px 29px 21px 28px;
padding: 0px;
width: 1px;
}
.win-commandBar-tooltip
{
background-color: #FFFFFF;
border: 1px solid #2A2A2A;
display: inline-block;
max-width: 360px;
min-width: 200px;
padding: 3px 12px 6px 12px;
}
/*
This is the container for the tooltip heading, e.g. "Play Now (Ctrl+P)",
where "Play Now is the title and "(Ctrl+P)" is the shortcut.
*/
.win-commandBar-tooltip-heading
{
display: -ms-box;
overflow: hidden;
}
/*
This is the command title, which can use all of the extra space left once
the shortcut is rendered. If the title is too long to fit in that space
and the tooltip reaches its maximum width, the title is truncated with
an ellipsis.
*/
.win-commandBar-tooltip-title
{
-ms-box-flex: 1;
padding-right: 5px;
}
/*
This is an empty div that keeps the shortcut div pushed against the right
side of the title div.
*/
.win-commandBar-tooltip-flex
{
-ms-box-flex: 1000;
}
.win-commandBar-tooltip-description
{
line-height: 14px;
}
.win-tooltip
{
line-height: normal;
padding: 0px;
background-color: transparent;
border: none;
}
.win-appbar
{
line-height: normal;
}
.win-appbar[transparent='true']
{
background-color: transparent;
}
.win-commandBar-flyout
{
padding: 0px;
}

1821
JS/CommandBar/CommandBar.js Normal file
View file

File diff suppressed because it is too large Load diff

26
JS/CommandBar/Flyout.css Normal file
View file

@ -0,0 +1,26 @@
.win-mediaFlyout
{
border: none;
line-height: normal;
padding: 0px;
}
.win-mediaFlyout-content
{
opacity: 0;
visibility: hidden;
z-index: 1001; /* Should be 1 higher than the background */
}
.win-mediaFlyout-background
{
background-color: rgba(0, 0, 0, 0);
background-image: url(Res/1x1.gif);
background-size: 100%;
height: 100vh;
left: 0;
top: 0;
visibility: hidden;
width: 100vw;
z-index: 1000; /* Z-index of AppBar is 999, flyout needs to be higher */
}

319
JS/CommandBar/Flyout.js Normal file
View file

@ -0,0 +1,319 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
/// <reference path="WinLib/Js/animations.js" />
/// <reference path="WinLib/Js/base.js" />
/// <reference path="WinLib/Js/ui.js" />
(function (WinNS) {
var Utilities = WinJS.Utilities;
var WinUI = WinJS.UI;
var Animation = WinJS.UI.Animation;
var elementIsInvalid = "Invalid argument: Control expects a valid DOM element as the first argument.";
var systemMargin = 20; // flyout cannot get closer than 45px to the edge of the screen
var Controls = WinJS.Namespace.defineWithParent(WinNS, "MediaApp.Controls", {
Anchor: {
topLeft: "topLeft",
topRight: "topRight",
bottomRight: "bottomRight",
bottomLeft: "bottomLeft"
},
Flyout: WinJS.Class.define(function (element, options) {
if (!element) {
throw new Error(elementIsInvalid);
}
// Configure host element
if (this === window || this === Controls) {
var flyout = WinUI.getControl(element);
if (flyout) {
return flyout;
} else {
return new Controls.Flyout(element, options);
}
}
// Attach the JS object to the host DOM element.
WinUI.setControl(element, this);
this._anchor = "topLeft";
this._content = null;
this._position = { x: 0, y: 0 };
this._element = element;
Utilities.addClass(this.element, "win-mediaFlyout");
// Process options
this.anchor = options.anchor;
this.position = options.position;
// Create UI elements
var that = this;
this._backgroundDiv = document.createElement("div");
this._backgroundDiv.className = "win-mediaFlyout-background";
this._backgroundDiv.style.position = "absolute";
this._backgroundDiv.addEventListener("click", function () {
that.dismiss();
}, false);
this._contentDiv = document.createElement("div");
this._contentDiv.className = "win-mediaFlyout-content";
this._contentDiv.role = "dialog";
this._contentDiv.setAttribute("aria-label", options.ariaLabel || "Dialog");
this._contentDiv.style.position = "absolute";
this._contentDiv.addEventListener("focus", function () {
that._fireEvent("focus", null);
}, false);
this._escPressed = function (event) {
if (event.key === "Esc") {
event.stopPropagation();
window.removeEventListener("keypress", arguments.callee, false);
that.dismiss();
}
};
this.element.appendChild(this._contentDiv);
this.element.appendChild(this._backgroundDiv);
},
{
// Public properties
element: {
get: function () {
return this._element;
}
},
content: {
get: function () {
return this._content;
},
set: function (val) {
var oldSize = { height: this.height, width: this.width };
if (this._content) {
document.body.appendChild(this._content);
}
this._content = val;
var newSize = { height: this.height, width: this.width };
this._fireEvent("contentupdate", null);
if (oldSize.height !== newSize.height ||
oldSize.width !== newSize.width) {
this._fireEvent("resize", null);
}
}
},
height: {
get: function () {
return this._content ? this._content.offsetHeight : 0;
}
},
width: {
get: function () {
return this._content ? this._content.offsetWidth : 0;
}
},
anchor: {
get: function () {
return this._anchor;
},
set: function (val) {
if (Controls.Anchor[val]) {
this._anchor = val;
}
}
},
position: {
get: function () {
return this._position;
},
set: function (val) {
if (val && typeof val.x === "number") {
this._position.x = val.x;
}
if (val && typeof val.y === "number") {
this._position.y = val.y;
}
}
},
// Public methods
show: function MediaFlyout_show() {
if (this._content) {
Utilities.empty(this._contentDiv);
this._contentDiv.appendChild(this._content);
var posX = 0,
posY = 0,
viewportWidth = window.innerWidth,
viewportHeight = window.innerHeight;
posX = this._position.x || 0;
posY = this._position.y || 0;
// Make sure the target position is within the margins
if (posX < systemMargin) {
posX = systemMargin;
} else if (posX > viewportWidth - systemMargin) {
posX = viewportWidth - systemMargin;
}
if (posY < systemMargin) {
posY = systemMargin;
} else if (posY > viewportHeight - systemMargin) {
posY = viewportHeight - systemMargin;
}
// Compute the upper left corner coords
switch (this._anchor) {
case Controls.Anchor.topRight:
posX -= this.width;
break;
case Controls.Anchor.bottomRight:
posX -= this.width;
posY -= this.height;
break;
case Controls.Anchor.bottomLeft:
posY -= this.height;
break;
}
// Ensure a good on-screen fit
if (this._anchor === Controls.Anchor.topLeft || this._anchor === Controls.Anchor.bottomLeft) {
if (posX + this.width > viewportWidth - systemMargin) {
// If it will fit, flip horizontally
if (posX - this.width > systemMargin) {
posX -= this.width;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.width = viewportWidth - posX - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
if (this._anchor === Controls.Anchor.topLeft || this._anchor === Controls.Anchor.topRight) {
if (posY + this.height > viewportHeight - systemMargin) {
// If it will fit, flip vertically
if (posY - this.height > systemMargin) {
posY -= this.height;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.height = viewportHeight - posY - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
if (this._anchor === Controls.Anchor.bottomLeft || this._anchor === Controls.Anchor.bottomRight) {
if (posY < systemMargin) {
// If it will fit, flip vertically
if (posY + this.height < viewportHeight - systemMargin) {
posY += this.height;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.height = posY - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
if (this._anchor === Controls.Anchor.topRight || this._anchor === Controls.Anchor.bottomRight) {
if (posX < systemMargin) {
// If it will fit, flip horizontally
if (posX + this.width < viewportWidth - systemMargin) {
posX += this.width;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.width = posX - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
this._contentDiv.style.left = posX + "px";
this._contentDiv.style.top = posY + "px";
this._contentDiv.style.opacity = 1;
this._contentDiv.style.visibility = "visible";
this._backgroundDiv.style.visibility = "visible";
var that = this;
window.addEventListener("keypress", that._escPressed, false);
Animation.showPopup(this._contentDiv, { top: "0px", left: "0px" })
.then(function () {
that._fireEvent("show", null);
});
}
},
dismiss: function MediaFlyout_dismiss() {
this._contentDiv.style.opacity = 0;
this._contentDiv.style.visibility = "hidden";
this._backgroundDiv.style.visibility = "hidden";
var that = this;
// TODO: restore once animations complete correctly
/// Animation.hidePopup(this._contentDiv, { top: "0px", left: "0px" })
/// .then(function () {
/// that._fireEvent("dismiss", null);
/// });
this._fireEvent("dismiss", null);
},
addEventListener: function MediaFlyout_addEventListener(type, listener, useCapture) {
this.element.addEventListener(type, listener, useCapture);
},
removeEventListener: function MediaFlyout_removeEventListener(type, listener, useCapture) {
this.element.removeEventListener(type, listener, useCapture);
},
// Private methods
// Raises an event to external listeners with the specified name and payload
_fireEvent: function MediaFlyout_fireEvent(eventName, payload) {
if (document.createEvent) {
var eventObject = document.createEvent("Event");
eventObject.initEvent(eventName, true, false);
if (payload !== undefined) {
eventObject.payload = payload;
}
this.element.dispatchEvent(eventObject);
}
}
})
});
})(WinJS);

9
JS/Global.js Normal file
View file

@ -0,0 +1,9 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
(function () {
// Define app namespace
WinJS.Namespace.define("Microsoft.Paint", {
});
})();

29
JS/KeyManager.js Normal file
View file

@ -0,0 +1,29 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
(function (AppNS) {
"use strict";
function keyHandler(event) {
switch (event.keyCode) {
case 14: // ctrl-n: Clear/New canvas
AppNS.CanvasManager.clearCanvas();
break;
case 19: // ctrl-s: Save canvas
AppNS.CanvasManager.saveCanvas();
break;
case 25: // ctrl-y: Redo
AppNS.CanvasManager.redoCanvas();
break;
case 26: // ctrl-z: Undo
AppNS.CanvasManager.undoCanvas();
break;
}
console.log("Key Pressed: " + event.keyCode);
}
WinJS.Namespace.defineWithParent(AppNS, "KeyManager", {
keyHandler: keyHandler,
});
})(Microsoft.Paint);

41
JS/Main.js Normal file
View file

@ -0,0 +1,41 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
/// <reference path="ViewManager.js" />
(function (AppNS) {
"use strict";
var appLayout = Windows.UI.ViewManagement.ApplicationLayout.getForCurrentView();
var viewManager = null;
function activated(e) {
var Display = Windows.Graphics.Display;
Display.DisplayProperties.autoRotationPreferences = Display.DisplayOrientations.landscape | Display.DisplayOrientations.landscapeFlipped;
if (!AppNS.Utils.isLaunched) {
window.addEventListener("keypress", Microsoft.Paint.KeyManager.keyHandler);
viewManager = new AppNS.ViewManager(document.querySelector(".main-content"), AppNS.ViewCards);
viewManager.load(AppNS.ViewNames.PaintView);
WinJS.Namespace.defineWithParent(AppNS, "Utils", {
isLaunched: true
});
}
};
appLayout.addEventListener("layoutchanged", function (event) {
// Adding this to the end of the thread queue to give the window manager a chance to reset the window data.
msSetImmediate(function () {
viewManager.changeViewsLayout(event.layout);
});
});
Windows.UI.WebUI.WebUIApplication.addEventListener("suspending", function () {
viewManager.persistViewStates();
});
document.addEventListener("DOMContentLoaded", function () {
WinJS.UI.processAll();
});
Windows.UI.WebUI.WebUIApplication.addEventListener("activated", activated);
WinJS.Application.start();
})(Microsoft.Paint);

80
JS/PaintView.js Normal file
View file

@ -0,0 +1,80 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
// <reference path="../WinJS/js/ui.js" />
(function (AppNS) {
"use strict";
var canvasBlobName = "canvasBlob";
function fragmentLoad(root, state) {
if (!state) {
state = {};
}
var canvasHost = root.querySelector(".canvas"), toolbarHost = root.querySelector(".toolbar");
canvasHost.innerHTML = "";
toolbarHost.innerHTML = "";
state.toolbarHeight = toolbarHost.offsetHeight;
state.canvasHeight = canvasHost.offsetHeight;
if (Windows.Graphics.Display.DisplayProperties.currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscape ||
Windows.Graphics.Display.DisplayProperties.currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscapeFlipped) {
state.canvasWidth = window.screen.width;
state.toolbarWidth = window.screen.width;
} else {
state.canvasWidth = window.screen.height;
state.toolbarWidth = window.screen.height;
}
state.canvasBorder = 20;
WinJS.UI.Fragments.clone("/Controls/Canvas/Canvas.html")
.then(function (frag) {
canvasHost.appendChild(frag);
AppNS.CanvasManager.fragmentLoad(canvasHost, state);
document.body.focus();
})
.then(function () {
return WinJS.UI.Fragments.clone("/Controls/Toolbar/Toolbar.html");
})
.then(function (frag) {
toolbarHost.appendChild(frag);
AppNS.ToolbarManager.fragmentLoad(toolbarHost, state);
document.body.focus();
});
};
function getViewData() {
var ToolbarManager = AppNS.ToolbarManager;
var CanvasManager = AppNS.CanvasManager;
var viewData = {
colorId: ToolbarManager.colorId,
toolName: ToolbarManager.toolName,
width: CanvasManager.toolWidth,
toolOptionValueIndex: ToolbarManager.optionValueIndex,
currentSizePreviewIndexes: ToolbarManager.currentSizePreviewIndexes,
currentOptionPreviewIndexes: ToolbarManager.currentOptionPreviewIndexes,
undoBlobNames: CanvasManager.undoBlobNames,
canvasBlobName: canvasBlobName
};
return viewData;
};
function getViewBlobs() {
var viewBlobs = AppNS.CanvasManager.undoBlobs;
viewBlobs[canvasBlobName] = AppNS.CanvasManager.canvasBlob;
return viewBlobs;
}
function changeLayout(newLayout) {
AppNS.ToolbarManager.changeLayout(newLayout);
AppNS.CanvasManager.changeLayout(newLayout);
};
WinJS.Namespace.defineWithParent(AppNS, "PaintView", {
fragmentLoad: fragmentLoad,
getViewData: getViewData,
getViewBlobs: getViewBlobs,
changeLayout: changeLayout
});
})(Microsoft.Paint);

35
JS/Sharing.js Normal file
View file

@ -0,0 +1,35 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
(function (AppNS) {
var _onDeferredBitmapRequested = function SharingHandler_onDeferredFileItemsRequested(sender, event) {
/// <summary>
/// Delayed handling provider for the bitmap.
/// </summary>
/// <param name='sender'>
/// Windows.ApplicationModel.DataTransfer.DataPackage object.
/// </param>
/// <param name='event'>
/// Windows.ApplicationModel.DataTransfer.DataProviderArgs object.
/// </param>
var stream = AppNS.CanvasManager.canvasBlob.msRandomAccessStream;
var deferral = event.deferral;
var dataPackage = deferral.dataPackage;
dataPackage.setBitmap(stream);
deferral.complete();
};
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", function (event) {
// Set sharing properties
var data = event.request.data;
data.properties.title = "My PaintPlay Drawing"; // TODO: Win8Apps WORK 92: Add localization support
data.properties.description = "Check out what I drew with PaintPlay!"; // TODO: Win8Apps WORK 92: Add localization support
data.setDataProvider(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap, function (sender, event) {
_onDeferredBitmapRequested(sender, event);
});
});
})(Microsoft.Paint);

194
JS/StateManager.js Normal file
View file

@ -0,0 +1,194 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
/// <reference path="Global.js"/>
/// <reference path="Utilities.js"/>
(function (AppNS) {
// Error strings for logging purposes
var invalidKeyError = "Invalid argument: The specified key is not a non-empty string.";
var invalidValueError = "Invalid argument: The specified value is not valid.";
var storeValueError = "Error storing value '{0}' for key '{1}': '{2}'";
var getValueError = "Error getting value for key '{0}': '{1}'";
var removeError = "Error removing key '{0}': '{1}'";
// Local scope objects
var emptyFunction = function () {};
var localSettings = Windows.Storage.ApplicationData.current.localSettings.values;
// Etw with default noop handlers
var etw = {
stateManagerStoreValueStart: emptyFunction,
stateManagerStoreValueEnd: emptyFunction,
stateManagerGetValueStart: emptyFunction,
stateManagerGetValueEnd: emptyFunction
};
function validateKey(key) {
/// <summary>
/// Check if the given key is a non-empty string
/// </summary>
return (typeof key === "string" && key !== "");
};
/// <summary>
/// Static methods for manipulating persisted states in key/value pairs
/// </summary>
WinJS.Namespace.defineWithParent(AppNS, "StateManager", {
storeValue: function (key, value) {
/// <summary>
/// Stores the given key/value pair
/// </summary>
/// <param name='key'>
/// The name of the key the value is associated with
/// </param>
/// <param name='value'>
/// The value to store
/// </param>
/// <returns>
/// true if successful; false otherwise.
/// </returns>
if (!validateKey(key)) {
throw new Error(invalidKeyError);
}
if (value === undefined || value === null) {
throw new Error(invalidValueError);
}
etw.stateManagerStoreValueStart(key);
var succeeded = false;
try {
var valueToStore = "";
if (typeof value === "object") {
valueToStore = JSON.stringify(value);
} else {
valueToStore = value.toString();
}
localSettings.insert(key, valueToStore);
succeeded = true;
} catch (error) {
window.console.log("StateManager.storeValue", storeValueError.format([value, key, error]));
}
etw.stateManagerStoreValueEnd(key);
return succeeded;
},
getValueAsString: function (key) {
/// <summary>
/// Retrieves the value for the given key
/// </summary>
/// <param name='key'>
/// The name of the key to retrieve the value
/// </param>
/// <returns>
/// The string value associated with the given key,
/// or null if the key is not found or error.
/// </returns>
if (!validateKey(key)) {
throw new Error(invalidKeyError);
}
etw.stateManagerGetValueStart(key);
var value = null;
try {
value = localSettings.lookup(key);
} catch (error) {
window.console.log("StateManager.getValueAsString", getValueError.format([key, error]));
}
etw.stateManagerGetValueEnd(key);
return value;
},
getValueAsObject: function (key) {
/// <summary>
/// Retrieves the value for the given key and returns it as a JSON object
/// </summary>
/// <param name='key'>
/// The name of the key to retrieve the value
/// </param>
/// <returns>
/// The JSON value associated with the given key,
/// or null if the key is not found or error.
/// </returns>
if (!validateKey(key)) {
throw new Error(invalidKeyError);
}
etw.stateManagerGetValueStart(key);
var value = null;
try {
value = JSON.parse(localSettings.lookup(key));
} catch (error) {
window.console.log("StateManager.getValueAsObject", getValueError.format([key, error]));
}
etw.stateManagerGetValueEnd(key);
return value;
},
remove: function (key) {
/// <summary>
/// Removes the given key from the store
/// </summary>
/// <param name='key'>
/// The name of the key to be removed
/// </param>
/// <returns>
/// true if the key is successfully removed or not present; false otherwise.
/// </returns>
if (!validateKey(key)) {
throw new Error(invalidKeyError);
}
var succeeded = false;
try {
localSettings.remove(key);
succeeded = true;
} catch (error) {
window.console.log("StateManager.remove", removeError.format([key, error]));
}
return succeeded;
},
clear: function () {
/// <summary>
/// Clear all settings
/// </summary>
localSettings.clear();
},
init: function (etwProvider) {
/// <summary>
/// Initializes state manager
/// </summary>
/// <param name='etwProvider'>
/// etwProvider is a reference to the ETW provider for logging events.
/// </param>
if (etwProvider) {
etw.stateManagerStoreValueStart = etwProvider.stateManagerStoreValueStart || etw.stateManagerStoreValueStart;
etw.stateManagerStoreValueEnd = etwProvider.stateManagerStoreValueEnd || etw.stateManagerStoreValueEnd;
etw.stateManagerGetValueStart = etwProvider.stateManagerGetValueStart || etw.stateManagerGetValueStart;
etw.stateManagerGetValueEnd = etwProvider.stateManagerGetValueEnd || etw.stateManagerGetValueEnd;
}
}
});
})(Microsoft.Paint);

59
JS/Tiles.js Normal file
View file

@ -0,0 +1,59 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
(function (AppNS) {
var Notifications = Windows.UI.Notifications;
WinJS.Namespace.defineWithParent(AppNS, "Tiles", {
setCurrentCanvasAsTile: function () {
/// <summary>
/// Sets the tile to the current content of the canvas
/// </summary>
var fileName = "canvasImage.png";
var altText = "canvas image"; // TODO: Win8Apps WORK 92: Add localization support
// Get wide image template
var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileWideImage);
function configureTileImage(tileXml, fileName) {
var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "localfolder://" + fileName);
tileImageAttributes[0].setAttribute("alt", altText);
}
// Get scaled canvas blob with 20% height and width
var scaledCanvasBlob = AppNS.CanvasManager.getScaledCanvasBlob(document.getElementById("paintCanvas").height * 0.2, document.getElementById("paintCanvas").width * 0.2);
// Write canvas blob to local folder
AppNS.Utils.writeBlobToLocalFolderAsync(scaledCanvasBlob, fileName).then(function (file) {
// Set image attribute
configureTileImage(tileXml, file.fileName);
// Get square template
var squareTileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileSquareImage);
// Set square image attribute
configureTileImage(squareTileXml, file.fileName);
// Include the square template into the notification
var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);
// Create the notification from the XML
var tileNotification = new Notifications.TileNotification(tileXml);
// Send the notification to the app's default tile
Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}, function () { });
},
clearTile: function () {
/// <summary>
/// Returns tile to the default
/// </summary>
Notifications.TileUpdateManager.createTileUpdaterForApplication().clear();
}
});
})(Microsoft.Paint);

39
JS/Utils.js Normal file
View file

@ -0,0 +1,39 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
(function (AppNS) {
WinJS.Namespace.defineWithParent(AppNS, "Utils", {
writeBlobToLocalFolderAsync: function (blob, filename) {
/// <summary>
/// Writes a blob to the local applicaton folder
/// </summary>
/// <param name='blob'>
/// Blob object to be saved
/// </param>
/// <param name='filename'>
/// String representing the name of the output file
/// </param>
return new WinJS.Promise(function (complete, error) {
// Create file
Windows.Storage.ApplicationData.current.localFolder.createFileAsync(filename, Windows.Storage.CreationCollisionOption.replaceExisting)
.then(function (file) {
// Open the returned file in order to copy the data
file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) {
var output = stream.getOutputStreamAt(0);
// Get the IInputStream stream from the blob object
var input = blob.msRandomAccessStream.getInputStreamAt(0);
// Copy the stream from the blob to the File stream
Windows.Storage.Streams.RandomAccessStream.copy(input, output);
output.flushAsync().then(function () {
complete(file);
}, error);
}, error);
}, error);
});
}
});
})(Microsoft.Paint);

19
JS/ViewCards.js Normal file
View file

@ -0,0 +1,19 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
(function (BaseNS) {
WinJS.Namespace.defineWithParent(BaseNS, "Paint", {
ViewNames: {
PaintView: "PaintView",
SnapView: "SnapView"
},
});
WinJS.Namespace.defineWithParent(BaseNS, "Paint", {
ViewCards: {
PaintView: { uri: "/HTML/PaintView.html", setupFunction: "Microsoft.Paint.PaintView.fragmentLoad", namespace: "Microsoft.Paint.PaintView" },
SnapView: { uri: "/HTML/SnapView.html", setupFunction: "Microsoft.Paint.SnapView.fragmentLoad", namespace: "Microsoft.Paint.PaintView" }
}
});
})(Microsoft);

108
JS/ViewManager.js Normal file
View file

@ -0,0 +1,108 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
/// <reference path="../WinJS/js/base.js" />
/// <reference path="../WinJS/js/ui.js" />
(function (BaseNS) {
var AppNS = WinJS.Namespace.defineWithParent(BaseNS, "Paint", {
ViewManager: WinJS.Class.define(function (host, views) {
this._host = host;
this._loadedViews = [];
if (typeof views === "object") {
this._views = views;
} else {
throw new Error("views parameter must be object");
}
},
{
// Public members
load: function(view, state) {
/// <summary>
/// Load a view into the main section
/// </summary>
/// <param name='view'>
/// String key for the view to be loaded
/// </param>
/// <param name='state' optional='true'>
/// State object to be passed to the view
/// </param>
if (this._views[view]) {
var that = this;
if (this._views[view].uri) {
WinJS.UI.Fragments.clone(this._views[view].uri, state)
.then(function (frag) {
that._host.appendChild(frag);
if(that._views[view].setupFunction) {
var setup = WinJS.Utilities.getMember(that._views[view].setupFunction, null);
var persistedData = AppNS.StateManager.getValueAsObject(view);
setup(that._host, persistedData);
that._loadedViews.push(view);
}
document.body.focus();
});
} else {
throw new Error("View does not have a uri property");
}
} else {
throw new Error("View is not defined in the view list");
}
},
persistViewStates: function () {
/// <summary>
/// Persists the loaded view states
/// </summary>
var persistedData = {};
for (var viewIndex in this._loadedViews) {
var view = this._loadedViews[viewIndex];
var viewNamespace = WinJS.Utilities.getMember(this._views[view].namespace);
if (viewNamespace) {
var getViewData = viewNamespace.getViewData;
var getViewBlobs = viewNamespace.getViewBlobs;
if (getViewData && typeof getViewData === "function") {
var viewBlobs = getViewBlobs();
var viewData = getViewData();
// Write blobs to local storage
for (var blob in viewBlobs) {
AppNS.Utils.writeBlobToLocalFolderAsync(viewBlobs[blob], blob)
.then(function () { }, function () { });
}
// Persist data
AppNS.StateManager.storeValue(view, viewData);
} else {
throw new Error("View does not implement getViewData function");
}
} else {
throw new Error("Invalid namespace for view");
}
}
},
changeViewsLayout: function (newLayout) {
/// <summary>
/// Changes the layout that the views are displaying
/// </summary>
for (var viewIndex in this._loadedViews) {
var view = this._loadedViews[viewIndex];
var viewNamespace = WinJS.Utilities.getMember(this._views[view].namespace);
if (viewNamespace) {
var changeLayout = viewNamespace.changeLayout;
if (changeLayout && typeof changeLayout === "function") {
changeLayout(newLayout);
} else {
throw new Error("View does not implement changeLayout function");
}
} else {
throw new Error("Invalid namespace for view");
}
}
}
}
)});
})(Microsoft);