wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #153 from juliandescottes/feature-local-storage

Browse source 
Feature local storage
This commit is contained in:
Julian Descottes 2014-03-03 23:10:49 +01:00
commit 47c6261289
30 changed files with 555 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -15,5 +15,8 @@ npm-debug.log
# builds
build
# marked as private
*.private.*
# Closure compiler generated JS binary.
closure_compiled_binary.js

2
Gruntfile.js
View file

@ -65,7 +65,7 @@ module.exports = function(grunt) {
}
},
ghost : {
'default' : getGhostConfig(3000),
'default' : getGhostConfig(5000),
local : getGhostConfig(50)
},
concat : {

40
css/settings.css
View file

@ -56,6 +56,13 @@
position: relative;
}
.tool-icon.local-storage-icon {
background-image: url(../img/local-storage-icon.png);
background-position: 10px 12px;
background-size: 30px;
position: relative;
}
.tool-icon.import-icon {
background-image: url(../img/import-icon.png);
background-position: 10px 5px;
@ -247,12 +254,10 @@
}
#save-status {
margin-left: 10px;
margin-top: 10px;
}
.status {
height: 1.5rem;
word-break : break-all;
vertical-align: middle;
font-weight: normal;
text-shadow: none;
@ -264,4 +269,33 @@
[name*=checkbox] {
vertical-align: middle;
}
.local-piskels-list {
width: 100%;
}
.local-piskel-item {
height: 3em;
}
.local-piskel-name {
width: 40%;
}
.local-piskel-save-date {
font-weight : normal;
}
.local-piskels-list a {
text-decoration: none;
}
.local-piskels-list a:hover {
text-decoration: underline;
}
.local-piskel-load-link {
color : gold;
}
.local-piskel-delete-link {
color : red;
}

7
css/spectrum/spectrum-overrides.css
View file

@ -25,13 +25,18 @@
/* Remove the padding on the input container */
.sp-replacer {
padding: 3px;
padding: 4px;
height: 100%;
border-width: 0;
box-sizing: border-box;
-moz-box-sizing:border-box;
background-color: #444;
}
.sp-replacer:hover {
background-color: #888;
}
/* Hide the triangle */
.sp-dd {
display: none;

31
css/tools.css
View file

@ -136,6 +136,36 @@
cursor: url(../img/icons/dropper.png) 0 15, pointer;
}
.swap-colors-icon {
background-image: url(../img/tools/swap-arrow-square-small-grey.png);
position: relative;
top: 50px;
left: 6px;
height: 18px;
width: 18px;
background-size: 18px;
opacity : 0.3;
cursor : pointer;
}
.swap-colors-icon:hover {
opacity : 1;
}
.tool-color-picker {
position:relative;
}
.tool-color-picker:nth-child(1) {
z-index : 100;
}
.tool-color-picker:nth-child(2) {
z-index : 90;
margin-top: 20px;
margin-left:-20px;
}
.tool-color-picker input {
width: 16px;
height: 16px;
@ -155,6 +185,7 @@
.palette-wrapper {
margin-top: 10px;
margin-left: 10px;
}
.palette-color[data-color=TRANSPARENT] {

BIN
img/local-storage-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
img/tools/swap-arrow-square-small-grey.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 973 B

5
index.html
View file

@ -9,8 +9,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div
id="loading-mask"
<div
id="loading-mask"
style="
position:fixed;
top:0;right:0;bottom:0;left:0;
@ -55,6 +55,7 @@
<iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>

2
js/Events.js
View file

@ -29,6 +29,8 @@ var Events = {
*/
PISKEL_RESET: "PISKEL_RESET",
PISKEL_SAVED: "PISKEL_SAVED",
FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
SELECTION_CREATED: "SELECTION_CREATED",

9
js/app.js
View file

@ -75,6 +75,9 @@
this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
this.cheatsheetService.init();
this.savedStatusService = new pskl.service.SavedStatusService(this.piskelController);
this.savedStatusService.init();
if (this.isAppEngineVersion) {
this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
} else {
@ -103,8 +106,6 @@
"content" : "Loading animation with id : [" + framesheetId + "]"
}]);
this.loadFramesheetFromService(framesheetId);
} else {
this.localStorageService.displayRestoreNotification();
}
},
@ -118,6 +119,10 @@
}
},
isLoggedIn : function () {
return pskl.appEnginePiskelData_ && pskl.appEnginePiskelData_.isLoggedIn;
},
initTooltips_ : function () {
$('body').tooltip({
selector: '[rel=tooltip]'

2
js/controller/PaletteController.js
View file

@ -43,6 +43,8 @@
secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
var swapColorsIcon = $('.swap-colors-icon');
swapColorsIcon.click(this.swapColors.bind(this));
};
/**

3
js/controller/ToolController.js
View file

@ -36,7 +36,7 @@
// Set SimplePen as default selected tool:
this.selectTool_(this.tools[0]);
// Activate listener on tool panel:
$("#tool-section").click($.proxy(this.onToolIconClicked_, this));
$("#tool-section").mousedown($.proxy(this.onToolIconClicked_, this));
};
/**
@ -47,6 +47,7 @@
var previousSelectedToolClass = stage.data("selected-tool-class");
if(previousSelectedToolClass) {
stage.removeClass(previousSelectedToolClass);
stage.removeClass(pskl.drawingtools.Move.TOOL_ID);
}
stage.addClass(tool.instance.toolId);
stage.data("selected-tool-class", tool.instance.toolId);

70
js/controller/settings/LocalStorageController.js Normal file
View file

@ -0,0 +1,70 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
ns.LocalStorageController = function () {};
/**
* @public
*/
ns.LocalStorageController.prototype.init = function() {
this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
this.service_ = pskl.app.localStorageService;
this.piskelsList = $('.local-piskels-list');
this.fillLocalPiskelsList_();
this.piskelsList.click(this.onPiskelsListClick_.bind(this));
};
ns.LocalStorageController.prototype.onPiskelsListClick_ = function (evt) {
var action = evt.target.getAttribute('data-action');
var name = evt.target.getAttribute('data-name');
if (action === 'load') {
if (window.confirm('This will erase your current piskel. Continue ?')) {
this.service_.load(name);
$.publish(Events.CLOSE_SETTINGS_DRAWER);
}
} else if (action === 'delete') {
if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) {
this.service_.remove(name);
$.publish(Events.CLOSE_SETTINGS_DRAWER);
}
}
};
ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () {
var html = "";
var keys = this.service_.getKeys();
var pad = function (num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
};
keys.sort(function (k1, k2) {
if (k1.date < k2.date) {return 1;}
if (k1.date > k2.date) {return -1;}
return 0;
});
keys.forEach((function (key) {
var date = new Date(key.date);
var formattedDate = pskl.utils.Template.replace("{{Y}}/{{M}}/{{D}} {{H}}:{{m}}", {
Y : date.getFullYear(),
M : pad(date.getMonth() + 1),
D : pad(date.getDate()),
H : pad(date.getHours()),
m : pad(date.getMinutes())
});
html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : formattedDate});
}).bind(this));
var tableBody_ = this.piskelsList.get(0).tBodies[0];
tableBody_.innerHTML = html;
};
})();

