Mutualize HTML generation for drawing tools and transform

src/css/tools.css

@@ -98,8 +98,8 @@
 
 .tool-icon.tool-flip {
   background-image: url(../img/tools/flip.png);
-  background-position: 6px 6px;
-  background-size: 32px 32px;
+  background-position: 7px 10px;
+  background-size: 32px;
 }
 
 /*

src/js/controller/ToolController.js

@@ -7,23 +7,22 @@
     };
 
     this.tools = [
-      toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
-      toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
-      toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
-      toDescriptor('colorSwap', 'A', new pskl.drawingtools.ColorSwap()),
-      toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
-      toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
-      toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),
-      toDescriptor('circle', 'C', new pskl.drawingtools.Circle()),
-      toDescriptor('move', 'M', new pskl.drawingtools.Move()),
-      toDescriptor('rectangleSelect', 'S', new pskl.drawingtools.RectangleSelect()),
-      toDescriptor('shapeSelect', 'Z', new pskl.drawingtools.ShapeSelect()),
-      toDescriptor('lighten', 'U', new pskl.drawingtools.Lighten()),
-      toDescriptor('colorPicker', 'O', new pskl.drawingtools.ColorPicker())
+      toDescriptor('simplePen', 'P', new pskl.tools.drawing.SimplePen()),
+      toDescriptor('verticalMirrorPen', 'V', new pskl.tools.drawing.VerticalMirrorPen()),
+      toDescriptor('paintBucket', 'B', new pskl.tools.drawing.PaintBucket()),
+      toDescriptor('colorSwap', 'A', new pskl.tools.drawing.ColorSwap()),
+      toDescriptor('eraser', 'E', new pskl.tools.drawing.Eraser()),
+      toDescriptor('stroke', 'L', new pskl.tools.drawing.Stroke()),
+      toDescriptor('rectangle', 'R', new pskl.tools.drawing.Rectangle()),
+      toDescriptor('circle', 'C', new pskl.tools.drawing.Circle()),
+      toDescriptor('move', 'M', new pskl.tools.drawing.Move()),
+      toDescriptor('rectangleSelect', 'S', new pskl.tools.drawing.RectangleSelect()),
+      toDescriptor('shapeSelect', 'Z', new pskl.tools.drawing.ShapeSelect()),
+      toDescriptor('lighten', 'U', new pskl.tools.drawing.Lighten()),
+      toDescriptor('colorPicker', 'O', new pskl.tools.drawing.ColorPicker())
     ];
 
-    this.currentSelectedTool = this.tools[0];
-    this.previousSelectedTool = this.tools[0];
+    this.toolIconRenderer = new pskl.tools.IconMarkupRenderer();
   };
 
   /**
@@ -50,7 +49,7 @@
     var previousSelectedToolClass = stage.data("selected-tool-class");
     if(previousSelectedToolClass) {
       stage.removeClass(previousSelectedToolClass);
-      stage.removeClass(pskl.drawingtools.Move.TOOL_ID);
+      stage.removeClass(pskl.tools.drawing.Move.TOOL_ID);
     }
     stage.addClass(tool.instance.toolId);
     stage.data("selected-tool-class", tool.instance.toolId);
@@ -105,43 +104,21 @@
   };
 
   ns.ToolController.prototype.getToolById_ = function (toolId) {
-    for(var i = 0 ; i < this.tools.length ; i++) {
-      var tool = this.tools[i];
-      if (tool.instance.toolId == toolId) {
-        return tool;
-      }
-    }
-    return null;
+    return pskl.utils.Array.find(this.tools, function (tool) {
+      return tool.instance.toolId == toolId;
+    });
   };
 
   /**
    * @private
    */
   ns.ToolController.prototype.createToolsDom_ = function() {
-    var toolMarkup = '';
+    var html = '';
     for(var i = 0 ; i < this.tools.length ; i++) {
-      toolMarkup += this.getToolMarkup_(this.tools[i]);
+      var tool = this.tools[i];
+      html += this.toolIconRenderer.render(tool.instance, tool.shortcut);
     }
-    $('#tools-container').html(toolMarkup);
-  };
-
-  /**
-   * @private
-   */
-  ns.ToolController.prototype.getToolMarkup_ = function(tool) {
-    var toolId = tool.instance.toolId;
-
-    var classList = ['tool-icon', toolId];
-    if (this.currentSelectedTool == tool) {
-      classList.push('selected');
-    }
-
-    var tpl = pskl.utils.Template.get('drawingTool-item-template');
-    return pskl.utils.Template.replace(tpl, {
-      cssclass : classList.join(' '),
-      toolid : toolId,
-      title : tool.instance.getTooltipText(tool.shortcut)
-    });
+    $('#tools-container').html(html);
   };
 
   ns.ToolController.prototype.addKeyboardShortcuts_ = function () {

src/js/controller/TransformationsController.js

@@ -3,54 +3,44 @@
 
   ns.TransformationsController = function () {
 
+    var toDescriptor = function (id, shortcut, instance) {
+      return {id:id, shortcut:shortcut, instance:instance};
+    };
+
+    this.tools = [
+      toDescriptor('flip', 'F', new pskl.tools.transform.Flip())
+    ];
+
+    this.toolIconRenderer = new pskl.tools.IconMarkupRenderer();
   };
 
   ns.TransformationsController.prototype.init = function () {
     var container = document.querySelector('.transformations-container');
+    this.toolsContainer = container.querySelector('.tools-wrapper');
     container.addEventListener('click', this.onTransformationClick.bind(this));
+    this.createToolsDom_();
   };
 
 
   ns.TransformationsController.prototype.onTransformationClick = function (evt) {
-    var target = evt.target;
-    if (target.dataset.transformationId === 'flip') {
-      var allFrames = evt.shiftKey;
-      var allLayers = evt.ctrlKey;
-      if (evt.altKey) {
-        this.flip('vertical', allFrames, allLayers);
-      } else {
-        this.flip('horizontal', allFrames, allLayers);
-      }
+    var toolId = evt.target.dataset.toolId;
+    var tool = pskl.utils.Array.find(this.tools, function (tool) {
+      return tool.id === toolId;
+    });
+    if (tool) {
+      tool.instance.apply(evt);
     }
   };
 
-  ns.TransformationsController.prototype.flipFrame_ = function (frame, axis) {
-    var clone = frame.clone();
-    var w = frame.getWidth();
-    var h = frame.getHeight();
-    clone.forEachPixel(function (color, x, y) {
-      if (axis === 'horizontal') {
-        x = w-x-1;
-      } else if (axis === 'vertical') {
-        y = h-y-1;
-      }
-      frame.pixels[x][y] = color;
-    });
-    frame.version++;
-  };
-
-  ns.TransformationsController.prototype.flip = function (axis, allFrames, allLayers) {
-    var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
-    var layers = allLayers ? pskl.app.piskelController.getLayers(): [pskl.app.piskelController.getCurrentLayer()];
-    layers.forEach(function (layer) {
-      var frames = allFrames ? layer.getFrames(): [layer.getFrameAt(currentFrameIndex)];
-      frames.forEach(function (frame) {
-        this.flipFrame_(frame, axis);
-      }.bind(this));
-    }.bind(this));
-    $.publish(Events.PISKEL_RESET);
-    $.publish(Events.PISKEL_SAVE_STATE, {
-      type : pskl.service.HistoryService.SNAPSHOT
-    });
+  /**
+   * @private
+   */
+  ns.TransformationsController.prototype.createToolsDom_ = function() {
+    var html = '';
+    for(var i = 0 ; i < this.tools.length ; i++) {
+      var tool = this.tools[i];
+      html += this.toolIconRenderer.render(tool.instance, tool.shortcut);
+    }
+    this.toolsContainer.innerHTML = html;
   };
 })();

src/js/controller/dialogs/CreatePaletteController.js

@@ -27,7 +27,7 @@
     importFileButton.addEventListener('click', this.onImportFileButtonClick_.bind(this));
 
     var colorsListContainer = document.querySelector('.colors-container');
-    this.colorsListWidget = new pskl.controller.widgets.ColorsList(colorsListContainer);
+    this.colorsListWidget = new pskl.widgets.ColorsList(colorsListContainer);
 
     var palette;
     var isCurrentColorsPalette = paletteId == Constants.CURRENT_COLORS_PALETTE_ID;

src/js/selection/SelectionManager.js

@@ -41,7 +41,7 @@
    * @private
    */
   ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
-    var isSelectionTool = tool instanceof pskl.drawingtools.BaseSelect;
+    var isSelectionTool = tool instanceof pskl.tools.drawing.BaseSelect;
     if(!isSelectionTool) {
       this.cleanSelection_();
     }

src/js/tools/IconMarkupRenderer.js

@@ -0,0 +1,46 @@
+(function () {
+  var ns = $.namespace('pskl.tools');
+
+  ns.IconMarkupRenderer = function () {};
+
+  ns.IconMarkupRenderer.prototype.render = function (tool, shortcut) {
+    var tpl = pskl.utils.Template.get('drawingTool-item-template');
+    return pskl.utils.Template.replace(tpl, {
+      cssclass : ['tool-icon', tool.toolId].join(' '),
+      toolid : tool.toolId,
+      title : this.getTooltipText(tool, shortcut)
+    });
+  };
+
+  ns.IconMarkupRenderer.prototype.getTooltipText = function(tool, shortcut) {
+    var descriptors = tool.tooltipDescriptors;
+    var tpl = pskl.utils.Template.get('drawingTool-tooltipContainer-template');
+    return pskl.utils.Template.replace(tpl, {
+      helptext : tool.getHelpText(),
+      shortcut : shortcut,
+      descriptors : this.formatToolDescriptors_(descriptors)
+    });
+  };
+
+
+  ns.IconMarkupRenderer.prototype.formatToolDescriptors_ = function(descriptors) {
+    descriptors = descriptors || [];
+    return descriptors.reduce(function (p, descriptor) {
+      return p += this.formatToolDescriptor_(descriptor);
+    }.bind(this), '');
+  };
+
+  ns.IconMarkupRenderer.prototype.formatToolDescriptor_ = function(descriptor) {
+    var tpl;
+    if (descriptor.key) {
+      tpl = pskl.utils.Template.get('drawingTool-tooltipDescriptor-template');
+      descriptor.key = descriptor.key.toUpperCase();
+      if (pskl.utils.UserAgent.isMac) {
+        descriptor.key = descriptor.key.replace('CTRL', 'CMD');
+      }
+    } else {
+      tpl = pskl.utils.Template.get('drawingTool-simpleTooltipDescriptor-template');
+    }
+    return pskl.utils.Template.replace(tpl, descriptor);
+  };
+})();

src/js/tools/Tool.js

@@ -0,0 +1,17 @@
+(function () {
+  var ns = $.namespace('pskl.tools');
+
+  ns.Tool = function () {
+    this.toolId = "tool";
+    this.helpText = "Abstract tool";
+    this.tooltipDescriptors = [];
+  };
+
+  ns.Tool.prototype.getHelpText = function() {
+    return this.helpText;
+  };
+
+  ns.Tool.prototype.getId = function() {
+    return this.toolId;
+  };
+})();

src/js/tools/drawing/BaseTool.js

@@ -1,15 +1,18 @@
 /**
- * @provide pskl.drawingtools.BaseTool
+ * @provide pskl.tools.drawing.BaseTool
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.BaseTool = function() {
+    pskl.tool.Tool.call(this);
     this.toolId = "tool-base";
   };
 
+  pskl.utils.inherit(ns.BaseTool, pskl.tools.Tool);
+
   ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {};
 
   ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {};
@@ -58,41 +61,6 @@
     });
   };
 
-  ns.BaseTool.prototype.getHelpText = function() {
-    return this.shortHelpText || this.helpText;
-  };
-
-  ns.BaseTool.prototype.getTooltipText = function(shortcut) {
-    var tpl = pskl.utils.Template.get('drawingTool-tooltipContainer-template');
-
-    var descriptors = "";
-    if (Array.isArray(this.tooltipDescriptors)) {
-      this.tooltipDescriptors.forEach(function (descriptor) {
-        descriptors += this.getTooltipDescription(descriptor);
-      }.bind(this));
-    }
-
-    return pskl.utils.Template.replace(tpl, {
-      helptext : this.getHelpText(),
-      shortcut : shortcut,
-      descriptors : descriptors
-    });
-  };
-
-  ns.BaseTool.prototype.getTooltipDescription = function(descriptor) {
-    var tpl;
-    if (descriptor.key) {
-      tpl = pskl.utils.Template.get('drawingTool-tooltipDescriptor-template');
-      descriptor.key = descriptor.key.toUpperCase();
-      if (pskl.utils.UserAgent.isMac) {
-        descriptor.key = descriptor.key.replace('CTRL', 'CMD');
-      }
-    } else {
-      tpl = pskl.utils.Template.get('drawingTool-simpleTooltipDescriptor-template');
-    }
-    return pskl.utils.Template.replace(tpl, descriptor);
-  };
-
   ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
 
   /**

src/js/tools/drawing/Circle.js

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.Circle
+ * @provide pskl.tools.drawing.Circle
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.Circle = function() {
     ns.ShapeTool.call(this);

src/js/tools/drawing/ColorPicker.js

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.ColorPicker
+ * @provide pskl.tools.drawing.ColorPicker
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.ColorPicker = function() {
     this.toolId = "tool-colorpicker";

src/js/tools/drawing/ColorSwap.js

@@ -1,9 +1,9 @@
 /**
- * @provide pskl.drawingtools.ColorSwap
+ * @provide pskl.tools.drawing.ColorSwap
  *
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.ColorSwap = function() {
     this.toolId = "tool-colorswap";

src/js/tools/drawing/Eraser.js

@@ -1,11 +1,11 @@
 /**
- * @provide pskl.drawingtools.Eraser
+ * @provide pskl.tools.drawing.Eraser
  *
  * @require Constants
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.Eraser = function() {
     this.superclass.constructor.call(this);

src/js/tools/drawing/Lighten.js

@@ -1,11 +1,11 @@
 /**
- * @provide pskl.drawingtools.Eraser
+ * @provide pskl.tools.drawing.Eraser
  *
  * @require Constants
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
   var DEFAULT_STEP = 3;
 
   ns.Lighten = function() {

src/js/tools/drawing/Move.js

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.Move
+ * @provide pskl.tools.drawing.Move
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.Move = function() {
     this.toolId = ns.Move.TOOL_ID;

src/js/tools/drawing/PaintBucket.js

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.PaintBucket
+ * @provide pskl.tools.drawing.PaintBucket
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.PaintBucket = function() {
     this.toolId = "tool-paint-bucket";

src/js/tools/drawing/Rectangle.js

@@ -1,17 +1,17 @@
 /**
- * @provide pskl.drawingtools.Rectangle
+ * @provide pskl.tools.drawing.Rectangle
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.Rectangle = function() {
     ns.ShapeTool.call(this);
 
     this.toolId = "tool-rectangle";
 
-    this.shortHelpText = "Rectangle tool";
+    this.helpText = "Rectangle tool";
   };
 
   pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);

src/js/tools/drawing/ShapeTool.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace('pskl.drawingtools');
+  var ns = $.namespace('pskl.tools.drawing');
   /**
    * Abstract shape tool class, parent to all shape tools (rectangle, circle).
    * Shape tools should override only the draw_ method

src/js/tools/drawing/SimplePen.js

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.SimplePen
+ * @provide pskl.tools.drawing.SimplePen
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.SimplePen = function() {
     this.toolId = "tool-pen";

src/js/tools/drawing/Stroke.js

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.Stroke
+ * @provide pskl.tools.drawing.Stroke
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.Stroke = function() {
     this.toolId = "tool-stroke";

src/js/tools/drawing/VerticalMirrorPen.js

@@ -1,5 +1,5 @@
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.VerticalMirrorPen = function() {
     this.superclass.constructor.call(this);

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

@@ -1,13 +1,13 @@
 /**
- * @provide pskl.drawingtools.BaseSelect
+ * @provide pskl.tools.drawing.BaseSelect
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.BaseSelect = function() {
-    this.secondaryToolId = pskl.drawingtools.Move.TOOL_ID;
+    this.secondaryToolId = pskl.tools.drawing.Move.TOOL_ID;
     this.BodyRoot = $('body');
 
     // Select's first point coordinates (set in applyToolAt)

src/js/tools/drawing/selection/RectangleSelect.js

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.RectangleSelect
+ * @provide pskl.tools.drawing.RectangleSelect
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.RectangleSelect = function() {
     this.toolId = "tool-rectangle-select";

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

@@ -1,10 +1,10 @@
 /**
- * @provide pskl.drawingtools.ShapeSelect
+ * @provide pskl.tools.drawing.ShapeSelect
  *
  * @require pskl.utils
  */
 (function() {
-  var ns = $.namespace("pskl.drawingtools");
+  var ns = $.namespace("pskl.tools.drawing");
 
   ns.ShapeSelect = function() {
     this.toolId = "tool-shape-select";

src/js/tools/transform/Flip.js

@@ -0,0 +1,52 @@
+(function () {
+  var ns = $.namespace('pskl.tools.transform');
+
+  ns.Flip = function () {
+    this.toolId = "tool-flip";
+    this.helpText = "Flip tool";
+    this.tooltipDescriptors = [];
+  };
+
+  pskl.utils.inherit(ns.Flip, pskl.tools.Tool);
+
+  ns.Flip.prototype.apply = function (evt) {
+    var allFrames = evt.shiftKey;
+    var allLayers = evt.ctrlKey;
+    if (evt.altKey) {
+      this.flip('vertical', allFrames, allLayers);
+    } else {
+      this.flip('horizontal', allFrames, allLayers);
+    }
+  };
+
+  ns.Flip.prototype.flipFrame_ = function (frame, axis) {
+    var clone = frame.clone();
+    var w = frame.getWidth();
+    var h = frame.getHeight();
+    clone.forEachPixel(function (color, x, y) {
+      if (axis === 'horizontal') {
+        x = w-x-1;
+      } else if (axis === 'vertical') {
+        y = h-y-1;
+      }
+      frame.pixels[x][y] = color;
+    });
+    frame.version++;
+  };
+
+  ns.Flip.prototype.flip = function (axis, allFrames, allLayers) {
+    var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
+    var layers = allLayers ? pskl.app.piskelController.getLayers(): [pskl.app.piskelController.getCurrentLayer()];
+    layers.forEach(function (layer) {
+      var frames = allFrames ? layer.getFrames(): [layer.getFrameAt(currentFrameIndex)];
+      frames.forEach(function (frame) {
+        this.flipFrame_(frame, axis);
+      }.bind(this));
+    }.bind(this));
+    $.publish(Events.PISKEL_RESET);
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.SNAPSHOT
+    });
+  };
+
+})();

src/js/utils/Array.js

@@ -0,0 +1,16 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.Array = {
+    find : function (array, filterFn) {
+      var match = null;
+      array = Array.isArray(array) ? array : [];
+      var filtered = array.filter(filterFn);
+      if (filtered.length) {
+        match = filtered[0];
+      }
+      return match;
+    }
+  };
+
+})();

