release: version 0.8.2

Feature drag selection

misc/icons/source/tool-lasso-select.svg

@@ -20,9 +20,9 @@
    xml:space="preserve"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="tool-lasso-select.svg"
-   inkscape:export-filename="C:\Development\git\piskel\misc\icons\source\tool-lasso-select@2x.png"
+   inkscape:export-filename="C:\Development\git\piskel\misc\icons\source\tool-lasso-select.png"
-   inkscape:export-xdpi="90"
+   inkscape:export-xdpi="45"
-   inkscape:export-ydpi="90"><metadata
+   inkscape:export-ydpi="45"><metadata
    id="metadata9"><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><defs
@@ -39,22 +39,17 @@
    inkscape:window-height="1148"
    id="namedview5"
    showgrid="false"
-   inkscape:zoom="11.313709"
+   inkscape:zoom="5.6568543"
-   inkscape:cx="28.848556"
+   inkscape:cx="53.41565"
-   inkscape:cy="56.05112"
+   inkscape:cy="19.716081"
    inkscape:window-x="-8"
    inkscape:window-y="-8"
    inkscape:window-maximized="1"
    inkscape:current-layer="Layer_1" />
 
 <path
-   style="fill:none;stroke:#ffffff;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:5.99999987, 5.99999987;stroke-dashoffset:9.59999979"
+   style="fill:none;stroke:#ffffff;stroke-width:3.99999976000000010;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:7.99999982000000020, 3.99999991000000010;stroke-dashoffset:1.59999997000000000"
-   d="m 27.137305,45.116922 c 4.348192,3.354775 13.757306,5.64287 20.485225,5.05984 6.727919,-0.583031 15.989555,-2.799751 19.954403,-8.454605 3.964848,-5.654854 2.6921,-13.891707 -3.122398,-15.860913 -6.608117,-2.237981 -9.882928,4.099594 -19.471426,4.899951 -7.474124,0.623869 -14.014171,-4.834533 -18.728321,-1.630028 -7.360138,5.003149 -3.465675,12.63098 0.882517,15.985755 z"
+   d="M 63.459007,62.898551 C 51.21203,69.659898 34.408658,68.826355 23.032272,56.955855 11.655886,45.085355 16.081011,27.22439 25.257464,25.049087 c 9.176453,-2.175302 10.165996,14.382407 20.36105,14.647508 10.195054,0.265101 11.555041,-13.986139 23.446941,-11.490831 11.8919,2.495308 6.640529,27.93144 -5.606448,34.692787 z"
    id="path4945"
    inkscape:connector-curvature="0"
-   sodipodi:nodetypes="zszsssz" /><path
+   sodipodi:nodetypes="zzzzzz" /></svg>
-   style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-   d="M 26.563739,67.114661 C 33.855127,59.408496 44.134234,57.708412 44.506573,51.469924"
-   id="path4947"
-   inkscape:connector-curvature="0"
-   sodipodi:nodetypes="cc" /></svg>

misc/icons/source/tool-shape-select.svg

@@ -25,7 +25,7 @@
    inkscape:export-ydpi="90"><metadata
    id="metadata9"><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><defs
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
    id="defs7" /><sodipodi:namedview
    pagecolor="#ffffff"
    bordercolor="#666666"
@@ -40,7 +40,7 @@
    id="namedview5"
    showgrid="false"
    inkscape:zoom="8.9380977"
-   inkscape:cx="27.470446"
+   inkscape:cx="8.8982615"
    inkscape:cy="50.702772"
    inkscape:window-x="-8"
    inkscape:window-y="-8"
@@ -49,7 +49,7 @@
 
 <path
    style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
