drag n drop still a work in progress

chinonso098 · Oct 7, 2024 · 030f4f1 · 030f4f1
1 parent 86aef4c
commit 030f4f1
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 13 deletions.
diff --git a/src/app/system-apps/filemanager/filemanager.component.css b/src/app/system-apps/filemanager/filemanager.component.css
@@ -141,3 +141,12 @@ input::selection{
     left: 20px;
     transform: rotate(180deg);
 }
+
+
+.clone-container{
+    width: fit-content;
+    height: fit-content;
+    background-color: #ccc;
+    z-index:  5;
+    position: absolute;
+}
diff --git a/src/app/system-apps/filemanager/filemanager.component.html b/src/app/system-apps/filemanager/filemanager.component.html
@@ -1,11 +1,11 @@
  <ol (dragover)="onDragOver($event)"  (drop)="onDrop($event)" (click)="hideIconContextMenu(name)"  (click)="handleIconHighLightState()"  #myBounds> 
-    <li *ngFor="let file of files; let i = index" id="liIconBtn{{i}}">
+    <li *ngFor="let file of files; let i = index">
         <button (dblclick)="runProcess(file)" (mouseenter)="onMouseEnter(i)" (mouseleave)="onMouseLeave(i)"
-        ngDraggable [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
+        [ngDraggable]="isDraggable" [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
         (stopped)="onDragEnd($event)" (started)="onDragStart($event, i)"
-        (contextmenu)="onShowIconContextMenu($event, file, i)" (click)="onBtnClick(i)"
+        (contextmenu)="onShowIconContextMenu($event, file, i)" (click)="onBtnClick($event, i)"
         id="iconBtn{{i}}"  [style]="btnStyle">
-            <figure>
+            <figure   id="filemngr_fig{{i}}">
                 <img [src]="file.getIconPath | safeResourceUrl" [alt]="file.getFileName"  [style]="iconSizeStyle"/>
                 <ng-container *ngIf="file.getIsShortCut">
                     <img class="shortcut-img" [src]="'osdrive/Cheetah/System/Imageres/shortcut.png'"  id="shortCut{{i}}"/>
@@ -29,7 +29,15 @@
         </div>
     </div>
 
+    <div  class="clone-container"  id="filemngr_clone_cntnr"> </div>
+
     <ng-container  *ngIf="showCntxtMenu">
         <cos-menu [generalMenu]="menuData" [style]="iconCntxtMenuStyle" [menuType]="fileExplrMngrMenuOption" [menuOrder]="menuOrder"> </cos-menu>
     </ng-container>
 </ol>
+
+
+<!--
+    This is the method for drag n drop
+ (dragstart)="onDragStart($event, i)" 
+ -->
diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -53,6 +53,8 @@ export class FileManagerComponent implements BaseComponent, OnInit, AfterViewIni
   private isBtnClickEvt= false;
   private isHideCntxtMenuEvt= false;
 
+  isDraggable = true;
+
   private selectedFile!:FileInfo;
   private propertiesViewFile!:FileInfo
   private selectedElementId = -1;
@@ -61,8 +63,6 @@ export class FileManagerComponent implements BaseComponent, OnInit, AfterViewIni
   private btnClickCnt = 0;
   private renameFileTriggerCnt = 0; 
 
-
-
   iconCntxtMenuStyle:Record<string, unknown> = {};
   iconSizeStyle:Record<string, unknown> = {};
   btnStyle:Record<string, unknown> = {};
@@ -220,9 +220,10 @@ export class FileManagerComponent implements BaseComponent, OnInit, AfterViewIni
     // }
   }
 
-  onBtnClick(id:number):void{
+  onBtnClick(evt:MouseEvent, id:number):void{
     this.doBtnClickThings(id);
     this.setBtnStyle(id, true);
+
   }
 
   onTriggerRunProcess():void{
@@ -365,15 +366,48 @@ export class FileManagerComponent implements BaseComponent, OnInit, AfterViewIni
     console.log('TODO:FileManagerComponent, Upgrade the basic state tracking/management logic:',transform);
   }
 
-  onDragStart(evt:any, i:number):void{
+  onDragStart(evt:DragEvent, i:number):void{
+    //this.isDraggable = true
     const btnIcon = document.getElementById(`liIconBtn${i}`) as HTMLElement
-    console.log('DragStart:',btnIcon);
-    if(btnIcon){
-      // btnIcon.style.position = 'absolute';
-      btnIcon.style.zIndex = '4';
+    // console.log('DragStart:',btnIcon);
+    // if(btnIcon){
+    //   // btnIcon.style.position = 'absolute';
+    //   btnIcon.style.zIndex = '4';
+    // }
+    // console.log('DragStart:',btnIcon);
+  }
+
+  onDragStart_Off(evt:DragEvent, i: number): void {
+
+    /**
+     * This method is mimick the functionality of Windows should a user attempt to drag n drop content from the 
+     * desktop to the FileExplorer, or another application that support DnD
+     * 
+     * The issue at the moment, is that it collide with the angular2-draggable functionailty. 
+     * for the time being, it is Off
+     */
+
+    const iconA = document.getElementById(`filemngr_fig${i}`) as HTMLElement;
+
+    // Get the cloneIcon container
+    const elementId = 'filemngr_clone_cntnr';
+    const cloneIcon = document.getElementById(elementId);
+
+    if(cloneIcon){
+      // Clear any previous content in the clone container
+      cloneIcon.innerHTML = '';
+      cloneIcon.appendChild(iconA.cloneNode(true));
+
+      cloneIcon.style.left = '-9999px';  // Move it out of view initially
+      cloneIcon.style.opacity = '0.2';
+
+      // Set the cloned icon as the drag image
+      if (evt.dataTransfer) {
+        evt.dataTransfer.setDragImage(cloneIcon, 0, 0);  // Offset positions for the drag image
+      }
     }
-    console.log('DragStart:',btnIcon);
   }
+
 
   onMouseEnter(id:number):void{
     this.setBtnStyle(id, true);