[desktop]: Support drag and drop calibration frame to other group

tiagohm · Apr 14, 2024 · d443a51 · d443a51
1 parent 2eba977
commit d443a51
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/desktop/src/app/calibration/calibration.component.html b/desktop/src/app/calibration/calibration.component.html
@@ -4,7 +4,9 @@
             <p-button styleClass="p-button-sm" label="New group" icon="mdi mdi-plus" (onClick)="showNewGroupDialogForAdd()" />
         </div>
         <div class="col-12">
-            <p-tree class="w-full" styleClass="border-0 p-0" [value]="frames" emptyMessage="No frames found">
+            <p-tree class="w-full" styleClass="border-0 p-0" [value]="frames" emptyMessage="No frames found"
+                    [draggableNodes]="true" [droppableNodes]="true" draggableScope="self" droppableScope="self"
+                    [validateDrop]="true" (onNodeDrop)="frameDropped($event)">
                 <ng-template let-node pTemplate="default">
                     <div class="w-full flex align-items-center justify-content-between gap-2">
                         @if (node.data.type === 'NAME') {

diff --git a/desktop/src/app/calibration/calibration.component.ts b/desktop/src/app/calibration/calibration.component.ts
@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, HostListener, OnDestroy } from '@angular/core'
 import { dirname } from 'path'
-import { TreeNode } from 'primeng/api'
+import { TreeDragDropService, TreeNode } from 'primeng/api'
+import { TreeNodeDropEvent } from 'primeng/tree'
 import { ApiService } from '../../shared/services/api.service'
 import { BrowserWindowService } from '../../shared/services/browser-window.service'
 import { ElectronService } from '../../shared/services/electron.service'
@@ -25,6 +26,7 @@ export type TreeNodeData =
     selector: 'app-calibration',
     templateUrl: './calibration.component.html',
     styleUrls: ['./calibration.component.scss'],
+    providers: [TreeDragDropService],
 })
 export class CalibrationComponent implements AfterViewInit, OnDestroy {
 
@@ -52,7 +54,9 @@ export class CalibrationComponent implements AfterViewInit, OnDestroy {
     ngOnDestroy() { }
 
     private makeTreeNode(key: string, label: string, data: TreeNodeData, parent?: CalibrationNode): CalibrationNode {
-        return { key, label, data, children: [], parent }
+        const draggable = data.type === 'FRAME'
+        const droppable = data.type === 'NAME'
+        return { key, label, data, children: [], parent, draggable, droppable }
     }
 
     addGroup(name: string) {
@@ -247,4 +251,17 @@ export class CalibrationComponent implements AfterViewInit, OnDestroy {
     editGroupName() {
         this.showNewGroupDialog = false
     }
+
+    async frameDropped(event: TreeNodeDropEvent) {
+        const dragNode = event.dragNode as CalibrationNode
+        const dropNode = event.dropNode as CalibrationNode
+
+        if (dragNode.data.type === 'FRAME' && dropNode.data.type === 'NAME' &&
+            dragNode.data.data.name !== dropNode.data.data
+        ) {
+            dragNode.data.data.name = dropNode.data.data
+            await this.api.editCalibrationFrame(dragNode.data.data)
+            this.load()
+        }
+    }
 }