src/js/utils/TooltipFormatter.js

@@ -0,0 +1,37 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.TooltipFormatter = {};
+
+
+  ns.TooltipFormatter.formatForTool = function(shortcut, descriptors, helpText) {
+    var tpl = pskl.utils.Template.get('drawingTool-tooltipContainer-template');
+    return pskl.utils.Template.replace(tpl, {
+      helptext : helpText,
+      shortcut : shortcut,
+      descriptors : this.formatToolDescriptors_(descriptors)
+    });
+  };
+
+
+  ns.TooltipFormatter.formatToolDescriptors_ = function(descriptors) {
+    descriptors = descriptors || [];
+    return descriptors.reduce(function (p, descriptor) {
+      return p += this.formatToolDescriptor_(descriptor);
+    }.bind(this), '');
+  };
+
+  ns.TooltipFormatter.formatToolDescriptor_ = function(descriptor) {
+    var tpl;
+    if (descriptor.key) {
+      tpl = pskl.utils.Template.get('drawingTool-tooltipDescriptor-template');
+      descriptor.key = descriptor.key.toUpperCase();
+      if (pskl.utils.UserAgent.isMac) {
+        descriptor.key = descriptor.key.replace('CTRL', 'CMD');
+      }
+    } else {
+      tpl = pskl.utils.Template.get('drawingTool-simpleTooltipDescriptor-template');
+    }
+    return pskl.utils.Template.replace(tpl, descriptor);
+  };
+})();

