deploy dev version

dev/js/tools/drawing/selection/AbstractDragSelect.js

@@ -0,0 +1,59 @@
+/**
+ * Base class for all select tools that use a dragging mechanism to define the selection.
+ *
+ * @provide pskl.tools.drawing.selection.AbstractDragSelect
+ */
+(function () {
+  var ns = $.namespace('pskl.tools.drawing.selection');
+
+  ns.AbstractDragSelect = function () {
+    ns.BaseSelect.call(this);
+  };
+
+  pskl.utils.inherit(ns.AbstractDragSelect, ns.BaseSelect);
+
+  /** @override */
+  ns.AbstractDragSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
+    if (this.hasSelection) {
+      this.hasSelection = false;
+      this.commitSelection(overlay);
+    } else {
+      this.hasSelection = true;
+      this.onDragSelectStart_(col, row);
+      overlay.setPixel(col, row, this.getTransparentVariant_(Constants.SELECTION_TRANSPARENT_COLOR));
+    }
+  };
+
+  /** @override */
+  ns.AbstractDragSelect.prototype.onSelect_ = function (col, row, frame, overlay) {
+    if (!this.hasSelection && (this.startCol !== col || this.startRow !== row)) {
+      this.hasSelection = true;
+      this.onDragSelectStart_(col, row);
+    }
+
+    if (this.hasSelection) {
+      this.onDragSelect_(col, row, frame, overlay);
+    }
+  };
+
+  /** @override */
+  ns.AbstractDragSelect.prototype.onSelectEnd_ = function (col, row, frame, overlay) {
+    if (this.hasSelection) {
+      this.onDragSelectEnd_(col, row, frame, overlay);
+    }
+  };
+
+  /** @private */
+  ns.AbstractDragSelect.prototype.startDragSelection_ = function (col, row, overlay) {
+    this.hasSelection = true;
+    this.onDragSelectStart_(col, row);
+    overlay.setPixel(col, row, this.getTransparentVariant_(Constants.SELECTION_TRANSPARENT_COLOR));
+  };
+
+  /** @protected */
+  ns.AbstractDragSelect.prototype.onDragSelectStart_ = function (col, row, frame, overlay) {};
+  /** @protected */
+  ns.AbstractDragSelect.prototype.onDragSelect_ = function (col, row, frame, overlay) {};
+  /** @protected */
+  ns.AbstractDragSelect.prototype.onDragSelectEnd_ = function (col, row, frame, overlay) {};
+})();

dev/js/tools/drawing/selection/BaseSelect.js

