From 44fe530f46f0c9bde43f63cdd44101c402a5a91b Mon Sep 17 00:00:00 2001 From: "Alexander G. Morano" Date: Fri, 9 Aug 2024 18:56:16 -0700 Subject: [PATCH] try to tweak help panel for old system vs new frontend --- pyproject.toml | 14 +- requirements.txt | 10 +- web/core/core_cozy_tips.js | 15 +- web/core/core_help_old.js | 472 ++++++++++++++++++------------------- 4 files changed, 254 insertions(+), 257 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index 32193a9..a4db479 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,10 +1,10 @@ [project] name = "jovimetrix" description = "Integrates Webcam, MIDI, Spout and GLSL shader support. Animation via tick. Parameter manipulation with wave generator. Math operations with Unary and Binary support. Value conversion for all major types (int, string, list, dict, Image, Mask). Shape mask generation, image stacking and channel ops, batch splitting, merging and randomizing, load images and video from anywhere, dynamic bus routing with a single node, export support for GIPHY, save output anywhere! flatten, crop, transform; check colorblindness, make stereogram or stereoscopic images, or liner interpolate values and more." -version = "1.2.11" +version = "1.2.12" license = { file = "LICENSE" } dependencies = [ - "aenum>=3.1.15, <4", + "aenum>=3.1.15,<4", "blendmodes>=2024.1.1", "daltonlens>=0.1.5", "glfw>=2.7.0", @@ -12,15 +12,15 @@ dependencies = [ "matplotlib>=3.8.4", "mido[ports-rtmidi]>=1.3.2", "mss>=9.0.1", - "numba>=0.59.1", - "numpy>=1.26.4,<2.0.0", - "opencv-contrib-python>=4.10.0.82", - "Pillow>=10.2.0", + "numba>=0.60.0", + "numpy>=1.26.4", + "opencv-contrib-python>=4.10.0.84", + "Pillow>=10.4.0", "PyOpenGL>=3.1.7", "PyOpenGL-accelerate>=3.1.7", "pywin32>=306; platform_system==\"Windows\"", "requests>=2.32.3", - "scikit-image>=0.23.2", + "scikit-image>=0.24.0", "scikit-learn>=1.5.1", "SpoutGL>=0.0.6; platform_system==\"Windows\"", "stereoscopy[auto_align]>=2.0.1", diff --git a/requirements.txt b/requirements.txt index c764286..7b14477 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,4 +1,4 @@ -aenum>=3.1.15, <4 +aenum>=3.1.15,<4 blendmodes>=2024.1.1 daltonlens>=0.1.5 glfw>=2.7.0 @@ -6,15 +6,15 @@ loguru>=0.7.2 matplotlib>=3.8.4 mido[ports-rtmidi]>=1.3.2 mss>=9.0.1 -numba>=0.59.1 +numba>=0.60.0 numpy>=1.26.4,<2.0.0 -opencv-contrib-python>=4.10.0.82 -Pillow>=10.2.0 +opencv-contrib-python>=4.10.0.84 +Pillow>=10.4.0 PyOpenGL>=3.1.7 PyOpenGL-accelerate>=3.1.7 pywin32>=306; platform_system=="Windows" requests>=2.32.3 -scikit-image>=0.23.2 +scikit-image>=0.24.0 scikit-learn>=1.5.1 SpoutGL>=0.0.6; platform_system=="Windows" stereoscopy[auto_align]>=2.0.1 diff --git a/web/core/core_cozy_tips.js b/web/core/core_cozy_tips.js index 2c0255e..d716321 100644 --- a/web/core/core_cozy_tips.js +++ b/web/core/core_cozy_tips.js @@ -76,16 +76,19 @@ app.registerExtension({ const onCanvasPointerMove = function () { const node = this.node_over; + if (!node || node.flags.collapsed) { + widget_previous = null; hideTooltip(); return; } - // jovian tooltip + // Jovian tooltip logic const widget_tooltip = (node?.widgets || []) .find(widget => widget.type === 'JTOOLTIP'); if (!widget_tooltip) { + widget_previous = null; hideTooltip(); return; } @@ -128,14 +131,10 @@ app.registerExtension({ } if (widget_previous != name) { - hideTooltip(); widget_previous = name; - if (tip) { - return showTooltip(tip); - } - return; - } else { - return; + } + if (tip) { + return showTooltip(tip); } hideTooltip(); }.bind(app.canvas); diff --git a/web/core/core_help_old.js b/web/core/core_help_old.js index f4cf701..64272b6 100644 --- a/web/core/core_help_old.js +++ b/web/core/core_help_old.js @@ -8,82 +8,80 @@ import { app } from '../../../scripts/app.js' import { nodeCleanup } from '../util/util_node.js' import '../extern/shodown.min.js' -const JOV_WEBWIKI_URL = "https://github.com/Amorano/Jovimetrix/wiki"; -// const JOV_HELP_URL = "https://raw.githubusercontent.com/Amorano/Jovimetrix-examples/master/node"; -const CACHE_DOCUMENTATION = {}; +if (!app?.extensionManager) { -if (!window.jovimetrixEvents) { - window.jovimetrixEvents = new EventTarget(); -} -const jovimetrixEvents = window.jovimetrixEvents; + const JOV_WEBWIKI_URL = "https://github.com/Amorano/Jovimetrix/wiki"; + const JOV_HELP_URL = "/jovimetrix/doc"; + const CACHE_DOCUMENTATION = {}; -const new_menu = app.ui.settings.getSettingValue("Comfy.UseNewMenu", "Disabled"); + if (!window.jovimetrixEvents) { + window.jovimetrixEvents = new EventTarget(); + } + const jovimetrixEvents = window.jovimetrixEvents; -const documentationConverter = new showdown.Converter({ - tables: true, - strikethrough: true, - emoji: true, - ghCodeBlocks: true, - tasklists: true, - ghMentions: true, - smoothLivePreview: true, - simplifiedAutoLink: true, - parseImgDimensions: true, - openLinksInNewWindow: true, -}); + const documentationConverter = new showdown.Converter({ + tables: true, + strikethrough: true, + emoji: true, + ghCodeBlocks: true, + tasklists: true, + ghMentions: true, + smoothLivePreview: true, + simplifiedAutoLink: true, + parseImgDimensions: true, + openLinksInNewWindow: true, + }); -const JOV_HELP_URL = "/jovimetrix/doc"; + async function load_help(name, custom_data) { + // overwrite + if (custom_data) { + CACHE_DOCUMENTATION[name] = documentationConverter.makeHtml(custom_data); + } -async function load_help(name, custom_data) { - // overwrite - if (custom_data) { - CACHE_DOCUMENTATION[name] = documentationConverter.makeHtml(custom_data); - } + if (name in CACHE_DOCUMENTATION) { + return CACHE_DOCUMENTATION[name]; + } - if (name in CACHE_DOCUMENTATION) { - return CACHE_DOCUMENTATION[name]; + const url = `${JOV_HELP_URL}/${name}`; + // Check if data is already cached + const result = fetch(url, + { cache: "no-store" } + ) + .then(response => { + if (!response.ok) { + return `Failed to load documentation: ${name}\n\n${response}` + } + return response.text(); + }) + .then(data => { + // Cache the fetched data + if (data.startsWith("unknown")) { + data = ` +
+

${data}

+

SELECT A NODE TO SEE HELP

+

JOVIMETRIX πŸ”ΊπŸŸ©πŸ”΅ NODES ALL HAVE HELP

+
+ `; + }; + CACHE_DOCUMENTATION[name] = data; + return CACHE_DOCUMENTATION[name]; + }) + .catch(error => { + console.error('Error:', error); + return `Failed to load documentation: ${name}\n\n${error}` + }); + return result; } - const url = `${JOV_HELP_URL}/${name}`; - // Check if data is already cached - const result = fetch(url, - { cache: "no-store" } - ) - .then(response => { - if (!response.ok) { - return `Failed to load documentation: ${name}\n\n${response}` + app.registerExtension({ + name: "jovimetrix.help", + async beforeRegisterNodeDef(nodeType, nodeData) { + if (!nodeData?.category?.startsWith("JOVIMETRIX")) { + return; } - return response.text(); - }) - .then(data => { - // Cache the fetched data - if (data.startsWith("unknown")) { - data = ` -
-

${data}

-

SELECT A NODE TO SEE HELP

-

JOVIMETRIX πŸ”ΊπŸŸ©πŸ”΅ NODES ALL HAVE HELP

-
- `; - }; - CACHE_DOCUMENTATION[name] = data; - return CACHE_DOCUMENTATION[name]; - }) - .catch(error => { - console.error('Error:', error); - return `Failed to load documentation: ${name}\n\n${error}` - }); - return result; -} -app.registerExtension({ - name: "jovimetrix.help", - async beforeRegisterNodeDef(nodeType, nodeData) { - if (!nodeData?.category?.startsWith("JOVIMETRIX")) { - return; - } - // if the old menu is present.... - //if(new_menu == "Disabled" || !app.extensionManager) { + // if the old menu is present... let opts = { icon_size: 14, icon_margin: 3 } const iconSize = opts.icon_size ? opts.icon_size : 14; const iconMargin = opts.icon_margin ? opts.icon_margin : 3; @@ -107,195 +105,195 @@ app.registerExtension({ contentWrapper = null; } } - return me; - } - const onDrawForeground = nodeType.prototype.onDrawForeground; - nodeType.prototype.onDrawForeground = async function (ctx) { - const me = onDrawForeground?.apply?.(this, arguments); - if (this.flags.collapsed) return me; + const onDrawForeground = this.onDrawForeground; + this.onDrawForeground = async function (ctx) { + const me = onDrawForeground?.apply(this, arguments); + if (this.flags.collapsed) return me; - const x = this.size[0] - iconSize - iconMargin - if (this.show_doc && docElement === null) { + const x = this.size[0] - iconSize - iconMargin + if (this.show_doc && docElement === null) { - docElement = document.createElement('div') - docElement.classList.add('jov-panel-doc-popup'); + docElement = document.createElement('div') + docElement.classList.add('jov-panel-doc-popup'); - const widget_tooltip = (this.widgets || []) - .find(widget => widget.type === 'JTOOLTIP'); - - if (widget_tooltip) { - const tips = widget_tooltip.options.default || {}; - const url_name = `jovimetrix/${tips['*']}`; - docElement.innerHTML = await load_help(url_name); - } - - // resize handle - const resizeHandle = document.createElement('div'); - resizeHandle.style.width = '0'; - resizeHandle.style.height = '0'; - resizeHandle.style.position = 'absolute'; - resizeHandle.style.bottom = '0'; - resizeHandle.style.right = '0'; - resizeHandle.style.cursor = 'se-resize'; - const borderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color').trim(); - - resizeHandle.style.borderTop = '5px solid transparent'; - resizeHandle.style.borderLeft = '5px solid transparent'; - resizeHandle.style.borderBottom = `5px solid ${borderColor}`; - resizeHandle.style.borderRight = `5px solid ${borderColor}`; - docElement.appendChild(resizeHandle); - let isResizing = false; - let startX, startY, startWidth, startHeight; - - resizeHandle.addEventListener('mousedown', function (e) { - e.preventDefault(); - e.stopPropagation(); - isResizing = true; - startX = e.clientX; - startY = e.clientY; - startWidth = parseInt(document.defaultView.getComputedStyle(docElement).width, 10); - startHeight = parseInt(document.defaultView.getComputedStyle(docElement).height, 10); - }, - { signal: this.helpClose.signal }, - ); - - const buttons = document.createElement('div'); - // wiki page - const wikiButton = document.createElement('div'); - wikiButton.textContent = '🌐'; - wikiButton.style.position = 'absolute'; - wikiButton.style.top = '6px'; - wikiButton.style.right = '22px'; - wikiButton.style.cursor = 'pointer'; - wikiButton.style.padding = '4px'; - wikiButton.style.font = 'bold 14px monospace'; - wikiButton.addEventListener('mousedown', (e) => { - e.stopPropagation(); const widget_tooltip = (this.widgets || []) .find(widget => widget.type === 'JTOOLTIP'); + if (widget_tooltip) { const tips = widget_tooltip.options.default || {}; - const url = tips['_']; - if (url !== undefined) { - window.open(`${JOV_WEBWIKI_URL}/${url}`, '_blank'); - } - wikiButton.tooltip = `WIKI PAGE: ${url}` + const url_name = `jovimetrix/${tips['*']}`; + docElement.innerHTML = await load_help(url_name); } - }); - buttons.appendChild(wikiButton); - // close button - const closeButton = document.createElement('div'); - closeButton.textContent = '❌'; - closeButton.style.position = 'absolute'; - closeButton.style.top = '6px'; - closeButton.style.right = '4px'; - closeButton.style.cursor = 'pointer'; - closeButton.style.padding = '4px'; - closeButton.style.font = 'bold 14px monospace'; - closeButton.addEventListener('mousedown', (e) => { + // resize handle + const resizeHandle = document.createElement('div'); + resizeHandle.style.width = '0'; + resizeHandle.style.height = '0'; + resizeHandle.style.position = 'absolute'; + resizeHandle.style.bottom = '0'; + resizeHandle.style.right = '0'; + resizeHandle.style.cursor = 'se-resize'; + const borderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color').trim(); + + resizeHandle.style.borderTop = '5px solid transparent'; + resizeHandle.style.borderLeft = '5px solid transparent'; + resizeHandle.style.borderBottom = `5px solid ${borderColor}`; + resizeHandle.style.borderRight = `5px solid ${borderColor}`; + docElement.appendChild(resizeHandle); + let isResizing = false; + let startX, startY, startWidth, startHeight; + + resizeHandle.addEventListener('mousedown', function (e) { + e.preventDefault(); + e.stopPropagation(); + isResizing = true; + startX = e.clientX; + startY = e.clientY; + startWidth = parseInt(document.defaultView.getComputedStyle(docElement).width, 10); + startHeight = parseInt(document.defaultView.getComputedStyle(docElement).height, 10); + }, + { signal: this.helpClose.signal }, + ); + + const buttons = document.createElement('div'); + // wiki page + const wikiButton = document.createElement('div'); + wikiButton.textContent = '🌐'; + wikiButton.style.position = 'absolute'; + wikiButton.style.top = '6px'; + wikiButton.style.right = '22px'; + wikiButton.style.cursor = 'pointer'; + wikiButton.style.padding = '4px'; + wikiButton.style.font = 'bold 14px monospace'; + wikiButton.addEventListener('mousedown', (e) => { e.stopPropagation(); - this.show_doc = !this.show_doc - if (contentWrapper) { - contentWrapper.remove() - contentWrapper = null + const widget_tooltip = (this.widgets || []) + .find(widget => widget.type === 'JTOOLTIP'); + if (widget_tooltip) { + const tips = widget_tooltip.options.default || {}; + const url = tips['_']; + if (url !== undefined) { + window.open(`${JOV_WEBWIKI_URL}/${url}`, '_blank'); + } + wikiButton.tooltip = `WIKI PAGE: ${url}` } - docElement.parentNode.removeChild(docElement) - docElement = null - }, - { signal: this.helpClose.signal }, - ); - buttons.appendChild(closeButton); - docElement.appendChild(buttons); - - document.addEventListener('mousemove', function (e) { - if (!isResizing) return; - const scale = app.canvas.ds.scale; - const newWidth = startWidth + (e.clientX - startX) / scale; - const newHeight = startHeight + (e.clientY - startY) / scale;; - docElement.style.width = `${newWidth}px`; - docElement.style.height = `${newHeight}px`; - }, - { signal: this.helpClose.signal }, - ); - document.addEventListener('mouseup', function () { - isResizing = false - }, - { signal: this.helpClose.signal }, - ); - document.body.appendChild(docElement); - } else if (!this.show_doc && docElement !== null) { - docElement.parentNode?.removeChild(docElement) - docElement = null; - } + }); + buttons.appendChild(wikiButton); - if (this.show_doc && docElement !== null) { - const rect = ctx.canvas.getBoundingClientRect() - const scaleX = rect.width / ctx.canvas.width - const scaleY = rect.height / ctx.canvas.height - const transform = new DOMMatrix() - .scaleSelf(scaleX, scaleY) - .multiplySelf(ctx.getTransform()) - .translateSelf(this.size[0] * scaleX * Math.max(1.0,window.devicePixelRatio) , 0) - .translateSelf(10, -32) + // close button + const closeButton = document.createElement('div'); + closeButton.textContent = '❌'; + closeButton.style.position = 'absolute'; + closeButton.style.top = '6px'; + closeButton.style.right = '4px'; + closeButton.style.cursor = 'pointer'; + closeButton.style.padding = '4px'; + closeButton.style.font = 'bold 14px monospace'; + closeButton.addEventListener('mousedown', (e) => { + e.stopPropagation(); + this.show_doc = !this.show_doc + if (contentWrapper) { + contentWrapper.remove() + contentWrapper = null + } + docElement.parentNode.removeChild(docElement) + docElement = null + }, + { signal: this.helpClose.signal }, + ); + buttons.appendChild(closeButton); + docElement.appendChild(buttons); - const scale = new DOMMatrix() - .scaleSelf(transform.a, transform.d); + document.addEventListener('mousemove', function (e) { + if (!isResizing) return; + const scale = app.canvas.ds.scale; + const newWidth = startWidth + (e.clientX - startX) / scale; + const newHeight = startHeight + (e.clientY - startY) / scale;; + docElement.style.width = `${newWidth}px`; + docElement.style.height = `${newHeight}px`; + }, + { signal: this.helpClose.signal }, + ); + document.addEventListener('mouseup', function () { + isResizing = false + }, + { signal: this.helpClose.signal }, + ); + document.body.appendChild(docElement); + } else if (!this.show_doc && docElement !== null) { + docElement.parentNode?.removeChild(docElement) + docElement = null; + } - const styleObject = { - transformOrigin: '0 0', - transform: scale, - left: `${transform.a + transform.e}px`, - top: `${transform.d + transform.f}px`, - }; - Object.assign(docElement.style, styleObject); - } + if (this.show_doc && docElement !== null) { + const rect = ctx.canvas.getBoundingClientRect() + const scaleX = rect.width / ctx.canvas.width + const scaleY = rect.height / ctx.canvas.height + const transform = new DOMMatrix() + .scaleSelf(scaleX, scaleY) + .multiplySelf(ctx.getTransform()) + .translateSelf(this.size[0] * scaleX * Math.max(1.0,window.devicePixelRatio) , 0) + .translateSelf(10, -32) - ctx.save(); - ctx.translate(x-3, -LiteGraph.NODE_TITLE_HEIGHT * 0.65); - ctx.scale(iconSize / 32, iconSize / 32); - ctx.font = `bold ${LiteGraph.NODE_TITLE_HEIGHT * 1.35}px monospace`; - ctx.fillText('πŸ›ˆ', 0, 24); // ℹ️ - ctx.restore() - return me; - } + const scale = new DOMMatrix() + .scaleSelf(transform.a, transform.d); - // ? clicked - const mouseDown = nodeType.prototype.onMouseDown - nodeType.prototype.onMouseDown = function (e, localPos) { - const r = mouseDown ? mouseDown.apply(this, arguments) : undefined - const iconX = this.size[0] - iconSize - iconMargin - const iconY = iconSize - 34 - if ( - localPos[0] > iconX && - localPos[0] < iconX + iconSize && - localPos[1] > iconY && - localPos[1] < iconY + iconSize - ) { - // Pencil icon was clicked, open the editor - // this.openEditorDialog(); - if (this.show_doc === undefined) { - this.show_doc = true; - } else { - this.show_doc = !this.show_doc; + const styleObject = { + transformOrigin: '0 0', + transform: scale, + left: `${transform.a + transform.e}px`, + top: `${transform.d + transform.f}px`, + }; + Object.assign(docElement.style, styleObject); } - if (this.show_doc) { - this.helpClose = new AbortController() - } else { - this.helpClose.abort() - } - // Dispatch a custom event with the node name - const data = { - class: this.getNickname() || "jovimetrix", - name: this.type + + ctx.save(); + ctx.translate(x-3, -LiteGraph.NODE_TITLE_HEIGHT * 0.65); + ctx.scale(iconSize / 32, iconSize / 32); + ctx.font = `bold ${LiteGraph.NODE_TITLE_HEIGHT * 1.35}px monospace`; + ctx.fillText('πŸ›ˆ', 0, 24); // ℹ️ + ctx.restore() + return me; + } + + // ? clicked + const mouseDown = this.onMouseDown; + this.onMouseDown = function (e, localPos) { + const me = mouseDown ? mouseDown.apply(this, arguments) : undefined + const iconX = this.size[0] - iconSize - iconMargin + const iconY = iconSize - 34 + if ( + localPos[0] > iconX && + localPos[0] < iconX + iconSize && + localPos[1] > iconY && + localPos[1] < iconY + iconSize + ) { + // Pencil icon was clicked, open the editor + // this.openEditorDialog(); + if (this.show_doc === undefined) { + this.show_doc = true; + } else { + this.show_doc = !this.show_doc; + } + if (this.show_doc) { + this.helpClose = new AbortController() + } else { + this.helpClose.abort() + } + // Dispatch a custom event with the node name + const data = { + class: this.getNickname() || "jovimetrix", + name: this.type + } + const event = new CustomEvent('jovimetrixHelpRequested', { detail: data }); + jovimetrixEvents.dispatchEvent(event); + return true; } - const event = new CustomEvent('jovimetrixHelpRequested', { detail: data }); - jovimetrixEvents.dispatchEvent(event); - return true; + return me; } - return r; + return me; } - //} - } -}) + } + }) +} \ No newline at end of file