Issue #711 : WIP move cursor with keyboard

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piskel",
-  "version": "0.13.0",
+  "version": "0.12.1",
   "description": "Pixel art editor",
   "author": "Julian Descottes <julian.descottes@gmail.com>",
   "contributors": [

src/css/dialogs-browse-backups.css

@@ -56,7 +56,8 @@
   height: 90px;
 }
 
-.browse-backups .centered-message {
+.browse-backups .session-list-empty,
+.browse-backups .snapshot-list-empty {
   position: absolute;
   left: 50%;
   width: 200px;
@@ -67,18 +68,9 @@
   font-size: 16px;
   text-align: center;
   border: 1px solid;
-}
-
-.browse-backups .session-list-empty,
-.browse-backups .snapshot-list-empty {
   color: #bbb;
 }
 
-.browse-backups .session-list-error,
-.browse-backups .snapshot-list-error {
-  color: white;
-}
-
 .browse-backups .session-item {
   /* Transition duration should be kept in sync with SelectSession.DELETE_TRANSITION_DURATION */
   transition: all 500ms;

src/css/dialogs-import.css

@@ -183,14 +183,22 @@
 .import-meta-value,
 .import-meta-label {
   padding: 2px 4px;
+  border: 1px solid gold;
 }
 
 .import-meta-label {
   border-radius: 2px 0 0 2px;
   color: var(--highlight-color);
+  border-right-width: 0;
+}
+
+.import-meta-title .import-meta-label {
+  border-right-width: 1px;
+  border-radius: 2px;
 }
 
 .import-meta-value {
+  border-radius: 0 2px 2px 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -234,7 +242,7 @@
 .insert-mode-option {
   display: flex;
   align-items: center;
-  margin: 5px 0;
+  margin-bottom: 5px;
 }
 
 .import-resize-option :checked + span,
@@ -242,15 +250,11 @@
   color: var(--highlight-color);
 }
 
-.import-resize-option input,
-.insert-mode-option input {
-  margin: 5px;
-}
-
 /**
  * ADJUST SIZE
  */
-.import-resize-anchor-info {
+.import-resize-anchor-info,
+.import-resize-option-label {
   margin-bottom: 10px;
 }
 

src/css/style.css

@@ -52,12 +52,7 @@ body {
 }
 
 .checkbox-fix {
-  margin: 3px 3px 3px 0;
+  margin-left: 0;
-}
-
-.checkbox-container {
-  display: flex;
-  align-items: center;
 }
 
 .hidden {

src/js/app.js

@@ -24,6 +24,9 @@
       this.shortcutService = new pskl.service.keyboard.ShortcutService();
       this.shortcutService.init();
 
+      this.inputService = new pskl.service.keyboard.InputService();
+      this.inputService.init();
+
       var size = pskl.UserSettings.get(pskl.UserSettings.DEFAULT_SIZE);
       var fps = Constants.DEFAULT.FPS;
       var descriptor = new pskl.model.piskel.Descriptor('New Piskel', '');

src/js/controller/DrawingController.js

@@ -44,6 +44,7 @@
     // State of drawing controller:
     this.isClicked = false;
     this.previousMousemoveTime = 0;
+    this.lastUpdateInputs_ = 0;
     this.currentToolBehavior = null;
   };
 
@@ -64,11 +65,17 @@
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.RESET_ZOOM, this.resetZoom_.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_ZOOM, this.updateZoom_.bind(this, 1));
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_ZOOM, this.updateZoom_.bind(this, -1));
+
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_UP, this.updateOffset_.bind(this, 'up'));
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_RIGHT, this.updateOffset_.bind(this, 'right'));
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_DOWN, this.updateOffset_.bind(this, 'down'));
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_LEFT, this.updateOffset_.bind(this, 'left'));
 
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.CURSOR_UP, this.updateCursor_.bind(this, 'up'));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.CURSOR_RIGHT, this.updateCursor_.bind(this, 'right'));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.CURSOR_DOWN, this.updateCursor_.bind(this, 'down'));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.CURSOR_LEFT, this.updateCursor_.bind(this, 'left'));
+
     window.setTimeout(function () {
       this.afterWindowResize_();
       this.resetZoom_();
@@ -156,6 +163,10 @@
    * @private
    */
   ns.DrawingController.prototype.onMousedown_ = function (event) {
+    if (this.isClicked) {
+      return;
+    }
+
     $.publish(Events.MOUSE_EVENT, [event, this]);
     var frame = this.piskelController.getCurrentFrame();
     var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
@@ -204,6 +215,7 @@
   };
 
   /**
+   * Trigger tool move on key up in order to acknowledge modifier changes.
    * @private
    */
   ns.DrawingController.prototype.onKeyup_ = function (event) {
@@ -289,6 +301,83 @@
     );
   };
 
+  /**
+   * Update the current viewport offset of 1 pixel in the provided direction.
+   * Direction can be one of 'up', 'right', 'down', 'left'.
+   * Callback for the OFFSET_${DIR} shortcuts.
+   */
+  ns.DrawingController.prototype.updateCursor_ = function (dir) {
+    var x = this.currentX || 0;
+    var y = this.currentY || 0;
+    if (dir === 'up') {
+      y -= 1;
+    } else if (dir === 'right') {
+      x += 1;
+    } else if (dir === 'down') {
+      y += 1;
+    } else if (dir === 'left') {
+      x -= 1;
+    }
+
+    this.currentX = x;
+    this.currentY = y;
+
+    var screenCoordinates = this.getScreenCoordinates(x, y);
+
+    var event = {
+      'type': 'mousemove',
+      'button': 0,
+      'shiftKey': false,
+      'altKey': false,
+      'ctrlKey': false
+    };
+
+    event.clientX = screenCoordinates.x;
+    event.clientY = screenCoordinates.y;
+
+    this.onMousemove_(event);
+  };
+
+  ns.DrawingController.prototype.clickCursor_ = function () {
+    var x = this.currentX || 0;
+    var y = this.currentY || 0;
+
+    var screenCoordinates = this.getScreenCoordinates(x, y);
+
+    var event = {
+      'type': 'mousedown',
+      'button': 0,
+      'shiftKey': false,
+      'altKey': false,
+      'ctrlKey': false
+    };
+
+    event.clientX = screenCoordinates.x;
+    event.clientY = screenCoordinates.y;
+
+    this.onMousedown_(event);
+  };
+
+  ns.DrawingController.prototype.releaseCursor_ = function () {
+    var x = this.currentX || 0;
+    var y = this.currentY || 0;
+
+    var screenCoordinates = this.getScreenCoordinates(x, y);
+
+    var event = {
+      'type': 'mouseup',
+      'button': 0,
+      'shiftKey': false,
+      'altKey': false,
+      'ctrlKey': false
+    };
+
+    event.clientX = screenCoordinates.x;
+    event.clientY = screenCoordinates.y;
+
+    this.onMouseup_(event);
+  };
+
   /**
    * Update the current zoom level by a given multiplier.
    *
@@ -428,6 +517,20 @@
 
     this.renderer.render(currentFrame);
     this.overlayRenderer.render(this.overlayFrame);
+
+    this.updateInputs_();
+  };
+
+  ns.DrawingController.prototype.updateInputs_ = function () {
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+
+    if (pskl.app.inputService.isKeyPressed(shortcuts.MISC.CURSOR_CLICK)) {
+      this.clickCursor_();
+      this.isClickingCursor_ = true;
+    } else if (this.isClickingCursor_) {
+      this.releaseCursor_();
+      this.isClickingCursor_ = false;
+    }
   };
 
   /**

src/js/controller/dialogs/backups/steps/SelectSession.js

@@ -39,24 +39,16 @@
 
   ns.SelectSession.prototype.update = function () {
     pskl.app.backupService.list().then(function (sessions) {
-      var html = this.getMarkupForSessions_(sessions);
+      var html = '';
-      this.container.querySelector('.session-list').innerHTML = html;
-    }.bind(this)).catch(function () {
-      var html = pskl.utils.Template.get('session-list-error');
-      this.container.querySelector('.session-list').innerHTML = html;
-    }.bind(this));
-  };
-
-  ns.SelectSession.prototype.getMarkupForSessions_ = function (sessions) {
       if (sessions.length === 0) {
-      return pskl.utils.Template.get('session-list-empty');
+        html = pskl.utils.Template.get('session-list-empty');
-    }
+      } else {
-
         var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
-    return sessions.reduce(function (previous, session) {
+        var html = '';
+        sessions.forEach(function (session) {
           if (session.id === pskl.app.sessionId) {
             // Do not show backups for the current session.
-        return previous;
+            return;
           }
           var view = {
             id: session.id,
@@ -65,8 +57,11 @@
             date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
             count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots'
           };
-      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
+          html += pskl.utils.Template.replace(sessionItemTemplate, view);
-    }, '');
+        });
+      }
+      this.container.querySelector('.session-list').innerHTML = html;
+    }.bind(this));
   };
 
   ns.SelectSession.prototype.destroy = function () {

src/js/controller/dialogs/backups/steps/SessionDetails.js

@@ -27,29 +27,16 @@
   ns.SessionDetails.prototype.onShow = function () {
     var sessionId = this.backupsController.backupsData.selectedSession;
     pskl.app.backupService.getSnapshotsBySessionId(sessionId).then(function (snapshots) {
-      var html = this.getMarkupForSnapshots_(snapshots);
+      var html = '';
-      this.container.querySelector('.snapshot-list').innerHTML = html;
-
-      // Load the image of the first frame for each sprite and update the list.
-      snapshots.forEach(function (snapshot) {
-        this.updateSnapshotPreview_(snapshot);
-      }.bind(this));
-    }.bind(this)).catch(function () {
-      var html = pskl.utils.Template.get('snapshot-list-error');
-      this.container.querySelector('.snapshot-list').innerHTML = html;
-    }.bind(this));
-  };
-
-  ns.SessionDetails.prototype.getMarkupForSnapshots_ = function (snapshots) {
       if (snapshots.length === 0) {
         // This should normally never happen, all sessions have at least one snapshot and snapshots
         // can not be individually deleted.
         console.warn('Could not retrieve snapshots for a session');
-      return pskl.utils.Template.get('snapshot-list-empty');
+        html = pskl.utils.Template.get('snapshot-list-empty');
-    }
+      } else {
-
         var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
-    return snapshots.reduce(function (previous, snapshot) {
+        var html = '';
+        snapshots.forEach(function (snapshot) {
           var view = {
             id: snapshot.id,
             name: snapshot.name,
@@ -59,8 +46,12 @@
             resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height),
             fps: snapshot.fps
           };
-      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
+          html += pskl.utils.Template.replace(sessionItemTemplate, view);
-    }, '');
+          this.updateSnapshotPreview_(snapshot);
+        }.bind(this));
+      }
+      this.container.querySelector('.snapshot-list').innerHTML = html;
+    }.bind(this));
   };
 
   ns.SessionDetails.prototype.updateSnapshotPreview_ = function (snapshot) {

src/js/controller/dialogs/importwizard/ImportWizard.js

@@ -80,13 +80,7 @@
     var step = this.wizard.getCurrentStep();
 
     if (step.name === 'IMAGE_IMPORT') {
-      if (this.piskelController.isEmpty()) {
-        // If the current sprite is empty finalize immediately and replace the current sprite.
-        this.mergeData.importMode = ns.steps.SelectMode.MODES.REPLACE;
-        this.finalizeImport_();
-      } else {
       this.wizard.goTo('SELECT_MODE');
-      }
     } else if (step.name === 'SELECT_MODE') {
       if (this.mergeData.importMode === ns.steps.SelectMode.MODES.REPLACE) {
         this.finalizeImport_();

src/js/controller/dialogs/importwizard/steps/AdjustSize.js

@@ -69,15 +69,16 @@
     var anchorInfo = this.container.querySelector('.import-resize-anchor-info');
     if (isBigger && keep) {
       anchorInfo.innerHTML = [
-        '<div class="import-resize-warning">',
+        '<span class="import-resize-warning">',
         '  Imported content will be cropped!',
-        '</div>',
+        '</span>',
-        'Select crop anchor:'
+        ' ',
+        'Select crop origin'
       ].join('');
     } else if (isBigger) {
-      anchorInfo.innerHTML = 'Select resize anchor:';
+      anchorInfo.innerHTML = 'Select the anchor for resizing the canvas';
     } else {
-      anchorInfo.innerHTML = 'Select position anchor:';
+      anchorInfo.innerHTML = 'Select where the import should be positioned';
     }
   };
 

src/js/controller/dialogs/importwizard/steps/ImageImport.js

@@ -42,17 +42,12 @@
     this.addEventListener(this.frameOffsetY, 'keyup', this.onFrameInputKeyUp_);
 
     pskl.utils.FileUtils.readImageFile(this.file_, this.onImageLoaded_.bind(this));
-
-    if (this.piskelController.isEmpty()) {
-      this.nextButton.textContent = 'import';
-    }
   };
 
   ns.ImageImport.prototype.onNextClick = function () {
     this.container.classList.add('import-image-loading');
     this.createPiskelFromImage().then(function (piskel) {
       this.mergeData.mergePiskel = piskel;
-      this.container.classList.remove('import-image-loading');
       this.superclass.onNextClick.call(this);
     }.bind(this)).catch(function (e) {
       console.error(e);
@@ -262,7 +257,9 @@
         context.lineTo(maxWidth * scaleX, y * scaleY);
       }
 
+      // Set the line style to dashed
       context.lineWidth = 1;
+      // context.setLineDash([2, 1]);
       context.strokeStyle = 'gold';
       context.stroke();
 

src/js/controller/piskel/PiskelController.js

@@ -297,12 +297,4 @@
   ns.PiskelController.prototype.serialize = function () {
     return pskl.utils.serialization.Serializer.serialize(this.piskel);
   };
-
-  /**
-   * Check if the current sprite is empty. Emptiness here means no pixel has been filled
-   * on any layer or frame for the current sprite.
-   */
-  ns.PiskelController.prototype.isEmpty = function () {
-    return pskl.app.currentColorsService.getCurrentColors().length === 0;
-  };
 })();

