Implement better dragging UI/UX

- Gutter now only appears when the layer will move to a different position - Bottom layer (camera layer) cannot be dragged anymore - Made the gutter visual more clear
MrStevns · Sep 24, 2024 · e81831f · e81831f
1 parent a255cd5
commit e81831f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 24 deletions.
diff --git a/app/src/timelinelayercellgutterwidget.cpp b/app/src/timelinelayercellgutterwidget.cpp
@@ -7,16 +7,21 @@ TimeLineLayerCellGutterWidget::TimeLineLayerCellGutterWidget(int width, QWidget*
     : QWidget(parent)
 {
 
-    setGeometry(0, 0, width, 2);
+    setGeometry(0, 0, width, 8);
 }
 
 void TimeLineLayerCellGutterWidget::paintEvent(QPaintEvent* event)
 {
     QPainter painter(this);
     QPalette palette = QApplication::palette();
 
-    painter.setPen(palette.color(QPalette::HighlightedText));
-    painter.drawRect(0, rect().bottom(), rect().width(), 2);
+    QPen pen = palette.color(QPalette::HighlightedText);
+    pen.setWidth(1);
+    painter.setPen(pen);
+    QColor brushColor = palette.color(QPalette::Highlight);
+    brushColor.setAlphaF(0.5);
+    painter.setBrush(brushColor);
+    painter.drawRect(rect().x()+1, rect().top()+1, rect().width()-1, rect().bottom()-1);
 }
 
 void TimeLineLayerCellGutterWidget::updateWidth(int width)

diff --git a/app/src/timelinelayerlist.cpp b/app/src/timelinelayerlist.cpp
@@ -93,12 +93,6 @@ void TimeLineLayerList::drawContent()
     mRedrawContent = false;
 }
 
-void TimeLineLayerList::paintLayerGutter(QPainter& painter, const QPalette& palette) const
-{
-    painter.setPen(palette.color(QPalette::Mid));
-    painter.drawRect(0, mGutterPositionY, width(), 2);
-}
-
 void TimeLineLayerList::paintEvent(QPaintEvent*)
 {
     QPainter painter(this);
@@ -137,10 +131,12 @@ void TimeLineLayerList::resizeEvent(QResizeEvent* event)
 
 int TimeLineLayerList::getLayerGutterYPosition(int posY) const
 {
-    int layerNumber = getLayerNumber(posY - (mLayerHeight * 0.5));
+    int layerNumber = getLayerNumber(posY + (mLayerHeight * 0.5));
+
     if(posY > getLayerCellY(layerNumber)) {
         layerNumber--;
     }
+
     int maxLayerNum = mEditor->layers()->count() - 1;
     if (layerNumber > maxLayerNum) {
         layerNumber = maxLayerNum;
@@ -162,7 +158,7 @@ void TimeLineLayerList::onScrollingVerticallyStopped()
     mScrollingVertically = false;
 }
 
-void TimeLineLayerList::onCellDragged(const DragEvent& event, TimeLineLayerCellEditorWidget* editorWidget, int x, int y)
+void TimeLineLayerList::onCellDragged(const DragEvent& event, TimeLineLayerCellEditorWidget* editorWidget, int /*x*/, int y)
 {
     switch (event)
     {
@@ -176,28 +172,35 @@ void TimeLineLayerList::onCellDragged(const DragEvent& event, TimeLineLayerCellE
             break;
         }
         case DragEvent::DRAGGING: {
+
+            // The camera layer is at the bottom and must not be moved
+            if (mFromLayer <= 0) {
+                break;
+            }
+
             editorWidget->move(0, y);
             mGutterPositionY = getLayerGutterYPosition(y);
 
             if (editorWidget->didDetach()) {
-                mGutterWidget->show();
+
+                int dragToNumber = getDragToLayerNumber(getLayerCellY(mFromLayer), mGutterPositionY);
+
+                if (dragToNumber != mFromLayer && mFromLayer > 0) {
+                    mGutterWidget->show();
+                } else {
+                    mGutterWidget->hide();
+                }
             }
-            mGutterWidget->move(0, mGutterPositionY);
+
+            mGutterWidget->move(0, mGutterPositionY - mGutterWidget->rect().center().y());
             emit cellDraggedY(event, y);
             break;
         }
         case DragEvent::ENDED: {
-            int dragToNumber = mFromLayer;
             int fromLayerDragY = getLayerCellY(mFromLayer);
-            if (fromLayerDragY > mGutterPositionY) {
-                // If we're starting from above, adjust the drag number so we're one cell above
-                dragToNumber = getLayerNumber(mGutterPositionY + (mLayerHeight * 0.5));
-            } else if (fromLayerDragY < mGutterPositionY) {
-                // If we're starting from below, adjust the drag number so we're one cell below
-                dragToNumber = getLayerNumber(mGutterPositionY - (mLayerHeight * 0.5));
-            }
+            int dragToNumber = getDragToLayerNumber(getLayerCellY(mFromLayer), mGutterPositionY);
 
-            if (!mScrollingVertically && dragToNumber != mFromLayer && dragToNumber > -1)
+            if (!mScrollingVertically && dragToNumber != mFromLayer && dragToNumber > -1 && mGutterWidget->isVisible())
             {
                 if (dragToNumber < mEditor->layers()->count())
                 {
@@ -225,3 +228,16 @@ void TimeLineLayerList::onCellDragged(const DragEvent& event, TimeLineLayerCellE
 
     updateContent();
 }
+
+int TimeLineLayerList::getDragToLayerNumber(int fromLayerDragY, int gutterPositionY) const
+{
+    if (fromLayerDragY > gutterPositionY) {
+        // If we're starting from below, adjust the drag number so we're one cell below
+        return getLayerNumber(gutterPositionY + (mLayerHeight * 0.5));
+    } else if (fromLayerDragY < gutterPositionY) {
+        // If we're starting from above, adjust the drag number so we're one cell above
+        return getLayerNumber(gutterPositionY - (mLayerHeight * 0.5));
+    }
+
+    return getLayerNumber(fromLayerDragY);
+}
diff --git a/app/src/timelinelayerlist.h b/app/src/timelinelayerlist.h
@@ -38,7 +38,7 @@ class TimeLineLayerList : public QWidget
     int getLayerGutterYPosition(int posY) const;
 
     void loadLayerCells();
-    void onCellDragged(const DragEvent& event, TimeLineLayerCellEditorWidget* editorWidget, int x, int y);
+    void onCellDragged(const DragEvent& event, TimeLineLayerCellEditorWidget* editorWidget, int, int y);
 
 signals:
     void cellDraggedY(const DragEvent& event, int y);
@@ -61,8 +61,9 @@ private slots:
     int getLayerNumber(int y) const;
     int getLayerCellY(int layerNumber) const;
 
+    int getDragToLayerNumber(int y, int gutterPositionY) const;
+
     void drawContent();
-    void paintLayerGutter(QPainter& painter, const QPalette&) const;
 
     TimeLine* mTimeLine = nullptr;
     Editor* mEditor = nullptr; // the editor for which this timeLine operates