Improve visual feedback of selections

- The handles can now take 4 kinds of colors:
   1) Unselected.
   2) Handles influenced by a selected keyframe take the selection-color.
   3) Handles that are about to be moved (the mouse hovers over it) take
      the hover color.
   4) Handles that are about to be indirectly moved (Handles that are influenced by the hover handles)
      take the activate color

- Apply some colors of the Theme to the curve-editor.

- Fixed a drag handle bug. (The bounding box for the handle was wrong)

Change-Id: Ib474c714aae8bf88a5fb916cbef62deb29bc483e
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

13 files changed, 227 insertions, 150 deletions

diff --git a/src/plugins/qmldesigner/components/curveeditor/curveeditorstyle.h b/src/plugins/qmldesigner/components/curveeditor/curveeditorstyle.h
index 43e10bcd4c..6dc4394647 100644
--- a/src/plugins/qmldesigner/components/curveeditor/curveeditorstyle.h
+++ b/src/plugins/qmldesigner/components/curveeditor/curveeditorstyle.h
@@ -53,6 +53,8 @@ struct HandleItemStyleOption
     double lineWidth = 1.0;
     QColor color = QColor(200, 0, 0);
     QColor selectionColor = QColor(200, 200, 200);
+    QColor activeColor = QColor(0, 200, 0);
+    QColor hoverColor = QColor(200, 0, 200);
 };
 
 struct KeyframeItemStyleOption
@@ -90,8 +92,9 @@ struct Shortcuts
 
     Shortcut insertKeyframe = Shortcut(Qt::MiddleButton, Qt::NoModifier);
 
-    Shortcut deleteKeyframe = Utils::HostOsInfo::isMacHost() ?
-            Shortcut(Qt::NoModifier, Qt::Key_Backspace) : Shortcut(Qt::NoModifier, Qt::Key_Delete);
+    Shortcut deleteKeyframe = Utils::HostOsInfo::isMacHost()
+                                  ? Shortcut(Qt::NoModifier, Qt::Key_Backspace)
+                                  : Shortcut(Qt::NoModifier, Qt::Key_Delete);
 };
 
 struct CurveEditorStyle
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.cpp b/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.cpp
index f2fe2eda4e..4c681a5024 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.cpp
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.cpp
@@ -39,46 +39,32 @@
 namespace DesignTools {
 
 CurveItem::CurveItem(QGraphicsItem *parent)
-    : QGraphicsObject(parent)
+    : CurveEditorItem(parent)
     , m_id(0)
     , m_style()
     , m_type(ValueType::Undefined)
     , m_component(PropertyTreeItem::Component::Generic)
     , m_transform()
     , m_keyframes()
-    , m_locked(false)
-    , m_pinned(false)
-    , m_underMouse(false)
     , m_itemDirty(false)
 {}
 
 CurveItem::CurveItem(unsigned int id, const AnimationCurve &curve, QGraphicsItem *parent)
-    : QGraphicsObject(parent)
+    : CurveEditorItem(parent)
     , m_id(id)
     , m_style()
     , m_type(ValueType::Undefined)
     , m_component(PropertyTreeItem::Component::Generic)
     , m_transform()
     , m_keyframes()
-    , m_locked(false)
-    , m_pinned(false)
-    , m_underMouse(false)
     , m_itemDirty(false)
 {
-    setAcceptHoverEvents(true);
-
     setFlag(QGraphicsItem::ItemIsMovable, false);
-
     setCurve(curve);
 }
 
 CurveItem::~CurveItem() {}
 
-bool CurveItem::isUnderMouse() const
-{
-    return m_underMouse;
-}
-
 int CurveItem::type() const
 {
     return Type;
@@ -132,9 +118,9 @@ void CurveItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidg
             if (segment.interpolation() == Keyframe::Interpolation::Easing) {
                 pen.setColor(m_style.easingCurveColor);
             } else {
-                if (m_locked)
+                if (locked())
                     pen.setColor(Qt::black);
-                else if (m_underMouse)
+                else if (isUnderMouse())
                     pen.setColor(Qt::red);
                 else if (hasSelection())
                     pen.setColor(m_style.selectionColor);
@@ -148,19 +134,17 @@ void CurveItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidg
     }
 }
 
-bool CurveItem::isDirty() const
+void CurveItem::lockedCallback()
 {
-    return m_itemDirty;
-}
+    for (auto frame : m_keyframes)
+        frame->setLocked(locked());
 
-bool CurveItem::locked() const
-{
-    return m_locked;
+    setHandleVisibility(!locked());
 }
 
-bool CurveItem::pinned() const
+bool CurveItem::isDirty() const
 {
-    return m_pinned;
+    return m_itemDirty;
 }
 
 bool CurveItem::hasSelection() const
@@ -283,20 +267,6 @@ void CurveItem::restore()
     }
 }
 