src/js/controller/settings/exportimage/GifExportController.js

@@ -18,14 +18,9 @@
     this.previewContainerEl = document.querySelector('.gif-export-preview');
     this.uploadButton = document.querySelector('.gif-upload-button');
     this.downloadButton = document.querySelector('.gif-download-button');
-    this.repeatCheckbox = document.querySelector('.gif-repeat-checkbox');
-
-    // Initialize repeatCheckbox state
-    this.repeatCheckbox.checked = this.getRepeatSetting_();
 
     this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
     this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
-    this.addEventListener(this.repeatCheckbox, 'change', this.onRepeatCheckboxChange_);
 
     var currentColors = pskl.app.currentColorsService.getCurrentColors();
     var tooManyColors = currentColors.length >= MAX_GIF_COLORS;
@@ -113,7 +108,6 @@
       width: width * zoom,
       height: height * zoom,
       preserveColors : preserveColors,
-      repeat: this.getRepeatSetting_() ? 0 : 1,
       transparent : transparent
     });
 
@@ -158,15 +152,6 @@
     return transparentColor;
   };
 
-  ns.GifExportController.prototype.onRepeatCheckboxChange_ = function () {
-    var checked = this.repeatCheckbox.checked;
-    pskl.UserSettings.set(pskl.UserSettings.EXPORT_GIF_REPEAT, checked);
-  };
-
-  ns.GifExportController.prototype.getRepeatSetting_ = function () {
-    return pskl.UserSettings.get(pskl.UserSettings.EXPORT_GIF_REPEAT);
-  };
-
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
       var linkTpl = '<a class="highlight" href="{{link}}" target="_blank">{{shortLink}}</a>';

