Forward onCancel, onShadow, onClone to drag members

frontend/src/app/components/wp-card-view/wp-card-view.component.ts

@@ -19,10 +19,7 @@ import {CurrentProjectService} from "core-components/projects/current-project.se
 import {WorkPackageInlineCreateService} from "core-components/wp-inline-create/wp-inline-create.service";
 import {IWorkPackageCreateServiceToken} from "core-components/wp-new/wp-create.service.interface";
 import {WorkPackageCreateService} from "core-components/wp-new/wp-create.service";
-import {DragAndDropService} from "core-app/modules/boards/drag-and-drop/drag-and-drop.service";
-import {ReorderQueryService} from "core-app/modules/boards/drag-and-drop/reorder-query.service";
 import {AngularTrackingHelpers} from "core-components/angular/tracking-functions";
-import {DragAndDropHelpers} from "core-app/modules/boards/drag-and-drop/drag-and-drop.helpers";
 import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notification.service";
 import {Highlighting} from "core-components/wp-fast-table/builders/highlighting/highlighting.functions";
 import {WorkPackageChangeset} from "core-components/wp-edit-form/work-package-changeset";
@@ -31,6 +28,9 @@ import {AuthorisationService} from "core-app/modules/common/model-auth/model-aut
 import {StateService} from "@uirouter/core";
 import {States} from "core-components/states.service";
 import {RequestSwitchmap} from "core-app/helpers/rxjs/request-switchmap";
+import {DragAndDropService} from "core-app/modules/common/drag-and-drop/drag-and-drop.service";
+import {ReorderQueryService} from "core-app/modules/common/drag-and-drop/reorder-query.service";
+import {DragAndDropHelpers} from "core-app/modules/common/drag-and-drop/drag-and-drop.helpers";
 
 
 @Component({

frontend/src/app/components/wp-fast-table/handlers/state/drag-and-drop-transformer.ts

@@ -2,10 +2,8 @@ import {Injector} from '@angular/core';
 import {WorkPackageTable} from '../../wp-fast-table';
 import {IsolatedQuerySpace} from "core-app/modules/work_packages/query-space/isolated-query-space";
 import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
-import {DragAndDropService} from "core-app/modules/boards/drag-and-drop/drag-and-drop.service";
 import {mergeMap, take, takeUntil} from "rxjs/operators";
 import {WorkPackageInlineCreateService} from "core-components/wp-inline-create/wp-inline-create.service";
-import {ReorderQueryService} from "core-app/modules/boards/drag-and-drop/reorder-query.service";
 import {RequestSwitchmap} from "core-app/helpers/rxjs/request-switchmap";
 import {Observable, of} from "rxjs";
 import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notification.service";
@@ -14,9 +12,11 @@ import {WorkPackageTableSortByService} from "core-components/wp-fast-table/state
 import {TableDragActionsRegistryService} from "core-components/wp-table/drag-and-drop/actions/table-drag-actions-registry.service";
 import {TableDragActionService} from "core-components/wp-table/drag-and-drop/actions/table-drag-action.service";
 import {States} from "core-components/states.service";
-import {DragAndDropHelpers} from "core-app/modules/boards/drag-and-drop/drag-and-drop.helpers";
 import {WorkPackageTableTimelineService} from "core-components/wp-fast-table/state/wp-table-timeline.service";
 import {tableRowClassName} from "core-components/wp-fast-table/builders/rows/single-row-builder";
+import {DragAndDropService} from "core-app/modules/common/drag-and-drop/drag-and-drop.service";
+import {ReorderQueryService} from "core-app/modules/common/drag-and-drop/reorder-query.service";
+import {DragAndDropHelpers} from "core-app/modules/common/drag-and-drop/drag-and-drop.helpers";
 
 export class DragAndDropTransformer {
 
@@ -122,7 +122,20 @@ export class DragAndDropTransformer {
             return true;
           })
           .catch(() => false);
-      }
+      },
+      onCloned: (clone:HTMLElement, original:HTMLElement) => {
+        // Maintain widths from original
+        Array.from(original.children).forEach((source:HTMLElement, index:number) => {
+          const target = clone.children.item(index) as HTMLElement;
+          target.style.width = source.offsetWidth + "px";
+        });
+      },
+      onShadowInserted: (el:HTMLElement) => {
+        this.actionService.changeShadowElement(el);
+      },
+      onCancel: (el:HTMLElement) => {
+        this.actionService.changeShadowElement(el, true);
+      },
     });
   }
 