-void CurveItem::setLocked(bool locked)
-{
-    m_locked = locked;
-    for (auto frame : m_keyframes)
-        frame->setLocked(locked);
-
-    setHandleVisibility(!m_locked);
-}
-
-void CurveItem::setPinned(bool pinned)
-{
-    m_pinned = pinned;
-}
-
 void CurveItem::setDirty(bool dirty)
 {
     m_itemDirty = dirty;
@@ -324,7 +294,7 @@ void CurveItem::setCurve(const AnimationCurve &curve)
 
     for (auto frame : curve.keyframes()) {
         auto *item = new KeyframeItem(frame, this);
-        item->setLocked(m_locked);
+        item->setLocked(locked());
         item->setComponentTransform(m_transform);
         m_keyframes.push_back(item);
         QObject::connect(item, &KeyframeItem::redrawCurve, this, &CurveItem::emitCurveChanged);
@@ -385,14 +355,6 @@ void CurveItem::connect(GraphicsScene *scene)
     }
 }
 
-void CurveItem::setIsUnderMouse(bool under)
-{
-    if (under != m_underMouse) {
-        m_underMouse = under;
-        update();
-    }
-}
-
 void CurveItem::insertKeyframeByTime(double time)
 {
     AnimationCurve acurve = curve();
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.h b/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.h
index f080310d59..e1517cf6db 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.h
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/curveitem.h
@@ -40,7 +40,7 @@ class AnimationCurve;
 class KeyframeItem;
 class GraphicsScene;
 
-class CurveItem : public QGraphicsObject
+class CurveItem : public CurveEditorItem
 {
     Q_OBJECT
 
@@ -64,13 +64,9 @@ public:
 
     void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override;
 
-    bool isDirty() const;
-
-    bool locked() const;
-
-    bool pinned() const;
+    void lockedCallback() override;
 
-    bool isUnderMouse() const;
+    bool isDirty() const;
 
     bool hasSelection() const;
 
@@ -88,10 +84,6 @@ public:
 
     void restore();
 
-    void setLocked(bool locked);
-
-    void setPinned(bool pinned);
-
     void setDirty(bool dirty);
 
     void setHandleVisibility(bool visible);
@@ -110,8 +102,6 @@ public:
 
     void connect(GraphicsScene *scene);
 
-    void setIsUnderMouse(bool under);
-
     void insertKeyframeByTime(double time);
 
     void deleteSelectedKeyframes();
@@ -131,12 +121,6 @@ private:
 
     std::vector<KeyframeItem *> m_keyframes;
 
-    bool m_locked;
-
-    bool m_pinned;
-
-    bool m_underMouse;
-
     bool m_itemDirty;
 };
 
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.cpp b/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.cpp
index 2351793f8d..ee907ec8cd 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.cpp
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.cpp
@@ -104,8 +104,24 @@ void GraphicsScene::keyframeMoved(KeyframeItem *movedItem, const QPointF &direct
     }
 }
 
