Update drag handling: use topbar for dragging, add cursor styles, and exclude certain elements from drag initiation
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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
@@ -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?.();
|
||||
|
||||
Reference in New Issue
Block a user