diff --git a/web/javascript/ui_mixlab.js b/web/javascript/ui_mixlab.js
index 08fb6c9..0097aac 100644
--- a/web/javascript/ui_mixlab.js
+++ b/web/javascript/ui_mixlab.js
@@ -713,202 +713,208 @@ app.registerExtension({
this.setDirty(true, true)
}
},
- async setup () {
- // Add canvas menu options
- const orig = LGraphCanvas.prototype.getCanvasMenuOptions
+ setup () {
+ setTimeout(async () => {
+ // Add canvas menu options
+ const orig = LGraphCanvas.prototype.getCanvasMenuOptions
- const apps = await get_my_app()
- // console.log('apps',apps)
- LGraphCanvas.prototype.getCanvasMenuOptions = function () {
- const options = orig.apply(this, arguments)
+ const apps = await get_my_app()
+ // console.log('apps',apps)
+ LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+ const options = orig.apply(this, arguments)
- options.push(null, {
- content: `Nodes Map ♾️Mixlab`,
- disabled: false,
- callback: async () => {
- nodesMap =
- nodesMap && Object.keys(nodesMap).length > 0
- ? nodesMap
- : await getCustomnodeMappings('url')
+ options.push(
+ null,
+ {
+ content: `Nodes Map ♾️Mixlab`,
+ disabled: false,
+ callback: async () => {
+ nodesMap =
+ nodesMap && Object.keys(nodesMap).length > 0
+ ? nodesMap
+ : await getCustomnodeMappings('url')
- const nodesDiv = document.createDocumentFragment()
- const nodes = (await app.graphToPrompt()).output
+ const nodesDiv = document.createDocumentFragment()
+ const nodes = (await app.graphToPrompt()).output
- // console.log('[Mixlab]', 'loaded graph node: ', app)
- let div =
- document.querySelector('#mixlab_find_the_node') ||
- document.createElement('div')
- div.id = 'mixlab_find_the_node'
- div.style = `
- flex-direction: column;
- align-items: end;
- display:flex;position: absolute;
- top: 50px; left: 50px; width: 200px;
- color: var(--descrip-text);
- background-color: var(--comfy-menu-bg);
- padding: 10px;
- border: 1px solid black;z-index: 999999999;padding-top: 0;`
+ // console.log('[Mixlab]', 'loaded graph node: ', app)
+ let div =
+ document.querySelector('#mixlab_find_the_node') ||
+ document.createElement('div')
+ div.id = 'mixlab_find_the_node'
+ div.style = `
+ flex-direction: column;
+ align-items: end;
+ display:flex;position: absolute;
+ top: 50px; left: 50px; width: 200px;
+ color: var(--descrip-text);
+ background-color: var(--comfy-menu-bg);
+ padding: 10px;
+ border: 1px solid black;z-index: 999999999;padding-top: 0;`
- div.innerHTML = ''
+ div.innerHTML = ''
- let btn = document.createElement('div')
- btn.style = `display: flex;
- width: calc(100% - 24px);
- justify-content: space-between;
- align-items: center;
- padding: 0 12px;
- height: 44px;`
- let btnB = document.createElement('button')
- let textB = document.createElement('p')
- btn.appendChild(textB)
- btn.appendChild(btnB)
- textB.style.fontSize = '12px'
- textB.innerText = `Locate and navigate nodes ♾️Mixlab`
+ let btn = document.createElement('div')
+ btn.style = `display: flex;
+ width: calc(100% - 24px);
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 12px;
+ height: 44px;`
+ let btnB = document.createElement('button')
+ let textB = document.createElement('p')
+ btn.appendChild(textB)
+ btn.appendChild(btnB)
+ textB.style.fontSize = '12px'
+ textB.innerText = `Locate and navigate nodes ♾️Mixlab`
- btnB.style = `float: right; border: none; color: var(--input-text);
- background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
- btnB.addEventListener('click', () => {
- div.style.display = 'none'
- })
- btnB.innerText = 'X'
-
- // 悬浮框拖动事件
- div.addEventListener('mousedown', function (e) {
- var startX = e.clientX
- var startY = e.clientY
- var offsetX = div.offsetLeft
- var offsetY = div.offsetTop
-
- function moveBox (e) {
- var newX = e.clientX
- var newY = e.clientY
- var deltaX = newX - startX
- var deltaY = newY - startY
- div.style.left = offsetX + deltaX + 'px'
- div.style.top = offsetY + deltaY + 'px'
- }
-
- function stopMoving () {
- document.removeEventListener('mousemove', moveBox)
- document.removeEventListener('mouseup', stopMoving)
- }
-
- document.addEventListener('mousemove', moveBox)
- document.addEventListener('mouseup', stopMoving)
- })
-
- div.appendChild(btn)
-
- const updateNodes = (ns, nd) => {
- for (let nodeId in ns) {
- let n = ns[nodeId].class_type
- if (nodesMap[n]) {
- const { url, title } = nodesMap[n]
- let d = document.createElement('button')
- d.style = `text-align: left;margin:6px;color: var(--input-text);
- background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
- d.addEventListener('click', () => {
- console.log('node')
- const node = app.graph.getNodeById(nodeId)
-
- if (!node) return
- app.canvas.centerOnNode(node)
- app.canvas.setZoom(1)
- })
- d.addEventListener('mouseover', async () => {
- // console.log('mouseover')
- let n = (await app.graphToPrompt()).output
- if (!deepEqual(n, ns)) {
- nd.innerHTML = ''
- updateNodes(n, nd)
- }
- })
-
- d.innerHTML = `
- ${'#' + nodeId} ${n}
- 🔗
- `
- d.title = title
-
- nd.appendChild(d)
- }
- }
- }
-
- let nodesDivv = document.createElement('div')
-
- for (let nodeId in nodes) {
- let n = nodes[nodeId].class_type
- if (nodesMap[n]) {
- const { url, title: _title } = nodesMap[n]
- let title = app.graph.getNodeById(nodeId).title || _title
- let d = document.createElement('button')
- d.style = `text-align: left;margin:6px;color: var(--input-text);
- background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
- d.addEventListener('click', () => {
- console.log('click')
- const node = app.graph.getNodeById(nodeId)
- if (!node) return
- app.canvas.centerOnNode(node)
- app.canvas.setZoom(1)
+ btnB.style = `float: right; border: none; color: var(--input-text);
+ background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
+ btnB.addEventListener('click', () => {
+ div.style.display = 'none'
})
- d.addEventListener('mouseover', async () => {
- console.log('mouseover')
- let n = (await app.graphToPrompt()).output
- if (!deepEqual(n, nodes)) {
- nodesDivv.innerHTML = ''
- updateNodes(n, nodesDivv)
+ btnB.innerText = 'X'
+
+ // 悬浮框拖动事件
+ div.addEventListener('mousedown', function (e) {
+ var startX = e.clientX
+ var startY = e.clientY
+ var offsetX = div.offsetLeft
+ var offsetY = div.offsetTop
+
+ function moveBox (e) {
+ var newX = e.clientX
+ var newY = e.clientY
+ var deltaX = newX - startX
+ var deltaY = newY - startY
+ div.style.left = offsetX + deltaX + 'px'
+ div.style.top = offsetY + deltaY + 'px'
}
+
+ function stopMoving () {
+ document.removeEventListener('mousemove', moveBox)
+ document.removeEventListener('mouseup', stopMoving)
+ }
+
+ document.addEventListener('mousemove', moveBox)
+ document.addEventListener('mouseup', stopMoving)
})
- d.innerHTML = `
- ${'#' + nodeId} ${title}
- 🔗
- `
- d.title = n
+ div.appendChild(btn)
- nodesDiv.appendChild(d)
- }
- }
+ const updateNodes = (ns, nd) => {
+ for (let nodeId in ns) {
+ let n = ns[nodeId].class_type
+ if (nodesMap[n]) {
+ const { url, title } = nodesMap[n]
+ let d = document.createElement('button')
+ d.style = `text-align: left;margin:6px;color: var(--input-text);
+ background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
+ d.addEventListener('click', () => {
+ console.log('node')
+ const node = app.graph.getNodeById(nodeId)
- nodesDivv.appendChild(nodesDiv)
- nodesDivv.style = `overflow: scroll;
- height: 70vh;width: 100%;`
-
- div.appendChild(nodesDivv)
-
- if (!document.querySelector('#mixlab_find_the_node'))
- document.body.appendChild(div)
- }
- },{
- content: 'Workflow App ♾️Mixlab',
- has_submenu: true,
- disabled: false,
- submenu: {
- options: Array.from(apps, a => {
- return {
- content: a.name,
- callback: async () => {
- try {
- let item = (await get_my_app(a.filename))[0]
- if (item) {
- // console.log(item.data)
- app.loadGraphData(item.data)
- setTimeout(() => {
- const node = app.graph._nodes_in_order[0]
if (!node) return
app.canvas.centerOnNode(node)
- app.canvas.setZoom(0.5)
- }, 1000)
- }
- } catch (error) {}
- }
- }
- })
- }
- })
+ app.canvas.setZoom(1)
+ })
+ d.addEventListener('mouseover', async () => {
+ // console.log('mouseover')
+ let n = (await app.graphToPrompt()).output
+ if (!deepEqual(n, ns)) {
+ nd.innerHTML = ''
+ updateNodes(n, nd)
+ }
+ })
- return options
- }
+ d.innerHTML = `
+ ${'#' + nodeId} ${n}
+ 🔗
+ `
+ d.title = title
+
+ nd.appendChild(d)
+ }
+ }
+ }
+
+ let nodesDivv = document.createElement('div')
+
+ for (let nodeId in nodes) {
+ let n = nodes[nodeId].class_type
+ if (nodesMap[n]) {
+ const { url, title: _title } = nodesMap[n]
+ let title = app.graph.getNodeById(nodeId).title || _title
+ let d = document.createElement('button')
+ d.style = `text-align: left;margin:6px;color: var(--input-text);
+ background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
+ d.addEventListener('click', () => {
+ console.log('click')
+ const node = app.graph.getNodeById(nodeId)
+ if (!node) return
+ app.canvas.centerOnNode(node)
+ app.canvas.setZoom(1)
+ })
+ d.addEventListener('mouseover', async () => {
+ console.log('mouseover')
+ let n = (await app.graphToPrompt()).output
+ if (!deepEqual(n, nodes)) {
+ nodesDivv.innerHTML = ''
+ updateNodes(n, nodesDivv)
+ }
+ })
+
+ d.innerHTML = `
+ ${'#' + nodeId} ${title}
+ 🔗
+ `
+ d.title = n
+
+ nodesDiv.appendChild(d)
+ }
+ }
+
+ nodesDivv.appendChild(nodesDiv)
+ nodesDivv.style = `overflow: scroll;
+ height: 70vh;width: 100%;`
+
+ div.appendChild(nodesDivv)
+
+ if (!document.querySelector('#mixlab_find_the_node'))
+ document.body.appendChild(div)
+ }
+ },
+ {
+ content: 'Workflow App ♾️Mixlab',
+ has_submenu: true,
+ disabled: false,
+ submenu: {
+ options: Array.from(apps, a => {
+ return {
+ content: a.name,
+ callback: async () => {
+ try {
+ let item = (await get_my_app(a.filename))[0]
+ if (item) {
+ // console.log(item.data)
+ app.loadGraphData(item.data)
+ setTimeout(() => {
+ const node = app.graph._nodes_in_order[0]
+ if (!node) return
+ app.canvas.centerOnNode(node)
+ app.canvas.setZoom(0.5)
+ }, 1000)
+ }
+ } catch (error) {}
+ }
+ }
+ })
+ }
+ }
+ )
+
+ return options
+ }
+ }, 1000)
}
})