frontend/src/app/modules/boards/board/board.component.ts

@@ -9,7 +9,6 @@ import {
   ViewChildren,
   ViewEncapsulation
 } from "@angular/core";
-import {DragAndDropService} from "core-app/modules/boards/drag-and-drop/drag-and-drop.service";
 import {NotificationsService} from "core-app/modules/common/notifications/notifications.service";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {BoardListsService} from "core-app/modules/boards/board/board-list/board-lists.service";
@@ -30,6 +29,7 @@ import {RequestSwitchmap} from "core-app/helpers/rxjs/request-switchmap";
 import {from} from "rxjs";
 import {BoardFilterComponent} from "core-app/modules/boards/board/board-filter/board-filter.component";
 import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notification.service";
+import {DragAndDropService} from "core-app/modules/common/drag-and-drop/drag-and-drop.service";
 
 @Component({
   selector: 'board',

frontend/src/app/modules/common/drag-and-drop/drag-and-drop.service.ts

@@ -1,9 +1,7 @@
 import {Inject, Injectable, Injector, OnDestroy} from "@angular/core";
 import {DOCUMENT} from "@angular/common";
-import {DragAndDropHelpers} from "core-app/modules/boards/drag-and-drop/drag-and-drop.helpers";
 import {DomAutoscrollService} from "core-app/modules/common/drag-and-drop/dom-autoscroll.service";
-import {TableDragActionsRegistryService} from "core-components/wp-table/drag-and-drop/actions/table-drag-actions-registry.service";
-import {TableDragActionService} from "core-components/wp-table/drag-and-drop/actions/table-drag-action.service";
+import {DragAndDropHelpers} from "core-app/modules/common/drag-and-drop/drag-and-drop.helpers";
 
 export interface DragMember {
   dragContainer:HTMLElement;
@@ -11,14 +9,23 @@ export interface DragMember {
   /** Whether this element moves */
   moves:(element:HTMLElement, fromContainer:HTMLElement, handle:HTMLElement, sibling?:HTMLElement|null) => boolean;
   /** Move element in container */
-  onMoved:(row:HTMLElement, target:any, source:HTMLElement, sibling:HTMLElement|null) => void;
+  onMoved:(element:HTMLElement, target:any, source:HTMLElement, sibling:HTMLElement|null) => void;
   /** Add element to this container */
-  onAdded:(row:HTMLElement, target:any, source:HTMLElement, sibling:HTMLElement|null) => Promise<boolean>;
+  onAdded:(element:HTMLElement, target:any, source:HTMLElement, sibling:HTMLElement|null) => Promise<boolean>;
   /** Remove element from this container */
-  onRemoved:(row:HTMLElement, target:any, source:HTMLElement, sibling:HTMLElement|null) => void;
+  onRemoved:(element:HTMLElement, target:any, source:HTMLElement, sibling:HTMLElement|null) => void;
 
   /** Move this container accepts elements */
   accepts?:(row:HTMLElement, container:any) => boolean;
+
+  /** Callback when the element got cloned */
+  onCloned?:(clone:HTMLElement, original:HTMLElement) => void;
+
+  /** Callback when the shadow element got inserted into a container */
+  onShadowInserted?:(row:HTMLElement) => void;
+
+  /** Callback when the shadow element got inserted into a container */
+  onCancel?:(element:HTMLElement) => void;
 }
 
 @Injectable()
@@ -36,8 +43,6 @@ export class DragAndDropService implements OnDestroy {
     }
   };
 
-  private readonly dragActionRegistry = this.injector.get(TableDragActionsRegistryService);
-
   constructor(@Inject(DOCUMENT) private document:Document,
               readonly injector:Injector) {
     this.document.documentElement.addEventListener('keydown', this.escapeListener);
@@ -148,12 +153,9 @@ export class DragAndDropService implements OnDestroy {
     });
 
     this.drake.on('cloned', (clone:HTMLElement, original:HTMLElement) => {
-      if (clone.tagName === 'TR') {
-        // Maintain widths from original
-        Array.from(original.children).forEach((source:HTMLElement, index:number) => {
-          const target = clone.children.item(index) as HTMLElement;
-          target.style.width = source.offsetWidth + "px";
-        });
+      const member = this.member(original.parentElement!);
+      if (member && member.onCloned) {
+        member.onCloned(clone, original);
       }
     });
 
@@ -166,13 +168,17 @@ export class DragAndDropService implements OnDestroy {
     });
 
     this.drake.on('shadow', (shadowElement:HTMLElement, container:HTMLElement) => {
-      if (shadowElement.tagName === 'TR') {
-        this.actionService.changeShadowElement(shadowElement);
+      const member = this.member(container);
+      if (member && member.onShadowInserted) {
+        member.onShadowInserted(shadowElement);
       }
     });
 
     this.drake.on('cancel', (el:HTMLElement, container:HTMLElement, source:HTMLElement) => {
-      this.actionService.changeShadowElement(el, true);
+      const member = this.member(container);
+      if (member && member.onCancel) {
+        member.onCancel(el);
+      }
     });
   }
 
@@ -197,8 +203,4 @@ export class DragAndDropService implements OnDestroy {
       DragAndDropHelpers.reinsert(el, el.dataset.sourceIndex || -1, source);
     }
   }
-
-  protected get actionService():TableDragActionService {
-    return this.dragActionRegistry.get(this.injector);
-  }
 }

