feat: ability to drag and drop tiles

libs/assets/styles/_drag-drop-animation.less

@@ -0,0 +1,7 @@
+.cdk-drop-list-dragging .cdk-drag {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list {
+  display: flex;
+}

libs/lib-client/diagram/src/index.ts

@@ -5,6 +5,7 @@ export {
   DiagramAction,
   DiagramActionChild,
   DiagramActionSelf,
+  DiagramActionMove,
   Tile,
   TaskTile,
   TileType,
@@ -14,3 +15,5 @@ export { DiagramComponent } from './lib/diagram/diagram.component';
 export { SELECTED_INSERT_TILE_CLASS, BUTTON_INSERT_CLASS } from './lib/constants';
 export { DiagramModule } from './lib/diagram.module';
 export { trackTileByFn } from './lib/tiles/track-tile-by';
+export { updateLinks } from './lib/drag-tiles';
+export { DragTileService } from './lib/drag-tiles';

libs/lib-client/diagram/src/lib/action-event-factory.ts

@@ -1,4 +1,4 @@
-import { DiagramActionType } from './interfaces';
+import { DiagramActionType, DiagramActionMove } from './interfaces';
 import { DiagramActionChild, DiagramActionSelf } from './interfaces';
 
 export const actionEventFactory = {
@@ -8,6 +8,13 @@ export const actionEventFactory = {
       parentId,
     };
   },
+  move(id: string, parentId: string): DiagramActionMove {
+    return {
+      type: DiagramActionType.Move,
+      id,
+      parentId: parentId || null,
+    };
+  },
   branch(parentId: string): DiagramActionChild {
     return {
       type: DiagramActionType.Branch,

libs/lib-client/diagram/src/lib/diagram.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { LanguageModule } from '@flogo-web/lib-client/language';
 import { CommonModule } from '@angular/common';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+import { LanguageModule } from '@flogo-web/lib-client/language';
 
 import { DiagramComponent } from './diagram/diagram.component';
 import { DiagramRowComponent } from './diagram/diagram-row.component';
@@ -9,9 +11,10 @@ import { TileTaskComponent } from './tiles/tile-task.component';
 
 import { TileBranchComponent } from './tiles/tile-branch.component';
 import { TileSsvgComponent } from './tiles/tiles-svg';
+import { DragTileService } from './drag-tiles';
 
 @NgModule({
-  imports: [CommonModule, LanguageModule],
+  imports: [CommonModule, LanguageModule, DragDropModule],
 
   exports: [DiagramComponent, TileInsertComponent, TileTaskComponent, TileSsvgComponent],
   declarations: [
@@ -22,6 +25,6 @@ import { TileSsvgComponent } from './tiles/tiles-svg';
     TileTaskComponent,
     TileSsvgComponent,
   ],
-  providers: [],
+  providers: [DragTileService],
 })
 export class DiagramModule {}

libs/lib-client/diagram/src/lib/diagram/diagram-row.component.html

@@ -1,21 +1,58 @@
-<ng-template ngFor let-tile [ngForOf]="tiles" [ngForTrackBy]="trackTileBy">
-  <div
-    *ngIf="tile.type === tileTypes.Padding || tile.type == tileTypes.Placeholder"
+<ng-template
+  ngFor
+  let-tile
+  [ngForOf]="groupedTiles?.preDropZone"
+  [ngForTrackBy]="trackTileBy"
+>
+  <div *ngIf="tile.type === tileTypes.Padding" @tileGeneric class="tile tile--slot"></div>
+  <flogo-diagram-tile-branch
+    *ngIf="tile.type === tileTypes.Task"
     @tileGeneric
-    [@.disabled]="tile.type === tileTypes.Placeholder"
-    class="tile tile--slot"
-    [class.tile--placeholder]="tile.type === tileTypes.Placeholder"
-  ></div>
-  <flogo-diagram-tile-insert
-    *ngIf="tile.type === tileTypes.Insert"
-    @tileInsert
-    class="tile--slot"
+    class="tile--branch"
     [tile]="tile"
     [currentSelection]="selection"
-    (select)="onInsertSelected($event)"
-  ></flogo-diagram-tile-insert>
+    [isReadOnly]="isReadOnly"
+    [spanRows]="calculateBranchSpan(tile)"
+    (select)="onTaskSelected($event)"
+    (remove)="onTaskAction($event)"
+  ></flogo-diagram-tile-branch>
+</ng-template>
+<div
+  cdkDropList
+  cdkDropListOrientation="horizontal"
+  [cdkDropListDisabled]="isReadOnly"
+  [cdkDropListEnterPredicate]="restrictTileDrop"
+  (cdkDropListDropped)="moveTile($event)"
+>
+  <ng-template
+    ngFor
+    let-tile
+    [ngForOf]="groupedTiles?.dropZone"
+    [ngForTrackBy]="trackTileBy"
+  >
+    <flogo-diagram-tile-task
+      cdkDrag
+      cdkDragBoundary="flogo-diagram"
+      @tileTask
+      [tile]="tile"
+      [cdkDragData]="tile?.task?.id"
+      [currentSelection]="selection"
+      [isReadOnly]="isReadOnly"
+      (select)="onTaskSelected($event)"
+      (branch)="onTaskAction($event)"
+      (remove)="onTaskAction($event)"
+      (configure)="onTaskAction($event)"
+    ></flogo-diagram-tile-task>
+  </ng-template>
+</div>
+<ng-template
+  ngFor
+  let-tile
+  [ngForOf]="groupedTiles?.postDropZone"
+  [ngForTrackBy]="trackTileBy"
+>
   <flogo-diagram-tile-task
-    *ngIf="tile.type === tileTypes.Task && tile.task?.type === nodeTypes.Task"
+    *ngIf="tile.type === tileTypes.Task"
     @tileTask
     [tile]="tile"
     [currentSelection]="selection"
@@ -25,15 +62,19 @@
     (remove)="onTaskAction($event)"
     (configure)="onTaskAction($event)"
   ></flogo-diagram-tile-task>
-  <flogo-diagram-tile-branch
-    *ngIf="tile.type === tileTypes.Task && tile.task?.type === nodeTypes.Branch"
+  <div
+    *ngIf="tile.type == tileTypes.Placeholder"
     @tileGeneric
-    class="tile--branch"
+    [@.disabled]="tile.type === tileTypes.Placeholder"
+    class="tile tile--slot"
+    [class.tile--placeholder]="tile.type === tileTypes.Placeholder"
+  ></div>
+  <flogo-diagram-tile-insert
+    *ngIf="tile.type === tileTypes.Insert"
+    @tileInsert
+    class="tile--slot"
     [tile]="tile"
     [currentSelection]="selection"
-    [isReadOnly]="isReadOnly"
-    [spanRows]="calculateBranchSpan(tile)"
-    (select)="onTaskSelected($event)"
-    (remove)="onTaskAction($event)"
-  ></flogo-diagram-tile-branch>
+    (select)="onInsertSelected($event)"
+  ></flogo-diagram-tile-insert>
 </ng-template>

libs/lib-client/diagram/src/lib/diagram/diagram-row.component.less

@@ -1,4 +1,5 @@
 @import '../_styles';
+@import '~@flogo-web/assets/styles/_drag-drop-animation';
 
 :host {
   .row();

libs/lib-client/diagram/src/lib/diagram/diagram-row.component.ts

@@ -8,14 +8,15 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
+import { CdkDragDrop, CdkDrag } from '@angular/cdk/drag-drop';
 
-import { NodeType } from '@flogo-web/lib-client/core';
-
-import { Tile, TaskTile, TileType, DiagramAction, DiagramSelection } from '../interfaces';
+import { DiagramAction, DiagramSelection, TaskTile, Tile, TileType } from '../interfaces';
 import { actionEventFactory } from '../action-event-factory';
-import { RowIndexService, isTaskTile, isInsertTile } from '../shared';
+import { RowIndexService } from '../shared';
 import { rowAnimations } from './diagram-row.animations';
 import { trackTileByFn } from '../tiles/track-tile-by';
+import { DragTileService, TilesGroupedByZone } from '../drag-tiles';
+
 @Component({
   selector: 'flogo-diagram-row',
   templateUrl: './diagram-row.component.html',
@@ -31,15 +32,17 @@ export class DiagramRowComponent implements OnChanges {
   @Output() action = new EventEmitter<DiagramAction>();
 
   tileTypes = TileType;
-  nodeTypes = NodeType;
-  tiles: Tile[];
+  groupedTiles: TilesGroupedByZone<Tile>;
   trackTileBy = trackTileByFn;
 
-  constructor(private rowIndexService: RowIndexService) {}
+  constructor(
+    private rowIndexService: RowIndexService,
+    private dragService: DragTileService
+  ) {}
 
   ngOnChanges({ row: rowChange }: SimpleChanges) {
     if (rowChange) {
-      this.tiles = this.row;
+      this.groupedTiles = this.dragService.groupTilesByZone(this.row);
     }
   }
 
@@ -60,4 +63,21 @@ export class DiagramRowComponent implements OnChanges {
   onTaskAction(action: DiagramAction) {
     this.action.emit(action);
   }
+
+  moveTile(event: CdkDragDrop<Tile[]>) {
+    const dropActionData = this.dragService.prepareDropActionData(event, () => {
+      const branchTile: TaskTile = this.groupedTiles.preDropZone.find(
+        (tile: TaskTile) => tile.type === TileType.Task
+      ) as TaskTile;
+      return branchTile?.task.id;
+    });
+    if (dropActionData) {
+      const { itemId, parentId } = dropActionData;
+      this.action.emit(actionEventFactory.move(itemId, parentId));
+    }
+  }
+
+  restrictTileDrop = (dragEvent: CdkDrag) => {
+    return this.dragService.isTileAllowedToDropInRow(dragEvent.data, this.rowIndex);
+  };
 }

libs/lib-client/diagram/src/lib/diagram/diagram.component.html

@@ -1,12 +1,14 @@
-<flogo-diagram-tiles-svg></flogo-diagram-tiles-svg>
-<flogo-diagram-row
-  *ngFor="let row of tileMatrix; trackBy: trackRowBy; let rowIndex = index"
-  @diagramRow
-  [row]="row"
-  [rowIndex]="tileMatrix.length - rowIndex - 1"
-  [selection]="selection"
-  [isReadOnly]="isReadOnly"
-  (action)="onAction($event)"
-  class="diagram-row"
->
-</flogo-diagram-row>
+<div class="group" cdkDropListGroup>
+  <flogo-diagram-tiles-svg></flogo-diagram-tiles-svg>
+  <flogo-diagram-row
+    *ngFor="let row of tileMatrix; trackBy: trackRowBy; let rowIndex = index"
+    @diagramRow
+    [row]="row"
+    [rowIndex]="tileMatrix.length - rowIndex - 1"
+    [selection]="selection"
+    [isReadOnly]="isReadOnly"
+    (action)="onAction($event)"
+    class="diagram-row"
+  >
+  </flogo-diagram-row>
+</div>

libs/lib-client/diagram/src/lib/diagram/diagram.component.less

@@ -1,4 +1,4 @@
-:host {
+.group {
   display: flex;
   flex-direction: column-reverse;
   position: relative;

libs/lib-client/diagram/src/lib/diagram/diagram.component.ts

@@ -18,6 +18,7 @@ import { EMPTY_MATRIX, RowIndexService } from '../shared';
 import { makeRenderableMatrix, TileMatrix } from '../renderable-model';
 import { diagramAnimations } from './diagram.animations';
 import { diagramRowTracker } from './diagram-row-tracker';
+import { DragTileService } from '../drag-tiles';
 
 @Component({
   // temporal name until old diagram implementation is removed
@@ -39,7 +40,10 @@ export class DiagramComponent implements OnChanges, OnDestroy {
 
   trackRowBy: TrackByFunction<Tile[]>;
 
-  constructor(private rowIndexService: RowIndexService) {
+  constructor(
+    private rowIndexService: RowIndexService,
+    private dragService: DragTileService
+  ) {
     this.trackRowBy = diagramRowTracker(this);
   }
 
@@ -66,8 +70,15 @@ export class DiagramComponent implements OnChanges, OnDestroy {
       // matrix is reversed to make sure html stack order always goes from bottom to top
       // i.e. top rows are rendered in front of bottom rows, this ensures branches don't display on top of the tiles above
       this.tileMatrix = tileMatrix.reverse();
+      this.updateRowParents();
     } else if (!this.isReadOnly) {
       this.tileMatrix = EMPTY_MATRIX;
     }
   }
+
+  private updateRowParents() {
+    this.dragService.updateRowParents(this.tileMatrix, taskId =>
+      this.rowIndexService.getRowIndexForTask(taskId)
+    );
+  }
 }