desktop v0.7.10

chinonso098 · Nov 19, 2023 · 35896dd · 35896dd
1 parent 1c1029e
commit 35896dd
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 79 deletions.
diff --git a/src/app/system-apps/desktop/desktop.component.html b/src/app/system-apps/desktop/desktop.component.html
@@ -1,4 +1,4 @@
- <main id="vanta" class="main-desktop" (contextmenu)="showContextMenu($event)" (click)="hideContextMenu()">
+ <main id="vanta" class="main-desktop">   <!--(contextmenu)="showContextMenu($event)" (click)="hideContextMenu()" -->
     <div class="vertical-menu" [style]="cntxtMenuStyle" #cntxtMenu>
 
         <div class="vertical-sub-menu" >

diff --git a/src/app/system-apps/filemanager/filemanager.component.css b/src/app/system-apps/filemanager/filemanager.component.css
@@ -1,20 +1,23 @@
-li{
-    display: flex;
-    justify-content: center;
-    padding: 2px;
-    height: min-content;
-    z-index: 1;
-}
 
-ol{
+  ol{
     /* column-gap: 1px; */
     display: grid;
     grid-auto-flow: column;
     grid-template-columns:  repeat(auto-fill,90px);
     grid-template-rows: repeat(auto-fill,70px);
     height: calc(100% - 40px);
+    width: 100%;
     padding: 5px 0 ;
-    row-gap: 22px;
+    row-gap: 20px;
+}
+
+
+li{
+    display: flex;
+    justify-content: center;
+    padding: 2px;
+    height: min-content;
+    z-index: 1;
 }
 
 
@@ -60,67 +63,6 @@ img{
 
 button{
     background-color: transparent;
-    width: 100%;
+    width: 90px;
     height: 70px; 
 }
-
-
-.icon-vertical-menu {
-    position: absolute;
-    width: 250px;
-    box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
-    z-index: 2;
-}
-
-.icon-vertical-menu-item {
-    height: fit-content;
-    padding: 4px 0;
-    background-color: #eee;
-    display: inline-flex;
-    width: 100%;
-    z-index: 2;
-   /*  transition: background-color 0.3s ease; Add a transition for background-color */
-}
-
-.icon-vertical-menu .icon-vertical-menu-item:hover {
-    background-color: #ccc;
-}
-
-.line-container {
-    max-height: 1px;
-    background-color: #eee;
-}
-
-.line {
-    border: 1px solid #afadad;
-    margin: 0 8px;
-}
-
-span{
-    display: block;
-}
-
-span.head{
-    max-width: 25%;
-    padding-left: 4px;
-}
-
-span.mid{
-    min-width: 50%;
-    padding: 0 4px;
-    color: black; /* Black text color */
-    text-align: left;
-    font-size: small;
-}
-
-span.tail{
-    max-width: 25%;
-    padding-left: 78px;
-}
-
-.figure-cntx-menu{
-    align-items: center;
-    display:inline-flex;
-    min-width: 18px;
-    min-width: 18px;
-}
diff --git a/src/app/system-apps/filemanager/filemanager.component.html b/src/app/system-apps/filemanager/filemanager.component.html
@@ -1,6 +1,10 @@
-<ol (dragover)="onDragOver($event)"  (drop)="onDrop($event)" (click)="hideIconContextMenu()">
-    <li *ngFor="let file of files ">
-        <button fileMngrHighlight (dblclick)="runProcess(file)"  (contextmenu)="showIconContextMenu($event)" (click)="hideIconContextMenu()">
+<ol (dragover)="onDragOver($event)"  (drop)="onDrop($event)" (click)="hideIconContextMenu()" #myBounds>
+    <li *ngFor="let file of files; let i = index">
+        <!-- (contextmenu)="showIconContextMenu($event, file)" (click)="hideIconContextMenu()" -->
+        <button fileMngrHighlight (dblclick)="runProcess(file)"  
+        ngDraggable [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
+        (stopped)="onDragEnd($event,$event)" (started)="onDragStart($event)"
+        id="iconBtn{{i}}">
             <figure>
                 <img [src]="file.getIcon | safeResourceUrl" [alt]="file.getFileName" />
                 <figcaption>
@@ -40,4 +44,3 @@
     </div>
 </div>
 </ol>
-
diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnInit, OnDestroy, EventEmitter, Output } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, OnDestroy, EventEmitter, Output, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { FileService } from 'src/app/shared/system-service/file.service';
 import { ProcessIDService } from 'src/app/shared/system-service/process.id.service';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
@@ -15,6 +15,10 @@ import { TriggerProcessService } from 'src/app/shared/system-service/trigger.pro
   styleUrls: ['./filemanager.component.css']
 })
 export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
