From 9b421705543d1ee344aeeb23270e5325462dad51 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 20 Oct 2026 07:15:18 -0700
Subject: [PATCH] Make the floating controls movable

---
 .../ocr-template-editor.component.html        | 25 +++++++++++--------
 .../ocr-template-editor.component.scss        |  4 +++
 .../ocr-template-editor.component.ts          |  2 ++
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html
index 6c6f310d9..1dca9d4c9 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html
@@ -225,7 +225,7 @@
           }
         </div>
       }
-      <div class="position-relative">
+      <div #previewContainer class="position-relative">
         <div class="zone-preview-scroll overflow-auto border" [attr.aria-busy]="previewStatus === 'loading'">
           @if (previewStatus === 'error') {
             <div class="py-5 px-3 text-center" role="alert">
@@ -323,15 +323,20 @@
           }
         </div>
         @if (previewDocId && previewStatus !== 'error') {
-          <div class="position-absolute bottom-0 start-50 translate-middle-x z-1 mb-3 d-flex gap-2 p-1 bg-body border rounded shadow">
-            <div class="input-group input-group-sm w-auto flex-nowrap">
-              <input class="form-control flex-grow-0 preview-page-input" type="number" min="1" [max]="previewPageCount" [(ngModel)]="previewPageDisplay" [disabled]="previewStatus === 'loading'" aria-label="Page" i18n-aria-label />
-              <span class="input-group-text" i18n>of {{ previewPageCount ?? '?' }}</span>
-            </div>
-            <div class="input-group input-group-sm w-auto flex-nowrap" role="group" aria-label="Zoom" i18n-aria-label>
-              <button type="button" class="btn btn-outline-secondary" aria-label="Zoom out" i18n-aria-label [disabled]="!imageLoaded || zoom <= 0.5" (click)="zoomOut()"><i-bs name="dash"></i-bs></button>
-              <button type="button" class="btn btn-outline-secondary preview-zoom" title="Reset zoom" i18n-title [disabled]="!imageLoaded" (click)="resetZoom()">{{ zoom | percent: '1.0-0' }}</button>
-              <button type="button" class="btn btn-outline-secondary" aria-label="Zoom in" i18n-aria-label [disabled]="!imageLoaded || zoom >= 4" (click)="zoomIn()"><i-bs name="plus"></i-bs></button>
+          <div class="position-absolute bottom-0 start-50 translate-middle-x z-1 mb-3">
+            <div cdkDrag [cdkDragBoundary]="previewContainer" class="d-flex gap-2 p-1 bg-body border rounded shadow">
+              <span cdkDragHandle class="d-flex align-items-center text-secondary" title="Move preview controls" i18n-title aria-label="Move preview controls" i18n-aria-label>
+                <i-bs name="grip-vertical"></i-bs>
+              </span>
+              <div class="input-group input-group-sm w-auto flex-nowrap">
+                <input class="form-control flex-grow-0 preview-page-input" type="number" min="1" [max]="previewPageCount" [(ngModel)]="previewPageDisplay" [disabled]="previewStatus === 'loading'" aria-label="Page" i18n-aria-label />
+                <span class="input-group-text" i18n>of {{ previewPageCount ?? '?' }}</span>
+              </div>
+              <div class="input-group input-group-sm w-auto flex-nowrap" role="group" aria-label="Zoom" i18n-aria-label>
+                <button type="button" class="btn btn-outline-secondary" aria-label="Zoom out" i18n-aria-label [disabled]="!imageLoaded || zoom <= 0.5" (click)="zoomOut()"><i-bs name="dash"></i-bs></button>
+                <button type="button" class="btn btn-outline-secondary preview-zoom" title="Reset zoom" i18n-title [disabled]="!imageLoaded" (click)="resetZoom()">{{ zoom | percent: '1.0-0' }}</button>
+                <button type="button" class="btn btn-outline-secondary" aria-label="Zoom in" i18n-aria-label [disabled]="!imageLoaded || zoom >= 4" (click)="zoomIn()"><i-bs name="plus"></i-bs></button>
+              </div>
             </div>
           </div>
         }
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss
index 51bc226de..0cd025772 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss
@@ -14,6 +14,10 @@
   min-width: 4rem;
 }
 
+.cdk-drag-handle {
+  cursor: move;
+}
+
 // The typeahead popup is appended to body.
 ::ng-deep .ocr-template-document-results {
   max-height: min(24rem, 60vh);
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts
index ba70a0e50..27a3df2bf 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts
@@ -1,3 +1,4 @@
+import { DragDropModule } from '@angular/cdk/drag-drop'
 import { CommonModule } from '@angular/common'
 import {
   ChangeDetectorRef,
@@ -126,6 +127,7 @@ const RESIZE_CURSOR: Record<ResizeHandle, string> = {
   selector: 'pngx-ocr-template-editor',
   standalone: true,
   imports: [
+    DragDropModule,
     PageHeaderComponent,
     NumberComponent,
     TextComponent,