Update drag handling: use topbar for dragging, add cursor styles, and exclude certain elements from drag initiation

This commit is contained in:
Dariusz L
2026-05-28 15:12:00 +02:00
parent 6124005f6c
commit b5beace334
3 changed files with 34 additions and 6 deletions
+1
View File
@@ -2029,6 +2029,7 @@
--ml-tab-corner-size: 15px;
--ml-tab-hover-bg: rgba(255,255,255,0.075);
--ml-tab-separator: rgba(255,255,255,0.125);
cursor: default;
}
.ml-tab {
display: inline-flex;
+10
View File
@@ -60,6 +60,12 @@
padding: 6px 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.38);
background: #1f1f1f;
cursor: grab;
user-select: none;
}
.ml-dialog-topbar.ml-is-dragging {
cursor: grabbing;
}
.ml-dialog-brand,
@@ -101,6 +107,10 @@
box-sizing: border-box;
}
.ml-dialog-topbar.ml-is-dragging #model-linker-drag-handle {
cursor: grabbing;
}
#model-linker-modal .ml-window-btn {
display: flex;
align-items: center;
+23 -6
View File
@@ -3803,25 +3803,42 @@ class LinkerManagerDialog extends ComfyDialog {
}
}
// Attach drag handle event listeners
// Attach topbar drag listeners while preserving the handle-based viewport clamp.
attachDragHandleIfNeeded() {
if (this._dragHandleAttached) return;
const handle = document.getElementById('model-linker-drag-handle');
if (!handle) return;
const topbar = this.element?.querySelector('.ml-dialog-topbar');
if (!handle || !topbar) return;
const onMouseDown = (e) => {
if (this.fullscreen) return; // no drag in fullscreen
handle.style.cursor = 'grabbing';
if (e.button !== 0 || this.isTopbarDragExcluded(e.target)) return;
topbar.classList.add('ml-is-dragging');
this.startDrag(e);
};
const onMouseUp = () => { handle.style.cursor = 'grab'; };
const onMouseUp = () => { topbar.classList.remove('ml-is-dragging'); };
handle.addEventListener('mousedown', onMouseDown);
document.addEventListener('mouseup', onMouseUp, { once: true });
topbar.addEventListener('mousedown', onMouseDown);
document.addEventListener('mouseup', onMouseUp);
this._dragHandleAttached = true;
}
isTopbarDragExcluded(target) {
if (!(target instanceof Element)) return false;
return !!target.closest([
'.ml-tabs',
'.ml-dialog-controls',
'button',
'a',
'input',
'select',
'textarea',
'[role="button"]',
'[data-ml-no-drag]'
].join(','));
}
close() {
this._hidePreview?.();