@@ -0,0 +1,184 @@
+/**
+ * @provide pskl.tools.drawing.selection.BaseSelect
+ *
+ * @require pskl.utils
+ */
+(function() {
+  var ns = $.namespace('pskl.tools.drawing.selection');
+
+  ns.BaseSelect = function() {
+    this.secondaryToolId = pskl.tools.drawing.Move.TOOL_ID;
+    this.bodyRoot = $('body');
+
+    // Select's first point coordinates (set in applyToolAt)
+    this.startCol = null;
+    this.startRow = null;
+
+    this.lastMoveCol = null;
+    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 : 'shift', description : 'Hold to move the content'}
+    ];
+  };
+
+  pskl.utils.inherit(ns.BaseSelect, pskl.tools.drawing.BaseTool);
+
+  /**
+   * @override
+   */
+  ns.BaseSelect.prototype.applyToolAt = function(col, row, frame, overlay, event) {
+    this.startCol = col;
+    this.startRow = row;
+
+    this.lastMoveCol = col;
+    this.lastMoveRow = row;
+
+    // The select tool can be in two different state.
+    // If the inital click of the tool is not on a selection, we go in 'select'
+    // mode to create a selection.
+    // If the initial click is on a previous selection, we go in 'moveSelection'
+    // mode to allow to move the selection by drag'n dropping it.
+    if (!this.isInSelection(col, row)) {
+      this.mode = 'select';
+      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);
+    }
+  };
+
+  /**
+   * @override
+   */
+  ns.BaseSelect.prototype.moveToolAt = function(col, row, frame, overlay, event) {
+    if (this.mode == 'select') {
+      this.onSelect_(col, row, frame, overlay);
+    } else if (this.mode == 'moveSelection') {
+      this.onSelectionMove_(col, row, frame, overlay);
+    }
+  };
+
+  /**
+   * @override
+   */
+  ns.BaseSelect.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
+    if (this.mode == 'select') {
+      this.onSelectEnd_(col, row, frame, overlay);
+    } else if (this.mode == 'moveSelection') {
+      this.onSelectionMoveEnd_(col, row, frame, overlay);
+    }
+  };
+
+  /**
+   * If we mouseover the selection draw inside the overlay frame, show the 'move' cursor
+   * instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
+   * @override
+   */
+  ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, frame, overlay, event) {
+    if (overlay.containsPixel(col, row)) {
+      if (this.isInSelection(col, row)) {
+        // We're hovering the selection, show the move tool:
+        this.bodyRoot.addClass(this.secondaryToolId);
+        this.bodyRoot.removeClass(this.toolId);
+      } else {
+        // We're not hovering the selection, show create selection tool:
+        this.bodyRoot.addClass(this.toolId);
+        this.bodyRoot.removeClass(this.secondaryToolId);
+      }
+    }
+
+    if (!this.hasSelection) {
+      pskl.tools.drawing.BaseTool.prototype.moveUnactiveToolAt.apply(this, arguments);
+    }
+  };
+
+  ns.BaseSelect.prototype.isInSelection = function (col, row) {
+    return this.selection && this.selection.pixels.some(function (pixel) {
+      return pixel.col === col && pixel.row === row;
+    });
+  };
+
+  /**
+   * 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;
+  };
+
+  /**
+   * For each pixel in the selection draw it in white transparent on the tool overlay
+   * @protected
+   */
+  ns.BaseSelect.prototype.drawSelectionOnOverlay_ = function (overlay) {
+    var pixels = this.selection.pixels;
+    for (var i = 0, l = pixels.length; i < l ; i++) {
+      var pixel = pixels[i];
+      var hasColor = pixel.color && pixel.color !== Constants.TRANSPARENT_COLOR ;
+      var color = hasColor ? this.getTransparentVariant_(pixel.color) : Constants.SELECTION_TRANSPARENT_COLOR;
+
+      overlay.setPixel(pixels[i].col, pixels[i].row, color);
+    }
+  };
+
+  ns.BaseSelect.prototype.getTransparentVariant_ = pskl.utils.FunctionUtils.memo(function (colorStr) {
+    var color = window.tinycolor(colorStr);
+    color = window.tinycolor.lighten(color, 10);
+    color.setAlpha(0.5);
+    return color.toRgbString();
+  }, {});
+
+  // The list of callbacks to implement by specialized tools to implement the selection creation behavior.
+  /** @protected */
+  ns.BaseSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {};
+  /** @protected */
+  ns.BaseSelect.prototype.onSelect_ = function (col, row, frame, overlay) {};
+  /** @protected */
+  ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, frame, overlay) {};
+
+  // The list of callbacks that define the drag'n drop behavior of the selection.
+  /** @private */
+
+  ns.BaseSelect.prototype.onSelectionMoveStart_ = function (col, row, frame, overlay) {};
+
+  /** @private */
+  ns.BaseSelect.prototype.onSelectionMove_ = function (col, row, frame, overlay) {
+    var deltaCol = col - this.lastMoveCol;
+    var deltaRow = row - this.lastMoveRow;
+
+    var colDiff = col - this.startCol;
+    var rowDiff = row - this.startRow;
+
+    this.selection.move(deltaCol, deltaRow);
+
+    overlay.clear();
+    this.drawSelectionOnOverlay_(overlay);
+
+    this.lastMoveCol = col;
+    this.lastMoveRow = row;
+  };
+
+  /** @private */
+  ns.BaseSelect.prototype.onSelectionMoveEnd_ = function (col, row, frame, overlay) {
+    this.onSelectionMove_(col, row, frame, overlay);
+  };
+})();

dev/js/tools/drawing/selection/LassoSelect.js

