From 57567af06bfb7b69d78475f725f6fdbe7267e352 Mon Sep 17 00:00:00 2001
From: Carlo 'zED' Caputo <carlo.caputo@gmail.com>
Date: Mon, 25 Jul 2016 09:51:58 -0300
Subject: [PATCH 1/8] Add thumbnails in timeline (#340)

Reviewed-by: David Capello <davidcapello@gmail.com>
---
 data/gui.xml                                  |   1 +
 data/pref.xml                                 |  11 ++
 data/widgets/timeline_conf.xml                |  17 ++
 src/app/CMakeLists.txt                        |   2 +
 .../cmd_toggle_timeline_thumbnails.cpp        |  50 ++++++
 src/app/commands/commands_list.h              |   1 +
 src/app/file/pixly_format.cpp                 |   2 +-
 src/app/pref/preferences.h                    |   1 +
 src/app/thumbnails.cpp                        |  96 ++++++++++++
 src/app/thumbnails.h                          |  30 ++++
 src/app/ui/configure_timeline_popup.cpp       |  73 ++++++++-
 src/app/ui/configure_timeline_popup.h         |   8 +
 src/app/ui/timeline.cpp                       | 148 +++++++++++++++++-
 src/app/ui/timeline.h                         |  16 ++
 14 files changed, 453 insertions(+), 3 deletions(-)
 create mode 100644 src/app/commands/cmd_toggle_timeline_thumbnails.cpp
 create mode 100644 src/app/thumbnails.cpp
 create mode 100644 src/app/thumbnails.h

diff --git a/data/gui.xml b/data/gui.xml
index 154cd6807..195b161d8 100644
--- a/data/gui.xml
+++ b/data/gui.xml
@@ -106,6 +106,7 @@
       <key command="SnapToGrid" shortcut="Shift+S" />
       <key command="SetLoopSection" shortcut="F2" />
       <key command="ShowOnionSkin" shortcut="F3" />
+      <key command="ToggleTimelineThumbnails" shortcut="F6" />
       <key command="Timeline" shortcut="Tab">
         <param name="switch" value="true" />
       </key>
diff --git a/data/pref.xml b/data/pref.xml
index 6dd611eb5..3261bc7df 100644
--- a/data/pref.xml
+++ b/data/pref.xml
@@ -197,6 +197,9 @@
     <section id="symmetry_mode">
       <option id="enabled" type="bool" default="false" />
     </section>
+    <section id="thumbnails">
+      <option id="cache_limit" type="int" default="5000" />
+    </section>
   </global>
 
   <tool>
@@ -253,6 +256,14 @@
       <option id="color1" type="app::Color" default="app::Color::fromRgb(128, 128, 128)" migrate="Option.CheckedBgColor1" />
       <option id="color2" type="app::Color" default="app::Color::fromRgb(192, 192, 192)" migrate="Option.CheckedBgColor2" />
     </section>
+    <section id="thumbnails">
+      <option id="enabled" type="bool" default="false" />
+      <option id="overlay_enabled" type="bool" default="false" />
+      <option id="overlay_size" type="int" default="5" />
+      <option id="quality" type="doc::algorithm::ResizeMethod" default="doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR" />
+      <option id="opacity" type="int" default="255" />
+      <option id="background" type="app::Color" default="app::Color::fromRgb(180, 180, 180, 220)" />
+    </section>
     <section id="onionskin">
       <option id="active" type="bool" default="false" migrate="Onionskin.Enabled" />
       <option id="prev_frames" type="int" default="1" migrate="Onionskin.PrevFrames" />
diff --git a/data/widgets/timeline_conf.xml b/data/widgets/timeline_conf.xml
index d43a31266..49b9ca067 100644
--- a/data/widgets/timeline_conf.xml
+++ b/data/widgets/timeline_conf.xml
@@ -2,6 +2,23 @@
 <!-- Copyright (C) 2014, 2015 by David Capello -->
 <gui>
 <vbox id="timeline_conf">
+  <separator cell_hspan="2" text="Thumbnails:" left="true" horizontal="true" />
+  <grid columns="3">
+    <check id="thumb_enabled" text="Enabled" />
+    <label text="Opacity:" />
+    <slider min="0" max="255" id="thumb_opacity" cell_align="horizontal" width="128" />
+
+    <check id="thumb_overlay_enabled" text="Overlay"/>
+    <label text="Size:" />
+    <slider min="2" max="10" id="thumb_overlay_size" cell_align="horizontal" width="128" />
+
+    <label text="Quality:" />
+    <combobox id="thumb_quality" expansive="true" cell_hspan="2" />
+
+    <label text="Background:" />
+    <colorpicker id="thumb_background" expansive="true" cell_hspan="2" />
+
+  </grid>
   <separator cell_hspan="2" text="Onion Skin:" left="true" horizontal="true" />
   <grid columns="2">
     <hbox cell_hspan="2">
diff --git a/src/app/CMakeLists.txt b/src/app/CMakeLists.txt
index e4e162b2e..e325ee40c 100644
--- a/src/app/CMakeLists.txt
+++ b/src/app/CMakeLists.txt
@@ -228,6 +228,7 @@ add_library(app-lib
   commands/cmd_new_layer_set.cpp
   commands/cmd_new_sprite_from_selection.cpp
   commands/cmd_onionskin.cpp
+  commands/cmd_toggle_timeline_thumbnails.cpp
   commands/cmd_open_file.cpp
   commands/cmd_open_in_folder.cpp
   commands/cmd_open_with_app.cpp
@@ -426,6 +427,7 @@ add_library(app-lib
   ui/workspace_tabs.cpp
   ui/zoom_entry.cpp
   ui_context.cpp
+  thumbnails.cpp
   util/autocrop.cpp
   util/clipboard.cpp
   util/clipboard_native.cpp
diff --git a/src/app/commands/cmd_toggle_timeline_thumbnails.cpp b/src/app/commands/cmd_toggle_timeline_thumbnails.cpp
new file mode 100644
index 000000000..710287d1e
--- /dev/null
+++ b/src/app/commands/cmd_toggle_timeline_thumbnails.cpp
@@ -0,0 +1,50 @@
+// Aseprite
+// Copyright (C) 2016  Carlo Caputo
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+
+#ifdef HAVE_CONFIG_H
+#include "config.h"
+#endif
+
+#include "app/app.h"
+#include "app/commands/command.h"
+#include "app/context.h"
+#include "app/document.h"
+#include "app/pref/preferences.h"
+
+namespace app {
+
+using namespace gfx;
+
+class ToggleTimelineThumbnailsCommand : public Command {
+public:
+  ToggleTimelineThumbnailsCommand()
+    : Command("ToggleTimelineThumbnails",
+              "Toggle Timeline Thumbnails",
+              CmdUIOnlyFlag)
+  {
+  }
+
+  Command* clone() const override { return new ToggleTimelineThumbnailsCommand(*this); }
+
+protected:
+  bool onChecked(Context* context) override {
+    DocumentPreferences& docPref = Preferences::instance().document(context->activeDocument());
+    return docPref.thumbnails.enabled();
+  }
+
+  void onExecute(Context* context) override {
+    DocumentPreferences& docPref = Preferences::instance().document(context->activeDocument());
+    docPref.thumbnails.enabled(!docPref.thumbnails.enabled());
+  }
+};
+
+Command* CommandFactory::createToggleTimelineThumbnailsCommand()
+{
+  return new ToggleTimelineThumbnailsCommand;
+}
+
+} // namespace app
diff --git a/src/app/commands/commands_list.h b/src/app/commands/commands_list.h
index 3447df22b..74a40cbd2 100644
--- a/src/app/commands/commands_list.h
+++ b/src/app/commands/commands_list.h
@@ -122,6 +122,7 @@ FOR_EACH_COMMAND(ShowExtras)
 FOR_EACH_COMMAND(ShowGrid)
 FOR_EACH_COMMAND(ShowLayerEdges)
 FOR_EACH_COMMAND(ShowOnionSkin)
+FOR_EACH_COMMAND(ToggleTimelineThumbnails)
 FOR_EACH_COMMAND(ShowPixelGrid)
 FOR_EACH_COMMAND(ShowSelectionEdges)
 FOR_EACH_COMMAND(SnapToGrid)
diff --git a/src/app/file/pixly_format.cpp b/src/app/file/pixly_format.cpp
index a38c03a88..a923e27cd 100644
--- a/src/app/file/pixly_format.cpp
+++ b/src/app/file/pixly_format.cpp
@@ -1,5 +1,5 @@
 // Aseprite
-// Copyright (C) 2016  Carlo "zED" Caputo
+// Copyright (C) 2016  Carlo Caputo
 //
 // This program is free software; you can redistribute it and/or modify
 // it under the terms of the GNU General Public License version 2 as
diff --git a/src/app/pref/preferences.h b/src/app/pref/preferences.h
index 944809ce4..0c7a1aa57 100644
--- a/src/app/pref/preferences.h
+++ b/src/app/pref/preferences.h
@@ -26,6 +26,7 @@
 #include "gfx/rect.h"
 #include "render/onionskin_position.h"
 #include "render/zoom.h"
+#include "doc/algorithm/resize_image.h"
 
 #include "pref.xml.h"
 
diff --git a/src/app/thumbnails.cpp b/src/app/thumbnails.cpp
new file mode 100644
index 000000000..d1aef1b98
--- /dev/null
+++ b/src/app/thumbnails.cpp
@@ -0,0 +1,96 @@
+// Aseprite
+// Copyright (C) 2016  Carlo Caputo
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+
+#include "app/color_utils.h"
+#include "app/document.h"
+#include "app/pref/preferences.h"
+#include "app/thumbnails.h"
+#include "base/bind.h"
+#include "base/connection.h"
+#include "base/shared_ptr.h"
+#include "doc/algorithm/resize_image.h"
+#include "doc/algorithm/rotate.h"
+#include "doc/cel.h"
+#include "doc/conversion_she.h"
+#include "doc/doc.h"
+#include "doc/frame.h"
+#include "doc/object.h"
+#include "doc/object_id.h"
+#include "render/render.h"
+#include "she/surface.h"
+#include "she/system.h"
+
+namespace app {
+  namespace thumb {
+
+    she::Surface* get_cel_thumbnail(const doc::Cel* cel, const gfx::Rect& bounds)
+    {
+      app::Document* document = static_cast<app::Document*>(cel->sprite()->document());
+      doc::frame_t frame = cel->frame();
+      doc::Image* image = cel->image();
+
+      DocumentPreferences& docPref = Preferences::instance().document(document);
+
+      int opacity = docPref.thumbnails.opacity();
+      gfx::Color background = color_utils::color_for_ui(docPref.thumbnails.background());
+      doc::algorithm::ResizeMethod resize_method = docPref.thumbnails.quality();
+
+      gfx::Size image_size = image->size();
+      gfx::Size thumb_size = bounds.size();
+
+      double zw = thumb_size.w / (double)image_size.w;
+      double zh = thumb_size.h / (double)image_size.h;
+      double zoom = MIN(1, MIN(zw, zh));
+
+      gfx::Rect cel_image_on_thumb(
+        (int)(thumb_size.w * 0.5 - image_size.w  * zoom * 0.5),
+        (int)(thumb_size.h * 0.5 - image_size.h * zoom * 0.5),
+        (int)(image_size.w  * zoom),
+        (int)(image_size.h * zoom)
+      );
+
+      const doc::Sprite* sprite = document->sprite();
+      base::UniquePtr<doc::Image> thumb_img(doc::Image::create(
+        image->pixelFormat(), thumb_size.w, thumb_size.h));
+
+      clear_image(thumb_img.get(), background);
+
+      base::UniquePtr<doc::Image> scale_img;
+      const doc::Image* source = image;
+
+      if (zoom != 1) {
+        scale_img.reset(doc::Image::create(
+          image->pixelFormat(), cel_image_on_thumb.w, cel_image_on_thumb.h));
+
+        doc::algorithm::resize_image(
+          image, scale_img,
+          resize_method,
+          sprite->palette(frame),
+          sprite->rgbMap(frame),
+          sprite->transparentColor());
+
+        source = scale_img.get();
+      }
+
+      render::composite_image(
+        thumb_img, source,
+        sprite->palette(frame),
+        cel_image_on_thumb.x,
+        cel_image_on_thumb.y,
+        opacity, BlendMode::NORMAL);
+
+      she::Surface* thumb_surf = she::instance()->createRgbaSurface(
+        thumb_img->width(), thumb_img->height());
+
+      convert_image_to_surface(thumb_img, sprite->palette(frame), thumb_surf,
+        0, 0, 0, 0, thumb_img->width(), thumb_img->height());
+
+      return thumb_surf;
+    }
+
+  } // thumb
+} // app
diff --git a/src/app/thumbnails.h b/src/app/thumbnails.h
new file mode 100644
index 000000000..fdd584800
--- /dev/null
+++ b/src/app/thumbnails.h
@@ -0,0 +1,30 @@
+// Aseprite
+// Copyright (C) 2016  Carlo Caputo
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+
+#ifndef APP_THUMBNAILS_H_INCLUDED
+#define APP_THUMBNAILS_H_INCLUDED
+#pragma once
+
+#include "gfx/rect.h"
+
+namespace doc {
+  class Cel;
+}
+
+namespace she {
+  class Surface;
+}
+
+namespace app {
+  namespace thumb {
+
+    she::Surface* get_cel_thumbnail(const doc::Cel* cel, const gfx::Rect& bounds);
+
+  } // thumb
+} // app
+
+#endif
\ No newline at end of file
diff --git a/src/app/ui/configure_timeline_popup.cpp b/src/app/ui/configure_timeline_popup.cpp
index f83636f04..099924f86 100644
--- a/src/app/ui/configure_timeline_popup.cpp
+++ b/src/app/ui/configure_timeline_popup.cpp
@@ -41,6 +41,8 @@ ConfigureTimelinePopup::ConfigureTimelinePopup()
   : PopupWindow("Timeline Settings", ClickBehavior::CloseOnClickInOtherWindow)
   , m_lockUpdates(false)
 {
+  setHotRegion(gfx::Region(manager()->bounds())); // for the color selector
+
   setAutoRemap(false);
   setBorder(gfx::Border(4*guiscale()));
 
@@ -56,6 +58,17 @@ ConfigureTimelinePopup::ConfigureTimelinePopup()
   m_box->currentLayer()->Click.connect(base::Bind<void>(&ConfigureTimelinePopup::onCurrentLayerChange, this));
   m_box->behind()->Click.connect(base::Bind<void>(&ConfigureTimelinePopup::onPositionChange, this));
   m_box->infront()->Click.connect(base::Bind<void>(&ConfigureTimelinePopup::onPositionChange, this));
+
+  m_box->thumbOpacity()->Change.connect(base::Bind<void>(&ConfigureTimelinePopup::onThumbOpacityChange, this));
+  m_box->thumbBackground()->Change.connect(&ConfigureTimelinePopup::onThumbBackgroundChange, this);
+  m_box->thumbEnabled()->Click.connect(base::Bind<void>(&ConfigureTimelinePopup::onThumbEnabledChange, this));
+  m_box->thumbOverlayEnabled()->Click.connect(base::Bind<void>(&ConfigureTimelinePopup::onThumbOverlayEnabledChange, this));
+  m_box->thumbOverlaySize()->Change.connect(base::Bind<void>(&ConfigureTimelinePopup::onThumbOverlaySizeChange, this));
+
+  m_box->thumbQuality()->addItem("Nearest-neighbor");
+  m_box->thumbQuality()->addItem("Bilinear");
+//  m_box->thumbQuality()->addItem("RotSprite");
+  m_box->thumbQuality()->Change.connect(&ConfigureTimelinePopup::onThumbQualityChange, this);
 }
 
 app::Document* ConfigureTimelinePopup::doc()
@@ -103,6 +116,24 @@ void ConfigureTimelinePopup::updateWidgetsFromCurrentSettings()
       m_box->infront()->setSelected(true);
       break;
   }
+
+  switch (docPref.thumbnails.quality()) {
+  case doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR:
+    m_box->thumbQuality()->setSelectedItemIndex(0);
+    break;
+  case doc::algorithm::RESIZE_METHOD_BILINEAR:
+    m_box->thumbQuality()->setSelectedItemIndex(1);
+    break;
+  default:
+    docPref.thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
+    m_box->thumbQuality()->setSelectedItemIndex(0);
+  }
+
+  m_box->thumbOpacity()->setValue(docPref.thumbnails.opacity());
+  m_box->thumbBackground()->setColor(docPref.thumbnails.background());
+  m_box->thumbEnabled()->setSelected(docPref.thumbnails.enabled());
+  m_box->thumbOverlayEnabled()->setSelected(docPref.thumbnails.overlayEnabled());
+  m_box->thumbOverlaySize()->setValue(docPref.thumbnails.overlaySize());
 }
 
 bool ConfigureTimelinePopup::onProcessMessage(ui::Message* msg)
@@ -112,7 +143,6 @@ bool ConfigureTimelinePopup::onProcessMessage(ui::Message* msg)
     case kOpenMessage: {
       updateWidgetsFromCurrentSettings();
       break;
-
     }
   }
   return PopupWindow::onProcessMessage(msg);
