Spaces:
Running
on
Zero
Running
on
Zero
| import { app } from '../../../scripts/app.js' | |
| import { api } from '../../../scripts/api.js' | |
| import { setWidgetConfig } from '../../../extensions/core/widgetInputs.js' | |
| import { applyTextReplacements } from "../../../scripts/utils.js"; | |
| function chainCallback(object, property, callback) { | |
| if (object == undefined) { | |
| //This should not happen. | |
| console.error("Tried to add callback to non-existant object") | |
| return; | |
| } | |
| if (property in object && object[property]) { | |
| const callback_orig = object[property] | |
| object[property] = function () { | |
| const r = callback_orig.apply(this, arguments); | |
| return callback.apply(this, arguments) ?? r | |
| }; | |
| } else { | |
| object[property] = callback; | |
| } | |
| } | |
| function injectHidden(widget) { | |
| widget.computeSize = (target_width) => { | |
| if (widget.hidden) { | |
| return [0, -4]; | |
| } | |
| return [target_width, 20]; | |
| }; | |
| widget._type = widget.type | |
| Object.defineProperty(widget, "type", { | |
| set : function(value) { | |
| widget._type = value; | |
| }, | |
| get : function() { | |
| if (widget.hidden) { | |
| return "hidden"; | |
| } | |
| return widget._type; | |
| } | |
| }); | |
| } | |
| const convDict = { | |
| VHS_LoadImages : ["directory", null, "image_load_cap", "skip_first_images", "select_every_nth"], | |
| VHS_LoadImagesPath : ["directory", "image_load_cap", "skip_first_images", "select_every_nth"], | |
| VHS_VideoCombine : ["frame_rate", "loop_count", "filename_prefix", "format", "pingpong", "save_image"], | |
| VHS_LoadVideo : ["video", "force_rate", "force_size", "frame_load_cap", "skip_first_frames", "select_every_nth"], | |
| VHS_LoadVideoPath : ["video", "force_rate", "force_size", "frame_load_cap", "skip_first_frames", "select_every_nth"], | |
| }; | |
| const renameDict = {VHS_VideoCombine : {save_output : "save_image"}} | |
| function useKVState(nodeType) { | |
| chainCallback(nodeType.prototype, "onNodeCreated", function () { | |
| chainCallback(this, "onConfigure", function(info) { | |
| if (!this.widgets) { | |
| //Node has no widgets, there is nothing to restore | |
| return | |
| } | |
| if (typeof(info.widgets_values) != "object") { | |
| //widgets_values is in some unknown inactionable format | |
| return | |
| } | |
| let widgetDict = info.widgets_values | |
| if (info.widgets_values.length) { | |
| //widgets_values is in the old list format | |
| if (this.type in convDict) { | |
| //widget does not have a conversion format provided | |
| let convList = convDict[this.type]; | |
| if(info.widgets_values.length >= convList.length) { | |
| //has all required fields | |
| widgetDict = {} | |
| for (let i = 0; i < convList.length; i++) { | |
| if(!convList[i]) { | |
| //Element should not be processed (upload button on load image sequence) | |
| continue | |
| } | |
| widgetDict[convList[i]] = info.widgets_values[i]; | |
| } | |
| } else { | |
| //widgets_values is missing elements marked as required | |
| //let it fall through to failure state | |
| } | |
| } | |
| } | |
| if ('force_size' in widgetDict) { | |
| //force size has been phased out, Migrate state | |
| if (widgetDict.force_size.includes?.('x')) { | |
| let sizes = widgetDict.force_size.split('x') | |
| if (sizes[0] != '?') { | |
| widgetDict.custom_width = parseInt(sizes[0]) | |
| } else { | |
| widgetDict.custom_width = 0 | |
| } | |
| if (sizes[1] != '?') { | |
| widgetDict.custom_height = parseInt(sizes[1]) | |
| } else { | |
| widgetDict.custom_height = 0 | |
| } | |
| } else { | |
| if (['Disabled', 'Custom Height'].includes(widgetDict.force_size)) { | |
| widgetDict.custom_width = 0 | |
| } | |
| if (['Disabled', 'Custom Width'].includes(widgetDict.force_size)) { | |
| widgetDict.custom_height = 0 | |
| } | |
| } | |
| } | |
| if (widgetDict.videopreview?.params?.force_size) { | |
| delete widgetDict.videopreview.params.force_size | |
| } | |
| let inputs = {} | |
| for (let i of this.inputs) { | |
| inputs[i.name] = i | |
| } | |
| if (widgetDict.length == undefined) { | |
| for (let w of this.widgets) { | |
| if (w.type =="button") { | |
| continue | |
| } | |
| if (w.name in widgetDict) { | |
| w.value = widgetDict[w.name]; | |
| w.callback?.(w.value) | |
| } else { | |
| //Check for a legacy name that needs migrating | |
| if (this.type in renameDict && w.name in renameDict[this.type]) { | |
| if (renameDict[this.type][w.name] in widgetDict) { | |
| w.value = widgetDict[renameDict[this.type][w.name]] | |
| w.callback?.(w.value) | |
| continue | |
| } | |
| } | |
| //attempt to restore default value | |
| let inputs = LiteGraph.getNodeType(this.type).nodeData.input; | |
| let initialValue = null; | |
| if (inputs?.required?.hasOwnProperty(w.name)) { | |
| if (inputs.required[w.name][1]?.hasOwnProperty("default")) { | |
| initialValue = inputs.required[w.name][1].default; | |
| } else if (inputs.required[w.name][0].length) { | |
| initialValue = inputs.required[w.name][0][0]; | |
| } | |
| } else if (inputs?.optional?.hasOwnProperty(w.name)) { | |
| if (inputs.optional[w.name][1]?.hasOwnProperty("default")) { | |
| initialValue = inputs.optional[w.name][1].default; | |
| } else if (inputs.optional[w.name][0].length) { | |
| initialValue = inputs.optional[w.name][0][0]; | |
| } | |
| } | |
| if (initialValue) { | |
| w.value = initialValue; | |
| w.callback?.(w.value) | |
| } | |
| } | |
| if (w.name in inputs && w.config) { | |
| setWidgetConfig(inputs[w.name], w.config, w) | |
| } | |
| } | |
| } else { | |
| //Saved data was not a map made by this method | |
| //and a conversion dict for it does not exist | |
| //It's likely an array and that has been blindly applied | |
| if (info?.widgets_values?.length != this.widgets.length) { | |
| //Widget could not have restored properly | |
| //Note if multiple node loads fail, only the latest error dialog displays | |
| app.ui.dialog.show("Failed to restore node: " + this.title + "\nPlease remove and re-add it.") | |
| this.bgcolor = "#C00" | |
| } | |
| } | |
| }); | |
| chainCallback(this, "onSerialize", function(info) { | |
| info.widgets_values = {}; | |
| if (!this.widgets) { | |
| //object has no widgets, there is nothing to store | |
| return; | |
| } | |
| for (let w of this.widgets) { | |
| info.widgets_values[w.name] = w.value; | |
| } | |
| }); | |
| }) | |
| } | |
| var helpDOM; | |
| if (!app.helpDOM) { | |
| helpDOM = document.createElement("div"); | |
| app.VHSHelp = helpDOM | |
| } | |
| function initHelpDOM() { | |
| let parentDOM = document.createElement("div"); | |
| parentDOM.className = "VHS_floatinghelp" | |
| document.body.appendChild(parentDOM) | |
| parentDOM.appendChild(helpDOM) | |
| helpDOM.className = "litegraph"; | |
| let scrollbarStyle = document.createElement('style'); | |
| scrollbarStyle.innerHTML = ` | |
| .VHS_floatinghelp { | |
| scrollbar-width: 6px; | |
| scrollbar-color: #0003 #0000; | |
| &::-webkit-scrollbar { | |
| background: transparent; | |
| width: 6px; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| background: #0005; | |
| border-radius: 20px | |
| } | |
| &::-webkit-scrollbar-button { | |
| display: none; | |
| } | |
| } | |
| .VHS_loopedvideo::-webkit-media-controls-mute-button { | |
| display:none; | |
| } | |
| .VHS_loopedvideo::-webkit-media-controls-fullscreen-button { | |
| display:none; | |
| } | |
| ` | |
| scrollbarStyle.id = 'scroll-properties' | |
| parentDOM.appendChild(scrollbarStyle) | |
| chainCallback(app.canvas, "onDrawForeground", function (ctx, visible_rect){ | |
| let n = helpDOM.node | |
| if (!n || !n?.graph) { | |
| parentDOM.style['left'] = '-5000px' | |
| return | |
| } | |
| //draw : function(ctx, node, widgetWidth, widgetY, height) { | |
| //update widget position, even if off screen | |
| const transform = ctx.getTransform(); | |
| const scale = app.canvas.ds.scale;//gets the litegraph zoom | |
| //calculate coordinates with account for browser zoom | |
| const bcr = app.canvas.canvas.getBoundingClientRect() | |
| const x = transform.e*scale/transform.a + bcr.x; | |
| const y = transform.f*scale/transform.a + bcr.y; | |
| //TODO: text reflows at low zoom. investigate alternatives | |
| Object.assign(parentDOM.style, { | |
| left: (x+(n.pos[0] + n.size[0]+15)*scale) + "px", | |
| top: (y+(n.pos[1]-LiteGraph.NODE_TITLE_HEIGHT)*scale) + "px", | |
| width: "400px", | |
| minHeight: "100px", | |
| maxHeight: "600px", | |
| overflowY: 'scroll', | |
| transformOrigin: '0 0', | |
| transform: 'scale(' + scale + ',' + scale +')', | |
| fontSize: '18px', | |
| backgroundColor: LiteGraph.NODE_DEFAULT_BGCOLOR, | |
| boxShadow: '0 0 10px black', | |
| borderRadius: '4px', | |
| padding: '3px', | |
| zIndex: 3, | |
| position: "absolute", | |
| display: 'inline', | |
| }); | |
| }); | |
| function setCollapse(el, doCollapse) { | |
| if (doCollapse) { | |
| el.children[0].children[0].innerHTML = '+' | |
| Object.assign(el.children[1].style, { | |
| color: '#CCC', | |
| overflowX: 'hidden', | |
| width: '0px', | |
| minWidth: 'calc(100% - 20px)', | |
| textOverflow: 'ellipsis', | |
| whiteSpace: 'nowrap', | |
| }) | |
| for (let child of el.children[1].children) { | |
| if (child.style.display != 'none'){ | |
| child.origDisplay = child.style.display | |
| } | |
| child.style.display = 'none' | |
| } | |
| } else { | |
| el.children[0].children[0].innerHTML = '-' | |
| Object.assign(el.children[1].style, { | |
| color: '', | |
| overflowX: '', | |
| width: '100%', | |
| minWidth: '', | |
| textOverflow: '', | |
| whiteSpace: '', | |
| }) | |
| for (let child of el.children[1].children) { | |
| child.style.display = child.origDisplay | |
| } | |
| } | |
| } | |
| helpDOM.collapseOnClick = function() { | |
| let doCollapse = this.children[0].innerHTML == '-' | |
| setCollapse(this.parentElement, doCollapse) | |
| } | |
| helpDOM.selectHelp = function(name, value) { | |
| //attempt to navigate to name in help | |
| function collapseUnlessMatch(items,t) { | |
| var match = items.querySelector('[vhs_title="' + t + '"]') | |
| if (!match) { | |
| for (let i of items.children) { | |
| if (i.innerHTML.slice(0,t.length+5).includes(t)) { | |
| match = i | |
| break | |
| } | |
| } | |
| } | |
| if (!match) { | |
| return null | |
| } | |
| //For longer documentation items with fewer collapsable elements, | |
| //scroll to make sure the entirety of the selected item is visible | |
| //This has the unfortunate side effect of trying to scroll the main | |
| //window if the documentation windows is forcibly offscreen, | |
| //but it's easy to simply scroll the main window back and seems to | |
| //have no visual side effects | |
| match.scrollIntoView(false) | |
| window.scrollTo(0,0) | |
| for (let i of items.querySelectorAll('.VHS_collapse')) { | |
| if (i.contains(match)) { | |
| setCollapse(i, false) | |
| } else { | |
| setCollapse(i, true) | |
| } | |
| } | |
| return match | |
| } | |
| let target = collapseUnlessMatch(helpDOM, name) | |
| if (target && value) { | |
| collapseUnlessMatch(target, value) | |
| } | |
| } | |
| let titleContext = document.createElement("canvas").getContext("2d") | |
| titleContext.font = app.canvas.title_text_font; | |
| helpDOM.calculateTitleLength = function(text) { | |
| return titleContext.measureText(text).width | |
| } | |
| helpDOM.addHelp = function(node, nodeType, description) { | |
| if (!description) { | |
| return | |
| } | |
| //Pad computed size for the clickable question mark | |
| let originalComputeSize = node.computeSize | |
| node.computeSize = function() { | |
| let size = originalComputeSize.apply(this, arguments) | |
| if (!this.title) { | |
| return size | |
| } | |
| let title_width = helpDOM.calculateTitleLength(this.title) | |
| size[0] = Math.max(size[0], title_width + LiteGraph.NODE_TITLE_HEIGHT*2) | |
| return size | |
| } | |
| node.description = description | |
| chainCallback(node, "onDrawForeground", function (ctx) { | |
| if (this?.flags?.collapsed) { | |
| return | |
| } | |
| //draw question mark | |
| ctx.save() | |
| ctx.font = 'bold 20px Arial' | |
| ctx.fillText("?", this.size[0]-17, -8) | |
| ctx.restore() | |
| }) | |
| chainCallback(node, "onMouseDown", function (e, pos, canvas) { | |
| if (this?.flags?.collapsed) { | |
| return | |
| } | |
| //On click would be preferred, but this'll be good enough | |
| if (pos[1] < 0 && pos[0] + LiteGraph.NODE_TITLE_HEIGHT > this.size[0]) { | |
| //corner question mark clicked | |
| if (helpDOM.node == this) { | |
| helpDOM.node = undefined | |
| } else { | |
| helpDOM.node = this; | |
| helpDOM.innerHTML = this.description || "no help provided " | |
| for (let e of helpDOM.querySelectorAll('.VHS_collapse')) { | |
| e.children[0].onclick = helpDOM.collapseOnClick | |
| e.children[0].style.cursor = 'pointer' | |
| } | |
| for (let e of helpDOM.querySelectorAll('.VHS_precollapse')) { | |
| setCollapse(e, true) | |
| } | |
| for (let e of helpDOM.querySelectorAll('.VHS_loopedvideo')) { | |
| e?.play() | |
| } | |
| helpDOM.parentElement.scrollTo(0,0) | |
| } | |
| return true | |
| } | |
| }) | |
| let timeout = null | |
| chainCallback(node, "onMouseMove", function (e, pos, canvas) { | |
| if (timeout) { | |
| clearTimeout(timeout) | |
| timeout = null | |
| } | |
| if (helpDOM.node != this) { | |
| return | |
| } | |
| timeout = setTimeout(() => { | |
| let n = this | |
| if (pos[0] > 0 && pos[0] < n.size[0] | |
| && pos[1] > 0 && pos[1] < n.size[1]) { | |
| //TODO: provide help specific to element clicked | |
| let inputRows = Math.max(n.inputs?.length || 0, n.outputs?.length || 0) | |
| if (pos[1] < LiteGraph.NODE_SLOT_HEIGHT * inputRows) { | |
| let row = Math.floor((pos[1] - 7) / LiteGraph.NODE_SLOT_HEIGHT) | |
| if (pos[0] < n.size[0]/2) { | |
| if (row < n.inputs.length) { | |
| helpDOM.selectHelp(n.inputs[row].name) | |
| } | |
| } else { | |
| if (row < n.outputs.length) { | |
| helpDOM.selectHelp(n.outputs[row].name) | |
| } | |
| } | |
| } else { | |
| //probably widget, but widgets have variable height. | |
| let basey = LiteGraph.NODE_SLOT_HEIGHT * inputRows + 6 | |
| for (let w of n.widgets) { | |
| if (w.y) { | |
| basey = w.y | |
| } | |
| let wheight = LiteGraph.NODE_WIDGET_HEIGHT+4 | |
| if (w.computeSize) { | |
| wheight = w.computeSize(n.size[0])[1] | |
| } | |
| if (pos[1] < basey + wheight) { | |
| helpDOM.selectHelp(w.name, w.value) | |
| break | |
| } | |
| basey += wheight | |
| } | |
| } | |
| } | |
| }, 500) | |
| }) | |
| chainCallback(node, "onMouseLeave", function (e, pos, canvas) { | |
| if (timeout) { | |
| clearTimeout(timeout) | |
| timeout = null | |
| } | |
| }); | |
| } | |
| } | |
| function fitHeight(node) { | |
| node.setSize([node.size[0], node.computeSize([node.size[0], node.size[1]])[1]]) | |
| node?.graph?.setDirtyCanvas(true); | |
| } | |
| async function uploadFile(file) { | |
| //TODO: Add uploaded file to cache with Cache.put()? | |
| try { | |
| // Wrap file in formdata so it includes filename | |
| const body = new FormData(); | |
| const i = file.webkitRelativePath.lastIndexOf('/'); | |
| const subfolder = file.webkitRelativePath.slice(0,i+1) | |
| const new_file = new File([file], file.name, { | |
| type: file.type, | |
| lastModified: file.lastModified, | |
| }); | |
| body.append("image", new_file); | |
| if (i > 0) { | |
| body.append("subfolder", subfolder); | |
| } | |
| const resp = await api.fetchApi("/upload/image", { | |
| method: "POST", | |
| body, | |
| }); | |
| if (resp.status === 200) { | |
| return resp | |
| } else { | |
| alert(resp.status + " - " + resp.statusText); | |
| } | |
| } catch (error) { | |
| alert(error); | |
| } | |
| } | |
| function applyVHSAudioLinksFix(nodeType, nodeData, audio_slot) { | |
| chainCallback(nodeType.prototype, "onConnectionsChange", function(contype, slot, iscon, linfo) { | |
| if (contype == LiteGraph.OUTPUT && slot == audio_slot) { | |
| if (linfo.type == "VHS_AUDIO") { | |
| this.outputs[audio_slot].type = "AUDIO" | |
| let tnode = app.graph._nodes_by_id[linfo.target_id] | |
| let inputDef = LiteGraph.registered_node_types[tnode.type]?.nodeData?.input | |
| let has_migrated = true | |
| if (inputDef?.required) { | |
| for (let k in inputDef.required) { | |
| if (inputDef.required[k][0] == "VHS_AUDIO") { | |
| has_migrated = false | |
| break | |
| } | |
| } | |
| } | |
| if (has_migrated &&inputDef?.optional) { | |
| for (let k in inputDef.optional) { | |
| if (inputDef.optional[k][0] == "VHS_AUDIO") { | |
| has_migrated = false | |
| break | |
| } | |
| } | |
| } | |
| if (!has_migrated) { | |
| //need to add node and migrate | |
| app.ui.dialog.show("This workflow contains one or more nodes which use the old VHS_AUDIO format. They have been highlighted in red. An AudioToVHSAudio node must be added to convert to this legacy format") | |
| tnode.bgcolor = "#C00" | |
| } | |
| } | |
| } | |
| }) | |
| } | |
| function addVAEOutputToggle(nodeType, nodeData) { | |
| chainCallback(nodeType.prototype, "onConnectionsChange", function(contype, slot, iscon, linfo) { | |
| let slotType = this.inputs[slot]?.type | |
| if (contype == LiteGraph.INPUT && slotType == "VAE") { | |
| if (iscon && linfo) { | |
| if (this.linkTimeout) { | |
| clearTimeout(this.linkTimeout) | |
| this.linkTimeout = false | |
| } else if (this.outputs[0].type == "IMAGE") { | |
| this.linkTimeout = setTimeout(() => { | |
| if (this.outputs[0].type != "IMAGE") { | |
| return | |
| } | |
| this.linkTimeout = false | |
| this.disconnectOutput(0); | |
| }, 50) | |
| } | |
| this.outputs[0].name = 'LATENT'; | |
| this.outputs[0].type = 'LATENT'; | |
| } else{ | |
| if (this.outputs[0].type == "LATENT") { | |
| this.linkTimeout = setTimeout(() => { | |
| this.linkTimeout = false | |
| this.disconnectOutput(0); | |
| }, 50) | |
| } | |
| this.outputs[0].name = "IMAGE"; | |
| this.outputs[0].type = "IMAGE"; | |
| } | |
| } | |
| }); | |
| } | |
| function addVAEInputToggle(nodeType, nodeData) { | |
| chainCallback(nodeType.prototype, "onConnectionsChange", function(contype, slot, iscon, linf) { | |
| if (contype == LiteGraph.INPUT && slot == 3 && this.inputs[3].type == "VAE") { | |
| if (iscon && linf) { | |
| if (this.linkTimeout) { | |
| clearTimeout(this.linkTimeout) | |
| this.linkTimeout = false | |
| } else if (this.inputs[0].type == "IMAGE") { | |
| this.linkTimeout = setTimeout(() => { | |
| //workaround for out of order loading | |
| if (this.inputs[0].type != "IMAGE") { | |
| return | |
| } | |
| this.linkTimeout = false | |
| this.disconnectInput(0); | |
| }, 50) | |
| } | |
| this.inputs[0].type = 'LATENT'; | |
| } else { | |
| if (this.inputs[0].type == "LATENT") { | |
| this.linkTimeout = setTimeout(() => { | |
| this.linkTimeout = false | |
| this.disconnectInput(0); | |
| }, 50) | |
| } | |
| this.inputs[0].type = "IMAGE"; | |
| } | |
| } | |
| }); | |
| } | |
| function cloneType(nodeType, nodeData) { | |
| nodeData.output[0] = "VHS_DUMMY_NONE" | |
| chainCallback(nodeType.prototype, "onConnectionsChange", function(contype, slot, iscon, linf) { | |
| if (contype == LiteGraph.INPUT && slot == 0) { | |
| let new_type = "VHS_DUMMY_NONE" | |
| if (iscon && linf) { | |
| new_type = app.graph.getNodeById(linf.origin_id).outputs[linf.origin_slot].type | |
| } | |
| if (this.linkTimeout) { | |
| clearTimeout(this.linkTimeout) | |
| this.linkTimeout = false | |
| } | |
| this.linkTimeout = setTimeout(() => { | |
| if (this.outputs[0].type != new_type) { | |
| this.outputs[0].type = new_type | |
| this.disconnectOutput(0); | |
| } | |
| this.linkTimeout = false | |
| }, 50) | |
| } | |
| }); | |
| } | |
| function addDateFormatting(nodeType, field, timestamp_widget = false) { | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| const widget = this.widgets.find((w) => w.name === field); | |
| widget.serializeValue = () => { | |
| return applyTextReplacements(app, widget.value); | |
| }; | |
| }); | |
| } | |
| function addTimestampWidget(nodeType, nodeData, targetWidget) { | |
| const newWidgets = {}; | |
| for (let key in nodeData.input.required) { | |
| if (key == targetWidget) { | |
| //TODO: account for duplicate entries? | |
| newWidgets["timestamp_directory"] = ["BOOLEAN", {"default": true}] | |
| } | |
| newWidgets[key] = nodeData.input.required[key]; | |
| } | |
| nodeDta.input.required = newWidgets; | |
| chainCallback(nodeType.prototype, "onNodeCreated", function () { | |
| const directoryWidget = this.widgets.find((w) => w.name === "directory_name"); | |
| const timestampWidget = this.widgets.find((w) => w.name === "timestamp_directory"); | |
| directoryWidget.serializeValue = () => { | |
| if (timestampWidget.value) { | |
| //ignore actual value and return timestamp | |
| return formatDate("yyyy-MM-ddThh:mm:ss", new Date()); | |
| } | |
| return directoryWidget.value | |
| }; | |
| timestampWidget._value = value; | |
| Object.definteProperty(timestampWidget, "value", { | |
| set : function(value) { | |
| this._value = value; | |
| directoryWidget.disabled = value; | |
| }, | |
| get : function() { | |
| return this._value; | |
| } | |
| }); | |
| }); | |
| } | |
| function initializeLoadFormat(nodeType, nodeData) { | |
| if (!nodeData?.input?.optional?.format) { | |
| return | |
| } | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| let node = this | |
| let formatWidget = this.widgets.find((w) => w.name === "format") | |
| formatWidget.options.formats = nodeData.input.optional.format[1].formats | |
| let base = {} | |
| for (let widget of this.widgets) { | |
| if (['force_rate', 'custom_width', 'custom_height', | |
| 'frame_load_cap'].includes(widget.name)) { | |
| //TODO: filter these options? | |
| base[widget.name] = widget.options | |
| } | |
| } | |
| chainCallback(formatWidget, "callback", function(value) { | |
| let format = this.options.formats[value] | |
| if (!format) { | |
| return | |
| } | |
| if ('target_rate' in format) { | |
| format.force_rate = {'reset': format.target_rate} | |
| } | |
| if ('dim' in format) { | |
| format.custom_width = {'step': format.dim[0]*10, 'mod': format.dim[1]} | |
| format.custom_height = {'step': format.dim[0]*10, 'mod': format.dim[1]} | |
| if (format.dim[2]) { | |
| format.custom_width.reset = format.dim[2] | |
| } | |
| if (format.dim[3]) { | |
| format.custom_height.reset = format.dim[3] | |
| } | |
| } | |
| if ('frames' in format) { | |
| format.frame_load_cap = {'step': format.frames[0]*10, 'mod': format.frames[1]} | |
| } | |
| for (let widget of node.widgets) { | |
| if (widget.name in base) { | |
| let wasDefault = widget.options?.reset == widget.value | |
| widget.options = Object.assign({}, base[widget.name], format[widget.name]) | |
| if (wasDefault && widget.options.reset != undefined) { | |
| widget.value = widget.options.reset | |
| } | |
| widget.callback(widget.value) | |
| } | |
| } | |
| }); | |
| let capWidget = this.widgets.find((w) => w.name === "frame_load_cap") | |
| let previewWidget = this.widgets.find((w) => w.name === "videopreview") | |
| chainCallback(previewWidget, "updateSource", () => setTimeout(async () => { | |
| if (!previewWidget?.value?.params?.filename) { | |
| return | |
| } | |
| let qurl = api.apiURL('/vhs/queryvideo?' + new URLSearchParams(previewWidget.value.params)) | |
| let query = undefined | |
| try { | |
| let query_res = await fetch(qurl) | |
| query = await query_res.json() | |
| } catch(e) { | |
| return | |
| } | |
| if (!query?.loaded) { | |
| return | |
| } | |
| this.max_frames = query.loaded.frames | |
| }, 100)); | |
| capWidget.annotation = (value, width) => { | |
| if (!this.max_frames || value && value < this.max_frames) { | |
| return | |
| } | |
| let format = formatWidget.options.formats[formatWidget.value] | |
| const div = format?.frames?.[0] ?? 1 | |
| const mod = format?.frames?.[1] ?? 0 | |
| let loadable_frames = this.max_frames | |
| if ((this.max_frames % div) != mod) { | |
| loadable_frames = ((this.max_frames - mod)/div|0) * div + mod | |
| } | |
| return loadable_frames + "\u21FD" | |
| } | |
| }); | |
| } | |
| function addUploadWidget(nodeType, nodeData, widgetName, type="video") { | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| const pathWidget = this.widgets.find((w) => w.name === widgetName); | |
| const fileInput = document.createElement("input"); | |
| chainCallback(this, "onRemoved", () => { | |
| fileInput?.remove(); | |
| }); | |
| if (type == "folder") { | |
| Object.assign(fileInput, { | |
| type: "file", | |
| style: "display: none", | |
| webkitdirectory: true, | |
| onchange: async () => { | |
| const directory = fileInput.files[0].webkitRelativePath; | |
| const i = directory.lastIndexOf('/'); | |
| if (i <= 0) { | |
| throw "No directory found"; | |
| } | |
| const path = directory.slice(0,directory.lastIndexOf('/')) | |
| if (pathWidget.options.values.includes(path)) { | |
| alert("A folder of the same name already exists"); | |
| return; | |
| } | |
| let successes = 0; | |
| for(const file of fileInput.files) { | |
| if ((await uploadFile(file)).status == 200) { | |
| successes++; | |
| } else { | |
| //Upload failed, but some prior uploads may have succeeded | |
| //Stop future uploads to prevent cascading failures | |
| //and only add to list if an upload has succeeded | |
| if (successes > 0) { | |
| break | |
| } else { | |
| return; | |
| } | |
| } | |
| } | |
| pathWidget.options.values.push(path); | |
| pathWidget.value = path; | |
| if (pathWidget.callback) { | |
| pathWidget.callback(path) | |
| } | |
| }, | |
| }); | |
| } else if (type == "video") { | |
| Object.assign(fileInput, { | |
| type: "file", | |
| accept: "video/webm,video/mp4,video/mkv,image/gif", | |
| style: "display: none", | |
| onchange: async () => { | |
| if (fileInput.files.length) { | |
| let resp = await uploadFile(fileInput.files[0]) | |
| if (resp.status != 200) { | |
| //upload failed and file can not be added to options | |
| return; | |
| } | |
| const filename = (await resp.json()).name; | |
| pathWidget.options.values.push(filename); | |
| pathWidget.value = filename; | |
| if (pathWidget.callback) { | |
| pathWidget.callback(filename) | |
| } | |
| } | |
| }, | |
| }); | |
| } else if (type == "audio") { | |
| Object.assign(fileInput, { | |
| type: "file", | |
| accept: "audio/mpeg,audio/wav,audio/x-wav,audio/ogg", | |
| style: "display: none", | |
| onchange: async () => { | |
| if (fileInput.files.length) { | |
| let resp = await uploadFile(fileInput.files[0]) | |
| if (resp.status != 200) { | |
| //upload failed and file can not be added to options | |
| return; | |
| } | |
| const filename = (await resp.json()).name; | |
| pathWidget.options.values.push(filename); | |
| pathWidget.value = filename; | |
| if (pathWidget.callback) { | |
| pathWidget.callback(filename) | |
| } | |
| } | |
| }, | |
| }); | |
| }else { | |
| throw "Unknown upload type" | |
| } | |
| document.body.append(fileInput); | |
| let uploadWidget = this.addWidget("button", "choose " + type + " to upload", "image", () => { | |
| //clear the active click event | |
| app.canvas.node_widget = null | |
| fileInput.click(); | |
| }); | |
| uploadWidget.options.serialize = false; | |
| }); | |
| } | |
| function addVideoPreview(nodeType, isInput=true) { | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| var element = document.createElement("div"); | |
| const previewNode = this; | |
| var previewWidget = this.addDOMWidget("videopreview", "preview", element, { | |
| serialize: false, | |
| hideOnZoom: false, | |
| getValue() { | |
| return element.value; | |
| }, | |
| setValue(v) { | |
| element.value = v; | |
| }, | |
| }); | |
| previewWidget.computeSize = function(width) { | |
| if (this.aspectRatio && !this.parentEl.hidden) { | |
| let height = (previewNode.size[0]-20)/ this.aspectRatio + 10; | |
| if (!(height > 0)) { | |
| height = 0; | |
| } | |
| this.computedHeight = height + 10; | |
| return [width, height]; | |
| } | |
| return [width, -4];//no loaded src, widget should not display | |
| } | |
| element.addEventListener('contextmenu', (e) => { | |
| e.preventDefault() | |
| return app.canvas._mousedown_callback(e) | |
| }, true); | |
| element.addEventListener('pointerdown', (e) => { | |
| e.preventDefault() | |
| return app.canvas._mousedown_callback(e) | |
| }, true); | |
| element.addEventListener('mousewheel', (e) => { | |
| e.preventDefault() | |
| return app.canvas._mousewheel_callback(e) | |
| }, true); | |
| previewWidget.value = {hidden: false, paused: false, params: {}, | |
| muted: app.ui.settings.getSettingValue("VHS.DefaultMute")} | |
| previewWidget.parentEl = document.createElement("div"); | |
| previewWidget.parentEl.className = "vhs_preview"; | |
| previewWidget.parentEl.style['width'] = "100%" | |
| element.appendChild(previewWidget.parentEl); | |
| previewWidget.videoEl = document.createElement("video"); | |
| previewWidget.videoEl.controls = false; | |
| previewWidget.videoEl.loop = true; | |
| previewWidget.videoEl.muted = true; | |
| previewWidget.videoEl.style['width'] = "100%" | |
| previewWidget.videoEl.addEventListener("loadedmetadata", () => { | |
| previewWidget.aspectRatio = previewWidget.videoEl.videoWidth / previewWidget.videoEl.videoHeight; | |
| fitHeight(this); | |
| }); | |
| previewWidget.videoEl.addEventListener("error", () => { | |
| //TODO: consider a way to properly notify the user why a preview isn't shown. | |
| previewWidget.parentEl.hidden = true; | |
| fitHeight(this); | |
| }); | |
| previewWidget.videoEl.onmouseenter = () => { | |
| previewWidget.videoEl.muted = previewWidget.value.muted | |
| }; | |
| previewWidget.videoEl.onmouseleave = () => { | |
| previewWidget.videoEl.muted = true; | |
| }; | |
| previewWidget.imgEl = document.createElement("img"); | |
| previewWidget.imgEl.style['width'] = "100%" | |
| previewWidget.imgEl.hidden = true; | |
| previewWidget.imgEl.onload = () => { | |
| previewWidget.aspectRatio = previewWidget.imgEl.naturalWidth / previewWidget.imgEl.naturalHeight; | |
| fitHeight(this); | |
| }; | |
| previewWidget.parentEl.appendChild(previewWidget.videoEl) | |
| previewWidget.parentEl.appendChild(previewWidget.imgEl) | |
| var timeout = null; | |
| this.updateParameters = (params, force_update) => { | |
| if (!previewWidget.value.params) { | |
| if(typeof(previewWidget.value != 'object')) { | |
| previewWidget.value = {hidden: false, paused: false} | |
| } | |
| previewWidget.value.params = {} | |
| } | |
| Object.assign(previewWidget.value.params, params) | |
| if (!force_update && | |
| app.ui.settings.getSettingValue("VHS.AdvancedPreviews") == 'Never') { | |
| return; | |
| } | |
| if (timeout) { | |
| clearTimeout(timeout); | |
| } | |
| if (force_update) { | |
| previewWidget.updateSource(); | |
| } else { | |
| timeout = setTimeout(() => previewWidget.updateSource(),100); | |
| } | |
| }; | |
| previewWidget.updateSource = function () { | |
| if (this.value.params == undefined) { | |
| return; | |
| } | |
| let params = {} | |
| let advp = app.ui.settings.getSettingValue("VHS.AdvancedPreviews") | |
| Object.assign(params, this.value.params);//shallow copy | |
| params.timestamp = Date.now() | |
| this.parentEl.hidden = this.value.hidden; | |
| if (params.format?.split('/')[0] == 'video' | |
| || advp != 'Never' && (params.format?.split('/')[1] == 'gif') | |
| || params.format == 'folder') { | |
| this.videoEl.autoplay = !this.value.paused && !this.value.hidden; | |
| let target_width = 256 | |
| if (previewWidget.element?.style?.width) { | |
| //overscale to allow scrolling. Endpoint won't return higher than native | |
| target_width = previewWidget.element.style.width.slice(0,-2)*2; | |
| } | |
| let minWidth = app.ui.settings.getSettingValue("VHS.AdvancedPreviewsMinWidth") | |
| if (target_width < minWidth) { | |
| target_width = minWidth | |
| } | |
| if (!params.custom_width || !params.custom_height) { | |
| params.force_size = target_width+"x?" | |
| } else { | |
| let ar = params.custom_width/params.custom_height | |
| params.force_size = target_width+"x"+(target_width/ar) | |
| } | |
| params.deadline = app.ui.settings.getSettingValue("VHS.AdvancedPreviewsDeadline") | |
| if (advp == 'Never' || advp == 'Input Only' && !isInput) { | |
| this.videoEl.src = api.apiURL('/view?' + new URLSearchParams(params)); | |
| } else { | |
| this.videoEl.src = api.apiURL('/vhs/viewvideo?' + new URLSearchParams(params)); | |
| } | |
| this.videoEl.hidden = false; | |
| this.imgEl.hidden = true; | |
| } else if (params.format?.split('/')[0] == 'image'){ | |
| //Is animated image | |
| this.imgEl.src = api.apiURL('/view?' + new URLSearchParams(params)); | |
| this.videoEl.hidden = true; | |
| this.imgEl.hidden = false; | |
| } | |
| } | |
| previewWidget.parentEl.appendChild(previewWidget.videoEl) | |
| previewWidget.parentEl.appendChild(previewWidget.imgEl) | |
| }); | |
| } | |
| let copiedPath = undefined | |
| function addPreviewOptions(nodeType) { | |
| chainCallback(nodeType.prototype, "getExtraMenuOptions", function(_, options) { | |
| // The intended way of appending options is returning a list of extra options, | |
| // but this isn't used in widgetInputs.js and would require | |
| // less generalization of chainCallback | |
| let optNew = [] | |
| const previewWidget = this.widgets.find((w) => w.name === "videopreview"); | |
| let url = null | |
| if (previewWidget.videoEl?.hidden == false && previewWidget.videoEl.src) { | |
| if (['input', 'output', 'temp'].includes(previewWidget.value.params.type)) { | |
| //Use full quality video | |
| url = api.apiURL('/view?' + new URLSearchParams(previewWidget.value.params)); | |
| //Workaround for 16bit png: Just do first frame | |
| url = url.replace('%2503d', '001') | |
| } | |
| } else if (previewWidget.imgEl?.hidden == false && previewWidget.imgEl.src) { | |
| url = previewWidget.imgEl.src; | |
| url = new URL(url); | |
| } | |
| if (url) { | |
| optNew.push( | |
| { | |
| content: "Open preview", | |
| callback: () => { | |
| window.open(url, "_blank") | |
| }, | |
| }, | |
| { | |
| content: "Save preview", | |
| callback: () => { | |
| const a = document.createElement("a"); | |
| a.href = url; | |
| a.setAttribute("download", previewWidget.value.params.filename); | |
| document.body.append(a); | |
| a.click(); | |
| requestAnimationFrame(() => a.remove()); | |
| }, | |
| } | |
| ); | |
| if (previewWidget.value.params.fullpath) { | |
| copiedPath = previewWidget.value.params.fullpath | |
| const blob = new Blob([previewWidget.value.params.fullpath], | |
| { type: 'text/plain'}) | |
| optNew.push({ | |
| content: "Copy output filepath", | |
| callback: async () => { | |
| await navigator.clipboard.write([ | |
| new ClipboardItem({ | |
| 'text/plain': blob | |
| })])} | |
| }); | |
| } | |
| if (previewWidget.value.params.workflow) { | |
| let wParams = {...previewWidget.value.params, | |
| filename: previewWidget.value.params.workflow} | |
| let wUrl = api.apiURL('/view?' + new URLSearchParams(wParams)); | |
| optNew.push({ | |
| content: "Save workflow image", | |
| callback: () => { | |
| const a = document.createElement("a"); | |
| a.href = wUrl; | |
| a.setAttribute("download", previewWidget.value.params.workflow); | |
| document.body.append(a); | |
| a.click(); | |
| requestAnimationFrame(() => a.remove()); | |
| } | |
| }); | |
| } | |
| } | |
| const PauseDesc = (previewWidget.value.paused ? "Resume" : "Pause") + " preview"; | |
| if(previewWidget.videoEl.hidden == false) { | |
| optNew.push({content: PauseDesc, callback: () => { | |
| //animated images can't be paused and are more likely to cause performance issues. | |
| //changing src to a single keyframe is possible, | |
| //For now, the option is disabled if an animated image is being displayed | |
| if(previewWidget.value.paused) { | |
| previewWidget.videoEl?.play(); | |
| } else { | |
| previewWidget.videoEl?.pause(); | |
| } | |
| previewWidget.value.paused = !previewWidget.value.paused; | |
| }}); | |
| } | |
| //TODO: Consider hiding elements if no video preview is available yet. | |
| //It would reduce confusion at the cost of functionality | |
| //(if a video preview lags the computer, the user should be able to hide in advance) | |
| const visDesc = (previewWidget.value.hidden ? "Show" : "Hide") + " preview"; | |
| optNew.push({content: visDesc, callback: () => { | |
| if (!previewWidget.videoEl.hidden && !previewWidget.value.hidden) { | |
| previewWidget.videoEl.pause(); | |
| } else if (previewWidget.value.hidden && !previewWidget.videoEl.hidden && !previewWidget.value.paused) { | |
| previewWidget.videoEl.play(); | |
| } | |
| previewWidget.value.hidden = !previewWidget.value.hidden; | |
| previewWidget.parentEl.hidden = previewWidget.value.hidden; | |
| fitHeight(this); | |
| }}); | |
| optNew.push({content: "Sync preview", callback: () => { | |
| //TODO: address case where videos have varying length | |
| //Consider a system of sync groups which are opt-in? | |
| for (let p of document.getElementsByClassName("vhs_preview")) { | |
| for (let child of p.children) { | |
| if (child.tagName == "VIDEO") { | |
| child.currentTime=0; | |
| } else if (child.tagName == "IMG") { | |
| child.src = child.src; | |
| } | |
| } | |
| } | |
| }}); | |
| const muteDesc = (previewWidget.value.muted ? "Unmute" : "Mute") + " Preview" | |
| optNew.push({content: muteDesc, callback: () => { | |
| previewWidget.value.muted = !previewWidget.value.muted | |
| }}) | |
| if(options.length > 0 && options[0] != null && optNew.length > 0) { | |
| optNew.push(null); | |
| } | |
| options.unshift(...optNew); | |
| }); | |
| } | |
| function addFormatWidgets(nodeType, nodeData) { | |
| const formats = nodeData?.input?.required?.format?.[1]?.formats | |
| function parseFormats(options) { | |
| options.fullvalues = options._values; | |
| options._values = []; | |
| for (let format of options.fullvalues) { | |
| if (Array.isArray(format)) { | |
| options._values.push(format[0]); | |
| } else { | |
| options._values.push(format); | |
| } | |
| } | |
| } | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| var formatWidget = null; | |
| var formatWidgetIndex = -1; | |
| for(let i = 0; i < this.widgets.length; i++) { | |
| if (this.widgets[i].name === "format"){ | |
| formatWidget = this.widgets[i]; | |
| formatWidgetIndex = i+1; | |
| } | |
| } | |
| let formatWidgetsCount = 0; | |
| //Pre-process options to just names | |
| formatWidget.options._values = formatWidget.options.values; | |
| parseFormats(formatWidget.options); | |
| Object.defineProperty(formatWidget.options, "values", { | |
| set : (value) => { | |
| formatWidget.options._values = value; | |
| parseFormats(formatWidget.options); | |
| }, | |
| get : () => { | |
| return formatWidget.options._values; | |
| } | |
| }) | |
| formatWidget._value = formatWidget.value; | |
| Object.defineProperty(formatWidget, "value", { | |
| set : (value) => { | |
| formatWidget._value = value; | |
| let newWidgets = []; | |
| const fullDef = formatWidget.options.fullvalues.find((w) => Array.isArray(w) ? w[0] === value : w === value); | |
| if (!Array.isArray(fullDef) && !formats?.[value]) { | |
| formatWidget._value = value; | |
| } else { | |
| formatWidget._value = value; | |
| let formatWidgets = formats?.[value] ?? fullDef[1] | |
| for (let wDef of formatWidgets) { | |
| //create widgets. Heavy borrowed from web/scripts/app.js | |
| //default implementation doesn't work since it automatically adds | |
| //the widget in the wrong spot. | |
| //TODO: consider letting this happen and just removing from list? | |
| let w = {}; | |
| w.name = wDef[0]; | |
| w.config = wDef.slice(1); | |
| let inputData = wDef.slice(1); | |
| w.type = inputData[0]; | |
| w.options = inputData[1] ? inputData[1] : {}; | |
| if (Array.isArray(w.type)) { | |
| w.value = w.type[0]; | |
| w.options.values = w.type; | |
| w.type = "combo"; | |
| } | |
| if(inputData[1]?.default != undefined) { | |
| w.value = inputData[1].default; | |
| } | |
| if (w.type == "INT") { | |
| Object.assign(w.options, {"precision": 0, "step": 10}) | |
| w.callback = function (v) { | |
| const s = this.options.step / 10; | |
| this.value = Math.round(v / s) * s; | |
| } | |
| } | |
| const typeTable = {BOOLEAN: "toggle", STRING: "text", INT: "number", FLOAT: "number"}; | |
| if (w.type in typeTable) { | |
| w.type = typeTable[w.type]; | |
| } | |
| newWidgets.push(w); | |
| } | |
| } | |
| this.widgets.splice(formatWidgetIndex, formatWidgetsCount, ...newWidgets); | |
| fitHeight(this); | |
| formatWidgetsCount = newWidgets.length; | |
| }, | |
| get : () => { | |
| return formatWidget._value; | |
| } | |
| }); | |
| }); | |
| } | |
| function addLoadCommon(nodeType, nodeData) { | |
| addVideoPreview(nodeType); | |
| initializeLoadFormat(nodeType, nodeData) | |
| addPreviewOptions(nodeType); | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| //widget.callback adds unused arguements which need culling | |
| const node = this | |
| function update(key) { | |
| return (value) => { | |
| let params = {} | |
| params[key] = value | |
| node?.updateParameters(params) | |
| } | |
| } | |
| let prior_ar = -2 | |
| const widthWidget = this.widgets.find((w) => w.name === "custom_width"); | |
| const heightWidget = this.widgets.find((w) => w.name === "custom_height"); | |
| function updateAR(value) { | |
| let new_ar = -1 | |
| if (widthWidget.value & heightWidget.value) { | |
| new_ar = widthWidget.value / heightWidget.value | |
| } | |
| if (new_ar != prior_ar) { | |
| node?.updateParameters({'custom_width': widthWidget.value, | |
| 'custom_height': heightWidget.value}) | |
| prior_ar = new_ar | |
| } | |
| } | |
| const offsetWidget = this.widgets.find((w) => w.name === "start_time"); | |
| if (offsetWidget) { | |
| offsetWidget.options.step = 10 | |
| } | |
| let widgetMap = {'frame_load_cap': 'frame_load_cap', | |
| 'skip_first_frames': 'skip_first_frames', 'select_every_nth': 'select_every_nth', | |
| 'start_time': 'start_time', 'force_rate': 'force_rate', | |
| 'custom_width': updateAR, 'custom_height': updateAR, | |
| 'image_load_cap': 'image_load_cap', 'skip_first_images': 'skip_first_images' | |
| } | |
| for (let widget of this.widgets) { | |
| if (widget.name in widgetMap) { | |
| if (typeof(widgetMap[widget.name]) == 'function') { | |
| chainCallback(widget, "callback", widgetMap[widget.name]); | |
| } else { | |
| chainCallback(widget, "callback", update(widgetMap[widget.name])) | |
| } | |
| } | |
| if (widget.type != "button") { | |
| widget.callback?.(widget.value) | |
| } | |
| } | |
| }); | |
| } | |
| function path_stem(path) { | |
| let i = path.lastIndexOf("/"); | |
| if (i >= 0) { | |
| return [path.slice(0,i+1),path.slice(i+1)]; | |
| } | |
| return ["",path]; | |
| } | |
| function searchBox(event, [x,y], node) { | |
| //Ensure only one dialogue shows at a time | |
| if (this.prompt) | |
| return; | |
| this.prompt = true; | |
| let pathWidget = this; | |
| let dialog = document.createElement("div"); | |
| dialog.className = "litegraph litesearchbox graphdialog rounded" | |
| dialog.innerHTML = '<span class="name">Path</span> <input autofocus="" type="text" class="value"><button class="rounded">OK</button><div class="helper"></div>' | |
| dialog.close = () => { | |
| dialog.remove(); | |
| } | |
| document.body.append(dialog); | |
| if (app.canvas.ds.scale > 1) { | |
| dialog.style.transform = "scale(" + app.canvas.ds.scale + ")"; | |
| } | |
| var name_element = dialog.querySelector(".name"); | |
| var input = dialog.querySelector(".value"); | |
| var options_element = dialog.querySelector(".helper"); | |
| input.value = pathWidget.value; | |
| var timeout = null; | |
| let last_path = null; | |
| let extensions = pathWidget.options.vhs_path_extensions | |
| input.addEventListener("keydown", (e) => { | |
| dialog.is_modified = true; | |
| if (e.keyCode == 27) { | |
| //ESC | |
| dialog.close(); | |
| } else if (e.keyCode == 13 && e.target.localName != "textarea") { | |
| pathWidget.value = input.value; | |
| if (pathWidget.callback) { | |
| pathWidget.callback(pathWidget.value); | |
| } | |
| dialog.close(); | |
| } else { | |
| if (e.keyCode == 9) { | |
| //TAB | |
| input.value = last_path + options_element.firstChild.innerText; | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } else if (e.ctrlKey && (e.keyCode == 87 || e.keyCode == 66)) { | |
| //Ctrl+w or Ctrl+b | |
| //most browsers won't support, but it's good QOL for those that do | |
| input.value = path_stem(input.value.slice(0,-1))[0] | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } else if (e.ctrlKey && e.keyCode == 71) { | |
| //Ctrl+g | |
| //Temporarily disables extension filtering to show all files | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| extensions = undefined | |
| last_path = null; | |
| } | |
| if (timeout) { | |
| clearTimeout(timeout); | |
| } | |
| timeout = setTimeout(updateOptions, 10); | |
| return; | |
| } | |
| this.prompt=false; | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| }); | |
| var button = dialog.querySelector("button"); | |
| button.addEventListener("click", (e) => { | |
| pathWidget.value = input.value; | |
| if (pathWidget.callback) { | |
| pathWidget.callback(pathWidget.value); | |
| } | |
| //unsure why dirty is set here, but not on enter-key above | |
| node.graph.setDirtyCanvas(true); | |
| dialog.close(); | |
| this.prompt = false; | |
| }); | |
| var rect = app.canvas.canvas.getBoundingClientRect(); | |
| var offsetx = -20; | |
| var offsety = -20; | |
| if (rect) { | |
| offsetx -= rect.left; | |
| offsety -= rect.top; | |
| } | |
| if (event) { | |
| dialog.style.left = event.clientX + offsetx + "px"; | |
| dialog.style.top = event.clientY + offsety + "px"; | |
| } else { | |
| dialog.style.left = canvas.width * 0.5 + offsetx + "px"; | |
| dialog.style.top = canvas.height * 0.5 + offsety + "px"; | |
| } | |
| //Search code | |
| let options = [] | |
| function addResult(name, isDir) { | |
| let el = document.createElement("div"); | |
| el.innerText = name; | |
| el.className = "litegraph lite-search-item"; | |
| if (isDir) { | |
| el.className += " is-dir"; | |
| el.addEventListener("click", (e) => { | |
| input.value = last_path+name | |
| if (timeout) { | |
| clearTimeout(timeout); | |
| } | |
| timeout = setTimeout(updateOptions, 10); | |
| }); | |
| } else { | |
| el.addEventListener("click", (e) => { | |
| pathWidget.value = last_path+name; | |
| if (pathWidget.callback) { | |
| pathWidget.callback(pathWidget.value); | |
| } | |
| dialog.close(); | |
| pathWidget.prompt = false; | |
| }); | |
| } | |
| options_element.appendChild(el); | |
| } | |
| async function updateOptions() { | |
| timeout = null; | |
| let [path, remainder] = path_stem(input.value); | |
| if (last_path != path) { | |
| //fetch options. Must block execution here, so update should be async? | |
| let params = {path : path} | |
| if (extensions) { | |
| params.extensions = extensions | |
| } | |
| let optionsURL = api.apiURL('/vhs/getpath?' + new URLSearchParams(params)); | |
| try { | |
| let resp = await fetch(optionsURL); | |
| options = await resp.json(); | |
| options = options.map((o) => o.replace('.','\0')) | |
| options = options.sort() | |
| options = options.map((o) => o.replace('\0','.')) | |
| } catch(e) { | |
| options = [] | |
| } | |
| last_path = path; | |
| } | |
| options_element.innerHTML = ''; | |
| //filter options based on remainder | |
| for (let option of options) { | |
| if (option.startsWith(remainder)) { | |
| let isDir = option.endsWith('/') | |
| addResult(option, isDir); | |
| } | |
| } | |
| } | |
| setTimeout(async function() { | |
| input.focus(); | |
| await updateOptions(); | |
| }, 10); | |
| return dialog; | |
| } | |
| function button_action(widget) { | |
| if ( | |
| widget.options?.reset == undefined && | |
| widget.options?.disable == undefined | |
| ) { | |
| return 'None' | |
| } | |
| if ( | |
| widget.options.reset != undefined && | |
| widget.value != widget.options.reset | |
| ) { | |
| return 'Reset' | |
| } | |
| if ( | |
| widget.options.disable != undefined && | |
| widget.value != widget.options.disable | |
| ) { | |
| return 'Disable' | |
| } | |
| if (widget.options.reset != undefined) { | |
| return 'No Reset' | |
| } | |
| return 'No Disable' | |
| } | |
| function inner_value_change(widget, value, node, pos) { | |
| widget.value = value | |
| if (widget.options?.property && widget.options.property in node.properties) { | |
| node.setProperty(widget.options.property, value) | |
| } | |
| if (widget.callback) { | |
| widget.callback(widget.value, app.canvas, node, event) | |
| } | |
| } | |
| function drawAnnotated(ctx, node, widget_width, y, H) { | |
| const litegraph_base = LiteGraph | |
| const show_text = app.canvas.ds.scale > 0.5 | |
| const margin = 15 | |
| ctx.textAlign = 'left' | |
| ctx.strokeStyle = litegraph_base.WIDGET_OUTLINE_COLOR | |
| ctx.fillStyle = litegraph_base.WIDGET_BGCOLOR | |
| ctx.beginPath() | |
| if (show_text) | |
| ctx.roundRect(margin, y, widget_width - margin * 2, H, [H * 0.5]) | |
| else ctx.rect(margin, y, widget_width - margin * 2, H) | |
| ctx.fill() | |
| if (show_text) { | |
| const monospace_font = ctx.font.split(' ')[0] + ' monospace' | |
| if (!this.disabled) ctx.stroke() | |
| const button = button_action(this) | |
| if (button != 'None') { | |
| ctx.save() | |
| ctx.font = monospace_font | |
| if (button.startsWith('No ')) { | |
| ctx.fillStyle = litegraph_base.WIDGET_OUTLINE_COLOR | |
| } else { | |
| ctx.fillStyle = litegraph_base.WIDGET_TEXT_COLOR | |
| } | |
| if (button.endsWith('Reset')) { | |
| ctx.fillText('\u21ba', widget_width - margin - 33, y + H * 0.7) | |
| } else { | |
| ctx.fillText('\u2298', widget_width - margin - 33, y + H * 0.7) | |
| } | |
| ctx.restore() | |
| } | |
| ctx.fillStyle = litegraph_base.WIDGET_TEXT_COLOR | |
| if (!this.disabled) { | |
| ctx.beginPath() | |
| ctx.moveTo(margin + 16, y + 5) | |
| ctx.lineTo(margin + 6, y + H * 0.5) | |
| ctx.lineTo(margin + 16, y + H - 5) | |
| ctx.fill() | |
| ctx.beginPath() | |
| ctx.moveTo(widget_width - margin - 16, y + 5) | |
| ctx.lineTo(widget_width - margin - 6, y + H * 0.5) | |
| ctx.lineTo(widget_width - margin - 16, y + H - 5) | |
| ctx.fill() | |
| } | |
| ctx.fillStyle = litegraph_base.WIDGET_SECONDARY_TEXT_COLOR | |
| ctx.fillText(this.label || this.name, margin * 2 + 5, y + H * 0.7) | |
| ctx.fillStyle = litegraph_base.WIDGET_TEXT_COLOR | |
| ctx.textAlign = 'right' | |
| const text = Number(this.value).toFixed( | |
| this.options.precision !== undefined ? this.options.precision : 3 | |
| ) | |
| let value_offset = margin * 2 + 20 | |
| if (this.options.unit) { | |
| ctx.save() | |
| ctx.font = monospace_font | |
| ctx.fillStyle = litegraph_base.WIDGET_OUTLINE_COLOR | |
| ctx.fillText(this.options.unit, widget_width - value_offset, y + H * 0.7) | |
| value_offset += ctx.measureText(this.options.unit).width | |
| ctx.restore() | |
| } | |
| ctx.fillText(text, widget_width - value_offset, y + H * 0.7) | |
| const value_width = ctx.measureText(text).width | |
| const name_width = ctx.measureText(this.label || this.name).width | |
| const free_width = | |
| widget_width - (value_width + name_width + value_offset + 40) | |
| let annotation = '' | |
| if (this.annotation) { | |
| annotation = this.annotation(this.value, free_width) | |
| } else if ( | |
| this.options.annotation && | |
| this.value in this.options.annotation | |
| ) { | |
| annotation = this.options.annotation[this.value] | |
| } | |
| if (annotation) { | |
| ctx.fillStyle = litegraph_base.WIDGET_OUTLINE_COLOR | |
| const annotation_width = ctx.measureText(annotation).width | |
| if (free_width < annotation_width) { | |
| //Enforcing a widget's requested minimum width seems ill supported | |
| //hiding annotation is best, but existence should still be indicated | |
| annotation = '…' | |
| } | |
| ctx.fillText( | |
| annotation, | |
| widget_width - 5 - value_width - value_offset, | |
| y + H * 0.7 | |
| ) | |
| } | |
| } | |
| } | |
| function mouseAnnotated(event, [x, y], node) { | |
| const button = button_action(this) | |
| const widget_width = this.width || node.size[0] | |
| const old_value = this.value | |
| const delta = x < 40 ? -1 : x > widget_width - 48 ? 1 : 0 | |
| const margin = 15 | |
| var allow_scroll = true | |
| if (delta) { | |
| if (x > -3 && x < widget_width + 3) { | |
| allow_scroll = false | |
| } | |
| } | |
| if (allow_scroll && event.type == 'pointermove') { | |
| if (event.deltaX) | |
| this.value += event.deltaX * 0.1 * (this.options.step || 1) | |
| if (this.options.min != null && this.value < this.options.min) { | |
| this.value = this.options.min | |
| } | |
| if (this.options.max != null && this.value > this.options.max) { | |
| this.value = this.options.max | |
| } | |
| } else if (event.type == 'pointerdown') { | |
| if (x > widget_width - margin - 34 && x < widget_width - margin - 18) { | |
| if (button == 'Reset') { | |
| this.value = this.options.reset | |
| } else if (button == 'Disable') { | |
| this.value = this.options.disable | |
| } | |
| } else { | |
| this.value += delta * 0.1 * (this.options.step || 1) | |
| if (this.options.min != null && this.value < this.options.min) { | |
| this.value = this.options.min | |
| } | |
| if (this.options.max != null && this.value > this.options.max) { | |
| this.value = this.options.max | |
| } | |
| } | |
| } //end mousedown | |
| else if (event.type == 'pointerup') { | |
| if (event.click_time < 200 && delta == 0) { | |
| app.canvas.prompt( | |
| 'Value', | |
| this.value, | |
| function (v) { | |
| //NOTE: Original code uses eval here. This will not be reproduced | |
| this.value = Number(v) | |
| inner_value_change(this, this.value, node, [x, y]) | |
| }.bind(this), | |
| event | |
| ) | |
| } | |
| } | |
| if (old_value != this.value) | |
| setTimeout( | |
| function () { | |
| inner_value_change(this, this.value, node, [x, y]) | |
| }.bind(this), | |
| 20 | |
| ) | |
| return true | |
| } | |
| function makeAnnotated(widget, inputData) { | |
| const callback_orig = widget.callback | |
| Object.assign(widget, { | |
| type: "BOOLEAN",//Horrific, not namespaced, nonsensical, easier than upstreaming | |
| draw: drawAnnotated, | |
| mouse: mouseAnnotated, | |
| computeSize(width) { | |
| return [width, 20] | |
| }, | |
| callback(v) { | |
| if (v == 0) { | |
| return | |
| } | |
| if (this.options?.mod == undefined) { | |
| return callback_orig.apply(this, arguments); | |
| } | |
| const s = this.options.step / 10 | |
| let sh = this.options.mod | |
| this.value = Math.round((v - sh) / s) * s + sh | |
| }, | |
| config: inputData, | |
| options: Object.assign({}, inputData[1], widget.options) | |
| }) | |
| return widget | |
| } | |
| let latentPreviewNodes = new Set() | |
| app.registerExtension({ | |
| name: "VideoHelperSuite.Core", | |
| settings: [ | |
| { | |
| id: 'VHS.AdvancedPreviews', | |
| category: ['🎥🅥🅗🅢', 'Previews', 'Advanced Previews'], | |
| name: 'Advanced Previews', | |
| tooltip: 'Automatically transcode previews on request. Required for advanced functionality', | |
| type: 'combo', | |
| options: ['Never', 'Always', 'Input Only'], | |
| defaultValue: 'Input Only', | |
| }, | |
| { | |
| id: 'VHS.AdvancedPreviewsMinWidth', | |
| category: ['🎥🅥🅗🅢', 'Previews', 'Min Width'], | |
| name: 'Minimum preview width', | |
| tooltip: 'Advanced previews have their resolution downscaled to the node size for performance. While a node can be resized to increase preview quality, a minimum width can be set that previews won\'t be downscaled beneath. Preveiws will never be upscaled, so this can safely be set large.', | |
| type: 'number', | |
| attrs: { | |
| min: 0, | |
| step: 1, | |
| max: 3840, | |
| }, | |
| defaultValue: 0, | |
| }, | |
| { | |
| id: 'VHS.AdvancedPreviewsDeadline', | |
| category: ['🎥🅥🅗🅢', 'Previews', 'Deadline'], | |
| name: 'Deadline', | |
| tooltip: 'Determines how much time can be spent when encoding advanced previews. Realtime results in reduced quality, but good will likely cause the preview to stutter as initial generation occurs', | |
| type: 'combo', | |
| options: ['realtime', 'good'], | |
| defaultValue: 'realtime', | |
| }, | |
| { | |
| id: 'VHS.AdvancedPreviewsDefaultMute', | |
| category: ['🎥🅥🅗🅢', 'Previews', 'Default Mute'], | |
| name: 'Mute videos by default', | |
| type: 'boolean', | |
| defaultValue: false, | |
| }, | |
| { | |
| id: 'VHS.LatentPreview', | |
| category: ['🎥🅥🅗🅢', 'Sampling', 'Latent Previews'], | |
| name: 'Display animated previews when sampling', | |
| type: 'boolean', | |
| defaultValue: false, | |
| onChange(value) { | |
| if (!value) { | |
| //Remove any previewWidgets | |
| for (let n of latentPreviewNodes) { | |
| let i = n?.widgets?.findIndex((w) => w.name == 'vhslatentpreview') | |
| if (i >= 0) { | |
| n.widgets.splice(i,1)[0].onRemove() | |
| } | |
| } | |
| latentPreviewNodes = new Set() | |
| } | |
| }, | |
| }, | |
| { | |
| id: "VHS.LatentPreviewRate", | |
| category: ['🎥🅥🅗🅢', 'Sampling', 'Latent Preview Rate'], | |
| name: "Playback rate override.", | |
| type: 'number', | |
| attrs: { | |
| min: 0, | |
| step: 1, | |
| max: 60 | |
| }, | |
| tooltip: | |
| 'Force a specific frame rate for the playback of latent frames. This should not be confused with the output frame rate and will not match for video models.', | |
| defaultValue: 0, | |
| }, | |
| { | |
| id: 'VHS.MetadataImage', | |
| category: ['🎥🅥🅗🅢', 'Output', 'MetadataImage'], | |
| name: 'Save png of first frame for metadata', | |
| type: 'boolean', | |
| defaultValue: true, | |
| }, | |
| { | |
| id: 'VHS.KeepIntermediate', | |
| category: ['🎥🅥🅗🅢', 'Output', 'Keep Intermediate'], | |
| name: 'Keep required intermediate files after sucessful execution', | |
| type: 'boolean', | |
| defaultValue: true, | |
| }, | |
| ], | |
| async beforeRegisterNodeDef(nodeType, nodeData, app) { | |
| if(nodeData?.name?.startsWith("VHS_")) { | |
| useKVState(nodeType); | |
| if (nodeData.description) { | |
| let description = nodeData.description | |
| let el = document.createElement("div") | |
| el.innerHTML = description | |
| if (!el.children.length) { | |
| //Is plaintext. Do minor convenience formatting | |
| let chunks = description.split('\n') | |
| nodeData.description = chunks[0] | |
| description = chunks.join('<br>') | |
| } else { | |
| nodeData.description = el.querySelector('#VHS_shortdesc')?.innerHTML || el.children[1]?.firstChild?.innerHTML | |
| } | |
| chainCallback(nodeType.prototype, "onNodeCreated", function () { | |
| helpDOM.addHelp(this, nodeType, description) | |
| this.setSize(this.computeSize()) | |
| }) | |
| } | |
| chainCallback(nodeType.prototype, "onNodeCreated", function () { | |
| let new_widgets = [] | |
| if (this.widgets) { | |
| for (let w of this.widgets) { | |
| let input = this.constructor.nodeData.input | |
| let config = input?.required[w.name] ?? input.optional[w.name] | |
| if (!config) { | |
| continue | |
| } | |
| if (w?.type == "text" && config[1].vhs_path_extensions) { | |
| new_widgets.push(app.widgets.VHSPATH({}, w.name, ["VHSPATH", config[1]])); | |
| } else if (w?.type == "number") { | |
| new_widgets.push(makeAnnotated(w, config)) | |
| } else { | |
| new_widgets.push(w) | |
| } | |
| } | |
| this.widgets = new_widgets; | |
| } | |
| const originalAddInput = this.addInput; | |
| this.addInput = function(name, type, options) { | |
| if (options.widget) { | |
| //Is Converted Widget | |
| const widget = this.widgets.find((w) => w.name == name) | |
| if (widget?.config) { | |
| //Has override for type | |
| type = widget.config[0] | |
| if (type == 'FLOAT') { | |
| type = "FLOAT,INT" | |
| } | |
| const symbol = Object.getOwnPropertySymbols(options.widget)[0] | |
| options.widget[symbol] = () => widget.config | |
| } | |
| } | |
| return originalAddInput.apply(this, [name, type, options]) | |
| } | |
| }); | |
| } | |
| if (nodeData?.name == "VHS_LoadImages") { | |
| addUploadWidget(nodeType, nodeData, "directory", "folder"); | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| const pathWidget = this.widgets.find((w) => w.name === "directory"); | |
| chainCallback(pathWidget, "callback", (value) => { | |
| if (!value) { | |
| return; | |
| } | |
| let params = {filename : value, type : "input", format: "folder"}; | |
| this.updateParameters(params, true); | |
| }); | |
| }); | |
| addLoadCommon(nodeType, nodeData); | |
| } else if (nodeData?.name == "VHS_LoadImagesPath") { | |
| addUploadWidget(nodeType, nodeData, "directory", "folder"); | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| const pathWidget = this.widgets.find((w) => w.name === "directory"); | |
| chainCallback(pathWidget, "callback", (value) => { | |
| if (!value) { | |
| return; | |
| } | |
| let params = {filename : value, type : "path", format: "folder"}; | |
| this.updateParameters(params, true); | |
| }); | |
| }); | |
| addLoadCommon(nodeType, nodeData); | |
| } else if (nodeData?.name == "VHS_LoadVideo" || nodeData?.name == "VHS_LoadVideoFFmpeg") { | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| const pathWidget = this.widgets.find((w) => w.name === "video"); | |
| chainCallback(pathWidget, "callback", (value) => { | |
| if (!value) { | |
| return; | |
| } | |
| let parts = ["input", value]; | |
| let extension_index = parts[1].lastIndexOf("."); | |
| let extension = parts[1].slice(extension_index+1); | |
| let format = "video" | |
| if (["gif", "webp", "avif"].includes(extension)) { | |
| format = "image" | |
| } | |
| format += "/" + extension; | |
| let params = {filename : parts[1], type : parts[0], format: format}; | |
| this.updateParameters(params, true); | |
| }); | |
| }); | |
| addUploadWidget(nodeType, nodeData, "video"); | |
| addLoadCommon(nodeType, nodeData); | |
| addVAEOutputToggle(nodeType, nodeData); | |
| applyVHSAudioLinksFix(nodeType, nodeData, 2) | |
| } else if (nodeData?.name == "VHS_LoadAudioUpload") { | |
| addUploadWidget(nodeType, nodeData, "audio", "audio"); | |
| applyVHSAudioLinksFix(nodeType, nodeData, 0) | |
| } else if (nodeData?.name == "VHS_LoadAudio"){ | |
| applyVHSAudioLinksFix(nodeType, nodeData, 0) | |
| } else if (nodeData?.name == "VHS_LoadVideoPath" || nodeData?.name == "VHS_LoadVideoFFmpegPath") { | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| const pathWidget = this.widgets.find((w) => w.name === "video"); | |
| chainCallback(pathWidget, "callback", (value) => { | |
| let extension_index = value.lastIndexOf("."); | |
| let extension = value.slice(extension_index+1); | |
| let format = "video" | |
| if (["gif", "webp", "avif"].includes(extension)) { | |
| format = "image" | |
| } | |
| format += "/" + extension; | |
| let params = {filename : value, type: "path", format: format}; | |
| this.updateParameters(params, true); | |
| }); | |
| }); | |
| addLoadCommon(nodeType, nodeData); | |
| addVAEOutputToggle(nodeType, nodeData); | |
| applyVHSAudioLinksFix(nodeType, nodeData, 2) | |
| } else if (nodeData?.name == "VHS_LoadImagePath") { | |
| addLoadCommon(nodeType, nodeData); | |
| addVAEOutputToggle(nodeType, nodeData); | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| const pathWidget = this.widgets.find((w) => w.name === "image"); | |
| chainCallback(pathWidget, "callback", (value) => { | |
| let extension_index = value.lastIndexOf("."); | |
| let extension = value.slice(extension_index+1); | |
| let format = "video" + "/" + extension; | |
| let params = {filename : value, type: "path", format: format}; | |
| this.updateParameters(params, true); | |
| }); | |
| }); | |
| } else if (nodeData?.name == "VHS_VideoCombine") { | |
| addDateFormatting(nodeType, "filename_prefix"); | |
| chainCallback(nodeType.prototype, "onExecuted", function(message) { | |
| if (message?.gifs) { | |
| this.updateParameters(message.gifs[0], true); | |
| } | |
| }); | |
| addVideoPreview(nodeType, false); | |
| addPreviewOptions(nodeType); | |
| addFormatWidgets(nodeType, nodeData); | |
| addVAEInputToggle(nodeType, nodeData) | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| this._outputs = this.outputs | |
| Object.defineProperty(this, "outputs", { | |
| set : function(value) { | |
| this._outputs = value; | |
| requestAnimationFrame(() => { | |
| if (app.nodeOutputs[this.id + ""]) { | |
| this.updateParameters(app.nodeOutputs[this.id+""].gifs[0], true); | |
| } | |
| }) | |
| }, | |
| get : function() { | |
| return this._outputs; | |
| } | |
| }); | |
| //Display previews after reload/ loading workflow | |
| this.updateParameters({}, true); | |
| }); | |
| } else if (nodeData?.name == "VHS_SaveImageSequence") { | |
| //Disabled for safety as VHS_SaveImageSequence is not currently merged | |
| //addDateFormating(nodeType, "directory_name", timestamp_widget=true); | |
| //addTimestampWidget(nodeType, nodeData, "directory_name") | |
| } else if (nodeData?.name == "VHS_BatchManager") { | |
| chainCallback(nodeType.prototype, "onNodeCreated", function() { | |
| this.widgets.push({name: "count", type: "dummy", value: 0, | |
| computeSize: () => {return [0,-4]}, | |
| afterQueued: function() {this.value++;}}); | |
| }); | |
| } else if (nodeData?.name == "VHS_Unbatch") { | |
| cloneType(nodeType, nodeData) | |
| } | |
| }, | |
| async getCustomWidgets() { | |
| return { | |
| VHSPATH(node, inputName, inputData) { | |
| let w = { | |
| name : inputName, | |
| type : "VHS.PATH", | |
| value : "", | |
| draw : function(ctx, node, widget_width, y, H) { | |
| //Adapted from litegraph.core.js:drawNodeWidgets | |
| var show_text = app.canvas.ds.scale > 0.5; | |
| var margin = 15; | |
| var text_color = LiteGraph.WIDGET_TEXT_COLOR; | |
| var secondary_text_color = LiteGraph.WIDGET_SECONDARY_TEXT_COLOR; | |
| ctx.textAlign = "left"; | |
| ctx.strokeStyle = LiteGraph.WIDGET_OUTLINE_COLOR; | |
| ctx.fillStyle = LiteGraph.WIDGET_BGCOLOR; | |
| ctx.beginPath(); | |
| if (show_text) | |
| ctx.roundRect(margin, y, widget_width - margin * 2, H, [H * 0.5]); | |
| else | |
| ctx.rect( margin, y, widget_width - margin * 2, H ); | |
| ctx.fill(); | |
| if (show_text) { | |
| if(!this.disabled) | |
| ctx.stroke(); | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.rect(margin, y, widget_width - margin * 2, H); | |
| ctx.clip(); | |
| //ctx.stroke(); | |
| ctx.fillStyle = secondary_text_color; | |
| const label = this.label || this.name; | |
| if (label != null) { | |
| ctx.fillText(label, margin * 2, y + H * 0.7); | |
| } | |
| ctx.fillStyle = this.value ? text_color : '#777'; | |
| ctx.textAlign = "right"; | |
| let disp_text = this.format_path(String(this.value || this.options.placeholder)) | |
| ctx.fillText(disp_text, widget_width - margin * 2, y + H * 0.7); //30 chars max | |
| ctx.restore(); | |
| } | |
| }, | |
| mouse : searchBox, | |
| options : {}, | |
| format_path : function(path) { | |
| //Formats the full path to be under 30 characters | |
| if (path.length <= 30) { | |
| return path; | |
| } | |
| let filename = path_stem(path)[1] | |
| if (filename.length > 28) { | |
| //may all fit, but can't squeeze more info | |
| return filename.substr(0,30); | |
| } | |
| //TODO: find solution for windows, path[1] == ':'? | |
| let isAbs = path[0] == '/'; | |
| let partial = path.substr(path.length - (isAbs ? 28:29)) | |
| let cutoff = partial.indexOf('/'); | |
| if (cutoff < 0) { | |
| //Can occur, but there isn't a nicer way to format | |
| return path.substr(path.length-30); | |
| } | |
| return (isAbs ? '/…':'…') + partial.substr(cutoff); | |
| } | |
| }; | |
| if (inputData.length > 1) { | |
| w.options = inputData[1] | |
| if (inputData[1].default) { | |
| w.value = inputData[1].default; | |
| } | |
| } | |
| if (!node.widgets) { | |
| node.widgets = []; | |
| } | |
| node.widgets.push(w); | |
| return w; | |
| }, | |
| VHSFLOAT(node, inputName, inputData, app) { | |
| let w = app.widgets.FLOAT(node, inputName, inputData, app) | |
| return makeAnnotated(w, inputData); | |
| }, | |
| VHSINT(node, inputName, inputData, app_arg) { | |
| let w = app.widgets.INT(node, inputName, inputData, app) | |
| return makeAnnotated(w, inputData); | |
| } | |
| } | |
| }, | |
| async loadedGraphNode(node) { | |
| //Check and migrate inputs named batch_manager from old workflows | |
| if (node.type?.startsWith("VHS_") && node.inputs) { | |
| const batchInput = node.inputs.find((i) => i.name == "batch_manager") | |
| if (batchInput) { | |
| batchInput.name = "meta_batch" | |
| } | |
| } | |
| }, | |
| async beforeConfigureGraph(graphData, missingNodeTypes) { | |
| if(helpDOM?.node) { | |
| helpDOM.node = undefined | |
| } | |
| }, | |
| async setup() { | |
| //cg-use-everywhere link workaround | |
| //particularly invasive, plan to remove | |
| let originalGraphToPrompt = app.graphToPrompt | |
| let graphToPrompt = async function() { | |
| let res = await originalGraphToPrompt.apply(this, arguments); | |
| for (let n of app.graph._nodes) { | |
| if (n?.type?.startsWith('VHS_LoadVideo')) { | |
| if (!n?.inputs[1]?.link && res?.output[n.id]?.inputs?.vae) { | |
| delete res.output[n.id].inputs.vae | |
| } | |
| } | |
| } | |
| res.workflow.extra['VHS_latentpreview'] = app.ui.settings.getSettingValue("VHS.LatentPreview") | |
| res.workflow.extra['VHS_latentpreviewrate'] = app.ui.settings.getSettingValue("VHS.LatentPreviewRate") | |
| res.workflow.extra['VHS_MetadataImage'] = app.ui.settings.getSettingValue("VHS.MetadataImage") | |
| res.workflow.extra['VHS_KeepIntermediate'] = app.ui.settings.getSettingValue("VHS.KeepIntermediate") | |
| return res | |
| } | |
| app.graphToPrompt = graphToPrompt | |
| //Add a handler for pasting video data | |
| document.addEventListener('paste', async (e) => { | |
| if (!e.target.classList.contains('litegraph') && | |
| !e.target.classList.contains('graph-canvas-container')) { | |
| return | |
| } | |
| let data = e.clipboardData || window.clipboardData | |
| let filepath = data.getData('text/plain') | |
| let video | |
| for (const item of data.items) { | |
| if (item.type.startsWith('video/')) { | |
| video = item | |
| break | |
| } | |
| } | |
| if (filepath && copiedPath == filepath) { | |
| //Add a Load Video (Path) and populate filepath | |
| const pastedNode = LiteGraph.createNode('VHS_LoadVideoPath') | |
| app.graph.add(pastedNode) | |
| pastedNode.pos[0] = app.canvas.graph_mouse[0] | |
| pastedNode.pos[1] = app.canvas.graph_mouse[1] | |
| pastedNode.widgets[0].value = filepath | |
| pastedNode.widgets[0].callback?.(filepath) | |
| } else if (video && false) { | |
| //Disabled due to lack of testing | |
| //Add a Load Video (Upload), then upload the file, then select the file | |
| const pastedNode = LiteGraph.createNode('VHS_LoadVideo') | |
| app.graph.add(pastedNode) | |
| pastedNode.pos[0] = app.canvas.graph_mouse[0] | |
| pastedNode.pos[1] = app.canvas.graph_mouse[1] | |
| const pathWidget = pastedNode.widgets[0] | |
| //TODO: upload to pasted dir? | |
| const blob = video.getAsFile() | |
| const resp = await uploadFile(blob) | |
| if (resp.status != 200) { | |
| //upload failed and file can not be added to options | |
| return; | |
| } | |
| const filename = (await resp.json()).name; | |
| pathWidget.options.values.push(filename); | |
| pathWidget.value = filename; | |
| pathWidget.callback?.(filename) | |
| } else { | |
| return | |
| } | |
| e.preventDefault() | |
| e.stopImmediatePropagation() | |
| return false | |
| }, true) | |
| }, | |
| async init() { | |
| if (app.ui.settings.getSettingValue("VHS.AdvancedPreviews") == true) { | |
| app.ui.settings.setSettingValue("VHS.AdvancedPreviews", 'Always') | |
| } | |
| if (app.ui.settings.getSettingValue("VHS.AdvancedPreviews") == false) { | |
| app.ui.settings.setSettingValue("VHS.AdvancedPreviews", 'Never') | |
| } | |
| if (app.VHSHelp != helpDOM) { | |
| helpDOM = app.VHSHelp | |
| } else { | |
| initHelpDOM() | |
| } | |
| let e = app.extensions.filter((w) => w.name == 'UVR5.AudioPreviewer') | |
| if (e.length) { | |
| let orig = e[0].beforeRegisterNodeDef | |
| e[0].beforeRegisterNodeDef = function(nodeType, nodeData, app) { | |
| if(!nodeData?.name?.startsWith("VHS_")) { | |
| return orig.apply(this, arguments); | |
| } | |
| } | |
| } | |
| }, | |
| }); | |
| let previewImages = [] | |
| let animateInterval | |
| api.addEventListener('VHS_latentpreview', ({ detail }) => { | |
| let setting = app.ui.settings.getSettingValue("VHS.LatentPreview") | |
| if (!setting) { | |
| return | |
| } | |
| let id = app.runningNodeId | |
| if (id == null) { | |
| return | |
| } | |
| let previewNode = app.graph.getNodeById(id) | |
| latentPreviewNodes.add(previewNode) | |
| let previewWidget = previewNode.widgets.find((w) => w.name == "vhslatentpreview") | |
| if (!previewWidget) { | |
| let canvasEl = document.createElement("canvas") | |
| previewWidget = previewNode.addDOMWidget("vhslatentpreview", "vhscanvas", canvasEl, { | |
| serialize: false, | |
| hideOnZoom: false, | |
| }); | |
| previewWidget.computeSize = function(width) { | |
| if (this.aspectRatio) { | |
| let height = (previewNode.size[0]-20)/ this.aspectRatio + 10; | |
| if (!(height > 0)) { | |
| height = 0; | |
| } | |
| this.computedHeight = height + 10; | |
| return [width, height]; | |
| } | |
| return [width, -4];//no loaded src, widget should not display | |
| } | |
| } | |
| let firstPreview = true | |
| let ctx | |
| previewImages = [] | |
| previewImages.length = detail.length | |
| let displayIndex = 0 | |
| if (animateInterval) { | |
| clearTimeout(animateInterval) | |
| } | |
| animateInterval = setInterval(() => { | |
| if (app.runningNodeId != id) { | |
| clearTimeout(animateInterval) | |
| animateInterval = undefined | |
| return | |
| } | |
| if (!previewImages[displayIndex]) { | |
| return | |
| } | |
| let canvasEl = previewWidget.element | |
| if (!ctx) { | |
| previewWidget.aspectRatio = previewImages[displayIndex].width / previewImages[displayIndex].height | |
| canvasEl.width = previewImages[displayIndex].width | |
| canvasEl.height = previewImages[displayIndex].height | |
| ctx = canvasEl.getContext("2d") | |
| fitHeight(previewNode) | |
| } | |
| ctx.drawImage(previewImages[displayIndex],0,0) | |
| displayIndex = (displayIndex + 1) % previewImages.length | |
| }, 1000/detail.rate); | |
| }); | |
| api.addEventListener('b_preview', async (e) => { | |
| if (!animateInterval) { | |
| return | |
| } | |
| e.preventDefault() | |
| e.stopImmediatePropagation() | |
| e.stopPropagation() | |
| const ab = await e.detail.slice(0,8).arrayBuffer() | |
| const index = new DataView(ab).getUint32(4) | |
| previewImages[index] = await window.createImageBitmap(e.detail.slice(8)) | |
| return false | |
| }, true); | |