From c85f6c47d4a7f7ad33f43b7f94e127304b8a1d41 Mon Sep 17 00:00:00 2001 From: Nuked Date: Sun, 21 Jul 2024 08:50:56 +0200 Subject: [PATCH] Fixed cache bug on the templates panel --- README.md | 8 +- app/js/sidebar_node.js | 142 ++++++++++++------ .../custom_templates/custom_templates.jsb | 17 ++- pyproject.toml | 2 +- 4 files changed, 110 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index 271c7b8..60e10fc 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,13 @@ For what i know nobody did it, so i did it. Maybe you don't need it. I need it >.< # Updates + +- 21-07-2024 + - Fixed a cache bug on the templates panel + +- 19-07-2024 + - Added OSX shortcut support + - 05-07-2024 - Fixed bug on dragging templates - Added multi user support on templates @@ -33,7 +40,6 @@ NOTE: If you had some custom categories in the workflow panel, at the first star NOTE2: I hope I did not break anything T_T - - 25-05-2024 - Fixed some bugs - Added Templates support** diff --git a/app/js/sidebar_node.js b/app/js/sidebar_node.js index 706840c..618e648 100644 --- a/app/js/sidebar_node.js +++ b/app/js/sidebar_node.js @@ -53,8 +53,6 @@ function getSidebarItemIds() { return itemIds; } function postPinned() { - - var dragItem = null; const pinnedElement = document.getElementById("sidebarBookmarks"); @@ -65,8 +63,27 @@ function postPinned() { dragItem = event.target; }); - item.addEventListener('mouseover', function () { + item.addEventListener('touchstart', function (event) { + dragItem = event.target; + }); + item.addEventListener('touchmove', function (event) { + event.preventDefault(); + const touch = event.touches[0]; + const dropZone = document.elementFromPoint(touch.clientX, touch.clientY).closest("ul"); + if (dropZone && dragItem) { + dropZone.appendChild(dragItem); // O usa insertBefore se necessario + } + }); + + item.addEventListener('touchend', function (event) { + if (dragItem) { + savePinnedItems(getSidebarItemIds()); + dragItem = null; + } + }); + + item.addEventListener('mouseover', function () { if (this.classList.contains('sidebarItem') && this.tagName === 'LI') { let descriptionDiv = ""; const itemPosition = getElementPosition(this); @@ -80,15 +97,11 @@ function postPinned() { const correction_offset = 45; if (itemPosition.top - this.offsetHeight >= 0 && itemPosition.top + previewDiv.offsetHeight < document.body.offsetHeight) { - previewDivTop = itemPosition.top - this.offsetHeight + previewDivTop = itemPosition.top - this.offsetHeight; } else if (itemPosition.top - this.offsetHeight - previewDiv.offsetHeight <= 0) { previewDivTop = 0 + correction_offset; - - - } - else { - + } else { previewDivTop = (itemPosition.top + this.offsetHeight) - previewDiv.offsetHeight; } let sidebar_width = parseInt(getVar("sidebarWidth")) || 500; @@ -100,18 +113,14 @@ function postPinned() { } else { previewDiv.style.right = `${previewDivLeft}px`; } - - - } }); item.addEventListener('mouseout', function () { previewDiv.style.display = 'none'; - }) - - reloadCtxMenu() + }); + reloadCtxMenu(); }); pinnedElement.addEventListener("dragover", function (event) { @@ -124,19 +133,12 @@ function postPinned() { var dropZone = event.target.closest("ul"); dropZone.insertBefore(dragItem, event.target); dragItem = null; - //list element in sidebarBookmarks - savePinnedItems(getSidebarItemIds()); } }); - - - - } - function saveSidebarWidth(sideb) { const width = sideb.style.width; document.cookie = setVar("sidebarWidth", width); @@ -690,37 +692,29 @@ async function createCategoryList() { - - const dragHandle = document.getElementById("dragHandle"); let isDragging = false; let startX; let startWidth; - - + + // Funzioni per gestire gli eventi del mouse dragHandle.addEventListener("mousedown", function (event) { isDragging = true; startX = event.clientX; startWidth = parseInt(window.getComputedStyle(sidebar_main).width); - }); - - + document.addEventListener("mouseup", function () { - if (isDragging) { isDragging = false; - saveSidebarWidth(sidebar_main); - } }); - - + document.addEventListener("mousemove", function (event) { if (!isDragging) return; - + const delta = event.clientX - startX; if (sbPosition === "left") { sidebar_main.style.width = (startWidth + delta) + "px"; @@ -728,7 +722,32 @@ async function createCategoryList() { sidebar_main.style.width = (startWidth - delta) + "px"; } }); - + + // Funzioni per gestire gli eventi touch + dragHandle.addEventListener("touchstart", function (event) { + isDragging = true; + startX = event.touches[0].clientX; + startWidth = parseInt(window.getComputedStyle(sidebar_main).width); + }); + + document.addEventListener("touchend", function () { + if (isDragging) { + isDragging = false; + saveSidebarWidth(sidebar_main); + } + }); + + document.addEventListener("touchmove", function (event) { + if (!isDragging) return; + + const delta = event.touches[0].clientX - startX; + if (sbPosition === "left") { + sidebar_main.style.width = (startWidth + delta) + "px"; + } else { + sidebar_main.style.width = (startWidth - delta) + "px"; + } + }); + } @@ -821,55 +840,80 @@ async function addSidebar() { function handleDrop(event) { event.preventDefault(); - + if (event.srcElement.tagName.toLowerCase() != "canvas") { return; } + const coord = convertCanvasToOffset(app.canvasEl.data.ds, [event.clientX, event.clientY]); const x = coord[0]; const y = coord[1]; sidebarAddNode(draggedElementId, draggedElementId, x, y); draggedElementId = null; } - - + function allowDrop(event) { event.preventDefault(); } + + function handleTouchMove(event) { + event.preventDefault(); + } + + function handleTouchEnd(event) { + event.preventDefault(); + + const touch = event.changedTouches[0]; + const dropZone = document.elementFromPoint(touch.clientX, touch.clientY); + + if (dropZone.tagName.toLowerCase() != "canvas") { + return; + } + + const coord = convertCanvasToOffset(app.canvasEl.data.ds, [touch.clientX, touch.clientY]); + const x = coord[0]; + const y = coord[1]; + sidebarAddNode(draggedElementId, draggedElementId, x, y); + draggedElementId = null; + } + // const search_bar = document.getElementById('searchInput'); + + // Gestione degli eventi di trascinamento canvas.addEventListener("dragstart", function (event) { - draggedElementId = event.target.id; previewDiv.style.display = 'none'; }); + canvas.addEventListener("dragover", allowDrop); + // Gestione degli eventi touch + canvas.addEventListener("touchstart", function (event) { + draggedElementId = event.target.id; + previewDiv.style.display = 'none'; + }); + canvas.addEventListener("touchmove", handleTouchMove); + + canvas.addEventListener("touchend", handleTouchEnd); + + // Altri eventi document.getElementById('switch_sidebar').addEventListener('click', function () { toggleSHSB(); - }); document.addEventListener('drop', handleDrop); - - canvas.addEventListener('dragover', allowDrop); - - - // expand/collapse pinned const pinnedLabel = document.getElementById("sb_label_pinned"); - - pinnedLabel.addEventListener('click', function () { toggleCollapsePinned(); }); - createCategoryList(); SidebarPostBoot(); } diff --git a/app/panels/custom_templates/custom_templates.jsb b/app/panels/custom_templates/custom_templates.jsb index 3044299..67c7490 100644 --- a/app/panels/custom_templates/custom_templates.jsb +++ b/app/panels/custom_templates/custom_templates.jsb @@ -396,8 +396,8 @@ var custom_templates = (function () { } else { headers = {} } - - const response = await fetch('./userdata/comfy.templates.json', { headers: headers }); + const timestamp = new Date().getTime(); + const response = await fetch('./userdata/comfy.templates.json?v=' + timestamp, { headers: headers }); comfy_templates = await response.json(); } catch (error) { console.error('Error fetching data:', error); @@ -797,7 +797,8 @@ var custom_templates = (function () { alert("Template name cannot contain special characters."); return; } - const response = await fetch('./userdata/comfy.templates.json'); + const timestamp = new Date().getTime(); + const response = await fetch('./userdata/comfy.templates.json?v=' + timestamp); const nodeTemplates = await response.json(); @@ -826,8 +827,8 @@ var custom_templates = (function () { break; } } - - await fetch('./userdata/comfy.templates.json', { + + await fetch('./userdata/comfy.templates.json?v=' + timestamp, { method: 'POST', body: JSON.stringify(nodeTemplates), headers: { @@ -846,8 +847,8 @@ var custom_templates = (function () { async function removeTemplate(name) { - - const response = await fetch('./userdata/comfy.templates.json'); + timestamp = new Date().getTime(); + const response = await fetch('./userdata/comfy.templates.json?v=' + timestamp); const nodeTemplates = await response.json(); //let nodeTemplates = JSON.parse(comfy_templates); @@ -866,7 +867,7 @@ var custom_templates = (function () { break; // Assuming the node names are unique, we can break once we find it } } - await fetch('./userdata/comfy.templates.json', { + await fetch('./userdata/comfy.templates.json?v=' + timestamp, { method: 'POST', body: JSON.stringify(nodeTemplates), headers: { diff --git a/pyproject.toml b/pyproject.toml index 4a31d91..5cc60dc 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,7 +1,7 @@ [project] name = "comfyui-n-sidebar" description = "A simple sidebar for ComfyUI." -version = "1.2.3" +version = "1.2.4" license = "LICENSE" [project.urls]