From 08d641d61b5a6d62aa344455bda26ea671c89b68 Mon Sep 17 00:00:00 2001 From: christian-byrne Date: Wed, 15 Jan 2025 15:08:20 -0700 Subject: [PATCH 1/4] Update lora/model preview --- web/js/betterCombos.js | 64 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 4 deletions(-) diff --git a/web/js/betterCombos.js b/web/js/betterCombos.js index 267f354..ecfb04e 100644 --- a/web/js/betterCombos.js +++ b/web/js/betterCombos.js @@ -5,6 +5,8 @@ import { api } from "../../../scripts/api.js"; const CHECKPOINT_LOADER = "CheckpointLoader|pysssss"; const LORA_LOADER = "LoraLoader|pysssss"; +const IMAGE_WIDTH = 384; +const IMAGE_HEIGHT = 384; function getType(node) { if (node.comfyClass === CHECKPOINT_LOADER) { @@ -13,6 +15,50 @@ function getType(node) { return "loras"; } +const getImage = (imageId) => document.querySelector(`#${CSS.escape(imageId)}`); + +const calculateImagePosition = (el, rootRect, bodyRect) => { + const { x } = el.getBoundingClientRect(); + let { top, left } = rootRect + const { width: bodyWidth, height: bodyHeight } = bodyRect; + + const isSpaceRight = x + IMAGE_WIDTH <= bodyWidth + if (isSpaceRight) { + left += rootRect.width + IMAGE_WIDTH + } + + const isSpaceBelow = rootRect.top + IMAGE_HEIGHT <= bodyHeight; + if (!isSpaceBelow) { + top = bodyHeight - IMAGE_HEIGHT; + } + + return { left: Math.round(left), top: Math.round(top) }; +}; + +function showImage(el, imageId, getRootRect) { + const img = getImage(imageId); + if (img) { + const rootRect = getRootRect() + if (!rootRect) return; + + const bodyRect = document.body.getBoundingClientRect(); + if (!bodyRect) return; + + const { left, top } = calculateImagePosition(el, rootRect, bodyRect); + + img.style.display = "block"; + img.style.left = `${left}px`; + img.style.top = `${top}px`; + } +} + +function closeImage(imageId) { + const img = getImage(imageId); + if (img) { + img.style.display = "none"; + } +} + app.registerExtension({ name: "pysssss.Combo++", init() { @@ -27,8 +73,8 @@ app.registerExtension({ left: 0; top: 0; transform: translate(-100%, 0); - width: 384px; - height: 384px; + width: ${IMAGE_WIDTH}px; + height: ${IMAGE_HEIGHT}px; background-size: contain; background-position: top right; background-repeat: no-repeat; @@ -81,13 +127,23 @@ app.registerExtension({ // After an element is created for an item, add an image if it has one contextMenuHook["addItem"].push(function (el, menu, [name, value, options]) { if (el && isCustomItem(value) && value?.image && !value.submenu) { + const key = `pysssss-image-combo-${name}` el.textContent += " *"; - $el("div.pysssss-combo-image", { - parent: el, + $el(`div.pysssss-combo-image`, { + id: key, + parent: document.body, style: { backgroundImage: `url(/pysssss/view/${encodeRFC3986URIComponent(value.image)})`, }, }); + + const getRootRect = () => menu.root?.getBoundingClientRect(); + const showHandler = () => showImage(el, key, getRootRect); + const closeHandler = () => closeImage(key); + + el.addEventListener("mouseenter", showHandler, { passive: true }); + el.addEventListener("mouseleave", closeHandler, { passive: true }); + el.addEventListener("click", closeHandler, { passive: true }); } }); From daa7cdfafa1e68a027778a42bc43fd3c2a52445e Mon Sep 17 00:00:00 2001 From: christian-byrne Date: Wed, 15 Jan 2025 15:14:19 -0700 Subject: [PATCH 2/4] Formatting --- web/js/betterCombos.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/web/js/betterCombos.js b/web/js/betterCombos.js index ecfb04e..c5379d1 100644 --- a/web/js/betterCombos.js +++ b/web/js/betterCombos.js @@ -19,12 +19,12 @@ const getImage = (imageId) => document.querySelector(`#${CSS.escape(imageId)}`); const calculateImagePosition = (el, rootRect, bodyRect) => { const { x } = el.getBoundingClientRect(); - let { top, left } = rootRect - const { width: bodyWidth, height: bodyHeight } = bodyRect; + let { top, left } = rootRect; + const { width: bodyWidth, height: bodyHeight } = bodyRect; - const isSpaceRight = x + IMAGE_WIDTH <= bodyWidth + const isSpaceRight = x + IMAGE_WIDTH <= bodyWidth; if (isSpaceRight) { - left += rootRect.width + IMAGE_WIDTH + left += rootRect.width + IMAGE_WIDTH; } const isSpaceBelow = rootRect.top + IMAGE_HEIGHT <= bodyHeight; @@ -38,11 +38,11 @@ const calculateImagePosition = (el, rootRect, bodyRect) => { function showImage(el, imageId, getRootRect) { const img = getImage(imageId); if (img) { - const rootRect = getRootRect() + const rootRect = getRootRect(); if (!rootRect) return; - const bodyRect = document.body.getBoundingClientRect(); - if (!bodyRect) return; + const bodyRect = document.body.getBoundingClientRect(); + if (!bodyRect) return; const { left, top } = calculateImagePosition(el, rootRect, bodyRect); @@ -127,8 +127,8 @@ app.registerExtension({ // After an element is created for an item, add an image if it has one contextMenuHook["addItem"].push(function (el, menu, [name, value, options]) { if (el && isCustomItem(value) && value?.image && !value.submenu) { - const key = `pysssss-image-combo-${name}` - el.textContent += " *"; + const key = `pysssss-image-combo-${name}`; + el.textContent += " *"; $el(`div.pysssss-combo-image`, { id: key, parent: document.body, @@ -138,12 +138,12 @@ app.registerExtension({ }); const getRootRect = () => menu.root?.getBoundingClientRect(); - const showHandler = () => showImage(el, key, getRootRect); - const closeHandler = () => closeImage(key); - - el.addEventListener("mouseenter", showHandler, { passive: true }); - el.addEventListener("mouseleave", closeHandler, { passive: true }); - el.addEventListener("click", closeHandler, { passive: true }); + const showHandler = () => showImage(el, key, getRootRect); + const closeHandler = () => closeImage(key); + + el.addEventListener("mouseenter", showHandler, { passive: true }); + el.addEventListener("mouseleave", closeHandler, { passive: true }); + el.addEventListener("click", closeHandler, { passive: true }); } }); From 9e853ce6bf89e3bf77282493e94e9e253f8d81d2 Mon Sep 17 00:00:00 2001 From: christian-byrne Date: Wed, 15 Jan 2025 15:16:15 -0700 Subject: [PATCH 3/4] change spaces to tabs --- web/js/betterCombos.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/js/betterCombos.js b/web/js/betterCombos.js index c5379d1..0d533d9 100644 --- a/web/js/betterCombos.js +++ b/web/js/betterCombos.js @@ -128,7 +128,7 @@ app.registerExtension({ contextMenuHook["addItem"].push(function (el, menu, [name, value, options]) { if (el && isCustomItem(value) && value?.image && !value.submenu) { const key = `pysssss-image-combo-${name}`; - el.textContent += " *"; + el.textContent += " *"; $el(`div.pysssss-combo-image`, { id: key, parent: document.body, @@ -138,8 +138,8 @@ app.registerExtension({ }); const getRootRect = () => menu.root?.getBoundingClientRect(); - const showHandler = () => showImage(el, key, getRootRect); - const closeHandler = () => closeImage(key); + const showHandler = () => showImage(el, key, getRootRect); + const closeHandler = () => closeImage(key); el.addEventListener("mouseenter", showHandler, { passive: true }); el.addEventListener("mouseleave", closeHandler, { passive: true }); From 5743a01ba5b0ae082a02126e6aa119992048b7ca Mon Sep 17 00:00:00 2001 From: christian-byrne Date: Wed, 15 Jan 2025 15:16:54 -0700 Subject: [PATCH 4/4] change spaces to tabs --- web/js/betterCombos.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/js/betterCombos.js b/web/js/betterCombos.js index 0d533d9..15da585 100644 --- a/web/js/betterCombos.js +++ b/web/js/betterCombos.js @@ -141,9 +141,9 @@ app.registerExtension({ const showHandler = () => showImage(el, key, getRootRect); const closeHandler = () => closeImage(key); - el.addEventListener("mouseenter", showHandler, { passive: true }); - el.addEventListener("mouseleave", closeHandler, { passive: true }); - el.addEventListener("click", closeHandler, { passive: true }); + el.addEventListener("mouseenter", showHandler, { passive: true }); + el.addEventListener("mouseleave", closeHandler, { passive: true }); + el.addEventListener("click", closeHandler, { passive: true }); } });