64
js/controller/settings/SaveController.js
View file

@ -13,7 +13,12 @@
this.nameInput = $('#save-name');
this.descriptionInput = $('#save-description');
this.isPublicCheckbox = $('input[name=save-public-checkbox]');
this.saveButton = $('#save-button');
this.saveCloudButton = $('#save-cloud-button');
this.saveLocalButton = $('#save-local-button');
// Only available in app-engine mode ...
this.piskelName = $('.piskel-name').get(0);
this.status = $('#save-status');
var descriptor = this.piskelController.piskel.getDescriptor();
@ -22,21 +27,22 @@
this.isPublicCheckbox.prop('checked', descriptor.isPublic);
if (!pskl.app.isAppEngineVersion) {
this.nameInput.attr('disabled', 'disabled');
this.descriptionInput.attr('disabled', 'disabled');
this.isPublicCheckbox.attr('disabled', 'disabled');
if (!pskl.app.isLoggedIn()) {
this.saveCloudButton.attr('disabled', 'disabled');
this.status.html('You are not logged in. Only Local Save is available.');
} else {
this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
}
this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
this.saveLocalButton.click(this.onSaveLocalClick_.bind(this));
};
ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
evt.preventDefault();
evt.stopPropagation();
var name = this.nameInput.val();
var description = this.descriptionInput.val();
var name = this.getName();
var description = this.getDescription();
var isPublic = !!this.isPublicCheckbox.prop('checked');
var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
@ -50,15 +56,46 @@
});
};
ns.SaveController.prototype.onSaveLocalClick_ = function (evt) {
var localStorageService = pskl.app.localStorageService;
var isOk = true;
var name = this.getName();
var description = this.getDescription();
if (localStorageService.getPiskel(name)) {
isOk = window.confirm('There is already a piskel saved as ' + name + '. Override ?');
}
if (isOk) {
this.beforeSaving_();
localStorageService.save(name, description, pskl.app.piskelController.serialize());
window.setTimeout(function () {
this.onSaveSuccess_();
this.afterSaving_();
}.bind(this), 1000);
}
};
ns.SaveController.prototype.getName = function () {
return this.nameInput.val();
};
ns.SaveController.prototype.getDescription = function () {
return this.descriptionInput.val();
};
ns.SaveController.prototype.beforeSaving_ = function () {
this.saveButton.attr('disabled', true);
this.saveCloudButton.attr('disabled', true);
this.status.html('Saving ...');
$('.piskel-name').get(0).classList.add('piskel-name-saving');
if (this.piskelName) {
this.piskelName.classList.add('piskel-name-saving');
}
};
ns.SaveController.prototype.onSaveSuccess_ = function () {
$.publish(Events.CLOSE_SETTINGS_DRAWER);
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
$.publish(Events.PISKEL_SAVED);
};
ns.SaveController.prototype.onSaveError_ = function (status) {
@ -66,9 +103,12 @@
};
ns.SaveController.prototype.afterSaving_ = function () {
this.saveButton.attr('disabled', false);
this.saveCloudButton.attr('disabled', false);
this.status.html('');
$('.piskel-name').get(0).classList.remove('piskel-name-saving');
if (this.piskelName) {
this.piskelName.classList.remove('piskel-name-saving');
}
window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
};