@@ -0,0 +1,88 @@
+/**
+ * @provide pskl.tools.drawing.selection.LassoSelect
+ *
+ * @require pskl.utils
+ */
+(function() {
+  var ns = $.namespace('pskl.tools.drawing.selection');
+
+  ns.LassoSelect = function() {
+    ns.AbstractDragSelect.call(this);
+
+    this.toolId = 'tool-lasso-select';
+    this.helpText = 'Lasso selection';
+    this.shortcut = pskl.service.keyboard.Shortcuts.TOOL.LASSO_SELECT;
+  };
+
+  pskl.utils.inherit(ns.LassoSelect, ns.AbstractDragSelect);
+
+  /** @override */
+  ns.LassoSelect.prototype.onDragSelectStart_ = function (col, row) {
+    this.pixels = [{col : col, row : row}];
+
+    this.startCol = col;
+    this.startRow = row;
+
+    this.previousCol = col;
+    this.previousRow = row;
+
+    $.publish(Events.DRAG_START, [col, row]);
+  };
+
+  /** @override */
+  ns.LassoSelect.prototype.onDragSelect_ = function (col, row, frame, overlay) {
+    this.addPixel_(col, row, frame);
+    // use ShapeSelection during selection, contains only the pixels hovered by the user
+    var selection = new pskl.selection.ShapeSelection(this.getLassoPixels_());
+    this.setSelection_(selection, overlay);
+  };
+
+  /** @override */
+  ns.LassoSelect.prototype.onDragSelectEnd_ = function (col, row, frame, overlay) {
+    this.addPixel_(col, row, frame);
+    // use LassoSelection to finalize selection, includes pixels inside the lasso shape
+    var selection = new pskl.selection.LassoSelection(this.getLassoPixels_(), frame);
+    this.setSelection_(selection, overlay);
+
+    $.publish(Events.DRAG_END);
+  };
+
+  /**
+   * Retrieve the lasso shape as an array of pixels. A line is added between the origin of the selection
+   * and the last known coordinate to make sure the shape is closed.
+   *
+   * @return {Array} array of pixels corresponding to the whole lasso shape
+   * @private
+   */
+  ns.LassoSelect.prototype.getLassoPixels_ = function () {
+    var line = pskl.PixelUtils.getLinePixels(this.previousCol, this.startCol, this.previousRow, this.startRow);
+    return this.pixels.concat(line);
+  };
+
+  /**
+   * Add the provided pixel to the lasso pixels Array.
+   * @private
+   */
+  ns.LassoSelect.prototype.addPixel_ = function (col, row, frame) {
+    // normalize coordinates to always remain inside the frame
+    col = pskl.utils.Math.minmax(col, 0, frame.getWidth() - 1);
+    row = pskl.utils.Math.minmax(row, 0, frame.getHeight() - 1);
+
+    // line interpolation needed in case mousemove was too fast
+    var interpolatedPixels = pskl.PixelUtils.getLinePixels(col, this.previousCol, row, this.previousRow);
+    this.pixels = this.pixels.concat(interpolatedPixels);
+
+    // update state
+    this.previousCol = col;
+    this.previousRow = row;
+  };
+
+  /** @private */
+  ns.LassoSelect.prototype.setSelection_ = function (selection, overlay) {
+    this.selection = selection;
+
+    $.publish(Events.SELECTION_CREATED, [this.selection]);
+    overlay.clear();
+    this.drawSelectionOnOverlay_(overlay);
+  };
+})();

dev/js/tools/drawing/selection/RectangleSelect.js

@@ -0,0 +1,44 @@
+/**
+ * @provide pskl.tools.drawing.selection.RectangleSelect
+ *
+ * @require pskl.utils
+ */
+(function() {
+  var ns = $.namespace('pskl.tools.drawing.selection');
+
+  ns.RectangleSelect = function() {
+    ns.AbstractDragSelect.call(this);
+
+    this.toolId = 'tool-rectangle-select';
+    this.helpText = 'Rectangle selection';
+    this.shortcut = pskl.service.keyboard.Shortcuts.TOOL.RECTANGLE_SELECT;
+
+  };
+
+  pskl.utils.inherit(ns.RectangleSelect, ns.AbstractDragSelect);
+
+  /** @override */
+  ns.RectangleSelect.prototype.onDragSelectStart_ = function (col, row) {
+    $.publish(Events.DRAG_START, [col, row]);
+  };
+
+  /**
+   * When creating the rectangle selection, we clear the current overlayFrame and
+   * redraw the current rectangle based on the orgin coordinate and
+   * the current mouse coordiinate in sprite.
+   * @override
+   */
+  ns.RectangleSelect.prototype.onDragSelect_ = function (col, row, frame, overlay) {
+    overlay.clear();
+    this.selection = new pskl.selection.RectangularSelection(this.startCol, this.startRow, col, row);
+    $.publish(Events.SELECTION_CREATED, [this.selection]);
+    this.drawSelectionOnOverlay_(overlay);
+  };
+
+  /** @override */
+  ns.RectangleSelect.prototype.onDragSelectEnd_ = function (col, row, frame, overlay) {
+    this.onSelect_(col, row, frame, overlay);
+    $.publish(Events.DRAG_END);
+  };
+
+})();

dev/js/tools/drawing/selection/ShapeSelect.js

@@ -0,0 +1,39 @@
+/**
+ * @provide pskl.tools.drawing.selection.ShapeSelect
+ *
+ * @require pskl.utils
+ */
+(function() {
+  var ns = $.namespace('pskl.tools.drawing.selection');
+
+  ns.ShapeSelect = function() {
+    ns.BaseSelect.call(this);
+
+    this.toolId = 'tool-shape-select';
+    this.helpText = 'Shape selection';
+    this.shortcut = pskl.service.keyboard.Shortcuts.TOOL.SHAPE_SELECT;
+  };
+
+  pskl.utils.inherit(ns.ShapeSelect, ns.BaseSelect);
+
+  /**
+   * For the shape select tool, you just need to click one time to create a selection.
+   * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
+   * @override
+   */
+  ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
+    if (this.hasSelection) {
+      this.hasSelection = false;
+      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);
+
+      $.publish(Events.SELECTION_CREATED, [this.selection]);
+      this.drawSelectionOnOverlay_(overlay);
+    }
+  };
+
+})();