src/js/database/PiskelDatabase.js

@@ -29,7 +29,9 @@
     return _requestPromise(request).then(function (event) {
       this.db = event.target.result;
       return this.db;
-    }.bind(this));
+    }.bind(this)).catch(function (e) {
+      console.log('Failed to initialize IndexedDB, local browser saves will be unavailable.');
+    });
   };
 
   ns.PiskelDatabase.prototype.onUpgradeNeeded_ = function (event) {

src/js/devtools/DrawingTestPlayer.js

@@ -32,7 +32,6 @@
   };
 
   ns.DrawingTestPlayer.prototype.setupInitialState_ = function () {
-
     var size = this.initialState.size;
     var piskel = this.createPiskel_(size.width, size.height);
     pskl.app.piskelController.setPiskel(piskel);
@@ -40,10 +39,9 @@
     $.publish(Events.SELECT_PRIMARY_COLOR, [this.initialState.primaryColor]);
     $.publish(Events.SELECT_SECONDARY_COLOR, [this.initialState.secondaryColor]);
     $.publish(Events.SELECT_TOOL, [this.initialState.selectedTool]);
-
+    if (this.initialState.penSize) {
-    // Old tests do not have penSize stored in initialState, fallback to 1.
-    var penSize = this.initialState.penSize || 1;
       pskl.app.penSizeService.setPenSize(this.initialState.penSize);
+    }
   };
 
   ns.DrawingTestPlayer.prototype.createPiskel_ = function (width, height) {

src/js/service/keyboard/InputService.js

@@ -0,0 +1,48 @@
+(function () {
+  var ns = $.namespace('pskl.service.keyboard');
+
+  ns.InputService = function () {
+    this.activeShortcuts_ = {};
+  };
+
+  /**
+   * @public
+   */
+  ns.InputService.prototype.init = function() {
+    $(document.body).keydown($.proxy(this.onKeyDown_, this));
+    $(document.body).keyup($.proxy(this.onKeyUp_, this));
+  };
+
+  ns.InputService.prototype.isKeyPressed = function (shortcut) {
+    return shortcut.getKeys().some(function (key) {
+      return this.activeShortcuts_[key];
+    }.bind(this));
+  };
+
+  /**
+   * @private
+   */
+  ns.InputService.prototype.onKeyDown_ = function(evt) {
+    var eventKey = ns.KeyUtils.createKeyFromEvent(evt);
+    if (this.isInInput_(evt) || !eventKey) {
+      return;
+    }
+
+    this.activeShortcuts_[ns.KeyUtils.stringify(eventKey)] = true;
+  };
+
+  ns.InputService.prototype.onKeyUp_ = function(evt) {
+    var eventKey = ns.KeyUtils.createKeyFromEvent(evt);
+    if (this.isInInput_(evt) || !eventKey) {
+      return;
+    }
+
+    this.activeShortcuts_[ns.KeyUtils.stringify(eventKey)] = false;
+  };
+
+  ns.InputService.prototype.isInInput_ = function (evt) {
+    var targetTagName = evt.target.nodeName.toUpperCase();
+    return targetTagName === 'INPUT' || targetTagName === 'TEXTAREA';
+  };
+
+})();

src/js/service/keyboard/Shortcuts.js

@@ -66,6 +66,11 @@
       OFFSET_RIGHT : createShortcut('move-right', 'Move viewport right', 'shift+right'),
       OFFSET_DOWN : createShortcut('move-down', 'Move viewport down', 'shift+down'),
       OFFSET_LEFT : createShortcut('move-left', 'Move viewport left', 'shift+left'),
+      CURSOR_UP : createShortcut('cursor-up', 'Move cursor up', 'alt+up'),
+      CURSOR_RIGHT : createShortcut('cursor-right', 'Move cursor right', 'alt+right'),
+      CURSOR_DOWN : createShortcut('cursor-down', 'Move cursor down', 'alt+down'),
+      CURSOR_LEFT : createShortcut('cursor-left', 'Move cursor left', 'alt+left'),
+      CURSOR_CLICK : createShortcut('cursor-click', 'Click cursor', 'SPACE'),
     },
 
     STORAGE : {

src/js/service/performance/PerformanceReport.js

@@ -16,7 +16,7 @@
    */
   ns.PerformanceReport = function (piskel, colorsCount) {
     var pixels = piskel.getWidth() * piskel.getHeight();
-    this.resolution = pixels > (512 * 512);
+    this.resolution = pixels > (500 * 500);
 
     var layersCount = piskel.getLayers().length;
     this.layers = layersCount > 25;
@@ -24,10 +24,10 @@
     var framesCount = piskel.getLayerAt(0).size();
     this.frames = framesCount > 100;
 
-    this.colors = colorsCount >= 256;
+    this.colors = colorsCount > 100;
 
-    var overallScore = (pixels / 2620) + (layersCount * 4) + framesCount + (colorsCount * 100 / 256);
+    var overallScore = (pixels / 2500) + (layersCount * 4) + framesCount + colorsCount;
-    this.overall = overallScore > 200;
+    this.overall = overallScore > 100;
   };
 
   ns.PerformanceReport.prototype.equals = function (report) {

src/js/service/storage/IndexedDbStorageService.js

@@ -7,9 +7,7 @@
   };
 
   ns.IndexedDbStorageService.prototype.init = function () {
-    this.piskelDatabase.init().catch(function (e) {
+    this.piskelDatabase.init();
-      console.log('Failed to initialize PiskelDatabase, local browser saves will be unavailable.');
-    });
   };
 
   ns.IndexedDbStorageService.prototype.save = function (piskel) {
@@ -32,7 +30,7 @@
   };
 
   ns.IndexedDbStorageService.prototype.load = function (name) {
-    return this.piskelDatabase.get(name).then(function (piskelData) {
+    this.piskelDatabase.get(name).then(function (piskelData) {
       if (typeof piskelData !== 'undefined') {
         var serialized = piskelData.serialized;
         pskl.utils.serialization.Deserializer.deserialize(
@@ -48,7 +46,7 @@
   };
 
   ns.IndexedDbStorageService.prototype.remove = function (name) {
-    return this.piskelDatabase.delete(name);
+    this.piskelDatabase.delete(name);
   };
 
   ns.IndexedDbStorageService.prototype.getKeys = function () {

src/js/tools/drawing/VerticalMirrorPen.js

@@ -44,17 +44,10 @@
   };
 
   ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
-    return frame.getWidth() - col - this.getPenSizeOffset_();
+    return frame.getWidth() - col - 1;
   };
 
   ns.VerticalMirrorPen.prototype.getSymmetricRow_ = function(row, frame) {
-    return frame.getHeight() - row - this.getPenSizeOffset_();
+    return frame.getHeight() - row - 1;
-  };
-
-  /**
-   * Depending on the pen size, the mirrored index need to have an offset of 1 pixel.
-   */
-  ns.VerticalMirrorPen.prototype.getPenSizeOffset_ = function(row, frame) {
-    return pskl.app.penSizeService.getPenSize() % 2;
   };
 })();

src/js/utils/UserSettings.js

@@ -17,7 +17,6 @@
     LAYER_OPACITY : 'LAYER_OPACITY',
     EXPORT_SCALE: 'EXPORT_SCALE',
     EXPORT_TAB: 'EXPORT_TAB',
-    EXPORT_GIF_REPEAT: 'EXPORT_GIF_REPEAT',
     PEN_SIZE : 'PEN_SIZE',
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
     COLOR_FORMAT: 'COLOR_FORMAT',
@@ -42,7 +41,6 @@
       'LAYER_PREVIEW' : true,
       'EXPORT_SCALE' : 1,
       'EXPORT_TAB' : 'gif',
-      'EXPORT_GIF_REPEAT' : true,
       'PEN_SIZE' : 1,
       'RESIZE_SETTINGS': {
         maintainRatio : true,

src/piskel-script-list.js

@@ -197,6 +197,7 @@
   "js/service/palette/PaletteImportService.js",
   "js/service/pensize/PenSizeService.js",
   "js/service/SavedStatusService.js",
+  "js/service/keyboard/InputService.js",
   "js/service/keyboard/KeycodeTranslator.js",
   "js/service/keyboard/KeyUtils.js",
   "js/service/keyboard/Shortcut.js",

src/templates/dialogs/browse-backups.html

@@ -28,11 +28,7 @@
 </script>
 
 <script type="text/template" id="session-list-empty">
-<div class="centered-message session-list-empty">No session found ...</div>
+<div class="session-list-empty">No session found ...</div>
-</script>
-
-<script type="text/template" id="session-list-error">
-<div class="centered-message session-list-error">Could not load backup sessions, something went wrong.</div>
 </script>
 
 <script type="text/template" id="session-list-item">
@@ -61,11 +57,7 @@
 </script>
 
 <script type="text/template" id="snapshot-list-empty">
-<div class="centered-message snapshot-list-empty">No snapshot found ...</div>
+<div class="snapshot-list-empty">No snapshot found ...</div>
-</script>
-
-<script type="text/template" id="snapshot-list-error">
-<div class="centered-message snapshot-list-error">Could not load snapshots, something went wrong.</div>
 </script>
 
 <script type="text/template" id="snapshot-list-item">

src/templates/dialogs/import.html

@@ -25,8 +25,8 @@
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Resize to</span>
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-width"/>x
+      <input type="text" class="textfield import-size-field" name="resize-width"/>x
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-height"/>
+      <input type="text" class="textfield import-size-field" name="resize-height"/>
     </div>
     <div class="import-section import-subsection">
       <span class="import-section-title">Smooth resize</span>
@@ -40,13 +40,13 @@
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Frame size</span>
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-x"/>x
+      <input type="text" class="textfield import-size-field" name="frame-size-x"/>x
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-y"/>
+      <input type="text" class="textfield import-size-field" name="frame-size-y"/>
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Offset</span>
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-x"/>x
+      <input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-y"/>
+      <input type="text" class="textfield import-size-field" name="frame-offset-y"/>
     </div>
   </form>
   <div class="import-step-buttons">
@@ -67,11 +67,11 @@
     <div class="import-mode">
       <div class="import-mode-title">How do you want to import the new content?</div>
       <div class="import-mode-section">
-        <span class="import-mode-section-description">Combine with your sprite</span>
+        <span class="import-mode-section-description">Combine the imported content and your sprite.</span>
-        <button class="import-mode-merge-button button-primary button">Combine</button>
+        <button class="import-mode-merge-button button-primary button">Merge</button>
       </div>
       <div class="import-mode-section">
-        <span class="import-mode-section-description">Replace your sprite</span>
+        <span class="import-mode-section-description">Replace your current sprite by the imported content.</span>
         <button class="import-mode-replace-button button-primary button">Replace</button>
       </div>
     </div>
@@ -131,6 +131,9 @@
     The imported image is bigger than the current sprite.
   </div>
   <div class="import-resize-section">
+    <div class="import-resize-option-label">
+      How do you want to proceed?
+    </div>
     <label class="import-resize-option">
       <input type="radio" name="resize-mode" id="resize-option-expand" value="expand" {{expandChecked}}/>
       <span>Expand canvas to {{newSize}}</span>
@@ -159,19 +162,19 @@
   </div>
 
   <div class="import-step-content">
-    <div>Select the insertion frame:</div>
+    <div>Select a frame in your current sprite:</div>
     <div class="insert-frame-preview"></div>
     <div class="insert-mode-container">
       <div class="insert-mode-option-label">
-        Insert imported frames:
+        How should the imported frames be inserted:
       </div>
       <label class="insert-mode-option">
         <input type="radio" name="insert-mode" id="insert-mode-add" value="add" checked="checked"/>
-        <span>as new frames</span>
+        <span>Add new frames</span>
       </label>
       <label class="insert-mode-option">
         <input type="radio" name="insert-mode" id="insert-mode-insert" value="insert"/>
-        <span>in existing frames</span>
+        <span>Insert in existing frames</span>
       </label>
     </div>
     <div class="import-step-buttons">
@@ -181,3 +184,13 @@
   </div>
 </div>
 </script>
+
+<script type="text/template" id="import-invalid-file">
+<div class="import-step-container">
+  <div>THIS IS AN INVALID FILEZ</div>
+  <div class="import-step-buttons">
+    <button class="import-back-button button">back</button>
+    <button class="import-next-button button button-primary">next</button>
+  </div>
+</div>
+</script>

src/templates/dialogs/performance-info.html

@@ -15,10 +15,10 @@
       <p>If you ignore this warning, please save often!</p>
       <p>To fix the issue, try adjusting your sprite settings:</p>
        <ul>
-        <li>sprite resolution <sup title="recommended: lower than 512x512" rel="tooltip" data-placement="top">?</sup></li>
+        <li>sprite resolution <sup title="recommended: lower than 256x256, max: 512x512" rel="tooltip" data-placement="top">?</sup></li>
-        <li>number of layers <sup title="recommended: less than 10" rel="tooltip" data-placement="top">?</sup></li>
+        <li>number of layers <sup title="recommended: lower than 5, max: 20" rel="tooltip" data-placement="top">?</sup></li>
-        <li>number of frames <sup title="recommended: less than 50" rel="tooltip" data-placement="top">?</sup></li>
+        <li>number of frames <sup title="recommended: lower than 25, max: 100" rel="tooltip" data-placement="top">?</sup></li>
-        <li>number of colors <sup title="recommended: less than 256" rel="tooltip" data-placement="top">?</sup></li>
+        <li>number of colors <sup title="max: 100" rel="tooltip" data-placement="top">?</sup></li>
       </ul>
       <p>We strive to improve Piskel, its performance and stability, but this is a personal project with limited time and resources.
          We prefer to warn you early rather than having you lose your work.</p>

src/templates/settings/export/gif.html

@@ -9,13 +9,6 @@
         Too many colors: can not preserve original colors or transparency.
       </div>
     </div>
-    <div class="export-panel-section export-panel-row">
-      <input id="gif-repeat-checkbox" class="gif-repeat-checkbox checkbox-fix" type="checkbox" />
-      <label for="gif-repeat-checkbox"
-             title="Uncheck to play the animation only one time."
-             rel="tooltip"
-             data-placement="top">Loop repeatedly</label>
-    </div>
     <div class="export-panel-section export-panel-row">
       <button type="button" class="button button-primary gif-download-button">Download</button>
       <div class="export-info">Download as an animated GIF.</div>

src/templates/settings/export/zip.html

@@ -7,7 +7,7 @@
         <input type="text" style="flex: 1;" class="zip-prefix-name textfield"
                autocomplete="off" placeholder="PNG file prefix ...">
       </div>
-      <div class="checkbox-container" style="margin: 5px 0;">
+      <div style="margin: 5px 0;">
         <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
         <label for="zip-split-layers">Split by layers</label>
       </div>

src/templates/settings/resize.html

@@ -17,13 +17,13 @@
           <span>px</span>
         </div>
         <div class="resize-section">
-          <label class="checkbox-container">
+          <label>
             <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
             <span>Maintain aspect ratio</span>
           </label>
         </div>
         <div class="resize-section">
-          <label class="checkbox-container">
+          <label>
             <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
             <span>Resize canvas content</span>
           </label>

test/casperjs/integration/IntegrationSuite.js

@@ -7,7 +7,6 @@
   'settings/test-export-png.js',
   'settings/test-export-png-scale.js',
   'settings/test-import-image.js',
-  'settings/test-import-image-empty.js',
   'settings/test-import-image-twice.js',
   'settings/test-resize-complete.js',
   'settings/test-resize-content-complete.js',

test/casperjs/integration/settings/test-import-image-empty.js

@@ -1,105 +0,0 @@
-/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
-   evalLine, waitForEvent, replaceFunction, setPiskelFromImageSrc */
-
-casper.test.begin('Image import test with an empty current sprite', 16, function(test) {
-  test.timeout = test.fail.bind(test, ['Test timed out']);
-
-  // Helper to retrieve the text content of the provided selector
-  // in the current wizard step.
-  var getTextContent = function (selector) {
-    return evalLine('document.querySelector(".current-step ' + selector +'").textContent');
-  };
-
-  function onTestStart() {
-    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
-
-    test.assert(!isDrawerExpanded(), 'settings drawer is closed');
-
-    waitForEvent('PISKEL_RESET', onPiskelReset, test.timeout);
-
-    // 1x1 transparent pixel
-    setPiskelFromGrid('['+
-      '[T]' +
-    ']');
-  }
-
-  function onPiskelReset() {
-    // Check the expected piskel was correctly loaded.
-    test.assertEquals(evalLine('pskl.app.currentColorsService.getCurrentColors().length'), 0, 'Has no color');
-    test.assertEquals(evalLine('pskl.app.piskelController.isEmpty()'), true, 'Current piskel is considered as empty');
-    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getWidth()'), 1, 'Piskel width is 1 pixel');
-    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 1, 'Piskel height is 1 pixel');
-
-    // Open export panel.
-    test.assertDoesntExist('.settings-section-import', 'Check if import panel is closed');
-    casper.click('[data-setting="import"]');
-
-    casper.waitForSelector('.settings-section-import', onImportPanelReady, test.timeout, 10000);
-  }
-
-  function onImportPanelReady() {
-    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
-    test.assertExists('.settings-section-import', 'Check if import panel is opened');
-
-    replaceFunction(test,
-      'pskl.utils.FileUtils.readImageFile',
-      function (file, callback) {
-        var image = new Image();
-        image.onload = callback.bind(null, image);
-        // Source for a simple base64 encoded PNG, 2x2, with 2 different colors and 2 transparent pixels.
-        image.src = [
-          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0',
-          'kAAAAF0lEQVQYVwXBAQEAAACCIPw/uiAYi406Ig4EARK1RMAAAAAASUVORK5CYII='
-        ].join('');
-      }
-    );
-
-    casper.echo('Clicking on Browse Images button');
-    test.assertExists('.file-input-button', 'The import image button is available');
-
-    // We can't really control the file picker from the test so we directly fire the event
-    casper.evaluate(
-      'function () {\
-        $.publish(Events.DIALOG_SHOW, {\
-          dialogId : "import",\
-          initArgs : {\
-            rawFiles: [{type: "image", name: "test-name.png"}]\
-          }\
-        });\
-      }'
-    );
-
-    casper.echo('Wait for .import-image-container');
-    casper.waitForSelector('.current-step.import-image-container', onImageImportReady, test.timeout, 10000);
-  }
-
-  function onImageImportReady() {
-    casper.echo('Found import-image-container');
-
-    // Click on export again to close the settings drawer.
-    test.assertEquals(getTextContent('.import-next-button'), 'import',
-      'Next button found, with text content \'import\'');
-    casper.click('.current-step .import-next-button');
-
-    // Since the current sprite is empty clicking on the button should directly finalize the import.
-    casper.waitForSelector('#dialog-container-wrapper:not(.show)', onPopupClosed, test.timeout, 10000);
-  }
-
-  function onPopupClosed() {
-    casper.echo('Import popup is closed, check the imported piskel content');
-    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getWidth()'), 2, 'Piskel width is 2 pixels');
-    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 2, 'Piskel height is 2 pixels');
-    test.assertEquals(evalLine('pskl.app.piskelController.getLayers().length'), 1, 'Piskel has 1 layer');
-    test.assertEquals(evalLine('pskl.app.piskelController.getFrameCount()'), 1, 'Piskel has 1 frame');
-  }
-
-  casper
-    .start(casper.cli.get('baseUrl')+"/?debug&integration-test")
-    .then(function () {
-      casper.echo("URL loaded");
-      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
-    })
-    .run(function () {
-      test.done();
-    });
-});

test/casperjs/integration/settings/test-import-image-twice.js

@@ -1,7 +1,7 @@
 /* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
    evalLine, waitForEvent, replaceFunction, setPiskelFromImageSrc */
 
-casper.test.begin('Double Image import test', 26, function(test) {
+casper.test.begin('Double Image import test', 25, function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
 
   // Helper to retrieve the text content of the provided selector
@@ -54,21 +54,18 @@ casper.test.begin('Double Image import test', 26, function(test) {
 
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
 
+    waitForEvent('PISKEL_RESET', onPiskelReset, test.timeout);
+
     // 1x1 black pixel
     var src = [
       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcS',
       'JAAAADUlEQVQYV2NgYGD4DwABBAEAcCBlCwAAAABJRU5ErkJggg=='
     ].join('');
     setPiskelFromImageSrc(src);
-
-    // For this test the most important is that the color service picked up the color from the sprite
-    // since it drives which flow will be used for the import.
-    casper.waitForSelector('.palettes-list-color:nth-child(1)', onPiskelPaletteUpdated, test.timeout, 10000);
   }
 
-  function onPiskelPaletteUpdated() {
+  function onPiskelReset() {
     // Check the expected piskel was correctly loaded.
-    test.assertEquals(evalLine('pskl.app.currentColorsService.getCurrentColors().length'), 1, 'Has 1 color');
     test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getWidth()'), 1, 'Piskel width is 1 pixel');
     test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 1, 'Piskel height is 1 pixel');
 

test/casperjs/integration/settings/test-import-image.js

@@ -1,7 +1,7 @@
 /* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
    evalLine, waitForEvent, replaceFunction, setPiskelFromImageSrc */
 
-casper.test.begin('Simple Image import test', 27, function(test) {
+casper.test.begin('Simple Image import test', 26, function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
 
   // Helper to retrieve the text content of the provided selector
@@ -30,21 +30,18 @@ casper.test.begin('Simple Image import test', 27, function(test) {
 
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
 
+    waitForEvent('PISKEL_RESET', onPiskelReset, test.timeout);
+
     // 1x1 black pixel
     var src = [
       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcS',
       'JAAAADUlEQVQYV2NgYGD4DwABBAEAcCBlCwAAAABJRU5ErkJggg=='
     ].join('');
     setPiskelFromImageSrc(src);
-
-    // For this test the most important is that the color service picked up the color from the sprite
-    // since it drives which flow will be used for the import.
-    casper.waitForSelector('.palettes-list-color:nth-child(1)', onPiskelPaletteUpdated, test.timeout, 10000);
   }
 
-  function onPiskelPaletteUpdated() {
+  function onPiskelReset() {
     // Check the expected piskel was correctly loaded.
-    test.assertEquals(evalLine('pskl.app.currentColorsService.getCurrentColors().length'), 1, 'Has 1 color');
     test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getWidth()'), 1, 'Piskel width is 1 pixel');
     test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 1, 'Piskel height is 1 pixel');
 

test/drawing/DrawingTests.browser.js

@@ -12,7 +12,6 @@
   "lighten.darken.json",
   "move.json",
   "move-alllayers-allframes.json",
-  "pen.mirror.pensize.json",
   "pen.secondary.color.json",
   "selection.rectangular.json",
   "squares.circles.json",

test/drawing/DrawingTests.casper.js

@@ -10,7 +10,6 @@
   "layers.top.bottom.json",
   "move.json",
   "move-alllayers-allframes.json",
-  "pen.mirror.pensize.json",
   "pen.secondary.color.json",
   "selection.rectangular.json",
   "squares.circles.json",

test/drawing/tests/pen.mirror.pensize.json

@@ -1,125 +0,0 @@
-{
- "events": [
-  {
-   "type": "pensize-event",
-   "penSize": 2
-  },
-  {
-   "type": "tool-event",
-   "toolId": "tool-vertical-mirror-pen"
-  },
-  {
-   "event": {
-    "type": "mousedown",
-    "button": 0,
-    "shiftKey": false,
-    "altKey": false,
-    "ctrlKey": false
-   },
-   "coords": {
-    "x": 1,
-    "y": 1
-   },
-   "type": "mouse-event"
-  },
-  {
-   "event": {
-    "type": "mousemove",
-    "button": 0,
-    "shiftKey": false,
-    "altKey": false,
-    "ctrlKey": false
-   },
-   "coords": {
-    "x": 1,
-    "y": 1
-   },
-   "type": "mouse-event"
-  },
-  {
-   "event": {
-    "type": "mousemove",
-    "button": 0,
-    "shiftKey": false,
-    "altKey": false,
-    "ctrlKey": false
-   },
-   "coords": {
-    "x": 1,
-    "y": 2
-   },
-   "type": "mouse-event"
-  },
-  {
-   "event": {
-    "type": "mousemove",
-    "button": 0,
-    "shiftKey": false,
-    "altKey": false,
-    "ctrlKey": false
-   },
-   "coords": {
-    "x": 1,
-    "y": 3
-   },
-   "type": "mouse-event"
-  },
-  {
-   "event": {
-    "type": "mousemove",
-    "button": 0,
-    "shiftKey": false,
-    "altKey": false,
-    "ctrlKey": false
-   },
-   "coords": {
-    "x": 1,
-    "y": 4
-   },
-   "type": "mouse-event"
-  },
-  {
-   "event": {
-    "type": "mousemove",
-    "button": 0,
-    "shiftKey": false,
-    "altKey": false,
-    "ctrlKey": false
-   },
-   "coords": {
-    "x": 1,
-    "y": 5
-   },
-   "type": "mouse-event"
-  },
-  {
-   "event": {
-    "type": "mouseup",
-    "button": 0,
-    "shiftKey": false,
-    "altKey": false,
-    "ctrlKey": false
-   },
-   "coords": {
-    "x": 1,
-    "y": 5
-   },
-   "type": "mouse-event"
-  },
-  {
-   "type": "pensize-event",
-   "penSize": 1
-  }
- ],
- "initialState": {
-  "size": {
-   "width": 6,
-   "height": 6
-  },
-  "primaryColor": "#000000",
-  "secondaryColor": "rgba(0, 0, 0, 0)",
-  "selectedTool": "tool-pen",
-  "penSize": 1
- },
- "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGElEQVQYV2NkYGD4zwABjFAazAdxBkwCAIsLDAFt5z4tAAAAAElFTkSuQmCC"
-}