-   d="M 54.920882,32.150851 23.207014,63.864718 c 0,0 -1.426625,3.647594 -0.07284,5.00138 1.353787,1.353786 5.00138,-0.07284 5.00138,-0.07284 L 59.849422,37.07939 c 0,0 1.426626,-3.647593 0.07284,-5.001379 -1.353786,-1.353786 -5.00138,0.07284 -5.00138,0.07284 z m -2.537109,5.074219 c 0,0 1.701964,-0.835146 2.46427,-0.07284 0.762306,0.762306 -0.07284,2.464269 -0.07284,2.464269 l -26.639649,26.63965 c 0,0 -1.701963,0.835146 -2.464269,0.07284 -0.762306,-0.762305 0.07284,-2.464269 0.07284,-2.464269 z"
+   d="M 54.920882,32.150851 23.207015,63.864718 c 0,0 -1.426626,3.647594 -0.07284,5.001381 1.353787,1.353785 5.001381,-0.07284 5.001381,-0.07284 L 59.849423,37.07939 c 0,0 1.426625,-3.647592 0.07284,-5.001379 -1.353786,-1.353785 -5.00138,0.07284 -5.00138,0.07284 z m -4.969979,8.298204 c 0,0 1.306407,-1.230703 2.068713,-0.468398 0.762306,0.762307 -0.468398,2.068712 -0.468398,2.068712 L 27.739997,65.860591 c 0,0 -1.306406,1.230704 -2.068712,0.468398 -0.762306,-0.762305 0.468398,-2.068712 0.468398,-2.068712 z"
    id="rect4410"
    inkscape:connector-curvature="0"
    sodipodi:nodetypes="cczcczcczcczcc" /><path

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piskel",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Pixel art editor",
   "author": "Julian Descottes <julian.descottes@gmail.com>",
   "contributors": [
@@ -55,7 +55,7 @@
   },
   "window": {
     "title": "Piskel",
-    "icon": "dest/logo.png",
+    "icon": "dest/prod/logo.png",
     "toolbar": false,
     "width": 1000,
     "height": 500

src/css/tools.css

@@ -31,33 +31,39 @@
 
 .tool-paint-bucket .drawing-canvas-container:hover,
 .tool-colorswap .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/paint-bucket.png) 12 12, pointer;
+  cursor: url(../img/cursors/paint-bucket.png) 14 14, pointer;
 }
 
 .tool-vertical-mirror-pen .drawing-canvas-container:hover {
   cursor: url(../img/cursors/vertical-mirror-pen.png) 5 15, pointer;
 }
 
-.tool-pen .drawing-canvas-container:hover,
+.tool-pen .drawing-canvas-container:hover {
-.tool-lighten .drawing-canvas-container:hover,
+  cursor: url(../img/cursors/pen.png) 1 14, pointer;
+}
+
 .tool-dithering .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/pen.png) 0 15, pointer;
+  cursor: url(../img/cursors/dither.png) 1 14, pointer;
+}
+
+.tool-lighten .drawing-canvas-container:hover {
+  cursor: url(../img/cursors/lighten.png) 1 15, pointer;
 }
 
 .tool-eraser .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/eraser.png) 0 15, pointer;
+  cursor: url(../img/cursors/eraser.png) 3 14, pointer;
 }
 
 .tool-stroke .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/pen.png) 0 15, pointer;
+  cursor: url(../img/cursors/stroke.png) 1 14, pointer;
 }
 
 .tool-rectangle .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/rectangle.png) 0 15, pointer;
+  cursor: url(../img/cursors/rectangle.png) 5 15, pointer;
 }
 
 .tool-circle .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/circle.png) 2 15, pointer;
+  cursor: url(../img/cursors/circle.png) 5 15, pointer;
 }
 
 .tool-move .drawing-canvas-container:hover {
@@ -70,11 +76,11 @@
 }
 
 .tool-shape-select .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/wand.png) 15 15, pointer;
