diff --git a/web/model-manager.js b/web/model-manager.js index fd55c67..ea66954 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -97,35 +97,8 @@ class KeyComboListener { } } -/** - * Handles Firefox's drag event, which returns different coordinates and then fails when calling `elementFromPoint`. - * @param {DragEvent} event - * @returns {[Number, Number, HTMLElement]} [clientX, clientY, targetElement] - */ -function elementFromDragEvent(event) { - let clientX = null; - let clientY = null; - let target; - const userAgentString = navigator.userAgent; - if (userAgentString.indexOf('Firefox') > -1) { - clientX = event.clientX; - clientY = event.clientY; - const screenOffsetX = window.screenLeft; - if (clientX >= screenOffsetX) { - clientX = clientX - screenOffsetX; - } - const screenOffsetY = window.screenTop; - if (clientY >= screenOffsetY) { - clientY = clientY - screenOffsetY; - } - target = document.elementFromPoint(clientX, clientY); - } else { - clientX = event.clientX; - clientY = event.clientY; - target = document.elementFromPoint(event.clientX, event.clientY); - } - return [clientX, clientY, target]; -} +// This is used in Firefox to bypass the ‘dragend’ event because it returns incorrect ‘screenX’ and ‘screenY’ +const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') > -1; /** * @param {string} url @@ -1895,20 +1868,16 @@ class ModelGrid { * @param {boolean} removeEmbeddingExtension * @param {boolean} strictlyOnWidget */ - static #dragAddModel( + static dragAddModel( event, modelType, path, removeEmbeddingExtension, strictlyOnWidget, ) { - const [clientX, clientY, target] = elementFromDragEvent(event); + const target = document.elementFromPoint(event.x, event.y); if (modelType !== 'embeddings' && target.id === 'graph-canvas') { - //const pos = app.canvas.convertEventToCanvasOffset(event); - const pos = app.canvas.convertEventToCanvasOffset({ - clientX: clientX, - clientY: clientY, - }); + const pos = app.canvas.convertEventToCanvasOffset(event); const node = app.graph.getNodeOnPos( pos[0], @@ -2164,20 +2133,41 @@ class ModelGrid { }, }).element, ]; - const dragAdd = (e) => - ModelGrid.#dragAddModel( - e, - modelType, - path, - removeEmbeddingExtension, - strictDragToAdd, - ); + + const overlay = (() => { + if(IS_FIREFOX){ + const dragAdd = (e) =>{ + const data = { + modelType: modelType, + path: path, + removeEmbeddingExtension: removeEmbeddingExtension, + strictDragToAdd: strictDragToAdd, + }; + e.dataTransfer.setData('manager-model', JSON.stringify(data)); + } + return $el('div.model-preview-overlay', { + ondragstart: (e) => dragAdd(e), + draggable: true, + }); + } else { + const dragAdd = (e) => + ModelGrid.dragAddModel( + e, + modelType, + path, + removeEmbeddingExtension, + strictDragToAdd, + ); + return $el('div.model-preview-overlay', { + ondragend: (e) => dragAdd(e), + draggable: true, + }); + } + })(); + return $el('div.item', {}, [ previewThumbnail, - $el('div.model-preview-overlay', { - ondragend: (e) => dragAdd(e), - draggable: true, - }), + overlay, $el( 'div.model-preview-top-right', { @@ -5344,6 +5334,20 @@ class ModelManager extends ComfyDialog { updateDragSidebar(e, e.touches[0].clientX, e.touches[0].clientY), ); + if(IS_FIREFOX){ + app.canvasEl.addEventListener('drop', (e) => { + if (e.dataTransfer.types.includes('manager-model')){ + const data = JSON.parse(e.dataTransfer.getData('manager-model')); + ModelGrid.dragAddModel( + e, + data.modelType, + data.path, + data.removeEmbeddingExtension, + data.strictDragToAdd, + ); + } + }); + } this.#init(); }