kanban board without first-drag jitters, just Firefox jitters

Author: cormacrelf

packages/angular-skyhook-card-list/src/card-list.component.ts

@@ -44,7 +44,8 @@ import {
     </ng-template>
 
     <ng-container *ngLet="placeholderIndex$|async as phi">
-    <ng-container *ngLet="cardOver$|async as cardOver">
+    <ng-container *ngLet="placeholderOver$|async as cardOver">
+    <ng-container *ngLet="selfOver$|async as selfOver">
 
     <div [dropTarget]="target" [dropTargetType]="type" [class]="containerClass"
          [ngStyle]="{ display: 'flex', flexDirection: horizontal ? 'row' : 'column' }">
@@ -56,22 +57,23 @@ import {
             [type]="type"
             [listId]="listId"
             [horizontal]="horizontal"
-            (hover)="onHover($event)"
-            (begin)="begin($event)"
+            (hover)="hoverOnCard($event)"
+            (begin)="cardBeganDragging($event)"
             [template]="cardRendererTemplates.first"
             [ngStyle]="{ order: i >= phi ? i + 1 : i }"
             >
         </skyhook-card-renderer>
 
-        <ng-container *ngIf="cardOver">
-            <div *ngLet="item$|async as item" [ngStyle]="{ order: phi }">
+        <ng-container *ngIf="selfOver && (cardOver || isEmpty)">
+            <div *ngIf="item$|async as item" [ngStyle]="{ order: phi }">
                 <ng-container *ngTemplateOutlet="placeholderTemplates.first; context: { $implicit: item }">
                 </ng-container>
             </div>
         </ng-container>
 
     </div>
 
+    </ng-container>
     </ng-container>
     </ng-container>
     `
@@ -80,7 +82,8 @@ export class CardListComponent implements OnDestroy, AfterContentInit {
     @Input() listId: any = Math.random();
     @Input() horizontal = false;
 
-    @Input() cards: Data[];
+    @Input() cards: Array<Data> | Iterable<Data>;
+
     @Output() dropped = new EventEmitter<DropEvent>();
 
     @Input() type = ItemTypes.CARD;
@@ -95,22 +98,27 @@ export class CardListComponent implements OnDestroy, AfterContentInit {
         drop: monitor => {
             const drag = monitor.getItem() as DraggedItem;
             this.dropEmit$.next(drag);
-            this.placeholder$.next({ index: 0, size: { width: 0, height: 0 } });
+            this.placeholder$.next({ over: false, index: 0, size: { width: 0, height: 0 } });
         }
     });
 
-    cardOver$ = this.target.listen(m => m.isOver({ shallow: false }));
+    selfOver$ = this.target.listen(m => m.isOver({ shallow: false }));
     item$ = this.target.listen(m => m.getItem());
 
     dropEmit$ = new Subject<DraggedItem>();
     placeholder$ = new BehaviorSubject({
+        over: false,
         index: 0,
         size: { width: 0, height: 0 }
     });
     placeholderIndex$: Observable<number> = this.placeholder$.pipe(
         map(p => p.index),
         distinctUntilChanged()
     );
+    placeholderOver$: Observable<boolean> = this.placeholder$.pipe(
+        map(p => p.over),
+        distinctUntilChanged()
+    );
 
     constructor(private dnd: SkyhookDndService) {
         this.dropEmit$
@@ -140,16 +148,17 @@ export class CardListComponent implements OnDestroy, AfterContentInit {
             });
     }
 
-    private begin({ id, index, size }: BeginEvent) {
-        this.placeholder$.next({ index, size });
+    private cardBeganDragging({ id, index, size }: BeginEvent) {
+        this.placeholder$.next({ index, size, over: true });
     }
 
-    private onHover(evt: HoverEvent) {
+    private hoverOnCard(evt: HoverEvent) {
         let dim = this.horizontal
             ? evt.hover.size.width
             : evt.hover.size.height;
         const targetCentre = evt.hover.start + dim / 2.0;
         this.placeholder$.next({
+            over: true,
             index:
                 evt.mouse < targetCentre
                     ? evt.hover.index
@@ -158,6 +167,21 @@ export class CardListComponent implements OnDestroy, AfterContentInit {
         });
     }
 
+    /** @ignore
+     * Returns isEmpty, whether it's an immutable List or an array
+     */
+    private get isEmpty() {
+        if (typeof this.cards["isEmpty"] === 'function') {
+            // it's immutable
+            return this.cards["isEmpty"]();
+        } else if (typeof this.cards["length"] === 'number') {
+            // it's an array
+            return (this.cards as Array<Data>).length === 0;
+        } else {
+            return false;
+        }
+    }
+
     ngAfterContentInit() {
         if (this.placeholderTemplates.length !== 1) {
             throw new Error("must have exactly one cardPlaceholder template");

packages/angular-skyhook-card-list/src/card-renderer.component.ts

@@ -33,17 +33,6 @@ import { BehaviorSubject, Subscription } from "rxjs";
 import { Size } from "./size";
 import { Observable } from "rxjs";
 
-// for html5 dnd
-let emptyImage: HTMLImageElement;
-function getEmptyImage() {
-    if (!emptyImage) {
-        emptyImage = new Image();
-        emptyImage.src =
-            "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-    }
-    return emptyImage;
-}
-
 // TODO: render target box at full width (vertical) or full height (horiz)
 
 @Component({
@@ -134,7 +123,7 @@ export class CardRendererComponent implements OnInit, OnDestroy {
     constructor(
         private dnd: SkyhookDndService,
         private cdr: ChangeDetectorRef
-    ) {}
+    ) { }
 
     private rect() {
         const rect = (this.sizingDiv
@@ -170,8 +159,6 @@ export class CardRendererComponent implements OnInit, OnDestroy {
             this.isDragging = d;
             this.cdr.markForCheck();
         });
-        const img = getEmptyImage() as HTMLImageElement;
-        this.source.connectDragPreview(img);
     }
 
     ngOnChanges() {

packages/examples/package.json

@@ -27,12 +27,9 @@
         "angular-skyhook-card-list": "^0.0.2",
         "angular-skyhook-multi-backend": "^1.0.3",
         "core-js": "^2.5.4",
-        "dnd-multi-backend": "^3.1.0",
         "faker": "^4.1.0",
         "immutability-helper": "^2.7.0",
-        "react-dnd-html5-backend": "^2.5.3",
         "react-dnd-mouse-backend": "^0.1.1",
-        "react-dnd-touch-backend": "^0.3.15",
         "rxjs": "^6.2.0",
         "zone.js": "^0.8.26"
     },
@@ -61,4 +58,4 @@
         "tslint": "~5.9.1",
         "typescript": "~2.7.2"
     }
-}
+}

packages/examples/src/app/kanban/container.component.html

@@ -3,19 +3,23 @@ import { CommonModule } from "@angular/common";
 import { UtilityModule } from "../utility.module";
 import { SkyhookDndModule } from "angular-skyhook";
 import { RouterModule } from "@angular/router";
+import { ReactiveFormsModule } from "@angular/forms";
 import { SkyhookMultiBackendModule } from "angular-skyhook-multi-backend";
+import { SkyhookCardListModule } from "angular-skyhook-card-list";
 
-import { KanbanContainerComponent } from "./container.component";
+import { KanbanBoardComponent } from "./kanban-board/kanban-board.component";
+import { KanbanListComponent } from "./kanban-list/kanban-list.component";
 import { KanbanCardComponent } from "./card.component";
-import { SkyhookCardListModule } from "angular-skyhook-card-list";
-import { ReactiveFormsModule } from "@angular/forms";
 import { AddCardComponent } from "./add-card.component";
+import { TrashCanComponent } from "./trash-can.component";
 
 @NgModule({
     declarations: [
-        KanbanContainerComponent,
+        KanbanBoardComponent,
+        KanbanListComponent,
         KanbanCardComponent,
-        AddCardComponent
+        AddCardComponent,
+        TrashCanComponent,
     ],
     imports: [
         CommonModule,
@@ -25,8 +29,8 @@ import { AddCardComponent } from "./add-card.component";
         SkyhookCardListModule,
         ReactiveFormsModule,
         RouterModule.forChild([
-            { path: "", component: KanbanContainerComponent }
+            { path: "", component: KanbanBoardComponent }
         ])
     ]
 })
-export class KanbanModule {}
+export class KanbanModule { }

packages/examples/src/app/kanban/container.component.scss

@@ -0,0 +1,4 @@
+export const ItemTypes = {
+    CARD: "KANBAN_CARD",
+    LIST: "KANBAN_LIST"
+};