+  cursor: url(../img/cursors/wand.png) 10 5, pointer;
 }
 
 .tool-colorpicker .drawing-canvas-container:hover {
-  cursor: url(../img/cursors/dropper.png) 0 15, pointer;
+  cursor: url(../img/cursors/dropper.png) 2 15, pointer;
 }
 
 .swap-colors-button {

src/js/Events.js

@@ -63,6 +63,9 @@ var Events = {
   SELECTION_CREATED: 'SELECTION_CREATED',
   SELECTION_MOVE_REQUEST: 'SELECTION_MOVE_REQUEST',
   SELECTION_DISMISSED: 'SELECTION_DISMISSED',
+  SELECTION_COPY: 'SELECTION_COPY',
+  SELECTION_CUT: 'SELECTION_CUT',
+  SELECTION_PASTE: 'SELECTION_PASTE',
 
   SHOW_NOTIFICATION: 'SHOW_NOTIFICATION',
   HIDE_NOTIFICATION: 'HIDE_NOTIFICATION',

src/js/controller/DrawingController.js

@@ -64,8 +64,8 @@
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.RESET_ZOOM, this.resetZoom_.bind(this));
-    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_ZOOM, this.increaseZoom_.bind(this, 1));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_ZOOM, this.updateZoom_.bind(this, 1));
-    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_ZOOM, this.decreaseZoom_.bind(this, 1));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_ZOOM, this.updateZoom_.bind(this, -1));
 
     window.setTimeout(function () {
       this.afterWindowResize_();
@@ -86,9 +86,10 @@
     window.addEventListener('mouseup', this.onMouseup_.bind(this));
     window.addEventListener('mousemove', this.onMousemove_.bind(this));
     window.addEventListener('keyup', this.onKeyup_.bind(this));
-    window.addEventListener('touchstart', this.onMousedown_.bind(this));
+    window.addEventListener('touchstart', this.onTouchstart_.bind(this));
-    window.addEventListener('touchmove' , this.onMousemove_.bind(this));
+    window.addEventListener('touchmove' , this.onTouchmove_.bind(this));
-    window.addEventListener('touchend', this.onMouseup_.bind(this));
+    window.addEventListener('touchend', this.onTouchend_.bind(this));
+
     // Deactivate right click:
     body.contextmenu(this.onCanvasContextMenu_);
 
@@ -136,6 +137,19 @@
     $.publish(Events.ZOOM_CHANGED);
   };
 
+  ns.DrawingController.prototype.onTouchstart_ = function (event) {
+    this.onMousedown_(event);
+  };
+
+  ns.DrawingController.prototype.onTouchmove_ = function (event) {
+    this.onMousemove_(event);
+    event.preventDefault();
+  };
+
+  ns.DrawingController.prototype.onTouchend_ = function (event) {
+    this.onMouseup_(event);
+  };
+
   /**
    * @private
    */
@@ -231,7 +245,7 @@
     } else if (pskl.utils.UserAgent.isFirefox) {
       delta = -40 * evt.deltaY;
     }
-    var modifier = Math.abs(delta / 120);
+    var modifier = (delta / 120);
 
     if (pskl.utils.UserAgent.isMac ? evt.metaKey : evt.ctrlKey) {
       modifier = modifier * 5;
@@ -239,21 +253,41 @@
       evt.preventDefault();
     }
 
-    if (delta > 0) {
+    var coords = this.getSpriteCoordinates(evt.clientX, evt.clientY);
-      this.increaseZoom_(modifier);
+    this.updateZoom_(modifier, coords);
-    } else if (delta < 0) {
+  };
-      this.decreaseZoom_(modifier);
+
+  /**
+   * Update the current zoom level by a given multiplier.
+   *
+   * @param {Number} zoomMultiplier: factor by which the zoom should be modified. Negative
+   *        values will decrease the zoom, positive values will increase it.
+   * @param {Object} centerCoords, optional:
+   *        - {Number} x: x coordinate of the desired center the zoomed canvas
+   *        - {Number} y: y coordinate of the desired center the zoomed canvas
+   */
+  ns.DrawingController.prototype.updateZoom_ = function (zoomMultiplier, centerCoords) {
+    if (zoomMultiplier === 0) {
+      return;
     }
-  };
 
-  ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) {
+    var off = this.getOffset();
-    var step = (zoomMultiplier || 1) * this.getZoomStep_();
+    var oldWidth = this.getContainerWidth_() / this.renderer.getZoom();
+    var oldHeight = this.getContainerHeight_() / this.renderer.getZoom();
+
+    var step = zoomMultiplier * this.getZoomStep_();
     this.setZoom_(this.renderer.getZoom() + step);
-  };
 