src/js/widgets/ColorsList.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace('pskl.controller.widgets');
+  var ns = $.namespace('pskl.widgets');
 
   var DEFAULT_COLOR = '#000000';
 
@@ -20,7 +20,7 @@
     this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
 
     var colorPickerContainer = container.querySelector('.color-picker-container');
-    this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
+    this.hslRgbColorPicker = new pskl.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
     this.hslRgbColorPicker.init();
   };
 

src/js/widgets/HslRgbColorPicker.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace('pskl.controller.widgets');
+  var ns = $.namespace('pskl.widgets');
 
   ns.HslRgbColorPicker = function (container, colorUpdatedCallback) {
     this.container = container;

src/piskel-script-list.js

@@ -11,6 +11,7 @@
   // Libraries
   "js/utils/core.js",
   "js/utils/UserAgent.js",
+  "js/utils/Array.js",
   "js/utils/Base64.js",
   "js/utils/BlobUtils.js",
   "js/utils/CanvasUtils.js",
@@ -24,6 +25,7 @@
   "js/utils/PixelUtils.js",
   "js/utils/PiskelFileUtils.js",
   "js/utils/Template.js",
+  "js/utils/TooltipFormatter.js",
   "js/utils/UserSettings.js",
   "js/utils/Uuid.js",
   "js/utils/WorkerUtils.js",
@@ -112,9 +114,9 @@
   // Dialogs controller
   "js/controller/dialogs/DialogsController.js",
 
-  // Widget controller
-  "js/controller/widgets/ColorsList.js",
-  "js/controller/widgets/HslRgbColorPicker.js",
+  // Widgets
+  "js/widgets/ColorsList.js",
+  "js/widgets/HslRgbColorPicker.js",
 
   // Services
   "js/service/LocalStorageService.js",
@@ -142,22 +144,25 @@
   "js/service/FileDropperService.js",
 
   // Tools
-  "js/drawingtools/BaseTool.js",
-  "js/drawingtools/ShapeTool.js",
-  "js/drawingtools/SimplePen.js",
-  "js/drawingtools/Lighten.js",
-  "js/drawingtools/VerticalMirrorPen.js",
-  "js/drawingtools/Eraser.js",
-  "js/drawingtools/Stroke.js",
-  "js/drawingtools/PaintBucket.js",
-  "js/drawingtools/Rectangle.js",
-  "js/drawingtools/Circle.js",
-  "js/drawingtools/Move.js",
-  "js/drawingtools/selectiontools/BaseSelect.js",
-  "js/drawingtools/selectiontools/RectangleSelect.js",
-  "js/drawingtools/selectiontools/ShapeSelect.js",
-  "js/drawingtools/ColorPicker.js",
-  "js/drawingtools/ColorSwap.js",
+  "js/tools/Tool.js",
+  "js/tools/IconMarkupRenderer.js",
+  "js/tools/drawing/BaseTool.js",
+  "js/tools/drawing/ShapeTool.js",
+  "js/tools/drawing/SimplePen.js",
+  "js/tools/drawing/Lighten.js",
+  "js/tools/drawing/VerticalMirrorPen.js",
+  "js/tools/drawing/Eraser.js",
+  "js/tools/drawing/Stroke.js",
+  "js/tools/drawing/PaintBucket.js",
+  "js/tools/drawing/Rectangle.js",
+  "js/tools/drawing/Circle.js",
+  "js/tools/drawing/Move.js",
+  "js/tools/drawing/selection/BaseSelect.js",
+  "js/tools/drawing/selection/RectangleSelect.js",
+  "js/tools/drawing/selection/ShapeSelect.js",
+  "js/tools/drawing/ColorPicker.js",
+  "js/tools/drawing/ColorSwap.js",
+  "js/tools/transform/Flip.js",
 
   // Devtools
   "js/devtools/DrawingTestPlayer.js",

src/templates/transformations.html

@@ -1,9 +1,4 @@
 <div class="toolbox-container transformations-container">
   <h3 class="toolbox-title transformations-title">Transform</h3>
-  <ul class="tools-wrapper">
-    <li rel="tooltip" data-placement="right" class="tool-icon tool-flip" data-transformation-id="flip" title="flip"></li>
-    <li rel="tooltip" data-placement="right" class="tool-icon rotate" data-transformation-id="rotate" title="rotate"></li>
-    <li rel="tooltip" data-placement="right" class="tool-icon tool-flip" data-transformation-id="flip" title="flip"></li>
-    <li rel="tooltip" data-placement="right" class="tool-icon tool-flip" data-transformation-id="flip" title="flip"></li>
-  </ul>
+  <ul class="tools-wrapper"></ul>
 </div>