From 76edc52c1cea7360b3aae1b0bcabd00d7613d012 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Thu, 26 Nov 2020 22:10:39 +0100
Subject: [PATCH] Several drag drop fixes.

---
 .../components/schema-category.component.html |  6 ++--
 .../components/schema-category.component.scss | 28 +++++++++++--------
 .../components/schema-category.component.ts   | 23 ++++++++++++++-
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/frontend/app/shared/components/schema-category.component.html b/frontend/app/shared/components/schema-category.component.html
index 626587e59..a0a916c86 100644
--- a/frontend/app/shared/components/schema-category.component.html
+++ b/frontend/app/shared/components/schema-category.component.html
@@ -34,13 +34,15 @@
         </div>
     </div>
 
-    <div class="nav nav-panel nav-dark nav-dark-bordered flex-column" *ngIf="!isCollapsed" @fade>
+    <div class="nav nav-panel nav-dark nav-dark-bordered flex-column" *ngIf="!isCollapsed" @fade [style.height]="getContainerHeight()">
         <ng-container *ngIf="!forContent; else simpleMode">
             <div *ngFor="let schema of filteredSchemas; trackBy: trackBySchema" class="nav-item"
+                [style.height]="getItemHeight()"
                 routerLinkActive="active"
                 cdkDrag
                 cdkDragLockAxis="y"
-                [cdkDragData]="schema">
+                [cdkDragData]="schema"
+                (cdkDragStarted)="dragStarted($event)">
 
                 <i cdkDragHandle class="icon-drag2 drag-handle"></i>
 
diff --git a/frontend/app/shared/components/schema-category.component.scss b/frontend/app/shared/components/schema-category.component.scss
index 69db35af9..385446329 100644
--- a/frontend/app/shared/components/schema-category.component.scss
+++ b/frontend/app/shared/components/schema-category.component.scss
@@ -42,6 +42,22 @@ $drag-margin: -8px;
     }
 }
 
+.cdk-drag-preview {
+    background: $color-dark2-background !important;
+
+    a {
+        color: $color-dark1-foreground !important;
+    }
+}
+
+.cdk-drag-placeholder {
+    display: none;
+}
+
+.cdk-drag-animating {
+    transition: none;
+}
+
 .header {
     line-height: 2rem;
     margin-bottom: 0;
@@ -86,18 +102,6 @@ $drag-margin: -8px;
     }
 }
 
-.cdk-drag-preview {
-    background: $color-dark2-background !important;
-
-    a {
-        color: $color-dark1-foreground !important;
-    }
-}
-
-.cdk-drag-animating {
-    transition: none;
-}
-
 .schema {
     &-name {
         @include truncate;
diff --git a/frontend/app/shared/components/schema-category.component.ts b/frontend/app/shared/components/schema-category.component.ts
index 7d2bd7c52..2f80f2da9 100644
--- a/frontend/app/shared/components/schema-category.component.ts
+++ b/frontend/app/shared/components/schema-category.component.ts
@@ -5,12 +5,14 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, CdkDragStart } from '@angular/cdk/drag-drop';
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { fadeAnimation, LocalStoreService, SchemaCategory, SchemaDto, SchemasList, SchemasState } from '@app/shared/internal';
 import { AppsState } from '../state/apps.state';
 import { Settings } from '../state/settings';
 
+const ITEM_HEIGHT = 3.125;
+
 @Component({
     selector: 'sqx-schema-category',
     styleUrls: ['./schema-category.component.scss'],
@@ -83,6 +85,25 @@ export class SchemaCategoryComponent implements OnChanges {
         }
     }
 
+    public dragStarted(event: CdkDragStart) {
+        setTimeout(() => {
+            const dropContainer = event.source._dragRef['_dropContainer'];
+
+            if (dropContainer) {
+                dropContainer['_cacheOwnPosition']();
+                dropContainer['_cacheItemPositions']();
+            }
+        });
+    }
+
+    public getItemHeight() {
+        return `${ITEM_HEIGHT}rem`;
+    }
+
+    public getContainerHeight() {
+        return `${ITEM_HEIGHT * this.filteredSchemas.length}rem`;
+    }
+
     public trackBySchema(_index: number, schema: SchemaDto) {
         return schema.id;
     }