+
+  @ViewChild('myBounds', {static: true}) myBounds!: ElementRef;
+  @ViewChild('iconBtn', {static: false}) iconBtn!: ElementRef;
+
 
   @Input() folderPath = '';  
   @Output() updateExplorerIconAndName = new EventEmitter<FileInfo>();
@@ -26,6 +30,8 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   private _dirFilesUpdatedSub!: Subscription;
   private _triggerProcessService:TriggerProcessService;
 
+  private _renderer:Renderer2;
+
 
   showCntxtMenu = false;
   iconCntxtMenuStyle:Record<string, unknown> = {};
@@ -39,12 +45,17 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   directory ='/osdrive/desktop';
   files:FileInfo[] = [];
 
+  gridSize = 0;
+  autoAlign = false;
+  autoArrange = false;
+
 
-  constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService) { 
+  constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService,renderer: Renderer2) { 
     this._processIdService = processIdService;
     this._runningProcessService = runningProcessService;
     this._fileService = fileInfoService;
     this._triggerProcessService = triggerProcessService;
+    this._renderer = renderer;
 
     this.processId = this._processIdService.getNewProcessId();
     this._runningProcessService.addProcess(this.getComponentDetail());
@@ -127,7 +138,7 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   }
 
 
-  showIconContextMenu(evt:MouseEvent):void{
+  showIconContextMenu(evt:MouseEvent, file:FileInfo):void{
     this._runningProcessService.responseToEventCount++;
     const evtRespCount = this._runningProcessService.responseToEventCount;
 
@@ -154,6 +165,72 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  onDragStart(evt:any):void{
+    // const rect =  this.myBounds.nativeElement.getBoundingClientRect(); 
+    // console.log('start:',evt.id )
+
+
+    // const btnTransform = window.getComputedStyle(evt)
+    // const matrix = new DOMMatrixReadOnly(btnTransform.transform)
+
+    // const transform = {
+    //   translateX: matrix.m41,
+    //   translateY: matrix.m42
+    // }
+
+    // // const transX = matrix.m41;
+    // // const transY = matrix.m42;
+
+
+    // console.log('start-transform:', transform)
+    // console.log('rect:',rect )
+  }
+
+  onDragEnd(evt:any, evt1:MouseEvent):void{
+
+    const btnTransform = window.getComputedStyle(evt)
+    const matrix = new DOMMatrixReadOnly(btnTransform.transform)
+    let x = 0;
+    let y = 0;
+
+    const transform = {
+      translateX: matrix.m41,
+      translateY: matrix.m42
+    }
+
+    console.log('clientX:',evt.getBoundingClientRect());
+
+    console.log('end-transform:', transform)
+    const xRemainder = (transform.translateX % 90);
+    const yRemainder = (transform.translateY % 90);
+
+    // 45 is 50% of 90. so i round up to 90 else round down  to 0
+    if(xRemainder > 45){ 
+      const diff = 90 - xRemainder;
+      x = transform.translateX + diff;
+      console.log('x >45:', x)
+    }else{
+      x = transform.translateX - xRemainder; 
+      console.log('x <45:', x)
+    }
+
+    if(yRemainder > 45){ 
+      const diff = 90 - yRemainder;
+      y = transform.translateY + diff;
+      console.log('y >45:', y)
+    }else{
+      y = transform.translateY - yRemainder; 
+      console.log('y <45:', y)
+    }
+
+    const btnElement = document.getElementById(evt.id) as HTMLElement;
+    if(btnElement){
+      console.log('btnElement:',btnElement)
+      console.log('set button to:',`translate(${x}px, ${y}px)`)
+      btnElement.style.transform = `translate(${x}px, ${y}px)`;
+    }
+  }
+
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type);
   }