@@ -175,4 +205,45 @@ void ConfigureTimelinePopup::onPositionChange()
                                render::OnionskinPosition::INFRONT);
 }
 
+void ConfigureTimelinePopup::onThumbOpacityChange()
+{
+  docPref().thumbnails.opacity(m_box->thumbOpacity()->getValue());
+}
+
+void ConfigureTimelinePopup::onThumbQualityChange()
+{
+  switch (m_box->thumbQuality()->getSelectedItemIndex()) {
+  case 0:
+    docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
+    break;
+  case 1:
+    docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_BILINEAR);
+    break;
+  default:
+    docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
+    m_box->thumbQuality()->setSelectedItemIndex(0);
+  }
+}
+
+void ConfigureTimelinePopup::onThumbBackgroundChange(const app::Color& color)
+{
+  docPref().thumbnails.background(color);
+}
+
+void ConfigureTimelinePopup::onThumbEnabledChange()
+{
+  docPref().thumbnails.enabled(m_box->thumbEnabled()->isSelected());
+}
+
+void ConfigureTimelinePopup::onThumbOverlayEnabledChange()
+{
+  docPref().thumbnails.overlayEnabled(m_box->thumbOverlayEnabled()->isSelected());
+}
+
+void ConfigureTimelinePopup::onThumbOverlaySizeChange()
+{
+  docPref().thumbnails.overlaySize(m_box->thumbOverlaySize()->getValue());
+}
+
+
 } // namespace app
