pinokiod 3.92.0 → 3.93.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.92.0",
+  "version": "3.93.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/common.js

@@ -105,6 +105,11 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
     this.overlayHidden = false;
     this.floatingControls = null;
     this.floatingStatus = null;
+    this.floatingDrag = null;
+    this.onFloatingPointerDown = this.startFloatingDrag.bind(this);
+    this.onFloatingPointerMove = this.handleFloatingPointerMove.bind(this);
+    this.onFloatingPointerUp = (event) => this.stopFloatingDrag(event);
+    this.onFloatingWindowResize = this.handleFloatingResize.bind(this);
     this.resolveFn = null;
     this.rejectFn = null;
     this.colorDefault = '#ddd';
@@ -991,7 +996,7 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
       color:#fff; padding:10px 14px; border-radius:12px;
       box-shadow:0 8px 24px rgba(0,0,0,0.35);
       font-size:14px; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
-      pointer-events:auto;
+      pointer-events:auto; cursor:grab; touch-action:none;
     `;
 
     const status = document.createElement('div');
@@ -1012,11 +1017,25 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
 
     controls.append(status, stopBtn);
     document.body.appendChild(controls);
+    const rect = controls.getBoundingClientRect();
+    const initial = this.clampFloatingPosition(rect);
+    controls.style.left = `${initial.left}px`;
+    controls.style.top = `${initial.top}px`;
+    controls.style.right = 'auto';
+    controls.style.bottom = 'auto';
     this.floatingControls = controls;
     this.floatingStatus = status;
+
+    controls.addEventListener('pointerdown', this.onFloatingPointerDown);
+    window.addEventListener('resize', this.onFloatingWindowResize, { passive: true });
   }
 
   removeFloatingControls() {
+    this.stopFloatingDrag();
+    if (this.floatingControls) {
+      this.floatingControls.removeEventListener('pointerdown', this.onFloatingPointerDown);
+    }
+    window.removeEventListener('resize', this.onFloatingWindowResize);
     if (this.floatingControls && this.floatingControls.parentNode) {
       this.floatingControls.parentNode.removeChild(this.floatingControls);
     }
@@ -1024,6 +1043,90 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
     this.floatingStatus = null;
   }
 
+  clampFloatingPosition(rect) {
+    const margin = 8;
+    const maxLeft = Math.max(margin, window.innerWidth - rect.width - margin);
+    const maxTop = Math.max(margin, window.innerHeight - rect.height - margin);
+    const left = Math.min(Math.max(rect.left, margin), maxLeft);
+    const top = Math.min(Math.max(rect.top, margin), maxTop);
+    return { left, top };
+  }
+
+  startFloatingDrag(event) {
+    if (!this.floatingControls || event.button !== 0) return;
+    if (event.target && event.target.closest('button')) return;
+    const rect = this.floatingControls.getBoundingClientRect();
+    const { left, top } = this.clampFloatingPosition(rect);
+    this.floatingControls.style.left = `${left}px`;
+    this.floatingControls.style.top = `${top}px`;
+    this.floatingControls.style.right = 'auto';
+    this.floatingControls.style.bottom = 'auto';
+
+    this.floatingDrag = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      baseLeft: left,
+      baseTop: top
+    };
+
+    if (this.floatingControls.setPointerCapture) {
+      try {
+        this.floatingControls.setPointerCapture(event.pointerId);
+      } catch (_) {
+        // Ignore inability to capture pointer (e.g., already captured).
+      }
+    }
+    this.floatingControls.style.cursor = 'grabbing';
+    window.addEventListener('pointermove', this.onFloatingPointerMove);
+    window.addEventListener('pointerup', this.onFloatingPointerUp);
+    window.addEventListener('pointercancel', this.onFloatingPointerUp);
+  }
+
+  handleFloatingPointerMove(event) {
+    if (!this.floatingDrag || event.pointerId !== this.floatingDrag.pointerId || !this.floatingControls) return;
+    const dx = event.clientX - this.floatingDrag.startX;
+    const dy = event.clientY - this.floatingDrag.startY;
+    const proposed = {
+      left: this.floatingDrag.baseLeft + dx,
+      top: this.floatingDrag.baseTop + dy,
+      width: this.floatingControls.offsetWidth,
+      height: this.floatingControls.offsetHeight
+    };
+    const clamped = this.clampFloatingPosition(proposed);
+    this.floatingControls.style.left = `${clamped.left}px`;
+    this.floatingControls.style.top = `${clamped.top}px`;
+  }
+
+  stopFloatingDrag(event) {
+    if (!this.floatingDrag) return;
+    if (event && this.floatingDrag.pointerId !== event.pointerId) return;
+    window.removeEventListener('pointermove', this.onFloatingPointerMove);
+    window.removeEventListener('pointerup', this.onFloatingPointerUp);
+    window.removeEventListener('pointercancel', this.onFloatingPointerUp);
+    if (this.floatingControls && this.floatingControls.releasePointerCapture && this.floatingDrag.pointerId != null) {
+      try {
+        this.floatingControls.releasePointerCapture(this.floatingDrag.pointerId);
+      } catch (_) {
+        // Ignore release errors (e.g., pointer already released).
+      }
+    }
+    if (this.floatingControls) {
+      this.floatingControls.style.cursor = 'grab';
+    }
+    this.floatingDrag = null;
+  }
+
+  handleFloatingResize() {
+    if (!this.floatingControls) return;
+    const rect = this.floatingControls.getBoundingClientRect();
+    const clamped = this.clampFloatingPosition(rect);
+    this.floatingControls.style.left = `${clamped.left}px`;
+    this.floatingControls.style.top = `${clamped.top}px`;
+    this.floatingControls.style.right = 'auto';
+    this.floatingControls.style.bottom = 'auto';
+  }
+
   formatDuration(ms) {
     const totalSeconds = Math.floor(ms / 1000);
     const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');