+void GraphicsScene::handleUnderMouse(HandleItem *handle)
+{
+    const auto itemList = items();
+    for (auto *item : itemList) {
+        if (item == handle)
+            continue;
+
+        if (auto *handleItem = qgraphicsitem_cast<HandleItem *>(item)) {
+            if (handleItem->selected()) {
+                if (handleItem->slot() == handle->slot())
+                    handleItem->setActivated(handle->isUnderMouse());
+            }
+        }
+    }
+}
+
 void GraphicsScene::handleMoved(KeyframeItem *frame,
-                                HandleSlot handle,
+                                HandleItem::Slot handle,
                                 double angle,
                                 double deltaLength)
 {
@@ -151,12 +167,11 @@ void GraphicsScene::mouseMoveEvent(QGraphicsSceneMouseEvent *mouseEvent)
 {
     QGraphicsScene::mouseMoveEvent(mouseEvent);
 
-    if (hasActiveItem())
-        return;
-
     const auto itemList = items();
     for (auto *item : itemList) {
-        if (auto *curveItem = qgraphicsitem_cast<CurveItem *>(item))
+        if (auto *handleItem = qgraphicsitem_cast<HandleItem *>(item))
+            handleItem->setIsUnderMouse(handleItem->contains(mouseEvent->scenePos()));
+        else if (auto *curveItem = qgraphicsitem_cast<CurveItem *>(item))
             curveItem->setIsUnderMouse(curveItem->contains(mouseEvent->scenePos()));
     }
 }
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.h b/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.h
index 4569ace37a..77aa8c168d 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.h
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/graphicsscene.h
@@ -67,7 +67,9 @@ public:
 
     void keyframeMoved(KeyframeItem *item, const QPointF &direction);
 
-    void handleMoved(KeyframeItem *frame, HandleSlot handle, double angle, double deltaLength);
+    void handleUnderMouse(HandleItem *handle);
+
+    void handleMoved(KeyframeItem *frame, HandleItem::Slot slot, double angle, double deltaLength);
 
     void setPinned(uint id, bool pinned);
 
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/graphicsview.cpp b/src/plugins/qmldesigner/components/curveeditor/detail/graphicsview.cpp
index b51d916fb0..ee5f1e029c 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/graphicsview.cpp
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/graphicsview.cpp
@@ -553,6 +553,8 @@ void GraphicsView::drawExtremaY(QPainter *painter, const QRectF &rect)
 
 void GraphicsView::drawRangeBar(QPainter *painter, const QRectF &rect)
 {
+    painter->save();
+
     QFontMetrics fm(painter->font());
     QRectF labelRect = fm.boundingRect(QString("0"));
     labelRect.moveCenter(rect.center());
@@ -562,12 +564,10 @@ void GraphicsView::drawRangeBar(QPainter *painter, const QRectF &rect)
     QRectF activeRect = QRectF(QPointF(mapTimeToX(m_model->minimumTime()), tTick),
                                QPointF(mapTimeToX(m_model->maximumTime()), bTick));
 
-    QColor color = Qt::white;
-    color.setAlpha(30);
-
-    painter->fillRect(activeRect, color);
+    QColor rangeColor = m_style.rangeBarColor;
+    painter->fillRect(activeRect, m_style.rangeBarColor);
 
-    QColor handleColor(Qt::green);
+    QColor handleColor(m_style.rangeBarCapsColor);
     painter->setBrush(handleColor);
     painter->setPen(handleColor);
 
@@ -575,12 +575,14 @@ void GraphicsView::drawRangeBar(QPainter *painter, const QRectF &rect)
     QRectF minHandle = rangeMinHandle(rect);
     painter->drawRoundedRect(minHandle, radius, radius);
     minHandle.setLeft(minHandle.center().x());
-    painter->fillRect(minHandle, Qt::green);
+    painter->fillRect(minHandle, handleColor);
 
     QRectF maxHandle = rangeMaxHandle(rect);
     painter->drawRoundedRect(maxHandle, radius, radius);
     maxHandle.setRight(maxHandle.center().x());
-    painter->fillRect(maxHandle, Qt::green);
+    painter->fillRect(maxHandle, handleColor);
+
+    painter->restore();
 }
 
 void GraphicsView::drawTimeScale(QPainter *painter, const QRectF &rect)
@@ -603,12 +605,12 @@ void GraphicsView::drawTimeScale(QPainter *painter, const QRectF &rect)
         painter->drawLine(position, rect.bottom() - 2, position, textRect.bottom() + 2);
     };
 
+    drawRangeBar(painter, rect);
+
     double timeIncrement = timeLabelInterval(painter, maximumTime());
     for (double i = minimumTime(); i <= maximumTime(); i += timeIncrement)
         paintLabeledTick(i);
 
-    drawRangeBar(painter, rect);
-
     painter->restore();
 }
 
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.cpp b/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.cpp
index e96ebd0d39..33f35e52ac 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.cpp
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.cpp
@@ -24,6 +24,7 @@
 ****************************************************************************/
 
 #include "handleitem.h"