4
js/controller/settings/SettingsController.js
View file

@ -18,6 +18,10 @@
template : 'templates/settings/import.html',
controller : ns.ImportController
},
'localstorage' : {
template : 'templates/settings/localstorage.html',
controller : ns.LocalStorageController
},
'save' : {
template : 'templates/settings/save.html',
controller : ns.SaveController

4
js/drawingtools/Move.js
View file

@ -7,7 +7,7 @@
var ns = $.namespace("pskl.drawingtools");
ns.Move = function() {
this.toolId = "tool-move";
this.toolId = ns.Move.TOOL_ID;
this.helpText = "Move tool";
// Stroke's first point coordinates (set in applyToolAt)
@ -15,6 +15,8 @@
this.startRow = null;
};
ns.Move.TOOL_ID = "tool-move";
pskl.utils.inherit(ns.Move, ns.BaseTool);
/**

2
js/drawingtools/selectiontools/BaseSelect.js
View file

@ -7,7 +7,7 @@
var ns = $.namespace("pskl.drawingtools");
ns.BaseSelect = function() {
this.secondaryToolId = "tool-move";
this.secondaryToolId = pskl.drawingtools.Move.TOOL_ID;
this.BodyRoot = $('body');
// Select's first point coordinates (set in applyToolAt)

121
js/service/LocalStorageService.js
View file

@ -7,83 +7,74 @@
throw "Bad LocalStorageService initialization: <undefined piskelController>";
}
this.piskelController = piskelController;
this.localStorageThrottler_ = null;
};
/**
* @public
*/
ns.LocalStorageService.prototype.init = function(piskelController) {
$.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
ns.LocalStorageService.prototype.init = function() {};
// localStorage.setItem('piskel_bkp', pskl.app.piskelController.serialize())
ns.LocalStorageService.prototype.save = function(name, description, piskel) {
this.removeFromKeys_(name);
this.addToKeys_(name, description, Date.now());
window.localStorage.setItem('piskel.' + name, piskel);
};
/**
* @private
*/
ns.LocalStorageService.prototype.persistToLocalStorageRequest_ = function () {
// Persist to localStorage when drawing. We throttle localStorage accesses
// for high frequency drawing (eg mousemove).
if(this.localStorageThrottler_ !== null) {
window.clearTimeout(this.localStorageThrottler_);
}
this.localStorageThrottler_ = window.setTimeout($.proxy(function() {
this.persistToLocalStorage_();
this.localStorageThrottler_ = null;
}, this), 1000);
};
ns.LocalStorageService.prototype.load = function(name) {
var piskelString = this.getPiskel(name);
var key = this.getKey_(name);
/**
* @private
*/
ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
console.log('[LocalStorage service]: Snapshot stored');
window.localStorage.snapShot = this.piskelController.serialize();
};
/**
* @private
*/
ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
var framesheet = JSON.parse(window.localStorage.snapShot);
pskl.utils.serialization.Deserializer.deserialize(framesheet, function (piskel) {
pskl.utils.serialization.Deserializer.deserialize(JSON.parse(piskelString), function (piskel) {
piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, key.description, true));
pskl.app.piskelController.setPiskel(piskel);
});
};
/**
* @private
*/
ns.LocalStorageService.prototype.cleanLocalStorage_ = function() {
console.log('[LocalStorage service]: Snapshot removed');
delete window.localStorage.snapShot;
ns.LocalStorageService.prototype.remove = function(name) {
this.removeFromKeys_(name);
window.localStorage.removeItem('piskel.' + name);
};
/**
* @public
*/
ns.LocalStorageService.prototype.displayRestoreNotification = function() {
if(window.localStorage && window.localStorage.snapShot) {
var reloadLink = "<a href='#' class='localstorage-restore onclick='pskl.app.restoreFromLocalStorage()'>reload</a>";
var discardLink = "<a href='#' class='localstorage-discard' onclick='pskl.app.cleanLocalStorage()'>discard</a>";
var content = "Non saved version found. " + reloadLink + " or " + discardLink;
ns.LocalStorageService.prototype.saveKeys_ = function(keys) {
window.localStorage.setItem('piskel.keys', JSON.stringify(keys));
};
$.publish(Events.SHOW_NOTIFICATION, [{
"content": content,
"behavior": $.proxy(function(rootNode) {
rootNode = $(rootNode);
rootNode.click($.proxy(function(evt) {
var target = $(evt.target);
if(target.hasClass("localstorage-restore")) {
this.restoreFromLocalStorage_();
}
else if (target.hasClass("localstorage-discard")) {
this.cleanLocalStorage_();
}
$.publish(Events.HIDE_NOTIFICATION);
}, this));
}, this)
}]);
ns.LocalStorageService.prototype.removeFromKeys_ = function(name) {
var keys = this.getKeys();
var otherKeys = keys.filter(function (key) {
return key.name !== name;
});
this.saveKeys_(otherKeys);
};
ns.LocalStorageService.prototype.getKey_ = function(name) {
var matches = this.getKeys().filter(function (key) {
return key.name === name;
});
if (matches.length > 0) {
return matches[0];
} else {
return null;
}
};
ns.LocalStorageService.prototype.addToKeys_ = function(name, description, date) {
var keys = this.getKeys();
keys.push({
name : name,
description : description,
date : date
});
this.saveKeys_(keys);
};
ns.LocalStorageService.prototype.getPiskel = function(name) {
return window.localStorage.getItem('piskel.' + name);
};
ns.LocalStorageService.prototype.getKeys = function(name) {
var keysString = window.localStorage.getItem('piskel.keys');
return JSON.parse(keysString) || [];
};
})();

64
js/service/SavedStatusService.js Normal file
View file

@ -0,0 +1,64 @@
(function () {
var ns = $.namespace('pskl.service');
ns.SavedStatusService = function (piskelController) {
this.piskelController_ = piskelController;
};
ns.SavedStatusService.prototype.init = function () {
$.subscribe(Events.TOOL_RELEASED, this.onToolReleased.bind(this));
$.subscribe(Events.PISKEL_RESET, this.onPiskelReset.bind(this));
$.subscribe(Events.PISKEL_SAVED, this.onPiskelSaved.bind(this));
window.addEventListener("beforeunload", this.onBeforeUnload.bind(this));
};
ns.SavedStatusService.prototype.onPiskelReset = function () {
var piskel = this.piskelController_.piskel;
// A first PISKEL_RESET is triggered during the load of a new Piskel, it should be ignored
// putting a firstResetDone flag as a nasty workaround for this
if (piskel.firstResetDone_) {
this.updateDirtyStatus(true);
} else {
piskel.firstResetDone_ = true;
}
};
ns.SavedStatusService.prototype.onToolReleased = function () {
this.updateDirtyStatus(true);
};
ns.SavedStatusService.prototype.onPiskelSaved = function () {
this.updateDirtyStatus(false);
};
ns.SavedStatusService.prototype.updateDirtyStatus = function (status) {
var piskel = this.piskelController_.piskel;
if (piskel.isDirty_ !== status) {
// Redraw piskel name only if dirty status actually changed
piskel.isDirty_ = status;
this.updatePiskelName();
}
};
ns.SavedStatusService.prototype.updatePiskelName = function () {
var piskel = this.piskelController_.piskel;
var name = piskel.getDescriptor().name;
if (piskel.isDirty_) {
$('.piskel-name').html(name + ' *');
} else {
$('.piskel-name').html(name);
}
};
ns.SavedStatusService.prototype.onBeforeUnload = function (evt) {
var piskel = this.piskelController_.piskel;
if (piskel.isDirty_) {
var confirmationMessage = "Your Piskel seem to have unsaved changes";
(evt || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
};
})();

5
js/utils/serialization/Deserializer.js
View file

@ -20,11 +20,12 @@
deserializer.deserialize();
};
ns.Deserializer.prototype.deserialize = function () {
ns.Deserializer.prototype.deserialize = function (name) {
var data = this.data_;
var piskelData = data.piskel;
name = name || 'Deserialized piskel';
var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
var descriptor = new pskl.model.piskel.Descriptor(name, '');
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
this.layersToLoad_ = piskelData.layers.length;

2
piskel-script-list.js
View file

@ -72,6 +72,7 @@ exports.scripts = [
"js/controller/settings/ApplicationSettingsController.js",
"js/controller/settings/ResizeController.js",
"js/controller/settings/GifExportController.js",
"js/controller/settings/LocalStorageController.js",
"js/controller/settings/SaveController.js",
"js/controller/settings/ImportController.js",
// Settings controller
@ -82,6 +83,7 @@ exports.scripts = [
"js/service/GithubStorageService.js",
"js/service/AppEngineStorageService.js",
"js/service/HistoryService.js",
"js/service/SavedStatusService.js",
"js/service/keyboard/ShortcutService.js",
"js/service/keyboard/KeycodeTranslator.js",
"js/service/keyboard/CheatsheetService.js",

BIN
resources/swap-arrow-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 574 B

BIN
resources/swap-arrow-square-small-grey.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 973 B

BIN
resources/swap-arrow-square-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 816 B

80
resources/swap-arrow-square.svg Normal file
View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="swap-arrow-square.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="394.04689"
inkscape:cy="437.49995"
inkscape:document-units="px"
inkscape:current-layer="g3903"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1148"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g3863"
transform="matrix(1.0584227,0.8783336,-0.88927511,1.0454,500.51129,-281.01924)" />
<g
id="g3903"
transform="matrix(1.0752324,0,0,1.1512202,-10.080657,-112.64735)">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3015"
d="m 134.94957,482.97409 77.33565,-84.65176 90.19445,84.65176 c -55.58473,1.43563 -111.94607,1.12702 -167.5301,0 z"
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.02133131px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 454.32064,637.60642 c 0,0 -209.21865,11.0537 -216.48659,-180.84972 l -55.19052,0.25672 c 0.0919,230.63552 273.06531,236.67753 273.06531,236.67753 z"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
id="path2995-0" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3015-5"
d="m 420.44925,576.40133 84.53491,77.33565 -84.53491,90.19445 c -1.43564,-55.58473 -1.12702,-111.94607 0,-167.5301 z"
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

80
resources/swap-arrow.svg Normal file
View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="New document 1">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="205.60891"
inkscape:cy="475.62016"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1148"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g3866"
transform="matrix(0.76563359,0.64327693,-0.64327693,0.76563359,437.69481,-47.0057)">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3015"
d="m 130,570.36218 0,-60 63.85714,0 c -20.96635,20.14932 -41.98769,40.84088 -63.85714,60 z"
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3015-7"
d="m 469.84542,570.36218 0,-60 -63.85714,0 c 20.96635,20.14932 41.98769,40.84088 63.85714,60 z"
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<g
id="g3863">
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.73463827px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 449.48174,512.15368 c 0,0 -145.41018,128.54808 -299.94302,0 L 150,552.36218 c 154.5622,109.35713 300,0 300,0 z"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
id="path2995-0" />
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

20
templates/drawing-tools.html
View file

@ -3,12 +3,28 @@
<div class="vertical-centerer">
<ul id="tools-container" class="tools-wrapper"></ul>
<div class="palette-wrapper">
<div class="tool-icon tool-color-picker">
<div
class="tool-icon tool-color-picker"
title="Primary - left mouse button"
rel="tooltip"
data-placement="right"
>
<input id="color-picker" class="color" type="text"/>
</div>
<div class="tool-icon tool-color-picker">
<div
class="tool-icon tool-color-picker"
title="Secondary - right mouse button"
rel="tooltip"
data-placement="right"
>
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
</div>
<div
class="swap-colors-icon"
title="Swap colors (X)"
rel="tooltip"
data-placement="right"
></div>
</div>
</div>
</div>

7
templates/settings.html
View file

@ -27,6 +27,13 @@
rel="tooltip" data-placement="left">
</div>
<div
data-setting="localstorage"
class="tool-icon local-storage-icon"
title="Browse piskels saved locally"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="gif"
class="tool-icon upload-cloud-icon"

18
templates/settings/localstorage.html Normal file
View file

@ -0,0 +1,18 @@
<div class="settings-section">
<div class="settings-title">
Browse Local Piskels
</div>
<div class="settings-item">
<table class="local-piskels-list">
<tbody></tbody>
</table>
</div>
<script type="text/template" id="local-storage-item-template">
<tr class="local-piskel-item">
<td class="local-piskel-name">{{name}}</td>
<td class="local-piskel-save-date">{{date}}</td>
<td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
<td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
</tr>
</script>
</div>

5
templates/settings/save.html
View file

@ -15,8 +15,9 @@
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
</label>
</div>
<input type="submit" class="button button-primary" id="save-button" value="Save" />
<span id="save-status" class="status"></span>
<input type="submit" class="button button-primary" id="save-cloud-button" value="Upload" />
<input type="button" class="button" id="save-local-button" value="Local save" />
<div id="save-status" class="status"></div>
</form>
</div>
</div>