diff --git a/misc/selenium-ide/change-colors.html b/misc/selenium-ide/change-colors.html new file mode 100644 index 00000000..6c921414 --- /dev/null +++ b/misc/selenium-ide/change-colors.html @@ -0,0 +1,47 @@ + + + + + + +change-colors + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
change-colors
open/?debug
clickcss=div.sp-preview-inner
clickcss=input.sp-input
typecss=input.sp-inputrgb(170, 187, 204)
mouseDownid=preview-list-scroller
clickcss=div.swap-colors-icon
+ + diff --git a/misc/selenium-ide/change-size.html b/misc/selenium-ide/change-size.html new file mode 100644 index 00000000..87a673f3 --- /dev/null +++ b/misc/selenium-ide/change-size.html @@ -0,0 +1,52 @@ + + + + + + +change-size + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
change-size
open/?debug
clickcss=div.tool-icon.resize-icon
typename=resize-width64
typename=resize-height64
clickname=resize-content-checkbox
click//input[@value='Resize']
mouseDownid=column-wrapper
+ + diff --git a/misc/selenium-ide/select-tools.html b/misc/selenium-ide/select-tools.html new file mode 100644 index 00000000..33a41f60 --- /dev/null +++ b/misc/selenium-ide/select-tools.html @@ -0,0 +1,82 @@ + + + + + + +Select tools + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Select tools
open/?debug
mouseDown//ul[@id='tools-container']/li[2]
mouseDown//ul[@id='tools-container']/li[3]
mouseDown//ul[@id='tools-container']/li[4]
mouseDown//ul[@id='tools-container']/li[5]
mouseDown//ul[@id='tools-container']/li[6]
mouseDown//ul[@id='tools-container']/li[7]
mouseDown//ul[@id='tools-container']/li[8]
mouseDown//ul[@id='tools-container']/li[9]
mouseDown//ul[@id='tools-container']/li[10]
mouseDown//ul[@id='tools-container']/li[11]
mouseDown//ul[@id='tools-container']/li[12]
mouseDown//ul[@id='tools-container']/li[13]
+ + diff --git a/misc/selenium-ide/user-preferences.html b/misc/selenium-ide/user-preferences.html new file mode 100644 index 00000000..8b331de4 --- /dev/null +++ b/misc/selenium-ide/user-preferences.html @@ -0,0 +1,92 @@ + + + + + + +user-preferences + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
user-preferences
open/?debug
clickcss=div.tool-icon.gear-icon
clickcss=div.background-picker.lowcont-medium-picker-background
clickcss=div.background-picker.medium-picker-background
clickcss=div.background-picker.light-picker-background
clickid=grid-width
selectid=grid-widthlabel=Enabled - 1px wide
clickcss=option[value="1"]
selectid=grid-widthlabel=Enabled - 2px wide
clickcss=option[value="2"]
clickid=grid-width
selectid=grid-widthlabel=Enabled - 3px wide
clickcss=option[value="3"]
selectid=grid-widthlabel=Enabled - 4px wide
clickcss=option[value="4"]
+ + diff --git a/src/css/dialogs-browse-local.css b/src/css/dialogs-browse-local.css index 19f9295a..c1884055 100644 --- a/src/css/dialogs-browse-local.css +++ b/src/css/dialogs-browse-local.css @@ -3,7 +3,7 @@ /* Browse local piskels panel */ /************************************************************************************************/ -.local-piskels-list { +.local-piskel-list { width: 100%; } @@ -19,12 +19,19 @@ font-weight : normal; } -.local-piskels-list a { +.local-piskel-list a { text-decoration: none; } -.local-piskels-list a:hover { + +.local-piskel-list a:hover { text-decoration: underline; } + +.local-piskel-list-head { + font-weight: bold; + color: gold; +} + .local-piskel-load-button, .local-piskel-delete-button { width : 75px; diff --git a/src/css/dialogs-import-image.css b/src/css/dialogs-import-image.css new file mode 100644 index 00000000..d9433c04 --- /dev/null +++ b/src/css/dialogs-import-image.css @@ -0,0 +1,55 @@ +/************************************************************************************************/ +/* Import dialog */ +/************************************************************************************************/ + +.import-section-preview { + display : inline-block; + height : 60px; + width: 60px; + border : 1px dashed #999; + border-radius: 3px; +} + +.dialog-section-title { + display : inline-block; + width: 55px; +} + +.import-size-field, +.resize-size-field { + width: 50px; + margin-right: 8px; + text-align: right; +} + +.import-size-field:nth-of-type(2), +.resize-size-field:nth-of-type(2) { + margin-left: 5px; +} + +.import-image-file-name { + display: inline-block; + overflow: hidden; + + height: 2rem; + word-break : break-all; + vertical-align: middle; + font-style: italic; + font-weight: normal; + text-shadow: none; +} + +[name=smooth-resize-checkbox] { + margin : 0 8px; +} + +.dialog-import-body { + padding:10px 20px; + font-size:1.5em +} + +.import-button { + font-size: 1em; + height: auto; + padding: 5px 10px; +} \ No newline at end of file diff --git a/src/css/settings-export.css b/src/css/settings-export.css index 7d05dd7f..83e5f499 100644 --- a/src/css/settings-export.css +++ b/src/css/settings-export.css @@ -1,22 +1,21 @@ - +/*******************************/ /* Gif/Png Export Setting panel*/ /*******************************/ -.gif-upload-button, +.gif-download-button, .gif-render-button { - /*float : right;*/ margin-top : 10px; margin-right : 10px; } -.gif-export-radio-group { - margin:10px 0; -} - .gif-export-preview, .png-export-preview { - margin-top:20px; - max-width:240px; position:relative; + margin-top:10px; + max-height:32px; +} + +.gif-export-preview { + max-width:32px; } .png-export-preview { @@ -28,8 +27,15 @@ float: left; } -.png-upload-status { - margin : 10px 0; +.gif-upload-status { + width: 180px; + margin-left: 5px; + margin-top: 10px; +} + +.gif-upload-status, +.gif-export-preview { + float : left; } .preview-upload-ongoing:before{ @@ -44,4 +50,15 @@ -moz-box-sizing:border-box; background: rgba(0,0,0,0.5); color: white; -} \ No newline at end of file +} + +.gif-export-progress-status { + margin-left: 5px; +} + +.gif-export-progress-bar { + margin-top:5px; + height:3px; + width: 0; + background:gold; +} diff --git a/src/css/settings-import.css b/src/css/settings-import.css new file mode 100644 index 00000000..ed3aa18b --- /dev/null +++ b/src/css/settings-import.css @@ -0,0 +1,18 @@ +/************************************************************************************************/ +/* Import panel */ +/************************************************************************************************/ + +.import-section, +.resize-section { + margin: 10px 0; +} + +.file-input-button { + margin-right: 8px; + border-radius: 2px; +} + +.import-highlight { + font-weight: bold; + color: white; +} \ No newline at end of file diff --git a/src/css/settings.css b/src/css/settings.css index 3048ce35..47cbffbf 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -184,151 +184,7 @@ border: gold 1px solid; } -/************************************************************************************************/ -/* Gif/Png Export panel */ -/************************************************************************************************/ -.gif-upload-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-radio-group { - margin:10px 0; -} - -.gif-export-progress-status { - margin-left: 5px; -} - -.gif-export-progress-bar { - margin-top:5px; - height:3px; - width: 0; - background:gold; -} - -.png-export-preview { - margin:10px 0; - overflow: hidden; -} - -.png-export-preview img { - float: left; -} - -.png-upload-status { - margin : 10px 0; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.gif-export-preview { - -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - - -.gif-export-preview, -.png-export-preview { - margin-top:10px; - position:relative; -} - -.gif-export-preview, -.png-export-preview { - max-width:32px; - max-height:32px; -} - -.png-export-preview { - max-width:240px; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} - -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.import-section-title { - display : inline-block; -} - -.import-section-title-small { - width: 55px; -} - -.import-section-disabled { - color : #888; -} - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border : 1px dashed #999; - border-radius: 3px; -} - -.import-size-field, -.resize-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -.import-size-field:nth-of-type(2), -.resize-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} /************************************************************************************************/ /* Save panel */ diff --git a/src/index.html b/src/index.html index 553d7e87..468cb0a0 100644 --- a/src/index.html +++ b/src/index.html @@ -54,11 +54,10 @@
- + -
diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 7c6fec4e..838db2d3 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -271,10 +271,13 @@ }; /** - * @private + * Translate absolute x,y screen coordinates into sprite coordinates + * @param {Number} screenX + * @param {Number} screenY + * @return {Object} {x:Number, y:Number} */ - ns.DrawingController.prototype.getSpriteCoordinates = function(event) { - return this.renderer.getCoordinates(event.clientX, event.clientY); + ns.DrawingController.prototype.getSpriteCoordinates = function(screenX, screenY) { + return this.renderer.getCoordinates(screenX, screenY); }; ns.DrawingController.prototype.setCurrentButton = function (event) { diff --git a/src/js/controller/dialogs/BrowseLocalController.js b/src/js/controller/dialogs/BrowseLocalController.js index 1fce176a..30583081 100644 --- a/src/js/controller/dialogs/BrowseLocalController.js +++ b/src/js/controller/dialogs/BrowseLocalController.js @@ -12,12 +12,12 @@ this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template"); this.service_ = pskl.app.localStorageService; - this.piskelsList = $('.local-piskels-list'); + this.piskelList = $('.local-piskel-list'); this.prevSessionContainer = $('.previous-session'); this.fillLocalPiskelsList_(); - this.piskelsList.click(this.onPiskelsListClick_.bind(this)); + this.piskelList.click(this.onPiskelsListClick_.bind(this)); }; ns.BrowseLocalController.prototype.onPiskelsListClick_ = function (evt) { @@ -51,7 +51,7 @@ html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date}); }).bind(this)); - var tableBody_ = this.piskelsList.get(0).tBodies[0]; + var tableBody_ = this.piskelList.get(0).tBodies[0]; tableBody_.innerHTML = html; }; })(); \ No newline at end of file diff --git a/src/js/controller/settings/ImageExportController.js b/src/js/controller/settings/ImageExportController.js new file mode 100644 index 00000000..75d8b2e9 --- /dev/null +++ b/src/js/controller/settings/ImageExportController.js @@ -0,0 +1,14 @@ +(function () { + var ns = $.namespace("pskl.controller.settings"); + + ns.ImageExportController = function (piskelController) { + this.piskelController = piskelController; + this.pngExportController = new ns.PngExportController(piskelController); + this.gifExportController = new ns.GifExportController(piskelController); + }; + + ns.ImageExportController.prototype.init = function () { + this.pngExportController.init(); + this.gifExportController.init(); + }; +})(); \ No newline at end of file diff --git a/src/js/controller/settings/LocalStorageController.js b/src/js/controller/settings/LocalStorageController.js deleted file mode 100644 index fcb4c49b..00000000 --- a/src/js/controller/settings/LocalStorageController.js +++ /dev/null @@ -1,101 +0,0 @@ -(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.previousSessionTemplate_ = pskl.utils.Template.get("previous-session-info-template"); - - this.service_ = pskl.app.localStorageService; - this.piskelsList = $('.local-piskels-list'); - this.prevSessionContainer = $('.previous-session'); - - this.fillRestoreSession_(); - 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); - this.fillLocalPiskelsList_(); - } - } - }; - - ns.LocalStorageController.prototype.fillRestoreSession_ = function () { - var previousInfo = pskl.app.backupService.getPreviousPiskelInfo(); - if (previousInfo) { - var info = { - name : previousInfo.name, - date : this.formatDate_(previousInfo.date, "{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}") - }; - - this.prevSessionContainer.html(pskl.utils.Template.replace(this.previousSessionTemplate_, info)); - $(".restore-session-button").click(this.onRestorePreviousSessionClick_.bind(this)); - } else { - this.prevSessionContainer.html("No piskel backup was found on this browser."); - } - }; - - ns.LocalStorageController.prototype.onRestorePreviousSessionClick_ = function () { - if (window.confirm('This will erase your current workspace. Continue ?')) { - pskl.app.backupService.load(); - $.publish(Events.CLOSE_SETTINGS_DRAWER); - } - }; - - var pad = function (num) { - if (num < 10) { - return "0" + num; - } else { - return "" + num; - } - }; - - ns.LocalStorageController.prototype.formatDate_ = function (date, format) { - date = new Date(date); - var formattedDate = pskl.utils.Template.replace(format, { - Y : date.getFullYear(), - M : pad(date.getMonth() + 1), - D : pad(date.getDate()), - H : pad(date.getHours()), - m : pad(date.getMinutes()) - }); - - return formattedDate; - }; - - ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () { - var html = ""; - var keys = this.service_.getKeys(); - - 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 = this.formatDate_(key.date, "{{Y}}/{{M}}/{{D}} {{H}}:{{m}}"); - html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date}); - }).bind(this)); - - var tableBody_ = this.piskelsList.get(0).tBodies[0]; - tableBody_.innerHTML = html; - }; - -})(); \ No newline at end of file diff --git a/src/js/controller/settings/PngExportController.js b/src/js/controller/settings/PngExportController.js index 2c1c8b72..c2ab141c 100644 --- a/src/js/controller/settings/PngExportController.js +++ b/src/js/controller/settings/PngExportController.js @@ -15,8 +15,6 @@ document.querySelector(".zip-generate-button").addEventListener('click', this.onZipButtonClick_.bind(this)); this.updatePreview_(this.getFramesheetAsCanvas().toDataURL("image/png")); - - (new ns.GifExportController(this.piskelController)).init(); }; ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) { diff --git a/src/js/controller/settings/SaveController.js b/src/js/controller/settings/SaveController.js index 86a6004c..48730420 100644 --- a/src/js/controller/settings/SaveController.js +++ b/src/js/controller/settings/SaveController.js @@ -87,10 +87,14 @@ this.piskelController.getPiskel().setDescriptor(descriptor); this.beforeSaving_(); + + this.saveOnlineButton.attr('disabled', true); + this.saveOnlineStatus.html('Saving ...'); + pskl.app.storageService.store({ success : this.onSaveSuccess_.bind(this), error : this.onSaveError_.bind(this), - after : this.afterSaving_.bind(this) + after : this.afterOnlineSaving_.bind(this) }); } }; @@ -116,7 +120,6 @@ ns.SaveController.prototype.saveFile_ = function () { this.beforeSaving_(); - this.saveToFile_(); pskl.utils.BlobUtils.stringToBlob(pskl.app.piskelController.serialize(), function(blob) { pskl.utils.FileUtils.downloadAsFile(blob, this.getLocalFilename_()); this.onSaveSuccess_(); @@ -135,9 +138,6 @@ ns.SaveController.prototype.beforeSaving_ = function () { this.updatePiskelDescriptor_(); - this.saveOnlineButton.attr('disabled', true); - this.saveOnlineStatus.html('Saving ...'); - if (this.piskelName) { this.piskelName.classList.add('piskel-name-saving'); } @@ -162,10 +162,13 @@ $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]); }; - ns.SaveController.prototype.afterSaving_ = function () { + ns.SaveController.prototype.afterOnlineSaving_ = function () { this.saveOnlineButton.attr('disabled', false); this.saveOnlineStatus.html(''); + this.afterSaving_(); + }; + ns.SaveController.prototype.afterSaving_ = function () { if (this.piskelName) { this.piskelName.classList.remove('piskel-name-saving'); } diff --git a/src/js/controller/settings/SettingsController.js b/src/js/controller/settings/SettingsController.js index 5246fc0c..bd7d9c39 100644 --- a/src/js/controller/settings/SettingsController.js +++ b/src/js/controller/settings/SettingsController.js @@ -12,7 +12,7 @@ }, 'png' : { template : 'templates/settings/export.html', - controller : ns.PngExportController + controller : ns.ImageExportController }, 'import' : { template : 'templates/settings/import.html', diff --git a/src/js/drawingtools/PaintBucket.js b/src/js/drawingtools/PaintBucket.js index c2ece067..357fb7cb 100644 --- a/src/js/drawingtools/PaintBucket.js +++ b/src/js/drawingtools/PaintBucket.js @@ -30,16 +30,3 @@ pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, replayData.col, replayData.row, replayData.color); }; })(); - - - - - - - - - - - - - diff --git a/src/js/service/FileDropperService.js b/src/js/service/FileDropperService.js index d649c05c..fb3aa97a 100644 --- a/src/js/service/FileDropperService.js +++ b/src/js/service/FileDropperService.js @@ -21,11 +21,10 @@ event.preventDefault(); event.stopPropagation(); - // FIXME : Ahah this is horrible - this.coords_ = pskl.app.drawingController.getSpriteCoordinates(event); + + this.coords_ = pskl.app.drawingController.getSpriteCoordinates(event.clientX, event.clientY); var files = event.dataTransfer.files; - for (var i = 0; i < files.length ; i++) { var file = files[i]; var isImage = file.type.indexOf('image') === 0; diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index f3d80170..de1cdace 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -88,9 +88,9 @@ // Settings sub-controllers "js/controller/settings/ApplicationSettingsController.js", "js/controller/settings/ResizeController.js", + "js/controller/settings/ImageExportController.js", "js/controller/settings/GifExportController.js", "js/controller/settings/PngExportController.js", - "js/controller/settings/LocalStorageController.js", "js/controller/settings/SaveController.js", "js/controller/settings/ImportController.js", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index 316ad988..ab92a308 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -6,10 +6,13 @@ "css/font-icon.css", "css/forms.css", "css/settings.css", + "css/settings-export.css", + "css/settings-import.css", "css/tools.css", "css/icons.css", "css/cheatsheet.css", "css/dialogs.css", + "css/dialogs-import-image.css", "css/dialogs-manage-palettes.css", "css/dialogs-browse-local.css", "css/toolbox.css", diff --git a/src/templates/dialogs/browse-local.html b/src/templates/dialogs/browse-local.html index 800ac0ce..6758c5c6 100644 --- a/src/templates/dialogs/browse-local.html +++ b/src/templates/dialogs/browse-local.html @@ -4,13 +4,12 @@ X
- +
- diff --git a/src/templates/dialogs/import-image.html b/src/templates/dialogs/import-image.html index 8746d971..aa7ddd65 100644 --- a/src/templates/dialogs/import-image.html +++ b/src/templates/dialogs/import-image.html @@ -3,17 +3,17 @@ Import Image X -
+
- Name : + Name :
- Info : + Info :
- Size : + Size : x
diff --git a/src/templates/settings/import.html b/src/templates/settings/import.html index e7adb92b..733aee4b 100644 --- a/src/templates/settings/import.html +++ b/src/templates/settings/import.html @@ -3,7 +3,7 @@ Load from Browser
- Load a local piskel saved in this Browser + Load a local piskel saved in this Browser
@@ -12,7 +12,7 @@ Load .piskel file
- Load a .piskel file from your computer + Load a .piskel file from your computer
@@ -26,7 +26,7 @@ Import From Picture
-
Supports : PNG, JPG, BMP, Animated GIF ...
+
Supports : PNG, JPG, BMP, Animated GIF ...
- diff --git a/src/templates/settings/localstorage.html b/src/templates/settings/localstorage.html deleted file mode 100644 index 774c6084..00000000 --- a/src/templates/settings/localstorage.html +++ /dev/null @@ -1,31 +0,0 @@ -
-
- Restore previous session -
-
-
-
- Browse Local Piskels -
-
-
Name Date Actions
- -
-
- - - \ No newline at end of file