+#include "graphicsscene.h"
 #include "keyframeitem.h"
 #include "utils.h"
 
@@ -48,8 +49,9 @@ struct HandleGeometry
     double angle;
 };
 
-HandleItem::HandleItem(QGraphicsItem *parent)
+HandleItem::HandleItem(QGraphicsItem *parent, HandleItem::Slot slot)
     : SelectableItem(parent)
+    , m_slot(slot)
     , m_style()
 {
     setFlag(QGraphicsItem::ItemStacksBehindParent, true);
@@ -62,16 +64,31 @@ int HandleItem::type() const
     return Type;
 }
 
+HandleItem::Slot HandleItem::slot() const
+{
+    return m_slot;
+}
+
 QRectF HandleItem::boundingRect() const
 {
     HandleGeometry geom(pos(), m_style);
+    return geom.handle;
+}
 
-    QTransform transform;
-    transform.rotate(geom.angle);
+bool HandleItem::contains(const QPointF &point) const
+{
+    if (KeyframeItem *parent = qgraphicsitem_cast<KeyframeItem *>(parentItem())) {
+        HandleGeometry geom(pos(), m_style);
+        geom.handle.moveCenter(parent->pos() + pos());
+        return geom.handle.contains(point);
+    }
+    return false;
+}
 
-    QRectF bounds = bbox(geom.handle, transform);
-    grow(bounds, -pos());
-    return bounds;
+void HandleItem::underMouseCallback()
+{
+    if (auto *gscene = qobject_cast<GraphicsScene *>(scene()))
+        gscene->handleUnderMouse(this);
 }
 
 void HandleItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
@@ -82,7 +99,12 @@ void HandleItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option
     Q_UNUSED(option)
     Q_UNUSED(widget)
 
-    QColor handleColor(isSelected() ? m_style.selectionColor : m_style.color);
+    QColor handleColor(selected() ? m_style.selectionColor : m_style.color);
+
+    if (activated())
+        handleColor = m_style.activeColor;
+    if (isUnderMouse())
+        handleColor = m_style.hoverColor;
 
     HandleGeometry geom(pos(), m_style);
 
