up

Author: arnobl

src/app/history/history.component.css

@@ -6,7 +6,6 @@
   top: 0;
   left: 0;
   overflow-x: hidden;
-  background-color: #d6d6d6;
   border-right-style: solid;
   border-width: medium;
   overflow-y: auto;
@@ -39,7 +38,6 @@
   color: black;
   background-color: white;
   border-width: thin;
-  font-family: 'Josefin Sans', sans-serif;
   font-size: 20px;
 }
 
@@ -50,7 +48,6 @@
   color: black;
   background-color: white;
   border-width: thin;
-  font-family: 'Josefin Sans', sans-serif;
 }
 
 .history-button-inactive {
@@ -60,7 +57,6 @@
   color: lightgray;
   background-color: gray;
   border-width: thin;
-  font-family: 'Josefin Sans', sans-serif;
 }
 
 .header button:disabled {
@@ -70,6 +66,5 @@
   color: black;
   background-color: lightgray;
   border-width: thin;
-  font-family: 'Josefin Sans', sans-serif;
   font-size: 20px;
 }

src/app/tab-cards/tab-cards.component.css

@@ -16,6 +16,10 @@
   user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
 }
 
+.card-elt {
+  pointer-events: none;
+}
+
 .cards-block {
   min-width: 33%;
   min-height: 50px;

src/app/tab-cards/tab-cards.component.html

@@ -2,11 +2,11 @@
 
 <div class="cards-block" #cards1>
   <mat-card *ngFor="let card of dataService.cards1" class="cards">
-    <mat-card-header>
+    <mat-card-header class="card-elt">
       <mat-card-title>{{card.title}}</mat-card-title>
       <mat-card-subtitle>{{card.subTitle}}</mat-card-subtitle>
     </mat-card-header>
-    <mat-card-content>
+    <mat-card-content class="card-elt">
       <p>
         {{card.text}}
       </p>
@@ -16,11 +16,11 @@
 
 <div class="cards-block" #cards2>
   <mat-card *ngFor="let card of dataService.cards2" class="cards">
-    <mat-card-header>
+    <mat-card-header class="card-elt">
       <mat-card-title>{{card.title}}</mat-card-title>
       <mat-card-subtitle>{{card.subTitle}}</mat-card-subtitle>
     </mat-card-header>
-    <mat-card-content>
+    <mat-card-content class="card-elt">
       <p>
         {{card.text}}
       </p>

src/app/tab-cards/tab-cards.component.ts

@@ -33,7 +33,7 @@ export class TabCardsComponent extends TabContentComponent implements AfterViewI
     // it most of the time since this.bindings.undoHistory returns the same instance).
   }
 
-  ngAfterViewInit() {
+  public ngAfterViewInit(): void {
     // This binder creates the command that allows the user to move a card from one list to another
     this.bindings.dndBinder(true)
       .on(window.document.body)
@@ -43,55 +43,35 @@ export class TabCardsComponent extends TabContentComponent implements AfterViewI
         return new TransferArrayItem<CardData>([], [], -1, 0, 'Drag card');
       })
       // Checks if the user picked a valid card, and a new list for the card as a destination
-      .when(i => {
-        // A valid card has to be selected in order to create the command
-        const card = (i.src.target as Element).closest('mat-card');
-        return card !== null;
-      })
+      .when(i => (i.src.target as Element).classList.contains('mat-card'))
       .first((_, i) => {
-        this.card = (i.src.target as Element).closest('mat-card') as HTMLElement;
+        this.card = (i.src.target as HTMLElement);
         this.sourceIndex = Array.prototype.indexOf.call(this.card!.parentNode?.children ?? [], this.card);
         // Saves the initial state of the card's style to be able to restore it if the command can't be executed
         this.mementoX = this.card.style.left;
         this.mementoY = this.card.style.top;
         this.mementoCSSPosition = this.card.style.position;
-        // Edits the card's style to make it movable visually
-        this.card.style.width = String(this.card.clientWidth - 32) + 'px';
-        this.card.style.position = 'absolute';
+
+        this.card.style.position = 'relative';
         this.card.style.zIndex = '999';
+
       })
       .then((c, i) => {
-        // Retrieves the position of the mouse on the page (substract the sidebar size)
-        let x = i.tgt.pageX - 220;
-        let y = i.tgt.pageY;
-        // Prevents parts of the card from going outside of the document
-        if (i.tgt.pageX > window.innerWidth - this.card!.clientWidth - 10) {
-          x = x - this.card!.clientWidth - 5;
-        }
-        if (i.tgt.pageY > window.innerHeight - this.card!.clientHeight - 15) {
-          y = y - this.card!.clientHeight - 5;
-        }
-
-        // Moves the card visually
-        this.card!.style.left = String(x) + 'px';
-        this.card!.style.top = String(y) + 'px';
+        this.card!.style.left = `${i.diffClientX}px`;
+        this.card!.style.top = `${i.diffClientY}px`;
+        c.srcIndex = this.sourceIndex;
 
-        // Checks if the target selected is valid for the current card and makes the command executable if it is
-        const isCardPositionValid = (this.card!.parentNode === this.cards1.nativeElement ?
-          i.tgt.target === this.cards2.nativeElement : i.tgt.target === this.cards1.nativeElement);
-        if (!isCardPositionValid) {
-          c.srcIndex = -1;
+        if (this.insideRectangle(this.cards2.nativeElement.getBoundingClientRect(), i.tgt.clientX, i.tgt.clientY) &&
+          !this.insideRectangle(this.cards2.nativeElement.getBoundingClientRect(), i.src.clientX, i.src.clientY)) {
+          c.srcArray = this.dataService.cards1;
+          c.tgtArray = this.dataService.cards2;
         } else {
-          c.srcIndex = this.sourceIndex;
-
-          // Defines which array is the source and which one is the target
-          const fromSrcToTgt = i.tgt.target === this.cards2.nativeElement && i.src.target !== this.cards1.nativeElement;
-          if (fromSrcToTgt) {
-            c.srcArray = this.dataService.cards1;
-            c.tgtArray = this.dataService.cards2;
-          } else {
+          if (this.insideRectangle(this.cards1.nativeElement.getBoundingClientRect(), i.tgt.clientX, i.tgt.clientY) &&
+          !this.insideRectangle(this.cards1.nativeElement.getBoundingClientRect(), i.src.clientX, i.src.clientY)) {
             c.srcArray = this.dataService.cards2;
             c.tgtArray = this.dataService.cards1;
+          } else {
+            c.srcIndex = -1;
           }
         }
       })
@@ -108,4 +88,8 @@ export class TabCardsComponent extends TabContentComponent implements AfterViewI
       })
       .bind();
   }
+
+  private insideRectangle(rec: DOMRect, x: number, y: number): boolean {
+    return x >= rec.x && y >= rec.y && x <= (rec.x + rec.width) && y <= (rec.y + rec.height);
+  }
 }