frontend/src/app/modules/work_packages/query-space/wp-isolated-query-space.directive.ts

@@ -46,7 +46,6 @@ import {IWorkPackageCreateServiceToken} from "core-components/wp-new/wp-create.s
 import {WorkPackageCreateService} from "core-components/wp-new/wp-create.service";
 import {WorkPackageStatesInitializationService} from "core-components/wp-list/wp-states-initialization.service";
 import {WorkPackageTableFocusService} from "core-components/wp-fast-table/state/wp-table-focus.service";
-import {ReorderQueryService} from "core-app/modules/boards/drag-and-drop/reorder-query.service";
 import {IWorkPackageEditingServiceToken} from "core-components/wp-edit-form/work-package-editing.service.interface";
 import {WorkPackageEditingService} from "core-components/wp-edit-form/work-package-editing-service";
 import {WorkPackagesListService} from "core-components/wp-list/wp-list.service";
@@ -61,6 +60,7 @@ import {WorkPackagesListChecksumService} from "core-components/wp-list/wp-list-c
 import {debugLog} from "core-app/helpers/debug_output";
 import {PortalCleanupService} from "core-app/modules/fields/display/display-portal/portal-cleanup.service";
 import {TableDragActionsRegistryService} from "core-components/wp-table/drag-and-drop/actions/table-drag-actions-registry.service";
+import {ReorderQueryService} from "core-app/modules/common/drag-and-drop/reorder-query.service";
 
 /**
  * Directive to open a work package query 'space', an isolated injector hierarchy

frontend/src/app/modules/work_packages/routing/wp-list/wp-list.component.ts

@@ -32,7 +32,7 @@ import {QueryResource} from 'core-app/modules/hal/resources/query-resource';
 import {OpTitleService} from "core-components/html/op-title.service";
 import {WorkPackagesViewBase} from "core-app/modules/work_packages/routing/wp-view-base/work-packages-view.base";
 import {take} from "rxjs/operators";
-import {DragAndDropService} from "core-app/modules/boards/drag-and-drop/drag-and-drop.service";
+import {DragAndDropService} from "core-app/modules/common/drag-and-drop/drag-and-drop.service";
 
 @Component({
   selector: 'wp-list',