-  ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) {
+    if (centerCoords) {
-    var step = (zoomMultiplier || 1) * this.getZoomStep_();
+      var xRatio = (centerCoords.x - off.x) / oldWidth;
-    this.setZoom_(this.renderer.getZoom() - step);
+      var yRatio = (centerCoords.y - off.y) / oldHeight;
+      var newWidth = this.getContainerWidth_() / this.renderer.getZoom();
+      var newHeight = this.getContainerHeight_() / this.renderer.getZoom();
+      this.setOffset(
+        off.x - ((newWidth - oldWidth) * xRatio),
+        off.y - ((newHeight - oldHeight) * yRatio)
+      );
+    }
   };
 
   /**

src/js/selection/SelectionManager.js

@@ -17,12 +17,16 @@
     $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
     $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
+    $.subscribe(Events.SELECTION_COPY, this.copy.bind(this));
+    $.subscribe(Events.SELECTION_CUT, this.cut.bind(this));
+    $.subscribe(Events.SELECTION_PASTE, this.paste.bind(this));
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.PASTE, this.paste.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.CUT, this.cut.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.COPY, this.copy.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.DELETE, this.onDeleteShortcut_.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.COMMIT, this.commit.bind(this));
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
@@ -107,6 +111,19 @@
     });
   };
 
+  /**
+   * If the currently selected tool is a selection tool, call commitSelection handler on
+   * the current tool instance.
+   */
+  ns.SelectionManager.prototype.commit = function() {
+    var tool = pskl.app.drawingController.currentToolBehavior;
+    var isSelectionTool = tool instanceof pskl.tools.drawing.selection.BaseSelect;
+    if (isSelectionTool) {
+      var overlay = pskl.app.drawingController.overlayFrame;
+      tool.commitSelection(overlay);
+    }
+  };
+
   ns.SelectionManager.prototype.replay = function (frame, replayData) {
     if (replayData.type === SELECTION_REPLAY.PASTE) {
       this.pastePixels_(frame, replayData.pixels);

src/js/service/keyboard/KeycodeTranslator.js

@@ -1,7 +1,7 @@
 (function () {
   var specialKeys = {
-    191 : '?',
     8 : 'back',
+    13 : 'enter',
     27 : 'esc',
     37 : 'left',
     38 : 'up',
@@ -20,6 +20,7 @@
     61 : '+',
     188 : '<',
     190 : '>',
+    191 : '?',
     219 : '[',
     221 : ']'
   };

src/js/service/keyboard/Shortcut.js

@@ -53,7 +53,18 @@
    * @return {Boolean} true if the shortcut can be updated
    */
   ns.Shortcut.prototype.isEditable = function () {
-    return this.getKeys().length < 2;
+    if (this.getKeys().length === 0) {
+      // No key defined: can be edited.
+      return true;
+    }
+
+    if (this.getKeys().length === 1) {
+      // Only one key defined, can be edited if it is not using a forbidden key.
+      return ns.Shortcuts.FORBIDDEN_KEYS.indexOf(this.getKeys()[0]) === -1;
+    }
+
+    // More than one key, can't be edited.
+    return false;
   };
 
   ns.Shortcut.prototype.isCustom = function () {

src/js/service/keyboard/Shortcuts.js

@@ -11,7 +11,7 @@
      * Or really custom shortcuts such as the 1-9 for color palette shorctus
      */
     FORBIDDEN_KEYS : ['1', '2', '3', '4', '5', '6', '7', '8', '9', '?', 'shift+?',
-      'del', 'back', 'ctrl+Y', 'ctrl+shift+Z'],
+      'DEL', 'BACK', 'ENTER', 'ctrl+Y', 'ctrl+shift+Z'],
 
     /**
      * Syntax : createShortcut(id, description, default key(s))
@@ -38,7 +38,8 @@
       CUT : createShortcut('selection-cut', 'Cut selection', 'ctrl+X'),
       COPY : createShortcut('selection-copy', 'Copy selection', 'ctrl+C'),
       PASTE : createShortcut('selection-paste', 'Paste selection', 'ctrl+V'),
-      DELETE : createShortcut('selection-delete', 'Delete selection', ['del', 'back'])
+      DELETE : createShortcut('selection-delete', 'Delete selection', ['DEL', 'BACK']),
+      COMMIT : createShortcut('selection-commit', 'Commit selection', ['ENTER'])
     },
 
     MISC : {

src/js/tools/drawing/selection/AbstractDragSelect.js

@@ -8,8 +8,6 @@
 
   ns.AbstractDragSelect = function () {
     ns.BaseSelect.call(this);
-
-    this.hasSelection = false;
   };
 
   pskl.utils.inherit(ns.AbstractDragSelect, ns.BaseSelect);
@@ -18,8 +16,7 @@
   ns.AbstractDragSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
     if (this.hasSelection) {
       this.hasSelection = false;
-      overlay.clear();
+      this.commitSelection(overlay);
-      $.publish(Events.SELECTION_DISMISSED);
     } else {
       this.hasSelection = true;
       this.onDragSelectStart_(col, row);

src/js/tools/drawing/selection/BaseSelect.js

@@ -18,11 +18,13 @@
     this.lastMoveRow = null;
 
     this.selection = null;
+    this.hasSelection = false;
 
     this.tooltipDescriptors = [
       {description : 'Drag the selection to move it. You may switch to other layers and frames.'},
       {key : 'ctrl+c', description : 'Copy the selected area'},
-      {key : 'ctrl+v', description : 'Paste the copied area'}
+      {key : 'ctrl+v', description : 'Paste the copied area'},
+      {key : 'shift', description : 'Hold to move the content'}
     ];
   };
 
@@ -48,6 +50,11 @@
       this.onSelectStart_(col, row, frame, overlay);
     } else {
       this.mode = 'moveSelection';
+      if (event.shiftKey && !this.isMovingContent_) {
+        this.isMovingContent_ = true;
+        $.publish(Events.SELECTION_CUT);
+        this.drawSelectionOnOverlay_(overlay);
+      }
       this.onSelectionMoveStart_(col, row, frame, overlay);
     }
   };
@@ -91,6 +98,10 @@
         this.bodyRoot.removeClass(this.secondaryToolId);
       }
     }
+
+    if (!this.hasSelection) {
+      pskl.tools.drawing.BaseTool.prototype.moveUnactiveToolAt.apply(this, arguments);
+    }
   };
 
   ns.BaseSelect.prototype.isInSelection = function (col, row) {
@@ -99,8 +110,19 @@
     });
   };
 
-  ns.BaseSelect.prototype.hideHighlightedPixel = function() {
+  /**
-    // there is no highlighted pixel for selection tools, do nothing
+   * Protected method, should be called when the selection is dismissed.
+   */
+  ns.BaseSelect.prototype.commitSelection = function (overlay) {
+    if (this.isMovingContent_) {
+      $.publish(Events.SELECTION_PASTE);
+      this.isMovingContent_ = false;
+    }
+
+    // Clean previous selection:
+    $.publish(Events.SELECTION_DISMISSED);
+    overlay.clear();
+    this.hasSelection = false;
   };
 
   /**

src/js/tools/drawing/selection/ShapeSelect.js

@@ -22,16 +22,18 @@
    * @override
    */
   ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
-    // Clean previous selection:
+    if (this.hasSelection) {
-    $.publish(Events.SELECTION_DISMISSED);
+      this.hasSelection = false;
-    overlay.clear();
+      this.commitSelection(overlay);
+    } else {
+      this.hasSelection = true;
+      // From the pixel clicked, get shape using an algorithm similar to the paintbucket one:
+      var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
+      this.selection = new pskl.selection.ShapeSelection(pixels);
 
-    // From the pixel cliked, get shape using an algorithm similar to the paintbucket one:
+      $.publish(Events.SELECTION_CREATED, [this.selection]);
-    var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
+      this.drawSelectionOnOverlay_(overlay);
-    this.selection = new pskl.selection.ShapeSelection(pixels);
+    }
-
-    $.publish(Events.SELECTION_CREATED, [this.selection]);
-    this.drawSelectionOnOverlay_(overlay);
   };
 
 })();