@@ -109,13 +131,12 @@ QVariant HandleItem::itemChange(QGraphicsItem::GraphicsItemChange change, const
 {
     if (change == ItemPositionChange) {
         if (KeyframeItem *parent = qgraphicsitem_cast<KeyframeItem *>(parentItem())) {
-            HandleSlot slot = parent->handleSlot(this);
             QPointF pos = value.toPointF();
-            if (slot == HandleSlot::Left) {
+            if (m_slot == HandleItem::Slot::Left) {
                 if (pos.x() > 0.0)
                     pos.rx() = 0.0;
 
-            } else if (slot == HandleSlot::Right) {
+            } else if (m_slot == HandleItem::Slot::Right) {
                 if (pos.x() < 0.0)
                     pos.rx() = 0.0;
             }
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.h b/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.h
index 32b27b9c55..e5854f4677 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.h
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/handleitem.h
@@ -35,24 +35,34 @@ class HandleItem : public SelectableItem
     Q_OBJECT
 
 public:
-    HandleItem(QGraphicsItem *parent);
+    enum { Type = ItemTypeHandle };
 
-    ~HandleItem() override;
+    enum class Slot { Undefined, Left, Right };
 
-    enum { Type = ItemTypeHandle };
+    HandleItem(QGraphicsItem *parent, HandleItem::Slot slot);
+
+    ~HandleItem() override;
 
     int type() const override;
 
     QRectF boundingRect() const override;
 
+    bool contains(const QPointF &point) const override;
+
     void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override;
 
+    void underMouseCallback() override;
+
+    Slot slot() const;
+
     void setStyle(const CurveEditorStyle &style);
 
 protected:
     QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;
 
 private:
+    Slot m_slot;
+
     HandleItemStyleOption m_style;
 };
 
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.cpp b/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.cpp
index 2ee841d872..b9adeb01cc 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.cpp
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.cpp
@@ -75,15 +75,15 @@ void KeyframeItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *opti
     painter->restore();
 }
 
-void KeyframeItem::setLocked(bool locked)
+void KeyframeItem::lockedCallback()
 {
-    SelectableItem::setLocked(locked);
+    SelectableItem::lockedCallback();
 
     if (m_left)
-        m_left->setLocked(locked);
+        m_left->setLocked(locked());
 
     if (m_right)
-        m_right->setLocked(locked);
+        m_right->setLocked(locked());
 }
 
 KeyframeItem::~KeyframeItem() {}
@@ -103,14 +103,14 @@ bool KeyframeItem::hasRightHandle() const
     return m_frame.hasRightHandle();
 }
 
-HandleSlot KeyframeItem::handleSlot(HandleItem *item) const
+QTransform KeyframeItem::transform() const
 {
-    if (item == m_left)
-        return HandleSlot::Left;
-    else if (item == m_right)
-        return HandleSlot::Right;
-    else
-        return HandleSlot::Undefined;
+    return m_transform;
+}
+
+bool KeyframeItem::contains(HandleItem *handle, const QPointF &point) const
+{
+    return false;
 }
 
 void KeyframeItem::setHandleVisibility(bool visible)
@@ -168,7 +168,7 @@ void KeyframeItem::setKeyframe(const Keyframe &keyframe)
 
     if (m_frame.hasLeftHandle()) {
         if (!m_left) {
-            m_left = new HandleItem(this);
+            m_left = new HandleItem(this, HandleItem::Slot::Left);
             auto updateLeftHandle = [this]() { updateHandle(m_left); };
             connect(m_left, &QGraphicsObject::xChanged, updateLeftHandle);
             connect(m_left, &QGraphicsObject::yChanged, updateLeftHandle);
@@ -181,7 +181,7 @@ void KeyframeItem::setKeyframe(const Keyframe &keyframe)
 
     if (m_frame.hasRightHandle()) {
         if (!m_right) {
-            m_right = new HandleItem(this);
+            m_right = new HandleItem(this, HandleItem::Slot::Right);
             auto updateRightHandle = [this]() { updateHandle(m_right); };
             connect(m_right, &QGraphicsObject::xChanged, updateRightHandle);
             connect(m_right, &QGraphicsObject::yChanged, updateRightHandle);
@@ -244,7 +244,7 @@ void KeyframeItem::moveKeyframe(const QPointF &direction)
     emit redrawCurve();
 }
 
-void KeyframeItem::moveHandle(HandleSlot handle, double deltaAngle, double deltaLength)
+void KeyframeItem::moveHandle(HandleItem::Slot slot, double deltaAngle, double deltaLength)
 {
     auto move = [this, deltaAngle, deltaLength](HandleItem *item) {
         if (!item)
@@ -259,9 +259,9 @@ void KeyframeItem::moveHandle(HandleSlot handle, double deltaAngle, double delta
 
     this->blockSignals(true);
 
-    if (handle == HandleSlot::Left)
+    if (slot == HandleItem::Slot::Left)
         move(m_left);
-    else if (handle == HandleSlot::Right)
+    else if (slot == HandleItem::Slot::Right)
         move(m_right);
 
     this->blockSignals(false);
@@ -280,14 +280,13 @@ void KeyframeItem::updateHandle(HandleItem *handle, bool emitChanged)
 
     QPointF oldPosition;
     QPointF newPosition;
-    HandleSlot slot = HandleSlot::Undefined;
-    if (handle == m_left) {
-        slot = HandleSlot::Left;
+    HandleItem::Slot slot = handle->slot();
+
+    if (slot == HandleItem::Slot::Left) {
         oldPosition = m_frame.leftHandle();
         m_frame.setLeftHandle(m_frame.position() + handlePosition);
         newPosition = m_frame.leftHandle();
-    } else {
-        slot = HandleSlot::Right;
+    } else if (slot == HandleItem::Slot::Right) {
         oldPosition = m_frame.rightHandle();
         m_frame.setRightHandle(m_frame.position() + handlePosition);
         newPosition = m_frame.rightHandle();
@@ -349,14 +348,18 @@ void KeyframeItem::selectionCallback()
     if (selected()) {
         if (m_visibleOverride) {
             setHandleVisibility(true);
-            setHandleVisibility(true);
         }
     } else {
         if (!m_visibleOverride) {
             setHandleVisibility(false);
-            setHandleVisibility(false);
         }
     }
+
+    if (m_left)
+        m_left->setSelected(selected());
+
+    if (m_right)
+        m_right->setSelected(selected());
 }
 
 } // End namespace DesignTools.
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.h b/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.h
index e556f3573e..8518fbee69 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.h
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/keyframeitem.h
@@ -26,6 +26,7 @@
 #pragma once
 
 #include "curveeditorstyle.h"
+#include "handleitem.h"
 #include "keyframe.h"
 #include "selectableitem.h"
 
@@ -35,8 +36,6 @@ namespace DesignTools {
 
 class HandleItem;
 
-enum class HandleSlot { Undefined, Left, Right };
-
 class KeyframeItem : public SelectableItem
 {
     Q_OBJECT
@@ -46,7 +45,7 @@ signals:
 
     void keyframeMoved(KeyframeItem *item, const QPointF &direction);
 
-    void handleMoved(KeyframeItem *frame, HandleSlot handle, double angle, double deltaLength);
+    void handleMoved(KeyframeItem *frame, HandleItem::Slot slot, double angle, double deltaLength);
 
 public:
     KeyframeItem(QGraphicsItem *parent = nullptr);
@@ -63,7 +62,7 @@ public:
 
     void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override;
 
-    void setLocked(bool locked) override;
+    void lockedCallback() override;
 
     Keyframe keyframe() const;
 
@@ -71,7 +70,9 @@ public:
 
     bool hasRightHandle() const;
 
-    HandleSlot handleSlot(HandleItem *item) const;
+    QTransform transform() const;
+
+    bool contains(HandleItem *handle, const QPointF &point) const;
 
     void setHandleVisibility(bool visible);
 
@@ -89,7 +90,7 @@ public:
 
     void moveKeyframe(const QPointF &direction);
 
-    void moveHandle(HandleSlot handle, double deltaAngle, double deltaLength);
+    void moveHandle(HandleItem::Slot slot, double deltaAngle, double deltaLength);
 
 protected:
     QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.cpp b/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.cpp
index 66459c4fde..f6d569def0 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.cpp
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.cpp
@@ -28,8 +28,59 @@
 
 namespace DesignTools {
 
-SelectableItem::SelectableItem(QGraphicsItem *parent)
+CurveEditorItem::CurveEditorItem(QGraphicsItem *parent)
     : QGraphicsObject(parent)
+    , m_locked(false)
+    , m_pinned(false)
+    , m_underMouse(false)
+{
+    setAcceptHoverEvents(true);
+}
+
+void CurveEditorItem::lockedCallback() {}
+void CurveEditorItem::pinnedCallback() {}
+void CurveEditorItem::underMouseCallback() {}
+
+bool CurveEditorItem::locked() const
+{
+    return m_locked;
+}
+
+bool CurveEditorItem::pinned() const
+{
+    return m_pinned;
+}
+
+bool CurveEditorItem::isUnderMouse() const
+{
+    return m_underMouse;
+}
+
+void CurveEditorItem::setLocked(bool locked)
+{
+    m_locked = locked;
+    lockedCallback();
+    update();
+}
+
+void CurveEditorItem::setPinned(bool pinned)
+{
+    m_pinned = pinned;
+    pinnedCallback();
+    update();
+}
+
+void CurveEditorItem::setIsUnderMouse(bool under)
+{
+    if (under != m_underMouse) {
+        m_underMouse = under;
+        underMouseCallback();
+        update();
+    }
+}
+
+SelectableItem::SelectableItem(QGraphicsItem *parent)
+    : CurveEditorItem(parent)
     , m_active(false)
     , m_selected(false)
     , m_locked(false)
@@ -44,11 +95,11 @@ SelectableItem::SelectableItem(QGraphicsItem *parent)
 
 SelectableItem::~SelectableItem() {}
 
-void SelectableItem::setLocked(bool locked)
+void SelectableItem::lockedCallback()
 {
-    setPreselected(SelectionMode::Clear);
-    applyPreselection();
-    m_locked = locked;
+    m_preSelected = SelectionMode::Undefined;
+    m_selected = false;
+    selectionCallback();
 }
 
 bool SelectableItem::activated() const
@@ -76,14 +127,14 @@ bool SelectableItem::selected() const
     return false;
 }
 
-bool SelectableItem::locked() const
+void SelectableItem::setActivated(bool active)
 {
-    return m_locked;
+    m_active = active;
 }
 
-void SelectableItem::setActivated(bool active)
+void SelectableItem::setSelected(bool selected)
 {
-    m_active = active;
+    m_selected = selected;
 }
 
 void SelectableItem::setPreselected(SelectionMode mode)
@@ -101,6 +152,8 @@ void SelectableItem::applyPreselection()
     m_preSelected = SelectionMode::Undefined;
 }
 
+void SelectableItem::activationCallback() {}
+
 void SelectableItem::selectionCallback() {}
 
 void SelectableItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
@@ -110,6 +163,7 @@ void SelectableItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
 
     m_active = true;
     QGraphicsObject::mousePressEvent(event);
+    activationCallback();
 }
 
 void SelectableItem::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
@@ -130,6 +184,7 @@ void SelectableItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
 
     m_active = false;
     QGraphicsObject::mouseReleaseEvent(event);
+    activationCallback();
 }
 
 } // End namespace DesignTools.
diff --git a/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.h b/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.h
index f3d3b421f2..1a10c5c7a0 100644
--- a/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.h
+++ b/src/plugins/qmldesigner/components/curveeditor/detail/selectableitem.h
@@ -29,22 +29,38 @@
 
 namespace DesignTools {
 
+class CurveEditorItem : public QGraphicsObject
+{
+public:
+    CurveEditorItem(QGraphicsItem *parent);
+
+    virtual void lockedCallback();
+    virtual void pinnedCallback();
+    virtual void underMouseCallback();
+
+    bool locked() const;
+    bool pinned() const;
+    bool isUnderMouse() const;
+
+    void setLocked(bool locked);
+    void setPinned(bool pinned);
+    void setIsUnderMouse(bool under);
+
+private:
+    bool m_locked;
+    bool m_pinned;
+    bool m_underMouse;
+};
+
 enum ItemType {
     ItemTypeKeyframe = QGraphicsItem::UserType + 1,
     ItemTypeHandle = QGraphicsItem::UserType + 2,
     ItemTypeCurve = QGraphicsItem::UserType + 3
 };
 
-enum class SelectionMode : unsigned int {
-    Undefined,
-    Clear,
-    New,
-    Add,
-    Remove,
-    Toggle
-};
+enum class SelectionMode : unsigned int { Undefined, Clear, New, Add, Remove, Toggle };
 
-class SelectableItem : public QGraphicsObject
+class SelectableItem : public CurveEditorItem
 {
     Q_OBJECT
 
@@ -53,21 +69,23 @@ public:
 
     ~SelectableItem() override;
 
-    virtual void setLocked(bool locked);
+    void lockedCallback() override;
 
     bool activated() const;
 
     bool selected() const;
 
-    bool locked() const;
-
     void setActivated(bool active);
 
+    void setSelected(bool selected);
+
     void setPreselected(SelectionMode mode);
 
     void applyPreselection();
 
 protected:
+    virtual void activationCallback();
+
     virtual void selectionCallback();
 
     void mousePressEvent(QGraphicsSceneMouseEvent *event) override;
diff --git a/src/plugins/qmldesigner/components/timelineeditor/animationcurveeditormodel.cpp b/src/plugins/qmldesigner/components/timelineeditor/animationcurveeditormodel.cpp
index e09d09532d..d37be1cd35 100644
--- a/src/plugins/qmldesigner/components/timelineeditor/animationcurveeditormodel.cpp
+++ b/src/plugins/qmldesigner/components/timelineeditor/animationcurveeditormodel.cpp
@@ -31,6 +31,7 @@
 
 #include <bindingproperty.h>
 #include <variantproperty.h>
+#include <theme.h>
 
 namespace QmlDesigner {
 
@@ -64,8 +65,8 @@ DesignTools::CurveEditorStyle AnimationCurveEditorModel::style() const
     out.timeAxisHeight = 60;
     out.timeOffsetLeft = 10;
     out.timeOffsetRight = 10;
-    out.rangeBarColor = QColor(50, 50, 255);
-    out.rangeBarCapsColor = QColor(50, 50, 255);
+    out.rangeBarColor = Theme::instance()->qmlDesignerBackgroundColorDarkAlternate();
+    out.rangeBarCapsColor = Theme::getColor(Theme::QmlDesigner_HighlightColor);
     out.valueAxisWidth = 60;
     out.valueOffsetTop = 10;
     out.valueOffsetBottom = 10;