diff --git a/src/app/ui/configure_timeline_popup.h b/src/app/ui/configure_timeline_popup.h
index 456905179..a3f0fe05a 100644
--- a/src/app/ui/configure_timeline_popup.h
+++ b/src/app/ui/configure_timeline_popup.h
@@ -12,6 +12,7 @@
 #include "app/pref/preferences.h"
 #include "doc/anidir.h"
 #include "ui/popup_window.h"
+#include "base/connection.h"
 
 namespace ui {
   class Button;
@@ -41,6 +42,13 @@ namespace app {
     void onCurrentLayerChange();
     void onPositionChange();
 
+    void onThumbOpacityChange();
+    void onThumbQualityChange();
+    void onThumbBackgroundChange(const app::Color& color);
+    void onThumbEnabledChange();
+    void onThumbOverlayEnabledChange();
+    void onThumbOverlaySizeChange();
+
   private:
     void updateWidgetsFromCurrentSettings();
     app::Document* doc();
diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index a9ef00430..c5b9ae0ee 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -50,6 +50,12 @@
 #include "she/font.h"
 #include "ui/scroll_helper.h"
 #include "ui/ui.h"
+#include "base/unique_ptr.h"
+#include "she/surface.h"
+#include "she/system.h"
+#include "doc/conversion_she.h"
+#include "base/bind.h"
+#include "doc/algorithm/rotate.h"
 
 #include <cstdio>
 #include <vector>
@@ -134,6 +140,8 @@ Timeline::Timeline()
   , m_offset_count(0)
   , m_scroll(false)
   , m_fromTimeline(false)
+  , m_thumbnailsOverlayVisible(false)
+  , m_thumbnailsOverlayDirection((int)(FRMSIZE*1.5), (int)(FRMSIZE*0.5))
 {
   enableFlags(CTRL_RIGHT_CLICK);
 
@@ -164,6 +172,11 @@ Timeline::~Timeline()
   delete m_confPopup;
 }
 
+void Timeline::onThumbnailsPrefChange()
+{
+  invalidate();
+}
+
 void Timeline::updateUsingEditor(Editor* editor)
 {
   m_aniControls.updateUsingEditor(editor);
@@ -206,6 +219,10 @@ void Timeline::updateUsingEditor(Editor* editor)
   m_hot.part = PART_NOTHING;
   m_clk.part = PART_NOTHING;
 
+  m_thumbnailsPrefConn.disconnect();
+  m_thumbnailsPrefConn = docPref().thumbnails.AfterChange.connect(
+    base::Bind<void>(&Timeline::onThumbnailsPrefChange, this));
+
   setFocusStop(true);
   regenerateLayers();
   setViewScroll(viewScroll());
@@ -545,6 +562,7 @@ bool Timeline::onProcessMessage(Message* msg)
       }
 
       updateStatusBar(msg);
+      updateCelOverlayBounds(hit);
       return true;
     }
 
@@ -1036,6 +1054,7 @@ void Timeline::onPaint(ui::PaintEvent& ev)
     drawFrameTags(g);
     drawRangeOutline(g);
     drawClipboardRange(g);
+    drawCelOverlay(g);
 
 #if 0 // Use this code to debug the calculated m_dropRange by updateDropRange()
     {
@@ -1067,8 +1086,10 @@ void Timeline::onAfterCommandExecution(CommandExecutionEvent& ev)
 
 void Timeline::onRemoveDocument(doc::Document* document)
 {
-  if (document == m_document)
+  if (document == m_document) {
+    m_thumbnailsPrefConn.disconnect();
     detachDocument();
+  }
 }
 
 void Timeline::onGeneralUpdate(DocumentEvent& ev)
@@ -1518,6 +1539,131 @@ void Timeline::drawCel(ui::Graphics* g, LayerIndex layerIndex, frame_t frame, Ce
   // Draw decorators to link the activeCel with its links.
   if (data->activeIt != data->end)
     drawCelLinkDecorators(g, bounds, cel, frame, is_active, is_hover, data);
+
+  if (docPref().thumbnails.enabled() && image) {
+    gfx::Rect thumb_bounds = gfx::Rect(bounds).offset(1,1).inflate(-1,-1);
+
+    she::Surface* thumb_surf = thumb::get_cel_thumbnail(cel, thumb_bounds);
+
+    g->drawRgbaSurface(thumb_surf, thumb_bounds.x, thumb_bounds.y);
+
+    thumb_surf->dispose();
+  }
+}
+
+void Timeline::updateCelOverlayBounds(const Hit& hit)
+{
+  gfx::Rect inner, outer;
+
+  if (docPref().thumbnails.overlayEnabled() && hit.part == PART_CEL) {
+    m_thumbnailsOverlayHit = hit;
+
+    int max_size = FRMSIZE * docPref().thumbnails.overlaySize();
+    int width, height;
+    if (m_sprite->width() > m_sprite->height()) {
+      width  = max_size;
+      height = max_size * m_sprite->height() / m_sprite->width();
+    }
+    else {
+      width  = max_size * m_sprite->width() / m_sprite->height();
+      height = max_size;
+    }
+
+    gfx::Rect client_bounds = clientBounds();
+    gfx::Point center = client_bounds.center();
+
+    gfx::Rect bounds_cel = getPartBounds(m_thumbnailsOverlayHit);
+    inner = gfx::Rect(
+      bounds_cel.x + m_thumbnailsOverlayDirection.x,
+      bounds_cel.y + m_thumbnailsOverlayDirection.y,
+      width,
+      height
+    );
+
+    if (!client_bounds.contains(inner)) {
+      m_thumbnailsOverlayDirection = gfx::Point(
+        bounds_cel.x < center.x ? (int)(FRMSIZE*1.5) : -width -(int)(FRMSIZE*0.5),
+        bounds_cel.y < center.y ? (int)(FRMSIZE*0.5) : -height+(int)(FRMSIZE*0.5)
+      );
+      inner.setOrigin(gfx::Point(
+        bounds_cel.x + m_thumbnailsOverlayDirection.x,
+        bounds_cel.y + m_thumbnailsOverlayDirection.y
+      ));
+    }
+
+    outer = gfx::Rect(inner).enlarge(1);
+  }
+  else {
+    outer = gfx::Rect(0, 0, 0, 0);
+  }
+
+  if (outer != m_thumbnailsOverlayOuter) {
+    if (!m_thumbnailsOverlayOuter.isEmpty()) {
+      invalidateRect(gfx::Rect(m_thumbnailsOverlayOuter).offset(origin()));
+    }
+    if (!outer.isEmpty()) {
+      invalidateRect(gfx::Rect(outer).offset(origin()));
+    }
+    m_thumbnailsOverlayVisible = !outer.isEmpty();
+    m_thumbnailsOverlayOuter = outer;
+    m_thumbnailsOverlayInner = inner;
+  }
+}
+
+void Timeline::drawCelOverlay(ui::Graphics* g)
+{
+  if (!m_thumbnailsOverlayVisible) {
+    return;
+  }
+
+  Layer *layer = m_layers[m_thumbnailsOverlayHit.layer];
+  Cel *cel = layer->cel(m_thumbnailsOverlayHit.frame);
+  if (!cel) {
+    return;
+  }
+  Image* image = cel->image();
+  if (!image) {
+    return;
+  }
+
+  IntersectClip clip(g, m_thumbnailsOverlayOuter);
+  if (!clip)
+    return;
+
+  base::UniquePtr<Image> overlay_img(
+    Image::create(image->pixelFormat(),
+    m_thumbnailsOverlayInner.w,
+    m_thumbnailsOverlayInner.h));
+
+  double scale = (
+    m_sprite->width() > m_sprite->height() ?
+    m_thumbnailsOverlayInner.w / (double)m_sprite->width() :
+    m_thumbnailsOverlayInner.h / (double)m_sprite->height()
+  );
+
+  clear_image(overlay_img, 0);
+  algorithm::scale_image(overlay_img, image,
+                         (int)(cel->x() * scale),
+                         (int)(cel->y() * scale),
+                         (int)(image->width() * scale),
+                         (int)(image->height() * scale),
+                         0, 0, image->width(), image->height());
+
+  she::Surface* overlay_surf = she::instance()->createRgbaSurface(
+    overlay_img->width(),
+    overlay_img->height());
+
+  convert_image_to_surface(overlay_img, m_sprite->palette(m_frame), overlay_surf,
+    0, 0, 0, 0, overlay_img->width(), overlay_img->height());
+
+  gfx::Color background = color_utils::color_for_ui(docPref().thumbnails.background());
+  gfx::Color border = color_utils::blackandwhite_neg(background);
+  g->fillRect(background, m_thumbnailsOverlayInner);
+  g->drawRgbaSurface(overlay_surf,
+    m_thumbnailsOverlayInner.x, m_thumbnailsOverlayInner.y);
+  g->drawRect(border, m_thumbnailsOverlayOuter);
+
+  overlay_surf->dispose();
 }
 
 void Timeline::drawCelLinkDecorators(ui::Graphics* g, const gfx::Rect& bounds,
diff --git a/src/app/ui/timeline.h b/src/app/ui/timeline.h
index 2a72342e4..d32579324 100644
--- a/src/app/ui/timeline.h
+++ b/src/app/ui/timeline.h
@@ -23,6 +23,7 @@
 #include "ui/scroll_bar.h"
 #include "ui/timer.h"
 #include "ui/widget.h"
+#include "app/thumbnails.h"
 
 #include <vector>
 
@@ -37,6 +38,10 @@ namespace ui {
   class Graphics;
 }
 
+namespace she {
+  class Surface;
+}
+
 namespace app {
 
   namespace skin {
@@ -255,6 +260,10 @@ namespace app {
     DocumentPreferences& docPref() const;
     skin::SkinTheme* skinTheme() const;
 
+    void updateCelOverlayBounds(const Hit& hit);
+    void drawCelOverlay(ui::Graphics* g);
+    void onThumbnailsPrefChange();
+
     ui::ScrollBar m_hbar;
     ui::ScrollBar m_vbar;
     gfx::Rect m_viewportArea;
@@ -291,6 +300,13 @@ namespace app {
 
     AniControls m_aniControls;
 
+    bool m_thumbnailsOverlayVisible;
+    gfx::Rect m_thumbnailsOverlayInner;
+    gfx::Rect m_thumbnailsOverlayOuter;
+    Hit m_thumbnailsOverlayHit;
+    gfx::Point m_thumbnailsOverlayDirection;
+    base::Connection m_thumbnailsPrefConn;
+
     // Temporal data used to move the range.
     struct MoveRange {
       int activeRelativeLayer;

From 942300e3502f195195be4185018a6ba2ec29c765 Mon Sep 17 00:00:00 2001
From: David Capello <davidcapello@gmail.com>
Date: Mon, 25 Jul 2016 10:17:53 -0300
Subject: [PATCH 2/8] Minor changes and comments about the previous commit

---
 src/app/pref/preferences.h              |  2 +-
 src/app/thumbnails.cpp                  |  4 ---
 src/app/ui/configure_timeline_popup.cpp | 43 ++++++++++++++-----------
 src/app/ui/configure_timeline_popup.h   |  3 +-
 src/app/ui/timeline.cpp                 | 17 ++++++----
 src/app/ui/timeline.h                   |  6 +---
 6 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/app/pref/preferences.h b/src/app/pref/preferences.h
index 0c7a1aa57..2d95bc544 100644
--- a/src/app/pref/preferences.h
+++ b/src/app/pref/preferences.h
@@ -17,6 +17,7 @@
 #include "app/tools/ink_type.h"
 #include "app/tools/rotation_algorithm.h"
 #include "app/ui/color_bar.h"
+#include "doc/algorithm/resize_image.h"
 #include "doc/anidir.h"
 #include "doc/brush_pattern.h"
 #include "doc/documents_observer.h"
@@ -26,7 +27,6 @@
 #include "gfx/rect.h"
 #include "render/onionskin_position.h"
 #include "render/zoom.h"
-#include "doc/algorithm/resize_image.h"
 
 #include "pref.xml.h"
 
diff --git a/src/app/thumbnails.cpp b/src/app/thumbnails.cpp
index d1aef1b98..5f99b5662 100644
--- a/src/app/thumbnails.cpp
+++ b/src/app/thumbnails.cpp
@@ -9,11 +9,7 @@
 #include "app/document.h"
 #include "app/pref/preferences.h"
 #include "app/thumbnails.h"
-#include "base/bind.h"
-#include "base/connection.h"
-#include "base/shared_ptr.h"
 #include "doc/algorithm/resize_image.h"
-#include "doc/algorithm/rotate.h"
 #include "doc/cel.h"
 #include "doc/conversion_she.h"
 #include "doc/doc.h"
diff --git a/src/app/ui/configure_timeline_popup.cpp b/src/app/ui/configure_timeline_popup.cpp
index 099924f86..7cfeb5783 100644
--- a/src/app/ui/configure_timeline_popup.cpp
+++ b/src/app/ui/configure_timeline_popup.cpp
@@ -1,5 +1,5 @@
 // Aseprite
-// Copyright (C) 2001-2015  David Capello
+// Copyright (C) 2001-2016  David Capello
 //
 // This program is free software; you can redistribute it and/or modify
 // it under the terms of the GNU General Public License version 2 as
@@ -41,6 +41,9 @@ ConfigureTimelinePopup::ConfigureTimelinePopup()
   : PopupWindow("Timeline Settings", ClickBehavior::CloseOnClickInOtherWindow)
   , m_lockUpdates(false)
 {
+  // TODO we should add a new hot region to automatically close the
+  //      popup if the mouse is moved outside or find other kind of
+  //      dialog/window
   setHotRegion(gfx::Region(manager()->bounds())); // for the color selector
 
   setAutoRemap(false);
@@ -118,15 +121,16 @@ void ConfigureTimelinePopup::updateWidgetsFromCurrentSettings()
   }
 
   switch (docPref.thumbnails.quality()) {
-  case doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR:
-    m_box->thumbQuality()->setSelectedItemIndex(0);
-    break;
-  case doc::algorithm::RESIZE_METHOD_BILINEAR:
-    m_box->thumbQuality()->setSelectedItemIndex(1);
-    break;
-  default:
-    docPref.thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
-    m_box->thumbQuality()->setSelectedItemIndex(0);
+    case doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR:
+      m_box->thumbQuality()->setSelectedItemIndex(0);
+      break;
+    case doc::algorithm::RESIZE_METHOD_BILINEAR:
+      m_box->thumbQuality()->setSelectedItemIndex(1);
+      break;
+    default:
+      docPref.thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
+      m_box->thumbQuality()->setSelectedItemIndex(0);
+      break;
   }
 
   m_box->thumbOpacity()->setValue(docPref.thumbnails.opacity());
@@ -213,15 +217,16 @@ void ConfigureTimelinePopup::onThumbOpacityChange()
 void ConfigureTimelinePopup::onThumbQualityChange()
 {
   switch (m_box->thumbQuality()->getSelectedItemIndex()) {
-  case 0:
-    docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
-    break;
-  case 1:
-    docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_BILINEAR);
-    break;
-  default:
-    docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
-    m_box->thumbQuality()->setSelectedItemIndex(0);
+    case 0:
+      docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
+      break;
+    case 1:
+      docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_BILINEAR);
+      break;
+    default:
+      docPref().thumbnails.quality(doc::algorithm::RESIZE_METHOD_NEAREST_NEIGHBOR);
+      m_box->thumbQuality()->setSelectedItemIndex(0);
+      break;
   }
 }
 
diff --git a/src/app/ui/configure_timeline_popup.h b/src/app/ui/configure_timeline_popup.h
index a3f0fe05a..765211930 100644
--- a/src/app/ui/configure_timeline_popup.h
+++ b/src/app/ui/configure_timeline_popup.h
@@ -1,5 +1,5 @@
 // Aseprite
-// Copyright (C) 2001-2015  David Capello
+// Copyright (C) 2001-2016  David Capello
 //
 // This program is free software; you can redistribute it and/or modify
 // it under the terms of the GNU General Public License version 2 as
@@ -12,7 +12,6 @@
 #include "app/pref/preferences.h"
 #include "doc/anidir.h"
 #include "ui/popup_window.h"
-#include "base/connection.h"
 
 namespace ui {
   class Button;
diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index c5b9ae0ee..6dd4eb163 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -27,6 +27,7 @@
 #include "app/modules/editors.h"
 #include "app/modules/gfx.h"
 #include "app/modules/gui.h"
+#include "app/thumbnails.h"
 #include "app/transaction.h"
 #include "app/ui/app_menuitem.h"
 #include "app/ui/configure_timeline_popup.h"
@@ -39,23 +40,25 @@
 #include "app/ui/workspace.h"
 #include "app/ui_context.h"
 #include "app/util/clipboard.h"
+#include "base/bind.h"
 #include "base/convert_to.h"
 #include "base/memory.h"
 #include "base/scoped_value.h"
+#include "base/unique_ptr.h"
 #include "doc/doc.h"
 #include "doc/document_event.h"
 #include "doc/frame_tag.h"
 #include "gfx/point.h"
 #include "gfx/rect.h"
 #include "she/font.h"
+#include "she/surface.h"
 #include "ui/scroll_helper.h"
 #include "ui/ui.h"
-#include "base/unique_ptr.h"
-#include "she/surface.h"
-#include "she/system.h"
-#include "doc/conversion_she.h"
-#include "base/bind.h"
+
+// TODO why we need this? It should be done in app/thumbnails.cpp
 #include "doc/algorithm/rotate.h"
+#include "doc/conversion_she.h"
+#include "she/system.h"
 
 #include <cstdio>
 #include <vector>
@@ -1632,8 +1635,8 @@ void Timeline::drawCelOverlay(ui::Graphics* g)
 
   base::UniquePtr<Image> overlay_img(
     Image::create(image->pixelFormat(),
-    m_thumbnailsOverlayInner.w,
-    m_thumbnailsOverlayInner.h));
+                  m_thumbnailsOverlayInner.w,
+                  m_thumbnailsOverlayInner.h));
 
   double scale = (
     m_sprite->width() > m_sprite->height() ?
diff --git a/src/app/ui/timeline.h b/src/app/ui/timeline.h
index d32579324..b6880c640 100644
--- a/src/app/ui/timeline.h
+++ b/src/app/ui/timeline.h
@@ -23,7 +23,6 @@
 #include "ui/scroll_bar.h"
 #include "ui/timer.h"
 #include "ui/widget.h"
-#include "app/thumbnails.h"
 
 #include <vector>
 
@@ -38,10 +37,6 @@ namespace ui {
   class Graphics;
 }
 
-namespace she {
-  class Surface;
-}
-
 namespace app {
 
   namespace skin {
@@ -300,6 +295,7 @@ namespace app {
 
     AniControls m_aniControls;
 
+    // Data used for thumbnails.
     bool m_thumbnailsOverlayVisible;
     gfx::Rect m_thumbnailsOverlayInner;
     gfx::Rect m_thumbnailsOverlayOuter;

From 4c0e21226f04b8337d5e820d9d1ac7aaf27ef240 Mon Sep 17 00:00:00 2001
From: Carlo 'zED' Caputo <carlo.caputo@gmail.com>
Date: Tue, 26 Jul 2016 17:38:07 -0300
Subject: [PATCH 3/8] fixed crash on docPref disconnect at doc remove

---
 src/app/ui/timeline.cpp | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index 6dd4eb163..edab32649 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -206,6 +206,12 @@ void Timeline::updateUsingEditor(Editor* editor)
 
   site.document()->addObserver(this);
 
+  app::Document* app_document = static_cast<app::Document*>(site.document());
+  DocumentPreferences& docPref = Preferences::instance().document(app_document);
+
+  m_thumbnailsPrefConn = docPref.thumbnails.AfterChange.connect(
+    base::Bind<void>(&Timeline::onThumbnailsPrefChange, this));
+
   // If we are already in the same position as the "editor", we don't
   // need to update the at all timeline.
   if (m_document == site.document() &&
@@ -222,10 +228,6 @@ void Timeline::updateUsingEditor(Editor* editor)
   m_hot.part = PART_NOTHING;
   m_clk.part = PART_NOTHING;
 
-  m_thumbnailsPrefConn.disconnect();
-  m_thumbnailsPrefConn = docPref().thumbnails.AfterChange.connect(
-    base::Bind<void>(&Timeline::onThumbnailsPrefChange, this));
-
   setFocusStop(true);
   regenerateLayers();
   setViewScroll(viewScroll());
@@ -235,6 +237,7 @@ void Timeline::updateUsingEditor(Editor* editor)
 void Timeline::detachDocument()
 {
   if (m_document) {
+    m_thumbnailsPrefConn.disconnect();
     m_document->removeObserver(this);
     m_document = NULL;
   }
@@ -1090,7 +1093,6 @@ void Timeline::onAfterCommandExecution(CommandExecutionEvent& ev)
 void Timeline::onRemoveDocument(doc::Document* document)
 {
   if (document == m_document) {
-    m_thumbnailsPrefConn.disconnect();
     detachDocument();
   }
 }

From c126a5807c8cf1d3503d8db054e70247ff451827 Mon Sep 17 00:00:00 2001
From: Carlo 'zED' Caputo <carlo.caputo@gmail.com>
Date: Tue, 26 Jul 2016 17:45:38 -0300
Subject: [PATCH 4/8] timeline overlay using the thumbs scaler

---
 src/app/thumbnails.cpp  | 26 ++++++++++++++------------
 src/app/thumbnails.h    |  4 +++-
 src/app/ui/timeline.cpp | 31 ++++++++++++-------------------
 3 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/app/thumbnails.cpp b/src/app/thumbnails.cpp
index 5f99b5662..82d75fec1 100644
--- a/src/app/thumbnails.cpp
+++ b/src/app/thumbnails.cpp
@@ -23,7 +23,8 @@
 namespace app {
   namespace thumb {
 
-    she::Surface* get_cel_thumbnail(const doc::Cel* cel, const gfx::Rect& bounds)
+    she::Surface* get_cel_thumbnail(const doc::Cel* cel, gfx::Size thumb_size,
+      gfx::Rect cel_image_on_thumb)
     {
       app::Document* document = static_cast<app::Document*>(cel->sprite()->document());
       doc::frame_t frame = cel->frame();
@@ -36,18 +37,19 @@ namespace app {
       doc::algorithm::ResizeMethod resize_method = docPref.thumbnails.quality();
 
       gfx::Size image_size = image->size();
-      gfx::Size thumb_size = bounds.size();
 
-      double zw = thumb_size.w / (double)image_size.w;
-      double zh = thumb_size.h / (double)image_size.h;
-      double zoom = MIN(1, MIN(zw, zh));
+      if (cel_image_on_thumb.isEmpty()) {
+        double zw = thumb_size.w / (double)image_size.w;
+        double zh = thumb_size.h / (double)image_size.h;
+        double zoom = MIN(1, MIN(zw, zh));
 
-      gfx::Rect cel_image_on_thumb(
-        (int)(thumb_size.w * 0.5 - image_size.w  * zoom * 0.5),
-        (int)(thumb_size.h * 0.5 - image_size.h * zoom * 0.5),
-        (int)(image_size.w  * zoom),
-        (int)(image_size.h * zoom)
-      );
+        cel_image_on_thumb = gfx::Rect(
+          (int)(thumb_size.w * 0.5 - image_size.w  * zoom * 0.5),
+          (int)(thumb_size.h * 0.5 - image_size.h * zoom * 0.5),
+          (int)(image_size.w  * zoom),
+          (int)(image_size.h * zoom)
+        );
+      }
 
       const doc::Sprite* sprite = document->sprite();
       base::UniquePtr<doc::Image> thumb_img(doc::Image::create(
@@ -58,7 +60,7 @@ namespace app {
       base::UniquePtr<doc::Image> scale_img;
       const doc::Image* source = image;
 
-      if (zoom != 1) {
+      if (cel_image_on_thumb.w != image_size.w || cel_image_on_thumb.h != image_size.h) {
         scale_img.reset(doc::Image::create(
           image->pixelFormat(), cel_image_on_thumb.w, cel_image_on_thumb.h));
 
diff --git a/src/app/thumbnails.h b/src/app/thumbnails.h
index fdd584800..d1c8e4fa7 100644
--- a/src/app/thumbnails.h
+++ b/src/app/thumbnails.h
@@ -10,6 +10,7 @@
 #pragma once
 
 #include "gfx/rect.h"
+#include "gfx/size.h"
 
 namespace doc {
   class Cel;
@@ -22,7 +23,8 @@ namespace she {
 namespace app {
   namespace thumb {
 
-    she::Surface* get_cel_thumbnail(const doc::Cel* cel, const gfx::Rect& bounds);
+    she::Surface* get_cel_thumbnail(const doc::Cel* cel, gfx::Size thumb_size,
+      gfx::Rect cel_image_on_thumb = gfx::Rect());
 
   } // thumb
 } // app
diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index edab32649..98633aee9 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -1548,7 +1548,7 @@ void Timeline::drawCel(ui::Graphics* g, LayerIndex layerIndex, frame_t frame, Ce
   if (docPref().thumbnails.enabled() && image) {
     gfx::Rect thumb_bounds = gfx::Rect(bounds).offset(1,1).inflate(-1,-1);
 
-    she::Surface* thumb_surf = thumb::get_cel_thumbnail(cel, thumb_bounds);
+    she::Surface* thumb_surf = thumb::get_cel_thumbnail(cel, thumb_bounds.size());
 
     g->drawRgbaSurface(thumb_surf, thumb_bounds.x, thumb_bounds.y);
 
@@ -1635,35 +1635,28 @@ void Timeline::drawCelOverlay(ui::Graphics* g)
   if (!clip)
     return;
 
-  base::UniquePtr<Image> overlay_img(
-    Image::create(image->pixelFormat(),
-                  m_thumbnailsOverlayInner.w,
-                  m_thumbnailsOverlayInner.h));
-
   double scale = (
     m_sprite->width() > m_sprite->height() ?
     m_thumbnailsOverlayInner.w / (double)m_sprite->width() :
     m_thumbnailsOverlayInner.h / (double)m_sprite->height()
   );
 
-  clear_image(overlay_img, 0);
-  algorithm::scale_image(overlay_img, image,
-                         (int)(cel->x() * scale),
-                         (int)(cel->y() * scale),
-                         (int)(image->width() * scale),
-                         (int)(image->height() * scale),
-                         0, 0, image->width(), image->height());
+  gfx::Size overlay_size(
+    m_thumbnailsOverlayInner.w,
+    m_thumbnailsOverlayInner.h
+  );
 
-  she::Surface* overlay_surf = she::instance()->createRgbaSurface(
-    overlay_img->width(),
-    overlay_img->height());
+  gfx::Rect cel_image_on_overlay(
+    (int)(cel->x() * scale),
+    (int)(cel->y() * scale),
+    (int)(image->width() * scale),
+    (int)(image->height() * scale)
+  );
 
-  convert_image_to_surface(overlay_img, m_sprite->palette(m_frame), overlay_surf,
-    0, 0, 0, 0, overlay_img->width(), overlay_img->height());
+  she::Surface* overlay_surf = thumb::get_cel_thumbnail(cel, overlay_size, cel_image_on_overlay);
 
   gfx::Color background = color_utils::color_for_ui(docPref().thumbnails.background());
   gfx::Color border = color_utils::blackandwhite_neg(background);
-  g->fillRect(background, m_thumbnailsOverlayInner);
   g->drawRgbaSurface(overlay_surf,
     m_thumbnailsOverlayInner.x, m_thumbnailsOverlayInner.y);
   g->drawRect(border, m_thumbnailsOverlayOuter);

From 8a191857b2df27ddaf682f3dedefedbab42cc199 Mon Sep 17 00:00:00 2001
From: David Capello <davidcapello@gmail.com>
Date: Wed, 3 Aug 2016 20:37:24 -0300
Subject: [PATCH 5/8] Remove #includes that aren't necessary in timeline.cpp
 anymore

---
 src/app/ui/timeline.cpp | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index 98633aee9..e2ee31d1f 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -55,11 +55,6 @@
 #include "ui/scroll_helper.h"
 #include "ui/ui.h"
 
-// TODO why we need this? It should be done in app/thumbnails.cpp
-#include "doc/algorithm/rotate.h"
-#include "doc/conversion_she.h"
-#include "she/system.h"
-
 #include <cstdio>
 #include <vector>
 

From 5c6fa25e378baf704e4054e81e48e507bd1704e9 Mon Sep 17 00:00:00 2001
From: David Capello <davidcapello@gmail.com>
Date: Wed, 3 Aug 2016 22:13:04 -0300
Subject: [PATCH 6/8] Move Timeline dimensions to member functions

Replace the old HDRSIZE, FRMSIZE, LAYSIZE, OUTLINE_WIDTH macros with
Timeline member functions.
---
 src/app/ui/timeline.cpp | 170 +++++++++++++++++++++-------------------
 src/app/ui/timeline.h   |   7 ++
 2 files changed, 98 insertions(+), 79 deletions(-)

diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index e2ee31d1f..4c41f912a 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -58,28 +58,6 @@
 #include <cstdio>
 #include <vector>
 
-// Size of the thumbnail in the screen (width x height), the really
-// size of the thumbnail bitmap is specified in the
-// 'generate_thumbnail' routine.
-#define THUMBSIZE       (12*guiscale())
-
-// Height of the headers.
-#define HDRSIZE         THUMBSIZE
-
-// Width of the frames.
-#define FRMSIZE         THUMBSIZE
-
-// Height of the layers.
-#define LAYSIZE         THUMBSIZE
-
-// Space between icons and other information in the layer.
-#define ICONSEP         (2*guiscale())
-
-#define OUTLINE_WIDTH   (skinTheme()->dimensions.timelineOutlineWidth())
-
-// Space between the icon-bitmap and the edge of the surrounding button.
-#define ICONBORDER      0
-
 namespace app {
 
 using namespace app::skin;
@@ -139,7 +117,8 @@ Timeline::Timeline()
   , m_scroll(false)
   , m_fromTimeline(false)
   , m_thumbnailsOverlayVisible(false)
-  , m_thumbnailsOverlayDirection((int)(FRMSIZE*1.5), (int)(FRMSIZE*0.5))
+  , m_thumbnailsOverlayDirection(int(frameBoxWidth()*1.5),
+                                 int(frameBoxWidth()*0.5))
 {
   enableFlags(CTRL_RIGHT_CLICK);
 
@@ -892,9 +871,9 @@ bool Timeline::onProcessMessage(Message* msg)
         dx += static_cast<MouseMessage*>(msg)->wheelDelta().x;
 
         if (msg->ctrlPressed())
-          dx = dz * FRMSIZE;
+          dx = dz * frameBoxWidth();
         else
-          dy = dz * LAYSIZE;
+          dy = dz * layerBoxHeight();
 
         if (msg->shiftPressed()) {
           dx *= 3;
@@ -1254,11 +1233,11 @@ void Timeline::setCursor(ui::Message* msg, const Hit& hit)
 
 void Timeline::getDrawableLayers(ui::Graphics* g, LayerIndex* first_layer, LayerIndex* last_layer)
 {
-  int hpx = (clientBounds().h - HDRSIZE - topHeight());
-  LayerIndex i = lastLayer() - LayerIndex((viewScroll().y+hpx) / LAYSIZE);
+  int hpx = (clientBounds().h - headerBoxHeight() - topHeight());
+  LayerIndex i = lastLayer() - LayerIndex((viewScroll().y+hpx) / layerBoxHeight());
   i = MID(firstLayer(), i, lastLayer());
 
-  LayerIndex j = i + LayerIndex(hpx / LAYSIZE + 1);
+  LayerIndex j = i + LayerIndex(hpx / layerBoxHeight() + 1);
   if (!m_layers.empty())
     j = MID(firstLayer(), j, lastLayer());
   else
@@ -1272,8 +1251,10 @@ void Timeline::getDrawableFrames(ui::Graphics* g, frame_t* first_frame, frame_t*
 {
   int availW = (clientBounds().w - m_separator_x);
 
-  *first_frame = frame_t(viewScroll().x / FRMSIZE);
-  *last_frame = *first_frame + frame_t(availW / FRMSIZE) + ((availW % FRMSIZE) > 0 ? 1: 0);
+  *first_frame = frame_t(viewScroll().x / frameBoxWidth());
+  *last_frame = *first_frame
+    + frame_t(availW / frameBoxWidth())
+    + ((availW % frameBoxWidth()) > 0 ? 1: 0);
 }
 
 void Timeline::drawPart(ui::Graphics* g, const gfx::Rect& bounds,
@@ -1558,7 +1539,7 @@ void Timeline::updateCelOverlayBounds(const Hit& hit)
   if (docPref().thumbnails.overlayEnabled() && hit.part == PART_CEL) {
     m_thumbnailsOverlayHit = hit;
 
-    int max_size = FRMSIZE * docPref().thumbnails.overlaySize();
+    int max_size = frameBoxWidth() * docPref().thumbnails.overlaySize();
     int width, height;
     if (m_sprite->width() > m_sprite->height()) {
       width  = max_size;
@@ -1582,8 +1563,8 @@ void Timeline::updateCelOverlayBounds(const Hit& hit)
 
     if (!client_bounds.contains(inner)) {
       m_thumbnailsOverlayDirection = gfx::Point(
-        bounds_cel.x < center.x ? (int)(FRMSIZE*1.5) : -width -(int)(FRMSIZE*0.5),
-        bounds_cel.y < center.y ? (int)(FRMSIZE*0.5) : -height+(int)(FRMSIZE*0.5)
+        bounds_cel.x < center.x ? (int)(frameBoxWidth()*1.5) : -width -(int)(frameBoxWidth()*0.5),
+        bounds_cel.y < center.y ? (int)(frameBoxWidth()*0.5) : -height+(int)(frameBoxWidth()*0.5)
       );
       inner.setOrigin(gfx::Point(
         bounds_cel.x + m_thumbnailsOverlayDirection.x,
@@ -1755,7 +1736,7 @@ void Timeline::drawRangeOutline(ui::Graphics* g)
     case Range::kFrames: clipBounds = getFrameHeadersBounds(); break;
     case Range::kLayers: clipBounds = getLayerHeadersBounds(); break;
   }
-  IntersectClip clip(g, clipBounds.enlarge(OUTLINE_WIDTH));
+  IntersectClip clip(g, clipBounds.enlarge(outlineWidth()));
   if (!clip)
     return;
 
@@ -1772,7 +1753,7 @@ void Timeline::drawRangeOutline(ui::Graphics* g)
   switch (drop.type()) {
 
     case Range::kCels: {
-      dropBounds = dropBounds.enlarge(OUTLINE_WIDTH);
+      dropBounds = dropBounds.enlarge(outlineWidth());
       styles.timelineRangeOutline()->paint(g, dropBounds, NULL, Style::active());
       break;
     }
@@ -1851,7 +1832,7 @@ gfx::Rect Timeline::getLayerHeadersBounds() const
 {
   gfx::Rect rc = clientBounds();
   rc.w = m_separator_x;
-  int h = topHeight() + HDRSIZE;
+  int h = topHeight() + headerBoxHeight();
   rc.y += h;
   rc.h -= h;
   return rc;
@@ -1863,7 +1844,7 @@ gfx::Rect Timeline::getFrameHeadersBounds() const
   rc.x += m_separator_x;
   rc.y += topHeight();
   rc.w -= m_separator_x;
-  rc.h = HDRSIZE;
+  rc.h = headerBoxHeight();
   return rc;
 }
 
@@ -1891,8 +1872,8 @@ gfx::Rect Timeline::getCelsBounds() const
   gfx::Rect rc = clientBounds();
   rc.x += m_separator_x;
   rc.w -= m_separator_x;
-  rc.y += HDRSIZE + topHeight();
-  rc.h -= HDRSIZE + topHeight();
+  rc.y += headerBoxHeight() + topHeight();
+  rc.h -= headerBoxHeight() + topHeight();
   return rc;
 }
 
@@ -1914,29 +1895,34 @@ gfx::Rect Timeline::getPartBounds(const Hit& hit) const
         m_separator_x + m_separator_w, bounds.h - y);
 
     case PART_HEADER_EYE:
-      return gfx::Rect(bounds.x + FRMSIZE*0, bounds.y + y, FRMSIZE, HDRSIZE);
+      return gfx::Rect(bounds.x + frameBoxWidth()*0, bounds.y + y,
+                       frameBoxWidth(), headerBoxHeight());
 
     case PART_HEADER_PADLOCK:
-      return gfx::Rect(bounds.x + FRMSIZE*1, bounds.y + y, FRMSIZE, HDRSIZE);
+      return gfx::Rect(bounds.x + frameBoxWidth()*1, bounds.y + y,
+                       frameBoxWidth(), headerBoxHeight());
 
     case PART_HEADER_CONTINUOUS:
-      return gfx::Rect(bounds.x + FRMSIZE*2, bounds.y + y, FRMSIZE, HDRSIZE);
+      return gfx::Rect(bounds.x + frameBoxWidth()*2, bounds.y + y,
+                       frameBoxWidth(), headerBoxHeight());
 
     case PART_HEADER_GEAR:
-      return gfx::Rect(bounds.x + FRMSIZE*3, bounds.y + y, FRMSIZE, HDRSIZE);
+      return gfx::Rect(bounds.x + frameBoxWidth()*3, bounds.y + y,
+                       frameBoxWidth(), headerBoxHeight());
 
     case PART_HEADER_ONIONSKIN:
-      return gfx::Rect(bounds.x + FRMSIZE*4, bounds.y + y, FRMSIZE, HDRSIZE);
+      return gfx::Rect(bounds.x + frameBoxWidth()*4, bounds.y + y,
+                       frameBoxWidth(), headerBoxHeight());
 
     case PART_HEADER_LAYER:
-      return gfx::Rect(bounds.x + FRMSIZE*5, bounds.y + y,
-        m_separator_x - FRMSIZE*5, HDRSIZE);
+      return gfx::Rect(bounds.x + frameBoxWidth()*5, bounds.y + y,
+                       m_separator_x - frameBoxWidth()*5, headerBoxHeight());
 
     case PART_HEADER_FRAME:
       return gfx::Rect(
         bounds.x + m_separator_x + m_separator_w - 1
-        + FRMSIZE*MAX(firstFrame(), hit.frame) - viewScroll().x,
-        bounds.y + y, FRMSIZE, HDRSIZE);
+        + frameBoxWidth()*MAX(firstFrame(), hit.frame) - viewScroll().x,
+        bounds.y + y, frameBoxWidth(), headerBoxHeight());
 
     case PART_HEADER_FRAME_TAGS:
       return gfx::Rect(
@@ -1947,56 +1933,56 @@ gfx::Rect Timeline::getPartBounds(const Hit& hit) const
     case PART_LAYER:
       if (validLayer(hit.layer)) {
         return gfx::Rect(bounds.x,
-          bounds.y + y + HDRSIZE + LAYSIZE*(lastLayer()-hit.layer) - viewScroll().y,
-          m_separator_x, LAYSIZE);
+          bounds.y + y + headerBoxHeight() + layerBoxHeight()*(lastLayer()-hit.layer) - viewScroll().y,
+          m_separator_x, layerBoxHeight());
       }
       break;
 
     case PART_LAYER_EYE_ICON:
       if (validLayer(hit.layer)) {
         return gfx::Rect(bounds.x,
-          bounds.y + y + HDRSIZE + LAYSIZE*(lastLayer()-hit.layer) - viewScroll().y,
-          FRMSIZE, LAYSIZE);
+          bounds.y + y + headerBoxHeight() + layerBoxHeight()*(lastLayer()-hit.layer) - viewScroll().y,
+          frameBoxWidth(), layerBoxHeight());
       }
       break;
 
     case PART_LAYER_PADLOCK_ICON:
       if (validLayer(hit.layer)) {
-        return gfx::Rect(bounds.x + FRMSIZE,
-          bounds.y + y + HDRSIZE + LAYSIZE*(lastLayer()-hit.layer) - viewScroll().y,
-          FRMSIZE, LAYSIZE);
+        return gfx::Rect(bounds.x + frameBoxWidth(),
+          bounds.y + y + headerBoxHeight() + layerBoxHeight()*(lastLayer()-hit.layer) - viewScroll().y,
+          frameBoxWidth(), layerBoxHeight());
       }
       break;
 
     case PART_LAYER_CONTINUOUS_ICON:
       if (validLayer(hit.layer)) {
-        return gfx::Rect(bounds.x + 2*FRMSIZE,
-          bounds.y + y + HDRSIZE + LAYSIZE*(lastLayer()-hit.layer) - viewScroll().y,
-          FRMSIZE, LAYSIZE);
+        return gfx::Rect(bounds.x + 2*frameBoxWidth(),
+          bounds.y + y + headerBoxHeight() + layerBoxHeight()*(lastLayer()-hit.layer) - viewScroll().y,
+          frameBoxWidth(), layerBoxHeight());
       }
       break;
 
     case PART_LAYER_TEXT:
       if (validLayer(hit.layer)) {
-        int x = FRMSIZE*3;
+        int x = frameBoxWidth()*3;
         return gfx::Rect(bounds.x + x,
-          bounds.y + y + HDRSIZE + LAYSIZE*(lastLayer()-hit.layer) - viewScroll().y,
-          m_separator_x - x, LAYSIZE);
+          bounds.y + y + headerBoxHeight() + layerBoxHeight()*(lastLayer()-hit.layer) - viewScroll().y,
+          m_separator_x - x, layerBoxHeight());
       }
       break;
 
     case PART_CEL:
       if (validLayer(hit.layer) && hit.frame >= frame_t(0)) {
         return gfx::Rect(
-          bounds.x + m_separator_x + m_separator_w - 1 + FRMSIZE*hit.frame - viewScroll().x,
-          bounds.y + y + HDRSIZE + LAYSIZE*(lastLayer()-hit.layer) - viewScroll().y,
-          FRMSIZE, LAYSIZE);
+          bounds.x + m_separator_x + m_separator_w - 1 + frameBoxWidth()*hit.frame - viewScroll().x,
+          bounds.y + y + headerBoxHeight() + layerBoxHeight()*(lastLayer()-hit.layer) - viewScroll().y,
+          frameBoxWidth(), layerBoxHeight());
       }
       break;
 
     case PART_RANGE_OUTLINE: {
       gfx::Rect rc = getRangeBounds(m_range);
-      int s = OUTLINE_WIDTH;
+      int s = outlineWidth();
       rc.enlarge(s);
       if (rc.x < bounds.x) rc.offset(s, 0).inflate(-s, 0);
       if (rc.y < bounds.y) rc.offset(0, s).inflate(0, -s);
@@ -2109,13 +2095,13 @@ Timeline::Hit Timeline::hitTest(ui::Message* msg, const gfx::Point& mousePos)
     hit.layer = lastLayer() - LayerIndex(
       (mousePos.y
         - top
-        - HDRSIZE
-        + scroll.y) / LAYSIZE);
+        - headerBoxHeight()
+        + scroll.y) / layerBoxHeight());
 
     hit.frame = frame_t((mousePos.x
         - m_separator_x
         - m_separator_w
-        + scroll.x) / FRMSIZE);
+        + scroll.x) / frameBoxWidth());
 
     if (hasCapture()) {
       hit.layer = MID(firstLayer(), hit.layer, lastLayer());
@@ -2154,7 +2140,7 @@ Timeline::Hit Timeline::hitTest(ui::Message* msg, const gfx::Point& mousePos)
       }
     }
     // Is the mouse on the headers?
-    else if (mousePos.y >= top && mousePos.y < top+HDRSIZE) {
+    else if (mousePos.y >= top && mousePos.y < top+headerBoxHeight()) {
       if (mousePos.x < m_separator_x) {
         if (getPartBounds(Hit(PART_HEADER_EYE)).contains(mousePos))
           hit.part = PART_HEADER_EYE;
@@ -2206,7 +2192,7 @@ Timeline::Hit Timeline::hitTest(ui::Message* msg, const gfx::Point& mousePos)
              mouseMsg &&
              mouseMsg->right()) ||
             // Drag with left-click only if we are inside the range edges
-            !gfx::Rect(outline).shrink(2*OUTLINE_WIDTH).contains(mousePos)) {
+            !gfx::Rect(outline).shrink(2*outlineWidth()).contains(mousePos)) {
           hit.part = PART_RANGE_OUTLINE;
         }
       }
@@ -2232,13 +2218,13 @@ Timeline::Hit Timeline::hitTestCel(const gfx::Point& mousePos)
   hit.layer = lastLayer() - LayerIndex(
     (mousePos.y
      - top
-     - HDRSIZE
-     + scroll.y) / LAYSIZE);
+     - headerBoxHeight()
+     + scroll.y) / layerBoxHeight());
 
   hit.frame = frame_t((mousePos.x
                        - m_separator_x
                        - m_separator_w
-                       + scroll.x) / FRMSIZE);
+                       + scroll.x) / frameBoxWidth());
 
   hit.layer = MID(firstLayer(), hit.layer, lastLayer());
   hit.frame = MAX(firstFrame(), hit.frame);
@@ -2409,13 +2395,13 @@ void Timeline::showCel(LayerIndex layer, frame_t frame)
 
   // Add the horizontal bar space to the viewport area if the viewport
   // is not big enough to show one cel.
-  if (m_hbar.isVisible() && viewport.h < LAYSIZE)
+  if (m_hbar.isVisible() && viewport.h < layerBoxHeight())
     viewport.h += m_vbar.getBarWidth();
 
   gfx::Rect celBounds(
-    viewport.x + FRMSIZE*frame - scroll.x,
-    viewport.y + LAYSIZE*(lastLayer() - layer) - scroll.y,
-    FRMSIZE, LAYSIZE);
+    viewport.x + frameBoxWidth()*frame - scroll.x,
+    viewport.y + layerBoxHeight()*(lastLayer() - layer) - scroll.y,
+    frameBoxWidth(), layerBoxHeight());
 
   // Here we use <= instead of < to avoid jumping between this
   // condition and the "else if" one when we are playing the
@@ -2454,8 +2440,8 @@ gfx::Size Timeline::getScrollableSize() const
 {
   if (m_sprite) {
     return gfx::Size(
-      m_sprite->totalFrames() * FRMSIZE + bounds().w/2,
-      m_layers.size() * LAYSIZE + bounds().h/2);
+      m_sprite->totalFrames() * frameBoxWidth() + bounds().w/2,
+      m_layers.size() * layerBoxHeight() + bounds().h/2);
   }
   else
     return gfx::Size(0, 0);
@@ -2729,6 +2715,32 @@ skin::SkinTheme* Timeline::skinTheme() const
   return static_cast<SkinTheme*>(theme());
 }
 
+gfx::Size Timeline::celBoxSize() const
+{
+  int s = int(12*guiscale());
+  return gfx::Size(s, s);
+}
+
+int Timeline::headerBoxHeight() const
+{
+  return int(12*guiscale());
+}
+
+int Timeline::layerBoxHeight() const
+{
+  return int(12*guiscale());
+}
+
+int Timeline::frameBoxWidth() const
+{
+  return int(12*guiscale());
+}
+
+int Timeline::outlineWidth() const
+{
+  return skinTheme()->dimensions.timelineOutlineWidth();
+}
+
 int Timeline::topHeight() const
 {
   int h = 0;
diff --git a/src/app/ui/timeline.h b/src/app/ui/timeline.h
index b6880c640..22456debc 100644
--- a/src/app/ui/timeline.h
+++ b/src/app/ui/timeline.h
@@ -253,7 +253,14 @@ namespace app {
     int topHeight() const;
 
     DocumentPreferences& docPref() const;
+
+    // Theme/dimensions
     skin::SkinTheme* skinTheme() const;
+    gfx::Size celBoxSize() const;
+    int headerBoxHeight() const;
+    int layerBoxHeight() const;
+    int frameBoxWidth() const;
+    int outlineWidth() const;
 
     void updateCelOverlayBounds(const Hit& hit);
     void drawCelOverlay(ui::Graphics* g);

From 128688e55eafe61992bfe7e30c93e46e98cc2e91 Mon Sep 17 00:00:00 2001
From: David Capello <davidcapello@gmail.com>
Date: Wed, 3 Aug 2016 22:14:33 -0300
Subject: [PATCH 7/8] Add a zoom factor to Timeline widget

At this moment the zoom factor can be changed only using
kTouchMagnifyMessage messages (e.g. using a Mac touchpad).
---
 src/app/ui/timeline.cpp | 7 +++++++
 src/app/ui/timeline.h   | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index 4c41f912a..6d1411531 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -104,6 +104,7 @@ Timeline::Timeline()
   : Widget(kGenericWidget)
   , m_hbar(HORIZONTAL, this)
   , m_vbar(VERTICAL, this)
+  , m_zoom(1.0)
   , m_context(UIContext::instance())
   , m_editor(NULL)
   , m_document(NULL)
@@ -890,6 +891,12 @@ bool Timeline::onProcessMessage(Message* msg)
         return true;
       }
       break;
+
+    case kTouchMagnifyMessage:
+      m_zoom = m_zoom + m_zoom * static_cast<ui::TouchMessage*>(msg)->magnification();
+      m_zoom = MID(1.0, m_zoom, 10.0);
+      invalidate();
+      break;
   }
 
   return Widget::onProcessMessage(msg);
diff --git a/src/app/ui/timeline.h b/src/app/ui/timeline.h
index 22456debc..1716332d5 100644
--- a/src/app/ui/timeline.h
+++ b/src/app/ui/timeline.h
@@ -269,6 +269,7 @@ namespace app {
     ui::ScrollBar m_hbar;
     ui::ScrollBar m_vbar;
     gfx::Rect m_viewportArea;
+    double m_zoom;
     Context* m_context;
     Editor* m_editor;
     Document* m_document;

From 1d51ceec2006309089b3f25217b1eebd68eaac83 Mon Sep 17 00:00:00 2001
From: David Capello <davidcapello@gmail.com>
Date: Wed, 3 Aug 2016 22:18:17 -0300
Subject: [PATCH 8/8] Modify Timeline dimensions with zoom factor

---
 src/app/ui/timeline.cpp | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/ui/timeline.cpp b/src/app/ui/timeline.cpp
index 6d1411531..c201aa6c4 100644
--- a/src/app/ui/timeline.cpp
+++ b/src/app/ui/timeline.cpp
@@ -2724,23 +2724,23 @@ skin::SkinTheme* Timeline::skinTheme() const
 
 gfx::Size Timeline::celBoxSize() const
 {
-  int s = int(12*guiscale());
+  int s = int(m_zoom*12*guiscale());
   return gfx::Size(s, s);
 }
 
 int Timeline::headerBoxHeight() const
 {
-  return int(12*guiscale());
+  return int(m_zoom*12*guiscale());
 }
 
 int Timeline::layerBoxHeight() const
 {
-  return int(12*guiscale());
+  return int(m_zoom*12*guiscale());
 }
 
 int Timeline::frameBoxWidth() const
 {
-  return int(12*guiscale());
+  return int(m_zoom*12*guiscale());
 }
 
 int Timeline::outlineWidth() const